diff --git a/.circleci/comment-artifacts.sh b/.circleci/comment-artifacts.sh
deleted file mode 100644
index 7991e99012..0000000000
--- a/.circleci/comment-artifacts.sh
+++ /dev/null
@@ -1,22 +0,0 @@
-#!/bin/bash
-
-URL="https://callstack-github-bot.herokuapp.com/comment"
-LINK="https://output.circle-artifacts.com/output/job/$CIRCLE_WORKFLOW_JOB_ID/artifacts/$CIRCLE_NODE_INDEX/docs/index.html"
-TEMPLATE="Hey @{{user.login}}, thank you for your pull request 🤗. The documentation from this branch can be viewed [here]($LINK)."
-
-read -r -d '' DATA << EOM
-{
-  "pull_request": "$CIRCLE_PULL_REQUEST",
-  "template": "$TEMPLATE",
-  "test": {
-    "type": "string",
-    "data": "The documentation from this branch can be viewed"
-  },
-  "update": true
-}
-EOM
-
-curl \
-  -H "Content-Type: application/json" \
-  -d "$DATA" \
-  -X POST $URL
diff --git a/.circleci/config.yml b/.circleci/config.yml
deleted file mode 100644
index c4053c5f19..0000000000
--- a/.circleci/config.yml
+++ /dev/null
@@ -1,154 +0,0 @@
-version: 2.1
-
-executors:
-  default:
-    docker:
-      - image: cimg/node:20.19.0
-    working_directory: ~/react-native-paper
-
-commands:
-  attach_project:
-    steps:
-      - attach_workspace:
-          at: ~/react-native-paper
-
-jobs:
-  install-dependencies:
-    executor: default
-    steps:
-      - checkout
-      - attach_project
-      - restore_cache:
-          keys:
-            - dependencies-{{ checksum "package.json" }}
-            - dependencies-
-      - restore_cache:
-          keys:
-            - dependencies-example-{{ checksum "example/package.json" }}
-            - dependencies-example-
-      - run:
-          name: Install dependencies
-          command: |
-            sudo corepack enable
-            yarn --cwd example --immutable
-            yarn --cwd docs --immutable
-            yarn --immutable
-      - save_cache:
-          key: dependencies-{{ checksum "package.json" }}
-          paths:
-            - node_modules
-      - save_cache:
-          key: dependencies-docs-{{ checksum "docs/package.json" }}
-          paths:
-            - docs/node_modules
-      - save_cache:
-          key: dependencies-example-{{ checksum "example/package.json" }}
-          paths:
-            - example/node_modules
-      - persist_to_workspace:
-          root: .
-          paths:
-            - .
-  lint:
-    executor: default
-    steps:
-      - attach_project
-      - run:
-          name: Lint files
-          command: |
-            yarn lint-no-fix
-
-  typescript:
-    executor: default
-    steps:
-      - attach_project
-      - run:
-          name: Typecheck files
-          command: |
-            yarn typescript
-
-  unit-tests:
-    executor: default
-    steps:
-      - attach_project
-      - restore_cache:
-          name: Restore Jest Cache
-          keys:
-            - jest-cache-{{ .Branch }}
-            - jest-cache
-      - run:
-          name: Run unit tests
-          command: |
-            yarn test --maxWorkers=2 --coverage
-      - store_artifacts:
-          path: coverage
-          destination: coverage
-      - save_cache:
-          paths:
-            - ./cache/jest
-          key: jest-cache-{{ .Branch }}
-
-  build-package:
-    executor: default
-    steps:
-      - attach_project
-      - run:
-          name: Build package
-          command: |
-            yarn prepack
-            node ./scripts/typescript-output-lint
-
-  build-docs:
-    executor: default
-    steps:
-      - attach_project
-      - run:
-          name: Build docs
-          command: |
-            export DOCUSAURUS_BASE_URL="/output/job/$CIRCLE_WORKFLOW_JOB_ID/artifacts/$CIRCLE_NODE_INDEX/docs/"
-            cd docs && yarn build && cd ..
-            bash .circleci/comment-artifacts.sh
-      - store_artifacts:
-          path: docs/build
-          destination: docs
-
-  deploy-docs:
-    executor: default
-    steps:
-      - checkout
-      - attach_project
-      - add_ssh_keys:
-          fingerprints:
-            - '2f:b4:ed:e1:25:88:5c:4a:03:c2:16:40:56:70:29:29'
-      - run:
-          name: Deploy docs to GitHub pages
-          command: |
-            bash .circleci/deploy-docs.sh
-
-workflows:
-  build-and-test:
-    jobs:
-      - install-dependencies
-      - lint:
-          requires:
-            - install-dependencies
-      - typescript:
-          requires:
-            - install-dependencies
-      - unit-tests:
-          requires:
-            - install-dependencies
-      - build-package:
-          requires:
-            - install-dependencies
-      - build-docs:
-          requires:
-            - install-dependencies
-          filters:
-            branches:
-              ignore: main
-      - deploy-docs:
-          filters:
-            branches:
-              only:
-                - main
diff --git a/.circleci/deploy-docs.sh b/.circleci/deploy-docs.sh
deleted file mode 100755
index 5546f8bb2c..0000000000
--- a/.circleci/deploy-docs.sh
+++ /dev/null
@@ -1,72 +0,0 @@
-#!/bin/bash
-
-# Based on domenic's tutorial: https://gist.github.com/domenic/ec8b0fc8ab45f39403dd
-
-set -euxo pipefail # Exit with nonzero exit code if anything fails
-
-DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
-
-SOURCE_BRANCH="main"
-TARGET_BRANCH="gh-pages"
-
-git checkout $SOURCE_BRANCH
-
-cd $DIR/..
-
-# Install React Native Paper dependencies for examples
-yarn
-
-cd docs
-
-# Save some useful information
-REPO=`git config remote.origin.url`
-SSH_REPO=${REPO/https:\/\/github.com\//git@github.com:}
-SHA=`git rev-parse --verify HEAD`
-
-# Clone the existing gh-pages for this repo into dist/
-# Create a new empty branch if gh-pages doesn't exist yet (should only happen on first deploy)
-git clone $REPO dist
-cd dist
-git checkout $TARGET_BRANCH || git checkout --orphan $TARGET_BRANCH
-cd ..
-
-# Clean existing dist/ contents
-rm -rf dist/**/* || :
-rm -f dist/*.{html,css,js,json,map,xml} || :
-rmdir dist/* || :
-
-# Run our build script.
-yarn
-yarn build
-
-# Move the built docs to cloned `gh-pages` directory
-cp -R build/. dist
-
-rm -rf build
-
-# Change directory to the one using `gh-pages` branch
-cd dist
-
-# Configure git.
-git config user.name "$COMMIT_AUTHOR_NAME"
-git config user.email "$COMMIT_AUTHOR_EMAIL"
-
-git add -A .
-
-# If there are no changes to the compiled dist (e.g. this is a README update) then just bail.
-if git diff --cached --quiet; then
-    echo "No changes to the output on this push; exiting."
-    exit 0
-fi
-
-# Commit the "changes", i.e. the new version.
-# The delta will show diffs between new and old versions.
-git commit -m "Deploy to GitHub Pages: ${SHA}"
-
-# Now that we're all set up, we can push.
-git push $SSH_REPO $TARGET_BRANCH
-
-# Change back to original branch
-cd ..
-git checkout $SOURCE_BRANCH
-yarn
diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index 18c50df521..0000000000
--- a/.eslintignore
+++ /dev/null
@@ -1,12 +0,0 @@
-node_modules/
-coverage/
-docs/dist/
-docs/build/
-docs/public/
-docs/static/
-web-build/
-testSetup.js
-__fixtures__/
-
-# generated by bob
-lib/
diff --git a/.eslintrc b/.eslintrc
deleted file mode 100644
index 380df91c1e..0000000000
--- a/.eslintrc
+++ /dev/null
@@ -1,77 +0,0 @@
-{
-  "env": {
-    "browser": true
-  },
-
-  "extends": "@callstack",
-
-  "plugins": ["eslint-plugin-local-rules"],
-
-  "rules": {
-    "local-rules/no-import-react-forwardref": "error",
-    "local-rules/no-react-forwardref-usage": "error",
-
-    "one-var": "off",
-    "no-multi-assign": "off",
-    "no-nested-ternary": "off",
-    "no-undef": "off",
-    "global-require": "off",
-
-    "import/no-extraneous-dependencies": "off",
-    "import/first": "off",
-    "import/order": [
-      "error",
-      {
-        "groups": [
-          ["external", "builtin"],
-          "internal",
-          ["sibling", "parent"],
-          "index"
-        ],
-        "pathGroups": [
-          {
-            "pattern": "@(react|react-native)",
-            "group": "external",
-            "position": "before"
-          },
-          {
-            "pattern": "@src/**",
-            "group": "internal"
-          }
-        ],
-        "pathGroupsExcludedImportTypes": ["internal", "react"],
-        "newlines-between": "always",
-        "alphabetize": {
-          "order": "asc",
-          "caseInsensitive": true
-        }
-      }
-    ],
-
-    "react-native/no-unused-styles": "error",
-    "react-native/split-platform-components": "off",
-    "react-native/no-raw-text": "off",
-    "react-native-a11y/has-valid-accessibility-descriptors": "off"
-  },
-
-  "overrides": [
-    {
-      "files": ["*.test.js", "*.test.tsx"],
-      "rules": {
-        "local-rules/no-react-forwardref-usage": "off"
-      }
-    }
-  ],
-
-  "settings": {
-    "import/extensions": [".js", ".ts", ".tsx"],
-    "import/parsers": {
-      "@typescript-eslint/parser": [".ts", ".tsx"]
-    },
-    "import/resolver": {
-      "node": {
-        "extensions": [".js", ".ts", ".tsx"]
-      }
-    }
-  }
-}
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000000..6313b56c57
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1 @@
+* text=auto eol=lf
diff --git a/.github/actions/setup/action.yml b/.github/actions/setup/action.yml
new file mode 100644
index 0000000000..66e709c9e8
--- /dev/null
+++ b/.github/actions/setup/action.yml
@@ -0,0 +1,36 @@
+name: Setup
+description: Setup Node.js and install dependencies
+
+runs:
+  using: composite
+  steps:
+    - name: Setup Node.js
+      uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e
+      with:
+        node-version-file: .nvmrc
+
+    - name: Restore dependencies
+      id: yarn-cache
+      uses: actions/cache/restore@27d5ce7f107fe9357f9df03efb73ab90386fccae
+      with:
+        path: |
+          **/node_modules
+          .yarn/install-state.gz
+        key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}-${{ hashFiles('**/package.json', '!node_modules/**') }}
+        restore-keys: |
+          ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
+          ${{ runner.os }}-yarn-
+
+    - name: Install dependencies
+      if: steps.yarn-cache.outputs.cache-hit != 'true'
+      run: yarn install --immutable
+      shell: bash
+
+    - name: Cache dependencies
+      if: steps.yarn-cache.outputs.cache-hit != 'true'
+      uses: actions/cache/save@27d5ce7f107fe9357f9df03efb73ab90386fccae
+      with:
+        path: |
+          **/node_modules
+          .yarn/install-state.gz
+        key: ${{ steps.yarn-cache.outputs.cache-primary-key }}
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
new file mode 100644
index 0000000000..1bc6cef610
--- /dev/null
+++ b/.github/copilot-instructions.md
@@ -0,0 +1,22 @@
+# General Code Review Standards
+
+## Review Priorities
+
+- Prioritize correctness, regressions, missing tests, and API design issues.
+- Check that the behavior scope matches the stated intent.
+- Verify claims about external standards, platform conventions, accessibility, and design systems against the implementation.
+- Avoid asking for unrelated refactors, stylistic churn, or backwards compatibility unless required by the change.
+
+## Public APIs
+
+- Review new or modified public APIs for visibility, naming, defaults, customizability, and extensibility.
+- Ensure public APIs and exported types do not leak implementation details.
+
+## Dependencies
+
+- For dependencies added for individual components, evaluate bundle size and platform impact. Prefer existing capabilities when they meet the requirements.
+
+## Validation
+
+- Call out missing tests when the changed behavior is risky.
+- For visual changes, check before and after screenshots or videos for each affected platform and a nearby unaffected case.
diff --git a/.github/instructions/code.instructions.md b/.github/instructions/code.instructions.md
new file mode 100644
index 0000000000..9f0d264fef
--- /dev/null
+++ b/.github/instructions/code.instructions.md
@@ -0,0 +1,66 @@
+---
+applyTo: '**/*.{ts,tsx,js,jsx}'
+---
+
+# TypeScript and React Review Instructions
+
+## Code Quality
+
+- Flag unnecessary abstractions, one-off helpers, excessive indirection, and defensive code without a real use case.
+- Flag comments that restate obvious code instead of explaining non-obvious intent.
+- Check that changes follow existing project style, structure, naming, and local patterns.
+
+## TypeScript
+
+- Flag uses of `any`, unsafe `as` assertions, and non-null assertions (`!`) unless clearly justified.
+- Avoid broad types such as `object`, `Function`, `{}`, and `Record<string, unknown>` unless the broadness is intentional.
+- Do not accept `@ts-ignore`.
+- Only accept `@ts-expect-error` when it has a comment explaining why the error is expected and cannot be resolved.
+- Prefer simple types over complex conditional types, overloads, or type logic when simpler approaches work.
+- Prefer `type` aliases over `interface` unless there is a specific reason to use `interface`.
+- Reuse React Native prop and ref types where they describe the component's contract.
+
+## React
+
+- Check that hooks follow the Rules of Hooks.
+- Check dependency arrays for unstable values.
+- Ensure components do not perform side effects during rendering.
+- Avoid storing values in state when they can be derived from props or existing state.
+- Avoid multiple sources of truth for the same state.
+- Avoid `React.Children`, `cloneElement`, and reading React elements directly unless there is a strong justification.
+- Treat memoization as something that needs a reason: expensive calculation, stable identity requirement, or measured performance need.
+- Check async effects for cancellation or race conditions when relevant.
+
+## Component APIs and Styles
+
+- Prefer existing native props or `style` over new props when they express the required behavior.
+- Verify that components forward relevant native props and events without changing their meaning.
+- Ensure controlled values have callbacks to update them. Support uncontrolled input when controlled rendering causes a demonstrated performance or reliability problem.
+- Merge consumer styles after defaults for supported overrides. Check that computed styles preserve supplied padding, colors, dimensions, and other supported values.
+- Expose test IDs for public interaction or content. Avoid IDs on internal wrappers solely for tests and default IDs that can collide across component instances.
+
+## Design and Accessibility
+
+- Compare component states, dimensions, icons, shapes, ripple effects, and disabled appearance with the Material Design specification.
+- Use theme defaults and named tokens for colors, spacing, sizing, and motion where available. Check spacing against the design scale.
+- Check labels, roles, focus order, and loading states. Verify keyboard, mouse, and touch interaction where applicable.
+- Ensure disabled controls expose their state to assistive technology and prevent activation. Preserve appropriate focus when a control becomes unavailable after activation.
+- Check that dismissing temporary UI restores focus to an appropriate element.
+- Ensure visual changes do not make noninteractive content pressable.
+
+## Platforms
+
+- Check affected behavior on iOS, Android, and web, including positioning and interaction within scrolling containers and safe areas.
+- Use direct `Platform.OS` checks or `Platform.select` so build tools can remove unused branches. Use `.native` files for native/web splits.
+- Use CSS for web behavior it already supports instead of recreating it with JavaScript or layout measurements.
+- Keep browser APIs and layout measurements out of server rendering. Verify that server output and the initial client render match.
+
+## Animations and Layout
+
+- Check for unnecessary layout shifts.
+- Prefer animating only `transform` and `opacity` unless another property is required.
+- Verify that animations handle rapid state changes, gestures, interruption, and cancellation. Stale completion callbacks must not leave rendered state, focus, or component callbacks inconsistent.
+- Check that duration and easing feel appropriate for the platform and interaction.
+- Keep continuous gesture work off the JavaScript thread when responsiveness requires it, using Gesture Handler and Reanimated where appropriate.
+- Measure dimensions near animation start when this provides current values and avoids extra state.
+- Verify text and UI elements do not overlap or overflow at supported screen sizes.
diff --git a/.github/instructions/docs.instructions.md b/.github/instructions/docs.instructions.md
new file mode 100644
index 0000000000..e0c0fd307b
--- /dev/null
+++ b/.github/instructions/docs.instructions.md
@@ -0,0 +1,11 @@
+---
+applyTo: '**/*.{md,mdx}'
+---
+
+# Documentation Review Instructions
+
+- Verify that examples match the actual API, are self-contained, and focus on the relevant behavior.
+- Check that changed headings follow the document hierarchy.
+- Verify that changed internal links and anchors lead to the intended content.
+- Ensure documentation explains public behavior.
+- Use diffs or before and after code snippets in migration guides when they help explain the change.
diff --git a/.github/instructions/tests.instructions.md b/.github/instructions/tests.instructions.md
new file mode 100644
index 0000000000..caa914bd24
--- /dev/null
+++ b/.github/instructions/tests.instructions.md
@@ -0,0 +1,12 @@
+---
+applyTo: '**/*.{test,spec}.{ts,tsx,js,jsx}'
+---
+
+# Test Review Instructions
+
+- Check that tests verify public behavior, including rendered output, interaction, callbacks, and warnings. Flag assertions about private properties, context internals, or exact internal style values.
+- Test internal helpers directly only when their logic is complex enough to justify separate coverage.
+- Prefer accessibility queries, then test IDs for public interaction or content.
+- Check that test titles describe user-facing behavior.
+- Check coverage of happy paths, edge cases, and error states.
+- Flag unnecessary mocking.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index f14817e3d1..4d825afb12 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -3,14 +3,16 @@
 
 ### Motivation
 
-<!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? -->
+<!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? Keep it concise and don't describe implementation details. -->
 
 ### Related issue
 
 <!-- If this pull request addresses an existing issue, link to the issue. If an issue is not present, describe the issue here. -->
 
-### Test plan
+### Screenshots / Videos
+
+<!-- Provide screenshots or videos if the change affects UI, and Before/After comparisons if applicable. -->
 
-<!-- Describe the **steps to test this change**, so that a reviewer can verify it. Provide screenshots or videos if the change affects UI. -->
+### Test plan
 
-<!-- Keep in mind that PR changes must pass lint, typescript and tests. -->
+<!-- Describe the **steps to test this change manually**, so that a reviewer can verify it. Don't repeat checks already covered in automated tests. -->
diff --git a/.github/workflows/build-example-apps.yml b/.github/workflows/build-example-apps.yml
new file mode 100644
index 0000000000..64bc9fc819
--- /dev/null
+++ b/.github/workflows/build-example-apps.yml
@@ -0,0 +1,149 @@
+name: Build example apps
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - '**'
+      - '!docs/**'
+      - '!**/*.md'
+      - '!**/__tests__/**'
+      - '!jest/**'
+      - '!.github/workflows/**'
+      - '.github/workflows/build-example-apps.yml'
+  pull_request:
+    paths:
+      - '**'
+      - '!docs/**'
+      - '!**/*.md'
+      - '!**/__tests__/**'
+      - '!jest/**'
+      - '!.github/workflows/**'
+      - '.github/workflows/build-example-apps.yml'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: ${{ github.event_name == 'pull_request' }}
+
+jobs:
+  build-android:
+    name: Build Android
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+    steps:
+      - name: Checkout
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Setup
+        uses: ./.github/actions/setup
+
+      - name: Calculate fingerprint
+        id: fingerprint
+        working-directory: example
+        run: |
+          fingerprint=$(yarn expo-updates fingerprint:generate --platform android | jq -er .hash)
+          echo "fingerprint=$fingerprint" >> "$GITHUB_OUTPUT"
+
+      - name: Cache release build
+        id: cache
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        with:
+          path: react-native-paper-example.apk
+          key: android-${{ steps.fingerprint.outputs.fingerprint }}-${{ hashFiles('.github/workflows/build-example-apps.yml') }}
+
+      - name: Setup JDK
+        uses: actions/setup-java@de7274f081f381c8f8158605e0321c36c376e2e6 # v6.0.1
+        with:
+          distribution: temurin
+          java-version: 17
+
+      - name: Build Android app
+        if: steps.cache.outputs.cache-hit != 'true'
+        working-directory: example
+        run: |
+          yarn expo prebuild --platform android --no-install
+          cd android
+          ./gradlew :app:assembleRelease -Dorg.gradle.jvmargs=-XX:MaxMetaspaceSize=1g -PreactNativeArchitectures=arm64-v8a,x86_64
+          mv app/build/outputs/apk/release/app-release.apk ../../react-native-paper-example.apk
+
+      - name: Repack cached build
+        if: steps.cache.outputs.cache-hit == 'true'
+        working-directory: example
+        run: |
+          yarn dlx @expo/repack-app@0.10.3 \
+            --platform android \
+            --source-app ../react-native-paper-example.apk \
+            --output ../react-native-paper-example.apk
+
+      - name: Upload APK
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          path: react-native-paper-example.apk
+          archive: false
+          retention-days: 30
+
+  build-ios:
+    name: Build iOS
+    runs-on: macos-latest
+    timeout-minutes: 60
+    steps:
+      - name: Checkout
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Setup
+        uses: ./.github/actions/setup
+
+      - name: Calculate fingerprint
+        id: fingerprint
+        working-directory: example
+        run: |
+          fingerprint=$(yarn expo-updates fingerprint:generate --platform ios | jq -er .hash)
+          echo "fingerprint=$fingerprint" >> "$GITHUB_OUTPUT"
+
+      - name: Cache release build
+        id: cache
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        with:
+          path: react-native-paper-example.app
+          key: ios-${{ steps.fingerprint.outputs.fingerprint }}-${{ hashFiles('.github/workflows/build-example-apps.yml') }}
+
+      - name: Build iOS app
+        if: steps.cache.outputs.cache-hit != 'true'
+        working-directory: example
+        run: |
+          yarn expo prebuild --platform ios --no-install
+          cd ios
+          pod install
+          xcodebuild build \
+            -workspace ReactNativePaperExample.xcworkspace \
+            -scheme ReactNativePaperExample \
+            -configuration Release \
+            -destination 'generic/platform=iOS Simulator' \
+            -derivedDataPath build \
+            ARCHS=arm64
+          mv build/Build/Products/Release-iphonesimulator/ReactNativePaperExample.app ../../react-native-paper-example.app
+
+      - name: Repack cached build
+        if: steps.cache.outputs.cache-hit == 'true'
+        working-directory: example
+        run: |
+          mv ../react-native-paper-example.app "$RUNNER_TEMP/cached.app"
+          yarn dlx @expo/repack-app@0.10.3 \
+            --platform ios \
+            --source-app "$RUNNER_TEMP/cached.app" \
+            --output ../react-native-paper-example.app
+
+      - name: Archive app
+        run: ditto -c -k --keepParent react-native-paper-example.app react-native-paper-example.app.zip
+
+      - name: Upload app
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          path: react-native-paper-example.app.zip
+          archive: false
+          retention-days: 30
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000000..e3dccbb3d5
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,113 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Setup
+        uses: ./.github/actions/setup
+
+      - name: Lint
+        run: yarn lint
+
+  typecheck:
+    name: Typecheck
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Setup
+        uses: ./.github/actions/setup
+
+      - name: Check types
+        run: yarn typecheck
+
+  unit-tests:
+    name: Unit tests
+    strategy:
+      fail-fast: false
+      matrix:
+        os:
+          - ubuntu-latest
+          - windows-latest
+    runs-on: ${{ matrix.os }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Setup
+        uses: ./.github/actions/setup
+
+      - name: Restore Jest cache
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        with:
+          path: ./cache/jest
+          key: jest-cache-${{ runner.os }}-${{ github.ref_name }}
+          restore-keys: jest-cache-${{ runner.os }}-
+
+      - name: Run unit tests
+        run: yarn test --maxWorkers=2 --coverage
+
+      - name: Upload coverage
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        if: always()
+        with:
+          name: coverage-${{ runner.os }}
+          path: coverage
+
+  build-package:
+    name: Build package
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Setup
+        uses: ./.github/actions/setup
+
+      - name: Build package
+        run: yarn prepack
+
+  build-example:
+    name: Build example
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Setup
+        uses: ./.github/actions/setup
+
+      - name: Build example
+        run: yarn example expo export --platform all
+
+  build-docs:
+    name: Build docs
+    if: github.event_name == 'pull_request'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Setup
+        uses: ./.github/actions/setup
+
+      - name: Build docs
+        run: yarn --cwd docs build
+
+      - name: Upload docs
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: docs
+          path: docs/build
diff --git a/.github/workflows/contributor-label.yml b/.github/workflows/contributor-label.yml
new file mode 100644
index 0000000000..f5fcb36767
--- /dev/null
+++ b/.github/workflows/contributor-label.yml
@@ -0,0 +1,80 @@
+name: Contributor Label
+
+on:
+  pull_request_target:
+    types: [opened, reopened]
+
+permissions:
+  issues: write
+  pull-requests: write
+
+jobs:
+  label:
+    name: Add contributor label
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/create-github-app-token@bcd2ba49218906704ab6c1aa796996da409d3eb1 # v3.2.0
+        id: app-token
+        with:
+          app-id: ${{ secrets.ORG_MEMBERSHIP_APP_ID }}
+          private-key: ${{ secrets.ORG_MEMBERSHIP_APP_PRIVATE_KEY }}
+          owner: callstack-internal
+          permission-members: read
+
+      - uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
+        env:
+          ORG_MEMBERSHIP_TOKEN: ${{ steps.app-token.outputs.token }}
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const owner = context.repo.owner;
+            const repo = context.repo.repo;
+
+            const label = 'Contributor: Internal';
+
+            const pullRequest = context.payload.pull_request;
+
+            if (pullRequest.labels.some(({ name }) => name === label)) {
+              return;
+            }
+
+            const username = pullRequest.user.login;
+
+            const { data } =
+              await github.rest.repos.getCollaboratorPermissionLevel({
+                owner,
+                repo,
+                username,
+              });
+
+            let isInternal =
+              ['MEMBER', 'OWNER'].includes(pullRequest.author_association) ||
+              ['admin', 'maintain', 'write'].includes(data.permission);
+
+            if (!isInternal) {
+              try {
+                const internalGithub = getOctokit(process.env.ORG_MEMBERSHIP_TOKEN);
+
+                await internalGithub.rest.orgs.checkMembershipForUser({
+                  org: 'callstack-internal',
+                  username,
+                });
+
+                isInternal = true;
+              } catch (error) {
+                if (error.status !== 404) {
+                  throw error;
+                }
+              }
+            }
+
+            if (!isInternal) {
+              return;
+            }
+
+            await github.rest.issues.addLabels({
+              owner,
+              repo,
+              issue_number: pullRequest.number,
+              labels: [label],
+            });
diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
new file mode 100644
index 0000000000..a8e11ea034
--- /dev/null
+++ b/.github/workflows/deploy-docs.yml
@@ -0,0 +1,49 @@
+name: Deploy docs
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    name: Deploy docs
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          fetch-depth: 0
+
+      - name: Setup
+        uses: ./.github/actions/setup
+
+      - name: Generate 5.x docs
+        run: yarn --cwd docs generate:5x
+
+      - name: Build docs
+        run: yarn --cwd docs build
+
+      - name: Configure Pages
+        uses: actions/configure-pages@45bfe0192ca1faeb007ade9deae92b16b8254a0d # v6.0.0
+
+      - name: Upload Pages artifact
+        uses: actions/upload-pages-artifact@fc324d3547104276b827a68afc52ff2a11cc49c9 # v5.0.0
+        with:
+          path: docs/build
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@cd2ce8fcbc39b97be8ca5fce6e763baed58fa128 # v5.0.0
diff --git a/.github/workflows/publish-each-pr.yml b/.github/workflows/publish-each-pr.yml
deleted file mode 100644
index 0fa519e55f..0000000000
--- a/.github/workflows/publish-each-pr.yml
+++ /dev/null
@@ -1,93 +0,0 @@
-name: Expo Preview
-on: [pull_request]
-
-permissions:
-  contents: read
-  pull-requests: write
-
-jobs:
-  publish:
-    name: Install and publish
-    runs-on: ubuntu-latest
-    if: github.event.pull_request.head.repo.full_name == 'callstack/react-native-paper'
-    steps:
-      - name: Checkout
-        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
-        with:
-          node-version-file: .nvmrc
-
-      - name: Setup Expo
-        uses: expo/expo-github-action@d300b960e9f91a8c59b2aaca92e89ad70b0785ac # v7
-        with:
-          eas-version: latest
-          token: ${{ secrets.EXPO_TOKEN }}
-
-      - name: Restore dependencies
-        id: yarn-cache
-        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684 # v4
-        with:
-          path: '**/node_modules'
-          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}-${{ hashFiles('**/package.json', '!node_modules/**') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
-            ${{ runner.os }}-yarn-
-
-      - name: Install dependencies
-        if: steps.yarn-cache.outputs.cache-hit != 'true'
-        run: |
-          sudo corepack enable
-          yarn --cwd example --immutable
-          yarn --immutable
-
-      - name: Cache dependencies
-        if: steps.yarn-cache.outputs.cache-hit != 'true'
-        uses: actions/cache/save@5a3ec84eff668545956fd18022155c47e93e2684 # v4
-        with:
-          path: '**/node_modules'
-          key: ${{ steps.yarn-cache.outputs.cache-primary-key }}
-
-      - name: Publish Expo app
-        working-directory: ./example
-        run: CI=1 rm -rf android && eas update --branch=pr-${{ github.event.number }} --message="$(git log -1 --pretty=%B)"
-
-      - name: Get expo config
-        working-directory: ./example
-        id: expo
-        run: echo "EXPO_CONFIG=$(npx expo config --json)" >> $GITHUB_OUTPUT
-
-      - name: Comment on PR
-        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const config = JSON.parse('${{ steps.expo.outputs.EXPO_CONFIG }}');
-
-            const { sdkVersion } = config;
-            const { projectId } = config.extra.eas;
-
-            const channel = 'pr-${{ github.event.number }}';
-
-            const url = `https://expo.dev/@react-native-paper/react-native-paper-example?serviceType=eas&distribution=expo-go&scheme=exp+react-native-paper-example&channel=${channel}&sdkVersion=${sdkVersion}`;
-            const body = `The mobile version of example app from this branch is ready! You can [see it here.](${url})
-            <a href="${url}"><img src="https://qr.expo.dev/eas-update?appScheme=exp&projectId=${projectId}&channel=${channel}&runtimeVersion=exposdk:${sdkVersion}&host=u.expo.dev" height="200px" width="200px"></a>
-            `;
-
-            const comments = await github.rest.issues.listComments({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-            });
-
-            if (comments.data.some(comment => comment.body === body)) {
-              return;
-            }
-
-            github.rest.issues.createComment({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              body
-            })
diff --git a/.github/workflows/publish-example-app.yml b/.github/workflows/publish-example-app.yml
new file mode 100644
index 0000000000..7c9a86531f
--- /dev/null
+++ b/.github/workflows/publish-example-app.yml
@@ -0,0 +1,206 @@
+name: Publish example app
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: Release tag to publish the example app for, e.g. v6.0.0
+        required: true
+      platform:
+        description: Platform to build. Defaults to all.
+        required: false
+        default: all
+        type: choice
+        options:
+          - all
+          - ios
+          - android
+
+permissions:
+  contents: read
+
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  check:
+    name: Check release is on main
+    runs-on: ubuntu-latest
+    env:
+      TAG: ${{ github.event.release.tag_name || inputs.tag }}
+    outputs:
+      on-main: ${{ steps.check.outputs.on-main }}
+      sha: ${{ steps.check.outputs.sha }}
+      tag: ${{ env.TAG }}
+      profile: ${{ steps.check.outputs.profile }}
+    steps:
+      - id: check
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_REPO: ${{ github.repository }}
+        run: |
+          status=$(gh api "repos/$GH_REPO/compare/main...$TAG" --jq .status)
+
+          if [ "$status" = "identical" ] || [ "$status" = "behind" ]; then
+            sha=$(gh api "repos/$GH_REPO/commits/$TAG" --jq .sha)
+            echo "on-main=true" >> "$GITHUB_OUTPUT"
+            echo "sha=$sha" >> "$GITHUB_OUTPUT"
+          else
+            echo "on-main=false" >> "$GITHUB_OUTPUT"
+            echo "::warning::$TAG is not on main ($status), nothing to deploy."
+            echo "$TAG is not on main ($status), nothing to deploy." >> "$GITHUB_STEP_SUMMARY"
+          fi
+
+          if [ "${TAG#*-}" != "$TAG" ]; then
+            echo "profile=preview" >> "$GITHUB_OUTPUT"
+          else
+            echo "profile=production" >> "$GITHUB_OUTPUT"
+          fi
+
+  publish:
+    name: Build and submit example app
+    needs: check
+    if: needs.check.outputs.on-main == 'true'
+    runs-on: ubuntu-latest
+    concurrency:
+      # One queue per channel, so a pending preview run doesn't cancel a production one
+      group: publish-example-app-${{ needs.check.outputs.profile }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          ref: ${{ needs.check.outputs.sha }}
+
+      - name: Setup
+        uses: ./.github/actions/setup
+
+      - name: Setup Expo
+        uses: expo/expo-github-action@c7b66a9c327a43a8fa7c0158e7f30d6040d2481e # v8.2.1
+        with:
+          eas-version: 24.12.1
+          token: ${{ secrets.EXPO_TOKEN }}
+
+      - name: Check Expo authentication
+        working-directory: ./example
+        run: |
+          if ! eas whoami; then
+            echo "::error::Could not authenticate with Expo, check EXPO_TOKEN."
+            exit 1
+          fi
+
+      - name: Set example app version from the release tag
+        working-directory: ./example
+        env:
+          TAG: ${{ needs.check.outputs.tag }}
+        run: |
+          version="${TAG#v}"
+          version="${version%%-*}"
+
+          if ! echo "$version" | grep -qE '^[0-9]+\.[0-9]+\.[0-9]+$'; then
+            echo "::error::Could not read a major.minor.patch version from $TAG."
+            exit 1
+          fi
+
+          jq --arg version "$version" '.expo.version = $version' app.json > app.json.tmp
+          mv app.json.tmp app.json
+
+      - name: Decide between an update and a build
+        id: decide
+        working-directory: ./example
+        env:
+          PROFILE: ${{ needs.check.outputs.profile }}
+          PLATFORM: ${{ inputs.platform || 'all' }}
+        run: |
+          platforms="$PLATFORM"
+          if [ "$PLATFORM" = "all" ]; then
+            platforms="ios android"
+          fi
+
+          build=()
+          update=()
+          for platform in $platforms; do
+            hash=$(npx expo-updates fingerprint:generate --platform "$platform" | jq -er .hash)
+
+            existing=$(eas build:list \
+              --platform "$platform" \
+              --channel "$PROFILE" \
+              --fingerprint-hash "$hash" \
+              --status finished \
+              --limit 1 \
+              --json \
+              --non-interactive | jq 'if type == "array" then length else "notanarray" end')
+
+            case "$existing" in
+              ''|*[!0-9]*)
+                echo "::error::Could not read builds for $platform."
+                exit 1
+                ;;
+            esac
+
+            echo "$platform: fingerprint $hash, $existing matching build(s)"
+            if [ "$existing" -eq 0 ]; then
+              build+=("$platform")
+            else
+              update+=("$platform")
+            fi
+          done
+
+          # EAS takes a single platform or "all"
+          to_platform() {
+            case $# in
+              0) echo "" ;;
+              1) echo "$1" ;;
+              *) echo all ;;
+            esac
+          }
+
+          echo "build=$(to_platform "${build[@]}")" >> "$GITHUB_OUTPUT"
+          echo "update=$(to_platform "${update[@]}")" >> "$GITHUB_OUTPUT"
+          echo "Building: ${build[*]:-none}. Updating: ${update[*]:-none}."
+
+      - name: Publish an update
+        # Before the build, so a slow or timed-out build can't hold up the update
+        if: steps.decide.outputs.update != ''
+        working-directory: ./example
+        env:
+          PROFILE: ${{ needs.check.outputs.profile }}
+          PLATFORM: ${{ steps.decide.outputs.update }}
+          TAG: ${{ needs.check.outputs.tag }}
+        run: |
+          eas update \
+            --channel "$PROFILE" \
+            --platform "$PLATFORM" \
+            --message "$TAG" \
+            --non-interactive
+
+          echo "Published an OTA update for $TAG for $PLATFORM on the $PROFILE channel." >> "$GITHUB_STEP_SUMMARY"
+
+      - name: Build and submit to the app stores
+        # Don't let a failed update for one platform skip the other's build
+        if: ${{ !cancelled() && steps.decide.outputs.build != '' }}
+        working-directory: ./example
+        env:
+          PROFILE: ${{ needs.check.outputs.profile }}
+          PLATFORM: ${{ steps.decide.outputs.build }}
+          TAG: ${{ needs.check.outputs.tag }}
+        run: |
+          eas build \
+            --platform "$PLATFORM" \
+            --profile "$PROFILE" \
+            --auto-submit-with-profile "$PROFILE" \
+            --non-interactive
+
+          echo "Built and submitted $TAG for $PLATFORM using the $PROFILE profile." >> "$GITHUB_STEP_SUMMARY"
+
+      - name: Report failure
+        if: failure() || cancelled()
+        env:
+          TAG: ${{ needs.check.outputs.tag }}
+        run: |
+          echo "::error::Example app deployment failed for $TAG. The release itself is fine, only the demo app did not update."
+          echo "Check EAS and the stores before re-running, a build may still be running or already submitted. Re-running before it finishes starts a second build." >> "$GITHUB_STEP_SUMMARY"
+          echo "If the build finished but the store upload failed, resubmit that build with \`eas submit --id <build id>\`. Re-running this workflow will publish an OTA update instead." >> "$GITHUB_STEP_SUMMARY"
+          echo "If only the update failed, re-running is safe." >> "$GITHUB_STEP_SUMMARY"
diff --git a/.github/workflows/pull-request-checks.yml b/.github/workflows/pull-request-checks.yml
new file mode 100644
index 0000000000..350cd9a621
--- /dev/null
+++ b/.github/workflows/pull-request-checks.yml
@@ -0,0 +1,97 @@
+name: Pull Request Checks
+
+on:
+  pull_request_target:
+    types: [opened, edited, reopened]
+
+permissions:
+  issues: write
+  pull-requests: write
+
+concurrency:
+  group: pull-request-checks-${{ github.event.pull_request.number }}
+  cancel-in-progress: true
+
+jobs:
+  check:
+    name: Check description and visual evidence
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check pull request details
+        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const MAX_PR_BODY_LENGTH = 1000;
+            const MARKER = '<!-- pull-request-details-check -->';
+
+            const { owner, repo } = context.repo;
+
+            const issueNumber = context.payload.pull_request.number;
+            const body = context.payload.pull_request.body || '';
+
+            const problems = [];
+
+            if (Array.from(body).length > MAX_PR_BODY_LENGTH) {
+              problems.push(
+                `- The description is too long. Please keep it under ${MAX_PR_BODY_LENGTH} characters.`
+              );
+            }
+
+            if (
+              !/(?:https?:\/\/[^\s)"']+\.(?:png|jpe?g|gif|webp|avif|mp4|mov|webm|m4v)(?:[?#][^\s)"']*)?|https?:\/\/github\.com\/user-attachments\/assets\/[^\s)"']+)/i.test(
+                body
+              )
+            ) {
+              problems.push(
+                '- Screenshot or video evidence is missing. Make sure to include one if it affects the UI.'
+              );
+            }
+
+            const existingComment = (
+              await github.paginate(github.rest.issues.listComments, {
+                owner,
+                repo,
+                issue_number: issueNumber,
+                per_page: 100,
+              })
+            ).find(
+              (comment) =>
+                comment.user?.login === 'github-actions[bot]' &&
+                comment.body?.includes(MARKER)
+            );
+
+            if (problems.length === 0) {
+              if (existingComment) {
+                await github.rest.issues.deleteComment({
+                  owner,
+                  repo,
+                  comment_id: existingComment.id,
+                });
+              }
+
+              return;
+            }
+
+            const commentBody = [
+              MARKER,
+              'Found potential problems with the pull request:',
+              '',
+              problems.join('\n'),
+            ].join('\n');
+
+            if (existingComment) {
+              await github.rest.issues.updateComment({
+                owner,
+                repo,
+                comment_id: existingComment.id,
+                body: commentBody,
+              });
+            } else {
+              await github.rest.issues.createComment({
+                owner,
+                repo,
+                issue_number: issueNumber,
+                body: commentBody,
+              });
+            }
diff --git a/.github/workflows/semantic-pr.yml b/.github/workflows/semantic-pr.yml
index 632323c6a5..371b3c504a 100644
--- a/.github/workflows/semantic-pr.yml
+++ b/.github/workflows/semantic-pr.yml
@@ -6,7 +6,7 @@ jobs:
     name: Validate PR title
     runs-on: ubuntu-latest
     steps:
-      - uses: amannn/action-semantic-pull-request@91682d013dea3ff257520b9b68c9cb93ced4fe9b # v4.5.0
+      - uses: amannn/action-semantic-pull-request@48f256284bd46cdaab1048c3721360e808335d50 # v6.1.1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml
index 7b6949f2fb..1b4619fbde 100644
--- a/.github/workflows/stale.yml
+++ b/.github/workflows/stale.yml
@@ -5,7 +5,6 @@ on:
     - cron: '30 1 * * *'
 
 permissions:
-  contents: read
   issues: write
   pull-requests: write
 
@@ -13,7 +12,7 @@ jobs:
   stale:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/stale@5bef64f19d7facfb25b37b414482c7164d639639 # v9
+      - uses: actions/stale@eb5cf3af3ac0a1aa4c9c45633dd1ae542a27a899 # v10.3.0
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-stale: 30
diff --git a/.github/workflows/triage.yaml b/.github/workflows/triage.yaml
index c9c69eb8bb..26e574ef24 100644
--- a/.github/workflows/triage.yaml
+++ b/.github/workflows/triage.yaml
@@ -12,8 +12,8 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event.label.name == 'needs more info'
     steps:
-      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
-      - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
@@ -40,8 +40,8 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event.label.name == 'needs repro'
     steps:
-      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
-      - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
diff --git a/.github/workflows/updates.yml b/.github/workflows/updates.yml
deleted file mode 100644
index fa753fd5bf..0000000000
--- a/.github/workflows/updates.yml
+++ /dev/null
@@ -1,53 +0,0 @@
-name: Expo EAS Updates
-on:
-  push:
-    branches:
-      - main
-jobs:
-  publish:
-    if: ${{ (contains(github.event.pull_request.labels.*.name, 'example app')) }}
-    name: Install and publish
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
-        with:
-          node-version-file: .nvmrc
-
-      - name: Setup Expo
-        uses: expo/expo-github-action@d300b960e9f91a8c59b2aaca92e89ad70b0785ac # v7
-        with:
-          expo-version: latest
-          eas-version: latest
-          token: ${{ secrets.EXPO_TOKEN }}
-
-      - name: Restore dependencies
-        id: yarn-cache
-        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684 # v4
-        with:
-          path: '**/node_modules'
-          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}-${{ hashFiles('**/package.json', '!node_modules/**') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
-            ${{ runner.os }}-yarn-
-
-      - name: Install dependencies
-        if: steps.yarn-cache.outputs.cache-hit != 'true'
-        run: |
-          sudo corepack enable
-          yarn --cwd example --immutable
-          yarn --immutable
-
-      - name: Cache dependencies
-        if: steps.yarn-cache.outputs.cache-hit != 'true'
-        uses: actions/cache/save@5a3ec84eff668545956fd18022155c47e93e2684 # v4
-        with:
-          path: '**/node_modules'
-          key: ${{ steps.yarn-cache.outputs.cache-primary-key }}
-
-      - name: Publish Expo app update
-        working-directory: ./example
-        run: eas update --auto
diff --git a/.github/workflows/versions.yml b/.github/workflows/versions.yml
index a84b362955..bcadaaeab1 100644
--- a/.github/workflows/versions.yml
+++ b/.github/workflows/versions.yml
@@ -12,7 +12,7 @@ jobs:
     if: ${{ github.event.label.name == 'bug' }}
     runs-on: ubuntu-latest
     steps:
-      - uses: react-navigation/check-versions-action@deac0a153b834fdda425028be69b2cf786dacc31 # v1.1.0
+      - uses: react-navigation/check-versions-action@1f7edac18020a4dc38c4d174bb04311b196f9b75 # v1.2.2
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           required-packages: |
diff --git a/.gitignore b/.gitignore
index 6ece42c049..4c86dcc669 100644
--- a/.gitignore
+++ b/.gitignore
@@ -43,6 +43,15 @@ yarn-error.log
 #
 coverage/
 cache/jest/
+__ts-tests__/
+
+# ESLint
+#
+.eslintcache
+
+# TypeScript
+#
+*.tsbuildinfo
 
 # BUCK
 #
@@ -55,6 +64,9 @@ android/keystores/debug.keystore
 #
 dist/
 web-build/
+docs/5.x/component-docs.json
+docs/5.x/docs/components/
+docs/6.x/docs/components/
 
 # Release
 #
@@ -63,12 +75,10 @@ CHANGELOG.md
 # generated by bob
 lib/
 
-.expo
-
 # Yarn
 .yarn/*
 !.yarn/patches
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
\ No newline at end of file
+!.yarn/versions
diff --git a/.nvmrc b/.nvmrc
index d2c5c8a013..e8416a151f 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v22.15.0
\ No newline at end of file
+v24.13.0
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000000..5c8875a9e1
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,33 @@
+# Build
+build/
+dist/
+web-build/
+docs/.cache-loader/
+docs/build/
+docs/dist/
+docs/docs/components/
+docs/public/react-native-paper/
+example/coverage/
+example/dist/
+
+# generated docs
+docs/5.x/_nav.json
+docs/5.x/index.mdx
+docs/5.x/docs/_meta.json
+docs/5.x/docs/guides/_meta.json
+docs/5.x/docs/components/_meta.json
+docs/5.x/docs/components/**/_meta.json
+docs/6.x/_nav.json
+docs/6.x/index.mdx
+docs/6.x/docs/_meta.json
+docs/6.x/docs/guides/_meta.json
+docs/6.x/docs/components/
+docs/src/data/componentDocs6x.json
+
+# generated by bob
+lib/
+
+# Expo
+example/.expo/
+example/android/
+example/ios/
diff --git a/.prettierrc b/.prettierrc
index cbfec3ea55..e687413c41 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,4 @@
-
 singleQuote: true
 tabWidth: 2
-trailingComma: "es5"
+trailingComma: 'es5'
 useTabs: false
diff --git a/.release-it.json b/.release-it.json
index 869746da21..bd70df14cf 100644
--- a/.release-it.json
+++ b/.release-it.json
@@ -7,7 +7,8 @@
     "publish": true
   },
   "github": {
-    "release": true
+    "release": true,
+    "draft": true
   },
   "plugins": {
     "@release-it/conventional-changelog": {
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000000..4d94259957
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,16 @@
+# Project instructions
+
+Read and follow the relevant project guidance before making or reviewing changes:
+
+- [README.md](README.md) for the project overview and documentation links.
+- [CONTRIBUTING.md](CONTRIBUTING.md) for setup, development workflow, validation, component guidelines, and commit conventions.
+- [package.json](package.json) for the package manager version and available scripts.
+- [CI workflow](.github/workflows/ci.yml) for build and validation checks.
+- [Pull request template](.github/pull_request_template.md) when preparing a pull request.
+
+For implementation and review, apply the shared review instructions:
+
+- [General review standards](.github/copilot-instructions.md).
+- [TypeScript and React rules](.github/instructions/code.instructions.md) for JavaScript and TypeScript files.
+- [Documentation rules](.github/instructions/docs.instructions.md) for Markdown and MDX files.
+- [Test rules](.github/instructions/tests.instructions.md) for test files.
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000000..43c994c2d3
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1 @@
+@AGENTS.md
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index a4cf09cd56..99aef2a692 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -13,8 +13,9 @@ The core team works directly on GitHub and all work is public.
 > **Working on your first pull request?** You can learn how from this _free_ series: [How to Contribute to an Open Source Project on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github).
 
 1. Fork the repo and create your branch from `main` (a guide on [how to fork a repository](https://help.github.com/articles/fork-a-repo/)).
-2. Run `yarn` on the root level, to setup the development environment.
-3. Do the changes you want and test them out in the example app before sending a pull request.
+2. Use the Node.js version specified in `.nvmrc`.
+3. Run `yarn` on the root level, to setup the development environment.
+4. Do the changes you want and test them out in the example app before sending a pull request.
 
 ### Commit message convention
 
@@ -25,16 +26,16 @@ We follow the [conventional commits specification](https://www.conventionalcommi
 - `refactor`: code refactor, e.g. new folder structure for components.
 - `docs`: changes into documentation, e.g. add usage example for Button.
 - `test`: adding or updating tests, eg unit, snapshot testing.
-- `chore`: tooling changes, e.g. change circleci config.
+- `chore`: tooling changes, e.g. change the CI configuration.
 - `BREAKING CHANGE`: for changes that break existing usage, e.g. change API of a component.
 
 Our pre-commit hooks verify that your commit message matches this format when committing.
 
 ### Linting and tests
 
-We use `typescript` for type checking, `eslint` with `prettier` for linting and formatting the code, and `jest` for testing. Our pre-commit hooks verify that the linter and tests pass when commiting. You can also run the following commands manually:
+We use `typescript` for type checking, `eslint` with `prettier` for linting and formatting the code, and `jest` for testing. Our pre-commit hooks verify that type checking, linting, and tests pass when committing. You can also run the following commands manually:
 
-- `yarn typescript`: type-check files with `tsc`.
+- `yarn typecheck`: type-check files with `tsc`.
 - `yarn lint`: lint files with `eslint` and `prettier`.
 - `yarn test`: run unit tests with `jest`.
 
@@ -43,27 +44,40 @@ We use `typescript` for type checking, `eslint` with `prettier` for linting and
 When you're sending a pull request:
 
 - Prefer small pull requests focused on one change.
-- Verify that `typescript`, `eslint` and all tests are passing.
+- Verify that `typecheck`, `lint` and all tests are passing.
 - Preview the documentation to make sure it looks good.
 - Follow the pull request template when opening a pull request.
 
 When you're working on a component:
 
-- Follow the guidelines described in the [official material design docs](https://material.io/guidelines/).
-- Write a brief description of every prop when defining `type Props` to aid with documentation.
-- Provide an example usage for the component (check other components to get a idea).
-- Update the type definitions for Flow and TypeScript if you changed an API or added a component.
+- Follow the guidelines described in the [official material design docs](https://m3.material.io/).
+- Write a brief description of every prop when defining the props type to aid with documentation.
+- Provide an example usage for the component (check other components to get an idea).
+- Update the type definitions for TypeScript if you changed an API or added a component.
 
 ### Running the example
 
-The example app uses [Expo](https://expo.dev/) for the React Native example. You will need to install the Expo app for [Android](https://play.google.com/store/apps/details?id=host.exp.exponent) and [iOS](https://itunes.apple.com/app/apple-store/id982107779) to start developing.
+The example app uses [Expo](https://expo.dev/) development build for the React Native example.
 
-> [!IMPORTANT]  
-> The example app is built with `react-native@0.77.x` and Expo SDK 52, which isn’t compatible with Expo Go. To run the app, you have to create a [development build](https://docs.expo.dev/develop/development-builds/create-a-build/).
+First, generate the native projects:
 
-After you're done, you can run `yarn example start` in the project root (or `npx expo start` in the `example/` folder) and scan the QR code to launch it on your device.
+```sh
+yarn example expo prebuild
+```
+
+Then build and install the development build:
+
+```sh
+yarn example ios
+```
+
+or:
+
+```sh
+yarn example android
+```
 
-To run the example on web, run `yarn example web` in the project root.
+After you're done, you can run `yarn example start` in the project root and scan the QR code to launch it on your device, or press `i`, `a` or `w` to launch it on the iOS simulator, Android emulator, or web browser, respectively.
 
 ### Testing a specific pull request/commit
 
@@ -72,7 +86,7 @@ If you want to test the changes brought by a pull request, you can do so by poin
 ```json
 {
   "dependencies": {
-    "react-native-paper": "git+https://github.com/callstack/react-native-paper.git#<commit-hash>",
+    "react-native-paper": "git+https://github.com/callstack/react-native-paper.git#<commit-hash>"
   }
 }
 ```
@@ -83,18 +97,39 @@ Alternatively, you may clone the `react-native-paper` repo and use the [yalc](ht
 
 ### Working on documentation
 
-The documentation is automatically generated from the [TypeScript](https://www.typescriptlang.org/) annotations in the components. You can add comments above the type annotations to add descriptions. To preview the generated documentation, run `yarn docs start` in the project root.
+To preview the documentation, run `yarn docs dev` in the project root.
 
 ### Publishing a release
 
-We use [release-it](https://github.com/webpro/release-it) to automate our release. If you have publish access to the NPM package, run the following from the main branch to publish a new release:
+We use [release-it](https://github.com/webpro/release-it) to automate our release. If you have publish access to the NPM package, run the following from the main branch, always with the exact version you want to publish:
 
 ```sh
-yarn release
+yarn release 6.0.0-beta.0 --dry-run
+yarn release 6.0.0-beta.0
+```
+
+- Always pass the version. A bare `yarn release` applies the bump the commit history recommends, which can be a stable or major version you did not intend. npm never accepts the same version twice, so a wrong version cannot be taken back.
+- Start with the dry run. Before running it for real, check the compare range in the changelog heading it prints (for example `v6.0.0-alpha.0...v6.0.0-alpha.1`) and the `--tag` on the `npm publish` line.
+- The npm tag and the GitHub prerelease flag follow the version: `6.0.0-beta.0` is published under the `beta` tag as a GitHub prerelease, `6.0.0` under `latest` as a regular release.
+- The GitHub release is created as a draft. Once `npm publish` has succeeded, add the release notes and publish the draft:
+
+```sh
+gh release edit v6.0.0-beta.0 --notes-file notes.md --draft=false
 ```
 
 NOTE: You must have a `GITHUB_TOKEN` environment variable available. You can create a GitHub access token with the "repo" access [here](https://github.com/settings/tokens).
 
+You also need to be logged in to npm with an account that can publish the package: check with `npm whoami`, and run `npm login` if it fails.
+
+Publishing the GitHub release also deploys the example app via EAS, so keep the release a draft until npm has the package. If there were no native code changes, it'll ship an OTA update.
+
+Otherwise, for stable releases:
+
+- The Android build is automatically submitted to Google Play for review
+- The iOS build is automatically uploaded to App Store Connect and needs to be manually submitted for review
+
+Pre-release builds are shipped to the internal track on Google Play for Android and TestFlight for iOS. They shouldn't be submitted to the App Store for review, or the stable build with the same version would be rejected.
+
 ## Reporting issues
 
 You can report issues on our [bug tracker](https://github.com/callstack/react-native-paper/issues). Please follow the issue template when opening an issue.
diff --git a/babel.config.js b/babel.config.js
index f7b3da3b33..8ba8eb658c 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,3 +1,4 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
+  plugins: ['react-native-worklets/plugin'],
 };
diff --git a/docs/.eslintrc b/docs/.eslintrc
deleted file mode 100644
index bba456d680..0000000000
--- a/docs/.eslintrc
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "extends": "../.eslintrc",
-
-  "settings": {
-    "import/core-modules": ["react-native-paper"]
-  },
-
-  "rules": {
-    "react/prop-types": "off",
-    "import/no-unresolved": [
-      2,
-      {"ignore": ["^@docusaurus", "^@theme", "@^site"]}
-    ]
-  }
-}
diff --git a/docs/.gitignore b/docs/.gitignore
index 9d90495ad6..e59dab5e8d 100644
--- a/docs/.gitignore
+++ b/docs/.gitignore
@@ -3,10 +3,12 @@
 
 # Production
 /build
+/test-results
+/visual/output
 
 # Generated files
-.docusaurus
 .cache-loader
+/public/llms.txt
 
 # Misc
 .DS_Store
@@ -19,9 +21,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# component-docs-plugin
-docs/components
-
 # legacy
 dist/
 .linaria-cache/
diff --git a/docs/5.x/_nav.json b/docs/5.x/_nav.json
new file mode 100644
index 0000000000..0099eb059f
--- /dev/null
+++ b/docs/5.x/_nav.json
@@ -0,0 +1,12 @@
+[
+  {
+    "text": "Guides",
+    "link": "/docs/guides/getting-started",
+    "activeMatch": "^/docs/guides/"
+  },
+  {
+    "text": "Showcase",
+    "link": "/docs/showcase",
+    "activeMatch": "^/docs/showcase$"
+  }
+]
diff --git a/docs/5.x/docs/_meta.json b/docs/5.x/docs/_meta.json
new file mode 100644
index 0000000000..1a81e3fb19
--- /dev/null
+++ b/docs/5.x/docs/_meta.json
@@ -0,0 +1,12 @@
+[
+  {
+    "type": "dir-section-header",
+    "name": "guides",
+    "label": "Guides"
+  },
+  {
+    "type": "file",
+    "name": "showcase",
+    "label": "Showcase"
+  }
+]
diff --git a/docs/5.x/docs/guides/_meta.json b/docs/5.x/docs/guides/_meta.json
new file mode 100644
index 0000000000..3fbe040166
--- /dev/null
+++ b/docs/5.x/docs/guides/_meta.json
@@ -0,0 +1,14 @@
+[
+  "getting-started",
+  "theming",
+  "icons",
+  "fonts",
+  "react-native-web",
+  "recommended-libraries",
+  "contributing",
+  "theming-with-react-navigation",
+  "bottom-navigation",
+  "react-navigation",
+  "migration-guide-to-5.0",
+  "ripple-effect"
+]
diff --git a/docs/docs/guides/09-bottom-navigation.md b/docs/5.x/docs/guides/bottom-navigation.md
similarity index 100%
rename from docs/docs/guides/09-bottom-navigation.md
rename to docs/5.x/docs/guides/bottom-navigation.md
diff --git a/docs/5.x/docs/guides/contributing.mdx b/docs/5.x/docs/guides/contributing.mdx
new file mode 100644
index 0000000000..2861043dc3
--- /dev/null
+++ b/docs/5.x/docs/guides/contributing.mdx
@@ -0,0 +1,7 @@
+---
+title: Contributing
+---
+
+import Contributing from '../../../../CONTRIBUTING.md';
+
+<Contributing />
diff --git a/docs/docs/guides/04-fonts.md b/docs/5.x/docs/guides/fonts.md
similarity index 59%
rename from docs/docs/guides/04-fonts.md
rename to docs/5.x/docs/guides/fonts.md
index 60d3c6e457..661d6bbf6b 100644
--- a/docs/docs/guides/04-fonts.md
+++ b/docs/5.x/docs/guides/fonts.md
@@ -8,40 +8,39 @@ title: Fonts
 
 The easiest way to install custom fonts to your RN project is do as follows:
 
-  1. Define path to assets directory with fonts in project:
+1. Define path to assets directory with fonts in project:
 
-  Example:
+Example:
 
-  ```js
-    module.exports = {
-      ...
-      assets: [
-        './assets/fonts'
-      ],
-  ```
+```js
+  module.exports = {
+    ...
+    assets: [
+      './assets/fonts'
+    ],
+```
 
 :::note
 `fonts` is a folder with `.ttf` files
 :::
 
-  2. Place your font files in your assets directory.
-
-  3. Link font files, using the following command in the terminal:
+2. Place your font files in your assets directory.
 
-  * React Native  `>= 0.69`:
+3. Link font files, using the following command in the terminal:
 
-  ```sh
-  npx react-native-asset
-  ```
+- React Native `>= 0.69`:
 
-  * React Native `< 0.69`:
+```sh
+npx react-native-asset
+```
 
-  ```sh
-  npx react-native link
-  ```
+- React Native `< 0.69`:
 
+```sh
+npx react-native link
+```
 
-  4. Restart your project to refresh changes.
+4. Restart your project to refresh changes.
 
 Now, you are able to use `fontFamily` from font files.
 
@@ -53,8 +52,8 @@ Now, you are able to use `fontFamily` from font files.
 
 To create a custom font, prepare a `fontConfig` object where fonts are divided by platforms. After that, you have to:
 
-* pass the `fontConfig` into `configureFonts` params object property called `config` 
-* set the params object property `isV3` to `false`. 
+- pass the `fontConfig` into `configureFonts` params object property called `config`
+- set the params object property `isV3` to `false`.
 
 The `fontConfig` object accepts `ios`, `android`, `macos`, `windows`, `web`, and `native`. Use these to override fonts on particular platforms.
 
@@ -64,8 +63,12 @@ At a minimum, you need to explicitly pass fonts for `android`, `ios`, and `web`.
 
 ```js
 import * as React from 'react';
-import { configureFonts, MD2LightTheme, PaperProvider } from 'react-native-paper';
-import App from './src/App';
+import {
+  configureFonts,
+  MD2LightTheme,
+  PaperProvider,
+} from 'react-native-paper';
+import App from './App';
 
 const fontConfig = {
   web: {
@@ -121,12 +124,12 @@ const fontConfig = {
       fontFamily: 'sans-serif-thin',
       fontWeight: 'normal',
     },
-  }
+  },
 };
 
 const theme = {
   ...MD2LightTheme,
-  fonts: configureFonts({config: fontConfig, isV3: false}),
+  fonts: configureFonts({ config: fontConfig, isV3: false }),
 };
 
 export default function Main() {
@@ -149,7 +152,7 @@ If you're using TypeScript use `as const` when defining `fontConfig`.
 In the latest version fonts in theme are structured based on the `variant` keys e.g. `displayLarge` or `bodyMedium` which are then used in `Text`'s component throughout the whole library.
 
 :::info
-The default `fontFamily` is different per particular platfrom:
+The default `fontFamily` is different per particular platform:
 
 ```js
 Platform.select({
@@ -158,234 +161,235 @@ Platform.select({
   default: 'sans-serif', // and 'sans-serif-medium' for `fontWeight:"500"`
 }),
 ```
+
 :::
 
-* #### Display
+- #### Display
 
 <div style={{ flexDirection: 'row', display: 'flex' }}>
   <div>
 
-  ```json
-  "displaySmall": {
-    "fontFamily": "Font",
-    "fontSize": 36,
-    "fontWeight": "400",
-    "letterSpacing": 0,
-    "lineHeight": 44,
-  }
-  ```
+```json
+"displaySmall": {
+  "fontFamily": "Font",
+  "fontSize": 36,
+  "fontWeight": "400",
+  "letterSpacing": 0,
+  "lineHeight": 44,
+}
+```
 
   </div>
 
   <div>
 
-  ```json
-  "displayMedium": {
-    "fontFamily": "Font",
-    "fontSize": 45,
-    "fontWeight": "400",
-    "letterSpacing": 0,
-    "lineHeight": 52,
-  }
-  ```
+```json
+"displayMedium": {
+  "fontFamily": "Font",
+  "fontSize": 45,
+  "fontWeight": "400",
+  "letterSpacing": 0,
+  "lineHeight": 52,
+}
+```
 
   </div>
 
   <div style={{flex: 1}}>
 
-  ```json
-  "displayLarge": {
-    "fontFamily": "Font",
-    "fontSize": 57,
-    "fontWeight": "400",
-    "letterSpacing": 0,
-    "lineHeight": 64,
-  }
-  ```
+```json
+"displayLarge": {
+  "fontFamily": "Font",
+  "fontSize": 57,
+  "fontWeight": "400",
+  "letterSpacing": 0,
+  "lineHeight": 64,
+}
+```
 
   </div>
 </div>
 
-* #### Headline
+- #### Headline
 
 <div style={{ flexDirection: 'row', display: 'flex' }}>
   <div>
 
-  ```json
-  "headlineSmall": {
-    "fontFamily": "Font",
-    "fontSize": 24,
-    "fontWeight": "400",
-    "letterSpacing": 0,
-    "lineHeight": 32,
-  }
-  ```
+```json
+"headlineSmall": {
+  "fontFamily": "Font",
+  "fontSize": 24,
+  "fontWeight": "400",
+  "letterSpacing": 0,
+  "lineHeight": 32,
+}
+```
 
   </div>
 
   <div>
 
-  ```json
-  "headlineMedium": {
-    "fontFamily": "Font",
-    "fontSize": 28,
-    "fontWeight": "400",
-    "letterSpacing": 0,
-    "lineHeight": 36,
-  }
-  ```
+```json
+"headlineMedium": {
+  "fontFamily": "Font",
+  "fontSize": 28,
+  "fontWeight": "400",
+  "letterSpacing": 0,
+  "lineHeight": 36,
+}
+```
 
   </div>
 
   <div style={{flex: 1}}>
 
-  ```json
-  "headlineLarge": {
-    "fontFamily": "Font",
-    "fontSize": 32,
-    "fontWeight": "400",
-    "letterSpacing": 0,
-    "lineHeight": 40,
-  }
-  ```
+```json
+"headlineLarge": {
+  "fontFamily": "Font",
+  "fontSize": 32,
+  "fontWeight": "400",
+  "letterSpacing": 0,
+  "lineHeight": 40,
+}
+```
 
   </div>
 </div>
 
-* #### Title
+- #### Title
 
 <div style={{ flexDirection: 'row', display: 'flex' }}>
   <div>
 
-  ```json
-  "titleSmall": {
-    "fontFamily": "Font",
-    "fontSize": 14,
-    "fontWeight": "500",
-    "letterSpacing": 0.1,
-    "lineHeight": 20,
-  }
-  ```
+```json
+"titleSmall": {
+  "fontFamily": "Font",
+  "fontSize": 14,
+  "fontWeight": "500",
+  "letterSpacing": 0.1,
+  "lineHeight": 20,
+}
+```
 
   </div>
 
   <div>
 
-  ```json
-  "titleMedium": {
-    "fontFamily": "Font",
-    "fontSize": 16,
-    "fontWeight": "500",
-    "letterSpacing": 0.15,
-    "lineHeight": 24,
-  }
-  ```
+```json
+"titleMedium": {
+  "fontFamily": "Font",
+  "fontSize": 16,
+  "fontWeight": "500",
+  "letterSpacing": 0.15,
+  "lineHeight": 24,
+}
+```
 
   </div>
 
   <div style={{flex: 1}}>
 
-  ```json
-  "titleLarge": {
-    "fontFamily": "Font",
-    "fontSize": 22,
-    "fontWeight": "400",
-    "letterSpacing": 0,
-    "lineHeight": 28,
-  }
-  ```
+```json
+"titleLarge": {
+  "fontFamily": "Font",
+  "fontSize": 22,
+  "fontWeight": "400",
+  "letterSpacing": 0,
+  "lineHeight": 28,
+}
+```
 
   </div>
 </div>
 
-* #### Label
+- #### Label
 
 <div style={{ flexDirection: 'row', display: 'flex' }}>
   <div>
 
-  ```json
-  "labelSmall": {
-    "fontFamily": "Font",
-    "fontSize": 11,
-    "fontWeight": "500",
-    "letterSpacing": 0.5,
-    "lineHeight": 16,
-  }
-  ```
+```json
+"labelSmall": {
+  "fontFamily": "Font",
+  "fontSize": 11,
+  "fontWeight": "500",
+  "letterSpacing": 0.5,
+  "lineHeight": 16,
+}
+```
 
   </div>
 
   <div>
 
-  ```json
-  "labelMedium": {
-    "fontFamily": "Font",
-    "fontSize": 12,
-    "fontWeight": "500",
-    "letterSpacing": 0.5,
-    "lineHeight": 16,
-  }
-  ```
+```json
+"labelMedium": {
+  "fontFamily": "Font",
+  "fontSize": 12,
+  "fontWeight": "500",
+  "letterSpacing": 0.5,
+  "lineHeight": 16,
+}
+```
 
   </div>
 
   <div style={{flex: 1}}>
 
-  ```json
-  "labelLarge": {
-    "fontFamily": "Font",
-    "fontSize": 14,
-    "fontWeight": "500",
-    "letterSpacing": 0.1,
-    "lineHeight": 20,
-  }
-  ```
+```json
+"labelLarge": {
+  "fontFamily": "Font",
+  "fontSize": 14,
+  "fontWeight": "500",
+  "letterSpacing": 0.1,
+  "lineHeight": 20,
+}
+```
 
   </div>
 </div>
 
-* #### Body
+- #### Body
 
 <div style={{ flexDirection: 'row', display: 'flex' }}>
   <div>
 
-  ```json
-  "bodySmall": {
-    "fontFamily": "Font",
-    "fontSize": 12,
-    "fontWeight": "400",
-    "letterSpacing": 0.4,
-    "lineHeight": 16,
-  }
-  ```
+```json
+"bodySmall": {
+  "fontFamily": "Font",
+  "fontSize": 12,
+  "fontWeight": "400",
+  "letterSpacing": 0.4,
+  "lineHeight": 16,
+}
+```
 
   </div>
 
   <div>
 
-  ```json
-  "bodyMedium": {
-    "fontFamily": "Font",
-    "fontSize": 14,
-    "fontWeight": "400",
-    "letterSpacing": 0.25,
-    "lineHeight": 20,
-  }
-  ```
+```json
+"bodyMedium": {
+  "fontFamily": "Font",
+  "fontSize": 14,
+  "fontWeight": "400",
+  "letterSpacing": 0.25,
+  "lineHeight": 20,
+}
+```
 
   </div>
 
   <div style={{flex: 1}}>
 
-  ```json
-  "bodyLarge": {
-    "fontFamily": "Font",
-    "fontSize": 16,
-    "fontWeight": "400",
-    "letterSpacing": 0.15,
-    "lineHeight": 24,
-  }
-  ```
+```json
+"bodyLarge": {
+  "fontFamily": "Font",
+  "fontSize": 16,
+  "fontWeight": "400",
+  "letterSpacing": 0.15,
+  "lineHeight": 24,
+}
+```
 
   </div>
 </div>
@@ -400,16 +404,22 @@ If any component uses Paper's `Text` component, without specified <b>variant</b>
   "letterSpacing": 0,
 },
 ```
+
 :::
 
 #### Using `configureFonts` helper
 
-* If there is a need to create a custom font variant, prepare its config object including required all fonts properties. After that, defined `fontConfig` has to be passed under the <b>`variant`</b> name as `config` into the params object:
+- If there is a need to create a custom font variant, prepare its config object including required all fonts properties. After that, defined `fontConfig` has to be passed under the <b>`variant`</b> name as `config` into the params object:
 
 ```js
 import * as React from 'react';
-import { configureFonts, MD3LightTheme, PaperProvider } from 'react-native-paper';
-import App from './src/App';
+import {
+  configureFonts,
+  MD3LightTheme,
+  PaperProvider,
+} from 'react-native-paper';
+import { Platform } from 'react-native';
+import App from './App';
 
 const fontConfig = {
   customVariant: {
@@ -422,12 +432,12 @@ const fontConfig = {
     letterSpacing: 0.5,
     lineHeight: 22,
     fontSize: 20,
-  }
+  },
 };
 
 const theme = {
   ...MD3LightTheme,
-  fonts: configureFonts({config: fontConfig}),
+  fonts: configureFonts({ config: fontConfig }),
 };
 
 export default function Main() {
@@ -442,31 +452,34 @@ export default function Main() {
 If you're using TypeScript you will need to create a custom `Text` component which accepts your custom variants:
 
 ```typescript
-import { customText } from 'react-native-paper'
+import { customText } from 'react-native-paper';
 
 // Use this instead of importing `Text` from `react-native-paper`
-export const Text = customText<'customVariant'>()
+export const Text = customText<'customVariant'>();
 ```
 
-
-* In order to override one of the available `variant`'s font properties, pass the modified `fontConfig` under specific <b>`variant`</b> name as `config` into the params object:
+- In order to override one of the available `variant`'s font properties, pass the modified `fontConfig` under specific <b>`variant`</b> name as `config` into the params object:
 
 ```js
 import * as React from 'react';
-import { configureFonts, MD3LightTheme, PaperProvider } from 'react-native-paper';
-import App from './src/App';
+import {
+  configureFonts,
+  MD3LightTheme,
+  PaperProvider,
+} from 'react-native-paper';
+import App from './App';
 
 const fontConfig = {
   bodyLarge: {
     letterSpacing: 0.5,
     lineHeight: 22,
     fontSize: 20,
-  }
+  },
 };
 
 const theme = {
   ...MD3LightTheme,
-  fonts: configureFonts({config: fontConfig}),
+  fonts: configureFonts({ config: fontConfig }),
 };
 
 export default function Main() {
@@ -478,20 +491,24 @@ export default function Main() {
 }
 ```
 
-* However, if you just want to override any font property e.g. `fontFamily` or `letterSpacing` for <b>all</b> variants, you can pass the `fontConfig` as a `config` into the params object <b>without</b> specifying variant name:
+- However, if you just want to override any font property e.g. `fontFamily` or `letterSpacing` for <b>all</b> variants, you can pass the `fontConfig` as a `config` into the params object <b>without</b> specifying variant name:
 
 ```js
 import * as React from 'react';
-import { configureFonts, MD3LightTheme, PaperProvider } from 'react-native-paper';
-import App from './src/App';
+import {
+  configureFonts,
+  MD3LightTheme,
+  PaperProvider,
+} from 'react-native-paper';
+import App from './App';
 
 const fontConfig = {
-  fontFamily: 'NotoSans'
+  fontFamily: 'NotoSans',
 };
 
 const theme = {
   ...MD3LightTheme,
-  fonts: configureFonts({config: fontConfig}),
+  fonts: configureFonts({ config: fontConfig }),
 };
 
 export default function Main() {
@@ -503,17 +520,16 @@ export default function Main() {
 }
 ```
 
-
 ## Variable fonts
 
-Although React Native Paper supports `fontWeight` and `fontStyle` properties, there are multiple limitations to custom 
-fonts in React Native. Using custom [variable fonts](https://fonts.google.com/knowledge/introducing_type/introducing_variable_fonts) 
+Although React Native Paper supports `fontWeight` and `fontStyle` properties, there are multiple limitations to custom
+fonts in React Native. Using custom [variable fonts](https://fonts.google.com/knowledge/introducing_type/introducing_variable_fonts)
 is especially problematic, with some platforms failing to render variants entirely. To ensure correct typography in your
-app, we suggest installing each font variant as a separate file. Below you'll find example on how to set up React Native Paper 
-theme with custom fonts. 
+app, we suggest installing each font variant as a separate file. Below you'll find example on how to set up React Native Paper
+theme with custom fonts.
 
 Should you decide to use a variable font anyway, second example will show you how to test if the font is rendered correctly in React Native on all platforms.
- 
+
 <details>
   <summary>Variable fonts examples</summary>
   <ul>
diff --git a/docs/docs/guides/01-getting-started.md b/docs/5.x/docs/guides/getting-started.md
similarity index 98%
rename from docs/docs/guides/01-getting-started.md
rename to docs/5.x/docs/guides/getting-started.md
index 68071c4d25..554f3ceb60 100644
--- a/docs/docs/guides/01-getting-started.md
+++ b/docs/5.x/docs/guides/getting-started.md
@@ -18,7 +18,7 @@ npm install react-native-paper
 npm install react-native-safe-area-context
 ```
 
-Additionaly for `iOS` platform there is a requirement to link the native parts of the library:
+Additionally for `iOS` platform there is a requirement to link the native parts of the library:
 
 ```bash
 npx pod-install
diff --git a/docs/docs/guides/03-icons.mdx b/docs/5.x/docs/guides/icons.mdx
similarity index 96%
rename from docs/docs/guides/03-icons.mdx
rename to docs/5.x/docs/guides/icons.mdx
index 015a1bee1b..e982c82730 100644
--- a/docs/docs/guides/03-icons.mdx
+++ b/docs/5.x/docs/guides/icons.mdx
@@ -2,15 +2,15 @@
 title: Icons
 ---
 
-import TabItem from '@theme/TabItem';
-import Tabs from '@theme/Tabs';
-import IconsList from '@site/src/components/IconsList.tsx';
+import TabItem from '@docs/components/TabItem';
+import Tabs from '@docs/components/Tabs';
+import IconsList from '@docs/components/IconsList.tsx';
 
 # Icons
 
 ## Configuring icons
 
-Many of the components require the [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) library to render correctly. If you're using Expo, you don't need to do anything extra, but if it's a vanilla React Native project, you need to link the library as described in the [getting started guide](./01-getting-started.md).
+Many of the components require the [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) library to render correctly. If you're using Expo, you don't need to do anything extra, but if it's a vanilla React Native project, you need to link the library as described in the [getting started guide](./getting-started).
 
 :::note
 If you opted out of vector icons support using [babel-plugin-optional-require](https://github.com/satya164/babel-plugin-optional-require), you won't be able to use icon names for the icon prop. Some components may not look correct without vector icons and might need extra configuration.
diff --git a/docs/docs/guides/10-migration-guide-to-5.0.md b/docs/5.x/docs/guides/migration-guide-to-5.0.md
similarity index 78%
rename from docs/docs/guides/10-migration-guide-to-5.0.md
rename to docs/5.x/docs/guides/migration-guide-to-5.0.md
index 6c358d387f..21bb96c2f7 100644
--- a/docs/docs/guides/10-migration-guide-to-5.0.md
+++ b/docs/5.x/docs/guides/migration-guide-to-5.0.md
@@ -4,29 +4,29 @@ title: Introducing v5 with Material You
 
 React Native Paper v5 is all about adopting the new Material Design 3 <i>aka</i> Material You. It was released in October 2021 after intense work and effort to make Material You follow a more expressive approach to design.
 
-Paper now supports both Material Design 2 and 3 through the configuration described in [Versioning](#versioning) and is compatible with a handful of API changes. 
+Paper now supports both Material Design 2 and 3 through the configuration described in [Versioning](#versioning) and is compatible with a handful of API changes.
 
 # Migration guide to Material You 5.0
 
-Version 5.0 brings support for the next Material Design iteration branded as Material You <i>(in fact being Material Design v3 or in short MD3)</i> into the `react-native-paper` library. All the components were refined according to the official [design kit on figma](https://www.figma.com/community/file/1035203688168086460) and adjusted in terms of visuals by changes in colors, typography and animations. 
+Version 5.0 brings support for the next Material Design iteration branded as Material You <i>(in fact being Material Design v3 or in short MD3)</i> into the `react-native-paper` library. All the components were refined according to the official [design kit on figma](https://www.figma.com/community/file/1035203688168086460) and adjusted in terms of visuals by changes in colors, typography and animations.
 
-Below you can find the most important information about the components whose API may have changed  API has been changed due to supporting new props, renaming existing ones or some deprecations. Hopefully, based on the presented required changes, migration to the latest version should be smooth. Enjoy!
+Below you can find the most important information about the components whose API may have changed API has been changed due to supporting new props, renaming existing ones or some deprecations. Hopefully, based on the presented required changes, migration to the latest version should be smooth. Enjoy!
 
 ### Installation
 
-* The `v5` has been oficially released as a stable version, which means it will be installed by default from the `npm`. In order to do that, open a Terminal in your project's folder and run:
+- The `v5` has been officially released as a stable version, which means it will be installed by default from the `npm`. In order to do that, open a Terminal in your project's folder and run:
 
 ```bash npm2yarn
 npm install react-native-paper
 ```
 
-* From `v5` there is a need to install [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) for handling safe area.
+- From `v5` there is a need to install [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) for handling safe area.
 
 ```bash npm2yarn
 npm install react-native-safe-area-context
 ```
 
-Additionaly for `iOS` platform there is a requirement to link the native parts of the library:
+Additionally for `iOS` platform there is a requirement to link the native parts of the library:
 
 ```bash
 npx pod-install
@@ -38,13 +38,13 @@ npx pod-install
 
 Introducing Material You <i>(MD3)</i> into `react-native-paper` doesn't mean dropping previous Material Design <i>(MD2)</i>! On the contrary, both of them will be supported, however, not simultaneously. To specify which design system components should follow in the app, there is a newly created property in [the theme](https://callstack.github.io/react-native-paper/docs/guides/theming#theme-properties) named `version` that accepts one of two values:
 
-* <b>3</b> – <b>(default)</b> new Material You <i>(MD3)</i>,
-* <b>2</b> - previous Material Design <i>(MD2)</i>.
+- <b>3</b> – <b>(default)</b> new Material You <i>(MD3)</i>,
+- <b>2</b> - previous Material Design <i>(MD2)</i>.
 
 ```js
 theme: {
   /* ... */
-  version: 3 | 2
+  version: 3 | 2;
 }
 ```
 
@@ -60,7 +60,7 @@ Each accent and error colors has a group of related tones. The tones are mapped
 Dynamic colors are not supported yet
 :::
 
-![color-palette](../../static/migration/color-palette.png)
+![color-palette](../../../public/migration/color-palette.png)
 
 Colors theme structure should follow the default palette and contain the following properties:
 
@@ -114,7 +114,7 @@ theme: {
 
 ## Typography
 
-A new way of approaching typography introduces one component `<Text>` which accepts prop `variant`. Variant defines appropriate text styles for type role and its size. The updated type scale organizes styles into five roles that are named to describe their purposes: <b>Display</b>, <b>Headline</b>, <b>Title</b>, <b>Label</b> and <b>Body</b> along with three display styles <i>large</i>, <i>medium</i>, and <i>small</i>. In total, there are fifteen variants that are MD3 compliant and are reflecting design typography tokens written in camel case. 
+A new way of approaching typography introduces one component `<Text>` which accepts prop `variant`. Variant defines appropriate text styles for type role and its size. The updated type scale organizes styles into five roles that are named to describe their purposes: <b>Display</b>, <b>Headline</b>, <b>Title</b>, <b>Label</b> and <b>Body</b> along with three display styles <i>large</i>, <i>medium</i>, and <i>small</i>. In total, there are fifteen variants that are MD3 compliant and are reflecting design typography tokens written in camel case.
 
 :::info
 If any component uses Paper's `Text` component, without specified <b>variant</b>, then `default` variant is applied.
@@ -140,11 +140,11 @@ If any component uses Paper's `Text` component, without specified <b>variant</b>
 <Text variant="labelLarge">Label Large</Text>
 <Text variant="labelMedium">Label Medium</Text>
 <Text variant="labelSmall">Label Small</Text>
- ```
+```
 
 Take a look at the suggested replacement diff:
 
- ```diff
+```diff
 - <Headline>Headline</Headline>
 + <Text variant="headlineSmall">Headline</Text>
 
@@ -159,33 +159,33 @@ Take a look at the suggested replacement diff:
 
 - <Caption>Caption</Caption>
 + <Text variant="bodySmall">Caption</Text>
- ```
-
+```
 
 👉 You can find more about typography on the [Material You website](https://m3.material.io/styles/typography/overview)
 
 ### Configure fonts
 
-The existing utility called `configureFonts` was adjusted to help users configure their theme fonts in both version, that's why that function, as of today, is going to accept the object with the follwing properties as an argument:
+The existing utility called `configureFonts` was adjusted to help users configure their theme fonts in both version, that's why that function, as of today, is going to accept the object with the following properties as an argument:
 
 ```ts
-configureFonts(params)
+configureFonts(params);
 ```
 
 <b>Parameters:</b>
 
-| NAME        | TYPE        | REQUIRED    |
-| ----------- | ----------- | ----------- |
-| params      | object      | No          |
+| NAME   | TYPE   | REQUIRED |
+| ------ | ------ | -------- |
+| params | object | No       |
 
 Valid `params` keys are:
 
-  * `config` ([MD2FontsConfig](https://github.com/callstack/react-native-paper/blob/main/src/styles/fonts.tsx#L63) | [MD3FontsConfig](https://github.com/callstack/react-native-paper/blob/main/src/styles/fonts.tsx#L67)) - fonts config object appropriate to the MD version
-  * `isV3` (boolean) - whether adjusting theme fonts for v3. Default it <b>true</b>.
+- `config` ([MD2FontsConfig](https://github.com/callstack/react-native-paper/blob/main/styles/fonts.tsx#L63) | [MD3FontsConfig](https://github.com/callstack/react-native-paper/blob/main/styles/fonts.tsx#L67)) - fonts config object appropriate to the MD version
+- `isV3` (boolean) - whether adjusting theme fonts for v3. Default it <b>true</b>.
 
 To use your current font config from <b>v2</b> and migrate to <b>v3</b> there are two requirements:
-* the font config previously passed directly into function has to be passed into the params object property called `config`
-* the params object property `isV3` has to be set to `false`
+
+- the font config previously passed directly into function has to be passed into the params object property called `config`
+- the params object property `isV3` has to be set to `false`
 
 ```diff
 - configureFonts(fontConfig)
@@ -202,31 +202,25 @@ If you want to check how to use `configureFonts` on MD3, check the [Fonts](https
 
 `Appbar` and `Appbar.Header` in the latest version can be used in four various modes due to new prop `mode`:
 
-* `small` - Appbar with default height <i>(64) (default)</i>,
-* `medium` - Appbar with medium height <i>(112)</i>,
-* `large` - Appbar with large height <i>(152)</i>,
-* `center-aligned` - Appbar with default height <i>(64)</i> and center-aligned title.
+- `small` - Appbar with default height <i>(64) (default)</i>,
+- `medium` - Appbar with medium height <i>(112)</i>,
+- `large` - Appbar with large height <i>(152)</i>,
+- `center-aligned` - Appbar with default height <i>(64)</i> and center-aligned title.
 
 ```js
-<Appbar mode="center-aligned">
-  /* ... */
-</Appbar>
+<Appbar mode="center-aligned">/* ... */</Appbar>
 ```
 
 To make it easier for users to build the `BottomBar`, formed on the `Appbar` components, we have added a property `safeAreaInsets`:
 
 ```js
-<Appbar safeAreaInsets={{ bottom: 47 }}>
-  /* ... */
-</Appbar>
+<Appbar safeAreaInsets={{ bottom: 47 }}>/* ... */</Appbar>
 ```
- 
+
 It's worth noting that by default the theme version 3 `Appbar` and `Appbar.Header` don't have a shadow. However, it can be added by passing prop `elevated` into the component:
 
 ```js
-<Appbar elevated>
-  /* ... */
-</Appbar>
+<Appbar elevated>/* ... */</Appbar>
 ```
 
 #### Appbar.Action
@@ -259,9 +253,9 @@ According to the updates in `Surface` on the top of which `Banner`, `Searchbar`
 
 For the sake of new animation of pill shape, indicating active destination, and assisting icon change from outlined to filled, there are three changes within `navigationState.routes` property items:
 
-* `color` is deprecated since color is constant and the same for all routes,
-* `icon` is renamed to `focusedIcon`, as the name implies, with theme version 3 it's the outline icon used as focused tab icon and with theme version 2 it's a default icon,
-* `unfocusedIcon` <i>(optional)</i> is the filled icon used as the unfocused tab icon, compatible with theme version 3.
+- `color` is deprecated since color is constant and the same for all routes,
+- `icon` is renamed to `focusedIcon`, as the name implies, with theme version 3 it's the outline icon used as focused tab icon and with theme version 2 it's a default icon,
+- `unfocusedIcon` <i>(optional)</i> is the filled icon used as the unfocused tab icon, compatible with theme version 3.
 
 :::info
 `unfocusedIcon` is optional, if you can't find outline icon equivalent, omit that prop, so `focusedIcon` will be displayed in both active and inactive state.
@@ -280,29 +274,32 @@ routes: [
 ]
 ```
 
-The `compact` prop was also introduced, working with both themes. It indicates whether tabs should be spread across the entire width, especially in a <i>horizontal</i> mode. 
+The `compact` prop was also introduced, working with both themes. It indicates whether tabs should be spread across the entire width, especially in a <i>horizontal</i> mode.
 
 ```js
 <BottomNavigation compact />
 ```
 
 It's worth to mention that default value of prop `shifting` depends on the theme version:
-* <b>3</b> - it's `false`,
-* <b>2</b> - it's `true` when there are more than 3 tabs.
+
+- <b>3</b> - it's `false`,
+- <b>2</b> - it's `true` when there are more than 3 tabs.
 
 Two additional props that control the scene animation were introduced that control the animation of the tabs when `sceneAnimationEnabled` is `true`:
-* `sceneAnimationType: "opacity" | "shifting" | undefined` - defines the animation type for the scene. `shifting` enables a new animation where navigating to a scene will shift it horizontally into view. Both `opacity` and `undefined` have the same effect, fading the scene into view.
-* `sceneAnimationEasing` allows specifying a custom easing function for the scene animation.
 
-![shiftingAnimation](../../static/screenshots/bottom-navigation-shifting.gif)
+- `sceneAnimationType: "opacity" | "shifting" | undefined` - defines the animation type for the scene. `shifting` enables a new animation where navigating to a scene will shift it horizontally into view. Both `opacity` and `undefined` have the same effect, fading the scene into view.
+- `sceneAnimationEasing` allows specifying a custom easing function for the scene animation.
+
+![shiftingAnimation](../../../public/screenshots/bottom-navigation-shifting.gif)
 
 On a final note, please be aware that `BottomNavigation` with theme version 3 doesn't have a shadow.
 
 ### Button
 
 `Button`'s property `mode` has been expanded with two additional options:
-* `elevated` - button with a background color and elevation, used when absolutely necessary e.g. button requires visual separation from a patterned background,
-* `container-tonal` - button with a secondary background color, an alternative middle ground between contained and outlined buttons.
+
+- `elevated` - button with a background color and elevation, used when absolutely necessary e.g. button requires visual separation from a patterned background,
+- `container-tonal` - button with a secondary background color, an alternative middle ground between contained and outlined buttons.
 
 ```js
 <>
@@ -316,8 +313,9 @@ On a final note, please be aware that `BottomNavigation` with theme version 3 do
 ```
 
 The property `color` is deprecated, but in its place two new props called `buttonColor` and `textColor` are introduced:
-* `buttonColor` - custom button's background color,
-* `textColor` - custom button's text color.
+
+- `buttonColor` - custom button's background color,
+- `textColor` - custom button's text color.
 
 ```diff
 - <Button mode="text" color="red" onPress={onPress}>Custom text color</Button>
@@ -343,23 +341,21 @@ The `Card` component's property `mode` has been expanded with one additional opt
 
 Since there is no one right way to make a card, there is also no one right way for specifying a title and subtitle variant. Therefore two new props come in handy:
 
-* `titleVariant` - title text variant defines appropriate text styles for type role and its size.
-* `subtitleVariant` - subtitle text variant defines appropriate text styles for type role and its size.
+- `titleVariant` - title text variant defines appropriate text styles for type role and its size.
+- `subtitleVariant` - subtitle text variant defines appropriate text styles for type role and its size.
 
 ```js
-<Card.Title
-  titleVariant="headlineMedium"
-  subtitleVariant="bodyLarge"
-/>
+<Card.Title titleVariant="headlineMedium" subtitleVariant="bodyLarge" />
 ```
 
 ### Checkbox
+
 #### Checkbox.Item
 
 `Checkbox.Item` similarly to `RadioButton.Item` has been expanded with the prop called `labelVariant`, which defines appropriate text styles for type role and its size.
 
 ```js
-<Checkbox.Item 
+<Checkbox.Item
   labelVariant="titleLarge"
 >
 ```
@@ -368,18 +364,24 @@ Since there is no one right way to make a card, there is also no one right way f
 
 To properly compose `Chip` component and adjust into required type, there are three new props that will come in handy:
 
-* `compact` - sets smaller horizontal paddings around the label, useful for `Chip` containing only the label,
-* `elevated` - indicating whether `Chip` should be elevated,
-* `showSelectedOverlay` - defining whether to display an overlay on a selected button.
+- `compact` - sets smaller horizontal paddings around the label, useful for `Chip` containing only the label,
+- `elevated` - indicating whether `Chip` should be elevated,
+- `showSelectedOverlay` - defining whether to display an overlay on a selected button.
 
 ```js
 <>
   <Chip compact>Compact Chip</Chip>
-  <Chip icon="camera" elevated>Elevated Chip</Chip>
-  <Chip icon="camera" selected showSelectedOverlay>Chip with selected overlay</Chip>
+  <Chip icon="camera" elevated>
+    Elevated Chip
+  </Chip>
+  <Chip icon="camera" selected showSelectedOverlay>
+    Chip with selected overlay
+  </Chip>
 </>
 ```
+
 ### Dialog
+
 #### Dialog.Icon
 
 `Dialog.Icon` is another freshly added component presenting an icon within a `Dialog`, placed at the top of the content.
@@ -395,12 +397,13 @@ It's working only with theme version 3.
   </Dialog>
 </Portal>
 ```
+
 ### Divider
 
 `Divider` component received two new props:
 
-* `bold` - divider is bolded,
-* `horizontalInset` - divider has horizontal insets on both sides.
+- `bold` - divider is bolded,
+- `horizontalInset` - divider has horizontal insets on both sides.
 
 Additionally prop `inset` was renamed to `leftInset`.
 
@@ -410,6 +413,7 @@ Additionally prop `inset` was renamed to `leftInset`.
 ```
 
 ### Drawer
+
 #### Drawer.CollapsedItem <i>(Navigation rail)</i>
 
 `Drawer.CollapsedItem` is a newly created side navigation component that can be used within `Drawer`, representing a destination in the form of an action item with an icon and optionally label.
@@ -456,15 +460,15 @@ With the latest version, there is a possibility to specify whether `Drawer.Secti
 
 `FAB`, `AnimatedFAB` and `FAB.Group` in the latest version can be used with four variants and two modes, thanks to two new props:
 
-* `variant` defines color mappings variant for combinations of container and icon colors. Can be one of: <b>primary</b> <i>(default)</i>, <b>secondary</b>, <b>tertiary</b> or <b>surface</b>.
+- `variant` defines color mappings variant for combinations of container and icon colors. Can be one of: <b>primary</b> <i>(default)</i>, <b>secondary</b>, <b>tertiary</b> or <b>surface</b>.
 
 ```js
 <FAB variant="tertiary" />
 ```
 
-* `mode` specifies whether a button should be <b>flat</b> or <b>elevated</b>:
-   - `flat` - button without a shadow,
-   - `elevated` - button with a shadow.
+- `mode` specifies whether a button should be <b>flat</b> or <b>elevated</b>:
+  - `flat` - button without a shadow,
+  - `elevated` - button with a shadow.
 
 ```js
 <FAB mode="flat" />
@@ -472,11 +476,11 @@ With the latest version, there is a possibility to specify whether `Drawer.Secti
 
 #### FAB
 
-Additionaly `FAB` may be applied in one of three available sizes, thanks to new prop `size`: 
+Additionally `FAB` may be applied in one of three available sizes, thanks to new prop `size`:
 
-* `small` - FAB with small height (40),
-* `medium` - Appbar with default medium height (56),
-* `large` - Appbar with large height (96).
+- `small` - FAB with small height (40),
+- `medium` - Appbar with default medium height (56),
+- `large` - Appbar with large height (96).
 
 ```js
 <FAB size="large" />
@@ -504,7 +508,7 @@ There is also deprecation in one of the `actions` properties, namely `small` pro
 + <FAB.Group actions={[{ icon: "plus" }]} />
 ```
 
-Additionally, the action item property previously known as `labelStyle` was renamed to `containerStyle` since it's tied mostly with the container styles. At the same time, `labelStyle` is still available with the new role related to styling item label. 
+Additionally, the action item property previously known as `labelStyle` was renamed to `containerStyle` since it's tied mostly with the container styles. At the same time, `labelStyle` is still available with the new role related to styling item label.
 
 ```diff
 - <FAB.Group actions={[{ icon: "plus", labelStyle: styles.customStyle }]} />
@@ -515,13 +519,13 @@ Additionally, the action item property previously known as `labelStyle` was rena
 
 `IconButton` received two new props:
 
-* `selected` sets alternative combination of icon and container color,
+- `selected` sets alternative combination of icon and container color,
 
 ```js
 <IconButton selected>
 ```
 
-* `containerColor` custom background color of the icon container. 
+- `containerColor` custom background color of the icon container.
 
 ```js
 <IconButton containerColor="red">
@@ -535,12 +539,13 @@ At the same time, the `color` prop was renamed to `iconColor`.
 ```
 
 ### Menu
+
 #### Menu.Item
 
 `Menu.Item` received two new props:
 
-* `dense` sets smaller item height for more condensed layout,
-* `trailingIcon` which handles displaying an icon at the end of the item row. 
+- `dense` sets smaller item height for more condensed layout,
+- `trailingIcon` which handles displaying an icon at the end of the item row.
 
 ```js
 <Menu.Item dense trailingIcon="chevron-up">
@@ -554,46 +559,47 @@ At the same time, by analogy to the second new prop, the `icon` prop was renamed
 ```
 
 ### RadioButton
+
 ##### RadioButton.Item
 
 `RadioButton.Item` has been expanded with the prop called `labelVariant`, which defines appropriate text styles for type role and its size.
 
 ```js
-<RadioButton.Item 
+<RadioButton.Item
   labelVariant="titleLarge"
 >
 ```
 
 ### SegmentedButtons
 
-`SegmentedButtons` is a completely new component introduced in the latest version. It allows people to select options, switch views, or sort elements. It supports single and multiselect select variant and provide a lot 
+`SegmentedButtons` is a completely new component introduced in the latest version. It allows people to select options, switch views, or sort elements. It supports single and multiselect select variant and provide a lot
 of customization options.
 
-![segmentedButtons](../../static/screenshots/segmentedbuttons.gif)
+![segmentedButtons](../../../public/screenshots/segmentedbuttons.gif)
 
 ```js
 const MyComponent = () => {
   const [value, setValue] = React.useState('');
 
   return (
-      <SegmentedButtons
-        value={value}
-        onValueChange={setValue}
-        buttons={[
-          {
-            value: 'walk',
-            label: 'Walking',
-          },
-          {
-            value: 'train',
-            label: 'Transit',
-          },
-          {
-            value: 'drive',
-            label: 'Driving',
-          },
-        ]}
-      />
+    <SegmentedButtons
+      value={value}
+      onValueChange={setValue}
+      buttons={[
+        {
+          value: 'walk',
+          label: 'Walking',
+        },
+        {
+          value: 'train',
+          label: 'Transit',
+        },
+        {
+          value: 'drive',
+          label: 'Driving',
+        },
+      ]}
+    />
   );
 };
 ```
@@ -602,14 +608,15 @@ const MyComponent = () => {
 
 `Snackbar` due to the optional close affordance, in form of `IconButton` <i>(located on the right side of action button)</i>, received three new props:
 
-* `icon` - icon to display when `onIconPress` is defined. Default will be `close` icon.
-* `onIconPress` - function to execute on icon button press. The icon button appears only when this prop is specified.
-* `iconAccessibilityLabel` - accessibility label for the icon button.
+- `icon` - icon to display when `onIconPress` is defined. Default will be `close` icon.
+- `onIconPress` - function to execute on icon button press. The icon button appears only when this prop is specified.
+- `iconAccessibilityLabel` - accessibility label for the icon button.
 
 ### Surface
 
 `Surface` component received one new prop:
-* `elevation` - accepts values from `0` to `5` and applies background color and shadows to the `Surface` component. Supports both iOS and Android.
+
+- `elevation` - accepts values from `0` to `5` and applies background color and shadows to the `Surface` component. Supports both iOS and Android.
 
 Previously `elevation` was passed inside the `style` prop. Since it supported not only Android, but also iOS, we decided to extract it from `style` and create a separate `elevation` prop for that.
 
@@ -619,9 +626,10 @@ Previously `elevation` was passed inside the `style` prop. Since it supported no
 ```
 
 ### TextInput
+
 #### TextInput.Icon
 
-The property `name` was renamed to `icon`, since the scope and type of that prop is much wider than just the icon name – it accepts also the function which receives an object with color and size properties and 
+The property `name` was renamed to `icon`, since the scope and type of that prop is much wider than just the icon name – it accepts also the function which receives an object with color and size properties and
 
 ```diff
 - <TextInput.Icon name="magnify" />
@@ -632,8 +640,7 @@ The property `name` was renamed to `icon`, since the scope and type of that prop
 
 Component displayed upon tapping and holding a screen element or component used to present an informative text label identifying an element, such as a description of its function.
 
-![tooltip](../../static/screenshots/tooltips.gif)
-
+![tooltip](../../../public/screenshots/tooltips.gif)
 
 ```js
 <Tooltip title="Selected Camera">
@@ -645,8 +652,9 @@ Component displayed upon tapping and holding a screen element or component used
 
 <i>With this, that’s a wrap.</i>
 
-The update wouldn't happen without a group of great React Native experts I'm happy to work with. 
+The update wouldn't happen without a group of great React Native experts I'm happy to work with.
 From this place I would like to thank:
+
 - [Daniel Szczepanik](https://github.com/Drakeoon) for his commitment, effort and collaborative work on adjusting components,
 - [Olimpia Zurek](https://github.com/OlimpiaZurek) for her contribution and help,
 - [Aleksandra Desmurs-Linczewska](https://github.com/p-syche), [Jan Jaworski](https://github.com/jaworek) and [Kewin Wereszczyński](https://github.com/kwereszczynski) for checking and testing changes as well as providing valuable feedback,
diff --git a/docs/docs/guides/05-react-native-web.md b/docs/5.x/docs/guides/react-native-web.md
similarity index 100%
rename from docs/docs/guides/05-react-native-web.md
rename to docs/5.x/docs/guides/react-native-web.md
diff --git a/docs/docs/guides/09-react-navigation.md b/docs/5.x/docs/guides/react-navigation.md
similarity index 92%
rename from docs/docs/guides/09-react-navigation.md
rename to docs/5.x/docs/guides/react-navigation.md
index d9227cfb2b..04a3a9ae1e 100644
--- a/docs/docs/guides/09-react-navigation.md
+++ b/docs/5.x/docs/guides/react-navigation.md
@@ -6,14 +6,14 @@ title: Integrate AppBar with React Navigation
 
 ## Prerequisites
 
- - `react-native-paper`
- - `react-navigation`
- 
+- `react-native-paper`
+- `react-navigation`
+
 We assume that you have already installed the mentioned libraries above, otherwise please check out the guides below.
- 
- [React Native Paper - Getting Started](https://callstack.github.io/react-native-paper/docs/guides/getting-started)
- 
- [React Navigation - Getting Started](https://reactnavigation.org/docs/getting-started/)
+
+[React Native Paper - Getting Started](https://callstack.github.io/react-native-paper/docs/guides/getting-started)
+
+[React Navigation - Getting Started](https://reactnavigation.org/docs/getting-started/)
 
 ## Stack Navigator
 
@@ -46,7 +46,7 @@ At the moment our navigation stack contains two screens and will render `HomeScr
 
 ```js
 import React from 'react';
-import {View, Text, Button, StyleSheet} from 'react-native';
+import { View, Text, Button, StyleSheet } from 'react-native';
 
 function HomeScreen() {
   return (
@@ -120,7 +120,8 @@ export default function App() {
         initialRouteName="Home"
         screenOptions={{
           header: (props) => <CustomNavigationBar {...props} />,
-        }}>
+        }}
+      >
         <Stack.Screen name="Home" component={HomeScreen} />
         <Stack.Screen name="Details" component={DetailsScreen} />
       </Stack.Navigator>
@@ -169,7 +170,12 @@ In order to achieve it, we firstly check, if the navigation bar receives a `back
 import { Appbar } from 'react-native-paper';
 import { getHeaderTitle } from '@react-navigation/elements';
 
-export default function CustomNavigationBar({ navigation, route, options, back }) {
+export default function CustomNavigationBar({
+  navigation,
+  route,
+  options,
+  back,
+}) {
   const title = getHeaderTitle(options, route.name);
 
   return (
@@ -186,6 +192,7 @@ export default function CustomNavigationBar({ navigation, route, options, back }
 ### Adding more items to `Appbar`
 
 Another interesting pattern that can be implemented with `react-native-paper` and `react-navigation` is a "menu" button. Thanks to the `Menu` component we can add a nice looking pop-up to our `Appbar`. To implement this feature we need to make a couple of changes in `CustomNavigationBar`:
+
 - Render a `Menu` component
 - Pass `Appbar.Action` to the anchor prop
 - Add a state to control `Menu` visibility
@@ -204,13 +211,15 @@ import { PaperProvider } from 'react-native-paper';
       initialRouteName="Home"
       screenOptions={{
         header: (props) => <CustomNavigationBar {...props} />,
-      }}>
+      }}
+    >
       <Stack.Screen name="Home" component={HomeScreen} />
       <Stack.Screen name="Details" component={DetailsScreen} />
     </Stack.Navigator>
   </NavigationContainer>
-</PaperProvider>
+</PaperProvider>;
 ```
+
 :::
 
 We also want the menu to appear only on `HomeScreen`, which means we will render it conditionally based on the `back` prop.
@@ -240,12 +249,8 @@ export default function CustomNavigationBar({
         <Menu
           visible={visible}
           onDismiss={closeMenu}
-          anchor={
-            <Appbar.Action
-              icon="dots-vertical"
-              onPress={openMenu}
-            />
-          }>
+          anchor={<Appbar.Action icon="dots-vertical" onPress={openMenu} />}
+        >
           <Menu.Item
             onPress={() => {
               console.log('Option 1 was pressed');
@@ -276,6 +281,6 @@ Final result:
 
 <img src="/react-native-paper/screenshots/react-navigation-appBar4.gif" width="300" />
 
-That's all we need! We have app bar that contains everything we need to navigate through screens and access an additional menu on the main screen. As you can see, with Material design `Appbar` provided by `react-native-paper` used together with `react-navigation` we can easily create an app that looks and works great. 
+That's all we need! We have app bar that contains everything we need to navigate through screens and access an additional menu on the main screen. As you can see, with Material design `Appbar` provided by `react-native-paper` used together with `react-navigation` we can easily create an app that looks and works great.
 
 Grab the Expo [snack](https://snack.expo.dev/@react-native-paper/integrate-appbar-with-react-navigation) if you want to check the whole code!
diff --git a/docs/docs/guides/06-recommended-libraries.md b/docs/5.x/docs/guides/recommended-libraries.md
similarity index 96%
rename from docs/docs/guides/06-recommended-libraries.md
rename to docs/5.x/docs/guides/recommended-libraries.md
index e70157ca1d..076dfb6871 100644
--- a/docs/docs/guides/06-recommended-libraries.md
+++ b/docs/5.x/docs/guides/recommended-libraries.md
@@ -24,17 +24,19 @@ An implementation of the [bottom sheet behaviour](https://material.io/design/com
 [gorhom/react-native-bottom-sheet](https://github.com/gorhom/react-native-bottom-sheet)
 An implementation of the [bottom sheet behaviour](https://material.io/design/components/sheets-bottom.html), maintained by [@Gorhom](https://twitter.com/Gorhom).
 
-
 ## Date Picker
+
 [web-ridge/react-native-paper-dates](https://github.com/web-ridge/react-native-paper-dates)
 Material Design themed [date picker](https://material.io/components/date-pickers), maintained by [@RichardLindhout](https://twitter.com/RichardLindhout)
- 
+
 [react-native-community/react-native-datetimepicker](https://github.com/react-native-community/react-native-datetimepicker)
 
 ## Time Picker
+
 [web-ridge/react-native-paper-dates](https://github.com/web-ridge/react-native-paper-dates)
-Material Design themed [time picker](https://material.io/components/time-pickers), maintained by [@RichardLindhout](https://twitter.com/RichardLindhout) 
+Material Design themed [time picker](https://material.io/components/time-pickers), maintained by [@RichardLindhout](https://twitter.com/RichardLindhout)
 
 ## System Colors
+
 [pchmn/expo-material3-theme](https://github.com/pchmn/expo-material3-theme)
-Retrieve Material 3 system colors from Android 12+ devices
\ No newline at end of file
+Retrieve Material 3 system colors from Android 12+ devices
diff --git a/docs/docs/guides/11-ripple-effect.md b/docs/5.x/docs/guides/ripple-effect.md
similarity index 99%
rename from docs/docs/guides/11-ripple-effect.md
rename to docs/5.x/docs/guides/ripple-effect.md
index 31845060d7..e6f6e503ef 100644
--- a/docs/docs/guides/11-ripple-effect.md
+++ b/docs/5.x/docs/guides/ripple-effect.md
@@ -40,6 +40,3 @@ import { Provider as PaperProvider } from 'react-native-paper';
   // ...
 </PaperProvider>
 ```
-
-
-
diff --git a/docs/docs/guides/08-theming-with-react-navigation.md b/docs/5.x/docs/guides/theming-with-react-navigation.md
similarity index 95%
rename from docs/docs/guides/08-theming-with-react-navigation.md
rename to docs/5.x/docs/guides/theming-with-react-navigation.md
index 6003953c02..5ccd78701d 100644
--- a/docs/docs/guides/08-theming-with-react-navigation.md
+++ b/docs/5.x/docs/guides/theming-with-react-navigation.md
@@ -21,15 +21,12 @@ import {
   DefaultTheme as NavigationDefaultTheme,
 } from '@react-navigation/native';
 
-import {
-  MD2LightTheme,
-  MD2DarkTheme,
-} from 'react-native-paper';
+import { MD2LightTheme, MD2DarkTheme } from 'react-native-paper';
 ```
 
 ### Material Design 3
 
-From v5, React Native Paper theme colors structure follows the Material Design 3 <i>(known as Material You)</i> colors system, which differs significantly from both the previous Paper's theme and React Navigation theme. 
+From v5, React Native Paper theme colors structure follows the Material Design 3 <i>(known as Material You)</i> colors system, which differs significantly from both the previous Paper's theme and React Navigation theme.
 
 However, to simplify adapting React Navigation theme colors, to use the ones from React Native Paper, it's worth using a utility called `adaptNavigationTheme` – it accepts navigation-compliant themes in both modes and returns their equivalents adjusted to Material Design 3.
 
@@ -49,10 +46,7 @@ const { LightTheme, DarkTheme } = adaptNavigationTheme({
 Library exports also Material Design 3 themes in both modes:
 
 ```js
-import {
-  MD3LightTheme,
-  MD3DarkTheme,
-} from 'react-native-paper';
+import { MD3LightTheme, MD3DarkTheme } from 'react-native-paper';
 ```
 
 ## Combining theme objects
@@ -117,8 +111,6 @@ export default function App() {
 }
 ```
 
-
-
 Our goal here is to combine those two themes, so that we could control the theme for the entire application from a single place.
 
 To make things easier we can use [deepmerge](https://www.npmjs.com/package/deepmerge) package. We can install it with:
@@ -135,10 +127,7 @@ import {
   DarkTheme as NavigationDarkTheme,
   DefaultTheme as NavigationDefaultTheme,
 } from '@react-navigation/native';
-import {
-  MD2DarkTheme,
-  MD2LightTheme,
-} from 'react-native-paper';
+import { MD2DarkTheme, MD2LightTheme } from 'react-native-paper';
 import merge from 'deepmerge';
 
 const CombinedDefaultTheme = merge(MD2LightTheme, NavigationDefaultTheme);
@@ -331,11 +320,7 @@ const Header = ({ scene }) => {
       }}
     >
       <Appbar.Content title={scene.route?.name} />
-        <Switch
-          color={'red'}
-          value={isThemeDark}
-          onValueChange={toggleTheme}
-        />
+      <Switch color={'red'} value={isThemeDark} onValueChange={toggleTheme} />
     </Appbar.Header>
   );
 };
@@ -343,7 +328,7 @@ const Header = ({ scene }) => {
 
 And now you can switch between light and dark theme!
 
-![paperGuide1](../../static/screenshots/themingWithReactNavigationDarkLightSwitch.gif)
+![paperGuide1](../../../public/screenshots/themingWithReactNavigationDarkLightSwitch.gif)
 
 Thanks to the linking of themes that we did earlier, switching themes can be controlled with only one piece of state.
 
diff --git a/docs/docs/guides/02-theming.mdx b/docs/5.x/docs/guides/theming.mdx
similarity index 98%
rename from docs/docs/guides/02-theming.mdx
rename to docs/5.x/docs/guides/theming.mdx
index 76869182ae..d2d4392fe8 100644
--- a/docs/docs/guides/02-theming.mdx
+++ b/docs/5.x/docs/guides/theming.mdx
@@ -2,7 +2,7 @@
 title: Theming
 ---
 
-import DynamicColorTheme from '@site/src/components/DynamicColorTheme.tsx';
+import DynamicColorTheme from '@docs/components/DynamicColorTheme.tsx';
 
 # Theming
 
@@ -73,14 +73,12 @@ A theme usually contains the following properties:
 - `colors` (`object`): various colors used throughout different elements.
 
   > The primary key color is used to derive roles for key components across the UI, such as the FAB, prominent buttons, active states, as well as the tint of elevated surfaces.
-
   - `primary`
   - `onPrimary`
   - `primaryContainer`
   - `onPrimaryContainer`
 
   > The secondary key color is used for less prominent components in the UI such as filter chips, while expanding the opportunity for color expression.
-
   - `secondary`
   - `onSecondary`
   - `secondaryContainer`
@@ -89,34 +87,29 @@ A theme usually contains the following properties:
   > The tertiary key color is used to derive the roles of contrasting accents that can be used to balance primary and secondary colors or bring heightened attention to an element.
 
   > The tertiary color role is left for teams to use at their discretion and is intended to support broader color expression in products.
-
   - `tertiary`
   - `onTertiary`
   - `tertiaryContainer`
   - `onTertiaryContainer`
 
   > The neutral key color is used to derive the roles of surface and background, as well as high emphasis text and icons.
-
   - `background`
   - `onBackground`
   - `surface`
   - `onSurface`
 
   > The neutral variant key color is used to derive medium emphasis text and icons, surface variants, and component outlines.
-
   - `surfaceVariant`
   - `onSurfaceVariant`
   - `outline`
 
   > In addition to the accent and neutral key color, the color system includes a semantic color role for error
-
   - `error`
   - `onError`
   - `errorContainer`
   - `onErrorContainer`
 
   > Surfaces at elevation levels 0-5 are tinted via color overlays based on the primary color, such as app bars or menus. The addition of a grade from 0-5 introduces tonal variation to the surface baseline.
-
   - `elevation` (`object`)
     - `level0` - transparent
     - `level1` - 5% opacity
@@ -126,12 +119,10 @@ A theme usually contains the following properties:
     - `level5` - 14% opacity
 
   > Colors for disabled state
-
   - `surfaceDisabled`
   - `onSurfaceDisabled`
 
   > These additional role mappings exist in a scheme and are mapped to components where needed.
-
   - `shadow`
   - `inverseOnSurface`
   - `inverseSurface`
@@ -197,7 +188,7 @@ Created schemes are following the Material Design 3 color system and covering co
 
 Passed source color into the util is translated into tones to automatically provide the range of tones that map to color roles.
 
-![customColors](../../static/screenshots/custom-colors.png)
+![customColors](../../../public/screenshots/custom-colors.png)
 
 _Source: [Material You Color System](https://m3.material.io/styles/color/the-color-system/custom-colors)_
 
@@ -344,11 +335,10 @@ By default, TypeScript works well whenever you change the value of the built-in
 
 There are two supported ways of overriding the theme:
 
-1. <b>Simple built-in theme overrides</b> - when you only customize the values and
-   the whole theme schema remains the same
-2. <b>Advanced theme overrides</b> - when you <i>add new properties</i> or <i>
-     change the built-in schema shape
-   </i>
+1. <b>Simple built-in theme overrides</b> - when you only customize the values
+   and the whole theme schema remains the same
+2. <b>Advanced theme overrides</b> - when you <i>add new properties</i> or
+   <i>change the built-in schema shape</i>
 
 :::caution
 TypeScript support for `withTheme` is currently limited to <b>Material You (MD3)</b> theme only.
diff --git a/docs/docs/showcase.mdx b/docs/5.x/docs/showcase.mdx
similarity index 79%
rename from docs/docs/showcase.mdx
rename to docs/5.x/docs/showcase.mdx
index db58df8f24..19bce467e3 100644
--- a/docs/docs/showcase.mdx
+++ b/docs/5.x/docs/showcase.mdx
@@ -2,7 +2,7 @@
 title: Showcase
 ---
 
-import Showcase from '../src/components/Showcase.tsx';
+import Showcase from '@docs/components/Showcase.tsx';
 
 # Who's using Paper?
 
diff --git a/docs/5.x/index.mdx b/docs/5.x/index.mdx
new file mode 100644
index 0000000000..91f12670f9
--- /dev/null
+++ b/docs/5.x/index.mdx
@@ -0,0 +1,38 @@
+---
+pageType: home
+hero:
+  name: Cross-platform Material Design for React Native
+  tagline: Paper is a collection of customizable and production-ready components for React Native, following Google’s Material Design guidelines.
+  actions:
+    - text: Get started
+      link: /docs/guides/getting-started
+      theme: brand
+    - text: Try on Snack
+      link: https://snack.expo.dev/@react-native-paper/react-native-paper-example_v5
+      theme: alt
+features:
+  - title: Production-ready components
+    details: Buttons, inputs, lists, cards, menus, dialogs, navigation, and feedback patterns built for day-to-day product work.
+    icon: /react-native-paper/images/home/components.svg
+    span: 4
+  - title: Material You theming
+    details: Adopt Material 3 color, typography, elevation, and state layers with a theme system designed for real apps.
+    icon: /react-native-paper/images/home/palette.svg
+    span: 4
+  - title: Accessible by default
+    details: Common interactions, contrast, and state handling are already baked into the component surface instead of left to each screen.
+    icon: /react-native-paper/images/home/accessibility.svg
+    span: 4
+  - title: Cross-platform parity
+    details: Keep design language and component behavior aligned across iOS, Android, and React Native Web from one codebase.
+    icon: /react-native-paper/images/home/devices.svg
+    span: 4
+  - title: Dark mode support
+    details: Ship light and dark experiences with the same primitives, including adaptive surfaces and semantic color roles.
+    icon: /react-native-paper/images/home/moon.svg
+    span: 4
+  - title: Migration-friendly docs
+    details: Browse stable 5.x, preview 6.x, and legacy static docs from one version selector without splitting the docs experience.
+    icon: /react-native-paper/images/home/versions.svg
+    span: 4
+---
diff --git a/docs/6.x/_nav.json b/docs/6.x/_nav.json
new file mode 100644
index 0000000000..f7de8846cb
--- /dev/null
+++ b/docs/6.x/_nav.json
@@ -0,0 +1,17 @@
+[
+  {
+    "text": "Guides",
+    "link": "/docs/guides/getting-started",
+    "activeMatch": "^/(?:6\\.x/)?docs/guides/"
+  },
+  {
+    "text": "Components",
+    "link": "/docs/components/ActivityIndicator",
+    "activeMatch": "^/(?:6\\.x/)?docs/components/"
+  },
+  {
+    "text": "Showcase",
+    "link": "/docs/showcase",
+    "activeMatch": "^/(?:6\\.x/)?docs/showcase$"
+  }
+]
diff --git a/docs/6.x/docs/_meta.json b/docs/6.x/docs/_meta.json
new file mode 100644
index 0000000000..9e4ac38659
--- /dev/null
+++ b/docs/6.x/docs/_meta.json
@@ -0,0 +1,17 @@
+[
+  {
+    "type": "dir-section-header",
+    "name": "guides",
+    "label": "Guides"
+  },
+  {
+    "type": "dir-section-header",
+    "name": "components",
+    "label": "Components"
+  },
+  {
+    "type": "file",
+    "name": "showcase",
+    "label": "Showcase"
+  }
+]
diff --git a/docs/6.x/docs/guides/_meta.json b/docs/6.x/docs/guides/_meta.json
new file mode 100644
index 0000000000..11525283c4
--- /dev/null
+++ b/docs/6.x/docs/guides/_meta.json
@@ -0,0 +1,15 @@
+[
+  "getting-started",
+  "theming",
+  "icons",
+  "fonts",
+  "react-native-web",
+  "recommended-libraries",
+  "contributing",
+  "theming-with-react-navigation",
+  "bottom-navigation",
+  "react-navigation",
+  "rtl",
+  "ripple-effect",
+  "migration"
+]
diff --git a/docs/6.x/docs/guides/bottom-navigation.md b/docs/6.x/docs/guides/bottom-navigation.md
new file mode 100644
index 0000000000..380a8b8be3
--- /dev/null
+++ b/docs/6.x/docs/guides/bottom-navigation.md
@@ -0,0 +1,93 @@
+---
+title: Using BottomNavigation with React Navigation
+---
+
+Build a Material Design bottom tab bar by combining two pieces:
+
+- `@react-navigation/bottom-tabs` handles routing, state, and screen options.
+- `BottomNavigation.Bar` renders the Material 3 tab bar (ripple, badges, shifting/labeled modes).
+
+<img src="/react-native-paper/screenshots/material-bottom-tabs.gif" style={{ width: '420px', maxWidth: '100%', margin: '16px 0' }} />
+
+:::info
+Install [`@react-navigation/native`](https://reactnavigation.org/docs/getting-started) and [`@react-navigation/bottom-tabs`](https://reactnavigation.org/docs/bottom-tab-navigator) first.
+:::
+
+## Quick example
+
+Pass a `BottomNavigation.Bar` to the navigator's `tabBar` prop. The bar reads navigation state and dispatches `tabPress` events back:
+
+```jsx
+import MaterialCommunityIcons from '@react-native-vector-icons/material-design-icons';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { CommonActions } from '@react-navigation/native';
+import { BottomNavigation } from 'react-native-paper';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+const Tab = createBottomTabNavigator();
+
+function MyTabs() {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <Tab.Navigator
+      screenOptions={{ animation: 'shift' }}
+      tabBar={({ navigation, state, descriptors }) => (
+        <BottomNavigation.Bar
+          navigationState={state}
+          safeAreaInsets={insets}
+          onTabPress={({ route, preventDefault }) => {
+            const event = navigation.emit({
+              type: 'tabPress',
+              target: route.key,
+              canPreventDefault: true,
+            });
+            if (event.defaultPrevented) {
+              preventDefault();
+            } else {
+              navigation.dispatch({
+                ...CommonActions.navigate(route.name, route.params),
+                target: state.key,
+              });
+            }
+          }}
+          renderIcon={({ route, focused, color }) =>
+            descriptors[route.key].options.tabBarIcon?.({
+              focused,
+              color,
+              size: 24,
+            }) ?? null
+          }
+          getLabelText={({ route }) => {
+            const { options } = descriptors[route.key];
+            return typeof options.tabBarLabel === 'string'
+              ? options.tabBarLabel
+              : typeof options.title === 'string'
+                ? options.title
+                : route.name;
+          }}
+        />
+      )}
+    >
+      <Tab.Screen
+        name="Home"
+        component={HomeScreen}
+        options={{
+          tabBarIcon: ({ color }) => (
+            <MaterialCommunityIcons name="home" color={color} size={26} />
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Settings"
+        component={SettingsScreen}
+        options={{
+          tabBarIcon: ({ color }) => (
+            <MaterialCommunityIcons name="cog" color={color} size={26} />
+          ),
+        }}
+      />
+    </Tab.Navigator>
+  );
+}
+```
diff --git a/docs/6.x/docs/guides/contributing.mdx b/docs/6.x/docs/guides/contributing.mdx
new file mode 100644
index 0000000000..2861043dc3
--- /dev/null
+++ b/docs/6.x/docs/guides/contributing.mdx
@@ -0,0 +1,7 @@
+---
+title: Contributing
+---
+
+import Contributing from '../../../../CONTRIBUTING.md';
+
+<Contributing />
diff --git a/docs/6.x/docs/guides/fonts.md b/docs/6.x/docs/guides/fonts.md
new file mode 100644
index 0000000000..139c5a9635
--- /dev/null
+++ b/docs/6.x/docs/guides/fonts.md
@@ -0,0 +1,469 @@
+---
+title: Fonts
+---
+
+# Fonts
+
+## Installing custom fonts
+
+The easiest way to install custom fonts to your RN project is do as follows:
+
+1. Define path to assets directory with fonts in project:
+
+Example:
+
+```js
+  module.exports = {
+    ...
+    assets: [
+      './assets/fonts'
+    ],
+```
+
+:::note
+`fonts` is a folder with `.ttf` files
+:::
+
+2. Place your font files in your assets directory.
+
+3. Link font files, using the following command in the terminal:
+
+- React Native `>= 0.69`:
+
+```sh
+npx react-native-asset
+```
+
+- React Native `< 0.69`:
+
+```sh
+npx react-native link
+```
+
+4. Restart your project to refresh changes.
+
+Now, you are able to use `fontFamily` from font files.
+
+## Configuring fonts in ThemeProvider
+
+:::note
+Older Material Design 2 platform-split font configuration (`configureFonts` with per-platform `ios` / `android` / `web` keys) is no longer supported. Use the Material Design 3 typescale and `configureFonts` as documented below.
+:::
+
+### Material Design 3
+
+#### Variants
+
+In the latest version fonts in theme are structured based on the `variant` keys e.g. `displayLarge` or `bodyMedium` which are then used in `Text`'s component throughout the whole library.
+
+:::info
+The default `fontFamily` is different per particular platform:
+
+```js
+Platform.select({
+  web: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+  ios: 'System',
+  default: 'sans-serif', // and 'sans-serif-medium' for `fontWeight:"500"`
+}),
+```
+
+Material Design 3 typescale uses two font families:
+
+- **Brand**: Display, Headline and Title Large
+- **Plain**: Title Medium/Small, Label and Body
+
+The default theme uses the platform default for both font families.
+
+:::
+
+- #### Display
+
+<div style={{ flexDirection: 'row', display: 'flex' }}>
+  <div>
+
+```json
+"displaySmall": {
+  "fontFamily": "Font",
+  "fontSize": 36,
+  "fontWeight": "400",
+  "letterSpacing": 0,
+  "lineHeight": 44,
+}
+```
+
+  </div>
+
+  <div>
+
+```json
+"displayMedium": {
+  "fontFamily": "Font",
+  "fontSize": 45,
+  "fontWeight": "400",
+  "letterSpacing": 0,
+  "lineHeight": 52,
+}
+```
+
+  </div>
+
+  <div style={{flex: 1}}>
+
+```json
+"displayLarge": {
+  "fontFamily": "Font",
+  "fontSize": 57,
+  "fontWeight": "400",
+  "letterSpacing": 0,
+  "lineHeight": 64,
+}
+```
+
+  </div>
+</div>
+
+- #### Headline
+
+<div style={{ flexDirection: 'row', display: 'flex' }}>
+  <div>
+
+```json
+"headlineSmall": {
+  "fontFamily": "Font",
+  "fontSize": 24,
+  "fontWeight": "400",
+  "letterSpacing": 0,
+  "lineHeight": 32,
+}
+```
+
+  </div>
+
+  <div>
+
+```json
+"headlineMedium": {
+  "fontFamily": "Font",
+  "fontSize": 28,
+  "fontWeight": "400",
+  "letterSpacing": 0,
+  "lineHeight": 36,
+}
+```
+
+  </div>
+
+  <div style={{flex: 1}}>
+
+```json
+"headlineLarge": {
+  "fontFamily": "Font",
+  "fontSize": 32,
+  "fontWeight": "400",
+  "letterSpacing": 0,
+  "lineHeight": 40,
+}
+```
+
+  </div>
+</div>
+
+- #### Title
+
+<div style={{ flexDirection: 'row', display: 'flex' }}>
+  <div>
+
+```json
+"titleSmall": {
+  "fontFamily": "Font",
+  "fontSize": 14,
+  "fontWeight": "500",
+  "letterSpacing": 0.1,
+  "lineHeight": 20,
+}
+```
+
+  </div>
+
+  <div>
+
+```json
+"titleMedium": {
+  "fontFamily": "Font",
+  "fontSize": 16,
+  "fontWeight": "500",
+  "letterSpacing": 0.15,
+  "lineHeight": 24,
+}
+```
+
+  </div>
+
+  <div style={{flex: 1}}>
+
+```json
+"titleLarge": {
+  "fontFamily": "Font",
+  "fontSize": 22,
+  "fontWeight": "400",
+  "letterSpacing": 0,
+  "lineHeight": 28,
+}
+```
+
+  </div>
+</div>
+
+- #### Label
+
+<div style={{ flexDirection: 'row', display: 'flex' }}>
+  <div>
+
+```json
+"labelSmall": {
+  "fontFamily": "Font",
+  "fontSize": 11,
+  "fontWeight": "500",
+  "letterSpacing": 0.5,
+  "lineHeight": 16,
+}
+```
+
+  </div>
+
+  <div>
+
+```json
+"labelMedium": {
+  "fontFamily": "Font",
+  "fontSize": 12,
+  "fontWeight": "500",
+  "letterSpacing": 0.5,
+  "lineHeight": 16,
+}
+```
+
+  </div>
+
+  <div style={{flex: 1}}>
+
+```json
+"labelLarge": {
+  "fontFamily": "Font",
+  "fontSize": 14,
+  "fontWeight": "500",
+  "letterSpacing": 0.1,
+  "lineHeight": 20,
+}
+```
+
+  </div>
+</div>
+
+- #### Body
+
+<div style={{ flexDirection: 'row', display: 'flex' }}>
+  <div>
+
+```json
+"bodySmall": {
+  "fontFamily": "Font",
+  "fontSize": 12,
+  "fontWeight": "400",
+  "letterSpacing": 0.4,
+  "lineHeight": 16,
+}
+```
+
+  </div>
+
+  <div>
+
+```json
+"bodyMedium": {
+  "fontFamily": "Font",
+  "fontSize": 14,
+  "fontWeight": "400",
+  "letterSpacing": 0.25,
+  "lineHeight": 20,
+}
+```
+
+  </div>
+
+  <div style={{flex: 1}}>
+
+```json
+"bodyLarge": {
+  "fontFamily": "Font",
+  "fontSize": 16,
+  "fontWeight": "400",
+  "letterSpacing": 0.5,
+  "lineHeight": 24,
+}
+```
+
+  </div>
+</div>
+
+- #### Emphasized
+
+Each variant also has an `Emphasized` counterpart with a heavier font weight: `displayLargeEmphasized`,
+`bodyMediumEmphasized` etc.
+
+```json
+"bodyMediumEmphasized": {
+  "fontFamily": "Font",
+  "fontSize": 14,
+  "fontWeight": "500",
+  "letterSpacing": 0.25,
+  "lineHeight": 20,
+}
+```
+
+:::info
+If any component uses Paper's `Text` component, without specified <b>variant</b>, then `default` variant is applied:
+
+```json
+"default": {
+  "fontFamily": "FontFamily",
+  "fontWeight": "400",
+  "letterSpacing": 0,
+},
+```
+
+:::
+
+#### Using `configureFonts` helper
+
+- If there is a need to create a custom font variant, prepare its config object including required all fonts properties. After that, defined `fontConfig` has to be passed under the <b>`variant`</b> name as `config` into the params object:
+
+```js
+import * as React from 'react';
+import {
+  configureFonts,
+  MD3LightTheme,
+  PaperProvider,
+} from 'react-native-paper';
+import App from './App';
+
+const fontConfig = {
+  customVariant: {
+    fontFamily: Platform.select({
+      web: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+      ios: 'System',
+      default: 'sans-serif',
+    }),
+    fontWeight: '400',
+    letterSpacing: 0.5,
+    lineHeight: 22,
+    fontSize: 20,
+  },
+};
+
+const theme = {
+  ...MD3LightTheme,
+  fonts: configureFonts({ config: fontConfig }),
+};
+
+export default function Main() {
+  return (
+    <PaperProvider theme={theme}>
+      <App />
+    </PaperProvider>
+  );
+}
+```
+
+If you're using TypeScript you will need to create a custom `Text` component which accepts your custom variants:
+
+```typescript
+import { customText } from 'react-native-paper';
+
+// Use this instead of importing `Text` from `react-native-paper`
+export const Text = customText<'customVariant'>();
+```
+
+- In order to override one of the available `variant`'s font properties, pass the modified `fontConfig` under specific <b>`variant`</b> name as `config` into the params object:
+
+```js
+import * as React from 'react';
+import {
+  configureFonts,
+  MD3LightTheme,
+  PaperProvider,
+} from 'react-native-paper';
+import App from './App';
+
+const fontConfig = {
+  bodyLarge: {
+    letterSpacing: 0.5,
+    lineHeight: 22,
+    fontSize: 20,
+  },
+};
+
+const theme = {
+  ...MD3LightTheme,
+  fonts: configureFonts({ config: fontConfig }),
+};
+
+export default function Main() {
+  return (
+    <PaperProvider theme={theme}>
+      <App />
+    </PaperProvider>
+  );
+}
+```
+
+- However, if you just want to override any font property e.g. `fontFamily` or `letterSpacing` for <b>all</b> variants, you can pass the `fontConfig` as a `config` into the params object <b>without</b> specifying variant name:
+
+```js
+import * as React from 'react';
+import {
+  configureFonts,
+  MD3LightTheme,
+  PaperProvider,
+} from 'react-native-paper';
+import App from './App';
+
+const fontConfig = {
+  fontFamily: 'NotoSans',
+};
+
+const theme = {
+  ...MD3LightTheme,
+  fonts: configureFonts({ config: fontConfig }),
+};
+
+export default function Main() {
+  return (
+    <PaperProvider theme={theme}>
+      <App />
+    </PaperProvider>
+  );
+}
+```
+
+## Variable fonts
+
+Although React Native Paper supports `fontWeight` and `fontStyle` properties, there are multiple limitations to custom
+fonts in React Native. Using custom [variable fonts](https://fonts.google.com/knowledge/introducing_type/introducing_variable_fonts)
+is especially problematic, with some platforms failing to render variants entirely. To ensure correct typography in your
+app, we suggest installing each font variant as a separate file. Below you'll find example on how to set up React Native Paper
+theme with custom fonts.
+
+Should you decide to use a variable font anyway, second example will show you how to test if the font is rendered correctly in React Native on all platforms.
+
+<details>
+  <summary>Variable fonts examples</summary>
+  <ul>
+    <li>
+      <a href="https://snack.expo.dev/@react-native-paper/font-styles-variants">How to apply custom fonts with variants</a>
+    </li>
+    <li>
+      <a href="https://snack.expo.dev/@react-native-paper/typography-tester">How to test variable fonts in React Native</a>
+    </li>
+  </ul>
+</details>
diff --git a/docs/6.x/docs/guides/getting-started.mdx b/docs/6.x/docs/guides/getting-started.mdx
new file mode 100644
index 0000000000..45ccaf2c01
--- /dev/null
+++ b/docs/6.x/docs/guides/getting-started.mdx
@@ -0,0 +1,200 @@
+---
+title: Getting Started
+---
+
+import TabItem from '@docs/components/TabItem';
+import Tabs from '@docs/components/Tabs';
+
+# Getting Started
+
+## Installation
+
+React Native Paper 6.x requires React 19 and React Native's New Architecture.
+
+Open a Terminal in your project's folder and install the library:
+
+```bash npm2yarn
+npm install react-native-paper@alpha
+```
+
+React Native Paper 6.x is a prerelease published under the npm `alpha` tag, and `npm install react-native-paper` without the tag still installs 5.x.
+
+React Native Paper uses [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) for handling safe area, [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/) and [react-native-worklets](https://docs.swmansion.com/react-native-worklets/) for animations.
+
+<Tabs groupId="expo-vs-cli">
+  <TabItem value="expo" label="Expo" default>
+
+```bash
+npx expo install react-native-safe-area-context react-native-reanimated react-native-worklets
+```
+
+Minimum requirements:
+
+- `react-native-reanimated` **≥ 4.3.0**
+- `react-native-worklets` **≥ 0.8.1**
+- `react-native-safe-area-context` — version compatible with your React Native toolchain.
+
+Follow the [React Native Reanimated installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/).
+
+You also need to install [@react-native-vector-icons/material-design-icons](https://github.com/oblador/react-native-vector-icons/tree/master/packages/material-design-icons), because some components use these icons internally:
+
+```bash
+npx expo install @react-native-vector-icons/material-design-icons
+```
+
+If you have a `babel.config.js` or `.babelrc` file, make sure that it includes `babel-preset-expo`.
+
+  </TabItem>
+  <TabItem value="community-cli" label="Community CLI">
+
+```bash npm2yarn
+npm install react-native-safe-area-context react-native-reanimated react-native-worklets
+```
+
+Minimum requirements:
+
+- `react-native-reanimated` **≥ 4.3.0**
+- `react-native-worklets` **≥ 0.8.1**
+- `react-native-safe-area-context` — version compatible with your React Native toolchain.
+
+Follow the [React Native Reanimated installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/).
+
+If you're on a vanilla React Native project, you also need to install [@react-native-vector-icons/material-design-icons](https://github.com/oblador/react-native-vector-icons/tree/master/packages/material-design-icons).
+
+Specifically, the `MaterialDesignIcons` icon pack needs to be included in the project because some components use those icons internally, such as `AppBar.BackAction` on Android.
+
+```bash npm2yarn
+npm install @react-native-vector-icons/material-design-icons
+```
+
+:::note
+`@react-native-vector-icons/material-design-icons` may require some additional setup steps depending on platform. To ensure the icon font is configured correctly, please follow the upstream [installation guide](https://github.com/oblador/react-native-vector-icons?tab=readme-ov-file#setup).
+:::
+
+:::info
+If you don't want to install vector icons, you can use [babel-plugin-optional-require](https://github.com/satya164/babel-plugin-optional-require) to opt-out.
+:::
+
+  </TabItem>
+</Tabs>
+
+### Bundle size optimization
+
+To get smaller bundle size by excluding modules you don't use, you can use our optional babel plugin. The plugin automatically rewrites the import statements so that only the modules you use are imported instead of the whole library. Add `react-native-paper/babel` to the `plugins` section in your `babel.config.js` for production environment. It should look like this:
+
+```js
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+  env: {
+    production: {
+      plugins: ['react-native-paper/babel'],
+    },
+  },
+};
+```
+
+If you created your project using Expo, it'll look something like this:
+
+```js
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    env: {
+      production: {
+        plugins: ['react-native-paper/babel'],
+      },
+    },
+  };
+};
+```
+
+The plugin only works if you are importing the library using ES2015 import statements and not with `require`.
+
+:::note
+The above examples are for the latest `react-native` using Babel 7. If you have `react-native <= 0.55`, you'll have a `.babelrc` file instead of a `babel.config.js` file and the content of the file will be different.
+:::
+
+If you're using Flow for typechecking your code, you need to add the following under the `[options]` section in your `.flowconfig`:
+
+```ini
+module.file_ext=.js
+module.file_ext=.native.js
+module.file_ext=.android.js
+module.file_ext=.ios.js
+```
+
+## Usage
+
+Wrap your root component in `PaperProvider` from `react-native-paper`(if you are using versions prior to 5.8.0 you need to use `Provider`). If you have a vanilla React Native project, it's a good idea to add it in the component which is passed to `AppRegistry.registerComponent`. This will usually be in the `index.js` file. If you have an Expo project, you can do this inside the exported component in the `App.js` file.
+
+Example:
+
+```js
+import * as React from 'react';
+import { AppRegistry } from 'react-native';
+import { PaperProvider } from 'react-native-paper';
+import { name as appName } from './app.json';
+import App from './src/App';
+
+export default function Main() {
+  return (
+    <PaperProvider>
+      <App />
+    </PaperProvider>
+  );
+}
+
+AppRegistry.registerComponent(appName, () => Main);
+```
+
+The `PaperProvider` component provides the theme to all the components in the framework. It also acts as a portal to components which need to be rendered at the top level.
+
+If you have another provider (such as `Redux`), wrap it outside `PaperProvider` so that the context is available to components rendered inside a `Modal` from the library:
+
+```js
+import * as React from 'react';
+import { PaperProvider } from 'react-native-paper';
+import { Provider as StoreProvider } from 'react-redux';
+import App from './src/App';
+import store from './store';
+
+export default function Main() {
+  return (
+    <StoreProvider store={store}>
+      <PaperProvider>
+        <App />
+      </PaperProvider>
+    </StoreProvider>
+  );
+}
+```
+
+## Customization
+
+You can provide a custom theme to customize the colors, typescales etc. with the `Provider` component. Check the [Material Design 3 default theme](https://github.com/callstack/react-native-paper/blob/main/src/theme/schemes/LightTheme.tsx) to see what customization options are supported.
+
+Example:
+
+```js
+import * as React from 'react';
+import { LightTheme, PaperProvider } from 'react-native-paper';
+import App from './src/App';
+
+const theme = {
+  ...LightTheme,
+  colors: {
+    ...LightTheme.colors,
+    primary: 'tomato',
+    secondary: 'yellow',
+  },
+};
+
+export default function Main() {
+  return (
+    <PaperProvider theme={theme}>
+      <App />
+    </PaperProvider>
+  );
+}
+```
diff --git a/docs/6.x/docs/guides/icons.mdx b/docs/6.x/docs/guides/icons.mdx
new file mode 100644
index 0000000000..813678733d
--- /dev/null
+++ b/docs/6.x/docs/guides/icons.mdx
@@ -0,0 +1,169 @@
+---
+title: Icons
+---
+
+import TabItem from '@docs/components/TabItem';
+import Tabs from '@docs/components/Tabs';
+import IconsList from '@docs/components/IconsList.tsx';
+
+# Icons
+
+## Configuring icons
+
+Many of the components render icon names using [`@react-native-vector-icons/material-design-icons`](https://github.com/oblador/react-native-vector-icons/tree/master/packages/material-design-icons). In Expo projects this usually works without extra setup. In vanilla React Native projects, install the package and complete any required platform setup as described in the [getting started guide](./getting-started).
+
+:::note
+If you opted out of vector icons support using [babel-plugin-optional-require](https://github.com/satya164/babel-plugin-optional-require), you won't be able to use icon names for the icon prop. Some components may not look correct without vector icons and might need extra configuration.
+:::
+
+## Using the `icon` prop
+
+Many components such as `Button` accept an `icon` prop which is used to display an icon. The `icon` prop supports the following types of values:
+
+### 1. An icon name
+
+You can pass the name of an icon from [`MaterialDesignIcons`](https://pictogrammers.com/library/mdi/). This will use the [`@react-native-vector-icons/material-design-icons`](https://github.com/oblador/react-native-vector-icons/tree/master/packages/material-design-icons) library to display the icon.
+
+Example:
+
+```js
+<Button icon="camera">Press me</Button>
+```
+
+:::note
+Choose the correct tab below based on your `react-native-vector-icons` version:
+
+- Use **latest** tab if you're using the latest version of `@react-native-vector-icons/material-design-icons`
+- Use **10.x** tab if you're still using the old single package `react-native-vector-icons`, version `10.x`
+
+If you are using `@expo/vector-icons`, please check their [searchable list of icons](https://icons.expo.fyi/).
+:::
+
+<Tabs>
+  <TabItem value="material-design-icons" label="latest">
+    <details>
+      <summary>See the list of supported icons</summary>
+      <IconsList latest />
+    </details>
+  </TabItem>
+  <TabItem value="material-community-icons" label="10.x">
+    <details>
+      <summary>See the list of supported icons</summary>
+      <IconsList />
+    </details>
+  </TabItem>
+</Tabs>
+
+### 2. An image source
+
+You can pass an image source, such as an object of shape `{ uri: 'https://path.to' }` or a local image: `require('../path/to/image.png')` to use as an icon. The image might be rendered with a different color than the one provided depending on the component. If don't want this behavior, see the next example to pass an `Image` element.
+
+Remote image:
+
+```js
+<Button
+  icon={{ uri: 'https://avatars0.githubusercontent.com/u/17571969?v=3&s=400' }}
+>
+  Press me
+</Button>
+```
+
+Local image:
+
+```js
+<Button icon={require('../assets/chameleon.jpg')}>Press me</Button>
+```
+
+### 3. A render function
+
+You can pass a function which returns a react element to be used an icon. The function receives an object with `size` and `color` properties as its arguments. The element is used as is without any modification. However, it might get clipped if the provided element's size is bigger than what the component renders. It's up to you to make sure that the size of the element is correct.
+
+Example:
+
+```js
+<Button
+  icon={({ size, color }) => (
+    <Image
+      source={require('../assets/chameleon.jpg')}
+      style={{ width: size, height: size, tintColor: color }}
+    />
+  )}
+>
+  Press me
+</Button>
+```
+
+### 4. Use custom icons
+
+If you want to use icons other than `MaterialDesignIcons` you need to import the icons and pass it to the `settings` prop within `PaperProvider`.
+
+Example:
+
+```js
+import AwesomeIcon from '@react-native-vector-icons/fontawesome';
+// ...
+
+<PaperProvider
+  settings={{
+    icon: (props) => <AwesomeIcon {...props} />,
+  }}
+  theme={this.state.theme}
+>
+  // ...
+</PaperProvider>;
+```
+
+## RTL support
+
+If you want your icon to behave properly in a RTL environment, you can pass an object to the `icon` prop with shape: `{ source: { uri: 'https://path.to' }, direction : 'rtl' }`. `source` can be any of the values that the `icon` prop accepts in [option 1](#1.-an-icon-name) and [option 2](#2.-an-image-source). For `direction` you have a few options:
+
+1. `auto` - uses the device language to determine if icon should be displayed from rtl. Uses the `I18nManager` module to get this info.
+2. `rtl` - flips the icon so that it is rtl, this is regardless of the device language.
+3. `ltr` - displays from ltr, even if in an rtl environment.
+
+Example for using an image source:
+
+```js
+<Button
+  icon={{
+    source: {
+      uri: 'https://avatars0.githubusercontent.com/u/17571969?v=3&s=400',
+    },
+    direction: 'rtl',
+  }}
+>
+  Press me
+</Button>
+```
+
+Example for using an icon name:
+
+```js
+<Button icon={{ source: 'add-a-photo', direction: 'rtl' }}>Press me</Button>
+```
+
+You can also use a render function. Along with `size` and `color`, you have access to `direction` which will either be `'rtl'` or `'ltr'`. You can then decide how to render your icon component accordingly.
+
+Example of using a render function:
+
+```js
+<Button
+  icon={({ size, color, direction }) => (
+    <Image
+      source={require('../assets/chameleon.jpg')}
+      style={[
+        {
+          transform: [{ scaleX: direction === 'rtl' ? -1 : 1 }],
+        },
+        {
+          width: size,
+          height: size,
+          tintColor: color,
+        },
+      ]}
+    />
+  )}
+>
+  Press me
+</Button>
+```
diff --git a/docs/6.x/docs/guides/migration.md b/docs/6.x/docs/guides/migration.md
new file mode 100644
index 0000000000..72aee6d00f
--- /dev/null
+++ b/docs/6.x/docs/guides/migration.md
@@ -0,0 +1,575 @@
+---
+title: Migration from Paper 5.x to 6.x
+---
+
+## General changes
+
+### Animations
+
+React Native Paper 6 uses [Reanimated](https://docs.swmansion.com/react-native-reanimated/) for most animations instead of the built-in React Native `Animated` API. So make sure to install `react-native-reanimated` 4.3.0 or later and `react-native-worklets` 0.8.1 or later, then complete the Reanimated setup. See the [getting started guide](./getting-started) for Expo and Community CLI instructions.
+
+The following props now accept animated styles returned from `useAnimatedStyle`. They no longer accept `Animated.Value` or `Animated.AnimatedInterpolation` where these were previously supported:
+
+- `Appbar.Action` and `Appbar.BackAction`: `style`
+- `Badge`: `style`
+- `Banner`: `style`
+- `Button`: `style`
+- `Card`: `style`
+- `Chip`: `style`
+- `Dialog`: `style`
+- `Drawer.CollapsedItem`: `style`
+- `FAB` and `FAB.Extended`: `style`
+- `IconButton`: `style`
+- `Menu`: `contentStyle`
+- `Modal`: `contentContainerStyle`
+- `Searchbar`: `style`
+- `Snackbar`: `style`
+- `Surface`: `style`
+
+So you can use Reanimated's `useSharedValue` and `useAnimatedStyle` to animate these components instead of the React Native `Animated` API.
+
+```tsx
+import { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+
+const MyComponent = () => {
+  const opacity = useSharedValue(1);
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  return <Card style={animatedStyle}>Button</Card>;
+};
+```
+
+### Elevation
+
+The `elevation` prop no longer accepts a React Native `Animated.Value` in the following components:
+
+- `Banner`
+- `Card`
+- `Searchbar`
+- `Snackbar`
+- `Surface`
+
+You can use an elevation level from `0` to `5` instead. Changes to the elevation level are animated automatically.
+
+### Styles
+
+The following component style props no longer support overriding their background color or border radius:
+
+- `Banner`
+- `Button`
+- `Card`
+- `Chip`
+- `Dialog`
+- `Menu`: `contentStyle`
+- `Searchbar`
+- `Snackbar`
+
+You can use the component's color prop where available, or override the corresponding theme colors.
+
+### Test IDs
+
+Hardcoded default test IDs have been removed for the components listed below:
+
+- `Appbar.Content`: `appbar-content`
+- `Appbar.Header`: `appbar-header`
+- `BottomNavigation`: `bottom-navigation`
+- `BottomNavigation.Bar`: `bottom-navigation-bar`
+- `Button`: `button`
+- `Card`: `card`
+- `Chip`: `chip`
+- `Drawer.CollapsedItem`: `drawer-collapsed-item`
+- `FAB`: `floating-action-button`
+- `FAB.Extended`: `extended-floating-action-button`
+- `FAB.Menu`: `floating-action-button-menu`
+- `IconButton`: `icon-button`
+- `Menu`: `menu`
+- `Menu.Item`: `menu-item`
+- `Modal`: `modal`
+- `ProgressBar`: `progress-bar`
+- `Searchbar`: `search-bar`
+- `Surface`: `surface`
+
+You can specify a `testID` explicitly to restore each component's own test ID.
+
+These components used to also derive test IDs for internal, implementation-only elements by appending a suffix to the `testID` prop (e.g. `${testID}-container`, `${testID}-icon`, `${testID}-outline`). They have been removed entirely.
+
+If you were relying on internal test IDs, update your tests not to rely on internal implementation details and only interact with elements or assert content your users can reach, e.g.: query by role, label, text etc., or `testID` props accepted by the component.
+
+Some components now accept explicit `testID` props for their interactable elements:
+
+- `BottomNavigation`: `barTestID` for the internal `BottomNavigation.Bar`, replacing the previous `${testID}-bar` derivation.
+- `Chip`: `closeIconTestID` for the close icon button.
+- `Dialog` and `Modal`: `overlayTestID` for the overlay displayed behind the content.
+- `Menu`: `overlayTestID` for the overlay displayed behind the menu.
+- `Searchbar`: `searchTestID`, `clearTestID`, and `trailingTestID` for the search, clear, and trailing icon buttons.
+- `Snackbar`: `iconTestID` for the icon button.
+
+## Components
+
+### Appbar
+
+The `style` props for `Appbar` and `Appbar.Header` no longer accept `Animated.Value` or `Animated.AnimatedInterpolation`. They only accept static styles.
+
+The `style.elevation` property is no longer supported. Use the `elevated` prop to control Appbar elevation.
+
+### Surface
+
+- The `elevation` prop no longer accepts a React Native `Animated.Value`. Any `elevation` changes are animated automatically.
+- The `style` prop no longer configures elevation, background color, or border radius. Use these props instead:
+  - `elevation`
+  - `backgroundColor`
+  - `borderRadius`
+  - `borderBottomEndRadius`
+  - `borderBottomLeftRadius`
+  - `borderBottomRightRadius`
+  - `borderBottomStartRadius`
+  - `borderEndEndRadius`
+  - `borderEndStartRadius`
+  - `borderStartEndRadius`
+  - `borderStartStartRadius`
+  - `borderTopEndRadius`
+  - `borderTopLeftRadius`
+  - `borderTopRightRadius`
+  - `borderTopStartRadius`
+  - `borderCurve`
+- The `pointerEvents` prop is no longer supported as it's deprecated in React Native Web. You can specify `pointerEvents` in the `style` prop instead.
+- The `overflow: 'hidden'` style is no longer supported in `style` as it can clip shadows. You can nest a `View` inside the `Surface` and apply `overflow: 'hidden'` to that instead.
+- The default `testID` for `Surface` was removed. You can specify a `testID` explicitly if you need it.
+
+e.g.:
+
+```diff
+<Surface
+- style={{
+-   backgroundColor: 'red',
+-   borderRadius: 8,
+-   overflow: 'hidden',
+- }}
++ backgroundColor="red"
++ borderRadius={8}
+>
++ <View style={{ overflow: 'hidden' }}>
+    <Text>Content</Text>
++ </View>
+</Surface>
+```
+
+### Modal
+
+`Modal` now uses a `Portal` internally and doesn't require an explicit `Portal` wrapper. So you need to remove any existing `Portal` wrappers around `Modal`:
+
+```diff
+-<Portal>
+-  <Modal visible={visible} onDismiss={hideModal}>
+-    <Text>Content</Text>
+-  </Modal>
+-</Portal>
++<Modal visible={visible} onDismiss={hideModal}>
++  <Text>Content</Text>
++</Modal>
+```
+
+- The `contentContainerStyle` prop no longer configures the background color or any border radius property. We have added new props for these:
+  - `contentBackgroundColor`
+  - `contentBorderRadius`
+- We have added the `contentElevation` prop to configure the elevation of the modal content.
+
+e.g.:
+
+```diff
+<Modal
+  visible={visible}
+- contentContainerStyle={{
+-   backgroundColor: 'white',
+-   borderRadius: 8,
+-   padding: 20,
+- }}
++ contentBackgroundColor="white"
++ contentBorderRadius={8}
++ contentElevation={2}
++ contentContainerStyle={{ padding: 20 }}
+>
+  <Text>Content</Text>
+</Modal>
+```
+
+The modal content now has the `dialog` role, so it needs an accessible name. You can provide one with the new `aria-label` prop:
+
+```diff
+-<Modal visible={visible} onDismiss={hideModal}>
++<Modal visible={visible} onDismiss={hideModal} aria-label="Example modal">
+   <Text>Content</Text>
+ </Modal>
+```
+
+The overlay behind the content is now hidden from assistive technology. Instead, when the modal is `dismissable`, screen reader users can dismiss it with a visually hidden button inside the dialog.
+
+The `overlayAccessibilityLabel` prop was renamed to `dismissAccessibilityLabel`, which is used for the button's accessibility label:
+
+```diff
+<Modal
+  visible={visible}
+  onDismiss={hideModal}
+- overlayAccessibilityLabel="Close"
++ dismissAccessibilityLabel="Close"
+>
+  <Text>Content</Text>
+</Modal>
+```
+
+Previously, the Android back button dismissed the modal when `dismissable` was `true`, even if `dismissableBackButton` was `false`. The `dismissableBackButton` prop can now prevent the modal from being dismissed via the back button independently of the `dismissable` prop.
+
+### Dialog
+
+`Dialog` now uses a `Portal` internally and doesn't require an explicit `Portal` wrapper. So you need to remove any existing `Portal` wrappers around `Dialog`:
+
+```diff
+-<Portal>
+-  <Dialog visible={visible} onDismiss={hideDialog}>
+-    <Dialog.Title>Alert</Dialog.Title>
+-  </Dialog>
+-</Portal>
++<Dialog visible={visible} onDismiss={hideDialog}>
++  <Dialog.Title>Alert</Dialog.Title>
++</Dialog>
+```
+
+The dialog now has the `dialog` role. On web, the dialog's accessible name is set automatically by `Dialog.Title`. You can specify a different name with the new `aria-label` prop, e.g. when the dialog has no title:
+
+```jsx
+<Dialog visible={visible} onDismiss={hideDialog} aria-label="Delete file">
+  <Dialog.Content>
+    <Text>Are you sure?</Text>
+  </Dialog.Content>
+</Dialog>
+```
+
+When the dialog is `dismissable`, screen reader users can dismiss it with a visually hidden button inside the dialog. You can change the button's accessibility label with the new `dismissAccessibilityLabel` prop.
+
+- The default elevation changed from level `1` to level `3`.
+- The `style` prop no longer configures the background color or border radius. You can override `theme.colors.surfaceContainerHigh` and `theme.shapes.corner.extraLarge` using the `theme` prop instead.
+
+#### `Dialog.Actions`
+
+`Dialog.Actions` no longer injects `compact` on its buttons. To keep the previous behavior, you need to add the `compact` prop to each button:
+
+```tsx
+// Before (v5)
+<Dialog.Actions>
+  <Button onPress={hide}>Done</Button>
+</Dialog.Actions>
+
+// After (v6)
+<Dialog.Actions>
+  <Button compact onPress={hide}>
+    Done
+  </Button>
+</Dialog.Actions>
+```
+
+### Menu
+
+The `overlayAccessibilityLabel` prop was renamed to `dismissAccessibilityLabel`:
+
+```diff
+<Menu
+  visible={visible}
+  onDismiss={closeMenu}
+  anchor={anchor}
+- overlayAccessibilityLabel="Close"
++ dismissAccessibilityLabel="Close"
+>
+  <Menu.Item title="Item" />
+</Menu>
+```
+
+### Searchbar
+
+The misspelled `traileringIcon` props have been renamed:
+
+- **`traileringIcon`** → **`trailingIcon`**
+- **`traileringIconColor`** → **`trailingIconColor`**
+- **`traileringIconAccessibilityLabel`** → **`trailingIconAccessibilityLabel`**
+- **`onTraileringIconPress`** → **`onTrailingIconPress`**
+
+```diff
+<Searchbar
+- traileringIcon="microphone"
+- traileringIconColor={colors.onSurfaceVariant}
+- traileringIconAccessibilityLabel="microphone button"
+- onTraileringIconPress={onMicrophonePress}
++ trailingIcon="microphone"
++ trailingIconColor={colors.onSurfaceVariant}
++ trailingIconAccessibilityLabel="microphone button"
++ onTrailingIconPress={onMicrophonePress}
+/>
+```
+
+### TextInput
+
+The Paper 6.x `TextInput` is a complete rewrite with a new API. Import the component the same way, but note that the props and behavior have changed significantly.
+
+#### Types
+
+```tsx
+import { TextInput, type TextInputProps } from 'react-native-paper';
+```
+
+#### Variant
+
+- **`mode="flat"`** → **`variant="filled"`**
+- **`mode="outlined"`** → **`variant="outlined"`**
+
+```tsx
+// Before (v5)
+<TextInput mode="flat" label="Filled" />
+<TextInput mode="outlined" label="Outlined" />
+
+// After (v6)
+<TextInput variant="filled" label="Filled" />
+<TextInput variant="outlined" label="Outlined" />
+```
+
+#### Adornments
+
+- **`left` / `right`** → **`startAccessory` / `endAccessory`**
+- **`TextInput.Affix`** → **`prefix` / `suffix`**, or **`TextInput.Icon`**, or **`startAccessory` / `endAccessory`**
+
+```tsx
+// Before (v5)
+<TextInput
+  left={<TextInput.Icon icon="email" />}
+  right={<TextInput.Affix text={`${value.length}/80`} />}
+/>
+
+// After (v6)
+<TextInput
+  startAccessory={(p) => <TextInput.Icon {...p} icon="email" />}
+  endAccessory={(p) => <CustomComponent {...p} />}
+  maxLength={100}
+  prefix="$"
+  suffix="/100"
+  counter
+/>
+```
+
+#### Label and supporting text
+
+- **`label: React.Element | string`** → **`string`**
+- **`HelperText`** was removed; use **`supportingText`**.
+
+```tsx
+// Before (v5)
+<>
+  <TextInput
+    label="Email"
+    error={hasError}
+    disabled={isDisabled}
+  />
+  <HelperText type="error" visible={hasError}>
+    Enter a valid email
+  </HelperText>
+</>
+
+// After (v6)
+<TextInput
+  label="Email"
+  error={hasError}
+  disabled={isDisabled}
+  supportingText="Enter a valid email"
+/>
+```
+
+#### Removed props
+
+No direct `TextInput` equivalents for:
+
+- **`dense`**, **`contentStyle`**, **`underlineStyle`**
+- **`underlineColor`**, **`activeUnderlineColor`**, **`outlineColor`**, **`activeOutlineColor`**, **`textColor`**
+
+Use **`style`** on the inner input and the **`theme`** for colors.
+
+```tsx
+import { MD3LightTheme, TextInput } from 'react-native-paper';
+
+const theme = {
+  ...MD3LightTheme,
+  colors: {
+    ...MD3LightTheme.colors,
+    outline: '#79747E',
+    primary: '#6750A4',
+  },
+};
+
+// Before (v5)
+<TextInput
+  dense
+  contentStyle={{
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    paddingBottom: 8,
+  }}
+  outlineStyle={{
+    borderRadius: 12,
+    borderWidth: 2,
+  }}
+  outlineColor="#79747E"
+  activeOutlineColor="#6750A4"
+  textColor="#1C1B1F"
+  style={{ fontSize: 16 }}
+/>
+
+// After (v6)
+<TextInput
+  theme={theme}
+  style={{ fontSize: 16, color: '#1C1B1F' }}
+/>
+```
+
+### Card
+
+#### `Card` layout
+
+`Card` and its related components have been reworked. Instead of injecting padding to its children, the `Card` component now adds a padding (`16dp`) around its content as well as a gap (`16dp`) between its children.
+
+For the related components:
+
+- `Card.Cover` and `Card.Actions` now apply negative margins to extend into the Card's edges:
+  - `Card.Cover` applies top, left and right margins for vertical cards and left, top, and bottom margins for horizontal cards.
+  - `Card.Actions` applies bottom, left, and right margins for vertical cards and left, bottom, and right margins for horizontal cards.
+- `Card.Title` and `Card.Content` no longer apply padding around them.
+
+This means, in a typical card layout, the Card will automatically apply the necessary spacing between these sections:
+
+```tsx
+<Card>
+  <Card.Cover source={cover} />
+  <Card.Title title="Card title" />
+  <Card.Content>
+    <Text>Card content</Text>
+  </Card.Content>
+  <Card.Actions>
+    <Button mode="contained">Action</Button>
+    <Button mode="outlined">Another Action</Button>
+  </Card.Actions>
+</Card>
+```
+
+So your existing layouts with the following structure will continue to work as before:
+
+- `Card` without `Card.Cover` or `Card.Actions`.
+- `Card` with `Card.Cover` at the top and/or `Card.Actions` at the bottom.
+
+If you have `Card.Cover` or `Card.Actions` in positions other than the top and bottom respectively, you will need to adjust their margins. For example, for a `Card.Cover` in the middle of the Card, you would need to set its top and bottom margins to zero:
+
+```tsx
+<Card>
+  <Card.Title title="Card title" />
+  <Card.Cover source={cover} style={{ marginTop: 0, marginBottom: 0 }} />
+  <Card.Content>
+    <Text>Card content</Text>
+  </Card.Content>
+</Card>
+```
+
+We have also added a `direction` prop to the `Card` component, which lets you arrange its items horizontally instead of the default vertical layout. So if you have custom `flexDirection` styles on the Card, you should replace them with the `direction` prop.
+
+```tsx
+// Before (v5)
+<Card style={{ flexDirection: 'row' }}>
+  <Card.Cover source={cover} style={{ width: 72, height: 72 }} />
+  <Card.Title title="Card title" />
+  <Card.Content>
+    <Text>Card content</Text>
+  </Card.Content>
+  <Card.Actions>
+    <Button mode="contained">Action</Button>
+    <Button mode="outlined">Another Action</Button>
+  </Card.Actions>
+</Card>
+
+// After (v6)
+<Card direction="horizontal">
+  <Card.Cover source={cover} style={{ width: 72, height: 72 }} />
+  <Card.Title title="Card title" />
+  <Card.Content>
+    <Text>Card content</Text>
+  </Card.Content>
+  <Card.Actions>
+    <Button mode="contained">Action</Button>
+    <Button mode="outlined">Another Action</Button>
+  </Card.Actions>
+</Card>
+```
+
+#### `Card.Actions`
+
+`Card.Actions` no longer injects `mode` on the buttons. To keep the previous behavior, you need to set `mode="outlined"` on the first button and `mode="contained"` on the rest:
+
+```tsx
+// Before (v5)
+<Card.Actions>
+  <Button>Cancel</Button>
+  <Button>Ok</Button>
+</Card.Actions>
+
+// After (v6)
+<Card.Actions>
+  <Button mode="outlined">Cancel</Button>
+  <Button mode="contained">Ok</Button>
+</Card.Actions>
+```
+
+### List
+
+#### `List.Accordion`
+
+An accordion with a `left` element now indents only its `List.Item` children. Anything else you put inside keeps its own padding, so indent it yourself to line it up with the items.
+
+```tsx
+// Before (v5)
+<List.Accordion title="Group" left={props => <List.Icon {...props} icon="folder" />}>
+  <View>
+    <Text>Custom row</Text>
+  </View>
+</List.Accordion>
+
+// After (v6)
+<List.Accordion title="Group" left={props => <List.Icon {...props} icon="folder" />}>
+  <View style={{ paddingLeft: 40 }}>
+    <Text>Custom row</Text>
+  </View>
+</List.Accordion>
+```
+
+`theme` set on `List.Accordion` no longer reaches its children either. Pass it to the child that needs the override.
+
+### ToggleButton
+
+`ToggleButton`, `ToggleButton.Group` and `ToggleButton.Row` were removed. For an
+icon-only toggle, use `IconButton` with the `selected` prop. For a set of
+mutually exclusive options, use `SegmentedButtons`.
+
+```tsx
+// Before (v5)
+<ToggleButton.Group value={value} onValueChange={setValue}>
+  <ToggleButton icon="format-bold" value="bold" />
+  <ToggleButton icon="format-italic" value="italic" />
+</ToggleButton.Group>
+
+// After (v6)
+<>
+  <IconButton
+    icon="format-bold"
+    selected={value === 'bold'}
+    onPress={() => setValue('bold')}
+  />
+  <IconButton
+    icon="format-italic"
+    selected={value === 'italic'}
+    onPress={() => setValue('italic')}
+  />
+</>
+```
diff --git a/docs/6.x/docs/guides/react-native-web.md b/docs/6.x/docs/guides/react-native-web.md
new file mode 100644
index 0000000000..9b9d4e075f
--- /dev/null
+++ b/docs/6.x/docs/guides/react-native-web.md
@@ -0,0 +1,43 @@
+---
+title: Using on the Web
+---
+
+# Using on the Web
+
+React Native Paper supports web via [React Native for Web](https://necolas.github.io/react-native-web/), which lets you run React Native components in a browser using React DOM.
+
+Before continuing, make sure you have React Native Paper installed and configured by following the [Getting Started guide](getting-started).
+
+## Setting up web support with Expo
+
+The recommended way to run React Native Paper on the web is with Expo, which has built-in web support via React Native for Web. Install the required dependencies:
+
+```bash
+npx expo install react-dom react-native-web @expo/metro-runtime
+```
+
+Then start the web server:
+
+```bash
+npx expo start --web
+```
+
+No additional bundler configuration is required. See the [Expo Web docs](https://docs.expo.dev/workflow/web/) for details on how Expo configures React Native for Web under the hood.
+
+## Without Expo
+
+If you're not using Expo, follow the [React Native for Web setup guide](https://necolas.github.io/react-native-web/docs/setup/) to configure your bundler. The setup covers aliasing `react-native` to `react-native-web` in webpack, Babel, and Jest.
+
+You will also need to manually load the Material Design icon font used by Paper. Add the following to your HTML shell or inject it at the root of your app:
+
+```css
+@font-face {
+  font-family: 'MaterialDesignIcons';
+  src: url('~@react-native-vector-icons/material-design-icons/fonts/MaterialDesignIcons.ttf')
+    format('truetype');
+}
+```
+
+## Load the Roboto font (optional)
+
+The default Paper theme uses the Roboto typeface. With Expo, use the [`@expo-google-fonts/roboto`](https://github.com/expo/google-fonts/tree/master/font-packages/roboto) package. For other setups, follow the instructions on the [Roboto specimen page](https://fonts.google.com/specimen/Roboto).
diff --git a/docs/6.x/docs/guides/react-navigation.md b/docs/6.x/docs/guides/react-navigation.md
new file mode 100644
index 0000000000..6c01200f11
--- /dev/null
+++ b/docs/6.x/docs/guides/react-navigation.md
@@ -0,0 +1,286 @@
+---
+title: Integrate AppBar with React Navigation
+---
+
+# Integrate AppBar with react-navigation
+
+## Prerequisites
+
+- `react-native-paper`
+- `react-navigation`
+
+We assume that you have already installed the mentioned libraries above, otherwise please check out the guides below.
+
+[React Native Paper - Getting Started](https://callstack.github.io/react-native-paper/docs/guides/getting-started)
+
+[React Navigation - Getting Started](https://reactnavigation.org/docs/getting-started/)
+
+## Stack Navigator
+
+We will start with `react-navigation` by creating a basic navigation stack. Stack navigator gives us a possibility of transition between screens in our app and manage navigation's history. In a simple scenario where there is only one stack navigator present in the app, it resembles a navigation state in a browser.
+Screens are pushed and popped from the stack while the user navigates to a new screen or go back to the previous one.
+
+Let's create two screens. A main screen named `Home` and details screen named `Details`.
+
+```js
+import 'react-native-gesture-handler';
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const Stack = createNativeStackNavigator();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator initialRouteName="Home">
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen name="Details" component={DetailsScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+```
+
+At the moment our navigation stack contains two screens and will render `HomeScreen` or `DetailsScreen` components according to the current navigation state. We have not implemented those components yet, so let's do this now:
+
+```js
+import React from 'react';
+import { View, Text, Button, StyleSheet } from 'react-native';
+
+function HomeScreen() {
+  return (
+    <View style={style.container}>
+      <Text>Home Screen</Text>
+    </View>
+  );
+}
+
+function DetailsScreen() {
+  return (
+    <View style={style.container}>
+      <Text>Details Screen</Text>
+    </View>
+  );
+}
+
+const style = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+```
+
+Once we have finished implementing the components, we can run the app and check how Stack looks like.
+
+<img src="/react-native-paper/screenshots/react-navigation-appBar1.png" width="300" />
+
+To navigate from `HomeScreen` to `DetailsScreen` we can use the navigation object provided by `Stack.Screen` component. Every component rendered by `Stack.Screen` has an access to the navigation object via props. Let's modify our `HomeScreen` component:
+
+```js
+import { Button } from 'react-native-paper';
+
+function HomeScreen({ navigation }) {
+  return (
+    <View style={style.container}>
+      <Text>Home Screen</Text>
+      <Button mode="contained" onPress={() => navigation.navigate('Details')}>
+        Go to details
+      </Button>
+    </View>
+  );
+}
+
+const style = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+```
+
+Our result:
+
+<img src="/react-native-paper/screenshots/react-navigation-appBar2.gif" width="300" />
+
+As you can see, we can already navigate between two screens. In the next steps, we will show you how to use Paper's `AppBar` instead of the default header.
+
+### Adding `AppBar`
+
+We can customize Stack's header by passing custom component:
+
+```js
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator
+        initialRouteName="Home"
+        screenOptions={{
+          header: (props) => <CustomNavigationBar {...props} />,
+        }}
+      >
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen name="Details" component={DetailsScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+```
+
+Now we will implement `CustomNavigationBar` using `AppBar` component:
+
+```js
+import { Appbar } from 'react-native-paper';
+
+export default function CustomNavigationBar() {
+  return (
+    <Appbar.Header>
+      <Appbar.Content title="My awesome app" />
+    </Appbar.Header>
+  );
+}
+```
+
+Current implementation of the `CustomNavigationBar` is simple - we just render a title inside of it, however it's hardcoded "My awesome app" text, so let's adjust it.
+To automatically get the correct `title` for the screen, we're going to take the advantage of `getHeaderTitle` helper available in `@react-navigation/elements` in the following way:
+
+```js
+import { Appbar } from 'react-native-paper';
+import { getHeaderTitle } from '@react-navigation/elements';
+
+export default function CustomNavigationBar({ route, options }) {
+  const title = getHeaderTitle(options, route.name);
+
+  return (
+    <Appbar.Header>
+      <Appbar.Content title={title} />
+    </Appbar.Header>
+  );
+}
+```
+
+You may notice there is no way to go back to the previous screen, because the back button is not visible in the header. Let's add it now and let's make sure it's visible on all Stack's screens except `Home` screen.
+
+In order to achieve it, we firstly check, if the navigation bar receives a `back` prop. If it has, it means there is another screen on the stack beneath the current screen and we should render the back arrow button in such a case.
+
+```js
+import { Appbar } from 'react-native-paper';
+import { getHeaderTitle } from '@react-navigation/elements';
+
+export default function CustomNavigationBar({
+  navigation,
+  route,
+  options,
+  back,
+}) {
+  const title = getHeaderTitle(options, route.name);
+
+  return (
+    <Appbar.Header>
+      {back ? <Appbar.BackAction onPress={navigation.goBack} /> : null}
+      <Appbar.Content title={title} />
+    </Appbar.Header>
+  );
+}
+```
+
+<img src="/react-native-paper/screenshots/react-navigation-appBar3.gif" width="300" />
+
+### Adding more items to `Appbar`
+
+Another interesting pattern that can be implemented with `react-native-paper` and `react-navigation` is a "menu" button. Thanks to the `Menu` component we can add a nice looking pop-up to our `Appbar`. To implement this feature we need to make a couple of changes in `CustomNavigationBar`:
+
+- Render a `Menu` component
+- Pass `Appbar.Action` to the anchor prop
+- Add a state to control `Menu` visibility
+
+:::note
+To have properly working `Menu` component, remember to wrap your root component with the `PaperProvider`:
+
+```js
+import { PaperProvider } from 'react-native-paper';
+
+// ...
+
+<PaperProvider>
+  <NavigationContainer>
+    <Stack.Navigator
+      initialRouteName="Home"
+      screenOptions={{
+        header: (props) => <CustomNavigationBar {...props} />,
+      }}
+    >
+      <Stack.Screen name="Home" component={HomeScreen} />
+      <Stack.Screen name="Details" component={DetailsScreen} />
+    </Stack.Navigator>
+  </NavigationContainer>
+</PaperProvider>;
+```
+
+:::
+
+We also want the menu to appear only on `HomeScreen`, which means we will render it conditionally based on the `back` prop.
+
+```js
+import React from 'react';
+import { Appbar, Menu } from 'react-native-paper';
+import { getHeaderTitle } from '@react-navigation/elements';
+
+export default function CustomNavigationBar({
+  navigation,
+  route,
+  options,
+  back,
+}) {
+  const [visible, setVisible] = React.useState(false);
+  const openMenu = () => setVisible(true);
+  const closeMenu = () => setVisible(false);
+
+  const title = getHeaderTitle(options, route.name);
+
+  return (
+    <Appbar.Header>
+      {back ? <Appbar.BackAction onPress={navigation.goBack} /> : null}
+      <Appbar.Content title={title} />
+      {!back ? (
+        <Menu
+          visible={visible}
+          onDismiss={closeMenu}
+          anchor={<Appbar.Action icon="dots-vertical" onPress={openMenu} />}
+        >
+          <Menu.Item
+            onPress={() => {
+              console.log('Option 1 was pressed');
+            }}
+            title="Option 1"
+          />
+          <Menu.Item
+            onPress={() => {
+              console.log('Option 2 was pressed');
+            }}
+            title="Option 2"
+          />
+          <Menu.Item
+            onPress={() => {
+              console.log('Option 3 was pressed');
+            }}
+            title="Option 3"
+            disabled
+          />
+        </Menu>
+      ) : null}
+    </Appbar.Header>
+  );
+}
+```
+
+Final result:
+
+<img src="/react-native-paper/screenshots/react-navigation-appBar4.gif" width="300" />
+
+That's all we need! We have app bar that contains everything we need to navigate through screens and access an additional menu on the main screen. As you can see, with Material design `Appbar` provided by `react-native-paper` used together with `react-navigation` we can easily create an app that looks and works great.
+
+Grab the Expo [snack](https://snack.expo.dev/@react-native-paper/integrate-appbar-with-react-navigation) if you want to check the whole code!
diff --git a/docs/6.x/docs/guides/recommended-libraries.md b/docs/6.x/docs/guides/recommended-libraries.md
new file mode 100644
index 0000000000..568effba4e
--- /dev/null
+++ b/docs/6.x/docs/guides/recommended-libraries.md
@@ -0,0 +1,37 @@
+---
+title: Recommended Libraries
+---
+
+# Recommended Libraries
+
+Our mission is to provide a full suite of well-integrated components built with Material Design in mind. However, many components already have better well maintained implementations.
+
+Here are some of the libraries we recommend:
+
+## Tabs
+
+[react-native-community/react-native-tab-view](https://github.com/react-native-community/react-native-tab-view)
+Material Design themed [swipeable tabs](https://material.io/design/components/tabs.html), maintained by [@satya164](https://twitter.com/satya164) and [@mosdnk](https://twitter.com/mosdnk).
+
+[react-native-paper-tabs](https://github.com/web-ridge/react-native-paper-tabs)
+Material Design themed [swipeable tabs](https://material.io/design/components/tabs.html) for React Native Paper, maintained by [@RichardLindhout](https://twitter.com/RichardLindhout)
+
+## Bottom sheet
+
+[osdnk/reanimated-bottom-sheet](https://github.com/osdnk/react-native-reanimated-bottom-sheet)
+An implementation of the [bottom sheet behaviour](https://material.io/design/components/sheets-bottom.html), maintained by [@mosdnk](https://twitter.com/mosdnk).
+
+[gorhom/react-native-bottom-sheet](https://github.com/gorhom/react-native-bottom-sheet)
+An implementation of the [bottom sheet behaviour](https://material.io/design/components/sheets-bottom.html), maintained by [@Gorhom](https://twitter.com/Gorhom).
+
+## Date Picker
+
+[web-ridge/react-native-paper-dates](https://github.com/web-ridge/react-native-paper-dates)
+Material Design themed [date picker](https://material.io/components/date-pickers), maintained by [@RichardLindhout](https://twitter.com/RichardLindhout)
+
+[react-native-community/react-native-datetimepicker](https://github.com/react-native-community/react-native-datetimepicker)
+
+## Time Picker
+
+[web-ridge/react-native-paper-dates](https://github.com/web-ridge/react-native-paper-dates)
+Material Design themed [time picker](https://material.io/components/time-pickers), maintained by [@RichardLindhout](https://twitter.com/RichardLindhout)
diff --git a/docs/6.x/docs/guides/ripple-effect.md b/docs/6.x/docs/guides/ripple-effect.md
new file mode 100644
index 0000000000..e6f6e503ef
--- /dev/null
+++ b/docs/6.x/docs/guides/ripple-effect.md
@@ -0,0 +1,42 @@
+---
+title: Ripple effect
+---
+
+The ripple effect is a visual feedback that occurs when a user interacts with a pressable UI element, such as a button. This response takes the form of a circular ripple expanding from the point of contact, much like a drop falling into water and creating ripples.
+
+The ripple effect is an essential aspect of Material Design, and Paper's pressable components have it enabled by default. Nonetheless, it can be tailored to suit specific needs.
+
+:::note
+The ripple effect on the iOS platform is replaced by a highlight effect.
+:::
+
+## Customize ripple effect color in component
+
+The `rippleColor` prop is available for every pressable component which allows you to set the color of the ripple effect. For the instance, to make the `Button` component's ripple effect transparent, simply pass the desired color value to the prop:
+
+```typescript
+<Button
+  rippleColor="#FF000020"
+  icon="camera"
+  mode="contained"
+  onPress={() => console.log('Pressed')}>
+  Press me
+</Button>
+```
+
+## Disable ripple effect in all components
+
+To disable the ripple effect in **all** of Paper's components set `rippleEffectEnabled: false` on the `settings` prop of `PaperProvider`.
+
+```typescript
+import { Provider as PaperProvider } from 'react-native-paper';
+// ...
+
+<PaperProvider
+  settings={{
+    rippleEffectEnabled: false
+  }}
+>
+  // ...
+</PaperProvider>
+```
diff --git a/docs/6.x/docs/guides/rtl.md b/docs/6.x/docs/guides/rtl.md
new file mode 100644
index 0000000000..7a3bb1bb51
--- /dev/null
+++ b/docs/6.x/docs/guides/rtl.md
@@ -0,0 +1,82 @@
+---
+title: RTL Support
+---
+
+# RTL Support
+
+React Native Paper supports right-to-left (RTL) layouts for languages such as Arabic and Hebrew.
+
+## How it works
+
+By default, React Native Paper reads the writing direction from `I18nManager.getConstants().isRTL` on native platforms. So it will use your existing RTL setup on initial render.
+
+See [I18nManager](http://reactnative.dev/docs/i18nmanager) docs and [Enabling RTL support in Expo](https://docs.expo.dev/guides/localization/#enabling-rtl-support) to configure your app properly.
+
+On the Web, the RTL value is not set globally, unlike native platforms. `I18nManager.getConstants().isRTL` is a no-op on [React Native Web](https://necolas.github.io/react-native-web/). To enable RTL globally, you can specify `dir` attribute on the `html` element:
+
+```html
+<html dir="rtl">
+  <!-- App content -->
+</html>
+```
+
+Then, let `react-native-paper` know about it by using the `direction` prop on `PaperProvider` or the `LocaleProvider` component to match the writing direction in your app.
+
+:::note
+The `direction` prop informs React Native Paper about the text direction in the app i.e. it doesn't change the text direction by itself. If you intend to support RTL languages, it's important to set this prop to the correct value that's configured in the app. If it doesn't match the actual text direction, the layout might be incorrect.
+:::
+
+## Setting direction for the whole app
+
+Pass the `direction` prop to `PaperProvider`. Defaults to `'rtl'` when `I18nManager.getConstants().isRTL` returns `true`, otherwise `'ltr'`.
+
+Supported values:
+
+- `'ltr'`: Left-to-right text direction for languages like English, French etc.
+- `'rtl'`: Right-to-left text direction for languages like Arabic, Hebrew etc.
+
+```js
+import * as React from 'react';
+import { PaperProvider } from 'react-native-paper';
+import App from './App';
+
+export default function Main() {
+  return (
+    <PaperProvider direction="rtl">
+      <App />
+    </PaperProvider>
+  );
+}
+```
+
+## Overriding direction for a subtree
+
+Use `LocaleProvider` to override the direction for a specific part of the tree without affecting the rest of the app:
+
+```js
+import * as React from 'react';
+import { LocaleProvider } from 'react-native-paper';
+
+export default function ArabicSection() {
+  return (
+    <LocaleProvider direction="rtl">
+      {/* Components here will use RTL layout */}
+    </LocaleProvider>
+  );
+}
+```
+
+## Reading the current direction
+
+The direction is available in your own components via the `useLocale` hook:
+
+```js
+import * as React from 'react';
+import { useLocale } from 'react-native-paper';
+
+function MyComponent() {
+  const { direction } = useLocale();
+
+  // Use the direction
+}
+```
diff --git a/docs/6.x/docs/guides/theming-with-react-navigation.md b/docs/6.x/docs/guides/theming-with-react-navigation.md
new file mode 100644
index 0000000000..ada86a611c
--- /dev/null
+++ b/docs/6.x/docs/guides/theming-with-react-navigation.md
@@ -0,0 +1,286 @@
+---
+title: Theming with React Navigation
+---
+
+# Theming with React Navigation
+
+In this guide, we will look into how to apply theming for an application using React Native Paper and React Navigation at the same time.
+
+Offering different theme options, especially dark/light ones, has become increasingly a standard requirement of the modern mobile application. Fortunately, both React Navigation and React Native Paper support configurable theming out-of-the-box.
+But how to make them work together?
+
+## Themes adaptation
+
+### Material Design 3
+
+React Native Paper follows the Material Design 3 <i>(Material You)</i> color system, which differs from React Navigation’s default theme shape.
+
+However, to simplify adapting React Navigation theme colors, to use the ones from React Native Paper, it's worth using a utility called `adaptNavigationTheme` – it accepts navigation-compliant themes in both modes and returns their equivalents adjusted to Material Design 3.
+
+```ts
+import {
+  DarkTheme as NavigationDarkTheme,
+  DefaultTheme as NavigationDefaultTheme,
+} from '@react-navigation/native';
+import { adaptNavigationTheme } from 'react-native-paper';
+
+const { LightTheme, DarkTheme } = adaptNavigationTheme({
+  reactNavigationLight: NavigationDefaultTheme,
+  reactNavigationDark: NavigationDarkTheme,
+});
+```
+
+Library exports also Material Design 3 themes in both modes:
+
+```js
+import { MD3LightTheme, MD3DarkTheme } from 'react-native-paper';
+```
+
+## Combining theme objects
+
+Both libraries require a wrapper to be used at the entry point of the application.
+React Navigation exposes `NavigationContainer`, which ensures that navigation works correctly and accepts `theme` as an optional property. Read more about setting up navigation [here](https://reactnavigation.org/docs/getting-started/).
+For React Native Paper theme to work, we need to use `PaperProvider` also at the application's entry point.
+
+```js
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { TouchableOpacity } from 'react-native';
+import { Card, Text, List, PaperProvider } from 'react-native-paper';
+
+const Stack = createNativeStackNavigator();
+
+const HomeScreen = ({ navigation }) => (
+  <TouchableOpacity
+    onPress={() =>
+      navigation?.push('Details', {
+        title,
+        content,
+      })
+    }
+  >
+    <Card>
+      <Card.Content>
+        <Text variant="titleLarge">{title}</Text>
+        <Text variant="bodyMedium">{content}</Text>
+      </Card.Content>
+    </Card>
+  </TouchableOpacity>
+);
+
+const DetailsScreen = (props) => {
+  const { title, content } = props?.route?.params;
+  return (
+    <List.Section>
+      <List.Subheader>{title}</List.Subheader>
+      <List.Item title={content} />
+    </List.Section>
+  );
+};
+
+export default function App() {
+  return (
+    <PaperProvider>
+      <NavigationContainer>
+        <Stack.Navigator initialRouteName="Home">
+          <Stack.Screen name="Home" component={HomeScreen} />
+          <Stack.Screen name="Details" component={DetailsScreen} />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </PaperProvider>
+  );
+}
+```
+
+Our goal here is to combine those two themes, so that we could control the theme for the entire application from a single place.
+
+To make things easier we can use [deepmerge](https://www.npmjs.com/package/deepmerge) package. We can install it with:
+
+```bash npm2yarn
+npm install deepmerge
+```
+
+### Material Design 3
+
+```js
+import {
+  NavigationContainer,
+  DarkTheme as NavigationDarkTheme,
+  DefaultTheme as NavigationDefaultTheme,
+} from '@react-navigation/native';
+import {
+  MD3DarkTheme,
+  MD3LightTheme,
+  adaptNavigationTheme,
+} from 'react-native-paper';
+import merge from 'deepmerge';
+
+const { LightTheme, DarkTheme } = adaptNavigationTheme({
+  reactNavigationLight: NavigationDefaultTheme,
+  reactNavigationDark: NavigationDarkTheme,
+});
+
+const CombinedDefaultTheme = merge(MD3LightTheme, LightTheme);
+const CombinedDarkTheme = merge(MD3DarkTheme, DarkTheme);
+```
+
+Alternatively, we could merge those themes using vanilla JavaScript:
+
+### Material Design 3
+
+```js
+const { LightTheme, DarkTheme } = adaptNavigationTheme({
+  reactNavigationLight: NavigationDefaultTheme,
+  reactNavigationDark: NavigationDarkTheme,
+});
+
+const CombinedDefaultTheme = {
+  ...MD3LightTheme,
+  ...LightTheme,
+  colors: {
+    ...MD3LightTheme.colors,
+    ...LightTheme.colors,
+  },
+};
+const CombinedDarkTheme = {
+  ...MD3DarkTheme,
+  ...DarkTheme,
+  colors: {
+    ...MD3DarkTheme.colors,
+    ...DarkTheme.colors,
+  },
+};
+```
+
+## Passing theme with Providers
+
+After combining the themes, we will be able to control theming in both libraries from a single source, which will come in handy later.
+
+Next, we need to pass merged themes into the Providers. For this part, we use the dark one - `CombinedDarkTheme`.
+
+```js
+const Stack = createStackNavigator();
+
+export default function App() {
+  return (
+    <PaperProvider theme={CombinedDarkTheme}>
+      <NavigationContainer theme={CombinedDarkTheme}>
+        <Stack.Navigator initialRouteName="Home">
+          <Stack.Screen name="Home" component={HomeScreen} />
+          <Stack.Screen name="Details" component={DetailsScreen} />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </PaperProvider>
+  );
+}
+```
+
+## Customizing theme
+
+We don't need to limit ourselves to the themes offered by the libraries' default. Both packages allow for custom themes to be applied.
+You can learn all about it in their documentation:
+
+- [Theming in React Navigation](https://reactnavigation.org/docs/themes/)
+- [Theming in React Native Paper](https://callstack.github.io/react-native-paper/docs/guides/theming)
+
+## React Context for theme customization
+
+Now, we wouldn't want to stay on dark theme forever, which is why we need to gain the ability to control theme dynamically. A bit of state management is needed for this purpose.
+
+React Context proves itself very useful in handling cross-cutting concerns like global theme handling, so we will use just that.
+
+## Creating Context
+
+First, we define our Context.
+
+```js
+import React from 'react';
+
+export const PreferencesContext = React.createContext({
+  toggleTheme: () => {},
+  isThemeDark: false,
+});
+```
+
+## Using Context
+
+Context Provider should be imported also at the entry point, as we want it to wrap the whole app, for the theme values to be accessible at every component that we have.
+
+```js
+import React from 'react';
+import { PreferencesContext } from './PreferencesContext';
+
+const Stack = createStackNavigator();
+
+export default function App() {
+  const [isThemeDark, setIsThemeDark] = React.useState(false);
+
+  let theme = isThemeDark ? CombinedDarkTheme : CombinedDefaultTheme;
+
+  const toggleTheme = React.useCallback(() => {
+    return setIsThemeDark(!isThemeDark);
+  }, [isThemeDark]);
+
+  const preferences = React.useMemo(
+    () => ({
+      toggleTheme,
+      isThemeDark,
+    }),
+    [toggleTheme, isThemeDark]
+  );
+
+  return (
+    // Context is wired into the local state of our main component, so that its values could be propagated throughout the entire application
+    <PreferencesContext.Provider value={preferences}>
+      <PaperProvider theme={theme}>
+        <NavigationContainer theme={theme}>
+          <Stack.Navigator initialRouteName="Home">
+            <Stack.Screen name="Home" component={HomeScreen} />
+            <Stack.Screen name="Details" component={DetailsScreen} />
+          </Stack.Navigator>
+        </NavigationContainer>
+      </PaperProvider>
+    </PreferencesContext.Provider>
+  );
+}
+```
+
+Now that the Context is available at every component, all we need to do is import it. Next, provide the user with some UI element to control changing the theme. We will use `Paper`'s [Switch](https://callstack.github.io/react-native-paper/docs/components/Switch) for this purpose.
+
+```js
+import React from 'react';
+import { useTheme, Appbar, TouchableRipple, Switch } from 'react-native-paper';
+import { PreferencesContext } from './PreferencesContext';
+
+const Header = ({ scene }) => {
+  const theme = useTheme();
+  const { toggleTheme, isThemeDark } = React.useContext(PreferencesContext);
+
+  return (
+    <Appbar.Header
+      theme={{
+        colors: {
+          primary: theme?.colors.surface,
+        },
+      }}
+    >
+      <Appbar.Content title={scene.route?.name} />
+      <Switch color={'red'} value={isThemeDark} onValueChange={toggleTheme} />
+    </Appbar.Header>
+  );
+};
+```
+
+And now you can switch between light and dark theme!
+
+![paperGuide1](../../../public/screenshots/themingWithReactNavigationDarkLightSwitch.gif)
+
+Thanks to the linking of themes that we did earlier, switching themes can be controlled with only one piece of state.
+
+React Native Paper components will automatically use the provided theme thanks to the `PaperProvider` that is wrapped around the entry point of our application, but we can also access theme values manually with `useTheme` hook,
+exposed by the library. You can see how it's done in the `Header` component code above.
+
+If light/dark themes are not enough for your use case, you can learn more about creating Material Design themes [here](https://material.io/design/material-theming/implementing-your-theme.html#color).
+On `main` branch of the example app, you will find implemented [Menu](https://callstack.github.io/react-native-paper/docs/components/Menu) component, which allows you to choose a few custom themes. Inspecting code in `utils` and `Header` may give you some idea of how to use your own themes with `Paper`, in addition to dedicated [docs](https://callstack.github.io/react-native-paper/docs/components/Menu).
+
+Read more about integrating `Paper` with `React Navigation` in a brilliant [article](https://reactnavigation.org/blog/2020/01/29/using-react-navigation-5-with-react-native-paper/) by [@trensik](https://twitter.com/trensik)
diff --git a/docs/6.x/docs/guides/theming.mdx b/docs/6.x/docs/guides/theming.mdx
new file mode 100644
index 0000000000..b58bf0702d
--- /dev/null
+++ b/docs/6.x/docs/guides/theming.mdx
@@ -0,0 +1,516 @@
+---
+title: Theming
+---
+
+import DynamicColorTheme from '@docs/components/DynamicColorTheme.tsx';
+
+# Theming
+
+:::note
+To observe changes related to switching between light and dark mode in the app, ensure that the <i>"Override force-dark"</i> feature in the <i>"developer options"</i> settings on your Android device is <b>not overridden</b>.
+:::
+
+## Applying a theme to the whole app
+
+To support custom themes, paper exports a `PaperProvider` component. You need to wrap your root component with the provider to be able to support themes:
+
+```js
+import * as React from 'react';
+import { PaperProvider } from 'react-native-paper';
+import App from './src/App';
+
+export default function Main() {
+  return (
+    <PaperProvider>
+      <App />
+    </PaperProvider>
+  );
+}
+```
+
+By default React Native Paper will apply the [Material You theme (MD3)](https://github.com/callstack/react-native-paper/blob/main/src/theme/schemes/LightTheme.tsx) if no `theme` or `version` prop is passed to the `PaperProvider`.
+
+## Accessing theme properties
+
+Use the built-in `useTheme()` hook to get access to the theme's variables:
+
+```js
+import * as React from 'react';
+import { useTheme } from 'react-native-paper';
+
+export default function PaymentScreen() {
+  const theme = useTheme();
+
+  return <View style={{ backgroundColor: theme.colors.primary }} />;
+}
+```
+
+You can also use the `withTheme()` HOC exported from the library. If you wrap your component with the HOC, you'll receive the theme as a prop:
+
+```js
+import * as React from 'react';
+import { withTheme } from 'react-native-paper';
+
+function PaymentScreen({ theme }) {
+  return <View style={{ backgroundColor: theme.colors.primary }} />;
+}
+
+export default withTheme(PaymentScreen);
+```
+
+## Theme properties
+
+You can change the theme prop dynamically and all the components will automatically update to reflect the new theme.
+
+A theme usually contains the following properties:
+
+- `dark` (`boolean`): whether this is a dark theme or light theme.
+- `version`: Material You (MD3); kept for compatibility and normalized to `3` by `PaperProvider`
+- `roundness` (`number`): roundness of common elements, such as buttons.
+- `colors` (`object`): various colors used throughout different elements.
+
+  > The primary key color is used to derive roles for key components across the UI, such as the FAB, prominent buttons, active states, as well as the tint of elevated surfaces.
+  - `primary`
+  - `onPrimary`
+  - `primaryContainer`
+  - `onPrimaryContainer`
+
+  > The secondary key color is used for less prominent components in the UI such as filter chips, while expanding the opportunity for color expression.
+  - `secondary`
+  - `onSecondary`
+  - `secondaryContainer`
+  - `onSecondaryContainer`
+
+  > The tertiary key color is used to derive the roles of contrasting accents that can be used to balance primary and secondary colors or bring heightened attention to an element.
+
+  > The tertiary color role is left for teams to use at their discretion and is intended to support broader color expression in products.
+  - `tertiary`
+  - `onTertiary`
+  - `tertiaryContainer`
+  - `onTertiaryContainer`
+
+  > The neutral key color is used to derive the roles of surface and background, as well as high emphasis text and icons.
+  - `background`
+  - `onBackground`
+  - `surface`
+  - `onSurface`
+
+  > The neutral variant key color is used to derive medium emphasis text and icons, surface variants, and component outlines.
+  - `surfaceVariant`
+  - `onSurfaceVariant`
+  - `outline`
+
+  > In addition to the accent and neutral key color, the color system includes a semantic color role for error
+  - `error`
+  - `onError`
+  - `errorContainer`
+  - `onErrorContainer`
+
+  > Surfaces at elevation levels 0-5 are tinted via color overlays based on the primary color, such as app bars or menus. The addition of a grade from 0-5 introduces tonal variation to the surface baseline.
+  - `elevation` (`object`)
+    - `level0` - transparent
+    - `level1` - 5% opacity
+    - `level2` - 8% opacity
+    - `level3` - 11% opacity
+    - `level4` - 12% opacity
+    - `level5` - 14% opacity
+
+  > Colors for disabled state
+  - `surfaceDisabled`
+  - `onSurfaceDisabled`
+
+  > These additional role mappings exist in a scheme and are mapped to components where needed.
+  - `shadow`
+  - `inverseOnSurface`
+  - `inverseSurface`
+  - `inversePrimary`
+  - `backdrop`
+
+- `fonts` (`object`): various fonts styling properties under the text variant key used in component.
+  - [`variant` e.g. `labelMedium`] (`object`):
+    - `fontFamily`
+    - `letterSpacing`
+    - `fontWeight`
+    - `lineHeight`
+    - `fontSize`
+- `animation` (`object`)
+  - `scale` - scale for all animations
+
+When creating a custom theme, you will need to provide all of these properties.
+
+If you don't use a custom theme, Paper will automatically turn animations on/off, depending on device settings.
+
+Otherwise, your custom theme will need to handle it manually, using React Native's [AccessibilityInfo API](https://reactnative.dev/docs/accessibilityinfo).
+
+## Extending the theme
+
+Keeping your own properties in the theme is fully supported by our library:
+
+```js
+import * as React from 'react';
+import {
+  MD3LightTheme as DefaultTheme,
+  PaperProvider,
+} from 'react-native-paper';
+import App from './src/App';
+
+const theme = {
+  ...DefaultTheme,
+  // Specify custom property
+  myOwnProperty: true,
+  // Specify custom property in nested object
+  colors: {
+    ...DefaultTheme.colors,
+    myOwnColor: '#BADA55',
+  },
+};
+
+export default function Main() {
+  return (
+    <PaperProvider theme={theme}>
+      <App />
+    </PaperProvider>
+  );
+}
+```
+
+## Creating dynamic theme colors
+
+Dynamic Color Themes allows for generating two color schemes lightScheme and darkScheme, based on the provided source color.
+Created schemes are following the Material Design 3 color system and covering colors structure from the Paper theme. User may generate these schemes using the following tool:
+
+<DynamicColorTheme />
+
+<br />
+
+Passed source color into the util is translated into tones to automatically provide the range of tones that map to color roles.
+
+![customColors](../../../public/screenshots/custom-colors.png)
+
+_Source: [Material You Color System](https://m3.material.io/styles/color/the-color-system/custom-colors)_
+
+### Using schemes
+
+Once we have copied the color schemes from the generated JSON above, we can use by passing it to the colors in `theme` object as below:
+
+```jsx
+import * as React from 'react';
+import {
+  MD3LightTheme as DefaultTheme,
+  PaperProvider,
+} from 'react-native-paper';
+import App from './src/App';
+
+const theme = {
+  ...DefaultTheme,
+  colors: yourGeneratedLightOrDarkScheme.colors, // Copy it from the color codes scheme and then use it here
+};
+
+export default function Main() {
+  return (
+    <PaperProvider theme={theme}>
+      <App />
+    </PaperProvider>
+  );
+}
+```
+
+### Sync dynamic colors with system colors
+
+React Native Paper provides built-in support for Android dynamic colors through `DynamicLightTheme` and `DynamicDarkTheme`. These themes use React Native's `PlatformColor` API to map all Material Design 3 color roles to Android system colors, so any changes the user makes to their system palette are automatically reflected in the app.
+
+:::info
+Dynamic colors require Android 12 (API 31+). On older Android versions and all other platforms, these themes fall back to the default `LightTheme` / `DarkTheme`.
+:::
+
+```tsx
+import { useColorScheme } from 'react-native';
+import {
+  DynamicDarkTheme,
+  DynamicLightTheme,
+  PaperProvider,
+} from 'react-native-paper';
+import App from './src/App';
+
+export default function Main() {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  return (
+    <PaperProvider theme={isDarkMode ? DynamicDarkTheme : DynamicLightTheme}>
+      <App />
+    </PaperProvider>
+  );
+}
+```
+
+## Adapting React Navigation theme
+
+The `adaptNavigationTheme` function takes an existing React Navigation theme and returns a React Navigation theme using the colors from Material Design 3. This theme can be passed to `NavigationContainer` so that React Navigation's UI elements have the same color scheme as Paper.
+
+```ts
+adaptNavigationTheme(themes);
+```
+
+:::info
+For users of `react-navigation` version `7.0.0` and above, `adaptNavigationTheme` overrides the **fonts** from the navigation theme as follows:
+
+```ts
+fonts: {
+  regular: {
+    fontFamily: materialTheme.fonts.bodyMedium.fontFamily,
+    fontWeight: materialTheme.fonts.bodyMedium.fontWeight,
+    letterSpacing: materialTheme.fonts.bodyMedium.letterSpacing,
+  },
+  medium: {
+    fontFamily: materialTheme.fonts.titleMedium.fontFamily,
+    fontWeight: materialTheme.fonts.titleMedium.fontWeight,
+    letterSpacing: materialTheme.fonts.titleMedium.letterSpacing,
+  },
+  bold: {
+    fontFamily: materialTheme.fonts.headlineSmall.fontFamily,
+    fontWeight: materialTheme.fonts.headlineSmall.fontWeight,
+    letterSpacing: materialTheme.fonts.headlineSmall.letterSpacing,
+  },
+  heavy: {
+    fontFamily: materialTheme.fonts.headlineLarge.fontFamily,
+    fontWeight: materialTheme.fonts.headlineLarge.fontWeight,
+    letterSpacing: materialTheme.fonts.headlineLarge.letterSpacing,
+  },
+}
+```
+
+:::
+
+<b>Parameters:</b>
+
+| NAME   | TYPE   |
+| ------ | ------ |
+| themes | object |
+
+Valid `themes` keys are:
+
+- `reactNavigationLight` () - React Navigation compliant light theme.
+- `reactNavigationDark` () - React Navigation compliant dark theme.
+- `materialLight` () - React Native Paper compliant light theme.
+- `materialDark` () - React Native Paper compliant dark theme.
+
+```ts
+// App.tsx
+import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import {
+  PaperProvider,
+  MD3LightTheme,
+  adaptNavigationTheme,
+} from 'react-native-paper';
+
+const Stack = createNativeStackNavigator();
+
+const { LightTheme } = adaptNavigationTheme({
+  reactNavigationLight: DefaultTheme,
+});
+
+export default function App() {
+  return (
+    <PaperProvider theme={MD3LightTheme}>
+      <NavigationContainer theme={LightTheme}>
+        <Stack.Navigator initialRouteName="Home">
+          <Stack.Screen name="Home" component={HomeScreen} />
+          <Stack.Screen name="Details" component={DetailsScreen} />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </PaperProvider>
+  );
+}
+```
+
+## TypeScript
+
+By default, TypeScript works well whenever you change the value of the built-in theme's properties. It gets more complicated when you want to extend the theme's properties or change their types. In order to fully support TypeScript, you will need to follow the guide that fits your use-case most accurately:
+
+There are two supported ways of overriding the theme:
+
+1. <b>Simple built-in theme overrides</b> - when you only customize the values
+   and the whole theme schema remains the same
+2. <b>Advanced theme overrides</b> - when you <i>add new properties</i> or
+   <i>change the built-in schema shape</i>
+
+:::caution
+TypeScript support for `withTheme` is currently limited to <b>Material You (MD3)</b> theme only.
+
+<i>
+  We are planning to provide a better support of handling custom theme overrides
+  in future releases.
+</i>
+:::
+
+### Simple built-in theme overrides
+
+You can provide a `theme` prop with a theme object with the same properties as the default theme:
+
+```js
+import * as React from 'react';
+import { MD3LightTheme, PaperProvider } from 'react-native-paper';
+import App from './src/App';
+
+const theme = {
+  ...MD3LightTheme, // or MD3DarkTheme
+  roundness: 2,
+  colors: {
+    ...MD3LightTheme.colors,
+    primary: '#3498db',
+    secondary: '#f1c40f',
+    tertiary: '#a1b2c3',
+  },
+};
+
+export default function Main() {
+  return (
+    <PaperProvider theme={theme}>
+      <App />
+    </PaperProvider>
+  );
+}
+```
+
+### Advanced theme overrides
+
+If you need to modify the built-in theme schema by adding a new property or changing its type, you need to follow these steps:
+
+1. Pass your theme overrides to the PaperProvider component
+
+```ts
+import * as React from 'react';
+import { MD3LightTheme, PaperProvider } from 'react-native-paper';
+import App from './src/App';
+
+const theme = {
+  ...MD3LightTheme,
+
+  // Specify a custom property
+  custom: 'property',
+
+  // Specify a custom property in nested object
+  colors: {
+    ...MD3LightTheme.colors,
+    brandPrimary: '#fefefe',
+    brandSecondary: 'red',
+  },
+};
+
+export default function Main() {
+  return (
+    <PaperProvider theme={theme}>
+      <App />
+    </PaperProvider>
+  );
+}
+```
+
+2. Create a typed `useAppTheme()` hook in your project
+
+```ts
+import * as React from 'react';
+import { MD3LightTheme, PaperProvider, useTheme } from 'react-native-paper';
+import App from './src/App';
+
+const theme = {
+  ...MD3LightTheme,
+
+  // Specify a custom property
+  custom: 'property',
+
+  // Specify a custom property in nested object
+  colors: {
+    ...MD3LightTheme.colors,
+    brandPrimary: '#fefefe',
+    brandSecondary: 'red',
+  },
+};
+
+export type AppTheme = typeof theme;
+
+export const useAppTheme = () => useTheme<AppTheme>();
+
+export default function Main() {
+  return (
+    <PaperProvider theme={theme}>
+      <App />
+    </PaperProvider>
+  );
+}
+```
+
+3. Start using the `useAppTheme()` hook across your components in the whole app
+
+```ts
+import * as React from 'react';
+import { useAppTheme } from './App';
+
+export default function HomeScreen() {
+  const {
+    colors: { brandPrimary },
+  } = useAppTheme();
+
+  return <View style={{ backgroundColor: brandPrimary }}>...</View>;
+}
+```
+
+## Material Design 3
+
+React Native Paper ships with Material Design 3 (Material You) only. Customize the default experience by extending `MD3LightTheme` or `MD3DarkTheme` (see [Extending the theme](#extending-the-theme) and [Advanced theme overrides](#advanced-theme-overrides)).
+
+## Applying a theme to a paper component
+
+If you want to change the theme for a certain component from the library, you can directly pass the `theme` prop to the component. The theme passed as the prop is merged with the theme from the `PaperProvider`:
+
+```js
+import * as React from 'react';
+import { Button } from 'react-native-paper';
+
+export default function ButtonExample() {
+  return (
+    <Button raised theme={{ roundness: 3 }}>
+      Press me
+    </Button>
+  );
+}
+```
+
+## Customizing all instances of a component
+
+Sometimes you want to style a component in a different way everywhere, but don't want to change the properties in the theme, so that other components are not affected. For example, say you want to change the font for all your buttons, but don't want to change `theme.fonts.labelLarge` because it affects other components.
+
+We don't have an API to do this, because you can already do it with components:
+
+```js
+import * as React from 'react';
+import { Button } from 'react-native-paper';
+
+export default function FancyButton(props) {
+  return (
+    <Button
+      theme={{ typescale: { labelLarge: { letterSpacing: 1 } } }}
+      {...props}
+    />
+  );
+}
+```
+
+Now you can use your `FancyButton` component everywhere instead of using `Button` from Paper.
+
+## Dark Theme
+
+Since 3.0 we adapt dark theme to follow [Material design guidelines](https://material.io/design/color/dark-theme.html). <br/>
+In contrast to light theme, dark theme by default uses `surface` colour instead of `primary` on large components like `Appbar` or `BottomNavigation`.<br/>
+The dark theme adds a white overlay with opacity depending on elevation of surfaces. It uses it for the better accentuation of surface elevation. Using only shadow is highly imperceptible on dark surfaces.
+
+If you don't use a custom theme, Paper will automatically change between the default theme and the default dark theme, depending on device settings.
+
+Otherwise, your custom theme will need to handle it manually, using React Native's [Appearance API](https://reactnative.dev/docs/appearance).
+
+## Gotchas
+
+The `PaperProvider` exposes the theme to the components via [React's context API](https://reactjs.org/docs/context.html), which means that the component must be in the same tree as the `PaperProvider`. Some React Native components will render a different tree such as a `Modal`, in which case the components inside the `Modal` won't be able to access the theme. The work around is to get the theme using the `withTheme` HOC and pass it down to the components as props, or expose it again with the exported `ThemeProvider` component.
+
+The `Modal` component from the library already handles this edge case, so you won't need to do anything.
diff --git a/docs/6.x/docs/showcase.mdx b/docs/6.x/docs/showcase.mdx
new file mode 100644
index 0000000000..19bce467e3
--- /dev/null
+++ b/docs/6.x/docs/showcase.mdx
@@ -0,0 +1,11 @@
+---
+title: Showcase
+---
+
+import Showcase from '@docs/components/Showcase.tsx';
+
+# Who's using Paper?
+
+Check out these apps built using Paper. Send us a [pull request](https://github.com/callstack/react-native-paper/pulls) to add your app to this list.
+
+<Showcase />
diff --git a/docs/6.x/index.mdx b/docs/6.x/index.mdx
new file mode 100644
index 0000000000..91f12670f9
--- /dev/null
+++ b/docs/6.x/index.mdx
@@ -0,0 +1,38 @@
+---
+pageType: home
+hero:
+  name: Cross-platform Material Design for React Native
+  tagline: Paper is a collection of customizable and production-ready components for React Native, following Google’s Material Design guidelines.
+  actions:
+    - text: Get started
+      link: /docs/guides/getting-started
+      theme: brand
+    - text: Try on Snack
+      link: https://snack.expo.dev/@react-native-paper/react-native-paper-example_v5
+      theme: alt
+features:
+  - title: Production-ready components
+    details: Buttons, inputs, lists, cards, menus, dialogs, navigation, and feedback patterns built for day-to-day product work.
+    icon: /react-native-paper/images/home/components.svg
+    span: 4
+  - title: Material You theming
+    details: Adopt Material 3 color, typography, elevation, and state layers with a theme system designed for real apps.
+    icon: /react-native-paper/images/home/palette.svg
+    span: 4
+  - title: Accessible by default
+    details: Common interactions, contrast, and state handling are already baked into the component surface instead of left to each screen.
+    icon: /react-native-paper/images/home/accessibility.svg
+    span: 4
+  - title: Cross-platform parity
+    details: Keep design language and component behavior aligned across iOS, Android, and React Native Web from one codebase.
+    icon: /react-native-paper/images/home/devices.svg
+    span: 4
+  - title: Dark mode support
+    details: Ship light and dark experiences with the same primitives, including adaptive surfaces and semantic color roles.
+    icon: /react-native-paper/images/home/moon.svg
+    span: 4
+  - title: Migration-friendly docs
+    details: Browse stable 5.x, preview 6.x, and legacy static docs from one version selector without splitting the docs experience.
+    icon: /react-native-paper/images/home/versions.svg
+    span: 4
+---
diff --git a/docs/README.md b/docs/README.md
deleted file mode 100644
index aaba2fa1e1..0000000000
--- a/docs/README.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# Website
-
-This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
-
-### Installation
-
-```
-$ yarn
-```
-
-### Local Development
-
-```
-$ yarn start
-```
-
-This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
-
-### Build
-
-```
-$ yarn build
-```
-
-This command generates static content into the `build` directory and can be served using any static contents hosting service.
-
-### Deployment
-
-Using SSH:
-
-```
-$ USE_SSH=true yarn deploy
-```
-
-Not using SSH:
-
-```
-$ GIT_USER=<Your GitHub username> yarn deploy
-```
-
-If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
diff --git a/docs/babel.config.js b/docs/babel.config.js
deleted file mode 100644
index b34f4c9f0f..0000000000
--- a/docs/babel.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ['@docusaurus/core/lib/babel/preset'],
-};
diff --git a/docs/component-docs-plugin/generatePageMDX.js b/docs/component-docs-plugin/generatePageMDX.js
deleted file mode 100644
index 0165ecdb8d..0000000000
--- a/docs/component-docs-plugin/generatePageMDX.js
+++ /dev/null
@@ -1,236 +0,0 @@
-const config = require('../docusaurus.config');
-
-const { baseUrl, customFields } = config;
-
-function renderBadge(annotation) {
-  const [annotType, ...annotLabel] = annotation.split(' ');
-
-  // eslint-disable-next-line prettier/prettier
-  return `<span class="badge badge-${annotType.replace('@', '')} "><span class="badge-text">${annotLabel.join(' ')}</span></span>`;
-}
-
-function generateKnownIssues(componentName) {
-  const componentKnownIssues = customFields.knownIssues[componentName];
-
-  if (!componentKnownIssues) {
-    return `<span />`;
-  }
-
-  const issues = Object.entries(componentKnownIssues)
-    .map(([key, value]) => {
-      return `
-        <li key="${key}">
-          <a href="${value}">${key}</a>
-        </li>
-    `;
-    })
-    .join('');
-
-  return `
-  ## Known Issues
-
-  <details>
-    <ul>
-      ${issues}
-    </ul>
-  </details>
-  `;
-}
-
-function generateMoreExamples(componentName) {
-  const componentMoreExamples = customFields.moreExamples[componentName];
-
-  if (!componentMoreExamples) {
-    return `<span />`;
-  }
-
-  const links = Object.entries(componentMoreExamples)
-    .map(([key, value]) => {
-      return `
-        <li key="${key}">
-          <a href="${value}">${key}</a>
-        </li>
-    `;
-    })
-    .join('');
-
-  return `
-  ## More Examples
-  <details>
-    <summary>Toggle to grab more examples</summary>
-    <ul>
-      ${links}
-    </ul>
-  </details>
-  `;
-}
-
-function generateThemeColors(componentName, themeColorsData) {
-  if (!themeColorsData) {
-    return `<span />`;
-  }
-  return `
-  ## Theme colors
-
-  <ThemeColorsTable themeColorsData={${themeColorsData}} componentName="${componentName}" />
-  `;
-}
-
-function generateScreenshots(componentName, screenshotData) {
-  if (!screenshotData) {
-    return `<span />`;
-  }
-
-  return `
-  <ScreenshotTabs screenshotData={${screenshotData}} baseUrl="${baseUrl}"/>
-  `;
-}
-
-function generatePropsTable(data, link, extendsAttributes) {
-  const ANNOTATION_OPTIONAL = '@optional';
-  const ANNOTATION_INTERNAL = '@internal';
-
-  const props = Object.entries(data)
-    .map(([prop, value]) => {
-      if (!value.description) {
-        value.description = '';
-      }
-      // Remove @optional annotations from descriptions.
-      if (value.description.includes(ANNOTATION_OPTIONAL)) {
-        value.description = value.description.replace(ANNOTATION_OPTIONAL, '');
-      }
-      // Hide props with @internal annotations.
-      if (value.description.includes(ANNOTATION_INTERNAL)) {
-        return;
-      }
-
-      let leadingBadge = '';
-      let descriptionByLines = value.description?.split('\n');
-
-      // Find leading badge and put it next after prop name.
-      if (descriptionByLines?.[0].includes('@')) {
-        leadingBadge = descriptionByLines[0];
-      }
-
-      return `
-<div>
-
-### ${prop} ${value.required ? '(required)' : ''} ${
-        leadingBadge && renderBadge(leadingBadge)
-      }
-
-</div>
-  
-  <PropTable componentLink="${link}" prop="${prop}" />
-  `;
-    })
-    .join('');
-
-  return `
-  ## Props
-  ${
-    extendsAttributes.length === 0
-      ? `<span />`
-      : `### ${extendsAttributes?.[0]?.name}`
-  }
-  ${extendsAttributes
-    .map((attr) => {
-      return `<ExtendsLink name="${attr.name}" link="${attr.link}" />`;
-    })
-    .join('')}
-
-  ${props}
-  `;
-}
-
-function generateExtendsAttributes(doc) {
-  const ANNOTATION_EXTENDS = '@extends';
-
-  const extendsAttributes = [];
-  doc?.description
-    .split('\n')
-    .filter((line) => {
-      if (line.startsWith(ANNOTATION_EXTENDS)) {
-        const parts = line.split(' ').slice(1);
-        const link = parts.pop();
-        extendsAttributes.push({
-          name: parts.join(' '),
-          link,
-        });
-        return false;
-      }
-      return true;
-    })
-    .join('\n');
-
-  return extendsAttributes;
-}
-
-function generateExtendedExamples(usage, extendedExamplesData) {
-  if (!extendedExamplesData) {
-    return usage;
-  }
-
-  const data = JSON.parse(extendedExamplesData);
-  const exampleHeader = Object.keys(data)[0];
-
-  return `
-  ${usage}
-
-  ### ${exampleHeader}
-  <ExtendedExample extendedExamplesData={${extendedExamplesData}} />
-  `;
-}
-
-function generatePageMDX(doc, link) {
-  const summaryRegex = /([\s\S]*?)## Usage/;
-
-  const description = doc.description
-    .replace(/<\/br>/g, '')
-    .replace(/style="[a-zA-Z0-9:;.\s()\-,]*"/gi, '')
-    .replace(/src="screenshots/g, `src="${baseUrl}screenshots`)
-    .replace(/@extends.+$/, '');
-
-  const summary = summaryRegex.exec(description)
-    ? summaryRegex.exec(description)[1]
-    : '';
-  const usage = description.replace(summary, '');
-
-  const themeColorsData = JSON.stringify(customFields.themeColors[doc.title]);
-  const screenshotData = JSON.stringify(customFields.screenshots[doc.title]);
-  const extendedExamplesData = JSON.stringify(
-    customFields.extendedExamples[doc.title]
-  );
-
-  const extendsAttributes = generateExtendsAttributes(doc);
-
-  const mdx = `
----
-title: ${doc.title}
----
-
-import PropTable from '@site/src/components/PropTable.tsx';
-import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
-
-${summary}
-
-${generateScreenshots(doc.title, screenshotData)}
-
-${generateExtendedExamples(usage, extendedExamplesData)}
-
-${generatePropsTable(doc.data.props, link, extendsAttributes)}
-
-${generateMoreExamples(doc.title)}
-
-${generateThemeColors(doc.title, themeColorsData)}
-
-${generateKnownIssues(doc.title)}
-`;
-
-  return mdx.slice(1);
-}
-
-module.exports = generatePageMDX;
diff --git a/docs/component-docs-plugin/index.js b/docs/component-docs-plugin/index.js
deleted file mode 100644
index af66c75aa0..0000000000
--- a/docs/component-docs-plugin/index.js
+++ /dev/null
@@ -1,92 +0,0 @@
-const {
-  default: parseComponentDocs,
-} = require('component-docs/dist/parsers/component');
-const fs = require('fs');
-const path = require('path');
-
-const generatePageMDX = require('./generatePageMDX');
-
-const pluginName = 'component-docs-plugin';
-
-async function componentsPlugin(_, options) {
-  const { docsRootDir, libsRootDir, pages } = options;
-
-  function clean() {
-    fs.rmSync(docsRootDir, { recursive: true, force: true });
-  }
-
-  function createCategory(label, dir = '.') {
-    const categoryJSON = JSON.stringify({ label }, undefined, 2);
-    const docsCategoryDir = path.join(docsRootDir, dir);
-    if (!fs.existsSync(docsCategoryDir)) {
-      fs.mkdirSync(docsCategoryDir);
-    }
-    fs.writeFileSync(
-      path.join(docsCategoryDir, `_category_.json`),
-      categoryJSON
-    );
-  }
-
-  function createPageForComponent(targetArray, source) {
-    const [item, subitem] = targetArray;
-    const target = subitem ? `${item}/${subitem}` : item;
-    const targetPath = target + '.mdx';
-    const sourcePath = source + '.tsx';
-
-    // Parse component using component-docs.
-    const doc = parseComponentDocs(path.join(libsRootDir, sourcePath), {
-      root: libsRootDir,
-    });
-
-    // Create directory for the output mdx file.
-    fs.mkdirSync(
-      path.join(docsRootDir, targetPath).split('/').slice(0, -1).join('/'),
-      { recursive: true }
-    );
-
-    // Generate and write mdx file.
-    fs.writeFileSync(
-      path.join(docsRootDir, targetPath),
-      generatePageMDX(doc, source)
-    );
-
-    return doc;
-  }
-
-  return {
-    name: pluginName,
-    async loadContent() {
-      // Clean up docs directory.
-      clean();
-      // Create root components category.
-      createCategory('Components', '.');
-
-      const docs = {};
-
-      for (const item in pages) {
-        if (typeof pages[item] === 'string') {
-          const doc = createPageForComponent([item], pages[item]);
-          docs[pages[item]] = doc;
-        } else {
-          for (const subitem in pages[item]) {
-            const doc = createPageForComponent(
-              [item, subitem],
-              pages[item][subitem]
-            );
-            docs[pages[item][subitem]] = doc;
-          }
-        }
-      }
-
-      return docs;
-    },
-    async contentLoaded({ content: docs, actions }) {
-      // Store component docs global data so it can be used in `PropsTable` component.
-      actions.setGlobalData({
-        docs,
-      });
-    },
-  };
-}
-
-module.exports = componentsPlugin;
diff --git a/docs/component-docs-plugin/useDocs.tsx b/docs/component-docs-plugin/useDocs.tsx
deleted file mode 100644
index 9c6fcda0f8..0000000000
--- a/docs/component-docs-plugin/useDocs.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-// @ts-ignore
-// eslint-disable-next-line import/no-unresolved
-import { usePluginData } from '@docusaurus/useGlobalData';
-
-const pluginName = 'component-docs-plugin';
-
-export interface ComponentDocsPluginData {
-  docs: { [key in string]: PageDoc };
-}
-
-export interface PageDoc {
-  filepath: string;
-  title: string;
-  description: string;
-  link: string;
-  data: Data;
-  type: string;
-  dependencies: string[];
-  group?: string;
-}
-
-export interface Data {
-  description: string;
-  displayName?: string;
-  props: { [key in string]: Prop };
-}
-
-export interface Prop {
-  required: boolean;
-  tsType: {
-    name: string;
-    raw?: string;
-  };
-  description: string;
-  defaultValue: {
-    value: string;
-  };
-}
-
-function useDoc(withPath: string) {
-  const pluginData = usePluginData(pluginName) as ComponentDocsPluginData;
-  return pluginData?.docs?.[withPath];
-}
-
-export default useDoc;
diff --git a/docs/component-docs.config.ts b/docs/component-docs.config.ts
new file mode 100644
index 0000000000..2cf106849c
--- /dev/null
+++ b/docs/component-docs.config.ts
@@ -0,0 +1,187 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { extendedExamples } from './src/data/extendedExamples.ts';
+import { screenshots } from './src/data/screenshots.ts';
+import { themeColors } from './src/data/themeColors.ts';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export type Page =
+  | string
+  | {
+      source: string;
+      component?: string;
+      props?: string;
+      title?: string;
+    };
+
+export type Pages = Record<string, Page | Record<string, Page>>;
+
+type ComponentDocsConfig = {
+  sourceRootDir: string;
+  pages: Pages;
+  customFields: {
+    moreExamples: Record<string, Record<string, string>>;
+    knownIssues: Record<string, Record<string, string>>;
+    themeColors: Record<string, unknown>;
+    screenshots: Record<string, unknown>;
+    extendedExamples: Record<string, unknown>;
+  };
+};
+
+const pages = {
+  ActivityIndicator: 'ActivityIndicator',
+  Appbar: {
+    Appbar: 'Appbar/Appbar',
+    AppbarAction: 'Appbar/AppbarAction',
+    AppbarBackAction: 'Appbar/AppbarBackAction',
+    AppbarContent: 'Appbar/AppbarContent',
+    AppbarHeader: 'Appbar/AppbarHeader',
+  },
+  Avatar: {
+    AvatarIcon: 'Avatar/AvatarIcon',
+    AvatarImage: 'Avatar/AvatarImage',
+    AvatarText: 'Avatar/AvatarText',
+  },
+  Badge: 'Badge',
+  Banner: 'Banner',
+  BottomNavigation: {
+    BottomNavigation: 'BottomNavigation/BottomNavigation',
+    BottomNavigationBar: 'BottomNavigation/BottomNavigationBar',
+  },
+  Button: {
+    Button: 'Button/Button',
+  },
+  Card: {
+    Card: 'Card/Card',
+    CardActions: 'Card/CardActions',
+    CardContent: 'Card/CardContent',
+    CardCover: 'Card/CardCover',
+    CardTitle: 'Card/CardTitle',
+  },
+  Checkbox: {
+    Checkbox: 'Checkbox/Checkbox',
+    CheckboxItem: 'Checkbox/CheckboxItem',
+  },
+  Chip: {
+    Chip: 'Chip/Chip',
+  },
+  DataTable: {
+    DataTable: 'DataTable/DataTable',
+    DataTableCell: 'DataTable/DataTableCell',
+    DataTableHeader: 'DataTable/DataTableHeader',
+    DataTablePagination: 'DataTable/DataTablePagination',
+    DataTableRow: 'DataTable/DataTableRow',
+    DataTableTitle: 'DataTable/DataTableTitle',
+  },
+  Dialog: {
+    Dialog: 'Dialog/Dialog',
+    DialogActions: 'Dialog/DialogActions',
+    DialogContent: 'Dialog/DialogContent',
+    DialogIcon: 'Dialog/DialogIcon',
+    DialogScrollArea: 'Dialog/DialogScrollArea',
+    DialogTitle: 'Dialog/DialogTitle',
+  },
+  Divider: 'Divider',
+  Drawer: {
+    DrawerCollapsedItem: 'Drawer/DrawerCollapsedItem',
+    DrawerItem: 'Drawer/DrawerItem',
+    DrawerSection: 'Drawer/DrawerSection',
+  },
+  FAB: {
+    FAB: 'FAB/FAB',
+    FABExtended: 'FAB/Extended',
+    FABMenu: {
+      source: 'FAB/Menu',
+      props: 'MenuProps',
+      title: 'FAB.Menu',
+    },
+  },
+  IconButton: {
+    IconButton: 'IconButton/IconButton',
+  },
+  Icon: 'Icon',
+  List: {
+    ListAccordion: 'List/ListAccordion',
+    ListAccordionGroup: 'List/ListAccordionGroup',
+    ListIcon: 'List/ListIcon',
+    ListItem: 'List/ListItem',
+    ListSection: 'List/ListSection',
+    ListSubheader: 'List/ListSubheader',
+  },
+  Menu: {
+    Menu: 'Menu/Menu',
+    MenuItem: 'Menu/MenuItem',
+  },
+  Modal: 'Modal',
+  Portal: {
+    Portal: {
+      source: 'Portal/Portal',
+      component: 'Portal',
+    },
+    PortalHost: 'Portal/PortalHost',
+  },
+  ProgressBar: 'ProgressBar',
+  RadioButton: {
+    RadioButton: 'RadioButton/RadioButton',
+    RadioButtonAndroid: 'RadioButton/RadioButtonAndroid',
+    RadioButtonGroup: 'RadioButton/RadioButtonGroup',
+    RadioButtonIOS: 'RadioButton/RadioButtonIOS',
+    RadioButtonItem: 'RadioButton/RadioButtonItem',
+  },
+  Searchbar: 'Searchbar',
+  SegmentedButtons: {
+    SegmentedButtons: 'SegmentedButtons/SegmentedButtons',
+  },
+  Snackbar: 'Snackbar',
+  Surface: 'Surface',
+  Switch: {
+    Switch: 'Switch/Switch',
+  },
+  TextInput: {
+    TextInput: {
+      source: 'TextInput/TextInput',
+      props: 'TextInputProps',
+    },
+    TextInputIcon: {
+      source: 'TextInput/TextInputIcon',
+      props: 'TextInputAccessoryProps',
+    },
+  },
+  Tooltip: {
+    Tooltip: 'Tooltip/Tooltip',
+  },
+  TouchableRipple: {
+    TouchableRipple: 'TouchableRipple/TouchableRipple',
+  },
+  Text: {
+    Text: {
+      source: 'Typography/Text',
+      component: 'Text',
+    },
+  },
+};
+
+const componentDocsConfig: ComponentDocsConfig = {
+  sourceRootDir: path.join(__dirname, '..', 'src', 'components'),
+  pages,
+  customFields: {
+    moreExamples: {
+      Portal: {
+        'Comprehensive Portal example':
+          'https://snack.expo.dev/@react-native-paper/more-examples---comprehensive-portal-example',
+      },
+      Snackbar: {
+        'Snackbar rendered regardless of the parent positioning':
+          'https://snack.expo.dev/@react-native-paper/more-examples---snackbar-rendered-regardless-of-the-parent-positioning',
+      },
+    },
+    knownIssues: {},
+    themeColors,
+    screenshots,
+    extendedExamples,
+  },
+};
+
+export default componentDocsConfig;
diff --git a/docs/docs/guides/07-contributing.mdx b/docs/docs/guides/07-contributing.mdx
deleted file mode 100644
index 211e8f4b8c..0000000000
--- a/docs/docs/guides/07-contributing.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Contributing
----
-
-import Contributing from '../../../CONTRIBUTING.md';
-
-<Contributing />
diff --git a/docs/docs/guides/_category_.json b/docs/docs/guides/_category_.json
deleted file mode 100644
index 82c9b69949..0000000000
--- a/docs/docs/guides/_category_.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "label": "Guides",
-  "position": 0
-}
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
deleted file mode 100644
index 1dec1bb6ec..0000000000
--- a/docs/docusaurus.config.js
+++ /dev/null
@@ -1,345 +0,0 @@
-// @ts-check
-// Note: type annotations allow type checking and IDEs autocompletion
-
-const path = require('path');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-
-const { extendedExamples } = require('./src/data/extendedExamples.js');
-const { screenshots } = require('./src/data/screenshots.js');
-const { themeColors } = require('./src/data/themeColors.js');
-
-const { NODE_ENV, DOCUSAURUS_BASE_URL } = process.env;
-
-const title = 'React Native Paper';
-
-const url = 'https://callstack.github.io';
-
-/**
- * There are 3 environments that we want to support:
- * 1. Development - Docs should work on `http://localhost:3000/`
- * 2. Production - Docs should work on `https://callstack.github.io/react-native-paper/
- * 3. CI - CircleCI builds and stores preview artifacts.
- *    Docs should work on `https://output.circle-artifacts.com/output/job/$CIRCLE_WORKFLOW_JOB_ID/artifacts/$CIRCLE_NODE_INDEX/`
- *
- * Both `baseUrl` and `publicUrl` work together to ensure assets and links work properly on every deployment
- */
-const baseUrl =
-  DOCUSAURUS_BASE_URL ||
-  (NODE_ENV === 'development' ? '/' : '/react-native-paper/');
-const publicUrl =
-  NODE_ENV === 'development' ? 'http://localhost:3000/' : `${url}${baseUrl}`;
-
-/** @type {import('@docusaurus/types').Config} */
-const config = {
-  title,
-  staticDirectories: ['public', 'static'],
-  tagline: 'Material Design for React Native',
-  url,
-  baseUrl,
-  onBrokenLinks: 'log',
-  onBrokenMarkdownLinks: 'log',
-  favicon: 'images/favicon.ico',
-
-  // GitHub pages deployment config.
-  // If you aren't using GitHub pages, you don't need these.
-  organizationName: 'callstack', // Usually your GitHub org/user name.
-  projectName: 'react-native-paper', // Usually your repo name.
-
-  // Even if you don't use internalization, you can use this field to set useful
-  // metadata like html lang. For example, if your site is Chinese, you may want
-  // to replace "en" with "zh-Hans".
-  i18n: {
-    defaultLocale: 'en',
-    locales: ['en'],
-  },
-
-  plugins: [
-    [
-      './component-docs-plugin',
-      {
-        docsRootDir: path.join(__dirname, 'docs', 'components'),
-        libsRootDir: path.join(__dirname, '..', 'src', 'components'),
-        pages: {
-          ActivityIndicator: 'ActivityIndicator',
-          Appbar: {
-            Appbar: 'Appbar/Appbar',
-            AppbarAction: 'Appbar/AppbarAction',
-            AppbarBackAction: 'Appbar/AppbarBackAction',
-            AppbarContent: 'Appbar/AppbarContent',
-            AppbarHeader: 'Appbar/AppbarHeader',
-          },
-          Avatar: {
-            AvatarIcon: 'Avatar/AvatarIcon',
-            AvatarImage: 'Avatar/AvatarImage',
-            AvatarText: 'Avatar/AvatarText',
-          },
-          Badge: 'Badge',
-          Banner: 'Banner',
-          BottomNavigation: {
-            BottomNavigation: 'BottomNavigation/BottomNavigation',
-            BottomNavigationBar: 'BottomNavigation/BottomNavigationBar',
-          },
-          Button: {
-            Button: 'Button/Button',
-          },
-          Card: {
-            Card: 'Card/Card',
-            CardActions: 'Card/CardActions',
-            CardContent: 'Card/CardContent',
-            CardCover: 'Card/CardCover',
-            CardTitle: 'Card/CardTitle',
-          },
-          Checkbox: {
-            Checkbox: 'Checkbox/Checkbox',
-            CheckboxAndroid: 'Checkbox/CheckboxAndroid',
-            CheckboxIOS: 'Checkbox/CheckboxIOS',
-            CheckboxItem: 'Checkbox/CheckboxItem',
-          },
-          Chip: {
-            Chip: 'Chip/Chip',
-          },
-          DataTable: {
-            DataTable: 'DataTable/DataTable',
-            DataTableCell: 'DataTable/DataTableCell',
-            DataTableHeader: 'DataTable/DataTableHeader',
-            DataTablePagination: 'DataTable/DataTablePagination',
-            DataTableRow: 'DataTable/DataTableRow',
-            DataTableTitle: 'DataTable/DataTableTitle',
-          },
-          Dialog: {
-            Dialog: 'Dialog/Dialog',
-            DialogActions: 'Dialog/DialogActions',
-            DialogContent: 'Dialog/DialogContent',
-            DialogIcon: 'Dialog/DialogIcon',
-            DialogScrollArea: 'Dialog/DialogScrollArea',
-            DialogTitle: 'Dialog/DialogTitle',
-          },
-          Divider: 'Divider',
-          Drawer: {
-            DrawerCollapsedItem: 'Drawer/DrawerCollapsedItem',
-            DrawerItem: 'Drawer/DrawerItem',
-            DrawerSection: 'Drawer/DrawerSection',
-          },
-          FAB: {
-            FAB: 'FAB/FAB',
-            AnimatedFAB: 'FAB/AnimatedFAB',
-            FABGroup: 'FAB/FABGroup',
-          },
-          HelperText: { HelperText: 'HelperText/HelperText' },
-          IconButton: {
-            IconButton: 'IconButton/IconButton',
-          },
-          Icon: 'Icon',
-          List: {
-            ListAccordion: 'List/ListAccordion',
-            ListAccordionGroup: 'List/ListAccordionGroup',
-            ListIcon: 'List/ListIcon',
-            ListItem: 'List/ListItem',
-            ListSection: 'List/ListSection',
-            ListSubheader: 'List/ListSubheader',
-          },
-          Menu: {
-            Menu: 'Menu/Menu',
-            MenuItem: 'Menu/MenuItem',
-          },
-          Modal: 'Modal',
-          Portal: {
-            Portal: 'Portal/Portal',
-            PortalHost: 'Portal/PortalHost',
-          },
-          ProgressBar: 'ProgressBar',
-          RadioButton: {
-            RadioButton: 'RadioButton/RadioButton',
-            RadioButtonAndroid: 'RadioButton/RadioButtonAndroid',
-            RadioButtonGroup: 'RadioButton/RadioButtonGroup',
-            RadioButtonIOS: 'RadioButton/RadioButtonIOS',
-            RadioButtonItem: 'RadioButton/RadioButtonItem',
-          },
-          Searchbar: 'Searchbar',
-          SegmentedButtons: {
-            SegmentedButtons: 'SegmentedButtons/SegmentedButtons',
-          },
-          Snackbar: 'Snackbar',
-          Surface: 'Surface',
-          Switch: {
-            Switch: 'Switch/Switch',
-          },
-          TextInput: {
-            TextInput: 'TextInput/TextInput',
-            TextInputAffix: 'TextInput/Adornment/TextInputAffix',
-            TextInputIcon: 'TextInput/Adornment/TextInputIcon',
-          },
-          ToggleButton: {
-            ToggleButton: 'ToggleButton/ToggleButton',
-            ToggleButtonGroup: 'ToggleButton/ToggleButtonGroup',
-            ToggleButtonRow: 'ToggleButton/ToggleButtonRow',
-          },
-          Tooltip: {
-            Tooltip: 'Tooltip/Tooltip',
-          },
-          TouchableRipple: {
-            TouchableRipple: 'TouchableRipple/TouchableRipple',
-          },
-          Text: {
-            Text: 'Typography/Text',
-          },
-        },
-      },
-    ],
-    require('./plugins/docusaurus-react-native-plugin'),
-  ],
-
-  presets: [
-    [
-      'classic',
-      /** @type {import('@docusaurus/preset-classic').Options} */
-      ({
-        docs: {
-          sidebarPath: require.resolve('./sidebars.js'),
-          editUrl: (params) => {
-            const urlToMain =
-              'https://github.com/callstack/react-native-paper/tree/main';
-
-            if (params.docPath.includes('guides')) {
-              return `${urlToMain}/docs/docs/${params.docPath}`;
-            }
-
-            const customUrls = {
-              TextInputAffix:
-                'src/components/TextInput/Adornment/TextInputAffix.tsx',
-              TextInputIcon:
-                'src/components/TextInput/Adornment/TextInputIcon.tsx',
-              Text: 'src/components/Typography/Text.tsx',
-              showcase: 'docs/src/components/Showcase.tsx',
-            };
-
-            const customUrlComponent =
-              params.docPath.match(/\/?([^/]+)\.mdx$/)[1];
-
-            if (customUrls[customUrlComponent]) {
-              return `${urlToMain}/${customUrls[customUrlComponent]}`;
-            }
-
-            return `${urlToMain}/src/${params.docPath.replace('mdx', 'tsx')}`;
-          },
-
-          remarkPlugins: [
-            [require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }],
-          ],
-        },
-        theme: {
-          customCss: require.resolve('./src/css/custom.css'),
-        },
-      }),
-    ],
-  ],
-
-  themeConfig:
-    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
-    ({
-      navbar: {
-        logo: {
-          alt: 'React Native Paper',
-          src: 'images/sidebar-logo.svg',
-        },
-        items: [
-          {
-            type: 'doc',
-            docId: 'guides/getting-started',
-            position: 'left',
-            label: 'Guides',
-          },
-          {
-            type: 'doc',
-            docId: 'components/ActivityIndicator',
-            position: 'left',
-            label: 'Components',
-          },
-          {
-            type: 'doc',
-            docId: 'showcase',
-            position: 'left',
-            label: 'Showcase',
-          },
-          {
-            type: 'dropdown',
-            label: 'v5.x',
-            position: 'right',
-            items: [
-              {
-                label: 'v4.x',
-                href: `${publicUrl}4.0/`,
-              },
-              {
-                label: 'v3.x',
-                href: `${publicUrl}3.0/`,
-              },
-              {
-                label: 'v2.x',
-                href: `${publicUrl}2.0/`,
-              },
-              {
-                label: 'v1.x',
-                href: `${publicUrl}1.0/`,
-              },
-            ],
-          },
-          {
-            href: 'https://discord.gg/zwR2Cdh',
-            className: 'nav-link nav-discord-link',
-            'aria-label': 'Discord',
-            position: 'right',
-          },
-          {
-            href: 'https://twitter.com/rn_paper',
-            className: 'nav-link nav-twitter-link',
-            'aria-label': 'Twitter',
-            position: 'right',
-          },
-          {
-            href: 'https://github.com/callstack/react-native-paper',
-            className: 'nav-link nav-github-link',
-            'aria-label': 'GitHub',
-            position: 'right',
-          },
-        ],
-        title,
-      },
-      prism: {
-        theme: lightCodeTheme,
-        darkTheme: darkCodeTheme,
-      },
-      algolia: {
-        appId: 'U16QMJNNW7',
-        apiKey: 'c32fdc9aa2bbfaa3d44481f5cbdb3c04',
-        indexName: 'crawler_React Native Paper Docs',
-      },
-    }),
-
-  customFields: {
-    moreExamples: {
-      Portal: {
-        'Comprehensive Portal example':
-          'https://snack.expo.dev/@react-native-paper/more-examples---comprehensive-portal-example',
-      },
-      Snackbar: {
-        'Snackbar rendered regardless of the parent positioning':
-          'https://snack.expo.dev/@react-native-paper/more-examples---snackbar-rendered-regardless-of-the-parent-positioning',
-      },
-    },
-    knownIssues: {
-      TextInput: {
-        'Outline overlaps label':
-          'https://github.com/callstack/react-native-paper/issues/3759#issuecomment-1601235262',
-        'Long text wraps to a second line':
-          'https://github.com/callstack/react-native-paper/issues/2581#issuecomment-790251987',
-      },
-    },
-    themeColors,
-    screenshots,
-    extendedExamples,
-  },
-};
-
-module.exports = config;
diff --git a/docs/package.json b/docs/package.json
index e8dc71c7e5..50d5a6c934 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -2,48 +2,38 @@
   "name": "docs",
   "version": "0.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
-    "docusaurus": "docusaurus",
-    "start": "docusaurus start",
-    "build": "docusaurus build",
-    "swizzle": "docusaurus swizzle",
-    "deploy": "docusaurus deploy",
-    "clear": "docusaurus clear",
-    "serve": "docusaurus serve",
-    "write-translations": "docusaurus write-translations",
-    "write-heading-ids": "docusaurus write-heading-ids",
-    "typecheck": "tsc",
-    "prepare": "patch-package"
+    "dev": "rspress dev",
+    "build": "rspress build",
+    "preview": "rspress preview",
+    "typecheck": "tsc --noEmit",
+    "generate:5x": "node scripts/generate-5x-docs.ts origin/5.0"
   },
   "dependencies": {
     "@callstack/react-theme-provider": "^3.0.9",
-    "@docusaurus/core": "^2.3.6",
-    "@docusaurus/preset-classic": "^2.3.6",
-    "@docusaurus/remark-plugin-npm2yarn": "^2.3.6",
-    "@easyops-cn/docusaurus-search-local": "^0.33.4",
+    "@callstack/rspress-preset": "0.6.6",
+    "@callstack/rspress-theme": "0.6.6",
     "@material/material-color-utilities": "0.2.4",
-    "@mdx-js/react": "^1.6.22",
     "@react-native-vector-icons/material-design-icons": "^12.0.0",
+    "@rspress/core": "2.0.14",
     "camelcase": "^7.0.1",
-    "clsx": "^1.2.1",
     "color": "^4.2.3",
     "marked": "^4.1.1",
-    "prism-react-renderer": "^1.3.5",
-    "react": "17.0.2",
+    "react": "19.2.6",
     "react-color": "^2.19.3",
-    "react-dom": "17.0.2",
-    "react-native-safe-area-context": "^4.5.0",
-    "react-native-web": "^0.18.12",
-    "use-latest-callback": "^0.1.7"
+    "react-dom": "19.2.6",
+    "react-native-safe-area-context": "5.7.0",
+    "react-native-web": "^0.21.2",
+    "use-latest-callback": "^0.2.3"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^2.3.6",
-    "@tsconfig/docusaurus": "^1.0.6",
     "@types/marked": "^4.0.7",
+    "@types/react": "^19.2.7",
     "@types/react-color": "^3.0.6",
+    "@types/react-dom": "^19.2.3",
     "component-docs": "^0.24.0",
-    "patch-package": "^6.5.0",
-    "typescript": "^4.8.4"
+    "typescript": "5.8.3"
   },
   "browserslist": {
     "production": [
@@ -58,10 +48,6 @@
     ]
   },
   "engines": {
-    "node": ">=18"
-  },
-  "resolutions": {
-    "@types/react": "18.0.8",
-    "@types/react-dom": "18.0.8"
+    "node": ">=24"
   }
 }
diff --git a/docs/plugins/component-docs/index.ts b/docs/plugins/component-docs/index.ts
new file mode 100644
index 0000000000..f861aeb914
--- /dev/null
+++ b/docs/plugins/component-docs/index.ts
@@ -0,0 +1,160 @@
+import type { RspressPlugin } from '@rspress/core';
+import fs from 'node:fs';
+import path from 'node:path';
+
+import { createComponentParser } from './parser.ts';
+import { renderComponentPage } from './render.ts';
+import type { ComponentPageConfig } from './types.ts';
+import type { Page, Pages } from '../../component-docs.config.ts';
+
+type ComponentDocsPluginOptions = {
+  customFields: {
+    extendedExamples: Record<string, unknown>;
+    knownIssues: Record<string, Record<string, string>>;
+    moreExamples: Record<string, Record<string, string>>;
+    screenshots: Record<string, unknown>;
+    themeColors: Record<string, unknown>;
+  };
+  pages: Pages;
+  sourceRootDir: string;
+  tsconfigPath: string;
+  version: string;
+};
+
+type MetaEntry =
+  | {
+      type: 'custom-link';
+      label: string;
+      link: string;
+    }
+  | {
+      type: 'dir';
+      name: string;
+      label: string;
+      collapsible: true;
+      collapsed: false;
+    };
+
+const isPageConfig = (page: Page | Record<string, Page>): page is Page =>
+  typeof page === 'string' || 'source' in page;
+
+const normalizePage = (page: Page): ComponentPageConfig =>
+  typeof page === 'string' ? { source: page } : page;
+
+const flattenPages = (pages: Pages) =>
+  Object.entries(pages).flatMap(([entryName, page]) => {
+    if (isPageConfig(page)) {
+      return [{ page: normalizePage(page), route: entryName }];
+    }
+
+    return Object.entries(page).map(([pageName, pageConfig]) => ({
+      page: normalizePage(pageConfig),
+      route: `${entryName}/${pageName}`,
+    }));
+  });
+
+const writeJson = (filePath: string, value: unknown) => {
+  fs.mkdirSync(path.dirname(filePath), { recursive: true });
+  fs.writeFileSync(filePath, `${JSON.stringify(value, null, 2)}\n`);
+};
+
+const createComponentLink = (route: string, title: string): MetaEntry => ({
+  type: 'custom-link',
+  label: title,
+  link: `/docs/components/${route}`,
+});
+
+const writeNavigation = (
+  rootDir: string,
+  options: ComponentDocsPluginOptions,
+  titles: ReadonlyMap<string, string>
+) => {
+  const componentsDir = path.join(
+    rootDir,
+    options.version,
+    'docs',
+    'components'
+  );
+  const getTitle = (route: string) => {
+    const title = titles.get(route);
+
+    if (!title) {
+      throw new Error(`Missing parsed component docs for ${route}`);
+    }
+
+    return title;
+  };
+
+  fs.rmSync(componentsDir, { recursive: true, force: true });
+  writeJson(
+    path.join(componentsDir, '_meta.json'),
+    Object.entries(options.pages).map(([entryName, page]): MetaEntry => {
+      if (isPageConfig(page)) {
+        return createComponentLink(entryName, getTitle(entryName));
+      }
+
+      return {
+        type: 'dir',
+        name: entryName,
+        label: entryName,
+        collapsible: true,
+        collapsed: false,
+      };
+    })
+  );
+
+  for (const [entryName, page] of Object.entries(options.pages)) {
+    if (isPageConfig(page)) {
+      continue;
+    }
+
+    writeJson(
+      path.join(componentsDir, entryName, '_meta.json'),
+      Object.keys(page).map((pageName) => {
+        const route = `${entryName}/${pageName}`;
+
+        return createComponentLink(route, getTitle(route));
+      })
+    );
+  }
+};
+
+export const pluginComponentDocs = (
+  options: ComponentDocsPluginOptions
+): RspressPlugin => ({
+  name: 'react-native-paper-component-docs',
+  builderConfig: {
+    dev: {
+      watchFiles: {
+        paths: path.join(options.sourceRootDir, '**/*.tsx'),
+        type: 'reload-server',
+      },
+    },
+  },
+  addPages(config) {
+    if (!config.root) {
+      throw new Error('Rspress root is required to generate component docs');
+    }
+
+    const parse = createComponentParser(options.tsconfigPath);
+    const pages = flattenPages(options.pages).map(({ page, route }) => ({
+      doc: parse(options.sourceRootDir, page),
+      route,
+      routePath: `/${options.version}/docs/components/${route}`,
+    }));
+    const routes = new Set(pages.map(({ routePath }) => routePath));
+    const titles = new Map(pages.map(({ doc, route }) => [route, doc.title]));
+
+    writeNavigation(config.root, options, titles);
+
+    return pages.map(({ doc, routePath }) => ({
+      routePath,
+      content: renderComponentPage(
+        doc,
+        options.customFields,
+        routePath,
+        routes
+      ),
+    }));
+  },
+});
diff --git a/docs/plugins/component-docs/parser.ts b/docs/plugins/component-docs/parser.ts
new file mode 100644
index 0000000000..800bd8f2f3
--- /dev/null
+++ b/docs/plugins/component-docs/parser.ts
@@ -0,0 +1,500 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import ts from 'typescript';
+
+import type {
+  ComponentDoc,
+  ComponentPageConfig,
+  ComponentProp,
+  ExtendsAttribute,
+} from './types.ts';
+
+const DEFAULT_PROPS_TYPE = 'Props';
+
+const fail = (sourcePath: string, message: string): never => {
+  throw new Error(`Unable to generate docs for ${sourcePath}: ${message}`);
+};
+
+const readDocComment = (sourceFile: ts.SourceFile, node: ts.Node) => {
+  const ranges = ts.getLeadingCommentRanges(sourceFile.text, node.pos) ?? [];
+  const range = ranges.findLast(
+    (item) =>
+      item.kind === ts.SyntaxKind.MultiLineCommentTrivia &&
+      sourceFile.text.startsWith('/**', item.pos)
+  );
+
+  if (!range) {
+    return '';
+  }
+
+  return sourceFile.text
+    .slice(range.pos + 3, range.end - 2)
+    .split('\n')
+    .map((line) => line.replace(/^\s*\* ?/, ''))
+    .join('\n')
+    .trim();
+};
+
+const getDefaultExportName = (sourceFile: ts.SourceFile) => {
+  for (const statement of sourceFile.statements) {
+    if (
+      (ts.isClassDeclaration(statement) ||
+        ts.isFunctionDeclaration(statement)) &&
+      statement.modifiers?.some(
+        (modifier) => modifier.kind === ts.SyntaxKind.DefaultKeyword
+      )
+    ) {
+      const name = statement.name;
+
+      if (!name) {
+        return fail(sourceFile.fileName, 'the default export must be named');
+      }
+
+      return name.text;
+    }
+
+    if (ts.isExportAssignment(statement)) {
+      const expression = statement.expression;
+
+      if (!ts.isIdentifier(expression)) {
+        return fail(
+          sourceFile.fileName,
+          'the default export must be an identifier, or set component in the page config'
+        );
+      }
+
+      return expression.text;
+    }
+  }
+
+  return fail(sourceFile.fileName, 'a default export was not found');
+};
+
+const findComponentDeclaration = (
+  sourceFile: ts.SourceFile,
+  componentName: string
+) => {
+  for (const statement of sourceFile.statements) {
+    if (
+      (ts.isClassDeclaration(statement) ||
+        ts.isFunctionDeclaration(statement)) &&
+      statement.name?.text === componentName
+    ) {
+      return {
+        declaration: statement,
+        docNode: statement,
+      };
+    }
+
+    if (ts.isVariableStatement(statement)) {
+      const declaration = statement.declarationList.declarations.find(
+        (item) => ts.isIdentifier(item.name) && item.name.text === componentName
+      );
+
+      if (declaration) {
+        return {
+          declaration,
+          docNode: statement,
+        };
+      }
+    }
+  }
+
+  return fail(sourceFile.fileName, `component ${componentName} was not found`);
+};
+
+const findPropsType = (sourceFile: ts.SourceFile, typeName: string) => {
+  const declaration = sourceFile.statements.find(
+    (statement): statement is ts.TypeAliasDeclaration =>
+      ts.isTypeAliasDeclaration(statement) && statement.name.text === typeName
+  );
+
+  if (!declaration) {
+    return fail(sourceFile.fileName, `type alias ${typeName} was not found`);
+  }
+
+  if (
+    !declaration.modifiers?.some(
+      (modifier) => modifier.kind === ts.SyntaxKind.ExportKeyword
+    )
+  ) {
+    fail(sourceFile.fileName, `type alias ${typeName} must be exported`);
+  }
+
+  return declaration;
+};
+
+const validatePropsType = (
+  sourceFile: ts.SourceFile,
+  declaration: ts.TypeAliasDeclaration
+) => {
+  const literals: ts.TypeLiteralNode[] = [];
+
+  const visit = (node: ts.TypeNode) => {
+    if (ts.isTypeLiteralNode(node)) {
+      literals.push(node);
+      return;
+    }
+
+    if (ts.isIntersectionTypeNode(node)) {
+      node.types.forEach(visit);
+      return;
+    }
+
+    if (ts.isParenthesizedTypeNode(node)) {
+      visit(node.type);
+    }
+  };
+
+  visit(declaration.type);
+
+  if (literals.length !== 1) {
+    return fail(
+      sourceFile.fileName,
+      `type alias ${declaration.name.text} must contain exactly one inline object type`
+    );
+  }
+
+  return declaration;
+};
+
+const isPathInside = (parentPath: string, childPath: string) => {
+  const relativePath = path.relative(parentPath, childPath);
+
+  return !relativePath.startsWith('..') && !path.isAbsolute(relativePath);
+};
+
+const getProps = (
+  checker: ts.TypeChecker,
+  sourceRootDir: string,
+  sourceFile: ts.SourceFile,
+  declaration: ts.TypeAliasDeclaration,
+  defaults: ReadonlyMap<string, string>
+) =>
+  checker
+    .getPropertiesOfType(checker.getTypeAtLocation(declaration))
+    .flatMap((symbol): ComponentProp[] => {
+      const name = symbol.getName();
+      const allDeclarations = symbol.getDeclarations() ?? [];
+      const declarations = allDeclarations.filter((item) =>
+        isPathInside(sourceRootDir, item.getSourceFile().fileName)
+      );
+      const property =
+        declarations.find((item) => item.getSourceFile() === sourceFile) ??
+        declarations[0] ??
+        (defaults.has(name)
+          ? allDeclarations.find(
+              (item): item is ts.PropertySignature =>
+                ts.isPropertySignature(item) && Boolean(item.type)
+            )
+          : undefined);
+
+      if (!property) {
+        return [];
+      }
+
+      if (!ts.isPropertySignature(property) || !property.type) {
+        return fail(
+          sourceFile.fileName,
+          `unsupported member ${property.getText(property.getSourceFile())} in ${declaration.name.text}`
+        );
+      }
+
+      const propertySourceFile = property.getSourceFile();
+      const declarationTypes = declarations.flatMap((item) =>
+        ts.isPropertySignature(item) && item.type
+          ? [item.type.getText(item.getSourceFile())]
+          : []
+      );
+      const hasUnionDeclarations = declarations.some((item) => {
+        let parent: ts.Node | undefined = item.parent;
+
+        while (parent && !ts.isTypeAliasDeclaration(parent)) {
+          if (ts.isUnionTypeNode(parent)) {
+            return true;
+          }
+
+          parent = parent.parent;
+        }
+
+        return false;
+      });
+      const type =
+        (hasUnionDeclarations && new Set(declarationTypes).size > 1) ||
+        !declarations.includes(property)
+          ? checker.typeToString(
+              checker.getTypeOfSymbolAtLocation(symbol, property),
+              property,
+              ts.TypeFormatFlags.NoTruncation |
+                ts.TypeFormatFlags.UseAliasDefinedOutsideCurrentScope
+            )
+          : property.type.getText(propertySourceFile);
+
+      return [
+        {
+          defaultValue: defaults.get(name),
+          description: readDocComment(propertySourceFile, property),
+          name,
+          required: !(symbol.flags & ts.SymbolFlags.Optional),
+          type,
+        },
+      ];
+    });
+
+const resolveLiteralDefault = (
+  checker: ts.TypeChecker,
+  expression: ts.Expression,
+  visitedSymbols = new Set<ts.Symbol>()
+): string | undefined => {
+  let value = expression;
+
+  while (
+    ts.isAsExpression(value) ||
+    ts.isParenthesizedExpression(value) ||
+    ts.isSatisfiesExpression(value)
+  ) {
+    value = value.expression;
+  }
+
+  if (
+    ts.isStringLiteral(value) ||
+    ts.isNoSubstitutionTemplateLiteral(value) ||
+    ts.isNumericLiteral(value) ||
+    value.kind === ts.SyntaxKind.TrueKeyword ||
+    value.kind === ts.SyntaxKind.FalseKeyword ||
+    value.kind === ts.SyntaxKind.NullKeyword
+  ) {
+    return value.getText(value.getSourceFile());
+  }
+
+  if (!ts.isIdentifier(value)) {
+    return undefined;
+  }
+
+  let symbol = checker.getSymbolAtLocation(value);
+
+  if (!symbol) {
+    return undefined;
+  }
+
+  if (symbol.flags & ts.SymbolFlags.Alias) {
+    symbol = checker.getAliasedSymbol(symbol);
+  }
+
+  if (visitedSymbols.has(symbol)) {
+    return undefined;
+  }
+
+  visitedSymbols.add(symbol);
+
+  const declaration = symbol
+    .getDeclarations()
+    ?.find(
+      (item): item is ts.VariableDeclaration =>
+        ts.isVariableDeclaration(item) &&
+        Boolean(item.initializer) &&
+        ts.isVariableDeclarationList(item.parent) &&
+        Boolean(item.parent.flags & ts.NodeFlags.Const)
+    );
+
+  return declaration?.initializer
+    ? resolveLiteralDefault(checker, declaration.initializer, visitedSymbols)
+    : undefined;
+};
+
+const getParameterDefaults = (
+  checker: ts.TypeChecker,
+  sourceFile: ts.SourceFile,
+  declaration: ts.Declaration
+) => {
+  let parameter: ts.ParameterDeclaration | undefined;
+
+  if (ts.isFunctionDeclaration(declaration)) {
+    parameter = declaration.parameters[0];
+  } else if (ts.isVariableDeclaration(declaration)) {
+    let initializer = declaration.initializer;
+
+    while (
+      initializer &&
+      (ts.isAsExpression(initializer) ||
+        ts.isParenthesizedExpression(initializer) ||
+        ts.isSatisfiesExpression(initializer))
+    ) {
+      initializer = initializer.expression;
+    }
+
+    if (
+      initializer &&
+      (ts.isArrowFunction(initializer) || ts.isFunctionExpression(initializer))
+    ) {
+      parameter = initializer.parameters[0];
+    }
+  }
+
+  if (!parameter || !ts.isObjectBindingPattern(parameter.name)) {
+    return new Map<string, string>();
+  }
+
+  return new Map(
+    parameter.name.elements.flatMap((element): [string, string][] => {
+      if (!element.initializer || element.dotDotDotToken) {
+        return [];
+      }
+
+      const propertyName = element.propertyName ?? element.name;
+
+      if (!ts.isIdentifier(propertyName) && !ts.isStringLiteral(propertyName)) {
+        return [];
+      }
+
+      return [
+        [
+          propertyName.text,
+          resolveLiteralDefault(checker, element.initializer) ??
+            element.initializer.getText(sourceFile),
+        ],
+      ];
+    })
+  );
+};
+
+const getDisplayName = (
+  sourceFile: ts.SourceFile,
+  componentName: string,
+  declaration: ts.Declaration
+) => {
+  if (ts.isClassDeclaration(declaration)) {
+    const displayName = declaration.members.find(
+      (member): member is ts.PropertyDeclaration =>
+        ts.isPropertyDeclaration(member) &&
+        member.modifiers?.some(
+          (modifier) => modifier.kind === ts.SyntaxKind.StaticKeyword
+        ) === true &&
+        ts.isIdentifier(member.name) &&
+        member.name.text === 'displayName'
+    )?.initializer;
+
+    if (displayName && ts.isStringLiteral(displayName)) {
+      return displayName.text;
+    }
+  }
+
+  for (const statement of sourceFile.statements) {
+    if (!ts.isExpressionStatement(statement)) {
+      continue;
+    }
+
+    const expression = statement.expression;
+
+    if (
+      ts.isBinaryExpression(expression) &&
+      expression.operatorToken.kind === ts.SyntaxKind.EqualsToken &&
+      ts.isPropertyAccessExpression(expression.left) &&
+      ts.isIdentifier(expression.left.expression) &&
+      expression.left.expression.text === componentName &&
+      expression.left.name.text === 'displayName' &&
+      ts.isStringLiteral(expression.right)
+    ) {
+      return expression.right.text;
+    }
+  }
+
+  return componentName;
+};
+
+const extractExtendsAttributes = (description: string) => {
+  const extendsAttributes: ExtendsAttribute[] = [];
+  const lines = description.split('\n').filter((line) => {
+    if (!line.startsWith('@extends ')) {
+      return true;
+    }
+
+    const parts = line.slice('@extends '.length).split(' ');
+    const link = parts.pop();
+
+    if (link) {
+      extendsAttributes.push({
+        link,
+        name: parts.join(' '),
+      });
+    }
+
+    return false;
+  });
+
+  return {
+    description: lines.join('\n').trim(),
+    extendsAttributes,
+  };
+};
+
+export const createComponentParser = (tsconfigPath: string) => {
+  const config = ts.readConfigFile(tsconfigPath, ts.sys.readFile);
+
+  if (config.error) {
+    throw new Error(
+      ts.flattenDiagnosticMessageText(config.error.messageText, '\n')
+    );
+  }
+
+  const parsedConfig = ts.parseJsonConfigFileContent(
+    config.config,
+    ts.sys,
+    path.dirname(tsconfigPath)
+  );
+  const program = ts.createProgram(
+    parsedConfig.fileNames,
+    parsedConfig.options
+  );
+  const checker = program.getTypeChecker();
+
+  return (sourceRootDir: string, page: ComponentPageConfig): ComponentDoc => {
+    const sourcePath = path.join(sourceRootDir, `${page.source}.tsx`);
+    const sourceFile = program.getSourceFile(sourcePath);
+
+    if (!sourceFile || !fs.existsSync(sourcePath)) {
+      return fail(
+        sourcePath,
+        'source file was not found in the TypeScript program'
+      );
+    }
+
+    const componentName = page.component ?? getDefaultExportName(sourceFile);
+    const component = findComponentDeclaration(sourceFile, componentName);
+    const propsType = findPropsType(
+      sourceFile,
+      page.props ?? DEFAULT_PROPS_TYPE
+    );
+    validatePropsType(sourceFile, propsType);
+    const defaults = getParameterDefaults(
+      checker,
+      sourceFile,
+      component.declaration
+    );
+    const props = getProps(
+      checker,
+      sourceRootDir,
+      sourceFile,
+      propsType,
+      defaults
+    );
+    const componentDocs = extractExtendsAttributes(
+      readDocComment(sourceFile, component.docNode)
+    );
+
+    if (!componentDocs.description) {
+      return fail(
+        sourcePath,
+        `component ${componentName} must have a JSDoc comment`
+      );
+    }
+
+    return {
+      ...componentDocs,
+      props,
+      title:
+        page.title ??
+        getDisplayName(sourceFile, componentName, component.declaration),
+    };
+  };
+};
diff --git a/docs/plugins/component-docs/render.ts b/docs/plugins/component-docs/render.ts
new file mode 100644
index 0000000000..0b023f696f
--- /dev/null
+++ b/docs/plugins/component-docs/render.ts
@@ -0,0 +1,191 @@
+import path from 'node:path';
+
+import type { ComponentDoc, ComponentProp } from './types.ts';
+
+type CustomFields = {
+  extendedExamples: Record<string, unknown>;
+  knownIssues: Record<string, Record<string, string>>;
+  moreExamples: Record<string, Record<string, string>>;
+  screenshots: Record<string, unknown>;
+  themeColors: Record<string, unknown>;
+};
+
+const renderBadge = (type: string, label: string) =>
+  `<span class="badge badge-${type}"><span class="badge-text">${label}</span></span>`;
+
+const extractLeadingBadges = (description: string) => {
+  const badges: string[] = [];
+  const lines = description.split('\n');
+
+  while (lines[0]?.startsWith('@')) {
+    const match = /^@(\S+)\s+(.+)$/.exec(lines[0]);
+
+    const type = match?.[1];
+    const label = match?.[2];
+
+    if (!type || !label || type === 'optional') {
+      lines.shift();
+      continue;
+    }
+
+    badges.push(renderBadge(type, label));
+    lines.shift();
+  }
+
+  return {
+    badges,
+    description: lines
+      .join('\n')
+      .replace(/@optional\b/g, '')
+      .replace(/@(supported|renamed)\s+([^\n]+)/g, (_, type, label) =>
+        renderBadge(type, label)
+      )
+      .trim(),
+  };
+};
+
+const renderProp = (prop: ComponentProp) => {
+  if (prop.description.includes('@internal')) {
+    return '';
+  }
+
+  const { badges, description } = extractLeadingBadges(prop.description);
+
+  return `
+### ${prop.name}${prop.required ? ' (required)' : ''}${badges.length ? ` ${badges.join(' ')}` : ''}
+
+<PropTable
+  type={${JSON.stringify(prop.type)}}
+  description={${JSON.stringify(description)}}
+  ${prop.defaultValue ? `defaultValue={${JSON.stringify(prop.defaultValue)}}` : ''}
+/>
+`;
+};
+
+const renderLinkList = (
+  title: string,
+  links: Record<string, string> | undefined
+) => {
+  if (!links) {
+    return '';
+  }
+
+  return `
+## ${title}
+
+<details>
+  <summary>Toggle to grab more examples</summary>
+  <ul>
+    ${Object.entries(links)
+      .map(([label, href]) => `<li><a href="${href}">${label}</a></li>`)
+      .join('\n    ')}
+  </ul>
+</details>
+`;
+};
+
+const resolveRelativeLinks = (
+  content: string,
+  routePath: string,
+  routes: ReadonlySet<string>
+) =>
+  content.replace(
+    /\]\((?!https?:\/\/|mailto:|#|\/)([^)\s]+)([^)]*)\)/g,
+    (_link, href: string, suffix: string) => {
+      const [pathname, hash = ''] = href.split('#');
+      const resolvedPath = path.posix.resolve(
+        path.posix.dirname(routePath),
+        pathname
+      );
+      const directoryPage = `${resolvedPath}/${path.posix.basename(
+        resolvedPath
+      )}`;
+      const target = routes.has(resolvedPath)
+        ? resolvedPath
+        : routes.has(directoryPage)
+          ? directoryPage
+          : undefined;
+
+      if (!target) {
+        throw new Error(
+          `Unable to generate docs for ${routePath}: relative link ${href} does not match a component page`
+        );
+      }
+
+      return `](${target}${hash ? `#${hash}` : ''}${suffix})`;
+    }
+  );
+
+export const renderComponentPage = (
+  doc: ComponentDoc,
+  customFields: CustomFields,
+  routePath: string,
+  routes: ReadonlySet<string>
+) => {
+  const summaryMatch = /([\s\S]*?)## Usage/.exec(doc.description);
+  const summary = summaryMatch?.[1] ?? '';
+  const usage = summaryMatch
+    ? doc.description.slice(summary.length)
+    : doc.description;
+  const screenshot = customFields.screenshots[doc.title];
+  const extendedExample = customFields.extendedExamples[doc.title];
+  const extendedExampleTitle =
+    extendedExample && typeof extendedExample === 'object'
+      ? Object.keys(extendedExample)[0]
+      : undefined;
+  const themeColors = customFields.themeColors[doc.title];
+
+  const content = `
+---
+title: ${doc.title}
+---
+
+import PropTable from '@docs/components/PropTable.tsx';
+import ExtendsLink from '@docs/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@docs/components/ExtendedExample.tsx';
+
+${summary}
+
+${screenshot ? `<ScreenshotTabs screenshotData={${JSON.stringify(screenshot)}} />` : ''}
+
+${usage}
+
+${
+  extendedExample
+    ? `${extendedExampleTitle ? `### ${extendedExampleTitle}\n\n` : ''}<ExtendedExample extendedExamplesData={${JSON.stringify(extendedExample)}} />`
+    : ''
+}
+
+## Props
+
+${doc.extendsAttributes
+  .map(
+    (attribute) =>
+      `<ExtendsLink name={${JSON.stringify(attribute.name)}} link={${JSON.stringify(attribute.link)}} />`
+  )
+  .join('\n')}
+
+${doc.props.map(renderProp).join('\n')}
+
+${renderLinkList('More Examples', customFields.moreExamples[doc.title])}
+
+${
+  themeColors
+    ? `## Theme colors
+
+<ThemeColorsTable themeColorsData={${JSON.stringify(themeColors)}} componentName={${JSON.stringify(doc.title)}} />`
+    : ''
+}
+
+${renderLinkList('Known Issues', customFields.knownIssues[doc.title])}
+`
+    .slice(1)
+    .replaceAll('</br>', '<br />')
+    .split('\n')
+    .map((line) => line.trimEnd())
+    .join('\n');
+
+  return resolveRelativeLinks(content, routePath, routes);
+};
diff --git a/docs/plugins/component-docs/types.ts b/docs/plugins/component-docs/types.ts
new file mode 100644
index 0000000000..e48b70e8a6
--- /dev/null
+++ b/docs/plugins/component-docs/types.ts
@@ -0,0 +1,26 @@
+export type ComponentPageConfig = {
+  source: string;
+  component?: string;
+  props?: string;
+  title?: string;
+};
+
+export type ComponentProp = {
+  defaultValue?: string;
+  description: string;
+  name: string;
+  required: boolean;
+  type: string;
+};
+
+export type ExtendsAttribute = {
+  link: string;
+  name: string;
+};
+
+export type ComponentDoc = {
+  description: string;
+  extendsAttributes: ExtendsAttribute[];
+  props: ComponentProp[];
+  title: string;
+};
diff --git a/docs/plugins/docusaurus-react-native-plugin.js b/docs/plugins/docusaurus-react-native-plugin.js
deleted file mode 100644
index 3a05c223bc..0000000000
--- a/docs/plugins/docusaurus-react-native-plugin.js
+++ /dev/null
@@ -1,23 +0,0 @@
-const path = require('path');
-
-module.exports = function () {
-  return {
-    name: 'docusaurus-react-native-plugin',
-    configureWebpack() {
-      return {
-        mergeStrategy: { 'resolve.extensions': 'prepend' },
-        resolve: {
-          alias: {
-            react: path.resolve('node_modules/react'),
-            'react-native$': 'react-native-web',
-            'react-native-paper': path.resolve('../src'),
-            'react-native-vector-icons/MaterialCommunityIcons': path.resolve(
-              'node_modules/@react-native-vector-icons/material-design-icons'
-            ),
-          },
-          extensions: ['.web.js'],
-        },
-      };
-    },
-  };
-};
diff --git a/docs/static/.nojekyll b/docs/public/.nojekyll
similarity index 100%
rename from docs/static/.nojekyll
rename to docs/public/.nojekyll
diff --git a/docs/static/gallery/appbar-dark.png b/docs/public/gallery/appbar-dark.png
similarity index 100%
rename from docs/static/gallery/appbar-dark.png
rename to docs/public/gallery/appbar-dark.png
diff --git a/docs/static/gallery/appbar.png b/docs/public/gallery/appbar.png
similarity index 100%
rename from docs/static/gallery/appbar.png
rename to docs/public/gallery/appbar.png
diff --git a/docs/static/gallery/bottom-navigation-dark.png b/docs/public/gallery/bottom-navigation-dark.png
similarity index 100%
rename from docs/static/gallery/bottom-navigation-dark.png
rename to docs/public/gallery/bottom-navigation-dark.png
diff --git a/docs/static/gallery/bottom-navigation.png b/docs/public/gallery/bottom-navigation.png
similarity index 100%
rename from docs/static/gallery/bottom-navigation.png
rename to docs/public/gallery/bottom-navigation.png
diff --git a/docs/static/gallery/button-dark.png b/docs/public/gallery/button-dark.png
similarity index 100%
rename from docs/static/gallery/button-dark.png
rename to docs/public/gallery/button-dark.png
diff --git a/docs/static/gallery/button.png b/docs/public/gallery/button.png
similarity index 100%
rename from docs/static/gallery/button.png
rename to docs/public/gallery/button.png
diff --git a/docs/static/gallery/card-dark.png b/docs/public/gallery/card-dark.png
similarity index 100%
rename from docs/static/gallery/card-dark.png
rename to docs/public/gallery/card-dark.png
diff --git a/docs/static/gallery/card.png b/docs/public/gallery/card.png
similarity index 100%
rename from docs/static/gallery/card.png
rename to docs/public/gallery/card.png
diff --git a/docs/static/gallery/chip-dark.png b/docs/public/gallery/chip-dark.png
similarity index 100%
rename from docs/static/gallery/chip-dark.png
rename to docs/public/gallery/chip-dark.png
diff --git a/docs/static/gallery/chip.png b/docs/public/gallery/chip.png
similarity index 100%
rename from docs/static/gallery/chip.png
rename to docs/public/gallery/chip.png
diff --git a/docs/static/gallery/fab-dark.png b/docs/public/gallery/fab-dark.png
similarity index 100%
rename from docs/static/gallery/fab-dark.png
rename to docs/public/gallery/fab-dark.png
diff --git a/docs/static/gallery/fab.png b/docs/public/gallery/fab.png
similarity index 100%
rename from docs/static/gallery/fab.png
rename to docs/public/gallery/fab.png
diff --git a/docs/static/gallery/input-dark.png b/docs/public/gallery/input-dark.png
similarity index 100%
rename from docs/static/gallery/input-dark.png
rename to docs/public/gallery/input-dark.png
diff --git a/docs/static/gallery/input.png b/docs/public/gallery/input.png
similarity index 100%
rename from docs/static/gallery/input.png
rename to docs/public/gallery/input.png
diff --git a/docs/static/gallery/list-accordion-dark.png b/docs/public/gallery/list-accordion-dark.png
similarity index 100%
rename from docs/static/gallery/list-accordion-dark.png
rename to docs/public/gallery/list-accordion-dark.png
diff --git a/docs/static/gallery/list-accordion.png b/docs/public/gallery/list-accordion.png
similarity index 100%
rename from docs/static/gallery/list-accordion.png
rename to docs/public/gallery/list-accordion.png
diff --git a/docs/static/gallery/list-dark.png b/docs/public/gallery/list-dark.png
similarity index 100%
rename from docs/static/gallery/list-dark.png
rename to docs/public/gallery/list-dark.png
diff --git a/docs/static/gallery/list.png b/docs/public/gallery/list.png
similarity index 100%
rename from docs/static/gallery/list.png
rename to docs/public/gallery/list.png
diff --git a/docs/static/gallery/searchbar-dark.png b/docs/public/gallery/searchbar-dark.png
similarity index 100%
rename from docs/static/gallery/searchbar-dark.png
rename to docs/public/gallery/searchbar-dark.png
diff --git a/docs/static/gallery/searchbar.png b/docs/public/gallery/searchbar.png
similarity index 100%
rename from docs/static/gallery/searchbar.png
rename to docs/public/gallery/searchbar.png
diff --git a/docs/static/gallery/snackbar-dark.png b/docs/public/gallery/snackbar-dark.png
similarity index 100%
rename from docs/static/gallery/snackbar-dark.png
rename to docs/public/gallery/snackbar-dark.png
diff --git a/docs/static/gallery/snackbar.png b/docs/public/gallery/snackbar.png
similarity index 100%
rename from docs/static/gallery/snackbar.png
rename to docs/public/gallery/snackbar.png
diff --git a/docs/static/gallery/toggle-button.png b/docs/public/gallery/toggle-button.png
similarity index 100%
rename from docs/static/gallery/toggle-button.png
rename to docs/public/gallery/toggle-button.png
diff --git a/docs/static/gallery/typography-dark.png b/docs/public/gallery/typography-dark.png
similarity index 100%
rename from docs/static/gallery/typography-dark.png
rename to docs/public/gallery/typography-dark.png
diff --git a/docs/static/gallery/typography.png b/docs/public/gallery/typography.png
similarity index 100%
rename from docs/static/gallery/typography.png
rename to docs/public/gallery/typography.png
diff --git a/docs/static/images/expo-qr.png b/docs/public/images/expo-qr.png
similarity index 100%
rename from docs/static/images/expo-qr.png
rename to docs/public/images/expo-qr.png
diff --git a/docs/static/images/favicon.ico b/docs/public/images/favicon.ico
similarity index 100%
rename from docs/static/images/favicon.ico
rename to docs/public/images/favicon.ico
diff --git a/docs/public/images/home/accessibility.svg b/docs/public/images/home/accessibility.svg
new file mode 100644
index 0000000000..4b4aabefe5
--- /dev/null
+++ b/docs/public/images/home/accessibility.svg
@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="16" cy="7" r="3" stroke="#7C4DFF" stroke-width="2"/>
+  <path d="M10 13H22" stroke="#7C4DFF" stroke-width="2" stroke-linecap="round"/>
+  <path d="M16 13V25" stroke="#7C4DFF" stroke-width="2" stroke-linecap="round"/>
+  <path d="M16 16L11 25" stroke="#7C4DFF" stroke-width="2" stroke-linecap="round"/>
+  <path d="M16 16L21 25" stroke="#7C4DFF" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/docs/public/images/home/components.svg b/docs/public/images/home/components.svg
new file mode 100644
index 0000000000..69bd14f161
--- /dev/null
+++ b/docs/public/images/home/components.svg
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="5" y="6" width="9" height="9" rx="2" stroke="#7C4DFF" stroke-width="2"/>
+  <rect x="18" y="6" width="9" height="9" rx="2" stroke="#7C4DFF" stroke-width="2"/>
+  <rect x="5" y="18" width="9" height="9" rx="2" stroke="#7C4DFF" stroke-width="2"/>
+  <rect x="18" y="18" width="9" height="9" rx="2" stroke="#7C4DFF" stroke-width="2"/>
+</svg>
diff --git a/docs/public/images/home/devices.svg b/docs/public/images/home/devices.svg
new file mode 100644
index 0000000000..6660a426b1
--- /dev/null
+++ b/docs/public/images/home/devices.svg
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="4" y="7" width="12" height="18" rx="2.5" stroke="#7C4DFF" stroke-width="2"/>
+  <rect x="19" y="4" width="9" height="24" rx="2.5" stroke="#7C4DFF" stroke-width="2"/>
+  <path d="M9 21H11" stroke="#7C4DFF" stroke-width="2" stroke-linecap="round"/>
+  <path d="M22.5 24H24.5" stroke="#7C4DFF" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/docs/public/images/home/moon.svg b/docs/public/images/home/moon.svg
new file mode 100644
index 0000000000..88edf2d9d9
--- /dev/null
+++ b/docs/public/images/home/moon.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M22.791 22.728C14.521 22.728 9.27295 14.165 13.058 7.24402C8.11095 8.57502 4.5 13.093 4.5 18.455C4.5 24.863 9.695 30.058 16.103 30.058C21.465 30.058 25.983 26.447 27.314 21.5C25.928 22.257 24.391 22.728 22.791 22.728Z" stroke="#7C4DFF" stroke-width="2" stroke-linejoin="round"/>
+</svg>
diff --git a/docs/public/images/home/palette.svg b/docs/public/images/home/palette.svg
new file mode 100644
index 0000000000..7cd25bc873
--- /dev/null
+++ b/docs/public/images/home/palette.svg
@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16 5C10.477 5 6 9.132 6 14.229C6 17.896 8.57 21.065 12.286 22.53C13.264 22.915 14 23.744 14 24.779V25.229C14 26.759 15.241 28 16.771 28H18C22.971 28 27 24.195 27 19.5C27 11.492 22.299 5 16 5Z" stroke="#7C4DFF" stroke-width="2"/>
+  <circle cx="11" cy="14" r="1.5" fill="#7C4DFF"/>
+  <circle cx="15" cy="10.5" r="1.5" fill="#7C4DFF"/>
+  <circle cx="20" cy="12" r="1.5" fill="#7C4DFF"/>
+  <circle cx="21" cy="18" r="1.5" fill="#7C4DFF"/>
+</svg>
diff --git a/docs/public/images/home/versions.svg b/docs/public/images/home/versions.svg
new file mode 100644
index 0000000000..76c32cfc9d
--- /dev/null
+++ b/docs/public/images/home/versions.svg
@@ -0,0 +1,8 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="7" y="6" width="18" height="6" rx="2" stroke="#7C4DFF" stroke-width="2"/>
+  <rect x="7" y="13" width="18" height="6" rx="2" stroke="#7C4DFF" stroke-width="2"/>
+  <rect x="7" y="20" width="18" height="6" rx="2" stroke="#7C4DFF" stroke-width="2"/>
+  <path d="M12 9H16" stroke="#7C4DFF" stroke-width="2" stroke-linecap="round"/>
+  <path d="M12 16H20" stroke="#7C4DFF" stroke-width="2" stroke-linecap="round"/>
+  <path d="M12 23H18" stroke="#7C4DFF" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/docs/static/images/paper-logo.svg b/docs/public/images/paper-logo.svg
similarity index 100%
rename from docs/static/images/paper-logo.svg
rename to docs/public/images/paper-logo.svg
diff --git a/docs/static/images/sidebar-logo.svg b/docs/public/images/sidebar-logo.svg
similarity index 100%
rename from docs/static/images/sidebar-logo.svg
rename to docs/public/images/sidebar-logo.svg
diff --git a/docs/static/migration/color-palette.png b/docs/public/migration/color-palette.png
similarity index 100%
rename from docs/static/migration/color-palette.png
rename to docs/public/migration/color-palette.png
diff --git a/docs/static/screenshots/activity-indicator.gif b/docs/public/screenshots/activity-indicator.gif
similarity index 100%
rename from docs/static/screenshots/activity-indicator.gif
rename to docs/public/screenshots/activity-indicator.gif
diff --git a/docs/static/screenshots/animated-fab.gif b/docs/public/screenshots/animated-fab.gif
similarity index 100%
rename from docs/static/screenshots/animated-fab.gif
rename to docs/public/screenshots/animated-fab.gif
diff --git a/docs/static/screenshots/appbar-action-android.png b/docs/public/screenshots/appbar-action-android.png
similarity index 100%
rename from docs/static/screenshots/appbar-action-android.png
rename to docs/public/screenshots/appbar-action-android.png
diff --git a/docs/static/screenshots/appbar-backaction-android.png b/docs/public/screenshots/appbar-backaction-android.png
similarity index 100%
rename from docs/static/screenshots/appbar-backaction-android.png
rename to docs/public/screenshots/appbar-backaction-android.png
diff --git a/docs/static/screenshots/appbar-center-aligned.png b/docs/public/screenshots/appbar-center-aligned.png
similarity index 100%
rename from docs/static/screenshots/appbar-center-aligned.png
rename to docs/public/screenshots/appbar-center-aligned.png
diff --git a/docs/static/screenshots/appbar-content.png b/docs/public/screenshots/appbar-content.png
similarity index 100%
rename from docs/static/screenshots/appbar-content.png
rename to docs/public/screenshots/appbar-content.png
diff --git a/docs/static/screenshots/appbar-large.png b/docs/public/screenshots/appbar-large.png
similarity index 100%
rename from docs/static/screenshots/appbar-large.png
rename to docs/public/screenshots/appbar-large.png
diff --git a/docs/static/screenshots/appbar-medium.png b/docs/public/screenshots/appbar-medium.png
similarity index 100%
rename from docs/static/screenshots/appbar-medium.png
rename to docs/public/screenshots/appbar-medium.png
diff --git a/docs/static/screenshots/appbar-small.png b/docs/public/screenshots/appbar-small.png
similarity index 100%
rename from docs/static/screenshots/appbar-small.png
rename to docs/public/screenshots/appbar-small.png
diff --git a/docs/static/screenshots/appbar.png b/docs/public/screenshots/appbar.png
similarity index 100%
rename from docs/static/screenshots/appbar.png
rename to docs/public/screenshots/appbar.png
diff --git a/docs/static/screenshots/avatar-icon.png b/docs/public/screenshots/avatar-icon.png
similarity index 100%
rename from docs/static/screenshots/avatar-icon.png
rename to docs/public/screenshots/avatar-icon.png
diff --git a/docs/static/screenshots/avatar-image.png b/docs/public/screenshots/avatar-image.png
similarity index 100%
rename from docs/static/screenshots/avatar-image.png
rename to docs/public/screenshots/avatar-image.png
diff --git a/docs/static/screenshots/avatar-text.png b/docs/public/screenshots/avatar-text.png
similarity index 100%
rename from docs/static/screenshots/avatar-text.png
rename to docs/public/screenshots/avatar-text.png
diff --git a/docs/static/screenshots/badge-1.png b/docs/public/screenshots/badge-1.png
similarity index 100%
rename from docs/static/screenshots/badge-1.png
rename to docs/public/screenshots/badge-1.png
diff --git a/docs/static/screenshots/badge-2.png b/docs/public/screenshots/badge-2.png
similarity index 100%
rename from docs/static/screenshots/badge-2.png
rename to docs/public/screenshots/badge-2.png
diff --git a/docs/static/screenshots/badge-3.png b/docs/public/screenshots/badge-3.png
similarity index 100%
rename from docs/static/screenshots/badge-3.png
rename to docs/public/screenshots/badge-3.png
diff --git a/docs/static/screenshots/badge-example.png b/docs/public/screenshots/badge-example.png
similarity index 100%
rename from docs/static/screenshots/badge-example.png
rename to docs/public/screenshots/badge-example.png
diff --git a/docs/static/screenshots/badge-wrapper.png b/docs/public/screenshots/badge-wrapper.png
similarity index 100%
rename from docs/static/screenshots/badge-wrapper.png
rename to docs/public/screenshots/badge-wrapper.png
diff --git a/docs/static/screenshots/banner.gif b/docs/public/screenshots/banner.gif
similarity index 100%
rename from docs/static/screenshots/banner.gif
rename to docs/public/screenshots/banner.gif
diff --git a/docs/static/screenshots/bottom-navigation-shifting.gif b/docs/public/screenshots/bottom-navigation-shifting.gif
similarity index 100%
rename from docs/static/screenshots/bottom-navigation-shifting.gif
rename to docs/public/screenshots/bottom-navigation-shifting.gif
diff --git a/docs/static/screenshots/bottom-navigation-tabs.jpg b/docs/public/screenshots/bottom-navigation-tabs.jpg
similarity index 100%
rename from docs/static/screenshots/bottom-navigation-tabs.jpg
rename to docs/public/screenshots/bottom-navigation-tabs.jpg
diff --git a/docs/static/screenshots/bottom-navigation.gif b/docs/public/screenshots/bottom-navigation.gif
similarity index 100%
rename from docs/static/screenshots/bottom-navigation.gif
rename to docs/public/screenshots/bottom-navigation.gif
diff --git a/docs/static/screenshots/button-1.png b/docs/public/screenshots/button-1.png
similarity index 100%
rename from docs/static/screenshots/button-1.png
rename to docs/public/screenshots/button-1.png
diff --git a/docs/static/screenshots/button-2.png b/docs/public/screenshots/button-2.png
similarity index 100%
rename from docs/static/screenshots/button-2.png
rename to docs/public/screenshots/button-2.png
diff --git a/docs/static/screenshots/button-3.png b/docs/public/screenshots/button-3.png
similarity index 100%
rename from docs/static/screenshots/button-3.png
rename to docs/public/screenshots/button-3.png
diff --git a/docs/static/screenshots/button-4.png b/docs/public/screenshots/button-4.png
similarity index 100%
rename from docs/static/screenshots/button-4.png
rename to docs/public/screenshots/button-4.png
diff --git a/docs/static/screenshots/button-5.png b/docs/public/screenshots/button-5.png
similarity index 100%
rename from docs/static/screenshots/button-5.png
rename to docs/public/screenshots/button-5.png
diff --git a/docs/static/screenshots/card-1.png b/docs/public/screenshots/card-1.png
similarity index 100%
rename from docs/static/screenshots/card-1.png
rename to docs/public/screenshots/card-1.png
diff --git a/docs/static/screenshots/card-2.png b/docs/public/screenshots/card-2.png
similarity index 100%
rename from docs/static/screenshots/card-2.png
rename to docs/public/screenshots/card-2.png
diff --git a/docs/static/screenshots/card-3.png b/docs/public/screenshots/card-3.png
similarity index 100%
rename from docs/static/screenshots/card-3.png
rename to docs/public/screenshots/card-3.png
diff --git a/docs/static/screenshots/card-actions.png b/docs/public/screenshots/card-actions.png
similarity index 100%
rename from docs/static/screenshots/card-actions.png
rename to docs/public/screenshots/card-actions.png
diff --git a/docs/static/screenshots/card-content-example.png b/docs/public/screenshots/card-content-example.png
similarity index 100%
rename from docs/static/screenshots/card-content-example.png
rename to docs/public/screenshots/card-content-example.png
diff --git a/docs/static/screenshots/card-cover.png b/docs/public/screenshots/card-cover.png
similarity index 100%
rename from docs/static/screenshots/card-cover.png
rename to docs/public/screenshots/card-cover.png
diff --git a/docs/static/screenshots/card-title-1.png b/docs/public/screenshots/card-title-1.png
similarity index 100%
rename from docs/static/screenshots/card-title-1.png
rename to docs/public/screenshots/card-title-1.png
diff --git a/docs/static/screenshots/checkbox-disabled.android.png b/docs/public/screenshots/checkbox-disabled.android.png
similarity index 100%
rename from docs/static/screenshots/checkbox-disabled.android.png
rename to docs/public/screenshots/checkbox-disabled.android.png
diff --git a/docs/static/screenshots/checkbox-disabled.ios.png b/docs/public/screenshots/checkbox-disabled.ios.png
similarity index 100%
rename from docs/static/screenshots/checkbox-disabled.ios.png
rename to docs/public/screenshots/checkbox-disabled.ios.png
diff --git a/docs/static/screenshots/checkbox-enabled.android.png b/docs/public/screenshots/checkbox-enabled.android.png
similarity index 100%
rename from docs/static/screenshots/checkbox-enabled.android.png
rename to docs/public/screenshots/checkbox-enabled.android.png
diff --git a/docs/static/screenshots/checkbox-enabled.ios.png b/docs/public/screenshots/checkbox-enabled.ios.png
similarity index 100%
rename from docs/static/screenshots/checkbox-enabled.ios.png
rename to docs/public/screenshots/checkbox-enabled.ios.png
diff --git a/docs/static/screenshots/chip-1.png b/docs/public/screenshots/chip-1.png
similarity index 100%
rename from docs/static/screenshots/chip-1.png
rename to docs/public/screenshots/chip-1.png
diff --git a/docs/static/screenshots/chip-2.png b/docs/public/screenshots/chip-2.png
similarity index 100%
rename from docs/static/screenshots/chip-2.png
rename to docs/public/screenshots/chip-2.png
diff --git a/docs/static/screenshots/custom-colors.png b/docs/public/screenshots/custom-colors.png
similarity index 100%
rename from docs/static/screenshots/custom-colors.png
rename to docs/public/screenshots/custom-colors.png
diff --git a/docs/static/screenshots/data-table-full-width.png b/docs/public/screenshots/data-table-full-width.png
similarity index 100%
rename from docs/static/screenshots/data-table-full-width.png
rename to docs/public/screenshots/data-table-full-width.png
diff --git a/docs/static/screenshots/data-table-header.png b/docs/public/screenshots/data-table-header.png
similarity index 100%
rename from docs/static/screenshots/data-table-header.png
rename to docs/public/screenshots/data-table-header.png
diff --git a/docs/static/screenshots/data-table-pagination.png b/docs/public/screenshots/data-table-pagination.png
similarity index 100%
rename from docs/static/screenshots/data-table-pagination.png
rename to docs/public/screenshots/data-table-pagination.png
diff --git a/docs/static/screenshots/data-table-row-cell.png b/docs/public/screenshots/data-table-row-cell.png
similarity index 100%
rename from docs/static/screenshots/data-table-row-cell.png
rename to docs/public/screenshots/data-table-row-cell.png
diff --git a/docs/static/screenshots/dialog-1.png b/docs/public/screenshots/dialog-1.png
similarity index 100%
rename from docs/static/screenshots/dialog-1.png
rename to docs/public/screenshots/dialog-1.png
diff --git a/docs/static/screenshots/dialog-2.png b/docs/public/screenshots/dialog-2.png
similarity index 100%
rename from docs/static/screenshots/dialog-2.png
rename to docs/public/screenshots/dialog-2.png
diff --git a/docs/static/screenshots/dialog-actions.png b/docs/public/screenshots/dialog-actions.png
similarity index 100%
rename from docs/static/screenshots/dialog-actions.png
rename to docs/public/screenshots/dialog-actions.png
diff --git a/docs/static/screenshots/dialog-content.png b/docs/public/screenshots/dialog-content.png
similarity index 100%
rename from docs/static/screenshots/dialog-content.png
rename to docs/public/screenshots/dialog-content.png
diff --git a/docs/static/screenshots/dialog-icon.png b/docs/public/screenshots/dialog-icon.png
similarity index 100%
rename from docs/static/screenshots/dialog-icon.png
rename to docs/public/screenshots/dialog-icon.png
diff --git a/docs/static/screenshots/dialog-scroll-area.gif b/docs/public/screenshots/dialog-scroll-area.gif
similarity index 100%
rename from docs/static/screenshots/dialog-scroll-area.gif
rename to docs/public/screenshots/dialog-scroll-area.gif
diff --git a/docs/static/screenshots/dialog-title.png b/docs/public/screenshots/dialog-title.png
similarity index 100%
rename from docs/static/screenshots/dialog-title.png
rename to docs/public/screenshots/dialog-title.png
diff --git a/docs/static/screenshots/divider.png b/docs/public/screenshots/divider.png
similarity index 100%
rename from docs/static/screenshots/divider.png
rename to docs/public/screenshots/divider.png
diff --git a/docs/static/screenshots/dot-badges.png b/docs/public/screenshots/dot-badges.png
similarity index 100%
rename from docs/static/screenshots/dot-badges.png
rename to docs/public/screenshots/dot-badges.png
diff --git a/docs/static/screenshots/drawer-collapsed.png b/docs/public/screenshots/drawer-collapsed.png
similarity index 100%
rename from docs/static/screenshots/drawer-collapsed.png
rename to docs/public/screenshots/drawer-collapsed.png
diff --git a/docs/static/screenshots/drawer-item.png b/docs/public/screenshots/drawer-item.png
similarity index 100%
rename from docs/static/screenshots/drawer-item.png
rename to docs/public/screenshots/drawer-item.png
diff --git a/docs/static/screenshots/drawer-section.png b/docs/public/screenshots/drawer-section.png
similarity index 100%
rename from docs/static/screenshots/drawer-section.png
rename to docs/public/screenshots/drawer-section.png
diff --git a/docs/static/screenshots/fab-1.png b/docs/public/screenshots/fab-1.png
similarity index 100%
rename from docs/static/screenshots/fab-1.png
rename to docs/public/screenshots/fab-1.png
diff --git a/docs/static/screenshots/fab-2.png b/docs/public/screenshots/fab-2.png
similarity index 100%
rename from docs/static/screenshots/fab-2.png
rename to docs/public/screenshots/fab-2.png
diff --git a/docs/static/screenshots/fab-3.png b/docs/public/screenshots/fab-3.png
similarity index 100%
rename from docs/static/screenshots/fab-3.png
rename to docs/public/screenshots/fab-3.png
diff --git a/docs/static/screenshots/fab-4.png b/docs/public/screenshots/fab-4.png
similarity index 100%
rename from docs/static/screenshots/fab-4.png
rename to docs/public/screenshots/fab-4.png
diff --git a/docs/static/screenshots/fab-group.gif b/docs/public/screenshots/fab-group.gif
similarity index 100%
rename from docs/static/screenshots/fab-group.gif
rename to docs/public/screenshots/fab-group.gif
diff --git a/docs/static/screenshots/fab-group.png b/docs/public/screenshots/fab-group.png
similarity index 100%
rename from docs/static/screenshots/fab-group.png
rename to docs/public/screenshots/fab-group.png
diff --git a/docs/static/screenshots/helper-text.gif b/docs/public/screenshots/helper-text.gif
similarity index 100%
rename from docs/static/screenshots/helper-text.gif
rename to docs/public/screenshots/helper-text.gif
diff --git a/docs/static/screenshots/icon-button-1.png b/docs/public/screenshots/icon-button-1.png
similarity index 100%
rename from docs/static/screenshots/icon-button-1.png
rename to docs/public/screenshots/icon-button-1.png
diff --git a/docs/static/screenshots/icon-button-2.png b/docs/public/screenshots/icon-button-2.png
similarity index 100%
rename from docs/static/screenshots/icon-button-2.png
rename to docs/public/screenshots/icon-button-2.png
diff --git a/docs/static/screenshots/icon-button-3.png b/docs/public/screenshots/icon-button-3.png
similarity index 100%
rename from docs/static/screenshots/icon-button-3.png
rename to docs/public/screenshots/icon-button-3.png
diff --git a/docs/static/screenshots/icon-button-4.png b/docs/public/screenshots/icon-button-4.png
similarity index 100%
rename from docs/static/screenshots/icon-button-4.png
rename to docs/public/screenshots/icon-button-4.png
diff --git a/docs/static/screenshots/icon.png b/docs/public/screenshots/icon.png
similarity index 100%
rename from docs/static/screenshots/icon.png
rename to docs/public/screenshots/icon.png
diff --git a/docs/static/screenshots/list-accordion-1.png b/docs/public/screenshots/list-accordion-1.png
similarity index 100%
rename from docs/static/screenshots/list-accordion-1.png
rename to docs/public/screenshots/list-accordion-1.png
diff --git a/docs/static/screenshots/list-accordion-2.png b/docs/public/screenshots/list-accordion-2.png
similarity index 100%
rename from docs/static/screenshots/list-accordion-2.png
rename to docs/public/screenshots/list-accordion-2.png
diff --git a/docs/static/screenshots/list-accordion-3.png b/docs/public/screenshots/list-accordion-3.png
similarity index 100%
rename from docs/static/screenshots/list-accordion-3.png
rename to docs/public/screenshots/list-accordion-3.png
diff --git a/docs/static/screenshots/list-accordion-group.png b/docs/public/screenshots/list-accordion-group.png
similarity index 100%
rename from docs/static/screenshots/list-accordion-group.png
rename to docs/public/screenshots/list-accordion-group.png
diff --git a/docs/static/screenshots/list-icon.png b/docs/public/screenshots/list-icon.png
similarity index 100%
rename from docs/static/screenshots/list-icon.png
rename to docs/public/screenshots/list-icon.png
diff --git a/docs/static/screenshots/list-item-1.png b/docs/public/screenshots/list-item-1.png
similarity index 100%
rename from docs/static/screenshots/list-item-1.png
rename to docs/public/screenshots/list-item-1.png
diff --git a/docs/static/screenshots/list-item-2.png b/docs/public/screenshots/list-item-2.png
similarity index 100%
rename from docs/static/screenshots/list-item-2.png
rename to docs/public/screenshots/list-item-2.png
diff --git a/docs/static/screenshots/list-item-3.png b/docs/public/screenshots/list-item-3.png
similarity index 100%
rename from docs/static/screenshots/list-item-3.png
rename to docs/public/screenshots/list-item-3.png
diff --git a/docs/static/screenshots/list-section.png b/docs/public/screenshots/list-section.png
similarity index 100%
rename from docs/static/screenshots/list-section.png
rename to docs/public/screenshots/list-section.png
diff --git a/docs/static/screenshots/material-bottom-tabs.gif b/docs/public/screenshots/material-bottom-tabs.gif
similarity index 100%
rename from docs/static/screenshots/material-bottom-tabs.gif
rename to docs/public/screenshots/material-bottom-tabs.gif
diff --git a/docs/static/screenshots/menu-1.png b/docs/public/screenshots/menu-1.png
similarity index 100%
rename from docs/static/screenshots/menu-1.png
rename to docs/public/screenshots/menu-1.png
diff --git a/docs/static/screenshots/menu-2.png b/docs/public/screenshots/menu-2.png
similarity index 100%
rename from docs/static/screenshots/menu-2.png
rename to docs/public/screenshots/menu-2.png
diff --git a/docs/static/screenshots/menu-item.png b/docs/public/screenshots/menu-item.png
similarity index 100%
rename from docs/static/screenshots/menu-item.png
rename to docs/public/screenshots/menu-item.png
diff --git a/docs/static/screenshots/modal.gif b/docs/public/screenshots/modal.gif
similarity index 100%
rename from docs/static/screenshots/modal.gif
rename to docs/public/screenshots/modal.gif
diff --git a/docs/static/screenshots/progress-bar.png b/docs/public/screenshots/progress-bar.png
similarity index 100%
rename from docs/static/screenshots/progress-bar.png
rename to docs/public/screenshots/progress-bar.png
diff --git a/docs/static/screenshots/radio-button-group-android.gif b/docs/public/screenshots/radio-button-group-android.gif
similarity index 100%
rename from docs/static/screenshots/radio-button-group-android.gif
rename to docs/public/screenshots/radio-button-group-android.gif
diff --git a/docs/static/screenshots/radio-button-group-ios.gif b/docs/public/screenshots/radio-button-group-ios.gif
similarity index 100%
rename from docs/static/screenshots/radio-button-group-ios.gif
rename to docs/public/screenshots/radio-button-group-ios.gif
diff --git a/docs/static/screenshots/radio-disabled.android.png b/docs/public/screenshots/radio-disabled.android.png
similarity index 100%
rename from docs/static/screenshots/radio-disabled.android.png
rename to docs/public/screenshots/radio-disabled.android.png
diff --git a/docs/static/screenshots/radio-disabled.ios.png b/docs/public/screenshots/radio-disabled.ios.png
similarity index 100%
rename from docs/static/screenshots/radio-disabled.ios.png
rename to docs/public/screenshots/radio-disabled.ios.png
diff --git a/docs/static/screenshots/radio-enabled.android.png b/docs/public/screenshots/radio-enabled.android.png
similarity index 100%
rename from docs/static/screenshots/radio-enabled.android.png
rename to docs/public/screenshots/radio-enabled.android.png
diff --git a/docs/static/screenshots/radio-enabled.ios.png b/docs/public/screenshots/radio-enabled.ios.png
similarity index 100%
rename from docs/static/screenshots/radio-enabled.ios.png
rename to docs/public/screenshots/radio-enabled.ios.png
diff --git a/docs/static/screenshots/radio-item.ios.png b/docs/public/screenshots/radio-item.ios.png
similarity index 100%
rename from docs/static/screenshots/radio-item.ios.png
rename to docs/public/screenshots/radio-item.ios.png
diff --git a/docs/static/screenshots/react-navigation-appBar1.png b/docs/public/screenshots/react-navigation-appBar1.png
similarity index 100%
rename from docs/static/screenshots/react-navigation-appBar1.png
rename to docs/public/screenshots/react-navigation-appBar1.png
diff --git a/docs/static/screenshots/react-navigation-appBar2.gif b/docs/public/screenshots/react-navigation-appBar2.gif
similarity index 100%
rename from docs/static/screenshots/react-navigation-appBar2.gif
rename to docs/public/screenshots/react-navigation-appBar2.gif
diff --git a/docs/static/screenshots/react-navigation-appBar3.gif b/docs/public/screenshots/react-navigation-appBar3.gif
similarity index 100%
rename from docs/static/screenshots/react-navigation-appBar3.gif
rename to docs/public/screenshots/react-navigation-appBar3.gif
diff --git a/docs/static/screenshots/react-navigation-appBar4.gif b/docs/public/screenshots/react-navigation-appBar4.gif
similarity index 100%
rename from docs/static/screenshots/react-navigation-appBar4.gif
rename to docs/public/screenshots/react-navigation-appBar4.gif
diff --git a/docs/static/screenshots/searchbar-view.png b/docs/public/screenshots/searchbar-view.png
similarity index 100%
rename from docs/static/screenshots/searchbar-view.png
rename to docs/public/screenshots/searchbar-view.png
diff --git a/docs/static/screenshots/searchbar.png b/docs/public/screenshots/searchbar.png
similarity index 100%
rename from docs/static/screenshots/searchbar.png
rename to docs/public/screenshots/searchbar.png
diff --git a/docs/static/screenshots/segmented-button-multi-select.png b/docs/public/screenshots/segmented-button-multi-select.png
similarity index 100%
rename from docs/static/screenshots/segmented-button-multi-select.png
rename to docs/public/screenshots/segmented-button-multi-select.png
diff --git a/docs/static/screenshots/segmented-button-single-select.png b/docs/public/screenshots/segmented-button-single-select.png
similarity index 100%
rename from docs/static/screenshots/segmented-button-single-select.png
rename to docs/public/screenshots/segmented-button-single-select.png
diff --git a/docs/static/screenshots/segmentedbuttons.gif b/docs/public/screenshots/segmentedbuttons.gif
similarity index 100%
rename from docs/static/screenshots/segmentedbuttons.gif
rename to docs/public/screenshots/segmentedbuttons.gif
diff --git a/docs/static/screenshots/snackbar.gif b/docs/public/screenshots/snackbar.gif
similarity index 100%
rename from docs/static/screenshots/snackbar.gif
rename to docs/public/screenshots/snackbar.gif
diff --git a/docs/static/screenshots/surface-elevated-full-width.png b/docs/public/screenshots/surface-elevated-full-width.png
similarity index 100%
rename from docs/static/screenshots/surface-elevated-full-width.png
rename to docs/public/screenshots/surface-elevated-full-width.png
diff --git a/docs/static/screenshots/surface-flat-full-width.png b/docs/public/screenshots/surface-flat-full-width.png
similarity index 100%
rename from docs/static/screenshots/surface-flat-full-width.png
rename to docs/public/screenshots/surface-flat-full-width.png
diff --git a/docs/static/screenshots/switch-disabled.android.png b/docs/public/screenshots/switch-disabled.android.png
similarity index 100%
rename from docs/static/screenshots/switch-disabled.android.png
rename to docs/public/screenshots/switch-disabled.android.png
diff --git a/docs/static/screenshots/switch-disabled.ios.png b/docs/public/screenshots/switch-disabled.ios.png
similarity index 100%
rename from docs/static/screenshots/switch-disabled.ios.png
rename to docs/public/screenshots/switch-disabled.ios.png
diff --git a/docs/static/screenshots/switch-enabled.android.png b/docs/public/screenshots/switch-enabled.android.png
similarity index 100%
rename from docs/static/screenshots/switch-enabled.android.png
rename to docs/public/screenshots/switch-enabled.android.png
diff --git a/docs/static/screenshots/switch-enabled.ios.png b/docs/public/screenshots/switch-enabled.ios.png
similarity index 100%
rename from docs/static/screenshots/switch-enabled.ios.png
rename to docs/public/screenshots/switch-enabled.ios.png
diff --git a/docs/static/screenshots/text-badges.png b/docs/public/screenshots/text-badges.png
similarity index 100%
rename from docs/static/screenshots/text-badges.png
rename to docs/public/screenshots/text-badges.png
diff --git a/docs/public/screenshots/text-input-filled.png b/docs/public/screenshots/text-input-filled.png
new file mode 100644
index 0000000000..03ab10d37e
Binary files /dev/null and b/docs/public/screenshots/text-input-filled.png differ
diff --git a/docs/public/screenshots/text-input-outlined.png b/docs/public/screenshots/text-input-outlined.png
new file mode 100644
index 0000000000..1abb39e072
Binary files /dev/null and b/docs/public/screenshots/text-input-outlined.png differ
diff --git a/docs/static/screenshots/themingWithReactNavigationDarkLightSwitch.gif b/docs/public/screenshots/themingWithReactNavigationDarkLightSwitch.gif
similarity index 100%
rename from docs/static/screenshots/themingWithReactNavigationDarkLightSwitch.gif
rename to docs/public/screenshots/themingWithReactNavigationDarkLightSwitch.gif
diff --git a/docs/static/screenshots/toggle-button-group.gif b/docs/public/screenshots/toggle-button-group.gif
similarity index 100%
rename from docs/static/screenshots/toggle-button-group.gif
rename to docs/public/screenshots/toggle-button-group.gif
diff --git a/docs/static/screenshots/toggle-button-row.gif b/docs/public/screenshots/toggle-button-row.gif
similarity index 100%
rename from docs/static/screenshots/toggle-button-row.gif
rename to docs/public/screenshots/toggle-button-row.gif
diff --git a/docs/static/screenshots/toggle-button.png b/docs/public/screenshots/toggle-button.png
similarity index 100%
rename from docs/static/screenshots/toggle-button.png
rename to docs/public/screenshots/toggle-button.png
diff --git a/docs/static/screenshots/tooltip.png b/docs/public/screenshots/tooltip.png
similarity index 100%
rename from docs/static/screenshots/tooltip.png
rename to docs/public/screenshots/tooltip.png
diff --git a/docs/static/screenshots/tooltips.gif b/docs/public/screenshots/tooltips.gif
similarity index 100%
rename from docs/static/screenshots/tooltips.gif
rename to docs/public/screenshots/tooltips.gif
diff --git a/docs/static/screenshots/touchable-ripple.gif b/docs/public/screenshots/touchable-ripple.gif
similarity index 100%
rename from docs/static/screenshots/touchable-ripple.gif
rename to docs/public/screenshots/touchable-ripple.gif
diff --git a/docs/static/screenshots/typography.png b/docs/public/screenshots/typography.png
similarity index 100%
rename from docs/static/screenshots/typography.png
rename to docs/public/screenshots/typography.png
diff --git a/docs/static/showcase/appngo.png b/docs/public/showcase/appngo.png
similarity index 100%
rename from docs/static/showcase/appngo.png
rename to docs/public/showcase/appngo.png
diff --git a/docs/static/showcase/astrale.png b/docs/public/showcase/astrale.png
similarity index 100%
rename from docs/static/showcase/astrale.png
rename to docs/public/showcase/astrale.png
diff --git a/docs/static/showcase/bluebirding.png b/docs/public/showcase/bluebirding.png
similarity index 100%
rename from docs/static/showcase/bluebirding.png
rename to docs/public/showcase/bluebirding.png
diff --git a/docs/static/showcase/clutch.png b/docs/public/showcase/clutch.png
similarity index 100%
rename from docs/static/showcase/clutch.png
rename to docs/public/showcase/clutch.png
diff --git a/docs/static/showcase/crazythursday.jpg b/docs/public/showcase/crazythursday.jpg
similarity index 100%
rename from docs/static/showcase/crazythursday.jpg
rename to docs/public/showcase/crazythursday.jpg
diff --git a/docs/static/showcase/darkhackernews.png b/docs/public/showcase/darkhackernews.png
similarity index 100%
rename from docs/static/showcase/darkhackernews.png
rename to docs/public/showcase/darkhackernews.png
diff --git a/docs/static/showcase/groovy.png b/docs/public/showcase/groovy.png
similarity index 100%
rename from docs/static/showcase/groovy.png
rename to docs/public/showcase/groovy.png
diff --git a/docs/static/showcase/homeworkhelper.png b/docs/public/showcase/homeworkhelper.png
similarity index 100%
rename from docs/static/showcase/homeworkhelper.png
rename to docs/public/showcase/homeworkhelper.png
diff --git a/docs/static/showcase/lyracollect.png b/docs/public/showcase/lyracollect.png
similarity index 100%
rename from docs/static/showcase/lyracollect.png
rename to docs/public/showcase/lyracollect.png
diff --git a/docs/static/showcase/moonmeet.png b/docs/public/showcase/moonmeet.png
similarity index 100%
rename from docs/static/showcase/moonmeet.png
rename to docs/public/showcase/moonmeet.png
diff --git a/docs/static/showcase/pandadeals.png b/docs/public/showcase/pandadeals.png
similarity index 100%
rename from docs/static/showcase/pandadeals.png
rename to docs/public/showcase/pandadeals.png
diff --git a/docs/static/showcase/paper.png b/docs/public/showcase/paper.png
similarity index 100%
rename from docs/static/showcase/paper.png
rename to docs/public/showcase/paper.png
diff --git a/docs/static/showcase/quakemap.png b/docs/public/showcase/quakemap.png
similarity index 100%
rename from docs/static/showcase/quakemap.png
rename to docs/public/showcase/quakemap.png
diff --git a/docs/static/showcase/racecalendar.png b/docs/public/showcase/racecalendar.png
similarity index 100%
rename from docs/static/showcase/racecalendar.png
rename to docs/public/showcase/racecalendar.png
diff --git a/docs/static/showcase/rozy.png b/docs/public/showcase/rozy.png
similarity index 100%
rename from docs/static/showcase/rozy.png
rename to docs/public/showcase/rozy.png
diff --git a/docs/static/showcase/showman.png b/docs/public/showcase/showman.png
similarity index 100%
rename from docs/static/showcase/showman.png
rename to docs/public/showcase/showman.png
diff --git a/docs/static/showcase/tracksnz.png b/docs/public/showcase/tracksnz.png
similarity index 100%
rename from docs/static/showcase/tracksnz.png
rename to docs/public/showcase/tracksnz.png
diff --git a/docs/static/showcase/unicore.png b/docs/public/showcase/unicore.png
similarity index 100%
rename from docs/static/showcase/unicore.png
rename to docs/public/showcase/unicore.png
diff --git a/docs/static/showcase/vibemap.png b/docs/public/showcase/vibemap.png
similarity index 100%
rename from docs/static/showcase/vibemap.png
rename to docs/public/showcase/vibemap.png
diff --git a/docs/static/showcase/weatherforecast.png b/docs/public/showcase/weatherforecast.png
similarity index 100%
rename from docs/static/showcase/weatherforecast.png
rename to docs/public/showcase/weatherforecast.png
diff --git a/docs/static/showcase/yummeals.png b/docs/public/showcase/yummeals.png
similarity index 100%
rename from docs/static/showcase/yummeals.png
rename to docs/public/showcase/yummeals.png
diff --git a/docs/static/showcase/zoomapto.png b/docs/public/showcase/zoomapto.png
similarity index 100%
rename from docs/static/showcase/zoomapto.png
rename to docs/public/showcase/zoomapto.png
diff --git a/docs/rspress.config.ts b/docs/rspress.config.ts
new file mode 100644
index 0000000000..7696c6230e
--- /dev/null
+++ b/docs/rspress.config.ts
@@ -0,0 +1,181 @@
+import { withCallstackPreset } from '@callstack/rspress-preset';
+import { defineConfig } from '@rspress/core';
+import { createRequire } from 'node:module';
+import path from 'node:path';
+
+import componentDocsConfig from './component-docs.config.ts';
+import { pluginComponentDocs } from './plugins/component-docs/index.ts';
+
+const REPO_NAME = 'react-native-paper';
+const REPO_ORG = 'callstack';
+
+const src = path.resolve(__dirname, 'src');
+
+const require = createRequire(import.meta.url);
+const resolve = (packageName: string) =>
+  path.dirname(require.resolve(`${packageName}/package.json`));
+
+const paper = path.resolve(__dirname, '..', 'src');
+
+export default withCallstackPreset(
+  {
+    context: __dirname,
+    docs: {
+      title: 'React Native Paper',
+      description: 'Material Design for React Native',
+      editUrl: `https://github.com/${REPO_ORG}/${REPO_NAME}/edit/main/docs`,
+      rootUrl: `https://${REPO_ORG}.github.io/${REPO_NAME}`,
+      icon: 'public/images/favicon.ico',
+      logoLight: `/${REPO_NAME}/images/sidebar-logo.svg`,
+      logoDark: `/${REPO_NAME}/images/sidebar-logo.svg`,
+      rootDir: '.',
+      socials: {
+        github: `https://github.com/${REPO_ORG}/${REPO_NAME}`,
+        discord: 'https://discord.gg/zwR2Cdh',
+        x: 'https://twitter.com/rn_paper',
+      },
+    },
+    theme: {
+      content: {
+        docFooterCTAHeadline: '',
+        docFooterCTAButtonText: '',
+        homeBannerHeadline: '',
+        homeBannerDescription: '',
+        homeBannerButtonText: '',
+        outlineCTAHeadline: '',
+        outlineCTADescription: '',
+        outlineCTAButtonText: '',
+      },
+      links: {
+        docFooterCTA: '',
+        homeBanner: '',
+        homeFooter: 'https://www.callstack.com',
+        outlineCTA: '',
+      },
+    },
+    vercelAnalytics: false,
+  },
+  defineConfig({
+    base: '/react-native-paper/',
+    outDir: 'build',
+    globalStyles: path.join(src, 'css', 'custom.css'),
+    multiVersion: {
+      default: '5.x',
+      versions: ['5.x', '6.x'],
+    },
+    plugins: [
+      pluginComponentDocs({
+        ...componentDocsConfig,
+        tsconfigPath: path.resolve(__dirname, '..', 'tsconfig.source.json'),
+        version: '6.x',
+      }),
+    ],
+    route: {
+      cleanUrls: true,
+      extensions: ['.md', '.mdx'],
+      include: ['5.x/**/*.{md,mdx}', '6.x/**/*.{md,mdx}'],
+      exclude: [
+        'src/**',
+        'scripts/**',
+        'public/**',
+        'build/**',
+        'test-results/**',
+        'tests/**',
+        'visual/**',
+        'README.md',
+      ],
+    },
+    search: {
+      versioned: true,
+      codeBlocks: true,
+    },
+    i18nSource: (source) => ({
+      ...source,
+      outlineTitle: {
+        ...source.outlineTitle,
+        en: 'Contents',
+      },
+      searchNoResultsText: {
+        ...source.searchNoResultsText,
+        en: 'No results found, try something different than',
+      },
+      searchSuggestedQueryText: {
+        ...source.searchSuggestedQueryText,
+        en: '',
+      },
+      'overview.filterNameText': {
+        ...source['overview.filterNameText'],
+        en: '',
+      },
+    }),
+    builderConfig: {
+      source: {
+        exclude: [paper],
+      },
+      resolve: {
+        extensions: [
+          '.web.tsx',
+          '.web.ts',
+          '.web.jsx',
+          '.web.js',
+          '.tsx',
+          '.ts',
+          '.jsx',
+          '.js',
+          '.json',
+        ],
+        alias: {
+          '@docs': src,
+          react: resolve('react'),
+          'react-dom': resolve('react-dom'),
+          'react-native$': resolve('react-native-web'),
+          'react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle':
+            path.resolve(
+              resolve('react-native-web'),
+              'dist/exports/StyleSheet/compiler/createReactDOMStyle.js'
+            ),
+          'react-native-web/dist/exports/StyleSheet/preprocess': path.resolve(
+            resolve('react-native-web'),
+            'dist/exports/StyleSheet/preprocess.js'
+          ),
+          'react-native-paper': paper,
+        },
+      },
+      tools: {
+        rspack(config, { isDev, rspack }) {
+          config.module.rules = [
+            ...(config.module.rules ?? []),
+            {
+              test: /\.[jt]sx?$/,
+              include: [paper],
+              use: {
+                loader: require.resolve('babel-loader'),
+                options: {
+                  babelrc: false,
+                  configFile: false,
+                  presets: [require.resolve('@react-native/babel-preset')],
+                  plugins: [require.resolve('react-native-reanimated/plugin')],
+                },
+              },
+            },
+          ];
+
+          config.plugins.push(
+            new rspack.DefinePlugin({
+              __DEV__: JSON.stringify(isDev),
+              'process.env.JEST_WORKER_ID': 'undefined',
+              'process.env.NODE_ENV': JSON.stringify(
+                isDev ? 'development' : 'production'
+              ),
+            })
+          );
+
+          config.ignoreWarnings = [
+            ...(config.ignoreWarnings ?? []),
+            /Can't resolve '@react-native-vector-icons\/get-image'/,
+          ];
+        },
+      },
+    },
+  })
+);
diff --git a/docs/scripts/generate-5x-docs.ts b/docs/scripts/generate-5x-docs.ts
new file mode 100644
index 0000000000..437522678b
--- /dev/null
+++ b/docs/scripts/generate-5x-docs.ts
@@ -0,0 +1,526 @@
+import * as childProcess from 'node:child_process';
+import * as fs from 'node:fs';
+import { createRequire } from 'node:module';
+import * as os from 'node:os';
+import * as path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import * as vm from 'node:vm';
+
+type LegacyPages = Record<string, string | Record<string, string>>;
+
+type PluginOptions = {
+  docsRootDir: string;
+  libsRootDir: string;
+  pages: LegacyPages;
+};
+
+type PluginFactory = (
+  context: unknown,
+  options: PluginOptions
+) => Promise<{
+  loadContent: () => Promise<unknown>;
+}>;
+
+type CustomFields = {
+  extendedExamples: unknown;
+  knownIssues: unknown;
+  moreExamples: unknown;
+  screenshots: unknown;
+  themeColors: unknown;
+};
+
+const docsDir = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  '..'
+);
+const rootDir = path.resolve(docsDir, '..');
+const versionDir = path.join(docsDir, '5.x');
+const versionDocsDir = path.join(versionDir, 'docs');
+const componentDocsPath = path.join(versionDir, 'component-docs.json');
+
+const NUMERIC_PREFIX = /^\d+-/;
+
+const isRecord = (value: unknown): value is { [key: string]: unknown } =>
+  typeof value === 'object' && value !== null;
+
+const isLegacyPages = (value: unknown): value is LegacyPages =>
+  isRecord(value) &&
+  Object.values(value).every(
+    (page) =>
+      typeof page === 'string' ||
+      (isRecord(page) &&
+        Object.values(page).every((source) => typeof source === 'string'))
+  );
+
+const isPluginOptions = (value: unknown): value is PluginOptions => {
+  if (!isRecord(value)) {
+    return false;
+  }
+
+  return (
+    typeof value.docsRootDir === 'string' &&
+    typeof value.libsRootDir === 'string' &&
+    isLegacyPages(value.pages)
+  );
+};
+
+const isPluginFactory = (value: unknown): value is PluginFactory =>
+  typeof value === 'function';
+
+const findObjectEnd = (source: string, start: number) => {
+  let depth = 0;
+
+  for (let index = start; index < source.length; index++) {
+    const char = source[index];
+
+    if (char === '{') {
+      depth++;
+    }
+
+    if (char === '}') {
+      depth--;
+    }
+
+    if (depth === 0) {
+      return index + 1;
+    }
+  }
+
+  return -1;
+};
+
+const loadLegacyPluginConfig = (
+  docusaurusConfigPath: string
+): PluginOptions => {
+  const source = fs.readFileSync(docusaurusConfigPath, 'utf8');
+  const pluginPathIndex = source.indexOf("'./component-docs-plugin'");
+  const optionsStart = source.indexOf('{', pluginPathIndex);
+  const optionsEnd = findObjectEnd(source, optionsStart);
+
+  if (pluginPathIndex === -1 || optionsStart === -1 || optionsEnd === -1) {
+    throw new Error(
+      `Unable to read component docs plugin options from ${docusaurusConfigPath}`
+    );
+  }
+
+  const optionsSource = source.slice(optionsStart, optionsEnd);
+  const pluginOptions: unknown = vm.runInNewContext(`(${optionsSource})`, {
+    __dirname: path.dirname(docusaurusConfigPath),
+    path,
+  });
+
+  if (!isPluginOptions(pluginOptions)) {
+    throw new Error(
+      `Unable to read component docs plugin options from ${docusaurusConfigPath}`
+    );
+  }
+
+  return pluginOptions;
+};
+
+const loadLegacyCustomFields = (
+  docusaurusConfigPath: string,
+  requireFromScript: ReturnType<typeof createRequire>
+): CustomFields => {
+  const source = fs.readFileSync(docusaurusConfigPath, 'utf8');
+  const customFieldsIndex = source.indexOf('customFields:');
+  const customFieldsStart = source.indexOf('{', customFieldsIndex);
+  const customFieldsEnd = findObjectEnd(source, customFieldsStart);
+
+  if (
+    customFieldsIndex === -1 ||
+    customFieldsStart === -1 ||
+    customFieldsEnd === -1
+  ) {
+    throw new Error(
+      `Unable to read custom fields from ${docusaurusConfigPath}`
+    );
+  }
+
+  const dataDir = path.join(path.dirname(docusaurusConfigPath), 'src', 'data');
+  const extendedExamplesModule: unknown = requireFromScript(
+    path.join(dataDir, 'extendedExamples.js')
+  );
+  const screenshotsModule: unknown = requireFromScript(
+    path.join(dataDir, 'screenshots.js')
+  );
+  const themeColorsModule: unknown = requireFromScript(
+    path.join(dataDir, 'themeColors.js')
+  );
+
+  if (
+    !isRecord(extendedExamplesModule) ||
+    !isRecord(screenshotsModule) ||
+    !isRecord(themeColorsModule)
+  ) {
+    throw new Error(`Unable to read custom field data from ${dataDir}`);
+  }
+
+  const customFields: unknown = vm.runInNewContext(
+    `(${source.slice(customFieldsStart, customFieldsEnd)})`,
+    {
+      extendedExamples: extendedExamplesModule.extendedExamples,
+      screenshots: screenshotsModule.screenshots,
+      themeColors: themeColorsModule.themeColors,
+    }
+  );
+
+  if (!isRecord(customFields)) {
+    throw new Error(
+      `Unable to read custom fields from ${docusaurusConfigPath}`
+    );
+  }
+
+  return {
+    extendedExamples: customFields.extendedExamples,
+    knownIssues: customFields.knownIssues,
+    moreExamples: customFields.moreExamples,
+    screenshots: customFields.screenshots,
+    themeColors: customFields.themeColors,
+  };
+};
+
+const writeDocusaurusConfigStub = (
+  sourceDir: string,
+  customFields: CustomFields
+) => {
+  fs.writeFileSync(
+    path.join(sourceDir, 'docs', 'docusaurus.config.js'),
+    `module.exports = {
+  baseUrl: '/react-native-paper/',
+  customFields: ${JSON.stringify(customFields)},
+};
+`
+  );
+};
+
+const normalizeDocs = (value: unknown, sourceDir: string): unknown => {
+  if (Array.isArray(value)) {
+    return value.map((item) => normalizeDocs(item, sourceDir));
+  }
+
+  if (!isRecord(value)) {
+    return value;
+  }
+
+  return Object.fromEntries(
+    Object.entries(value).map(([key, item]) => {
+      if (key !== 'dependencies' || !Array.isArray(item)) {
+        return [key, normalizeDocs(item, sourceDir)];
+      }
+
+      return [
+        key,
+        item.map((dependency) => {
+          if (typeof dependency !== 'string' || !path.isAbsolute(dependency)) {
+            return dependency;
+          }
+
+          const realDependency = fs.existsSync(dependency)
+            ? fs.realpathSync(dependency)
+            : dependency;
+          const relativeDependency = path.relative(sourceDir, realDependency);
+
+          if (
+            relativeDependency.startsWith('..') ||
+            path.isAbsolute(relativeDependency)
+          ) {
+            return dependency;
+          }
+
+          return relativeDependency.split(path.sep).join('/');
+        }),
+      ];
+    })
+  );
+};
+
+const writeJson = (destination: string, value: unknown) => {
+  fs.mkdirSync(path.dirname(destination), { recursive: true });
+  fs.writeFileSync(destination, `${JSON.stringify(value, null, 2)}\n`);
+};
+
+const readStringArrayJson = (filePath: string) => {
+  const value: unknown = JSON.parse(fs.readFileSync(filePath, 'utf8'));
+
+  if (
+    !Array.isArray(value) ||
+    !value.every((item) => typeof item === 'string')
+  ) {
+    throw new Error(`${filePath} must contain a string array`);
+  }
+
+  return value;
+};
+
+const writeVersionNavigation = () => {
+  const guidesDir = path.join(versionDocsDir, 'guides');
+  const guidesMetaPath = path.join(guidesDir, '_meta.json');
+  const existingOrder = fs.existsSync(guidesMetaPath)
+    ? readStringArrayJson(guidesMetaPath)
+    : [];
+  const currentEntries = fs
+    .readdirSync(guidesDir, { withFileTypes: true })
+    .filter((entry) => entry.isFile() && /\.(md|mdx)$/.test(entry.name))
+    .map((entry) =>
+      entry.name.replace(/\.(md|mdx)$/, '').replace(NUMERIC_PREFIX, '')
+    );
+  const knownEntries = existingOrder.filter((entry) =>
+    currentEntries.includes(entry)
+  );
+  const newEntries = currentEntries.filter(
+    (entry) => !existingOrder.includes(entry)
+  );
+
+  writeJson(path.join(versionDir, '_nav.json'), [
+    {
+      text: 'Guides',
+      link: '/docs/guides/getting-started',
+      activeMatch: '^/docs/guides/',
+    },
+    {
+      text: 'Components',
+      link: '/docs/components/ActivityIndicator',
+      activeMatch: '^/docs/components/',
+    },
+    {
+      text: 'Showcase',
+      link: '/docs/showcase',
+      activeMatch: '^/docs/showcase$',
+    },
+  ]);
+  writeJson(path.join(versionDocsDir, '_meta.json'), [
+    {
+      type: 'dir-section-header',
+      name: 'guides',
+      label: 'Guides',
+    },
+    {
+      type: 'dir-section-header',
+      name: 'components',
+      label: 'Components',
+    },
+    {
+      type: 'file',
+      name: 'showcase',
+      label: 'Showcase',
+    },
+  ]);
+  writeJson(guidesMetaPath, [...knownEntries, ...newEntries]);
+};
+
+const writeComponentNavigation = (destination: string, pages: LegacyPages) => {
+  writeJson(
+    path.join(destination, '_meta.json'),
+    Object.entries(pages).map(([name, page]) =>
+      typeof page === 'string'
+        ? name
+        : {
+            type: 'dir',
+            name,
+            label: name,
+            collapsible: true,
+            collapsed: false,
+          }
+    )
+  );
+
+  for (const [name, page] of Object.entries(pages)) {
+    if (typeof page !== 'string') {
+      writeJson(path.join(destination, name, '_meta.json'), Object.keys(page));
+    }
+  }
+};
+
+const resolveRelativeLinks = (
+  content: string,
+  relativePath: string,
+  routes: ReadonlySet<string>
+) => {
+  const routePath = `/docs/components/${relativePath
+    .replace(/\.mdx$/, '')
+    .split(path.sep)
+    .join('/')}`;
+
+  return content.replace(
+    /\]\((?!https?:\/\/|mailto:|#|\/)([^)\s]+)([^)]*)\)/g,
+    (_link, href: string, suffix: string) => {
+      const [pathname, hash = ''] = href.split('#');
+      const componentRelativePath = pathname.replace(/^(?:\.\.?\/)+/, '');
+      const resolvedPaths = [
+        path.posix.resolve(path.posix.dirname(routePath), pathname),
+        path.posix.resolve('/docs/components', componentRelativePath),
+      ];
+      const target = resolvedPaths
+        .flatMap((resolvedPath) => [
+          resolvedPath,
+          `${resolvedPath}/${path.posix.basename(resolvedPath)}`,
+        ])
+        .find((resolvedPath) => routes.has(resolvedPath));
+
+      if (!target) {
+        throw new Error(
+          `Unable to generate docs for ${routePath}: relative link ${href} does not match a component page`
+        );
+      }
+
+      return `](${target}${hash ? `#${hash}` : ''}${suffix})`;
+    }
+  );
+};
+
+const writeComponentPages = (
+  source: string,
+  destination: string,
+  pages: LegacyPages
+) => {
+  fs.rmSync(destination, { recursive: true, force: true });
+  const routes = new Set(
+    Object.entries(pages).flatMap(([name, page]) =>
+      typeof page === 'string'
+        ? [`/docs/components/${name}`]
+        : Object.keys(page).map(
+            (pageName) => `/docs/components/${name}/${pageName}`
+          )
+    )
+  );
+
+  for (const entry of fs.readdirSync(source, {
+    recursive: true,
+    withFileTypes: true,
+  })) {
+    if (!entry.isFile() || path.extname(entry.name) !== '.mdx') {
+      continue;
+    }
+
+    const sourcePath = path.join(entry.parentPath, entry.name);
+    const relativePath = path.relative(source, sourcePath);
+    const destinationPath = path.join(destination, relativePath);
+    const componentDocsImport = path
+      .relative(path.dirname(destinationPath), componentDocsPath)
+      .split(path.sep)
+      .join('/');
+    const content = resolveRelativeLinks(
+      fs
+        .readFileSync(sourcePath, 'utf8')
+        .replaceAll('@site/src/components/', '@docs/components/')
+        .replace(
+          "import PropTable from '@docs/components/PropTable.tsx';",
+          `import PropTable from '@docs/components/PropTable.tsx';\nimport componentDocs5x from '${componentDocsImport}';`
+        )
+        .replaceAll(
+          '<PropTable componentLink=',
+          '<PropTable componentDocs={componentDocs5x.docs} componentLink='
+        )
+        .replaceAll('/react-native-paper/screenshots/', 'screenshots/')
+        .replace(/\s+baseUrl="[^"]*"/g, ''),
+      relativePath,
+      routes
+    );
+
+    fs.mkdirSync(path.dirname(destinationPath), { recursive: true });
+    fs.writeFileSync(destinationPath, content);
+  }
+
+  writeComponentNavigation(destination, pages);
+};
+
+const main = async () => {
+  const [branchName] = process.argv.slice(2);
+
+  if (!branchName) {
+    console.error('Usage: node docs/scripts/generate-5x-docs.ts <branch>');
+    process.exitCode = 1;
+    return;
+  }
+
+  const requireFromScript = createRequire(import.meta.url);
+  const tempDir = fs.mkdtempSync(
+    path.join(os.tmpdir(), 'react-native-paper-docs-')
+  );
+
+  try {
+    const archivePath = path.join(tempDir, 'source.tar');
+    const sourceDir = path.join(tempDir, 'source');
+
+    childProcess.execFileSync(
+      'git',
+      ['rev-parse', '--verify', `${branchName}^{commit}`],
+      {
+        cwd: rootDir,
+        stdio: 'ignore',
+      }
+    );
+    childProcess.execFileSync(
+      'git',
+      ['archive', '--format=tar', '--output', archivePath, branchName],
+      {
+        cwd: rootDir,
+        stdio: 'inherit',
+      }
+    );
+
+    fs.mkdirSync(sourceDir);
+    childProcess.execFileSync('tar', ['-xf', archivePath, '-C', sourceDir], {
+      cwd: rootDir,
+      stdio: 'inherit',
+    });
+
+    const nodeModulesPath = path.join(rootDir, 'docs', 'node_modules');
+    const archivedNodeModulesPath = path.join(
+      sourceDir,
+      'docs',
+      'node_modules'
+    );
+
+    if (fs.existsSync(nodeModulesPath)) {
+      fs.symlinkSync(nodeModulesPath, archivedNodeModulesPath, 'dir');
+    }
+
+    const docusaurusConfigPath = path.join(
+      sourceDir,
+      'docs',
+      'docusaurus.config.js'
+    );
+    const customFields = loadLegacyCustomFields(
+      docusaurusConfigPath,
+      requireFromScript
+    );
+    const pluginOptions = loadLegacyPluginConfig(docusaurusConfigPath);
+
+    writeDocusaurusConfigStub(sourceDir, customFields);
+
+    const pluginFactoryPath = path.join(
+      sourceDir,
+      'docs',
+      'component-docs-plugin'
+    );
+    const pluginFactory: unknown = requireFromScript(pluginFactoryPath);
+
+    if (!isPluginFactory(pluginFactory)) {
+      throw new Error(
+        `Unable to read component docs plugin from ${pluginFactoryPath}`
+      );
+    }
+
+    const plugin = await pluginFactory({}, pluginOptions);
+    const docs = await plugin.loadContent();
+    writeJson(componentDocsPath, {
+      docs: normalizeDocs(docs, fs.realpathSync(sourceDir)),
+    });
+
+    writeComponentPages(
+      pluginOptions.docsRootDir,
+      path.join(versionDocsDir, 'components'),
+      pluginOptions.pages
+    );
+    writeVersionNavigation();
+  } catch (error) {
+    console.error(error instanceof Error ? error.message : String(error));
+    process.exitCode = 1;
+  } finally {
+    fs.rmSync(tempDir, { recursive: true, force: true });
+  }
+};
+
+void main();
diff --git a/docs/sidebars.js b/docs/sidebars.js
deleted file mode 100644
index 072e565759..0000000000
--- a/docs/sidebars.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Creating a sidebar enables you to:
- - create an ordered group of docs
- - render a sidebar for each doc of that group
- - provide next/previous navigation
-
- The sidebars can be generated from the filesystem, or explicitly defined here.
-
- Create as many sidebars as you want.
- */
-
-// @ts-check
-
-/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
-const sidebars = {
-  tutorialSidebar: [{ type: 'autogenerated', dirName: 'guides' }],
-  components: [{ type: 'autogenerated', dirName: 'components' }],
-};
-
-module.exports = sidebars;
diff --git a/docs/src/components/Admonition.tsx b/docs/src/components/Admonition.tsx
new file mode 100644
index 0000000000..099782a878
--- /dev/null
+++ b/docs/src/components/Admonition.tsx
@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+
+type AdmonitionProps = {
+  children: ReactNode;
+  title?: ReactNode;
+  type?: 'note' | 'tip' | 'info' | 'caution' | 'warning' | 'danger';
+};
+
+const typeClassName = {
+  caution: 'warning',
+  danger: 'danger',
+  info: 'info',
+  note: 'note',
+  tip: 'tip',
+  warning: 'warning',
+};
+
+export default function Admonition({
+  children,
+  title,
+  type = 'note',
+}: AdmonitionProps) {
+  const normalizedType = typeClassName[type] ?? 'note';
+
+  return (
+    <div className={`rspress-doc admonition admonition-${normalizedType}`}>
+      {title ? <p className="admonition-title">{title}</p> : null}
+      <div>{children}</div>
+    </div>
+  );
+}
diff --git a/docs/src/components/AppStoreIcon.tsx b/docs/src/components/AppStoreIcon.tsx
index eda83143e1..897c04c12e 100644
--- a/docs/src/components/AppStoreIcon.tsx
+++ b/docs/src/components/AppStoreIcon.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 type Props = {
   color: string;
 };
diff --git a/docs/src/components/BannerExample.tsx b/docs/src/components/BannerExample.tsx
index 7f4acdc7bc..56bd19f194 100644
--- a/docs/src/components/BannerExample.tsx
+++ b/docs/src/components/BannerExample.tsx
@@ -1,18 +1,16 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 
-//@ts-ignore
-import BrowserOnly from '@docusaurus/BrowserOnly';
-//@ts-ignore
-import { useColorMode } from '@docusaurus/theme-common';
+import { BrowserOnly } from '@rspress/core/runtime';
 import {
   Avatar,
   Button,
+  DarkTheme,
   FAB,
-  MD3DarkTheme as DarkTheme,
-  MD3LightTheme as DefaultTheme,
+  LightTheme,
   ProgressBar,
-  PaperProvider,
+  Provider,
   RadioButton,
   Switch,
   Text,
@@ -20,6 +18,10 @@ import {
   useTheme,
 } from 'react-native-paper';
 
+import { useColorMode } from './theme-common';
+
+const shimmerBorderColor = 'rgba(125, 82, 96, 0.4)';
+
 const styles = StyleSheet.create({
   container: {
     padding: 24,
@@ -33,15 +35,33 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
     flexWrap: 'wrap',
   },
+  shimmer: {
+    alignContent: 'center',
+    borderColor: shimmerBorderColor,
+    borderRadius: 16,
+    borderStyle: 'solid',
+    borderWidth: 1,
+    display: 'flex',
+    justifyContent: 'center',
+    marginBottom: 32,
+    marginTop: 36,
+    minHeight: 500,
+    padding: 30,
+  },
 });
 
-const Stack: React.FC<
-  React.PropsWithChildren<{
-    direction?: 'row' | 'column';
-    spacing?: number;
-    style?: any;
-  }>
-> = ({ direction = 'column', spacing = 0, style, children }) => {
+type StackProps = React.PropsWithChildren<{
+  direction?: 'row' | 'column';
+  spacing?: number;
+  style?: StyleProp<ViewStyle>;
+}>;
+
+const Stack = ({
+  direction = 'column',
+  spacing = 0,
+  style,
+  children,
+}: StackProps) => {
   return (
     <View style={[{ flexDirection: direction, margin: -spacing }, style]}>
       {React.Children.map(children, (child, index) => (
@@ -83,7 +103,7 @@ const BannerExample = () => {
           <Button icon="camera" mode="contained" onPress={() => {}}>
             Press me
           </Button>
-          <FAB icon="plus" size="small" onPress={() => {}} />
+          <FAB icon="plus" size="default" onPress={() => {}} />
           <FAB icon="plus" size="medium" onPress={() => {}} />
           <FAB icon="plus" size="large" onPress={() => {}} />
           <Avatar.Text label="MD" />
@@ -109,13 +129,13 @@ const BannerExample = () => {
           <TextInput
             label="Email"
             value={text}
-            onChangeText={(text) => setText(text)}
+            onChangeText={(value) => setText(value)}
           />
           <TextInput
             label="Email"
-            mode="outlined"
+            variant="outlined"
             value={text}
-            onChangeText={(text) => setText(text)}
+            onChangeText={(value) => setText(value)}
           />
         </Stack>
 
@@ -142,34 +162,16 @@ const BannerExample = () => {
 };
 
 const Shimmer = () => {
-  /* Docusaurus won't call StyleSheet.create() server-side */
-  /* eslint-disable react-native/no-inline-styles, react-native/no-color-literals */
-
-  return (
-    <View
-      style={{
-        display: 'flex',
-        minHeight: 500,
-        borderWidth: 1,
-        borderColor: 'rgba(125, 82, 96, 0.4)',
-        borderStyle: 'solid',
-        borderRadius: 16,
-        alignContent: 'center',
-        justifyContent: 'center',
-        padding: 30,
-        marginTop: 36,
-        marginBottom: 32,
-      }}
-    />
-  );
+  return <View style={styles.shimmer} />;
 };
 
 const ThemedBannerExample = () => {
   const isDarkTheme = useColorMode().colorMode === 'dark';
+
   return (
-    <PaperProvider theme={isDarkTheme ? DarkTheme : DefaultTheme}>
+    <Provider theme={isDarkTheme ? DarkTheme : LightTheme}>
       <BannerExample />
-    </PaperProvider>
+    </Provider>
   );
 };
 
diff --git a/docs/src/components/CodeBlock.tsx b/docs/src/components/CodeBlock.tsx
new file mode 100644
index 0000000000..5e58ba8768
--- /dev/null
+++ b/docs/src/components/CodeBlock.tsx
@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+
+type CodeBlockProps = {
+  children: ReactNode;
+  language?: string;
+};
+
+export default function CodeBlock({ children, language }: CodeBlockProps) {
+  return (
+    <pre>
+      <code className={language ? `language-${language}` : undefined}>
+        {children}
+      </code>
+    </pre>
+  );
+}
diff --git a/docs/src/components/DynamicColorTheme.tsx b/docs/src/components/DynamicColorTheme.tsx
index 24e1191b21..1203992e7d 100644
--- a/docs/src/components/DynamicColorTheme.tsx
+++ b/docs/src/components/DynamicColorTheme.tsx
@@ -1,8 +1,8 @@
-import React, { useState, ReactNode } from 'react';
+import React, { useState } from 'react';
+import type { ReactNode } from 'react';
 
 import Color from 'color';
 //@ts-ignore
-// eslint-disable-next-line import/no-unresolved
 import { BlockPicker } from 'react-color';
 
 import Switch from './Switch';
@@ -160,7 +160,7 @@ const CodePreview = ({
   };
 
   const onCopy = () => {
-    navigator.clipboard.writeText(getColorScheme());
+    void navigator.clipboard.writeText(getColorScheme());
     setCopied(true);
 
     setTimeout(() => setCopied(false), 1000);
diff --git a/docs/src/components/ExtendedExample.tsx b/docs/src/components/ExtendedExample.tsx
index c3eac15fdf..2773d528e3 100644
--- a/docs/src/components/ExtendedExample.tsx
+++ b/docs/src/components/ExtendedExample.tsx
@@ -1,11 +1,6 @@
-import React from 'react';
-
-//@ts-ignore
-import CodeBlock from '@theme/CodeBlock';
-//@ts-ignore
-import TabItem from '@theme/TabItem';
-//@ts-ignore
-import Tabs from '@theme/Tabs';
+import CodeBlock from './CodeBlock';
+import TabItem from './TabItem';
+import Tabs from './Tabs';
 
 interface ExtendedExampleProps {
   extendedExamplesData: {
diff --git a/docs/src/components/ExtendsLink.tsx b/docs/src/components/ExtendsLink.tsx
index 9b39db2c8c..03b9462a48 100644
--- a/docs/src/components/ExtendsLink.tsx
+++ b/docs/src/components/ExtendsLink.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function ExtendsLink({
   name,
   link,
diff --git a/docs/src/components/GetStartedButtons.tsx b/docs/src/components/GetStartedButtons.tsx
index 4debe5b5ac..3b5378b194 100644
--- a/docs/src/components/GetStartedButtons.tsx
+++ b/docs/src/components/GetStartedButtons.tsx
@@ -1,110 +1,20 @@
-import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
-
-//@ts-ignore
-import BrowserOnly from '@docusaurus/BrowserOnly';
-//@ts-ignore
-import Link from '@docusaurus/Link';
-//@ts-ignore
-import { useColorMode } from '@docusaurus/theme-common';
-import {
-  Button,
-  MD3DarkTheme as DarkTheme,
-  MD3LightTheme as DefaultTheme,
-  PaperProvider,
-} from 'react-native-paper';
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    paddingBottom: 16,
-  },
-  button: {
-    marginRight: 16,
-  },
-});
-
-const noTextDecoration = {
-  textDecoration: 'none',
-};
-
-// Needed for ripple effect when pressing `Button`, however navigation is handled by `Link`
-const noop = () => {};
-
-const GetStartedButton = () => {
+export default function GetStartedButtons() {
   return (
-    <View style={styles.container}>
-      <Link to="/docs/guides/getting-started" style={noTextDecoration}>
-        <Button mode="contained" style={styles.button} onPress={noop}>
-          Get started
-        </Button>
-      </Link>
-      <Button
-        mode="outlined"
-        onPress={() =>
-          window.open(
-            'https://snack.expo.dev/@react-native-paper/react-native-paper-example_v5'
-          )
-        }
+    <div className="paper-get-started-buttons">
+      <a
+        href="/docs/guides/getting-started"
+        className="paper-get-started-button paper-get-started-button--primary"
+      >
+        Get started
+      </a>
+      <a
+        href="https://snack.expo.dev/@react-native-paper/react-native-paper-example_v5"
+        target="_blank"
+        rel="noreferrer"
+        className="paper-get-started-button paper-get-started-button--secondary"
       >
         Try on Snack
-      </Button>
-    </View>
-  );
-};
-
-const Shimmer = () => {
-  /* Docusaurus won't call StyleSheet.create() server-side */
-  /* eslint-disable react-native/no-inline-styles, react-native/no-color-literals */
-
-  return (
-    <View
-      style={{
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'center',
-        paddingBottom: 18,
-      }}
-    >
-      <View
-        style={{
-          width: 121,
-          marginRight: 16,
-          borderWidth: 1,
-          borderColor: 'rgba(125, 82, 96, 0.4)',
-          borderStyle: 'solid',
-          borderRadius: 40,
-          height: 40,
-        }}
-      />
-      <View
-        style={{
-          width: 132,
-          borderWidth: 1,
-          borderColor: 'rgba(125, 82, 96, 0.4)',
-          borderStyle: 'solid',
-          borderRadius: 40,
-          height: 40,
-        }}
-      />
-    </View>
-  );
-};
-
-const ThemedGetStarted = () => {
-  const isDarkTheme = useColorMode().colorMode === 'dark';
-  return (
-    <PaperProvider theme={isDarkTheme ? DarkTheme : DefaultTheme}>
-      <GetStartedButton />
-    </PaperProvider>
-  );
-};
-
-export default function ClientSideGetStarted() {
-  return (
-    <BrowserOnly fallback={<Shimmer />}>
-      {() => <ThemedGetStarted />}
-    </BrowserOnly>
+      </a>
+    </div>
   );
 }
diff --git a/docs/src/components/GithubIcon.tsx b/docs/src/components/GithubIcon.tsx
index c94cc381af..d768e3cdc9 100644
--- a/docs/src/components/GithubIcon.tsx
+++ b/docs/src/components/GithubIcon.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 type Props = {
   color: string;
 };
diff --git a/docs/src/components/GooglePlayIcon.tsx b/docs/src/components/GooglePlayIcon.tsx
index a0a88e36c5..e086eefd8c 100644
--- a/docs/src/components/GooglePlayIcon.tsx
+++ b/docs/src/components/GooglePlayIcon.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 type Props = {
   color: string;
 };
diff --git a/docs/src/components/IconsList.tsx b/docs/src/components/IconsList.tsx
index 73f26c91d7..76fc8bef1b 100644
--- a/docs/src/components/IconsList.tsx
+++ b/docs/src/components/IconsList.tsx
@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 const latestIcons: { [key in string]: number } = {
-  ...require('../../node_modules/@react-native-vector-icons/material-design-icons/glyphmaps/MaterialDesignIcons.json'),
+  ...require('@react-native-vector-icons/material-design-icons/glyphmaps/MaterialDesignIcons.json'),
 };
 
 const oldIcons: { [key in string]: number } = {
diff --git a/docs/src/components/Link.tsx b/docs/src/components/Link.tsx
new file mode 100644
index 0000000000..92f82456d2
--- /dev/null
+++ b/docs/src/components/Link.tsx
@@ -0,0 +1,32 @@
+import type { AnchorHTMLAttributes, ReactNode } from 'react';
+
+import { useSite } from '@rspress/core/dist/runtime/index.js';
+
+type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+  children?: ReactNode;
+  to?: string;
+};
+
+const withBase = (href: string, base: string) => {
+  if (/^(https?:)?\/\//.test(href) || href.startsWith('#')) {
+    return href;
+  }
+
+  if (!href.startsWith('/')) {
+    return href;
+  }
+
+  const normalizedBase = base.endsWith('/') ? base.slice(0, -1) : base;
+  return `${normalizedBase}${href}`;
+};
+
+export default function Link({ children, href, to, ...rest }: LinkProps) {
+  const { site } = useSite();
+  const targetHref = to ?? href ?? '#';
+
+  return (
+    <a href={withBase(targetHref, site.base ?? '/')} {...rest}>
+      {children}
+    </a>
+  );
+}
diff --git a/docs/src/components/Markdown.tsx b/docs/src/components/Markdown.tsx
index 27d429900f..2e0635ade0 100644
--- a/docs/src/components/Markdown.tsx
+++ b/docs/src/components/Markdown.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 const { marked } = require('marked');
 
 interface MarkdownProps {
diff --git a/docs/src/components/PaperHomeShowcase.tsx b/docs/src/components/PaperHomeShowcase.tsx
new file mode 100644
index 0000000000..2b9db2a775
--- /dev/null
+++ b/docs/src/components/PaperHomeShowcase.tsx
@@ -0,0 +1,82 @@
+import BannerExample from './BannerExample';
+
+const lightImages = [
+  'button.png',
+  'input.png',
+  'card.png',
+  'searchbar.png',
+  'appbar.png',
+  'snackbar.png',
+  'chip.png',
+  'list.png',
+  'list-accordion.png',
+  'typography.png',
+  'bottom-navigation.png',
+  'fab.png',
+];
+
+const darkImages = [
+  'button-dark.png',
+  'input-dark.png',
+  'card-dark.png',
+  'searchbar-dark.png',
+  'appbar-dark.png',
+  'snackbar-dark.png',
+  'chip-dark.png',
+  'list-dark.png',
+  'list-accordion-dark.png',
+  'typography-dark.png',
+  'bottom-navigation-dark.png',
+  'fab-dark.png',
+];
+
+const renderGallery = (images: string[]) =>
+  images.map((imageName) => (
+    <img
+      alt=""
+      className="paper-home-showcase__gallery-image"
+      key={imageName}
+      src={`/react-native-paper/gallery/${imageName}`}
+    />
+  ));
+
+export default function PaperHomeShowcase() {
+  return (
+    <section className="paper-home-showcase">
+      <div className="paper-home-showcase__intro">
+        <div>
+          <p className="paper-home-showcase__eyebrow">In practice</p>
+          <h2 className="paper-home-showcase__title">
+            Material components, typography, and controls
+          </h2>
+        </div>
+        <p className="paper-home-showcase__copy">
+          Browse the component surface the way it appears in real product UI,
+          not as generic documentation chrome.
+        </p>
+      </div>
+
+      <div className="paper-home-showcase__links">
+        Or check the demo app on{' '}
+        <a href="https://apps.apple.com/app/react-native-paper/id1548934513">
+          iOS
+        </a>{' '}
+        or{' '}
+        <a href="https://play.google.com/store/apps/details?id=com.callstack.reactnativepaperexample">
+          Android
+        </a>
+        .
+      </div>
+
+      <BannerExample />
+
+      <div className="paper-home-showcase__gallery gallery-light">
+        {renderGallery(lightImages)}
+      </div>
+
+      <div className="paper-home-showcase__gallery gallery-dark">
+        {renderGallery(darkImages)}
+      </div>
+    </section>
+  );
+}
diff --git a/docs/src/components/PaperVersionSelector.tsx b/docs/src/components/PaperVersionSelector.tsx
new file mode 100644
index 0000000000..1c2de87152
--- /dev/null
+++ b/docs/src/components/PaperVersionSelector.tsx
@@ -0,0 +1,102 @@
+import { useEffect, useMemo, useRef } from 'react';
+
+import {
+  usePage,
+  useVersion,
+  withBase,
+} from '@rspress/core/dist/runtime/index.js';
+
+import { getNextRoute, getStableRoute } from '../utils/versionRoutes';
+
+const legacyVersions = [
+  { label: '4.x', href: '/4.0/' },
+  { label: '3.x', href: '/3.0/' },
+  { label: '2.x', href: '/2.0/' },
+  { label: '1.x', href: '/1.0/' },
+];
+
+type VersionLink = {
+  active: boolean;
+  external?: boolean;
+  href: string;
+  label: string;
+};
+
+export default function PaperVersionSelector() {
+  const { page } = usePage();
+  const version = useVersion() || '5.x';
+  const detailsRef = useRef<HTMLDetailsElement>(null);
+
+  const links = useMemo<VersionLink[]>(() => {
+    const routePath = page.routePath ?? '/';
+    const stableRoute = getStableRoute(routePath);
+    const nextRoute = getNextRoute(routePath);
+
+    const primaryLink =
+      version === '6.x'
+        ? { active: true, href: withBase(nextRoute), label: '6.x' }
+        : { active: true, href: withBase(stableRoute), label: '5.x' };
+    const secondaryLink =
+      version === '6.x'
+        ? { active: false, href: withBase(stableRoute), label: '5.x' }
+        : { active: false, href: withBase(nextRoute), label: '6.x' };
+
+    return [
+      primaryLink,
+      secondaryLink,
+      ...legacyVersions.map((item) => ({
+        active: false,
+        external: true,
+        href: withBase(item.href),
+        label: item.label,
+      })),
+    ];
+  }, [page.routePath, version]);
+
+  useEffect(() => {
+    detailsRef.current?.removeAttribute('open');
+  }, [page.routePath]);
+
+  return (
+    <details className="paper-version-selector" ref={detailsRef}>
+      <summary>
+        {version}
+        <span aria-hidden="true"> ↓</span>
+      </summary>
+      <div className="paper-version-selector-menu">
+        {links.map((link) => (
+          <a
+            key={`${link.label}:${link.href}`}
+            className={[
+              'paper-version-selector-link',
+              link.active ? 'active' : '',
+            ]
+              .filter(Boolean)
+              .join(' ')}
+            href={link.href}
+            rel={link.external ? 'noopener noreferrer' : undefined}
+            target={link.external ? '_blank' : undefined}
+            onClick={() => detailsRef.current?.removeAttribute('open')}
+          >
+            <span>{link.label}</span>
+            {link.external ? (
+              <svg
+                aria-hidden="true"
+                fill="none"
+                height="14"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                viewBox="0 0 24 24"
+                width="14"
+              >
+                <path d="M14 3h7v7m0-7L10 14m-4-7H3v14h14v-3" />
+              </svg>
+            ) : null}
+          </a>
+        ))}
+      </div>
+    </details>
+  );
+}
diff --git a/docs/src/components/PrereleaseNotice.tsx b/docs/src/components/PrereleaseNotice.tsx
new file mode 100644
index 0000000000..5e32804c8e
--- /dev/null
+++ b/docs/src/components/PrereleaseNotice.tsx
@@ -0,0 +1,35 @@
+import Link from './Link';
+
+type PrereleaseNoticeProps = {
+  stableHref: string;
+  stableLabel: string;
+  version: string;
+};
+
+export default function PrereleaseNotice({
+  stableHref,
+  stableLabel,
+  version,
+}: PrereleaseNoticeProps) {
+  return (
+    <aside className="paper-prerelease-notice" aria-label="Prerelease warning">
+      <div className="paper-prerelease-notice__icon" aria-hidden="true">
+        !
+      </div>
+      <div className="paper-prerelease-notice__content">
+        <p className="paper-prerelease-notice__title">Warning</p>
+        <p className="paper-prerelease-notice__body">
+          This is unreleased documentation for React Native Paper {version}{' '}
+          version.
+        </p>
+        <p className="paper-prerelease-notice__body">
+          For up-to-date documentation, see the{' '}
+          <Link to={stableHref}>latest version (5.x)</Link>.
+        </p>
+        <p className="paper-prerelease-notice__body">
+          Stable docs: <Link to={stableHref}>{stableLabel}</Link>
+        </p>
+      </div>
+    </aside>
+  );
+}
diff --git a/docs/src/components/PropTable.tsx b/docs/src/components/PropTable.tsx
index 35f5069433..2437f58bce 100644
--- a/docs/src/components/PropTable.tsx
+++ b/docs/src/components/PropTable.tsx
@@ -1,103 +1,150 @@
-import React from 'react';
-
-// @ts-ignore
-// eslint-disable-next-line import/no-unresolved
-import useDoc from '@site/component-docs-plugin/useDocs';
-
 import Markdown from './Markdown';
 
-const typeDefinitions = {
+const typeDefinitions: Record<string, string> = {
   IconSource:
-    'https://github.com/callstack/react-native-paper/blob/main/src/components/Icon.tsx#L16',
+    'https://github.com/callstack/react-native-paper/blob/main/components/Icon.tsx#L16',
   ThemeProp:
     'https://callstack.github.io/react-native-paper/docs/guides/theming#theme-properties',
+  '(props: TextInputAccessoryProps) => React.ReactNode':
+    'https://github.com/callstack/react-native-paper/blob/main/components/TextInput/TextInputIcon.tsx#L11',
+  '(props: TextInputRenderProps) => React.ReactNode':
+    'https://github.com/callstack/react-native-paper/blob/main/components/TextInput/TextInput.tsx#L168',
+  'React.Ref<TextInputHandles>':
+    'https://github.com/callstack/react-native-paper/blob/main/components/TextInput/TextInput.tsx#L172',
   AccessibilityState:
     'https://reactnative.dev/docs/accessibility#accessibilitystate',
   'StyleProp<ViewStyle>': 'https://reactnative.dev/docs/view-style-props',
   'StyleProp<TextStyle>': 'https://reactnative.dev/docs/text-style-props',
+  TextProps: 'https://reactnative.dev/docs/text#props',
+  AccessibilityProps:
+    'https://reactnative.dev/docs/accessibility#accessibilityprops',
 };
 
 const renderBadge = (annotation: string) => {
   const [annotType, ...annotLabel] = annotation.split(' ');
 
-  // eslint-disable-next-line prettier/prettier
-  return `<span class="badge badge-${annotType.replace('@', '')} ">${annotLabel.join(' ')}</span>`;
+  return `<span class="badge badge-${annotType.replace(
+    '@',
+    ''
+  )} ">${annotLabel.join(' ')}</span>`;
+};
+
+type LegacyProp = {
+  defaultValue?: {
+    value: string;
+  } | null;
+  description: string;
+  required: boolean;
+  tsType?: {
+    name: string;
+    raw?: string;
+  } | null;
 };
 
-export default function PropTable({
-  componentLink,
-  prop,
-}: {
+type LegacyComponentDocs = Record<
+  string,
+  {
+    data: {
+      props: Record<string, LegacyProp>;
+    };
+  }
+>;
+
+type LegacyPropTableProps = {
+  componentDocs: LegacyComponentDocs;
   componentLink: string;
   prop: string;
-}) {
-  const doc = useDoc(componentLink);
+};
 
-  if (!doc?.data?.props) {
-    return null;
-  }
+type GeneratedPropTableProps = {
+  defaultValue?: string;
+  description: string;
+  type: string;
+};
+
+type PropTableProps = LegacyPropTableProps | GeneratedPropTableProps;
 
-  const props = doc.data.props;
+const renderPropDetails = ({
+  defaultValue,
+  description,
+  type,
+}: GeneratedPropTableProps) => {
+  const tsTypeLink = typeDefinitions[type];
 
   return (
     <div>
-      {Object.keys(props).map((key) => {
-        if (key !== prop) {
-          return null;
-        }
-        let descriptionByLines = props[key].description.split('\n');
-
-        // Slice leading badge - it's handled in `generatePageMDX`
-        if (descriptionByLines[0].includes('@')) {
-          descriptionByLines = descriptionByLines.slice(1);
-        }
-        descriptionByLines = descriptionByLines.map((line: string) => {
-          // Replace annotations with styled badges.
-          if (line.includes('@')) {
-            const annotIndex = line.indexOf('@');
-            // eslint-disable-next-line prettier/prettier
-              return `${line.substr(0, annotIndex)} ${renderBadge(line.substr(annotIndex))}`;
-          } else {
-            return line;
-          }
-        });
-
-        const description = descriptionByLines.join('\n');
-        const tsType = props[key].tsType?.raw ?? props[key].tsType?.name;
-        // @ts-ignore
-        const tsTypeLink = typeDefinitions[tsType];
-
-        return (
-          <div key={key}>
-            <p>
-              Type:{' '}
-              {tsTypeLink ? (
-                <a
-                  href={tsTypeLink}
-                  target={
-                    tsTypeLink.startsWith(
-                      'https://callstack.github.io/react-native-paper'
-                    )
-                      ? '_self'
-                      : '_blank'
-                  }
-                  rel="noreferrer"
-                >
-                  <code>{tsType}</code>
-                </a>
-              ) : (
-                <code>{tsType}</code>
-              )}
-            </p>
-            {props[key].defaultValue && (
-              <p>
-                Default value: <code>{props[key].defaultValue.value}</code>
-              </p>
-            )}
-            <Markdown content={description} />
-          </div>
-        );
-      })}
+      <p>
+        Type:{' '}
+        {tsTypeLink ? (
+          <a
+            href={tsTypeLink}
+            target={
+              tsTypeLink.startsWith(
+                'https://callstack.github.io/react-native-paper'
+              )
+                ? '_self'
+                : '_blank'
+            }
+            rel="noreferrer"
+          >
+            <code>{type}</code>
+          </a>
+        ) : (
+          <code>{type}</code>
+        )}
+      </p>
+      {defaultValue && (
+        <p>
+          Default value: <code>{defaultValue}</code>
+        </p>
+      )}
+      <Markdown content={description} />
     </div>
   );
+};
+
+export default function PropTable(tableProps: PropTableProps) {
+  if ('type' in tableProps) {
+    return renderPropDetails(tableProps);
+  }
+
+  const doc = tableProps.componentDocs[tableProps.componentLink];
+
+  if (!doc?.data?.props) {
+    return null;
+  }
+
+  const prop = doc.data.props[tableProps.prop];
+
+  if (!prop) {
+    return null;
+  }
+
+  let descriptionByLines = prop.description.split('\n');
+
+  // Slice leading badge - it's handled in `generatePageMDX`
+  if (descriptionByLines[0].includes('@')) {
+    descriptionByLines = descriptionByLines.slice(1);
+  }
+
+  const description = descriptionByLines
+    .map((line) => {
+      // Replace annotations with styled badges.
+      if (!line.includes('@')) {
+        return line;
+      }
+
+      const annotIndex = line.indexOf('@');
+
+      return `${line.substr(0, annotIndex)} ${renderBadge(
+        line.substr(annotIndex)
+      )}`;
+    })
+    .join('\n');
+
+  return renderPropDetails({
+    defaultValue: prop.defaultValue?.value,
+    description,
+    type: prop.tsType?.raw ?? prop.tsType?.name ?? '',
+  });
 }
diff --git a/docs/src/components/ScreenshotTabs.tsx b/docs/src/components/ScreenshotTabs.tsx
index e352c951d7..ee45872920 100644
--- a/docs/src/components/ScreenshotTabs.tsx
+++ b/docs/src/components/ScreenshotTabs.tsx
@@ -1,15 +1,13 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
-//@ts-ignore
-import TabItem from '@theme/TabItem';
-//@ts-ignore
-import Tabs from '@theme/Tabs';
+import { withBase } from '@rspress/core/runtime';
 
+import TabItem from './TabItem';
+import Tabs from './Tabs';
 import type { DataObject } from '../utils/themeColors';
 
 type ScreenshotTabsProps = {
   screenshotData: DataObject | string;
-  baseUrl: string;
 };
 
 const getClassName = (value: string) =>
@@ -17,21 +15,18 @@ const getClassName = (value: string) =>
     ? 'gifScreenshot'
     : `tabScreenshot${value.includes('full-width') ? 'full-width' : ''}`;
 
-const ScreenshotTabs: React.FC<ScreenshotTabsProps> = ({
-  screenshotData,
-  baseUrl,
-}) => {
-  const renderScreenhot = (src: string): ReactNode => (
-    <img src={`${baseUrl}${src}`} className={getClassName(src)} />
+const ScreenshotTabs = ({ screenshotData }: ScreenshotTabsProps) => {
+  const renderScreenshot = (src: string): ReactNode => (
+    <img src={withBase(src)} className={getClassName(src)} />
   );
 
   if (typeof screenshotData === 'string') {
-    return renderScreenhot(screenshotData);
+    return renderScreenshot(screenshotData);
   }
 
   const screenshots = Object.entries(screenshotData).map(([key, value]) => (
     <TabItem key={key} value={key} label={key} default>
-      {renderScreenhot(value as string)}
+      {typeof value === 'string' ? renderScreenshot(value) : null}
     </TabItem>
   ));
 
diff --git a/docs/src/components/Showcase.tsx b/docs/src/components/Showcase.tsx
index 53c44f8999..56b942ac70 100644
--- a/docs/src/components/Showcase.tsx
+++ b/docs/src/components/Showcase.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import color from 'color';
 
 import AppStoreIcon from './AppStoreIcon';
@@ -184,8 +182,8 @@ export default function Showcase() {
       {data.map((item) => {
         const tintColor = color(item.color).isLight() ? '#000000' : '#FFFFFF';
         return (
-          <div key={item.image}>
-            <div className="showcase-image-container">
+          <div key={item.image} className="showcase-card">
+            <div className="showcase-image-container" tabIndex={0}>
               <img className="showcase-image" src={item.image} alt="" />
               <div
                 className="showcase-info"
diff --git a/docs/src/components/Switch.tsx b/docs/src/components/Switch.tsx
index baa4f12bf0..30b7e62d03 100644
--- a/docs/src/components/Switch.tsx
+++ b/docs/src/components/Switch.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 interface SwitchProps {
   value: boolean;
   onValueChange?: () => void;
diff --git a/docs/src/components/TabItem.tsx b/docs/src/components/TabItem.tsx
new file mode 100644
index 0000000000..b91c24d5a1
--- /dev/null
+++ b/docs/src/components/TabItem.tsx
@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+
+import { Tab } from '@rspress/core/dist/theme/index.js';
+
+type TabItemProps = {
+  children: ReactNode;
+  default?: boolean;
+  label?: string;
+  value?: string;
+};
+
+export default function TabItem({ children, label, value }: TabItemProps) {
+  return <Tab label={label ?? value ?? ''}>{children}</Tab>;
+}
diff --git a/docs/src/components/Tabs.tsx b/docs/src/components/Tabs.tsx
new file mode 100644
index 0000000000..e8b4d3f023
--- /dev/null
+++ b/docs/src/components/Tabs.tsx
@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+
+import { Tabs as RspressTabs } from '@rspress/core/dist/theme/index.js';
+
+type TabsProps = {
+  children: ReactNode;
+};
+
+export default function Tabs({ children }: TabsProps) {
+  return <RspressTabs>{children}</RspressTabs>;
+}
diff --git a/docs/src/components/ThemeColorsTable.tsx b/docs/src/components/ThemeColorsTable.tsx
index ef7e5cd7f8..d9c5cec724 100644
--- a/docs/src/components/ThemeColorsTable.tsx
+++ b/docs/src/components/ThemeColorsTable.tsx
@@ -1,17 +1,10 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
-//@ts-ignore
-import Admonition from '@theme/Admonition';
-//@ts-ignore
-import TabItem from '@theme/TabItem';
-//@ts-ignore
-import Tabs from '@theme/Tabs';
-
-import {
-  DataObject,
-  getMaxNestedLevel,
-  getUniqueNestedKeys,
-} from '../utils/themeColors';
+import Admonition from './Admonition';
+import TabItem from './TabItem';
+import Tabs from './Tabs';
+import { getMaxNestedLevel, getUniqueNestedKeys } from '../utils/themeColors';
+import type { DataObject } from '../utils/themeColors';
 
 const getTableHeader = (keys: string[]): ReactNode[] => {
   return keys.map((key) => <th key={key}>{key}</th>);
@@ -27,6 +20,9 @@ const getTableCell = (keys: string[], modes: DataObject): ReactNode[] => {
   });
 };
 
+const isDataObject = (value: DataObject[string]): value is DataObject =>
+  typeof value === 'object';
+
 const FlatTable = ({
   themeColorsData,
   uniqueKeys,
@@ -35,10 +31,12 @@ const FlatTable = ({
   uniqueKeys: string[];
 }): ReactNode => {
   const rows = Object.keys(themeColorsData).map((mode) => {
+    const value = themeColorsData[mode];
+
     return (
       <tr key={`${mode}`}>
         <td>{mode}</td>
-        {getTableCell(uniqueKeys, themeColorsData[mode] as DataObject)}
+        {isDataObject(value) ? getTableCell(uniqueKeys, value) : null}
       </tr>
     );
   });
@@ -69,30 +67,37 @@ const TabbedTable = ({
   themeColorsData: DataObject;
   uniqueKeys: string[];
 }): ReactNode => {
-  const tabTableContent = Object.keys(themeColorsData).map((key) => {
-    const modes = themeColorsData[key] as DataObject;
-    const rows = Object.keys(modes).map((mode) => {
+  const tabTableContent = Object.entries(themeColorsData).map(
+    ([key, modes]) => {
+      if (!isDataObject(modes)) {
+        return null;
+      }
+
+      const rows = Object.keys(modes).map((mode) => {
+        const value = modes[mode];
+
+        return (
+          <tr key={`${key}-${mode}`}>
+            <td>{mode}</td>
+            {isDataObject(value) ? getTableCell(uniqueKeys, value) : null}
+          </tr>
+        );
+      });
       return (
-        <tr key={`${key}-${mode}`}>
-          <td>{mode}</td>
-          {getTableCell(uniqueKeys, modes[mode] as DataObject)}
-        </tr>
+        <TabItem label={key} value={key} key={key}>
+          <table>
+            <thead>
+              <tr>
+                <th>mode</th>
+                {getTableHeader(uniqueKeys)}
+              </tr>
+            </thead>
+            <tbody>{rows}</tbody>
+          </table>
+        </TabItem>
       );
-    });
-    return (
-      <TabItem label={key} value={key} key={key}>
-        <table>
-          <thead>
-            <tr>
-              <th>mode</th>
-              {getTableHeader(uniqueKeys)}
-            </tr>
-          </thead>
-          <tbody>{rows}</tbody>
-        </table>
-      </TabItem>
-    );
-  });
+    }
+  );
 
   return (
     <>
diff --git a/docs/src/components/ThemeIcon.tsx b/docs/src/components/ThemeIcon.tsx
index 0f643f50db..d787e4b2a3 100644
--- a/docs/src/components/ThemeIcon.tsx
+++ b/docs/src/components/ThemeIcon.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 type Props = {
   type: 'dark' | 'light';
 };
diff --git a/docs/src/components/VersionedPrereleaseNotice.tsx b/docs/src/components/VersionedPrereleaseNotice.tsx
new file mode 100644
index 0000000000..9c36931191
--- /dev/null
+++ b/docs/src/components/VersionedPrereleaseNotice.tsx
@@ -0,0 +1,30 @@
+import { usePage, useVersion } from '@rspress/core/dist/runtime/index.js';
+
+import PrereleaseNotice from './PrereleaseNotice';
+import { getStableRoute, hasSameStableRoute } from '../utils/versionRoutes';
+
+const DOCS_PREFIX = '/6.x/docs/';
+
+export default function VersionedPrereleaseNotice() {
+  const version = useVersion() || '5.x';
+  const { page } = usePage();
+  const routePath = page.routePath ?? '/';
+
+  if (version !== '6.x' || !routePath.startsWith(DOCS_PREFIX)) {
+    return null;
+  }
+
+  const stableHref = getStableRoute(routePath);
+  const stableLabel =
+    hasSameStableRoute(routePath) && page.title
+      ? `${page.title} (5.x)`
+      : 'Latest stable docs (5.x)';
+
+  return (
+    <PrereleaseNotice
+      stableHref={stableHref}
+      stableLabel={stableLabel}
+      version="6.x"
+    />
+  );
+}
diff --git a/docs/src/components/theme-common.ts b/docs/src/components/theme-common.ts
new file mode 100644
index 0000000000..335ce8eaa1
--- /dev/null
+++ b/docs/src/components/theme-common.ts
@@ -0,0 +1,9 @@
+import { useDark } from '@rspress/core/dist/runtime/index.js';
+
+export const useColorMode = () => {
+  const isDark = useDark();
+
+  return {
+    colorMode: isDark ? 'dark' : 'light',
+  };
+};
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 6594e61fb7..2aae0f8b90 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -1,32 +1,11 @@
-/**
- * Any CSS included here will be global. The classic template
- * bundles Infima by default. Infima is a CSS framework designed to
- * work well for content-centric websites.
- */
-
-/* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #21005d;
-  --ifm-color-primary-dark: #1e0054;
-  --ifm-color-primary-darker: #1c004f;
-  --ifm-color-primary-darkest: #170041;
-  --ifm-color-primary-light: #240066;
-  --ifm-color-primary-lighter: #26006b;
-  --ifm-color-primary-lightest: #2b0079;
-  --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-}
-
-/* For readability concerns, you should choose a lighter palette in dark mode. */
+  --paper-nav-link-hover: var(--rp-c-bg-soft, rgba(148, 163, 184, 0.16));
+  --paper-nav-link-active: var(--rp-c-bg-mute, rgba(148, 163, 184, 0.24));
+}
+
 [data-theme='dark'] {
-  --ifm-color-primary: #cfbcff;
-  --ifm-color-primary-dark: #af90ff;
-  --ifm-color-primary-darker: #9f7aff;
-  --ifm-color-primary-darkest: #7037ff;
-  --ifm-color-primary-light: #efe8ff;
-  --ifm-color-primary-lighter: #fffeff;
-  --ifm-color-primary-lightest: #ffffff;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --paper-nav-link-hover: var(--rp-c-bg-soft, rgba(255, 255, 255, 0.12));
+  --paper-nav-link-active: var(--rp-c-bg-mute, rgba(255, 255, 255, 0.18));
 }
 
 .nav-link {
@@ -43,15 +22,15 @@
   border-radius: 50%;
   background-color: transparent;
   z-index: -1;
-  transition: background-color var(--ifm-transition-fast);
+  transition: background-color 150ms ease;
 }
 .nav-link:hover::before,
 .nav-link:active::before,
 .nav-link:focus::before {
-  background-color: var(--ifm-color-emphasis-200);
+  background-color: var(--paper-nav-link-hover);
 }
 .nav-link:active::before {
-  background-color: var(--ifm-menu-color-background-active);
+  background-color: var(--paper-nav-link-active);
 }
 
 .nav-link::after {
@@ -79,7 +58,6 @@ html[data-theme='dark'] .nav-link::after {
 }
 
 .screenshots img,
-
 .tabScreenshot {
   max-width: 45%;
 }
@@ -88,7 +66,7 @@ html[data-theme='dark'] .nav-link::after {
   max-width: 40%;
 }
 
-.screenshots figure>img {
+.screenshots figure > img {
   max-width: 100%;
 }
 
@@ -102,7 +80,6 @@ html[data-theme='dark'] .nav-link::after {
   width: 33%;
 }
 
-
 html[data-theme='dark'] .gallery-dark,
 html[data-theme='light'] .gallery-light {
   display: block;
@@ -128,8 +105,10 @@ html[data-theme='light'] .gallery-dark {
   height: 124px;
   align-items: center;
   text-align: center;
+}
 
-  @media (max-width: 680px) {
+@media (max-width: 680px) {
+  .icons-list-icon-container {
     width: 96px;
   }
 }
@@ -153,10 +132,10 @@ html[data-theme='light'] .gallery-dark {
   flex-wrap: wrap;
   justify-content: center;
   margin: 24px 0;
+}
 
-  &:last-child {
-    justify-content: flex-start;
-  }
+.icons-list-results:last-child {
+  justify-content: flex-start;
 }
 
 .icons-list-searchbar {
@@ -171,20 +150,21 @@ html[data-theme='light'] .gallery-dark {
   border-radius: 3px;
   transition: background-color 0.3s;
   outline: 0;
+}
 
-  &:focus,
-  &:hover {
-    background-color: #e7e7e7;
-  }
+.icons-list-searchbar:focus,
+.icons-list-searchbar:hover {
+  background-color: #e7e7e7;
+}
 
-  *:focus-visible {
-    outline: auto;
-  }
+.icons-list-searchbar:focus-visible {
+  outline: auto;
 }
 
 @font-face {
   font-family: 'MaterialDesignIcons';
-  src: url('../../node_modules/@react-native-vector-icons/material-design-icons/fonts/MaterialDesignIcons.ttf') format('truetype');
+  src: url('@react-native-vector-icons/material-design-icons/fonts/MaterialDesignIcons.ttf')
+    format('truetype');
 }
 
 .badge:is(a .badge) {
@@ -213,7 +193,7 @@ a .badge .badge-text {
 }
 
 [data-theme='dark'] .badge {
-  color: white
+  color: white;
 }
 
 .badge-supported {
@@ -245,10 +225,13 @@ a .badge .badge-text {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  gap: 32px;
   min-width: 0;
+  align-items: flex-start;
+  overflow: visible;
 }
 
-.color-picker {
+table.color-picker {
   display: table;
   width: 100%;
   overflow: visible;
@@ -261,7 +244,7 @@ a .badge .badge-text {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0,0,0,.2);
+  background: rgba(0, 0, 0, 0.2);
   z-index: 1;
 }
 
@@ -362,7 +345,6 @@ a .badge .badge-text {
   flex-direction: row;
   gap: 20px;
   margin-top: 20px;
-
 }
 .color-picker-themes > div {
   flex: 1 0 300px;
@@ -388,66 +370,76 @@ a .badge .badge-text {
 .color-picker-preview-box {
   padding: 6px 6px 18px 6px;
   font-size: 12px;
-  display:block;
+  display: block;
 }
 
-.color-picker-button:hover, .color-picker-button:focus,
-.color-picker-button-additional:hover, .color-picker-button-additional:focus,
-.color-picker-button-cancel:hover, .color-picker-button-cancel:focus{
+.color-picker-button:hover,
+.color-picker-button:focus,
+.color-picker-button-additional:hover,
+.color-picker-button-additional:focus,
+.color-picker-button-cancel:hover,
+.color-picker-button-cancel:focus {
   opacity: 0.8;
 }
 
-
 @media (max-width: 680px) {
   .showcase-gallery {
     justify-content: center;
   }
 }
 
+.showcase-card {
+  flex: 0 0 auto;
+  overflow: visible;
+}
+
 .showcase-image-container {
+  position: relative;
   overflow: hidden;
-  margin: 16px;
+  width: 270px;
+  height: 480px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+  background: #ffffff;
+  isolation: isolate;
 }
 
-@media (min-width: 420px) {
-  .showcase-image-container {
-    height: 528px;
-  }
-
-  .showcase-image-container:hover .showcase-info,
-  .showcase-image-container:focus .showcase-info {
-    transform: translateY(-48px);
-  }
+.showcase-image-container:hover,
+.showcase-image-container:focus-within {
+  z-index: 2;
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
 }
 
+.showcase-image-container:hover .showcase-info,
+.showcase-image-container:focus-within .showcase-info {
+  transform: translateY(0);
+}
 
 .showcase-image {
   display: block;
-  max-height: 480px;
-  width: auto;
-}
-
-@media (min-width: 420px) {
-  .showcase-image {
-    height: 480px;
-    width: 270px;
-  }
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .showcase-info {
-  height: 96px;
-  padding: 12px;
-  transform: translateY(0);
-  transition: 150ms;
-}
-
-.showcase-app-name {
-  font-size: 16px;
-  margin-top: 0;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  min-height: 136px;
+  padding: 18px 24px 20px;
+  transform: translateY(calc(100% - 68px));
+  transition: transform 180ms ease;
+  box-shadow: 0 -16px 32px rgba(15, 23, 42, 0.18);
+}
+
+.showcase-info .showcase-app-name {
+  font-size: 17px;
+  line-height: 1.2;
+  margin-block-start: 0;
+  margin-block-end: 12px;
   margin-bottom: 12px;
-
-  width: 246px;
+  width: auto;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -456,14 +448,36 @@ a .badge .badge-text {
 .showcase-badge-container {
   display: flex;
   flex-direction: row;
+  align-items: center;
   margin-top: 16px;
-  padding-left: 3px;
+  padding-left: 1px;
 }
 
 .showcase-separation {
   margin: 0 10px;
 }
 
+@media (max-width: 420px) {
+  .showcase-gallery {
+    gap: 24px;
+  }
+
+  .showcase-image-container {
+    width: min(270px, 100%);
+    height: auto;
+  }
+
+  .showcase-image {
+    height: auto;
+    aspect-ratio: 9 / 16;
+  }
+
+  .showcase-info {
+    min-height: 124px;
+    transform: translateY(calc(100% - 60px));
+  }
+}
+
 /* Switch.tsx */
 
 .react-switch-checkbox {
@@ -482,7 +496,7 @@ a .badge .badge-text {
   background: grey;
   border-radius: 100px;
   position: relative;
-  transition: background-color .2s;
+  transition: background-color 0.2s;
 }
 
 .react-switch-label .react-switch-button {
@@ -498,7 +512,7 @@ a .badge .badge-text {
   box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);
 }
 
-.react-switch-checkbox:checked+.react-switch-label .react-switch-button {
+.react-switch-checkbox:checked + .react-switch-label .react-switch-button {
   left: calc(100% - 2px);
   transform: translateX(-100%);
 }
@@ -532,4 +546,743 @@ a .badge .badge-text {
 
 .extends {
   margin-bottom: 20px;
-}
\ No newline at end of file
+}
+
+.paper-version-selector {
+  position: relative;
+  z-index: 10;
+  min-width: 88px;
+  border: 1px solid var(--rp-c-divider, rgba(148, 163, 184, 0.24));
+  border-radius: 999px;
+  background: var(--rp-c-bg-soft, rgba(18, 18, 20, 0.96));
+  color: var(--rp-c-text-1, #fff);
+  backdrop-filter: blur(12px);
+}
+
+.paper-version-selector summary {
+  list-style: none;
+  cursor: pointer;
+  padding: 8px 14px;
+  font-size: 13px;
+  font-weight: 600;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.paper-version-selector summary::-webkit-details-marker {
+  display: none;
+}
+
+.paper-version-selector[open] {
+  border-radius: 18px;
+}
+
+.paper-version-selector-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  display: grid;
+  min-width: 88px;
+  padding: 8px;
+  gap: 4px;
+  border: 1px solid var(--rp-c-divider, rgba(148, 163, 184, 0.24));
+  border-radius: 18px;
+  background: inherit;
+  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
+}
+
+.paper-version-selector-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 12px;
+  padding: 8px 10px;
+  color: inherit;
+  text-decoration: none;
+  gap: 6px;
+}
+
+.paper-version-selector-link:hover,
+.paper-version-selector-link.active {
+  background: rgba(104, 88, 196, 0.22);
+}
+
+html:not(.dark) .paper-version-selector {
+  background: rgba(255, 255, 255, 0.92);
+  color: #1c1b1f;
+}
+
+html:not(.dark) .paper-version-selector-menu {
+  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
+}
+
+@media (max-width: 960px) {
+  .paper-version-selector {
+    min-width: 76px;
+  }
+
+  .paper-version-selector summary {
+    padding-inline: 12px;
+  }
+}
+
+.rp-nav__others > .rp-nav-menu__item,
+.rp-nav-hamburger__md__hover-group > .rp-nav-menu__item {
+  display: none;
+}
+
+.rp-doc-layout__outline:empty,
+.rp-doc-layout__outline:not(:has(.rp-toc-item)) {
+  display: none;
+}
+
+.rp-outline__action-row:has(.rp-llms-copy-button),
+.rp-outline__action-row:has(.rp-llms-view-options__trigger) {
+  display: none;
+}
+
+.rp-outline__bottom:not(:has(.rp-edit-link, .rp-scroll-to-top)) {
+  display: none;
+}
+
+.rp-outline__bottom:not(:has(.rp-edit-link, .rp-scroll-to-top))
+  + .rp-outline__divider,
+.rp-outline__divider:has(
+  + .rp-outline__bottom:not(:has(.rp-edit-link, .rp-scroll-to-top))
+) {
+  display: none;
+}
+
+.rp-llms-container {
+  display: none !important;
+}
+
+.paper-home-showcase {
+  margin: 56px auto 0;
+  box-sizing: border-box;
+  width: min(72rem, calc(100% - 16px));
+  padding: 0 40px 56px;
+}
+
+.paper-home-showcase__intro {
+  display: grid;
+  gap: 16px;
+  margin-bottom: 18px;
+}
+
+.paper-home-showcase__eyebrow {
+  margin: 0 0 12px;
+  color: #7c4dff;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.paper-home-showcase__title {
+  margin: 0;
+  font-size: clamp(32px, 4vw, 54px);
+  line-height: 1.04;
+}
+
+.paper-home-showcase__copy,
+.paper-home-showcase__links {
+  color: var(--rp-c-text-2);
+  font-size: 18px;
+  line-height: 1.55;
+}
+
+.paper-home-showcase__copy {
+  margin: 0;
+  max-width: 760px;
+}
+
+.paper-home-showcase__links {
+  margin: 0 0 24px;
+}
+
+.paper-home-showcase__links a {
+  color: inherit;
+}
+
+.paper-get-started-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
+  padding-bottom: 1rem;
+}
+
+.paper-get-started-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.75rem;
+  padding: 0 1.25rem;
+  border: 1px solid;
+  border-radius: 999px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition:
+    transform 120ms ease,
+    background-color 120ms ease;
+}
+
+.paper-get-started-button:hover {
+  transform: translateY(-1px);
+  text-decoration: none;
+}
+
+.paper-get-started-button--primary {
+  border-color: #6750a4;
+  background-color: #6750a4;
+  color: #ffffff;
+}
+
+.paper-get-started-button--secondary {
+  border-color: #79747e;
+  background-color: transparent;
+  color: #49454f;
+}
+
+[data-theme='dark'] .paper-get-started-button--primary {
+  border-color: #d0bcff;
+  background-color: #d0bcff;
+  color: #1d192b;
+}
+
+[data-theme='dark'] .paper-get-started-button--secondary {
+  border-color: #938f99;
+  color: #e6e1e5;
+}
+
+.paper-home-showcase__gallery {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin-top: 24px;
+}
+
+.paper-home-showcase__gallery-image {
+  width: min(100%, 348px);
+  margin: 0 auto;
+  border-radius: 20px;
+  border: 1px solid rgba(124, 77, 255, 0.12);
+  background: rgba(124, 77, 255, 0.03);
+}
+
+.paper-prerelease-notice {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 20px;
+  margin: 0 0 32px;
+  padding: 20px 24px;
+  border: 1px solid rgba(245, 158, 11, 0.28);
+  border-left: 4px solid #f59e0b;
+  border-radius: 20px;
+  background: rgba(255, 251, 235, 0.82);
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
+}
+
+.paper-prerelease-notice__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: 2px solid #f59e0b;
+  border-radius: 12px;
+  color: #f59e0b;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.paper-prerelease-notice__content {
+  min-width: 0;
+}
+
+.paper-prerelease-notice__title,
+.paper-prerelease-notice__body {
+  margin: 0;
+}
+
+.paper-prerelease-notice__title {
+  color: #1f2937;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.paper-prerelease-notice__body {
+  margin-top: 10px;
+  color: #374151;
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+.paper-prerelease-notice__body a {
+  color: #7c4dff;
+  font-weight: 600;
+}
+
+.paper-banner-example {
+  margin: 0;
+  padding: 28px;
+  border-radius: 32px;
+  border: 1px solid var(--paper-example-border);
+  background: linear-gradient(
+    180deg,
+    var(--paper-example-panel-alt) 0%,
+    var(--paper-example-panel) 100%
+  );
+  color: var(--paper-example-text);
+  box-shadow: var(--paper-example-shadow);
+}
+
+.paper-banner-example__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 18px;
+}
+
+.paper-banner-example__button,
+.paper-banner-example__avatar,
+.paper-banner-example__fab,
+.paper-banner-example__folder-button {
+  border: 1px solid transparent;
+  font: inherit;
+  letter-spacing: 0;
+  transition:
+    transform 120ms ease,
+    box-shadow 120ms ease,
+    background-color 120ms ease,
+    border-color 120ms ease;
+}
+
+.paper-banner-example__button:hover,
+.paper-banner-example__avatar:hover,
+.paper-banner-example__fab:hover,
+.paper-banner-example__folder-button:hover {
+  transform: translateY(-1px);
+}
+
+.paper-banner-example__button {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 48px;
+  padding: 0 24px;
+  border-radius: 999px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.paper-banner-example__button-status {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: color-mix(
+    in srgb,
+    var(--paper-example-accent) 36%,
+    var(--paper-example-panel-soft)
+  );
+}
+
+.paper-banner-example__button-status--busy {
+  background: var(--paper-example-accent);
+  box-shadow: 0 0 0 6px rgba(103, 80, 164, 0.12);
+}
+
+.paper-banner-example__button--outlined,
+.paper-banner-example__button--tonal,
+.paper-banner-example__avatar,
+.paper-banner-example__folder-button {
+  border-color: var(--paper-example-border);
+  background: var(--paper-example-panel-soft);
+  color: var(--paper-example-text);
+}
+
+.paper-banner-example__button--tonal {
+  box-shadow: 0 12px 24px rgba(103, 80, 164, 0.08);
+}
+
+.paper-banner-example__button--selected {
+  border-color: color-mix(
+    in srgb,
+    var(--paper-example-accent) 40%,
+    var(--paper-example-border)
+  );
+}
+
+.paper-banner-example__camera-icon {
+  position: relative;
+  width: 18px;
+  height: 12px;
+  border: 2px solid currentColor;
+  border-radius: 4px;
+}
+
+.paper-banner-example__camera-icon::before {
+  content: '';
+  position: absolute;
+  top: -5px;
+  left: 3px;
+  width: 8px;
+  height: 4px;
+  border-radius: 2px 2px 0 0;
+  background: currentColor;
+}
+
+.paper-banner-example__button--contained,
+.paper-banner-example__fab,
+.paper-banner-example__avatar {
+  background: var(--paper-example-accent);
+  color: var(--paper-example-accent-text);
+  box-shadow: 0 10px 18px rgba(103, 80, 164, 0.22);
+}
+
+.paper-banner-example__fab-group {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+}
+
+.paper-banner-example__fab,
+.paper-banner-example__avatar,
+.paper-banner-example__folder-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.paper-banner-example__fab {
+  width: 64px;
+  height: 64px;
+  border-radius: 24px;
+}
+
+.paper-banner-example__fab--small {
+  width: 54px;
+  height: 54px;
+  border-radius: 20px;
+}
+
+.paper-banner-example__fab--medium {
+  width: 78px;
+  height: 78px;
+  border-radius: 28px;
+}
+
+.paper-banner-example__fab--large {
+  width: 108px;
+  height: 108px;
+  border-radius: 34px;
+  font-size: 34px;
+}
+
+.paper-banner-example__avatar {
+  width: 84px;
+  height: 84px;
+  border-radius: 999px;
+  font-size: 40px;
+  margin-left: auto;
+}
+
+.paper-banner-example__hero-row {
+  display: flex;
+  margin-bottom: 16px;
+}
+
+.paper-banner-example__folder-button {
+  width: 84px;
+  height: 84px;
+  border-radius: 999px;
+  box-shadow: 0 14px 26px rgba(103, 80, 164, 0.12);
+}
+
+.paper-banner-example__folder-button--raised {
+  box-shadow: 0 18px 32px rgba(103, 80, 164, 0.2);
+}
+
+.paper-banner-example__folder-icon {
+  position: relative;
+  width: 34px;
+  height: 24px;
+  border-radius: 6px;
+  background: currentColor;
+}
+
+.paper-banner-example__folder-icon::before {
+  content: '';
+  position: absolute;
+  top: -5px;
+  left: 3px;
+  width: 14px;
+  height: 8px;
+  border-radius: 4px 4px 0 0;
+  background: currentColor;
+}
+
+.paper-banner-example__progress {
+  height: 8px;
+  border-radius: 999px;
+  overflow: hidden;
+  background: var(--paper-example-panel-soft);
+  margin-bottom: 28px;
+}
+
+.paper-banner-example__progress-bar {
+  width: 64%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    var(--paper-example-accent) 0%,
+    var(--paper-example-accent-strong) 100%
+  );
+}
+
+.paper-banner-example__headline-group {
+  margin-bottom: 24px;
+}
+
+.paper-banner-example__display-large,
+.paper-banner-example__display-medium {
+  margin: 0;
+  letter-spacing: 0;
+}
+
+.paper-banner-example__display-large {
+  font-size: clamp(44px, 6vw, 72px);
+  line-height: 0.98;
+}
+
+.paper-banner-example__display-medium {
+  margin-top: 14px;
+  font-size: clamp(28px, 4vw, 44px);
+  line-height: 1.08;
+}
+
+.paper-banner-example__body {
+  margin: 20px 0 0;
+  max-width: 780px;
+  color: var(--paper-example-muted);
+  font-size: 18px;
+  line-height: 1.65;
+}
+
+.paper-banner-example__switches,
+.paper-banner-example__radios {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.paper-banner-example__switches {
+  margin-bottom: 24px;
+}
+
+.paper-banner-example__switch,
+.paper-banner-example__radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 18px;
+}
+
+.paper-banner-example__switch input,
+.paper-banner-example__radio input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.paper-banner-example__switch-control {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 54px;
+  height: 32px;
+}
+
+.paper-banner-example__switch-track {
+  width: 54px;
+  height: 32px;
+  border-radius: 999px;
+  border: 2px solid var(--paper-example-muted);
+  background: transparent;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease;
+}
+
+.paper-banner-example__switch-thumb {
+  position: absolute;
+  top: 7px;
+  left: 7px;
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  background: var(--paper-example-muted);
+  transition:
+    transform 120ms ease,
+    background-color 120ms ease;
+}
+
+.paper-banner-example__switch
+  input:checked
+  + .paper-banner-example__switch-control
+  .paper-banner-example__switch-track {
+  border-color: var(--paper-example-accent);
+  background: color-mix(in srgb, var(--paper-example-accent) 28%, transparent);
+}
+
+.paper-banner-example__switch
+  input:checked
+  + .paper-banner-example__switch-control
+  .paper-banner-example__switch-thumb {
+  transform: translateX(22px);
+  background: var(--paper-example-accent);
+}
+
+.paper-banner-example__fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 24px;
+  margin-bottom: 24px;
+}
+
+.paper-banner-example__field {
+  display: grid;
+  gap: 10px;
+  color: var(--paper-example-muted);
+  font-size: 15px;
+}
+
+.paper-banner-example__field input {
+  min-height: 64px;
+  padding: 0 18px;
+  border: 1px solid var(--paper-example-border);
+  border-radius: 20px;
+  background: var(--paper-example-panel-soft);
+  color: var(--paper-example-text);
+  font: inherit;
+}
+
+.paper-banner-example__field input::placeholder {
+  color: var(--paper-example-muted);
+}
+
+.paper-banner-example__field-input--outlined {
+  background: transparent !important;
+  border-color: var(--paper-example-accent) !important;
+}
+
+.paper-banner-example__radio-control {
+  width: 28px;
+  height: 28px;
+  border: 2px solid var(--paper-example-muted);
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.paper-banner-example__radio-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+  background: transparent;
+}
+
+.paper-banner-example__radio
+  input:checked
+  + .paper-banner-example__radio-control {
+  border-color: var(--paper-example-accent);
+}
+
+.paper-banner-example__radio
+  input:checked
+  + .paper-banner-example__radio-control
+  .paper-banner-example__radio-dot {
+  background: var(--paper-example-accent);
+}
+
+@media (min-width: 997px) {
+  .paper-home-showcase__intro {
+    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.8fr);
+    align-items: end;
+  }
+}
+
+@media (max-width: 996px) {
+  .paper-home-showcase {
+    width: min(100%, calc(100% - 16px));
+    padding: 0 16px 40px;
+    margin-top: 44px;
+  }
+
+  .paper-home-showcase__gallery {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .paper-banner-example {
+    padding: 22px;
+    border-radius: 28px;
+  }
+
+  .paper-banner-example__avatar {
+    margin-left: 0;
+  }
+
+  .paper-banner-example__fields {
+    grid-template-columns: 1fr;
+    gap: 18px;
+  }
+
+  .paper-prerelease-notice {
+    padding: 20px 22px;
+  }
+}
+
+@media (max-width: 640px) {
+  .paper-home-showcase__gallery {
+    grid-template-columns: 1fr;
+  }
+
+  .paper-home-showcase__gallery-image {
+    width: 100%;
+  }
+
+  .paper-banner-example__switch,
+  .paper-banner-example__radio {
+    font-size: 16px;
+  }
+
+  .paper-banner-example__fab-group {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .paper-banner-example__fab--large {
+    width: 88px;
+    height: 88px;
+  }
+
+  .paper-banner-example__avatar {
+    width: 72px;
+    height: 72px;
+    font-size: 30px;
+  }
+
+  .paper-prerelease-notice {
+    grid-template-columns: 1fr;
+    gap: 16px;
+    margin-bottom: 24px;
+    padding: 18px;
+  }
+}
diff --git a/docs/src/data/extendedExamples.js b/docs/src/data/extendedExamples.ts
similarity index 54%
rename from docs/src/data/extendedExamples.js
rename to docs/src/data/extendedExamples.ts
index f7b196afff..20800e2005 100644
--- a/docs/src/data/extendedExamples.js
+++ b/docs/src/data/extendedExamples.ts
@@ -1,9 +1,9 @@
-const {
-  staticCode,
+import {
   dynamicCode,
-} = require('./extendedExamples/BottomNavigationBar');
+  staticCode,
+} from './extendedExamples/BottomNavigationBar.ts';
 
-const extendedExamples = {
+export const extendedExamples = {
   'BottomNavigation.Bar': {
     'with React Navigation': {
       static: staticCode,
@@ -11,7 +11,3 @@ const extendedExamples = {
     },
   },
 };
-
-module.exports = {
-  extendedExamples,
-};
diff --git a/docs/src/data/extendedExamples/BottomNavigationBar.js b/docs/src/data/extendedExamples/BottomNavigationBar.ts
similarity index 93%
rename from docs/src/data/extendedExamples/BottomNavigationBar.js
rename to docs/src/data/extendedExamples/BottomNavigationBar.ts
index 81bb261a96..7a49db0bce 100644
--- a/docs/src/data/extendedExamples/BottomNavigationBar.js
+++ b/docs/src/data/extendedExamples/BottomNavigationBar.ts
@@ -1,7 +1,7 @@
-const staticCode = `import { Text, View } from 'react-native';
+export const staticCode = `import { Text, View } from 'react-native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { Provider, BottomNavigation } from 'react-native-paper';
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import MaterialCommunityIcons from '@react-native-vector-icons/material-design-icons';
 import {
   CommonActions,
   createStaticNavigation,
@@ -99,11 +99,11 @@ export default function App() {
   );
 }`;
 
-const dynamicCode = `import { Text, View } from 'react-native';
+export const dynamicCode = `import { Text, View } from 'react-native';
 import { NavigationContainer, CommonActions } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { Provider, BottomNavigation } from 'react-native-paper';
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import MaterialCommunityIcons from '@react-native-vector-icons/material-design-icons';
 
 function HomeScreen() {
   return (
@@ -195,8 +195,3 @@ export default function App() {
   );
 }
 `;
-
-module.exports = {
-  staticCode,
-  dynamicCode,
-};
diff --git a/docs/src/data/screenshots.js b/docs/src/data/screenshots.ts
similarity index 89%
rename from docs/src/data/screenshots.js
rename to docs/src/data/screenshots.ts
index c1afa99a6a..b7c59d424d 100644
--- a/docs/src/data/screenshots.js
+++ b/docs/src/data/screenshots.ts
@@ -1,4 +1,4 @@
-const screenshots = {
+export const screenshots = {
   ActivityIndicator: 'screenshots/activity-indicator.gif',
   Appbar: 'screenshots/appbar.png',
   'Appbar.Action': 'screenshots/appbar-action-android.png',
@@ -79,7 +79,6 @@ const screenshots = {
   },
   AnimatedFAB: 'screenshots/animated-fab.gif',
   'FAB.Group': 'screenshots/fab-group.gif',
-  HelperText: 'screenshots/helper-text.gif',
   Icon: 'screenshots/icon.png',
   IconButton: {
     default: 'screenshots/icon-button-1.png',
@@ -147,20 +146,9 @@ const screenshots = {
   },
   Text: 'screenshots/typography.png',
   TextInput: {
-    'flat (focused)': 'screenshots/textinput-flat.focused.png',
-    'flat (disabled)': 'screenshots/textinput-flat.disabled.png',
-    'outlined (focused)': 'screenshots/textinput-outlined.focused.png',
-    'outlined (disabled)': 'screenshots/textinput-outlined.disabled.png',
-  },
-  'TextInput.Affix': 'screenshots/textinput-outline.affix.png',
-  'TextInput.Icon': 'screenshots/textinput-flat.icon.png',
-  ToggleButton: 'screenshots/toggle-button.png',
-  'ToggleButton.Group': 'screenshots/toggle-button-group.gif',
-  'ToggleButton.Row': 'screenshots/toggle-button-row.gif',
+    filled: 'screenshots/text-input-filled.png',
+    outlined: 'screenshots/text-input-outlined.png',
+  },
   Tooltip: 'screenshots/tooltip.png',
   TouchableRipple: 'screenshots/touchable-ripple.gif',
 };
-
-module.exports = {
-  screenshots,
-};
diff --git a/docs/src/data/themeColors.js b/docs/src/data/themeColors.ts
similarity index 95%
rename from docs/src/data/themeColors.js
rename to docs/src/data/themeColors.ts
index f12b955341..118114da27 100644
--- a/docs/src/data/themeColors.js
+++ b/docs/src/data/themeColors.ts
@@ -1,4 +1,4 @@
-const themeColors = {
+export const themeColors = {
   ActivityIndicator: {
     '-': {
       borderColor: 'theme.colors.primary',
@@ -164,7 +164,7 @@ const themeColors = {
       'textColor/iconColor': 'theme.colors.onTertiaryContainer',
     },
     surface: {
-      backgroundColor: 'theme.colors.elevarion.level3',
+      backgroundColor: 'theme.colors.elevation.level3',
       'textColor/iconColor': 'theme.colors.primary',
     },
   },
@@ -186,21 +186,10 @@ const themeColors = {
       'textColor/iconColor': 'theme.colors.onTertiaryContainer',
     },
     surface: {
-      backgroundColor: 'theme.colors.elevarion.level3',
+      backgroundColor: 'theme.colors.elevation.level3',
       'textColor/iconColor': 'theme.colors.primary',
     },
   },
-  HelperText: {
-    disabled: {
-      textColor: 'theme.colors.onSurfaceDisabled',
-    },
-    default: {
-      textColor: 'theme.colors.onSurfaceVariant',
-    },
-    error: {
-      textColor: 'theme.colors.error',
-    },
-  },
   IconButton: {
     selected: {
       default: {
@@ -338,7 +327,3 @@ const themeColors = {
     },
   },
 };
-
-module.exports = {
-  themeColors,
-};
diff --git a/docs/src/data/versionRouteFallbacks.json b/docs/src/data/versionRouteFallbacks.json
new file mode 100644
index 0000000000..326741b5b5
--- /dev/null
+++ b/docs/src/data/versionRouteFallbacks.json
@@ -0,0 +1,17 @@
+{
+  "next": {
+    "/docs/components/Checkbox/CheckboxAndroid": "/6.x/docs/components/Checkbox/Checkbox",
+    "/docs/components/Checkbox/CheckboxIOS": "/6.x/docs/components/Checkbox/Checkbox",
+    "/docs/components/FAB/AnimatedFAB": "/6.x/docs/components/FAB/FAB",
+    "/docs/components/FAB/FABGroup": "/6.x/docs/components/FAB/FAB",
+    "/docs/components/HelperText/HelperText": "/6.x/",
+    "/docs/components/TextInput/TextInputAffix": "/6.x/docs/components/TextInput/TextInput",
+    "/docs/guides/migration-guide-to-5.0": "/6.x/docs/guides/migration"
+  },
+  "stable": {
+    "/6.x/docs/components/FAB/FABExtended": "/docs/components/FAB/FAB",
+    "/6.x/docs/components/FAB/FABMenu": "/docs/components/FAB/FAB",
+    "/6.x/docs/guides/migration": "/docs/guides/migration-guide-to-5.0",
+    "/6.x/docs/guides/rtl": "/"
+  }
+}
diff --git a/docs/src/pages/index.mdx b/docs/src/pages/index.mdx
deleted file mode 100644
index 2870fda5b7..0000000000
--- a/docs/src/pages/index.mdx
+++ /dev/null
@@ -1,63 +0,0 @@
-![paperLogo](../../static/images/sidebar-logo.svg)
-
-# Cross-platform Material Design for React Native
-
-import {Button} from 'react-native-paper';
-import GetStartedButtons from '../components/GetStartedButtons';
-import BannerExample from '../components/BannerExample';
-
-Paper is a collection of customizable and production-ready components for React Native, following Google’s Material Design guidelines.
-
-<GetStartedButtons />
-
-Or check the demo app on [iOS](https://apps.apple.com/app/react-native-paper/id1548934513) or [Android](https://play.google.com/store/apps/details?id=com.callstack.reactnativepaperexample).
-
-<BannerExample />
-
-<div class="gallery gallery-light">
-  <img src="./gallery/button.png" />
-  <img src="./gallery/input.png" />
-  <img src="./gallery/card.png" />
-</div>
-
-<div class="gallery gallery-light">
-  <img src="./gallery/searchbar.png" />
-  <img src="./gallery/appbar.png" />
-  <img src="./gallery/snackbar.png" />
-</div>
-
-<div class="gallery gallery-light">
-  <img src="./gallery/chip.png" />
-  <img src="./gallery/list.png" />
-  <img src="./gallery/list-accordion.png" />
-</div>
-
-<div class="gallery gallery-light">
-  <img src="./gallery/typography.png" />
-  <img src="./gallery/bottom-navigation.png" />
-  <img src="./gallery/fab.png" />
-</div>
-
-<div class="gallery gallery-dark">
-  <img src="./gallery/button-dark.png" />
-  <img src="./gallery/input-dark.png" />
-  <img src="./gallery/card-dark.png" />
-</div>
-
-<div class="gallery gallery-dark">
-  <img src="./gallery/searchbar-dark.png" />
-  <img src="./gallery/appbar-dark.png" />
-  <img src="./gallery/snackbar-dark.png" />
-</div>
-
-<div class="gallery gallery-dark">
-  <img src="./gallery/chip-dark.png" />
-  <img src="./gallery/list-dark.png" />
-  <img src="./gallery/list-accordion-dark.png" />
-</div>
-
-<div class="gallery gallery-dark">
-  <img src="./gallery/typography-dark.png" />
-  <img src="./gallery/bottom-navigation-dark.png" />
-  <img src="./gallery/fab-dark.png" />
-</div>
diff --git a/docs/src/utils/__tests__/themeColors.test.tsx b/docs/src/utils/__tests__/themeColors.test.tsx
deleted file mode 100644
index 4803ea7a6b..0000000000
--- a/docs/src/utils/__tests__/themeColors.test.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { getMaxNestedLevel, getUniqueNestedKeys } from '../themeColors';
-
-const Button = {
-  active: {
-    elevated: {
-      backgroundColor: 'theme.colors.elevation.level1',
-      color: 'theme.colors.primary',
-    },
-    contained: {
-      backgroundColor: 'theme.colors.primary',
-      color: 'theme.colors.onPrimary',
-    },
-    'contained-tonal': {
-      backgroundColor: 'theme.colors.secondaryContainer',
-      color: 'theme.colors.onSecondaryContainer',
-    },
-    outlined: {
-      color: 'theme.colors.primary',
-      borderColor: 'theme.colors.outline',
-    },
-    text: {
-      color: 'theme.colors.primary',
-    },
-  },
-  disabled: {
-    elevated: {
-      backgroundColor: 'theme.colors.surfaceDisabled',
-      color: 'theme.colors.onSurfaceDisabled',
-    },
-    contained: {
-      backgroundColor: 'theme.colors.surfaceDisabled',
-      color: 'theme.colors.onSurfaceDisabled',
-    },
-    'contained-tonal': {
-      backgroundColor: 'theme.colors.surfaceDisabled',
-      color: 'theme.colors.onSurfaceDisabled',
-    },
-    outlined: {
-      color: 'theme.colors.onSurfaceDisabled',
-      borderColor: 'theme.colors.surfaceDisabled',
-    },
-    text: {
-      color: 'theme.colors.onSurfaceDisabled',
-    },
-  },
-};
-
-const Card = {
-  contained: {
-    backgroundColor: 'theme.colors.surfaceVariant',
-  },
-  outlined: {
-    backgroundColor: 'theme.colors.surface',
-    borderColor: 'theme.colors.outline',
-  },
-};
-
-const Custom = {
-  active: {
-    contained: {
-      pressed: {
-        backgroundColor: 'theme.colors.primary',
-      },
-    },
-    outlined: {
-      backgroundColor: 'theme.colors.surface',
-    },
-  },
-};
-
-describe('getUniqueNestedKeys', () => {
-  it('should return an array of unique keys for flat structure', () => {
-    expect(getUniqueNestedKeys(Card)).toEqual([
-      'backgroundColor',
-      'borderColor',
-    ]);
-  });
-
-  it('should return an array of unique keys for nested structure', () => {
-    expect(getUniqueNestedKeys(Button)).toEqual([
-      'backgroundColor',
-      'color',
-      'borderColor',
-    ]);
-  });
-
-  it('should return an empty array if data object is empty', () => {
-    expect(getUniqueNestedKeys({})).toEqual([]);
-  });
-});
-
-describe('getMaxNestedLevel', () => {
-  it('should return the correct nesting level', () => {
-    const buttonLevel = getMaxNestedLevel(Button);
-    const cardLevel = getMaxNestedLevel(Card);
-
-    expect(buttonLevel).toEqual(2);
-    expect(cardLevel).toEqual(1);
-  });
-
-  it('should return 0 if the object is not nested', () => {
-    const level = getMaxNestedLevel({
-      foo: 'bar',
-    });
-    expect(level).toEqual(0);
-  });
-
-  it('should handle nested objects at different levels', () => {
-    const level = getMaxNestedLevel(Custom);
-    expect(level).toEqual(3);
-  });
-});
diff --git a/docs/src/utils/themeColors.tsx b/docs/src/utils/themeColors.tsx
index dcc099ec58..befc487d80 100644
--- a/docs/src/utils/themeColors.tsx
+++ b/docs/src/utils/themeColors.tsx
@@ -23,9 +23,9 @@ export const getUniqueNestedKeys = (data: DataObject): string[] => {
 export const getMaxNestedLevel = (obj: DataObject): number => {
   let maxNestedLevel = 0;
 
-  for (const key in obj) {
-    if (typeof obj[key] === 'object') {
-      const nestedLevel = getMaxNestedLevel(obj[key] as DataObject) + 1;
+  for (const value of Object.values(obj)) {
+    if (typeof value === 'object') {
+      const nestedLevel = getMaxNestedLevel(value) + 1;
       maxNestedLevel = Math.max(maxNestedLevel, nestedLevel);
     }
   }
diff --git a/docs/src/utils/themes.tsx b/docs/src/utils/themes.tsx
index 13738cca61..182298a21d 100644
--- a/docs/src/utils/themes.tsx
+++ b/docs/src/utils/themes.tsx
@@ -1,13 +1,11 @@
 import {
   argbFromHex,
   themeFromSourceColor,
-  // eslint-disable-next-line import/no-unresolved
 } from '@material/material-color-utilities';
 import camelCase from 'camelcase';
 import Color from 'color';
 
 type ARGBTheme = ReturnType<typeof argbThemeFromColor>;
-type CSSTheme = Record<keyof ARGBTheme, string>;
 
 type RGBColorList = {
   primary: string;
@@ -47,22 +45,22 @@ const argbThemeFromColor = (
   return themeFromSourceColor(argbFromHex(color)).schemes[type].toJSON();
 };
 
+const hexFromArgb = (value: number) =>
+  `#${(value & 0xffffff).toString(16).padStart(6, '0')}`;
+
 const argbThemeToHexTheme = (theme: ARGBTheme) => {
   return Object.fromEntries(
-    //@ts-ignore
-    Object.entries(theme).map(([key, value]) => [key, Color(value).hex()])
-  ) as CSSTheme;
+    Object.entries(theme).map(([key, value]) => [key, hexFromArgb(value)])
+  );
 };
 
 const argbThemeToRgbTheme = (theme: ARGBTheme) => {
   return Object.fromEntries(
-    //@ts-ignore
     Object.entries(theme).map(([key, value]) => [
       key,
-      //@ts-ignore
-      Color(value).rgb().string(),
+      Color(hexFromArgb(value)).rgb().string(),
     ])
-  ) as CSSTheme;
+  );
 };
 
 export const hexThemeFromColor = (
diff --git a/docs/src/utils/versionRoutes.ts b/docs/src/utils/versionRoutes.ts
new file mode 100644
index 0000000000..a20e6fe8e0
--- /dev/null
+++ b/docs/src/utils/versionRoutes.ts
@@ -0,0 +1,40 @@
+import routeFallbacks from '../data/versionRouteFallbacks.json';
+
+const NEXT_VERSION_PREFIX = '/6.x';
+const NEXT_HOME_ROUTE = '/6.x/';
+const STABLE_HOME_ROUTE = '/';
+const stableFallbacks: Record<string, string> = routeFallbacks.stable;
+const nextFallbacks: Record<string, string> = routeFallbacks.next;
+
+const stripNextVersionPrefix = (routePath: string) => {
+  const stableRoute = routePath.replace(/^\/6\.x(?=\/|$)/, '');
+
+  return stableRoute === '' ? STABLE_HOME_ROUTE : stableRoute;
+};
+
+export const getStableRoute = (routePath: string) => {
+  if (!routePath.startsWith(NEXT_VERSION_PREFIX)) {
+    return routePath || STABLE_HOME_ROUTE;
+  }
+
+  if (routePath === NEXT_VERSION_PREFIX || routePath === NEXT_HOME_ROUTE) {
+    return STABLE_HOME_ROUTE;
+  }
+
+  return stableFallbacks[routePath] ?? stripNextVersionPrefix(routePath);
+};
+
+export const getNextRoute = (routePath: string) => {
+  if (routePath.startsWith(NEXT_VERSION_PREFIX)) {
+    return routePath;
+  }
+
+  if (routePath === STABLE_HOME_ROUTE || routePath === '') {
+    return NEXT_HOME_ROUTE;
+  }
+
+  return nextFallbacks[routePath] ?? `${NEXT_VERSION_PREFIX}${routePath}`;
+};
+
+export const hasSameStableRoute = (routePath: string) =>
+  getStableRoute(routePath) === stripNextVersionPrefix(routePath);
diff --git a/docs/static/llms.txt b/docs/static/llms.txt
deleted file mode 100644
index 46da789d41..0000000000
--- a/docs/static/llms.txt
+++ /dev/null
@@ -1,80 +0,0 @@
-# React Native Paper
-
-> Material Design components for React Native.
-> See the full documentation at: https://callstack.github.io/react-native-paper/
-
-## Getting Started
-
-- Install: npm install react-native-paper react-native-safe-area-context
-- Wrap your app with PaperProvider
-- Default theme is Material You (MD3); set theme.version: 2 for MD2
-- Requires React Native 0.72+ and React 18+
-
-## Guides
-
-- Getting Started: https://callstack.github.io/react-native-paper/docs/guides/getting-started
-- Theming: https://callstack.github.io/react-native-paper/docs/guides/theming
-- Icons: https://callstack.github.io/react-native-paper/docs/guides/icons
-- Fonts: https://callstack.github.io/react-native-paper/docs/guides/fonts
-- React Native Web: https://callstack.github.io/react-native-paper/docs/guides/react-native-web
-- Migration to v5: https://callstack.github.io/react-native-paper/docs/guides/migration-guide-to-5.0
-- Recommended Libraries: https://callstack.github.io/react-native-paper/docs/guides/recommended-libraries
-- Contributing: https://callstack.github.io/react-native-paper/docs/guides/contributing
-- Bottom Navigation: https://callstack.github.io/react-native-paper/docs/guides/bottom-navigation
-- Ripple Effect: https://callstack.github.io/react-native-paper/docs/guides/ripple-effect
-
-## Components
-
-- ActivityIndicator: https://callstack.github.io/react-native-paper/docs/components/ActivityIndicator
-- Appbar: https://callstack.github.io/react-native-paper/docs/components/Appbar
-- Avatar: https://callstack.github.io/react-native-paper/docs/components/Avatar
-- Badge: https://callstack.github.io/react-native-paper/docs/components/Badge
-- Banner: https://callstack.github.io/react-native-paper/docs/components/Banner
-- BottomNavigation: https://callstack.github.io/react-native-paper/docs/components/BottomNavigation
-- Button: https://callstack.github.io/react-native-paper/docs/components/Button
-- Card: https://callstack.github.io/react-native-paper/docs/components/Card
-- Checkbox: https://callstack.github.io/react-native-paper/docs/components/Checkbox
-- Chip: https://callstack.github.io/react-native-paper/docs/components/Chip
-- DataTable: https://callstack.github.io/react-native-paper/docs/components/DataTable
-- Dialog: https://callstack.github.io/react-native-paper/docs/components/Dialog
-- Divider: https://callstack.github.io/react-native-paper/docs/components/Divider
-- Drawer: https://callstack.github.io/react-native-paper/docs/components/Drawer
-- FAB: https://callstack.github.io/react-native-paper/docs/components/FAB
-- HelperText: https://callstack.github.io/react-native-paper/docs/components/HelperText
-- IconButton: https://callstack.github.io/react-native-paper/docs/components/IconButton
-- Icon: https://callstack.github.io/react-native-paper/docs/components/Icon
-- List: https://callstack.github.io/react-native-paper/docs/components/List
-- Menu: https://callstack.github.io/react-native-paper/docs/components/Menu
-- Modal: https://callstack.github.io/react-native-paper/docs/components/Modal
-- Portal: https://callstack.github.io/react-native-paper/docs/components/Portal
-- ProgressBar: https://callstack.github.io/react-native-paper/docs/components/ProgressBar
-- RadioButton: https://callstack.github.io/react-native-paper/docs/components/RadioButton
-- Searchbar: https://callstack.github.io/react-native-paper/docs/components/Searchbar
-- SegmentedButtons: https://callstack.github.io/react-native-paper/docs/components/SegmentedButtons
-- Snackbar: https://callstack.github.io/react-native-paper/docs/components/Snackbar
-- Surface: https://callstack.github.io/react-native-paper/docs/components/Surface
-- Switch: https://callstack.github.io/react-native-paper/docs/components/Switch
-- Text: https://callstack.github.io/react-native-paper/docs/components/Text
-- TextInput: https://callstack.github.io/react-native-paper/docs/components/TextInput
-- TouchableRipple: https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
-- Tooltip: https://callstack.github.io/react-native-paper/docs/components/Tooltip
-
-## Theming
-
-- Theme object accepts colors, dark, roundness, fonts, animation, and version properties
-- Use useTheme() hook or ThemeProvider for nested theme overrides
-- MD3 (Material You) is the default; set version: 2 for MD2 compatibility
-- See theming guide: https://callstack.github.io/react-native-paper/docs/guides/theming
-
-## Provider Pattern
-
-- Wrap root component with PaperProvider (required)
-- PaperProvider accepts an optional theme prop
-- Supports theming with React Navigation via react-native-paper theming integration
-
-## Important Notes
-
-- This is a cross-platform library (iOS, Android, web)
-- Built with TypeScript
-- MIT licensed
-- Maintained by Callstack
diff --git a/docs/static/screenshots/textinput-flat.disabled.png b/docs/static/screenshots/textinput-flat.disabled.png
deleted file mode 100644
index 5c47f3dcb1..0000000000
Binary files a/docs/static/screenshots/textinput-flat.disabled.png and /dev/null differ
diff --git a/docs/static/screenshots/textinput-flat.focused.png b/docs/static/screenshots/textinput-flat.focused.png
deleted file mode 100644
index 209ad28539..0000000000
Binary files a/docs/static/screenshots/textinput-flat.focused.png and /dev/null differ
diff --git a/docs/static/screenshots/textinput-flat.icon.png b/docs/static/screenshots/textinput-flat.icon.png
deleted file mode 100644
index 9de68a4bc9..0000000000
Binary files a/docs/static/screenshots/textinput-flat.icon.png and /dev/null differ
diff --git a/docs/static/screenshots/textinput-outline.affix.png b/docs/static/screenshots/textinput-outline.affix.png
deleted file mode 100644
index 410ecbd556..0000000000
Binary files a/docs/static/screenshots/textinput-outline.affix.png and /dev/null differ
diff --git a/docs/static/screenshots/textinput-outlined.disabled.png b/docs/static/screenshots/textinput-outlined.disabled.png
deleted file mode 100644
index 0bd3763260..0000000000
Binary files a/docs/static/screenshots/textinput-outlined.disabled.png and /dev/null differ
diff --git a/docs/static/screenshots/textinput-outlined.focused.png b/docs/static/screenshots/textinput-outlined.focused.png
deleted file mode 100644
index 6001c1cdd1..0000000000
Binary files a/docs/static/screenshots/textinput-outlined.focused.png and /dev/null differ
diff --git a/docs/theme/Outline.tsx b/docs/theme/Outline.tsx
new file mode 100644
index 0000000000..ded2f49549
--- /dev/null
+++ b/docs/theme/Outline.tsx
@@ -0,0 +1,38 @@
+import { useI18n } from '@rspress/core/dist/runtime/index.js';
+import {
+  EditLink,
+  ReadPercent,
+  Toc,
+  useDynamicToc,
+  useEditLink,
+} from '@rspress/core/dist/theme/index.js';
+
+export default function Outline() {
+  const t = useI18n();
+  const headers = useDynamicToc();
+  const editLink = useEditLink();
+
+  if (headers.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="rp-outline">
+      <div className="rp-outline__title">
+        {t('outlineTitle')}
+        <ReadPercent size={14} strokeWidth={2} />
+      </div>
+      <nav className="rp-outline__toc rp-scrollbar">
+        <Toc />
+      </nav>
+      {editLink ? (
+        <>
+          <div className="rp-outline__divider" />
+          <div className="rp-outline__bottom">
+            <EditLink isOutline />
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}
diff --git a/docs/theme/index.tsx b/docs/theme/index.tsx
new file mode 100644
index 0000000000..3cd7557c48
--- /dev/null
+++ b/docs/theme/index.tsx
@@ -0,0 +1,34 @@
+import { Fragment, type ComponentProps } from 'react';
+
+import { HomeBanner } from '@callstack/rspress-theme';
+import { Layout as BasicLayout } from '@rspress/core/dist/theme/index.js';
+
+import Outline from './Outline';
+import PaperHomeShowcase from '../src/components/PaperHomeShowcase';
+import PaperVersionSelector from '../src/components/PaperVersionSelector';
+import VersionedPrereleaseNotice from '../src/components/VersionedPrereleaseNotice';
+
+type LayoutProps = ComponentProps<typeof BasicLayout>;
+
+const Layout = (props: LayoutProps) => (
+  <BasicLayout
+    {...props}
+    afterFeatures={
+      <Fragment>
+        <PaperHomeShowcase />
+        <HomeBanner
+          buttonText="Let's talk"
+          description="We've spent years building full-stack, cross-platform apps and solving tough technical challenges."
+          headline="Need React or React Native expertise you can count on?"
+          href="https://www.callstack.com/contact-us"
+        />
+      </Fragment>
+    }
+    afterNavMenu={<PaperVersionSelector />}
+    afterOutline={false}
+    beforeDocContent={<VersionedPrereleaseNotice />}
+  />
+);
+
+export * from '@rspress/core/dist/theme/index.js';
+export { Layout, Outline };
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index 56f834939e..3b8c64a185 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -2,7 +2,9 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "paths": {
-      "react-native-paper": ["./src"]
+      "@docs/*": ["./src/*"],
+      "react-native-paper": ["../src/index"]
     }
-  }
+  },
+  "include": ["**/*.ts", "**/*.tsx"]
 }
diff --git a/eslint-local-rules/index.js b/eslint-local-rules/index.js
deleted file mode 100644
index 04cafac316..0000000000
--- a/eslint-local-rules/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-Object.assign(exports, require('./no-import-react-forwardref'));
-Object.assign(exports, require('./no-react-forwardref-usage'));
diff --git a/eslint-local-rules/no-import-react-forwardref.js b/eslint-local-rules/no-import-react-forwardref.js
deleted file mode 100644
index dff3cb07c9..0000000000
--- a/eslint-local-rules/no-import-react-forwardref.js
+++ /dev/null
@@ -1,27 +0,0 @@
-exports['no-import-react-forwardref'] = {
-  meta: {
-    docs: {
-      description: 'Disallow importing of React.forwardRef',
-      category: 'Possible Errors',
-      recommended: false,
-    },
-    schema: [],
-  },
-  create(context) {
-    return {
-      ImportDeclaration(node) {
-        if (node.source.value !== 'react') return;
-
-        for (const specifier of node.specifiers) {
-          if (specifier.type !== 'ImportSpecifier') continue;
-          if (specifier.imported.name !== 'forwardRef') continue;
-
-          context.report({
-            loc: specifier.loc,
-            message: 'Import forwardRef from src/utils/forwardRef instead',
-          });
-        }
-      },
-    };
-  },
-};
diff --git a/eslint-local-rules/no-react-forwardref-usage.js b/eslint-local-rules/no-react-forwardref-usage.js
deleted file mode 100644
index e2d16a1645..0000000000
--- a/eslint-local-rules/no-react-forwardref-usage.js
+++ /dev/null
@@ -1,28 +0,0 @@
-exports['no-react-forwardref-usage'] = {
-  meta: {
-    docs: {
-      description: 'Disallow usage of React.forwardRef',
-      category: 'Possible Errors',
-      recommended: false,
-    },
-    schema: [],
-  },
-  create(context) {
-    return {
-      CallExpression(node) {
-        if (node.callee?.type !== 'MemberExpression') return;
-
-        const { callee } = node;
-        if (callee.object.type !== 'Identifier') return;
-        if (callee.object.name !== 'React') return;
-        if (callee.property.type !== 'Identifier') return;
-        if (callee.property.name !== 'forwardRef') return;
-
-        context.report({
-          loc: callee.loc,
-          message: 'Use forwardRef from src/utils/forwardRef instead',
-        });
-      },
-    };
-  },
-};
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000000..ac6e65951f
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,258 @@
+import callstack from '@callstack/eslint-config/react-native.flat.js';
+import { defineConfig } from 'eslint/config';
+import testingLibrary from 'eslint-plugin-testing-library';
+import tseslint from 'typescript-eslint';
+
+const testingLibraryReact = testingLibrary.configs['flat/react'];
+
+export default defineConfig(
+  {
+    ignores: [
+      // jest
+      'coverage/',
+      'cache/jest/',
+      'jest/testSetup.js',
+      '**/__fixtures__/',
+      '__ts-tests__/',
+
+      // Build
+      'build/',
+      'dist/',
+      'web-build/',
+      'docs/.cache-loader/',
+      'docs/build/',
+      'docs/dist/',
+      'docs/docs/components/',
+      'docs/public/',
+      'example/coverage/',
+      'example/dist/',
+
+      // generated docs
+      'docs/5.x/component-docs.json',
+      'docs/5.x/_nav.json',
+      'docs/5.x/docs/_meta.json',
+      'docs/5.x/docs/guides/_meta.json',
+      'docs/5.x/docs/components/',
+      'docs/6.x/docs/components/',
+
+      // generated by bob
+      'lib/',
+
+      // Expo
+      'example/.expo/',
+      'example/android/',
+      'example/ios/',
+    ],
+  },
+  callstack,
+  {
+    plugins: {
+      '@typescript-eslint': tseslint.plugin,
+    },
+    languageOptions: {
+      parserOptions: {
+        project: [
+          './tsconfig.source.json',
+          './docs/tsconfig.json',
+          './example/tsconfig.json',
+        ],
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    rules: {
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrors: 'none',
+        },
+      ],
+
+      'import/no-extraneous-dependencies': [
+        'error',
+        {
+          devDependencies: true,
+          packageDir: ['.', './docs', './example'],
+        },
+      ],
+      'import/order': [
+        'error',
+        {
+          groups: [
+            ['external', 'builtin'],
+            'internal',
+            ['sibling', 'parent'],
+            'index',
+          ],
+          pathGroups: [
+            {
+              pattern: '@(react|react-native)',
+              group: 'external',
+              position: 'before',
+            },
+            {
+              pattern: '@src/**',
+              group: 'internal',
+            },
+          ],
+          pathGroupsExcludedImportTypes: ['internal', 'react'],
+          'newlines-between': 'always',
+          alphabetize: {
+            order: 'asc',
+            caseInsensitive: true,
+          },
+        },
+      ],
+
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            {
+              name: 'react-native',
+              importNames: ['Animated', 'PanResponder'],
+              message:
+                'Use react-native-reanimated for animations and react-native-gesture-handler for gestures.',
+            },
+          ],
+        },
+      ],
+
+      '@react-native/platform-colors': 'error',
+
+      'promise/no-callback-in-promise': 'error',
+      'promise/no-nesting': 'error',
+      'promise/no-promise-in-callback': 'error',
+      'promise/no-return-in-finally': 'error',
+      'promise/prefer-await-to-then': 'error',
+      'promise/valid-params': 'error',
+
+      'react-hooks/exhaustive-deps': 'error',
+
+      'react/no-multi-comp': 'error',
+      'react/react-in-jsx-scope': 'off',
+
+      'react-native/no-color-literals': 'error',
+      'react-native/no-inline-styles': 'error',
+      'react-native/no-raw-text': 'off',
+      'react-native/no-unused-styles': 'error',
+
+      'react-native-a11y/has-valid-accessibility-descriptors': 'off',
+    },
+    settings: {
+      'import/extensions': ['.js', '.mjs', '.ts', '.tsx'],
+      'import/parsers': {
+        '@typescript-eslint/parser': ['.ts', '.tsx'],
+      },
+      'import/resolver': {
+        node: {
+          extensions: ['.js', '.mjs', '.ts', '.tsx'],
+        },
+      },
+    },
+  },
+  {
+    files: ['**/*.{ts,tsx}'],
+    rules: {
+      '@typescript-eslint/no-non-null-assertion': 'error',
+      '@typescript-eslint/no-unsafe-type-assertion': 'error',
+      '@typescript-eslint/no-unnecessary-type-assertion': 'error',
+    },
+  },
+  {
+    files: ['**/*.test.{js,ts,tsx}', '**/__tests__/**/*.{js,ts,tsx}'],
+
+    ...testingLibraryReact,
+
+    settings: {
+      ...testingLibraryReact.settings,
+
+      'testing-library/custom-renders': ['render'],
+      'testing-library/utils-module': 'test-utils',
+    },
+    rules: {
+      ...testingLibraryReact.rules,
+
+      'no-restricted-syntax': [
+        'error',
+        {
+          selector:
+            "MemberExpression[property.name='props']:not([object.type='ThisExpression'])",
+          message:
+            'Do not read TestInstance props directly. Prefer user-visible assertions.',
+        },
+        {
+          selector:
+            'CallExpression[callee.object.name="root"][callee.property.name=/^(find|findAll|findByType|findAllByType|findByProps|findAllByProps|query|queryAll)$/], CallExpression[callee.object.property.name="root"][callee.property.name=/^(find|findAll|findByType|findAllByType|findByProps|findAllByProps|query|queryAll)$/]',
+          message:
+            'Do not traverse react-test-renderer trees directly. Prefer user-visible queries.',
+        },
+        {
+          selector:
+            "CallExpression[callee.object.name='fireEvent'][callee.property.name=/^(press|longPress|changeText|scroll)$/]",
+          message: 'Use userEvent for user interactions instead of fireEvent.',
+        },
+        {
+          selector:
+            "CallExpression[callee.name='fireEvent'][arguments.1.value=/^(press|longPress|onPress|onLongPress)$/][arguments.length=2]",
+          message: 'Use userEvent for user interactions instead of fireEvent.',
+        },
+        {
+          selector:
+            "CallExpression[callee.name='fireEvent'][arguments.1.value=/^(changeText|onChangeText|scroll|onScroll)$/]",
+          message: 'Use userEvent for user interactions instead of fireEvent.',
+        },
+      ],
+
+      'jest/expect-expect': 'error',
+      'jest/no-commented-out-tests': 'error',
+      'jest/no-disabled-tests': 'error',
+      'jest/prefer-importing-jest-globals': 'error',
+
+      'react-native/no-inline-styles': 'off',
+
+      'testing-library/no-await-sync-events': 'off',
+      'testing-library/no-debugging-utils': 'error',
+    },
+  },
+  {
+    files: [
+      'src/components/__tests__/Appbar/Appbar.test.tsx',
+      'src/components/__tests__/Dialog.test.tsx',
+      'src/components/__tests__/Searchbar.test.tsx',
+    ],
+    rules: {
+      'testing-library/no-node-access': 'off',
+    },
+  },
+  {
+    files: ['src/components/__tests__/Tooltip.test.tsx'],
+    rules: {
+      'testing-library/no-node-access': 'off',
+      'testing-library/prefer-screen-queries': 'off',
+      'testing-library/render-result-naming-convention': 'off',
+    },
+  },
+  {
+    files: ['example/**/*.{js,ts,tsx}'],
+    rules: {
+      'react/prop-types': 'off',
+    },
+    settings: {
+      'import/core-modules': ['react-native-paper'],
+    },
+  },
+  {
+    files: ['docs/**/*.{js,ts,tsx}'],
+    settings: {
+      'import/core-modules': ['@rspress/core/runtime', 'react-native-paper'],
+    },
+  },
+  {
+    files: ['eslint.config.mjs'],
+    rules: {
+      'import/no-unresolved': 'off',
+    },
+  }
+);
diff --git a/example/.eslintrc b/example/.eslintrc
deleted file mode 100644
index 141d6b426d..0000000000
--- a/example/.eslintrc
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "extends": "../.eslintrc",
-
-  "settings": {
-    "import/core-modules": ["react-native-paper", "react-native-paper/react-navigation"]
-  },
-
-  "rules": {
-    "react/prop-types": "off"
-  }
-}
diff --git a/example/.fingerprintignore b/example/.fingerprintignore
new file mode 100644
index 0000000000..b3c5af777d
--- /dev/null
+++ b/example/.fingerprintignore
@@ -0,0 +1,2 @@
+# built by pod install, would make the fingerprint differ from the one EAS computes
+**/expo-modules-jsi/apple/Products/**
diff --git a/example/.gitignore b/example/.gitignore
index 42b97fb625..59ab056180 100644
--- a/example/.gitignore
+++ b/example/.gitignore
@@ -1,12 +1,9 @@
 # XDE
 #
 .expo/
-/coverage
+/dist
 
-# Yarn
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
\ No newline at end of file
+# Expo CNG / prebuild output: native projects are regenerated by
+# `expo prebuild` (and `expo run:*`) from app.json + config plugins.
+/android
+/ios
diff --git a/example/.nvmrc b/example/.nvmrc
new file mode 120000
index 0000000000..3d48ffa461
--- /dev/null
+++ b/example/.nvmrc
@@ -0,0 +1 @@
+../.nvmrc
\ No newline at end of file
diff --git a/example/android/.gitignore b/example/android/.gitignore
deleted file mode 100644
index 8a6be07718..0000000000
--- a/example/android/.gitignore
+++ /dev/null
@@ -1,16 +0,0 @@
-# OSX
-#
-.DS_Store
-
-# Android/IntelliJ
-#
-build/
-.idea
-.gradle
-local.properties
-*.iml
-*.hprof
-.cxx/
-
-# Bundle artifacts
-*.jsbundle
diff --git a/example/android/app/build.gradle b/example/android/app/build.gradle
deleted file mode 100644
index b563ea2eaf..0000000000
--- a/example/android/app/build.gradle
+++ /dev/null
@@ -1,176 +0,0 @@
-apply plugin: "com.android.application"
-apply plugin: "org.jetbrains.kotlin.android"
-apply plugin: "com.facebook.react"
-
-def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
-
-/**
- * This is the configuration block to customize your React Native Android app.
- * By default you don't need to apply any configuration, just uncomment the lines you need.
- */
-react {
-    entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
-    reactNativeDir = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
-    hermesCommand = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsolutePath() + "/sdks/hermesc/%OS-BIN%/hermesc"
-    codegenDir = new File(["node", "--print", "require.resolve('@react-native/codegen/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
-
-    // Use Expo CLI to bundle the app, this ensures the Metro config
-    // works correctly with Expo projects.
-    cliFile = new File(["node", "--print", "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"].execute(null, rootDir).text.trim())
-    bundleCommand = "export:embed"
-
-    /* Folders */
-     //   The root of your project, i.e. where "package.json" lives. Default is '../..'
-    // root = file("../../")
-    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
-    // reactNativeDir = file("../../node_modules/react-native")
-    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
-    // codegenDir = file("../../node_modules/@react-native/codegen")
-
-    /* Variants */
-    //   The list of variants to that are debuggable. For those we're going to
-    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
-    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
-    // debuggableVariants = ["liteDebug", "prodDebug"]
-
-    /* Bundling */
-    //   A list containing the node command and its flags. Default is just 'node'.
-    // nodeExecutableAndArgs = ["node"]
-
-    //
-    //   The path to the CLI configuration file. Default is empty.
-    // bundleConfig = file(../rn-cli.config.js)
-    //
-    //   The name of the generated asset file containing your JS bundle
-    // bundleAssetName = "MyApplication.android.bundle"
-    //
-    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
-    // entryFile = file("../js/MyApplication.android.js")
-    //
-    //   A list of extra flags to pass to the 'bundle' commands.
-    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
-    // extraPackagerArgs = []
-
-    /* Hermes Commands */
-    //   The hermes compiler command to run. By default it is 'hermesc'
-    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
-    //
-    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
-    // hermesFlags = ["-O", "-output-source-map"]
-
-    /* Autolinking */
-    autolinkLibrariesWithApp()
-}
-
-/**
- * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
- */
-def enableProguardInReleaseBuilds = (findProperty('android.enableProguardInReleaseBuilds') ?: false).toBoolean()
-
-/**
- * The preferred build flavor of JavaScriptCore (JSC)
- *
- * For example, to use the international variant, you can use:
- * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
- *
- * The international variant includes ICU i18n library and necessary data
- * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
- * give correct results when using with locales other than en-US. Note that
- * this variant is about 6MiB larger per architecture than default.
- */
-def jscFlavor = 'org.webkit:android-jsc:+'
-
-android {
-    ndkVersion rootProject.ext.ndkVersion
-
-    buildToolsVersion rootProject.ext.buildToolsVersion
-    compileSdk rootProject.ext.compileSdkVersion
-
-    namespace 'com.callstack.reactnativepaperexample'
-    defaultConfig {
-        applicationId 'com.callstack.reactnativepaperexample'
-        minSdkVersion rootProject.ext.minSdkVersion
-        targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 30
-        versionName "3.16.0"
-    }
-    signingConfigs {
-        debug {
-            storeFile file('debug.keystore')
-            storePassword 'android'
-            keyAlias 'androiddebugkey'
-            keyPassword 'android'
-        }
-    }
-    buildTypes {
-        debug {
-            signingConfig signingConfigs.debug
-        }
-        release {
-            // Caution! In production, you need to generate your own keystore file.
-            // see https://reactnative.dev/docs/signed-apk-android.
-            signingConfig signingConfigs.debug
-            shrinkResources (findProperty('android.enableShrinkResourcesInReleaseBuilds')?.toBoolean() ?: false)
-            minifyEnabled enableProguardInReleaseBuilds
-            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
-            crunchPngs (findProperty('android.enablePngCrunchInReleaseBuilds')?.toBoolean() ?: true)
-        }
-    }
-    packagingOptions {
-        jniLibs {
-            useLegacyPackaging (findProperty('expo.useLegacyPackaging')?.toBoolean() ?: false)
-        }
-    }
-    androidResources {
-        ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:!CVS:!thumbs.db:!picasa.ini:!*~'
-    }
-}
-
-// Apply static values from `gradle.properties` to the `android.packagingOptions`
-// Accepts values in comma delimited lists, example:
-// android.packagingOptions.pickFirsts=/LICENSE,**/picasa.ini
-["pickFirsts", "excludes", "merges", "doNotStrip"].each { prop ->
-    // Split option: 'foo,bar' -> ['foo', 'bar']
-    def options = (findProperty("android.packagingOptions.$prop") ?: "").split(",");
-    // Trim all elements in place.
-    for (i in 0..<options.size()) options[i] = options[i].trim();
-    // `[] - ""` is essentially `[""].filter(Boolean)` removing all empty strings.
-    options -= ""
-
-    if (options.length > 0) {
-        println "android.packagingOptions.$prop += $options ($options.length)"
-        // Ex: android.packagingOptions.pickFirsts += '**/SCCS/**'
-        options.each {
-            android.packagingOptions[prop] += it
-        }
-    }
-}
-
-dependencies {
-    // The version of react-native is set by the React Native Gradle Plugin
-    implementation("com.facebook.react:react-android")
-
-    def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
-    def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
-    def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";
-
-    if (isGifEnabled) {
-        // For animated gif support
-        implementation("com.facebook.fresco:animated-gif:${reactAndroidLibs.versions.fresco.get()}")
-    }
-
-    if (isWebpEnabled) {
-        // For webp support
-        implementation("com.facebook.fresco:webpsupport:${reactAndroidLibs.versions.fresco.get()}")
-        if (isWebpAnimatedEnabled) {
-            // Animated webp support
-            implementation("com.facebook.fresco:animated-webp:${reactAndroidLibs.versions.fresco.get()}")
-        }
-    }
-
-    if (hermesEnabled.toBoolean()) {
-        implementation("com.facebook.react:hermes-android")
-    } else {
-        implementation jscFlavor
-    }
-}
diff --git a/example/android/app/debug.keystore b/example/android/app/debug.keystore
deleted file mode 100644
index 364e105ed3..0000000000
Binary files a/example/android/app/debug.keystore and /dev/null differ
diff --git a/example/android/app/proguard-rules.pro b/example/android/app/proguard-rules.pro
deleted file mode 100644
index 551eb41da2..0000000000
--- a/example/android/app/proguard-rules.pro
+++ /dev/null
@@ -1,14 +0,0 @@
-# Add project specific ProGuard rules here.
-# By default, the flags in this file are appended to flags specified
-# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
-# You can edit the include path and order by changing the proguardFiles
-# directive in build.gradle.
-#
-# For more details, see
-#   http://developer.android.com/guide/developing/tools/proguard.html
-
-# react-native-reanimated
--keep class com.swmansion.reanimated.** { *; }
--keep class com.facebook.react.turbomodule.** { *; }
-
-# Add any project specific keep options here:
diff --git a/example/android/app/src/debug/AndroidManifest.xml b/example/android/app/src/debug/AndroidManifest.xml
deleted file mode 100644
index 3ec2507bab..0000000000
--- a/example/android/app/src/debug/AndroidManifest.xml
+++ /dev/null
@@ -1,7 +0,0 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools">
-
-    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
-
-    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
-</manifest>
diff --git a/example/android/app/src/main/AndroidManifest.xml b/example/android/app/src/main/AndroidManifest.xml
deleted file mode 100644
index 2e9f1dfc02..0000000000
--- a/example/android/app/src/main/AndroidManifest.xml
+++ /dev/null
@@ -1,34 +0,0 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
-  <uses-permission android:name="android.permission.INTERNET"/>
-  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
-  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
-  <uses-permission android:name="android.permission.VIBRATE"/>
-  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
-  <queries>
-    <intent>
-      <action android:name="android.intent.action.VIEW"/>
-      <category android:name="android.intent.category.BROWSABLE"/>
-      <data android:scheme="https"/>
-    </intent>
-  </queries>
-  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:supportsRtl="true">
-    <meta-data android:name="expo.modules.updates.ENABLED" android:value="true"/>
-    <meta-data android:name="expo.modules.updates.EXPO_RUNTIME_VERSION" android:value="@string/expo_runtime_version"/>
-    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
-    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
-    <meta-data android:name="expo.modules.updates.EXPO_UPDATE_URL" android:value="https://u.expo.dev/ba8f5139-58fe-48f0-b2f2-2d675b6eb2d4"/>
-    <activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="unspecified">
-      <intent-filter>
-        <action android:name="android.intent.action.MAIN"/>
-        <category android:name="android.intent.category.LAUNCHER"/>
-      </intent-filter>
-      <intent-filter>
-        <action android:name="android.intent.action.VIEW"/>
-        <category android:name="android.intent.category.DEFAULT"/>
-        <category android:name="android.intent.category.BROWSABLE"/>
-        <data android:scheme="com.callstack.reactnativepaperexample"/>
-        <data android:scheme="exp+react-native-paper-example"/>
-      </intent-filter>
-    </activity>
-  </application>
-</manifest>
\ No newline at end of file
diff --git a/example/android/app/src/main/java/com/callstack/reactnativepaperexample/MainActivity.kt b/example/android/app/src/main/java/com/callstack/reactnativepaperexample/MainActivity.kt
deleted file mode 100644
index 9c5d6f5f65..0000000000
--- a/example/android/app/src/main/java/com/callstack/reactnativepaperexample/MainActivity.kt
+++ /dev/null
@@ -1,65 +0,0 @@
-package com.callstack.reactnativepaperexample
-import expo.modules.splashscreen.SplashScreenManager
-
-import android.os.Build
-import android.os.Bundle
-
-import com.facebook.react.ReactActivity
-import com.facebook.react.ReactActivityDelegate
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
-import com.facebook.react.defaults.DefaultReactActivityDelegate
-
-import expo.modules.ReactActivityDelegateWrapper
-
-class MainActivity : ReactActivity() {
-  override fun onCreate(savedInstanceState: Bundle?) {
-    // Set the theme to AppTheme BEFORE onCreate to support
-    // coloring the background, status bar, and navigation bar.
-    // This is required for expo-splash-screen.
-    // setTheme(R.style.AppTheme);
-    // @generated begin expo-splashscreen - expo prebuild (DO NOT MODIFY) sync-f3ff59a738c56c9a6119210cb55f0b613eb8b6af
-    SplashScreenManager.registerOnActivity(this)
-    // @generated end expo-splashscreen
-    super.onCreate(null)
-  }
-
-  /**
-   * Returns the name of the main component registered from JavaScript. This is used to schedule
-   * rendering of the component.
-   */
-  override fun getMainComponentName(): String = "main"
-
-  /**
-   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
-   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
-   */
-  override fun createReactActivityDelegate(): ReactActivityDelegate {
-    return ReactActivityDelegateWrapper(
-          this,
-          BuildConfig.IS_NEW_ARCHITECTURE_ENABLED,
-          object : DefaultReactActivityDelegate(
-              this,
-              mainComponentName,
-              fabricEnabled
-          ){})
-  }
-
-  /**
-    * Align the back button behavior with Android S
-    * where moving root activities to background instead of finishing activities.
-    * @see <a href="https://developer.android.com/reference/android/app/Activity#onBackPressed()">onBackPressed</a>
-    */
-  override fun invokeDefaultOnBackPressed() {
-      if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.R) {
-          if (!moveTaskToBack(false)) {
-              // For non-root activities, use the default implementation to finish them.
-              super.invokeDefaultOnBackPressed()
-          }
-          return
-      }
-
-      // Use the default back button implementation on Android S
-      // because it's doing more than [Activity.moveTaskToBack] in fact.
-      super.invokeDefaultOnBackPressed()
-  }
-}
diff --git a/example/android/app/src/main/java/com/callstack/reactnativepaperexample/MainApplication.kt b/example/android/app/src/main/java/com/callstack/reactnativepaperexample/MainApplication.kt
deleted file mode 100644
index b6cd6d88a9..0000000000
--- a/example/android/app/src/main/java/com/callstack/reactnativepaperexample/MainApplication.kt
+++ /dev/null
@@ -1,57 +0,0 @@
-package com.callstack.reactnativepaperexample
-
-import android.app.Application
-import android.content.res.Configuration
-
-import com.facebook.react.PackageList
-import com.facebook.react.ReactApplication
-import com.facebook.react.ReactNativeHost
-import com.facebook.react.ReactPackage
-import com.facebook.react.ReactHost
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
-import com.facebook.react.defaults.DefaultReactNativeHost
-import com.facebook.react.soloader.OpenSourceMergedSoMapping
-import com.facebook.soloader.SoLoader
-
-import expo.modules.ApplicationLifecycleDispatcher
-import expo.modules.ReactNativeHostWrapper
-
-class MainApplication : Application(), ReactApplication {
-
-  override val reactNativeHost: ReactNativeHost = ReactNativeHostWrapper(
-        this,
-        object : DefaultReactNativeHost(this) {
-          override fun getPackages(): List<ReactPackage> {
-            val packages = PackageList(this).packages
-            // Packages that cannot be autolinked yet can be added manually here, for example:
-            // packages.add(new MyReactNativePackage());
-            return packages
-          }
-
-          override fun getJSMainModuleName(): String = ".expo/.virtual-metro-entry"
-
-          override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
-
-          override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
-          override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
-      }
-  )
-
-  override val reactHost: ReactHost
-    get() = ReactNativeHostWrapper.createReactHost(applicationContext, reactNativeHost)
-
-  override fun onCreate() {
-    super.onCreate()
-    SoLoader.init(this, OpenSourceMergedSoMapping)
-    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-      // If you opted-in for the New Architecture, we load the native entry point for this app.
-      load()
-    }
-    ApplicationLifecycleDispatcher.onApplicationCreate(this)
-  }
-
-  override fun onConfigurationChanged(newConfig: Configuration) {
-    super.onConfigurationChanged(newConfig)
-    ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
-  }
-}
diff --git a/example/android/app/src/main/res/drawable-hdpi/splashscreen_logo.png b/example/android/app/src/main/res/drawable-hdpi/splashscreen_logo.png
deleted file mode 100644
index d2e4ebb523..0000000000
Binary files a/example/android/app/src/main/res/drawable-hdpi/splashscreen_logo.png and /dev/null differ
diff --git a/example/android/app/src/main/res/drawable-mdpi/splashscreen_logo.png b/example/android/app/src/main/res/drawable-mdpi/splashscreen_logo.png
deleted file mode 100644
index d2905ac97e..0000000000
Binary files a/example/android/app/src/main/res/drawable-mdpi/splashscreen_logo.png and /dev/null differ
diff --git a/example/android/app/src/main/res/drawable-xhdpi/splashscreen_logo.png b/example/android/app/src/main/res/drawable-xhdpi/splashscreen_logo.png
deleted file mode 100644
index c2d00af737..0000000000
Binary files a/example/android/app/src/main/res/drawable-xhdpi/splashscreen_logo.png and /dev/null differ
diff --git a/example/android/app/src/main/res/drawable-xxhdpi/splashscreen_logo.png b/example/android/app/src/main/res/drawable-xxhdpi/splashscreen_logo.png
deleted file mode 100644
index 7979a98391..0000000000
Binary files a/example/android/app/src/main/res/drawable-xxhdpi/splashscreen_logo.png and /dev/null differ
diff --git a/example/android/app/src/main/res/drawable-xxxhdpi/splashscreen_logo.png b/example/android/app/src/main/res/drawable-xxxhdpi/splashscreen_logo.png
deleted file mode 100644
index e8d6a6af53..0000000000
Binary files a/example/android/app/src/main/res/drawable-xxxhdpi/splashscreen_logo.png and /dev/null differ
diff --git a/example/android/app/src/main/res/drawable/ic_launcher_background.xml b/example/android/app/src/main/res/drawable/ic_launcher_background.xml
deleted file mode 100644
index 883b2a080f..0000000000
--- a/example/android/app/src/main/res/drawable/ic_launcher_background.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-  <item android:drawable="@color/splashscreen_background"/>
-  <item>
-    <bitmap android:gravity="center" android:src="@drawable/splashscreen_logo"/>
-  </item>
-</layer-list>
\ No newline at end of file
diff --git a/example/android/app/src/main/res/drawable/rn_edit_text_material.xml b/example/android/app/src/main/res/drawable/rn_edit_text_material.xml
deleted file mode 100644
index 5c25e728ea..0000000000
--- a/example/android/app/src/main/res/drawable/rn_edit_text_material.xml
+++ /dev/null
@@ -1,37 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright (C) 2014 The Android Open Source Project
-
-     Licensed under the Apache License, Version 2.0 (the "License");
-     you may not use this file except in compliance with the License.
-     You may obtain a copy of the License at
-
-          http://www.apache.org/licenses/LICENSE-2.0
-
-     Unless required by applicable law or agreed to in writing, software
-     distributed under the License is distributed on an "AS IS" BASIS,
-     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     See the License for the specific language governing permissions and
-     limitations under the License.
--->
-<inset xmlns:android="http://schemas.android.com/apk/res/android"
-       android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
-       android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
-       android:insetTop="@dimen/abc_edit_text_inset_top_material"
-       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material"
-       >
-
-    <selector>
-        <!--
-          This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
-          The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
-          NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
-
-          <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
-
-          For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
-        -->
-        <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
-        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
-    </selector>
-
-</inset>
diff --git a/example/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml b/example/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
deleted file mode 100644
index 3941bea9b9..0000000000
--- a/example/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
+++ /dev/null
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@color/iconBackground"/>
-    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
-</adaptive-icon>
\ No newline at end of file
diff --git a/example/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml b/example/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
deleted file mode 100644
index 3941bea9b9..0000000000
--- a/example/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
+++ /dev/null
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@color/iconBackground"/>
-    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
-</adaptive-icon>
\ No newline at end of file
diff --git a/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.webp b/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.webp
deleted file mode 100644
index 2fff66b74c..0000000000
Binary files a/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.webp and /dev/null differ
diff --git a/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.webp b/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.webp
deleted file mode 100644
index 0537194be8..0000000000
Binary files a/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.webp and /dev/null differ
diff --git a/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp b/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp
deleted file mode 100644
index c463eb2367..0000000000
Binary files a/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp and /dev/null differ
diff --git a/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.webp b/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.webp
deleted file mode 100644
index db69a94b18..0000000000
Binary files a/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.webp and /dev/null differ
diff --git a/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.webp b/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.webp
deleted file mode 100644
index 2e3c35551d..0000000000
Binary files a/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.webp and /dev/null differ
diff --git a/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp b/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp
deleted file mode 100644
index 62d8439b72..0000000000
Binary files a/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp and /dev/null differ
diff --git a/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.webp b/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.webp
deleted file mode 100644
index a8210487da..0000000000
Binary files a/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.webp and /dev/null differ
diff --git a/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.webp b/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.webp
deleted file mode 100644
index 5a10eeb1fc..0000000000
Binary files a/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.webp and /dev/null differ
diff --git a/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp b/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp
deleted file mode 100644
index c632bb43d7..0000000000
Binary files a/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp and /dev/null differ
diff --git a/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp b/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp
deleted file mode 100644
index a249833e21..0000000000
Binary files a/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp and /dev/null differ
diff --git a/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.webp b/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.webp
deleted file mode 100644
index 47ca7d7f47..0000000000
Binary files a/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.webp and /dev/null differ
diff --git a/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp b/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp
deleted file mode 100644
index 1c38eb6136..0000000000
Binary files a/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp and /dev/null differ
diff --git a/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp b/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp
deleted file mode 100644
index fba93f074f..0000000000
Binary files a/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp and /dev/null differ
diff --git a/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.webp b/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.webp
deleted file mode 100644
index 1899f38acf..0000000000
Binary files a/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.webp and /dev/null differ
diff --git a/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp b/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp
deleted file mode 100644
index c0dbf433c3..0000000000
Binary files a/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp and /dev/null differ
diff --git a/example/android/app/src/main/res/values-night/colors.xml b/example/android/app/src/main/res/values-night/colors.xml
deleted file mode 100644
index 3c05de5be8..0000000000
--- a/example/android/app/src/main/res/values-night/colors.xml
+++ /dev/null
@@ -1 +0,0 @@
-<resources/>
\ No newline at end of file
diff --git a/example/android/app/src/main/res/values/colors.xml b/example/android/app/src/main/res/values/colors.xml
deleted file mode 100644
index 5ad704b32e..0000000000
--- a/example/android/app/src/main/res/values/colors.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<resources>
-  <color name="splashscreen_background">#6200EE</color>
-  <color name="iconBackground">#6200EE</color>
-  <color name="colorPrimary">#6200EE</color>
-  <color name="colorPrimaryDark">#6200EE</color>
-</resources>
\ No newline at end of file
diff --git a/example/android/app/src/main/res/values/strings.xml b/example/android/app/src/main/res/values/strings.xml
deleted file mode 100644
index 076a2376b0..0000000000
--- a/example/android/app/src/main/res/values/strings.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<resources>
-  <string name="app_name">React Native Paper Example</string>
-  <string name="expo_splash_screen_resize_mode" translatable="false">cover</string>
-  <string name="expo_splash_screen_status_bar_translucent" translatable="false">false</string>
-  <string name="expo_runtime_version">exposdk:52.0.0</string>
-</resources>
\ No newline at end of file
diff --git a/example/android/app/src/main/res/values/styles.xml b/example/android/app/src/main/res/values/styles.xml
deleted file mode 100644
index 7f305ebf13..0000000000
--- a/example/android/app/src/main/res/values/styles.xml
+++ /dev/null
@@ -1,19 +0,0 @@
-<resources xmlns:tools="http://schemas.android.com/tools">
-  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
-    <item name="android:textColor">@android:color/black</item>
-    <item name="android:editTextStyle">@style/ResetEditText</item>
-    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
-    <item name="colorPrimary">@color/colorPrimary</item>
-    <item name="android:statusBarColor">#6200EE</item>
-  </style>
-  <style name="ResetEditText" parent="@android:style/Widget.EditText">
-    <item name="android:padding">0dp</item>
-    <item name="android:textColorHint">#c8c8c8</item>
-    <item name="android:textColor">@android:color/black</item>
-  </style>
-  <style name="Theme.App.SplashScreen" parent="Theme.SplashScreen">
-    <item name="windowSplashScreenBackground">@color/splashscreen_background</item>
-    <item name="windowSplashScreenAnimatedIcon">@drawable/splashscreen_logo</item>
-    <item name="postSplashScreenTheme">@style/AppTheme</item>
-  </style>
-</resources>
\ No newline at end of file
diff --git a/example/android/build.gradle b/example/android/build.gradle
deleted file mode 100644
index e119b72df9..0000000000
--- a/example/android/build.gradle
+++ /dev/null
@@ -1,41 +0,0 @@
-// Top-level build file where you can add configuration options common to all sub-projects/modules.
-
-buildscript {
-    ext {
-        buildToolsVersion = findProperty('android.buildToolsVersion') ?: '35.0.0'
-        minSdkVersion = Integer.parseInt(findProperty('android.minSdkVersion') ?: '24')
-        compileSdkVersion = Integer.parseInt(findProperty('android.compileSdkVersion') ?: '35')
-        targetSdkVersion = Integer.parseInt(findProperty('android.targetSdkVersion') ?: '34')
-        kotlinVersion = findProperty('android.kotlinVersion') ?: '2.0.21'
-
-        ndkVersion = "27.1.12297006"
-    }
-    repositories {
-        google()
-        mavenCentral()
-    }
-    dependencies {
-        classpath('com.android.tools.build:gradle')
-        classpath('com.facebook.react:react-native-gradle-plugin')
-        classpath('org.jetbrains.kotlin:kotlin-gradle-plugin')
-    }
-}
-
-apply plugin: "com.facebook.react.rootproject"
-
-allprojects {
-    repositories {
-        maven {
-            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
-            url(new File(['node', '--print', "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim(), '../android'))
-        }
-        maven {
-            // Android JSC is installed from npm
-            url(new File(['node', '--print', "require.resolve('jsc-android/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim(), '../dist'))
-        }
-
-        google()
-        mavenCentral()
-        maven { url 'https://www.jitpack.io' }
-    }
-}
diff --git a/example/android/gradle.properties b/example/android/gradle.properties
deleted file mode 100644
index 7531e9eb23..0000000000
--- a/example/android/gradle.properties
+++ /dev/null
@@ -1,56 +0,0 @@
-# Project-wide Gradle settings.
-
-# IDE (e.g. Android Studio) users:
-# Gradle settings configured through the IDE *will override*
-# any settings specified in this file.
-
-# For more details on how to configure your build environment visit
-# http://www.gradle.org/docs/current/userguide/build_environment.html
-
-# Specifies the JVM arguments used for the daemon process.
-# The setting is particularly useful for tweaking memory settings.
-# Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
-org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
-
-# When configured, Gradle will run in incubating parallel mode.
-# This option should only be used with decoupled projects. More details, visit
-# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
-# org.gradle.parallel=true
-
-# AndroidX package structure to make it clearer which packages are bundled with the
-# Android operating system, and which are packaged with your app's APK
-# https://developer.android.com/topic/libraries/support-library/androidx-rn
-android.useAndroidX=true
-
-# Enable AAPT2 PNG crunching
-android.enablePngCrunchInReleaseBuilds=true
-
-# Use this property to specify which architecture you want to build.
-# You can also override it from the CLI using
-# ./gradlew <task> -PreactNativeArchitectures=x86_64
-reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
-
-# Use this property to enable support to the new architecture.
-# This will allow you to use TurboModules and the Fabric render in
-# your application. You should enable this flag either if you want
-# to write custom TurboModules/Fabric components OR use libraries that
-# are providing them.
-newArchEnabled=true
-
-# Use this property to enable or disable the Hermes JS engine.
-# If set to false, you will be using JSC instead.
-hermesEnabled=true
-
-# Enable GIF support in React Native images (~200 B increase)
-expo.gif.enabled=true
-# Enable webp support in React Native images (~85 KB increase)
-expo.webp.enabled=true
-# Enable animated webp support (~3.4 MB increase)
-# Disabled by default because iOS doesn't support animated webp
-expo.webp.animated=false
-
-# Enable network inspector
-EX_DEV_CLIENT_NETWORK_INSPECTOR=true
-
-# Use legacy packaging to compress native libraries in the resulting APK.
-expo.useLegacyPackaging=false
diff --git a/example/android/gradle/wrapper/gradle-wrapper.jar b/example/android/gradle/wrapper/gradle-wrapper.jar
deleted file mode 100644
index a4b76b9530..0000000000
Binary files a/example/android/gradle/wrapper/gradle-wrapper.jar and /dev/null differ
diff --git a/example/android/gradle/wrapper/gradle-wrapper.properties b/example/android/gradle/wrapper/gradle-wrapper.properties
deleted file mode 100644
index 79eb9d003f..0000000000
--- a/example/android/gradle/wrapper/gradle-wrapper.properties
+++ /dev/null
@@ -1,7 +0,0 @@
-distributionBase=GRADLE_USER_HOME
-distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.10.2-all.zip
-networkTimeout=10000
-validateDistributionUrl=true
-zipStoreBase=GRADLE_USER_HOME
-zipStorePath=wrapper/dists
diff --git a/example/android/gradlew b/example/android/gradlew
deleted file mode 100755
index f5feea6d6b..0000000000
--- a/example/android/gradlew
+++ /dev/null
@@ -1,252 +0,0 @@
-#!/bin/sh
-
-#
-# Copyright © 2015-2021 the original authors.
-#
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-#      https://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-#
-# SPDX-License-Identifier: Apache-2.0
-#
-
-##############################################################################
-#
-#   Gradle start up script for POSIX generated by Gradle.
-#
-#   Important for running:
-#
-#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
-#       noncompliant, but you have some other compliant shell such as ksh or
-#       bash, then to run this script, type that shell name before the whole
-#       command line, like:
-#
-#           ksh Gradle
-#
-#       Busybox and similar reduced shells will NOT work, because this script
-#       requires all of these POSIX shell features:
-#         * functions;
-#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
-#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
-#         * compound commands having a testable exit status, especially «case»;
-#         * various built-in commands including «command», «set», and «ulimit».
-#
-#   Important for patching:
-#
-#   (2) This script targets any POSIX shell, so it avoids extensions provided
-#       by Bash, Ksh, etc; in particular arrays are avoided.
-#
-#       The "traditional" practice of packing multiple parameters into a
-#       space-separated string is a well documented source of bugs and security
-#       problems, so this is (mostly) avoided, by progressively accumulating
-#       options in "$@", and eventually passing that to Java.
-#
-#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
-#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
-#       see the in-line comments for details.
-#
-#       There are tweaks for specific operating systems such as AIX, CygWin,
-#       Darwin, MinGW, and NonStop.
-#
-#   (3) This script is generated from the Groovy template
-#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
-#       within the Gradle project.
-#
-#       You can find Gradle at https://github.com/gradle/gradle/.
-#
-##############################################################################
-
-# Attempt to set APP_HOME
-
-# Resolve links: $0 may be a link
-app_path=$0
-
-# Need this for daisy-chained symlinks.
-while
-    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
-    [ -h "$app_path" ]
-do
-    ls=$( ls -ld "$app_path" )
-    link=${ls#*' -> '}
-    case $link in             #(
-      /*)   app_path=$link ;; #(
-      *)    app_path=$APP_HOME$link ;;
-    esac
-done
-
-# This is normally unused
-# shellcheck disable=SC2034
-APP_BASE_NAME=${0##*/}
-# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
-APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s
-' "$PWD" ) || exit
-
-# Use the maximum available, or set MAX_FD != -1 to use that value.
-MAX_FD=maximum
-
-warn () {
-    echo "$*"
-} >&2
-
-die () {
-    echo
-    echo "$*"
-    echo
-    exit 1
-} >&2
-
-# OS specific support (must be 'true' or 'false').
-cygwin=false
-msys=false
-darwin=false
-nonstop=false
-case "$( uname )" in                #(
-  CYGWIN* )         cygwin=true  ;; #(
-  Darwin* )         darwin=true  ;; #(
-  MSYS* | MINGW* )  msys=true    ;; #(
-  NONSTOP* )        nonstop=true ;;
-esac
-
-CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
-
-
-# Determine the Java command to use to start the JVM.
-if [ -n "$JAVA_HOME" ] ; then
-    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
-        # IBM's JDK on AIX uses strange locations for the executables
-        JAVACMD=$JAVA_HOME/jre/sh/java
-    else
-        JAVACMD=$JAVA_HOME/bin/java
-    fi
-    if [ ! -x "$JAVACMD" ] ; then
-        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
-
-Please set the JAVA_HOME variable in your environment to match the
-location of your Java installation."
-    fi
-else
-    JAVACMD=java
-    if ! command -v java >/dev/null 2>&1
-    then
-        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
-
-Please set the JAVA_HOME variable in your environment to match the
-location of your Java installation."
-    fi
-fi
-
-# Increase the maximum file descriptors if we can.
-if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
-    case $MAX_FD in #(
-      max*)
-        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
-        # shellcheck disable=SC2039,SC3045
-        MAX_FD=$( ulimit -H -n ) ||
-            warn "Could not query maximum file descriptor limit"
-    esac
-    case $MAX_FD in  #(
-      '' | soft) :;; #(
-      *)
-        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
-        # shellcheck disable=SC2039,SC3045
-        ulimit -n "$MAX_FD" ||
-            warn "Could not set maximum file descriptor limit to $MAX_FD"
-    esac
-fi
-
-# Collect all arguments for the java command, stacking in reverse order:
-#   * args from the command line
-#   * the main class name
-#   * -classpath
-#   * -D...appname settings
-#   * --module-path (only if needed)
-#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
-
-# For Cygwin or MSYS, switch paths to Windows format before running java
-if "$cygwin" || "$msys" ; then
-    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
-    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
-
-    JAVACMD=$( cygpath --unix "$JAVACMD" )
-
-    # Now convert the arguments - kludge to limit ourselves to /bin/sh
-    for arg do
-        if
-            case $arg in                                #(
-              -*)   false ;;                            # don't mess with options #(
-              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
-                    [ -e "$t" ] ;;                      #(
-              *)    false ;;
-            esac
-        then
-            arg=$( cygpath --path --ignore --mixed "$arg" )
-        fi
-        # Roll the args list around exactly as many times as the number of
-        # args, so each arg winds up back in the position where it started, but
-        # possibly modified.
-        #
-        # NB: a `for` loop captures its iteration list before it begins, so
-        # changing the positional parameters here affects neither the number of
-        # iterations, nor the values presented in `arg`.
-        shift                   # remove old arg
-        set -- "$@" "$arg"      # push replacement arg
-    done
-fi
-
-
-# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
-
-# Collect all arguments for the java command:
-#   * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
-#     and any embedded shellness will be escaped.
-#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
-#     treated as '${Hostname}' itself on the command line.
-
-set -- \
-        "-Dorg.gradle.appname=$APP_BASE_NAME" \
-        -classpath "$CLASSPATH" \
-        org.gradle.wrapper.GradleWrapperMain \
-        "$@"
-
-# Stop when "xargs" is not available.
-if ! command -v xargs >/dev/null 2>&1
-then
-    die "xargs is not available"
-fi
-
-# Use "xargs" to parse quoted args.
-#
-# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
-#
-# In Bash we could simply go:
-#
-#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
-#   set -- "${ARGS[@]}" "$@"
-#
-# but POSIX shell has neither arrays nor command substitution, so instead we
-# post-process each arg (as a line of input to sed) to backslash-escape any
-# character that might be a shell metacharacter, then use eval to reverse
-# that process (while maintaining the separation between arguments), and wrap
-# the whole thing up as a single "set" statement.
-#
-# This will of course break if any of these variables contains a newline or
-# an unmatched quote.
-#
-
-eval "set -- $(
-        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
-        xargs -n1 |
-        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
-        tr '\n' ' '
-    )" '"$@"'
-
-exec "$JAVACMD" "$@"
diff --git a/example/android/gradlew.bat b/example/android/gradlew.bat
deleted file mode 100644
index 9b42019c79..0000000000
--- a/example/android/gradlew.bat
+++ /dev/null
@@ -1,94 +0,0 @@
-@rem
-@rem Copyright 2015 the original author or authors.
-@rem
-@rem Licensed under the Apache License, Version 2.0 (the "License");
-@rem you may not use this file except in compliance with the License.
-@rem You may obtain a copy of the License at
-@rem
-@rem      https://www.apache.org/licenses/LICENSE-2.0
-@rem
-@rem Unless required by applicable law or agreed to in writing, software
-@rem distributed under the License is distributed on an "AS IS" BASIS,
-@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-@rem See the License for the specific language governing permissions and
-@rem limitations under the License.
-@rem
-@rem SPDX-License-Identifier: Apache-2.0
-@rem
-
-@if "%DEBUG%"=="" @echo off
-@rem ##########################################################################
-@rem
-@rem  Gradle startup script for Windows
-@rem
-@rem ##########################################################################
-
-@rem Set local scope for the variables with windows NT shell
-if "%OS%"=="Windows_NT" setlocal
-
-set DIRNAME=%~dp0
-if "%DIRNAME%"=="" set DIRNAME=.
-@rem This is normally unused
-set APP_BASE_NAME=%~n0
-set APP_HOME=%DIRNAME%
-
-@rem Resolve any "." and ".." in APP_HOME to make it shorter.
-for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
-
-@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
-
-@rem Find java.exe
-if defined JAVA_HOME goto findJavaFromJavaHome
-
-set JAVA_EXE=java.exe
-%JAVA_EXE% -version >NUL 2>&1
-if %ERRORLEVEL% equ 0 goto execute
-
-echo. 1>&2
-echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
-echo. 1>&2
-echo Please set the JAVA_HOME variable in your environment to match the 1>&2
-echo location of your Java installation. 1>&2
-
-goto fail
-
-:findJavaFromJavaHome
-set JAVA_HOME=%JAVA_HOME:"=%
-set JAVA_EXE=%JAVA_HOME%/bin/java.exe
-
-if exist "%JAVA_EXE%" goto execute
-
-echo. 1>&2
-echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
-echo. 1>&2
-echo Please set the JAVA_HOME variable in your environment to match the 1>&2
-echo location of your Java installation. 1>&2
-
-goto fail
-
-:execute
-@rem Setup the command line
-
-set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
-
-
-@rem Execute Gradle
-"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
-
-:end
-@rem End local scope for the variables with windows NT shell
-if %ERRORLEVEL% equ 0 goto mainEnd
-
-:fail
-rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
-rem the _cmd.exe /c_ return code!
-set EXIT_CODE=%ERRORLEVEL%
-if %EXIT_CODE% equ 0 set EXIT_CODE=1
-if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
-exit /b %EXIT_CODE%
-
-:mainEnd
-if "%OS%"=="Windows_NT" endlocal
-
-:omega
diff --git a/example/android/settings.gradle b/example/android/settings.gradle
deleted file mode 100644
index d0cca28108..0000000000
--- a/example/android/settings.gradle
+++ /dev/null
@@ -1,38 +0,0 @@
-pluginManagement {
-    includeBuild(new File(["node", "--print", "require.resolve('@react-native/gradle-plugin/package.json')"].execute(null, rootDir).text.trim()).getParentFile().toString())
-}
-plugins { id("com.facebook.react.settings") }
-
-extensions.configure(com.facebook.react.ReactSettingsExtension) { ex ->
-  if (System.getenv('EXPO_USE_COMMUNITY_AUTOLINKING') == '1') {
-    ex.autolinkLibrariesFromCommand()
-  } else {
-    def command = [
-      'node',
-      '--no-warnings',
-      '--eval',
-      'require(require.resolve(\'expo-modules-autolinking\', { paths: [require.resolve(\'expo/package.json\')] }))(process.argv.slice(1))',
-      'react-native-config',
-      '--json',
-      '--platform',
-      'android'
-    ].toList()
-    ex.autolinkLibrariesFromCommand(command)
-  }
-}
-
-rootProject.name = 'React Native Paper Example'
-
-dependencyResolutionManagement {
-  versionCatalogs {
-    reactAndroidLibs {
-      from(files(new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim(), "../gradle/libs.versions.toml")))
-    }
-  }
-}
-
-apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle");
-useExpoModules()
-
-include ':app'
-includeBuild(new File(["node", "--print", "require.resolve('@react-native/gradle-plugin/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile())
diff --git a/example/app.json b/example/app.json
index 57c5d74b41..4dd835b98f 100644
--- a/example/app.json
+++ b/example/app.json
@@ -3,47 +3,56 @@
     "name": "React Native Paper Example",
     "description": "Example app for React Native Paper: https://callstack.github.io/react-native-paper/",
     "slug": "react-native-paper-example",
-    "privacy": "public",
     "version": "3.16.0",
     "orientation": "default",
     "primaryColor": "#6200EE",
     "userInterfaceStyle": "automatic",
     "icon": "./assets/images/paper-icon.png",
-    "newArchEnabled": true,
-    "packagerOpts": {
-      "config": "./metro.config.js",
-      "projectRoots": ""
-    },
-    "platforms": ["android", "ios", "web"],
+    "platforms": [
+      "android",
+      "ios",
+      "web"
+    ],
     "owner": "react-native-paper",
     "ios": {
       "bundleIdentifier": "com.callstack.reactnativepaperexample",
-      "buildNumber": "26.0.5"
+      "infoPlist": {
+        "ITSAppUsesNonExemptEncryption": false
+      }
     },
     "android": {
       "package": "com.callstack.reactnativepaperexample",
-      "versionCode": 38,
-      "permissions": ["READ_EXTERNAL_STORAGE", "WRITE_EXTERNAL_STORAGE"],
+      "permissions": [
+        "READ_EXTERNAL_STORAGE",
+        "WRITE_EXTERNAL_STORAGE"
+      ],
       "icon": "./assets/images/paper-icon.png",
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/android-icon.png",
         "backgroundColor": "#6200EE"
       }
     },
-    "splash": {
-      "image": "./assets/images/splash.png",
-      "backgroundColor": "#6200EE",
-      "resizeMode": "cover"
-    },
     "extra": {
       "eas": {
         "projectId": "ba8f5139-58fe-48f0-b2f2-2d675b6eb2d4"
       }
     },
-    "runtimeVersion": "exposdk:52.0.0",
+    "runtimeVersion": {
+      "policy": "fingerprint"
+    },
     "updates": {
       "url": "https://u.expo.dev/ba8f5139-58fe-48f0-b2f2-2d675b6eb2d4"
     },
-    "plugins": ["expo-font"]
+    "plugins": [
+      "expo-font",
+      [
+        "expo-splash-screen",
+        {
+          "image": "./assets/images/splash.png",
+          "backgroundColor": "#6200EE",
+          "resizeMode": "cover"
+        }
+      ]
+    ]
   }
 }
diff --git a/example/assets/styles/fonts.css b/example/assets/styles/fonts.css
index 1b282d638f..6c6a8a2866 100644
--- a/example/assets/styles/fonts.css
+++ b/example/assets/styles/fonts.css
@@ -1,47 +1,37 @@
+/*
+ * Roboto is loaded via Google Fonts in public/index.html.
+ * These @font-face aliases map the legacy "Roboto-<Weight>" family names
+ * used in the app code to the right weights of the loaded Roboto font.
+ */
+
 @font-face {
     font-family: 'Roboto-Thin';
     font-style: normal;
     font-display: swap;
     font-weight: 100;
-    src:
-        local('Roboto Thin '),
-        local('Roboto-Thin'),
-        url('~typeface-roboto/files/roboto-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
-        url('~typeface-roboto/files/roboto-latin-100.woff') format('woff'); /* Modern Browsers */
+    src: local('Roboto Thin'), local('Roboto-Thin'), local('Roboto');
 }
-  
+
 @font-face {
     font-family: 'Roboto-Light';
     font-style: normal;
     font-display: swap;
     font-weight: 300;
-    src:
-        local('Roboto Light '),
-        local('Roboto-Light'),
-        url('~typeface-roboto/files/roboto-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
-        url('~typeface-roboto/files/roboto-latin-300.woff') format('woff'); /* Modern Browsers */
+    src: local('Roboto Light'), local('Roboto-Light'), local('Roboto');
 }
-  
+
 @font-face {
     font-family: 'Roboto';
     font-style: normal;
     font-display: swap;
     font-weight: 400;
-    src:
-        local('Roboto Regular '),
-        local('Roboto-Regular'),
-        url('~typeface-roboto/files/roboto-latin-400.woff2') format('woff2'), /* Super Modern Browsers */
-        url('~typeface-roboto/files/roboto-latin-400.woff') format('woff'); /* Modern Browsers */
+    src: local('Roboto Regular'), local('Roboto-Regular'), local('Roboto');
 }
-  
+
 @font-face {
     font-family: 'Roboto-Medium';
     font-style: normal;
     font-display: swap;
     font-weight: 500;
-    src:
-        local('Roboto Medium '),
-        local('Roboto-Medium'),
-        url('~typeface-roboto/files/roboto-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
-        url('~typeface-roboto/files/roboto-latin-500.woff') format('woff'); /* Modern Browsers */
+    src: local('Roboto Medium'), local('Roboto-Medium'), local('Roboto');
 }
\ No newline at end of file
diff --git a/example/babel.config.js b/example/babel.config.js
index 2908500a54..637f023a93 100644
--- a/example/babel.config.js
+++ b/example/babel.config.js
@@ -1,30 +1,8 @@
-const path = require('path');
-
-const pak = require('../package.json');
-
 module.exports = function (api) {
   api.cache(true);
 
   return {
     presets: ['babel-preset-expo'],
-    plugins: [
-      [
-        'module-resolver',
-        {
-          extensions: ['.tsx', '.ts', '.js', '.json'],
-          alias: {
-            [`${pak.name}/package.json`]: path.join(
-              __dirname,
-              '..',
-              'package.json'
-            ),
-            // For development, we want to alias the library to the source
-            [pak.name]: path.join(__dirname, '..', 'src'),
-          },
-        },
-      ],
-      ['@babel/plugin-proposal-export-namespace-from'],
-      ['react-native-reanimated/plugin'],
-    ],
+    plugins: [['@babel/plugin-proposal-export-namespace-from']],
   };
 };
diff --git a/example/eas.json b/example/eas.json
new file mode 100644
index 0000000000..482e583d8e
--- /dev/null
+++ b/example/eas.json
@@ -0,0 +1,34 @@
+{
+  "cli": {
+    "appVersionSource": "remote"
+  },
+  "build": {
+    "production": {
+      "autoIncrement": true,
+      "android": {
+        "buildType": "app-bundle"
+      },
+      "channel": "production"
+    },
+    "preview": {
+      "extends": "production",
+      "channel": "preview"
+    }
+  },
+  "submit": {
+    "production": {
+      "android": {
+        "track": "production"
+      },
+      "ios": {
+        "ascAppId": "1548934513"
+      }
+    },
+    "preview": {
+      "extends": "production",
+      "android": {
+        "track": "internal"
+      }
+    }
+  }
+}
diff --git a/example/fingerprint.config.js b/example/fingerprint.config.js
new file mode 100644
index 0000000000..501ccf5ba3
--- /dev/null
+++ b/example/fingerprint.config.js
@@ -0,0 +1,7 @@
+/** @type {import('expo/fingerprint').Config} */
+module.exports = {
+  sourceSkips: [
+    'ExpoConfigVersions',
+    'PackageJsonAndroidAndIosScriptsIfNotContainRun',
+  ],
+};
diff --git a/example/index.web.js b/example/index.web.js
index 88adf8f637..e69c84e6dd 100644
--- a/example/index.web.js
+++ b/example/index.web.js
@@ -1,3 +1,7 @@
 import './assets/styles/fonts.css';
 
-export { default } from './src/index';
+import { registerRootComponent } from 'expo';
+
+import PaperExample from './src/index';
+
+registerRootComponent(PaperExample);
diff --git a/example/metro.config.js b/example/metro.config.js
index 687d72ec22..b288ba7c49 100644
--- a/example/metro.config.js
+++ b/example/metro.config.js
@@ -1,9 +1,10 @@
 const { getDefaultConfig } = require('@expo/metro-config');
-const path = require('path');
+const path = require('node:path');
 const { withMetroConfig } = require('react-native-monorepo-config');
 
 /** @type {import('metro-config').MetroConfig} */
 module.exports = withMetroConfig(getDefaultConfig(__dirname), {
   root: path.resolve(__dirname, '..'),
   dirname: __dirname,
+  conditions: ['react-native-paper-source'],
 });
diff --git a/example/package.json b/example/package.json
index 667c56cb19..8d32e2a364 100644
--- a/example/package.json
+++ b/example/package.json
@@ -6,49 +6,43 @@
   "private": true,
   "scripts": {
     "eas-build-pre-install": "cd .. && yarn",
-    "start": "EXPO_NO_TYPESCRIPT_SETUP=1 expo start --go",
-    "android": "EXPO_NO_TYPESCRIPT_SETUP=1 expo start --android",
-    "android:native": "EXPO_NO_TYPESCRIPT_SETUP=1 expo run:android",
-    "ios:native": "EXPO_NO_TYPESCRIPT_SETUP=1 expo run:ios",
-    "ios": "EXPO_NO_TYPESCRIPT_SETUP=1 expo start --ios",
-    "web": "EXPO_NO_TYPESCRIPT_SETUP=1 expo start --web"
+    "start": "EXPO_NO_TYPESCRIPT_SETUP=1 expo start --dev-client",
+    "android": "EXPO_NO_TYPESCRIPT_SETUP=1 expo run:android",
+    "ios": "EXPO_NO_TYPESCRIPT_SETUP=1 expo run:ios"
   },
   "dependencies": {
-    "@expo/vector-icons": "^15.0.2",
-    "@expo/webpack-config": "~19.0.1",
-    "@pchmn/expo-material3-theme": "^1.3.2",
+    "@expo/metro-config": "~56.0.0",
     "@react-native-async-storage/async-storage": "2.2.0",
     "@react-native-masked-view/masked-view": "0.3.2",
-    "@react-navigation/bottom-tabs": "^7.3.10",
-    "@react-navigation/drawer": "^7.3.9",
-    "@react-navigation/native": "^7.1.6",
-    "@react-navigation/stack": "^7.2.10",
-    "expo": "^54.0.0",
-    "expo-crypto": "~15.0.7",
-    "expo-dev-client": "~6.0.14",
-    "expo-font": "~14.0.9",
-    "expo-keep-awake": "~15.0.7",
-    "expo-splash-screen": "~31.0.10",
-    "expo-status-bar": "~3.0.8",
-    "expo-updates": "~29.0.12",
-    "file-loader": "^6.2.0",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "react-native": "0.81.4",
-    "react-native-gesture-handler": "~2.28.0",
-    "react-native-monorepo-config": "^0.1.6",
-    "react-native-reanimated": "~4.1.1",
-    "react-native-safe-area-context": "~5.6.0",
-    "react-native-screens": "~4.16.0",
+    "@react-navigation/bottom-tabs": "^8.0.0-alpha.33",
+    "@react-navigation/drawer": "^8.0.0-alpha.34",
+    "@react-navigation/elements": "3.0.0-alpha.31",
+    "@react-navigation/native": "^8.0.0-alpha.28",
+    "@react-navigation/native-stack": "^8.0.0-alpha.34",
+    "expo": "~56.0.0",
+    "expo-constants": "~56.0.18",
+    "expo-crypto": "~56.0.3",
+    "expo-dev-client": "~56.0.13",
+    "expo-font": "~56.0.5",
+    "expo-keep-awake": "~56.0.3",
+    "expo-splash-screen": "~56.0.9",
+    "expo-status-bar": "~56.0.4",
+    "expo-updates": "~56.0.14",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.85.3",
+    "react-native-gesture-handler": "~2.31.1",
+    "react-native-reanimated": "4.3.1",
+    "react-native-safe-area-context": "~5.7.0",
+    "react-native-screens": "4.25.1",
     "react-native-web": "^0.21.0",
-    "react-native-worklets": "0.5.1",
-    "typeface-roboto": "^1.1.13"
+    "react-native-worklets": "0.8.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "babel-plugin-module-resolver": "^5.0.0",
-    "babel-preset-expo": "~54.0.0",
-    "url-loader": "^4.1.1"
+    "@babel/core": "^7.29.0",
+    "babel-preset-expo": "~56.0.0",
+    "react-native-builder-bob": "^0.42.1",
+    "react-native-monorepo-config": "^0.4.0"
   },
   "engines": {
     "node": ">=20"
diff --git a/example/public/index.html b/example/public/index.html
index 62cc885b40..f1ef43f74d 100644
--- a/example/public/index.html
+++ b/example/public/index.html
@@ -1,11 +1,19 @@
 <!doctype html>
+<html lang="en">
 <head>
-  <meta charSet="utf-8" />
-  <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
-
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
 
   <title>App</title>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    rel="stylesheet"
+    href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap"
+  />
+
   <style>
     html, body, #root {
       height: 100%;
@@ -19,5 +27,5 @@
 </head>
 <body>
   <div id="root"></div>
-  <script src="app.bundle.js"></script>
 </body>
+</html>
diff --git a/example/src/DrawerItems.tsx b/example/src/DrawerItems.tsx
index 2d3ca6c202..7e39596f9b 100644
--- a/example/src/DrawerItems.tsx
+++ b/example/src/DrawerItems.tsx
@@ -1,24 +1,22 @@
 import * as React from 'react';
-import { I18nManager, StyleSheet, View, Platform } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
+import type { ColorValue } from 'react-native';
 
 import { DrawerContentScrollView } from '@react-navigation/drawer';
 import Constants, { ExecutionEnvironment } from 'expo-constants';
-import * as Updates from 'expo-updates';
 import {
   Badge,
   Button,
   Dialog,
   Drawer,
-  MD2Colors,
-  MD3Colors,
+  Palette,
   Switch,
   Text,
   TouchableRipple,
-  Portal,
+  useTheme,
 } from 'react-native-paper';
 
-import { deviceColorsSupported, isWeb } from '../utils';
-import { useExampleTheme } from './hooks/useExampleTheme';
+import { dynamicThemeSupported } from '../utils';
 import { PreferencesContext } from './PreferencesContext';
 
 const DrawerItemsData = [
@@ -32,12 +30,8 @@ const DrawerItemsData = [
     label: 'Starred',
     icon: 'star',
     key: 1,
-    right: ({ color }: { color: string }) => (
-      <Badge
-        visible
-        size={8}
-        style={[styles.badge, { backgroundColor: color }]}
-      />
+    right: ({ color }: { color: ColorValue }) => (
+      <Badge visible style={[styles.badge, { backgroundColor: color }]} />
     ),
   },
   { label: 'Sent mail', icon: 'send', key: 2 },
@@ -46,7 +40,7 @@ const DrawerItemsData = [
     label: 'A very long title that will be truncated',
     icon: 'delete',
     key: 4,
-    right: () => <Badge visible size={8} style={styles.badge} />,
+    right: () => <Badge visible style={styles.badge} />,
   },
 ];
 
@@ -96,18 +90,16 @@ function DrawerItems() {
 
   const _setDrawerItem = (index: number) => setDrawerItemIndex(index);
 
-  const { isV3, colors } = useExampleTheme();
-  const isIOS = Platform.OS === 'ios';
+  const { colors } = useTheme();
   const expoGoExecution =
     Constants.executionEnvironment === ExecutionEnvironment.StoreClient;
 
   if (!preferences) throw new Error('PreferencesContext not provided');
 
   const {
-    toggleShouldUseDeviceColors,
+    toggleShouldUseDynamicTheme,
     toggleTheme,
     toggleRtl: toggleRTL,
-    toggleThemeVersion,
     toggleCollapsed,
     toggleCustomFont,
     toggleRippleEffect,
@@ -116,20 +108,16 @@ function DrawerItems() {
     collapsed,
     rtl: isRTL,
     theme: { dark: isDarkTheme },
-    shouldUseDeviceColors,
+    shouldUseDynamicTheme,
   } = preferences;
 
   const _handleToggleRTL = () => {
-    if (expoGoExecution) {
+    if (Platform.OS !== 'web' && expoGoExecution) {
       setShowRTLDialog(true);
       return;
     }
 
     toggleRTL();
-    I18nManager.forceRTL(!isRTL);
-    if (isWeb) {
-      Updates.reloadAsync();
-    }
   };
 
   const _handleDismissRTLDialog = () => {
@@ -137,14 +125,10 @@ function DrawerItems() {
   };
 
   const coloredLabelTheme = {
-    colors: isV3
-      ? {
-          secondaryContainer: MD3Colors.tertiary80,
-          onSecondaryContainer: MD3Colors.tertiary20,
-        }
-      : {
-          primary: MD2Colors.tealA200,
-        },
+    colors: {
+      secondaryContainer: Palette.tertiary80,
+      onSecondaryContainer: Palette.tertiary20,
+    },
   };
 
   return (
@@ -157,7 +141,7 @@ function DrawerItems() {
         },
       ]}
     >
-      {isV3 && collapsed && (
+      {collapsed && (
         <Drawer.Section style={styles.collapsedSection}>
           {DrawerCollapsedItemsData.map((props, index) => (
             <Drawer.CollapsedItem
@@ -187,18 +171,18 @@ function DrawerItems() {
           </Drawer.Section>
 
           <Drawer.Section title="Preferences">
-            {deviceColorsSupported && isV3 ? (
-              <TouchableRipple onPress={toggleShouldUseDeviceColors}>
-                <View style={[styles.preference, isV3 && styles.v3Preference]}>
-                  <Text variant="labelLarge">Use device colors *</Text>
+            {dynamicThemeSupported ? (
+              <TouchableRipple onPress={toggleShouldUseDynamicTheme}>
+                <View style={[styles.preference, styles.v3Preference]}>
+                  <Text variant="labelLarge">Use Dynamic Theme</Text>
                   <View pointerEvents="none">
-                    <Switch value={shouldUseDeviceColors} />
+                    <Switch value={shouldUseDynamicTheme} />
                   </View>
                 </View>
               </TouchableRipple>
             ) : null}
             <TouchableRipple onPress={toggleTheme}>
-              <View style={[styles.preference, isV3 && styles.v3Preference]}>
+              <View style={[styles.preference, styles.v3Preference]}>
                 <Text variant="labelLarge">Dark Theme</Text>
                 <View pointerEvents="none">
                   <Switch value={isDarkTheme} />
@@ -206,52 +190,37 @@ function DrawerItems() {
               </View>
             </TouchableRipple>
 
-            {!isWeb && (
-              <TouchableRipple onPress={_handleToggleRTL}>
-                <View style={[styles.preference, isV3 && styles.v3Preference]}>
-                  <Text variant="labelLarge">RTL</Text>
-                  <View pointerEvents="none">
-                    <Switch value={isRTL} />
-                  </View>
-                </View>
-              </TouchableRipple>
-            )}
-
-            <TouchableRipple onPress={toggleThemeVersion}>
-              <View style={[styles.preference, isV3 && styles.v3Preference]}>
-                <Text variant="labelLarge">MD 2</Text>
+            <TouchableRipple onPress={_handleToggleRTL}>
+              <View style={[styles.preference, styles.v3Preference]}>
+                <Text variant="labelLarge">RTL</Text>
                 <View pointerEvents="none">
-                  <Switch value={!isV3} />
+                  <Switch value={isRTL} />
                 </View>
               </View>
             </TouchableRipple>
 
-            {isV3 && (
-              <TouchableRipple onPress={toggleCollapsed}>
-                <View style={[styles.preference, isV3 && styles.v3Preference]}>
-                  <Text variant="labelLarge">Collapsed drawer *</Text>
-                  <View pointerEvents="none">
-                    <Switch value={collapsed} />
-                  </View>
+            <TouchableRipple onPress={toggleCollapsed}>
+              <View style={[styles.preference, styles.v3Preference]}>
+                <Text variant="labelLarge">Collapsed drawer *</Text>
+                <View pointerEvents="none">
+                  <Switch value={collapsed} />
                 </View>
-              </TouchableRipple>
-            )}
+              </View>
+            </TouchableRipple>
 
-            {isV3 && (
-              <TouchableRipple onPress={toggleCustomFont}>
-                <View style={[styles.preference, isV3 && styles.v3Preference]}>
-                  <Text variant="labelLarge">Custom font *</Text>
-                  <View pointerEvents="none">
-                    <Switch value={customFontLoaded} />
-                  </View>
+            <TouchableRipple onPress={toggleCustomFont}>
+              <View style={[styles.preference, styles.v3Preference]}>
+                <Text variant="labelLarge">Custom font *</Text>
+                <View pointerEvents="none">
+                  <Switch value={customFontLoaded} />
                 </View>
-              </TouchableRipple>
-            )}
+              </View>
+            </TouchableRipple>
 
             <TouchableRipple onPress={toggleRippleEffect}>
-              <View style={[styles.preference, isV3 && styles.v3Preference]}>
+              <View style={[styles.preference, styles.v3Preference]}>
                 <Text variant="labelLarge">
-                  {isIOS ? 'Highlight' : 'Ripple'} effect *
+                  {Platform.OS === 'ios' ? 'Highlight' : 'Ripple'} effect *
                 </Text>
                 <View pointerEvents="none">
                   <Switch value={rippleEffectEnabled} />
@@ -259,9 +228,9 @@ function DrawerItems() {
               </View>
             </TouchableRipple>
           </Drawer.Section>
-          {isV3 && !collapsed && (
+          {!collapsed && (
             <Text variant="bodySmall" style={styles.annotation}>
-              * - available only for MD3
+              * - optional example toggles
             </Text>
           )}
           <Text variant="bodySmall" style={styles.annotation}>
@@ -270,24 +239,22 @@ function DrawerItems() {
           </Text>
         </>
       )}
-      <Portal>
-        <Dialog visible={showRTLDialog} onDismiss={_handleDismissRTLDialog}>
-          <Dialog.Title>Changing to RTL</Dialog.Title>
-          <Dialog.Content>
-            <Text variant="bodyMedium">
-              Due to Expo Go limitations it is impossible to change RTL
-              dynamically. To do so, you need to create a development build of
-              Example app or change it statically by setting{' '}
-              <Text variant="labelMedium">forcesRTL</Text> property to true in{' '}
-              <Text variant="labelMedium">app.json</Text> within{' '}
-              <Text variant="labelMedium">example</Text> directory.
-            </Text>
-            <Dialog.Actions>
-              <Button onPress={_handleDismissRTLDialog}>Ok</Button>
-            </Dialog.Actions>
-          </Dialog.Content>
-        </Dialog>
-      </Portal>
+      <Dialog visible={showRTLDialog} onDismiss={_handleDismissRTLDialog}>
+        <Dialog.Title>Changing to RTL</Dialog.Title>
+        <Dialog.Content>
+          <Text variant="bodyMedium">
+            Due to Expo Go limitations it is impossible to change RTL
+            dynamically. To do so, you need to create a development build of
+            Example app or change it statically by setting{' '}
+            <Text variant="labelMedium">forcesRTL</Text> property to true in{' '}
+            <Text variant="labelMedium">app.json</Text> within{' '}
+            <Text variant="labelMedium">example</Text> directory.
+          </Text>
+          <Dialog.Actions>
+            <Button onPress={_handleDismissRTLDialog}>Ok</Button>
+          </Dialog.Actions>
+        </Dialog.Content>
+      </Dialog>
     </DrawerContentScrollView>
   );
 }
diff --git a/example/src/ExampleList.tsx b/example/src/ExampleList.tsx
index 016f085caa..2af1eed385 100644
--- a/example/src/ExampleList.tsx
+++ b/example/src/ExampleList.tsx
@@ -1,12 +1,10 @@
-import * as React from 'react';
 import { FlatList } from 'react-native';
 
-import type { StackNavigationProp } from '@react-navigation/stack';
-import { Divider, List } from 'react-native-paper';
+import { useNavigation } from '@react-navigation/native';
+import { Divider, List, useTheme } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import ActivityIndicatorExample from './Examples/ActivityIndicatorExample';
-import AnimatedFABExample from './Examples/AnimatedFABExample';
 import AppbarExample from './Examples/AppbarExample';
 import AvatarExample from './Examples/AvatarExample';
 import BadgeExample from './Examples/BadgeExample';
@@ -46,111 +44,74 @@ import TextExample from './Examples/TextExample';
 import TextInputExample from './Examples/TextInputExample';
 import ThemeExample from './Examples/ThemeExample';
 import ThemingWithReactNavigation from './Examples/ThemingWithReactNavigation';
-import ToggleButtonExample from './Examples/ToggleButtonExample';
 import TooltipExample from './Examples/TooltipExample';
 import TouchableRippleExample from './Examples/TouchableRippleExample';
-import { useExampleTheme } from './hooks/useExampleTheme';
 
-export const mainExamples: Record<
-  string,
-  React.ComponentType<any> & { title: string }
-> = {
-  animatedFab: AnimatedFABExample,
-  activityIndicator: ActivityIndicatorExample,
-  appbar: AppbarExample,
-  avatar: AvatarExample,
-  badge: BadgeExample,
-  banner: BannerExample,
-  bottomNavigationBarExample: BottomNavigationBarExample,
-  bottomNavigation: BottomNavigationExample,
-  button: ButtonExample,
-  card: CardExample,
-  checkbox: CheckboxExample,
-  checkboxItem: CheckboxItemExample,
-  chip: ChipExample,
-  dataTable: DataTableExample,
-  dialog: DialogExample,
-  divider: DividerExample,
-  fab: FABExample,
-  iconButton: IconButtonExample,
-  icon: IconExample,
-  listAccordion: ListAccordionExample,
-  listAccordionGroup: ListAccordionExampleGroup,
-  listSection: ListSectionExample,
-  listItem: ListItemExample,
-  menu: MenuExample,
-  progressbar: ProgressBarExample,
-  radio: RadioButtonExample,
-  radioGroup: RadioButtonGroupExample,
-  radioItem: RadioButtonItemExample,
-  searchbar: SearchbarExample,
-  segmentedButton: SegmentedButtonExample,
-  snackbar: SnackbarExample,
-  surface: SurfaceExample,
-  switch: SwitchExample,
-  text: TextExample,
-  textInput: TextInputExample,
-  toggleButton: ToggleButtonExample,
-  tooltipExample: TooltipExample,
-  touchableRipple: TouchableRippleExample,
-  theme: ThemeExample,
-  themingWithReactNavigation: ThemingWithReactNavigation,
+export const mainExamples = {
+  ActivityIndicator: ActivityIndicatorExample,
+  Appbar: AppbarExample,
+  Avatar: AvatarExample,
+  Badge: BadgeExample,
+  Banner: BannerExample,
+  BottomNavigationBarExample,
+  BottomNavigation: BottomNavigationExample,
+  Button: ButtonExample,
+  Card: CardExample,
+  Checkbox: CheckboxExample,
+  CheckboxItem: CheckboxItemExample,
+  Chip: ChipExample,
+  DataTable: DataTableExample,
+  Dialog: DialogExample,
+  Divider: DividerExample,
+  FAB: FABExample,
+  IconButton: IconButtonExample,
+  Icon: IconExample,
+  ListAccordion: ListAccordionExample,
+  ListAccordionGroup: ListAccordionExampleGroup,
+  ListSection: ListSectionExample,
+  ListItem: ListItemExample,
+  Menu: MenuExample,
+  Progressbar: ProgressBarExample,
+  Radio: RadioButtonExample,
+  RadioGroup: RadioButtonGroupExample,
+  RadioItem: RadioButtonItemExample,
+  Searchbar: SearchbarExample,
+  SegmentedButton: SegmentedButtonExample,
+  Snackbar: SnackbarExample,
+  Surface: SurfaceExample,
+  Switch: SwitchExample,
+  Text: TextExample,
+  TextInput: TextInputExample,
+  TooltipExample,
+  TouchableRipple: TouchableRippleExample,
+  Theme: ThemeExample,
+  ThemingWithReactNavigation,
 };
 
-export const nestedExamples: Record<
-  string,
-  React.ComponentType<any> & { title: string }
-> = {
-  themingWithReactNavigation: ThemingWithReactNavigation,
-  teamDetails: TeamDetails,
-  teamsList: TeamsList,
-  segmentedButtonRealCase: SegmentedButtonRealCase,
-  segmentedButtonMultiselectRealCase: SegmentedButtonMultiselectRealCase,
+export const nestedExamples = {
+  ThemingWithReactNavigation,
+  TeamDetails,
+  TeamsList,
+  SegmentedButtonRealCase,
+  SegmentedButtonMultiselectRealCase,
 };
 
-export const examples: Record<
-  string,
-  React.ComponentType<any> & { title: string }
-> = {
+export const examples = {
   ...mainExamples,
   ...nestedExamples,
 };
 
-type Props = {
-  navigation: StackNavigationProp<{ [key: string]: undefined }>;
-};
-
-type Item = {
-  id: string;
-  data: (typeof mainExamples)[string];
-};
-
-const data = Object.keys(mainExamples).map(
-  (id): Item => ({ id, data: mainExamples[id] })
-);
+const data = Object.entries(mainExamples).map(([id, example]) => ({
+  id,
+  data: example,
+}));
 
-export default function ExampleList({ navigation }: Props) {
-  const keyExtractor = (item: { id: string }) => item.id;
+export default function ExampleList() {
+  const navigation = useNavigation('ExampleList');
 
-  const { colors, isV3 } = useExampleTheme();
+  const { colors } = useTheme();
   const safeArea = useSafeAreaInsets();
 
-  const renderItem = ({ item }: { item: Item }) => {
-    const { data, id } = item;
-
-    if (!isV3 && data.title === mainExamples.themingWithReactNavigation.title) {
-      return null;
-    }
-
-    return (
-      <List.Item
-        unstable_pressDelay={65}
-        title={data.title}
-        onPress={() => navigation.navigate(id)}
-      />
-    );
-  };
-
   return (
     <FlatList
       contentContainerStyle={{
@@ -164,8 +125,18 @@ export default function ExampleList({ navigation }: Props) {
       }}
       showsVerticalScrollIndicator={false}
       ItemSeparatorComponent={Divider}
-      renderItem={renderItem}
-      keyExtractor={keyExtractor}
+      renderItem={({ item }) => (
+        <List.Item
+          unstable_pressDelay={65}
+          title={item.data.title}
+          onPress={() => {
+            // @ts-expect-error TypeScript can't call overloaded functions with union arguments.
+            // https://github.com/microsoft/TypeScript/issues/40803
+            navigation.navigate(item.id);
+          }}
+        />
+      )}
+      keyExtractor={({ id }) => id}
       data={data}
     />
   );
diff --git a/example/src/Examples/ActivityIndicatorExample.tsx b/example/src/Examples/ActivityIndicatorExample.tsx
index 8013142921..e5fc90f032 100644
--- a/example/src/Examples/ActivityIndicatorExample.tsx
+++ b/example/src/Examples/ActivityIndicatorExample.tsx
@@ -1,26 +1,17 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import {
-  ActivityIndicator,
-  FAB,
-  List,
-  MD2Colors,
-  MD3Colors,
-} from 'react-native-paper';
+import { ActivityIndicator, FAB, List, Palette } from 'react-native-paper';
 
-import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const ActivityIndicatorExample = () => {
   const [animating, setAnimating] = React.useState<boolean>(true);
-  const { isV3 } = useExampleTheme();
 
   return (
     <ScreenWrapper style={styles.container}>
       <View style={styles.row}>
         <FAB
-          size="small"
           icon={animating ? 'pause' : 'play'}
           onPress={() => setAnimating(!animating)}
         />
@@ -49,7 +40,7 @@ const ActivityIndicatorExample = () => {
       <List.Section title="Custom color">
         <ActivityIndicator
           animating={animating}
-          color={isV3 ? MD3Colors.error20 : MD2Colors.red500}
+          color={Palette.error20}
           hidesWhenStopped={false}
         />
       </List.Section>
diff --git a/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx b/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx
deleted file mode 100644
index 4bffa05322..0000000000
--- a/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx
+++ /dev/null
@@ -1,220 +0,0 @@
-import * as React from 'react';
-import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
-import { Animated, FlatList, Platform, StyleSheet, View } from 'react-native';
-
-import Icon from '@expo/vector-icons/MaterialCommunityIcons';
-import {
-  Avatar,
-  MD2Colors,
-  MD3Colors,
-  Paragraph,
-  Text,
-} from 'react-native-paper';
-
-import CustomFAB from './CustomFAB';
-import CustomFABControls, {
-  Controls,
-  initialControls,
-} from './CustomFABControls';
-import { animatedFABExampleData } from '../../../utils';
-import { useExampleTheme } from '../../hooks/useExampleTheme';
-
-type Item = {
-  id: string;
-  sender: string;
-  header: string;
-  message: string;
-  initials: string;
-  date: string;
-  read: boolean;
-  favorite: boolean;
-  bgColor: string;
-};
-
-const AnimatedFABExample = () => {
-  const { colors, isV3 } = useExampleTheme();
-
-  const isIOS = Platform.OS === 'ios';
-
-  const [extended, setExtended] = React.useState<boolean>(true);
-  const [visible, setVisible] = React.useState<boolean>(true);
-
-  const [controls, setControls] = React.useState<Controls>(initialControls);
-
-  const { current: velocity } = React.useRef<Animated.Value>(
-    new Animated.Value(0)
-  );
-
-  const renderItem = React.useCallback(
-    ({ item }: { item: Item }) => {
-      const TextComponent = isV3 ? Text : Paragraph;
-
-      return (
-        <View style={styles.itemContainer}>
-          <Avatar.Text
-            style={[styles.avatar, { backgroundColor: item.bgColor }]}
-            label={item.initials}
-            color={isV3 ? MD3Colors.primary100 : MD2Colors.white}
-            size={40}
-          />
-          <View style={styles.itemTextContentContainer}>
-            <View style={styles.itemHeaderContainer}>
-              <TextComponent
-                variant="labelLarge"
-                style={[styles.header, !item.read && styles.read]}
-                ellipsizeMode="tail"
-                numberOfLines={1}
-              >
-                {item.sender}
-              </TextComponent>
-              <TextComponent
-                variant="labelLarge"
-                style={[styles.date, !item.read && styles.read]}
-              >
-                {item.date}
-              </TextComponent>
-            </View>
-
-            <View style={styles.itemMessageContainer}>
-              <View style={styles.flex}>
-                <TextComponent
-                  variant="labelLarge"
-                  ellipsizeMode="tail"
-                  numberOfLines={1}
-                  style={!item.read && styles.read}
-                >
-                  {item.header}
-                </TextComponent>
-                <TextComponent
-                  variant="labelLarge"
-                  numberOfLines={1}
-                  ellipsizeMode="tail"
-                >
-                  {item.message}
-                </TextComponent>
-              </View>
-
-              <Icon
-                name={item.favorite ? 'star' : 'star-outline'}
-                color={
-                  item.favorite
-                    ? isV3
-                      ? MD3Colors.error70
-                      : MD2Colors.orange500
-                    : isV3
-                    ? MD3Colors.neutralVariant70
-                    : MD2Colors.grey500
-                }
-                size={20}
-                onPress={() => setVisible(!visible)}
-                style={styles.icon}
-              />
-            </View>
-          </View>
-        </View>
-      );
-    },
-    [visible, isV3]
-  );
-
-  const onScroll = ({
-    nativeEvent,
-  }: NativeSyntheticEvent<NativeScrollEvent>) => {
-    const currentScrollPosition =
-      Math.floor(nativeEvent?.contentOffset?.y) ?? 0;
-
-    if (!isIOS) {
-      return velocity.setValue(currentScrollPosition);
-    }
-
-    setExtended(currentScrollPosition <= 0);
-  };
-
-  const _keyExtractor = React.useCallback(
-    (item: { id: string }) => item.id,
-    []
-  );
-
-  const { animateFrom, iconMode } = controls;
-
-  return (
-    <>
-      <CustomFABControls controls={controls} setControls={setControls} />
-      <FlatList
-        data={animatedFABExampleData}
-        renderItem={renderItem}
-        keyExtractor={_keyExtractor}
-        onEndReachedThreshold={0}
-        scrollEventThrottle={16}
-        showsVerticalScrollIndicator={false}
-        style={[
-          styles.flex,
-          {
-            backgroundColor: colors?.background,
-          },
-        ]}
-        contentContainerStyle={styles.container}
-        onScroll={onScroll}
-      />
-
-      <CustomFAB
-        visible={visible}
-        animatedValue={velocity}
-        extended={extended}
-        label={'New Message'}
-        animateFrom={animateFrom}
-        iconMode={iconMode}
-      />
-    </>
-  );
-};
-
-AnimatedFABExample.title = 'Animated Floating Action Button';
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 16,
-    paddingBottom: 60,
-  },
-  avatar: {
-    marginRight: 16,
-    marginTop: 8,
-  },
-  flex: {
-    flex: 1,
-  },
-  itemContainer: {
-    marginBottom: 16,
-    flexDirection: 'row',
-  },
-  itemTextContentContainer: {
-    flexDirection: 'column',
-    flex: 1,
-  },
-  itemHeaderContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  itemMessageContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    flexGrow: 1,
-  },
-  read: {
-    fontWeight: 'bold',
-  },
-  icon: {
-    marginLeft: 16,
-    alignSelf: 'flex-end',
-  },
-  date: {
-    fontSize: 12,
-  },
-  header: {
-    fontSize: 14,
-    marginRight: 8,
-    flex: 1,
-  },
-});
-
-export default AnimatedFABExample;
diff --git a/example/src/Examples/AnimatedFABExample/CustomFAB.tsx b/example/src/Examples/AnimatedFABExample/CustomFAB.tsx
deleted file mode 100644
index 3495b00a86..0000000000
--- a/example/src/Examples/AnimatedFABExample/CustomFAB.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react';
-import { Animated, Platform, StyleSheet, ViewStyle } from 'react-native';
-
-import { AnimatedFAB } from 'react-native-paper';
-
-import { useExampleTheme } from '../../hooks/useExampleTheme';
-
-type CustomFABProps = {
-  animatedValue: Animated.Value;
-  visible: boolean;
-  extended: boolean;
-  label: string;
-  animateFrom: 'left' | 'right';
-  iconMode?: 'static' | 'dynamic';
-  style?: ViewStyle;
-};
-
-const CustomFAB = ({
-  animatedValue,
-  visible,
-  extended,
-  label,
-  animateFrom,
-  style,
-  iconMode,
-}: CustomFABProps) => {
-  const [isExtended, setIsExtended] = React.useState(true);
-  const { isV3 } = useExampleTheme();
-
-  const isIOS = Platform.OS === 'ios';
-
-  React.useEffect(() => {
-    if (!isIOS) {
-      animatedValue.addListener(({ value }: { value: number }) => {
-        setIsExtended(value <= 0);
-      });
-    } else setIsExtended(extended);
-  }, [animatedValue, extended, isIOS]);
-
-  const fabStyle = { [animateFrom]: 16 };
-
-  return (
-    <AnimatedFAB
-      icon={'plus'}
-      label={label}
-      extended={isExtended}
-      uppercase={!isV3}
-      onPress={() => console.log('Pressed')}
-      visible={visible}
-      animateFrom={animateFrom}
-      iconMode={iconMode}
-      style={[styles.fabStyle, style, fabStyle]}
-    />
-  );
-};
-
-export default CustomFAB;
-
-const styles = StyleSheet.create({
-  fabStyle: {
-    bottom: 16,
-    position: 'absolute',
-  },
-});
diff --git a/example/src/Examples/AnimatedFABExample/CustomFABControls.tsx b/example/src/Examples/AnimatedFABExample/CustomFABControls.tsx
deleted file mode 100644
index a612a4234f..0000000000
--- a/example/src/Examples/AnimatedFABExample/CustomFABControls.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import React from 'react';
-import { FlatList, ListRenderItemInfo, StyleSheet, View } from 'react-native';
-
-import { TouchableOpacity } from 'react-native-gesture-handler';
-import type {
-  AnimatedFABAnimateFrom,
-  AnimatedFABIconMode,
-} from 'react-native-paper';
-import { Paragraph, RadioButton, Text } from 'react-native-paper';
-
-import { useExampleTheme } from '../../hooks/useExampleTheme';
-
-export type Controls = {
-  iconMode: AnimatedFABIconMode;
-  animateFrom: AnimatedFABAnimateFrom;
-};
-
-export const initialControls: Controls = {
-  iconMode: 'static',
-  animateFrom: 'right',
-};
-
-type Props = {
-  controls: Controls;
-  setControls(controls: React.SetStateAction<Controls>): void;
-};
-
-type ControlValue = AnimatedFABIconMode | AnimatedFABAnimateFrom;
-
-type CustomControlProps = {
-  name: string;
-  options: ControlValue[];
-  value: ControlValue;
-  onChange(newValue: ControlValue): void;
-};
-
-const CustomControl = ({
-  name,
-  options,
-  value,
-  onChange,
-}: CustomControlProps) => {
-  const { isV3 } = useExampleTheme();
-
-  const _renderItem = React.useCallback(
-    ({ item }: ListRenderItemInfo<(typeof options)[number]>) => {
-      const TextComponent = isV3 ? Text : Paragraph;
-
-      return (
-        <TouchableOpacity
-          accessibilityRole="button"
-          onPress={() => onChange(item)}
-          style={styles.controlItem}
-        >
-          <TextComponent variant="labelLarge">{item}</TextComponent>
-
-          <RadioButton
-            value="dynamic"
-            status={value === item ? 'checked' : 'unchecked'}
-          />
-        </TouchableOpacity>
-      );
-    },
-    [value, onChange, isV3]
-  );
-
-  const _keyExtractor = React.useCallback(
-    (item: (typeof options)[number]) => item,
-    []
-  );
-  const TextComponent = isV3 ? Text : Paragraph;
-
-  return (
-    <View style={styles.controlWrapper}>
-      <TextComponent variant="labelLarge">{name}</TextComponent>
-
-      <FlatList
-        horizontal
-        scrollEnabled={false}
-        data={options}
-        renderItem={_renderItem}
-        keyExtractor={_keyExtractor}
-        contentContainerStyle={styles.controlItemsList}
-      />
-    </View>
-  );
-};
-
-const CustomFABControls = ({
-  setControls,
-  controls: { animateFrom, iconMode },
-}: Props) => {
-  const { colors } = useExampleTheme();
-
-  const setIconMode = (newIconMode: AnimatedFABIconMode) =>
-    setControls((state) => ({ ...state, iconMode: newIconMode }));
-
-  const setAnimateFrom = (newAnimateFrom: AnimatedFABAnimateFrom) =>
-    setControls((state) => ({ ...state, animateFrom: newAnimateFrom }));
-
-  return (
-    <View
-      style={[
-        styles.controlsWrapper,
-        {
-          backgroundColor: colors.background,
-        },
-      ]}
-    >
-      <CustomControl
-        name="iconMode"
-        options={['static', 'dynamic']}
-        value={iconMode}
-        onChange={setIconMode}
-      />
-
-      <CustomControl
-        name="animateFrom"
-        options={['left', 'right']}
-        value={animateFrom}
-        onChange={setAnimateFrom}
-      />
-    </View>
-  );
-};
-
-export default CustomFABControls;
-
-const styles = StyleSheet.create({
-  controlsWrapper: {
-    paddingHorizontal: 16,
-  },
-  controlWrapper: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  controlItemsList: {
-    flex: 1,
-    justifyContent: 'flex-end',
-  },
-  controlItem: {
-    marginLeft: 16,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-});
diff --git a/example/src/Examples/AnimatedFABExample/index.ts b/example/src/Examples/AnimatedFABExample/index.ts
deleted file mode 100644
index 7561c57b50..0000000000
--- a/example/src/Examples/AnimatedFABExample/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './AnimatedFABExample';
diff --git a/example/src/Examples/AppbarExample.tsx b/example/src/Examples/AppbarExample.tsx
index 1ebe74bad5..2d4eb0bbc4 100644
--- a/example/src/Examples/AppbarExample.tsx
+++ b/example/src/Examples/AppbarExample.tsx
@@ -1,47 +1,43 @@
 import * as React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 
-import type { StackNavigationProp } from '@react-navigation/stack';
+import { useNavigation } from '@react-navigation/native';
 import {
   Appbar,
   FAB,
   List,
-  Paragraph,
+  Palette,
   RadioButton,
   Snackbar,
   Switch,
   Text,
+  useTheme,
 } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { yellowA200 } from '../../../src/styles/themes/v2/colors';
-import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
-type Props = {
-  navigation: StackNavigationProp<{}>;
-};
-
 type AppbarModes = 'small' | 'medium' | 'large' | 'center-aligned';
 
 const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';
 const MEDIUM_FAB_HEIGHT = 56;
 
-const AppbarExample = ({ navigation }: Props) => {
+const AppbarExample = () => {
+  const navigation = useNavigation('Appbar');
+
   const [showLeftIcon, setShowLeftIcon] = React.useState(true);
   const [showSubtitle, setShowSubtitle] = React.useState(true);
   const [showSearchIcon, setShowSearchIcon] = React.useState(true);
   const [showMoreIcon, setShowMoreIcon] = React.useState(true);
   const [showCustomColor, setShowCustomColor] = React.useState(false);
-  const [showExactTheme, setShowExactTheme] = React.useState(false);
   const [appbarMode, setAppbarMode] = React.useState<AppbarModes>('small');
   const [showCalendarIcon, setShowCalendarIcon] = React.useState(false);
   const [showElevated, setShowElevated] = React.useState(false);
   const [showSnackbar, setShowSnackbar] = React.useState(false);
 
-  const theme = useExampleTheme();
+  const theme = useTheme();
   const { bottom, left, right } = useSafeAreaInsets();
-  const height = theme.isV3 ? 80 : 56;
+  const height = 80;
 
   const isCenterAlignedMode = appbarMode === 'center-aligned';
 
@@ -50,20 +46,13 @@ const AppbarExample = ({ navigation }: Props) => {
       header: () => (
         <Appbar.Header
           style={showCustomColor ? styles.customColor : null}
-          theme={{
-            mode: showExactTheme ? 'exact' : 'adaptive',
-          }}
           mode={appbarMode}
           elevated={showElevated}
         >
           {showLeftIcon && (
             <Appbar.BackAction onPress={() => navigation.goBack()} />
           )}
-          <Appbar.Content
-            title="Title"
-            subtitle={showSubtitle ? 'Subtitle' : null}
-            onPress={() => setShowSnackbar(true)}
-          />
+          <Appbar.Content title="Title" onPress={() => setShowSnackbar(true)} />
           {isCenterAlignedMode
             ? false
             : showCalendarIcon && (
@@ -85,28 +74,18 @@ const AppbarExample = ({ navigation }: Props) => {
     showSearchIcon,
     showMoreIcon,
     showCustomColor,
-    showExactTheme,
     appbarMode,
     showCalendarIcon,
     isCenterAlignedMode,
     showElevated,
   ]);
 
-  const TextComponent = theme.isV3 ? Text : Paragraph;
-
   const renderFAB = () => {
     return (
       <FAB
-        mode={theme.isV3 ? 'flat' : 'elevated'}
-        size="medium"
         icon="plus"
         onPress={() => {}}
-        style={[
-          styles.fab,
-          theme.isV3
-            ? { top: (height - MEDIUM_FAB_HEIGHT) / 2 }
-            : { bottom: height / 2 + bottom },
-        ]}
+        style={[styles.fab, { top: (height - MEDIUM_FAB_HEIGHT) / 2 }]}
       />
     );
   };
@@ -114,49 +93,37 @@ const AppbarExample = ({ navigation }: Props) => {
   const renderDefaultOptions = () => (
     <>
       <View style={styles.row}>
-        <TextComponent>Left icon</TextComponent>
+        <Text>Left icon</Text>
         <Switch value={showLeftIcon} onValueChange={setShowLeftIcon} />
       </View>
-      {!theme.isV3 && (
-        <View style={styles.row}>
-          <TextComponent>Subtitle</TextComponent>
-          <Switch value={showSubtitle} onValueChange={setShowSubtitle} />
-        </View>
-      )}
       <View style={styles.row}>
-        <TextComponent>Search icon</TextComponent>
+        <Text>Subtitle</Text>
+        <Switch value={showSubtitle} onValueChange={setShowSubtitle} />
+      </View>
+      <View style={styles.row}>
+        <Text>Search icon</Text>
         <Switch value={showSearchIcon} onValueChange={setShowSearchIcon} />
       </View>
       <View style={styles.row}>
-        <TextComponent>More icon</TextComponent>
+        <Text>More icon</Text>
         <Switch value={showMoreIcon} onValueChange={setShowMoreIcon} />
       </View>
-      {theme.isV3 && (
-        <View style={styles.row}>
-          <TextComponent>Calendar icon</TextComponent>
-          <Switch
-            value={isCenterAlignedMode ? false : showCalendarIcon}
-            disabled={isCenterAlignedMode}
-            onValueChange={setShowCalendarIcon}
-          />
-        </View>
-      )}
       <View style={styles.row}>
-        <TextComponent>Custom Color</TextComponent>
+        <Text>Calendar icon</Text>
+        <Switch
+          value={isCenterAlignedMode ? false : showCalendarIcon}
+          disabled={isCenterAlignedMode}
+          onValueChange={setShowCalendarIcon}
+        />
+      </View>
+      <View style={styles.row}>
+        <Text>Custom Color</Text>
         <Switch value={showCustomColor} onValueChange={setShowCustomColor} />
       </View>
-      {!theme.isV3 && (
-        <View style={styles.row}>
-          <TextComponent>Exact Dark Theme</TextComponent>
-          <Switch value={showExactTheme} onValueChange={setShowExactTheme} />
-        </View>
-      )}
-      {theme.isV3 && (
-        <View style={styles.row}>
-          <TextComponent>Elevated</TextComponent>
-          <Switch value={showElevated} onValueChange={setShowElevated} />
-        </View>
-      )}
+      <View style={styles.row}>
+        <Text>Elevated</Text>
+        <Switch value={showElevated} onValueChange={setShowElevated} />
+      </View>
     </>
   );
 
@@ -166,40 +133,35 @@ const AppbarExample = ({ navigation }: Props) => {
         style={{ marginBottom: height + bottom }}
         contentContainerStyle={styles.contentContainer}
       >
-        {theme.isV3 ? (
-          <List.Section title="Default options">
-            {renderDefaultOptions()}
-          </List.Section>
-        ) : (
-          renderDefaultOptions()
-        )}
-        {theme.isV3 && (
-          <List.Section title="Appbar Modes">
-            <RadioButton.Group
-              value={appbarMode}
-              onValueChange={(value: string) =>
-                setAppbarMode(value as AppbarModes)
-              }
-            >
-              <View style={styles.row}>
-                <TextComponent>Small (default)</TextComponent>
-                <RadioButton value="small" />
-              </View>
-              <View style={styles.row}>
-                <TextComponent>Medium</TextComponent>
-                <RadioButton value="medium" />
-              </View>
-              <View style={styles.row}>
-                <TextComponent>Large</TextComponent>
-                <RadioButton value="large" />
-              </View>
-              <View style={styles.row}>
-                <TextComponent>Center-aligned</TextComponent>
-                <RadioButton value="center-aligned" />
-              </View>
-            </RadioButton.Group>
-          </List.Section>
-        )}
+        <List.Section title="Default options">
+          {renderDefaultOptions()}
+        </List.Section>
+        <List.Section title="Appbar Modes">
+          <RadioButton.Group
+            value={appbarMode}
+            onValueChange={(value: string) =>
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+              setAppbarMode(value as AppbarModes)
+            }
+          >
+            <View style={styles.row}>
+              <Text>Small (default)</Text>
+              <RadioButton value="small" />
+            </View>
+            <View style={styles.row}>
+              <Text>Medium</Text>
+              <RadioButton value="medium" />
+            </View>
+            <View style={styles.row}>
+              <Text>Large</Text>
+              <RadioButton value="large" />
+            </View>
+            <View style={styles.row}>
+              <Text>Center-aligned</Text>
+              <RadioButton value="center-aligned" />
+            </View>
+          </RadioButton.Group>
+        </List.Section>
       </ScreenWrapper>
       <Appbar
         style={[
@@ -207,20 +169,18 @@ const AppbarExample = ({ navigation }: Props) => {
           {
             height: height + bottom,
           },
-          theme.isV3 && {
-            backgroundColor: theme.colors.elevation.level2,
+          {
+            backgroundColor: theme.colors.surfaceContainerHigh,
           },
         ]}
         safeAreaInsets={{ bottom, left, right }}
-        theme={{ mode: showExactTheme ? 'exact' : 'adaptive' }}
       >
         <Appbar.Action icon="archive" onPress={() => {}} />
         <Appbar.Action icon="email" onPress={() => {}} />
         <Appbar.Action icon="label" onPress={() => {}} />
         <Appbar.Action icon="delete" onPress={() => {}} />
-        {theme.isV3 && renderFAB()}
+        {renderFAB()}
       </Appbar>
-      {!theme.isV3 && renderFAB()}
       <Snackbar
         visible={showSnackbar}
         onDismiss={() => setShowSnackbar(false)}
@@ -258,6 +218,6 @@ const styles = StyleSheet.create({
     right: 16,
   },
   customColor: {
-    backgroundColor: yellowA200,
+    backgroundColor: Palette.secondary80,
   },
 });
diff --git a/example/src/Examples/AvatarExample.tsx b/example/src/Examples/AvatarExample.tsx
index b77da80b09..6d6349cbba 100644
--- a/example/src/Examples/AvatarExample.tsx
+++ b/example/src/Examples/AvatarExample.tsx
@@ -1,13 +1,10 @@
-import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { Avatar, List, MD2Colors, MD3Colors } from 'react-native-paper';
+import { Avatar, List, Palette } from 'react-native-paper';
 
-import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const AvatarExample = () => {
-  const { isV3 } = useExampleTheme();
   return (
     <ScreenWrapper>
       <List.Section title="Text">
@@ -16,11 +13,11 @@ const AvatarExample = () => {
             style={[
               styles.avatar,
               {
-                backgroundColor: isV3 ? MD3Colors.error70 : MD2Colors.yellow500,
+                backgroundColor: Palette.error70,
               },
             ]}
             label="XD"
-            color={isV3 ? MD3Colors.primary0 : MD2Colors.black}
+            color={Palette.primary0}
           />
           <Avatar.Text style={styles.avatar} label="XD" />
           <Avatar.Text style={styles.avatar} label="XD" size={80} />
@@ -32,11 +29,11 @@ const AvatarExample = () => {
             style={[
               styles.avatar,
               {
-                backgroundColor: isV3 ? MD3Colors.error70 : MD2Colors.yellow500,
+                backgroundColor: Palette.error70,
               },
             ]}
             icon="folder"
-            color={isV3 ? MD3Colors.primary0 : MD2Colors.black}
+            color={Palette.primary0}
           />
           <Avatar.Icon style={styles.avatar} icon="folder" />
           <Avatar.Icon style={styles.avatar} icon="folder" size={80} />
diff --git a/example/src/Examples/BadgeExample.tsx b/example/src/Examples/BadgeExample.tsx
index 17f0e1b160..7ca1a43f9c 100644
--- a/example/src/Examples/BadgeExample.tsx
+++ b/example/src/Examples/BadgeExample.tsx
@@ -5,18 +5,15 @@ import {
   Badge,
   IconButton,
   List,
-  MD2Colors,
-  MD3Colors,
+  Palette,
   Text,
   Switch,
 } from 'react-native-paper';
 
-import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const BadgeExample = () => {
   const [visible, setVisible] = React.useState<boolean>(true);
-  const { isV3 } = useExampleTheme();
 
   return (
     <ScreenWrapper>
@@ -33,7 +30,7 @@ const BadgeExample = () => {
         <View style={styles.row}>
           <View style={styles.item}>
             <IconButton icon="palette-swatch" size={36} style={styles.button} />
-            <Badge visible={visible} style={styles.badge}>
+            <Badge visible={visible} style={styles.textBadge}>
               12
             </Badge>
           </View>
@@ -42,11 +39,9 @@ const BadgeExample = () => {
             <Badge
               visible={visible}
               style={[
-                styles.badge,
+                styles.textBadge,
                 {
-                  backgroundColor: isV3
-                    ? MD3Colors.primary80
-                    : MD2Colors.blue500,
+                  backgroundColor: Palette.primary80,
                 },
               ]}
             >
@@ -59,11 +54,11 @@ const BadgeExample = () => {
         <View style={styles.row}>
           <View style={styles.item}>
             <IconButton icon="book-open" size={36} style={styles.button} />
-            <Badge visible={visible} style={styles.badge} size={isV3 ? 6 : 8} />
+            <Badge visible={visible} style={styles.dotBadge} />
           </View>
           <View style={styles.item}>
             <IconButton icon="receipt" size={36} style={styles.button} />
-            <Badge visible={visible} style={styles.badge} size={isV3 ? 6 : 8} />
+            <Badge visible={visible} style={styles.dotBadge} />
           </View>
         </View>
       </List.Section>
@@ -84,10 +79,15 @@ const styles = StyleSheet.create({
   button: {
     opacity: 0.6,
   },
-  badge: {
+  textBadge: {
     position: 'absolute',
-    top: 4,
-    right: 0,
+    top: 12,
+    left: 38,
+  },
+  dotBadge: {
+    position: 'absolute',
+    top: 14,
+    right: 14,
   },
   label: {
     flex: 1,
diff --git a/example/src/Examples/BannerExample.tsx b/example/src/Examples/BannerExample.tsx
index 0e856e9699..2a99b38866 100644
--- a/example/src/Examples/BannerExample.tsx
+++ b/example/src/Examples/BannerExample.tsx
@@ -1,16 +1,8 @@
 import * as React from 'react';
-import {
-  Dimensions,
-  Image,
-  LayoutChangeEvent,
-  Platform,
-  StyleSheet,
-  View,
-} from 'react-native';
+import { Dimensions, Image, Platform, StyleSheet, View } from 'react-native';
 
-import { Banner, FAB, MD2Colors, MD3Colors } from 'react-native-paper';
+import { Banner, FAB, Palette, useTheme } from 'react-native-paper';
 
-import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const PHOTOS = Array.from({ length: 24 }).map(
@@ -20,58 +12,24 @@ const PHOTOS = Array.from({ length: 24 }).map(
 const BannerExample = () => {
   const [visible, setVisible] = React.useState<boolean>(true);
   const [useCustomTheme, setUseCustomTheme] = React.useState<boolean>(false);
-  const defaultTheme = useExampleTheme();
+  const defaultTheme = useTheme();
 
-  const [height, setHeight] = React.useState(0);
-
-  const handleLayout = ({ nativeEvent }: LayoutChangeEvent) => {
-    const { height: layoutHeight } = nativeEvent.layout;
-    setHeight(layoutHeight);
+  const customTheme = {
+    ...defaultTheme,
+    colors: {
+      ...defaultTheme.colors,
+      onSurface: Palette.tertiary100,
+      elevation: {
+        ...defaultTheme.colors.elevation,
+        level1: Palette.tertiary50,
+      },
+      primary: Palette.tertiary10,
+    },
   };
 
-  const customTheme = !defaultTheme.isV3
-    ? {
-        ...defaultTheme,
-        colors: {
-          text: MD2Colors.white,
-          surface: MD2Colors.blue200,
-          primary: MD2Colors.purple900,
-        },
-      }
-    : {
-        ...defaultTheme,
-        colors: {
-          onSurface: MD3Colors.tertiary100,
-          elevation: {
-            level1: MD3Colors.tertiary50,
-          },
-          primary: MD3Colors.tertiary10,
-        },
-      };
-
   return (
-    <>
-      <ScreenWrapper>
-        <View style={[styles.grid, { paddingTop: height }]}>
-          {PHOTOS.map((uri) => (
-            <View key={uri} style={styles.item}>
-              <Image
-                source={{ uri }}
-                style={styles.photo}
-                accessibilityIgnoresInvertColors
-              />
-            </View>
-          ))}
-        </View>
-      </ScreenWrapper>
-      <FAB
-        icon="eye"
-        label={visible ? 'Hide banner' : 'Show banner'}
-        style={styles.fab}
-        onPress={() => setVisible(!visible)}
-      />
+    <View style={styles.container}>
       <Banner
-        onLayout={handleLayout}
         actions={[
           {
             label: `Set ${useCustomTheme ? 'default' : 'custom'} theme`,
@@ -91,22 +49,40 @@ const BannerExample = () => {
           console.log('Completed closing animation')
         }
         theme={useCustomTheme ? customTheme : defaultTheme}
-        style={styles.banner}
       >
         Two line text string with two actions. One to two lines is preferable on
         mobile.
       </Banner>
-    </>
+      <ScreenWrapper>
+        <View style={styles.grid}>
+          {PHOTOS.map((uri) => (
+            <View key={uri} style={styles.item}>
+              <Image
+                source={{ uri }}
+                resizeMode="cover"
+                style={styles.photo}
+                accessibilityIgnoresInvertColors
+              />
+            </View>
+          ))}
+        </View>
+      </ScreenWrapper>
+      <FAB icon="eye" style={styles.fab} onPress={() => setVisible(!visible)} />
+    </View>
   );
 };
 
 BannerExample.title = 'Banner';
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
   ...Platform.select({
     web: {
       grid: {
         // there is no 'grid' type in RN :(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
         display: 'grid' as 'none',
         gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
         gridRowGap: '8px',
@@ -131,15 +107,8 @@ const styles = StyleSheet.create({
       },
     },
   }),
-  banner: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-  },
   photo: {
     flex: 1,
-    resizeMode: 'cover',
   },
   fab: {
     alignSelf: 'center',
diff --git a/example/src/Examples/BottomNavigationBarExample.tsx b/example/src/Examples/BottomNavigationBarExample.tsx
index 1bdeb5e4be..9fbddf7f23 100644
--- a/example/src/Examples/BottomNavigationBarExample.tsx
+++ b/example/src/Examples/BottomNavigationBarExample.tsx
@@ -1,13 +1,18 @@
 import React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, Image } from 'react-native';
 
-import Icon from '@expo/vector-icons/MaterialCommunityIcons';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { CommonActions } from '@react-navigation/native';
+import Icon from '@react-native-vector-icons/material-design-icons';
+import {
+  createBottomTabNavigator,
+  createBottomTabScreen,
+} from '@react-navigation/bottom-tabs';
+import {
+  CommonActions,
+  SFSymbol,
+  MaterialSymbol,
+} from '@react-navigation/native';
 import { Text, BottomNavigation } from 'react-native-paper';
 
-const Tab = createBottomTabNavigator();
-
 function HomeScreen() {
   return (
     <View style={styles.container}>
@@ -24,66 +29,98 @@ function SettingsScreen() {
   );
 }
 
-export default function BottomNavigationBarExample() {
-  return (
-    <Tab.Navigator
-      screenOptions={{
-        headerShown: false,
+const BottomNavigationBarExample = createBottomTabNavigator({
+  screenOptions: {
+    headerShown: false,
+  },
+  tabBar: ({ navigation, state, descriptors }) => (
+    <BottomNavigation.Bar
+      navigationState={state}
+      onTabPress={({ route, preventDefault }) => {
+        const event = navigation.emit({
+          type: 'tabPress',
+          target: route.key,
+          canPreventDefault: true,
+        });
+
+        if (event.defaultPrevented) {
+          preventDefault();
+        } else {
+          // Custom tab bars must target the tab navigator state.
+          navigation.dispatch({
+            ...CommonActions.navigate(route.name, route.params),
+            target: state.key,
+          });
+        }
       }}
-      tabBar={({ navigation, state, descriptors, insets }) => (
-        <BottomNavigation.Bar
-          navigationState={state}
-          safeAreaInsets={insets}
-          onTabPress={({ route, preventDefault }) => {
-            const event = navigation.emit({
-              type: 'tabPress',
-              target: route.key,
-              canPreventDefault: true,
-            });
+      renderIcon={({ route, focused, color }) => {
+        const tabBarIcon = descriptors[route.key].options.tabBarIcon;
+
+        const size = 24;
+        const icon =
+          typeof tabBarIcon === 'function'
+            ? tabBarIcon({ focused, color, size })
+            : tabBarIcon;
+
+        if (icon == null) {
+          return null;
+        }
+
+        if (React.isValidElement(icon)) {
+          return icon;
+        }
 
-            if (event.defaultPrevented) {
-              preventDefault();
-            } else {
-              navigation.dispatch({
-                ...CommonActions.navigate(route.name, route.params),
-                target: state.key,
-              });
-            }
-          }}
-          renderIcon={({ route, focused, color }) =>
-            descriptors[route.key].options.tabBarIcon?.({
-              focused,
-              color,
-              size: 24,
-            }) || null
+        if (typeof icon === 'object' && icon !== null && 'type' in icon) {
+          switch (icon.type) {
+            case 'sfSymbol':
+              return <SFSymbol name={icon.name} size={size} color={color} />;
+            case 'materialSymbol':
+              return (
+                <MaterialSymbol name={icon.name} size={size} color={color} />
+              );
+            case 'image':
+              return (
+                <Image
+                  accessibilityIgnoresInvertColors
+                  source={icon.source}
+                  resizeMode="contain"
+                  fadeDuration={0}
+                  style={{ width: size, height: size, tintColor: color }}
+                />
+              );
           }
-          getLabelText={({ route }) => descriptors[route.key].route.name}
-        />
-      )}
-    >
-      <Tab.Screen
-        name="Home"
-        component={HomeScreen}
-        options={{
-          tabBarIcon: ({ color, size }) => {
-            return <Icon name="home" size={size} color={color} />;
-          },
-        }}
-      />
-      <Tab.Screen
-        name="Settings"
-        component={SettingsScreen}
-        options={{
-          tabBarIcon: ({ color, size }) => {
-            return <Icon name="cog" size={size} color={color} />;
-          },
-        }}
-      />
-    </Tab.Navigator>
-  );
-}
+        }
 
-BottomNavigationBarExample.title = 'Bottom Navigation Bar';
+        throw new Error(
+          'Tab bar icon is not a valid React element, SFSymbol, MaterialSymbol, or Image.'
+        );
+      }}
+      getLabelText={({ route }) => descriptors[route.key].route.name}
+    />
+  ),
+  screens: {
+    Home: createBottomTabScreen({
+      screen: HomeScreen,
+      options: {
+        tabBarIcon: ({ color, size }) => {
+          return <Icon name="home" size={size} color={color} />;
+        },
+      },
+    }),
+    Settings: createBottomTabScreen({
+      screen: SettingsScreen,
+      options: {
+        tabBarIcon: ({ color, size }) => {
+          return <Icon name="cog" size={size} color={color} />;
+        },
+      },
+    }),
+  },
+});
+
+export default Object.assign(BottomNavigationBarExample, {
+  title: 'Bottom Navigation Bar',
+});
 
 const styles = StyleSheet.create({
   container: {
diff --git a/example/src/Examples/BottomNavigationExample.tsx b/example/src/Examples/BottomNavigationExample.tsx
index 6ed5d7add5..b66bb474d6 100644
--- a/example/src/Examples/BottomNavigationExample.tsx
+++ b/example/src/Examples/BottomNavigationExample.tsx
@@ -8,24 +8,15 @@ import {
   View,
 } from 'react-native';
 
-import type { StackNavigationProp } from '@react-navigation/stack';
-import {
-  Appbar,
-  BottomNavigation,
-  BottomNavigationRoute,
-  Menu,
-} from 'react-native-paper';
+import { useNavigation } from '@react-navigation/native';
+import { Appbar, BottomNavigation, Menu } from 'react-native-paper';
+import type { BottomNavigationRoute } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 type Route = { route: { key: string } };
 
-type Props = {
-  navigation: StackNavigationProp<{}>;
-};
-
 const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';
 
 const PhotoGallery = ({ route }: Route) => {
@@ -39,6 +30,7 @@ const PhotoGallery = ({ route }: Route) => {
         <View key={uri} style={styles.item}>
           <Image
             source={{ uri }}
+            resizeMode="cover"
             style={styles.photo}
             accessibilityIgnoresInvertColors
           />
@@ -48,8 +40,9 @@ const PhotoGallery = ({ route }: Route) => {
   );
 };
 
-const BottomNavigationExample = ({ navigation }: Props) => {
-  const { isV3 } = useExampleTheme();
+const BottomNavigationExample = () => {
+  const navigation = useNavigation('BottomNavigation');
+
   const insets = useSafeAreaInsets();
   const [index, setIndex] = React.useState(0);
   const [menuVisible, setMenuVisible] = React.useState(false);
@@ -63,34 +56,25 @@ const BottomNavigationExample = ({ navigation }: Props) => {
       key: 'album',
       title: 'Album',
       focusedIcon: 'image-album',
-      ...(!isV3 && { color: '#6200ee' }),
     },
     {
       key: 'library',
       title: 'Library',
       focusedIcon: 'inbox',
+      unfocusedIcon: 'inbox-outline',
       badge: true,
-      ...(isV3
-        ? { unfocusedIcon: 'inbox-outline' }
-        : {
-            color: '#2962ff',
-          }),
     },
     {
       key: 'favorites',
       title: 'Favorites',
       focusedIcon: 'heart',
-      ...(isV3
-        ? { unfocusedIcon: 'heart-outline' }
-        : {
-            color: '#00796b',
-          }),
+      unfocusedIcon: 'heart-outline',
     },
     {
       key: 'purchased',
       title: 'Purchased',
       focusedIcon: 'shopping',
-      ...(isV3 ? { unfocusedIcon: 'shopping-outline' } : { color: '#c51162' }),
+      unfocusedIcon: 'shopping-outline',
     },
   ]);
 
@@ -112,7 +96,6 @@ const BottomNavigationExample = ({ navigation }: Props) => {
             <Appbar.Action
               icon={MORE_ICON}
               onPress={() => setMenuVisible(true)}
-              {...(!isV3 && { color: 'white' })}
             />
           }
         >
@@ -171,6 +154,7 @@ const styles = StyleSheet.create({
     web: {
       content: {
         // there is no 'grid' type in RN :(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
         display: 'grid' as 'none',
         gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
         gridRowGap: '8px',
@@ -197,7 +181,6 @@ const styles = StyleSheet.create({
   }),
   photo: {
     flex: 1,
-    resizeMode: 'cover',
   },
   screen: {
     flex: 1,
diff --git a/example/src/Examples/ButtonExample.tsx b/example/src/Examples/ButtonExample.tsx
index 7ec58f90f4..2a164e8e77 100644
--- a/example/src/Examples/ButtonExample.tsx
+++ b/example/src/Examples/ButtonExample.tsx
@@ -1,19 +1,17 @@
-import * as React from 'react';
 import { Image, StyleSheet, View } from 'react-native';
 
-import { Button, List, Text } from 'react-native-paper';
+import { Button, List, Text, useTheme } from 'react-native-paper';
 
-import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const ButtonExample = () => {
-  const theme = useExampleTheme();
+  const theme = useTheme();
 
-  const color = theme.isV3 ? theme.colors.inversePrimary : theme.colors.accent;
+  const color = theme.colors.inversePrimary;
 
   return (
     <ScreenWrapper>
-      <List.Section title={`Text button ${theme.isV3 ? '(text)' : ''}`}>
+      <List.Section title="Text button (text)">
         <View style={styles.row}>
           <Button onPress={() => {}} style={styles.button}>
             Default
@@ -40,61 +38,59 @@ const ButtonExample = () => {
           </Button>
         </View>
       </List.Section>
-      {theme.isV3 && (
-        <List.Section title="Contained-tonal button (tonal)">
-          <View style={styles.row}>
-            <Button
-              mode="contained-tonal"
-              onPress={() => {}}
-              style={styles.button}
-            >
-              Default
-            </Button>
-            <Button
-              mode="contained-tonal"
-              buttonColor={color}
-              onPress={() => {}}
-              style={styles.button}
-            >
-              Custom
-            </Button>
-            <Button
-              mode="contained-tonal"
-              disabled
-              onPress={() => {}}
-              style={styles.button}
-            >
-              Disabled
-            </Button>
-            <Button
-              mode="contained-tonal"
-              icon="camera"
-              onPress={() => {}}
-              style={styles.button}
-            >
-              Icon
-            </Button>
-            <Button
-              mode="contained-tonal"
-              loading
-              onPress={() => {}}
-              style={styles.button}
-            >
-              Loading
-            </Button>
-            <Button
-              mode="contained-tonal"
-              icon="camera"
-              onPress={() => {}}
-              style={styles.button}
-              contentStyle={styles.flexReverse}
-            >
-              Icon right
-            </Button>
-          </View>
-        </List.Section>
-      )}
-      <List.Section title={`Outlined button ${theme.isV3 ? '(outlined)' : ''}`}>
+      <List.Section title="Contained-tonal button (tonal)">
+        <View style={styles.row}>
+          <Button
+            mode="contained-tonal"
+            onPress={() => {}}
+            style={styles.button}
+          >
+            Default
+          </Button>
+          <Button
+            mode="contained-tonal"
+            buttonColor={color}
+            onPress={() => {}}
+            style={styles.button}
+          >
+            Custom
+          </Button>
+          <Button
+            mode="contained-tonal"
+            disabled
+            onPress={() => {}}
+            style={styles.button}
+          >
+            Disabled
+          </Button>
+          <Button
+            mode="contained-tonal"
+            icon="camera"
+            onPress={() => {}}
+            style={styles.button}
+          >
+            Icon
+          </Button>
+          <Button
+            mode="contained-tonal"
+            loading
+            onPress={() => {}}
+            style={styles.button}
+          >
+            Loading
+          </Button>
+          <Button
+            mode="contained-tonal"
+            icon="camera"
+            onPress={() => {}}
+            style={styles.button}
+            contentStyle={styles.flexReverse}
+          >
+            Icon right
+          </Button>
+        </View>
+      </List.Section>
+      <List.Section title="Outlined button (outlined)">
         <View style={styles.row}>
           <Button mode="outlined" onPress={() => {}} style={styles.button}>
             Default
@@ -142,7 +138,7 @@ const ButtonExample = () => {
           </Button>
         </View>
       </List.Section>
-      <List.Section title={`Contained button ${theme.isV3 ? '(filled)' : ''}`}>
+      <List.Section title="Contained button (filled)">
         <View style={styles.row}>
           <Button mode="contained" onPress={() => {}} style={styles.button}>
             Default
@@ -190,56 +186,54 @@ const ButtonExample = () => {
           </Button>
         </View>
       </List.Section>
-      {theme.isV3 && (
-        <List.Section title={'Elevated button (elevated)'}>
-          <View style={styles.row}>
-            <Button mode="elevated" onPress={() => {}} style={styles.button}>
-              Default
-            </Button>
-            <Button
-              mode="elevated"
-              buttonColor={color}
-              onPress={() => {}}
-              style={styles.button}
-            >
-              Custom
-            </Button>
-            <Button
-              mode="elevated"
-              disabled
-              onPress={() => {}}
-              style={styles.button}
-            >
-              Disabled
-            </Button>
-            <Button
-              mode="elevated"
-              icon="camera"
-              onPress={() => {}}
-              style={styles.button}
-            >
-              Icon
-            </Button>
-            <Button
-              mode="elevated"
-              loading
-              onPress={() => {}}
-              style={styles.button}
-            >
-              Loading
-            </Button>
-            <Button
-              mode="elevated"
-              icon="camera"
-              onPress={() => {}}
-              style={styles.button}
-              contentStyle={styles.flexReverse}
-            >
-              Icon right
-            </Button>
-          </View>
-        </List.Section>
-      )}
+      <List.Section title="Elevated button (elevated)">
+        <View style={styles.row}>
+          <Button mode="elevated" onPress={() => {}} style={styles.button}>
+            Default
+          </Button>
+          <Button
+            mode="elevated"
+            buttonColor={color}
+            onPress={() => {}}
+            style={styles.button}
+          >
+            Custom
+          </Button>
+          <Button
+            mode="elevated"
+            disabled
+            onPress={() => {}}
+            style={styles.button}
+          >
+            Disabled
+          </Button>
+          <Button
+            mode="elevated"
+            icon="camera"
+            onPress={() => {}}
+            style={styles.button}
+          >
+            Icon
+          </Button>
+          <Button
+            mode="elevated"
+            loading
+            onPress={() => {}}
+            style={styles.button}
+          >
+            Loading
+          </Button>
+          <Button
+            mode="elevated"
+            icon="camera"
+            onPress={() => {}}
+            style={styles.button}
+            contentStyle={styles.flexReverse}
+          >
+            Icon right
+          </Button>
+        </View>
+      </List.Section>
       <List.Section title="Custom">
         <View style={styles.row}>
           <Button
@@ -279,7 +273,7 @@ const ButtonExample = () => {
             mode="outlined"
             onPress={() => {}}
             style={styles.button}
-            labelStyle={[styles.fontStyles, theme.isV3 && styles.md3FontStyles]}
+            labelStyle={[styles.fontStyles, styles.md3FontStyles]}
           >
             Custom Font
           </Button>
@@ -289,18 +283,22 @@ const ButtonExample = () => {
           <Button
             mode="outlined"
             onPress={() => {}}
-            style={styles.customRadius}
+            theme={{ shapes: { corner: { largeIncreased: 16 } } }}
           >
             Custom radius
           </Button>
-          <Button mode="contained" onPress={() => {}} style={styles.noRadius}>
+          <Button
+            mode="contained"
+            onPress={() => {}}
+            theme={{ shapes: { corner: { largeIncreased: 0 } } }}
+          >
             Without radius
           </Button>
           <Button
             mode="contained-tonal"
             onPress={() => {}}
-            style={{ borderRadius: styles.customRadiusAndPadding.borderRadius }}
-            contentStyle={styles.customRadiusAndPadding}
+            theme={{ shapes: { corner: { largeIncreased: 4 } } }}
+            contentStyle={styles.customPadding}
           >
             Custom radius and padding
           </Button>
@@ -386,17 +384,7 @@ const styles = StyleSheet.create({
     width: '100%',
     marginTop: 10,
   },
-  customRadius: {
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 0,
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 16,
-  },
-  noRadius: {
-    borderRadius: 0,
-  },
-  customRadiusAndPadding: {
-    borderRadius: 4,
+  customPadding: {
     paddingHorizontal: 12,
     paddingVertical: 6,
   },
diff --git a/example/src/Examples/CardExample.tsx b/example/src/Examples/CardExample.tsx
index 5b12fc08bb..9c4e04f8e2 100644
--- a/example/src/Examples/CardExample.tsx
+++ b/example/src/Examples/CardExample.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Alert, ScrollView, StyleSheet, View } from 'react-native';
+import { Alert, Platform, ScrollView, StyleSheet, View } from 'react-native';
 
 import {
   Avatar,
@@ -7,33 +7,27 @@ import {
   Card,
   Chip,
   IconButton,
-  Paragraph,
   Text,
+  useTheme,
 } from 'react-native-paper';
 
-import { isWeb } from '../../utils';
-import { useExampleTheme } from '../hooks/useExampleTheme';
 import { PreferencesContext } from '../PreferencesContext';
 import ScreenWrapper from '../ScreenWrapper';
 
 type Mode = 'elevated' | 'outlined' | 'contained';
 
 const CardExample = () => {
-  const { colors, isV3 } = useExampleTheme();
-  const [selectedMode, setSelectedMode] = React.useState('elevated' as Mode);
+  const { colors } = useTheme();
+  const [selectedMode, setSelectedMode] = React.useState<Mode>('elevated');
   const [isSelected, setIsSelected] = React.useState(false);
   const preferences = React.useContext(PreferencesContext);
 
-  const modes = isV3
-    ? ['elevated', 'outlined', 'contained']
-    : ['elevated', 'outlined'];
-
-  const TextComponent = isV3 ? Text : Paragraph;
+  const modes: Mode[] = ['elevated', 'outlined', 'contained'];
 
   return (
     <ScreenWrapper contentContainerStyle={styles.content}>
       <View style={styles.preference}>
-        {(modes as Mode[]).map((mode) => (
+        {modes.map((mode) => (
           <Chip
             key={mode}
             selected={selectedMode === mode}
@@ -55,35 +49,37 @@ const CardExample = () => {
           />
           <Card.Title title="Abandoned Ship" />
           <Card.Content>
-            <TextComponent variant="bodyMedium">
+            <Text variant="bodyMedium">
               The Abandoned Ship is a wrecked ship located on Route 108 in
               Hoenn, originally being a ship named the S.S. Cactus. The second
               part of the ship can only be accessed by using Dive and contains
               the Scanner.
-            </TextComponent>
+            </Text>
+          </Card.Content>
+        </Card>
+        <Card style={styles.card} mode={selectedMode}>
+          <Card.Cover source={require('../../assets/images/bridge.jpg')} />
+          <Card.Title
+            title="Title variant"
+            subtitle="Subtitle variant"
+            titleVariant="headlineMedium"
+            subtitleVariant="bodyLarge"
+          />
+          <Card.Content>
+            <Text variant="bodyMedium">
+              This is a card using title and subtitle with specified variants.
+            </Text>
           </Card.Content>
         </Card>
-        {isV3 && (
-          <Card style={styles.card} mode={selectedMode}>
-            <Card.Cover source={require('../../assets/images/bridge.jpg')} />
-            <Card.Title
-              title="Title variant"
-              subtitle="Subtitle variant"
-              titleVariant="headlineMedium"
-              subtitleVariant="bodyLarge"
-            />
-            <Card.Content>
-              <TextComponent variant="bodyMedium">
-                This is a card using title and subtitle with specified variants.
-              </TextComponent>
-            </Card.Content>
-          </Card>
-        )}
         <Card style={styles.card} mode={selectedMode}>
           <Card.Cover source={require('../../assets/images/forest.jpg')} />
           <Card.Actions>
-            <Button onPress={() => {}}>Share</Button>
-            <Button onPress={() => {}}>Explore</Button>
+            <Button mode="outlined" onPress={() => {}}>
+              Share
+            </Button>
+            <Button mode="contained" onPress={() => {}}>
+              Explore
+            </Button>
           </Card.Actions>
         </Card>
         <Card style={styles.card} mode={selectedMode}>
@@ -96,13 +92,13 @@ const CardExample = () => {
             )}
           />
           <Card.Content>
-            <TextComponent variant="bodyMedium">
+            <Text variant="bodyMedium">
               Dotted around the Hoenn region, you will find loamy soil, many of
               which are housing berries. Once you have picked the berries, then
               you have the ability to use that loamy soil to grow your own
               berries. These can be any berry and will require attention to get
               the best crop.
-            </TextComponent>
+            </Text>
           </Card.Content>
         </Card>
         <Card style={styles.card} mode={selectedMode}>
@@ -111,17 +107,26 @@ const CardExample = () => {
           />
           <Card.Title title="Custom Button styles" />
           <Card.Actions>
-            <Button style={styles.button} onPress={() => {}}>
+            <Button
+              mode="outlined"
+              theme={{ shapes: { corner: { largeIncreased: 12 } } }}
+              onPress={() => {}}
+            >
               Share
             </Button>
-            <Button style={styles.button} onPress={() => {}}>
+            <Button
+              mode="contained"
+              theme={{ shapes: { corner: { largeIncreased: 12 } } }}
+              onPress={() => {}}
+            >
               Explore
             </Button>
           </Card.Actions>
         </Card>
         <Card
-          style={[styles.card, styles.customCardRadius]}
+          style={styles.card}
           mode={selectedMode}
+          theme={{ shapes: { corner: { medium: 24 } } }}
         >
           <Card.Title
             title="Custom border radius"
@@ -129,7 +134,7 @@ const CardExample = () => {
           />
           <Card.Cover
             source={require('../../assets/images/artist-2.jpg')}
-            style={styles.customCoverRadius}
+            style={[styles.customCoverRadius, styles.bottomCover]}
           />
         </Card>
         <Card style={styles.card} mode={selectedMode}>
@@ -151,7 +156,7 @@ const CardExample = () => {
         <Card
           style={styles.card}
           onPress={() => {
-            isWeb
+            Platform.OS === 'web'
               ? alert('The Chameleon is Pressed')
               : Alert.alert('The Chameleon is Pressed');
           }}
@@ -160,15 +165,15 @@ const CardExample = () => {
           <Card.Cover source={require('../../assets/images/chameleon.jpg')} />
           <Card.Title title="Pressable Chameleon" />
           <Card.Content>
-            <TextComponent variant="bodyMedium">
+            <Text variant="bodyMedium">
               This is a pressable chameleon. If you press me, I will alert.
-            </TextComponent>
+            </Text>
           </Card.Content>
         </Card>
         <Card
           style={styles.card}
           onLongPress={() => {
-            isWeb
+            Platform.OS === 'web'
               ? alert('The City is Long Pressed')
               : Alert.alert('The City is Long Pressed');
           }}
@@ -180,10 +185,10 @@ const CardExample = () => {
             left={(props) => <Avatar.Icon {...props} icon="city" />}
           />
           <Card.Content>
-            <TextComponent variant="bodyMedium">
+            <Text variant="bodyMedium">
               This is a long press only city. If you long press me, I will
               alert.
-            </TextComponent>
+            </Text>
           </Card.Content>
         </Card>
         <Card
@@ -198,9 +203,9 @@ const CardExample = () => {
             left={(props) => <Avatar.Icon {...props} icon="format-paint" />}
           />
           <Card.Content>
-            <TextComponent variant="bodyMedium">
+            <Text variant="bodyMedium">
               This is pressable card. If you press me, I will switch the theme.
-            </TextComponent>
+            </Text>
           </Card.Content>
         </Card>
       </ScrollView>
@@ -229,18 +234,15 @@ const styles = StyleSheet.create({
     paddingVertical: 12,
     paddingHorizontal: 8,
   },
-  button: {
-    borderRadius: 12,
-  },
-  customCardRadius: {
-    borderTopLeftRadius: 24,
-    borderBottomRightRadius: 24,
-  },
   customCoverRadius: {
     borderTopLeftRadius: 0,
     borderTopRightRadius: 0,
     borderBottomRightRadius: 24,
   },
+  bottomCover: {
+    marginTop: 0,
+    marginBottom: -16,
+  },
 });
 
 export default CardExample;
diff --git a/example/src/Examples/CheckboxExample.tsx b/example/src/Examples/CheckboxExample.tsx
index c8ce8c23a7..6722350704 100644
--- a/example/src/Examples/CheckboxExample.tsx
+++ b/example/src/Examples/CheckboxExample.tsx
@@ -1,70 +1,185 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import {
-  Checkbox,
-  MD2Colors,
-  MD3Colors,
-  Paragraph,
-  Text,
-  TouchableRipple,
-} from 'react-native-paper';
+import { Checkbox, Text, useTheme } from 'react-native-paper';
 
-import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
-const CheckboxExample = () => {
-  const [checkedNormal, setCheckedNormal] = React.useState<boolean>(true);
-  const [checkedCustom, setCheckedCustom] = React.useState<boolean>(true);
-  const [indeterminate, setIndeterminate] = React.useState<boolean>(true);
+type Status = 'unchecked' | 'checked' | 'indeterminate';
+
+const STATUSES: Status[] = ['unchecked', 'checked', 'indeterminate'];
 
-  const { isV3 } = useExampleTheme();
-  const TextComponent = isV3 ? Text : Paragraph;
+type Row = {
+  label: string;
+  render: (status: Status) => React.ReactNode;
+};
 
+const ROWS: Row[] = [
+  {
+    label: 'Default',
+    render: (status) => <Checkbox status={status} onPress={() => {}} />,
+  },
+  {
+    label: 'Disabled',
+    render: (status) => <Checkbox status={status} disabled />,
+  },
+  {
+    label: 'Custom color (tertiary)',
+    render: (status) => <CustomColorCheckbox status={status} />,
+  },
+  {
+    label: 'Error',
+    render: (status) => <Checkbox status={status} error onPress={() => {}} />,
+  },
+];
+
+const CustomColorCheckbox = ({ status }: { status: Status }) => {
+  const theme = useTheme();
   return (
-    <ScreenWrapper style={styles.container}>
-      <TouchableRipple onPress={() => setCheckedNormal(!checkedNormal)}>
-        <View style={styles.row}>
-          <TextComponent>Normal</TextComponent>
-          <View pointerEvents="none">
-            <Checkbox status={checkedNormal ? 'checked' : 'unchecked'} />
-          </View>
-        </View>
-      </TouchableRipple>
+    <Checkbox
+      status={status}
+      color={theme.colors.tertiary}
+      uncheckedColor={theme.colors.tertiary}
+      onPress={() => {}}
+    />
+  );
+};
 
-      <TouchableRipple onPress={() => setCheckedCustom(!checkedCustom)}>
-        <View style={styles.row}>
-          <TextComponent>Custom</TextComponent>
-          <View pointerEvents="none">
-            <Checkbox
-              color={isV3 ? MD3Colors.error70 : MD2Colors.blue500}
-              status={checkedCustom ? 'checked' : 'unchecked'}
-            />
-          </View>
+const Interactive = () => {
+  const theme = useTheme();
+  const [aChecked, setAChecked] = React.useState(false);
+  const [bIndeterminate, setBIndeterminate] = React.useState(false);
+  return (
+    <View style={styles.interactive}>
+      <Text style={[styles.rowLabel, { color: theme.colors.onSurfaceVariant }]}>
+        Tap to toggle
+      </Text>
+      <View style={styles.interactiveRow}>
+        <View style={styles.cell}>
+          <Checkbox
+            status={aChecked ? 'checked' : 'unchecked'}
+            onPress={() => setAChecked((v) => !v)}
+          />
         </View>
-      </TouchableRipple>
-
-      <TouchableRipple onPress={() => setIndeterminate(!indeterminate)}>
-        <View style={styles.row}>
-          <TextComponent>Indeterminate</TextComponent>
-          <View pointerEvents="none">
-            <Checkbox status={indeterminate ? 'indeterminate' : 'unchecked'} />
-          </View>
+        <Text
+          style={[
+            styles.interactiveLabel,
+            { color: theme.colors.onSurfaceVariant },
+          ]}
+        >
+          unchecked ↔ checked
+        </Text>
+      </View>
+      <View style={[styles.interactiveRow, styles.interactiveRowSpacing]}>
+        <View style={styles.cell}>
+          <Checkbox
+            status={bIndeterminate ? 'indeterminate' : 'unchecked'}
+            onPress={() => setBIndeterminate((v) => !v)}
+          />
         </View>
-      </TouchableRipple>
+        <Text
+          style={[
+            styles.interactiveLabel,
+            { color: theme.colors.onSurfaceVariant },
+          ]}
+        >
+          unchecked ↔ indeterminate
+        </Text>
+      </View>
+    </View>
+  );
+};
 
-      <View style={styles.row}>
-        <TextComponent>Checked (Disabled)</TextComponent>
-        <Checkbox status="checked" disabled />
+const IndeterminateParent = () => {
+  const theme = useTheme();
+  const [child1, setChild1] = React.useState(true);
+  const [child2, setChild2] = React.useState(false);
+  const [child3, setChild3] = React.useState(true);
+  const allChecked = child1 && child2 && child3;
+  const noneChecked = !child1 && !child2 && !child3;
+  const parentStatus: Status = allChecked
+    ? 'checked'
+    : noneChecked
+      ? 'unchecked'
+      : 'indeterminate';
+  const toggleAll = () => {
+    const next = !allChecked;
+    setChild1(next);
+    setChild2(next);
+    setChild3(next);
+  };
+  return (
+    <View style={styles.row}>
+      <Text style={[styles.rowLabel, { color: theme.colors.onSurfaceVariant }]}>
+        Parent / children (indeterminate)
+      </Text>
+      <View style={styles.parentRow}>
+        <Checkbox status={parentStatus} onPress={toggleAll} />
+        <Text
+          style={[styles.interactiveLabel, { color: theme.colors.onSurface }]}
+        >
+          Select all
+        </Text>
       </View>
-      <View style={styles.row}>
-        <TextComponent>Unchecked (Disabled)</TextComponent>
-        <Checkbox status="unchecked" disabled />
+      <View style={styles.childRow}>
+        <Checkbox
+          status={child1 ? 'checked' : 'unchecked'}
+          onPress={() => setChild1((v) => !v)}
+        />
+        <Text
+          style={[styles.interactiveLabel, { color: theme.colors.onSurface }]}
+        >
+          Apples
+        </Text>
       </View>
-      <View style={styles.row}>
-        <TextComponent>Indeterminate (Disabled)</TextComponent>
-        <Checkbox status="indeterminate" disabled />
+      <View style={styles.childRow}>
+        <Checkbox
+          status={child2 ? 'checked' : 'unchecked'}
+          onPress={() => setChild2((v) => !v)}
+        />
+        <Text
+          style={[styles.interactiveLabel, { color: theme.colors.onSurface }]}
+        >
+          Bananas
+        </Text>
       </View>
+      <View style={styles.childRow}>
+        <Checkbox
+          status={child3 ? 'checked' : 'unchecked'}
+          onPress={() => setChild3((v) => !v)}
+        />
+        <Text
+          style={[styles.interactiveLabel, { color: theme.colors.onSurface }]}
+        >
+          Cherries
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const CheckboxExample = () => {
+  const theme = useTheme();
+  return (
+    <ScreenWrapper contentContainerStyle={styles.scrollContent}>
+      <Interactive />
+      {ROWS.map((row) => (
+        <View key={row.label} style={styles.row}>
+          <Text
+            style={[styles.rowLabel, { color: theme.colors.onSurfaceVariant }]}
+          >
+            {row.label}
+          </Text>
+          <View style={styles.cells}>
+            {STATUSES.map((status) => (
+              <View key={status} style={styles.cell}>
+                {row.render(status)}
+              </View>
+            ))}
+          </View>
+        </View>
+      ))}
+      <IndeterminateParent />
     </ScreenWrapper>
   );
 };
@@ -72,15 +187,43 @@ const CheckboxExample = () => {
 CheckboxExample.title = 'Checkbox';
 
 const styles = StyleSheet.create({
-  container: {
-    paddingVertical: 8,
+  scrollContent: { paddingHorizontal: 16, paddingTop: 16, paddingBottom: 32 },
+  row: { marginBottom: 20 },
+  rowLabel: {
+    fontSize: 14,
+    fontWeight: '500',
+    marginBottom: 6,
+    opacity: 0.7,
+  },
+  cells: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  cell: {
+    width: 60,
+    alignItems: 'center',
+  },
+  interactive: { marginBottom: 24 },
+  interactiveRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  interactiveRowSpacing: { marginTop: 8 },
+  interactiveLabel: {
+    fontSize: 14,
+    opacity: 0.7,
+  },
+  parentRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
   },
-  row: {
+  childRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 8,
-    paddingHorizontal: 16,
+    gap: 12,
+    paddingLeft: 32,
   },
 });
 
diff --git a/example/src/Examples/CheckboxItemExample.tsx b/example/src/Examples/CheckboxItemExample.tsx
index 514272788c..7e7c0751b8 100644
--- a/example/src/Examples/CheckboxItemExample.tsx
+++ b/example/src/Examples/CheckboxItemExample.tsx
@@ -3,44 +3,26 @@ import { StyleSheet } from 'react-native';
 
 import { Checkbox } from 'react-native-paper';
 
-import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const CheckboxExample = () => {
   const [checkedDefault, setCheckedDefault] = React.useState<boolean>(true);
-  const [checkedAndroid, setCheckedAndroid] = React.useState<boolean>(true);
-  const [checkedIOS, setCheckedIOS] = React.useState<boolean>(true);
   const [checkedLeadingControl, setCheckedLeadingControl] =
     React.useState<boolean>(true);
   const [checkedDisabled, setCheckedDisabled] = React.useState<boolean>(true);
   const [checkedLabelVariant, setCheckedLabelVariant] = React.useState(true);
 
-  const { isV3 } = useExampleTheme();
-
   return (
     <ScreenWrapper style={styles.container}>
       <Checkbox.Item
-        label="Default (will look like whatever system this is running on)"
+        label="Default"
         status={checkedDefault ? 'checked' : 'unchecked'}
         onPress={() => setCheckedDefault(!checkedDefault)}
       />
-      <Checkbox.Item
-        label="Material Design"
-        mode="android"
-        status={checkedAndroid ? 'checked' : 'unchecked'}
-        onPress={() => setCheckedAndroid(!checkedAndroid)}
-      />
-      <Checkbox.Item
-        label="iOS"
-        mode="ios"
-        status={checkedIOS ? 'checked' : 'unchecked'}
-        onPress={() => setCheckedIOS(!checkedIOS)}
-      />
       <Checkbox.Item
         label="Default with leading control"
         status={checkedLeadingControl ? 'checked' : 'unchecked'}
         onPress={() => setCheckedLeadingControl(!checkedLeadingControl)}
-        mode="ios"
         position="leading"
       />
       <Checkbox.Item
@@ -49,14 +31,12 @@ const CheckboxExample = () => {
         onPress={() => setCheckedDisabled(!checkedDisabled)}
         disabled
       />
-      {isV3 && (
-        <Checkbox.Item
-          label="Default with titleLarge title variant"
-          labelVariant="titleLarge"
-          status={checkedLabelVariant ? 'checked' : 'unchecked'}
-          onPress={() => setCheckedLabelVariant(!checkedLabelVariant)}
-        />
-      )}
+      <Checkbox.Item
+        label="Default with titleLarge title variant"
+        labelVariant="titleLarge"
+        status={checkedLabelVariant ? 'checked' : 'unchecked'}
+        onPress={() => setCheckedLabelVariant(!checkedLabelVariant)}
+      />
     </ScreenWrapper>
   );
 };
diff --git a/example/src/Examples/ChipExample.tsx b/example/src/Examples/ChipExample.tsx
index 20f0393153..c6c817041f 100644
--- a/example/src/Examples/ChipExample.tsx
+++ b/example/src/Examples/ChipExample.tsx
@@ -2,16 +2,8 @@ import * as React from 'react';
 import { Image, StyleSheet, View } from 'react-native';
 
 import color from 'color';
-import {
-  Chip,
-  List,
-  MD2Colors,
-  MD3Colors,
-  Snackbar,
-  Text,
-} from 'react-native-paper';
+import { Chip, List, Palette, Snackbar, Text } from 'react-native-paper';
 
-import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const ChipExample = () => {
@@ -19,8 +11,7 @@ const ChipExample = () => {
     visible: false,
     text: '',
   });
-  const { isV3 } = useExampleTheme();
-  const customColor = isV3 ? MD3Colors.error50 : MD2Colors.purple900;
+  const customColor = Palette.error50;
 
   return (
     <>
@@ -30,24 +21,20 @@ const ChipExample = () => {
             <Chip selected onPress={() => {}} style={styles.chip}>
               Simple
             </Chip>
-            {isV3 && (
-              <>
-                <Chip
-                  selected
-                  showSelectedOverlay
-                  onPress={() => {}}
-                  style={styles.chip}
-                >
-                  With selected overlay
-                </Chip>
-                <Chip elevated onPress={() => {}} style={styles.chip}>
-                  Elevated
-                </Chip>
-                <Chip compact style={styles.chip} onPress={() => {}}>
-                  Compact chip
-                </Chip>
-              </>
-            )}
+            <Chip
+              selected
+              showSelectedOverlay
+              onPress={() => {}}
+              style={styles.chip}
+            >
+              With selected overlay
+            </Chip>
+            <Chip elevated onPress={() => {}} style={styles.chip}>
+              Elevated
+            </Chip>
+            <Chip compact style={styles.chip} onPress={() => {}}>
+              Compact chip
+            </Chip>
             <Chip
               onPress={() => {}}
               onClose={() =>
@@ -137,35 +124,31 @@ const ChipExample = () => {
             <Chip mode="outlined" onPress={() => {}} style={styles.chip}>
               Simple
             </Chip>
-            {isV3 && (
-              <>
-                <Chip
-                  mode="outlined"
-                  selected
-                  showSelectedOverlay
-                  onPress={() => {}}
-                  style={styles.chip}
-                >
-                  With selected overlay
-                </Chip>
-                <Chip
-                  mode="outlined"
-                  elevated
-                  onPress={() => {}}
-                  style={styles.chip}
-                >
-                  Elevated
-                </Chip>
-                <Chip
-                  mode="outlined"
-                  compact
-                  onPress={() => {}}
-                  style={styles.chip}
-                >
-                  Compact chip
-                </Chip>
-              </>
-            )}
+            <Chip
+              mode="outlined"
+              selected
+              showSelectedOverlay
+              onPress={() => {}}
+              style={styles.chip}
+            >
+              With selected overlay
+            </Chip>
+            <Chip
+              mode="outlined"
+              elevated
+              onPress={() => {}}
+              style={styles.chip}
+            >
+              Elevated
+            </Chip>
+            <Chip
+              mode="outlined"
+              compact
+              onPress={() => {}}
+              style={styles.chip}
+            >
+              Compact chip
+            </Chip>
             <Chip
               mode="outlined"
               onPress={() => {}}
@@ -251,38 +234,36 @@ const ChipExample = () => {
         </List.Section>
         <List.Section title="Custom chip">
           <View style={styles.row}>
-            {isV3 && (
-              <>
-                <Chip
-                  mode="outlined"
-                  onPress={() => {}}
-                  compact
-                  avatar={
-                    <Image
-                      source={require('../../assets/images/avatar.png')}
-                      accessibilityIgnoresInvertColors
-                    />
-                  }
-                  style={[styles.chip, styles.customBorderRadius]}
-                >
-                  Compact with custom border radius
-                </Chip>
-                <Chip
-                  mode="flat"
-                  onPress={() => {}}
-                  compact
-                  avatar={
-                    <Image
-                      source={require('../../assets/images/avatar.png')}
-                      accessibilityIgnoresInvertColors
-                    />
-                  }
-                  style={[styles.chip, styles.customBorderRadius]}
-                >
-                  Compact with custom border radius
-                </Chip>
-              </>
-            )}
+            <Chip
+              mode="outlined"
+              onPress={() => {}}
+              compact
+              avatar={
+                <Image
+                  source={require('../../assets/images/avatar.png')}
+                  accessibilityIgnoresInvertColors
+                />
+              }
+              style={styles.chip}
+              theme={{ shapes: { corner: { small: 16 } } }}
+            >
+              Compact with custom border radius
+            </Chip>
+            <Chip
+              mode="flat"
+              onPress={() => {}}
+              compact
+              avatar={
+                <Image
+                  source={require('../../assets/images/avatar.png')}
+                  accessibilityIgnoresInvertColors
+                />
+              }
+              style={styles.chip}
+              theme={{ shapes: { corner: { small: 16 } } }}
+            >
+              Compact with custom border radius
+            </Chip>
             <Chip
               mode="outlined"
               onPress={() => {}}
@@ -296,12 +277,15 @@ const ChipExample = () => {
             <Chip
               selected
               onPress={() => {}}
-              style={[
-                styles.chip,
-                {
-                  backgroundColor: color(customColor).alpha(0.2).rgb().string(),
+              style={styles.chip}
+              theme={{
+                colors: {
+                  secondaryContainer: color(customColor)
+                    .alpha(0.2)
+                    .rgb()
+                    .string(),
                 },
-              ]}
+              }}
               selectedColor={customColor}
             >
               Flat selected chip with custom color
@@ -317,12 +301,12 @@ const ChipExample = () => {
               selected
               mode="outlined"
               onPress={() => {}}
-              style={[
-                styles.chip,
-                {
-                  backgroundColor: color(customColor).alpha(0.2).rgb().string(),
+              style={styles.chip}
+              theme={{
+                colors: {
+                  surface: color(customColor).alpha(0.2).rgb().string(),
                 },
-              ]}
+              }}
               selectedColor={customColor}
             >
               Outlined selected chip with custom color
@@ -424,9 +408,6 @@ const styles = StyleSheet.create({
     marginVertical: 4,
     marginHorizontal: 12,
   },
-  customBorderRadius: {
-    borderRadius: 16,
-  },
 });
 
 export default ChipExample;
diff --git a/example/src/Examples/DialogExample.tsx b/example/src/Examples/DialogExample.tsx
index 4a9de665d7..b12cbb5c84 100644
--- a/example/src/Examples/DialogExample.tsx
+++ b/example/src/Examples/DialogExample.tsx
@@ -10,9 +10,9 @@ import {
   DialogWithLoadingIndicator,
   DialogWithLongText,
   DialogWithRadioBtns,
+  DialogWithUndismissableBackButton,
   UndismissableDialog,
 } from './Dialogs';
-import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 type ButtonVisibility = {
@@ -21,7 +21,6 @@ type ButtonVisibility = {
 
 const DialogExample = () => {
   const [visible, setVisible] = React.useState<ButtonVisibility>({});
-  const { isV3 } = useExampleTheme();
 
   const _toggleDialog = (name: string) => () =>
     setVisible({ ...visible, [name]: !visible[name] });
@@ -65,22 +64,29 @@ const DialogExample = () => {
       >
         Custom colors
       </Button>
-      {isV3 && (
+      <Button
+        mode="outlined"
+        onPress={_toggleDialog('dialog6')}
+        style={styles.button}
+      >
+        With icon
+      </Button>
+      {Platform.OS === 'android' && (
         <Button
           mode="outlined"
-          onPress={_toggleDialog('dialog6')}
+          onPress={_toggleDialog('dialog7')}
           style={styles.button}
         >
-          With icon
+          Dismissable back button
         </Button>
       )}
       {Platform.OS === 'android' && (
         <Button
           mode="outlined"
-          onPress={_toggleDialog('dialog7')}
+          onPress={_toggleDialog('dialog8')}
           style={styles.button}
         >
-          Dismissable back button
+          Undismissable back button
         </Button>
       )}
       <DialogWithLongText
@@ -103,16 +109,18 @@ const DialogExample = () => {
         visible={_getVisible('dialog5')}
         close={_toggleDialog('dialog5')}
       />
-      {isV3 && (
-        <DialogWithIcon
-          visible={_getVisible('dialog6')}
-          close={_toggleDialog('dialog6')}
-        />
-      )}
+      <DialogWithIcon
+        visible={_getVisible('dialog6')}
+        close={_toggleDialog('dialog6')}
+      />
       <DialogWithDismissableBackButton
         visible={_getVisible('dialog7')}
         close={_toggleDialog('dialog7')}
       />
+      <DialogWithUndismissableBackButton
+        visible={_getVisible('dialog8')}
+        close={_toggleDialog('dialog8')}
+      />
     </ScreenWrapper>
   );
 };
diff --git a/example/src/Examples/Dialogs/DialogTextComponent.tsx b/example/src/Examples/Dialogs/DialogTextComponent.tsx
index 2ab58604b2..9ad958f12e 100644
--- a/example/src/Examples/Dialogs/DialogTextComponent.tsx
+++ b/example/src/Examples/Dialogs/DialogTextComponent.tsx
@@ -1,31 +1,18 @@
 import * as React from 'react';
 
-import {
-  Paragraph,
-  Subheading,
-  Text as NativeText,
-  Text,
-} from 'react-native-paper';
-
-import { useExampleTheme } from '../../hooks/useExampleTheme';
-
+import { Text, Text as NativeText, useTheme } from 'react-native-paper';
 type Props = React.ComponentProps<typeof NativeText> & {
   isSubheading?: boolean;
 };
 
 export const TextComponent = ({ isSubheading = false, ...props }: Props) => {
-  const theme = useExampleTheme();
+  const theme = useTheme();
 
-  if (theme.isV3) {
-    return (
-      <Text
-        variant={isSubheading ? 'bodyLarge' : 'bodyMedium'}
-        style={{ color: theme.colors.onSurfaceVariant }}
-        {...props}
-      />
-    );
-  } else if (isSubheading) {
-    return <Subheading {...props} />;
-  }
-  return <Paragraph {...props} />;
+  return (
+    <Text
+      variant={isSubheading ? 'bodyLarge' : 'bodyMedium'}
+      style={{ color: theme.colors.onSurfaceVariant }}
+      {...props}
+    />
+  );
 };
diff --git a/example/src/Examples/Dialogs/DialogWithCustomColors.tsx b/example/src/Examples/Dialogs/DialogWithCustomColors.tsx
index 251b7b6fdb..df24a5f3f6 100644
--- a/example/src/Examples/Dialogs/DialogWithCustomColors.tsx
+++ b/example/src/Examples/Dialogs/DialogWithCustomColors.tsx
@@ -1,15 +1,6 @@
-import * as React from 'react';
-
-import {
-  Button,
-  Portal,
-  Dialog,
-  MD2Colors,
-  MD3Colors,
-} from 'react-native-paper';
+import { Button, Dialog, Palette } from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';
-import { useExampleTheme } from '../../hooks/useExampleTheme';
 
 const DialogWithCustomColors = ({
   visible,
@@ -18,39 +9,28 @@ const DialogWithCustomColors = ({
   visible: boolean;
   close: () => void;
 }) => {
-  const { isV3 } = useExampleTheme();
-
   return (
-    <Portal>
-      <Dialog
-        onDismiss={close}
-        style={{
-          backgroundColor: isV3 ? MD3Colors.primary10 : MD2Colors.purple900,
-        }}
-        visible={visible}
-      >
-        <Dialog.Title
-          style={{ color: isV3 ? MD3Colors.primary95 : MD2Colors.white }}
-        >
-          Alert
-        </Dialog.Title>
-        <Dialog.Content>
-          <TextComponent
-            style={{ color: isV3 ? MD3Colors.primary95 : MD2Colors.white }}
-          >
-            This is a dialog with custom colors
-          </TextComponent>
-        </Dialog.Content>
-        <Dialog.Actions>
-          <Button
-            color={isV3 ? MD3Colors.primary95 : MD2Colors.white}
-            onPress={close}
-          >
-            Ok
-          </Button>
-        </Dialog.Actions>
-      </Dialog>
-    </Portal>
+    <Dialog
+      onDismiss={close}
+      theme={{
+        colors: {
+          surfaceContainerHigh: Palette.primary10,
+        },
+      }}
+      visible={visible}
+    >
+      <Dialog.Title style={{ color: Palette.primary95 }}>Alert</Dialog.Title>
+      <Dialog.Content>
+        <TextComponent style={{ color: Palette.primary95 }}>
+          This is a dialog with custom colors
+        </TextComponent>
+      </Dialog.Content>
+      <Dialog.Actions>
+        <Button textColor={Palette.primary95} onPress={close}>
+          Ok
+        </Button>
+      </Dialog.Actions>
+    </Dialog>
   );
 };
 
diff --git a/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx b/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx
index 32512dc91d..d7a37e5569 100644
--- a/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx
+++ b/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx
@@ -1,6 +1,4 @@
-import * as React from 'react';
-
-import { Button, Portal, Dialog, MD2Colors } from 'react-native-paper';
+import { Button, Dialog, Palette } from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';
 
@@ -11,28 +9,26 @@ const DialogWithDismissableBackButton = ({
   visible: boolean;
   close: () => void;
 }) => (
-  <Portal>
-    <Dialog
-      onDismiss={close}
-      visible={visible}
-      dismissable={false}
-      dismissableBackButton
-    >
-      <Dialog.Title>Alert</Dialog.Title>
-      <Dialog.Content>
-        <TextComponent>
-          This is an undismissable dialog, however you can use hardware back
-          button to close it!
-        </TextComponent>
-      </Dialog.Content>
-      <Dialog.Actions>
-        <Button color={MD2Colors.teal500} disabled>
-          Disagree
-        </Button>
-        <Button onPress={close}>Agree</Button>
-      </Dialog.Actions>
-    </Dialog>
-  </Portal>
+  <Dialog
+    onDismiss={close}
+    visible={visible}
+    dismissable={false}
+    dismissableBackButton
+  >
+    <Dialog.Title>Alert</Dialog.Title>
+    <Dialog.Content>
+      <TextComponent>
+        This is an undismissable dialog, however you can use hardware back
+        button to close it!
+      </TextComponent>
+    </Dialog.Content>
+    <Dialog.Actions>
+      <Button textColor={Palette.tertiary50} disabled>
+        Disagree
+      </Button>
+      <Button onPress={close}>Agree</Button>
+    </Dialog.Actions>
+  </Dialog>
 );
 
 export default DialogWithDismissableBackButton;
diff --git a/example/src/Examples/Dialogs/DialogWithIcon.tsx b/example/src/Examples/Dialogs/DialogWithIcon.tsx
index d939d4e401..0d5f595f9c 100644
--- a/example/src/Examples/Dialogs/DialogWithIcon.tsx
+++ b/example/src/Examples/Dialogs/DialogWithIcon.tsx
@@ -1,7 +1,6 @@
-import * as React from 'react';
 import { StyleSheet } from 'react-native';
 
-import { Button, Portal, Dialog, MD3Colors } from 'react-native-paper';
+import { Button, Dialog, Palette } from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';
 
@@ -13,24 +12,22 @@ const DialogWithIcon = ({
   close: () => void;
 }) => {
   return (
-    <Portal>
-      <Dialog onDismiss={close} visible={visible}>
-        <Dialog.Icon icon="alert" />
-        <Dialog.Title style={styles.title}>Dialog with Icon</Dialog.Title>
-        <Dialog.Content>
-          <TextComponent>
-            This is a dialog with new component called DialogIcon. When icon is
-            displayed you should center the header.
-          </TextComponent>
-        </Dialog.Content>
-        <Dialog.Actions>
-          <Button onPress={close} color={MD3Colors.error50}>
-            Disagree
-          </Button>
-          <Button onPress={close}>Agree</Button>
-        </Dialog.Actions>
-      </Dialog>
-    </Portal>
+    <Dialog onDismiss={close} visible={visible}>
+      <Dialog.Icon icon="alert" />
+      <Dialog.Title style={styles.title}>Dialog with Icon</Dialog.Title>
+      <Dialog.Content>
+        <TextComponent>
+          This is a dialog with new component called DialogIcon. When icon is
+          displayed you should center the header.
+        </TextComponent>
+      </Dialog.Content>
+      <Dialog.Actions>
+        <Button onPress={close} textColor={Palette.error50}>
+          Disagree
+        </Button>
+        <Button onPress={close}>Agree</Button>
+      </Dialog.Actions>
+    </Dialog>
   );
 };
 
diff --git a/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx b/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx
index 5ef9e7e7f2..f70c93d576 100644
--- a/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx
+++ b/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx
@@ -1,12 +1,8 @@
-import * as React from 'react';
 import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native';
 
-import { Dialog, MD2Colors, MD3Colors, Portal } from 'react-native-paper';
+import { Dialog, Palette } from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';
-import { useExampleTheme } from '../../hooks/useExampleTheme';
-
-const isIOS = Platform.OS === 'ios';
 
 const DialogWithLoadingIndicator = ({
   visible,
@@ -15,23 +11,20 @@ const DialogWithLoadingIndicator = ({
   visible: boolean;
   close: () => void;
 }) => {
-  const { isV3 } = useExampleTheme();
   return (
-    <Portal>
-      <Dialog onDismiss={close} visible={visible}>
-        <Dialog.Title>Progress Dialog</Dialog.Title>
-        <Dialog.Content>
-          <View style={styles.flexing}>
-            <ActivityIndicator
-              color={isV3 ? MD3Colors.tertiary30 : MD2Colors.indigo500}
-              size={isIOS ? 'large' : 48}
-              style={styles.marginRight}
-            />
-            <TextComponent>Loading.....</TextComponent>
-          </View>
-        </Dialog.Content>
-      </Dialog>
-    </Portal>
+    <Dialog onDismiss={close} visible={visible}>
+      <Dialog.Title>Progress Dialog</Dialog.Title>
+      <Dialog.Content>
+        <View style={styles.flexing}>
+          <ActivityIndicator
+            color={Palette.tertiary30}
+            size={Platform.OS === 'ios' ? 'large' : 48}
+            style={styles.marginRight}
+          />
+          <TextComponent>Loading.....</TextComponent>
+        </View>
+      </Dialog.Content>
+    </Dialog>
   );
 };
 
diff --git a/example/src/Examples/Dialogs/DialogWithLongText.tsx b/example/src/Examples/Dialogs/DialogWithLongText.tsx
index 3f826c1b40..eed30ec358 100644
--- a/example/src/Examples/Dialogs/DialogWithLongText.tsx
+++ b/example/src/Examples/Dialogs/DialogWithLongText.tsx
@@ -1,7 +1,6 @@
-import * as React from 'react';
 import { Dimensions, ScrollView, StyleSheet } from 'react-native';
 
-import { Button, Portal, Dialog } from 'react-native-paper';
+import { Button, Dialog } from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';
 
@@ -12,61 +11,59 @@ const DialogWithLongText = ({
   visible: boolean;
   close: () => void;
 }) => (
-  <Portal>
-    <Dialog
-      onDismiss={close}
-      visible={visible}
-      style={{ maxHeight: 0.6 * Dimensions.get('window').height }}
-    >
-      <Dialog.Title>Alert</Dialog.Title>
-      <Dialog.ScrollArea style={styles.smallPadding}>
-        <ScrollView contentContainerStyle={styles.biggerPadding}>
-          <TextComponent>
-            Material is the metaphor
-            {'\n'}
-            {'\n'}A material metaphor is the unifying theory of a rationalized
-            space and a system of motion. The material is grounded in tactile
-            reality, inspired by the study of paper and ink, yet technologically
-            advanced and open to imagination and magic.
-            {'\n'}
-            {'\n'}
-            Surfaces and edges of the material provide visual cues that are
-            grounded in reality. The use of familiar tactile attributes helps
-            users quickly understand affordances. Yet the flexibility of the
-            material creates new affordances that supersede those in the
-            physical world, without breaking the rules of physics.
-            {'\n'}
-            {'\n'}
-            The fundamentals of light, surface, and movement are key to
-            conveying how objects move, interact, and exist in space and in
-            relation to each other. Realistic lighting shows seams, divides
-            space, and indicates moving parts.
-            {'\n'}
-            {'\n'}A material metaphor is the unifying theory of a rationalized
-            space and a system of motion. The material is grounded in tactile
-            reality, inspired by the study of paper and ink, yet technologically
-            advanced and open to imagination and magic.
-            {'\n'}
-            {'\n'}
-            Surfaces and edges of the material provide visual cues that are
-            grounded in reality. The use of familiar tactile attributes helps
-            users quickly understand affordances. Yet the flexibility of the
-            material creates new affordances that supersede those in the
-            physical world, without breaking the rules of physics.
-            {'\n'}
-            {'\n'}
-            The fundamentals of light, surface, and movement are key to
-            conveying how objects move, interact, and exist in space and in
-            relation to each other. Realistic lighting shows seams, divides
-            space, and indicates moving parts.
-          </TextComponent>
-        </ScrollView>
-      </Dialog.ScrollArea>
-      <Dialog.Actions>
-        <Button onPress={close}>Ok</Button>
-      </Dialog.Actions>
-    </Dialog>
-  </Portal>
+  <Dialog
+    onDismiss={close}
+    visible={visible}
+    style={{ maxHeight: 0.6 * Dimensions.get('window').height }}
+  >
+    <Dialog.Title>Alert</Dialog.Title>
+    <Dialog.ScrollArea style={styles.smallPadding}>
+      <ScrollView contentContainerStyle={styles.biggerPadding}>
+        <TextComponent>
+          Material is the metaphor
+          {'\n'}
+          {'\n'}A material metaphor is the unifying theory of a rationalized
+          space and a system of motion. The material is grounded in tactile
+          reality, inspired by the study of paper and ink, yet technologically
+          advanced and open to imagination and magic.
+          {'\n'}
+          {'\n'}
+          Surfaces and edges of the material provide visual cues that are
+          grounded in reality. The use of familiar tactile attributes helps
+          users quickly understand affordances. Yet the flexibility of the
+          material creates new affordances that supersede those in the physical
+          world, without breaking the rules of physics.
+          {'\n'}
+          {'\n'}
+          The fundamentals of light, surface, and movement are key to conveying
+          how objects move, interact, and exist in space and in relation to each
+          other. Realistic lighting shows seams, divides space, and indicates
+          moving parts.
+          {'\n'}
+          {'\n'}A material metaphor is the unifying theory of a rationalized
+          space and a system of motion. The material is grounded in tactile
+          reality, inspired by the study of paper and ink, yet technologically
+          advanced and open to imagination and magic.
+          {'\n'}
+          {'\n'}
+          Surfaces and edges of the material provide visual cues that are
+          grounded in reality. The use of familiar tactile attributes helps
+          users quickly understand affordances. Yet the flexibility of the
+          material creates new affordances that supersede those in the physical
+          world, without breaking the rules of physics.
+          {'\n'}
+          {'\n'}
+          The fundamentals of light, surface, and movement are key to conveying
+          how objects move, interact, and exist in space and in relation to each
+          other. Realistic lighting shows seams, divides space, and indicates
+          moving parts.
+        </TextComponent>
+      </ScrollView>
+    </Dialog.ScrollArea>
+    <Dialog.Actions>
+      <Button onPress={close}>Ok</Button>
+    </Dialog.Actions>
+  </Dialog>
 );
 
 const styles = StyleSheet.create({
diff --git a/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx b/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx
index 966422369e..5a729d6299 100644
--- a/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx
+++ b/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx
@@ -3,7 +3,6 @@ import { ScrollView, View, StyleSheet } from 'react-native';
 
 import {
   Button,
-  Portal,
   Dialog,
   RadioButton,
   TouchableRipple,
@@ -22,73 +21,71 @@ const DialogWithRadioBtns = ({ visible, close }: Props) => {
   const [checked, setChecked] = React.useState<CheckedState>('normal');
 
   return (
-    <Portal>
-      <Dialog onDismiss={close} visible={visible}>
-        <Dialog.Title>Choose an option</Dialog.Title>
-        <Dialog.ScrollArea style={styles.container}>
-          <ScrollView>
-            <View>
-              <TouchableRipple onPress={() => setChecked('normal')}>
-                <View style={styles.row}>
-                  <View pointerEvents="none">
-                    <RadioButton
-                      value="normal"
-                      status={checked === 'normal' ? 'checked' : 'unchecked'}
-                    />
-                  </View>
-                  <TextComponent isSubheading style={styles.text}>
-                    Option 1
-                  </TextComponent>
+    <Dialog onDismiss={close} visible={visible}>
+      <Dialog.Title>Choose an option</Dialog.Title>
+      <Dialog.ScrollArea style={styles.container}>
+        <ScrollView>
+          <View>
+            <TouchableRipple onPress={() => setChecked('normal')}>
+              <View style={styles.row}>
+                <View pointerEvents="none">
+                  <RadioButton
+                    value="normal"
+                    status={checked === 'normal' ? 'checked' : 'unchecked'}
+                  />
                 </View>
-              </TouchableRipple>
-              <TouchableRipple onPress={() => setChecked('second')}>
-                <View style={styles.row}>
-                  <View pointerEvents="none">
-                    <RadioButton
-                      value="second"
-                      status={checked === 'second' ? 'checked' : 'unchecked'}
-                    />
-                  </View>
-                  <TextComponent isSubheading style={styles.text}>
-                    Option 2
-                  </TextComponent>
+                <TextComponent isSubheading style={styles.text}>
+                  Option 1
+                </TextComponent>
+              </View>
+            </TouchableRipple>
+            <TouchableRipple onPress={() => setChecked('second')}>
+              <View style={styles.row}>
+                <View pointerEvents="none">
+                  <RadioButton
+                    value="second"
+                    status={checked === 'second' ? 'checked' : 'unchecked'}
+                  />
                 </View>
-              </TouchableRipple>
-              <TouchableRipple onPress={() => setChecked('third')}>
-                <View style={styles.row}>
-                  <View pointerEvents="none">
-                    <RadioButton
-                      value="third"
-                      status={checked === 'third' ? 'checked' : 'unchecked'}
-                    />
-                  </View>
-                  <TextComponent isSubheading style={styles.text}>
-                    Option 3
-                  </TextComponent>
+                <TextComponent isSubheading style={styles.text}>
+                  Option 2
+                </TextComponent>
+              </View>
+            </TouchableRipple>
+            <TouchableRipple onPress={() => setChecked('third')}>
+              <View style={styles.row}>
+                <View pointerEvents="none">
+                  <RadioButton
+                    value="third"
+                    status={checked === 'third' ? 'checked' : 'unchecked'}
+                  />
                 </View>
-              </TouchableRipple>
-              <TouchableRipple onPress={() => setChecked('fourth')}>
-                <View style={styles.row}>
-                  <View pointerEvents="none">
-                    <RadioButton
-                      value="fourth"
-                      status={checked === 'fourth' ? 'checked' : 'unchecked'}
-                    />
-                  </View>
-                  <TextComponent isSubheading style={styles.text}>
-                    Option 4
-                  </TextComponent>
+                <TextComponent isSubheading style={styles.text}>
+                  Option 3
+                </TextComponent>
+              </View>
+            </TouchableRipple>
+            <TouchableRipple onPress={() => setChecked('fourth')}>
+              <View style={styles.row}>
+                <View pointerEvents="none">
+                  <RadioButton
+                    value="fourth"
+                    status={checked === 'fourth' ? 'checked' : 'unchecked'}
+                  />
                 </View>
-              </TouchableRipple>
-            </View>
-          </ScrollView>
-        </Dialog.ScrollArea>
-        <Dialog.Actions>
-          <Button onPress={close}>Cancel</Button>
-          <Button onPress={close}>Ok</Button>
-        </Dialog.Actions>
-      </Dialog>
-    </Portal>
+                <TextComponent isSubheading style={styles.text}>
+                  Option 4
+                </TextComponent>
+              </View>
+            </TouchableRipple>
+          </View>
+        </ScrollView>
+      </Dialog.ScrollArea>
+      <Dialog.Actions>
+        <Button onPress={close}>Cancel</Button>
+        <Button onPress={close}>Ok</Button>
+      </Dialog.Actions>
+    </Dialog>
   );
 };
 
diff --git a/example/src/Examples/Dialogs/DialogWithUndismissableBackButton.tsx b/example/src/Examples/Dialogs/DialogWithUndismissableBackButton.tsx
new file mode 100644
index 0000000000..d775ba011c
--- /dev/null
+++ b/example/src/Examples/Dialogs/DialogWithUndismissableBackButton.tsx
@@ -0,0 +1,29 @@
+import { Button, Dialog, Palette } from 'react-native-paper';
+
+import { TextComponent } from './DialogTextComponent';
+
+const DialogWithUndismissableBackButton = ({
+  visible,
+  close,
+}: {
+  visible: boolean;
+  close: () => void;
+}) => (
+  <Dialog onDismiss={close} visible={visible} dismissableBackButton={false}>
+    <Dialog.Title>Alert</Dialog.Title>
+    <Dialog.Content>
+      <TextComponent>
+        This dialog can be dismissed by tapping outside, however the hardware
+        back button will not close it!
+      </TextComponent>
+    </Dialog.Content>
+    <Dialog.Actions>
+      <Button textColor={Palette.tertiary50} disabled>
+        Disagree
+      </Button>
+      <Button onPress={close}>Agree</Button>
+    </Dialog.Actions>
+  </Dialog>
+);
+
+export default DialogWithUndismissableBackButton;
diff --git a/example/src/Examples/Dialogs/UndismissableDialog.tsx b/example/src/Examples/Dialogs/UndismissableDialog.tsx
index 2af40f4e97..79dc777484 100644
--- a/example/src/Examples/Dialogs/UndismissableDialog.tsx
+++ b/example/src/Examples/Dialogs/UndismissableDialog.tsx
@@ -1,6 +1,4 @@
-import * as React from 'react';
-
-import { Button, Portal, Dialog, MD2Colors } from 'react-native-paper';
+import { Button, Dialog, Palette } from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';
 
@@ -11,20 +9,18 @@ const UndismissableDialog = ({
   visible: boolean;
   close: () => void;
 }) => (
-  <Portal>
-    <Dialog onDismiss={close} visible={visible} dismissable={false}>
-      <Dialog.Title>Alert</Dialog.Title>
-      <Dialog.Content>
-        <TextComponent>This is an undismissable dialog!!</TextComponent>
-      </Dialog.Content>
-      <Dialog.Actions>
-        <Button color={MD2Colors.teal500} disabled>
-          Disagree
-        </Button>
-        <Button onPress={close}>Agree</Button>
-      </Dialog.Actions>
-    </Dialog>
-  </Portal>
+  <Dialog onDismiss={close} visible={visible} dismissable={false}>
+    <Dialog.Title>Alert</Dialog.Title>
+    <Dialog.Content>
+      <TextComponent>This is an undismissable dialog!!</TextComponent>
+    </Dialog.Content>
+    <Dialog.Actions>
+      <Button textColor={Palette.tertiary50} disabled>
+        Disagree
+      </Button>
+      <Button onPress={close}>Agree</Button>
+    </Dialog.Actions>
+  </Dialog>
 );
 
 export default UndismissableDialog;
diff --git a/example/src/Examples/Dialogs/index.tsx b/example/src/Examples/Dialogs/index.tsx
index 7af735d036..5ae48db11f 100644
--- a/example/src/Examples/Dialogs/index.tsx
+++ b/example/src/Examples/Dialogs/index.tsx
@@ -5,3 +5,4 @@ export { default as DialogWithRadioBtns } from './DialogWithRadioBtns';
 export { default as UndismissableDialog } from './UndismissableDialog';
 export { default as DialogWithIcon } from './DialogWithIcon';
 export { default as DialogWithDismissableBackButton } from './DialogWithDismissableBackButton';
+export { default as DialogWithUndismissableBackButton } from './DialogWithUndismissableBackButton';
diff --git a/example/src/Examples/DividerExample.tsx b/example/src/Examples/DividerExample.tsx
index bbf5e7efb2..77df26a85a 100644
--- a/example/src/Examples/DividerExample.tsx
+++ b/example/src/Examples/DividerExample.tsx
@@ -1,15 +1,13 @@
-import * as React from 'react';
 import { FlatList } from 'react-native';
 
-import { Divider, List } from 'react-native-paper';
+import { Divider, List, useTheme } from 'react-native-paper';
 
-import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const items = ['Apple', 'Banana', 'Coconut', 'Lemon', 'Mango', 'Peach'];
 
 const DividerExample = () => {
-  const { colors } = useExampleTheme();
+  const { colors } = useTheme();
 
   return (
     <ScreenWrapper withScrollView={false}>
diff --git a/example/src/Examples/FABExample.tsx b/example/src/Examples/FABExample.tsx
index 0cff916980..09ce39aa14 100644
--- a/example/src/Examples/FABExample.tsx
+++ b/example/src/Examples/FABExample.tsx
@@ -1,198 +1,233 @@
 import * as React from 'react';
-import { Alert, StyleSheet, View } from 'react-native';
+import { FlatList, ScrollView, StyleSheet, View } from 'react-native';
+import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
 
-import { FAB, Portal, Text } from 'react-native-paper';
+import {
+  Chip,
+  Divider,
+  FAB,
+  List,
+  Switch,
+  Text,
+  useTheme,
+} from 'react-native-paper';
+import type { FABSize, FABVariant } from 'react-native-paper';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { isWeb } from '../../utils';
-import { useExampleTheme } from '../hooks/useExampleTheme';
-import ScreenWrapper from '../ScreenWrapper';
+type FabType = 'icon' | 'extended' | 'extendedTransforming' | 'menu';
+type FabPosition = 'start' | 'center' | 'end';
+type FabColor = FABVariant | 'custom';
 
-type FABVariant = 'primary' | 'secondary' | 'tertiary' | 'surface';
-type FABSize = 'small' | 'medium' | 'large';
-type FABMode = 'flat' | 'elevated';
+// Pixels of scroll change required to flip the transforming FAB. Avoids
+// flicker from sub-pixel scroll jitter at the top of the list.
+const SCROLL_DELTA_THRESHOLD = 4;
+
+const CUSTOM_CONTAINER_COLOR = '#E91E63';
+
+const justifyContentByPosition = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+} as const satisfies Record<FabPosition, 'flex-start' | 'center' | 'flex-end'>;
+
+const variants: FabColor[] = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'tonalPrimary',
+  'tonalSecondary',
+  'tonalTertiary',
+  'custom',
+];
+
+const sizes: FABSize[] = ['default', 'medium', 'large'];
+
+const types: FabType[] = ['icon', 'extended', 'extendedTransforming', 'menu'];
+
+const positions: FabPosition[] = ['start', 'center', 'end'];
+
+const rows = Array.from({ length: 40 }, (_, i) => ({
+  id: String(i + 1),
+  text: `Item ${i + 1}`,
+}));
+
+type ChipRowProps<T extends string> = {
+  label: string;
+  options: readonly T[];
+  value: T;
+  onChange: (value: T) => void;
+};
+
+const ChipRow = <T extends string>({
+  label,
+  options,
+  value,
+  onChange,
+}: ChipRowProps<T>) => (
+  <View style={styles.chipRow}>
+    <Text variant="labelLarge" style={styles.chipRowLabel}>
+      {label}
+    </Text>
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={styles.chipRowContent}
+    >
+      {options.map((option) => (
+        <Chip
+          key={option}
+          selected={option === value}
+          showSelectedOverlay
+          onPress={() => onChange(option)}
+        >
+          {option}
+        </Chip>
+      ))}
+    </ScrollView>
+  </View>
+);
 
 const FABExample = () => {
-  const [visible, setVisible] = React.useState<boolean>(true);
-  const [toggleStackOnLongPress, setToggleStackOnLongPress] =
-    React.useState<boolean>(false);
-  const [open, setOpen] = React.useState<boolean>(false);
-  const { isV3 } = useExampleTheme();
+  const { colors } = useTheme();
+  const insets = useSafeAreaInsets();
 
-  const variants = ['primary', 'secondary', 'tertiary', 'surface'];
-  const sizes = ['small', 'medium', 'large'];
-  const modes = ['flat', 'elevated'];
+  const [variant, setVariant] = React.useState<FabColor>('tonalPrimary');
+  const activeVariant = variant === 'custom' ? undefined : variant;
+  const activeContainerColor =
+    variant === 'custom' ? CUSTOM_CONTAINER_COLOR : undefined;
+  const [size, setSize] = React.useState<FABSize>('medium');
+  const [type, setType] = React.useState<FabType>('icon');
+  const [position, setPosition] = React.useState<FabPosition>('end');
+  const [showFab, setShowFab] = React.useState<boolean>(true);
+  const [transformingExpanded, setTransformingExpanded] = React.useState(true);
+  const [menuExpanded, setMenuExpanded] = React.useState(false);
+  const lastScrollY = React.useRef(0);
 
-  return (
-    <ScreenWrapper style={styles.container}>
-      <View style={styles.column}>
-        <FAB
-          icon={visible ? 'eye-off' : 'eye'}
-          size="small"
-          style={styles.fab}
-          onPress={() => setVisible(!visible)}
-        />
+  const fabPadding = 16;
+
+  const renderItem = React.useCallback(
+    ({ item }: { item: (typeof rows)[number] }) => (
+      <View style={styles.listItem}>
+        <Text variant="bodyLarge">{item.text}</Text>
       </View>
-      {isV3 && (
-        <>
-          <View style={styles.row}>
-            {variants.map((variant) => (
-              <View style={styles.fabVariant} key={variant}>
-                <FAB
-                  icon="pencil"
-                  style={styles.fab}
-                  onPress={() => {}}
-                  visible={visible}
-                  variant={variant as FABVariant}
-                />
-                {visible && <Text variant="bodyMedium">{variant}</Text>}
-              </View>
-            ))}
-          </View>
-          <View style={styles.row}>
-            {sizes.map((size) => (
-              <View style={styles.fabVariant} key={size}>
-                <FAB
-                  icon="pencil"
-                  style={styles.fab}
-                  onPress={() => {}}
-                  visible={visible}
-                  size={size as FABSize}
-                />
-                {visible && <Text variant="bodyMedium">{size}</Text>}
-              </View>
-            ))}
-          </View>
-          <View style={styles.row}>
-            {modes.map((mode) => (
-              <View style={styles.fabVariant} key={mode}>
-                <FAB
-                  icon="pencil"
-                  style={styles.fab}
-                  onPress={() => {}}
-                  visible={visible}
-                  mode={mode as FABMode}
-                />
-                {visible && <Text variant="bodyMedium">{mode}</Text>}
-              </View>
-            ))}
-          </View>
-        </>
-      )}
-      <View style={styles.column}>
-        {!isV3 && (
-          <>
-            <FAB
-              icon="heart"
-              style={styles.fab}
-              onPress={() => {}}
-              visible={visible}
-            />
-            <FAB
-              icon="heart"
-              style={styles.fab}
-              onPress={() => {}}
-              visible={visible}
-            />
-          </>
-        )}
-        <FAB
-          icon="map"
-          style={styles.fab}
-          customSize={64}
-          onPress={() => {}}
-          visible={visible}
-        />
-        <FAB
-          icon="map"
-          label="Extended FAB with custom size"
-          style={styles.fab}
-          customSize={64}
-          onPress={() => {}}
-          visible={visible}
-        />
-        <FAB
-          icon="check"
-          label="Extended FAB"
-          style={styles.fab}
-          onPress={() => {}}
-          visible={visible}
-        />
-        <FAB
-          icon="cancel"
-          label="Disabled FAB"
-          style={styles.fab}
-          onPress={() => {}}
-          visible={visible}
-          disabled
+    ),
+    []
+  );
+
+  const onScroll = React.useCallback(
+    ({ nativeEvent }: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const y = nativeEvent.contentOffset.y;
+      const delta = y - lastScrollY.current;
+      if (Math.abs(delta) < SCROLL_DELTA_THRESHOLD) {
+        return;
+      }
+      lastScrollY.current = y;
+      if (y <= 0) {
+        setTransformingExpanded(true);
+      } else if (delta > 0) {
+        setTransformingExpanded(false);
+      } else {
+        setTransformingExpanded(true);
+      }
+    },
+    []
+  );
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <View style={styles.controls}>
+        <ChipRow
+          label="Color"
+          options={variants}
+          value={variant}
+          onChange={setVariant}
         />
-        <FAB
-          icon="format-letter-case"
-          label="Mixed case"
-          style={styles.fab}
-          onPress={() => {}}
-          visible={visible}
-          uppercase
+        <ChipRow label="Size" options={sizes} value={size} onChange={setSize} />
+        <ChipRow label="Type" options={types} value={type} onChange={setType} />
+        <ChipRow
+          label="Position"
+          options={positions}
+          value={position}
+          onChange={setPosition}
         />
-        <FAB
-          icon="cancel"
-          label="Loading FAB"
-          style={styles.fab}
-          onPress={() => {}}
-          visible={visible}
-          loading
+        <List.Item
+          title="Show FAB"
+          right={() => (
+            <View pointerEvents="none">
+              <Switch value={showFab} />
+            </View>
+          )}
+          onPress={() => setShowFab((v) => !v)}
         />
-        <Portal>
-          <FAB.Group
-            open={open}
-            icon={open ? 'calendar-today' : 'plus'}
-            accessibilityLabel="Calendar FAB"
-            toggleStackOnLongPress={toggleStackOnLongPress}
-            actions={[
-              { icon: 'plus', onPress: () => {} },
-              { icon: 'star', label: 'Star', onPress: () => {} },
-              { icon: 'email', label: 'Email', onPress: () => {} },
-              {
-                icon: 'bell',
-                label: 'Remind',
-                onPress: () => {},
-                size: isV3 ? 'small' : 'medium',
-              },
-              {
-                icon: toggleStackOnLongPress
-                  ? 'gesture-tap'
-                  : 'gesture-tap-hold',
-                label: toggleStackOnLongPress
-                  ? 'Toggle on Press'
-                  : 'Toggle on Long Press',
-                onPress: () => {
-                  setToggleStackOnLongPress(!toggleStackOnLongPress);
-                },
-              },
-            ]}
-            enableLongPressWhenStackOpened
-            onStateChange={({ open }: { open: boolean }) => setOpen(open)}
-            onPress={() => {
-              if (toggleStackOnLongPress) {
-                isWeb ? alert('Fab is Pressed') : Alert.alert('Fab is Pressed');
-                // do something on press when the speed dial is closed
-              } else if (open) {
-                isWeb ? alert('Fab is Pressed') : Alert.alert('Fab is Pressed');
-                // do something if the speed dial is open
-              }
-            }}
-            onLongPress={() => {
-              if (!toggleStackOnLongPress || open) {
-                isWeb
-                  ? alert('Fab is Long Pressed')
-                  : Alert.alert('Fab is Long Pressed');
-                // do something if the speed dial is open
-              }
-            }}
-            visible={visible}
+        <Divider bold style={{ backgroundColor: colors.outline }} />
+      </View>
+      <FlatList
+        data={rows}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.id}
+        contentContainerStyle={[
+          styles.listContent,
+          { paddingBottom: insets.bottom + fabPadding + 96 },
+        ]}
+        onScroll={type === 'extendedTransforming' ? onScroll : undefined}
+        scrollEventThrottle={16}
+      />
+      <View
+        pointerEvents="box-none"
+        style={[
+          styles.fabContainer,
+          {
+            bottom: insets.bottom + fabPadding,
+            left: insets.left + fabPadding,
+            right: insets.right + fabPadding,
+            justifyContent: justifyContentByPosition[position],
+          },
+        ]}
+      >
+        {type === 'icon' && (
+          <FAB
+            icon="pencil"
+            variant={activeVariant}
+            containerColor={activeContainerColor}
+            size={size}
+            visible={showFab}
+            onPress={() => {}}
+          />
+        )}
+        {(type === 'extended' || type === 'extendedTransforming') && (
+          <FAB.Extended
+            icon="pencil"
+            label="Compose"
+            variant={activeVariant}
+            containerColor={activeContainerColor}
+            size={size}
+            expanded={type === 'extended' ? true : transformingExpanded}
+            visible={showFab}
+            onPress={() => {}}
           />
-        </Portal>
+        )}
       </View>
-    </ScreenWrapper>
+      {type === 'menu' ? (
+        <FAB.Menu
+          expanded={menuExpanded}
+          onDismiss={() => setMenuExpanded(false)}
+          alignment={position}
+          trigger={{
+            icon: 'pencil',
+            variant: activeVariant,
+            containerColor: activeContainerColor,
+            size,
+            visible: showFab,
+            onPress: () => setMenuExpanded(true),
+          }}
+          items={[
+            { icon: 'email', label: 'Send', onPress: () => {} },
+            { icon: 'bell', label: 'Remind me', onPress: () => {} },
+            { icon: 'star', label: 'Favorite', onPress: () => {} },
+          ]}
+        />
+      ) : null}
+    </View>
   );
 };
 
@@ -200,26 +235,32 @@ FABExample.title = 'Floating Action Button';
 
 const styles = StyleSheet.create({
   container: {
-    padding: 4,
+    flex: 1,
   },
-  row: {
-    marginBottom: 8,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
+  controls: {
+    paddingTop: 8,
+    paddingBottom: 8,
   },
-  column: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginBottom: 8,
+  chipRow: {
+    paddingVertical: 4,
   },
-  fab: {
-    margin: 8,
+  chipRowLabel: {
+    paddingHorizontal: 16,
+    paddingBottom: 6,
   },
-  fabVariant: {
-    flex: 1,
-    justifyContent: 'space-between',
-    alignItems: 'center',
+  chipRowContent: {
+    paddingHorizontal: 16,
+    gap: 8,
+  },
+  listContent: {
+    paddingHorizontal: 16,
+  },
+  listItem: {
+    paddingVertical: 12,
+  },
+  fabContainer: {
+    position: 'absolute',
+    flexDirection: 'row',
   },
 });
 
diff --git a/example/src/Examples/IconButtonExample.tsx b/example/src/Examples/IconButtonExample.tsx
index 6342b1e144..5fb463880b 100644
--- a/example/src/Examples/IconButtonExample.tsx
+++ b/example/src/Examples/IconButtonExample.tsx
@@ -1,36 +1,10 @@
-import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { IconButton, List, MD2Colors, MD3Colors } from 'react-native-paper';
+import { IconButton, List, Palette } from 'react-native-paper';
 
-import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const ButtonExample = () => {
-  const { isV3 } = useExampleTheme();
-  if (!isV3) {
-    return (
-      <ScreenWrapper contentContainerStyle={styles.v2Container}>
-        <IconButton icon="camera" size={24} onPress={() => {}} />
-        <IconButton
-          icon="lock"
-          size={24}
-          iconColor={MD2Colors.green500}
-          onPress={() => {}}
-        />
-        <IconButton icon="" size={24} onPress={() => {}} loading />
-        <IconButton icon="camera" size={36} onPress={() => {}} />
-        <IconButton
-          icon="lock"
-          size={36}
-          onPress={() => {}}
-          style={{ backgroundColor: MD2Colors.lightGreen200 }}
-        />
-        <IconButton icon="heart" size={60} onPress={() => {}} />
-      </ScreenWrapper>
-    );
-  }
-
   return (
     <ScreenWrapper contentContainerStyle={styles.v3Container}>
       <List.Section title="Default">
@@ -146,7 +120,7 @@ const ButtonExample = () => {
           <IconButton
             icon="lock"
             size={24}
-            iconColor={MD3Colors.tertiary50}
+            iconColor={Palette.tertiary50}
             onPress={() => {}}
           />
           <IconButton
@@ -154,7 +128,7 @@ const ButtonExample = () => {
             mode="contained"
             style={styles.square}
             size={24}
-            iconColor={MD3Colors.tertiary50}
+            iconColor={Palette.tertiary50}
             onPress={() => {}}
           />
           <IconButton
@@ -162,8 +136,8 @@ const ButtonExample = () => {
             mode="contained"
             style={styles.slightlyRounded}
             size={24}
-            contentStyle={{ padding: 8 }}
-            iconColor={MD3Colors.tertiary50}
+            contentStyle={styles.contentPadding}
+            iconColor={Palette.tertiary50}
             onPress={() => {}}
           />
           <IconButton
@@ -171,7 +145,7 @@ const ButtonExample = () => {
             mode="contained-tonal"
             style={styles.differentBorderRadius}
             size={24}
-            iconColor={MD3Colors.tertiary50}
+            iconColor={Palette.tertiary50}
             onPress={() => {}}
           />
           <IconButton
@@ -179,7 +153,7 @@ const ButtonExample = () => {
             mode="outlined"
             style={styles.differentBorderRadius}
             size={24}
-            iconColor={MD3Colors.tertiary50}
+            iconColor={Palette.tertiary50}
             onPress={() => {}}
           />
           <IconButton icon="camera" size={36} onPress={() => {}} />
@@ -187,7 +161,7 @@ const ButtonExample = () => {
             icon="lock"
             size={36}
             onPress={() => {}}
-            containerColor={MD3Colors.tertiary60}
+            containerColor={Palette.tertiary60}
           />
           <IconButton icon="heart" size={60} onPress={() => {}} />
           <IconButton icon="" size={60} onPress={() => {}} loading />
@@ -200,10 +174,6 @@ const ButtonExample = () => {
 ButtonExample.title = 'Icon Button';
 
 const styles = StyleSheet.create({
-  v2Container: {
-    flexDirection: 'row',
-    padding: 8,
-  },
   v3Container: {
     flexDirection: 'column',
   },
@@ -219,6 +189,9 @@ const styles = StyleSheet.create({
     width: 48,
     height: 48,
   },
+  contentPadding: {
+    padding: 8,
+  },
   differentBorderRadius: {
     borderTopLeftRadius: 2,
     borderTopRightRadius: 4,
diff --git a/example/src/Examples/IconExample.tsx b/example/src/Examples/IconExample.tsx
index 1fd2e15f35..b08a389f5c 100644
--- a/example/src/Examples/IconExample.tsx
+++ b/example/src/Examples/IconExample.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { StyleSheet, View, Image } from 'react-native';
 
 import { Icon, List } from 'react-native-paper';
diff --git a/example/src/Examples/ListItemExample.tsx b/example/src/Examples/ListItemExample.tsx
index bad5b35893..4d5a69b400 100644
--- a/example/src/Examples/ListItemExample.tsx
+++ b/example/src/Examples/ListItemExample.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 
 import { List, Divider, Checkbox, Avatar, Switch } from 'react-native-paper';
diff --git a/example/src/Examples/ListSectionExample.tsx b/example/src/Examples/ListSectionExample.tsx
index dd15ab29e2..d7efbe6adc 100644
--- a/example/src/Examples/ListSectionExample.tsx
+++ b/example/src/Examples/ListSectionExample.tsx
@@ -1,7 +1,6 @@
-import * as React from 'react';
 import { StyleSheet, Image, View } from 'react-native';
 
-import { Caption, List, Text, Chip, Divider } from 'react-native-paper';
+import { List, Text, Chip, Divider } from 'react-native-paper';
 
 import ScreenWrapper from '../ScreenWrapper';
 const ListSectionExample = () => {
@@ -97,7 +96,7 @@ const ListSectionExample = () => {
               >
                 List Item
               </Text>
-              <Caption>Yesterday</Caption>
+              <Text variant="bodySmall">Yesterday</Text>
             </View>
           )}
           description={({
diff --git a/example/src/Examples/MenuExample.tsx b/example/src/Examples/MenuExample.tsx
index c1164d35b6..2a55069090 100644
--- a/example/src/Examples/MenuExample.tsx
+++ b/example/src/Examples/MenuExample.tsx
@@ -1,12 +1,8 @@
 import * as React from 'react';
-import {
-  GestureResponderEvent,
-  Platform,
-  StyleSheet,
-  View,
-} from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
+import type { GestureResponderEvent } from 'react-native';
 
-import type { StackNavigationProp } from '@react-navigation/stack';
+import { useNavigation } from '@react-navigation/native';
 import {
   Appbar,
   Button,
@@ -16,27 +12,22 @@ import {
   TouchableRipple,
 } from 'react-native-paper';
 
-import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 type ContextualMenuCoord = { x: number; y: number };
 
-type Props = {
-  navigation: StackNavigationProp<{}>;
-};
-
 type MenuVisibility = {
   [key: string]: boolean | undefined;
 };
 
 const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';
 
-const MenuExample = ({ navigation }: Props) => {
+const MenuExample = () => {
+  const navigation = useNavigation('Menu');
+
   const [visible, setVisible] = React.useState<MenuVisibility>({});
   const [contextualMenuCoord, setContextualMenuCoor] =
     React.useState<ContextualMenuCoord>({ x: 0, y: 0 });
-  const { isV3 } = useExampleTheme();
-
   const _toggleMenu = (name: string) => () =>
     setVisible({ ...visible, [name]: !visible[name] });
 
@@ -66,16 +57,12 @@ const MenuExample = ({ navigation }: Props) => {
           visible={_getVisible('menu1')}
           onDismiss={_toggleMenu('menu1')}
           anchor={
-            <Appbar.Action
-              icon={MORE_ICON}
-              onPress={_toggleMenu('menu1')}
-              {...(!isV3 && { color: 'white' })}
-            />
+            <Appbar.Action icon={MORE_ICON} onPress={_toggleMenu('menu1')} />
           }
         >
           <Menu.Item onPress={() => {}} title="Undo" />
           <Menu.Item onPress={() => {}} title="Redo" />
-          <Divider style={isV3 && styles.md3Divider} />
+          <Divider style={styles.md3Divider} />
           <Menu.Item onPress={() => {}} title="Cut" disabled />
           <Menu.Item onPress={() => {}} title="Copy" disabled />
           <Menu.Item onPress={() => {}} title="Paste" />
@@ -99,7 +86,7 @@ const MenuExample = ({ navigation }: Props) => {
               <Menu.Item leadingIcon="undo" onPress={() => {}} title="Undo" />
               <Menu.Item leadingIcon="redo" onPress={() => {}} title="Redo" />
 
-              <Divider style={isV3 && styles.md3Divider} />
+              <Divider style={styles.md3Divider} />
 
               <Menu.Item
                 leadingIcon="content-cut"
@@ -118,13 +105,11 @@ const MenuExample = ({ navigation }: Props) => {
                 onPress={() => {}}
                 title="Paste"
               />
-              {isV3 && (
-                <Menu.Item
-                  trailingIcon="share-variant"
-                  onPress={() => {}}
-                  title="Share"
-                />
-              )}
+              <Menu.Item
+                trailingIcon="share-variant"
+                onPress={() => {}}
+                title="Share"
+              />
             </Menu>
           </View>
           <Menu
@@ -134,7 +119,7 @@ const MenuExample = ({ navigation }: Props) => {
           >
             <Menu.Item onPress={() => {}} title="Item 1" />
             <Menu.Item onPress={() => {}} title="Item 2" />
-            <Divider style={isV3 && styles.md3Divider} />
+            <Divider style={styles.md3Divider} />
             <Menu.Item onPress={() => {}} title="Item 3" disabled />
           </Menu>
           <List.Section style={styles.list} title="Contextual menu">
diff --git a/example/src/Examples/ProgressBarExample.tsx b/example/src/Examples/ProgressBarExample.tsx
index 565147f4c6..e6ef656cb7 100644
--- a/example/src/Examples/ProgressBarExample.tsx
+++ b/example/src/Examples/ProgressBarExample.tsx
@@ -1,16 +1,16 @@
 import * as React from 'react';
+// eslint-disable-next-line no-restricted-imports -- TODO: remove after ProgressBar migrates to Reanimated.
 import { View, StyleSheet, Animated } from 'react-native';
 
 import {
   Button,
+  Palette,
   ProgressBar,
-  MD2Colors,
-  MD3Colors,
-  ProgressBarProps,
   Text,
+  useTheme,
 } from 'react-native-paper';
+import type { ProgressBarProps } from 'react-native-paper';
 
-import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 class ClassProgressBar extends React.Component {
@@ -28,8 +28,7 @@ const AnimatedProgressBar = Animated.createAnimatedComponent(ClassProgressBar);
 const ProgressBarExample = () => {
   const [visible, setVisible] = React.useState<boolean>(true);
   const [progress, setProgress] = React.useState<number>(0.3);
-  const theme = useExampleTheme();
-  const { isV3 } = theme;
+  const theme = useTheme();
   const { current: progressBarValue } = React.useRef(new Animated.Value(0));
 
   const runCustomAnimation = () => {
@@ -64,7 +63,7 @@ const ProgressBarExample = () => {
         <ProgressBar
           progress={progress}
           visible={visible}
-          color={isV3 ? MD3Colors.error50 : MD2Colors.red800}
+          color={Palette.error50}
         />
       </View>
 
@@ -75,9 +74,9 @@ const ProgressBarExample = () => {
         <ProgressBar
           progress={progress}
           visible={visible}
-          color={MD2Colors.red800}
+          color={Palette.error40}
           style={{
-            backgroundColor: isV3 ? MD3Colors.secondary50 : MD2Colors.teal500,
+            backgroundColor: Palette.secondary50,
           }}
         />
       </View>
diff --git a/example/src/Examples/RadioButtonExample.tsx b/example/src/Examples/RadioButtonExample.tsx
index 88bf9ebfb7..6ab1869dd9 100644
--- a/example/src/Examples/RadioButtonExample.tsx
+++ b/example/src/Examples/RadioButtonExample.tsx
@@ -2,29 +2,24 @@ import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import {
-  MD2Colors,
-  MD3Colors,
-  Paragraph,
+  Palette,
   RadioButton,
   Text,
   TouchableRipple,
 } from 'react-native-paper';
 
-import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 type State = 'normal' | 'normal-ios' | 'normal-item' | 'custom';
 
 const RadioButtonExample = () => {
   const [checked, setChecked] = React.useState<State>('normal');
-  const { isV3 } = useExampleTheme();
-  const TextComponent = isV3 ? Text : Paragraph;
 
   return (
     <ScreenWrapper style={styles.container}>
       <TouchableRipple onPress={() => setChecked('normal')}>
         <View style={styles.row}>
-          <TextComponent>Normal - Material Design</TextComponent>
+          <Text>Normal - Material Design</Text>
           <View pointerEvents="none">
             <RadioButton.Android
               value="normal"
@@ -35,7 +30,7 @@ const RadioButtonExample = () => {
       </TouchableRipple>
       <TouchableRipple onPress={() => setChecked('normal-ios')}>
         <View style={styles.row}>
-          <TextComponent>Normal 2 - IOS</TextComponent>
+          <Text>Normal 2 - IOS</Text>
           <View pointerEvents="none">
             <RadioButton.IOS
               value="normal-ios"
@@ -46,11 +41,11 @@ const RadioButtonExample = () => {
       </TouchableRipple>
       <TouchableRipple onPress={() => setChecked('custom')}>
         <View style={styles.row}>
-          <TextComponent>Custom</TextComponent>
+          <Text>Custom</Text>
           <View pointerEvents="none">
             <RadioButton
               value="custom"
-              color={isV3 ? MD3Colors.error70 : MD2Colors.blue500}
+              color={Palette.error70}
               status={checked === 'custom' ? 'checked' : 'unchecked'}
             />
           </View>
@@ -63,11 +58,11 @@ const RadioButtonExample = () => {
         onPress={() => setChecked('normal-item')}
       />
       <View style={styles.row}>
-        <TextComponent>Checked (Disabled)</TextComponent>
+        <Text>Checked (Disabled)</Text>
         <RadioButton value="first" status="checked" disabled />
       </View>
       <View style={styles.row}>
-        <TextComponent>Unchecked (Disabled)</TextComponent>
+        <Text>Unchecked (Disabled)</Text>
         <RadioButton value="second" status="unchecked" disabled />
       </View>
       <RadioButton.Item
diff --git a/example/src/Examples/RadioButtonGroupExample.tsx b/example/src/Examples/RadioButtonGroupExample.tsx
index 6d614911ce..dc7977acb8 100644
--- a/example/src/Examples/RadioButtonGroupExample.tsx
+++ b/example/src/Examples/RadioButtonGroupExample.tsx
@@ -1,17 +1,15 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { List, Paragraph, RadioButton, Text } from 'react-native-paper';
+import { List, RadioButton, Text, useTheme } from 'react-native-paper';
 
-import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const RadioButtonGroupExample = () => {
   const [value, setValue] = React.useState('first');
   const [value2, setValue2] = React.useState('first');
 
-  const { colors, isV3 } = useExampleTheme();
-  const TextComponent = isV3 ? Text : Paragraph;
+  const { colors } = useTheme();
 
   return (
     <ScreenWrapper>
@@ -21,15 +19,15 @@ const RadioButtonGroupExample = () => {
           onValueChange={(value: string) => setValue(value)}
         >
           <View style={styles.row}>
-            <TextComponent>First</TextComponent>
+            <Text>First</Text>
             <RadioButton value="first" />
           </View>
           <View style={styles.row}>
-            <TextComponent>Second</TextComponent>
+            <Text>Second</Text>
             <RadioButton.Android value="second" />
           </View>
           <View style={styles.row}>
-            <TextComponent>Third</TextComponent>
+            <Text>Third</Text>
             <RadioButton.IOS value="third" />
           </View>
         </RadioButton.Group>
diff --git a/example/src/Examples/RadioButtonItemExample.tsx b/example/src/Examples/RadioButtonItemExample.tsx
index 38eff755a5..e640a1dd0a 100644
--- a/example/src/Examples/RadioButtonItemExample.tsx
+++ b/example/src/Examples/RadioButtonItemExample.tsx
@@ -3,7 +3,6 @@ import { StyleSheet } from 'react-native';
 
 import { RadioButton } from 'react-native-paper';
 
-import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const RadioButtonItemExample = () => {
@@ -15,8 +14,6 @@ const RadioButtonItemExample = () => {
   const [checkedDisabled, setCheckedDisabled] = React.useState<boolean>(true);
   const [checkedLabelVariant, setCheckedLabelVariant] = React.useState(true);
 
-  const { isV3 } = useExampleTheme();
-
   return (
     <ScreenWrapper style={styles.container}>
       <RadioButton.Item
@@ -53,15 +50,13 @@ const RadioButtonItemExample = () => {
         value="iOS"
         disabled
       />
-      {isV3 && (
-        <RadioButton.Item
-          label="Default with titleLarge title variant"
-          labelVariant="titleLarge"
-          status={checkedLabelVariant ? 'checked' : 'unchecked'}
-          onPress={() => setCheckedLabelVariant(!checkedLabelVariant)}
-          value="default"
-        />
-      )}
+      <RadioButton.Item
+        label="Default with titleLarge title variant"
+        labelVariant="titleLarge"
+        status={checkedLabelVariant ? 'checked' : 'unchecked'}
+        onPress={() => setCheckedLabelVariant(!checkedLabelVariant)}
+        value="default"
+      />
     </ScreenWrapper>
   );
 };
diff --git a/example/src/Examples/SearchbarExample.tsx b/example/src/Examples/SearchbarExample.tsx
index 51a8af3ed8..1a3e98bb8f 100644
--- a/example/src/Examples/SearchbarExample.tsx
+++ b/example/src/Examples/SearchbarExample.tsx
@@ -1,29 +1,26 @@
 import * as React from 'react';
 import { Keyboard, StyleSheet } from 'react-native';
 
-import type { DrawerNavigationProp } from '@react-navigation/drawer';
-import type { StackNavigationProp } from '@react-navigation/stack';
+import { useNavigation } from '@react-navigation/native';
 import {
+  Avatar,
   List,
-  MD3Colors,
+  Palette,
   Searchbar,
   Snackbar,
-  Avatar,
+  useTheme,
 } from 'react-native-paper';
 
-import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
-type Props = {
-  navigation: StackNavigationProp<{}>;
-};
+const SearchExample = () => {
+  const navigation = useNavigation('Searchbar');
 
-const SearchExample = ({ navigation }: Props) => {
   const [isVisible, setIsVisible] = React.useState(false);
   const [searchQueries, setSearchQuery] = React.useState({
     searchBarMode: '',
-    traileringIcon: '',
-    traileringIconWithRightItem: '',
+    trailingIcon: '',
+    trailingIconWithRightItem: '',
     rightItem: '',
     loadingBarMode: '',
     searchViewMode: '',
@@ -34,12 +31,12 @@ const SearchExample = ({ navigation }: Props) => {
     clickableLoading: '',
   });
 
-  const { isV3, colors } = useExampleTheme();
+  const { colors } = useTheme();
 
   return (
     <>
       <ScreenWrapper>
-        {!isV3 && (
+        <List.Section title="Bar mode">
           <Searchbar
             placeholder="Search"
             onChangeText={(query) =>
@@ -47,136 +44,122 @@ const SearchExample = ({ navigation }: Props) => {
             }
             value={searchQueries.searchBarMode}
             style={styles.searchbar}
+            mode="bar"
+          />
+          <Searchbar
+            placeholder="Trailing icon"
+            onChangeText={(query) =>
+              setSearchQuery({ ...searchQueries, trailingIcon: query })
+            }
+            value={searchQueries.trailingIcon}
+            trailingIcon={'microphone'}
+            trailingIconColor={
+              isVisible ? Palette.error40 : colors.onSurfaceVariant
+            }
+            trailingIconAccessibilityLabel={'microphone button'}
+            onTrailingIconPress={() => setIsVisible(true)}
+            style={styles.searchbar}
+            mode="bar"
+          />
+          <Searchbar
+            mode="bar"
+            placeholder="Trailing icon with right item"
+            onChangeText={(query) =>
+              setSearchQuery({
+                ...searchQueries,
+                trailingIconWithRightItem: query,
+              })
+            }
+            value={searchQueries.trailingIconWithRightItem}
+            trailingIcon={'microphone'}
+            trailingIconColor={
+              isVisible ? Palette.error40 : colors.onSurfaceVariant
+            }
+            trailingIconAccessibilityLabel={'microphone button'}
+            onTrailingIconPress={() => setIsVisible(true)}
+            right={(props) => (
+              <Avatar.Image
+                {...props}
+                size={30}
+                source={require('../../assets/images/avatar.png')}
+              />
+            )}
+            style={styles.searchbar}
+          />
+          <Searchbar
+            mode="bar"
+            placeholder="Right item"
+            onChangeText={(query) =>
+              setSearchQuery({
+                ...searchQueries,
+                rightItem: query,
+              })
+            }
+            value={searchQueries.rightItem}
+            right={(props) => (
+              <Avatar.Image
+                {...props}
+                size={30}
+                source={require('../../assets/images/avatar.png')}
+              />
+            )}
+            style={styles.searchbar}
           />
-        )}
-        {isV3 && (
-          <List.Section title="Bar mode">
-            <Searchbar
-              placeholder="Search"
-              onChangeText={(query) =>
-                setSearchQuery({ ...searchQueries, searchBarMode: query })
-              }
-              value={searchQueries.searchBarMode}
-              style={styles.searchbar}
-              mode="bar"
-            />
-            <Searchbar
-              placeholder="Trailering icon"
-              onChangeText={(query) =>
-                setSearchQuery({ ...searchQueries, traileringIcon: query })
-              }
-              value={searchQueries.traileringIcon}
-              traileringIcon={'microphone'}
-              traileringIconColor={
-                isVisible ? MD3Colors.error40 : colors.onSurfaceVariant
-              }
-              traileringIconAccessibilityLabel={'microphone button'}
-              onTraileringIconPress={() => setIsVisible(true)}
-              style={styles.searchbar}
-              mode="bar"
-            />
-            <Searchbar
-              mode="bar"
-              placeholder="Trailering icon with right item"
-              onChangeText={(query) =>
-                setSearchQuery({
-                  ...searchQueries,
-                  traileringIconWithRightItem: query,
-                })
-              }
-              value={searchQueries.traileringIconWithRightItem}
-              traileringIcon={'microphone'}
-              traileringIconColor={
-                isVisible ? MD3Colors.error40 : colors.onSurfaceVariant
-              }
-              traileringIconAccessibilityLabel={'microphone button'}
-              onTraileringIconPress={() => setIsVisible(true)}
-              right={(props) => (
-                <Avatar.Image
-                  {...props}
-                  size={30}
-                  source={require('../../assets/images/avatar.png')}
-                />
-              )}
-              style={styles.searchbar}
-            />
-            <Searchbar
-              mode="bar"
-              placeholder="Right item"
-              onChangeText={(query) =>
-                setSearchQuery({
-                  ...searchQueries,
-                  rightItem: query,
-                })
-              }
-              value={searchQueries.rightItem}
-              right={(props) => (
-                <Avatar.Image
-                  {...props}
-                  size={30}
-                  source={require('../../assets/images/avatar.png')}
-                />
-              )}
-              style={styles.searchbar}
-            />
-            <Searchbar
-              placeholder="Loading"
-              onChangeText={(query) =>
-                setSearchQuery({
-                  ...searchQueries,
-                  loadingBarMode: query,
-                })
-              }
-              value={searchQueries.loadingBarMode}
-              style={styles.searchbar}
-              mode="bar"
-              loading
-              traileringIcon={'microphone'}
-            />
-          </List.Section>
-        )}
-        {isV3 && (
-          <List.Section title="View mode">
-            <Searchbar
-              placeholder="Search"
-              onChangeText={(query) =>
-                setSearchQuery({
-                  ...searchQueries,
-                  searchViewMode: query,
-                })
-              }
-              value={searchQueries.searchViewMode}
-              style={styles.searchbar}
-              mode="view"
-            />
-            <Searchbar
-              placeholder="Search without bottom line"
-              onChangeText={(query) =>
-                setSearchQuery({
-                  ...searchQueries,
-                  searchWithoutBottomLine: query,
-                })
-              }
-              value={searchQueries.searchWithoutBottomLine}
-              style={styles.searchbar}
-              mode="view"
-              showDivider={false}
-            />
-            <Searchbar
-              placeholder="Loading"
-              onChangeText={(query) =>
-                setSearchQuery({
-                  ...searchQueries,
-                  loadingViewMode: query,
-                })
-              }
-              value={searchQueries.loadingViewMode}
-              style={styles.searchbar}
-              mode="view"
-              loading
-            />
-          </List.Section>
-        )}
+          <Searchbar
+            placeholder="Loading"
+            onChangeText={(query) =>
+              setSearchQuery({
+                ...searchQueries,
+                loadingBarMode: query,
+              })
+            }
+            value={searchQueries.loadingBarMode}
+            style={styles.searchbar}
+            mode="bar"
+            loading
+            trailingIcon={'microphone'}
+          />
+        </List.Section>
+        <List.Section title="View mode">
+          <Searchbar
+            placeholder="Search"
+            onChangeText={(query) =>
+              setSearchQuery({
+                ...searchQueries,
+                searchViewMode: query,
+              })
+            }
+            value={searchQueries.searchViewMode}
+            style={styles.searchbar}
+            mode="view"
+          />
+          <Searchbar
+            placeholder="Search without bottom line"
+            onChangeText={(query) =>
+              setSearchQuery({
+                ...searchQueries,
+                searchWithoutBottomLine: query,
+              })
+            }
+            value={searchQueries.searchWithoutBottomLine}
+            style={styles.searchbar}
+            mode="view"
+            showDivider={false}
+          />
+          <Searchbar
+            placeholder="Loading"
+            onChangeText={(query) =>
+              setSearchQuery({
+                ...searchQueries,
+                loadingViewMode: query,
+              })
+            }
+            value={searchQueries.loadingViewMode}
+            style={styles.searchbar}
+            mode="view"
+            loading
+          />
+        </List.Section>
         <List.Section title="Clickable icon">
           <Searchbar
             placeholder="Search"
@@ -208,7 +191,7 @@ const SearchExample = ({ navigation }: Props) => {
             value={searchQueries.clickableDrawer}
             onIconPress={() => {
               Keyboard.dismiss();
-              (navigation as any as DrawerNavigationProp<{}>).openDrawer();
+              navigation.openDrawer();
             }}
             icon="menu"
             style={styles.searchbar}
diff --git a/example/src/Examples/SegmentedButtons/SegmentedButtonMultiselectRealCase.tsx b/example/src/Examples/SegmentedButtons/SegmentedButtonMultiselectRealCase.tsx
index d8a237e493..2ba4a69d30 100644
--- a/example/src/Examples/SegmentedButtons/SegmentedButtonMultiselectRealCase.tsx
+++ b/example/src/Examples/SegmentedButtons/SegmentedButtonMultiselectRealCase.tsx
@@ -13,6 +13,7 @@ const SegmentedButtonMultiselectRealCase = () => {
   const filteredData = React.useMemo(
     () =>
       restaurantsData.filter((item) =>
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
         value.includes(item.price.toString() as PriceRange)
       ),
     [value]
@@ -58,17 +59,15 @@ const SegmentedButtonMultiselectRealCase = () => {
         contentContainerStyle={styles.contentContainer}
         renderItem={({ item }) => {
           return (
-            <Card mode="contained" style={styles.card}>
-              <Card.Content style={styles.content}>
-                <Card.Cover style={styles.cover} source={item.cover} />
-                <Card.Title
-                  title={item.name}
-                  subtitle={'$'.repeat(item.price)}
-                  titleVariant="titleMedium"
-                  style={styles.title}
-                  right={() => <IconButton icon={'bookmark-outline'} />}
-                />
-              </Card.Content>
+            <Card mode="contained" direction="horizontal" style={styles.card}>
+              <Card.Cover style={styles.cover} source={item.cover} />
+              <Card.Title
+                title={item.name}
+                subtitle={'$'.repeat(item.price)}
+                titleVariant="titleMedium"
+                style={styles.title}
+                right={() => <IconButton icon={'bookmark-outline'} />}
+              />
             </Card>
           );
         }}
@@ -89,12 +88,6 @@ const styles = StyleSheet.create({
     marginHorizontal: 16,
     marginTop: 16,
   },
-  content: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 0,
-    paddingVertical: 0,
-  },
   cover: {
     width: 72,
     height: 72,
diff --git a/example/src/Examples/SegmentedButtons/SegmentedButtonRealCase.tsx b/example/src/Examples/SegmentedButtons/SegmentedButtonRealCase.tsx
index 172c80a5f6..87c0b74ba9 100644
--- a/example/src/Examples/SegmentedButtons/SegmentedButtonRealCase.tsx
+++ b/example/src/Examples/SegmentedButtons/SegmentedButtonRealCase.tsx
@@ -37,17 +37,15 @@ const SegmentedButtonRealCase = () => {
         contentContainerStyle={styles.contentContainer}
         renderItem={({ item }) => {
           return (
-            <Card mode="contained" style={styles.card}>
-              <Card.Content style={styles.content}>
-                <Card.Cover style={styles.cover} source={item.cover} />
-                <Card.Title
-                  title={item.title}
-                  subtitle={item.artist}
-                  titleVariant="titleMedium"
-                  style={styles.title}
-                  right={() => <IconButton icon={'bookmark-outline'} />}
-                />
-              </Card.Content>
+            <Card mode="contained" direction="horizontal" style={styles.card}>
+              <Card.Cover style={styles.cover} source={item.cover} />
+              <Card.Title
+                title={item.title}
+                subtitle={item.artist}
+                titleVariant="titleMedium"
+                style={styles.title}
+                right={() => <IconButton icon={'bookmark-outline'} />}
+              />
             </Card>
           );
         }}
@@ -68,15 +66,9 @@ const styles = StyleSheet.create({
     marginHorizontal: 16,
     marginTop: 16,
   },
-  content: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 0,
-    paddingVertical: 0,
-  },
   cover: {
-    width: 72,
-    height: 72,
+    width: 84,
+    height: 84,
   },
   title: {
     flexShrink: 1,
diff --git a/example/src/Examples/SegmentedButtonsExample.tsx b/example/src/Examples/SegmentedButtonsExample.tsx
index ac40787c8a..c2cbf782a5 100644
--- a/example/src/Examples/SegmentedButtonsExample.tsx
+++ b/example/src/Examples/SegmentedButtonsExample.tsx
@@ -1,6 +1,4 @@
-import * as React from 'react';
-
-import type { StackNavigationProp } from '@react-navigation/stack';
+import { useNavigation } from '@react-navigation/native';
 import { List } from 'react-native-paper';
 
 import {
@@ -16,25 +14,23 @@ import {
 } from './SegmentedButtons';
 import ScreenWrapper from '../ScreenWrapper';
 
-type Props = {
-  navigation: StackNavigationProp<{ [key: string]: undefined }>;
-};
+const SegmentedButtonExample = () => {
+  const navigation = useNavigation('SegmentedButton');
 
-const SegmentedButtonExample = ({ navigation }: Props) => {
   return (
     <ScreenWrapper>
       <List.Section title={`Segmented Button Example Usage`}>
         <List.Item
           title="Single select"
           description="Go to the example"
-          onPress={() => navigation.navigate('segmentedButtonRealCase')}
+          onPress={() => navigation.navigate('SegmentedButtonRealCase')}
           right={(props) => <List.Icon {...props} icon="arrow-right" />}
         />
         <List.Item
           title="Multiselect select"
           description="Go to the example"
           onPress={() =>
-            navigation.navigate('segmentedButtonMultiselectRealCase')
+            navigation.navigate('SegmentedButtonMultiselectRealCase')
           }
           right={(props) => <List.Icon {...props} icon="arrow-right" />}
         />
diff --git a/example/src/Examples/SnackbarExample.tsx b/example/src/Examples/SnackbarExample.tsx
index 27d4eb9568..e31955f18c 100644
--- a/example/src/Examples/SnackbarExample.tsx
+++ b/example/src/Examples/SnackbarExample.tsx
@@ -3,7 +3,6 @@ import { StyleSheet, View } from 'react-native';
 
 import { Snackbar, Button, List, Text, Switch } from 'react-native-paper';
 
-import { useExampleTheme } from '../hooks/useExampleTheme';
 import { PreferencesContext } from '../PreferencesContext';
 import ScreenWrapper from '../ScreenWrapper';
 
@@ -13,7 +12,6 @@ const LONG_MESSAGE =
 
 const SnackbarExample = () => {
   const preferences = React.useContext(PreferencesContext);
-  const theme = useExampleTheme();
 
   const [options, setOptions] = React.useState({
     showSnackbar: false,
@@ -51,17 +49,15 @@ const SnackbarExample = () => {
               }
             />
           </View>
-          {theme.isV3 && (
-            <View style={styles.row}>
-              <Text>Close icon button</Text>
-              <Switch
-                value={showCloseIcon}
-                onValueChange={() =>
-                  setOptions({ ...options, showCloseIcon: !showCloseIcon })
-                }
-              />
-            </View>
-          )}
+          <View style={styles.row}>
+            <Text>Close icon button</Text>
+            <Switch
+              value={showCloseIcon}
+              onValueChange={() =>
+                setOptions({ ...options, showCloseIcon: !showCloseIcon })
+              }
+            />
+          </View>
           <View style={styles.row}>
             <Text>Longer message</Text>
             <Switch
diff --git a/example/src/Examples/SurfaceExample.tsx b/example/src/Examples/SurfaceExample.tsx
index 48cbfa69d7..e941c7c843 100644
--- a/example/src/Examples/SurfaceExample.tsx
+++ b/example/src/Examples/SurfaceExample.tsx
@@ -1,54 +1,84 @@
 import * as React from 'react';
 import { ScrollView, StyleSheet, View } from 'react-native';
 
-import {
-  MD3Elevation,
-  Surface,
-  Text,
-  MD3Colors,
-  List,
-} from 'react-native-paper';
-
-import { useExampleTheme } from '../hooks/useExampleTheme';
+import { Surface, Text, Palette, List, IconButton } from 'react-native-paper';
+import type { Elevation } from 'react-native-paper';
+
 import ScreenWrapper from '../ScreenWrapper';
 
+const elevationLevels: Elevation[] = [0, 1, 2, 3, 4, 5];
+
+const AnimatedSurface = () => {
+  const [index, setIndex] = React.useState(3);
+
+  const level = elevationLevels[index];
+
+  return (
+    <View style={styles.scroll}>
+      <Surface style={styles.surface} borderRadius={8} elevation={level}>
+        <Text variant="bodySmall">{`Elevation ${level}`}</Text>
+      </Surface>
+      <View style={styles.actions}>
+        <IconButton
+          mode="contained-tonal"
+          icon="minus"
+          disabled={index === 0}
+          onPress={() => setIndex(index - 1)}
+        />
+        <IconButton
+          mode="contained-tonal"
+          icon="plus"
+          disabled={index === elevationLevels.length - 1}
+          onPress={() => setIndex(index + 1)}
+        />
+      </View>
+    </View>
+  );
+};
+
 const SurfaceExample = () => {
-  const { isV3 } = useExampleTheme();
-  const v2Elevation = [1, 2, 4, 8, 12];
-  const elevationValues = isV3 ? Array.from({ length: 6 }) : v2Elevation;
+  const elevationValues: Elevation[] = [0, 1, 2, 3, 4, 5];
 
-  const renderSurface = (index: number, mode: 'flat' | 'elevated') => (
+  const renderSurface = (index: Elevation, mode: 'flat' | 'elevated') => (
     <Surface
       key={index}
-      style={[
-        styles.surface,
-        isV3 ? styles.v3Surface : { elevation: v2Elevation[index] },
-      ]}
+      style={styles.surface}
+      borderRadius={8}
       mode={mode}
-      {...(isV3 && { elevation: index as MD3Elevation })}
+      elevation={index}
     >
-      <Text variant="bodyLarge">
-        {isV3
-          ? `Elevation ${index === 1 ? '(default)' : ''} ${index}`
-          : `${elevationValues[index]}`}
-      </Text>
+      <Text variant="bodySmall">{`Elevation ${index}`}</Text>
     </Surface>
   );
 
   return (
     <ScreenWrapper>
       <List.Section title="Elevated surface">
-        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-          {elevationValues.map((_, index) => renderSurface(index, 'elevated'))}
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.scroll}
+        >
+          {elevationValues.map((elevation) =>
+            renderSurface(elevation, 'elevated')
+          )}
         </ScrollView>
       </List.Section>
 
       <List.Section title="Flat surface">
-        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-          {elevationValues.map((_, index) => renderSurface(index, 'flat'))}
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.scroll}
+        >
+          {elevationValues.map((elevation) => renderSurface(elevation, 'flat'))}
         </ScrollView>
       </List.Section>
 
+      <List.Section title="Animated elevation">
+        <AnimatedSurface />
+      </List.Section>
+
       <List.Section title="Layout">
         <View style={styles.content}>
           <View style={styles.horizontalSurfacesContainer}>
@@ -60,10 +90,14 @@ const SurfaceExample = () => {
             </Surface>
           </View>
           <View style={styles.verticalSurfacesContainer}>
-            <Surface style={styles.verticalSurface}>
+            <Surface
+              style={[styles.verticalSurface, styles.verticalSurfaceContent]}
+            >
               <Text style={styles.centerText}>Top</Text>
             </Surface>
-            <Surface style={styles.verticalSurface}>
+            <Surface
+              style={[styles.verticalSurface, styles.verticalSurfaceContent]}
+            >
               <Text style={styles.centerText}>Bottom</Text>
             </Surface>
           </View>
@@ -80,27 +114,27 @@ const styles = StyleSheet.create({
     padding: 24,
     alignItems: 'center',
   },
+  scroll: {
+    gap: 24,
+    paddingHorizontal: 16,
+    paddingVertical: 24,
+  },
   surface: {
-    margin: 24,
-    height: 80,
-    width: 80,
+    height: 120,
+    width: 120,
     alignItems: 'center',
     justifyContent: 'center',
   },
-  v3Surface: {
-    borderRadius: 16,
-    height: 200,
-    width: 200,
-    alignItems: 'center',
-    justifyContent: 'center',
+  actions: {
+    flexDirection: 'row',
+    gap: 16,
   },
-
   horizontalSurfacesContainer: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     width: '100%',
     marginBottom: 20,
-    borderColor: MD3Colors.tertiary50,
+    borderColor: Palette.tertiary50,
     padding: 10,
     borderWidth: 1,
   },
@@ -113,12 +147,14 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     width: '100%',
     marginBottom: 100,
-    borderColor: MD3Colors.tertiary50,
+    borderColor: Palette.tertiary50,
     padding: 10,
     borderWidth: 1,
   },
   verticalSurface: {
     height: '48%',
+  },
+  verticalSurfaceContent: {
     justifyContent: 'center',
   },
 
diff --git a/example/src/Examples/SwitchExample.tsx b/example/src/Examples/SwitchExample.tsx
index a1bff15dc4..545dbf8dd3 100644
--- a/example/src/Examples/SwitchExample.tsx
+++ b/example/src/Examples/SwitchExample.tsx
@@ -1,88 +1,103 @@
 import * as React from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
-import {
-  MD2Colors,
-  MD3Colors,
-  Paragraph,
-  Switch,
-  Text,
-  TouchableRipple,
-} from 'react-native-paper';
+import { Switch, Text, useTheme } from 'react-native-paper';
 
-import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
+const Row = ({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) => (
+  <View style={styles.row}>
+    <Text>{label}</Text>
+    <View style={styles.right}>{children}</View>
+  </View>
+);
+
 const SwitchExample = () => {
-  const [valueNormal, setNormalValue] = React.useState<boolean>(true);
-  const [valueCustom, setCustomValue] = React.useState<boolean>(true);
+  const theme = useTheme();
+  const [defaultOn, setDefaultOn] = React.useState(true);
+  const [defaultCheckedIconOn, setDefaultCheckedIconOn] = React.useState(true);
+  const [defaultIconOn, setDefaultIconOn] = React.useState(true);
+  const [customOn, setCustomOn] = React.useState(true);
+  const [customIconOn, setCustomIconOn] = React.useState(true);
+  const [disableAll, setDisableAll] = React.useState(false);
 
-  const { isV3 } = useExampleTheme();
+  const tertiaryTheme = React.useMemo(
+    () => ({
+      colors: {
+        primary: theme.colors.tertiary,
+        onPrimary: theme.colors.onTertiary,
+        primaryContainer: theme.colors.tertiaryContainer,
+        secondary: theme.colors.tertiary,
+      },
+    }),
+    [theme]
+  );
 
-  const switchValueNormalLabel = `switch ${
-    valueNormal === true ? 'on' : 'off'
-  }`;
-  const switchValueCustomlLabel = `switch ${
-    valueCustom === true ? 'on' : 'off'
-  }`;
+  return (
+    <ScreenWrapper style={styles.container}>
+      <Row label="Default">
+        <Switch
+          value={defaultOn}
+          onValueChange={setDefaultOn}
+          disabled={disableAll}
+        />
+      </Row>
 
-  const TextComponent = isV3 ? Text : Paragraph;
+      <Row label="Default with icon when on">
+        <Switch
+          value={defaultCheckedIconOn}
+          onValueChange={setDefaultCheckedIconOn}
+          checkedIcon="check"
+          disabled={disableAll}
+        />
+      </Row>
 
-  return Platform.OS === 'android' ? (
-    <ScreenWrapper style={styles.container}>
-      <TouchableRipple onPress={() => setNormalValue(!valueNormal)}>
-        <View style={styles.row}>
-          <TextComponent>Normal {switchValueNormalLabel}</TextComponent>
-          <View pointerEvents="none">
-            <Switch value={valueNormal} />
-          </View>
-        </View>
-      </TouchableRipple>
-      <TouchableRipple onPress={() => setCustomValue(!valueCustom)}>
-        <View style={styles.row}>
-          <TextComponent>Custom {switchValueCustomlLabel}</TextComponent>
-          <View pointerEvents="none">
-            <Switch
-              value={valueCustom}
-              color={isV3 ? MD3Colors.tertiary50 : MD2Colors.blue500}
-            />
-          </View>
-        </View>
-      </TouchableRipple>
-      <View style={styles.row}>
-        <TextComponent>Switch on (disabled)</TextComponent>
-        <Switch disabled value />
-      </View>
-      <View style={styles.row}>
-        <TextComponent>Switch off (disabled)</TextComponent>
-        <Switch disabled />
-      </View>
-    </ScreenWrapper>
-  ) : (
-    <ScreenWrapper style={styles.container}>
-      <View style={styles.row}>
-        <TextComponent>Normal {switchValueNormalLabel}</TextComponent>
+      <Row label="Default with icon">
         <Switch
-          value={valueNormal}
-          onValueChange={() => setNormalValue(!valueNormal)}
+          value={defaultIconOn}
+          onValueChange={setDefaultIconOn}
+          checkedIcon="check"
+          uncheckedIcon="close"
+          disabled={disableAll}
         />
-      </View>
-      <View style={styles.row}>
-        <TextComponent>Custom {switchValueCustomlLabel}</TextComponent>
+      </Row>
+
+      <Row label="Custom (tertiary theme)">
         <Switch
-          value={valueCustom}
-          onValueChange={() => setCustomValue(!valueCustom)}
-          color={isV3 ? MD3Colors.tertiary50 : MD2Colors.blue500}
+          value={customOn}
+          onValueChange={setCustomOn}
+          theme={tertiaryTheme}
+          disabled={disableAll}
         />
-      </View>
-      <View style={styles.row}>
-        <TextComponent>Switch on (disabled)</TextComponent>
-        <Switch value disabled />
-      </View>
-      <View style={styles.row}>
-        <TextComponent>Switch off (disabled)</TextComponent>
-        <Switch value={false} disabled />
-      </View>
+      </Row>
+
+      <Row label="Custom with icon">
+        <Switch
+          value={customIconOn}
+          onValueChange={setCustomIconOn}
+          checkedIcon="white-balance-sunny"
+          uncheckedIcon="moon-waning-crescent"
+          theme={tertiaryTheme}
+          disabled={disableAll}
+        />
+      </Row>
+
+      <View
+        style={[
+          styles.separator,
+          { backgroundColor: theme.colors.outlineVariant },
+        ]}
+      />
+
+      <Row label="Disable all switches">
+        <Switch value={disableAll} onValueChange={setDisableAll} />
+      </Row>
     </ScreenWrapper>
   );
 };
@@ -100,6 +115,16 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     paddingHorizontal: 16,
   },
+  right: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  separator: {
+    height: 1,
+    marginHorizontal: 16,
+    marginVertical: 16,
+  },
 });
 
 export default SwitchExample;
diff --git a/example/src/Examples/TeamDetails.tsx b/example/src/Examples/TeamDetails.tsx
index 540507ffe8..463e5148d8 100644
--- a/example/src/Examples/TeamDetails.tsx
+++ b/example/src/Examples/TeamDetails.tsx
@@ -8,7 +8,7 @@ import {
   View,
 } from 'react-native';
 
-import type { StackNavigationProp } from '@react-navigation/stack';
+import { useNavigation, useRoute } from '@react-navigation/native';
 import {
   Appbar,
   BottomNavigation,
@@ -37,20 +37,6 @@ type RoutesState = Array<{
   getTestID?: string;
 }>;
 
-type Route = {
-  route: { key: string };
-  params: {
-    sourceColor: string;
-    headerTitle: string;
-    darkMode: boolean;
-  };
-};
-
-type Props = {
-  navigation: StackNavigationProp<{}>;
-  route: Route;
-};
-
 type Item = {
   host: string;
   guest: string;
@@ -107,8 +93,12 @@ const News = () => {
               </Text>
             </Card.Content>
             <Card.Actions>
-              <Button onPress={() => {}}>Share</Button>
-              <Button onPress={() => {}}>Read more</Button>
+              <Button mode="outlined" onPress={() => {}}>
+                Share
+              </Button>
+              <Button mode="contained" onPress={() => {}}>
+                Read more
+              </Button>
             </Card.Actions>
           </Card>
           <Card style={styles.card} mode="contained">
@@ -124,8 +114,12 @@ const News = () => {
               </Text>
             </Card.Content>
             <Card.Actions>
-              <Button onPress={() => {}}>Share</Button>
-              <Button onPress={() => {}}>Read more</Button>
+              <Button mode="outlined" onPress={() => {}}>
+                Share
+              </Button>
+              <Button mode="contained" onPress={() => {}}>
+                Read more
+              </Button>
             </Card.Actions>
           </Card>
         </View>
@@ -177,12 +171,14 @@ const Results = () => {
   );
 };
 
-const ThemeBasedOnSourceColor = ({ navigation, route }: Props) => {
+const ThemeBasedOnSourceColor = () => {
+  const navigation = useNavigation('TeamDetails');
+  const route = useRoute('TeamDetails');
+
   const insets = useSafeAreaInsets();
   const [index, setIndex] = React.useState(0);
 
-  const { params } = route;
-  const { sourceColor, headerTitle, darkMode } = params;
+  const { sourceColor, headerTitle, darkMode } = route.params ?? {};
 
   const [routes] = React.useState<RoutesState>([
     {
@@ -213,7 +209,7 @@ const ThemeBasedOnSourceColor = ({ navigation, route }: Props) => {
 
   const theme = colorThemes[sourceColor || 'paper'];
 
-  const systemColorScheme = useColorScheme() || 'light';
+  const systemColorScheme = useColorScheme() === 'dark' ? 'dark' : 'light';
   const colorScheme = darkMode ? 'dark' : systemColorScheme;
 
   return (
diff --git a/example/src/Examples/TeamsList.tsx b/example/src/Examples/TeamsList.tsx
index 3024f372ae..0296760d85 100644
--- a/example/src/Examples/TeamsList.tsx
+++ b/example/src/Examples/TeamsList.tsx
@@ -1,16 +1,14 @@
-import * as React from 'react';
 import { StyleSheet } from 'react-native';
 
-import type { ParamListBase } from '@react-navigation/native';
-import type { StackScreenProps } from '@react-navigation/stack';
+import { useNavigation } from '@react-navigation/native';
 import { DataTable } from 'react-native-paper';
 
-import { teamsList } from '../../utils';
+import { teamsList, type colorThemes } from '../../utils';
 import ScreenWrapper from '../ScreenWrapper';
 
-type Props = StackScreenProps<ParamListBase>;
+const TeamsList = () => {
+  const navigation = useNavigation('TeamsList');
 
-const TeamsList = ({ navigation }: Props) => {
   return (
     <ScreenWrapper contentContainerStyle={styles.content}>
       <DataTable>
@@ -25,10 +23,13 @@ const TeamsList = ({ navigation }: Props) => {
           <DataTable.Row
             key={item.key}
             onPress={() =>
-              navigation.navigate('teamDetails', {
-                sourceColor: item.name.split(' ')[1].toLowerCase(),
+              navigation.navigate('TeamDetails', {
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+                sourceColor: item.name
+                  .split(' ')[1]
+                  .toLowerCase() as keyof typeof colorThemes,
                 headerTitle: item.name,
-                darkMode: item.darkMode,
+                darkMode: item.darkMode ?? false,
               })
             }
           >
diff --git a/example/src/Examples/TextExample.tsx b/example/src/Examples/TextExample.tsx
index 4bd1572359..18f1eb8b84 100644
--- a/example/src/Examples/TextExample.tsx
+++ b/example/src/Examples/TextExample.tsx
@@ -1,26 +1,17 @@
-import * as React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 
 import {
-  Caption,
   configureFonts,
-  Headline,
-  MD3LightTheme,
-  Paragraph,
+  LightTheme,
   PaperProvider,
-  Subheading,
   customText,
-  Title,
 } from 'react-native-paper';
 
-import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const Text = customText<'customVariant'>();
 
 const TextExample = () => {
-  const { isV3 } = useExampleTheme();
-
   const fontConfig = {
     customVariant: {
       fontFamily: Platform.select({
@@ -38,81 +29,67 @@ const TextExample = () => {
   } as const;
 
   const theme = {
-    ...MD3LightTheme,
+    ...LightTheme,
     fonts: configureFonts({ config: fontConfig }),
   };
   return (
     <ScreenWrapper>
       <View style={styles.container}>
-        {!isV3 && (
-          <>
-            <Caption style={styles.text}>Caption</Caption>
-            <Paragraph style={styles.text}>Paragraph</Paragraph>
-            <Subheading style={styles.text}>Subheading</Subheading>
-            <Title style={styles.text}>Title</Title>
-            <Headline style={styles.text}>Headline</Headline>
-          </>
-        )}
-
-        {isV3 && (
-          <>
-            <Text style={styles.text} variant="displayLarge">
-              Display Large
-            </Text>
-            <Text style={styles.text} variant="displayMedium">
-              Display Medium
-            </Text>
-            <Text style={styles.text} variant="displaySmall">
-              Display small
-            </Text>
+        <Text style={styles.text} variant="displayLarge">
+          Display Large
+        </Text>
+        <Text style={styles.text} variant="displayMedium">
+          Display Medium
+        </Text>
+        <Text style={styles.text} variant="displaySmall">
+          Display small
+        </Text>
 
-            <Text style={styles.text} variant="headlineLarge">
-              Headline Large
-            </Text>
-            <Text style={styles.text} variant="headlineMedium">
-              Headline Medium
-            </Text>
-            <Text style={styles.text} variant="headlineSmall">
-              Headline Small
-            </Text>
+        <Text style={styles.text} variant="headlineLarge">
+          Headline Large
+        </Text>
+        <Text style={styles.text} variant="headlineMedium">
+          Headline Medium
+        </Text>
+        <Text style={styles.text} variant="headlineSmall">
+          Headline Small
+        </Text>
 
-            <Text style={styles.text} variant="titleLarge">
-              Title Large
-            </Text>
-            <Text style={styles.text} variant="titleMedium">
-              Title Medium
-            </Text>
-            <Text style={styles.text} variant="titleSmall">
-              Title Small
-            </Text>
+        <Text style={styles.text} variant="titleLarge">
+          Title Large
+        </Text>
+        <Text style={styles.text} variant="titleMedium">
+          Title Medium
+        </Text>
+        <Text style={styles.text} variant="titleSmall">
+          Title Small
+        </Text>
 
-            <Text style={styles.text} variant="labelLarge">
-              Label Large
-            </Text>
-            <Text style={styles.text} variant="labelMedium">
-              Label Medium
-            </Text>
-            <Text style={styles.text} variant="labelSmall">
-              Label Small
-            </Text>
+        <Text style={styles.text} variant="labelLarge">
+          Label Large
+        </Text>
+        <Text style={styles.text} variant="labelMedium">
+          Label Medium
+        </Text>
+        <Text style={styles.text} variant="labelSmall">
+          Label Small
+        </Text>
 
-            <Text style={styles.text} variant="bodyLarge">
-              Body Large
-            </Text>
-            <Text style={styles.text} variant="bodyMedium">
-              Body Medium
-            </Text>
-            <Text style={styles.text} variant="bodySmall">
-              Body Small
-            </Text>
+        <Text style={styles.text} variant="bodyLarge">
+          Body Large
+        </Text>
+        <Text style={styles.text} variant="bodyMedium">
+          Body Medium
+        </Text>
+        <Text style={styles.text} variant="bodySmall">
+          Body Small
+        </Text>
 
-            <PaperProvider theme={theme}>
-              <Text style={styles.text} variant="customVariant">
-                Custom Variant
-              </Text>
-            </PaperProvider>
-          </>
-        )}
+        <PaperProvider theme={theme}>
+          <Text style={styles.text} variant="customVariant">
+            Custom Variant
+          </Text>
+        </PaperProvider>
       </View>
     </ScreenWrapper>
   );
diff --git a/example/src/Examples/TextInputExample.tsx b/example/src/Examples/TextInputExample.tsx
index 7102abd0b6..73341a0cb1 100644
--- a/example/src/Examples/TextInputExample.tsx
+++ b/example/src/Examples/TextInputExample.tsx
@@ -1,914 +1,226 @@
 import * as React from 'react';
 import {
-  KeyboardAvoidingView,
-  Platform,
   StyleSheet,
-  Text,
+  TextInput as NativeTextInput,
   View,
+  type TextStyle,
+  type ViewStyle,
 } from 'react-native';
 
-import Icon from '@expo/vector-icons/MaterialCommunityIcons';
-import { useFonts } from 'expo-font';
 import {
-  configureFonts,
-  HelperText,
+  Divider,
   List,
-  MD2Colors,
-  MD3Colors,
+  Switch,
+  Text,
   TextInput,
+  TouchableRipple,
+  useTheme,
+  type TextInputAccessoryProps,
+  type TextInputVariant,
 } from 'react-native-paper';
 
-import { inputReducer, State } from '../../utils';
-import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
-const MAX_LENGTH = 20;
-
-const initialState: State = {
-  text: '',
-  customIconText: '',
-  name: '',
-  outlinedText: '',
-  largeText: '',
-  flatTextPassword: 'Password',
-  flatLongText:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae odio quis dolor tempor mattis at non sem. Suspendisse et sem tincidunt, accumsan massa eleifend, euismod dui. Praesent eget urna lectus.',
-  outlinedLargeText: '',
-  outlinedCustomLabel: '',
-  outlinedTextPassword: '',
-  outlinedLongText:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae odio quis dolor tempor mattis at non sem. Suspendisse et sem tincidunt, accumsan massa eleifend, euismod dui. Praesent eget urna lectus.',
-  nameNoPadding: '',
-  customStyleText: '',
-  nameRequired: '',
-  flatDenseText: '',
-  flatDense: '',
-  outlinedDenseText: '',
-  outlinedDense: '',
-  flatMultiline: '',
-  flatTextArea: '',
-  flatUnderlineColors: '',
-  outlinedMultiline: '',
-  outlinedTextArea: '',
-  outlinedColors: '',
-  outlinedLongLabel: '',
-  maxLengthName: '',
-  flatTextSecureEntry: true,
-  outlineTextSecureEntry: true,
-  iconsColor: {
-    flatLeftIcon: undefined,
-    flatRightIcon: undefined,
-    outlineLeftIcon: undefined,
-    outlineRightIcon: undefined,
-    customIcon: undefined,
-  },
+type DemoControls = {
+  error: boolean;
+  disabled: boolean;
+  readOnly: boolean;
+  leadingIcon: boolean;
+  trailingIcon: boolean;
+  counter: boolean;
+  showPrefix: boolean;
+  showSuffix: boolean;
+  multiline: boolean;
 };
 
-type AvoidingViewProps = {
-  children: React.ReactNode;
+type DemoModifiers = {
+  label: string;
+  helperText: string;
+  placeholder: string;
+  prefix: string;
+  suffix: string;
 };
 
-type ExpandedId = string | number | undefined;
-
-const TextInputAvoidingView = ({ children }: AvoidingViewProps) => {
-  return Platform.OS === 'ios' ? (
-    <KeyboardAvoidingView
-      style={styles.wrapper}
-      behavior="padding"
-      keyboardVerticalOffset={80}
-    >
-      {children}
-    </KeyboardAvoidingView>
-  ) : (
-    <>{children}</>
-  );
+type TextInputDemoProps = {
+  variant: TextInputVariant;
 };
 
-const TextInputExample = () => {
-  const [state, dispatch] = React.useReducer(inputReducer, initialState);
-  const {
-    text,
-    customIconText,
-    name,
-    outlinedText,
-    largeText,
-    flatTextPassword,
-    flatLongText,
-    outlinedLargeText,
-    outlinedCustomLabel,
-    outlinedTextPassword,
-    outlinedLongText,
-    nameNoPadding,
-    customStyleText,
-    nameRequired,
-    flatDenseText,
-    flatDense,
-    outlinedDenseText,
-    outlinedDense,
-    flatMultiline,
-    flatTextArea,
-    flatUnderlineColors,
-    outlinedMultiline,
-    outlinedTextArea,
-    outlinedColors,
-    maxLengthName,
-    flatTextSecureEntry,
-    outlineTextSecureEntry,
-    iconsColor: {
-      flatLeftIcon,
-      flatRightIcon,
-      outlineLeftIcon,
-      outlineRightIcon,
-      customIcon,
-    },
-  } = state;
-
-  const _isUsernameValid = (name: string) => /^[a-zA-Z]*$/.test(name);
+const TextInputDemo = ({ variant }: TextInputDemoProps) => {
+  const theme = useTheme();
+
+  const [value, setValue] = React.useState('');
+
+  const [controls, setControls] = React.useState<DemoControls>({
+    error: false,
+    disabled: false,
+    readOnly: false,
+    leadingIcon: false,
+    trailingIcon: false,
+    counter: false,
+    showPrefix: false,
+    showSuffix: false,
+    multiline: false,
+  });
 
-  const theme = useExampleTheme();
+  const [modifiers, setModifiers] = React.useState<DemoModifiers>({
+    label: 'Label',
+    helperText: 'Supporting text',
+    placeholder: 'Placeholder',
+    prefix: '$',
+    suffix: '/100',
+  });
 
-  const inputActionHandler = (type: keyof State, payload: string) =>
-    dispatch({
-      type: type,
-      payload: payload,
-    });
+  const toggleControl = (key: keyof DemoControls) =>
+    setControls((prev) => ({ ...prev, [key]: !prev[key] }));
 
-  const changeIconColor = (name: keyof State['iconsColor']) => {
-    const color = state.iconsColor[name];
+  const setModifier = (key: keyof DemoModifiers, text: string) =>
+    setModifiers((prev) => ({ ...prev, [key]: text }));
 
-    const newColors = {
-      ...state.iconsColor,
-      [name]: !color
-        ? theme.isV3
-          ? theme.colors.primary
-          : theme.colors?.accent
-        : undefined,
-    };
+  const leadingIcon = (props: TextInputAccessoryProps) => (
+    <TextInput.Icon {...props} icon="magnify" />
+  );
 
-    dispatch({
-      type: 'iconsColor',
-      payload: newColors,
-    });
-  };
+  const trailingIcon = (props: TextInputAccessoryProps) => (
+    <TextInput.Icon {...props} icon="close" onPress={() => setValue('')} />
+  );
 
-  const [fontsLoaded] = useFonts({
-    Abel: require('../../assets/fonts/Abel-Regular.ttf'),
-  });
+  const inputColor = theme.colors.onSurfaceVariant;
+  const borderColor = theme.colors.outlineVariant;
 
-  const [expandedId, setExpandedId] = React.useState<ExpandedId>('flat');
+  const modifierInputStyle: TextStyle = {
+    flex: 1,
+    color: inputColor,
+    fontSize: 14,
+    paddingVertical: 4,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: borderColor,
+  };
 
-  const onAccordionPress = (id: string | number) =>
-    setExpandedId(expandedId === id ? undefined : id);
+  const SWITCH_CONTROLS: { label: string; key: keyof DemoControls }[] = [
+    { label: 'Error', key: 'error' },
+    { label: 'Disabled', key: 'disabled' },
+    { label: 'Readonly', key: 'readOnly' },
+    { label: 'Leading icon', key: 'leadingIcon' },
+    { label: 'Trailing icon', key: 'trailingIcon' },
+    { label: 'Counter', key: 'counter' },
+    { label: 'Prefix', key: 'showPrefix' },
+    { label: 'Suffix', key: 'showSuffix' },
+    { label: 'Multiline', key: 'multiline' },
+  ];
+
+  const MODIFIER_FIELDS: { label: string; key: keyof DemoModifiers }[] = [
+    { label: 'Label', key: 'label' },
+    { label: 'Helper', key: 'helperText' },
+    { label: 'Placeholder', key: 'placeholder' },
+    { label: 'Prefix', key: 'prefix' },
+    { label: 'Suffix', key: 'suffix' },
+  ];
 
   return (
-    <TextInputAvoidingView>
-      <ScreenWrapper
-        keyboardShouldPersistTaps={'always'}
-        removeClippedSubviews={false}
-      >
-        <List.AccordionGroup
-          expandedId={expandedId}
-          onAccordionPress={onAccordionPress}
-        >
-          <List.Accordion title="Flat inputs" id="flat">
-            <TextInput
-              style={styles.inputContainerStyle}
-              label="Flat input"
-              placeholder="Type something"
-              value={text}
-              onChangeText={(text) => inputActionHandler('text', text)}
-              left={
-                <TextInput.Icon
-                  icon="magnify"
-                  color={flatLeftIcon}
-                  onPress={() => {
-                    changeIconColor('flatLeftIcon');
-                  }}
-                />
-              }
-              maxLength={100}
-              right={<TextInput.Affix text={`${text.length}/100`} />}
-            />
-            <TextInput
-              style={styles.inputContainerStyle}
-              label="Flat input with custom icon"
-              placeholder="Type something"
-              value={customIconText}
-              onChangeText={(text) =>
-                inputActionHandler('customIconText', text)
-              }
-              maxLength={100}
-              right={<TextInput.Affix text={`${customIconText.length}/100`} />}
-              left={
-                <TextInput.Icon
-                  icon={() => (
-                    <Icon
-                      name="home"
-                      size={24}
-                      color={customIcon}
-                      onPress={() => {
-                        changeIconColor('customIcon');
-                      }}
-                    />
-                  )}
-                />
-              }
-            />
-            <TextInput
-              style={[styles.inputContainerStyle, styles.fontSize]}
-              label="Flat input large font"
-              placeholder="Type something"
-              value={largeText}
-              onChangeText={(largeText) =>
-                inputActionHandler('largeText', largeText)
-              }
-              left={<TextInput.Affix text="#" />}
-              right={
-                <TextInput.Icon
-                  icon="magnify"
-                  color={flatRightIcon}
-                  onPress={() => {
-                    changeIconColor('flatRightIcon');
-                  }}
-                />
-              }
-            />
-            <TextInput
-              style={[styles.inputContainerStyle, styles.fontSize]}
-              label="Flat input large font"
-              placeholder="Type something"
-              value={flatTextPassword}
-              onChangeText={(flatTextPassword) =>
-                inputActionHandler('flatTextPassword', flatTextPassword)
-              }
-              secureTextEntry={flatTextSecureEntry}
-              right={
-                <TextInput.Icon
-                  icon={flatTextSecureEntry ? 'eye' : 'eye-off'}
-                  onPress={() =>
-                    dispatch({
-                      type: 'flatTextSecureEntry',
-                      payload: !flatTextSecureEntry,
-                    })
-                  }
-                  forceTextInputFocus={false}
-                />
-              }
-            />
-            <TextInput
-              style={[
-                styles.inputContainerStyle,
-                styles.fixedHeight,
-                styles.autoText,
-              ]}
-              label="Flat input long text"
-              placeholder="Type something"
-              value={flatLongText}
-              onChangeText={(flatLongText) =>
-                inputActionHandler('flatLongText', flatLongText)
-              }
-            />
-          </List.Accordion>
-          <List.Accordion title="Outlined inputs" id="outlined">
-            <TextInput
-              mode="outlined"
-              style={styles.inputContainerStyle}
-              label="Outlined input"
-              placeholder="Type something"
-              value={outlinedText}
-              onChangeText={(outlinedText) =>
-                inputActionHandler('outlinedText', outlinedText)
-              }
-              left={
-                <TextInput.Icon
-                  icon="magnify"
-                  color={outlineLeftIcon}
-                  onPress={() => {
-                    changeIconColor('outlineLeftIcon');
-                  }}
-                />
-              }
-              maxLength={100}
-              right={<TextInput.Affix text={`${outlinedText.length}/100`} />}
-            />
-            <TextInput
-              mode="outlined"
-              style={[styles.inputContainerStyle, styles.fontSize]}
-              label="Outlined large font"
-              placeholder="Type something"
-              value={outlinedLargeText}
-              onChangeText={(outlinedLargeText) =>
-                inputActionHandler('outlinedLargeText', outlinedLargeText)
-              }
-              left={<TextInput.Affix text="$" />}
-              right={
-                <TextInput.Icon
-                  icon="magnify"
-                  color={outlineRightIcon}
-                  onPress={() => {
-                    changeIconColor('outlineRightIcon');
-                  }}
-                />
-              }
-            />
-            <TextInput
-              mode="outlined"
-              style={[styles.inputContainerStyle, styles.fontSize]}
-              label={<Text style={styles.inputLabelText}>Custom label</Text>}
-              placeholder="Type something"
-              value={outlinedCustomLabel}
-              onChangeText={(outlinedCustomLabel) =>
-                inputActionHandler('outlinedCustomLabel', outlinedCustomLabel)
-              }
-            />
-            <TextInput
-              mode="outlined"
-              style={[styles.inputContainerStyle, styles.fontSize]}
-              label="Outlined large font"
-              placeholder="Type something"
-              value={outlinedTextPassword}
-              onChangeText={(outlinedTextPassword) =>
-                inputActionHandler('outlinedTextPassword', outlinedTextPassword)
-              }
-              secureTextEntry={outlineTextSecureEntry}
-              right={
-                <TextInput.Icon
-                  icon={outlineTextSecureEntry ? 'eye' : 'eye-off'}
-                  onPress={() =>
-                    dispatch({
-                      type: 'outlineTextSecureEntry',
-                      payload: !outlineTextSecureEntry,
-                    })
-                  }
-                />
-              }
-            />
-            <TextInput
-              mode="outlined"
-              style={[
-                styles.inputContainerStyle,
-                styles.fixedHeight,
-                styles.autoText,
-              ]}
-              label="Outlined input long text"
-              placeholder="Type something"
-              value={outlinedLongText}
-              onChangeText={(outlinedLongText) =>
-                inputActionHandler('outlinedLongText', outlinedLongText)
-              }
-            />
-          </List.Accordion>
-          <List.Accordion title="Disabled inputs" id="disabled">
-            <TextInput
-              disabled
-              style={styles.inputContainerStyle}
-              label="Disabled flat input"
-            />
-            <TextInput
-              disabled
-              style={styles.inputContainerStyle}
-              label="Disabled flat input with value"
-              value="Disabled flat input value"
-            />
-            <TextInput
-              style={styles.inputContainerStyle}
-              label="Flat input"
-              disabled
-              value="Disabled flat input with adornments"
-              left={
-                <TextInput.Icon
-                  icon="magnify"
-                  color={flatLeftIcon}
-                  onPress={() => {
-                    changeIconColor('flatLeftIcon');
-                  }}
-                />
-              }
-              right={<TextInput.Affix text="/100" />}
-            />
-            <TextInput
-              mode="outlined"
-              disabled
-              style={styles.inputContainerStyle}
-              label="Disabled outlined input"
-            />
-            <TextInput
-              mode="outlined"
-              disabled
-              style={styles.inputContainerStyle}
-              label="Disabled outlined input"
-              value="Disabled outlined input with value"
-            />
-            <TextInput
-              style={styles.inputContainerStyle}
-              label="Flat input"
-              disabled
-              mode="outlined"
-              value="Disabled flat input with adornments"
-              left={
-                <TextInput.Icon
-                  icon="magnify"
-                  color={flatLeftIcon}
-                  onPress={() => {
-                    changeIconColor('flatLeftIcon');
-                  }}
-                />
-              }
-              right={<TextInput.Affix text="/100" />}
-            />
-          </List.Accordion>
-          <List.Accordion title="Dense inputs" id="dense">
-            <TextInput
-              style={styles.inputContainerStyle}
-              dense
-              label="Dense flat input"
-              placeholder="Type something"
-              value={flatDenseText}
-              onChangeText={(flatDenseText) =>
-                inputActionHandler('flatDenseText', flatDenseText)
-              }
-              left={<TextInput.Affix text="#" />}
-              right={
-                <TextInput.Icon
-                  icon="chevron-up"
-                  color={(focused) =>
-                    focused ? theme.colors?.primary : undefined
-                  }
-                />
-              }
-            />
-            <TextInput
-              style={styles.inputContainerStyle}
-              dense
-              placeholder="Dense flat input without label"
-              value={flatDense}
-              onChangeText={(flatDense) =>
-                inputActionHandler('flatDense', flatDense)
-              }
-            />
-            <TextInput
-              mode="outlined"
-              style={styles.inputContainerStyle}
-              dense
-              label="Dense outlined input"
-              placeholder="Type something"
-              value={outlinedDenseText}
-              onChangeText={(outlinedDenseText) =>
-                inputActionHandler('outlinedDenseText', outlinedDenseText)
-              }
-              left={<TextInput.Affix text="$" />}
-            />
-            <TextInput
-              mode="outlined"
-              style={styles.inputContainerStyle}
-              dense
-              placeholder="Dense outlined input without label"
-              value={outlinedDense}
-              onChangeText={(outlinedDense) =>
-                inputActionHandler('outlinedDense', outlinedDense)
-              }
-            />
-          </List.Accordion>
-          <List.Accordion title="Multiline inputs" id="multiline">
-            <TextInput
-              style={styles.inputContainerStyle}
-              label="Flat input multiline"
-              multiline
-              placeholder="Type something"
-              value={flatMultiline}
-              onChangeText={(flatMultiline) =>
-                inputActionHandler('flatMultiline', flatMultiline)
-              }
-            />
-            <TextInput
-              style={[styles.inputContainerStyle, styles.textArea]}
-              label="Flat input text area"
-              multiline
-              placeholder="Type something"
-              value={flatTextArea}
-              onChangeText={(flatTextArea) =>
-                inputActionHandler('flatTextArea', flatTextArea)
-              }
-            />
-            <View style={styles.inputContainerStyle}>
-              <TextInput
-                mode="flat"
-                label="Flat multiline text input with fixed height"
-                multiline
-                style={styles.fixedHeight}
-              />
-            </View>
-            <TextInput
-              mode="outlined"
-              style={styles.inputContainerStyle}
-              label="Outlined input multiline"
-              multiline
-              placeholder="Type something"
-              value={outlinedMultiline}
-              onChangeText={(outlinedMultiline) =>
-                inputActionHandler('outlinedMultiline', outlinedMultiline)
-              }
-            />
-            <TextInput
-              mode="outlined"
-              style={[styles.inputContainerStyle, styles.textArea]}
-              label="Outlined input text area"
-              multiline
-              placeholder="Type something"
-              value={outlinedTextArea}
-              onChangeText={(outlinedTextArea) =>
-                inputActionHandler('outlinedTextArea', outlinedTextArea)
-              }
-            />
-            <View style={styles.inputContainerStyle}>
-              <TextInput
-                mode="outlined"
-                label="Outlined multiline text input with fixed height"
-                multiline
-                style={styles.fixedHeight}
-              />
-            </View>
-          </List.Accordion>
-          <List.Accordion title="Inputs with helpers" id="withAddons">
-            <View style={styles.inputContainerStyle}>
-              <TextInput
-                label="Input with helper text"
-                placeholder="Enter username, only letters"
-                value={name}
-                error={!_isUsernameValid(name)}
-                onChangeText={(name) => inputActionHandler('name', name)}
-              />
-              <HelperText type="error" visible={!_isUsernameValid(name)}>
-                Error: Only letters are allowed
-              </HelperText>
-            </View>
-            <View style={styles.inputContainerStyle}>
-              <TextInput
-                label="Input with helper text and character counter"
-                placeholder="Enter username, only letters"
-                value={maxLengthName}
-                error={!_isUsernameValid(maxLengthName)}
-                onChangeText={(maxLengthName) =>
-                  inputActionHandler('maxLengthName', maxLengthName)
-                }
-                maxLength={MAX_LENGTH}
-              />
-              <View style={styles.helpersWrapper}>
-                <HelperText
-                  type="error"
-                  visible={!_isUsernameValid(maxLengthName)}
-                  style={styles.helper}
-                >
-                  Error: Numbers and special characters are not allowed
-                </HelperText>
-                <HelperText type="info" visible style={styles.counterHelper}>
-                  {maxLengthName.length} / {MAX_LENGTH}
-                </HelperText>
-              </View>
-            </View>
-            <View style={styles.inputContainerStyle}>
-              <TextInput
-                label={
-                  <Text>
-                    <Text
-                      style={{
-                        color: theme.isV3
-                          ? MD3Colors.error50
-                          : MD2Colors.red500,
-                      }}
-                    >
-                      *
-                    </Text>{' '}
-                    Label as component
-                  </Text>
-                }
-                style={styles.noPaddingInput}
-                placeholder="Enter username, required"
-                value={nameRequired}
-                error={!nameRequired}
-                onChangeText={(nameRequired) =>
-                  inputActionHandler('nameRequired', nameRequired)
-                }
-              />
-              <HelperText type="error" padding="none" visible={!nameRequired}>
-                Error: Username is required
-              </HelperText>
-            </View>
-          </List.Accordion>
-          <List.Accordion title="Custom inputs" id="custom">
-            <TextInput
-              style={styles.inputContainerStyle}
-              label="Flat input with custom underline colors"
-              placeholder="Type something"
-              value={flatUnderlineColors}
-              onChangeText={(flatUnderlineColors) =>
-                inputActionHandler('flatUnderlineColors', flatUnderlineColors)
-              }
-              underlineColor={
-                theme.isV3 ? MD3Colors.primary70 : MD2Colors.pink400
-              }
-              activeUnderlineColor={
-                theme.isV3 ? MD3Colors.tertiary50 : MD2Colors.amber900
-              }
-            />
-            <TextInput
-              mode="outlined"
-              style={styles.inputContainerStyle}
-              label="Outlined input with custom outline colors"
-              placeholder="Type something"
-              value={outlinedColors}
-              onChangeText={(outlinedColors) =>
-                inputActionHandler('outlinedColors', outlinedColors)
-              }
-              outlineColor={
-                theme.isV3 ? MD3Colors.primary70 : MD2Colors.pink400
-              }
-              activeOutlineColor={
-                theme.isV3 ? MD3Colors.tertiary50 : MD2Colors.amber900
-              }
-            />
-            <TextInput
-              mode="outlined"
-              style={styles.inputContainerStyle}
-              label="Outlined with super long label which is truncating at some point"
-              placeholder="Type something"
-              onChangeText={(outlinedLongLabel) =>
-                inputActionHandler('outlinedLongLabel', outlinedLongLabel)
-              }
-            />
-
-            <TextInput
-              mode="flat"
-              style={styles.inputContainerStyle}
-              label="Custom style input"
-              placeholder="Input with custom style"
-              value={customStyleText}
-              onChangeText={(customStyleText) =>
-                inputActionHandler('customStyleText', customStyleText)
-              }
-              contentStyle={styles.inputContentStyle}
-            />
-
-            <View style={styles.inputContainerStyle}>
-              <TextInput
-                label="Input with no padding"
-                style={styles.noPaddingInput}
-                placeholder="Enter username, only letters"
-                value={nameNoPadding}
-                error={!_isUsernameValid(nameNoPadding)}
-                onChangeText={(nameNoPadding) =>
-                  inputActionHandler('nameNoPadding', nameNoPadding)
-                }
-              />
-              <HelperText
-                type="error"
-                padding="none"
-                visible={!_isUsernameValid(nameNoPadding)}
-              >
-                Error: Only letters are allowed
-              </HelperText>
-            </View>
+    <View style={styles.demoContainer}>
+      {/* Live TextInput */}
+      <TextInput
+        variant={variant}
+        label={modifiers.label || undefined}
+        placeholder={modifiers.placeholder || undefined}
+        supportingText={modifiers.helperText || undefined}
+        error={controls.error}
+        disabled={controls.disabled}
+        editable={!controls.readOnly}
+        value={value}
+        onChangeText={setValue}
+        multiline={controls.multiline}
+        counter={controls.counter}
+        maxLength={controls.counter ? 100 : undefined}
+        prefix={controls.showPrefix ? modifiers.prefix : undefined}
+        suffix={controls.showSuffix ? modifiers.suffix : undefined}
+        startAccessory={controls.leadingIcon ? leadingIcon : undefined}
+        endAccessory={controls.trailingIcon ? trailingIcon : undefined}
+      />
+
+      <Divider style={styles.divider} />
+
+      {/* Controls */}
+      <List.Subheader style={styles.subheader}>Controls</List.Subheader>
+      {SWITCH_CONTROLS.map(({ label, key }) => (
+        <TouchableRipple key={key} onPress={() => toggleControl(key)}>
+          <View style={styles.switchRow}>
+            <Text variant="bodyMedium">{label}</Text>
+            <View pointerEvents="none">
+              <Switch value={controls[key]} />
+            </View>
+          </View>
+        </TouchableRipple>
+      ))}
+
+      <Divider style={styles.divider} />
+
+      {/* Modifiers */}
+      <List.Subheader style={styles.subheader}>Modifiers</List.Subheader>
+      {MODIFIER_FIELDS.map(({ label, key }) => (
+        <View key={key} style={styles.modifierRow}>
+          <Text variant="bodyMedium" style={styles.modifierLabel}>
+            {label}
+          </Text>
+          <NativeTextInput
+            value={modifiers[key]}
+            onChangeText={(text) => setModifier(key, text)}
+            style={modifierInputStyle}
+            placeholderTextColor={theme.colors.outline}
+            placeholder={`Enter ${label.toLowerCase()}…`}
+          />
+        </View>
+      ))}
+    </View>
+  );
+};
 
-            <View style={styles.inputContainerStyle}>
-              <TextInput
-                label="Input with text align center"
-                style={styles.centeredText}
-                activeUnderlineColor="transparent"
-              />
-            </View>
-            <View style={styles.inputContainerStyle}>
-              <TextInput
-                mode="outlined"
-                label="Outlined input with text align center"
-                style={styles.centeredText}
-              />
-            </View>
-            <View style={styles.inputContainerStyle}>
-              <TextInput
-                mode="outlined"
-                theme={{
-                  roundness: 25,
-                }}
-                label="Outlined text input with custom roundness"
-              />
-            </View>
-            <View style={styles.inputContainerStyle}>
-              <TextInput
-                mode="outlined"
-                label="Outlined text input without roundness"
-                theme={{ roundness: 0 }}
-              />
-            </View>
-            <View style={styles.inputContainerStyle}>
-              <TextInput
-                mode="outlined"
-                label="Outlined text input with error"
-                error
-              />
-            </View>
-            <View style={styles.inputContainerStyle}>
-              <TextInput mode="outlined" placeholder="Outlined without label" />
-            </View>
-            <View style={styles.inputContainerStyle}>
-              <TextInput
-                mode="outlined"
-                label="Outlined input with custom cursor and selection colors"
-                selectionColor={'rgba(0,255,1,0.5)'}
-                cursorColor={'rgba(255,1,1,1)'}
-                placeholderTextColor={'rgba(255,0,125,1)'}
-                placeholder="Custom colors"
-              />
-            </View>
-            <View style={styles.inputContainerStyle}>
-              <TextInput
-                label="Flat input with custom cursor and selection colors"
-                selectionColor={'rgba(0,255,1,0.5)'}
-                cursorColor={'rgba(255,1,1,1)'}
-                placeholderTextColor={'rgba(255,0,125,1)'}
-                placeholder="Custom colors"
-              />
-            </View>
-            {fontsLoaded && theme.isV3 ? (
-              <View style={styles.inputContainerStyle}>
-                <TextInput
-                  mode="outlined"
-                  label="Text input with custom font"
-                  placeholder="Custom font"
-                  style={styles.fontSize}
-                  theme={{
-                    fonts: configureFonts({
-                      config: {
-                        fontFamily: 'Abel',
-                      },
-                    }),
-                  }}
-                />
-              </View>
-            ) : null}
-            <View style={styles.row}>
-              <TextInput
-                mode="outlined"
-                label="CVV"
-                placeholder="CVV"
-                keyboardType="phone-pad"
-                maxLength={3}
-              />
-            </View>
-            <View style={styles.row}>
-              <TextInput
-                mode="flat"
-                label="CVV"
-                placeholder="CVV"
-                keyboardType="phone-pad"
-                maxLength={3}
-              />
-            </View>
-            <View style={styles.row}>
-              <TextInput
-                mode="outlined"
-                label="Code"
-                placeholder="Code"
-                keyboardType="phone-pad"
-                maxLength={4}
-              />
-            </View>
-            <View style={styles.row}>
-              <TextInput
-                mode="flat"
-                label="Code"
-                placeholder="Code"
-                keyboardType="phone-pad"
-                maxLength={4}
-              />
-            </View>
-            <View style={styles.row}>
-              <TextInput
-                mode="flat"
-                label="Month"
-                placeholder="Month"
-                style={styles.month}
-              />
-              <TextInput
-                mode="flat"
-                label="Year"
-                placeholder="Year"
-                keyboardType="phone-pad"
-                style={styles.year}
-              />
-            </View>
-            <View style={styles.row}>
-              <View style={styles.left}>
-                <TextInput
-                  mode="flat"
-                  label="Month of the car registration (optional)"
-                  placeholder="Month"
-                  style={styles.month}
-                />
-              </View>
-              <View style={styles.right}>
-                <TextInput
-                  mode="flat"
-                  label="Year of the car registration (optional)"
-                  placeholder="Year"
-                  keyboardType="phone-pad"
-                  style={styles.year}
-                  left={<TextInput.Icon icon="calendar" />}
-                />
-              </View>
-            </View>
-            <View style={styles.row}>
-              <View style={styles.left}>
-                <TextInput
-                  mode="outlined"
-                  label="Month of the car registration (optional)"
-                  placeholder="Month"
-                  style={styles.month}
-                />
-              </View>
-              <View style={styles.right}>
-                <TextInput
-                  mode="outlined"
-                  label="Year of the car registration (optional)"
-                  placeholder="Year"
-                  keyboardType="phone-pad"
-                  style={styles.year}
-                  right={<TextInput.Icon icon="calendar" />}
-                />
-              </View>
-            </View>
-          </List.Accordion>
-        </List.AccordionGroup>
-      </ScreenWrapper>
-    </TextInputAvoidingView>
+const TextInputExample = () => {
+  return (
+    <ScreenWrapper contentContainerStyle={styles.container}>
+      <List.Section title="Filled">
+        <TextInputDemo variant="filled" />
+      </List.Section>
+      <List.Section title="Outlined">
+        <TextInputDemo variant="outlined" />
+      </List.Section>
+    </ScreenWrapper>
   );
 };
 
 TextInputExample.title = 'TextInput';
 
 const styles = StyleSheet.create({
-  helpersWrapper: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  wrapper: {
-    flex: 1,
-  },
-  helper: {
-    flexShrink: 1,
-  },
-  counterHelper: {
-    textAlign: 'right',
-  },
-  inputContainerStyle: {
-    margin: 8,
-  },
-  inputContentStyle: {
-    paddingLeft: 50,
-    fontWeight: 'bold',
-    fontStyle: 'italic',
-  },
-  fontSize: {
-    fontSize: 32,
-  },
-  textArea: {
-    height: 80,
-  },
-  // eslint-disable-next-line react-native/no-color-literals
-  noPaddingInput: {
-    backgroundColor: 'transparent',
+  container: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  } satisfies ViewStyle,
+  demoContainer: {
+    gap: 4,
+  } satisfies ViewStyle,
+  divider: {
+    marginVertical: 8,
+  } satisfies ViewStyle,
+  subheader: {
     paddingHorizontal: 0,
-  },
-  centeredText: {
-    textAlign: 'center',
-  },
-  fixedHeight: {
-    height: 100,
-  },
-  row: {
-    margin: 8,
+  } satisfies TextStyle,
+  switchRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
     justifyContent: 'space-between',
+    paddingVertical: 8,
+    paddingHorizontal: 8,
+  } satisfies ViewStyle,
+  modifierRow: {
     flexDirection: 'row',
-  },
-  month: {
-    flex: 1,
-    marginRight: 4,
-  },
-  year: {
-    flex: 1,
-    marginLeft: 4,
-  },
-  inputLabelText: {
-    color: MD3Colors.tertiary70,
-  },
-  left: {
-    width: '30%',
-  },
-  right: {
-    width: '70%',
-  },
-  autoText: {
-    textAlign: 'auto',
-  },
+    alignItems: 'center',
+    gap: 12,
+    paddingVertical: 8,
+    paddingHorizontal: 8,
+  } satisfies ViewStyle,
+  modifierLabel: {
+    width: 80,
+  } satisfies TextStyle,
 });
 
 export default TextInputExample;
diff --git a/example/src/Examples/ThemeExample.tsx b/example/src/Examples/ThemeExample.tsx
index c6729da4f5..eb838f5147 100644
--- a/example/src/Examples/ThemeExample.tsx
+++ b/example/src/Examples/ThemeExample.tsx
@@ -1,16 +1,13 @@
-import * as React from 'react';
 import { StyleSheet } from 'react-native';
 
-import type { StackNavigationProp } from '@react-navigation/stack';
+import { useNavigation } from '@react-navigation/native';
 import { List, PaperProvider, Banner } from 'react-native-paper';
 
 import ScreenWrapper from '../ScreenWrapper';
 
-type Props = {
-  navigation: StackNavigationProp<{ [key: string]: undefined }>;
-};
+const ThemeExample = () => {
+  const navigation = useNavigation('Theme');
 
-const ThemeExample = ({ navigation }: Props) => {
   return (
     <PaperProvider>
       <ScreenWrapper contentContainerStyle={styles.container}>
@@ -23,7 +20,7 @@ const ThemeExample = ({ navigation }: Props) => {
           <List.Item
             title="Themed Sport App"
             description="Go to the example"
-            onPress={() => navigation.navigate('teamsList')}
+            onPress={() => navigation.navigate('TeamsList')}
             right={(props) => <List.Icon {...props} icon="arrow-right" />}
           />
         </List.Section>
diff --git a/example/src/Examples/ThemingWithReactNavigation.tsx b/example/src/Examples/ThemingWithReactNavigation.tsx
index c4edf789ab..d18728415c 100644
--- a/example/src/Examples/ThemingWithReactNavigation.tsx
+++ b/example/src/Examples/ThemingWithReactNavigation.tsx
@@ -1,15 +1,15 @@
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, Platform } from 'react-native';
 
-import Icon from '@expo/vector-icons/MaterialCommunityIcons';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import Icon from '@react-native-vector-icons/material-design-icons';
+import {
+  createBottomTabNavigator,
+  createBottomTabScreen,
+  type BottomTabNavigationOptions,
+} from '@react-navigation/bottom-tabs';
 import { PlatformPressable } from '@react-navigation/elements';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { Text } from 'react-native-paper';
 
-const Stack = createStackNavigator();
-const Tab = createBottomTabNavigator();
-
 function HomeScreen() {
   return (
     <View style={styles.container}>
@@ -26,48 +26,63 @@ function SettingsScreen() {
   );
 }
 
-const HomeTab = () => {
-  return (
-    <Tab.Navigator
-      screenOptions={{
-        headerShown: false,
-        tabBarButton: (props) => (
-          <PlatformPressable
-            {...props}
-            android_ripple={{ color: 'transparent' }}
-          />
-        ),
-      }}
-    >
-      <Tab.Screen
-        name="Home"
-        component={HomeScreen}
-        options={{
-          tabBarIcon: ({ color, size }) => {
+const HomeTab = createBottomTabNavigator({
+  screenOptions: {
+    headerShown: false,
+    tabBarButton: (props) => (
+      <PlatformPressable {...props} android_ripple={{ color: 'transparent' }} />
+    ),
+  },
+  screens: {
+    ThemingHome: createBottomTabScreen({
+      screen: HomeScreen,
+      options: {
+        tabBarIcon: Platform.select<BottomTabNavigationOptions['tabBarIcon']>({
+          android: {
+            type: 'materialSymbol',
+            name: 'home',
+          },
+          ios: {
+            type: 'sfSymbol',
+            name: 'house',
+          },
+          default: ({ color, size }) => {
             return <Icon name="home" size={size} color={color} />;
           },
-        }}
-      />
-      <Tab.Screen
-        name="Settings"
-        component={SettingsScreen}
-        options={{
-          tabBarIcon: ({ color, size }) => {
+        }),
+      },
+    }),
+    ThemingSettings: createBottomTabScreen({
+      screen: SettingsScreen,
+      options: {
+        tabBarIcon: Platform.select<BottomTabNavigationOptions['tabBarIcon']>({
+          android: {
+            type: 'materialSymbol',
+            name: 'settings',
+          },
+          ios: {
+            type: 'sfSymbol',
+            name: 'gear',
+          },
+          default: ({ color, size }) => {
             return <Icon name="cog" size={size} color={color} />;
           },
-        }}
-      />
-    </Tab.Navigator>
-  );
-};
+        }),
+      },
+    }),
+  },
+});
 
-function ThemingWithReactNavigation() {
-  return (
-    <Stack.Navigator>
-      <Stack.Screen name="React Navigation" component={HomeTab} />
-    </Stack.Navigator>
-  );
-}
+const ThemingWithReactNavigation = Object.assign(
+  createNativeStackNavigator({
+    screens: {
+      'React Navigation': HomeTab,
+    },
+  }),
+  {
+    title: 'Theming With React Navigation',
+  }
+);
 
 const styles = StyleSheet.create({
   container: {
@@ -77,6 +92,4 @@ const styles = StyleSheet.create({
   },
 });
 
-ThemingWithReactNavigation.title = 'Theming With React Navigation';
-
 export default ThemingWithReactNavigation;
diff --git a/example/src/Examples/ToggleButtonExample.tsx b/example/src/Examples/ToggleButtonExample.tsx
deleted file mode 100644
index 1bd3724904..0000000000
--- a/example/src/Examples/ToggleButtonExample.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import * as React from 'react';
-import { View, StyleSheet, ImageBackground } from 'react-native';
-
-import { ToggleButton, List } from 'react-native-paper';
-
-import ScreenWrapper from '../ScreenWrapper';
-
-type StatusState = 'checked' | 'unchecked';
-type Fruits = 'watermelon' | 'strawberries';
-
-enum FontsEnum {
-  NoFormat = 'no-format',
-  Italic = 'italic',
-  Bold = 'bold',
-  Underline = 'underlined',
-  ColorText = 'format-color',
-}
-
-const ToggleButtonExample = () => {
-  const [first, setFirst] = React.useState('bold');
-  const [fruit, setFruit] = React.useState<Fruits>('watermelon');
-  const [status, setStatus] = React.useState<StatusState>('checked');
-  const [font, setFont] = React.useState<FontsEnum>(FontsEnum.NoFormat);
-
-  const handleFruit = (value: Fruits) => setFruit(value);
-
-  return (
-    <ScreenWrapper>
-      <List.Section title="Single">
-        <View style={styles.padding}>
-          <ToggleButton
-            icon="android"
-            value="android"
-            status={status}
-            onPress={() =>
-              setStatus(status === 'checked' ? 'unchecked' : 'checked')
-            }
-          />
-        </View>
-      </List.Section>
-      <List.Section title="Row">
-        <ToggleButton.Row
-          value={first}
-          onValueChange={(value: string) => setFirst(value)}
-          style={styles.padding}
-        >
-          <ToggleButton disabled icon="format-italic" value="italic" />
-          <ToggleButton icon="format-bold" value="bold" />
-          <ToggleButton icon="format-underline" value="underlined" />
-          <ToggleButton icon="format-color-text" value="format-color" />
-        </ToggleButton.Row>
-      </List.Section>
-      <List.Section title="Group & enums">
-        <View style={styles.padding}>
-          <ToggleButton.Group value={font} onValueChange={setFont}>
-            <ToggleButton
-              disabled
-              icon="format-italic"
-              value={FontsEnum.Italic}
-            />
-            <ToggleButton icon="format-bold" value={FontsEnum.Bold} />
-            <ToggleButton icon="format-underline" value={FontsEnum.Underline} />
-            <ToggleButton
-              icon="format-color-text"
-              value={FontsEnum.ColorText}
-            />
-          </ToggleButton.Group>
-        </View>
-      </List.Section>
-      <List.Section title="Custom & union types">
-        <View style={[styles.padding, styles.row]}>
-          <ToggleButton.Group value={fruit} onValueChange={handleFruit}>
-            <ImageBackground
-              style={styles.customImage}
-              source={{
-                uri: 'https://images.pexels.com/photos/5946081/pexels-photo-5946081.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
-              }}
-            >
-              <ToggleButton
-                value="watermelon"
-                size={24}
-                style={styles.customButton}
-                iconColor="white"
-                icon={fruit === 'watermelon' ? 'heart' : 'heart-outline'}
-              />
-            </ImageBackground>
-            <ImageBackground
-              style={styles.customImage}
-              source={{
-                uri: 'https://images.pexels.com/photos/46174/strawberries-berries-fruit-freshness-46174.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
-              }}
-            >
-              <ToggleButton
-                value="strawberries"
-                size={24}
-                style={styles.customButton}
-                iconColor="white"
-                icon={fruit === 'strawberries' ? 'heart' : 'heart-outline'}
-              />
-            </ImageBackground>
-          </ToggleButton.Group>
-        </View>
-      </List.Section>
-    </ScreenWrapper>
-  );
-};
-
-ToggleButtonExample.title = 'Toggle Button';
-
-const styles = StyleSheet.create({
-  padding: {
-    paddingHorizontal: 16,
-  },
-  row: {
-    flexDirection: 'row',
-  },
-  customImage: {
-    width: 143,
-    height: 153,
-    margin: 2,
-  },
-  customButton: {
-    position: 'absolute',
-    right: 0,
-  },
-});
-
-export default ToggleButtonExample;
diff --git a/example/src/Examples/TooltipExample.tsx b/example/src/Examples/TooltipExample.tsx
index 011d7c6692..4ecbdfe544 100644
--- a/example/src/Examples/TooltipExample.tsx
+++ b/example/src/Examples/TooltipExample.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Platform, StyleSheet, View, Image } from 'react-native';
 
-import type { StackNavigationProp } from '@react-navigation/stack';
+import { useNavigation } from '@react-navigation/native';
 import {
   Appbar,
   Avatar,
@@ -10,18 +10,12 @@ import {
   FAB,
   IconButton,
   List,
-  ToggleButton,
   Tooltip,
   Card,
 } from 'react-native-paper';
 
-import { isWeb } from '../../utils';
 import ScreenWrapper from '../ScreenWrapper';
 
-type Props = {
-  navigation: StackNavigationProp<{}>;
-};
-
 const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';
 
 const DURATION_MEDIUM = 1500;
@@ -41,8 +35,10 @@ const formOfTransport = [
   },
 ];
 
-const TooltipExample = ({ navigation }: Props) => {
-  const [textAlign, setTextAlign] = React.useState('bold');
+const TooltipExample = () => {
+  const navigation = useNavigation('TooltipExample');
+
+  const [textAlign, setTextAlign] = React.useState('left');
   React.useLayoutEffect(() => {
     navigation.setOptions({
       header: () => (
@@ -70,7 +66,7 @@ const TooltipExample = ({ navigation }: Props) => {
       <ScreenWrapper>
         <Banner visible>
           A tooltip is displayed upon
-          {!isWeb
+          {Platform.OS !== 'web'
             ? ' tapping and holding a screen element or component'
             : ' hovering over a screen element or component'}
           . Continuously display the tooltip as long as the user long-presses or
@@ -94,22 +90,34 @@ const TooltipExample = ({ navigation }: Props) => {
             ))}
           </View>
         </List.Section>
-        <List.Section title="Toggle Buttons">
-          <ToggleButton.Row
-            value={textAlign}
-            style={styles.toggleButtonRow}
-            onValueChange={setTextAlign}
-          >
+        <List.Section title="Icon toggles">
+          <View style={styles.toggleRow}>
             <Tooltip title="Align left">
-              <ToggleButton icon="format-align-left" value="left" />
+              <IconButton
+                icon="format-align-left"
+                mode="contained-tonal"
+                selected={textAlign === 'left'}
+                onPress={() => setTextAlign('left')}
+              />
             </Tooltip>
             <Tooltip title="Align center">
-              <ToggleButton icon="format-align-center" value="center" />
+              <IconButton
+                icon="format-align-center"
+                mode="contained-tonal"
+                selected={textAlign === 'center'}
+                onPress={() => setTextAlign('center')}
+              />
             </Tooltip>
             <Tooltip title="Align right">
-              <ToggleButton icon="format-align-right" value="right" disabled />
+              <IconButton
+                icon="format-align-right"
+                mode="contained-tonal"
+                selected={textAlign === 'right'}
+                disabled
+                onPress={() => setTextAlign('right')}
+              />
             </Tooltip>
-          </ToggleButton.Row>
+          </View>
         </List.Section>
         <List.Section title="Avatar">
           <View style={styles.avatarContainer}>
@@ -151,7 +159,7 @@ const TooltipExample = ({ navigation }: Props) => {
       </ScreenWrapper>
       <View style={styles.fabContainer}>
         <Tooltip title="Press Me">
-          <FAB size="medium" icon="plus" onPress={() => {}} />
+          <FAB icon="plus" onPress={() => {}} />
         </Tooltip>
       </View>
     </>
@@ -181,7 +189,8 @@ const styles = StyleSheet.create({
   cardContainer: {
     margin: 16,
   },
-  toggleButtonRow: {
+  toggleRow: {
+    flexDirection: 'row',
     paddingHorizontal: 16,
   },
   iconButtonContainer: {
diff --git a/example/src/Examples/TouchableRippleExample.tsx b/example/src/Examples/TouchableRippleExample.tsx
index 37d8c6c8c1..41d511cb4f 100644
--- a/example/src/Examples/TouchableRippleExample.tsx
+++ b/example/src/Examples/TouchableRippleExample.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 
 import { Text, TouchableRipple } from 'react-native-paper';
diff --git a/example/src/PreferencesContext.tsx b/example/src/PreferencesContext.tsx
index a048400f55..b5e381ae05 100644
--- a/example/src/PreferencesContext.tsx
+++ b/example/src/PreferencesContext.tsx
@@ -1,19 +1,18 @@
 import * as React from 'react';
 
-import { MD2Theme, MD3Theme } from 'react-native-paper';
+import type { Theme } from 'react-native-paper';
 
 export const PreferencesContext = React.createContext<{
   toggleTheme: () => void;
   toggleRtl: () => void;
-  toggleThemeVersion: () => void;
   toggleCollapsed: () => void;
   toggleCustomFont: () => void;
   toggleRippleEffect: () => void;
-  toggleShouldUseDeviceColors?: () => void;
-  theme: MD2Theme | MD3Theme;
+  toggleShouldUseDynamicTheme?: () => void;
+  theme: Theme;
   rtl: boolean;
   collapsed: boolean;
   customFontLoaded: boolean;
   rippleEffectEnabled: boolean;
-  shouldUseDeviceColors?: boolean;
+  shouldUseDynamicTheme?: boolean;
 } | null>(null);
diff --git a/example/src/RootNavigator.tsx b/example/src/RootNavigator.tsx
index dee716b5c5..95ea077275 100644
--- a/example/src/RootNavigator.tsx
+++ b/example/src/RootNavigator.tsx
@@ -1,70 +1,99 @@
-import * as React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 
-import type { DrawerNavigationProp } from '@react-navigation/drawer';
+import { useNavigation } from '@react-navigation/native';
 import {
-  CardStyleInterpolators,
-  createStackNavigator,
-} from '@react-navigation/stack';
+  createNativeStackNavigator,
+  createNativeStackScreen,
+  type NativeStackHeaderProps,
+} from '@react-navigation/native-stack';
 import { Appbar } from 'react-native-paper';
 
 import ExampleList, { examples } from './ExampleList';
+import { colorThemes } from '../utils';
 
-const Stack = createStackNavigator();
+const { TeamDetails, ...examplesWithoutParams } = examples;
+
+type ExampleRouteName = keyof typeof examplesWithoutParams;
+
+const fromEntries = <Key extends PropertyKey, Value>(
+  entries: Array<[Key, Value]>
+) =>
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+  Object.fromEntries(entries) as Record<Key, Value>;
+
+function Header({ navigation, route, options, back }: NativeStackHeaderProps) {
+  const drawerNavigation = useNavigation('Home');
 
-export default function Root() {
-  const cardStyleInterpolator =
-    Platform.OS === 'android'
-      ? CardStyleInterpolators.forFadeFromBottomAndroid
-      : CardStyleInterpolators.forHorizontalIOS;
   return (
-    <View style={styles.stackWrapper}>
-      <Stack.Navigator
-        screenOptions={() => ({
-          cardStyleInterpolator,
-          header: ({ navigation, route, options, back }) => (
-            <Appbar.Header elevated>
-              {back ? (
-                <Appbar.BackAction onPress={() => navigation.goBack()} />
-              ) : (navigation as any).openDrawer ? (
-                <Appbar.Action
-                  icon="menu"
-                  isLeading
-                  onPress={() =>
-                    (navigation as any as DrawerNavigationProp<{}>).openDrawer()
-                  }
-                />
-              ) : null}
-              <Appbar.Content title={options.title || route.name} />
-            </Appbar.Header>
-          ),
-        })}
-      >
-        <Stack.Screen
-          name="ExampleList"
-          component={ExampleList}
-          options={{
-            title: 'Examples',
-          }}
+    <Appbar.Header elevated>
+      {back ? (
+        <Appbar.BackAction onPress={() => navigation.goBack()} />
+      ) : (
+        <Appbar.Action
+          icon="menu"
+          isLeading
+          onPress={() => drawerNavigation.openDrawer()}
         />
-        {(Object.keys(examples) as Array<keyof typeof examples>).map((id) => {
-          return (
-            <Stack.Screen
-              key={id}
-              name={id}
-              component={examples[id]}
-              options={{
-                title: examples[id].title,
-                headerShown: id !== 'themingWithReactNavigation',
-              }}
-            />
-          );
-        })}
-      </Stack.Navigator>
-    </View>
+      )}
+      <Appbar.Content title={options.title || route.name} />
+    </Appbar.Header>
   );
 }
 
+const Root = createNativeStackNavigator({
+  layout: ({ children }) => <View style={styles.stackWrapper}>{children}</View>,
+  screenOptions: {
+    header: (props) => <Header {...props} />,
+  },
+  screens: {
+    ExampleList: createNativeStackScreen({
+      screen: ExampleList,
+      options: {
+        title: 'Examples',
+      },
+      linking: '',
+    }),
+    /* eslint-disable @typescript-eslint/no-unsafe-type-assertion */
+    ...fromEntries(
+      (
+        Object.entries(examplesWithoutParams) as [
+          ExampleRouteName,
+          (typeof examplesWithoutParams)[ExampleRouteName],
+        ][]
+      ).map(([id, screen]) => [
+        id,
+        createNativeStackScreen({
+          screen: screen,
+          options: {
+            title: screen.title,
+            headerShown: id !== 'ThemingWithReactNavigation',
+          },
+        }),
+      ])
+    ),
+    /* eslint-enable @typescript-eslint/no-unsafe-type-assertion */
+    TeamDetails: createNativeStackScreen({
+      screen: TeamDetails,
+      options: {
+        title: TeamDetails.title,
+      },
+      linking: {
+        path: 'team-details/:sourceColor?/:headerTitle?/:darkMode?',
+        parse: {
+          sourceColor: (value) =>
+            value in colorThemes
+              ? // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+                (value as keyof typeof colorThemes)
+              : 'paper',
+          darkMode: (value) => value === 'true',
+        },
+      },
+    }),
+  },
+});
+
+export default Root;
+
 const styles = StyleSheet.create({
   stackWrapper: {
     flex: 1,
diff --git a/example/src/ScreenWrapper.tsx b/example/src/ScreenWrapper.tsx
index eee3b5f58d..a551da31b0 100644
--- a/example/src/ScreenWrapper.tsx
+++ b/example/src/ScreenWrapper.tsx
@@ -1,17 +1,10 @@
 import * as React from 'react';
-import {
-  ScrollView,
-  ScrollViewProps,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
+import { ScrollView, StyleSheet, View } from 'react-native';
+import type { ScrollViewProps, StyleProp, ViewStyle } from 'react-native';
 
+import { useTheme } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { useExampleTheme } from './hooks/useExampleTheme';
-
 type Props = ScrollViewProps & {
   children: React.ReactNode;
   withScrollView?: boolean;
@@ -26,7 +19,7 @@ export default function ScreenWrapper({
   contentContainerStyle,
   ...rest
 }: Props) {
-  const theme = useExampleTheme();
+  const theme = useTheme();
 
   const insets = useSafeAreaInsets();
 
diff --git a/example/src/hooks/useExampleTheme.ts b/example/src/hooks/useExampleTheme.ts
deleted file mode 100644
index 9196f044b0..0000000000
--- a/example/src/hooks/useExampleTheme.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { MD2Theme, MD3Theme, useTheme } from 'react-native-paper';
-
-export const useExampleTheme = () => useTheme<MD2Theme | MD3Theme>();
diff --git a/example/src/index.native.tsx b/example/src/index.native.tsx
deleted file mode 100644
index 0878a1f13b..0000000000
--- a/example/src/index.native.tsx
+++ /dev/null
@@ -1,221 +0,0 @@
-import * as React from 'react';
-import { I18nManager } from 'react-native';
-
-import { useMaterial3Theme } from '@pchmn/expo-material3-theme';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { createDrawerNavigator } from '@react-navigation/drawer';
-import { InitialState, NavigationContainer } from '@react-navigation/native';
-import { useFonts } from 'expo-font';
-import { useKeepAwake } from 'expo-keep-awake';
-import { StatusBar } from 'expo-status-bar';
-import * as Updates from 'expo-updates';
-import {
-  PaperProvider,
-  MD2DarkTheme,
-  MD2LightTheme,
-  MD3DarkTheme,
-  MD3LightTheme,
-} from 'react-native-paper';
-import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
-
-import DrawerItems from './DrawerItems';
-import App from './RootNavigator';
-import { deviceColorsSupported } from '../utils';
-import { PreferencesContext } from './PreferencesContext';
-import {
-  CombinedDefaultTheme,
-  CombinedDarkTheme,
-  createConfiguredFontTheme,
-  createConfiguredFontNavigationTheme,
-} from '../utils/themes';
-
-const PERSISTENCE_KEY = 'NAVIGATION_STATE';
-const PREFERENCES_KEY = 'APP_PREFERENCES';
-
-const Drawer = createDrawerNavigator<{ Home: undefined }>();
-
-export default function PaperExample() {
-  useKeepAwake();
-
-  const [fontsLoaded] = useFonts({
-    Abel: require('../assets/fonts/Abel-Regular.ttf'),
-  });
-
-  const [isReady, setIsReady] = React.useState(false);
-  const [initialState, setInitialState] = React.useState<
-    InitialState | undefined
-  >();
-
-  const [shouldUseDeviceColors, setShouldUseDeviceColors] =
-    React.useState(true);
-  const [isDarkMode, setIsDarkMode] = React.useState(false);
-  const [themeVersion, setThemeVersion] = React.useState<2 | 3>(3);
-  const [rtl, setRtl] = React.useState<boolean>(
-    I18nManager.getConstants().isRTL
-  );
-  const [collapsed, setCollapsed] = React.useState(false);
-  const [customFontLoaded, setCustomFont] = React.useState(false);
-  const [rippleEffectEnabled, setRippleEffectEnabled] = React.useState(true);
-
-  const { theme: mdTheme } = useMaterial3Theme();
-  const theme = React.useMemo(() => {
-    if (themeVersion === 2) {
-      return isDarkMode ? MD2DarkTheme : MD2LightTheme;
-    }
-
-    if (!deviceColorsSupported || !shouldUseDeviceColors) {
-      return isDarkMode ? MD3DarkTheme : MD3LightTheme;
-    }
-
-    return isDarkMode
-      ? { ...MD3DarkTheme, colors: mdTheme.dark }
-      : { ...MD3LightTheme, colors: mdTheme.light };
-  }, [isDarkMode, mdTheme, shouldUseDeviceColors, themeVersion]);
-
-  React.useEffect(() => {
-    const restoreState = async () => {
-      try {
-        const savedStateString = await AsyncStorage.getItem(PERSISTENCE_KEY);
-        const state = JSON.parse(savedStateString || '');
-
-        setInitialState(state);
-      } catch (e) {
-        // ignore error
-      } finally {
-        setIsReady(true);
-      }
-    };
-
-    if (!isReady) {
-      restoreState();
-    }
-  }, [isReady]);
-
-  React.useEffect(() => {
-    const restorePrefs = async () => {
-      try {
-        const prefString = await AsyncStorage.getItem(PREFERENCES_KEY);
-        const preferences = JSON.parse(prefString || '');
-
-        if (preferences) {
-          setIsDarkMode(preferences.theme === 'dark');
-
-          if (typeof preferences.rtl === 'boolean') {
-            setRtl(preferences.rtl);
-          }
-        }
-      } catch (e) {
-        // ignore error
-      }
-    };
-
-    restorePrefs();
-  }, []);
-
-  React.useEffect(() => {
-    const savePrefs = async () => {
-      try {
-        await AsyncStorage.setItem(
-          PREFERENCES_KEY,
-          JSON.stringify({
-            theme: isDarkMode ? 'dark' : 'light',
-            rtl,
-          })
-        );
-      } catch (e) {
-        // ignore error
-      }
-
-      if (I18nManager.getConstants().isRTL !== rtl) {
-        I18nManager.forceRTL(rtl);
-        Updates.reloadAsync();
-      }
-    };
-
-    savePrefs();
-  }, [rtl, isDarkMode]);
-
-  const preferences = React.useMemo(
-    () => ({
-      toggleShouldUseDeviceColors: () =>
-        setShouldUseDeviceColors((oldValue) => !oldValue),
-      toggleTheme: () => setIsDarkMode((oldValue) => !oldValue),
-      toggleRtl: () => setRtl((rtl) => !rtl),
-      toggleCollapsed: () => setCollapsed(!collapsed),
-      toggleCustomFont: () => setCustomFont(!customFontLoaded),
-      toggleRippleEffect: () => setRippleEffectEnabled(!rippleEffectEnabled),
-      toggleThemeVersion: () => {
-        setCustomFont(false);
-        setCollapsed(false);
-        setThemeVersion((oldThemeVersion) => (oldThemeVersion === 2 ? 3 : 2));
-        setRippleEffectEnabled(true);
-      },
-      customFontLoaded,
-      rippleEffectEnabled,
-      collapsed,
-      rtl,
-      theme,
-      shouldUseDeviceColors,
-    }),
-    [
-      rtl,
-      theme,
-      collapsed,
-      customFontLoaded,
-      shouldUseDeviceColors,
-      rippleEffectEnabled,
-    ]
-  );
-
-  if (!isReady && !fontsLoaded) {
-    return null;
-  }
-
-  const combinedTheme = isDarkMode ? CombinedDarkTheme : CombinedDefaultTheme;
-  const configuredFontTheme = createConfiguredFontTheme(combinedTheme);
-  const configuredFontNavigationTheme =
-    createConfiguredFontNavigationTheme(combinedTheme);
-
-  return (
-    <PaperProvider
-      settings={{ rippleEffectEnabled: preferences.rippleEffectEnabled }}
-      theme={customFontLoaded ? configuredFontTheme : theme}
-    >
-      <PreferencesContext.Provider value={preferences}>
-        <NavigationContainer
-          theme={
-            customFontLoaded ? configuredFontNavigationTheme : combinedTheme
-          }
-          initialState={initialState}
-          onStateChange={(state) =>
-            AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))
-          }
-        >
-          <SafeAreaInsetsContext.Consumer>
-            {(insets) => {
-              const { left, right } = insets || { left: 0, right: 0 };
-              const collapsedDrawerWidth = 100 + Math.max(left, right);
-              return (
-                <Drawer.Navigator
-                  screenOptions={{
-                    drawerStyle: collapsed && {
-                      width: collapsedDrawerWidth,
-                    },
-                  }}
-                  drawerContent={() => <DrawerItems />}
-                >
-                  <Drawer.Screen
-                    name="Home"
-                    component={App}
-                    options={{ headerShown: false }}
-                  />
-                </Drawer.Navigator>
-              );
-            }}
-          </SafeAreaInsetsContext.Consumer>
-          <StatusBar style={!theme.isV3 || theme.dark ? 'light' : 'dark'} />
-        </NavigationContainer>
-      </PreferencesContext.Provider>
-    </PaperProvider>
-  );
-}
diff --git a/example/src/index.tsx b/example/src/index.tsx
index 76607763f1..afa3941044 100644
--- a/example/src/index.tsx
+++ b/example/src/index.tsx
@@ -1,22 +1,30 @@
 import * as React from 'react';
+import { I18nManager, Platform } from 'react-native';
 
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { createDrawerNavigator } from '@react-navigation/drawer';
-import { InitialState, NavigationContainer } from '@react-navigation/native';
+import {
+  createDrawerNavigator,
+  createDrawerScreen,
+} from '@react-navigation/drawer';
+import { createStaticNavigation } from '@react-navigation/native';
 import { useFonts } from 'expo-font';
 import { useKeepAwake } from 'expo-keep-awake';
+import * as SplashScreen from 'expo-splash-screen';
+import { StatusBar } from 'expo-status-bar';
+import * as Updates from 'expo-updates';
 import {
   PaperProvider,
-  MD3DarkTheme,
-  MD3LightTheme,
-  MD2DarkTheme,
-  MD2LightTheme,
+  DarkTheme,
+  LightTheme,
+  DynamicLightTheme,
+  DynamicDarkTheme,
 } from 'react-native-paper';
-import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import DrawerItems from './DrawerItems';
 import { PreferencesContext } from './PreferencesContext';
 import App from './RootNavigator';
+import { dynamicThemeSupported } from '../utils';
 import {
   CombinedDarkTheme,
   CombinedDefaultTheme,
@@ -26,9 +34,53 @@ import {
 
 const PERSISTENCE_KEY = 'NAVIGATION_STATE';
 const PREFERENCES_KEY = 'APP_PREFERENCES';
-const noop = () => {};
 
-const Drawer = createDrawerNavigator<{ Home: undefined }>();
+const getInitialRtl = () => {
+  if (Platform.OS === 'web' && typeof document !== 'undefined') {
+    return document.documentElement.dir === 'rtl';
+  }
+
+  return I18nManager.getConstants().isRTL;
+};
+
+const Drawer = createDrawerNavigator({
+  screens: {
+    Home: createDrawerScreen({
+      screen: App,
+      options: {
+        headerShown: false,
+      },
+      linking: {
+        path: '',
+        initialRouteName: 'ExampleList',
+      },
+    }),
+  },
+}).with(({ Navigator }) => {
+  const preferences = React.useContext(PreferencesContext);
+  const insets = useSafeAreaInsets();
+  const { left, right } = insets || { left: 0, right: 0 };
+  const collapsedDrawerWidth = 100 + Math.max(left, right);
+
+  return (
+    <Navigator
+      screenOptions={{
+        drawerStyle: preferences?.collapsed && {
+          width: collapsedDrawerWidth,
+        },
+      }}
+      drawerContent={() => <DrawerItems />}
+    />
+  );
+});
+
+const Navigation = createStaticNavigation(Drawer);
+
+type RootDrawerType = typeof Drawer;
+
+declare module '@react-navigation/core' {
+  interface RootNavigator extends RootDrawerType {}
+}
 
 export default function PaperExample() {
   useKeepAwake();
@@ -38,42 +90,25 @@ export default function PaperExample() {
   });
 
   const [isReady, setIsReady] = React.useState(false);
-  const [initialState, setInitialState] = React.useState<
-    InitialState | undefined
-  >();
 
+  const [shouldUseDynamicTheme, setShouldUseDynamicTheme] =
+    React.useState(true);
   const [isDarkMode, setIsDarkMode] = React.useState(false);
-  const [themeVersion, setThemeVersion] = React.useState<2 | 3>(3);
+  const [rtl, setRtl] = React.useState(getInitialRtl);
   const [collapsed, setCollapsed] = React.useState(false);
   const [customFontLoaded, setCustomFont] = React.useState(false);
   const [rippleEffectEnabled, setRippleEffectEnabled] = React.useState(true);
 
-  const theme = React.useMemo(() => {
-    if (themeVersion === 2) {
-      return isDarkMode ? MD2DarkTheme : MD2LightTheme;
-    }
-
-    return isDarkMode ? MD3DarkTheme : MD3LightTheme;
-  }, [isDarkMode, themeVersion]);
-
-  React.useEffect(() => {
-    const restoreState = async () => {
-      try {
-        const savedStateString = await AsyncStorage.getItem(PERSISTENCE_KEY);
-        const state = JSON.parse(savedStateString || '');
-
-        setInitialState(state);
-      } catch (e) {
-        // ignore error
-      } finally {
-        setIsReady(true);
-      }
-    };
+  const theme =
+    dynamicThemeSupported && shouldUseDynamicTheme
+      ? isDarkMode
+        ? DynamicDarkTheme
+        : DynamicLightTheme
+      : isDarkMode
+        ? DarkTheme
+        : LightTheme;
 
-    if (!isReady) {
-      restoreState();
-    }
-  }, [isReady]);
+  const direction = rtl ? 'rtl' : 'ltr';
 
   React.useEffect(() => {
     const restorePrefs = async () => {
@@ -83,58 +118,82 @@ export default function PaperExample() {
 
         if (preferences) {
           setIsDarkMode(preferences.theme === 'dark');
+
+          if (typeof preferences.rtl === 'boolean') {
+            setRtl(preferences.rtl);
+          }
         }
       } catch (e) {
         // ignore error
+      } finally {
+        setIsReady(true);
       }
     };
 
-    restorePrefs();
+    void restorePrefs();
   }, []);
 
   React.useEffect(() => {
     const savePrefs = async () => {
+      if (!isReady) {
+        return;
+      }
+
       try {
         await AsyncStorage.setItem(
           PREFERENCES_KEY,
           JSON.stringify({
             theme: isDarkMode ? 'dark' : 'light',
+            rtl,
           })
         );
       } catch (e) {
         // ignore error
       }
+
+      if (Platform.OS === 'web' && typeof document !== 'undefined') {
+        document.documentElement.dir = direction;
+      }
+
+      if (I18nManager.getConstants().isRTL !== rtl) {
+        I18nManager.forceRTL(rtl);
+
+        if (Platform.OS !== 'web') {
+          await Updates.reloadAsync();
+        }
+      }
     };
 
-    savePrefs();
-  }, [isDarkMode]);
+    void savePrefs();
+  }, [direction, isDarkMode, isReady, rtl]);
 
   const preferences = React.useMemo(
     () => ({
+      toggleShouldUseDynamicTheme: () =>
+        setShouldUseDynamicTheme((oldValue) => !oldValue),
       toggleTheme: () => setIsDarkMode((oldValue) => !oldValue),
-      toggleThemeVersion: () => {
-        setCustomFont(false);
-        setCollapsed(false);
-        setThemeVersion((oldThemeVersion) => (oldThemeVersion === 2 ? 3 : 2));
-        setRippleEffectEnabled(true);
-      },
-      toggleCollapsed: () => setCollapsed(!collapsed),
-      toggleCustomFont: () => setCustomFont(!customFontLoaded),
-      toggleRippleEffect: () => setRippleEffectEnabled(!rippleEffectEnabled),
+      toggleRtl: () => setRtl((oldValue) => !oldValue),
+      toggleCollapsed: () => setCollapsed((oldValue) => !oldValue),
+      toggleCustomFont: () => setCustomFont((oldValue) => !oldValue),
+      toggleRippleEffect: () => setRippleEffectEnabled((oldValue) => !oldValue),
+      customFontLoaded,
+      rippleEffectEnabled,
+      shouldUseDynamicTheme,
+      theme,
+      collapsed,
+      rtl,
+    }),
+    [
+      rtl,
       theme,
       collapsed,
       customFontLoaded,
+      shouldUseDynamicTheme,
       rippleEffectEnabled,
-      // noop for web, specified to avoid type errors
-      toggleRtl: noop,
-      toggleShouldUseDeviceColors: noop,
-      rtl: false,
-      shouldUseDeviceColors: false,
-    }),
-    [theme, collapsed, customFontLoaded, rippleEffectEnabled]
+    ]
   );
 
-  if (!isReady && !fontsLoaded) {
+  if (!isReady || !fontsLoaded) {
     return null;
   }
 
@@ -142,45 +201,41 @@ export default function PaperExample() {
   const configuredFontTheme = createConfiguredFontTheme(combinedTheme);
   const configuredFontNavigationTheme =
     createConfiguredFontNavigationTheme(combinedTheme);
+  const paperTheme = customFontLoaded ? configuredFontTheme : theme;
+  const navigationTheme = customFontLoaded
+    ? configuredFontNavigationTheme
+    : combinedTheme;
 
   return (
     <PaperProvider
+      direction={direction}
       settings={{ rippleEffectEnabled: preferences.rippleEffectEnabled }}
-      theme={customFontLoaded ? configuredFontTheme : theme}
+      theme={paperTheme}
     >
       <PreferencesContext.Provider value={preferences}>
-        <NavigationContainer
-          theme={
-            customFontLoaded ? configuredFontNavigationTheme : combinedTheme
-          }
-          initialState={initialState}
-          onStateChange={(state) =>
-            AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))
-          }
-        >
-          <SafeAreaInsetsContext.Consumer>
-            {(insets) => {
-              const { left, right } = insets || { left: 0, right: 0 };
-              const collapsedDrawerWidth = 100 + Math.max(left, right);
-              return (
-                <Drawer.Navigator
-                  screenOptions={{
-                    drawerStyle: collapsed && {
-                      width: collapsedDrawerWidth,
-                    },
-                  }}
-                  drawerContent={() => <DrawerItems />}
-                >
-                  <Drawer.Screen
-                    name="Home"
-                    component={App}
-                    options={{ headerShown: false }}
-                  />
-                </Drawer.Navigator>
+        <Navigation
+          theme={navigationTheme}
+          direction={direction}
+          persistor={{
+            async persist(state) {
+              await AsyncStorage.setItem(
+                PERSISTENCE_KEY,
+                JSON.stringify(state)
               );
-            }}
-          </SafeAreaInsetsContext.Consumer>
-        </NavigationContainer>
+            },
+            async restore() {
+              const state = await AsyncStorage.getItem(PERSISTENCE_KEY);
+
+              return state ? JSON.parse(state) : undefined;
+            },
+          }}
+          onReady={() => {
+            void SplashScreen.hideAsync();
+          }}
+        />
+        {Platform.OS !== 'web' ? (
+          <StatusBar style={theme.dark ? 'light' : 'dark'} />
+        ) : null}
       </PreferencesContext.Provider>
     </PaperProvider>
   );
diff --git a/example/tsconfig.json b/example/tsconfig.json
index 6bf072c662..e07e1cd93d 100644
--- a/example/tsconfig.json
+++ b/example/tsconfig.json
@@ -1,3 +1,4 @@
 {
   "extends": "../tsconfig",
-}
\ No newline at end of file
+  "include": ["**/*.ts", "**/*.tsx"]
+}
diff --git a/example/utils/index.ts b/example/utils/index.ts
index 5c15917644..f8c9675e41 100644
--- a/example/utils/index.ts
+++ b/example/utils/index.ts
@@ -1,7 +1,7 @@
 import { Platform } from 'react-native';
 
-import ExpoMaterial3ThemeModule from '@pchmn/expo-material3-theme/build/ExpoMaterial3ThemeModule';
-import { MD3DarkTheme, MD3LightTheme, MD3Theme } from 'react-native-paper';
+import { DarkTheme, LightTheme } from 'react-native-paper';
+import type { Theme } from 'react-native-paper';
 
 type ReducerAction<T extends keyof State> = {
   payload: State[T];
@@ -60,8 +60,6 @@ export function inputReducer<T extends keyof State>(
   }
 }
 
-export const isWeb = Platform.OS === 'web';
-
 export const animatedFABExampleData = [
   {
     id: '1',
@@ -1156,80 +1154,80 @@ const darkCyanColors = {
 
 export const colorThemes = {
   paper: {
-    light: MD3LightTheme,
-    dark: MD3DarkTheme,
+    light: LightTheme,
+    dark: DarkTheme,
   },
   pink: {
     light: {
-      ...MD3LightTheme,
-      ...lightPinkColors,
+      ...LightTheme,
+      colors: { ...LightTheme.colors, ...lightPinkColors.colors },
     },
     dark: {
-      ...MD3DarkTheme,
-      ...darkPinkColors,
+      ...DarkTheme,
+      colors: { ...DarkTheme.colors, ...darkPinkColors.colors },
     },
   },
   green: {
     light: {
-      ...MD3LightTheme,
-      ...lightGreenColors,
+      ...LightTheme,
+      colors: { ...LightTheme.colors, ...lightGreenColors.colors },
     },
     dark: {
-      ...MD3DarkTheme,
-      ...darkGreenColors,
+      ...DarkTheme,
+      colors: { ...DarkTheme.colors, ...darkGreenColors.colors },
     },
   },
   blue: {
     light: {
-      ...MD3LightTheme,
-      ...lightBlueColors,
+      ...LightTheme,
+      colors: { ...LightTheme.colors, ...lightBlueColors.colors },
     },
     dark: {
-      ...MD3DarkTheme,
-      ...darkBlueColors,
+      ...DarkTheme,
+      colors: { ...DarkTheme.colors, ...darkBlueColors.colors },
     },
   },
   orange: {
     light: {
-      ...MD3LightTheme,
-      ...lightOrangeColors,
+      ...LightTheme,
+      colors: { ...LightTheme.colors, ...lightOrangeColors.colors },
     },
     dark: {
-      ...MD3DarkTheme,
-      ...darkOrangeColors,
+      ...DarkTheme,
+      colors: { ...DarkTheme.colors, ...darkOrangeColors.colors },
     },
   },
   red: {
     light: {
-      ...MD3LightTheme,
-      ...lightRedColors,
+      ...LightTheme,
+      colors: { ...LightTheme.colors, ...lightRedColors.colors },
     },
     dark: {
-      ...MD3DarkTheme,
-      ...darkRedColors,
+      ...DarkTheme,
+      colors: { ...DarkTheme.colors, ...darkRedColors.colors },
     },
   },
   yellow: {
     light: {
-      ...MD3LightTheme,
-      ...lightYellowColors,
+      ...LightTheme,
+      colors: { ...LightTheme.colors, ...lightYellowColors.colors },
     },
     dark: {
-      ...MD3DarkTheme,
-      ...darkYellowColors,
+      ...DarkTheme,
+      colors: { ...DarkTheme.colors, ...darkYellowColors.colors },
     },
   },
   cyan: {
     light: {
-      ...MD3LightTheme,
-      ...lightCyanColors,
+      ...LightTheme,
+      colors: { ...LightTheme.colors, ...lightCyanColors.colors },
     },
     dark: {
-      ...MD3DarkTheme,
-      ...darkCyanColors,
+      ...DarkTheme,
+      colors: { ...DarkTheme.colors, ...darkCyanColors.colors },
     },
   },
-} as { [key: string]: { light: MD3Theme; dark: MD3Theme } };
+} satisfies Record<string, { light: Theme; dark: Theme }>;
 
 export const songsData = [
   {
@@ -1420,7 +1418,7 @@ export const restaurantsData = [
   },
 ];
 
-export const deviceColorsSupported =
-  Boolean(ExpoMaterial3ThemeModule) &&
+export const dynamicThemeSupported =
   Platform.OS === 'android' &&
+  typeof Platform.Version === 'number' &&
   Platform.Version >= 31;
diff --git a/example/utils/themes.ts b/example/utils/themes.ts
index 85e4bb4f81..22fda309e7 100644
--- a/example/utils/themes.ts
+++ b/example/utils/themes.ts
@@ -2,47 +2,50 @@ import {
   DarkTheme as NavigationDarkTheme,
   DefaultTheme as NavigationDefaultTheme,
 } from '@react-navigation/native';
+import type { Theme as ReactNavigationTheme } from '@react-navigation/native';
 import {
   adaptNavigationTheme,
-  MD3DarkTheme,
-  MD3LightTheme,
+  DarkTheme,
+  LightTheme,
   configureFonts,
 } from 'react-native-paper';
+import type { Theme } from 'react-native-paper';
 
-const { LightTheme, DarkTheme } = adaptNavigationTheme({
-  reactNavigationLight: NavigationDefaultTheme,
-  reactNavigationDark: NavigationDarkTheme,
-});
+const { LightTheme: NavLightTheme, DarkTheme: NavDarkTheme } =
+  adaptNavigationTheme({
+    reactNavigationLight: NavigationDefaultTheme,
+    reactNavigationDark: NavigationDarkTheme,
+  });
 
 export const CombinedDefaultTheme = {
-  ...MD3LightTheme,
   ...LightTheme,
+  ...NavLightTheme,
   colors: {
-    ...MD3LightTheme.colors,
     ...LightTheme.colors,
+    ...NavLightTheme.colors,
   },
   fonts: {
-    ...MD3LightTheme.fonts,
     ...LightTheme.fonts,
+    ...NavLightTheme.fonts,
   },
 };
 
 export const CombinedDarkTheme = {
-  ...MD3DarkTheme,
   ...DarkTheme,
+  ...NavDarkTheme,
   colors: {
-    ...MD3DarkTheme.colors,
     ...DarkTheme.colors,
+    ...NavDarkTheme.colors,
   },
   fonts: {
-    ...MD3DarkTheme.fonts,
     ...DarkTheme.fonts,
+    ...NavDarkTheme.fonts,
   },
 };
 
-type CombinedTheme = typeof CombinedDefaultTheme;
-
-export const createConfiguredFontTheme = (theme: CombinedTheme) => ({
+export const createConfiguredFontTheme = (
+  theme: Theme & ReactNavigationTheme
+) => ({
   ...theme,
   fonts: configureFonts({
     config: {
@@ -51,7 +54,9 @@ export const createConfiguredFontTheme = (theme: CombinedTheme) => ({
   }),
 });
 
-export const createConfiguredFontNavigationTheme = (theme: CombinedTheme) => ({
+export const createConfiguredFontNavigationTheme = (
+  theme: Theme & ReactNavigationTheme
+) => ({
   ...theme,
   fonts: {
     ...theme.fonts,
diff --git a/example/webpack.config.js b/example/webpack.config.js
deleted file mode 100644
index 55676a7a2d..0000000000
--- a/example/webpack.config.js
+++ /dev/null
@@ -1,49 +0,0 @@
-const createExpoWebpackConfigAsync = require('@expo/webpack-config');
-const path = require('path');
-
-const { resolver } = require('./metro.config');
-
-const root = path.resolve(__dirname, '..');
-const node_modules = path.join(__dirname, 'node_modules');
-
-module.exports = async function (env, argv) {
-  const config = await createExpoWebpackConfigAsync(env, argv);
-
-  config.entry = path.join(__dirname, 'index.js');
-
-  config.module.rules.push(
-    {
-      test: /\.(js|ts|tsx)$/,
-      include: path.resolve(root, 'src'),
-      use: 'babel-loader',
-    },
-    {
-      test: /\.ttf$/,
-      loader: 'url-loader', // or directly file-loader
-      include: path.resolve(
-        __dirname,
-        'node_modules/@react-native-vector-icons'
-      ),
-    }
-  );
-
-  config.ignoreWarnings = [
-    {
-      module: /Overlay\.js/,
-    },
-    () => true,
-  ];
-
-  // We need to make sure that only one version is loaded for peerDependencies
-  // So we alias them to the versions in example's node_modules
-  Object.assign(config.resolve.alias, {
-    ...resolver.extraNodeModules,
-    crypto: require.resolve('expo-crypto'), //Fixes issue with crypto not being found on web
-    'react-native-web': path.join(node_modules, 'react-native-web'),
-    '@react-native-vector-icons/material-design-icons': require.resolve(
-      '@expo/vector-icons/MaterialCommunityIcons'
-    ),
-  });
-
-  return config;
-};
diff --git a/jest/jestSetupAfterEnv.js b/jest/jestSetupAfterEnv.js
new file mode 100644
index 0000000000..ee9e70fc5f
--- /dev/null
+++ b/jest/jestSetupAfterEnv.js
@@ -0,0 +1,3 @@
+import { setUpTests } from 'react-native-reanimated';
+
+setUpTests();
diff --git a/jest/reanimatedSnapshotSerializer.js b/jest/reanimatedSnapshotSerializer.js
new file mode 100644
index 0000000000..0d20dec218
--- /dev/null
+++ b/jest/reanimatedSnapshotSerializer.js
@@ -0,0 +1,27 @@
+const reanimatedTestProps = new Set([
+  'jestAnimatedProps',
+  'jestAnimatedStyle',
+  'jestInlineStyle',
+]);
+
+module.exports = {
+  test(value) {
+    return (
+      value !== null &&
+      typeof value === 'object' &&
+      value.props !== null &&
+      typeof value.props === 'object' &&
+      Object.keys(value.props).some((prop) => reanimatedTestProps.has(prop))
+    );
+  },
+  print(value, serialize) {
+    return serialize({
+      ...value,
+      props: Object.fromEntries(
+        Object.entries(value.props).filter(
+          ([prop]) => !reanimatedTestProps.has(prop)
+        )
+      ),
+    });
+  },
+};
diff --git a/testSetup.js b/jest/testSetup.js
similarity index 93%
rename from testSetup.js
rename to jest/testSetup.js
index 43346ff860..1033126c45 100644
--- a/testSetup.js
+++ b/jest/testSetup.js
@@ -4,23 +4,25 @@ jest.useFakeTimers();
 
 jest.mock('react-native-safe-area-context', () => mockSafeAreaContext);
 
+jest.mock('react-native-worklets', () => ({
+  ...require('react-native-worklets/lib/module/mock'),
+  isUIRuntime: () => false,
+}));
+
 jest.mock('@react-native-vector-icons/material-design-icons', () => {
   const React = require('react');
   const { Text } = require('react-native');
 
   const MockIcon = ({ name, color, size, style, ...props }) => {
     return (
-      <Text 
-        style={[{ color, fontSize: size }, style]} 
-        {...props}
-      >
+      <Text style={[{ color, fontSize: size }, style]} {...props}>
         {name || '□'}
       </Text>
     );
   };
 
   MockIcon.displayName = 'MockedMaterialDesignIcon';
-  
+
   return {
     __esModule: true,
     default: MockIcon,
@@ -128,4 +130,4 @@ jest.mock('react-native/Libraries/Utilities/BackHandler', () => {
       },
     },
   };
-});
\ No newline at end of file
+});
diff --git a/lefthook.yml b/lefthook.yml
new file mode 100644
index 0000000000..ab4ecdb2f7
--- /dev/null
+++ b/lefthook.yml
@@ -0,0 +1,17 @@
+commit-msg:
+  jobs:
+    - name: commitlint
+      run: yarn commitlint --edit {1}
+
+pre-commit:
+  parallel: true
+  commands:
+    lint:
+      glob: '*.{js,mjs,ts,tsx}'
+      run: yarn lint {staged_files}
+    typecheck:
+      glob: '*.{json,js,mjs,ts,tsx}'
+      run: yarn typecheck
+    test:
+      glob: '*.{json,js,mjs,ts,tsx}'
+      run: yarn test
diff --git a/package.json b/package.json
index fbf4482041..1e095a3829 100644
--- a/package.json
+++ b/package.json
@@ -1,16 +1,13 @@
 {
   "name": "react-native-paper",
-  "version": "5.15.1",
+  "version": "6.0.0-alpha.1",
   "description": "Material design for React Native",
-  "main": "lib/commonjs/index.js",
-  "module": "lib/module/index.js",
-  "react-native": "src/index.tsx",
-  "source": "src/index.tsx",
-  "types": "lib/typescript/index.d.ts",
+  "main": "lib/module/index.js",
+  "react-native-paper-source": "src/index.tsx",
+  "types": "lib/typescript/src/index.d.ts",
   "files": [
     "src",
     "lib",
-    "react-navigation",
     "babel.js"
   ],
   "sideEffects": false,
@@ -38,11 +35,11 @@
     "docs"
   ],
   "scripts": {
-    "typescript": "tsc --noEmit",
-    "lint": "yarn lint-no-fix --fix",
-    "lint-no-fix": "eslint --ext '.js,.ts,.tsx' .",
+    "lint": "eslint",
+    "typecheck": "tsc -b",
     "test": "jest",
-    "prepack": "bob build && node ./scripts/generate-mappings.js",
+    "prepack": "bob build",
+    "generate-mappings": "node ./scripts/generate-mappings.ts",
     "release": "release-it",
     "docs": "yarn --cwd docs",
     "example": "yarn --cwd example"
@@ -53,73 +50,70 @@
   "dependencies": {
     "@callstack/react-theme-provider": "^3.0.9",
     "color": "^3.1.2",
+    "fast-deep-equal": "^3.1.3",
     "use-latest-callback": "^0.2.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
+    "@babel/core": "^7.29.0",
+    "@babel/parser": "^7.29.0",
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-    "@babel/runtime": "^7.25.0",
-    "@callstack/eslint-config": "^13.0.2",
+    "@babel/types": "^7.29.0",
+    "@callstack/eslint-config": "^15.0.0",
     "@commitlint/config-conventional": "^8.3.4",
+    "@eslint/js": "9.39.4",
+    "@jest/globals": "^29.7.0",
     "@react-native-vector-icons/material-design-icons": "^12.0.0",
-    "@react-native/babel-preset": "^0.82.1",
-    "@react-navigation/native": "^6.1.2",
+    "@react-native/babel-preset": "^0.85.3",
+    "@react-native/jest-preset": "^0.85.3",
+    "@react-navigation/native": "^8.0.0-alpha.28",
     "@release-it/conventional-changelog": "^1.1.0",
-    "@testing-library/jest-native": "^5.4.1",
-    "@testing-library/react-native": "11.5.0",
+    "@testing-library/react-native": "^14.0.0",
     "@types/color": "^3.0.0",
-    "@types/jest": "^29.2.1",
-    "@types/node": "^13.1.0",
-    "@types/react-dom": "^19.1.1",
-    "@types/react-native-vector-icons": "^6.4.18",
-    "@types/react-test-renderer": "^19.1.0",
-    "@typescript-eslint/eslint-plugin": "^5.41.0",
-    "@typescript-eslint/parser": "^5.41.0",
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.2.7",
     "all-contributors-cli": "^6.24.0",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^29.6.3",
-    "babel-loader": "^8.2.3",
     "babel-test": "^0.1.1",
-    "chalk": "^4.0.0",
     "commitlint": "^8.3.4",
-    "conventional-changelog-cli": "^2.0.11",
-    "dedent": "^0.7.0",
-    "eslint": "8.31.0",
+    "eslint": "9.39.4",
     "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-local-rules": "^1.3.2",
-    "glob": "^7.1.3",
-    "husky": "^1.3.1",
+    "eslint-plugin-testing-library": "^7.16.2",
     "jest": "^29.6.3",
     "jest-file-snapshot": "^0.3.2",
-    "react": "19.1.1",
-    "react-dom": "18.3.1",
-    "react-native": "0.82.1",
-    "react-native-builder-bob": "^0.21.3",
-    "react-native-safe-area-context": "5.5.2",
-    "react-test-renderer": "19.1.1",
+    "lefthook": "^2.1.9",
+    "prettier": "^3.8.4",
+    "react": "19.2.3",
+    "react-native": "0.85.3",
+    "react-native-builder-bob": "^0.42.1",
+    "react-native-reanimated": "4.3.1",
+    "react-native-safe-area-context": "5.7.0",
+    "react-native-worklets": "0.8.3",
     "release-it": "^13.4.0",
-    "rimraf": "^3.0.2",
-    "typescript": "5.8.3"
+    "test-renderer": "1.2.0",
+    "typescript": "5.8.3",
+    "typescript-eslint": "^8.61.1"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-safe-area-context": "*"
+    "react-native-reanimated": ">=4.3.0",
+    "react-native-safe-area-context": "*",
+    "react-native-worklets": ">=0.8.1"
   },
-  "husky": {
-    "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
-      "pre-commit": "yarn lint-no-fix && yarn typescript && yarn test"
-    }
+  "resolutions": {
+    "ast-types": "0.16.1"
   },
   "jest": {
-    "preset": "react-native",
+    "preset": "@react-native/jest-preset",
     "setupFiles": [
-      "<rootDir>/testSetup.js"
+      "<rootDir>/jest/testSetup.js"
     ],
     "setupFilesAfterEnv": [
-      "@testing-library/jest-native/extend-expect"
+      "<rootDir>/jest/jestSetupAfterEnv.js",
+      "@testing-library/react-native"
+    ],
+    "snapshotSerializers": [
+      "<rootDir>/jest/reanimatedSnapshotSerializer.js"
     ],
     "cacheDirectory": "./cache/jest",
     "testPathIgnorePatterns": [
@@ -133,7 +127,7 @@
       "__fixtures__\\/[^/]+\\/(output|error)\\.js"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!(@react-navigation|@react-native|react-native(-.*)?)/)"
+      "node_modules/(?!(@react-native|react-native|@react-navigation|react-native-reanimated|react-native-worklets|react-native-safe-area-context|nanoid|query-string|decode-uri-component|filter-obj|split-on-first|escape-string-regexp)/)"
     ]
   },
   "greenkeeper": {
@@ -142,10 +136,7 @@
       "react",
       "react-dom",
       "react-native",
-      "react-test-renderer",
       "@types/react-native",
-      "@types/jest",
-      "husky",
       "eslint"
     ]
   },
@@ -153,13 +144,19 @@
     "source": "src",
     "output": "lib",
     "targets": [
-      "commonjs",
       "module",
       [
         "typescript",
         {
           "project": "tsconfig.build.json"
         }
+      ],
+      [
+        "custom",
+        {
+          "script": "generate-mappings",
+          "clean": "lib/mappings.json"
+        }
       ]
     ]
   },
diff --git a/react-navigation/package.json b/react-navigation/package.json
deleted file mode 100644
index e21ec26893..0000000000
--- a/react-navigation/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "main": "../lib/commonjs/react-navigation/index",
-  "module": "../lib/module/react-navigation/index",
-  "react-native": "../src/react-navigation/index",
-  "types": "../lib/typescript/react-navigation/index"
-}
diff --git a/scripts/generate-mappings.js b/scripts/generate-mappings.js
deleted file mode 100644
index 1403826af4..0000000000
--- a/scripts/generate-mappings.js
+++ /dev/null
@@ -1,64 +0,0 @@
-const parser = require('@babel/parser');
-const types = require('babel-types');
-const fs = require('fs');
-const path = require('path');
-
-const packageJson = require('../package.json');
-const root = path.resolve(__dirname, '..');
-const output = path.join(root, 'lib/mappings.json');
-const source = fs.readFileSync(path.resolve(root, 'src', 'index.tsx'), 'utf8');
-const ast = parser.parse(source, {
-  sourceType: 'module',
-  plugins: [
-    'jsx',
-    'typescript',
-    'objectRestSpread',
-    'classProperties',
-    'asyncGenerators',
-  ],
-});
-
-const index = packageJson.module;
-const relative = (value /* : string */) =>
-  path.relative(root, path.resolve(path.dirname(index), value));
-
-const mappings = ast.program.body.reduce((acc, declaration, index, self) => {
-  if (types.isExportNamedDeclaration(declaration)) {
-    if (declaration.source) {
-      declaration.specifiers.forEach((specifier) => {
-        acc[specifier.exported.name] = {
-          path: relative(declaration.source.value),
-          name: specifier.local.name,
-        };
-      });
-    } else {
-      declaration.specifiers.forEach((specifier) => {
-        const name = specifier.exported.name;
-
-        self.forEach((it) => {
-          if (
-            types.isImportDeclaration(it) &&
-            it.specifiers.some(
-              (s) =>
-                types.isImportNamespaceSpecifier(s) &&
-                s.local.name === specifier.local.name
-            )
-          ) {
-            acc[name] = {
-              path: relative(it.source.value),
-              name: '*',
-            };
-          }
-        });
-      });
-    }
-  }
-
-  return acc;
-}, {});
-
-fs.existsSync(path.dirname(output)) || fs.mkdirSync(path.dirname(output));
-fs.writeFileSync(
-  output,
-  JSON.stringify({ name: packageJson.name, index, mappings }, null, 2)
-);
diff --git a/scripts/generate-mappings.ts b/scripts/generate-mappings.ts
new file mode 100644
index 0000000000..7919c2f7b0
--- /dev/null
+++ b/scripts/generate-mappings.ts
@@ -0,0 +1,120 @@
+import { parse } from '@babel/parser';
+import * as types from '@babel/types';
+import type { Identifier, StringLiteral } from '@babel/types';
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import {
+  dirname,
+  join,
+  relative as relativePath,
+  resolve,
+  sep,
+} from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+type PackageJson = {
+  name: string;
+  main: string;
+};
+
+type Mapping = {
+  path: string;
+  name: string;
+};
+
+const isRecord = (value: unknown): value is { [key: string]: unknown } =>
+  typeof value === 'object' && value !== null;
+
+const readPackageJson = (path: string): PackageJson => {
+  const packageJson: unknown = JSON.parse(readFileSync(path, 'utf8'));
+
+  if (
+    !isRecord(packageJson) ||
+    typeof packageJson.name !== 'string' ||
+    typeof packageJson.main !== 'string'
+  ) {
+    throw new Error(`Unable to read package name and main from ${path}`);
+  }
+
+  return {
+    name: packageJson.name,
+    main: packageJson.main,
+  };
+};
+
+const getName = (node: Identifier | StringLiteral) =>
+  types.isIdentifier(node) ? node.name : node.value;
+
+const scriptDir = dirname(fileURLToPath(import.meta.url));
+const root = resolve(scriptDir, '..');
+const packageJson = readPackageJson(resolve(root, 'package.json'));
+const output = join(root, 'lib/mappings.json');
+const source = readFileSync(resolve(root, 'src', 'index.tsx'), 'utf8');
+const ast = parse(source, {
+  sourceType: 'module',
+  plugins: ['jsx', 'typescript'],
+});
+
+const index = packageJson.main;
+
+const relative = (value: string) =>
+  relativePath(root, resolve(root, dirname(index), value))
+    .split(sep)
+    .join('/');
+
+const mappings = ast.program.body.reduce<{ [key: string]: Mapping }>(
+  (acc, declaration, _index, self) => {
+    if (types.isExportNamedDeclaration(declaration)) {
+      const declarationSource = declaration.source;
+
+      if (declarationSource) {
+        declaration.specifiers.forEach((specifier) => {
+          if (!types.isExportSpecifier(specifier)) {
+            return;
+          }
+
+          acc[getName(specifier.exported)] = {
+            path: relative(declarationSource.value),
+            name: getName(specifier.local),
+          };
+        });
+      } else {
+        declaration.specifiers.forEach((specifier) => {
+          if (!types.isExportSpecifier(specifier)) {
+            return;
+          }
+
+          const name = getName(specifier.exported);
+          const localName = getName(specifier.local);
+
+          self.forEach((it) => {
+            if (
+              types.isImportDeclaration(it) &&
+              it.specifiers.some(
+                (s) =>
+                  types.isImportNamespaceSpecifier(s) &&
+                  s.local.name === localName
+              )
+            ) {
+              acc[name] = {
+                path: relative(it.source.value),
+                name: '*',
+              };
+            }
+          });
+        });
+      }
+    }
+
+    return acc;
+  },
+  {}
+);
+
+if (!existsSync(dirname(output))) {
+  mkdirSync(dirname(output));
+}
+
+writeFileSync(
+  output,
+  JSON.stringify({ name: packageJson.name, index, mappings }, null, 2)
+);
diff --git a/scripts/generate-ts-tests.js b/scripts/generate-ts-tests.js
deleted file mode 100644
index f0e5ef98be..0000000000
--- a/scripts/generate-ts-tests.js
+++ /dev/null
@@ -1,51 +0,0 @@
-const { readFileSync, writeFileSync, mkdirSync } = require('fs');
-const glob = require('glob');
-const path = require('path');
-const rimraf = require('rimraf');
-
-const SOURCE_FILES_PATTERN = './src/**/*.js';
-const DESTINATION_DIR = './__ts-tests__';
-const EXAMPLE_REGEX = /(## Usage\n \* ```js)([\S\s]*?)(```)/g;
-const JS_EXT = '.js';
-const TS_TEST_EXT = '.test.tsx';
-
-const transformContent = (content) =>
-  content
-    .replace("'react-native-paper'", "'..'")
-    .split('\n')
-    .map((e) => e.slice(3))
-    .join('\n');
-
-const getFiles = () =>
-  glob
-    .sync(SOURCE_FILES_PATTERN)
-    .map((filePath) => {
-      const content = readFileSync(filePath, 'utf-8');
-      const match = EXAMPLE_REGEX.exec(content);
-      // JS regexp is stateful, you need to reset lastIndex each time
-      EXAMPLE_REGEX.lastIndex = 0;
-      return match
-        ? {
-            path: filePath,
-            content: transformContent(match[2]),
-          }
-        : null;
-    })
-    .filter(Boolean);
-
-const writeFiles = (files) => {
-  mkdirSync(DESTINATION_DIR);
-
-  files.forEach((f) =>
-    writeFileSync(
-      path.join(
-        DESTINATION_DIR,
-        `${path.basename(f.path, JS_EXT)}${TS_TEST_EXT}`
-      ),
-      f.content
-    )
-  );
-};
-
-rimraf.sync(DESTINATION_DIR);
-writeFiles(getFiles());
diff --git a/scripts/generate-ts-tests.ts b/scripts/generate-ts-tests.ts
new file mode 100644
index 0000000000..2223cc7386
--- /dev/null
+++ b/scripts/generate-ts-tests.ts
@@ -0,0 +1,67 @@
+import {
+  mkdirSync,
+  readdirSync,
+  readFileSync,
+  rmSync,
+  writeFileSync,
+} from 'node:fs';
+import { basename, join } from 'node:path';
+
+type SourceFile = {
+  path: string;
+  content: string;
+};
+
+const SOURCE_DIR = './src';
+const DESTINATION_DIR = './__ts-tests__';
+const EXAMPLE_REGEX = /(## Usage\n \* ```js)([\S\s]*?)(```)/g;
+const JS_EXT = '.js';
+const TS_TEST_EXT = '.test.tsx';
+
+const transformContent = (content: string) =>
+  content
+    .replace("'react-native-paper'", "'..'")
+    .split('\n')
+    .map((e) => e.slice(3))
+    .join('\n');
+
+const getSourceFiles = (directory: string): string[] =>
+  readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const filePath = join(directory, entry.name);
+
+    if (entry.isDirectory()) {
+      return getSourceFiles(filePath);
+    }
+
+    return entry.isFile() && filePath.endsWith(JS_EXT) ? [filePath] : [];
+  });
+
+const getFiles = () =>
+  getSourceFiles(SOURCE_DIR)
+    .map((filePath) => {
+      const content = readFileSync(filePath, 'utf-8');
+      const match = EXAMPLE_REGEX.exec(content);
+      // JS regexp is stateful, you need to reset lastIndex each time
+      EXAMPLE_REGEX.lastIndex = 0;
+      return match
+        ? {
+            path: filePath,
+            content: transformContent(match[2]),
+          }
+        : null;
+    })
+    .filter((file): file is SourceFile => file !== null);
+
+const writeFiles = (files: SourceFile[]) => {
+  mkdirSync(DESTINATION_DIR);
+
+  files.forEach((f) =>
+    writeFileSync(
+      join(DESTINATION_DIR, `${basename(f.path, JS_EXT)}${TS_TEST_EXT}`),
+      f.content
+    )
+  );
+};
+
+rmSync(DESTINATION_DIR, { recursive: true, force: true });
+writeFiles(getFiles());
diff --git a/scripts/package.json b/scripts/package.json
new file mode 100644
index 0000000000..3dbc1ca591
--- /dev/null
+++ b/scripts/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/scripts/typescript-output-lint.js b/scripts/typescript-output-lint.js
deleted file mode 100644
index 16eacdf249..0000000000
--- a/scripts/typescript-output-lint.js
+++ /dev/null
@@ -1,109 +0,0 @@
-const { promises: fs } = require('fs');
-const path = require('path');
-
-const root = path.resolve(__dirname, '..');
-const output = path.join(root, 'lib', 'typescript');
-
-/**
- * List of React Native props not used by React Native Paper.
- * Feel free to delete props from this list when
- * React Native Paper has defined/uses one with the same name.
- * This script was originally created to detect if TypeScript
- * has exported a large union of props from ViewProps.
- * More info: https://github.com/callstack/react-native-paper/pull/3603
- */
-const unusedViewProps = [
-  'nativeID',
-  'accessibilityActions',
-  'accessibilityValue',
-  'onAccessibilityAction',
-  'accessibilityLabelledBy',
-  'accessibilityLiveRegion',
-  'accessibilityLanguage',
-  'accessibilityViewIsModal',
-  'onAccessibilityEscape',
-  'onAccessibilityTap',
-  'onMagicTap',
-  'accessibilityIgnoresInvertColors',
-  'removeClippedSubviews',
-  'collapsable',
-  'needsOffscreenAlphaCompositing',
-  'renderToHardwareTextureAndroid',
-  'shouldRasterizeIOS',
-  'isTVSelectable',
-  'hasTVPreferredFocus',
-  'tvParallaxProperties',
-  'tvParallaxShiftDistanceX',
-  'tvParallaxShiftDistanceY',
-  'tvParallaxTiltAngle',
-  'tvParallaxMagnification',
-  'onStartShouldSetResponder',
-  'onMoveShouldSetResponder',
-  'onResponderEnd',
-  'onResponderGrant',
-  'onResponderReject',
-  'onResponderMove',
-  'onResponderRelease',
-  'onResponderStart',
-  'onResponderTerminationRequest',
-  'onResponderTerminate',
-  'onStartShouldSetResponderCapture',
-  'onMoveShouldSetResponderCapture',
-  'onTouchStart',
-  'onTouchMove',
-  'onTouchEnd',
-  'onTouchCancel',
-  'onTouchEndCapture',
-  'onPointerEnter',
-  'onPointerEnterCapture',
-  'onPointerLeave',
-  'onPointerLeaveCapture',
-  'onPointerMove',
-  'onPointerMoveCapture',
-  'onPointerCancel',
-  'onPointerCancelCapture',
-  'onPointerDown',
-  'onPointerDownCapture',
-  'onPointerUp',
-  'onPointerUpCapture',
-  'cancelable',
-  'delayHoverIn',
-  'delayHoverOut',
-  'pressRetentionOffset',
-  'android_disableSound',
-  'android_ripple',
-  'testOnly_pressed',
-  'unstable_pressDelay',
-];
-
-async function* getFiles(directory) {
-  const entries = await fs.readdir(directory, { withFileTypes: true });
-  for (const entry of entries) {
-    const res = path.resolve(directory, entry.name);
-    if (entry.isDirectory()) {
-      yield* getFiles(res);
-    } else {
-      yield res;
-    }
-  }
-}
-
-async function main() {
-  for await (const file of getFiles(output)) {
-    const content = await fs.readFile(file);
-    for (const prop of unusedViewProps) {
-      if (content.includes(prop)) {
-        throw new Error(
-          `Found text '${prop}' in '${file}'. Please use the wrapped 'forwardRef' in 'src/utils/forwardRef.ts', export some return types, or modify 'scripts/typescript-output-lint.js'`
-        );
-      }
-    }
-  }
-
-  console.log('✅ No React Native props mentioned in TypeScript files');
-}
-
-main().catch((reason) => {
-  console.error(reason);
-  process.exit(1);
-});
diff --git a/src/babel/.eslintrc b/src/babel/.eslintrc
deleted file mode 100644
index 1aad9bfc83..0000000000
--- a/src/babel/.eslintrc
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "rules": {
-    "no-unused-vars": "off",
-    "import/no-duplicates": "off",
-    "import/no-unresolved": "off",
-  }
-}
diff --git a/src/babel/__fixtures__/rewrite-imports/code.js b/src/babel/__fixtures__/rewrite-imports/code.js
index cc5e6d0b5c..f1253a5e08 100644
--- a/src/babel/__fixtures__/rewrite-imports/code.js
+++ b/src/babel/__fixtures__/rewrite-imports/code.js
@@ -5,11 +5,10 @@ import {
   Button,
   FAB,
   Appbar,
-  MD2Colors,
-  MD3Colors,
+  Palette,
   NonExistent,
   NonExistentSecond as Stuff,
   ThemeProvider,
   withTheme,
-  DefaultTheme,
+  LightTheme,
 } from 'react-native-paper';
diff --git a/src/babel/__fixtures__/rewrite-imports/output.js b/src/babel/__fixtures__/rewrite-imports/output.js
index ecaff8d814..bbe342ad0d 100644
--- a/src/babel/__fixtures__/rewrite-imports/output.js
+++ b/src/babel/__fixtures__/rewrite-imports/output.js
@@ -4,9 +4,7 @@ import BottomNavigation from "react-native-paper/lib/module/components/BottomNav
 import Button from "react-native-paper/lib/module/components/Button/Button";
 import FAB from "react-native-paper/lib/module/components/FAB";
 import Appbar from "react-native-paper/lib/module/components/Appbar";
-import * as MD2Colors from "react-native-paper/lib/module/styles/themes/v2/colors";
-import { MD3Colors } from "react-native-paper/lib/module/styles/themes/v3/tokens";
-import { NonExistent, NonExistentSecond as Stuff } from "react-native-paper/lib/module/index.js";
+import { Palette } from "react-native-paper/lib/module/theme/tokens";
+import { NonExistent, NonExistentSecond as Stuff, LightTheme } from "react-native-paper/lib/module/index.js";
 import { ThemeProvider } from "react-native-paper/lib/module/core/theming";
 import { withTheme } from "react-native-paper/lib/module/core/theming";
-import { DefaultTheme } from "react-native-paper/lib/module/core/theming";
diff --git a/src/babel/__tests__/index.js b/src/babel/__tests__/index.js
index 113788881f..159e2a5f71 100644
--- a/src/babel/__tests__/index.js
+++ b/src/babel/__tests__/index.js
@@ -1,3 +1,4 @@
+const { expect } = require('@jest/globals');
 const { create } = require('babel-test');
 const { spawnSync } = require('child_process');
 const { toMatchFile } = require('jest-file-snapshot');
@@ -6,7 +7,7 @@ const path = require('path');
 expect.extend({ toMatchFile });
 
 spawnSync('node', [
-  path.resolve(__dirname, '../../../scripts/generate-mappings.js'),
+  path.resolve(__dirname, '../../../scripts/generate-mappings.ts'),
 ]);
 
 const { fixtures } = create({
diff --git a/src/babel/index.js b/src/babel/index.js
index f93f07e01e..2fc478bacb 100644
--- a/src/babel/index.js
+++ b/src/babel/index.js
@@ -3,8 +3,9 @@ const SKIP = Symbol('SKIP');
 module.exports = function rewire(babel, options) {
   const t = babel.types;
 
-  const { name, index, mappings } = require(options.mappings ||
-    '../../mappings.json');
+  const { name, index, mappings } = require(
+    options.mappings || '../../mappings.json'
+  );
 
   return {
     visitor: {
diff --git a/src/components/ActivityIndicator.tsx b/src/components/ActivityIndicator.tsx
index 893c49f5ee..294f7e986e 100644
--- a/src/components/ActivityIndicator.tsx
+++ b/src/components/ActivityIndicator.tsx
@@ -1,18 +1,12 @@
 import * as React from 'react';
-import {
-  Animated,
-  Easing,
-  Platform,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
+// eslint-disable-next-line no-restricted-imports -- TODO: migrate ActivityIndicator to Reanimated.
+import { Animated, Easing, Platform, StyleSheet, View } from 'react-native';
+import type { ColorValue, StyleProp, ViewProps, ViewStyle } from 'react-native';
 
 import { useInternalTheme } from '../core/theming';
-import type { ThemeProp } from '../types';
+import type { ThemeProp } from '../theme/types';
 
-export type Props = React.ComponentPropsWithRef<typeof View> & {
+export type Props = ViewProps & {
   /**
    * Whether to show the indicator or hide it.
    */
@@ -20,7 +14,7 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
   /**
    * The color of the spinner.
    */
-  color?: string;
+  color?: ColorValue;
   /**
    * Size of the indicator.
    */
@@ -45,10 +39,10 @@ const DURATION = 2400;
  * ## Usage
  * ```js
  * import * as React from 'react';
- * import { ActivityIndicator, MD2Colors } from 'react-native-paper';
+ * import { ActivityIndicator, Palette } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *   <ActivityIndicator animating={true} color={MD2Colors.red800} />
+ *   <ActivityIndicator animating={true} color={Palette.error50} />
  * );
  *
  * export default MyComponent;
@@ -137,8 +131,8 @@ const ActivityIndicator = ({
         ? 24
         : 48
       : indicatorSize
-      ? indicatorSize
-      : 24;
+        ? indicatorSize
+        : 24;
 
   const frames = (60 * DURATION) / 1000;
   const easing = Easing.bezier(0.4, 0.0, 0.7, 1.0);
@@ -153,8 +147,8 @@ const ActivityIndicator = ({
       style={[styles.container, style]}
       {...rest}
       accessible
-      accessibilityRole="progressbar"
-      accessibilityState={{ busy: animating }}
+      role="progressbar"
+      aria-busy={animating}
     >
       <Animated.View
         style={[{ width: size, height: size, opacity: fade }]}
diff --git a/src/components/Appbar/Appbar.tsx b/src/components/Appbar/Appbar.tsx
index d59c626769..28ea39426a 100644
--- a/src/components/Appbar/Appbar.tsx
+++ b/src/components/Appbar/Appbar.tsx
@@ -1,34 +1,25 @@
 import * as React from 'react';
-import {
-  Animated,
-  Platform,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-  ColorValue,
-} from 'react-native';
-
-import color from 'color';
+import { StyleSheet, View } from 'react-native';
+import type { ColorValue, StyleProp, ViewProps, ViewStyle } from 'react-native';
 
 import AppbarContent from './AppbarContent';
 import {
-  AppbarModes,
-  DEFAULT_APPBAR_HEIGHT,
   getAppbarBackgroundColor,
+  getAppbarBorders,
   modeAppbarHeight,
   renderAppbarContent,
   filterAppbarActions,
-  AppbarChildProps,
 } from './utils';
+import type { AppbarModes, AppbarChildProps } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import type { MD3Elevation, ThemeProp } from '../../types';
+import type { ThemeProp } from '../../theme/types';
 import Surface from '../Surface';
 
-export type Props = Omit<
-  Partial<React.ComponentPropsWithRef<typeof View>>,
-  'style'
-> & {
+const APPBAR_HORIZONTAL_PADDING = 4;
+
+export type AppbarStyle = Omit<ViewStyle, 'elevation'>;
+
+export type Props = Omit<Partial<ViewProps>, 'style'> & {
   /**
    * Whether the background color is a dark color. A dark appbar will render light text and vice-versa.
    */
@@ -65,7 +56,7 @@ export type Props = Omit<
    * @optional
    */
   theme?: ThemeProp;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<AppbarStyle>;
 };
 
 /**
@@ -73,9 +64,6 @@ export type Props = Omit<
  * The top bar usually contains the screen title, controls such as navigation buttons, menu button etc.
  * The bottom bar usually provides access to a drawer and up to four actions.
  *
- * By default Appbar uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.
- * See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more informations
- *
  * ## Usage
  * ### Top bar
  * ```js
@@ -114,7 +102,7 @@ export type Props = Omit<
  *         styles.bottom,
  *         {
  *           height: BOTTOM_APPBAR_HEIGHT + bottom,
- *           backgroundColor: theme.colors.elevation.level2,
+ *           backgroundColor: theme.colors.surfaceContainer,
  *         },
  *       ]}
  *       safeAreaInsets={{ bottom }}
@@ -159,53 +147,38 @@ const Appbar = ({
   dark,
   style,
   mode = 'small',
-  elevated,
+  elevated = false,
   safeAreaInsets,
   theme: themeOverrides,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const { isV3 } = theme;
   const flattenedStyle = StyleSheet.flatten(style);
-  const {
-    backgroundColor: customBackground,
-    elevation = isV3 ? (elevated ? 2 : 0) : 4,
-    ...restStyle
-  } = (flattenedStyle || {}) as Exclude<typeof flattenedStyle, number> & {
-    elevation?: number;
+  const { backgroundColor: customBackground, ...restStyle } = (flattenedStyle ||
+    {}) as Exclude<typeof flattenedStyle, number> & {
     backgroundColor?: ColorValue;
   };
 
   const backgroundColor = getAppbarBackgroundColor(
     theme,
-    elevation,
-    customBackground,
-    elevated
+    elevated,
+    customBackground
   );
 
+  const borderStyles = getAppbarBorders(restStyle);
+
   const isMode = (modeToCompare: AppbarModes) => {
-    return isV3 && mode === modeToCompare;
+    return mode === modeToCompare;
   };
 
-  let isDark = false;
+  const isDark = typeof dark === 'boolean' ? dark : false;
 
-  if (typeof dark === 'boolean') {
-    isDark = dark;
-  } else if (!isV3) {
-    isDark =
-      backgroundColor === 'transparent'
-        ? false
-        : typeof backgroundColor === 'string'
-        ? !color(backgroundColor).isLight()
-        : true;
-  }
-
-  const isV3CenterAlignedMode = isV3 && isMode('center-aligned');
+  const isCenterAlignedMode = isMode('center-aligned');
 
   let shouldCenterContent = false;
   let shouldAddLeftSpacing = false;
   let shouldAddRightSpacing = false;
-  if ((!isV3 && Platform.OS === 'ios') || isV3CenterAlignedMode) {
+  if (isCenterAlignedMode) {
     let hasAppbarContent = false;
     let leftItemsCount = 0;
     let rightItemsCount = 0;
@@ -225,49 +198,46 @@ const Appbar = ({
     });
 
     shouldCenterContent =
-      hasAppbarContent &&
-      leftItemsCount < 2 &&
-      rightItemsCount < (isV3 ? 3 : 2);
+      hasAppbarContent && leftItemsCount < 2 && rightItemsCount < 3;
     shouldAddLeftSpacing = shouldCenterContent && leftItemsCount === 0;
     shouldAddRightSpacing = shouldCenterContent && rightItemsCount === 0;
   }
 
-  const spacingStyle = isV3 ? styles.v3Spacing : styles.spacing;
+  const spacingStyle = styles.v3Spacing;
 
   const insets = {
     paddingBottom: safeAreaInsets?.bottom,
     paddingTop: safeAreaInsets?.top,
-    paddingLeft: safeAreaInsets?.left,
-    paddingRight: safeAreaInsets?.right,
+    paddingLeft: (safeAreaInsets?.left ?? 0) + APPBAR_HORIZONTAL_PADDING,
+    paddingRight: (safeAreaInsets?.right ?? 0) + APPBAR_HORIZONTAL_PADDING,
   };
 
   return (
     <Surface
+      {...borderStyles}
+      backgroundColor={backgroundColor}
       style={[
-        { backgroundColor },
-        styles.appbar,
         {
-          height: isV3 ? modeAppbarHeight[mode] : DEFAULT_APPBAR_HEIGHT,
+          height: modeAppbarHeight[mode],
         },
+        styles.appbar,
         insets,
         restStyle,
-        !theme.isV3 && { elevation },
       ]}
-      elevation={elevation as MD3Elevation}
-      container
+      elevation={elevated ? 2 : 0}
       {...rest}
+      theme={theme}
     >
       {shouldAddLeftSpacing ? <View style={spacingStyle} /> : null}
-      {(!isV3 || isMode('small') || isMode('center-aligned')) && (
+      {(isMode('small') || isMode('center-aligned')) && (
         <>
           {/* Render only the back action at first place  */}
           {renderAppbarContent({
             children,
             isDark,
             theme,
-            isV3,
             renderOnly: ['Appbar.BackAction'],
-            shouldCenterContent: isV3CenterAlignedMode || shouldCenterContent,
+            shouldCenterContent: isCenterAlignedMode || shouldCenterContent,
           })}
           {/* Render the rest of the content except the back action */}
           {renderAppbarContent({
@@ -278,9 +248,8 @@ const Appbar = ({
             ],
             isDark,
             theme,
-            isV3,
             renderExcept: ['Appbar.BackAction'],
-            shouldCenterContent: isV3CenterAlignedMode || shouldCenterContent,
+            shouldCenterContent: isCenterAlignedMode || shouldCenterContent,
           })}
         </>
       )}
@@ -297,14 +266,12 @@ const Appbar = ({
             {renderAppbarContent({
               children,
               isDark,
-              isV3,
               renderOnly: ['Appbar.BackAction'],
               mode,
             })}
             {renderAppbarContent({
               children: filterAppbarActions(children, true),
               isDark,
-              isV3,
               renderOnly: ['Appbar.Action'],
               mode,
             })}
@@ -313,7 +280,6 @@ const Appbar = ({
               {renderAppbarContent({
                 children: filterAppbarActions(children),
                 isDark,
-                isV3,
                 renderExcept: [
                   'Appbar',
                   'Appbar.BackAction',
@@ -327,7 +293,6 @@ const Appbar = ({
           {renderAppbarContent({
             children,
             isDark,
-            isV3,
             renderOnly: ['Appbar.Content'],
             mode,
           })}
@@ -342,10 +307,6 @@ const styles = StyleSheet.create({
   appbar: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 4,
-  },
-  spacing: {
-    width: 48,
   },
   v3Spacing: {
     width: 52,
diff --git a/src/components/Appbar/AppbarAction.tsx b/src/components/Appbar/AppbarAction.tsx
index ab5a72a110..1c358397c9 100644
--- a/src/components/Appbar/AppbarAction.tsx
+++ b/src/components/Appbar/AppbarAction.tsx
@@ -1,30 +1,19 @@
 import * as React from 'react';
-import type {
-  Animated,
-  ColorValue,
-  StyleProp,
-  View,
-  ViewStyle,
-} from 'react-native';
+import type { ColorValue, StyleProp, View, ViewStyle } from 'react-native';
 
-import color from 'color';
-import type { ThemeProp } from 'src/types';
+import type { AnimatedStyle } from 'react-native-reanimated';
 
 import { useInternalTheme } from '../../core/theming';
-import { black } from '../../styles/themes/v2/colors';
-import { forwardRef } from '../../utils/forwardRef';
+import type { ThemeProp } from '../../theme/types';
 import type { IconSource } from '../Icon';
 import IconButton from '../IconButton/IconButton';
+import type { Props as IconButtonProps } from '../IconButton/IconButton';
 
-export type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
+export type Props = React.PropsWithoutRef<IconButtonProps> & {
   /**
    *  Custom color for action icon.
    */
-  color?: string;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
+  color?: ColorValue;
   /**
    * Name of the icon to show.
    */
@@ -40,7 +29,7 @@ export type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
   /**
    * Accessibility label for the button. This is read by the screen reader when the user taps the button.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * Function to execute on press.
    */
@@ -51,8 +40,8 @@ export type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
    * Whether it's the leading button. Note: If `Appbar.BackAction` is present, it will be rendered before any `isLeading` icons.
    */
   isLeading?: boolean;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-  ref?: React.RefObject<View>;
+  style?: StyleProp<AnimatedStyle<ViewStyle>>;
+  ref?: React.Ref<View>;
   /**
    * @optional
    */
@@ -81,48 +70,41 @@ export type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
  * export default MyComponent;
  * ```
  */
-const AppbarAction = forwardRef<View, Props>(
-  (
-    {
-      size = 24,
-      color: iconColor,
-      icon,
-      disabled,
-      onPress,
-      accessibilityLabel,
-      isLeading,
-      theme: themeOverrides,
-      rippleColor,
-      ...rest
-    }: Props,
-    ref
-  ) => {
-    const theme = useInternalTheme(themeOverrides);
+const AppbarAction = ({
+  size = 24,
+  color: iconColor,
+  icon,
+  disabled,
+  onPress,
+  'aria-label': ariaLabel,
+  isLeading,
+  theme: themeOverrides,
+  ref,
+  ...rest
+}: Props) => {
+  const theme = useInternalTheme(themeOverrides);
+  const { colors } = theme;
 
-    const actionIconColor = iconColor
-      ? iconColor
-      : theme.isV3
-      ? isLeading
-        ? theme.colors.onSurface
-        : theme.colors.onSurfaceVariant
-      : color(black).alpha(0.54).rgb().string();
+  const actionIconColor = iconColor
+    ? iconColor
+    : isLeading
+      ? colors.onSurface
+      : colors.onSurfaceVariant;
 
-    return (
-      <IconButton
-        size={size}
-        onPress={onPress}
-        iconColor={actionIconColor}
-        icon={icon}
-        disabled={disabled}
-        accessibilityLabel={accessibilityLabel}
-        animated
-        ref={ref}
-        rippleColor={rippleColor}
-        {...rest}
-      />
-    );
-  }
-);
+  return (
+    <IconButton
+      size={size}
+      onPress={onPress}
+      iconColor={actionIconColor}
+      icon={icon}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      animated
+      ref={ref}
+      {...rest}
+    />
+  );
+};
 
 AppbarAction.displayName = 'Appbar.Action';
 
diff --git a/src/components/Appbar/AppbarBackAction.tsx b/src/components/Appbar/AppbarBackAction.tsx
index accc76bc65..4f23dfa542 100644
--- a/src/components/Appbar/AppbarBackAction.tsx
+++ b/src/components/Appbar/AppbarBackAction.tsx
@@ -1,25 +1,23 @@
 import * as React from 'react';
 import type {
-  Animated,
+  ColorValue,
   GestureResponderEvent,
   StyleProp,
   View,
   ViewStyle,
 } from 'react-native';
 
-import type { $Omit } from './../../types';
+import type { AnimatedStyle } from 'react-native-reanimated';
+
 import AppbarAction from './AppbarAction';
+import type { Props as AppbarActionProps } from './AppbarAction';
 import AppbarBackIcon from './AppbarBackIcon';
-import { forwardRef } from '../../utils/forwardRef';
 
-export type Props = $Omit<
-  React.ComponentPropsWithoutRef<typeof AppbarAction>,
-  'icon'
-> & {
+export type Props = Omit<React.PropsWithoutRef<AppbarActionProps>, 'icon'> & {
   /**
    *  Custom color for back icon.
    */
-  color?: string;
+  color?: ColorValue;
   /**
    * Optional icon size.
    */
@@ -31,13 +29,13 @@ export type Props = $Omit<
   /**
    * Accessibility label for the button. This is read by the screen reader when the user taps the button.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * Function to execute on press.
    */
   onPress?: (e: GestureResponderEvent) => void;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-  ref?: React.RefObject<View>;
+  style?: StyleProp<AnimatedStyle<ViewStyle>>;
+  ref?: React.Ref<View>;
 };
 
 /**
@@ -57,16 +55,18 @@ export type Props = $Omit<
  * export default MyComponent;
  * ```
  */
-const AppbarBackAction = forwardRef<View, Props>(
-  ({ accessibilityLabel = 'Back', ...rest }: Props, ref) => (
-    <AppbarAction
-      accessibilityLabel={accessibilityLabel}
-      {...rest}
-      icon={AppbarBackIcon}
-      isLeading
-      ref={ref}
-    />
-  )
+const AppbarBackAction = ({
+  'aria-label': ariaLabel = 'Back',
+  ref,
+  ...rest
+}: Props) => (
+  <AppbarAction
+    aria-label={ariaLabel}
+    {...rest}
+    icon={AppbarBackIcon}
+    isLeading
+    ref={ref}
+  />
 );
 
 AppbarBackAction.displayName = 'Appbar.BackAction';
diff --git a/src/components/Appbar/AppbarBackIcon.tsx b/src/components/Appbar/AppbarBackIcon.tsx
index 7579a3f1a6..ff827b3f5f 100644
--- a/src/components/Appbar/AppbarBackIcon.tsx
+++ b/src/components/Appbar/AppbarBackIcon.tsx
@@ -1,9 +1,18 @@
-import * as React from 'react';
-import { I18nManager, Image, Platform, StyleSheet, View } from 'react-native';
+import { Image, Platform, StyleSheet, View } from 'react-native';
+import type { ColorValue } from 'react-native';
 
+import { useLocale } from '../../core/locale';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 
-const AppbarBackIcon = ({ size, color }: { size: number; color: string }) => {
+const AppbarBackIcon = ({
+  size,
+  color,
+}: {
+  size: number;
+  color: ColorValue;
+}) => {
+  const { direction } = useLocale();
+  const isRTL = direction === 'rtl';
   const iosIconSize = size - 3;
 
   return Platform.OS === 'ios' ? (
@@ -13,16 +22,14 @@ const AppbarBackIcon = ({ size, color }: { size: number; color: string }) => {
         {
           width: size,
           height: size,
-          transform: [{ scaleX: I18nManager.getConstants().isRTL ? -1 : 1 }],
+          transform: [{ scaleX: isRTL ? -1 : 1 }],
         },
       ]}
     >
       <Image
         source={require('../../assets/back-chevron.png')}
-        style={[
-          styles.icon,
-          { tintColor: color, width: iosIconSize, height: iosIconSize },
-        ]}
+        resizeMode="contain"
+        style={{ width: iosIconSize, height: iosIconSize, tintColor: color }}
         accessibilityIgnoresInvertColors
       />
     </View>
@@ -31,7 +38,7 @@ const AppbarBackIcon = ({ size, color }: { size: number; color: string }) => {
       name="arrow-left"
       color={color}
       size={size}
-      direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
+      direction={direction}
     />
   );
 };
@@ -41,9 +48,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  icon: {
-    resizeMode: 'contain',
-  },
 });
 
 export default AppbarBackIcon;
diff --git a/src/components/Appbar/AppbarContent.tsx b/src/components/Appbar/AppbarContent.tsx
index dad67e21c8..37c3b28e2c 100644
--- a/src/components/Appbar/AppbarContent.tsx
+++ b/src/components/Appbar/AppbarContent.tsx
@@ -1,24 +1,18 @@
 import * as React from 'react';
-import {
-  AccessibilityRole,
+import { StyleSheet, Pressable, View } from 'react-native';
+import type {
   GestureResponderEvent,
-  Platform,
   StyleProp,
-  StyleSheet,
   TextStyle,
-  Pressable,
-  View,
   ViewStyle,
   ViewProps,
 } from 'react-native';
 
-import color from 'color';
-
 import { modeTextVariant } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import { white } from '../../styles/themes/v2/colors';
-import type { $RemoveChildren, MD3TypescaleKey, ThemeProp } from '../../types';
-import Text, { TextRef } from '../Typography/Text';
+import type { ThemeProp } from '../../theme/types';
+import Text from '../Typography/Text';
+import type { TextRef } from '../Typography/Text';
 
 type TitleString = {
   title: string;
@@ -27,7 +21,7 @@ type TitleString = {
 
 type TitleElement = { title: React.ReactNode; titleStyle?: never };
 
-export type Props = $RemoveChildren<typeof View> & {
+export type Props = Omit<React.PropsWithoutRef<ViewProps>, 'children'> & {
   // For `title` and `titleStyle` props their types are duplicated due to the generation of documentation.
   // Appropriate type for them are either `TitleString` or `TitleElement`, depends on `title` type.
   /**
@@ -42,16 +36,6 @@ export type Props = $RemoveChildren<typeof View> & {
    * Reference for the title.
    */
   titleRef?: React.RefObject<TextRef>;
-  /**
-   * @deprecated Deprecated in v5.x
-   * Text for the subtitle.
-   */
-  subtitle?: React.ReactNode;
-  /**
-   * @deprecated Deprecated in v5.x
-   * Style for the subtitle.
-   */
-  subtitleStyle?: StyleProp<TextStyle>;
   /**
    * Function to execute on press.
    */
@@ -84,7 +68,7 @@ export type Props = $RemoveChildren<typeof View> & {
 } & (TitleString | TitleElement);
 
 /**
- * A component used to display a title and optional subtitle in an appbar.
+ * A component used to display a title in an appbar.
  *
  * ## Usage
  * ```js
@@ -102,8 +86,6 @@ export type Props = $RemoveChildren<typeof View> & {
  */
 const AppbarContent = ({
   color: titleColor,
-  subtitle,
-  subtitleStyle,
   onPress,
   disabled,
   style,
@@ -113,19 +95,13 @@ const AppbarContent = ({
   titleMaxFontSizeMultiplier,
   mode = 'small',
   theme: themeOverrides,
-  testID = 'appbar-content',
+  testID,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const { isV3, colors } = theme;
-
-  const titleTextColor = titleColor
-    ? titleColor
-    : isV3
-    ? colors.onSurface
-    : white;
+  const { colors, fonts } = theme;
 
-  const subtitleColor = color(titleTextColor).alpha(0.7).rgb().string();
+  const titleTextColor = titleColor ? titleColor : colors.onSurface;
 
   const modeContainerStyles = {
     small: styles.v3DefaultContainer,
@@ -134,45 +110,31 @@ const AppbarContent = ({
     'center-aligned': styles.v3DefaultContainer,
   };
 
-  const variant = modeTextVariant[mode] as MD3TypescaleKey;
+  const variant = modeTextVariant[mode];
 
   const contentWrapperProps = {
-    pointerEvents: 'box-none' as ViewProps['pointerEvents'],
-    style: [styles.container, isV3 && modeContainerStyles[mode], style],
+    pointerEvents: 'box-none',
+    style: [styles.container, modeContainerStyles[mode], style],
     testID,
     ...rest,
-  };
+  } satisfies ViewProps;
 
   const content = (
     <>
       {typeof title === 'string' ? (
         <Text
-          {...(isV3 && { variant })}
+          variant={variant}
           ref={titleRef}
           style={[
             {
               color: titleTextColor,
-              ...(isV3
-                ? theme.fonts[variant]
-                : Platform.OS === 'ios'
-                ? theme.fonts.regular
-                : theme.fonts.medium),
+              ...fonts[variant],
             },
-            !isV3 && styles.title,
             titleStyle,
           ]}
           numberOfLines={1}
           accessible
-          accessibilityRole={
-            onPress
-              ? 'none'
-              : Platform.OS === 'web'
-              ? ('heading' as 'header')
-              : 'header'
-          }
-          // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
-          accessibilityTraits="header"
-          testID={`${testID}-title-text`}
+          role={onPress ? 'none' : 'heading'}
           maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
         >
           {title}
@@ -180,26 +142,14 @@ const AppbarContent = ({
       ) : (
         title
       )}
-      {!isV3 && subtitle ? (
-        <Text
-          style={[styles.subtitle, { color: subtitleColor }, subtitleStyle]}
-          numberOfLines={1}
-        >
-          {subtitle}
-        </Text>
-      ) : null}
     </>
   );
 
   if (onPress) {
     return (
-      // eslint-disable-next-line react-native-a11y/has-accessibility-props
       <Pressable
-        accessibilityRole={touchableRole}
-        // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
-        accessibilityTraits={touchableRole}
-        accessibilityComponentType="button"
-        accessbilityState={disabled ? 'disabled' : null}
+        role="button"
+        aria-disabled={disabled}
         onPress={onPress}
         disabled={disabled}
         {...contentWrapperProps}
@@ -233,16 +183,8 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end',
     paddingBottom: 28,
   },
-  title: {
-    fontSize: Platform.OS === 'ios' ? 17 : 20,
-  },
-  subtitle: {
-    fontSize: Platform.OS === 'ios' ? 11 : 14,
-  },
 });
 
-const touchableRole: AccessibilityRole = 'button';
-
 export default AppbarContent;
 
 // @component-docs ignore-next-line
diff --git a/src/components/Appbar/AppbarHeader.tsx b/src/components/Appbar/AppbarHeader.tsx
index e0eb6386d7..9845238299 100644
--- a/src/components/Appbar/AppbarHeader.tsx
+++ b/src/components/Appbar/AppbarHeader.tsx
@@ -1,31 +1,16 @@
 import * as React from 'react';
-import {
-  Animated,
-  ColorValue,
-  Platform,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
+import type { ColorValue, StyleProp } from 'react-native';
 
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { Appbar } from './Appbar';
-import {
-  DEFAULT_APPBAR_HEIGHT,
-  getAppbarBackgroundColor,
-  modeAppbarHeight,
-  getAppbarBorders,
-} from './utils';
+import type { AppbarStyle, Props as AppbarProps } from './Appbar';
+import { getAppbarBackgroundColor, modeAppbarHeight } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import shadow from '../../styles/shadow';
-import type { ThemeProp } from '../../types';
+import type { ThemeProp } from '../../theme/types';
 
-export type Props = Omit<
-  React.ComponentProps<typeof Appbar>,
-  'safeAreaInsets'
-> & {
+export type Props = Omit<AppbarProps, 'safeAreaInsets' | 'style'> & {
   /**
    * Whether the background color is a dark color. A dark header will render light text and vice-versa.
    */
@@ -60,7 +45,7 @@ export type Props = Omit<
    * @optional
    */
   theme?: ThemeProp;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<AppbarStyle>;
 };
 
 /**
@@ -100,74 +85,61 @@ const AppbarHeader = ({
   mode = Platform.OS === 'ios' ? 'center-aligned' : 'small',
   elevated = false,
   theme: themeOverrides,
-  testID = 'appbar-header',
+  testID,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const { isV3 } = theme;
 
   const flattenedStyle = StyleSheet.flatten(style);
   const {
-    height = isV3 ? modeAppbarHeight[mode] : DEFAULT_APPBAR_HEIGHT,
-    elevation = isV3 ? (elevated ? 2 : 0) : 4,
+    height = modeAppbarHeight[mode],
     backgroundColor: customBackground,
-    zIndex = isV3 && elevated ? 1 : 0,
+    zIndex = elevated ? 1 : 0,
     ...restStyle
   } = (flattenedStyle || {}) as Exclude<typeof flattenedStyle, number> & {
-    height?: number;
-    elevation?: number;
+    height?: AppbarStyle['height'];
     backgroundColor?: ColorValue;
     zIndex?: number;
   };
 
-  const borderRadius = getAppbarBorders(restStyle);
-
   const backgroundColor = getAppbarBackgroundColor(
     theme,
-    elevation,
-    customBackground,
-    elevated
+    elevated,
+    customBackground
   );
 
   const { top, left, right } = useSafeAreaInsets();
+  const topInset = statusBarHeight ?? top;
+  const horizontalInset = Math.max(left, right);
+  const headerHeight = typeof height === 'number' ? height + topInset : height;
 
   return (
-    <View
-      testID={`${testID}-root-layer`}
+    <Appbar
+      testID={testID}
       style={[
         {
+          height: headerHeight,
           backgroundColor,
           zIndex,
-          elevation,
-          paddingTop: statusBarHeight ?? top,
-          paddingHorizontal: Math.max(left, right),
         },
-        borderRadius,
-        shadow(elevation) as ViewStyle,
+        restStyle,
       ]}
-    >
-      <Appbar
-        testID={testID}
-        style={[{ height, backgroundColor }, styles.appbar, restStyle]}
-        dark={dark}
-        {...(isV3 && {
-          mode,
-        })}
-        {...rest}
-        theme={theme}
-      />
-    </View>
+      safeAreaInsets={{
+        top: topInset,
+        left: horizontalInset,
+        right: horizontalInset,
+      }}
+      dark={dark}
+      elevated={elevated}
+      {...rest}
+      mode={mode}
+      theme={theme}
+    />
   );
 };
 
 AppbarHeader.displayName = 'Appbar.Header';
 
-const styles = StyleSheet.create({
-  appbar: {
-    elevation: 0,
-  },
-});
-
 export default AppbarHeader;
 
 // @component-docs ignore-next-line
diff --git a/src/components/Appbar/utils.ts b/src/components/Appbar/utils.ts
index a6c68af2a5..36b2fd2f09 100644
--- a/src/components/Appbar/utils.ts
+++ b/src/components/Appbar/utils.ts
@@ -1,10 +1,9 @@
 import React from 'react';
 import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
-import { StyleSheet, Animated } from 'react-native';
+import { StyleSheet } from 'react-native';
 
-import overlay from '../../styles/overlay';
-import { black, white } from '../../styles/themes/v2/colors';
-import type { InternalTheme, ThemeProp } from '../../types';
+import { white } from '../../theme/colors';
+import type { InternalTheme, ThemeProp } from '../../theme/types';
 
 export type AppbarModes = 'small' | 'medium' | 'large' | 'center-aligned';
 
@@ -16,34 +15,33 @@ export type AppbarChildProps = {
 
 const borderStyleProperties = [
   'borderRadius',
+  'borderBottomEndRadius',
+  'borderBottomStartRadius',
+  'borderEndEndRadius',
+  'borderEndStartRadius',
+  'borderStartEndRadius',
+  'borderStartStartRadius',
+  'borderTopEndRadius',
+  'borderTopStartRadius',
   'borderTopLeftRadius',
   'borderTopRightRadius',
   'borderBottomRightRadius',
   'borderBottomLeftRadius',
-];
+  'borderCurve',
+] satisfies readonly (keyof ViewStyle)[];
 
 export const getAppbarBackgroundColor = (
   theme: InternalTheme,
-  elevation: number,
-  customBackground?: ColorValue,
-  elevated?: boolean
+  elevated: boolean,
+  customBackground?: ColorValue
 ) => {
-  const { isV3, dark: isDarkTheme, mode, colors } = theme;
-  const isAdaptiveMode = mode === 'adaptive';
+  const { colors } = theme;
   if (customBackground) {
     return customBackground;
   }
 
-  if (!isV3) {
-    if (isDarkTheme && isAdaptiveMode) {
-      return overlay(elevation, colors?.surface);
-    }
-
-    return colors.primary;
-  }
-
   if (elevated) {
-    return theme.colors.elevation.level2;
+    return colors.surfaceContainer;
   }
 
   return colors.surface;
@@ -52,7 +50,6 @@ export const getAppbarBackgroundColor = (
 export const getAppbarColor = ({
   color,
   isDark,
-  isV3,
 }: BaseProps & { color: string }) => {
   if (typeof color !== 'undefined') {
     return color;
@@ -62,25 +59,17 @@ export const getAppbarColor = ({
     return white;
   }
 
-  if (isV3) {
-    return undefined;
-  }
-
-  return black;
+  return undefined;
 };
 
-export const getAppbarBorders = (
-  style:
-    | Animated.Value
-    | Animated.AnimatedInterpolation<string | number>
-    | Animated.WithAnimatedObject<ViewStyle>
-) => {
-  const borders: Record<string, number> = {};
+export const getAppbarBorders = (style: ViewStyle) => {
+  let borders: ViewStyle = {};
 
   for (const property of borderStyleProperties) {
-    const value = style[property as keyof typeof style];
-    if (value) {
-      borders[property] = value;
+    const value = style[property];
+
+    if (typeof value === 'number' || typeof value === 'string') {
+      borders = { ...borders, [property]: value };
     }
   }
 
@@ -89,13 +78,11 @@ export const getAppbarBorders = (
 
 type BaseProps = {
   isDark: boolean;
-  isV3: boolean;
 };
 
 type RenderAppbarContentProps = BaseProps & {
   children: React.ReactNode;
   shouldCenterContent?: boolean;
-  isV3: boolean;
   renderOnly?: (string | boolean)[];
   renderExcept?: string[];
   mode?: AppbarModes;
@@ -133,13 +120,12 @@ export const renderAppbarContent = ({
   children,
   isDark,
   shouldCenterContent = false,
-  isV3,
   renderOnly,
   renderExcept,
   mode = 'small',
   theme,
 }: RenderAppbarContentProps) => {
-  return React.Children.toArray(children as React.ReactNode | React.ReactNode[])
+  return React.Children.toArray(children)
     .filter((child) => child != null && typeof child !== 'boolean')
     .filter((child) =>
       // @ts-expect-error: TypeScript complains about the type of type but it doesn't matter
@@ -172,16 +158,14 @@ export const renderAppbarContent = ({
         theme?: ThemeProp;
       } = {
         theme,
-        color: getAppbarColor({ color: child.props.color, isDark, isV3 }),
+        color: getAppbarColor({ color: child.props.color, isDark }),
       };
 
       // @ts-expect-error: TypeScript complains about the type of type but it doesn't matter
       if (child.type.displayName === 'Appbar.Content') {
         props.mode = mode;
         props.style = [
-          isV3
-            ? i === 0 && !shouldCenterContent && styles.v3Spacing
-            : i !== 0 && styles.v2Spacing,
+          i === 0 && !shouldCenterContent && styles.v3Spacing,
           shouldCenterContent && styles.centerAlignedContent,
           child.props.style,
         ];
@@ -195,9 +179,6 @@ const styles = StyleSheet.create({
   centerAlignedContent: {
     alignItems: 'center',
   },
-  v2Spacing: {
-    marginLeft: 8,
-  },
   v3Spacing: {
     marginLeft: 12,
   },
diff --git a/src/components/Avatar/AvatarIcon.tsx b/src/components/Avatar/AvatarIcon.tsx
index f1a0206f1f..2d2f08760b 100644
--- a/src/components/Avatar/AvatarIcon.tsx
+++ b/src/components/Avatar/AvatarIcon.tsx
@@ -1,15 +1,16 @@
-import * as React from 'react';
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 
 import { useInternalTheme } from '../../core/theming';
-import { white } from '../../styles/themes/v2/colors';
-import type { ThemeProp } from '../../types';
+import { white } from '../../theme/colors';
+import type { ThemeProp } from '../../theme/types';
 import getContrastingColor from '../../utils/getContrastingColor';
-import Icon, { IconSource } from '../Icon';
+import Icon from '../Icon';
+import type { IconSource } from '../Icon';
 
 const defaultSize = 64;
 
-export type Props = React.ComponentPropsWithRef<typeof View> & {
+export type Props = ViewProps & {
   /**
    * Icon to display for the `Avatar`.
    */
diff --git a/src/components/Avatar/AvatarImage.tsx b/src/components/Avatar/AvatarImage.tsx
index 96dbba3869..e8b6e501b1 100644
--- a/src/components/Avatar/AvatarImage.tsx
+++ b/src/components/Avatar/AvatarImage.tsx
@@ -1,16 +1,15 @@
 import * as React from 'react';
-import {
-  Image,
+import { Image, StyleSheet, View } from 'react-native';
+import type {
   ImageProps,
   ImageSourcePropType,
   StyleProp,
-  StyleSheet,
-  View,
+  ViewProps,
   ViewStyle,
 } from 'react-native';
 
 import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
+import type { ThemeProp } from '../../theme/types';
 
 const defaultSize = 64;
 
@@ -18,7 +17,7 @@ export type AvatarImageSource =
   | ImageSourcePropType
   | ((props: { size: number }) => React.ReactNode);
 
-export type Props = React.ComponentPropsWithRef<typeof View> & {
+export type Props = ViewProps & {
   /**
    * Image to display for the `Avatar`.
    * It accepts a standard React Native Image `source` prop
diff --git a/src/components/Avatar/AvatarText.tsx b/src/components/Avatar/AvatarText.tsx
index f93dd894a4..4d3ffe87a0 100644
--- a/src/components/Avatar/AvatarText.tsx
+++ b/src/components/Avatar/AvatarText.tsx
@@ -1,22 +1,15 @@
-import * as React from 'react';
-import {
-  StyleProp,
-  StyleSheet,
-  TextStyle,
-  useWindowDimensions,
-  View,
-  ViewStyle,
-} from 'react-native';
+import { StyleSheet, useWindowDimensions, View } from 'react-native';
+import type { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
 
 import { useInternalTheme } from '../../core/theming';
-import { white } from '../../styles/themes/v2/colors';
-import type { ThemeProp } from '../../types';
+import { white } from '../../theme/colors';
+import type { ThemeProp } from '../../theme/types';
 import getContrastingColor from '../../utils/getContrastingColor';
 import Text from '../Typography/Text';
 
 const defaultSize = 64;
 
-export type Props = React.ComponentPropsWithRef<typeof View> & {
+export type Props = ViewProps & {
   /**
    * Initials to show as the text in the `Avatar`.
    */
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 54c70770f2..cbe7e8d0b5 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -1,20 +1,18 @@
-import * as React from 'react';
-import {
-  Animated,
-  StyleProp,
-  StyleSheet,
-  TextStyle,
-  useWindowDimensions,
-} from 'react-native';
+import type { StyleProp, TextProps, TextStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+
+import Animated, { type AnimatedStyle } from 'react-native-reanimated';
 
 import { useInternalTheme } from '../core/theming';
-import { black, white } from '../styles/themes/v2/colors';
-import type { ThemeProp } from '../types';
-import getContrastingColor from '../utils/getContrastingColor';
+import { cornerFull } from '../theme/tokens/sys/shape';
+import type { ThemeProp } from '../theme/types';
 
-const defaultSize = 20;
+const SMALL_SIZE = 6;
+const LARGE_SIZE = 16;
+const MAX_LARGE_WIDTH = 36;
+const LARGE_PADDING = 4;
 
-export type Props = React.ComponentProps<typeof Animated.Text> & {
+export type Props = Omit<TextProps, 'style'> & {
   /**
    * Whether the badge is visible
    */
@@ -23,12 +21,7 @@ export type Props = React.ComponentProps<typeof Animated.Text> & {
    * Content of the `Badge`.
    */
   children?: string | number;
-  /**
-   * Size of the `Badge`.
-   */
-  size?: number;
-  style?: StyleProp<TextStyle>;
-  ref?: React.RefObject<typeof Animated.Text>;
+  style?: StyleProp<AnimatedStyle<TextStyle>>;
   /**
    * @optional
    */
@@ -39,6 +32,10 @@ export type Props = React.ComponentProps<typeof Animated.Text> & {
  * Badges are small status descriptors for UI elements.
  * A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object.
  *
+ * The badge is styled differently based on whether `children` is passed:
+ * - Small dot when it doesn't have `children`
+ * - Larger pill when it has `children`
+ *
  * ## Usage
  * ```js
  * import * as React from 'react';
@@ -53,71 +50,52 @@ export type Props = React.ComponentProps<typeof Animated.Text> & {
  */
 const Badge = ({
   children,
-  size = defaultSize,
   style,
   theme: themeOverrides,
   visible = true,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const { current: opacity } = React.useRef<Animated.Value>(
-    new Animated.Value(visible ? 1 : 0)
-  );
-  const { fontScale } = useWindowDimensions();
-
-  const isFirstRendering = React.useRef<boolean>(true);
 
   const {
     animation: { scale },
   } = theme;
 
-  React.useEffect(() => {
-    // Do not run animation on very first rendering
-    if (isFirstRendering.current) {
-      isFirstRendering.current = false;
-      return;
-    }
+  const textColor = theme.colors.onError;
 
-    Animated.timing(opacity, {
-      toValue: visible ? 1 : 0,
-      duration: 150 * scale,
-      useNativeDriver: true,
-    }).start();
-  }, [visible, opacity, scale]);
+  const isLarge = children != null;
+  const badgeSize = isLarge ? LARGE_SIZE : SMALL_SIZE;
+  const labelFont = theme.fonts.labelSmall;
 
-  const {
-    backgroundColor = theme.isV3
-      ? theme.colors.error
-      : theme.colors?.notification,
-    ...restStyle
-  } = (StyleSheet.flatten(style) || {}) as TextStyle;
-
-  const textColor = theme.isV3
-    ? theme.colors.onError
-    : getContrastingColor(backgroundColor, white, black);
-
-  const borderRadius = size / 2;
-
-  const paddingHorizontal = theme.isV3 ? 3 : 4;
+  const transitionStyle = {
+    opacity: visible ? 1 : 0,
+    transitionDuration: 150 * scale,
+    transitionProperty: 'opacity',
+  };
 
   return (
     <Animated.Text
       numberOfLines={1}
+      allowFontScaling={false}
       style={[
+        styles.container,
+        transitionStyle,
         {
-          opacity,
-          backgroundColor,
+          backgroundColor: theme.colors.error,
           color: textColor,
-          fontSize: size * 0.5,
-          ...(!theme.isV3 && theme.fonts.regular),
-          lineHeight: size / fontScale,
-          height: size,
-          minWidth: size,
-          borderRadius,
-          paddingHorizontal,
+          borderRadius: cornerFull,
+          height: badgeSize,
+          minWidth: badgeSize,
         },
-        styles.container,
-        restStyle,
+        isLarge && [
+          labelFont,
+          {
+            lineHeight: LARGE_SIZE,
+            maxWidth: MAX_LARGE_WIDTH,
+            paddingHorizontal: LARGE_PADDING,
+          },
+        ],
+        style,
       ]}
       {...rest}
     >
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index 09aa344d55..909f75bf3f 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -1,19 +1,38 @@
 import * as React from 'react';
-import { Animated, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-import type { LayoutChangeEvent } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import type {
+  LayoutChangeEvent,
+  StyleProp,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
 
+import Animated, {
+  Easing,
+  interpolate,
+  ReduceMotion,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
 import useLatestCallback from 'use-latest-callback';
 
 import Button from './Button/Button';
-import Icon, { IconSource } from './Icon';
+import type { Props as ButtonProps } from './Button/Button';
+import Icon from './Icon';
+import type { IconSource } from './Icon';
 import Surface from './Surface';
+import type { SurfaceStyle } from './Surface';
 import Text from './Typography/Text';
 import { useInternalTheme } from '../core/theming';
-import type { $Omit, $RemoveChildren, ThemeProp } from '../types';
+import type { Elevation, ThemeProp } from '../theme/types';
 
 const DEFAULT_MAX_WIDTH = 960;
 
-export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
+type AnimationFinishedCallback = (result: { finished: boolean }) => void;
+
+export type Props = Omit<ViewProps, 'style'> & {
   /**
    * Whether banner is currently visible.
    */
@@ -38,7 +57,7 @@ export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
   actions?: Array<
     {
       label: string;
-    } & $RemoveChildren<typeof Button>
+    } & Omit<React.PropsWithoutRef<ButtonProps>, 'children'>
   >;
   /**
    * Style of banner's inner content.
@@ -49,12 +68,12 @@ export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
    * @supported Available in v5.x with theme version 3
    * Changes Banner shadow and background on iOS and Android.
    */
-  elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
+  elevation?: Elevation;
   /**
    * Specifies the largest possible scale a text font can reach.
    */
   maxFontSizeMultiplier?: number;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<SurfaceStyle>;
   ref?: React.RefObject<View>;
   /**
    * @optional
@@ -64,12 +83,12 @@ export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
    * @optional
    * Optional callback that will be called after the opening animation finished running normally
    */
-  onShowAnimationFinished?: Animated.EndCallback;
+  onShowAnimationFinished?: AnimationFinishedCallback;
   /**
    * @optional
    * Optional callback that will be called after the closing animation finished running normally
    */
-  onHideAnimationFinished?: Animated.EndCallback;
+  onHideAnimationFinished?: AnimationFinishedCallback;
 };
 
 /**
@@ -131,9 +150,10 @@ const Banner = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const { current: position } = React.useRef<Animated.Value>(
-    new Animated.Value(visible ? 1 : 0)
-  );
+  const { colors } = theme;
+
+  const position = useSharedValue(visible ? 1 : 0);
+
   const [layout, setLayout] = React.useState<{
     height: number;
     measured: boolean;
@@ -146,30 +166,33 @@ const Banner = ({
   const hideCallback = useLatestCallback(onHideAnimationFinished);
 
   const { scale } = theme.animation;
-
-  const opacity = position.interpolate({
-    inputRange: [0, 0.1, 1],
-    outputRange: [0, 1, 1],
-  });
+  const animationDuration = (visible ? 250 : 200) * scale;
 
   React.useEffect(() => {
-    if (visible) {
-      // show
-      Animated.timing(position, {
-        duration: 250 * scale,
-        toValue: 1,
-        useNativeDriver: false,
-      }).start(showCallback);
-    } else {
-      // hide
-      Animated.timing(position, {
-        duration: 200 * scale,
-        toValue: 0,
-        useNativeDriver: false,
-      }).start(hideCallback);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [visible, position, scale]);
+    const callback = visible ? showCallback : hideCallback;
+
+    position.value = withTiming(
+      visible ? 1 : 0,
+      {
+        duration: animationDuration,
+        easing: Easing.inOut(Easing.ease),
+        reduceMotion: ReduceMotion.Never,
+      },
+      (finished) => scheduleOnRN(callback, { finished: finished ?? false })
+    );
+  }, [animationDuration, hideCallback, position, showCallback, visible]);
+
+  const surfaceStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(position.value, [0, 0.1, 1], [0, 1, 1]),
+  }));
+
+  const spacerStyle = useAnimatedStyle(() => ({
+    height: position.value * layout.height,
+  }));
+
+  const contentAnimationStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: (position.value - 1) * layout.height }],
+  }));
 
   const handleLayout = ({ nativeEvent }: LayoutChangeEvent) => {
     const { height } = nativeEvent.layout;
@@ -183,29 +206,22 @@ const Banner = ({
   // Once we have the height, we apply the height to the spacer and switch the banner to position: absolute
   // We need this because we need to move the content below as if banner's height was being animated
   // However we can't animated banner's height directly as it'll also resize the content inside
-  const height = Animated.multiply(position, layout.height);
-
-  const translateY = Animated.multiply(
-    Animated.add(position, -1),
-    layout.height
-  );
   return (
     <Surface
       {...rest}
-      style={[!theme.isV3 && styles.elevation, { opacity }, style]}
+      style={[surfaceStyle, style]}
       theme={theme}
-      container
-      {...(theme.isV3 && { elevation })}
+      elevation={elevation}
     >
       <View style={[styles.wrapper, contentStyle]}>
-        <Animated.View style={{ height }} />
+        <Animated.View style={spacerStyle} />
         <Animated.View
           onLayout={handleLayout}
           style={[
             layout.measured || !visible
               ? // If we have measured banner's height or it's invisible,
                 // Position it absolutely, the layout will be taken care of the spacer
-                [styles.absolute, { transform: [{ translateY }] }]
+                [styles.absolute, contentAnimationStyle]
               : // Otherwise position it normally
                 null,
             !layout.measured && !visible
@@ -222,16 +238,15 @@ const Banner = ({
               </View>
             ) : null}
             <Text
+              variant="bodyMedium"
               style={[
                 styles.message,
                 {
-                  color: theme.isV3
-                    ? theme.colors.onSurface
-                    : theme.colors.text,
+                  color: colors.onSurface,
                 },
               ]}
-              accessibilityLiveRegion={visible ? 'polite' : 'none'}
-              accessibilityRole="alert"
+              aria-live={visible ? 'polite' : 'off'}
+              role="alert"
               maxFontSizeMultiplier={maxFontSizeMultiplier}
             >
               {children}
@@ -240,11 +255,11 @@ const Banner = ({
           <View style={styles.actions}>
             {actions.map(({ label, ...others }, i) => (
               <Button
-                key={/* eslint-disable-line react/no-array-index-key */ i}
+                key={i}
                 compact
                 mode="text"
                 style={styles.button}
-                textColor={theme.colors?.primary}
+                textColor={colors.primary}
                 theme={theme}
                 {...others}
               >
@@ -292,9 +307,6 @@ const styles = StyleSheet.create({
   button: {
     margin: 4,
   },
-  elevation: {
-    elevation: 1,
-  },
   transparent: {
     opacity: 0,
   },
diff --git a/src/components/BottomNavigation/BottomNavigation.tsx b/src/components/BottomNavigation/BottomNavigation.tsx
index c4e9b71a60..62a8d07ea2 100644
--- a/src/components/BottomNavigation/BottomNavigation.tsx
+++ b/src/components/BottomNavigation/BottomNavigation.tsx
@@ -1,12 +1,10 @@
 import * as React from 'react';
-import {
-  Animated,
+// eslint-disable-next-line no-restricted-imports -- TODO: migrate BottomNavigation to Reanimated.
+import { Animated, Platform, StyleSheet, View } from 'react-native';
+import type {
   ColorValue,
   EasingFunction,
-  Platform,
   StyleProp,
-  StyleSheet,
-  View,
   ViewStyle,
 } from 'react-native';
 
@@ -15,10 +13,10 @@ import useLatestCallback from 'use-latest-callback';
 import BottomNavigationBar from './BottomNavigationBar';
 import BottomNavigationRouteScreen from './BottomNavigationRouteScreen';
 import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
+import type { ThemeProp } from '../../theme/types';
 import useAnimatedValueArray from '../../utils/useAnimatedValueArray';
 import type { IconSource } from '../Icon';
-import { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
+import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 
 export type BaseRoute = {
   key: string;
@@ -26,11 +24,7 @@ export type BaseRoute = {
   focusedIcon?: IconSource;
   unfocusedIcon?: IconSource;
   badge?: string | number | boolean;
-  /**
-   * @deprecated In v5.x works only with theme version 2.
-   */
-  color?: string;
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   testID?: string;
   lazy?: boolean;
 };
@@ -83,9 +77,8 @@ export type Props<Route extends BaseRoute> = {
    * - `title`: title of the route to use as the tab label
    * - `focusedIcon`:  icon to use as the focused tab icon, can be a string, an image source or a react component @renamed Renamed from 'icon' to 'focusedIcon' in v5.x
    * - `unfocusedIcon`:  icon to use as the unfocused tab icon, can be a string, an image source or a react component @supported Available in v5.x with theme version 3
-   * - `color`: color to use as background color for shifting bottom navigation @deprecatedProperty In v5.x works only with theme version 2.
    * - `badge`: badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text.
-   * - `accessibilityLabel`: accessibility label for the tab button
+   * - `aria-label`: accessibility label for the tab button
    * - `testID`: test id for the tab button
    *
    * Example:
@@ -155,7 +148,7 @@ export type Props<Route extends BaseRoute> = {
   renderIcon?: (props: {
     route: Route;
     focused: boolean;
-    color: string;
+    color: ColorValue;
   }) => React.ReactNode;
   /**
    * Callback which React Element to be used as tab label.
@@ -163,7 +156,7 @@ export type Props<Route extends BaseRoute> = {
   renderLabel?: (props: {
     route: Route;
     focused: boolean;
-    color: string;
+    color: ColorValue;
   }) => React.ReactNode;
   /**
    * Callback which returns a React element to be used as the touchable for the tab item.
@@ -172,17 +165,13 @@ export type Props<Route extends BaseRoute> = {
   renderTouchable?: (props: TouchableProps<Route>) => React.ReactNode;
   /**
    * Get accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
-   * Uses `route.accessibilityLabel` by default.
+   * Uses `route['aria-label']` by default.
    */
   getAccessibilityLabel?: (props: { route: Route }) => string | undefined;
   /**
    * Get badge for the tab, uses `route.badge` by default.
    */
   getBadge?: (props: { route: Route }) => boolean | number | string | undefined;
-  /**
-   * Get color for the tab, uses `route.color` by default.
-   */
-  getColor?: (props: { route: Route }) => string | undefined;
   /**
    * Get label text for the tab, uses `route.title` by default. Use `renderLabel` to replace label component.
    */
@@ -263,6 +252,10 @@ export type Props<Route extends BaseRoute> = {
    * TestID used for testing purposes
    */
   testID?: string;
+  /**
+   * testID for the underlying `BottomNavigation.Bar`.
+   */
+  barTestID?: string;
 };
 
 const FAR_FAR_AWAY = Platform.OS === 'web' ? 0 : 9999;
@@ -275,9 +268,6 @@ const SceneComponent = React.memo(({ component, ...rest }: any) =>
  * BottomNavigation provides quick navigation between top-level views of an app with a bottom navigation bar.
  * It is primarily designed for use on mobile. If you want to use the navigation bar only see [`BottomNavigation.Bar`](BottomNavigationBar).
  *
- * By default BottomNavigation uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.
- * See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.
- *
  * ## Usage
  * ```js
  * import * as React from 'react';
@@ -327,7 +317,6 @@ const BottomNavigation = <Route extends BaseRoute>({
   renderTouchable,
   getLabelText,
   getBadge,
-  getColor,
   getAccessibilityLabel,
   getTestID,
   activeColor,
@@ -347,15 +336,15 @@ const BottomNavigation = <Route extends BaseRoute>({
   safeAreaInsets,
   labelMaxFontSizeMultiplier = 1,
   compact: compactProp,
-  testID = 'bottom-navigation',
+  testID,
+  barTestID,
   theme: themeOverrides,
   getLazy = ({ route }: { route: Route }) => route.lazy,
 }: Props<Route>) => {
   const theme = useInternalTheme(themeOverrides);
   const { scale } = theme.animation;
-  const compact = compactProp ?? !theme.isV3;
-  let shifting =
-    shiftingProp ?? (theme.isV3 ? false : navigationState.routes.length > 3);
+  const compact = compactProp ?? false;
+  let shifting = shiftingProp ?? false;
 
   if (shifting && navigationState.routes.length < 2) {
     shifting = false;
@@ -404,7 +393,7 @@ const BottomNavigation = <Route extends BaseRoute>({
         ...navigationState.routes.map((_, i) =>
           Animated.timing(tabsPositionAnims[i], {
             toValue: i === index ? 0 : i >= index ? 1 : -1,
-            duration: theme.isV3 || shifting ? 150 * scale : 0,
+            duration: 150 * scale,
             useNativeDriver: true,
             easing: sceneAnimationEasing,
           })
@@ -424,13 +413,11 @@ const BottomNavigation = <Route extends BaseRoute>({
       });
     },
     [
-      shifting,
       navigationState.routes,
       offsetsAnims,
       scale,
       tabsPositionAnims,
       sceneAnimationEasing,
-      theme,
     ]
   );
 
@@ -513,8 +500,8 @@ const BottomNavigation = <Route extends BaseRoute>({
                 outputRange: [0, 1, 0],
               })
             : focused
-            ? 1
-            : 0;
+              ? 1
+              : 0;
 
           const offsetTarget = focused ? 0 : FAR_FAR_AWAY;
 
@@ -539,7 +526,7 @@ const BottomNavigation = <Route extends BaseRoute>({
             <BottomNavigationRouteScreen
               key={route.key}
               pointerEvents={focused ? 'auto' : 'none'}
-              accessibilityElementsHidden={!focused}
+              aria-hidden={!focused}
               importantForAccessibility={
                 focused ? 'auto' : 'no-hide-descendants'
               }
@@ -579,7 +566,6 @@ const BottomNavigation = <Route extends BaseRoute>({
         renderTouchable={renderTouchable}
         getLabelText={getLabelText}
         getBadge={getBadge}
-        getColor={getColor}
         getAccessibilityLabel={getAccessibilityLabel}
         getTestID={getTestID}
         activeColor={activeColor}
@@ -595,7 +581,7 @@ const BottomNavigation = <Route extends BaseRoute>({
         safeAreaInsets={safeAreaInsets}
         labelMaxFontSizeMultiplier={labelMaxFontSizeMultiplier}
         compact={compact}
-        testID={`${testID}-bar`}
+        testID={barTestID}
         theme={theme}
       />
     </View>
diff --git a/src/components/BottomNavigation/BottomNavigationBar.tsx b/src/components/BottomNavigation/BottomNavigationBar.tsx
index 17e4899750..c53545b39a 100644
--- a/src/components/BottomNavigation/BottomNavigationBar.tsx
+++ b/src/components/BottomNavigation/BottomNavigationBar.tsx
@@ -1,17 +1,13 @@
 import * as React from 'react';
-import {
-  Animated,
+// eslint-disable-next-line no-restricted-imports -- TODO: migrate BottomNavigation to Reanimated.
+import { Animated, Platform, StyleSheet, Pressable, View } from 'react-native';
+import type {
   ColorValue,
   EasingFunction,
-  Platform,
   StyleProp,
-  StyleSheet,
-  Pressable,
-  View,
   ViewStyle,
 } from 'react-native';
 
-import color from 'color';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import {
@@ -20,18 +16,16 @@ import {
   getLabelColor,
 } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import overlay from '../../styles/overlay';
-import { black, white } from '../../styles/themes/v2/colors';
-import type { ThemeProp } from '../../types';
+import type { ThemeProp } from '../../theme/types';
 import useAnimatedValue from '../../utils/useAnimatedValue';
 import useAnimatedValueArray from '../../utils/useAnimatedValueArray';
 import useIsKeyboardShown from '../../utils/useIsKeyboardShown';
 import useLayout from '../../utils/useLayout';
 import Badge from '../Badge';
-import Icon, { IconSource } from '../Icon';
-import Surface from '../Surface';
+import Icon from '../Icon';
+import type { IconSource } from '../Icon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
-import { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
+import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
 type BaseRoute = {
@@ -41,10 +35,9 @@ type BaseRoute = {
   unfocusedIcon?: IconSource;
   badge?: string | number | boolean;
   /**
-   * @deprecated In v5.x works only with theme version 2.
+   * Accessibility label for the tab. This is read by the screen reader when the user focuses the tab.
    */
-  color?: string;
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   testID?: string;
   lazy?: boolean;
 };
@@ -97,9 +90,8 @@ export type Props<Route extends BaseRoute> = {
    * - `title`: title of the route to use as the tab label
    * - `focusedIcon`:  icon to use as the focused tab icon, can be a string, an image source or a react component @renamed Renamed from 'icon' to 'focusedIcon' in v5.x
    * - `unfocusedIcon`:  icon to use as the unfocused tab icon, can be a string, an image source or a react component @supported Available in v5.x with theme version 3
-   * - `color`: color to use as background color for shifting bottom navigation @deprecatedProperty In v5.x works only with theme version 2.
    * - `badge`: badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text.
-   * - `accessibilityLabel`: accessibility label for the tab button
+   * - `aria-label`: accessibility label for the tab button
    * - `testID`: test id for the tab button
    *
    * Example:
@@ -125,7 +117,7 @@ export type Props<Route extends BaseRoute> = {
   renderIcon?: (props: {
     route: Route;
     focused: boolean;
-    color: string;
+    color: ColorValue;
   }) => React.ReactNode;
   /**
    * Callback which React Element to be used as tab label.
@@ -133,7 +125,7 @@ export type Props<Route extends BaseRoute> = {
   renderLabel?: (props: {
     route: Route;
     focused: boolean;
-    color: string;
+    color: ColorValue;
   }) => React.ReactNode;
   /**
    * Callback which returns a React element to be used as the touchable for the tab item.
@@ -142,17 +134,13 @@ export type Props<Route extends BaseRoute> = {
   renderTouchable?: (props: TouchableProps<Route>) => React.ReactNode;
   /**
    * Get accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
-   * Uses `route.accessibilityLabel` by default.
+   * Uses `route['aria-label']` by default.
    */
   getAccessibilityLabel?: (props: { route: Route }) => string | undefined;
   /**
    * Get badge for the tab, uses `route.badge` by default.
    */
   getBadge?: (props: { route: Route }) => boolean | number | string | undefined;
-  /**
-   * Get color for the tab, uses `route.color` by default.
-   */
-  getColor?: (props: { route: Route }) => string | undefined;
   /**
    * Get label text for the tab, uses `route.title` by default. Use `renderLabel` to replace label component.
    */
@@ -212,7 +200,6 @@ export type Props<Route extends BaseRoute> = {
   testID?: string;
 };
 
-const MIN_RIPPLE_SCALE = 0.001; // Minimum scale is not 0 due to bug with animation
 const MIN_TAB_WIDTH = 96;
 const MAX_TAB_WIDTH = 168;
 const BAR_HEIGHT = 56;
@@ -254,7 +241,7 @@ const Touchable = <Route extends BaseRoute>({
  * import { useState } from 'react';
  * import { View } from 'react-native';
  * import { BottomNavigation, Text, Provider } from 'react-native-paper';
- * import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+ * import MaterialCommunityIcons from '@react-native-vector-icons/material-design-icons';
  *
  * function HomeScreen() {
  *   return (
@@ -321,9 +308,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
   ),
   getLabelText = ({ route }: { route: Route }) => route.title,
   getBadge = ({ route }: { route: Route }) => route.badge,
-  getColor = ({ route }: { route: Route }) => route.color,
-  getAccessibilityLabel = ({ route }: { route: Route }) =>
-    route.accessibilityLabel,
+  getAccessibilityLabel = ({ route }: { route: Route }) => route['aria-label'],
   getTestID = ({ route }: { route: Route }) => route.testID,
   activeColor,
   inactiveColor,
@@ -338,15 +323,15 @@ const BottomNavigationBar = <Route extends BaseRoute>({
   safeAreaInsets,
   labelMaxFontSizeMultiplier = 1,
   compact: compactProp,
-  testID = 'bottom-navigation-bar',
+  testID,
   theme: themeOverrides,
 }: Props<Route>) => {
   const theme = useInternalTheme(themeOverrides);
+  const { colors } = theme;
   const { bottom, left, right } = useSafeAreaInsets();
   const { scale } = theme.animation;
-  const compact = compactProp ?? !theme.isV3;
-  let shifting =
-    shiftingProp ?? (theme.isV3 ? false : navigationState.routes.length > 3);
+  const compact = compactProp ?? false;
+  let shifting = shiftingProp ?? false;
 
   if (shifting && navigationState.routes.length < 2) {
     shifting = false;
@@ -371,18 +356,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
   );
 
   /**
-   * Index of the currently active tab. Used for setting the background color.
-   * We don't use the color as an animated value directly, because `setValue` seems to be buggy with colors?.
-   */
-  const indexAnim = useAnimatedValue(navigationState.index);
-
-  /**
-   * Animation for the background color ripple, used to determine it's scale and opacity.
-   */
-  const rippleAnim = useAnimatedValue(MIN_RIPPLE_SCALE);
-
-  /**
-   * Layout of the navigation bar. The width is used to determine the size and position of the ripple.
+   * Layout of the navigation bar.
    */
   const [layout, onLayout] = useLayout();
 
@@ -412,42 +386,21 @@ const BottomNavigationBar = <Route extends BaseRoute>({
 
   const animateToIndex = React.useCallback(
     (index: number) => {
-      // Reset the ripple to avoid glitch if it's currently animating
-      rippleAnim.setValue(MIN_RIPPLE_SCALE);
-
-      Animated.parallel([
-        Animated.timing(rippleAnim, {
-          toValue: 1,
-          duration: theme.isV3 || shifting ? 400 * scale : 0,
-          useNativeDriver: true,
-        }),
-        ...navigationState.routes.map((_, i) =>
+      Animated.parallel(
+        navigationState.routes.map((_, i) =>
           Animated.timing(tabsAnims[i], {
             toValue: i === index ? 1 : 0,
-            duration: theme.isV3 || shifting ? 150 * scale : 0,
+            duration: 150 * scale,
             useNativeDriver: true,
             easing: animationEasing,
           })
-        ),
-      ]).start(() => {
+        )
+      ).start(() => {
         // Workaround a bug in native animations where this is reset after first animation
         tabsAnims.map((tab, i) => tab.setValue(i === index ? 1 : 0));
-
-        // Update the index to change bar's background color and then hide the ripple
-        indexAnim.setValue(index);
-        rippleAnim.setValue(MIN_RIPPLE_SCALE);
       });
     },
-    [
-      rippleAnim,
-      theme.isV3,
-      shifting,
-      scale,
-      navigationState.routes,
-      tabsAnims,
-      animationEasing,
-      indexAnim,
-    ]
+    [scale, navigationState.routes, tabsAnims, animationEasing]
   );
 
   React.useEffect(() => {
@@ -479,74 +432,45 @@ const BottomNavigationBar = <Route extends BaseRoute>({
   };
 
   const { routes } = navigationState;
-  const { colors, dark: isDarkTheme, mode, isV3 } = theme;
 
-  const { backgroundColor: customBackground, elevation = 4 } =
-    (StyleSheet.flatten(style) || {}) as {
-      elevation?: number;
-      backgroundColor?: ColorValue;
-    };
+  const {
+    backgroundColor: customBackground,
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+  } = (StyleSheet.flatten(style) || {}) as {
+    backgroundColor?: ColorValue;
+  };
 
-  const approxBackgroundColor = customBackground
-    ? customBackground
-    : isDarkTheme && mode === 'adaptive'
-    ? overlay(elevation, colors?.surface)
-    : colors?.primary;
-
-  const v2BackgroundColorInterpolation = shifting
-    ? indexAnim.interpolate({
-        inputRange: routes.map((_, i) => i),
-        // FIXME: does outputRange support ColorValue or just strings?
-        // @ts-expect-error
-        outputRange: routes.map(
-          (route) => getColor({ route }) || approxBackgroundColor
-        ),
-      })
-    : approxBackgroundColor;
-
-  const backgroundColor = isV3
-    ? customBackground || theme.colors.elevation.level2
-    : shifting
-    ? v2BackgroundColorInterpolation
-    : approxBackgroundColor;
-
-  const isDark =
-    typeof approxBackgroundColor === 'string'
-      ? !color(approxBackgroundColor).isLight()
-      : true;
-
-  const textColor = isDark ? white : black;
+  const backgroundColor = customBackground || colors.surfaceContainer;
 
   const activeTintColor = getActiveTintColor({
     activeColor,
-    defaultColor: textColor,
     theme,
   });
 
   const inactiveTintColor = getInactiveTintColor({
     inactiveColor,
-    defaultColor: textColor,
     theme,
   });
-  const touchColor = color(activeTintColor).alpha(0.12).rgb().string();
 
   const maxTabWidth = routes.length > 3 ? MIN_TAB_WIDTH : MAX_TAB_WIDTH;
   const maxTabBarWidth = maxTabWidth * routes.length;
 
-  const rippleSize = layout.width / 4;
-
   const insets = {
     left: safeAreaInsets?.left ?? left,
     right: safeAreaInsets?.right ?? right,
     bottom: safeAreaInsets?.bottom ?? bottom,
   };
 
+  const pointerEvents = layout.measured
+    ? keyboardHidesNavigationBar && keyboardVisible
+      ? 'none'
+      : 'auto'
+    : 'none';
+
   return (
-    <Surface
-      {...(theme.isV3 && { elevation: 0 })}
+    <Animated.View
       testID={testID}
       style={[
-        !theme.isV3 && styles.elevation,
         styles.bar,
         keyboardHidesNavigationBar // eslint-disable-next-line react-native/no-inline-styles
           ? {
@@ -565,21 +489,11 @@ const BottomNavigationBar = <Route extends BaseRoute>({
             }
           : null,
         style,
+        { pointerEvents },
       ]}
-      pointerEvents={
-        layout.measured
-          ? keyboardHidesNavigationBar && keyboardVisible
-            ? 'none'
-            : 'auto'
-          : 'none'
-      }
       onLayout={onLayout}
-      container
     >
-      <Animated.View
-        style={[styles.barContent, { backgroundColor }]}
-        testID={`${testID}-content`}
-      >
+      <Animated.View style={[styles.barContent, { backgroundColor }]}>
         <View
           style={[
             styles.items,
@@ -591,59 +505,12 @@ const BottomNavigationBar = <Route extends BaseRoute>({
               maxWidth: maxTabBarWidth,
             },
           ]}
-          accessibilityRole={'tablist'}
-          testID={`${testID}-content-wrapper`}
+          role={'tablist'}
         >
-          {shifting && !isV3 ? (
-            <Animated.View
-              pointerEvents="none"
-              style={[
-                styles.ripple,
-                {
-                  // Since we have a single ripple, we have to reposition it so that it appears to expand from active tab.
-                  // We need to move it from the top to center of the navigation bar and from the left to the active tab.
-                  top: (BAR_HEIGHT - rippleSize) / 2,
-                  left:
-                    (Math.min(layout.width, maxTabBarWidth) / routes.length) *
-                      (navigationState.index + 0.5) -
-                    rippleSize / 2,
-                  height: rippleSize,
-                  width: rippleSize,
-                  borderRadius: rippleSize / 2,
-                  backgroundColor: getColor({
-                    route: routes[navigationState.index],
-                  }),
-                  transform: [
-                    {
-                      // Scale to twice the size  to ensure it covers the whole navigation bar
-                      scale: rippleAnim.interpolate({
-                        inputRange: [0, 1],
-                        outputRange: [0, 8],
-                      }),
-                    },
-                  ],
-                  opacity: rippleAnim.interpolate({
-                    inputRange: [0, MIN_RIPPLE_SCALE, 0.3, 1],
-                    outputRange: [0, 0, 1, 1],
-                  }),
-                },
-              ]}
-              testID={`${testID}-content-ripple`}
-            />
-          ) : null}
           {routes.map((route, index) => {
             const focused = navigationState.index === index;
             const active = tabsAnims[index];
 
-            // Scale the label up
-            const scale =
-              labeled && shifting
-                ? active.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [0.5, 1],
-                  })
-                : 1;
-
             // Move down the icon to account for no-label in shifting and smaller label in non-shifting.
             const translateY = labeled
               ? shifting
@@ -658,17 +525,19 @@ const BottomNavigationBar = <Route extends BaseRoute>({
             // This trick gives the illusion that we are animating between active and inactive colors.
             // This is to ensure that we can use native driver, as colors cannot be animated with native driver.
             const activeOpacity = active;
+
             const inactiveOpacity = active.interpolate({
               inputRange: [0, 1],
               outputRange: [1, 0],
             });
 
             const v3ActiveOpacity = focused ? 1 : 0;
+
             const v3InactiveOpacity = shifting
               ? inactiveOpacity
               : focused
-              ? 0
-              : 1;
+                ? 0
+                : 1;
 
             // Scale horizontally the outline pill
             const outlineScale = focused
@@ -684,7 +553,6 @@ const BottomNavigationBar = <Route extends BaseRoute>({
               tintColor: activeTintColor,
               hasColor: Boolean(activeColor),
               focused,
-              defaultColor: textColor,
               theme,
             });
 
@@ -692,55 +560,53 @@ const BottomNavigationBar = <Route extends BaseRoute>({
               tintColor: inactiveTintColor,
               hasColor: Boolean(inactiveColor),
               focused,
-              defaultColor: textColor,
               theme,
             });
 
             const badgeStyle = {
-              top: !isV3 ? -2 : typeof badge === 'boolean' ? 4 : 2,
+              top: typeof badge === 'boolean' ? 4 : 2,
               right:
-                (badge != null && typeof badge !== 'boolean'
+                badge != null && typeof badge !== 'boolean'
                   ? String(badge).length * -2
-                  : 0) - (!isV3 ? 2 : 0),
+                  : 0,
             };
 
-            const isLegacyOrV3Shifting = !isV3 || (isV3 && shifting && labeled);
+            const isLegacyOrV3Shifting = shifting && labeled;
 
-            const font = isV3 ? theme.fonts.labelMedium : {};
+            const font = theme.fonts.labelMedium;
 
             return renderTouchable({
               key: route.key,
               route,
               borderless: true,
               centered: true,
-              rippleColor: isV3 ? 'transparent' : touchColor,
+              rippleColor: 'transparent',
               onPress: () => onTabPress(eventForIndex(index)),
               onLongPress: () => onTabLongPress?.(eventForIndex(index)),
               testID: getTestID({ route }),
-              accessibilityLabel: getAccessibilityLabel({ route }),
-              accessibilityRole: Platform.OS === 'ios' ? 'button' : 'tab',
-              accessibilityState: { selected: focused },
-              style: [styles.item, isV3 && styles.v3Item],
+              'aria-label': getAccessibilityLabel({ route }),
+              role: Platform.OS === 'ios' ? 'button' : 'tab',
+              'aria-selected': focused,
+              style: [styles.item, styles.v3Item],
               children: (
                 <View
                   pointerEvents="none"
                   style={
-                    isV3 &&
-                    (labeled
+                    labeled
                       ? styles.v3TouchableContainer
-                      : styles.v3NoLabelContainer)
+                      : styles.v3NoLabelContainer
                   }
                 >
                   <Animated.View
                     style={[
                       styles.iconContainer,
-                      isV3 && styles.v3IconContainer,
+                      styles.v3IconContainer,
                       isLegacyOrV3Shifting && {
                         transform: [{ translateY }],
                       },
                     ]}
                   >
-                    {isV3 && focused && (
+                    {focused && (
                       <Animated.View
                         style={[
                           styles.outline,
@@ -750,7 +616,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
                                 scaleX: outlineScale,
                               },
                             ],
-                            backgroundColor: theme.colors.secondaryContainer,
+                            backgroundColor: colors.secondaryContainer,
                           },
                           activeIndicatorStyle,
                         ]}
@@ -759,7 +625,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
                     <Animated.View
                       style={[
                         styles.iconWrapper,
-                        isV3 && styles.v3IconWrapper,
+                        styles.v3IconWrapper,
                         {
                           opacity: isLegacyOrV3Shifting
                             ? activeOpacity
@@ -775,6 +641,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
                         })
                       ) : (
                         <Icon
+                          // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
                           source={route.focusedIcon as IconSource}
                           color={activeTintColor}
                           size={24}
@@ -784,7 +651,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
                     <Animated.View
                       style={[
                         styles.iconWrapper,
-                        isV3 && styles.v3IconWrapper,
+                        styles.v3IconWrapper,
                         {
                           opacity: isLegacyOrV3Shifting
                             ? inactiveOpacity
@@ -801,9 +668,11 @@ const BottomNavigationBar = <Route extends BaseRoute>({
                       ) : (
                         <Icon
                           source={
-                            theme.isV3 && route.unfocusedIcon !== undefined
+                            route.unfocusedIcon !== undefined
                               ? route.unfocusedIcon
-                              : (route.focusedIcon as IconSource)
+                              : // focusedIcon is required when renderIcon is omitted.
+                                // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+                                (route.focusedIcon as IconSource)
                           }
                           color={inactiveTintColor}
                           size={24}
@@ -812,21 +681,14 @@ const BottomNavigationBar = <Route extends BaseRoute>({
                     </Animated.View>
                     <View style={[styles.badgeContainer, badgeStyle]}>
                       {typeof badge === 'boolean' ? (
-                        <Badge visible={badge} size={isV3 ? 6 : 8} />
+                        <Badge visible={badge} />
                       ) : (
-                        <Badge visible={badge != null} size={16}>
-                          {badge}
-                        </Badge>
+                        <Badge visible={badge != null}>{badge}</Badge>
                       )}
                     </View>
                   </Animated.View>
                   {labeled ? (
-                    <Animated.View
-                      style={[
-                        styles.labelContainer,
-                        !isV3 && { transform: [{ scale }] },
-                      ]}
-                    >
+                    <Animated.View style={[styles.labelContainer]}>
                       <Animated.View
                         style={[
                           styles.labelWrapper,
@@ -895,16 +757,14 @@ const BottomNavigationBar = <Route extends BaseRoute>({
                         </Animated.View>
                       )}
                     </Animated.View>
-                  ) : (
-                    !isV3 && <View style={styles.labelContainer} />
-                  )}
+                  ) : null}
                 </View>
               ),
             });
           })}
         </View>
       </Animated.View>
-    </Surface>
+    </Animated.View>
   );
 };
 
@@ -939,9 +799,6 @@ const styles = StyleSheet.create({
   v3Item: {
     paddingVertical: 0,
   },
-  ripple: {
-    position: 'absolute',
-  },
   iconContainer: {
     height: 24,
     width: 24,
@@ -1002,7 +859,4 @@ const styles = StyleSheet.create({
     borderRadius: OUTLINE_WIDTH / 4,
     alignSelf: 'center',
   },
-  elevation: {
-    elevation: 4,
-  },
 });
diff --git a/src/components/BottomNavigation/BottomNavigationRouteScreen.tsx b/src/components/BottomNavigation/BottomNavigationRouteScreen.tsx
index e91f3ebf4c..affffc6793 100644
--- a/src/components/BottomNavigation/BottomNavigationRouteScreen.tsx
+++ b/src/components/BottomNavigation/BottomNavigationRouteScreen.tsx
@@ -1,5 +1,8 @@
-import React, { ReactNode } from 'react';
-import { Animated, Platform, View, ViewProps } from 'react-native';
+import React from 'react';
+import type { ReactNode } from 'react';
+// eslint-disable-next-line no-restricted-imports -- TODO: migrate BottomNavigation to Reanimated.
+import { Animated, Platform, View } from 'react-native';
+import type { ViewProps } from 'react-native';
 
 interface Props extends ViewProps {
   visibility?: 0 | 1 | Animated.AnimatedInterpolation<number>;
diff --git a/src/components/BottomNavigation/utils.ts b/src/components/BottomNavigation/utils.ts
index 93a4d95091..1f882cd256 100644
--- a/src/components/BottomNavigation/utils.ts
+++ b/src/components/BottomNavigation/utils.ts
@@ -1,70 +1,53 @@
-import color from 'color';
-import type { InternalTheme } from 'src/types';
+import type { ColorValue } from 'react-native';
 
-import type { black, white } from '../../styles/themes/v2/colors';
-
-type BaseProps = {
-  defaultColor: typeof black | typeof white;
-  theme: InternalTheme;
-};
+import type { InternalTheme } from '../../theme/types';
 
 export const getActiveTintColor = ({
   activeColor,
-  defaultColor,
   theme,
-}: BaseProps & {
-  activeColor: string | undefined;
+}: {
+  activeColor: ColorValue | undefined;
+  theme: InternalTheme;
 }) => {
-  if (typeof activeColor === 'string') {
+  if (activeColor != null) {
     return activeColor;
   }
 
-  if (theme.isV3) {
-    return theme.colors.onSecondaryContainer;
-  }
-
-  return defaultColor;
+  return theme.colors.onSecondaryContainer;
 };
 
 export const getInactiveTintColor = ({
   inactiveColor,
-  defaultColor,
   theme,
-}: BaseProps & {
-  inactiveColor: string | undefined;
+}: {
+  inactiveColor: ColorValue | undefined;
+  theme: InternalTheme;
 }) => {
-  if (typeof inactiveColor === 'string') {
+  if (inactiveColor != null) {
     return inactiveColor;
   }
 
-  if (theme.isV3) {
-    return theme.colors.onSurfaceVariant;
-  }
-
-  return color(defaultColor).alpha(0.5).rgb().string();
+  return theme.colors.onSurfaceVariant;
 };
 
 export const getLabelColor = ({
   tintColor,
   hasColor,
   focused,
-  defaultColor,
   theme,
-}: BaseProps & {
-  tintColor: string;
+}: {
+  tintColor: ColorValue;
   hasColor: boolean;
   focused: boolean;
+  theme: InternalTheme;
 }) => {
+  const { colors } = theme;
   if (hasColor) {
     return tintColor;
   }
 
-  if (theme.isV3) {
-    if (focused) {
-      return theme.colors.onSurface;
-    }
-    return theme.colors.onSurfaceVariant;
+  if (focused) {
+    return colors.onSurface;
   }
-
-  return defaultColor;
+  return colors.onSurfaceVariant;
 };
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 2e4d2cf519..6f07113572 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,39 +1,31 @@
 import * as React from 'react';
-import {
-  AccessibilityRole,
-  Animated,
+import { StyleSheet, View } from 'react-native';
+import type {
   ColorValue,
   GestureResponderEvent,
-  Platform,
   PressableAndroidRippleConfig,
+  Role,
   StyleProp,
-  StyleSheet,
   TextStyle,
-  View,
+  ViewProps,
   ViewStyle,
 } from 'react-native';
 
-import color from 'color';
-
-import {
-  ButtonMode,
-  getButtonColors,
-  getButtonTouchableRippleStyle,
-} from './utils';
+import { getButtonColors, getButtonTouchableRippleStyle } from './utils';
+import type { ButtonMode } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import type { $Omit, ThemeProp } from '../../types';
-import { forwardRef } from '../../utils/forwardRef';
+import type { ThemeProp } from '../../theme/types';
 import hasTouchHandler from '../../utils/hasTouchHandler';
-import { splitStyles } from '../../utils/splitStyles';
 import ActivityIndicator from '../ActivityIndicator';
-import Icon, { IconSource } from '../Icon';
+import Icon from '../Icon';
+import type { IconSource } from '../Icon';
 import Surface from '../Surface';
-import TouchableRipple, {
-  Props as TouchableRippleProps,
-} from '../TouchableRipple/TouchableRipple';
+import type { SurfaceStyle } from '../Surface';
+import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
-export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
+export type Props = Omit<ViewProps, 'style'> & {
   /**
    * Mode of the button. You can change the mode to adjust the styling to give it desired emphasis.
    * - `text` - flat button without background or outline, used for the lowest priority actions, especially when presenting multiple options.
@@ -53,23 +45,14 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Use a compact look, useful for `text` buttons in a row.
    */
   compact?: boolean;
-  /**
-   * @deprecated Deprecated in v5.x - use `buttonColor` or `textColor` instead.
-   * Custom text color for flat button, or background color for contained button.
-   */
-  color?: string;
   /**
    * Custom button's background color.
    */
-  buttonColor?: string;
+  buttonColor?: ColorValue;
   /**
    * Custom button's text color.
    */
-  textColor?: string;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
+  textColor?: ColorValue;
   /**
    * Whether to show a loading indicator.
    */
@@ -91,14 +74,14 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    */
   uppercase?: boolean;
   /**
-   * Type of background drawabale to display the feedback (Android).
+   * Type of background drawable to display the feedback (Android).
    * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: PressableAndroidRippleConfig;
   /**
    * Accessibility label for the button. This is read by the screen reader when the user taps the button.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * Accessibility hint for the button. This is read by the screen reader when the user taps the button.
    */
@@ -106,7 +89,7 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
   /**
    * Accessibility role for the button. The "button" role is set by default.
    */
-  accessibilityRole?: AccessibilityRole;
+  role?: Role;
   /**
    * Function to execute on press.
    */
@@ -140,7 +123,7 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Sets additional distance outside of element in which a press can be detected.
    */
   hitSlop?: TouchableRippleProps['hitSlop'];
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<SurfaceStyle>;
   /**
    * Style for the button text.
    */
@@ -153,6 +136,7 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Reference for the touchable
    */
   touchableRef?: React.RefObject<View>;
+  ref?: React.Ref<View>;
   /**
    * testID to be used on tests.
    */
@@ -176,51 +160,48 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
  * export default MyComponent;
  * ```
  */
-const Button = (
-  {
-    disabled,
-    compact,
-    mode = 'text',
-    dark,
-    loading,
-    icon,
-    buttonColor: customButtonColor,
-    textColor: customTextColor,
-    rippleColor: customRippleColor,
-    children,
-    accessibilityLabel,
-    accessibilityHint,
-    accessibilityRole = 'button',
-    hitSlop,
-    onPress,
-    onPressIn,
-    onPressOut,
-    onLongPress,
-    delayLongPress,
-    style,
-    theme: themeOverrides,
-    uppercase: uppercaseProp,
-    contentStyle,
-    labelStyle,
-    testID = 'button',
-    accessible,
-    background,
-    maxFontSizeMultiplier,
-    touchableRef,
-    ...rest
-  }: Props,
-  ref: React.ForwardedRef<View>
-) => {
+const Button = ({
+  disabled,
+  compact,
+  mode = 'text',
+  dark,
+  loading,
+  icon,
+  buttonColor: customButtonColor,
+  textColor: customTextColor,
+  children,
+  'aria-label': ariaLabel,
+  accessibilityHint,
+  role = 'button',
+  hitSlop,
+  onPress,
+  onPressIn,
+  onPressOut,
+  onLongPress,
+  delayLongPress,
+  style,
+  theme: themeOverrides,
+  uppercase: uppercaseProp,
+  contentStyle,
+  labelStyle,
+  testID,
+  accessible,
+  background,
+  maxFontSizeMultiplier,
+  touchableRef,
+  ref,
+  ...rest
+}: Props) => {
   const theme = useInternalTheme(themeOverrides);
+
   const isMode = React.useCallback(
     (modeToCompare: ButtonMode) => {
       return mode === modeToCompare;
     },
     [mode]
   );
-  const { roundness, isV3, animation } = theme;
-  const uppercase = uppercaseProp ?? !theme.isV3;
-  const isWeb = Platform.OS === 'web';
+
+  const uppercase = uppercaseProp ?? false;
 
   const hasPassedTouchHandler = hasTouchHandler({
     onPress,
@@ -229,89 +210,63 @@ const Button = (
     onLongPress,
   });
 
-  const isElevationEntitled =
-    !disabled && (isV3 ? isMode('elevated') : isMode('contained'));
-  const initialElevation = isV3 ? 1 : 2;
-  const activeElevation = isV3 ? 2 : 8;
+  const isElevationEntitled = !disabled && isMode('elevated');
+  const initialElevation = 1;
+  const activeElevation = 2;
 
-  const { current: elevation } = React.useRef<Animated.Value>(
-    new Animated.Value(isElevationEntitled ? initialElevation : 0)
-  );
+  const [pressed, setPressed] = React.useState(false);
 
-  React.useEffect(() => {
-    // Workaround not to call setValue on Animated.Value, because it breaks styles.
-    // https://github.com/callstack/react-native-paper/issues/4559
-    Animated.timing(elevation, {
-      toValue: isElevationEntitled ? initialElevation : 0,
-      duration: 0,
-      useNativeDriver: true,
-    });
-  }, [isElevationEntitled, elevation, initialElevation]);
+  const elevation = isElevationEntitled
+    ? pressed
+      ? activeElevation
+      : initialElevation
+    : 0;
 
   const handlePressIn = (e: GestureResponderEvent) => {
     onPressIn?.(e);
-    if (isV3 ? isMode('elevated') : isMode('contained')) {
-      const { scale } = animation;
-      Animated.timing(elevation, {
-        toValue: activeElevation,
-        duration: 200 * scale,
-        useNativeDriver:
-          isWeb || Platform.constants.reactNativeVersion.minor <= 72,
-      }).start();
+
+    if (isElevationEntitled) {
+      setPressed(true);
     }
   };
 
   const handlePressOut = (e: GestureResponderEvent) => {
     onPressOut?.(e);
-    if (isV3 ? isMode('elevated') : isMode('contained')) {
-      const { scale } = animation;
-      Animated.timing(elevation, {
-        toValue: initialElevation,
-        duration: 150 * scale,
-        useNativeDriver:
-          isWeb || Platform.constants.reactNativeVersion.minor <= 72,
-      }).start();
+
+    if (isElevationEntitled) {
+      setPressed(false);
     }
   };
 
-  const flattenedStyles = (StyleSheet.flatten(style) || {}) as ViewStyle;
-  const [, borderRadiusStyles] = splitStyles(
-    flattenedStyles,
-    (style) => style.startsWith('border') && style.endsWith('Radius')
-  );
-
-  const borderRadius = (isV3 ? 5 : 1) * roundness;
-  const iconSize = isV3 ? 18 : 16;
+  const elevationTransitionDuration =
+    theme.motion.duration[pressed ? 'short4' : 'short3'] *
+    theme.animation.scale;
 
-  const { backgroundColor, borderColor, textColor, borderWidth } =
-    getButtonColors({
-      customButtonColor,
-      customTextColor,
-      theme,
-      mode,
-      disabled,
-      dark,
-    });
-
-  const rippleColor =
-    customRippleColor || color(textColor).alpha(0.12).rgb().string();
-
-  const touchableStyle = {
-    ...borderRadiusStyles,
-    borderRadius: borderRadiusStyles.borderRadius ?? borderRadius,
-  };
+  const borderRadius = theme.shapes.corner.largeIncreased;
+  const iconSize = 18;
 
-  const buttonStyle = {
+  const {
     backgroundColor,
     borderColor,
+    textColor,
+    textOpacity,
     borderWidth,
-    ...touchableStyle,
-  };
+    backgroundOpacity,
+  } = getButtonColors({
+    customButtonColor,
+    customTextColor,
+    theme,
+    mode,
+    disabled,
+    dark,
+  });
+
+  const touchableStyle = { borderRadius };
 
   const { color: customLabelColor, fontSize: customLabelSize } =
     StyleSheet.flatten(labelStyle) || {};
 
-  const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium;
+  const font = theme.fonts.labelLarge;
 
   const textStyle = {
     color: textColor,
@@ -322,16 +277,14 @@ const Button = (
     StyleSheet.flatten(contentStyle)?.flexDirection === 'row-reverse'
       ? [
           styles.iconReverse,
-          isV3 && styles[`md3IconReverse${compact ? 'Compact' : ''}`],
-          isV3 &&
-            isMode('text') &&
+          styles[`md3IconReverse${compact ? 'Compact' : ''}`],
+          isMode('text') &&
             styles[`md3IconReverseTextMode${compact ? 'Compact' : ''}`],
         ]
       : [
           styles.icon,
-          isV3 && styles[`md3Icon${compact ? 'Compact' : ''}`],
-          isV3 &&
-            isMode('text') &&
+          styles[`md3Icon${compact ? 'Compact' : ''}`],
+          isMode('text') &&
             styles[`md3IconTextMode${compact ? 'Compact' : ''}`],
         ];
 
@@ -339,19 +292,33 @@ const Button = (
     <Surface
       {...rest}
       ref={ref}
-      testID={`${testID}-container`}
-      style={
-        [
-          styles.button,
-          compact && styles.compact,
-          buttonStyle,
-          style,
-          !isV3 && !disabled && { elevation },
-        ] as Animated.WithAnimatedValue<StyleProp<ViewStyle>>
-      }
-      {...(isV3 && { elevation: elevation })}
-      container
+      backgroundColor={backgroundOpacity < 1 ? 'transparent' : backgroundColor}
+      {...touchableStyle}
+      style={[
+        styles.button,
+        compact && styles.compact,
+        {
+          borderColor,
+          borderWidth,
+        },
+        style,
+      ]}
+      elevation={elevation}
+      transitionDuration={elevationTransitionDuration}
     >
+      {backgroundOpacity < 1 && (
+        <View
+          pointerEvents="none"
+          style={[
+            StyleSheet.absoluteFill,
+            {
+              backgroundColor,
+              opacity: backgroundOpacity,
+              borderRadius: touchableStyle.borderRadius,
+            },
+          ]}
+        />
+      )}
       <TouchableRipple
         borderless
         background={background}
@@ -360,22 +327,21 @@ const Button = (
         onPressIn={hasPassedTouchHandler ? handlePressIn : undefined}
         onPressOut={hasPassedTouchHandler ? handlePressOut : undefined}
         delayLongPress={delayLongPress}
-        accessibilityLabel={accessibilityLabel}
+        aria-label={ariaLabel}
         accessibilityHint={accessibilityHint}
-        accessibilityRole={accessibilityRole}
-        accessibilityState={{ disabled }}
+        role={role}
+        aria-disabled={disabled}
         accessible={accessible}
         hitSlop={hitSlop}
         disabled={disabled}
-        rippleColor={rippleColor}
         style={getButtonTouchableRippleStyle(touchableStyle, borderWidth)}
         testID={testID}
         theme={theme}
         ref={touchableRef}
       >
-        <View style={[styles.content, contentStyle]}>
+        <View style={[styles.content, { opacity: textOpacity }, contentStyle]}>
           {icon && loading !== true ? (
-            <View style={iconStyle} testID={`${testID}-icon-container`}>
+            <View style={iconStyle}>
               <Icon
                 source={icon}
                 size={customLabelSize ?? iconSize}
@@ -402,16 +368,13 @@ const Button = (
             variant="labelLarge"
             selectable={false}
             numberOfLines={1}
-            testID={`${testID}-text`}
             style={[
               styles.label,
-              !isV3 && styles.md2Label,
-              isV3 &&
-                (isMode('text')
-                  ? icon || loading
-                    ? styles.md3LabelTextAddons
-                    : styles.md3LabelText
-                  : styles.md3Label),
+              isMode('text')
+                ? icon || loading
+                  ? styles.md3LabelTextAddons
+                  : styles.md3LabelText
+                : styles.md3Label,
               compact && styles.compactLabel,
               uppercase && styles.uppercaseLabel,
               textStyle,
@@ -487,9 +450,6 @@ const styles = StyleSheet.create({
     marginVertical: 9,
     marginHorizontal: 16,
   },
-  md2Label: {
-    letterSpacing: 1,
-  },
   compactLabel: {
     marginHorizontal: 8,
   },
@@ -508,4 +468,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default forwardRef(Button);
+export default Button;
diff --git a/src/components/Button/utils.tsx b/src/components/Button/utils.tsx
index 2c8738c62a..ec3503c82b 100644
--- a/src/components/Button/utils.tsx
+++ b/src/components/Button/utils.tsx
@@ -1,11 +1,12 @@
-import { StyleSheet, type ViewStyle } from 'react-native';
+import type { ColorValue, ViewStyle } from 'react-native';
 
-import color from 'color';
-
-import { black, white } from '../../styles/themes/v2/colors';
-import type { InternalTheme } from '../../types';
+import { black, white } from '../../theme/colors';
+import { tokens } from '../../theme/tokens';
+import type { InternalTheme } from '../../theme/types';
 import { splitStyles } from '../../utils/splitStyles';
 
+const stateOpacity = tokens.md.sys.state.opacity;
+
 export type ButtonMode =
   | 'text'
   | 'outlined'
@@ -24,7 +25,7 @@ const isDark = ({
   backgroundColor,
 }: {
   dark?: boolean;
-  backgroundColor?: string;
+  backgroundColor?: ColorValue;
 }) => {
   if (typeof dark === 'boolean') {
     return dark;
@@ -34,10 +35,6 @@ const isDark = ({
     return false;
   }
 
-  if (backgroundColor !== 'transparent') {
-    return !color(backgroundColor).isLight();
-  }
-
   return false;
 };
 
@@ -47,43 +44,30 @@ const getButtonBackgroundColor = ({
   disabled,
   customButtonColor,
 }: BaseProps & {
-  customButtonColor?: string;
+  customButtonColor?: ColorValue;
 }) => {
+  const { colors } = theme;
   if (customButtonColor && !disabled) {
     return customButtonColor;
   }
 
-  if (theme.isV3) {
-    if (disabled) {
-      if (isMode('outlined') || isMode('text')) {
-        return 'transparent';
-      }
-
-      return theme.colors.surfaceDisabled;
-    }
-
-    if (isMode('elevated')) {
-      return theme.colors.elevation.level1;
-    }
-
-    if (isMode('contained')) {
-      return theme.colors.primary;
+  if (disabled) {
+    if (isMode('outlined') || isMode('text')) {
+      return 'transparent';
     }
+    return colors.onSurface;
+  }
 
-    if (isMode('contained-tonal')) {
-      return theme.colors.secondaryContainer;
-    }
+  if (isMode('elevated')) {
+    return colors.surfaceContainerLow;
   }
 
   if (isMode('contained')) {
-    if (disabled) {
-      return color(theme.dark ? white : black)
-        .alpha(0.12)
-        .rgb()
-        .string();
-    }
+    return colors.primary;
+  }
 
-    return theme.colors.primary;
+  if (isMode('contained-tonal')) {
+    return colors.secondaryContainer;
   }
 
   return 'transparent';
@@ -97,89 +81,55 @@ const getButtonTextColor = ({
   backgroundColor,
   dark,
 }: BaseProps & {
-  customTextColor?: string;
-  backgroundColor: string;
+  customTextColor?: ColorValue;
+  backgroundColor: ColorValue;
   dark?: boolean;
 }) => {
+  const { colors } = theme;
   if (customTextColor && !disabled) {
     return customTextColor;
   }
 
-  if (theme.isV3) {
-    if (disabled) {
-      return theme.colors.onSurfaceDisabled;
-    }
-
-    if (typeof dark === 'boolean') {
-      if (
-        isMode('contained') ||
-        isMode('contained-tonal') ||
-        isMode('elevated')
-      ) {
-        return isDark({ dark, backgroundColor }) ? white : black;
-      }
-    }
-
-    if (isMode('outlined') || isMode('text') || isMode('elevated')) {
-      return theme.colors.primary;
-    }
-
-    if (isMode('contained')) {
-      return theme.colors.onPrimary;
-    }
+  if (disabled) {
+    return theme.colors.onSurface;
+  }
 
-    if (isMode('contained-tonal')) {
-      return theme.colors.onSecondaryContainer;
+  if (typeof dark === 'boolean') {
+    if (
+      isMode('contained') ||
+      isMode('contained-tonal') ||
+      isMode('elevated')
+    ) {
+      return isDark({ dark, backgroundColor }) ? white : black;
     }
   }
 
-  if (disabled) {
-    return color(theme.dark ? white : black)
-      .alpha(0.32)
-      .rgb()
-      .string();
+  if (isMode('outlined') || isMode('text') || isMode('elevated')) {
+    return colors.primary;
   }
 
   if (isMode('contained')) {
-    return isDark({ dark, backgroundColor }) ? white : black;
+    return colors.onPrimary;
   }
 
-  return theme.colors.primary;
-};
-
-const getButtonBorderColor = ({ isMode, disabled, theme }: BaseProps) => {
-  if (theme.isV3) {
-    if (disabled && isMode('outlined')) {
-      return theme.colors.surfaceDisabled;
-    }
-
-    if (isMode('outlined')) {
-      return theme.colors.outline;
-    }
+  if (isMode('contained-tonal')) {
+    return colors.onSecondaryContainer;
   }
 
+  return colors.primary;
+};
+
+const getButtonBorderColor = ({ isMode, theme }: BaseProps) => {
   if (isMode('outlined')) {
-    return color(theme.dark ? white : black)
-      .alpha(0.29)
-      .rgb()
-      .string();
+    return theme.colors.outlineVariant;
   }
 
   return 'transparent';
 };
 
-const getButtonBorderWidth = ({
-  isMode,
-  theme,
-}: Omit<BaseProps, 'disabled'>) => {
-  if (theme.isV3) {
-    if (isMode('outlined')) {
-      return 1;
-    }
-  }
-
+const getButtonBorderWidth = ({ isMode }: Omit<BaseProps, 'disabled'>) => {
   if (isMode('outlined')) {
-    return StyleSheet.hairlineWidth;
+    return 1;
   }
 
   return 0;
@@ -195,8 +145,8 @@ export const getButtonColors = ({
 }: {
   theme: InternalTheme;
   mode: ButtonMode;
-  customButtonColor?: string;
-  customTextColor?: string;
+  customButtonColor?: ColorValue;
+  customTextColor?: ColorValue;
   disabled?: boolean;
   dark?: boolean;
 }) => {
@@ -220,15 +170,24 @@ export const getButtonColors = ({
     dark,
   });
 
-  const borderColor = getButtonBorderColor({ isMode, theme, disabled });
+  const borderColor = getButtonBorderColor({ isMode, theme });
 
   const borderWidth = getButtonBorderWidth({ isMode, theme });
 
+  const textOpacity = disabled ? stateOpacity.disabled : stateOpacity.enabled;
+
+  const backgroundOpacity =
+    disabled && !isMode('outlined') && !isMode('text')
+      ? stateOpacity.pressed
+      : stateOpacity.enabled;
+
   return {
     backgroundColor,
     borderColor,
     textColor,
+    textOpacity,
     borderWidth,
+    backgroundOpacity,
   };
 };
 
@@ -258,14 +217,16 @@ export const getButtonTouchableRippleStyle = (
     (style) => style.startsWith('border') && style.endsWith('Radius')
   );
 
-  (
-    Object.keys(borderRadiusStyles) as Array<keyof ViewStyleBorderRadiusStyles>
-  ).forEach((key) => {
-    const value = style[key as keyof ViewStyleBorderRadiusStyles];
+  const borderRadiusKeys =
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+    Object.keys(borderRadiusStyles) as Array<keyof ViewStyleBorderRadiusStyles>;
+
+  borderRadiusKeys.forEach((key) => {
+    const value = style[key];
     if (typeof value === 'number') {
       // Only subtract borderWidth if value is greater than 0
       const radius = value > 0 ? value - borderWidth : 0;
-      touchableRippleStyle[key as keyof ViewStyleBorderRadiusStyles] = radius;
+      touchableRippleStyle[key] = radius;
     }
   });
   return touchableRippleStyle;
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index 848be9fa13..75a3941bab 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -1,11 +1,9 @@
 import * as React from 'react';
-import {
-  Animated,
+import { StyleSheet, Pressable, View } from 'react-native';
+import type {
   GestureResponderEvent,
   StyleProp,
-  StyleSheet,
-  Pressable,
-  View,
+  ViewProps,
   ViewStyle,
 } from 'react-native';
 
@@ -13,22 +11,15 @@ import useLatestCallback from 'use-latest-callback';
 
 import CardActions from './CardActions';
 import CardContent from './CardContent';
+import { CardContext } from './CardContext';
 import CardCover from './CardCover';
 import CardTitle from './CardTitle';
 import { getCardColors } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import type { $Omit, ThemeProp } from '../../types';
-import { forwardRef } from '../../utils/forwardRef';
+import type { Elevation, ThemeProp } from '../../theme/types';
 import hasTouchHandler from '../../utils/hasTouchHandler';
-import { splitStyles } from '../../utils/splitStyles';
 import Surface from '../Surface';
-
-type CardComposition = {
-  Content: typeof CardContent;
-  Actions: typeof CardActions;
-  Cover: typeof CardCover;
-  Title: typeof CardTitle;
-};
+import type { SurfaceStyle } from '../Surface';
 
 type OutlinedCardProps = {
   mode: 'outlined';
@@ -37,7 +28,7 @@ type OutlinedCardProps = {
 
 type ElevatedCardProps = {
   mode?: 'elevated';
-  elevation?: number;
+  elevation?: Elevation;
 };
 
 type ContainedCardProps = {
@@ -45,11 +36,10 @@ type ContainedCardProps = {
   elevation?: never;
 };
 
-type HandlePressType = 'in' | 'out';
-
 type Mode = 'elevated' | 'outlined' | 'contained';
+type Direction = 'vertical' | 'horizontal';
 
-export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
+export type Props = Omit<ViewProps, 'style'> & {
   /**
    * Mode of the Card.
    * - `elevated` - Card with elevation.
@@ -57,6 +47,12 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * - `outlined` - Card with an outline.
    */
   mode?: Mode;
+  /**
+   * Direction of the Card's content.
+   * - `vertical`
+   * - `horizontal`
+   */
+  direction?: Direction;
   /**
    * Content of the `Card`.
    */
@@ -88,12 +84,12 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
   /**
    * Changes Card shadow and background on iOS and Android.
    */
-  elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
+  elevation?: Elevation;
   /**
-   * Style of card's inner content.
+   * Style of card's content.
    */
   contentStyle?: StyleProp<ViewStyle>;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<SurfaceStyle>;
   /**
    * @optional
    */
@@ -106,8 +102,15 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Pass down accessible from card props to touchable
    */
   accessible?: boolean;
+  /**
+   * Reference to the card container.
+   */
+  ref?: React.Ref<View>;
 };
 
+const DEFAULT_CARD_GAP = 16;
+const DEFAULT_CARD_PADDING = 16;
+
 /**
  * A card is a sheet of material that serves as an entry point to more detailed information.
  *
@@ -120,15 +123,15 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
  *
  * const MyComponent = () => (
  *   <Card>
+ *     <Card.Cover source={{ uri: 'https://picsum.photos/700' }} />
  *     <Card.Title title="Card Title" subtitle="Card Subtitle" left={LeftContent} />
  *     <Card.Content>
  *       <Text variant="titleLarge">Card title</Text>
  *       <Text variant="bodyMedium">Card content</Text>
  *     </Card.Content>
- *     <Card.Cover source={{ uri: 'https://picsum.photos/700' }} />
  *     <Card.Actions>
- *       <Button>Cancel</Button>
- *       <Button>Ok</Button>
+ *       <Button mode="outlined">Cancel</Button>
+ *       <Button mode="contained">Ok</Button>
  *     </Card.Actions>
  *   </Card>
  * );
@@ -136,28 +139,27 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
  * export default MyComponent;
  * ```
  */
-
-const Card = (
-  {
-    elevation: cardElevation = 1,
-    delayLongPress,
-    onPress,
-    onLongPress,
-    onPressOut,
-    onPressIn,
-    mode: cardMode = 'elevated',
-    children,
-    style,
-    contentStyle,
-    theme: themeOverrides,
-    testID = 'card',
-    accessible,
-    disabled,
-    ...rest
-  }: (OutlinedCardProps | ElevatedCardProps | ContainedCardProps) & Props,
-  ref: React.ForwardedRef<View>
-) => {
+const Card = ({
+  elevation: cardElevation = 1,
+  delayLongPress,
+  onPress,
+  onLongPress,
+  onPressOut,
+  onPressIn,
+  mode: cardMode = 'elevated',
+  direction: cardDirection = 'vertical',
+  children,
+  style,
+  contentStyle,
+  theme: themeOverrides,
+  testID,
+  accessible,
+  disabled,
+  ref,
+  ...rest
+}: (OutlinedCardProps | ElevatedCardProps | ContainedCardProps) & Props) => {
   const theme = useInternalTheme(themeOverrides);
+
   const isMode = React.useCallback(
     (modeToCompare: Mode) => {
       return cardMode === modeToCompare;
@@ -172,152 +174,81 @@ const Card = (
     onPressOut,
   });
 
-  // Default animated value
-  const { current: elevation } = React.useRef<Animated.Value>(
-    new Animated.Value(cardElevation)
-  );
-  // Dark adaptive animated value, used in case of toggling the theme,
-  // it prevents animating the background with native drivers inside Surface
-  const { current: elevationDarkAdaptive } = React.useRef<Animated.Value>(
-    new Animated.Value(cardElevation)
-  );
-  const { animation, dark, mode, roundness, isV3 } = theme;
-
-  const prevDarkRef = React.useRef<boolean>(dark);
-  React.useEffect(() => {
-    prevDarkRef.current = dark;
-  });
-
-  const prevDark = prevDarkRef.current;
-  const isAdaptiveMode = mode === 'adaptive';
-  const animationDuration = 150 * animation.scale;
-
-  React.useEffect(() => {
-    /**
-     * Resets animations values if updating to dark adaptive mode,
-     * otherwise, any card that is in the middle of animation while
-     * toggling the theme will stay at that animated value until
-     * the next press-in
-     */
-    if (dark && isAdaptiveMode && !prevDark) {
-      elevation.setValue(cardElevation);
-      elevationDarkAdaptive.setValue(cardElevation);
-    }
-  }, [
-    prevDark,
-    dark,
-    isAdaptiveMode,
-    cardElevation,
-    elevation,
-    elevationDarkAdaptive,
-  ]);
-
-  const runElevationAnimation = (pressType: HandlePressType) => {
-    if (isV3 && isMode('contained')) {
-      return;
-    }
-
-    const isPressTypeIn = pressType === 'in';
-    if (dark && isAdaptiveMode) {
-      Animated.timing(elevationDarkAdaptive, {
-        toValue: isPressTypeIn ? (isV3 ? 2 : 8) : cardElevation,
-        duration: animationDuration,
-        useNativeDriver: false,
-      }).start();
-    } else {
-      Animated.timing(elevation, {
-        toValue: isPressTypeIn ? (isV3 ? 2 : 8) : cardElevation,
-        duration: animationDuration,
-        useNativeDriver: false,
-      }).start();
-    }
-  };
+  const [pressed, setPressed] = React.useState(false);
+  const elevation = isMode('elevated') ? (pressed ? 2 : cardElevation) : 0;
 
   const handlePressIn = useLatestCallback((e: GestureResponderEvent) => {
     onPressIn?.(e);
-    runElevationAnimation('in');
+
+    if (isMode('elevated')) {
+      setPressed(true);
+    }
   });
 
   const handlePressOut = useLatestCallback((e: GestureResponderEvent) => {
     onPressOut?.(e);
-    runElevationAnimation('out');
-  });
 
-  const total = React.Children.count(children);
-  const siblings = React.Children.map(children, (child) =>
-    React.isValidElement(child) && child.type
-      ? (child.type as any).displayName
-      : null
-  );
-  const computedElevation =
-    dark && isAdaptiveMode ? elevationDarkAdaptive : elevation;
+    if (isMode('elevated')) {
+      setPressed(false);
+    }
+  });
 
   const { backgroundColor, borderColor: themedBorderColor } = getCardColors({
     theme,
     mode: cardMode,
   });
 
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
   const flattenedStyles = (StyleSheet.flatten(style) || {}) as ViewStyle;
 
   const { borderColor = themedBorderColor } = flattenedStyles;
 
-  const [, borderRadiusStyles] = splitStyles(
-    flattenedStyles,
-    (style) => style.startsWith('border') && style.endsWith('Radius')
-  );
+  const borderRadius = theme.shapes.corner.medium;
 
-  const borderRadiusCombinedStyles = {
-    borderRadius: (isV3 ? 3 : 1) * roundness,
-    ...borderRadiusStyles,
-  };
+  const cardContext = React.useMemo(
+    () => ({ padding: DEFAULT_CARD_PADDING, direction: cardDirection }),
+    [cardDirection]
+  );
 
   const content = (
-    <View style={[styles.innerContainer, contentStyle]} testID={testID}>
-      {React.Children.map(children, (child, index) =>
-        React.isValidElement(child)
-          ? React.cloneElement(child as React.ReactElement<any>, {
-              index,
-              total,
-              siblings,
-              borderRadiusStyles,
-            })
-          : child
-      )}
-    </View>
+    <CardContext.Provider value={cardContext}>
+      <View
+        style={[
+          styles.content,
+          { borderRadius },
+          cardDirection === 'horizontal' ? styles.horizontal : styles.vertical,
+          contentStyle,
+          {
+            padding: DEFAULT_CARD_PADDING,
+            gap: DEFAULT_CARD_GAP,
+          },
+        ]}
+      >
+        {children}
+      </View>
+    </CardContext.Provider>
   );
 
   return (
     <Surface
       ref={ref}
-      style={[
-        isV3 && !isMode('elevated') && { backgroundColor },
-        !isV3 &&
-          (isMode('outlined')
-            ? styles.resetElevation
-            : {
-                elevation: computedElevation as unknown as number,
-              }),
-        borderRadiusCombinedStyles,
-        style,
-      ]}
+      borderRadius={borderRadius}
+      backgroundColor={!isMode('elevated') ? backgroundColor : undefined}
+      style={[{ borderColor }, style]}
       theme={theme}
-      {...(isV3 && {
-        elevation: isMode('elevated') ? computedElevation : 0,
-      })}
-      testID={`${testID}-container`}
-      container
+      elevation={elevation}
+      testID={hasPassedTouchHandler ? undefined : testID}
       {...rest}
     >
       {isMode('outlined') && (
         <View
           pointerEvents="none"
-          testID={`${testID}-outline`}
           style={[
             {
               borderColor,
             },
             styles.outline,
-            borderRadiusCombinedStyles,
+            { borderRadius },
           ]}
         />
       )}
@@ -332,6 +263,7 @@ const Card = (
           onPress={onPress}
           onPressIn={handlePressIn}
           onPressOut={handlePressOut}
+          testID={testID}
         >
           {content}
         </Pressable>
@@ -343,22 +275,26 @@ const Card = (
 };
 
 Card.displayName = 'Card';
-const Component = forwardRef(Card);
-
-const CardComponent = Component as typeof Component & CardComposition;
 
 // @component ./CardContent.tsx
-CardComponent.Content = CardContent;
+Card.Content = CardContent;
 // @component ./CardActions.tsx
-CardComponent.Actions = CardActions;
+Card.Actions = CardActions;
 // @component ./CardCover.tsx
-CardComponent.Cover = CardCover;
+Card.Cover = CardCover;
 // @component ./CardTitle.tsx
-CardComponent.Title = CardTitle;
+Card.Title = CardTitle;
 
 const styles = StyleSheet.create({
-  innerContainer: {
+  content: {
     flexShrink: 1,
+    overflow: 'hidden',
+  },
+  horizontal: {
+    flexDirection: 'row',
+  },
+  vertical: {
+    flexDirection: 'column',
   },
   outline: {
     borderWidth: 1,
@@ -367,9 +303,6 @@ const styles = StyleSheet.create({
     height: '100%',
     zIndex: 2,
   },
-  resetElevation: {
-    elevation: 0,
-  },
 });
 
-export default CardComponent;
+export default Card;
diff --git a/src/components/Card/CardActions.tsx b/src/components/Card/CardActions.tsx
index 17cdc39665..8246a7ec65 100644
--- a/src/components/Card/CardActions.tsx
+++ b/src/components/Card/CardActions.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 
-import type { ThemeProp } from 'src/types';
-
-import { CardActionChildProps } from './utils';
+import { CardContext } from './CardContext';
 import { useInternalTheme } from '../../core/theming';
+import type { ThemeProp } from '../../theme/types';
 
-export type Props = React.ComponentPropsWithRef<typeof View> & {
+export type Props = ViewProps & {
   /**
    * Items inside the `CardActions`.
    */
@@ -26,8 +26,8 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
  * const MyComponent = () => (
  *   <Card>
  *     <Card.Actions>
- *       <Button>Cancel</Button>
- *       <Button>Ok</Button>
+ *       <Button mode="outlined">Cancel</Button>
+ *       <Button mode="contained">Ok</Button>
  *     </Card.Actions>
  *   </Card>
  * );
@@ -36,33 +36,33 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
  * ```
  */
 const CardActions = ({ theme, style, children, ...rest }: Props) => {
-  const { isV3 } = useInternalTheme(theme);
-
-  const justifyContent = (
-    isV3 ? 'flex-end' : 'flex-start'
-  ) as ViewStyle['justifyContent'];
-  const containerStyle = [styles.container, { justifyContent }, style];
+  useInternalTheme(theme);
+  const cardContext = React.useContext(CardContext);
 
-  return (
-    <View {...rest} style={containerStyle}>
-      {React.Children.map(children, (child, index) => {
-        if (!React.isValidElement<CardActionChildProps>(child)) {
-          return child;
+  const cardMarginStyle = cardContext
+    ? cardContext.direction === 'horizontal'
+      ? {
+          marginTop: -cardContext.padding,
+          marginRight: -cardContext.padding,
+          marginBottom: -cardContext.padding,
         }
+      : {
+          marginLeft: -cardContext.padding,
+          marginRight: -cardContext.padding,
+          marginBottom: -cardContext.padding,
+        }
+    : null;
 
-        const compact = !isV3 && child.props.compact !== false;
-        const mode =
-          child.props.mode ??
-          (isV3 ? (index === 0 ? 'outlined' : 'contained') : undefined);
-        const childStyle = [isV3 && styles.button, child.props.style];
+  const containerStyle = [
+    styles.container,
+    cardMarginStyle,
+    { justifyContent: 'flex-end' } satisfies ViewStyle,
+    style,
+  ];
 
-        return React.cloneElement(child, {
-          ...child.props,
-          compact,
-          mode,
-          style: childStyle,
-        });
-      })}
+  return (
+    <View {...rest} style={containerStyle}>
+      {children}
     </View>
   );
 };
@@ -73,10 +73,9 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    padding: 8,
-  },
-  button: {
-    marginLeft: 8,
+    columnGap: 8,
+    paddingHorizontal: 8,
+    paddingBottom: 8,
   },
 });
 
diff --git a/src/components/Card/CardContent.tsx b/src/components/Card/CardContent.tsx
index 7a23db4756..fea1e519da 100644
--- a/src/components/Card/CardContent.tsx
+++ b/src/components/Card/CardContent.tsx
@@ -1,23 +1,12 @@
 import * as React from 'react';
-import { StyleSheet, StyleProp, View, ViewStyle } from 'react-native';
+import { View } from 'react-native';
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 
-export type Props = React.ComponentPropsWithRef<typeof View> & {
+export type Props = ViewProps & {
   /**
    * Items inside the `Card.Content`.
    */
   children: React.ReactNode;
-  /**
-   * @internal
-   */
-  index?: number;
-  /**
-   * @internal
-   */
-  total?: number;
-  /**
-   * @internal
-   */
-  siblings?: Array<string>;
   style?: StyleProp<ViewStyle>;
 };
 
@@ -41,59 +30,10 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
  * export default MyComponent;
  * ```
  */
-const CardContent = ({ index, total, siblings, style, ...rest }: Props) => {
-  const cover = 'withInternalTheme(CardCover)';
-  const title = 'withInternalTheme(CardTitle)';
-
-  let contentStyle, prev, next;
-
-  if (typeof index === 'number' && siblings) {
-    prev = siblings[index - 1];
-    next = siblings[index + 1];
-  }
-
-  if (
-    (prev === cover && next === cover) ||
-    (prev === title && next === title) ||
-    total === 1
-  ) {
-    contentStyle = styles.only;
-  } else if (index === 0) {
-    if (next === cover || next === title) {
-      contentStyle = styles.only;
-    } else {
-      contentStyle = styles.first;
-    }
-  } else if (typeof total === 'number' && index === total - 1) {
-    if (prev === cover || prev === title) {
-      contentStyle = styles.only;
-    } else {
-      contentStyle = styles.last;
-    }
-  } else if (prev === cover || prev === title) {
-    contentStyle = styles.first;
-  } else if (next === cover || next === title) {
-    contentStyle = styles.last;
-  }
-
-  return <View {...rest} style={[styles.container, contentStyle, style]} />;
-};
+const CardContent = ({ style, ...rest }: Props) => (
+  <View {...rest} style={style} />
+);
 
 CardContent.displayName = 'Card.Content';
 
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: 16,
-  },
-  first: {
-    paddingTop: 16,
-  },
-  last: {
-    paddingBottom: 16,
-  },
-  only: {
-    paddingVertical: 16,
-  },
-});
-
 export default CardContent;
diff --git a/src/components/Card/CardContext.tsx b/src/components/Card/CardContext.tsx
new file mode 100644
index 0000000000..1cf9bf0173
--- /dev/null
+++ b/src/components/Card/CardContext.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+type CardContextType = {
+  /**
+   * Padding applied to the Card content.
+   */
+  padding: number;
+  /**
+   * Direction of the Card layout.
+   */
+  direction: 'vertical' | 'horizontal';
+};
+
+export const CardContext = React.createContext<CardContextType | null>(null);
+
+CardContext.displayName = 'CardContext';
diff --git a/src/components/Card/CardCover.tsx b/src/components/Card/CardCover.tsx
index e0147381dc..266ad045ea 100644
--- a/src/components/Card/CardCover.tsx
+++ b/src/components/Card/CardCover.tsx
@@ -1,21 +1,15 @@
 import * as React from 'react';
-import { Image, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { Image, StyleSheet, View } from 'react-native';
+import type { ImageProps, StyleProp, ViewStyle } from 'react-native';
 
+import { CardContext } from './CardContext';
 import { getCardCoverStyle } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import { grey200 } from '../../styles/themes/v2/colors';
-import type { ThemeProp } from '../../types';
+import { grey200 } from '../../theme/colors';
+import type { ThemeProp } from '../../theme/types';
 import { splitStyles } from '../../utils/splitStyles';
 
-export type Props = React.ComponentPropsWithRef<typeof Image> & {
-  /**
-   * @internal
-   */
-  index?: number;
-  /**
-   * @internal
-   */
-  total?: number;
+export type Props = ImageProps & {
   style?: StyleProp<ViewStyle>;
   /**
    * @optional
@@ -42,16 +36,11 @@ export type Props = React.ComponentPropsWithRef<typeof Image> & {
  *
  * @extends Image props https://reactnative.dev/docs/image#props
  */
-const CardCover = ({
-  index,
-  total,
-  style,
-  theme: themeOverrides,
-  ...rest
-}: Props) => {
+const CardCover = ({ style, theme: themeOverrides, ...rest }: Props) => {
   const theme = useInternalTheme(themeOverrides);
+  const cardContext = React.useContext(CardContext);
 
-  const flattenedStyles = (StyleSheet.flatten(style) || {}) as ViewStyle;
+  const flattenedStyles = StyleSheet.flatten<ViewStyle>(style) || {};
   const [, borderRadiusStyles] = splitStyles(
     flattenedStyles,
     (style) => style.startsWith('border') && style.endsWith('Radius')
@@ -59,33 +48,47 @@ const CardCover = ({
 
   const coverStyle = getCardCoverStyle({
     theme,
-    index,
-    total,
     borderRadiusStyles,
   });
 
+  const cardMarginStyle = cardContext
+    ? cardContext.direction === 'horizontal'
+      ? {
+          marginTop: -cardContext.padding,
+          marginLeft: -cardContext.padding,
+          marginBottom: -cardContext.padding,
+        }
+      : {
+          marginTop: -cardContext.padding,
+          marginLeft: -cardContext.padding,
+          marginRight: -cardContext.padding,
+        }
+    : null;
+
   return (
-    <View style={[styles.container, coverStyle, style]}>
+    <View style={[styles.container, cardMarginStyle, coverStyle, style]}>
       <Image
+        resizeMode="cover"
+        accessibilityIgnoresInvertColors
         {...rest}
         style={[styles.image, coverStyle]}
-        accessibilityIgnoresInvertColors
       />
     </View>
   );
 };
 
 CardCover.displayName = 'Card.Cover';
+
 const styles = StyleSheet.create({
   container: {
-    height: 195,
+    height: 194,
     backgroundColor: grey200,
     overflow: 'hidden',
   },
   image: {
     flex: 1,
-    height: undefined,
-    width: undefined,
+    height: 'auto',
+    width: 'auto',
     justifyContent: 'flex-end',
   },
 });
diff --git a/src/components/Card/CardTitle.tsx b/src/components/Card/CardTitle.tsx
index b3d78fc259..ed8289cde5 100644
--- a/src/components/Card/CardTitle.tsx
+++ b/src/components/Card/CardTitle.tsx
@@ -1,19 +1,12 @@
 import * as React from 'react';
-import {
-  StyleProp,
-  StyleSheet,
-  TextStyle,
-  View,
-  ViewStyle,
-} from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import type { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
 
 import { useInternalTheme } from '../../core/theming';
-import type { MD3TypescaleKey, ThemeProp } from '../../types';
+import type { TypescaleKey, ThemeProp } from '../../theme/types';
 import Text from '../Typography/Text';
-import Caption from '../Typography/v2/Caption';
-import Title from '../Typography/v2/Title';
 
-export type Props = React.ComponentPropsWithRef<typeof View> & {
+export type Props = ViewProps & {
   /**
    * Text for the title. Note that this will only accept a string or `<Text>`-based node.
    */
@@ -42,7 +35,7 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
    *
    *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
    */
-  titleVariant?: keyof typeof MD3TypescaleKey;
+  titleVariant?: TypescaleKey;
   /**
    * Text for the subtitle. Note that this will only accept a string or `<Text>`-based node.
    */
@@ -71,7 +64,7 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
    *
    *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
    */
-  subtitleVariant?: keyof typeof MD3TypescaleKey;
+  subtitleVariant?: TypescaleKey;
   /**
    * Callback which returns a React element to display on the left side.
    */
@@ -88,14 +81,6 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
    * Style for the right element wrapper.
    */
   rightStyle?: StyleProp<ViewStyle>;
-  /**
-   * @internal
-   */
-  index?: number;
-  /**
-   * @internal
-   */
-  total?: number;
   /**
    * Specifies the largest possible scale a title font can reach.
    */
@@ -109,6 +94,10 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
    * @optional
    */
   theme?: ThemeProp;
+  /**
+   * testID to be used on tests.
+   */
+  testID?: string;
 };
 
 const LEFT_SIZE = 40;
@@ -150,16 +139,12 @@ const CardTitle = ({
   rightStyle,
   style,
   theme: themeOverrides,
+  testID,
 }: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const TitleComponent = theme.isV3 ? Text : Title;
-  const SubtitleComponent = theme.isV3 ? Text : Caption;
-
-  const minHeight = subtitle || left || right ? 72 : 50;
-  const marginBottom = subtitle ? 0 : 2;
+  useInternalTheme(themeOverrides);
 
   return (
-    <View style={[styles.container, { minHeight }, style]}>
+    <View style={[styles.container, style]} testID={testID}>
       {left ? (
         <View style={[styles.left, leftStyle]}>
           {left({
@@ -170,24 +155,24 @@ const CardTitle = ({
 
       <View style={[styles.titles]}>
         {title && (
-          <TitleComponent
-            style={[styles.title, { marginBottom }, titleStyle]}
+          <Text
+            style={titleStyle}
             numberOfLines={titleNumberOfLines}
             variant={titleVariant}
             maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
           >
             {title}
-          </TitleComponent>
+          </Text>
         )}
         {subtitle && (
-          <SubtitleComponent
-            style={[styles.subtitle, subtitleStyle]}
+          <Text
+            style={subtitleStyle}
             numberOfLines={subtitleNumberOfLines}
             variant={subtitleVariant}
             maxFontSizeMultiplier={subtitleMaxFontSizeMultiplier}
           >
             {subtitle}
-          </SubtitleComponent>
+          </Text>
         )}
       </View>
       <View style={rightStyle}>{right ? right({ size: 24 }) : null}</View>
@@ -202,32 +187,18 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    paddingLeft: 16,
+    gap: 16,
   },
-
   left: {
     justifyContent: 'center',
-    marginRight: 16,
     height: LEFT_SIZE,
     width: LEFT_SIZE,
   },
-
   titles: {
     flex: 1,
     flexDirection: 'column',
     justifyContent: 'center',
   },
-
-  title: {
-    minHeight: 30,
-    paddingRight: 16,
-  },
-
-  subtitle: {
-    minHeight: 20,
-    marginVertical: 0,
-    paddingRight: 16,
-  },
 });
 
 export default CardTitle;
diff --git a/src/components/Card/utils.tsx b/src/components/Card/utils.tsx
index c0f10951c5..75cbc29b99 100644
--- a/src/components/Card/utils.tsx
+++ b/src/components/Card/utils.tsx
@@ -1,9 +1,6 @@
 import type { StyleProp, ViewStyle } from 'react-native';
 
-import color from 'color';
-
-import { black, white } from '../../styles/themes/v2/colors';
-import type { InternalTheme } from '../../types';
+import type { InternalTheme } from '../../theme/types';
 
 type CardMode = 'elevated' | 'outlined' | 'contained';
 
@@ -20,61 +17,25 @@ export type CardActionChildProps = {
 
 export const getCardCoverStyle = ({
   theme,
-  index,
-  total,
   borderRadiusStyles,
 }: {
   theme: InternalTheme;
   borderRadiusStyles: BorderRadiusStyles;
-  index?: number;
-  total?: number;
 }) => {
-  const { isV3, roundness } = theme;
-
   if (Object.keys(borderRadiusStyles).length > 0) {
     return {
-      borderRadius: 3 * roundness,
+      borderRadius: theme.shapes.corner.medium,
       ...borderRadiusStyles,
     };
   }
 
-  if (isV3) {
-    return {
-      borderRadius: 3 * roundness,
-    };
-  }
-
-  if (index === 0) {
-    if (total === 1) {
-      return {
-        borderRadius: roundness,
-      };
-    }
-
-    return {
-      borderTopLeftRadius: roundness,
-      borderTopRightRadius: roundness,
-    };
-  }
-
-  if (typeof total === 'number' && index === total - 1) {
-    return {
-      borderBottomLeftRadius: roundness,
-    };
-  }
-
-  return undefined;
+  return {
+    borderRadius: theme.shapes.corner.medium,
+  };
 };
 
 const getBorderColor = ({ theme }: { theme: InternalTheme }) => {
-  if (theme.isV3) {
-    return theme.colors.outline;
-  }
-
-  if (theme.dark) {
-    return color(white).alpha(0.12).rgb().string();
-  }
-  return color(black).alpha(0.12).rgb().string();
+  return theme.colors.outline;
 };
 
 const getBackgroundColor = ({
@@ -84,13 +45,12 @@ const getBackgroundColor = ({
   theme: InternalTheme;
   isMode: (mode: CardMode) => boolean;
 }) => {
-  if (theme.isV3) {
-    if (isMode('contained')) {
-      return theme.colors.surfaceVariant;
-    }
-    if (isMode('outlined')) {
-      return theme.colors.surface;
-    }
+  const { colors } = theme;
+  if (isMode('contained')) {
+    return colors.surfaceVariant;
+  }
+  if (isMode('outlined')) {
+    return colors.surface;
   }
   return undefined;
 };
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index b6cfd9a64b..3bccccf33b 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -1,12 +1,31 @@
 import * as React from 'react';
-import { GestureResponderEvent, Platform } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
+import type {
+  ColorValue,
+  GestureResponderEvent,
+  NativeSyntheticEvent,
+  StyleProp,
+  TargetedEvent,
+  ViewStyle,
+} from 'react-native';
 
-import CheckboxAndroid from './CheckboxAndroid';
-import CheckboxIOS from './CheckboxIOS';
+import Animated, { cubicBezier, type CSSStyle } from 'react-native-reanimated';
+
+import { CheckboxTokens } from './tokens';
+import { getSelectionVisualState } from './utils';
+import { useLocale } from '../../core/locale';
 import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
+import { useReduceMotion } from '../../theme/accessibility/ReduceMotionContext';
+import { tokens } from '../../theme/tokens';
+import type { ThemeProp } from '../../theme/types';
+import { isKeyboardFocusEvent } from '../../utils/isKeyboardFocusEvent';
+import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 
-export type Props = {
+export type Props = Omit<
+  React.PropsWithoutRef<TouchableRippleProps>,
+  'children'
+> & {
   /**
    * Status of checkbox.
    */
@@ -22,11 +41,18 @@ export type Props = {
   /**
    * Custom color for unchecked checkbox.
    */
-  uncheckedColor?: string;
+  uncheckedColor?: ColorValue;
   /**
    * Custom color for checkbox.
    */
-  color?: string;
+  color?: ColorValue;
+  /**
+   * Whether the checkbox is in an error state. When true, the outline
+   * (unchecked) and container (selected) use `theme.colors.error`.
+   * `disabled` and explicit `color`/`uncheckedColor` overrides take
+   * precedence.
+   */
+  error?: boolean;
   /**
    * @optional
    */
@@ -35,8 +61,29 @@ export type Props = {
    * testID to be used on tests.
    */
   testID?: string;
+  /**
+   * Custom style to override the default tap target. Passed through to
+   * the underlying `TouchableRipple`.
+   */
+  style?: StyleProp<ViewStyle>;
 };
 
+// Spec dimensions (https://m3.material.io/components/checkbox/specs).
+const {
+  containerSize: CONTAINER_SIZE,
+  containerRadius: CONTAINER_RADIUS,
+  outlineWidth: OUTLINE_WIDTH,
+  stateLayerSize: STATE_LAYER_SIZE,
+} = CheckboxTokens;
+
+const FOCUS_THICKNESS = tokens.md.sys.state.focusIndicator.thickness;
+// Focus indicator is a circular ring at the 40dp state-layer boundary.
+// We don't apply `focusIndicator.outerOffset` here because the surrounding
+// `TouchableRipple borderless` clips overflow to the tap-target shape,
+// so a ring drawn outside the 40dp circle would be cropped.
+const FOCUS_RING_SIZE = STATE_LAYER_SIZE;
+const FOCUS_RING_RADIUS = STATE_LAYER_SIZE / 2;
+
 /**
  * Checkboxes allow the selection of multiple options from a set.
  *
@@ -61,15 +108,287 @@ export type Props = {
  * export default MyComponent;
  * ```
  */
-const Checkbox = ({ theme: themeOverrides, ...props }: Props) => {
+const Checkbox = ({
+  status,
+  theme: themeOverrides,
+  disabled,
+  onPress,
+  testID,
+  error,
+  color,
+  uncheckedColor,
+  style,
+  ...rest
+}: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  return Platform.OS === 'ios' ? (
-    <CheckboxIOS {...props} theme={theme} />
-  ) : (
-    <CheckboxAndroid {...props} theme={theme} />
+
+  const reduceMotion = useReduceMotion();
+
+  const { direction } = useLocale();
+  // Web (react-native-web) doesn't auto-mirror layout, so flip the mask
+  // anchor manually for RTL. Native handles it via `I18nManager`.
+  const flipMaskForWebRTL = Platform.OS === 'web' && direction === 'rtl';
+  const [focused, setFocused] = React.useState(false);
+
+  const selected = status === 'checked' || status === 'indeterminate';
+
+  // Visual state (colors + opacity) for the static layers. `hovered` /
+  // `pressed` aren't tracked here — `TouchableRipple` owns the press ripple
+  // and hover overlay.
+  const visual = getSelectionVisualState({
+    theme,
+    selected,
+    disabled,
+    error,
+    customColor: color,
+    customUncheckedColor: uncheckedColor,
+  });
+
+  const fillTransitionTimingFunction = cubicBezier(
+    ...theme.motion.easing.standard
+  );
+
+  const fillTransitionDuration = reduceMotion
+    ? 0
+    : theme.motion.duration.short2;
+
+  const checkTransitionDuration = reduceMotion
+    ? 0
+    : theme.motion.duration.short3;
+
+  const checkTransitionTimingFunction = cubicBezier(
+    ...theme.motion.easing.standard
+  );
+
+  const outlineStyle: CSSStyle<ViewStyle> = {
+    borderColor: visual.outlineColor,
+    opacity: selected ? 0 : 1,
+    transitionDuration: fillTransitionDuration,
+    transitionProperty: ['opacity'],
+    transitionTimingFunction: fillTransitionTimingFunction,
+  };
+
+  const fillStyle: CSSStyle<ViewStyle> = {
+    backgroundColor: visual.containerColor,
+    opacity: selected ? 1 : 0,
+    transitionDuration: fillTransitionDuration,
+    transitionProperty: ['opacity'],
+    transitionTimingFunction: fillTransitionTimingFunction,
+  };
+
+  const maskStyle: CSSStyle<ViewStyle> = {
+    width: selected ? CONTAINER_SIZE : 0,
+    opacity: selected ? 1 : 0,
+    transitionDuration: checkTransitionDuration,
+    transitionProperty: ['width', 'opacity'],
+    transitionTimingFunction: checkTransitionTimingFunction,
+  };
+
+  // Remember the last drawn glyph so the reveal-mask can finish collapsing
+  // when `selected` flips back to false. Computed via the "derive state
+  // during render" pattern (https://react.dev/reference/react/useState#storing-information-from-previous-renders)
+  // so we don't mutate a ref during render.
+  const [lastGlyph, setLastGlyph] = React.useState<'check' | 'indeterminate'>(
+    status === 'indeterminate' ? 'indeterminate' : 'check'
+  );
+  const nextGlyph: 'check' | 'indeterminate' =
+    status === 'checked'
+      ? 'check'
+      : status === 'indeterminate'
+        ? 'indeterminate'
+        : lastGlyph;
+  if (nextGlyph !== lastGlyph) {
+    setLastGlyph(nextGlyph);
+  }
+  const showIndeterminate = nextGlyph === 'indeterminate';
+
+  const handleFocus = React.useCallback(
+    (e: NativeSyntheticEvent<TargetedEvent>) => {
+      if (disabled) return;
+      if (!isKeyboardFocusEvent(e)) return;
+      setFocused(true);
+    },
+    [disabled]
+  );
+
+  const handleBlur = React.useCallback(() => {
+    setFocused(false);
+  }, []);
+
+  const checked: boolean | 'mixed' =
+    status === 'indeterminate' ? 'mixed' : status === 'checked';
+
+  // When `accessible={false}` is passed (typically by `CheckboxItem`, which
+  // owns the a11y tree for the wrapped row), suppress our own a11y role
+  // and state so the same logical control doesn't expose two `checked`
+  // states to assistive tech.
+  const accessibilityProps =
+    rest.accessible === false
+      ? {}
+      : {
+          role: 'checkbox' as const,
+          'aria-disabled': !!disabled,
+          'aria-checked': checked,
+          'aria-live': 'polite' as const,
+        };
+
+  return (
+    <TouchableRipple
+      {...rest}
+      borderless
+      centered
+      onPress={onPress}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      disabled={disabled}
+      {...accessibilityProps}
+      testID={testID}
+      style={[
+        styles.tapTarget,
+        Platform.OS === 'web' ? webNoOutline : undefined,
+        style,
+      ]}
+    >
+      <View pointerEvents="none" style={styles.tapTargetInner}>
+        {focused && !disabled ? (
+          <View
+            pointerEvents="none"
+            style={[styles.focusRing, { borderColor: theme.colors.secondary }]}
+          />
+        ) : null}
+        <View style={[styles.container, { opacity: visual.containerOpacity }]}>
+          <Animated.View
+            pointerEvents="none"
+            style={[styles.outline, outlineStyle]}
+          />
+          <Animated.View
+            pointerEvents="none"
+            style={[styles.fill, fillStyle]}
+          />
+          <Animated.View
+            style={[
+              flipMaskForWebRTL
+                ? styles.checkmarkMaskWebRTL
+                : styles.checkmarkMask,
+              maskStyle,
+            ]}
+          >
+            {showIndeterminate ? (
+              <View style={styles.checkmarkContent}>
+                <View
+                  style={[styles.dash, { backgroundColor: visual.iconColor }]}
+                />
+              </View>
+            ) : (
+              <View style={styles.checkmarkContent}>
+                <View
+                  style={[
+                    styles.checkmarkGlyph,
+                    { borderColor: visual.iconColor },
+                    // Native platforms auto-swap border sides in RTL, so
+                    // pre-swap them to preserve the checkmark orientation.
+                    direction === 'rtl' && Platform.OS !== 'web'
+                      ? styles.checkmarkGlyphRTL
+                      : null,
+                  ]}
+                />
+              </View>
+            )}
+          </Animated.View>
+        </View>
+      </View>
+    </TouchableRipple>
   );
 };
 
+// Web-only style; not in StyleSheet because `outline` is outside ViewStyle.
+// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+const webNoOutline = { outline: 'none' } as unknown as ViewStyle;
+
+const styles = StyleSheet.create({
+  tapTarget: {
+    width: STATE_LAYER_SIZE,
+    height: STATE_LAYER_SIZE,
+    borderRadius: STATE_LAYER_SIZE / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  tapTargetInner: {
+    width: STATE_LAYER_SIZE,
+    height: STATE_LAYER_SIZE,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  focusRing: {
+    position: 'absolute',
+    width: FOCUS_RING_SIZE,
+    height: FOCUS_RING_SIZE,
+    borderRadius: FOCUS_RING_RADIUS,
+    borderWidth: FOCUS_THICKNESS,
+  },
+  container: {
+    width: CONTAINER_SIZE,
+    height: CONTAINER_SIZE,
+    borderRadius: CONTAINER_RADIUS,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  fill: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: CONTAINER_RADIUS,
+  },
+  outline: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderWidth: OUTLINE_WIDTH,
+    borderRadius: CONTAINER_RADIUS,
+  },
+  dash: {
+    width: 10,
+    height: 2,
+    borderRadius: 1,
+  },
+  checkmarkMask: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    height: CONTAINER_SIZE,
+    overflow: 'hidden',
+  },
+  checkmarkMaskWebRTL: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    height: CONTAINER_SIZE,
+    overflow: 'hidden',
+  },
+  checkmarkContent: {
+    width: CONTAINER_SIZE,
+    height: CONTAINER_SIZE,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  checkmarkGlyph: {
+    width: 11,
+    height: 6,
+    borderLeftWidth: 2,
+    borderBottomWidth: 2,
+    transform: [{ rotate: '-45deg' }, { translateY: -1 }, { translateX: 1 }],
+  },
+  checkmarkGlyphRTL: {
+    borderLeftWidth: 0,
+    borderRightWidth: 2,
+  },
+});
+
 export default Checkbox;
 
 // @component-docs ignore-next-line
diff --git a/src/components/Checkbox/CheckboxAndroid.tsx b/src/components/Checkbox/CheckboxAndroid.tsx
deleted file mode 100644
index 642602b0fa..0000000000
--- a/src/components/Checkbox/CheckboxAndroid.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import * as React from 'react';
-import {
-  Animated,
-  GestureResponderEvent,
-  StyleSheet,
-  View,
-} from 'react-native';
-
-import { getAndroidSelectionControlColor } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import type { $RemoveChildren, ThemeProp } from '../../types';
-import MaterialCommunityIcon from '../MaterialCommunityIcon';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
-
-export type Props = $RemoveChildren<typeof TouchableRipple> & {
-  /**
-   * Status of checkbox.
-   */
-  status: 'checked' | 'unchecked' | 'indeterminate';
-  /**
-   * Whether checkbox is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-  /**
-   * Custom color for unchecked checkbox.
-   */
-  uncheckedColor?: string;
-  /**
-   * Custom color for checkbox.
-   */
-  color?: string;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  /**
-   * testID to be used on tests.
-   */
-  testID?: string;
-};
-
-// From https://material.io/design/motion/speed.html#duration
-const ANIMATION_DURATION = 100;
-
-/**
- * Checkboxes allow the selection of multiple options from a set.
- * This component follows platform guidelines for Android, but can be used
- * on any platform.
- *
- * @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
- */
-const CheckboxAndroid = ({
-  status,
-  theme: themeOverrides,
-  disabled,
-  onPress,
-  testID,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { current: scaleAnim } = React.useRef<Animated.Value>(
-    new Animated.Value(1)
-  );
-  const isFirstRendering = React.useRef<boolean>(true);
-
-  const {
-    animation: { scale },
-  } = theme;
-
-  React.useEffect(() => {
-    // Do not run animation on very first rendering
-    if (isFirstRendering.current) {
-      isFirstRendering.current = false;
-      return;
-    }
-
-    const checked = status === 'checked';
-
-    Animated.sequence([
-      Animated.timing(scaleAnim, {
-        toValue: 0.85,
-        duration: checked ? ANIMATION_DURATION * scale : 0,
-        useNativeDriver: false,
-      }),
-      Animated.timing(scaleAnim, {
-        toValue: 1,
-        duration: checked
-          ? ANIMATION_DURATION * scale
-          : ANIMATION_DURATION * scale * 1.75,
-        useNativeDriver: false,
-      }),
-    ]).start();
-  }, [status, scaleAnim, scale]);
-
-  const checked = status === 'checked';
-  const indeterminate = status === 'indeterminate';
-
-  const { rippleColor, selectionControlColor } =
-    getAndroidSelectionControlColor({
-      theme,
-      disabled,
-      checked,
-      customColor: rest.color,
-      customUncheckedColor: rest.uncheckedColor,
-    });
-
-  const borderWidth = scaleAnim.interpolate({
-    inputRange: [0.8, 1],
-    outputRange: [7, 0],
-  });
-
-  const icon = indeterminate
-    ? 'minus-box'
-    : checked
-    ? 'checkbox-marked'
-    : 'checkbox-blank-outline';
-
-  return (
-    <TouchableRipple
-      {...rest}
-      borderless
-      rippleColor={rippleColor}
-      onPress={onPress}
-      disabled={disabled}
-      accessibilityRole="checkbox"
-      accessibilityState={{ disabled, checked }}
-      accessibilityLiveRegion="polite"
-      style={styles.container}
-      testID={testID}
-      theme={theme}
-    >
-      <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
-        <MaterialCommunityIcon
-          allowFontScaling={false}
-          name={icon}
-          size={24}
-          color={selectionControlColor}
-          direction="ltr"
-        />
-        <View style={[StyleSheet.absoluteFill, styles.fillContainer]}>
-          <Animated.View
-            style={[
-              styles.fill,
-              { borderColor: selectionControlColor },
-              { borderWidth },
-            ]}
-          />
-        </View>
-      </Animated.View>
-    </TouchableRipple>
-  );
-};
-
-CheckboxAndroid.displayName = 'Checkbox.Android';
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 18,
-    width: 36,
-    height: 36,
-    padding: 6,
-  },
-  fillContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  fill: {
-    height: 14,
-    width: 14,
-  },
-});
-
-export default CheckboxAndroid;
-
-// @component-docs ignore-next-line
-export { CheckboxAndroid };
diff --git a/src/components/Checkbox/CheckboxIOS.tsx b/src/components/Checkbox/CheckboxIOS.tsx
deleted file mode 100644
index e5f2c1a021..0000000000
--- a/src/components/Checkbox/CheckboxIOS.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import * as React from 'react';
-import { GestureResponderEvent, StyleSheet, View } from 'react-native';
-
-import { getSelectionControlIOSColor } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import type { $RemoveChildren, ThemeProp } from '../../types';
-import MaterialCommunityIcon from '../MaterialCommunityIcon';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
-
-export type Props = $RemoveChildren<typeof TouchableRipple> & {
-  /**
-   * Status of checkbox.
-   */
-  status: 'checked' | 'unchecked' | 'indeterminate';
-  /**
-   * Whether checkbox is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-  /**
-   * Custom color for checkbox.
-   */
-  color?: string;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  /**
-   * testID to be used on tests.
-   */
-  testID?: string;
-};
-
-/**
- * Checkboxes allow the selection of multiple options from a set.
- * This component follows platform guidelines for iOS, but can be used
- * on any platform.
- *
- * @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
- */
-const CheckboxIOS = ({
-  status,
-  disabled,
-  onPress,
-  theme: themeOverrides,
-  testID,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const checked = status === 'checked';
-  const indeterminate = status === 'indeterminate';
-
-  const { checkedColor, rippleColor } = getSelectionControlIOSColor({
-    theme,
-    disabled,
-    customColor: rest.color,
-  });
-
-  const icon = indeterminate ? 'minus' : 'check';
-  const opacity = indeterminate || checked ? 1 : 0;
-
-  return (
-    <TouchableRipple
-      {...rest}
-      borderless
-      rippleColor={rippleColor}
-      onPress={onPress}
-      disabled={disabled}
-      accessibilityRole="checkbox"
-      accessibilityState={{ disabled, checked }}
-      accessibilityLiveRegion="polite"
-      style={styles.container}
-      testID={testID}
-      theme={theme}
-    >
-      <View style={{ opacity }}>
-        <MaterialCommunityIcon
-          allowFontScaling={false}
-          name={icon}
-          size={24}
-          color={checkedColor}
-          direction="ltr"
-        />
-      </View>
-    </TouchableRipple>
-  );
-};
-
-CheckboxIOS.displayName = 'Checkbox.IOS';
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 18,
-    padding: 6,
-  },
-});
-
-export default CheckboxIOS;
-
-// @component-docs ignore-next-line
-export { CheckboxIOS };
diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx
index 92ea124e62..7d0f8ee64a 100644
--- a/src/components/Checkbox/CheckboxItem.tsx
+++ b/src/components/Checkbox/CheckboxItem.tsx
@@ -1,23 +1,18 @@
-import * as React from 'react';
-import {
-  ColorValue,
+import { StyleSheet, View } from 'react-native';
+import type {
   GestureResponderEvent,
   PressableAndroidRippleConfig,
   StyleProp,
-  StyleSheet,
   TextStyle,
-  View,
   ViewStyle,
 } from 'react-native';
 
 import Checkbox from './Checkbox';
-import CheckboxAndroid from './CheckboxAndroid';
-import CheckboxIOS from './CheckboxIOS';
 import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp, MD3TypescaleKey } from '../../types';
-import TouchableRipple, {
-  Props as TouchableRippleProps,
-} from '../TouchableRipple/TouchableRipple';
+import type { ThemeProp, TypescaleKey } from '../../theme/types';
+import { getStateLayer } from '../../theme/utils/state';
+import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
 export type Props = {
@@ -42,14 +37,14 @@ export type Props = {
    */
   onLongPress?: (e: GestureResponderEvent) => void;
   /**
-   * Type of background drawabale to display the feedback (Android).
+   * Type of background drawable to display the feedback (Android).
    * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: PressableAndroidRippleConfig;
   /**
    * Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * Custom color for unchecked checkbox.
    */
@@ -58,10 +53,6 @@ export type Props = {
    * Custom color for checkbox.
    */
   color?: string;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
   /**
    * Additional styles for container View.
    */
@@ -90,7 +81,7 @@ export type Props = {
    *
    *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
    */
-  labelVariant?: keyof typeof MD3TypescaleKey;
+  labelVariant?: TypescaleKey;
   /**
    * @optional
    */
@@ -103,11 +94,6 @@ export type Props = {
    * Checkbox control position.
    */
   position?: 'leading' | 'trailing';
-  /**
-   * Whether `<Checkbox.Android />` or `<Checkbox.IOS />` should be used.
-   * Left undefined `<Checkbox />` will be used.
-   */
-  mode?: 'android' | 'ios';
   /**
    * Sets additional distance outside of element in which a press can be detected.
    */
@@ -142,13 +128,11 @@ const CheckboxItem = ({
   labelStyle,
   theme: themeOverrides,
   testID,
-  mode,
   position = 'trailing',
-  accessibilityLabel = label,
+  'aria-label': ariaLabel = label,
   disabled,
   labelVariant = 'bodyLarge',
   labelMaxFontSizeMultiplier = 1.5,
-  rippleColor,
   background,
   hitSlop,
   ...props
@@ -156,40 +140,28 @@ const CheckboxItem = ({
   const theme = useInternalTheme(themeOverrides);
   const checkboxProps = { ...props, status, theme, disabled };
   const isLeading = position === 'leading';
-  let checkbox;
-
-  if (mode === 'android') {
-    checkbox = <CheckboxAndroid {...checkboxProps} />;
-  } else if (mode === 'ios') {
-    checkbox = <CheckboxIOS {...checkboxProps} />;
-  } else {
-    checkbox = <Checkbox {...checkboxProps} />;
-  }
+  // The outer TouchableRipple below is the interactable element + a11y
+  // checkbox; the inner Checkbox is purely visual, so we exclude it from
+  // the accessibility tree to avoid duplicate `checked` states.
+  const checkbox = <Checkbox {...checkboxProps} accessible={false} />;
 
-  const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text;
-  const disabledTextColor = theme.isV3
-    ? theme.colors.onSurfaceDisabled
-    : theme.colors.disabled;
   const textAlign = isLeading ? 'right' : 'left';
 
-  const computedStyle = {
-    color: disabled ? disabledTextColor : textColor,
+  const computedStyle: TextStyle = {
+    ...getStateLayer(theme, 'onSurface', disabled ? 'disabled' : 'enabled'),
     textAlign,
-  } as TextStyle;
+  };
 
   return (
     <TouchableRipple
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="checkbox"
-      accessibilityState={{
-        checked: status === 'checked',
-        disabled,
-      }}
+      aria-label={ariaLabel}
+      role="checkbox"
+      aria-checked={status === 'indeterminate' ? 'mixed' : status === 'checked'}
+      aria-disabled={disabled}
       onPress={onPress}
       onLongPress={onLongPress}
       testID={testID}
       disabled={disabled}
-      rippleColor={rippleColor}
       theme={theme}
       background={background}
       hitSlop={hitSlop}
@@ -202,14 +174,8 @@ const CheckboxItem = ({
         {isLeading && checkbox}
         <Text
           variant={labelVariant}
-          testID={`${testID}-text`}
           maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
-          style={[
-            styles.label,
-            !theme.isV3 && styles.font,
-            computedStyle,
-            labelStyle,
-          ]}
+          style={[styles.label, computedStyle, labelStyle]}
         >
           {label}
         </Text>
@@ -238,7 +204,4 @@ const styles = StyleSheet.create({
     flexShrink: 1,
     flexGrow: 1,
   },
-  font: {
-    fontSize: 16,
-  },
 });
diff --git a/src/components/Checkbox/index.ts b/src/components/Checkbox/index.ts
index 54a65538c8..32274f97d9 100644
--- a/src/components/Checkbox/index.ts
+++ b/src/components/Checkbox/index.ts
@@ -1,6 +1,4 @@
 import CheckboxComponent from './Checkbox';
-import CheckboxAndroid from './CheckboxAndroid';
-import CheckboxIOS from './CheckboxIOS';
 import CheckboxItem from './CheckboxItem';
 
 const Checkbox = Object.assign(
@@ -9,10 +7,6 @@ const Checkbox = Object.assign(
   {
     // @component ./CheckboxItem.tsx
     Item: CheckboxItem,
-    // @component ./CheckboxAndroid.tsx
-    Android: CheckboxAndroid,
-    // @component ./CheckboxIOS.tsx
-    IOS: CheckboxIOS,
   }
 );
 
diff --git a/src/components/Checkbox/tokens.ts b/src/components/Checkbox/tokens.ts
new file mode 100644
index 0000000000..6406f25c47
--- /dev/null
+++ b/src/components/Checkbox/tokens.ts
@@ -0,0 +1,29 @@
+import type { ColorRole } from '../../theme/types';
+
+/**
+ * MD3 Checkbox spec dimensions and color-role tokens.
+ * @see https://m3.material.io/components/checkbox/specs
+ */
+const sizes = {
+  containerSize: 18,
+  containerRadius: 2,
+  outlineWidth: 2,
+  stateLayerSize: 40,
+} as const;
+
+const colors = {
+  containerColor: 'primary',
+  disabledContainerColor: 'onSurface',
+  errorContainerColor: 'error',
+  outlineColor: 'onSurfaceVariant',
+  disabledOutlineColor: 'onSurface',
+  errorOutlineColor: 'error',
+  iconColor: 'onPrimary',
+  disabledIconColor: 'surface',
+  errorIconColor: 'onError',
+  selectedStateLayerColor: 'primary',
+  unselectedStateLayerColor: 'onSurface',
+  errorStateLayerColor: 'error',
+} as const satisfies Record<string, ColorRole>;
+
+export const CheckboxTokens = { ...sizes, ...colors };
diff --git a/src/components/Checkbox/utils.ts b/src/components/Checkbox/utils.ts
index 81677d46b2..80e7c31750 100644
--- a/src/components/Checkbox/utils.ts
+++ b/src/components/Checkbox/utils.ts
@@ -1,183 +1,117 @@
-import color from 'color';
+import type { ColorValue } from 'react-native';
 
-import type { InternalTheme } from '../../types';
+import { CheckboxTokens } from './tokens';
+import { tokens } from '../../theme/tokens';
+import type { InternalTheme } from '../../theme/types';
 
-const getAndroidCheckedColor = ({
-  theme,
-  customColor,
-}: {
-  theme: InternalTheme;
-  customColor?: string;
-}) => {
-  if (customColor) {
-    return customColor;
-  }
-
-  if (theme.isV3) {
-    return theme.colors.primary;
-  }
-
-  return theme.colors.accent;
-};
-
-const getAndroidUncheckedColor = ({
-  theme,
-  customUncheckedColor,
-}: {
-  theme: InternalTheme;
-  customUncheckedColor?: string;
-}) => {
-  if (customUncheckedColor) {
-    return customUncheckedColor;
-  }
+// MD3 Checkbox spec: https://m3.material.io/components/checkbox/specs
 
-  if (theme.isV3) {
-    return theme.colors.onSurfaceVariant;
-  }
-
-  if (theme.dark) {
-    return color(theme.colors.text).alpha(0.7).rgb().string();
-  }
-
-  return color(theme.colors.text).alpha(0.54).rgb().string();
-};
+const stateOpacity = tokens.md.sys.state.opacity;
 
-const getAndroidRippleColor = ({
-  theme,
-  checkedColor,
-  disabled,
-}: {
+type SelectionState = {
   theme: InternalTheme;
-  checkedColor: string;
+  selected: boolean;
   disabled?: boolean;
-}) => {
-  if (disabled) {
-    if (theme.isV3) {
-      return color(theme.colors.onSurface).alpha(0.16).rgb().string();
-    }
-    return color(theme.colors.text).alpha(0.16).rgb().string();
-  }
+  error?: boolean;
+  customColor?: ColorValue;
+  customUncheckedColor?: ColorValue;
+};
 
-  return color(checkedColor).fade(0.32).rgb().string();
+type SelectionVisualState = {
+  containerColor: ColorValue;
+  outlineColor: ColorValue;
+  containerOpacity: number;
+  iconColor: ColorValue;
 };
 
-const getAndroidControlColor = ({
+const getContainerColor = ({
   theme,
-  checked,
   disabled,
-  checkedColor,
-  uncheckedColor,
-}: {
-  theme: InternalTheme;
-  checked: boolean;
-  checkedColor: string;
-  uncheckedColor: string;
-  disabled?: boolean;
-}) => {
+  error,
+  customColor,
+}: SelectionState): ColorValue => {
   if (disabled) {
-    if (theme.isV3) {
-      return theme.colors.onSurfaceDisabled;
-    }
-    return theme.colors.disabled;
+    return theme.colors[CheckboxTokens.disabledContainerColor];
   }
-
-  if (checked) {
-    return checkedColor;
+  if (customColor) {
+    return customColor;
+  }
+  if (error) {
+    return theme.colors[CheckboxTokens.errorContainerColor];
   }
-  return uncheckedColor;
+  return theme.colors[CheckboxTokens.containerColor];
 };
 
-export const getAndroidSelectionControlColor = ({
+const getOutlineColor = ({
   theme,
   disabled,
-  checked,
-  customColor,
+  error,
   customUncheckedColor,
-}: {
-  theme: InternalTheme;
-  checked: boolean;
-  disabled?: boolean;
-  customColor?: string;
-  customUncheckedColor?: string;
-}) => {
-  const checkedColor = getAndroidCheckedColor({ theme, customColor });
-  const uncheckedColor = getAndroidUncheckedColor({
-    theme,
-    customUncheckedColor,
-  });
-  return {
-    rippleColor: getAndroidRippleColor({ theme, checkedColor, disabled }),
-    selectionControlColor: getAndroidControlColor({
-      theme,
-      disabled,
-      checked,
-      checkedColor,
-      uncheckedColor,
-    }),
-  };
-};
-
-const getIOSCheckedColor = ({
-  theme,
-  disabled,
-  customColor,
-}: {
-  theme: InternalTheme;
-  customColor?: string;
-  disabled?: boolean;
-}) => {
+}: SelectionState): ColorValue => {
   if (disabled) {
-    if (theme.isV3) {
-      return theme.colors.onSurfaceDisabled;
-    }
-    return theme.colors.disabled;
+    return theme.colors[CheckboxTokens.disabledOutlineColor];
   }
-
-  if (customColor) {
-    return customColor;
+  if (customUncheckedColor) {
+    return customUncheckedColor;
   }
-
-  if (theme.isV3) {
-    return theme.colors.primary;
+  if (error) {
+    return theme.colors[CheckboxTokens.errorOutlineColor];
   }
-
-  return theme.colors.accent;
+  return theme.colors[CheckboxTokens.outlineColor];
 };
 
-const getIOSRippleColor = ({
+const getIconColor = ({
   theme,
-  checkedColor,
   disabled,
-}: {
-  theme: InternalTheme;
-  checkedColor: string;
-  disabled?: boolean;
-}) => {
+  error,
+}: SelectionState): ColorValue => {
   if (disabled) {
-    if (theme.isV3) {
-      return color(theme.colors.onSurface).alpha(0.16).rgb().string();
-    }
-    return color(theme.colors.text).alpha(0.16).rgb().string();
+    return theme.colors[CheckboxTokens.disabledIconColor];
   }
-  return color(checkedColor).fade(0.32).rgb().string();
+  if (error) {
+    return theme.colors[CheckboxTokens.errorIconColor];
+  }
+  return theme.colors[CheckboxTokens.iconColor];
 };
 
-export const getSelectionControlIOSColor = ({
+/**
+ * Resolve the static (non-interactive) colors + opacity for the Checkbox
+ * renderer. Hover / pressed / focused visuals are owned by `TouchableRipple`
+ * and the focus-ring outline, so they don't appear here.
+ */
+export const getSelectionVisualState = ({
   theme,
+  selected,
   disabled,
+  error,
   customColor,
-}: {
-  theme: InternalTheme;
-  disabled?: boolean;
-  customColor?: string;
-}) => {
-  const checkedColor = getIOSCheckedColor({ theme, disabled, customColor });
+  customUncheckedColor,
+}: SelectionState): SelectionVisualState => {
   return {
-    checkedColor,
-    rippleColor: getIOSRippleColor({
+    containerColor: getContainerColor({
+      theme,
+      selected,
+      disabled,
+      error,
+      customColor,
+      customUncheckedColor,
+    }),
+    outlineColor: getOutlineColor({
+      theme,
+      selected,
+      disabled,
+      error,
+      customColor,
+      customUncheckedColor,
+    }),
+    containerOpacity: disabled ? stateOpacity.disabled : stateOpacity.enabled,
+    iconColor: getIconColor({
       theme,
-      checkedColor,
+      selected,
       disabled,
+      error,
+      customColor,
+      customUncheckedColor,
     }),
   };
 };
diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
index 0e48e5c145..4507561a48 100644
--- a/src/components/Chip/Chip.tsx
+++ b/src/components/Chip/Chip.tsx
@@ -1,36 +1,33 @@
 import * as React from 'react';
-import {
-  AccessibilityState,
-  Animated,
+import { Platform, StyleSheet, Pressable, View } from 'react-native';
+import type {
   ColorValue,
   GestureResponderEvent,
-  Platform,
   PressableAndroidRippleConfig,
   StyleProp,
-  StyleSheet,
+  TextProps,
   TextStyle,
-  Pressable,
-  View,
-  ViewStyle,
+  ViewProps,
 } from 'react-native';
 
 import useLatestCallback from 'use-latest-callback';
 
-import { ChipAvatarProps, getChipColors } from './helpers';
+import { getChipColors } from './helpers';
+import type { ChipAvatarProps } from './helpers';
 import { useInternalTheme } from '../../core/theming';
-import { white } from '../../styles/themes/v2/colors';
-import type { $Omit, EllipsizeProp, ThemeProp } from '../../types';
+import { white } from '../../theme/colors';
+import type { ThemeProp } from '../../theme/types';
 import hasTouchHandler from '../../utils/hasTouchHandler';
 import type { IconSource } from '../Icon';
 import Icon from '../Icon';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import Surface from '../Surface';
-import TouchableRipple, {
-  Props as TouchableRippleProps,
-} from '../TouchableRipple/TouchableRipple';
+import type { SurfaceStyle } from '../Surface';
+import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
-export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
+export type Props = Omit<ViewProps, 'style'> & {
   /**
    * Mode of the chip.
    * - `flat` - flat chip without outline.
@@ -62,7 +59,7 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Note: With theme version 3 `selectedColor` doesn't apply to the `icon`.
    *       If you want specify custom color for the `icon`, render your own `Icon` component.
    */
-  selectedColor?: string;
+  selectedColor?: ColorValue;
   /**
    * @supported Available in v5.x with theme version 3
    * Whether to display overlay on selected chip
@@ -73,27 +70,27 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Note: Check will not be shown if `icon` is specified. If specified, `icon` will be shown regardless of `selected`.
    */
   showSelectedCheck?: boolean;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
   /**
    * Whether the chip is disabled. A disabled chip is greyed out and `onPress` is not called on touch.
    */
   disabled?: boolean;
   /**
-   * Type of background drawabale to display the feedback (Android).
+   * Type of background drawable to display the feedback (Android).
    * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: PressableAndroidRippleConfig;
   /**
    * Accessibility label for the chip. This is read by the screen reader when the user taps the chip.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * Accessibility label for the close icon. This is read by the screen reader when the user taps the close icon.
    */
   closeIconAccessibilityLabel?: string;
+  /**
+   * testID for the close icon button.
+   */
+  closeIconTestID?: string;
   /**
    * Function to execute on press.
    */
@@ -132,7 +129,7 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Style of chip's text
    */
   textStyle?: StyleProp<TextStyle>;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<SurfaceStyle>;
   /**
    * Sets additional distance outside of element in which a press can be detected.
    */
@@ -148,11 +145,15 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
   /**
    * Ellipsize Mode for the children text
    */
-  ellipsizeMode?: EllipsizeProp;
+  ellipsizeMode?: TextProps['ellipsizeMode'];
   /**
    * Specifies the largest possible scale a text font can reach.
    */
   maxFontSizeMultiplier?: number;
+  /**
+   * Reference to the chip container.
+   */
+  ref?: React.Ref<View>;
 };
 
 /**
@@ -186,9 +187,10 @@ const Chip = ({
   selected = false,
   disabled = false,
   background,
-  accessibilityLabel,
-  accessibilityRole = 'button',
+  'aria-label': ariaLabel,
+  role = 'button',
   closeIconAccessibilityLabel = 'Close',
+  closeIconTestID,
   onPress,
   onLongPress,
   onPressOut,
@@ -199,10 +201,8 @@ const Chip = ({
   textStyle,
   style,
   theme: themeOverrides,
-  testID = 'chip',
+  testID,
   selectedColor,
-  rippleColor: customRippleColor,
-  showSelectedOverlay = false,
   showSelectedCheck = true,
   ellipsizeMode,
   compact,
@@ -212,12 +212,9 @@ const Chip = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const { isV3, roundness } = theme;
-  const isWeb = Platform.OS === 'web';
 
-  const { current: elevation } = React.useRef<Animated.Value>(
-    new Animated.Value(isV3 && elevated ? 1 : 0)
-  );
+  const [pressed, setPressed] = React.useState(false);
+  const elevation = elevated ? (pressed ? 2 : 1) : 0;
 
   const hasPassedTouchHandler = hasTouchHandler({
     onPress,
@@ -229,60 +226,41 @@ const Chip = ({
   const isOutlined = mode === 'outlined';
 
   const handlePressIn = useLatestCallback((e: GestureResponderEvent) => {
-    const { scale } = theme.animation;
     onPressIn?.(e);
-    Animated.timing(elevation, {
-      toValue: isV3 ? (elevated ? 2 : 0) : 4,
-      duration: 200 * scale,
-      useNativeDriver:
-        isWeb || Platform.constants.reactNativeVersion.minor <= 72,
-    }).start();
+    setPressed(true);
   });
 
   const handlePressOut = useLatestCallback((e: GestureResponderEvent) => {
-    const { scale } = theme.animation;
     onPressOut?.(e);
-    Animated.timing(elevation, {
-      toValue: isV3 && elevated ? 1 : 0,
-      duration: 150 * scale,
-      useNativeDriver:
-        isWeb || Platform.constants.reactNativeVersion.minor <= 72,
-    }).start();
+    setPressed(false);
   });
 
-  const opacity = isV3 ? 0.38 : 0.26;
-  const defaultBorderRadius = roundness * (isV3 ? 2 : 4);
-  const iconSize = isV3 ? 18 : 16;
+  const elevationTransitionDuration =
+    theme.motion.duration[pressed ? 'short4' : 'short3'] *
+    theme.animation.scale;
 
-  const {
-    backgroundColor: customBackgroundColor,
-    borderRadius = defaultBorderRadius,
-  } = (StyleSheet.flatten(style) || {}) as ViewStyle;
+  const opacity = 0.38;
+  const defaultBorderRadius = theme.shapes.corner.small;
+  const iconSize = 18;
+
+  const borderRadius = defaultBorderRadius;
 
   const {
     borderColor,
     textColor,
     iconColor,
-    rippleColor,
+    contentOpacity,
     selectedBackgroundColor,
     backgroundColor,
   } = getChipColors({
     isOutlined,
     theme,
     selectedColor,
-    showSelectedOverlay,
-    customBackgroundColor,
     disabled,
-    customRippleColor,
   });
 
-  const accessibilityState: AccessibilityState = {
-    selected,
-    disabled,
-  };
+  const multiplier = compact ? 1.5 : 2;
 
-  const elevationStyle = isV3 || Platform.OS === 'android' ? elevation : 0;
-  const multiplier = isV3 ? (compact ? 1.5 : 2) : 1;
   const labelSpacings = {
     marginRight: onClose ? 0 : 8 * multiplier,
     marginLeft:
@@ -290,33 +268,25 @@ const Chip = ({
         ? 4 * multiplier
         : 8 * multiplier,
   };
+
   const contentSpacings = {
-    paddingRight: isV3 ? (onClose ? 34 : 0) : onClose ? 32 : 4,
+    paddingRight: onClose ? 34 : 0,
   };
+
   const labelTextStyle = {
     color: textColor,
-    ...(isV3 ? theme.fonts.labelLarge : theme.fonts.regular),
+    ...theme.fonts.labelLarge,
   };
+
   return (
     <Surface
-      style={[
-        styles.container,
-        isV3 && styles.md3Container,
-        !theme.isV3 && {
-          elevation: elevationStyle,
-        },
-        {
-          backgroundColor: selected ? selectedBackgroundColor : backgroundColor,
-          borderColor,
-          borderRadius,
-        },
-        style,
-      ]}
-      {...(theme.isV3 && { elevation: elevationStyle })}
+      backgroundColor={selected ? selectedBackgroundColor : backgroundColor}
+      borderRadius={borderRadius}
+      style={[styles.container, styles.md3Container, { borderColor }, style]}
+      elevation={elevation}
+      transitionDuration={elevationTransitionDuration}
       {...rest}
-      testID={`${testID}-container`}
       theme={theme}
-      container
     >
       <TouchableRipple
         borderless
@@ -327,23 +297,28 @@ const Chip = ({
         onPressIn={hasPassedTouchHandler ? handlePressIn : undefined}
         onPressOut={hasPassedTouchHandler ? handlePressOut : undefined}
         delayLongPress={delayLongPress}
-        rippleColor={rippleColor}
         disabled={disabled}
-        accessibilityLabel={accessibilityLabel}
-        accessibilityRole={accessibilityRole}
-        accessibilityState={accessibilityState}
+        aria-label={ariaLabel}
+        role={role}
+        aria-selected={selected}
+        aria-disabled={disabled}
         testID={testID}
         theme={theme}
         hitSlop={hitSlop}
       >
         <View
-          style={[styles.content, isV3 && styles.md3Content, contentSpacings]}
+          style={[
+            styles.content,
+            styles.md3Content,
+            { opacity: contentOpacity },
+            contentSpacings,
+          ]}
         >
           {avatar && !icon ? (
             <View
               style={[
                 styles.avatarWrapper,
-                isV3 && styles.md3AvatarWrapper,
+                styles.md3AvatarWrapper,
                 disabled && { opacity },
               ]}
             >
@@ -358,12 +333,12 @@ const Chip = ({
             <View
               style={[
                 styles.icon,
-                isV3 && styles.md3Icon,
+                styles.md3Icon,
                 avatar
                   ? [
                       styles.avatar,
                       styles.avatarSelected,
-                      isV3 && selected && styles.md3SelectedIcon,
+                      selected && styles.md3SelectedIcon,
                     ]
                   : null,
               ]}
@@ -374,9 +349,9 @@ const Chip = ({
                   color={
                     avatar
                       ? white
-                      : !disabled && theme.isV3
-                      ? theme.colors.primary
-                      : iconColor
+                      : !disabled
+                        ? theme.colors.primary
+                        : iconColor
                   }
                   size={18}
                   theme={theme}
@@ -396,7 +371,7 @@ const Chip = ({
             selectable={false}
             numberOfLines={1}
             style={[
-              isV3 ? styles.md3LabelText : styles.labelText,
+              styles.md3LabelText,
               labelTextStyle,
               labelSpacings,
               textStyle,
@@ -413,21 +388,16 @@ const Chip = ({
           <Pressable
             onPress={onClose}
             disabled={disabled}
-            accessibilityRole="button"
-            accessibilityLabel={closeIconAccessibilityLabel}
+            role="button"
+            aria-label={closeIconAccessibilityLabel}
+            testID={closeIconTestID}
           >
-            <View
-              style={[
-                styles.icon,
-                styles.closeIcon,
-                isV3 && styles.md3CloseIcon,
-              ]}
-            >
+            <View style={[styles.icon, styles.closeIcon, styles.md3CloseIcon]}>
               {closeIcon ? (
                 <Icon source={closeIcon} color={iconColor} size={iconSize} />
               ) : (
                 <MaterialCommunityIcon
-                  name={isV3 ? 'close' : 'close-circle'}
+                  name="close"
                   size={iconSize}
                   color={iconColor}
                   direction="ltr"
@@ -474,12 +444,6 @@ const styles = StyleSheet.create({
     marginRight: 8,
     padding: 0,
   },
-  labelText: {
-    minHeight: 24,
-    lineHeight: 24,
-    textAlignVertical: 'center',
-    marginVertical: 4,
-  },
   md3LabelText: {
     textAlignVertical: 'center',
     marginVertical: 6,
diff --git a/src/components/Chip/helpers.tsx b/src/components/Chip/helpers.tsx
index 47d0993c86..3091d36e31 100644
--- a/src/components/Chip/helpers.tsx
+++ b/src/components/Chip/helpers.tsx
@@ -2,8 +2,12 @@ import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
 
 import color from 'color';
 
-import { black, white } from '../../styles/themes/v2/colors';
-import type { InternalTheme } from '../../types';
+import { tokens } from '../../theme/tokens';
+import type { InternalTheme } from '../../theme/types';
+
+const md3 = (theme: InternalTheme) => theme;
+
+const stateOpacity = tokens.md.sys.state.opacity;
 
 export type ChipAvatarProps = {
   style?: StyleProp<ViewStyle>;
@@ -20,40 +24,28 @@ const getBorderColor = ({
   isOutlined,
   disabled,
   selectedColor,
-  backgroundColor,
-}: BaseProps & { backgroundColor: string; selectedColor?: string }) => {
+}: BaseProps & { selectedColor?: ColorValue }) => {
   const isSelectedColor = selectedColor !== undefined;
+  const { colors } = md3(theme);
 
-  if (theme.isV3) {
-    if (!isOutlined) {
-      // If the Chip mode is "flat", set border color to transparent
-      return 'transparent';
-    }
-
-    if (disabled) {
-      return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string();
-    }
-
-    if (isSelectedColor) {
-      return color(selectedColor).alpha(0.29).rgb().string();
-    }
+  if (!isOutlined) {
+    // If the Chip mode is "flat", set border color to transparent
+    return 'transparent';
+  }
 
-    return theme.colors.outline;
+  if (disabled) {
+    return colors.surfaceContainer;
   }
 
-  if (isOutlined) {
-    if (isSelectedColor) {
+  if (isSelectedColor) {
+    if (typeof selectedColor === 'string') {
       return color(selectedColor).alpha(0.29).rgb().string();
     }
-
-    if (theme.dark) {
-      return color(white).alpha(0.29).rgb().string();
-    }
-
-    return color(black).alpha(0.29).rgb().string();
+    // PlatformColor / OpaqueColorValue: skip the alpha pass and render opaque.
+    return selectedColor;
   }
 
-  return backgroundColor;
+  return colors.outlineVariant;
 };
 
 const getTextColor = ({
@@ -62,139 +54,47 @@ const getTextColor = ({
   disabled,
   selectedColor,
 }: BaseProps & {
-  selectedColor?: string;
+  selectedColor?: ColorValue;
 }) => {
   const isSelectedColor = selectedColor !== undefined;
-  if (theme.isV3) {
-    if (disabled) {
-      return theme.colors.onSurfaceDisabled;
-    }
-
-    if (isSelectedColor) {
-      return selectedColor;
-    }
-
-    if (isOutlined) {
-      return theme.colors.onSurfaceVariant;
-    }
-
-    return theme.colors.onSecondaryContainer;
-  }
-
+  const { colors } = md3(theme);
   if (disabled) {
-    return theme.colors.disabled;
+    return colors.onSurface;
   }
 
   if (isSelectedColor) {
-    return color(selectedColor).alpha(0.87).rgb().string();
-  }
-
-  return color(theme.colors.text).alpha(0.87).rgb().string();
-};
-
-const getDefaultBackgroundColor = ({
-  theme,
-  isOutlined,
-}: Omit<BaseProps, 'disabled' | 'selectedColor'>) => {
-  if (theme.isV3) {
-    if (isOutlined) {
-      return theme.colors.surface;
-    }
-
-    return theme.colors.secondaryContainer;
+    return selectedColor;
   }
 
   if (isOutlined) {
-    return theme.colors?.surface;
+    return colors.onSurfaceVariant;
   }
 
-  if (theme.dark) {
-    return '#383838';
-  }
-
-  return '#ebebeb';
+  return colors.onSecondaryContainer;
 };
 
-const getBackgroundColor = ({
+const getDefaultBackgroundColor = ({
   theme,
   isOutlined,
-  disabled,
-  customBackgroundColor,
-}: BaseProps & {
-  customBackgroundColor?: ColorValue;
-}) => {
-  if (typeof customBackgroundColor === 'string') {
-    return customBackgroundColor;
-  }
-
-  if (theme.isV3) {
-    if (disabled) {
-      if (isOutlined) {
-        return 'transparent';
-      }
-      return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string();
-    }
+}: Omit<BaseProps, 'disabled' | 'selectedColor'>) => {
+  const { colors } = md3(theme);
+  if (isOutlined) {
+    return colors.surface;
   }
 
-  return getDefaultBackgroundColor({ theme, isOutlined });
+  return colors.secondaryContainer;
 };
 
-const getSelectedBackgroundColor = ({
-  theme,
-  isOutlined,
-  disabled,
-  customBackgroundColor,
-  showSelectedOverlay,
-}: BaseProps & {
-  customBackgroundColor?: ColorValue;
-  showSelectedOverlay?: boolean;
-}) => {
-  const backgroundColor = getBackgroundColor({
-    theme,
-    disabled,
-    isOutlined,
-    customBackgroundColor,
-  });
-
-  if (theme.isV3) {
-    if (isOutlined) {
-      if (showSelectedOverlay) {
-        return color(backgroundColor)
-          .mix(color(theme.colors.onSurfaceVariant), 0.12)
-          .rgb()
-          .string();
-      }
-      return color(backgroundColor)
-        .mix(color(theme.colors.onSurfaceVariant), 0)
-        .rgb()
-        .string();
-    }
-
-    if (showSelectedOverlay) {
-      return color(backgroundColor)
-        .mix(color(theme.colors.onSecondaryContainer), 0.12)
-        .rgb()
-        .string();
-    }
-
-    return color(backgroundColor)
-      .mix(color(theme.colors.onSecondaryContainer), 0)
-      .rgb()
-      .string();
-  }
-
-  if (theme.dark) {
+const getBackgroundColor = ({ theme, isOutlined, disabled }: BaseProps) => {
+  const { colors } = md3(theme);
+  if (disabled) {
     if (isOutlined) {
-      return color(backgroundColor).lighten(0.2).rgb().string();
+      return 'transparent';
     }
-    return color(backgroundColor).lighten(0.4).rgb().string();
-  }
-
-  if (isOutlined) {
-    return color(backgroundColor).darken(0.08).rgb().string();
+    return colors.surfaceContainerLow;
   }
 
-  return color(backgroundColor).darken(0.2).rgb().string();
+  return getDefaultBackgroundColor({ theme, isOutlined });
 };
 
 const getIconColor = ({
@@ -203,108 +103,48 @@ const getIconColor = ({
   disabled,
   selectedColor,
 }: BaseProps & {
-  selectedColor?: string;
+  selectedColor?: ColorValue;
 }) => {
   const isSelectedColor = selectedColor !== undefined;
-  if (theme.isV3) {
-    if (disabled) {
-      return theme.colors.onSurfaceDisabled;
-    }
-
-    if (isSelectedColor) {
-      return selectedColor;
-    }
-
-    if (isOutlined) {
-      return theme.colors.onSurfaceVariant;
-    }
-
-    return theme.colors.onSecondaryContainer;
-  }
-
+  const { colors } = md3(theme);
   if (disabled) {
-    return theme.colors.disabled;
+    return colors.onSurface;
   }
 
   if (isSelectedColor) {
-    return color(selectedColor).alpha(0.54).rgb().string();
+    return selectedColor;
   }
 
-  return color(theme.colors.text).alpha(0.54).rgb().string();
-};
-
-const getRippleColor = ({
-  theme,
-  isOutlined,
-  disabled,
-  selectedColor,
-  selectedBackgroundColor,
-  customRippleColor,
-}: BaseProps & {
-  selectedBackgroundColor: string;
-  selectedColor?: string;
-  customRippleColor?: ColorValue;
-}) => {
-  if (customRippleColor) {
-    return customRippleColor;
-  }
-
-  const isSelectedColor = selectedColor !== undefined;
-  const textColor = getTextColor({
-    theme,
-    disabled,
-    selectedColor,
-    isOutlined,
-  });
-
-  if (theme.isV3) {
-    if (isSelectedColor) {
-      return color(selectedColor).alpha(0.12).rgb().string();
-    }
-
-    return color(textColor).alpha(0.12).rgb().string();
-  }
-
-  if (isSelectedColor) {
-    return color(selectedColor).fade(0.5).rgb().string();
+  if (isOutlined) {
+    return colors.onSurfaceVariant;
   }
 
-  return selectedBackgroundColor;
+  return colors.onSecondaryContainer;
 };
 
 export const getChipColors = ({
   isOutlined,
   theme,
   selectedColor,
-  showSelectedOverlay,
-  customBackgroundColor,
   disabled,
-  customRippleColor,
 }: BaseProps & {
-  customBackgroundColor?: ColorValue;
   disabled?: boolean;
-  showSelectedOverlay?: boolean;
-  selectedColor?: string;
-  customRippleColor?: ColorValue;
+  selectedColor?: ColorValue;
 }) => {
   const baseChipColorProps = { theme, isOutlined, disabled };
 
   const backgroundColor = getBackgroundColor({
     ...baseChipColorProps,
-    customBackgroundColor,
   });
 
-  const selectedBackgroundColor = getSelectedBackgroundColor({
-    ...baseChipColorProps,
-    customBackgroundColor,
-    showSelectedOverlay,
-  });
+  const contentOpacity = disabled
+    ? stateOpacity.disabled
+    : stateOpacity.enabled;
 
   return {
     borderColor: getBorderColor({
       ...baseChipColorProps,
       selectedColor,
-      backgroundColor,
     }),
     textColor: getTextColor({
       ...baseChipColorProps,
@@ -314,13 +154,8 @@ export const getChipColors = ({
       ...baseChipColorProps,
       selectedColor,
     }),
-    rippleColor: getRippleColor({
-      ...baseChipColorProps,
-      selectedColor,
-      selectedBackgroundColor,
-      customRippleColor,
-    }),
+    contentOpacity,
     backgroundColor,
-    selectedBackgroundColor,
+    selectedBackgroundColor: backgroundColor,
   };
 };
diff --git a/src/components/CrossFadeIcon.tsx b/src/components/CrossFadeIcon.tsx
index 4cf3748c72..f4a87460ae 100644
--- a/src/components/CrossFadeIcon.tsx
+++ b/src/components/CrossFadeIcon.tsx
@@ -1,9 +1,20 @@
 import * as React from 'react';
-import { Animated, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import type { ColorValue } from 'react-native';
 
-import Icon, { IconSource, isEqualIcon, isValidIcon } from './Icon';
+import Animated, {
+  Easing,
+  interpolate,
+  ReduceMotion,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+import Icon, { isEqualIcon, isValidIcon } from './Icon';
+import type { IconSource } from './Icon';
 import { useInternalTheme } from '../core/theming';
-import type { ThemeProp } from '../types';
+import type { ThemeProp } from '../theme/types';
 
 type Props = {
   /**
@@ -13,7 +24,7 @@ type Props = {
   /**
    * Color of the icon.
    */
-  color: string;
+  color: ColorValue;
   /**
    * Size of the icon.
    */
@@ -33,18 +44,18 @@ const CrossFadeIcon = ({
   size,
   source,
   theme: themeOverrides,
-  testID = 'cross-fade-icon',
+  testID,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
+
   const [currentIcon, setCurrentIcon] = React.useState<IconSource>(
     () => source
   );
   const [previousIcon, setPreviousIcon] = React.useState<IconSource | null>(
     null
   );
-  const { current: fade } = React.useRef<Animated.Value>(new Animated.Value(1));
 
-  const { scale } = theme.animation;
+  const fade = useSharedValue(1);
 
   if (currentIcon !== source) {
     setPreviousIcon(() => currentIcon);
@@ -53,38 +64,41 @@ const CrossFadeIcon = ({
 
   React.useEffect(() => {
     if (isValidIcon(previousIcon) && !isEqualIcon(previousIcon, currentIcon)) {
-      fade.setValue(1);
+      fade.value = 1;
 
-      Animated.timing(fade, {
-        duration: scale * 200,
-        toValue: 0,
-        useNativeDriver: true,
-      }).start();
+      fade.value = withTiming(0, {
+        duration: theme.animation.scale * 200,
+        easing: Easing.inOut(Easing.ease),
+        reduceMotion: ReduceMotion.Never,
+      });
     }
-  }, [currentIcon, previousIcon, fade, scale]);
+  }, [currentIcon, fade, previousIcon, theme.animation.scale]);
 
-  const opacityPrev = fade;
-  const opacityNext = previousIcon
-    ? fade.interpolate({
-        inputRange: [0, 1],
-        outputRange: [1, 0],
-      })
-    : 1;
+  const hasPreviousIcon = Boolean(previousIcon);
 
-  const rotatePrev = fade.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['-90deg', '0deg'],
-  });
+  const previousIconStyle = useAnimatedStyle(() => ({
+    opacity: fade.value,
+    transform: [
+      {
+        rotate: `${interpolate(fade.value, [0, 1], [-90, 0])}deg`,
+      },
+    ],
+  }));
 
-  const rotateNext = previousIcon
-    ? fade.interpolate({
-        inputRange: [0, 1],
-        outputRange: ['0deg', '-180deg'],
-      })
-    : '0deg';
+  const currentIconStyle = useAnimatedStyle(() => ({
+    opacity: hasPreviousIcon ? 1 - fade.value : 1,
+    transform: [
+      {
+        rotate: hasPreviousIcon
+          ? `${interpolate(fade.value, [0, 1], [0, -180])}deg`
+          : '0deg',
+      },
+    ],
+  }));
 
   return (
     <View
+      testID={testID}
       style={[
         styles.content,
         {
@@ -93,30 +107,12 @@ const CrossFadeIcon = ({
         },
       ]}
     >
-      {previousIcon ? (
-        <Animated.View
-          style={[
-            styles.icon,
-            {
-              opacity: opacityPrev,
-              transform: [{ rotate: rotatePrev }],
-            },
-          ]}
-          testID={`${testID}-previous`}
-        >
+      {hasPreviousIcon ? (
+        <Animated.View style={[styles.icon, previousIconStyle]}>
           <Icon source={previousIcon} size={size} color={color} theme={theme} />
         </Animated.View>
       ) : null}
-      <Animated.View
-        style={[
-          styles.icon,
-          {
-            opacity: opacityNext,
-            transform: [{ rotate: rotateNext }],
-          },
-        ]}
-        testID={`${testID}-current`}
-      >
+      <Animated.View style={[styles.icon, currentIconStyle]}>
         <Icon source={currentIcon} size={size} color={color} theme={theme} />
       </Animated.View>
     </View>
diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx
index 42fe7ad080..0707212406 100644
--- a/src/components/DataTable/DataTable.tsx
+++ b/src/components/DataTable/DataTable.tsx
@@ -1,23 +1,20 @@
 import * as React from 'react';
-import { StyleSheet, StyleProp, View, ViewStyle } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 
 import DataTableCell from './DataTableCell';
 import DataTableHeader, {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   DataTableHeader as _DataTableHeader,
 } from './DataTableHeader';
 import DataTablePagination, {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   DataTablePagination as _DataTablePagination,
 } from './DataTablePagination';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import DataTableRow, { DataTableRow as _DataTableRow } from './DataTableRow';
 import DataTableTitle, {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   DataTableTitle as _DataTableTitle,
 } from './DataTableTitle';
 
-export type Props = React.ComponentPropsWithRef<typeof View> & {
+export type Props = ViewProps & {
   /**
    * Content of the `DataTable`.
    */
diff --git a/src/components/DataTable/DataTableCell.tsx b/src/components/DataTable/DataTableCell.tsx
index 1801d1ecc8..af332b3ae4 100644
--- a/src/components/DataTable/DataTableCell.tsx
+++ b/src/components/DataTable/DataTableCell.tsx
@@ -1,17 +1,20 @@
 import * as React from 'react';
-import {
-  StyleSheet,
+import { StyleSheet } from 'react-native';
+import type {
   StyleProp,
   ViewStyle,
   TextStyle,
   GestureResponderEvent,
 } from 'react-native';
 
-import type { $RemoveChildren } from '../../types';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
-export type Props = $RemoveChildren<typeof TouchableRipple> & {
+export type Props = Omit<
+  React.PropsWithoutRef<TouchableRippleProps>,
+  'children'
+> & {
   /**
    * Content of the `DataTableCell`.
    */
@@ -81,7 +84,6 @@ const DataTableCell = ({
     >
       <CellContent
         textStyle={textStyle}
-        testID={testID}
         maxFontSizeMultiplier={maxFontSizeMultiplier}
       >
         {children}
@@ -94,11 +96,7 @@ const CellContent = ({
   children,
   textStyle,
   maxFontSizeMultiplier,
-  testID,
-}: Pick<
-  Props,
-  'children' | 'textStyle' | 'testID' | 'maxFontSizeMultiplier'
->) => {
+}: Pick<Props, 'children' | 'textStyle' | 'maxFontSizeMultiplier'>) => {
   if (React.isValidElement(children)) {
     return children;
   }
@@ -108,7 +106,6 @@ const CellContent = ({
       style={textStyle}
       numberOfLines={1}
       maxFontSizeMultiplier={maxFontSizeMultiplier}
-      testID={`${testID}-text-container`}
     >
       {children}
     </Text>
diff --git a/src/components/DataTable/DataTableHeader.tsx b/src/components/DataTable/DataTableHeader.tsx
index a4619ebb99..800f92b1a4 100644
--- a/src/components/DataTable/DataTableHeader.tsx
+++ b/src/components/DataTable/DataTableHeader.tsx
@@ -1,13 +1,11 @@
 import * as React from 'react';
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-
-import color from 'color';
+import { StyleSheet, View } from 'react-native';
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 
 import { useInternalTheme } from '../../core/theming';
-import { black, white } from '../../styles/themes/v2/colors';
-import type { ThemeProp } from '../../types';
+import type { ThemeProp } from '../../theme/types';
 
-export type Props = React.ComponentPropsWithRef<typeof View> & {
+export type Props = ViewProps & {
   /**
    * Content of the `DataTableHeader`.
    */
@@ -52,12 +50,7 @@ const DataTableHeader = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const borderBottomColor = theme.isV3
-    ? theme.colors.surfaceVariant
-    : color(theme.dark ? white : black)
-        .alpha(0.12)
-        .rgb()
-        .string();
+  const borderBottomColor = theme.colors.surfaceVariant;
 
   return (
     <View {...rest} style={[styles.header, { borderBottomColor }, style]}>
diff --git a/src/components/DataTable/DataTablePagination.tsx b/src/components/DataTable/DataTablePagination.tsx
index dd72dbe54f..0fd2cb7a04 100644
--- a/src/components/DataTable/DataTablePagination.tsx
+++ b/src/components/DataTable/DataTablePagination.tsx
@@ -1,24 +1,17 @@
 import * as React from 'react';
-import {
-  ColorValue,
-  I18nManager,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import color from 'color';
-import type { ThemeProp } from 'src/types';
+import { StyleSheet, View } from 'react-native';
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 
+import { useLocale } from '../../core/locale';
 import { useInternalTheme } from '../../core/theming';
+import type { ThemeProp } from '../../theme/types';
 import Button from '../Button/Button';
 import IconButton from '../IconButton/IconButton';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import Menu from '../Menu/Menu';
 import Text from '../Typography/Text';
 
-export type Props = React.ComponentPropsWithRef<typeof View> &
+export type Props = ViewProps &
   PaginationControlsProps &
   PaginationDropdownProps & {
     /**
@@ -36,7 +29,7 @@ export type Props = React.ComponentPropsWithRef<typeof View> &
     /**
      * AccessibilityLabel for `label`.
      */
-    accessibilityLabel?: string;
+    'aria-label'?: string;
     style?: StyleProp<ViewStyle>;
     /**
      * @optional
@@ -57,14 +50,6 @@ type PaginationDropdownProps = {
    * The function to set the number of rows per page.
    */
   onItemsPerPageChange?: (numberOfItemsPerPage: number) => void;
-  /**
-   * Color of the dropdown item ripple effect.
-   */
-  dropdownItemRippleColor?: ColorValue;
-  /**
-   * Color of the select page dropdown ripple effect.
-   */
-  selectPageDropdownRippleColor?: ColorValue;
   /**
    * @optional
    */
@@ -88,10 +73,6 @@ type PaginationControlsProps = {
    * Whether to show fast forward and fast rewind buttons in pagination. False by default.
    */
   showFastPaginationControls?: boolean;
-  /**
-   * Color of the pagination control ripple effect.
-   */
-  paginationControlRippleColor?: ColorValue;
   /**
    * @optional
    */
@@ -104,11 +85,11 @@ const PaginationControls = ({
   onPageChange,
   showFastPaginationControls,
   theme: themeOverrides,
-  paginationControlRippleColor,
 }: PaginationControlsProps) => {
   const theme = useInternalTheme(themeOverrides);
+  const { direction } = useLocale();
 
-  const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text;
+  const textColor = theme.colors.onSurface;
 
   return (
     <>
@@ -119,14 +100,13 @@ const PaginationControls = ({
               name="page-first"
               color={color}
               size={size}
-              direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
+              direction={direction}
             />
           )}
           iconColor={textColor}
-          rippleColor={paginationControlRippleColor}
           disabled={page === 0}
           onPress={() => onPageChange(0)}
-          accessibilityLabel="page-first"
+          aria-label="page-first"
           theme={theme}
         />
       ) : null}
@@ -136,14 +116,13 @@ const PaginationControls = ({
             name="chevron-left"
             color={color}
             size={size}
-            direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
+            direction={direction}
           />
         )}
         iconColor={textColor}
-        rippleColor={paginationControlRippleColor}
         disabled={page === 0}
         onPress={() => onPageChange(page - 1)}
-        accessibilityLabel="chevron-left"
+        aria-label="chevron-left"
         theme={theme}
       />
       <IconButton
@@ -152,14 +131,13 @@ const PaginationControls = ({
             name="chevron-right"
             color={color}
             size={size}
-            direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
+            direction={direction}
           />
         )}
         iconColor={textColor}
-        rippleColor={paginationControlRippleColor}
         disabled={numberOfPages === 0 || page === numberOfPages - 1}
         onPress={() => onPageChange(page + 1)}
-        accessibilityLabel="chevron-right"
+        aria-label="chevron-right"
         theme={theme}
       />
       {showFastPaginationControls ? (
@@ -169,14 +147,13 @@ const PaginationControls = ({
               name="page-last"
               color={color}
               size={size}
-              direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
+              direction={direction}
             />
           )}
           iconColor={textColor}
-          rippleColor={paginationControlRippleColor}
           disabled={numberOfPages === 0 || page === numberOfPages - 1}
           onPress={() => onPageChange(numberOfPages - 1)}
-          accessibilityLabel="page-last"
+          aria-label="page-last"
           theme={theme}
         />
       ) : null}
@@ -189,8 +166,6 @@ const PaginationDropdown = ({
   numberOfItemsPerPage,
   onItemsPerPageChange,
   theme: themeOverrides,
-  selectPageDropdownRippleColor,
-  dropdownItemRippleColor,
 }: PaginationDropdownProps) => {
   const theme = useInternalTheme(themeOverrides);
   const { colors } = theme;
@@ -209,7 +184,6 @@ const PaginationDropdown = ({
           icon="menu-down"
           contentStyle={styles.contentStyle}
           theme={theme}
-          rippleColor={selectPageDropdownRippleColor}
         >
           {`${numberOfItemsPerPage}`}
         </Button>
@@ -227,7 +201,6 @@ const PaginationDropdown = ({
             onItemsPerPageChange?.(option);
             toggleSelect(false);
           }}
-          rippleColor={dropdownItemRippleColor}
           title={option}
           theme={theme}
         />
@@ -293,7 +266,7 @@ const PaginationDropdown = ({
  */
 const DataTablePagination = ({
   label,
-  accessibilityLabel,
+  'aria-label': accessibilityLabel,
   page,
   numberOfPages,
   onPageChange,
@@ -304,36 +277,26 @@ const DataTablePagination = ({
   onItemsPerPageChange,
   selectPageDropdownLabel,
   selectPageDropdownAccessibilityLabel,
-  selectPageDropdownRippleColor,
-  dropdownItemRippleColor,
   theme: themeOverrides,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const labelColor = color(
-    theme.isV3 ? theme.colors.onSurface : theme?.colors.text
-  )
-    .alpha(0.6)
-    .rgb()
-    .string();
+  const labelColor = theme.colors.onSurfaceVariant;
 
   return (
     <View
       {...rest}
       style={[styles.container, style]}
-      accessibilityLabel="pagination-container"
+      aria-label="pagination-container"
     >
       {numberOfItemsPerPageList &&
         numberOfItemsPerPage &&
         onItemsPerPageChange && (
-          <View
-            accessibilityLabel="Options Select"
-            style={styles.optionsContainer}
-          >
+          <View aria-label="Options Select" style={styles.optionsContainer}>
             <Text
               style={[styles.label, { color: labelColor }]}
               numberOfLines={3}
-              accessibilityLabel={
+              aria-label={
                 selectPageDropdownAccessibilityLabel ||
                 'selectPageDropdownLabel'
               }
@@ -344,8 +307,6 @@ const DataTablePagination = ({
               numberOfItemsPerPageList={numberOfItemsPerPageList}
               numberOfItemsPerPage={numberOfItemsPerPage}
               onItemsPerPageChange={onItemsPerPageChange}
-              selectPageDropdownRippleColor={selectPageDropdownRippleColor}
-              dropdownItemRippleColor={dropdownItemRippleColor}
               theme={theme}
             />
           </View>
@@ -353,7 +314,7 @@ const DataTablePagination = ({
       <Text
         style={[styles.label, { color: labelColor }]}
         numberOfLines={3}
-        accessibilityLabel={accessibilityLabel || 'label'}
+        aria-label={accessibilityLabel || 'label'}
       >
         {label}
       </Text>
diff --git a/src/components/DataTable/DataTableRow.tsx b/src/components/DataTable/DataTableRow.tsx
index 25491955d4..a833fda7b1 100644
--- a/src/components/DataTable/DataTableRow.tsx
+++ b/src/components/DataTable/DataTableRow.tsx
@@ -1,21 +1,21 @@
 import * as React from 'react';
-import {
+import { StyleSheet, View } from 'react-native';
+import type {
   GestureResponderEvent,
   StyleProp,
-  StyleSheet,
-  View,
   ViewProps,
   ViewStyle,
 } from 'react-native';
 
-import color from 'color';
-
 import { useInternalTheme } from '../../core/theming';
-import { black, white } from '../../styles/themes/v2/colors';
-import type { $RemoveChildren, ThemeProp } from '../../types';
+import type { ThemeProp } from '../../theme/types';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 
-export type Props = $RemoveChildren<typeof TouchableRipple> & {
+export type Props = Omit<
+  React.PropsWithoutRef<TouchableRippleProps>,
+  'children'
+> & {
   /**
    * Content of the `DataTableRow`.
    */
@@ -66,12 +66,7 @@ const DataTableRow = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const borderBottomColor = theme.isV3
-    ? theme.colors.surfaceVariant
-    : color(theme.dark ? white : black)
-        .alpha(0.12)
-        .rgb()
-        .string();
+  const borderBottomColor = theme.colors.surfaceVariant;
 
   return (
     <TouchableRipple
diff --git a/src/components/DataTable/DataTableTitle.tsx b/src/components/DataTable/DataTableTitle.tsx
index f6a95223f7..d6420ea41e 100644
--- a/src/components/DataTable/DataTableTitle.tsx
+++ b/src/components/DataTable/DataTableTitle.tsx
@@ -1,24 +1,29 @@
 import * as React from 'react';
-import {
-  Animated,
+import { PixelRatio, Pressable, StyleSheet } from 'react-native';
+import type {
   GestureResponderEvent,
-  I18nManager,
-  PixelRatio,
-  Pressable,
+  PressableProps,
   StyleProp,
-  StyleSheet,
   TextStyle,
   ViewStyle,
 } from 'react-native';
 
-import color from 'color';
+import Animated, {
+  Easing,
+  ReduceMotion,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 
+import { useLocale } from '../../core/locale';
 import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
+import { useReduceMotion } from '../../theme/accessibility/ReduceMotionContext';
+import type { ThemeProp } from '../../theme/types';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import Text from '../Typography/Text';
 
-export type Props = React.ComponentPropsWithRef<typeof Pressable> & {
+export type Props = PressableProps & {
   /**
    * Text content of the `DataTableTitle`.
    */
@@ -93,34 +98,35 @@ const DataTableTitle = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const { current: spinAnim } = React.useRef<Animated.Value>(
-    new Animated.Value(sortDirection === 'ascending' ? 0 : 1)
-  );
+  const reduceMotion = useReduceMotion();
+
+  const { direction } = useLocale();
+
+  const spin = useSharedValue(sortDirection === 'ascending' ? 0 : 180);
 
   React.useEffect(() => {
-    Animated.timing(spinAnim, {
-      toValue: sortDirection === 'ascending' ? 0 : 1,
+    spin.value = withTiming(sortDirection === 'ascending' ? 0 : 180, {
       duration: 150,
-      useNativeDriver: true,
-    }).start();
-  }, [sortDirection, spinAnim]);
+      easing: Easing.inOut(Easing.ease),
+      reduceMotion: reduceMotion ? ReduceMotion.Always : ReduceMotion.Never,
+    });
+  }, [reduceMotion, sortDirection, spin]);
 
-  const textColor = theme.isV3 ? theme.colors.onSurface : theme?.colors?.text;
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${spin.value}deg` }],
+  }));
 
-  const alphaTextColor = color(textColor).alpha(0.6).rgb().string();
+  const textColor = theme.colors.onSurface;
 
-  const spin = spinAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '180deg'],
-  });
+  const alphaTextColor = theme.colors.onSurfaceVariant;
 
   const icon = sortDirection ? (
-    <Animated.View style={[styles.icon, { transform: [{ rotate: spin }] }]}>
+    <Animated.View style={[styles.icon, animatedStyle]}>
       <MaterialCommunityIcon
         name="arrow-up"
         size={16}
         color={textColor}
-        direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
+        direction={direction}
       />
     </Animated.View>
   ) : null;
@@ -142,7 +148,7 @@ const DataTableTitle = ({
           // if numberOfLines causes wrap, center is lost. Align directly, sensitive to numeric and RTL
           numberOfLines > 1
             ? numeric
-              ? I18nManager.getConstants().isRTL
+              ? direction === 'rtl'
                 ? styles.leftText
                 : styles.rightText
               : styles.centerText
diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
index 32cc1e4a99..218353d5e8 100644
--- a/src/components/Dialog/Dialog.tsx
+++ b/src/components/Dialog/Dialog.tsx
@@ -1,11 +1,6 @@
 import * as React from 'react';
-import {
-  Animated,
-  Platform,
-  StyleProp,
-  StyleSheet,
-  ViewStyle,
-} from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
+import type { StyleProp } from 'react-native';
 
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -15,10 +10,10 @@ import DialogIcon from './DialogIcon';
 import DialogScrollArea from './DialogScrollArea';
 import DialogTitle from './DialogTitle';
 import { useInternalTheme } from '../../core/theming';
-import overlay from '../../styles/overlay';
-import type { ThemeProp } from '../../types';
+import type { Elevation, ThemeProp } from '../../theme/types';
 import Modal from '../Modal';
-import { DialogChildProps } from './utils';
+import type { SurfaceStyle } from '../Surface';
+import { DialogTitleIdContext } from './utils';
 
 export type Props = {
   /**
@@ -33,6 +28,14 @@ export type Props = {
    * Callback that is called when the user dismisses the dialog.
    */
   onDismiss?: () => void;
+  /**
+   * Accessibility label for dismissing the dialog if it's `dismissable`.
+   */
+  dismissAccessibilityLabel?: string;
+  /**
+   * Accessible name for the dialog. On web, defaults to the text of `Dialog.Title`.
+   */
+  'aria-label'?: string;
   /**
    * Determines Whether the dialog is visible.
    */
@@ -41,7 +44,7 @@ export type Props = {
    * Content of the `Dialog`.
    */
   children: React.ReactNode;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<SurfaceStyle>;
   /**
    * @optional
    */
@@ -50,19 +53,22 @@ export type Props = {
    * testID to be used on tests.
    */
   testID?: string;
+  /**
+   * testID for the overlay that is displayed behind the dialog.
+   */
+  overlayTestID?: string;
 };
 
-const DIALOG_ELEVATION: number = 24;
+const DIALOG_ELEVATION: Elevation = 3;
 
 /**
  * Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.
- * To render the `Dialog` above other components, you'll need to wrap it with the [`Portal`](../../Portal) component.
  *
  * ## Usage
  * ```js
  * import * as React from 'react';
  * import { View } from 'react-native';
- * import { Button, Dialog, Portal, PaperProvider, Text } from 'react-native-paper';
+ * import { Button, Dialog, PaperProvider, Text } from 'react-native-paper';
  *
  * const MyComponent = () => {
  *   const [visible, setVisible] = React.useState(false);
@@ -75,17 +81,15 @@ const DIALOG_ELEVATION: number = 24;
  *     <PaperProvider>
  *       <View>
  *         <Button onPress={showDialog}>Show Dialog</Button>
- *         <Portal>
- *           <Dialog visible={visible} onDismiss={hideDialog}>
- *             <Dialog.Title>Alert</Dialog.Title>
- *             <Dialog.Content>
- *               <Text variant="bodyMedium">This is simple dialog</Text>
- *             </Dialog.Content>
- *             <Dialog.Actions>
- *               <Button onPress={hideDialog}>Done</Button>
- *             </Dialog.Actions>
- *           </Dialog>
- *         </Portal>
+ *         <Dialog visible={visible} onDismiss={hideDialog}>
+ *           <Dialog.Title>Alert</Dialog.Title>
+ *           <Dialog.Content>
+ *             <Text variant="bodyMedium">This is simple dialog</Text>
+ *           </Dialog.Content>
+ *           <Dialog.Actions>
+ *             <Button onPress={hideDialog}>Done</Button>
+ *           </Dialog.Actions>
+ *         </Dialog>
  *       </View>
  *     </PaperProvider>
  *   );
@@ -99,34 +103,37 @@ const Dialog = ({
   dismissable = true,
   dismissableBackButton = dismissable,
   onDismiss,
+  dismissAccessibilityLabel,
+  'aria-label': ariaLabel,
   visible = false,
   style,
   theme: themeOverrides,
   testID,
+  overlayTestID,
 }: Props) => {
   const { right, left } = useSafeAreaInsets();
+
   const theme = useInternalTheme(themeOverrides);
-  const { isV3, dark, mode, colors, roundness } = theme;
-  const borderRadius = (isV3 ? 7 : 1) * roundness;
+  const borderRadius = theme.shapes.corner.extraLarge;
+
+  const backgroundColor = theme.colors.surfaceContainerHigh;
 
-  const backgroundColorV2 =
-    dark && mode === 'adaptive'
-      ? overlay(DIALOG_ELEVATION, colors?.surface)
-      : colors?.surface;
-  const backgroundColor = isV3
-    ? theme.colors.elevation.level3
-    : backgroundColorV2;
+  const titleId = React.useId();
 
   return (
     <Modal
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabel == null ? titleId : undefined}
       dismissable={dismissable}
       dismissableBackButton={dismissableBackButton}
       onDismiss={onDismiss}
+      dismissAccessibilityLabel={dismissAccessibilityLabel}
       visible={visible}
+      contentBackgroundColor={backgroundColor}
+      contentBorderRadius={borderRadius}
+      contentElevation={DIALOG_ELEVATION}
       contentContainerStyle={[
         {
-          borderRadius,
-          backgroundColor,
           marginHorizontal: Math.max(left, right, 26),
         },
         styles.container,
@@ -134,31 +141,11 @@ const Dialog = ({
       ]}
       theme={theme}
       testID={testID}
+      overlayTestID={overlayTestID}
     >
-      {React.Children.toArray(children)
-        .filter((child) => child != null && typeof child !== 'boolean')
-        .map((child, i) => {
-          if (isV3) {
-            if (i === 0 && React.isValidElement<DialogChildProps>(child)) {
-              return React.cloneElement(child, {
-                style: [{ marginTop: 24 }, child.props.style],
-              });
-            }
-          }
-
-          if (
-            i === 0 &&
-            React.isValidElement<DialogChildProps>(child) &&
-            child.type === DialogContent
-          ) {
-            // Dialog content is the first item, so we add a top padding
-            return React.cloneElement(child, {
-              style: [{ paddingTop: 24 }, child.props.style],
-            });
-          }
-
-          return child;
-        })}
+      <DialogTitleIdContext.Provider value={titleId}>
+        {children}
+      </DialogTitleIdContext.Provider>
     </Modal>
   );
 };
@@ -184,8 +171,8 @@ const styles = StyleSheet.create({
      * dialog (44 pixel from the top and bottom) it won't be dismissed.
      */
     marginVertical: Platform.OS === 'android' ? 44 : 0,
-    elevation: DIALOG_ELEVATION,
     justifyContent: 'flex-start',
+    paddingTop: 24,
   },
 });
 
diff --git a/src/components/Dialog/DialogActions.tsx b/src/components/Dialog/DialogActions.tsx
index cabebd2fe2..fb8e0c56e4 100644
--- a/src/components/Dialog/DialogActions.tsx
+++ b/src/components/Dialog/DialogActions.tsx
@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 
-import type { ThemeProp } from 'src/types';
-
-import { DialogActionChildProps } from './utils';
 import { useInternalTheme } from '../../core/theming';
+import type { ThemeProp } from '../../theme/types';
 
-export type Props = React.ComponentPropsWithRef<typeof View> & {
+export type Props = ViewProps & {
   /**
    * Content of the `DialogActions`.
    */
@@ -24,7 +23,7 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
  * ## Usage
  * ```js
  * import * as React from 'react';
- * import { Button, Dialog, Portal } from 'react-native-paper';
+ * import { Button, Dialog } from 'react-native-paper';
  *
  * const MyComponent = () => {
  *   const [visible, setVisible] = React.useState(false);
@@ -32,43 +31,29 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
  *   const hideDialog = () => setVisible(false);
  *
  *   return (
- *     <Portal>
- *       <Dialog visible={visible} onDismiss={hideDialog}>
- *         <Dialog.Actions>
- *           <Button onPress={() => console.log('Cancel')}>Cancel</Button>
- *           <Button onPress={() => console.log('Ok')}>Ok</Button>
- *         </Dialog.Actions>
- *       </Dialog>
- *     </Portal>
+ *     <Dialog visible={visible} onDismiss={hideDialog}>
+ *       <Dialog.Actions>
+ *         <Button onPress={() => console.log('Cancel')}>Cancel</Button>
+ *         <Button onPress={() => console.log('Ok')}>Ok</Button>
+ *       </Dialog.Actions>
+ *     </Dialog>
  *   );
  * };
  *
  * export default MyComponent;
  * ```
  */
-const DialogActions = (props: Props) => {
-  const { isV3 } = useInternalTheme(props.theme);
-  const actionsLength = React.Children.toArray(props.children).length;
+const DialogActions = ({
+  theme: themeOverrides,
+  style,
+  children,
+  ...rest
+}: Props) => {
+  useInternalTheme(themeOverrides);
 
   return (
-    <View
-      {...props}
-      style={[isV3 ? styles.v3Container : styles.container, props.style]}
-    >
-      {React.Children.map(props.children, (child, i) =>
-        React.isValidElement<DialogActionChildProps>(child)
-          ? React.cloneElement(child, {
-              compact: true,
-              uppercase: !isV3,
-              style: [
-                isV3 && {
-                  marginRight: i + 1 === actionsLength ? 0 : 8,
-                },
-                child.props.style,
-              ],
-            })
-          : child
-      )}
+    <View {...rest} style={[styles.v3Container, style]}>
+      {children}
     </View>
   );
 };
@@ -76,17 +61,12 @@ const DialogActions = (props: Props) => {
 DialogActions.displayName = 'Dialog.Actions';
 
 const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    padding: 8,
-  },
   v3Container: {
     flexDirection: 'row',
     flexGrow: 1,
     alignItems: 'center',
     justifyContent: 'flex-end',
+    columnGap: 8,
     paddingBottom: 24,
     paddingHorizontal: 24,
   },
diff --git a/src/components/Dialog/DialogContent.tsx b/src/components/Dialog/DialogContent.tsx
index b426b91f70..9af1742608 100644
--- a/src/components/Dialog/DialogContent.tsx
+++ b/src/components/Dialog/DialogContent.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { View, ViewStyle, StyleSheet, StyleProp } from 'react-native';
+import { View, StyleSheet } from 'react-native';
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 
-export type Props = React.ComponentPropsWithRef<typeof View> & {
+export type Props = ViewProps & {
   /**
    * Content of the `DialogContent`.
    */
@@ -15,7 +16,7 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
  * ## Usage
  * ```js
  * import * as React from 'react';
- * import { Dialog, Portal, Text } from 'react-native-paper';
+ * import { Dialog, Text } from 'react-native-paper';
  *
  * const MyComponent = () => {
  *   const [visible, setVisible] = React.useState(false);
@@ -23,13 +24,11 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
  *   const hideDialog = () => setVisible(false);
  *
  *   return (
- *     <Portal>
- *       <Dialog visible={visible} onDismiss={hideDialog}>
- *         <Dialog.Content>
- *           <Text variant="bodyMedium">This is simple dialog</Text>
- *         </Dialog.Content>
- *       </Dialog>
- *     </Portal>
+ *     <Dialog visible={visible} onDismiss={hideDialog}>
+ *       <Dialog.Content>
+ *         <Text variant="bodyMedium">This is simple dialog</Text>
+ *       </Dialog.Content>
+ *     </Dialog>
  *   );
  * };
  *
diff --git a/src/components/Dialog/DialogIcon.tsx b/src/components/Dialog/DialogIcon.tsx
index ad5841b93a..56cdfa0d64 100644
--- a/src/components/Dialog/DialogIcon.tsx
+++ b/src/components/Dialog/DialogIcon.tsx
@@ -1,16 +1,16 @@
-import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
-
-import type { ThemeProp } from 'src/types';
+import type { ColorValue } from 'react-native';
 
 import { useInternalTheme } from '../../core/theming';
-import Icon, { IconSource } from '../Icon';
+import type { ThemeProp } from '../../theme/types';
+import Icon from '../Icon';
+import type { IconSource } from '../Icon';
 
 export type Props = {
   /**
    *  Custom color for action icon.
    */
-  color?: string;
+  color?: ColorValue;
   /**
    * Name of the icon to show.
    */
@@ -23,6 +23,10 @@ export type Props = {
    * @optional
    */
   theme?: ThemeProp;
+  /**
+   * testID to be used on tests.
+   */
+  testID?: string;
 };
 
 /**
@@ -33,7 +37,7 @@ export type Props = {
  * ```js
  * import * as React from 'react';
  * import { StyleSheet } from 'react-native';
- * import { Dialog, Portal, Text } from 'react-native-paper';
+ * import { Dialog, Text } from 'react-native-paper';
  *
  * const MyComponent = () => {
  *   const [visible, setVisible] = React.useState(false);
@@ -41,15 +45,13 @@ export type Props = {
  *   const hideDialog = () => setVisible(false);
  *
  *   return (
- *     <Portal>
- *       <Dialog visible={visible} onDismiss={hideDialog}>
- *         <Dialog.Icon icon="alert" />
- *         <Dialog.Title style={styles.title}>This is a title</Dialog.Title>
- *         <Dialog.Content>
- *           <Text variant="bodyMedium">This is simple dialog</Text>
- *         </Dialog.Content>
- *       </Dialog>
- *     </Portal>
+ *     <Dialog visible={visible} onDismiss={hideDialog}>
+ *       <Dialog.Icon icon="alert" />
+ *       <Dialog.Title style={styles.title}>This is a title</Dialog.Title>
+ *       <Dialog.Content>
+ *         <Text variant="bodyMedium">This is simple dialog</Text>
+ *       </Dialog.Content>
+ *     </Dialog>
  *   );
  * };
  *
@@ -67,18 +69,16 @@ const DialogIcon = ({
   color,
   icon,
   theme: themeOverrides,
+  testID,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-
-  if (!theme.isV3) {
-    return null;
-  }
+  const { colors } = theme;
 
   //@ts-ignore
-  const iconColor = color || theme.colors.secondary;
+  const iconColor = color || colors.secondary;
 
   return (
-    <View style={styles.wrapper}>
+    <View style={styles.wrapper} testID={testID}>
       <Icon source={icon} color={iconColor} size={size} />
     </View>
   );
@@ -90,7 +90,8 @@ const styles = StyleSheet.create({
   wrapper: {
     alignItems: 'center',
     justifyContent: 'center',
-    paddingTop: 24,
+    marginBottom: 16,
+    paddingTop: 0,
   },
 });
 
diff --git a/src/components/Dialog/DialogScrollArea.tsx b/src/components/Dialog/DialogScrollArea.tsx
index 66fdcef6a0..bc0e03792d 100644
--- a/src/components/Dialog/DialogScrollArea.tsx
+++ b/src/components/Dialog/DialogScrollArea.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-
-import type { ThemeProp } from 'src/types';
+import { StyleSheet, View } from 'react-native';
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 
 import { useInternalTheme } from '../../core/theming';
+import type { ThemeProp } from '../../theme/types';
 
-export type Props = React.ComponentPropsWithRef<typeof View> & {
+export type Props = ViewProps & {
   /**
    * Content of the `DialogScrollArea`.
    */
@@ -25,7 +25,7 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
  * ```js
  * import * as React from 'react';
  * import { ScrollView } from 'react-native';
- * import { Dialog, Portal, Text } from 'react-native-paper';
+ * import { Dialog, Text } from 'react-native-paper';
  *
  * const MyComponent = () => {
  *   const [visible, setVisible] = React.useState(false);
@@ -33,15 +33,13 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
  *   const hideDialog = () => setVisible(false);
  *
  *   return (
- *     <Portal>
- *       <Dialog visible={visible} onDismiss={hideDialog}>
- *         <Dialog.ScrollArea>
- *           <ScrollView contentContainerStyle={{paddingHorizontal: 24}}>
- *             <Text>This is a scrollable area</Text>
- *           </ScrollView>
- *         </Dialog.ScrollArea>
- *       </Dialog>
- *     </Portal>
+ *     <Dialog visible={visible} onDismiss={hideDialog}>
+ *       <Dialog.ScrollArea>
+ *         <ScrollView contentContainerStyle={{paddingHorizontal: 24}}>
+ *           <Text>This is a scrollable area</Text>
+ *         </ScrollView>
+ *       </Dialog.ScrollArea>
+ *     </Dialog>
  *   );
  * };
  *
@@ -50,22 +48,16 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
  */
 const DialogScrollArea = (props: Props) => {
   const theme = useInternalTheme(props.theme);
+  const { colors } = theme;
   const borderStyles = {
-    borderColor: theme.isV3
-      ? theme.colors.surfaceVariant
-      : 'rgba(0, 0, 0, .12)',
-    borderTopWidth: theme.isV3 ? 1 : StyleSheet.hairlineWidth,
-    borderBottomWidth: theme.isV3 ? 1 : StyleSheet.hairlineWidth,
+    borderColor: colors.surfaceVariant,
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
   };
   return (
     <View
       {...props}
-      style={[
-        styles.container,
-        borderStyles,
-        theme.isV3 && styles.v3Container,
-        props.style,
-      ]}
+      style={[styles.container, borderStyles, styles.v3Container, props.style]}
     >
       {props.children}
     </View>
diff --git a/src/components/Dialog/DialogTitle.tsx b/src/components/Dialog/DialogTitle.tsx
index 9953fc506c..f60672f78e 100644
--- a/src/components/Dialog/DialogTitle.tsx
+++ b/src/components/Dialog/DialogTitle.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { StyleProp, StyleSheet, TextStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import type { StyleProp, TextStyle } from 'react-native';
 
+import { DialogTitleIdContext } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
+import type { ThemeProp } from '../../theme/types';
 import Text from '../Typography/Text';
-import Title from '../Typography/v2/Title';
 
-export type Props = React.ComponentPropsWithRef<typeof Title> & {
+export type Props = React.ComponentPropsWithRef<typeof Text> & {
   /**
    * Title text for the `DialogTitle`.
    */
@@ -24,7 +25,7 @@ export type Props = React.ComponentPropsWithRef<typeof Title> & {
  * ## Usage
  * ```js
  * import * as React from 'react';
- * import { Dialog, Portal, Text } from 'react-native-paper';
+ * import { Dialog, Text } from 'react-native-paper';
  *
  * const MyComponent = () => {
  *   const [visible, setVisible] = React.useState(false);
@@ -32,14 +33,12 @@ export type Props = React.ComponentPropsWithRef<typeof Title> & {
  *   const hideDialog = () => setVisible(false);
  *
  *   return (
- *     <Portal>
- *       <Dialog visible={visible} onDismiss={hideDialog}>
- *         <Dialog.Title>This is a title</Dialog.Title>
- *         <Dialog.Content>
- *           <Text variant="bodyMedium">This is simple dialog</Text>
- *         </Dialog.Content>
- *       </Dialog>
- *     </Portal>
+ *     <Dialog visible={visible} onDismiss={hideDialog}>
+ *       <Dialog.Title>This is a title</Dialog.Title>
+ *       <Dialog.Content>
+ *         <Text variant="bodyMedium">This is simple dialog</Text>
+ *       </Dialog.Content>
+ *     </Dialog>
  *   );
  * };
  *
@@ -50,27 +49,28 @@ const DialogTitle = ({
   children,
   theme: themeOverrides,
   style,
+  nativeID,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const { isV3, colors, fonts } = theme;
-
-  const TextComponent = isV3 ? Text : Title;
+  const { colors, fonts } = theme;
+  const titleId = React.useContext(DialogTitleIdContext);
 
   const headerTextStyle = {
-    color: isV3 ? colors.onSurface : colors?.text,
-    ...(isV3 ? fonts.headlineSmall : {}),
+    color: colors.onSurface,
+    ...fonts.headlineSmall,
   };
 
   return (
-    <TextComponent
+    <Text
       variant="headlineSmall"
-      accessibilityRole="header"
-      style={[styles.text, isV3 && styles.v3Text, headerTextStyle, style]}
+      role="heading"
+      nativeID={titleId ?? nativeID}
+      style={[styles.text, styles.v3Text, headerTextStyle, style]}
       {...rest}
     >
       {children}
-    </TextComponent>
+    </Text>
   );
 };
 
@@ -83,7 +83,7 @@ const styles = StyleSheet.create({
     marginHorizontal: 24,
   },
   v3Text: {
-    marginTop: 16,
+    marginTop: 0,
     marginBottom: 16,
   },
 });
diff --git a/src/components/Dialog/utils.ts b/src/components/Dialog/utils.ts
index c827d7b598..40ca761321 100644
--- a/src/components/Dialog/utils.ts
+++ b/src/components/Dialog/utils.ts
@@ -1,4 +1,9 @@
-import { StyleProp, ViewStyle } from 'react-native';
+import * as React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export const DialogTitleIdContext = React.createContext<string | undefined>(
+  undefined
+);
 
 export type DialogChildProps = {
   style?: StyleProp<ViewStyle>;
diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx
index be30d94c7c..b00c0ee895 100644
--- a/src/components/Divider.tsx
+++ b/src/components/Divider.tsx
@@ -1,13 +1,11 @@
-import * as React from 'react';
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-
-import color from 'color';
+import type * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 
 import { useInternalTheme } from '../core/theming';
-import { black, white } from '../styles/themes/v2/colors';
-import type { $RemoveChildren, ThemeProp } from '../types';
+import type { ThemeProp } from '../theme/types';
 
-export type Props = $RemoveChildren<typeof View> & {
+export type Props = Omit<React.PropsWithoutRef<ViewProps>, 'children'> & {
   /**
    * @renamed Renamed from 'inset' to 'leftInset` in v5.x
    * Whether divider has a left inset.
@@ -60,23 +58,17 @@ const Divider = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const { dark: isDarkTheme, isV3 } = theme;
 
-  const dividerColor = isV3
-    ? theme.colors.outlineVariant
-    : color(isDarkTheme ? white : black)
-        .alpha(0.12)
-        .rgb()
-        .string();
+  const dividerColor = theme.colors.outlineVariant;
 
   return (
     <View
       {...rest}
       style={[
         { height: StyleSheet.hairlineWidth, backgroundColor: dividerColor },
-        leftInset && (isV3 ? styles.v3LeftInset : styles.leftInset),
-        isV3 && horizontalInset && styles.horizontalInset,
-        isV3 && bold && styles.bold,
+        leftInset && styles.v3LeftInset,
+        horizontalInset && styles.horizontalInset,
+        bold && styles.bold,
         style,
       ]}
     />
@@ -84,9 +76,6 @@ const Divider = ({
 };
 
 const styles = StyleSheet.create({
-  leftInset: {
-    marginLeft: 72,
-  },
   v3LeftInset: {
     marginLeft: 16,
   },
diff --git a/src/components/Drawer/DrawerCollapsedItem.tsx b/src/components/Drawer/DrawerCollapsedItem.tsx
index 9fb461e9c5..9ffd121dca 100644
--- a/src/components/Drawer/DrawerCollapsedItem.tsx
+++ b/src/components/Drawer/DrawerCollapsedItem.tsx
@@ -1,24 +1,30 @@
 import * as React from 'react';
-import {
-  Animated,
+import { Platform, Pressable, StyleSheet, View } from 'react-native';
+import type {
   GestureResponderEvent,
   NativeSyntheticEvent,
-  Platform,
-  Pressable,
   StyleProp,
-  StyleSheet,
   TextLayoutEventData,
-  View,
+  ViewProps,
   ViewStyle,
 } from 'react-native';
 
+import Animated, {
+  Easing,
+  ReduceMotion,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
 import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
+import type { ThemeProp } from '../../theme/types';
 import Badge from '../Badge';
-import Icon, { IconSource } from '../Icon';
+import Icon from '../Icon';
+import type { IconSource } from '../Icon';
 import Text from '../Typography/Text';
 
-export type Props = React.ComponentPropsWithRef<typeof View> & {
+export type Props = ViewProps & {
   /**
    * The label text of the item.
    */
@@ -56,7 +62,7 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
   /**
    * Accessibility label for the button. This is read by the screen reader when the user taps the button.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   style?: StyleProp<ViewStyle>;
   /**
    * @optional
@@ -69,7 +75,6 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
   testID?: string;
 };
 
-const badgeSize = 8;
 const iconSize = 24;
 const itemSize = 56;
 const outlineHeight = 32;
@@ -104,38 +109,31 @@ const DrawerCollapsedItem = ({
   style,
   onPress,
   disabled,
-  accessibilityLabel,
+  'aria-label': ariaLabel,
   badge = false,
-  testID = 'drawer-collapsed-item',
+  testID,
   labelMaxFontSizeMultiplier,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const { isV3 } = theme;
   const { scale } = theme.animation;
 
   const [numOfLines, setNumOfLines] = React.useState(1);
 
-  const { current: animScale } = React.useRef<Animated.Value>(
-    new Animated.Value(active ? 1 : 0.5)
-  );
+  const outlineScale = useSharedValue(active ? 1 : 0.5);
 
   React.useEffect(() => {
     if (!active) {
-      animScale.setValue(0.5);
+      outlineScale.value = 0.5;
     }
-  }, [animScale, active]);
-
-  if (!isV3) {
-    return null;
-  }
+  }, [active, outlineScale]);
 
   const handlePressOut = () => {
-    Animated.timing(animScale, {
-      toValue: 1,
+    outlineScale.value = withTiming(1, {
       duration: 150 * scale,
-      useNativeDriver: true,
-    }).start();
+      easing: Easing.inOut(Easing.ease),
+      reduceMotion: ReduceMotion.Never,
+    });
   };
 
   const iconPadding = ((!label ? itemSize : outlineHeight) - iconSize) / 2;
@@ -143,9 +141,11 @@ const DrawerCollapsedItem = ({
   const backgroundColor = active
     ? theme.colors.secondaryContainer
     : 'transparent';
+
   const labelColor = active
     ? theme.colors.onSurface
     : theme.colors.onSurfaceVariant;
+
   const iconColor = active
     ? theme.colors.onSecondaryContainer
     : theme.colors.onSurfaceVariant;
@@ -163,25 +163,27 @@ const DrawerCollapsedItem = ({
 
   const labelTextStyle = {
     color: labelColor,
-    ...(isV3 ? theme.fonts.labelMedium : {}),
+    ...theme.fonts.labelMedium,
   };
 
   const icon =
     !active && unfocusedIcon !== undefined ? unfocusedIcon : focusedIcon;
 
+  const animatedOutlineStyle = useAnimatedStyle(() => ({
+    transform: [
+      label ? { scaleX: outlineScale.value } : { scale: outlineScale.value },
+    ],
+  }));
+
   return (
     <View {...rest}>
-      {/* eslint-disable-next-line react-native-a11y/has-accessibility-props */}
       <Pressable
         onPress={onPress}
         onPressOut={onPress ? handlePressOut : undefined}
         disabled={disabled}
-        // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
-        accessibilityTraits={active ? ['button', 'selected'] : 'button'}
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityState={{ selected: active }}
-        accessibilityLabel={accessibilityLabel}
+        role="button"
+        aria-selected={active}
+        aria-label={ariaLabel}
         testID={testID}
       >
         <View style={styles.wrapper}>
@@ -189,33 +191,19 @@ const DrawerCollapsedItem = ({
             style={[
               styles.outline,
               !label && styles.roundedOutline,
-              {
-                transform: [
-                  label
-                    ? {
-                        scaleX: animScale,
-                      }
-                    : { scale: animScale },
-                ],
-                backgroundColor,
-              },
+              { backgroundColor },
               style,
+              animatedOutlineStyle,
             ]}
-            testID={`${testID}-outline`}
           />
 
-          <View
-            style={[styles.icon, { top: iconPadding }]}
-            testID={`${testID}-container`}
-          >
+          <View style={[styles.icon, { top: iconPadding }]}>
             {badge !== false && (
               <View style={styles.badgeContainer}>
                 {typeof badge === 'boolean' ? (
-                  <Badge visible={badge} size={badgeSize} />
+                  <Badge visible={badge} />
                 ) : (
-                  <Badge visible={badge != null} size={2 * badgeSize}>
-                    {badge}
-                  </Badge>
+                  <Badge visible={badge != null}>{badge}</Badge>
                 )}
               </View>
             )}
diff --git a/src/components/Drawer/DrawerItem.tsx b/src/components/Drawer/DrawerItem.tsx
index 604df1b83b..50086bbe71 100644
--- a/src/components/Drawer/DrawerItem.tsx
+++ b/src/components/Drawer/DrawerItem.tsx
@@ -1,25 +1,23 @@
 import * as React from 'react';
-import {
+import { StyleSheet, View } from 'react-native';
+import type {
   ColorValue,
   GestureResponderEvent,
   PressableAndroidRippleConfig,
   StyleProp,
-  StyleSheet,
-  View,
+  ViewProps,
   ViewStyle,
 } from 'react-native';
 
-import color from 'color';
-
 import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
-import Icon, { IconSource } from '../Icon';
-import TouchableRipple, {
-  Props as TouchableRippleProps,
-} from '../TouchableRipple/TouchableRipple';
+import type { ThemeProp } from '../../theme/types';
+import Icon from '../Icon';
+import type { IconSource } from '../Icon';
+import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
-export type Props = React.ComponentPropsWithRef<typeof View> & {
+export type Props = ViewProps & {
   /**
    * The label text of the item.
    */
@@ -41,26 +39,22 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
    */
   onPress?: (e: GestureResponderEvent) => void;
   /**
-   * Type of background drawabale to display the feedback (Android).
+   * Type of background drawable to display the feedback (Android).
    * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: PressableAndroidRippleConfig;
   /**
    * Accessibility label for the button. This is read by the screen reader when the user taps the button.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * Callback which returns a React element to display on the right side. For instance a Badge.
    */
-  right?: (props: { color: string }) => React.ReactNode;
+  right?: (props: { color: ColorValue }) => React.ReactNode;
   /**
    * Specifies the largest possible scale a label font can reach.
    */
   labelMaxFontSizeMultiplier?: number;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
   /**
    * Sets additional distance outside of element in which a press can be detected.
    */
@@ -70,6 +64,10 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
    * @optional
    */
   theme?: ThemeProp;
+  /**
+   * testID to be used on tests.
+   */
+  testID?: string;
 };
 
 /**
@@ -97,38 +95,26 @@ const DrawerItem = ({
   active,
   disabled,
   theme: themeOverrides,
-  rippleColor: customRippleColor,
   style,
   onPress,
   background,
-  accessibilityLabel,
+  'aria-label': ariaLabel,
   right,
   labelMaxFontSizeMultiplier,
   hitSlop,
+  testID,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const { roundness, isV3 } = theme;
 
-  const backgroundColor = active
-    ? isV3
-      ? theme.colors.secondaryContainer
-      : color(theme.colors.primary).alpha(0.12).rgb().string()
-    : undefined;
+  const backgroundColor = active ? theme.colors.secondaryContainer : undefined;
   const contentColor = active
-    ? isV3
-      ? theme.colors.onSecondaryContainer
-      : theme.colors.primary
-    : isV3
-    ? theme.colors.onSurfaceVariant
-    : color(theme.colors.text).alpha(0.68).rgb().string();
+    ? theme.colors.onSecondaryContainer
+    : theme.colors.onSurfaceVariant;
 
-  const labelMargin = icon ? (isV3 ? 12 : 32) : 0;
-  const borderRadius = (isV3 ? 7 : 1) * roundness;
-  const rippleColor = isV3
-    ? color(contentColor).alpha(0.12).rgb().string()
-    : undefined;
-  const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium;
+  const labelMargin = icon ? 12 : 0;
+  const borderRadius = theme.shapes.corner.extraLarge;
+  const font = theme.fonts.labelLarge;
 
   return (
     <View {...rest}>
@@ -139,18 +125,18 @@ const DrawerItem = ({
         onPress={onPress}
         style={[
           styles.container,
+          styles.v3Container,
           { backgroundColor, borderRadius },
-          isV3 && styles.v3Container,
           style,
         ]}
-        accessibilityRole="button"
-        accessibilityState={{ selected: active }}
-        accessibilityLabel={accessibilityLabel}
-        rippleColor={customRippleColor || rippleColor}
+        role="button"
+        aria-selected={active}
+        aria-label={ariaLabel}
         theme={theme}
         hitSlop={hitSlop}
+        testID={testID}
       >
-        <View style={[styles.wrapper, isV3 && styles.v3Wrapper]}>
+        <View style={[styles.wrapper, styles.v3Wrapper]}>
           <View style={styles.content}>
             {icon ? (
               <Icon source={icon} size={24} color={contentColor} />
diff --git a/src/components/Drawer/DrawerSection.tsx b/src/components/Drawer/DrawerSection.tsx
index ed79c5e054..55773aac81 100644
--- a/src/components/Drawer/DrawerSection.tsx
+++ b/src/components/Drawer/DrawerSection.tsx
@@ -1,15 +1,14 @@
 import * as React from 'react';
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-
-import color from 'color';
+import { StyleSheet, View } from 'react-native';
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 
 import { useInternalTheme } from '../../core/theming';
-import { MD3Colors } from '../../styles/themes/v3/tokens';
-import type { ThemeProp } from '../../types';
+import { Palette } from '../../theme/tokens';
+import type { ThemeProp } from '../../theme/types';
 import Divider from '../Divider';
 import Text from '../Typography/Text';
 
-export type Props = React.ComponentPropsWithRef<typeof View> & {
+export type Props = ViewProps & {
   /**
    * Title to show as the header for the section.
    */
@@ -73,17 +72,14 @@ const DrawerSection = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const { isV3 } = theme;
-  const titleColor = isV3
-    ? theme.colors.onSurfaceVariant
-    : color(theme.colors.text).alpha(0.54).rgb().string();
-  const titleMargin = isV3 ? 28 : 16;
-  const font = isV3 ? theme.fonts.titleSmall : theme.fonts.medium;
+  const titleColor = theme.colors.onSurfaceVariant;
+  const titleMargin = 28;
+  const font = theme.fonts.titleSmall;
 
   return (
     <View style={[styles.container, style]} {...rest}>
       {title && (
-        <View style={[styles.titleContainer, isV3 && styles.v3TitleContainer]}>
+        <View style={[styles.titleContainer, styles.v3TitleContainer]}>
           {title && (
             <Text
               variant="titleSmall"
@@ -105,8 +101,9 @@ const DrawerSection = ({
       {children}
       {showDivider && (
         <Divider
-          {...(isV3 && { horizontalInset: true, bold: true })}
-          style={[styles.divider, isV3 && styles.v3Divider]}
+          horizontalInset
+          bold
+          style={[styles.divider, styles.v3Divider]}
           theme={theme}
         />
       )}
@@ -131,7 +128,7 @@ const styles = StyleSheet.create({
     marginTop: 4,
   },
   v3Divider: {
-    backgroundColor: MD3Colors.neutralVariant50,
+    backgroundColor: Palette.neutralVariant50,
   },
 });
 
diff --git a/src/components/FAB/AnimatedFAB.tsx b/src/components/FAB/AnimatedFAB.tsx
deleted file mode 100644
index ecfe7e1c60..0000000000
--- a/src/components/FAB/AnimatedFAB.tsx
+++ /dev/null
@@ -1,628 +0,0 @@
-import * as React from 'react';
-import type {
-  AccessibilityState,
-  ColorValue,
-  NativeSyntheticEvent,
-  PressableAndroidRippleConfig,
-  TextLayoutEventData,
-} from 'react-native';
-import {
-  Animated,
-  Easing,
-  GestureResponderEvent,
-  I18nManager,
-  Platform,
-  ScrollView,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-  Text,
-} from 'react-native';
-
-import color from 'color';
-
-import { getCombinedStyles, getFABColors, getLabelSizeWeb } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import type { $Omit, $RemoveChildren, ThemeProp } from '../../types';
-import type { IconSource } from '../Icon';
-import Icon from '../Icon';
-import Surface from '../Surface';
-import TouchableRipple, {
-  Props as TouchableRippleProps,
-} from '../TouchableRipple/TouchableRipple';
-import AnimatedText from '../Typography/AnimatedText';
-
-export type AnimatedFABIconMode = 'static' | 'dynamic';
-export type AnimatedFABAnimateFrom = 'left' | 'right';
-
-export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
-  /**
-   * Icon to display for the `FAB`.
-   */
-  icon: IconSource;
-  /**
-   * Label for extended `FAB`.
-   */
-  label: string;
-  /**
-   * Make the label text uppercased.
-   */
-  uppercase?: boolean;
-  /**
-   * Type of background drawabale to display the feedback (Android).
-   * https://reactnative.dev/docs/pressable#rippleconfig
-   */
-  background?: PressableAndroidRippleConfig;
-  /**
-   * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB.
-   * Uses `label` by default if specified.
-   */
-  accessibilityLabel?: string;
-  /**
-   * Accessibility state for the FAB. This is read by the screen reader when the user taps the FAB.
-   */
-  accessibilityState?: AccessibilityState;
-  /**
-   * Custom color for the icon and label of the `FAB`.
-   */
-  color?: string;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
-  /**
-   * Whether `FAB` is disabled. A disabled button is greyed out and `onPress` is not called on touch.
-   */
-  disabled?: boolean;
-  /**
-   * Whether `FAB` is currently visible.
-   */
-  visible?: boolean;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-  /**
-   * Function to execute on long press.
-   */
-  onLongPress?: (e: GestureResponderEvent) => void;
-  /**
-   * The number of milliseconds a user must touch the element before executing `onLongPress`.
-   */
-  delayLongPress?: number;
-  /**
-   * Whether icon should be translated to the end of extended `FAB` or be static and stay in the same place. The default value is `dynamic`.
-   */
-  iconMode?: AnimatedFABIconMode;
-  /**
-   * Indicates from which direction animation should be performed. The default value is `right`.
-   */
-  animateFrom?: AnimatedFABAnimateFrom;
-  /**
-   * Whether `FAB` should start animation to extend.
-   */
-  extended: boolean;
-  /**
-   * Specifies the largest possible scale a label font can reach.
-   */
-  labelMaxFontSizeMultiplier?: number;
-  /**
-   * @supported Available in v5.x with theme version 3
-   *
-   * Color mappings variant for combinations of container and icon colors.
-   */
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-  /**
-   * Sets additional distance outside of element in which a press can be detected.
-   */
-  hitSlop?: TouchableRippleProps['hitSlop'];
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  /**
-   * TestID used for testing purposes
-   */
-  testID?: string;
-};
-
-const SIZE = 56;
-const SCALE = 0.9;
-
-/**
- * An animated, extending horizontally floating action button represents the primary action in an application.
- *
- * ## Usage
- * ```js
- * import React from 'react';
- * import {
- *   StyleProp,
- *   ViewStyle,
- *   Animated,
- *   StyleSheet,
- *   Platform,
- *   ScrollView,
- *   Text,
- *   SafeAreaView,
- *   I18nManager,
- * } from 'react-native';
- * import { AnimatedFAB } from 'react-native-paper';
- *
- * const MyComponent = ({
- *   animatedValue,
- *   visible,
- *   extended,
- *   label,
- *   animateFrom,
- *   style,
- *   iconMode,
- * }) => {
- *   const [isExtended, setIsExtended] = React.useState(true);
- *
- *   const isIOS = Platform.OS === 'ios';
- *
- *   const onScroll = ({ nativeEvent }) => {
- *     const currentScrollPosition =
- *       Math.floor(nativeEvent?.contentOffset?.y) ?? 0;
- *
- *     setIsExtended(currentScrollPosition <= 0);
- *   };
- *
- *   const fabStyle = { [animateFrom]: 16 };
- *
- *   return (
- *     <SafeAreaView style={styles.container}>
- *       <ScrollView onScroll={onScroll}>
- *         {[...new Array(100).keys()].map((_, i) => (
- *           <Text>{i}</Text>
- *         ))}
- *       </ScrollView>
- *       <AnimatedFAB
- *         icon={'plus'}
- *         label={'Label'}
- *         extended={isExtended}
- *         onPress={() => console.log('Pressed')}
- *         visible={visible}
- *         animateFrom={'right'}
- *         iconMode={'static'}
- *         style={[styles.fabStyle, style, fabStyle]}
- *       />
- *     </SafeAreaView>
- *   );
- * };
- *
- * export default MyComponent;
- *
- * const styles = StyleSheet.create({
- *   container: {
- *     flexGrow: 1,
- *   },
- *   fabStyle: {
- *     bottom: 16,
- *     right: 16,
- *     position: 'absolute',
- *   },
- * });
- * ```
- */
-const AnimatedFAB = ({
-  icon,
-  label,
-  background,
-  accessibilityLabel = label,
-  accessibilityState,
-  color: customColor,
-  rippleColor: customRippleColor,
-  disabled,
-  onPress,
-  onLongPress,
-  delayLongPress,
-  theme: themeOverrides,
-  style,
-  visible = true,
-  uppercase: uppercaseProp,
-  testID = 'animated-fab',
-  animateFrom = 'right',
-  extended = false,
-  iconMode = 'dynamic',
-  variant = 'primary',
-  labelMaxFontSizeMultiplier,
-  hitSlop,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const uppercase: boolean = uppercaseProp ?? !theme.isV3;
-  const isIOS = Platform.OS === 'ios';
-  const isWeb = Platform.OS === 'web';
-  const isAnimatedFromRight = animateFrom === 'right';
-  const isIconStatic = iconMode === 'static';
-  const { isRTL } = I18nManager;
-  const labelRef = React.useRef<Text & HTMLElement>(null);
-  const { current: visibility } = React.useRef<Animated.Value>(
-    new Animated.Value(visible ? 1 : 0)
-  );
-  const { current: animFAB } = React.useRef<Animated.Value>(
-    new Animated.Value(0)
-  );
-  const { isV3, animation } = theme;
-  const { scale } = animation;
-
-  const labelSize = isWeb ? getLabelSizeWeb(labelRef) : null;
-  const [textWidth, setTextWidth] = React.useState<number>(
-    labelSize?.width ?? 0
-  );
-  const [textHeight, setTextHeight] = React.useState<number>(
-    labelSize?.height ?? 0
-  );
-
-  const borderRadius = SIZE / (isV3 ? 3.5 : 2);
-
-  React.useEffect(() => {
-    if (!isWeb) {
-      return;
-    }
-
-    const updateTextSize = () => {
-      if (labelRef.current) {
-        const labelSize = getLabelSizeWeb(labelRef);
-
-        if (labelSize) {
-          setTextHeight(labelSize.height ?? 0);
-          setTextWidth(labelSize.width ?? 0);
-        }
-      }
-    };
-
-    updateTextSize();
-    window.addEventListener('resize', updateTextSize);
-
-    return () => {
-      if (!isWeb) {
-        return;
-      }
-
-      window.removeEventListener('resize', updateTextSize);
-    };
-  }, [isWeb]);
-
-  React.useEffect(() => {
-    if (visible) {
-      Animated.timing(visibility, {
-        toValue: 1,
-        duration: 200 * scale,
-        useNativeDriver: true,
-      }).start();
-    } else {
-      Animated.timing(visibility, {
-        toValue: 0,
-        duration: 150 * scale,
-        useNativeDriver: true,
-      }).start();
-    }
-  }, [visible, scale, visibility]);
-
-  const { backgroundColor: customBackgroundColor, ...restStyle } =
-    (StyleSheet.flatten(style) || {}) as ViewStyle;
-
-  const { backgroundColor, foregroundColor } = getFABColors({
-    theme,
-    variant,
-    disabled,
-    customColor,
-    customBackgroundColor,
-  });
-
-  const rippleColor =
-    customRippleColor || color(foregroundColor).alpha(0.12).rgb().string();
-
-  const extendedWidth = textWidth + SIZE + borderRadius;
-
-  const distance = isAnimatedFromRight
-    ? -textWidth - borderRadius
-    : textWidth + borderRadius;
-
-  React.useEffect(() => {
-    Animated.timing(animFAB, {
-      toValue: !extended ? 0 : distance,
-      duration: 150 * scale,
-      useNativeDriver: true,
-      easing: Easing.linear,
-    }).start();
-  }, [animFAB, scale, distance, extended]);
-
-  const onTextLayout = ({
-    nativeEvent,
-  }: NativeSyntheticEvent<TextLayoutEventData>) => {
-    const currentWidth = Math.ceil(nativeEvent.lines[0]?.width ?? 0);
-    const currentHeight = Math.ceil(nativeEvent.lines[0]?.height ?? 0);
-
-    if (currentWidth !== textWidth || currentHeight !== textHeight) {
-      setTextHeight(currentHeight);
-
-      if (isIOS) {
-        return setTextWidth(currentWidth - 12);
-      }
-
-      setTextWidth(currentWidth);
-    }
-  };
-
-  const propForDirection = <T,>(right: T[]): T[] => {
-    if (isAnimatedFromRight) {
-      return right;
-    }
-
-    return right.reverse();
-  };
-
-  const combinedStyles = getCombinedStyles({
-    isAnimatedFromRight,
-    isIconStatic,
-    distance,
-    animFAB,
-  });
-
-  const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium;
-
-  const textStyle = {
-    color: foregroundColor,
-    ...font,
-  };
-
-  const md2Elevation = disabled || !isIOS ? 0 : 6;
-  const md3Elevation = disabled || !isIOS ? 0 : 3;
-
-  const shadowStyle = isV3 ? styles.v3Shadow : styles.shadow;
-  const baseStyle = [
-    StyleSheet.absoluteFill,
-    disabled ? styles.disabled : shadowStyle,
-  ];
-
-  const newAccessibilityState = { ...accessibilityState, disabled };
-
-  return (
-    <Surface
-      {...rest}
-      testID={`${testID}-container`}
-      style={[
-        {
-          opacity: visibility,
-          transform: [
-            {
-              scale: visibility,
-            },
-          ],
-          borderRadius,
-        },
-        !isV3 && {
-          elevation: md2Elevation,
-        },
-        styles.container,
-        restStyle,
-      ]}
-      {...(isV3 && { elevation: md3Elevation })}
-      theme={theme}
-      container
-    >
-      <Animated.View
-        style={[
-          !isV3 && {
-            transform: [
-              {
-                scaleY: animFAB.interpolate({
-                  inputRange: propForDirection([distance, 0]),
-                  outputRange: propForDirection([SCALE, 1]),
-                }),
-              },
-            ],
-          },
-          styles.standard,
-          { borderRadius },
-        ]}
-      >
-        <View style={[StyleSheet.absoluteFill, styles.shadowWrapper]}>
-          <Animated.View
-            pointerEvents="none"
-            style={[
-              baseStyle,
-              {
-                width: extendedWidth,
-                opacity: animFAB.interpolate({
-                  inputRange: propForDirection([distance, 0.9 * distance, 0]),
-                  outputRange: propForDirection([1, 0.15, 0]),
-                }),
-                borderRadius,
-              },
-            ]}
-            testID={`${testID}-extended-shadow`}
-          />
-          <Animated.View
-            pointerEvents="none"
-            style={[
-              baseStyle,
-              {
-                opacity: animFAB.interpolate({
-                  inputRange: propForDirection([distance, 0.9 * distance, 0]),
-                  outputRange: propForDirection([0, 0.85, 1]),
-                }),
-                width: SIZE,
-                borderRadius: animFAB.interpolate({
-                  inputRange: propForDirection([distance, 0]),
-                  outputRange: propForDirection([
-                    SIZE / (extendedWidth / SIZE),
-                    borderRadius,
-                  ]),
-                }),
-              },
-              combinedStyles.absoluteFill,
-            ]}
-            testID={`${testID}-shadow`}
-          />
-        </View>
-        <Animated.View
-          pointerEvents="box-none"
-          style={[styles.innerWrapper, { borderRadius }]}
-        >
-          <Animated.View
-            style={[
-              styles.standard,
-              {
-                width: extendedWidth,
-                backgroundColor,
-                borderRadius,
-              },
-              combinedStyles.innerWrapper,
-            ]}
-          >
-            <TouchableRipple
-              borderless
-              background={background}
-              onPress={onPress}
-              onLongPress={onLongPress}
-              delayLongPress={delayLongPress}
-              rippleColor={rippleColor}
-              disabled={disabled}
-              accessibilityLabel={accessibilityLabel}
-              accessibilityRole="button"
-              accessibilityState={newAccessibilityState}
-              testID={testID}
-              style={{ borderRadius }}
-              theme={theme}
-              hitSlop={hitSlop}
-            >
-              <View
-                style={[
-                  styles.standard,
-                  {
-                    width: extendedWidth,
-                    borderRadius,
-                  },
-                ]}
-              />
-            </TouchableRipple>
-          </Animated.View>
-        </Animated.View>
-      </Animated.View>
-
-      <Animated.View
-        style={[styles.iconWrapper, combinedStyles.iconWrapper]}
-        pointerEvents="none"
-      >
-        <Icon source={icon} size={24} color={foregroundColor} theme={theme} />
-      </Animated.View>
-
-      <View pointerEvents="none">
-        <AnimatedText
-          ref={isWeb ? labelRef : null}
-          variant="labelLarge"
-          numberOfLines={1}
-          onTextLayout={isIOS ? onTextLayout : undefined}
-          ellipsizeMode={'tail'}
-          style={[
-            {
-              [isAnimatedFromRight || isRTL ? 'right' : 'left']: isIconStatic
-                ? textWidth - SIZE + borderRadius / (isV3 ? 1 : 2)
-                : borderRadius,
-            },
-            {
-              minWidth: textWidth,
-              top: -SIZE / 2 - textHeight / 2,
-              opacity: animFAB.interpolate({
-                inputRange: propForDirection([distance, 0.7 * distance, 0]),
-                outputRange: propForDirection([1, 0, 0]),
-              }) as unknown as number,
-              // TODO: check
-              transform: [
-                {
-                  translateX: animFAB.interpolate({
-                    inputRange: propForDirection([distance, 0]),
-                    outputRange: propForDirection([0, SIZE]),
-                  }),
-                },
-              ],
-            },
-            styles.label,
-            uppercase && styles.uppercaseLabel,
-            textStyle,
-          ]}
-          theme={theme}
-          testID={`${testID}-text`}
-          maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
-        >
-          {label}
-        </AnimatedText>
-      </View>
-
-      {!isIOS && (
-        // Method `onTextLayout` on Android returns sizes of text visible on the screen,
-        // however during render the text in `FAB` isn't fully visible. In order to get
-        // proper text measurements there is a need to additionaly render that text, but
-        // wrapped in absolutely positioned `ScrollView` which height is 0.
-        <ScrollView style={styles.textPlaceholderContainer}>
-          <AnimatedText
-            variant="labelLarge"
-            numberOfLines={1}
-            onTextLayout={onTextLayout}
-            ellipsizeMode={'tail'}
-            style={[
-              styles.label,
-              uppercase && styles.uppercaseLabel,
-              textStyle,
-            ]}
-            theme={theme}
-          >
-            {label}
-          </AnimatedText>
-        </ScrollView>
-      )}
-    </Surface>
-  );
-};
-
-const styles = StyleSheet.create({
-  standard: {
-    height: SIZE,
-  },
-  disabled: {
-    elevation: 0,
-  },
-  // eslint-disable-next-line react-native/no-color-literals
-  container: {
-    position: 'absolute',
-    backgroundColor: 'transparent',
-  },
-  innerWrapper: {
-    flexDirection: 'row',
-    overflow: 'hidden',
-  },
-  shadowWrapper: {
-    elevation: 0,
-  },
-  shadow: {
-    elevation: 6,
-  },
-  v3Shadow: {
-    elevation: 3,
-  },
-  iconWrapper: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'absolute',
-    height: SIZE,
-    width: SIZE,
-  },
-  label: {
-    position: 'absolute',
-  },
-  uppercaseLabel: {
-    textTransform: 'uppercase',
-  },
-  textPlaceholderContainer: {
-    height: 0,
-    position: 'absolute',
-  },
-});
-
-export default AnimatedFAB;
diff --git a/src/components/FAB/Content.tsx b/src/components/FAB/Content.tsx
new file mode 100644
index 0000000000..2055405688
--- /dev/null
+++ b/src/components/FAB/Content.tsx
@@ -0,0 +1,111 @@
+import { StyleSheet, View } from 'react-native';
+import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
+
+import Animated from 'react-native-reanimated';
+import type { AnimatedStyle } from 'react-native-reanimated';
+
+import type { TypescaleKey } from '../../theme/types';
+import Icon from '../Icon';
+import type { IconSource } from '../Icon';
+import AnimatedText from '../Typography/AnimatedText';
+
+export type ContentProps = {
+  icon?: IconSource;
+  label?: string;
+  contentColor: ColorValue;
+  height: number;
+  iconSize: number;
+  leading: number;
+  trailing: number;
+  iconLabelGap: number;
+  labelTypescale?: TypescaleKey;
+  labelMaxFontSizeMultiplier?: number;
+  /**
+   * Reanimated style merged onto the label wrapper. Used by the Extended FAB
+   * to fade the label in and out as the FAB expands and collapses.
+   */
+  labelAnimatedStyle?: StyleProp<AnimatedStyle<ViewStyle>>;
+  labelNumberOfLines?: number;
+  labelEllipsisMode?: 'clip' | 'tail' | 'head' | 'middle';
+};
+
+/**
+ * Internal layout primitive: an icon-and-label row used by every FAB-flavored
+ * surface in this package (regular, Extended, Menu trigger, Menu item).
+ *
+ * No animation, no ripple, no shadow, no container shape. Just the content.
+ */
+const Content = ({
+  icon,
+  label,
+  contentColor,
+  height,
+  iconSize,
+  leading,
+  trailing,
+  iconLabelGap,
+  labelTypescale = 'labelLarge',
+  labelMaxFontSizeMultiplier,
+  labelAnimatedStyle,
+  labelNumberOfLines,
+  labelEllipsisMode,
+}: ContentProps) => {
+  const hasLabel = label !== undefined && label !== '';
+  const colorStyle = { color: contentColor };
+
+  return (
+    <>
+      <View
+        style={[
+          styles.row,
+          // Icon-only mode: square row, icon centered. With a label, the row
+          // is padding-driven and the icon must stay at `paddingStart` so it
+          // remains centered inside the 56 dp clip when the FAB collapses.
+          hasLabel
+            ? { height, paddingStart: leading, paddingEnd: trailing }
+            : [styles.rowIconOnly, { height, width: height }],
+        ]}
+      >
+        {icon ? (
+          <Icon source={icon} size={iconSize} color={contentColor} />
+        ) : null}
+        {hasLabel ? (
+          <Animated.View
+            style={[
+              icon ? { marginStart: iconLabelGap } : null,
+              labelAnimatedStyle,
+              styles.labelNoPointerEvents,
+            ]}
+          >
+            <AnimatedText
+              variant={labelTypescale}
+              selectable={false}
+              numberOfLines={labelNumberOfLines}
+              ellipsizeMode={labelEllipsisMode}
+              maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
+              style={colorStyle}
+            >
+              {label}
+            </AnimatedText>
+          </Animated.View>
+        ) : null}
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    pointerEvents: 'none',
+  },
+  rowIconOnly: {
+    justifyContent: 'center',
+  },
+  labelNoPointerEvents: {
+    pointerEvents: 'none',
+  },
+});
+
+export default Content;
diff --git a/src/components/FAB/Extended.tsx b/src/components/FAB/Extended.tsx
new file mode 100644
index 0000000000..17da09bd56
--- /dev/null
+++ b/src/components/FAB/Extended.tsx
@@ -0,0 +1,312 @@
+import * as React from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import type {
+  ColorValue,
+  GestureResponderEvent,
+  PressableAndroidRippleConfig,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+
+import Animated, {
+  type AnimatedStyle,
+  measure,
+  useAnimatedRef,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import { isUIRuntime, scheduleOnUI } from 'react-native-worklets';
+
+import Shell from './Shell';
+import type { Size, Variant } from './tokens';
+import { getDimensions } from './utils';
+import { useInternalTheme } from '../../core/theming';
+import { useReduceMotion } from '../../theme/accessibility/ReduceMotionContext';
+import { toRawSpring } from '../../theme/tokens/sys/motion';
+import type { ThemeProp } from '../../theme/types';
+import type { IconSource } from '../Icon';
+import AnimatedText from '../Typography/AnimatedText';
+
+export type Props = {
+  /**
+   * Icon to display inside the FAB.
+   */
+  icon: IconSource;
+  /**
+   * Label rendered next to the icon when expanded.
+   */
+  label: string;
+  /**
+   * Role-color preset. Defaults to `tonalPrimary`.
+   */
+  variant?: Variant;
+  /**
+   * Override the container (background) color. When set without `contentColor`,
+   * the icon and label colors are derived automatically via `contentColorFor`.
+   */
+  containerColor?: ColorValue;
+  /**
+   * Override the content (icon + label) color.
+   */
+  contentColor?: ColorValue;
+  /**
+   * Spec size. Defaults to `default`.
+   */
+  size?: Size;
+  /**
+   * Whether the FAB is expanded (icon + label) or collapsed (icon only). The
+   * width and label opacity animate per the MD3 Expressive spec on change.
+   */
+  expanded: boolean;
+  /**
+   * Whether the FAB is currently visible. Toggling animates the spec'd enter
+   * and exit (scale + alpha) on the FAB itself.
+   */
+  visible?: boolean;
+  /**
+   * Function to execute on press.
+   */
+  onPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Accessibility label. Falls back to `label` if unset.
+   */
+  'aria-label'?: string;
+  /**
+   * Indicates whether the element is checked. Accepts `true`, `false`,
+   * or `'mixed'` for an indeterminate state.
+   */
+  'aria-checked'?: boolean | 'mixed';
+  /**
+   * Indicates whether the element is selected.
+   */
+  'aria-selected'?: boolean;
+  /**
+   * Indicates whether the element is currently busy (e.g. loading).
+   */
+  'aria-busy'?: boolean;
+  /**
+   * Indicates whether the element's controlled content is expanded.
+   */
+  'aria-expanded'?: boolean;
+  /**
+   * Specifies the largest possible scale a label font can reach.
+   */
+  labelMaxFontSizeMultiplier?: number;
+  /**
+   * Type of background drawable to display the feedback (Android).
+   * https://reactnative.dev/docs/pressable#rippleconfig
+   */
+  background?: PressableAndroidRippleConfig;
+  /**
+   * Style for positioning the FAB. The visual treatment (size, shape, color)
+   * is driven by `variant` and `size`.
+   */
+  style?: StyleProp<AnimatedStyle<ViewStyle>>;
+  /**
+   * TestID used for testing purposes.
+   */
+  testID?: string;
+  /**
+   * @optional
+   */
+  theme?: ThemeProp;
+  ref?: React.Ref<View>;
+};
+
+/**
+ * An extended floating action button represents the primary action on a screen
+ * and shows a label next to the icon. Animates between expanded (icon + label)
+ * and collapsed (icon only) states.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { StyleSheet } from 'react-native';
+ * import { FAB } from 'react-native-paper';
+ *
+ * const MyComponent = () => {
+ *   const [expanded, setExpanded] = React.useState(true);
+ *
+ *   return (
+ *     <FAB.Extended
+ *       icon="plus"
+ *       label="New message"
+ *       expanded={expanded}
+ *       onPress={() => setExpanded((v) => !v)}
+ *       style={styles.fab}
+ *     />
+ *   );
+ * };
+ *
+ * const styles = StyleSheet.create({
+ *   fab: {
+ *     position: 'absolute',
+ *     margin: 16,
+ *     left: 0,
+ *     bottom: 0,
+ *   },
+ * });
+ *
+ * export default MyComponent;
+ * ```
+ */
+const Extended = ({
+  icon,
+  label,
+  variant = 'tonalPrimary',
+  containerColor,
+  contentColor,
+  size = 'default',
+  expanded,
+  visible = true,
+  onPress,
+  'aria-label': ariaLabel = label,
+  'aria-checked': ariaChecked,
+  'aria-selected': ariaSelected,
+  'aria-busy': ariaBusy,
+  'aria-expanded': ariaExpanded,
+  labelMaxFontSizeMultiplier,
+  background,
+  style,
+  testID,
+  theme: themeOverrides,
+  ref,
+}: Props) => {
+  const theme = useInternalTheme(themeOverrides);
+  const reduceMotion = useReduceMotion();
+
+  const dimensions = getDimensions({ theme, size });
+
+  const offscreenLabelRef = useAnimatedRef<Animated.View>();
+
+  const widthValue = useSharedValue(dimensions.width);
+  const labelOpacity = useSharedValue(expanded ? 1 : 0);
+
+  React.useEffect(() => {
+    const {
+      width: collapsedWidth,
+      leading,
+      iconSize,
+      iconLabelGap,
+      trailing,
+    } = dimensions;
+
+    const targetOpacity = expanded ? 1 : 0;
+
+    if (reduceMotion) {
+      scheduleOnUI(() => {
+        'worklet';
+
+        const labelWidth =
+          Platform.OS === 'web' || isUIRuntime()
+            ? (measure(offscreenLabelRef)?.width ?? 0)
+            : 0;
+
+        widthValue.value = expanded
+          ? leading + iconSize + iconLabelGap + labelWidth + trailing
+          : collapsedWidth;
+        labelOpacity.value = targetOpacity;
+      });
+      return;
+    }
+
+    const widthSpring = toRawSpring(
+      expanded
+        ? theme.motion.spring.fast.spatial
+        : theme.motion.spring.default.spatial
+    );
+    const opacitySpring = toRawSpring(
+      expanded
+        ? theme.motion.spring.default.effects
+        : theme.motion.spring.fast.effects
+    );
+
+    scheduleOnUI(() => {
+      'worklet';
+
+      const labelWidth =
+        Platform.OS === 'web' || isUIRuntime()
+          ? (measure(offscreenLabelRef)?.width ?? 0)
+          : 0;
+
+      const expandedWidth =
+        leading + iconSize + iconLabelGap + labelWidth + trailing;
+
+      widthValue.value = withSpring(
+        expanded ? expandedWidth : collapsedWidth,
+        widthSpring
+      );
+      labelOpacity.value = withSpring(targetOpacity, opacitySpring);
+    });
+  }, [
+    expanded,
+    label,
+    dimensions,
+    theme,
+    reduceMotion,
+    widthValue,
+    labelOpacity,
+    offscreenLabelRef,
+  ]);
+
+  const labelAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: labelOpacity.value,
+  }));
+
+  return (
+    <>
+      <Shell
+        ref={ref}
+        icon={icon}
+        label={label}
+        variant={variant}
+        containerColor={containerColor}
+        contentColor={contentColor}
+        size={size}
+        visible={visible}
+        onPress={onPress}
+        aria-label={ariaLabel}
+        aria-checked={ariaChecked}
+        aria-selected={ariaSelected}
+        aria-busy={ariaBusy}
+        aria-expanded={ariaExpanded}
+        background={background}
+        widthShared={widthValue}
+        labelMaxFontSizeMultiplier={labelMaxFontSizeMultiplier}
+        labelAnimatedStyle={labelAnimatedStyle}
+        style={style}
+        testID={testID}
+        theme={themeOverrides}
+      />
+      <Animated.View
+        ref={offscreenLabelRef}
+        style={styles.offscreenMeasure}
+        importantForAccessibility="no-hide-descendants"
+        aria-hidden
+      >
+        <AnimatedText
+          variant={dimensions.labelTypescale}
+          numberOfLines={1}
+          maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
+        >
+          {label}
+        </AnimatedText>
+      </Animated.View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  offscreenMeasure: {
+    position: 'absolute',
+    alignSelf: 'flex-start',
+    opacity: 0,
+    pointerEvents: 'none',
+  },
+});
+
+export default Extended;
+
+// @component-docs ignore-next-line
+export { Extended };
diff --git a/src/components/FAB/FAB.tsx b/src/components/FAB/FAB.tsx
index 70777798ec..fb30396939 100644
--- a/src/components/FAB/FAB.tsx
+++ b/src/components/FAB/FAB.tsx
@@ -1,157 +1,94 @@
 import * as React from 'react';
-import {
-  AccessibilityState,
-  Animated,
+import { View } from 'react-native';
+import type {
   ColorValue,
   GestureResponderEvent,
   PressableAndroidRippleConfig,
   StyleProp,
-  StyleSheet,
-  View,
   ViewStyle,
 } from 'react-native';
 
-import { getExtendedFabStyle, getFABColors, getFabStyle } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import type { $Omit, $RemoveChildren, ThemeProp } from '../../types';
-import { forwardRef } from '../../utils/forwardRef';
-import ActivityIndicator from '../ActivityIndicator';
-import CrossFadeIcon from '../CrossFadeIcon';
-import Icon, { IconSource } from '../Icon';
-import Surface from '../Surface';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
-import Text from '../Typography/Text';
+import type { AnimatedStyle } from 'react-native-reanimated';
 
-type FABSize = 'small' | 'medium' | 'large';
+import Shell from './Shell';
+import type { Size, Variant } from './tokens';
+import type { ThemeProp } from '../../theme/types';
+import type { IconSource } from '../Icon';
 
-type FABMode = 'flat' | 'elevated';
-
-type IconOrLabel =
-  | {
-      icon: IconSource;
-      label?: string;
-    }
-  | {
-      icon?: IconSource;
-      label: string;
-    };
-
-export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
-  // For `icon` and `label` props their types are duplicated due to the generation of documentation.
-  // Appropriate type for them is `IconOrLabel` contains the both union and intersection types.
-  /**
-   * Icon to display for the `FAB`. It's optional only if `label` is defined.
-   */
-  icon?: IconSource;
-  /**
-   * Optional label for extended `FAB`. It's optional only if `icon` is defined.
-   */
-  label?: string;
+export type Props = {
   /**
-   * Make the label text uppercased.
+   * Icon to display inside the FAB.
    */
-  uppercase?: boolean;
-  /**
-   * Type of background drawabale to display the feedback (Android).
-   * https://reactnative.dev/docs/pressable#rippleconfig
-   */
-  background?: PressableAndroidRippleConfig;
+  icon: IconSource;
   /**
-   * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB.
-   * Uses `label` by default if specified.
+   * Role-color preset. Defaults to `tonalPrimary`.
    */
-  accessibilityLabel?: string;
+  variant?: Variant;
   /**
-   * Accessibility state for the FAB. This is read by the screen reader when the user taps the FAB.
+   * Override the container (background) color.
    */
-  accessibilityState?: AccessibilityState;
+  containerColor?: ColorValue;
   /**
-   * Whether an icon change is animated.
+   * Override the content (icon) color.
    */
-  animated?: boolean;
+  contentColor?: ColorValue;
   /**
-   *  @deprecated Deprecated in v.5x - use prop size="small".
-   *
-   *  Whether FAB is mini-sized, used to create visual continuity with other elements. This has no effect if `label` is specified.
+   * Spec size. Defaults to `default`.
    */
-  small?: boolean;
+  size?: Size;
   /**
-   * Custom color for the icon and label of the `FAB`.
-   */
-  color?: string;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
-  /**
-   * Whether `FAB` is disabled. A disabled button is greyed out and `onPress` is not called on touch.
-   */
-  disabled?: boolean;
-  /**
-   * Whether `FAB` is currently visible.
+   * Whether the FAB is currently visible. Toggling animates the spec'd enter
+   * and exit (scale + alpha) on the FAB itself.
    */
   visible?: boolean;
-  /**
-   * Whether to show a loading indicator.
-   */
-  loading?: boolean;
   /**
    * Function to execute on press.
    */
   onPress?: (e: GestureResponderEvent) => void;
   /**
-   * Function to execute on long press.
+   * Accessibility label. Falls back to nothing if unset.
    */
-  onLongPress?: (e: GestureResponderEvent) => void;
+  'aria-label'?: string;
   /**
-   * The number of milliseconds a user must touch the element before executing `onLongPress`.
+   * Indicates whether the element is checked. Accepts `true`, `false`,
+   * or `'mixed'` for an indeterminate state.
    */
-  delayLongPress?: number;
+  'aria-checked'?: boolean | 'mixed';
   /**
-   * @supported Available in v5.x with theme version 3
-   *
-   * Size of the `FAB`.
-   * - `small` - FAB with small height (40).
-   * - `medium` - FAB with default medium height (56).
-   * - `large` - FAB with large height (96).
+   * Indicates whether the element is selected.
    */
-  size?: FABSize;
+  'aria-selected'?: boolean;
   /**
-   * Custom size for the `FAB`. This prop takes precedence over size prop
+   * Indicates whether the element is currently busy (e.g. loading).
    */
-  customSize?: number;
+  'aria-busy'?: boolean;
   /**
-   * @supported Available in v5.x with theme version 3
-   *
-   * Mode of the `FAB`. You can change the mode to adjust the the shadow:
-   * - `flat` - button without a shadow.
-   * - `elevated` - button with a shadow.
+   * Indicates whether the element's controlled content is expanded.
    */
-  mode?: FABMode;
+  'aria-expanded'?: boolean;
   /**
-   * @supported Available in v5.x with theme version 3
-   *
-   * Color mappings variant for combinations of container and icon colors.
+   * Type of background drawable to display the feedback (Android).
+   * https://reactnative.dev/docs/pressable#rippleconfig
    */
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';
+  background?: PressableAndroidRippleConfig;
   /**
-   * Specifies the largest possible scale a label font can reach.
+   * Style for positioning the FAB. The visual treatment (size, shape, color)
+   * is driven by `variant` and `size`.
    */
-  labelMaxFontSizeMultiplier?: number;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<AnimatedStyle<ViewStyle>>;
   /**
-   * @optional
+   * TestID used for testing purposes.
    */
-  theme?: ThemeProp;
+  testID?: string;
   /**
-   * TestID used for testing purposes
+   * @optional
    */
-  testID?: string;
-  ref?: React.RefObject<View>;
-} & IconOrLabel;
+  theme?: ThemeProp;
+  ref?: React.Ref<View>;
+};
 
 /**
- * A floating action button represents the primary action on a screen. It appears in front of all screen content.
+ * A floating action button represents the primary action on a screen.
  *
  * ## Usage
  * ```js
@@ -174,198 +111,51 @@ export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
  *     right: 0,
  *     bottom: 0,
  *   },
- * })
+ * });
  *
  * export default MyComponent;
  * ```
  */
-const FAB = forwardRef<View, Props>(
-  (
-    {
-      icon,
-      label,
-      background,
-      accessibilityLabel = label,
-      accessibilityState,
-      animated = true,
-      color: customColor,
-      rippleColor: customRippleColor,
-      disabled,
-      onPress,
-      onLongPress,
-      delayLongPress,
-      theme: themeOverrides,
-      style,
-      visible = true,
-      uppercase: uppercaseProp,
-      loading,
-      testID = 'fab',
-      size = 'medium',
-      customSize,
-      mode = 'elevated',
-      variant = 'primary',
-      labelMaxFontSizeMultiplier,
-      ...rest
-    }: Props,
-    ref
-  ) => {
-    const theme = useInternalTheme(themeOverrides);
-    const uppercase = uppercaseProp ?? !theme.isV3;
-    const { current: visibility } = React.useRef<Animated.Value>(
-      new Animated.Value(visible ? 1 : 0)
-    );
-    const { isV3, animation } = theme;
-    const { scale } = animation;
-
-    React.useEffect(() => {
-      if (visible) {
-        Animated.timing(visibility, {
-          toValue: 1,
-          duration: 200 * scale,
-          useNativeDriver: true,
-        }).start();
-      } else {
-        Animated.timing(visibility, {
-          toValue: 0,
-          duration: 150 * scale,
-          useNativeDriver: true,
-        }).start();
-      }
-    }, [visible, scale, visibility]);
-
-    const IconComponent = animated ? CrossFadeIcon : Icon;
-
-    const fabStyle = getFabStyle({ customSize, size, theme });
-
-    const {
-      borderRadius = fabStyle.borderRadius,
-      backgroundColor: customBackgroundColor,
-    } = (StyleSheet.flatten(style) || {}) as ViewStyle;
-
-    const { backgroundColor, foregroundColor, rippleColor } = getFABColors({
-      theme,
-      variant,
-      disabled,
-      customColor,
-      customBackgroundColor,
-      customRippleColor,
-    });
-
-    const isLargeSize = size === 'large';
-    const isFlatMode = mode === 'flat';
-    const iconSize = isLargeSize ? 36 : 24;
-    const loadingIndicatorSize = isLargeSize ? 24 : 18;
-    const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium;
-
-    const extendedStyle = getExtendedFabStyle({ customSize, theme });
-    const textStyle = {
-      color: foregroundColor,
-      ...font,
-    };
-
-    const md3Elevation = isFlatMode || disabled ? 0 : 3;
-
-    const newAccessibilityState = { ...accessibilityState, disabled };
-
-    return (
-      <Surface
-        ref={ref}
-        {...rest}
-        style={[
-          {
-            borderRadius,
-            backgroundColor,
-            opacity: visibility,
-            transform: [
-              {
-                scale: visibility,
-              },
-            ],
-          },
-          !isV3 && styles.elevated,
-          !isV3 && disabled && styles.disabled,
-          style,
-        ]}
-        pointerEvents={visible ? 'auto' : 'none'}
-        testID={`${testID}-container`}
-        {...(isV3 && { elevation: md3Elevation })}
-        container
-      >
-        <TouchableRipple
-          borderless
-          background={background}
-          onPress={onPress}
-          onLongPress={onLongPress}
-          delayLongPress={delayLongPress}
-          rippleColor={rippleColor}
-          disabled={disabled}
-          accessibilityLabel={accessibilityLabel}
-          accessibilityRole="button"
-          accessibilityState={newAccessibilityState}
-          testID={testID}
-          style={{ borderRadius }}
-          {...rest}
-        >
-          <View
-            style={[styles.content, label ? extendedStyle : fabStyle]}
-            testID={`${testID}-content`}
-            pointerEvents="none"
-          >
-            {icon && loading !== true ? (
-              <IconComponent
-                source={icon}
-                size={customSize ? customSize / 2 : iconSize}
-                color={foregroundColor}
-              />
-            ) : null}
-            {loading ? (
-              <ActivityIndicator
-                size={customSize ? customSize / 2 : loadingIndicatorSize}
-                color={foregroundColor}
-              />
-            ) : null}
-            {label ? (
-              <Text
-                variant="labelLarge"
-                selectable={false}
-                testID={`${testID}-text`}
-                style={[
-                  styles.label,
-                  uppercase && styles.uppercaseLabel,
-                  textStyle,
-                ]}
-                maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
-              >
-                {label}
-              </Text>
-            ) : null}
-          </View>
-        </TouchableRipple>
-      </Surface>
-    );
-  }
+const FAB = ({
+  icon,
+  variant = 'tonalPrimary',
+  size = 'default',
+  visible = true,
+  onPress,
+  containerColor,
+  contentColor,
+  'aria-label': ariaLabel,
+  'aria-checked': ariaChecked,
+  'aria-selected': ariaSelected,
+  'aria-busy': ariaBusy,
+  'aria-expanded': ariaExpanded,
+  background,
+  style,
+  testID,
+  theme,
+  ref,
+}: Props) => (
+  <Shell
+    ref={ref}
+    icon={icon}
+    variant={variant}
+    size={size}
+    visible={visible}
+    onPress={onPress}
+    containerColor={containerColor}
+    contentColor={contentColor}
+    aria-label={ariaLabel}
+    aria-checked={ariaChecked}
+    aria-selected={ariaSelected}
+    aria-busy={ariaBusy}
+    aria-expanded={ariaExpanded}
+    background={background}
+    style={style}
+    testID={testID}
+    theme={theme}
+  />
 );
 
-const styles = StyleSheet.create({
-  elevated: {
-    elevation: 6,
-  },
-  content: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  label: {
-    marginHorizontal: 8,
-  },
-  uppercaseLabel: {
-    textTransform: 'uppercase',
-  },
-  disabled: {
-    elevation: 0,
-  },
-});
-
 export default FAB;
 
 // @component-docs ignore-next-line
diff --git a/src/components/FAB/FABGroup.tsx b/src/components/FAB/FABGroup.tsx
deleted file mode 100644
index cb66cf08e0..0000000000
--- a/src/components/FAB/FABGroup.tsx
+++ /dev/null
@@ -1,553 +0,0 @@
-import * as React from 'react';
-import {
-  Animated,
-  ColorValue,
-  GestureResponderEvent,
-  Pressable,
-  StyleProp,
-  StyleSheet,
-  TextStyle,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-import FAB from './FAB';
-import { getFABGroupColors } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
-import Card from '../Card/Card';
-import type { IconSource } from '../Icon';
-import Text from '../Typography/Text';
-
-const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
-
-export type Props = {
-  /**
-   * Action items to display in the form of a speed dial.
-   * An action item should contain the following properties:
-   * - `icon`: icon to display (required)
-   * - `label`: optional label text
-   * - `color`: custom icon color of the action item
-   * - `labelTextColor`: custom label text color of the action item
-   * - `accessibilityLabel`: accessibility label for the action, uses label by default if specified
-   * - `accessibilityHint`: accessibility hint for the action
-   * - `style`: pass additional styles for the fab item, for example, `backgroundColor`
-   * - `containerStyle`: pass additional styles for the fab item label container, for example, `backgroundColor` @supported Available in 5.x
-   * - `wrapperStyle`: pass additional styles for the wrapper of the action item.
-   * - `labelStyle`: pass additional styles for the fab item label, for example, `fontSize`
-   * - `labelMaxFontSizeMultiplier`: specifies the largest possible scale a title font can reach.
-   * - `onPress`: callback that is called when `FAB` is pressed (required)
-   * - `onLongPress`: callback that is called when `FAB` is long pressed
-   * - `toggleStackOnLongPress`: callback that is called when `FAB` is long pressed
-   * - `size`: size of action item. Defaults to `small`. @supported Available in v5.x
-   * - `testID`: testID to be used on tests
-   * - `rippleColor`: color of the ripple effect.
-   */
-  actions: Array<{
-    icon: IconSource;
-    label?: string;
-    color?: string;
-    labelTextColor?: string;
-    accessibilityLabel?: string;
-    accessibilityHint?: string;
-    style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-    containerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-    wrapperStyle?: StyleProp<ViewStyle>;
-    labelStyle?: StyleProp<TextStyle>;
-    labelMaxFontSizeMultiplier?: number;
-    onPress: (e: GestureResponderEvent) => void;
-    size?: 'small' | 'medium';
-    testID?: string;
-    rippleColor?: ColorValue;
-  }>;
-  /**
-   * Icon to display for the `FAB`.
-   * You can toggle it based on whether the speed dial is open to display a different icon.
-   */
-  icon: IconSource;
-  /**
-   * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB.
-   */
-  accessibilityLabel?: string;
-  /**
-   * Custom color for the `FAB`.
-   */
-  color?: string;
-  /**
-   * Custom backdrop color for opened speed dial background.
-   */
-  backdropColor?: string;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
-  /**
-   * Function to execute on pressing the `FAB`.
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-  /**
-   * Function to execute on long pressing the `FAB`.
-   */
-  onLongPress?: (e: GestureResponderEvent) => void;
-  /**
-   * Makes actions stack appear on long press instead of on press.
-   */
-  toggleStackOnLongPress?: boolean;
-  /**
-   * Changes the delay for long press reaction.
-   */
-  delayLongPress?: number;
-  /**
-   * Allows for onLongPress when stack is opened.
-   */
-  enableLongPressWhenStackOpened?: boolean;
-  /**
-   * Whether the speed dial is open.
-   */
-  open: boolean;
-  /**
-   * Callback which is called on opening and closing the speed dial.
-   * The open state needs to be updated when it's called, otherwise the change is dropped.
-   */
-  onStateChange: (state: { open: boolean }) => void;
-  /**
-   * Whether `FAB` is currently visible.
-   */
-  visible: boolean;
-  /**
-   * Style for the group. You can use it to pass additional styles if you need.
-   * For example, you can set an additional padding if you have a tab bar at the bottom.
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * Style for the FAB. It allows to pass the FAB button styles, such as backgroundColor.
-   */
-  fabStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-  /**
-   * @supported Available in v5.x with theme version 3
-   *
-   * Color mappings variant for combinations of container and icon colors.
-   */
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  /**
-   * Optional label for `FAB`.
-   */
-  label?: string;
-  /**
-   * Pass down testID from Group props to FAB.
-   */
-  testID?: string;
-};
-
-/**
- * A component to display a stack of FABs with related actions in a speed dial.
- * To render the group above other components, you'll need to wrap it with the [`Portal`](../Portal) component.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { FAB, Portal, PaperProvider } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [state, setState] = React.useState({ open: false });
- *
- *   const onStateChange = ({ open }) => setState({ open });
- *
- *   const { open } = state;
- *
- *   return (
- *     <PaperProvider>
- *       <Portal>
- *         <FAB.Group
- *           open={open}
- *           visible
- *           icon={open ? 'calendar-today' : 'plus'}
- *           actions={[
- *             { icon: 'plus', onPress: () => console.log('Pressed add') },
- *             {
- *               icon: 'star',
- *               label: 'Star',
- *               onPress: () => console.log('Pressed star'),
- *             },
- *             {
- *               icon: 'email',
- *               label: 'Email',
- *               onPress: () => console.log('Pressed email'),
- *             },
- *             {
- *               icon: 'bell',
- *               label: 'Remind',
- *               onPress: () => console.log('Pressed notifications'),
- *             },
- *           ]}
- *           onStateChange={onStateChange}
- *           onPress={() => {
- *             if (open) {
- *               // do something if the speed dial is open
- *             }
- *           }}
- *         />
- *       </Portal>
- *     </PaperProvider>
- *   );
- * };
- *
- * export default MyComponent;
- * ```
- */
-const FABGroup = ({
-  actions,
-  icon,
-  open,
-  onPress,
-  onLongPress,
-  toggleStackOnLongPress,
-  accessibilityLabel,
-  theme: themeOverrides,
-  style,
-  fabStyle,
-  visible,
-  label,
-  testID,
-  onStateChange,
-  color: colorProp,
-  delayLongPress = 200,
-  variant = 'primary',
-  enableLongPressWhenStackOpened = false,
-  backdropColor: customBackdropColor,
-  rippleColor,
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { top, bottom, right, left } = useSafeAreaInsets();
-
-  const { current: backdrop } = React.useRef<Animated.Value>(
-    new Animated.Value(0)
-  );
-  const animations = React.useRef<Animated.Value[]>(
-    actions.map(() => new Animated.Value(open ? 1 : 0))
-  );
-
-  const [isClosingAnimationFinished, setIsClosingAnimationFinished] =
-    React.useState(false);
-
-  const [prevActions, setPrevActions] = React.useState<
-    | {
-        icon: IconSource;
-        label?: string;
-        color?: string;
-        accessibilityLabel?: string;
-        style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-        onPress: (e: GestureResponderEvent) => void;
-        testID?: string;
-      }[]
-    | null
-  >(null);
-
-  const { scale } = theme.animation;
-  const { isV3 } = theme;
-
-  React.useEffect(() => {
-    if (open) {
-      setIsClosingAnimationFinished(false);
-      Animated.parallel([
-        Animated.timing(backdrop, {
-          toValue: 1,
-          duration: 250 * scale,
-          useNativeDriver: true,
-        }),
-        Animated.stagger(
-          isV3 ? 15 : 50 * scale,
-          animations.current
-            .map((animation) =>
-              Animated.timing(animation, {
-                toValue: 1,
-                duration: 150 * scale,
-                useNativeDriver: true,
-              })
-            )
-            .reverse()
-        ),
-      ]).start();
-    } else {
-      Animated.parallel([
-        Animated.timing(backdrop, {
-          toValue: 0,
-          duration: 200 * scale,
-          useNativeDriver: true,
-        }),
-        ...animations.current.map((animation) =>
-          Animated.timing(animation, {
-            toValue: 0,
-            duration: 150 * scale,
-            useNativeDriver: true,
-          })
-        ),
-      ]).start(({ finished }) => {
-        if (finished) {
-          setIsClosingAnimationFinished(true);
-        }
-      });
-    }
-  }, [open, actions, backdrop, scale, isV3]);
-
-  const close = () => onStateChange({ open: false });
-  const toggle = () => onStateChange({ open: !open });
-
-  const handlePress = (e: GestureResponderEvent) => {
-    onPress?.(e);
-    if (!toggleStackOnLongPress || open) {
-      toggle();
-    }
-  };
-
-  const handleLongPress = (e: GestureResponderEvent) => {
-    if (!open || enableLongPressWhenStackOpened) {
-      onLongPress?.(e);
-      if (toggleStackOnLongPress) {
-        toggle();
-      }
-    }
-  };
-
-  const { labelColor, backdropColor, stackedFABBackgroundColor } =
-    getFABGroupColors({ theme, customBackdropColor });
-
-  const backdropOpacity = open
-    ? backdrop.interpolate({
-        inputRange: [0, 0.5, 1],
-        outputRange: [0, 1, 1],
-      })
-    : backdrop;
-
-  const opacities = animations.current;
-  const scales = opacities.map((opacity) =>
-    open
-      ? opacity.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0.5, 1],
-        })
-      : 1
-  );
-
-  const translations = opacities.map((opacity) =>
-    open
-      ? opacity.interpolate({
-          inputRange: [0, 1],
-          outputRange: [24, -8],
-        })
-      : -8
-  );
-  const labelTranslations = opacities.map((opacity) =>
-    open
-      ? opacity.interpolate({
-          inputRange: [0, 1],
-          outputRange: [8, -8],
-        })
-      : -8
-  );
-
-  const containerPaddings = {
-    paddingBottom: bottom,
-    paddingRight: right,
-    paddingLeft: left,
-    paddingTop: top,
-  };
-
-  const actionsContainerVisibility: ViewStyle = {
-    display: isClosingAnimationFinished ? 'none' : 'flex',
-  };
-
-  if (actions.length !== prevActions?.length) {
-    animations.current = actions.map(
-      (_, i) => animations.current[i] || new Animated.Value(open ? 1 : 0)
-    );
-    setPrevActions(actions);
-  }
-
-  return (
-    <View
-      pointerEvents="box-none"
-      style={[styles.container, containerPaddings, style]}
-    >
-      <AnimatedPressable
-        accessibilityRole="button"
-        onPress={close}
-        pointerEvents={open ? 'auto' : 'none'}
-        style={[
-          styles.backdrop,
-          {
-            opacity: backdropOpacity,
-            backgroundColor: backdropColor,
-          },
-        ]}
-      />
-      <View pointerEvents="box-none" style={styles.safeArea}>
-        <View
-          pointerEvents={open ? 'box-none' : 'none'}
-          style={actionsContainerVisibility}
-        >
-          {actions.map((it, i) => {
-            const labelTextStyle = {
-              color: it.labelTextColor ?? labelColor,
-              ...(isV3 ? theme.fonts.titleMedium : {}),
-            };
-            const marginHorizontal =
-              typeof it.size === 'undefined' || it.size === 'small' ? 24 : 16;
-            const accessibilityLabel =
-              typeof it.accessibilityLabel !== 'undefined'
-                ? it.accessibilityLabel
-                : it.label;
-            const size = typeof it.size !== 'undefined' ? it.size : 'small';
-
-            const handleActionPress = (e: GestureResponderEvent) => {
-              it.onPress(e);
-              close();
-            };
-
-            return (
-              <View
-                key={i} // eslint-disable-line react/no-array-index-key
-                style={[
-                  styles.item,
-                  {
-                    marginHorizontal,
-                  },
-                  it.wrapperStyle,
-                ]}
-                pointerEvents={open ? 'box-none' : 'none'}
-                accessibilityRole="button"
-                importantForAccessibility={open ? 'yes' : 'no-hide-descendants'}
-                accessibilityElementsHidden={!open}
-                accessible={open}
-                accessibilityLabel={accessibilityLabel}
-              >
-                {it.label && (
-                  <View>
-                    <Card
-                      mode={isV3 ? 'contained' : 'elevated'}
-                      onPress={handleActionPress}
-                      accessibilityHint={it.accessibilityHint}
-                      importantForAccessibility="no-hide-descendants"
-                      accessibilityElementsHidden={true}
-                      style={[
-                        styles.containerStyle,
-                        {
-                          transform: [
-                            isV3
-                              ? { translateY: labelTranslations[i] }
-                              : { scale: scales[i] },
-                          ],
-                          opacity: opacities[i],
-                        },
-                        isV3 && styles.v3ContainerStyle,
-                        it.containerStyle,
-                      ]}
-                    >
-                      <Text
-                        variant="titleMedium"
-                        importantForAccessibility="no-hide-descendants"
-                        accessibilityElementsHidden={true}
-                        style={[labelTextStyle, it.labelStyle]}
-                        maxFontSizeMultiplier={it.labelMaxFontSizeMultiplier}
-                      >
-                        {it.label}
-                      </Text>
-                    </Card>
-                  </View>
-                )}
-                <FAB
-                  size={size}
-                  icon={it.icon}
-                  color={it.color}
-                  style={[
-                    {
-                      transform: [{ scale: scales[i] }],
-                      opacity: opacities[i],
-                      backgroundColor: stackedFABBackgroundColor,
-                    },
-                    isV3 && { transform: [{ translateY: translations[i] }] },
-                    it.style,
-                  ]}
-                  accessibilityElementsHidden={true}
-                  theme={theme}
-                  onPress={handleActionPress}
-                  importantForAccessibility="no-hide-descendants"
-                  testID={it.testID}
-                  visible={open}
-                  rippleColor={it.rippleColor}
-                />
-              </View>
-            );
-          })}
-        </View>
-        <FAB
-          onPress={handlePress}
-          onLongPress={handleLongPress}
-          delayLongPress={delayLongPress}
-          icon={icon}
-          color={colorProp}
-          accessibilityLabel={accessibilityLabel}
-          accessibilityRole="button"
-          accessibilityState={{ expanded: open }}
-          style={[styles.fab, fabStyle]}
-          theme={theme}
-          visible={visible}
-          label={label}
-          testID={testID}
-          variant={variant}
-          rippleColor={rippleColor}
-        />
-      </View>
-    </View>
-  );
-};
-
-FABGroup.displayName = 'FAB.Group';
-
-export default FABGroup;
-
-// @component-docs ignore-next-line
-export { FABGroup };
-
-const styles = StyleSheet.create({
-  safeArea: {
-    alignItems: 'flex-end',
-  },
-  container: {
-    ...StyleSheet.absoluteFill,
-    justifyContent: 'flex-end',
-  },
-  fab: {
-    marginHorizontal: 16,
-    marginBottom: 16,
-    marginTop: 0,
-  },
-  backdrop: {
-    ...StyleSheet.absoluteFill,
-  },
-  containerStyle: {
-    borderRadius: 5,
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    marginVertical: 8,
-    marginHorizontal: 16,
-    elevation: 2,
-  },
-  item: {
-    marginBottom: 16,
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-  },
-  // eslint-disable-next-line react-native/no-color-literals
-  v3ContainerStyle: {
-    backgroundColor: 'transparent',
-    elevation: 0,
-  },
-});
diff --git a/src/components/FAB/Menu.tsx b/src/components/FAB/Menu.tsx
new file mode 100644
index 0000000000..e4884647d6
--- /dev/null
+++ b/src/components/FAB/Menu.tsx
@@ -0,0 +1,731 @@
+import * as React from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import type { ColorValue, GestureResponderEvent } from 'react-native';
+
+import Animated, {
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withDelay,
+  withSpring,
+} from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import Content from './Content';
+import Shell from './Shell';
+import {
+  MenuTokens,
+  Tokens,
+  FOCUS_RING_INSET,
+  FOCUS_RING_THICKNESS,
+  webNoOutline,
+} from './tokens';
+import type { Size, Variant } from './tokens';
+import { useFocusRing } from './useFocusRing';
+import { resolveColors } from './utils';
+import { useLocale } from '../../core/locale';
+import { useInternalTheme } from '../../core/theming';
+import { useReduceMotion } from '../../theme/accessibility/ReduceMotionContext';
+import { toRawSpring } from '../../theme/tokens/sys/motion';
+import type { InternalTheme, ThemeProp } from '../../theme/types';
+import { resolveCornerRadius } from '../../theme/utils/shape';
+import Icon from '../Icon';
+import type { IconSource } from '../Icon';
+import TouchableRipple from '../TouchableRipple/TouchableRipple';
+
+export type MenuItemProps = {
+  /**
+   * Optional icon for the item.
+   */
+  icon?: IconSource;
+  /**
+   * Mandatory label.
+   */
+  label: string;
+  /**
+   * Called when the item is pressed. The menu is dismissed automatically
+   * after `onPress` runs.
+   */
+  onPress: (e: GestureResponderEvent) => void;
+  /**
+   * Accessibility label. Falls back to `label`.
+   */
+  'aria-label'?: string;
+  testID?: string;
+};
+
+export type MenuTriggerProps = {
+  /**
+   * Icon displayed in the trigger FAB (and cross-faded to `closeIcon` when
+   * the menu is open).
+   */
+  icon: IconSource;
+  variant?: Variant;
+  size?: Size;
+  containerColor?: ColorValue;
+  contentColor?: ColorValue;
+  visible?: boolean;
+  onPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Accessibility label for the trigger FAB.
+   */
+  'aria-label'?: string;
+  testID?: string;
+};
+
+type TwoToSix<T> =
+  | [T, T]
+  | [T, T, T]
+  | [T, T, T, T]
+  | [T, T, T, T, T]
+  | [T, T, T, T, T, T];
+
+export type MenuProps = {
+  /**
+   * Whether the menu is open.
+   */
+  expanded: boolean;
+  /**
+   * Called when the user taps the close button or taps an item.
+   */
+  onDismiss: () => void;
+  /**
+   * Trigger FAB configuration. The menu renders a morphing FAB that
+   * animates between the trigger appearance and the spec'd close button.
+   */
+  trigger: MenuTriggerProps;
+  /**
+   * Horizontal side the menu sits on. Default `'end'`.
+   */
+  alignment?: 'start' | 'center' | 'end';
+  /**
+   * Icon used by the close button when the menu is expanded. Default
+   * `'close'`.
+   */
+  closeIcon?: IconSource;
+  /**
+   * Menu items. Spec calls for 2 to 6 items.
+   */
+  items: TwoToSix<MenuItemProps>;
+  testID?: string;
+  /**
+   * @optional
+   */
+  theme?: ThemeProp;
+};
+
+/**
+ * Per the M3 FAB Menu spec, the menu picks one of three color sets (primary,
+ * secondary, tertiary) based on which family the trigger FAB belongs to.
+ * The close button is always the saturated role color; items are always the
+ * tonal (container) role color.
+ */
+const getCloseVariant = (triggerVariant: Variant): Variant => {
+  if (triggerVariant === 'primary' || triggerVariant === 'tonalPrimary') {
+    return 'primary';
+  }
+  if (triggerVariant === 'secondary' || triggerVariant === 'tonalSecondary') {
+    return 'secondary';
+  }
+  return 'tertiary';
+};
+
+const getItemsVariant = (triggerVariant: Variant): Variant => {
+  if (triggerVariant === 'primary' || triggerVariant === 'tonalPrimary') {
+    return 'tonalPrimary';
+  }
+  if (triggerVariant === 'secondary' || triggerVariant === 'tonalSecondary') {
+    return 'tonalSecondary';
+  }
+  return 'tonalTertiary';
+};
+
+// Per-item delay used by the stagger. Compose uses a single SlowEffects-driven
+// integer count that crosses each item's threshold; we approximate with a
+// fixed delay per index.
+const STAGGER_MS = 30;
+
+type AnimatedItemProps = {
+  expanded: boolean;
+  index: number;
+  itemCount: number;
+  theme: InternalTheme;
+  transformOrigin: 'left' | 'center' | 'right';
+  marginBottom: number;
+  children: React.ReactNode;
+};
+
+const AnimatedItem = ({
+  expanded,
+  index,
+  itemCount,
+  theme,
+  transformOrigin,
+  marginBottom,
+  children,
+}: AnimatedItemProps) => {
+  const reduceMotion = useReduceMotion();
+  // Initial values match the resting state for the current `expanded` prop so
+  // first mount doesn't animate unexpectedly.
+  const scaleX = useSharedValue(expanded ? 1 : 0);
+  const alpha = useSharedValue(expanded ? 1 : 0);
+
+  React.useEffect(() => {
+    const target = expanded ? 1 : 0;
+    // Bottom-up on open, top-down on close (matches Compose).
+    const delay = expanded
+      ? (itemCount - 1 - index) * STAGGER_MS
+      : index * STAGGER_MS;
+
+    if (reduceMotion) {
+      scaleX.value = target;
+      alpha.value = target;
+      return;
+    }
+    scaleX.value = withDelay(
+      delay,
+      withSpring(target, toRawSpring(theme.motion.spring.fast.spatial))
+    );
+    alpha.value = withDelay(
+      delay,
+      withSpring(target, toRawSpring(theme.motion.spring.fast.effects))
+    );
+  }, [expanded, index, itemCount, theme, reduceMotion, scaleX, alpha]);
+
+  // Only scaleX and opacity animate. Layout height stays at the item's
+  // natural size — the items container is absolutely positioned above the
+  // trigger, so this fixed height never affects the trigger's position.
+  const animStyle = useAnimatedStyle(() => ({
+    transform: [{ scaleX: scaleX.value }],
+    opacity: alpha.value,
+  }));
+
+  return (
+    <Animated.View
+      style={[
+        { transformOrigin, marginBottom },
+        animStyle,
+        expanded ? styles.pointerEventsAuto : styles.pointerEventsNone,
+      ]}
+      importantForAccessibility={expanded ? 'yes' : 'no-hide-descendants'}
+      aria-hidden={!expanded}
+    >
+      {children}
+    </Animated.View>
+  );
+};
+
+type ItemProps = {
+  icon?: IconSource;
+  label: string;
+  variant: Variant;
+  theme: InternalTheme;
+  onPress: (e: GestureResponderEvent) => void;
+  /**
+   * Accessibility label. Falls back to `label`.
+   */
+  'aria-label'?: string;
+  testID?: string;
+};
+
+/**
+ * A single FAB Menu item. Visually a tonal pill with an icon and a label,
+ * but it is not a floating action button: no shadow, no enter/exit scaling
+ * of its own (the surrounding `AnimatedItem` handles entrance), and its
+ * shape and dimensions come from the menu spec rather than FAB tokens.
+ */
+const MenuItem = ({
+  icon,
+  label,
+  variant,
+  theme,
+  onPress,
+  'aria-label': ariaLabel,
+  testID,
+}: ItemProps) => {
+  const colors = resolveColors({ theme, variant });
+  const { height, iconSize, leading, trailing, iconLabelGap, shape } =
+    MenuTokens.listItem;
+  const borderRadius = resolveCornerRadius(theme, shape);
+
+  const { focusedSV, onFocus, onBlur } = useFocusRing();
+  const focusRingStyle = useAnimatedStyle(() => ({
+    opacity: focusedSV.value ? 1 : 0,
+  }));
+
+  return (
+    <View style={styles.menuItemWrapper}>
+      <View
+        style={[
+          styles.menuItem,
+          { height, borderRadius, backgroundColor: colors.container },
+        ]}
+      >
+        <TouchableRipple
+          borderless
+          onPress={onPress}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          role="button"
+          aria-label={ariaLabel ?? label}
+          style={[
+            { borderRadius },
+            Platform.OS === 'web' ? webNoOutline : null,
+          ]}
+          testID={testID}
+        >
+          <Content
+            icon={icon}
+            label={label}
+            contentColor={colors.content}
+            height={height}
+            iconSize={iconSize}
+            leading={leading}
+            trailing={trailing}
+            iconLabelGap={iconLabelGap}
+          />
+        </TouchableRipple>
+      </View>
+      <Animated.View
+        style={[
+          styles.menuItemFocusRing,
+          {
+            borderColor: theme.colors.secondary,
+            borderRadius: borderRadius + FOCUS_RING_INSET,
+          },
+          focusRingStyle,
+        ]}
+      />
+    </View>
+  );
+};
+
+type MorphingTriggerProps = {
+  triggerVariant: Variant;
+  closeVariant: Variant;
+  triggerContainerColor?: ColorValue;
+  triggerContentColor?: ColorValue;
+  size: Size;
+  openIcon: IconSource;
+  closeIcon: IconSource;
+  expanded: boolean;
+  /** Whether the trigger FAB is visible; drives the scale/alpha enter/exit. */
+  visible: boolean;
+  alignment: 'start' | 'center' | 'end';
+  onPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Accessibility label for the trigger button.
+   */
+  'aria-label'?: string;
+  theme: InternalTheme;
+  testID?: string;
+};
+
+const MorphingTrigger = ({
+  triggerVariant,
+  closeVariant,
+  triggerContainerColor,
+  triggerContentColor,
+  size,
+  openIcon,
+  closeIcon,
+  expanded,
+  visible,
+  alignment,
+  onPress,
+  'aria-label': ariaLabel,
+  theme,
+  testID,
+}: MorphingTriggerProps) => {
+  const reduceMotion = useReduceMotion();
+
+  const closedSpec = Tokens.sizes[size];
+  const closedContainer = closedSpec.container;
+  const closedIconSize = closedSpec.icon;
+  const closedBorderRadius = resolveCornerRadius(theme, closedSpec.shape);
+
+  const openContainer = MenuTokens.closeButton.container;
+  const openIconSize = MenuTokens.closeButton.iconSize;
+  // Use container/2 (instead of the cornerFull sentinel) as the open radius,
+  // so the interpolation produces a smooth round-corner morph rather than
+  // jumping past the visual "circle" threshold almost immediately.
+  const openBorderRadius = openContainer / 2;
+
+  // Trigger color set (respects user overrides) and close color set (always
+  // the saturated role color per spec — no overrides).
+  const triggerColors = resolveColors({
+    theme,
+    variant: triggerVariant,
+    containerColor: triggerContainerColor,
+    contentColor: triggerContentColor,
+  });
+  const closeColors = resolveColors({ theme, variant: closeVariant });
+
+  const progress = useSharedValue(expanded ? 1 : 0);
+
+  React.useEffect(() => {
+    if (reduceMotion) {
+      progress.value = expanded ? 1 : 0;
+      return;
+    }
+    // Compose's ToggleFloatingActionButton uses a single FastSpatial spring
+    // for the full open/close progress (size, corner, color, icon all share
+    // one timeline).
+    progress.value = withSpring(
+      expanded ? 1 : 0,
+      toRawSpring(theme.motion.spring.fast.spatial)
+    );
+  }, [expanded, theme, reduceMotion, progress]);
+
+  // Derived shared values for the morph shape. Passing them to Shell as
+  // individual shared values (rather than packing them into an animated
+  // style) means Shell can put each into a single `useAnimatedStyle` with
+  // no inter-style merge surprises. Explicit deps so toggling `size` while
+  // the menu is open re-derives immediately — e.g. closed-state values
+  // change to match the new size's resting shape, and the close-state values
+  // (always 56 / 28) keep the open shape circular.
+  const widthShared = useDerivedValue(
+    () => interpolate(progress.value, [0, 1], [closedContainer, openContainer]),
+    [closedContainer, openContainer]
+  );
+  const heightShared = useDerivedValue(
+    () => interpolate(progress.value, [0, 1], [closedContainer, openContainer]),
+    [closedContainer, openContainer]
+  );
+  const borderRadiusShared = useDerivedValue(
+    () =>
+      interpolate(
+        progress.value,
+        [0, 1],
+        [closedBorderRadius, openBorderRadius]
+      ),
+    [closedBorderRadius, openBorderRadius]
+  );
+
+  const openPlaneStyle = useAnimatedStyle(() => ({
+    opacity: 1 - progress.value,
+  }));
+  const closePlaneStyle = useAnimatedStyle(() => ({
+    opacity: progress.value,
+  }));
+  const openIconAnimStyle = useAnimatedStyle(() => {
+    const offset = (widthShared.value - closedIconSize) / 2;
+    return {
+      opacity: 1 - progress.value,
+      transform: [{ translateX: offset }, { translateY: offset }],
+    };
+  });
+  const closeIconAnimStyle = useAnimatedStyle(() => {
+    const offset = (widthShared.value - openIconSize) / 2;
+    return {
+      opacity: progress.value,
+      transform: [{ translateX: offset }, { translateY: offset }],
+    };
+  });
+
+  // Outer slot is fixed at the trigger's resting size; the FAB itself
+  // shrinks toward the top-{start|center|end} corner of that slot when
+  // expanded (only meaningful for medium / large sizes).
+  const slotAlign: 'flex-start' | 'center' | 'flex-end' =
+    alignment === 'start'
+      ? 'flex-start'
+      : alignment === 'center'
+        ? 'center'
+        : 'flex-end';
+
+  return (
+    <View
+      style={[
+        styles.triggerSlot,
+        {
+          width: closedContainer,
+          height: closedContainer,
+          alignItems: slotAlign,
+        },
+        visible ? styles.pointerEventsBoxNone : styles.pointerEventsNone,
+      ]}
+    >
+      <Shell
+        size={size}
+        variant={triggerVariant}
+        containerColor={triggerContainerColor}
+        contentColor={triggerContentColor}
+        visible={visible}
+        onPress={onPress}
+        aria-label={ariaLabel}
+        testID={testID}
+        widthShared={widthShared}
+        heightShared={heightShared}
+        borderRadiusShared={borderRadiusShared}
+        transparentBackground
+        overlay={
+          // Two solid color planes cross-faded by opacity. We avoid
+          // interpolateColor because theme.colors.* can be a PlatformColor /
+          // DynamicColorIOS opaque value the worklet cannot parse.
+          <>
+            <Animated.View
+              style={[
+                styles.colorPlane,
+                { backgroundColor: triggerColors.container },
+                openPlaneStyle,
+              ]}
+            />
+            <Animated.View
+              style={[
+                styles.colorPlane,
+                { backgroundColor: closeColors.container },
+                closePlaneStyle,
+              ]}
+            />
+          </>
+        }
+        theme={theme}
+      >
+        <View style={styles.iconOrigin}>
+          <Animated.View style={[styles.iconAbsolute, openIconAnimStyle]}>
+            <Icon
+              source={openIcon}
+              size={closedIconSize}
+              color={triggerColors.content}
+            />
+          </Animated.View>
+          <Animated.View style={[styles.iconAbsolute, closeIconAnimStyle]}>
+            <Icon
+              source={closeIcon}
+              size={openIconSize}
+              color={closeColors.content}
+            />
+          </Animated.View>
+        </View>
+      </Shell>
+    </View>
+  );
+};
+
+/**
+ * Floating action button menu. Wraps a trigger FAB; when `expanded` is true,
+ * items appear stacked above and the trigger morphs into the spec'd close
+ * button (`shape: 'full'`, 56 dp, saturated role color).
+ *
+ * No visual backdrop and no outside-tap dismiss — that matches the MD3 spec
+ * and lets the user keep interacting with the content underneath. Dismiss
+ * via the close button or by tapping an item.
+ *
+ * ## Usage
+ * ```tsx
+ * const [open, setOpen] = React.useState(false);
+ *
+ * <Portal>
+ *   <FAB.Menu
+ *     expanded={open}
+ *     onDismiss={() => setOpen(false)}
+ *     trigger={{ icon: 'plus', variant: 'primary', onPress: () => setOpen(true) }}
+ *     items={[
+ *       { icon: 'email', label: 'Send', onPress: () => {} },
+ *       { icon: 'bell', label: 'Remind', onPress: () => {} },
+ *     ]}
+ *   />
+ * </Portal>
+ * ```
+ */
+const Menu = ({
+  expanded,
+  onDismiss,
+  trigger,
+  alignment = 'end',
+  closeIcon = 'close',
+  items,
+  testID,
+  theme: themeOverrides,
+}: MenuProps) => {
+  const theme = useInternalTheme(themeOverrides);
+  const { direction } = useLocale();
+  const isRTL = direction === 'rtl';
+  const insets = useSafeAreaInsets();
+
+  const triggerVariant: Variant = trigger.variant ?? 'tonalPrimary';
+  const size: Size = trigger.size ?? 'default';
+  const openIcon: IconSource = trigger.icon;
+  const openOnPress = trigger.onPress;
+  const triggerVisible = trigger.visible ?? true;
+  const closeVariant = getCloseVariant(triggerVariant);
+  const itemsVariant = getItemsVariant(triggerVariant);
+
+  const effectiveExpanded = triggerVisible && expanded;
+
+  const handleItemPress =
+    (item: MenuItemProps) => (e: GestureResponderEvent) => {
+      item.onPress(e);
+      onDismiss();
+    };
+
+  const flexAlign: 'flex-start' | 'center' | 'flex-end' =
+    alignment === 'start'
+      ? 'flex-start'
+      : alignment === 'center'
+        ? 'center'
+        : 'flex-end';
+  const itemTransformOrigin: 'left' | 'center' | 'right' =
+    alignment === 'start'
+      ? isRTL
+        ? 'right'
+        : 'left'
+      : alignment === 'center'
+        ? 'center'
+        : isRTL
+          ? 'left'
+          : 'right';
+
+  const triggerSlotSize = Tokens.sizes[size].container;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          paddingTop: insets.top,
+          paddingBottom: insets.bottom + 16,
+          paddingLeft: insets.left + 16,
+          paddingRight: insets.right + 16,
+        },
+      ]}
+      testID={testID}
+    >
+      <View style={[styles.stack, { alignItems: flexAlign }]}>
+        <View
+          style={[
+            styles.items,
+            alignment === 'start'
+              ? styles.itemsStart
+              : alignment === 'center'
+                ? styles.itemsCenter
+                : styles.itemsEnd,
+            {
+              bottom: triggerSlotSize + MenuTokens.spacing.closeToLastItem,
+              alignItems: flexAlign,
+            },
+          ]}
+        >
+          {items.map((item, index) => {
+            const isLast = index === items.length - 1;
+            return (
+              <AnimatedItem
+                key={index}
+                expanded={effectiveExpanded}
+                index={index}
+                itemCount={items.length}
+                theme={theme}
+                transformOrigin={itemTransformOrigin}
+                marginBottom={isLast ? 0 : MenuTokens.spacing.betweenItems}
+              >
+                <MenuItem
+                  icon={item.icon}
+                  label={item.label}
+                  variant={itemsVariant}
+                  theme={theme}
+                  aria-label={item['aria-label'] ?? item.label}
+                  onPress={handleItemPress(item)}
+                  testID={item.testID}
+                />
+              </AnimatedItem>
+            );
+          })}
+        </View>
+        <MorphingTrigger
+          triggerVariant={triggerVariant}
+          closeVariant={closeVariant}
+          triggerContainerColor={trigger.containerColor}
+          triggerContentColor={trigger.contentColor}
+          size={size}
+          openIcon={openIcon}
+          closeIcon={closeIcon}
+          expanded={effectiveExpanded}
+          visible={triggerVisible}
+          alignment={alignment}
+          onPress={effectiveExpanded ? onDismiss : openOnPress}
+          aria-label={trigger['aria-label']}
+          theme={theme}
+          testID={trigger.testID}
+        />
+      </View>
+    </View>
+  );
+};
+
+Menu.displayName = 'Menu';
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFill,
+    justifyContent: 'flex-end',
+    pointerEvents: 'box-none',
+  },
+  stack: {
+    flexDirection: 'column',
+    pointerEvents: 'box-none',
+  },
+  items: {
+    position: 'absolute',
+    flexDirection: 'column',
+    pointerEvents: 'box-none',
+  },
+  itemsStart: {
+    left: 0,
+  },
+  itemsCenter: {
+    left: 0,
+    right: 0,
+  },
+  itemsEnd: {
+    right: 0,
+  },
+  menuItemWrapper: {
+    position: 'relative',
+  },
+  menuItem: {
+    overflow: 'hidden',
+  },
+  menuItemFocusRing: {
+    position: 'absolute',
+    top: -FOCUS_RING_INSET,
+    left: -FOCUS_RING_INSET,
+    right: -FOCUS_RING_INSET,
+    bottom: -FOCUS_RING_INSET,
+    borderWidth: FOCUS_RING_THICKNESS,
+    pointerEvents: 'none',
+  },
+  triggerSlot: {
+    justifyContent: 'flex-start',
+  },
+  colorPlane: {
+    ...StyleSheet.absoluteFill,
+    pointerEvents: 'none',
+  },
+  iconOrigin: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    pointerEvents: 'none',
+  },
+  iconAbsolute: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    pointerEvents: 'none',
+  },
+  pointerEventsAuto: {
+    pointerEvents: 'auto',
+  },
+  pointerEventsNone: {
+    pointerEvents: 'none',
+  },
+  pointerEventsBoxNone: {
+    pointerEvents: 'box-none',
+  },
+});
+
+export default Menu;
+
+// @component-docs ignore-next-line
+export { Menu };
diff --git a/src/components/FAB/Shell.tsx b/src/components/FAB/Shell.tsx
new file mode 100644
index 0000000000..83a71f72ed
--- /dev/null
+++ b/src/components/FAB/Shell.tsx
@@ -0,0 +1,403 @@
+import * as React from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import type {
+  ColorValue,
+  GestureResponderEvent,
+  PressableAndroidRippleConfig,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+import type { AnimatedStyle } from 'react-native-reanimated';
+
+import Content from './Content';
+import {
+  Tokens,
+  FOCUS_RING_INSET,
+  FOCUS_RING_THICKNESS,
+  webNoOutline,
+} from './tokens';
+import type { Size, Variant } from './tokens';
+import { useFocusRing } from './useFocusRing';
+import { getDimensions, resolveColors } from './utils';
+import { useInternalTheme } from '../../core/theming';
+import { useReduceMotion } from '../../theme/accessibility/ReduceMotionContext';
+import { toRawSpring } from '../../theme/tokens/sys/motion';
+import type { Elevation, ThemeProp } from '../../theme/types';
+import type { ShapeToken } from '../../theme/utils/shape';
+import type { IconSource } from '../Icon';
+import Surface from '../Surface';
+import TouchableRipple from '../TouchableRipple/TouchableRipple';
+
+export type ShellProps = {
+  /**
+   * Icon rendered inside the FAB when no custom `children` are provided.
+   */
+  icon?: IconSource;
+  /**
+   * Label rendered next to the icon when no custom `children` are provided.
+   * When present, the FAB grows to fit.
+   */
+  label?: string;
+  /**
+   * Role-color preset. Defaults to `tonalPrimary`.
+   */
+  variant?: Variant;
+  /**
+   * Spec size. Defaults to `default`.
+   */
+  size?: Size;
+  /**
+   * Container color override. Wins over `variant`.
+   */
+  containerColor?: ColorValue;
+  /**
+   * Content color override. Wins over `variant`.
+   */
+  contentColor?: ColorValue;
+  /**
+   * Shape override. Defaults to the size-driven shape token.
+   */
+  shape?: ShapeToken;
+  /**
+   * Icon size override.
+   */
+  iconSize?: number;
+  /**
+   * Leading-padding override.
+   */
+  leading?: number;
+  /**
+   * Trailing-padding override.
+   */
+  trailing?: number;
+  /**
+   * Resting elevation level. Defaults to the FAB's enabled-state elevation.
+   * Pass `0` to disable the shadow entirely.
+   */
+  elevation?: Elevation;
+  /**
+   * When `false`, the shell animates out (scale + alpha) and stops accepting
+   * touches.
+   */
+  visible?: boolean;
+  /**
+   * Function to execute on press.
+   */
+  onPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Accessibility label. Falls back to `label` if unset.
+   */
+  'aria-label'?: string;
+  /**
+   * Indicates whether the element is checked. Accepts `true`, `false`,
+   * or `'mixed'` for an indeterminate state.
+   */
+  'aria-checked'?: boolean | 'mixed';
+  /**
+   * Indicates whether the element is selected.
+   */
+  'aria-selected'?: boolean;
+  /**
+   * Indicates whether the element is currently busy (e.g. loading).
+   */
+  'aria-busy'?: boolean;
+  /**
+   * Indicates whether the element's controlled content is expanded.
+   */
+  'aria-expanded'?: boolean;
+  /**
+   * Largest scale the label font can reach (auto-built content only).
+   */
+  labelMaxFontSizeMultiplier?: number;
+  /**
+   * Animated style merged onto the label wrapper. Used by the Extended FAB
+   * to fade the label in and out as the FAB expands and collapses.
+   */
+  labelAnimatedStyle?: StyleProp<AnimatedStyle<ViewStyle>>;
+  /**
+   * Type of background drawable to display the feedback (Android).
+   */
+  background?: PressableAndroidRippleConfig;
+  /**
+   * Shared value driving the outer's animated width. When omitted, the
+   * outer is sized by its content (icon FAB) or the size token
+   * (`dimensions.width`).
+   */
+  widthShared?: SharedValue<number>;
+  /**
+   * Shared value driving the outer's animated height. When omitted, the
+   * outer is sized by its content.
+   */
+  heightShared?: SharedValue<number>;
+  /**
+   * Shared value driving the outer's animated borderRadius. The same value
+   * is applied to the inner clip so children are clipped to the same shape.
+   * When omitted, the static size-driven radius is used.
+   */
+  borderRadiusShared?: SharedValue<number>;
+  /**
+   * When `true`, both outer and clip render with `backgroundColor: transparent`
+   * so the consumer can paint the surface via the `overlay` slot (used by the
+   * morph trigger's cross-faded color planes).
+   */
+  transparentBackground?: boolean;
+  /**
+   * Absolutely-positioned content rendered inside the shell, behind the icon
+   * and label row. Used by the morphing trigger to cross-fade color planes.
+   */
+  overlay?: React.ReactNode;
+  /**
+   * Replaces the default icon + label content. Pass your own `<Content />`
+   * when you need custom typescale, label animation, or measurement.
+   */
+  children?: React.ReactNode;
+  /**
+   * Outer-positioning style. Visual treatment (size, shape, color) comes from
+   * `variant` and `size`.
+   */
+  style?: StyleProp<AnimatedStyle<ViewStyle>>;
+  /**
+   * TestID used for testing purposes.
+   */
+  testID?: string;
+  /**
+   * @optional
+   */
+  theme?: ThemeProp;
+  ref?: React.Ref<View>;
+};
+
+/**
+ * Internal shell used by every FAB-flavored component (regular, Extended,
+ * morphing menu trigger). Owns the outer container, ripple, clip, and the
+ * visibility animation (scale + alpha). Consumers that need to
+ * animate the outer's width/height/borderRadius pass shared values; the
+ * static size-driven defaults are used otherwise.
+ *
+ * Not exported from the package.
+ */
+const Shell = ({
+  icon,
+  label,
+  variant = 'tonalPrimary',
+  size = 'default',
+  containerColor,
+  contentColor,
+  shape,
+  iconSize,
+  leading,
+  trailing,
+  elevation = Tokens.stateElevation.enabled,
+  visible = true,
+  onPress,
+  'aria-label': ariaLabel = label,
+  'aria-checked': ariaChecked,
+  'aria-selected': ariaSelected,
+  'aria-busy': ariaBusy,
+  'aria-expanded': ariaExpanded,
+  labelMaxFontSizeMultiplier,
+  labelAnimatedStyle,
+  background,
+  widthShared,
+  heightShared,
+  borderRadiusShared,
+  transparentBackground = false,
+  overlay,
+  children,
+  style,
+  testID,
+  theme: themeOverrides,
+  ref,
+}: ShellProps) => {
+  const theme = useInternalTheme(themeOverrides);
+
+  const dimensions = React.useMemo(
+    () => getDimensions({ theme, size, shape, iconSize, leading, trailing }),
+    [theme, size, shape, iconSize, leading, trailing]
+  );
+
+  const colors = React.useMemo(
+    () => resolveColors({ theme, variant, containerColor, contentColor }),
+    [theme, variant, containerColor, contentColor]
+  );
+
+  const reduceMotion = useReduceMotion();
+
+  const scale = useSharedValue(visible ? 1 : 0);
+  const alpha = useSharedValue(visible ? 1 : 0);
+
+  React.useEffect(() => {
+    const target = visible ? 1 : 0;
+
+    if (reduceMotion) {
+      scale.value = target;
+      alpha.value = target;
+      return;
+    }
+
+    scale.value = withSpring(
+      target,
+      toRawSpring(theme.motion.spring.fast.spatial)
+    );
+
+    alpha.value = withSpring(
+      target,
+      toRawSpring(theme.motion.spring.fast.effects)
+    );
+  }, [visible, theme, reduceMotion, scale, alpha]);
+
+  // Fallback shared values track the static size-driven dimensions. Consumers
+  // that don't supply their own animated shared values get these. Keeping
+  // everything as a shared value means there's exactly one animated style
+  // per view — no static-vs-animated merge surprises.
+  const fallbackWidth = useSharedValue(dimensions.width);
+  const fallbackHeight = useSharedValue(dimensions.height);
+  const fallbackBorderRadius = useSharedValue(dimensions.borderRadius);
+
+  React.useEffect(() => {
+    fallbackWidth.value = dimensions.width;
+    fallbackHeight.value = dimensions.height;
+    fallbackBorderRadius.value = dimensions.borderRadius;
+  }, [
+    dimensions.width,
+    dimensions.height,
+    dimensions.borderRadius,
+    fallbackWidth,
+    fallbackHeight,
+    fallbackBorderRadius,
+  ]);
+
+  const width = widthShared ?? fallbackWidth;
+  const height = heightShared ?? fallbackHeight;
+  const borderRadius = borderRadiusShared ?? fallbackBorderRadius;
+  const containerBg = transparentBackground ? 'transparent' : colors.container;
+
+  const outerStyle = useAnimatedStyle(
+    () => ({
+      transform: [{ scale: scale.value }],
+      opacity: alpha.value,
+      width: width.value,
+      height: height.value,
+    }),
+    [width, height]
+  );
+
+  const clipStyle = useAnimatedStyle(
+    () => ({
+      borderRadius: borderRadius.value,
+      backgroundColor: containerBg,
+    }),
+    [borderRadius, containerBg]
+  );
+
+  const { focusedSV, onFocus, onBlur } = useFocusRing();
+
+  const focusRingStyle = useAnimatedStyle(
+    () => ({
+      opacity: focusedSV.value ? 1 : 0,
+      borderRadius: borderRadius.value + FOCUS_RING_INSET,
+    }),
+    [borderRadius]
+  );
+
+  return (
+    <Surface
+      ref={ref}
+      backgroundColor={containerBg}
+      borderRadius={borderRadius}
+      style={[
+        style,
+        styles.container,
+        outerStyle,
+        visible ? styles.pointerEventsAuto : styles.pointerEventsNone,
+      ]}
+      elevation={elevation}
+      theme={theme}
+    >
+      <Animated.View style={[styles.clip, clipStyle]}>
+        {overlay}
+        <TouchableRipple
+          borderless
+          background={background}
+          onPress={onPress}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          aria-label={ariaLabel}
+          role="button"
+          aria-checked={ariaChecked}
+          aria-selected={ariaSelected}
+          aria-busy={ariaBusy}
+          aria-expanded={ariaExpanded}
+          testID={testID}
+          style={[
+            children ? styles.fill : null,
+            Platform.OS === 'web' ? webNoOutline : null,
+          ]}
+        >
+          {children ?? (
+            <Content
+              icon={icon}
+              label={label}
+              contentColor={colors.content}
+              height={dimensions.height}
+              iconSize={dimensions.iconSize}
+              leading={dimensions.leading}
+              trailing={dimensions.trailing}
+              iconLabelGap={dimensions.iconLabelGap}
+              labelTypescale={dimensions.labelTypescale}
+              labelMaxFontSizeMultiplier={labelMaxFontSizeMultiplier}
+              labelAnimatedStyle={labelAnimatedStyle}
+              labelNumberOfLines={labelAnimatedStyle ? 1 : undefined}
+              labelEllipsisMode={labelAnimatedStyle ? 'clip' : undefined}
+            />
+          )}
+        </TouchableRipple>
+      </Animated.View>
+      <Animated.View
+        style={[
+          styles.focusRing,
+          { borderColor: theme.colors.secondary },
+          focusRingStyle,
+        ]}
+      />
+    </Surface>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    transformOrigin: 'center',
+  },
+  clip: {
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+  },
+  fill: {
+    flex: 1,
+  },
+  pointerEventsAuto: {
+    pointerEvents: 'auto',
+  },
+  pointerEventsNone: {
+    pointerEvents: 'none',
+  },
+  focusRing: {
+    position: 'absolute',
+    top: -FOCUS_RING_INSET,
+    left: -FOCUS_RING_INSET,
+    right: -FOCUS_RING_INSET,
+    bottom: -FOCUS_RING_INSET,
+    borderWidth: FOCUS_RING_THICKNESS,
+    pointerEvents: 'none',
+  },
+});
+
+export default Shell;
diff --git a/src/components/FAB/index.ts b/src/components/FAB/index.ts
deleted file mode 100644
index 4364bc7411..0000000000
--- a/src/components/FAB/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import FABComponent from './FAB';
-import FABGroup from './FABGroup';
-
-const FAB = Object.assign(
-  // @component ./FAB.tsx
-  FABComponent,
-  {
-    // @component ./FABGroup.tsx
-    Group: FABGroup,
-  }
-);
-
-export default FAB;
diff --git a/src/components/FAB/index.tsx b/src/components/FAB/index.tsx
new file mode 100644
index 0000000000..3224fcf60f
--- /dev/null
+++ b/src/components/FAB/index.tsx
@@ -0,0 +1,7 @@
+import Extended from './Extended';
+import FABBase from './FAB';
+import Menu from './Menu';
+
+const FAB = Object.assign(FABBase, { Extended, Menu });
+
+export default FAB;
diff --git a/src/components/FAB/tokens.ts b/src/components/FAB/tokens.ts
new file mode 100644
index 0000000000..0fb79d1d9c
--- /dev/null
+++ b/src/components/FAB/tokens.ts
@@ -0,0 +1,129 @@
+import type { ViewStyle } from 'react-native';
+
+import { tokens } from '../../theme/tokens';
+import type {
+  ColorRole,
+  Elevation,
+  ThemeShapeCorners,
+  TypescaleKey,
+} from '../../theme/types';
+
+export type Variant =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'tonalPrimary'
+  | 'tonalSecondary'
+  | 'tonalTertiary';
+
+export type Size = 'default' | 'medium' | 'large';
+
+type SizeSpec = {
+  container: number;
+  icon: number;
+  shape: keyof ThemeShapeCorners;
+  leading: number;
+  trailing: number;
+  iconLabelGap: number;
+  labelTypescale: TypescaleKey;
+};
+
+const sizes = {
+  default: {
+    container: 56,
+    icon: 24,
+    shape: 'large',
+    leading: 16,
+    trailing: 16,
+    iconLabelGap: 8,
+    labelTypescale: 'titleMedium',
+  },
+  medium: {
+    container: 80,
+    icon: 28,
+    shape: 'largeIncreased',
+    leading: 26,
+    trailing: 26,
+    iconLabelGap: 12,
+    labelTypescale: 'titleLarge',
+  },
+  large: {
+    container: 96,
+    icon: 36,
+    shape: 'extraLarge',
+    // (container - icon) / 2 keeps the icon centered inside the visible
+    // square when the Extended FAB collapses to icon-only width.
+    leading: 30,
+    trailing: 30,
+    iconLabelGap: 16,
+    labelTypescale: 'headlineSmall',
+  },
+} as const satisfies Record<Size, SizeSpec>;
+
+const stateElevation = {
+  enabled: 3,
+  hover: 4,
+  focus: 3,
+  pressed: 3,
+} as const satisfies Record<string, Elevation>;
+
+const variants = {
+  primary: { container: 'primary', content: 'onPrimary' },
+  secondary: { container: 'secondary', content: 'onSecondary' },
+  tertiary: { container: 'tertiary', content: 'onTertiary' },
+  tonalPrimary: {
+    container: 'primaryContainer',
+    content: 'onPrimaryContainer',
+  },
+  tonalSecondary: {
+    container: 'secondaryContainer',
+    content: 'onSecondaryContainer',
+  },
+  tonalTertiary: {
+    container: 'tertiaryContainer',
+    content: 'onTertiaryContainer',
+  },
+} as const satisfies Record<
+  Variant,
+  { container: ColorRole; content: ColorRole }
+>;
+
+export const Tokens = {
+  sizes,
+  stateElevation,
+  variants,
+};
+
+const closeButton = {
+  container: 56,
+  iconSize: 20,
+  shape: 'full',
+} as const;
+
+const listItem = {
+  height: 56,
+  shape: 'full',
+  iconSize: 24,
+  leading: 24,
+  trailing: 24,
+  iconLabelGap: 8,
+} as const;
+
+const spacing = {
+  betweenItems: 4,
+  closeToLastItem: 8,
+} as const;
+
+export const MenuTokens = {
+  closeButton,
+  listItem,
+  spacing,
+};
+
+const focusIndicator = tokens.md.sys.state.focusIndicator;
+export const FOCUS_RING_THICKNESS = focusIndicator.thickness;
+export const FOCUS_RING_OUTER_OFFSET = focusIndicator.outerOffset;
+export const FOCUS_RING_INSET = FOCUS_RING_OUTER_OFFSET + FOCUS_RING_THICKNESS;
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+export const webNoOutline = { outline: 'none' } as unknown as ViewStyle;
diff --git a/src/components/FAB/useFocusRing.ts b/src/components/FAB/useFocusRing.ts
new file mode 100644
index 0000000000..bb056a10c8
--- /dev/null
+++ b/src/components/FAB/useFocusRing.ts
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { Platform } from 'react-native';
+
+import { useSharedValue, type SharedValue } from 'react-native-reanimated';
+
+export type FocusRingState = {
+  /**
+   * `true` when the surface is keyboard-focused. Drive the focus ring's
+   * `opacity` from this in a `useAnimatedStyle`.
+   */
+  focusedSV: SharedValue<boolean>;
+  /** Wire to the `Pressable`/`TouchableRipple`'s `onFocus`. */
+  onFocus: () => void;
+  /** Wire to the `Pressable`/`TouchableRipple`'s `onBlur`. */
+  onBlur: () => void;
+};
+
+/**
+ * Drives an MD3 focus indicator for FAB-flavored surfaces. On web, focus is
+ * gated by `:focus-visible` so a mouse click does not light the ring; on
+ * native, every focus event is honored.
+ */
+export function useFocusRing(): FocusRingState {
+  const focusedSV = useSharedValue(false);
+
+  const onFocus = React.useCallback(() => {
+    if (
+      Platform.OS === 'web' &&
+      !document.activeElement?.matches(':focus-visible')
+    ) {
+      return;
+    }
+    focusedSV.value = true;
+  }, [focusedSV]);
+
+  const onBlur = React.useCallback(() => {
+    focusedSV.value = false;
+  }, [focusedSV]);
+
+  return { focusedSV, onFocus, onBlur };
+}
diff --git a/src/components/FAB/utils.ts b/src/components/FAB/utils.ts
index e87d24019f..cd894f048d 100644
--- a/src/components/FAB/utils.ts
+++ b/src/components/FAB/utils.ts
@@ -1,474 +1,84 @@
-import { MutableRefObject } from 'react';
-import {
-  Animated,
-  ColorValue,
-  I18nManager,
-  Platform,
-  ViewStyle,
-} from 'react-native';
-
-import color from 'color';
-
-import { black, white } from '../../styles/themes/v2/colors';
-import type { InternalTheme } from '../../types';
-import getContrastingColor from '../../utils/getContrastingColor';
-
-type GetCombinedStylesProps = {
-  isAnimatedFromRight: boolean;
-  isIconStatic: boolean;
-  distance: number;
-  animFAB: Animated.Value;
-};
-
-type CombinedStyles = {
-  innerWrapper: Animated.WithAnimatedValue<ViewStyle>;
-  iconWrapper: Animated.WithAnimatedValue<ViewStyle>;
-  absoluteFill: Animated.WithAnimatedValue<ViewStyle>;
-};
-
-type Variant = 'primary' | 'secondary' | 'tertiary' | 'surface';
-
-type BaseProps = {
-  isVariant: (variant: Variant) => boolean;
-  theme: InternalTheme;
-  disabled?: boolean;
-};
-
-export const getCombinedStyles = ({
-  isAnimatedFromRight,
-  isIconStatic,
-  distance,
-  animFAB,
-}: GetCombinedStylesProps): CombinedStyles => {
-  const { isRTL } = I18nManager;
-
-  const defaultPositionStyles = { left: -distance, right: undefined };
-
-  const combinedStyles: CombinedStyles = {
-    innerWrapper: {
-      ...defaultPositionStyles,
-    },
-    iconWrapper: {
-      ...defaultPositionStyles,
-    },
-    absoluteFill: {},
-  };
-
-  const animatedFromRight = isAnimatedFromRight && !isRTL;
-  const animatedFromRightRTL = isAnimatedFromRight && isRTL;
-  const animatedFromLeft = !isAnimatedFromRight && !isRTL;
-  const animatedFromLeftRTL = !isAnimatedFromRight && isRTL;
-
-  if (animatedFromRight) {
-    combinedStyles.innerWrapper.transform = [
-      {
-        translateX: animFAB.interpolate({
-          inputRange: [distance, 0],
-          outputRange: [distance, 0],
-        }),
-      },
-    ];
-    combinedStyles.iconWrapper.transform = [
-      {
-        translateX: isIconStatic ? 0 : animFAB,
-      },
-    ];
-    combinedStyles.absoluteFill.transform = [
-      {
-        translateX: animFAB.interpolate({
-          inputRange: [distance, 0],
-          outputRange: [Math.abs(distance) / 2, Math.abs(distance)],
-        }),
-      },
-    ];
-  } else if (animatedFromRightRTL) {
-    combinedStyles.iconWrapper.transform = [
-      {
-        translateX: isIconStatic
-          ? 0
-          : animFAB.interpolate({
-              inputRange: [distance, 0],
-              outputRange: [-distance, 0],
-            }),
-      },
-    ];
-    combinedStyles.innerWrapper.transform = [
-      {
-        translateX: animFAB.interpolate({
-          inputRange: [distance, 0],
-          outputRange: [-distance, 0],
-        }),
-      },
-    ];
-    combinedStyles.absoluteFill.transform = [
-      {
-        translateX: animFAB.interpolate({
-          inputRange: [distance, 0],
-          outputRange: [0, distance],
-        }),
-      },
-    ];
-  } else if (animatedFromLeft) {
-    combinedStyles.iconWrapper.transform = [
-      {
-        translateX: isIconStatic
-          ? distance
-          : animFAB.interpolate({
-              inputRange: [0, distance],
-              outputRange: [distance, distance * 2],
-            }),
-      },
-    ];
-    combinedStyles.innerWrapper.transform = [
-      {
-        translateX: animFAB,
-      },
-    ];
-    combinedStyles.absoluteFill.transform = [
-      {
-        translateX: animFAB.interpolate({
-          inputRange: [0, distance],
-          outputRange: [0, Math.abs(distance) / 2],
-        }),
-      },
-    ];
-  } else if (animatedFromLeftRTL) {
-    combinedStyles.iconWrapper.transform = [
-      {
-        translateX: isIconStatic
-          ? animFAB.interpolate({
-              inputRange: [0, distance],
-              outputRange: [-distance, -distance * 2],
-            })
-          : -distance,
-      },
-    ];
-    combinedStyles.innerWrapper.transform = [
-      {
-        translateX: animFAB.interpolate({
-          inputRange: [0, distance],
-          outputRange: [0, -distance],
-        }),
-      },
-    ];
-    combinedStyles.absoluteFill.transform = [
-      {
-        translateX: animFAB.interpolate({
-          inputRange: [0, distance],
-          outputRange: [0, -distance],
-        }),
-      },
-    ];
-  }
-
-  return combinedStyles;
-};
-
-const getBackgroundColor = ({
+import type { ColorValue } from 'react-native';
+
+import { Tokens } from './tokens';
+import type { Size, Variant } from './tokens';
+import type { InternalTheme, TypescaleKey } from '../../theme/types';
+import { contentColorFor } from '../../theme/utils/color';
+import { resolveCornerRadius } from '../../theme/utils/shape';
+import type { ShapeToken } from '../../theme/utils/shape';
+
+export type ResolvedColors = {
+  container: ColorValue;
+  content: ColorValue;
+};
+
+/**
+ * Resolve container + content colors. Explicit overrides win; when only
+ * `containerColor` is set, the content color is derived via
+ * `contentColorFor`.
+ */
+export const resolveColors = ({
   theme,
-  isVariant,
-  disabled,
-  customBackgroundColor,
-}: BaseProps & { customBackgroundColor?: ColorValue }) => {
-  if (customBackgroundColor && !disabled) {
-    return customBackgroundColor;
-  }
-
-  if (theme.isV3) {
-    if (disabled) {
-      return theme.colors.surfaceDisabled;
-    }
-
-    if (isVariant('primary')) {
-      return theme.colors.primaryContainer;
-    }
-
-    if (isVariant('secondary')) {
-      return theme.colors.secondaryContainer;
-    }
-
-    if (isVariant('tertiary')) {
-      return theme.colors.tertiaryContainer;
-    }
-
-    if (isVariant('surface')) {
-      return theme.colors.elevation.level3;
-    }
-  }
-
-  if (disabled) {
-    if (theme.dark) {
-      return color(white).alpha(0.12).rgb().string();
-    }
-    return color(black).alpha(0.12).rgb().string();
-  }
-
-  //@ts-ignore
-  return theme.colors?.accent;
-};
-
-const getForegroundColor = ({
-  theme,
-  isVariant,
-  disabled,
-  backgroundColor,
-  customColor,
-}: BaseProps & { backgroundColor: string; customColor?: string }) => {
-  if (typeof customColor !== 'undefined' && !disabled) {
-    return customColor;
-  }
-
-  if (theme.isV3) {
-    if (disabled) {
-      return theme.colors.onSurfaceDisabled;
-    }
-
-    if (isVariant('primary')) {
-      return theme.colors.onPrimaryContainer;
-    }
-
-    if (isVariant('secondary')) {
-      return theme.colors.onSecondaryContainer;
-    }
-
-    if (isVariant('tertiary')) {
-      return theme.colors.onTertiaryContainer;
-    }
-
-    if (isVariant('surface')) {
-      return theme.colors.primary;
-    }
-  }
-
-  if (disabled) {
-    if (theme.dark) {
-      return color(white).alpha(0.32).rgb().string();
-    }
-    return color(black).alpha(0.32).rgb().string();
-  }
-
-  if (backgroundColor) {
-    return getContrastingColor(
-      backgroundColor || white,
-      white,
-      'rgba(0, 0, 0, .54)'
-    );
-  }
-
-  return getContrastingColor(white, white, 'rgba(0, 0, 0, .54)');
-};
-
-export const getFABColors = ({
-  theme,
-  variant,
-  disabled,
-  customColor,
-  customBackgroundColor,
-  customRippleColor,
+  variant = 'tonalPrimary',
+  containerColor,
+  contentColor,
 }: {
   theme: InternalTheme;
-  variant: string;
-  disabled?: boolean;
-  customColor?: string;
-  customBackgroundColor?: ColorValue;
-  customRippleColor?: ColorValue;
-}) => {
-  const isVariant = (variantToCompare: Variant) => {
-    return variant === variantToCompare;
-  };
-
-  const baseFABColorProps = { theme, isVariant, disabled };
-
-  const backgroundColor = getBackgroundColor({
-    ...baseFABColorProps,
-    customBackgroundColor,
-  });
-
-  const foregroundColor = getForegroundColor({
-    ...baseFABColorProps,
-    customColor,
-    backgroundColor,
-  });
-
-  return {
-    backgroundColor,
-    foregroundColor,
-    rippleColor:
-      customRippleColor || color(foregroundColor).alpha(0.12).rgb().string(),
-  };
-};
-
-const getLabelColor = ({ theme }: { theme: InternalTheme }) => {
-  if (theme.isV3) {
-    return theme.colors.onSurface;
-  }
-
-  if (theme.dark) {
-    return theme.colors.text;
-  }
-
-  return color(theme.colors.text).fade(0.54).rgb().string();
-};
-
-const getBackdropColor = ({
-  theme,
-  customBackdropColor,
-}: {
-  theme: InternalTheme;
-  customBackdropColor?: string;
-}) => {
-  if (customBackdropColor) {
-    return customBackdropColor;
-  }
-  if (theme.isV3) {
-    return color(theme.colors.background).alpha(0.95).rgb().string();
-  }
-  return theme.colors?.backdrop;
-};
-
-const getStackedFABBackgroundColor = ({ theme }: { theme: InternalTheme }) => {
-  if (theme.isV3) {
-    return theme.colors.elevation.level3;
-  }
-  return theme.colors.surface;
-};
-
-export const getFABGroupColors = ({
-  theme,
-  customBackdropColor,
-}: {
-  theme: InternalTheme;
-  customBackdropColor?: string;
-}) => {
-  return {
-    labelColor: getLabelColor({ theme }),
-    backdropColor: getBackdropColor({ theme, customBackdropColor }),
-    stackedFABBackgroundColor: getStackedFABBackgroundColor({ theme }),
-  };
-};
-
-const standardSize = {
-  height: 56,
-  width: 56,
-  borderRadius: 28,
-};
-const smallSize = {
-  height: 40,
-  width: 40,
-  borderRadius: 28,
-};
-const v3SmallSize = {
-  height: 40,
-  width: 40,
-};
-const v3MediumSize = {
-  height: 56,
-  width: 56,
-};
-const v3LargeSize = {
-  height: 96,
-  width: 96,
-};
-
-const getCustomFabSize = (customSize: number, roundness: number) => ({
-  height: customSize,
-  width: customSize,
-  borderRadius: roundness === 0 ? 0 : customSize / roundness,
-});
-
-export const getFabStyle = ({
-  size,
-  theme,
-  customSize,
-}: {
-  customSize?: number;
-  size: 'small' | 'medium' | 'large';
-  theme: InternalTheme;
-}) => {
-  const { isV3, roundness } = theme;
-
-  if (customSize) return getCustomFabSize(customSize, roundness);
-
-  if (isV3) {
-    switch (size) {
-      case 'small':
-        return { ...v3SmallSize, borderRadius: 3 * roundness };
-      case 'medium':
-        return { ...v3MediumSize, borderRadius: 4 * roundness };
-      case 'large':
-        return { ...v3LargeSize, borderRadius: 7 * roundness };
-    }
-  }
-
-  if (size === 'small') {
-    return smallSize;
-  }
-  return standardSize;
-};
-
-const extended = {
-  height: 48,
-  paddingHorizontal: 16,
-};
-
-const v3Extended = {
-  height: 56,
-  borderRadius: 16,
-  paddingHorizontal: 16,
-};
-
-const getExtendedFabDimensions = (customSize: number) => ({
-  height: customSize,
-  paddingHorizontal: 16,
-});
-
-export const getExtendedFabStyle = ({
-  customSize,
+  variant?: Variant;
+  containerColor?: ColorValue;
+  contentColor?: ColorValue;
+}): ResolvedColors => {
+  const roles = Tokens.variants[variant];
+  const container = containerColor ?? theme.colors[roles.container];
+  const content =
+    contentColor ??
+    (containerColor != null
+      ? contentColorFor(theme, container)
+      : theme.colors[roles.content]);
+  return { container, content };
+};
+
+export type Dimensions = {
+  height: number;
+  width: number;
+  borderRadius: number;
+  iconSize: number;
+  leading: number;
+  trailing: number;
+  iconLabelGap: number;
+  labelTypescale: TypescaleKey;
+};
+
+/**
+ * Resolve geometry for a FAB at a given size, with optional shape, icon
+ * size, and leading/trailing overrides for FAB Menu items and the close
+ * button.
+ */
+export const getDimensions = ({
   theme,
+  size = 'default',
+  shape,
+  iconSize,
+  leading,
+  trailing,
 }: {
-  customSize?: number;
   theme: InternalTheme;
-}) => {
-  if (customSize) return getExtendedFabDimensions(customSize);
-
-  const { isV3 } = theme;
-
-  return isV3 ? v3Extended : extended;
-};
-
-let cachedContext: CanvasRenderingContext2D | null = null;
-
-const getCanvasContext = () => {
-  if (cachedContext) {
-    return cachedContext;
-  }
-
-  const canvas = document.createElement('canvas');
-  cachedContext = canvas.getContext('2d');
-
-  return cachedContext;
-};
-
-export const getLabelSizeWeb = (ref: MutableRefObject<HTMLElement | null>) => {
-  if (Platform.OS !== 'web' || ref.current === null) {
-    return null;
-  }
-
-  const canvasContext = getCanvasContext();
-
-  if (!canvasContext) {
-    return null;
-  }
-
-  const elementStyles = window.getComputedStyle(ref.current);
-  canvasContext.font = elementStyles.font;
-
-  const metrics = canvasContext.measureText(ref.current.innerText);
-
+  size?: Size;
+  shape?: ShapeToken;
+  iconSize?: number;
+  leading?: number;
+  trailing?: number;
+}): Dimensions => {
+  const spec = Tokens.sizes[size];
+  const shapeToken: ShapeToken = shape ?? spec.shape;
   return {
-    width: metrics.width,
-    height:
-      (metrics.fontBoundingBoxAscent ?? 0) +
-      (metrics.fontBoundingBoxDescent ?? 0),
+    height: spec.container,
+    width: spec.container,
+    borderRadius: resolveCornerRadius(theme, shapeToken),
+    iconSize: iconSize ?? spec.icon,
+    leading: leading ?? spec.leading,
+    trailing: trailing ?? spec.trailing,
+    iconLabelGap: spec.iconLabelGap,
+    labelTypescale: spec.labelTypescale,
   };
 };
diff --git a/src/components/HelperText/HelperText.tsx b/src/components/HelperText/HelperText.tsx
deleted file mode 100644
index 8043968cff..0000000000
--- a/src/components/HelperText/HelperText.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import * as React from 'react';
-import {
-  Animated,
-  LayoutChangeEvent,
-  StyleProp,
-  StyleSheet,
-  TextStyle,
-} from 'react-native';
-
-import { getTextColor } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import type { $Omit, ThemeProp } from '../../types';
-import AnimatedText from '../Typography/AnimatedText';
-
-export type Props = $Omit<
-  $Omit<React.ComponentPropsWithRef<typeof AnimatedText>, 'padding'>,
-  'type'
-> & {
-  /**
-   * Type of the helper text.
-   */
-  type: 'error' | 'info';
-  /**
-   * Text content of the HelperText.
-   */
-  children: React.ReactNode;
-  /**
-   * Whether to display the helper text.
-   */
-  visible?: boolean;
-  /**
-   * Whether to apply padding to the helper text.
-   */
-  padding?: 'none' | 'normal';
-  /**
-   * Whether the text input tied with helper text is disabled.
-   */
-  disabled?: boolean;
-  style?: StyleProp<TextStyle>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  /**
-   * TestID used for testing purposes
-   */
-  testID?: string;
-};
-
-/**
- * Helper text is used in conjuction with input elements to provide additional hints for the user.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { View } from 'react-native';
- * import { HelperText, TextInput } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [text, setText] = React.useState('');
- *
- *    const onChangeText = text => setText(text);
- *
- *   const hasErrors = () => {
- *     return !text.includes('@');
- *   };
- *
- *  return (
- *     <View>
- *       <TextInput label="Email" value={text} onChangeText={onChangeText} />
- *       <HelperText type="error" visible={hasErrors()}>
- *         Email address is invalid!
- *       </HelperText>
- *     </View>
- *   );
- * };
- *
- * export default MyComponent;
- * ```
- */
-const HelperText = ({
-  style,
-  type = 'info',
-  visible = true,
-  theme: themeOverrides,
-  onLayout,
-  padding = 'normal',
-  disabled,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { current: shown } = React.useRef<Animated.Value>(
-    new Animated.Value(visible ? 1 : 0)
-  );
-
-  let { current: textHeight } = React.useRef<number>(0);
-
-  const { scale } = theme.animation;
-
-  const { maxFontSizeMultiplier = 1.5 } = rest;
-
-  React.useEffect(() => {
-    if (visible) {
-      // show text
-      Animated.timing(shown, {
-        toValue: 1,
-        duration: 150 * scale,
-        useNativeDriver: true,
-      }).start();
-    } else {
-      // hide text
-      Animated.timing(shown, {
-        toValue: 0,
-        duration: 180 * scale,
-        useNativeDriver: true,
-      }).start();
-    }
-  }, [visible, scale, shown]);
-
-  const handleTextLayout = (e: LayoutChangeEvent) => {
-    onLayout?.(e);
-    textHeight = e.nativeEvent.layout.height;
-  };
-
-  const textColor = getTextColor({ theme, disabled, type });
-
-  return (
-    <AnimatedText
-      onLayout={handleTextLayout}
-      style={[
-        styles.text,
-        padding !== 'none' ? styles.padding : {},
-        {
-          color: textColor,
-          opacity: shown,
-          transform:
-            visible && type === 'error'
-              ? [
-                  {
-                    translateY: shown.interpolate({
-                      inputRange: [0, 1],
-                      outputRange: [-textHeight / 2, 0],
-                    }),
-                  },
-                ]
-              : [],
-        },
-        style,
-      ]}
-      maxFontSizeMultiplier={maxFontSizeMultiplier}
-      {...rest}
-    >
-      {rest.children}
-    </AnimatedText>
-  );
-};
-
-const styles = StyleSheet.create({
-  text: {
-    fontSize: 12,
-    paddingVertical: 4,
-  },
-  padding: {
-    paddingHorizontal: 12,
-  },
-});
-
-export default HelperText;
diff --git a/src/components/HelperText/utils.ts b/src/components/HelperText/utils.ts
deleted file mode 100644
index 4134175416..0000000000
--- a/src/components/HelperText/utils.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import color from 'color';
-
-import type { InternalTheme } from '../../types';
-
-type BaseProps = {
-  theme: InternalTheme;
-  disabled?: boolean;
-  type?: 'error' | 'info';
-};
-
-export function getTextColor({ theme, disabled, type }: BaseProps) {
-  const { colors, dark } = theme;
-
-  if (type === 'error') {
-    return colors?.error;
-  }
-
-  if (theme.isV3) {
-    if (disabled) {
-      return theme.colors.onSurfaceDisabled;
-    } else {
-      return theme.colors.onSurfaceVariant;
-    }
-  }
-
-  return color(theme?.colors?.text)
-    .alpha(dark ? 0.7 : 0.54)
-    .rgb()
-    .string();
-}
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index b3d26c699d..5714951fcb 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -1,22 +1,20 @@
 import * as React from 'react';
-import {
-  I18nManager,
-  Image,
-  ImageSourcePropType,
-  Platform,
-} from 'react-native';
+import { Image, Platform } from 'react-native';
+import type { ColorValue } from 'react-native';
+import type { ImageSourcePropType } from 'react-native';
 
 import { accessibilityProps } from './MaterialCommunityIcon';
+import { useLocale } from '../core/locale';
 import { Consumer as SettingsConsumer } from '../core/settings';
 import { useInternalTheme } from '../core/theming';
-import type { ThemeProp } from '../types';
+import type { ThemeProp } from '../theme/types';
 
 type IconSourceBase = string | ImageSourcePropType;
 
 export type IconSource =
   | IconSourceBase
   | Readonly<{ source: IconSourceBase; direction: 'rtl' | 'ltr' | 'auto' }>
-  | ((props: IconProps & { color: string }) => React.ReactNode);
+  | ((props: IconProps & { color: ColorValue }) => React.ReactNode);
 
 type IconProps = {
   /**
@@ -69,7 +67,7 @@ export type Props = IconProps & {
   /**
    * Color of the icon.
    */
-  color?: string;
+  color?: ColorValue;
   /**
    * TestID used for testing purposes
    */
@@ -86,12 +84,12 @@ export type Props = IconProps & {
  * ## Usage
  * ```js
  * import * as React from 'react';
- * import { Icon, MD3Colors } from 'react-native-paper';
+ * import { Icon, Palette } from 'react-native-paper';
  *
  * const MyComponent = () => (
  *   <Icon
  *     source="camera"
- *     color={MD3Colors.error50}
+ *     color={Palette.error50}
  *     size={20}
  *   />
  * );
@@ -109,12 +107,11 @@ const Icon = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
+  const { direction: layoutDirection } = useLocale();
   const direction =
     typeof source === 'object' && source.direction && source.source
       ? source.direction === 'auto'
-        ? I18nManager.getConstants().isRTL
-          ? 'rtl'
-          : 'ltr'
+        ? layoutDirection
         : source.direction
       : null;
 
@@ -122,8 +119,7 @@ const Icon = ({
     typeof source === 'object' && source.direction && source.source
       ? source.source
       : source;
-  const iconColor =
-    color || (theme.isV3 ? theme.colors.onSurface : theme.colors.text);
+  const iconColor = color || theme.colors.onSurface;
 
   if (isImageSource(s)) {
     return (
@@ -131,6 +127,7 @@ const Icon = ({
         {...rest}
         testID={testID}
         source={s}
+        resizeMode="contain"
         style={[
           {
             transform: [{ scaleX: direction === 'rtl' ? -1 : 1 }],
@@ -139,7 +136,6 @@ const Icon = ({
             width: size,
             height: size,
             tintColor: color,
-            resizeMode: `contain`,
           },
         ]}
         {...accessibilityProps}
diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
index 47a87901ca..1d673a3d27 100644
--- a/src/components/IconButton/IconButton.tsx
+++ b/src/components/IconButton/IconButton.tsx
@@ -1,29 +1,32 @@
 import * as React from 'react';
-import {
+import { StyleSheet, View } from 'react-native';
+import type {
+  ColorValue,
   GestureResponderEvent,
   StyleProp,
-  StyleSheet,
   ViewStyle,
-  View,
-  Animated,
-  ColorValue,
 } from 'react-native';
 
+import Animated, { type AnimatedStyle } from 'react-native-reanimated';
+
 import { getIconButtonColor } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import type { $RemoveChildren, ThemeProp } from '../../types';
-import { forwardRef } from '../../utils/forwardRef';
+import type { ThemeProp } from '../../theme/types';
 import ActivityIndicator from '../ActivityIndicator';
 import CrossFadeIcon from '../CrossFadeIcon';
-import Icon, { IconSource } from '../Icon';
-import Surface from '../Surface';
+import Icon from '../Icon';
+import type { IconSource } from '../Icon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 
 const PADDING = 8;
 
 type IconButtonMode = 'outlined' | 'contained' | 'contained-tonal';
 
-export type Props = Omit<$RemoveChildren<typeof TouchableRipple>, 'style'> & {
+export type Props = Omit<
+  React.PropsWithoutRef<TouchableRippleProps>,
+  'children' | 'style'
+> & {
   /**
    * Icon to display.
    */
@@ -37,17 +40,12 @@ export type Props = Omit<$RemoveChildren<typeof TouchableRipple>, 'style'> & {
    * @renamed Renamed from 'color' to 'iconColor' in v5.x
    * Color of the icon.
    */
-  iconColor?: string;
+  iconColor?: ColorValue;
   /**
    * Background color of the icon container.
    */
-  containerColor?: string;
+  containerColor?: ColorValue;
   /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
-  /**
-   * @supported Available in v5.x with theme version 3
    * Whether icon button is selected. A selected button receives alternative combination of icon and container colors.
    */
   selected?: boolean;
@@ -66,7 +64,7 @@ export type Props = Omit<$RemoveChildren<typeof TouchableRipple>, 'style'> & {
   /**
    * Accessibility label for the button. This is read by the screen reader when the user taps the button.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * Style of button's inner content.
    * Use this prop to apply custom height and width or to set a custom padding`.
@@ -76,8 +74,8 @@ export type Props = Omit<$RemoveChildren<typeof TouchableRipple>, 'style'> & {
    * Function to execute on press.
    */
   onPress?: (e: GestureResponderEvent) => void;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-  ref?: React.RefObject<View>;
+  style?: StyleProp<AnimatedStyle<ViewStyle>>;
+  ref?: React.Ref<View>;
   /**
    * TestID used for testing purposes
    */
@@ -98,12 +96,12 @@ export type Props = Omit<$RemoveChildren<typeof TouchableRipple>, 'style'> & {
  * ## Usage
  * ```js
  * import * as React from 'react';
- * import { IconButton, MD3Colors } from 'react-native-paper';
+ * import { IconButton, Palette } from 'react-native-paper';
  *
  * const MyComponent = () => (
  *   <IconButton
  *     icon="camera"
- *     iconColor={MD3Colors.error50}
+ *     iconColor={Palette.error50}
  *     size={20}
  *     onPress={() => console.log('Pressed')}
  *   />
@@ -114,122 +112,114 @@ export type Props = Omit<$RemoveChildren<typeof TouchableRipple>, 'style'> & {
  *
  * @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
  */
-const IconButton = forwardRef<View, Props>(
-  (
-    {
-      icon,
-      iconColor: customIconColor,
-      containerColor: customContainerColor,
-      rippleColor: customRippleColor,
-      size = 24,
-      accessibilityLabel,
-      disabled,
-      onPress,
-      selected = false,
-      animated = false,
-      mode,
-      style,
-      theme: themeOverrides,
-      testID = 'icon-button',
-      loading = false,
-      contentStyle,
-      ...rest
-    }: Props,
-    ref
-  ) => {
-    const theme = useInternalTheme(themeOverrides);
-    const { isV3 } = theme;
+const IconButton = ({
+  icon,
+  iconColor: customIconColor,
+  containerColor: customContainerColor,
+  size = 24,
+  'aria-label': ariaLabel,
+  disabled,
+  onPress,
+  selected = false,
+  animated = false,
+  mode,
+  style,
+  theme: themeOverrides,
+  testID,
+  loading = false,
+  contentStyle,
+  ref,
+  ...rest
+}: Props) => {
+  const theme = useInternalTheme(themeOverrides);
 
-    const IconComponent = animated ? CrossFadeIcon : Icon;
+  const IconComponent = animated ? CrossFadeIcon : Icon;
 
-    const { iconColor, rippleColor, backgroundColor, borderColor } =
-      getIconButtonColor({
-        theme,
-        disabled,
-        selected,
-        mode,
-        customIconColor,
-        customContainerColor,
-        customRippleColor,
-      });
+  const {
+    iconColor,
+    iconOpacity,
+    backgroundColor,
+    borderColor,
+    backgroundOpacity,
+  } = getIconButtonColor({
+    theme,
+    disabled,
+    selected,
+    mode,
+    customIconColor,
+    customContainerColor,
+  });
 
-    const buttonSize = isV3 ? size + 2 * PADDING : size * 1.5;
+  const buttonSize = size + 2 * PADDING;
 
-    const {
-      borderWidth = isV3 && mode === 'outlined' && !selected ? 1 : 0,
-      borderRadius = buttonSize / 2,
-    } = (StyleSheet.flatten(style) || {}) as ViewStyle;
+  const borderStyles = {
+    borderWidth: mode === 'outlined' && !selected ? 1 : 0,
+    borderRadius: buttonSize / 2,
+    borderColor,
+  };
 
-    const borderStyles = {
-      borderWidth,
-      borderRadius,
-      borderColor,
-    };
-
-    return (
-      <Surface
-        ref={ref}
-        testID={`${testID}-container`}
-        style={[
-          {
-            backgroundColor,
-            width: buttonSize,
-            height: buttonSize,
-          },
-          styles.container,
-          borderStyles,
-          !isV3 && disabled && styles.disabled,
-          style,
-        ]}
-        container
-        {...(isV3 && { elevation: 0 })}
+  return (
+    <Animated.View
+      ref={ref}
+      style={[
+        styles.container,
+        {
+          backgroundColor: backgroundOpacity < 1 ? undefined : backgroundColor,
+          width: buttonSize,
+          height: buttonSize,
+        },
+        borderStyles,
+        style,
+      ]}
+    >
+      {backgroundOpacity < 1 && (
+        <View
+          pointerEvents="none"
+          style={[
+            StyleSheet.absoluteFill,
+            { backgroundColor, opacity: backgroundOpacity },
+          ]}
+        />
+      )}
+      <TouchableRipple
+        borderless
+        centered
+        onPress={onPress}
+        aria-label={ariaLabel}
+        style={[styles.touchable, contentStyle]}
+        role="button"
+        aria-disabled={disabled}
+        disabled={disabled}
+        hitSlop={
+          TouchableRipple.supported
+            ? { top: 10, left: 10, bottom: 10, right: 10 }
+            : { top: 6, left: 6, bottom: 6, right: 6 }
+        }
+        testID={testID}
+        {...rest}
       >
-        <TouchableRipple
-          borderless
-          centered
-          onPress={onPress}
-          rippleColor={rippleColor}
-          accessibilityLabel={accessibilityLabel}
-          style={[styles.touchable, contentStyle]}
-          // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
-          accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
-          accessibilityComponentType="button"
-          accessibilityRole="button"
-          accessibilityState={{ disabled }}
-          disabled={disabled}
-          hitSlop={
-            TouchableRipple.supported
-              ? { top: 10, left: 10, bottom: 10, right: 10 }
-              : { top: 6, left: 6, bottom: 6, right: 6 }
-          }
-          testID={testID}
-          {...rest}
-        >
+        <View style={{ opacity: iconOpacity }}>
           {loading ? (
             <ActivityIndicator size={size} color={iconColor} />
           ) : (
             <IconComponent color={iconColor} source={icon} size={size} />
           )}
-        </TouchableRipple>
-      </Surface>
-    );
-  }
-);
+        </View>
+      </TouchableRipple>
+    </Animated.View>
+  );
+};
 
 const styles = StyleSheet.create({
   container: {
-    overflow: 'hidden',
     margin: 6,
-    elevation: 0,
+    overflow: 'hidden',
   },
   touchable: {
     flexGrow: 1,
     justifyContent: 'center',
     alignItems: 'center',
   },
-  disabled: {
-    opacity: 0.32,
-  },
 });
 
 export default IconButton;
diff --git a/src/components/IconButton/utils.ts b/src/components/IconButton/utils.ts
index e5e9d86145..3b43fa2a4a 100644
--- a/src/components/IconButton/utils.ts
+++ b/src/components/IconButton/utils.ts
@@ -1,8 +1,9 @@
 import type { ColorValue } from 'react-native';
 
-import color from 'color';
+import { tokens } from '../../theme/tokens';
+import type { InternalTheme } from '../../theme/types';
 
-import type { InternalTheme } from '../../types';
+const stateOpacity = tokens.md.sys.state.opacity;
 
 type IconButtonMode = 'outlined' | 'contained' | 'contained-tonal';
 
@@ -13,65 +14,41 @@ type BaseProps = {
   selected?: boolean;
 };
 
-const getBorderColor = ({
-  theme,
-  disabled,
-}: {
-  theme: InternalTheme;
-  disabled?: boolean;
-}) => {
-  if (theme.isV3) {
-    if (disabled) {
-      return theme.colors.surfaceDisabled;
-    }
-
-    return theme.colors.outline;
-  }
-
-  return undefined;
-};
-
 const getBackgroundColor = ({
   theme,
   isMode,
   disabled,
   selected,
   customContainerColor,
-}: BaseProps & { customContainerColor?: string }) => {
-  if (theme.isV3) {
-    if (disabled) {
-      if (isMode('contained') || isMode('contained-tonal')) {
-        return theme.colors.surfaceDisabled;
-      }
-    }
-
-    if (typeof customContainerColor !== 'undefined') {
-      return customContainerColor;
+}: BaseProps & { customContainerColor?: ColorValue }) => {
+  if (disabled) {
+    if (isMode('contained') || isMode('contained-tonal')) {
+      return theme.colors.onSurface;
     }
+  }
 
-    if (isMode('contained')) {
-      if (selected) {
-        return theme.colors.primary;
-      }
-      return theme.colors.surfaceVariant;
-    }
+  if (typeof customContainerColor !== 'undefined') {
+    return customContainerColor;
+  }
 
-    if (isMode('contained-tonal')) {
-      if (selected) {
-        return theme.colors.secondaryContainer;
-      }
-      return theme.colors.surfaceVariant;
+  if (isMode('contained')) {
+    if (selected) {
+      return theme.colors.primary;
     }
+    return theme.colors.surfaceVariant;
+  }
 
-    if (isMode('outlined')) {
-      if (selected) {
-        return theme.colors.inverseSurface;
-      }
+  if (isMode('contained-tonal')) {
+    if (selected) {
+      return theme.colors.secondaryContainer;
     }
+    return theme.colors.surfaceVariant;
   }
 
-  if (typeof customContainerColor !== 'undefined') {
-    return customContainerColor;
+  if (isMode('outlined')) {
+    if (selected) {
+      return theme.colors.inverseSurface;
+    }
   }
 
   return undefined;
@@ -83,66 +60,40 @@ const getIconColor = ({
   disabled,
   selected,
   customIconColor,
-}: BaseProps & { customIconColor?: string }) => {
-  if (theme.isV3) {
-    if (disabled) {
-      return theme.colors.onSurfaceDisabled;
-    }
-
-    if (typeof customIconColor !== 'undefined') {
-      return customIconColor;
-    }
-
-    if (isMode('contained')) {
-      if (selected) {
-        return theme.colors.onPrimary;
-      }
-      return theme.colors.primary;
-    }
+}: BaseProps & { customIconColor?: ColorValue }) => {
+  if (disabled) {
+    return theme.colors.onSurface;
+  }
 
-    if (isMode('contained-tonal')) {
-      if (selected) {
-        return theme.colors.onSecondaryContainer;
-      }
-      return theme.colors.onSurfaceVariant;
-    }
+  if (typeof customIconColor !== 'undefined') {
+    return customIconColor;
+  }
 
-    if (isMode('outlined')) {
-      if (selected) {
-        return theme.colors.inverseOnSurface;
-      }
-      return theme.colors.onSurfaceVariant;
+  if (isMode('contained')) {
+    if (selected) {
+      return theme.colors.onPrimary;
     }
+    return theme.colors.primary;
+  }
 
+  if (isMode('contained-tonal')) {
     if (selected) {
-      return theme.colors.primary;
+      return theme.colors.onSecondaryContainer;
     }
     return theme.colors.onSurfaceVariant;
   }
 
-  if (typeof customIconColor !== 'undefined') {
-    return customIconColor;
+  if (isMode('outlined')) {
+    if (selected) {
+      return theme.colors.inverseOnSurface;
+    }
+    return theme.colors.onSurfaceVariant;
   }
 
-  return theme.colors.text;
-};
-
-const getRippleColor = ({
-  theme,
-  iconColor,
-  customRippleColor,
-}: {
-  theme: InternalTheme;
-  iconColor: string;
-  customRippleColor?: ColorValue;
-}) => {
-  if (customRippleColor) {
-    return customRippleColor;
-  }
-  if (theme.isV3) {
-    return color(iconColor).alpha(0.12).rgb().string();
+  if (selected) {
+    return theme.colors.primary;
   }
-  return color(iconColor).alpha(0.32).rgb().string();
+  return theme.colors.onSurfaceVariant;
 };
 
 export const getIconButtonColor = ({
@@ -152,15 +103,13 @@ export const getIconButtonColor = ({
   selected,
   customIconColor,
   customContainerColor,
-  customRippleColor,
 }: {
   theme: InternalTheme;
   disabled?: boolean;
   selected?: boolean;
   mode?: IconButtonMode;
-  customIconColor?: string;
-  customContainerColor?: string;
-  customRippleColor?: ColorValue;
+  customIconColor?: ColorValue;
+  customContainerColor?: ColorValue;
 }) => {
   const isMode = (modeToCompare: IconButtonMode) => {
     return mode === modeToCompare;
@@ -178,13 +127,23 @@ export const getIconButtonColor = ({
     customIconColor,
   });
 
+  const iconOpacity = disabled ? stateOpacity.disabled : stateOpacity.enabled;
+
+  const backgroundColor = getBackgroundColor({
+    ...baseIconColorProps,
+    customContainerColor,
+  });
+
+  const backgroundOpacity =
+    disabled && (isMode('contained') || isMode('contained-tonal'))
+      ? stateOpacity.disabled
+      : stateOpacity.enabled;
+
   return {
     iconColor,
-    backgroundColor: getBackgroundColor({
-      ...baseIconColorProps,
-      customContainerColor,
-    }),
-    rippleColor: getRippleColor({ theme, iconColor, customRippleColor }),
-    borderColor: getBorderColor({ theme, disabled }),
+    iconOpacity,
+    backgroundColor,
+    borderColor: theme.colors.outlineVariant,
+    backgroundOpacity,
   };
 };
diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx
index 75505c7367..ff26a075a4 100644
--- a/src/components/List/ListAccordion.tsx
+++ b/src/components/List/ListAccordion.tsx
@@ -1,28 +1,27 @@
 import * as React from 'react';
-import {
+import { StyleSheet, View } from 'react-native';
+import type {
   ColorValue,
   GestureResponderEvent,
-  I18nManager,
   NativeSyntheticEvent,
+  PressableAndroidRippleConfig,
   StyleProp,
-  StyleSheet,
-  TextStyle,
   TextLayoutEventData,
-  View,
+  TextStyle,
   ViewProps,
   ViewStyle,
-  PressableAndroidRippleConfig,
 } from 'react-native';
 
+import { ListAccordionContext } from './ListAccordionContext';
 import { ListAccordionGroupContext } from './ListAccordionGroup';
-import type { ListChildProps, Style } from './utils';
+import type { Style } from './utils';
 import { getAccordionColors, getLeftStyles } from './utils';
+import { useLocale } from '../../core/locale';
 import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
+import type { ThemeProp } from '../../theme/types';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
-import TouchableRipple, {
-  Props as TouchableRippleProps,
-} from '../TouchableRipple/TouchableRipple';
+import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
 export type Props = {
@@ -37,7 +36,7 @@ export type Props = {
   /**
    * Callback which returns a React element to display on the left side.
    */
-  left?: (props: { color: string; style: Style }) => React.ReactNode;
+  left?: (props: { color: ColorValue; style: Style }) => React.ReactNode;
   /**
    * Callback which returns a React element to display on the right side.
    */
@@ -69,7 +68,7 @@ export type Props = {
    */
   theme?: ThemeProp;
   /**
-   * Type of background drawabale to display the feedback (Android).
+   * Type of background drawable to display the feedback (Android).
    * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: PressableAndroidRippleConfig;
@@ -93,10 +92,6 @@ export type Props = {
    * Style that is passed to Description element.
    */
   descriptionStyle?: StyleProp<TextStyle>;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
   /**
    * Truncate Title text such that the total number of lines does not
    * exceed this number.
@@ -126,7 +121,7 @@ export type Props = {
   /**
    * Accessibility label for the TouchableRipple. This is read by the screen reader when the user taps the touchable.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * `pointerEvents` passed to the `View` container
    */
@@ -186,7 +181,6 @@ const ListAccordion = ({
   descriptionStyle,
   titleNumberOfLines = 1,
   descriptionNumberOfLines = 2,
-  rippleColor: customRippleColor,
   style,
   containerStyle,
   contentStyle,
@@ -197,13 +191,14 @@ const ListAccordion = ({
   onLongPress,
   delayLongPress,
   expanded: expandedProp,
-  accessibilityLabel,
+  'aria-label': ariaLabel,
   pointerEvents = 'none',
   titleMaxFontSizeMultiplier,
   descriptionMaxFontSizeMultiplier,
   hitSlop,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
+  const { direction } = useLocale();
   const [expanded, setExpanded] = React.useState<boolean>(
     expandedProp || false
   );
@@ -212,9 +207,6 @@ const ListAccordion = ({
   const onDescriptionTextLayout = (
     event: NativeSyntheticEvent<TextLayoutEventData>
   ) => {
-    if (!theme.isV3) {
-      return;
-    }
     const { nativeEvent } = event;
     setAlignToTop(nativeEvent.lines.length >= 2);
   };
@@ -241,29 +233,30 @@ const ListAccordion = ({
     ? groupContext.expandedId === id
     : expandedInternal;
 
-  const { titleColor, descriptionColor, titleTextColor, rippleColor } =
-    getAccordionColors({
-      theme,
-      isExpanded,
-      customRippleColor,
-    });
+  const { descriptionColor, titleTextColor } = getAccordionColors({
+    theme,
+    isExpanded,
+  });
 
   const handlePress =
     groupContext && id !== undefined
       ? () => groupContext.onAccordionPress(id)
       : handlePressAction;
+
+  const hasLeft = left != null;
+  const accordionContext = React.useMemo(() => ({ hasLeft }), [hasLeft]);
+
   return (
     <View>
       <View style={{ backgroundColor: theme?.colors?.background }}>
         <TouchableRipple
-          style={[theme.isV3 ? styles.containerV3 : styles.container, style]}
+          style={[styles.container, style]}
           onPress={handlePress}
           onLongPress={onLongPress}
           delayLongPress={delayLongPress}
-          rippleColor={rippleColor}
-          accessibilityRole="button"
-          accessibilityState={{ expanded: isExpanded }}
-          accessibilityLabel={accessibilityLabel}
+          role="button"
+          aria-expanded={isExpanded}
+          aria-label={ariaLabel}
           testID={testID}
           theme={theme}
           background={background}
@@ -271,22 +264,16 @@ const ListAccordion = ({
           hitSlop={hitSlop}
         >
           <View
-            style={[theme.isV3 ? styles.rowV3 : styles.row, containerStyle]}
+            style={[styles.row, containerStyle]}
             pointerEvents={pointerEvents}
           >
             {left
               ? left({
                   color: isExpanded ? theme.colors?.primary : descriptionColor,
-                  style: getLeftStyles(alignToTop, description, theme.isV3),
+                  style: getLeftStyles(alignToTop, description),
                 })
               : null}
-            <View
-              style={[
-                theme.isV3 ? styles.itemV3 : styles.item,
-                styles.content,
-                contentStyle,
-              ]}
-            >
+            <View style={[styles.contentItem, styles.content, contentStyle]}>
               <Text
                 selectable={false}
                 numberOfLines={titleNumberOfLines}
@@ -320,7 +307,10 @@ const ListAccordion = ({
               ) : null}
             </View>
             <View
-              style={[styles.item, description ? styles.multiline : undefined]}
+              style={[
+                styles.trailingItem,
+                description ? styles.multiline : undefined,
+              ]}
             >
               {right ? (
                 right({
@@ -329,9 +319,9 @@ const ListAccordion = ({
               ) : (
                 <MaterialCommunityIcon
                   name={isExpanded ? 'chevron-up' : 'chevron-down'}
-                  color={theme.isV3 ? descriptionColor : titleColor}
+                  color={descriptionColor}
                   size={24}
-                  direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
+                  direction={direction}
                 />
               )}
             </View>
@@ -339,26 +329,11 @@ const ListAccordion = ({
         </TouchableRipple>
       </View>
 
-      {isExpanded
-        ? React.Children.map(children, (child) => {
-            if (
-              left &&
-              React.isValidElement<ListChildProps>(child) &&
-              !child.props.left &&
-              !child.props.right
-            ) {
-              return React.cloneElement(child, {
-                style: [
-                  theme.isV3 ? styles.childV3 : styles.child,
-                  child.props.style,
-                ],
-                theme,
-              });
-            }
-
-            return child;
-          })
-        : null}
+      {isExpanded ? (
+        <ListAccordionContext.Provider value={accordionContext}>
+          {children}
+        </ListAccordionContext.Provider>
+      ) : null}
     </View>
   );
 };
@@ -367,17 +342,10 @@ ListAccordion.displayName = 'List.Accordion';
 
 const styles = StyleSheet.create({
   container: {
-    padding: 8,
-  },
-  containerV3: {
     paddingVertical: 8,
     paddingRight: 24,
   },
   row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  rowV3: {
     flexDirection: 'row',
     marginVertical: 6,
   },
@@ -392,18 +360,12 @@ const styles = StyleSheet.create({
   description: {
     fontSize: 14,
   },
-  item: {
-    marginVertical: 6,
-    paddingLeft: 8,
-  },
-  itemV3: {
+  contentItem: {
     paddingLeft: 16,
   },
-  child: {
-    paddingLeft: 64,
-  },
-  childV3: {
-    paddingLeft: 40,
+  trailingItem: {
+    marginVertical: 6,
+    paddingLeft: 8,
   },
   content: {
     flex: 1,
diff --git a/src/components/List/ListAccordionContext.tsx b/src/components/List/ListAccordionContext.tsx
new file mode 100644
index 0000000000..142c25ff65
--- /dev/null
+++ b/src/components/List/ListAccordionContext.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+export type ListAccordionContextType = {
+  /**
+   * Whether the accordion renders a `left` element.
+   */
+  hasLeft: boolean;
+};
+
+export const ListAccordionContext =
+  React.createContext<ListAccordionContextType>({ hasLeft: false });
+
+ListAccordionContext.displayName = 'ListAccordionContext';
diff --git a/src/components/List/ListAccordionGroup.tsx b/src/components/List/ListAccordionGroup.tsx
index 15e148ae6e..f153eb557f 100644
--- a/src/components/List/ListAccordionGroup.tsx
+++ b/src/components/List/ListAccordionGroup.tsx
@@ -74,7 +74,7 @@ const ListAccordionGroup = ({
   return (
     <ListAccordionGroupContext.Provider
       value={{
-        expandedId: expandedIdProp || expandedId, // component can be controlled or uncontrolled
+        expandedId: expandedIdProp ?? expandedId, // component can be controlled or uncontrolled
         onAccordionPress: onAccordionPress || onAccordionPressDefault,
       }}
     >
diff --git a/src/components/List/ListIcon.tsx b/src/components/List/ListIcon.tsx
index f1c7194c43..ff02dea7f6 100644
--- a/src/components/List/ListIcon.tsx
+++ b/src/components/List/ListIcon.tsx
@@ -1,9 +1,10 @@
-import * as React from 'react';
-import { View, ViewStyle, StyleSheet, StyleProp } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
 
 import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
-import Icon, { IconSource } from '../Icon';
+import type { ThemeProp } from '../../theme/types';
+import Icon from '../Icon';
+import type { IconSource } from '../Icon';
 
 export type Props = {
   /**
@@ -13,7 +14,7 @@ export type Props = {
   /**
    * Color for the icon.
    */
-  color?: string;
+  color?: ColorValue;
   style?: StyleProp<ViewStyle>;
   /**
    * @optional
@@ -29,13 +30,13 @@ const ICON_SIZE = 24;
  * ## Usage
  * ```js
  * import * as React from 'react';
- * import { List, MD3Colors } from 'react-native-paper';
+ * import { List, Palette } from 'react-native-paper';
  *
  * const MyComponent = () => (
  *   <>
- *     <List.Icon color={MD3Colors.tertiary70} icon="folder" />
- *     <List.Icon color={MD3Colors.tertiary70} icon="equal" />
- *     <List.Icon color={MD3Colors.tertiary70} icon="calendar" />
+ *     <List.Icon color={Palette.tertiary70} icon="folder" />
+ *     <List.Icon color={Palette.tertiary70} icon="equal" />
+ *     <List.Icon color={Palette.tertiary70} icon="calendar" />
  *   </>
  * );
  *
@@ -51,10 +52,7 @@ const ListIcon = ({
   const theme = useInternalTheme(themeOverrides);
 
   return (
-    <View
-      style={[theme.isV3 ? styles.itemV3 : styles.item, style]}
-      pointerEvents="box-none"
-    >
+    <View style={[styles.item, style]} pointerEvents="box-none">
       <Icon source={icon} size={ICON_SIZE} color={iconColor} theme={theme} />
     </View>
   );
@@ -62,13 +60,6 @@ const ListIcon = ({
 
 const styles = StyleSheet.create({
   item: {
-    margin: 8,
-    height: 40,
-    width: 40,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  itemV3: {
     alignItems: 'center',
     justifyContent: 'center',
   },
diff --git a/src/components/List/ListImage.tsx b/src/components/List/ListImage.tsx
index 9839be7b02..213d4254c7 100644
--- a/src/components/List/ListImage.tsx
+++ b/src/components/List/ListImage.tsx
@@ -1,14 +1,7 @@
-import * as React from 'react';
-import {
-  StyleSheet,
-  StyleProp,
-  Image,
-  ImageSourcePropType,
-  ImageStyle,
-} from 'react-native';
+import { StyleSheet, Image } from 'react-native';
+import type { StyleProp, ImageSourcePropType, ImageStyle } from 'react-native';
 
-import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
+import type { ThemeProp } from '../../theme/types';
 
 export type Props = {
   source: ImageSourcePropType;
@@ -26,7 +19,7 @@ export type Props = {
  * ## Usage
  * ```js
  * import * as React from 'react';
- * import { List, MD3Colors } from 'react-native-paper';
+ * import { List, Palette } from 'react-native-paper';
  *
  * const MyComponent = () => (
  *   <>
@@ -42,16 +35,11 @@ const ListImage = ({
   style,
   source,
   variant = 'image',
-  theme: themeOverrides,
+  theme: _theme,
 }: Props) => {
-  const theme = useInternalTheme(themeOverrides);
   const getStyles = () => {
     if (variant === 'video') {
-      if (!theme.isV3) {
-        return [style, styles.video];
-      }
-
-      return [style, styles.videoV3];
+      return [style, styles.video];
     }
 
     return [style, styles.image];
@@ -62,7 +50,6 @@ const ListImage = ({
       style={getStyles()}
       source={source}
       accessibilityIgnoresInvertColors
-      testID="list-image"
     />
   );
 };
@@ -73,11 +60,6 @@ const styles = StyleSheet.create({
     height: 56,
   },
   video: {
-    width: 100,
-    height: 64,
-    marginLeft: 0,
-  },
-  videoV3: {
     width: 114,
     height: 64,
     marginLeft: 0,
diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx
index 467eb9b67a..038ef86a58 100644
--- a/src/components/List/ListItem.tsx
+++ b/src/components/List/ListItem.tsx
@@ -1,30 +1,31 @@
 import * as React from 'react';
-import {
+import { StyleSheet, View } from 'react-native';
+import type {
+  ColorValue,
   GestureResponderEvent,
   NativeSyntheticEvent,
   StyleProp,
-  StyleSheet,
   TextLayoutEventData,
+  TextProps,
   TextStyle,
-  View,
   ViewStyle,
 } from 'react-native';
 
-import color from 'color';
-
-import { Style, getLeftStyles, getRightStyles } from './utils';
+import { ListAccordionContext } from './ListAccordionContext';
+import { getLeftStyles, getRightStyles } from './utils';
+import type { Style } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import type { $RemoveChildren, EllipsizeProp, ThemeProp } from '../../types';
-import { forwardRef } from '../../utils/forwardRef';
+import type { ThemeProp } from '../../theme/types';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
 type Title =
   | React.ReactNode
   | ((props: {
       selectable: boolean;
-      ellipsizeMode: EllipsizeProp | undefined;
-      color: string;
+      ellipsizeMode: TextProps['ellipsizeMode'];
+      color: ColorValue;
       fontSize: number;
     }) => React.ReactNode);
 
@@ -32,12 +33,15 @@ type Description =
   | React.ReactNode
   | ((props: {
       selectable: boolean;
-      ellipsizeMode: EllipsizeProp | undefined;
-      color: string;
+      ellipsizeMode: TextProps['ellipsizeMode'];
+      color: ColorValue;
       fontSize: number;
     }) => React.ReactNode);
 
-export type Props = $RemoveChildren<typeof TouchableRipple> & {
+export type Props = Omit<
+  React.PropsWithoutRef<TouchableRippleProps>,
+  'children'
+> & {
   /**
    * Title text for the list item.
    */
@@ -49,11 +53,11 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
   /**
    * Callback which returns a React element to display on the left side.
    */
-  left?: (props: { color: string; style: Style }) => React.ReactNode;
+  left?: (props: { color: ColorValue; style: Style }) => React.ReactNode;
   /**
    * Callback which returns a React element to display on the right side.
    */
-  right?: (props: { color: string; style?: Style }) => React.ReactNode;
+  right?: (props: { color: ColorValue; style?: Style }) => React.ReactNode;
   /**
    * Function to execute on press.
    */
@@ -66,6 +70,7 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
    * Style that is passed to the root TouchableRipple container.
    */
   style?: StyleProp<ViewStyle>;
+  ref?: React.Ref<View>;
   /**
    * Style that is passed to the outermost container that wraps the entire content, including left and right items and both title and description.
    */
@@ -97,13 +102,13 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
    *
    * See [`ellipsizeMode`](https://reactnative.dev/docs/text#ellipsizemode)
    */
-  titleEllipsizeMode?: EllipsizeProp;
+  titleEllipsizeMode?: TextProps['ellipsizeMode'];
   /**
    * Ellipsize Mode for the Description.  One of `'head'`, `'middle'`, `'tail'`, `'clip'`.
    *
    * See [`ellipsizeMode`](https://reactnative.dev/docs/text#ellipsizemode)
    */
-  descriptionEllipsizeMode?: EllipsizeProp;
+  descriptionEllipsizeMode?: TextProps['ellipsizeMode'];
   /**
    * Specifies the largest possible scale a title font can reach.
    */
@@ -139,45 +144,42 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
  *
  * @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
  */
-const ListItem = (
-  {
-    left,
-    right,
-    title,
-    description,
-    onPress,
-    theme: themeOverrides,
-    style,
-    containerStyle,
-    contentStyle,
-    titleStyle,
-    titleNumberOfLines = 1,
-    descriptionNumberOfLines = 2,
-    titleEllipsizeMode,
-    descriptionEllipsizeMode,
-    descriptionStyle,
-    descriptionMaxFontSizeMultiplier,
-    titleMaxFontSizeMultiplier,
-    testID,
-    ...rest
-  }: Props,
-  ref: React.ForwardedRef<View>
-) => {
+const ListItem = ({
+  left,
+  right,
+  title,
+  description,
+  onPress,
+  theme: themeOverrides,
+  style,
+  containerStyle,
+  contentStyle,
+  titleStyle,
+  titleNumberOfLines = 1,
+  descriptionNumberOfLines = 2,
+  titleEllipsizeMode,
+  descriptionEllipsizeMode,
+  descriptionStyle,
+  descriptionMaxFontSizeMultiplier,
+  titleMaxFontSizeMultiplier,
+  testID,
+  ref,
+  ...rest
+}: Props) => {
   const theme = useInternalTheme(themeOverrides);
+  const { hasLeft } = React.useContext(ListAccordionContext);
+  const shouldIndent = hasLeft && !left && !right;
   const [alignToTop, setAlignToTop] = React.useState(false);
 
   const onDescriptionTextLayout = (
     event: NativeSyntheticEvent<TextLayoutEventData>
   ) => {
-    if (!theme.isV3) {
-      return;
-    }
     const { nativeEvent } = event;
     setAlignToTop(nativeEvent.lines.length >= 2);
   };
 
   const renderDescription = (
-    descriptionColor: string,
+    descriptionColor: ColorValue,
     description?: Description | null
   ) => {
     return typeof description === 'function' ? (
@@ -206,9 +208,7 @@ const ListItem = (
   };
 
   const renderTitle = () => {
-    const titleColor = theme.isV3
-      ? theme.colors.onSurface
-      : color(theme.colors.text).alpha(0.87).rgb().string();
+    const titleColor = theme.colors.onSurface;
 
     return typeof title === 'function' ? (
       title({
@@ -230,34 +230,29 @@ const ListItem = (
     );
   };
 
-  const descriptionColor = theme.isV3
-    ? theme.colors.onSurfaceVariant
-    : color(theme.colors.text).alpha(0.54).rgb().string();
+  const descriptionColor = theme.colors.onSurfaceVariant;
 
   return (
     <TouchableRipple
       {...rest}
       ref={ref}
-      style={[theme.isV3 ? styles.containerV3 : styles.container, style]}
+      style={
+        shouldIndent
+          ? [styles.container, styles.indent, style]
+          : [styles.container, style]
+      }
       onPress={onPress}
       theme={theme}
       testID={testID}
     >
-      <View style={[theme.isV3 ? styles.rowV3 : styles.row, containerStyle]}>
+      <View style={[styles.row, containerStyle]}>
         {left
           ? left({
               color: descriptionColor,
-              style: getLeftStyles(alignToTop, description, theme.isV3),
+              style: getLeftStyles(alignToTop, description),
             })
           : null}
-        <View
-          style={[
-            theme.isV3 ? styles.itemV3 : styles.item,
-            styles.content,
-            contentStyle,
-          ]}
-          testID={`${testID}-content`}
-        >
+        <View style={[styles.item, styles.content, contentStyle]}>
           {renderTitle()}
 
           {description
@@ -267,7 +262,7 @@ const ListItem = (
         {right
           ? right({
               color: descriptionColor,
-              style: getRightStyles(alignToTop, description, theme.isV3),
+              style: getRightStyles(alignToTop, description),
             })
           : null}
       </View>
@@ -276,21 +271,16 @@ const ListItem = (
 };
 
 ListItem.displayName = 'List.Item';
-const Component = forwardRef(ListItem);
 
 const styles = StyleSheet.create({
   container: {
-    padding: 8,
-  },
-  containerV3: {
     paddingVertical: 8,
     paddingRight: 24,
   },
-  row: {
-    width: '100%',
-    flexDirection: 'row',
+  indent: {
+    paddingLeft: 40,
   },
-  rowV3: {
+  row: {
     width: '100%',
     flexDirection: 'row',
     marginVertical: 6,
@@ -302,10 +292,6 @@ const styles = StyleSheet.create({
     fontSize: 14,
   },
   item: {
-    marginVertical: 6,
-    paddingLeft: 8,
-  },
-  itemV3: {
     paddingLeft: 16,
   },
   content: {
@@ -315,4 +301,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default Component;
+export default ListItem;
diff --git a/src/components/List/ListSection.tsx b/src/components/List/ListSection.tsx
index 59640c70da..cd623992d6 100644
--- a/src/components/List/ListSection.tsx
+++ b/src/components/List/ListSection.tsx
@@ -1,17 +1,12 @@
 import * as React from 'react';
-import {
-  StyleProp,
-  StyleSheet,
-  TextStyle,
-  View,
-  ViewStyle,
-} from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import type { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
 
 import ListSubheader from './ListSubheader';
 import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
+import type { ThemeProp } from '../../theme/types';
 
-export type Props = React.ComponentPropsWithRef<typeof View> & {
+export type Props = ViewProps & {
   /**
    * Title text for the section.
    */
@@ -37,7 +32,7 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
  * ## Usage
  * ```js
  * import * as React from 'react';
- * import { List, MD3Colors } from 'react-native-paper';
+ * import { List, Palette } from 'react-native-paper';
  *
  * const MyComponent = () => (
  *   <List.Section>
@@ -45,7 +40,7 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
  *     <List.Item title="First Item" left={() => <List.Icon icon="folder" />} />
  *     <List.Item
  *       title="Second Item"
- *       left={() => <List.Icon color={MD3Colors.tertiary70} icon="folder" />}
+ *       left={() => <List.Icon color={Palette.tertiary70} icon="folder" />}
  *     />
  *   </List.Section>
  * );
diff --git a/src/components/List/ListSubheader.tsx b/src/components/List/ListSubheader.tsx
index 038b86a86e..b7a804a57d 100644
--- a/src/components/List/ListSubheader.tsx
+++ b/src/components/List/ListSubheader.tsx
@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { StyleProp, StyleSheet, TextStyle } from 'react-native';
-
-import color from 'color';
-import type { ThemeProp } from 'src/types';
+import { StyleSheet } from 'react-native';
+import type { StyleProp, TextStyle } from 'react-native';
 
 import { useInternalTheme } from '../../core/theming';
+import type { ThemeProp } from '../../theme/types';
 import Text from '../Typography/Text';
 
 export type Props = React.ComponentProps<typeof Text> & {
@@ -43,11 +42,9 @@ const ListSubheader = ({
 }: Props) => {
   const theme = useInternalTheme(overrideTheme);
 
-  const textColor = theme.isV3
-    ? theme.colors.onSurfaceVariant
-    : color(theme.colors.text).alpha(0.54).rgb().string();
+  const textColor = theme.colors.onSurfaceVariant;
 
-  const font = theme.isV3 ? theme.fonts.bodyMedium : theme.fonts.medium;
+  const font = theme.fonts.bodyMedium;
 
   return (
     <Text
diff --git a/src/components/List/utils.ts b/src/components/List/utils.ts
index f5f28be644..e01f0e55c6 100644
--- a/src/components/List/utils.ts
+++ b/src/components/List/utils.ts
@@ -1,19 +1,13 @@
-import {
-  FlexAlignType,
-  ColorValue,
-  StyleSheet,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { StyleSheet } from 'react-native';
+import type { StyleProp, TextProps, ViewStyle } from 'react-native';
 
-import color from 'color';
-import type { EllipsizeProp, InternalTheme, ThemeProp } from 'src/types';
+import type { InternalTheme, ThemeProp } from '../../theme/types';
 
 type Description =
   | React.ReactNode
   | ((props: {
       selectable: boolean;
-      ellipsizeMode: EllipsizeProp | undefined;
+      ellipsizeMode: TextProps['ellipsizeMode'];
       color: string;
       fontSize: number;
     }) => React.ReactNode);
@@ -29,17 +23,24 @@ export type Style = {
   marginLeft?: number;
   marginRight?: number;
   marginVertical?: number;
-  alignSelf?: FlexAlignType;
+  alignSelf?: 'flex-start' | 'center';
+};
+
+const stylesV3Left = {
+  marginRight: 0,
+  marginLeft: 16,
+};
+
+const stylesV3Right = {
+  marginLeft: 16,
 };
 
 export const getLeftStyles = (
   alignToTop: boolean,
-  description: Description,
-  isV3: boolean
+  description: Description
 ) => {
-  const stylesV3 = {
-    marginRight: 0,
-    marginLeft: 16,
+  const stylesV3: Style = {
+    ...stylesV3Left,
     alignSelf: alignToTop ? 'flex-start' : 'center',
   };
 
@@ -47,14 +48,10 @@ export const getLeftStyles = (
     return {
       ...styles.iconMarginLeft,
       ...styles.marginVerticalNone,
-      ...(isV3 && { ...stylesV3 }),
+      ...stylesV3,
     };
   }
 
-  if (!isV3) {
-    return styles.iconMarginLeft;
-  }
-
   return {
     ...styles.iconMarginLeft,
     ...stylesV3,
@@ -63,11 +60,10 @@ export const getLeftStyles = (
 
 export const getRightStyles = (
   alignToTop: boolean,
-  description: Description,
-  isV3: boolean
+  description: Description
 ) => {
-  const stylesV3 = {
-    marginLeft: 16,
+  const stylesV3: Style = {
+    ...stylesV3Right,
     alignSelf: alignToTop ? 'flex-start' : 'center',
   };
 
@@ -75,14 +71,10 @@ export const getRightStyles = (
     return {
       ...styles.iconMarginRight,
       ...styles.marginVerticalNone,
-      ...(isV3 && { ...stylesV3 }),
+      ...stylesV3,
     };
   }
 
-  if (!isV3) {
-    return styles.iconMarginRight;
-  }
-
   return {
     ...styles.iconMarginRight,
     ...stylesV3,
@@ -98,29 +90,18 @@ const styles = StyleSheet.create({
 export const getAccordionColors = ({
   theme,
   isExpanded,
-  customRippleColor,
 }: {
   theme: InternalTheme;
   isExpanded?: boolean;
-  customRippleColor?: ColorValue;
 }) => {
-  const titleColor = theme.isV3
-    ? theme.colors.onSurface
-    : color(theme.colors.text).alpha(0.87).rgb().string();
+  const titleColor = theme.colors.onSurface;
 
-  const descriptionColor = theme.isV3
-    ? theme.colors.onSurfaceVariant
-    : color(theme.colors.text).alpha(0.54).rgb().string();
+  const descriptionColor = theme.colors.onSurfaceVariant;
 
   const titleTextColor = isExpanded ? theme.colors?.primary : titleColor;
 
-  const rippleColor =
-    customRippleColor || color(titleTextColor).alpha(0.12).rgb().string();
-
   return {
-    titleColor,
     descriptionColor,
     titleTextColor,
-    rippleColor,
   };
 };
diff --git a/src/components/MaterialCommunityIcon.tsx b/src/components/MaterialCommunityIcon.tsx
index 52719bdbe1..df4955578d 100644
--- a/src/components/MaterialCommunityIcon.tsx
+++ b/src/components/MaterialCommunityIcon.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { ComponentProps } from 'react';
-import { StyleSheet, Text, Platform, Role, ViewProps } from 'react-native';
+import { Platform, StyleSheet, Text } from 'react-native';
+import type { ColorValue, Role, ViewProps } from 'react-native';
 
-import { black } from '../styles/themes/v2/colors';
+import { black } from '../theme/colors';
 
 export type IconProps = {
-  name: ComponentProps<typeof MaterialCommunityIcons>['name'];
-  color?: string;
+  name: string;
+  color?: ColorValue;
   size: number;
   direction: 'rtl' | 'ltr';
   allowFontScaling?: boolean;
@@ -34,48 +34,33 @@ export const accessibilityProps: AccessibilityProps =
         importantForAccessibility: 'no-hide-descendants',
       };
 
-/**
- * Loads the appropriate icon module based on available dependencies
- */
 const loadIconModule = () => {
   try {
     return require('@react-native-vector-icons/material-design-icons').default;
   } catch (e) {
-    try {
-      return require('@expo/vector-icons/MaterialCommunityIcons').default;
-    } catch (e) {
-      try {
-        return require('react-native-vector-icons/MaterialCommunityIcons')
-          .default;
-      } catch (e) {
-        return null;
-      }
-    }
+    return null;
   }
 };
 
 type IconModuleType = React.ComponentType<
-  React.ComponentProps<
-    | typeof import('@react-native-vector-icons/material-design-icons').default
-    | typeof import('react-native-vector-icons/MaterialCommunityIcons').default
+  Omit<
+    React.ComponentProps<
+      typeof import('@react-native-vector-icons/material-design-icons').default
+    >,
+    'name'
   > & {
-    color: string;
+    name: string;
+    color: ColorValue;
     pointerEvents?: ViewProps['pointerEvents'];
   }
 >;
 
 const IconModule = loadIconModule();
 
-/**
- * Fallback component displayed when no icon library is available
- */
 const FallbackIcon = ({ name, color, size, ...rest }: IconProps) => {
   console.warn(
-    `Tried to use the icon '${name}' in a component from 'react-native-paper', but none of the required icon libraries are installed.`,
-    `To fix this, please install one of the following:\n` +
-      `- @expo/vector-icons\n` +
-      `- @react-native-vector-icons/material-design-icons\n` +
-      `- react-native-vector-icons\n\n` +
+    `Tried to use the icon '${name}' in a component from 'react-native-paper', but the required icon library is not installed.`,
+    `To fix this, please install '@react-native-vector-icons/material-design-icons'.\n\n` +
       `You can also use another method to specify icon: https://callstack.github.io/react-native-paper/docs/guides/icons`
   );
 
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index 669656ca65..b862a5de88 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -1,34 +1,43 @@
 import * as React from 'react';
 import {
-  Animated,
   Dimensions,
-  Easing,
-  EmitterSubscription,
-  I18nManager,
   Keyboard,
-  KeyboardEvent as RNKeyboardEvent,
-  LayoutRectangle,
-  NativeEventSubscription,
   Platform,
+  Pressable,
   ScrollView,
-  ScrollViewProps,
-  StyleProp,
   StyleSheet,
   View,
+} from 'react-native';
+import type { KeyboardEvent as RNKeyboardEvent } from 'react-native';
+import type {
+  EmitterSubscription,
+  LayoutRectangle,
+  NativeEventSubscription,
+  ScrollViewProps,
+  StyleProp,
   ViewStyle,
-  Pressable,
 } from 'react-native';
 
+import Animated, {
+  Easing,
+  ReduceMotion,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { scheduleOnRN } from 'react-native-worklets';
+import useLatestCallback from 'use-latest-callback';
 
 import MenuItem from './MenuItem';
+import { useLocale } from '../../core/locale';
 import { useInternalTheme } from '../../core/theming';
-import type { MD3Elevation, ThemeProp } from '../../types';
-import { ElevationLevels } from '../../types';
+import type { Elevation, ThemeProp } from '../../theme/types';
 import { addEventListener } from '../../utils/addEventListener';
 import { BackHandler } from '../../utils/BackHandler/BackHandler';
 import Portal from '../Portal/Portal';
 import Surface from '../Surface';
+import type { SurfaceStyle } from '../Surface';
 
 export type Props = {
   /**
@@ -58,7 +67,11 @@ export type Props = {
   /**
    * Accessibility label for the overlay. This is read by the screen reader when the user taps outside the menu.
    */
-  overlayAccessibilityLabel?: string;
+  dismissAccessibilityLabel?: string;
+  /**
+   * testID for the overlay that is displayed behind the menu.
+   */
+  overlayTestID?: string;
   /**
    * Content of the `Menu`.
    */
@@ -66,13 +79,13 @@ export type Props = {
   /**
    * Style of menu's inner content.
    */
-  contentStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  contentStyle?: StyleProp<SurfaceStyle>;
   style?: StyleProp<ViewStyle>;
   /**
    * Elevation level of the menu's content. Shadow styles are calculated based on this value. Default `backgroundColor` is taken from the corresponding `theme.colors.elevation` property. By default equals `2`.
    * @supported Available in v5.x with theme version 3
    */
-  elevation?: MD3Elevation;
+  elevation?: Elevation;
   /**
    * Mode of the menu's content.
    * - `elevated` - Surface with a shadow and background color corresponding to set `elevation` value.
@@ -104,11 +117,7 @@ const EASING = Easing.bezier(0.4, 0, 0.2, 1);
 
 const WINDOW_LAYOUT = Dimensions.get('window');
 
-const DEFAULT_ELEVATION: MD3Elevation = 2;
-export const ELEVATION_LEVELS_MAP = Object.values(
-  ElevationLevels
-) as ElevationLevels[];
-
+const DEFAULT_ELEVATION: Elevation = 2;
 const DEFAULT_MODE = 'elevated';
 
 const focusFirstDOMNode = (el: View | null | undefined) => {
@@ -130,8 +139,6 @@ const isCoordinate = (anchor: any): anchor is { x: number; y: number } =>
   typeof anchor?.x === 'number' &&
   typeof anchor?.y === 'number';
 
-const isBrowser = () => Platform.OS === 'web' && 'document' in global;
-
 /**
  * Menus display a list of choices on temporary elevated surfaces. Their placement varies based on the element that opens them.
  *
@@ -182,8 +189,9 @@ const isBrowser = () => Platform.OS === 'web' && 'document' in global;
 const Menu = ({
   visible,
   statusBarHeight,
-  overlayAccessibilityLabel = 'Close menu',
-  testID = 'menu',
+  dismissAccessibilityLabel = 'Close menu',
+  overlayTestID,
+  testID,
   anchor,
   onDismiss,
   anchorPosition,
@@ -196,7 +204,10 @@ const Menu = ({
   keyboardShouldPersistTaps,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
+
+  const { direction } = useLocale();
   const insets = useSafeAreaInsets();
+
   const [rendered, setRendered] = React.useState(visible);
   const [left, setLeft] = React.useState(0);
   const [top, setTop] = React.useState(0);
@@ -210,13 +221,15 @@ const Menu = ({
     height: WINDOW_LAYOUT.height,
   });
 
-  const opacityAnimationRef = React.useRef(new Animated.Value(0));
-  const scaleAnimationRef = React.useRef(new Animated.ValueXY({ x: 0, y: 0 }));
+  const opacity = useSharedValue(0);
+  const scaleX = useSharedValue(0);
+  const scaleY = useSharedValue(0);
+
   const keyboardHeightRef = React.useRef(0);
-  const prevVisible = React.useRef<boolean | null>(null);
+  const prevVisible = React.useRef(visible);
   const anchorRef = React.useRef<View | null>(null);
   const menuRef = React.useRef<View | null>(null);
-  const prevRendered = React.useRef(false);
+  const isShownRef = React.useRef(false);
 
   const keyboardDidShow = React.useCallback((e: RNKeyboardEvent) => {
     const keyboardHeight = e.endCoordinates.height;
@@ -259,7 +272,10 @@ const Menu = ({
   const removeListeners = React.useCallback(() => {
     backHandlerSubscriptionRef.current?.remove();
     dimensionsSubscriptionRef.current?.remove();
-    isBrowser() && document.removeEventListener('keyup', handleKeypress);
+
+    if (Platform.OS === 'web' && 'document' in global) {
+      document.removeEventListener('keyup', handleKeypress);
+    }
   }, [handleKeypress]);
 
   const attachListeners = React.useCallback(() => {
@@ -302,6 +318,26 @@ const Menu = ({
     [anchor]
   );
 
+  const handleShowAnimationFinished = useLatestCallback((finished: boolean) => {
+    if (!finished || !prevVisible.current) {
+      return;
+    }
+
+    isShownRef.current = true;
+    focusFirstDOMNode(menuRef.current);
+  });
+
+  const handleHideAnimationFinished = useLatestCallback((finished: boolean) => {
+    if (!finished || prevVisible.current) {
+      return;
+    }
+
+    setMenuLayout({ width: 0, height: 0 });
+    setRendered(false);
+    isShownRef.current = false;
+    focusFirstDOMNode(anchorRef.current);
+  });
+
   const show = React.useCallback(async () => {
     const windowLayoutResult = Dimensions.get('window');
     const [menuLayoutResult, anchorLayoutResult] = await Promise.all([
@@ -309,6 +345,10 @@ const Menu = ({
       measureAnchorLayout(),
     ]);
 
+    if (!prevVisible.current) {
+      return;
+    }
+
     // When visible is true for first render
     // native views can be still not rendered and
     // measureMenuLayout/measureAnchorLayout functions
@@ -345,69 +385,74 @@ const Menu = ({
     });
 
     attachListeners();
+
     requestAnimationFrame(() => {
+      if (!prevVisible.current) {
+        return;
+      }
+
       const { animation } = theme;
-      Animated.parallel([
-        Animated.timing(scaleAnimationRef.current, {
-          toValue: { x: menuLayoutResult.width, y: menuLayoutResult.height },
-          duration: ANIMATION_DURATION * animation.scale,
-          easing: EASING,
-          useNativeDriver: true,
-        }),
-        Animated.timing(opacityAnimationRef.current, {
-          toValue: 1,
-          duration: ANIMATION_DURATION * animation.scale,
-          easing: EASING,
-          useNativeDriver: true,
-        }),
-      ]).start(() => {
-        focusFirstDOMNode(menuRef.current);
-        prevRendered.current = true;
-      });
+
+      const config = {
+        duration: ANIMATION_DURATION * animation.scale,
+        easing: EASING,
+        reduceMotion: ReduceMotion.Never,
+      };
+
+      scaleX.value = withTiming(menuLayoutResult.width, config);
+      scaleY.value = withTiming(menuLayoutResult.height, config);
+
+      opacity.value = withTiming(1, config, (finished) =>
+        scheduleOnRN(handleShowAnimationFinished, finished ?? false)
+      );
     });
-  }, [anchor, attachListeners, measureAnchorLayout, theme]);
+  }, [
+    anchor,
+    attachListeners,
+    handleShowAnimationFinished,
+    measureAnchorLayout,
+    opacity,
+    scaleX,
+    scaleY,
+    theme,
+  ]);
 
   const hide = React.useCallback(() => {
     removeListeners();
+    isShownRef.current = false;
 
     const { animation } = theme;
 
-    Animated.timing(opacityAnimationRef.current, {
-      toValue: 0,
-      duration: ANIMATION_DURATION * animation.scale,
-      easing: EASING,
-      useNativeDriver: true,
-    }).start(() => {
-      setMenuLayout({ width: 0, height: 0 });
-      setRendered(false);
-      prevRendered.current = false;
-      focusFirstDOMNode(anchorRef.current);
-    });
-  }, [removeListeners, theme]);
+    opacity.value = withTiming(
+      0,
+      {
+        duration: ANIMATION_DURATION * animation.scale,
+        easing: EASING,
+        reduceMotion: ReduceMotion.Never,
+      },
+      (finished) => scheduleOnRN(handleHideAnimationFinished, finished ?? false)
+    );
+  }, [handleHideAnimationFinished, opacity, removeListeners, theme]);
 
   const updateVisibility = React.useCallback(
     async (display: boolean) => {
       // Menu is rendered in Portal, which updates items asynchronously
       // We need to do the same here so that the ref is up-to-date
-      await Promise.resolve().then(() => {
-        if (display && !prevRendered.current) {
-          show();
-          return;
-        }
-
-        if (!display) {
-          hide();
-        }
+      await Promise.resolve();
 
+      if (display && !isShownRef.current) {
+        await show();
         return;
-      });
+      }
+
+      if (!display) {
+        hide();
+      }
     },
     [hide, show]
   );
 
   React.useEffect(() => {
-    const opacityAnimation = opacityAnimationRef.current;
-    const scaleAnimation = scaleAnimationRef.current;
     keyboardDidShowListenerRef.current = Keyboard.addListener(
       'keyboardDidShow',
       keyboardDidShow
@@ -421,30 +466,28 @@ const Menu = ({
       removeListeners();
       keyboardDidShowListenerRef.current?.remove();
       keyboardDidHideListenerRef.current?.remove();
-      scaleAnimation.removeAllListeners();
-      opacityAnimation?.removeAllListeners();
     };
   }, [removeListeners, keyboardDidHide, keyboardDidShow]);
 
+  if (visible && !rendered) {
+    // Mount the Portal before attempting to show.
+    setRendered(true);
+  }
+
   React.useEffect(() => {
     if (prevVisible.current !== visible) {
       prevVisible.current = visible;
 
-      if (visible) {
-        if (!rendered) {
-          // Mount the Portal before attempting to show.
-          setRendered(true);
-        }
-      } else {
+      if (!visible) {
         // Keep the Portal mounted so the hide animation can finish.
-        updateVisibility(false);
+        void updateVisibility(false);
       }
     }
-  }, [visible, rendered, updateVisibility]);
+  }, [visible, updateVisibility]);
 
   React.useEffect(() => {
     if (rendered && visible) {
-      updateVisibility(true);
+      void updateVisibility(true);
     }
   }, [rendered, visible, updateVisibility]);
 
@@ -455,7 +498,9 @@ const Menu = ({
   });
 
   // We need to translate menu while animating scale to imitate transform origin for scale animation
-  const positionTransforms = [];
+  let startTranslateX = 0;
+  let startTranslateY = 0;
+
   let leftTransformation = left;
   let topTransformation =
     !isCoordinate(anchorRef.current) && anchorPosition === 'bottom'
@@ -464,24 +509,14 @@ const Menu = ({
 
   // Check if menu fits horizontally and if not align it to right.
   if (left <= windowLayout.width - menuLayout.width - SCREEN_INDENT) {
-    positionTransforms.push({
-      translateX: scaleAnimationRef.current.x.interpolate({
-        inputRange: [0, menuLayout.width],
-        outputRange: [-(menuLayout.width / 2), 0],
-      }),
-    });
+    startTranslateX = -(menuLayout.width / 2);
 
     // Check if menu position has enough space from left side
     if (leftTransformation < SCREEN_INDENT) {
       leftTransformation = SCREEN_INDENT;
     }
   } else {
-    positionTransforms.push({
-      translateX: scaleAnimationRef.current.x.interpolate({
-        inputRange: [0, menuLayout.width],
-        outputRange: [menuLayout.width / 2, 0],
-      }),
-    });
+    startTranslateX = menuLayout.width / 2;
 
     leftTransformation += anchorLayout.width - menuLayout.width;
 
@@ -562,24 +597,14 @@ const Menu = ({
       // And bottom side of the screen has more space than top side
       topTransformation <= windowLayout.height - topTransformation)
   ) {
-    positionTransforms.push({
-      translateY: scaleAnimationRef.current.y.interpolate({
-        inputRange: [0, menuLayout.height],
-        outputRange: [-((scrollableMenuHeight || menuLayout.height) / 2), 0],
-      }),
-    });
+    startTranslateY = -((scrollableMenuHeight || menuLayout.height) / 2);
 
     // Check if menu position has enough space from top side
     if (topTransformation < SCREEN_INDENT) {
       topTransformation = SCREEN_INDENT;
     }
   } else {
-    positionTransforms.push({
-      translateY: scaleAnimationRef.current.y.interpolate({
-        inputRange: [0, menuLayout.height],
-        outputRange: [(scrollableMenuHeight || menuLayout.height) / 2, 0],
-      }),
-    });
+    startTranslateY = (scrollableMenuHeight || menuLayout.height) / 2;
 
     topTransformation +=
       anchorLayout.height - (scrollableMenuHeight || menuLayout.height);
@@ -601,32 +626,44 @@ const Menu = ({
     }
   }
 
-  const shadowMenuContainerStyle = {
-    opacity: opacityAnimationRef.current,
+  const shadowMenuContainerStyle: ViewStyle = scrollableMenuHeight
+    ? { height: scrollableMenuHeight }
+    : {};
+
+  const positionTransformsStyle = useAnimatedStyle(() => {
+    const scaleXProgress = menuLayout.width
+      ? scaleX.value / menuLayout.width
+      : 0;
+
+    const scaleYProgress = menuLayout.height
+      ? scaleY.value / menuLayout.height
+      : 0;
+
+    return {
+      transform: [
+        { translateX: startTranslateX * (1 - scaleXProgress) },
+        { translateY: startTranslateY * (1 - scaleYProgress) },
+      ],
+    };
+  });
+
+  const shadowMenuAnimationStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
     transform: [
       {
-        scaleX: scaleAnimationRef.current.x.interpolate({
-          inputRange: [0, menuLayout.width],
-          outputRange: [0, 1],
-        }),
+        scaleX: menuLayout.width ? scaleX.value / menuLayout.width : 0,
       },
       {
-        scaleY: scaleAnimationRef.current.y.interpolate({
-          inputRange: [0, menuLayout.height],
-          outputRange: [0, 1],
-        }),
+        scaleY: menuLayout.height ? scaleY.value / menuLayout.height : 0,
       },
     ],
-    borderRadius: theme.roundness,
-    ...(!theme.isV3 && { elevation: 8 }),
-    ...(scrollableMenuHeight ? { height: scrollableMenuHeight } : {}),
-  };
+  }));
 
   const positionStyle = {
     top: isCoordinate(anchor)
       ? topTransformation
       : topTransformation + additionalVerticalValue,
-    ...(I18nManager.getConstants().isRTL
+    ...(direction === 'rtl'
       ? { right: leftTransformation }
       : { left: leftTransformation }),
   };
@@ -644,53 +681,55 @@ const Menu = ({
       {rendered ? (
         <Portal>
           <Pressable
-            accessibilityLabel={overlayAccessibilityLabel}
-            accessibilityRole="button"
+            aria-label={dismissAccessibilityLabel}
+            role="button"
             onPress={onDismiss}
             pointerEvents={visible ? 'auto' : 'none'}
             style={styles.pressableOverlay}
+            testID={overlayTestID}
           />
           <View
             ref={(ref) => {
               menuRef.current = ref;
             }}
             collapsable={false}
-            accessibilityViewIsModal={visible}
+            aria-modal={visible}
             style={[styles.wrapper, positionStyle, style]}
             pointerEvents={pointerEvents}
             onAccessibilityEscape={onDismiss}
-            testID={`${testID}-view`}
           >
             <Animated.View
               pointerEvents={pointerEvents}
-              style={{
-                transform: positionTransforms,
-              }}
+              style={positionTransformsStyle}
             >
               <Surface
                 mode={mode}
-                pointerEvents={pointerEvents}
+                borderRadius={theme.shapes.corner.extraSmall}
                 style={[
                   styles.shadowMenuContainer,
+                  { pointerEvents },
                   shadowMenuContainerStyle,
-                  theme.isV3 && {
-                    backgroundColor:
-                      theme.colors.elevation[ELEVATION_LEVELS_MAP[elevation]],
-                  },
-                  contentStyle,
+                  shadowMenuAnimationStyle,
                 ]}
-                {...(theme.isV3 && { elevation })}
-                testID={`${testID}-surface`}
+                elevation={elevation}
+                testID={testID}
                 theme={theme}
-                container
               >
-                {(scrollableMenuHeight && (
-                  <ScrollView
-                    keyboardShouldPersistTaps={keyboardShouldPersistTaps}
-                  >
-                    {children}
-                  </ScrollView>
-                )) || <React.Fragment>{children}</React.Fragment>}
+                <Animated.View
+                  style={[
+                    styles.menuContent,
+                    Boolean(scrollableMenuHeight) && styles.fill,
+                    contentStyle,
+                  ]}
+                >
+                  {(scrollableMenuHeight && (
+                    <ScrollView
+                      keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+                    >
+                      {children}
+                    </ScrollView>
+                  )) || <React.Fragment>{children}</React.Fragment>}
+                </Animated.View>
               </Surface>
             </Animated.View>
           </View>
@@ -708,8 +747,13 @@ const styles = StyleSheet.create({
   },
   shadowMenuContainer: {
     opacity: 0,
+  },
+  menuContent: {
     paddingVertical: 8,
   },
+  fill: {
+    height: '100%',
+  },
   pressableOverlay: {
     ...Platform.select({
       web: {
diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx
index 4b8eb3740a..c76bee0557 100644
--- a/src/components/Menu/MenuItem.tsx
+++ b/src/components/Menu/MenuItem.tsx
@@ -1,13 +1,10 @@
 import * as React from 'react';
-import {
-  AccessibilityState,
-  ColorValue,
+import { StyleSheet, View } from 'react-native';
+import type {
   GestureResponderEvent,
   PressableAndroidRippleConfig,
   StyleProp,
-  StyleSheet,
   TextStyle,
-  View,
   ViewStyle,
 } from 'react-native';
 
@@ -18,11 +15,11 @@ import {
   MIN_WIDTH,
 } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
-import Icon, { IconSource } from '../Icon';
-import TouchableRipple, {
-  Props as TouchableRippleProps,
-} from '../TouchableRipple/TouchableRipple';
+import type { ThemeProp } from '../../theme/types';
+import Icon from '../Icon';
+import type { IconSource } from '../Icon';
+import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
 export type Props = {
@@ -49,11 +46,11 @@ export type Props = {
   /**
    * @supported Available in v5.x with theme version 3
    *
-   * Sets min height with densed layout.
+   * Sets min height with dense layout.
    */
   dense?: boolean;
   /**
-   * Type of background drawabale to display the feedback (Android).
+   * Type of background drawable to display the feedback (Android).
    * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: PressableAndroidRippleConfig;
@@ -82,10 +79,6 @@ export type Props = {
    * Style that is passed to the Title element.
    */
   titleStyle?: StyleProp<TextStyle>;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
   /**
    * @optional
    */
@@ -101,11 +94,24 @@ export type Props = {
   /**
    * Accessibility label for the Touchable. This is read by the screen reader when the user taps the component.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
+  /**
+   * Indicates whether the element is checked. Accepts `true`, `false`,
+   * or `'mixed'` for an indeterminate state.
+   */
+  'aria-checked'?: boolean | 'mixed';
+  /**
+   * Indicates whether the element is selected.
+   */
+  'aria-selected'?: boolean;
   /**
-   * Accessibility state for the Touchable. This is read by the screen reader when the user taps the component.
+   * Indicates whether the element is currently busy (e.g. loading).
    */
-  accessibilityState?: AccessibilityState;
+  'aria-busy'?: boolean;
+  /**
+   * Indicates whether the element's controlled content is expanded.
+   */
+  'aria-expanded'?: boolean;
 };
 
 /**
@@ -142,30 +148,28 @@ const MenuItem = ({
   containerStyle,
   contentStyle,
   titleStyle,
-  rippleColor: customRippleColor,
-  testID = 'menu-item',
-  accessibilityLabel,
-  accessibilityState,
+  testID,
+  'aria-label': ariaLabel,
+  'aria-checked': ariaChecked,
+  'aria-selected': ariaSelected,
+  'aria-busy': ariaBusy,
+  'aria-expanded': ariaExpanded,
   theme: themeOverrides,
   titleMaxFontSizeMultiplier = 1.5,
   hitSlop,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const { titleColor, iconColor, rippleColor } = getMenuItemColor({
+  const { titleColor, iconColor, contentOpacity } = getMenuItemColor({
     theme,
     disabled,
-    customRippleColor,
   });
-  const { isV3 } = theme;
-
-  const containerPadding = isV3 ? 12 : 8;
+  const containerPadding = 12;
 
-  const iconWidth = isV3 ? 24 : 40;
+  const iconWidth = 24;
 
-  const minWidth = MIN_WIDTH - (isV3 ? 12 : 16);
+  const minWidth = MIN_WIDTH - 12;
 
   const maxWidth = getContentMaxWidth({
-    isV3,
     iconWidth,
     leadingIcon,
     trailingIcon,
@@ -173,11 +177,9 @@ const MenuItem = ({
 
   const titleTextStyle = {
     color: titleColor,
-    ...(isV3 ? theme.fonts.bodyLarge : {}),
+    ...theme.fonts.bodyLarge,
   };
 
-  const newAccessibilityState = { ...accessibilityState, disabled };
-
   return (
     <TouchableRipple
       style={[
@@ -190,30 +192,26 @@ const MenuItem = ({
       disabled={disabled}
       testID={testID}
       background={background}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="menuitem"
-      accessibilityState={newAccessibilityState}
-      rippleColor={rippleColor}
+      aria-label={ariaLabel}
+      role="menuitem"
+      aria-disabled={disabled}
+      aria-checked={ariaChecked}
+      aria-selected={ariaSelected}
+      aria-busy={ariaBusy}
+      aria-expanded={ariaExpanded}
       hitSlop={hitSlop}
     >
-      <View style={[styles.row, containerStyle]}>
+      <View style={[styles.row, { opacity: contentOpacity }, containerStyle]}>
         {leadingIcon ? (
-          <View
-            style={[!isV3 && styles.item, { width: iconWidth }]}
-            pointerEvents="box-none"
-          >
+          <View style={[{ width: iconWidth }]} pointerEvents="box-none">
             <Icon source={leadingIcon} size={24} color={iconColor} />
           </View>
         ) : null}
         <View
           style={[
-            !isV3 && styles.item,
             styles.content,
             { minWidth, maxWidth },
-            isV3 &&
-              (leadingIcon
-                ? styles.md3LeadingIcon
-                : styles.md3WithoutLeadingIcon),
+            leadingIcon ? styles.md3LeadingIcon : styles.md3WithoutLeadingIcon,
             contentStyle,
           ]}
           pointerEvents="none"
@@ -222,18 +220,14 @@ const MenuItem = ({
             variant="bodyLarge"
             selectable={false}
             numberOfLines={1}
-            testID={`${testID}-title`}
-            style={[!isV3 && styles.title, titleTextStyle, titleStyle]}
+            style={[titleTextStyle, titleStyle]}
             maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
           >
             {title}
           </Text>
         </View>
-        {isV3 && trailingIcon ? (
-          <View
-            style={[!isV3 && styles.item, { width: iconWidth }]}
-            pointerEvents="box-none"
-          >
+        {trailingIcon ? (
+          <View style={[{ width: iconWidth }]} pointerEvents="box-none">
             <Icon source={trailingIcon} size={24} color={iconColor} />
           </View>
         ) : null}
@@ -257,12 +251,6 @@ const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
   },
-  title: {
-    fontSize: 16,
-  },
-  item: {
-    marginHorizontal: 8,
-  },
   content: {
     justifyContent: 'center',
   },
diff --git a/src/components/Menu/utils.ts b/src/components/Menu/utils.ts
index c1b6189ba4..177c48feb6 100644
--- a/src/components/Menu/utils.ts
+++ b/src/components/Menu/utils.ts
@@ -1,16 +1,13 @@
-import type { ColorValue } from 'react-native';
-
-import color from 'color';
-
-import { black, white } from '../../styles/themes/v2/colors';
-import type { InternalTheme } from '../../types';
+import { tokens } from '../../theme/tokens';
+import type { InternalTheme } from '../../theme/types';
 import type { IconSource } from '../Icon';
 
+const stateOpacity = tokens.md.sys.state.opacity;
+
 export const MIN_WIDTH = 112;
 export const MAX_WIDTH = 280;
 
 type ContentProps = {
-  isV3: boolean;
   iconWidth: number;
   leadingIcon?: IconSource;
   trailingIcon?: IconSource;
@@ -19,92 +16,40 @@ type ContentProps = {
 type ColorProps = {
   theme: InternalTheme;
   disabled?: boolean;
-  customRippleColor?: ColorValue;
 };
 
-const getDisabledColor = (theme: InternalTheme) => {
-  if (theme.isV3) {
-    return theme.colors.onSurfaceDisabled;
-  }
-
-  return color(theme.dark ? white : black)
-    .alpha(0.32)
-    .rgb()
-    .string();
-};
-
-const getTitleColor = ({ theme, disabled }: ColorProps) => {
-  if (disabled) {
-    return getDisabledColor(theme);
-  }
-
-  if (theme.isV3) {
-    return theme.colors.onSurface;
-  }
-
-  return color(theme.colors.text).alpha(0.87).rgb().string();
+const getTitleColor = ({ theme }: ColorProps) => {
+  return theme.colors.onSurface;
 };
 
-const getIconColor = ({ theme, disabled }: ColorProps) => {
-  if (disabled) {
-    return getDisabledColor(theme);
-  }
-
-  if (theme.isV3) {
-    return theme.colors.onSurfaceVariant;
-  }
-
-  return color(theme.colors.text).alpha(0.54).rgb().string();
+const getIconColor = ({ theme }: ColorProps) => {
+  return theme.colors.onSurfaceVariant;
 };
 
-const getRippleColor = ({
-  theme,
-  customRippleColor,
-}: Omit<ColorProps, 'disabled'>) => {
-  if (customRippleColor) {
-    return customRippleColor;
-  }
+export const getMenuItemColor = ({ theme, disabled }: ColorProps) => {
+  const contentOpacity = disabled
+    ? stateOpacity.disabled
+    : stateOpacity.enabled;
 
-  if (theme.isV3) {
-    return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string();
-  }
-
-  return undefined;
-};
-
-export const getMenuItemColor = ({
-  theme,
-  disabled,
-  customRippleColor,
-}: ColorProps) => {
   return {
     titleColor: getTitleColor({ theme, disabled }),
     iconColor: getIconColor({ theme, disabled }),
-    rippleColor: getRippleColor({ theme, customRippleColor }),
+    contentOpacity,
   };
 };
 
 export const getContentMaxWidth = ({
-  isV3,
   iconWidth,
   leadingIcon,
   trailingIcon,
 }: ContentProps) => {
-  if (isV3) {
-    if (leadingIcon && trailingIcon) {
-      return MAX_WIDTH - (2 * iconWidth + 24);
-    }
-
-    if (leadingIcon || trailingIcon) {
-      return MAX_WIDTH - (iconWidth + 24);
-    }
-
-    return MAX_WIDTH - 12;
+  if (leadingIcon && trailingIcon) {
+    return MAX_WIDTH - (2 * iconWidth + 24);
   }
 
-  if (leadingIcon) {
-    return MAX_WIDTH - (iconWidth + 48);
+  if (leadingIcon || trailingIcon) {
+    return MAX_WIDTH - (iconWidth + 24);
   }
 
-  return MAX_WIDTH - 16;
+  return MAX_WIDTH - 12;
 };
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index dc55c3cf7a..9e1ab8a821 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -1,23 +1,24 @@
 import * as React from 'react';
-import {
-  Animated,
-  Easing,
-  StyleProp,
-  StyleSheet,
-  Pressable,
-  View,
-  ViewStyle,
-} from 'react-native';
+import { Platform, StyleSheet, Pressable, View } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 
+import Animated, {
+  cubicBezier,
+  type AnimatedStyle,
+} from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import useLatestCallback from 'use-latest-callback';
 
+import Portal from './Portal/Portal';
 import Surface from './Surface';
+import type { Props as SurfaceProps, SurfaceStyle } from './Surface';
 import { useInternalTheme } from '../core/theming';
-import type { ThemeProp } from '../types';
+import { tokens } from '../theme/tokens';
+import type { Elevation, ThemeProp } from '../theme/types';
 import { addEventListener } from '../utils/addEventListener';
 import { BackHandler } from '../utils/BackHandler/BackHandler';
-import useAnimatedValue from '../utils/useAnimatedValue';
+
+const scrimAlpha = tokens.md.sys.scrim.alpha;
 
 export type Props = {
   /**
@@ -33,9 +34,22 @@ export type Props = {
    */
   onDismiss?: () => void;
   /**
-   * Accessibility label for the overlay. This is read by the screen reader when the user taps outside the modal.
+   * Accessibility label for dismissing the modal if it's `dismissable`.
+   */
+  dismissAccessibilityLabel?: string;
+  /**
+   * Accessible name for the modal.
+   */
+  'aria-label'?: string;
+  /**
+   * `nativeID` of the element which provides the accessible name for the modal,
+   * such as a title. Supported on web.
    */
-  overlayAccessibilityLabel?: string;
+  'aria-labelledby'?: string;
+  /**
+   * testID for the overlay that is displayed behind the modal content.
+   */
+  overlayTestID?: string;
   /**
    * Determines Whether the modal is visible.
    */
@@ -45,9 +59,25 @@ export type Props = {
    */
   children: React.ReactNode;
   /**
-   * Style for the content of the modal
+   * Style for the content of the modal.
+   *
+   * Background color and border radius should be specified via props instead:
+   * - `contentBackgroundColor`
+   * - `contentBorderRadius`
+   */
+  contentContainerStyle?: StyleProp<SurfaceStyle>;
+  /**
+   * Background color of the modal content. Defaults to transparent.
    */
-  contentContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  contentBackgroundColor?: SurfaceProps['backgroundColor'];
+  /**
+   * Border radius of the modal content.
+   */
+  contentBorderRadius?: SurfaceProps['borderRadius'];
+  /**
+   * Elevation level of the modal content. Defaults to level 1.
+   */
+  contentElevation?: Elevation;
   /**
    * Style for the wrapper of the modal.
    * Use this prop to change the default wrapper style or to override safe area insets with marginTop and marginBottom.
@@ -68,28 +98,32 @@ const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
 /**
  * The Modal component is a simple way to present content above an enclosing view.
- * To render the `Modal` above other components, you'll need to wrap it with the [`Portal`](./Portal) component.
- * Note that this modal is NOT accessible by default; if you need an accessible modal, please use the React Native Modal.
+ * Give the modal an accessible name with `aria-label`.
  *
  * ## Usage
  * ```js
  * import * as React from 'react';
- * import { Modal, Portal, Text, Button, PaperProvider } from 'react-native-paper';
+ * import { Modal, Text, Button, PaperProvider } from 'react-native-paper';
  *
  * const MyComponent = () => {
  *   const [visible, setVisible] = React.useState(false);
  *
  *   const showModal = () => setVisible(true);
  *   const hideModal = () => setVisible(false);
- *   const containerStyle = { backgroundColor: 'white', padding: 20 };
+ *
+ *   const containerStyle = { padding: 20 };
  *
  *   return (
  *     <PaperProvider>
- *       <Portal>
- *         <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>
- *           <Text>Example Modal.  Click outside this area to dismiss.</Text>
- *         </Modal>
- *       </Portal>
+ *       <Modal
+ *         visible={visible}
+ *         onDismiss={hideModal}
+ *         aria-label="Example modal"
+ *         contentBackgroundColor="white"
+ *         contentContainerStyle={containerStyle}
+ *       >
+ *         <Text>Example Modal.  Click outside this area to dismiss.</Text>
+ *       </Modal>
  *       <Button style={{ marginTop: 30 }} onPress={showModal}>
  *         Show
  *       </Button>
@@ -104,59 +138,53 @@ function Modal({
   dismissable = true,
   dismissableBackButton = dismissable,
   visible = false,
-  overlayAccessibilityLabel = 'Close modal',
+  dismissAccessibilityLabel = 'Close modal',
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  overlayTestID,
   onDismiss = () => {},
   children,
   contentContainerStyle,
+  contentBackgroundColor = 'transparent',
+  contentBorderRadius,
+  contentElevation,
   style,
   theme: themeOverrides,
-  testID = 'modal',
+  testID,
 }: Props) {
   const theme = useInternalTheme(themeOverrides);
+
   const onDismissCallback = useLatestCallback(onDismiss);
-  const { scale } = theme.animation;
+
   const { top, bottom } = useSafeAreaInsets();
-  const opacity = useAnimatedValue(visible ? 1 : 0);
+
   const [visibleInternal, setVisibleInternal] = React.useState(visible);
+  const [animatedVisible, setAnimatedVisible] = React.useState(visible);
 
-  const showModalAnimation = React.useCallback(() => {
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration: scale * DEFAULT_DURATION,
-      easing: Easing.out(Easing.cubic),
-      useNativeDriver: true,
-    }).start();
-  }, [opacity, scale]);
-
-  const hideModalAnimation = React.useCallback(() => {
-    Animated.timing(opacity, {
-      toValue: 0,
-      duration: scale * DEFAULT_DURATION,
-      easing: Easing.out(Easing.cubic),
-      useNativeDriver: true,
-    }).start(({ finished }) => {
-      if (!finished) {
-        return;
-      }
+  if (visible && !visibleInternal) {
+    setVisibleInternal(true);
+  }
 
-      setVisibleInternal(false);
-    });
-  }, [opacity, scale]);
+  const { scale } = theme.animation;
 
   React.useEffect(() => {
-    if (visibleInternal === visible) {
-      return;
-    }
+    const timeout = setTimeout(() => setAnimatedVisible(visible), 0);
 
-    if (!visibleInternal && visible) {
-      setVisibleInternal(true);
-      return showModalAnimation();
-    }
+    return () => clearTimeout(timeout);
+  }, [visible]);
 
-    if (visibleInternal && !visible) {
-      return hideModalAnimation();
+  React.useEffect(() => {
+    if (visible || !visibleInternal) {
+      return undefined;
     }
-  }, [visible, showModalAnimation, hideModalAnimation, visibleInternal]);
+
+    const timeout = setTimeout(
+      () => setVisibleInternal(false),
+      scale * DEFAULT_DURATION
+    );
+
+    return () => clearTimeout(timeout);
+  }, [scale, visible, visibleInternal]);
 
   React.useEffect(() => {
     if (!visible) {
@@ -164,7 +192,7 @@ function Modal({
     }
 
     const onHardwareBackPress = () => {
-      if (dismissable || dismissableBackButton) {
+      if (dismissableBackButton) {
         onDismissCallback();
       }
 
@@ -176,56 +204,100 @@ function Modal({
       'hardwareBackPress',
       onHardwareBackPress
     );
+
     return () => subscription.remove();
-  }, [dismissable, dismissableBackButton, onDismissCallback, visible]);
+  }, [dismissableBackButton, onDismissCallback, visible]);
+
+  const transitionTimingFunction = cubicBezier(1 / 3, 1, 2 / 3, 1);
+
+  const backdropTransitionStyle: AnimatedStyle<ViewStyle> = {
+    transitionDuration: scale * DEFAULT_DURATION,
+    transitionProperty: 'opacity',
+    transitionTimingFunction,
+  };
 
-  if (!visibleInternal) {
+  const contentTransitionStyle: AnimatedStyle<ViewStyle> = {
+    transitionProperty: 'opacity',
+    transitionTimingFunction,
+  };
+
+  const backdropStyle: AnimatedStyle<ViewStyle> = {
+    backgroundColor: theme.colors.scrim,
+    opacity: animatedVisible ? scrimAlpha : 0,
+  };
+
+  const contentStyle: AnimatedStyle<ViewStyle> = {
+    opacity: animatedVisible ? 1 : 0,
+  };
+
+  if (!visible && !visibleInternal) {
     return null;
   }
 
   return (
-    <Animated.View
-      pointerEvents={visible ? 'auto' : 'none'}
-      accessibilityViewIsModal
-      accessibilityLiveRegion="polite"
-      style={StyleSheet.absoluteFill}
-      onAccessibilityEscape={onDismissCallback}
-      testID={testID}
-    >
-      <AnimatedPressable
-        accessibilityLabel={overlayAccessibilityLabel}
-        accessibilityRole="button"
-        disabled={!dismissable}
-        onPress={dismissable ? onDismissCallback : undefined}
-        importantForAccessibility="no"
-        style={[
-          styles.backdrop,
-          {
-            backgroundColor: theme.colors?.backdrop,
-            opacity,
-          },
-        ]}
-        testID={`${testID}-backdrop`}
-      />
-      <View
-        style={[
-          styles.wrapper,
-          { marginTop: top, marginBottom: bottom },
-          style,
-        ]}
-        pointerEvents="box-none"
-        testID={`${testID}-wrapper`}
+    <Portal modal={visibleInternal} theme={themeOverrides}>
+      <Animated.View
+        pointerEvents={visible ? 'auto' : 'none'}
+        aria-live="polite"
+        style={StyleSheet.absoluteFill}
+        onAccessibilityEscape={dismissable ? onDismissCallback : undefined}
+        testID={testID}
       >
-        <Surface
-          testID={`${testID}-surface`}
-          theme={theme}
-          style={[{ opacity }, styles.content, contentContainerStyle]}
-          container
+        <AnimatedPressable
+          aria-hidden
+          accessible={false}
+          tabIndex={-1}
+          disabled={!dismissable}
+          onPress={dismissable ? onDismissCallback : undefined}
+          style={[styles.backdrop, backdropStyle, backdropTransitionStyle]}
+          testID={overlayTestID}
+        />
+        <View
+          style={[
+            styles.wrapper,
+            { marginTop: top, marginBottom: bottom },
+            style,
+          ]}
+          pointerEvents="box-none"
         >
-          {children}
-        </Surface>
-      </View>
-    </Animated.View>
+          <Surface
+            role="dialog"
+            aria-modal
+            aria-label={ariaLabel}
+            aria-labelledby={
+              // Only set `aria-labelledby` on web, it's ignored on iOS
+              // On Android, it results in the content being read on opening the dialog,
+              // and then again when the first focusable element receives focus.
+              Platform.OS === 'web' ? ariaLabelledBy : undefined
+            }
+            theme={theme}
+            backgroundColor={contentBackgroundColor}
+            borderRadius={contentBorderRadius}
+            style={[
+              styles.content,
+              contentStyle,
+              contentTransitionStyle,
+              contentContainerStyle,
+            ]}
+            elevation={contentElevation}
+            transitionDuration={scale * DEFAULT_DURATION}
+          >
+            {children}
+            {dismissable ? (
+              // The backdrop is hidden for screen reader users,
+              // so we provide a visually hidden dismiss button.
+              <Pressable
+                role="button"
+                aria-label={dismissAccessibilityLabel}
+                tabIndex={-1}
+                onPress={onDismissCallback}
+                style={styles.dismiss}
+              />
+            ) : null}
+          </Surface>
+        </View>
+      </Animated.View>
+    </Portal>
   );
 }
 
@@ -236,12 +308,15 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   wrapper: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     justifyContent: 'center',
   },
-  // eslint-disable-next-line react-native/no-color-literals
   content: {
-    backgroundColor: 'transparent',
     justifyContent: 'center',
   },
+  dismiss: {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+  },
 });
diff --git a/src/components/Portal/Portal.tsx b/src/components/Portal/Portal.tsx
index d44caf96d6..b11c1c6434 100644
--- a/src/components/Portal/Portal.tsx
+++ b/src/components/Portal/Portal.tsx
@@ -1,24 +1,31 @@
 import * as React from 'react';
 
-import type { InternalTheme } from 'src/types';
-
 import PortalConsumer from './PortalConsumer';
-import PortalHost, { PortalContext, PortalMethods } from './PortalHost';
+import PortalHost, { PortalContext } from './PortalHost';
+import { LocaleProvider, useLocale } from '../../core/locale';
 import {
-  Consumer as SettingsConsumer,
+  SettingsContext,
   Provider as SettingsProvider,
 } from '../../core/settings';
-import { ThemeProvider, withInternalTheme } from '../../core/theming';
+import { ThemeProvider, useInternalTheme } from '../../core/theming';
+import { ReduceMotionContext } from '../../theme/accessibility/ReduceMotionContext';
+import type { ThemeProp } from '../../theme/types';
 
 export type Props = {
   /**
    * Content of the `Portal`.
    */
   children: React.ReactNode;
+  /**
+   * Whether the portal hides items below it from screen readers and focus order.
+   *
+   * Ensure it's set to true only when the modal is open.
+   */
+  modal?: boolean;
   /**
    * @optional
    */
-  theme: InternalTheme;
+  theme?: ThemeProp;
 };
 
 /**
@@ -41,29 +48,27 @@ export type Props = {
  * export default MyComponent;
  * ```
  */
-class Portal extends React.Component<Props> {
-  // @component ./PortalHost.tsx
-  static Host = PortalHost;
+const Portal = ({ children, modal, theme: themeOverrides }: Props) => {
+  const theme = useInternalTheme(themeOverrides);
+  const { direction } = useLocale();
+  const settings = React.useContext(SettingsContext);
+  const manager = React.useContext(PortalContext);
+  const reduceMotion = React.useContext(ReduceMotionContext);
 
-  render() {
-    const { children, theme } = this.props;
+  return (
+    <PortalConsumer manager={manager} modal={modal}>
+      <SettingsProvider value={settings}>
+        <ReduceMotionContext.Provider value={reduceMotion}>
+          <LocaleProvider direction={direction}>
+            <ThemeProvider theme={theme}>{children}</ThemeProvider>
+          </LocaleProvider>
+        </ReduceMotionContext.Provider>
+      </SettingsProvider>
+    </PortalConsumer>
+  );
+};
 
-    return (
-      <SettingsConsumer>
-        {(settings) => (
-          <PortalContext.Consumer>
-            {(manager) => (
-              <PortalConsumer manager={manager as PortalMethods}>
-                <SettingsProvider value={settings}>
-                  <ThemeProvider theme={theme}>{children}</ThemeProvider>
-                </SettingsProvider>
-              </PortalConsumer>
-            )}
-          </PortalContext.Consumer>
-        )}
-      </SettingsConsumer>
-    );
-  }
-}
+// @component ./PortalHost.tsx
+Portal.Host = PortalHost;
 
-export default withInternalTheme(Portal);
+export default Portal;
diff --git a/src/components/Portal/PortalConsumer.tsx b/src/components/Portal/PortalConsumer.tsx
index e933d2b24e..e148265104 100644
--- a/src/components/Portal/PortalConsumer.tsx
+++ b/src/components/Portal/PortalConsumer.tsx
@@ -5,19 +5,20 @@ import type { PortalMethods } from './PortalHost';
 type Props = {
   manager: PortalMethods;
   children: React.ReactNode;
+  modal?: boolean;
 };
 
 export default class PortalConsumer extends React.Component<Props> {
   componentDidMount() {
     this.checkManager();
 
-    this.key = this.props.manager.mount(this.props.children);
+    this.key = this.props.manager.mount(this.props.children, this.props.modal);
   }
 
   componentDidUpdate() {
     this.checkManager();
 
-    this.props.manager.update(this.key, this.props.children);
+    this.props.manager.update(this.key, this.props.children, this.props.modal);
   }
 
   componentWillUnmount() {
diff --git a/src/components/Portal/PortalHost.tsx b/src/components/Portal/PortalHost.tsx
index f884563999..a095d8d58f 100644
--- a/src/components/Portal/PortalHost.tsx
+++ b/src/components/Portal/PortalHost.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
 
 import PortalManager from './PortalManager';
 
@@ -8,16 +7,31 @@ export type Props = {
 };
 
 type Operation =
-  | { type: 'mount'; key: number; children: React.ReactNode }
-  | { type: 'update'; key: number; children: React.ReactNode }
+  | {
+      type: 'mount';
+      key: number;
+      children: React.ReactNode;
+      modal: boolean | undefined;
+    }
+  | {
+      type: 'update';
+      key: number;
+      children: React.ReactNode;
+      modal: boolean | undefined;
+    }
   | { type: 'unmount'; key: number };
 
 export type PortalMethods = {
-  mount: (children: React.ReactNode) => number;
-  update: (key: number, children: React.ReactNode) => void;
+  mount: (children: React.ReactNode, modal: boolean | undefined) => number;
+  update: (
+    key: number,
+    children: React.ReactNode,
+    modal: boolean | undefined
+  ) => void;
   unmount: (key: number) => void;
 };
 
+// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
 export const PortalContext = React.createContext<PortalMethods>(null as any);
 
 /**
@@ -50,15 +64,16 @@ export default class PortalHost extends React.Component<Props> {
     const queue = this.queue;
 
     while (queue.length && manager) {
-      const action = queue.pop();
+      // Replay in the order the operations were recorded, otherwise portals
+      // that mounted in the same commit end up stacked in reverse.
+      const action = queue.shift();
       if (action) {
-        // eslint-disable-next-line default-case
         switch (action.type) {
           case 'mount':
-            manager.mount(action.key, action.children);
+            manager.mount(action.key, action.children, action.modal);
             break;
           case 'update':
-            manager.update(action.key, action.children);
+            manager.update(action.key, action.children, action.modal);
             break;
           case 'unmount':
             manager.unmount(action.key);
@@ -72,31 +87,35 @@ export default class PortalHost extends React.Component<Props> {
     this.manager = manager;
   };
 
-  private mount = (children: React.ReactNode) => {
+  private mount = (children: React.ReactNode, modal: boolean | undefined) => {
     const key = this.nextKey++;
 
     if (this.manager) {
-      this.manager.mount(key, children);
+      this.manager.mount(key, children, modal);
     } else {
-      this.queue.push({ type: 'mount', key, children });
+      this.queue.push({ type: 'mount', key, children, modal });
     }
 
     return key;
   };
 
-  private update = (key: number, children: React.ReactNode) => {
+  private update = (
+    key: number,
+    children: React.ReactNode,
+    modal: boolean | undefined
+  ) => {
     if (this.manager) {
-      this.manager.update(key, children);
+      this.manager.update(key, children, modal);
     } else {
-      const op: Operation = { type: 'mount', key, children };
+      const op: Operation = { type: 'mount', key, children, modal };
       const index = this.queue.findIndex(
-        (o) => o.type === 'mount' || (o.type === 'update' && o.key === key)
+        (o) => (o.type === 'mount' || o.type === 'update') && o.key === key
       );
 
       if (index > -1) {
         this.queue[index] = op;
       } else {
-        this.queue.push(op as Operation);
+        this.queue.push(op);
       }
     }
   };
@@ -122,22 +141,10 @@ export default class PortalHost extends React.Component<Props> {
           unmount: this.unmount,
         }}
       >
-        {/* Need collapsable=false here to clip the elevations, otherwise they appear above Portal components */}
-        <View
-          style={styles.container}
-          collapsable={false}
-          pointerEvents="box-none"
-        >
+        <PortalManager ref={this.setManager}>
           {this.props.children}
-        </View>
-        <PortalManager ref={this.setManager} />
+        </PortalManager>
       </PortalContext.Provider>
     );
   }
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
diff --git a/src/components/Portal/PortalLayer.tsx b/src/components/Portal/PortalLayer.tsx
new file mode 100644
index 0000000000..543685eded
--- /dev/null
+++ b/src/components/Portal/PortalLayer.tsx
@@ -0,0 +1,19 @@
+import { Platform, View } from 'react-native';
+import type { ViewProps } from 'react-native';
+
+export type Props = ViewProps & {
+  inert: boolean;
+};
+
+export default function PortalLayer({ inert, children, ...rest }: Props) {
+  return (
+    <View
+      aria-hidden={inert || undefined}
+      // @ts-expect-error: `ViewProps` doesn't expose the web-specific `inert` prop.
+      inert={Platform.OS === 'web' ? inert || undefined : undefined}
+      {...rest}
+    >
+      {children}
+    </View>
+  );
+}
diff --git a/src/components/Portal/PortalManager.tsx b/src/components/Portal/PortalManager.tsx
index cc2bdbe1a7..307236f17f 100644
--- a/src/components/Portal/PortalManager.tsx
+++ b/src/components/Portal/PortalManager.tsx
@@ -1,33 +1,49 @@
 import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
+
+import PortalLayer from './PortalLayer';
+
+type Props = {
+  children: React.ReactNode;
+};
 
 type State = {
   portals: Array<{
     key: number;
     children: React.ReactNode;
+    modal: boolean | undefined;
   }>;
 };
 
 /**
  * Portal host is the component which actually renders all Portals.
  */
-export default class PortalManager extends React.PureComponent<{}, State> {
+export default class PortalManager extends React.Component<Props, State> {
   state: State = {
     portals: [],
   };
 
-  mount = (key: number, children: React.ReactNode) => {
+  mount = (
+    key: number,
+    children: React.ReactNode,
+    modal: boolean | undefined
+  ) => {
     this.setState((state) => ({
-      portals: [...state.portals, { key, children }],
+      portals: [...state.portals, { key, children, modal }],
     }));
   };
 
-  update = (key: number, children: React.ReactNode) =>
+  update = (
+    key: number,
+    children: React.ReactNode,
+    modal: boolean | undefined
+  ) =>
     this.setState((state) => ({
       portals: state.portals.map((item) => {
         if (item.key === key) {
-          return { ...item, children };
+          return { ...item, children, modal };
         }
+
         return item;
       }),
     }));
@@ -38,17 +54,42 @@ export default class PortalManager extends React.PureComponent<{}, State> {
     }));
 
   render() {
-    return this.state.portals.map(({ key, children }) => (
-      <View
-        key={key}
-        collapsable={
-          false /* Need collapsable=false here to clip the elevations, otherwise they appear above sibling components */
-        }
-        pointerEvents="box-none"
-        style={StyleSheet.absoluteFill}
-      >
-        {children}
-      </View>
-    ));
+    const { portals } = this.state;
+
+    const topmostModalIndex = portals.findLastIndex((portal) => portal.modal);
+
+    return (
+      <>
+        <PortalLayer
+          inert={topmostModalIndex >= 0}
+          style={styles.container}
+          collapsable={
+            false /* Need collapsable=false here to clip the elevations, otherwise they appear above Portal components */
+          }
+          pointerEvents="box-none"
+        >
+          {this.props.children}
+        </PortalLayer>
+        {portals.map(({ key, children }, index) => (
+          <PortalLayer
+            key={key}
+            inert={index < topmostModalIndex}
+            collapsable={
+              false /* Need collapsable=false here to clip the elevations, otherwise they appear above sibling components */
+            }
+            pointerEvents="box-none"
+            style={StyleSheet.absoluteFill}
+          >
+            {children}
+          </PortalLayer>
+        ))}
+      </>
+    );
   }
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
index 790204f4f8..0618e70b88 100644
--- a/src/components/ProgressBar.tsx
+++ b/src/components/ProgressBar.tsx
@@ -1,21 +1,18 @@
 import * as React from 'react';
-import {
-  Animated,
-  I18nManager,
+// eslint-disable-next-line no-restricted-imports -- TODO: migrate ProgressBar to Reanimated.
+import { Animated, Platform, StyleSheet, View } from 'react-native';
+import type {
   LayoutChangeEvent,
-  Platform,
   StyleProp,
-  StyleSheet,
-  View,
+  ViewProps,
   ViewStyle,
 } from 'react-native';
 
-import setColor from 'color';
-
+import { useLocale } from '../core/locale';
 import { useInternalTheme } from '../core/theming';
-import type { ThemeProp } from '../types';
+import type { ThemeProp } from '../theme/types';
 
-export type Props = React.ComponentPropsWithRef<typeof View> & {
+export type Props = ViewProps & {
   /**
    * Animated value (between 0 and 1). This tells the progress bar to rely on this value to animate it.
    * Note: It should not be used in parallel with the `progress` prop.
@@ -55,7 +52,6 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
 
 const INDETERMINATE_DURATION = 2000;
 const INDETERMINATE_MAX_WIDTH = 0.6;
-const { isRTL } = I18nManager;
 
 /**
  * Progress bar is an indicator used to present progress of some activity in the app.
@@ -63,10 +59,10 @@ const { isRTL } = I18nManager;
  * ## Usage
  * ```js
  * import * as React from 'react';
- * import { ProgressBar, MD3Colors } from 'react-native-paper';
+ * import { ProgressBar, Palette } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *   <ProgressBar progress={0.5} color={MD3Colors.error50} />
+ *   <ProgressBar progress={0.5} color={Palette.error50} />
  * );
  *
  * export default MyComponent;
@@ -81,11 +77,12 @@ const ProgressBar = ({
   animatedValue,
   style,
   fillStyle,
-  testID = 'progress-bar',
+  testID,
   ...rest
 }: Props) => {
-  const isWeb = Platform.OS === 'web';
   const theme = useInternalTheme(themeOverrides);
+  const { direction } = useLocale();
+  const isRTL = direction === 'rtl';
   const { current: timer } = React.useRef<Animated.Value>(
     new Animated.Value(0)
   );
@@ -134,7 +131,7 @@ const ProgressBar = ({
           duration: INDETERMINATE_DURATION,
           toValue: 1,
           // Animated.loop does not work if useNativeDriver is true on web
-          useNativeDriver: !isWeb,
+          useNativeDriver: Platform.OS !== 'web',
           isInteraction: false,
         });
       }
@@ -151,7 +148,7 @@ const ProgressBar = ({
         isInteraction: false,
       }).start();
     }
-  }, [fade, scale, indeterminate, timer, progress, isWeb]);
+  }, [fade, scale, indeterminate, timer, progress]);
 
   const stopAnimation = React.useCallback(() => {
     // Stop indeterminate animation
@@ -191,23 +188,19 @@ const ProgressBar = ({
   };
 
   const tintColor = color || theme.colors?.primary;
-  const trackTintColor = theme.isV3
-    ? theme.colors.surfaceVariant
-    : setColor(tintColor).alpha(0.38).rgb().string();
+  const trackTintColor = theme.colors.surfaceVariant;
 
   return (
     <View
       onLayout={onLayout}
       {...rest}
       accessible
-      accessibilityRole="progressbar"
-      accessibilityState={{ busy: visible }}
-      accessibilityValue={
-        indeterminate
-          ? {}
-          : { min: 0, max: 100, now: Math.round(progress * 100) }
-      }
-      style={isWeb && styles.webContainer}
+      role="progressbar"
+      aria-busy={visible}
+      aria-valuemin={indeterminate ? undefined : 0}
+      aria-valuemax={indeterminate ? undefined : 100}
+      aria-valuenow={indeterminate ? undefined : Math.round(progress * 100)}
+      style={Platform.OS === 'web' && styles.webContainer}
       testID={testID}
     >
       <Animated.View
@@ -219,7 +212,6 @@ const ProgressBar = ({
       >
         {width ? (
           <Animated.View
-            testID={`${testID}-fill`}
             style={[
               styles.progressBar,
               {
diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx
index e43fa9c695..af39325c33 100644
--- a/src/components/RadioButton/RadioButton.tsx
+++ b/src/components/RadioButton/RadioButton.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react';
-import { GestureResponderEvent, Platform } from 'react-native';
+import { Platform } from 'react-native';
+import type { GestureResponderEvent } from 'react-native';
 
 import RadioButtonAndroid from './RadioButtonAndroid';
 import RadioButtonIOS from './RadioButtonIOS';
 import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
+import type { ThemeProp } from '../../theme/types';
 
 export type Props = {
   /**
diff --git a/src/components/RadioButton/RadioButtonAndroid.tsx b/src/components/RadioButton/RadioButtonAndroid.tsx
index 515efe5eff..91520db69c 100644
--- a/src/components/RadioButton/RadioButtonAndroid.tsx
+++ b/src/components/RadioButton/RadioButtonAndroid.tsx
@@ -1,14 +1,19 @@
 import * as React from 'react';
+// eslint-disable-next-line no-restricted-imports -- TODO: migrate RadioButtonAndroid to Reanimated.
 import { Animated, StyleSheet, View } from 'react-native';
 
-import { RadioButtonContext, RadioButtonContextType } from './RadioButtonGroup';
-import { handlePress, isChecked } from './utils';
+import { RadioButtonContext } from './RadioButtonGroup';
+import type { RadioButtonContextType } from './RadioButtonGroup';
+import { getSelectionControlColor, handlePress, isChecked } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import type { $RemoveChildren, ThemeProp } from '../../types';
-import { getAndroidSelectionControlColor } from '../Checkbox/utils';
+import type { ThemeProp } from '../../theme/types';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 
-export type Props = $RemoveChildren<typeof TouchableRipple> & {
+export type Props = Omit<
+  React.PropsWithoutRef<TouchableRippleProps>,
+  'children'
+> & {
   /**
    * Value of the radio button
    */
@@ -102,7 +107,7 @@ const RadioButtonAndroid = ({
 
   return (
     <RadioButtonContext.Consumer>
-      {(context?: RadioButtonContextType) => {
+      {(context: RadioButtonContextType | null) => {
         const checked =
           isChecked({
             contextValue: context?.value,
@@ -110,20 +115,18 @@ const RadioButtonAndroid = ({
             value,
           }) === 'checked';
 
-        const { rippleColor, selectionControlColor } =
-          getAndroidSelectionControlColor({
-            theme,
-            disabled,
-            checked,
-            customColor: rest.color,
-            customUncheckedColor: rest.uncheckedColor,
-          });
+        const { selectionControlColor } = getSelectionControlColor({
+          theme,
+          disabled,
+          checked,
+          customColor: rest.color,
+          customUncheckedColor: rest.uncheckedColor,
+        });
 
         return (
           <TouchableRipple
             {...rest}
             borderless
-            rippleColor={rippleColor}
             onPress={
               disabled
                 ? undefined
@@ -136,9 +139,10 @@ const RadioButtonAndroid = ({
                     });
                   }
             }
-            accessibilityRole="radio"
-            accessibilityState={{ disabled, checked }}
-            accessibilityLiveRegion="polite"
+            role="radio"
+            aria-disabled={disabled}
+            aria-checked={checked}
+            aria-live="polite"
             style={styles.container}
             testID={testID}
             theme={theme}
diff --git a/src/components/RadioButton/RadioButtonGroup.tsx b/src/components/RadioButton/RadioButtonGroup.tsx
index 2bdd596561..ef76cd30aa 100644
--- a/src/components/RadioButton/RadioButtonGroup.tsx
+++ b/src/components/RadioButton/RadioButtonGroup.tsx
@@ -21,9 +21,8 @@ export type RadioButtonContextType = {
   onValueChange: (item: string) => void;
 };
 
-export const RadioButtonContext = React.createContext<RadioButtonContextType>(
-  null as any
-);
+export const RadioButtonContext =
+  React.createContext<RadioButtonContextType | null>(null);
 
 /**
  * Radio button group allows to control a group of radio buttons.
@@ -56,7 +55,7 @@ export const RadioButtonContext = React.createContext<RadioButtonContextType>(
  */
 const RadioButtonGroup = ({ value, onValueChange, children }: Props) => (
   <RadioButtonContext.Provider value={{ value, onValueChange }}>
-    <View accessibilityRole="radiogroup">{children}</View>
+    <View role="radiogroup">{children}</View>
   </RadioButtonContext.Provider>
 );
 
diff --git a/src/components/RadioButton/RadioButtonIOS.tsx b/src/components/RadioButton/RadioButtonIOS.tsx
index 64bdde5e44..9ca15a7e4a 100644
--- a/src/components/RadioButton/RadioButtonIOS.tsx
+++ b/src/components/RadioButton/RadioButtonIOS.tsx
@@ -1,15 +1,21 @@
-import * as React from 'react';
-import { GestureResponderEvent, StyleSheet, View } from 'react-native';
+import type * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import type { GestureResponderEvent } from 'react-native';
 
-import { RadioButtonContext, RadioButtonContextType } from './RadioButtonGroup';
+import { RadioButtonContext } from './RadioButtonGroup';
+import type { RadioButtonContextType } from './RadioButtonGroup';
 import { handlePress, isChecked } from './utils';
+import { getSelectionControlIOSColor } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import type { $RemoveChildren, ThemeProp } from '../../types';
-import { getSelectionControlIOSColor } from '../Checkbox/utils';
+import type { ThemeProp } from '../../theme/types';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 
-export type Props = $RemoveChildren<typeof TouchableRipple> & {
+export type Props = Omit<
+  React.PropsWithoutRef<TouchableRippleProps>,
+  'children'
+> & {
   /**
    * Value of the radio button
    */
@@ -60,7 +66,7 @@ const RadioButtonIOS = ({
 
   return (
     <RadioButtonContext.Consumer>
-      {(context?: RadioButtonContextType) => {
+      {(context: RadioButtonContextType | null) => {
         const checked =
           isChecked({
             contextValue: context?.value,
@@ -68,7 +74,7 @@ const RadioButtonIOS = ({
             value,
           }) === 'checked';
 
-        const { checkedColor, rippleColor } = getSelectionControlIOSColor({
+        const { checkedColor } = getSelectionControlIOSColor({
           theme,
           disabled,
           customColor: rest.color,
@@ -79,7 +85,6 @@ const RadioButtonIOS = ({
           <TouchableRipple
             {...rest}
             borderless
-            rippleColor={rippleColor}
             onPress={
               disabled
                 ? undefined
@@ -92,9 +97,10 @@ const RadioButtonIOS = ({
                     });
                   }
             }
-            accessibilityRole="radio"
-            accessibilityState={{ disabled, checked }}
-            accessibilityLiveRegion="polite"
+            role="radio"
+            aria-disabled={disabled}
+            aria-checked={checked}
+            aria-live="polite"
             style={styles.container}
             testID={testID}
             theme={theme}
diff --git a/src/components/RadioButton/RadioButtonItem.tsx b/src/components/RadioButton/RadioButtonItem.tsx
index a68be63e18..b987f7f0e7 100644
--- a/src/components/RadioButton/RadioButtonItem.tsx
+++ b/src/components/RadioButton/RadioButtonItem.tsx
@@ -1,25 +1,23 @@
-import * as React from 'react';
-import {
-  ColorValue,
+import { StyleSheet, View } from 'react-native';
+import type {
   GestureResponderEvent,
   PressableAndroidRippleConfig,
   StyleProp,
-  StyleSheet,
   TextStyle,
-  View,
   ViewStyle,
 } from 'react-native';
 
 import RadioButton from './RadioButton';
 import RadioButtonAndroid from './RadioButtonAndroid';
-import { RadioButtonContext, RadioButtonContextType } from './RadioButtonGroup';
+import { RadioButtonContext } from './RadioButtonGroup';
+import type { RadioButtonContextType } from './RadioButtonGroup';
 import RadioButtonIOS from './RadioButtonIOS';
 import { handlePress, isChecked } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp, MD3TypescaleKey } from '../../types';
-import TouchableRipple, {
-  Props as TouchableRippleProps,
-} from '../TouchableRipple/TouchableRipple';
+import type { ThemeProp, TypescaleKey } from '../../theme/types';
+import { getStateLayer } from '../../theme/utils/state';
+import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
 export type Props = {
@@ -36,7 +34,7 @@ export type Props = {
    */
   disabled?: boolean;
   /**
-   * Type of background drawabale to display the feedback (Android).
+   * Type of background drawable to display the feedback (Android).
    * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: PressableAndroidRippleConfig;
@@ -51,7 +49,7 @@ export type Props = {
   /**
    * Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * Custom color for unchecked radio.
    */
@@ -60,10 +58,6 @@ export type Props = {
    * Custom color for radio.
    */
   color?: string;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
   /**
    * Status of radio button.
    */
@@ -92,7 +86,7 @@ export type Props = {
    *
    *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
    */
-  labelVariant?: keyof typeof MD3TypescaleKey;
+  labelVariant?: TypescaleKey;
   /**
    * Specifies the largest possible scale a label font can reach.
    */
@@ -152,11 +146,10 @@ const RadioButtonItem = ({
   disabled,
   color,
   uncheckedColor,
-  rippleColor,
   status,
   theme: themeOverrides,
   background,
-  accessibilityLabel = label,
+  'aria-label': ariaLabel = label,
   testID,
   mode,
   position = 'trailing',
@@ -184,20 +177,16 @@ const RadioButtonItem = ({
     radioButton = <RadioButton {...radioButtonProps} />;
   }
 
-  const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text;
-  const disabledTextColor = theme.isV3
-    ? theme.colors.onSurfaceDisabled
-    : theme.colors.disabled;
   const textAlign = isLeading ? 'right' : 'left';
 
-  const computedStyle = {
-    color: disabled ? disabledTextColor : textColor,
+  const computedStyle: TextStyle = {
+    ...getStateLayer(theme, 'onSurface', disabled ? 'disabled' : 'enabled'),
     textAlign,
-  } as TextStyle;
+  };
 
   return (
     <RadioButtonContext.Consumer>
-      {(context?: RadioButtonContextType) => {
+      {(context: RadioButtonContextType | null) => {
         const checked =
           isChecked({
             contextValue: context?.value,
@@ -215,29 +204,21 @@ const RadioButtonItem = ({
               })
             }
             onLongPress={onLongPress}
-            accessibilityLabel={accessibilityLabel}
-            accessibilityRole="radio"
-            accessibilityState={{
-              checked,
-              disabled,
-            }}
+            aria-label={ariaLabel}
+            role="radio"
+            aria-checked={checked}
+            aria-disabled={disabled}
             testID={testID}
             disabled={disabled}
             background={background}
             theme={theme}
-            rippleColor={rippleColor}
             hitSlop={hitSlop}
           >
             <View style={[styles.container, style]} pointerEvents="none">
               {isLeading && radioButton}
               <Text
                 variant={labelVariant}
-                style={[
-                  styles.label,
-                  !theme.isV3 && styles.font,
-                  computedStyle,
-                  labelStyle,
-                ]}
+                style={[styles.label, computedStyle, labelStyle]}
                 maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
               >
                 {label}
@@ -270,7 +251,4 @@ const styles = StyleSheet.create({
     flexShrink: 1,
     flexGrow: 1,
   },
-  font: {
-    fontSize: 16,
-  },
 });
diff --git a/src/components/RadioButton/utils.ts b/src/components/RadioButton/utils.ts
index 18eca2a0d7..f8190eb981 100644
--- a/src/components/RadioButton/utils.ts
+++ b/src/components/RadioButton/utils.ts
@@ -1,4 +1,9 @@
-import type { GestureResponderEvent } from 'react-native';
+import type { ColorValue, GestureResponderEvent } from 'react-native';
+
+import { tokens } from '../../theme/tokens';
+import type { InternalTheme } from '../../theme/types';
+
+const stateOpacity = tokens.md.sys.state.opacity;
 
 export const handlePress = ({
   onPress,
@@ -35,3 +40,90 @@ export const isChecked = ({
     return status;
   }
 };
+
+const getIOSCheckedColor = ({
+  theme,
+  disabled,
+  customColor,
+  error,
+}: {
+  theme: InternalTheme;
+  customColor?: ColorValue;
+  disabled?: boolean;
+  error?: boolean;
+}) => {
+  if (disabled) {
+    return theme.colors.primary;
+  }
+
+  if (customColor) {
+    return customColor;
+  }
+
+  if (error) {
+    return theme.colors.error;
+  }
+
+  return theme.colors.primary;
+};
+
+export const getSelectionControlIOSColor = ({
+  theme,
+  disabled,
+  customColor,
+  error,
+}: {
+  theme: InternalTheme;
+  disabled?: boolean;
+  customColor?: ColorValue;
+  error?: boolean;
+}) => {
+  const checkedColor = getIOSCheckedColor({
+    theme,
+    disabled,
+    customColor,
+    error,
+  });
+  const checkedColorOpacity = disabled
+    ? stateOpacity.disabled
+    : stateOpacity.enabled;
+
+  return {
+    checkedColor,
+    checkedColorOpacity,
+  };
+};
+
+export const getSelectionControlColor = ({
+  theme,
+  disabled,
+  checked,
+  customColor,
+  customUncheckedColor,
+  error,
+}: {
+  theme: InternalTheme;
+  checked: boolean;
+  disabled?: boolean;
+  customColor?: ColorValue;
+  customUncheckedColor?: ColorValue;
+  error?: boolean;
+}): { selectionControlColor: ColorValue; selectionControlOpacity: number } => {
+  const opacity = disabled ? stateOpacity.disabled : stateOpacity.enabled;
+  const checkedColor = customColor
+    ? customColor
+    : error
+      ? theme.colors.error
+      : theme.colors.primary;
+  const uncheckedColor = customUncheckedColor
+    ? customUncheckedColor
+    : error
+      ? theme.colors.error
+      : theme.colors.onSurfaceVariant;
+  const color = disabled
+    ? theme.colors.onSurface
+    : checked
+      ? checkedColor
+      : uncheckedColor;
+  return { selectionControlColor: color, selectionControlOpacity: opacity };
+};
diff --git a/src/components/Searchbar.tsx b/src/components/Searchbar.tsx
index 891df22945..02855eef0f 100644
--- a/src/components/Searchbar.tsx
+++ b/src/components/Searchbar.tsx
@@ -1,36 +1,30 @@
 import * as React from 'react';
-import {
-  Animated,
+import { Platform, StyleSheet, TextInput, View } from 'react-native';
+import type {
   ColorValue,
   GestureResponderEvent,
-  I18nManager,
-  Platform,
   StyleProp,
-  StyleSheet,
-  TextInput,
   TextInputProps,
   TextStyle,
-  View,
-  ViewStyle,
 } from 'react-native';
 
-import color from 'color';
-
 import ActivityIndicator from './ActivityIndicator';
 import Divider from './Divider';
 import type { IconSource } from './Icon';
 import IconButton from './IconButton/IconButton';
 import MaterialCommunityIcon from './MaterialCommunityIcon';
 import Surface from './Surface';
+import type { SurfaceStyle } from './Surface';
+import { useLocale } from '../core/locale';
 import { useInternalTheme } from '../core/theming';
-import type { ThemeProp } from '../types';
-import { forwardRef } from '../utils/forwardRef';
+import { cornerNone } from '../theme/tokens/sys/shape';
+import type { Elevation, ThemeProp } from '../theme/types';
 
 interface Style {
   marginRight: number;
 }
 
-export type Props = React.ComponentPropsWithRef<typeof TextInput> & {
+export type Props = Omit<TextInputProps, 'style'> & {
   /**
    * Hint text shown when the input is empty.
    */
@@ -55,11 +49,7 @@ export type Props = React.ComponentPropsWithRef<typeof TextInput> & {
   /**
    * Custom color for icon, default will be derived from theme
    */
-  iconColor?: string;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
+  iconColor?: ColorValue;
   /**
    * Callback to execute if we want the left icon to act as button.
    */
@@ -73,6 +63,10 @@ export type Props = React.ComponentPropsWithRef<typeof TextInput> & {
    * Accessibility label for the button. This is read by the screen reader when the user taps the button.
    */
   searchAccessibilityLabel?: string;
+  /**
+   * testID for the left icon button (see `onIconPress`).
+   */
+  searchTestID?: string;
   /**
    * Custom icon for clear button, default will be icon close. It's visible when `loading` is set to `false`.
    * In v5.x with theme version 3, `clearIcon` is visible only if `right` prop is not defined.
@@ -82,40 +76,42 @@ export type Props = React.ComponentPropsWithRef<typeof TextInput> & {
    * Accessibility label for the button. This is read by the screen reader when the user taps the button.
    */
   clearAccessibilityLabel?: string;
+  /**
+   * testID for the clear button.
+   */
+  clearTestID?: string;
   /**
    * @supported Available in v5.x with theme version 3
-   * Icon name for the right trailering icon button.
+   * Icon name for the right trailing icon button.
    * Works only when `mode` is set to "bar". It won't be displayed if `loading` is set to `true`.
    */
-  traileringIcon?: IconSource;
+  trailingIcon?: IconSource;
   /**
    * @supported Available in v5.x with theme version 3
-   * Custom color for the right trailering icon, default will be derived from theme
+   * Custom color for the right trailing icon, default will be derived from theme
    */
-  traileringIconColor?: string;
+  trailingIconColor?: ColorValue;
   /**
-   * @supported Available in v5.x with theme version 3
-   * Color of the trailering icon ripple effect.
+   * Callback to execute on the right trailing icon button press.
    */
-  traileringRippleColor?: ColorValue;
+  onTrailingIconPress?: (e: GestureResponderEvent) => void;
   /**
-   * @supported Available in v5.x with theme version 3
-   * Callback to execute on the right trailering icon button press.
+   * Accessibility label for the right trailing icon button. This is read by the screen reader when the user taps the button.
    */
-  onTraileringIconPress?: (e: GestureResponderEvent) => void;
+  trailingIconAccessibilityLabel?: string;
   /**
-   * Accessibility label for the right trailering icon button. This is read by the screen reader when the user taps the button.
+   * testID for the right trailing icon button.
    */
-  traileringIconAccessibilityLabel?: string;
+  trailingTestID?: string;
   /**
    * @supported Available in v5.x with theme version 3
    * Callback which returns a React element to display on the right side.
    * Works only when `mode` is set to "bar".
    */
   right?: (props: {
-    color: string;
+    color: ColorValue;
     style: Style;
-    testID: string;
+    testID?: string;
   }) => React.ReactNode;
   /**
    * @supported Available in v5.x with theme version 3
@@ -127,12 +123,12 @@ export type Props = React.ComponentPropsWithRef<typeof TextInput> & {
    * @supported Available in v5.x with theme version 3
    * Changes Searchbar shadow and background on iOS and Android.
    */
-  elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
+  elevation?: Elevation;
   /**
    * Set style of the TextInput component inside the searchbar
    */
   inputStyle?: StyleProp<TextStyle>;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<SurfaceStyle>;
   /**
    * Custom flag for replacing clear button with activity indicator.
    */
@@ -145,6 +141,7 @@ export type Props = React.ComponentPropsWithRef<typeof TextInput> & {
    * @optional
    */
   theme?: ThemeProp;
+  ref?: React.Ref<TextInputHandles>;
 };
 
 type TextInputHandles = Pick<
@@ -176,223 +173,193 @@ type TextInputHandles = Pick<
 
  * ```
  */
-const Searchbar = forwardRef<TextInputHandles, Props>(
-  (
-    {
-      icon,
-      iconColor: customIconColor,
-      rippleColor: customRippleColor,
-      onIconPress,
-      searchAccessibilityLabel = 'search',
-      clearIcon,
-      clearAccessibilityLabel = 'clear',
-      onClearIconPress,
-      traileringIcon,
-      traileringIconColor,
-      traileringIconAccessibilityLabel,
-      traileringRippleColor: customTraileringRippleColor,
-      onTraileringIconPress,
-      right,
-      mode = 'bar',
-      showDivider = true,
-      inputStyle,
-      placeholder,
-      elevation = 0,
-      style,
-      theme: themeOverrides,
-      value,
-      loading = false,
-      testID = 'search-bar',
-      ...rest
-    }: Props,
-    ref
-  ) => {
-    const theme = useInternalTheme(themeOverrides);
-    const root = React.useRef<TextInput>(null);
+const Searchbar = ({
+  icon,
+  iconColor: customIconColor,
+  onIconPress,
+  searchAccessibilityLabel = 'search',
+  searchTestID,
+  clearIcon,
+  clearAccessibilityLabel = 'clear',
+  clearTestID,
+  onClearIconPress,
+  trailingIcon,
+  trailingIconColor,
+  trailingIconAccessibilityLabel,
+  trailingTestID,
+  onTrailingIconPress,
+  right,
+  mode = 'bar',
+  showDivider = true,
+  inputStyle,
+  placeholder,
+  elevation = 0,
+  style,
+  theme: themeOverrides,
+  value,
+  loading = false,
+  testID,
+  ref,
+  ...rest
+}: Props) => {
+  const theme = useInternalTheme(themeOverrides);
 
-    React.useImperativeHandle(ref, () => ({
-      focus: () => root.current?.focus(),
-      clear: () => root.current?.clear(),
-      setNativeProps: (args: TextInputProps) =>
-        root.current?.setNativeProps(args),
-      isFocused: () => root.current?.isFocused() || false,
-      blur: () => root.current?.blur(),
-      setSelection: (start: number, end: number) =>
-        root.current?.setSelection(start, end),
-    }));
+  const { direction } = useLocale();
+  const { colors, fonts } = theme;
 
-    const handleClearPress = (e: any) => {
-      root.current?.clear();
-      rest.onChangeText?.('');
-      onClearIconPress?.(e);
-    };
+  const root = React.useRef<TextInput>(null);
 
-    const { roundness, dark, isV3, fonts } = theme;
+  React.useImperativeHandle(ref, () => ({
+    focus: () => root.current?.focus(),
+    clear: () => root.current?.clear(),
+    setNativeProps: (args: TextInputProps) =>
+      root.current?.setNativeProps(args),
+    isFocused: () => root.current?.isFocused() || false,
+    blur: () => root.current?.blur(),
+    setSelection: (start: number, end: number) =>
+      root.current?.setSelection(start, end),
+  }));
 
-    const placeholderTextColor = isV3
-      ? theme.colors.onSurface
-      : theme.colors?.placeholder;
-    const textColor = isV3 ? theme.colors.onSurfaceVariant : theme.colors.text;
-    const md2IconColor = dark
-      ? textColor
-      : color(textColor).alpha(0.54).rgb().string();
-    const iconColor =
-      customIconColor || (isV3 ? theme.colors.onSurfaceVariant : md2IconColor);
-    const rippleColor =
-      customRippleColor || color(textColor).alpha(0.32).rgb().string();
-    const traileringRippleColor =
-      customTraileringRippleColor ||
-      color(textColor).alpha(0.32).rgb().string();
+  const handleClearPress = (e: any) => {
+    root.current?.clear();
+    rest.onChangeText?.('');
+    onClearIconPress?.(e);
+  };
 
-    const font = isV3
-      ? {
-          ...fonts.bodyLarge,
-          lineHeight: Platform.select({
-            ios: 0,
-            default: fonts.bodyLarge.lineHeight,
-          }),
-        }
-      : theme.fonts.regular;
+  const { dark } = theme;
+
+  const placeholderTextColor = theme.colors.onSurface;
+  const textColor = theme.colors.onSurfaceVariant;
+  const iconColor = customIconColor || theme.colors.onSurfaceVariant;
 
-    const isBarMode = isV3 && mode === 'bar';
-    const shouldRenderTraileringIcon =
-      isBarMode &&
-      traileringIcon &&
-      !loading &&
-      (!value || right !== undefined);
+  const font = {
+    ...fonts.bodyLarge,
+    lineHeight: Platform.select({
+      ios: 0,
+      default: fonts.bodyLarge.lineHeight,
+    }),
+  };
 
-    return (
-      <Surface
+  const isBarMode = mode === 'bar';
+  const inputTextAlign = direction === 'rtl' ? 'right' : 'left';
+  const shouldRenderTrailingIcon =
+    isBarMode && trailingIcon && !loading && (!value || right !== undefined);
+
+  return (
+    <Surface
+      backgroundColor={theme.colors.surfaceContainerHigh}
+      borderRadius={isBarMode ? theme.shapes.corner.extraLarge : cornerNone}
+      style={[styles.container, style]}
+      elevation={elevation}
+      theme={theme}
+    >
+      <IconButton
+        role="button"
+        borderless
+        onPress={onIconPress}
+        iconColor={iconColor}
+        icon={
+          icon ||
+          (({ size, color }) => (
+            <MaterialCommunityIcon
+              name="magnify"
+              color={color}
+              size={size}
+              direction={direction}
+            />
+          ))
+        }
+        theme={theme}
+        aria-label={searchAccessibilityLabel}
+        testID={searchTestID}
+      />
+      <TextInput
         style={[
-          { borderRadius: roundness },
-          !isV3 && styles.elevation,
-          isV3 && {
-            backgroundColor: theme.colors.elevation.level3,
-            borderRadius: roundness * (isBarMode ? 7 : 0),
+          styles.input,
+          {
+            color: textColor,
+            ...font,
+            ...Platform.select({ web: { outline: 'none' } }),
+            textAlign: inputTextAlign,
           },
-          styles.container,
-          style,
+          isBarMode ? styles.barModeInput : styles.viewModeInput,
+          inputStyle,
         ]}
-        testID={`${testID}-container`}
-        {...(theme.isV3 && { elevation })}
-        container
-        theme={theme}
-      >
+        placeholder={placeholder || ''}
+        placeholderTextColor={placeholderTextColor}
+        selectionColor={colors.primary}
+        underlineColorAndroid="transparent"
+        returnKeyType="search"
+        keyboardAppearance={dark ? 'dark' : 'light'}
+        role="searchbox"
+        ref={root}
+        value={value}
+        testID={testID}
+        {...rest}
+      />
+      {loading ? (
+        <ActivityIndicator style={styles.v3Loader} />
+      ) : (
+        // Clear icon should be always rendered within Searchbar – it's transparent,
+        // without touch events, when there is no value. It's done to avoid issues
+        // with the abruptly stopping ripple effect and changing bar width on web,
+        // when clearing the value.
+        <View
+          pointerEvents={value ? 'auto' : 'none'}
+          style={[
+            !value && styles.v3ClearIcon,
+            right !== undefined && styles.v3ClearIconHidden,
+          ]}
+        >
+          <IconButton
+            borderless
+            aria-label={clearAccessibilityLabel}
+            iconColor={value ? iconColor : 'rgba(255, 255, 255, 0)'}
+            onPress={handleClearPress}
+            icon={
+              clearIcon ||
+              (({ size, color }) => (
+                <MaterialCommunityIcon
+                  name="close"
+                  color={color}
+                  size={size}
+                  direction={direction}
+                />
+              ))
+            }
+            role="button"
+            theme={theme}
+            testID={clearTestID}
+          />
+        </View>
+      )}
+      {shouldRenderTrailingIcon ? (
         <IconButton
-          accessibilityRole="button"
+          role="button"
           borderless
-          rippleColor={rippleColor}
-          onPress={onIconPress}
-          iconColor={iconColor}
-          icon={
-            icon ||
-            (({ size, color }) => (
-              <MaterialCommunityIcon
-                name="magnify"
-                color={color}
-                size={size}
-                direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
-              />
-            ))
-          }
-          theme={theme}
-          accessibilityLabel={searchAccessibilityLabel}
-          testID={`${testID}-icon`}
+          onPress={onTrailingIconPress}
+          iconColor={trailingIconColor || colors.onSurfaceVariant}
+          icon={trailingIcon}
+          aria-label={trailingIconAccessibilityLabel}
+          testID={trailingTestID}
         />
-        <TextInput
+      ) : null}
+      {isBarMode &&
+        right?.({ color: textColor, style: styles.rightStyle, testID })}
+      {!isBarMode && showDivider && (
+        <Divider
+          bold
           style={[
-            styles.input,
+            styles.divider,
             {
-              color: textColor,
-              ...font,
-              ...Platform.select({ web: { outline: 'none' } }),
+              backgroundColor: colors.outline,
             },
-            isV3 && (isBarMode ? styles.barModeInput : styles.viewModeInput),
-            inputStyle,
           ]}
-          placeholder={placeholder || ''}
-          placeholderTextColor={placeholderTextColor}
-          selectionColor={theme.colors?.primary}
-          underlineColorAndroid="transparent"
-          returnKeyType="search"
-          keyboardAppearance={dark ? 'dark' : 'light'}
-          accessibilityRole="search"
-          ref={root}
-          value={value}
-          testID={testID}
-          {...rest}
         />
-        {loading ? (
-          <ActivityIndicator
-            testID="activity-indicator"
-            style={isV3 ? styles.v3Loader : styles.loader}
-          />
-        ) : (
-          // Clear icon should be always rendered within Searchbar – it's transparent,
-          // without touch events, when there is no value. It's done to avoid issues
-          // with the abruptly stopping ripple effect and changing bar width on web,
-          // when clearing the value.
-          <View
-            pointerEvents={value ? 'auto' : 'none'}
-            testID={`${testID}-icon-wrapper`}
-            style={[
-              isV3 && !value && styles.v3ClearIcon,
-              isV3 && right !== undefined && styles.v3ClearIconHidden,
-            ]}
-          >
-            <IconButton
-              borderless
-              accessibilityLabel={clearAccessibilityLabel}
-              iconColor={value ? iconColor : 'rgba(255, 255, 255, 0)'}
-              rippleColor={rippleColor}
-              onPress={handleClearPress}
-              icon={
-                clearIcon ||
-                (({ size, color }) => (
-                  <MaterialCommunityIcon
-                    name={isV3 ? 'close' : 'close-circle-outline'}
-                    color={color}
-                    size={size}
-                    direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
-                  />
-                ))
-              }
-              testID={`${testID}-clear-icon`}
-              accessibilityRole="button"
-              theme={theme}
-            />
-          </View>
-        )}
-        {shouldRenderTraileringIcon ? (
-          <IconButton
-            accessibilityRole="button"
-            borderless
-            onPress={onTraileringIconPress}
-            iconColor={traileringIconColor || theme.colors.onSurfaceVariant}
-            rippleColor={traileringRippleColor}
-            icon={traileringIcon}
-            accessibilityLabel={traileringIconAccessibilityLabel}
-            testID={`${testID}-trailering-icon`}
-          />
-        ) : null}
-        {isBarMode &&
-          right?.({ color: textColor, style: styles.rightStyle, testID })}
-        {isV3 && !isBarMode && showDivider && (
-          <Divider
-            bold
-            style={[
-              styles.divider,
-              {
-                backgroundColor: theme.colors.outline,
-              },
-            ]}
-            testID={`${testID}-divider`}
-          />
-        )}
-      </Surface>
-    );
-  }
-);
+      )}
+    </Surface>
+  );
+};
 
 const styles = StyleSheet.create({
   container: {
@@ -404,7 +371,6 @@ const styles = StyleSheet.create({
     fontSize: 18,
     paddingLeft: 8,
     alignSelf: 'stretch',
-    textAlign: I18nManager.getConstants().isRTL ? 'right' : 'left',
     minWidth: 0,
   },
   barModeInput: {
@@ -415,12 +381,6 @@ const styles = StyleSheet.create({
     paddingLeft: 0,
     minHeight: 72,
   },
-  elevation: {
-    elevation: 4,
-  },
-  loader: {
-    margin: 10,
-  },
   v3Loader: {
     marginHorizontal: 16,
   },
diff --git a/src/components/SegmentedButtons/SegmentedButtonItem.tsx b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
index 92623d249c..3b9962a457 100644
--- a/src/components/SegmentedButtons/SegmentedButtonItem.tsx
+++ b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
@@ -1,18 +1,19 @@
 import * as React from 'react';
-import {
-  Animated,
-  ColorValue,
+import { StyleSheet, View } from 'react-native';
+import type {
   GestureResponderEvent,
   PressableAndroidRippleConfig,
   StyleProp,
-  StyleSheet,
   TextStyle,
-  View,
   ViewStyle,
 } from 'react-native';
 
-import color from 'color';
-import type { ThemeProp } from 'src/types';
+import Animated, {
+  ReduceMotion,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
 
 import {
   getSegmentedButtonBorderRadius,
@@ -20,13 +21,20 @@ import {
   getSegmentedButtonDensityPadding,
 } from './utils';
 import { useInternalTheme } from '../../core/theming';
+import { useReduceMotion } from '../../theme/accessibility/ReduceMotionContext';
+import type { ThemeProp } from '../../theme/types';
 import type { IconSource } from '../Icon';
 import Icon from '../Icon';
-import TouchableRipple, {
-  Props as TouchableRippleProps,
-} from '../TouchableRipple/TouchableRipple';
+import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
+const CHECK_SPRING_CONFIG = {
+  stiffness: 230.2,
+  damping: 22,
+  mass: 1,
+};
+
 export type Props = {
   /**
    * Whether the segmented button is checked
@@ -46,23 +54,19 @@ export type Props = {
    * Custom color for checked Text and Icon.
    */
   checkedColor?: string;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
   /**
    * Whether the button is disabled.
    */
   disabled?: boolean;
   /**
-   * Type of background drawabale to display the feedback (Android).
+   * Type of background drawable to display the feedback (Android).
    * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: PressableAndroidRippleConfig;
   /**
    * Accessibility label for the `SegmentedButtonItem`. This is read by the screen reader when the user taps the button.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * Function to execute on press.
    */
@@ -112,14 +116,13 @@ export type Props = {
 
 const SegmentedButtonItem = ({
   checked,
-  accessibilityLabel,
+  'aria-label': ariaLabel,
   disabled,
   style,
   labelStyle,
   showSelectedCheck,
   checkedColor,
   uncheckedColor,
-  rippleColor: customRippleColor,
   background,
   icon,
   testID,
@@ -132,28 +135,30 @@ const SegmentedButtonItem = ({
   hitSlop,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
+  const reduceMotion = useReduceMotion();
 
-  const checkScale = React.useRef(new Animated.Value(0)).current;
+  const checkScale = useSharedValue(0);
 
   React.useEffect(() => {
     if (!showSelectedCheck) {
       return;
     }
-    if (checked) {
-      Animated.spring(checkScale, {
-        toValue: 1,
-        useNativeDriver: true,
-      }).start();
-    } else {
-      Animated.spring(checkScale, {
-        toValue: 0,
-        useNativeDriver: true,
-      }).start();
-    }
-  }, [checked, checkScale, showSelectedCheck]);
 
-  const { roundness, isV3 } = theme;
-  const { borderColor, textColor, borderWidth, backgroundColor } =
+    checkScale.value = withSpring(checked ? 1 : 0, {
+      ...CHECK_SPRING_CONFIG,
+      reduceMotion: reduceMotion ? ReduceMotion.Always : ReduceMotion.Never,
+    });
+  }, [checked, checkScale, reduceMotion, showSelectedCheck]);
+
+  const checkAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: checkScale.value }],
+  }));
+
+  const iconAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: label ? 1 - checkScale.value : 1 }],
+  }));
+
+  const { borderColor, textColor, textOpacity, borderWidth, backgroundColor } =
     getSegmentedButtonColors({
       checked,
       theme,
@@ -162,30 +167,20 @@ const SegmentedButtonItem = ({
       uncheckedColor,
     });
 
-  const borderRadius = (isV3 ? 5 : 1) * roundness;
+  const borderRadius = theme.shapes.corner.largeIncreased;
+
   const segmentBorderRadius = getSegmentedButtonBorderRadius({
     theme,
     segment,
   });
-  const rippleColor =
-    customRippleColor || color(textColor).alpha(0.12).rgb().string();
 
   const showIcon = !icon ? false : label && checked ? !showSelectedCheck : true;
   const showCheckedIcon = checked && showSelectedCheck;
 
-  const iconSize = isV3 ? 18 : 16;
+  const iconSize = 18;
+
   const iconStyle = {
     marginRight: label ? 5 : showCheckedIcon ? 3 : 0,
-    ...(label && {
-      transform: [
-        {
-          scale: checkScale.interpolate({
-            inputRange: [0, 1],
-            outputRange: [1, 0],
-          }),
-        },
-      ],
-    }),
   };
 
   const buttonStyle: ViewStyle = {
@@ -195,18 +190,16 @@ const SegmentedButtonItem = ({
     borderRadius,
     ...segmentBorderRadius,
   };
+
   const paddingVertical = getSegmentedButtonDensityPadding({ density });
+
   const rippleStyle: ViewStyle = {
     borderRadius,
     ...segmentBorderRadius,
   };
+
   const labelTextStyle: TextStyle = {
-    ...(!isV3
-      ? {
-          textTransform: 'uppercase',
-          fontWeight: '500',
-        }
-      : theme.fonts.labelLarge),
+    ...theme.fonts.labelLarge,
     color: textColor,
   };
 
@@ -215,28 +208,27 @@ const SegmentedButtonItem = ({
       <TouchableRipple
         borderless
         onPress={onPress}
-        accessibilityLabel={accessibilityLabel}
-        accessibilityState={{ disabled, checked }}
-        accessibilityRole="button"
+        aria-label={ariaLabel}
+        aria-disabled={disabled}
+        aria-checked={checked}
+        role="button"
         disabled={disabled}
-        rippleColor={rippleColor}
         testID={testID}
         style={rippleStyle}
         background={background}
         theme={theme}
         hitSlop={hitSlop}
       >
-        <View style={[styles.content, { paddingVertical }]}>
+        <View
+          style={[styles.content, { paddingVertical, opacity: textOpacity }]}
+        >
           {showCheckedIcon ? (
-            <Animated.View
-              testID={`${testID}-check-icon`}
-              style={[iconStyle, { transform: [{ scale: checkScale }] }]}
-            >
+            <Animated.View style={[iconStyle, checkAnimatedStyle]}>
               <Icon source={'check'} size={iconSize} color={textColor} />
             </Animated.View>
           ) : null}
           {showIcon ? (
-            <Animated.View testID={`${testID}-icon`} style={iconStyle}>
+            <Animated.View style={[iconStyle, iconAnimatedStyle]}>
               <Icon source={icon} size={iconSize} color={textColor} />
             </Animated.View>
           ) : null}
@@ -246,7 +238,6 @@ const SegmentedButtonItem = ({
             selectable={false}
             numberOfLines={1}
             maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
-            testID={`${testID}-label`}
           >
             {label}
           </Text>
diff --git a/src/components/SegmentedButtons/SegmentedButtons.tsx b/src/components/SegmentedButtons/SegmentedButtons.tsx
index 3cca92351a..486c8f1009 100644
--- a/src/components/SegmentedButtons/SegmentedButtons.tsx
+++ b/src/components/SegmentedButtons/SegmentedButtons.tsx
@@ -1,24 +1,21 @@
-import * as React from 'react';
-import {
+import { StyleSheet, View } from 'react-native';
+import type {
   GestureResponderEvent,
   StyleProp,
-  StyleSheet,
   TextStyle,
-  View,
   ViewStyle,
 } from 'react-native';
 
-import type { ThemeProp } from 'src/types';
-
 import SegmentedButtonItem from './SegmentedButtonItem';
 import { getDisabledSegmentedButtonStyle } from './utils';
 import { useInternalTheme } from '../../core/theming';
+import type { ThemeProp } from '../../theme/types';
 import type { IconSource } from '../Icon';
 
 type ConditionalValue<T extends string = string> =
   | {
       /**
-       * Array of the currently selected segmented button values.
+       * Currently selected segmented button value or values.
        */
       value: T[];
       /**
@@ -32,7 +29,7 @@ type ConditionalValue<T extends string = string> =
     }
   | {
       /**
-       * Value of the currently selected segmented button.
+       * Currently selected segmented button value or values.
        */
       value: T;
       /**
@@ -52,7 +49,7 @@ export type Props<T extends string = string> = {
    * - `value`: value of button (required)
    * - `icon`: icon to display for the item
    * - `disabled`: whether the button is disabled
-   * - `accessibilityLabel`: acccessibility label for the button. This is read by the screen reader when the user taps the button.
+   * - `aria-label`: accessibility label for the button. This is read by the screen reader when the user taps the button.
    * - `checkedColor`: custom color for checked Text and Icon
    * - `uncheckedColor`: custom color for unchecked Text and Icon
    * - `onPress`: callback that is called when button is pressed
@@ -65,7 +62,7 @@ export type Props<T extends string = string> = {
     value: T;
     icon?: IconSource;
     disabled?: boolean;
-    accessibilityLabel?: string;
+    'aria-label'?: string;
     checkedColor?: string;
     uncheckedColor?: string;
     onPress?: (event: GestureResponderEvent) => void;
diff --git a/src/components/SegmentedButtons/utils.ts b/src/components/SegmentedButtons/utils.ts
index 254f0ebc95..5698731f87 100644
--- a/src/components/SegmentedButtons/utils.ts
+++ b/src/components/SegmentedButtons/utils.ts
@@ -1,9 +1,9 @@
-import { StyleSheet, ViewStyle } from 'react-native';
+import type { ViewStyle } from 'react-native';
 
-import color from 'color';
+import { tokens } from '../../theme/tokens';
+import type { InternalTheme } from '../../theme/types';
 
-import { black, white } from '../../styles/themes/v2/colors';
-import type { InternalTheme } from '../../types';
+const stateOpacity = tokens.md.sys.state.opacity;
 
 type BaseProps = {
   theme: InternalTheme;
@@ -60,7 +60,6 @@ export const getDisabledSegmentedButtonStyle = ({
 
 export const getSegmentedButtonBorderRadius = ({
   segment,
-  theme,
 }: {
   theme: InternalTheme;
   segment?: 'first' | 'last';
@@ -69,7 +68,7 @@ export const getSegmentedButtonBorderRadius = ({
     return {
       borderTopRightRadius: 0,
       borderBottomRightRadius: 0,
-      ...(theme.isV3 && { borderEndWidth: 0 }),
+      borderEndWidth: 0,
     };
   } else if (segment === 'last') {
     return {
@@ -79,51 +78,29 @@ export const getSegmentedButtonBorderRadius = ({
   } else {
     return {
       borderRadius: 0,
-      ...(theme.isV3 && { borderEndWidth: 0 }),
+      borderEndWidth: 0,
     };
   }
 };
 
 const getSegmentedButtonBackgroundColor = ({ checked, theme }: BaseProps) => {
   if (checked) {
-    if (theme.isV3) {
-      return theme.colors.secondaryContainer;
-    } else {
-      return color(theme.colors.primary).alpha(0.12).rgb().string();
-    }
+    return theme.colors.secondaryContainer;
   }
   return 'transparent';
 };
 
-const getSegmentedButtonBorderColor = ({
-  theme,
-  disabled,
-  checked,
-}: BaseProps) => {
-  if (theme.isV3) {
-    if (disabled) {
-      return theme.colors.surfaceDisabled;
-    }
-    return theme.colors.outline;
-  }
-  if (checked) {
-    return theme.colors.primary;
+const getSegmentedButtonBorderColor = ({ theme, disabled }: BaseProps) => {
+  if (disabled) {
+    return theme.colors.outlineVariant;
   }
-
-  return color(theme.dark ? white : black)
-    .alpha(0.29)
-    .rgb()
-    .string();
+  return theme.colors.outline;
 };
 
 const getSegmentedButtonBorderWidth = ({
-  theme,
+  theme: _t,
 }: Omit<BaseProps, 'disabled' | 'checked'>) => {
-  if (theme.isV3) {
-    return 1;
-  }
-
-  return StyleSheet.hairlineWidth;
+  return 1;
 };
 
 const getSegmentedButtonTextColor = ({
@@ -133,21 +110,13 @@ const getSegmentedButtonTextColor = ({
   checkedColor,
   uncheckedColor,
 }: SegmentedButtonProps) => {
-  if (theme.isV3) {
-    if (disabled) {
-      return theme.colors.onSurfaceDisabled;
-    }
-    if (checked) {
-      return checkedColor ?? theme.colors.onSecondaryContainer;
-    }
-    return uncheckedColor ?? theme.colors.onSurface;
-  }
-
   if (disabled) {
-    return theme.colors.disabled;
+    return theme.colors.onSurface;
+  }
+  if (checked) {
+    return checkedColor ?? theme.colors.onSecondaryContainer;
   }
-  // Primary color is used for checked state too.
-  return theme.colors.primary;
+  return uncheckedColor ?? theme.colors.onSurface;
 };
 
 export const getSegmentedButtonColors = ({
@@ -175,5 +144,7 @@ export const getSegmentedButtonColors = ({
   });
   const borderWidth = getSegmentedButtonBorderWidth({ theme });
 
-  return { backgroundColor, borderColor, textColor, borderWidth };
+  const textOpacity = disabled ? stateOpacity.disabled : stateOpacity.enabled;
+
+  return { backgroundColor, borderColor, textColor, textOpacity, borderWidth };
 };
diff --git a/src/components/Snackbar.tsx b/src/components/Snackbar.tsx
index d11bc91a62..fac1f7a049 100644
--- a/src/components/Snackbar.tsx
+++ b/src/components/Snackbar.tsx
@@ -1,28 +1,32 @@
 import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+
 import {
-  Animated,
-  ColorValue,
   Easing,
-  I18nManager,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
-
+  interpolate,
+  ReduceMotion,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { scheduleOnRN } from 'react-native-worklets';
 import useLatestCallback from 'use-latest-callback';
 
 import Button from './Button/Button';
+import type { Props as ButtonProps } from './Button/Button';
 import type { IconSource } from './Icon';
 import IconButton from './IconButton/IconButton';
 import MaterialCommunityIcon from './MaterialCommunityIcon';
 import Surface from './Surface';
+import type { SurfaceStyle } from './Surface';
 import Text from './Typography/Text';
+import { useLocale } from '../core/locale';
 import { useInternalTheme } from '../core/theming';
-import type { $Omit, $RemoveChildren, ThemeProp } from '../types';
+import type { Elevation, ThemeProp } from '../theme/types';
 
-export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
+export type Props = Omit<ViewProps, 'style'> & {
   /**
    * Whether the Snackbar is currently visible.
    */
@@ -32,7 +36,7 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * - `label` - Label of the action button
    * - `onPress` - Callback that is called when action button is pressed.
    */
-  action?: $RemoveChildren<typeof Button> & {
+  action?: Omit<React.PropsWithoutRef<ButtonProps>, 'children'> & {
     label: string;
   };
   /**
@@ -41,12 +45,6 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    */
   icon?: IconSource;
   /**
-   * @supported Available in v5.x with theme version 3
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
-  /**
-   * @supported Available in v5.x with theme version 3
    * Function to execute on icon button press. The icon button appears only when this prop is specified.
    */
   onIconPress?: () => void;
@@ -55,6 +53,10 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Accessibility label for the icon button. This is read by the screen reader when the user taps the button.
    */
   iconAccessibilityLabel?: string;
+  /**
+   * testID for the icon button.
+   */
+  iconTestID?: string;
   /**
    * The duration for which the Snackbar is shown.
    */
@@ -71,7 +73,7 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * @supported Available in v5.x with theme version 3
    * Changes Snackbar shadow and background on iOS and Android.
    */
-  elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
+  elevation?: Elevation;
   /**
    * Specifies the largest possible scale a text font can reach.
    */
@@ -84,7 +86,7 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Style for the content of the snackbar
    */
   contentStyle?: StyleProp<ViewStyle>;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<SurfaceStyle>;
   ref?: React.RefObject<View>;
   /**
    * @optional
@@ -152,6 +154,7 @@ const Snackbar = ({
   icon,
   onIconPress,
   iconAccessibilityLabel = 'Close icon',
+  iconTestID,
   duration = DURATION_MEDIUM,
   onDismiss,
   children,
@@ -161,89 +164,89 @@ const Snackbar = ({
   contentStyle,
   theme: themeOverrides,
   maxFontSizeMultiplier,
-  rippleColor,
   testID,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
+
+  const { direction } = useLocale();
+
   const { bottom, right, left } = useSafeAreaInsets();
 
-  const { current: opacity } = React.useRef<Animated.Value>(
-    new Animated.Value(0.0)
+  const opacity = useSharedValue(0);
+
+  const hideTimeout = React.useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined
   );
-  const hideTimeout = React.useRef<NodeJS.Timeout | undefined>(undefined);
+  const isMounted = React.useRef(true);
 
   const [hidden, setHidden] = React.useState(!visible);
 
   const { scale } = theme.animation;
 
-  const animateShow = useLatestCallback(() => {
-    if (hideTimeout.current) clearTimeout(hideTimeout.current);
-
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration: 200 * scale,
-      easing: Easing.out(Easing.ease),
-      useNativeDriver: true,
-    }).start(({ finished }) => {
-      if (finished) {
-        const isInfinity =
-          duration === Number.POSITIVE_INFINITY ||
-          duration === Number.NEGATIVE_INFINITY;
-
-        if (!isInfinity) {
-          hideTimeout.current = setTimeout(
-            onDismiss,
-            duration
-          ) as unknown as NodeJS.Timeout;
-        }
-      }
-    });
-  });
-
-  const handleOnVisible = useLatestCallback(() => {
-    // show
+  if (visible && hidden) {
     setHidden(false);
+  }
+
+  const handleShowAnimationFinished = useLatestCallback((finished: boolean) => {
+    if (!finished || !visible || !isMounted.current) {
+      return;
+    }
+
+    const isInfinity =
+      duration === Number.POSITIVE_INFINITY ||
+      duration === Number.NEGATIVE_INFINITY;
+
+    if (!isInfinity) {
+      hideTimeout.current = setTimeout(onDismiss, duration);
+    }
   });
 
-  const handleOnHidden = useLatestCallback(() => {
-    // hide
+  React.useEffect(() => {
     if (hideTimeout.current) {
       clearTimeout(hideTimeout.current);
+      hideTimeout.current = undefined;
     }
 
-    Animated.timing(opacity, {
-      toValue: 0,
-      duration: 100 * scale,
-      useNativeDriver: true,
-    }).start(({ finished }) => {
-      if (finished) {
-        setHidden(true);
+    opacity.value = withTiming(
+      visible ? 1 : 0,
+      {
+        duration: (visible ? 200 : 100) * scale,
+        easing: visible ? Easing.out(Easing.ease) : Easing.inOut(Easing.ease),
+        reduceMotion: ReduceMotion.Never,
+      },
+      (finished) => {
+        if (visible) {
+          scheduleOnRN(handleShowAnimationFinished, finished ?? false);
+        } else if (finished) {
+          scheduleOnRN(setHidden, true);
+        }
       }
-    });
-  });
+    );
+  }, [handleShowAnimationFinished, opacity, scale, visible]);
 
   React.useEffect(() => {
-    if (!hidden) {
-      animateShow();
-    }
-  }, [animateShow, hidden]);
+    isMounted.current = true;
 
-  React.useEffect(() => {
     return () => {
-      if (hideTimeout.current) clearTimeout(hideTimeout.current);
+      isMounted.current = false;
+
+      if (hideTimeout.current) {
+        clearTimeout(hideTimeout.current);
+      }
     };
   }, []);
 
-  React.useLayoutEffect(() => {
-    if (visible) {
-      handleOnVisible();
-    } else {
-      handleOnHidden();
-    }
-  }, [visible, handleOnVisible, handleOnHidden]);
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [
+      {
+        scale: visible ? interpolate(opacity.value, [0, 1], [0.9, 1]) : 1,
+      },
+    ],
+  }));
 
-  const { colors, roundness, isV3 } = theme;
+  const { colors } = theme;
 
   if (hidden) {
     return null;
@@ -253,15 +256,14 @@ const Snackbar = ({
     style: actionStyle,
     label: actionLabel,
     onPress: onPressAction,
-    rippleColor: actionRippleColor,
     ...actionProps
   } = action || {};
 
-  const buttonTextColor = isV3 ? colors.inversePrimary : colors.accent;
-  const textColor = isV3 ? colors.inverseOnSurface : colors?.surface;
-  const backgroundColor = isV3 ? colors.inverseSurface : colors?.onSurface;
+  const buttonTextColor = colors.inversePrimary;
+  const textColor = colors.inverseOnSurface;
+  const backgroundColor = colors.inverseSurface;
 
-  const isIconButton = isV3 && onIconPress;
+  const isIconButton = Boolean(onIconPress);
 
   const marginLeft = action ? -12 : -16;
 
@@ -270,26 +272,21 @@ const Snackbar = ({
     paddingHorizontal: Math.max(left, right),
   };
 
-  const renderChildrenWithWrapper = () => {
-    if (typeof children === 'string') {
-      return (
-        <Text
-          variant="bodyMedium"
-          style={[styles.content, { color: textColor }]}
-          maxFontSizeMultiplier={maxFontSizeMultiplier}
-        >
-          {children}
-        </Text>
-      );
-    }
-
-    return (
+  const content =
+    typeof children === 'string' ? (
+      <Text
+        variant="bodyMedium"
+        style={[styles.content, { color: textColor }]}
+        maxFontSizeMultiplier={maxFontSizeMultiplier}
+      >
+        {children}
+      </Text>
+    ) : (
       <View style={[styles.content, contentStyle]}>
         {/* View is added to allow multiple lines support for Text component as children */}
         <View>{children}</View>
       </View>
     );
-  };
 
   return (
     <View
@@ -297,35 +294,16 @@ const Snackbar = ({
       style={[styles.wrapper, wrapperPaddings, wrapperStyle]}
     >
       <Surface
-        pointerEvents="box-none"
-        accessibilityLiveRegion="polite"
+        aria-live="polite"
         theme={theme}
-        style={[
-          !isV3 && styles.elevation,
-          styles.container,
-          {
-            backgroundColor,
-            borderRadius: roundness,
-            opacity: opacity,
-            transform: [
-              {
-                scale: visible
-                  ? opacity.interpolate({
-                      inputRange: [0, 1],
-                      outputRange: [0.9, 1],
-                    })
-                  : 1,
-              },
-            ],
-          },
-          style,
-        ]}
+        backgroundColor={backgroundColor}
+        borderRadius={theme.shapes.corner.extraSmall}
+        style={[styles.container, animatedStyle, style]}
         testID={testID}
-        container
-        {...(isV3 && { elevation })}
+        elevation={elevation}
         {...rest}
       >
-        {renderChildrenWithWrapper()}
+        {content}
         {(action || isIconButton) && (
           <View style={[styles.actionsContainer, { marginLeft }]}>
             {action ? (
@@ -336,10 +314,9 @@ const Snackbar = ({
                 }}
                 style={[styles.button, actionStyle]}
                 textColor={buttonTextColor}
-                compact={!isV3}
+                compact={false}
                 mode="text"
                 theme={theme}
-                rippleColor={actionRippleColor}
                 {...actionProps}
               >
                 {actionLabel}
@@ -347,11 +324,10 @@ const Snackbar = ({
             ) : null}
             {isIconButton ? (
               <IconButton
-                accessibilityRole="button"
+                role="button"
                 borderless
                 onPress={onIconPress}
-                iconColor={theme.colors.inverseOnSurface}
-                rippleColor={rippleColor}
+                iconColor={colors.inverseOnSurface}
                 theme={theme}
                 icon={
                   icon ||
@@ -361,16 +337,14 @@ const Snackbar = ({
                         name="close"
                         color={color}
                         size={size}
-                        direction={
-                          I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'
-                        }
+                        direction={direction}
                       />
                     );
                   })
                 }
-                accessibilityLabel={iconAccessibilityLabel}
+                aria-label={iconAccessibilityLabel}
                 style={styles.icon}
-                testID={`${testID}-icon`}
+                testID={iconTestID}
               />
             ) : null}
           </View>
@@ -405,8 +379,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     margin: 8,
-    borderRadius: 4,
     minHeight: 48,
+    pointerEvents: 'box-none',
   },
   content: {
     marginHorizontal: 16,
@@ -423,9 +397,6 @@ const styles = StyleSheet.create({
     marginRight: 8,
     marginLeft: 4,
   },
-  elevation: {
-    elevation: 6,
-  },
   icon: {
     width: 40,
     height: 40,
diff --git a/src/components/Surface.tsx b/src/components/Surface.tsx
index 3b46d099e1..a91fd938d5 100644
--- a/src/components/Surface.tsx
+++ b/src/components/Surface.tsx
@@ -1,241 +1,147 @@
 import * as React from 'react';
-import {
-  Animated,
-  Platform,
-  ShadowStyleIOS,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
+import type { ColorValue, StyleProp, ViewProps, ViewStyle } from 'react-native';
+
+import Animated, {
+  cubicBezier,
+  isSharedValue,
+  type AnimatedStyle,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
 
 import { useInternalTheme } from '../core/theming';
-import overlay, { isAnimatedValue } from '../styles/overlay';
-import shadow from '../styles/shadow';
-import type { ThemeProp, MD3Elevation } from '../types';
-import { forwardRef } from '../utils/forwardRef';
-import { splitStyles } from '../utils/splitStyles';
+import { androidElevationLevels, shadow } from '../theme/tokens/sys/elevation';
+import type { Elevation, ThemeProp } from '../theme/types';
+
+type AnimatedStyleProp<Key extends keyof ViewStyle> = Extract<
+  AnimatedStyle<Required<Pick<ViewStyle, Key>>>,
+  Record<Key, unknown>
+>[Key];
 
-type Elevation = 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
+type BorderRadius = AnimatedStyleProp<'borderRadius'>;
 
-export type Props = Omit<React.ComponentPropsWithRef<typeof View>, 'style'> & {
+type SurfaceVisualProps = {
+  /**
+   * Background color of the Surface. Overrides the color derived from
+   * `elevation`.
+   */
+  backgroundColor?: ColorValue;
+  /**
+   * Radius of every corner of the Surface.
+   */
+  borderRadius?: BorderRadius;
+  /**
+   * Radius of the bottom-end corner of the Surface.
+   */
+  borderBottomEndRadius?: BorderRadius;
+  /**
+   * Radius of the bottom-left corner of the Surface.
+   */
+  borderBottomLeftRadius?: BorderRadius;
+  /**
+   * Radius of the bottom-right corner of the Surface.
+   */
+  borderBottomRightRadius?: BorderRadius;
+  /**
+   * Radius of the bottom-start corner of the Surface.
+   */
+  borderBottomStartRadius?: BorderRadius;
+  /**
+   * Radius of the end-end corner of the Surface.
+   */
+  borderEndEndRadius?: BorderRadius;
+  /**
+   * Radius of the end-start corner of the Surface.
+   */
+  borderEndStartRadius?: BorderRadius;
+  /**
+   * Radius of the start-end corner of the Surface.
+   */
+  borderStartEndRadius?: BorderRadius;
   /**
-   * Content of the `Surface`.
+   * Radius of the start-start corner of the Surface.
    */
-  children: React.ReactNode;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  borderStartStartRadius?: BorderRadius;
   /**
-   * @supported Available in v5.x with theme version 3
-   * Changes shadows and background on iOS and Android.
-   * Used to create UI hierarchy between components.
-   *
-   * Note: If `mode` is set to `flat`, Surface doesn't have a shadow.
-   *
-   * Note: In version 2 the `elevation` prop was accepted via `style` prop i.e. `style={{ elevation: 4 }}`.
-   * It's no longer supported with theme version 3 and you should use `elevation` property instead.
+   * Radius of the top-end corner of the Surface.
    */
-  elevation?: Elevation;
+  borderTopEndRadius?: BorderRadius;
   /**
-   * @supported Available in v5.x with theme version 3
-   * Mode of the Surface.
-   * - `elevated` - Surface with a shadow and background color corresponding to set `elevation` value.
-   * - `flat` - Surface without a shadow, with the background color corresponding to set `elevation` value.
+   * Radius of the top-left corner of the Surface.
    */
-  mode?: 'flat' | 'elevated';
+  borderTopLeftRadius?: BorderRadius;
   /**
-   * @optional
+   * Radius of the top-right corner of the Surface.
    */
-  theme?: ThemeProp;
+  borderTopRightRadius?: BorderRadius;
   /**
-   * TestID used for testing purposes
+   * Radius of the top-start corner of the Surface.
    */
-  testID?: string;
-  ref?: React.RefObject<View>;
+  borderTopStartRadius?: BorderRadius;
   /**
-   * @internal
+   * Corner curve of the Surface on iOS.
    */
-  container?: boolean;
+  borderCurve?: ViewStyle['borderCurve'];
 };
 
-const MD2Surface = forwardRef<View, Props>(
-  ({ style, theme: overrideTheme, ...rest }: Omit<Props, 'elevation'>, ref) => {
-    const { elevation = 4 } = (StyleSheet.flatten(style) || {}) as ViewStyle;
-    const { dark: isDarkTheme, mode, colors } = useInternalTheme(overrideTheme);
-
-    return (
-      <Animated.View
-        ref={ref}
-        {...rest}
-        style={[
-          {
-            backgroundColor:
-              isDarkTheme && mode === 'adaptive'
-                ? overlay(elevation, colors?.surface)
-                : colors?.surface,
-          },
-          elevation ? shadow(elevation) : null,
-          style,
-        ]}
-      />
-    );
-  }
-);
-
-const outerLayerStyleProperties: (keyof ViewStyle)[] = [
-  'position',
-  'alignSelf',
-  'top',
-  'right',
-  'bottom',
-  'left',
-  'start',
-  'end',
-  'flex',
-  'flexShrink',
-  'flexGrow',
-  'width',
-  'height',
-  'transform',
-  'opacity',
-];
-
-const shadowColor = '#000';
-const iOSShadowOutputRanges = [
-  {
-    shadowOpacity: 0.15,
-    height: [0, 1, 2, 4, 6, 8],
-    shadowRadius: [0, 3, 6, 8, 10, 12],
-  },
-  {
-    shadowOpacity: 0.3,
-    height: [0, 1, 1, 1, 2, 4],
-    shadowRadius: [0, 1, 2, 3, 3, 4],
-  },
-];
-const inputRange = [0, 1, 2, 3, 4, 5];
-function getStyleForShadowLayer(
-  elevation: Elevation,
-  layer: 0 | 1
-): Animated.WithAnimatedValue<ShadowStyleIOS> {
-  if (isAnimatedValue(elevation)) {
-    return {
-      shadowColor,
-      shadowOpacity: elevation.interpolate({
-        inputRange: [0, 1],
-        outputRange: [0, iOSShadowOutputRanges[layer].shadowOpacity],
-        extrapolate: 'clamp',
-      }),
-      shadowOffset: {
-        width: 0,
-        height: elevation.interpolate({
-          inputRange,
-          outputRange: iOSShadowOutputRanges[layer].height,
-        }),
-      },
-      shadowRadius: elevation.interpolate({
-        inputRange,
-        outputRange: iOSShadowOutputRanges[layer].shadowRadius,
-      }),
-    };
-  }
-
-  return {
-    shadowColor,
-    shadowOpacity: elevation ? iOSShadowOutputRanges[layer].shadowOpacity : 0,
-    shadowOffset: {
-      width: 0,
-      height: iOSShadowOutputRanges[layer].height[elevation],
-    },
-    shadowRadius: iOSShadowOutputRanges[layer].shadowRadius[elevation],
+export type SurfaceStyle = AnimatedStyle<
+  Omit<ViewStyle, keyof SurfaceVisualProps | 'elevation'>
+>;
+
+export type Props = Omit<ViewProps, 'pointerEvents' | 'style'> &
+  SurfaceVisualProps & {
+    /**
+     * Duration of the background, elevation, and shadow transitions in
+     * milliseconds.
+     */
+    transitionDuration?: number;
+    /**
+     * Style of the Surface.
+     *
+     * This doesn't support all View style properties:
+     * - Background color and border radius should be specified via props instead.
+     * - `overflow: 'hidden'` is not supported with `elevation` as it can clip the shadow.
+     *    To achieve the same effect, wrap the content in a child View with the overflow style.
+     */
+    style?: StyleProp<SurfaceStyle>;
+    /**
+     * @supported Available in v5.x with theme version 3
+     * Changes shadows and background on iOS and Android.
+     * Used to create UI hierarchy between components.
+     *
+     * Note: If `mode` is set to `flat`, Surface doesn't have a shadow.
+     *
+     * Note: In version 2 the `elevation` prop was accepted via `style` prop i.e. `style={{ elevation: 4 }}`.
+     * It's no longer supported with theme version 3 and you should use `elevation` property instead.
+     */
+    elevation?: Elevation;
+    /**
+     * @supported Available in v5.x with theme version 3
+     * Mode of the Surface.
+     * - `elevated` - Surface with a shadow and background color corresponding to set `elevation` value.
+     * - `flat` - Surface without a shadow, with the background color corresponding to set `elevation` value.
+     */
+    mode?: 'flat' | 'elevated';
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+    /**
+     * Content of the `Surface`.
+     */
+    children: React.ReactNode;
+    /**
+     * TestID used for testing purposes
+     */
+    testID?: string;
+    ref?: React.Ref<View>;
   };
-}
-
-const SurfaceIOS = forwardRef<
-  View,
-  Omit<Props, 'elevation'> & {
-    elevation: Elevation;
-    backgroundColor?: string | Animated.AnimatedInterpolation<string | number>;
-  }
->(
-  (
-    {
-      elevation,
-      style,
-      backgroundColor,
-      testID,
-      children,
-      mode = 'elevated',
-      container,
-      ...props
-    },
-    ref
-  ) => {
-    const [outerLayerViewStyles, innerLayerViewStyles] = React.useMemo(() => {
-      const flattenedStyles = (StyleSheet.flatten(style) || {}) as ViewStyle;
-
-      const [filteredStyles, outerLayerStyles, borderRadiusStyles] =
-        splitStyles(
-          flattenedStyles,
-          (style) =>
-            outerLayerStyleProperties.includes(style) ||
-            style.startsWith('margin'),
-          (style) => style.startsWith('border') && style.endsWith('Radius')
-        );
-
-      if (
-        process.env.NODE_ENV !== 'production' &&
-        filteredStyles.overflow === 'hidden' &&
-        elevation !== 0
-      ) {
-        console.warn(
-          'When setting overflow to hidden on Surface the shadow will not be displayed correctly. Wrap the content of your component in a separate View with the overflow style.'
-        );
-      }
-
-      const bgColor = flattenedStyles.backgroundColor || backgroundColor;
-
-      const isElevated = mode === 'elevated';
-
-      const outerLayerViewStyles = {
-        ...(isElevated && getStyleForShadowLayer(elevation, 0)),
-        ...outerLayerStyles,
-        ...borderRadiusStyles,
-        backgroundColor: bgColor,
-      };
-
-      const innerLayerViewStyles = {
-        ...(isElevated && getStyleForShadowLayer(elevation, 1)),
-        ...filteredStyles,
-        ...borderRadiusStyles,
-        flex:
-          flattenedStyles.height || (!container && flattenedStyles.flex)
-            ? 1
-            : undefined,
-        backgroundColor: bgColor,
-      };
-
-      return [outerLayerViewStyles, innerLayerViewStyles];
-    }, [style, elevation, backgroundColor, mode, container]);
-
-    return (
-      <Animated.View
-        ref={ref}
-        style={outerLayerViewStyles}
-        testID={`${testID}-outer-layer`}
-      >
-        <Animated.View {...props} style={innerLayerViewStyles} testID={testID}>
-          {children}
-        </Animated.View>
-      </Animated.View>
-    );
-  }
-);
 
 /**
  * Surface is a basic container that can give depth to an element with elevation shadow.
- * On dark theme with `adaptive` mode, surface is constructed by also placing a semi-transparent white overlay over a component surface.
- * See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.
- * Overlay and shadow can be applied by specifying the `elevation` property both on Android and iOS.
+ *
+ * On Android, Surface uses the native `elevation` style,
+ * and falls back to shadows that approximate the elevation on other platforms.
  *
  * ## Usage
  * ```js
@@ -244,7 +150,7 @@ const SurfaceIOS = forwardRef<
  * import { StyleSheet } from 'react-native';
  *
  * const MyComponent = () => (
- *   <Surface style={styles.surface} elevation={4}>
+ *   <Surface style={styles.surface} elevation={4} borderRadius={8}>
  *      <Text>Surface</Text>
  *   </Surface>
  * );
@@ -253,132 +159,231 @@ const SurfaceIOS = forwardRef<
  *
  * const styles = StyleSheet.create({
  *   surface: {
- *     padding: 8,
  *     height: 80,
  *     width: 80,
+ *     padding: 8,
  *     alignItems: 'center',
  *     justifyContent: 'center',
  *   },
  * });
  * ```
  */
-const Surface = forwardRef<View, Props>(
-  (
-    {
-      elevation = 1,
-      children,
-      theme: overridenTheme,
-      style,
-      testID = 'surface',
-      mode = 'elevated',
-      ...props
-    }: Props,
-    ref
-  ) => {
-    const theme = useInternalTheme(overridenTheme);
-
-    if (!theme.isV3)
-      return (
-        <MD2Surface {...props} theme={theme} style={style} ref={ref}>
-          {children}
-        </MD2Surface>
-      );
+const Surface = ({
+  elevation = 1,
+  children,
+  theme: overriddenTheme,
+  style,
+  backgroundColor: customBackgroundColor,
+  borderRadius,
+  borderBottomEndRadius,
+  borderBottomLeftRadius,
+  borderBottomRightRadius,
+  borderBottomStartRadius,
+  borderEndEndRadius,
+  borderEndStartRadius,
+  borderStartEndRadius,
+  borderStartStartRadius,
+  borderTopEndRadius,
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  borderTopStartRadius,
+  borderCurve = 'continuous',
+  testID,
+  mode = 'elevated',
+  transitionDuration: customTransitionDuration,
+  ref,
+  ...rest
+}: Props) => {
+  const theme = useInternalTheme(overriddenTheme);
+
+  const { colors } = theme;
+
+  const backgroundColor =
+    customBackgroundColor ?? colors.elevation?.[`level${elevation}`];
+
+  const backgroundStyle = { backgroundColor };
+
+  const shapeProps = {
+    borderRadius,
+    borderBottomEndRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderBottomStartRadius,
+    borderEndEndRadius,
+    borderEndStartRadius,
+    borderStartEndRadius,
+    borderStartStartRadius,
+    borderTopEndRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderTopStartRadius,
+    borderCurve,
+  };
 
-    const { colors } = theme;
+  // Reanimated styles can't be shared between different views
+  // So we need to create two separate styles for the surface and shadow layers
+  const visualStyle = useSurfaceVisualStyle(shapeProps);
+  const shadowVisualStyle = useSurfaceVisualStyle(shapeProps);
 
-    const inputRange = [0, 1, 2, 3, 4, 5];
+  const isElevated = mode === 'elevated';
 
-    const backgroundColor = (() => {
-      if (isAnimatedValue(elevation)) {
-        return elevation.interpolate({
-          inputRange,
-          outputRange: inputRange.map((elevation) => {
-            return colors.elevation?.[`level${elevation as MD3Elevation}`];
-          }),
-        });
-      }
+  const transitionDuration =
+    customTransitionDuration ??
+    theme.motion.duration.short3 * theme.animation.scale;
+  const transitionDurationStyle: AnimatedStyle<ViewStyle> = {
+    transitionDuration,
+  };
+  const transitionTimingFunction = cubicBezier(...theme.motion.easing.standard);
+  const transitionProperty =
+    // FIXME: Reanimated can't animate PlatformColor and DynamicColorIOS
+    typeof backgroundColor === 'string' ? ['backgroundColor' as const] : [];
 
-      return colors.elevation?.[`level${elevation}`];
-    })();
+  if (Platform.OS === 'web') {
+    const [elevationShadow] = shadow(elevation, theme.colors.shadow);
 
-    const isElevated = mode === 'elevated';
+    const transitionStyle: AnimatedStyle<ViewStyle> = {
+      transitionTimingFunction,
+      transitionProperty: [...transitionProperty, 'boxShadow'],
+    };
 
-    if (Platform.OS === 'web') {
-      const { pointerEvents = 'auto' } = props;
-      return (
-        <Animated.View
-          {...props}
-          pointerEvents={pointerEvents}
-          ref={ref}
-          testID={testID}
-          style={[
-            { backgroundColor },
-            elevation && isElevated ? shadow(elevation, theme.isV3) : null,
-            style,
-          ]}
-        >
-          {children}
-        </Animated.View>
-      );
-    }
+    return (
+      <Animated.View
+        {...rest}
+        ref={ref}
+        testID={testID}
+        style={[
+          transitionStyle,
+          styles.container,
+          style,
+          transitionDurationStyle,
+          backgroundStyle,
+          visualStyle,
+          isElevated ? elevationShadow : null,
+        ]}
+      >
+        {children}
+      </Animated.View>
+    );
+  }
 
-    if (Platform.OS === 'android') {
-      const elevationLevel = [0, 3, 6, 9, 12, 15];
+  if (Platform.OS === 'android') {
+    const elevationAndroid = androidElevationLevels[elevation];
 
-      const getElevationAndroid = () => {
-        if (isAnimatedValue(elevation)) {
-          return elevation.interpolate({
-            inputRange,
-            outputRange: elevationLevel,
-          });
-        }
+    const transitionStyle: AnimatedStyle<ViewStyle> = {
+      transitionTimingFunction,
+      transitionProperty: [...transitionProperty, 'elevation'],
+    };
 
-        return elevationLevel[elevation];
-      };
+    return (
+      <Animated.View
+        {...rest}
+        testID={testID}
+        ref={ref}
+        style={[
+          transitionStyle,
+          style,
+          transitionDurationStyle,
+          backgroundStyle,
+          visualStyle,
+          isElevated && { elevation: elevationAndroid },
+        ]}
+      >
+        {children}
+      </Animated.View>
+    );
+  }
 
-      const { margin, padding, transform, borderRadius } = (StyleSheet.flatten(
-        style
-      ) || {}) as ViewStyle;
+  const [spotShadow, ambientShadow] = shadow(elevation, theme.colors.shadow);
 
-      const outerLayerStyles = { margin, padding, transform, borderRadius };
-      const sharedStyle = [{ backgroundColor }, style];
+  const transitionStyle: AnimatedStyle<ViewStyle> = {
+    transitionTimingFunction,
+    transitionProperty: [
+      ...transitionProperty,
+      'shadowOpacity',
+      'shadowOffset',
+      'shadowRadius',
+    ],
+  };
 
-      return (
+  return (
+    <Animated.View
+      {...rest}
+      ref={ref}
+      style={[
+        transitionStyle,
+        style,
+        transitionDurationStyle,
+        backgroundStyle,
+        visualStyle,
+        isElevated && spotShadow,
+      ]}
+      testID={testID}
+    >
+      {isElevated ? (
         <Animated.View
-          {...props}
-          testID={testID}
-          ref={ref}
           style={[
-            {
-              backgroundColor,
-              transform,
-            },
-            outerLayerStyles,
-            sharedStyle,
-            isElevated && {
-              elevation: getElevationAndroid(),
-            },
+            StyleSheet.absoluteFill,
+            styles.shadow,
+            transitionStyle,
+            transitionDurationStyle,
+            backgroundStyle,
+            shadowVisualStyle,
+            ambientShadow,
           ]}
-        >
-          {children}
-        </Animated.View>
-      );
-    }
+        />
+      ) : null}
+      {children}
+    </Animated.View>
+  );
+};
 
-    return (
-      <SurfaceIOS
-        {...props}
-        ref={ref}
-        elevation={elevation}
-        backgroundColor={backgroundColor}
-        style={style}
-        testID={testID}
-        mode={mode}
-      >
-        {children}
-      </SurfaceIOS>
-    );
-  }
-);
+const useSurfaceVisualStyle = ({
+  borderRadius,
+  borderBottomEndRadius,
+  borderBottomLeftRadius,
+  borderBottomRightRadius,
+  borderBottomStartRadius,
+  borderEndEndRadius,
+  borderEndStartRadius,
+  borderStartEndRadius,
+  borderStartStartRadius,
+  borderTopEndRadius,
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  borderTopStartRadius,
+  borderCurve,
+}: Omit<SurfaceVisualProps, 'backgroundColor'>) =>
+  useAnimatedStyle<ViewStyle>(() =>
+    Object.fromEntries(
+      Object.entries({
+        borderRadius,
+        borderBottomEndRadius,
+        borderBottomLeftRadius,
+        borderBottomRightRadius,
+        borderBottomStartRadius,
+        borderEndEndRadius,
+        borderEndStartRadius,
+        borderStartEndRadius,
+        borderStartStartRadius,
+        borderTopEndRadius,
+        borderTopLeftRadius,
+        borderTopRightRadius,
+        borderTopStartRadius,
+        borderCurve,
+      }).map(([property, value]) => [
+        property,
+        isSharedValue(value) ? value.value : value,
+      ])
+    )
+  );
+
+const styles = StyleSheet.create({
+  container: {
+    pointerEvents: 'auto',
+  },
+  shadow: {
+    pointerEvents: 'none',
+  },
+});
 
 export default Surface;
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
index 04b0fef0c6..2c86f8d963 100644
--- a/src/components/Switch/Switch.tsx
+++ b/src/components/Switch/Switch.tsx
@@ -1,108 +1,545 @@
 import * as React from 'react';
 import {
-  NativeModules,
   Platform,
-  StyleProp,
-  Switch as NativeSwitch,
-  ViewStyle,
+  Pressable,
+  StyleSheet,
+  type StyleProp,
+  View,
+  type ViewStyle,
 } from 'react-native';
 
-import { getSwitchColor } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
+import Animated, {
+  Easing,
+  ReduceMotion,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withDelay,
+  withSequence,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
 
-const version = NativeModules.PlatformConstants
-  ? NativeModules.PlatformConstants.reactNativeVersion
-  : undefined;
+import { SwitchTokens } from './tokens';
+import { getDefaultSwitchColors, resolveSwitchPaint } from './utils';
+import { useLocale } from '../../core/locale';
+import { useInternalTheme } from '../../core/theming';
+import { useReduceMotion } from '../../theme/accessibility/ReduceMotionContext';
+import { tokens } from '../../theme/tokens';
+import { toRawSpring } from '../../theme/tokens/sys/motion';
+import { cornerFull } from '../../theme/tokens/sys/shape';
+import type { StateOpacityKey, ThemeProp } from '../../theme/types';
+import { isKeyboardFocusEvent } from '../../utils/isKeyboardFocusEvent';
+import Icon, { type IconSource } from '../Icon';
 
-export type Props = React.ComponentPropsWithRef<typeof NativeSwitch> & {
+export type Props = {
   /**
-   * Disable toggling the switch.
+   * Whether the switch is on.
    */
-  disabled?: boolean;
+  value?: boolean;
   /**
-   * Value of the switch, true means 'on', false means 'off'.
+   * Called with the new value when the user toggles the switch.
    */
-  value?: boolean;
+  onValueChange?: (value: boolean) => void;
   /**
-   * Custom color for switch.
+   * Disables interaction and renders the disabled visual state.
    */
-  color?: string;
+  disabled?: boolean;
   /**
-   * Callback called with the new value when it changes.
+   * Icon shown inside the handle when checked
    */
-  onValueChange?: Function;
-  style?: StyleProp<ViewStyle>;
+  checkedIcon?: IconSource;
   /**
-   * @optional
+   * Icon shown inside the handle when unchecked.
    */
+  uncheckedIcon?: IconSource;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
   theme?: ThemeProp;
+  /**
+   * Accessibility label for the switch. This is read by the screen reader when the user focuses the switch.
+   */
+  'aria-label'?: string;
 };
 
+const {
+  trackWidth: TRACK_WIDTH,
+  trackHeight: TRACK_HEIGHT,
+  trackOutlineWidth: TRACK_OUTLINE_WIDTH,
+  stateLayerSize: STATE_LAYER_SIZE,
+  selectedHandleSize: SELECTED_HANDLE,
+  unselectedHandleSize: UNSELECTED_HANDLE,
+  iconHandleSize: ICON_HANDLE,
+  pressedHandleSize: PRESSED_HANDLE,
+  selectedIconSize: SELECTED_ICON,
+  unselectedIconSize: UNSELECTED_ICON,
+  disabledSelectedHandleOpacity: DISABLED_SELECTED_HANDLE_OPACITY,
+  disabledUnselectedHandleOpacity: DISABLED_UNSELECTED_HANDLE_OPACITY,
+  disabledSelectedIconOpacity: DISABLED_SELECTED_ICON_OPACITY,
+  disabledUnselectedIconOpacity: DISABLED_UNSELECTED_ICON_OPACITY,
+  disabledTrackOpacity: DISABLED_TRACK_OPACITY,
+} = SwitchTokens;
+
+const { state: stateTokens } = tokens.md.sys;
+const stateOpacity = stateTokens.opacity;
+const { thickness: FOCUS_THICKNESS, outerOffset: FOCUS_OUTER_OFFSET } =
+  stateTokens.focusIndicator;
+const FOCUS_RING_INSET = -(FOCUS_OUTER_OFFSET + FOCUS_THICKNESS);
+const OVERLAY_TOP = (STATE_LAYER_SIZE - TRACK_HEIGHT) / 2;
+
+// Hold-then-grow: a brief delay before snapping to PRESSED_HANDLE so a quick
+// tap doesn't flash the press-grow visual.
+const PRESS_GROW_DELAY = 100;
+
+function restingHandleSize(checked: boolean, hasIcon: boolean): number {
+  if (hasIcon) return ICON_HANDLE;
+  return checked ? SELECTED_HANDLE : UNSELECTED_HANDLE;
+}
+
+const HANDLE_PADDING = (TRACK_HEIGHT - SELECTED_HANDLE) / 2;
+const UNCHECKED_CENTER = TRACK_HEIGHT / 2;
+const CHECKED_CENTER = TRACK_WIDTH - HANDLE_PADDING - SELECTED_HANDLE / 2;
+
 /**
- * Switch is a visual toggle between two mutually exclusive states — on and off.
+ * Material 3 toggle between two mutually exclusive states (on / off).
  *
  * ## Usage
  * ```js
  * import * as React from 'react';
  * import { Switch } from 'react-native-paper';
  *
- * const MyComponent = () => {
- *   const [isSwitchOn, setIsSwitchOn] = React.useState(false);
- *
- *   const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);
- *
- *   return <Switch value={isSwitchOn} onValueChange={onToggleSwitch} />;
+ * const Example = () => {
+ *   const [on, setOn] = React.useState(false);
+ *   return <Switch value={on} onValueChange={setOn} />;
  * };
- *
- * export default MyComponent;
  * ```
+ *
+ * ## Theming
+ * Customize by overriding these `theme.colors` roles:
+ * - `primary` / `onPrimary`: selected track + icon / selected handle
+ * - `primaryContainer`: selected handle on hover, press
+ * - `surfaceContainerHighest`: unselected track + icon
+ * - `outline`: unselected resting handle, unselected track outline
+ * - `onSurfaceVariant`: unselected handle on hover, press
+ * - `onSurface`: disabled track, handle, and icon fills
+ * - `surface`: disabled selected handle
+ * - `secondary`: focus indicator
  */
 const Switch = ({
   value,
   disabled,
   onValueChange,
-  color,
+  checkedIcon,
+  uncheckedIcon,
+  style,
+  testID,
   theme: themeOverrides,
-  ...rest
+  'aria-label': ariaLabel,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const { checkedColor, onTintColor, thumbTintColor } = getSwitchColor({
-    theme,
-    disabled,
-    value,
-    color,
-  });
-
-  const props =
-    version && version.major === 0 && version.minor <= 56
-      ? {
-          onTintColor,
-          thumbTintColor,
-        }
-      : Platform.OS === 'web'
-      ? {
-          activeTrackColor: onTintColor,
-          thumbColor: thumbTintColor,
-          activeThumbColor: checkedColor,
-        }
-      : {
-          thumbColor: thumbTintColor,
-          trackColor: {
-            true: onTintColor,
-            false: onTintColor,
-          },
-        };
+  const reduceMotion = useReduceMotion();
+  const { direction } = useLocale();
+  const xSign = direction === 'ltr' ? 1 : -1;
+
+  const checked = !!value;
+  const isDisabled = !!disabled;
+  const isEnabled = !isDisabled;
+  const iconSource = checked ? checkedIcon : uncheckedIcon;
+  const hasIcon = iconSource !== undefined;
+
+  const anchorStyle: ViewStyle =
+    Platform.OS === 'web' && direction === 'rtl' ? { right: 0 } : { left: 0 };
+
+  const pressedSV = useSharedValue(0);
+  const hoveredSV = useSharedValue(0);
+  const focusedSV = useSharedValue(0);
+  const checkedSV = useSharedValue(checked ? 1 : 0);
+  const hasIconSV = useSharedValue(hasIcon ? 1 : 0);
+  const isDisabledSV = useSharedValue(isDisabled ? 1 : 0);
+
+  React.useEffect(() => {
+    checkedSV.value = checked ? 1 : 0;
+    hasIconSV.value = hasIcon ? 1 : 0;
+    isDisabledSV.value = isDisabled ? 1 : 0;
+  }, [checked, hasIcon, isDisabled, checkedSV, hasIconSV, isDisabledSV]);
+
+  const colors = React.useMemo(() => getDefaultSwitchColors(theme), [theme]);
+
+  const reanimatedReduceMotion = reduceMotion
+    ? ReduceMotion.Always
+    : ReduceMotion.Never;
+
+  const springConfig = React.useMemo(
+    () => ({
+      ...toRawSpring(theme.motion.spring.fast.spatial),
+      reduceMotion: reanimatedReduceMotion,
+    }),
+    [theme.motion.spring.fast.spatial, reanimatedReduceMotion]
+  );
+  const stateLayerRiseConfig = React.useMemo(
+    () => ({
+      duration: theme.motion.duration.medium3,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      reduceMotion: reanimatedReduceMotion,
+    }),
+    [
+      theme.motion.duration.medium3,
+      theme.motion.easing.standard,
+      reanimatedReduceMotion,
+    ]
+  );
+  const stateLayerPulseFallConfig = React.useMemo(
+    () => ({
+      duration: theme.motion.duration.medium3,
+      easing: Easing.bezier(...theme.motion.easing.standardAccelerate),
+      reduceMotion: reanimatedReduceMotion,
+    }),
+    [
+      theme.motion.duration.medium3,
+      theme.motion.easing.standardAccelerate,
+      reanimatedReduceMotion,
+    ]
+  );
+
+  const handleSize = useSharedValue(restingHandleSize(checked, hasIcon));
+  const handleCenter = useSharedValue(
+    checked ? CHECKED_CENTER : UNCHECKED_CENTER
+  );
+  const stateLayerAlpha = useSharedValue(0);
+
+  useAnimatedReaction(
+    () => checkedSV.value,
+    (c, prev) => {
+      if (c === prev) return;
+      handleCenter.value = withSpring(
+        c === 1 ? CHECKED_CENTER : UNCHECKED_CENTER,
+        springConfig
+      );
+    },
+    [springConfig]
+  );
+
+  useAnimatedReaction(
+    () => ({
+      p: pressedSV.value,
+      c: checkedSV.value,
+      hi: hasIconSV.value,
+    }),
+    ({ p, c, hi }) => {
+      const restingSize =
+        hi === 1 ? ICON_HANDLE : c === 1 ? SELECTED_HANDLE : UNSELECTED_HANDLE;
+      if (p === 1) {
+        handleSize.value = withDelay(
+          PRESS_GROW_DELAY,
+          withTiming(PRESSED_HANDLE, { duration: 0 })
+        );
+      } else {
+        handleSize.value = withSpring(restingSize, springConfig);
+      }
+    },
+    [springConfig]
+  );
+
+  useAnimatedReaction(
+    (): StateOpacityKey | null => {
+      if (pressedSV.value === 1) return 'pressed';
+      if (focusedSV.value === 1) return 'focused';
+      if (hoveredSV.value === 1) return 'hovered';
+      return null;
+    },
+    (current, prev) => {
+      if (current === prev) return;
+      const wasPressed = prev === 'pressed';
+      const target =
+        current === 'pressed'
+          ? stateOpacity.pressed
+          : current === 'hovered'
+            ? stateOpacity.hovered
+            : 0;
+      if (wasPressed && current !== 'pressed') {
+        // On release: rise to peak, then fall to the next state.
+        stateLayerAlpha.value = withSequence(
+          withTiming(stateOpacity.pressed, stateLayerRiseConfig),
+          withTiming(target, stateLayerPulseFallConfig)
+        );
+      } else if (current === null) {
+        stateLayerAlpha.value = 0;
+      } else {
+        stateLayerAlpha.value = withTiming(target, stateLayerRiseConfig);
+      }
+    },
+    [stateLayerRiseConfig, stateLayerPulseFallConfig]
+  );
+
+  const handleColorSV = useDerivedValue(() => {
+    const isCheckedNow = checkedSV.value === 1;
+    if (isDisabledSV.value === 1) {
+      return isCheckedNow
+        ? colors.disabledCheckedHandleColor
+        : colors.disabledUncheckedHandleColor;
+    }
+    if (pressedSV.value === 1) {
+      return isCheckedNow
+        ? colors.checkedPressedHandleColor
+        : colors.uncheckedPressedHandleColor;
+    }
+    if (hoveredSV.value === 1) {
+      return isCheckedNow
+        ? colors.checkedHoverHandleColor
+        : colors.uncheckedHoverHandleColor;
+    }
+    return isCheckedNow
+      ? colors.checkedHandleColor
+      : colors.uncheckedHandleColor;
+  }, [colors]);
+
+  const handleAnimatedStyle = useAnimatedStyle(() => ({
+    width: handleSize.value,
+    height: handleSize.value,
+    top: (STATE_LAYER_SIZE - handleSize.value) / 2,
+    transform: [
+      { translateX: xSign * (handleCenter.value - handleSize.value / 2) },
+    ],
+  }));
+
+  const handleFillAnimatedStyle = useAnimatedStyle(() => ({
+    backgroundColor: handleColorSV.value,
+  }));
+
+  const stateLayerAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: stateLayerAlpha.value,
+    transform: [
+      { translateX: xSign * (handleCenter.value - STATE_LAYER_SIZE / 2) },
+    ],
+  }));
+
+  // Icon translateX follows the handle's center.
+  // Vertical position is fixed so the icon never moves vertically
+  // as the spring oscillates around its target.
+  const iconAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: xSign * (handleCenter.value - SELECTED_ICON / 2) },
+    ],
+  }));
+
+  const focusRingAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: focusedSV.value,
+  }));
+
+  const paint = resolveSwitchPaint(colors, isEnabled, checked);
+  const stateLayerColor = checked
+    ? colors.checkedStateLayerColor
+    : colors.uncheckedStateLayerColor;
+  const showOutline = paint.border !== 'transparent';
+  const handleOpacity = isDisabled
+    ? checked
+      ? DISABLED_SELECTED_HANDLE_OPACITY
+      : DISABLED_UNSELECTED_HANDLE_OPACITY
+    : 1;
+  const iconOpacity = isDisabled
+    ? checked
+      ? DISABLED_SELECTED_ICON_OPACITY
+      : DISABLED_UNSELECTED_ICON_OPACITY
+    : 1;
+  const trackOpacityValue = isDisabled ? DISABLED_TRACK_OPACITY : 1;
+  const iconSize = checked ? SELECTED_ICON : UNSELECTED_ICON;
 
   return (
-    <NativeSwitch
-      value={value}
-      disabled={disabled}
-      onValueChange={disabled ? undefined : onValueChange}
-      {...props}
-      {...rest}
-    />
+    <View style={[styles.wrapper, style]}>
+      <Pressable
+        disabled={disabled}
+        onPress={() => onValueChange?.(!checked)}
+        onPressIn={() => {
+          pressedSV.value = 1;
+        }}
+        onPressOut={() => {
+          pressedSV.value = 0;
+        }}
+        onHoverIn={() => {
+          hoveredSV.value = 1;
+        }}
+        onHoverOut={() => {
+          hoveredSV.value = 0;
+        }}
+        onFocus={(e) => {
+          if (!isKeyboardFocusEvent(e)) return;
+          focusedSV.value = 1;
+        }}
+        onBlur={() => {
+          focusedSV.value = 0;
+        }}
+        android_ripple={{ color: 'transparent' }}
+        role="switch"
+        aria-disabled={isDisabled}
+        aria-checked={checked}
+        aria-label={ariaLabel}
+        testID={testID}
+        style={[
+          styles.touchable,
+          Platform.OS === 'web' ? webNoOutline : undefined,
+        ]}
+      >
+        <View
+          style={[
+            styles.track,
+            { backgroundColor: paint.track, opacity: trackOpacityValue },
+          ]}
+        >
+          {showOutline ? (
+            <View style={[styles.outline, { borderColor: paint.border }]} />
+          ) : null}
+        </View>
+      </Pressable>
+
+      <Animated.View
+        style={[
+          styles.stateLayer,
+          anchorStyle,
+          { backgroundColor: stateLayerColor },
+          stateLayerAnimatedStyle,
+        ]}
+      />
+
+      <Animated.View style={[styles.handle, anchorStyle, handleAnimatedStyle]}>
+        {/* Disabled-only: opaque `surface` backdrop. The tinted fill above
+            composites over it, reproducing the native math avoiding the PlatformColor alpha limitation. */}
+        {isDisabled ? (
+          <View
+            style={[
+              styles.handleFill,
+              { backgroundColor: theme.colors.surface },
+            ]}
+          />
+        ) : null}
+        <Animated.View
+          style={[
+            styles.handleFill,
+            { opacity: handleOpacity },
+            handleFillAnimatedStyle,
+          ]}
+        />
+      </Animated.View>
+      {iconSource ? (
+        <Animated.View
+          style={[styles.iconWrap, anchorStyle, iconAnimatedStyle]}
+        >
+          {/* The same icon twice; one tinted fill on top of the other,
+          reproducing the native math avoiding the PlatformColor alpha limitation. */}
+          {isDisabled ? (
+            <View style={styles.absoluteFill}>
+              <Icon
+                source={iconSource}
+                size={iconSize}
+                color={theme.colors.surface}
+                theme={theme}
+              />
+            </View>
+          ) : null}
+          <View style={[styles.absoluteFill, { opacity: iconOpacity }]}>
+            <Icon
+              source={iconSource}
+              size={iconSize}
+              color={paint.icon}
+              theme={theme}
+            />
+          </View>
+        </Animated.View>
+      ) : null}
+
+      <Animated.View
+        style={[
+          styles.focusRing,
+          {
+            borderColor: colors.focusIndicatorColor,
+            borderWidth: FOCUS_THICKNESS,
+            top: OVERLAY_TOP + FOCUS_RING_INSET,
+            left: FOCUS_RING_INSET,
+            right: FOCUS_RING_INSET,
+            bottom: OVERLAY_TOP + FOCUS_RING_INSET,
+            borderRadius: cornerFull,
+          },
+          focusRingAnimatedStyle,
+        ]}
+      />
+    </View>
   );
 };
 
+const styles = StyleSheet.create({
+  wrapper: {
+    width: TRACK_WIDTH,
+    height: STATE_LAYER_SIZE,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'visible',
+  },
+  touchable: {
+    width: TRACK_WIDTH,
+    height: STATE_LAYER_SIZE,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  track: {
+    width: TRACK_WIDTH,
+    height: TRACK_HEIGHT,
+    borderRadius: cornerFull,
+    overflow: 'visible',
+  },
+  outline: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderWidth: TRACK_OUTLINE_WIDTH,
+    borderRadius: cornerFull,
+    pointerEvents: 'none',
+  },
+  stateLayer: {
+    position: 'absolute',
+    top: 0,
+    width: STATE_LAYER_SIZE,
+    height: STATE_LAYER_SIZE,
+    borderRadius: cornerFull,
+    pointerEvents: 'none',
+  },
+  handle: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+    pointerEvents: 'none',
+  },
+  handleFill: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: cornerFull,
+  },
+  iconWrap: {
+    position: 'absolute',
+    top: (STATE_LAYER_SIZE - SELECTED_ICON) / 2,
+    width: SELECTED_ICON,
+    height: SELECTED_ICON,
+    pointerEvents: 'none',
+  },
+  focusRing: {
+    position: 'absolute',
+    pointerEvents: 'none',
+  },
+  absoluteFill: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+});
+
+// Web-only style; not in StyleSheet because `outline` is outside ViewStyle.
+// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+const webNoOutline = { outline: 'none' } as unknown as ViewStyle;
+
 export default Switch;
diff --git a/src/components/Switch/tokens.ts b/src/components/Switch/tokens.ts
new file mode 100644
index 0000000000..ccde1a9a3f
--- /dev/null
+++ b/src/components/Switch/tokens.ts
@@ -0,0 +1,53 @@
+import type { ColorRole } from '../../theme/types';
+
+const sizes = {
+  trackWidth: 52,
+  trackHeight: 32,
+  trackOutlineWidth: 2,
+  stateLayerSize: 40,
+
+  selectedHandleSize: 24,
+  unselectedHandleSize: 16,
+  iconHandleSize: 24,
+  pressedHandleSize: 28,
+  selectedIconSize: 16,
+  unselectedIconSize: 16,
+
+  disabledSelectedHandleOpacity: 1.0,
+  disabledUnselectedHandleOpacity: 0.38,
+  disabledSelectedIconOpacity: 0.38,
+  disabledUnselectedIconOpacity: 0.38,
+  disabledTrackOpacity: 0.12,
+} as const;
+
+const colors = {
+  selectedHandleColor: 'onPrimary',
+  selectedHoverHandleColor: 'primaryContainer',
+  selectedPressedHandleColor: 'primaryContainer',
+
+  unselectedHandleColor: 'outline',
+  unselectedHoverHandleColor: 'onSurfaceVariant',
+  unselectedPressedHandleColor: 'onSurfaceVariant',
+
+  selectedIconColor: 'primary',
+  unselectedIconColor: 'surfaceContainerHighest',
+
+  selectedTrackColor: 'primary',
+  unselectedTrackColor: 'surfaceContainerHighest',
+  unselectedTrackOutlineColor: 'outline',
+
+  disabledSelectedHandleColor: 'surface',
+  disabledSelectedIconColor: 'onSurface',
+  disabledSelectedTrackColor: 'onSurface',
+  disabledUnselectedHandleColor: 'onSurface',
+  disabledUnselectedIconColor: 'surfaceContainerHighest',
+  disabledUnselectedTrackColor: 'surfaceContainerHighest',
+  disabledUnselectedTrackOutlineColor: 'onSurface',
+
+  selectedStateLayerColor: 'primary',
+  unselectedStateLayerColor: 'onSurface',
+
+  focusIndicatorColor: 'secondary',
+} as const satisfies Record<string, ColorRole>;
+
+export const SwitchTokens = { ...sizes, ...colors };
diff --git a/src/components/Switch/utils.ts b/src/components/Switch/utils.ts
index 2994495af9..78ea4131bb 100644
--- a/src/components/Switch/utils.ts
+++ b/src/components/Switch/utils.ts
@@ -1,113 +1,115 @@
-import { Platform } from 'react-native';
-
-import setColor from 'color';
-
-import {
-  grey400,
-  grey800,
-  grey50,
-  grey700,
-  white,
-  black,
-} from '../../styles/themes/v2/colors';
-import type { InternalTheme } from '../../types';
-
-type BaseProps = {
-  theme: InternalTheme;
-  disabled?: boolean;
-  value?: boolean;
-};
-
-const getCheckedColor = ({
-  theme,
-  color,
-}: {
-  theme: InternalTheme;
-  color?: string;
-}) => {
-  if (color) {
-    return color;
-  }
-
-  if (theme.isV3) {
-    return theme.colors.primary;
-  }
-
-  return theme.colors.accent;
+import type { ColorValue } from 'react-native';
+
+import { SwitchTokens } from './tokens';
+import type { InternalTheme } from '../../theme/types';
+
+export type SwitchColors = {
+  // Enabled, base
+  checkedHandleColor: ColorValue;
+  checkedTrackColor: ColorValue;
+  checkedBorderColor: ColorValue;
+  checkedIconColor: ColorValue;
+  uncheckedHandleColor: ColorValue;
+  uncheckedTrackColor: ColorValue;
+  uncheckedBorderColor: ColorValue;
+  uncheckedIconColor: ColorValue;
+
+  // Enabled, interacted handle (track stays constant per spec)
+  checkedHoverHandleColor: ColorValue;
+  checkedPressedHandleColor: ColorValue;
+  uncheckedHoverHandleColor: ColorValue;
+  uncheckedPressedHandleColor: ColorValue;
+
+  // State layer tints
+  checkedStateLayerColor: ColorValue;
+  uncheckedStateLayerColor: ColorValue;
+
+  // Focus indicator ring
+  focusIndicatorColor: ColorValue;
+
+  // Disabled
+  disabledCheckedHandleColor: ColorValue;
+  disabledCheckedTrackColor: ColorValue;
+  disabledCheckedBorderColor: ColorValue;
+  disabledCheckedIconColor: ColorValue;
+  disabledUncheckedHandleColor: ColorValue;
+  disabledUncheckedTrackColor: ColorValue;
+  disabledUncheckedBorderColor: ColorValue;
+  disabledUncheckedIconColor: ColorValue;
 };
 
-const getThumbTintColor = ({
-  theme,
-  disabled,
-  value,
-  checkedColor,
-}: BaseProps & { checkedColor: string }) => {
-  const isIOS = Platform.OS === 'ios';
-
-  if (isIOS) {
-    return undefined;
-  }
-
-  if (disabled) {
-    if (theme.dark) {
-      return grey800;
-    }
-    return grey400;
-  }
-
-  if (value) {
-    return checkedColor;
-  }
+export function getDefaultSwitchColors(theme: InternalTheme): SwitchColors {
+  const t = SwitchTokens;
+  const c = theme.colors;
+  return {
+    checkedHandleColor: c[t.selectedHandleColor],
+    checkedTrackColor: c[t.selectedTrackColor],
+    checkedBorderColor: 'transparent',
+    checkedIconColor: c[t.selectedIconColor],
+
+    uncheckedHandleColor: c[t.unselectedHandleColor],
+    uncheckedTrackColor: c[t.unselectedTrackColor],
+    uncheckedBorderColor: c[t.unselectedTrackOutlineColor],
+    uncheckedIconColor: c[t.unselectedIconColor],
+
+    checkedHoverHandleColor: c[t.selectedHoverHandleColor],
+    checkedPressedHandleColor: c[t.selectedPressedHandleColor],
+    uncheckedHoverHandleColor: c[t.unselectedHoverHandleColor],
+    uncheckedPressedHandleColor: c[t.unselectedPressedHandleColor],
+
+    checkedStateLayerColor: c[t.selectedStateLayerColor],
+    uncheckedStateLayerColor: c[t.unselectedStateLayerColor],
+
+    focusIndicatorColor: c[t.focusIndicatorColor],
+
+    disabledCheckedHandleColor: c[t.disabledSelectedHandleColor],
+    disabledCheckedTrackColor: c[t.disabledSelectedTrackColor],
+    disabledCheckedBorderColor: 'transparent',
+    disabledCheckedIconColor: c[t.disabledSelectedIconColor],
+    disabledUncheckedHandleColor: c[t.disabledUnselectedHandleColor],
+    disabledUncheckedTrackColor: c[t.disabledUnselectedTrackColor],
+    disabledUncheckedBorderColor: c[t.disabledUnselectedTrackOutlineColor],
+    disabledUncheckedIconColor: c[t.disabledUnselectedIconColor],
+  };
+}
 
-  if (theme.dark) {
-    return grey400;
-  }
-  return grey50;
+export type SwitchPaint = {
+  track: ColorValue;
+  border: ColorValue;
+  icon: ColorValue;
 };
 
-const getOnTintColor = ({
-  theme,
-  disabled,
-  value,
-  checkedColor,
-}: BaseProps & { checkedColor: string }) => {
-  const isIOS = Platform.OS === 'ios';
-
-  if (isIOS) {
-    return checkedColor;
+/**
+ * Resolve track / border / icon paint for the current state. Handle color is
+ * interaction-dependent and animated on the UI thread; resolve it separately.
+ */
+export function resolveSwitchPaint(
+  c: SwitchColors,
+  isEnabled: boolean,
+  checked: boolean
+): SwitchPaint {
+  if (!isEnabled) {
+    return checked
+      ? {
+          track: c.disabledCheckedTrackColor,
+          border: c.disabledCheckedBorderColor,
+          icon: c.disabledCheckedIconColor,
+        }
+      : {
+          track: c.disabledUncheckedTrackColor,
+          border: c.disabledUncheckedBorderColor,
+          icon: c.disabledUncheckedIconColor,
+        };
   }
-
-  if (disabled) {
-    if (theme.dark) {
-      if (theme.isV3) {
-        return setColor(white).alpha(0.06).rgb().string();
+  return checked
+    ? {
+        track: c.checkedTrackColor,
+        border: c.checkedBorderColor,
+        icon: c.checkedIconColor,
       }
-      return setColor(white).alpha(0.1).rgb().string();
-    }
-    return setColor(black).alpha(0.12).rgb().string();
-  }
-
-  if (value) {
-    return setColor(checkedColor).alpha(0.5).rgb().string();
-  }
-
-  if (theme.dark) {
-    return grey700;
-  }
-  return 'rgb(178, 175, 177)';
-};
-
-export const getSwitchColor = ({
-  theme,
-  disabled,
-  value,
-  color,
-}: BaseProps & { color?: string }) => {
-  const checkedColor = getCheckedColor({ theme, color });
-
-  return {
-    onTintColor: getOnTintColor({ theme, disabled, value, checkedColor }),
-    thumbTintColor: getThumbTintColor({ theme, disabled, value, checkedColor }),
-    checkedColor,
-  };
-};
+    : {
+        track: c.uncheckedTrackColor,
+        border: c.uncheckedBorderColor,
+        icon: c.uncheckedIconColor,
+      };
+}
diff --git a/src/components/TextInput/Addons/Outline.tsx b/src/components/TextInput/Addons/Outline.tsx
deleted file mode 100644
index 45b675fd8b..0000000000
--- a/src/components/TextInput/Addons/Outline.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import * as React from 'react';
-import {
-  StyleSheet,
-  ColorValue,
-  StyleProp,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import { TextInputLabelProp } from '../types';
-
-type OutlineProps = {
-  isV3: boolean;
-  activeColor: string;
-  backgroundColor: ColorValue;
-  hasActiveOutline?: boolean;
-  focused?: boolean;
-  outlineColor?: string;
-  roundness?: number;
-  label?: TextInputLabelProp;
-  style?: StyleProp<ViewStyle>;
-};
-
-export const Outline = ({
-  isV3,
-  label,
-  activeColor,
-  backgroundColor,
-  hasActiveOutline,
-  focused,
-  outlineColor,
-  roundness,
-  style,
-}: OutlineProps) => (
-  <View
-    testID="text-input-outline"
-    pointerEvents="none"
-    style={[
-      styles.outline,
-      !label && styles.noLabelOutline,
-      // eslint-disable-next-line react-native/no-inline-styles
-      {
-        backgroundColor,
-        borderRadius: roundness,
-        borderWidth: (isV3 ? hasActiveOutline : focused) ? 2 : 1,
-        borderColor: hasActiveOutline ? activeColor : outlineColor,
-      },
-      style,
-    ]}
-  />
-);
-
-const styles = StyleSheet.create({
-  outline: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 6,
-    bottom: 0,
-  },
-  noLabelOutline: {
-    top: 0,
-  },
-});
diff --git a/src/components/TextInput/Addons/Underline.tsx b/src/components/TextInput/Addons/Underline.tsx
deleted file mode 100644
index 184cbe63b5..0000000000
--- a/src/components/TextInput/Addons/Underline.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import * as React from 'react';
-import { Animated, StyleSheet, StyleProp, ViewStyle } from 'react-native';
-
-import type { ThemeProp } from 'src/types';
-
-import { useInternalTheme } from '../../../core/theming';
-
-type UnderlineProps = {
-  parentState: {
-    focused: boolean;
-  };
-  error?: boolean;
-  colors?: {
-    error?: string;
-  };
-  activeColor: string;
-  underlineColorCustom?: string;
-  hasActiveOutline?: boolean;
-  style?: StyleProp<ViewStyle>;
-  theme?: ThemeProp;
-};
-
-export const Underline = ({
-  parentState,
-  error,
-  colors,
-  activeColor,
-  underlineColorCustom,
-  hasActiveOutline,
-  style,
-  theme: themeOverrides,
-}: UnderlineProps) => {
-  const { isV3 } = useInternalTheme(themeOverrides);
-
-  let backgroundColor = parentState.focused
-    ? activeColor
-    : underlineColorCustom;
-
-  if (error) backgroundColor = colors?.error;
-
-  const activeScale = isV3 ? 2 : 1;
-
-  return (
-    <Animated.View
-      testID="text-input-underline"
-      style={[
-        styles.underline,
-        isV3 && styles.md3Underline,
-        {
-          backgroundColor,
-          // Underlines is thinner when input is not focused
-          transform: [
-            {
-              scaleY: (isV3 ? hasActiveOutline : parentState.focused)
-                ? activeScale
-                : 0.5,
-            },
-          ],
-        },
-        style,
-      ]}
-    />
-  );
-};
-
-const styles = StyleSheet.create({
-  underline: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
-    height: 2,
-    zIndex: 1,
-  },
-  md3Underline: {
-    height: 1,
-  },
-});
diff --git a/src/components/TextInput/Adornment/TextInputAdornment.tsx b/src/components/TextInput/Adornment/TextInputAdornment.tsx
deleted file mode 100644
index 698aae955b..0000000000
--- a/src/components/TextInput/Adornment/TextInputAdornment.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import React from 'react';
-import type {
-  LayoutChangeEvent,
-  TextStyle,
-  StyleProp,
-  Animated,
-  DimensionValue,
-} from 'react-native';
-
-import type { ThemeProp } from 'src/types';
-
-import { AdornmentSide, AdornmentType, InputMode } from './enums';
-import TextInputAffix, { AffixAdornment } from './TextInputAffix';
-import TextInputIcon, { IconAdornment } from './TextInputIcon';
-import type {
-  AdornmentConfig,
-  AdornmentStyleAdjustmentForNativeInput,
-} from './types';
-import { getConstants } from '../helpers';
-
-export function getAdornmentConfig({
-  left,
-  right,
-}: {
-  left?: React.ReactNode;
-  right?: React.ReactNode;
-}): Array<AdornmentConfig> {
-  let adornmentConfig: any[] = [];
-  if (left || right) {
-    [
-      { side: AdornmentSide.Left, adornment: left },
-      { side: AdornmentSide.Right, adornment: right },
-    ].forEach(({ side, adornment }) => {
-      if (adornment && React.isValidElement(adornment)) {
-        let type;
-        if (adornment.type === TextInputAffix) {
-          type = AdornmentType.Affix;
-        } else if (adornment.type === TextInputIcon) {
-          type = AdornmentType.Icon;
-        }
-        adornmentConfig.push({
-          side,
-          type,
-        });
-      }
-    });
-  }
-
-  return adornmentConfig;
-}
-
-export function getAdornmentStyleAdjustmentForNativeInput({
-  adornmentConfig,
-  leftAffixWidth,
-  rightAffixWidth,
-  paddingHorizontal,
-  inputOffset = 0,
-  mode,
-  isV3,
-}: {
-  inputOffset?: number;
-  adornmentConfig: AdornmentConfig[];
-  leftAffixWidth: number;
-  rightAffixWidth: number;
-  mode?: 'outlined' | 'flat';
-  paddingHorizontal?: DimensionValue;
-  isV3?: boolean;
-}): AdornmentStyleAdjustmentForNativeInput | {} {
-  const { OUTLINED_INPUT_OFFSET, ADORNMENT_OFFSET } = getConstants(isV3);
-
-  if (adornmentConfig.length) {
-    const adornmentStyleAdjustmentForNativeInput = adornmentConfig.map(
-      ({ type, side }: AdornmentConfig) => {
-        const isLeftSide = side === AdornmentSide.Left;
-        const inputModeAdornemntOffset =
-          mode === InputMode.Outlined
-            ? ADORNMENT_OFFSET + OUTLINED_INPUT_OFFSET
-            : ADORNMENT_OFFSET;
-        const paddingKey = `padding${captalize(side)}`;
-        const affixWidth = isLeftSide ? leftAffixWidth : rightAffixWidth;
-        const padding =
-          typeof paddingHorizontal === 'number'
-            ? paddingHorizontal
-            : inputModeAdornemntOffset;
-        const offset = affixWidth + padding;
-
-        const isAffix = type === AdornmentType.Affix;
-        const marginKey = `margin${captalize(side)}`;
-
-        return {
-          [marginKey]: isAffix ? 0 : offset,
-          [paddingKey]: isAffix ? offset : inputOffset,
-        };
-      }
-    );
-    const allStyleAdjustmentsMerged =
-      adornmentStyleAdjustmentForNativeInput.reduce(
-        (mergedStyles, currentStyle) => {
-          return {
-            ...mergedStyles,
-            ...currentStyle,
-          };
-        },
-        {}
-      );
-    return allStyleAdjustmentsMerged;
-  } else {
-    return [{}];
-  }
-}
-
-const captalize = (text: string) =>
-  text.charAt(0).toUpperCase() + text.slice(1);
-
-export interface TextInputAdornmentProps {
-  forceFocus: () => void;
-  adornmentConfig: AdornmentConfig[];
-  topPosition: {
-    [AdornmentType.Affix]: {
-      [AdornmentSide.Left]: number | null;
-      [AdornmentSide.Right]: number | null;
-    };
-    [AdornmentType.Icon]: number;
-  };
-  onAffixChange: {
-    [AdornmentSide.Left]: (event: LayoutChangeEvent) => void;
-    [AdornmentSide.Right]: (event: LayoutChangeEvent) => void;
-  };
-  left?: React.ReactNode;
-  right?: React.ReactNode;
-  textStyle?: StyleProp<TextStyle>;
-  visible?: Animated.Value;
-  isTextInputFocused: boolean;
-  paddingHorizontal?: DimensionValue;
-  maxFontSizeMultiplier?: number | undefined | null;
-  theme?: ThemeProp;
-  disabled?: boolean;
-}
-
-const TextInputAdornment: React.FunctionComponent<TextInputAdornmentProps> = ({
-  adornmentConfig,
-  left,
-  right,
-  onAffixChange,
-  textStyle,
-  visible,
-  topPosition,
-  isTextInputFocused,
-  forceFocus,
-  paddingHorizontal,
-  maxFontSizeMultiplier,
-  theme,
-  disabled,
-}) => {
-  if (adornmentConfig.length) {
-    return (
-      <>
-        {adornmentConfig.map(({ type, side }: AdornmentConfig) => {
-          let inputAdornmentComponent;
-          if (side === AdornmentSide.Left) {
-            inputAdornmentComponent = left;
-          } else if (side === AdornmentSide.Right) {
-            inputAdornmentComponent = right;
-          }
-
-          const commonProps = {
-            side: side,
-            testID: `${side}-${type}-adornment`,
-            isTextInputFocused,
-            paddingHorizontal,
-            disabled,
-          };
-          if (type === AdornmentType.Icon) {
-            return (
-              <IconAdornment
-                {...commonProps}
-                theme={theme}
-                key={side}
-                icon={inputAdornmentComponent}
-                topPosition={topPosition[AdornmentType.Icon]}
-                forceFocus={forceFocus}
-              />
-            );
-          } else if (type === AdornmentType.Affix) {
-            return (
-              <AffixAdornment
-                {...commonProps}
-                key={side}
-                topPosition={topPosition[AdornmentType.Affix][side]}
-                affix={inputAdornmentComponent}
-                textStyle={textStyle}
-                onLayout={onAffixChange[side]}
-                visible={visible}
-                maxFontSizeMultiplier={maxFontSizeMultiplier}
-              />
-            );
-          } else {
-            return null;
-          }
-        })}
-      </>
-    );
-  } else {
-    return null;
-  }
-};
-
-export default TextInputAdornment;
diff --git a/src/components/TextInput/Adornment/TextInputAffix.tsx b/src/components/TextInput/Adornment/TextInputAffix.tsx
deleted file mode 100644
index 22062449ac..0000000000
--- a/src/components/TextInput/Adornment/TextInputAffix.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-import React from 'react';
-import {
-  Animated,
-  DimensionValue,
-  GestureResponderEvent,
-  LayoutChangeEvent,
-  Pressable,
-  StyleProp,
-  StyleSheet,
-  Text,
-  TextStyle,
-  ViewStyle,
-} from 'react-native';
-
-import { AdornmentSide } from './enums';
-import { getTextColor } from './utils';
-import { useInternalTheme } from '../../../core/theming';
-import type { ThemeProp } from '../../../types';
-import { getConstants } from '../helpers';
-
-export type Props = {
-  /**
-   * Text to show.
-   */
-  text: string;
-  onLayout?: (event: LayoutChangeEvent) => void;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-  /**
-   * Accessibility label for the affix. This is read by the screen reader when the user taps the affix.
-   */
-  accessibilityLabel?: string;
-  /**
-   * Style that is passed to the Text element.
-   */
-  textStyle?: StyleProp<TextStyle>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-type ContextState = {
-  topPosition: number | null;
-  onLayout?: (event: LayoutChangeEvent) => void;
-  visible?: Animated.Value;
-  textStyle?: StyleProp<TextStyle>;
-  side: AdornmentSide;
-  paddingHorizontal?: DimensionValue;
-  maxFontSizeMultiplier?: number | undefined | null;
-  testID?: string;
-  disabled?: boolean;
-};
-
-const AffixContext = React.createContext<ContextState>({
-  textStyle: { fontFamily: '', color: '' },
-  topPosition: null,
-  side: AdornmentSide.Left,
-});
-
-const AffixAdornment: React.FunctionComponent<
-  {
-    affix: React.ReactNode;
-    testID: string;
-  } & ContextState
-> = ({
-  affix,
-  side,
-  textStyle,
-  topPosition,
-  onLayout,
-  visible,
-  paddingHorizontal,
-  maxFontSizeMultiplier,
-  testID,
-  disabled,
-}) => {
-  return (
-    <AffixContext.Provider
-      value={{
-        side,
-        textStyle,
-        topPosition,
-        onLayout,
-        visible,
-        paddingHorizontal,
-        maxFontSizeMultiplier,
-        testID,
-        disabled,
-      }}
-    >
-      {affix}
-    </AffixContext.Provider>
-  );
-};
-
-/**
- * A component to render a leading / trailing text in the TextInput
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { TextInput } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [text, setText] = React.useState('');
- *
- *   return (
- *     <TextInput
- *       mode="outlined"
- *       label="Outlined input"
- *       placeholder="Type something"
- *       right={<TextInput.Affix text="/100" />}
- *     />
- *   );
- * };
- *
- * export default MyComponent;
- * ```
- */
-
-const TextInputAffix = ({
-  text,
-  textStyle: labelStyle,
-  theme: themeOverrides,
-  onLayout: onTextLayout,
-  onPress,
-  accessibilityLabel = text,
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { AFFIX_OFFSET } = getConstants(theme.isV3);
-
-  const {
-    textStyle,
-    onLayout,
-    topPosition,
-    side,
-    visible,
-    paddingHorizontal,
-    maxFontSizeMultiplier,
-    testID,
-    disabled,
-  } = React.useContext(AffixContext);
-
-  const offset =
-    typeof paddingHorizontal === 'number' ? paddingHorizontal : AFFIX_OFFSET;
-
-  const style = {
-    top: topPosition,
-    [side]: offset,
-  } as ViewStyle;
-
-  const textColor = getTextColor({ theme, disabled });
-
-  const content = (
-    <Text
-      maxFontSizeMultiplier={maxFontSizeMultiplier}
-      style={[{ color: textColor }, textStyle, labelStyle]}
-      onLayout={onTextLayout}
-      testID={`${testID}-text`}
-    >
-      {text}
-    </Text>
-  );
-
-  return (
-    <Animated.View
-      style={[
-        styles.container,
-        style,
-        {
-          opacity:
-            visible?.interpolate({
-              inputRange: [0, 1],
-              outputRange: [1, 0],
-            }) || 1,
-        },
-      ]}
-      onLayout={onLayout}
-      testID={testID}
-    >
-      {onPress ? (
-        <Pressable
-          onPress={onPress}
-          accessibilityRole="button"
-          accessibilityLabel={accessibilityLabel}
-        >
-          {content}
-        </Pressable>
-      ) : (
-        content
-      )}
-    </Animated.View>
-  );
-};
-
-TextInputAffix.displayName = 'TextInput.Affix';
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default TextInputAffix;
-
-// @component-docs ignore-next-line
-export { TextInputAffix, AffixAdornment };
diff --git a/src/components/TextInput/Adornment/TextInputIcon.tsx b/src/components/TextInput/Adornment/TextInputIcon.tsx
deleted file mode 100644
index bd38ca64ab..0000000000
--- a/src/components/TextInput/Adornment/TextInputIcon.tsx
+++ /dev/null
@@ -1,195 +0,0 @@
-import React from 'react';
-import {
-  ColorValue,
-  GestureResponderEvent,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import { getIconColor } from './utils';
-import { useInternalTheme } from '../../../core/theming';
-import type { $Omit, ThemeProp } from '../../../types';
-import type { IconSource } from '../../Icon';
-import IconButton from '../../IconButton/IconButton';
-import { ICON_SIZE } from '../constants';
-import { getConstants } from '../helpers';
-
-export type Props = $Omit<
-  React.ComponentProps<typeof IconButton>,
-  'icon' | 'theme' | 'color' | 'iconColor'
-> & {
-  /**
-   * @renamed Renamed from 'name' to 'icon` in v5.x
-   * Icon to show.
-   */
-  icon: IconSource;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-  /**
-   * Whether the TextInput will focus after onPress.
-   */
-  forceTextInputFocus?: boolean;
-  /**
-   * Color of the icon or a function receiving a boolean indicating whether the TextInput is focused and returning the color.
-   */
-  color?: ((isTextInputFocused: boolean) => string | undefined) | string;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
-  style?: StyleProp<ViewStyle>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-type StyleContextType = {
-  style: StyleProp<ViewStyle>;
-  isTextInputFocused: boolean;
-  forceFocus: () => void;
-  testID: string;
-  disabled?: boolean;
-};
-
-const StyleContext = React.createContext<StyleContextType>({
-  style: {},
-  isTextInputFocused: false,
-  forceFocus: () => {},
-  testID: '',
-});
-
-const IconAdornment: React.FunctionComponent<
-  {
-    testID: string;
-    icon: React.ReactNode;
-    topPosition: number;
-    side: 'left' | 'right';
-    theme?: ThemeProp;
-    disabled?: boolean;
-  } & Omit<StyleContextType, 'style'>
-> = ({
-  icon,
-  topPosition,
-  side,
-  isTextInputFocused,
-  forceFocus,
-  testID,
-  theme: themeOverrides,
-  disabled,
-}) => {
-  const { isV3 } = useInternalTheme(themeOverrides);
-  const { ICON_OFFSET } = getConstants(isV3);
-
-  const style = {
-    top: topPosition,
-    [side]: ICON_OFFSET,
-  };
-  const contextState = {
-    style,
-    isTextInputFocused,
-    forceFocus,
-    testID,
-    disabled,
-  };
-
-  return (
-    <StyleContext.Provider value={contextState}>{icon}</StyleContext.Provider>
-  );
-};
-
-/**
- * A component to render a leading / trailing icon in the TextInput
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { TextInput } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [text, setText] = React.useState('');
- *
- *   return (
- *     <TextInput
- *       label="Password"
- *       secureTextEntry
- *       right={<TextInput.Icon icon="eye" />}
- *     />
- *   );
- * };
- *
- * export default MyComponent;
- * ```
- */
-
-const TextInputIcon = ({
-  icon,
-  onPress,
-  forceTextInputFocus = true,
-  color: customColor,
-  theme: themeOverrides,
-  rippleColor,
-  ...rest
-}: Props) => {
-  const { style, isTextInputFocused, forceFocus, testID, disabled } =
-    React.useContext(StyleContext);
-
-  const onPressWithFocusControl = React.useCallback(
-    (e: GestureResponderEvent) => {
-      if (forceTextInputFocus && !isTextInputFocused) {
-        forceFocus();
-      }
-
-      onPress?.(e);
-    },
-    [forceTextInputFocus, forceFocus, isTextInputFocused, onPress]
-  );
-
-  const theme = useInternalTheme(themeOverrides);
-
-  const iconColor = getIconColor({
-    theme,
-    disabled,
-    isTextInputFocused,
-    customColor,
-  });
-
-  return (
-    <View style={[styles.container, style]}>
-      <IconButton
-        icon={icon}
-        style={styles.iconButton}
-        size={ICON_SIZE}
-        onPress={onPressWithFocusControl}
-        iconColor={iconColor}
-        testID={testID}
-        theme={themeOverrides}
-        rippleColor={rippleColor}
-        {...rest}
-      />
-    </View>
-  );
-};
-TextInputIcon.displayName = 'TextInput.Icon';
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    width: ICON_SIZE,
-    height: ICON_SIZE,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  iconButton: {
-    margin: 0,
-  },
-});
-
-export default TextInputIcon;
-
-// @component-docs ignore-next-line
-export { IconAdornment };
diff --git a/src/components/TextInput/Adornment/enums.tsx b/src/components/TextInput/Adornment/enums.tsx
deleted file mode 100644
index 9a364f7215..0000000000
--- a/src/components/TextInput/Adornment/enums.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-export enum AdornmentType {
-  Icon = 'icon',
-  Affix = 'affix',
-}
-export enum AdornmentSide {
-  Right = 'right',
-  Left = 'left',
-}
-export enum InputMode {
-  Outlined = 'outlined',
-  Flat = 'flat',
-}
diff --git a/src/components/TextInput/Adornment/types.tsx b/src/components/TextInput/Adornment/types.tsx
deleted file mode 100644
index fbd81c936a..0000000000
--- a/src/components/TextInput/Adornment/types.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { AdornmentSide, AdornmentType } from './enums';
-
-export type AdornmentConfig = {
-  side: AdornmentSide;
-  type: AdornmentType;
-};
-export type AdornmentStyleAdjustmentForNativeInput = {
-  adornmentStyleAdjustmentForNativeInput: Array<
-    { paddingRight: number; paddingLeft: number } | {}
-  >;
-};
diff --git a/src/components/TextInput/Adornment/utils.ts b/src/components/TextInput/Adornment/utils.ts
deleted file mode 100644
index e7dae2b487..0000000000
--- a/src/components/TextInput/Adornment/utils.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import color from 'color';
-
-import type { InternalTheme } from '../../../types';
-
-type BaseProps = {
-  theme: InternalTheme;
-  disabled?: boolean;
-};
-
-export function getTextColor({ theme, disabled }: BaseProps) {
-  if (theme.isV3) {
-    if (disabled) {
-      return theme.colors.onSurfaceDisabled;
-    }
-    return theme.colors.onSurfaceVariant;
-  }
-  return color(theme.colors?.text)
-    .alpha(theme.dark ? 0.7 : 0.54)
-    .rgb()
-    .string();
-}
-
-export function getIconColor({
-  theme,
-  isTextInputFocused,
-  disabled,
-  customColor,
-}: BaseProps & {
-  isTextInputFocused: boolean;
-  customColor?: ((isTextInputFocused: boolean) => string | undefined) | string;
-}) {
-  if (typeof customColor === 'function') {
-    return customColor(isTextInputFocused);
-  }
-  if (customColor) {
-    return customColor;
-  }
-
-  if (!theme.isV3) {
-    return theme.colors.text;
-  }
-
-  if (disabled) {
-    return theme.colors.onSurfaceDisabled;
-  }
-
-  return theme.colors.onSurfaceVariant;
-}
diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx
deleted file mode 100644
index f0818f98f0..0000000000
--- a/src/components/TextInput/Label/InputLabel.tsx
+++ /dev/null
@@ -1,219 +0,0 @@
-import React from 'react';
-import {
-  Animated,
-  ColorValue,
-  Platform,
-  StyleSheet,
-  useWindowDimensions,
-  View,
-} from 'react-native';
-
-import AnimatedText from '../../Typography/AnimatedText';
-import { getConstants } from '../helpers';
-import type { InputLabelProps } from '../types';
-
-const InputLabel = (props: InputLabelProps) => {
-  const {
-    labeled,
-    wiggle,
-    error,
-    focused,
-    opacity,
-    labelLayoutWidth,
-    labelLayoutHeight,
-    labelBackground,
-    label,
-    labelError,
-    onLayoutAnimatedText,
-    onLabelTextLayout,
-    hasActiveOutline,
-    activeColor,
-    placeholderStyle,
-    baseLabelTranslateX,
-    baseLabelTranslateY,
-    font,
-    fontSize,
-    lineHeight,
-    fontWeight,
-    placeholderOpacity,
-    wiggleOffsetX,
-    labelScale,
-    topPosition,
-    paddingLeft,
-    paddingRight,
-    backgroundColor,
-    roundness,
-    placeholderColor,
-    errorColor,
-    labelTranslationXOffset,
-    maxFontSizeMultiplier,
-    testID,
-    isV3,
-    inputContainerLayout,
-    scaledLabel,
-  } = props;
-
-  const { INPUT_PADDING_HORIZONTAL } = getConstants(isV3);
-  const { width } = useWindowDimensions();
-
-  const isWeb = Platform.OS === 'web';
-
-  const paddingOffset =
-    paddingLeft && paddingRight ? { paddingLeft, paddingRight } : {};
-
-  const labelTranslationX = {
-    transform: [
-      {
-        // Offset label scale since RN doesn't support transform origin
-        translateX: labeled.interpolate({
-          inputRange: [0, 1],
-          outputRange: [baseLabelTranslateX, labelTranslationXOffset || 0],
-        }),
-      },
-    ],
-  };
-
-  const labelStyle = {
-    ...font,
-    fontSize,
-    lineHeight,
-    fontWeight,
-    opacity: labeled.interpolate({
-      inputRange: [0, 1],
-      outputRange: [hasActiveOutline ? 1 : 0, 0],
-    }),
-    transform: [
-      {
-        // Wiggle the label when there's an error
-        translateX: wiggle
-          ? error.interpolate({
-              inputRange: [0, 0.5, 1],
-              outputRange: [0, wiggleOffsetX, 0],
-            })
-          : 0,
-      },
-      {
-        // Move label to top
-        translateY:
-          baseLabelTranslateY !== 0
-            ? labeled.interpolate({
-                inputRange: [0, 1],
-                outputRange: [baseLabelTranslateY, 0],
-              })
-            : 0,
-      },
-      {
-        // Make label smaller
-        scale:
-          labelScale !== 0
-            ? labeled.interpolate({
-                inputRange: [0, 1],
-                outputRange: [labelScale, 1],
-              })
-            : labeled,
-      },
-    ],
-  };
-
-  const labelWidth =
-    (inputContainerLayout.width + INPUT_PADDING_HORIZONTAL / 2) /
-    (scaledLabel ? labelScale : 1);
-
-  const commonStyles = [
-    placeholderStyle,
-    {
-      top: topPosition,
-    },
-    {
-      maxWidth: labelWidth,
-    },
-    labelStyle,
-    paddingOffset || {},
-  ];
-
-  const textColor = (
-    labelError && errorColor ? errorColor : placeholderColor
-  ) as ColorValue;
-
-  return (
-    // Position colored placeholder and gray placeholder on top of each other and crossfade them
-    // This gives the effect of animating the color, but allows us to use native driver
-    <View
-      pointerEvents="none"
-      style={[StyleSheet.absoluteFill, styles.overflow, styles.labelContainer]}
-    >
-      <Animated.View
-        pointerEvents="none"
-        style={[
-          StyleSheet.absoluteFill,
-          !isWeb && { width },
-          { opacity },
-          labelTranslationX,
-        ]}
-      >
-        <View
-          style={{
-            width: labelWidth,
-          }}
-        >
-          {labelBackground?.({
-            labeled,
-            labelLayoutWidth,
-            labelLayoutHeight,
-            labelStyle,
-            placeholderStyle,
-            baseLabelTranslateX,
-            topPosition,
-            label,
-            backgroundColor,
-            roundness,
-            maxFontSizeMultiplier: maxFontSizeMultiplier,
-            testID,
-          })}
-          <AnimatedText
-            variant="bodySmall"
-            onLayout={onLayoutAnimatedText}
-            onTextLayout={onLabelTextLayout}
-            style={[
-              commonStyles,
-              {
-                color: activeColor,
-              },
-            ]}
-            numberOfLines={1}
-            maxFontSizeMultiplier={maxFontSizeMultiplier}
-            testID={`${testID}-label-active`}
-          >
-            {label}
-          </AnimatedText>
-          <AnimatedText
-            variant={focused ? 'bodyLarge' : 'bodySmall'}
-            style={[
-              commonStyles,
-              {
-                color: textColor,
-                opacity: placeholderOpacity,
-              },
-            ]}
-            numberOfLines={1}
-            maxFontSizeMultiplier={maxFontSizeMultiplier}
-            testID={`${testID}-label-inactive`}
-          >
-            {label}
-          </AnimatedText>
-        </View>
-      </Animated.View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  overflow: {
-    overflow: 'hidden',
-  },
-  labelContainer: {
-    zIndex: 3,
-  },
-});
-
-export default React.memo(InputLabel);
diff --git a/src/components/TextInput/Label/LabelBackground.tsx b/src/components/TextInput/Label/LabelBackground.tsx
deleted file mode 100644
index 409606d208..0000000000
--- a/src/components/TextInput/Label/LabelBackground.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import * as React from 'react';
-import { Animated, StyleSheet } from 'react-native';
-
-import AnimatedText from '../../Typography/AnimatedText';
-import type { LabelBackgroundProps } from '../types';
-
-const LabelBackground = ({
-  labeled,
-  labelLayoutWidth,
-  labelLayoutHeight,
-  placeholderStyle,
-  baseLabelTranslateX,
-  topPosition,
-  backgroundColor,
-  roundness,
-  labelStyle,
-  maxFontSizeMultiplier,
-  testID,
-}: LabelBackgroundProps) => {
-  const opacity = labeled.interpolate({
-    inputRange: [0, 0.6],
-    outputRange: [1, 0],
-  });
-
-  const labelTranslationX = {
-    translateX: labeled.interpolate({
-      inputRange: [0, 1],
-      outputRange: [-baseLabelTranslateX, 0],
-    }),
-  };
-
-  const labelTextScaleY = {
-    scaleY: labeled.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0.2, 1],
-    }),
-  };
-
-  const labelTextTransform = [...labelStyle.transform, labelTextScaleY];
-
-  const isRounded = roundness > 6;
-  const roundedEdgeCover = isRounded ? (
-    <Animated.View
-      key="labelBackground-view"
-      pointerEvents="none"
-      style={[
-        StyleSheet.absoluteFill,
-        styles.view,
-        {
-          backgroundColor,
-          maxHeight: Math.max(roundness / 3, 2),
-          bottom: Math.max(roundness, 2),
-          transform: [labelTranslationX],
-          opacity,
-        },
-      ]}
-    />
-  ) : null;
-
-  return [
-    roundedEdgeCover,
-    <AnimatedText
-      key="labelBackground-text"
-      testID={`${testID}-label-background`}
-      style={[
-        placeholderStyle,
-        labelStyle,
-        styles.outlinedLabel,
-        {
-          top: topPosition + 1,
-          width: labelLayoutWidth - placeholderStyle.paddingHorizontal,
-          height: labelLayoutHeight,
-          backgroundColor,
-          opacity,
-          transform: labelTextTransform,
-        },
-      ]}
-      numberOfLines={1}
-      maxFontSizeMultiplier={maxFontSizeMultiplier}
-    />,
-  ];
-};
-
-export default LabelBackground;
-
-const styles = StyleSheet.create({
-  view: {
-    position: 'absolute',
-    top: 6,
-    left: 10,
-    width: 12,
-  },
-  // eslint-disable-next-line react-native/no-color-literals
-  outlinedLabel: {
-    position: 'absolute',
-    left: 8,
-    paddingHorizontal: 0,
-    color: 'transparent',
-  },
-});
diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
index 7c289d9152..b89e2b35d4 100644
--- a/src/components/TextInput/TextInput.tsx
+++ b/src/components/TextInput/TextInput.tsx
@@ -1,202 +1,256 @@
-import * as React from 'react';
+import React from 'react';
 import {
-  Animated,
-  LayoutChangeEvent,
-  StyleProp,
+  Pressable,
+  Text,
   TextInput as NativeTextInput,
+  View,
+} from 'react-native';
+import type { TextInputProps as NativeTextInputProps } from 'react-native';
+import type {
+  AccessibilityProps,
+  BlurEvent,
+  ColorValue,
+  FocusEvent,
+  StyleProp,
   TextStyle,
   ViewStyle,
-  NativeSyntheticEvent,
-  TextLayoutEventData,
 } from 'react-native';
 
-import TextInputAffix, {
-  Props as TextInputAffixProps,
-} from './Adornment/TextInputAffix';
-import TextInputIcon, {
-  Props as TextInputIconProps,
-} from './Adornment/TextInputIcon';
-import TextInputFlat from './TextInputFlat';
-import TextInputOutlined from './TextInputOutlined';
-import type { RenderProps, TextInputLabelProp } from './types';
-import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
-import { forwardRef } from '../../utils/forwardRef';
-import { roundLayoutSize } from '../../utils/roundLayoutSize';
-
-const BLUR_ANIMATION_DURATION = 180;
-const FOCUS_ANIMATION_DURATION = 150;
-
-export type Props = React.ComponentPropsWithRef<typeof NativeTextInput> & {
-  /**
-   * Mode of the TextInput.
-   * - `flat` - flat input with an underline.
-   * - `outlined` - input with an outline.
-   *
-   * In `outlined` mode, the background color of the label is derived from `colors?.background` in theme or the `backgroundColor` style.
-   * This component render TextInputOutlined or TextInputFlat based on that props
-   */
-  mode?: 'flat' | 'outlined';
-  /**
-   * The adornment placed on the left side of the input. It can be either `TextInput.Icon` or `TextInput.Affix`.
-   */
-  left?: React.ReactNode;
-  /**
-   * The adornment placed on the right side of the input. It can be either `TextInput.Icon` or `TextInput.Affix`.
-   */
-  right?: React.ReactNode;
-  /**
-   * If true, user won't be able to interact with the component.
-   */
-  disabled?: boolean;
+import Animated from 'react-native-reanimated';
+import type { AnimatedStyle } from 'react-native-reanimated';
+
+import { useTextInput } from './hooks';
+import { styles } from './styles';
+import TextInputErrorIcon from './TextInputErrorIcon';
+import type { TextInputAccessoryProps } from './TextInputIcon';
+import type { InternalTheme, ThemeProp } from '../../theme/types';
+
+export type TextInputAnimationState = {
+  animatedLabelWrapperStyle: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
+  animatedLabelTextStyle: StyleProp<AnimatedStyle<StyleProp<TextStyle>>>;
+  animatedContainerStyle: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
+  animatedActiveOutlineStyle?: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
+};
+
+export type TextInputAnimationHandlers = {
+  runFocusAnimation: (hasText: boolean) => void;
+  runBlurAnimation: (hasText: boolean) => void;
+  syncFloatToValue: (hasText: boolean) => void;
+};
+
+export type TextInputFlags = {
+  isRTL: boolean;
+  isDisabled: boolean;
+  isEditable: boolean | undefined;
+  hasError: boolean;
+  hasCounter: boolean;
+  hasAccessory: boolean;
+  isFloating: boolean;
+  hasPrefix: boolean;
+  hasSuffix: boolean;
+};
+
+export type TextInputColors = {
+  selectionColor: ColorValue;
+  cursorColor: ColorValue;
+  placeholderTextColor: ColorValue;
+};
+
+export type GetAccessibilityDataReturn = {
+  input: AccessibilityProps & { 'aria-invalid'?: boolean };
+  supportingText: AccessibilityProps;
+  counter: AccessibilityProps;
+};
+
+export type GetAccessibilityDataProps = {
+  data: TextInputProps;
+  inputLength: number;
+  hasError: boolean;
+  hasCounter: boolean;
+  isDisabled: boolean;
+};
+
+export type TextInputVariant = 'filled' | 'outlined';
+
+export type TextInputSharedApi = {
+  input: React.RefObject<NativeTextInput | null>;
+  theme: InternalTheme;
+  isFocused: boolean;
+  isRTL: boolean;
+  isDisabled: boolean;
+  hasAccessory: boolean;
+  hasError: boolean;
+  hasSuffix: boolean;
+  animatedLabelWrapperStyle: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
+  animatedLabelTextStyle: StyleProp<AnimatedStyle<StyleProp<TextStyle>>>;
+  animatedActiveOutlineStyle?: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
+};
+
+export type SharedTextInputStyleData = {
+  isRTL: boolean;
+  animatedLabelTextStyles: StyleProp<AnimatedStyle<StyleProp<TextStyle>>>;
+  supportingTextStyles: StyleProp<TextStyle>;
+  counterStyles: StyleProp<TextStyle>;
+  prefixStyles: StyleProp<TextStyle>;
+  suffixStyles: StyleProp<TextStyle>;
+  leadingAccessoryStyles: StyleProp<ViewStyle>;
+  trailingAccessoryStyles: StyleProp<ViewStyle>;
+};
+
+export type FilledTextInputHookData = SharedTextInputStyleData & {
+  input: React.RefObject<NativeTextInput | null>;
+  isDisabled: boolean;
+  hasError: boolean;
+  hasSuffix: boolean;
+  animatedLabelWrapperStyles: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
+  containerStyles: StyleProp<ViewStyle>;
+  fieldStyles: StyleProp<ViewStyle>;
+  disabledBackgroundStyles: StyleProp<ViewStyle> | undefined;
+  outlineStyles: StyleProp<ViewStyle>;
+  animatedActiveOutlineStyles: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
+  inputStyles: StyleProp<TextStyle>;
+};
+
+export type OutlinedTextInputHookData = SharedTextInputStyleData & {
+  input: React.RefObject<NativeTextInput | null>;
+  isDisabled: boolean;
+  hasError: boolean;
+  hasSuffix: boolean;
+  animatedLabelWrapperStyles: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
+  containerStyles: StyleProp<ViewStyle>;
+  fieldStyles: StyleProp<ViewStyle>;
+  disabledBackgroundStyles: undefined;
+  outlineStyles: StyleProp<ViewStyle>;
+  inputStyles: StyleProp<TextStyle>;
+};
+
+export type TextInputLayoutData =
+  | FilledTextInputHookData
+  | OutlinedTextInputHookData;
+
+export type TextInputLayoutState = Omit<
+  TextInputLayoutData,
+  'input' | 'isDisabled' | 'hasError' | 'hasSuffix'
+>;
+
+export type TextInputHookReturn = SharedTextInputStyleData & {
+  input: React.RefObject<NativeTextInput | null>;
+  isDisabled: boolean;
+  isEditable: boolean | undefined;
+  hasPrefix: boolean;
+  hasCounter: boolean;
+  hasSuffix: boolean;
+  hasError: boolean;
+  placeholderTextColor: ColorValue;
+  selectionColor: ColorValue;
+  cursorColor: ColorValue;
+  animatedActiveOutlineStyles:
+    | StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>
+    | undefined;
+  animatedContainerStyle: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
+  animatedLabelWrapperStyles: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
+  containerStyles: StyleProp<ViewStyle>;
+  fieldStyles: StyleProp<ViewStyle>;
+  disabledBackgroundStyles: StyleProp<ViewStyle> | undefined;
+  outlineStyles: StyleProp<ViewStyle>;
+  inputStyles: StyleProp<TextStyle>;
+  placeholder: string | undefined;
+  counterText: string;
+  accessibilityProps: GetAccessibilityDataReturn;
+  renderLeadingAccessory:
+    | ((props: TextInputAccessoryProps) => React.ReactNode)
+    | undefined;
+  renderTrailingAccessory:
+    | ((props: TextInputAccessoryProps) => React.ReactNode)
+    | undefined;
+  onChangeText: (text: string) => void;
+  onFocus: (e: FocusEvent) => void;
+  onBlur: (e: BlurEvent) => void;
+  focusInput: () => void;
+};
+
+export type TextInputRenderProps = React.ComponentPropsWithoutRef<
+  typeof NativeTextInput
+> & {
+  ref?: React.RefObject<NativeTextInput | null>;
+};
+
+export type TextInputHandles = Pick<
+  NativeTextInput,
+  'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps' | 'setSelection'
+>;
+
+export type TextInputProps = NativeTextInputProps & {
   /**
-   * The text or component to use for the floating label.
+   * Imperative handle exposing a subset of native `TextInput` methods
+   * with side-effect handling (e.g. `clear()` syncs internal state and animations).
    */
-  label?: TextInputLabelProp;
+  ref?: React.Ref<TextInputHandles>;
   /**
-   * Placeholder for the input.
+   * Determines the visual style of the text input.
+   *
+   * - `filled` — filled background with an animated underline; higher visual emphasis.
+   * - `outlined` — stroke outline only; lower visual emphasis.
    */
-  placeholder?: string;
+  variant?: TextInputVariant;
   /**
-   * Whether to style the TextInput with error style.
+   * When `true`, the field uses error styling and replaces the trailing accessory
+   * with an error indicator when no `endAccessory` is provided.
    */
   error?: boolean;
   /**
-   * Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.
-   */
-  onChangeText?: Function;
-  /**
-   * Selection color of the input. On iOS, it sets both the selection color and cursor color.
-   * On Android, it sets only the selection color.
-   */
-  selectionColor?: string;
-  /**
-   * @platform Android only
-   * Cursor (or "caret") color of the input on Android.
-   * This property has no effect on iOS.
-   */
-  cursorColor?: string;
-  /**
-   * Inactive underline color of the input.
-   */
-  underlineColor?: string;
-  /**
-   * Active underline color of the input.
-   */
-  activeUnderlineColor?: string;
-  /**
-   * Inactive outline color of the input.
-   */
-  outlineColor?: string;
-  /**
-   * Active outline color of the input.
-   */
-  activeOutlineColor?: string;
-  /**
-   * Color of the text in the input.
-   */
-  textColor?: string;
-  /**
-   * Sets min height with densed layout. For `TextInput` in `flat` mode
-   * height is `64dp` or in dense layout - `52dp` with label or `40dp` without label.
-   * For `TextInput` in `outlined` mode
-   * height is `56dp` or in dense layout - `40dp` regardless of label.
-   * When you apply `height` prop in style the `dense` prop affects only `paddingVertical` inside `TextInput`
-   */
-  dense?: boolean;
-  /**
-   * Whether the input can have multiple lines.
-   */
-  multiline?: boolean;
-  /**
-   * @platform Android only
-   * The number of lines to show in the input (Android only).
+   * The label text to display above the input.
    */
-  numberOfLines?: number;
+  label?: string;
   /**
-   * Callback that is called when the text input is focused.
+   * Supporting text to display below the input (Material Design 3).
    */
-  onFocus?: (args: any) => void;
+  supportingText?: string;
   /**
-   * Callback that is called when the text input is blurred.
+   * When `true`, displays a character counter below the input on the trailing
+   * side, showing `currentLength/maxLength`. Requires `maxLength` to be set.
    */
-  onBlur?: (args: any) => void;
+  counter?: boolean;
   /**
-   *
-   * Callback to render a custom input component such as `react-native-text-input-mask`
-   * instead of the default `TextInput` component from `react-native`.
-   *
-   * Example:
-   * ```js
-   * <TextInput
-   *   label="Phone number"
-   *   render={props =>
-   *     <TextInputMask
-   *       {...props}
-   *       mask="+[00] [000] [000] [000]"
-   *     />
-   *   }
-   * />
-   * ```
+   * This is separate from `editable={false}`, which makes the text read-only while the
+   * input can still be focused and text selected.
    */
-  render?: (props: RenderProps) => React.ReactNode;
-  /**
-   * Value of the text input.
-   */
-  value?: string;
+  disabled?: boolean;
   /**
-   * Pass `fontSize` prop to modify the font size inside `TextInput`.
-   * Pass `height` prop to set `TextInput` height. When `height` is passed,
-   * `dense` prop will affect only input's `paddingVertical`.
-   * Pass `paddingHorizontal` to modify horizontal padding.
-   * This can be used to get MD Guidelines v1 TextInput look.
+   * A short text string displayed at the start of the input (e.g. `"$"`).
    */
-  style?: StyleProp<TextStyle>;
+  prefix?: string;
   /**
-   * @optional
+   * A short text string displayed at the end of the input (e.g. `"/100"`).
    */
+  suffix?: string;
   theme?: ThemeProp;
   /**
-   * testID to be used on tests.
+   * An optional component to render on the start side of the input (leading in LTR).
+   * Can be a custom component or `TextInput.Icon`.
    */
-  testID?: string;
+  startAccessory?: (props: TextInputAccessoryProps) => React.ReactNode;
   /**
-   * Pass custom style directly to the input itself.
-   * Overrides input style
-   * Example: `paddingLeft`, `backgroundColor`
+   * An optional component to render on the end side of the input (trailing in LTR).
+   * Can be a custom component or `TextInput.Icon`.
    */
-  contentStyle?: StyleProp<TextStyle>;
+  endAccessory?: (props: TextInputAccessoryProps) => React.ReactNode;
   /**
-   * Pass style to override the default style of outlined wrapper.
-   * Overrides style when mode is set to `outlined`
-   * Example: `borderRadius`, `borderColor`
+   * Callback to render a custom input component in place of the native `TextInput`.
+   * Receives all props that would be passed to `TextInput`, allowing integration
+   * with third-party inputs such as masked inputs.
    */
-  outlineStyle?: StyleProp<ViewStyle>;
-  /**
-   * Pass style to override the default style of underlined wrapper.
-   * Overrides style when mode is set to `flat`
-   * Example: `borderRadius`, `borderColor`
-   */
-  underlineStyle?: StyleProp<ViewStyle>;
+  render?: (props: TextInputRenderProps) => React.ReactNode;
 };
 
-interface CompoundedComponent
-  extends React.ForwardRefExoticComponent<
-    Props & React.RefAttributes<TextInputHandles>
-  > {
-  Icon: React.FunctionComponent<TextInputIconProps>;
-  Affix: React.FunctionComponent<Partial<TextInputAffixProps>>;
-}
-
-type TextInputHandles = Pick<
-  NativeTextInput,
-  'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps' | 'setSelection'
->;
-
-const DefaultRenderer = (props: RenderProps) => <NativeTextInput {...props} />;
+const defaultRenderer = (props: TextInputRenderProps) => (
+  <NativeTextInput {...props} />
+);
 
 /**
- * A component to allow users to input text.
+ * A text input lets users enter and edit text. It shows an optional floating label,
+ * supports `filled` and `outlined` variants, optional supporting text (including
+ * error state), and start/end accessories.
  *
  * ## Usage
  * ```js
@@ -204,13 +258,31 @@ const DefaultRenderer = (props: RenderProps) => <NativeTextInput {...props} />;
  * import { TextInput } from 'react-native-paper';
  *
  * const MyComponent = () => {
- *   const [text, setText] = React.useState("");
+ *   const [text, setText] = React.useState('');
+ *
+ *   const searchAccessory = (accessoryProps) => (
+ *     <TextInput.Icon {...accessoryProps} icon="magnify" />
+ *   );
+ *
+ *   const clearAccessory = ({ style, disabled }) => (
+ *     <Pressable
+ *       style={style}
+ *       disabled={disabled}
+ *       onPress={() => setText('')}
+ *       role="button"
+ *       aria-label="Clear text"
+ *     >
+ *       <Icon source="close" size={24} />
+ *     </Pressable>
+ *   );
  *
  *   return (
  *     <TextInput
- *       label="Email"
+ *       label="Search"
  *       value={text}
- *       onChangeText={text => setText(text)}
+ *       onChangeText={setText}
+ *       startAccessory={searchAccessory}
+ *       endAccessory={clearAccessory}
  *     />
  *   );
  * };
@@ -220,358 +292,163 @@ const DefaultRenderer = (props: RenderProps) => <NativeTextInput {...props} />;
  *
  * @extends TextInput props https://reactnative.dev/docs/textinput#props
  */
-const TextInput = forwardRef<TextInputHandles, Props>(
-  (
-    {
-      mode = 'flat',
-      dense = false,
-      disabled = false,
-      error: errorProp = false,
-      multiline = false,
-      editable = true,
-      contentStyle,
-      render = DefaultRenderer,
-      theme: themeOverrides,
-      ...rest
-    }: Props,
-    ref
-  ) => {
-    const theme = useInternalTheme(themeOverrides);
-    const isControlled = rest.value !== undefined;
-    const validInputValue = isControlled ? rest.value : rest.defaultValue;
-
-    const { current: labeled } = React.useRef<Animated.Value>(
-      new Animated.Value(validInputValue ? 0 : 1)
-    );
-    const { current: error } = React.useRef<Animated.Value>(
-      new Animated.Value(errorProp ? 1 : 0)
-    );
-    const [focused, setFocused] = React.useState<boolean>(false);
-    const [displayPlaceholder, setDisplayPlaceholder] =
-      React.useState<boolean>(false);
-    const [uncontrolledValue, setUncontrolledValue] = React.useState<
-      string | undefined
-    >(validInputValue);
-    // Use value from props instead of local state when input is controlled
-    const value = isControlled ? rest.value : uncontrolledValue;
-
-    const [labelTextLayout, setLabelTextLayout] = React.useState({
-      width: 33,
-    });
-
-    const [inputContainerLayout, setInputContainerLayout] = React.useState({
-      width: 65,
-    });
-
-    const [labelLayout, setLabelLayout] = React.useState<{
-      measured: boolean;
-      width: number;
-      height: number;
-    }>({
-      measured: false,
-      width: 0,
-      height: 0,
-    });
-    const [leftLayout, setLeftLayout] = React.useState<{
-      height: number | null;
-      width: number | null;
-    }>({
-      width: null,
-      height: null,
-    });
-    const [rightLayout, setRightLayout] = React.useState<{
-      height: number | null;
-      width: number | null;
-    }>({
-      width: null,
-      height: null,
-    });
-
-    const timer = React.useRef<NodeJS.Timeout | undefined>(undefined);
-    const root = React.useRef<NativeTextInput | undefined | null>(null);
-
-    const { scale } = theme.animation;
-
-    React.useImperativeHandle(ref, () => ({
-      focus: () => root.current?.focus(),
-      clear: () => root.current?.clear(),
-      setNativeProps: (args: Object) => root.current?.setNativeProps(args),
-      isFocused: () => root.current?.isFocused() || false,
-      blur: () => root.current?.blur(),
-      forceFocus: () => root.current?.focus(),
-      setSelection: (start: number, end: number) =>
-        root.current?.setSelection(start, end),
-    }));
-
-    React.useEffect(() => {
-      // When the input has an error, we wiggle the label and apply error styles
-      if (errorProp) {
-        // show error
-        Animated.timing(error, {
-          toValue: 1,
-          duration: FOCUS_ANIMATION_DURATION * scale,
-          // To prevent this - https://github.com/callstack/react-native-paper/issues/941
-          useNativeDriver: true,
-        }).start();
-      } else {
-        // hide error
-        {
-          Animated.timing(error, {
-            toValue: 0,
-            duration: BLUR_ANIMATION_DURATION * scale,
-            // To prevent this - https://github.com/callstack/react-native-paper/issues/941
-            useNativeDriver: true,
-          }).start();
-        }
-      }
-    }, [errorProp, scale, error]);
-
-    React.useEffect(() => {
-      // Show placeholder text only if the input is focused, or there's no label
-      // We don't show placeholder if there's a label because the label acts as placeholder
-      // When focused, the label moves up, so we can show a placeholder
-      if (focused || !rest.label) {
-        // If the user wants to use the contextMenu, when changing the placeholder, the contextMenu is closed
-        // This is a workaround to mitigate this behavior in scenarios where the placeholder is not specified.
-        if (rest.placeholder) {
-          // Display placeholder in a delay to offset the label animation
-          // If we show it immediately, they'll overlap and look ugly
-          timer.current = setTimeout(
-            () => setDisplayPlaceholder(true),
-            50
-          ) as unknown as NodeJS.Timeout;
-        }
-      } else {
-        // hidePlaceholder
-        setDisplayPlaceholder(false);
-      }
-
-      return () => {
-        if (timer.current) {
-          clearTimeout(timer.current);
-        }
-      };
-    }, [focused, rest.label, rest.placeholder]);
-
-    React.useEffect(() => {
-      labeled.stopAnimation();
-      // The label should be minimized if the text input is focused, or has text
-      // In minimized mode, the label moves up and becomes small
-      // workaround for animated regression for react native > 0.61
-      // https://github.com/callstack/react-native-paper/pull/1440
-      if (value || focused) {
-        // minimize label
-        Animated.timing(labeled, {
-          toValue: 0,
-          duration: BLUR_ANIMATION_DURATION * scale,
-          // To prevent this - https://github.com/callstack/react-native-paper/issues/941
-          useNativeDriver: true,
-        }).start();
-      } else {
-        // restore label
-        Animated.timing(labeled, {
-          toValue: 1,
-          duration: FOCUS_ANIMATION_DURATION * scale,
-          // To prevent this - https://github.com/callstack/react-native-paper/issues/941
-          useNativeDriver: true,
-        }).start();
-      }
-    }, [focused, value, labeled, scale]);
-
-    const onLeftAffixLayoutChange = React.useCallback(
-      (event: LayoutChangeEvent) => {
-        const height = roundLayoutSize(event.nativeEvent.layout.height);
-        const width = roundLayoutSize(event.nativeEvent.layout.width);
-
-        if (width !== leftLayout.width || height !== leftLayout.height) {
-          setLeftLayout({
-            width,
-            height,
-          });
-        }
-      },
-      [leftLayout.height, leftLayout.width]
-    );
-
-    const onRightAffixLayoutChange = React.useCallback(
-      (event: LayoutChangeEvent) => {
-        const width = roundLayoutSize(event.nativeEvent.layout.width);
-        const height = roundLayoutSize(event.nativeEvent.layout.height);
-
-        if (width !== rightLayout.width || height !== rightLayout.height) {
-          setRightLayout({
-            width,
-            height,
-          });
-        }
-      },
-      [rightLayout.height, rightLayout.width]
-    );
-
-    const handleFocus = (args: any) => {
-      if (disabled || !editable) {
-        return;
-      }
-
-      setFocused(true);
-
-      rest.onFocus?.(args);
-    };
-
-    const handleBlur = (args: Object) => {
-      if (!editable) {
-        return;
-      }
-
-      setFocused(false);
-      rest.onBlur?.(args);
-    };
-
-    const handleChangeText = (value: string) => {
-      if (!editable || disabled) {
-        return;
-      }
-
-      if (!isControlled) {
-        // Keep track of value in local state when input is not controlled
-        setUncontrolledValue(value);
-      }
-      rest.onChangeText?.(value);
-    };
-
-    const handleLayoutAnimatedText = React.useCallback(
-      (e: LayoutChangeEvent) => {
-        const width = roundLayoutSize(e.nativeEvent.layout.width);
-        const height = roundLayoutSize(e.nativeEvent.layout.height);
-
-        if (width !== labelLayout.width || height !== labelLayout.height) {
-          setLabelLayout({
-            width,
-            height,
-            measured: true,
-          });
-        }
-      },
-      [labelLayout.height, labelLayout.width]
-    );
-
-    const handleLabelTextLayout = React.useCallback(
-      ({ nativeEvent }: NativeSyntheticEvent<TextLayoutEventData>) => {
-        setLabelTextLayout({
-          width: nativeEvent.lines.reduce(
-            (acc, line) => acc + Math.ceil(line.width),
-            0
-          ),
-        });
-      },
-      []
-    );
-
-    const handleInputContainerLayout = React.useCallback(
-      ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
-        setInputContainerLayout({
-          width: layout.width,
-        });
-      },
-      []
-    );
-
-    const forceFocus = React.useCallback(() => root.current?.focus(), []);
-
-    const { maxFontSizeMultiplier = 1.5 } = rest;
-
-    const scaledLabel = !!(value || focused);
-
-    if (mode === 'outlined') {
-      return (
-        <TextInputOutlined
-          dense={dense}
-          disabled={disabled}
-          error={errorProp}
-          multiline={multiline}
-          editable={editable}
-          render={render}
-          {...rest}
-          theme={theme}
-          value={value}
-          parentState={{
-            labeled,
-            error,
-            focused,
-            displayPlaceholder,
-            value,
-            labelTextLayout,
-            labelLayout,
-            leftLayout,
-            rightLayout,
-            inputContainerLayout,
-          }}
-          innerRef={(ref) => {
-            root.current = ref;
-          }}
-          onFocus={handleFocus}
-          forceFocus={forceFocus}
-          onBlur={handleBlur}
-          onChangeText={handleChangeText}
-          onLayoutAnimatedText={handleLayoutAnimatedText}
-          onInputLayout={handleInputContainerLayout}
-          onLabelTextLayout={handleLabelTextLayout}
-          onLeftAffixLayoutChange={onLeftAffixLayoutChange}
-          onRightAffixLayoutChange={onRightAffixLayoutChange}
-          maxFontSizeMultiplier={maxFontSizeMultiplier}
-          contentStyle={contentStyle}
-          scaledLabel={scaledLabel}
-        />
-      );
-    }
-
-    return (
-      <TextInputFlat
-        dense={dense}
-        disabled={disabled}
-        error={errorProp}
-        multiline={multiline}
-        editable={editable}
-        render={render}
-        {...rest}
-        theme={theme}
-        value={value}
-        parentState={{
-          labeled,
-          error,
-          focused,
-          displayPlaceholder,
-          value,
-          labelTextLayout,
-          labelLayout,
-          leftLayout,
-          rightLayout,
-          inputContainerLayout,
-        }}
-        innerRef={(ref) => {
-          root.current = ref;
-        }}
-        onFocus={handleFocus}
-        forceFocus={forceFocus}
-        onBlur={handleBlur}
-        onInputLayout={handleInputContainerLayout}
-        onChangeText={handleChangeText}
-        onLayoutAnimatedText={handleLayoutAnimatedText}
-        onLabelTextLayout={handleLabelTextLayout}
-        onLeftAffixLayoutChange={onLeftAffixLayoutChange}
-        onRightAffixLayoutChange={onRightAffixLayoutChange}
-        maxFontSizeMultiplier={maxFontSizeMultiplier}
-        contentStyle={contentStyle}
-        scaledLabel={scaledLabel}
-      />
-    );
-  }
-) as CompoundedComponent;
-// @component ./Adornment/TextInputIcon.tsx
-TextInput.Icon = TextInputIcon;
-
-// @component ./Adornment/TextInputAffix.tsx
-// @ts-ignore Types of property 'theme' are incompatible.
-TextInput.Affix = TextInputAffix;
+function TextInput({
+  ref,
+  error,
+  label,
+  supportingText,
+  variant,
+  theme,
+  prefix,
+  suffix,
+  counter,
+  disabled,
+  startAccessory,
+  endAccessory,
+  render = defaultRenderer,
+  ...rest
+}: TextInputProps) {
+  const {
+    input,
+    isDisabled,
+    isEditable,
+    hasPrefix,
+    hasSuffix,
+    hasCounter,
+    hasError,
+    leadingAccessoryStyles,
+    trailingAccessoryStyles,
+    fieldStyles,
+    disabledBackgroundStyles,
+    outlineStyles,
+    animatedActiveOutlineStyles,
+    animatedLabelWrapperStyles,
+    animatedLabelTextStyles,
+    animatedContainerStyle,
+    containerStyles,
+    inputStyles,
+    prefixStyles,
+    suffixStyles,
+    supportingTextStyles,
+    counterStyles,
+    placeholderTextColor,
+    selectionColor,
+    cursorColor,
+    placeholder,
+    counterText,
+    accessibilityProps,
+    renderLeadingAccessory,
+    renderTrailingAccessory,
+    focusInput,
+    onChangeText,
+    onFocus,
+    onBlur,
+  } = useTextInput({
+    ref,
+    error,
+    label,
+    supportingText,
+    variant,
+    theme,
+    prefix,
+    suffix,
+    counter,
+    disabled,
+    startAccessory,
+    endAccessory,
+    ...rest,
+  });
+
+  return (
+    <Pressable onPress={focusInput} accessible={false} role="none">
+      <View style={fieldStyles}>
+        {/* Disabled tint overlay — filled variant only. A childless
+          absolutely-positioned View whose translucent fill is applied via the
+          `opacity` style, so it never affects label/input rendering and works
+          with PlatformColor on Android. */}
+        {!!disabledBackgroundStyles && (
+          <View style={disabledBackgroundStyles} />
+        )}
+
+        {/* Inactive indicator — always-visible 1px bottom border (filled) or
+          full border (outlined); height and color reflect error/disabled state
+          but do not change on focus */}
+        <View style={outlineStyles} />
+
+        {/* Active indicator — filled variant only; 2px bar that expands from
+          the center outward via scaleX (0 → 1) on focus and collapses on blur */}
+        {!!animatedActiveOutlineStyles && (
+          <Animated.View style={animatedActiveOutlineStyles} />
+        )}
+
+        {!!label && (
+          <Animated.View aria-hidden style={animatedLabelWrapperStyles}>
+            <Animated.Text style={animatedLabelTextStyles}>
+              {label}
+            </Animated.Text>
+          </Animated.View>
+        )}
+
+        {renderLeadingAccessory
+          ? renderLeadingAccessory({
+              style: leadingAccessoryStyles,
+              error: hasError,
+              disabled: isDisabled,
+              multiline: !!rest.multiline,
+            })
+          : null}
+
+        <Animated.View style={[containerStyles, animatedContainerStyle]}>
+          {hasPrefix && <Text style={prefixStyles}>{prefix}</Text>}
+
+          {render({
+            ref: input,
+            selectionColor,
+            cursorColor,
+            placeholderTextColor,
+            ...accessibilityProps.input,
+            ...rest,
+            editable: isEditable,
+            placeholder,
+            style: inputStyles,
+            onChangeText,
+            onFocus,
+            onBlur,
+          })}
+
+          {hasSuffix && <Text style={suffixStyles}>{suffix}</Text>}
+        </Animated.View>
+
+        {renderTrailingAccessory ? (
+          renderTrailingAccessory({
+            style: trailingAccessoryStyles,
+            error: hasError,
+            disabled: isDisabled,
+            multiline: !!rest.multiline,
+          })
+        ) : hasError ? (
+          <TextInputErrorIcon style={trailingAccessoryStyles} theme={theme} />
+        ) : null}
+      </View>
+
+      <View style={styles.addendum}>
+        {!!supportingText && (
+          <Text
+            {...accessibilityProps.supportingText}
+            style={supportingTextStyles}
+          >
+            {supportingText}
+          </Text>
+        )}
+
+        {hasCounter && (
+          <Text {...accessibilityProps.counter} style={counterStyles}>
+            {counterText}
+          </Text>
+        )}
+      </View>
+    </Pressable>
+  );
+}
 
 export default TextInput;
diff --git a/src/components/TextInput/TextInputErrorIcon.tsx b/src/components/TextInput/TextInputErrorIcon.tsx
new file mode 100644
index 0000000000..b49e9d8db9
--- /dev/null
+++ b/src/components/TextInput/TextInputErrorIcon.tsx
@@ -0,0 +1,31 @@
+import { View } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import { ACCESSORY_SIZE } from './constants';
+import { useInternalTheme } from '../../core/theming';
+import type { ThemeProp } from '../../theme/types';
+import Icon from '../Icon';
+
+interface TextInputErrorIconProps {
+  style?: StyleProp<ViewStyle>;
+  theme?: ThemeProp;
+}
+
+const TextInputErrorIcon = ({
+  style: wrapperStyle,
+  theme: themeOverride,
+}: TextInputErrorIconProps) => {
+  const theme = useInternalTheme(themeOverride);
+
+  return (
+    <View style={wrapperStyle} aria-hidden>
+      <Icon
+        source="alert-circle"
+        size={ACCESSORY_SIZE}
+        color={theme.colors.error}
+      />
+    </View>
+  );
+};
+
+export default TextInputErrorIcon;
diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx
deleted file mode 100644
index 378366e176..0000000000
--- a/src/components/TextInput/TextInputFlat.tsx
+++ /dev/null
@@ -1,475 +0,0 @@
-import * as React from 'react';
-import {
-  I18nManager,
-  Platform,
-  StyleSheet,
-  TextInput as NativeTextInput,
-  TextStyle,
-  View,
-  Animated,
-} from 'react-native';
-
-import { Underline } from './Addons/Underline';
-import { AdornmentSide, AdornmentType, InputMode } from './Adornment/enums';
-import TextInputAdornment, {
-  TextInputAdornmentProps,
-} from './Adornment/TextInputAdornment';
-import {
-  getAdornmentConfig,
-  getAdornmentStyleAdjustmentForNativeInput,
-} from './Adornment/TextInputAdornment';
-import {
-  ADORNMENT_SIZE,
-  LABEL_PADDING_TOP_DENSE,
-  LABEL_WIGGLE_X_OFFSET,
-  MAXIMIZED_LABEL_FONT_SIZE,
-  MINIMIZED_LABEL_FONT_SIZE,
-  MINIMIZED_LABEL_Y_OFFSET,
-  MIN_DENSE_HEIGHT,
-  MIN_DENSE_HEIGHT_WL,
-} from './constants';
-import {
-  adjustPaddingFlat,
-  calculateFlatAffixTopPosition,
-  calculateFlatInputHorizontalPadding,
-  calculateInputHeight,
-  calculateLabelTopPosition,
-  calculatePadding,
-  getConstants,
-  getFlatInputColors,
-  Padding,
-} from './helpers';
-import InputLabel from './Label/InputLabel';
-import type { ChildTextInputProps, RenderProps } from './types';
-
-const TextInputFlat = ({
-  disabled = false,
-  editable = true,
-  label,
-  error = false,
-  selectionColor: customSelectionColor,
-  cursorColor,
-  underlineColor,
-  underlineStyle,
-  activeUnderlineColor,
-  textColor,
-  dense,
-  style,
-  theme,
-  render = (props: RenderProps) => <NativeTextInput {...props} />,
-  multiline = false,
-  parentState,
-  innerRef,
-  onFocus,
-  forceFocus,
-  onBlur,
-  onChangeText,
-  onLayoutAnimatedText,
-  onLabelTextLayout,
-  onLeftAffixLayoutChange,
-  onRightAffixLayoutChange,
-  onInputLayout,
-  left,
-  right,
-  placeholderTextColor,
-  testID = 'text-input-flat',
-  contentStyle,
-  scaledLabel,
-  ...rest
-}: ChildTextInputProps) => {
-  const isAndroid = Platform.OS === 'android';
-  const { colors, isV3, roundness } = theme;
-  const font = isV3 ? theme.fonts.bodyLarge : theme.fonts.regular;
-  const hasActiveOutline = parentState.focused || error;
-
-  const { LABEL_PADDING_TOP, FLAT_INPUT_OFFSET, MIN_HEIGHT, MIN_WIDTH } =
-    getConstants(isV3);
-
-  const {
-    fontSize: fontSizeStyle,
-    lineHeight: lineHeightStyle,
-    fontWeight,
-    height,
-    paddingHorizontal,
-    textAlign,
-    ...viewStyle
-  } = (StyleSheet.flatten(style) || {}) as TextStyle;
-  const fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE;
-  const lineHeight =
-    lineHeightStyle || (Platform.OS === 'web' ? fontSize * 1.2 : undefined);
-
-  const isPaddingHorizontalPassed =
-    paddingHorizontal !== undefined && typeof paddingHorizontal === 'number';
-
-  const adornmentConfig = getAdornmentConfig({
-    left,
-    right,
-  });
-
-  let { paddingLeft, paddingRight } = calculateFlatInputHorizontalPadding({
-    adornmentConfig,
-    isV3,
-  });
-
-  if (isPaddingHorizontalPassed) {
-    paddingLeft = paddingHorizontal as number;
-    paddingRight = paddingHorizontal as number;
-  }
-
-  const { leftLayout, rightLayout } = parentState;
-
-  const rightAffixWidth = right
-    ? rightLayout.width || ADORNMENT_SIZE
-    : ADORNMENT_SIZE;
-
-  const leftAffixWidth = left
-    ? leftLayout.width || ADORNMENT_SIZE
-    : ADORNMENT_SIZE;
-
-  const adornmentStyleAdjustmentForNativeInput =
-    getAdornmentStyleAdjustmentForNativeInput({
-      adornmentConfig,
-      rightAffixWidth,
-      leftAffixWidth,
-      paddingHorizontal,
-      inputOffset: FLAT_INPUT_OFFSET,
-      mode: InputMode.Flat,
-      isV3,
-    });
-
-  const {
-    inputTextColor,
-    activeColor,
-    underlineColorCustom,
-    placeholderColor,
-    errorColor,
-    backgroundColor,
-    selectionColor,
-  } = getFlatInputColors({
-    underlineColor,
-    activeUnderlineColor,
-    customSelectionColor,
-    textColor,
-    disabled,
-    error,
-    theme,
-  });
-
-  const containerStyle = {
-    backgroundColor,
-    borderTopLeftRadius: theme.roundness,
-    borderTopRightRadius: theme.roundness,
-  };
-
-  const labelScale = MINIMIZED_LABEL_FONT_SIZE / fontSize;
-  const fontScale = MAXIMIZED_LABEL_FONT_SIZE / fontSize;
-
-  const labelWidth = parentState.labelLayout.width;
-  const labelHeight = parentState.labelLayout.height;
-  const labelHalfWidth = labelWidth / 2;
-  const labelHalfHeight = labelHeight / 2;
-
-  const baseLabelTranslateX =
-    (I18nManager.getConstants().isRTL ? 1 : -1) *
-      (labelHalfWidth - (labelScale * labelWidth) / 2) +
-    (1 - labelScale) *
-      (I18nManager.getConstants().isRTL ? -1 : 1) *
-      paddingLeft;
-
-  const minInputHeight = dense
-    ? (label ? MIN_DENSE_HEIGHT_WL : MIN_DENSE_HEIGHT) - LABEL_PADDING_TOP_DENSE
-    : MIN_HEIGHT - LABEL_PADDING_TOP;
-
-  const inputHeight = calculateInputHeight(labelHeight, height, minInputHeight);
-
-  const topPosition = calculateLabelTopPosition(
-    labelHeight,
-    inputHeight,
-    multiline && height ? 0 : !height ? minInputHeight / 2 : 0
-  );
-
-  if (height && typeof height !== 'number') {
-    // eslint-disable-next-line
-    console.warn('Currently we support only numbers in height prop');
-  }
-
-  const paddingSettings = {
-    height: height ? +height : null,
-    labelHalfHeight,
-    offset: FLAT_INPUT_OFFSET,
-    multiline: multiline ? multiline : null,
-    dense: dense ? dense : null,
-    topPosition,
-    fontSize,
-    lineHeight,
-    label,
-    scale: fontScale,
-    isAndroid,
-    styles: StyleSheet.flatten(
-      dense ? styles.inputFlatDense : styles.inputFlat
-    ) as Padding,
-  };
-
-  const pad = calculatePadding(paddingSettings);
-
-  const paddingFlat = adjustPaddingFlat({
-    ...paddingSettings,
-    pad,
-  });
-
-  const baseLabelTranslateY =
-    -labelHalfHeight - (topPosition + MINIMIZED_LABEL_Y_OFFSET);
-
-  const { current: placeholderOpacityAnims } = React.useRef([
-    new Animated.Value(0),
-    new Animated.Value(1),
-  ]);
-
-  const placeholderOpacity = hasActiveOutline
-    ? parentState.labeled
-    : placeholderOpacityAnims[parentState.labelLayout.measured ? 1 : 0];
-
-  // We don't want to show placeholder if label is displayed, because they overlap.
-  // Before it was done by setting placeholder's value to " ", but inputs have the same props
-  // what causes broken styles due to: https://github.com/facebook/react-native/issues/48249
-  const placeholderTextColorBasedOnState = parentState.displayPlaceholder
-    ? placeholderTextColor ?? placeholderColor
-    : 'transparent';
-
-  const minHeight =
-    height ||
-    (dense ? (label ? MIN_DENSE_HEIGHT_WL : MIN_DENSE_HEIGHT) : MIN_HEIGHT);
-
-  const flatHeight =
-    inputHeight +
-    (!height ? (dense ? LABEL_PADDING_TOP_DENSE : LABEL_PADDING_TOP) : 0);
-
-  const iconTopPosition = (flatHeight - ADORNMENT_SIZE) / 2;
-
-  const leftAffixTopPosition = leftLayout.height
-    ? calculateFlatAffixTopPosition({
-        height: flatHeight,
-        ...paddingFlat,
-        affixHeight: leftLayout.height,
-      })
-    : null;
-
-  const rightAffixTopPosition = rightLayout.height
-    ? calculateFlatAffixTopPosition({
-        height: flatHeight,
-        ...paddingFlat,
-        affixHeight: rightLayout.height,
-      })
-    : null;
-
-  const labelProps = {
-    label,
-    onLayoutAnimatedText,
-    onLabelTextLayout,
-    placeholderOpacity,
-    labelError: error,
-    placeholderStyle: styles.placeholder,
-    baseLabelTranslateY,
-    baseLabelTranslateX,
-    font,
-    fontSize,
-    lineHeight,
-    fontWeight,
-    labelScale,
-    wiggleOffsetX: LABEL_WIGGLE_X_OFFSET,
-    topPosition,
-    paddingLeft: isAndroid
-      ? I18nManager.isRTL
-        ? paddingRight
-        : paddingLeft
-      : paddingLeft,
-    paddingRight: isAndroid
-      ? I18nManager.isRTL
-        ? paddingLeft
-        : paddingRight
-      : paddingRight,
-    hasActiveOutline,
-    activeColor,
-    placeholderColor,
-    errorColor,
-    roundness,
-    maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
-    testID,
-    contentStyle,
-    inputContainerLayout: parentState.inputContainerLayout,
-    labelTextLayout: parentState.labelTextLayout,
-    opacity:
-      parentState.value || parentState.focused
-        ? parentState.labelLayout.measured
-          ? 1
-          : 0
-        : 1,
-    isV3,
-  };
-
-  const affixTopPosition = {
-    [AdornmentSide.Left]: leftAffixTopPosition,
-    [AdornmentSide.Right]: rightAffixTopPosition,
-  };
-  const onAffixChange = {
-    [AdornmentSide.Left]: onLeftAffixLayoutChange,
-    [AdornmentSide.Right]: onRightAffixLayoutChange,
-  };
-
-  let adornmentProps: TextInputAdornmentProps = {
-    paddingHorizontal,
-    adornmentConfig,
-    forceFocus,
-    topPosition: {
-      [AdornmentType.Affix]: affixTopPosition,
-      [AdornmentType.Icon]: iconTopPosition,
-    },
-    onAffixChange,
-    isTextInputFocused: parentState.focused,
-    maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
-    disabled,
-  };
-  if (adornmentConfig.length) {
-    adornmentProps = {
-      ...adornmentProps,
-      left,
-      right,
-      textStyle: { ...font, fontSize, lineHeight, fontWeight },
-      visible: parentState.labeled,
-    };
-  }
-
-  return (
-    <View style={[containerStyle, viewStyle]}>
-      <Underline
-        style={underlineStyle}
-        hasActiveOutline={hasActiveOutline}
-        parentState={parentState}
-        underlineColorCustom={underlineColorCustom}
-        error={error}
-        colors={colors}
-        activeColor={activeColor}
-        theme={theme}
-      />
-      <View
-        onLayout={onInputLayout}
-        style={[
-          styles.labelContainer,
-          {
-            minHeight,
-          },
-        ]}
-      >
-        {!isAndroid && multiline && !!label && !disabled && (
-          // Workaround for: https://github.com/callstack/react-native-paper/issues/2799
-          // Patch for a multiline TextInput with fixed height, which allow to avoid covering input label with its value.
-          <View
-            testID="patch-container"
-            pointerEvents="none"
-            style={[
-              StyleSheet.absoluteFill,
-              dense ? styles.densePatchContainer : styles.patchContainer,
-              {
-                backgroundColor:
-                  viewStyle.backgroundColor || containerStyle.backgroundColor,
-                left: paddingLeft,
-                right: paddingRight,
-              },
-            ]}
-          />
-        )}
-        {label ? (
-          <InputLabel
-            labeled={parentState.labeled}
-            error={parentState.error}
-            focused={parentState.focused}
-            scaledLabel={scaledLabel}
-            wiggle={Boolean(parentState.value && labelProps.labelError)}
-            labelLayoutMeasured={parentState.labelLayout.measured}
-            labelLayoutWidth={parentState.labelLayout.width}
-            labelLayoutHeight={parentState.labelLayout.height}
-            {...labelProps}
-          />
-        ) : null}
-        {render?.({
-          ...rest,
-          ref: innerRef,
-          onChangeText,
-          placeholder: rest.placeholder,
-          editable: !disabled && editable,
-          selectionColor,
-          cursorColor:
-            typeof cursorColor === 'undefined' ? activeColor : cursorColor,
-          placeholderTextColor: placeholderTextColorBasedOnState,
-          onFocus,
-          onBlur,
-          underlineColorAndroid: 'transparent',
-          multiline,
-          style: [
-            styles.input,
-            multiline && height ? { height: flatHeight } : {},
-            paddingFlat,
-            {
-              paddingLeft,
-              paddingRight,
-              ...font,
-              fontSize,
-              lineHeight,
-              fontWeight,
-              color: inputTextColor,
-              textAlignVertical: multiline ? 'top' : 'center',
-              textAlign: textAlign
-                ? textAlign
-                : I18nManager.getConstants().isRTL
-                ? 'right'
-                : 'left',
-              minWidth: Math.min(
-                parentState.labelTextLayout.width + 2 * FLAT_INPUT_OFFSET,
-                MIN_WIDTH
-              ),
-            },
-            Platform.OS === 'web' ? { outline: 'none' } : undefined,
-            adornmentStyleAdjustmentForNativeInput,
-            contentStyle,
-          ],
-          testID,
-        })}
-      </View>
-      <TextInputAdornment {...adornmentProps} />
-    </View>
-  );
-};
-
-export default TextInputFlat;
-
-const styles = StyleSheet.create({
-  placeholder: {
-    position: 'absolute',
-    left: 0,
-  },
-  labelContainer: {
-    paddingTop: 0,
-    paddingBottom: 0,
-    flexGrow: 1,
-  },
-  input: {
-    margin: 0,
-    flexGrow: 1,
-  },
-  inputFlat: {
-    paddingTop: 24,
-    paddingBottom: 4,
-  },
-  inputFlatDense: {
-    paddingTop: 22,
-    paddingBottom: 2,
-  },
-  patchContainer: {
-    height: 24,
-    zIndex: 2,
-  },
-  densePatchContainer: {
-    height: 22,
-    zIndex: 2,
-  },
-});
diff --git a/src/components/TextInput/TextInputIcon.tsx b/src/components/TextInput/TextInputIcon.tsx
new file mode 100644
index 0000000000..012e2f45f9
--- /dev/null
+++ b/src/components/TextInput/TextInputIcon.tsx
@@ -0,0 +1,98 @@
+import { View } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import { ACCESSORY_SIZE } from './constants';
+import { styles } from './styles';
+import { getIconColor } from './utils';
+import { useInternalTheme } from '../../core/theming';
+import IconButton from '../IconButton/IconButton';
+import type { Props as IconButtonProps } from '../IconButton/IconButton';
+
+export type TextInputAccessoryProps = {
+  style: StyleProp<ViewStyle>;
+  multiline: boolean;
+  disabled: boolean;
+  error: boolean;
+};
+
+export type TextInputIconProps = TextInputAccessoryProps &
+  Omit<IconButtonProps, keyof TextInputAccessoryProps>;
+
+/**
+ * A component to render a leading / trailing icon in the TextInput
+ * (return it from `startAccessory` or `endAccessory`). Accepts icon-specific props as well as
+ * `TextInputAccessoryProps`, which TextInput passes into those render props.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { TextInput } from 'react-native-paper';
+ *
+ * const MyComponent = () => {
+ *   const [text, setText] = React.useState('');
+ *
+ *   const searchAccessory = (props) => (
+ *     <TextInput.Icon {...props} icon="magnify" />
+ *   );
+ *
+ *   const clearAccessory = (props) => (
+ *     <TextInput.Icon {...props} icon="close" onPress={() => setText('')} />
+ *   );
+ *
+ *   return (
+ *     <TextInput
+ *       label="Search"
+ *       value={text}
+ *       onChangeText={setText}
+ *       startAccessory={searchAccessory}
+ *       endAccessory={clearAccessory}
+ *     />
+ *   );
+ * };
+ *
+ * export default MyComponent;
+ * ```
+ *
+ * @extends IconButton props https://callstack.github.io/react-native-paper/docs/components/IconButton
+ */
+const TextInputIcon = ({
+  icon,
+  iconColor,
+  size,
+  style,
+  error,
+  disabled,
+  theme: themeOverride,
+  onPress,
+  ...rest
+}: TextInputIconProps) => {
+  const theme = useInternalTheme(themeOverride);
+
+  const iconSize = size ?? ACCESSORY_SIZE;
+
+  const color = getIconColor({
+    theme,
+    iconColor,
+    hasError: error,
+    isDisabled: disabled,
+  });
+
+  const onPressHandler = disabled ? undefined : onPress;
+
+  return (
+    <View style={styles.iconWrapper}>
+      <IconButton
+        {...rest}
+        icon={icon}
+        iconColor={color}
+        size={iconSize}
+        style={[styles.icon, style]}
+        onPress={onPressHandler}
+      />
+    </View>
+  );
+};
+
+TextInputIcon.displayName = 'TextInput.Icon';
+
+export default TextInputIcon;
diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx
deleted file mode 100644
index 70b590fabb..0000000000
--- a/src/components/TextInput/TextInputOutlined.tsx
+++ /dev/null
@@ -1,450 +0,0 @@
-import * as React from 'react';
-import {
-  Animated,
-  View,
-  TextInput as NativeTextInput,
-  StyleSheet,
-  I18nManager,
-  Platform,
-  TextStyle,
-  ColorValue,
-  LayoutChangeEvent,
-} from 'react-native';
-
-import { Outline } from './Addons/Outline';
-import { AdornmentType, AdornmentSide } from './Adornment/enums';
-import TextInputAdornment, {
-  getAdornmentConfig,
-  getAdornmentStyleAdjustmentForNativeInput,
-  TextInputAdornmentProps,
-} from './Adornment/TextInputAdornment';
-import {
-  MAXIMIZED_LABEL_FONT_SIZE,
-  MINIMIZED_LABEL_FONT_SIZE,
-  LABEL_WIGGLE_X_OFFSET,
-  ADORNMENT_SIZE,
-  OUTLINE_MINIMIZED_LABEL_Y_OFFSET,
-  LABEL_PADDING_TOP,
-  MIN_DENSE_HEIGHT_OUTLINED,
-  LABEL_PADDING_TOP_DENSE,
-} from './constants';
-import {
-  calculateLabelTopPosition,
-  calculateInputHeight,
-  calculatePadding,
-  adjustPaddingOut,
-  Padding,
-  calculateOutlinedIconAndAffixTopPosition,
-  getOutlinedInputColors,
-  getConstants,
-} from './helpers';
-import InputLabel from './Label/InputLabel';
-import LabelBackground from './Label/LabelBackground';
-import type { RenderProps, ChildTextInputProps } from './types';
-
-const TextInputOutlined = ({
-  disabled = false,
-  editable = true,
-  label,
-  error = false,
-  selectionColor: customSelectionColor,
-  cursorColor,
-  underlineColor: _underlineColor,
-  outlineColor: customOutlineColor,
-  activeOutlineColor,
-  outlineStyle,
-  textColor,
-  dense,
-  style,
-  theme,
-  render = (props: RenderProps) => <NativeTextInput {...props} />,
-  multiline = false,
-  parentState,
-  innerRef,
-  onFocus,
-  forceFocus,
-  onBlur,
-  onChangeText,
-  onLayoutAnimatedText,
-  onLabelTextLayout,
-  onLeftAffixLayoutChange,
-  onRightAffixLayoutChange,
-  onInputLayout,
-  onLayout,
-  left,
-  right,
-  placeholderTextColor,
-  testID = 'text-input-outlined',
-  contentStyle,
-  scaledLabel,
-  ...rest
-}: ChildTextInputProps) => {
-  const adornmentConfig = getAdornmentConfig({ left, right });
-
-  const { colors, isV3, roundness } = theme;
-  const font = isV3 ? theme.fonts.bodyLarge : theme.fonts.regular;
-  const hasActiveOutline = parentState.focused || error;
-
-  const { INPUT_PADDING_HORIZONTAL, MIN_HEIGHT, ADORNMENT_OFFSET, MIN_WIDTH } =
-    getConstants(isV3);
-
-  const {
-    fontSize: fontSizeStyle,
-    fontWeight,
-    lineHeight: lineHeightStyle,
-    height,
-    backgroundColor = colors?.background,
-    textAlign,
-    ...viewStyle
-  } = (StyleSheet.flatten(style) || {}) as TextStyle;
-  const fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE;
-  const lineHeight =
-    lineHeightStyle || (Platform.OS === 'web' ? fontSize * 1.2 : undefined);
-
-  const {
-    inputTextColor,
-    activeColor,
-    outlineColor,
-    placeholderColor,
-    errorColor,
-    selectionColor,
-  } = getOutlinedInputColors({
-    activeOutlineColor,
-    customOutlineColor,
-    customSelectionColor,
-    textColor,
-    disabled,
-    error,
-    theme,
-  });
-
-  const densePaddingTop = label ? LABEL_PADDING_TOP_DENSE : 0;
-  const paddingTop = label ? LABEL_PADDING_TOP : 0;
-  const yOffset = label ? OUTLINE_MINIMIZED_LABEL_Y_OFFSET : 0;
-
-  const labelScale = MINIMIZED_LABEL_FONT_SIZE / fontSize;
-  const fontScale = MAXIMIZED_LABEL_FONT_SIZE / fontSize;
-
-  const labelWidth = parentState.labelLayout.width;
-  const labelHeight = parentState.labelLayout.height;
-  const labelHalfWidth = labelWidth / 2;
-  const labelHalfHeight = labelHeight / 2;
-
-  const baseLabelTranslateX =
-    (I18nManager.getConstants().isRTL ? 1 : -1) *
-    (labelHalfWidth -
-      (labelScale * labelWidth) / 2 -
-      (fontSize - MINIMIZED_LABEL_FONT_SIZE) * labelScale);
-
-  let labelTranslationXOffset = 0;
-  const isAdornmentLeftIcon = adornmentConfig.some(
-    ({ side, type }) =>
-      side === AdornmentSide.Left && type === AdornmentType.Icon
-  );
-  const isAdornmentRightIcon = adornmentConfig.some(
-    ({ side, type }) =>
-      side === AdornmentSide.Right && type === AdornmentType.Icon
-  );
-
-  if (isAdornmentLeftIcon) {
-    labelTranslationXOffset =
-      (I18nManager.getConstants().isRTL ? -1 : 1) *
-      (ADORNMENT_SIZE + ADORNMENT_OFFSET - (isV3 ? 0 : 8));
-  }
-
-  const minInputHeight =
-    (dense ? MIN_DENSE_HEIGHT_OUTLINED : MIN_HEIGHT) - paddingTop;
-
-  const inputHeight = calculateInputHeight(labelHeight, height, minInputHeight);
-
-  const topPosition = calculateLabelTopPosition(
-    labelHeight,
-    inputHeight,
-    paddingTop
-  );
-
-  if (height && typeof height !== 'number') {
-    // eslint-disable-next-line
-    console.warn('Currently we support only numbers in height prop');
-  }
-
-  const paddingSettings = {
-    height: height ? +height : null,
-    labelHalfHeight,
-    offset: paddingTop,
-    multiline: multiline ? multiline : null,
-    dense: dense ? dense : null,
-    topPosition,
-    fontSize,
-    lineHeight,
-    label,
-    scale: fontScale,
-    isAndroid: Platform.OS === 'android',
-    styles: StyleSheet.flatten(
-      dense ? styles.inputOutlinedDense : styles.inputOutlined
-    ) as Padding,
-  };
-
-  const pad = calculatePadding(paddingSettings);
-
-  const paddingOut = adjustPaddingOut({ ...paddingSettings, pad });
-
-  const baseLabelTranslateY = -labelHalfHeight - (topPosition + yOffset);
-
-  const { current: placeholderOpacityAnims } = React.useRef([
-    new Animated.Value(0),
-    new Animated.Value(1),
-  ]);
-
-  const placeholderOpacity = hasActiveOutline
-    ? parentState.labeled
-    : placeholderOpacityAnims[parentState.labelLayout.measured ? 1 : 0];
-
-  const placeholderStyle = {
-    position: 'absolute',
-    left: 0,
-    paddingHorizontal: INPUT_PADDING_HORIZONTAL,
-  };
-
-  const placeholderTextColorBasedOnState = parentState.displayPlaceholder
-    ? placeholderTextColor ?? placeholderColor
-    : 'transparent';
-
-  const labelBackgroundColor: ColorValue =
-    backgroundColor === 'transparent'
-      ? theme.colors.background
-      : backgroundColor;
-
-  const labelProps = {
-    label,
-    onLayoutAnimatedText,
-    onLabelTextLayout,
-    placeholderOpacity,
-    labelError: error,
-    placeholderStyle,
-    baseLabelTranslateY,
-    baseLabelTranslateX,
-    font,
-    fontSize,
-    lineHeight,
-    fontWeight,
-    labelScale,
-    wiggleOffsetX: LABEL_WIGGLE_X_OFFSET,
-    topPosition,
-    hasActiveOutline,
-    activeColor,
-    placeholderColor,
-    backgroundColor: labelBackgroundColor,
-    errorColor,
-    labelTranslationXOffset,
-    roundness,
-    maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
-    testID,
-    contentStyle,
-    inputContainerLayout: {
-      width:
-        parentState.inputContainerLayout.width +
-        (isAdornmentRightIcon || isAdornmentLeftIcon
-          ? INPUT_PADDING_HORIZONTAL
-          : 0),
-    },
-    opacity:
-      parentState.value || parentState.focused
-        ? parentState.labelLayout.measured
-          ? 1
-          : 0
-        : 1,
-    isV3,
-  };
-
-  const onLayoutChange = React.useCallback(
-    (e: LayoutChangeEvent) => {
-      onInputLayout(e);
-      onLayout?.(e);
-    },
-    [onLayout, onInputLayout]
-  );
-
-  const minHeight = (height ||
-    (dense ? MIN_DENSE_HEIGHT_OUTLINED : MIN_HEIGHT)) as number;
-
-  const outlinedHeight =
-    inputHeight + (dense ? densePaddingTop / 2 : paddingTop);
-  const { leftLayout, rightLayout } = parentState;
-
-  const leftAffixTopPosition = calculateOutlinedIconAndAffixTopPosition({
-    height: outlinedHeight,
-    affixHeight: leftLayout.height || 0,
-    labelYOffset: -yOffset,
-  });
-
-  const rightAffixTopPosition = calculateOutlinedIconAndAffixTopPosition({
-    height: outlinedHeight,
-    affixHeight: rightLayout.height || 0,
-    labelYOffset: -yOffset,
-  });
-  const iconTopPosition = calculateOutlinedIconAndAffixTopPosition({
-    height: outlinedHeight,
-    affixHeight: ADORNMENT_SIZE,
-    labelYOffset: -yOffset,
-  });
-
-  const rightAffixWidth = right
-    ? rightLayout.width || ADORNMENT_SIZE
-    : ADORNMENT_SIZE;
-
-  const leftAffixWidth = left
-    ? leftLayout.width || ADORNMENT_SIZE
-    : ADORNMENT_SIZE;
-
-  const adornmentStyleAdjustmentForNativeInput =
-    getAdornmentStyleAdjustmentForNativeInput({
-      adornmentConfig,
-      rightAffixWidth,
-      leftAffixWidth,
-      mode: 'outlined',
-      isV3,
-    });
-  const affixTopPosition = {
-    [AdornmentSide.Left]: leftAffixTopPosition,
-    [AdornmentSide.Right]: rightAffixTopPosition,
-  };
-  const onAffixChange = {
-    [AdornmentSide.Left]: onLeftAffixLayoutChange,
-    [AdornmentSide.Right]: onRightAffixLayoutChange,
-  };
-
-  let adornmentProps: TextInputAdornmentProps = {
-    adornmentConfig,
-    forceFocus,
-    topPosition: {
-      [AdornmentType.Icon]: iconTopPosition,
-      [AdornmentType.Affix]: affixTopPosition,
-    },
-    onAffixChange,
-    isTextInputFocused: parentState.focused,
-    maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
-    disabled,
-  };
-  if (adornmentConfig.length) {
-    adornmentProps = {
-      ...adornmentProps,
-      left,
-      right,
-      textStyle: { ...font, fontSize, lineHeight, fontWeight },
-      visible: parentState.labeled,
-    };
-  }
-
-  return (
-    <View style={viewStyle}>
-      {/*
-          Render the outline separately from the container
-          This is so that the label can overlap the outline
-          Otherwise the border will cut off the label on Android
-          */}
-      <Outline
-        isV3={isV3}
-        style={outlineStyle}
-        label={label}
-        roundness={roundness}
-        hasActiveOutline={hasActiveOutline}
-        focused={parentState.focused}
-        activeColor={activeColor}
-        outlineColor={outlineColor}
-        backgroundColor={backgroundColor}
-      />
-      <View
-        style={[
-          styles.labelContainer,
-          {
-            paddingTop,
-            minHeight,
-          },
-        ]}
-      >
-        {label ? (
-          <InputLabel
-            labeled={parentState.labeled}
-            error={parentState.error}
-            focused={parentState.focused}
-            scaledLabel={scaledLabel}
-            wiggle={Boolean(parentState.value && labelProps.labelError)}
-            labelLayoutMeasured={parentState.labelLayout.measured}
-            labelLayoutWidth={parentState.labelLayout.width}
-            labelLayoutHeight={parentState.labelLayout.height}
-            {...labelProps}
-            labelBackground={LabelBackground}
-            maxFontSizeMultiplier={rest.maxFontSizeMultiplier}
-          />
-        ) : null}
-        {render?.({
-          ...rest,
-          ref: innerRef,
-          onLayout: onLayoutChange,
-          onChangeText,
-          placeholder: rest.placeholder,
-          editable: !disabled && editable,
-          selectionColor,
-          cursorColor:
-            typeof cursorColor === 'undefined' ? activeColor : cursorColor,
-          placeholderTextColor: placeholderTextColorBasedOnState,
-          onFocus,
-          onBlur,
-          underlineColorAndroid: 'transparent',
-          multiline,
-          style: [
-            styles.input,
-            !multiline || (multiline && height) ? { height: inputHeight } : {},
-            paddingOut,
-            {
-              ...font,
-              fontSize,
-              lineHeight,
-              fontWeight,
-              color: inputTextColor,
-              textAlignVertical: multiline ? 'top' : 'center',
-              textAlign: textAlign
-                ? textAlign
-                : I18nManager.getConstants().isRTL
-                ? 'right'
-                : 'left',
-              paddingHorizontal: INPUT_PADDING_HORIZONTAL,
-              minWidth: Math.min(
-                parentState.labelTextLayout.width +
-                  2 * INPUT_PADDING_HORIZONTAL,
-                MIN_WIDTH
-              ),
-            },
-            Platform.OS === 'web' ? { outline: 'none' } : undefined,
-            adornmentStyleAdjustmentForNativeInput,
-            contentStyle,
-          ],
-          testID,
-        } as RenderProps)}
-      </View>
-      <TextInputAdornment {...adornmentProps} />
-    </View>
-  );
-};
-
-export default TextInputOutlined;
-
-const styles = StyleSheet.create({
-  labelContainer: {
-    paddingBottom: 0,
-    flexGrow: 1,
-  },
-  input: {
-    margin: 0,
-    flexGrow: 1,
-  },
-  inputOutlined: {
-    paddingTop: 8,
-    paddingBottom: 8,
-  },
-  inputOutlinedDense: {
-    paddingTop: 4,
-    paddingBottom: 4,
-  },
-});
diff --git a/src/components/TextInput/constants.ts b/src/components/TextInput/constants.ts
new file mode 100644
index 0000000000..524593278f
--- /dev/null
+++ b/src/components/TextInput/constants.ts
@@ -0,0 +1,137 @@
+import { PixelRatio } from 'react-native';
+
+import { Easing } from 'react-native-reanimated';
+
+import { tokens } from '../../theme/tokens';
+import { motionDuration, motionEasing } from '../../theme/tokens/sys/motion';
+import { defaultShapes } from '../../theme/tokens/sys/shape';
+
+export const fontScale = PixelRatio.getFontScale();
+
+/**
+ * Common constants for the text input component.
+ */
+
+export const BASELINE_TEXT_INPUT_HEIGHT = 56;
+export const BASELINE_TEXT_INPUT_PADDING_VERTICAL = 8;
+
+export const TEXT_INPUT_INPUT_WRAPPER_PADDING_HORIZONTAL = 16;
+export const TEXT_INPUT_ACCESSORY_MARGIN_HORIZONTAL = 12;
+
+export const TEXT_INPUT_HEIGHT = Math.ceil(
+  BASELINE_TEXT_INPUT_HEIGHT * fontScale
+);
+export const TEXT_INPUT_PADDING_VERTICAL = Math.ceil(
+  BASELINE_TEXT_INPUT_PADDING_VERTICAL * fontScale
+);
+
+export const TEXT_INPUT_BORDER_RADIUS = defaultShapes.corner.extraSmall;
+
+export const LABEL_START_OFFSET_WITHOUT_ACCESSORY =
+  TEXT_INPUT_INPUT_WRAPPER_PADDING_HORIZONTAL;
+
+export const ACCESSORY_SIZE = 24;
+
+export const PREFIX_END_PADDING = 2;
+export const SUFFIX_START_PADDING = 2;
+
+export const ERROR_ICON_SIZE = 16;
+
+export const INPUT_FONT_SIZE = tokens.md.sys.typescale.bodyLarge.fontSize;
+export const ACTIVE_LABEL_FONT_SIZE =
+  tokens.md.sys.typescale.bodySmall.fontSize;
+export const INACTIVE_LABEL_FONT_SIZE = INPUT_FONT_SIZE;
+export const SUPPORTING_TEXT_FONT_SIZE =
+  tokens.md.sys.typescale.bodySmall.fontSize;
+
+export const SUPPORTING_TEXT_MARGIN_TOP = 4;
+
+export const ANIMATION_DURATION_MS = motionDuration.short3;
+
+export const ACTIVE_INDICATOR_SIZE = 2;
+export const INACTIVE_INDICATOR_SIZE = 1;
+
+export const TIMING_CONFIG = {
+  duration: ANIMATION_DURATION_MS,
+  easing: Easing.bezier(...motionEasing.standard),
+} as const;
+
+/**
+ * Constants for the filled variant.
+ */
+
+const FILLED_LINE_HEIGHT_DELTA = 3;
+
+export const FILLED_LABEL_START_OFFSET_WITH_ACCESSORY =
+  ACCESSORY_SIZE +
+  TEXT_INPUT_ACCESSORY_MARGIN_HORIZONTAL +
+  TEXT_INPUT_INPUT_WRAPPER_PADDING_HORIZONTAL;
+
+export const FILLED_ACTIVE_LABEL_TOP_POSITION = TEXT_INPUT_PADDING_VERTICAL;
+
+export const FILLED_INACTIVE_LABEL_TOP_POSITION = Math.ceil(
+  ((BASELINE_TEXT_INPUT_HEIGHT -
+    2 * BASELINE_TEXT_INPUT_PADDING_VERTICAL -
+    INPUT_FONT_SIZE) /
+    2 +
+    BASELINE_TEXT_INPUT_PADDING_VERTICAL) *
+    fontScale
+);
+
+export const FILLED_MULTILINE_PADDING_TOP =
+  Math.ceil(ACTIVE_LABEL_FONT_SIZE * fontScale) + TEXT_INPUT_PADDING_VERTICAL;
+
+export const FILLED_DISABLED_CONTAINER_OPACITY = 0.04;
+
+export const FILLED_PADDING_BOTTOM =
+  TEXT_INPUT_PADDING_VERTICAL + FILLED_LINE_HEIGHT_DELTA;
+
+/**
+ * Constants for the outlined variant.
+ */
+
+const OUTLINED_LINE_HEIGHT_DELTA = 2;
+
+export const OUTLINED_DISABLED_OUTLINE_OPACITY = 0.12;
+
+export const OUTLINED_MULTILINE_PADDING_TOP = Math.ceil(
+  ((BASELINE_TEXT_INPUT_HEIGHT -
+    2 * BASELINE_TEXT_INPUT_PADDING_VERTICAL -
+    INPUT_FONT_SIZE) /
+    2 -
+    OUTLINED_LINE_HEIGHT_DELTA) *
+    fontScale
+);
+
+export const OUTLINED_LABEL_PADDING_HORIZONTAL = 4;
+
+export const OUTLINED_LABEL_START_OFFSET_WITH_ACCESSORY =
+  ACCESSORY_SIZE +
+  TEXT_INPUT_ACCESSORY_MARGIN_HORIZONTAL +
+  TEXT_INPUT_INPUT_WRAPPER_PADDING_HORIZONTAL -
+  OUTLINED_LABEL_PADDING_HORIZONTAL;
+
+export const OUTLINED_ACTIVE_LABEL_TOP_POSITION = Math.ceil(
+  (-BASELINE_TEXT_INPUT_PADDING_VERTICAL + OUTLINED_LINE_HEIGHT_DELTA) *
+    fontScale
+);
+
+export const OUTLINED_INACTIVE_LABEL_TOP_POSITION = Math.ceil(
+  ((BASELINE_TEXT_INPUT_HEIGHT -
+    2 * BASELINE_TEXT_INPUT_PADDING_VERTICAL -
+    INPUT_FONT_SIZE) /
+    2 +
+    BASELINE_TEXT_INPUT_PADDING_VERTICAL -
+    OUTLINED_LINE_HEIGHT_DELTA) *
+    fontScale
+);
+
+/** Positive distance; apply sign in animation using `isRTL` from `useLocale`. */
+export const OUTLINED_LABEL_TRANSLATE_DISTANCE_WITH_ACCESSORY =
+  ACCESSORY_SIZE +
+  TEXT_INPUT_INPUT_WRAPPER_PADDING_HORIZONTAL -
+  OUTLINED_LABEL_PADDING_HORIZONTAL;
+
+/** Positive distance; apply sign in animation using `isRTL` from `useLocale`. */
+export const OUTLINED_LABEL_TRANSLATE_DISTANCE_WITHOUT_ACCESSORY =
+  OUTLINED_LABEL_PADDING_HORIZONTAL;
diff --git a/src/components/TextInput/constants.tsx b/src/components/TextInput/constants.tsx
deleted file mode 100644
index 69263c68b4..0000000000
--- a/src/components/TextInput/constants.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-export const MAXIMIZED_LABEL_FONT_SIZE = 16;
-export const MINIMIZED_LABEL_FONT_SIZE = 12;
-export const LABEL_WIGGLE_X_OFFSET = 4;
-
-export const ADORNMENT_SIZE = 24;
-export const MIN_WIDTH = 100;
-
-//Text input affix offset
-export const MD2_AFFIX_OFFSET = 12;
-export const MD3_AFFIX_OFFSET = 16;
-
-// Text input icon
-export const ICON_SIZE = 24;
-export const MD2_ICON_OFFSET = 12;
-export const MD3_ICON_OFFSET = 16;
-
-// Text input common
-export const MD2_MIN_HEIGHT = 64;
-export const MD3_MIN_HEIGHT = 56;
-export const MD3_ADORNMENT_OFFSET = 16;
-export const MD2_ADORNMENT_OFFSET = 12;
-export const LABEL_PADDING_TOP_DENSE = 24;
-export const LABEL_PADDING_TOP = 8;
-
-// Text input flat
-export const MD2_LABEL_PADDING_TOP = 30;
-export const MD3_LABEL_PADDING_TOP = 26;
-
-export const MD2_LABEL_PADDING_HORIZONTAL = 12;
-export const MD3_LABEL_PADDING_HORIZONTAL = 16;
-
-export const MD2_FLAT_INPUT_OFFSET = 8;
-export const MD3_FLAT_INPUT_OFFSET = 16;
-
-export const MINIMIZED_LABEL_Y_OFFSET = -18;
-export const MIN_DENSE_HEIGHT_WL = 52;
-export const MIN_DENSE_HEIGHT = 40;
-
-// Text input outlined
-export const MD2_INPUT_PADDING_HORIZONTAL = 14;
-export const MD3_INPUT_PADDING_HORIZONTAL = 16;
-
-// extra space to avoid overlapping input's text and icon
-export const MD2_OUTLINED_INPUT_OFFSET = 8;
-export const MD3_OUTLINED_INPUT_OFFSET = 16;
-
-export const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -6;
-export const MIN_DENSE_HEIGHT_OUTLINED = 48;
diff --git a/src/components/TextInput/helpers.tsx b/src/components/TextInput/helpers.tsx
deleted file mode 100644
index 4a5da1d24a..0000000000
--- a/src/components/TextInput/helpers.tsx
+++ /dev/null
@@ -1,612 +0,0 @@
-import { Platform } from 'react-native';
-
-import color from 'color';
-
-import { AdornmentSide, AdornmentType } from './Adornment/enums';
-import type { AdornmentConfig } from './Adornment/types';
-import {
-  MIN_WIDTH,
-  ADORNMENT_SIZE,
-  MD2_ADORNMENT_OFFSET,
-  MD2_AFFIX_OFFSET,
-  MD2_FLAT_INPUT_OFFSET,
-  MD2_ICON_OFFSET,
-  MD2_INPUT_PADDING_HORIZONTAL,
-  MD2_LABEL_PADDING_HORIZONTAL,
-  MD2_LABEL_PADDING_TOP,
-  MD2_MIN_HEIGHT,
-  MD2_OUTLINED_INPUT_OFFSET,
-  MD3_ADORNMENT_OFFSET,
-  MD3_AFFIX_OFFSET,
-  MD3_FLAT_INPUT_OFFSET,
-  MD3_ICON_OFFSET,
-  MD3_INPUT_PADDING_HORIZONTAL,
-  MD3_LABEL_PADDING_HORIZONTAL,
-  MD3_LABEL_PADDING_TOP,
-  MD3_MIN_HEIGHT,
-  MD3_OUTLINED_INPUT_OFFSET,
-} from './constants';
-import type { TextInputLabelProp } from './types';
-import type { InternalTheme } from '../../types';
-
-type PaddingProps = {
-  height: number | null;
-  labelHalfHeight: number;
-  multiline: boolean | null;
-  dense: boolean | null;
-  topPosition: number;
-  fontSize: number;
-  lineHeight?: number;
-  label?: TextInputLabelProp | null;
-  scale: number;
-  offset: number;
-  isAndroid: boolean;
-  styles: { paddingTop: number; paddingBottom: number };
-};
-
-type AdjProps = PaddingProps & {
-  pad: number;
-};
-
-export type Padding = { paddingTop: number; paddingBottom: number };
-
-export const calculateLabelTopPosition = (
-  labelHeight: number,
-  height: number = 0,
-  optionalPadding: number = 0
-): number => {
-  const customHeight = height > 0 ? height : 0;
-
-  return Math.floor((customHeight - labelHeight) / 2 + optionalPadding);
-};
-
-export const calculateInputHeight = (
-  labelHeight: number,
-  height: any = 0,
-  minHeight: number
-): number => {
-  const finalHeight = height > 0 ? height : labelHeight;
-
-  if (height > 0) return height;
-  return finalHeight < minHeight ? minHeight : finalHeight;
-};
-
-export const calculatePadding = (props: PaddingProps): number => {
-  const { height, multiline = false } = props;
-
-  let result = 0;
-
-  if (multiline) {
-    if (height && multiline) {
-      result = calculateTextAreaPadding(props);
-    } else {
-      result = calculateInputPadding(props);
-    }
-  }
-
-  return Math.max(0, result);
-};
-
-const calculateTextAreaPadding = (props: PaddingProps) => {
-  const { dense } = props;
-
-  return dense ? 10 : 20;
-};
-
-const calculateInputPadding = ({
-  topPosition,
-  fontSize,
-  multiline,
-  scale,
-  dense,
-  offset,
-  isAndroid,
-}: PaddingProps): number => {
-  const refFontSize = scale * fontSize;
-  let result = Math.floor(topPosition / 2);
-
-  result =
-    result +
-    Math.floor((refFontSize - fontSize) / 2) -
-    (scale < 1 ? offset / 2 : 0);
-
-  if (multiline && isAndroid)
-    result = Math.min(dense ? offset / 2 : offset, result);
-
-  return result;
-};
-
-export const adjustPaddingOut = ({
-  pad,
-  multiline,
-  label,
-  scale,
-  height,
-  fontSize,
-  lineHeight,
-  dense,
-  offset,
-  isAndroid,
-}: AdjProps): Padding => {
-  const fontHeight = lineHeight ?? fontSize;
-  const refFontHeight = scale * fontSize;
-  let result = pad;
-
-  if (!isAndroid && height && !multiline) {
-    return {
-      paddingTop: Math.max(0, (height - fontHeight) / 2),
-      paddingBottom: Math.max(0, (height - fontHeight) / 2),
-    };
-  }
-  if (!isAndroid && multiline) {
-    if (dense) {
-      if (label) {
-        result += scale < 1 ? Math.min(offset, (refFontHeight / 2) * scale) : 0;
-      } else {
-        result += 0;
-      }
-    }
-    if (!dense) {
-      if (label) {
-        result +=
-          scale < 1
-            ? Math.min(offset, refFontHeight * scale)
-            : Math.min(offset / 2, refFontHeight * scale);
-      } else {
-        result += scale < 1 ? Math.min(offset / 2, refFontHeight * scale) : 0;
-      }
-    }
-    result = Math.floor(result);
-  }
-  return { paddingTop: result, paddingBottom: result };
-};
-
-export const adjustPaddingFlat = ({
-  pad,
-  scale,
-  multiline,
-  label,
-  height,
-  offset,
-  dense,
-  fontSize,
-  isAndroid,
-  styles,
-}: AdjProps): Padding => {
-  let result = pad;
-  let topResult = result;
-  let bottomResult = result;
-  const { paddingTop, paddingBottom } = styles;
-  const refFontSize = scale * fontSize;
-
-  if (!multiline) {
-    // do not modify padding if input is not multiline
-    if (label) {
-      // return const style for flat input with label
-      return { paddingTop, paddingBottom };
-    }
-    // return pad for flat input without label
-    return { paddingTop: result, paddingBottom: result };
-  }
-
-  if (label) {
-    // add paddings passed from styles
-    topResult = paddingTop;
-    bottomResult = paddingBottom;
-
-    // adjust top padding for iOS
-    if (!isAndroid) {
-      if (dense) {
-        topResult +=
-          scale < 1
-            ? Math.min(result, refFontSize * scale) - result / 2
-            : Math.min(result, refFontSize * scale) - result / 2;
-      }
-      if (!dense) {
-        topResult +=
-          scale < 1
-            ? Math.min(offset / 2, refFontSize * scale)
-            : Math.min(result, refFontSize * scale) - offset / 2;
-      }
-    }
-    topResult = Math.floor(topResult);
-  } else {
-    if (height) {
-      // center text when height is passed
-      return {
-        paddingTop: Math.max(0, (height - fontSize) / 2),
-        paddingBottom: Math.max(0, (height - fontSize) / 2),
-      };
-    }
-    // adjust paddings for iOS if no label
-    if (!isAndroid) {
-      if (dense) {
-        result +=
-          scale < 1
-            ? Math.min(offset / 2, (fontSize / 2) * scale)
-            : Math.min(offset / 2, scale);
-      }
-      if (!dense) {
-        result +=
-          scale < 1
-            ? Math.min(offset, fontSize * scale)
-            : Math.min(fontSize, (offset / 2) * scale);
-      }
-
-      result = Math.floor(result);
-      topResult = result;
-      bottomResult = result;
-    }
-  }
-
-  return {
-    paddingTop: Math.max(0, topResult),
-    paddingBottom: Math.max(0, bottomResult),
-  };
-};
-
-export function calculateFlatAffixTopPosition({
-  height,
-  paddingTop,
-  paddingBottom,
-  affixHeight,
-}: {
-  height: number;
-  paddingTop: number;
-  paddingBottom: number;
-  affixHeight: number;
-}): number {
-  const inputHeightWithoutPadding = height - paddingTop - paddingBottom;
-
-  const halfOfTheInputHeightDecreasedByAffixHeight =
-    (inputHeightWithoutPadding - affixHeight) / 2;
-
-  return paddingTop + halfOfTheInputHeightDecreasedByAffixHeight;
-}
-
-export function calculateOutlinedIconAndAffixTopPosition({
-  height,
-  affixHeight,
-  labelYOffset,
-}: {
-  height: number;
-  affixHeight: number;
-  labelYOffset: number;
-}): number {
-  return (height - affixHeight + labelYOffset) / 2;
-}
-
-export const calculateFlatInputHorizontalPadding = ({
-  adornmentConfig,
-  isV3,
-}: {
-  adornmentConfig: AdornmentConfig[];
-  isV3?: boolean;
-}) => {
-  const { LABEL_PADDING_HORIZONTAL, ADORNMENT_OFFSET, FLAT_INPUT_OFFSET } =
-    getConstants(isV3);
-
-  let paddingLeft = LABEL_PADDING_HORIZONTAL;
-  let paddingRight = LABEL_PADDING_HORIZONTAL;
-
-  adornmentConfig.forEach(({ type, side }) => {
-    if (type === AdornmentType.Icon && side === AdornmentSide.Left) {
-      paddingLeft = ADORNMENT_SIZE + ADORNMENT_OFFSET + FLAT_INPUT_OFFSET;
-    } else if (side === AdornmentSide.Right) {
-      if (type === AdornmentType.Affix) {
-        paddingRight = ADORNMENT_SIZE + ADORNMENT_OFFSET + FLAT_INPUT_OFFSET;
-      } else if (type === AdornmentType.Icon) {
-        paddingRight = ADORNMENT_SIZE + ADORNMENT_OFFSET + FLAT_INPUT_OFFSET;
-      }
-    }
-  });
-
-  return { paddingLeft, paddingRight };
-};
-
-type BaseProps = {
-  theme: InternalTheme;
-  disabled?: boolean;
-};
-
-type Mode = 'flat' | 'outlined';
-
-const getInputTextColor = ({
-  theme,
-  textColor,
-  disabled,
-}: BaseProps & { textColor?: string }) => {
-  if (textColor) {
-    return textColor;
-  }
-
-  if (theme.isV3) {
-    if (disabled) {
-      return theme.colors.onSurfaceDisabled;
-    }
-
-    return theme.colors.onSurface;
-  }
-
-  if (disabled) {
-    return color(theme.colors.text).alpha(0.54).rgb().string();
-  }
-
-  return theme.colors.text;
-};
-
-const getActiveColor = ({
-  theme,
-  disabled,
-  error,
-  activeUnderlineColor,
-  activeOutlineColor,
-  mode,
-}: BaseProps & {
-  error?: boolean;
-  activeUnderlineColor?: string;
-  activeOutlineColor?: string;
-  mode?: Mode;
-}) => {
-  const isFlat = mode === 'flat';
-  const modeColor = isFlat ? activeUnderlineColor : activeOutlineColor;
-
-  if (error) {
-    return theme.colors.error;
-  }
-
-  if (modeColor) {
-    return modeColor;
-  }
-
-  if (disabled) {
-    if (theme.isV3) {
-      return theme.colors.onSurfaceDisabled;
-    }
-
-    return color(theme.colors.text).alpha(0.54).rgb().string();
-  }
-
-  return theme.colors.primary;
-};
-
-const getPlaceholderColor = ({ theme, disabled }: BaseProps) => {
-  if (theme.isV3) {
-    if (disabled) {
-      return theme.colors.onSurfaceDisabled;
-    }
-
-    return theme.colors.onSurfaceVariant;
-  }
-
-  if (disabled) {
-    return theme.colors.disabled;
-  }
-
-  return theme.colors.placeholder;
-};
-
-const getSelectionColor = ({
-  activeColor,
-  customSelectionColor,
-}: {
-  activeColor: string;
-  customSelectionColor?: string;
-}) => {
-  if (typeof customSelectionColor !== 'undefined') {
-    return customSelectionColor;
-  }
-
-  if (Platform.OS === 'android') {
-    return color(activeColor).alpha(0.54).rgb().string();
-  }
-
-  return activeColor;
-};
-
-const getFlatBackgroundColor = ({ theme, disabled }: BaseProps) => {
-  if (theme.isV3) {
-    if (disabled) {
-      return color(theme.colors.onSurface).alpha(0.04).rgb().string();
-    } else {
-      return theme.colors.surfaceVariant;
-    }
-  }
-
-  if (disabled) {
-    return undefined;
-  }
-
-  return theme.dark
-    ? color(theme.colors?.background).lighten(0.24).rgb().string()
-    : color(theme.colors?.background).darken(0.06).rgb().string();
-};
-
-const getFlatUnderlineColor = ({
-  theme,
-  disabled,
-  underlineColor,
-}: BaseProps & { underlineColor?: string }) => {
-  if (!disabled && underlineColor) {
-    return underlineColor;
-  }
-
-  if (theme.isV3) {
-    if (disabled) {
-      return theme.colors.onSurfaceDisabled;
-    }
-
-    return theme.colors.onSurfaceVariant;
-  }
-
-  if (disabled) {
-    return 'transparent';
-  }
-
-  return theme.colors.disabled;
-};
-
-const getOutlinedOutlineInputColor = ({
-  theme,
-  disabled,
-  customOutlineColor,
-}: BaseProps & { customOutlineColor?: string }) => {
-  const isTransparent = color(customOutlineColor).alpha() === 0;
-
-  if (!disabled && customOutlineColor) {
-    return customOutlineColor;
-  }
-
-  if (theme.isV3) {
-    if (disabled) {
-      if (theme.dark) {
-        return 'transparent';
-      }
-      return theme.colors.surfaceDisabled;
-    }
-
-    return theme.colors.outline;
-  }
-
-  if (disabled) {
-    if (isTransparent) {
-      return customOutlineColor;
-    }
-    return theme.colors.disabled;
-  }
-  return theme.colors.placeholder;
-};
-
-export const getFlatInputColors = ({
-  underlineColor,
-  activeUnderlineColor,
-  customSelectionColor,
-  textColor,
-  disabled,
-  error,
-  theme,
-}: {
-  underlineColor?: string;
-  activeUnderlineColor?: string;
-  customSelectionColor?: string;
-  textColor?: string;
-  disabled?: boolean;
-  error?: boolean;
-  theme: InternalTheme;
-}) => {
-  const baseFlatColorProps = { theme, disabled };
-  const activeColor = getActiveColor({
-    ...baseFlatColorProps,
-    error,
-    activeUnderlineColor,
-    mode: 'flat',
-  });
-
-  return {
-    inputTextColor: getInputTextColor({
-      ...baseFlatColorProps,
-      textColor,
-    }),
-    activeColor,
-    underlineColorCustom: getFlatUnderlineColor({
-      ...baseFlatColorProps,
-      underlineColor,
-    }),
-    placeholderColor: getPlaceholderColor(baseFlatColorProps),
-    selectionColor: getSelectionColor({ activeColor, customSelectionColor }),
-    errorColor: theme.colors.error,
-    backgroundColor: getFlatBackgroundColor(baseFlatColorProps),
-  };
-};
-
-export const getOutlinedInputColors = ({
-  activeOutlineColor,
-  customOutlineColor,
-  customSelectionColor,
-  textColor,
-  disabled,
-  error,
-  theme,
-}: {
-  activeOutlineColor?: string;
-  customOutlineColor?: string;
-  customSelectionColor?: string;
-  textColor?: string;
-  disabled?: boolean;
-  error?: boolean;
-  theme: InternalTheme;
-}) => {
-  const baseOutlinedColorProps = { theme, disabled };
-  const activeColor = getActiveColor({
-    ...baseOutlinedColorProps,
-    error,
-    activeOutlineColor,
-    mode: 'outlined',
-  });
-
-  return {
-    inputTextColor: getInputTextColor({
-      ...baseOutlinedColorProps,
-      textColor,
-    }),
-    activeColor,
-    outlineColor: getOutlinedOutlineInputColor({
-      ...baseOutlinedColorProps,
-      customOutlineColor,
-    }),
-    placeholderColor: getPlaceholderColor(baseOutlinedColorProps),
-    selectionColor: getSelectionColor({ activeColor, customSelectionColor }),
-    errorColor: theme.colors.error,
-  };
-};
-
-export const getConstants = (isV3?: boolean) => {
-  // Text input affix
-  let AFFIX_OFFSET;
-  // Text input icon
-  let ICON_OFFSET;
-  //Text input flat
-  let LABEL_PADDING_TOP;
-  let LABEL_PADDING_HORIZONTAL;
-  let FLAT_INPUT_OFFSET;
-  let MIN_HEIGHT;
-  // Text input outlined;
-  let INPUT_PADDING_HORIZONTAL;
-  let ADORNMENT_OFFSET;
-  let OUTLINED_INPUT_OFFSET;
-
-  if (isV3) {
-    AFFIX_OFFSET = MD3_AFFIX_OFFSET;
-    ICON_OFFSET = MD3_ICON_OFFSET;
-    LABEL_PADDING_TOP = MD3_LABEL_PADDING_TOP;
-    LABEL_PADDING_HORIZONTAL = MD3_LABEL_PADDING_HORIZONTAL;
-    FLAT_INPUT_OFFSET = MD3_FLAT_INPUT_OFFSET;
-    MIN_HEIGHT = MD3_MIN_HEIGHT;
-    INPUT_PADDING_HORIZONTAL = MD3_INPUT_PADDING_HORIZONTAL;
-    ADORNMENT_OFFSET = MD3_ADORNMENT_OFFSET;
-    OUTLINED_INPUT_OFFSET = MD3_OUTLINED_INPUT_OFFSET;
-  } else {
-    AFFIX_OFFSET = MD2_AFFIX_OFFSET;
-    ICON_OFFSET = MD2_ICON_OFFSET;
-    LABEL_PADDING_TOP = MD2_LABEL_PADDING_TOP;
-    LABEL_PADDING_HORIZONTAL = MD2_LABEL_PADDING_HORIZONTAL;
-    FLAT_INPUT_OFFSET = MD2_FLAT_INPUT_OFFSET;
-    MIN_HEIGHT = MD2_MIN_HEIGHT;
-    INPUT_PADDING_HORIZONTAL = MD2_INPUT_PADDING_HORIZONTAL;
-    ADORNMENT_OFFSET = MD2_ADORNMENT_OFFSET;
-    OUTLINED_INPUT_OFFSET = MD2_OUTLINED_INPUT_OFFSET;
-  }
-
-  return {
-    AFFIX_OFFSET,
-    ICON_OFFSET,
-    LABEL_PADDING_TOP,
-    LABEL_PADDING_HORIZONTAL,
-    FLAT_INPUT_OFFSET,
-    MIN_HEIGHT,
-    INPUT_PADDING_HORIZONTAL,
-    ADORNMENT_OFFSET,
-    OUTLINED_INPUT_OFFSET,
-    MIN_WIDTH,
-  };
-};
diff --git a/src/components/TextInput/hooks.ts b/src/components/TextInput/hooks.ts
new file mode 100644
index 0000000000..d00667550c
--- /dev/null
+++ b/src/components/TextInput/hooks.ts
@@ -0,0 +1,467 @@
+import {
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type RefObject,
+} from 'react';
+import { TextInput as NativeTextInput } from 'react-native';
+import type { BlurEvent, FocusEvent } from 'react-native';
+
+import {
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+import {
+  ACTIVE_LABEL_FONT_SIZE,
+  INACTIVE_LABEL_FONT_SIZE,
+  TIMING_CONFIG,
+} from './constants';
+import type {
+  TextInputAnimationState,
+  TextInputFlags,
+  TextInputAnimationHandlers,
+  TextInputHookReturn,
+  TextInputLayoutState,
+  TextInputProps,
+  TextInputVariant,
+} from './TextInput';
+import {
+  getAccentColors,
+  getAccessibilityData,
+  getFilledTextInputData,
+  getOutlinedTextInputData,
+  getTextInputAnimationLayout,
+} from './utils';
+import { useLocale } from '../../core/locale';
+import { useInternalTheme } from '../../core/theming';
+import type { InternalTheme } from '../../theme/types';
+
+const useTextInputAnimation = ({
+  variant,
+  isRTL,
+  hasAccessory,
+  value,
+  defaultValue,
+}: {
+  variant: TextInputVariant;
+  isRTL: boolean;
+  hasAccessory: boolean;
+  value: string | undefined;
+  defaultValue: string | undefined;
+}): TextInputAnimationState & TextInputAnimationHandlers => {
+  const initialText = value ?? defaultValue ?? '';
+
+  const focusSV = useSharedValue(0);
+  const floatSV = useSharedValue(initialText.length > 0 ? 1 : 0);
+
+  const { activeTop, inactiveTop, translateXEnd } = getTextInputAnimationLayout(
+    {
+      variant,
+      hasAccessory,
+      isRTL,
+    }
+  );
+
+  const runFocusAnimation = (hasText: boolean) => {
+    focusSV.value = withTiming(1, TIMING_CONFIG);
+
+    if (!hasText) {
+      floatSV.value = withTiming(1, TIMING_CONFIG);
+    }
+  };
+
+  const runBlurAnimation = (hasText: boolean) => {
+    focusSV.value = withTiming(0, TIMING_CONFIG);
+
+    floatSV.value = withTiming(hasText ? 1 : 0, TIMING_CONFIG);
+  };
+
+  const syncFloatToValue = (hasText: boolean) => {
+    floatSV.value = withTiming(hasText ? 1 : 0, TIMING_CONFIG);
+  };
+
+  const animatedLabelWrapperStyle = useAnimatedStyle(() => {
+    const top = interpolate(floatSV.value, [0, 1], [inactiveTop, activeTop]);
+
+    if (variant === 'filled') {
+      return { top };
+    }
+
+    return {
+      top,
+      transform: [
+        { translateX: interpolate(floatSV.value, [0, 1], [0, translateXEnd]) },
+      ],
+    };
+  });
+
+  const animatedLabelTextStyle = useAnimatedStyle(() => ({
+    fontSize: interpolate(
+      floatSV.value,
+      [0, 1],
+      [INACTIVE_LABEL_FONT_SIZE, ACTIVE_LABEL_FONT_SIZE]
+    ),
+  }));
+
+  const animatedContainerStyle = useAnimatedStyle(() => ({
+    opacity: floatSV.value,
+  }));
+
+  const animatedActiveOutlineStyle = useAnimatedStyle(() => ({
+    transform: [{ scaleX: focusSV.value }],
+  }));
+
+  return {
+    animatedLabelWrapperStyle,
+    animatedLabelTextStyle,
+    animatedContainerStyle,
+    animatedActiveOutlineStyle:
+      variant === 'filled' ? animatedActiveOutlineStyle : undefined,
+    runFocusAnimation,
+    runBlurAnimation,
+    syncFloatToValue,
+  };
+};
+
+const useTextInputInput = (
+  props: Pick<
+    TextInputProps,
+    'value' | 'defaultValue' | 'onChangeText' | 'counter' | 'maxLength'
+  >
+) => {
+  const isControlled = props.value !== undefined;
+  const hasCounter = !!(props.counter && props.maxLength);
+
+  const initialText = isControlled ? props.value : props.defaultValue;
+
+  const ref = useRef(initialText ?? '');
+
+  const [hasValue, setHasValue] = useState(!!initialText);
+  const [charCount, setCharCount] = useState(initialText?.length ?? 0);
+
+  const inputLength = isControlled
+    ? (props.value?.length ?? 0)
+    : hasCounter
+      ? charCount
+      : hasValue
+        ? 1
+        : 0;
+
+  const getHasText = () => {
+    if (isControlled) {
+      return !!props.value;
+    }
+
+    return ref.current.length > 0;
+  };
+
+  const onChangeText = (text: string) => {
+    ref.current = text;
+
+    if (!isControlled) {
+      const next = text.length > 0;
+
+      if (hasCounter) {
+        setCharCount(text.length);
+      }
+
+      if (next !== hasValue) {
+        setHasValue(next);
+      }
+    }
+
+    props.onChangeText?.(text);
+  };
+
+  return {
+    hasValue: isControlled ? !!props.value : hasValue,
+    inputLength,
+    getHasText,
+    onChangeText,
+  };
+};
+
+const useTextInputFocus = (
+  props: Pick<TextInputProps, 'onFocus' | 'onBlur'>,
+  input: RefObject<NativeTextInput | null>,
+  isDisabled: boolean,
+  { runFocusAnimation, runBlurAnimation }: TextInputAnimationHandlers,
+  getHasText: () => boolean
+) => {
+  const [isFocused, setIsFocused] = useState(false);
+
+  const onFocus = (e: FocusEvent) => {
+    props.onFocus?.(e);
+
+    setIsFocused(true);
+
+    runFocusAnimation(getHasText());
+  };
+
+  const onBlur = (e: BlurEvent) => {
+    props.onBlur?.(e);
+
+    setIsFocused(false);
+
+    runBlurAnimation(getHasText());
+  };
+
+  const focusInput = () => {
+    if (isDisabled) return;
+
+    input.current?.focus();
+  };
+
+  return {
+    isFocused,
+    onFocus,
+    onBlur,
+    focusInput,
+  };
+};
+
+const useTextInputFlags = (
+  props: TextInputProps,
+  isFocused: boolean,
+  hasValue: boolean,
+  isRTL: boolean,
+  hasAccessory: boolean
+): TextInputFlags => {
+  const isFloating = isFocused || hasValue;
+
+  return {
+    isRTL,
+    isFloating,
+    isDisabled: !!props.disabled,
+    isEditable: props.disabled ? false : props.editable,
+    hasError: !!props.error,
+    hasCounter: !!(props.counter && props.maxLength),
+    hasAccessory,
+    hasPrefix: !!props.prefix && isFloating,
+    hasSuffix: !!props.suffix && isFloating,
+  };
+};
+
+const useTextInputLayout = ({
+  variant,
+  props,
+  input,
+  theme,
+  flags,
+  isFocused,
+  animation,
+}: {
+  variant: TextInputVariant;
+  props: TextInputProps;
+  input: RefObject<NativeTextInput | null>;
+  theme: InternalTheme;
+  flags: TextInputFlags;
+  isFocused: boolean;
+  animation: TextInputAnimationState;
+}): TextInputLayoutState => {
+  const { isRTL, isDisabled, hasError, hasAccessory, hasSuffix } = flags;
+
+  const {
+    animatedLabelWrapperStyle,
+    animatedLabelTextStyle,
+    animatedActiveOutlineStyle,
+  } = animation;
+
+  const {
+    input: _input,
+    isDisabled: _isDisabled,
+    hasError: _hasError,
+    hasSuffix: _hasSuffix,
+    ...layout
+  } = variant === 'filled'
+    ? getFilledTextInputData(
+        {
+          input,
+          theme,
+          isFocused,
+          isRTL,
+          isDisabled,
+          hasAccessory,
+          hasError,
+          hasSuffix,
+          animatedLabelWrapperStyle,
+          animatedLabelTextStyle,
+          animatedActiveOutlineStyle,
+        },
+        props
+      )
+    : getOutlinedTextInputData(
+        {
+          input,
+          theme,
+          isFocused,
+          isRTL,
+          isDisabled,
+          hasAccessory,
+          hasError,
+          hasSuffix,
+          animatedLabelWrapperStyle,
+          animatedLabelTextStyle,
+          animatedActiveOutlineStyle,
+        },
+        props
+      );
+
+  void _input;
+  void _isDisabled;
+  void _hasError;
+  void _hasSuffix;
+
+  return layout;
+};
+
+export const useTextInput = (props: TextInputProps): TextInputHookReturn => {
+  const { ref, variant = 'filled', theme: themeOverride } = props;
+
+  const input = useRef<NativeTextInput>(null);
+  const init = useRef(false);
+
+  const theme = useInternalTheme(themeOverride);
+
+  const { direction } = useLocale();
+
+  const isControlled = props.value !== undefined;
+  const isRTL = direction === 'rtl';
+  const hasAccessory = isRTL ? !!props.endAccessory : !!props.startAccessory;
+
+  const { hasValue, inputLength, getHasText, onChangeText } =
+    useTextInputInput(props);
+
+  const animation = useTextInputAnimation({
+    variant,
+    isRTL,
+    hasAccessory,
+    value: props.value,
+    defaultValue: props.defaultValue,
+  });
+
+  const { isFocused, onFocus, onBlur, focusInput } = useTextInputFocus(
+    props,
+    input,
+    !!props.disabled,
+    animation,
+    getHasText
+  );
+
+  const flags = useTextInputFlags(
+    props,
+    isFocused,
+    hasValue,
+    isRTL,
+    hasAccessory
+  );
+
+  /**
+   * Edge case: a controlled `value` can change programmatically.
+   * Reconcile the float animation with the new text here.
+   * While focused the label is always floated, so we skip to avoid fighting the
+   * focus animation, and depend only on `value` to avoid re-running on
+   * focus/blur transitions (those are already handled by their own handlers)
+   */
+  useEffect(() => {
+    if (!init.current) {
+      init.current = true;
+      return;
+    }
+
+    if (isControlled && !isFocused) {
+      animation.syncFloatToValue(!!props.value);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- [props.value] is the only dep that should act as a trigger
+  }, [props.value]);
+
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      if (flags.isDisabled) return;
+
+      input.current?.focus();
+    },
+    clear: () => {
+      input.current?.clear();
+
+      onChangeText('');
+
+      if (!input.current?.isFocused()) {
+        animation.runBlurAnimation(false);
+      }
+    },
+    blur: () => input.current?.blur(),
+    isFocused: () => input.current?.isFocused() || false,
+    setNativeProps: (args: Object) => input.current?.setNativeProps(args),
+    setSelection: (start: number, end: number) =>
+      input.current?.setSelection(start, end),
+  }));
+
+  const { selectionColor, cursorColor } = getAccentColors({
+    theme,
+    hasError: flags.hasError,
+  });
+
+  const placeholderTextColor =
+    props.placeholderTextColor ?? theme.colors.onSurfaceVariant;
+
+  const layout = useTextInputLayout({
+    variant,
+    props,
+    input,
+    theme,
+    flags,
+    isFocused,
+    animation,
+  });
+
+  const accessibilityProps = getAccessibilityData({
+    hasError: flags.hasError,
+    hasCounter: flags.hasCounter,
+    isDisabled: flags.isDisabled,
+    data: props,
+    inputLength,
+  });
+
+  const counterText = `${inputLength}/${props.maxLength}`;
+
+  const renderLeadingAccessory = flags.isRTL
+    ? props.endAccessory
+    : props.startAccessory;
+  const renderTrailingAccessory = flags.isRTL
+    ? props.startAccessory
+    : props.endAccessory;
+
+  // https://github.com/facebook/react-native/issues/31573
+  const placeholder =
+    isFocused || !props.label || hasValue ? props.placeholder : ' ';
+
+  return {
+    input,
+    isDisabled: flags.isDisabled,
+    isEditable: flags.isEditable,
+    hasPrefix: flags.hasPrefix,
+    hasCounter: flags.hasCounter,
+    hasSuffix: flags.hasSuffix,
+    hasError: flags.hasError,
+    placeholderTextColor,
+    selectionColor,
+    cursorColor,
+    animatedActiveOutlineStyles: undefined,
+    animatedContainerStyle: animation.animatedContainerStyle,
+    placeholder,
+    counterText,
+    accessibilityProps,
+    ...layout,
+    renderLeadingAccessory,
+    renderTrailingAccessory,
+    onChangeText,
+    onFocus,
+    onBlur,
+    focusInput,
+  };
+};
diff --git a/src/components/TextInput/index.ts b/src/components/TextInput/index.ts
new file mode 100644
index 0000000000..b6d400c68c
--- /dev/null
+++ b/src/components/TextInput/index.ts
@@ -0,0 +1,13 @@
+import TextInputComponent from './TextInput';
+import TextInputIcon from './TextInputIcon';
+
+const TextInput = Object.assign(
+  // @component ./TextInput.tsx
+  TextInputComponent,
+  {
+    // @component ./TextInputIcon.tsx
+    Icon: TextInputIcon,
+  }
+);
+
+export default TextInput;
diff --git a/src/components/TextInput/styles.ts b/src/components/TextInput/styles.ts
new file mode 100644
index 0000000000..0a65662a5a
--- /dev/null
+++ b/src/components/TextInput/styles.ts
@@ -0,0 +1,128 @@
+import { StyleSheet } from 'react-native';
+
+import {
+  ACCESSORY_SIZE,
+  FILLED_DISABLED_CONTAINER_OPACITY,
+  OUTLINED_LABEL_PADDING_HORIZONTAL,
+  SUPPORTING_TEXT_FONT_SIZE,
+  SUPPORTING_TEXT_MARGIN_TOP,
+  TEXT_INPUT_ACCESSORY_MARGIN_HORIZONTAL,
+  TEXT_INPUT_BORDER_RADIUS,
+  TEXT_INPUT_HEIGHT,
+  TEXT_INPUT_INPUT_WRAPPER_PADDING_HORIZONTAL,
+  TEXT_INPUT_PADDING_VERTICAL,
+} from './constants';
+import { tokens } from '../../theme/tokens';
+
+const { bodyLarge, bodySmall } = tokens.md.sys.typescale;
+
+export const styles = StyleSheet.create({
+  input: {
+    paddingVertical: 0,
+    paddingHorizontal: 0,
+    includeFontPadding: false,
+    fontWeight: bodyLarge.fontWeight,
+  },
+  field: {
+    flexDirection: 'row',
+    minHeight: TEXT_INPUT_HEIGHT,
+    paddingVertical: TEXT_INPUT_PADDING_VERTICAL,
+  },
+  addendum: {
+    flexDirection: 'row',
+  },
+  supportingText: {
+    flex: 1,
+    marginTop: SUPPORTING_TEXT_MARGIN_TOP,
+    paddingHorizontal: TEXT_INPUT_INPUT_WRAPPER_PADDING_HORIZONTAL,
+    fontSize: SUPPORTING_TEXT_FONT_SIZE,
+    fontWeight: bodySmall.fontWeight,
+    textAlign: 'left',
+  },
+  counter: {
+    marginTop: SUPPORTING_TEXT_MARGIN_TOP,
+    marginStart: 'auto',
+    paddingHorizontal: TEXT_INPUT_INPUT_WRAPPER_PADDING_HORIZONTAL,
+    fontSize: SUPPORTING_TEXT_FONT_SIZE,
+    fontWeight: bodySmall.fontWeight,
+    textAlign: 'right',
+  },
+  trailingAccessory: {
+    width: ACCESSORY_SIZE,
+    height: ACCESSORY_SIZE,
+    alignSelf: 'center',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginEnd: TEXT_INPUT_ACCESSORY_MARGIN_HORIZONTAL,
+  },
+  leadingAccessory: {
+    width: ACCESSORY_SIZE,
+    height: ACCESSORY_SIZE,
+    alignSelf: 'center',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginStart: TEXT_INPUT_ACCESSORY_MARGIN_HORIZONTAL,
+  },
+  disabled: {
+    opacity: tokens.md.sys.state.opacity.disabled,
+  },
+  iconWrapper: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  icon: {
+    margin: 0,
+  },
+});
+
+export const filledStyles = StyleSheet.create({
+  outline: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    pointerEvents: 'none',
+  },
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    paddingHorizontal: TEXT_INPUT_INPUT_WRAPPER_PADDING_HORIZONTAL,
+  },
+  labelWrapper: {
+    position: 'absolute',
+    pointerEvents: 'none',
+  },
+  disabledBackground: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    opacity: FILLED_DISABLED_CONTAINER_OPACITY,
+    pointerEvents: 'none',
+  },
+});
+
+export const outlinedStyles = StyleSheet.create({
+  outline: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    borderRadius: TEXT_INPUT_BORDER_RADIUS,
+    pointerEvents: 'none',
+  },
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: TEXT_INPUT_INPUT_WRAPPER_PADDING_HORIZONTAL,
+  },
+  labelWrapper: {
+    position: 'absolute',
+    paddingHorizontal: OUTLINED_LABEL_PADDING_HORIZONTAL,
+    pointerEvents: 'none',
+  },
+});
diff --git a/src/components/TextInput/types.tsx b/src/components/TextInput/types.tsx
deleted file mode 100644
index 4ec2952366..0000000000
--- a/src/components/TextInput/types.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import * as React from 'react';
-import type {
-  TextInput as NativeTextInput,
-  Animated,
-  TextStyle,
-  LayoutChangeEvent,
-  ColorValue,
-  StyleProp,
-  ViewProps,
-  ViewStyle,
-  NativeSyntheticEvent,
-  TextLayoutEventData,
-} from 'react-native';
-
-import type { $Omit, InternalTheme, ThemeProp } from './../../types';
-
-export type TextInputLabelProp = string | React.ReactElement;
-
-type TextInputProps = React.ComponentPropsWithRef<typeof NativeTextInput> & {
-  mode?: 'flat' | 'outlined';
-  left?: React.ReactNode;
-  right?: React.ReactNode;
-  disabled?: boolean;
-  label?: TextInputLabelProp;
-  placeholder?: string;
-  error?: boolean;
-  onChangeText?: Function;
-  selectionColor?: string;
-  cursorColor?: string;
-  underlineColor?: string;
-  activeUnderlineColor?: string;
-  outlineColor?: string;
-  activeOutlineColor?: string;
-  textColor?: string;
-  dense?: boolean;
-  multiline?: boolean;
-  numberOfLines?: number;
-  onFocus?: (args: any) => void;
-  onBlur?: (args: any) => void;
-  render?: (props: RenderProps) => React.ReactNode;
-  value?: string;
-  style?: StyleProp<TextStyle>;
-  theme?: ThemeProp;
-  testID?: string;
-  contentStyle?: StyleProp<TextStyle>;
-  outlineStyle?: StyleProp<ViewStyle>;
-  underlineStyle?: StyleProp<ViewStyle>;
-  scaledLabel?: boolean;
-};
-
-export type RenderProps = {
-  ref: (a?: NativeTextInput | null) => void;
-  onChangeText?: (a: string) => void;
-  placeholder?: string;
-  placeholderTextColor?: ColorValue;
-  editable?: boolean;
-  selectionColor?: string;
-  cursorColor?: string;
-  onFocus?: (args: any) => void;
-  onBlur?: (args: any) => void;
-  underlineColorAndroid?: string;
-  onLayout?: (args: any) => void;
-  style: any;
-  multiline?: boolean;
-  numberOfLines?: number;
-  value?: string;
-  adjustsFontSizeToFit?: boolean;
-  testID?: string;
-};
-type TextInputTypesWithoutMode = $Omit<TextInputProps, 'mode'>;
-export type State = {
-  labeled: Animated.Value;
-  error: Animated.Value;
-  focused: boolean;
-  displayPlaceholder: boolean;
-  value?: string;
-  labelTextLayout: { width: number };
-  labelLayout: { measured: boolean; width: number; height: number };
-  leftLayout: { height: number | null; width: number | null };
-  rightLayout: { height: number | null; width: number | null };
-  inputContainerLayout: { width: number };
-  contentStyle?: StyleProp<ViewProps>;
-};
-export type ChildTextInputProps = {
-  parentState: State;
-  innerRef: (ref?: NativeTextInput | null) => void;
-  onFocus?: (args: any) => void;
-  onBlur?: (args: any) => void;
-  forceFocus: () => void;
-  onChangeText?: (value: string) => void;
-  onInputLayout: (event: LayoutChangeEvent) => void;
-  onLayoutAnimatedText: (args: any) => void;
-  onLabelTextLayout: (event: NativeSyntheticEvent<TextLayoutEventData>) => void;
-  onLeftAffixLayoutChange: (event: LayoutChangeEvent) => void;
-  onRightAffixLayoutChange: (event: LayoutChangeEvent) => void;
-} & $Omit<TextInputTypesWithoutMode, 'theme'> & { theme: InternalTheme };
-
-export type LabelProps = {
-  mode?: 'flat' | 'outlined';
-  placeholderStyle: any;
-  placeholderOpacity:
-    | number
-    | Animated.Value
-    | Animated.AnimatedInterpolation<number>;
-  baseLabelTranslateX: number;
-  baseLabelTranslateY: number;
-  wiggleOffsetX: number;
-  labelScale: number;
-  fontSize: number;
-  lineHeight?: number | undefined;
-  fontWeight: TextStyle['fontWeight'];
-  font: any;
-  topPosition: number;
-  paddingLeft?: number;
-  paddingRight?: number;
-  labelTranslationXOffset?: number;
-  placeholderColor: string | null;
-  backgroundColor?: ColorValue;
-  label?: TextInputLabelProp | null;
-  hasActiveOutline?: boolean | null;
-  activeColor: string;
-  errorColor?: string;
-  labelError?: boolean | null;
-  onLayoutAnimatedText: (args: any) => void;
-  onLabelTextLayout: (event: NativeSyntheticEvent<TextLayoutEventData>) => void;
-  roundness: number;
-  maxFontSizeMultiplier?: number | undefined | null;
-  testID?: string;
-  contentStyle?: StyleProp<ViewProps>;
-  theme?: ThemeProp;
-};
-export type InputLabelProps = {
-  labeled: Animated.Value;
-  error: Animated.Value;
-  focused: boolean;
-  wiggle: boolean;
-  opacity: number;
-  labelLayoutMeasured: boolean;
-  labelLayoutWidth: number;
-  labelLayoutHeight: number;
-  inputContainerLayout: { width: number };
-  labelBackground?: any;
-  maxFontSizeMultiplier?: number | undefined | null;
-  isV3?: boolean;
-  scaledLabel?: boolean;
-} & LabelProps;
-
-export type LabelBackgroundProps = {
-  labelStyle: any;
-  labeled: Animated.Value;
-  labelLayoutWidth: number;
-  labelLayoutHeight: number;
-  maxFontSizeMultiplier?: number | undefined | null;
-  theme?: ThemeProp;
-} & LabelProps;
diff --git a/src/components/TextInput/utils.ts b/src/components/TextInput/utils.ts
new file mode 100644
index 0000000000..3eed947f83
--- /dev/null
+++ b/src/components/TextInput/utils.ts
@@ -0,0 +1,632 @@
+import { Platform } from 'react-native';
+import type { ColorValue, StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+import type { AnimatedStyle } from 'react-native-reanimated';
+
+import {
+  ACTIVE_INDICATOR_SIZE,
+  FILLED_ACTIVE_LABEL_TOP_POSITION,
+  FILLED_INACTIVE_LABEL_TOP_POSITION,
+  FILLED_LABEL_START_OFFSET_WITH_ACCESSORY,
+  FILLED_MULTILINE_PADDING_TOP,
+  INACTIVE_INDICATOR_SIZE,
+  INPUT_FONT_SIZE,
+  LABEL_START_OFFSET_WITHOUT_ACCESSORY,
+  OUTLINED_ACTIVE_LABEL_TOP_POSITION,
+  OUTLINED_DISABLED_OUTLINE_OPACITY,
+  OUTLINED_INACTIVE_LABEL_TOP_POSITION,
+  OUTLINED_LABEL_START_OFFSET_WITH_ACCESSORY,
+  OUTLINED_LABEL_TRANSLATE_DISTANCE_WITHOUT_ACCESSORY,
+  OUTLINED_LABEL_TRANSLATE_DISTANCE_WITH_ACCESSORY,
+  OUTLINED_MULTILINE_PADDING_TOP,
+  PREFIX_END_PADDING,
+  SUFFIX_START_PADDING,
+  TEXT_INPUT_BORDER_RADIUS,
+  FILLED_PADDING_BOTTOM,
+} from './constants';
+import { filledStyles, outlinedStyles, styles } from './styles';
+import type {
+  FilledTextInputHookData,
+  OutlinedTextInputHookData,
+  TextInputProps,
+  TextInputSharedApi,
+  TextInputVariant,
+  SharedTextInputStyleData,
+  GetAccessibilityDataProps,
+  GetAccessibilityDataReturn,
+} from './TextInput';
+import type { InternalTheme } from '../../theme/types';
+
+export const getTextInputAnimationLayout = ({
+  variant,
+  hasAccessory,
+  isRTL,
+}: {
+  variant: TextInputVariant;
+  hasAccessory: boolean;
+  isRTL: boolean;
+}) => {
+  const activeTop =
+    variant === 'filled'
+      ? FILLED_ACTIVE_LABEL_TOP_POSITION
+      : OUTLINED_ACTIVE_LABEL_TOP_POSITION;
+
+  const inactiveTop =
+    variant === 'filled'
+      ? FILLED_INACTIVE_LABEL_TOP_POSITION
+      : OUTLINED_INACTIVE_LABEL_TOP_POSITION;
+
+  const distance = hasAccessory
+    ? OUTLINED_LABEL_TRANSLATE_DISTANCE_WITH_ACCESSORY
+    : OUTLINED_LABEL_TRANSLATE_DISTANCE_WITHOUT_ACCESSORY;
+
+  const translateXEnd = (isRTL ? 1 : -1) * distance;
+
+  return { activeTop, inactiveTop, translateXEnd };
+};
+
+export const getAccentColors = ({
+  theme,
+  hasError,
+}: {
+  theme: InternalTheme;
+  hasError: boolean;
+}) => {
+  const color = hasError ? theme.colors.error : theme.colors.primary;
+
+  return {
+    selectionColor: color,
+    cursorColor: color,
+  };
+};
+
+export const getLabelColor = ({
+  theme,
+  hasError,
+  isFocused,
+  isDisabled,
+}: {
+  theme: InternalTheme;
+  isFocused: boolean;
+  hasError: boolean;
+  isDisabled: boolean;
+}) => {
+  const {
+    colors: { error, primary, onSurface, onSurfaceVariant },
+  } = theme;
+
+  if (hasError) {
+    return error;
+  }
+  if (isDisabled) {
+    return onSurface;
+  }
+  if (isFocused) {
+    return primary;
+  }
+  return onSurfaceVariant;
+};
+
+export const getSupportingTextColor = ({
+  theme,
+  hasError,
+  isDisabled,
+}: {
+  theme: InternalTheme;
+  hasError: boolean;
+  isDisabled: boolean;
+}) => {
+  const {
+    colors: { error, onSurface, onSurfaceVariant },
+  } = theme;
+
+  if (hasError) {
+    return error;
+  }
+  if (isDisabled) {
+    return onSurface;
+  }
+  return onSurfaceVariant;
+};
+
+/**
+ * Returns the solid background color for the filled field container, or
+ * `undefined` when disabled. The disabled tint is rendered
+ * as a separate overlay View whose alpha is applied via the `opacity` style;
+ * keeping the alpha out of the color string is what makes the component safe
+ * to use with `PlatformColor` values on Android.
+ */
+export const getFieldBackgroundColor = ({
+  theme,
+  isDisabled,
+}: {
+  theme: InternalTheme;
+  isDisabled: boolean;
+}): ColorValue | undefined => {
+  if (isDisabled) {
+    return undefined;
+  }
+
+  return theme.colors.surfaceContainerHighest;
+};
+
+export const getIconColor = ({
+  theme,
+  iconColor,
+  hasError,
+  isDisabled,
+}: {
+  theme: InternalTheme;
+  iconColor?: ColorValue;
+  hasError: boolean;
+  isDisabled: boolean;
+}): ColorValue => {
+  if (iconColor) return iconColor;
+  if (hasError) return theme.colors.error;
+  if (isDisabled) return theme.colors.onSurface;
+  return theme.colors.onSurfaceVariant;
+};
+
+/**
+ * Returns the raw outline color for a filled field. The disabled state's
+ * alpha is intentionally NOT baked in here — it is applied via the `opacity`
+ * style on the (childless) outline View so the value can be a `PlatformColor`
+ * on Android, which the `color` library cannot parse at runtime.
+ */
+export const getOutlineColor = ({
+  theme,
+  hasError,
+  isFocused,
+  isDisabled,
+}: {
+  theme: InternalTheme;
+  isFocused: boolean;
+  hasError: boolean;
+  isDisabled: boolean;
+}) => {
+  const {
+    colors: { error, onSurface, primary, outline },
+  } = theme;
+
+  if (hasError) {
+    return error;
+  }
+  if (isDisabled) {
+    return onSurface;
+  }
+  if (isFocused) {
+    return primary;
+  }
+
+  return outline;
+};
+
+/**
+ * Computes the style arrays that are identical across the filled and outlined
+ * variants. Each variant logic function calls this and then only computes its
+ * own variant-specific styles on top.
+ *
+ * Returns `isRTL` as well so callers can use it when building `inputStyles`,
+ * which is variant-specific (filled adds `MULTILINE_PADDING_TOP`).
+ */
+export const getSharedTextInputStyleData = (
+  api: TextInputSharedApi
+): SharedTextInputStyleData => {
+  const {
+    theme,
+    isDisabled,
+    hasError,
+    isFocused,
+    isRTL,
+    animatedLabelTextStyle,
+  } = api;
+
+  const labelColor = getLabelColor({ theme, hasError, isFocused, isDisabled });
+
+  const supportingTextColor = getSupportingTextColor({
+    theme,
+    hasError,
+    isDisabled,
+  });
+  const {
+    colors: { onSurfaceVariant },
+  } = theme;
+
+  const animatedLabelTextStyles: StyleProp<
+    AnimatedStyle<StyleProp<TextStyle>>
+  > = [
+    styles.input,
+    { color: labelColor },
+    animatedLabelTextStyle,
+    isDisabled && styles.disabled,
+  ];
+
+  const supportingTextStyles: StyleProp<TextStyle> = [
+    styles.supportingText,
+    {
+      color: supportingTextColor,
+      writingDirection: isRTL ? 'rtl' : 'ltr',
+    },
+    isDisabled && styles.disabled,
+  ];
+
+  const counterStyles: StyleProp<TextStyle> = [
+    styles.counter,
+    {
+      color: supportingTextColor,
+      writingDirection: isRTL ? 'rtl' : 'ltr',
+    },
+    isDisabled && styles.disabled,
+  ];
+
+  const prefixStyles: StyleProp<TextStyle> = [
+    styles.input,
+    {
+      fontSize: INPUT_FONT_SIZE,
+      color: onSurfaceVariant,
+      paddingEnd: PREFIX_END_PADDING,
+    },
+    isDisabled && styles.disabled,
+  ];
+
+  const suffixStyles: StyleProp<TextStyle> = [
+    styles.input,
+    {
+      fontSize: INPUT_FONT_SIZE,
+      color: onSurfaceVariant,
+      paddingStart: SUFFIX_START_PADDING,
+    },
+    isDisabled && styles.disabled,
+  ];
+
+  const leadingAccessoryStyles: StyleProp<ViewStyle> = [
+    styles.leadingAccessory,
+    isDisabled && styles.disabled,
+  ];
+
+  const trailingAccessoryStyles: StyleProp<ViewStyle> = [
+    styles.trailingAccessory,
+    isDisabled && styles.disabled,
+  ];
+
+  return {
+    isRTL,
+    animatedLabelTextStyles,
+    supportingTextStyles,
+    counterStyles,
+    prefixStyles,
+    suffixStyles,
+    leadingAccessoryStyles,
+    trailingAccessoryStyles,
+  };
+};
+
+export const getFilledTextInputData = (
+  api: TextInputSharedApi,
+  props: TextInputProps
+): FilledTextInputHookData => {
+  const { style: inputStyleOverride, ...textInputProps } = props;
+
+  const {
+    input,
+    theme,
+    hasSuffix,
+    isDisabled,
+    hasAccessory,
+    hasError,
+    animatedLabelWrapperStyle,
+    animatedActiveOutlineStyle,
+  } = api;
+
+  /**
+   * Theme tokens
+   */
+  const {
+    colors: { onSurface },
+  } = theme;
+
+  const outlineColor = getOutlineColor({
+    theme,
+    hasError,
+    isFocused: false,
+    isDisabled,
+  });
+
+  const activeOutlineColor = getOutlineColor({
+    theme,
+    hasError,
+    isFocused: true,
+    isDisabled,
+  });
+
+  const fieldBackgroundColor = getFieldBackgroundColor({ theme, isDisabled });
+
+  /**
+   * Shared styles
+   */
+
+  const shared = getSharedTextInputStyleData(api);
+
+  /**
+   * Variant-specific styles
+   */
+
+  const animatedLabelWrapperStyles: StyleProp<
+    AnimatedStyle<StyleProp<ViewStyle>>
+  > = [
+    filledStyles.labelWrapper,
+    {
+      left: hasAccessory
+        ? FILLED_LABEL_START_OFFSET_WITH_ACCESSORY
+        : LABEL_START_OFFSET_WITHOUT_ACCESSORY,
+    },
+    animatedLabelWrapperStyle,
+  ];
+
+  const containerStyles: StyleProp<ViewStyle> = [
+    filledStyles.container,
+    isDisabled && styles.disabled,
+  ];
+
+  const fieldStyles: StyleProp<ViewStyle> = [
+    styles.field,
+    {
+      paddingBottom: FILLED_PADDING_BOTTOM,
+      backgroundColor: fieldBackgroundColor,
+      borderTopStartRadius: TEXT_INPUT_BORDER_RADIUS,
+      borderTopEndRadius: TEXT_INPUT_BORDER_RADIUS,
+      overflow: 'hidden',
+    },
+  ];
+
+  /* Disabled tint (DISABLED_CONTAINER_OPACITY) is rendered as a childless overlay so its
+     alpha can be applied via the `opacity` style without leaking onto the label
+     and input. The View accepts `PlatformColor` directly. */
+  const disabledBackgroundStyles: StyleProp<ViewStyle> | undefined = isDisabled
+    ? [
+        filledStyles.disabledBackground,
+        {
+          backgroundColor: onSurface,
+        },
+      ]
+    : undefined;
+
+  const outlineStyles: StyleProp<ViewStyle> = [
+    filledStyles.outline,
+    {
+      height: INACTIVE_INDICATOR_SIZE,
+      backgroundColor: outlineColor,
+    },
+    isDisabled && styles.disabled,
+  ];
+
+  const animatedActiveOutlineStyles: StyleProp<
+    AnimatedStyle<StyleProp<ViewStyle>>
+  > = [
+    filledStyles.outline,
+    {
+      height: ACTIVE_INDICATOR_SIZE,
+      backgroundColor: activeOutlineColor,
+    },
+    isDisabled && styles.disabled,
+    animatedActiveOutlineStyle,
+  ];
+
+  const inputStyles: StyleProp<TextStyle> = [
+    styles.input,
+    {
+      flex: 1,
+      color: onSurface,
+      fontSize: INPUT_FONT_SIZE,
+      textAlign: hasSuffix === shared.isRTL ? 'left' : 'right',
+      writingDirection: shared.isRTL ? 'rtl' : 'ltr',
+    },
+    textInputProps.multiline && {
+      height: 'auto',
+      paddingTop: FILLED_MULTILINE_PADDING_TOP,
+    },
+    //@ts-expect-error - RN’s defs are narrower than CSS and RNW does not ship TS extensions that fix that
+    Platform.OS === 'web' && {
+      outlineStyle: 'none' as const,
+    },
+    isDisabled && styles.disabled,
+    inputStyleOverride,
+  ];
+
+  return {
+    input,
+    isDisabled,
+    hasError,
+    hasSuffix,
+    animatedLabelWrapperStyles,
+    containerStyles,
+    fieldStyles,
+    disabledBackgroundStyles,
+    outlineStyles,
+    animatedActiveOutlineStyles,
+    inputStyles,
+    ...shared,
+  };
+};
+
+export const getOutlinedTextInputData = (
+  api: TextInputSharedApi,
+  props: TextInputProps
+): OutlinedTextInputHookData => {
+  const { style: inputStyleOverride, ...textInputProps } = props;
+
+  const {
+    input,
+    theme,
+    isFocused,
+    isDisabled,
+    hasAccessory,
+    hasError,
+    hasSuffix,
+    animatedLabelWrapperStyle,
+  } = api;
+
+  /**
+   * Theme tokens
+   */
+
+  const {
+    colors: { background: labelBackgroundColor, onSurface },
+  } = theme;
+
+  const outlineColor = getOutlineColor({
+    theme,
+    isDisabled,
+    isFocused,
+    hasError,
+  });
+
+  /**
+   * Shared styles
+   */
+
+  const shared = getSharedTextInputStyleData(api);
+
+  /**
+   * Variant-specific styles
+   */
+
+  const containerStyles: StyleProp<ViewStyle> = [
+    outlinedStyles.container,
+    isDisabled && styles.disabled,
+  ];
+
+  const fieldStyles: StyleProp<ViewStyle> = [
+    styles.field,
+    {
+      borderRadius: TEXT_INPUT_BORDER_RADIUS,
+    },
+    textInputProps.multiline && { alignItems: 'flex-start' },
+  ];
+
+  /* The outline is a childless absolutely-positioned View, so applying
+     `opacity` here is safe and lets us pass `outlineColor` through unchanged
+     (including PlatformColor values on Android). */
+  const outlineStyles: StyleProp<ViewStyle> = [
+    outlinedStyles.outline,
+    {
+      borderWidth: isFocused ? 2 : 1,
+      borderColor: outlineColor,
+    },
+    isDisabled && { opacity: OUTLINED_DISABLED_OUTLINE_OPACITY },
+  ];
+
+  const animatedLabelWrapperStyles: StyleProp<
+    AnimatedStyle<StyleProp<ViewStyle>>
+  > = [
+    outlinedStyles.labelWrapper,
+    {
+      left: hasAccessory
+        ? OUTLINED_LABEL_START_OFFSET_WITH_ACCESSORY
+        : LABEL_START_OFFSET_WITHOUT_ACCESSORY,
+      backgroundColor: labelBackgroundColor,
+    },
+    animatedLabelWrapperStyle,
+  ];
+
+  const inputStyles: StyleProp<TextStyle> = [
+    styles.input,
+    {
+      flex: 1,
+      color: onSurface,
+      fontSize: INPUT_FONT_SIZE,
+      textAlign: hasSuffix === shared.isRTL ? 'left' : 'right',
+      writingDirection: shared.isRTL ? 'rtl' : 'ltr',
+    },
+    textInputProps.multiline && {
+      height: 'auto',
+      textAlignVertical: 'top',
+      paddingTop: OUTLINED_MULTILINE_PADDING_TOP,
+    },
+    //@ts-expect-error - RN’s defs are narrower than CSS and RNW does not ship TS extensions that fix that
+    Platform.OS === 'web' && {
+      outlineStyle: 'none' as const,
+    },
+    isDisabled && styles.disabled,
+    inputStyleOverride,
+  ];
+
+  return {
+    input,
+    isDisabled,
+    hasError,
+    hasSuffix,
+    animatedLabelWrapperStyles,
+    containerStyles,
+    fieldStyles,
+    disabledBackgroundStyles: undefined,
+    outlineStyles,
+    inputStyles,
+    ...shared,
+  };
+};
+
+export const getAccessibilityData = ({
+  data,
+  hasError,
+  hasCounter,
+  isDisabled,
+  inputLength,
+}: GetAccessibilityDataProps): GetAccessibilityDataReturn => {
+  const { label, supportingText, ...props } = data;
+
+  const maxLength = props.maxLength;
+  const shouldEvaluateCounter = !!maxLength && hasCounter;
+  const isEmptyString = inputLength === 0;
+  const isCounterExceeded = shouldEvaluateCounter && inputLength > maxLength;
+  const isCounterReached = shouldEvaluateCounter && inputLength === maxLength;
+  const isInvalid = hasError || isCounterExceeded;
+  const isSupportingTextHidden = !!(supportingText && !hasError);
+
+  const chunks: string[] = [];
+
+  if (label) {
+    chunks.push(label);
+  }
+
+  if (isSupportingTextHidden) {
+    chunks.push(supportingText);
+  }
+
+  if (isEmptyString && props.placeholder && !hasError) {
+    chunks.push(props.placeholder);
+  }
+
+  const ariaLabel = chunks.length > 0 ? chunks.join(', ') : label;
+
+  let hint: string | undefined;
+
+  if (isCounterExceeded && !(hasError && supportingText)) {
+    hint = `Character limit exceeded ${inputLength} of ${maxLength}`;
+  }
+
+  const counterAccessibilityLabel = shouldEvaluateCounter
+    ? isCounterExceeded
+      ? `Character limit exceeded ${inputLength} of ${maxLength}`
+      : `Characters entered ${inputLength} of ${maxLength}`
+    : undefined;
+
+  return {
+    input: {
+      'aria-label': ariaLabel,
+      'aria-valuemax': isCounterReached ? maxLength : undefined,
+      'aria-valuenow': isCounterReached ? inputLength : undefined,
+      'aria-disabled': isDisabled,
+      'aria-invalid': isInvalid,
+      accessibilityHint: hint,
+    },
+    supportingText: {
+      'aria-hidden': isSupportingTextHidden,
+      'aria-live': hasError && supportingText ? 'polite' : undefined,
+    },
+    counter: {
+      'aria-label': counterAccessibilityLabel,
+      'aria-live': 'polite',
+    },
+  };
+};
diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx
deleted file mode 100644
index bfdd3fca5c..0000000000
--- a/src/components/ToggleButton/ToggleButton.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-import * as React from 'react';
-import {
-  GestureResponderEvent,
-  StyleProp,
-  StyleSheet,
-  ViewStyle,
-  View,
-  Animated,
-  ColorValue,
-} from 'react-native';
-
-import color from 'color';
-
-import { ToggleButtonGroupContext } from './ToggleButtonGroup';
-import { getToggleButtonColor } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import { black, white } from '../../styles/themes/v2/colors';
-import type { ThemeProp } from '../../types';
-import { forwardRef } from '../../utils/forwardRef';
-import type { IconSource } from '../Icon';
-import IconButton from '../IconButton/IconButton';
-
-export type Props = {
-  /**
-   * Icon to display for the `ToggleButton`.
-   */
-  icon: IconSource;
-  /**
-   * Size of the icon.
-   */
-  size?: number;
-  /**
-   * Custom text color for button.
-   */
-  iconColor?: string;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
-  /**
-   * Whether the button is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Accessibility label for the `ToggleButton`. This is read by the screen reader when the user taps the button.
-   */
-  accessibilityLabel?: string;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (value?: GestureResponderEvent | string) => void;
-  /**
-   * Value of button.
-   */
-  value?: string;
-  /**
-   * Status of button.
-   */
-  status?: 'checked' | 'unchecked';
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  ref?: React.RefObject<View>;
-  /**
-   * testID to be used on tests.
-   */
-  testID?: string;
-};
-
-/**
- * Toggle buttons can be used to group related options. To emphasize groups of related toggle buttons,
- * a group should share a common container.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { ToggleButton } from 'react-native-paper';
- *
- * const ToggleButtonExample = () => {
- *   const [status, setStatus] = React.useState('checked');
- *
- *   const onButtonToggle = value => {
- *     setStatus(status === 'checked' ? 'unchecked' : 'checked');
- *   };
- *
- *   return (
- *     <ToggleButton
- *       icon="bluetooth"
- *       value="bluetooth"
- *       status={status}
- *       onPress={onButtonToggle}
- *     />
- *   );
- * };
- *
- * export default ToggleButtonExample;
- *
- * ```
- */
-const ToggleButton = forwardRef<View, Props>(
-  (
-    {
-      icon,
-      size,
-      theme: themeOverrides,
-      accessibilityLabel,
-      disabled,
-      style,
-      value,
-      status,
-      onPress,
-      rippleColor,
-      ...rest
-    }: Props,
-    ref
-  ) => {
-    const theme = useInternalTheme(themeOverrides);
-    const borderRadius = theme.roundness;
-
-    return (
-      <ToggleButtonGroupContext.Consumer>
-        {(
-          context: { value: string | null; onValueChange: Function } | null
-        ) => {
-          const checked: boolean | null =
-            (context && context.value === value) || status === 'checked';
-
-          const backgroundColor = getToggleButtonColor({ theme, checked });
-          const borderColor = theme.isV3
-            ? theme.colors.outline
-            : color(theme.dark ? white : black)
-                .alpha(0.29)
-                .rgb()
-                .string();
-
-          return (
-            <IconButton
-              borderless={false}
-              icon={icon}
-              onPress={(e?: GestureResponderEvent | string) => {
-                if (onPress) {
-                  onPress(e);
-                }
-
-                if (context) {
-                  context.onValueChange(!checked ? value : null);
-                }
-              }}
-              size={size}
-              accessibilityLabel={accessibilityLabel}
-              accessibilityState={{ disabled, selected: checked }}
-              disabled={disabled}
-              style={[
-                styles.content,
-                {
-                  backgroundColor,
-                  borderRadius,
-                  borderColor,
-                },
-                style,
-              ]}
-              ref={ref}
-              theme={theme}
-              rippleColor={rippleColor}
-              {...rest}
-            />
-          );
-        }}
-      </ToggleButtonGroupContext.Consumer>
-    );
-  }
-);
-
-const styles = StyleSheet.create({
-  content: {
-    width: 42,
-    height: 42,
-    margin: 0,
-  },
-});
-
-export default ToggleButton;
-
-// @component-docs ignore-next-line
-export { ToggleButton };
diff --git a/src/components/ToggleButton/ToggleButtonGroup.tsx b/src/components/ToggleButton/ToggleButtonGroup.tsx
deleted file mode 100644
index baaf1ee1a9..0000000000
--- a/src/components/ToggleButton/ToggleButtonGroup.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as React from 'react';
-
-export type Props<Value = string> = {
-  /**
-   * Function to execute on selection change.
-   */
-  onValueChange: (value: Value) => void;
-  /**
-   * Value of the currently selected toggle button.
-   */
-  value: Value | null;
-  /**
-   * React elements containing toggle buttons.
-   */
-  children: React.ReactNode;
-};
-
-type ToggleButtonContextType<Value> = {
-  value: Value | null;
-  onValueChange: (item: Value) => void;
-};
-
-export const ToggleButtonGroupContext =
-  //@ts-expect-error: TS can't ensure the type from Group to children
-  React.createContext<ToggleButtonContextType>(null as any);
-
-/**
- * Toggle group allows to control a group of toggle buttons.</br>
- * It doesn't change the appearance of the toggle buttons. If you want to group them in a row, check out [ToggleButton.Row](ToggleButtonRow).
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { ToggleButton } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [value, setValue] = React.useState('left');
- *
- *   return (
- *     <ToggleButton.Group
- *       onValueChange={value => setValue(value)}
- *       value={value}
- *     >
- *       <ToggleButton icon="format-align-left" value="left" />
- *       <ToggleButton icon="format-align-right" value="right" />
- *     </ToggleButton.Group>
- *   );
- * };
- *
- * export default MyComponent;
- *```
- */
-const ToggleButtonGroup = <Value = string,>({
-  value,
-  onValueChange,
-  children,
-}: Props<Value>) => (
-  <ToggleButtonGroupContext.Provider
-    value={{
-      value,
-      onValueChange,
-    }}
-  >
-    {children}
-  </ToggleButtonGroupContext.Provider>
-);
-
-ToggleButtonGroup.displayName = 'ToggleButton.Group';
-
-export default ToggleButtonGroup;
-
-// @component-docs ignore-next-line
-export { ToggleButtonGroup };
diff --git a/src/components/ToggleButton/ToggleButtonRow.tsx b/src/components/ToggleButton/ToggleButtonRow.tsx
deleted file mode 100644
index 380ae77203..0000000000
--- a/src/components/ToggleButton/ToggleButtonRow.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
-
-import ToggleButton from './ToggleButton';
-import ToggleButtonGroup from './ToggleButtonGroup';
-
-export type Props = {
-  /**
-   * Function to execute on selection change.
-   */
-  onValueChange: (value: string) => void;
-  /**
-   * Value of the currently selected toggle button.
-   */
-  value: string;
-  /**
-   * React elements containing toggle buttons.
-   */
-  children: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-};
-
-/**
- * Toggle button row renders a group of toggle buttons in a row.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { ToggleButton } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [value, setValue] = React.useState('left');
- *
- *   return (
- *     <ToggleButton.Row onValueChange={value => setValue(value)} value={value}>
- *       <ToggleButton icon="format-align-left" value="left" />
- *       <ToggleButton icon="format-align-right" value="right" />
- *     </ToggleButton.Row>
- *   );
- * };
- *
- * export default MyComponent;
- *
- *```
- */
-const ToggleButtonRow = ({ value, onValueChange, children, style }: Props) => {
-  const count = React.Children.count(children);
-
-  return (
-    <ToggleButtonGroup value={value} onValueChange={onValueChange}>
-      <View style={[styles.row, style]}>
-        {React.Children.map(children, (child, i) => {
-          // @ts-expect-error: TypeScript complains about child.type but it doesn't matter
-          if (child && child.type === ToggleButton) {
-            // @ts-expect-error: We're sure that child is a React Element
-            return React.cloneElement(child, {
-              style: [
-                styles.button,
-                i === 0
-                  ? styles.first
-                  : i === count - 1
-                  ? styles.last
-                  : styles.middle,
-                // @ts-expect-error: We're sure that child is a React Element
-                child.props.style,
-              ],
-            });
-          }
-
-          return child;
-        })}
-      </View>
-    </ToggleButtonGroup>
-  );
-};
-
-ToggleButtonRow.displayName = 'ToggleButton.Row';
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-  },
-  button: {
-    borderWidth: StyleSheet.hairlineWidth,
-  },
-
-  first: {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0,
-  },
-
-  middle: {
-    borderRadius: 0,
-    borderLeftWidth: 0,
-  },
-
-  last: {
-    borderLeftWidth: 0,
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0,
-  },
-});
-
-export default ToggleButtonRow;
-
-// @component-docs ignore-next-line
-export { ToggleButtonRow };
diff --git a/src/components/ToggleButton/index.ts b/src/components/ToggleButton/index.ts
deleted file mode 100644
index 222d93fb52..0000000000
--- a/src/components/ToggleButton/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import ToggleButtonComponent from './ToggleButton';
-import ToggleButtonGroup from './ToggleButtonGroup';
-import ToggleButtonRow from './ToggleButtonRow';
-
-const ToggleButton = Object.assign(
-  // @component ./ToggleButton.tsx
-  ToggleButtonComponent,
-  {
-    // @component ./ToggleButtonGroup.tsx
-    Group: ToggleButtonGroup,
-    // @component ./ToggleButtonRow.tsx
-    Row: ToggleButtonRow,
-  }
-);
-
-export default ToggleButton;
diff --git a/src/components/ToggleButton/utils.ts b/src/components/ToggleButton/utils.ts
deleted file mode 100644
index 79c22665ad..0000000000
--- a/src/components/ToggleButton/utils.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import color from 'color';
-
-import { tokens } from '../../styles/themes/v3/tokens';
-import type { InternalTheme } from '../../types';
-
-export const getToggleButtonColor = ({
-  theme,
-  checked,
-}: {
-  theme: InternalTheme;
-  checked: boolean | null;
-}) => {
-  if (checked) {
-    if (theme.isV3) {
-      return color(theme.colors.onSecondaryContainer)
-        .alpha(tokens.md.ref.opacity.level2)
-        .rgb()
-        .string();
-    }
-    if (theme.dark) {
-      return 'rgba(255, 255, 255, .12)';
-    }
-    return 'rgba(0, 0, 0, .08)';
-  }
-  return 'transparent';
-};
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index f5a483db5a..d0dc180115 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -2,17 +2,16 @@ import * as React from 'react';
 import {
   Dimensions,
   View,
-  LayoutChangeEvent,
   StyleSheet,
   Platform,
   Pressable,
-  ViewStyle,
 } from 'react-native';
+import type { LayoutChangeEvent, ViewStyle } from 'react-native';
 
-import type { ThemeProp } from 'src/types';
-
-import { getTooltipPosition, Measurement, TooltipChildProps } from './utils';
+import { getTooltipPosition } from './utils';
+import type { Measurement, TooltipChildProps } from './utils';
 import { useInternalTheme } from '../../core/theming';
+import type { ThemeProp } from '../../theme/types';
 import { addEventListener } from '../../utils/addEventListener';
 import Portal from '../Portal/Portal';
 import Text from '../Typography/Text';
@@ -72,8 +71,6 @@ const Tooltip = ({
   titleMaxFontSizeMultiplier,
   ...rest
 }: Props) => {
-  const isWeb = Platform.OS === 'web';
-
   const theme = useInternalTheme(themeOverrides);
   const [visible, setVisible] = React.useState(false);
 
@@ -82,8 +79,8 @@ const Tooltip = ({
     tooltip: {},
     measured: false,
   });
-  const showTooltipTimer = React.useRef<NodeJS.Timeout[]>([]);
-  const hideTooltipTimer = React.useRef<NodeJS.Timeout[]>([]);
+  const showTooltipTimer = React.useRef<ReturnType<typeof setTimeout>[]>([]);
+  const hideTooltipTimer = React.useRef<ReturnType<typeof setTimeout>[]>([]);
 
   const childrenWrapperRef = React.useRef<View>(null);
   const touched = React.useRef(false);
@@ -121,17 +118,17 @@ const Tooltip = ({
       hideTooltipTimer.current = [];
     }
 
-    if (isWeb) {
-      let id = setTimeout(() => {
+    if (Platform.OS === 'web') {
+      const id = setTimeout(() => {
         touched.current = true;
         setVisible(true);
-      }, enterTouchDelay) as unknown as NodeJS.Timeout;
+      }, enterTouchDelay);
       showTooltipTimer.current.push(id);
     } else {
       touched.current = true;
       setVisible(true);
     }
-  }, [isWeb, enterTouchDelay]);
+  }, [enterTouchDelay]);
 
   const handleTouchEnd = React.useCallback(() => {
     touched.current = false;
@@ -140,10 +137,10 @@ const Tooltip = ({
       showTooltipTimer.current = [];
     }
 
-    let id = setTimeout(() => {
+    const id = setTimeout(() => {
       setVisible(false);
       setMeasurement({ children: {}, tooltip: {}, measured: false });
-    }, leaveTouchDelay) as unknown as NodeJS.Timeout;
+    }, leaveTouchDelay);
     hideTooltipTimer.current.push(id);
   }, [leaveTouchDelay]);
 
@@ -152,7 +149,9 @@ const Tooltip = ({
       return null;
     }
     if (!isValidChild) return null;
-    const props = children.props as TooltipChildProps;
+    const props =
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+      children.props as TooltipChildProps;
     if (props.disabled) return null;
     return props.onPress?.();
   }, [children.props, isValidChild]);
@@ -160,6 +159,7 @@ const Tooltip = ({
   const handleHoverIn = React.useCallback(() => {
     handleTouchStart();
     if (isValidChild) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
       (children.props as TooltipChildProps).onHoverIn?.();
     }
   }, [children.props, handleTouchStart, isValidChild]);
@@ -167,6 +167,7 @@ const Tooltip = ({
   const handleHoverOut = React.useCallback(() => {
     handleTouchEnd();
     if (isValidChild) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
       (children.props as TooltipChildProps).onHoverOut?.();
     }
   }, [children.props, handleTouchEnd, isValidChild]);
@@ -204,21 +205,20 @@ const Tooltip = ({
             style={[
               styles.tooltip,
               {
-                backgroundColor: theme.isV3
-                  ? theme.colors.onSurface
-                  : theme.colors.tooltip,
+                backgroundColor: theme.colors.onSurface,
                 ...getTooltipPosition(
+                  // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
                   measurement as Measurement,
+                  // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
                   children as React.ReactElement<TooltipChildProps>
                 ),
-                borderRadius: theme.roundness,
+                borderRadius: theme.shapes.corner.extraSmall,
                 ...(measurement.measured ? styles.visible : styles.hidden),
               },
             ]}
-            testID="tooltip-container"
           >
             <Text
-              accessibilityLiveRegion="polite"
+              aria-live="polite"
               numberOfLines={1}
               selectable={false}
               variant="labelLarge"
@@ -233,11 +233,11 @@ const Tooltip = ({
       <Pressable
         ref={childrenWrapperRef}
         style={styles.pressContainer}
-        {...(isWeb ? webPressProps : mobilePressProps)}
+        {...(Platform.OS === 'web' ? webPressProps : mobilePressProps)}
       >
         {React.cloneElement(children, {
           ...rest,
-          ...(isWeb ? webPressProps : mobilePressProps),
+          ...(Platform.OS === 'web' ? webPressProps : mobilePressProps),
         })}
       </Pressable>
     </>
@@ -260,6 +260,7 @@ const styles = StyleSheet.create({
   hidden: {
     opacity: 0,
   },
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
   pressContainer: {
     ...(Platform.OS === 'web' && { cursor: 'default' }),
   } as ViewStyle,
diff --git a/src/components/Tooltip/utils.ts b/src/components/Tooltip/utils.ts
index 29dd14ba3e..43baf684fd 100644
--- a/src/components/Tooltip/utils.ts
+++ b/src/components/Tooltip/utils.ts
@@ -1,10 +1,5 @@
-import {
-  Dimensions,
-  LayoutRectangle,
-  StyleProp,
-  ViewStyle,
-  StyleSheet,
-} from 'react-native';
+import { Dimensions, StyleSheet } from 'react-native';
+import type { LayoutRectangle, StyleProp, ViewStyle } from 'react-native';
 
 type ChildrenMeasurement = {
   width: number;
diff --git a/src/components/TouchableRipple/Pressable.tsx b/src/components/TouchableRipple/Pressable.tsx
index 446cb234a7..1798a634ba 100644
--- a/src/components/TouchableRipple/Pressable.tsx
+++ b/src/components/TouchableRipple/Pressable.tsx
@@ -1,6 +1,5 @@
 import type * as React from 'react';
 import type {
-  Animated,
   PressableProps as PressableNativeProps,
   StyleProp,
   View,
@@ -27,15 +26,11 @@ export type PressableProps = Omit<
     | undefined;
   style?:
     | StyleProp<ViewStyle>
-    | Animated.WithAnimatedValue<StyleProp<ViewStyle>>
-    | ((
-        state: PressableStateCallbackType
-      ) =>
-        | StyleProp<ViewStyle>
-        | Animated.WithAnimatedValue<StyleProp<ViewStyle>>)
+    | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>)
     | undefined;
 };
 
+// @ts-expect-error React Native Web adds focused and hovered callback state fields that React Native omits.
 export const Pressable: React.ForwardRefExoticComponent<
   PressableProps & React.RefAttributes<View>
-> = PressableNative as any;
+> = PressableNative;
diff --git a/src/components/TouchableRipple/TouchableRipple.native.tsx b/src/components/TouchableRipple/TouchableRipple.native.tsx
index 1cb17b4068..ec7b13dd91 100644
--- a/src/components/TouchableRipple/TouchableRipple.native.tsx
+++ b/src/components/TouchableRipple/TouchableRipple.native.tsx
@@ -1,22 +1,20 @@
 import * as React from 'react';
-import {
+import { Platform, StyleSheet, View } from 'react-native';
+import type {
   PressableAndroidRippleConfig,
   StyleProp,
-  Platform,
   ViewStyle,
-  StyleSheet,
   GestureResponderEvent,
-  View,
   ColorValue,
 } from 'react-native';
 
 import type { PressableProps } from './Pressable';
 import { Pressable } from './Pressable';
 import { getTouchableRippleColors } from './utils';
-import { Settings, SettingsContext } from '../../core/settings';
+import { SettingsContext } from '../../core/settings';
+import type { Settings } from '../../core/settings';
 import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
-import { forwardRef } from '../../utils/forwardRef';
+import type { ThemeProp } from '../../theme/types';
 import hasTouchHandler from '../../utils/hasTouchHandler';
 
 const ANDROID_VERSION_LOLLIPOP = 21;
@@ -35,23 +33,22 @@ export type Props = PressableProps & {
   underlayColor?: string;
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
+  ref?: React.Ref<View>;
   theme?: ThemeProp;
 };
 
-const TouchableRipple = (
-  {
-    style,
-    background,
-    borderless = false,
-    disabled: disabledProp,
-    rippleColor,
-    underlayColor,
-    children,
-    theme: themeOverrides,
-    ...rest
-  }: Props,
-  ref: React.ForwardedRef<View>
-) => {
+const TouchableRipple = ({
+  style,
+  background,
+  borderless = false,
+  disabled: disabledProp,
+  rippleColor,
+  underlayColor,
+  children,
+  theme: themeOverrides,
+  ref,
+  ...rest
+}: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const { rippleEffectEnabled } = React.useContext<Settings>(SettingsContext);
 
@@ -73,20 +70,21 @@ const TouchableRipple = (
       underlayColor,
     });
 
-  // A workaround for ripple on Android P is to use useForeground + overflow: 'hidden'
+  // Use foreground ripple on Android P+ to ensure visibility.
+  // Background ripple requires the view to have a background drawable,
+  // which isn't always present. Foreground ripple needs overflow: 'hidden'
+  // to stay within bounds.
   // https://github.com/facebook/react-native/issues/6480
   const useForeground =
-    Platform.OS === 'android' &&
-    Platform.Version >= ANDROID_VERSION_PIE &&
-    borderless;
+    Platform.OS === 'android' && Platform.Version >= ANDROID_VERSION_PIE;
 
   if (TouchableRipple.supported) {
     const androidRipple = rippleEffectEnabled
-      ? background ?? {
+      ? (background ?? {
           color: calculatedRippleColor,
           borderless,
           foreground: useForeground,
-        }
+        })
       : undefined;
 
     return (
@@ -94,7 +92,7 @@ const TouchableRipple = (
         {...rest}
         ref={ref}
         disabled={disabled}
-        style={[borderless && styles.overflowHidden, style]}
+        style={[useForeground && styles.overflowHidden, style]}
         android_ripple={androidRipple}
       >
         {React.Children.only(children)}
@@ -113,7 +111,6 @@ const TouchableRipple = (
         <>
           {pressed && rippleEffectEnabled && (
             <View
-              testID="touchable-ripple-underlay"
               style={[
                 styles.underlay,
                 { backgroundColor: calculatedUnderlayColor },
@@ -135,11 +132,9 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
   },
   underlay: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     zIndex: 2,
   },
 });
 
-const Component = forwardRef(TouchableRipple);
-
-export default Component as typeof Component & { supported: boolean };
+export default TouchableRipple;
diff --git a/src/components/TouchableRipple/TouchableRipple.tsx b/src/components/TouchableRipple/TouchableRipple.tsx
index ecf848da32..3b98d252c7 100644
--- a/src/components/TouchableRipple/TouchableRipple.tsx
+++ b/src/components/TouchableRipple/TouchableRipple.tsx
@@ -1,11 +1,9 @@
 import * as React from 'react';
-import {
+import { Platform, StyleSheet, View } from 'react-native';
+import type {
   ColorValue,
   GestureResponderEvent,
-  Platform,
   StyleProp,
-  StyleSheet,
-  View,
   ViewStyle,
 } from 'react-native';
 
@@ -14,10 +12,10 @@ import color from 'color';
 import type { PressableProps, PressableStateCallbackType } from './Pressable';
 import { Pressable } from './Pressable';
 import { getTouchableRippleColors } from './utils';
-import { Settings, SettingsContext } from '../../core/settings';
+import { SettingsContext } from '../../core/settings';
+import type { Settings } from '../../core/settings';
 import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
-import { forwardRef } from '../../utils/forwardRef';
+import type { ThemeProp } from '../../theme/types';
 import hasTouchHandler from '../../utils/hasTouchHandler';
 
 export type Props = PressableProps & {
@@ -26,7 +24,7 @@ export type Props = PressableProps & {
    */
   borderless?: boolean;
   /**
-   * Type of background drawabale to display the feedback (Android).
+   * Type of background drawable to display the feedback (Android).
    * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: Object;
@@ -72,6 +70,7 @@ export type Props = PressableProps & {
     | StyleProp<ViewStyle>
     | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>)
     | undefined;
+  ref?: React.Ref<View>;
   /**
    * @optional
    */
@@ -103,26 +102,29 @@ export type Props = PressableProps & {
  *
  * @extends Pressable props https://reactnative.dev/docs/Pressable#props
  */
-const TouchableRipple = (
-  {
-    style,
-    background: _background,
-    borderless = false,
-    disabled: disabledProp,
-    rippleColor,
-    underlayColor: _underlayColor,
-    children,
-    theme: themeOverrides,
-    ...rest
-  }: Props,
-  ref: React.ForwardedRef<View>
-) => {
+const TouchableRipple = ({
+  style,
+  background: _background,
+  borderless = false,
+  disabled: disabledProp,
+  rippleColor,
+  underlayColor: _underlayColor,
+  children,
+  theme: themeOverrides,
+  ref,
+  ...rest
+}: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const { calculatedRippleColor } = getTouchableRippleColors({
     theme,
     rippleColor,
   });
-  const hoverColor = color(calculatedRippleColor).fade(0.5).rgb().string();
+  // Web-only style. PlatformColor doesn't exist on web, so the calculated
+  // ripple color is effectively always a string here.
+  const hoverColor =
+    typeof calculatedRippleColor === 'string'
+      ? color(calculatedRippleColor).fade(0.5).rgb().string()
+      : calculatedRippleColor;
   const { rippleEffectEnabled } = React.useContext<Settings>(SettingsContext);
 
   const { onPress, onLongPress, onPressIn, onPressOut } = rest;
@@ -230,14 +232,16 @@ const TouchableRipple = (
       onPressOut?.(e);
 
       if (rippleEffectEnabled) {
-        const containers = e.currentTarget.querySelectorAll(
-          '[data-paper-ripple]'
-        ) as HTMLElement[];
+        const containers: NodeListOf<HTMLElement> =
+          e.currentTarget.querySelectorAll('[data-paper-ripple]');
 
         requestAnimationFrame(() => {
           requestAnimationFrame(() => {
             containers.forEach((container) => {
-              const ripple = container.firstChild as HTMLSpanElement;
+              const ripple = container.firstElementChild;
+              if (!(ripple instanceof HTMLSpanElement)) {
+                return;
+              }
 
               Object.assign(ripple.style, {
                 transitionDuration: '250ms',
@@ -318,6 +322,4 @@ const styles = StyleSheet.create({
   },
 });
 
-const Component = forwardRef(TouchableRipple);
-
-export default Component as typeof Component & { supported: boolean };
+export default TouchableRipple;
diff --git a/src/components/TouchableRipple/utils.ts b/src/components/TouchableRipple/utils.ts
index 29c2b18e25..2874eafc86 100644
--- a/src/components/TouchableRipple/utils.ts
+++ b/src/components/TouchableRipple/utils.ts
@@ -1,15 +1,11 @@
 import type { ColorValue } from 'react-native';
 
-import color from 'color';
-
-import type { InternalTheme } from '../../types';
+import type { InternalTheme } from '../../theme/types';
 
 const getUnderlayColor = ({
-  theme,
   calculatedRippleColor,
   underlayColor,
 }: {
-  theme: InternalTheme;
   calculatedRippleColor: ColorValue;
   underlayColor?: string;
 }) => {
@@ -17,11 +13,7 @@ const getUnderlayColor = ({
     return underlayColor;
   }
 
-  if (theme.isV3) {
-    return color(calculatedRippleColor).rgb().string();
-  }
-
-  return color(calculatedRippleColor).fade(0.5).rgb().string();
+  return calculatedRippleColor;
 };
 
 const getRippleColor = ({
@@ -35,14 +27,7 @@ const getRippleColor = ({
     return rippleColor;
   }
 
-  if (theme.isV3) {
-    return color(theme.colors.onSurface).alpha(0.12).rgb().string();
-  }
-
-  if (theme.dark) {
-    return color(theme.colors.text).alpha(0.32).rgb().string();
-  }
-  return color(theme.colors.text).alpha(0.2).rgb().string();
+  return theme.colors.stateLayerPressed;
 };
 
 export const getTouchableRippleColors = ({
@@ -58,7 +43,6 @@ export const getTouchableRippleColors = ({
   return {
     calculatedRippleColor,
     calculatedUnderlayColor: getUnderlayColor({
-      theme,
       calculatedRippleColor,
       underlayColor,
     }),
diff --git a/src/components/Typography/AnimatedText.tsx b/src/components/Typography/AnimatedText.tsx
index 6504ad4b92..35bb781317 100644
--- a/src/components/Typography/AnimatedText.tsx
+++ b/src/components/Typography/AnimatedText.tsx
@@ -1,20 +1,17 @@
 import * as React from 'react';
-import { ReactNode } from 'react';
-import {
-  Animated,
-  I18nManager,
-  StyleProp,
-  StyleSheet,
-  TextStyle,
-  Text,
-} from 'react-native';
+import type { ReactNode } from 'react';
+import { StyleSheet } from 'react-native';
+
+import Animated from 'react-native-reanimated';
 
 import type { VariantProp } from './types';
+import { useLocale } from '../../core/locale';
 import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
-import { forwardRef } from '../../utils/forwardRef';
+import type { ThemeProp } from '../../theme/types';
+
+type AnimatedTextProps = React.ComponentProps<typeof Animated.Text>;
 
-type Props<T> = React.ComponentPropsWithRef<typeof Animated.Text> & {
+type Props<T> = AnimatedTextProps & {
   /**
    * Variant defines appropriate text styles for type role and its size.
    * Available variants:
@@ -30,7 +27,6 @@ type Props<T> = React.ComponentPropsWithRef<typeof Animated.Text> & {
    *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
    */
   variant?: VariantProp<T>;
-  style?: StyleProp<TextStyle>;
   /**
    * @optional
    */
@@ -42,59 +38,61 @@ type Props<T> = React.ComponentPropsWithRef<typeof Animated.Text> & {
  *
  * @extends Text props https://reactnative.dev/docs/text#props
  */
-const AnimatedText = forwardRef<Text & HTMLElement, Props<never>>(
-  function AnimatedText(
-    { style, theme: themeOverrides, variant, ...rest },
-    ref
-  ) {
-    const theme = useInternalTheme(themeOverrides);
-    const writingDirection = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr';
+function AnimatedText({
+  style,
+  theme: themeOverrides,
+  variant,
+  ref,
+  ...rest
+}: Props<never>) {
+  const theme = useInternalTheme(themeOverrides);
 
-    if (theme.isV3 && variant) {
-      const font = theme.fonts[variant];
-      if (typeof font !== 'object') {
-        throw new Error(
-          `Variant ${variant} was not provided properly. Valid variants are ${Object.keys(
-            theme.fonts
-          ).join(', ')}.`
-        );
-      }
+  const { direction: writingDirection } = useLocale();
 
-      return (
-        <Animated.Text
-          ref={ref}
-          {...rest}
-          style={[
-            font,
-            styles.text,
-            { writingDirection, color: theme.colors.onSurface },
-            style,
-          ]}
-        />
-      );
-    } else {
-      const font = !theme.isV3 ? theme.fonts.regular : theme.fonts.bodyMedium;
-      const textStyle = {
-        ...font,
-        color: theme.isV3 ? theme.colors.onSurface : theme.colors.text,
-      };
-      return (
-        <Animated.Text
-          ref={ref}
-          {...rest}
-          style={[
-            styles.text,
-            textStyle,
-            {
-              writingDirection,
-            },
-            style,
-          ]}
-        />
+  if (variant) {
+    const font = theme.fonts[variant];
+    if (typeof font !== 'object') {
+      throw new Error(
+        `Variant ${variant} was not provided properly. Valid variants are ${Object.keys(
+          theme.fonts
+        ).join(', ')}.`
       );
     }
+
+    return (
+      <Animated.Text
+        ref={ref}
+        {...rest}
+        style={[
+          font,
+          styles.text,
+          { writingDirection, color: theme.colors.onSurface },
+          style,
+        ]}
+      />
+    );
+  } else {
+    const font = theme.fonts.bodyMedium;
+    const textStyle = {
+      ...font,
+      color: theme.colors.onSurface,
+    };
+    return (
+      <Animated.Text
+        ref={ref}
+        {...rest}
+        style={[
+          styles.text,
+          textStyle,
+          {
+            writingDirection,
+          },
+          style,
+        ]}
+      />
+    );
   }
-);
+}
 
 const styles = StyleSheet.create({
   text: {
@@ -103,6 +101,7 @@ const styles = StyleSheet.create({
 });
 
 export const customAnimatedText = <T,>() =>
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
   AnimatedText as (props: Props<T>) => ReactNode;
 
 export default AnimatedText;
diff --git a/src/components/Typography/Text.tsx b/src/components/Typography/Text.tsx
index 17c29b69c0..ced8a2e03b 100644
--- a/src/components/Typography/Text.tsx
+++ b/src/components/Typography/Text.tsx
@@ -1,19 +1,13 @@
 import * as React from 'react';
-import { ReactNode } from 'react';
-import {
-  I18nManager,
-  StyleProp,
-  StyleSheet,
-  Text as NativeText,
-  TextStyle,
-} from 'react-native';
+import type { ReactNode } from 'react';
+import { StyleSheet, Text as NativeText } from 'react-native';
+import type { StyleProp, TextStyle } from 'react-native';
 
 import AnimatedText from './AnimatedText';
 import type { VariantProp } from './types';
-import StyledText from './v2/StyledText';
+import { useLocale } from '../../core/locale';
 import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
-import { forwardRef } from '../../utils/forwardRef';
+import type { ThemeProp } from '../../theme/types';
 
 export type Props<T> = React.ComponentProps<typeof NativeText> & {
   /**
@@ -31,16 +25,20 @@ export type Props<T> = React.ComponentProps<typeof NativeText> & {
    *  Label:  `labelLarge`, `labelMedium`, `labelSmall`
    *
    *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
+   *
+   *  Each variant also has an `Emphasized` counterpart with a heavier font weight.
+   *  e.g. `displayLargeEmphasized`, `bodyMediumEmphasized` etc.
    */
   variant?: VariantProp<T>;
   children: React.ReactNode;
   theme?: ThemeProp;
   style?: StyleProp<TextStyle>;
+  ref?: React.Ref<TextRef>;
 };
 
-export type TextRef = React.ForwardedRef<{
+export type TextRef = {
   setNativeProps(args: Object): void;
-}>;
+};
 
 // @component-group Typography
 
@@ -81,32 +79,34 @@ export type TextRef = React.ForwardedRef<{
  *
  * @extends Text props https://reactnative.dev/docs/text#props
  */
-const Text = (
-  { style, variant, theme: initialTheme, ...rest }: Props<string>,
-  ref: TextRef
-) => {
+const Text = ({
+  style,
+  variant,
+  theme: initialTheme,
+  ref,
+  ...rest
+}: Props<string>) => {
   const root = React.useRef<NativeText | null>(null);
   // FIXME: destructure it in TS 4.6+
   const theme = useInternalTheme(initialTheme);
-  const writingDirection = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr';
+  const { direction: writingDirection } = useLocale();
 
   React.useImperativeHandle(ref, () => ({
     setNativeProps: (args: Object) => root.current?.setNativeProps(args),
   }));
 
-  if (theme.isV3 && variant) {
+  if (variant) {
     let font = theme.fonts[variant];
     let textStyle = [font, style];
 
     if (
-      React.isValidElement(rest.children) &&
-      (rest.children.type === Component ||
-        rest.children.type === AnimatedText ||
-        rest.children.type === StyledText)
+      React.isValidElement<{
+        variant?: string;
+        style?: StyleProp<TextStyle>;
+      }>(rest.children) &&
+      (rest.children.type === Component || rest.children.type === AnimatedText)
     ) {
-      const { props } = rest.children as {
-        props: { variant?: string; style?: StyleProp<TextStyle> };
-      };
+      const { props } = rest.children;
 
       // Context:   Some components have the built-in `Text` component with a predefined variant,
       //            that also accepts `children` as a `React.Node`. This can result in a situation,
@@ -119,11 +119,15 @@ const Text = (
       // Solution:  To address the following scenario, the code below overrides the `variant`
       //            specified in a parent in favor of children's variant:
       if (props.variant) {
-        font = theme.fonts[props.variant as VariantProp<typeof props.variant>];
+        font =
+          theme.fonts[
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+            props.variant as VariantProp<typeof props.variant>
+          ];
         textStyle = [style, font];
       }
 
-      // Case two:  Nested `Text` has specified `styles` which intefere
+      // Case two:  Nested `Text` has specified `styles` which interfere
       //            with font properties, from the parent's `variant`. For example:
       //              <Chip>
       //                <Text style={{fontSize: 30}}>Nested</Text>
@@ -155,10 +159,10 @@ const Text = (
       />
     );
   } else {
-    const font = theme.isV3 ? theme.fonts.default : theme.fonts?.regular;
+    const font = theme.fonts.default;
     const textStyle = {
       ...font,
-      color: theme.isV3 ? theme.colors?.onSurface : theme.colors.text,
+      color: theme.colors?.onSurface,
     };
     return (
       <NativeText
@@ -176,12 +180,12 @@ const styles = StyleSheet.create({
   },
 });
 
-type TextComponent<T> = (
-  props: Props<T> & { ref?: React.RefObject<TextRef> }
-) => ReactNode;
+type TextComponent<T> = (props: Props<T>) => ReactNode;
 
-const Component = forwardRef(Text) as TextComponent<never>;
+const Component = Text as TextComponent<never>;
 
-export const customText = <T,>() => Component as unknown as TextComponent<T>;
+export const customText = <T,>() =>
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+  Component as unknown as TextComponent<T>;
 
 export default Component;
diff --git a/src/components/Typography/types.tsx b/src/components/Typography/types.tsx
index 61a6dc7c1e..cd6594aa5d 100644
--- a/src/components/Typography/types.tsx
+++ b/src/components/Typography/types.tsx
@@ -1,5 +1,5 @@
-import type { MD3TypescaleKey } from '../../types';
+import type { TypescaleKey } from '../../theme/types';
 
 export type VariantProp<T> =
   | (T extends string ? (string extends T ? never : T) : never)
-  | keyof typeof MD3TypescaleKey;
+  | TypescaleKey;
diff --git a/src/components/Typography/v2/Caption.tsx b/src/components/Typography/v2/Caption.tsx
deleted file mode 100644
index 7255c4f4a3..0000000000
--- a/src/components/Typography/v2/Caption.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import * as React from 'react';
-import { Text, TextStyle, StyleSheet, StyleProp } from 'react-native';
-
-import StyledText from './StyledText';
-
-export type Props = React.ComponentProps<typeof Text> & {
-  style?: StyleProp<TextStyle>;
-  children: React.ReactNode;
-};
-
-// @component-group Typography
-/**
- * @deprecated Deprecated in v5.x - use `<Text variant="bodySmall" />` instead.
- * Typography component for showing a caption.
- *
- * <div class="screenshots">
- *   <img src="screenshots/caption.png" />
- * </div>
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Caption } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <Caption>Caption</Caption>
- * );
- *
- * export default MyComponent;
- * ```
- */
-const Caption = (props: Props) => (
-  <StyledText
-    {...props}
-    alpha={0.54}
-    family="regular"
-    style={[styles.text, props.style]}
-  />
-);
-
-export default Caption;
-
-const styles = StyleSheet.create({
-  text: {
-    fontSize: 12,
-    lineHeight: 20,
-    marginVertical: 2,
-    letterSpacing: 0.4,
-  },
-});
diff --git a/src/components/Typography/v2/Headline.tsx b/src/components/Typography/v2/Headline.tsx
deleted file mode 100644
index c635f81d07..0000000000
--- a/src/components/Typography/v2/Headline.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as React from 'react';
-import { Text, TextStyle, StyleSheet, StyleProp } from 'react-native';
-
-import StyledText from './StyledText';
-
-export type Props = React.ComponentProps<typeof Text> & {
-  style?: StyleProp<TextStyle>;
-  children: React.ReactNode;
-};
-
-// @component-group Typography
-
-/**
- * @deprecated Deprecated in v5.x - use `<Text variant="headlineSmall" />` instead.
- * Typography component for showing a headline.
- *
- * <div class="screenshots">
- *   <img src="screenshots/headline.png" />
- * </div>
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Headline } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <Headline>Headline</Headline>
- * );
- *
- * export default MyComponent;
- * ```
- */
-const Headline = (props: Props) => {
-  return (
-    <StyledText
-      {...props}
-      alpha={0.87}
-      family="regular"
-      style={[styles.text, props.style]}
-    />
-  );
-};
-
-export default Headline;
-
-const styles = StyleSheet.create({
-  text: {
-    fontSize: 24,
-    lineHeight: 32,
-    marginVertical: 2,
-    letterSpacing: 0,
-  },
-});
diff --git a/src/components/Typography/v2/Paragraph.tsx b/src/components/Typography/v2/Paragraph.tsx
deleted file mode 100644
index 26149d37e3..0000000000
--- a/src/components/Typography/v2/Paragraph.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import * as React from 'react';
-import { TextProps, StyleSheet } from 'react-native';
-
-import StyledText from './StyledText';
-
-export type Props = TextProps & {
-  children: React.ReactNode;
-};
-
-// @component-group Typography
-
-/**
- * @deprecated Deprecated in v5.x - use `<Text variant="bodyMedium" />` instead.
- * Typography component for showing a paragraph.
- *
- * <div class="screenshots">
- *   <img src="screenshots/paragraph.png" />
- * </div>
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Paragraph } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <Paragraph>Paragraph</Paragraph>
- * );
- *
- * export default MyComponent;
- * ```
- */
-const Paragraph = (props: Props) => (
-  <StyledText
-    {...props}
-    alpha={0.87}
-    family="regular"
-    style={[styles.text, props.style]}
-  />
-);
-
-export default Paragraph;
-
-const styles = StyleSheet.create({
-  text: {
-    fontSize: 14,
-    lineHeight: 20,
-    marginVertical: 2,
-    letterSpacing: 0.25,
-  },
-});
diff --git a/src/components/Typography/v2/StyledText.tsx b/src/components/Typography/v2/StyledText.tsx
deleted file mode 100644
index 5d976ff267..0000000000
--- a/src/components/Typography/v2/StyledText.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as React from 'react';
-import { I18nManager, StyleProp, StyleSheet, TextStyle } from 'react-native';
-
-import color from 'color';
-import type { ThemeProp } from 'src/types';
-
-import Text from './Text';
-import { useInternalTheme } from '../../../core/theming';
-
-type Props = React.ComponentProps<typeof Text> & {
-  alpha?: number;
-  family: 'regular' | 'medium' | 'light' | 'thin';
-  style?: StyleProp<TextStyle>;
-  theme?: ThemeProp;
-};
-
-const StyledText = ({
-  alpha = 1,
-  family,
-  style,
-  theme: themeOverrides,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-
-  const textColor = color(
-    theme.isV3 ? theme.colors.onSurface : theme.colors?.text
-  )
-    .alpha(alpha)
-    .rgb()
-    .string();
-  const writingDirection = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr';
-
-  return (
-    <Text
-      {...rest}
-      style={[
-        styles.text,
-        {
-          color: textColor,
-          ...(!theme.isV3 && theme.fonts?.[family]),
-          writingDirection,
-        },
-        style,
-      ]}
-    />
-  );
-};
-
-const styles = StyleSheet.create({
-  text: {
-    textAlign: 'left',
-  },
-});
-
-export default StyledText;
diff --git a/src/components/Typography/v2/Subheading.tsx b/src/components/Typography/v2/Subheading.tsx
deleted file mode 100644
index d7c849d10b..0000000000
--- a/src/components/Typography/v2/Subheading.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from 'react';
-import { Text, TextStyle, StyleSheet, StyleProp } from 'react-native';
-
-import StyledText from './StyledText';
-
-export type Props = React.ComponentProps<typeof Text> & {
-  style?: StyleProp<TextStyle>;
-  children: React.ReactNode;
-};
-
-// @component-group Typography
-
-/**
- * @deprecated Deprecated in v5.x - use `<Text variant="titleMedium" />` instead.
- * Typography component for showing a subheading.
- *
- * <div class="screenshots">
- *   <img src="screenshots/subheading.png" />
- * </div>
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Subheading } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <Subheading>Subheading</Subheading>
- * );
- *
- * export default MyComponent;
- * ```
- */
-const Subheading = (props: Props) => (
-  <StyledText
-    {...props}
-    alpha={0.87}
-    family="regular"
-    style={[styles.text, props.style]}
-  />
-);
-
-export default Subheading;
-
-const styles = StyleSheet.create({
-  text: {
-    fontSize: 16,
-    lineHeight: 24,
-    marginVertical: 2,
-    letterSpacing: 0.5,
-  },
-});
diff --git a/src/components/Typography/v2/Text.tsx b/src/components/Typography/v2/Text.tsx
deleted file mode 100644
index 8114915189..0000000000
--- a/src/components/Typography/v2/Text.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import * as React from 'react';
-import {
-  StyleProp,
-  StyleSheet,
-  Text as NativeText,
-  TextStyle,
-} from 'react-native';
-
-import type { MD2Theme } from 'src/types';
-
-import { useInternalTheme } from '../../../core/theming';
-import { forwardRef } from '../../../utils/forwardRef';
-
-type Props = React.ComponentProps<typeof NativeText> & {
-  style?: StyleProp<TextStyle>;
-  /**
-   * @optional
-   */
-  theme?: MD2Theme;
-};
-
-// @component-group Typography
-
-/**
- * Text component which follows styles from the theme.
- *
- * @extends Text props https://reactnative.dev/docs/text#props
- */
-const Text: React.ForwardRefRenderFunction<{}, Props> = (
-  { style, theme: overrideTheme, ...rest }: Props,
-  ref
-) => {
-  const root = React.useRef<NativeText | null>(null);
-  const theme = useInternalTheme(overrideTheme);
-
-  React.useImperativeHandle(ref, () => ({
-    setNativeProps: (args: Object) => root.current?.setNativeProps(args),
-  }));
-
-  return (
-    <NativeText
-      {...rest}
-      ref={root}
-      style={[
-        {
-          ...(!theme.isV3 && theme.fonts?.regular),
-          color: theme.isV3 ? theme.colors?.onSurface : theme.colors.text,
-        },
-        styles.text,
-        style,
-      ]}
-    />
-  );
-};
-
-const styles = StyleSheet.create({
-  text: {
-    textAlign: 'left',
-  },
-});
-
-export default forwardRef(Text);
diff --git a/src/components/Typography/v2/Title.tsx b/src/components/Typography/v2/Title.tsx
deleted file mode 100644
index cbddd1e22e..0000000000
--- a/src/components/Typography/v2/Title.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import * as React from 'react';
-import { Text, StyleSheet } from 'react-native';
-
-import StyledText from './StyledText';
-
-export type Props = React.ComponentProps<typeof Text> & {
-  children: React.ReactNode;
-};
-
-// @component-group Typography
-
-/**
- * @deprecated Deprecated in v5.x - use `<Text variant="titleLarge" />` instead.
- * Typography component for showing a title.
- *
- * <div class="screenshots">
- *   <img src="screenshots/title.png" />
- * </div>
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Title } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <Title>Title</Title>
- * );
- *
- * export default MyComponent;
- * ```
- */
-const Title = (props: Props) => (
-  <StyledText
-    {...props}
-    alpha={0.87}
-    family="medium"
-    style={[styles.text, props.style]}
-  />
-);
-
-export default Title;
-
-const styles = StyleSheet.create({
-  text: {
-    fontSize: 20,
-    lineHeight: 30,
-    marginVertical: 2,
-    letterSpacing: 0.15,
-  },
-});
diff --git a/src/components/Typography/v2/index.ts b/src/components/Typography/v2/index.ts
deleted file mode 100644
index 42fdec5730..0000000000
--- a/src/components/Typography/v2/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as Caption } from './Caption';
-export { default as Headline } from './Headline';
-export { default as Paragraph } from './Paragraph';
-export { default as Subheading } from './Subheading';
-export { default as Title } from './Title';
diff --git a/src/components/__tests__/ActivityIndicator.test.tsx b/src/components/__tests__/ActivityIndicator.test.tsx
index f787fe9967..076e60effa 100644
--- a/src/components/__tests__/ActivityIndicator.test.tsx
+++ b/src/components/__tests__/ActivityIndicator.test.tsx
@@ -1,31 +1,30 @@
-import * as React from 'react';
-
-import { render } from '@testing-library/react-native';
+import { expect, it } from '@jest/globals';
 
+import { render } from '../../test-utils';
 import ActivityIndicator from '../ActivityIndicator';
 
-it('renders indicator', () => {
-  const tree = render(<ActivityIndicator animating />).toJSON();
+it('renders indicator', async () => {
+  const tree = (await render(<ActivityIndicator animating />)).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders hidden indicator', () => {
-  const tree = render(
-    <ActivityIndicator animating={false} hidesWhenStopped />
+it('renders hidden indicator', async () => {
+  const tree = (
+    await render(<ActivityIndicator animating={false} hidesWhenStopped />)
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders large indicator', () => {
-  const tree = render(<ActivityIndicator size="large" />).toJSON();
+it('renders large indicator', async () => {
+  const tree = (await render(<ActivityIndicator size="large" />)).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders colored indicator', () => {
-  const tree = render(<ActivityIndicator color="#FF0000" />).toJSON();
+it('renders colored indicator', async () => {
+  const tree = (await render(<ActivityIndicator color="#FF0000" />)).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/AnimatedFAB.test.tsx b/src/components/__tests__/AnimatedFAB.test.tsx
deleted file mode 100644
index a31f6d5fb4..0000000000
--- a/src/components/__tests__/AnimatedFAB.test.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-/// <reference types="@testing-library/jest-native" />
-
-import * as React from 'react';
-import { Animated, StyleSheet } from 'react-native';
-
-import { fireEvent, render } from '@testing-library/react-native';
-import { act } from 'react-test-renderer';
-
-import { MD3Colors } from '../../styles/themes/v3/tokens';
-import AnimatedFAB from '../FAB/AnimatedFAB';
-
-const styles = StyleSheet.create({
-  background: {
-    backgroundColor: MD3Colors.tertiary50,
-  },
-});
-
-it('renders animated fab', () => {
-  const tree = render(
-    <AnimatedFAB onPress={() => {}} label="" extended={false} icon="plus" />
-  ).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
-
-it('renders animated fab with label on the right by default', () => {
-  const tree = render(
-    <AnimatedFAB label="text" extended onPress={() => {}} icon="plus" />
-  ).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
-
-it('renders animated fab with label on the left', () => {
-  const tree = render(
-    <AnimatedFAB
-      label="text"
-      extended
-      animateFrom="left"
-      onPress={() => {}}
-      icon="plus"
-    />
-  ).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
-
-it('renders animated fab with only transparent container', () => {
-  const { getByTestId } = render(
-    <AnimatedFAB
-      label="text"
-      animateFrom="left"
-      onPress={() => {}}
-      icon="plus"
-      testID="animated-fab"
-      extended={false}
-      style={styles.background}
-    />
-  );
-  expect(getByTestId('animated-fab-container')).toHaveStyle({
-    backgroundColor: 'transparent',
-  });
-});
-
-it('animated value changes correctly', () => {
-  const value = new Animated.Value(1);
-  const { getByTestId } = render(
-    <AnimatedFAB
-      label="text"
-      icon="plus"
-      testID="animated-fab"
-      extended={false}
-      style={[{ transform: [{ scale: value }] }]}
-    />
-  );
-  expect(getByTestId('animated-fab-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1 }],
-  });
-
-  Animated.timing(value, {
-    toValue: 1.5,
-    useNativeDriver: false,
-    duration: 200,
-  }).start();
-
-  act(() => {
-    jest.advanceTimersByTime(200);
-  });
-
-  expect(getByTestId('animated-fab-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1.5 }],
-  });
-});
-
-it('renders FAB without uppercase styling if uppercase prop is falsy', () => {
-  const { getByTestId } = render(
-    <AnimatedFAB
-      label="text"
-      animateFrom="left"
-      onPress={() => {}}
-      icon="plus"
-      testID="animated-fab"
-      style={styles.background}
-      extended={false}
-      uppercase={false}
-    />
-  );
-
-  expect(getByTestId('animated-fab-text')).not.toHaveStyle({
-    textTransform: 'uppercase',
-  });
-});
-
-it('renders FAB with uppercase styling if uppercase prop is truthy', () => {
-  const { getByTestId } = render(
-    <AnimatedFAB
-      label="text"
-      animateFrom="left"
-      onPress={() => {}}
-      icon="plus"
-      testID="animated-fab"
-      style={styles.background}
-      extended={false}
-      uppercase
-    />
-  );
-
-  expect(getByTestId('animated-fab-text')).toHaveStyle({
-    textTransform: 'uppercase',
-  });
-});
-
-it('renders correct elevation value for shadow views', () => {
-  const { getByTestId } = render(
-    <AnimatedFAB
-      extended
-      label="text"
-      animateFrom="left"
-      onPress={() => {}}
-      icon="plus"
-      testID="animated-fab"
-    />
-  );
-
-  expect(getByTestId('animated-fab-shadow')).toHaveStyle({ elevation: 3 });
-  expect(getByTestId('animated-fab-extended-shadow')).toHaveStyle({
-    elevation: 3,
-  });
-});
-
-describe('AnimatedFAB events', () => {
-  it('onPress passes event', () => {
-    const onPress = jest.fn();
-    const { getByTestId } = render(
-      <AnimatedFAB extended icon="plus" onPress={onPress} label="Add items" />
-    );
-
-    act(() => {
-      fireEvent(getByTestId('animated-fab'), 'onPress', { key: 'value' });
-    });
-
-    expect(onPress).toHaveBeenCalledWith({ key: 'value' });
-  });
-
-  it('onLongPress passes event', () => {
-    const onLongPress = jest.fn();
-    const { getByTestId } = render(
-      <AnimatedFAB
-        extended
-        icon="plus"
-        onLongPress={onLongPress}
-        label="Add items"
-      />
-    );
-
-    act(() => {
-      fireEvent(getByTestId('animated-fab'), 'onLongPress', { key: 'value' });
-    });
-
-    expect(onLongPress).toHaveBeenCalledWith({ key: 'value' });
-  });
-});
diff --git a/src/components/__tests__/Appbar/Appbar.test.tsx b/src/components/__tests__/Appbar/Appbar.test.tsx
index 6f76dab75b..0d6abb6029 100644
--- a/src/components/__tests__/Appbar/Appbar.test.tsx
+++ b/src/components/__tests__/Appbar/Appbar.test.tsx
@@ -1,13 +1,9 @@
-import React from 'react';
-import { Animated, Platform } from 'react-native';
+import { describe, expect, it } from '@jest/globals';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 
-import { act, render } from '@testing-library/react-native';
-import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock';
-
-import PaperProvider from '../../../core/PaperProvider';
-import { getTheme } from '../../../core/theming';
-import overlay from '../../../styles/overlay';
-import { tokens } from '../../../styles/themes/v3/tokens';
+import { render, screen } from '../../../test-utils';
+import { DarkTheme, LightTheme } from '../../../theme/schemes';
+import { tokens } from '../../../theme/tokens';
 import Appbar from '../../Appbar';
 import {
   getAppbarBackgroundColor,
@@ -17,31 +13,35 @@ import {
 } from '../../Appbar/utils';
 import Menu from '../../Menu/Menu';
 import Searchbar from '../../Searchbar';
-import Tooltip from '../../Tooltip/Tooltip';
 import Text from '../../Typography/Text';
 
+// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
 const renderAppbarContent = utilRenderAppbarContent as (
   props: Parameters<typeof utilRenderAppbarContent>[0]
 ) => { props: any }[];
 
 describe('Appbar', () => {
-  it('does not pass any additional props to Searchbar', () => {
-    const tree = render(
-      <Appbar>
-        <Searchbar placeholder="Search" value="" />
-      </Appbar>
+  it('does not pass any additional props to Searchbar', async () => {
+    const tree = (
+      await render(
+        <Appbar>
+          <Searchbar placeholder="Search" value="" />
+        </Appbar>
+      )
     ).toJSON();
 
     expect(tree).toMatchSnapshot();
   });
 
-  it('passes additional props to AppbarBackAction, AppbarContent and AppbarAction', () => {
-    const tree = render(
-      <Appbar>
-        <Appbar.BackAction onPress={() => {}} />
-        <Appbar.Content title="Examples" />
-        <Appbar.Action icon="menu" onPress={() => {}} />
-      </Appbar>
+  it('passes additional props to AppbarBackAction, AppbarContent and AppbarAction', async () => {
+    const tree = (
+      await render(
+        <Appbar>
+          <Appbar.BackAction onPress={() => {}} />
+          <Appbar.Content title="Examples" />
+          <Appbar.Action icon="menu" onPress={() => {}} />
+        </Appbar>
+      )
     ).toJSON();
 
     expect(tree).toMatchSnapshot();
@@ -58,7 +58,6 @@ describe('renderAppbarContent', () => {
 
   it('should render all children types if renderOnly is not specified', () => {
     const result = renderAppbarContent({
-      isV3: false,
       children,
       isDark: false,
     });
@@ -68,7 +67,6 @@ describe('renderAppbarContent', () => {
 
   it('should render all children types except specified in renderExcept', () => {
     const result = renderAppbarContent({
-      isV3: false,
       children: [
         ...children,
         <Menu
@@ -91,9 +89,8 @@ describe('renderAppbarContent', () => {
     expect(result).toHaveLength(3);
   });
 
-  it('should render only children types specifed in renderOnly', () => {
+  it('should render only children types specified in renderOnly', () => {
     const result = renderAppbarContent({
-      isV3: false,
       children,
       isDark: false,
       renderOnly: ['Appbar.Action'],
@@ -104,276 +101,148 @@ describe('renderAppbarContent', () => {
 
   it('should render AppbarContent with correct mode', () => {
     const result = renderAppbarContent({
-      isV3: false,
       children,
       isDark: false,
       renderOnly: ['Appbar.Content'],
       mode: 'large',
     });
 
+    // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
     expect(result[0].props.mode).toBe('large');
   });
 
   it('should render centered AppbarContent', () => {
-    const renderResult = (isV3 = true) =>
-      renderAppbarContent({
-        children,
-        isDark: false,
-        isV3,
-        renderOnly: ['Appbar.Content'],
-        mode: 'center-aligned',
-        shouldCenterContent: true,
-      });
-
-    const centerAlignedContent = {
-      alignItems: 'center',
-    };
-
-    expect(renderResult()[0].props.style).toEqual(
-      expect.arrayContaining([expect.objectContaining(centerAlignedContent)])
-    );
-
-    expect(renderResult(false)[0].props.style).toEqual(
-      expect.arrayContaining([expect.objectContaining(centerAlignedContent)])
-    );
-  });
-
-  it('should not render centered AppbarContent for Android, if not V3', () => {
-    Platform.OS = 'android';
-    const renderResult = (isV3 = true) =>
-      renderAppbarContent({
-        children,
-        isDark: false,
-        isV3,
-        renderOnly: ['Appbar.Content'],
-        mode: 'center-aligned',
-        shouldCenterContent: !isV3 && Platform.OS === 'ios',
-      });
-
-    const centerAlignedContent = {
-      alignItems: 'center',
-    };
-
-    expect(renderResult(false)[0].props.style).not.toEqual(
-      expect.arrayContaining([expect.objectContaining(centerAlignedContent)])
-    );
-  });
-
-  it('should render centered AppbarContent always for iOS, if not V3', () => {
-    Platform.OS = 'ios';
-    const renderResult = (isV3 = true) =>
-      renderAppbarContent({
-        children,
-        isDark: false,
-        isV3,
-        renderOnly: ['Appbar.Content'],
-        mode: 'center-aligned',
-        shouldCenterContent: !isV3 && Platform.OS === 'ios',
-      });
+    const result = renderAppbarContent({
+      children,
+      isDark: false,
+      renderOnly: ['Appbar.Content'],
+      mode: 'center-aligned',
+      shouldCenterContent: true,
+    });
 
     const centerAlignedContent = {
       alignItems: 'center',
     };
 
-    expect(renderResult(false)[0].props.style).toEqual(
+    // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+    expect(result[0].props.style).toEqual(
       expect.arrayContaining([expect.objectContaining(centerAlignedContent)])
     );
   });
 
   it('should render AppbarContent with correct spacings', () => {
-    const renderResult = (isV3 = true, withAppbarBackAction = false) =>
+    const renderResult = (withAppbarBackAction = false) =>
       renderAppbarContent({
         children,
         isDark: false,
-        isV3,
         renderOnly: [
           'Appbar.Content',
           withAppbarBackAction && 'Appbar.BackAction',
         ],
       });
 
-    const v2Spacing = {
-      marginLeft: 8,
-    };
-
     const v3Spacing = {
       marginLeft: 12,
     };
 
+    // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
     expect(renderResult()[0].props.style).toEqual(
       expect.arrayContaining([expect.objectContaining(v3Spacing)])
     );
-
-    expect(renderResult(false, true)[1].props.style).toEqual(
-      expect.arrayContaining([expect.objectContaining(v2Spacing)])
-    );
   });
 
-  it('Is recognized as a header when no onPress callback has been pressed', () => {
-    const { getByRole } = render(
-      <mockSafeAreaContext.SafeAreaProvider>
+  it('Is recognized as a heading when no onPress callback has been passed', async () => {
+    await render(
+      <SafeAreaProvider>
         <Appbar.Header>
           <Appbar.Content title="Accessible test" />
         </Appbar.Header>
-      </mockSafeAreaContext.SafeAreaProvider>
+      </SafeAreaProvider>
     );
 
-    expect(getByRole('header')).toBeTruthy();
+    expect(screen.getByRole('heading')).toBeOnTheScreen();
   });
-  it('is recognized as a button when onPress callback has been passed', () => {
-    const { getByTestId } = render(
-      <mockSafeAreaContext.SafeAreaProvider>
+  it('is recognized as a button when onPress callback has been passed', async () => {
+    await render(
+      <SafeAreaProvider>
         <Appbar.Header>
           <Appbar.Content title="Accessible test" onPress={() => {}} />
         </Appbar.Header>
-      </mockSafeAreaContext.SafeAreaProvider>
+      </SafeAreaProvider>
     );
 
-    expect(getByTestId('appbar-content').props.accessibilityRole).toEqual(
-      'button'
-    );
-    expect(
-      getByTestId('appbar-content').props.accessibilityState || {}
-    ).not.toMatchObject({ disabled: true });
-    expect(
-      getByTestId('appbar-content-title-text').props.accessibilityRole
-    ).toEqual('none');
+    expect(screen.getByRole('button')).toBeEnabled();
+    expect(screen.queryByRole('heading')).not.toBeOnTheScreen();
   });
-  it('is recognized as a disabled button when onPress and disabled is passed', () => {
-    const { getByTestId } = render(
-      <mockSafeAreaContext.SafeAreaProvider>
+  it('is recognized as a disabled button when onPress and disabled is passed', async () => {
+    await render(
+      <SafeAreaProvider>
         <Appbar.Header>
           <Appbar.Content title="Accessible test" onPress={() => {}} disabled />
         </Appbar.Header>
-      </mockSafeAreaContext.SafeAreaProvider>
+      </SafeAreaProvider>
     );
 
-    expect(getByTestId('appbar-content').props.accessibilityRole).toEqual(
-      'button'
-    );
-    expect(
-      getByTestId('appbar-content').props.accessibilityState
-    ).toMatchObject({ disabled: true });
-    expect(
-      getByTestId('appbar-content-title-text').props.accessibilityRole
-    ).toEqual('none');
+    expect(screen.getByRole('button')).toBeDisabled();
+    expect(screen.queryByRole('heading')).not.toBeOnTheScreen();
   });
 });
 
 describe('AppbarAction', () => {
-  it('should be rendered with default theme color', () => {
-    const { getByTestId } = render(
+  it('should be rendered with default theme color', async () => {
+    const { toJSON } = await render(
       <Appbar>
         <Appbar.Action icon="menu" testID="appbar-action" />
       </Appbar>
     );
-    const appbarActionIcon = getByTestId('cross-fade-icon-current').props
-      .children;
-    expect(appbarActionIcon.props.color).toBe(
-      getTheme().colors.onSurfaceVariant
-    );
+    expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should be rendered with specific theme color if is leading', () => {
-    const { getByTestId } = render(
+  it('should be rendered with specific theme color if is leading', async () => {
+    const { toJSON } = await render(
       <Appbar>
         <Appbar.Action icon="menu" testID="appbar-action" isLeading />
       </Appbar>
     );
-    const appbarActionIcon = getByTestId('cross-fade-icon-current').props
-      .children;
-    expect(appbarActionIcon.props.color).toBe(getTheme().colors.onSurface);
+    expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should be rendered with custom color', () => {
-    const { getByTestId } = render(
+  it('should be rendered with custom color', async () => {
+    const { toJSON } = await render(
       <Appbar>
         <Appbar.Action icon="menu" color="purple" testID="appbar-action" />
       </Appbar>
     );
-    const appbarActionIcon = getByTestId('cross-fade-icon-current').props
-      .children;
-    expect(appbarActionIcon.props.color).toBe('purple');
+    expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should be rendered with custom ripple color', () => {
-    const { getByTestId } = render(
-      <Appbar>
-        <Appbar.Action
-          icon="menu"
-          rippleColor="purple"
-          testID="appbar-action"
-        />
-      </Appbar>
-    );
-    const appbarActionContainer = getByTestId('appbar-action-container').props
-      .children;
-    expect(appbarActionContainer.props.rippleColor).toBe('purple');
-  });
-
-  it('should render AppbarBackAction with custom color', () => {
-    const { getByTestId } = render(
+  it('should render AppbarBackAction with custom color', async () => {
+    const { toJSON } = await render(
       <Appbar>
         <Appbar.BackAction color="purple" testID="appbar-action" />
       </Appbar>
     );
-    const appbarBackActionIcon = getByTestId('cross-fade-icon-current').props
-      .children;
-    expect(appbarBackActionIcon.props.color).toBe('purple');
-  });
-
-  describe('When V2', () => {
-    const theme = { isV3: false };
-
-    it('should be rendered with the right color when no color is passed', () => {
-      const { getByTestId } = render(
-        <Appbar theme={theme}>
-          <Appbar.Action icon="menu" testID="appbar-action" />
-        </Appbar>
-      );
-
-      const appbarActionIcon = getByTestId('cross-fade-icon-current').props
-        .children;
-
-      expect(appbarActionIcon.props.color).toBe('#ffffff');
-    });
-
-    it('should be rendered with the right color when no color is passed but is wrapped by a Tooltip', () => {
-      const { getByTestId } = render(
-        <PaperProvider>
-          <Appbar theme={theme}>
-            <Tooltip title="Menu">
-              <Appbar.Action icon="menu" testID="appbar-action" />
-            </Tooltip>
-          </Appbar>
-        </PaperProvider>
-      );
-
-      const appbarActionIcon = getByTestId('cross-fade-icon-current').props
-        .children;
-
-      expect(appbarActionIcon.props.color).toBe('#ffffff');
-    });
+    expect(toJSON()).toMatchSnapshot();
   });
 });
 
 describe('AppbarContent', () => {
   (['small', 'medium', 'large', 'center-aligned'] as const).forEach((mode) =>
-    it(`should render text component with appropriate variant for ${mode} mode`, () => {
-      const { getByTestId } = render(
+    it(`should render text component with appropriate variant for ${mode} mode`, async () => {
+      await render(
         <Appbar mode={mode}>
-          <Appbar.Content title="Title" />
+          <Appbar.Content testID="appbar-content" title="Title" />
         </Appbar>
       );
 
-      expect(getByTestId('appbar-content-title-text')).toHaveStyle(
-        getTheme().fonts[modeTextVariant[mode]]
+      expect(screen.getByText('Title')).toHaveStyle(
+        LightTheme.fonts[modeTextVariant[mode]]
       );
     })
   );
 
-  it('should render component passed to title', () => {
-    const { getByText } = render(
+  it('should render component passed to title', async () => {
+    await render(
       <Appbar>
         <Appbar.Content
           title={
@@ -385,189 +254,58 @@ describe('AppbarContent', () => {
       </Appbar>
     );
 
-    expect(getByText('Title')).toBeDefined();
+    expect(screen.getByText('Title')).toBeOnTheScreen();
   });
 });
 
 describe('getAppbarColors', () => {
-  const elevation = 4;
+  const elevated = true;
   const customBackground = 'aquamarine';
 
   it('should return custom color no matter what is the theme version', () => {
     expect(
-      getAppbarBackgroundColor(getTheme(), elevation, customBackground)
+      getAppbarBackgroundColor(LightTheme, elevated, customBackground)
     ).toBe(customBackground);
   });
 
-  it('should return v3 light color if theme version is 3', () => {
-    expect(getAppbarBackgroundColor(getTheme(), elevation)).toBe(
-      tokens.md.ref.palette.neutral99
+  it('returns the light surface container color for an elevated appbar', () => {
+    expect(getAppbarBackgroundColor(LightTheme, elevated)).toBe(
+      tokens.md.ref.palette.neutral94
     );
   });
 
-  it('should return v3 dark color if theme version is 3', () => {
-    expect(getAppbarBackgroundColor(getTheme(true), elevation)).toBe(
-      tokens.md.ref.palette.neutral10
-    );
-  });
-
-  it('should return v2 light color if theme version is 2', () => {
-    expect(getAppbarBackgroundColor(getTheme(false, false), elevation)).toBe(
-      '#6200ee'
-    );
-  });
-
-  it('should return v2 dark color if theme version is 2', () => {
-    expect(getAppbarBackgroundColor(getTheme(true, false), elevation)).toBe(
-      overlay(elevation, '#121212')
+  it('returns the dark surface container color for an elevated appbar', () => {
+    expect(getAppbarBackgroundColor(DarkTheme, elevated)).toBe(
+      tokens.md.ref.palette.neutral12
     );
   });
 });
 
-describe('animated value changes correctly', () => {
-  it('appbar animated value changes correctly', () => {
-    const value = new Animated.Value(1);
-    const { getByTestId } = render(
-      <Appbar testID="appbar" style={[{ transform: [{ scale: value }] }]}>
-        <Appbar.Action icon="menu" />
-      </Appbar>
-    );
-    expect(getByTestId('appbar-outer-layer')).toHaveStyle({
-      transform: [{ scale: 1 }],
-    });
-
-    Animated.timing(value, {
-      toValue: 1.5,
-      useNativeDriver: false,
-      duration: 200,
-    }).start();
-
-    act(() => {
-      jest.advanceTimersByTime(200);
-    });
-
-    expect(getByTestId('appbar-outer-layer')).toHaveStyle({
-      transform: [{ scale: 1.5 }],
-    });
-  });
-
-  it('action animated value changes correctly', () => {
-    const value = new Animated.Value(1);
-    const { getByTestId } = render(
-      <Appbar>
-        <Appbar.Action
-          icon="menu"
-          style={[{ transform: [{ scale: value }] }]}
-          testID="appbar-action"
-        />
-      </Appbar>
+describe('getAppbarBorders', () => {
+  const borderStyles = {
+    borderRadius: 1,
+    borderBottomEndRadius: 2,
+    borderBottomStartRadius: 3,
+    borderEndEndRadius: 4,
+    borderEndStartRadius: 5,
+    borderStartEndRadius: 6,
+    borderStartStartRadius: 7,
+    borderTopEndRadius: 8,
+    borderTopStartRadius: 9,
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 11,
+    borderBottomRightRadius: 12,
+    borderBottomLeftRadius: 13,
+    borderCurve: 'continuous' as const,
+  };
+
+  it('returns every border style and excludes unrelated styles', () => {
+    expect(getAppbarBorders({ ...borderStyles, height: 60, top: 13 })).toEqual(
+      borderStyles
     );
-    expect(getByTestId('appbar-action-container-outer-layer')).toHaveStyle({
-      transform: [{ scale: 1 }],
-    });
-
-    Animated.timing(value, {
-      toValue: 1.5,
-      useNativeDriver: false,
-      duration: 200,
-    }).start();
-
-    act(() => {
-      jest.advanceTimersByTime(200);
-    });
-
-    expect(getByTestId('appbar-action-container-outer-layer')).toHaveStyle({
-      transform: [{ scale: 1.5 }],
-    });
   });
 
-  it('back action animated value changes correctly', () => {
-    const value = new Animated.Value(1);
-    const { getByTestId } = render(
-      <Appbar>
-        <Appbar.BackAction
-          style={[{ transform: [{ scale: value }] }]}
-          testID="appbar-back-action"
-        />
-      </Appbar>
-    );
-    expect(getByTestId('appbar-back-action-container-outer-layer')).toHaveStyle(
-      {
-        transform: [{ scale: 1 }],
-      }
-    );
-
-    Animated.timing(value, {
-      toValue: 1.5,
-      useNativeDriver: false,
-      duration: 200,
-    }).start();
-
-    act(() => {
-      jest.advanceTimersByTime(200);
-    });
-
-    expect(getByTestId('appbar-back-action-container-outer-layer')).toHaveStyle(
-      {
-        transform: [{ scale: 1.5 }],
-      }
-    );
-  });
-
-  it('header animated value changes correctly', () => {
-    const value = new Animated.Value(1);
-    const { getByTestId } = render(
-      <mockSafeAreaContext.SafeAreaProvider>
-        <Appbar.Header
-          style={[{ transform: [{ scale: value }] }]}
-          testID="appbar-header"
-        >
-          {null}
-        </Appbar.Header>
-      </mockSafeAreaContext.SafeAreaProvider>
-    );
-    expect(getByTestId('appbar-header-outer-layer')).toHaveStyle({
-      transform: [{ scale: 1 }],
-    });
-
-    Animated.timing(value, {
-      toValue: 1.5,
-      useNativeDriver: false,
-      duration: 200,
-    }).start();
-
-    act(() => {
-      jest.advanceTimersByTime(200);
-    });
-
-    expect(getByTestId('appbar-header-outer-layer')).toHaveStyle({
-      transform: [{ scale: 1.5 }],
-    });
-  });
-
-  it('header bottom border radius applied correctly', () => {
-    const style = { borderBottomLeftRadius: 16, borderBottomRightRadius: 16 };
-
-    const { getByTestId } = render(
-      <mockSafeAreaContext.SafeAreaProvider>
-        <Appbar.Header style={style} testID="appbar-header">
-          {null}
-        </Appbar.Header>
-      </mockSafeAreaContext.SafeAreaProvider>
-    );
-    expect(getByTestId('appbar-header-root-layer')).toHaveStyle(style);
-  });
-
-  describe('getAppbarBorders', () => {
-    const style = { borderRadius: 10, height: 60, top: 13 };
-
-    it('should return only border radius styles', () => {
-      expect(getAppbarBorders(style)).toEqual({ borderRadius: 10 });
-    });
-
-    it('should return empty object if no borders are passed', () => {
-      const style = { height: 60, top: 13 };
-      expect(getAppbarBorders(style)).toEqual({});
-    });
+  it('returns an empty object when no border styles are passed', () => {
+    expect(getAppbarBorders({ height: 60, top: 13 })).toEqual({});
   });
 });
diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
index 4a62c376d8..faeb89916b 100644
--- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
+++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
@@ -4,398 +4,1467 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(255, 251, 254, 1)",
-      "height": 64,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="surface-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+    [
+      {},
+      {
+        "height": 64,
+      },
       {
         "alignItems": "center",
-        "backgroundColor": "rgba(255, 251, 254, 1)",
-        "flex": 1,
         "flexDirection": "row",
+      },
+      {
         "paddingBottom": undefined,
-        "paddingHorizontal": 4,
-        "paddingLeft": undefined,
-        "paddingRight": undefined,
+        "paddingLeft": 4,
+        "paddingRight": 4,
         "paddingTop": undefined,
-        "shadowColor": "#000",
+      },
+      {},
+      {},
+      {
+        "backgroundColor": "rgba(254, 247, 255, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
-      }
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(254, 247, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
     }
-    testID="surface"
-  >
-    <View
-      collapsable={false}
-      style={
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {},
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+        },
+        undefined,
+        {},
         {
-          "backgroundColor": "rgb(238, 232, 244)",
+          "backgroundColor": "rgba(236, 230, 240, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
           "borderRadius": 28,
-          "shadowColor": "#000",
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
           },
           "shadowOpacity": 0,
           "shadowRadius": 0,
-        }
-      }
-      testID="search-bar-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+        },
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {},
+          {},
+          {
+            "backgroundColor": "rgba(236, 230, 240, 1)",
+          },
           {
-            "alignItems": "center",
-            "backgroundColor": "rgb(238, 232, 244)",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
             "borderRadius": 28,
-            "flex": undefined,
-            "flexDirection": "row",
-            "shadowColor": "#000",
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
             },
             "shadowOpacity": 0,
             "shadowRadius": 0,
+          },
+        ]
+      }
+    />
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        accessibilityLabel="search"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": true,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        centered={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
         }
-        testID="search-bar-container"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
+            {
+              "overflow": "hidden",
+            },
+            [
+              {
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
       >
         <View
-          collapsable={false}
           style={
             {
-              "backgroundColor": "transparent",
-              "borderRadius": 20,
-              "height": 40,
+              "opacity": 1,
+            }
+          }
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "rgba(73, 69, 79, 1)",
+                  "fontSize": 24,
+                },
+                [
+                  {
+                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            magnify
+          </Text>
+        </View>
+      </View>
+    </View>
+    <TextInput
+      keyboardAppearance="light"
+      placeholder="Search"
+      placeholderTextColor="rgba(29, 27, 32, 1)"
+      returnKeyType="search"
+      role="searchbox"
+      selectionColor="rgba(103, 80, 164, 1)"
+      style={
+        [
+          {
+            "alignSelf": "stretch",
+            "flex": 1,
+            "fontSize": 18,
+            "minWidth": 0,
+            "paddingLeft": 8,
+          },
+          {
+            "color": "rgba(73, 69, 79, 1)",
+            "fontFamily": "System",
+            "fontSize": 16,
+            "fontWeight": "400",
+            "letterSpacing": 0.5,
+            "lineHeight": 0,
+            "textAlign": "left",
+          },
+          {
+            "minHeight": 56,
+            "paddingLeft": 0,
+          },
+          undefined,
+        ]
+      }
+      underlineColorAndroid="transparent"
+      value=""
+    />
+    <View
+      pointerEvents="none"
+      style={
+        [
+          {
+            "marginLeft": 16,
+            "position": "absolute",
+            "right": 0,
+          },
+          false,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          [
+            {
               "margin": 6,
-              "shadowColor": "#000",
-              "shadowOffset": {
-                "height": 0,
-                "width": 0,
-              },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
               "width": 40,
+            },
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderRadius": 20,
+              "borderWidth": 0,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          accessibilityLabel="clear"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
           }
-          testID="search-bar-icon-container-outer-layer"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "overflow": "hidden",
+              },
+              [
+                {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                undefined,
+              ],
+            ]
+          }
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "transparent",
-                "borderColor": "rgba(121, 116, 126, 1)",
-                "borderRadius": 20,
-                "borderWidth": 0,
-                "elevation": 0,
-                "flex": 1,
-                "overflow": "hidden",
-                "shadowColor": "#000",
-                "shadowOffset": {
-                  "height": 0,
-                  "width": 0,
-                },
-                "shadowOpacity": 0,
-                "shadowRadius": 0,
+                "opacity": 1,
               }
             }
-            testID="search-bar-icon-container"
           >
-            <View
-              accessibilityComponentType="button"
-              accessibilityLabel="search"
-              accessibilityRole="button"
-              accessibilityState={
-                {
-                  "busy": undefined,
-                  "checked": undefined,
-                  "disabled": true,
-                  "expanded": undefined,
-                  "selected": undefined,
-                }
-              }
-              accessibilityTraits="button"
-              accessibilityValue={
-                {
-                  "max": undefined,
-                  "min": undefined,
-                  "now": undefined,
-                  "text": undefined,
-                }
-              }
-              accessible={true}
-              centered={true}
-              collapsable={false}
-              focusable={true}
-              hitSlop={
-                {
-                  "bottom": 6,
-                  "left": 6,
-                  "right": 6,
-                  "top": 6,
-                }
-              }
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
               style={
                 [
                   {
-                    "overflow": "hidden",
+                    "color": "rgba(255, 255, 255, 0)",
+                    "fontSize": 24,
                   },
                   [
                     {
-                      "alignItems": "center",
-                      "flexGrow": 1,
-                      "justifyContent": "center",
+                      "lineHeight": 24,
+                      "transform": [
+                        {
+                          "scaleX": 1,
+                        },
+                      ],
+                    },
+                    {
+                      "backgroundColor": "transparent",
                     },
-                    undefined,
                   ],
                 ]
               }
-              testID="search-bar-icon"
             >
-              <Text
-                accessibilityElementsHidden={true}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
-                  [
-                    {
-                      "color": "rgba(73, 69, 79, 1)",
-                      "fontSize": 24,
-                    },
-                    [
-                      {
-                        "lineHeight": 24,
-                        "transform": [
-                          {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                  ]
-                }
-              >
-                magnify
-              </Text>
-            </View>
+              close
+            </Text>
           </View>
         </View>
-        <TextInput
-          accessibilityRole="search"
-          keyboardAppearance="light"
-          placeholder="Search"
-          placeholderTextColor="rgba(28, 27, 31, 1)"
-          returnKeyType="search"
-          selectionColor="rgba(103, 80, 164, 1)"
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and AppbarAction 1`] = `
+<View
+  collapsable={false}
+  style={
+    [
+      {},
+      {
+        "height": 64,
+      },
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+      {
+        "paddingBottom": undefined,
+        "paddingLeft": 4,
+        "paddingRight": 4,
+        "paddingTop": undefined,
+      },
+      {},
+      {},
+      {
+        "backgroundColor": "rgba(254, 247, 255, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(254, 247, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "margin": 6,
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": undefined,
+          "height": 40,
+          "width": 40,
+        },
+        {
+          "borderColor": "rgba(202, 196, 208, 1)",
+          "borderRadius": 20,
+          "borderWidth": 0,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessibilityLabel="Back"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      centered={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        {
+          "bottom": 6,
+          "left": 6,
+          "right": 6,
+          "top": 6,
+        }
+      }
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          [
+            {
+              "alignItems": "center",
+              "flexGrow": 1,
+              "justifyContent": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+    >
+      <View
+        style={
+          {
+            "opacity": 1,
+          }
+        }
+      >
+        <View
           style={
             [
               {
-                "alignSelf": "stretch",
-                "flex": 1,
-                "fontSize": 18,
-                "minWidth": 0,
-                "paddingLeft": 8,
-                "textAlign": "left",
+                "alignItems": "center",
+                "justifyContent": "center",
               },
               {
-                "color": "rgba(73, 69, 79, 1)",
+                "height": 24,
+                "width": 24,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "opacity": 1,
+                  "transform": [
+                    {
+                      "rotate": "0deg",
+                    },
+                  ],
+                },
+              ]
+            }
+          >
+            <View
+              style={
+                [
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                  },
+                  {
+                    "height": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                    "width": 24,
+                  },
+                ]
+              }
+            >
+              <Image
+                accessibilityIgnoresInvertColors={true}
+                resizeMode="contain"
+                source={
+                  {
+                    "testUri": "../../../src/assets/back-chevron.png",
+                  }
+                }
+                style={
+                  {
+                    "height": 21,
+                    "tintColor": "rgba(29, 27, 32, 1)",
+                    "width": 21,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    style={
+      [
+        {
+          "flex": 1,
+          "paddingHorizontal": 12,
+        },
+        {
+          "paddingHorizontal": 0,
+        },
+        [
+          {
+            "marginLeft": 12,
+          },
+          false,
+          undefined,
+        ],
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      numberOfLines={1}
+      role="heading"
+      style={
+        [
+          {
+            "textAlign": "left",
+          },
+          {
+            "color": "rgba(29, 27, 32, 1)",
+            "writingDirection": "ltr",
+          },
+          [
+            {
+              "fontFamily": "System",
+              "fontSize": 22,
+              "fontWeight": "400",
+              "letterSpacing": 0,
+              "lineHeight": 28,
+            },
+            [
+              {
+                "color": "rgba(29, 27, 32, 1)",
                 "fontFamily": "System",
-                "fontSize": 16,
+                "fontSize": 22,
                 "fontWeight": "400",
-                "letterSpacing": 0.15,
-                "lineHeight": 0,
+                "letterSpacing": 0,
+                "lineHeight": 28,
               },
+              undefined,
+            ],
+          ],
+        ]
+      }
+    >
+      Examples
+    </Text>
+  </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "margin": 6,
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": undefined,
+          "height": 40,
+          "width": 40,
+        },
+        {
+          "borderColor": "rgba(202, 196, 208, 1)",
+          "borderRadius": 20,
+          "borderWidth": 0,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      centered={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        {
+          "bottom": 6,
+          "left": 6,
+          "right": 6,
+          "top": 6,
+        }
+      }
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          [
+            {
+              "alignItems": "center",
+              "flexGrow": 1,
+              "justifyContent": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+    >
+      <View
+        style={
+          {
+            "opacity": 1,
+          }
+        }
+      >
+        <View
+          style={
+            [
               {
-                "minHeight": 56,
-                "paddingLeft": 0,
+                "alignItems": "center",
+                "justifyContent": "center",
+              },
+              {
+                "height": 24,
+                "width": 24,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "opacity": 1,
+                  "transform": [
+                    {
+                      "rotate": "0deg",
+                    },
+                  ],
+                },
+              ]
+            }
+          >
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "rgba(73, 69, 79, 1)",
+                    "fontSize": 24,
+                  },
+                  [
+                    {
+                      "lineHeight": 24,
+                      "transform": [
+                        {
+                          "scaleX": 1,
+                        },
+                      ],
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                    },
+                  ],
+                ]
+              }
+            >
+              menu
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`AppbarAction should be rendered with custom color 1`] = `
+<View
+  collapsable={false}
+  style={
+    [
+      {},
+      {
+        "height": 64,
+      },
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+      {
+        "paddingBottom": undefined,
+        "paddingLeft": 4,
+        "paddingRight": 4,
+        "paddingTop": undefined,
+      },
+      {},
+      {},
+      {
+        "backgroundColor": "rgba(254, 247, 255, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(254, 247, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "margin": 6,
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": undefined,
+          "height": 40,
+          "width": 40,
+        },
+        {
+          "borderColor": "rgba(202, 196, 208, 1)",
+          "borderRadius": 20,
+          "borderWidth": 0,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": true,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      centered={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        {
+          "bottom": 6,
+          "left": 6,
+          "right": 6,
+          "top": 6,
+        }
+      }
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          [
+            {
+              "alignItems": "center",
+              "flexGrow": 1,
+              "justifyContent": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="appbar-action"
+    >
+      <View
+        style={
+          {
+            "opacity": 1,
+          }
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "justifyContent": "center",
+              },
+              {
+                "height": 24,
+                "width": 24,
               },
-              undefined,
             ]
           }
-          testID="search-bar"
-          underlineColorAndroid="transparent"
-          value=""
-        />
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "opacity": 1,
+                  "transform": [
+                    {
+                      "rotate": "0deg",
+                    },
+                  ],
+                },
+              ]
+            }
+          >
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "purple",
+                    "fontSize": 24,
+                  },
+                  [
+                    {
+                      "lineHeight": 24,
+                      "transform": [
+                        {
+                          "scaleX": 1,
+                        },
+                      ],
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                    },
+                  ],
+                ]
+              }
+            >
+              menu
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`AppbarAction should be rendered with default theme color 1`] = `
+<View
+  collapsable={false}
+  style={
+    [
+      {},
+      {
+        "height": 64,
+      },
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+      {
+        "paddingBottom": undefined,
+        "paddingLeft": 4,
+        "paddingRight": 4,
+        "paddingTop": undefined,
+      },
+      {},
+      {},
+      {
+        "backgroundColor": "rgba(254, 247, 255, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(254, 247, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "margin": 6,
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": undefined,
+          "height": 40,
+          "width": 40,
+        },
+        {
+          "borderColor": "rgba(202, 196, 208, 1)",
+          "borderRadius": 20,
+          "borderWidth": 0,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": true,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      centered={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        {
+          "bottom": 6,
+          "left": 6,
+          "right": 6,
+          "top": 6,
+        }
+      }
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          [
+            {
+              "alignItems": "center",
+              "flexGrow": 1,
+              "justifyContent": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="appbar-action"
+    >
+      <View
+        style={
+          {
+            "opacity": 1,
+          }
+        }
+      >
         <View
-          pointerEvents="none"
           style={
             [
               {
-                "marginLeft": 16,
-                "position": "absolute",
-                "right": 0,
+                "alignItems": "center",
+                "justifyContent": "center",
+              },
+              {
+                "height": 24,
+                "width": 24,
               },
-              false,
             ]
           }
-          testID="search-bar-icon-wrapper"
         >
           <View
             collapsable={false}
             style={
-              {
-                "backgroundColor": "transparent",
-                "borderRadius": 20,
-                "height": 40,
-                "margin": 6,
-                "shadowColor": "#000",
-                "shadowOffset": {
-                  "height": 0,
-                  "width": 0,
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
                 },
-                "shadowOpacity": 0,
-                "shadowRadius": 0,
-                "width": 40,
-              }
+                {
+                  "opacity": 1,
+                  "transform": [
+                    {
+                      "rotate": "0deg",
+                    },
+                  ],
+                },
+              ]
             }
-            testID="search-bar-clear-icon-container-outer-layer"
           >
-            <View
-              collapsable={false}
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
               style={
-                {
-                  "backgroundColor": "transparent",
-                  "borderColor": "rgba(121, 116, 126, 1)",
-                  "borderRadius": 20,
-                  "borderWidth": 0,
-                  "elevation": 0,
-                  "flex": 1,
-                  "overflow": "hidden",
-                  "shadowColor": "#000",
-                  "shadowOffset": {
-                    "height": 0,
-                    "width": 0,
-                  },
-                  "shadowOpacity": 0,
-                  "shadowRadius": 0,
-                }
-              }
-              testID="search-bar-clear-icon-container"
-            >
-              <View
-                accessibilityComponentType="button"
-                accessibilityLabel="clear"
-                accessibilityRole="button"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": false,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityTraits="button"
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                centered={true}
-                collapsable={false}
-                focusable={true}
-                hitSlop={
+                [
                   {
-                    "bottom": 6,
-                    "left": 6,
-                    "right": 6,
-                    "top": 6,
-                  }
-                }
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
+                    "color": "rgba(73, 69, 79, 1)",
+                    "fontSize": 24,
+                  },
                   [
                     {
-                      "overflow": "hidden",
-                    },
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexGrow": 1,
-                        "justifyContent": "center",
-                      },
-                      undefined,
-                    ],
-                  ]
-                }
-                testID="search-bar-clear-icon"
-              >
-                <Text
-                  accessibilityElementsHidden={true}
-                  importantForAccessibility="no-hide-descendants"
-                  pointerEvents="none"
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "rgba(255, 255, 255, 0)",
-                        "fontSize": 24,
-                      },
-                      [
-                        {
-                          "lineHeight": 24,
-                          "transform": [
-                            {
-                              "scaleX": 1,
-                            },
-                          ],
-                        },
+                      "lineHeight": 24,
+                      "transform": [
                         {
-                          "backgroundColor": "transparent",
+                          "scaleX": 1,
                         },
                       ],
-                    ]
-                  }
-                >
-                  close
-                </Text>
-              </View>
-            </View>
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                    },
+                  ],
+                ]
+              }
+            >
+              menu
+            </Text>
           </View>
         </View>
       </View>
@@ -404,455 +1473,521 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
 </View>
 `;
 
-exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and AppbarAction 1`] = `
+exports[`AppbarAction should be rendered with specific theme color if is leading 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(255, 251, 254, 1)",
-      "height": 64,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="surface-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+    [
+      {},
+      {
+        "height": 64,
+      },
       {
         "alignItems": "center",
-        "backgroundColor": "rgba(255, 251, 254, 1)",
-        "flex": 1,
         "flexDirection": "row",
+      },
+      {
         "paddingBottom": undefined,
-        "paddingHorizontal": 4,
-        "paddingLeft": undefined,
-        "paddingRight": undefined,
+        "paddingLeft": 4,
+        "paddingRight": 4,
         "paddingTop": undefined,
-        "shadowColor": "#000",
+      },
+      {},
+      {},
+      {
+        "backgroundColor": "rgba(254, 247, 255, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
-      }
-    }
-    testID="surface"
-  >
-    <View
-      collapsable={false}
-      style={
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
         {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "#000",
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(254, 247, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
           },
           "shadowOpacity": 0,
           "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "margin": 6,
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": undefined,
+          "height": 40,
           "width": 40,
+        },
+        {
+          "borderColor": "rgba(202, 196, 208, 1)",
+          "borderRadius": 20,
+          "borderWidth": 0,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": true,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      centered={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        {
+          "bottom": 6,
+          "left": 6,
+          "right": 6,
+          "top": 6,
         }
       }
-      testID="icon-button-container-outer-layer"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          [
+            {
+              "alignItems": "center",
+              "flexGrow": 1,
+              "justifyContent": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="appbar-action"
     >
       <View
-        collapsable={false}
         style={
           {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(121, 116, 126, 1)",
-            "borderRadius": 20,
-            "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+            "opacity": 1,
           }
         }
-        testID="icon-button-container"
       >
         <View
-          accessibilityComponentType="button"
-          accessibilityLabel="Back"
-          accessibilityRole="button"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityTraits="button"
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
-            {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
           style={
             [
               {
-                "overflow": "hidden",
+                "alignItems": "center",
+                "justifyContent": "center",
+              },
+              {
+                "height": 24,
+                "width": 24,
               },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
             ]
           }
-          testID="icon-button"
         >
           <View
+            collapsable={false}
             style={
               [
-                {
-                  "alignItems": "center",
-                  "justifyContent": "center",
-                },
-                {
-                  "height": 24,
-                  "width": 24,
-                },
-              ]
-            }
-          >
-            <View
-              collapsable={false}
-              style={
                 {
                   "bottom": 0,
                   "left": 0,
-                  "opacity": 1,
                   "position": "absolute",
                   "right": 0,
                   "top": 0,
+                },
+                {
+                  "opacity": 1,
                   "transform": [
                     {
                       "rotate": "0deg",
                     },
                   ],
-                }
-              }
-              testID="cross-fade-icon-current"
-            >
-              <View
-                style={
+                },
+              ]
+            }
+          >
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                    "fontSize": 24,
+                  },
                   [
                     {
-                      "alignItems": "center",
-                      "justifyContent": "center",
-                    },
-                    {
-                      "height": 24,
+                      "lineHeight": 24,
                       "transform": [
                         {
                           "scaleX": 1,
                         },
                       ],
-                      "width": 24,
                     },
-                  ]
-                }
-              >
-                <Image
-                  accessibilityIgnoresInvertColors={true}
-                  source={
                     {
-                      "testUri": "../../../src/assets/back-chevron.png",
-                    }
-                  }
-                  style={
-                    [
-                      {
-                        "resizeMode": "contain",
-                      },
-                      {
-                        "height": 21,
-                        "tintColor": "rgba(28, 27, 31, 1)",
-                        "width": 21,
-                      },
-                    ]
-                  }
-                />
-              </View>
-            </View>
+                      "backgroundColor": "transparent",
+                    },
+                  ],
+                ]
+              }
+            >
+              menu
+            </Text>
           </View>
         </View>
       </View>
     </View>
+  </View>
+</View>
+`;
+
+exports[`AppbarAction should render AppbarBackAction with custom color 1`] = `
+<View
+  collapsable={false}
+  style={
+    [
+      {},
+      {
+        "height": 64,
+      },
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+      {
+        "paddingBottom": undefined,
+        "paddingLeft": 4,
+        "paddingRight": 4,
+        "paddingTop": undefined,
+      },
+      {},
+      {},
+      {
+        "backgroundColor": "rgba(254, 247, 255, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(254, 247, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "margin": 6,
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": undefined,
+          "height": 40,
+          "width": 40,
+        },
+        {
+          "borderColor": "rgba(202, 196, 208, 1)",
+          "borderRadius": 20,
+          "borderWidth": 0,
+        },
+        undefined,
+      ]
+    }
+  >
     <View
-      pointerEvents="box-none"
+      accessibilityLabel="Back"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": true,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      centered={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        {
+          "bottom": 6,
+          "left": 6,
+          "right": 6,
+          "top": 6,
+        }
+      }
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
-            "flex": 1,
-            "paddingHorizontal": 12,
-          },
-          {
-            "paddingHorizontal": 0,
+            "overflow": "hidden",
           },
           [
             {
-              "marginLeft": 12,
+              "alignItems": "center",
+              "flexGrow": 1,
+              "justifyContent": "center",
             },
-            false,
             undefined,
           ],
         ]
       }
-      testID="appbar-content"
-    >
-      <Text
-        accessibilityRole="header"
-        accessibilityTraits="header"
-        accessible={true}
-        numberOfLines={1}
-        style={
-          [
-            {
-              "textAlign": "left",
-            },
-            {
-              "color": "rgba(28, 27, 31, 1)",
-              "writingDirection": "ltr",
-            },
-            [
-              {
-                "fontFamily": "System",
-                "fontSize": 22,
-                "fontWeight": "400",
-                "letterSpacing": 0,
-                "lineHeight": 28,
-              },
-              [
-                {
-                  "color": "rgba(28, 27, 31, 1)",
-                  "fontFamily": "System",
-                  "fontSize": 22,
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                  "lineHeight": 28,
-                },
-                false,
-                undefined,
-              ],
-            ],
-          ]
-        }
-        testID="appbar-content-title-text"
-      >
-        Examples
-      </Text>
-    </View>
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
-      }
-      testID="icon-button-container-outer-layer"
+      testID="appbar-action"
     >
       <View
-        collapsable={false}
         style={
           {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(121, 116, 126, 1)",
-            "borderRadius": 20,
-            "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+            "opacity": 1,
           }
         }
-        testID="icon-button-container"
       >
         <View
-          accessibilityComponentType="button"
-          accessibilityRole="button"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityTraits="button"
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
-            {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
           style={
             [
               {
-                "overflow": "hidden",
+                "alignItems": "center",
+                "justifyContent": "center",
+              },
+              {
+                "height": 24,
+                "width": 24,
               },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
             ]
           }
-          testID="icon-button"
         >
           <View
+            collapsable={false}
             style={
               [
-                {
-                  "alignItems": "center",
-                  "justifyContent": "center",
-                },
-                {
-                  "height": 24,
-                  "width": 24,
-                },
-              ]
-            }
-          >
-            <View
-              collapsable={false}
-              style={
                 {
                   "bottom": 0,
                   "left": 0,
-                  "opacity": 1,
                   "position": "absolute",
                   "right": 0,
                   "top": 0,
+                },
+                {
+                  "opacity": 1,
                   "transform": [
                     {
                       "rotate": "0deg",
                     },
                   ],
-                }
-              }
-              testID="cross-fade-icon-current"
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
-                  [
-                    {
-                      "color": "rgba(73, 69, 79, 1)",
-                      "fontSize": 24,
-                    },
-                    [
-                      {
-                        "lineHeight": 24,
-                        "transform": [
-                          {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
+                },
+              ]
+            }
+          >
+            <View
+              style={
+                [
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                  },
+                  {
+                    "height": 24,
+                    "transform": [
                       {
-                        "backgroundColor": "transparent",
+                        "scaleX": 1,
                       },
                     ],
-                  ]
+                    "width": 24,
+                  },
+                ]
+              }
+            >
+              <Image
+                accessibilityIgnoresInvertColors={true}
+                resizeMode="contain"
+                source={
+                  {
+                    "testUri": "../../../src/assets/back-chevron.png",
+                  }
+                }
+                style={
+                  {
+                    "height": 21,
+                    "tintColor": "purple",
+                    "width": 21,
+                  }
                 }
-              >
-                menu
-              </Text>
+              />
             </View>
           </View>
         </View>
diff --git a/src/components/__tests__/Appbar/react-native-safe-area-context-jest-mock.d.ts b/src/components/__tests__/Appbar/react-native-safe-area-context-jest-mock.d.ts
deleted file mode 100644
index 12480d5c2a..0000000000
--- a/src/components/__tests__/Appbar/react-native-safe-area-context-jest-mock.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-declare module 'react-native-safe-area-context/jest/mock' {
-  export default mockSafeAreaContext = {
-    SafeAreaProvider: React.Component,
-  };
-}
diff --git a/src/components/__tests__/Avatar.test.tsx b/src/components/__tests__/Avatar.test.tsx
index 96d69582b6..dc437b2dd9 100644
--- a/src/components/__tests__/Avatar.test.tsx
+++ b/src/components/__tests__/Avatar.test.tsx
@@ -1,9 +1,10 @@
-import * as React from 'react';
 import { StyleSheet } from 'react-native';
 
-import { fireEvent, render } from '@testing-library/react-native';
+import { describe, expect, it, jest } from '@jest/globals';
+import { fireEvent } from '@testing-library/react-native';
 
-import { red500 } from '../../styles/themes/v2/colors';
+import { render, screen } from '../../test-utils';
+import { red500 } from '../../theme/colors';
 import * as Avatar from '../Avatar/Avatar';
 
 const styles = StyleSheet.create({
@@ -12,48 +13,52 @@ const styles = StyleSheet.create({
   },
 });
 
-it('renders avatar with text', () => {
-  const tree = render(<Avatar.Text label="XD" />).toJSON();
+it('renders avatar with text', async () => {
+  const tree = (await render(<Avatar.Text label="XD" />)).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders avatar with text and custom size', () => {
-  const tree = render(<Avatar.Text size={96} label="XD" />).toJSON();
+it('renders avatar with text and custom size', async () => {
+  const tree = (await render(<Avatar.Text size={96} label="XD" />)).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders avatar with text and custom background color', () => {
-  const tree = render(
-    <Avatar.Text style={styles.bgColor} label="XD" />
+it('renders avatar with text and custom background color', async () => {
+  const tree = (
+    await render(<Avatar.Text style={styles.bgColor} label="XD" />)
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders avatar with text and custom colors', () => {
-  const tree = render(<Avatar.Text color="#FFFFFF" label="XD" />).toJSON();
+it('renders avatar with text and custom colors', async () => {
+  const tree = (
+    await render(<Avatar.Text color="#FFFFFF" label="XD" />)
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders avatar with icon', () => {
-  const tree = render(<Avatar.Icon icon="information" />).toJSON();
+it('renders avatar with icon', async () => {
+  const tree = (await render(<Avatar.Icon icon="information" />)).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders avatar with icon and custom background color', () => {
-  const tree = render(
-    <Avatar.Icon style={styles.bgColor} icon="information" />
+it('renders avatar with icon and custom background color', async () => {
+  const tree = (
+    await render(<Avatar.Icon style={styles.bgColor} icon="information" />)
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders avatar with image', () => {
-  const tree = render(<Avatar.Image source={{ uri: 'avatar.png' }} />).toJSON();
+it('renders avatar with image', async () => {
+  const tree = (
+    await render(<Avatar.Image source={{ uri: 'avatar.png' }} />)
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
@@ -61,8 +66,8 @@ it('renders avatar with image', () => {
 describe('AvatarImage listener', () => {
   const onListenerMock = jest.fn();
 
-  it('onError should be called', () => {
-    const { getByTestId } = render(
+  it('onError should be called', async () => {
+    await render(
       <Avatar.Image
         testID={'avatar-image'}
         source={{ uri: 'avatar.png' }}
@@ -74,12 +79,12 @@ describe('AvatarImage listener', () => {
         onProgress={onListenerMock}
       />
     );
-    fireEvent(getByTestId('avatar-image'), 'onError');
+    await fireEvent(screen.getByTestId('avatar-image'), 'onError');
     expect(onListenerMock).toHaveBeenCalled();
   });
 
-  it('onLayout should be called', () => {
-    const { getByTestId } = render(
+  it('onLayout should be called', async () => {
+    await render(
       <Avatar.Image
         testID={'avatar-image'}
         source={{ uri: 'avatar.png' }}
@@ -91,12 +96,12 @@ describe('AvatarImage listener', () => {
         onProgress={onListenerMock}
       />
     );
-    fireEvent(getByTestId('avatar-image'), 'onLayout');
+    await fireEvent(screen.getByTestId('avatar-image'), 'onLayout');
     expect(onListenerMock).toHaveBeenCalled();
   });
 
-  it('onLoad should be called', () => {
-    const { getByTestId } = render(
+  it('onLoad should be called', async () => {
+    await render(
       <Avatar.Image
         testID={'avatar-image'}
         source={{ uri: 'avatar.png' }}
@@ -108,12 +113,12 @@ describe('AvatarImage listener', () => {
         onProgress={onListenerMock}
       />
     );
-    fireEvent(getByTestId('avatar-image'), 'onLoad');
+    await fireEvent(screen.getByTestId('avatar-image'), 'onLoad');
     expect(onListenerMock).toHaveBeenCalled();
   });
 
-  it('onLoadEnd should be called', () => {
-    const { getByTestId } = render(
+  it('onLoadEnd should be called', async () => {
+    await render(
       <Avatar.Image
         testID={'avatar-image'}
         source={{ uri: 'avatar.png' }}
@@ -125,12 +130,12 @@ describe('AvatarImage listener', () => {
         onProgress={onListenerMock}
       />
     );
-    fireEvent(getByTestId('avatar-image'), 'onLoadEnd');
+    await fireEvent(screen.getByTestId('avatar-image'), 'onLoadEnd');
     expect(onListenerMock).toHaveBeenCalled();
   });
 
-  it('onLoadStart should be called', () => {
-    const { getByTestId } = render(
+  it('onLoadStart should be called', async () => {
+    await render(
       <Avatar.Image
         testID={'avatar-image'}
         source={{ uri: 'avatar.png' }}
@@ -142,12 +147,12 @@ describe('AvatarImage listener', () => {
         onProgress={onListenerMock}
       />
     );
-    fireEvent(getByTestId('avatar-image'), 'onLoadStart');
+    await fireEvent(screen.getByTestId('avatar-image'), 'onLoadStart');
     expect(onListenerMock).toHaveBeenCalled();
   });
 
-  it('onProgress should be called', () => {
-    const { getByTestId } = render(
+  it('onProgress should be called', async () => {
+    await render(
       <Avatar.Image
         testID={'avatar-image'}
         source={{ uri: 'avatar.png' }}
@@ -159,7 +164,7 @@ describe('AvatarImage listener', () => {
         onProgress={onListenerMock}
       />
     );
-    fireEvent(getByTestId('avatar-image'), 'onProgress');
+    await fireEvent(screen.getByTestId('avatar-image'), 'onProgress');
     expect(onListenerMock).toHaveBeenCalled();
   });
 });
diff --git a/src/components/__tests__/Badge.test.tsx b/src/components/__tests__/Badge.test.tsx
index 32730659a1..2b2ff26ca2 100644
--- a/src/components/__tests__/Badge.test.tsx
+++ b/src/components/__tests__/Badge.test.tsx
@@ -1,42 +1,67 @@
-import * as React from 'react';
+import { expect, it } from '@jest/globals';
 
-import { render } from '@testing-library/react-native';
-
-import { red500 } from '../../styles/themes/v2/colors';
+import { render, screen } from '../../test-utils';
+import { red500 } from '../../theme/colors';
 import Badge from '../Badge';
 
-it('renders badge', () => {
-  const tree = render(<Badge />).toJSON();
+it('renders badge', async () => {
+  const tree = (await render(<Badge />)).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders badge with content', () => {
-  const tree = render(<Badge>3</Badge>).toJSON();
+it('renders badge with content', async () => {
+  const tree = (await render(<Badge>3</Badge>)).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders badge in different size', () => {
-  const tree = render(<Badge size={12}>3</Badge>).toJSON();
+it('renders badge as hidden', async () => {
+  const tree = (await render(<Badge visible={false}>3</Badge>)).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders badge as hidden', () => {
-  const tree = render(
-    <Badge visible={false} size={12}>
-      3
-    </Badge>
+it('renders badge in different color', async () => {
+  const tree = (
+    await render(<Badge style={{ backgroundColor: red500 }}>3</Badge>)
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders badge in different color', () => {
-  const tree = render(
-    <Badge style={{ backgroundColor: red500 }}>3</Badge>
-  ).toJSON();
+it('applies small dot dimensions when no children', async () => {
+  await render(<Badge testID="badge" />);
 
-  expect(tree).toMatchSnapshot();
+  expect(screen.getByTestId('badge')).toHaveStyle({
+    height: 6,
+    minWidth: 6,
+    borderRadius: 9999,
+  });
+});
+
+it('applies large pill dimensions when children are present', async () => {
+  await render(<Badge testID="badge">3</Badge>);
+
+  expect(screen.getByTestId('badge')).toHaveStyle({
+    height: 16,
+    minWidth: 16,
+    paddingHorizontal: 4,
+    fontSize: 11,
+    lineHeight: 16,
+    borderRadius: 9999,
+  });
+});
+
+it('clips oversized label via maxWidth', async () => {
+  await render(<Badge testID="badge">9999999</Badge>);
+
+  expect(screen.getByTestId('badge')).toHaveStyle({ maxWidth: 36 });
+});
+
+it('does not apply typography or padding to dot badge', async () => {
+  await render(<Badge testID="badge" />);
+
+  expect(screen.getByTestId('badge')).not.toHaveStyle({ paddingHorizontal: 4 });
+  expect(screen.getByTestId('badge')).not.toHaveStyle({ fontSize: 11 });
 });
diff --git a/src/components/__tests__/Banner.test.tsx b/src/components/__tests__/Banner.test.tsx
index 8e0d8c90d1..5cbd07b387 100644
--- a/src/components/__tests__/Banner.test.tsx
+++ b/src/components/__tests__/Banner.test.tsx
@@ -1,105 +1,126 @@
-import * as React from 'react';
-import { Animated, Image } from 'react-native';
-
-import { act, render } from '@testing-library/react-native';
-
+import { Image } from 'react-native';
+
+import {
+  afterAll,
+  beforeAll,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  jest,
+} from '@jest/globals';
+import { act } from '@testing-library/react-native';
+
+import { render } from '../../test-utils';
 import Banner from '../Banner';
 
-it('renders hidden banner, without action buttons and without image', () => {
-  const tree = render(
-    <Banner visible={false}>
-      Two line text string with two actions. One to two lines is preferable on
-      mobile.
-    </Banner>
+it('renders hidden banner, without action buttons and without image', async () => {
+  const tree = (
+    await render(
+      <Banner visible={false}>
+        Two line text string with two actions. One to two lines is preferable on
+        mobile.
+      </Banner>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders visible banner, without action buttons and without image', () => {
-  const tree = render(
-    <Banner visible>
-      Two line text string with two actions. One to two lines is preferable on
-      mobile.
-    </Banner>
+it('renders visible banner, without action buttons and without image', async () => {
+  const tree = (
+    await render(
+      <Banner visible>
+        Two line text string with two actions. One to two lines is preferable on
+        mobile.
+      </Banner>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders visible banner, with action buttons and without image', () => {
-  const tree = render(
-    <Banner
-      visible
-      actions={[
-        { label: 'first', onPress: () => {} },
-        { label: 'second', onPress: () => {} },
-      ]}
-    >
-      Two line text string with two actions. One to two lines is preferable on
-      mobile.
-    </Banner>
+it('renders visible banner, with action buttons and without image', async () => {
+  const tree = (
+    await render(
+      <Banner
+        visible
+        actions={[
+          { label: 'first', onPress: () => {} },
+          { label: 'second', onPress: () => {} },
+        ]}
+      >
+        Two line text string with two actions. One to two lines is preferable on
+        mobile.
+      </Banner>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders visible banner, without action buttons and with image', () => {
-  const tree = render(
-    <Banner
-      visible
-      icon={({ size }) => (
-        <Image
-          source={{ uri: 'https://callstack.com/images/team/Satya.png' }}
-          style={{ width: size, height: size }}
-          accessibilityIgnoresInvertColors
-        />
-      )}
-    >
-      Two line text string with two actions. One to two lines is preferable on
-      mobile.
-    </Banner>
+it('renders visible banner, without action buttons and with image', async () => {
+  const tree = (
+    await render(
+      <Banner
+        visible
+        icon={({ size }) => (
+          <Image
+            source={{ uri: 'https://callstack.com/images/team/Satya.png' }}
+            style={{ width: size, height: size }}
+            accessibilityIgnoresInvertColors
+          />
+        )}
+      >
+        Two line text string with two actions. One to two lines is preferable on
+        mobile.
+      </Banner>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders visible banner, with action buttons and with image', () => {
-  const tree = render(
-    <Banner
-      visible
-      icon={({ size }) => (
-        <Image
-          source={{ uri: 'https://callstack.com/images/team/Satya.png' }}
-          style={{ width: size, height: size }}
-          accessibilityIgnoresInvertColors
-        />
-      )}
-      actions={[{ label: 'first', onPress: () => {} }]}
-    >
-      Two line text string with two actions. One to two lines is preferable on
-      mobile.
-    </Banner>
+it('renders visible banner, with action buttons and with image', async () => {
+  const tree = (
+    await render(
+      <Banner
+        visible
+        icon={({ size }) => (
+          <Image
+            source={{ uri: 'https://callstack.com/images/team/Satya.png' }}
+            style={{ width: size, height: size }}
+            accessibilityIgnoresInvertColors
+          />
+        )}
+        actions={[{ label: 'first', onPress: () => {} }]}
+      >
+        Two line text string with two actions. One to two lines is preferable on
+        mobile.
+      </Banner>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('render visible banner, with custom theme', () => {
-  const tree = render(
-    <Banner
-      visible
-      theme={{
-        colors: {
-          text: '#00f',
-          surface: '#ccc',
-          primary: '#043',
-        },
-      }}
-      actions={[{ label: 'first', onPress: () => {} }]}
-    >
-      Custom theme
-    </Banner>
+it('render visible banner, with custom theme', async () => {
+  const tree = (
+    await render(
+      <Banner
+        visible
+        theme={{
+          colors: {
+            onSurface: '#00f',
+            surface: '#ccc',
+            primary: '#043',
+          },
+        }}
+        actions={[{ label: 'first', onPress: () => {} }]}
+      >
+        Custom theme
+      </Banner>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
@@ -126,8 +147,8 @@ describe('animations', () => {
 
   describe('when component is rendered hidden', () => {
     // This behaviour is probably a bug. Needs triage before next version.
-    it('will fire onHideAnimationFinished on mount', () => {
-      render(
+    it('will fire onHideAnimationFinished on mount', async () => {
+      await render(
         <Banner
           onShowAnimationFinished={showCallback}
           onHideAnimationFinished={hideCallback}
@@ -140,15 +161,15 @@ describe('animations', () => {
       expect(showCallback).not.toHaveBeenCalled();
       expect(hideCallback).not.toHaveBeenCalled();
 
-      act(() => {
+      await act(() => {
         jest.runAllTimers();
       });
       expect(showCallback).not.toHaveBeenCalled();
       expect(hideCallback).toHaveBeenCalled();
     });
 
-    it('should fire onShowAnimationFinished upon opening', () => {
-      const tree = render(
+    it('should fire onShowAnimationFinished upon opening', async () => {
+      const view = await render(
         <Banner
           onShowAnimationFinished={showCallback}
           onHideAnimationFinished={hideCallback}
@@ -158,13 +179,13 @@ describe('animations', () => {
         </Banner>
       );
 
-      act(() => {
+      await act(() => {
         jest.runAllTimers();
       });
       expect(showCallback).toHaveBeenCalledTimes(0);
       expect(hideCallback).toHaveBeenCalledTimes(1);
 
-      tree.update(
+      await view.rerender(
         <Banner
           onShowAnimationFinished={showCallback}
           onHideAnimationFinished={hideCallback}
@@ -173,7 +194,7 @@ describe('animations', () => {
           Text
         </Banner>
       );
-      act(() => {
+      await act(() => {
         jest.runAllTimers();
       });
       expect(showCallback).toHaveBeenCalledTimes(1);
@@ -183,8 +204,8 @@ describe('animations', () => {
 
   describe('when component is rendered visible', () => {
     // This behaviour is probably a bug. Needs triage before next version.
-    it('will fire onShowAnimationFinished on mount', () => {
-      render(
+    it('will fire onShowAnimationFinished on mount', async () => {
+      await render(
         <Banner
           onShowAnimationFinished={showCallback}
           onHideAnimationFinished={hideCallback}
@@ -197,15 +218,15 @@ describe('animations', () => {
       expect(showCallback).not.toHaveBeenCalled();
       expect(hideCallback).not.toHaveBeenCalled();
 
-      act(() => {
+      await act(() => {
         jest.runAllTimers();
       });
       expect(showCallback).toHaveBeenCalled();
       expect(hideCallback).not.toHaveBeenCalled();
     });
 
-    it('should fire onHideAnimationFinished upon closing', () => {
-      const tree = render(
+    it('should fire onHideAnimationFinished upon closing', async () => {
+      const view = await render(
         <Banner
           onShowAnimationFinished={showCallback}
           onHideAnimationFinished={hideCallback}
@@ -215,13 +236,13 @@ describe('animations', () => {
         </Banner>
       );
 
-      act(() => {
+      await act(() => {
         jest.runAllTimers();
       });
       expect(showCallback).toHaveBeenCalledTimes(1);
       expect(hideCallback).toHaveBeenCalledTimes(0);
 
-      tree.update(
+      await view.rerender(
         <Banner
           onShowAnimationFinished={showCallback}
           onHideAnimationFinished={hideCallback}
@@ -230,7 +251,7 @@ describe('animations', () => {
           Text
         </Banner>
       );
-      act(() => {
+      await act(() => {
         jest.runAllTimers();
       });
       expect(showCallback).toHaveBeenCalledTimes(1);
@@ -239,8 +260,8 @@ describe('animations', () => {
   });
 
   describe('when the callbacks change while the component is mounted', () => {
-    it('should not cause another open/close animation', () => {
-      const tree = render(
+    it('should not cause another open/close animation', async () => {
+      const view = await render(
         <Banner
           onShowAnimationFinished={showCallback}
           onHideAnimationFinished={hideCallback}
@@ -250,7 +271,7 @@ describe('animations', () => {
         </Banner>
       );
 
-      act(() => {
+      await act(() => {
         jest.runAllTimers();
       });
       expect(showCallback).toHaveBeenCalledTimes(1);
@@ -259,7 +280,7 @@ describe('animations', () => {
       const nextShowCallback = jest.fn();
       const nextHideCallback = jest.fn();
 
-      tree.update(
+      await view.rerender(
         <Banner
           onShowAnimationFinished={nextShowCallback}
           onHideAnimationFinished={nextHideCallback}
@@ -269,7 +290,7 @@ describe('animations', () => {
         </Banner>
       );
 
-      act(() => {
+      await act(() => {
         jest.runAllTimers();
       });
       expect(showCallback).toHaveBeenCalledTimes(1);
@@ -278,8 +299,8 @@ describe('animations', () => {
       expect(nextHideCallback).toHaveBeenCalledTimes(0);
     });
 
-    it('should use the new callbacks upon opening/closing', () => {
-      const tree = render(
+    it('should use the new callbacks upon opening/closing', async () => {
+      const view = await render(
         <Banner
           onShowAnimationFinished={showCallback}
           onHideAnimationFinished={hideCallback}
@@ -289,7 +310,7 @@ describe('animations', () => {
         </Banner>
       );
 
-      act(() => {
+      await act(() => {
         jest.runAllTimers();
       });
       expect(showCallback).toHaveBeenCalledTimes(1);
@@ -298,7 +319,7 @@ describe('animations', () => {
       const nextShowCallback = jest.fn();
       const nextHideCallback = jest.fn();
 
-      tree.update(
+      await view.rerender(
         <Banner
           onShowAnimationFinished={nextShowCallback}
           onHideAnimationFinished={nextHideCallback}
@@ -308,7 +329,7 @@ describe('animations', () => {
         </Banner>
       );
 
-      act(() => {
+      await act(() => {
         jest.runAllTimers();
       });
       expect(showCallback).toHaveBeenCalledTimes(1);
@@ -316,7 +337,7 @@ describe('animations', () => {
       expect(nextShowCallback).toHaveBeenCalledTimes(0);
       expect(nextHideCallback).toHaveBeenCalledTimes(0);
 
-      tree.update(
+      await view.rerender(
         <Banner
           onShowAnimationFinished={nextShowCallback}
           onHideAnimationFinished={nextHideCallback}
@@ -326,7 +347,7 @@ describe('animations', () => {
         </Banner>
       );
 
-      act(() => {
+      await act(() => {
         jest.runAllTimers();
       });
       expect(showCallback).toHaveBeenCalledTimes(1);
@@ -335,34 +356,4 @@ describe('animations', () => {
       expect(nextHideCallback).toHaveBeenCalledTimes(1);
     });
   });
-
-  it('animated value changes correctly', () => {
-    const value = new Animated.Value(1);
-    const { getByTestId } = render(
-      <Banner
-        visible
-        testID="banner"
-        style={[{ transform: [{ scale: value }] }]}
-      >
-        Banner
-      </Banner>
-    );
-    expect(getByTestId('banner-outer-layer')).toHaveStyle({
-      transform: [{ scale: 1 }],
-    });
-
-    Animated.timing(value, {
-      toValue: 1.5,
-      useNativeDriver: false,
-      duration: 200,
-    }).start();
-
-    act(() => {
-      jest.runAllTimers();
-    });
-
-    expect(getByTestId('banner-outer-layer')).toHaveStyle({
-      transform: [{ scale: 1.5 }],
-    });
-  });
 });
diff --git a/src/components/__tests__/BottomNavigation.test.tsx b/src/components/__tests__/BottomNavigation.test.tsx
index 43c1e9383b..1020631055 100644
--- a/src/components/__tests__/BottomNavigation.test.tsx
+++ b/src/components/__tests__/BottomNavigation.test.tsx
@@ -1,12 +1,21 @@
-import * as React from 'react';
-import { Animated, Easing, Platform, StyleSheet } from 'react-native';
-
-import { act, fireEvent, render } from '@testing-library/react-native';
-import color from 'color';
-
-import { getTheme } from '../../core/theming';
-import { red300 } from '../../styles/themes/v2/colors';
-import { MD3Colors } from '../../styles/themes/v3/tokens';
+/* eslint-disable no-restricted-imports -- TODO: remove after BottomNavigation migrates to Reanimated. */
+import {
+  Animated,
+  Easing,
+  Keyboard,
+  Platform,
+  StyleSheet,
+  Text,
+} from 'react-native';
+/* eslint-enable no-restricted-imports */
+import type { KeyboardEvent } from 'react-native';
+
+import { describe, expect, it, jest } from '@jest/globals';
+import { act, fireEvent, userEvent } from '@testing-library/react-native';
+
+import { render, screen } from '../../test-utils';
+import { LightTheme } from '../../theme/schemes';
+import { Palette } from '../../theme/tokens';
 import BottomNavigation from '../BottomNavigation/BottomNavigation';
 import BottomNavigationRouteScreen from '../BottomNavigation/BottomNavigationRouteScreen';
 import {
@@ -18,7 +27,7 @@ import Icon from '../Icon';
 
 const styles = StyleSheet.create({
   backgroundColor: {
-    backgroundColor: red300,
+    backgroundColor: Palette.error60,
   },
 });
 
@@ -34,30 +43,49 @@ const createState = (index: number, length: number) => ({
   })),
 });
 
-it('renders shifting bottom navigation', () => {
-  const tree = render(
-    <BottomNavigation
-      shifting
-      navigationState={createState(0, 5)}
-      onIndexChange={jest.fn()}
-      renderScene={({ route }) => route.title}
-    />
+const renderScene = ({ route }: { route: { title: string } }) => (
+  <Text>{route.title}</Text>
+);
+
+const getTab = (index: number) =>
+  screen.getAllByRole(Platform.OS === 'ios' ? 'button' : 'tab')[index];
+
+const layoutNavigationBar = async () => {
+  await fireEvent(screen.getByTestId('bottom-navigation-bar'), 'layout', {
+    nativeEvent: {
+      layout: { height: 56, width: 360 },
+    },
+  });
+};
+
+it('renders shifting bottom navigation', async () => {
+  const tree = (
+    await render(
+      <BottomNavigation
+        shifting
+        navigationState={createState(0, 5)}
+        onIndexChange={jest.fn()}
+        renderScene={renderScene}
+      />
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders bottom navigation with scene animation', () => {
-  const tree = render(
-    <BottomNavigation
-      shifting
-      sceneAnimationEnabled
-      sceneAnimationType="shifting"
-      sceneAnimationEasing={Easing.ease}
-      navigationState={createState(0, 5)}
-      onIndexChange={jest.fn()}
-      renderScene={({ route }) => route.title}
-    />
+it('renders bottom navigation with scene animation', async () => {
+  const tree = (
+    await render(
+      <BottomNavigation
+        shifting
+        sceneAnimationEnabled
+        sceneAnimationType="shifting"
+        sceneAnimationEasing={Easing.ease}
+        navigationState={createState(0, 5)}
+        onIndexChange={jest.fn()}
+        renderScene={renderScene}
+      />
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
@@ -67,7 +95,7 @@ it('renders bottom navigation with scene animation', () => {
 it.skip('sceneAnimationEnabled matches animation requirements', async () => {
   const ease = Easing.ease;
 
-  const tree = render(
+  await render(
     <BottomNavigation
       shifting
       sceneAnimationEnabled
@@ -75,14 +103,12 @@ it.skip('sceneAnimationEnabled matches animation requirements', async () => {
       sceneAnimationEasing={ease}
       navigationState={createState(1, 5)}
       onIndexChange={jest.fn()}
-      renderScene={({ route }) => route.title}
+      renderScene={renderScene}
     />
   );
 
   // Simulate the button press
-  await act(async () => {
-    fireEvent.press(tree.getByText('Route: 1'));
-  });
+  await userEvent.press(screen.getAllByRole('button')[1]);
 
   // Expect the calls to Animated.parallel
   expect(Animated.parallel).toHaveBeenCalledTimes(2);
@@ -128,38 +154,48 @@ it.skip('sceneAnimationEnabled matches animation requirements', async () => {
   );
 });
 
-it('calls onIndexChange', () => {
+it('calls onIndexChange', async () => {
   const onIndexChange = jest.fn();
-  const tree = render(
+  await render(
     <BottomNavigation
+      testID="bottom-navigation"
+      barTestID="bottom-navigation-bar"
       shifting
       navigationState={createState(0, 5)}
       onIndexChange={onIndexChange}
-      renderScene={({ route }) => route.title}
+      renderScene={renderScene}
     />
   );
+
+  await layoutNavigationBar();
+
   // pressing same index as active navigation state does not call onIndexChange
-  fireEvent(tree.getByText('Route: 0'), 'onPress');
+  await userEvent.press(getTab(0));
   expect(onIndexChange).not.toHaveBeenCalled();
 
-  fireEvent(tree.getByText('Route: 1'), 'onPress');
+  await userEvent.press(getTab(1));
   expect(onIndexChange).toHaveBeenCalledTimes(1);
 });
 
-it('calls onTabPress', () => {
+it('calls onTabPress', async () => {
   const onTabPress = jest.fn();
   const onIndexChange = jest.fn();
 
-  const tree = render(
+  await render(
     <BottomNavigation
+      testID="bottom-navigation"
+      barTestID="bottom-navigation-bar"
       shifting
       onTabPress={onTabPress}
       onIndexChange={onIndexChange}
       navigationState={createState(0, 5)}
-      renderScene={({ route }) => route.title}
+      renderScene={renderScene}
     />
   );
-  fireEvent(tree.getByText('Route: 1'), 'onPress');
+
+  await layoutNavigationBar();
+
+  await userEvent.press(getTab(1));
   expect(onTabPress).toHaveBeenCalled();
   expect(onTabPress).toHaveBeenCalledTimes(1);
   expect(onTabPress).toHaveBeenLastCalledWith(
@@ -173,20 +209,25 @@ it('calls onTabPress', () => {
   );
 });
 
-it('calls onTabLongPress', () => {
+it('calls onTabLongPress', async () => {
   const onTabLongPress = jest.fn();
   const onIndexChange = jest.fn();
 
-  const tree = render(
+  await render(
     <BottomNavigation
+      testID="bottom-navigation"
+      barTestID="bottom-navigation-bar"
       shifting
       onIndexChange={onIndexChange}
       onTabLongPress={onTabLongPress}
       navigationState={createState(0, 5)}
-      renderScene={({ route }) => route.title}
+      renderScene={renderScene}
     />
   );
-  fireEvent(tree.getByText('Route: 2'), 'onLongPress');
+
+  await layoutNavigationBar();
+
+  await userEvent.longPress(getTab(2));
   expect(onTabLongPress).toHaveBeenCalled();
   expect(onTabLongPress).toHaveBeenCalledTimes(1);
   expect(onTabLongPress).toHaveBeenLastCalledWith(
@@ -200,28 +241,30 @@ it('calls onTabLongPress', () => {
   );
 });
 
-it('renders non-shifting bottom navigation', () => {
-  const tree = render(
-    <BottomNavigation
-      shifting={false}
-      navigationState={createState(0, 3)}
-      onIndexChange={jest.fn()}
-      renderScene={({ route }) => route.title}
-    />
+it('renders non-shifting bottom navigation', async () => {
+  const tree = (
+    await render(
+      <BottomNavigation
+        shifting={false}
+        navigationState={createState(0, 3)}
+        onIndexChange={jest.fn()}
+        renderScene={renderScene}
+      />
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('does not crash when shifting is true and the number of tabs in the navigationState is less than 2', () => {
+it('does not crash when shifting is true and the number of tabs in the navigationState is less than 2', async () => {
   jest.spyOn(console, 'warn').mockImplementation(() => {});
 
-  render(
+  await render(
     <BottomNavigation
       shifting={true}
       navigationState={createState(0, 1)}
       onIndexChange={jest.fn()}
-      renderScene={({ route }) => route.title}
+      renderScene={renderScene}
     />
   );
 
@@ -232,324 +275,359 @@ it('does not crash when shifting is true and the number of tabs in the navigatio
   jest.restoreAllMocks();
 });
 
-it('renders custom icon and label in shifting bottom navigation', () => {
-  const tree = render(
-    <BottomNavigation
-      shifting
-      navigationState={createState(0, 5)}
-      onIndexChange={jest.fn()}
-      renderScene={({ route }) => route.title}
-      renderIcon={({ route, color }) => (
-        <Icon color={color} source={route.unfocusedIcon} size={24} />
-      )}
-      renderLabel={({ route, color }) => (
-        <text color={color}>{route.title}</text>
-      )}
-    />
+it('renders custom icon and label in shifting bottom navigation', async () => {
+  const tree = (
+    await render(
+      <BottomNavigation
+        shifting
+        navigationState={createState(0, 5)}
+        onIndexChange={jest.fn()}
+        renderScene={renderScene}
+        renderIcon={({ route, color }) => (
+          <Icon color={color} source={route.unfocusedIcon} size={24} />
+        )}
+        renderLabel={({ route, color }) => (
+          <Text
+            style={{ color: typeof color === 'string' ? color : undefined }}
+          >
+            {route.title}
+          </Text>
+        )}
+      />
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders custom icon and label in non-shifting bottom navigation', () => {
-  const tree = render(
-    <BottomNavigation
-      shifting={false}
-      navigationState={createState(0, 3)}
-      onIndexChange={jest.fn()}
-      renderScene={({ route }) => route.title}
-      renderIcon={({ route, color }) => (
-        <Icon color={color} source={route.unfocusedIcon} size={24} />
-      )}
-      renderLabel={({ route, color }) => (
-        <text color={color}>{route.title}</text>
-      )}
-    />
+it('renders custom icon and label in non-shifting bottom navigation', async () => {
+  const tree = (
+    await render(
+      <BottomNavigation
+        shifting={false}
+        navigationState={createState(0, 3)}
+        onIndexChange={jest.fn()}
+        renderScene={renderScene}
+        renderIcon={({ route, color }) => (
+          <Icon color={color} source={route.unfocusedIcon} size={24} />
+        )}
+        renderLabel={({ route, color }) => (
+          <Text
+            style={{ color: typeof color === 'string' ? color : undefined }}
+          >
+            {route.title}
+          </Text>
+        )}
+      />
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders custom icon and label with custom colors in shifting bottom navigation', () => {
-  const tree = render(
-    <BottomNavigation
-      shifting
-      navigationState={createState(0, 3)}
-      onIndexChange={jest.fn()}
-      renderScene={({ route }) => route.title}
-      activeColor="#FBF7DB"
-      inactiveColor="#853D4B"
-    />
+it('renders custom icon and label with custom colors in shifting bottom navigation', async () => {
+  const tree = (
+    await render(
+      <BottomNavigation
+        shifting
+        navigationState={createState(0, 3)}
+        onIndexChange={jest.fn()}
+        renderScene={renderScene}
+        activeColor="#FBF7DB"
+        inactiveColor="#853D4B"
+      />
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders custom icon and label with custom colors in non-shifting bottom navigation', () => {
-  const tree = render(
-    <BottomNavigation
-      shifting={false}
-      navigationState={createState(0, 3)}
-      onIndexChange={jest.fn()}
-      renderScene={({ route }) => route.title}
-      activeColor="#FBF7DB"
-      inactiveColor="#853D4B"
-    />
+it('renders custom icon and label with custom colors in non-shifting bottom navigation', async () => {
+  const tree = (
+    await render(
+      <BottomNavigation
+        shifting={false}
+        navigationState={createState(0, 3)}
+        onIndexChange={jest.fn()}
+        renderScene={renderScene}
+        activeColor="#FBF7DB"
+        inactiveColor="#853D4B"
+      />
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('hides labels in shifting bottom navigation', () => {
-  const tree = render(
-    <BottomNavigation
-      shifting
-      labeled={false}
-      navigationState={createState(0, 3)}
-      onIndexChange={jest.fn()}
-      renderScene={({ route }) => route.title}
-    />
+it('hides labels in shifting bottom navigation', async () => {
+  const tree = (
+    await render(
+      <BottomNavigation
+        shifting
+        labeled={false}
+        navigationState={createState(0, 3)}
+        onIndexChange={jest.fn()}
+        renderScene={renderScene}
+      />
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('hides labels in non-shifting bottom navigation', () => {
-  const tree = render(
-    <BottomNavigation
-      shifting={false}
-      labeled={false}
-      navigationState={createState(0, 3)}
-      onIndexChange={jest.fn()}
-      renderScene={({ route }) => route.title}
-    />
+it('hides labels in non-shifting bottom navigation', async () => {
+  const tree = (
+    await render(
+      <BottomNavigation
+        shifting={false}
+        labeled={false}
+        navigationState={createState(0, 3)}
+        onIndexChange={jest.fn()}
+        renderScene={renderScene}
+      />
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('should have appropriate display style according to the visibility on web', () => {
+it('should have appropriate display style according to the visibility on web', async () => {
   const originalPlatform = Platform.OS;
   Platform.OS = 'web';
 
-  const { getByTestId, rerender } = render(
+  const { rerender } = await render(
     <BottomNavigationRouteScreen visibility={1} index={0} />
   );
 
-  const wrapper = getByTestId('RouteScreen: 0');
+  const wrapper = screen.getByTestId('RouteScreen: 0');
 
   expect(wrapper).toHaveStyle({ display: 'flex' });
 
-  rerender(<BottomNavigationRouteScreen visibility={0} index={0} />);
+  await rerender(<BottomNavigationRouteScreen visibility={0} index={0} />);
   expect(wrapper).toHaveStyle({ display: 'none' });
 
   Platform.OS = originalPlatform;
 });
 
-it('should have labelMaxFontSizeMultiplier passed to label', () => {
+it('should have labelMaxFontSizeMultiplier passed to label', async () => {
   const labelMaxFontSizeMultiplier = 2;
-  const { getAllByText } = render(
+  await render(
     <BottomNavigation
       shifting={false}
       labeled={true}
       labelMaxFontSizeMultiplier={labelMaxFontSizeMultiplier}
       navigationState={createState(0, 3)}
       onIndexChange={jest.fn()}
-      renderScene={({ route }) => route.title}
+      renderScene={renderScene}
     />
   );
 
-  const label = getAllByText('Route: 0')[0];
+  const label = screen.getAllByText('Route: 0').find(
+    // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+    (item) => item.props.maxFontSizeMultiplier === labelMaxFontSizeMultiplier
+  );
 
-  expect(label.props.maxFontSizeMultiplier).toBe(labelMaxFontSizeMultiplier);
+  expect(label).toBeTruthy();
 });
 
-it('renders custom background color passed to barStyle property', () => {
-  const { getByTestId } = render(
+it('renders custom background color passed to barStyle property', async () => {
+  const { toJSON } = await render(
     <BottomNavigation
+      testID="bottom-navigation"
       shifting={false}
       labeled={true}
       navigationState={createState(0, 3)}
       onIndexChange={jest.fn()}
-      renderScene={({ route }) => route.title}
+      renderScene={renderScene}
       barStyle={styles.backgroundColor}
-      testID={'bottom-navigation'}
     />
   );
 
-  const wrapper = getByTestId('bottom-navigation-bar-content');
-  expect(wrapper).toHaveStyle({ backgroundColor: red300 });
+  expect(toJSON()).toMatchSnapshot();
 });
 
-it('renders a single tab', () => {
-  const { queryByTestId } = render(
-    <BottomNavigation
-      shifting={false}
-      navigationState={createState(0, 1)}
-      onIndexChange={jest.fn()}
-      renderScene={({ route }) => route.title}
-      testID={'bottom-navigation'}
+it('uses the rendered bar height when hiding it for the keyboard', async () => {
+  let handleKeyboardShow: ((event: KeyboardEvent) => void) | undefined;
+  const addKeyboardListener = Keyboard.addListener.bind(Keyboard);
+  const keyboardListenerSpy = jest
+    .spyOn(Keyboard, 'addListener')
+    .mockImplementation((event, listener) => {
+      if (event.endsWith('Show')) {
+        handleKeyboardShow = listener;
+      }
+
+      return addKeyboardListener(event, listener);
+    });
+
+  await render(
+    <BottomNavigation.Bar
+      navigationState={createState(0, 3)}
+      onTabPress={jest.fn()}
+      keyboardHidesNavigationBar
+      style={{ height: 96 }}
+      testID="bottom-navigation"
     />
   );
 
-  expect(queryByTestId('bottom-navigation')).not.toBeNull();
-});
+  const navigation = screen.getByTestId('bottom-navigation');
 
-it('renders bottom navigation with getLazy', () => {
-  const tree = render(
-    <BottomNavigation
-      navigationState={createState(0, 5)}
-      onIndexChange={jest.fn()}
-      renderScene={({ route }) => route.title}
-      getLazy={({ route }) => route.key === 'key-2'}
-    />
-  );
+  await fireEvent(navigation, 'layout', {
+    nativeEvent: {
+      layout: { height: 72, width: 360 },
+    },
+  });
 
-  expect(tree).toMatchSnapshot();
+  await act(() => {
+    handleKeyboardShow?.({
+      duration: 0,
+      easing: 'keyboard',
+      endCoordinates: {
+        screenX: 0,
+        screenY: 500,
+        width: 360,
+        height: 300,
+      },
+    });
+    jest.runAllTimers();
+  });
+
+  expect(navigation).toHaveStyle({
+    height: 96,
+    position: 'absolute',
+    transform: [{ translateY: 72 }],
+  });
 
-  expect(tree.queryByTestId('RouteScreen: 2')).toBeNull();
+  keyboardListenerSpy.mockRestore();
 });
 
-it('applies maxTabBarWidth styling if compact prop is truthy', () => {
-  const { getByTestId } = render(
+it('renders a single tab', async () => {
+  await render(
     <BottomNavigation
-      navigationState={createState(0, 5)}
-      onIndexChange={jest.fn()}
-      renderScene={({ route }) => route.title}
-      getLazy={({ route }) => route.key === 'key-2'}
-      shifting={false}
       testID="bottom-navigation"
-      compact
+      shifting={false}
+      navigationState={createState(0, 1)}
+      onIndexChange={jest.fn()}
+      renderScene={renderScene}
     />
   );
 
-  expect(getByTestId('bottom-navigation-bar-content-wrapper')).toHaveStyle({
-    maxWidth: 480,
-  });
+  expect(screen.getByTestId('bottom-navigation')).toBeOnTheScreen();
 });
 
-it('does not apply maxTabBarWidth styling if compact prop is falsy', () => {
-  const { getByTestId } = render(
+it('renders bottom navigation with getLazy', async () => {
+  const view = await render(
     <BottomNavigation
       navigationState={createState(0, 5)}
       onIndexChange={jest.fn()}
-      renderScene={({ route }) => route.title}
+      renderScene={renderScene}
       getLazy={({ route }) => route.key === 'key-2'}
-      shifting={false}
-      testID="bottom-navigation"
-      compact={false}
     />
   );
 
-  expect(getByTestId('bottom-navigation-bar-content-wrapper')).not.toHaveStyle({
-    maxWidth: 480,
-  });
+  expect(view).toMatchSnapshot();
+
+  expect(screen.queryByTestId('RouteScreen: 2')).not.toBeOnTheScreen();
 });
 
-it('displays ripple animation view if shifting is truthy', () => {
-  const { getByTestId } = render(
+it('applies maxTabBarWidth styling if compact prop is truthy', async () => {
+  const { toJSON } = await render(
     <BottomNavigation
+      testID="bottom-navigation"
       navigationState={createState(0, 5)}
       onIndexChange={jest.fn()}
-      renderScene={({ route }) => route.title}
+      renderScene={renderScene}
       getLazy={({ route }) => route.key === 'key-2'}
-      testID="bottom-navigation"
-      theme={{ isV3: false }}
-      shifting
+      shifting={false}
+      compact
     />
   );
 
-  expect(getByTestId('bottom-navigation-bar-content-ripple')).toBeDefined();
+  expect(toJSON()).toMatchSnapshot();
 });
 
-it('does not display ripple animation view if shifting is falsy', () => {
-  const { queryByTestId } = render(
+it('does not apply maxTabBarWidth styling if compact prop is falsy', async () => {
+  const { toJSON } = await render(
     <BottomNavigation
+      testID="bottom-navigation"
       navigationState={createState(0, 5)}
       onIndexChange={jest.fn()}
-      renderScene={({ route }) => route.title}
+      renderScene={renderScene}
       getLazy={({ route }) => route.key === 'key-2'}
-      testID="bottom-navigation"
       shifting={false}
+      compact={false}
     />
   );
 
-  expect(queryByTestId('bottom-navigation-bar-content-ripple')).toBeNull();
+  expect(toJSON()).toMatchSnapshot();
 });
 
 describe('getActiveTintColor', () => {
   it.each`
-    activeColor  | defaultColor | useV3    | expected
-    ${'#FBF7DB'} | ${'#fff'}    | ${true}  | ${'#FBF7DB'}
-    ${undefined} | ${'#fff'}    | ${true}  | ${MD3Colors.secondary10}
-    ${undefined} | ${'#fff'}    | ${false} | ${'#fff'}
+    activeColor  | expected
+    ${'#FBF7DB'} | ${'#FBF7DB'}
+    ${undefined} | ${Palette.secondary10}
   `(
-    'returns $expected when activeColor: $activeColor and useV3: $useV3',
-    ({ activeColor, defaultColor, useV3, expected }) => {
-      const theme = getTheme(false, useV3);
-      const color = getActiveTintColor({ activeColor, defaultColor, theme });
-      expect(color).toBe(expected);
+    'returns $expected when activeColor: $activeColor',
+    ({ activeColor, expected }) => {
+      const result = getActiveTintColor({ activeColor, theme: LightTheme });
+      expect(result).toBe(expected);
     }
   );
 });
 
 describe('getInactiveTintColor', () => {
   it.each`
-    inactiveColor | defaultColor | useV3    | expected
-    ${'#853D4B'}  | ${'#fff'}    | ${true}  | ${'#853D4B'}
-    ${undefined}  | ${'#fff'}    | ${true}  | ${MD3Colors.neutralVariant30}
-    ${undefined}  | ${'#fff'}    | ${false} | ${color('#fff').alpha(0.5).rgb().string()}
+    inactiveColor | expected
+    ${'#853D4B'}  | ${'#853D4B'}
+    ${undefined}  | ${Palette.neutralVariant30}
   `(
-    'returns $expected when inactiveColor: $inactiveColor and useV3: $useV3',
-    ({ inactiveColor, defaultColor, useV3, expected }) => {
-      const theme = getTheme(false, useV3);
-      const color = getInactiveTintColor({
+    'returns $expected when inactiveColor: $inactiveColor',
+    ({ inactiveColor, expected }) => {
+      const result = getInactiveTintColor({
         inactiveColor,
-        defaultColor,
-        theme,
+        theme: LightTheme,
       });
-      expect(color).toBe(expected);
+      expect(result).toBe(expected);
     }
   );
 });
 
 describe('getLabelColor', () => {
-  it.each`
-    tintColor    | focused  | defaultColor | useV3    | expected
-    ${'#FBF7DB'} | ${true}  | ${'#fff'}    | ${true}  | ${'#FBF7DB'}
-    ${'#853D4B'} | ${true}  | ${'#fff'}    | ${true}  | ${'#853D4B'}
-    ${undefined} | ${true}  | ${'#fff'}    | ${true}  | ${MD3Colors.neutral10}
-    ${undefined} | ${false} | ${'#fff'}    | ${true}  | ${MD3Colors.neutralVariant30}
-    ${undefined} | ${false} | ${'#fff'}    | ${false} | ${'#fff'}
-    ${undefined} | ${true}  | ${'#fff'}    | ${false} | ${'#fff'}
-  `(
-    'returns $expected when tintColor: $tintColor, focused: $focused useV3: $useV3',
-    ({ tintColor, focused, defaultColor, useV3, expected }) => {
-      const theme = getTheme(false, useV3);
-      const color = getLabelColor({
-        tintColor,
+  it.each([
+    { tintColor: '#FBF7DB', focused: true, expected: '#FBF7DB' },
+    { tintColor: '#853D4B', focused: true, expected: '#853D4B' },
+    { tintColor: undefined, focused: true, expected: Palette.neutral10 },
+    {
+      tintColor: undefined,
+      focused: false,
+      expected: Palette.neutralVariant30,
+    },
+  ])(
+    'returns $expected when tintColor: $tintColor, focused: $focused',
+    ({ tintColor, focused, expected }) => {
+      const result = getLabelColor({
+        tintColor: tintColor ?? '',
         hasColor: Boolean(tintColor),
         focused,
-        defaultColor,
-        theme,
+        theme: LightTheme,
       });
-      expect(color).toBe(expected);
+      expect(result).toBe(expected);
     }
   );
 });
 
-it('barStyle animated value changes correctly', () => {
+it('supports animated styles in bar', async () => {
   const value = new Animated.Value(1);
-  const { getByTestId } = render(
-    <BottomNavigation
+  await render(
+    <BottomNavigation.Bar
       navigationState={createState(0, 1)}
-      onIndexChange={() => {}}
-      renderScene={({ route }) => route.title}
-      testID={'bottom-navigation'}
-      barStyle={[{ transform: [{ scale: value }] }]}
+      onTabPress={jest.fn()}
+      testID="bottom-navigation"
+      style={[{ transform: [{ scale: value }] }]}
     />
   );
-  expect(getByTestId('bottom-navigation-bar-outer-layer')).toHaveStyle({
+
+  expect(screen.getByTestId('bottom-navigation')).toHaveStyle({
     transform: [{ scale: 1 }],
   });
 
@@ -559,15 +637,16 @@ it('barStyle animated value changes correctly', () => {
     duration: 200,
   }).start();
 
-  act(() => {
+  await act(() => {
     jest.advanceTimersByTime(200);
   });
-  expect(getByTestId('bottom-navigation-bar-outer-layer')).toHaveStyle({
+
+  expect(screen.getByTestId('bottom-navigation')).toHaveStyle({
     transform: [{ scale: 1.5 }],
   });
 });
 
-it("allows customizing Route's type via generics", () => {
+it("allows customizing Route's type via generics", async () => {
   type CustomRoute = {
     key: string;
     customPropertyName: string;
@@ -586,13 +665,15 @@ it("allows customizing Route's type via generics", () => {
     ],
   };
 
-  const tree = render(
-    <BottomNavigation
-      navigationState={state}
-      onIndexChange={jest.fn()}
-      getLabelText={({ route }) => route.customPropertyName}
-      renderScene={({ route }) => route.customPropertyName}
-    />
+  const tree = (
+    await render(
+      <BottomNavigation
+        navigationState={state}
+        onIndexChange={jest.fn()}
+        getLabelText={({ route }) => route.customPropertyName}
+        renderScene={({ route }) => <Text>{route.customPropertyName}</Text>}
+      />
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
diff --git a/src/components/__tests__/Button.test.tsx b/src/components/__tests__/Button.test.tsx
index 8917eaca92..7ea496a419 100644
--- a/src/components/__tests__/Button.test.tsx
+++ b/src/components/__tests__/Button.test.tsx
@@ -1,301 +1,243 @@
-import * as React from 'react';
-import { Animated, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 
-import { act, fireEvent, render } from '@testing-library/react-native';
-import color from 'color';
+import { describe, expect, it, jest } from '@jest/globals';
+import { userEvent } from '@testing-library/react-native';
 
-import { getTheme } from '../../core/theming';
-import { black, pink500, white } from '../../styles/themes/v2/colors';
+import { render, screen } from '../../test-utils';
+import { pink500, white } from '../../theme/colors';
+import { DarkTheme, LightTheme } from '../../theme/schemes';
+import { tokens } from '../../theme/tokens';
 import Button from '../Button/Button';
 import { getButtonColors } from '../Button/utils';
 
+const stateOpacity = tokens.md.sys.state.opacity;
+
 const styles = StyleSheet.create({
   flexing: {
     flexDirection: 'row-reverse',
   },
-  customRadius: {
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 0,
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 16,
-  },
-  noRadius: {
-    borderRadius: 0,
-  },
 });
 
-it('renders text button by default', () => {
-  const tree = render(<Button>Text Button</Button>).toJSON();
+it('renders text button by default', async () => {
+  const tree = (await render(<Button>Text Button</Button>)).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders text button with mode', () => {
-  const tree = render(<Button mode="text">Text Button</Button>).toJSON();
+it('renders text button with mode', async () => {
+  const tree = (
+    await render(<Button mode="text">Text Button</Button>)
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders outlined button with mode', () => {
-  const tree = render(
-    <Button mode="outlined">Outlined Button</Button>
+it('renders outlined button with mode', async () => {
+  const tree = (
+    await render(<Button mode="outlined">Outlined Button</Button>)
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders contained contained with mode', () => {
-  const tree = render(
-    <Button mode="contained">Contained Button</Button>
+it('renders contained contained with mode', async () => {
+  const tree = (
+    await render(<Button mode="contained">Contained Button</Button>)
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders button with icon', () => {
-  const tree = render(<Button icon="camera">Icon Button</Button>).toJSON();
+it('renders button with icon', async () => {
+  const tree = (
+    await render(<Button icon="camera">Icon Button</Button>)
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders button with icon in reverse order', () => {
-  const tree = render(
-    <Button icon="chevron-right" contentStyle={styles.flexing}>
-      Right Icon
-    </Button>
+it('renders button with icon in reverse order', async () => {
+  const tree = (
+    await render(
+      <Button icon="chevron-right" contentStyle={styles.flexing}>
+        Right Icon
+      </Button>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders loading button', () => {
-  const tree = render(<Button loading>Loading Button</Button>).toJSON();
+it('renders loading button', async () => {
+  const tree = (await render(<Button loading>Loading Button</Button>)).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders disabled button', () => {
-  const tree = render(<Button disabled>Disabled Button</Button>).toJSON();
+it('renders disabled button', async () => {
+  const tree = (
+    await render(<Button disabled>Disabled Button</Button>)
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders disabled button if there is no touch handler passed', () => {
-  const { getByTestId } = render(
-    <Button testID="disabled-button">Disabled button</Button>
-  );
+it('renders disabled button if there is no touch handler passed', async () => {
+  await render(<Button testID="disabled-button">Disabled button</Button>);
 
-  expect(getByTestId('disabled-button').props.accessibilityState).toMatchObject(
-    {
-      disabled: true,
-    }
-  );
+  expect(screen.getByTestId('disabled-button')).toBeDisabled();
 });
 
-it('renders active button if only onLongPress handler is passed', () => {
-  const { getByTestId } = render(
+it('renders active button if only onLongPress handler is passed', async () => {
+  await render(
     <Button onLongPress={() => {}} testID="active-button">
       Active button
     </Button>
   );
 
-  expect(getByTestId('active-button').props.accessibilityState).toMatchObject({
-    disabled: false,
-  });
+  expect(screen.getByTestId('active-button')).toBeEnabled();
 });
 
-it('renders button with color', () => {
-  const tree = render(
-    <Button textColor={pink500}>Custom Button</Button>
+it('renders button with color', async () => {
+  const tree = (
+    await render(<Button textColor={pink500}>Custom Button</Button>)
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders button with button color', () => {
-  const tree = render(
-    <Button buttonColor={pink500}>Custom Button</Button>
+it('renders button with button color', async () => {
+  const tree = (
+    await render(<Button buttonColor={pink500}>Custom Button</Button>)
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders button with custom testID', () => {
-  const tree = render(
-    <Button testID={'custom:testID'}>Button with custom testID</Button>
+it('renders button with custom testID', async () => {
+  const tree = (
+    await render(
+      <Button testID={'custom:testID'}>Button with custom testID</Button>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders button with an accessibility label', () => {
-  const tree = render(
-    <Button accessibilityLabel={'label'}>
-      Button with accessibility label
-    </Button>
+it('renders button with an accessibility label', async () => {
+  const tree = (
+    await render(
+      <Button accessibilityLabel={'label'}>
+        Button with accessibility label
+      </Button>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders button with an accessibility hint', () => {
-  const tree = render(
-    <Button accessibilityHint={'hint'}>Button with accessibility hint</Button>
+it('renders button with an accessibility hint', async () => {
+  const tree = (
+    await render(
+      <Button accessibilityHint={'hint'}>Button with accessibility hint</Button>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders button with custom border radius', () => {
-  const { getByTestId } = render(
-    <Button testID="custom-radius" style={styles.customRadius}>
-      Custom radius
-    </Button>
-  );
-
-  expect(getByTestId('custom-radius-container')).toHaveStyle(
-    styles.customRadius
-  );
-  expect(getByTestId('custom-radius')).toHaveStyle(styles.customRadius);
-});
-
-it('renders outlined button with custom border radius', () => {
-  const { getByTestId } = render(
-    <Button
-      mode={'outlined'}
-      testID="custom-radius"
-      style={styles.customRadius}
-    >
-      Custom radius
-    </Button>
-  );
-
-  expect(getByTestId('custom-radius-container')).toHaveStyle(
-    styles.customRadius
-  );
-  expect(getByTestId('custom-radius')).toHaveStyle({
-    borderTopLeftRadius: 15, // styles.customRadius - 1px outline
-    borderTopRightRadius: 0,
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 15, // styles.customRadius - 1px outline
-  });
-});
-
-it('renders button without border radius', () => {
-  const { getByTestId } = render(
-    <Button testID="custom-radius" style={styles.noRadius}>
-      Custom radius
-    </Button>
-  );
-
-  expect(getByTestId('custom-radius-container')).toHaveStyle(styles.noRadius);
-  expect(getByTestId('custom-radius')).toHaveStyle(styles.noRadius);
-});
-
-it('should execute onPressIn', () => {
+it('should execute onPressIn', async () => {
   const onPressInMock = jest.fn();
   const onPress = jest.fn();
 
-  const { getByTestId } = render(
+  await render(
     <Button onPress={onPress} onPressIn={onPressInMock} testID="button">
       {null}
     </Button>
   );
-  fireEvent(getByTestId('button'), 'onPressIn');
+  await userEvent.press(screen.getByTestId('button'));
   expect(onPressInMock).toHaveBeenCalledTimes(1);
 });
 
-it('should execute onPressOut', () => {
+it('should execute onPressOut', async () => {
   const onPressOutMock = jest.fn();
   const onPress = jest.fn();
 
-  const { getByTestId } = render(
+  await render(
     <Button onPress={onPress} onPressOut={onPressOutMock} testID="button">
       {null}
     </Button>
   );
-  fireEvent(getByTestId('button'), 'onPressOut');
+  await userEvent.press(screen.getByTestId('button'));
   expect(onPressOutMock).toHaveBeenCalledTimes(1);
 });
 
 describe('button text styles', () => {
-  it('applies uppercase styles if uppercase prop is truthy', () => {
-    const { getByTestId } = render(
+  it('applies uppercase styles if uppercase prop is truthy', async () => {
+    await render(
       <Button testID="button" uppercase>
         Test
       </Button>
     );
 
-    expect(getByTestId('button-text')).toHaveStyle({
+    expect(screen.getByText('Test')).toHaveStyle({
       textTransform: 'uppercase',
     });
   });
 
-  it('does not apply uppercase styles if uppercase prop is falsy', () => {
-    const { getByTestId } = render(
+  it('does not apply uppercase styles if uppercase prop is falsy', async () => {
+    await render(
       <Button testID="button" uppercase={false}>
         Test
       </Button>
     );
 
-    expect(getByTestId('button-text')).not.toHaveStyle({
+    expect(screen.getByText('Test')).not.toHaveStyle({
       textTransform: 'uppercase',
     });
   });
 });
 
 describe('button icon styles', () => {
-  it('should return correct icon styles for compact text button', () => {
-    const { getByTestId } = render(
+  it('should return correct icon styles for compact text button', async () => {
+    const { toJSON } = await render(
       <Button mode={'text'} compact icon="camera" testID="compact-button">
         Compact text button
       </Button>
     );
-    expect(getByTestId('compact-button-icon-container')).toHaveStyle({
-      marginLeft: 6,
-      marginRight: 0,
-    });
+    expect(toJSON()).toMatchSnapshot();
   });
 
   (['outlined', 'contained', 'contained-tonal', 'elevated'] as const).forEach(
     (mode) =>
-      it(`should return correct icon styles for compact ${mode} button`, () => {
-        const { getByTestId } = render(
+      it(`should return correct icon styles for compact ${mode} button`, async () => {
+        const { toJSON } = await render(
           <Button mode={mode} compact icon="camera" testID="compact-button">
             Compact {mode} button
           </Button>
         );
-        expect(getByTestId('compact-button-icon-container')).toHaveStyle({
-          marginLeft: 8,
-          marginRight: 0,
-        });
+        expect(toJSON()).toMatchSnapshot();
       })
   );
 
-  it('should return correct icon styles for text button', () => {
-    const { getByTestId } = render(
+  it('should return correct icon styles for text button', async () => {
+    const { toJSON } = await render(
       <Button mode={'text'} icon="camera" testID="compact-button">
         text button
       </Button>
     );
-    expect(getByTestId('compact-button-icon-container')).toHaveStyle({
-      marginLeft: 12,
-      marginRight: -8,
-    });
+    expect(toJSON()).toMatchSnapshot();
   });
 
   (['outlined', 'contained', 'contained-tonal', 'elevated'] as const).forEach(
     (mode) =>
-      it(`should return correct icon styles for compact ${mode} button`, () => {
-        const { getByTestId } = render(
+      it(`should return correct icon styles for compact ${mode} button`, async () => {
+        const { toJSON } = await render(
           <Button mode={mode} icon="camera" testID="compact-button">
             {mode} button
           </Button>
         );
-        expect(getByTestId('compact-button-icon-container')).toHaveStyle({
-          marginLeft: 16,
-          marginRight: -16,
-        });
+        expect(toJSON()).toMatchSnapshot();
       })
   );
 });
@@ -307,7 +249,7 @@ describe('getButtonColors - background color', () => {
     expect(
       getButtonColors({
         customButtonColor,
-        theme: getTheme(),
+        theme: LightTheme,
         disabled: false,
         mode: 'text',
       })
@@ -319,7 +261,7 @@ describe('getButtonColors - background color', () => {
       expect(
         getButtonColors({
           customButtonColor,
-          theme: getTheme(),
+          theme: LightTheme,
           mode,
           disabled: true,
         })
@@ -332,7 +274,7 @@ describe('getButtonColors - background color', () => {
       expect(
         getButtonColors({
           customButtonColor,
-          theme: getTheme(),
+          theme: LightTheme,
           mode,
           disabled: true,
         })
@@ -345,12 +287,13 @@ describe('getButtonColors - background color', () => {
       return expect(
         getButtonColors({
           customButtonColor,
-          theme: getTheme(),
+          theme: LightTheme,
           mode,
           disabled: true,
         })
       ).toMatchObject({
-        backgroundColor: getTheme().colors.surfaceDisabled,
+        backgroundColor: LightTheme.colors.onSurface,
+        backgroundOpacity: stateOpacity.pressed,
       });
     })
   );
@@ -360,12 +303,13 @@ describe('getButtonColors - background color', () => {
       return expect(
         getButtonColors({
           customButtonColor,
-          theme: getTheme(true),
+          theme: DarkTheme,
           mode,
           disabled: true,
         })
       ).toMatchObject({
-        backgroundColor: getTheme(true).colors.surfaceDisabled,
+        backgroundColor: DarkTheme.colors.onSurface,
+        backgroundOpacity: stateOpacity.pressed,
       });
     })
   );
@@ -373,66 +317,66 @@ describe('getButtonColors - background color', () => {
   it('should return correct theme color, for theme version 3, elevated mode', () => {
     expect(
       getButtonColors({
-        theme: getTheme(),
+        theme: LightTheme,
         mode: 'elevated',
       })
     ).toMatchObject({
-      backgroundColor: getTheme().colors.elevation.level1,
+      backgroundColor: LightTheme.colors.surfaceContainerLow,
     });
   });
 
   it('should return correct theme color, for theme version 3, dark theme, elevated mode', () => {
     expect(
       getButtonColors({
-        theme: getTheme(true),
+        theme: DarkTheme,
         mode: 'elevated',
       })
     ).toMatchObject({
-      backgroundColor: getTheme(true).colors.elevation.level1,
+      backgroundColor: DarkTheme.colors.surfaceContainerLow,
     });
   });
 
   it('should return correct theme color, for theme version 3, contained mode', () => {
     expect(
       getButtonColors({
-        theme: getTheme(),
+        theme: LightTheme,
         mode: 'contained',
       })
     ).toMatchObject({
-      backgroundColor: getTheme().colors.primary,
+      backgroundColor: LightTheme.colors.primary,
     });
   });
 
   it('should return correct theme color, for theme version 3, dark theme, contained mode', () => {
     expect(
       getButtonColors({
-        theme: getTheme(true),
+        theme: DarkTheme,
         mode: 'contained',
       })
     ).toMatchObject({
-      backgroundColor: getTheme(true).colors.primary,
+      backgroundColor: DarkTheme.colors.primary,
     });
   });
 
   it('should return correct theme color, for theme version 3, contained-tonal mode', () => {
     expect(
       getButtonColors({
-        theme: getTheme(),
+        theme: LightTheme,
         mode: 'contained-tonal',
       })
     ).toMatchObject({
-      backgroundColor: getTheme().colors.secondaryContainer,
+      backgroundColor: LightTheme.colors.secondaryContainer,
     });
   });
 
   it('should return correct theme color, for theme version 3, dark theme, contained-tonal mode', () => {
     expect(
       getButtonColors({
-        theme: getTheme(true),
+        theme: DarkTheme,
         mode: 'contained-tonal',
       })
     ).toMatchObject({
-      backgroundColor: getTheme(true).colors.secondaryContainer,
+      backgroundColor: DarkTheme.colors.secondaryContainer,
     });
   });
 
@@ -440,7 +384,7 @@ describe('getButtonColors - background color', () => {
     it(`should return transparent color, for theme version 3, ${mode} mode`, () => {
       return expect(
         getButtonColors({
-          theme: getTheme(),
+          theme: LightTheme,
           mode,
         })
       ).toMatchObject({
@@ -453,97 +397,8 @@ describe('getButtonColors - background color', () => {
     it(`should return transparent color, for theme version 3, dark theme, ${mode} mode`, () => {
       return expect(
         getButtonColors({
-          theme: getTheme(true),
-          mode,
-        })
-      ).toMatchObject({
-        backgroundColor: 'transparent',
-      });
-    })
-  );
-
-  it('should return correct theme color, for theme version 2, contained mode', () => {
-    expect(
-      getButtonColors({
-        theme: getTheme(false, false),
-        mode: 'contained',
-      })
-    ).toMatchObject({
-      backgroundColor: getTheme(false, false).colors.primary,
-    });
-  });
-
-  it('should return correct theme color, for theme version 2, when disabled, contained mode', () => {
-    expect(
-      getButtonColors({
-        theme: getTheme(false, false),
-        mode: 'contained',
-        disabled: true,
-      })
-    ).toMatchObject({
-      backgroundColor: color(black).alpha(0.12).rgb().string(),
-    });
-  });
-
-  it('should return correct theme color, for theme version 2, when disabled, dark theme, contained mode', () => {
-    expect(
-      getButtonColors({
-        theme: getTheme(true, false),
-        mode: 'contained',
-        disabled: true,
-      })
-    ).toMatchObject({
-      backgroundColor: color(white).alpha(0.12).rgb().string(),
-    });
-  });
-
-  (['text', 'outlined'] as const).forEach((mode) =>
-    it(`should return correct theme color, for theme version 2, ${mode} mode`, () => {
-      expect(
-        getButtonColors({
-          theme: getTheme(false, false),
-          mode,
-        })
-      ).toMatchObject({
-        backgroundColor: 'transparent',
-      });
-    })
-  );
-
-  (['text', 'outlined'] as const).forEach((mode) =>
-    it(`should return correct theme color, for theme version 2, dark theme, ${mode} mode`, () => {
-      expect(
-        getButtonColors({
-          theme: getTheme(true, false),
-          mode,
-        })
-      ).toMatchObject({
-        backgroundColor: 'transparent',
-      });
-    })
-  );
-
-  (['text', 'outlined'] as const).forEach((mode) =>
-    it(`should return correct theme color, for theme version 2, when disabled, ${mode} mode`, () => {
-      expect(
-        getButtonColors({
-          theme: getTheme(false, false),
-          mode,
-          disabled: true,
-        })
-      ).toMatchObject({
-        backgroundColor: 'transparent',
-      });
-    })
-  );
-
-  (['text', 'outlined'] as const).forEach((mode) =>
-    it(`should return correct theme color, for theme version 2, when disabled, dark theme, ${mode} mode`, () => {
-      expect(
-        getButtonColors({
-          theme: getTheme(true, false),
+          theme: DarkTheme,
           mode,
-          disabled: true,
         })
       ).toMatchObject({
         backgroundColor: 'transparent',
@@ -559,7 +414,7 @@ describe('getButtonColors - text color', () => {
     expect(
       getButtonColors({
         customTextColor,
-        theme: getTheme(),
+        theme: LightTheme,
         disabled: false,
         mode: 'text',
       })
@@ -570,12 +425,13 @@ describe('getButtonColors - text color', () => {
     expect(
       getButtonColors({
         customTextColor,
-        theme: getTheme(),
+        theme: LightTheme,
         disabled: true,
         mode: 'text',
       })
     ).toMatchObject({
-      textColor: getTheme().colors.onSurfaceDisabled,
+      textColor: LightTheme.colors.onSurface,
+      textOpacity: stateOpacity.disabled,
     });
   });
 
@@ -583,12 +439,13 @@ describe('getButtonColors - text color', () => {
     expect(
       getButtonColors({
         customTextColor,
-        theme: getTheme(true),
+        theme: DarkTheme,
         disabled: true,
         mode: 'text',
       })
     ).toMatchObject({
-      textColor: getTheme(true).colors.onSurfaceDisabled,
+      textColor: DarkTheme.colors.onSurface,
+      textOpacity: stateOpacity.disabled,
     });
   });
 
@@ -596,7 +453,7 @@ describe('getButtonColors - text color', () => {
     it(`should return correct text color for dark prop, for theme version 3, ${mode} mode`, () => {
       expect(
         getButtonColors({
-          theme: getTheme(),
+          theme: LightTheme,
           mode,
           dark: true,
         })
@@ -610,11 +467,11 @@ describe('getButtonColors - text color', () => {
     it(`should return correct theme text color, for theme version 3, ${mode} mode`, () => {
       expect(
         getButtonColors({
-          theme: getTheme(),
+          theme: LightTheme,
           mode,
         })
       ).toMatchObject({
-        textColor: getTheme().colors.primary,
+        textColor: LightTheme.colors.primary,
       });
     })
   );
@@ -623,11 +480,11 @@ describe('getButtonColors - text color', () => {
     it(`should return correct theme text color, for theme version 3, dark theme, ${mode} mode`, () => {
       expect(
         getButtonColors({
-          theme: getTheme(true),
+          theme: DarkTheme,
           mode,
         })
       ).toMatchObject({
-        textColor: getTheme(true).colors.primary,
+        textColor: DarkTheme.colors.primary,
       });
     })
   );
@@ -635,154 +492,92 @@ describe('getButtonColors - text color', () => {
   it('should return correct theme text color, for theme version 3, contained mode', () => {
     expect(
       getButtonColors({
-        theme: getTheme(),
+        theme: LightTheme,
         mode: 'contained',
       })
     ).toMatchObject({
-      textColor: getTheme().colors.onPrimary,
+      textColor: LightTheme.colors.onPrimary,
     });
   });
 
   it('should return correct theme text color, for theme version 3, dark theme, contained mode', () => {
     expect(
       getButtonColors({
-        theme: getTheme(true),
+        theme: DarkTheme,
         mode: 'contained',
       })
     ).toMatchObject({
-      textColor: getTheme(true).colors.onPrimary,
+      textColor: DarkTheme.colors.onPrimary,
     });
   });
 
   it('should return correct theme text color, for theme version 3, contained-tonal mode', () => {
     expect(
       getButtonColors({
-        theme: getTheme(),
+        theme: LightTheme,
         mode: 'contained-tonal',
       })
     ).toMatchObject({
-      textColor: getTheme().colors.onSecondaryContainer,
+      textColor: LightTheme.colors.onSecondaryContainer,
     });
   });
 
   it('should return correct theme text color, for theme version 3, dark theme contained-tonal mode', () => {
     expect(
       getButtonColors({
-        theme: getTheme(true),
+        theme: DarkTheme,
         mode: 'contained-tonal',
       })
     ).toMatchObject({
-      textColor: getTheme(true).colors.onSecondaryContainer,
-    });
-  });
-
-  it('should return correct theme text color, for theme version 2, when disabled, no matter what the mode is', () => {
-    expect(
-      getButtonColors({
-        theme: getTheme(false, false),
-        disabled: true,
-        mode: 'text',
-      })
-    ).toMatchObject({
-      textColor: color(black).alpha(0.32).rgb().string(),
+      textColor: DarkTheme.colors.onSecondaryContainer,
     });
   });
-
-  it('should return correct theme text color, for theme version 2, when disabled, dark theme, no matter what the mode is', () => {
-    expect(
-      getButtonColors({
-        theme: getTheme(true, false),
-        disabled: true,
-        mode: 'text',
-      })
-    ).toMatchObject({
-      textColor: color(white).alpha(0.32).rgb().string(),
-    });
-  });
-
-  it('should return correct theme text color, for theme version 2, contained mode', () => {
-    expect(
-      getButtonColors({
-        theme: getTheme(false, false),
-        mode: 'contained',
-        dark: true,
-      })
-    ).toMatchObject({
-      textColor: '#ffffff',
-    });
-  });
-
-  (['text', 'outlined'] as const).forEach((mode) =>
-    it(`should return correct theme text color, for theme version 2, ${mode} mode`, () => {
-      expect(
-        getButtonColors({
-          theme: getTheme(false, false),
-          mode,
-        })
-      ).toMatchObject({
-        textColor: getTheme(false, false).colors.primary,
-      });
-    })
-  );
-
-  (['text', 'outlined'] as const).forEach((mode) =>
-    it(`should return correct theme text color, for theme version 2, dark theme, ${mode} mode`, () => {
-      expect(
-        getButtonColors({
-          theme: getTheme(true, false),
-          mode,
-        })
-      ).toMatchObject({
-        textColor: getTheme(true, false).colors.primary,
-      });
-    })
-  );
 });
 
 describe('getButtonColors - border color', () => {
   it('should return correct border color, for theme version 3, when disabled, outlined mode', () => {
     expect(
       getButtonColors({
-        theme: getTheme(),
+        theme: LightTheme,
         disabled: true,
         mode: 'outlined',
       })
     ).toMatchObject({
-      borderColor: getTheme().colors.surfaceDisabled,
+      borderColor: LightTheme.colors.outlineVariant,
     });
   });
 
   it('should return correct border color, for theme version 3, when disabled, dark theme, outlined mode', () => {
     expect(
       getButtonColors({
-        theme: getTheme(true),
+        theme: DarkTheme,
         disabled: true,
         mode: 'outlined',
       })
     ).toMatchObject({
-      borderColor: getTheme(true).colors.surfaceDisabled,
+      borderColor: DarkTheme.colors.outlineVariant,
     });
   });
 
   it('should return correct border color, for theme version 3, outlined mode', () => {
     expect(
       getButtonColors({
-        theme: getTheme(),
+        theme: LightTheme,
         mode: 'outlined',
       })
     ).toMatchObject({
-      borderColor: getTheme().colors.outline,
+      borderColor: LightTheme.colors.outlineVariant,
     });
   });
 
   it('should return correct border color, for theme version 3, dark theme, outlined mode', () => {
     expect(
       getButtonColors({
-        theme: getTheme(true),
+        theme: DarkTheme,
         mode: 'outlined',
       })
     ).toMatchObject({
-      borderColor: getTheme(true).colors.outline,
+      borderColor: DarkTheme.colors.outlineVariant,
     });
   });
 
@@ -791,7 +586,7 @@ describe('getButtonColors - border color', () => {
       it(`should return transparent border, for theme version 3, ${mode} mode`, () => {
         expect(
           getButtonColors({
-            theme: getTheme(),
+            theme: LightTheme,
             mode,
           })
         ).toMatchObject({
@@ -805,57 +600,7 @@ describe('getButtonColors - border color', () => {
       it(`should return transparent border, for theme version 3, dark theme, ${mode} mode`, () => {
         expect(
           getButtonColors({
-            theme: getTheme(true),
-            mode,
-          })
-        ).toMatchObject({
-          borderColor: 'transparent',
-        });
-      })
-  );
-
-  it('should return correct border color, for theme version 2, outlined mode', () => {
-    expect(
-      getButtonColors({
-        theme: getTheme(false, false),
-        mode: 'outlined',
-      })
-    ).toMatchObject({
-      borderColor: color(black).alpha(0.29).rgb().string(),
-    });
-  });
-
-  it('should return correct border color, for theme version 2, dark theme, outlined mode', () => {
-    expect(
-      getButtonColors({
-        theme: getTheme(true, false),
-        mode: 'outlined',
-      })
-    ).toMatchObject({
-      borderColor: color(white).alpha(0.29).rgb().string(),
-    });
-  });
-
-  (['text', 'contained', 'contained-tonal', 'elevated'] as const).forEach(
-    (mode) =>
-      it(`should return transparent border, for theme version 2, ${mode} mode`, () => {
-        expect(
-          getButtonColors({
-            theme: getTheme(false, false),
-            mode,
-          })
-        ).toMatchObject({
-          borderColor: 'transparent',
-        });
-      })
-  );
-
-  (['text', 'contained', 'contained-tonal', 'elevated'] as const).forEach(
-    (mode) =>
-      it(`should return transparent border, for theme version 2, dark theme, ${mode} mode`, () => {
-        expect(
-          getButtonColors({
-            theme: getTheme(false, false),
+            theme: DarkTheme,
             mode,
           })
         ).toMatchObject({
@@ -869,7 +614,7 @@ describe('getButtonColors - border width', () => {
   it('should return correct border width, for theme version 3, outlined mode', () => {
     expect(
       getButtonColors({
-        theme: getTheme(),
+        theme: LightTheme,
         mode: 'outlined',
       })
     ).toMatchObject({
@@ -877,23 +622,12 @@ describe('getButtonColors - border width', () => {
     });
   });
 
-  it('should return correct border width, for theme version 2, outlined mode', () => {
-    expect(
-      getButtonColors({
-        theme: getTheme(false, false),
-        mode: 'outlined',
-      })
-    ).toMatchObject({
-      borderWidth: StyleSheet.hairlineWidth,
-    });
-  });
-
   (['text', 'contained', 'contained-tonal', 'elevated'] as const).forEach(
     (mode) =>
       it(`should return correct border width, for ${mode} mode`, () => {
         expect(
           getButtonColors({
-            theme: getTheme(),
+            theme: LightTheme,
             mode,
           })
         ).toMatchObject({
@@ -902,33 +636,3 @@ describe('getButtonColors - border width', () => {
       })
   );
 });
-
-it('animated value changes correctly', () => {
-  const value = new Animated.Value(1);
-  const { getByTestId } = render(
-    <Button
-      mode="elevated"
-      compact
-      icon="camera"
-      style={[{ transform: [{ scale: value }] }]}
-    >
-      Compact button
-    </Button>
-  );
-  expect(getByTestId('button-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1 }],
-  });
-
-  Animated.timing(value, {
-    toValue: 1.5,
-    useNativeDriver: false,
-    duration: 200,
-  }).start();
-
-  act(() => {
-    jest.advanceTimersByTime(200);
-  });
-  expect(getByTestId('button-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1.5 }],
-  });
-});
diff --git a/src/components/__tests__/Card/Card.test.tsx b/src/components/__tests__/Card/Card.test.tsx
index 3da4aa2c51..2fff70a432 100644
--- a/src/components/__tests__/Card/Card.test.tsx
+++ b/src/components/__tests__/Card/Card.test.tsx
@@ -1,20 +1,16 @@
-import React from 'react';
-import { Animated, StyleSheet, Text } from 'react-native';
+import type { ComponentProps } from 'react';
+import { Platform, StyleSheet, Text } from 'react-native';
 
-import { act, render } from '@testing-library/react-native';
-import color from 'color';
+import { afterEach, describe, expect, it, jest } from '@jest/globals';
 
-import { getTheme } from '../../../core/theming';
-import { black, white } from '../../../styles/themes/v2/colors';
-import { MD3Colors } from '../../../styles/themes/v3/tokens';
+import { render, screen } from '../../../test-utils';
+import { LightTheme } from '../../../theme/schemes';
+import { Palette } from '../../../theme/tokens';
 import Button from '../../Button/Button';
 import Card from '../../Card/Card';
 import { getCardColors, getCardCoverStyle } from '../../Card/utils';
 
 const styles = StyleSheet.create({
-  customBorderRadius: {
-    borderRadius: 32,
-  },
   customCoverRadius: {
     borderTopLeftRadius: 4,
     borderTopRightRadius: 8,
@@ -26,48 +22,49 @@ const styles = StyleSheet.create({
   },
 });
 
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
 describe('Card', () => {
-  it('renders an outlined card', () => {
-    const tree = render(<Card mode="outlined">{null}</Card>).toJSON();
+  it('renders an outlined card', async () => {
+    const tree = (await render(<Card mode="outlined">{null}</Card>)).toJSON();
 
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders an outlined card with custom border radius and color', () => {
-    const { getByTestId } = render(
+  it('renders an outlined card with a custom outline color', async () => {
+    const { toJSON } = await render(
       <Card
         mode="outlined"
+        accessibilityLabel="card"
         theme={{ colors: { outline: 'purple' } }}
-        style={styles.customBorderRadius}
       >
         {null}
       </Card>
     );
 
-    expect(getByTestId('card-outline')).toHaveStyle({
-      borderRadius: 32,
-      borderColor: 'purple',
-    });
+    expect(toJSON()).toMatchSnapshot();
   });
 
-  it('renders an outlined card with custom border color', () => {
-    const { getByLabelText } = render(
+  it('renders an outlined card with custom border color', async () => {
+    const { toJSON } = await render(
       <Card
         mode="outlined"
         accessibilityLabel="card"
-        style={{ borderColor: MD3Colors.error50 }}
+        style={{ borderColor: Palette.error50 }}
       >
         {null}
       </Card>
     );
 
-    expect(getByLabelText('card')).toHaveStyle({
-      borderColor: MD3Colors.error50,
-    });
+    expect(toJSON()).toMatchSnapshot();
   });
 
-  it('renders with a custom theme', () => {
-    const { getByLabelText } = render(
+  it('renders with a custom theme background color', async () => {
+    jest.replaceProperty(Platform, 'OS', 'web');
+
+    await render(
       <Card
         mode="outlined"
         accessibilityLabel="card"
@@ -77,44 +74,53 @@ describe('Card', () => {
       </Card>
     );
 
-    expect(getByLabelText('card')).toHaveStyle({
+    expect(screen.getByLabelText('card')).toHaveStyle({
       backgroundColor: '#0000FF',
     });
   });
 
-  it('renders with a content style', () => {
-    const { getByTestId } = render(
+  it('renders with a content style', async () => {
+    await render(
       <Card contentStyle={styles.contentStyle}>
         <Text>Content</Text>
       </Card>
     );
 
-    expect(getByTestId('card')).toHaveStyle(styles.contentStyle);
+    expect(screen.getByText('Content').parent).toHaveStyle(styles.contentStyle);
   });
 
-  it('does not render a disabled accessibility state', () => {
-    const { getByTestId } = render(<Card>{null}</Card>);
+  it('clips inner content to the card shape', async () => {
+    await render(
+      <Card>
+        <Text>Content</Text>
+      </Card>
+    );
 
-    expect(
-      getByTestId('card').props.accessibilityState || {}
-    ).not.toMatchObject({
-      disabled: true,
+    expect(screen.getByText('Content').parent).toHaveStyle({
+      borderRadius: LightTheme.shapes.corner.medium,
+      overflow: 'hidden',
     });
   });
-  it('does render a disabled accessibility state', () => {
-    const { getByA11yState } = render(
-      <Card onPress={() => {}} disabled>
+
+  it('does not render a disabled accessibility state', async () => {
+    await render(<Card testID="card">{null}</Card>);
+
+    expect(screen.getByTestId('card')).toBeEnabled();
+  });
+  it('does render a disabled accessibility state', async () => {
+    await render(
+      <Card testID="card" onPress={() => {}} disabled>
         {null}
       </Card>
     );
 
-    expect(getByA11yState({ disabled: true })).toBeOnTheScreen();
+    expect(screen.getByTestId('card')).toBeDisabled();
   });
 });
 
 describe('CardCover', () => {
-  it('renders with custom border radius', () => {
-    const { getByTestId } = render(
+  it('renders with custom border radius', async () => {
+    await render(
       <Card>
         <Card.Cover
           source={{ uri: 'https://picsum.photos/700' }}
@@ -124,42 +130,74 @@ describe('CardCover', () => {
       </Card>
     );
 
-    expect(getByTestId('card-cover')).toHaveStyle(styles.customCoverRadius);
+    expect(screen.getByTestId('card-cover')).toHaveStyle(
+      styles.customCoverRadius
+    );
   });
 });
 
 describe('CardActions', () => {
-  it('renders button with passed mode', () => {
-    const { getByTestId } = render(
+  it('renders button with passed mode', async () => {
+    const buttonProps = jest.fn();
+    const ProbeButton = (props: ComponentProps<typeof Button>) => {
+      buttonProps(props);
+
+      return <Button {...props} />;
+    };
+
+    await render(
       <Card>
-        <Card.Actions testID="card-actions">
-          <Button mode="contained">Agree</Button>
+        <Card.Actions>
+          <ProbeButton mode="contained">Agree</ProbeButton>
         </Card.Actions>
       </Card>
     );
 
-    expect(getByTestId('card-actions').props.children[0].props.mode).toBe(
-      'contained'
+    expect(buttonProps).toHaveBeenCalledWith(
+      expect.objectContaining({ mode: 'contained' })
     );
   });
 
-  it('renders button with custom styles', () => {
-    const { getByTestId } = render(
+  it('does not inject default button props', async () => {
+    const buttonProps = jest.fn();
+    const ProbeButton = (props: ComponentProps<typeof Button>) => {
+      buttonProps(props);
+
+      return <Button {...props} />;
+    };
+
+    await render(
       <Card>
         <Card.Actions>
-          <Button
-            testID="card-actions-button"
-            mode="contained"
-            style={styles.customBorderRadius}
-          >
-            Agree
-          </Button>
+          <ProbeButton>Cancel</ProbeButton>
+          <ProbeButton>Agree</ProbeButton>
+        </Card.Actions>
+      </Card>
+    );
+
+    const [cancelButtonProps] = buttonProps.mock.calls[0];
+    const [agreeButtonProps] = buttonProps.mock.calls[1];
+
+    expect(cancelButtonProps).not.toHaveProperty('mode');
+    expect(cancelButtonProps).not.toHaveProperty('compact');
+    expect(agreeButtonProps).not.toHaveProperty('mode');
+    expect(agreeButtonProps).not.toHaveProperty('compact');
+  });
+
+  it('renders actions in a styled row', async () => {
+    await render(
+      <Card>
+        <Card.Actions testID="card-actions">
+          <Button>Cancel</Button>
+          <Button>Agree</Button>
         </Card.Actions>
       </Card>
     );
 
-    expect(getByTestId('card-actions-button')).toHaveStyle({
-      borderRadius: 32,
+    expect(screen.getByTestId('card-actions')).toHaveStyle({
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      columnGap: 8,
     });
   });
 });
@@ -168,72 +206,42 @@ describe('getCardColors - background color', () => {
   it('should return correct theme color, for theme version 3, contained mode', () => {
     expect(
       getCardColors({
-        theme: getTheme(),
+        theme: LightTheme,
         mode: 'contained',
       })
     ).toMatchObject({
-      backgroundColor: getTheme().colors.surfaceVariant,
+      backgroundColor: LightTheme.colors.surfaceVariant,
     });
   });
 
   it('should return correct theme color, for theme version 3, outlined mode', () => {
     expect(
       getCardColors({
-        theme: getTheme(),
+        theme: LightTheme,
         mode: 'outlined',
       })
-    ).toMatchObject({ backgroundColor: getTheme().colors.surface });
+    ).toMatchObject({ backgroundColor: LightTheme.colors.surface });
   });
 
   it('should return undefined, for theme version 3, elevated mode', () => {
     expect(
       getCardColors({
-        theme: getTheme(),
+        theme: LightTheme,
         mode: 'elevated',
       })
     ).toMatchObject({ backgroundColor: undefined });
   });
-
-  it('should return undefined, for theme version 2', () => {
-    expect(
-      getCardColors({
-        theme: getTheme(false, false),
-        mode: undefined as any,
-      })
-    ).toMatchObject({ backgroundColor: undefined });
-  });
 });
 
 describe('getCardColors - border color', () => {
   it('should return correct theme color, for theme version 3', () => {
     expect(
       getCardColors({
-        theme: getTheme(),
-        mode: undefined as any,
-      })
-    ).toMatchObject({ borderColor: getTheme().colors.outline });
-  });
-
-  it('should return correct color, for theme version 2, dark mode', () => {
-    expect(
-      getCardColors({
-        theme: getTheme(true, false),
-        mode: undefined as any,
-      })
-    ).toMatchObject({
-      borderColor: color(white).alpha(0.12).rgb().string(),
-    });
-  });
-
-  it('should return correct color, for theme version 2, light mode', () => {
-    expect(
-      getCardColors({
-        theme: getTheme(false, false),
-        mode: undefined as any,
+        theme: LightTheme,
+        // @ts-expect-error: Verify the runtime fallback when mode is omitted.
+        mode: undefined,
       })
-    ).toMatchObject({
-      borderColor: color(black).alpha(0.12).rgb().string(),
-    });
+    ).toMatchObject({ borderColor: LightTheme.colors.outline });
   });
 });
 
@@ -241,7 +249,7 @@ describe('getCardCoverStyle - border radius', () => {
   it('should return custom border radius', () => {
     expect(
       getCardCoverStyle({
-        theme: getTheme(),
+        theme: LightTheme,
         borderRadiusStyles: styles.customCoverRadius,
       })
     ).toMatchObject(styles.customCoverRadius);
@@ -250,76 +258,28 @@ describe('getCardCoverStyle - border radius', () => {
   it('should return correct border radius based on roundness, for theme version 3', () => {
     expect(
       getCardCoverStyle({
-        theme: getTheme(),
-        borderRadiusStyles: {},
-      })
-    ).toMatchObject({ borderRadius: 3 * getTheme().roundness });
-  });
-
-  it('should return correct border radius based on roundness, for theme version 2, when index is 0 and total is 1', () => {
-    expect(
-      getCardCoverStyle({
-        theme: getTheme(false, false),
-        borderRadiusStyles: {},
-        index: 0,
-        total: 1,
-      })
-    ).toMatchObject({ borderRadius: getTheme(false, false).roundness });
-  });
-
-  it('should return correct border radius based on roundness, for theme version 2, when index is 0 and total is other than 1', () => {
-    expect(
-      getCardCoverStyle({
-        theme: getTheme(false, false),
-        borderRadiusStyles: {},
-        index: 0,
-        total: 2,
-      })
-    ).toMatchObject({
-      borderTopLeftRadius: getTheme(false, false).roundness,
-      borderTopRightRadius: getTheme(false, false).roundness,
-    });
-  });
-
-  it('should return correct border radius based on roundness, for theme version 2, when index is equal to total - 1', () => {
-    expect(
-      getCardCoverStyle({
-        theme: getTheme(false, false),
+        theme: LightTheme,
         borderRadiusStyles: {},
-        index: 1,
-        total: 2,
       })
-    ).toMatchObject({
-      borderBottomLeftRadius: getTheme(false, false).roundness,
-    });
+    ).toMatchObject({ borderRadius: LightTheme.shapes.corner.medium });
   });
 });
 
-it('animated value changes correctly', () => {
-  const value = new Animated.Value(1);
-  const { getByTestId } = render(
-    <Card
-      mode="outlined"
-      accessibilityLabel="card"
-      style={[{ transform: [{ scale: value }] }]}
-    >
-      {null}
-    </Card>
-  );
-  expect(getByTestId('card-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1 }],
-  });
-
-  Animated.timing(value, {
-    toValue: 1.5,
-    useNativeDriver: false,
-    duration: 200,
-  }).start();
+describe('CardContent', () => {
+  it('uses the Card padding when it follows a cover and a title', async () => {
+    await render(
+      <Card>
+        <Card.Cover source={{ uri: 'https://picsum.photos/700' }} />
+        <Card.Title title="Card Title" />
+        <Card.Content testID="card-content">
+          <Text>Card content</Text>
+        </Card.Content>
+      </Card>
+    );
 
-  act(() => {
-    jest.advanceTimersByTime(200);
-  });
-  expect(getByTestId('card-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1.5 }],
+    expect(screen.getByTestId('card-content').parent).toHaveStyle({
+      padding: 16,
+      gap: 16,
+    });
   });
 });
diff --git a/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap b/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap
index 301eea942c..2f7cee90ba 100644
--- a/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap
+++ b/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap
@@ -4,70 +4,401 @@ exports[`Card renders an outlined card 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(255, 251, 254, 1)",
-      "borderRadius": 12,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {},
+      {
+        "borderColor": "rgba(121, 116, 126, 1)",
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(254, 247, 255, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 12,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
   }
-  testID="card-container-outer-layer"
 >
   <View
     collapsable={false}
     style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(254, 247, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 12,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    pointerEvents="none"
+    style={
+      [
+        {
+          "borderColor": "rgba(121, 116, 126, 1)",
+        },
+        {
+          "borderWidth": 1,
+          "height": "100%",
+          "position": "absolute",
+          "width": "100%",
+          "zIndex": 2,
+        },
+        {
+          "borderRadius": 12,
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "flexShrink": 1,
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 12,
+        },
+        {
+          "flexDirection": "column",
+        },
+        undefined,
+        {
+          "gap": 16,
+          "padding": 16,
+        },
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Card renders an outlined card with a custom outline color 1`] = `
+<View
+  accessibilityLabel="card"
+  collapsable={false}
+  style={
+    [
+      {},
+      {
+        "borderColor": "purple",
+      },
+      undefined,
+      {},
       {
-        "backgroundColor": "rgba(255, 251, 254, 1)",
+        "backgroundColor": "rgba(254, 247, 255, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 12,
-        "flex": undefined,
-        "shadowColor": "#000",
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
-      }
-    }
-    testID="card-container"
-  >
-    <View
-      pointerEvents="none"
-      style={
-        [
-          {
-            "borderColor": "rgba(121, 116, 126, 1)",
-          },
-          {
-            "borderWidth": 1,
-            "height": "100%",
-            "position": "absolute",
-            "width": "100%",
-            "zIndex": 2,
-          },
-          {
-            "borderRadius": 12,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(254, 247, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 12,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
           },
-        ]
-      }
-      testID="card-outline"
-    />
-    <View
-      style={
-        [
-          {
-            "flexShrink": 1,
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    pointerEvents="none"
+    style={
+      [
+        {
+          "borderColor": "purple",
+        },
+        {
+          "borderWidth": 1,
+          "height": "100%",
+          "position": "absolute",
+          "width": "100%",
+          "zIndex": 2,
+        },
+        {
+          "borderRadius": 12,
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "flexShrink": 1,
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 12,
+        },
+        {
+          "flexDirection": "column",
+        },
+        undefined,
+        {
+          "gap": 16,
+          "padding": 16,
+        },
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Card renders an outlined card with custom border color 1`] = `
+<View
+  accessibilityLabel="card"
+  collapsable={false}
+  style={
+    [
+      {},
+      {
+        "borderColor": "rgba(220, 54, 46, 1)",
+      },
+      {
+        "borderColor": "rgba(220, 54, 46, 1)",
+      },
+      {},
+      {
+        "backgroundColor": "rgba(254, 247, 255, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 12,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(254, 247, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 12,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
           },
-          undefined,
-        ]
-      }
-      testID="card"
-    />
-  </View>
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    pointerEvents="none"
+    style={
+      [
+        {
+          "borderColor": "rgba(220, 54, 46, 1)",
+        },
+        {
+          "borderWidth": 1,
+          "height": "100%",
+          "position": "absolute",
+          "width": "100%",
+          "zIndex": 2,
+        },
+        {
+          "borderRadius": 12,
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "flexShrink": 1,
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 12,
+        },
+        {
+          "flexDirection": "column",
+        },
+        undefined,
+        {
+          "gap": 16,
+          "padding": 16,
+        },
+      ]
+    }
+  />
 </View>
 `;
diff --git a/src/components/__tests__/Checkbox/Checkbox.test.tsx b/src/components/__tests__/Checkbox/Checkbox.test.tsx
index efa819007e..a72200bb4e 100644
--- a/src/components/__tests__/Checkbox/Checkbox.test.tsx
+++ b/src/components/__tests__/Checkbox/Checkbox.test.tsx
@@ -1,54 +1,59 @@
-import * as React from 'react';
-
-import { render } from '@testing-library/react-native';
+import { expect, it } from '@jest/globals';
 
+import { render } from '../../../test-utils';
 import Checkbox from '../../Checkbox';
 
-it('renders checked Checkbox with onPress', () => {
-  const tree = render(
-    <Checkbox status="checked" onPress={() => {}} />
+it('renders checked Checkbox with onPress', async () => {
+  const tree = (
+    await render(<Checkbox status="checked" onPress={() => {}} />)
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders unchecked Checkbox with onPress', () => {
-  const tree = render(
-    <Checkbox status="unchecked" onPress={() => {}} />
+it('renders unchecked Checkbox with onPress', async () => {
+  const tree = (
+    await render(<Checkbox status="unchecked" onPress={() => {}} />)
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders indeterminate Checkbox', () => {
-  const tree = render(
-    <Checkbox status="indeterminate" onPress={() => {}} />
+it('renders indeterminate Checkbox', async () => {
+  const tree = (
+    await render(<Checkbox status="indeterminate" onPress={() => {}} />)
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders checked Checkbox with color', () => {
-  const tree = render(<Checkbox status="checked" color="red" />).toJSON();
+it('renders checked Checkbox with color', async () => {
+  const tree = (
+    await render(<Checkbox status="checked" color="red" />)
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders unchecked Checkbox with color', () => {
-  const tree = render(<Checkbox status="checked" color="red" />).toJSON();
+it('renders unchecked Checkbox with color', async () => {
+  const tree = (
+    await render(<Checkbox status="checked" color="red" />)
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders indeterminate Checkbox with color', () => {
-  const tree = render(<Checkbox status="indeterminate" color="red" />).toJSON();
+it('renders indeterminate Checkbox with color', async () => {
+  const tree = (
+    await render(<Checkbox status="indeterminate" color="red" />)
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders Checkbox with custom testID', () => {
-  const tree = render(
-    <Checkbox status="checked" testID={'custom:testID'} />
+it('renders Checkbox with custom testID', async () => {
+  const tree = (
+    await render(<Checkbox status="checked" testID={'custom:testID'} />)
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
diff --git a/src/components/__tests__/Checkbox/CheckboxItem.test.tsx b/src/components/__tests__/Checkbox/CheckboxItem.test.tsx
index cfb6007b5c..ee52c1b3e4 100644
--- a/src/components/__tests__/Checkbox/CheckboxItem.test.tsx
+++ b/src/components/__tests__/Checkbox/CheckboxItem.test.tsx
@@ -1,105 +1,77 @@
-import * as React from 'react';
-import { Platform } from 'react-native';
-
-import { act, fireEvent, render } from '@testing-library/react-native';
+import { expect, it, jest } from '@jest/globals';
+import { userEvent } from '@testing-library/react-native';
 
+import { render, screen } from '../../../test-utils';
 import Checkbox from '../../Checkbox';
 
-it('renders unchecked', () => {
-  const tree = render(
-    <Checkbox.Item status="unchecked" label="Unchecked Button" />
-  ).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
-
-it('can render the iOS checkbox on different platforms', () => {
-  Platform.OS = 'android';
-  const tree = render(
-    <Checkbox.Item status="unchecked" label="iOS Checkbox" mode="ios" />
-  ).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
-
-it('can render the Android checkbox on different platforms', () => {
-  Platform.OS = 'ios';
-  const tree = render(
-    <Checkbox.Item status="unchecked" label="iOS Checkbox" mode="android" />
+it('renders unchecked', async () => {
+  const tree = (
+    await render(<Checkbox.Item status="unchecked" label="Unchecked Button" />)
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('can render leading checkbox control', () => {
-  Platform.OS = 'ios';
-  const tree = render(
-    <Checkbox.Item
-      label="Default with leading control"
-      status={'unchecked'}
-      mode="ios"
-      position="leading"
-    />
+it('can render leading checkbox control', async () => {
+  const tree = (
+    await render(
+      <Checkbox.Item
+        label="Default with leading control"
+        status={'unchecked'}
+        position="leading"
+      />
+    )
   ).toJSON();
   expect(tree).toMatchSnapshot();
 });
 
-it('should have `accessibilityState={ checked: true }` when `status="checked"`', () => {
-  const { getAllByA11yState } = render(
-    <Checkbox.Item status="checked" label="Checked Button" />
-  );
+it('should have `accessibilityState={ checked: true }` when `status="checked"`', async () => {
+  await render(<Checkbox.Item status="checked" label="Checked Button" />);
 
-  const elements = getAllByA11yState({ checked: true });
-  expect(elements).toHaveLength(2);
+  expect(screen.getAllByRole('checkbox', { checked: true })).toHaveLength(1);
 });
 
-it('should have `accessibilityState={ checked: false }` when `status="unchecked"', () => {
-  const { getAllByA11yState } = render(
-    <Checkbox.Item status="unchecked" label="Unchecked Button" />
-  );
+it('should have `accessibilityState={ checked: false }` when `status="unchecked"', async () => {
+  await render(<Checkbox.Item status="unchecked" label="Unchecked Button" />);
 
-  const elements = getAllByA11yState({ checked: false });
-  expect(elements).toHaveLength(2);
+  expect(screen.getAllByRole('checkbox', { checked: false })).toHaveLength(1);
 });
 
-it('should have `accessibilityState={ checked: false }` when `status="indeterminate"', () => {
-  const { getAllByA11yState } = render(
+it('should have `accessibilityState={ checked: "mixed" }` when `status="indeterminate"`', async () => {
+  await render(
     <Checkbox.Item status="indeterminate" label="Indeterminate Button" />
   );
 
-  const elements = getAllByA11yState({ checked: false });
-  expect(elements).toHaveLength(2);
+  expect(screen.getAllByRole('checkbox', { checked: 'mixed' })).toHaveLength(1);
 });
 
-it('disables the row when the prop disabled is true', () => {
-  const { getByLabelText } = render(
+it('disables the row when the prop disabled is true', async () => {
+  await render(
     <Checkbox.Item
       status="unchecked"
       label=""
-      accessibilityLabel="some checkbox"
+      aria-label="some checkbox"
       disabled
     />
   );
 
-  const touchable = getByLabelText('some checkbox');
-
-  expect(touchable.props).toMatchObject({
-    accessibilityState: { disabled: true },
-  });
+  expect(screen.getByLabelText('some checkbox')).toBeDisabled();
 });
 
-it('should have maxFontSizeMultiplier set to 1.5 by default', () => {
-  const { getByTestId } = render(
-    <Checkbox.Item label="" testID="checkbox-item" status="unchecked" />
-  );
-  const checkboxItemText = getByTestId('checkbox-item-text');
-  expect(checkboxItemText.props.maxFontSizeMultiplier).toBe(1.5);
+it('should have maxFontSizeMultiplier set to 1.5 by default', async () => {
+  const tree = (
+    await render(
+      <Checkbox.Item label="" testID="checkbox-item" status="unchecked" />
+    )
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
 });
 
-it('should execute onLongPress', () => {
+it('should execute onLongPress', async () => {
   const onLongPress = jest.fn();
 
-  const { getByTestId } = render(
+  await render(
     <Checkbox.Item
       label="Item"
       status="unchecked"
@@ -108,9 +80,7 @@ it('should execute onLongPress', () => {
     />
   );
 
-  act(() => {
-    fireEvent(getByTestId('checkbox-item'), 'longPress', { key: 'value' });
-  });
+  await userEvent.longPress(screen.getByTestId('checkbox-item'));
 
   expect(onLongPress).toHaveBeenCalledTimes(1);
 });
diff --git a/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index 9e6deed50f..202a95467a 100644
--- a/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`renders Checkbox with custom testID 1`] = `
 <View
   accessibilityLiveRegion="polite"
-  accessibilityRole="checkbox"
   accessibilityState={
     {
       "busy": undefined,
@@ -22,6 +21,7 @@ exports[`renders Checkbox with custom testID 1`] = `
     }
   }
   accessible={true}
+  centered={true}
   collapsable={false}
   focusable={true}
   onBlur={[Function]}
@@ -33,56 +33,154 @@ exports[`renders Checkbox with custom testID 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="checkbox"
   style={
     [
       {
         "overflow": "hidden",
       },
-      {
-        "borderRadius": 18,
-        "padding": 6,
-      },
+      [
+        {
+          "alignItems": "center",
+          "borderRadius": 20,
+          "height": 40,
+          "justifyContent": "center",
+          "width": 40,
+        },
+        undefined,
+        undefined,
+      ],
     ]
   }
   testID="custom:testID"
 >
   <View
+    pointerEvents="none"
     style={
       {
-        "opacity": 1,
+        "alignItems": "center",
+        "height": 40,
+        "justifyContent": "center",
+        "width": 40,
       }
     }
   >
-    <Text
-      accessibilityElementsHidden={true}
-      allowFontScaling={false}
-      importantForAccessibility="no-hide-descendants"
-      pointerEvents="none"
-      selectable={false}
+    <View
       style={
         [
           {
-            "color": "rgba(103, 80, 164, 1)",
-            "fontSize": 24,
+            "alignItems": "center",
+            "borderRadius": 2,
+            "height": 18,
+            "justifyContent": "center",
+            "overflow": "hidden",
+            "width": 18,
+          },
+          {
+            "opacity": 1,
           },
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="none"
+        style={
           [
             {
-              "lineHeight": 24,
-              "transform": [
-                {
-                  "scaleX": 1,
-                },
-              ],
+              "borderRadius": 2,
+              "borderWidth": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             },
             {
-              "backgroundColor": "transparent",
+              "borderColor": "rgba(73, 69, 79, 1)",
+              "opacity": 0,
             },
-          ],
-        ]
-      }
-    >
-      check
-    </Text>
+          ]
+        }
+      />
+      <View
+        collapsable={false}
+        pointerEvents="none"
+        style={
+          [
+            {
+              "borderRadius": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "backgroundColor": "rgba(103, 80, 164, 1)",
+              "opacity": 1,
+            },
+          ]
+        }
+      />
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "height": 18,
+              "left": 0,
+              "overflow": "hidden",
+              "position": "absolute",
+              "top": 0,
+            },
+            {
+              "opacity": 1,
+              "width": 18,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "alignItems": "center",
+              "height": 18,
+              "justifyContent": "center",
+              "width": 18,
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "borderBottomWidth": 2,
+                  "borderLeftWidth": 2,
+                  "height": 6,
+                  "transform": [
+                    {
+                      "rotate": "-45deg",
+                    },
+                    {
+                      "translateY": -1,
+                    },
+                    {
+                      "translateX": 1,
+                    },
+                  ],
+                  "width": 11,
+                },
+                {
+                  "borderColor": "rgba(255, 255, 255, 1)",
+                },
+                null,
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
   </View>
 </View>
 `;
@@ -90,7 +188,6 @@ exports[`renders Checkbox with custom testID 1`] = `
 exports[`renders checked Checkbox with color 1`] = `
 <View
   accessibilityLiveRegion="polite"
-  accessibilityRole="checkbox"
   accessibilityState={
     {
       "busy": undefined,
@@ -109,8 +206,8 @@ exports[`renders checked Checkbox with color 1`] = `
     }
   }
   accessible={true}
+  centered={true}
   collapsable={false}
-  color="red"
   focusable={true}
   onBlur={[Function]}
   onClick={[Function]}
@@ -121,55 +218,153 @@ exports[`renders checked Checkbox with color 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="checkbox"
   style={
     [
       {
         "overflow": "hidden",
       },
-      {
-        "borderRadius": 18,
-        "padding": 6,
-      },
+      [
+        {
+          "alignItems": "center",
+          "borderRadius": 20,
+          "height": 40,
+          "justifyContent": "center",
+          "width": 40,
+        },
+        undefined,
+        undefined,
+      ],
     ]
   }
 >
   <View
+    pointerEvents="none"
     style={
       {
-        "opacity": 1,
+        "alignItems": "center",
+        "height": 40,
+        "justifyContent": "center",
+        "width": 40,
       }
     }
   >
-    <Text
-      accessibilityElementsHidden={true}
-      allowFontScaling={false}
-      importantForAccessibility="no-hide-descendants"
-      pointerEvents="none"
-      selectable={false}
+    <View
       style={
         [
           {
-            "color": "red",
-            "fontSize": 24,
+            "alignItems": "center",
+            "borderRadius": 2,
+            "height": 18,
+            "justifyContent": "center",
+            "overflow": "hidden",
+            "width": 18,
+          },
+          {
+            "opacity": 1,
           },
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="none"
+        style={
           [
             {
-              "lineHeight": 24,
-              "transform": [
-                {
-                  "scaleX": 1,
-                },
-              ],
+              "borderRadius": 2,
+              "borderWidth": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             },
             {
-              "backgroundColor": "transparent",
+              "borderColor": "rgba(73, 69, 79, 1)",
+              "opacity": 0,
             },
-          ],
-        ]
-      }
-    >
-      check
-    </Text>
+          ]
+        }
+      />
+      <View
+        collapsable={false}
+        pointerEvents="none"
+        style={
+          [
+            {
+              "borderRadius": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "backgroundColor": "red",
+              "opacity": 1,
+            },
+          ]
+        }
+      />
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "height": 18,
+              "left": 0,
+              "overflow": "hidden",
+              "position": "absolute",
+              "top": 0,
+            },
+            {
+              "opacity": 1,
+              "width": 18,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "alignItems": "center",
+              "height": 18,
+              "justifyContent": "center",
+              "width": 18,
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "borderBottomWidth": 2,
+                  "borderLeftWidth": 2,
+                  "height": 6,
+                  "transform": [
+                    {
+                      "rotate": "-45deg",
+                    },
+                    {
+                      "translateY": -1,
+                    },
+                    {
+                      "translateX": 1,
+                    },
+                  ],
+                  "width": 11,
+                },
+                {
+                  "borderColor": "rgba(255, 255, 255, 1)",
+                },
+                null,
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
   </View>
 </View>
 `;
@@ -177,7 +372,6 @@ exports[`renders checked Checkbox with color 1`] = `
 exports[`renders checked Checkbox with onPress 1`] = `
 <View
   accessibilityLiveRegion="polite"
-  accessibilityRole="checkbox"
   accessibilityState={
     {
       "busy": undefined,
@@ -196,6 +390,7 @@ exports[`renders checked Checkbox with onPress 1`] = `
     }
   }
   accessible={true}
+  centered={true}
   collapsable={false}
   focusable={true}
   onBlur={[Function]}
@@ -207,55 +402,153 @@ exports[`renders checked Checkbox with onPress 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="checkbox"
   style={
     [
       {
         "overflow": "hidden",
       },
-      {
-        "borderRadius": 18,
-        "padding": 6,
-      },
+      [
+        {
+          "alignItems": "center",
+          "borderRadius": 20,
+          "height": 40,
+          "justifyContent": "center",
+          "width": 40,
+        },
+        undefined,
+        undefined,
+      ],
     ]
   }
 >
   <View
+    pointerEvents="none"
     style={
       {
-        "opacity": 1,
+        "alignItems": "center",
+        "height": 40,
+        "justifyContent": "center",
+        "width": 40,
       }
     }
   >
-    <Text
-      accessibilityElementsHidden={true}
-      allowFontScaling={false}
-      importantForAccessibility="no-hide-descendants"
-      pointerEvents="none"
-      selectable={false}
+    <View
       style={
         [
           {
-            "color": "rgba(103, 80, 164, 1)",
-            "fontSize": 24,
+            "alignItems": "center",
+            "borderRadius": 2,
+            "height": 18,
+            "justifyContent": "center",
+            "overflow": "hidden",
+            "width": 18,
+          },
+          {
+            "opacity": 1,
           },
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="none"
+        style={
           [
             {
-              "lineHeight": 24,
-              "transform": [
-                {
-                  "scaleX": 1,
-                },
-              ],
+              "borderRadius": 2,
+              "borderWidth": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             },
             {
-              "backgroundColor": "transparent",
+              "borderColor": "rgba(73, 69, 79, 1)",
+              "opacity": 0,
             },
-          ],
-        ]
-      }
-    >
-      check
-    </Text>
+          ]
+        }
+      />
+      <View
+        collapsable={false}
+        pointerEvents="none"
+        style={
+          [
+            {
+              "borderRadius": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "backgroundColor": "rgba(103, 80, 164, 1)",
+              "opacity": 1,
+            },
+          ]
+        }
+      />
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "height": 18,
+              "left": 0,
+              "overflow": "hidden",
+              "position": "absolute",
+              "top": 0,
+            },
+            {
+              "opacity": 1,
+              "width": 18,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "alignItems": "center",
+              "height": 18,
+              "justifyContent": "center",
+              "width": 18,
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "borderBottomWidth": 2,
+                  "borderLeftWidth": 2,
+                  "height": 6,
+                  "transform": [
+                    {
+                      "rotate": "-45deg",
+                    },
+                    {
+                      "translateY": -1,
+                    },
+                    {
+                      "translateX": 1,
+                    },
+                  ],
+                  "width": 11,
+                },
+                {
+                  "borderColor": "rgba(255, 255, 255, 1)",
+                },
+                null,
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
   </View>
 </View>
 `;
@@ -263,11 +556,10 @@ exports[`renders checked Checkbox with onPress 1`] = `
 exports[`renders indeterminate Checkbox 1`] = `
 <View
   accessibilityLiveRegion="polite"
-  accessibilityRole="checkbox"
   accessibilityState={
     {
       "busy": undefined,
-      "checked": false,
+      "checked": "mixed",
       "disabled": false,
       "expanded": undefined,
       "selected": undefined,
@@ -282,6 +574,7 @@ exports[`renders indeterminate Checkbox 1`] = `
     }
   }
   accessible={true}
+  centered={true}
   collapsable={false}
   focusable={true}
   onBlur={[Function]}
@@ -293,55 +586,140 @@ exports[`renders indeterminate Checkbox 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="checkbox"
   style={
     [
       {
         "overflow": "hidden",
       },
-      {
-        "borderRadius": 18,
-        "padding": 6,
-      },
+      [
+        {
+          "alignItems": "center",
+          "borderRadius": 20,
+          "height": 40,
+          "justifyContent": "center",
+          "width": 40,
+        },
+        undefined,
+        undefined,
+      ],
     ]
   }
 >
   <View
+    pointerEvents="none"
     style={
       {
-        "opacity": 1,
+        "alignItems": "center",
+        "height": 40,
+        "justifyContent": "center",
+        "width": 40,
       }
     }
   >
-    <Text
-      accessibilityElementsHidden={true}
-      allowFontScaling={false}
-      importantForAccessibility="no-hide-descendants"
-      pointerEvents="none"
-      selectable={false}
+    <View
       style={
         [
           {
-            "color": "rgba(103, 80, 164, 1)",
-            "fontSize": 24,
+            "alignItems": "center",
+            "borderRadius": 2,
+            "height": 18,
+            "justifyContent": "center",
+            "overflow": "hidden",
+            "width": 18,
           },
+          {
+            "opacity": 1,
+          },
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="none"
+        style={
           [
             {
-              "lineHeight": 24,
-              "transform": [
-                {
-                  "scaleX": 1,
-                },
-              ],
+              "borderRadius": 2,
+              "borderWidth": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             },
             {
-              "backgroundColor": "transparent",
+              "borderColor": "rgba(73, 69, 79, 1)",
+              "opacity": 0,
             },
-          ],
-        ]
-      }
-    >
-      minus
-    </Text>
+          ]
+        }
+      />
+      <View
+        collapsable={false}
+        pointerEvents="none"
+        style={
+          [
+            {
+              "borderRadius": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "backgroundColor": "rgba(103, 80, 164, 1)",
+              "opacity": 1,
+            },
+          ]
+        }
+      />
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "height": 18,
+              "left": 0,
+              "overflow": "hidden",
+              "position": "absolute",
+              "top": 0,
+            },
+            {
+              "opacity": 1,
+              "width": 18,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "alignItems": "center",
+              "height": 18,
+              "justifyContent": "center",
+              "width": 18,
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "borderRadius": 1,
+                  "height": 2,
+                  "width": 10,
+                },
+                {
+                  "backgroundColor": "rgba(255, 255, 255, 1)",
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
   </View>
 </View>
 `;
@@ -349,11 +727,10 @@ exports[`renders indeterminate Checkbox 1`] = `
 exports[`renders indeterminate Checkbox with color 1`] = `
 <View
   accessibilityLiveRegion="polite"
-  accessibilityRole="checkbox"
   accessibilityState={
     {
       "busy": undefined,
-      "checked": false,
+      "checked": "mixed",
       "disabled": true,
       "expanded": undefined,
       "selected": undefined,
@@ -368,8 +745,8 @@ exports[`renders indeterminate Checkbox with color 1`] = `
     }
   }
   accessible={true}
+  centered={true}
   collapsable={false}
-  color="red"
   focusable={true}
   onBlur={[Function]}
   onClick={[Function]}
@@ -380,55 +757,140 @@ exports[`renders indeterminate Checkbox with color 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="checkbox"
   style={
     [
       {
         "overflow": "hidden",
       },
-      {
-        "borderRadius": 18,
-        "padding": 6,
-      },
+      [
+        {
+          "alignItems": "center",
+          "borderRadius": 20,
+          "height": 40,
+          "justifyContent": "center",
+          "width": 40,
+        },
+        undefined,
+        undefined,
+      ],
     ]
   }
 >
   <View
+    pointerEvents="none"
     style={
       {
-        "opacity": 1,
+        "alignItems": "center",
+        "height": 40,
+        "justifyContent": "center",
+        "width": 40,
       }
     }
   >
-    <Text
-      accessibilityElementsHidden={true}
-      allowFontScaling={false}
-      importantForAccessibility="no-hide-descendants"
-      pointerEvents="none"
-      selectable={false}
+    <View
       style={
         [
           {
-            "color": "red",
-            "fontSize": 24,
+            "alignItems": "center",
+            "borderRadius": 2,
+            "height": 18,
+            "justifyContent": "center",
+            "overflow": "hidden",
+            "width": 18,
+          },
+          {
+            "opacity": 1,
           },
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="none"
+        style={
           [
             {
-              "lineHeight": 24,
-              "transform": [
-                {
-                  "scaleX": 1,
-                },
-              ],
+              "borderRadius": 2,
+              "borderWidth": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             },
             {
-              "backgroundColor": "transparent",
+              "borderColor": "rgba(73, 69, 79, 1)",
+              "opacity": 0,
             },
-          ],
-        ]
-      }
-    >
-      minus
-    </Text>
+          ]
+        }
+      />
+      <View
+        collapsable={false}
+        pointerEvents="none"
+        style={
+          [
+            {
+              "borderRadius": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "backgroundColor": "red",
+              "opacity": 1,
+            },
+          ]
+        }
+      />
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "height": 18,
+              "left": 0,
+              "overflow": "hidden",
+              "position": "absolute",
+              "top": 0,
+            },
+            {
+              "opacity": 1,
+              "width": 18,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "alignItems": "center",
+              "height": 18,
+              "justifyContent": "center",
+              "width": 18,
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "borderRadius": 1,
+                  "height": 2,
+                  "width": 10,
+                },
+                {
+                  "backgroundColor": "rgba(255, 255, 255, 1)",
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
   </View>
 </View>
 `;
@@ -436,7 +898,6 @@ exports[`renders indeterminate Checkbox with color 1`] = `
 exports[`renders unchecked Checkbox with color 1`] = `
 <View
   accessibilityLiveRegion="polite"
-  accessibilityRole="checkbox"
   accessibilityState={
     {
       "busy": undefined,
@@ -455,8 +916,8 @@ exports[`renders unchecked Checkbox with color 1`] = `
     }
   }
   accessible={true}
+  centered={true}
   collapsable={false}
-  color="red"
   focusable={true}
   onBlur={[Function]}
   onClick={[Function]}
@@ -467,55 +928,153 @@ exports[`renders unchecked Checkbox with color 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="checkbox"
   style={
     [
       {
         "overflow": "hidden",
       },
-      {
-        "borderRadius": 18,
-        "padding": 6,
-      },
+      [
+        {
+          "alignItems": "center",
+          "borderRadius": 20,
+          "height": 40,
+          "justifyContent": "center",
+          "width": 40,
+        },
+        undefined,
+        undefined,
+      ],
     ]
   }
 >
   <View
+    pointerEvents="none"
     style={
       {
-        "opacity": 1,
+        "alignItems": "center",
+        "height": 40,
+        "justifyContent": "center",
+        "width": 40,
       }
     }
   >
-    <Text
-      accessibilityElementsHidden={true}
-      allowFontScaling={false}
-      importantForAccessibility="no-hide-descendants"
-      pointerEvents="none"
-      selectable={false}
+    <View
       style={
         [
           {
-            "color": "red",
-            "fontSize": 24,
+            "alignItems": "center",
+            "borderRadius": 2,
+            "height": 18,
+            "justifyContent": "center",
+            "overflow": "hidden",
+            "width": 18,
+          },
+          {
+            "opacity": 1,
           },
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="none"
+        style={
           [
             {
-              "lineHeight": 24,
-              "transform": [
-                {
-                  "scaleX": 1,
-                },
-              ],
+              "borderRadius": 2,
+              "borderWidth": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             },
             {
-              "backgroundColor": "transparent",
+              "borderColor": "rgba(73, 69, 79, 1)",
+              "opacity": 0,
             },
-          ],
-        ]
-      }
-    >
-      check
-    </Text>
+          ]
+        }
+      />
+      <View
+        collapsable={false}
+        pointerEvents="none"
+        style={
+          [
+            {
+              "borderRadius": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "backgroundColor": "red",
+              "opacity": 1,
+            },
+          ]
+        }
+      />
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "height": 18,
+              "left": 0,
+              "overflow": "hidden",
+              "position": "absolute",
+              "top": 0,
+            },
+            {
+              "opacity": 1,
+              "width": 18,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "alignItems": "center",
+              "height": 18,
+              "justifyContent": "center",
+              "width": 18,
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "borderBottomWidth": 2,
+                  "borderLeftWidth": 2,
+                  "height": 6,
+                  "transform": [
+                    {
+                      "rotate": "-45deg",
+                    },
+                    {
+                      "translateY": -1,
+                    },
+                    {
+                      "translateX": 1,
+                    },
+                  ],
+                  "width": 11,
+                },
+                {
+                  "borderColor": "rgba(255, 255, 255, 1)",
+                },
+                null,
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
   </View>
 </View>
 `;
@@ -523,7 +1082,6 @@ exports[`renders unchecked Checkbox with color 1`] = `
 exports[`renders unchecked Checkbox with onPress 1`] = `
 <View
   accessibilityLiveRegion="polite"
-  accessibilityRole="checkbox"
   accessibilityState={
     {
       "busy": undefined,
@@ -542,6 +1100,7 @@ exports[`renders unchecked Checkbox with onPress 1`] = `
     }
   }
   accessible={true}
+  centered={true}
   collapsable={false}
   focusable={true}
   onBlur={[Function]}
@@ -553,55 +1112,153 @@ exports[`renders unchecked Checkbox with onPress 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="checkbox"
   style={
     [
       {
         "overflow": "hidden",
       },
-      {
-        "borderRadius": 18,
-        "padding": 6,
-      },
+      [
+        {
+          "alignItems": "center",
+          "borderRadius": 20,
+          "height": 40,
+          "justifyContent": "center",
+          "width": 40,
+        },
+        undefined,
+        undefined,
+      ],
     ]
   }
 >
   <View
+    pointerEvents="none"
     style={
       {
-        "opacity": 0,
+        "alignItems": "center",
+        "height": 40,
+        "justifyContent": "center",
+        "width": 40,
       }
     }
   >
-    <Text
-      accessibilityElementsHidden={true}
-      allowFontScaling={false}
-      importantForAccessibility="no-hide-descendants"
-      pointerEvents="none"
-      selectable={false}
+    <View
       style={
         [
           {
-            "color": "rgba(103, 80, 164, 1)",
-            "fontSize": 24,
+            "alignItems": "center",
+            "borderRadius": 2,
+            "height": 18,
+            "justifyContent": "center",
+            "overflow": "hidden",
+            "width": 18,
+          },
+          {
+            "opacity": 1,
           },
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="none"
+        style={
           [
             {
-              "lineHeight": 24,
-              "transform": [
-                {
-                  "scaleX": 1,
-                },
-              ],
+              "borderRadius": 2,
+              "borderWidth": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             },
             {
-              "backgroundColor": "transparent",
+              "borderColor": "rgba(73, 69, 79, 1)",
+              "opacity": 1,
             },
-          ],
-        ]
-      }
-    >
-      check
-    </Text>
+          ]
+        }
+      />
+      <View
+        collapsable={false}
+        pointerEvents="none"
+        style={
+          [
+            {
+              "borderRadius": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "backgroundColor": "rgba(103, 80, 164, 1)",
+              "opacity": 0,
+            },
+          ]
+        }
+      />
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "height": 18,
+              "left": 0,
+              "overflow": "hidden",
+              "position": "absolute",
+              "top": 0,
+            },
+            {
+              "opacity": 0,
+              "width": 0,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "alignItems": "center",
+              "height": 18,
+              "justifyContent": "center",
+              "width": 18,
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "borderBottomWidth": 2,
+                  "borderLeftWidth": 2,
+                  "height": 6,
+                  "transform": [
+                    {
+                      "rotate": "-45deg",
+                    },
+                    {
+                      "translateY": -1,
+                    },
+                    {
+                      "translateX": 1,
+                    },
+                  ],
+                  "width": 11,
+                },
+                {
+                  "borderColor": "rgba(255, 255, 255, 1)",
+                },
+                null,
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
   </View>
 </View>
 `;
diff --git a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap
index b5f1d87e77..e2d338f791 100644
--- a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap
+++ b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`can render leading checkbox control 1`] = `
 <View
   accessibilityLabel="Default with leading control"
-  accessibilityRole="checkbox"
   accessibilityState={
     {
       "busy": undefined,
@@ -33,6 +32,7 @@ exports[`can render leading checkbox control 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="checkbox"
   style={
     [
       false,
@@ -57,12 +57,10 @@ exports[`can render leading checkbox control 1`] = `
     }
   >
     <View
-      accessibilityLiveRegion="polite"
-      accessibilityRole="checkbox"
       accessibilityState={
         {
           "busy": undefined,
-          "checked": false,
+          "checked": undefined,
           "disabled": true,
           "expanded": undefined,
           "selected": undefined,
@@ -76,7 +74,8 @@ exports[`can render leading checkbox control 1`] = `
           "text": undefined,
         }
       }
-      accessible={true}
+      accessible={false}
+      centered={true}
       collapsable={false}
       focusable={true}
       onBlur={[Function]}
@@ -93,50 +92,147 @@ exports[`can render leading checkbox control 1`] = `
           {
             "overflow": "hidden",
           },
-          {
-            "borderRadius": 18,
-            "padding": 6,
-          },
+          [
+            {
+              "alignItems": "center",
+              "borderRadius": 20,
+              "height": 40,
+              "justifyContent": "center",
+              "width": 40,
+            },
+            undefined,
+            undefined,
+          ],
         ]
       }
     >
       <View
+        pointerEvents="none"
         style={
           {
-            "opacity": 0,
+            "alignItems": "center",
+            "height": 40,
+            "justifyContent": "center",
+            "width": 40,
           }
         }
       >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          selectable={false}
+        <View
           style={
             [
               {
-                "color": "rgba(103, 80, 164, 1)",
-                "fontSize": 24,
+                "alignItems": "center",
+                "borderRadius": 2,
+                "height": 18,
+                "justifyContent": "center",
+                "overflow": "hidden",
+                "width": 18,
+              },
+              {
+                "opacity": 1,
               },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            pointerEvents="none"
+            style={
               [
                 {
-                  "lineHeight": 24,
-                  "transform": [
-                    {
-                      "scaleX": 1,
-                    },
-                  ],
+                  "borderRadius": 2,
+                  "borderWidth": 2,
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
                 },
                 {
-                  "backgroundColor": "transparent",
+                  "borderColor": "rgba(73, 69, 79, 1)",
+                  "opacity": 1,
                 },
-              ],
-            ]
-          }
-        >
-          check
-        </Text>
+              ]
+            }
+          />
+          <View
+            collapsable={false}
+            pointerEvents="none"
+            style={
+              [
+                {
+                  "borderRadius": 2,
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(103, 80, 164, 1)",
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "height": 18,
+                  "left": 0,
+                  "overflow": "hidden",
+                  "position": "absolute",
+                  "top": 0,
+                },
+                {
+                  "opacity": 0,
+                  "width": 0,
+                },
+              ]
+            }
+          >
+            <View
+              style={
+                {
+                  "alignItems": "center",
+                  "height": 18,
+                  "justifyContent": "center",
+                  "width": 18,
+                }
+              }
+            >
+              <View
+                style={
+                  [
+                    {
+                      "borderBottomWidth": 2,
+                      "borderLeftWidth": 2,
+                      "height": 6,
+                      "transform": [
+                        {
+                          "rotate": "-45deg",
+                        },
+                        {
+                          "translateY": -1,
+                        },
+                        {
+                          "translateX": 1,
+                        },
+                      ],
+                      "width": 11,
+                    },
+                    {
+                      "borderColor": "rgba(255, 255, 255, 1)",
+                    },
+                    null,
+                  ]
+                }
+              />
+            </View>
+          </View>
+        </View>
       </View>
     </View>
     <Text
@@ -147,7 +243,7 @@ exports[`can render leading checkbox control 1`] = `
             "textAlign": "left",
           },
           {
-            "color": "rgba(28, 27, 31, 1)",
+            "color": "rgba(29, 27, 32, 1)",
             "writingDirection": "ltr",
           },
           [
@@ -155,7 +251,7 @@ exports[`can render leading checkbox control 1`] = `
               "fontFamily": "System",
               "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0.15,
+              "letterSpacing": 0.5,
               "lineHeight": 24,
             },
             [
@@ -163,9 +259,9 @@ exports[`can render leading checkbox control 1`] = `
                 "flexGrow": 1,
                 "flexShrink": 1,
               },
-              false,
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
+                "opacity": 1,
                 "textAlign": "right",
               },
               undefined,
@@ -173,7 +269,6 @@ exports[`can render leading checkbox control 1`] = `
           ],
         ]
       }
-      testID="undefined-text"
     >
       Default with leading control
     </Text>
@@ -181,10 +276,9 @@ exports[`can render leading checkbox control 1`] = `
 </View>
 `;
 
-exports[`can render the Android checkbox on different platforms 1`] = `
+exports[`renders unchecked 1`] = `
 <View
-  accessibilityLabel="iOS Checkbox"
-  accessibilityRole="checkbox"
+  accessibilityLabel="Unchecked Button"
   accessibilityState={
     {
       "busy": undefined,
@@ -214,6 +308,7 @@ exports[`can render the Android checkbox on different platforms 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="checkbox"
   style={
     [
       false,
@@ -245,7 +340,7 @@ exports[`can render the Android checkbox on different platforms 1`] = `
             "textAlign": "left",
           },
           {
-            "color": "rgba(28, 27, 31, 1)",
+            "color": "rgba(29, 27, 32, 1)",
             "writingDirection": "ltr",
           },
           [
@@ -253,7 +348,7 @@ exports[`can render the Android checkbox on different platforms 1`] = `
               "fontFamily": "System",
               "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0.15,
+              "letterSpacing": 0.5,
               "lineHeight": 24,
             },
             [
@@ -261,9 +356,9 @@ exports[`can render the Android checkbox on different platforms 1`] = `
                 "flexGrow": 1,
                 "flexShrink": 1,
               },
-              false,
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
+                "opacity": 1,
                 "textAlign": "left",
               },
               undefined,
@@ -271,17 +366,14 @@ exports[`can render the Android checkbox on different platforms 1`] = `
           ],
         ]
       }
-      testID="undefined-text"
     >
-      iOS Checkbox
+      Unchecked Button
     </Text>
     <View
-      accessibilityLiveRegion="polite"
-      accessibilityRole="checkbox"
       accessibilityState={
         {
           "busy": undefined,
-          "checked": false,
+          "checked": undefined,
           "disabled": true,
           "expanded": undefined,
           "selected": undefined,
@@ -295,7 +387,8 @@ exports[`can render the Android checkbox on different platforms 1`] = `
           "text": undefined,
         }
       }
-      accessible={true}
+      accessible={false}
+      centered={true}
       collapsable={false}
       focusable={true}
       onBlur={[Function]}
@@ -312,85 +405,146 @@ exports[`can render the Android checkbox on different platforms 1`] = `
           {
             "overflow": "hidden",
           },
-          {
-            "borderRadius": 18,
-            "height": 36,
-            "padding": 6,
-            "width": 36,
-          },
+          [
+            {
+              "alignItems": "center",
+              "borderRadius": 20,
+              "height": 40,
+              "justifyContent": "center",
+              "width": 40,
+            },
+            undefined,
+            undefined,
+          ],
         ]
       }
     >
       <View
-        collapsable={false}
+        pointerEvents="none"
         style={
           {
-            "transform": [
-              {
-                "scale": 1,
-              },
-            ],
+            "alignItems": "center",
+            "height": 40,
+            "justifyContent": "center",
+            "width": 40,
           }
         }
       >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          selectable={false}
-          style={
-            [
-              {
-                "color": "rgba(73, 69, 79, 1)",
-                "fontSize": 24,
-              },
-              [
-                {
-                  "lineHeight": 24,
-                  "transform": [
-                    {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                {
-                  "backgroundColor": "transparent",
-                },
-              ],
-            ]
-          }
-        >
-          checkbox-blank-outline
-        </Text>
         <View
           style={
             [
-              {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
               {
                 "alignItems": "center",
+                "borderRadius": 2,
+                "height": 18,
                 "justifyContent": "center",
+                "overflow": "hidden",
+                "width": 18,
+              },
+              {
+                "opacity": 1,
               },
             ]
           }
         >
           <View
             collapsable={false}
+            pointerEvents="none"
             style={
-              {
-                "borderColor": "rgba(73, 69, 79, 1)",
-                "borderWidth": 0,
-                "height": 14,
-                "width": 14,
-              }
+              [
+                {
+                  "borderRadius": 2,
+                  "borderWidth": 2,
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "borderColor": "rgba(73, 69, 79, 1)",
+                  "opacity": 1,
+                },
+              ]
+            }
+          />
+          <View
+            collapsable={false}
+            pointerEvents="none"
+            style={
+              [
+                {
+                  "borderRadius": 2,
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(103, 80, 164, 1)",
+                  "opacity": 0,
+                },
+              ]
             }
           />
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "height": 18,
+                  "left": 0,
+                  "overflow": "hidden",
+                  "position": "absolute",
+                  "top": 0,
+                },
+                {
+                  "opacity": 0,
+                  "width": 0,
+                },
+              ]
+            }
+          >
+            <View
+              style={
+                {
+                  "alignItems": "center",
+                  "height": 18,
+                  "justifyContent": "center",
+                  "width": 18,
+                }
+              }
+            >
+              <View
+                style={
+                  [
+                    {
+                      "borderBottomWidth": 2,
+                      "borderLeftWidth": 2,
+                      "height": 6,
+                      "transform": [
+                        {
+                          "rotate": "-45deg",
+                        },
+                        {
+                          "translateY": -1,
+                        },
+                        {
+                          "translateX": 1,
+                        },
+                      ],
+                      "width": 11,
+                    },
+                    {
+                      "borderColor": "rgba(255, 255, 255, 1)",
+                    },
+                    null,
+                  ]
+                }
+              />
+            </View>
+          </View>
         </View>
       </View>
     </View>
@@ -398,10 +552,9 @@ exports[`can render the Android checkbox on different platforms 1`] = `
 </View>
 `;
 
-exports[`can render the iOS checkbox on different platforms 1`] = `
+exports[`should have maxFontSizeMultiplier set to 1.5 by default 1`] = `
 <View
-  accessibilityLabel="iOS Checkbox"
-  accessibilityRole="checkbox"
+  accessibilityLabel=""
   accessibilityState={
     {
       "busy": undefined,
@@ -431,12 +584,14 @@ exports[`can render the iOS checkbox on different platforms 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="checkbox"
   style={
     [
       false,
       undefined,
     ]
   }
+  testID="checkbox-item"
 >
   <View
     importantForAccessibility="no-hide-descendants"
@@ -462,7 +617,7 @@ exports[`can render the iOS checkbox on different platforms 1`] = `
             "textAlign": "left",
           },
           {
-            "color": "rgba(28, 27, 31, 1)",
+            "color": "rgba(29, 27, 32, 1)",
             "writingDirection": "ltr",
           },
           [
@@ -470,7 +625,7 @@ exports[`can render the iOS checkbox on different platforms 1`] = `
               "fontFamily": "System",
               "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0.15,
+              "letterSpacing": 0.5,
               "lineHeight": 24,
             },
             [
@@ -478,9 +633,9 @@ exports[`can render the iOS checkbox on different platforms 1`] = `
                 "flexGrow": 1,
                 "flexShrink": 1,
               },
-              false,
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
+                "opacity": 1,
                 "textAlign": "left",
               },
               undefined,
@@ -488,17 +643,12 @@ exports[`can render the iOS checkbox on different platforms 1`] = `
           ],
         ]
       }
-      testID="undefined-text"
-    >
-      iOS Checkbox
-    </Text>
+    />
     <View
-      accessibilityLiveRegion="polite"
-      accessibilityRole="checkbox"
       accessibilityState={
         {
           "busy": undefined,
-          "checked": false,
+          "checked": undefined,
           "disabled": true,
           "expanded": undefined,
           "selected": undefined,
@@ -512,7 +662,8 @@ exports[`can render the iOS checkbox on different platforms 1`] = `
           "text": undefined,
         }
       }
-      accessible={true}
+      accessible={false}
+      centered={true}
       collapsable={false}
       focusable={true}
       onBlur={[Function]}
@@ -529,231 +680,147 @@ exports[`can render the iOS checkbox on different platforms 1`] = `
           {
             "overflow": "hidden",
           },
-          {
-            "borderRadius": 18,
-            "padding": 6,
-          },
+          [
+            {
+              "alignItems": "center",
+              "borderRadius": 20,
+              "height": 40,
+              "justifyContent": "center",
+              "width": 40,
+            },
+            undefined,
+            undefined,
+          ],
         ]
       }
     >
       <View
+        pointerEvents="none"
         style={
           {
-            "opacity": 0,
+            "alignItems": "center",
+            "height": 40,
+            "justifyContent": "center",
+            "width": 40,
           }
         }
       >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          selectable={false}
+        <View
           style={
             [
               {
-                "color": "rgba(103, 80, 164, 1)",
-                "fontSize": 24,
+                "alignItems": "center",
+                "borderRadius": 2,
+                "height": 18,
+                "justifyContent": "center",
+                "overflow": "hidden",
+                "width": 18,
+              },
+              {
+                "opacity": 1,
               },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            pointerEvents="none"
+            style={
               [
                 {
-                  "lineHeight": 24,
-                  "transform": [
-                    {
-                      "scaleX": 1,
-                    },
-                  ],
+                  "borderRadius": 2,
+                  "borderWidth": 2,
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
                 },
                 {
-                  "backgroundColor": "transparent",
+                  "borderColor": "rgba(73, 69, 79, 1)",
+                  "opacity": 1,
                 },
-              ],
-            ]
-          }
-        >
-          check
-        </Text>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`renders unchecked 1`] = `
-<View
-  accessibilityLabel="Unchecked Button"
-  accessibilityRole="checkbox"
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": false,
-      "disabled": true,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
-    }
-  }
-  accessible={true}
-  collapsable={false}
-  focusable={true}
-  onBlur={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    [
-      false,
-      undefined,
-    ]
-  }
->
-  <View
-    importantForAccessibility="no-hide-descendants"
-    pointerEvents="none"
-    style={
-      [
-        {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-          "paddingHorizontal": 16,
-          "paddingVertical": 8,
-        },
-        undefined,
-      ]
-    }
-  >
-    <Text
-      maxFontSizeMultiplier={1.5}
-      style={
-        [
-          {
-            "textAlign": "left",
-          },
-          {
-            "color": "rgba(28, 27, 31, 1)",
-            "writingDirection": "ltr",
-          },
-          [
-            {
-              "fontFamily": "System",
-              "fontSize": 16,
-              "fontWeight": "400",
-              "letterSpacing": 0.15,
-              "lineHeight": 24,
-            },
-            [
-              {
-                "flexGrow": 1,
-                "flexShrink": 1,
-              },
-              false,
-              {
-                "color": "rgba(28, 27, 31, 1)",
-                "textAlign": "left",
-              },
-              undefined,
-            ],
-          ],
-        ]
-      }
-      testID="undefined-text"
-    >
-      Unchecked Button
-    </Text>
-    <View
-      accessibilityLiveRegion="polite"
-      accessibilityRole="checkbox"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": false,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        [
-          {
-            "overflow": "hidden",
-          },
-          {
-            "borderRadius": 18,
-            "padding": 6,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          {
-            "opacity": 0,
-          }
-        }
-      >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          selectable={false}
-          style={
-            [
-              {
-                "color": "rgba(103, 80, 164, 1)",
-                "fontSize": 24,
-              },
+              ]
+            }
+          />
+          <View
+            collapsable={false}
+            pointerEvents="none"
+            style={
               [
                 {
-                  "lineHeight": 24,
-                  "transform": [
-                    {
-                      "scaleX": 1,
-                    },
-                  ],
+                  "borderRadius": 2,
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
                 },
                 {
-                  "backgroundColor": "transparent",
+                  "backgroundColor": "rgba(103, 80, 164, 1)",
+                  "opacity": 0,
                 },
-              ],
-            ]
-          }
-        >
-          check
-        </Text>
+              ]
+            }
+          />
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "height": 18,
+                  "left": 0,
+                  "overflow": "hidden",
+                  "position": "absolute",
+                  "top": 0,
+                },
+                {
+                  "opacity": 0,
+                  "width": 0,
+                },
+              ]
+            }
+          >
+            <View
+              style={
+                {
+                  "alignItems": "center",
+                  "height": 18,
+                  "justifyContent": "center",
+                  "width": 18,
+                }
+              }
+            >
+              <View
+                style={
+                  [
+                    {
+                      "borderBottomWidth": 2,
+                      "borderLeftWidth": 2,
+                      "height": 6,
+                      "transform": [
+                        {
+                          "rotate": "-45deg",
+                        },
+                        {
+                          "translateY": -1,
+                        },
+                        {
+                          "translateX": 1,
+                        },
+                      ],
+                      "width": 11,
+                    },
+                    {
+                      "borderColor": "rgba(255, 255, 255, 1)",
+                    },
+                    null,
+                  ]
+                }
+              />
+            </View>
+          </View>
+        </View>
       </View>
     </View>
   </View>
diff --git a/src/components/__tests__/Checkbox/utils.test.tsx b/src/components/__tests__/Checkbox/utils.test.tsx
index 580e3dbedf..6184bdf329 100644
--- a/src/components/__tests__/Checkbox/utils.test.tsx
+++ b/src/components/__tests__/Checkbox/utils.test.tsx
@@ -1,306 +1,155 @@
-import color from 'color';
-
-import { getTheme } from '../../../core/theming';
-import {
-  getAndroidSelectionControlColor,
-  getSelectionControlIOSColor,
-} from '../../Checkbox/utils';
-
-describe('getAndroidSelectionControlColor - ripple color', () => {
-  it('should return correct disabled color, for theme version 3', () => {
-    expect(
-      getAndroidSelectionControlColor({
-        theme: getTheme(),
-        disabled: true,
-        checked: false,
-      })
-    ).toMatchObject({
-      rippleColor: color(getTheme().colors.onSurface)
-        .alpha(0.16)
-        .rgb()
-        .string(),
-    });
-  });
-
-  it('should return correct disabled color, for theme version 2', () => {
-    expect(
-      getAndroidSelectionControlColor({
-        theme: getTheme(false, false),
-        disabled: true,
-        checked: false,
-      })
-    ).toMatchObject({
-      rippleColor: color(getTheme(false, false).colors.text)
-        .alpha(0.16)
-        .rgb()
-        .string(),
-    });
-  });
-
-  it('should return custom color', () => {
-    expect(
-      getAndroidSelectionControlColor({
-        theme: getTheme(),
-        customColor: 'purple',
-        checked: false,
-      })
-    ).toMatchObject({
-      rippleColor: color('purple').fade(0.32).rgb().string(),
-    });
-  });
-
-  it('should return theme color, for theme version 3', () => {
-    expect(
-      getAndroidSelectionControlColor({
-        theme: getTheme(),
-        checked: false,
-      })
-    ).toMatchObject({
-      rippleColor: color(getTheme().colors.primary).fade(0.32).rgb().string(),
-    });
-  });
-
-  it('should return theme color, for theme version 2', () => {
-    expect(
-      getAndroidSelectionControlColor({
-        theme: getTheme(false, false),
-        checked: false,
-      })
-    ).toMatchObject({
-      rippleColor: color(getTheme(false, false).colors.accent)
-        .fade(0.32)
-        .rgb()
-        .string(),
-    });
-  });
-});
-
-describe('getAndroidSelectionControlColor - checkbox color', () => {
-  it('should return correct disabled color, for theme version 3', () => {
-    expect(
-      getAndroidSelectionControlColor({
-        theme: getTheme(),
-        disabled: true,
-        checked: false,
-      })
-    ).toMatchObject({
-      selectionControlColor: getTheme().colors.onSurfaceDisabled,
-    });
-  });
-
-  it('should return correct disabled color, for theme version 2', () => {
-    expect(
-      getAndroidSelectionControlColor({
-        theme: getTheme(false, false),
-        disabled: true,
-        checked: false,
-      })
-    ).toMatchObject({
-      selectionControlColor: getTheme(false, false).colors.disabled,
-    });
-  });
-
-  it('should return custom color, checked', () => {
-    expect(
-      getAndroidSelectionControlColor({
-        theme: getTheme(),
-        checked: true,
-        customColor: 'purple',
-      })
-    ).toMatchObject({
-      selectionControlColor: 'purple',
-    });
-  });
-
-  it('should return theme color, for theme version 3, checked', () => {
-    expect(
-      getAndroidSelectionControlColor({
-        theme: getTheme(),
-        checked: true,
-      })
-    ).toMatchObject({
-      selectionControlColor: getTheme().colors.primary,
-    });
-  });
-
-  it('should return theme color, for theme version 2, checked', () => {
-    expect(
-      getAndroidSelectionControlColor({
-        theme: getTheme(false, false),
-        checked: true,
-      })
-    ).toMatchObject({
-      selectionControlColor: getTheme(false, false).colors.accent,
-    });
-  });
-
-  it('should return custom color, unchecked', () => {
-    expect(
-      getAndroidSelectionControlColor({
-        theme: getTheme(),
-        checked: false,
-        customUncheckedColor: 'purple',
-      })
-    ).toMatchObject({
-      selectionControlColor: 'purple',
-    });
-  });
-
-  it('should return theme color, for theme version 3, unchecked', () => {
-    expect(
-      getAndroidSelectionControlColor({
-        theme: getTheme(),
-        checked: false,
-      })
-    ).toMatchObject({
-      selectionControlColor: getTheme().colors.onSurfaceVariant,
-    });
-  });
-
-  it('should return theme color, for theme version 2, unchecked, dark mode', () => {
-    expect(
-      getAndroidSelectionControlColor({
-        theme: getTheme(true, false),
-        checked: false,
-      })
-    ).toMatchObject({
-      selectionControlColor: color(getTheme(true, false).colors.text)
-        .alpha(0.7)
-        .rgb()
-        .string(),
-    });
-  });
-
-  it('should return theme color, for theme version 2, unchecked, light mode', () => {
-    expect(
-      getAndroidSelectionControlColor({
-        theme: getTheme(false, false),
-        checked: false,
-      })
-    ).toMatchObject({
-      selectionControlColor: color(getTheme(false, false).colors.text)
-        .alpha(0.54)
-        .rgb()
-        .string(),
-    });
-  });
-});
-
-describe('getSelectionControlIOSColor - ripple color', () => {
-  it('should return correct disabled color, for theme version 3', () => {
-    expect(
-      getSelectionControlIOSColor({
-        theme: getTheme(),
-        disabled: true,
-      })
-    ).toMatchObject({
-      rippleColor: color(getTheme().colors.onSurface)
-        .alpha(0.16)
-        .rgb()
-        .string(),
-    });
-  });
-
-  it('should return correct disabled color, for theme version 2', () => {
-    expect(
-      getSelectionControlIOSColor({
-        theme: getTheme(false, false),
-        disabled: true,
-      })
-    ).toMatchObject({
-      rippleColor: color(getTheme(false, false).colors.text)
-        .alpha(0.16)
-        .rgb()
-        .string(),
-    });
-  });
-
-  it('should return custom color', () => {
-    expect(
-      getSelectionControlIOSColor({
-        theme: getTheme(),
-        customColor: 'purple',
-      })
-    ).toMatchObject({
-      rippleColor: color('purple').fade(0.32).rgb().string(),
-    });
-  });
-
-  it('should return theme color, for theme version 3', () => {
-    expect(
-      getSelectionControlIOSColor({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      rippleColor: color(getTheme().colors.primary).fade(0.32).rgb().string(),
-    });
-  });
-
-  it('should return theme color, for theme version 2', () => {
-    expect(
-      getSelectionControlIOSColor({
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      rippleColor: color(getTheme(false, false).colors.accent)
-        .fade(0.32)
-        .rgb()
-        .string(),
-    });
-  });
-});
-
-describe('getSelectionControlIOSColor - checked color', () => {
-  it('should return correct disabled color, for theme version 3', () => {
-    expect(
-      getSelectionControlIOSColor({
-        theme: getTheme(),
-        disabled: true,
-      })
-    ).toMatchObject({
-      checkedColor: getTheme().colors.onSurfaceDisabled,
-    });
-  });
-
-  it('should return correct disabled color, for theme version 2', () => {
-    expect(
-      getSelectionControlIOSColor({
-        theme: getTheme(false, false),
-        disabled: true,
-      })
-    ).toMatchObject({
-      checkedColor: getTheme(false, false).colors.disabled,
-    });
-  });
-
-  it('should return custom color, checked', () => {
-    expect(
-      getSelectionControlIOSColor({
-        theme: getTheme(),
-        customColor: 'purple',
-      })
-    ).toMatchObject({
-      checkedColor: 'purple',
-    });
-  });
-
-  it('should return theme color, for theme version 3, checked', () => {
-    expect(
-      getSelectionControlIOSColor({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      checkedColor: getTheme().colors.primary,
-    });
+import { describe, expect, it } from '@jest/globals';
+
+import { DarkTheme, LightTheme } from '../../../theme/schemes';
+import { tokens } from '../../../theme/tokens';
+import { getSelectionVisualState } from '../../Checkbox/utils';
+
+const stateOpacity = tokens.md.sys.state.opacity;
+
+describe('getSelectionVisualState', () => {
+  describe('containerColor (the fill)', () => {
+    it('uses theme.colors.primary when selected (default)', () => {
+      expect(
+        getSelectionVisualState({ theme: LightTheme, selected: true })
+      ).toMatchObject({
+        containerColor: LightTheme.colors.primary,
+      });
+    });
+
+    it('uses theme.colors.error when selected + error', () => {
+      expect(
+        getSelectionVisualState({
+          theme: LightTheme,
+          selected: true,
+          error: true,
+        })
+      ).toMatchObject({ containerColor: LightTheme.colors.error });
+    });
+
+    it('uses customColor when provided (overrides error)', () => {
+      expect(
+        getSelectionVisualState({
+          theme: LightTheme,
+          selected: true,
+          error: true,
+          customColor: 'purple',
+        })
+      ).toMatchObject({ containerColor: 'purple' });
+    });
+
+    it('falls back to onSurface when disabled (overrides customColor)', () => {
+      expect(
+        getSelectionVisualState({
+          theme: LightTheme,
+          selected: true,
+          disabled: true,
+          customColor: 'purple',
+        })
+      ).toMatchObject({ containerColor: LightTheme.colors.onSurface });
+    });
+  });
+
+  describe('outlineColor (unselected border)', () => {
+    it('uses theme.colors.onSurfaceVariant by default', () => {
+      expect(
+        getSelectionVisualState({ theme: LightTheme, selected: false })
+      ).toMatchObject({ outlineColor: LightTheme.colors.onSurfaceVariant });
+    });
+
+    it('uses theme.colors.error when error', () => {
+      expect(
+        getSelectionVisualState({
+          theme: LightTheme,
+          selected: false,
+          error: true,
+        })
+      ).toMatchObject({ outlineColor: LightTheme.colors.error });
+    });
+
+    it('uses customUncheckedColor when provided (overrides error)', () => {
+      expect(
+        getSelectionVisualState({
+          theme: LightTheme,
+          selected: false,
+          error: true,
+          customUncheckedColor: 'orange',
+        })
+      ).toMatchObject({ outlineColor: 'orange' });
+    });
+
+    it('falls back to onSurface when disabled', () => {
+      expect(
+        getSelectionVisualState({
+          theme: LightTheme,
+          selected: false,
+          disabled: true,
+          customUncheckedColor: 'orange',
+        })
+      ).toMatchObject({ outlineColor: LightTheme.colors.onSurface });
+    });
+  });
+
+  describe('iconColor (checkmark / dash glyph)', () => {
+    it('keeps its color when unselected while the mask hides it', () => {
+      expect(
+        getSelectionVisualState({ theme: LightTheme, selected: false })
+      ).toMatchObject({ iconColor: LightTheme.colors.onPrimary });
+    });
+
+    it('uses theme.colors.onPrimary when selected (default)', () => {
+      expect(
+        getSelectionVisualState({ theme: LightTheme, selected: true })
+      ).toMatchObject({
+        iconColor: LightTheme.colors.onPrimary,
+      });
+    });
+
+    it('uses theme.colors.onError when selected + error', () => {
+      expect(
+        getSelectionVisualState({
+          theme: LightTheme,
+          selected: true,
+          error: true,
+        })
+      ).toMatchObject({ iconColor: LightTheme.colors.onError });
+    });
+
+    it('uses theme.colors.surface when selected + disabled', () => {
+      expect(
+        getSelectionVisualState({
+          theme: LightTheme,
+          selected: true,
+          disabled: true,
+        })
+      ).toMatchObject({ iconColor: LightTheme.colors.surface });
+    });
+  });
+
+  describe('containerOpacity', () => {
+    it('is the enabled state opacity by default', () => {
+      expect(
+        getSelectionVisualState({ theme: LightTheme, selected: true })
+      ).toMatchObject({
+        containerOpacity: stateOpacity.enabled,
+      });
+    });
+
+    it('drops to the disabled state opacity when disabled', () => {
+      expect(
+        getSelectionVisualState({
+          theme: LightTheme,
+          selected: true,
+          disabled: true,
+        })
+      ).toMatchObject({ containerOpacity: stateOpacity.disabled });
+    });
   });
 
-  it('should return theme color, for theme version 2, checked', () => {
-    expect(
-      getSelectionControlIOSColor({
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      checkedColor: getTheme(false, false).colors.accent,
+  describe('dark theme', () => {
+    it('respects the dark theme palette', () => {
+      const v = getSelectionVisualState({ theme: DarkTheme, selected: true });
+      expect(v.containerColor).toBe(DarkTheme.colors.primary);
+      expect(v.iconColor).toBe(DarkTheme.colors.onPrimary);
     });
   });
 });
diff --git a/src/components/__tests__/Chip.test.tsx b/src/components/__tests__/Chip.test.tsx
index ca3055e35b..a7d522e4f0 100644
--- a/src/components/__tests__/Chip.test.tsx
+++ b/src/components/__tests__/Chip.test.tsx
@@ -1,92 +1,96 @@
-import * as React from 'react';
-import { Animated } from 'react-native';
-
-import { act, render } from '@testing-library/react-native';
+import { describe, expect, it } from '@jest/globals';
 import color from 'color';
 
-import { getTheme } from '../../core/theming';
-import { black, white } from '../../styles/themes/v2/colors';
+import { render, screen } from '../../test-utils';
+import { DarkTheme, LightTheme } from '../../theme/schemes';
+import { tokens } from '../../theme/tokens';
 import Chip from '../Chip/Chip';
 import { getChipColors } from '../Chip/helpers';
 
-it('renders chip with onPress', () => {
-  const tree = render(<Chip onPress={() => {}}>Example Chip</Chip>).toJSON();
+const stateOpacity = tokens.md.sys.state.opacity;
+
+it('renders chip with onPress', async () => {
+  const tree = (
+    await render(<Chip onPress={() => {}}>Example Chip</Chip>)
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders chip with icon', () => {
-  const tree = render(<Chip icon="information">Example Chip</Chip>).toJSON();
+it('renders chip with icon', async () => {
+  const tree = (
+    await render(<Chip icon="information">Example Chip</Chip>)
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders chip with close button', () => {
-  const tree = render(
-    <Chip icon="information" onClose={() => {}}>
-      Example Chip
-    </Chip>
+it('renders chip with close button', async () => {
+  const tree = (
+    await render(
+      <Chip icon="information" onClose={() => {}}>
+        Example Chip
+      </Chip>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders chip with custom close button', () => {
-  const tree = render(
-    <Chip icon="information" onClose={() => {}} closeIcon="arrow-down">
-      Example Chip
-    </Chip>
+it('renders chip with custom close button', async () => {
+  const tree = (
+    await render(
+      <Chip icon="information" onClose={() => {}} closeIcon="arrow-down">
+        Example Chip
+      </Chip>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders outlined disabled chip', () => {
-  const tree = render(
-    <Chip mode="outlined" disabled>
-      Example Chip
-    </Chip>
+it('renders outlined disabled chip', async () => {
+  const tree = (
+    await render(
+      <Chip mode="outlined" disabled>
+        Example Chip
+      </Chip>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders selected chip', () => {
-  const tree = render(<Chip selected>Example Chip</Chip>).toJSON();
+it('renders selected chip', async () => {
+  const tree = (await render(<Chip selected>Example Chip</Chip>)).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders disabled chip if there is no touch handler passed', () => {
-  const { getByTestId } = render(
-    <Chip testID="disabled-chip">Disabled chip</Chip>
-  );
+it('renders disabled chip if there is no touch handler passed', async () => {
+  await render(<Chip testID="disabled-chip">Disabled chip</Chip>);
 
-  expect(getByTestId('disabled-chip').props.accessibilityState).toMatchObject({
-    disabled: true,
-  });
+  expect(screen.getByTestId('disabled-chip')).toBeDisabled();
 });
 
-it('renders active chip if only onLongPress handler is passed', () => {
-  const { getByTestId } = render(
+it('renders active chip if only onLongPress handler is passed', async () => {
+  await render(
     <Chip onLongPress={() => {}} testID="active-chip">
       Active chip
     </Chip>
   );
 
-  expect(getByTestId('active-chip').props.accessibilityState).toMatchObject({
-    disabled: false,
-  });
+  expect(screen.getByTestId('active-chip')).toBeEnabled();
 });
 
-it('renders chip with zero border radius', () => {
-  const { getByTestId } = render(
-    <Chip testID="active-chip" theme={{ roundness: 0 }}>
+it('renders chip with zero border radius', async () => {
+  await render(
+    <Chip testID="active-chip" theme={{ shapes: { corner: { small: 0 } } }}>
       Active chip
     </Chip>
   );
 
-  expect(getByTestId('active-chip')).toHaveStyle({
+  expect(screen.getByTestId('active-chip')).toHaveStyle({
     borderRadius: 0,
   });
 });
@@ -96,66 +100,41 @@ describe('getChipColors - text color', () => {
     expect(
       getChipColors({
         disabled: true,
-        theme: getTheme(),
+        theme: LightTheme,
         isOutlined: false,
       })
     ).toMatchObject({
-      textColor: getTheme().colors.onSurfaceDisabled,
-    });
-  });
-
-  it('should return correct disabled color, for theme version 2', () => {
-    expect(
-      getChipColors({
-        disabled: true,
-        theme: getTheme(false, false),
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      textColor: getTheme(false, false).colors.disabled,
+      textColor: LightTheme.colors.onSurface,
+      contentOpacity: stateOpacity.disabled,
     });
   });
 
   it('should return correct theme color, for theme version 3, flat mode', () => {
     expect(
       getChipColors({
-        theme: getTheme(),
+        theme: LightTheme,
         isOutlined: false,
       })
     ).toMatchObject({
-      textColor: getTheme().colors.onSecondaryContainer,
+      textColor: LightTheme.colors.onSecondaryContainer,
     });
   });
 
   it('should return correct theme color, for theme version 3, outlined mode', () => {
     expect(
       getChipColors({
-        theme: getTheme(),
+        theme: LightTheme,
         isOutlined: true,
       })
     ).toMatchObject({
-      textColor: getTheme().colors.onSurfaceVariant,
-    });
-  });
-
-  it('should return correct theme color, for theme version 2', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(false, false),
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      textColor: color(getTheme(false, false).colors.text)
-        .alpha(0.87)
-        .rgb()
-        .string(),
+      textColor: LightTheme.colors.onSurfaceVariant,
     });
   });
 
   it('should return custom color, for theme version 3', () => {
     expect(
       getChipColors({
-        theme: getTheme(),
+        theme: LightTheme,
         selectedColor: 'purple',
         isOutlined: false,
       })
@@ -163,18 +142,6 @@ describe('getChipColors - text color', () => {
       textColor: 'purple',
     });
   });
-
-  it('should return custom color, for theme version 2', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(false, false),
-        selectedColor: 'purple',
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      textColor: color('purple').alpha(0.87).rgb().string(),
-    });
-  });
 });
 
 describe('getChipColors - icon color', () => {
@@ -182,66 +149,41 @@ describe('getChipColors - icon color', () => {
     expect(
       getChipColors({
         disabled: true,
-        theme: getTheme(),
+        theme: LightTheme,
         isOutlined: false,
       })
     ).toMatchObject({
-      iconColor: getTheme().colors.onSurfaceDisabled,
-    });
-  });
-
-  it('should return correct disabled color, for theme version 2', () => {
-    expect(
-      getChipColors({
-        disabled: true,
-        theme: getTheme(false, false),
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      iconColor: getTheme(false, false).colors.disabled,
+      iconColor: LightTheme.colors.onSurface,
+      contentOpacity: stateOpacity.disabled,
     });
   });
 
   it('should return correct theme color, for theme version 3, flat mode', () => {
     expect(
       getChipColors({
-        theme: getTheme(),
+        theme: LightTheme,
         isOutlined: false,
       })
     ).toMatchObject({
-      iconColor: getTheme().colors.onSecondaryContainer,
+      iconColor: LightTheme.colors.onSecondaryContainer,
     });
   });
 
   it('should return correct theme color, for theme version 3, outlined mode', () => {
     expect(
       getChipColors({
-        theme: getTheme(),
+        theme: LightTheme,
         isOutlined: true,
       })
     ).toMatchObject({
-      iconColor: getTheme().colors.onSurfaceVariant,
-    });
-  });
-
-  it('should return correct theme color, for theme version 2', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(false, false),
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      iconColor: color(getTheme(false, false).colors.text)
-        .alpha(0.54)
-        .rgb()
-        .string(),
+      iconColor: LightTheme.colors.onSurfaceVariant,
     });
   });
 
   it('should return custom color, for theme version 3', () => {
     expect(
       getChipColors({
-        theme: getTheme(),
+        theme: LightTheme,
         selectedColor: 'purple',
         isOutlined: false,
       })
@@ -249,413 +191,28 @@ describe('getChipColors - icon color', () => {
       iconColor: 'purple',
     });
   });
-
-  it('should return custom color, for theme version 2', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(false, false),
-        selectedColor: 'purple',
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      iconColor: color('purple').alpha(0.54).rgb().string(),
-    });
-  });
-});
-
-describe('getChipColors - ripple color', () => {
-  it('should return theme color, for theme version 3, flat mode', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(),
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      rippleColor: color(getTheme().colors.onSecondaryContainer)
-        .alpha(0.12)
-        .rgb()
-        .string(),
-    });
-  });
-
-  it('should return theme color, for theme version 3, outline mode', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(),
-        isOutlined: true,
-      })
-    ).toMatchObject({
-      rippleColor: color(getTheme().colors.onSurfaceVariant)
-        .alpha(0.12)
-        .rgb()
-        .string(),
-    });
-  });
-
-  it('should return custom color, for theme version 3', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(),
-        selectedColor: 'purple',
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      rippleColor: color('purple').alpha(0.12).rgb().string(),
-    });
-  });
-
-  it('should return custom color, for theme version 2', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(false, false),
-        selectedColor: 'purple',
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      rippleColor: color('purple').fade(0.5).rgb().string(),
-    });
-  });
-
-  it('should return custom color, for theme version 2, dark mode, outline mode, customBackgroundColor', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(true, false),
-        customBackgroundColor: 'purple',
-        isOutlined: true,
-      })
-    ).toMatchObject({
-      rippleColor: color('purple').lighten(0.2).rgb().string(),
-    });
-  });
-
-  it('should return custom color, for theme version 2, dark mode, flat mode, customBackgroundColor', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(true, false),
-        customBackgroundColor: 'purple',
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      rippleColor: color('purple').lighten(0.4).rgb().string(),
-    });
-  });
-
-  it('should return custom color, for theme version 2, light mode, outline mode, customBackgroundColor', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(false, false),
-        customBackgroundColor: 'purple',
-        isOutlined: true,
-      })
-    ).toMatchObject({
-      rippleColor: color('purple').darken(0.08).rgb().string(),
-    });
-  });
-
-  it('should return custom color, for theme version 2, light mode, flat mode, customBackgroundColor', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(false, false),
-        customBackgroundColor: 'purple',
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      rippleColor: color('purple').darken(0.2).rgb().string(),
-    });
-  });
-
-  it('should return theme color, for theme version 2, light mode, outline mode', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(false, false),
-        isOutlined: true,
-      })
-    ).toMatchObject({
-      rippleColor: color(getTheme(false, false).colors.surface)
-        .darken(0.08)
-        .rgb()
-        .string(),
-    });
-  });
-
-  it('should return theme color, for theme version 2, light mode, flat mode', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(false, false),
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      rippleColor: color('#ebebeb').darken(0.2).rgb().string(),
-    });
-  });
-
-  it('should return theme color, for theme version 2, dark mode, outline mode', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(true, false),
-        isOutlined: true,
-      })
-    ).toMatchObject({
-      rippleColor: color(getTheme(true, false).colors.surface)
-        .lighten(0.2)
-        .rgb()
-        .string(),
-    });
-  });
-
-  it('should return theme color, for theme version 2, dark mode, flat mode', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(true, false),
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      rippleColor: color('#383838').lighten(0.4).rgb().string(),
-    });
-  });
-});
-
-describe('getChipColor - selected background color', () => {
-  it('should return custom color, for theme version 3, outlined mode', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(),
-        customBackgroundColor: 'purple',
-        isOutlined: true,
-      })
-    ).toMatchObject({
-      selectedBackgroundColor: color('purple')
-        .mix(color(getTheme().colors.onSurfaceVariant), 0)
-        .rgb()
-        .string(),
-    });
-  });
-
-  it('should return custom color, for theme version 3, flat mode', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(),
-        customBackgroundColor: 'purple',
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      selectedBackgroundColor: color('purple')
-        .mix(color(getTheme().colors.onSecondaryContainer), 0)
-        .rgb()
-        .string(),
-    });
-  });
-
-  it('should return custom color, for theme version 3, outlined mode, show selected overlay', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(),
-        customBackgroundColor: 'purple',
-        showSelectedOverlay: true,
-        isOutlined: true,
-      })
-    ).toMatchObject({
-      selectedBackgroundColor: color('purple')
-        .mix(color(getTheme().colors.onSurfaceVariant), 0.12)
-        .rgb()
-        .string(),
-    });
-  });
-
-  it('should return custom color, for theme version 3, flat mode, show selected overlay', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(),
-        customBackgroundColor: 'purple',
-        showSelectedOverlay: true,
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      selectedBackgroundColor: color('purple')
-        .mix(color(getTheme().colors.onSecondaryContainer), 0.12)
-        .rgb()
-        .string(),
-    });
-  });
-
-  it('should return theme color, for theme version 3, outlined mode', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(),
-        isOutlined: true,
-      })
-    ).toMatchObject({
-      selectedBackgroundColor: color(getTheme().colors.surface)
-        .mix(color(getTheme().colors.onSurfaceVariant), 0)
-        .rgb()
-        .string(),
-    });
-  });
-
-  it('should return theme color, for theme version 3, flat mode', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(),
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      selectedBackgroundColor: color(getTheme().colors.secondaryContainer)
-        .mix(color(getTheme().colors.onSecondaryContainer), 0)
-        .rgb()
-        .string(),
-    });
-  });
-
-  it('should return custom color, for theme version 2, light mode, outlined mode', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(false, false),
-        customBackgroundColor: 'purple',
-        isOutlined: true,
-      })
-    ).toMatchObject({
-      selectedBackgroundColor: color('purple').darken(0.08).rgb().string(),
-    });
-  });
-
-  it('should return custom color, for theme version 2, light mode, flat mode', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(false, false),
-        customBackgroundColor: 'purple',
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      selectedBackgroundColor: color('purple').darken(0.2).rgb().string(),
-    });
-  });
-
-  it('should return custom color, for theme version 2, dark mode, outlined mode', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(true, false),
-        customBackgroundColor: 'purple',
-        isOutlined: true,
-      })
-    ).toMatchObject({
-      selectedBackgroundColor: color('purple').lighten(0.2).rgb().string(),
-    });
-  });
-
-  it('should return custom color, for theme version 2, dark mode, flat mode', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(true, false),
-        customBackgroundColor: 'purple',
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      selectedBackgroundColor: color('purple').lighten(0.4).rgb().string(),
-    });
-  });
-
-  it('should return theme color, for theme version 2, outlined mode', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(false, false),
-        isOutlined: true,
-      })
-    ).toMatchObject({
-      selectedBackgroundColor: color(getTheme(false, false).colors.surface)
-        .darken(0.08)
-        .rgb()
-        .string(),
-    });
-  });
-
-  it('should return theme color, for theme version 2, light mode, flat mode', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(false, false),
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      selectedBackgroundColor: color('#ebebeb').darken(0.2).rgb().string(),
-    });
-  });
-
-  it('should return theme color, for theme version 2, dark mode, flat mode', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(true, false),
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      selectedBackgroundColor: color('#383838').lighten(0.4).rgb().string(),
-    });
-  });
 });
 
 describe('getChipColor - background color', () => {
-  it('should return custom color', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(),
-        customBackgroundColor: 'purple',
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      backgroundColor: 'purple',
-    });
-  });
-
   it('should return theme color, for theme version 3, outlined mode', () => {
     expect(
       getChipColors({
-        theme: getTheme(),
+        theme: LightTheme,
         isOutlined: true,
       })
     ).toMatchObject({
-      backgroundColor: getTheme().colors.surface,
+      backgroundColor: LightTheme.colors.surface,
     });
   });
 
   it('should return theme color, for theme version 3, flat mode', () => {
     expect(
       getChipColors({
-        theme: getTheme(),
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      backgroundColor: getTheme().colors.secondaryContainer,
-    });
-  });
-
-  it('should return theme color, for theme version 2, outlined mode', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(false, false),
-        isOutlined: true,
-      })
-    ).toMatchObject({
-      backgroundColor: getTheme(false, false).colors.surface,
-    });
-  });
-
-  it('should return theme color, for theme version 2, light mode, flat mode', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(false, false),
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      backgroundColor: '#ebebeb',
-    });
-  });
-
-  it('should return theme color, for theme version 2, dark mode, flat mode', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(true, false),
+        theme: LightTheme,
         isOutlined: false,
       })
     ).toMatchObject({
-      backgroundColor: '#383838',
+      backgroundColor: LightTheme.colors.secondaryContainer,
     });
   });
 });
@@ -664,7 +221,7 @@ describe('getChipColor - border color', () => {
   it('should return correct disabled color, for theme version 3', () => {
     expect(
       getChipColors({
-        theme: getTheme(),
+        theme: LightTheme,
         disabled: true,
         isOutlined: false,
       })
@@ -676,7 +233,7 @@ describe('getChipColor - border color', () => {
   it('should return custom color, for theme version 3', () => {
     expect(
       getChipColors({
-        theme: getTheme(),
+        theme: LightTheme,
         selectedColor: 'purple',
         isOutlined: false,
       })
@@ -688,7 +245,7 @@ describe('getChipColor - border color', () => {
   it('should return theme color, for theme version 3', () => {
     expect(
       getChipColors({
-        theme: getTheme(),
+        theme: LightTheme,
         isOutlined: false,
       })
     ).toMatchObject({
@@ -696,10 +253,10 @@ describe('getChipColor - border color', () => {
     });
   });
 
-  it('should return custom color, for theme version 2, outlined mode', () => {
+  it('should return custom color, outlined mode', () => {
     expect(
       getChipColors({
-        theme: getTheme(false, false),
+        theme: LightTheme,
         selectedColor: 'purple',
         isOutlined: true,
       })
@@ -708,88 +265,47 @@ describe('getChipColor - border color', () => {
     });
   });
 
-  it('should return custom color, for theme version 2, flat mode', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(true, false),
-        customBackgroundColor: 'purple',
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      borderColor: 'purple',
-    });
-  });
-
-  it('should return theme color, for theme version 2, light mode, outlined mode', () => {
+  it('should return theme color, light mode, outlined mode', () => {
     expect(
       getChipColors({
-        theme: getTheme(false, false),
+        theme: LightTheme,
         isOutlined: true,
       })
     ).toMatchObject({
-      borderColor: color(black).alpha(0.29).rgb().string(),
+      borderColor: LightTheme.colors.outlineVariant,
     });
   });
 
-  it('should return theme color, for theme version 2, dark mode, outlined mode', () => {
+  it('should return theme color, dark mode, outlined mode', () => {
     expect(
       getChipColors({
-        theme: getTheme(true, false),
+        theme: DarkTheme,
         isOutlined: true,
       })
     ).toMatchObject({
-      borderColor: color(white).alpha(0.29).rgb().string(),
+      borderColor: DarkTheme.colors.outlineVariant,
     });
   });
 
-  it('should return theme background color, for theme version 2, light mode, flat mode', () => {
+  it('should return theme background color, light mode, flat mode', () => {
     expect(
       getChipColors({
-        theme: getTheme(false, false),
+        theme: LightTheme,
         isOutlined: false,
       })
     ).toMatchObject({
-      borderColor: '#ebebeb',
+      borderColor: 'transparent',
     });
   });
 
-  it('should return theme background color, for theme version 2, dark mode, flat mode', () => {
+  it('should return theme background color, dark mode, flat mode', () => {
     expect(
       getChipColors({
-        theme: getTheme(true, false),
+        theme: DarkTheme,
         isOutlined: false,
       })
     ).toMatchObject({
-      borderColor: '#383838',
+      borderColor: 'transparent',
     });
   });
 });
-
-it('animated value changes correctly', () => {
-  const value = new Animated.Value(1);
-  const { getByTestId } = render(
-    <Chip
-      onPress={() => {}}
-      testID="chip"
-      style={[{ transform: [{ scale: value }] }]}
-    >
-      Example Chip
-    </Chip>
-  );
-  expect(getByTestId('chip-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1 }],
-  });
-
-  Animated.timing(value, {
-    toValue: 1.5,
-    useNativeDriver: false,
-    duration: 200,
-  }).start();
-
-  act(() => {
-    jest.advanceTimersByTime(200);
-  });
-  expect(getByTestId('chip-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1.5 }],
-  });
-});
diff --git a/src/components/__tests__/DataTable.test.tsx b/src/components/__tests__/DataTable.test.tsx
index ae212d281f..7a29a72800 100644
--- a/src/components/__tests__/DataTable.test.tsx
+++ b/src/components/__tests__/DataTable.test.tsx
@@ -1,17 +1,18 @@
-import * as React from 'react';
-
-import { render } from '@testing-library/react-native';
+import { describe, expect, it } from '@jest/globals';
 
+import { render, screen } from '../../test-utils';
 import Checkbox from '../Checkbox';
 import DataTable from '../DataTable/DataTable';
 
 describe('DataTable.Header', () => {
-  it('renders data table header', () => {
-    const tree = render(
-      <DataTable.Header>
-        <DataTable.Title>Dessert</DataTable.Title>
-        <DataTable.Title>Calories</DataTable.Title>
-      </DataTable.Header>
+  it('renders data table header', async () => {
+    const tree = (
+      await render(
+        <DataTable.Header>
+          <DataTable.Title>Dessert</DataTable.Title>
+          <DataTable.Title>Calories</DataTable.Title>
+        </DataTable.Header>
+      )
     ).toJSON();
 
     expect(tree).toMatchSnapshot();
@@ -19,27 +20,31 @@ describe('DataTable.Header', () => {
 });
 
 describe('DataTable.Title', () => {
-  it('renders data table title with sort icon', () => {
-    const tree = render(
-      <DataTable.Title sortDirection="descending">Dessert</DataTable.Title>
+  it('renders data table title with sort icon', async () => {
+    const tree = (
+      await render(
+        <DataTable.Title sortDirection="descending">Dessert</DataTable.Title>
+      )
     ).toJSON();
 
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders right aligned data table title', () => {
-    const tree = render(
-      <DataTable.Title numeric>Calories</DataTable.Title>
+  it('renders right aligned data table title', async () => {
+    const tree = (
+      await render(<DataTable.Title numeric>Calories</DataTable.Title>)
     ).toJSON();
 
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders data table title with press handler', () => {
-    const tree = render(
-      <DataTable.Title sortDirection="descending" onPress={() => {}}>
-        Dessert
-      </DataTable.Title>
+  it('renders data table title with press handler', async () => {
+    const tree = (
+      await render(
+        <DataTable.Title sortDirection="descending" onPress={() => {}}>
+          Dessert
+        </DataTable.Title>
+      )
     ).toJSON();
 
     expect(tree).toMatchSnapshot();
@@ -47,62 +52,75 @@ describe('DataTable.Title', () => {
 });
 
 describe('DataTable.Cell', () => {
-  it('renders data table cell', () => {
-    const tree = render(<DataTable.Cell>Cupcake</DataTable.Cell>).toJSON();
+  it('renders data table cell', async () => {
+    const tree = (
+      await render(<DataTable.Cell>Cupcake</DataTable.Cell>)
+    ).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders right aligned data table cell', () => {
-    const tree = render(<DataTable.Cell numeric>356</DataTable.Cell>).toJSON();
+  it('renders right aligned data table cell', async () => {
+    const tree = (
+      await render(<DataTable.Cell numeric>356</DataTable.Cell>)
+    ).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders data table cell with text container', () => {
-    const { getByText, getByTestId } = render(
-      <DataTable.Cell testID="table-cell">Table cell</DataTable.Cell>
-    );
+  it('renders data table cell with text content', async () => {
+    const tree = (
+      await render(
+        <DataTable.Cell testID="table-cell">Table cell</DataTable.Cell>
+      )
+    ).toJSON();
 
-    expect(getByText('Table cell')).toBeOnTheScreen();
-    expect(getByTestId('table-cell-text-container')).toBeOnTheScreen();
+    expect(screen.getByText('Table cell')).toBeOnTheScreen();
+    expect(tree).toMatchSnapshot();
   });
 
-  it('renders data table cell children without text container', () => {
-    const { queryByTestId } = render(
-      <DataTable.Cell testID="table-cell">
-        <Checkbox status="checked" testID="table-cell-checkbox" />
-      </DataTable.Cell>
-    );
+  it('renders data table cell children without wrapping text component', async () => {
+    const tree = (
+      await render(
+        <DataTable.Cell testID="table-cell">
+          <Checkbox status="checked" testID="table-cell-checkbox" />
+        </DataTable.Cell>
+      )
+    ).toJSON();
 
-    expect(queryByTestId('table-cell-text-container')).not.toBeOnTheScreen();
+    expect(screen.getByTestId('table-cell-checkbox')).toBeOnTheScreen();
+    expect(tree).toMatchSnapshot();
   });
 });
 
 describe('DataTable.Pagination', () => {
-  it('renders data table pagination', () => {
-    const tree = render(
-      <DataTable.Pagination
-        page={3}
-        numberOfPages={15}
-        onPageChange={() => {}}
-      />
+  it('renders data table pagination', async () => {
+    const tree = (
+      await render(
+        <DataTable.Pagination
+          page={3}
+          numberOfPages={15}
+          onPageChange={() => {}}
+        />
+      )
     ).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders data table pagination with label', () => {
-    const tree = render(
-      <DataTable.Pagination
-        page={3}
-        numberOfPages={15}
-        onPageChange={() => {}}
-        label="11-20 of 150"
-      />
+  it('renders data table pagination with label', async () => {
+    const tree = (
+      await render(
+        <DataTable.Pagination
+          page={3}
+          numberOfPages={15}
+          onPageChange={() => {}}
+          label="11-20 of 150"
+        />
+      )
     ).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders data table pagination with fast-forward buttons', () => {
-    const { getByLabelText, toJSON } = render(
+  it('renders data table pagination with fast-forward buttons', async () => {
+    const { toJSON } = await render(
       <DataTable.Pagination
         page={3}
         numberOfPages={15}
@@ -112,13 +130,13 @@ describe('DataTable.Pagination', () => {
       />
     );
 
-    expect(getByLabelText('page-first')).toBeTruthy();
-    expect(getByLabelText('page-last')).toBeTruthy();
+    expect(screen.getByLabelText('page-first')).toBeOnTheScreen();
+    expect(screen.getByLabelText('page-last')).toBeOnTheScreen();
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('renders data table pagination without options select', () => {
-    const { queryByLabelText } = render(
+  it('renders data table pagination without options select', async () => {
+    await render(
       <DataTable.Pagination
         page={3}
         numberOfPages={15}
@@ -128,11 +146,11 @@ describe('DataTable.Pagination', () => {
       />
     );
 
-    expect(queryByLabelText('Options Select')).toBeFalsy();
+    expect(screen.queryByLabelText('Options Select')).not.toBeOnTheScreen();
   });
 
-  it('renders data table pagination with options select', () => {
-    const { getByLabelText, toJSON } = render(
+  it('renders data table pagination with options select', async () => {
+    const { toJSON } = await render(
       <DataTable.Pagination
         page={3}
         numberOfPages={15}
@@ -146,8 +164,8 @@ describe('DataTable.Pagination', () => {
       />
     );
 
-    expect(getByLabelText('Options Select')).toBeTruthy();
-    expect(getByLabelText('selectPageDropdownLabel')).toBeTruthy();
+    expect(screen.getByLabelText('Options Select')).toBeOnTheScreen();
+    expect(screen.getByLabelText('selectPageDropdownLabel')).toBeOnTheScreen();
 
     expect(toJSON()).toMatchSnapshot();
   });
diff --git a/src/components/__tests__/Dialog.test.tsx b/src/components/__tests__/Dialog.test.tsx
index 8f7e327a72..bae85cb874 100644
--- a/src/components/__tests__/Dialog.test.tsx
+++ b/src/components/__tests__/Dialog.test.tsx
@@ -1,155 +1,303 @@
-import React from 'react';
+import type { ComponentProps } from 'react';
 import {
   Text,
   StyleSheet,
   Platform,
   BackHandler as RNBackHandler,
-  BackHandlerStatic as RNBackHandlerStatic,
 } from 'react-native';
+import type { BackHandlerStatic as RNBackHandlerStatic } from 'react-native';
 
-import { act, fireEvent, render } from '@testing-library/react-native';
+import { afterEach, describe, expect, it, jest } from '@jest/globals';
+import { act, userEvent } from '@testing-library/react-native';
 
 import Dialog from '../../components/Dialog/Dialog';
+import { render, screen } from '../../test-utils';
 import Button from '../Button/Button';
+import Portal from '../Portal/Portal';
 
 interface BackHandlerStatic extends RNBackHandlerStatic {
   mockPressBack(): void;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
 const BackHandler = RNBackHandler as BackHandlerStatic;
 
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
 describe('Dialog', () => {
-  it('should render passed children', () => {
-    const { getByTestId } = render(
-      <Dialog visible testID="dialog">
-        <Text>This is simple dialog</Text>
-      </Dialog>
+  it('renders passed children', async () => {
+    await render(
+      <Portal.Host>
+        <Dialog visible testID="dialog">
+          <Text>This is simple dialog</Text>
+        </Dialog>
+      </Portal.Host>
     );
 
-    expect(getByTestId('dialog')).toHaveTextContent('This is simple dialog');
+    expect(screen.getByTestId('dialog')).toHaveTextContent(
+      'This is simple dialog'
+    );
   });
 
-  it('should call onDismiss when dismissable', () => {
+  it('invokes onDismiss when the visually hidden dismiss button is pressed', async () => {
     const onDismiss = jest.fn();
-    const { getByTestId } = render(
-      <Dialog visible onDismiss={onDismiss} dismissable testID="dialog">
-        <Text>This is simple dialog</Text>
-      </Dialog>
+
+    await render(
+      <Portal.Host>
+        <Dialog visible onDismiss={onDismiss} dismissable>
+          <Text>This is simple dialog</Text>
+        </Dialog>
+      </Portal.Host>
     );
 
-    fireEvent.press(getByTestId('dialog-backdrop'));
+    await userEvent.press(screen.getByRole('button', { name: 'Close modal' }));
 
-    act(() => {
+    await act(() => {
       jest.runAllTimers();
     });
+
     expect(onDismiss).toHaveBeenCalledTimes(1);
   });
 
-  it('should not call onDismiss when dismissable is false', () => {
+  it('does not invoke onDismiss for a non-dismissible dialog when the backdrop is pressed', async () => {
     const onDismiss = jest.fn();
-    const { getByTestId } = render(
-      <Dialog visible onDismiss={onDismiss} dismissable={false} testID="dialog">
-        <Text>This is simple dialog</Text>
-      </Dialog>
+
+    await render(
+      <Portal.Host>
+        <Dialog
+          visible
+          onDismiss={onDismiss}
+          dismissable={false}
+          overlayTestID="backdrop"
+        >
+          <Text>This is simple dialog</Text>
+        </Dialog>
+      </Portal.Host>
     );
 
-    fireEvent.press(getByTestId('dialog-backdrop'));
+    await userEvent.press(
+      screen.getByTestId('backdrop', { includeHiddenElements: true })
+    );
 
-    act(() => {
+    await act(() => {
       jest.runAllTimers();
     });
+
     expect(onDismiss).toHaveBeenCalledTimes(0);
   });
 
-  it('should call onDismiss on Android back button when dismissable is false but dismissableBackButton is true', () => {
-    Platform.OS = 'android';
+  it('invokes onDismiss on Android back button press when only dismissableBackButton is true', async () => {
+    jest.replaceProperty(Platform, 'OS', 'android');
+
     const onDismiss = jest.fn();
-    const { getByTestId } = render(
-      <Dialog
-        visible
-        onDismiss={onDismiss}
-        dismissable={false}
-        dismissableBackButton
-        testID="dialog"
-      >
-        <Text>This is simple dialog</Text>
-      </Dialog>
+
+    await render(
+      <Portal.Host>
+        <Dialog
+          visible
+          onDismiss={onDismiss}
+          dismissable={false}
+          overlayTestID="backdrop"
+          dismissableBackButton
+        >
+          <Text>This is simple dialog</Text>
+        </Dialog>
+      </Portal.Host>
     );
 
-    fireEvent.press(getByTestId('dialog-backdrop'));
+    await userEvent.press(
+      screen.getByTestId('backdrop', { includeHiddenElements: true })
+    );
 
-    act(() => {
+    await act(() => {
       jest.runAllTimers();
     });
+
     expect(onDismiss).toHaveBeenCalledTimes(0);
 
-    act(() => {
+    await act(() => {
       BackHandler.mockPressBack();
       jest.runAllTimers();
     });
+
     expect(onDismiss).toHaveBeenCalledTimes(1);
   });
 
-  it('should apply top margin to the first child if the dialog is V3', () => {
-    const { getByTestId } = render(
-      <Dialog visible={true}>
-        <Dialog.Title testID="dialog-content">
-          <Text>Test Dialog Content</Text>
-        </Dialog.Title>
-      </Dialog>
+  it('does not add a top margin to a title-first dialog', async () => {
+    await render(
+      <Portal.Host>
+        <Dialog visible>
+          <Dialog.Title testID="dialog-title">
+            <Text>Test Dialog Content</Text>
+          </Dialog.Title>
+        </Dialog>
+      </Portal.Host>
     );
 
-    expect(getByTestId('dialog-content')).toHaveStyle({
-      marginTop: 24,
+    expect(screen.getByTestId('dialog-title')).toHaveStyle({
+      marginTop: 0,
     });
   });
+
+  it('should keep the bottom padding on a content-first dialog', async () => {
+    await render(
+      <Portal.Host>
+        <Dialog visible>
+          <Dialog.Content testID="dialog-content">
+            <Text>Test Dialog Content</Text>
+          </Dialog.Content>
+        </Dialog>
+      </Portal.Host>
+    );
+
+    expect(screen.getByTestId('dialog-content')).toHaveStyle({
+      paddingBottom: 24,
+    });
+  });
+
+  it('should not add a top padding to an icon-first dialog', async () => {
+    await render(
+      <Portal.Host>
+        <Dialog visible>
+          <Dialog.Icon icon="alert" testID="dialog-icon" />
+        </Dialog>
+      </Portal.Host>
+    );
+
+    expect(screen.getByTestId('dialog-icon')).toHaveStyle({
+      paddingTop: 0,
+    });
+  });
+
+  it('should preserve the icon-to-title spacing for an icon dialog', async () => {
+    await render(
+      <Portal.Host>
+        <Dialog visible>
+          <Dialog.Icon icon="alert" testID="dialog-icon" />
+          <Dialog.Title testID="dialog-title">
+            <Text>Test Dialog Content</Text>
+          </Dialog.Title>
+        </Dialog>
+      </Portal.Host>
+    );
+
+    expect(screen.getByTestId('dialog-icon')).toHaveStyle({
+      marginBottom: 16,
+      paddingTop: 0,
+    });
+    expect(screen.getByTestId('dialog-title')).toHaveStyle({
+      marginTop: 0,
+    });
+  });
+
+  it('uses the title as the accessible name on web', async () => {
+    jest.replaceProperty(Platform, 'OS', 'web');
+
+    await render(
+      <Portal.Host>
+        <Dialog visible>
+          <Dialog.Title>Alert</Dialog.Title>
+          <Text>This is simple dialog</Text>
+        </Dialog>
+      </Portal.Host>
+    );
+
+    expect(screen.getByLabelText('Alert')).toHaveProp('role', 'dialog');
+  });
+
+  it('uses aria-label over the title as the accessible name', async () => {
+    await render(
+      <Portal.Host>
+        <Dialog visible aria-label="Confirm deletion">
+          <Dialog.Title>Alert</Dialog.Title>
+        </Dialog>
+      </Portal.Host>
+    );
+
+    expect(screen.getByLabelText('Confirm deletion')).toHaveProp(
+      'role',
+      'dialog'
+    );
+    expect(screen.queryByLabelText('Alert')).not.toBeOnTheScreen();
+  });
 });
 
 describe('DialogActions', () => {
-  it('should render passed children', () => {
-    const { getByTestId } = render(
+  it('renders passed children', async () => {
+    await render(
       <Dialog.Actions>
         <Button testID="button-cancel">Cancel</Button>
         <Button testID="button-ok">Ok</Button>
       </Dialog.Actions>
     );
 
-    expect(getByTestId('button-cancel')).toBeDefined();
-    expect(getByTestId('button-ok')).toBeDefined();
+    expect(screen.getByTestId('button-cancel')).toBeOnTheScreen();
+    expect(screen.getByTestId('button-ok')).toBeOnTheScreen();
   });
 
-  it('should apply default styles', () => {
-    const { getByTestId } = render(
+  it('applies default styles', async () => {
+    await render(
       <Dialog.Actions testID="dialog-actions">
-        <Button>Cancel</Button>
-        <Button>Ok</Button>
+        <Button testID="button-cancel">Cancel</Button>
+        <Button testID="button-ok">Ok</Button>
       </Dialog.Actions>
     );
 
-    const dialogActionsContainer = getByTestId('dialog-actions');
-    const dialogActionButtons = dialogActionsContainer.children;
+    const dialogActionsContainer = screen.getByTestId('dialog-actions');
 
     expect(dialogActionsContainer).toHaveStyle({
       paddingBottom: 24,
       paddingHorizontal: 24,
+      columnGap: 8,
     });
-    expect(dialogActionButtons[0]).toHaveStyle({ marginRight: 8 });
-    expect(dialogActionButtons[1]).toHaveStyle({ marginRight: 0 });
   });
 
-  it('should apply custom styles', () => {
-    const { getByTestId } = render(
+  it('does not inject button props into actions', async () => {
+    const buttonProps = jest.fn();
+    const ProbeButton = (props: ComponentProps<typeof Button>) => {
+      buttonProps(props);
+
+      return <Button {...props} />;
+    };
+
+    await render(
+      <Dialog.Actions>
+        <ProbeButton>Cancel</ProbeButton>
+        <ProbeButton>Ok</ProbeButton>
+      </Dialog.Actions>
+    );
+
+    const [cancelButtonProps] = buttonProps.mock.calls[0];
+    const [okButtonProps] = buttonProps.mock.calls[1];
+
+    expect(cancelButtonProps).not.toHaveProperty('compact');
+    expect(cancelButtonProps).not.toHaveProperty('uppercase');
+    expect(okButtonProps).not.toHaveProperty('compact');
+    expect(okButtonProps).not.toHaveProperty('uppercase');
+  });
+
+  it('should not override custom button styles', async () => {
+    const buttonProps = jest.fn();
+    const ProbeButton = (props: ComponentProps<typeof Button>) => {
+      buttonProps(props);
+
+      return <Button {...props} />;
+    };
+
+    await render(
       <Dialog.Actions testID="dialog-actions">
-        <Button style={styles.spacing}>Cancel</Button>
-        <Button style={styles.noSpacing}>Ok</Button>
+        <ProbeButton style={styles.spacing}>Cancel</ProbeButton>
+        <ProbeButton style={styles.noSpacing}>Ok</ProbeButton>
       </Dialog.Actions>
     );
 
-    const dialogActionsContainer = getByTestId('dialog-actions');
-    const dialogActionButtons = dialogActionsContainer.children;
+    const [cancelButtonProps] = buttonProps.mock.calls[0];
+    const [okButtonProps] = buttonProps.mock.calls[1];
 
-    expect(dialogActionButtons[0]).toHaveStyle({ margin: 10 });
-    expect(dialogActionButtons[1]).toHaveStyle({ margin: 0 });
+    expect(cancelButtonProps).toHaveProperty('style', styles.spacing);
+    expect(okButtonProps).toHaveProperty('style', styles.noSpacing);
   });
 });
 
diff --git a/src/components/__tests__/Drawer/DrawerCollapsedItem.test.tsx b/src/components/__tests__/Drawer/DrawerCollapsedItem.test.tsx
index bc3b32885a..b301d39062 100644
--- a/src/components/__tests__/Drawer/DrawerCollapsedItem.test.tsx
+++ b/src/components/__tests__/Drawer/DrawerCollapsedItem.test.tsx
@@ -1,66 +1,62 @@
-import React from 'react';
-
-import { render } from '@testing-library/react-native';
+import { describe, expect, it } from '@jest/globals';
 
+import { render } from '../../../test-utils';
 import DrawerCollapsedItem from '../../Drawer/DrawerCollapsedItem';
 
 describe('DrawerCollapsedItem', () => {
-  it('should have regular outline if label is specified', () => {
-    const { getByTestId } = render(
-      <DrawerCollapsedItem
-        label="starred"
-        focusedIcon="star"
-        unfocusedIcon="star-outline"
-      />
-    );
-
-    expect(getByTestId('drawer-collapsed-item-outline')).toHaveStyle({
-      height: 32,
-    });
+  it('should have regular outline if label is specified', async () => {
+    const tree = (
+      await render(
+        <DrawerCollapsedItem
+          label="starred"
+          focusedIcon="star"
+          unfocusedIcon="star-outline"
+        />
+      )
+    ).toJSON();
+
+    expect(tree).toMatchSnapshot();
   });
 
-  it('should have rounded outline if label is not specified', () => {
-    const { getByTestId } = render(
-      <DrawerCollapsedItem focusedIcon="star" unfocusedIcon="star-outline" />
-    );
+  it('should have rounded outline if label is not specified', async () => {
+    const tree = (
+      await render(
+        <DrawerCollapsedItem focusedIcon="star" unfocusedIcon="star-outline" />
+      )
+    ).toJSON();
 
-    expect(getByTestId('drawer-collapsed-item-outline')).toHaveStyle({
-      height: 56,
-    });
+    expect(tree).toMatchSnapshot();
   });
 
-  it('should display unfocused icon in inactive state, if unfocused icon is specified', () => {
-    const { getByTestId } = render(
-      <DrawerCollapsedItem focusedIcon="star" unfocusedIcon="star-outline" />
-    );
+  it('should display unfocused icon in inactive state, if unfocused icon is specified', async () => {
+    const tree = (
+      await render(
+        <DrawerCollapsedItem focusedIcon="star" unfocusedIcon="star-outline" />
+      )
+    ).toJSON();
 
-    expect(
-      getByTestId('drawer-collapsed-item-container').props.children[1].props
-        .source
-    ).toBe('star-outline');
+    expect(tree).toMatchSnapshot();
   });
 
-  it('should display focused icon in inactive state, if unfocused icon is not specified', () => {
-    const { getByTestId } = render(<DrawerCollapsedItem focusedIcon="star" />);
+  it('should display focused icon in inactive state, if unfocused icon is not specified', async () => {
+    const tree = (
+      await render(<DrawerCollapsedItem focusedIcon="star" />)
+    ).toJSON();
 
-    expect(
-      getByTestId('drawer-collapsed-item-container').props.children[1].props
-        .source
-    ).toBe('star');
+    expect(tree).toMatchSnapshot();
   });
 
-  it('should display focused icon in active state', () => {
-    const { getByTestId } = render(
-      <DrawerCollapsedItem
-        active
-        focusedIcon="star"
-        unfocusedIcon="star-outline"
-      />
-    );
-
-    expect(
-      getByTestId('drawer-collapsed-item-container').props.children[1].props
-        .source
-    ).toBe('star');
+  it('should display focused icon in active state', async () => {
+    const tree = (
+      await render(
+        <DrawerCollapsedItem
+          active
+          focusedIcon="star"
+          unfocusedIcon="star-outline"
+        />
+      )
+    ).toJSON();
+
+    expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/components/__tests__/Drawer/DrawerSection.test.tsx b/src/components/__tests__/Drawer/DrawerSection.test.tsx
index e74cf362c6..9b19f0ef25 100644
--- a/src/components/__tests__/Drawer/DrawerSection.test.tsx
+++ b/src/components/__tests__/Drawer/DrawerSection.test.tsx
@@ -1,16 +1,18 @@
-import React from 'react';
 import { View } from 'react-native';
 
-import { render } from '@testing-library/react-native';
+import { describe, expect, it } from '@jest/globals';
 
+import { render } from '../../../test-utils';
 import DrawerSection from '../../Drawer/DrawerSection';
 
 describe('DrawerSection', () => {
-  it('renders properly', () => {
-    const tree = render(
-      <DrawerSection>
-        <View />
-      </DrawerSection>
+  it('renders properly', async () => {
+    const tree = (
+      await render(
+        <DrawerSection>
+          <View />
+        </DrawerSection>
+      )
     ).toJSON();
 
     expect(tree).toMatchSnapshot();
diff --git a/src/components/__tests__/Drawer/__snapshots__/DrawerCollapsedItem.test.tsx.snap b/src/components/__tests__/Drawer/__snapshots__/DrawerCollapsedItem.test.tsx.snap
new file mode 100644
index 0000000000..1bdc1cec4f
--- /dev/null
+++ b/src/components/__tests__/Drawer/__snapshots__/DrawerCollapsedItem.test.tsx.snap
@@ -0,0 +1,637 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DrawerCollapsedItem should display focused icon in active state 1`] = `
+<View>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": true,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "marginBottom": 12,
+          "minHeight": 56,
+          "width": 80,
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "alignItems": "center",
+              "borderRadius": 28,
+              "height": 32,
+              "justifyContent": "center",
+              "width": 56,
+            },
+            {
+              "height": 56,
+            },
+            {
+              "backgroundColor": "rgba(232, 222, 248, 1)",
+            },
+            undefined,
+            {
+              "transform": [
+                {
+                  "scale": 1,
+                },
+              ],
+            },
+          ]
+        }
+      />
+      <View
+        style={
+          [
+            {
+              "position": "absolute",
+            },
+            {
+              "top": 16,
+            },
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
+          style={
+            [
+              {
+                "color": "rgba(29, 25, 43, 1)",
+                "fontSize": 24,
+              },
+              [
+                {
+                  "lineHeight": 24,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          star
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`DrawerCollapsedItem should display focused icon in inactive state, if unfocused icon is not specified 1`] = `
+<View>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "marginBottom": 12,
+          "minHeight": 56,
+          "width": 80,
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "alignItems": "center",
+              "borderRadius": 28,
+              "height": 32,
+              "justifyContent": "center",
+              "width": 56,
+            },
+            {
+              "height": 56,
+            },
+            {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+            {
+              "transform": [
+                {
+                  "scale": 0.5,
+                },
+              ],
+            },
+          ]
+        }
+      />
+      <View
+        style={
+          [
+            {
+              "position": "absolute",
+            },
+            {
+              "top": 16,
+            },
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
+          style={
+            [
+              {
+                "color": "rgba(73, 69, 79, 1)",
+                "fontSize": 24,
+              },
+              [
+                {
+                  "lineHeight": 24,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          star
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`DrawerCollapsedItem should display unfocused icon in inactive state, if unfocused icon is specified 1`] = `
+<View>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "marginBottom": 12,
+          "minHeight": 56,
+          "width": 80,
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "alignItems": "center",
+              "borderRadius": 28,
+              "height": 32,
+              "justifyContent": "center",
+              "width": 56,
+            },
+            {
+              "height": 56,
+            },
+            {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+            {
+              "transform": [
+                {
+                  "scale": 0.5,
+                },
+              ],
+            },
+          ]
+        }
+      />
+      <View
+        style={
+          [
+            {
+              "position": "absolute",
+            },
+            {
+              "top": 16,
+            },
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
+          style={
+            [
+              {
+                "color": "rgba(73, 69, 79, 1)",
+                "fontSize": 24,
+              },
+              [
+                {
+                  "lineHeight": 24,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          star-outline
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`DrawerCollapsedItem should have regular outline if label is specified 1`] = `
+<View>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "marginBottom": 12,
+          "minHeight": 56,
+          "width": 80,
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "alignItems": "center",
+              "borderRadius": 28,
+              "height": 32,
+              "justifyContent": "center",
+              "width": 56,
+            },
+            false,
+            {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+            {
+              "transform": [
+                {
+                  "scaleX": 0.5,
+                },
+              ],
+            },
+          ]
+        }
+      />
+      <View
+        style={
+          [
+            {
+              "position": "absolute",
+            },
+            {
+              "top": 4,
+            },
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
+          style={
+            [
+              {
+                "color": "rgba(73, 69, 79, 1)",
+                "fontSize": 24,
+              },
+              [
+                {
+                  "lineHeight": 24,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          star-outline
+        </Text>
+      </View>
+      <Text
+        numberOfLines={2}
+        onTextLayout={[Function]}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
+            [
+              {
+                "fontFamily": "System",
+                "fontSize": 12,
+                "fontWeight": "500",
+                "letterSpacing": 0.5,
+                "lineHeight": 16,
+              },
+              [
+                {
+                  "marginHorizontal": 12,
+                  "marginTop": 4,
+                  "textAlign": "center",
+                },
+                false,
+                {
+                  "color": "rgba(73, 69, 79, 1)",
+                  "fontFamily": "System",
+                  "fontSize": 12,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.5,
+                  "lineHeight": 16,
+                },
+              ],
+            ],
+          ]
+        }
+      >
+        starred
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`DrawerCollapsedItem should have rounded outline if label is not specified 1`] = `
+<View>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "marginBottom": 12,
+          "minHeight": 56,
+          "width": 80,
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "alignItems": "center",
+              "borderRadius": 28,
+              "height": 32,
+              "justifyContent": "center",
+              "width": 56,
+            },
+            {
+              "height": 56,
+            },
+            {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+            {
+              "transform": [
+                {
+                  "scale": 0.5,
+                },
+              ],
+            },
+          ]
+        }
+      />
+      <View
+        style={
+          [
+            {
+              "position": "absolute",
+            },
+            {
+              "top": 16,
+            },
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
+          style={
+            [
+              {
+                "color": "rgba(73, 69, 79, 1)",
+                "fontSize": 24,
+              },
+              [
+                {
+                  "lineHeight": 24,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          star-outline
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;
diff --git a/src/components/__tests__/DrawerItem.test.tsx b/src/components/__tests__/DrawerItem.test.tsx
index ec4a36efcb..a47bbc043b 100644
--- a/src/components/__tests__/DrawerItem.test.tsx
+++ b/src/components/__tests__/DrawerItem.test.tsx
@@ -1,28 +1,27 @@
-import * as React from 'react';
-
-import { render } from '@testing-library/react-native';
+import { expect, it } from '@jest/globals';
 
+import { render } from '../../test-utils';
 import DrawerItem from '../Drawer/DrawerItem';
 
-it('renders basic DrawerItem', () => {
-  const tree = render(
-    <DrawerItem onPress={() => {}} label="Example item" />
+it('renders basic DrawerItem', async () => {
+  const tree = (
+    await render(<DrawerItem onPress={() => {}} label="Example item" />)
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders DrawerItem with icon', () => {
-  const tree = render(
-    <DrawerItem icon="information" label="Example item" />
+it('renders DrawerItem with icon', async () => {
+  const tree = (
+    await render(<DrawerItem icon="information" label="Example item" />)
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders active DrawerItem', () => {
-  const tree = render(
-    <DrawerItem icon="information" active label="Example item" />
+it('renders active DrawerItem', async () => {
+  const tree = (
+    await render(<DrawerItem icon="information" active label="Example item" />)
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
diff --git a/src/components/__tests__/FAB.test.tsx b/src/components/__tests__/FAB.test.tsx
index d59639efc1..eedcb3e0f3 100644
--- a/src/components/__tests__/FAB.test.tsx
+++ b/src/components/__tests__/FAB.test.tsx
@@ -1,456 +1,103 @@
-import * as React from 'react';
-import { Animated, StyleSheet } from 'react-native';
+import { expect, it, jest } from '@jest/globals';
+import { fireEvent, userEvent } from '@testing-library/react-native';
 
-import { fireEvent, render } from '@testing-library/react-native';
-import color from 'color';
-import { act } from 'react-test-renderer';
-
-import { getTheme } from '../../core/theming';
-import { black, white } from '../../styles/themes/v2/colors';
-import getContrastingColor from '../../utils/getContrastingColor';
+import { render, screen } from '../../test-utils';
 import FAB from '../FAB';
-import { getFABColors } from '../FAB/utils';
 
-const styles = StyleSheet.create({
-  borderRadius: {
-    borderRadius: 0,
-  },
-  small: {
-    height: 40,
-    width: 40,
-    borderRadius: 12,
-  },
-  medium: {
-    height: 56,
-    width: 56,
-    borderRadius: 16,
-  },
-  large: {
-    height: 96,
-    width: 96,
-    borderRadius: 28,
-  },
+it('renders FAB with default props', async () => {
+  const tree = (await render(<FAB icon="plus" />)).toJSON();
+  expect(tree).toMatchSnapshot();
 });
 
-it('renders default FAB', () => {
-  const tree = render(<FAB onPress={() => {}} icon="plus" />).toJSON();
-
+it('renders FAB with primary variant', async () => {
+  const tree = (await render(<FAB icon="plus" variant="primary" />)).toJSON();
   expect(tree).toMatchSnapshot();
 });
 
-it('renders small FAB', () => {
-  const tree = render(
-    <FAB size="small" onPress={() => {}} icon="plus" />
-  ).toJSON();
-
+it('renders FAB with secondary variant', async () => {
+  const tree = (await render(<FAB icon="plus" variant="secondary" />)).toJSON();
   expect(tree).toMatchSnapshot();
 });
 
-it('renders large FAB', () => {
-  const tree = render(
-    <FAB size="large" onPress={() => {}} icon="plus" />
-  ).toJSON();
-
+it('renders FAB with tertiary variant', async () => {
+  const tree = (await render(<FAB icon="plus" variant="tertiary" />)).toJSON();
   expect(tree).toMatchSnapshot();
 });
 
-it('renders FAB with custom size prop', () => {
-  const tree = render(
-    <FAB customSize={100} onPress={() => {}} icon="plus" />
+it('renders FAB with tonalSecondary variant', async () => {
+  const tree = (
+    await render(<FAB icon="plus" variant="tonalSecondary" />)
   ).toJSON();
-
   expect(tree).toMatchSnapshot();
 });
 
-it('renders extended FAB', () => {
-  const tree = render(
-    <FAB onPress={() => {}} icon="plus" label="Add items" />
+it('renders FAB with tonalTertiary variant', async () => {
+  const tree = (
+    await render(<FAB icon="plus" variant="tonalTertiary" />)
   ).toJSON();
-
   expect(tree).toMatchSnapshot();
 });
 
-it('renders extended FAB with custom size prop', () => {
-  const tree = render(
-    <FAB customSize={100} onPress={() => {}} icon="plus" label="Add items" />
+it('renders FAB with aria-label', async () => {
+  const tree = (
+    await render(<FAB icon="plus" aria-label="Add item" />)
   ).toJSON();
-
   expect(tree).toMatchSnapshot();
 });
 
-it('renders loading FAB', () => {
-  const tree = render(
-    <FAB onPress={() => {}} icon="plus" loading={true} />
-  ).toJSON();
-
+it('renders FAB medium size', async () => {
+  const tree = (await render(<FAB icon="plus" size="medium" />)).toJSON();
   expect(tree).toMatchSnapshot();
 });
 
-it('renders loading FAB with custom size prop', () => {
-  const tree = render(
-    <FAB customSize={100} onPress={() => {}} icon="plus" loading={true} />
-  ).toJSON();
-
+it('renders FAB large size', async () => {
+  const tree = (await render(<FAB icon="plus" size="large" />)).toJSON();
   expect(tree).toMatchSnapshot();
 });
 
-it('renders disabled FAB', () => {
-  const tree = render(<FAB onPress={() => {}} icon="plus" disabled />).toJSON();
-
+it('renders FAB with containerColor override', async () => {
+  const tree = (
+    await render(<FAB icon="plus" containerColor="#ff5722" />)
+  ).toJSON();
   expect(tree).toMatchSnapshot();
 });
 
-it('renders custom color for the icon and label of the FAB', () => {
-  const tree = render(
-    <FAB onPress={() => {}} icon="plus" color="#AA0114" />
+it('renders FAB with containerColor and contentColor overrides', async () => {
+  const tree = (
+    await render(
+      <FAB icon="plus" containerColor="#ff5722" contentColor="#ffffff" />
+    )
   ).toJSON();
-
   expect(tree).toMatchSnapshot();
 });
 
-it('renders not visible FAB', () => {
-  const { update, toJSON } = render(<FAB onPress={() => {}} icon="plus" />);
-  update(<FAB onPress={() => {}} icon="plus" visible={false} />);
-
+it('renders FAB transitioning to not visible', async () => {
+  const { rerender, toJSON } = await render(<FAB icon="plus" />);
+  await rerender(<FAB icon="plus" visible={false} />);
   expect(toJSON()).toMatchSnapshot();
 });
 
-it('renders visible FAB', () => {
-  const { update, toJSON } = render(
-    <FAB onPress={() => {}} icon="plus" visible={false} />
+it('renders FAB transitioning to visible', async () => {
+  const { rerender, toJSON } = await render(
+    <FAB icon="plus" visible={false} />
   );
-
-  update(<FAB onPress={() => {}} icon="plus" visible={true} />);
-
+  await rerender(<FAB icon="plus" visible />);
   expect(toJSON()).toMatchSnapshot();
 });
 
-it('renders FAB with custom border radius', () => {
-  const { getByTestId } = render(
-    <FAB
-      onPress={() => {}}
-      icon="plus"
-      testID="fab"
-      style={styles.borderRadius}
-    />
-  );
-
-  expect(getByTestId('fab-container')).toHaveStyle({ borderRadius: 0 });
+it('calls onPress when FAB is pressed', async () => {
+  const user = userEvent.setup();
+  const onPress = jest.fn();
+  await render(<FAB icon="plus" aria-label="Add item" onPress={onPress} />);
+  await user.press(screen.getByRole('button', { name: 'Add item' }));
+  expect(onPress).toHaveBeenCalledTimes(1);
 });
 
-it('renders FAB with zero border radius', () => {
-  const { getByTestId } = render(
-    <FAB theme={{ roundness: 0 }} onPress={() => {}} icon="plus" testID="fab" />
-  );
-
-  expect(getByTestId('fab-container')).toHaveStyle({ borderRadius: 0 });
-});
-
-it('renders FAB without uppercase styling by default', () => {
-  const { getByTestId } = render(
-    <FAB onPress={() => {}} label="Add items" testID="fab" />
-  );
-
-  expect(getByTestId('fab-text')).not.toHaveStyle({
-    textTransform: 'uppercase',
-  });
-});
-
-it('renders FAB without uppercase styling if uppercase prop is falsy', () => {
-  const { getByTestId } = render(
-    <FAB onPress={() => {}} label="Add items" testID="fab" uppercase={false} />
-  );
-
-  expect(getByTestId('fab-text')).not.toHaveStyle({
-    textTransform: 'uppercase',
-  });
-});
-
-it('renders FAB with uppercase styling if uppercase prop is truthy', () => {
-  const { getByTestId } = render(
-    <FAB onPress={() => {}} label="Add items" testID="fab" uppercase />
-  );
-
-  expect(getByTestId('fab-text')).toHaveStyle({
-    textTransform: 'uppercase',
-  });
-});
-
-(['small', 'medium', 'large'] as const).forEach((size) => {
-  it(`renders ${size} FAB with correct size and border radius`, () => {
-    const { getByTestId } = render(
-      <FAB onPress={() => {}} size={size} icon="plus" testID={`${size}-fab`} />
-    );
-
-    expect(getByTestId(`${size}-fab-content`)).toHaveStyle(styles[size]);
-  });
-});
-
-describe('getFABColors - background color', () => {
-  it('should return color from styles', () => {
-    expect(
-      getFABColors({
-        theme: getTheme(),
-        variant: 'primary',
-        customBackgroundColor: 'purple',
-      })
-    ).toMatchObject({
-      backgroundColor: 'purple',
-    });
-  });
-
-  it('should return correct disabled color, for theme version 3', () => {
-    expect(
-      getFABColors({
-        theme: getTheme(),
-        disabled: true,
-        variant: 'primary',
-      })
-    ).toMatchObject({
-      backgroundColor: getTheme().colors.surfaceDisabled,
-    });
-  });
-
-  it('should return correct disabled color, for theme version 2, light mode', () => {
-    expect(
-      getFABColors({
-        theme: getTheme(false, false),
-        disabled: true,
-        variant: 'primary',
-      })
-    ).toMatchObject({
-      backgroundColor: color(black).alpha(0.12).rgb().string(),
-    });
-  });
-
-  it('should return correct disabled color, for theme version 2, dark mode', () => {
-    expect(
-      getFABColors({
-        theme: getTheme(true, false),
-        disabled: true,
-        variant: 'primary',
-      })
-    ).toMatchObject({
-      backgroundColor: color(white).alpha(0.12).rgb().string(),
-    });
-  });
-
-  it('should return correct theme color, for theme version 3, primary variant', () => {
-    expect(
-      getFABColors({
-        theme: getTheme(),
-        variant: 'primary',
-      })
-    ).toMatchObject({
-      backgroundColor: getTheme().colors.primaryContainer,
-    });
-  });
-
-  it('should return correct theme color, for theme version 3, secondary variant', () => {
-    expect(
-      getFABColors({
-        theme: getTheme(),
-        variant: 'secondary',
-      })
-    ).toMatchObject({
-      backgroundColor: getTheme().colors.secondaryContainer,
-    });
-  });
-
-  it('should return correct theme color, for theme version 3, tertiary variant', () => {
-    expect(
-      getFABColors({
-        theme: getTheme(),
-        variant: 'tertiary',
-      })
-    ).toMatchObject({
-      backgroundColor: getTheme().colors.tertiaryContainer,
-    });
-  });
-
-  it('should return correct theme color, for theme version 3, surface variant', () => {
-    expect(
-      getFABColors({
-        theme: getTheme(),
-        variant: 'surface',
-      })
-    ).toMatchObject({
-      backgroundColor: getTheme().colors.elevation.level3,
-    });
-  });
-
-  it('should return correct theme color, for theme version 2', () => {
-    expect(
-      getFABColors({
-        theme: getTheme(false, false),
-        variant: 'primary',
-      })
-    ).toMatchObject({
-      backgroundColor: getTheme(false, false).colors.accent,
-    });
-  });
-});
-
-describe('getFABColors - foreground color', () => {
-  it('should return custom color', () => {
-    expect(
-      getFABColors({
-        theme: getTheme(),
-        variant: 'primary',
-        customColor: 'purple',
-      })
-    ).toMatchObject({
-      foregroundColor: 'purple',
-    });
-  });
-
-  it('should return correct disabled color, for theme version 3', () => {
-    expect(
-      getFABColors({
-        theme: getTheme(),
-        variant: 'primary',
-        disabled: true,
-      })
-    ).toMatchObject({
-      foregroundColor: getTheme().colors.onSurfaceDisabled,
-    });
-  });
-
-  it('should return correct disabled color, for theme version 2, light mode', () => {
-    expect(
-      getFABColors({
-        theme: getTheme(false, false),
-        disabled: true,
-        variant: 'primary',
-      })
-    ).toMatchObject({
-      foregroundColor: color(black).alpha(0.32).rgb().string(),
-    });
-  });
-
-  it('should return correct disabled color, for theme version 2, dark mode', () => {
-    expect(
-      getFABColors({
-        theme: getTheme(true, false),
-        disabled: true,
-        variant: 'primary',
-      })
-    ).toMatchObject({
-      foregroundColor: color(white).alpha(0.32).rgb().string(),
-    });
-  });
-
-  it('should return correct theme color, for theme version 3, primary variant', () => {
-    expect(
-      getFABColors({
-        theme: getTheme(),
-        variant: 'primary',
-      })
-    ).toMatchObject({
-      foregroundColor: getTheme().colors.onPrimaryContainer,
-    });
-  });
-
-  it('should return correct theme color, for theme version 3, secondary variant', () => {
-    expect(
-      getFABColors({
-        theme: getTheme(),
-        variant: 'secondary',
-      })
-    ).toMatchObject({
-      foregroundColor: getTheme().colors.onSecondaryContainer,
-    });
-  });
-
-  it('should return correct theme color, for theme version 3, tertiary variant', () => {
-    expect(
-      getFABColors({
-        theme: getTheme(),
-        variant: 'tertiary',
-      })
-    ).toMatchObject({
-      foregroundColor: getTheme().colors.onTertiaryContainer,
-    });
-  });
-
-  it('should return correct theme color, for theme version 3, surface variant', () => {
-    expect(
-      getFABColors({
-        theme: getTheme(),
-        variant: 'surface',
-      })
-    ).toMatchObject({
-      foregroundColor: getTheme().colors.primary,
-    });
-  });
-
-  it('should return correct theme color, for theme version 2', () => {
-    expect(
-      getFABColors({
-        theme: getTheme(false, false),
-        variant: 'primary',
-      })
-    ).toMatchObject({
-      foregroundColor: getContrastingColor(
-        getTheme(false, false).colors.accent,
-        white,
-        'rgba(0, 0, 0, .54)'
-      ),
-    });
-  });
-});
-
-it('animated value changes correctly', () => {
-  const value = new Animated.Value(1);
-  const { getByTestId } = render(
-    <FAB
-      size="small"
-      onPress={() => {}}
-      icon="plus"
-      testID="fab"
-      style={[{ transform: [{ scale: value }] }]}
-    />
-  );
-  expect(getByTestId('fab-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1 }],
-  });
-
-  Animated.timing(value, {
-    toValue: 1.5,
-    useNativeDriver: false,
-    duration: 200,
-  }).start();
-
-  act(() => {
-    jest.advanceTimersByTime(200);
-  });
-  expect(getByTestId('fab-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1.5 }],
-  });
-});
-
-describe('FAB events', () => {
-  it('onPress passes event', () => {
-    const onPress = jest.fn();
-    const { getByText } = render(<FAB onPress={onPress} label="Add items" />);
-
-    act(() => {
-      fireEvent(getByText('Add items'), 'onPress', { key: 'value' });
-    });
-
-    expect(onPress).toHaveBeenCalledWith({ key: 'value' });
-  });
-
-  it('onLongPress passes event', () => {
-    const onLongPress = jest.fn();
-    const { getByText } = render(
-      <FAB onLongPress={onLongPress} label="Add items" />
-    );
-
-    act(() => {
-      fireEvent(getByText('Add items'), 'onLongPress', { key: 'value' });
-    });
-
-    expect(onLongPress).toHaveBeenCalledWith({ key: 'value' });
+it('forwards event object to onPress', async () => {
+  const onPress = jest.fn();
+  await render(<FAB icon="plus" aria-label="Add item" onPress={onPress} />);
+  await fireEvent(screen.getByRole('button', { name: 'Add item' }), 'onPress', {
+    key: 'value',
   });
+  expect(onPress).toHaveBeenCalledWith({ key: 'value' });
 });
diff --git a/src/components/__tests__/FABExtended.test.tsx b/src/components/__tests__/FABExtended.test.tsx
new file mode 100644
index 0000000000..e16ca3854b
--- /dev/null
+++ b/src/components/__tests__/FABExtended.test.tsx
@@ -0,0 +1,176 @@
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+
+import { afterEach, expect, it, jest } from '@jest/globals';
+import { fireEvent, userEvent } from '@testing-library/react-native';
+import * as Reanimated from 'react-native-reanimated';
+
+import { render, screen } from '../../test-utils';
+import FAB from '../FAB';
+
+jest.mock('react-native-reanimated', () => {
+  const ReanimatedModule = jest.requireActual<
+    typeof import('react-native-reanimated')
+  >('react-native-reanimated');
+
+  return {
+    __esModule: true,
+    ...ReanimatedModule,
+    default: ReanimatedModule.default,
+    measure: jest.fn(),
+  };
+});
+
+afterEach(() => {
+  jest.mocked(Reanimated.measure).mockReset();
+  jest.restoreAllMocks();
+});
+
+it('renders extended FAB expanded', async () => {
+  const tree = (
+    await render(<FAB.Extended icon="plus" label="New message" expanded />)
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('expands to fit the measured label width', async () => {
+  jest.replaceProperty(Platform, 'OS', 'web');
+  jest.mocked(Reanimated.measure).mockReturnValue({
+    x: 0,
+    y: 0,
+    width: 80,
+    height: 20,
+    pageX: 0,
+    pageY: 0,
+  });
+
+  const ref = React.createRef<View>();
+  await render(
+    <FAB.Extended
+      icon="plus"
+      label="New message"
+      expanded
+      style={{}}
+      ref={ref}
+    />
+  );
+  await jest.runAllTimersAsync();
+
+  if (!ref.current) {
+    throw new Error('Expected FAB ref to be attached');
+  }
+
+  expect(Reanimated.getAnimatedStyle(ref.current)).toMatchObject({
+    width: 144,
+  });
+});
+
+it('renders extended FAB collapsed', async () => {
+  const tree = (
+    await render(
+      <FAB.Extended icon="plus" label="New message" expanded={false} />
+    )
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders extended FAB not visible', async () => {
+  const tree = (
+    await render(
+      <FAB.Extended icon="plus" label="New message" expanded visible={false} />
+    )
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders extended FAB medium size', async () => {
+  const tree = (
+    await render(
+      <FAB.Extended icon="plus" label="New message" expanded size="medium" />
+    )
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders extended FAB large size', async () => {
+  const tree = (
+    await render(
+      <FAB.Extended icon="plus" label="New message" expanded size="large" />
+    )
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders extended FAB transitioning to collapsed', async () => {
+  const { rerender, toJSON } = await render(
+    <FAB.Extended icon="plus" label="New message" expanded />
+  );
+  await rerender(
+    <FAB.Extended icon="plus" label="New message" expanded={false} />
+  );
+  expect(toJSON()).toMatchSnapshot();
+});
+
+it('uses label as default aria-label', async () => {
+  await render(
+    <FAB.Extended
+      icon="plus"
+      label="New message"
+      expanded
+      testID="extended-fab"
+    />
+  );
+
+  expect(screen.getByLabelText('New message')).toBeOnTheScreen();
+});
+
+it('respects explicit aria-label', async () => {
+  await render(
+    <FAB.Extended
+      icon="plus"
+      label="New message"
+      expanded
+      aria-label="Create new message"
+      testID="extended-fab"
+    />
+  );
+
+  expect(screen.getByLabelText('Create new message')).toBeOnTheScreen();
+});
+
+it('calls onPress when pressed', async () => {
+  const user = userEvent.setup();
+  const onPress = jest.fn();
+  await render(
+    <FAB.Extended
+      icon="plus"
+      label="New message"
+      expanded
+      onPress={onPress}
+      testID="extended-fab"
+    />
+  );
+  await user.press(screen.getByRole('button', { name: 'New message' }));
+  expect(onPress).toHaveBeenCalledTimes(1);
+});
+
+it('forwards event object to onPress', async () => {
+  const onPress = jest.fn();
+  await render(
+    <FAB.Extended
+      icon="plus"
+      label="New message"
+      expanded
+      onPress={onPress}
+      testID="extended-fab"
+    />
+  );
+  await fireEvent(
+    screen.getByRole('button', { name: 'New message' }),
+    'onPress',
+    {
+      key: 'value',
+    }
+  );
+  expect(onPress).toHaveBeenCalledWith({ key: 'value' });
+});
diff --git a/src/components/__tests__/FABGroup.test.tsx b/src/components/__tests__/FABGroup.test.tsx
deleted file mode 100644
index 50cc0a7173..0000000000
--- a/src/components/__tests__/FABGroup.test.tsx
+++ /dev/null
@@ -1,471 +0,0 @@
-import * as React from 'react';
-import { Animated } from 'react-native';
-
-import { act, fireEvent, render } from '@testing-library/react-native';
-import color from 'color';
-
-import { getTheme } from '../../core/theming';
-import FAB from '../FAB';
-import { getFABGroupColors } from '../FAB/utils';
-
-describe('getFABGroupColors - backdrop color', () => {
-  it('should return custom color', () => {
-    expect(
-      getFABGroupColors({
-        theme: getTheme(),
-        customBackdropColor: 'transparent',
-      })
-    ).toMatchObject({
-      backdropColor: 'transparent',
-    });
-  });
-
-  it('should return correct backdrop color, for theme version 3', () => {
-    expect(
-      getFABGroupColors({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      backdropColor: color(getTheme().colors.background)
-        .alpha(0.95)
-        .rgb()
-        .string(),
-    });
-  });
-
-  it('should return correct backdrop color, for theme version 2', () => {
-    expect(
-      getFABGroupColors({
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      backdropColor: getTheme(false, false).colors.backdrop,
-    });
-  });
-});
-
-describe('getFABGroupColors - label color', () => {
-  it('should return correct theme color, for theme version 3', () => {
-    expect(
-      getFABGroupColors({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      labelColor: getTheme().colors.onSurface,
-    });
-  });
-
-  it('should return correct theme color, dark mode, for theme version 2', () => {
-    expect(
-      getFABGroupColors({
-        theme: getTheme(true, false),
-      })
-    ).toMatchObject({
-      labelColor: getTheme(true, false).colors.text,
-    });
-  });
-
-  it('should return correct theme color, light mode, for theme version 2', () => {
-    expect(
-      getFABGroupColors({
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      labelColor: color(getTheme(false, false).colors.text)
-        .fade(0.54)
-        .rgb()
-        .string(),
-    });
-  });
-});
-
-describe('getFABGroupColors - stacked FAB background color', () => {
-  it('should return correct theme color, for theme version 3', () => {
-    expect(
-      getFABGroupColors({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      stackedFABBackgroundColor: getTheme().colors.elevation.level3,
-    });
-  });
-
-  it('should return correct theme color, dark mode, for theme version 2', () => {
-    expect(
-      getFABGroupColors({
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      stackedFABBackgroundColor: getTheme(false, false).colors.surface,
-    });
-  });
-});
-
-describe('FABActions - labelStyle - containerStyle', () => {
-  it('correctly applies label style', () => {
-    const { getByText } = render(
-      <FAB.Group
-        visible
-        open
-        icon=""
-        onStateChange={() => {}}
-        actions={[
-          {
-            label: 'complete',
-            labelStyle: {
-              fontSize: 24,
-              fontWeight: '500',
-            },
-            onPress() {},
-            icon: '',
-          },
-        ]}
-      />
-    );
-
-    expect(getByText('complete')).toHaveStyle({
-      fontSize: 24,
-      fontWeight: '500',
-    });
-  });
-
-  it('correctly applies containerStyle style', () => {
-    const { getByA11yHint } = render(
-      <FAB.Group
-        visible
-        open
-        icon=""
-        onStateChange={() => {}}
-        actions={[
-          {
-            label: 'remove',
-            accessibilityHint: 'hint',
-            containerStyle: {
-              padding: 16,
-              backgroundColor: '#687456',
-              marginLeft: 16,
-            },
-            onPress() {},
-            icon: '',
-          },
-        ]}
-      />
-    );
-
-    expect(getByA11yHint('hint')).toHaveStyle({
-      padding: 16,
-      backgroundColor: '#687456',
-    });
-  });
-});
-
-it('correctly adds label prop', () => {
-  const { getByText } = render(
-    <FAB.Group
-      visible
-      open
-      label="Label test"
-      icon=""
-      onStateChange={() => {}}
-      actions={[
-        {
-          label: 'testing',
-          onPress() {},
-          icon: '',
-        },
-      ]}
-    />
-  );
-
-  expect(getByText('Label test')).toBeTruthy();
-});
-
-it('correct renders custom ripple color passed to FAB.Group and its item', () => {
-  const { getByTestId } = render(
-    <FAB.Group
-      visible
-      open
-      label="Label test"
-      testID="fab-group"
-      rippleColor={'orange'}
-      icon="plus"
-      onStateChange={() => {}}
-      actions={[
-        {
-          label: 'testing',
-          onPress() {},
-          icon: '',
-          rippleColor: 'yellow',
-          testID: 'fab-group-item',
-        },
-      ]}
-    />
-  );
-
-  expect(
-    getByTestId('fab-group-container').props.children.props.rippleColor
-  ).toBe('orange');
-
-  expect(
-    getByTestId('fab-group-item-container').props.children.props.rippleColor
-  ).toBe('yellow');
-});
-
-it('animated value changes correctly', () => {
-  const value = new Animated.Value(1);
-  const { getByTestId } = render(
-    <FAB.Group
-      visible
-      open
-      label="Label test"
-      icon=""
-      onStateChange={() => {}}
-      testID="my-fab"
-      fabStyle={[{ transform: [{ scale: value }] }]}
-      actions={[
-        {
-          label: 'testing',
-          onPress() {},
-          icon: '',
-        },
-      ]}
-    />
-  );
-  expect(getByTestId('my-fab-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1 }],
-  });
-
-  Animated.timing(value, {
-    toValue: 1.5,
-    useNativeDriver: false,
-    duration: 200,
-  }).start();
-
-  act(() => {
-    jest.advanceTimersByTime(200);
-  });
-  expect(getByTestId('my-fab-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1.5 }],
-  });
-});
-
-describe('FAB.Group events', () => {
-  it('onPress passes event', () => {
-    const onPress = jest.fn();
-    const { getByText } = render(
-      <FAB.Group
-        visible
-        open={false}
-        label="Stack test"
-        icon=""
-        onStateChange={jest.fn()}
-        onPress={onPress}
-        actions={[
-          {
-            label: 'testing',
-            onPress() {},
-            icon: '',
-          },
-        ]}
-      />
-    );
-
-    act(() => {
-      fireEvent(getByText('Stack test'), 'onPress', { key: 'value' });
-    });
-
-    expect(onPress).toHaveBeenCalledWith({ key: 'value' });
-  });
-
-  it('onLongPress passes event', () => {
-    const onLongPress = jest.fn();
-    const { getByText } = render(
-      <FAB.Group
-        visible
-        open={false}
-        label="Stack test"
-        icon=""
-        onStateChange={jest.fn()}
-        onLongPress={onLongPress}
-        actions={[
-          {
-            label: 'testing',
-            onPress() {},
-            icon: '',
-          },
-        ]}
-      />
-    );
-
-    act(() => {
-      fireEvent(getByText('Stack test'), 'onLongPress', { key: 'value' });
-    });
-
-    expect(onLongPress).toHaveBeenCalledWith({ key: 'value' });
-  });
-});
-
-describe('Toggle Stack visibility', () => {
-  it('toggles stack visibility on press', () => {
-    const onStateChange = jest.fn();
-    const { getByText } = render(
-      <FAB.Group
-        visible
-        open={false}
-        label="Stack test"
-        icon=""
-        onStateChange={onStateChange}
-        actions={[
-          {
-            label: 'testing',
-            onPress() {},
-            icon: '',
-          },
-        ]}
-      />
-    );
-
-    act(() => {
-      fireEvent(getByText('Stack test'), 'onPress');
-    });
-
-    expect(onStateChange).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not toggle stack visibility on long press', () => {
-    const onStateChange = jest.fn();
-    const { getByText } = render(
-      <FAB.Group
-        visible
-        open={false}
-        label="Stack test"
-        icon=""
-        onStateChange={onStateChange}
-        actions={[
-          {
-            label: 'testing',
-            onPress() {},
-            icon: '',
-          },
-        ]}
-      />
-    );
-
-    act(() => {
-      fireEvent(getByText('Stack test'), 'onLongPress');
-    });
-
-    expect(onStateChange).toHaveBeenCalledTimes(0);
-  });
-
-  it('toggles stack visibility on long press with toggleStackOnLongPress prop', () => {
-    const onStateChange = jest.fn();
-    const { getByText } = render(
-      <FAB.Group
-        visible
-        open={false}
-        toggleStackOnLongPress
-        label="Stack test"
-        icon=""
-        onStateChange={onStateChange}
-        actions={[
-          {
-            label: 'testing',
-            onPress() {},
-            icon: '',
-          },
-        ]}
-      />
-    );
-
-    act(() => {
-      fireEvent(getByText('Stack test'), 'onLongPress');
-    });
-
-    expect(onStateChange).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not toggle stack visibility on press with toggleStackOnLongPress prop', () => {
-    const onStateChange = jest.fn();
-    const { getByText } = render(
-      <FAB.Group
-        visible
-        open={false}
-        toggleStackOnLongPress
-        label="Stack test"
-        icon=""
-        onStateChange={onStateChange}
-        actions={[
-          {
-            label: 'testing',
-            onPress() {},
-            icon: '',
-          },
-        ]}
-      />
-    );
-
-    act(() => {
-      fireEvent(getByText('Stack test'), 'onPress');
-    });
-
-    expect(onStateChange).toHaveBeenCalledTimes(0);
-  });
-
-  it('does not trigger onLongPress when stack is opened', () => {
-    const onStateChange = jest.fn();
-    const onLongPress = jest.fn();
-    const { getByText } = render(
-      <FAB.Group
-        visible
-        open={true}
-        label="Stack test"
-        icon=""
-        onStateChange={onStateChange}
-        onLongPress={onLongPress}
-        actions={[
-          {
-            label: 'testing',
-            onPress() {},
-            icon: '',
-          },
-        ]}
-      />
-    );
-
-    act(() => {
-      fireEvent(getByText('Stack test'), 'onLongPress');
-    });
-
-    expect(onLongPress).toHaveBeenCalledTimes(0);
-  });
-
-  it('does trigger onLongPress when stack is opened and enableLongPressWhenStackOpened is true', () => {
-    const onStateChange = jest.fn();
-    const onLongPress = jest.fn();
-    const { getByText } = render(
-      <FAB.Group
-        visible
-        open={true}
-        enableLongPressWhenStackOpened
-        label="Stack test"
-        icon=""
-        onStateChange={onStateChange}
-        onLongPress={onLongPress}
-        actions={[
-          {
-            label: 'testing',
-            onPress() {},
-            icon: '',
-          },
-        ]}
-      />
-    );
-
-    act(() => {
-      fireEvent(getByText('Stack test'), 'onLongPress');
-    });
-
-    expect(onLongPress).toHaveBeenCalledTimes(1);
-  });
-});
diff --git a/src/components/__tests__/FABMenu.test.tsx b/src/components/__tests__/FABMenu.test.tsx
new file mode 100644
index 0000000000..0e03ff6823
--- /dev/null
+++ b/src/components/__tests__/FABMenu.test.tsx
@@ -0,0 +1,194 @@
+import { expect, it, jest } from '@jest/globals';
+import { fireEvent, userEvent } from '@testing-library/react-native';
+
+import { render, screen } from '../../test-utils';
+import FAB from '../FAB';
+import type { MenuItemProps } from '../FAB/Menu';
+
+const makeItems = (
+  onItemPress = jest.fn<(event?: unknown) => void>()
+): [MenuItemProps, MenuItemProps] => [
+  { label: 'Send email', onPress: onItemPress, testID: 'item-0' },
+  { label: 'Set reminder', onPress: onItemPress, testID: 'item-1' },
+];
+
+it('renders FAB.Menu closed', async () => {
+  const tree = (
+    await render(
+      <FAB.Menu
+        expanded={false}
+        onDismiss={jest.fn()}
+        trigger={{ icon: 'plus' }}
+        items={makeItems()}
+      />
+    )
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders FAB.Menu open', async () => {
+  const tree = (
+    await render(
+      <FAB.Menu
+        expanded
+        onDismiss={jest.fn()}
+        trigger={{ icon: 'plus' }}
+        items={makeItems()}
+      />
+    )
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders FAB.Menu with 6 items', async () => {
+  const tree = (
+    await render(
+      <FAB.Menu
+        expanded
+        onDismiss={jest.fn()}
+        trigger={{ icon: 'plus' }}
+        items={[
+          { label: 'Item 1', onPress: jest.fn(), testID: 'item-0' },
+          { label: 'Item 2', onPress: jest.fn(), testID: 'item-1' },
+          { label: 'Item 3', onPress: jest.fn(), testID: 'item-2' },
+          { label: 'Item 4', onPress: jest.fn(), testID: 'item-3' },
+          { label: 'Item 5', onPress: jest.fn(), testID: 'item-4' },
+          { label: 'Item 6', onPress: jest.fn(), testID: 'item-5' },
+        ]}
+      />
+    )
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders FAB.Menu with start alignment', async () => {
+  const tree = (
+    await render(
+      <FAB.Menu
+        expanded
+        onDismiss={jest.fn()}
+        trigger={{ icon: 'plus' }}
+        alignment="start"
+        items={makeItems()}
+      />
+    )
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders FAB.Menu with center alignment', async () => {
+  const tree = (
+    await render(
+      <FAB.Menu
+        expanded
+        onDismiss={jest.fn()}
+        trigger={{ icon: 'plus' }}
+        alignment="center"
+        items={makeItems()}
+      />
+    )
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders FAB.Menu with items having icons', async () => {
+  const tree = (
+    await render(
+      <FAB.Menu
+        expanded
+        onDismiss={jest.fn()}
+        trigger={{ icon: 'plus' }}
+        items={[
+          { icon: 'email', label: 'Send email', onPress: jest.fn() },
+          { icon: 'bell', label: 'Set reminder', onPress: jest.fn() },
+        ]}
+      />
+    )
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders FAB.Menu not expanded when trigger is not visible', async () => {
+  const tree = (
+    await render(
+      <FAB.Menu
+        expanded
+        onDismiss={jest.fn()}
+        trigger={{ icon: 'plus', visible: false }}
+        items={makeItems()}
+      />
+    )
+  ).toJSON();
+  // effectiveExpanded = visible && expanded = false
+  expect(tree).toMatchSnapshot();
+});
+
+it('calls item onPress when menu item is pressed', async () => {
+  const onItemPress = jest.fn();
+  await render(
+    <FAB.Menu
+      expanded
+      onDismiss={jest.fn()}
+      trigger={{ icon: 'plus' }}
+      items={makeItems(onItemPress)}
+    />
+  );
+  await userEvent.press(screen.getByTestId('item-0'));
+  expect(onItemPress).toHaveBeenCalledTimes(1);
+});
+
+it('forwards event object to item onPress', async () => {
+  const onItemPress = jest.fn();
+  await render(
+    <FAB.Menu
+      expanded
+      onDismiss={jest.fn()}
+      trigger={{ icon: 'plus' }}
+      items={makeItems(onItemPress)}
+    />
+  );
+  await fireEvent(screen.getByTestId('item-0'), 'onPress', { key: 'value' });
+  expect(onItemPress).toHaveBeenCalledWith({ key: 'value' });
+});
+
+it('calls onDismiss when menu item is pressed', async () => {
+  const onDismiss = jest.fn();
+  await render(
+    <FAB.Menu
+      expanded
+      onDismiss={onDismiss}
+      trigger={{ icon: 'plus' }}
+      items={makeItems()}
+    />
+  );
+  await userEvent.press(screen.getByTestId('item-0'));
+  expect(onDismiss).toHaveBeenCalledTimes(1);
+});
+
+it('calls trigger onPress when menu is closed', async () => {
+  const onTriggerPress = jest.fn();
+  await render(
+    <FAB.Menu
+      expanded={false}
+      onDismiss={jest.fn()}
+      trigger={{ icon: 'plus', onPress: onTriggerPress, testID: 'fab-shell' }}
+      items={makeItems()}
+    />
+  );
+  await userEvent.press(screen.getByTestId('fab-shell'));
+  expect(onTriggerPress).toHaveBeenCalledTimes(1);
+});
+
+it('calls onDismiss when trigger is pressed while menu is open', async () => {
+  const onDismiss = jest.fn();
+  await render(
+    <FAB.Menu
+      expanded
+      onDismiss={onDismiss}
+      trigger={{ icon: 'plus', testID: 'fab-shell' }}
+      items={makeItems()}
+    />
+  );
+  await userEvent.press(screen.getByTestId('fab-shell'));
+  expect(onDismiss).toHaveBeenCalledTimes(1);
+});
diff --git a/src/components/__tests__/FABUtils.test.tsx b/src/components/__tests__/FABUtils.test.tsx
new file mode 100644
index 0000000000..9389ccd78d
--- /dev/null
+++ b/src/components/__tests__/FABUtils.test.tsx
@@ -0,0 +1,154 @@
+import { describe, expect, it } from '@jest/globals';
+
+import { LightTheme } from '../../theme/schemes';
+import { getDimensions, resolveColors } from '../FAB/utils';
+
+describe('resolveColors', () => {
+  it('returns theme colors for default variant (tonalPrimary)', () => {
+    const colors = resolveColors({ theme: LightTheme });
+    expect(colors).toEqual({
+      container: LightTheme.colors.primaryContainer,
+      content: LightTheme.colors.onPrimaryContainer,
+    });
+  });
+
+  it('returns theme colors for primary variant', () => {
+    const colors = resolveColors({ theme: LightTheme, variant: 'primary' });
+    expect(colors).toEqual({
+      container: LightTheme.colors.primary,
+      content: LightTheme.colors.onPrimary,
+    });
+  });
+
+  it('returns theme colors for secondary variant', () => {
+    const colors = resolveColors({ theme: LightTheme, variant: 'secondary' });
+    expect(colors).toEqual({
+      container: LightTheme.colors.secondary,
+      content: LightTheme.colors.onSecondary,
+    });
+  });
+
+  it('returns theme colors for tertiary variant', () => {
+    const colors = resolveColors({ theme: LightTheme, variant: 'tertiary' });
+    expect(colors).toEqual({
+      container: LightTheme.colors.tertiary,
+      content: LightTheme.colors.onTertiary,
+    });
+  });
+
+  it('returns theme colors for tonalSecondary variant', () => {
+    const colors = resolveColors({
+      theme: LightTheme,
+      variant: 'tonalSecondary',
+    });
+    expect(colors).toEqual({
+      container: LightTheme.colors.secondaryContainer,
+      content: LightTheme.colors.onSecondaryContainer,
+    });
+  });
+
+  it('returns theme colors for tonalTertiary variant', () => {
+    const colors = resolveColors({
+      theme: LightTheme,
+      variant: 'tonalTertiary',
+    });
+    expect(colors).toEqual({
+      container: LightTheme.colors.tertiaryContainer,
+      content: LightTheme.colors.onTertiaryContainer,
+    });
+  });
+
+  it('containerColor override wins over variant', () => {
+    const colors = resolveColors({
+      theme: LightTheme,
+      variant: 'primary',
+      containerColor: '#custom',
+    });
+    expect(colors.container).toBe('#custom');
+  });
+
+  it('derives content color from containerColor when contentColor is not set', () => {
+    // Use a known theme color so contentColorFor can derive the on-color pairing
+    const colors = resolveColors({
+      theme: LightTheme,
+      containerColor: LightTheme.colors.primary,
+    });
+    expect(colors.container).toBe(LightTheme.colors.primary);
+    expect(colors.content).toBe(LightTheme.colors.onPrimary);
+  });
+
+  it('both containerColor and contentColor overrides win', () => {
+    const colors = resolveColors({
+      theme: LightTheme,
+      containerColor: '#bg',
+      contentColor: '#fg',
+    });
+    expect(colors).toEqual({ container: '#bg', content: '#fg' });
+  });
+
+  it('contentColor-only override uses variant container', () => {
+    const colors = resolveColors({
+      theme: LightTheme,
+      variant: 'primary',
+      contentColor: '#custom',
+    });
+    expect(colors.container).toBe(LightTheme.colors.primary);
+    expect(colors.content).toBe('#custom');
+  });
+});
+
+describe('getDimensions', () => {
+  it('returns correct dimensions for default size', () => {
+    const dims = getDimensions({ theme: LightTheme });
+    expect(dims.height).toBe(56);
+    expect(dims.width).toBe(56);
+    expect(dims.iconSize).toBe(24);
+    expect(dims.leading).toBe(16);
+    expect(dims.trailing).toBe(16);
+    expect(dims.iconLabelGap).toBe(8);
+    expect(dims.labelTypescale).toBe('titleMedium');
+  });
+
+  it('returns correct dimensions for medium size', () => {
+    const dims = getDimensions({ theme: LightTheme, size: 'medium' });
+    expect(dims.height).toBe(80);
+    expect(dims.width).toBe(80);
+    expect(dims.iconSize).toBe(28);
+    expect(dims.leading).toBe(26);
+    expect(dims.trailing).toBe(26);
+    expect(dims.iconLabelGap).toBe(12);
+    expect(dims.labelTypescale).toBe('titleLarge');
+  });
+
+  it('returns correct dimensions for large size', () => {
+    const dims = getDimensions({ theme: LightTheme, size: 'large' });
+    expect(dims.height).toBe(96);
+    expect(dims.width).toBe(96);
+    expect(dims.iconSize).toBe(36);
+    expect(dims.leading).toBe(30);
+    expect(dims.trailing).toBe(30);
+    expect(dims.iconLabelGap).toBe(16);
+    expect(dims.labelTypescale).toBe('headlineSmall');
+  });
+
+  it('shape override changes borderRadius compared to default', () => {
+    const defaultDims = getDimensions({ theme: LightTheme });
+    const fullDims = getDimensions({ theme: LightTheme, shape: 'full' });
+    expect(fullDims.borderRadius).not.toBe(defaultDims.borderRadius);
+  });
+
+  it('iconSize override wins over size spec', () => {
+    const dims = getDimensions({ theme: LightTheme, iconSize: 32 });
+    expect(dims.iconSize).toBe(32);
+  });
+
+  it('leading and trailing overrides win over size spec', () => {
+    const dims = getDimensions({
+      theme: LightTheme,
+      leading: 20,
+      trailing: 24,
+    });
+    expect(dims.leading).toBe(20);
+    expect(dims.trailing).toBe(24);
+  });
+});
diff --git a/src/components/__tests__/HelperText.test.tsx b/src/components/__tests__/HelperText.test.tsx
deleted file mode 100644
index ce16526776..0000000000
--- a/src/components/__tests__/HelperText.test.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-
-import { render } from '@testing-library/react-native';
-
-import { getTheme } from '../../core/theming';
-import HelperText from '../HelperText/HelperText';
-
-describe('HelperText', () => {
-  it('should have correct text color for info type', () => {
-    const { getByTestId } = render(
-      <HelperText testID="helper-text" type="info">
-        Info: Maximum length is 100 characters
-      </HelperText>
-    );
-
-    expect(getByTestId('helper-text')).toHaveStyle({
-      color: getTheme().colors.onSurfaceVariant,
-    });
-  });
-
-  it('should have correct text color for error type', () => {
-    const { getByTestId } = render(
-      <HelperText testID="helper-text" type="error">
-        Error: Only letters are allowed
-      </HelperText>
-    );
-
-    expect(getByTestId('helper-text')).toHaveStyle({
-      color: getTheme().colors.error,
-    });
-  });
-});
diff --git a/src/components/__tests__/Icon.test.tsx b/src/components/__tests__/Icon.test.tsx
index 29944da5ac..d1d280a63f 100644
--- a/src/components/__tests__/Icon.test.tsx
+++ b/src/components/__tests__/Icon.test.tsx
@@ -1,36 +1,38 @@
-import React from 'react';
 import { Image } from 'react-native';
 
-import { render } from '@testing-library/react-native';
+import { describe, expect, it } from '@jest/globals';
 
+import { render, screen } from '../../test-utils';
 import Icon from '../Icon';
 
 const ICON_SIZE = 24;
 
 describe('Icon Component', () => {
-  it('renders correctly with image source', () => {
+  it('renders correctly with image source', async () => {
     const source = { uri: 'https://picsum.photos/700' };
-    const { getByTestId } = render(
-      <Icon source={source} size={ICON_SIZE} testID="image-icon" />
-    );
-    const imageIcon = getByTestId('image-icon');
+    await render(<Icon source={source} size={ICON_SIZE} testID="image-icon" />);
+    const imageIcon = screen.getByTestId('image-icon', {
+      includeHiddenElements: true,
+    });
 
     expect(imageIcon).toBeOnTheScreen();
     expect(imageIcon).toHaveStyle({ width: ICON_SIZE, height: ICON_SIZE });
   });
 
-  it('renders correctly with string source', () => {
+  it('renders correctly with string source', async () => {
     const source = 'camera';
-    const { getByTestId } = render(
+    await render(
       <Icon source={source} size={ICON_SIZE} testID="camera-icon" />
     );
-    const icon = getByTestId('camera-icon');
+    const icon = screen.getByTestId('camera-icon', {
+      includeHiddenElements: true,
+    });
 
     expect(icon).toBeOnTheScreen();
     expect(icon).toHaveStyle({ fontSize: ICON_SIZE, lineHeight: ICON_SIZE });
   });
 
-  it('renders correctly with function source', () => {
+  it('renders correctly with function source', async () => {
     const source = ({ size, testID }: { size: number; testID: string }) => (
       <Image
         accessibilityIgnoresInvertColors
@@ -39,11 +41,13 @@ describe('Icon Component', () => {
         testID={testID}
       />
     );
-    const { getByTestId } = render(
+    await render(
       <Icon source={source} size={ICON_SIZE} testID="function-icon" />
     );
 
-    const functionIcon = getByTestId('function-icon');
+    const functionIcon = screen.getByTestId('function-icon', {
+      includeHiddenElements: true,
+    });
 
     expect(functionIcon).toHaveStyle({ width: ICON_SIZE, height: ICON_SIZE });
     expect(functionIcon).toBeOnTheScreen();
diff --git a/src/components/__tests__/IconButton.test.tsx b/src/components/__tests__/IconButton.test.tsx
index 381ea5ae24..914f1e2c55 100644
--- a/src/components/__tests__/IconButton.test.tsx
+++ b/src/components/__tests__/IconButton.test.tsx
@@ -1,14 +1,16 @@
-import * as React from 'react';
-import { Animated, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 
-import { act, render } from '@testing-library/react-native';
-import color from 'color';
+import { describe, expect, it } from '@jest/globals';
 
-import { getTheme } from '../../core/theming';
-import { pink500 } from '../../styles/themes/v2/colors';
+import { render } from '../../test-utils';
+import { pink500 } from '../../theme/colors';
+import { LightTheme } from '../../theme/schemes';
+import { tokens } from '../../theme/tokens';
 import IconButton from '../IconButton/IconButton';
 import { getIconButtonColor } from '../IconButton/utils';
 
+const stateOpacity = tokens.md.sys.state.opacity;
+
 const styles = StyleSheet.create({
   square: {
     borderRadius: 0,
@@ -18,40 +20,40 @@ const styles = StyleSheet.create({
   },
 });
 
-it('renders icon button by default', () => {
-  const tree = render(<IconButton icon="camera" />).toJSON();
+it('renders icon button by default', async () => {
+  const tree = (await render(<IconButton icon="camera" />)).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders icon button with color', () => {
-  const tree = render(
-    <IconButton icon="camera" iconColor={pink500} />
+it('renders icon button with color', async () => {
+  const tree = (
+    await render(<IconButton icon="camera" iconColor={pink500} />)
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders icon button with size', () => {
-  const tree = render(<IconButton icon="camera" size={30} />).toJSON();
+it('renders icon button with size', async () => {
+  const tree = (await render(<IconButton icon="camera" size={30} />)).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders disabled icon button', () => {
-  const tree = render(<IconButton icon="camera" disabled />).toJSON();
+it('renders disabled icon button', async () => {
+  const tree = (await render(<IconButton icon="camera" disabled />)).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders icon change animated', () => {
-  const tree = render(<IconButton icon="camera" animated />).toJSON();
+it('renders icon change animated', async () => {
+  const tree = (await render(<IconButton icon="camera" animated />)).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders icon button with custom border radius', () => {
-  const { getByTestId } = render(
+it('renders icon button with custom border radius', async () => {
+  const { toJSON } = await render(
     <IconButton
       icon="camera"
       testID="icon-button"
@@ -61,11 +63,11 @@ it('renders icon button with custom border radius', () => {
     />
   );
 
-  expect(getByTestId('icon-button-container')).toHaveStyle({ borderRadius: 0 });
+  expect(toJSON()).toMatchSnapshot();
 });
 
-it('renders icon button with small border radius', () => {
-  const { getByTestId } = render(
+it('renders icon button with small border radius', async () => {
+  const { toJSON } = await render(
     <IconButton
       icon="camera"
       testID="icon-button"
@@ -75,14 +77,14 @@ it('renders icon button with small border radius', () => {
     />
   );
 
-  expect(getByTestId('icon-button-container')).toHaveStyle({ borderRadius: 4 });
+  expect(toJSON()).toMatchSnapshot();
 });
 
 describe('getIconButtonColor - icon color', () => {
   it('should return custom icon color', () => {
     expect(
       getIconButtonColor({
-        theme: getTheme(),
+        theme: LightTheme,
         customIconColor: 'purple',
       })
     ).toMatchObject({
@@ -93,111 +95,102 @@ describe('getIconButtonColor - icon color', () => {
   it('should return correct disabled color, for theme version 3', () => {
     expect(
       getIconButtonColor({
-        theme: getTheme(),
+        theme: LightTheme,
         disabled: true,
       })
     ).toMatchObject({
-      iconColor: getTheme().colors.onSurfaceDisabled,
+      iconColor: LightTheme.colors.onSurface,
+      iconOpacity: stateOpacity.disabled,
     });
   });
 
   it('should return theme icon color, for theme version 3, mode contained', () => {
     expect(
       getIconButtonColor({
-        theme: getTheme(),
+        theme: LightTheme,
         mode: 'contained',
       })
     ).toMatchObject({
-      iconColor: getTheme().colors.primary,
+      iconColor: LightTheme.colors.primary,
     });
   });
 
   it('should return theme icon color, for theme version 3, mode contained, selected', () => {
     expect(
       getIconButtonColor({
-        theme: getTheme(),
+        theme: LightTheme,
         mode: 'contained',
         selected: true,
       })
     ).toMatchObject({
-      iconColor: getTheme().colors.onPrimary,
+      iconColor: LightTheme.colors.onPrimary,
     });
   });
 
   it('should return theme icon color, for theme version 3, mode contained-tonal', () => {
     expect(
       getIconButtonColor({
-        theme: getTheme(),
+        theme: LightTheme,
         mode: 'contained-tonal',
       })
     ).toMatchObject({
-      iconColor: getTheme().colors.onSurfaceVariant,
+      iconColor: LightTheme.colors.onSurfaceVariant,
     });
   });
 
   it('should return theme icon color, for theme version 3, mode contained-tonal, selected', () => {
     expect(
       getIconButtonColor({
-        theme: getTheme(),
+        theme: LightTheme,
         mode: 'contained-tonal',
         selected: true,
       })
     ).toMatchObject({
-      iconColor: getTheme().colors.onSecondaryContainer,
+      iconColor: LightTheme.colors.onSecondaryContainer,
     });
   });
 
   it('should return theme icon color, for theme version 3, mode outlined', () => {
     expect(
       getIconButtonColor({
-        theme: getTheme(),
+        theme: LightTheme,
         mode: 'outlined',
       })
     ).toMatchObject({
-      iconColor: getTheme().colors.onSurfaceVariant,
+      iconColor: LightTheme.colors.onSurfaceVariant,
     });
   });
 
   it('should return theme icon color, for theme version 3, mode outlined, selected', () => {
     expect(
       getIconButtonColor({
-        theme: getTheme(),
+        theme: LightTheme,
         mode: 'outlined',
         selected: true,
       })
     ).toMatchObject({
-      iconColor: getTheme().colors.inverseOnSurface,
+      iconColor: LightTheme.colors.inverseOnSurface,
     });
   });
 
   it('should return theme icon color, for theme version 3', () => {
     expect(
       getIconButtonColor({
-        theme: getTheme(),
+        theme: LightTheme,
       })
     ).toMatchObject({
-      iconColor: getTheme().colors.onSurfaceVariant,
+      iconColor: LightTheme.colors.onSurfaceVariant,
     });
   });
 
   it('should return theme icon color, for theme version 3, selected', () => {
     expect(
       getIconButtonColor({
-        theme: getTheme(),
+        theme: LightTheme,
         selected: true,
       })
     ).toMatchObject({
-      iconColor: getTheme().colors.primary,
-    });
-  });
-
-  it('should return theme icon color, for theme version 2', () => {
-    expect(
-      getIconButtonColor({
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      iconColor: getTheme(false, false).colors.text,
+      iconColor: LightTheme.colors.primary,
     });
   });
 });
@@ -206,7 +199,7 @@ describe('getIconButtonColor - background color', () => {
   it('should return custom background color', () => {
     expect(
       getIconButtonColor({
-        theme: getTheme(),
+        theme: LightTheme,
         customContainerColor: 'purple',
       })
     ).toMatchObject({
@@ -218,76 +211,79 @@ describe('getIconButtonColor - background color', () => {
     it(`should return correct disabled color, for theme version 3, ${mode} mode`, () => {
       expect(
         getIconButtonColor({
-          theme: getTheme(),
+          theme: LightTheme,
           mode,
           disabled: true,
         })
-      ).toMatchObject({ backgroundColor: getTheme().colors.surfaceDisabled });
+      ).toMatchObject({
+        backgroundColor: LightTheme.colors.onSurface,
+        backgroundOpacity: stateOpacity.disabled,
+      });
     })
   );
 
   it('should return theme icon color, for theme version 3, mode contained', () => {
     expect(
       getIconButtonColor({
-        theme: getTheme(),
+        theme: LightTheme,
         mode: 'contained',
       })
     ).toMatchObject({
-      backgroundColor: getTheme().colors.surfaceVariant,
+      backgroundColor: LightTheme.colors.surfaceVariant,
     });
   });
 
   it('should return theme icon color, for theme version 3, mode contained, selected', () => {
     expect(
       getIconButtonColor({
-        theme: getTheme(),
+        theme: LightTheme,
         mode: 'contained',
         selected: true,
       })
     ).toMatchObject({
-      backgroundColor: getTheme().colors.primary,
+      backgroundColor: LightTheme.colors.primary,
     });
   });
 
   it('should return theme icon color, for theme version 3, mode contained-tonal', () => {
     expect(
       getIconButtonColor({
-        theme: getTheme(),
+        theme: LightTheme,
         mode: 'contained-tonal',
       })
     ).toMatchObject({
-      backgroundColor: getTheme().colors.surfaceVariant,
+      backgroundColor: LightTheme.colors.surfaceVariant,
     });
   });
 
   it('should return theme icon color, for theme version 3, mode contained-tonal, selected', () => {
     expect(
       getIconButtonColor({
-        theme: getTheme(),
+        theme: LightTheme,
         mode: 'contained-tonal',
         selected: true,
       })
     ).toMatchObject({
-      backgroundColor: getTheme().colors.secondaryContainer,
+      backgroundColor: LightTheme.colors.secondaryContainer,
     });
   });
 
   it('should return theme icon color, for theme version 3, mode outlined, selected', () => {
     expect(
       getIconButtonColor({
-        theme: getTheme(),
+        theme: LightTheme,
         mode: 'outlined',
         selected: true,
       })
     ).toMatchObject({
-      backgroundColor: getTheme().colors.inverseSurface,
+      backgroundColor: LightTheme.colors.inverseSurface,
     });
   });
 
   it('should return undefined, for theme version 3, if mode not specified', () => {
     expect(
       getIconButtonColor({
-        theme: getTheme(),
+        theme: LightTheme,
       })
     ).toMatchObject({
       backgroundColor: undefined,
@@ -299,86 +295,21 @@ describe('getIconButtonColor - border color', () => {
   it('should return correct disabled color, for theme version 3', () => {
     expect(
       getIconButtonColor({
-        theme: getTheme(),
+        theme: LightTheme,
         disabled: true,
       })
     ).toMatchObject({
-      borderColor: getTheme().colors.surfaceDisabled,
-    });
-  });
-
-  it('should return theme color, for theme version 3', () => {
-    expect(
-      getIconButtonColor({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      borderColor: getTheme().colors.outline,
-    });
-  });
-
-  it('should return undefined, for theme version 2', () => {
-    expect(
-      getIconButtonColor({
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      borderColor: undefined,
+      borderColor: LightTheme.colors.outlineVariant,
     });
   });
-});
 
-describe('getIconButtonColor - ripple color', () => {
   it('should return theme color, for theme version 3', () => {
     expect(
       getIconButtonColor({
-        theme: getTheme(),
+        theme: LightTheme,
       })
     ).toMatchObject({
-      rippleColor: color(getTheme().colors.onSurfaceVariant)
-        .alpha(0.12)
-        .rgb()
-        .string(),
+      borderColor: LightTheme.colors.outlineVariant,
     });
   });
-
-  it('should return theme color, for theme version 2', () => {
-    expect(
-      getIconButtonColor({
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      rippleColor: color(getTheme(false, false).colors.text)
-        .alpha(0.32)
-        .rgb()
-        .string(),
-    });
-  });
-});
-
-it('action animated value changes correctly', () => {
-  const value = new Animated.Value(1);
-  const { getByTestId } = render(
-    <IconButton
-      icon="menu"
-      style={[{ transform: [{ scale: value }] }]}
-      testID="icon-button"
-    />
-  );
-  expect(getByTestId('icon-button-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1 }],
-  });
-
-  Animated.timing(value, {
-    toValue: 1.5,
-    useNativeDriver: false,
-    duration: 200,
-  }).start();
-
-  act(() => {
-    jest.advanceTimersByTime(200);
-  });
-  expect(getByTestId('icon-button-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1.5 }],
-  });
 });
diff --git a/src/components/__tests__/ListAccordion.test.tsx b/src/components/__tests__/ListAccordion.test.tsx
index 0c24538348..4d594e7bd0 100644
--- a/src/components/__tests__/ListAccordion.test.tsx
+++ b/src/components/__tests__/ListAccordion.test.tsx
@@ -1,11 +1,10 @@
-import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { render } from '@testing-library/react-native';
-import color from 'color';
+import { describe, expect, it } from '@jest/globals';
 
-import { getTheme } from '../../core/theming';
-import { red500 } from '../../styles/themes/v2/colors';
+import { render, screen } from '../../test-utils';
+import { red500 } from '../../theme/colors';
+import { LightTheme } from '../../theme/schemes';
 import ListAccordion from '../List/ListAccordion';
 import ListAccordionGroup from '../List/ListAccordionGroup';
 import ListIcon from '../List/ListIcon';
@@ -18,75 +17,113 @@ const styles = StyleSheet.create({
   },
 });
 
-it('renders list accordion with children', () => {
-  const tree = render(
-    <ListAccordion
-      left={(props) => <ListIcon {...props} icon="folder" />}
-      title="Expandable list item"
-    >
-      <ListItem title="First Item" />
-    </ListAccordion>
+it('renders list accordion with children', async () => {
+  const tree = (
+    await render(
+      <ListAccordion
+        left={(props) => <ListIcon {...props} icon="folder" />}
+        title="Expandable list item"
+      >
+        <ListItem title="First Item" />
+      </ListAccordion>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders multiline list accordion', () => {
-  const tree = render(
-    <ListAccordion
-      title="Expandable list item"
-      description="Describes the expandable list item"
-    >
-      <ListItem title="List item 1" />
-    </ListAccordion>
+it('renders multiline list accordion', async () => {
+  const tree = (
+    await render(
+      <ListAccordion
+        title="Expandable list item"
+        description="Describes the expandable list item"
+      >
+        <ListItem title="List item 1" />
+      </ListAccordion>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders list accordion with left items', () => {
-  const tree = render(
-    <ListAccordion
-      left={(props) => <ListIcon {...props} icon="star" />}
-      title="Accordion item 1"
-    >
-      <ListItem
-        left={(props) => <ListIcon {...props} icon="thumb-up" />}
-        title="List item 1"
-      />
-    </ListAccordion>
+it('renders list accordion with left items', async () => {
+  const tree = (
+    await render(
+      <ListAccordion
+        left={(props) => <ListIcon {...props} icon="star" />}
+        title="Accordion item 1"
+      >
+        <ListItem
+          left={(props) => <ListIcon {...props} icon="thumb-up" />}
+          title="List item 1"
+        />
+      </ListAccordion>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders expanded accordion', () => {
-  const tree = render(
-    <ListAccordion title="Accordion item 1" expanded>
-      <ListItem title="List item 1" />
-    </ListAccordion>
+it('renders expanded accordion', async () => {
+  const tree = (
+    await render(
+      <ListAccordion title="Accordion item 1" expanded>
+        <ListItem title="List item 1" />
+      </ListAccordion>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders list accordion with custom title and description styles', () => {
-  const tree = render(
+it('renders list accordion with custom title and description styles', async () => {
+  const tree = (
+    await render(
+      <ListAccordion
+        title="Accordion item 1"
+        description="Describes the expandable list item"
+        titleStyle={styles.coloring}
+        descriptionStyle={styles.coloring}
+      >
+        <ListItem title="List item 1" />
+      </ListAccordion>
+    )
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it('indents expanded accordion children without their own left/right when the accordion has a left icon', async () => {
+  await render(
     <ListAccordion
-      title="Accordion item 1"
-      description="Describes the expandable list item"
-      titleStyle={styles.coloring}
-      descriptionStyle={styles.coloring}
+      left={(props) => <ListIcon {...props} icon="folder" />}
+      title="Accordion with indented children"
+      expanded
     >
-      <ListItem title="List item 1" />
+      <ListItem title="Child item" testID="accordion-child" />
     </ListAccordion>
-  ).toJSON();
+  );
 
-  expect(tree).toMatchSnapshot();
+  expect(screen.getByTestId('accordion-child')).toHaveStyle({
+    paddingLeft: 40,
+  });
+});
+
+it('does not indent expanded accordion children when the accordion has no left icon', async () => {
+  await render(
+    <ListAccordion title="Accordion without left icon" expanded>
+      <ListItem title="Child item" testID="accordion-child" />
+    </ListAccordion>
+  );
+
+  expect(screen.getByTestId('accordion-child')).not.toHaveStyle({
+    paddingLeft: 40,
+  });
 });
 
 describe('ListAccordion', () => {
-  it('should not throw an error when id={0}', () => {
+  it('should not throw an error when id={0}', async () => {
     const ListAccordionTest = () => (
       <ListAccordionGroup>
         <ListAccordion title="Testing list" id={0}>
@@ -95,12 +132,26 @@ describe('ListAccordion', () => {
       </ListAccordionGroup>
     );
 
-    expect(() => render(<ListAccordionTest />)).not.toThrow(
-      'List.Accordion is used inside a List.AccordionGroup without specifying an id prop.'
+    await expect(render(<ListAccordionTest />)).resolves.toBeDefined();
+  });
+
+  it('expands the accordion with id={0} when it is the controlled expandedId', async () => {
+    await render(
+      <ListAccordionGroup expandedId={0} onAccordionPress={() => {}}>
+        <ListAccordion title="First accordion" id={0}>
+          <ListItem title="First accordion item" />
+        </ListAccordion>
+        <ListAccordion title="Second accordion" id={1}>
+          <ListItem title="Second accordion item" />
+        </ListAccordion>
+      </ListAccordionGroup>
     );
+
+    expect(screen.getByText('First accordion item')).toBeOnTheScreen();
+    expect(screen.queryByText('Second accordion item')).not.toBeOnTheScreen();
   });
 
-  it('should throw an error when id={""}', () => {
+  it('should throw an error when id={""}', async () => {
     const ListAccordionTest = () => (
       <ListAccordionGroup>
         <ListAccordion title="Testing list" id={''}>
@@ -109,58 +160,20 @@ describe('ListAccordion', () => {
       </ListAccordionGroup>
     );
 
-    expect(() => render(<ListAccordionTest />)).toThrow(
+    await expect(render(<ListAccordionTest />)).rejects.toThrow(
       'List.Accordion is used inside a List.AccordionGroup without specifying an id prop.'
     );
   });
 });
 
-describe('getAccordionColors - title color', () => {
-  it('should return theme color, for theme version 3', () => {
-    expect(
-      getAccordionColors({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      titleColor: getTheme().colors.onSurface,
-    });
-  });
-
-  it('should return theme color, for theme version 2', () => {
-    expect(
-      getAccordionColors({
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      titleColor: color(getTheme(false, false).colors.text)
-        .alpha(0.87)
-        .rgb()
-        .string(),
-    });
-  });
-});
-
 describe('getAccordionColors - description color', () => {
   it('should return theme color, for theme version 3', () => {
     expect(
       getAccordionColors({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      descriptionColor: getTheme().colors.onSurfaceVariant,
-    });
-  });
-
-  it('should return theme color, for theme version 2', () => {
-    expect(
-      getAccordionColors({
-        theme: getTheme(false, false),
+        theme: LightTheme,
       })
     ).toMatchObject({
-      descriptionColor: color(getTheme(false, false).colors.text)
-        .alpha(0.54)
-        .rgb()
-        .string(),
+      descriptionColor: LightTheme.colors.onSurfaceVariant,
     });
   });
 });
@@ -169,75 +182,21 @@ describe('getAccordionColors - title text color', () => {
   it('should return theme color, for theme version 3', () => {
     expect(
       getAccordionColors({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      titleTextColor: getTheme().colors.onSurface,
-    });
-  });
-
-  it('should return theme color, for theme version 2', () => {
-    expect(
-      getAccordionColors({
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      titleTextColor: color(getTheme(false, false).colors.text)
-        .alpha(0.87)
-        .rgb()
-        .string(),
-    });
-  });
-
-  it('should return primary color if it is expanded', () => {
-    expect(
-      getAccordionColors({
-        theme: getTheme(),
-        isExpanded: true,
-      })
-    ).toMatchObject({
-      titleTextColor: getTheme().colors?.primary,
-    });
-  });
-});
-
-describe('getAccordionColors - ripple color', () => {
-  it('should return theme color, for theme version 3', () => {
-    expect(
-      getAccordionColors({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      rippleColor: color(getTheme().colors.onSurface)
-        .alpha(0.12)
-        .rgb()
-        .string(),
-    });
-  });
-
-  it('should return theme color, for theme version 2', () => {
-    const v2TextColor = color(getTheme(false, false).colors.text)
-      .alpha(0.87)
-      .rgb()
-      .string();
-
-    expect(
-      getAccordionColors({
-        theme: getTheme(false, false),
+        theme: LightTheme,
       })
     ).toMatchObject({
-      rippleColor: color(v2TextColor).alpha(0.12).rgb().string(),
+      titleTextColor: LightTheme.colors.onSurface,
     });
   });
 
   it('should return primary color if it is expanded', () => {
     expect(
       getAccordionColors({
-        theme: getTheme(),
+        theme: LightTheme,
         isExpanded: true,
       })
     ).toMatchObject({
-      rippleColor: color(getTheme().colors.primary).alpha(0.12).rgb().string(),
+      titleTextColor: LightTheme.colors?.primary,
     });
   });
 });
diff --git a/src/components/__tests__/ListImage.test.tsx b/src/components/__tests__/ListImage.test.tsx
index 5248019277..04796fd73a 100644
--- a/src/components/__tests__/ListImage.test.tsx
+++ b/src/components/__tests__/ListImage.test.tsx
@@ -1,69 +1,64 @@
-import * as React from 'react';
 import { StyleSheet } from 'react-native';
 
-import { render } from '@testing-library/react-native';
+import { expect, it } from '@jest/globals';
 
+import { render } from '../../test-utils';
 import ListImage from '../List/ListImage';
 
 const styles = StyleSheet.create({
-  image: {
-    width: 56,
-    height: 56,
-  },
-  video: {
-    width: 114,
-    height: 64,
-    marginLeft: 0,
-  },
   container: {
     width: 30,
     height: 56,
   },
 });
 
-const testID = 'list-image';
-
-it('renders ListImage with default variant', () => {
-  const tree = render(
-    <ListImage
-      source={require('../../../example/assets/images/strawberries.jpg')}
-    />
+it('renders ListImage with default variant', async () => {
+  const tree = (
+    await render(
+      <ListImage
+        source={require('../../../example/assets/images/strawberries.jpg')}
+      />
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders ListImage with default variant & styles', () => {
-  const tree = render(
-    <ListImage
-      source={require('../../../example/assets/images/strawberries.jpg')}
-      style={styles.container}
-    />
+it('renders ListImage with default variant & styles', async () => {
+  const tree = (
+    await render(
+      <ListImage
+        source={require('../../../example/assets/images/strawberries.jpg')}
+        style={styles.container}
+      />
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders ListImage with `image` variant', () => {
-  const tree = render(
-    <ListImage
-      variant="image"
-      source={{ uri: 'https://www.someurl.com/apple' }}
-    />
-  );
+it('renders ListImage with `image` variant', async () => {
+  const tree = (
+    await render(
+      <ListImage
+        variant="image"
+        source={{ uri: 'https://www.someurl.com/apple' }}
+      />
+    )
+  ).toJSON();
 
-  expect(tree.container.props['variant']).toBe('image');
-  expect(tree.getByTestId(testID)).toHaveStyle(styles.image);
+  expect(tree).toMatchSnapshot();
 });
 
-it('renders ListImage with `video` variant', () => {
-  const tree = render(
-    <ListImage
-      variant="video"
-      source={{ uri: 'https://www.someurl.com/apple' }}
-    />
-  );
+it('renders ListImage with `video` variant', async () => {
+  const tree = (
+    await render(
+      <ListImage
+        variant="video"
+        source={{ uri: 'https://www.someurl.com/apple' }}
+      />
+    )
+  ).toJSON();
 
-  expect(tree.container.props['variant']).toBe('video');
-  expect(tree.getByTestId(testID)).toHaveStyle(styles.video);
+  expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/ListItem.test.tsx b/src/components/__tests__/ListItem.test.tsx
index 036697f9ec..98e6e0f0fe 100644
--- a/src/components/__tests__/ListItem.test.tsx
+++ b/src/components/__tests__/ListItem.test.tsx
@@ -1,10 +1,12 @@
-import * as React from 'react';
+import type { GestureResponderEvent } from 'react-native';
 import { Platform, StyleSheet } from 'react-native';
 import { Text, View } from 'react-native';
 
-import { fireEvent, render } from '@testing-library/react-native';
+import { expect, it, jest } from '@jest/globals';
+import { userEvent } from '@testing-library/react-native';
 
-import { red500 } from '../../styles/themes/v2/colors';
+import { render, screen } from '../../test-utils';
+import { red500 } from '../../theme/colors';
 import Chip from '../Chip/Chip';
 import IconButton from '../IconButton/IconButton';
 import ListIcon from '../List/ListIcon';
@@ -24,131 +26,147 @@ const styles = StyleSheet.create({
 
 const testID = 'list-item';
 
-it('renders list item with title and description', () => {
-  const tree = render(
-    <ListItem
-      title="First Item"
-      testID={testID}
-      description="Description for first item"
-    />
+it('renders list item with title and description', async () => {
+  const tree = (
+    await render(
+      <ListItem
+        title="First Item"
+        testID={testID}
+        description="Description for first item"
+      />
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders list item with left item', () => {
-  const tree = render(
-    <ListItem
-      title="First Item"
-      testID={testID}
-      left={(props) => <ListIcon {...props} icon="folder" />}
-    />
+it('renders list item with left item', async () => {
+  const tree = (
+    await render(
+      <ListItem
+        title="First Item"
+        testID={testID}
+        left={(props) => <ListIcon {...props} icon="folder" />}
+      />
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders list item with right item', () => {
-  const tree = render(
-    <ListItem
-      title="First Item"
-      testID={testID}
-      right={() => <Text>GG</Text>}
-    />
+it('renders list item with right item', async () => {
+  const tree = (
+    await render(
+      <ListItem
+        title="First Item"
+        testID={testID}
+        right={() => <Text>GG</Text>}
+      />
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders list item with left and right items', () => {
-  const tree = render(
-    <ListItem
-      title="First Item"
-      description="Item description"
-      testID={testID}
-      left={() => <Text>GG</Text>}
-      right={(props) => <ListIcon {...props} icon="folder" />}
-    />
+it('renders list item with left and right items', async () => {
+  const tree = (
+    await render(
+      <ListItem
+        title="First Item"
+        description="Item description"
+        testID={testID}
+        left={() => <Text>GG</Text>}
+        right={(props) => <ListIcon {...props} icon="folder" />}
+      />
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders list item with custom title and description styles', () => {
-  const tree = render(
-    <ListItem
-      title="First Item"
-      description="Item description"
-      testID={testID}
-      titleStyle={styles.title}
-      descriptionStyle={styles.description}
-    />
+it('renders list item with custom title and description styles', async () => {
+  const tree = (
+    await render(
+      <ListItem
+        title="First Item"
+        description="Item description"
+        testID={testID}
+        titleStyle={styles.title}
+        descriptionStyle={styles.description}
+      />
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders list item with custom description', () => {
-  const tree = render(
-    <ListItem
-      title="List Item with custom description"
-      description={({ ellipsizeMode, color: descriptionColor, fontSize }) => (
-        <View>
-          <Text
-            numberOfLines={2}
-            ellipsizeMode={ellipsizeMode}
-            style={{ color: descriptionColor, fontSize }}
-          >
-            React Native Paper is a high-quality, standard-compliant Design
-            Design library that has you covered in all major use-cases.
-          </Text>
+it('renders list item with custom description', async () => {
+  const tree = (
+    await render(
+      <ListItem
+        title="List Item with custom description"
+        description={({ ellipsizeMode, color: descriptionColor, fontSize }) => (
           <View>
-            <Chip icon="file-pdf-box" onPress={() => {}}>
-              DOCS.pdf
-            </Chip>
+            <Text
+              numberOfLines={2}
+              ellipsizeMode={ellipsizeMode}
+              style={{ color: descriptionColor, fontSize }}
+            >
+              React Native Paper is a high-quality, standard-compliant Design
+              Design library that has you covered in all major use-cases.
+            </Text>
+            <View>
+              <Chip icon="file-pdf-box" onPress={() => {}}>
+                DOCS.pdf
+              </Chip>
+            </View>
           </View>
-        </View>
-      )}
-      testID={testID}
-    />
+        )}
+        testID={testID}
+      />
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders with a description with typeof number', () => {
-  const tree = render(
-    <ListItem
-      title="First Item"
-      description={123}
-      titleStyle={styles.title}
-      descriptionStyle={styles.description}
-      testID={testID}
-    />
+it('renders with a description with typeof number', async () => {
+  const tree = (
+    await render(
+      <ListItem
+        title="First Item"
+        description={123}
+        titleStyle={styles.title}
+        descriptionStyle={styles.description}
+        testID={testID}
+      />
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('calling onPress on ListItem right component', () => {
+it('calling onPress on ListItem right component', async () => {
   Platform.OS = 'web';
-  const onPress = jest.fn();
+  const onPress = jest.fn<(event: GestureResponderEvent) => void>();
 
-  const { getByTestId } = render(
+  await render(
     <ListItem
       title="First Item"
       description="Item description"
       testID={testID}
-      right={() => <IconButton icon="pencil" onPress={onPress} />}
+      right={() => (
+        <IconButton icon="pencil" onPress={onPress} testID="icon-button" />
+      )}
     />
   );
 
-  fireEvent(getByTestId('icon-button'), 'onPress');
+  await userEvent.press(screen.getByTestId('icon-button'));
   expect(onPress).toHaveBeenCalledTimes(1);
 });
 
-it('renders list item with custom content style', () => {
-  const { getByTestId } = render(
+it('renders list item with custom content style', async () => {
+  const { toJSON } = await render(
     <ListItem
       title="First Item"
       description="Item description"
@@ -157,5 +175,5 @@ it('renders list item with custom content style', () => {
     />
   );
 
-  expect(getByTestId('list-item-content')).toHaveStyle(styles.content);
+  expect(toJSON()).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/ListSection.test.tsx b/src/components/__tests__/ListSection.test.tsx
index 8cc1578b8f..7afe889182 100644
--- a/src/components/__tests__/ListSection.test.tsx
+++ b/src/components/__tests__/ListSection.test.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react';
 import { StyleSheet } from 'react-native';
 
-import { render } from '@testing-library/react-native';
+import { expect, it } from '@jest/globals';
 
-import { red500 } from '../../styles/themes/v2/colors';
+import { render } from '../../test-utils';
+import { red500 } from '../../theme/colors';
 import ListIcon from '../List/ListIcon';
 import ListItem from '../List/ListItem';
 import ListSection from '../List/ListSection';
@@ -17,59 +17,65 @@ const styles = StyleSheet.create({
 
 const testID = 'list-item';
 
-it('renders list section without subheader', () => {
-  const tree = render(
-    <ListSection>
-      <ListItem
-        title="First Item"
-        testID={testID}
-        left={(props) => <ListIcon {...props} icon="folder" />}
-      />
-      <ListItem
-        title="Second Item"
-        testID={testID}
-        left={(props) => <ListIcon {...props} icon="folder" />}
-      />
-    </ListSection>
+it('renders list section without subheader', async () => {
+  const tree = (
+    await render(
+      <ListSection>
+        <ListItem
+          title="First Item"
+          testID={testID}
+          left={(props) => <ListIcon {...props} icon="folder" />}
+        />
+        <ListItem
+          title="Second Item"
+          testID={testID}
+          left={(props) => <ListIcon {...props} icon="folder" />}
+        />
+      </ListSection>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders list section with subheader', () => {
-  const tree = render(
-    <ListSection>
-      <ListSubheader>Some title</ListSubheader>
-      <ListItem
-        title="First Item"
-        testID={testID}
-        left={(props) => <ListIcon {...props} icon="folder" />}
-      />
-      <ListItem
-        title="Second Item"
-        testID={testID}
-        left={(props) => <ListIcon {...props} icon="folder" />}
-      />
-    </ListSection>
+it('renders list section with subheader', async () => {
+  const tree = (
+    await render(
+      <ListSection>
+        <ListSubheader>Some title</ListSubheader>
+        <ListItem
+          title="First Item"
+          testID={testID}
+          left={(props) => <ListIcon {...props} icon="folder" />}
+        />
+        <ListItem
+          title="Second Item"
+          testID={testID}
+          left={(props) => <ListIcon {...props} icon="folder" />}
+        />
+      </ListSection>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders list section with custom title style', () => {
-  const tree = render(
-    <ListSection title="Some title" titleStyle={styles.itemColor}>
-      <ListItem
-        title="First Item"
-        testID={testID}
-        left={(props) => <ListIcon {...props} icon="folder" />}
-      />
-      <ListItem
-        title="Second Item"
-        testID={testID}
-        left={(props) => <ListIcon {...props} icon="folder" />}
-      />
-    </ListSection>
+it('renders list section with custom title style', async () => {
+  const tree = (
+    await render(
+      <ListSection title="Some title" titleStyle={styles.itemColor}>
+        <ListItem
+          title="First Item"
+          testID={testID}
+          left={(props) => <ListIcon {...props} icon="folder" />}
+        />
+        <ListItem
+          title="Second Item"
+          testID={testID}
+          left={(props) => <ListIcon {...props} icon="folder" />}
+        />
+      </ListSection>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
diff --git a/src/components/__tests__/ListUtils.test.tsx b/src/components/__tests__/ListUtils.test.tsx
index 4aeefb6ca9..b733f832d0 100644
--- a/src/components/__tests__/ListUtils.test.tsx
+++ b/src/components/__tests__/ListUtils.test.tsx
@@ -1,22 +1,16 @@
-import React from 'react';
 import { StyleSheet } from 'react-native';
 
+import { expect, it } from '@jest/globals';
+
 import { getLeftStyles, getRightStyles } from '../List/utils';
 import Text from '../Typography/Text';
 
 const styles = StyleSheet.create({
-  leftItem: {
-    marginLeft: 0,
-    marginRight: 16,
-  },
   leftItemV3: {
     marginLeft: 16,
     marginRight: 0,
     alignSelf: 'center',
   },
-  rightItem: {
-    marginRight: 0,
-  },
   rightItemV3: {
     marginLeft: 16,
     marginRight: 0,
@@ -30,23 +24,13 @@ const description = <Text>Test</Text>;
  * ********************** getLeftStyles ********************** *
  */
 
-it('returns styles for left item without description for V2', () => {
-  const style = getLeftStyles(false, null, false);
-  expect(style).toStrictEqual({ ...styles.leftItem, marginVertical: 0 });
-});
-
-it('returns styles for left item w/ desctiption for V2', () => {
-  const style = getLeftStyles(false, description, false);
-  expect(style).toStrictEqual(styles.leftItem);
-});
-
-it('returns styles for left item without description for V3', () => {
-  const style = getLeftStyles(false, null, true);
+it('returns styles for left item without description', () => {
+  const style = getLeftStyles(false, null);
   expect(style).toStrictEqual({ ...styles.leftItemV3, marginVertical: 0 });
 });
 
-it('returns styles for left item w/ desctiption for V3', () => {
-  const style = getLeftStyles(true, description, true);
+it('returns styles for left item w/ description', () => {
+  const style = getLeftStyles(true, description);
   expect(style).toStrictEqual({
     ...styles.leftItemV3,
     alignSelf: 'flex-start',
@@ -57,23 +41,13 @@ it('returns styles for left item w/ desctiption for V3', () => {
  * ********************** getRightStyles ********************** *
  */
 
-it('returns styles for right item without description for V2', () => {
-  const style = getRightStyles(false, null, false);
-  expect(style).toStrictEqual({ ...styles.rightItem, marginVertical: 0 });
-});
-
-it('returns styles for right item w/ desctiption for V2', () => {
-  const style = getRightStyles(false, description, false);
-  expect(style).toStrictEqual(styles.rightItem);
-});
-
-it('returns styles for right item without description for V3', () => {
-  const style = getRightStyles(false, null, true);
+it('returns styles for right item without description', () => {
+  const style = getRightStyles(false, null);
   expect(style).toStrictEqual({ ...styles.rightItemV3, marginVertical: 0 });
 });
 
-it('returns styles for right item w/ desctiption for V3', () => {
-  const style = getRightStyles(true, description, true);
+it('returns styles for right item w/ description', () => {
+  const style = getRightStyles(true, description);
   expect(style).toStrictEqual({
     ...styles.rightItemV3,
     alignSelf: 'flex-start',
diff --git a/src/components/__tests__/Menu.test.tsx b/src/components/__tests__/Menu.test.tsx
index 29397d1262..7b02890f78 100644
--- a/src/components/__tests__/Menu.test.tsx
+++ b/src/components/__tests__/Menu.test.tsx
@@ -1,84 +1,175 @@
-import * as React from 'react';
-import { Animated, Dimensions, StyleSheet, View } from 'react-native';
-
-import { act, render, screen, waitFor } from '@testing-library/react-native';
-
-import { getTheme } from '../../core/theming';
-import { MD3Elevation } from '../../types';
+import { Dimensions, Platform, StyleSheet, View } from 'react-native';
+
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  jest,
+} from '@jest/globals';
+import { act, screen, waitFor } from '@testing-library/react-native';
+
+import { render } from '../../test-utils';
+import { LightTheme } from '../../theme/schemes';
+import type { Elevation } from '../../theme/types';
 import Button from '../Button/Button';
-import Menu, { ELEVATION_LEVELS_MAP } from '../Menu/Menu';
+import Menu from '../Menu/Menu';
 import Portal from '../Portal/Portal';
 
-const styles = StyleSheet.create({
-  contentStyle: {
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-  },
-});
+describe('web focus', () => {
+  const PAST_ANIMATION_MS = 300;
+  const focus = jest.fn();
+  const originalPlatform = Platform.OS;
+  const originalHTMLElement = Object.getOwnPropertyDescriptor(
+    globalThis,
+    'HTMLElement'
+  );
+  const originalDocument = Object.getOwnPropertyDescriptor(
+    globalThis,
+    'document'
+  );
+  const originalQuerySelector = Object.getOwnPropertyDescriptor(
+    View.prototype,
+    'querySelector'
+  );
+  const originalMeasureInWindow = Object.getOwnPropertyDescriptor(
+    View.prototype,
+    'measureInWindow'
+  );
+
+  beforeEach(() => {
+    Platform.OS = 'web';
+    focus.mockClear();
+    // Native View refs stand in for DOM elements in the native test renderer.
+    Object.defineProperty(globalThis, 'HTMLElement', {
+      configurable: true,
+      value: View,
+    });
+    Object.defineProperty(globalThis, 'document', {
+      configurable: true,
+      value: {
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+      },
+    });
+    Object.defineProperty(View.prototype, 'querySelector', {
+      configurable: true,
+      value: () => ({ focus }),
+    });
+    const measureInWindow: View['measureInWindow'] = (fn) =>
+      fn(100, 100, 80, 32);
+    Object.defineProperty(View.prototype, 'measureInWindow', {
+      configurable: true,
+      value: measureInWindow,
+    });
+  });
+
+  afterEach(() => {
+    Platform.OS = originalPlatform;
+    for (const [target, key, descriptor] of [
+      [globalThis, 'HTMLElement', originalHTMLElement],
+      [globalThis, 'document', originalDocument],
+      [View.prototype, 'querySelector', originalQuerySelector],
+      [View.prototype, 'measureInWindow', originalMeasureInWindow],
+    ] as const) {
+      if (descriptor) {
+        Object.defineProperty(target, key, descriptor);
+      } else {
+        Reflect.deleteProperty(target, key);
+      }
+    }
+  });
 
-it('renders visible menu', () => {
-  const tree = render(
+  const makeMenu = (visible: boolean) => (
     <Portal.Host>
-      <Menu
-        visible
-        onDismiss={jest.fn()}
-        anchor={<Button mode="outlined">Open menu</Button>}
-      >
-        <Menu.Item onPress={jest.fn()} title="Undo" />
-        <Menu.Item onPress={jest.fn()} title="Redo" />
+      <Menu visible={visible} anchor={<Button>Open menu</Button>}>
+        <Menu.Item title="Undo" />
       </Menu>
     </Portal.Host>
-  ).toJSON();
+  );
 
-  expect(tree).toMatchSnapshot();
+  it('does not move focus when mounted hidden', async () => {
+    await render(makeMenu(false));
+    await act(() => jest.advanceTimersByTime(PAST_ANIMATION_MS));
+
+    expect(focus).not.toHaveBeenCalled();
+  });
+
+  it('moves focus when opened and restores it when closed', async () => {
+    const { rerender } = await render(makeMenu(false));
+    await rerender(makeMenu(true));
+    await act(() => jest.advanceTimersByTime(PAST_ANIMATION_MS));
+
+    expect(focus).toHaveBeenCalledTimes(1);
+
+    await rerender(makeMenu(false));
+    await act(() => jest.advanceTimersByTime(PAST_ANIMATION_MS));
+
+    expect(focus).toHaveBeenCalledTimes(2);
+  });
+
+  it('moves focus when mounted visible', async () => {
+    await render(makeMenu(true));
+    await act(() => jest.advanceTimersByTime(PAST_ANIMATION_MS));
+
+    expect(focus).toHaveBeenCalledTimes(1);
+  });
 });
 
-it('renders not visible menu', () => {
-  const tree = render(
-    <Portal.Host>
-      <Menu
-        visible={false}
-        onDismiss={jest.fn()}
-        anchor={<Button mode="outlined">Open menu</Button>}
-      >
-        <Menu.Item onPress={jest.fn()} title="Undo" />
-        <Menu.Item onPress={jest.fn()} title="Redo" />
-      </Menu>
-    </Portal.Host>
+it('renders visible menu', async () => {
+  const tree = (
+    await render(
+      <Portal.Host>
+        <Menu
+          visible
+          onDismiss={jest.fn()}
+          anchor={<Button mode="outlined">Open menu</Button>}
+        >
+          <Menu.Item onPress={jest.fn()} title="Undo" />
+          <Menu.Item onPress={jest.fn()} title="Redo" />
+        </Menu>
+      </Portal.Host>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders menu with content styles', () => {
-  const tree = render(
-    <Portal.Host>
-      <Menu
-        visible
-        onDismiss={jest.fn()}
-        anchor={<Button mode="outlined">Open menu</Button>}
-        contentStyle={styles.contentStyle}
-      >
-        <Menu.Item onPress={jest.fn()} title="Undo" />
-        <Menu.Item onPress={jest.fn()} title="Redo" />
-      </Menu>
-    </Portal.Host>
+it('renders not visible menu', async () => {
+  const tree = (
+    await render(
+      <Portal.Host>
+        <Menu
+          visible={false}
+          onDismiss={jest.fn()}
+          anchor={<Button mode="outlined">Open menu</Button>}
+        >
+          <Menu.Item onPress={jest.fn()} title="Undo" />
+          <Menu.Item onPress={jest.fn()} title="Redo" />
+        </Menu>
+      </Portal.Host>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-([0, 1, 2, 3, 4, 5] as MD3Elevation[]).forEach((elevation) =>
-  it(`renders menu with background color based on elevation value = ${elevation}`, () => {
-    const theme = getTheme(false, true);
+const elevations: Elevation[] = [0, 1, 2, 3, 4, 5];
+
+elevations.forEach((elevation) =>
+  it(`renders menu with background color based on elevation value = ${elevation}`, async () => {
+    const testID = 'menu-with-elevation';
 
-    const { getByTestId } = render(
+    await render(
       <Portal.Host>
         <Menu
           visible
           onDismiss={jest.fn()}
           anchor={<Button mode="outlined">Open menu</Button>}
           elevation={elevation}
+          mode="flat"
+          testID={testID}
         >
           <Menu.Item onPress={jest.fn()} title="Undo" />
           <Menu.Item onPress={jest.fn()} title="Redo" />
@@ -86,13 +177,14 @@ it('renders menu with content styles', () => {
       </Portal.Host>
     );
 
-    expect(getByTestId('menu-surface')).toHaveStyle({
-      backgroundColor: theme.colors.elevation[ELEVATION_LEVELS_MAP[elevation]],
+    expect(screen.getByTestId(testID)).toHaveStyle({
+      backgroundColor: LightTheme.colors.elevation[`level${elevation}`],
     });
   })
 );
 
 it('uses the default anchorPosition of top', async () => {
+  const testID = 'top-positioned-menu';
   const dimensionsSpy = jest.spyOn(Dimensions, 'get').mockReturnValue({
     width: 400,
     height: 800,
@@ -114,7 +206,7 @@ it('uses the default anchorPosition of top', async () => {
               Open menu
             </Button>
           }
-          contentStyle={styles.contentStyle}
+          testID={testID}
         >
           <Menu.Item onPress={jest.fn()} title="Undo" />
           <Menu.Item onPress={jest.fn()} title="Redo" />
@@ -123,32 +215,32 @@ it('uses the default anchorPosition of top', async () => {
     );
   }
 
-  render(makeMenu(false));
+  const { rerender, toJSON } = await render(makeMenu(false));
 
   // You must update instead of creating directly and using it because
   // componentDidUpdate isn't called by default in jest. Forcing the update
   // than triggers measureInWindow, which is how Menu decides where to show
   // itself.
   await act(async () => {
-    screen.update(makeMenu(true));
+    await rerender(makeMenu(true));
     // Menu waits a tick for Portal refs to be up-to-date.
     await Promise.resolve();
   });
 
   await waitFor(() => {
-    const menu = screen.getByTestId('menu-view');
-    expect(menu).toHaveStyle({
-      position: 'absolute',
-      left: 100,
-      top: 100,
-    });
+    const json = JSON.stringify(toJSON());
+    expect(json).toContain('"left":100');
+    expect(json).toContain('"top":100');
   });
 
+  expect(toJSON()).toMatchSnapshot();
+
   measureSpy.mockRestore();
   dimensionsSpy.mockRestore();
 });
 
 it('respects anchorPosition bottom', async () => {
+  const testID = 'bottom-positioned-menu';
   const dimensionsSpy = jest.spyOn(Dimensions, 'get').mockReturnValue({
     width: 400,
     height: 800,
@@ -171,7 +263,7 @@ it('respects anchorPosition bottom', async () => {
             </Button>
           }
           anchorPosition="bottom"
-          contentStyle={styles.contentStyle}
+          testID={testID}
         >
           <Menu.Item onPress={jest.fn()} title="Undo" />
           <Menu.Item onPress={jest.fn()} title="Redo" />
@@ -180,68 +272,37 @@ it('respects anchorPosition bottom', async () => {
     );
   }
 
-  render(makeMenu(false));
+  const { rerender, toJSON } = await render(makeMenu(false));
 
   await act(async () => {
-    screen.update(makeMenu(true));
+    await rerender(makeMenu(true));
     // Menu waits a tick for Portal refs to be up-to-date.
     await Promise.resolve();
   });
 
   await waitFor(() => {
-    const menu = screen.getByTestId('menu-view');
-    expect(menu).toHaveStyle({
-      position: 'absolute',
-      left: 100,
-      top: 132,
-    });
+    const json = JSON.stringify(toJSON());
+    expect(json).toContain('"left":100');
+    expect(json).toContain('"top":132');
   });
 
+  expect(toJSON()).toMatchSnapshot();
+
   measureSpy.mockRestore();
   dimensionsSpy.mockRestore();
 });
 
-it('animated value changes correctly', () => {
-  const value = new Animated.Value(1);
-  const { getByTestId } = render(
-    <Portal.Host>
-      <Menu
-        visible
-        onDismiss={jest.fn()}
-        anchor={<Button mode="outlined">Open menu</Button>}
-        testID="menu"
-        contentStyle={[{ transform: [{ scale: value }] }]}
-      >
-        <Menu.Item onPress={jest.fn()} title="Test" />
-      </Menu>
-    </Portal.Host>
-  );
-  expect(getByTestId('menu-surface-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1 }],
-  });
-
-  Animated.timing(value, {
-    toValue: 1.5,
-    useNativeDriver: false,
-    duration: 200,
-  }).start();
-
-  act(() => {
-    jest.advanceTimersByTime(200);
-  });
-  expect(getByTestId('menu-surface-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1.5 }],
-  });
-});
+it('renders menu with mode "elevated"', async () => {
+  const testID = 'elevated-menu';
 
-it('renders menu with mode "elevated"', () => {
-  const { getByTestId } = render(
+  await render(
     <Portal.Host>
       <Menu
         visible
         onDismiss={jest.fn()}
         anchor={<Button mode="outlined">Open menu</Button>}
         mode="elevated"
+        testID={testID}
       >
         <Menu.Item onPress={jest.fn()} title="Undo" />
         <Menu.Item onPress={jest.fn()} title="Redo" />
@@ -249,23 +310,24 @@ it('renders menu with mode "elevated"', () => {
     </Portal.Host>
   );
 
-  const menuSurface = getByTestId('menu-surface');
-
-  // Get flattened styles
-  const styles = StyleSheet.flatten(menuSurface.props.style);
+  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+  const styles = StyleSheet.flatten(screen.getByTestId(testID).props.style);
 
   expect(styles).toHaveProperty('shadowColor');
   expect(styles).toHaveProperty('shadowOpacity');
 });
 
-it('renders menu with mode "flat"', () => {
-  const { getByTestId } = render(
+it('renders menu with mode "flat"', async () => {
+  const testID = 'flat-menu';
+
+  await render(
     <Portal.Host>
       <Menu
         visible
         onDismiss={jest.fn()}
         anchor={<Button mode="outlined">Open menu</Button>}
         mode="flat"
+        testID={testID}
       >
         <Menu.Item onPress={jest.fn()} title="Undo" />
         <Menu.Item onPress={jest.fn()} title="Redo" />
@@ -273,10 +335,8 @@ it('renders menu with mode "flat"', () => {
     </Portal.Host>
   );
 
-  const menuSurface = getByTestId('menu-surface');
-
-  // Get flattened styles
-  const styles = StyleSheet.flatten(menuSurface.props.style);
+  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+  const styles = StyleSheet.flatten(screen.getByTestId(testID).props.style);
 
   expect(styles).not.toHaveProperty('shadowColor');
   expect(styles).not.toHaveProperty('shadowOpacity');
diff --git a/src/components/__tests__/MenuItem.test.tsx b/src/components/__tests__/MenuItem.test.tsx
index 7413f43622..7f83575109 100644
--- a/src/components/__tests__/MenuItem.test.tsx
+++ b/src/components/__tests__/MenuItem.test.tsx
@@ -1,43 +1,46 @@
-import * as React from 'react';
+import { describe, expect, it } from '@jest/globals';
 
-import { render } from '@testing-library/react-native';
-import color from 'color';
-
-import { getTheme } from '../../core/theming';
-import { black, white } from '../../styles/themes/v2/colors';
+import { render, screen } from '../../test-utils';
+import { LightTheme } from '../../theme/schemes';
+import { tokens } from '../../theme/tokens';
 import Menu from '../Menu/Menu';
 import { getMenuItemColor } from '../Menu/utils';
 
+const stateOpacity = tokens.md.sys.state.opacity;
+
 describe('Menu Item', () => {
-  it('renders menu item', () => {
-    const tree = render(
-      <>
-        <Menu.Item leadingIcon="redo" onPress={() => {}} title="Redo" />
-        <Menu.Item leadingIcon="undo" onPress={() => {}} title="Undo" />
-        <Menu.Item
-          leadingIcon="content-cut"
-          onPress={() => {}}
-          title="Cut"
-          disabled
-        />
-        <Menu.Item
-          leadingIcon="content-copy"
-          onPress={() => {}}
-          title="Copy"
-          disabled
-        />
-        <Menu.Item onPress={() => {}} title="Paste" />
-      </>
+  it('renders menu item', async () => {
+    const tree = (
+      await render(
+        <>
+          <Menu.Item leadingIcon="redo" onPress={() => {}} title="Redo" />
+          <Menu.Item leadingIcon="undo" onPress={() => {}} title="Undo" />
+          <Menu.Item
+            leadingIcon="content-cut"
+            onPress={() => {}}
+            title="Cut"
+            disabled
+          />
+          <Menu.Item
+            leadingIcon="content-copy"
+            onPress={() => {}}
+            title="Copy"
+            disabled
+          />
+          <Menu.Item onPress={() => {}} title="Paste" />
+        </>
+      )
     ).toJSON();
 
     expect(tree).toMatchSnapshot();
   });
 
-  it('should have titleMaxFontSizeMultiplier passed to title', () => {
+  it('should have titleMaxFontSizeMultiplier passed to title', async () => {
     const labelMaxFontSizeMultiplier = 2;
 
-    const { getByTestId } = render(
+    await render(
       <Menu.Item
+        testID="menu-item"
         titleMaxFontSizeMultiplier={labelMaxFontSizeMultiplier}
         leadingIcon="content-cut"
         onPress={() => {}}
@@ -45,23 +48,19 @@ describe('Menu Item', () => {
       />
     );
 
-    expect(getByTestId('menu-item-title').props.maxFontSizeMultiplier).toBe(
+    expect(screen.getByText('Cut')).toHaveProp(
+      'maxFontSizeMultiplier',
       labelMaxFontSizeMultiplier
     );
   });
 
-  it('accepts different values for accessibilityState', () => {
-    const { getByTestId } = render(
-      <Menu.Item
-        accessibilityState={{ checked: true }}
-        title="Option 1"
-        testID="touchable"
-      />
-    );
+  it('accepts aria-checked prop', async () => {
+    await render(<Menu.Item aria-checked={true} title="Option 1" />);
 
-    expect(getByTestId('touchable').props.accessibilityState).toMatchObject({
-      checked: true,
-    });
+    expect(screen.getByRole('menuitem')).toHaveProp(
+      'accessibilityState',
+      expect.objectContaining({ checked: true })
+    );
   });
 });
 
@@ -69,54 +68,22 @@ describe('getMenuItemColor - title color', () => {
   it('should return disabled color if disabled, for theme version 3', () => {
     expect(
       getMenuItemColor({
-        theme: getTheme(),
-        disabled: true,
-      })
-    ).toMatchObject({ titleColor: getTheme().colors.onSurfaceDisabled });
-  });
-
-  it('should return disabled color if disabled, for theme version 2, light theme', () => {
-    expect(
-      getMenuItemColor({
-        theme: getTheme(false, false),
+        theme: LightTheme,
         disabled: true,
       })
     ).toMatchObject({
-      titleColor: color(black).alpha(0.32).rgb().string(),
-    });
-  });
-
-  it('should return disabled color if disabled, for theme version 2, dark theme', () => {
-    expect(
-      getMenuItemColor({
-        theme: getTheme(true, false),
-        disabled: true,
-      })
-    ).toMatchObject({
-      titleColor: color(white).alpha(0.32).rgb().string(),
+      titleColor: LightTheme.colors.onSurface,
+      contentOpacity: stateOpacity.disabled,
     });
   });
 
   it('should return correct theme color, for theme version 3', () => {
     expect(
       getMenuItemColor({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      titleColor: getTheme().colors.onSurface,
-    });
-  });
-
-  it('should return correct theme color, for theme version 2', () => {
-    expect(
-      getMenuItemColor({
-        theme: getTheme(false, false),
+        theme: LightTheme,
       })
     ).toMatchObject({
-      titleColor: color(getTheme(false, false).colors.text)
-        .alpha(0.87)
-        .rgb()
-        .string(),
+      titleColor: LightTheme.colors.onSurface,
     });
   });
 });
@@ -125,79 +92,22 @@ describe('getMenuItemColor - icon color', () => {
   it('should return disabled color if disabled, for theme version 3', () => {
     expect(
       getMenuItemColor({
-        theme: getTheme(),
+        theme: LightTheme,
         disabled: true,
       })
-    ).toMatchObject({ iconColor: getTheme().colors.onSurfaceDisabled });
-  });
-
-  it('should return disabled color if disabled, for theme version 2, light theme', () => {
-    expect(
-      getMenuItemColor({
-        theme: getTheme(false, false),
-        disabled: true,
-      })
-    ).toMatchObject({
-      iconColor: color(black).alpha(0.32).rgb().string(),
-    });
-  });
-
-  it('should return disabled color if disabled, for theme version 2, dark theme', () => {
-    expect(
-      getMenuItemColor({
-        theme: getTheme(true, false),
-        disabled: true,
-      })
-    ).toMatchObject({
-      iconColor: color(white).alpha(0.32).rgb().string(),
-    });
-  });
-
-  it('should return correct theme color, for theme version 3', () => {
-    expect(
-      getMenuItemColor({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      iconColor: getTheme().colors.onSurfaceVariant,
-    });
-  });
-
-  it('should return correct theme color, for theme version 2', () => {
-    expect(
-      getMenuItemColor({
-        theme: getTheme(false, false),
-      })
     ).toMatchObject({
-      iconColor: color(getTheme(false, false).colors.text)
-        .alpha(0.54)
-        .rgb()
-        .string(),
+      iconColor: LightTheme.colors.onSurfaceVariant,
+      contentOpacity: stateOpacity.disabled,
     });
   });
-});
 
-describe('getMenuItemColor - ripple color', () => {
   it('should return correct theme color, for theme version 3', () => {
     expect(
       getMenuItemColor({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      rippleColor: color(getTheme().colors.onSurfaceVariant)
-        .alpha(0.12)
-        .rgb()
-        .string(),
-    });
-  });
-
-  it('should return undefined, for theme version 2', () => {
-    expect(
-      getMenuItemColor({
-        theme: getTheme(false, false),
+        theme: LightTheme,
       })
     ).toMatchObject({
-      rippleColor: undefined,
+      iconColor: LightTheme.colors.onSurfaceVariant,
     });
   });
 });
diff --git a/src/components/__tests__/Modal.test.tsx b/src/components/__tests__/Modal.test.tsx
index 32161d5b84..6a071893c2 100644
--- a/src/components/__tests__/Modal.test.tsx
+++ b/src/components/__tests__/Modal.test.tsx
@@ -1,15 +1,16 @@
-import * as React from 'react';
-import {
-  Animated,
-  BackHandler as RNBackHandler,
-  BackHandlerStatic as RNBackHandlerStatic,
-  Text,
-} from 'react-native';
+import { BackHandler as RNBackHandler, Text } from 'react-native';
+import type { BackHandlerStatic as RNBackHandlerStatic } from 'react-native';
 
-import { act, fireEvent, render } from '@testing-library/react-native';
+import { afterAll, beforeAll, describe, expect, it, jest } from '@jest/globals';
+import { act, fireEvent, userEvent } from '@testing-library/react-native';
 
-import { MD3LightTheme } from '../../styles/themes';
+import { render, screen } from '../../test-utils';
+import { LightTheme } from '../../theme/schemes';
+import { tokens } from '../../theme/tokens';
 import Modal from '../Modal';
+import Portal from '../Portal/Portal';
+
+const scrimAlpha = tokens.md.sys.scrim.alpha;
 
 jest.mock('react-native-safe-area-context', () => ({
   useSafeAreaInsets: () => ({ bottom: 44, left: 0, right: 0, top: 37 }),
@@ -19,6 +20,7 @@ interface BackHandlerStatic extends RNBackHandlerStatic {
   mockPressBack(): void;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
 const BackHandler = RNBackHandler as BackHandlerStatic;
 
 describe('Modal', () => {
@@ -31,583 +33,751 @@ describe('Modal', () => {
 
   afterAll(() => {
     jest.useRealTimers();
+    /* eslint-disable @typescript-eslint/no-unsafe-type-assertion */
     (
       window.requestAnimationFrame as unknown as { mockRestore(): void }
     ).mockRestore();
+    /* eslint-enable @typescript-eslint/no-unsafe-type-assertion */
   });
 
-  describe('by default', () => {
-    it('should render passed children', () => {
-      const { getByTestId } = render(
-        <Modal visible={true} testID="modal">
+  it('renders passed children', async () => {
+    await render(
+      <Portal.Host>
+        <Modal visible testID="modal" overlayTestID="backdrop">
           <Text>Children</Text>
         </Modal>
-      );
+      </Portal.Host>
+    );
 
-      expect(getByTestId('modal')).toHaveTextContent('Children');
-    });
+    expect(screen.getByTestId('modal')).toHaveTextContent('Children');
+  });
 
-    it("should render a backdrop in default theme's color", () => {
-      const { getByTestId } = render(
-        <Modal visible={true} testID="modal">
+  it("renders a backdrop in default theme's color", async () => {
+    await render(
+      <Portal.Host>
+        <Modal visible testID="modal" overlayTestID="backdrop">
           {null}
         </Modal>
-      );
+      </Portal.Host>
+    );
 
-      expect(getByTestId('modal-backdrop')).toHaveStyle({
-        backgroundColor: MD3LightTheme.colors.backdrop,
-      });
+    expect(
+      screen.getByTestId('backdrop', { includeHiddenElements: true })
+    ).toHaveStyle({
+      backgroundColor: LightTheme.colors.scrim,
     });
+  });
 
-    it('should render a custom backdrop color if specified', () => {
-      const { getByTestId } = render(
+  it('renders a custom backdrop color if specified', async () => {
+    await render(
+      <Portal.Host>
         <Modal
-          visible={true}
+          visible
           testID="modal"
+          overlayTestID="backdrop"
           theme={{
             colors: {
-              backdrop: 'transparent',
+              scrim: 'transparent',
             },
           }}
         >
           {null}
         </Modal>
-      );
+      </Portal.Host>
+    );
 
-      expect(getByTestId('modal-backdrop')).toHaveStyle({
-        backgroundColor: 'transparent',
-      });
+    expect(
+      screen.getByTestId('backdrop', { includeHiddenElements: true })
+    ).toHaveStyle({
+      backgroundColor: 'transparent',
     });
+  });
+
+  it('receives appropriate top and bottom insets', async () => {
+    const { toJSON } = await render(
+      <Portal.Host>
+        <Modal visible testID="modal" overlayTestID="backdrop">
+          {null}
+        </Modal>
+      </Portal.Host>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('exposes the modal as a dialog with an accessible name', async () => {
+    await render(
+      <Portal.Host>
+        <Modal visible aria-label="Example modal">
+          <Text>Modal content</Text>
+        </Modal>
+      </Portal.Host>
+    );
+
+    // Role queries only match accessibility elements, and the dialog
+    // container must not be one or it would swallow its children on iOS.
+    expect(screen.getByLabelText('Example modal')).toHaveProp('role', 'dialog');
+  });
+
+  it('hides the backdrop from assistive technology', async () => {
+    await render(
+      <Portal.Host>
+        <Modal visible testID="modal" overlayTestID="backdrop">
+          {null}
+        </Modal>
+      </Portal.Host>
+    );
 
-    it('should receive appropriate top and bottom insets', () => {
-      const { getByTestId } = render(
-        <Modal visible={true} testID="modal">
+    expect(screen.queryByTestId('backdrop')).not.toBeOnTheScreen();
+    expect(
+      screen.getByTestId('backdrop', { includeHiddenElements: true })
+    ).toBeOnTheScreen();
+  });
+
+  it('invokes onDismiss immediately when the backdrop is pressed', async () => {
+    const onDismiss = jest.fn();
+
+    const { toJSON } = await render(
+      <Portal.Host>
+        <Modal
+          testID="modal"
+          overlayTestID="backdrop"
+          visible
+          onDismiss={onDismiss}
+        >
           {null}
         </Modal>
-      );
+      </Portal.Host>
+    );
+
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    await userEvent.press(
+      screen.getByTestId('backdrop', { includeHiddenElements: true })
+    );
+
+    expect(onDismiss).toHaveBeenCalled();
+
+    expect(toJSON()).toMatchSnapshot();
+
+    await act(() => {
+      jest.runAllTimers();
+    });
 
-      expect(getByTestId('modal-wrapper')).toHaveStyle({
-        marginTop: 37,
-        marginBottom: 44,
-      });
+    expect(
+      screen.getByTestId('backdrop', { includeHiddenElements: true })
+    ).toHaveStyle({
+      opacity: scrimAlpha,
     });
+
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(onDismiss).toHaveBeenCalledTimes(1);
   });
-  describe('when open', () => {
-    describe('if backdrop touched', () => {
-      it('should invoke the onDismiss function immediately', () => {
-        const onDismiss = jest.fn();
-        const { getByTestId } = render(
-          <Modal testID="modal" visible onDismiss={onDismiss}>
-            {null}
-          </Modal>
-        );
 
-        expect(onDismiss).not.toHaveBeenCalled();
+  it('runs the closing animation when visible changes to false after dismissing', async () => {
+    const { rerender, toJSON } = await render(
+      <Portal.Host>
+        <Modal
+          testID="modal"
+          overlayTestID="backdrop"
+          visible
+          onDismiss={() => {}}
+        >
+          {null}
+        </Modal>
+      </Portal.Host>
+    );
 
-        act(() => {
-          fireEvent.press(getByTestId('modal-backdrop'));
-        });
+    expect(toJSON()).toMatchSnapshot();
 
-        expect(onDismiss).toHaveBeenCalled();
+    await userEvent.press(screen.getByRole('button', { name: 'Close modal' }));
 
-        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-          opacity: 1,
-        });
+    await rerender(
+      <Portal.Host>
+        <Modal
+          testID="modal"
+          overlayTestID="backdrop"
+          visible={false}
+          onDismiss={() => {}}
+        >
+          {null}
+        </Modal>
+      </Portal.Host>
+    );
 
-        act(() => {
-          jest.runAllTimers();
-        });
+    expect(toJSON()).toMatchSnapshot();
 
-        expect(getByTestId('modal-backdrop')).toHaveStyle({
-          opacity: 1,
-        });
+    expect(
+      screen.getByTestId('backdrop', { includeHiddenElements: true })
+    ).toHaveStyle({
+      opacity: scrimAlpha,
+    });
 
-        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-          opacity: 1,
-        });
+    expect(toJSON()).toMatchSnapshot();
 
-        expect(onDismiss).toHaveBeenCalledTimes(1);
-      });
+    await act(() => {
+      jest.runAllTimers();
     });
 
-    it('runs the closing animation if visible toggled', () => {
-      const { getByTestId, queryByTestId, rerender } = render(
-        <Modal testID="modal" visible onDismiss={() => {}}>
+    expect(screen.queryByTestId('modal')).not.toBeOnTheScreen();
+  });
+
+  it('invokes onDismiss when the visually hidden dismiss button is pressed', async () => {
+    const onDismiss = jest.fn();
+
+    await render(
+      <Portal.Host>
+        <Modal
+          visible
+          onDismiss={onDismiss}
+          dismissAccessibilityLabel="Dismiss dialog"
+        >
           {null}
         </Modal>
-      );
+      </Portal.Host>
+    );
+
+    await userEvent.press(
+      screen.getByRole('button', { name: 'Dismiss dialog' })
+    );
 
-      expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-        opacity: 1,
-      });
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
 
-      act(() => {
-        fireEvent.press(getByTestId('modal-backdrop'));
-      });
+  it('invokes onDismiss on the accessibility escape gesture', async () => {
+    const onDismiss = jest.fn();
 
-      rerender(
-        <Modal testID="modal" visible={false} onDismiss={() => {}}>
+    await render(
+      <Portal.Host>
+        <Modal
+          testID="modal"
+          overlayTestID="backdrop"
+          visible
+          onDismiss={onDismiss}
+        >
           {null}
         </Modal>
-      );
+      </Portal.Host>
+    );
 
-      expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-        opacity: 1,
-      });
+    await fireEvent(screen.getByTestId('modal'), 'accessibilityEscape');
 
-      expect(getByTestId('modal-backdrop')).toHaveStyle({
-        opacity: 1,
-      });
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
 
-      expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-        opacity: 1,
-      });
+  it('invokes onDismiss when the Android back button is pressed', async () => {
+    const onDismiss = jest.fn();
 
-      act(() => {
-        jest.runAllTimers();
-      });
+    const { toJSON } = await render(
+      <Portal.Host>
+        <Modal
+          testID="modal"
+          overlayTestID="backdrop"
+          visible
+          onDismiss={onDismiss}
+        >
+          {null}
+        </Modal>
+      </Portal.Host>
+    );
 
-      expect(queryByTestId('modal-surface-outer-layer')).not.toBeOnTheScreen();
+    expect(toJSON()).toMatchSnapshot();
 
-      expect(queryByTestId('modal-backdrop')).not.toBeOnTheScreen();
+    await act(() => {
+      BackHandler.mockPressBack();
     });
 
-    describe('if closed via Android back button', () => {
-      it('invokes onDismiss', async () => {
-        const onDismiss = jest.fn();
-        const { getByTestId } = render(
-          <Modal testID="modal" visible onDismiss={onDismiss}>
-            {null}
-          </Modal>
-        );
+    expect(toJSON()).toMatchSnapshot();
+
+    await act(() => {
+      jest.runAllTimers();
+    });
 
-        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-          opacity: 1,
-        });
+    expect(
+      screen.getByTestId('backdrop', { includeHiddenElements: true })
+    ).toHaveStyle({
+      opacity: scrimAlpha,
+    });
+
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
 
-        act(() => {
-          BackHandler.mockPressBack();
-        });
+  it('does not invoke onDismiss on Android back button press when dismissableBackButton is false', async () => {
+    const onDismiss = jest.fn();
 
-        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-          opacity: 1,
-        });
+    await render(
+      <Portal.Host>
+        <Modal
+          testID="modal"
+          overlayTestID="backdrop"
+          visible
+          onDismiss={onDismiss}
+          dismissableBackButton={false}
+        >
+          {null}
+        </Modal>
+      </Portal.Host>
+    );
 
-        act(() => {
-          jest.runAllTimers();
-        });
+    await act(() => {
+      BackHandler.mockPressBack();
+      jest.runAllTimers();
+    });
 
-        expect(getByTestId('modal-backdrop')).toHaveStyle({
-          opacity: 1,
-        });
+    expect(onDismiss).not.toHaveBeenCalled();
 
-        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-          opacity: 1,
-        });
+    await userEvent.press(screen.getByRole('button', { name: 'Close modal' }));
 
-        expect(onDismiss).toHaveBeenCalledTimes(1);
-      });
+    await act(() => {
+      jest.runAllTimers();
     });
+
+    expect(onDismiss).toHaveBeenCalledTimes(1);
   });
 
-  describe('when open as non-dismissible modal', () => {
-    describe('if closed via touching backdrop', () => {
-      it('will run the animation but not fade out', async () => {
-        const { getByTestId } = render(
-          <Modal
-            testID="modal"
-            visible
-            onDismiss={() => {}}
-            dismissable={false}
-          >
-            {null}
-          </Modal>
-        );
-
-        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-          opacity: 1,
-        });
-
-        act(() => {
-          fireEvent.press(getByTestId('modal-backdrop'));
-        });
-
-        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-          opacity: 1,
-        });
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        expect(getByTestId('modal-backdrop')).toHaveStyle({
-          opacity: 1,
-        });
-
-        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-          opacity: 1,
-        });
-      });
-
-      it('should not invoke onDismiss', () => {
-        const onDismiss = jest.fn();
-        const { getByTestId } = render(
-          <Modal
-            testID="modal"
-            visible
-            onDismiss={onDismiss}
-            dismissable={false}
-          >
-            {null}
-          </Modal>
-        );
-
-        expect(onDismiss).not.toHaveBeenCalled();
-
-        act(() => {
-          fireEvent.press(getByTestId('modal-backdrop'));
-        });
-
-        expect(onDismiss).not.toHaveBeenCalled();
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        expect(onDismiss).not.toHaveBeenCalled();
-      });
-    });
-
-    describe('if closed via Android back button', () => {
-      it('will run the animation but not fade out', async () => {
-        const { getByTestId } = render(
-          <Modal
-            testID="modal"
-            visible
-            onDismiss={() => {}}
-            dismissable={false}
-          >
-            {null}
-          </Modal>
-        );
-
-        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-          opacity: 1,
-        });
-
-        act(() => {
-          BackHandler.mockPressBack();
-        });
-
-        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-          opacity: 1,
-        });
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        expect(getByTestId('modal-backdrop')).toHaveStyle({
-          opacity: 1,
-        });
-
-        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-          opacity: 1,
-        });
-      });
-
-      it('should not invoke onDismiss', () => {
-        const onDismiss = jest.fn();
-
-        render(
-          <Modal
-            testID="modal"
-            visible
-            onDismiss={onDismiss}
-            dismissable={false}
-          >
-            {null}
-          </Modal>
-        );
-
-        expect(onDismiss).not.toHaveBeenCalled();
-
-        act(() => {
-          BackHandler.mockPressBack();
-        });
-
-        expect(onDismiss).not.toHaveBeenCalled();
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        expect(onDismiss).not.toHaveBeenCalled();
-      });
+  it('does not render the visually hidden dismiss button for a non-dismissible modal', async () => {
+    await render(
+      <Portal.Host>
+        <Modal visible dismissable={false} onDismiss={() => {}}>
+          {null}
+        </Modal>
+      </Portal.Host>
+    );
+
+    expect(
+      screen.queryByRole('button', { name: 'Close modal' })
+    ).not.toBeOnTheScreen();
+  });
+
+  it('keeps a non-dismissible modal visible when the backdrop is pressed', async () => {
+    const { toJSON } = await render(
+      <Portal.Host>
+        <Modal
+          testID="modal"
+          overlayTestID="backdrop"
+          visible
+          onDismiss={() => {}}
+          dismissable={false}
+        >
+          {null}
+        </Modal>
+      </Portal.Host>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+
+    await userEvent.press(
+      screen.getByTestId('backdrop', { includeHiddenElements: true })
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+
+    await act(() => {
+      jest.runAllTimers();
+    });
+
+    expect(
+      screen.getByTestId('backdrop', { includeHiddenElements: true })
+    ).toHaveStyle({
+      opacity: scrimAlpha,
     });
+
+    expect(toJSON()).toMatchSnapshot();
   });
 
-  describe('when visible prop changes', () => {
-    describe('from false to true (closed to open)', () => {
-      it('should run fade-in animation on opening', () => {
-        const { queryByTestId, getByTestId, rerender } = render(
-          <Modal testID="modal" visible={false}>
-            {null}
-          </Modal>
-        );
-
-        expect(queryByTestId('modal')).toBe(null);
-
-        rerender(
-          <Modal testID="modal" visible>
-            {null}
-          </Modal>
-        );
-
-        expect(getByTestId('modal-backdrop')).toHaveStyle({
-          opacity: 0,
-        });
-        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-          opacity: 0,
-        });
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        expect(getByTestId('modal-backdrop')).toHaveStyle({
-          opacity: 1,
-        });
-        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-          opacity: 1,
-        });
-      });
-    });
-
-    describe('from true to false (open to closed)', () => {
-      it('should run fade-out animation on closing', async () => {
-        const { queryByTestId, getByTestId, rerender } = render(
-          <Modal testID="modal" visible>
-            {null}
-          </Modal>
-        );
-
-        expect(getByTestId('modal-backdrop')).toHaveStyle({
-          opacity: 1,
-        });
-        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-          opacity: 1,
-        });
-
-        rerender(
-          <Modal testID="modal" visible={false}>
-            {null}
-          </Modal>
-        );
-
-        expect(getByTestId('modal-backdrop')).toHaveStyle({
-          opacity: 1,
-        });
-        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-          opacity: 1,
-        });
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        expect(queryByTestId('modal')).toBe(null);
-      });
-
-      it('should not invoke onDismiss', async () => {
-        const onDismiss = jest.fn();
-
-        const { rerender } = render(
-          <Modal testID="modal" visible onDismiss={onDismiss}>
-            {null}
-          </Modal>
-        );
-
-        expect(onDismiss).not.toHaveBeenCalled();
-
-        rerender(
-          <Modal testID="modal" visible={false} onDismiss={onDismiss}>
-            {null}
-          </Modal>
-        );
-
-        expect(onDismiss).not.toHaveBeenCalled();
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        expect(onDismiss).not.toHaveBeenCalled();
-      });
-
-      it('should close even if the dialog is not dismissible', async () => {
-        const { queryByTestId, getByTestId, rerender } = render(
-          <Modal testID="modal" visible dismissable={false}>
-            {null}
-          </Modal>
-        );
-
-        expect(getByTestId('modal-backdrop')).toHaveStyle({
-          opacity: 1,
-        });
-        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-          opacity: 1,
-        });
-
-        rerender(
-          <Modal testID="modal" visible={false} dismissable={false}>
-            {null}
-          </Modal>
-        );
-
-        expect(getByTestId('modal-backdrop')).toHaveStyle({
-          opacity: 1,
-        });
-        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-          opacity: 1,
-        });
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        expect(queryByTestId('modal')).toBe(null);
-      });
+  it('does not invoke onDismiss for a non-dismissible modal when the backdrop is pressed', async () => {
+    const onDismiss = jest.fn();
+
+    await render(
+      <Portal.Host>
+        <Modal
+          testID="modal"
+          overlayTestID="backdrop"
+          visible
+          onDismiss={onDismiss}
+          dismissable={false}
+        >
+          {null}
+        </Modal>
+      </Portal.Host>
+    );
+
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    await userEvent.press(
+      screen.getByTestId('backdrop', { includeHiddenElements: true })
+    );
+
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    await act(() => {
+      jest.runAllTimers();
     });
+
+    expect(onDismiss).not.toHaveBeenCalled();
   });
 
-  describe('when visible prop changes again during the open/close animation', () => {
-    describe('while closing, back to true (visible)', () => {
-      it('should keep the modal open', () => {
-        const { getByTestId, rerender } = render(
-          <Modal testID="modal" visible>
-            {null}
-          </Modal>
-        );
-
-        expect(getByTestId('modal-backdrop')).toHaveStyle({
-          opacity: 1,
-        });
-        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-          opacity: 1,
-        });
-
-        rerender(
-          <Modal testID="modal" visible={false}>
-            {null}
-          </Modal>
-        );
-
-        expect(getByTestId('modal-backdrop')).toHaveStyle({
-          opacity: 1,
-        });
-        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-          opacity: 1,
-        });
-
-        act(() => {
-          // Not a real seconds, this depends on how frequently
-          // requestAnimationFrame is called
-          jest.advanceTimersToNextTimer(1000);
-        });
-
-        rerender(
-          <Modal testID="modal" visible>
-            {null}
-          </Modal>
-        );
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        expect(getByTestId('modal-backdrop')).toHaveStyle({
-          opacity: 1,
-        });
-        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-          opacity: 1,
-        });
-      });
-    });
-
-    describe('while opening, back to false (hidden)', () => {
-      it('should keep the modal closed', () => {
-        const { queryByTestId, getByTestId, rerender } = render(
-          <Modal testID="modal" visible={false}>
-            {null}
-          </Modal>
-        );
-
-        expect(queryByTestId('modal-backdrop')).toBe(null);
-
-        rerender(
-          <Modal testID="modal" visible>
-            {null}
-          </Modal>
-        );
-
-        expect(getByTestId('modal-backdrop')).toHaveStyle({
-          opacity: 0,
-        });
-        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-          opacity: 0,
-        });
-
-        act(() => {
-          // Not a real seconds, this depends on how frequently
-          // requestAnimationFrame is called
-          jest.advanceTimersToNextTimer(1000);
-        });
-
-        expect(queryByTestId('modal-backdrop')).not.toBe(null);
-
-        rerender(
-          <Modal testID="modal" visible={false}>
-            {null}
-          </Modal>
-        );
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        expect(queryByTestId('modal-backdrop')).toBe(null);
-      });
+  it('keeps a non-dismissible modal on screen on the accessibility escape gesture', async () => {
+    const onDismiss = jest.fn();
+
+    await render(
+      <Portal.Host>
+        <Modal
+          testID="modal"
+          overlayTestID="backdrop"
+          visible
+          onDismiss={onDismiss}
+          dismissable={false}
+        >
+          {null}
+        </Modal>
+      </Portal.Host>
+    );
+
+    await fireEvent(screen.getByTestId('modal'), 'accessibilityEscape');
+
+    expect(onDismiss).not.toHaveBeenCalled();
+    expect(screen.getByTestId('modal')).toBeOnTheScreen();
+  });
+
+  it('keeps a non-dismissible modal visible when the Android back button is pressed', async () => {
+    const { toJSON } = await render(
+      <Portal.Host>
+        <Modal
+          testID="modal"
+          overlayTestID="backdrop"
+          visible
+          onDismiss={() => {}}
+          dismissable={false}
+        >
+          {null}
+        </Modal>
+      </Portal.Host>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+
+    await act(() => {
+      BackHandler.mockPressBack();
+    });
+
+    expect(toJSON()).toMatchSnapshot();
+
+    await act(() => {
+      jest.runAllTimers();
+    });
+
+    expect(
+      screen.getByTestId('backdrop', { includeHiddenElements: true })
+    ).toHaveStyle({
+      opacity: scrimAlpha,
+    });
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('does not invoke onDismiss for a non-dismissible modal when the Android back button is pressed', async () => {
+    const onDismiss = jest.fn();
+
+    await render(
+      <Portal.Host>
+        <Modal
+          testID="modal"
+          overlayTestID="backdrop"
+          visible
+          onDismiss={onDismiss}
+          dismissable={false}
+        >
+          {null}
+        </Modal>
+      </Portal.Host>
+    );
+
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    await act(() => {
+      BackHandler.mockPressBack();
+    });
+
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    await act(() => {
+      jest.runAllTimers();
+    });
+
+    expect(onDismiss).not.toHaveBeenCalled();
+  });
+
+  it('runs the fade-in animation when visible changes from false to true', async () => {
+    const { rerender, toJSON } = await render(
+      <Portal.Host>
+        <Modal testID="modal" overlayTestID="backdrop" visible={false}>
+          {null}
+        </Modal>
+      </Portal.Host>
+    );
+
+    expect(screen.queryByTestId('modal')).not.toBeOnTheScreen();
+
+    await rerender(
+      <Portal.Host>
+        <Modal testID="modal" overlayTestID="backdrop" visible>
+          {null}
+        </Modal>
+      </Portal.Host>
+    );
+
+    expect(
+      screen.getByTestId('backdrop', { includeHiddenElements: true })
+    ).toHaveStyle({
+      opacity: 0,
+    });
+    expect(toJSON()).toMatchSnapshot();
+
+    await act(() => {
+      jest.runAllTimers();
+    });
+
+    expect(
+      screen.getByTestId('backdrop', { includeHiddenElements: true })
+    ).toHaveStyle({
+      opacity: scrimAlpha,
+    });
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('runs the fade-out animation when visible changes from true to false', async () => {
+    const { rerender, toJSON } = await render(
+      <Portal.Host>
+        <Modal testID="modal" overlayTestID="backdrop" visible>
+          {null}
+        </Modal>
+      </Portal.Host>
+    );
+
+    expect(
+      screen.getByTestId('backdrop', { includeHiddenElements: true })
+    ).toHaveStyle({
+      opacity: scrimAlpha,
+    });
+    expect(toJSON()).toMatchSnapshot();
+
+    await rerender(
+      <Portal.Host>
+        <Modal testID="modal" overlayTestID="backdrop" visible={false}>
+          {null}
+        </Modal>
+      </Portal.Host>
+    );
+
+    expect(
+      screen.getByTestId('backdrop', { includeHiddenElements: true })
+    ).toHaveStyle({
+      opacity: scrimAlpha,
+    });
+    expect(toJSON()).toMatchSnapshot();
+
+    await act(() => {
+      jest.runAllTimers();
+    });
+
+    expect(screen.queryByTestId('modal')).not.toBeOnTheScreen();
+  });
+
+  it('does not invoke onDismiss when visible changes from true to false', async () => {
+    const onDismiss = jest.fn();
+
+    const { rerender } = await render(
+      <Portal.Host>
+        <Modal
+          testID="modal"
+          overlayTestID="backdrop"
+          visible
+          onDismiss={onDismiss}
+        >
+          {null}
+        </Modal>
+      </Portal.Host>
+    );
+
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    await rerender(
+      <Portal.Host>
+        <Modal
+          testID="modal"
+          overlayTestID="backdrop"
+          visible={false}
+          onDismiss={onDismiss}
+        >
+          {null}
+        </Modal>
+      </Portal.Host>
+    );
+
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    await act(() => {
+      jest.runAllTimers();
     });
+
+    expect(onDismiss).not.toHaveBeenCalled();
   });
 
-  it('animated value changes correctly', () => {
-    const value = new Animated.Value(1);
-    const { getByTestId } = render(
-      <Modal
-        visible={true}
-        testID="modal"
-        contentContainerStyle={[{ transform: [{ scale: value }] }]}
-      >
-        {null}
-      </Modal>
+  it('closes a non-dismissible modal when visible changes from true to false', async () => {
+    const { rerender, toJSON } = await render(
+      <Portal.Host>
+        <Modal
+          testID="modal"
+          overlayTestID="backdrop"
+          visible
+          dismissable={false}
+        >
+          {null}
+        </Modal>
+      </Portal.Host>
     );
-    expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-      transform: [{ scale: 1 }],
+
+    expect(
+      screen.getByTestId('backdrop', { includeHiddenElements: true })
+    ).toHaveStyle({
+      opacity: scrimAlpha,
     });
+    expect(toJSON()).toMatchSnapshot();
+
+    await rerender(
+      <Portal.Host>
+        <Modal
+          testID="modal"
+          overlayTestID="backdrop"
+          visible={false}
+          dismissable={false}
+        >
+          {null}
+        </Modal>
+      </Portal.Host>
+    );
 
-    Animated.timing(value, {
-      toValue: 1.5,
-      useNativeDriver: false,
-      duration: 200,
-    }).start();
+    expect(
+      screen.getByTestId('backdrop', { includeHiddenElements: true })
+    ).toHaveStyle({
+      opacity: scrimAlpha,
+    });
+    expect(toJSON()).toMatchSnapshot();
 
-    act(() => {
+    await act(() => {
       jest.runAllTimers();
     });
 
-    expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
-      transform: [{ scale: 1.5 }],
+    expect(screen.queryByTestId('modal')).not.toBeOnTheScreen();
+  });
+
+  it('keeps the modal open when visible changes back to true while closing', async () => {
+    const { rerender, toJSON } = await render(
+      <Portal.Host>
+        <Modal testID="modal" overlayTestID="backdrop" visible>
+          {null}
+        </Modal>
+      </Portal.Host>
+    );
+
+    expect(
+      screen.getByTestId('backdrop', { includeHiddenElements: true })
+    ).toHaveStyle({
+      opacity: scrimAlpha,
     });
+    expect(toJSON()).toMatchSnapshot();
+
+    await rerender(
+      <Portal.Host>
+        <Modal testID="modal" overlayTestID="backdrop" visible={false}>
+          {null}
+        </Modal>
+      </Portal.Host>
+    );
+
+    expect(
+      screen.getByTestId('backdrop', { includeHiddenElements: true })
+    ).toHaveStyle({
+      opacity: scrimAlpha,
+    });
+    expect(toJSON()).toMatchSnapshot();
+
+    await act(() => {
+      // Not a real seconds, this depends on how frequently
+      // requestAnimationFrame is called
+      jest.advanceTimersToNextTimer(1000);
+    });
+
+    await rerender(
+      <Portal.Host>
+        <Modal testID="modal" overlayTestID="backdrop" visible>
+          {null}
+        </Modal>
+      </Portal.Host>
+    );
+
+    await act(() => {
+      jest.runAllTimers();
+    });
+
+    expect(
+      screen.getByTestId('backdrop', { includeHiddenElements: true })
+    ).toHaveStyle({
+      opacity: scrimAlpha,
+    });
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('keeps the modal closed when visible changes back to false while opening', async () => {
+    const { rerender, toJSON } = await render(
+      <Portal.Host>
+        <Modal testID="modal" overlayTestID="backdrop" visible={false}>
+          {null}
+        </Modal>
+      </Portal.Host>
+    );
+
+    expect(screen.queryByTestId('modal')).not.toBeOnTheScreen();
+
+    await rerender(
+      <Portal.Host>
+        <Modal testID="modal" overlayTestID="backdrop" visible>
+          {null}
+        </Modal>
+      </Portal.Host>
+    );
+
+    expect(
+      screen.getByTestId('backdrop', { includeHiddenElements: true })
+    ).toHaveStyle({
+      opacity: 0,
+    });
+    expect(toJSON()).toMatchSnapshot();
+
+    await act(() => {
+      // Not a real seconds, this depends on how frequently
+      // requestAnimationFrame is called
+      jest.advanceTimersToNextTimer(1000);
+    });
+
+    expect(screen.getByTestId('modal')).toBeOnTheScreen();
+
+    await rerender(
+      <Portal.Host>
+        <Modal testID="modal" overlayTestID="backdrop" visible={false}>
+          {null}
+        </Modal>
+      </Portal.Host>
+    );
+
+    await act(() => {
+      jest.runAllTimers();
+    });
+
+    expect(screen.queryByTestId('modal')).not.toBeOnTheScreen();
   });
 });
diff --git a/src/components/__tests__/Portal.test.tsx b/src/components/__tests__/Portal.test.tsx
index ed87dce678..64ff1121bb 100644
--- a/src/components/__tests__/Portal.test.tsx
+++ b/src/components/__tests__/Portal.test.tsx
@@ -1,14 +1,22 @@
-import * as React from 'react';
 import { Text } from 'react-native';
 
-import { render, waitFor } from '@testing-library/react-native';
+import { expect, it, jest } from '@jest/globals';
 
+import { LocaleProvider, useLocale } from '../../core/locale';
+import { useInternalTheme } from '../../core/theming';
+import { render, screen } from '../../test-utils';
+import {
+  ReduceMotionContext,
+  useReduceMotion,
+} from '../../theme/accessibility/ReduceMotionContext';
+import Dialog from '../Dialog/Dialog';
+import Modal from '../Modal';
 import Portal from '../Portal/Portal';
 
 jest.useRealTimers();
 
 it('renders portal with siblings', async () => {
-  const { toJSON, getByTestId } = render(
+  const { toJSON } = await render(
     <Portal.Host>
       <Text>Outside content</Text>
       <Portal>
@@ -17,7 +25,210 @@ it('renders portal with siblings', async () => {
     </Portal.Host>
   );
 
-  await waitFor(() => getByTestId('content'));
+  await screen.findByTestId('content');
 
   expect(toJSON()).toMatchSnapshot();
 });
+
+it('portal content reflects theme, direction, and reduced motion changes', async () => {
+  const PortalContent = () => {
+    const theme = useInternalTheme(undefined);
+    const { direction } = useLocale();
+    const reduceMotion = useReduceMotion();
+
+    return (
+      <Text>{`${theme.animation.scale} ${direction} ${reduceMotion}`}</Text>
+    );
+  };
+
+  const { rerender } = await render(
+    <Portal.Host>
+      <ReduceMotionContext.Provider value={true}>
+        <LocaleProvider direction="rtl">
+          <Portal theme={{ animation: { scale: 2 } }}>
+            <PortalContent />
+          </Portal>
+        </LocaleProvider>
+      </ReduceMotionContext.Provider>
+    </Portal.Host>
+  );
+
+  expect(screen.getByText('2 rtl true')).toBeOnTheScreen();
+
+  await rerender(
+    <Portal.Host>
+      <ReduceMotionContext.Provider value={false}>
+        <LocaleProvider direction="ltr">
+          <Portal theme={{ animation: { scale: 3 } }}>
+            <PortalContent />
+          </Portal>
+        </LocaleProvider>
+      </ReduceMotionContext.Provider>
+    </Portal.Host>
+  );
+
+  expect(screen.getByText('3 ltr false')).toBeOnTheScreen();
+  expect(screen.queryByText('2 rtl true')).not.toBeOnTheScreen();
+});
+
+it('renders portals in source order when mounted together', async () => {
+  await render(
+    <Portal.Host>
+      <Portal>
+        <Text testID="portal-content">first</Text>
+      </Portal>
+      <Portal>
+        <Text testID="portal-content">second</Text>
+      </Portal>
+      <Portal>
+        <Text testID="portal-content">third</Text>
+      </Portal>
+    </Portal.Host>
+  );
+
+  const portals = await screen.findAllByTestId('portal-content');
+
+  expect(portals).toHaveLength(3);
+  expect(portals[0]).toHaveTextContent('first');
+  expect(portals[1]).toHaveTextContent('second');
+  expect(portals[2]).toHaveTextContent('third');
+});
+
+it('keeps dialog content accessible above a modal when both are visible', async () => {
+  await render(
+    <Portal.Host>
+      <Modal visible onDismiss={() => {}}>
+        <Text>modal content</Text>
+      </Modal>
+      <Dialog visible onDismiss={() => {}}>
+        <Text>dialog content</Text>
+      </Dialog>
+    </Portal.Host>
+  );
+
+  expect(screen.getByText('dialog content')).toBeVisible();
+  expect(
+    screen.getByText('modal content', { includeHiddenElements: true })
+  ).not.toBeVisible();
+});
+
+it('hides the app content from assistive technology while a modal is open', async () => {
+  await render(
+    <Portal.Host>
+      <Text>page content</Text>
+      <Portal modal>
+        <Text>modal content</Text>
+      </Portal>
+    </Portal.Host>
+  );
+
+  expect(screen.getByText('modal content')).toBeVisible();
+
+  const pageContent = screen.getByText('page content', {
+    includeHiddenElements: true,
+  });
+
+  // Still mounted and painted - only hidden from assistive technology.
+  expect(pageContent).toBeOnTheScreen();
+  expect(pageContent).not.toBeVisible();
+});
+
+it('leaves the app content reachable for a portal that is not a modal', async () => {
+  await render(
+    <Portal.Host>
+      <Text>page content</Text>
+      <Portal>
+        <Text>portal content</Text>
+      </Portal>
+    </Portal.Host>
+  );
+
+  expect(screen.getByText('portal content')).toBeVisible();
+  expect(screen.getByText('page content')).toBeVisible();
+});
+
+it('keeps portal content accessible above a modal', async () => {
+  await render(
+    <Portal.Host>
+      <Portal modal>
+        <Text>dialog content</Text>
+      </Portal>
+      <Portal>
+        <Text>menu content</Text>
+      </Portal>
+    </Portal.Host>
+  );
+
+  expect(screen.getByText('menu content')).toBeVisible();
+  expect(screen.getByText('dialog content')).toBeVisible();
+});
+
+it('hides lower modal content from assistive technology', async () => {
+  await render(
+    <Portal.Host>
+      <Portal modal>
+        <Text>lower dialog</Text>
+      </Portal>
+      <Portal modal>
+        <Text>upper dialog</Text>
+      </Portal>
+    </Portal.Host>
+  );
+
+  expect(screen.getByText('upper dialog')).toBeVisible();
+  expect(
+    screen.getByText('lower dialog', { includeHiddenElements: true })
+  ).not.toBeVisible();
+});
+
+it('restores access to app content when a portal stops being modal', async () => {
+  const { rerender } = await render(
+    <Portal.Host>
+      <Text>page content</Text>
+      <Portal modal>
+        <Text>modal content</Text>
+      </Portal>
+    </Portal.Host>
+  );
+
+  expect(screen.getByText('modal content')).toBeVisible();
+  expect(
+    screen.getByText('page content', { includeHiddenElements: true })
+  ).not.toBeVisible();
+
+  await rerender(
+    <Portal.Host>
+      <Text>page content</Text>
+      <Portal modal={false}>
+        <Text>modal content</Text>
+      </Portal>
+    </Portal.Host>
+  );
+
+  expect(screen.getByText('page content')).toBeVisible();
+});
+
+it('makes the app content reachable again once the modal unmounts', async () => {
+  const { rerender } = await render(
+    <Portal.Host>
+      <Text>page content</Text>
+      <Portal modal>
+        <Text>modal content</Text>
+      </Portal>
+    </Portal.Host>
+  );
+
+  expect(screen.getByText('modal content')).toBeVisible();
+  expect(
+    screen.getByText('page content', { includeHiddenElements: true })
+  ).not.toBeVisible();
+
+  await rerender(
+    <Portal.Host>
+      <Text>page content</Text>
+    </Portal.Host>
+  );
+
+  expect(screen.queryByText('modal content')).not.toBeOnTheScreen();
+  expect(screen.getByText('page content')).toBeVisible();
+});
diff --git a/src/components/__tests__/ProgressBar.test.tsx b/src/components/__tests__/ProgressBar.test.tsx
index 9aac20ac91..afd95f664b 100644
--- a/src/components/__tests__/ProgressBar.test.tsx
+++ b/src/components/__tests__/ProgressBar.test.tsx
@@ -1,9 +1,13 @@
 import * as React from 'react';
+// eslint-disable-next-line no-restricted-imports -- TODO: remove after ProgressBar migrates to Reanimated.
 import { Animated, Platform, StyleSheet } from 'react-native';
 
-import { act, render } from '@testing-library/react-native';
+import { afterEach, expect, it } from '@jest/globals';
+import { fireEvent } from '@testing-library/react-native';
 
-import ProgressBar, { Props } from '../ProgressBar';
+import { render, screen } from '../../test-utils';
+import ProgressBar from '../ProgressBar';
+import type { Props } from '../ProgressBar';
 
 const layoutEvent = {
   nativeEvent: {
@@ -20,12 +24,8 @@ const styles = StyleSheet.create({
 });
 
 const a11yRole = 'progressbar';
-const triggerLayout = async (
-  tree: ReturnType<typeof render>
-): Promise<void> => {
-  await act(async () => {
-    tree.getByRole(a11yRole).props.onLayout(layoutEvent);
-  });
+const triggerLayout = async (): Promise<void> => {
+  await fireEvent(screen.getByRole(a11yRole), 'layout', layoutEvent);
 };
 
 class ClassProgressBar extends React.Component<Props> {
@@ -41,59 +41,63 @@ afterEach(() => {
 });
 
 it('renders progress bar with animated value', async () => {
-  const tree = render(<AnimatedProgressBar animatedValue={0.2} />);
-  await triggerLayout(tree);
+  const view = await render(<AnimatedProgressBar animatedValue={0.2} />);
+  await triggerLayout();
 
-  tree.update(<AnimatedProgressBar animatedValue={0.4} />);
+  await view.rerender(<AnimatedProgressBar animatedValue={0.4} />);
 
-  expect(tree.container.props['animatedValue']).toBe(0.4);
+  expect(screen.getByRole(a11yRole)).toBeOnTheScreen();
 });
 
 it('renders progress bar with specific progress', async () => {
-  const tree = render(<ProgressBar progress={0.2} />);
-  await triggerLayout(tree);
+  const view = await render(<ProgressBar progress={0.2} />);
+  await triggerLayout();
 
-  expect(tree.toJSON()).toMatchSnapshot();
+  expect(view.toJSON()).toMatchSnapshot();
 });
 
 it('renders hidden progress bar', async () => {
-  const tree = render(<ProgressBar progress={0.2} visible={false} />);
-  await triggerLayout(tree);
+  const view = await render(<ProgressBar progress={0.2} visible={false} />);
+  await triggerLayout();
 
-  expect(tree.toJSON()).toMatchSnapshot();
+  expect(view.toJSON()).toMatchSnapshot();
 });
 
 it('renders colored progress bar', async () => {
-  const tree = render(<ProgressBar progress={0.2} color="red" />);
-  await triggerLayout(tree);
+  const view = await render(<ProgressBar progress={0.2} color="red" />);
+  await triggerLayout();
 
-  expect(tree.toJSON()).toMatchSnapshot();
+  expect(view.toJSON()).toMatchSnapshot();
 });
 
 it('renders indeterminate progress bar', async () => {
-  const tree = render(<ProgressBar indeterminate />);
-  await triggerLayout(tree);
+  const view = await render(<ProgressBar indeterminate />);
+  await triggerLayout();
 
-  expect(tree.toJSON()).toMatchSnapshot();
+  expect(view.toJSON()).toMatchSnapshot();
 });
 
-it('renders progress bar with full height on web', () => {
+it('renders progress bar with full height on web', async () => {
   Platform.OS = 'web';
-  const tree = render(<ProgressBar progress={0.2} />);
+  await render(<ProgressBar progress={0.2} />);
 
-  expect(tree.getByRole(a11yRole)).toHaveStyle({
+  expect(screen.getByRole(a11yRole)).toHaveStyle({
     width: '100%',
     height: '100%',
   });
 });
 
+it('has progressbar role', async () => {
+  await render(<ProgressBar progress={0.5} />);
+
+  expect(screen.getByRole(a11yRole)).toBeOnTheScreen();
+});
+
 it('renders progress bar with custom style of filled part', async () => {
-  const tree = render(
+  const view = await render(
     <ProgressBar progress={0.2} fillStyle={styles.fill} testID="progress-bar" />
   );
-  await triggerLayout(tree);
+  await triggerLayout();
 
-  expect(tree.getByTestId('progress-bar-fill')).toHaveStyle({
-    borderRadius: 4,
-  });
+  expect(view.toJSON()).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/RadioButton/RadioButton.test.tsx b/src/components/__tests__/RadioButton/RadioButton.test.tsx
index ecba6bf851..da8a04375d 100644
--- a/src/components/__tests__/RadioButton/RadioButton.test.tsx
+++ b/src/components/__tests__/RadioButton/RadioButton.test.tsx
@@ -1,26 +1,34 @@
-import React from 'react';
-
-import { render } from '@testing-library/react-native';
-
+import {
+  beforeAll,
+  describe,
+  expect,
+  it,
+  jest as mockJest,
+} from '@jest/globals';
+
+import { render } from '../../../test-utils';
 import RadioButton from '../../RadioButton';
 import { RadioButtonContext } from '../../RadioButton/RadioButtonGroup';
 
 describe('RadioButton', () => {
   describe('on default platform', () => {
     beforeAll(() => {
-      jest.mock('react-native', () => {
-        const RN = jest.requireActual('react-native');
-
-        RN.Platform = () => ({
-          select: (objs: { default: object }) => objs.default,
-        });
-
-        return RN;
+      mockJest.mock('react-native', () => {
+        const RN =
+          mockJest.requireActual<typeof import('react-native')>('react-native');
+
+        return {
+          ...RN,
+          Platform: {
+            ...RN.Platform,
+            select: (objs: { default: object }) => objs.default,
+          },
+        };
       });
     });
 
-    it('renders properly', () => {
-      const tree = render(<RadioButton value="first" />).toJSON();
+    it('renders properly', async () => {
+      const tree = (await render(<RadioButton value="first" />)).toJSON();
 
       expect(tree).toMatchSnapshot();
     });
@@ -28,32 +36,37 @@ describe('RadioButton', () => {
 
   describe('on ios platform', () => {
     beforeAll(() => {
-      jest.mock('react-native', () => {
-        const RN = jest.requireActual('react-native');
-
-        RN.Platform = () => ({
-          select: (objs: { ios: object }) => objs.ios,
-        });
-
-        return RN;
+      mockJest.mock('react-native', () => {
+        const RN =
+          mockJest.requireActual<typeof import('react-native')>('react-native');
+
+        return {
+          ...RN,
+          Platform: {
+            ...RN.Platform,
+            select: (objs: { ios: object }) => objs.ios,
+          },
+        };
       });
     });
 
-    it('renders properly', () => {
-      const tree = render(<RadioButton value="first" />).toJSON();
+    it('renders properly', async () => {
+      const tree = (await render(<RadioButton value="first" />)).toJSON();
 
       expect(tree).toMatchSnapshot();
     });
   });
 
   describe('when RadioButton is wrapped by RadioButtonContext.Provider', () => {
-    it('renders properly', () => {
-      const tree = render(
-        <RadioButtonContext.Provider
-          value={{ value: 'first', onValueChange: () => {} }}
-        >
-          <RadioButton value="first" />
-        </RadioButtonContext.Provider>
+    it('renders properly', async () => {
+      const tree = (
+        await render(
+          <RadioButtonContext.Provider
+            value={{ value: 'first', onValueChange: () => {} }}
+          >
+            <RadioButton value="first" />
+          </RadioButtonContext.Provider>
+        )
       ).toJSON();
 
       expect(tree).toMatchSnapshot();
@@ -61,9 +74,9 @@ describe('RadioButton', () => {
   });
 
   describe('RadioButton with custom testID', () => {
-    it('renders properly', () => {
-      const tree = render(
-        <RadioButton value="first" testID={'custom:testID'} />
+    it('renders properly', async () => {
+      const tree = (
+        await render(<RadioButton value="first" testID={'custom:testID'} />)
       ).toJSON();
 
       expect(tree).toMatchSnapshot();
diff --git a/src/components/__tests__/RadioButton/RadioButtonGroup.test.tsx b/src/components/__tests__/RadioButton/RadioButtonGroup.test.tsx
index 2b431102cb..15bf4aa442 100644
--- a/src/components/__tests__/RadioButton/RadioButtonGroup.test.tsx
+++ b/src/components/__tests__/RadioButton/RadioButtonGroup.test.tsx
@@ -1,15 +1,16 @@
-import React from 'react';
-
-import { render } from '@testing-library/react-native';
+import { describe, expect, it } from '@jest/globals';
 
+import { render } from '../../../test-utils';
 import RadioButton from '../../RadioButton';
 
 describe('RadioButtonGroup', () => {
-  it('renders properly', () => {
-    const tree = render(
-      <RadioButton.Group value="first" onValueChange={() => {}}>
-        <RadioButton value="first" />
-      </RadioButton.Group>
+  it('renders properly', async () => {
+    const tree = (
+      await render(
+        <RadioButton.Group value="first" onValueChange={() => {}}>
+          <RadioButton value="first" />
+        </RadioButton.Group>
+      )
     ).toJSON();
 
     expect(tree).toMatchSnapshot();
diff --git a/src/components/__tests__/RadioButton/RadioButtonItem.test.tsx b/src/components/__tests__/RadioButton/RadioButtonItem.test.tsx
index 84e7b52971..821d9ebc5b 100644
--- a/src/components/__tests__/RadioButton/RadioButtonItem.test.tsx
+++ b/src/components/__tests__/RadioButton/RadioButtonItem.test.tsx
@@ -1,68 +1,77 @@
-import * as React from 'react';
 import { Platform } from 'react-native';
 
-import { act, fireEvent, render } from '@testing-library/react-native';
+import { expect, it, jest } from '@jest/globals';
+import { userEvent } from '@testing-library/react-native';
 
+import { render, screen } from '../../../test-utils';
 import RadioButton from '../../RadioButton';
 
-it('renders unchecked', () => {
-  const tree = render(
-    <RadioButton.Item
-      status="unchecked"
-      label="Unchecked Button"
-      value="unchecked"
-    />
+it('renders unchecked', async () => {
+  const tree = (
+    await render(
+      <RadioButton.Item
+        status="unchecked"
+        label="Unchecked Button"
+        value="unchecked"
+      />
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('can render the iOS radio button on different platforms', () => {
+it('can render the iOS radio button on different platforms', async () => {
   Platform.OS = 'android';
-  const tree = render(
-    <RadioButton.Item
-      status="unchecked"
-      label="iOS Radio button"
-      mode="ios"
-      value="ios"
-    />
+  const tree = (
+    await render(
+      <RadioButton.Item
+        status="unchecked"
+        label="iOS Radio button"
+        mode="ios"
+        value="ios"
+      />
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('can render the Android radio button on different platforms', () => {
+it('can render the Android radio button on different platforms', async () => {
   Platform.OS = 'ios';
-  const tree = render(
-    <RadioButton.Item
-      status="unchecked"
-      label="iOS Checkbox"
-      mode="android"
-      value="android"
-    />
+  const tree = (
+    await render(
+      <RadioButton.Item
+        status="unchecked"
+        label="iOS Checkbox"
+        mode="android"
+        value="android"
+      />
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('can render leading radio button control', () => {
+it('can render leading radio button control', async () => {
   Platform.OS = 'ios';
-  const tree = render(
-    <RadioButton.Item
-      label="Default with leading control"
-      status={'unchecked'}
-      value="iOS"
-      position="leading"
-    />
+  const tree = (
+    await render(
+      <RadioButton.Item
+        label="Default with leading control"
+        status={'unchecked'}
+        value="iOS"
+        position="leading"
+      />
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('should execute onLongPress', () => {
+it('should execute onLongPress', async () => {
   const onLongPress = jest.fn();
 
-  const { getByTestId } = render(
+  await render(
     <RadioButton.Item
       label="Item"
       value="android"
@@ -71,9 +80,7 @@ it('should execute onLongPress', () => {
     />
   );
 
-  act(() => {
-    fireEvent(getByTestId('radio-button-item'), 'longPress', { key: 'value' });
-  });
+  await userEvent.longPress(screen.getByTestId('radio-button-item'));
 
   expect(onLongPress).toHaveBeenCalledTimes(1);
 });
diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap
index 5560a80f36..c20910f20e 100644
--- a/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap
+++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`RadioButton RadioButton with custom testID renders properly 1`] = `
 <View
   accessibilityLiveRegion="polite"
-  accessibilityRole="radio"
   accessibilityState={
     {
       "busy": undefined,
@@ -33,6 +32,7 @@ exports[`RadioButton RadioButton with custom testID renders properly 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="radio"
   style={
     [
       {
@@ -90,7 +90,6 @@ exports[`RadioButton RadioButton with custom testID renders properly 1`] = `
 exports[`RadioButton on default platform renders properly 1`] = `
 <View
   accessibilityLiveRegion="polite"
-  accessibilityRole="radio"
   accessibilityState={
     {
       "busy": undefined,
@@ -120,6 +119,7 @@ exports[`RadioButton on default platform renders properly 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="radio"
   style={
     [
       {
@@ -176,7 +176,6 @@ exports[`RadioButton on default platform renders properly 1`] = `
 exports[`RadioButton on ios platform renders properly 1`] = `
 <View
   accessibilityLiveRegion="polite"
-  accessibilityRole="radio"
   accessibilityState={
     {
       "busy": undefined,
@@ -206,6 +205,7 @@ exports[`RadioButton on ios platform renders properly 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="radio"
   style={
     [
       {
@@ -262,7 +262,6 @@ exports[`RadioButton on ios platform renders properly 1`] = `
 exports[`RadioButton when RadioButton is wrapped by RadioButtonContext.Provider renders properly 1`] = `
 <View
   accessibilityLiveRegion="polite"
-  accessibilityRole="radio"
   accessibilityState={
     {
       "busy": undefined,
@@ -292,6 +291,7 @@ exports[`RadioButton when RadioButton is wrapped by RadioButtonContext.Provider
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="radio"
   style={
     [
       {
diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
index 5c3513d769..1ae7f560be 100644
--- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
+++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
@@ -2,11 +2,10 @@
 
 exports[`RadioButtonGroup renders properly 1`] = `
 <View
-  accessibilityRole="radiogroup"
+  role="radiogroup"
 >
   <View
     accessibilityLiveRegion="polite"
-    accessibilityRole="radio"
     accessibilityState={
       {
         "busy": undefined,
@@ -36,6 +35,7 @@ exports[`RadioButtonGroup renders properly 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    role="radio"
     style={
       [
         {
diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap
index dfbe5fa131..5867b1408c 100644
--- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap
+++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`can render leading radio button control 1`] = `
 <View
   accessibilityLabel="Default with leading control"
-  accessibilityRole="radio"
   accessibilityState={
     {
       "busy": undefined,
@@ -33,6 +32,7 @@ exports[`can render leading radio button control 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="radio"
   style={
     [
       false,
@@ -57,7 +57,6 @@ exports[`can render leading radio button control 1`] = `
   >
     <View
       accessibilityLiveRegion="polite"
-      accessibilityRole="radio"
       accessibilityState={
         {
           "busy": undefined,
@@ -87,6 +86,7 @@ exports[`can render leading radio button control 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="radio"
       style={
         [
           {
@@ -145,7 +145,7 @@ exports[`can render leading radio button control 1`] = `
             "textAlign": "left",
           },
           {
-            "color": "rgba(28, 27, 31, 1)",
+            "color": "rgba(29, 27, 32, 1)",
             "writingDirection": "ltr",
           },
           [
@@ -153,7 +153,7 @@ exports[`can render leading radio button control 1`] = `
               "fontFamily": "System",
               "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0.15,
+              "letterSpacing": 0.5,
               "lineHeight": 24,
             },
             [
@@ -161,9 +161,9 @@ exports[`can render leading radio button control 1`] = `
                 "flexGrow": 1,
                 "flexShrink": 1,
               },
-              false,
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
+                "opacity": 1,
                 "textAlign": "right",
               },
               undefined,
@@ -181,7 +181,6 @@ exports[`can render leading radio button control 1`] = `
 exports[`can render the Android radio button on different platforms 1`] = `
 <View
   accessibilityLabel="iOS Checkbox"
-  accessibilityRole="radio"
   accessibilityState={
     {
       "busy": undefined,
@@ -211,6 +210,7 @@ exports[`can render the Android radio button on different platforms 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="radio"
   style={
     [
       false,
@@ -240,7 +240,7 @@ exports[`can render the Android radio button on different platforms 1`] = `
             "textAlign": "left",
           },
           {
-            "color": "rgba(28, 27, 31, 1)",
+            "color": "rgba(29, 27, 32, 1)",
             "writingDirection": "ltr",
           },
           [
@@ -248,7 +248,7 @@ exports[`can render the Android radio button on different platforms 1`] = `
               "fontFamily": "System",
               "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0.15,
+              "letterSpacing": 0.5,
               "lineHeight": 24,
             },
             [
@@ -256,9 +256,9 @@ exports[`can render the Android radio button on different platforms 1`] = `
                 "flexGrow": 1,
                 "flexShrink": 1,
               },
-              false,
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
+                "opacity": 1,
                 "textAlign": "left",
               },
               undefined,
@@ -271,7 +271,6 @@ exports[`can render the Android radio button on different platforms 1`] = `
     </Text>
     <View
       accessibilityLiveRegion="polite"
-      accessibilityRole="radio"
       accessibilityState={
         {
           "busy": undefined,
@@ -301,6 +300,7 @@ exports[`can render the Android radio button on different platforms 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="radio"
       style={
         [
           {
@@ -333,7 +333,6 @@ exports[`can render the Android radio button on different platforms 1`] = `
 exports[`can render the iOS radio button on different platforms 1`] = `
 <View
   accessibilityLabel="iOS Radio button"
-  accessibilityRole="radio"
   accessibilityState={
     {
       "busy": undefined,
@@ -363,6 +362,7 @@ exports[`can render the iOS radio button on different platforms 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="radio"
   style={
     [
       false,
@@ -392,7 +392,7 @@ exports[`can render the iOS radio button on different platforms 1`] = `
             "textAlign": "left",
           },
           {
-            "color": "rgba(28, 27, 31, 1)",
+            "color": "rgba(29, 27, 32, 1)",
             "writingDirection": "ltr",
           },
           [
@@ -400,7 +400,7 @@ exports[`can render the iOS radio button on different platforms 1`] = `
               "fontFamily": "System",
               "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0.15,
+              "letterSpacing": 0.5,
               "lineHeight": 24,
             },
             [
@@ -408,9 +408,9 @@ exports[`can render the iOS radio button on different platforms 1`] = `
                 "flexGrow": 1,
                 "flexShrink": 1,
               },
-              false,
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
+                "opacity": 1,
                 "textAlign": "left",
               },
               undefined,
@@ -423,7 +423,6 @@ exports[`can render the iOS radio button on different platforms 1`] = `
     </Text>
     <View
       accessibilityLiveRegion="polite"
-      accessibilityRole="radio"
       accessibilityState={
         {
           "busy": undefined,
@@ -453,6 +452,7 @@ exports[`can render the iOS radio button on different platforms 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="radio"
       style={
         [
           {
@@ -511,7 +511,6 @@ exports[`can render the iOS radio button on different platforms 1`] = `
 exports[`renders unchecked 1`] = `
 <View
   accessibilityLabel="Unchecked Button"
-  accessibilityRole="radio"
   accessibilityState={
     {
       "busy": undefined,
@@ -541,6 +540,7 @@ exports[`renders unchecked 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="radio"
   style={
     [
       false,
@@ -570,7 +570,7 @@ exports[`renders unchecked 1`] = `
             "textAlign": "left",
           },
           {
-            "color": "rgba(28, 27, 31, 1)",
+            "color": "rgba(29, 27, 32, 1)",
             "writingDirection": "ltr",
           },
           [
@@ -578,7 +578,7 @@ exports[`renders unchecked 1`] = `
               "fontFamily": "System",
               "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0.15,
+              "letterSpacing": 0.5,
               "lineHeight": 24,
             },
             [
@@ -586,9 +586,9 @@ exports[`renders unchecked 1`] = `
                 "flexGrow": 1,
                 "flexShrink": 1,
               },
-              false,
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
+                "opacity": 1,
                 "textAlign": "left",
               },
               undefined,
@@ -601,7 +601,6 @@ exports[`renders unchecked 1`] = `
     </Text>
     <View
       accessibilityLiveRegion="polite"
-      accessibilityRole="radio"
       accessibilityState={
         {
           "busy": undefined,
@@ -631,6 +630,7 @@ exports[`renders unchecked 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="radio"
       style={
         [
           {
diff --git a/src/components/__tests__/RadioButton/utils.test.tsx b/src/components/__tests__/RadioButton/utils.test.tsx
new file mode 100644
index 0000000000..be3cbc97d8
--- /dev/null
+++ b/src/components/__tests__/RadioButton/utils.test.tsx
@@ -0,0 +1,89 @@
+import { describe, expect, it } from '@jest/globals';
+
+import { DarkTheme, LightTheme } from '../../../theme/schemes';
+import { tokens } from '../../../theme/tokens';
+import { getSelectionControlIOSColor } from '../../RadioButton/utils';
+
+const stateOpacity = tokens.md.sys.state.opacity;
+
+describe('getSelectionControlIOSColor - checked color', () => {
+  it('should return correct disabled color, for theme version 3', () => {
+    expect(
+      getSelectionControlIOSColor({
+        theme: LightTheme,
+        disabled: true,
+      })
+    ).toMatchObject({
+      checkedColor: LightTheme.colors.primary,
+      checkedColorOpacity: stateOpacity.disabled,
+    });
+  });
+
+  it('should return custom color, checked', () => {
+    expect(
+      getSelectionControlIOSColor({
+        theme: LightTheme,
+        customColor: 'purple',
+      })
+    ).toMatchObject({
+      checkedColor: 'purple',
+    });
+  });
+
+  it('should return theme color, for theme version 3, checked', () => {
+    expect(
+      getSelectionControlIOSColor({
+        theme: LightTheme,
+      })
+    ).toMatchObject({
+      checkedColor: LightTheme.colors.primary,
+    });
+  });
+
+  it('should return error color when error is true', () => {
+    expect(
+      getSelectionControlIOSColor({
+        theme: LightTheme,
+        error: true,
+      })
+    ).toMatchObject({
+      checkedColor: LightTheme.colors.error,
+    });
+  });
+
+  it('should return error color, dark mode, when error is true', () => {
+    expect(
+      getSelectionControlIOSColor({
+        theme: DarkTheme,
+        error: true,
+      })
+    ).toMatchObject({
+      checkedColor: DarkTheme.colors.error,
+    });
+  });
+
+  it('should return disabled color when both disabled and error are true (disabled wins)', () => {
+    expect(
+      getSelectionControlIOSColor({
+        theme: LightTheme,
+        disabled: true,
+        error: true,
+      })
+    ).toMatchObject({
+      checkedColor: LightTheme.colors.primary,
+      checkedColorOpacity: stateOpacity.disabled,
+    });
+  });
+
+  it('should return custom color when both customColor and error are true (customColor wins)', () => {
+    expect(
+      getSelectionControlIOSColor({
+        theme: LightTheme,
+        customColor: 'purple',
+        error: true,
+      })
+    ).toMatchObject({
+      checkedColor: 'purple',
+    });
+  });
+});
diff --git a/src/components/__tests__/Searchbar.test.tsx b/src/components/__tests__/Searchbar.test.tsx
index 59ade128e4..ac39f78662 100644
--- a/src/components/__tests__/Searchbar.test.tsx
+++ b/src/components/__tests__/Searchbar.test.tsx
@@ -1,134 +1,85 @@
-import * as React from 'react';
-import { Animated } from 'react-native';
-
-import { act, fireEvent, render } from '@testing-library/react-native';
+import { expect, it, jest } from '@jest/globals';
+import { userEvent } from '@testing-library/react-native';
 
+import { render, screen } from '../../test-utils';
 import * as Avatar from '../Avatar/Avatar';
 import Searchbar from '../Searchbar';
 
-it('renders with placeholder', () => {
-  const tree = render(<Searchbar placeholder="Search" value="" />).toJSON();
+it('renders with placeholder', async () => {
+  const tree = (
+    await render(<Searchbar placeholder="Search" value="" />)
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders with text', () => {
-  const tree = render(
-    <Searchbar placeholder="Search" value="query" />
+it('renders with text', async () => {
+  const tree = (
+    await render(<Searchbar placeholder="Search" value="query" />)
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('activity indicator snapshot test', () => {
-  const tree = render(<Searchbar loading={true} value="" />).toJSON();
+it('activity indicator snapshot test', async () => {
+  const tree = (await render(<Searchbar loading={true} value="" />)).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders with ActivityIndicator', () => {
-  const tree = render(<Searchbar loading={true} value="" />);
-
-  expect(tree.getByTestId('activity-indicator')).toBeTruthy();
-});
-
-it('renders without ActivityIndicator', () => {
-  const { getByTestId } = render(<Searchbar loading={false} value="" />);
+it('renders with ActivityIndicator', async () => {
+  await render(<Searchbar loading={true} value="" />);
 
-  expect(() => getByTestId('activity-indicator')).toThrow();
+  expect(screen.getByRole('progressbar')).toBeOnTheScreen();
 });
 
-it('render icon with custom ripple color', () => {
-  const { getByTestId } = render(
-    <Searchbar testID="search-bar" value={''} rippleColor="purple" />
-  );
+it('renders without ActivityIndicator', async () => {
+  await render(<Searchbar loading={false} value="" />);
 
-  const iconContainer = getByTestId('search-bar-icon-container').props.children;
-  expect(iconContainer.props.rippleColor).toBe('purple');
+  expect(screen.queryByRole('progressbar')).not.toBeOnTheScreen();
 });
 
-it('renders clear icon with custom color', () => {
-  const { getByTestId } = render(
+it('renders clear icon with custom color', async () => {
+  await render(
     <Searchbar testID="search-bar" value="value" iconColor="purple" />
   );
 
-  const iconComponent = getByTestId('search-bar-icon-wrapper').props.children;
-
-  expect(iconComponent.props.iconColor).toBe('purple');
-});
-
-it('renders clear icon wrapper, which can be the target of touch events, if search has value', () => {
-  const { getByTestId } = render(
-    <Searchbar testID="search-bar" value="value" />
-  );
-
-  expect(getByTestId('search-bar-icon-wrapper').props.pointerEvents).toBe(
-    'auto'
-  );
-});
-
-it('renders clear icon wrapper, which is never target of touch events, if search has no value', () => {
-  const { getByTestId } = render(<Searchbar testID="search-bar" value="" />);
-
-  expect(getByTestId('search-bar-icon-wrapper').props.pointerEvents).toBe(
-    'none'
-  );
+  expect(
+    screen.getByText('close', { includeHiddenElements: true })
+  ).toHaveStyle({ color: 'purple' });
 });
 
-it('animated value changes correctly', () => {
-  const value = new Animated.Value(1);
-  const { getByTestId } = render(
+it('does not respond to touch on the clear icon when search has no value', async () => {
+  const onClearIconPressMock = jest.fn();
+  await render(
     <Searchbar
       testID="search-bar"
       value=""
-      style={[{ transform: [{ scale: value }] }]}
+      onClearIconPress={onClearIconPressMock}
     />
   );
-  expect(getByTestId('search-bar-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1 }],
-  });
-
-  Animated.timing(value, {
-    toValue: 1.5,
-    useNativeDriver: false,
-    duration: 200,
-  }).start();
-
-  act(() => {
-    jest.advanceTimersByTime(200);
-  });
-  expect(getByTestId('search-bar-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1.5 }],
-  });
+
+  await userEvent.press(
+    screen.getByLabelText('clear', { includeHiddenElements: true })
+  );
+  expect(onClearIconPressMock).not.toHaveBeenCalled();
 });
 
-it('defines onClearIconPress action and checks if it is called when close button is pressed', () => {
+it('defines onClearIconPress action and checks if it is called when close button is pressed', async () => {
   const onClearIconPressMock = jest.fn();
-  const { getByTestId } = render(
+  await render(
     <Searchbar
       testID="search-bar"
       value="value"
       onClearIconPress={onClearIconPressMock}
     />
   );
-  const iconComponent = getByTestId('search-bar-icon-wrapper').props.children;
-
-  fireEvent(iconComponent, 'onPress');
+  await userEvent.press(screen.getByLabelText('clear'));
   expect(onClearIconPressMock).toHaveBeenCalledTimes(1);
 });
 
-it('renders clear icon wrapper, with appropriate style for v3', () => {
-  const { getByTestId, update } = render(
-    <Searchbar testID="search-bar" value="" />
-  );
-
-  expect(getByTestId('search-bar-icon-wrapper')).toHaveStyle({
-    position: 'absolute',
-    right: 0,
-    marginLeft: 16,
-  });
-
-  update(
+it('hides the clear icon when a custom right element is rendered', async () => {
+  await render(
     <Searchbar
       testID="search-bar"
       value=""
@@ -136,97 +87,70 @@ it('renders clear icon wrapper, with appropriate style for v3', () => {
     />
   );
 
-  expect(getByTestId('search-bar-icon-wrapper')).toHaveStyle({
-    display: 'none',
-  });
-});
-
-it('render clear icon with custom ripple color', () => {
-  const { getByTestId } = render(
-    <Searchbar testID="search-bar" value={''} rippleColor="purple" />
-  );
-
-  const clearIconContainer = getByTestId('search-bar-clear-icon-container')
-    .props.children;
-  expect(clearIconContainer.props.rippleColor).toBe('purple');
+  expect(screen.queryByLabelText('clear')).not.toBeOnTheScreen();
 });
 
-it('renders trailering icon when mode is set to "bar"', () => {
-  const { getByTestId } = render(
+it('renders trailing icon when mode is set to "bar"', async () => {
+  await render(
     <Searchbar
       testID="search-bar"
       value={''}
-      traileringIcon={'microphone'}
+      trailingIcon={'microphone'}
+      trailingIconAccessibilityLabel="microphone"
       mode="bar"
     />
   );
 
-  expect(getByTestId('search-bar-trailering-icon')).toBeTruthy();
+  expect(screen.getByLabelText('microphone')).toBeOnTheScreen();
 });
 
-it('renders trailering icon with press functionality', () => {
-  const onTraileringIconPressMock = jest.fn();
+it('renders trailing icon with press functionality', async () => {
+  const onTrailingIconPressMock = jest.fn();
 
-  const { getByTestId } = render(
+  await render(
     <Searchbar
       testID="search-bar"
       value={''}
-      traileringIcon={'microphone'}
-      onTraileringIconPress={onTraileringIconPressMock}
+      trailingIcon={'microphone'}
+      trailingIconAccessibilityLabel="microphone"
+      onTrailingIconPress={onTrailingIconPressMock}
       mode="bar"
     />
   );
 
-  fireEvent(getByTestId('search-bar-trailering-icon'), 'onPress');
-  expect(onTraileringIconPressMock).toHaveBeenCalledTimes(1);
+  await userEvent.press(screen.getByLabelText('microphone'));
+  expect(onTrailingIconPressMock).toHaveBeenCalledTimes(1);
 });
 
-it('renders trailering icon with custom ripple colors', () => {
-  const { getByTestId } = render(
+it('renders clear icon instead of trailing icon', async () => {
+  const { rerender } = await render(
     <Searchbar
       testID="search-bar"
       value={''}
-      traileringRippleColor={'purple'}
-      traileringIcon={'microphone'}
+      trailingIcon={'microphone'}
+      trailingIconAccessibilityLabel="microphone"
       mode="bar"
     />
   );
 
-  const traileringIconContainer = getByTestId(
-    'search-bar-trailering-icon-container'
-  ).props.children;
-  expect(traileringIconContainer.props.rippleColor).toBe('purple');
-});
+  expect(screen.getByLabelText('microphone')).toBeOnTheScreen();
 
-it('renders clear icon instead of trailering icon', () => {
-  const { getByTestId, update, queryByTestId } = render(
-    <Searchbar
-      testID="search-bar"
-      value={''}
-      traileringIcon={'microphone'}
-      mode="bar"
-    />
-  );
-
-  expect(getByTestId('search-bar-trailering-icon')).toBeTruthy();
-
-  update(
+  await rerender(
     <Searchbar
       testID="search-bar"
       value={'test'}
-      traileringIcon={'microphone'}
+      trailingIcon={'microphone'}
+      trailingIconAccessibilityLabel="microphone"
       mode="bar"
     />
   );
 
-  expect(queryByTestId('search-bar-trailering-icon')).toBeNull();
-  expect(getByTestId('search-bar-icon-wrapper')).toBeTruthy();
+  expect(screen.queryByLabelText('microphone')).not.toBeOnTheScreen();
+  expect(screen.getByLabelText('clear')).toBeOnTheScreen();
 });
 
-it('renders searchbar in "view" mode', () => {
-  const { getByTestId } = render(
-    <Searchbar testID="search-bar" value={''} mode="view" />
-  );
+it('renders searchbar in "view" mode', async () => {
+  const tree = (await render(<Searchbar value={''} mode="view" />)).toJSON();
 
-  expect(getByTestId('search-bar-container')).toHaveStyle({ borderRadius: 0 });
+  expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/SegmentedButton.test.tsx b/src/components/__tests__/SegmentedButton.test.tsx
index d36babb5bb..807d5eb502 100644
--- a/src/components/__tests__/SegmentedButton.test.tsx
+++ b/src/components/__tests__/SegmentedButton.test.tsx
@@ -1,35 +1,39 @@
-import * as React from 'react';
+import { describe, expect, it, jest } from '@jest/globals';
 
-import { render } from '@testing-library/react-native';
-import color from 'color';
-
-import { getTheme } from '../../core/theming';
-import { black } from '../../styles/themes/v2/colors';
+import { render, screen } from '../../test-utils';
+import { LightTheme } from '../../theme/schemes';
+import { tokens } from '../../theme/tokens';
 import SegmentedButtons from '../SegmentedButtons/SegmentedButtons';
 import {
   getDisabledSegmentedButtonStyle,
   getSegmentedButtonColors,
 } from '../SegmentedButtons/utils';
 
-it('renders segmented button', () => {
-  const tree = render(
-    <SegmentedButtons
-      onValueChange={() => {}}
-      value={'walk'}
-      buttons={[{ value: 'walk' }, { value: 'ride' }]}
-    />
+const stateOpacity = tokens.md.sys.state.opacity;
+
+it('renders segmented button', async () => {
+  const tree = (
+    await render(
+      <SegmentedButtons
+        onValueChange={() => {}}
+        value={'walk'}
+        buttons={[{ value: 'walk' }, { value: 'ride' }]}
+      />
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders disabled segmented button', async () => {
-  const tree = render(
-    <SegmentedButtons
-      onValueChange={() => {}}
-      value={'walk'}
-      buttons={[{ value: 'walk' }, { value: 'ride', disabled: true }]}
-    />
+  const tree = (
+    await render(
+      <SegmentedButtons
+        onValueChange={() => {}}
+        value={'walk'}
+        buttons={[{ value: 'walk' }, { value: 'ride', disabled: true }]}
+      />
+    )
   ).toJSON();
 
   process.nextTick(() => {
@@ -38,15 +42,17 @@ it('renders disabled segmented button', async () => {
 });
 
 it('renders checked segmented button with selected check', async () => {
-  const tree = render(
-    <SegmentedButtons
-      onValueChange={() => {}}
-      value={'walk'}
-      buttons={[
-        { value: 'walk', showSelectedCheck: true },
-        { value: 'ride', disabled: true },
-      ]}
-    />
+  const tree = (
+    await render(
+      <SegmentedButtons
+        onValueChange={() => {}}
+        value={'walk'}
+        buttons={[
+          { value: 'walk', showSelectedCheck: true },
+          { value: 'ride', disabled: true },
+        ]}
+      />
+    )
   ).toJSON();
 
   process.nextTick(() => {
@@ -55,29 +61,76 @@ it('renders checked segmented button with selected check', async () => {
 });
 
 describe('getSegmentedButtonColors', () => {
-  it.each`
-    theme                     | disabled | checked  | checkedColor | uncheckedColor | expected
-    ${getTheme()}             | ${false} | ${true}  | ${undefined} | ${undefined}   | ${getTheme().colors.onSecondaryContainer}
-    ${getTheme()}             | ${false} | ${false} | ${undefined} | ${undefined}   | ${getTheme().colors.onSurface}
-    ${getTheme()}             | ${true}  | ${true}  | ${undefined} | ${undefined}   | ${getTheme().colors.onSurfaceDisabled}
-    ${getTheme()}             | ${true}  | ${false} | ${undefined} | ${undefined}   | ${getTheme().colors.onSurfaceDisabled}
-    ${getTheme()}             | ${false} | ${true}  | ${'a125f5'}  | ${undefined}   | ${'a125f5'}
-    ${getTheme()}             | ${false} | ${false} | ${undefined} | ${'000'}       | ${'000'}
-    ${getTheme()}             | ${false} | ${false} | ${'a125f5'}  | ${'000'}       | ${'000'}
-    ${getTheme()}             | ${false} | ${false} | ${'a125f5'}  | ${undefined}   | ${getTheme().colors.onSurface}
-    ${getTheme()}             | ${false} | ${true}  | ${undefined} | ${'000'}       | ${getTheme().colors.onSecondaryContainer}
-    ${getTheme(false, false)} | ${false} | ${false} | ${undefined} | ${undefined}   | ${getTheme(false, false).colors.primary}
-    ${getTheme(false, false)} | ${false} | ${true}  | ${undefined} | ${undefined}   | ${getTheme(false, false).colors.primary}
-    ${getTheme(false, false)} | ${true}  | ${false} | ${undefined} | ${undefined}   | ${getTheme(false, false).colors.disabled}
-    ${getTheme(false, false)} | ${true}  | ${true}  | ${undefined} | ${undefined}   | ${getTheme(false, false).colors.disabled}
-    ${getTheme(false, false)} | ${false} | ${false} | ${'a125f5'}  | ${undefined}   | ${getTheme(false, false).colors.primary}
-    ${getTheme(false, false)} | ${false} | ${true}  | ${undefined} | ${'000'}       | ${getTheme(false, false).colors.primary}
-  `(
-    'returns $expected when disabled: $disabled, checked: $checked, checkedColor is $checkedColor and uncheckedColor is $uncheckedColor  and isV3: $theme.isV3',
-    ({ theme, disabled, checked, checkedColor, uncheckedColor, expected }) => {
+  it.each([
+    {
+      disabled: false,
+      checked: true,
+      checkedColor: undefined,
+      uncheckedColor: undefined,
+      expected: LightTheme.colors.onSecondaryContainer,
+    },
+    {
+      disabled: false,
+      checked: false,
+      checkedColor: undefined,
+      uncheckedColor: undefined,
+      expected: LightTheme.colors.onSurface,
+    },
+    {
+      disabled: true,
+      checked: true,
+      checkedColor: undefined,
+      uncheckedColor: undefined,
+      expected: LightTheme.colors.onSurface,
+    },
+    {
+      disabled: true,
+      checked: false,
+      checkedColor: undefined,
+      uncheckedColor: undefined,
+      expected: LightTheme.colors.onSurface,
+    },
+    {
+      disabled: false,
+      checked: true,
+      checkedColor: 'a125f5',
+      uncheckedColor: undefined,
+      expected: 'a125f5',
+    },
+    {
+      disabled: false,
+      checked: false,
+      checkedColor: undefined,
+      uncheckedColor: '000',
+      expected: '000',
+    },
+    {
+      disabled: false,
+      checked: false,
+      checkedColor: 'a125f5',
+      uncheckedColor: '000',
+      expected: '000',
+    },
+    {
+      disabled: false,
+      checked: false,
+      checkedColor: 'a125f5',
+      uncheckedColor: undefined,
+      expected: LightTheme.colors.onSurface,
+    },
+    {
+      disabled: false,
+      checked: true,
+      checkedColor: undefined,
+      uncheckedColor: '000',
+      expected: LightTheme.colors.onSecondaryContainer,
+    },
+  ])(
+    'returns $expected when disabled: $disabled, checked: $checked, checkedColor is $checkedColor and uncheckedColor is $uncheckedColor',
+    ({ disabled, checked, checkedColor, uncheckedColor, expected }) => {
       expect(
         getSegmentedButtonColors({
-          theme,
+          theme: LightTheme,
           disabled,
           checked,
           checkedColor,
@@ -90,32 +143,17 @@ describe('getSegmentedButtonColors', () => {
   it('should return correct background color when checked and theme version 3', () => {
     expect(
       getSegmentedButtonColors({
-        theme: getTheme(),
+        theme: LightTheme,
         disabled: false,
         checked: true,
       })
-    ).toMatchObject({ backgroundColor: getTheme().colors.secondaryContainer });
+    ).toMatchObject({ backgroundColor: LightTheme.colors.secondaryContainer });
   });
 
-  it('should return correct background color when checked and theme version 2', () => {
+  it('should return correct background color when unchecked (V3 & V2)', () => {
     expect(
       getSegmentedButtonColors({
-        theme: getTheme(false, false),
-        disabled: false,
-        checked: true,
-      })
-    ).toMatchObject({
-      backgroundColor: color(getTheme(false, false).colors.primary)
-        .alpha(0.12)
-        .rgb()
-        .string(),
-    });
-  });
-
-  it('should return correct background color when uncheked (V3 & V2)', () => {
-    expect(
-      getSegmentedButtonColors({
-        theme: getTheme(false, false),
+        theme: LightTheme,
         disabled: false,
         checked: false,
       })
@@ -127,84 +165,49 @@ describe('getSegmentedButtonColors', () => {
   it('should return correct border color with theme version 3', () => {
     expect(
       getSegmentedButtonColors({
-        theme: getTheme(),
-        disabled: false,
-        checked: false,
-      })
-    ).toMatchObject({
-      borderColor: getTheme().colors.outline,
-    });
-  });
-
-  it('should return correct border color with theme version 2', () => {
-    expect(
-      getSegmentedButtonColors({
-        theme: getTheme(false, false),
+        theme: LightTheme,
         disabled: false,
         checked: false,
       })
     ).toMatchObject({
-      borderColor: color(black).alpha(0.29).rgb().string(),
+      borderColor: LightTheme.colors.outline,
     });
   });
 
   it('should return correct border color when disabled and theme version 3', () => {
     expect(
       getSegmentedButtonColors({
-        theme: getTheme(),
+        theme: LightTheme,
         disabled: true,
         checked: false,
       })
     ).toMatchObject({
-      borderColor: getTheme().colors.surfaceDisabled,
+      borderColor: LightTheme.colors.outlineVariant,
     });
   });
 
   it('should return correct textColor with theme version 3', () => {
     expect(
       getSegmentedButtonColors({
-        theme: getTheme(),
+        theme: LightTheme,
         disabled: false,
         checked: false,
       })
     ).toMatchObject({
-      textColor: getTheme().colors.onSurface,
-    });
-  });
-
-  it('should return correct textColor with theme version 2', () => {
-    expect(
-      getSegmentedButtonColors({
-        theme: getTheme(false, false),
-        disabled: false,
-        checked: false,
-      })
-    ).toMatchObject({
-      textColor: getTheme(false, false).colors.primary,
+      textColor: LightTheme.colors.onSurface,
     });
   });
 
   it('should return correct textColor when disabled and theme version 3', () => {
     expect(
       getSegmentedButtonColors({
-        theme: getTheme(),
-        disabled: true,
-        checked: false,
-      })
-    ).toMatchObject({
-      textColor: getTheme().colors.onSurfaceDisabled,
-    });
-  });
-
-  it('should return correct textColor when disabled and theme version 2', () => {
-    expect(
-      getSegmentedButtonColors({
-        theme: getTheme(false, false),
+        theme: LightTheme,
         disabled: true,
         checked: false,
       })
     ).toMatchObject({
-      textColor: getTheme(false, false).colors.disabled,
+      textColor: LightTheme.colors.onSurface,
+      textOpacity: stateOpacity.disabled,
     });
   });
 });
@@ -214,7 +217,7 @@ describe('getDisabledSegmentedButtonBorderWidth', () => {
     [0, 1, 2].forEach((index) => {
       expect(
         getDisabledSegmentedButtonStyle({
-          theme: getTheme(),
+          theme: LightTheme,
           buttons: [
             { disabled: false },
             { disabled: false },
@@ -230,7 +233,7 @@ describe('getDisabledSegmentedButtonBorderWidth', () => {
     [0, 1, 2].forEach((index) => {
       expect(
         getDisabledSegmentedButtonStyle({
-          theme: getTheme(),
+          theme: LightTheme,
           buttons: [{ disabled: true }, { disabled: true }, { disabled: true }],
           index,
         })
@@ -241,7 +244,7 @@ describe('getDisabledSegmentedButtonBorderWidth', () => {
   it('Returns proper style object for one disabled button', () => {
     expect(
       getDisabledSegmentedButtonStyle({
-        theme: getTheme(),
+        theme: LightTheme,
         buttons: [{ disabled: false }, { disabled: true }, { disabled: true }],
         index: 0,
       })
@@ -252,7 +255,7 @@ describe('getDisabledSegmentedButtonBorderWidth', () => {
     [0, 2].forEach((index) => {
       expect(
         getDisabledSegmentedButtonStyle({
-          theme: getTheme(),
+          theme: LightTheme,
           buttons: [
             { disabled: false },
             { disabled: true },
@@ -267,143 +270,147 @@ describe('getDisabledSegmentedButtonBorderWidth', () => {
 });
 
 describe('should render icon when', () => {
-  it('icon prop is passed', () => {
-    const { getByTestId } = render(
-      <SegmentedButtons
-        value={'walk'}
-        buttons={[
-          {
-            icon: 'walk',
-            value: 'walk',
-            testID: 'walking-button',
-          },
-          {
-            icon: 'car',
-            value: 'drive',
-            testID: 'driving-button',
-          },
-        ]}
-        onValueChange={() => {}}
-      />
-    );
+  it('icon prop is passed', async () => {
+    const tree = (
+      await render(
+        <SegmentedButtons
+          value={'walk'}
+          buttons={[
+            {
+              icon: 'walk',
+              value: 'walk',
+              testID: 'walking-button',
+            },
+            {
+              icon: 'car',
+              value: 'drive',
+              testID: 'driving-button',
+            },
+          ]}
+          onValueChange={() => {}}
+        />
+      )
+    ).toJSON();
 
-    expect(getByTestId('walking-button-icon')).toBeTruthy();
-    expect(getByTestId('driving-button-icon')).toBeTruthy();
+    expect(tree).toMatchSnapshot();
   });
 
-  it('icon prop is passed along with label, no matter if button is checked', () => {
-    const { getByTestId } = render(
-      <SegmentedButtons
-        value={'walk'}
-        buttons={[
-          {
-            icon: 'walk',
-            value: 'walk',
-            label: 'Walking',
-            testID: 'walking-button',
-          },
-          {
-            icon: 'car',
-            value: 'drive',
-            label: 'Driving',
-            testID: 'driving-button',
-          },
-        ]}
-        onValueChange={() => {}}
-      />
-    );
+  it('icon prop is passed along with label, no matter if button is checked', async () => {
+    const tree = (
+      await render(
+        <SegmentedButtons
+          value={'walk'}
+          buttons={[
+            {
+              icon: 'walk',
+              value: 'walk',
+              label: 'Walking',
+              testID: 'walking-button',
+            },
+            {
+              icon: 'car',
+              value: 'drive',
+              label: 'Driving',
+              testID: 'driving-button',
+            },
+          ]}
+          onValueChange={() => {}}
+        />
+      )
+    ).toJSON();
 
-    expect(getByTestId('walking-button-icon')).toBeTruthy();
-    expect(getByTestId('driving-button-icon')).toBeTruthy();
+    expect(tree).toMatchSnapshot();
   });
 
-  it('icon prop is passed along with label, button is checked, showSelectedCheck is false', () => {
-    const { getByTestId } = render(
-      <SegmentedButtons
-        value={'walk'}
-        buttons={[
-          {
-            icon: 'walk',
-            value: 'walk',
-            label: 'Walking',
-            testID: 'walking-button',
-            showSelectedCheck: false,
-          },
-          {
-            icon: 'car',
-            value: 'drive',
-            label: 'Driving',
-            testID: 'driving-button',
-            showSelectedCheck: false,
-          },
-        ]}
-        onValueChange={() => {}}
-      />
-    );
+  it('icon prop is passed along with label, button is checked, showSelectedCheck is false', async () => {
+    const tree = (
+      await render(
+        <SegmentedButtons
+          value={'walk'}
+          buttons={[
+            {
+              icon: 'walk',
+              value: 'walk',
+              label: 'Walking',
+              testID: 'walking-button',
+              showSelectedCheck: false,
+            },
+            {
+              icon: 'car',
+              value: 'drive',
+              label: 'Driving',
+              testID: 'driving-button',
+              showSelectedCheck: false,
+            },
+          ]}
+          onValueChange={() => {}}
+        />
+      )
+    ).toJSON();
 
-    expect(getByTestId('walking-button-icon')).toBeTruthy();
-    expect(getByTestId('driving-button-icon')).toBeTruthy();
+    expect(tree).toMatchSnapshot();
   });
 });
 
 describe('should not render icon when', () => {
-  it('icon prop is not passed', () => {
-    const { queryByTestId } = render(
-      <SegmentedButtons
-        value={'walk'}
-        buttons={[
-          {
-            value: 'walk',
-            testID: 'walking-button',
-          },
-          {
-            value: 'drive',
-            testID: 'driving-button',
-          },
-        ]}
-        onValueChange={() => {}}
-      />
-    );
+  it('icon prop is not passed', async () => {
+    const tree = (
+      await render(
+        <SegmentedButtons
+          value={'walk'}
+          buttons={[
+            {
+              value: 'walk',
+              testID: 'walking-button',
+            },
+            {
+              value: 'drive',
+              testID: 'driving-button',
+            },
+          ]}
+          onValueChange={() => {}}
+        />
+      )
+    ).toJSON();
 
-    expect(queryByTestId('walking-button-icon')).toBeNull();
-    expect(queryByTestId('driving-button-icon')).toBeNull();
+    expect(tree).toMatchSnapshot();
   });
 
-  it('icon prop is passed along with label, button is checked, showSelectedCheck is true', () => {
-    const { getByTestId, queryByTestId } = render(
-      <SegmentedButtons
-        value={'walk'}
-        buttons={[
-          {
-            icon: 'walk',
-            label: 'Walking',
-            value: 'walk',
-            testID: 'walking-button',
-            showSelectedCheck: true,
-          },
-          {
-            icon: 'car',
-            label: 'Driving',
-            value: 'drive',
-            testID: 'driving-button',
-            showSelectedCheck: true,
-          },
-        ]}
-        onValueChange={() => {}}
-      />
-    );
+  it('icon prop is passed along with label, button is checked, showSelectedCheck is true', async () => {
+    const tree = (
+      await render(
+        <SegmentedButtons
+          value={'walk'}
+          buttons={[
+            {
+              icon: 'walk',
+              label: 'Walking',
+              value: 'walk',
+              testID: 'walking-button',
+              showSelectedCheck: true,
+            },
+            {
+              icon: 'car',
+              label: 'Driving',
+              value: 'drive',
+              testID: 'driving-button',
+              showSelectedCheck: true,
+            },
+          ]}
+          onValueChange={() => {}}
+        />
+      )
+    ).toJSON();
 
-    expect(queryByTestId('walking-button-icon')).toBeNull();
-    expect(getByTestId('walking-button-check-icon')).toBeTruthy();
-    expect(getByTestId('driving-button-icon')).toBeTruthy();
+    expect(tree).toMatchSnapshot();
   });
 });
 
 describe('should have `accessibilityState={ checked: true }` when selected', () => {
-  it('should have two button selected', () => {
+  it('should have two button selected', async () => {
     const onValueChange = jest.fn();
-    const { getAllByA11yState } = render(
-      <SegmentedButtons
+    await render(
+      <SegmentedButtons<string>
         multiSelect
         value={['walk', 'transit']}
         buttons={[
@@ -415,38 +422,51 @@ describe('should have `accessibilityState={ checked: true }` when selected', ()
       />
     );
 
-    const checkedButtons = getAllByA11yState({ checked: true });
-    expect(checkedButtons).toHaveLength(2);
+    const buttons = screen.getAllByRole('button');
+
+    expect(buttons[0]).toHaveProp(
+      'accessibilityState',
+      expect.objectContaining({ checked: true })
+    );
+    expect(buttons[1]).toHaveProp(
+      'accessibilityState',
+      expect.objectContaining({ checked: true })
+    );
+    expect(buttons[2]).toHaveProp(
+      'accessibilityState',
+      expect.objectContaining({ checked: false })
+    );
   });
 
-  it('show selected check icon should be shown', () => {
+  it('show selected check icon should be shown', async () => {
     const onValueChange = jest.fn();
 
-    const { getByTestId } = render(
-      <SegmentedButtons
-        multiSelect
-        value={['walk', 'transit']}
-        buttons={[
-          {
-            value: 'walk',
-            label: 'Walking',
-            showSelectedCheck: true,
-            testID: 'walking-check-icon',
-          },
-          { value: 'transit', label: 'Transit' },
-          { value: 'drive', label: 'Driving' },
-        ]}
-        onValueChange={onValueChange}
-      />
-    );
+    const tree = (
+      await render(
+        <SegmentedButtons<string>
+          multiSelect
+          value={['walk', 'transit']}
+          buttons={[
+            {
+              value: 'walk',
+              label: 'Walking',
+              showSelectedCheck: true,
+            },
+            { value: 'transit', label: 'Transit' },
+            { value: 'drive', label: 'Driving' },
+          ]}
+          onValueChange={onValueChange}
+        />
+      )
+    ).toJSON();
 
-    expect(getByTestId('walking-check-icon')).toBeDefined();
+    expect(tree).toMatchSnapshot();
   });
 });
 
 describe('labelStyle is handled', () => {
-  it('when labelStyle is given', () => {
-    const { getByTestId } = render(
+  it('when labelStyle is given', async () => {
+    await render(
       <SegmentedButtons
         value={'walk'}
         buttons={[
@@ -467,12 +487,16 @@ describe('labelStyle is handled', () => {
       />
     );
 
-    expect(getByTestId('walking-button-label')).toHaveStyle({ fontSize: 10 });
-    expect(getByTestId('driving-button-label')).toHaveStyle({ fontSize: 12 });
+    expect(screen.getByText('Walking')).toHaveStyle({
+      fontSize: 10,
+    });
+    expect(screen.getByText('Driving')).toHaveStyle({
+      fontSize: 12,
+    });
   });
 
-  it('when labelStyle is omitted', () => {
-    const { getByTestId } = render(
+  it('when labelStyle is omitted', async () => {
+    await render(
       <SegmentedButtons
         value={'walk'}
         buttons={[
@@ -486,6 +510,8 @@ describe('labelStyle is handled', () => {
       />
     );
 
-    expect(getByTestId('walking-button-label')).toHaveStyle({ fontSize: 14 });
+    expect(screen.getByText('Walking')).toHaveStyle({
+      fontSize: 14,
+    });
   });
 });
diff --git a/src/components/__tests__/Snackbar.test.tsx b/src/components/__tests__/Snackbar.test.tsx
index f520faa466..5c30f7cc6e 100644
--- a/src/components/__tests__/Snackbar.test.tsx
+++ b/src/components/__tests__/Snackbar.test.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { Animated, StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 
-import { act, render } from '@testing-library/react-native';
+import { expect, it, jest } from '@jest/globals';
 
-import { red200, white } from '../../styles/themes/v2/colors';
+import { render } from '../../test-utils';
+import { red200, white } from '../../theme/colors';
 import Snackbar from '../Snackbar';
 
 const styles = StyleSheet.create({
@@ -22,109 +22,72 @@ jest.mock('react-native-safe-area-context', () => ({
   useSafeAreaInsets: () => ({ bottom: 34, left: 0, right: 0, top: 47 }),
 }));
 
-it('renders snackbar with content', () => {
-  const tree = render(
-    <Snackbar visible onDismiss={jest.fn()}>
-      Snackbar content
-    </Snackbar>
+it('renders snackbar with content', async () => {
+  const tree = (
+    await render(
+      <Snackbar visible onDismiss={jest.fn()}>
+        Snackbar content
+      </Snackbar>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders not visible snackbar with content wrapper but no actual content', () => {
-  const tree = render(
-    <Snackbar visible={false} onDismiss={jest.fn()}>
-      Snackbar content
-    </Snackbar>
+it('renders not visible snackbar with content wrapper but no actual content', async () => {
+  const tree = (
+    await render(
+      <Snackbar visible={false} onDismiss={jest.fn()}>
+        Snackbar content
+      </Snackbar>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders snackbar with Text as a child', () => {
-  const tree = render(
-    <Snackbar visible onDismiss={jest.fn()}>
-      <Text>Snackbar content</Text>
-    </Snackbar>
+it('renders snackbar with Text as a child', async () => {
+  const tree = (
+    await render(
+      <Snackbar visible onDismiss={jest.fn()}>
+        <Text>Snackbar content</Text>
+      </Snackbar>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders snackbar with action button', () => {
-  const tree = render(
-    <Snackbar
-      visible
-      onDismiss={() => {}}
-      action={{ label: 'Undo', onPress: jest.fn() }}
-    >
-      Snackbar content
-    </Snackbar>
+it('renders snackbar with action button', async () => {
+  const tree = (
+    await render(
+      <Snackbar
+        visible
+        onDismiss={() => {}}
+        action={{ label: 'Undo', onPress: jest.fn() }}
+      >
+        Snackbar content
+      </Snackbar>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders snackbar with View & Text as a child', () => {
-  const tree = render(
-    <Snackbar visible onDismiss={jest.fn()}>
-      <View style={styles.snackContent}>
-        <View style={styles.iconView} />
-        <Text style={styles.text}>
-          Error Message which is veryyyyyyyyyyyy longggggggg Error Message which
-          is veryyyyyyyyyyyy longggggggg
-        </Text>
-      </View>
-    </Snackbar>
+it('renders snackbar with View & Text as a child', async () => {
+  const tree = (
+    await render(
+      <Snackbar visible onDismiss={jest.fn()}>
+        <View style={styles.snackContent}>
+          <View style={styles.iconView} />
+          <Text style={styles.text}>
+            Error Message which is veryyyyyyyyyyyy longggggggg Error Message
+            which is veryyyyyyyyyyyy longggggggg
+          </Text>
+        </View>
+      </Snackbar>
+    )
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
-
-it('renders with custom ripple color', () => {
-  const { getByTestId } = render(
-    <Snackbar
-      visible
-      onDismiss={() => {}}
-      onIconPress={() => {}}
-      rippleColor="purple"
-      testID="snackbar"
-    >
-      Snackbar content
-    </Snackbar>
-  );
-
-  const iconContainer = getByTestId('snackbar-icon-container').props.children;
-  expect(iconContainer.props.rippleColor).toBe('purple');
-});
-
-it('animated value changes correctly', () => {
-  const value = new Animated.Value(1);
-  const { getByTestId } = render(
-    <Snackbar
-      visible
-      onDismiss={jest.fn()}
-      testID="snack-bar"
-      style={[{ transform: [{ scale: value }] }]}
-    >
-      Snackbar content
-    </Snackbar>
-  );
-  expect(getByTestId('snack-bar-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1 }],
-  });
-
-  Animated.timing(value, {
-    toValue: 1.5,
-    useNativeDriver: false,
-    duration: 200,
-  }).start();
-
-  act(() => {
-    jest.advanceTimersByTime(200);
-  });
-  expect(getByTestId('snack-bar-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1.5 }],
-  });
-});
diff --git a/src/components/__tests__/Surface.test.tsx b/src/components/__tests__/Surface.test.tsx
index 8d8e639779..96ed707ae1 100644
--- a/src/components/__tests__/Surface.test.tsx
+++ b/src/components/__tests__/Surface.test.tsx
@@ -1,262 +1,247 @@
-import * as React from 'react';
-import { StyleSheet } from 'react-native';
-import { Platform } from 'react-native';
-
-import { render } from '@testing-library/react-native';
-
-import { getTheme } from '../../core/theming';
+import {
+  DynamicColorIOS,
+  Platform,
+  PlatformColor,
+  Pressable,
+} from 'react-native';
+
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  jest,
+} from '@jest/globals';
+import { userEvent } from '@testing-library/react-native';
+import {
+  getAnimatedStyle,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
+
+import { render, screen } from '../../test-utils';
+import { LightTheme } from '../../theme/schemes';
 import Surface from '../Surface';
 
-describe('Surface', () => {
-  it('should properly render passed props', () => {
-    const testID = 'surface-container';
-    const { getByTestId } = render(
-      <Surface pointerEvents="box-none" testID={testID}>
+const SPOT_SHADOW_OPACITY = 0.19;
+const AMBIENT_SHADOW_OPACITY = 0.039;
+
+const AnimatedSurface = () => {
+  const opacity = useSharedValue(0);
+  const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.value }));
+
+  return (
+    <>
+      <Pressable
+        testID="animate-surface"
+        onPress={() => {
+          opacity.value = 1;
+        }}
+      />
+      <Surface testID="animated-surface" style={animatedStyle}>
+        {null}
+      </Surface>
+    </>
+  );
+};
+
+const AnimatedVisualSurface = () => {
+  const borderRadius = useSharedValue(4);
+
+  return (
+    <>
+      <Pressable
+        testID="animate-visual-props"
+        onPress={() => {
+          borderRadius.value = 8;
+        }}
+      />
+      <Surface
+        mode="flat"
+        testID="animated-visual-surface"
+        backgroundColor="red"
+        borderRadius={borderRadius}
+      >
         {null}
       </Surface>
-    );
-    expect(getByTestId(testID).props.pointerEvents).toBe('box-none');
+    </>
+  );
+};
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+describe('Surface', () => {
+  it('updates styles when a Reanimated shared value changes', async () => {
+    await render(<AnimatedSurface />);
+
+    const surface = screen.getByTestId('animated-surface');
+    expect(getAnimatedStyle(surface)).toMatchObject({ opacity: 0 });
+
+    await userEvent.press(screen.getByTestId('animate-surface'));
+    await jest.runAllTimersAsync();
+
+    expect(getAnimatedStyle(surface)).toMatchObject({ opacity: 1 });
   });
 
   describe('on iOS', () => {
-    Platform.OS = 'ios';
-    const styles = StyleSheet.create({
-      absoluteStyles: {
-        bottom: 10,
-        end: 20,
-        left: 30,
-        position: 'absolute',
-        right: 40,
-        start: 50,
-        top: 60,
-      },
-      innerLayerViewStyle: {
-        padding: 13,
-      },
-      restStyle: {
-        padding: 10,
-        flexDirection: 'row',
-        alignContent: 'center',
-      },
+    beforeEach(() => {
+      jest.replaceProperty(Platform, 'OS', 'ios');
     });
 
-    it('should render Surface with appropriate bg color but without shadow, if mode is set to "flat"', () => {
-      const { getByTestId } = render(
-        <Surface
-          mode="flat"
-          elevation={5}
-          pointerEvents="box-none"
-          testID={'surface-test'}
-        >
+    it('should render Surface with appropriate bg color but without shadow, if mode is set to "flat"', async () => {
+      await render(
+        <Surface mode="flat" elevation={5} testID={'surface-test'}>
           {null}
         </Surface>
       );
 
-      expect(getByTestId('surface-test')).not.toHaveStyle({
-        shadowColor: '#000',
-        shadowOpacity: 0.3,
-        shadowOffset: { width: 0, height: 4 },
-        shadowRadius: 4,
+      // @ts-expect-error
+      expect(screen.getByTestId('surface-test')).not.toHaveStyle({
+        shadowOpacity: expect.any(Number),
       });
-      expect(getByTestId('surface-test-outer-layer')).not.toHaveStyle({
-        shadowColor: '#000',
-        shadowOpacity: 0.15,
-        shadowOffset: { width: 0, height: 8 },
-        shadowRadius: 12,
-      });
-      expect(getByTestId('surface-test')).toHaveStyle({
-        backgroundColor: getTheme().colors.elevation.level5,
+      expect(screen.getByTestId('surface-test')).toHaveStyle({
+        backgroundColor: LightTheme.colors.surfaceContainerHighest,
       });
     });
 
-    it.each`
-      property              | value
-      ${'opacity'}          | ${0.7}
-      ${'transform'}        | ${[{ scale: 1.02 }]}
-      ${'width'}            | ${'42%'}
-      ${'height'}           | ${'32.5%'}
-      ${'margin'}           | ${13}
-      ${'marginLeft'}       | ${13.1}
-      ${'marginRight'}      | ${13.2}
-      ${'marginTop'}        | ${13.3}
-      ${'marginBottom'}     | ${13.4}
-      ${'marginHorizontal'} | ${13.5}
-      ${'marginVertical'}   | ${13.6}
-      ${'position'}         | ${'absolute'}
-      ${'alignSelf'}        | ${'flex-start'}
-      ${'top'}              | ${1.1}
-      ${'right'}            | ${1.2}
-      ${'bottom'}           | ${1.3}
-      ${'left'}             | ${1.4}
-      ${'start'}            | ${1.5}
-      ${'end'}              | ${1.6}
-      ${'flex'}             | ${6}
-    `('applies $property to outer layer only', ({ property, value }) => {
-      const style = { [property]: value };
-
-      const { getByTestId } = render(
-        <Surface testID="surface-test" style={style}>
+    it('should render a spot shadow if mode is elevated', async () => {
+      await render(
+        <Surface elevation={5} testID={'surface-test'}>
           {null}
         </Surface>
       );
 
-      expect(getByTestId('surface-test-outer-layer')).toHaveStyle(style);
-      expect(getByTestId('surface-test')).not.toHaveStyle(style);
+      expect(screen.getByTestId('surface-test')).toHaveStyle({
+        shadowOpacity: SPOT_SHADOW_OPACITY,
+      });
     });
 
-    it.each`
-      property               | value
-      ${'padding'}           | ${12}
-      ${'paddingLeft'}       | ${12.1}
-      ${'paddingRight'}      | ${12.2}
-      ${'paddingTop'}        | ${12.3}
-      ${'paddingBottom'}     | ${12.4}
-      ${'paddingHorizontal'} | ${12.5}
-      ${'paddingVertical'}   | ${12.6}
-      ${'borderWidth'}       | ${2}
-      ${'borderColor'}       | ${'black'}
-    `('applies $property to inner layer only', ({ property, value }) => {
-      const style = { [property]: value };
-
-      const { getByTestId } = render(
-        <Surface testID="surface-test" style={style}>
+    it('applies background and shape props in flat mode', async () => {
+      const backgroundColor = 'rgba(1, 2, 3, 0.5)';
+      await render(
+        <Surface
+          mode="flat"
+          testID="surface-test"
+          backgroundColor={backgroundColor}
+          borderRadius={4}
+          borderTopLeftRadius={8}
+        >
           {null}
         </Surface>
       );
 
-      expect(getByTestId('surface-test-outer-layer')).not.toHaveStyle(style);
-      expect(getByTestId('surface-test')).toHaveStyle(style);
+      expect(screen.getByTestId('surface-test')).toHaveStyle({
+        backgroundColor,
+        borderRadius: 4,
+        borderTopLeftRadius: 8,
+      });
     });
 
-    it.each`
-      property                     | value
-      ${'borderRadius'}            | ${3}
-      ${'borderTopLeftRadius'}     | ${1}
-      ${'borderTopRightRadius'}    | ${2}
-      ${'borderBottomLeftRadius'}  | ${3}
-      ${'borderBottomRightRadius'} | ${4}
-      ${'backgroundColor'}         | ${'rgb(4, 5, 6)'}
-    `('applies $property to every layer', ({ property, value }) => {
-      const style = { [property]: value };
-
-      const { getByTestId } = render(
-        <Surface testID="surface-test" style={style}>
-          {null}
-        </Surface>
-      );
+    it('updates the animated corner radius', async () => {
+      await render(<AnimatedVisualSurface />);
 
-      expect(getByTestId('surface-test-outer-layer')).toHaveStyle(style);
-      expect(getByTestId('surface-test')).toHaveStyle(style);
-    });
+      const surface = screen.getByTestId('animated-visual-surface');
 
-    describe('outer layer', () => {
-      it('should not render rest style', () => {
-        const testID = 'surface-test';
+      expect(getAnimatedStyle(surface)).toMatchObject({
+        borderRadius: 4,
+      });
 
-        const { getByTestId } = render(
-          <Surface testID={testID} style={styles.restStyle}>
-            {null}
-          </Surface>
-        );
+      await userEvent.press(screen.getByTestId('animate-visual-props'));
+      await jest.runAllTimersAsync();
 
-        expect(getByTestId(`${testID}-outer-layer`)).not.toHaveStyle(
-          styles.restStyle
-        );
+      expect(getAnimatedStyle(surface)).toMatchObject({
+        borderRadius: 8,
       });
+    });
 
-      it('should render absolute position properties on outer layer', () => {
-        const testID = 'surface-test';
-
-        const { getByTestId } = render(
-          <Surface testID={testID} style={styles.absoluteStyles}>
-            {null}
-          </Surface>
-        );
+    it('does not transition a DynamicColorIOS background', async () => {
+      await render(
+        <Surface
+          testID="surface-test"
+          backgroundColor={DynamicColorIOS({ light: 'white', dark: 'black' })}
+        >
+          {null}
+        </Surface>
+      );
 
-        expect(getByTestId(`${testID}-outer-layer`)).toHaveStyle(
-          styles.absoluteStyles
-        );
+      expect(
+        getAnimatedStyle(screen.getByTestId('surface-test'))
+      ).toMatchObject({
+        transitionProperty: expect.not.arrayContaining(['backgroundColor']),
       });
+    });
+  });
 
-      it('should render absolute position properties on the outer layer', () => {
-        const testID = 'surface-test';
+  describe('on Android', () => {
+    beforeEach(() => {
+      jest.replaceProperty(Platform, 'OS', 'android');
+    });
 
-        const { getByTestId } = render(
-          <Surface testID={testID} style={styles.absoluteStyles}>
-            {null}
-          </Surface>
-        );
+    it('should render Surface with appropriate bg color but without shadow, if mode is set to "flat"', async () => {
+      await render(
+        <Surface mode="flat" elevation={5} testID="surface-container">
+          {null}
+        </Surface>
+      );
 
-        expect(getByTestId(`${testID}-outer-layer`)).toHaveStyle(
-          styles.absoluteStyles
-        );
+      // @ts-expect-error
+      expect(screen.getByTestId('surface-container')).not.toHaveStyle({
+        elevation: expect.any(Number),
+      });
+      expect(screen.getByTestId('surface-container')).toHaveStyle({
+        backgroundColor: LightTheme.colors.surfaceContainerHighest,
       });
     });
 
-    describe('inner layer', () => {
-      it('should render inner layer styles on the inner layer', () => {
-        const testID = 'surface-test';
-
-        const { getByTestId } = render(
-          <Surface testID={testID} style={styles.innerLayerViewStyle}>
-            {null}
-          </Surface>
-        );
+    it('should render the dp value for the elevation level, if mode is elevated', async () => {
+      await render(
+        <Surface elevation={5} testID="surface-container">
+          {null}
+        </Surface>
+      );
 
-        expect(getByTestId(testID)).toHaveStyle(styles.innerLayerViewStyle);
+      expect(screen.getByTestId('surface-container')).toHaveStyle({
+        elevation: 12,
       });
     });
 
-    it('applies backgroundColor to every layer', () => {
-      const backgroundColor = 'rgb(1, 2, 3)';
-      const { getByTestId } = render(
+    it('does not transition a PlatformColor background', async () => {
+      await render(
         <Surface
-          testID="surface-test"
-          theme={{ colors: { elevation: { level1: backgroundColor } } }}
+          testID="surface-container"
+          backgroundColor={PlatformColor('systemBlue')}
         >
           {null}
         </Surface>
       );
 
-      const style = { backgroundColor };
-      expect(getByTestId('surface-test-outer-layer')).toHaveStyle(style);
-      expect(getByTestId('surface-test')).toHaveStyle(style);
-    });
-
-    describe('children wrapper', () => {
-      it('should render rest styles', () => {
-        const testID = 'surface-test';
-        const combinedStyles = [styles.innerLayerViewStyle, styles.restStyle];
-
-        const { getByTestId } = render(
-          <Surface testID={testID} style={combinedStyles}>
-            {null}
-          </Surface>
-        );
-
-        expect(getByTestId(testID)).toHaveStyle(combinedStyles);
+      expect(
+        getAnimatedStyle(screen.getByTestId('surface-container'))
+      ).toMatchObject({
+        transitionProperty: expect.not.arrayContaining(['backgroundColor']),
       });
     });
   });
 
-  describe('on Android', () => {
-    it('should render Surface with appropriate bg color but without shadow, if mode is set to "flat"', () => {
-      Platform.OS = 'android';
-      const testID = 'surface-container';
-      const { getByTestId } = render(
-        <Surface
-          mode="flat"
-          elevation={5}
-          pointerEvents="box-none"
-          testID={testID}
-        >
+  describe('on Web', () => {
+    beforeEach(() => {
+      jest.replaceProperty(Platform, 'OS', 'web');
+    });
+
+    it('should render both shadows in one box shadow, if mode is elevated', async () => {
+      await render(
+        <Surface elevation={5} testID="surface-container">
           {null}
         </Surface>
       );
 
-      expect(getByTestId(testID)).not.toHaveStyle({ elevation: 5 });
-      expect(getByTestId(testID)).toHaveStyle({
-        backgroundColor: getTheme().colors.elevation.level5,
+      expect(screen.getByTestId('surface-container')).toHaveStyle({
+        boxShadow:
+          `0px 6.75px 19.22px rgba(0, 0, 0, ${SPOT_SHADOW_OPACITY}), ` +
+          `0px 0px 6px rgba(0, 0, 0, ${AMBIENT_SHADOW_OPACITY})`,
       });
     });
   });
diff --git a/src/components/__tests__/Switch.test.tsx b/src/components/__tests__/Switch.test.tsx
index e475b9a166..ceff77a0e6 100644
--- a/src/components/__tests__/Switch.test.tsx
+++ b/src/components/__tests__/Switch.test.tsx
@@ -1,257 +1,76 @@
-import * as React from 'react';
-import { Platform } from 'react-native';
+import { describe, expect, it, jest } from '@jest/globals';
 
-import { render } from '@testing-library/react-native';
-import color from 'color';
-
-import { getTheme } from '../../core/theming';
-import {
-  white,
-  black,
-  grey400,
-  grey50,
-  grey800,
-  pink500,
-  grey700,
-} from '../../styles/themes/v2/colors';
+import { render, screen, userEvent } from '../../test-utils';
 import Switch from '../Switch/Switch';
-import { getSwitchColor } from '../Switch/utils';
-
-it('renders on switch', () => {
-  const tree = render(<Switch value />).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
-
-it('renders off switch', () => {
-  const tree = render(<Switch value={false} />).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
-
-it('renders disabled switch', () => {
-  const tree = render(<Switch disabled value />).toJSON();
 
-  expect(tree).toMatchSnapshot();
-});
-
-it('renders switch with color', () => {
-  const tree = render(<Switch value color={pink500} />).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
-
-describe('getSwitchColor - checked color', () => {
-  it('should return custom color', () => {
-    expect(
-      getSwitchColor({
-        theme: getTheme(),
-        color: 'purple',
-      })
-    ).toMatchObject({
-      checkedColor: 'purple',
-    });
+describe('Switch render', () => {
+  it('renders on', async () => {
+    expect((await render(<Switch value />)).toJSON()).toMatchSnapshot();
   });
 
-  it('should return theme color, for theme version 3', () => {
-    expect(
-      getSwitchColor({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      checkedColor: getTheme().colors.primary,
-    });
+  it('renders off', async () => {
+    expect((await render(<Switch value={false} />)).toJSON()).toMatchSnapshot();
   });
 
-  it('should return theme color, for theme version 2', () => {
+  it('renders disabled on', async () => {
     expect(
-      getSwitchColor({
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      checkedColor: getTheme(false, false).colors.accent,
-    });
-  });
-});
-
-describe('getSwitchColor - thumb tint color', () => {
-  it('should return undefined for iOS platform', () => {
-    Platform.OS = 'ios';
-
-    expect(
-      getSwitchColor({
-        theme: getTheme(true),
-      })
-    ).toMatchObject({
-      thumbTintColor: undefined,
-    });
-  });
-
-  it('should return correct disabled color, dark mode', () => {
-    Platform.OS = 'android';
-
-    expect(
-      getSwitchColor({
-        theme: getTheme(true),
-        disabled: true,
-      })
-    ).toMatchObject({
-      thumbTintColor: grey800,
-    });
+      (await render(<Switch disabled value />)).toJSON()
+    ).toMatchSnapshot();
   });
 
-  it('should return correct disabled color, light mode', () => {
+  it('renders disabled off', async () => {
     expect(
-      getSwitchColor({
-        theme: getTheme(),
-        disabled: true,
-      })
-    ).toMatchObject({
-      thumbTintColor: grey400,
-    });
+      (await render(<Switch disabled value={false} />)).toJSON()
+    ).toMatchSnapshot();
   });
 
-  it('should return correct checked color if there is value', () => {
-    Platform.OS = 'android';
-
+  it('renders with checked icon', async () => {
     expect(
-      getSwitchColor({
-        theme: getTheme(),
-        value: true,
-        color: 'purple',
-      })
-    ).toMatchObject({
-      thumbTintColor: 'purple',
-    });
+      (await render(<Switch value checkedIcon="check" />)).toJSON()
+    ).toMatchSnapshot();
   });
 
-  it('should return theme checked color, dark mode', () => {
-    Platform.OS = 'android';
-
+  it('renders with per-state icons', async () => {
     expect(
-      getSwitchColor({
-        theme: getTheme(true),
-      })
-    ).toMatchObject({
-      thumbTintColor: grey400,
-    });
-  });
-
-  it('should return theme checked color, light mode', () => {
-    Platform.OS = 'android';
-
-    expect(
-      getSwitchColor({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      thumbTintColor: grey50,
-    });
+      (
+        await render(<Switch value checkedIcon="check" uncheckedIcon="close" />)
+      ).toJSON()
+    ).toMatchSnapshot();
   });
 });
 
-describe('getSwitchColor - on tint color', () => {
-  it('should return checked color for iOS platform, for theme version 3', () => {
-    Platform.OS = 'ios';
-
-    expect(
-      getSwitchColor({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      onTintColor: getTheme().colors.primary,
-    });
-  });
-
-  it('should return checked color for iOS platform, for theme version 2', () => {
-    Platform.OS = 'ios';
-
-    expect(
-      getSwitchColor({
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      onTintColor: getTheme(false, false).colors.accent,
-    });
-  });
-
-  it('should return custom color for iOS platform', () => {
-    Platform.OS = 'ios';
-
-    expect(
-      getSwitchColor({
-        theme: getTheme(false, false),
-        color: 'purple',
-      })
-    ).toMatchObject({
-      onTintColor: 'purple',
-    });
-  });
-
-  it('should return correct disabled color, for theme version 3, dark mode', () => {
-    Platform.OS = 'android';
-
-    expect(
-      getSwitchColor({
-        theme: getTheme(true),
-        disabled: true,
-      })
-    ).toMatchObject({
-      onTintColor: color(white).alpha(0.06).rgb().string(),
-    });
-  });
-
-  it('should return correct disabled color, for theme version 2, dark mode', () => {
-    expect(
-      getSwitchColor({
-        theme: getTheme(true, false),
-        disabled: true,
-      })
-    ).toMatchObject({
-      onTintColor: color(white).alpha(0.1).rgb().string(),
-    });
-  });
-
-  it('should return correct disabled color, light mode', () => {
-    expect(
-      getSwitchColor({
-        theme: getTheme(),
-        disabled: true,
-      })
-    ).toMatchObject({
-      onTintColor: color(black).alpha(0.12).rgb().string(),
-    });
-  });
+describe('Switch accessibility', () => {
+  it('has switch role', async () => {
+    await render(<Switch value={false} />);
 
-  it('should return correct checked color if there is value', () => {
-    expect(
-      getSwitchColor({
-        theme: getTheme(),
-        value: true,
-        color: 'purple',
-      })
-    ).toMatchObject({
-      onTintColor: color('purple').alpha(0.5).rgb().string(),
-    });
-  });
-
-  it('should return theme checked color, dark mode', () => {
-    expect(
-      getSwitchColor({
-        theme: getTheme(true),
-      })
-    ).toMatchObject({
-      onTintColor: grey700,
-    });
+    expect(screen.getByRole('switch')).toBeOnTheScreen();
   });
+});
 
-  it('should return theme checked color, light mode', () => {
-    expect(
-      getSwitchColor({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      onTintColor: 'rgb(178, 175, 177)',
-    });
+describe('Switch interaction', () => {
+  it('toggles to true when off and pressed', async () => {
+    const user = userEvent.setup();
+    const onValueChange = jest.fn();
+    await render(<Switch value={false} onValueChange={onValueChange} />);
+    await user.press(screen.getByRole('switch'));
+    expect(onValueChange).toHaveBeenCalledWith(true);
+  });
+
+  it('toggles to false when on and pressed', async () => {
+    const user = userEvent.setup();
+    const onValueChange = jest.fn();
+    await render(<Switch value onValueChange={onValueChange} />);
+    await user.press(screen.getByRole('switch'));
+    expect(onValueChange).toHaveBeenCalledWith(false);
+  });
+
+  it('does not fire onValueChange when disabled', async () => {
+    const user = userEvent.setup();
+    const onValueChange = jest.fn();
+    await render(
+      <Switch value={false} disabled onValueChange={onValueChange} />
+    );
+    await user.press(screen.getByRole('switch'));
+    expect(onValueChange).not.toHaveBeenCalled();
   });
 });
diff --git a/src/components/__tests__/TextInput.test.tsx b/src/components/__tests__/TextInput.test.tsx
index e190a537d6..b87e482c7f 100644
--- a/src/components/__tests__/TextInput.test.tsx
+++ b/src/components/__tests__/TextInput.test.tsx
@@ -1,1215 +1,1342 @@
-/* eslint-disable react-native/no-inline-styles */
 import * as React from 'react';
-import { I18nManager, Platform, StyleSheet, Text, View } from 'react-native';
-
-import { fireEvent, render } from '@testing-library/react-native';
-import color from 'color';
+import {
+  I18nManager,
+  StyleSheet,
+  TextInput as NativeTextInput,
+  View,
+} from 'react-native';
+import type { GestureResponderEvent } from 'react-native';
 
-import { DefaultTheme, getTheme, ThemeProvider } from '../../core/theming';
-import { red500 } from '../../styles/themes/v2/colors';
 import {
-  getFlatInputColors,
-  getOutlinedInputColors,
-} from '../TextInput/helpers';
-import TextInput, { Props } from '../TextInput/TextInput';
-
-const style = StyleSheet.create({
-  inputStyle: {
-    color: red500,
-  },
-  centered: {
-    textAlign: 'center',
-  },
-  height: {
-    height: 100,
-  },
-  lineHeight: {
-    lineHeight: 22,
-  },
-  contentStyle: {
-    paddingLeft: 20,
+  afterAll,
+  afterEach,
+  beforeAll,
+  expect,
+  it,
+  jest,
+} from '@jest/globals';
+import type { TestInstance } from 'test-renderer';
+
+import { act, fireEvent, render, screen, userEvent } from '../../test-utils';
+import { tokens } from '../../theme/tokens';
+import TextInput from '../TextInput';
+import type {
+  TextInputRenderProps,
+  TextInputHandles,
+} from '../TextInput/TextInput';
+import type { TextInputAccessoryProps } from '../TextInput/TextInputIcon';
+
+const stateOpacity = tokens.md.sys.state.opacity;
+
+const styles = StyleSheet.create({
+  textInputStyle: {
+    fontSize: 40,
+    letterSpacing: 9,
   },
 });
 
-// Revert changes to Platform.OS automatically
-const defaultPlatform = Platform.OS;
-beforeEach(() => {
-  Platform.OS = defaultPlatform;
+const defaultI18nIsRTL = I18nManager.isRTL;
+const includeHiddenElements = { includeHiddenElements: true };
+
+const getOuterTextInputPressable = (root: TestInstance | null) => {
+  const [pressable] =
+    // eslint-disable-next-line no-restricted-syntax -- TODO: replace non-accessible outer Pressable lookup with a public behavior assertion.
+    root?.queryAll(
+      (instance) =>
+        // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+        instance.props.role === 'none' && instance.props.accessible === false,
+      { includeSelf: true }
+    ) ?? [];
+
+  if (!pressable) {
+    throw new Error('Expected outer TextInput Pressable');
+  }
+
+  return pressable;
+};
+
+const getConstantsOriginal = I18nManager.getConstants.bind(I18nManager);
+
+beforeAll(() => {
+  jest.spyOn(I18nManager, 'getConstants').mockImplementation(() => ({
+    ...getConstantsOriginal(),
+    isRTL: I18nManager.isRTL,
+  }));
+});
+
+afterAll(() => {
+  jest.restoreAllMocks();
+});
+
+afterEach(() => {
+  I18nManager.isRTL = defaultI18nIsRTL;
+});
+
+function firstIndexOfTestIdInTree(tree: unknown, testID: string): number {
+  const serialized = JSON.stringify(tree);
+  const match = new RegExp(`"testID":\\s*"${testID}"`).exec(serialized);
+  return match ? match.index : -1;
+}
+
+/** Locates a Text node whose children are serialized as a one-element JSON string array. */
+function firstIndexOfTextChildArrayInTree(tree: unknown, text: string): number {
+  return JSON.stringify(tree).indexOf(JSON.stringify([text]));
+}
+
+it('renders filled TextInput with label and value', async () => {
+  const tree = (
+    await render(
+      <TextInput label="Email" value="a@b.co" onChangeText={() => {}} />
+    )
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders outlined TextInput with label and value', async () => {
+  const tree = (
+    await render(
+      <TextInput
+        variant="outlined"
+        label="Password"
+        value="secret"
+        onChangeText={() => {}}
+      />
+    )
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders filled TextInput with TextInput.Icon accessories', async () => {
+  const tree = (
+    await render(
+      <TextInput
+        label="Search"
+        value="q"
+        onChangeText={() => {}}
+        startAccessory={(props: TextInputAccessoryProps) => (
+          <TextInput.Icon {...props} icon="magnify" iconColor="#49454F" />
+        )}
+        endAccessory={(props: TextInputAccessoryProps) => (
+          <TextInput.Icon {...props} icon="close" iconColor="#49454F" />
+        )}
+      />
+    )
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
 });
 
-const affixTextValue = '/100';
-it('correctly renders left-side icon adornment, and right-side affix adornment', () => {
-  const { getByText, getByTestId, toJSON } = render(
+it('renders outlined TextInput with TextInput.Icon accessories', async () => {
+  const tree = (
+    await render(
+      <TextInput
+        variant="outlined"
+        label="Search"
+        value="q"
+        onChangeText={() => {}}
+        startAccessory={(props: TextInputAccessoryProps) => (
+          <TextInput.Icon {...props} icon="magnify" iconColor="#49454F" />
+        )}
+        endAccessory={(props: TextInputAccessoryProps) => (
+          <TextInput.Icon {...props} icon="close" iconColor="#49454F" />
+        )}
+      />
+    )
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders filled TextInput with TextInput.Icon accessories when error is true', async () => {
+  const tree = (
+    await render(
+      <TextInput
+        label="Search"
+        value="q"
+        onChangeText={() => {}}
+        error
+        startAccessory={(props: TextInputAccessoryProps) => (
+          <TextInput.Icon {...props} icon="magnify" />
+        )}
+        endAccessory={(props: TextInputAccessoryProps) => (
+          <TextInput.Icon {...props} icon="close" onPress={() => {}} />
+        )}
+      />
+    )
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders outlined TextInput with TextInput.Icon accessories when error is true', async () => {
+  const tree = (
+    await render(
+      <TextInput
+        variant="outlined"
+        label="Search"
+        value="q"
+        onChangeText={() => {}}
+        error
+        startAccessory={(props: TextInputAccessoryProps) => (
+          <TextInput.Icon {...props} icon="magnify" />
+        )}
+        endAccessory={(props: TextInputAccessoryProps) => (
+          <TextInput.Icon {...props} icon="close" onPress={() => {}} />
+        )}
+      />
+    )
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it('fires onPress on TextInput.Icon end accessory', async () => {
+  const user = userEvent.setup();
+  const onClear = jest.fn<(event: GestureResponderEvent) => void>();
+  await render(
     <TextInput
-      label="Flat input"
-      placeholder="Type something"
-      value={'Some test value'}
-      left={
+      label="Search"
+      value="x"
+      onChangeText={() => {}}
+      startAccessory={(props: TextInputAccessoryProps) => (
+        <TextInput.Icon {...props} icon="magnify" />
+      )}
+      endAccessory={(props: TextInputAccessoryProps) => (
         <TextInput.Icon
-          icon="heart"
-          onPress={() => {
-            console.log('!@# press left');
-          }}
+          {...props}
+          icon="close"
+          onPress={onClear}
+          aria-label="Clear"
         />
-      }
-      right={
-        <TextInput.Affix text={affixTextValue} textStyle={style.inputStyle} />
-      }
+      )}
     />
   );
-  expect(getByText(affixTextValue)).toBeTruthy();
-  expect(getByTestId('left-icon-adornment')).toBeTruthy();
-  expect(getByTestId('right-affix-adornment')).toBeTruthy();
-  expect(toJSON()).toMatchSnapshot();
+
+  await user.press(screen.getByRole('button', { name: 'Clear' }));
+
+  expect(onClear).toHaveBeenCalledTimes(1);
 });
 
-it('correctly renders left-side affix adornment, and right-side icon adornment', () => {
-  const { getByText, getByTestId, toJSON } = render(
+it('disables TextInput.Icon when the field is disabled', async () => {
+  await render(
     <TextInput
-      label="Flat input"
-      placeholder="Type something"
-      value={'Some test value'}
-      left={
-        <TextInput.Affix text={affixTextValue} textStyle={style.inputStyle} />
-      }
-      right={
-        <TextInput.Icon
-          icon="heart"
-          onPress={() => {
-            console.log('!@# press left');
-          }}
-        />
-      }
+      label="Search"
+      value="x"
+      onChangeText={() => {}}
+      disabled
+      startAccessory={(props: TextInputAccessoryProps) => (
+        <TextInput.Icon {...props} icon="magnify" onPress={() => {}} />
+      )}
+      endAccessory={(props: TextInputAccessoryProps) => (
+        <TextInput.Icon {...props} icon="close" onPress={() => {}} />
+      )}
     />
   );
-  expect(getByText(affixTextValue)).toBeTruthy();
-  expect(getByTestId('right-icon-adornment')).toBeTruthy();
-  expect(getByTestId('left-affix-adornment')).toBeTruthy();
-  expect(toJSON()).toMatchSnapshot();
+
+  const buttons = screen.getAllByRole('button');
+  expect(buttons[0]).toBeDisabled();
+  expect(buttons[1]).toBeDisabled();
 });
 
-it('correctly applies default textAlign based on default RTL', () => {
-  const { toJSON } = render(
+it('does not disable TextInput.Icon when the field is read-only (editable false)', async () => {
+  await render(
     <TextInput
-      label="Flat input"
-      placeholder="Type something"
-      value={'Some test value'}
+      label="Search"
+      value="x"
+      onChangeText={() => {}}
+      editable={false}
+      startAccessory={(props: TextInputAccessoryProps) => (
+        <TextInput.Icon {...props} icon="magnify" onPress={() => {}} />
+      )}
+      endAccessory={(props: TextInputAccessoryProps) => (
+        <TextInput.Icon {...props} icon="close" onPress={() => {}} />
+      )}
     />
   );
 
-  expect(toJSON()).toMatchSnapshot();
+  const buttons = screen.getAllByRole('button');
+  expect(buttons[0]).toBeEnabled();
+  expect(buttons[1]).toBeEnabled();
 });
 
-it('correctly applies textAlign center', () => {
-  const { toJSON } = render(
+it('renders supporting text below the field', async () => {
+  await render(
     <TextInput
-      label="Flat input"
-      placeholder="Type something"
-      value={'Some test value'}
-      style={style.centered}
+      label="Email"
+      value=""
+      onChangeText={() => {}}
+      supportingText="Use a valid address"
     />
   );
 
-  expect(toJSON()).toMatchSnapshot();
+  expect(
+    screen.getByText('Use a valid address', includeHiddenElements)
+  ).toBeOnTheScreen();
 });
 
-it('correctly applies cursorColor prop', () => {
-  const { toJSON } = render(
+it('uses polite aria-live on error supporting text', async () => {
+  await render(
     <TextInput
-      label="Flat input"
-      placeholder="Type something"
-      value={'Some test value'}
-      cursorColor={red500 as string}
+      label="Email"
+      value=""
+      onChangeText={() => {}}
+      supportingText="Invalid"
+      error
+      testID="tf-input"
     />
   );
 
-  expect(toJSON()).toMatchSnapshot();
+  expect(screen.getByText('Invalid')).toHaveProp('aria-live', 'polite');
+  expect(screen.getByLabelText('Email')).toHaveProp('aria-invalid', true);
 });
 
-it('correctly applies height to multiline Outline TextInput', () => {
-  const { toJSON } = render(
+it('marks the input invalid when error is true without supporting text', async () => {
+  await render(
     <TextInput
-      mode="outlined"
-      label="Outline Input"
-      placeholder="Type Something"
-      value={'Some test value'}
-      style={style.height}
-      multiline
+      label="Email"
+      value=""
+      onChangeText={() => {}}
+      error
+      testID="tf-input"
     />
   );
 
-  expect(toJSON()).toMatchSnapshot();
+  const input = screen.getByLabelText('Email');
+  expect(input).toHaveProp('aria-invalid', true);
+  expect(input).not.toHaveProp('accessibilityHint');
 });
 
-it('correctly applies error state Outline TextInput', () => {
-  const { getByTestId } = render(
+it('hides helper supporting text from the accessibility tree and omits aria-live', async () => {
+  await render(
     <TextInput
-      mode="outlined"
-      label="Outline Input with error"
-      placeholder="Type Something"
-      value={'Some test value'}
-      error
+      label="Email"
+      value=""
+      onChangeText={() => {}}
+      supportingText="Optional"
+      testID="tf-input"
     />
   );
 
-  const outline = getByTestId('text-input-outline');
-  expect(outline).toHaveStyle({ borderWidth: 2 });
+  const supportingText = screen.getByText('Optional', includeHiddenElements);
+  expect(supportingText).toHaveProp('aria-hidden', true);
+  expect(supportingText).not.toHaveProp('aria-live');
+  expect(screen.getByLabelText('Email, Optional')).toBeOnTheScreen();
 });
 
-it('correctly applies focused state Outline TextInput', () => {
-  const { getByTestId } = render(
+it('includes supporting text in aria-label when label is omitted', async () => {
+  await render(
     <TextInput
-      mode="outlined"
-      label="Outline Input with error"
-      placeholder="Type Something"
-      value={'Some test value'}
-      error
+      value=""
+      onChangeText={() => {}}
+      supportingText="Helper only"
+      testID="tf-input"
     />
   );
 
-  const outline = getByTestId('text-input-outline');
-  expect(outline).toHaveStyle({ borderWidth: 2 });
+  expect(screen.getByLabelText('Helper only')).toBeOnTheScreen();
+});
 
-  fireEvent(getByTestId('text-input-outlined'), 'focus');
+it('does not mark the input as aria-disabled when editable is false (read-only)', async () => {
+  await render(
+    <TextInput
+      label="Email"
+      value="x"
+      onChangeText={() => {}}
+      editable={false}
+      testID="tf-input"
+    />
+  );
 
-  expect(outline).toHaveStyle({ borderWidth: 2 });
+  expect(screen.getByLabelText('Email')).toHaveProp('aria-disabled', false);
 });
 
-it('contains patch spacing for flat input when ios, multiline and disabled', () => {
-  Platform.OS = 'ios';
-  const { getByTestId } = render(
+it('marks the input as aria-disabled when disabled is true', async () => {
+  await render(
     <TextInput
-      label="Flat input"
-      multiline
-      placeholder="Type something"
-      value={'Some test value'}
+      label="Email"
+      value="x"
+      onChangeText={() => {}}
+      disabled
+      testID="tf-input"
     />
   );
-  expect(getByTestId('patch-container')).toBeTruthy();
+
+  expect(screen.getByLabelText('Email')).toBeDisabled();
 });
 
-it('correctly applies a component as the text label', () => {
-  const { toJSON } = render(
+it('renders the input via render with merged props', async () => {
+  const renderInput = jest.fn((props: TextInputRenderProps) => (
+    <NativeTextInput {...props} testID="custom-input" />
+  ));
+
+  await render(
     <TextInput
-      label={<Text style={style.inputStyle}>Flat input</Text>}
-      placeholder="Type something"
-      value={'Some test value'}
+      label="Pin"
+      value="12"
+      onChangeText={() => {}}
+      render={renderInput}
     />
   );
 
-  expect(toJSON()).toMatchSnapshot();
+  expect(screen.getByTestId('custom-input')).toBeOnTheScreen();
+  expect(renderInput).toHaveBeenCalled();
+  const merged = renderInput.mock.calls[0]?.[0];
+  if (!merged) {
+    throw new Error('Expected the custom input renderer to be called.');
+  }
+  expect(merged['aria-label']).toBe('Pin');
+  expect(merged.value).toBe('12');
 });
 
-it('correctly applies paddingLeft from contentStyleProp', () => {
-  const { toJSON } = render(
+it('does not apply disabled opacity to the TextInput when editable is false (filled)', async () => {
+  await render(
     <TextInput
-      label="With padding"
-      placeholder="Type something"
-      value={'Some test value'}
-      contentStyle={style.contentStyle}
+      label="Email"
+      value="x"
+      onChangeText={() => {}}
+      editable={false}
+      testID="tf-input-ro"
     />
   );
 
-  expect(toJSON()).toMatchSnapshot();
+  expect(screen.getByTestId('tf-input-ro')).not.toHaveStyle({
+    opacity: stateOpacity.disabled,
+  });
 });
 
-it('renders label with correct color when active', () => {
-  const { getByTestId } = render(
+it('does not apply disabled opacity to the TextInput when editable is false (outlined)', async () => {
+  await render(
     <TextInput
-      label="Flat input"
-      placeholder="Type something"
-      value={'Some test value'}
-      testID={'text-input-flat'}
+      variant="outlined"
+      label="Email"
+      value="x"
+      onChangeText={() => {}}
+      editable={false}
+      testID="tf-input-ro-out"
     />
   );
 
-  fireEvent(getByTestId('text-input-flat'), 'focus');
-
-  expect(getByTestId('text-input-flat-label-active')).toHaveStyle({
-    color: getTheme().colors.primary,
+  expect(screen.getByTestId('tf-input-ro-out')).not.toHaveStyle({
+    opacity: stateOpacity.disabled,
   });
 });
 
-it('renders label with correct color when inactive', () => {
-  const { getByTestId } = render(
+it('applies disabled opacity to the TextInput when disabled is true (filled)', async () => {
+  await render(
     <TextInput
-      label="Flat input"
-      placeholder="Type something"
-      value={'Some test value'}
-      testID={'text-input'}
+      label="Email"
+      value="x"
+      onChangeText={() => {}}
+      disabled
+      testID="tf-input-dis"
     />
   );
 
-  expect(getByTestId('text-input-label-inactive')).toHaveStyle({
-    color: getTheme().colors.onSurfaceVariant,
+  expect(screen.getByTestId('tf-input-dis')).toHaveStyle({
+    opacity: stateOpacity.disabled,
   });
 });
 
-it('renders input placeholder initially with transparent placeholderTextColor', () => {
-  const { getByTestId } = render(
-    <TextInput multiline label="Multiline input" testID={'text-input'} />
+it('applies disabled opacity to the TextInput when disabled is true (outlined)', async () => {
+  await render(
+    <TextInput
+      variant="outlined"
+      label="Email"
+      value="x"
+      onChangeText={() => {}}
+      disabled
+      testID="tf-input-dis-out"
+    />
   );
 
-  expect(getByTestId('text-input').props.placeholderTextColor).toBe(
-    'transparent'
+  expect(screen.getByTestId('tf-input-dis-out')).toHaveStyle({
+    opacity: stateOpacity.disabled,
+  });
+});
+
+it('forwards TextInput props such as testID', async () => {
+  await render(
+    <TextInput
+      label="Email"
+      value=""
+      onChangeText={() => {}}
+      testID="email-input"
+    />
   );
+
+  expect(screen.getByTestId('email-input')).toBeOnTheScreen();
 });
 
-it('correctly applies padding offset to input label on Android when RTL', () => {
-  Platform.OS = 'android';
-  I18nManager.isRTL = true;
+/* TextInput peels these before spreading onto TextInput (see TextInput.tsx).
+ * Custom layout / sub-component styling props are intentionally not supported. */
+it('does not pass TextInput-only props through to TextInput', async () => {
+  await render(
+    <TextInput
+      variant="outlined"
+      label="Email"
+      value=""
+      onChangeText={() => {}}
+      error
+      disabled
+      testID="tf-native"
+    />
+  );
 
-  const { getByTestId } = render(
+  const input = screen.getByTestId('tf-native');
+  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+  expect(input.props.variant).toBeUndefined();
+  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+  expect(input.props.theme).toBeUndefined();
+  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+  expect(input.props.startAccessory).toBeUndefined();
+  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+  expect(input.props.endAccessory).toBeUndefined();
+  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+  expect(input.props.label).toBeUndefined();
+  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+  expect(input.props.supportingText).toBeUndefined();
+  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+  expect(input.props.prefix).toBeUndefined();
+  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+  expect(input.props.suffix).toBeUndefined();
+  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+  expect(input.props.counter).toBeUndefined();
+  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+  expect(input.props.error).toBeUndefined();
+  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+  expect(input.props.disabled).toBeUndefined();
+});
+
+it('shows a character counter when counter is true and maxLength is set (filled)', async () => {
+  await render(
     <TextInput
-      label="Flat input"
-      mode="flat"
-      testID="text-input-flat"
-      left={
-        <TextInput.Affix text={affixTextValue} textStyle={style.inputStyle} />
-      }
-      right={
-        <TextInput.Affix text={affixTextValue} textStyle={style.inputStyle} />
-      }
+      label="Bio"
+      value="hello"
+      onChangeText={() => {}}
+      counter
+      maxLength={100}
     />
   );
 
-  expect(getByTestId('text-input-flat-label-active')).toHaveStyle({
-    paddingLeft: 56,
-    paddingRight: 16,
-  });
+  expect(screen.getByText('5/100')).toBeOnTheScreen();
+  expect(screen.queryByText('0/100')).not.toBeOnTheScreen();
+});
 
-  I18nManager.isRTL = false;
+it('shows a character counter when counter is true and maxLength is set (outlined)', async () => {
+  await render(
+    <TextInput
+      variant="outlined"
+      label="Bio"
+      value=""
+      onChangeText={() => {}}
+      counter
+      maxLength={50}
+    />
+  );
+
+  expect(screen.getByText('0/50')).toBeOnTheScreen();
 });
 
-it('correctly applies padding offset to input label on Android when LTR', () => {
-  Platform.OS = 'android';
+it('updates the character counter when the value changes', async () => {
+  const { rerender } = await render(
+    <TextInput
+      label="Bio"
+      value="a"
+      onChangeText={() => {}}
+      counter
+      maxLength={10}
+    />
+  );
+
+  expect(screen.getByText('1/10')).toBeOnTheScreen();
 
-  const { getByTestId } = render(
+  await rerender(
     <TextInput
-      label="Flat input"
-      mode="flat"
-      testID="text-input-flat"
-      left={
-        <TextInput.Affix text={affixTextValue} textStyle={style.inputStyle} />
-      }
-      right={
-        <TextInput.Affix text={affixTextValue} textStyle={style.inputStyle} />
-      }
+      label="Bio"
+      value="abcd"
+      onChangeText={() => {}}
+      counter
+      maxLength={10}
     />
   );
 
-  expect(getByTestId('text-input-flat-label-active')).toHaveStyle({
-    paddingLeft: 16,
-    paddingRight: 56,
-  });
+  expect(screen.getByText('4/10')).toBeOnTheScreen();
 });
 
-it('calls onLayout on right-side affix adornment', () => {
-  const onLayoutMock = jest.fn();
-  const nativeEventMock = {
-    nativeEvent: { layout: { height: 100 } },
-  };
+it('does not show a character counter when counter is false', async () => {
+  await render(
+    <TextInput
+      label="Bio"
+      value="hello"
+      onChangeText={() => {}}
+      maxLength={100}
+    />
+  );
+
+  expect(screen.queryByText('5/100')).not.toBeOnTheScreen();
+});
 
-  const { getByTestId } = render(
+it('does not show a character counter when maxLength is missing', async () => {
+  await render(
+    <TextInput label="Bio" value="hello" onChangeText={() => {}} counter />
+  );
+
+  expect(screen.queryByText('5/100')).not.toBeOnTheScreen();
+  expect(screen.queryByText(/\//)).not.toBeOnTheScreen();
+});
+
+it('invokes onFocus and onBlur on the TextInput', async () => {
+  const onFocus = jest.fn();
+  const onBlur = jest.fn();
+  await render(
     <TextInput
-      label="Flat input"
-      placeholder="Type something"
-      value={'Some test value'}
-      right={<TextInput.Affix text={affixTextValue} onLayout={onLayoutMock} />}
+      label="Email"
+      value=""
+      onChangeText={() => {}}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      testID="tf-input"
     />
   );
-  fireEvent(
-    getByTestId('right-affix-adornment-text'),
-    'onLayout',
-    nativeEventMock
+
+  const input = screen.getByTestId('tf-input');
+  await fireEvent(input, 'focus');
+  await fireEvent(input, 'blur');
+
+  expect(onFocus).toHaveBeenCalledTimes(1);
+  expect(onBlur).toHaveBeenCalledTimes(1);
+});
+
+it('focuses the TextInput when the outer Pressable is pressed', async () => {
+  const user = userEvent.setup();
+  const focusSpy = jest.spyOn(NativeTextInput.prototype, 'focus');
+
+  const { root } = await render(
+    <TextInput
+      label="Email"
+      value=""
+      onChangeText={() => {}}
+      testID="tf-input"
+    />
   );
-  expect(onLayoutMock).toHaveBeenCalledWith(nativeEventMock);
+
+  expect(screen.getByTestId('tf-input')).toBeOnTheScreen();
+
+  await user.press(getOuterTextInputPressable(root));
+
+  expect(focusSpy).toHaveBeenCalled();
+  focusSpy.mockRestore();
 });
 
-(['outlined', 'flat'] as const).forEach((mode) =>
-  it(`renders ${mode} input with correct line height`, () => {
-    const input = render(
-      <TextInput
-        mode={mode}
-        multiline
-        label="Flat input"
-        testID={`text-input-${mode}`}
-        style={style.lineHeight}
-      />
-    );
+it('does not focus the TextInput when disabled and the Pressable is pressed', async () => {
+  const user = userEvent.setup();
+  const focusSpy = jest.spyOn(NativeTextInput.prototype, 'focus');
 
-    expect(input.getByTestId(`text-input-${mode}`)).toHaveStyle({
-      lineHeight: 22,
-    });
-  })
-);
+  const { root } = await render(
+    <TextInput label="Email" value="" onChangeText={() => {}} disabled />
+  );
 
-(['outlined', 'flat'] as const).forEach((mode) =>
-  it(`renders ${mode} input with passed textColor`, () => {
-    const input = render(
-      <TextInput
-        mode={mode}
-        multiline
-        label="Flat input"
-        testID={`text-input-${mode}`}
-        style={style.lineHeight}
-        textColor={'purple'}
-      />
-    );
-
-    expect(input.getByTestId(`text-input-${mode}`)).toHaveStyle({
-      color: 'purple',
-    });
-  })
-);
-
-it("correctly applies theme background to label when input's background is transparent", () => {
-  const backgroundColor = 'transparent';
-  const theme = {
-    ...DefaultTheme,
-    colors: {
-      ...DefaultTheme.colors,
-      background: 'pink',
-    },
-  };
-
-  const { getByTestId } = render(
-    <ThemeProvider theme={theme}>
-      <TextInput
-        mode="outlined"
-        label="Transparent input"
-        value={'Some test value'}
-        style={{ backgroundColor }}
-        testID={'transparent-example'}
-      />
-    </ThemeProvider>
+  await user.press(getOuterTextInputPressable(root));
+
+  expect(focusSpy).not.toHaveBeenCalled();
+  focusSpy.mockRestore();
+});
+
+it('focuses the TextInput when read-only and the Pressable is pressed', async () => {
+  const user = userEvent.setup();
+  const focusSpy = jest.spyOn(NativeTextInput.prototype, 'focus');
+
+  const { root } = await render(
+    <TextInput
+      label="Email"
+      value=""
+      onChangeText={() => {}}
+      editable={false}
+    />
   );
 
-  expect(getByTestId('transparent-example-label-background')).toHaveStyle({
-    backgroundColor: 'pink',
-  });
+  await user.press(getOuterTextInputPressable(root));
+
+  expect(focusSpy).toHaveBeenCalled();
+  focusSpy.mockRestore();
 });
 
-it('always applies line height for web, even if not specified', () => {
-  Platform.OS = 'web';
-  const { getByTestId } = render(
-    <View>
-      <TextInput
-        mode="outlined"
-        label="Default font outlined"
-        value="Some test value"
-        testID="default-font"
-      />
-      <TextInput
-        mode="flat"
-        label="Default font outlined - flat"
-        value="Some test value"
-        testID="default-font-flat"
-      />
-      <TextInput
-        mode="outlined"
-        label="Large font outlined"
-        value="Some test value"
-        testID="large-font"
-        style={{
-          fontSize: 30,
-        }}
-      />
-      <TextInput
-        mode="outlined"
-        label="Large font outlined - flat"
-        value="Some test value"
-        testID="large-font-flat"
-        style={{
-          fontSize: 30,
-        }}
-      />
-      <TextInput
-        mode="outlined"
-        label="Custom line height outlined"
-        value="Some test value"
-        testID="custom-line-height"
-        style={{
-          fontSize: 40,
-          lineHeight: 29,
-        }}
-      />
-      <TextInput
-        mode="outlined"
-        label="Custom line height outlined - flat"
-        value="Some test value"
-        testID="custom-line-height-flat"
-        style={{
-          fontSize: 40,
-          lineHeight: 29,
-        }}
-      />
-    </View>
+it('exposes the TextInput instance via ref prop', async () => {
+  const ref = React.createRef<TextInputHandles>();
+
+  await render(
+    <TextInput
+      ref={ref}
+      label="Email"
+      value=""
+      onChangeText={() => {}}
+      testID="tf-input"
+    />
   );
 
-  expect(getByTestId('default-font')).toHaveStyle({ lineHeight: 16 * 1.2 });
-  expect(getByTestId('default-font-flat')).toHaveStyle({
-    lineHeight: 16 * 1.2,
-  });
+  expect(ref.current).toBeTruthy();
+  expect(typeof ref.current?.focus).toBe('function');
+  expect(typeof ref.current?.clear).toBe('function');
+  expect(typeof ref.current?.blur).toBe('function');
+  expect(typeof ref.current?.isFocused).toBe('function');
+  expect(typeof ref.current?.setNativeProps).toBe('function');
+  expect(typeof ref.current?.setSelection).toBe('function');
+});
+
+it('passes error, disabled, and multiline to accessories', async () => {
+  const startAccessoryProps: TextInputAccessoryProps[] = [];
+  const endAccessoryProps: TextInputAccessoryProps[] = [];
+
+  function StartAccessory(props: TextInputAccessoryProps) {
+    startAccessoryProps.push(props);
+    return <View testID="start-accessory" />;
+  }
 
-  expect(getByTestId('large-font')).toHaveStyle({ lineHeight: 30 * 1.2 });
-  expect(getByTestId('large-font-flat')).toHaveStyle({ lineHeight: 30 * 1.2 });
+  function EndAccessory(props: TextInputAccessoryProps) {
+    endAccessoryProps.push(props);
+    return <View testID="end-accessory" />;
+  }
 
-  expect(getByTestId('custom-line-height')).toHaveStyle({
-    lineHeight: 29,
+  await render(
+    <TextInput
+      label="Search"
+      value=""
+      onChangeText={() => {}}
+      multiline
+      error
+      disabled
+      startAccessory={StartAccessory}
+      endAccessory={EndAccessory}
+    />
+  );
+
+  expect(screen.getByTestId('start-accessory')).toBeOnTheScreen();
+  expect(screen.getByTestId('end-accessory')).toBeOnTheScreen();
+  expect(startAccessoryProps[0]).toMatchObject({
+    error: true,
+    disabled: true,
+    multiline: true,
   });
-  expect(getByTestId('custom-line-height-flat')).toHaveStyle({
-    lineHeight: 29,
+  expect(endAccessoryProps[0]).toMatchObject({
+    error: true,
+    disabled: true,
+    multiline: true,
   });
 });
 
-it('call onPress when affix adornment pressed', () => {
-  const affixOnPress = jest.fn();
-  const affixTextValue = '+39';
-  const { getByText, toJSON } = render(
+it('passes error to accessories when the field is disabled', async () => {
+  const startAccessoryProps: TextInputAccessoryProps[] = [];
+
+  function StartAccessory(props: TextInputAccessoryProps) {
+    startAccessoryProps.push(props);
+    return <View testID="start-acc-error-disabled" />;
+  }
+
+  await render(
     <TextInput
-      label="Flat input"
-      placeholder="Enter your phone number"
-      value={''}
-      left={<TextInput.Affix text="+39" onPress={affixOnPress} />}
+      label="Search"
+      value=""
+      onChangeText={() => {}}
+      error
+      disabled
+      startAccessory={StartAccessory}
     />
   );
 
-  fireEvent.press(getByText(affixTextValue));
+  expect(screen.getByTestId('start-acc-error-disabled')).toBeOnTheScreen();
+  expect(startAccessoryProps[0].error).toBe(true);
+  expect(startAccessoryProps[0].disabled).toBe(true);
+});
+
+it('renders supporting text as a Text child', async () => {
+  await render(
+    <TextInput
+      label="Email"
+      value=""
+      onChangeText={() => {}}
+      supportingText="Hint"
+    />
+  );
 
-  expect(getByText(affixTextValue)).toBeTruthy();
-  expect(toJSON()).toMatchSnapshot();
-  expect(affixOnPress).toHaveBeenCalledTimes(1);
+  expect(screen.getByText('Hint', includeHiddenElements)).toBeOnTheScreen();
 });
 
-describe('maxFontSizeMultiplier', () => {
-  const createInput = (
-    type: Exclude<Props['mode'], undefined>,
-    maxFontSizeMultiplier?: Props['maxFontSizeMultiplier']
-  ) => {
-    return (
-      <TextInput mode={type} maxFontSizeMultiplier={maxFontSizeMultiplier} />
-    );
-  };
+it('renders the counter as a Text child', async () => {
+  await render(
+    <TextInput
+      label="Bio"
+      value="hi"
+      onChangeText={() => {}}
+      counter
+      maxLength={80}
+    />
+  );
 
-  it('should have default value in flat input', () => {
-    const { getByTestId } = render(createInput('flat'));
+  expect(screen.getByText('2/80')).toBeOnTheScreen();
+});
 
-    expect(getByTestId('text-input-flat').props.maxFontSizeMultiplier).toBe(
-      1.5
-    );
-  });
+it('renders supporting text and counter separately when both are shown', async () => {
+  await render(
+    <TextInput
+      label="Bio"
+      value="x"
+      onChangeText={() => {}}
+      supportingText="Help text"
+      counter
+      maxLength={10}
+    />
+  );
 
-  it('should have default value in outlined input', () => {
-    const { getByTestId } = render(createInput('outlined'));
+  expect(
+    screen.getByText('Help text', includeHiddenElements)
+  ).toBeOnTheScreen();
+  expect(screen.getByText('1/10')).toBeOnTheScreen();
+});
 
-    expect(getByTestId('text-input-outlined').props.maxFontSizeMultiplier).toBe(
-      1.5
-    );
-  });
+it('applies RTL text alignment and writing direction to the TextInput (filled)', async () => {
+  I18nManager.isRTL = true;
 
-  it('should have correct passed value in flat input', () => {
-    const { getByTestId } = render(createInput('flat', 2));
+  await render(
+    <TextInput
+      label="Email"
+      value="x"
+      onChangeText={() => {}}
+      testID="tf-input-rtl"
+    />
+  );
 
-    expect(getByTestId('text-input-flat').props.maxFontSizeMultiplier).toBe(2);
+  expect(screen.getByTestId('tf-input-rtl')).toHaveStyle({
+    textAlign: 'right',
+    writingDirection: 'rtl',
   });
+});
+
+it('applies RTL text alignment and writing direction to the TextInput (outlined)', async () => {
+  I18nManager.isRTL = true;
 
-  it('should have correct passed value in outlined input', () => {
-    const { getByTestId } = render(createInput('outlined', 2));
+  await render(
+    <TextInput
+      variant="outlined"
+      label="Email"
+      value="x"
+      onChangeText={() => {}}
+      testID="tf-input-rtl-outlined"
+    />
+  );
 
-    expect(getByTestId('text-input-outlined').props.maxFontSizeMultiplier).toBe(
-      2
-    );
+  expect(screen.getByTestId('tf-input-rtl-outlined')).toHaveStyle({
+    textAlign: 'right',
+    writingDirection: 'rtl',
   });
+});
 
-  it('should have passed null value in flat input', () => {
-    const { getByTestId } = render(createInput('flat', null));
+it('applies RTL writing direction to supporting text', async () => {
+  I18nManager.isRTL = true;
 
-    expect(getByTestId('text-input-flat').props.maxFontSizeMultiplier).toBe(
-      null
-    );
+  await render(
+    <TextInput
+      label="Email"
+      value=""
+      onChangeText={() => {}}
+      supportingText="Hint"
+    />
+  );
+
+  expect(screen.getByText('Hint', includeHiddenElements)).toHaveStyle({
+    writingDirection: 'rtl',
   });
+});
 
-  it('should have passed null value in outlined input', () => {
-    const { getByTestId } = render(createInput('outlined', null));
+it('places EndAccessory before StartAccessory in the tree when RTL', async () => {
+  I18nManager.isRTL = true;
 
-    expect(getByTestId('text-input-outlined').props.maxFontSizeMultiplier).toBe(
-      null
-    );
-  });
+  function StartAccessory() {
+    return <View testID="rtl-acc-from-start-prop" />;
+  }
+
+  function EndAccessory() {
+    return <View testID="rtl-acc-from-end-prop" />;
+  }
+
+  const { toJSON } = await render(
+    <TextInput
+      label="Email"
+      value=""
+      onChangeText={() => {}}
+      startAccessory={StartAccessory}
+      endAccessory={EndAccessory}
+      testID="tf-input-rtl-order"
+    />
+  );
+
+  const tree = toJSON();
+  expect(firstIndexOfTestIdInTree(tree, 'rtl-acc-from-end-prop')).toBeLessThan(
+    firstIndexOfTestIdInTree(tree, 'rtl-acc-from-start-prop')
+  );
 });
 
-describe('getFlatInputColor - underline color', () => {
-  it('should return correct disabled color, for theme version 3', () => {
-    expect(
-      getFlatInputColors({
-        disabled: true,
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      underlineColorCustom: getTheme().colors.onSurfaceDisabled,
-    });
-  });
+it('places StartAccessory before EndAccessory in the tree when LTR', async () => {
+  I18nManager.isRTL = false;
 
-  it('should return correct disabled color, for theme version 2', () => {
-    expect(
-      getFlatInputColors({
-        disabled: true,
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      underlineColorCustom: 'transparent',
-    });
-  });
+  function StartAccessory() {
+    return <View testID="ltr-acc-from-start-prop" />;
+  }
 
-  it('should return correct theme color, for theme version 3', () => {
-    expect(
-      getFlatInputColors({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      underlineColorCustom: getTheme().colors.onSurfaceVariant,
-    });
-  });
+  function EndAccessory() {
+    return <View testID="ltr-acc-from-end-prop" />;
+  }
 
-  it('should return correct theme color, for theme version 2', () => {
-    expect(
-      getFlatInputColors({
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      underlineColorCustom: getTheme(false, false).colors.disabled,
-    });
-  });
+  const { toJSON } = await render(
+    <TextInput
+      label="Email"
+      value=""
+      onChangeText={() => {}}
+      startAccessory={StartAccessory}
+      endAccessory={EndAccessory}
+      testID="tf-input-ltr-order"
+    />
+  );
 
-  it('should return custom color, no matter what the theme is', () => {
-    expect(
-      getFlatInputColors({
-        underlineColor: 'beige',
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      underlineColorCustom: 'beige',
-    });
-
-    expect(
-      getFlatInputColors({
-        underlineColor: 'beige',
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      underlineColorCustom: 'beige',
-    });
-  });
+  const tree = toJSON();
+  expect(
+    firstIndexOfTestIdInTree(tree, 'ltr-acc-from-start-prop')
+  ).toBeLessThan(firstIndexOfTestIdInTree(tree, 'ltr-acc-from-end-prop'));
 });
 
-describe('getFlatInputColor - input text color', () => {
-  it('should return custom color, if not disabled, no matter what the theme is', () => {
-    expect(
-      getOutlinedInputColors({
-        textColor: 'beige',
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      inputTextColor: 'beige',
-    });
-
-    expect(
-      getOutlinedInputColors({
-        textColor: 'beige',
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      inputTextColor: 'beige',
-    });
-  });
+it('does not expose the placeholder string when the TextInput is not focused', async () => {
+  await render(
+    <TextInput
+      label="Email"
+      value=""
+      onChangeText={() => {}}
+      placeholder="e.g. user@example.com"
+      testID="tf-input"
+    />
+  );
 
-  it('should return correct disabled color, for theme version 3', () => {
-    expect(
-      getFlatInputColors({
-        disabled: true,
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      inputTextColor: getTheme().colors.onSurfaceDisabled,
-    });
-  });
+  /* Sentinel space avoids iOS multiline UITextView not updating placeholder from nil (react-native#31573). */
+  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+  expect(screen.getByTestId('tf-input').props.placeholder).toBe(' ');
+});
 
-  it('should return correct disabled color, for theme version 2', () => {
-    expect(
-      getFlatInputColors({
-        disabled: true,
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      inputTextColor: color(getTheme(false, false).colors?.text)
-        .alpha(0.54)
-        .rgb()
-        .string(),
-    });
-  });
+it('shows placeholder when unfocused and no label is given', async () => {
+  await render(
+    <TextInput
+      value=""
+      onChangeText={() => {}}
+      placeholder="Search"
+      testID="tf-input-no-label"
+    />
+  );
 
-  it('should return correct theme color, for theme version 3', () => {
-    expect(
-      getFlatInputColors({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      inputTextColor: getTheme().colors.onSurface,
-    });
-  });
+  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+  expect(screen.getByTestId('tf-input-no-label').props.placeholder).toBe(
+    'Search'
+  );
+});
 
-  it('should return correct theme color, for theme version 2', () => {
-    expect(
-      getFlatInputColors({
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      inputTextColor: getTheme(false, false).colors.text,
-    });
-  });
+it('shows placeholder when the TextInput is focused', async () => {
+  await render(
+    <TextInput
+      label="Email"
+      value=""
+      onChangeText={() => {}}
+      placeholder="e.g. user@example.com"
+      testID="tf-input"
+    />
+  );
+
+  await fireEvent(screen.getByTestId('tf-input'), 'focus');
+
+  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+  expect(screen.getByTestId('tf-input').props.placeholder).toBe(
+    'e.g. user@example.com'
+  );
 });
 
-describe('getFlatInputColor - placeholder color', () => {
-  it('should return correct disabled color, for theme version 3', () => {
-    expect(
-      getFlatInputColors({
-        disabled: true,
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      placeholderColor: getTheme().colors.onSurfaceDisabled,
-    });
-  });
+it('shows placeholder on multiline TextInput when focused', async () => {
+  await render(
+    <TextInput
+      label="Notes"
+      value=""
+      onChangeText={() => {}}
+      placeholder="Add a note…"
+      multiline
+      testID="tf-multiline"
+    />
+  );
 
-  it('should return correct disabled color, for theme version 2', () => {
-    expect(
-      getFlatInputColors({
-        disabled: true,
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      placeholderColor: getTheme(false, false).colors.disabled,
-    });
-  });
+  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+  expect(screen.getByTestId('tf-multiline').props.placeholder).toBe(' ');
 
-  it('should return correct theme color, for theme version 3', () => {
-    expect(
-      getFlatInputColors({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      placeholderColor: getTheme().colors.onSurfaceVariant,
-    });
-  });
+  await fireEvent(screen.getByTestId('tf-multiline'), 'focus');
 
-  it('should return correct theme color, for theme version 2', () => {
-    expect(
-      getFlatInputColors({
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      placeholderColor: getTheme(false, false).colors.placeholder,
-    });
-  });
+  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+  expect(screen.getByTestId('tf-multiline').props.placeholder).toBe(
+    'Add a note…'
+  );
 });
 
-describe('getFlatInputColor - background color', () => {
-  it('should return correct disabled color, for theme version 3', () => {
-    expect(
-      getFlatInputColors({
-        disabled: true,
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      backgroundColor: color(getTheme().colors.onSurface)
-        .alpha(0.04)
-        .rgb()
-        .string(),
-    });
-    expect(
-      getFlatInputColors({
-        disabled: true,
-        theme: getTheme(true),
-      })
-    ).toMatchObject({
-      backgroundColor: color(getTheme(true).colors.onSurface)
-        .alpha(0.04)
-        .rgb()
-        .string(),
-    });
-  });
+it('does not expose the placeholder string again after the TextInput loses focus', async () => {
+  await render(
+    <TextInput
+      label="Email"
+      value=""
+      onChangeText={() => {}}
+      placeholder="e.g. user@example.com"
+      testID="tf-input"
+    />
+  );
 
-  it('should return undefined when disabled, for theme version 2', () => {
-    expect(
-      getFlatInputColors({
-        disabled: true,
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      backgroundColor: undefined,
-    });
-  });
+  await fireEvent(screen.getByTestId('tf-input'), 'focus');
+  await fireEvent(screen.getByTestId('tf-input'), 'blur');
 
-  it('should return correct theme color, for theme version 3', () => {
-    expect(
-      getFlatInputColors({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      backgroundColor: getTheme().colors.surfaceVariant,
-    });
-  });
+  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+  expect(screen.getByTestId('tf-input').props.placeholder).toBe(' ');
+});
 
-  it('should return correct theme color, for theme version 2, light mode', () => {
-    expect(
-      getFlatInputColors({
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      backgroundColor: color(getTheme(false, false).colors?.background)
-        .darken(0.06)
-        .rgb()
-        .string(),
-    });
-  });
+it('maps a lone StartAccessory to leading in LTR and trailing in RTL (tree order)', async () => {
+  function LoneStartAccessory() {
+    return <View testID="lone-start-acc" />;
+  }
 
-  it('should return correct theme color, for theme version 2, dark mode', () => {
-    expect(
-      getFlatInputColors({
-        theme: getTheme(true, false),
-      })
-    ).toMatchObject({
-      backgroundColor: color(getTheme(true, false).colors?.background)
-        .lighten(0.24)
-        .rgb()
-        .string(),
-    });
-  });
+  I18nManager.isRTL = false;
+
+  const { toJSON: toJsonLtr } = await render(
+    <TextInput
+      label="Email"
+      value=""
+      onChangeText={() => {}}
+      startAccessory={LoneStartAccessory}
+      testID="tf-lone-ltr"
+    />
+  );
+
+  I18nManager.isRTL = true;
+
+  const { toJSON: toJsonRtl } = await render(
+    <TextInput
+      label="Email"
+      value=""
+      onChangeText={() => {}}
+      startAccessory={LoneStartAccessory}
+      testID="tf-lone-rtl"
+    />
+  );
+
+  const ltrTree = toJsonLtr();
+  expect(firstIndexOfTestIdInTree(ltrTree, 'lone-start-acc')).toBeLessThan(
+    firstIndexOfTestIdInTree(ltrTree, 'tf-lone-ltr')
+  );
+
+  const rtlTree = toJsonRtl();
+  expect(firstIndexOfTestIdInTree(rtlTree, 'tf-lone-rtl')).toBeLessThan(
+    firstIndexOfTestIdInTree(rtlTree, 'lone-start-acc')
+  );
 });
 
-describe('getFlatInputColor - error color', () => {
-  it('should return correct error color, no matter what the theme is', () => {
-    expect(
-      getFlatInputColors({
-        error: true,
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      errorColor: getTheme().colors.error,
-    });
-
-    expect(
-      getFlatInputColors({
-        error: true,
-        theme: getTheme(false, true),
-      })
-    ).toMatchObject({
-      errorColor: getTheme(false, true).colors.error,
-    });
-  });
+it('shows prefix and suffix when the field is floating and hides them after value is cleared while blurred', async () => {
+  const { rerender } = await render(
+    <TextInput
+      label="Amount"
+      value="1"
+      onChangeText={() => {}}
+      prefix="$"
+      suffix="/100"
+      testID="tf-ps"
+    />
+  );
+
+  expect(screen.getByText('$')).toBeOnTheScreen();
+  expect(screen.getByText('/100')).toBeOnTheScreen();
+
+  await rerender(
+    <TextInput
+      label="Amount"
+      value=""
+      onChangeText={() => {}}
+      prefix="$"
+      suffix="/100"
+      testID="tf-ps"
+    />
+  );
+
+  expect(screen.queryByText('$')).not.toBeOnTheScreen();
+  expect(screen.queryByText('/100')).not.toBeOnTheScreen();
+  expect(screen.getByTestId('tf-ps')).toBeOnTheScreen();
 });
 
-describe('getFlatInputColor - active color', () => {
-  it('should return disabled color, for theme version 3', () => {
-    expect(
-      getFlatInputColors({
-        disabled: true,
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      activeColor: getTheme().colors.onSurfaceDisabled,
-    });
-  });
+it('renders prefix and suffix while focused even when value is empty', async () => {
+  await render(
+    <TextInput
+      label="Amount"
+      value=""
+      onChangeText={() => {}}
+      prefix="$"
+      suffix=" kg"
+      testID="tf-ps-focus"
+    />
+  );
 
-  it('should return disabled color, for theme version 2', () => {
-    expect(
-      getFlatInputColors({
-        disabled: true,
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      activeColor: color(getTheme(false, false).colors?.text)
-        .alpha(0.54)
-        .rgb()
-        .string(),
-    });
-  });
+  expect(screen.queryByText('$')).not.toBeOnTheScreen();
+  expect(screen.queryByText(' kg')).not.toBeOnTheScreen();
 
-  it('should return correct active color, if error, no matter what the theme is', () => {
-    expect(
-      getFlatInputColors({
-        error: true,
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      activeColor: getTheme().colors.error,
-    });
-
-    expect(
-      getFlatInputColors({
-        error: true,
-        theme: getTheme(false, true),
-      })
-    ).toMatchObject({
-      activeColor: getTheme(false, true).colors.error,
-    });
-  });
+  await fireEvent(screen.getByTestId('tf-ps-focus'), 'focus');
 
-  it('should return custom active color, no matter what the theme is', () => {
-    expect(
-      getFlatInputColors({
-        activeUnderlineColor: 'beige',
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      activeColor: 'beige',
-    });
-
-    expect(
-      getFlatInputColors({
-        activeUnderlineColor: 'beige',
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      activeColor: 'beige',
-    });
-  });
+  expect(screen.getByText('$')).toBeOnTheScreen();
+  expect(screen.getByText(' kg')).toBeOnTheScreen();
+});
 
-  it('should return theme active color, for theme version 3', () => {
-    expect(
-      getFlatInputColors({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      activeColor: getTheme().colors.primary,
-    });
-  });
+it('places prefix Text before the TextInput and suffix Text after it', async () => {
+  const { toJSON } = await render(
+    <TextInput
+      label="Label"
+      value="x"
+      onChangeText={() => {}}
+      prefix="$"
+      suffix="/100"
+      testID="tf-order"
+    />
+  );
 
-  it('should return theme active color, for theme version 2', () => {
-    expect(
-      getFlatInputColors({
-        theme: getTheme(false, true),
-      })
-    ).toMatchObject({
-      activeColor: getTheme(false, true).colors.primary,
-    });
-  });
+  const tree = toJSON();
+  expect(firstIndexOfTextChildArrayInTree(tree, '$')).toBeLessThan(
+    firstIndexOfTestIdInTree(tree, 'tf-order')
+  );
+  expect(firstIndexOfTestIdInTree(tree, 'tf-order')).toBeLessThan(
+    firstIndexOfTextChildArrayInTree(tree, '/100')
+  );
 });
 
-describe('getOutlinedInputColors - outline color', () => {
-  it('should return correct disabled color, for theme version 3, light theme', () => {
-    expect(
-      getOutlinedInputColors({
-        disabled: true,
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      outlineColor: getTheme().colors.surfaceDisabled,
-    });
-  });
+it('aligns input text toward the suffix when suffix is active (LTR)', async () => {
+  await render(
+    <TextInput
+      label="Label"
+      value="5"
+      onChangeText={() => {}}
+      suffix="/100"
+      testID="tf-suffix-align-ltr"
+    />
+  );
 
-  it('should return correct disabled color, for theme version 3, dark theme', () => {
-    expect(
-      getOutlinedInputColors({
-        disabled: true,
-        theme: getTheme(true),
-      })
-    ).toMatchObject({
-      outlineColor: 'transparent',
-    });
+  expect(screen.getByTestId('tf-suffix-align-ltr')).toHaveStyle({
+    textAlign: 'right',
+    writingDirection: 'ltr',
   });
+});
 
-  it('should return correct disabled color, for theme version 2', () => {
-    expect(
-      getOutlinedInputColors({
-        disabled: true,
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      outlineColor: getTheme(false, false).colors.disabled,
-    });
-  });
+it('aligns input text toward the suffix when suffix is active (RTL)', async () => {
+  I18nManager.isRTL = true;
 
-  it('should return custom color as disabled, when it is transparent, for theme version 2', () => {
-    expect(
-      getOutlinedInputColors({
-        disabled: true,
-        customOutlineColor: 'transparent',
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      outlineColor: 'transparent',
-    });
-  });
+  await render(
+    <TextInput
+      label="Label"
+      value="5"
+      onChangeText={() => {}}
+      suffix="/100"
+      testID="tf-suffix-align-rtl"
+    />
+  );
 
-  it('should return custom color, if not disabled, no matter what the theme is', () => {
-    expect(
-      getOutlinedInputColors({
-        customOutlineColor: 'beige',
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      outlineColor: 'beige',
-    });
-
-    expect(
-      getOutlinedInputColors({
-        customOutlineColor: 'beige',
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      outlineColor: 'beige',
-    });
+  expect(screen.getByTestId('tf-suffix-align-rtl')).toHaveStyle({
+    textAlign: 'left',
+    writingDirection: 'rtl',
   });
+});
 
-  it('should return theme color, for theme version 3', () => {
-    expect(
-      getOutlinedInputColors({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      outlineColor: getTheme().colors.outline,
-    });
-  });
+it('uses default horizontal alignment when suffix prop exists but suffix is not shown yet (LTR)', async () => {
+  await render(
+    <TextInput
+      label="Label"
+      value=""
+      onChangeText={() => {}}
+      suffix="/100"
+      testID="tf-no-suffix-yet"
+    />
+  );
 
-  it('should return theme color, for theme version 2', () => {
-    expect(
-      getOutlinedInputColors({
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      outlineColor: getTheme(false, false).colors.placeholder,
-    });
+  expect(screen.getByTestId('tf-no-suffix-yet')).toHaveStyle({
+    textAlign: 'left',
+    writingDirection: 'ltr',
   });
 });
 
-describe('getOutlinedInputColors - input text color', () => {
-  it('should return correct disabled color, for theme version 3', () => {
-    expect(
-      getOutlinedInputColors({
-        disabled: true,
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      inputTextColor: getTheme().colors.onSurfaceDisabled,
-    });
-  });
+it('does not apply the TextInput style prop to prefix or suffix Text', async () => {
+  await render(
+    <TextInput
+      label="Label"
+      value="1"
+      onChangeText={() => {}}
+      prefix="$"
+      suffix="]"
+      style={styles.textInputStyle}
+      testID="tf-input-style"
+    />
+  );
 
-  it('should return correct disabled color, for theme version 2', () => {
-    expect(
-      getOutlinedInputColors({
-        disabled: true,
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      inputTextColor: color(getTheme(false, false).colors?.text)
-        .alpha(0.54)
-        .rgb()
-        .string(),
-    });
+  expect(screen.getByTestId('tf-input-style')).toHaveStyle({
+    fontSize: 40,
+    letterSpacing: 9,
   });
 
-  it('should return correct theme color, for theme version 3', () => {
-    expect(
-      getOutlinedInputColors({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      inputTextColor: getTheme().colors.onSurface,
-    });
-  });
+  expect(screen.getByText('$')).not.toHaveStyle({ fontSize: 40 });
+  expect(screen.getByText('$')).not.toHaveStyle({ letterSpacing: 9 });
+  expect(screen.getByText(']')).not.toHaveStyle({ fontSize: 40 });
+  expect(screen.getByText(']')).not.toHaveStyle({ letterSpacing: 9 });
+});
 
-  it('should return correct theme color, for theme version 2', () => {
-    expect(
-      getOutlinedInputColors({
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      inputTextColor: getTheme(false, false).colors.text,
-    });
-  });
+it('passes defaultValue to the native input when uncontrolled without counter', async () => {
+  await render(
+    <TextInput
+      label="Email"
+      defaultValue="hello"
+      onChangeText={() => {}}
+      testID="tf-uncontrolled"
+    />
+  );
+
+  const input = screen.getByTestId('tf-uncontrolled');
+  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+  expect(input.props.defaultValue).toBe('hello');
+  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+  expect(input.props.value).toBeUndefined();
 });
 
-describe('getOutlinedInputColors - placeholder color', () => {
-  it('should return correct disabled color, for theme version 3', () => {
-    expect(
-      getOutlinedInputColors({
-        disabled: true,
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      placeholderColor: getTheme().colors.onSurfaceDisabled,
-    });
-  });
+it('updates the character counter for an uncontrolled field with counter enabled', async () => {
+  const onChangeText = jest.fn();
+  const user = userEvent.setup();
+  await render(
+    <TextInput
+      label="Bio"
+      defaultValue="a"
+      onChangeText={onChangeText}
+      counter
+      maxLength={10}
+      testID="tf-uncontrolled-counter"
+    />
+  );
 
-  it('should return correct disabled color, for theme version 2', () => {
-    expect(
-      getOutlinedInputColors({
-        disabled: true,
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      placeholderColor: getTheme(false, false).colors.disabled,
-    });
-  });
+  expect(screen.getByText('1/10')).toBeOnTheScreen();
 
-  it('should return correct theme color, for theme version 3', () => {
-    expect(
-      getOutlinedInputColors({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      placeholderColor: getTheme().colors.onSurfaceVariant,
-    });
-  });
+  await user.type(screen.getByTestId('tf-uncontrolled-counter'), 'bcd');
 
-  it('should return correct theme color, for theme version 2', () => {
-    expect(
-      getOutlinedInputColors({
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      placeholderColor: getTheme(false, false).colors.placeholder,
-    });
-  });
+  expect(onChangeText).toHaveBeenCalledWith('abcd');
+  expect(screen.getByText('4/10')).toBeOnTheScreen();
 });
 
-describe('getOutlinedInputColors - error color', () => {
-  it('should return correct error color, no matter what the theme is', () => {
-    expect(
-      getOutlinedInputColors({
-        error: true,
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      errorColor: getTheme().colors.error,
-    });
-
-    expect(
-      getOutlinedInputColors({
-        error: true,
-        theme: getTheme(false, true),
-      })
-    ).toMatchObject({
-      errorColor: getTheme(false, true).colors.error,
-    });
+it('resets counter and hides prefix/suffix when clear() is called on uncontrolled field while blurred', async () => {
+  const ref = React.createRef<TextInputHandles>();
+  await render(
+    <TextInput
+      ref={ref}
+      label="Amount"
+      defaultValue="100"
+      prefix="$"
+      suffix="/100"
+      counter
+      maxLength={200}
+    />
+  );
+
+  expect(screen.getByText('3/200')).toBeOnTheScreen();
+  expect(screen.getByText('$')).toBeOnTheScreen();
+  expect(screen.getByText('/100')).toBeOnTheScreen();
+
+  await act(() => {
+    ref.current?.clear();
   });
+
+  expect(screen.getByText('0/200', includeHiddenElements)).toBeOnTheScreen();
+  expect(screen.queryByText('$')).not.toBeOnTheScreen();
+  expect(screen.queryByText('/100')).not.toBeOnTheScreen();
 });
 
-describe('getOutlinedInputColors - active color', () => {
-  it('should return disabled color, for theme version 3', () => {
-    expect(
-      getOutlinedInputColors({
-        disabled: true,
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      activeColor: getTheme().colors.onSurfaceDisabled,
-    });
-  });
+it('resets counter but keeps prefix/suffix visible when clear() is called on uncontrolled field while focused', async () => {
+  const ref = React.createRef<TextInputHandles>();
+  await render(
+    <TextInput
+      ref={ref}
+      label="Amount"
+      defaultValue="50"
+      prefix="$"
+      suffix=" kg"
+      counter
+      maxLength={100}
+      testID="tf-clear-focused"
+    />
+  );
 
-  it('should return disabled color, for theme version 2', () => {
-    expect(
-      getOutlinedInputColors({
-        disabled: true,
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      activeColor: color(getTheme(false, false).colors?.text)
-        .alpha(0.54)
-        .rgb()
-        .string(),
-    });
-  });
+  expect(screen.getByText('2/100', includeHiddenElements)).toBeOnTheScreen();
+  expect(screen.getByText('$', includeHiddenElements)).toBeOnTheScreen();
+  expect(screen.getByText(' kg', includeHiddenElements)).toBeOnTheScreen();
 
-  it('should return correct active color, if error, no matter what the theme is', () => {
-    expect(
-      getOutlinedInputColors({
-        error: true,
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      activeColor: getTheme().colors.error,
-    });
-
-    expect(
-      getOutlinedInputColors({
-        error: true,
-        theme: getTheme(false, true),
-      })
-    ).toMatchObject({
-      activeColor: getTheme(false, true).colors.error,
-    });
-  });
+  await fireEvent(screen.getByTestId('tf-clear-focused'), 'focus');
 
-  it('should return custom active color, no matter what the theme is', () => {
-    expect(
-      getOutlinedInputColors({
-        activeOutlineColor: 'beige',
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      activeColor: 'beige',
-    });
-
-    expect(
-      getOutlinedInputColors({
-        activeOutlineColor: 'beige',
-        theme: getTheme(false, false),
-      })
-    ).toMatchObject({
-      activeColor: 'beige',
-    });
+  await act(() => {
+    ref.current?.clear();
   });
 
-  it('should return theme active color, for theme version 3', () => {
-    expect(
-      getOutlinedInputColors({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      activeColor: getTheme().colors.primary,
-    });
-  });
+  expect(screen.getByText('0/100', includeHiddenElements)).toBeOnTheScreen();
+  expect(screen.getByText('$', includeHiddenElements)).toBeOnTheScreen();
+  expect(screen.getByText(' kg', includeHiddenElements)).toBeOnTheScreen();
+});
 
-  it('should return theme active color, for theme version 2', () => {
-    expect(
-      getOutlinedInputColors({
-        theme: getTheme(false, true),
-      })
-    ).toMatchObject({
-      activeColor: getTheme(false, true).colors.primary,
-    });
+it('notifies the parent via onChangeText when clear() is called on a controlled field', async () => {
+  const ref = React.createRef<TextInputHandles>();
+  const onChangeText = jest.fn();
+  await render(
+    <TextInput
+      ref={ref}
+      label="Email"
+      value="test@example.com"
+      onChangeText={onChangeText}
+      testID="tf-controlled"
+    />
+  );
+
+  const input = screen.getByTestId('tf-controlled', includeHiddenElements);
+  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+  expect(input.props.value).toBe('test@example.com');
+
+  await act(() => {
+    ref.current?.clear();
   });
+
+  expect(onChangeText).toHaveBeenCalledWith('');
+  expect(onChangeText).toHaveBeenCalledTimes(1);
 });
 
-describe('outlineStyle - underlineStyle', () => {
-  it('correctly applies outline style', () => {
-    const { getByTestId } = render(
-      <TextInput
-        mode="outlined"
-        outlineStyle={{ borderRadius: 16, borderWidth: 6 }}
-      />
-    );
+it('hides prefix/suffix when blurring after clear() was called while focused', async () => {
+  const ref = React.createRef<TextInputHandles>();
+  await render(
+    <TextInput
+      ref={ref}
+      label="Amount"
+      defaultValue="100"
+      prefix="$"
+      suffix="/100"
+      testID="tf-clear-then-blur"
+    />
+  );
 
-    expect(getByTestId('text-input-outline')).toHaveStyle({
-      borderRadius: 16,
-      borderWidth: 6,
-    });
-  });
+  expect(screen.getByText('$', includeHiddenElements)).toBeOnTheScreen();
+  expect(screen.getByText('/100', includeHiddenElements)).toBeOnTheScreen();
 
-  it('correctly applies underline style', () => {
-    const { getByTestId } = render(
-      <TextInput
-        mode="flat"
-        underlineStyle={{ borderRadius: 16, borderWidth: 6 }}
-      />
-    );
+  await fireEvent(screen.getByTestId('tf-clear-then-blur'), 'focus');
 
-    expect(getByTestId('text-input-underline')).toHaveStyle({
-      borderRadius: 16,
-      borderWidth: 6,
-    });
+  await act(() => {
+    ref.current?.clear();
   });
+
+  // While focused, prefix/suffix stay visible
+  expect(screen.getByText('$', includeHiddenElements)).toBeOnTheScreen();
+  expect(screen.getByText('/100', includeHiddenElements)).toBeOnTheScreen();
+
+  await fireEvent(screen.getByTestId('tf-clear-then-blur'), 'blur');
+
+  // After blur with no text, prefix/suffix should be hidden
+  expect(screen.queryByText('$')).not.toBeOnTheScreen();
+  expect(screen.queryByText('/100')).not.toBeOnTheScreen();
 });
diff --git a/src/components/__tests__/ToggleButton.test.tsx b/src/components/__tests__/ToggleButton.test.tsx
deleted file mode 100644
index 3ab234d0f3..0000000000
--- a/src/components/__tests__/ToggleButton.test.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import * as React from 'react';
-import { Animated } from 'react-native';
-
-import { act, render } from '@testing-library/react-native';
-import color from 'color';
-
-import { getTheme } from '../../core/theming';
-import { tokens } from '../../styles/themes/v3/tokens';
-import ToggleButton from '../ToggleButton';
-import { getToggleButtonColor } from '../ToggleButton/utils';
-
-it('renders toggle button', () => {
-  const tree = render(
-    <ToggleButton status="checked" onPress={() => {}} icon="heart" />
-  ).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
-
-it('renders disabled toggle button', () => {
-  const tree = render(
-    <ToggleButton disabled value="toggle" status="checked" icon="heart" />
-  ).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
-
-it('renders unchecked toggle button', () => {
-  const tree = render(
-    <ToggleButton disabled status="unchecked" icon="heart" />
-  ).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
-
-it('render toggle button with custom ripple color', () => {
-  const { getByTestId } = render(
-    <ToggleButton
-      disabled
-      value="toggle"
-      status="checked"
-      icon="heart"
-      testID="toggle-button"
-      rippleColor="purple"
-    />
-  );
-
-  const iconContainer = getByTestId('toggle-button-container').props.children;
-  expect(iconContainer.props.rippleColor).toBe('purple');
-});
-
-describe('getToggleButtonColor', () => {
-  it('should return correct color when checked and theme version 3', () => {
-    expect(getToggleButtonColor({ theme: getTheme(), checked: true })).toBe(
-      color(getTheme().colors.onSecondaryContainer)
-        .alpha(tokens.md.ref.opacity.level2)
-        .rgb()
-        .string()
-    );
-  });
-
-  it('should return correct color when checked and theme version 3, dark theme', () => {
-    expect(getToggleButtonColor({ theme: getTheme(true), checked: true })).toBe(
-      color(getTheme(true).colors.onSecondaryContainer)
-        .alpha(tokens.md.ref.opacity.level2)
-        .rgb()
-        .string()
-    );
-  });
-
-  it('should return correct color when checked and theme version 2', () => {
-    expect(
-      getToggleButtonColor({ theme: getTheme(false, false), checked: true })
-    ).toBe('rgba(0, 0, 0, .08)');
-  });
-
-  it('should return correct color when checked and theme version 2, dark theme', () => {
-    expect(
-      getToggleButtonColor({ theme: getTheme(true, false), checked: true })
-    ).toBe('rgba(255, 255, 255, .12)');
-  });
-
-  it('should return transparent color when not checked', () => {
-    expect(getToggleButtonColor({ theme: getTheme(), checked: false })).toBe(
-      'transparent'
-    );
-  });
-});
-
-it('animated value changes correctly', () => {
-  const value = new Animated.Value(1);
-  const { getByTestId } = render(
-    <ToggleButton
-      disabled
-      status="unchecked"
-      icon="heart"
-      testID="toggle-button"
-      style={[{ transform: [{ scale: value }] }]}
-    />
-  );
-  expect(getByTestId('toggle-button-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1 }],
-  });
-
-  Animated.timing(value, {
-    toValue: 1.5,
-    useNativeDriver: false,
-    duration: 200,
-  }).start();
-
-  act(() => {
-    jest.advanceTimersByTime(200);
-  });
-  expect(getByTestId('toggle-button-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1.5 }],
-  });
-});
diff --git a/src/components/__tests__/Tooltip.test.tsx b/src/components/__tests__/Tooltip.test.tsx
index 075b534ba6..2888803613 100644
--- a/src/components/__tests__/Tooltip.test.tsx
+++ b/src/components/__tests__/Tooltip.test.tsx
@@ -1,10 +1,20 @@
-import React, { RefObject } from 'react';
+import React from 'react';
 import { Dimensions, Text, View, Platform } from 'react-native';
-
-import { act, fireEvent, render } from '@testing-library/react-native';
-import type { ReactTestInstance } from 'react-test-renderer';
+import type { ViewProps } from 'react-native';
+
+import {
+  afterAll,
+  afterEach,
+  beforeAll,
+  describe,
+  expect,
+  it,
+  jest,
+} from '@jest/globals';
+import { act, fireEvent, userEvent } from '@testing-library/react-native';
 
 import PaperProvider from '../../core/PaperProvider';
+import { render } from '../../test-utils';
 import Tooltip from '../Tooltip/Tooltip';
 
 const mockedRemoveEventListener = jest.fn();
@@ -15,18 +25,34 @@ jest.mock('../../utils/addEventListener', () => ({
   }),
 }));
 
-const DummyComponent = React.forwardRef<View>((props, ref) => (
-  <View {...props} ref={ref as RefObject<View>}>
+const DummyComponent = ({
+  ref,
+  ...props
+}: ViewProps & {
+  ref?: React.RefObject<View | null>;
+}) => (
+  <View {...props} ref={ref}>
     <Text>dummy component</Text>
   </View>
-));
+);
 
 describe('Tooltip', () => {
-  const getTrigger = (getByText: (text: string) => ReactTestInstance) =>
-    getByText('dummy component').parent as ReactTestInstance;
+  const getTrigger = (
+    getByText: Awaited<ReturnType<typeof render>>['getByText']
+  ) => {
+    const trigger = getByText('dummy component', {
+      includeHiddenElements: true,
+    }).parent;
+
+    if (!trigger) {
+      throw new Error('Expected Tooltip trigger wrapper');
+    }
+
+    return trigger;
+  };
 
-  const runTimers = (ms?: number) => {
-    act(() => {
+  const runTimers = async (ms?: number) => {
+    await act(() => {
       if (ms === undefined) {
         jest.runOnlyPendingTimers();
       } else {
@@ -35,7 +61,7 @@ describe('Tooltip', () => {
     });
   };
 
-  const setup = (
+  const setup = async (
     propOverrides?: Partial<React.ComponentProps<typeof Tooltip>>,
     measure = {}
   ) => {
@@ -59,7 +85,7 @@ describe('Tooltip', () => {
       .spyOn(View.prototype, 'measure')
       .mockImplementation((cb) => cb(x, y, width, height, pageX, pageY));
 
-    const wrapper = render(
+    const wrapper = await render(
       <PaperProvider>
         <Tooltip {...defaultProps} />
       </PaperProvider>
@@ -76,17 +102,21 @@ describe('Tooltip', () => {
       jest.clearAllMocks();
     });
     describe('Unmount', () => {
-      beforeAll(() => jest.spyOn(global, 'clearTimeout'));
-      afterEach(() => jest.clearAllMocks());
+      beforeAll(() => {
+        jest.spyOn(global, 'clearTimeout');
+      });
+      afterEach(() => {
+        jest.clearAllMocks();
+      });
 
       it('removes hideTooltipTimer when the component unmounts', async () => {
         const {
           wrapper: { getByText, unmount },
-        } = setup({ enterTouchDelay: 5000 });
+        } = await setup({ enterTouchDelay: 5000 });
 
-        fireEvent(getTrigger(getByText), 'pressOut');
+        await fireEvent(getTrigger(getByText), 'pressOut');
 
-        unmount();
+        await unmount();
 
         expect(global.clearTimeout).toHaveBeenCalledTimes(1);
       });
@@ -94,53 +124,54 @@ describe('Tooltip', () => {
       it('removes Dimensions listener when the component unmount', async () => {
         const {
           wrapper: { getByText, findByText, unmount },
-        } = setup();
+        } = await setup();
 
-        fireEvent(getTrigger(getByText), 'longPress');
+        await userEvent.longPress(getTrigger(getByText));
 
         await findByText('some tooltip text');
 
-        unmount();
+        await unmount();
 
         expect(mockedRemoveEventListener).toHaveBeenCalled();
       });
     });
 
     describe('longPress', () => {
-      beforeAll(() => jest.spyOn(global, 'clearTimeout'));
-      afterEach(() => jest.clearAllMocks());
+      beforeAll(() => {
+        jest.spyOn(global, 'clearTimeout');
+      });
+      afterEach(() => {
+        jest.clearAllMocks();
+      });
 
-      it('clears the hide timer when the user start pressing the component again', () => {
+      it('clears the hide timer when the user start pressing the component again', async () => {
         jest.spyOn(global, 'clearTimeout');
 
         const {
           wrapper: { getByText },
-        } = setup();
+        } = await setup();
 
         const trigger = getTrigger(getByText);
-        fireEvent(trigger, 'longPress');
-        fireEvent(trigger, 'pressOut');
-        fireEvent(trigger, 'longPress');
+        await userEvent.longPress(trigger);
+        await userEvent.longPress(trigger);
 
         expect(global.clearTimeout).toHaveBeenCalledTimes(1);
       });
     });
 
     describe('pressOut', () => {
-      // eslint-disable-next-line jest/valid-title
       it('hides the tooltip when the user stop pressing the component', async () => {
         const {
           wrapper: { queryByText, getByText, findByText },
-        } = setup({ enterTouchDelay: 50, leaveTouchDelay: 0 });
+        } = await setup({ enterTouchDelay: 50, leaveTouchDelay: 100 });
 
-        fireEvent(getTrigger(getByText), 'longPress');
+        await userEvent.longPress(getTrigger(getByText));
 
         await findByText('some tooltip text');
 
-        fireEvent(getTrigger(getByText), 'pressOut');
-        runTimers();
+        await runTimers();
 
-        expect(queryByText('some tooltip text')).toBeNull();
+        expect(queryByText('some tooltip text')).not.toBeOnTheScreen();
       });
     });
 
@@ -162,96 +193,88 @@ describe('Tooltip', () => {
       describe('When it does not overflow', () => {
         it('centers the tooltip in the middle of the children component', async () => {
           const {
-            wrapper: { getByText, getByTestId, findByText },
-          } = setup();
+            wrapper: { getByText, findByText },
+          } = await setup();
 
-          fireEvent(getTrigger(getByText), 'longPress');
+          await userEvent.longPress(getTrigger(getByText));
 
-          fireEvent(await findByText('some tooltip text'), 'layout', {
+          const tooltip = await findByText('some tooltip text');
+          await fireEvent(tooltip, 'layout', {
             nativeEvent: {
               layout: { width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT },
             },
           });
 
-          expect(getByTestId('tooltip-container').props.style).toMatchObject([
-            {},
-            {
-              left: 210, // pageX (220) + (width (80) - TOOLTIP_WIDTH (100)) / 2 = 210
-              top: 250, // pageY (200) + height (50)
-            },
-          ]);
+          expect(tooltip.parent).toHaveStyle({
+            left: 210, // pageX (220) + (width (80) - TOOLTIP_WIDTH (100)) / 2 = 210
+            top: 250, // pageY (200) + height (50)
+          });
         });
       });
 
       describe('When it overflows to left', () => {
         it('renders the tooltip with the right placement', async () => {
           const {
-            wrapper: { getByText, getByTestId, findByText },
-          } = setup({}, { pageX: 0 }); // Component starting at the starting 0 X coord
+            wrapper: { getByText, findByText },
+          } = await setup({}, { pageX: 0 }); // Component starting at the starting 0 X coord
 
-          fireEvent(getTrigger(getByText), 'longPress');
+          await userEvent.longPress(getTrigger(getByText));
 
-          fireEvent(await findByText('some tooltip text'), 'layout', {
+          const tooltip = await findByText('some tooltip text');
+          await fireEvent(tooltip, 'layout', {
             nativeEvent: {
               layout: { width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT },
             },
           });
 
-          expect(getByTestId('tooltip-container').props.style).toMatchObject([
-            {},
-            {
-              left: 0, // Tooltip renders starting from children's x coord
-              top: 250,
-            },
-          ]);
+          expect(tooltip.parent).toHaveStyle({
+            left: 0, // Tooltip renders starting from children's x coord
+            top: 250,
+          });
         });
       });
 
       describe('When it overflows to right', () => {
         it('renders the tooltip with the right placement', async () => {
           const {
-            wrapper: { getByText, getByTestId, findByText },
-          } = setup({}, { pageX: 900, width: 150 }); // Component close to the screen limit
+            wrapper: { getByText, findByText },
+          } = await setup({}, { pageX: 900, width: 150 }); // Component close to the screen limit
 
-          fireEvent(getTrigger(getByText), 'longPress');
+          await userEvent.longPress(getTrigger(getByText));
 
-          fireEvent(await findByText('some tooltip text'), 'layout', {
+          const tooltip = await findByText('some tooltip text');
+          await fireEvent(tooltip, 'layout', {
             nativeEvent: {
               layout: { width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT },
             },
           });
 
-          expect(getByTestId('tooltip-container').props.style).toMatchObject([
-            {},
-            {
-              left: 950, // pageX (900) + width (150) - 100 (TOOLTIP_WIDTH) // Tooltip is placed from right to left without going offscreen
-              top: 250,
-            },
-          ]);
+          expect(tooltip.parent).toHaveStyle({
+            left: 950, // pageX (900) + width (150) - 100 (TOOLTIP_WIDTH) // Tooltip is placed from right to left without going offscreen
+            top: 250,
+          });
         });
       });
 
       describe('When it overflows to bottom', () => {
         it('renders the tooltip with the right placement', async () => {
           const {
-            wrapper: { getByText, getByTestId, findByText },
-          } = setup({}, { pageY: 600, height: 50 });
+            wrapper: { getByText, findByText },
+          } = await setup({}, { pageY: 600, height: 50 });
 
-          fireEvent(getTrigger(getByText), 'longPress');
+          await userEvent.longPress(getTrigger(getByText));
 
-          fireEvent(await findByText('some tooltip text'), 'layout', {
+          const tooltip = await findByText('some tooltip text');
+          await fireEvent(tooltip, 'layout', {
             nativeEvent: {
               layout: { width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT },
             },
           });
 
-          expect(getByTestId('tooltip-container').props.style).toMatchObject([
-            {},
-            {
-              left: 210,
-              top: 500, // pageY (600) - TOOLTIP_HEIGHT (100) // Tooltip is placed at the top of the component,
-            },
-          ]);
+          expect(tooltip.parent).toHaveStyle({
+            left: 210,
+            top: 500, // pageY (600) - TOOLTIP_HEIGHT (100) // Tooltip is placed at the top of the component,
+          });
         });
       });
     });
@@ -262,17 +285,21 @@ describe('Tooltip', () => {
       Platform.OS = 'web';
     });
     describe('Unmount', () => {
-      beforeAll(() => jest.spyOn(global, 'clearTimeout'));
-      afterEach(() => jest.clearAllMocks());
+      beforeAll(() => {
+        jest.spyOn(global, 'clearTimeout');
+      });
+      afterEach(() => {
+        jest.clearAllMocks();
+      });
 
       it('removes showTooltipTimer when the component unmounts', async () => {
         const {
           wrapper: { getByText, unmount },
-        } = setup({ enterTouchDelay: 5000 });
+        } = await setup({ enterTouchDelay: 5000 });
 
-        fireEvent(getTrigger(getByText), 'hoverIn');
+        await fireEvent(getTrigger(getByText), 'hoverIn');
 
-        unmount();
+        await unmount();
 
         expect(global.clearTimeout).toHaveBeenCalledTimes(1);
       });
@@ -280,11 +307,11 @@ describe('Tooltip', () => {
       it('removes hideTooltipTimer when the component unmounts', async () => {
         const {
           wrapper: { getByText, unmount },
-        } = setup({ enterTouchDelay: 5000 });
+        } = await setup({ enterTouchDelay: 5000 });
 
-        fireEvent(getTrigger(getByText), 'hoverOut');
+        await fireEvent(getTrigger(getByText), 'hoverOut');
 
-        unmount();
+        await unmount();
 
         expect(global.clearTimeout).toHaveBeenCalledTimes(1);
       });
@@ -292,55 +319,58 @@ describe('Tooltip', () => {
       it('removes Dimensions listener when the component unmount', async () => {
         const {
           wrapper: { getByText, findByText, unmount },
-        } = setup();
+        } = await setup();
 
-        fireEvent(getTrigger(getByText), 'hoverIn');
-        runTimers(500);
+        await fireEvent(getTrigger(getByText), 'hoverIn');
+        await runTimers(500);
 
         await findByText('some tooltip text');
 
-        unmount();
+        await unmount();
 
         expect(mockedRemoveEventListener).toHaveBeenCalled();
       });
     });
 
     describe('hoverIn', () => {
-      beforeAll(() => jest.spyOn(global, 'clearTimeout'));
-      afterEach(() => jest.clearAllMocks());
+      beforeAll(() => {
+        jest.spyOn(global, 'clearTimeout');
+      });
+      afterEach(() => {
+        jest.clearAllMocks();
+      });
 
-      it('clears the hide timer when the user start hovering the component again', () => {
+      it('clears the hide timer when the user start hovering the component again', async () => {
         jest.spyOn(global, 'clearTimeout');
 
         const {
           wrapper: { getByText },
-        } = setup();
+        } = await setup();
 
         const trigger = getTrigger(getByText);
-        fireEvent(trigger, 'hoverIn');
-        fireEvent(trigger, 'hoverOut');
-        fireEvent(trigger, 'hoverIn');
+        await fireEvent(trigger, 'hoverIn');
+        await fireEvent(trigger, 'hoverOut');
+        await fireEvent(trigger, 'hoverIn');
 
         expect(global.clearTimeout).toHaveBeenCalledTimes(2);
       });
     });
 
     describe('hoverOut', () => {
-      // eslint-disable-next-line jest/valid-title
       it('hides the tooltip when the user stops hovering the component', async () => {
         const {
           wrapper: { queryByText, getByText, findByText },
-        } = setup({ enterTouchDelay: 50, leaveTouchDelay: 0 });
+        } = await setup({ enterTouchDelay: 50, leaveTouchDelay: 0 });
 
-        fireEvent(getTrigger(getByText), 'hoverIn');
-        runTimers(50);
+        await fireEvent(getTrigger(getByText), 'hoverIn');
+        await runTimers(50);
 
         await findByText('some tooltip text');
 
-        fireEvent(getTrigger(getByText), 'hoverOut');
-        runTimers();
+        await fireEvent(getTrigger(getByText), 'hoverOut');
+        await runTimers();
 
-        expect(queryByText('some tooltip text')).toBeNull();
+        expect(queryByText('some tooltip text')).not.toBeOnTheScreen();
       });
     });
 
@@ -362,100 +392,92 @@ describe('Tooltip', () => {
       describe('When it does not overflow', () => {
         it('centers the tooltip in the middle of the children component', async () => {
           const {
-            wrapper: { getByText, getByTestId, findByText },
-          } = setup();
+            wrapper: { getByText, findByText },
+          } = await setup();
 
-          fireEvent(getTrigger(getByText), 'hoverIn');
-          runTimers(500);
+          await fireEvent(getTrigger(getByText), 'hoverIn');
+          await runTimers(500);
 
-          fireEvent(await findByText('some tooltip text'), 'layout', {
+          const tooltip = await findByText('some tooltip text');
+          await fireEvent(tooltip, 'layout', {
             nativeEvent: {
               layout: { width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT },
             },
           });
 
-          expect(getByTestId('tooltip-container').props.style).toMatchObject([
-            {},
-            {
-              left: 210, // pageX (220) + (width (80) - TOOLTIP_WIDTH (100)) / 2 = 210
-              top: 250, // pageY (200) + height (50)
-            },
-          ]);
+          expect(tooltip.parent).toHaveStyle({
+            left: 210, // pageX (220) + (width (80) - TOOLTIP_WIDTH (100)) / 2 = 210
+            top: 250, // pageY (200) + height (50)
+          });
         });
       });
 
       describe('When it overflows to left', () => {
         it('renders the tooltip with the right placement', async () => {
           const {
-            wrapper: { getByText, getByTestId, findByText },
-          } = setup({}, { pageX: 0 }); // Component starting at the starting 0 X coord
+            wrapper: { getByText, findByText },
+          } = await setup({}, { pageX: 0 }); // Component starting at the starting 0 X coord
 
-          fireEvent(getTrigger(getByText), 'hoverIn');
-          runTimers(500);
+          await fireEvent(getTrigger(getByText), 'hoverIn');
+          await runTimers(500);
 
-          fireEvent(await findByText('some tooltip text'), 'layout', {
+          const tooltip = await findByText('some tooltip text');
+          await fireEvent(tooltip, 'layout', {
             nativeEvent: {
               layout: { width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT },
             },
           });
 
-          expect(getByTestId('tooltip-container').props.style).toMatchObject([
-            {},
-            {
-              left: 0, // Tooltip renders starting from children's x coord
-              top: 250,
-            },
-          ]);
+          expect(tooltip.parent).toHaveStyle({
+            left: 0, // Tooltip renders starting from children's x coord
+            top: 250,
+          });
         });
       });
 
       describe('When it overflows to right', () => {
         it('renders the tooltip with the right placement', async () => {
           const {
-            wrapper: { getByText, getByTestId, findByText },
-          } = setup({}, { pageX: 900, width: 150 }); // Component close to the screen limit
+            wrapper: { getByText, findByText },
+          } = await setup({}, { pageX: 900, width: 150 }); // Component close to the screen limit
 
-          fireEvent(getTrigger(getByText), 'hoverIn');
-          runTimers(500);
+          await fireEvent(getTrigger(getByText), 'hoverIn');
+          await runTimers(500);
 
-          fireEvent(await findByText('some tooltip text'), 'layout', {
+          const tooltip = await findByText('some tooltip text');
+          await fireEvent(tooltip, 'layout', {
             nativeEvent: {
               layout: { width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT },
             },
           });
 
-          expect(getByTestId('tooltip-container').props.style).toMatchObject([
-            {},
-            {
-              left: 950, // pageX (900) + width (150) - 100 (TOOLTIP_WIDTH) // Tooltip is placed from right to left without going offscreen
-              top: 250,
-            },
-          ]);
+          expect(tooltip.parent).toHaveStyle({
+            left: 950, // pageX (900) + width (150) - 100 (TOOLTIP_WIDTH) // Tooltip is placed from right to left without going offscreen
+            top: 250,
+          });
         });
       });
 
       describe('When it overflows to bottom', () => {
         it('renders the tooltip with the right placement', async () => {
           const {
-            wrapper: { getByText, getByTestId, findByText },
-          } = setup({}, { pageY: 600, height: 50 });
+            wrapper: { getByText, findByText },
+          } = await setup({}, { pageY: 600, height: 50 });
 
-          fireEvent(getTrigger(getByText), 'hoverIn');
-          runTimers(500);
+          await fireEvent(getTrigger(getByText), 'hoverIn');
+          await runTimers(500);
 
-          fireEvent(await findByText('some tooltip text'), 'layout', {
+          const tooltip = await findByText('some tooltip text');
+          await fireEvent(tooltip, 'layout', {
             nativeEvent: {
               layout: { width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT },
             },
           });
 
-          expect(getByTestId('tooltip-container').props.style).toMatchObject([
-            {},
-            {
-              left: 210,
-              top: 500, // pageY (600) - TOOLTIP_HEIGHT (100) // Tooltip is placed at the top of the component,
-            },
-          ]);
+          expect(tooltip.parent).toHaveStyle({
+            left: 210,
+            top: 500, // pageY (600) - TOOLTIP_HEIGHT (100) // Tooltip is placed at the top of the component,
+          });
         });
       });
     });
diff --git a/src/components/__tests__/TouchableRipple.test.tsx b/src/components/__tests__/TouchableRipple.test.tsx
index c578605b3a..663d540bec 100644
--- a/src/components/__tests__/TouchableRipple.test.tsx
+++ b/src/components/__tests__/TouchableRipple.test.tsx
@@ -1,43 +1,45 @@
-import React from 'react';
 import { Platform, Text } from 'react-native';
+import type { GestureResponderEvent } from 'react-native';
 
-import { render, fireEvent } from '@testing-library/react-native';
+import { describe, expect, it, jest } from '@jest/globals';
+import { userEvent } from '@testing-library/react-native';
 
+import { render, screen } from '../../test-utils';
 import TouchableRipple from '../TouchableRipple/TouchableRipple.native';
 
 describe('TouchableRipple', () => {
-  it('renders children correctly', () => {
-    const { getByText } = render(
+  it('renders children correctly', async () => {
+    await render(
       <TouchableRipple>
         <Text>Button</Text>
       </TouchableRipple>
     );
 
-    expect(getByText('Button')).toBeTruthy();
+    expect(screen.getByText('Button')).toBeOnTheScreen();
   });
 
-  it('calls onPress when pressed', () => {
-    const onPress = jest.fn();
-    const { getByText } = render(
+  it('calls onPress when pressed', async () => {
+    const onPress = jest.fn<(event: GestureResponderEvent) => void>();
+    await render(
       <TouchableRipple onPress={onPress}>
         <Text>Button</Text>
       </TouchableRipple>
     );
 
-    fireEvent.press(getByText('Button'));
+    await userEvent.press(screen.getByText('Button'));
 
     expect(onPress).toHaveBeenCalledTimes(1);
   });
 
-  it('disables the button when disabled prop is true', () => {
-    const onPress = jest.fn();
-    const { getByText } = render(
+  it('disables the button when disabled prop is true', async () => {
+    const onPress = jest.fn<(event: GestureResponderEvent) => void>();
+    await render(
       <TouchableRipple disabled onPress={onPress}>
         <Text>Button</Text>
       </TouchableRipple>
     );
 
-    fireEvent.press(getByText('Button'));
+    await userEvent.press(screen.getByText('Button'));
 
     expect(onPress).not.toHaveBeenCalled();
   });
@@ -45,26 +47,24 @@ describe('TouchableRipple', () => {
   describe('on iOS', () => {
     Platform.OS = 'ios';
 
-    it('displays the underlay when pressed', () => {
-      const { getByTestId } = render(
+    it('displays the underlay when pressed', async () => {
+      const { toJSON } = await render(
         <TouchableRipple testOnly_pressed>
           <Text>Press me!</Text>
         </TouchableRipple>
       );
 
-      const underlay = getByTestId('touchable-ripple-underlay');
-      expect(underlay).toBeDefined();
+      expect(toJSON()).toMatchSnapshot();
     });
 
-    it('renders custom underlay color', () => {
-      const { getByTestId } = render(
+    it('renders custom underlay color', async () => {
+      const { toJSON } = await render(
         <TouchableRipple testOnly_pressed underlayColor="purple">
           <Text>Press me!</Text>
         </TouchableRipple>
       );
 
-      const underlay = getByTestId('touchable-ripple-underlay');
-      expect(underlay).toHaveStyle({ backgroundColor: 'purple' });
+      expect(toJSON()).toMatchSnapshot();
     });
   });
 });
diff --git a/src/components/__tests__/Typography/Caption.test.tsx b/src/components/__tests__/Typography/Caption.test.tsx
deleted file mode 100644
index b85bee50d4..0000000000
--- a/src/components/__tests__/Typography/Caption.test.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { StyleSheet } from 'react-native';
-
-import { render } from '@testing-library/react-native';
-
-import { red500 } from '../../../styles/themes/v2/colors';
-import Caption from '../../Typography/v2/Caption';
-
-const style = StyleSheet.create({
-  caption: {
-    fontSize: 20,
-    color: red500,
-  },
-});
-
-it('renders caption with children as content', () => {
-  const tree = render(<Caption>Caption content</Caption>).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
-
-it('renders caption applying style', () => {
-  const tree = render(
-    <Caption style={style.caption}>Big and red caption</Caption>
-  ).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
diff --git a/src/components/__tests__/Typography/Text.test.tsx b/src/components/__tests__/Typography/Text.test.tsx
index 2560920322..b470f47f32 100644
--- a/src/components/__tests__/Typography/Text.test.tsx
+++ b/src/components/__tests__/Typography/Text.test.tsx
@@ -1,16 +1,15 @@
-import * as React from 'react';
-
-import { render } from '@testing-library/react-native';
+import { expect, it, jest } from '@jest/globals';
 
 import PaperProvider from '../../../core/PaperProvider';
-import configureFonts from '../../../styles/fonts';
-import { MD3LightTheme } from '../../../styles/themes';
-import { tokens } from '../../../styles/themes/v3/tokens';
+import { render, screen } from '../../../test-utils';
+import configureFonts from '../../../theme/fonts';
+import { LightTheme } from '../../../theme/schemes';
+import { tokens } from '../../../theme/tokens';
 import Text, { customText } from '../../Typography/Text';
 
 const content = 'Something rendered as a child content';
 
-it('renders every variant of Text with children as content', () => {
+it('renders every variant of Text with children as content', async () => {
   const variants = (
     <>
       <Text variant="displayLarge">{content}</Text>
@@ -35,24 +34,22 @@ it('renders every variant of Text with children as content', () => {
     </>
   );
 
-  const tree = render(variants).toJSON();
+  const tree = (await render(variants)).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
-it('renders v3 Text component without variant with default fontWeight and fontFamily', () => {
-  const { getByTestId } = render(
-    <Text testID="text-without-variant">{content}</Text>
-  );
+it('renders v3 Text component without variant with default fontWeight and fontFamily', async () => {
+  await render(<Text testID="text-without-variant">{content}</Text>);
   const { brandRegular, weightRegular } = tokens.md.ref.typeface;
 
-  expect(getByTestId('text-without-variant')).toHaveStyle({
+  expect(screen.getByTestId('text-without-variant')).toHaveStyle({
     fontFamily: brandRegular,
     fontWeight: weightRegular,
   });
 });
 
-it('renders v3 Text component with custom variant correctly', () => {
+it('renders v3 Text component with custom variant correctly', async () => {
   const fontConfig = {
     customVariant: {
       fontFamily: 'Montserrat-Regular',
@@ -64,11 +61,11 @@ it('renders v3 Text component with custom variant correctly', () => {
   } as const;
 
   const theme = {
-    ...MD3LightTheme,
+    ...LightTheme,
     fonts: configureFonts({ config: fontConfig }),
   };
   const Text = customText<'customVariant'>();
-  const { getByTestId } = render(
+  await render(
     <PaperProvider theme={theme}>
       <Text testID="text-with-custom-variant" variant="customVariant">
         {content}
@@ -76,53 +73,56 @@ it('renders v3 Text component with custom variant correctly', () => {
     </PaperProvider>
   );
 
-  expect(getByTestId('text-with-custom-variant').props.style).toMatchSnapshot();
+  expect(
+    // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+    screen.getByTestId('text-with-custom-variant').props.style
+  ).toMatchSnapshot();
 });
 
-it("nested text with variant should override parent's variant", () => {
-  const { getByTestId } = render(
+it("nested text with variant should override parent's variant", async () => {
+  await render(
     <Text testID="parent-text" variant="bodySmall">
       <Text variant="displayLarge">Test</Text>
     </Text>
   );
 
-  expect(getByTestId('parent-text')).toHaveStyle(
-    MD3LightTheme.fonts.displayLarge
+  expect(screen.getByTestId('parent-text')).toHaveStyle(
+    LightTheme.fonts.displayLarge
   );
 });
 
-it("nested non-text component should not override parent's variant", () => {
+it("nested non-text component should not override parent's variant", async () => {
   const ChildComponent = () => <>{content}</>;
 
-  const { getByTestId } = render(
+  await render(
     <Text testID="parent-text" variant="displayLarge">
       <ChildComponent />
     </Text>
   );
 
-  expect(getByTestId('parent-text')).toHaveStyle(
-    MD3LightTheme.fonts.displayLarge
+  expect(screen.getByTestId('parent-text')).toHaveStyle(
+    LightTheme.fonts.displayLarge
   );
 });
 
-it("nested text without variant, but with styles, should override parent's styles", () => {
+it("nested text without variant, but with styles, should override parent's styles", async () => {
   const customStyle = { fontSize: 50, lineHeight: 70 };
-  const { getByTestId } = render(
+  await render(
     <Text testID="parent-text" variant="bodySmall">
       <Text style={customStyle}>Test</Text>
     </Text>
   );
 
-  expect(getByTestId('parent-text')).toHaveStyle(customStyle);
+  expect(screen.getByTestId('parent-text')).toHaveStyle(customStyle);
 });
 
-it('throws when custom variant not provided', () => {
+it('throws when custom variant not provided', async () => {
   jest.spyOn(console, 'error').mockImplementation(() => {});
 
   const Text = customText<'myCustomVariant'>();
-  expect(() =>
+  await expect(
     render(<Text variant="myCustomVariant">{content}</Text>)
-  ).toThrow(/myCustomVariant was not provided/);
+  ).rejects.toThrow(/myCustomVariant was not provided/);
 
   jest.clearAllMocks();
 });
diff --git a/src/components/__tests__/Typography/__snapshots__/Caption.test.tsx.snap b/src/components/__tests__/Typography/__snapshots__/Caption.test.tsx.snap
deleted file mode 100644
index 1120e943ca..0000000000
--- a/src/components/__tests__/Typography/__snapshots__/Caption.test.tsx.snap
+++ /dev/null
@@ -1,74 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders caption applying style 1`] = `
-<Text
-  style={
-    [
-      {
-        "color": "rgba(28, 27, 31, 1)",
-      },
-      {
-        "textAlign": "left",
-      },
-      [
-        {
-          "textAlign": "left",
-        },
-        {
-          "color": "rgba(28, 27, 31, 0.54)",
-          "writingDirection": "ltr",
-        },
-        [
-          {
-            "fontSize": 12,
-            "letterSpacing": 0.4,
-            "lineHeight": 20,
-            "marginVertical": 2,
-          },
-          {
-            "color": "#f44336",
-            "fontSize": 20,
-          },
-        ],
-      ],
-    ]
-  }
->
-  Big and red caption
-</Text>
-`;
-
-exports[`renders caption with children as content 1`] = `
-<Text
-  style={
-    [
-      {
-        "color": "rgba(28, 27, 31, 1)",
-      },
-      {
-        "textAlign": "left",
-      },
-      [
-        {
-          "textAlign": "left",
-        },
-        {
-          "color": "rgba(28, 27, 31, 0.54)",
-          "writingDirection": "ltr",
-        },
-        [
-          {
-            "fontSize": 12,
-            "letterSpacing": 0.4,
-            "lineHeight": 20,
-            "marginVertical": 2,
-          },
-          undefined,
-        ],
-      ],
-    ]
-  }
->
-  Caption content
-</Text>
-`;
diff --git a/src/components/__tests__/Typography/__snapshots__/Text.test.tsx.snap b/src/components/__tests__/Typography/__snapshots__/Text.test.tsx.snap
index a47cd14611..a69b0061c6 100644
--- a/src/components/__tests__/Typography/__snapshots__/Text.test.tsx.snap
+++ b/src/components/__tests__/Typography/__snapshots__/Text.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders every variant of Text with children as content 1`] = `
-[
+<>
   <Text
     style={
       [
@@ -9,7 +9,7 @@ exports[`renders every variant of Text with children as content 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "writingDirection": "ltr",
         },
         [
@@ -17,7 +17,7 @@ exports[`renders every variant of Text with children as content 1`] = `
             "fontFamily": "System",
             "fontSize": 57,
             "fontWeight": "400",
-            "letterSpacing": 0,
+            "letterSpacing": -0.25,
             "lineHeight": 64,
           },
           undefined,
@@ -26,7 +26,7 @@ exports[`renders every variant of Text with children as content 1`] = `
     }
   >
     Something rendered as a child content
-  </Text>,
+  </Text>
   <Text
     style={
       [
@@ -34,7 +34,7 @@ exports[`renders every variant of Text with children as content 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "writingDirection": "ltr",
         },
         [
@@ -51,7 +51,7 @@ exports[`renders every variant of Text with children as content 1`] = `
     }
   >
     Something rendered as a child content
-  </Text>,
+  </Text>
   <Text
     style={
       [
@@ -59,7 +59,7 @@ exports[`renders every variant of Text with children as content 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "writingDirection": "ltr",
         },
         [
@@ -76,7 +76,7 @@ exports[`renders every variant of Text with children as content 1`] = `
     }
   >
     Something rendered as a child content
-  </Text>,
+  </Text>
   <Text
     style={
       [
@@ -84,7 +84,7 @@ exports[`renders every variant of Text with children as content 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "writingDirection": "ltr",
         },
         [
@@ -101,7 +101,7 @@ exports[`renders every variant of Text with children as content 1`] = `
     }
   >
     Something rendered as a child content
-  </Text>,
+  </Text>
   <Text
     style={
       [
@@ -109,7 +109,7 @@ exports[`renders every variant of Text with children as content 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "writingDirection": "ltr",
         },
         [
@@ -126,7 +126,7 @@ exports[`renders every variant of Text with children as content 1`] = `
     }
   >
     Something rendered as a child content
-  </Text>,
+  </Text>
   <Text
     style={
       [
@@ -134,7 +134,7 @@ exports[`renders every variant of Text with children as content 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "writingDirection": "ltr",
         },
         [
@@ -151,7 +151,7 @@ exports[`renders every variant of Text with children as content 1`] = `
     }
   >
     Something rendered as a child content
-  </Text>,
+  </Text>
   <Text
     style={
       [
@@ -159,7 +159,7 @@ exports[`renders every variant of Text with children as content 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "writingDirection": "ltr",
         },
         [
@@ -176,7 +176,7 @@ exports[`renders every variant of Text with children as content 1`] = `
     }
   >
     Something rendered as a child content
-  </Text>,
+  </Text>
   <Text
     style={
       [
@@ -184,7 +184,7 @@ exports[`renders every variant of Text with children as content 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "writingDirection": "ltr",
         },
         [
@@ -201,7 +201,7 @@ exports[`renders every variant of Text with children as content 1`] = `
     }
   >
     Something rendered as a child content
-  </Text>,
+  </Text>
   <Text
     style={
       [
@@ -209,7 +209,7 @@ exports[`renders every variant of Text with children as content 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "writingDirection": "ltr",
         },
         [
@@ -226,7 +226,7 @@ exports[`renders every variant of Text with children as content 1`] = `
     }
   >
     Something rendered as a child content
-  </Text>,
+  </Text>
   <Text
     style={
       [
@@ -234,7 +234,7 @@ exports[`renders every variant of Text with children as content 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "writingDirection": "ltr",
         },
         [
@@ -242,7 +242,7 @@ exports[`renders every variant of Text with children as content 1`] = `
             "fontFamily": "System",
             "fontSize": 16,
             "fontWeight": "400",
-            "letterSpacing": 0.15,
+            "letterSpacing": 0.5,
             "lineHeight": 24,
           },
           undefined,
@@ -251,7 +251,7 @@ exports[`renders every variant of Text with children as content 1`] = `
     }
   >
     Something rendered as a child content
-  </Text>,
+  </Text>
   <Text
     style={
       [
@@ -259,7 +259,7 @@ exports[`renders every variant of Text with children as content 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "writingDirection": "ltr",
         },
         [
@@ -276,7 +276,7 @@ exports[`renders every variant of Text with children as content 1`] = `
     }
   >
     Something rendered as a child content
-  </Text>,
+  </Text>
   <Text
     style={
       [
@@ -284,7 +284,7 @@ exports[`renders every variant of Text with children as content 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "writingDirection": "ltr",
         },
         [
@@ -301,7 +301,7 @@ exports[`renders every variant of Text with children as content 1`] = `
     }
   >
     Something rendered as a child content
-  </Text>,
+  </Text>
   <Text
     style={
       [
@@ -309,7 +309,7 @@ exports[`renders every variant of Text with children as content 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "writingDirection": "ltr",
         },
         [
@@ -326,7 +326,7 @@ exports[`renders every variant of Text with children as content 1`] = `
     }
   >
     Something rendered as a child content
-  </Text>,
+  </Text>
   <Text
     style={
       [
@@ -334,7 +334,7 @@ exports[`renders every variant of Text with children as content 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "writingDirection": "ltr",
         },
         [
@@ -351,7 +351,7 @@ exports[`renders every variant of Text with children as content 1`] = `
     }
   >
     Something rendered as a child content
-  </Text>,
+  </Text>
   <Text
     style={
       [
@@ -359,7 +359,7 @@ exports[`renders every variant of Text with children as content 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "writingDirection": "ltr",
         },
         [
@@ -376,8 +376,8 @@ exports[`renders every variant of Text with children as content 1`] = `
     }
   >
     Something rendered as a child content
-  </Text>,
-]
+  </Text>
+</>
 `;
 
 exports[`renders v3 Text component with custom variant correctly 1`] = `
@@ -386,7 +386,7 @@ exports[`renders v3 Text component with custom variant correctly 1`] = `
     "textAlign": "left",
   },
   {
-    "color": "rgba(28, 27, 31, 1)",
+    "color": "rgba(29, 27, 32, 1)",
     "writingDirection": "ltr",
   },
   [
diff --git a/src/components/__tests__/__snapshots__/ActivityIndicator.test.tsx.snap b/src/components/__tests__/__snapshots__/ActivityIndicator.test.tsx.snap
index 43b4eac37e..7e684841e8 100644
--- a/src/components/__tests__/__snapshots__/ActivityIndicator.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ActivityIndicator.test.tsx.snap
@@ -2,13 +2,9 @@
 
 exports[`renders colored indicator 1`] = `
 <View
-  accessibilityRole="progressbar"
-  accessibilityState={
-    {
-      "busy": true,
-    }
-  }
   accessible={true}
+  aria-busy={true}
+  role="progressbar"
   style={
     [
       {
@@ -200,13 +196,9 @@ exports[`renders colored indicator 1`] = `
 
 exports[`renders hidden indicator 1`] = `
 <View
-  accessibilityRole="progressbar"
-  accessibilityState={
-    {
-      "busy": false,
-    }
-  }
   accessible={true}
+  aria-busy={false}
+  role="progressbar"
   style={
     [
       {
@@ -398,13 +390,9 @@ exports[`renders hidden indicator 1`] = `
 
 exports[`renders indicator 1`] = `
 <View
-  accessibilityRole="progressbar"
-  accessibilityState={
-    {
-      "busy": true,
-    }
-  }
   accessible={true}
+  aria-busy={true}
+  role="progressbar"
   style={
     [
       {
@@ -596,13 +584,9 @@ exports[`renders indicator 1`] = `
 
 exports[`renders large indicator 1`] = `
 <View
-  accessibilityRole="progressbar"
-  accessibilityState={
-    {
-      "busy": true,
-    }
-  }
   accessible={true}
+  aria-busy={true}
+  role="progressbar"
   style={
     [
       {
diff --git a/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap b/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap
deleted file mode 100644
index eea7087336..0000000000
--- a/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap
+++ /dev/null
@@ -1,866 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders animated fab 1`] = `
-<View
-  collapsable={false}
-  style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 16,
-      "opacity": 1,
-      "position": "absolute",
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 4,
-        "width": 0,
-      },
-      "shadowOpacity": 0.15,
-      "shadowRadius": 8,
-      "transform": [
-        {
-          "scale": 1,
-        },
-      ],
-    }
-  }
-  testID="animated-fab-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "transparent",
-        "borderRadius": 16,
-        "flex": undefined,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 1,
-          "width": 0,
-        },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 3,
-      }
-    }
-    testID="animated-fab-container"
-  >
-    <View
-      collapsable={false}
-      style={
-        {
-          "borderRadius": 16,
-          "height": 56,
-        }
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "bottom": 0,
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "elevation": 0,
-            },
-          ]
-        }
-      >
-        <View
-          collapsable={false}
-          pointerEvents="none"
-          style={
-            {
-              "borderRadius": 16,
-              "bottom": 0,
-              "elevation": 3,
-              "left": 0,
-              "opacity": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "width": 72,
-            }
-          }
-          testID="animated-fab-extended-shadow"
-        />
-        <View
-          collapsable={false}
-          pointerEvents="none"
-          style={
-            {
-              "borderRadius": 16,
-              "bottom": 0,
-              "elevation": 3,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "transform": [
-                {
-                  "translateX": 16,
-                },
-              ],
-              "width": 56,
-            }
-          }
-          testID="animated-fab-shadow"
-        />
-      </View>
-      <View
-        collapsable={false}
-        pointerEvents="box-none"
-        style={
-          {
-            "borderRadius": 16,
-            "flexDirection": "row",
-            "overflow": "hidden",
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          style={
-            {
-              "backgroundColor": "rgba(234, 221, 255, 1)",
-              "borderRadius": 16,
-              "height": 56,
-              "left": 16,
-              "right": undefined,
-              "transform": [
-                {
-                  "translateX": 0,
-                },
-              ],
-              "width": 72,
-            }
-          }
-        >
-          <View
-            accessibilityLabel=""
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": false,
-                "expanded": undefined,
-                "selected": undefined,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "overflow": "hidden",
-                },
-                {
-                  "borderRadius": 16,
-                },
-              ]
-            }
-            testID="animated-fab"
-          >
-            <View
-              style={
-                [
-                  {
-                    "height": 56,
-                  },
-                  {
-                    "borderRadius": 16,
-                    "width": 72,
-                  },
-                ]
-              }
-            />
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      collapsable={false}
-      pointerEvents="none"
-      style={
-        {
-          "alignItems": "center",
-          "height": 56,
-          "justifyContent": "center",
-          "left": 16,
-          "position": "absolute",
-          "right": undefined,
-          "transform": [
-            {
-              "translateX": 0,
-            },
-          ],
-          "width": 56,
-        }
-      }
-    >
-      <Text
-        accessibilityElementsHidden={true}
-        importantForAccessibility="no-hide-descendants"
-        pointerEvents="none"
-        selectable={false}
-        style={
-          [
-            {
-              "color": "rgba(33, 0, 93, 1)",
-              "fontSize": 24,
-            },
-            [
-              {
-                "lineHeight": 24,
-                "transform": [
-                  {
-                    "scaleX": 1,
-                  },
-                ],
-              },
-              {
-                "backgroundColor": "transparent",
-              },
-            ],
-          ]
-        }
-      >
-        plus
-      </Text>
-    </View>
-    <View
-      pointerEvents="none"
-    >
-      <Text
-        collapsable={false}
-        ellipsizeMode="tail"
-        numberOfLines={1}
-        onTextLayout={[Function]}
-        style={
-          {
-            "color": "rgba(33, 0, 93, 1)",
-            "fontFamily": "System",
-            "fontSize": 14,
-            "fontWeight": "500",
-            "letterSpacing": 0.1,
-            "lineHeight": 20,
-            "minWidth": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 16,
-            "textAlign": "left",
-            "top": -28,
-            "transform": [
-              {
-                "translateX": 56,
-              },
-            ],
-            "writingDirection": "ltr",
-          }
-        }
-        testID="animated-fab-text"
-      />
-    </View>
-  </View>
-</View>
-`;
-
-exports[`renders animated fab with label on the left 1`] = `
-<View
-  collapsable={false}
-  style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 16,
-      "opacity": 1,
-      "position": "absolute",
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 4,
-        "width": 0,
-      },
-      "shadowOpacity": 0.15,
-      "shadowRadius": 8,
-      "transform": [
-        {
-          "scale": 1,
-        },
-      ],
-    }
-  }
-  testID="animated-fab-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "transparent",
-        "borderRadius": 16,
-        "flex": undefined,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 1,
-          "width": 0,
-        },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 3,
-      }
-    }
-    testID="animated-fab-container"
-  >
-    <View
-      collapsable={false}
-      style={
-        {
-          "borderRadius": 16,
-          "height": 56,
-        }
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "bottom": 0,
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "elevation": 0,
-            },
-          ]
-        }
-      >
-        <View
-          collapsable={false}
-          pointerEvents="none"
-          style={
-            {
-              "borderRadius": 16,
-              "bottom": 0,
-              "elevation": 3,
-              "left": 0,
-              "opacity": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "width": 72,
-            }
-          }
-          testID="animated-fab-extended-shadow"
-        />
-        <View
-          collapsable={false}
-          pointerEvents="none"
-          style={
-            {
-              "borderRadius": 16,
-              "bottom": 0,
-              "elevation": 3,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "transform": [
-                {
-                  "translateX": 0,
-                },
-              ],
-              "width": 56,
-            }
-          }
-          testID="animated-fab-shadow"
-        />
-      </View>
-      <View
-        collapsable={false}
-        pointerEvents="box-none"
-        style={
-          {
-            "borderRadius": 16,
-            "flexDirection": "row",
-            "overflow": "hidden",
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          style={
-            {
-              "backgroundColor": "rgba(234, 221, 255, 1)",
-              "borderRadius": 16,
-              "height": 56,
-              "left": -16,
-              "right": undefined,
-              "transform": [
-                {
-                  "translateX": 0,
-                },
-              ],
-              "width": 72,
-            }
-          }
-        >
-          <View
-            accessibilityLabel="text"
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": false,
-                "expanded": undefined,
-                "selected": undefined,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "overflow": "hidden",
-                },
-                {
-                  "borderRadius": 16,
-                },
-              ]
-            }
-            testID="animated-fab"
-          >
-            <View
-              style={
-                [
-                  {
-                    "height": 56,
-                  },
-                  {
-                    "borderRadius": 16,
-                    "width": 72,
-                  },
-                ]
-              }
-            />
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      collapsable={false}
-      pointerEvents="none"
-      style={
-        {
-          "alignItems": "center",
-          "height": 56,
-          "justifyContent": "center",
-          "left": -16,
-          "position": "absolute",
-          "right": undefined,
-          "transform": [
-            {
-              "translateX": 16,
-            },
-          ],
-          "width": 56,
-        }
-      }
-    >
-      <Text
-        accessibilityElementsHidden={true}
-        importantForAccessibility="no-hide-descendants"
-        pointerEvents="none"
-        selectable={false}
-        style={
-          [
-            {
-              "color": "rgba(33, 0, 93, 1)",
-              "fontSize": 24,
-            },
-            [
-              {
-                "lineHeight": 24,
-                "transform": [
-                  {
-                    "scaleX": 1,
-                  },
-                ],
-              },
-              {
-                "backgroundColor": "transparent",
-              },
-            ],
-          ]
-        }
-      >
-        plus
-      </Text>
-    </View>
-    <View
-      pointerEvents="none"
-    >
-      <Text
-        collapsable={false}
-        ellipsizeMode="tail"
-        numberOfLines={1}
-        onTextLayout={[Function]}
-        style={
-          {
-            "color": "rgba(33, 0, 93, 1)",
-            "fontFamily": "System",
-            "fontSize": 14,
-            "fontWeight": "500",
-            "left": 16,
-            "letterSpacing": 0.1,
-            "lineHeight": 20,
-            "minWidth": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "textAlign": "left",
-            "top": -28,
-            "transform": [
-              {
-                "translateX": 56,
-              },
-            ],
-            "writingDirection": "ltr",
-          }
-        }
-        testID="animated-fab-text"
-      >
-        text
-      </Text>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`renders animated fab with label on the right by default 1`] = `
-<View
-  collapsable={false}
-  style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 16,
-      "opacity": 1,
-      "position": "absolute",
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 4,
-        "width": 0,
-      },
-      "shadowOpacity": 0.15,
-      "shadowRadius": 8,
-      "transform": [
-        {
-          "scale": 1,
-        },
-      ],
-    }
-  }
-  testID="animated-fab-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "transparent",
-        "borderRadius": 16,
-        "flex": undefined,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 1,
-          "width": 0,
-        },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 3,
-      }
-    }
-    testID="animated-fab-container"
-  >
-    <View
-      collapsable={false}
-      style={
-        {
-          "borderRadius": 16,
-          "height": 56,
-        }
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "bottom": 0,
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "elevation": 0,
-            },
-          ]
-        }
-      >
-        <View
-          collapsable={false}
-          pointerEvents="none"
-          style={
-            {
-              "borderRadius": 16,
-              "bottom": 0,
-              "elevation": 3,
-              "left": 0,
-              "opacity": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "width": 72,
-            }
-          }
-          testID="animated-fab-extended-shadow"
-        />
-        <View
-          collapsable={false}
-          pointerEvents="none"
-          style={
-            {
-              "borderRadius": 16,
-              "bottom": 0,
-              "elevation": 3,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "transform": [
-                {
-                  "translateX": 16,
-                },
-              ],
-              "width": 56,
-            }
-          }
-          testID="animated-fab-shadow"
-        />
-      </View>
-      <View
-        collapsable={false}
-        pointerEvents="box-none"
-        style={
-          {
-            "borderRadius": 16,
-            "flexDirection": "row",
-            "overflow": "hidden",
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          style={
-            {
-              "backgroundColor": "rgba(234, 221, 255, 1)",
-              "borderRadius": 16,
-              "height": 56,
-              "left": 16,
-              "right": undefined,
-              "transform": [
-                {
-                  "translateX": 0,
-                },
-              ],
-              "width": 72,
-            }
-          }
-        >
-          <View
-            accessibilityLabel="text"
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": false,
-                "expanded": undefined,
-                "selected": undefined,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "overflow": "hidden",
-                },
-                {
-                  "borderRadius": 16,
-                },
-              ]
-            }
-            testID="animated-fab"
-          >
-            <View
-              style={
-                [
-                  {
-                    "height": 56,
-                  },
-                  {
-                    "borderRadius": 16,
-                    "width": 72,
-                  },
-                ]
-              }
-            />
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      collapsable={false}
-      pointerEvents="none"
-      style={
-        {
-          "alignItems": "center",
-          "height": 56,
-          "justifyContent": "center",
-          "left": 16,
-          "position": "absolute",
-          "right": undefined,
-          "transform": [
-            {
-              "translateX": 0,
-            },
-          ],
-          "width": 56,
-        }
-      }
-    >
-      <Text
-        accessibilityElementsHidden={true}
-        importantForAccessibility="no-hide-descendants"
-        pointerEvents="none"
-        selectable={false}
-        style={
-          [
-            {
-              "color": "rgba(33, 0, 93, 1)",
-              "fontSize": 24,
-            },
-            [
-              {
-                "lineHeight": 24,
-                "transform": [
-                  {
-                    "scaleX": 1,
-                  },
-                ],
-              },
-              {
-                "backgroundColor": "transparent",
-              },
-            ],
-          ]
-        }
-      >
-        plus
-      </Text>
-    </View>
-    <View
-      pointerEvents="none"
-    >
-      <Text
-        collapsable={false}
-        ellipsizeMode="tail"
-        numberOfLines={1}
-        onTextLayout={[Function]}
-        style={
-          {
-            "color": "rgba(33, 0, 93, 1)",
-            "fontFamily": "System",
-            "fontSize": 14,
-            "fontWeight": "500",
-            "letterSpacing": 0.1,
-            "lineHeight": 20,
-            "minWidth": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 16,
-            "textAlign": "left",
-            "top": -28,
-            "transform": [
-              {
-                "translateX": 56,
-              },
-            ],
-            "writingDirection": "ltr",
-          }
-        }
-        testID="animated-fab-text"
-      >
-        text
-      </Text>
-    </View>
-  </View>
-</View>
-`;
diff --git a/src/components/__tests__/__snapshots__/Avatar.test.tsx.snap b/src/components/__tests__/__snapshots__/Avatar.test.tsx.snap
index c73f2ae180..9e55666cef 100644
--- a/src/components/__tests__/__snapshots__/Avatar.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Avatar.test.tsx.snap
@@ -158,7 +158,7 @@ exports[`renders avatar with text 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "fontFamily": "System",
           "fontWeight": "400",
           "letterSpacing": 0,
@@ -212,7 +212,7 @@ exports[`renders avatar with text and custom background color 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "fontFamily": "System",
           "fontWeight": "400",
           "letterSpacing": 0,
@@ -266,7 +266,7 @@ exports[`renders avatar with text and custom colors 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "fontFamily": "System",
           "fontWeight": "400",
           "letterSpacing": 0,
@@ -320,7 +320,7 @@ exports[`renders avatar with text and custom size 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "fontFamily": "System",
           "fontWeight": "400",
           "letterSpacing": 0,
diff --git a/src/components/__tests__/__snapshots__/Badge.test.tsx.snap b/src/components/__tests__/__snapshots__/Badge.test.tsx.snap
index 571b6ac583..3ffc31ac78 100644
--- a/src/components/__tests__/__snapshots__/Badge.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Badge.test.tsx.snap
@@ -2,48 +2,71 @@
 
 exports[`renders badge 1`] = `
 <Text
+  allowFontScaling={false}
   collapsable={false}
   numberOfLines={1}
   style={
-    {
-      "alignSelf": "flex-end",
-      "backgroundColor": "rgba(179, 38, 30, 1)",
-      "borderRadius": 10,
-      "color": "rgba(255, 255, 255, 1)",
-      "fontSize": 10,
-      "height": 20,
-      "lineHeight": 20,
-      "minWidth": 20,
-      "opacity": 1,
-      "overflow": "hidden",
-      "paddingHorizontal": 3,
-      "textAlign": "center",
-      "textAlignVertical": "center",
-    }
+    [
+      {
+        "alignSelf": "flex-end",
+        "overflow": "hidden",
+        "textAlign": "center",
+        "textAlignVertical": "center",
+      },
+      {
+        "opacity": 1,
+      },
+      {
+        "backgroundColor": "rgba(179, 38, 30, 1)",
+        "borderRadius": 9999,
+        "color": "rgba(255, 255, 255, 1)",
+        "height": 6,
+        "minWidth": 6,
+      },
+      false,
+      undefined,
+    ]
   }
 />
 `;
 
 exports[`renders badge as hidden 1`] = `
 <Text
+  allowFontScaling={false}
   collapsable={false}
   numberOfLines={1}
   style={
-    {
-      "alignSelf": "flex-end",
-      "backgroundColor": "rgba(179, 38, 30, 1)",
-      "borderRadius": 6,
-      "color": "rgba(255, 255, 255, 1)",
-      "fontSize": 6,
-      "height": 12,
-      "lineHeight": 12,
-      "minWidth": 12,
-      "opacity": 0,
-      "overflow": "hidden",
-      "paddingHorizontal": 3,
-      "textAlign": "center",
-      "textAlignVertical": "center",
-    }
+    [
+      {
+        "alignSelf": "flex-end",
+        "overflow": "hidden",
+        "textAlign": "center",
+        "textAlignVertical": "center",
+      },
+      {
+        "opacity": 0,
+      },
+      {
+        "backgroundColor": "rgba(179, 38, 30, 1)",
+        "borderRadius": 9999,
+        "color": "rgba(255, 255, 255, 1)",
+        "height": 16,
+        "minWidth": 16,
+      },
+      {
+        "fontFamily": "System",
+        "fontSize": 11,
+        "fontWeight": "500",
+        "letterSpacing": 0.5,
+        "lineHeight": 16,
+      },
+      {
+        "lineHeight": 16,
+        "maxWidth": 36,
+        "paddingHorizontal": 4,
+      },
+      undefined,
+    ]
   }
 >
   3
@@ -52,50 +75,43 @@ exports[`renders badge as hidden 1`] = `
 
 exports[`renders badge in different color 1`] = `
 <Text
+  allowFontScaling={false}
   collapsable={false}
   numberOfLines={1}
   style={
-    {
-      "alignSelf": "flex-end",
-      "backgroundColor": "#f44336",
-      "borderRadius": 10,
-      "color": "rgba(255, 255, 255, 1)",
-      "fontSize": 10,
-      "height": 20,
-      "lineHeight": 20,
-      "minWidth": 20,
-      "opacity": 1,
-      "overflow": "hidden",
-      "paddingHorizontal": 3,
-      "textAlign": "center",
-      "textAlignVertical": "center",
-    }
-  }
->
-  3
-</Text>
-`;
-
-exports[`renders badge in different size 1`] = `
-<Text
-  collapsable={false}
-  numberOfLines={1}
-  style={
-    {
-      "alignSelf": "flex-end",
-      "backgroundColor": "rgba(179, 38, 30, 1)",
-      "borderRadius": 6,
-      "color": "rgba(255, 255, 255, 1)",
-      "fontSize": 6,
-      "height": 12,
-      "lineHeight": 12,
-      "minWidth": 12,
-      "opacity": 1,
-      "overflow": "hidden",
-      "paddingHorizontal": 3,
-      "textAlign": "center",
-      "textAlignVertical": "center",
-    }
+    [
+      {
+        "alignSelf": "flex-end",
+        "overflow": "hidden",
+        "textAlign": "center",
+        "textAlignVertical": "center",
+      },
+      {
+        "opacity": 1,
+      },
+      {
+        "backgroundColor": "rgba(179, 38, 30, 1)",
+        "borderRadius": 9999,
+        "color": "rgba(255, 255, 255, 1)",
+        "height": 16,
+        "minWidth": 16,
+      },
+      {
+        "fontFamily": "System",
+        "fontSize": 11,
+        "fontWeight": "500",
+        "letterSpacing": 0.5,
+        "lineHeight": 16,
+      },
+      {
+        "lineHeight": 16,
+        "maxWidth": 36,
+        "paddingHorizontal": 4,
+      },
+      {
+        "backgroundColor": "#f44336",
+      },
+    ]
   }
 >
   3
@@ -104,24 +120,41 @@ exports[`renders badge in different size 1`] = `
 
 exports[`renders badge with content 1`] = `
 <Text
+  allowFontScaling={false}
   collapsable={false}
   numberOfLines={1}
   style={
-    {
-      "alignSelf": "flex-end",
-      "backgroundColor": "rgba(179, 38, 30, 1)",
-      "borderRadius": 10,
-      "color": "rgba(255, 255, 255, 1)",
-      "fontSize": 10,
-      "height": 20,
-      "lineHeight": 20,
-      "minWidth": 20,
-      "opacity": 1,
-      "overflow": "hidden",
-      "paddingHorizontal": 3,
-      "textAlign": "center",
-      "textAlignVertical": "center",
-    }
+    [
+      {
+        "alignSelf": "flex-end",
+        "overflow": "hidden",
+        "textAlign": "center",
+        "textAlignVertical": "center",
+      },
+      {
+        "opacity": 1,
+      },
+      {
+        "backgroundColor": "rgba(179, 38, 30, 1)",
+        "borderRadius": 9999,
+        "color": "rgba(255, 255, 255, 1)",
+        "height": 16,
+        "minWidth": 16,
+      },
+      {
+        "fontFamily": "System",
+        "fontSize": 11,
+        "fontWeight": "500",
+        "letterSpacing": 0.5,
+        "lineHeight": 16,
+      },
+      {
+        "lineHeight": 16,
+        "maxWidth": 36,
+        "paddingHorizontal": 4,
+      },
+      undefined,
+    ]
   }
 >
   3
diff --git a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
index b1aaff7ab0..71e77e2936 100644
--- a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
@@ -4,90 +4,154 @@ exports[`render visible banner, with custom theme 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgb(247, 243, 249)",
-      "opacity": 1,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 1,
-        "width": 0,
+    [
+      {},
+      {
+        "opacity": 1,
       },
-      "shadowOpacity": 0.15,
-      "shadowRadius": 3,
-    }
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(247, 242, 250, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0.55,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 0.79,
+      },
+    ]
   }
-  testID="surface-outer-layer"
 >
   <View
     collapsable={false}
     style={
-      {
-        "backgroundColor": "rgb(247, 243, 249)",
-        "flex": undefined,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 1,
-          "width": 0,
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 1,
-      }
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(247, 242, 250, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 0.25,
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "alignSelf": "center",
+          "maxWidth": 960,
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        undefined,
+      ]
     }
-    testID="surface"
   >
     <View
+      collapsable={false}
       style={
         [
           {
-            "alignSelf": "center",
-            "maxWidth": 960,
-            "overflow": "hidden",
-            "width": "100%",
+            "height": 0,
           },
-          undefined,
+        ]
+      }
+    />
+    <View
+      collapsable={false}
+      onLayout={[Function]}
+      style={
+        [
+          null,
+          null,
         ]
       }
     >
       <View
-        collapsable={false}
         style={
           {
-            "height": 0,
+            "flexDirection": "row",
+            "justifyContent": "flex-start",
+            "marginBottom": 0,
+            "marginHorizontal": 8,
+            "marginTop": 16,
           }
         }
-      />
-      <View
-        collapsable={false}
-        onLayout={[Function]}
-        style={{}}
       >
-        <View
+        <Text
+          aria-live="polite"
+          role="alert"
           style={
-            {
-              "flexDirection": "row",
-              "justifyContent": "flex-start",
-              "marginBottom": 0,
-              "marginHorizontal": 8,
-              "marginTop": 16,
-            }
-          }
-        >
-          <Text
-            accessibilityLiveRegion="polite"
-            accessibilityRole="alert"
-            style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
               [
                 {
-                  "textAlign": "left",
-                },
-                {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 14,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
-                },
-                {
-                  "writingDirection": "ltr",
+                  "letterSpacing": 0.25,
+                  "lineHeight": 20,
                 },
                 [
                   {
@@ -95,172 +159,229 @@ exports[`render visible banner, with custom theme 1`] = `
                     "margin": 8,
                   },
                   {
-                    "color": "rgba(28, 27, 31, 1)",
+                    "color": "#00f",
                   },
                 ],
-              ]
-            }
-          >
-            Custom theme
-          </Text>
-        </View>
-        <View
-          style={
-            {
-              "flexDirection": "row",
-              "justifyContent": "flex-end",
-              "margin": 4,
-            }
+              ],
+            ]
           }
         >
-          <View
-            collapsable={false}
-            style={
+          Custom theme
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
+            "margin": 4,
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {},
+              {
+                "borderStyle": "solid",
+                "minWidth": 64,
+              },
+              {
+                "minWidth": "auto",
+              },
+              {
+                "borderColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "margin": 4,
+              },
+              {},
               {
                 "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
                 "borderRadius": 20,
-                "margin": 4,
-                "shadowColor": "#000",
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
                 "shadowOffset": {
                   "height": 0,
                   "width": 0,
                 },
                 "shadowOpacity": 0,
                 "shadowRadius": 0,
-              }
-            }
-            testID="button-container-outer-layer"
-          >
-            <View
-              collapsable={false}
-              style={
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
                 {
                   "backgroundColor": "transparent",
-                  "borderColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
                   "borderRadius": 20,
-                  "borderStyle": "solid",
-                  "borderWidth": 0,
-                  "flex": undefined,
-                  "minWidth": "auto",
-                  "shadowColor": "#000",
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
                   "shadowOffset": {
                     "height": 0,
                     "width": 0,
                   },
                   "shadowOpacity": 0,
                   "shadowRadius": 0,
-                }
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
               }
-              testID="button-container"
-            >
-              <View
-                accessibilityRole="button"
-                accessibilityState={
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "borderRadius": 20,
+                },
+              ]
+            }
+          >
+            <View
+              style={
+                [
                   {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": false,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                  },
                   {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                    "opacity": 1,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <Text
+                numberOfLines={1}
+                selectable={false}
                 style={
                   [
                     {
-                      "overflow": "hidden",
+                      "textAlign": "left",
                     },
                     {
-                      "borderRadius": 20,
+                      "color": "rgba(29, 27, 32, 1)",
+                      "writingDirection": "ltr",
                     },
-                  ]
-                }
-                testID="button"
-              >
-                <View
-                  style={
                     [
                       {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
+                        "fontFamily": "System",
+                        "fontSize": 14,
+                        "fontWeight": "500",
+                        "letterSpacing": 0.1,
+                        "lineHeight": 20,
                       },
-                      undefined,
-                    ]
-                  }
-                >
-                  <Text
-                    numberOfLines={1}
-                    selectable={false}
-                    style={
                       [
                         {
-                          "textAlign": "left",
+                          "marginHorizontal": 16,
+                          "marginVertical": 9,
+                          "textAlign": "center",
+                        },
+                        {
+                          "marginHorizontal": 12,
+                        },
+                        {
+                          "marginHorizontal": 8,
                         },
+                        false,
                         {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "color": "#043",
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
                         },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 14,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.1,
-                            "lineHeight": 20,
-                          },
-                          [
-                            {
-                              "marginHorizontal": 16,
-                              "marginVertical": 9,
-                              "textAlign": "center",
-                            },
-                            false,
-                            {
-                              "marginHorizontal": 12,
-                            },
-                            {
-                              "marginHorizontal": 8,
-                            },
-                            false,
-                            {
-                              "color": "#043",
-                              "fontFamily": "System",
-                              "fontSize": 14,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.1,
-                              "lineHeight": 20,
-                            },
-                            undefined,
-                          ],
-                        ],
-                      ]
-                    }
-                    testID="button-text"
-                  >
-                    first
-                  </Text>
-                </View>
-              </View>
+                        undefined,
+                      ],
+                    ],
+                  ]
+                }
+              >
+                first
+              </Text>
             </View>
           </View>
         </View>
@@ -274,102 +395,167 @@ exports[`renders hidden banner, without action buttons and without image 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgb(247, 243, 249)",
-      "opacity": 0,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 1,
-        "width": 0,
+    [
+      {},
+      {
+        "opacity": 0,
       },
-      "shadowOpacity": 0.15,
-      "shadowRadius": 3,
-    }
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(247, 242, 250, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0.55,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 0.79,
+      },
+    ]
   }
-  testID="surface-outer-layer"
 >
   <View
     collapsable={false}
     style={
-      {
-        "backgroundColor": "rgb(247, 243, 249)",
-        "flex": undefined,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 1,
-          "width": 0,
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 1,
-      }
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(247, 242, 250, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 0.25,
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "alignSelf": "center",
+          "maxWidth": 960,
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        undefined,
+      ]
     }
-    testID="surface"
   >
     <View
+      collapsable={false}
       style={
         [
           {
-            "alignSelf": "center",
-            "maxWidth": 960,
-            "overflow": "hidden",
-            "width": "100%",
+            "height": 0,
           },
-          undefined,
         ]
       }
-    >
-      <View
-        collapsable={false}
-        style={
-          {
-            "height": 0,
-          }
-        }
-      />
-      <View
-        collapsable={false}
-        onLayout={[Function]}
-        style={
+    />
+    <View
+      collapsable={false}
+      onLayout={[Function]}
+      style={
+        [
           {
-            "opacity": 0,
             "position": "absolute",
             "top": 0,
+            "width": "100%",
+          },
+          {
             "transform": [
               {
                 "translateY": -0,
               },
             ],
-            "width": "100%",
+          },
+          {
+            "opacity": 0,
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          {
+            "flexDirection": "row",
+            "justifyContent": "flex-start",
+            "marginBottom": 0,
+            "marginHorizontal": 8,
+            "marginTop": 16,
           }
         }
       >
-        <View
+        <Text
+          aria-live="off"
+          role="alert"
           style={
-            {
-              "flexDirection": "row",
-              "justifyContent": "flex-start",
-              "marginBottom": 0,
-              "marginHorizontal": 8,
-              "marginTop": 16,
-            }
-          }
-        >
-          <Text
-            accessibilityLiveRegion="none"
-            accessibilityRole="alert"
-            style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
               [
                 {
-                  "textAlign": "left",
-                },
-                {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 14,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
-                },
-                {
-                  "writingDirection": "ltr",
+                  "letterSpacing": 0.25,
+                  "lineHeight": 20,
                 },
                 [
                   {
@@ -377,25 +563,25 @@ exports[`renders hidden banner, without action buttons and without image 1`] = `
                     "margin": 8,
                   },
                   {
-                    "color": "rgba(28, 27, 31, 1)",
+                    "color": "rgba(29, 27, 32, 1)",
                   },
                 ],
-              ]
-            }
-          >
-            Two line text string with two actions. One to two lines is preferable on mobile.
-          </Text>
-        </View>
-        <View
-          style={
-            {
-              "flexDirection": "row",
-              "justifyContent": "flex-end",
-              "margin": 4,
-            }
+              ],
+            ]
           }
-        />
+        >
+          Two line text string with two actions. One to two lines is preferable on mobile.
+        </Text>
       </View>
+      <View
+        style={
+          {
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
+            "margin": 4,
+          }
+        }
+      />
     </View>
   </View>
 </View>
@@ -405,112 +591,176 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgb(247, 243, 249)",
-      "opacity": 1,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 1,
-        "width": 0,
+    [
+      {},
+      {
+        "opacity": 1,
       },
-      "shadowOpacity": 0.15,
-      "shadowRadius": 3,
-    }
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(247, 242, 250, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0.55,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 0.79,
+      },
+    ]
   }
-  testID="surface-outer-layer"
 >
   <View
     collapsable={false}
     style={
-      {
-        "backgroundColor": "rgb(247, 243, 249)",
-        "flex": undefined,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 1,
-          "width": 0,
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 1,
-      }
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(247, 242, 250, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 0.25,
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "alignSelf": "center",
+          "maxWidth": 960,
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        undefined,
+      ]
     }
-    testID="surface"
   >
     <View
+      collapsable={false}
       style={
         [
           {
-            "alignSelf": "center",
-            "maxWidth": 960,
-            "overflow": "hidden",
-            "width": "100%",
+            "height": 0,
           },
-          undefined,
+        ]
+      }
+    />
+    <View
+      collapsable={false}
+      onLayout={[Function]}
+      style={
+        [
+          null,
+          null,
         ]
       }
     >
       <View
-        collapsable={false}
         style={
           {
-            "height": 0,
+            "flexDirection": "row",
+            "justifyContent": "flex-start",
+            "marginBottom": 0,
+            "marginHorizontal": 8,
+            "marginTop": 16,
           }
         }
-      />
-      <View
-        collapsable={false}
-        onLayout={[Function]}
-        style={{}}
       >
         <View
           style={
             {
-              "flexDirection": "row",
-              "justifyContent": "flex-start",
-              "marginBottom": 0,
-              "marginHorizontal": 8,
-              "marginTop": 16,
+              "margin": 8,
             }
           }
         >
-          <View
-            style={
+          <Image
+            accessibilityIgnoresInvertColors={true}
+            source={
               {
-                "margin": 8,
+                "uri": "https://callstack.com/images/team/Satya.png",
               }
             }
-          >
-            <Image
-              accessibilityIgnoresInvertColors={true}
-              source={
-                {
-                  "uri": "https://callstack.com/images/team/Satya.png",
-                }
-              }
-              style={
-                {
-                  "height": 40,
-                  "width": 40,
-                }
-              }
-            />
-          </View>
-          <Text
-            accessibilityLiveRegion="polite"
-            accessibilityRole="alert"
             style={
+              {
+                "height": 40,
+                "width": 40,
+              }
+            }
+          />
+        </View>
+        <Text
+          aria-live="polite"
+          role="alert"
+          style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
               [
                 {
-                  "textAlign": "left",
-                },
-                {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 14,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
-                },
-                {
-                  "writingDirection": "ltr",
+                  "letterSpacing": 0.25,
+                  "lineHeight": 20,
                 },
                 [
                   {
@@ -518,172 +768,229 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
                     "margin": 8,
                   },
                   {
-                    "color": "rgba(28, 27, 31, 1)",
+                    "color": "rgba(29, 27, 32, 1)",
                   },
                 ],
-              ]
-            }
-          >
-            Two line text string with two actions. One to two lines is preferable on mobile.
-          </Text>
-        </View>
-        <View
-          style={
-            {
-              "flexDirection": "row",
-              "justifyContent": "flex-end",
-              "margin": 4,
-            }
+              ],
+            ]
           }
         >
-          <View
-            collapsable={false}
-            style={
+          Two line text string with two actions. One to two lines is preferable on mobile.
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
+            "margin": 4,
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {},
+              {
+                "borderStyle": "solid",
+                "minWidth": 64,
+              },
+              {
+                "minWidth": "auto",
+              },
+              {
+                "borderColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "margin": 4,
+              },
+              {},
               {
                 "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
                 "borderRadius": 20,
-                "margin": 4,
-                "shadowColor": "#000",
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
                 "shadowOffset": {
                   "height": 0,
                   "width": 0,
                 },
                 "shadowOpacity": 0,
                 "shadowRadius": 0,
-              }
-            }
-            testID="button-container-outer-layer"
-          >
-            <View
-              collapsable={false}
-              style={
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
                 {
                   "backgroundColor": "transparent",
-                  "borderColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
                   "borderRadius": 20,
-                  "borderStyle": "solid",
-                  "borderWidth": 0,
-                  "flex": undefined,
-                  "minWidth": "auto",
-                  "shadowColor": "#000",
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
                   "shadowOffset": {
                     "height": 0,
                     "width": 0,
                   },
                   "shadowOpacity": 0,
                   "shadowRadius": 0,
-                }
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
               }
-              testID="button-container"
-            >
-              <View
-                accessibilityRole="button"
-                accessibilityState={
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "borderRadius": 20,
+                },
+              ]
+            }
+          >
+            <View
+              style={
+                [
                   {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": false,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                  },
                   {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                    "opacity": 1,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <Text
+                numberOfLines={1}
+                selectable={false}
                 style={
                   [
                     {
-                      "overflow": "hidden",
+                      "textAlign": "left",
                     },
                     {
-                      "borderRadius": 20,
+                      "color": "rgba(29, 27, 32, 1)",
+                      "writingDirection": "ltr",
                     },
-                  ]
-                }
-                testID="button"
-              >
-                <View
-                  style={
                     [
                       {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
+                        "fontFamily": "System",
+                        "fontSize": 14,
+                        "fontWeight": "500",
+                        "letterSpacing": 0.1,
+                        "lineHeight": 20,
                       },
-                      undefined,
-                    ]
-                  }
-                >
-                  <Text
-                    numberOfLines={1}
-                    selectable={false}
-                    style={
                       [
                         {
-                          "textAlign": "left",
+                          "marginHorizontal": 16,
+                          "marginVertical": 9,
+                          "textAlign": "center",
+                        },
+                        {
+                          "marginHorizontal": 12,
                         },
                         {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "marginHorizontal": 8,
                         },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 14,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.1,
-                            "lineHeight": 20,
-                          },
-                          [
-                            {
-                              "marginHorizontal": 16,
-                              "marginVertical": 9,
-                              "textAlign": "center",
-                            },
-                            false,
-                            {
-                              "marginHorizontal": 12,
-                            },
-                            {
-                              "marginHorizontal": 8,
-                            },
-                            false,
-                            {
-                              "color": "rgba(103, 80, 164, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 14,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.1,
-                              "lineHeight": 20,
-                            },
-                            undefined,
-                          ],
-                        ],
-                      ]
-                    }
-                    testID="button-text"
-                  >
-                    first
-                  </Text>
-                </View>
-              </View>
+                        false,
+                        {
+                          "color": "rgba(103, 80, 164, 1)",
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
+                        },
+                        undefined,
+                      ],
+                    ],
+                  ]
+                }
+              >
+                first
+              </Text>
             </View>
           </View>
         </View>
@@ -697,90 +1004,154 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgb(247, 243, 249)",
-      "opacity": 1,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 1,
-        "width": 0,
+    [
+      {},
+      {
+        "opacity": 1,
       },
-      "shadowOpacity": 0.15,
-      "shadowRadius": 3,
-    }
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(247, 242, 250, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0.55,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 0.79,
+      },
+    ]
   }
-  testID="surface-outer-layer"
 >
   <View
     collapsable={false}
     style={
-      {
-        "backgroundColor": "rgb(247, 243, 249)",
-        "flex": undefined,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 1,
-          "width": 0,
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 1,
-      }
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(247, 242, 250, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 0.25,
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "alignSelf": "center",
+          "maxWidth": 960,
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        undefined,
+      ]
     }
-    testID="surface"
   >
     <View
+      collapsable={false}
       style={
         [
           {
-            "alignSelf": "center",
-            "maxWidth": 960,
-            "overflow": "hidden",
-            "width": "100%",
+            "height": 0,
           },
-          undefined,
+        ]
+      }
+    />
+    <View
+      collapsable={false}
+      onLayout={[Function]}
+      style={
+        [
+          null,
+          null,
         ]
       }
     >
       <View
-        collapsable={false}
         style={
           {
-            "height": 0,
+            "flexDirection": "row",
+            "justifyContent": "flex-start",
+            "marginBottom": 0,
+            "marginHorizontal": 8,
+            "marginTop": 16,
           }
         }
-      />
-      <View
-        collapsable={false}
-        onLayout={[Function]}
-        style={{}}
       >
-        <View
+        <Text
+          aria-live="polite"
+          role="alert"
           style={
-            {
-              "flexDirection": "row",
-              "justifyContent": "flex-start",
-              "marginBottom": 0,
-              "marginHorizontal": 8,
-              "marginTop": 16,
-            }
-          }
-        >
-          <Text
-            accessibilityLiveRegion="polite"
-            accessibilityRole="alert"
-            style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
               [
                 {
-                  "textAlign": "left",
-                },
-                {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 14,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
-                },
-                {
-                  "writingDirection": "ltr",
+                  "letterSpacing": 0.25,
+                  "lineHeight": 20,
                 },
                 [
                   {
@@ -788,322 +1159,436 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                     "margin": 8,
                   },
                   {
-                    "color": "rgba(28, 27, 31, 1)",
+                    "color": "rgba(29, 27, 32, 1)",
                   },
                 ],
-              ]
-            }
-          >
-            Two line text string with two actions. One to two lines is preferable on mobile.
-          </Text>
-        </View>
-        <View
-          style={
-            {
-              "flexDirection": "row",
-              "justifyContent": "flex-end",
-              "margin": 4,
-            }
+              ],
+            ]
           }
         >
-          <View
-            collapsable={false}
-            style={
+          Two line text string with two actions. One to two lines is preferable on mobile.
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
+            "margin": 4,
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {},
+              {
+                "borderStyle": "solid",
+                "minWidth": 64,
+              },
+              {
+                "minWidth": "auto",
+              },
+              {
+                "borderColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "margin": 4,
+              },
+              {},
               {
                 "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
                 "borderRadius": 20,
-                "margin": 4,
-                "shadowColor": "#000",
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
                 "shadowOffset": {
                   "height": 0,
                   "width": 0,
                 },
                 "shadowOpacity": 0,
                 "shadowRadius": 0,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": 20,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0,
+                  "shadowRadius": 0,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
               }
             }
-            testID="button-container-outer-layer"
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "borderRadius": 20,
+                },
+              ]
+            }
           >
             <View
-              collapsable={false}
               style={
-                {
-                  "backgroundColor": "transparent",
-                  "borderColor": "transparent",
-                  "borderRadius": 20,
-                  "borderStyle": "solid",
-                  "borderWidth": 0,
-                  "flex": undefined,
-                  "minWidth": "auto",
-                  "shadowColor": "#000",
-                  "shadowOffset": {
-                    "height": 0,
-                    "width": 0,
+                [
+                  {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
                   },
-                  "shadowOpacity": 0,
-                  "shadowRadius": 0,
-                }
+                  {
+                    "opacity": 1,
+                  },
+                  undefined,
+                ]
               }
-              testID="button-container"
             >
-              <View
-                accessibilityRole="button"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": false,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+              <Text
+                numberOfLines={1}
+                selectable={false}
                 style={
                   [
                     {
-                      "overflow": "hidden",
+                      "textAlign": "left",
                     },
                     {
-                      "borderRadius": 20,
+                      "color": "rgba(29, 27, 32, 1)",
+                      "writingDirection": "ltr",
                     },
-                  ]
-                }
-                testID="button"
-              >
-                <View
-                  style={
                     [
                       {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
+                        "fontFamily": "System",
+                        "fontSize": 14,
+                        "fontWeight": "500",
+                        "letterSpacing": 0.1,
+                        "lineHeight": 20,
                       },
-                      undefined,
-                    ]
-                  }
-                >
-                  <Text
-                    numberOfLines={1}
-                    selectable={false}
-                    style={
                       [
                         {
-                          "textAlign": "left",
+                          "marginHorizontal": 16,
+                          "marginVertical": 9,
+                          "textAlign": "center",
+                        },
+                        {
+                          "marginHorizontal": 12,
                         },
                         {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "marginHorizontal": 8,
                         },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 14,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.1,
-                            "lineHeight": 20,
-                          },
-                          [
-                            {
-                              "marginHorizontal": 16,
-                              "marginVertical": 9,
-                              "textAlign": "center",
-                            },
-                            false,
-                            {
-                              "marginHorizontal": 12,
-                            },
-                            {
-                              "marginHorizontal": 8,
-                            },
-                            false,
-                            {
-                              "color": "rgba(103, 80, 164, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 14,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.1,
-                              "lineHeight": 20,
-                            },
-                            undefined,
-                          ],
-                        ],
-                      ]
-                    }
-                    testID="button-text"
-                  >
-                    first
-                  </Text>
-                </View>
-              </View>
+                        false,
+                        {
+                          "color": "rgba(103, 80, 164, 1)",
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
+                        },
+                        undefined,
+                      ],
+                    ],
+                  ]
+                }
+              >
+                first
+              </Text>
             </View>
           </View>
-          <View
-            collapsable={false}
-            style={
+        </View>
+        <View
+          collapsable={false}
+          style={
+            [
+              {},
+              {
+                "borderStyle": "solid",
+                "minWidth": 64,
+              },
+              {
+                "minWidth": "auto",
+              },
+              {
+                "borderColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "margin": 4,
+              },
+              {},
               {
                 "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
                 "borderRadius": 20,
-                "margin": 4,
-                "shadowColor": "#000",
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
                 "shadowOffset": {
                   "height": 0,
                   "width": 0,
                 },
                 "shadowOpacity": 0,
                 "shadowRadius": 0,
-              }
-            }
-            testID="button-container-outer-layer"
-          >
-            <View
-              collapsable={false}
-              style={
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
                 {
                   "backgroundColor": "transparent",
-                  "borderColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
                   "borderRadius": 20,
-                  "borderStyle": "solid",
-                  "borderWidth": 0,
-                  "flex": undefined,
-                  "minWidth": "auto",
-                  "shadowColor": "#000",
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
                   "shadowOffset": {
                     "height": 0,
                     "width": 0,
                   },
                   "shadowOpacity": 0,
                   "shadowRadius": 0,
-                }
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
               }
-              testID="button-container"
-            >
-              <View
-                accessibilityRole="button"
-                accessibilityState={
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "borderRadius": 20,
+                },
+              ]
+            }
+          >
+            <View
+              style={
+                [
                   {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": false,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                  },
                   {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                    "opacity": 1,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <Text
+                numberOfLines={1}
+                selectable={false}
                 style={
                   [
                     {
-                      "overflow": "hidden",
+                      "textAlign": "left",
                     },
                     {
-                      "borderRadius": 20,
+                      "color": "rgba(29, 27, 32, 1)",
+                      "writingDirection": "ltr",
                     },
-                  ]
-                }
-                testID="button"
-              >
-                <View
-                  style={
                     [
                       {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
+                        "fontFamily": "System",
+                        "fontSize": 14,
+                        "fontWeight": "500",
+                        "letterSpacing": 0.1,
+                        "lineHeight": 20,
                       },
-                      undefined,
-                    ]
-                  }
-                >
-                  <Text
-                    numberOfLines={1}
-                    selectable={false}
-                    style={
                       [
                         {
-                          "textAlign": "left",
+                          "marginHorizontal": 16,
+                          "marginVertical": 9,
+                          "textAlign": "center",
+                        },
+                        {
+                          "marginHorizontal": 12,
+                        },
+                        {
+                          "marginHorizontal": 8,
                         },
+                        false,
                         {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "color": "rgba(103, 80, 164, 1)",
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
                         },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 14,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.1,
-                            "lineHeight": 20,
-                          },
-                          [
-                            {
-                              "marginHorizontal": 16,
-                              "marginVertical": 9,
-                              "textAlign": "center",
-                            },
-                            false,
-                            {
-                              "marginHorizontal": 12,
-                            },
-                            {
-                              "marginHorizontal": 8,
-                            },
-                            false,
-                            {
-                              "color": "rgba(103, 80, 164, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 14,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.1,
-                              "lineHeight": 20,
-                            },
-                            undefined,
-                          ],
-                        ],
-                      ]
-                    }
-                    testID="button-text"
-                  >
-                    second
-                  </Text>
-                </View>
-              </View>
+                        undefined,
+                      ],
+                    ],
+                  ]
+                }
+              >
+                second
+              </Text>
             </View>
           </View>
         </View>
@@ -1117,112 +1602,176 @@ exports[`renders visible banner, without action buttons and with image 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgb(247, 243, 249)",
-      "opacity": 1,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 1,
-        "width": 0,
+    [
+      {},
+      {
+        "opacity": 1,
       },
-      "shadowOpacity": 0.15,
-      "shadowRadius": 3,
-    }
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(247, 242, 250, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0.55,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 0.79,
+      },
+    ]
   }
-  testID="surface-outer-layer"
 >
   <View
     collapsable={false}
     style={
-      {
-        "backgroundColor": "rgb(247, 243, 249)",
-        "flex": undefined,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 1,
-          "width": 0,
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 1,
-      }
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(247, 242, 250, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 0.25,
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "alignSelf": "center",
+          "maxWidth": 960,
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        undefined,
+      ]
     }
-    testID="surface"
   >
     <View
+      collapsable={false}
       style={
         [
           {
-            "alignSelf": "center",
-            "maxWidth": 960,
-            "overflow": "hidden",
-            "width": "100%",
+            "height": 0,
           },
-          undefined,
+        ]
+      }
+    />
+    <View
+      collapsable={false}
+      onLayout={[Function]}
+      style={
+        [
+          null,
+          null,
         ]
       }
     >
       <View
-        collapsable={false}
         style={
           {
-            "height": 0,
+            "flexDirection": "row",
+            "justifyContent": "flex-start",
+            "marginBottom": 0,
+            "marginHorizontal": 8,
+            "marginTop": 16,
           }
         }
-      />
-      <View
-        collapsable={false}
-        onLayout={[Function]}
-        style={{}}
       >
         <View
           style={
             {
-              "flexDirection": "row",
-              "justifyContent": "flex-start",
-              "marginBottom": 0,
-              "marginHorizontal": 8,
-              "marginTop": 16,
+              "margin": 8,
             }
           }
         >
-          <View
-            style={
+          <Image
+            accessibilityIgnoresInvertColors={true}
+            source={
               {
-                "margin": 8,
+                "uri": "https://callstack.com/images/team/Satya.png",
               }
             }
-          >
-            <Image
-              accessibilityIgnoresInvertColors={true}
-              source={
-                {
-                  "uri": "https://callstack.com/images/team/Satya.png",
-                }
-              }
-              style={
-                {
-                  "height": 40,
-                  "width": 40,
-                }
-              }
-            />
-          </View>
-          <Text
-            accessibilityLiveRegion="polite"
-            accessibilityRole="alert"
             style={
+              {
+                "height": 40,
+                "width": 40,
+              }
+            }
+          />
+        </View>
+        <Text
+          aria-live="polite"
+          role="alert"
+          style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
               [
                 {
-                  "textAlign": "left",
-                },
-                {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 14,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
-                },
-                {
-                  "writingDirection": "ltr",
+                  "letterSpacing": 0.25,
+                  "lineHeight": 20,
                 },
                 [
                   {
@@ -1230,25 +1779,25 @@ exports[`renders visible banner, without action buttons and with image 1`] = `
                     "margin": 8,
                   },
                   {
-                    "color": "rgba(28, 27, 31, 1)",
+                    "color": "rgba(29, 27, 32, 1)",
                   },
                 ],
-              ]
-            }
-          >
-            Two line text string with two actions. One to two lines is preferable on mobile.
-          </Text>
-        </View>
-        <View
-          style={
-            {
-              "flexDirection": "row",
-              "justifyContent": "flex-end",
-              "margin": 4,
-            }
+              ],
+            ]
           }
-        />
+        >
+          Two line text string with two actions. One to two lines is preferable on mobile.
+        </Text>
       </View>
+      <View
+        style={
+          {
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
+            "margin": 4,
+          }
+        }
+      />
     </View>
   </View>
 </View>
@@ -1258,90 +1807,154 @@ exports[`renders visible banner, without action buttons and without image 1`] =
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgb(247, 243, 249)",
-      "opacity": 1,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 1,
-        "width": 0,
+    [
+      {},
+      {
+        "opacity": 1,
       },
-      "shadowOpacity": 0.15,
-      "shadowRadius": 3,
-    }
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(247, 242, 250, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0.55,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 0.79,
+      },
+    ]
   }
-  testID="surface-outer-layer"
 >
   <View
     collapsable={false}
     style={
-      {
-        "backgroundColor": "rgb(247, 243, 249)",
-        "flex": undefined,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 1,
-          "width": 0,
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 1,
-      }
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(247, 242, 250, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 0.25,
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "alignSelf": "center",
+          "maxWidth": 960,
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        undefined,
+      ]
     }
-    testID="surface"
   >
     <View
+      collapsable={false}
       style={
         [
           {
-            "alignSelf": "center",
-            "maxWidth": 960,
-            "overflow": "hidden",
-            "width": "100%",
+            "height": 0,
           },
-          undefined,
+        ]
+      }
+    />
+    <View
+      collapsable={false}
+      onLayout={[Function]}
+      style={
+        [
+          null,
+          null,
         ]
       }
     >
       <View
-        collapsable={false}
         style={
           {
-            "height": 0,
+            "flexDirection": "row",
+            "justifyContent": "flex-start",
+            "marginBottom": 0,
+            "marginHorizontal": 8,
+            "marginTop": 16,
           }
         }
-      />
-      <View
-        collapsable={false}
-        onLayout={[Function]}
-        style={{}}
       >
-        <View
+        <Text
+          aria-live="polite"
+          role="alert"
           style={
-            {
-              "flexDirection": "row",
-              "justifyContent": "flex-start",
-              "marginBottom": 0,
-              "marginHorizontal": 8,
-              "marginTop": 16,
-            }
-          }
-        >
-          <Text
-            accessibilityLiveRegion="polite"
-            accessibilityRole="alert"
-            style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
               [
                 {
-                  "textAlign": "left",
-                },
-                {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 14,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
-                },
-                {
-                  "writingDirection": "ltr",
+                  "letterSpacing": 0.25,
+                  "lineHeight": 20,
                 },
                 [
                   {
@@ -1349,25 +1962,25 @@ exports[`renders visible banner, without action buttons and without image 1`] =
                     "margin": 8,
                   },
                   {
-                    "color": "rgba(28, 27, 31, 1)",
+                    "color": "rgba(29, 27, 32, 1)",
                   },
                 ],
-              ]
-            }
-          >
-            Two line text string with two actions. One to two lines is preferable on mobile.
-          </Text>
-        </View>
-        <View
-          style={
-            {
-              "flexDirection": "row",
-              "justifyContent": "flex-end",
-              "margin": 4,
-            }
+              ],
+            ]
           }
-        />
+        >
+          Two line text string with two actions. One to two lines is preferable on mobile.
+        </Text>
       </View>
+      <View
+        style={
+          {
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
+            "margin": 4,
+          }
+        }
+      />
     </View>
   </View>
 </View>
diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
index cc788ce0b9..22b83abaaa 100644
--- a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
@@ -11,7 +11,6 @@ exports[`allows customizing Route's type via generics 1`] = `
       undefined,
     ]
   }
-  testID="bottom-navigation"
 >
   <View
     style={
@@ -20,13 +19,13 @@ exports[`allows customizing Route's type via generics 1`] = `
           "flex": 1,
         },
         {
-          "backgroundColor": "rgba(255, 251, 254, 1)",
+          "backgroundColor": "rgba(254, 247, 255, 1)",
         },
       ]
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -66,124 +65,112 @@ exports[`allows customizing Route's type via generics 1`] = `
           }
         }
       >
-        First
+        <Text>
+          First
+        </Text>
       </View>
     </View>
   </View>
   <View
     collapsable={false}
+    onLayout={[Function]}
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
+        "pointerEvents": "none",
         "right": 0,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
       }
     }
-    testID="bottom-navigation-bar-outer-layer"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
         {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
+          "alignItems": "center",
+          "backgroundColor": "rgba(243, 237, 247, 1)",
+          "overflow": "hidden",
         }
       }
-      testID="bottom-navigation-bar"
     >
       <View
-        collapsable={false}
+        role="tablist"
         style={
-          {
-            "alignItems": "center",
-            "backgroundColor": "rgb(243, 237, 246)",
-            "overflow": "hidden",
-          }
+          [
+            {
+              "flexDirection": "row",
+            },
+            {
+              "marginBottom": 0,
+              "marginHorizontal": 0,
+            },
+            false,
+          ]
         }
-        testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": true,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "paddingVertical": 6,
               },
               {
-                "marginBottom": 0,
-                "marginHorizontal": 0,
+                "paddingVertical": 0,
               },
-              false,
             ]
           }
-          testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": true,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
                 }
               }
             >
@@ -192,269 +179,275 @@ exports[`allows customizing Route's type via generics 1`] = `
                 style={
                   {
                     "alignSelf": "center",
+                    "backgroundColor": "rgba(232, 222, 248, 1)",
+                    "borderRadius": 16,
                     "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                    "width": 64,
                   }
                 }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignSelf": "center",
-                      "backgroundColor": "rgba(232, 222, 248, 1)",
-                      "borderRadius": 16,
-                      "height": 32,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                      "width": 64,
-                    }
+              />
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                }
+              />
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
-                />
-                <View
-                  collapsable={false}
-                  style={
+                }
+              />
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 0,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(29, 27, 32, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(28, 27, 31, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    First
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
+                      ],
+                    ]
                   }
                 >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    selectable={false}
-                    style={
+                  First
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(29, 27, 32, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(28, 27, 31, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    First
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  First
+                </Text>
               </View>
             </View>
           </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
                 }
               }
             >
@@ -462,201 +455,192 @@ exports[`allows customizing Route's type via generics 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+              />
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
-                />
-                <View
-                  collapsable={false}
-                  style={
+                }
+              />
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 1,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Second
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
+                      ],
+                    ]
                   }
                 >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "textAlign": "left",
-                        },
+                  Second
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
+                      [
                         {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Second
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  Second
+                </Text>
               </View>
             </View>
           </View>
@@ -667,7 +651,7 @@ exports[`allows customizing Route's type via generics 1`] = `
 </View>
 `;
 
-exports[`hides labels in non-shifting bottom navigation 1`] = `
+exports[`applies maxTabBarWidth styling if compact prop is truthy 1`] = `
 <View
   style={
     [
@@ -687,13 +671,13 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
           "flex": 1,
         },
         {
-          "backgroundColor": "rgba(255, 251, 254, 1)",
+          "backgroundColor": "rgba(254, 247, 255, 1)",
         },
       ]
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -733,125 +717,252 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
           }
         }
       >
-        Route: 0
+        <Text>
+          Route: 0
+        </Text>
+      </View>
+    </View>
+    <View
+      aria-hidden={true}
+      collapsable={false}
+      importantForAccessibility="no-hide-descendants"
+      pointerEvents="none"
+      removeClippedSubviews={true}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 0,
+          },
+          {
+            "display": undefined,
+          },
+        ]
+      }
+      testID="RouteScreen: 1"
+    >
+      <View
+        collapsable={false}
+        renderToHardwareTextureAndroid={false}
+        style={
+          {
+            "flex": 1,
+            "opacity": 0,
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 9999,
+              },
+            ],
+          }
+        }
+      >
+        <Text>
+          Route: 1
+        </Text>
+      </View>
+    </View>
+    <View
+      aria-hidden={true}
+      collapsable={false}
+      importantForAccessibility="no-hide-descendants"
+      pointerEvents="none"
+      removeClippedSubviews={true}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 0,
+          },
+          {
+            "display": undefined,
+          },
+        ]
+      }
+      testID="RouteScreen: 3"
+    >
+      <View
+        collapsable={false}
+        renderToHardwareTextureAndroid={false}
+        style={
+          {
+            "flex": 1,
+            "opacity": 0,
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 9999,
+              },
+            ],
+          }
+        }
+      >
+        <Text>
+          Route: 3
+        </Text>
+      </View>
+    </View>
+    <View
+      aria-hidden={true}
+      collapsable={false}
+      importantForAccessibility="no-hide-descendants"
+      pointerEvents="none"
+      removeClippedSubviews={true}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 0,
+          },
+          {
+            "display": undefined,
+          },
+        ]
+      }
+      testID="RouteScreen: 4"
+    >
+      <View
+        collapsable={false}
+        renderToHardwareTextureAndroid={false}
+        style={
+          {
+            "flex": 1,
+            "opacity": 0,
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 9999,
+              },
+            ],
+          }
+        }
+      >
+        <Text>
+          Route: 4
+        </Text>
       </View>
     </View>
   </View>
   <View
     collapsable={false}
+    onLayout={[Function]}
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
+        "pointerEvents": "none",
         "right": 0,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
       }
     }
-    testID="bottom-navigation-bar-outer-layer"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
         {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
+          "alignItems": "center",
+          "backgroundColor": "rgba(243, 237, 247, 1)",
+          "overflow": "hidden",
         }
       }
-      testID="bottom-navigation-bar"
     >
       <View
-        collapsable={false}
+        role="tablist"
         style={
-          {
-            "alignItems": "center",
-            "backgroundColor": "rgb(243, 237, 246)",
-            "overflow": "hidden",
-          }
+          [
+            {
+              "flexDirection": "row",
+            },
+            {
+              "marginBottom": 0,
+              "marginHorizontal": 0,
+            },
+            {
+              "maxWidth": 480,
+            },
+          ]
         }
-        testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": true,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "paddingVertical": 6,
               },
               {
-                "marginBottom": 0,
-                "marginHorizontal": 0,
+                "paddingVertical": 0,
               },
-              false,
             ]
           }
-          testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": true,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "alignItems": "center",
-                  "height": 80,
+                  "alignSelf": "center",
+                  "height": 32,
                   "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
                 }
               }
             >
@@ -860,209 +971,155 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                 style={
                   {
                     "alignSelf": "center",
+                    "backgroundColor": "rgba(232, 222, 248, 1)",
+                    "borderRadius": 16,
                     "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                    "width": 64,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "alignSelf": "center",
-                      "backgroundColor": "rgba(232, 222, 248, 1)",
-                      "borderRadius": 16,
-                      "height": 32,
-                      "transform": [
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
                         {
-                          "scaleX": 1,
+                          "backgroundColor": "transparent",
                         },
                       ],
-                      "width": 64,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                    ]
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                  magnify
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    magnify
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  magnify
+                </Text>
+              </View>
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 0,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    magnify
-                  </Text>
-                </View>
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
                         "alignSelf": "flex-end",
-                        "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
-                        "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
                         "overflow": "hidden",
-                        "paddingHorizontal": 3,
                         "textAlign": "center",
                         "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                      },
+                      {
+                        "opacity": 0,
+                      },
+                      {
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 9999,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
             </View>
-          </View>
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
-            }
-          >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "alignItems": "center",
-                  "height": 80,
-                  "justifyContent": "center",
+                  "height": 16,
+                  "paddingBottom": 2,
                 }
               }
             >
@@ -1070,193 +1127,179 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
                   style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
                           },
                           {
-                            "backgroundColor": "transparent",
+                            "color": "rgba(29, 27, 32, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
                           },
                         ],
-                      ]
-                    }
-                  >
-                    camera
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                      ],
+                    ]
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                  Route: 0
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
                           },
                           {
-                            "backgroundColor": "transparent",
+                            "color": "rgba(29, 27, 32, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
                           },
                         ],
-                      ]
-                    }
-                  >
-                    camera
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
+                      ],
                     ]
                   }
                 >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "alignSelf": "flex-end",
-                        "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
-                        "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                  Route: 0
+                </Text>
               </View>
             </View>
           </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "alignItems": "center",
-                  "height": 80,
+                  "alignSelf": "center",
+                  "height": 32,
                   "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
                 }
               }
             >
@@ -1264,335 +1307,319 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                  camera
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    inbox
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  camera
+                </Text>
+              </View>
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 1,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "opacity": 0,
+                      },
+                      {
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 9999,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
                   }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                />
+              </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
                           },
                           {
-                            "backgroundColor": "transparent",
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
                           },
                         ],
-                      ]
-                    }
-                  >
-                    inbox
-                  </Text>
-                </View>
-                <View
+                      ],
+                    ]
+                  }
+                >
+                  Route: 1
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "textAlign": "left",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
                       },
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        [
+                          {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ],
                     ]
                   }
                 >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "alignSelf": "flex-end",
-                        "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
-                        "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                  Route: 1
+                </Text>
               </View>
             </View>
           </View>
         </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`hides labels in shifting bottom navigation 1`] = `
-<View
-  style={
-    [
-      {
-        "flex": 1,
-        "overflow": "hidden",
-      },
-      undefined,
-    ]
-  }
-  testID="bottom-navigation"
->
-  <View
-    style={
-      [
-        {
-          "flex": 1,
-        },
-        {
-          "backgroundColor": "rgba(255, 251, 254, 1)",
-        },
-      ]
-    }
-  >
-    <View
-      accessibilityElementsHidden={false}
-      collapsable={false}
-      importantForAccessibility="auto"
-      pointerEvents="auto"
-      removeClippedSubviews={false}
-      style={
-        [
-          {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "zIndex": 1,
-          },
-          {
-            "display": undefined,
-          },
-        ]
-      }
-      testID="RouteScreen: 0"
-    >
-      <View
-        collapsable={false}
-        renderToHardwareTextureAndroid={false}
-        style={
-          {
-            "flex": 1,
-            "opacity": 1,
-            "transform": [
-              {
-                "translateX": 0,
-              },
-              {
-                "translateY": 0,
-              },
-            ],
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
           }
-        }
-      >
-        Route: 0
-      </View>
-    </View>
-  </View>
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "transparent",
-        "bottom": 0,
-        "left": 0,
-        "right": 0,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
-      }
-    }
-    testID="bottom-navigation-bar-outer-layer"
-  >
-    <View
-      collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
-      style={
-        {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-        }
-      }
-      testID="bottom-navigation-bar"
-    >
-      <View
-        collapsable={false}
-        style={
-          {
-            "alignItems": "center",
-            "backgroundColor": "rgb(243, 237, 246)",
-            "overflow": "hidden",
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
           }
-        }
-        testID="bottom-navigation-bar-content"
-      >
-        <View
-          accessibilityRole="tablist"
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "paddingVertical": 6,
               },
               {
-                "marginBottom": 0,
-                "marginHorizontal": 0,
+                "paddingVertical": 0,
               },
-              false,
             ]
           }
-          testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": true,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "alignItems": "center",
-                  "height": 80,
+                  "alignSelf": "center",
+                  "height": 32,
                   "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
                 }
               }
             >
@@ -1600,210 +1627,139 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "alignSelf": "center",
-                      "backgroundColor": "rgba(232, 222, 248, 1)",
-                      "borderRadius": 16,
-                      "height": 32,
-                      "transform": [
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
                         {
-                          "scaleX": 1,
+                          "backgroundColor": "transparent",
                         },
                       ],
-                      "width": 64,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                    ]
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                  inbox
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    magnify
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  inbox
+                </Text>
+              </View>
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 0,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    magnify
-                  </Text>
-                </View>
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
             </View>
-          </View>
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
-            }
-          >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "alignItems": "center",
-                  "height": 80,
-                  "justifyContent": "center",
+                  "height": 16,
+                  "paddingBottom": 2,
                 }
               }
             >
@@ -1811,193 +1767,5840 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
                   style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
                           },
                           {
-                            "backgroundColor": "transparent",
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
                           },
                         ],
-                      ]
-                    }
-                  >
-                    camera
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                      ],
+                    ]
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
+                  Route: 2
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        [
+                          {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ],
+                    ]
+                  }
+                >
+                  Route: 2
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
+          <View
+            pointerEvents="none"
+            style={
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                {
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  heart
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  heart
+                </Text>
+              </View>
+              <View
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "position": "absolute",
+                    },
+                    {
+                      "right": 0,
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "opacity": 0,
+                      },
+                      {
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 9999,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
+              </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        [
+                          {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ],
+                    ]
+                  }
+                >
+                  Route: 3
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        [
+                          {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ],
+                    ]
+                  }
+                >
+                  Route: 3
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
+          <View
+            pointerEvents="none"
+            style={
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                {
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  shopping-music
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  shopping-music
+                </Text>
+              </View>
+              <View
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "position": "absolute",
+                    },
+                    {
+                      "right": 0,
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "opacity": 0,
+                      },
+                      {
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 9999,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
+              </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        [
+                          {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ],
+                    ]
+                  }
+                >
+                  Route: 4
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        [
+                          {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ],
+                    ]
+                  }
+                >
+                  Route: 4
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`does not apply maxTabBarWidth styling if compact prop is falsy 1`] = `
+<View
+  style={
+    [
+      {
+        "flex": 1,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  testID="bottom-navigation"
+>
+  <View
+    style={
+      [
+        {
+          "flex": 1,
+        },
+        {
+          "backgroundColor": "rgba(254, 247, 255, 1)",
+        },
+      ]
+    }
+  >
+    <View
+      aria-hidden={false}
+      collapsable={false}
+      importantForAccessibility="auto"
+      pointerEvents="auto"
+      removeClippedSubviews={false}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 1,
+          },
+          {
+            "display": undefined,
+          },
+        ]
+      }
+      testID="RouteScreen: 0"
+    >
+      <View
+        collapsable={false}
+        renderToHardwareTextureAndroid={false}
+        style={
+          {
+            "flex": 1,
+            "opacity": 1,
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 0,
+              },
+            ],
+          }
+        }
+      >
+        <Text>
+          Route: 0
+        </Text>
+      </View>
+    </View>
+    <View
+      aria-hidden={true}
+      collapsable={false}
+      importantForAccessibility="no-hide-descendants"
+      pointerEvents="none"
+      removeClippedSubviews={true}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 0,
+          },
+          {
+            "display": undefined,
+          },
+        ]
+      }
+      testID="RouteScreen: 1"
+    >
+      <View
+        collapsable={false}
+        renderToHardwareTextureAndroid={false}
+        style={
+          {
+            "flex": 1,
+            "opacity": 0,
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 9999,
+              },
+            ],
+          }
+        }
+      >
+        <Text>
+          Route: 1
+        </Text>
+      </View>
+    </View>
+    <View
+      aria-hidden={true}
+      collapsable={false}
+      importantForAccessibility="no-hide-descendants"
+      pointerEvents="none"
+      removeClippedSubviews={true}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 0,
+          },
+          {
+            "display": undefined,
+          },
+        ]
+      }
+      testID="RouteScreen: 3"
+    >
+      <View
+        collapsable={false}
+        renderToHardwareTextureAndroid={false}
+        style={
+          {
+            "flex": 1,
+            "opacity": 0,
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 9999,
+              },
+            ],
+          }
+        }
+      >
+        <Text>
+          Route: 3
+        </Text>
+      </View>
+    </View>
+    <View
+      aria-hidden={true}
+      collapsable={false}
+      importantForAccessibility="no-hide-descendants"
+      pointerEvents="none"
+      removeClippedSubviews={true}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 0,
+          },
+          {
+            "display": undefined,
+          },
+        ]
+      }
+      testID="RouteScreen: 4"
+    >
+      <View
+        collapsable={false}
+        renderToHardwareTextureAndroid={false}
+        style={
+          {
+            "flex": 1,
+            "opacity": 0,
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 9999,
+              },
+            ],
+          }
+        }
+      >
+        <Text>
+          Route: 4
+        </Text>
+      </View>
+    </View>
+  </View>
+  <View
+    collapsable={false}
+    onLayout={[Function]}
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "pointerEvents": "none",
+        "right": 0,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "rgba(243, 237, 247, 1)",
+          "overflow": "hidden",
+        }
+      }
+    >
+      <View
+        role="tablist"
+        style={
+          [
+            {
+              "flexDirection": "row",
+            },
+            {
+              "marginBottom": 0,
+              "marginHorizontal": 0,
+            },
+            false,
+          ]
+        }
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": true,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
+          <View
+            pointerEvents="none"
+            style={
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                {
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignSelf": "center",
+                    "backgroundColor": "rgba(232, 222, 248, 1)",
+                    "borderRadius": 16,
+                    "height": 32,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                    "width": 64,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  magnify
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  magnify
+                </Text>
+              </View>
+              <View
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "position": "absolute",
+                    },
+                    {
+                      "right": 0,
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "opacity": 0,
+                      },
+                      {
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 9999,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
+              </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        [
+                          {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(29, 27, 32, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ],
+                    ]
+                  }
+                >
+                  Route: 0
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        [
+                          {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(29, 27, 32, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ],
+                    ]
+                  }
+                >
+                  Route: 0
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
+          <View
+            pointerEvents="none"
+            style={
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                {
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  camera
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  camera
+                </Text>
+              </View>
+              <View
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "position": "absolute",
+                    },
+                    {
+                      "right": 0,
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "opacity": 0,
+                      },
+                      {
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 9999,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
+              </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        [
+                          {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ],
+                    ]
+                  }
+                >
+                  Route: 1
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        [
+                          {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ],
+                    ]
+                  }
+                >
+                  Route: 1
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
+          <View
+            pointerEvents="none"
+            style={
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                {
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  inbox
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  inbox
+                </Text>
+              </View>
+              <View
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "position": "absolute",
+                    },
+                    {
+                      "right": 0,
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "opacity": 0,
+                      },
+                      {
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 9999,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
+              </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        [
+                          {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ],
+                    ]
+                  }
+                >
+                  Route: 2
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        [
+                          {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ],
+                    ]
+                  }
+                >
+                  Route: 2
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
+          <View
+            pointerEvents="none"
+            style={
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                {
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  heart
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  heart
+                </Text>
+              </View>
+              <View
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "position": "absolute",
+                    },
+                    {
+                      "right": 0,
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "opacity": 0,
+                      },
+                      {
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 9999,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
+              </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        [
+                          {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ],
+                    ]
+                  }
+                >
+                  Route: 3
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        [
+                          {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ],
+                    ]
+                  }
+                >
+                  Route: 3
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
+          <View
+            pointerEvents="none"
+            style={
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                {
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  shopping-music
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  shopping-music
+                </Text>
+              </View>
+              <View
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "position": "absolute",
+                    },
+                    {
+                      "right": 0,
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "opacity": 0,
+                      },
+                      {
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 9999,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
+              </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        [
+                          {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ],
+                    ]
+                  }
+                >
+                  Route: 4
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        [
+                          {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ],
+                    ]
+                  }
+                >
+                  Route: 4
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`hides labels in non-shifting bottom navigation 1`] = `
+<View
+  style={
+    [
+      {
+        "flex": 1,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "flex": 1,
+        },
+        {
+          "backgroundColor": "rgba(254, 247, 255, 1)",
+        },
+      ]
+    }
+  >
+    <View
+      aria-hidden={false}
+      collapsable={false}
+      importantForAccessibility="auto"
+      pointerEvents="auto"
+      removeClippedSubviews={false}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 1,
+          },
+          {
+            "display": undefined,
+          },
+        ]
+      }
+      testID="RouteScreen: 0"
+    >
+      <View
+        collapsable={false}
+        renderToHardwareTextureAndroid={false}
+        style={
+          {
+            "flex": 1,
+            "opacity": 1,
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 0,
+              },
+            ],
+          }
+        }
+      >
+        <Text>
+          Route: 0
+        </Text>
+      </View>
+    </View>
+  </View>
+  <View
+    collapsable={false}
+    onLayout={[Function]}
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "pointerEvents": "none",
+        "right": 0,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "rgba(243, 237, 247, 1)",
+          "overflow": "hidden",
+        }
+      }
+    >
+      <View
+        role="tablist"
+        style={
+          [
+            {
+              "flexDirection": "row",
+            },
+            {
+              "marginBottom": 0,
+              "marginHorizontal": 0,
+            },
+            false,
+          ]
+        }
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": true,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
+          <View
+            pointerEvents="none"
+            style={
+              {
+                "alignItems": "center",
+                "height": 80,
+                "justifyContent": "center",
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                {
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignSelf": "center",
+                    "backgroundColor": "rgba(232, 222, 248, 1)",
+                    "borderRadius": 16,
+                    "height": 32,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                    "width": 64,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  magnify
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  magnify
+                </Text>
+              </View>
+              <View
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "position": "absolute",
+                    },
+                    {
+                      "right": 0,
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "opacity": 0,
+                      },
+                      {
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 9999,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
+          <View
+            pointerEvents="none"
+            style={
+              {
+                "alignItems": "center",
+                "height": 80,
+                "justifyContent": "center",
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                {
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  camera
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  camera
+                </Text>
+              </View>
+              <View
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "position": "absolute",
+                    },
+                    {
+                      "right": 0,
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "opacity": 0,
+                      },
+                      {
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 9999,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
+          <View
+            pointerEvents="none"
+            style={
+              {
+                "alignItems": "center",
+                "height": 80,
+                "justifyContent": "center",
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                {
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  inbox
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  inbox
+                </Text>
+              </View>
+              <View
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "position": "absolute",
+                    },
+                    {
+                      "right": 0,
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "opacity": 0,
+                      },
+                      {
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 9999,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`hides labels in shifting bottom navigation 1`] = `
+<View
+  style={
+    [
+      {
+        "flex": 1,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "flex": 1,
+        },
+        {
+          "backgroundColor": "rgba(254, 247, 255, 1)",
+        },
+      ]
+    }
+  >
+    <View
+      aria-hidden={false}
+      collapsable={false}
+      importantForAccessibility="auto"
+      pointerEvents="auto"
+      removeClippedSubviews={false}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 1,
+          },
+          {
+            "display": undefined,
+          },
+        ]
+      }
+      testID="RouteScreen: 0"
+    >
+      <View
+        collapsable={false}
+        renderToHardwareTextureAndroid={false}
+        style={
+          {
+            "flex": 1,
+            "opacity": 1,
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 0,
+              },
+            ],
+          }
+        }
+      >
+        <Text>
+          Route: 0
+        </Text>
+      </View>
+    </View>
+  </View>
+  <View
+    collapsable={false}
+    onLayout={[Function]}
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "pointerEvents": "none",
+        "right": 0,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "rgba(243, 237, 247, 1)",
+          "overflow": "hidden",
+        }
+      }
+    >
+      <View
+        role="tablist"
+        style={
+          [
+            {
+              "flexDirection": "row",
+            },
+            {
+              "marginBottom": 0,
+              "marginHorizontal": 0,
+            },
+            false,
+          ]
+        }
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": true,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
+          <View
+            pointerEvents="none"
+            style={
+              {
+                "alignItems": "center",
+                "height": 80,
+                "justifyContent": "center",
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                {
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignSelf": "center",
+                    "backgroundColor": "rgba(232, 222, 248, 1)",
+                    "borderRadius": 16,
+                    "height": 32,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                    "width": 64,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  magnify
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  magnify
+                </Text>
+              </View>
+              <View
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "position": "absolute",
+                    },
+                    {
+                      "right": 0,
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "opacity": 0,
+                      },
+                      {
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 9999,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
+          <View
+            pointerEvents="none"
+            style={
+              {
+                "alignItems": "center",
+                "height": 80,
+                "justifyContent": "center",
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                {
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  camera
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  camera
+                </Text>
+              </View>
+              <View
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "position": "absolute",
+                    },
+                    {
+                      "right": 0,
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "opacity": 0,
+                      },
+                      {
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 9999,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
+          <View
+            pointerEvents="none"
+            style={
+              {
+                "alignItems": "center",
+                "height": 80,
+                "justifyContent": "center",
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                {
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  inbox
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  inbox
+                </Text>
+              </View>
+              <View
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "position": "absolute",
+                    },
+                    {
+                      "right": 0,
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "opacity": 0,
+                      },
+                      {
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 9999,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders bottom navigation with getLazy 1`] = `
+<View
+  style={
+    [
+      {
+        "flex": 1,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "flex": 1,
+        },
+        {
+          "backgroundColor": "rgba(254, 247, 255, 1)",
+        },
+      ]
+    }
+  >
+    <View
+      aria-hidden={false}
+      collapsable={false}
+      importantForAccessibility="auto"
+      pointerEvents="auto"
+      removeClippedSubviews={false}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 1,
+          },
+          {
+            "display": undefined,
+          },
+        ]
+      }
+      testID="RouteScreen: 0"
+    >
+      <View
+        collapsable={false}
+        renderToHardwareTextureAndroid={false}
+        style={
+          {
+            "flex": 1,
+            "opacity": 1,
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 0,
+              },
+            ],
+          }
+        }
+      >
+        <Text>
+          Route: 0
+        </Text>
+      </View>
+    </View>
+    <View
+      aria-hidden={true}
+      collapsable={false}
+      importantForAccessibility="no-hide-descendants"
+      pointerEvents="none"
+      removeClippedSubviews={true}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 0,
+          },
+          {
+            "display": undefined,
+          },
+        ]
+      }
+      testID="RouteScreen: 1"
+    >
+      <View
+        collapsable={false}
+        renderToHardwareTextureAndroid={false}
+        style={
+          {
+            "flex": 1,
+            "opacity": 0,
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 9999,
+              },
+            ],
+          }
+        }
+      >
+        <Text>
+          Route: 1
+        </Text>
+      </View>
+    </View>
+    <View
+      aria-hidden={true}
+      collapsable={false}
+      importantForAccessibility="no-hide-descendants"
+      pointerEvents="none"
+      removeClippedSubviews={true}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 0,
+          },
+          {
+            "display": undefined,
+          },
+        ]
+      }
+      testID="RouteScreen: 3"
+    >
+      <View
+        collapsable={false}
+        renderToHardwareTextureAndroid={false}
+        style={
+          {
+            "flex": 1,
+            "opacity": 0,
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 9999,
+              },
+            ],
+          }
+        }
+      >
+        <Text>
+          Route: 3
+        </Text>
+      </View>
+    </View>
+    <View
+      aria-hidden={true}
+      collapsable={false}
+      importantForAccessibility="no-hide-descendants"
+      pointerEvents="none"
+      removeClippedSubviews={true}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 0,
+          },
+          {
+            "display": undefined,
+          },
+        ]
+      }
+      testID="RouteScreen: 4"
+    >
+      <View
+        collapsable={false}
+        renderToHardwareTextureAndroid={false}
+        style={
+          {
+            "flex": 1,
+            "opacity": 0,
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 9999,
+              },
+            ],
+          }
+        }
+      >
+        <Text>
+          Route: 4
+        </Text>
+      </View>
+    </View>
+  </View>
+  <View
+    collapsable={false}
+    onLayout={[Function]}
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "pointerEvents": "none",
+        "right": 0,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "rgba(243, 237, 247, 1)",
+          "overflow": "hidden",
+        }
+      }
+    >
+      <View
+        role="tablist"
+        style={
+          [
+            {
+              "flexDirection": "row",
+            },
+            {
+              "marginBottom": 0,
+              "marginHorizontal": 0,
+            },
+            false,
+          ]
+        }
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": true,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
+          <View
+            pointerEvents="none"
+            style={
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                {
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignSelf": "center",
+                    "backgroundColor": "rgba(232, 222, 248, 1)",
+                    "borderRadius": 16,
+                    "height": 32,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                    "width": 64,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  magnify
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  magnify
+                </Text>
+              </View>
+              <View
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "position": "absolute",
+                    },
+                    {
+                      "right": 0,
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "opacity": 0,
+                      },
+                      {
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 9999,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
+              </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        [
+                          {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(29, 27, 32, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ],
+                    ]
+                  }
+                >
+                  Route: 0
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        [
+                          {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(29, 27, 32, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ],
+                    ]
+                  }
+                >
+                  Route: 0
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
+          <View
+            pointerEvents="none"
+            style={
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                {
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  camera
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  camera
+                </Text>
+              </View>
+              <View
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "position": "absolute",
+                    },
+                    {
+                      "right": 0,
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "opacity": 0,
+                      },
+                      {
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 9999,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
+              </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        [
+                          {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ],
+                    ]
+                  }
+                >
+                  Route: 1
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        [
+                          {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ],
+                    ]
+                  }
+                >
+                  Route: 1
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
+          <View
+            pointerEvents="none"
+            style={
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                {
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  inbox
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  inbox
+                </Text>
+              </View>
+              <View
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "position": "absolute",
+                    },
+                    {
+                      "right": 0,
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "opacity": 0,
+                      },
+                      {
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 9999,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
+              </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        [
+                          {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ],
+                    ]
+                  }
+                >
+                  Route: 2
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        [
+                          {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ],
+                    ]
+                  }
+                >
+                  Route: 2
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
+          <View
+            pointerEvents="none"
+            style={
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                {
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  heart
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  heart
+                </Text>
+              </View>
+              <View
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "position": "absolute",
+                    },
+                    {
+                      "right": 0,
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "opacity": 0,
+                      },
+                      {
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 9999,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
+              </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        [
                           {
                             "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
                           },
                         ],
-                      ]
-                    }
-                  >
-                    camera
-                  </Text>
-                </View>
-                <View
+                      ],
+                    ]
+                  }
+                >
+                  Route: 3
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        [
+                          {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ],
+                    ]
+                  }
+                >
+                  Route: 3
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
+          <View
+            pointerEvents="none"
+            style={
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                {
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  shopping-music
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  shopping-music
+                </Text>
+              </View>
+              <View
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "position": "absolute",
+                    },
+                    {
+                      "right": 0,
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
             </View>
-          </View>
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
-            }
-          >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "alignItems": "center",
-                  "height": 80,
-                  "justifyContent": "center",
+                  "height": 16,
+                  "paddingBottom": 2,
                 }
               }
             >
@@ -2005,140 +7608,112 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
                   style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
                           },
                           {
-                            "backgroundColor": "transparent",
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
                           },
                         ],
-                      ]
-                    }
-                  >
-                    inbox
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                      ],
+                    ]
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                  Route: 4
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
                           },
                           {
-                            "backgroundColor": "transparent",
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
                           },
                         ],
-                      ]
-                    }
-                  >
-                    inbox
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
+                      ],
                     ]
                   }
                 >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "alignSelf": "flex-end",
-                        "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
-                        "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                  Route: 4
+                </Text>
               </View>
             </View>
           </View>
@@ -2149,7 +7724,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
 </View>
 `;
 
-exports[`renders bottom navigation with getLazy 1`] = `
+exports[`renders bottom navigation with scene animation 1`] = `
 <View
   style={
     [
@@ -2158,160 +7733,27 @@ exports[`renders bottom navigation with getLazy 1`] = `
         "overflow": "hidden",
       },
       undefined,
-    ]
-  }
-  testID="bottom-navigation"
->
-  <View
-    style={
-      [
-        {
-          "flex": 1,
-        },
-        {
-          "backgroundColor": "rgba(255, 251, 254, 1)",
-        },
-      ]
-    }
-  >
-    <View
-      accessibilityElementsHidden={false}
-      collapsable={false}
-      importantForAccessibility="auto"
-      pointerEvents="auto"
-      removeClippedSubviews={false}
-      style={
-        [
-          {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "zIndex": 1,
-          },
-          {
-            "display": undefined,
-          },
-        ]
-      }
-      testID="RouteScreen: 0"
-    >
-      <View
-        collapsable={false}
-        renderToHardwareTextureAndroid={false}
-        style={
-          {
-            "flex": 1,
-            "opacity": 1,
-            "transform": [
-              {
-                "translateX": 0,
-              },
-              {
-                "translateY": 0,
-              },
-            ],
-          }
-        }
-      >
-        Route: 0
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      collapsable={false}
-      importantForAccessibility="no-hide-descendants"
-      pointerEvents="none"
-      removeClippedSubviews={true}
-      style={
-        [
-          {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "zIndex": 0,
-          },
-          {
-            "display": undefined,
-          },
-        ]
-      }
-      testID="RouteScreen: 1"
-    >
-      <View
-        collapsable={false}
-        renderToHardwareTextureAndroid={false}
-        style={
-          {
-            "flex": 1,
-            "opacity": 0,
-            "transform": [
-              {
-                "translateX": 0,
-              },
-              {
-                "translateY": 9999,
-              },
-            ],
-          }
-        }
-      >
-        Route: 1
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      collapsable={false}
-      importantForAccessibility="no-hide-descendants"
-      pointerEvents="none"
-      removeClippedSubviews={true}
-      style={
-        [
-          {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "zIndex": 0,
-          },
-          {
-            "display": undefined,
-          },
-        ]
-      }
-      testID="RouteScreen: 3"
-    >
-      <View
-        collapsable={false}
-        renderToHardwareTextureAndroid={false}
-        style={
-          {
-            "flex": 1,
-            "opacity": 0,
-            "transform": [
-              {
-                "translateX": 0,
-              },
-              {
-                "translateY": 9999,
-              },
-            ],
-          }
-        }
-      >
-        Route: 3
-      </View>
-    </View>
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "flex": 1,
+        },
+        {
+          "backgroundColor": "rgba(254, 247, 255, 1)",
+        },
+      ]
+    }
+  >
     <View
-      accessibilityElementsHidden={true}
+      aria-hidden={false}
       collapsable={false}
-      importantForAccessibility="no-hide-descendants"
-      pointerEvents="none"
-      removeClippedSubviews={true}
+      importantForAccessibility="auto"
+      pointerEvents="auto"
+      removeClippedSubviews={false}
       style={
         [
           {
@@ -2320,151 +7762,144 @@ exports[`renders bottom navigation with getLazy 1`] = `
             "position": "absolute",
             "right": 0,
             "top": 0,
-            "zIndex": 0,
+            "zIndex": 1,
           },
           {
             "display": undefined,
           },
         ]
       }
-      testID="RouteScreen: 4"
+      testID="RouteScreen: 0"
     >
       <View
         collapsable={false}
-        renderToHardwareTextureAndroid={false}
+        renderToHardwareTextureAndroid={true}
         style={
           {
             "flex": 1,
-            "opacity": 0,
+            "opacity": 1,
             "transform": [
               {
                 "translateX": 0,
               },
               {
-                "translateY": 9999,
+                "translateY": 0,
               },
             ],
           }
         }
       >
-        Route: 4
+        <Text>
+          Route: 0
+        </Text>
       </View>
     </View>
   </View>
   <View
     collapsable={false}
+    onLayout={[Function]}
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
+        "pointerEvents": "none",
         "right": 0,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
       }
     }
-    testID="bottom-navigation-bar-outer-layer"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
         {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
+          "alignItems": "center",
+          "backgroundColor": "rgba(243, 237, 247, 1)",
+          "overflow": "hidden",
         }
       }
-      testID="bottom-navigation-bar"
     >
       <View
-        collapsable={false}
+        role="tablist"
         style={
-          {
-            "alignItems": "center",
-            "backgroundColor": "rgb(243, 237, 246)",
-            "overflow": "hidden",
-          }
+          [
+            {
+              "flexDirection": "row",
+            },
+            {
+              "marginBottom": 0,
+              "marginHorizontal": 0,
+            },
+            false,
+          ]
         }
-        testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": true,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "paddingVertical": 6,
               },
               {
-                "marginBottom": 0,
-                "marginHorizontal": 0,
+                "paddingVertical": 0,
               },
-              false,
             ]
           }
-          testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": true,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "transform": [
+                    {
+                      "translateY": 0,
+                    },
+                  ],
+                  "width": 32,
                 }
               }
             >
@@ -2473,329 +7908,284 @@ exports[`renders bottom navigation with getLazy 1`] = `
                 style={
                   {
                     "alignSelf": "center",
+                    "backgroundColor": "rgba(232, 222, 248, 1)",
+                    "borderRadius": 16,
                     "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                    "width": 64,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "alignSelf": "center",
-                      "backgroundColor": "rgba(232, 222, 248, 1)",
-                      "borderRadius": 16,
-                      "height": 32,
-                      "transform": [
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
                         {
-                          "scaleX": 1,
+                          "backgroundColor": "transparent",
                         },
                       ],
-                      "width": 64,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                    ]
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                  magnify
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    magnify
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  magnify
+                </Text>
+              </View>
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 0,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    magnify
-                  </Text>
-                </View>
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
-                            "fontFamily": "System",
+                            "backgroundColor": "transparent",
                             "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
+                            "height": 56,
+                            "textAlign": "center",
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(28, 27, 31, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ],
-                      ]
-                    }
-                  >
-                    Route: 0
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
-                        },
-                        [
                           {
+                            "color": "rgba(29, 27, 32, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(28, 27, 31, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 0
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  Route: 0
+                </Text>
               </View>
             </View>
           </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "transform": [
+                    {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 32,
                 }
               }
             >
@@ -2803,313 +8193,268 @@ exports[`renders bottom navigation with getLazy 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  camera
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    camera
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  camera
+                </Text>
+              </View>
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 1,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    camera
-                  </Text>
-                </View>
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
-                            "fontFamily": "System",
+                            "backgroundColor": "transparent",
                             "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
+                            "height": 56,
+                            "textAlign": "center",
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ],
-                      ]
-                    }
-                  >
-                    Route: 1
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
-                        },
-                        [
                           {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 1
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  Route: 1
+                </Text>
               </View>
             </View>
           </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "transform": [
+                    {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 32,
                 }
               }
             >
@@ -3117,313 +8462,268 @@ exports[`renders bottom navigation with getLazy 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                  inbox
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    inbox
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  inbox
+                </Text>
+              </View>
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 1,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    inbox
-                  </Text>
-                </View>
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
-                            "fontFamily": "System",
+                            "backgroundColor": "transparent",
                             "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
+                            "height": 56,
+                            "textAlign": "center",
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ],
-                      ]
-                    }
-                  >
-                    Route: 2
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
-                        },
-                        [
                           {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 2
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  Route: 2
+                </Text>
               </View>
             </View>
           </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "transform": [
+                    {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 32,
                 }
               }
             >
@@ -3431,313 +8731,268 @@ exports[`renders bottom navigation with getLazy 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                  heart
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    heart
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
+                      ],
+                    ]
+                  }
+                >
+                  heart
+                </Text>
+              </View>
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 1,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    heart
-                  </Text>
-                </View>
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
-                            "fontFamily": "System",
+                            "backgroundColor": "transparent",
                             "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
+                            "height": 56,
+                            "textAlign": "center",
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ],
-                      ]
-                    }
-                  >
-                    Route: 3
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
-                        },
-                        [
                           {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 3
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  Route: 3
+                </Text>
               </View>
             </View>
           </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "transform": [
+                    {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 32,
                 }
               }
             >
@@ -3745,261 +9000,196 @@ exports[`renders bottom navigation with getLazy 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  shopping-music
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    shopping-music
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  shopping-music
+                </Text>
+              </View>
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 1,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    shopping-music
-                  </Text>
-                </View>
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
-                            "fontFamily": "System",
+                            "backgroundColor": "transparent",
                             "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
+                            "height": 56,
+                            "textAlign": "center",
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ],
-                      ]
-                    }
-                  >
-                    Route: 4
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
-                        },
-                        [
                           {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 4
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  Route: 4
+                </Text>
               </View>
             </View>
           </View>
@@ -4010,7 +9200,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
 </View>
 `;
 
-exports[`renders bottom navigation with scene animation 1`] = `
+exports[`renders custom background color passed to barStyle property 1`] = `
 <View
   style={
     [
@@ -4030,13 +9220,13 @@ exports[`renders bottom navigation with scene animation 1`] = `
           "flex": 1,
         },
         {
-          "backgroundColor": "rgba(255, 251, 254, 1)",
+          "backgroundColor": "rgba(254, 247, 255, 1)",
         },
       ]
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -4060,7 +9250,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
     >
       <View
         collapsable={false}
-        renderToHardwareTextureAndroid={true}
+        renderToHardwareTextureAndroid={false}
         style={
           {
             "flex": 1,
@@ -4076,124 +9266,113 @@ exports[`renders bottom navigation with scene animation 1`] = `
           }
         }
       >
-        Route: 0
+        <Text>
+          Route: 0
+        </Text>
       </View>
     </View>
   </View>
   <View
     collapsable={false}
+    onLayout={[Function]}
     style={
       {
-        "backgroundColor": "transparent",
+        "backgroundColor": "rgba(228, 105, 98, 1)",
         "bottom": 0,
         "left": 0,
+        "pointerEvents": "none",
         "right": 0,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
       }
     }
-    testID="bottom-navigation-bar-outer-layer"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
         {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
+          "alignItems": "center",
+          "backgroundColor": "rgba(228, 105, 98, 1)",
+          "overflow": "hidden",
         }
       }
-      testID="bottom-navigation-bar"
     >
       <View
-        collapsable={false}
+        role="tablist"
         style={
-          {
-            "alignItems": "center",
-            "backgroundColor": "rgb(243, 237, 246)",
-            "overflow": "hidden",
-          }
+          [
+            {
+              "flexDirection": "row",
+            },
+            {
+              "marginBottom": 0,
+              "marginHorizontal": 0,
+            },
+            false,
+          ]
         }
-        testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": true,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "paddingVertical": 6,
               },
               {
-                "marginBottom": 0,
-                "marginHorizontal": 0,
+                "paddingVertical": 0,
               },
-              false,
             ]
           }
-          testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": true,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
                 }
               }
             >
@@ -4202,278 +9381,335 @@ exports[`renders bottom navigation with scene animation 1`] = `
                 style={
                   {
                     "alignSelf": "center",
+                    "backgroundColor": "rgba(232, 222, 248, 1)",
+                    "borderRadius": 16,
                     "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
                     "transform": [
                       {
-                        "translateY": 0,
+                        "scaleX": 1,
                       },
                     ],
-                    "width": 32,
+                    "width": 64,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "alignSelf": "center",
-                      "backgroundColor": "rgba(232, 222, 248, 1)",
-                      "borderRadius": 16,
-                      "height": 32,
-                      "transform": [
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
                         {
-                          "scaleX": 1,
+                          "backgroundColor": "transparent",
                         },
                       ],
-                      "width": 64,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                    ]
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                  magnify
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    magnify
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  magnify
+                </Text>
+              </View>
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 0,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "opacity": 0,
+                      },
+                      {
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 9999,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
                   }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                />
+              </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
                           },
                           {
-                            "backgroundColor": "transparent",
+                            "color": "rgba(29, 27, 32, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
                           },
                         ],
-                      ]
-                    }
-                  >
-                    magnify
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
+                      ],
                     ]
                   }
                 >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "alignSelf": "flex-end",
-                        "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
-                        "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                  Route: 0
+                </Text>
               </View>
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(29, 27, 32, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(28, 27, 31, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 0
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  Route: 0
+                </Text>
               </View>
             </View>
           </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
                 }
               }
             >
@@ -4481,262 +9717,139 @@ exports[`renders bottom navigation with scene animation 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    camera
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
                         {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
+                          "backgroundColor": "transparent",
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    camera
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
+                      ],
                     ]
                   }
                 >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "alignSelf": "flex-end",
-                        "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
-                        "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                  camera
+                </Text>
               </View>
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
-                        },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
+                          "lineHeight": 24,
+                          "transform": [
                             {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
+                              "scaleX": 1,
                             },
                           ],
-                        ],
-                      ]
-                    }
-                  >
-                    Route: 1
-                  </Text>
-                </View>
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  camera
+                </Text>
+              </View>
+              <View
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "position": "absolute",
+                    },
+                    {
+                      "right": 0,
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "opacity": 0,
+                      },
+                      {
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 9999,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
             </View>
-          </View>
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
-            }
-          >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "height": 16,
+                  "paddingBottom": 2,
                 }
               }
             >
@@ -4744,262 +9857,179 @@ exports[`renders bottom navigation with scene animation 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
                   style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
                           {
                             "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    inbox
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
                           },
                           {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    inbox
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ],
                     ]
                   }
                 >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "alignSelf": "flex-end",
-                        "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
-                        "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                  Route: 1
+                </Text>
               </View>
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 2
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  Route: 1
+                </Text>
               </View>
             </View>
           </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
                 }
               }
             >
@@ -5007,262 +10037,139 @@ exports[`renders bottom navigation with scene animation 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    heart
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
                         {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
+                          "backgroundColor": "transparent",
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    heart
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
+                      ],
                     ]
                   }
                 >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "alignSelf": "flex-end",
-                        "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
-                        "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                  inbox
+                </Text>
               </View>
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
-                        },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
+                          "lineHeight": 24,
+                          "transform": [
                             {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
+                              "scaleX": 1,
                             },
                           ],
-                        ],
-                      ]
-                    }
-                  >
-                    Route: 3
-                  </Text>
-                </View>
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  inbox
+                </Text>
+              </View>
+              <View
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "position": "absolute",
+                    },
+                    {
+                      "right": 0,
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "opacity": 0,
+                      },
+                      {
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 9999,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
             </View>
-          </View>
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
-            }
-          >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "height": 16,
+                  "paddingBottom": 2,
                 }
               }
             >
@@ -5270,210 +10177,112 @@ exports[`renders bottom navigation with scene animation 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
                   style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
                           {
                             "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    shopping-music
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
                           },
                           {
-                            "backgroundColor": "transparent",
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
                           },
                         ],
-                      ]
-                    }
-                  >
-                    shopping-music
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
+                      ],
                     ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "alignSelf": "flex-end",
-                        "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
-                        "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                  }
+                >
+                  Route: 2
+                </Text>
               </View>
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 4
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  Route: 2
+                </Text>
               </View>
             </View>
           </View>
@@ -5495,7 +10304,6 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
       undefined,
     ]
   }
-  testID="bottom-navigation"
 >
   <View
     style={
@@ -5504,13 +10312,13 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
           "flex": 1,
         },
         {
-          "backgroundColor": "rgba(255, 251, 254, 1)",
+          "backgroundColor": "rgba(254, 247, 255, 1)",
         },
       ]
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -5550,124 +10358,112 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
           }
         }
       >
-        Route: 0
+        <Text>
+          Route: 0
+        </Text>
       </View>
     </View>
   </View>
   <View
     collapsable={false}
+    onLayout={[Function]}
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
+        "pointerEvents": "none",
         "right": 0,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
       }
     }
-    testID="bottom-navigation-bar-outer-layer"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
         {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
+          "alignItems": "center",
+          "backgroundColor": "rgba(243, 237, 247, 1)",
+          "overflow": "hidden",
         }
       }
-      testID="bottom-navigation-bar"
     >
       <View
-        collapsable={false}
+        role="tablist"
         style={
-          {
-            "alignItems": "center",
-            "backgroundColor": "rgb(243, 237, 246)",
-            "overflow": "hidden",
-          }
+          [
+            {
+              "flexDirection": "row",
+            },
+            {
+              "marginBottom": 0,
+              "marginHorizontal": 0,
+            },
+            false,
+          ]
         }
-        testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": true,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "paddingVertical": 6,
               },
               {
-                "marginBottom": 0,
-                "marginHorizontal": 0,
+                "paddingVertical": 0,
               },
-              false,
             ]
           }
-          testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": true,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
                 }
               }
             >
@@ -5676,196 +10472,210 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                 style={
                   {
                     "alignSelf": "center",
+                    "backgroundColor": "rgba(232, 222, 248, 1)",
+                    "borderRadius": 16,
                     "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                    "width": 64,
                   }
                 }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignSelf": "center",
-                      "backgroundColor": "rgba(232, 222, 248, 1)",
-                      "borderRadius": 16,
-                      "height": 32,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                      "width": 64,
-                    }
+              />
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                }
+              />
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
-                />
-                <View
-                  collapsable={false}
-                  style={
+                }
+              />
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 0,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
                   style={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "color": "rgba(29, 27, 32, 1)",
                     }
                   }
                 >
-                  <text
-                    color="rgba(28, 27, 31, 1)"
-                  >
-                    Route: 0
-                  </text>
-                </View>
-                <View
-                  collapsable={false}
+                  Route: 0
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
                   style={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "color": "rgba(29, 27, 32, 1)",
                     }
                   }
                 >
-                  <text
-                    color="rgba(28, 27, 31, 1)"
-                  >
-                    Route: 0
-                  </text>
-                </View>
+                  Route: 0
+                </Text>
               </View>
             </View>
           </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
                 }
               }
             >
@@ -5873,180 +10683,194 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+              />
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
-                />
-                <View
-                  collapsable={false}
-                  style={
+                }
+              />
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 1,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
                   style={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "color": "rgba(73, 69, 79, 1)",
                     }
                   }
                 >
-                  <text
-                    color="rgba(73, 69, 79, 1)"
-                  >
-                    Route: 1
-                  </text>
-                </View>
-                <View
-                  collapsable={false}
+                  Route: 1
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
                   style={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "color": "rgba(73, 69, 79, 1)",
                     }
                   }
                 >
-                  <text
-                    color="rgba(73, 69, 79, 1)"
-                  >
-                    Route: 1
-                  </text>
-                </View>
+                  Route: 1
+                </Text>
               </View>
             </View>
           </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
                 }
               }
             >
@@ -6054,128 +10878,127 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
+              />
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              />
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 1,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
                   style={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "color": "rgba(73, 69, 79, 1)",
                     }
                   }
                 >
-                  <text
-                    color="rgba(73, 69, 79, 1)"
-                  >
-                    Route: 2
-                  </text>
-                </View>
-                <View
-                  collapsable={false}
+                  Route: 2
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
                   style={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "color": "rgba(73, 69, 79, 1)",
                     }
                   }
                 >
-                  <text
-                    color="rgba(73, 69, 79, 1)"
-                  >
-                    Route: 2
-                  </text>
-                </View>
+                  Route: 2
+                </Text>
               </View>
             </View>
           </View>
@@ -6197,7 +11020,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
       undefined,
     ]
   }
-  testID="bottom-navigation"
 >
   <View
     style={
@@ -6206,13 +11028,13 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
           "flex": 1,
         },
         {
-          "backgroundColor": "rgba(255, 251, 254, 1)",
+          "backgroundColor": "rgba(254, 247, 255, 1)",
         },
       ]
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -6252,124 +11074,117 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
           }
         }
       >
-        Route: 0
+        <Text>
+          Route: 0
+        </Text>
       </View>
     </View>
   </View>
   <View
     collapsable={false}
+    onLayout={[Function]}
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
+        "pointerEvents": "none",
         "right": 0,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
       }
     }
-    testID="bottom-navigation-bar-outer-layer"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
         {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
+          "alignItems": "center",
+          "backgroundColor": "rgba(243, 237, 247, 1)",
+          "overflow": "hidden",
         }
       }
-      testID="bottom-navigation-bar"
     >
       <View
-        collapsable={false}
+        role="tablist"
         style={
-          {
-            "alignItems": "center",
-            "backgroundColor": "rgb(243, 237, 246)",
-            "overflow": "hidden",
-          }
+          [
+            {
+              "flexDirection": "row",
+            },
+            {
+              "marginBottom": 0,
+              "marginHorizontal": 0,
+            },
+            false,
+          ]
         }
-        testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": true,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "paddingVertical": 6,
               },
               {
-                "marginBottom": 0,
-                "marginHorizontal": 0,
+                "paddingVertical": 0,
               },
-              false,
             ]
           }
-          testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": true,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "transform": [
+                    {
+                      "translateY": 0,
+                    },
+                  ],
+                  "width": 32,
                 }
               }
             >
@@ -6378,182 +11193,192 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                 style={
                   {
                     "alignSelf": "center",
+                    "backgroundColor": "rgba(232, 222, 248, 1)",
+                    "borderRadius": 16,
                     "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
                     "transform": [
                       {
-                        "translateY": 0,
+                        "scaleX": 1,
                       },
                     ],
-                    "width": 32,
+                    "width": 64,
                   }
                 }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignSelf": "center",
-                      "backgroundColor": "rgba(232, 222, 248, 1)",
-                      "borderRadius": 16,
-                      "height": 32,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                      "width": 64,
-                    }
+              />
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                }
+              />
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
-                />
-                <View
-                  collapsable={false}
-                  style={
+                }
+              />
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 0,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
                   style={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "color": "rgba(29, 27, 32, 1)",
                     }
                   }
                 >
-                  <text
-                    color="rgba(28, 27, 31, 1)"
-                  >
-                    Route: 0
-                  </text>
-                </View>
+                  Route: 0
+                </Text>
               </View>
             </View>
           </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "transform": [
+                    {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 32,
                 }
               }
             >
@@ -6561,166 +11386,176 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+              />
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
-                />
-                <View
-                  collapsable={false}
-                  style={
+                }
+              />
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 1,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
                   style={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "color": "rgba(73, 69, 79, 1)",
                     }
                   }
                 >
-                  <text
-                    color="rgba(73, 69, 79, 1)"
-                  >
-                    Route: 1
-                  </text>
-                </View>
+                  Route: 1
+                </Text>
               </View>
             </View>
           </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "transform": [
+                    {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 32,
                 }
               }
             >
@@ -6728,166 +11563,176 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+              />
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
-                />
-                <View
-                  collapsable={false}
-                  style={
+                }
+              />
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 1,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
                   style={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "color": "rgba(73, 69, 79, 1)",
                     }
                   }
                 >
-                  <text
-                    color="rgba(73, 69, 79, 1)"
-                  >
-                    Route: 2
-                  </text>
-                </View>
+                  Route: 2
+                </Text>
               </View>
             </View>
           </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "transform": [
+                    {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 32,
                 }
               }
             >
@@ -6895,166 +11740,176 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+              />
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
-                />
-                <View
-                  collapsable={false}
-                  style={
+                }
+              />
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 1,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
                   style={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "color": "rgba(73, 69, 79, 1)",
                     }
                   }
                 >
-                  <text
-                    color="rgba(73, 69, 79, 1)"
-                  >
-                    Route: 3
-                  </text>
-                </View>
+                  Route: 3
+                </Text>
               </View>
             </View>
           </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "transform": [
+                    {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 32,
                 }
               }
             >
@@ -7062,114 +11917,104 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+              />
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
-                />
-                <View
-                  collapsable={false}
-                  style={
+                }
+              />
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 1,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
                   style={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "color": "rgba(73, 69, 79, 1)",
                     }
                   }
                 >
-                  <text
-                    color="rgba(73, 69, 79, 1)"
-                  >
-                    Route: 4
-                  </text>
-                </View>
+                  Route: 4
+                </Text>
               </View>
             </View>
           </View>
@@ -7191,7 +12036,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
       undefined,
     ]
   }
-  testID="bottom-navigation"
 >
   <View
     style={
@@ -7200,13 +12044,13 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
           "flex": 1,
         },
         {
-          "backgroundColor": "rgba(255, 251, 254, 1)",
+          "backgroundColor": "rgba(254, 247, 255, 1)",
         },
       ]
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -7246,124 +12090,112 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
           }
         }
       >
-        Route: 0
+        <Text>
+          Route: 0
+        </Text>
       </View>
     </View>
   </View>
   <View
     collapsable={false}
+    onLayout={[Function]}
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
+        "pointerEvents": "none",
         "right": 0,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
       }
     }
-    testID="bottom-navigation-bar-outer-layer"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
         {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
+          "alignItems": "center",
+          "backgroundColor": "rgba(243, 237, 247, 1)",
+          "overflow": "hidden",
         }
       }
-      testID="bottom-navigation-bar"
     >
       <View
-        collapsable={false}
+        role="tablist"
         style={
-          {
-            "alignItems": "center",
-            "backgroundColor": "rgb(243, 237, 246)",
-            "overflow": "hidden",
-          }
+          [
+            {
+              "flexDirection": "row",
+            },
+            {
+              "marginBottom": 0,
+              "marginHorizontal": 0,
+            },
+            false,
+          ]
         }
-        testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": true,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "paddingVertical": 6,
               },
               {
-                "marginBottom": 0,
-                "marginHorizontal": 0,
+                "paddingVertical": 0,
               },
-              false,
             ]
           }
-          testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": true,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
                 }
               }
             >
@@ -7371,330 +12203,336 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
+                    "alignSelf": "center",
+                    "backgroundColor": "rgba(232, 222, 248, 1)",
+                    "borderRadius": 16,
+                    "height": 32,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                    "width": 64,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#FBF7DB",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  magnify
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "alignSelf": "center",
-                      "backgroundColor": "rgba(232, 222, 248, 1)",
-                      "borderRadius": 16,
-                      "height": 32,
-                      "transform": [
+                    [
+                      {
+                        "color": "#853D4B",
+                        "fontSize": 24,
+                      },
+                      [
                         {
-                          "scaleX": 1,
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
                         },
                       ],
-                      "width": 64,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                    ]
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#FBF7DB",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    magnify
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
+                  magnify
+                </Text>
+              </View>
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 0,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#853D4B",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    magnify
-                  </Text>
-                </View>
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "#FBF7DB",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "#FBF7DB",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 0
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
+                      ],
+                    ]
                   }
                 >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    selectable={false}
-                    style={
+                  Route: 0
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "#853D4B",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "#853D4B",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 0
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  Route: 0
+                </Text>
               </View>
             </View>
           </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
                 }
               }
             >
@@ -7702,313 +12540,319 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                    [
+                      {
+                        "color": "#FBF7DB",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                  camera
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#853D4B",
+                        "fontSize": 24,
+                      },
                       [
                         {
-                          "color": "#FBF7DB",
-                          "fontSize": 24,
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    camera
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  camera
+                </Text>
+              </View>
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 1,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#853D4B",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    camera
-                  </Text>
-                </View>
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "#FBF7DB",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "#FBF7DB",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 1
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
+                      ],
+                    ]
                   }
                 >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    selectable={false}
-                    style={
+                  Route: 1
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "#853D4B",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "#853D4B",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 1
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  Route: 1
+                </Text>
               </View>
             </View>
           </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
                 }
               }
             >
@@ -8016,261 +12860,252 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                    [
+                      {
+                        "color": "#FBF7DB",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                  inbox
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#853D4B",
+                        "fontSize": 24,
+                      },
                       [
                         {
-                          "color": "#FBF7DB",
-                          "fontSize": 24,
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    inbox
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
+                      ],
+                    ]
+                  }
+                >
+                  inbox
+                </Text>
+              </View>
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 1,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#853D4B",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    inbox
-                  </Text>
-                </View>
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "#FBF7DB",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "#FBF7DB",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 2
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
+                      ],
+                    ]
                   }
                 >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    selectable={false}
-                    style={
+                  Route: 2
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "#853D4B",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "#853D4B",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 2
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  Route: 2
+                </Text>
               </View>
             </View>
           </View>
@@ -8292,7 +13127,6 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
       undefined,
     ]
   }
-  testID="bottom-navigation"
 >
   <View
     style={
@@ -8301,13 +13135,13 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
           "flex": 1,
         },
         {
-          "backgroundColor": "rgba(255, 251, 254, 1)",
+          "backgroundColor": "rgba(254, 247, 255, 1)",
         },
       ]
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -8347,124 +13181,117 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
           }
         }
       >
-        Route: 0
+        <Text>
+          Route: 0
+        </Text>
       </View>
     </View>
   </View>
   <View
     collapsable={false}
+    onLayout={[Function]}
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
+        "pointerEvents": "none",
         "right": 0,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
       }
     }
-    testID="bottom-navigation-bar-outer-layer"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
         {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
+          "alignItems": "center",
+          "backgroundColor": "rgba(243, 237, 247, 1)",
+          "overflow": "hidden",
         }
       }
-      testID="bottom-navigation-bar"
     >
       <View
-        collapsable={false}
+        role="tablist"
         style={
-          {
-            "alignItems": "center",
-            "backgroundColor": "rgb(243, 237, 246)",
-            "overflow": "hidden",
-          }
+          [
+            {
+              "flexDirection": "row",
+            },
+            {
+              "marginBottom": 0,
+              "marginHorizontal": 0,
+            },
+            false,
+          ]
         }
-        testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": true,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "paddingVertical": 6,
               },
               {
-                "marginBottom": 0,
-                "marginHorizontal": 0,
+                "paddingVertical": 0,
               },
-              false,
             ]
           }
-          testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": true,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "transform": [
+                    {
+                      "translateY": 0,
+                    },
+                  ],
+                  "width": 32,
                 }
               }
             >
@@ -8473,278 +13300,284 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                 style={
                   {
                     "alignSelf": "center",
+                    "backgroundColor": "rgba(232, 222, 248, 1)",
+                    "borderRadius": 16,
                     "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
                     "transform": [
                       {
-                        "translateY": 0,
+                        "scaleX": 1,
                       },
                     ],
-                    "width": 32,
+                    "width": 64,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "alignSelf": "center",
-                      "backgroundColor": "rgba(232, 222, 248, 1)",
-                      "borderRadius": 16,
-                      "height": 32,
-                      "transform": [
+                    [
+                      {
+                        "color": "#FBF7DB",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
                         {
-                          "scaleX": 1,
+                          "backgroundColor": "transparent",
                         },
                       ],
-                      "width": 64,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                    ]
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                  magnify
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#853D4B",
+                        "fontSize": 24,
+                      },
                       [
                         {
-                          "color": "#FBF7DB",
-                          "fontSize": 24,
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    magnify
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  magnify
+                </Text>
+              </View>
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 0,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#853D4B",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    magnify
-                  </Text>
-                </View>
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "#FBF7DB",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "#FBF7DB",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 0
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  Route: 0
+                </Text>
               </View>
             </View>
           </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "transform": [
+                    {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 32,
                 }
               }
             >
@@ -8752,262 +13585,268 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                    [
+                      {
+                        "color": "#FBF7DB",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                  camera
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#853D4B",
+                        "fontSize": 24,
+                      },
                       [
                         {
-                          "color": "#FBF7DB",
-                          "fontSize": 24,
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    camera
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  camera
+                </Text>
+              </View>
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 1,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#853D4B",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    camera
-                  </Text>
-                </View>
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "#FBF7DB",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "#FBF7DB",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 1
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  Route: 1
+                </Text>
               </View>
             </View>
           </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "transform": [
+                    {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 32,
                 }
               }
             >
@@ -9015,210 +13854,196 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                    [
+                      {
+                        "color": "#FBF7DB",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                  inbox
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#853D4B",
+                        "fontSize": 24,
+                      },
                       [
                         {
-                          "color": "#FBF7DB",
-                          "fontSize": 24,
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    inbox
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  inbox
+                </Text>
+              </View>
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 1,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#853D4B",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    inbox
-                  </Text>
-                </View>
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "#FBF7DB",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "#FBF7DB",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 2
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  Route: 2
+                </Text>
               </View>
             </View>
           </View>
@@ -9240,7 +14065,6 @@ exports[`renders non-shifting bottom navigation 1`] = `
       undefined,
     ]
   }
-  testID="bottom-navigation"
 >
   <View
     style={
@@ -9249,13 +14073,13 @@ exports[`renders non-shifting bottom navigation 1`] = `
           "flex": 1,
         },
         {
-          "backgroundColor": "rgba(255, 251, 254, 1)",
+          "backgroundColor": "rgba(254, 247, 255, 1)",
         },
       ]
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -9295,124 +14119,112 @@ exports[`renders non-shifting bottom navigation 1`] = `
           }
         }
       >
-        Route: 0
+        <Text>
+          Route: 0
+        </Text>
       </View>
     </View>
   </View>
   <View
     collapsable={false}
+    onLayout={[Function]}
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
+        "pointerEvents": "none",
         "right": 0,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
       }
     }
-    testID="bottom-navigation-bar-outer-layer"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
         {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
+          "alignItems": "center",
+          "backgroundColor": "rgba(243, 237, 247, 1)",
+          "overflow": "hidden",
         }
       }
-      testID="bottom-navigation-bar"
     >
       <View
-        collapsable={false}
+        role="tablist"
         style={
-          {
-            "alignItems": "center",
-            "backgroundColor": "rgb(243, 237, 246)",
-            "overflow": "hidden",
-          }
+          [
+            {
+              "flexDirection": "row",
+            },
+            {
+              "marginBottom": 0,
+              "marginHorizontal": 0,
+            },
+            false,
+          ]
         }
-        testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": true,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "paddingVertical": 6,
               },
               {
-                "marginBottom": 0,
-                "marginHorizontal": 0,
+                "paddingVertical": 0,
               },
-              false,
             ]
           }
-          testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": true,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
                 }
               }
             >
@@ -9421,329 +14233,335 @@ exports[`renders non-shifting bottom navigation 1`] = `
                 style={
                   {
                     "alignSelf": "center",
+                    "backgroundColor": "rgba(232, 222, 248, 1)",
+                    "borderRadius": 16,
                     "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                    "width": 64,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "alignSelf": "center",
-                      "backgroundColor": "rgba(232, 222, 248, 1)",
-                      "borderRadius": 16,
-                      "height": 32,
-                      "transform": [
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  magnify
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
                         {
-                          "scaleX": 1,
+                          "backgroundColor": "transparent",
                         },
                       ],
-                      "width": 64,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                    ]
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    magnify
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
+                  magnify
+                </Text>
+              </View>
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 0,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    magnify
-                  </Text>
-                </View>
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(29, 27, 32, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(28, 27, 31, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 0
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
+                      ],
+                    ]
                   }
                 >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    selectable={false}
-                    style={
+                  Route: 0
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(29, 27, 32, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(28, 27, 31, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 0
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  Route: 0
+                </Text>
               </View>
             </View>
           </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
                 }
               }
             >
@@ -9751,313 +14569,319 @@ exports[`renders non-shifting bottom navigation 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                  camera
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    camera
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
+                      ],
+                    ]
+                  }
+                >
+                  camera
+                </Text>
+              </View>
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 1,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "opacity": 0,
+                      },
+                      {
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 9999,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
                   }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                />
+              </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
                           },
                           {
-                            "backgroundColor": "transparent",
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
                           },
                         ],
-                      ]
-                    }
-                  >
-                    camera
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
+                      ],
                     ]
                   }
                 >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "alignSelf": "flex-end",
-                        "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
-                        "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                  Route: 1
+                </Text>
               </View>
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
-                            "fontFamily": "System",
+                            "backgroundColor": "transparent",
                             "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
+                            "height": 56,
+                            "textAlign": "center",
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ],
-                      ]
-                    }
-                  >
-                    Route: 1
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
-                        },
-                        [
                           {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 1
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  Route: 1
+                </Text>
               </View>
             </View>
           </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "width": 32,
                 }
               }
             >
@@ -10065,261 +14889,252 @@ exports[`renders non-shifting bottom navigation 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                  inbox
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    inbox
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  inbox
+                </Text>
+              </View>
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 1,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    inbox
-                  </Text>
-                </View>
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 2
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
+                      ],
+                    ]
                   }
                 >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    selectable={false}
-                    style={
+                  Route: 2
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
+                            "lineHeight": 16,
+                          },
                         ],
-                      ]
-                    }
-                  >
-                    Route: 2
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  Route: 2
+                </Text>
               </View>
             </View>
           </View>
@@ -10341,7 +15156,6 @@ exports[`renders shifting bottom navigation 1`] = `
       undefined,
     ]
   }
-  testID="bottom-navigation"
 >
   <View
     style={
@@ -10350,13 +15164,13 @@ exports[`renders shifting bottom navigation 1`] = `
           "flex": 1,
         },
         {
-          "backgroundColor": "rgba(255, 251, 254, 1)",
+          "backgroundColor": "rgba(254, 247, 255, 1)",
         },
       ]
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -10396,124 +15210,117 @@ exports[`renders shifting bottom navigation 1`] = `
           }
         }
       >
-        Route: 0
+        <Text>
+          Route: 0
+        </Text>
       </View>
     </View>
   </View>
   <View
     collapsable={false}
+    onLayout={[Function]}
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
+        "pointerEvents": "none",
         "right": 0,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
       }
     }
-    testID="bottom-navigation-bar-outer-layer"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
         {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
+          "alignItems": "center",
+          "backgroundColor": "rgba(243, 237, 247, 1)",
+          "overflow": "hidden",
         }
       }
-      testID="bottom-navigation-bar"
     >
       <View
-        collapsable={false}
+        role="tablist"
         style={
-          {
-            "alignItems": "center",
-            "backgroundColor": "rgb(243, 237, 246)",
-            "overflow": "hidden",
-          }
+          [
+            {
+              "flexDirection": "row",
+            },
+            {
+              "marginBottom": 0,
+              "marginHorizontal": 0,
+            },
+            false,
+          ]
         }
-        testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": true,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "paddingVertical": 6,
               },
               {
-                "marginBottom": 0,
-                "marginHorizontal": 0,
+                "paddingVertical": 0,
               },
-              false,
             ]
           }
-          testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": true,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "transform": [
+                    {
+                      "translateY": 0,
+                    },
+                  ],
+                  "width": 32,
                 }
               }
             >
@@ -10522,278 +15329,284 @@ exports[`renders shifting bottom navigation 1`] = `
                 style={
                   {
                     "alignSelf": "center",
+                    "backgroundColor": "rgba(232, 222, 248, 1)",
+                    "borderRadius": 16,
                     "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
                     "transform": [
                       {
-                        "translateY": 0,
+                        "scaleX": 1,
                       },
                     ],
-                    "width": 32,
+                    "width": 64,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "alignSelf": "center",
-                      "backgroundColor": "rgba(232, 222, 248, 1)",
-                      "borderRadius": 16,
-                      "height": 32,
-                      "transform": [
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
                         {
-                          "scaleX": 1,
+                          "backgroundColor": "transparent",
                         },
                       ],
-                      "width": 64,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                    ]
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                  magnify
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    magnify
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  magnify
+                </Text>
+              </View>
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 0,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    magnify
-                  </Text>
-                </View>
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(29, 27, 32, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(28, 27, 31, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 0
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  Route: 0
+                </Text>
               </View>
             </View>
           </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "transform": [
+                    {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 32,
                 }
               }
             >
@@ -10801,262 +15614,268 @@ exports[`renders shifting bottom navigation 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                  camera
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    camera
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  camera
+                </Text>
+              </View>
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 1,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    camera
-                  </Text>
-                </View>
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 1
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  Route: 1
+                </Text>
               </View>
             </View>
           </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "transform": [
+                    {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 32,
                 }
               }
             >
@@ -11064,262 +15883,268 @@ exports[`renders shifting bottom navigation 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                  inbox
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    inbox
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  inbox
+                </Text>
+              </View>
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 1,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    inbox
-                  </Text>
-                </View>
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 2
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  Route: 2
+                </Text>
               </View>
             </View>
           </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "transform": [
+                    {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 32,
                 }
               }
             >
@@ -11327,262 +16152,268 @@ exports[`renders shifting bottom navigation 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  heart
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    heart
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  heart
+                </Text>
+              </View>
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 1,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    heart
-                  </Text>
-                </View>
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 3
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  Route: 3
+                </Text>
               </View>
             </View>
           </View>
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              {
+                "paddingVertical": 0,
+              },
+            ]
+          }
+        >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            pointerEvents="none"
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "paddingBottom": 16,
+                "paddingTop": 12,
+              }
             }
           >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignSelf": "center",
+                  "height": 32,
+                  "justifyContent": "center",
+                  "marginBottom": 4,
+                  "marginHorizontal": 12,
+                  "marginTop": 0,
+                  "transform": [
+                    {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 32,
                 }
               }
             >
@@ -11590,210 +16421,196 @@ exports[`renders shifting bottom navigation 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
                   style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                    [
+                      {
+                        "color": "rgba(29, 25, 43, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
+                  shopping-music
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 4,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(73, 69, 79, 1)",
+                        "fontSize": 24,
+                      },
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    shopping-music
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  shopping-music
+                </Text>
+              </View>
+              <View
+                style={
+                  [
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
                       "left": 0,
-                      "opacity": 1,
                       "position": "absolute",
+                    },
+                    {
                       "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    shopping-music
-                  </Text>
-                </View>
-                <View
+                      "top": 2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  collapsable={false}
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "alignSelf": "flex-end",
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "opacity": 0,
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
                       {
-                        "alignSelf": "flex-end",
                         "backgroundColor": "rgba(179, 38, 30, 1)",
-                        "borderRadius": 8,
+                        "borderRadius": 9999,
                         "color": "rgba(255, 255, 255, 1)",
-                        "fontSize": 8,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "minWidth": 16,
-                        "opacity": 0,
-                        "overflow": "hidden",
-                        "paddingHorizontal": 3,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  />
-                </View>
+                        "height": 6,
+                        "minWidth": 6,
+                      },
+                      false,
+                      undefined,
+                    ]
+                  }
+                />
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                <View
-                  collapsable={false}
+                <Text
+                  maxFontSizeMultiplier={1}
                   style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 4
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  Route: 4
+                </Text>
               </View>
             </View>
           </View>
diff --git a/src/components/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/__tests__/__snapshots__/Button.test.tsx.snap
index db8e187690..628087c74b 100644
--- a/src/components/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Button.test.tsx.snap
@@ -1,951 +1,3821 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders button with an accessibility hint 1`] = `
+exports[`button icon styles should return correct icon styles for compact contained button 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "minWidth": 64,
+      },
+      {
+        "minWidth": "auto",
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
       {
-        "backgroundColor": "transparent",
         "borderColor": "transparent",
-        "borderRadius": 20,
-        "borderStyle": "solid",
         "borderWidth": 0,
-        "flex": undefined,
-        "minWidth": 64,
-        "shadowColor": "#000",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(103, 80, 164, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(103, 80, 164, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityHint="hint"
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+    testID="compact-button"
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
           {
-            "borderRadius": 20,
+            "opacity": 1,
           },
+          undefined,
         ]
       }
-      testID="button"
     >
       <View
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "marginLeft": 12,
+              "marginRight": -4,
+            },
+            {
+              "marginLeft": 8,
+              "marginRight": 0,
             },
-            undefined,
+            false,
           ]
         }
       >
         <Text
-          numberOfLines={1}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
           selectable={false}
           style={
             [
               {
-                "textAlign": "left",
+                "color": "rgba(255, 255, 255, 1)",
+                "fontSize": 18,
               },
+              [
+                {
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          camera
+        </Text>
+      </View>
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
+            [
               {
-                "color": "rgba(28, 27, 31, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 24,
+                  "marginVertical": 10,
+                },
+                {
+                  "marginHorizontal": 8,
+                },
+                false,
+                {
+                  "color": "rgba(255, 255, 255, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  {
-                    "marginHorizontal": 12,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="button-text"
-        >
-          Button with accessibility hint
-        </Text>
-      </View>
+            ],
+          ]
+        }
+      >
+        Compact 
+        contained
+         button
+      </Text>
     </View>
   </View>
 </View>
 `;
 
-exports[`renders button with an accessibility label 1`] = `
+exports[`button icon styles should return correct icon styles for compact contained button 2`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "minWidth": 64,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+      undefined,
       {
-        "backgroundColor": "transparent",
         "borderColor": "transparent",
-        "borderRadius": 20,
-        "borderStyle": "solid",
         "borderWidth": 0,
-        "flex": undefined,
-        "minWidth": 64,
-        "shadowColor": "#000",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(103, 80, 164, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(103, 80, 164, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityLabel="label"
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+    testID="compact-button"
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
           {
-            "borderRadius": 20,
+            "opacity": 1,
           },
+          undefined,
         ]
       }
-      testID="button"
     >
       <View
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "marginLeft": 12,
+              "marginRight": -4,
+            },
+            {
+              "marginLeft": 16,
+              "marginRight": -16,
             },
-            undefined,
+            false,
           ]
         }
       >
         <Text
-          numberOfLines={1}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
           selectable={false}
           style={
             [
               {
-                "textAlign": "left",
+                "color": "rgba(255, 255, 255, 1)",
+                "fontSize": 18,
               },
+              [
+                {
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          camera
+        </Text>
+      </View>
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
+            [
               {
-                "color": "rgba(28, 27, 31, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 24,
+                  "marginVertical": 10,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(255, 255, 255, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  {
-                    "marginHorizontal": 12,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="button-text"
-        >
-          Button with accessibility label
-        </Text>
-      </View>
+            ],
+          ]
+        }
+      >
+        contained
+         button
+      </Text>
     </View>
   </View>
 </View>
 `;
 
-exports[`renders button with button color 1`] = `
+exports[`button icon styles should return correct icon styles for compact contained-tonal button 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "#e91e63",
-      "borderRadius": 20,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "minWidth": 64,
+      },
+      {
+        "minWidth": "auto",
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
       {
-        "backgroundColor": "#e91e63",
         "borderColor": "transparent",
-        "borderRadius": 20,
-        "borderStyle": "solid",
         "borderWidth": 0,
-        "flex": undefined,
-        "minWidth": 64,
-        "shadowColor": "#000",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(232, 222, 248, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+    testID="compact-button"
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
           {
-            "borderRadius": 20,
+            "opacity": 1,
           },
+          undefined,
         ]
       }
-      testID="button"
     >
       <View
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "marginLeft": 12,
+              "marginRight": -4,
+            },
+            {
+              "marginLeft": 8,
+              "marginRight": 0,
             },
-            undefined,
+            false,
           ]
         }
       >
         <Text
-          numberOfLines={1}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
           selectable={false}
           style={
             [
               {
-                "textAlign": "left",
+                "color": "rgba(29, 25, 43, 1)",
+                "fontSize": 18,
               },
+              [
+                {
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          camera
+        </Text>
+      </View>
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
+            [
               {
-                "color": "rgba(28, 27, 31, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 24,
+                  "marginVertical": 10,
+                },
+                {
+                  "marginHorizontal": 8,
+                },
+                false,
+                {
+                  "color": "rgba(29, 25, 43, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  {
-                    "marginHorizontal": 12,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="button-text"
-        >
-          Custom Button
-        </Text>
-      </View>
+            ],
+          ]
+        }
+      >
+        Compact 
+        contained-tonal
+         button
+      </Text>
     </View>
   </View>
 </View>
 `;
 
-exports[`renders button with color 1`] = `
+exports[`button icon styles should return correct icon styles for compact contained-tonal button 2`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "minWidth": 64,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+      undefined,
       {
-        "backgroundColor": "transparent",
         "borderColor": "transparent",
-        "borderRadius": 20,
-        "borderStyle": "solid",
         "borderWidth": 0,
-        "flex": undefined,
-        "minWidth": 64,
-        "shadowColor": "#000",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(232, 222, 248, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+    testID="compact-button"
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
           {
-            "borderRadius": 20,
+            "opacity": 1,
           },
+          undefined,
         ]
       }
-      testID="button"
     >
       <View
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "marginLeft": 12,
+              "marginRight": -4,
+            },
+            {
+              "marginLeft": 16,
+              "marginRight": -16,
             },
-            undefined,
+            false,
           ]
         }
       >
         <Text
-          numberOfLines={1}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
           selectable={false}
           style={
             [
               {
-                "textAlign": "left",
+                "color": "rgba(29, 25, 43, 1)",
+                "fontSize": 18,
               },
+              [
+                {
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          camera
+        </Text>
+      </View>
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
+            [
               {
-                "color": "rgba(28, 27, 31, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 24,
+                  "marginVertical": 10,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(29, 25, 43, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  {
-                    "marginHorizontal": 12,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "#e91e63",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="button-text"
-        >
-          Custom Button
-        </Text>
-      </View>
+            ],
+          ]
+        }
+      >
+        contained-tonal
+         button
+      </Text>
     </View>
   </View>
 </View>
 `;
 
-exports[`renders button with custom testID 1`] = `
+exports[`button icon styles should return correct icon styles for compact elevated button 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "minWidth": 64,
+      },
+      {
+        "minWidth": "auto",
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="custom:testID-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
       {
-        "backgroundColor": "transparent",
         "borderColor": "transparent",
-        "borderRadius": 20,
-        "borderStyle": "solid",
         "borderWidth": 0,
-        "flex": undefined,
-        "minWidth": 64,
-        "shadowColor": "#000",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(247, 242, 250, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
-          "height": 0,
+          "height": 0.55,
           "width": 0,
         },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
+        "shadowOpacity": 0.19,
+        "shadowRadius": 0.79,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(247, 242, 250, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 0.25,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="custom:testID-container"
-  >
-    <View
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+    testID="compact-button"
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
           {
-            "borderRadius": 20,
+            "opacity": 1,
           },
+          undefined,
         ]
       }
-      testID="custom:testID"
     >
       <View
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "marginLeft": 12,
+              "marginRight": -4,
+            },
+            {
+              "marginLeft": 8,
+              "marginRight": 0,
             },
-            undefined,
+            false,
           ]
         }
       >
         <Text
-          numberOfLines={1}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
           selectable={false}
           style={
             [
               {
-                "textAlign": "left",
+                "color": "rgba(103, 80, 164, 1)",
+                "fontSize": 18,
               },
+              [
+                {
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          camera
+        </Text>
+      </View>
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
+            [
               {
-                "color": "rgba(28, 27, 31, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 24,
+                  "marginVertical": 10,
+                },
+                {
+                  "marginHorizontal": 8,
+                },
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  {
-                    "marginHorizontal": 12,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="custom:testID-text"
-        >
-          Button with custom testID
-        </Text>
-      </View>
+            ],
+          ]
+        }
+      >
+        Compact 
+        elevated
+         button
+      </Text>
     </View>
   </View>
 </View>
 `;
 
-exports[`renders button with icon 1`] = `
+exports[`button icon styles should return correct icon styles for compact elevated button 2`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "minWidth": 64,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+      undefined,
       {
-        "backgroundColor": "transparent",
         "borderColor": "transparent",
-        "borderRadius": 20,
-        "borderStyle": "solid",
         "borderWidth": 0,
-        "flex": undefined,
-        "minWidth": 64,
-        "shadowColor": "#000",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(247, 242, 250, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
-          "height": 0,
+          "height": 0.55,
           "width": 0,
         },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
+        "shadowOpacity": 0.19,
+        "shadowRadius": 0.79,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(247, 242, 250, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 0.25,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
+        {
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+    testID="compact-button"
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
+          },
+          {
+            "opacity": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "marginLeft": 12,
+              "marginRight": -4,
+            },
+            {
+              "marginLeft": 16,
+              "marginRight": -16,
+            },
+            false,
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
+          style={
+            [
+              {
+                "color": "rgba(103, 80, 164, 1)",
+                "fontSize": 18,
+              },
+              [
+                {
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          camera
+        </Text>
+      </View>
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
+            [
+              {
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              [
+                {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 24,
+                  "marginVertical": 10,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                undefined,
+              ],
+            ],
+          ]
+        }
+      >
+        elevated
+         button
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`button icon styles should return correct icon styles for compact outlined button 1`] = `
+<View
+  collapsable={false}
+  style={
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "minWidth": 64,
+      },
+      {
+        "minWidth": "auto",
+      },
+      {
+        "borderColor": "rgba(202, 196, 208, 1)",
+        "borderWidth": 1,
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
+        {
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 19,
+        },
+      ]
+    }
+    testID="compact-button"
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
+          },
+          {
+            "opacity": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "marginLeft": 12,
+              "marginRight": -4,
+            },
+            {
+              "marginLeft": 8,
+              "marginRight": 0,
+            },
+            false,
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
+          style={
+            [
+              {
+                "color": "rgba(103, 80, 164, 1)",
+                "fontSize": 18,
+              },
+              [
+                {
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          camera
+        </Text>
+      </View>
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
+            [
+              {
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              [
+                {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 24,
+                  "marginVertical": 10,
+                },
+                {
+                  "marginHorizontal": 8,
+                },
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                undefined,
+              ],
+            ],
+          ]
+        }
+      >
+        Compact 
+        outlined
+         button
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`button icon styles should return correct icon styles for compact outlined button 2`] = `
+<View
+  collapsable={false}
+  style={
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "minWidth": 64,
+      },
+      undefined,
+      {
+        "borderColor": "rgba(202, 196, 208, 1)",
+        "borderWidth": 1,
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
+        {
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 19,
+        },
+      ]
+    }
+    testID="compact-button"
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
+          },
+          {
+            "opacity": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "marginLeft": 12,
+              "marginRight": -4,
+            },
+            {
+              "marginLeft": 16,
+              "marginRight": -16,
+            },
+            false,
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
+          style={
+            [
+              {
+                "color": "rgba(103, 80, 164, 1)",
+                "fontSize": 18,
+              },
+              [
+                {
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          camera
+        </Text>
+      </View>
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
+            [
+              {
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              [
+                {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 24,
+                  "marginVertical": 10,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                undefined,
+              ],
+            ],
+          ]
+        }
+      >
+        outlined
+         button
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`button icon styles should return correct icon styles for compact text button 1`] = `
+<View
+  collapsable={false}
+  style={
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "minWidth": 64,
+      },
+      {
+        "minWidth": "auto",
+      },
+      {
+        "borderColor": "transparent",
+        "borderWidth": 0,
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
+        {
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+    testID="compact-button"
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
+          },
+          {
+            "opacity": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "marginLeft": 12,
+              "marginRight": -4,
+            },
+            {
+              "marginLeft": 8,
+              "marginRight": 0,
+            },
+            {
+              "marginLeft": 6,
+              "marginRight": 0,
+            },
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
+          style={
+            [
+              {
+                "color": "rgba(103, 80, 164, 1)",
+                "fontSize": 18,
+              },
+              [
+                {
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          camera
+        </Text>
+      </View>
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
+            [
+              {
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              [
+                {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 16,
+                },
+                {
+                  "marginHorizontal": 8,
+                },
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                undefined,
+              ],
+            ],
+          ]
+        }
+      >
+        Compact text button
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`button icon styles should return correct icon styles for text button 1`] = `
+<View
+  collapsable={false}
+  style={
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "minWidth": 64,
+      },
+      undefined,
+      {
+        "borderColor": "transparent",
+        "borderWidth": 0,
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
+        {
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+    testID="compact-button"
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
+          },
+          {
+            "opacity": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "marginLeft": 12,
+              "marginRight": -4,
+            },
+            {
+              "marginLeft": 16,
+              "marginRight": -16,
+            },
+            {
+              "marginLeft": 12,
+              "marginRight": -8,
+            },
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
+          style={
+            [
+              {
+                "color": "rgba(103, 80, 164, 1)",
+                "fontSize": 18,
+              },
+              [
+                {
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          camera
+        </Text>
+      </View>
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
+            [
+              {
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              [
+                {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 16,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                undefined,
+              ],
+            ],
+          ]
+        }
+      >
+        text button
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders button with an accessibility hint 1`] = `
+<View
+  collapsable={false}
+  style={
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "minWidth": 64,
+      },
+      undefined,
+      {
+        "borderColor": "transparent",
+        "borderWidth": 0,
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityHint="hint"
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
+        {
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
+          },
+          {
+            "opacity": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
+            [
+              {
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              [
+                {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 12,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                undefined,
+              ],
+            ],
+          ]
+        }
+      >
+        Button with accessibility hint
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders button with an accessibility label 1`] = `
+<View
+  accessibilityLabel="label"
+  collapsable={false}
+  style={
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "minWidth": 64,
+      },
+      undefined,
+      {
+        "borderColor": "transparent",
+        "borderWidth": 0,
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
+        {
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
+          },
+          {
+            "opacity": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
+            [
+              {
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              [
+                {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 12,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                undefined,
+              ],
+            ],
+          ]
+        }
+      >
+        Button with accessibility label
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders button with button color 1`] = `
+<View
+  collapsable={false}
+  style={
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "minWidth": 64,
+      },
+      undefined,
+      {
+        "borderColor": "transparent",
+        "borderWidth": 0,
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "#e91e63",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "#e91e63",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
+        {
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
+          },
+          {
+            "opacity": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
+            [
+              {
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              [
+                {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 12,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                undefined,
+              ],
+            ],
+          ]
+        }
+      >
+        Custom Button
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders button with color 1`] = `
+<View
+  collapsable={false}
+  style={
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "minWidth": 64,
+      },
+      undefined,
+      {
+        "borderColor": "transparent",
+        "borderWidth": 0,
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
+        {
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
+          },
+          {
+            "opacity": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
+            [
+              {
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              [
+                {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 12,
+                },
+                undefined,
+                false,
+                {
+                  "color": "#e91e63",
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                undefined,
+              ],
+            ],
+          ]
+        }
+      >
+        Custom Button
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders button with custom testID 1`] = `
+<View
+  collapsable={false}
+  style={
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "minWidth": 64,
+      },
+      undefined,
+      {
+        "borderColor": "transparent",
+        "borderWidth": 0,
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
+        {
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+    testID="custom:testID"
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
+          },
+          {
+            "opacity": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
+            [
+              {
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              [
+                {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 12,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                undefined,
+              ],
+            ],
+          ]
+        }
+      >
+        Button with custom testID
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders button with icon 1`] = `
+<View
+  collapsable={false}
+  style={
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "minWidth": 64,
+      },
+      undefined,
+      {
+        "borderColor": "transparent",
+        "borderWidth": 0,
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
           {
-            "borderRadius": 20,
+            "opacity": 1,
           },
+          undefined,
         ]
       }
-      testID="button"
     >
       <View
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "marginLeft": 12,
+              "marginRight": -4,
+            },
+            {
+              "marginLeft": 16,
+              "marginRight": -16,
+            },
+            {
+              "marginLeft": 12,
+              "marginRight": -8,
             },
-            undefined,
           ]
         }
       >
-        <View
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
           style={
             [
               {
-                "marginLeft": 12,
-                "marginRight": -4,
-              },
-              {
-                "marginLeft": 16,
-                "marginRight": -16,
-              },
-              {
-                "marginLeft": 12,
-                "marginRight": -8,
+                "color": "rgba(103, 80, 164, 1)",
+                "fontSize": 18,
               },
-            ]
-          }
-          testID="button-icon-container"
-        >
-          <Text
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            selectable={false}
-            style={
               [
                 {
-                  "color": "rgba(103, 80, 164, 1)",
-                  "fontSize": 18,
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
                 },
-                [
-                  {
-                    "lineHeight": 18,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                  },
-                ],
-              ]
-            }
-          >
-            camera
-          </Text>
-        </View>
-        <Text
-          numberOfLines={1}
-          selectable={false}
-          style={
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          camera
+        </Text>
+      </View>
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(28, 27, 31, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 16,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  {
-                    "marginHorizontal": 16,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="button-text"
-        >
-          Icon Button
-        </Text>
-      </View>
+            ],
+          ]
+        }
+      >
+        Icon Button
+      </Text>
     </View>
   </View>
 </View>
@@ -955,198 +3825,251 @@ exports[`renders button with icon in reverse order 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "minWidth": 64,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+      undefined,
       {
-        "backgroundColor": "transparent",
         "borderColor": "transparent",
-        "borderRadius": 20,
-        "borderStyle": "solid",
         "borderWidth": 0,
-        "flex": undefined,
-        "minWidth": 64,
-        "shadowColor": "#000",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
+          },
+          {
+            "opacity": 1,
           },
           {
-            "borderRadius": 20,
+            "flexDirection": "row-reverse",
           },
         ]
       }
-      testID="button"
     >
       <View
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "marginLeft": -4,
+              "marginRight": 12,
+            },
+            {
+              "marginLeft": -16,
+              "marginRight": 16,
             },
             {
-              "flexDirection": "row-reverse",
+              "marginLeft": -8,
+              "marginRight": 12,
             },
           ]
         }
       >
-        <View
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
           style={
             [
               {
-                "marginLeft": -4,
-                "marginRight": 12,
-              },
-              {
-                "marginLeft": -16,
-                "marginRight": 16,
+                "color": "rgba(103, 80, 164, 1)",
+                "fontSize": 18,
               },
-              {
-                "marginLeft": -8,
-                "marginRight": 12,
-              },
-            ]
-          }
-          testID="button-icon-container"
-        >
-          <Text
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            selectable={false}
-            style={
               [
                 {
-                  "color": "rgba(103, 80, 164, 1)",
-                  "fontSize": 18,
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
                 },
-                [
-                  {
-                    "lineHeight": 18,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                  },
-                ],
-              ]
-            }
-          >
-            chevron-right
-          </Text>
-        </View>
-        <Text
-          numberOfLines={1}
-          selectable={false}
-          style={
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          chevron-right
+        </Text>
+      </View>
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(28, 27, 31, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 16,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  {
-                    "marginHorizontal": 16,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="button-text"
-        >
-          Right Icon
-        </Text>
-      </View>
+            ],
+          ]
+        }
+      >
+        Right Icon
+      </Text>
     </View>
   </View>
 </View>
@@ -1156,148 +4079,202 @@ exports[`renders contained contained with mode 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(103, 80, 164, 1)",
-      "borderRadius": 20,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "minWidth": 64,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+      undefined,
       {
-        "backgroundColor": "rgba(103, 80, 164, 1)",
         "borderColor": "transparent",
-        "borderRadius": 20,
-        "borderStyle": "solid",
         "borderWidth": 0,
-        "flex": undefined,
-        "minWidth": 64,
-        "shadowColor": "#000",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(103, 80, 164, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
         },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
-      }
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(103, 80, 164, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
+        {
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
     }
-    testID="button-container"
   >
     <View
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
           {
-            "borderRadius": 20,
+            "opacity": 1,
           },
+          undefined,
         ]
       }
-      testID="button"
     >
-      <View
+      <Text
+        numberOfLines={1}
+        selectable={false}
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
             },
-            undefined,
-          ]
-        }
-      >
-        <Text
-          numberOfLines={1}
-          selectable={false}
-          style={
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(28, 27, 31, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 24,
+                  "marginVertical": 10,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(255, 255, 255, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  {
-                    "marginHorizontal": 24,
-                    "marginVertical": 10,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "rgba(255, 255, 255, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="button-text"
-        >
-          Contained Button
-        </Text>
-      </View>
+            ],
+          ]
+        }
+      >
+        Contained Button
+      </Text>
     </View>
   </View>
 </View>
@@ -1307,147 +4284,201 @@ exports[`renders disabled button 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "minWidth": 64,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+      undefined,
       {
-        "backgroundColor": "transparent",
         "borderColor": "transparent",
-        "borderRadius": 20,
-        "borderStyle": "solid",
         "borderWidth": 0,
-        "flex": undefined,
-        "minWidth": 64,
-        "shadowColor": "#000",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
           {
-            "borderRadius": 20,
+            "opacity": 0.38,
           },
+          undefined,
         ]
       }
-      testID="button"
     >
-      <View
+      <Text
+        numberOfLines={1}
+        selectable={false}
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
             },
-            undefined,
-          ]
-        }
-      >
-        <Text
-          numberOfLines={1}
-          selectable={false}
-          style={
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(28, 27, 31, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 12,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  {
-                    "marginHorizontal": 12,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "rgba(28, 27, 31, 0.38)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="button-text"
-        >
-          Disabled Button
-        </Text>
-      </View>
+            ],
+          ]
+        }
+      >
+        Disabled Button
+      </Text>
     </View>
   </View>
 </View>
@@ -1457,135 +4488,202 @@ exports[`renders loading button 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "minWidth": 64,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+      undefined,
       {
-        "backgroundColor": "transparent",
         "borderColor": "transparent",
-        "borderRadius": 20,
-        "borderStyle": "solid",
         "borderWidth": 0,
-        "flex": undefined,
-        "minWidth": 64,
-        "shadowColor": "#000",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
           {
-            "borderRadius": 20,
+            "opacity": 1,
           },
+          undefined,
         ]
       }
-      testID="button"
     >
       <View
+        accessible={true}
+        aria-busy={true}
+        role="progressbar"
         style={
           [
             {
               "alignItems": "center",
-              "flexDirection": "row",
               "justifyContent": "center",
             },
-            undefined,
+            [
+              {
+                "marginLeft": 12,
+                "marginRight": -4,
+              },
+              {
+                "marginLeft": 16,
+                "marginRight": -16,
+              },
+              {
+                "marginLeft": 12,
+                "marginRight": -8,
+              },
+            ],
           ]
         }
       >
         <View
-          accessibilityRole="progressbar"
-          accessibilityState={
+          collapsable={false}
+          style={
             {
-              "busy": true,
+              "height": 18,
+              "opacity": 1,
+              "width": 18,
             }
           }
-          accessible={true}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "justifyContent": "center",
-              },
-              [
-                {
-                  "marginLeft": 12,
-                  "marginRight": -4,
-                },
-                {
-                  "marginLeft": 16,
-                  "marginRight": -16,
-                },
-                {
-                  "marginLeft": 12,
-                  "marginRight": -8,
-                },
-              ],
-            ]
-          }
         >
           <View
             collapsable={false}
             style={
               {
-                "height": 18,
-                "opacity": 1,
-                "width": 18,
+                "alignItems": "center",
+                "bottom": 0,
+                "justifyContent": "center",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
               }
             }
           >
@@ -1593,13 +4691,13 @@ exports[`renders loading button 1`] = `
               collapsable={false}
               style={
                 {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "justifyContent": "center",
-                  "left": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "height": 18,
+                  "transform": [
+                    {
+                      "rotate": "45deg",
+                    },
+                  ],
+                  "width": 18,
                 }
               }
             >
@@ -1607,12 +4705,8 @@ exports[`renders loading button 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "height": 18,
-                    "transform": [
-                      {
-                        "rotate": "45deg",
-                      },
-                    ],
+                    "height": 9,
+                    "overflow": "hidden",
                     "width": 18,
                   }
                 }
@@ -1621,8 +4715,15 @@ exports[`renders loading button 1`] = `
                   collapsable={false}
                   style={
                     {
-                      "height": 9,
-                      "overflow": "hidden",
+                      "height": 18,
+                      "transform": [
+                        {
+                          "translateY": 0,
+                        },
+                        {
+                          "rotate": "-165deg",
+                        },
+                      ],
                       "width": 18,
                     }
                   }
@@ -1631,15 +4732,8 @@ exports[`renders loading button 1`] = `
                     collapsable={false}
                     style={
                       {
-                        "height": 18,
-                        "transform": [
-                          {
-                            "translateY": 0,
-                          },
-                          {
-                            "rotate": "-165deg",
-                          },
-                        ],
+                        "height": 9,
+                        "overflow": "hidden",
                         "width": 18,
                       }
                     }
@@ -1648,40 +4742,44 @@ exports[`renders loading button 1`] = `
                       collapsable={false}
                       style={
                         {
-                          "height": 9,
-                          "overflow": "hidden",
+                          "borderColor": "rgba(103, 80, 164, 1)",
+                          "borderRadius": 9,
+                          "borderWidth": 1.8,
+                          "height": 18,
                           "width": 18,
                         }
                       }
-                    >
-                      <View
-                        collapsable={false}
-                        style={
-                          {
-                            "borderColor": "rgba(103, 80, 164, 1)",
-                            "borderRadius": 9,
-                            "borderWidth": 1.8,
-                            "height": 18,
-                            "width": 18,
-                          }
-                        }
-                      />
-                    </View>
+                    />
                   </View>
                 </View>
               </View>
             </View>
+          </View>
+          <View
+            collapsable={false}
+            style={
+              {
+                "alignItems": "center",
+                "bottom": 0,
+                "justifyContent": "center",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              }
+            }
+          >
             <View
               collapsable={false}
               style={
                 {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "justifyContent": "center",
-                  "left": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "height": 18,
+                  "transform": [
+                    {
+                      "rotate": "45deg",
+                    },
+                  ],
+                  "width": 18,
                 }
               }
             >
@@ -1689,12 +4787,9 @@ exports[`renders loading button 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "height": 18,
-                    "transform": [
-                      {
-                        "rotate": "45deg",
-                      },
-                    ],
+                    "height": 9,
+                    "overflow": "hidden",
+                    "top": 9,
                     "width": 18,
                   }
                 }
@@ -1703,9 +4798,15 @@ exports[`renders loading button 1`] = `
                   collapsable={false}
                   style={
                     {
-                      "height": 9,
-                      "overflow": "hidden",
-                      "top": 9,
+                      "height": 18,
+                      "transform": [
+                        {
+                          "translateY": -9,
+                        },
+                        {
+                          "rotate": "345deg",
+                        },
+                      ],
                       "width": 18,
                     }
                   }
@@ -1714,15 +4815,8 @@ exports[`renders loading button 1`] = `
                     collapsable={false}
                     style={
                       {
-                        "height": 18,
-                        "transform": [
-                          {
-                            "translateY": -9,
-                          },
-                          {
-                            "rotate": "345deg",
-                          },
-                        ],
+                        "height": 9,
+                        "overflow": "hidden",
                         "width": 18,
                       }
                     }
@@ -1731,81 +4825,68 @@ exports[`renders loading button 1`] = `
                       collapsable={false}
                       style={
                         {
-                          "height": 9,
-                          "overflow": "hidden",
+                          "borderColor": "rgba(103, 80, 164, 1)",
+                          "borderRadius": 9,
+                          "borderWidth": 1.8,
+                          "height": 18,
                           "width": 18,
                         }
                       }
-                    >
-                      <View
-                        collapsable={false}
-                        style={
-                          {
-                            "borderColor": "rgba(103, 80, 164, 1)",
-                            "borderRadius": 9,
-                            "borderWidth": 1.8,
-                            "height": 18,
-                            "width": 18,
-                          }
-                        }
-                      />
-                    </View>
+                    />
                   </View>
                 </View>
               </View>
             </View>
           </View>
         </View>
-        <Text
-          numberOfLines={1}
-          selectable={false}
-          style={
+      </View>
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(28, 27, 31, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 16,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  {
-                    "marginHorizontal": 16,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="button-text"
-        >
-          Loading Button
-        </Text>
-      </View>
+            ],
+          ]
+        }
+      >
+        Loading Button
+      </Text>
     </View>
   </View>
 </View>
@@ -1815,148 +4896,202 @@ exports[`renders outlined button with mode 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "minWidth": 64,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+      undefined,
+      {
+        "borderColor": "rgba(202, 196, 208, 1)",
+        "borderWidth": 1,
+      },
+      undefined,
+      {},
       {
         "backgroundColor": "transparent",
-        "borderColor": "rgba(121, 116, 126, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 20,
-        "borderStyle": "solid",
-        "borderWidth": 1,
-        "flex": undefined,
-        "minWidth": 64,
-        "shadowColor": "#000",
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 19,
+        },
+      ]
+    }
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
           {
-            "borderRadius": 19,
+            "opacity": 1,
           },
+          undefined,
         ]
       }
-      testID="button"
     >
-      <View
+      <Text
+        numberOfLines={1}
+        selectable={false}
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
             },
-            undefined,
-          ]
-        }
-      >
-        <Text
-          numberOfLines={1}
-          selectable={false}
-          style={
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(28, 27, 31, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 24,
+                  "marginVertical": 10,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  {
-                    "marginHorizontal": 24,
-                    "marginVertical": 10,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="button-text"
-        >
-          Outlined Button
-        </Text>
-      </View>
+            ],
+          ]
+        }
+      >
+        Outlined Button
+      </Text>
     </View>
   </View>
 </View>
@@ -1966,147 +5101,201 @@ exports[`renders text button by default 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "minWidth": 64,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+      undefined,
       {
-        "backgroundColor": "transparent",
         "borderColor": "transparent",
-        "borderRadius": 20,
-        "borderStyle": "solid",
         "borderWidth": 0,
-        "flex": undefined,
-        "minWidth": 64,
-        "shadowColor": "#000",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
           {
-            "borderRadius": 20,
+            "opacity": 1,
           },
+          undefined,
         ]
       }
-      testID="button"
     >
-      <View
+      <Text
+        numberOfLines={1}
+        selectable={false}
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
             },
-            undefined,
-          ]
-        }
-      >
-        <Text
-          numberOfLines={1}
-          selectable={false}
-          style={
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(28, 27, 31, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 12,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  {
-                    "marginHorizontal": 12,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="button-text"
-        >
-          Text Button
-        </Text>
-      </View>
+            ],
+          ]
+        }
+      >
+        Text Button
+      </Text>
     </View>
   </View>
 </View>
@@ -2116,147 +5305,201 @@ exports[`renders text button with mode 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "minWidth": 64,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+      undefined,
       {
-        "backgroundColor": "transparent",
         "borderColor": "transparent",
-        "borderRadius": 20,
-        "borderStyle": "solid",
         "borderWidth": 0,
-        "flex": undefined,
-        "minWidth": 64,
-        "shadowColor": "#000",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
           {
-            "borderRadius": 20,
+            "opacity": 1,
           },
+          undefined,
         ]
       }
-      testID="button"
     >
-      <View
+      <Text
+        numberOfLines={1}
+        selectable={false}
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
             },
-            undefined,
-          ]
-        }
-      >
-        <Text
-          numberOfLines={1}
-          selectable={false}
-          style={
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(28, 27, 31, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 12,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  {
-                    "marginHorizontal": 12,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="button-text"
-        >
-          Text Button
-        </Text>
-      </View>
+            ],
+          ]
+        }
+      >
+        Text Button
+      </Text>
     </View>
   </View>
 </View>
diff --git a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
index 2994761722..04687e301f 100644
--- a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
@@ -4,346 +4,279 @@ exports[`renders chip with close button 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(232, 222, 248, 1)",
-      "borderRadius": 8,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "borderWidth": 0.5,
+        "flexDirection": "column",
+      },
+      {
+        "borderWidth": 1,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="chip-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
       {
-        "backgroundColor": "rgba(232, 222, 248, 1)",
         "borderColor": "transparent",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(232, 222, 248, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 8,
-        "borderStyle": "solid",
-        "borderWidth": 1,
-        "flex": undefined,
-        "flexDirection": "column",
-        "shadowColor": "#000",
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 8,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": false,
       }
     }
-    testID="chip-container"
-  >
-    <View
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": false,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+          "overflow": "hidden",
+        },
+        [
+          {
+            "borderRadius": 8,
+          },
+          {
+            "width": "100%",
+          },
+        ],
+      ]
+    }
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "paddingLeft": 4,
+            "position": "relative",
+          },
+          {
+            "paddingLeft": 0,
+          },
+          {
+            "opacity": 1,
+          },
+          {
+            "paddingRight": 34,
           },
-          [
-            {
-              "borderRadius": 8,
-            },
-            {
-              "width": "100%",
-            },
-          ],
         ]
       }
-      testID="chip"
     >
       <View
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "paddingLeft": 4,
-              "position": "relative",
+              "alignSelf": "center",
+              "padding": 4,
             },
             {
-              "paddingLeft": 0,
-            },
-            {
-              "paddingRight": 34,
+              "paddingLeft": 8,
+              "paddingRight": 0,
             },
+            null,
           ]
         }
       >
-        <View
-          style={
-            [
-              {
-                "alignSelf": "center",
-                "padding": 4,
-              },
-              {
-                "paddingLeft": 8,
-                "paddingRight": 0,
-              },
-              null,
-            ]
-          }
-        >
-          <Text
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "rgba(103, 80, 164, 1)",
-                  "fontSize": 18,
-                },
-                [
-                  {
-                    "lineHeight": 18,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                  },
-                ],
-              ]
-            }
-          >
-            information
-          </Text>
-        </View>
         <Text
-          numberOfLines={1}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
           selectable={false}
           style={
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(28, 27, 31, 1)",
-                "writingDirection": "ltr",
+                "color": "rgba(103, 80, 164, 1)",
+                "fontSize": 18,
               },
               [
                 {
-                  "fontFamily": "System",
-                  "fontSize": 14,
-                  "fontWeight": "500",
-                  "letterSpacing": 0.1,
-                  "lineHeight": 20,
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
                 },
-                [
-                  {
-                    "marginVertical": 6,
-                    "textAlignVertical": "center",
-                  },
-                  {
-                    "color": "rgba(29, 25, 43, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  {
-                    "marginLeft": 8,
-                    "marginRight": 0,
-                  },
-                  undefined,
-                ],
               ],
             ]
           }
         >
-          Example Chip
+          information
         </Text>
       </View>
-    </View>
-    <View
-      style={
-        {
-          "alignItems": "center",
-          "height": "100%",
-          "justifyContent": "center",
-          "position": "absolute",
-          "right": 0,
-        }
-      }
-    >
-      <View
-        accessibilityLabel="Close"
-        accessibilityRole="button"
-        accessibilityState={
-          {
-            "busy": undefined,
-            "checked": undefined,
-            "disabled": false,
-            "expanded": undefined,
-            "selected": undefined,
-          }
-        }
-        accessibilityValue={
-          {
-            "max": undefined,
-            "min": undefined,
-            "now": undefined,
-            "text": undefined,
-          }
-        }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-      >
-        <View
-          style={
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
             [
               {
-                "alignSelf": "center",
-                "padding": 4,
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
-              {
-                "marginRight": 4,
-              },
-              {
-                "marginRight": 8,
-                "padding": 0,
-              },
-            ]
-          }
-        >
-          <Text
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            selectable={false}
-            style={
               [
+                {
+                  "marginVertical": 6,
+                  "textAlignVertical": "center",
+                },
                 {
                   "color": "rgba(29, 25, 43, 1)",
-                  "fontSize": 18,
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
                 },
-                [
-                  {
-                    "lineHeight": 18,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                  },
-                ],
-              ]
-            }
-          >
-            close
-          </Text>
-        </View>
-      </View>
+                {
+                  "marginLeft": 8,
+                  "marginRight": 0,
+                },
+                undefined,
+              ],
+            ],
+          ]
+        }
+      >
+        Example Chip
+      </Text>
     </View>
   </View>
-</View>
-`;
-
-exports[`renders chip with custom close button 1`] = `
-<View
-  collapsable={false}
-  style={
-    {
-      "backgroundColor": "rgba(232, 222, 248, 1)",
-      "borderRadius": 8,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="chip-container-outer-layer"
->
   <View
-    collapsable={false}
     style={
       {
-        "backgroundColor": "rgba(232, 222, 248, 1)",
-        "borderColor": "transparent",
-        "borderRadius": 8,
-        "borderStyle": "solid",
-        "borderWidth": 1,
-        "flex": undefined,
-        "flexDirection": "column",
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
+        "alignItems": "center",
+        "height": "100%",
+        "justifyContent": "center",
+        "position": "absolute",
+        "right": 0,
       }
     }
-    testID="chip-container"
   >
     <View
-      accessibilityRole="button"
+      accessibilityLabel="Close"
       accessibilityState={
         {
           "busy": undefined,
           "checked": undefined,
-          "disabled": true,
+          "disabled": false,
           "expanded": undefined,
-          "selected": false,
+          "selected": undefined,
         }
       }
       accessibilityValue={
@@ -366,481 +299,337 @@ exports[`renders chip with custom close button 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
-      style={
-        [
-          {
-            "overflow": "hidden",
-          },
-          [
-            {
-              "borderRadius": 8,
-            },
-            {
-              "width": "100%",
-            },
-          ],
-        ]
-      }
-      testID="chip"
+      role="button"
     >
       <View
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "paddingLeft": 4,
-              "position": "relative",
+              "alignSelf": "center",
+              "padding": 4,
             },
             {
-              "paddingLeft": 0,
+              "marginRight": 4,
             },
             {
-              "paddingRight": 34,
+              "marginRight": 8,
+              "padding": 0,
             },
           ]
         }
       >
-        <View
-          style={
-            [
-              {
-                "alignSelf": "center",
-                "padding": 4,
-              },
-              {
-                "paddingLeft": 8,
-                "paddingRight": 0,
-              },
-              null,
-            ]
-          }
-        >
-          <Text
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "rgba(103, 80, 164, 1)",
-                  "fontSize": 18,
-                },
-                [
-                  {
-                    "lineHeight": 18,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                  },
-                ],
-              ]
-            }
-          >
-            information
-          </Text>
-        </View>
         <Text
-          numberOfLines={1}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
           selectable={false}
           style={
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(28, 27, 31, 1)",
-                "writingDirection": "ltr",
+                "color": "rgba(29, 25, 43, 1)",
+                "fontSize": 18,
               },
               [
                 {
-                  "fontFamily": "System",
-                  "fontSize": 14,
-                  "fontWeight": "500",
-                  "letterSpacing": 0.1,
-                  "lineHeight": 20,
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
                 },
-                [
-                  {
-                    "marginVertical": 6,
-                    "textAlignVertical": "center",
-                  },
-                  {
-                    "color": "rgba(29, 25, 43, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  {
-                    "marginLeft": 8,
-                    "marginRight": 0,
-                  },
-                  undefined,
-                ],
               ],
             ]
           }
         >
-          Example Chip
+          close
         </Text>
       </View>
     </View>
-    <View
-      style={
-        {
-          "alignItems": "center",
-          "height": "100%",
-          "justifyContent": "center",
-          "position": "absolute",
-          "right": 0,
-        }
-      }
-    >
-      <View
-        accessibilityLabel="Close"
-        accessibilityRole="button"
-        accessibilityState={
-          {
-            "busy": undefined,
-            "checked": undefined,
-            "disabled": false,
-            "expanded": undefined,
-            "selected": undefined,
-          }
-        }
-        accessibilityValue={
-          {
-            "max": undefined,
-            "min": undefined,
-            "now": undefined,
-            "text": undefined,
-          }
-        }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-      >
-        <View
-          style={
-            [
-              {
-                "alignSelf": "center",
-                "padding": 4,
-              },
-              {
-                "marginRight": 4,
-              },
-              {
-                "marginRight": 8,
-                "padding": 0,
-              },
-            ]
-          }
-        >
-          <Text
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "rgba(29, 25, 43, 1)",
-                  "fontSize": 18,
-                },
-                [
-                  {
-                    "lineHeight": 18,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                  },
-                ],
-              ]
-            }
-          >
-            arrow-down
-          </Text>
-        </View>
-      </View>
-    </View>
   </View>
 </View>
 `;
 
-exports[`renders chip with icon 1`] = `
+exports[`renders chip with custom close button 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(232, 222, 248, 1)",
-      "borderRadius": 8,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "borderWidth": 0.5,
+        "flexDirection": "column",
+      },
+      {
+        "borderWidth": 1,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="chip-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
       {
-        "backgroundColor": "rgba(232, 222, 248, 1)",
         "borderColor": "transparent",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(232, 222, 248, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 8,
-        "borderStyle": "solid",
-        "borderWidth": 1,
-        "flex": undefined,
-        "flexDirection": "column",
-        "shadowColor": "#000",
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 8,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": false,
       }
     }
-    testID="chip-container"
-  >
-    <View
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": false,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+          "overflow": "hidden",
+        },
+        [
+          {
+            "borderRadius": 8,
+          },
+          {
+            "width": "100%",
+          },
+        ],
+      ]
+    }
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "paddingLeft": 4,
+            "position": "relative",
+          },
+          {
+            "paddingLeft": 0,
+          },
+          {
+            "opacity": 1,
+          },
+          {
+            "paddingRight": 34,
           },
-          [
-            {
-              "borderRadius": 8,
-            },
-            {
-              "width": "100%",
-            },
-          ],
         ]
       }
-      testID="chip"
     >
       <View
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "paddingLeft": 4,
-              "position": "relative",
-            },
-            {
-              "paddingLeft": 0,
+              "alignSelf": "center",
+              "padding": 4,
             },
             {
+              "paddingLeft": 8,
               "paddingRight": 0,
             },
+            null,
           ]
         }
       >
-        <View
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
           style={
             [
               {
-                "alignSelf": "center",
-                "padding": 4,
-              },
-              {
-                "paddingLeft": 8,
-                "paddingRight": 0,
+                "color": "rgba(103, 80, 164, 1)",
+                "fontSize": 18,
               },
-              null,
-            ]
-          }
-        >
-          <Text
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            selectable={false}
-            style={
               [
                 {
-                  "color": "rgba(103, 80, 164, 1)",
-                  "fontSize": 18,
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
                 },
-                [
-                  {
-                    "lineHeight": 18,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                  },
-                ],
-              ]
-            }
-          >
-            information
-          </Text>
-        </View>
-        <Text
-          numberOfLines={1}
-          selectable={false}
-          style={
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          information
+        </Text>
+      </View>
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(28, 27, 31, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginVertical": 6,
+                  "textAlignVertical": "center",
+                },
+                {
+                  "color": "rgba(29, 25, 43, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginVertical": 6,
-                    "textAlignVertical": "center",
-                  },
-                  {
-                    "color": "rgba(29, 25, 43, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  {
-                    "marginLeft": 8,
-                    "marginRight": 16,
-                  },
-                  undefined,
-                ],
+                {
+                  "marginLeft": 8,
+                  "marginRight": 0,
+                },
+                undefined,
               ],
-            ]
-          }
-        >
-          Example Chip
-        </Text>
-      </View>
+            ],
+          ]
+        }
+      >
+        Example Chip
+      </Text>
     </View>
   </View>
-</View>
-`;
-
-exports[`renders chip with onPress 1`] = `
-<View
-  collapsable={false}
-  style={
-    {
-      "backgroundColor": "rgba(232, 222, 248, 1)",
-      "borderRadius": 8,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="chip-container-outer-layer"
->
   <View
-    collapsable={false}
     style={
       {
-        "backgroundColor": "rgba(232, 222, 248, 1)",
-        "borderColor": "transparent",
-        "borderRadius": 8,
-        "borderStyle": "solid",
-        "borderWidth": 1,
-        "flex": undefined,
-        "flexDirection": "column",
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
+        "alignItems": "center",
+        "height": "100%",
+        "justifyContent": "center",
+        "position": "absolute",
+        "right": 0,
       }
     }
-    testID="chip-container"
   >
     <View
-      accessibilityRole="button"
+      accessibilityLabel="Close"
       accessibilityState={
         {
           "busy": undefined,
           "checked": undefined,
           "disabled": false,
           "expanded": undefined,
-          "selected": false,
+          "selected": undefined,
         }
       }
       accessibilityValue={
@@ -863,85 +652,53 @@ exports[`renders chip with onPress 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
-      style={
-        [
-          {
-            "overflow": "hidden",
-          },
-          [
-            {
-              "borderRadius": 8,
-            },
-            {
-              "width": "100%",
-            },
-          ],
-        ]
-      }
-      testID="chip"
+      role="button"
     >
       <View
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "paddingLeft": 4,
-              "position": "relative",
+              "alignSelf": "center",
+              "padding": 4,
             },
             {
-              "paddingLeft": 0,
+              "marginRight": 4,
             },
             {
-              "paddingRight": 0,
+              "marginRight": 8,
+              "padding": 0,
             },
           ]
         }
       >
         <Text
-          numberOfLines={1}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
           selectable={false}
           style={
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(28, 27, 31, 1)",
-                "writingDirection": "ltr",
+                "color": "rgba(29, 25, 43, 1)",
+                "fontSize": 18,
               },
               [
                 {
-                  "fontFamily": "System",
-                  "fontSize": 14,
-                  "fontWeight": "500",
-                  "letterSpacing": 0.1,
-                  "lineHeight": 20,
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
                 },
-                [
-                  {
-                    "marginVertical": 6,
-                    "textAlignVertical": "center",
-                  },
-                  {
-                    "color": "rgba(29, 25, 43, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  {
-                    "marginLeft": 16,
-                    "marginRight": 16,
-                  },
-                  undefined,
-                ],
               ],
             ]
           }
         >
-          Example Chip
+          arrow-down
         </Text>
       </View>
     </View>
@@ -949,360 +706,951 @@ exports[`renders chip with onPress 1`] = `
 </View>
 `;
 
-exports[`renders outlined disabled chip 1`] = `
+exports[`renders chip with icon 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 8,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="chip-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+    [
+      {},
       {
-        "backgroundColor": "transparent",
-        "borderColor": "rgba(73, 69, 79, 0.12)",
-        "borderRadius": 8,
         "borderStyle": "solid",
-        "borderWidth": 1,
-        "flex": undefined,
+        "borderWidth": 0.5,
         "flexDirection": "column",
-        "shadowColor": "#000",
+      },
+      {
+        "borderWidth": 1,
+      },
+      {
+        "borderColor": "transparent",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(232, 222, 248, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 8,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 8,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": false,
       }
     }
-    testID="chip-container"
-  >
-    <View
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": false,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+          "overflow": "hidden",
+        },
+        [
+          {
+            "borderRadius": 8,
+          },
+          {
+            "width": "100%",
+          },
+        ],
+      ]
+    }
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "paddingLeft": 4,
+            "position": "relative",
+          },
+          {
+            "paddingLeft": 0,
+          },
+          {
+            "opacity": 1,
+          },
+          {
+            "paddingRight": 0,
           },
-          [
-            {
-              "borderRadius": 8,
-            },
-            {
-              "width": "100%",
-            },
-          ],
         ]
       }
-      testID="chip"
     >
       <View
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "paddingLeft": 4,
-              "position": "relative",
-            },
-            {
-              "paddingLeft": 0,
+              "alignSelf": "center",
+              "padding": 4,
             },
             {
+              "paddingLeft": 8,
               "paddingRight": 0,
             },
+            null,
           ]
         }
       >
         <Text
-          numberOfLines={1}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
           selectable={false}
           style={
             [
               {
-                "textAlign": "left",
+                "color": "rgba(103, 80, 164, 1)",
+                "fontSize": 18,
               },
+              [
+                {
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          information
+        </Text>
+      </View>
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
+            [
               {
-                "color": "rgba(28, 27, 31, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginVertical": 6,
+                  "textAlignVertical": "center",
+                },
+                {
+                  "color": "rgba(29, 25, 43, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginVertical": 6,
-                    "textAlignVertical": "center",
-                  },
-                  {
-                    "color": "rgba(28, 27, 31, 0.38)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  {
-                    "marginLeft": 16,
-                    "marginRight": 16,
-                  },
-                  undefined,
-                ],
+                {
+                  "marginLeft": 8,
+                  "marginRight": 16,
+                },
+                undefined,
               ],
-            ]
-          }
-        >
-          Example Chip
-        </Text>
-      </View>
+            ],
+          ]
+        }
+      >
+        Example Chip
+      </Text>
     </View>
   </View>
 </View>
 `;
 
-exports[`renders selected chip 1`] = `
+exports[`renders chip with onPress 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgb(232, 222, 248)",
-      "borderRadius": 8,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "borderWidth": 0.5,
+        "flexDirection": "column",
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
+      {
+        "borderWidth": 1,
+      },
+      {
+        "borderColor": "transparent",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(232, 222, 248, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 8,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
   }
-  testID="chip-container-outer-layer"
 >
   <View
     collapsable={false}
     style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 8,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": false,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
+        {
+          "overflow": "hidden",
+        },
+        [
+          {
+            "borderRadius": 8,
+          },
+          {
+            "width": "100%",
+          },
+        ],
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "paddingLeft": 4,
+            "position": "relative",
+          },
+          {
+            "paddingLeft": 0,
+          },
+          {
+            "opacity": 1,
+          },
+          {
+            "paddingRight": 0,
+          },
+        ]
+      }
+    >
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
+            [
+              {
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              [
+                {
+                  "marginVertical": 6,
+                  "textAlignVertical": "center",
+                },
+                {
+                  "color": "rgba(29, 25, 43, 1)",
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                {
+                  "marginLeft": 16,
+                  "marginRight": 16,
+                },
+                undefined,
+              ],
+            ],
+          ]
+        }
+      >
+        Example Chip
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders outlined disabled chip 1`] = `
+<View
+  collapsable={false}
+  style={
+    [
+      {},
       {
-        "backgroundColor": "rgb(232, 222, 248)",
-        "borderColor": "transparent",
-        "borderRadius": 8,
         "borderStyle": "solid",
-        "borderWidth": 1,
-        "flex": undefined,
+        "borderWidth": 0.5,
         "flexDirection": "column",
-        "shadowColor": "#000",
+      },
+      {
+        "borderWidth": 1,
+      },
+      {
+        "borderColor": "rgba(243, 237, 247, 1)",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 8,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 8,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": false,
       }
     }
-    testID="chip-container"
-  >
-    <View
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": true,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+          "overflow": "hidden",
+        },
+        [
+          {
+            "borderRadius": 8,
+          },
+          {
+            "width": "100%",
+          },
+        ],
+      ]
+    }
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "paddingLeft": 4,
+            "position": "relative",
+          },
+          {
+            "paddingLeft": 0,
+          },
+          {
+            "opacity": 0.38,
           },
+          {
+            "paddingRight": 0,
+          },
+        ]
+      }
+    >
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
           [
             {
-              "borderRadius": 8,
+              "textAlign": "left",
             },
             {
-              "width": "100%",
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
             },
-          ],
+            [
+              {
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              [
+                {
+                  "marginVertical": 6,
+                  "textAlignVertical": "center",
+                },
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                {
+                  "marginLeft": 16,
+                  "marginRight": 16,
+                },
+                undefined,
+              ],
+            ],
+          ]
+        }
+      >
+        Example Chip
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders selected chip 1`] = `
+<View
+  collapsable={false}
+  style={
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "borderWidth": 0.5,
+        "flexDirection": "column",
+      },
+      {
+        "borderWidth": 1,
+      },
+      {
+        "borderColor": "transparent",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(232, 222, 248, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 8,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 8,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": true,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
+        {
+          "overflow": "hidden",
+        },
+        [
+          {
+            "borderRadius": 8,
+          },
+          {
+            "width": "100%",
+          },
+        ],
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "paddingLeft": 4,
+            "position": "relative",
+          },
+          {
+            "paddingLeft": 0,
+          },
+          {
+            "opacity": 1,
+          },
+          {
+            "paddingRight": 0,
+          },
         ]
       }
-      testID="chip"
     >
       <View
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "paddingLeft": 4,
-              "position": "relative",
-            },
-            {
-              "paddingLeft": 0,
+              "alignSelf": "center",
+              "padding": 4,
             },
             {
+              "paddingLeft": 8,
               "paddingRight": 0,
             },
+            null,
           ]
         }
       >
-        <View
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
           style={
             [
               {
-                "alignSelf": "center",
-                "padding": 4,
-              },
-              {
-                "paddingLeft": 8,
-                "paddingRight": 0,
+                "color": "rgba(29, 25, 43, 1)",
+                "fontSize": 18,
               },
-              null,
-            ]
-          }
-        >
-          <Text
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            selectable={false}
-            style={
               [
                 {
-                  "color": "rgba(29, 25, 43, 1)",
-                  "fontSize": 18,
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
                 },
-                [
-                  {
-                    "lineHeight": 18,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                  },
-                ],
-              ]
-            }
-          >
-            check
-          </Text>
-        </View>
-        <Text
-          numberOfLines={1}
-          selectable={false}
-          style={
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          check
+        </Text>
+      </View>
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(28, 27, 31, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginVertical": 6,
+                  "textAlignVertical": "center",
+                },
+                {
+                  "color": "rgba(29, 25, 43, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginVertical": 6,
-                    "textAlignVertical": "center",
-                  },
-                  {
-                    "color": "rgba(29, 25, 43, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  {
-                    "marginLeft": 8,
-                    "marginRight": 16,
-                  },
-                  undefined,
-                ],
+                {
+                  "marginLeft": 8,
+                  "marginRight": 16,
+                },
+                undefined,
               ],
-            ]
-          }
-        >
-          Example Chip
-        </Text>
-      </View>
+            ],
+          ]
+        }
+      >
+        Example Chip
+      </Text>
     </View>
   </View>
 </View>
diff --git a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap
index a6ffbfcb06..9084841e9b 100644
--- a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`DataTable.Cell renders data table cell 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "fontFamily": "System",
           "fontWeight": "400",
           "letterSpacing": 0,
@@ -65,13 +65,316 @@ exports[`DataTable.Cell renders data table cell 1`] = `
         undefined,
       ]
     }
-    testID="undefined-text-container"
   >
     Cupcake
   </Text>
 </View>
 `;
 
+exports[`DataTable.Cell renders data table cell children without wrapping text component 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      false,
+      [
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+        },
+        undefined,
+        undefined,
+      ],
+    ]
+  }
+  testID="table-cell"
+>
+  <View
+    accessibilityLiveRegion="polite"
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": true,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    centered={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="checkbox"
+    style={
+      [
+        {
+          "overflow": "hidden",
+        },
+        [
+          {
+            "alignItems": "center",
+            "borderRadius": 20,
+            "height": 40,
+            "justifyContent": "center",
+            "width": 40,
+          },
+          undefined,
+          undefined,
+        ],
+      ]
+    }
+    testID="table-cell-checkbox"
+  >
+    <View
+      pointerEvents="none"
+      style={
+        {
+          "alignItems": "center",
+          "height": 40,
+          "justifyContent": "center",
+          "width": 40,
+        }
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "borderRadius": 2,
+              "height": 18,
+              "justifyContent": "center",
+              "overflow": "hidden",
+              "width": 18,
+            },
+            {
+              "opacity": 1,
+            },
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          pointerEvents="none"
+          style={
+            [
+              {
+                "borderRadius": 2,
+                "borderWidth": 2,
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "borderColor": "rgba(73, 69, 79, 1)",
+                "opacity": 0,
+              },
+            ]
+          }
+        />
+        <View
+          collapsable={false}
+          pointerEvents="none"
+          style={
+            [
+              {
+                "borderRadius": 2,
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "backgroundColor": "rgba(103, 80, 164, 1)",
+                "opacity": 1,
+              },
+            ]
+          }
+        />
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "height": 18,
+                "left": 0,
+                "overflow": "hidden",
+                "position": "absolute",
+                "top": 0,
+              },
+              {
+                "opacity": 1,
+                "width": 18,
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "height": 18,
+                "justifyContent": "center",
+                "width": 18,
+              }
+            }
+          >
+            <View
+              style={
+                [
+                  {
+                    "borderBottomWidth": 2,
+                    "borderLeftWidth": 2,
+                    "height": 6,
+                    "transform": [
+                      {
+                        "rotate": "-45deg",
+                      },
+                      {
+                        "translateY": -1,
+                      },
+                      {
+                        "translateX": 1,
+                      },
+                    ],
+                    "width": 11,
+                  },
+                  {
+                    "borderColor": "rgba(255, 255, 255, 1)",
+                  },
+                  null,
+                ]
+              }
+            />
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`DataTable.Cell renders data table cell with text content 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      false,
+      [
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+        },
+        undefined,
+        undefined,
+      ],
+    ]
+  }
+  testID="table-cell"
+>
+  <Text
+    numberOfLines={1}
+    style={
+      [
+        {
+          "textAlign": "left",
+        },
+        {
+          "color": "rgba(29, 27, 32, 1)",
+          "fontFamily": "System",
+          "fontWeight": "400",
+          "letterSpacing": 0,
+        },
+        {
+          "writingDirection": "ltr",
+        },
+        undefined,
+      ]
+    }
+  >
+    Table cell
+  </Text>
+</View>
+`;
+
 exports[`DataTable.Cell renders right aligned data table cell 1`] = `
 <View
   accessibilityState={
@@ -128,7 +431,7 @@ exports[`DataTable.Cell renders right aligned data table cell 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "fontFamily": "System",
           "fontWeight": "400",
           "letterSpacing": 0,
@@ -139,7 +442,6 @@ exports[`DataTable.Cell renders right aligned data table cell 1`] = `
         undefined,
       ]
     }
-    testID="undefined-text-container"
   >
     356
   </Text>
@@ -213,7 +515,7 @@ exports[`DataTable.Header renders data table header 1`] = `
             "textAlign": "left",
           },
           {
-            "color": "rgba(28, 27, 31, 1)",
+            "color": "rgba(29, 27, 32, 1)",
             "fontFamily": "System",
             "fontWeight": "400",
             "letterSpacing": 0,
@@ -233,7 +535,7 @@ exports[`DataTable.Header renders data table header 1`] = `
             },
             {},
             {
-              "color": "rgba(28, 27, 31, 0.6)",
+              "color": "rgba(73, 69, 79, 1)",
             },
             undefined,
           ],
@@ -294,7 +596,7 @@ exports[`DataTable.Header renders data table header 1`] = `
             "textAlign": "left",
           },
           {
-            "color": "rgba(28, 27, 31, 1)",
+            "color": "rgba(29, 27, 32, 1)",
             "fontFamily": "System",
             "fontWeight": "400",
             "letterSpacing": 0,
@@ -314,7 +616,7 @@ exports[`DataTable.Header renders data table header 1`] = `
             },
             {},
             {
-              "color": "rgba(28, 27, 31, 0.6)",
+              "color": "rgba(73, 69, 79, 1)",
             },
             undefined,
           ],
@@ -329,7 +631,7 @@ exports[`DataTable.Header renders data table header 1`] = `
 
 exports[`DataTable.Pagination renders data table pagination 1`] = `
 <View
-  accessibilityLabel="pagination-container"
+  aria-label="pagination-container"
   style={
     [
       {
@@ -344,7 +646,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = `
   }
 >
   <Text
-    accessibilityLabel="label"
+    aria-label="label"
     numberOfLines={3}
     style={
       [
@@ -352,7 +654,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "fontFamily": "System",
           "fontWeight": "400",
           "letterSpacing": 0,
@@ -366,7 +668,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = `
             "marginRight": 16,
           },
           {
-            "color": "rgba(28, 27, 31, 0.6)",
+            "color": "rgba(73, 69, 79, 1)",
           },
         ],
       ]
@@ -382,104 +684,88 @@ exports[`DataTable.Pagination renders data table pagination 1`] = `
     <View
       collapsable={false}
       style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
-      }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
           {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderColor": "rgba(202, 196, 208, 1)",
             "borderRadius": 20,
             "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        accessibilityLabel="chevron-left"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
           }
         }
-        testID="icon-button-container"
-      >
-        <View
-          accessibilityComponentType="button"
-          accessibilityLabel="chevron-left"
-          accessibilityRole="button"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          accessibilityTraits="button"
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+        }
+        accessible={true}
+        centered={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
             {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
+              "overflow": "hidden",
+            },
             [
               {
-                "overflow": "hidden",
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
               },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
-            ]
+              undefined,
+            ],
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "opacity": 1,
+            }
           }
-          testID="icon-button"
         >
           <Text
             accessibilityElementsHidden={true}
@@ -489,7 +775,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = `
             style={
               [
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontSize": 24,
                 },
                 [
@@ -516,104 +802,88 @@ exports[`DataTable.Pagination renders data table pagination 1`] = `
     <View
       collapsable={false}
       style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+          },
+          undefined,
+        ]
       }
-      testID="icon-button-container-outer-layer"
     >
       <View
-        collapsable={false}
-        style={
+        accessibilityLabel="chevron-right"
+        accessibilityState={
           {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(121, 116, 126, 1)",
-            "borderRadius": 20,
-            "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
           }
         }
-        testID="icon-button-container"
-      >
-        <View
-          accessibilityComponentType="button"
-          accessibilityLabel="chevron-right"
-          accessibilityRole="button"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          accessibilityTraits="button"
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+        }
+        accessible={true}
+        centered={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
             {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
+              "overflow": "hidden",
+            },
             [
               {
-                "overflow": "hidden",
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
               },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
-            ]
+              undefined,
+            ],
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "opacity": 1,
+            }
           }
-          testID="icon-button"
         >
           <Text
             accessibilityElementsHidden={true}
@@ -623,7 +893,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = `
             style={
               [
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontSize": 24,
                 },
                 [
@@ -653,7 +923,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = `
 
 exports[`DataTable.Pagination renders data table pagination with fast-forward buttons 1`] = `
 <View
-  accessibilityLabel="pagination-container"
+  aria-label="pagination-container"
   style={
     [
       {
@@ -668,7 +938,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
   }
 >
   <Text
-    accessibilityLabel="label"
+    aria-label="label"
     numberOfLines={3}
     style={
       [
@@ -676,7 +946,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "fontFamily": "System",
           "fontWeight": "400",
           "letterSpacing": 0,
@@ -690,7 +960,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
             "marginRight": 16,
           },
           {
-            "color": "rgba(28, 27, 31, 0.6)",
+            "color": "rgba(73, 69, 79, 1)",
           },
         ],
       ]
@@ -708,104 +978,88 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
     <View
       collapsable={false}
       style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+          },
+          undefined,
+        ]
       }
-      testID="icon-button-container-outer-layer"
     >
       <View
-        collapsable={false}
-        style={
+        accessibilityLabel="page-first"
+        accessibilityState={
           {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(121, 116, 126, 1)",
-            "borderRadius": 20,
-            "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
           }
         }
-        testID="icon-button-container"
-      >
-        <View
-          accessibilityComponentType="button"
-          accessibilityLabel="page-first"
-          accessibilityRole="button"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          accessibilityTraits="button"
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+        }
+        accessible={true}
+        centered={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
             {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
+              "overflow": "hidden",
+            },
             [
               {
-                "overflow": "hidden",
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
               },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
-            ]
+              undefined,
+            ],
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "opacity": 1,
+            }
           }
-          testID="icon-button"
         >
           <Text
             accessibilityElementsHidden={true}
@@ -815,7 +1069,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
             style={
               [
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontSize": 24,
                 },
                 [
@@ -842,104 +1096,88 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
     <View
       collapsable={false}
       style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+          },
+          undefined,
+        ]
       }
-      testID="icon-button-container-outer-layer"
     >
       <View
+        accessibilityLabel="chevron-left"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        centered={true}
         collapsable={false}
-        style={
+        focusable={true}
+        hitSlop={
           {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(121, 116, 126, 1)",
-            "borderRadius": 20,
-            "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
         }
-        testID="icon-button-container"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
+            {
+              "overflow": "hidden",
+            },
+            [
+              {
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
       >
         <View
-          accessibilityComponentType="button"
-          accessibilityLabel="chevron-left"
-          accessibilityRole="button"
-          accessibilityState={
+          style={
             {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
+              "opacity": 1,
             }
           }
-          accessibilityTraits="button"
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
-            {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            [
-              {
-                "overflow": "hidden",
-              },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
-            ]
-          }
-          testID="icon-button"
         >
           <Text
             accessibilityElementsHidden={true}
@@ -949,7 +1187,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
             style={
               [
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontSize": 24,
                 },
                 [
@@ -976,104 +1214,88 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
     <View
       collapsable={false}
       style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+          },
+          undefined,
+        ]
       }
-      testID="icon-button-container-outer-layer"
     >
       <View
-        collapsable={false}
-        style={
+        accessibilityLabel="chevron-right"
+        accessibilityState={
           {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(121, 116, 126, 1)",
-            "borderRadius": 20,
-            "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
           }
         }
-        testID="icon-button-container"
-      >
-        <View
-          accessibilityComponentType="button"
-          accessibilityLabel="chevron-right"
-          accessibilityRole="button"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          accessibilityTraits="button"
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+        }
+        accessible={true}
+        centered={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
             {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
+              "overflow": "hidden",
+            },
             [
               {
-                "overflow": "hidden",
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
               },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
-            ]
+              undefined,
+            ],
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "opacity": 1,
+            }
           }
-          testID="icon-button"
         >
           <Text
             accessibilityElementsHidden={true}
@@ -1083,7 +1305,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
             style={
               [
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontSize": 24,
                 },
                 [
@@ -1110,104 +1332,88 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
     <View
       collapsable={false}
       style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+          },
+          undefined,
+        ]
       }
-      testID="icon-button-container-outer-layer"
     >
       <View
-        collapsable={false}
-        style={
+        accessibilityLabel="page-last"
+        accessibilityState={
           {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(121, 116, 126, 1)",
-            "borderRadius": 20,
-            "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
           }
         }
-        testID="icon-button-container"
-      >
-        <View
-          accessibilityComponentType="button"
-          accessibilityLabel="page-last"
-          accessibilityRole="button"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          accessibilityTraits="button"
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+        }
+        accessible={true}
+        centered={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
             {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
+              "overflow": "hidden",
+            },
             [
               {
-                "overflow": "hidden",
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
               },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
-            ]
+              undefined,
+            ],
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "opacity": 1,
+            }
           }
-          testID="icon-button"
         >
           <Text
             accessibilityElementsHidden={true}
@@ -1217,7 +1423,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
             style={
               [
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontSize": 24,
                 },
                 [
@@ -1247,7 +1453,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
 
 exports[`DataTable.Pagination renders data table pagination with label 1`] = `
 <View
-  accessibilityLabel="pagination-container"
+  aria-label="pagination-container"
   style={
     [
       {
@@ -1262,7 +1468,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = `
   }
 >
   <Text
-    accessibilityLabel="label"
+    aria-label="label"
     numberOfLines={3}
     style={
       [
@@ -1270,7 +1476,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "fontFamily": "System",
           "fontWeight": "400",
           "letterSpacing": 0,
@@ -1284,7 +1490,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = `
             "marginRight": 16,
           },
           {
-            "color": "rgba(28, 27, 31, 0.6)",
+            "color": "rgba(73, 69, 79, 1)",
           },
         ],
       ]
@@ -1302,104 +1508,88 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = `
     <View
       collapsable={false}
       style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+          },
+          undefined,
+        ]
       }
-      testID="icon-button-container-outer-layer"
     >
       <View
-        collapsable={false}
-        style={
+        accessibilityLabel="chevron-left"
+        accessibilityState={
           {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(121, 116, 126, 1)",
-            "borderRadius": 20,
-            "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
           }
         }
-        testID="icon-button-container"
-      >
-        <View
-          accessibilityComponentType="button"
-          accessibilityLabel="chevron-left"
-          accessibilityRole="button"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          accessibilityTraits="button"
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+        }
+        accessible={true}
+        centered={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
             {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
+              "overflow": "hidden",
+            },
             [
               {
-                "overflow": "hidden",
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
               },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
-            ]
+              undefined,
+            ],
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "opacity": 1,
+            }
           }
-          testID="icon-button"
         >
           <Text
             accessibilityElementsHidden={true}
@@ -1409,7 +1599,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = `
             style={
               [
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontSize": 24,
                 },
                 [
@@ -1436,104 +1626,88 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = `
     <View
       collapsable={false}
       style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
-      }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+        [
           {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(121, 116, 126, 1)",
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
             "borderRadius": 20,
             "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
-          }
-        }
-        testID="icon-button-container"
-      >
-        <View
-          accessibilityComponentType="button"
-          accessibilityLabel="chevron-right"
-          accessibilityRole="button"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityTraits="button"
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        accessibilityLabel="chevron-right"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
           }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
-            {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
+        }
+        accessible={true}
+        centered={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
+          }
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
+            {
+              "overflow": "hidden",
+            },
             [
               {
-                "overflow": "hidden",
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
               },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
-            ]
+              undefined,
+            ],
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "opacity": 1,
+            }
           }
-          testID="icon-button"
         >
           <Text
             accessibilityElementsHidden={true}
@@ -1543,7 +1717,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = `
             style={
               [
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontSize": 24,
                 },
                 [
@@ -1573,7 +1747,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = `
 
 exports[`DataTable.Pagination renders data table pagination with options select 1`] = `
 <View
-  accessibilityLabel="pagination-container"
+  aria-label="pagination-container"
   style={
     [
       {
@@ -1588,7 +1762,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
   }
 >
   <View
-    accessibilityLabel="Options Select"
+    aria-label="Options Select"
     style={
       {
         "alignItems": "center",
@@ -1598,7 +1772,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
     }
   >
     <Text
-      accessibilityLabel="selectPageDropdownLabel"
+      aria-label="selectPageDropdownLabel"
       numberOfLines={3}
       style={
         [
@@ -1606,7 +1780,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
             "textAlign": "left",
           },
           {
-            "color": "rgba(28, 27, 31, 1)",
+            "color": "rgba(29, 27, 32, 1)",
             "fontFamily": "System",
             "fontWeight": "400",
             "letterSpacing": 0,
@@ -1620,7 +1794,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
               "marginRight": 16,
             },
             {
-              "color": "rgba(28, 27, 31, 0.6)",
+              "color": "rgba(73, 69, 79, 1)",
             },
           ],
         ]
@@ -1634,205 +1808,259 @@ exports[`DataTable.Pagination renders data table pagination with options select
       <View
         collapsable={false}
         style={
-          {
-            "backgroundColor": "transparent",
-            "borderRadius": 20,
-            "marginRight": 16,
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
+          [
+            {},
+            {
+              "borderStyle": "solid",
+              "minWidth": 64,
             },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
-          }
-        }
-        testID="button-container-outer-layer"
-      >
-        <View
-          collapsable={false}
-          style={
+            undefined,
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderWidth": 1,
+            },
+            {
+              "marginRight": 16,
+              "textAlign": "center",
+            },
+            {},
             {
               "backgroundColor": "transparent",
-              "borderColor": "rgba(121, 116, 126, 1)",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
               "borderRadius": 20,
-              "borderStyle": "solid",
-              "borderWidth": 1,
-              "flex": undefined,
-              "minWidth": 64,
-              "shadowColor": "#000",
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
               "shadowOffset": {
                 "height": 0,
                 "width": 0,
               },
               "shadowOpacity": 0,
               "shadowRadius": 0,
-              "textAlign": "center",
+            },
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 20,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0,
+                "shadowRadius": 0,
+              },
+            ]
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
             }
           }
-          testID="button-container"
-        >
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": false,
-                "expanded": undefined,
-                "selected": undefined,
-              }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
-            accessibilityValue={
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
               {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+                "overflow": "hidden",
+              },
+              {
+                "borderRadius": 19,
+              },
+            ]
+          }
+        >
+          <View
             style={
               [
                 {
-                  "overflow": "hidden",
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                },
+                {
+                  "opacity": 1,
                 },
                 {
-                  "borderRadius": 19,
+                  "flexDirection": "row-reverse",
                 },
               ]
             }
-            testID="button"
           >
             <View
               style={
                 [
                   {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "justifyContent": "center",
+                    "marginLeft": -4,
+                    "marginRight": 12,
                   },
                   {
-                    "flexDirection": "row-reverse",
+                    "marginLeft": -16,
+                    "marginRight": 16,
                   },
+                  false,
                 ]
               }
             >
-              <View
+              <Text
+                accessibilityElementsHidden={true}
+                importantForAccessibility="no-hide-descendants"
+                pointerEvents="none"
+                selectable={false}
                 style={
                   [
                     {
-                      "marginLeft": -4,
-                      "marginRight": 12,
-                    },
-                    {
-                      "marginLeft": -16,
-                      "marginRight": 16,
+                      "color": "rgba(103, 80, 164, 1)",
+                      "fontSize": 18,
                     },
-                    false,
-                  ]
-                }
-                testID="button-icon-container"
-              >
-                <Text
-                  accessibilityElementsHidden={true}
-                  importantForAccessibility="no-hide-descendants"
-                  pointerEvents="none"
-                  selectable={false}
-                  style={
                     [
                       {
-                        "color": "rgba(103, 80, 164, 1)",
-                        "fontSize": 18,
+                        "lineHeight": 18,
+                        "transform": [
+                          {
+                            "scaleX": 1,
+                          },
+                        ],
                       },
-                      [
-                        {
-                          "lineHeight": 18,
-                          "transform": [
-                            {
-                              "scaleX": 1,
-                            },
-                          ],
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                        },
-                      ],
-                    ]
-                  }
-                >
-                  menu-down
-                </Text>
-              </View>
-              <Text
-                numberOfLines={1}
-                selectable={false}
-                style={
+                      {
+                        "backgroundColor": "transparent",
+                      },
+                    ],
+                  ]
+                }
+              >
+                menu-down
+              </Text>
+            </View>
+            <Text
+              numberOfLines={1}
+              selectable={false}
+              style={
+                [
+                  {
+                    "textAlign": "left",
+                  },
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                    "writingDirection": "ltr",
+                  },
                   [
                     {
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "rgba(28, 27, 31, 1)",
-                      "writingDirection": "ltr",
+                      "fontFamily": "System",
+                      "fontSize": 14,
+                      "fontWeight": "500",
+                      "letterSpacing": 0.1,
+                      "lineHeight": 20,
                     },
                     [
                       {
+                        "marginHorizontal": 16,
+                        "marginVertical": 9,
+                        "textAlign": "center",
+                      },
+                      {
+                        "marginHorizontal": 24,
+                        "marginVertical": 10,
+                      },
+                      undefined,
+                      false,
+                      {
+                        "color": "rgba(103, 80, 164, 1)",
                         "fontFamily": "System",
                         "fontSize": 14,
                         "fontWeight": "500",
                         "letterSpacing": 0.1,
                         "lineHeight": 20,
                       },
-                      [
-                        {
-                          "marginHorizontal": 16,
-                          "marginVertical": 9,
-                          "textAlign": "center",
-                        },
-                        false,
-                        {
-                          "marginHorizontal": 24,
-                          "marginVertical": 10,
-                        },
-                        undefined,
-                        false,
-                        {
-                          "color": "rgba(103, 80, 164, 1)",
-                          "fontFamily": "System",
-                          "fontSize": 14,
-                          "fontWeight": "500",
-                          "letterSpacing": 0.1,
-                          "lineHeight": 20,
-                        },
-                        undefined,
-                      ],
+                      undefined,
                     ],
-                  ]
-                }
-                testID="button-text"
-              >
-                2
-              </Text>
-            </View>
+                  ],
+                ]
+              }
+            >
+              2
+            </Text>
           </View>
         </View>
       </View>
     </View>
   </View>
   <Text
-    accessibilityLabel="label"
+    aria-label="label"
     numberOfLines={3}
     style={
       [
@@ -1840,7 +2068,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "fontFamily": "System",
           "fontWeight": "400",
           "letterSpacing": 0,
@@ -1854,7 +2082,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
             "marginRight": 16,
           },
           {
-            "color": "rgba(28, 27, 31, 0.6)",
+            "color": "rgba(73, 69, 79, 1)",
           },
         ],
       ]
@@ -1872,104 +2100,88 @@ exports[`DataTable.Pagination renders data table pagination with options select
     <View
       collapsable={false}
       style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+          },
+          undefined,
+        ]
       }
-      testID="icon-button-container-outer-layer"
     >
       <View
-        collapsable={false}
-        style={
+        accessibilityLabel="page-first"
+        accessibilityState={
           {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(121, 116, 126, 1)",
-            "borderRadius": 20,
-            "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
           }
         }
-        testID="icon-button-container"
-      >
-        <View
-          accessibilityComponentType="button"
-          accessibilityLabel="page-first"
-          accessibilityRole="button"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          accessibilityTraits="button"
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+        }
+        accessible={true}
+        centered={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
             {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
+              "overflow": "hidden",
+            },
             [
               {
-                "overflow": "hidden",
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
               },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
-            ]
+              undefined,
+            ],
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "opacity": 1,
+            }
           }
-          testID="icon-button"
         >
           <Text
             accessibilityElementsHidden={true}
@@ -1979,7 +2191,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
             style={
               [
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontSize": 24,
                 },
                 [
@@ -2006,104 +2218,88 @@ exports[`DataTable.Pagination renders data table pagination with options select
     <View
       collapsable={false}
       style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+          },
+          undefined,
+        ]
       }
-      testID="icon-button-container-outer-layer"
     >
       <View
-        collapsable={false}
-        style={
+        accessibilityLabel="chevron-left"
+        accessibilityState={
           {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(121, 116, 126, 1)",
-            "borderRadius": 20,
-            "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
           }
         }
-        testID="icon-button-container"
-      >
-        <View
-          accessibilityComponentType="button"
-          accessibilityLabel="chevron-left"
-          accessibilityRole="button"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          accessibilityTraits="button"
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+        }
+        accessible={true}
+        centered={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
             {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
+              "overflow": "hidden",
+            },
             [
               {
-                "overflow": "hidden",
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
               },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
-            ]
+              undefined,
+            ],
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "opacity": 1,
+            }
           }
-          testID="icon-button"
         >
           <Text
             accessibilityElementsHidden={true}
@@ -2113,7 +2309,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
             style={
               [
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontSize": 24,
                 },
                 [
@@ -2140,104 +2336,88 @@ exports[`DataTable.Pagination renders data table pagination with options select
     <View
       collapsable={false}
       style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+          },
+          undefined,
+        ]
       }
-      testID="icon-button-container-outer-layer"
     >
       <View
-        collapsable={false}
-        style={
+        accessibilityLabel="chevron-right"
+        accessibilityState={
           {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(121, 116, 126, 1)",
-            "borderRadius": 20,
-            "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
           }
         }
-        testID="icon-button-container"
-      >
-        <View
-          accessibilityComponentType="button"
-          accessibilityLabel="chevron-right"
-          accessibilityRole="button"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          accessibilityTraits="button"
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+        }
+        accessible={true}
+        centered={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
             {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
+              "overflow": "hidden",
+            },
             [
               {
-                "overflow": "hidden",
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
               },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
-            ]
+              undefined,
+            ],
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "opacity": 1,
+            }
           }
-          testID="icon-button"
         >
           <Text
             accessibilityElementsHidden={true}
@@ -2247,7 +2427,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
             style={
               [
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontSize": 24,
                 },
                 [
@@ -2274,104 +2454,88 @@ exports[`DataTable.Pagination renders data table pagination with options select
     <View
       collapsable={false}
       style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+          },
+          undefined,
+        ]
       }
-      testID="icon-button-container-outer-layer"
     >
       <View
-        collapsable={false}
-        style={
+        accessibilityLabel="page-last"
+        accessibilityState={
           {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(121, 116, 126, 1)",
-            "borderRadius": 20,
-            "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
           }
         }
-        testID="icon-button-container"
-      >
-        <View
-          accessibilityComponentType="button"
-          accessibilityLabel="page-last"
-          accessibilityRole="button"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          accessibilityTraits="button"
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+        }
+        accessible={true}
+        centered={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
             {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
+              "overflow": "hidden",
+            },
             [
               {
-                "overflow": "hidden",
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
               },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
-            ]
+              undefined,
+            ],
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "opacity": 1,
+            }
           }
-          testID="icon-button"
         >
           <Text
             accessibilityElementsHidden={true}
@@ -2381,7 +2545,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
             style={
               [
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontSize": 24,
                 },
                 [
@@ -2456,15 +2620,19 @@ exports[`DataTable.Title renders data table title with press handler 1`] = `
   <View
     collapsable={false}
     style={
-      {
-        "height": 24,
-        "justifyContent": "center",
-        "transform": [
-          {
-            "rotate": "180deg",
-          },
-        ],
-      }
+      [
+        {
+          "height": 24,
+          "justifyContent": "center",
+        },
+        {
+          "transform": [
+            {
+              "rotate": "180deg",
+            },
+          ],
+        },
+      ]
     }
   >
     <Text
@@ -2475,7 +2643,7 @@ exports[`DataTable.Title renders data table title with press handler 1`] = `
       style={
         [
           {
-            "color": "rgba(28, 27, 31, 1)",
+            "color": "rgba(29, 27, 32, 1)",
             "fontSize": 16,
           },
           [
@@ -2505,7 +2673,7 @@ exports[`DataTable.Title renders data table title with press handler 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "fontFamily": "System",
           "fontWeight": "400",
           "letterSpacing": 0,
@@ -2584,15 +2752,19 @@ exports[`DataTable.Title renders data table title with sort icon 1`] = `
   <View
     collapsable={false}
     style={
-      {
-        "height": 24,
-        "justifyContent": "center",
-        "transform": [
-          {
-            "rotate": "180deg",
-          },
-        ],
-      }
+      [
+        {
+          "height": 24,
+          "justifyContent": "center",
+        },
+        {
+          "transform": [
+            {
+              "rotate": "180deg",
+            },
+          ],
+        },
+      ]
     }
   >
     <Text
@@ -2603,7 +2775,7 @@ exports[`DataTable.Title renders data table title with sort icon 1`] = `
       style={
         [
           {
-            "color": "rgba(28, 27, 31, 1)",
+            "color": "rgba(29, 27, 32, 1)",
             "fontSize": 16,
           },
           [
@@ -2633,7 +2805,7 @@ exports[`DataTable.Title renders data table title with sort icon 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "fontFamily": "System",
           "fontWeight": "400",
           "letterSpacing": 0,
@@ -2719,7 +2891,7 @@ exports[`DataTable.Title renders right aligned data table title 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "fontFamily": "System",
           "fontWeight": "400",
           "letterSpacing": 0,
@@ -2739,7 +2911,7 @@ exports[`DataTable.Title renders right aligned data table title 1`] = `
           },
           {},
           {
-            "color": "rgba(28, 27, 31, 0.6)",
+            "color": "rgba(73, 69, 79, 1)",
           },
           undefined,
         ],
diff --git a/src/components/__tests__/__snapshots__/DrawerItem.test.tsx.snap b/src/components/__tests__/__snapshots__/DrawerItem.test.tsx.snap
index 78e3ed8612..4823f954c1 100644
--- a/src/components/__tests__/__snapshots__/DrawerItem.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/DrawerItem.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`renders DrawerItem with icon 1`] = `
 <View>
   <View
-    accessibilityRole="button"
     accessibilityState={
       {
         "busy": undefined,
@@ -33,6 +32,7 @@ exports[`renders DrawerItem with icon 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    role="button"
     style={
       [
         {
@@ -43,10 +43,6 @@ exports[`renders DrawerItem with icon 1`] = `
             "marginHorizontal": 10,
             "marginVertical": 4,
           },
-          {
-            "backgroundColor": undefined,
-            "borderRadius": 28,
-          },
           {
             "height": 56,
             "justifyContent": "center",
@@ -54,6 +50,10 @@ exports[`renders DrawerItem with icon 1`] = `
             "marginRight": 12,
             "marginVertical": 0,
           },
+          {
+            "backgroundColor": undefined,
+            "borderRadius": 28,
+          },
           undefined,
         ],
       ]
@@ -122,7 +122,7 @@ exports[`renders DrawerItem with icon 1`] = `
                 "textAlign": "left",
               },
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
                 "writingDirection": "ltr",
               },
               [
@@ -162,7 +162,6 @@ exports[`renders DrawerItem with icon 1`] = `
 exports[`renders active DrawerItem 1`] = `
 <View>
   <View
-    accessibilityRole="button"
     accessibilityState={
       {
         "busy": undefined,
@@ -192,6 +191,7 @@ exports[`renders active DrawerItem 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    role="button"
     style={
       [
         {
@@ -202,10 +202,6 @@ exports[`renders active DrawerItem 1`] = `
             "marginHorizontal": 10,
             "marginVertical": 4,
           },
-          {
-            "backgroundColor": "rgba(232, 222, 248, 1)",
-            "borderRadius": 28,
-          },
           {
             "height": 56,
             "justifyContent": "center",
@@ -213,6 +209,10 @@ exports[`renders active DrawerItem 1`] = `
             "marginRight": 12,
             "marginVertical": 0,
           },
+          {
+            "backgroundColor": "rgba(232, 222, 248, 1)",
+            "borderRadius": 28,
+          },
           undefined,
         ],
       ]
@@ -281,7 +281,7 @@ exports[`renders active DrawerItem 1`] = `
                 "textAlign": "left",
               },
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
                 "writingDirection": "ltr",
               },
               [
@@ -321,7 +321,6 @@ exports[`renders active DrawerItem 1`] = `
 exports[`renders basic DrawerItem 1`] = `
 <View>
   <View
-    accessibilityRole="button"
     accessibilityState={
       {
         "busy": undefined,
@@ -351,6 +350,7 @@ exports[`renders basic DrawerItem 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    role="button"
     style={
       [
         {
@@ -361,10 +361,6 @@ exports[`renders basic DrawerItem 1`] = `
             "marginHorizontal": 10,
             "marginVertical": 4,
           },
-          {
-            "backgroundColor": undefined,
-            "borderRadius": 28,
-          },
           {
             "height": 56,
             "justifyContent": "center",
@@ -372,6 +368,10 @@ exports[`renders basic DrawerItem 1`] = `
             "marginRight": 12,
             "marginVertical": 0,
           },
+          {
+            "backgroundColor": undefined,
+            "borderRadius": 28,
+          },
           undefined,
         ],
       ]
@@ -411,7 +411,7 @@ exports[`renders basic DrawerItem 1`] = `
                 "textAlign": "left",
               },
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
                 "writingDirection": "ltr",
               },
               [
diff --git a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap
index b4a42c20fa..4b06302358 100644
--- a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap
@@ -1,55 +1,129 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders FAB with custom size prop 1`] = `
+exports[`renders FAB large size 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(234, 221, 255, 1)",
-      "borderRadius": 25,
-      "opacity": 1,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 4,
-        "width": 0,
-      },
-      "shadowOpacity": 0.15,
-      "shadowRadius": 8,
-      "transform": [
-        {
-          "scale": 1,
-        },
-      ],
-    }
+    [
+      {},
+      undefined,
+      {
+        "transformOrigin": "center",
+      },
+      {
+        "height": 96,
+        "opacity": 1,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+        "width": 96,
+      },
+      {
+        "pointerEvents": "auto",
+      },
+      {},
+      {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 28,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 3.33,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 4.75,
+      },
+    ]
   }
-  testID="fab-container-outer-layer"
 >
   <View
     collapsable={false}
-    pointerEvents="auto"
     style={
-      {
-        "backgroundColor": "rgba(234, 221, 255, 1)",
-        "borderRadius": 25,
-        "flex": undefined,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 1,
-          "width": 0,
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 3,
-      }
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 28,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderRadius": 28,
+        },
+      ]
     }
-    testID="fab-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
           "checked": undefined,
-          "disabled": false,
+          "disabled": true,
           "expanded": undefined,
           "selected": undefined,
         }
@@ -74,156 +148,221 @@ exports[`renders FAB with custom size prop 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
             "overflow": "hidden",
           },
-          {
-            "borderRadius": 25,
-          },
+          [
+            null,
+            null,
+          ],
         ]
       }
-      testID="fab"
     >
       <View
-        pointerEvents="none"
         style={
           [
             {
               "alignItems": "center",
               "flexDirection": "row",
-              "justifyContent": "center",
+              "pointerEvents": "none",
             },
-            {
-              "borderRadius": 25,
-              "height": 100,
-              "width": 100,
-            },
-          ]
-        }
-        testID="fab-content"
-      >
-        <View
-          style={
             [
               {
-                "alignItems": "center",
                 "justifyContent": "center",
               },
               {
-                "height": 50,
-                "width": 50,
+                "height": 96,
+                "width": 96,
               },
-            ]
-          }
-        >
-          <View
-            collapsable={false}
-            style={
+            ],
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
+          style={
+            [
               {
-                "bottom": 0,
-                "left": 0,
-                "opacity": 1,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "transform": [
-                  {
-                    "rotate": "0deg",
-                  },
-                ],
-              }
-            }
-            testID="cross-fade-icon-current"
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                [
-                  {
-                    "color": "rgba(33, 0, 93, 1)",
-                    "fontSize": 50,
-                  },
-                  [
-                    {
-                      "lineHeight": 50,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
+                "color": "rgba(33, 0, 93, 1)",
+                "fontSize": 36,
+              },
+              [
+                {
+                  "lineHeight": 36,
+                  "transform": [
                     {
-                      "backgroundColor": "transparent",
+                      "scaleX": 1,
                     },
                   ],
-                ]
-              }
-            >
-              plus
-            </Text>
-          </View>
-        </View>
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          plus
+        </Text>
       </View>
     </View>
   </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+        {
+          "borderRadius": 33,
+          "opacity": 0,
+        },
+      ]
+    }
+  />
 </View>
 `;
 
-exports[`renders custom color for the icon and label of the FAB 1`] = `
+exports[`renders FAB medium size 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(234, 221, 255, 1)",
-      "borderRadius": 16,
-      "opacity": 1,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 4,
-        "width": 0,
-      },
-      "shadowOpacity": 0.15,
-      "shadowRadius": 8,
-      "transform": [
-        {
-          "scale": 1,
-        },
-      ],
-    }
+    [
+      {},
+      undefined,
+      {
+        "transformOrigin": "center",
+      },
+      {
+        "height": 80,
+        "opacity": 1,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+        "width": 80,
+      },
+      {
+        "pointerEvents": "auto",
+      },
+      {},
+      {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 3.33,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 4.75,
+      },
+    ]
   }
-  testID="fab-container-outer-layer"
 >
   <View
     collapsable={false}
-    pointerEvents="auto"
     style={
-      {
-        "backgroundColor": "rgba(234, 221, 255, 1)",
-        "borderRadius": 16,
-        "flex": undefined,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 1,
-          "width": 0,
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 3,
-      }
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderRadius": 20,
+        },
+      ]
     }
-    testID="fab-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
           "checked": undefined,
-          "disabled": false,
+          "disabled": true,
           "expanded": undefined,
           "selected": undefined,
         }
@@ -248,156 +387,460 @@ exports[`renders custom color for the icon and label of the FAB 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
             "overflow": "hidden",
           },
-          {
-            "borderRadius": 16,
-          },
+          [
+            null,
+            null,
+          ],
         ]
       }
-      testID="fab"
     >
       <View
-        pointerEvents="none"
         style={
           [
             {
               "alignItems": "center",
               "flexDirection": "row",
-              "justifyContent": "center",
-            },
-            {
-              "borderRadius": 16,
-              "height": 56,
-              "width": 56,
+              "pointerEvents": "none",
             },
-          ]
-        }
-        testID="fab-content"
-      >
-        <View
-          style={
             [
               {
-                "alignItems": "center",
                 "justifyContent": "center",
               },
               {
-                "height": 24,
-                "width": 24,
+                "height": 80,
+                "width": 80,
               },
-            ]
-          }
-        >
-          <View
-            collapsable={false}
-            style={
+            ],
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
+          style={
+            [
               {
-                "bottom": 0,
-                "left": 0,
-                "opacity": 1,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "transform": [
-                  {
-                    "rotate": "0deg",
-                  },
-                ],
-              }
-            }
-            testID="cross-fade-icon-current"
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                [
-                  {
-                    "color": "#AA0114",
-                    "fontSize": 24,
-                  },
-                  [
-                    {
-                      "lineHeight": 24,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
+                "color": "rgba(33, 0, 93, 1)",
+                "fontSize": 28,
+              },
+              [
+                {
+                  "lineHeight": 28,
+                  "transform": [
                     {
-                      "backgroundColor": "transparent",
+                      "scaleX": 1,
                     },
                   ],
-                ]
-              }
-            >
-              plus
-            </Text>
-          </View>
-        </View>
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          plus
+        </Text>
       </View>
     </View>
   </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+        {
+          "borderRadius": 25,
+          "opacity": 0,
+        },
+      ]
+    }
+  />
 </View>
 `;
 
-exports[`renders default FAB 1`] = `
+exports[`renders FAB transitioning to not visible 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(234, 221, 255, 1)",
-      "borderRadius": 16,
-      "opacity": 1,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 4,
-        "width": 0,
-      },
-      "shadowOpacity": 0.15,
-      "shadowRadius": 8,
-      "transform": [
-        {
-          "scale": 1,
-        },
-      ],
-    }
+    [
+      {},
+      undefined,
+      {
+        "transformOrigin": "center",
+      },
+      {
+        "height": 56,
+        "opacity": 1,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+        "width": 56,
+      },
+      {
+        "pointerEvents": "none",
+      },
+      {},
+      {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 3.33,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 4.75,
+      },
+    ]
   }
-  testID="fab-container-outer-layer"
 >
   <View
     collapsable={false}
-    pointerEvents="auto"
     style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderRadius": 16,
+        },
+      ]
+    }
+  >
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": true,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          [
+            null,
+            null,
+          ],
+        ]
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "pointerEvents": "none",
+            },
+            [
+              {
+                "justifyContent": "center",
+              },
+              {
+                "height": 56,
+                "width": 56,
+              },
+            ],
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
+          style={
+            [
+              {
+                "color": "rgba(33, 0, 93, 1)",
+                "fontSize": 24,
+              },
+              [
+                {
+                  "lineHeight": 24,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          plus
+        </Text>
+      </View>
+    </View>
+  </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+        {
+          "borderRadius": 21,
+          "opacity": 0,
+        },
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`renders FAB transitioning to visible 1`] = `
+<View
+  collapsable={false}
+  style={
+    [
+      {},
+      undefined,
+      {
+        "transformOrigin": "center",
+      },
+      {
+        "height": 56,
+        "opacity": 0,
+        "transform": [
+          {
+            "scale": 0,
+          },
+        ],
+        "width": 56,
+      },
+      {
+        "pointerEvents": "auto",
+      },
+      {},
       {
         "backgroundColor": "rgba(234, 221, 255, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 16,
-        "flex": undefined,
-        "shadowColor": "#000",
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
-          "height": 1,
+          "height": 3.33,
           "width": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 3,
-      }
+        "shadowOpacity": 0.19,
+        "shadowRadius": 4.75,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderRadius": 16,
+        },
+      ]
     }
-    testID="fab-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
           "checked": undefined,
-          "disabled": false,
+          "disabled": true,
           "expanded": undefined,
           "selected": undefined,
         }
@@ -422,151 +865,217 @@ exports[`renders default FAB 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
             "overflow": "hidden",
           },
-          {
-            "borderRadius": 16,
-          },
+          [
+            null,
+            null,
+          ],
         ]
       }
-      testID="fab"
     >
       <View
-        pointerEvents="none"
         style={
           [
             {
               "alignItems": "center",
               "flexDirection": "row",
-              "justifyContent": "center",
+              "pointerEvents": "none",
             },
-            {
-              "borderRadius": 16,
-              "height": 56,
-              "width": 56,
-            },
-          ]
-        }
-        testID="fab-content"
-      >
-        <View
-          style={
             [
               {
-                "alignItems": "center",
                 "justifyContent": "center",
               },
               {
-                "height": 24,
-                "width": 24,
+                "height": 56,
+                "width": 56,
               },
-            ]
-          }
-        >
-          <View
-            collapsable={false}
-            style={
+            ],
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
+          style={
+            [
               {
-                "bottom": 0,
-                "left": 0,
-                "opacity": 1,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "transform": [
-                  {
-                    "rotate": "0deg",
-                  },
-                ],
-              }
-            }
-            testID="cross-fade-icon-current"
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                [
-                  {
-                    "color": "rgba(33, 0, 93, 1)",
-                    "fontSize": 24,
-                  },
-                  [
-                    {
-                      "lineHeight": 24,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
+                "color": "rgba(33, 0, 93, 1)",
+                "fontSize": 24,
+              },
+              [
+                {
+                  "lineHeight": 24,
+                  "transform": [
                     {
-                      "backgroundColor": "transparent",
+                      "scaleX": 1,
                     },
                   ],
-                ]
-              }
-            >
-              plus
-            </Text>
-          </View>
-        </View>
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          plus
+        </Text>
       </View>
     </View>
   </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+        {
+          "borderRadius": 21,
+          "opacity": 0,
+        },
+      ]
+    }
+  />
 </View>
 `;
 
-exports[`renders disabled FAB 1`] = `
+exports[`renders FAB with aria-label 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(28, 27, 31, 0.12)",
-      "borderRadius": 16,
-      "opacity": 1,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-      "transform": [
-        {
-          "scale": 1,
-        },
-      ],
-    }
+    [
+      {},
+      undefined,
+      {
+        "transformOrigin": "center",
+      },
+      {
+        "height": 56,
+        "opacity": 1,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+        "width": 56,
+      },
+      {
+        "pointerEvents": "auto",
+      },
+      {},
+      {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 3.33,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 4.75,
+      },
+    ]
   }
-  testID="fab-container-outer-layer"
 >
   <View
     collapsable={false}
-    pointerEvents="auto"
     style={
-      {
-        "backgroundColor": "rgba(28, 27, 31, 0.12)",
-        "borderRadius": 16,
-        "flex": undefined,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
-      }
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderRadius": 16,
+        },
+      ]
     }
-    testID="fab-container"
   >
     <View
-      accessibilityRole="button"
+      accessibilityLabel="Add item"
       accessibilityState={
         {
           "busy": undefined,
@@ -596,157 +1105,221 @@ exports[`renders disabled FAB 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
             "overflow": "hidden",
           },
-          {
-            "borderRadius": 16,
-          },
+          [
+            null,
+            null,
+          ],
         ]
       }
-      testID="fab"
     >
       <View
-        pointerEvents="none"
         style={
           [
             {
               "alignItems": "center",
               "flexDirection": "row",
-              "justifyContent": "center",
-            },
-            {
-              "borderRadius": 16,
-              "height": 56,
-              "width": 56,
+              "pointerEvents": "none",
             },
-          ]
-        }
-        testID="fab-content"
-      >
-        <View
-          style={
             [
               {
-                "alignItems": "center",
                 "justifyContent": "center",
               },
               {
-                "height": 24,
-                "width": 24,
+                "height": 56,
+                "width": 56,
               },
-            ]
-          }
-        >
-          <View
-            collapsable={false}
-            style={
+            ],
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
+          style={
+            [
               {
-                "bottom": 0,
-                "left": 0,
-                "opacity": 1,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "transform": [
-                  {
-                    "rotate": "0deg",
-                  },
-                ],
-              }
-            }
-            testID="cross-fade-icon-current"
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                [
-                  {
-                    "color": "rgba(28, 27, 31, 0.38)",
-                    "fontSize": 24,
-                  },
-                  [
-                    {
-                      "lineHeight": 24,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
+                "color": "rgba(33, 0, 93, 1)",
+                "fontSize": 24,
+              },
+              [
+                {
+                  "lineHeight": 24,
+                  "transform": [
                     {
-                      "backgroundColor": "transparent",
+                      "scaleX": 1,
                     },
                   ],
-                ]
-              }
-            >
-              plus
-            </Text>
-          </View>
-        </View>
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          plus
+        </Text>
       </View>
     </View>
   </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+        {
+          "borderRadius": 21,
+          "opacity": 0,
+        },
+      ]
+    }
+  />
 </View>
 `;
 
-exports[`renders extended FAB 1`] = `
+exports[`renders FAB with containerColor and contentColor overrides 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(234, 221, 255, 1)",
-      "borderRadius": 16,
-      "opacity": 1,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 4,
-        "width": 0,
-      },
-      "shadowOpacity": 0.15,
-      "shadowRadius": 8,
-      "transform": [
-        {
-          "scale": 1,
-        },
-      ],
-    }
+    [
+      {},
+      undefined,
+      {
+        "transformOrigin": "center",
+      },
+      {
+        "height": 56,
+        "opacity": 1,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+        "width": 56,
+      },
+      {
+        "pointerEvents": "auto",
+      },
+      {},
+      {
+        "backgroundColor": "#ff5722",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 3.33,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 4.75,
+      },
+    ]
   }
-  testID="fab-container-outer-layer"
 >
   <View
     collapsable={false}
-    pointerEvents="auto"
     style={
-      {
-        "backgroundColor": "rgba(234, 221, 255, 1)",
-        "borderRadius": 16,
-        "flex": undefined,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 1,
-          "width": 0,
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 3,
-      }
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "#ff5722",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        {
+          "backgroundColor": "#ff5722",
+          "borderRadius": 16,
+        },
+      ]
     }
-    testID="fab-container"
   >
     <View
-      accessibilityLabel="Add items"
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
           "checked": undefined,
-          "disabled": false,
+          "disabled": true,
           "expanded": undefined,
           "selected": undefined,
         }
@@ -771,197 +1344,221 @@ exports[`renders extended FAB 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
             "overflow": "hidden",
           },
-          {
-            "borderRadius": 16,
-          },
+          [
+            null,
+            null,
+          ],
         ]
       }
-      testID="fab"
     >
       <View
-        pointerEvents="none"
         style={
           [
             {
               "alignItems": "center",
               "flexDirection": "row",
-              "justifyContent": "center",
-            },
-            {
-              "borderRadius": 16,
-              "height": 56,
-              "paddingHorizontal": 16,
+              "pointerEvents": "none",
             },
-          ]
-        }
-        testID="fab-content"
-      >
-        <View
-          style={
             [
               {
-                "alignItems": "center",
                 "justifyContent": "center",
               },
               {
-                "height": 24,
-                "width": 24,
+                "height": 56,
+                "width": 56,
               },
-            ]
-          }
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "bottom": 0,
-                "left": 0,
-                "opacity": 1,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "transform": [
-                  {
-                    "rotate": "0deg",
-                  },
-                ],
-              }
-            }
-            testID="cross-fade-icon-current"
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                [
-                  {
-                    "color": "rgba(33, 0, 93, 1)",
-                    "fontSize": 24,
-                  },
-                  [
-                    {
-                      "lineHeight": 24,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                ]
-              }
-            >
-              plus
-            </Text>
-          </View>
-        </View>
+            ],
+          ]
+        }
+      >
         <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
           selectable={false}
           style={
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(28, 27, 31, 1)",
-                "writingDirection": "ltr",
+                "color": "#ffffff",
+                "fontSize": 24,
               },
               [
                 {
-                  "fontFamily": "System",
-                  "fontSize": 14,
-                  "fontWeight": "500",
-                  "letterSpacing": 0.1,
-                  "lineHeight": 20,
+                  "lineHeight": 24,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
                 },
-                [
-                  {
-                    "marginHorizontal": 8,
-                  },
-                  false,
-                  {
-                    "color": "rgba(33, 0, 93, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                ],
               ],
             ]
           }
-          testID="fab-text"
         >
-          Add items
+          plus
         </Text>
       </View>
     </View>
   </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+        {
+          "borderRadius": 21,
+          "opacity": 0,
+        },
+      ]
+    }
+  />
 </View>
 `;
 
-exports[`renders extended FAB with custom size prop 1`] = `
+exports[`renders FAB with containerColor override 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(234, 221, 255, 1)",
-      "borderRadius": 25,
-      "opacity": 1,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 4,
-        "width": 0,
-      },
-      "shadowOpacity": 0.15,
-      "shadowRadius": 8,
-      "transform": [
-        {
-          "scale": 1,
-        },
-      ],
-    }
+    [
+      {},
+      undefined,
+      {
+        "transformOrigin": "center",
+      },
+      {
+        "height": 56,
+        "opacity": 1,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+        "width": 56,
+      },
+      {
+        "pointerEvents": "auto",
+      },
+      {},
+      {
+        "backgroundColor": "#ff5722",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 3.33,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 4.75,
+      },
+    ]
   }
-  testID="fab-container-outer-layer"
 >
   <View
     collapsable={false}
-    pointerEvents="auto"
     style={
-      {
-        "backgroundColor": "rgba(234, 221, 255, 1)",
-        "borderRadius": 25,
-        "flex": undefined,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 1,
-          "width": 0,
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 3,
-      }
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "#ff5722",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        {
+          "backgroundColor": "#ff5722",
+          "borderRadius": 16,
+        },
+      ]
     }
-    testID="fab-container"
   >
     <View
-      accessibilityLabel="Add items"
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
           "checked": undefined,
-          "disabled": false,
+          "disabled": true,
           "expanded": undefined,
           "selected": undefined,
         }
@@ -986,195 +1583,221 @@ exports[`renders extended FAB with custom size prop 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
             "overflow": "hidden",
           },
-          {
-            "borderRadius": 25,
-          },
+          [
+            null,
+            null,
+          ],
         ]
       }
-      testID="fab"
     >
       <View
-        pointerEvents="none"
         style={
           [
             {
               "alignItems": "center",
               "flexDirection": "row",
-              "justifyContent": "center",
+              "pointerEvents": "none",
             },
-            {
-              "height": 100,
-              "paddingHorizontal": 16,
-            },
-          ]
-        }
-        testID="fab-content"
-      >
-        <View
-          style={
             [
               {
-                "alignItems": "center",
                 "justifyContent": "center",
               },
               {
-                "height": 50,
-                "width": 50,
+                "height": 56,
+                "width": 56,
               },
-            ]
-          }
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "bottom": 0,
-                "left": 0,
-                "opacity": 1,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "transform": [
-                  {
-                    "rotate": "0deg",
-                  },
-                ],
-              }
-            }
-            testID="cross-fade-icon-current"
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                [
-                  {
-                    "color": "rgba(33, 0, 93, 1)",
-                    "fontSize": 50,
-                  },
-                  [
-                    {
-                      "lineHeight": 50,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                ]
-              }
-            >
-              plus
-            </Text>
-          </View>
-        </View>
+            ],
+          ]
+        }
+      >
         <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
           selectable={false}
           style={
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(28, 27, 31, 1)",
-                "writingDirection": "ltr",
+                "color": "rgba(29, 27, 32, 1)",
+                "fontSize": 24,
               },
               [
                 {
-                  "fontFamily": "System",
-                  "fontSize": 14,
-                  "fontWeight": "500",
-                  "letterSpacing": 0.1,
-                  "lineHeight": 20,
+                  "lineHeight": 24,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
                 },
-                [
-                  {
-                    "marginHorizontal": 8,
-                  },
-                  false,
-                  {
-                    "color": "rgba(33, 0, 93, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                ],
               ],
             ]
           }
-          testID="fab-text"
         >
-          Add items
+          plus
         </Text>
       </View>
     </View>
   </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+        {
+          "borderRadius": 21,
+          "opacity": 0,
+        },
+      ]
+    }
+  />
 </View>
 `;
 
-exports[`renders large FAB 1`] = `
+exports[`renders FAB with default props 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(234, 221, 255, 1)",
-      "borderRadius": 28,
-      "opacity": 1,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 4,
-        "width": 0,
-      },
-      "shadowOpacity": 0.15,
-      "shadowRadius": 8,
-      "transform": [
-        {
-          "scale": 1,
-        },
-      ],
-    }
+    [
+      {},
+      undefined,
+      {
+        "transformOrigin": "center",
+      },
+      {
+        "height": 56,
+        "opacity": 1,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+        "width": 56,
+      },
+      {
+        "pointerEvents": "auto",
+      },
+      {},
+      {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 3.33,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 4.75,
+      },
+    ]
   }
-  testID="fab-container-outer-layer"
 >
   <View
     collapsable={false}
-    pointerEvents="auto"
     style={
-      {
-        "backgroundColor": "rgba(234, 221, 255, 1)",
-        "borderRadius": 28,
-        "flex": undefined,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 1,
-          "width": 0,
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 3,
-      }
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderRadius": 16,
+        },
+      ]
     }
-    testID="fab-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
           "checked": undefined,
-          "disabled": false,
+          "disabled": true,
           "expanded": undefined,
           "selected": undefined,
         }
@@ -1199,156 +1822,221 @@ exports[`renders large FAB 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
             "overflow": "hidden",
           },
-          {
-            "borderRadius": 28,
-          },
+          [
+            null,
+            null,
+          ],
         ]
       }
-      testID="fab"
     >
       <View
-        pointerEvents="none"
         style={
           [
             {
               "alignItems": "center",
               "flexDirection": "row",
-              "justifyContent": "center",
-            },
-            {
-              "borderRadius": 28,
-              "height": 96,
-              "width": 96,
+              "pointerEvents": "none",
             },
-          ]
-        }
-        testID="fab-content"
-      >
-        <View
-          style={
             [
               {
-                "alignItems": "center",
                 "justifyContent": "center",
               },
               {
-                "height": 36,
-                "width": 36,
+                "height": 56,
+                "width": 56,
               },
-            ]
-          }
-        >
-          <View
-            collapsable={false}
-            style={
+            ],
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
+          style={
+            [
               {
-                "bottom": 0,
-                "left": 0,
-                "opacity": 1,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "transform": [
-                  {
-                    "rotate": "0deg",
-                  },
-                ],
-              }
-            }
-            testID="cross-fade-icon-current"
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                [
-                  {
-                    "color": "rgba(33, 0, 93, 1)",
-                    "fontSize": 36,
-                  },
-                  [
-                    {
-                      "lineHeight": 36,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
+                "color": "rgba(33, 0, 93, 1)",
+                "fontSize": 24,
+              },
+              [
+                {
+                  "lineHeight": 24,
+                  "transform": [
                     {
-                      "backgroundColor": "transparent",
+                      "scaleX": 1,
                     },
                   ],
-                ]
-              }
-            >
-              plus
-            </Text>
-          </View>
-        </View>
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          plus
+        </Text>
       </View>
     </View>
   </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+        {
+          "borderRadius": 21,
+          "opacity": 0,
+        },
+      ]
+    }
+  />
 </View>
 `;
 
-exports[`renders loading FAB 1`] = `
+exports[`renders FAB with primary variant 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(234, 221, 255, 1)",
-      "borderRadius": 16,
-      "opacity": 1,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 4,
-        "width": 0,
-      },
-      "shadowOpacity": 0.15,
-      "shadowRadius": 8,
-      "transform": [
-        {
-          "scale": 1,
-        },
-      ],
-    }
+    [
+      {},
+      undefined,
+      {
+        "transformOrigin": "center",
+      },
+      {
+        "height": 56,
+        "opacity": 1,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+        "width": 56,
+      },
+      {
+        "pointerEvents": "auto",
+      },
+      {},
+      {
+        "backgroundColor": "rgba(103, 80, 164, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 3.33,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 4.75,
+      },
+    ]
   }
-  testID="fab-container-outer-layer"
 >
   <View
     collapsable={false}
-    pointerEvents="auto"
     style={
-      {
-        "backgroundColor": "rgba(234, 221, 255, 1)",
-        "borderRadius": 16,
-        "flex": undefined,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 1,
-          "width": 0,
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 3,
-      }
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(103, 80, 164, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        {
+          "backgroundColor": "rgba(103, 80, 164, 1)",
+          "borderRadius": 16,
+        },
+      ]
     }
-    testID="fab-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
           "checked": undefined,
-          "disabled": false,
+          "disabled": true,
           "expanded": undefined,
           "selected": undefined,
         }
@@ -1373,287 +2061,221 @@ exports[`renders loading FAB 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
             "overflow": "hidden",
           },
-          {
-            "borderRadius": 16,
-          },
+          [
+            null,
+            null,
+          ],
         ]
       }
-      testID="fab"
     >
       <View
-        pointerEvents="none"
         style={
           [
             {
               "alignItems": "center",
               "flexDirection": "row",
-              "justifyContent": "center",
-            },
-            {
-              "borderRadius": 16,
-              "height": 56,
-              "width": 56,
+              "pointerEvents": "none",
             },
+            [
+              {
+                "justifyContent": "center",
+              },
+              {
+                "height": 56,
+                "width": 56,
+              },
+            ],
           ]
         }
-        testID="fab-content"
       >
-        <View
-          accessibilityRole="progressbar"
-          accessibilityState={
-            {
-              "busy": true,
-            }
-          }
-          accessible={true}
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
           style={
             [
               {
-                "alignItems": "center",
-                "justifyContent": "center",
+                "color": "rgba(255, 255, 255, 1)",
+                "fontSize": 24,
               },
-              undefined,
-            ]
-          }
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "height": 18,
-                "opacity": 1,
-                "width": 18,
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              style={
+              [
                 {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "justifyContent": "center",
-                  "left": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "height": 18,
-                    "transform": [
-                      {
-                        "rotate": "45deg",
-                      },
-                    ],
-                    "width": 18,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
+                  "lineHeight": 24,
+                  "transform": [
                     {
-                      "height": 9,
-                      "overflow": "hidden",
-                      "width": 18,
-                    }
-                  }
-                >
-                  <View
-                    collapsable={false}
-                    style={
-                      {
-                        "height": 18,
-                        "transform": [
-                          {
-                            "translateY": 0,
-                          },
-                          {
-                            "rotate": "-165deg",
-                          },
-                        ],
-                        "width": 18,
-                      }
-                    }
-                  >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "height": 9,
-                          "overflow": "hidden",
-                          "width": 18,
-                        }
-                      }
-                    >
-                      <View
-                        collapsable={false}
-                        style={
-                          {
-                            "borderColor": "rgba(33, 0, 93, 1)",
-                            "borderRadius": 9,
-                            "borderWidth": 1.8,
-                            "height": 18,
-                            "width": 18,
-                          }
-                        }
-                      />
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </View>
-            <View
-              collapsable={false}
-              style={
+                      "scaleX": 1,
+                    },
+                  ],
+                },
                 {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "justifyContent": "center",
-                  "left": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "height": 18,
-                    "transform": [
-                      {
-                        "rotate": "45deg",
-                      },
-                    ],
-                    "width": 18,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "height": 9,
-                      "overflow": "hidden",
-                      "top": 9,
-                      "width": 18,
-                    }
-                  }
-                >
-                  <View
-                    collapsable={false}
-                    style={
-                      {
-                        "height": 18,
-                        "transform": [
-                          {
-                            "translateY": -9,
-                          },
-                          {
-                            "rotate": "345deg",
-                          },
-                        ],
-                        "width": 18,
-                      }
-                    }
-                  >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "height": 9,
-                          "overflow": "hidden",
-                          "width": 18,
-                        }
-                      }
-                    >
-                      <View
-                        collapsable={false}
-                        style={
-                          {
-                            "borderColor": "rgba(33, 0, 93, 1)",
-                            "borderRadius": 9,
-                            "borderWidth": 1.8,
-                            "height": 18,
-                            "width": 18,
-                          }
-                        }
-                      />
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          plus
+        </Text>
       </View>
     </View>
   </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+        {
+          "borderRadius": 21,
+          "opacity": 0,
+        },
+      ]
+    }
+  />
 </View>
 `;
 
-exports[`renders loading FAB with custom size prop 1`] = `
+exports[`renders FAB with secondary variant 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(234, 221, 255, 1)",
-      "borderRadius": 25,
-      "opacity": 1,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 4,
-        "width": 0,
-      },
-      "shadowOpacity": 0.15,
-      "shadowRadius": 8,
-      "transform": [
-        {
-          "scale": 1,
-        },
-      ],
-    }
+    [
+      {},
+      undefined,
+      {
+        "transformOrigin": "center",
+      },
+      {
+        "height": 56,
+        "opacity": 1,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+        "width": 56,
+      },
+      {
+        "pointerEvents": "auto",
+      },
+      {},
+      {
+        "backgroundColor": "rgba(98, 91, 113, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 3.33,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 4.75,
+      },
+    ]
   }
-  testID="fab-container-outer-layer"
 >
   <View
     collapsable={false}
-    pointerEvents="auto"
     style={
-      {
-        "backgroundColor": "rgba(234, 221, 255, 1)",
-        "borderRadius": 25,
-        "flex": undefined,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 1,
-          "width": 0,
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 3,
-      }
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(98, 91, 113, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        {
+          "backgroundColor": "rgba(98, 91, 113, 1)",
+          "borderRadius": 16,
+        },
+      ]
     }
-    testID="fab-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
           "checked": undefined,
-          "disabled": false,
+          "disabled": true,
           "expanded": undefined,
           "selected": undefined,
         }
@@ -1678,287 +2300,221 @@ exports[`renders loading FAB with custom size prop 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
             "overflow": "hidden",
           },
-          {
-            "borderRadius": 25,
-          },
+          [
+            null,
+            null,
+          ],
         ]
       }
-      testID="fab"
     >
       <View
-        pointerEvents="none"
         style={
           [
             {
               "alignItems": "center",
               "flexDirection": "row",
-              "justifyContent": "center",
-            },
-            {
-              "borderRadius": 25,
-              "height": 100,
-              "width": 100,
+              "pointerEvents": "none",
             },
+            [
+              {
+                "justifyContent": "center",
+              },
+              {
+                "height": 56,
+                "width": 56,
+              },
+            ],
           ]
         }
-        testID="fab-content"
       >
-        <View
-          accessibilityRole="progressbar"
-          accessibilityState={
-            {
-              "busy": true,
-            }
-          }
-          accessible={true}
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
           style={
             [
               {
-                "alignItems": "center",
-                "justifyContent": "center",
+                "color": "rgba(255, 255, 255, 1)",
+                "fontSize": 24,
               },
-              undefined,
-            ]
-          }
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "height": 50,
-                "opacity": 1,
-                "width": 50,
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              style={
+              [
                 {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "justifyContent": "center",
-                  "left": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "height": 50,
-                    "transform": [
-                      {
-                        "rotate": "45deg",
-                      },
-                    ],
-                    "width": 50,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
+                  "lineHeight": 24,
+                  "transform": [
                     {
-                      "height": 25,
-                      "overflow": "hidden",
-                      "width": 50,
-                    }
-                  }
-                >
-                  <View
-                    collapsable={false}
-                    style={
-                      {
-                        "height": 50,
-                        "transform": [
-                          {
-                            "translateY": 0,
-                          },
-                          {
-                            "rotate": "-165deg",
-                          },
-                        ],
-                        "width": 50,
-                      }
-                    }
-                  >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "height": 25,
-                          "overflow": "hidden",
-                          "width": 50,
-                        }
-                      }
-                    >
-                      <View
-                        collapsable={false}
-                        style={
-                          {
-                            "borderColor": "rgba(33, 0, 93, 1)",
-                            "borderRadius": 25,
-                            "borderWidth": 5,
-                            "height": 50,
-                            "width": 50,
-                          }
-                        }
-                      />
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </View>
-            <View
-              collapsable={false}
-              style={
+                      "scaleX": 1,
+                    },
+                  ],
+                },
                 {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "justifyContent": "center",
-                  "left": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "height": 50,
-                    "transform": [
-                      {
-                        "rotate": "45deg",
-                      },
-                    ],
-                    "width": 50,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "height": 25,
-                      "overflow": "hidden",
-                      "top": 25,
-                      "width": 50,
-                    }
-                  }
-                >
-                  <View
-                    collapsable={false}
-                    style={
-                      {
-                        "height": 50,
-                        "transform": [
-                          {
-                            "translateY": -25,
-                          },
-                          {
-                            "rotate": "345deg",
-                          },
-                        ],
-                        "width": 50,
-                      }
-                    }
-                  >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "height": 25,
-                          "overflow": "hidden",
-                          "width": 50,
-                        }
-                      }
-                    >
-                      <View
-                        collapsable={false}
-                        style={
-                          {
-                            "borderColor": "rgba(33, 0, 93, 1)",
-                            "borderRadius": 25,
-                            "borderWidth": 5,
-                            "height": 50,
-                            "width": 50,
-                          }
-                        }
-                      />
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          plus
+        </Text>
       </View>
     </View>
   </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+        {
+          "borderRadius": 21,
+          "opacity": 0,
+        },
+      ]
+    }
+  />
 </View>
 `;
 
-exports[`renders not visible FAB 1`] = `
+exports[`renders FAB with tertiary variant 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(234, 221, 255, 1)",
-      "borderRadius": 16,
-      "opacity": 1,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 4,
-        "width": 0,
-      },
-      "shadowOpacity": 0.15,
-      "shadowRadius": 8,
-      "transform": [
-        {
-          "scale": 1,
-        },
-      ],
-    }
+    [
+      {},
+      undefined,
+      {
+        "transformOrigin": "center",
+      },
+      {
+        "height": 56,
+        "opacity": 1,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+        "width": 56,
+      },
+      {
+        "pointerEvents": "auto",
+      },
+      {},
+      {
+        "backgroundColor": "rgba(125, 82, 96, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 3.33,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 4.75,
+      },
+    ]
   }
-  testID="fab-container-outer-layer"
 >
   <View
     collapsable={false}
-    pointerEvents="none"
     style={
-      {
-        "backgroundColor": "rgba(234, 221, 255, 1)",
-        "borderRadius": 16,
-        "flex": undefined,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 1,
-          "width": 0,
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 3,
-      }
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(125, 82, 96, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        {
+          "backgroundColor": "rgba(125, 82, 96, 1)",
+          "borderRadius": 16,
+        },
+      ]
     }
-    testID="fab-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
           "checked": undefined,
-          "disabled": false,
+          "disabled": true,
           "expanded": undefined,
           "selected": undefined,
         }
@@ -1983,156 +2539,221 @@ exports[`renders not visible FAB 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
             "overflow": "hidden",
           },
-          {
-            "borderRadius": 16,
-          },
+          [
+            null,
+            null,
+          ],
         ]
       }
-      testID="fab"
     >
       <View
-        pointerEvents="none"
         style={
           [
             {
               "alignItems": "center",
               "flexDirection": "row",
-              "justifyContent": "center",
-            },
-            {
-              "borderRadius": 16,
-              "height": 56,
-              "width": 56,
+              "pointerEvents": "none",
             },
-          ]
-        }
-        testID="fab-content"
-      >
-        <View
-          style={
             [
               {
-                "alignItems": "center",
                 "justifyContent": "center",
               },
               {
-                "height": 24,
-                "width": 24,
+                "height": 56,
+                "width": 56,
               },
-            ]
-          }
-        >
-          <View
-            collapsable={false}
-            style={
+            ],
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
+          style={
+            [
               {
-                "bottom": 0,
-                "left": 0,
-                "opacity": 1,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "transform": [
-                  {
-                    "rotate": "0deg",
-                  },
-                ],
-              }
-            }
-            testID="cross-fade-icon-current"
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                [
-                  {
-                    "color": "rgba(33, 0, 93, 1)",
-                    "fontSize": 24,
-                  },
-                  [
-                    {
-                      "lineHeight": 24,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
+                "color": "rgba(255, 255, 255, 1)",
+                "fontSize": 24,
+              },
+              [
+                {
+                  "lineHeight": 24,
+                  "transform": [
                     {
-                      "backgroundColor": "transparent",
+                      "scaleX": 1,
                     },
                   ],
-                ]
-              }
-            >
-              plus
-            </Text>
-          </View>
-        </View>
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          plus
+        </Text>
       </View>
     </View>
   </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+        {
+          "borderRadius": 21,
+          "opacity": 0,
+        },
+      ]
+    }
+  />
 </View>
 `;
 
-exports[`renders small FAB 1`] = `
+exports[`renders FAB with tonalSecondary variant 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(234, 221, 255, 1)",
-      "borderRadius": 12,
-      "opacity": 1,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 4,
-        "width": 0,
-      },
-      "shadowOpacity": 0.15,
-      "shadowRadius": 8,
-      "transform": [
-        {
-          "scale": 1,
-        },
-      ],
-    }
+    [
+      {},
+      undefined,
+      {
+        "transformOrigin": "center",
+      },
+      {
+        "height": 56,
+        "opacity": 1,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+        "width": 56,
+      },
+      {
+        "pointerEvents": "auto",
+      },
+      {},
+      {
+        "backgroundColor": "rgba(232, 222, 248, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 3.33,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 4.75,
+      },
+    ]
   }
-  testID="fab-container-outer-layer"
 >
   <View
     collapsable={false}
-    pointerEvents="auto"
     style={
-      {
-        "backgroundColor": "rgba(234, 221, 255, 1)",
-        "borderRadius": 12,
-        "flex": undefined,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 1,
-          "width": 0,
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 3,
-      }
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+          "borderRadius": 16,
+        },
+      ]
     }
-    testID="fab-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
           "checked": undefined,
-          "disabled": false,
+          "disabled": true,
           "expanded": undefined,
           "selected": undefined,
         }
@@ -2157,156 +2778,221 @@ exports[`renders small FAB 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
             "overflow": "hidden",
           },
-          {
-            "borderRadius": 12,
-          },
+          [
+            null,
+            null,
+          ],
         ]
       }
-      testID="fab"
     >
       <View
-        pointerEvents="none"
         style={
           [
             {
               "alignItems": "center",
               "flexDirection": "row",
-              "justifyContent": "center",
-            },
-            {
-              "borderRadius": 12,
-              "height": 40,
-              "width": 40,
+              "pointerEvents": "none",
             },
-          ]
-        }
-        testID="fab-content"
-      >
-        <View
-          style={
             [
               {
-                "alignItems": "center",
                 "justifyContent": "center",
               },
               {
-                "height": 24,
-                "width": 24,
+                "height": 56,
+                "width": 56,
               },
-            ]
-          }
-        >
-          <View
-            collapsable={false}
-            style={
+            ],
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
+          style={
+            [
               {
-                "bottom": 0,
-                "left": 0,
-                "opacity": 1,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "transform": [
-                  {
-                    "rotate": "0deg",
-                  },
-                ],
-              }
-            }
-            testID="cross-fade-icon-current"
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                [
-                  {
-                    "color": "rgba(33, 0, 93, 1)",
-                    "fontSize": 24,
-                  },
-                  [
-                    {
-                      "lineHeight": 24,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
+                "color": "rgba(29, 25, 43, 1)",
+                "fontSize": 24,
+              },
+              [
+                {
+                  "lineHeight": 24,
+                  "transform": [
                     {
-                      "backgroundColor": "transparent",
+                      "scaleX": 1,
                     },
                   ],
-                ]
-              }
-            >
-              plus
-            </Text>
-          </View>
-        </View>
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          plus
+        </Text>
       </View>
     </View>
   </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+        {
+          "borderRadius": 21,
+          "opacity": 0,
+        },
+      ]
+    }
+  />
 </View>
 `;
 
-exports[`renders visible FAB 1`] = `
+exports[`renders FAB with tonalTertiary variant 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(234, 221, 255, 1)",
-      "borderRadius": 16,
-      "opacity": 0,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 4,
-        "width": 0,
-      },
-      "shadowOpacity": 0.15,
-      "shadowRadius": 8,
-      "transform": [
-        {
-          "scale": 0,
-        },
-      ],
-    }
+    [
+      {},
+      undefined,
+      {
+        "transformOrigin": "center",
+      },
+      {
+        "height": 56,
+        "opacity": 1,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+        "width": 56,
+      },
+      {
+        "pointerEvents": "auto",
+      },
+      {},
+      {
+        "backgroundColor": "rgba(255, 216, 228, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 3.33,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 4.75,
+      },
+    ]
   }
-  testID="fab-container-outer-layer"
 >
   <View
     collapsable={false}
-    pointerEvents="auto"
     style={
-      {
-        "backgroundColor": "rgba(234, 221, 255, 1)",
-        "borderRadius": 16,
-        "flex": undefined,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 1,
-          "width": 0,
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 3,
-      }
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(255, 216, 228, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        {
+          "backgroundColor": "rgba(255, 216, 228, 1)",
+          "borderRadius": 16,
+        },
+      ]
     }
-    testID="fab-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
           "checked": undefined,
-          "disabled": false,
+          "disabled": true,
           "expanded": undefined,
           "selected": undefined,
         }
@@ -2331,102 +3017,93 @@ exports[`renders visible FAB 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
             "overflow": "hidden",
           },
-          {
-            "borderRadius": 16,
-          },
+          [
+            null,
+            null,
+          ],
         ]
       }
-      testID="fab"
     >
       <View
-        pointerEvents="none"
         style={
           [
             {
               "alignItems": "center",
               "flexDirection": "row",
-              "justifyContent": "center",
-            },
-            {
-              "borderRadius": 16,
-              "height": 56,
-              "width": 56,
+              "pointerEvents": "none",
             },
-          ]
-        }
-        testID="fab-content"
-      >
-        <View
-          style={
             [
               {
-                "alignItems": "center",
                 "justifyContent": "center",
               },
               {
-                "height": 24,
-                "width": 24,
+                "height": 56,
+                "width": 56,
               },
-            ]
-          }
-        >
-          <View
-            collapsable={false}
-            style={
+            ],
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
+          style={
+            [
               {
-                "bottom": 0,
-                "left": 0,
-                "opacity": 1,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "transform": [
-                  {
-                    "rotate": "0deg",
-                  },
-                ],
-              }
-            }
-            testID="cross-fade-icon-current"
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                [
-                  {
-                    "color": "rgba(33, 0, 93, 1)",
-                    "fontSize": 24,
-                  },
-                  [
-                    {
-                      "lineHeight": 24,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
+                "color": "rgba(49, 17, 29, 1)",
+                "fontSize": 24,
+              },
+              [
+                {
+                  "lineHeight": 24,
+                  "transform": [
                     {
-                      "backgroundColor": "transparent",
+                      "scaleX": 1,
                     },
                   ],
-                ]
-              }
-            >
-              plus
-            </Text>
-          </View>
-        </View>
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          plus
+        </Text>
       </View>
     </View>
   </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+        {
+          "borderRadius": 21,
+          "opacity": 0,
+        },
+      ]
+    }
+  />
 </View>
 `;
diff --git a/src/components/__tests__/__snapshots__/FABExtended.test.tsx.snap b/src/components/__tests__/__snapshots__/FABExtended.test.tsx.snap
new file mode 100644
index 0000000000..644a640c5a
--- /dev/null
+++ b/src/components/__tests__/__snapshots__/FABExtended.test.tsx.snap
@@ -0,0 +1,1957 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders extended FAB collapsed 1`] = `
+<>
+  <View
+    collapsable={false}
+    style={
+      [
+        {},
+        undefined,
+        {
+          "transformOrigin": "center",
+        },
+        {
+          "height": 56,
+          "opacity": 1,
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+          "width": 56,
+        },
+        {
+          "pointerEvents": "auto",
+        },
+        {},
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 3.33,
+            "width": 0,
+          },
+          "shadowOpacity": 0.19,
+          "shadowRadius": 4.75,
+        },
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {},
+          {},
+          {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+          },
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 16,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 1.5,
+          },
+        ]
+      }
+    />
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "height": "100%",
+            "overflow": "hidden",
+            "width": "100%",
+          },
+          {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+            "borderRadius": 16,
+          },
+        ]
+      }
+    >
+      <View
+        accessibilityLabel="New message"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": true,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
+            {
+              "overflow": "hidden",
+            },
+            [
+              null,
+              null,
+            ],
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "pointerEvents": "none",
+              },
+              {
+                "height": 56,
+                "paddingEnd": 16,
+                "paddingStart": 16,
+              },
+            ]
+          }
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "rgba(33, 0, 93, 1)",
+                  "fontSize": 24,
+                },
+                [
+                  {
+                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            plus
+          </Text>
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "marginStart": 8,
+                },
+                {
+                  "opacity": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+              ]
+            }
+          >
+            <Text
+              collapsable={false}
+              ellipsizeMode="clip"
+              numberOfLines={1}
+              selectable={false}
+              style={
+                [
+                  {
+                    "fontFamily": "System",
+                    "fontSize": 16,
+                    "fontWeight": "500",
+                    "letterSpacing": 0.15,
+                    "lineHeight": 24,
+                  },
+                  {
+                    "textAlign": "left",
+                  },
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                    "writingDirection": "ltr",
+                  },
+                  {
+                    "color": "rgba(33, 0, 93, 1)",
+                  },
+                ]
+              }
+            >
+              New message
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "borderWidth": 3,
+            "bottom": -5,
+            "left": -5,
+            "pointerEvents": "none",
+            "position": "absolute",
+            "right": -5,
+            "top": -5,
+          },
+          {
+            "borderColor": "rgba(98, 91, 113, 1)",
+          },
+          {
+            "borderRadius": 21,
+            "opacity": 0,
+          },
+        ]
+      }
+    />
+  </View>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    forwardedRef={[Function]}
+    importantForAccessibility="no-hide-descendants"
+    style={
+      [
+        {
+          "alignSelf": "flex-start",
+          "opacity": 0,
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+      ]
+    }
+  >
+    <Text
+      collapsable={false}
+      numberOfLines={1}
+      style={
+        [
+          {
+            "fontFamily": "System",
+            "fontSize": 16,
+            "fontWeight": "500",
+            "letterSpacing": 0.15,
+            "lineHeight": 24,
+          },
+          {
+            "textAlign": "left",
+          },
+          {
+            "color": "rgba(29, 27, 32, 1)",
+            "writingDirection": "ltr",
+          },
+          undefined,
+        ]
+      }
+    >
+      New message
+    </Text>
+  </View>
+</>
+`;
+
+exports[`renders extended FAB expanded 1`] = `
+<>
+  <View
+    collapsable={false}
+    style={
+      [
+        {},
+        undefined,
+        {
+          "transformOrigin": "center",
+        },
+        {
+          "height": 56,
+          "opacity": 1,
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+          "width": 56,
+        },
+        {
+          "pointerEvents": "auto",
+        },
+        {},
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 3.33,
+            "width": 0,
+          },
+          "shadowOpacity": 0.19,
+          "shadowRadius": 4.75,
+        },
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {},
+          {},
+          {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+          },
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 16,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 1.5,
+          },
+        ]
+      }
+    />
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "height": "100%",
+            "overflow": "hidden",
+            "width": "100%",
+          },
+          {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+            "borderRadius": 16,
+          },
+        ]
+      }
+    >
+      <View
+        accessibilityLabel="New message"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": true,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
+            {
+              "overflow": "hidden",
+            },
+            [
+              null,
+              null,
+            ],
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "pointerEvents": "none",
+              },
+              {
+                "height": 56,
+                "paddingEnd": 16,
+                "paddingStart": 16,
+              },
+            ]
+          }
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "rgba(33, 0, 93, 1)",
+                  "fontSize": 24,
+                },
+                [
+                  {
+                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            plus
+          </Text>
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "marginStart": 8,
+                },
+                {
+                  "opacity": 1,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+              ]
+            }
+          >
+            <Text
+              collapsable={false}
+              ellipsizeMode="clip"
+              numberOfLines={1}
+              selectable={false}
+              style={
+                [
+                  {
+                    "fontFamily": "System",
+                    "fontSize": 16,
+                    "fontWeight": "500",
+                    "letterSpacing": 0.15,
+                    "lineHeight": 24,
+                  },
+                  {
+                    "textAlign": "left",
+                  },
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                    "writingDirection": "ltr",
+                  },
+                  {
+                    "color": "rgba(33, 0, 93, 1)",
+                  },
+                ]
+              }
+            >
+              New message
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "borderWidth": 3,
+            "bottom": -5,
+            "left": -5,
+            "pointerEvents": "none",
+            "position": "absolute",
+            "right": -5,
+            "top": -5,
+          },
+          {
+            "borderColor": "rgba(98, 91, 113, 1)",
+          },
+          {
+            "borderRadius": 21,
+            "opacity": 0,
+          },
+        ]
+      }
+    />
+  </View>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    forwardedRef={[Function]}
+    importantForAccessibility="no-hide-descendants"
+    style={
+      [
+        {
+          "alignSelf": "flex-start",
+          "opacity": 0,
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+      ]
+    }
+  >
+    <Text
+      collapsable={false}
+      numberOfLines={1}
+      style={
+        [
+          {
+            "fontFamily": "System",
+            "fontSize": 16,
+            "fontWeight": "500",
+            "letterSpacing": 0.15,
+            "lineHeight": 24,
+          },
+          {
+            "textAlign": "left",
+          },
+          {
+            "color": "rgba(29, 27, 32, 1)",
+            "writingDirection": "ltr",
+          },
+          undefined,
+        ]
+      }
+    >
+      New message
+    </Text>
+  </View>
+</>
+`;
+
+exports[`renders extended FAB large size 1`] = `
+<>
+  <View
+    collapsable={false}
+    style={
+      [
+        {},
+        undefined,
+        {
+          "transformOrigin": "center",
+        },
+        {
+          "height": 96,
+          "opacity": 1,
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+          "width": 96,
+        },
+        {
+          "pointerEvents": "auto",
+        },
+        {},
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 28,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 3.33,
+            "width": 0,
+          },
+          "shadowOpacity": 0.19,
+          "shadowRadius": 4.75,
+        },
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {},
+          {},
+          {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+          },
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 28,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 1.5,
+          },
+        ]
+      }
+    />
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "height": "100%",
+            "overflow": "hidden",
+            "width": "100%",
+          },
+          {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+            "borderRadius": 28,
+          },
+        ]
+      }
+    >
+      <View
+        accessibilityLabel="New message"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": true,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
+            {
+              "overflow": "hidden",
+            },
+            [
+              null,
+              null,
+            ],
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "pointerEvents": "none",
+              },
+              {
+                "height": 96,
+                "paddingEnd": 30,
+                "paddingStart": 30,
+              },
+            ]
+          }
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "rgba(33, 0, 93, 1)",
+                  "fontSize": 36,
+                },
+                [
+                  {
+                    "lineHeight": 36,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            plus
+          </Text>
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "marginStart": 16,
+                },
+                {
+                  "opacity": 1,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+              ]
+            }
+          >
+            <Text
+              collapsable={false}
+              ellipsizeMode="clip"
+              numberOfLines={1}
+              selectable={false}
+              style={
+                [
+                  {
+                    "fontFamily": "System",
+                    "fontSize": 24,
+                    "fontWeight": "400",
+                    "letterSpacing": 0,
+                    "lineHeight": 32,
+                  },
+                  {
+                    "textAlign": "left",
+                  },
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                    "writingDirection": "ltr",
+                  },
+                  {
+                    "color": "rgba(33, 0, 93, 1)",
+                  },
+                ]
+              }
+            >
+              New message
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "borderWidth": 3,
+            "bottom": -5,
+            "left": -5,
+            "pointerEvents": "none",
+            "position": "absolute",
+            "right": -5,
+            "top": -5,
+          },
+          {
+            "borderColor": "rgba(98, 91, 113, 1)",
+          },
+          {
+            "borderRadius": 33,
+            "opacity": 0,
+          },
+        ]
+      }
+    />
+  </View>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    forwardedRef={[Function]}
+    importantForAccessibility="no-hide-descendants"
+    style={
+      [
+        {
+          "alignSelf": "flex-start",
+          "opacity": 0,
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+      ]
+    }
+  >
+    <Text
+      collapsable={false}
+      numberOfLines={1}
+      style={
+        [
+          {
+            "fontFamily": "System",
+            "fontSize": 24,
+            "fontWeight": "400",
+            "letterSpacing": 0,
+            "lineHeight": 32,
+          },
+          {
+            "textAlign": "left",
+          },
+          {
+            "color": "rgba(29, 27, 32, 1)",
+            "writingDirection": "ltr",
+          },
+          undefined,
+        ]
+      }
+    >
+      New message
+    </Text>
+  </View>
+</>
+`;
+
+exports[`renders extended FAB medium size 1`] = `
+<>
+  <View
+    collapsable={false}
+    style={
+      [
+        {},
+        undefined,
+        {
+          "transformOrigin": "center",
+        },
+        {
+          "height": 80,
+          "opacity": 1,
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+          "width": 80,
+        },
+        {
+          "pointerEvents": "auto",
+        },
+        {},
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 3.33,
+            "width": 0,
+          },
+          "shadowOpacity": 0.19,
+          "shadowRadius": 4.75,
+        },
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {},
+          {},
+          {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+          },
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 20,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 1.5,
+          },
+        ]
+      }
+    />
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "height": "100%",
+            "overflow": "hidden",
+            "width": "100%",
+          },
+          {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+            "borderRadius": 20,
+          },
+        ]
+      }
+    >
+      <View
+        accessibilityLabel="New message"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": true,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
+            {
+              "overflow": "hidden",
+            },
+            [
+              null,
+              null,
+            ],
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "pointerEvents": "none",
+              },
+              {
+                "height": 80,
+                "paddingEnd": 26,
+                "paddingStart": 26,
+              },
+            ]
+          }
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "rgba(33, 0, 93, 1)",
+                  "fontSize": 28,
+                },
+                [
+                  {
+                    "lineHeight": 28,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            plus
+          </Text>
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "marginStart": 12,
+                },
+                {
+                  "opacity": 1,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+              ]
+            }
+          >
+            <Text
+              collapsable={false}
+              ellipsizeMode="clip"
+              numberOfLines={1}
+              selectable={false}
+              style={
+                [
+                  {
+                    "fontFamily": "System",
+                    "fontSize": 22,
+                    "fontWeight": "400",
+                    "letterSpacing": 0,
+                    "lineHeight": 28,
+                  },
+                  {
+                    "textAlign": "left",
+                  },
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                    "writingDirection": "ltr",
+                  },
+                  {
+                    "color": "rgba(33, 0, 93, 1)",
+                  },
+                ]
+              }
+            >
+              New message
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "borderWidth": 3,
+            "bottom": -5,
+            "left": -5,
+            "pointerEvents": "none",
+            "position": "absolute",
+            "right": -5,
+            "top": -5,
+          },
+          {
+            "borderColor": "rgba(98, 91, 113, 1)",
+          },
+          {
+            "borderRadius": 25,
+            "opacity": 0,
+          },
+        ]
+      }
+    />
+  </View>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    forwardedRef={[Function]}
+    importantForAccessibility="no-hide-descendants"
+    style={
+      [
+        {
+          "alignSelf": "flex-start",
+          "opacity": 0,
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+      ]
+    }
+  >
+    <Text
+      collapsable={false}
+      numberOfLines={1}
+      style={
+        [
+          {
+            "fontFamily": "System",
+            "fontSize": 22,
+            "fontWeight": "400",
+            "letterSpacing": 0,
+            "lineHeight": 28,
+          },
+          {
+            "textAlign": "left",
+          },
+          {
+            "color": "rgba(29, 27, 32, 1)",
+            "writingDirection": "ltr",
+          },
+          undefined,
+        ]
+      }
+    >
+      New message
+    </Text>
+  </View>
+</>
+`;
+
+exports[`renders extended FAB not visible 1`] = `
+<>
+  <View
+    collapsable={false}
+    style={
+      [
+        {},
+        undefined,
+        {
+          "transformOrigin": "center",
+        },
+        {
+          "height": 56,
+          "opacity": 0,
+          "transform": [
+            {
+              "scale": 0,
+            },
+          ],
+          "width": 56,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 3.33,
+            "width": 0,
+          },
+          "shadowOpacity": 0.19,
+          "shadowRadius": 4.75,
+        },
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {},
+          {},
+          {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+          },
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 16,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 1.5,
+          },
+        ]
+      }
+    />
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "height": "100%",
+            "overflow": "hidden",
+            "width": "100%",
+          },
+          {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+            "borderRadius": 16,
+          },
+        ]
+      }
+    >
+      <View
+        accessibilityLabel="New message"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": true,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
+            {
+              "overflow": "hidden",
+            },
+            [
+              null,
+              null,
+            ],
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "pointerEvents": "none",
+              },
+              {
+                "height": 56,
+                "paddingEnd": 16,
+                "paddingStart": 16,
+              },
+            ]
+          }
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "rgba(33, 0, 93, 1)",
+                  "fontSize": 24,
+                },
+                [
+                  {
+                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            plus
+          </Text>
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "marginStart": 8,
+                },
+                {
+                  "opacity": 1,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+              ]
+            }
+          >
+            <Text
+              collapsable={false}
+              ellipsizeMode="clip"
+              numberOfLines={1}
+              selectable={false}
+              style={
+                [
+                  {
+                    "fontFamily": "System",
+                    "fontSize": 16,
+                    "fontWeight": "500",
+                    "letterSpacing": 0.15,
+                    "lineHeight": 24,
+                  },
+                  {
+                    "textAlign": "left",
+                  },
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                    "writingDirection": "ltr",
+                  },
+                  {
+                    "color": "rgba(33, 0, 93, 1)",
+                  },
+                ]
+              }
+            >
+              New message
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "borderWidth": 3,
+            "bottom": -5,
+            "left": -5,
+            "pointerEvents": "none",
+            "position": "absolute",
+            "right": -5,
+            "top": -5,
+          },
+          {
+            "borderColor": "rgba(98, 91, 113, 1)",
+          },
+          {
+            "borderRadius": 21,
+            "opacity": 0,
+          },
+        ]
+      }
+    />
+  </View>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    forwardedRef={[Function]}
+    importantForAccessibility="no-hide-descendants"
+    style={
+      [
+        {
+          "alignSelf": "flex-start",
+          "opacity": 0,
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+      ]
+    }
+  >
+    <Text
+      collapsable={false}
+      numberOfLines={1}
+      style={
+        [
+          {
+            "fontFamily": "System",
+            "fontSize": 16,
+            "fontWeight": "500",
+            "letterSpacing": 0.15,
+            "lineHeight": 24,
+          },
+          {
+            "textAlign": "left",
+          },
+          {
+            "color": "rgba(29, 27, 32, 1)",
+            "writingDirection": "ltr",
+          },
+          undefined,
+        ]
+      }
+    >
+      New message
+    </Text>
+  </View>
+</>
+`;
+
+exports[`renders extended FAB transitioning to collapsed 1`] = `
+<>
+  <View
+    collapsable={false}
+    style={
+      [
+        {},
+        undefined,
+        {
+          "transformOrigin": "center",
+        },
+        {
+          "height": 56,
+          "opacity": 1,
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+          "width": 56,
+        },
+        {
+          "pointerEvents": "auto",
+        },
+        {},
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 3.33,
+            "width": 0,
+          },
+          "shadowOpacity": 0.19,
+          "shadowRadius": 4.75,
+        },
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {},
+          {},
+          {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+          },
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 16,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 1.5,
+          },
+        ]
+      }
+    />
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "height": "100%",
+            "overflow": "hidden",
+            "width": "100%",
+          },
+          {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+            "borderRadius": 16,
+          },
+        ]
+      }
+    >
+      <View
+        accessibilityLabel="New message"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": true,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
+            {
+              "overflow": "hidden",
+            },
+            [
+              null,
+              null,
+            ],
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "pointerEvents": "none",
+              },
+              {
+                "height": 56,
+                "paddingEnd": 16,
+                "paddingStart": 16,
+              },
+            ]
+          }
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "rgba(33, 0, 93, 1)",
+                  "fontSize": 24,
+                },
+                [
+                  {
+                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            plus
+          </Text>
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "marginStart": 8,
+                },
+                {
+                  "opacity": 1,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+              ]
+            }
+          >
+            <Text
+              collapsable={false}
+              ellipsizeMode="clip"
+              numberOfLines={1}
+              selectable={false}
+              style={
+                [
+                  {
+                    "fontFamily": "System",
+                    "fontSize": 16,
+                    "fontWeight": "500",
+                    "letterSpacing": 0.15,
+                    "lineHeight": 24,
+                  },
+                  {
+                    "textAlign": "left",
+                  },
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                    "writingDirection": "ltr",
+                  },
+                  {
+                    "color": "rgba(33, 0, 93, 1)",
+                  },
+                ]
+              }
+            >
+              New message
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "borderWidth": 3,
+            "bottom": -5,
+            "left": -5,
+            "pointerEvents": "none",
+            "position": "absolute",
+            "right": -5,
+            "top": -5,
+          },
+          {
+            "borderColor": "rgba(98, 91, 113, 1)",
+          },
+          {
+            "borderRadius": 21,
+            "opacity": 0,
+          },
+        ]
+      }
+    />
+  </View>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    forwardedRef={[Function]}
+    importantForAccessibility="no-hide-descendants"
+    style={
+      [
+        {
+          "alignSelf": "flex-start",
+          "opacity": 0,
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+      ]
+    }
+  >
+    <Text
+      collapsable={false}
+      numberOfLines={1}
+      style={
+        [
+          {
+            "fontFamily": "System",
+            "fontSize": 16,
+            "fontWeight": "500",
+            "letterSpacing": 0.15,
+            "lineHeight": 24,
+          },
+          {
+            "textAlign": "left",
+          },
+          {
+            "color": "rgba(29, 27, 32, 1)",
+            "writingDirection": "ltr",
+          },
+          undefined,
+        ]
+      }
+    >
+      New message
+    </Text>
+  </View>
+</>
+`;
diff --git a/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap b/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap
new file mode 100644
index 0000000000..8b66657112
--- /dev/null
+++ b/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap
@@ -0,0 +1,6205 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders FAB.Menu closed 1`] = `
+<View
+  style={
+    [
+      {
+        "bottom": 0,
+        "justifyContent": "flex-end",
+        "left": 0,
+        "pointerEvents": "box-none",
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      },
+      {
+        "paddingBottom": 16,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 0,
+      },
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "flexDirection": "column",
+          "pointerEvents": "box-none",
+        },
+        {
+          "alignItems": "flex-end",
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "flexDirection": "column",
+            "pointerEvents": "box-none",
+            "position": "absolute",
+          },
+          {
+            "right": 0,
+          },
+          {
+            "alignItems": "flex-end",
+            "bottom": 64,
+          },
+        ]
+      }
+    >
+      <View
+        aria-hidden={true}
+        collapsable={false}
+        importantForAccessibility="no-hide-descendants"
+        style={
+          [
+            {
+              "marginBottom": 4,
+              "transformOrigin": "right",
+            },
+            {
+              "opacity": 0,
+              "transform": [
+                {
+                  "scaleX": 0,
+                },
+              ],
+            },
+            {
+              "pointerEvents": "none",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "position": "relative",
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                  "borderRadius": 9999,
+                  "height": 56,
+                },
+              ]
+            }
+          >
+            <View
+              accessibilityLabel="Send email"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              role="button"
+              style={
+                [
+                  {
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 9999,
+                    },
+                    null,
+                  ],
+                ]
+              }
+              testID="item-0"
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "pointerEvents": "none",
+                    },
+                    {
+                      "height": 56,
+                      "paddingEnd": 24,
+                      "paddingStart": 24,
+                    },
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
+                        },
+                        {
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        {
+                          "color": "rgba(33, 0, 93, 1)",
+                        },
+                      ]
+                    }
+                  >
+                    Send email
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+      <View
+        aria-hidden={true}
+        collapsable={false}
+        importantForAccessibility="no-hide-descendants"
+        style={
+          [
+            {
+              "marginBottom": 0,
+              "transformOrigin": "right",
+            },
+            {
+              "opacity": 0,
+              "transform": [
+                {
+                  "scaleX": 0,
+                },
+              ],
+            },
+            {
+              "pointerEvents": "none",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "position": "relative",
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                  "borderRadius": 9999,
+                  "height": 56,
+                },
+              ]
+            }
+          >
+            <View
+              accessibilityLabel="Set reminder"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              role="button"
+              style={
+                [
+                  {
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 9999,
+                    },
+                    null,
+                  ],
+                ]
+              }
+              testID="item-1"
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "pointerEvents": "none",
+                    },
+                    {
+                      "height": 56,
+                      "paddingEnd": 24,
+                      "paddingStart": 24,
+                    },
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
+                        },
+                        {
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        {
+                          "color": "rgba(33, 0, 93, 1)",
+                        },
+                      ]
+                    }
+                  >
+                    Set reminder
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        [
+          {
+            "justifyContent": "flex-start",
+          },
+          {
+            "alignItems": "flex-end",
+            "height": 56,
+            "width": 56,
+          },
+          {
+            "pointerEvents": "box-none",
+          },
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          [
+            {},
+            undefined,
+            {
+              "transformOrigin": "center",
+            },
+            {
+              "height": 56,
+              "opacity": 1,
+              "transform": [
+                {
+                  "scale": 1,
+                },
+              ],
+              "width": 56,
+            },
+            {
+              "pointerEvents": "auto",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 16,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 3.33,
+                "width": 0,
+              },
+              "shadowOpacity": 0.19,
+              "shadowRadius": 4.75,
+            },
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 16,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.039,
+                "shadowRadius": 1.5,
+              },
+            ]
+          }
+        />
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "height": "100%",
+                "overflow": "hidden",
+                "width": "100%",
+              },
+              {
+                "backgroundColor": "transparent",
+                "borderRadius": 16,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                },
+                {
+                  "opacity": 1,
+                },
+              ]
+            }
+          />
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(103, 80, 164, 1)",
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": true,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                [
+                  {
+                    "flex": 1,
+                  },
+                  null,
+                ],
+              ]
+            }
+          >
+            <View
+              style={
+                {
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "top": 0,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                    {
+                      "opacity": 1,
+                      "transform": [
+                        {
+                          "translateX": 16,
+                        },
+                        {
+                          "translateY": 16,
+                        },
+                      ],
+                    },
+                  ]
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(33, 0, 93, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  plus
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                    {
+                      "opacity": 0,
+                      "transform": [
+                        {
+                          "translateX": 18,
+                        },
+                        {
+                          "translateY": 18,
+                        },
+                      ],
+                    },
+                  ]
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 20,
+                      },
+                      [
+                        {
+                          "lineHeight": 20,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  close
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "borderWidth": 3,
+                "bottom": -5,
+                "left": -5,
+                "pointerEvents": "none",
+                "position": "absolute",
+                "right": -5,
+                "top": -5,
+              },
+              {
+                "borderColor": "rgba(98, 91, 113, 1)",
+              },
+              {
+                "borderRadius": 21,
+                "opacity": 0,
+              },
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
+<View
+  style={
+    [
+      {
+        "bottom": 0,
+        "justifyContent": "flex-end",
+        "left": 0,
+        "pointerEvents": "box-none",
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      },
+      {
+        "paddingBottom": 16,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 0,
+      },
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "flexDirection": "column",
+          "pointerEvents": "box-none",
+        },
+        {
+          "alignItems": "flex-end",
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "flexDirection": "column",
+            "pointerEvents": "box-none",
+            "position": "absolute",
+          },
+          {
+            "right": 0,
+          },
+          {
+            "alignItems": "flex-end",
+            "bottom": 64,
+          },
+        ]
+      }
+    >
+      <View
+        aria-hidden={true}
+        collapsable={false}
+        importantForAccessibility="no-hide-descendants"
+        style={
+          [
+            {
+              "marginBottom": 4,
+              "transformOrigin": "right",
+            },
+            {
+              "opacity": 0,
+              "transform": [
+                {
+                  "scaleX": 0,
+                },
+              ],
+            },
+            {
+              "pointerEvents": "none",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "position": "relative",
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                  "borderRadius": 9999,
+                  "height": 56,
+                },
+              ]
+            }
+          >
+            <View
+              accessibilityLabel="Send email"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              role="button"
+              style={
+                [
+                  {
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 9999,
+                    },
+                    null,
+                  ],
+                ]
+              }
+              testID="item-0"
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "pointerEvents": "none",
+                    },
+                    {
+                      "height": 56,
+                      "paddingEnd": 24,
+                      "paddingStart": 24,
+                    },
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
+                        },
+                        {
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        {
+                          "color": "rgba(33, 0, 93, 1)",
+                        },
+                      ]
+                    }
+                  >
+                    Send email
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+      <View
+        aria-hidden={true}
+        collapsable={false}
+        importantForAccessibility="no-hide-descendants"
+        style={
+          [
+            {
+              "marginBottom": 0,
+              "transformOrigin": "right",
+            },
+            {
+              "opacity": 0,
+              "transform": [
+                {
+                  "scaleX": 0,
+                },
+              ],
+            },
+            {
+              "pointerEvents": "none",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "position": "relative",
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                  "borderRadius": 9999,
+                  "height": 56,
+                },
+              ]
+            }
+          >
+            <View
+              accessibilityLabel="Set reminder"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              role="button"
+              style={
+                [
+                  {
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 9999,
+                    },
+                    null,
+                  ],
+                ]
+              }
+              testID="item-1"
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "pointerEvents": "none",
+                    },
+                    {
+                      "height": 56,
+                      "paddingEnd": 24,
+                      "paddingStart": 24,
+                    },
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
+                        },
+                        {
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        {
+                          "color": "rgba(33, 0, 93, 1)",
+                        },
+                      ]
+                    }
+                  >
+                    Set reminder
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        [
+          {
+            "justifyContent": "flex-start",
+          },
+          {
+            "alignItems": "flex-end",
+            "height": 56,
+            "width": 56,
+          },
+          {
+            "pointerEvents": "none",
+          },
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          [
+            {},
+            undefined,
+            {
+              "transformOrigin": "center",
+            },
+            {
+              "height": 56,
+              "opacity": 0,
+              "transform": [
+                {
+                  "scale": 0,
+                },
+              ],
+              "width": 56,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 16,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 3.33,
+                "width": 0,
+              },
+              "shadowOpacity": 0.19,
+              "shadowRadius": 4.75,
+            },
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 16,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.039,
+                "shadowRadius": 1.5,
+              },
+            ]
+          }
+        />
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "height": "100%",
+                "overflow": "hidden",
+                "width": "100%",
+              },
+              {
+                "backgroundColor": "transparent",
+                "borderRadius": 16,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                },
+                {
+                  "opacity": 1,
+                },
+              ]
+            }
+          />
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(103, 80, 164, 1)",
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": true,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                [
+                  {
+                    "flex": 1,
+                  },
+                  null,
+                ],
+              ]
+            }
+          >
+            <View
+              style={
+                {
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "top": 0,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                    {
+                      "opacity": 1,
+                      "transform": [
+                        {
+                          "translateX": 16,
+                        },
+                        {
+                          "translateY": 16,
+                        },
+                      ],
+                    },
+                  ]
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(33, 0, 93, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  plus
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                    {
+                      "opacity": 0,
+                      "transform": [
+                        {
+                          "translateX": 18,
+                        },
+                        {
+                          "translateY": 18,
+                        },
+                      ],
+                    },
+                  ]
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 20,
+                      },
+                      [
+                        {
+                          "lineHeight": 20,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  close
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "borderWidth": 3,
+                "bottom": -5,
+                "left": -5,
+                "pointerEvents": "none",
+                "position": "absolute",
+                "right": -5,
+                "top": -5,
+              },
+              {
+                "borderColor": "rgba(98, 91, 113, 1)",
+              },
+              {
+                "borderRadius": 21,
+                "opacity": 0,
+              },
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders FAB.Menu open 1`] = `
+<View
+  style={
+    [
+      {
+        "bottom": 0,
+        "justifyContent": "flex-end",
+        "left": 0,
+        "pointerEvents": "box-none",
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      },
+      {
+        "paddingBottom": 16,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 0,
+      },
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "flexDirection": "column",
+          "pointerEvents": "box-none",
+        },
+        {
+          "alignItems": "flex-end",
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "flexDirection": "column",
+            "pointerEvents": "box-none",
+            "position": "absolute",
+          },
+          {
+            "right": 0,
+          },
+          {
+            "alignItems": "flex-end",
+            "bottom": 64,
+          },
+        ]
+      }
+    >
+      <View
+        aria-hidden={false}
+        collapsable={false}
+        importantForAccessibility="yes"
+        style={
+          [
+            {
+              "marginBottom": 4,
+              "transformOrigin": "right",
+            },
+            {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "position": "relative",
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                  "borderRadius": 9999,
+                  "height": 56,
+                },
+              ]
+            }
+          >
+            <View
+              accessibilityLabel="Send email"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              role="button"
+              style={
+                [
+                  {
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 9999,
+                    },
+                    null,
+                  ],
+                ]
+              }
+              testID="item-0"
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "pointerEvents": "none",
+                    },
+                    {
+                      "height": 56,
+                      "paddingEnd": 24,
+                      "paddingStart": 24,
+                    },
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
+                        },
+                        {
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        {
+                          "color": "rgba(33, 0, 93, 1)",
+                        },
+                      ]
+                    }
+                  >
+                    Send email
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+      <View
+        aria-hidden={false}
+        collapsable={false}
+        importantForAccessibility="yes"
+        style={
+          [
+            {
+              "marginBottom": 0,
+              "transformOrigin": "right",
+            },
+            {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "position": "relative",
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                  "borderRadius": 9999,
+                  "height": 56,
+                },
+              ]
+            }
+          >
+            <View
+              accessibilityLabel="Set reminder"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              role="button"
+              style={
+                [
+                  {
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 9999,
+                    },
+                    null,
+                  ],
+                ]
+              }
+              testID="item-1"
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "pointerEvents": "none",
+                    },
+                    {
+                      "height": 56,
+                      "paddingEnd": 24,
+                      "paddingStart": 24,
+                    },
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
+                        },
+                        {
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        {
+                          "color": "rgba(33, 0, 93, 1)",
+                        },
+                      ]
+                    }
+                  >
+                    Set reminder
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        [
+          {
+            "justifyContent": "flex-start",
+          },
+          {
+            "alignItems": "flex-end",
+            "height": 56,
+            "width": 56,
+          },
+          {
+            "pointerEvents": "box-none",
+          },
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          [
+            {},
+            undefined,
+            {
+              "transformOrigin": "center",
+            },
+            {
+              "height": 56,
+              "opacity": 1,
+              "transform": [
+                {
+                  "scale": 1,
+                },
+              ],
+              "width": 56,
+            },
+            {
+              "pointerEvents": "auto",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 28,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 3.33,
+                "width": 0,
+              },
+              "shadowOpacity": 0.19,
+              "shadowRadius": 4.75,
+            },
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 28,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.039,
+                "shadowRadius": 1.5,
+              },
+            ]
+          }
+        />
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "height": "100%",
+                "overflow": "hidden",
+                "width": "100%",
+              },
+              {
+                "backgroundColor": "transparent",
+                "borderRadius": 28,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(103, 80, 164, 1)",
+                },
+                {
+                  "opacity": 1,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                [
+                  {
+                    "flex": 1,
+                  },
+                  null,
+                ],
+              ]
+            }
+          >
+            <View
+              style={
+                {
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "top": 0,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                    {
+                      "opacity": 0,
+                      "transform": [
+                        {
+                          "translateX": 16,
+                        },
+                        {
+                          "translateY": 16,
+                        },
+                      ],
+                    },
+                  ]
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(33, 0, 93, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  plus
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                    {
+                      "opacity": 1,
+                      "transform": [
+                        {
+                          "translateX": 18,
+                        },
+                        {
+                          "translateY": 18,
+                        },
+                      ],
+                    },
+                  ]
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 20,
+                      },
+                      [
+                        {
+                          "lineHeight": 20,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  close
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "borderWidth": 3,
+                "bottom": -5,
+                "left": -5,
+                "pointerEvents": "none",
+                "position": "absolute",
+                "right": -5,
+                "top": -5,
+              },
+              {
+                "borderColor": "rgba(98, 91, 113, 1)",
+              },
+              {
+                "borderRadius": 33,
+                "opacity": 0,
+              },
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders FAB.Menu with 6 items 1`] = `
+<View
+  style={
+    [
+      {
+        "bottom": 0,
+        "justifyContent": "flex-end",
+        "left": 0,
+        "pointerEvents": "box-none",
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      },
+      {
+        "paddingBottom": 16,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 0,
+      },
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "flexDirection": "column",
+          "pointerEvents": "box-none",
+        },
+        {
+          "alignItems": "flex-end",
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "flexDirection": "column",
+            "pointerEvents": "box-none",
+            "position": "absolute",
+          },
+          {
+            "right": 0,
+          },
+          {
+            "alignItems": "flex-end",
+            "bottom": 64,
+          },
+        ]
+      }
+    >
+      <View
+        aria-hidden={false}
+        collapsable={false}
+        importantForAccessibility="yes"
+        style={
+          [
+            {
+              "marginBottom": 4,
+              "transformOrigin": "right",
+            },
+            {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "position": "relative",
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                  "borderRadius": 9999,
+                  "height": 56,
+                },
+              ]
+            }
+          >
+            <View
+              accessibilityLabel="Item 1"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              role="button"
+              style={
+                [
+                  {
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 9999,
+                    },
+                    null,
+                  ],
+                ]
+              }
+              testID="item-0"
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "pointerEvents": "none",
+                    },
+                    {
+                      "height": 56,
+                      "paddingEnd": 24,
+                      "paddingStart": 24,
+                    },
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
+                        },
+                        {
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        {
+                          "color": "rgba(33, 0, 93, 1)",
+                        },
+                      ]
+                    }
+                  >
+                    Item 1
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+      <View
+        aria-hidden={false}
+        collapsable={false}
+        importantForAccessibility="yes"
+        style={
+          [
+            {
+              "marginBottom": 4,
+              "transformOrigin": "right",
+            },
+            {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "position": "relative",
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                  "borderRadius": 9999,
+                  "height": 56,
+                },
+              ]
+            }
+          >
+            <View
+              accessibilityLabel="Item 2"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              role="button"
+              style={
+                [
+                  {
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 9999,
+                    },
+                    null,
+                  ],
+                ]
+              }
+              testID="item-1"
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "pointerEvents": "none",
+                    },
+                    {
+                      "height": 56,
+                      "paddingEnd": 24,
+                      "paddingStart": 24,
+                    },
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
+                        },
+                        {
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        {
+                          "color": "rgba(33, 0, 93, 1)",
+                        },
+                      ]
+                    }
+                  >
+                    Item 2
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+      <View
+        aria-hidden={false}
+        collapsable={false}
+        importantForAccessibility="yes"
+        style={
+          [
+            {
+              "marginBottom": 4,
+              "transformOrigin": "right",
+            },
+            {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "position": "relative",
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                  "borderRadius": 9999,
+                  "height": 56,
+                },
+              ]
+            }
+          >
+            <View
+              accessibilityLabel="Item 3"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              role="button"
+              style={
+                [
+                  {
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 9999,
+                    },
+                    null,
+                  ],
+                ]
+              }
+              testID="item-2"
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "pointerEvents": "none",
+                    },
+                    {
+                      "height": 56,
+                      "paddingEnd": 24,
+                      "paddingStart": 24,
+                    },
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
+                        },
+                        {
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        {
+                          "color": "rgba(33, 0, 93, 1)",
+                        },
+                      ]
+                    }
+                  >
+                    Item 3
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+      <View
+        aria-hidden={false}
+        collapsable={false}
+        importantForAccessibility="yes"
+        style={
+          [
+            {
+              "marginBottom": 4,
+              "transformOrigin": "right",
+            },
+            {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "position": "relative",
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                  "borderRadius": 9999,
+                  "height": 56,
+                },
+              ]
+            }
+          >
+            <View
+              accessibilityLabel="Item 4"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              role="button"
+              style={
+                [
+                  {
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 9999,
+                    },
+                    null,
+                  ],
+                ]
+              }
+              testID="item-3"
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "pointerEvents": "none",
+                    },
+                    {
+                      "height": 56,
+                      "paddingEnd": 24,
+                      "paddingStart": 24,
+                    },
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
+                        },
+                        {
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        {
+                          "color": "rgba(33, 0, 93, 1)",
+                        },
+                      ]
+                    }
+                  >
+                    Item 4
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+      <View
+        aria-hidden={false}
+        collapsable={false}
+        importantForAccessibility="yes"
+        style={
+          [
+            {
+              "marginBottom": 4,
+              "transformOrigin": "right",
+            },
+            {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "position": "relative",
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                  "borderRadius": 9999,
+                  "height": 56,
+                },
+              ]
+            }
+          >
+            <View
+              accessibilityLabel="Item 5"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              role="button"
+              style={
+                [
+                  {
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 9999,
+                    },
+                    null,
+                  ],
+                ]
+              }
+              testID="item-4"
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "pointerEvents": "none",
+                    },
+                    {
+                      "height": 56,
+                      "paddingEnd": 24,
+                      "paddingStart": 24,
+                    },
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
+                        },
+                        {
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        {
+                          "color": "rgba(33, 0, 93, 1)",
+                        },
+                      ]
+                    }
+                  >
+                    Item 5
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+      <View
+        aria-hidden={false}
+        collapsable={false}
+        importantForAccessibility="yes"
+        style={
+          [
+            {
+              "marginBottom": 0,
+              "transformOrigin": "right",
+            },
+            {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "position": "relative",
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                  "borderRadius": 9999,
+                  "height": 56,
+                },
+              ]
+            }
+          >
+            <View
+              accessibilityLabel="Item 6"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              role="button"
+              style={
+                [
+                  {
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 9999,
+                    },
+                    null,
+                  ],
+                ]
+              }
+              testID="item-5"
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "pointerEvents": "none",
+                    },
+                    {
+                      "height": 56,
+                      "paddingEnd": 24,
+                      "paddingStart": 24,
+                    },
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
+                        },
+                        {
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        {
+                          "color": "rgba(33, 0, 93, 1)",
+                        },
+                      ]
+                    }
+                  >
+                    Item 6
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        [
+          {
+            "justifyContent": "flex-start",
+          },
+          {
+            "alignItems": "flex-end",
+            "height": 56,
+            "width": 56,
+          },
+          {
+            "pointerEvents": "box-none",
+          },
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          [
+            {},
+            undefined,
+            {
+              "transformOrigin": "center",
+            },
+            {
+              "height": 56,
+              "opacity": 1,
+              "transform": [
+                {
+                  "scale": 1,
+                },
+              ],
+              "width": 56,
+            },
+            {
+              "pointerEvents": "auto",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 28,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 3.33,
+                "width": 0,
+              },
+              "shadowOpacity": 0.19,
+              "shadowRadius": 4.75,
+            },
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 28,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.039,
+                "shadowRadius": 1.5,
+              },
+            ]
+          }
+        />
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "height": "100%",
+                "overflow": "hidden",
+                "width": "100%",
+              },
+              {
+                "backgroundColor": "transparent",
+                "borderRadius": 28,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(103, 80, 164, 1)",
+                },
+                {
+                  "opacity": 1,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                [
+                  {
+                    "flex": 1,
+                  },
+                  null,
+                ],
+              ]
+            }
+          >
+            <View
+              style={
+                {
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "top": 0,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                    {
+                      "opacity": 0,
+                      "transform": [
+                        {
+                          "translateX": 16,
+                        },
+                        {
+                          "translateY": 16,
+                        },
+                      ],
+                    },
+                  ]
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(33, 0, 93, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  plus
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                    {
+                      "opacity": 1,
+                      "transform": [
+                        {
+                          "translateX": 18,
+                        },
+                        {
+                          "translateY": 18,
+                        },
+                      ],
+                    },
+                  ]
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 20,
+                      },
+                      [
+                        {
+                          "lineHeight": 20,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  close
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "borderWidth": 3,
+                "bottom": -5,
+                "left": -5,
+                "pointerEvents": "none",
+                "position": "absolute",
+                "right": -5,
+                "top": -5,
+              },
+              {
+                "borderColor": "rgba(98, 91, 113, 1)",
+              },
+              {
+                "borderRadius": 33,
+                "opacity": 0,
+              },
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders FAB.Menu with center alignment 1`] = `
+<View
+  style={
+    [
+      {
+        "bottom": 0,
+        "justifyContent": "flex-end",
+        "left": 0,
+        "pointerEvents": "box-none",
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      },
+      {
+        "paddingBottom": 16,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 0,
+      },
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "flexDirection": "column",
+          "pointerEvents": "box-none",
+        },
+        {
+          "alignItems": "center",
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "flexDirection": "column",
+            "pointerEvents": "box-none",
+            "position": "absolute",
+          },
+          {
+            "left": 0,
+            "right": 0,
+          },
+          {
+            "alignItems": "center",
+            "bottom": 64,
+          },
+        ]
+      }
+    >
+      <View
+        aria-hidden={false}
+        collapsable={false}
+        importantForAccessibility="yes"
+        style={
+          [
+            {
+              "marginBottom": 4,
+              "transformOrigin": "center",
+            },
+            {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "position": "relative",
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                  "borderRadius": 9999,
+                  "height": 56,
+                },
+              ]
+            }
+          >
+            <View
+              accessibilityLabel="Send email"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              role="button"
+              style={
+                [
+                  {
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 9999,
+                    },
+                    null,
+                  ],
+                ]
+              }
+              testID="item-0"
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "pointerEvents": "none",
+                    },
+                    {
+                      "height": 56,
+                      "paddingEnd": 24,
+                      "paddingStart": 24,
+                    },
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
+                        },
+                        {
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        {
+                          "color": "rgba(33, 0, 93, 1)",
+                        },
+                      ]
+                    }
+                  >
+                    Send email
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+      <View
+        aria-hidden={false}
+        collapsable={false}
+        importantForAccessibility="yes"
+        style={
+          [
+            {
+              "marginBottom": 0,
+              "transformOrigin": "center",
+            },
+            {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "position": "relative",
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                  "borderRadius": 9999,
+                  "height": 56,
+                },
+              ]
+            }
+          >
+            <View
+              accessibilityLabel="Set reminder"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              role="button"
+              style={
+                [
+                  {
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 9999,
+                    },
+                    null,
+                  ],
+                ]
+              }
+              testID="item-1"
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "pointerEvents": "none",
+                    },
+                    {
+                      "height": 56,
+                      "paddingEnd": 24,
+                      "paddingStart": 24,
+                    },
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
+                        },
+                        {
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        {
+                          "color": "rgba(33, 0, 93, 1)",
+                        },
+                      ]
+                    }
+                  >
+                    Set reminder
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        [
+          {
+            "justifyContent": "flex-start",
+          },
+          {
+            "alignItems": "center",
+            "height": 56,
+            "width": 56,
+          },
+          {
+            "pointerEvents": "box-none",
+          },
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          [
+            {},
+            undefined,
+            {
+              "transformOrigin": "center",
+            },
+            {
+              "height": 56,
+              "opacity": 1,
+              "transform": [
+                {
+                  "scale": 1,
+                },
+              ],
+              "width": 56,
+            },
+            {
+              "pointerEvents": "auto",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 28,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 3.33,
+                "width": 0,
+              },
+              "shadowOpacity": 0.19,
+              "shadowRadius": 4.75,
+            },
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 28,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.039,
+                "shadowRadius": 1.5,
+              },
+            ]
+          }
+        />
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "height": "100%",
+                "overflow": "hidden",
+                "width": "100%",
+              },
+              {
+                "backgroundColor": "transparent",
+                "borderRadius": 28,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(103, 80, 164, 1)",
+                },
+                {
+                  "opacity": 1,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                [
+                  {
+                    "flex": 1,
+                  },
+                  null,
+                ],
+              ]
+            }
+          >
+            <View
+              style={
+                {
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "top": 0,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                    {
+                      "opacity": 0,
+                      "transform": [
+                        {
+                          "translateX": 16,
+                        },
+                        {
+                          "translateY": 16,
+                        },
+                      ],
+                    },
+                  ]
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(33, 0, 93, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  plus
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                    {
+                      "opacity": 1,
+                      "transform": [
+                        {
+                          "translateX": 18,
+                        },
+                        {
+                          "translateY": 18,
+                        },
+                      ],
+                    },
+                  ]
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 20,
+                      },
+                      [
+                        {
+                          "lineHeight": 20,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  close
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "borderWidth": 3,
+                "bottom": -5,
+                "left": -5,
+                "pointerEvents": "none",
+                "position": "absolute",
+                "right": -5,
+                "top": -5,
+              },
+              {
+                "borderColor": "rgba(98, 91, 113, 1)",
+              },
+              {
+                "borderRadius": 33,
+                "opacity": 0,
+              },
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders FAB.Menu with items having icons 1`] = `
+<View
+  style={
+    [
+      {
+        "bottom": 0,
+        "justifyContent": "flex-end",
+        "left": 0,
+        "pointerEvents": "box-none",
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      },
+      {
+        "paddingBottom": 16,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 0,
+      },
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "flexDirection": "column",
+          "pointerEvents": "box-none",
+        },
+        {
+          "alignItems": "flex-end",
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "flexDirection": "column",
+            "pointerEvents": "box-none",
+            "position": "absolute",
+          },
+          {
+            "right": 0,
+          },
+          {
+            "alignItems": "flex-end",
+            "bottom": 64,
+          },
+        ]
+      }
+    >
+      <View
+        aria-hidden={false}
+        collapsable={false}
+        importantForAccessibility="yes"
+        style={
+          [
+            {
+              "marginBottom": 4,
+              "transformOrigin": "right",
+            },
+            {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "position": "relative",
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                  "borderRadius": 9999,
+                  "height": 56,
+                },
+              ]
+            }
+          >
+            <View
+              accessibilityLabel="Send email"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              role="button"
+              style={
+                [
+                  {
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 9999,
+                    },
+                    null,
+                  ],
+                ]
+              }
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "pointerEvents": "none",
+                    },
+                    {
+                      "height": 56,
+                      "paddingEnd": 24,
+                      "paddingStart": 24,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(33, 0, 93, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  email
+                </Text>
+                <View
+                  collapsable={false}
+                  style={
+                    [
+                      {
+                        "marginStart": 8,
+                      },
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
+                        },
+                        {
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        {
+                          "color": "rgba(33, 0, 93, 1)",
+                        },
+                      ]
+                    }
+                  >
+                    Send email
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+      <View
+        aria-hidden={false}
+        collapsable={false}
+        importantForAccessibility="yes"
+        style={
+          [
+            {
+              "marginBottom": 0,
+              "transformOrigin": "right",
+            },
+            {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "position": "relative",
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                  "borderRadius": 9999,
+                  "height": 56,
+                },
+              ]
+            }
+          >
+            <View
+              accessibilityLabel="Set reminder"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              role="button"
+              style={
+                [
+                  {
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 9999,
+                    },
+                    null,
+                  ],
+                ]
+              }
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "pointerEvents": "none",
+                    },
+                    {
+                      "height": 56,
+                      "paddingEnd": 24,
+                      "paddingStart": 24,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(33, 0, 93, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  bell
+                </Text>
+                <View
+                  collapsable={false}
+                  style={
+                    [
+                      {
+                        "marginStart": 8,
+                      },
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
+                        },
+                        {
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        {
+                          "color": "rgba(33, 0, 93, 1)",
+                        },
+                      ]
+                    }
+                  >
+                    Set reminder
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        [
+          {
+            "justifyContent": "flex-start",
+          },
+          {
+            "alignItems": "flex-end",
+            "height": 56,
+            "width": 56,
+          },
+          {
+            "pointerEvents": "box-none",
+          },
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          [
+            {},
+            undefined,
+            {
+              "transformOrigin": "center",
+            },
+            {
+              "height": 56,
+              "opacity": 1,
+              "transform": [
+                {
+                  "scale": 1,
+                },
+              ],
+              "width": 56,
+            },
+            {
+              "pointerEvents": "auto",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 28,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 3.33,
+                "width": 0,
+              },
+              "shadowOpacity": 0.19,
+              "shadowRadius": 4.75,
+            },
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 28,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.039,
+                "shadowRadius": 1.5,
+              },
+            ]
+          }
+        />
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "height": "100%",
+                "overflow": "hidden",
+                "width": "100%",
+              },
+              {
+                "backgroundColor": "transparent",
+                "borderRadius": 28,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(103, 80, 164, 1)",
+                },
+                {
+                  "opacity": 1,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                [
+                  {
+                    "flex": 1,
+                  },
+                  null,
+                ],
+              ]
+            }
+          >
+            <View
+              style={
+                {
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "top": 0,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                    {
+                      "opacity": 0,
+                      "transform": [
+                        {
+                          "translateX": 16,
+                        },
+                        {
+                          "translateY": 16,
+                        },
+                      ],
+                    },
+                  ]
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(33, 0, 93, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  plus
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                    {
+                      "opacity": 1,
+                      "transform": [
+                        {
+                          "translateX": 18,
+                        },
+                        {
+                          "translateY": 18,
+                        },
+                      ],
+                    },
+                  ]
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 20,
+                      },
+                      [
+                        {
+                          "lineHeight": 20,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  close
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "borderWidth": 3,
+                "bottom": -5,
+                "left": -5,
+                "pointerEvents": "none",
+                "position": "absolute",
+                "right": -5,
+                "top": -5,
+              },
+              {
+                "borderColor": "rgba(98, 91, 113, 1)",
+              },
+              {
+                "borderRadius": 33,
+                "opacity": 0,
+              },
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders FAB.Menu with start alignment 1`] = `
+<View
+  style={
+    [
+      {
+        "bottom": 0,
+        "justifyContent": "flex-end",
+        "left": 0,
+        "pointerEvents": "box-none",
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      },
+      {
+        "paddingBottom": 16,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 0,
+      },
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "flexDirection": "column",
+          "pointerEvents": "box-none",
+        },
+        {
+          "alignItems": "flex-start",
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "flexDirection": "column",
+            "pointerEvents": "box-none",
+            "position": "absolute",
+          },
+          {
+            "left": 0,
+          },
+          {
+            "alignItems": "flex-start",
+            "bottom": 64,
+          },
+        ]
+      }
+    >
+      <View
+        aria-hidden={false}
+        collapsable={false}
+        importantForAccessibility="yes"
+        style={
+          [
+            {
+              "marginBottom": 4,
+              "transformOrigin": "left",
+            },
+            {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "position": "relative",
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                  "borderRadius": 9999,
+                  "height": 56,
+                },
+              ]
+            }
+          >
+            <View
+              accessibilityLabel="Send email"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              role="button"
+              style={
+                [
+                  {
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 9999,
+                    },
+                    null,
+                  ],
+                ]
+              }
+              testID="item-0"
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "pointerEvents": "none",
+                    },
+                    {
+                      "height": 56,
+                      "paddingEnd": 24,
+                      "paddingStart": 24,
+                    },
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
+                        },
+                        {
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        {
+                          "color": "rgba(33, 0, 93, 1)",
+                        },
+                      ]
+                    }
+                  >
+                    Send email
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+      <View
+        aria-hidden={false}
+        collapsable={false}
+        importantForAccessibility="yes"
+        style={
+          [
+            {
+              "marginBottom": 0,
+              "transformOrigin": "left",
+            },
+            {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "position": "relative",
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                  "borderRadius": 9999,
+                  "height": 56,
+                },
+              ]
+            }
+          >
+            <View
+              accessibilityLabel="Set reminder"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              role="button"
+              style={
+                [
+                  {
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 9999,
+                    },
+                    null,
+                  ],
+                ]
+              }
+              testID="item-1"
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "pointerEvents": "none",
+                    },
+                    {
+                      "height": 56,
+                      "paddingEnd": 24,
+                      "paddingStart": 24,
+                    },
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
+                        },
+                        {
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        {
+                          "color": "rgba(33, 0, 93, 1)",
+                        },
+                      ]
+                    }
+                  >
+                    Set reminder
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        [
+          {
+            "justifyContent": "flex-start",
+          },
+          {
+            "alignItems": "flex-start",
+            "height": 56,
+            "width": 56,
+          },
+          {
+            "pointerEvents": "box-none",
+          },
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          [
+            {},
+            undefined,
+            {
+              "transformOrigin": "center",
+            },
+            {
+              "height": 56,
+              "opacity": 1,
+              "transform": [
+                {
+                  "scale": 1,
+                },
+              ],
+              "width": 56,
+            },
+            {
+              "pointerEvents": "auto",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 28,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 3.33,
+                "width": 0,
+              },
+              "shadowOpacity": 0.19,
+              "shadowRadius": 4.75,
+            },
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 28,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.039,
+                "shadowRadius": 1.5,
+              },
+            ]
+          }
+        />
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "height": "100%",
+                "overflow": "hidden",
+                "width": "100%",
+              },
+              {
+                "backgroundColor": "transparent",
+                "borderRadius": 28,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(103, 80, 164, 1)",
+                },
+                {
+                  "opacity": 1,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                [
+                  {
+                    "flex": 1,
+                  },
+                  null,
+                ],
+              ]
+            }
+          >
+            <View
+              style={
+                {
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "top": 0,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                    {
+                      "opacity": 0,
+                      "transform": [
+                        {
+                          "translateX": 16,
+                        },
+                        {
+                          "translateY": 16,
+                        },
+                      ],
+                    },
+                  ]
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(33, 0, 93, 1)",
+                        "fontSize": 24,
+                      },
+                      [
+                        {
+                          "lineHeight": 24,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  plus
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                    {
+                      "opacity": 1,
+                      "transform": [
+                        {
+                          "translateX": 18,
+                        },
+                        {
+                          "translateY": 18,
+                        },
+                      ],
+                    },
+                  ]
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 20,
+                      },
+                      [
+                        {
+                          "lineHeight": 20,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  close
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "borderWidth": 3,
+                "bottom": -5,
+                "left": -5,
+                "pointerEvents": "none",
+                "position": "absolute",
+                "right": -5,
+                "top": -5,
+              },
+              {
+                "borderColor": "rgba(98, 91, 113, 1)",
+              },
+              {
+                "borderRadius": 33,
+                "opacity": 0,
+              },
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>
+</View>
+`;
diff --git a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap
index 1fe2b72a3d..7534e6f77e 100644
--- a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap
@@ -4,108 +4,87 @@ exports[`renders disabled icon button 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "height": 40,
-      "margin": 6,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {
+        "margin": 6,
+        "overflow": "hidden",
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-      "width": 40,
-    }
+      {
+        "backgroundColor": undefined,
+        "height": 40,
+        "width": 40,
+      },
+      {
+        "borderColor": "rgba(202, 196, 208, 1)",
+        "borderRadius": 20,
+        "borderWidth": 0,
+      },
+      undefined,
+    ]
   }
-  testID="icon-button-container-outer-layer"
 >
   <View
-    collapsable={false}
-    style={
+    accessibilityState={
       {
-        "backgroundColor": "transparent",
-        "borderColor": "rgba(28, 27, 31, 0.12)",
-        "borderRadius": 20,
-        "borderWidth": 0,
-        "elevation": 0,
-        "flex": 1,
-        "overflow": "hidden",
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="icon-button-container"
-  >
-    <View
-      accessibilityComponentType="button"
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityTraits={
-        [
-          "button",
-          "disabled",
-        ]
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+    }
+    accessible={true}
+    centered={true}
+    collapsable={false}
+    focusable={true}
+    hitSlop={
+      {
+        "bottom": 6,
+        "left": 6,
+        "right": 6,
+        "top": 6,
       }
-      accessible={true}
-      centered={true}
-      collapsable={false}
-      focusable={true}
-      hitSlop={
+    }
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "bottom": 6,
-          "left": 6,
-          "right": 6,
-          "top": 6,
-        }
-      }
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
+          "overflow": "hidden",
+        },
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexGrow": 1,
+            "justifyContent": "center",
           },
-          [
-            {
-              "alignItems": "center",
-              "flexGrow": 1,
-              "justifyContent": "center",
-            },
-            undefined,
-          ],
-        ]
+          undefined,
+        ],
+      ]
+    }
+  >
+    <View
+      style={
+        {
+          "opacity": 0.38,
+        }
       }
-      testID="icon-button"
     >
       <Text
         accessibilityElementsHidden={true}
@@ -115,7 +94,7 @@ exports[`renders disabled icon button 1`] = `
         style={
           [
             {
-              "color": "rgba(28, 27, 31, 0.38)",
+              "color": "rgba(29, 27, 32, 1)",
               "fontSize": 24,
             },
             [
@@ -145,103 +124,87 @@ exports[`renders icon button by default 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "height": 40,
-      "margin": 6,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {
+        "margin": 6,
+        "overflow": "hidden",
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-      "width": 40,
-    }
+      {
+        "backgroundColor": undefined,
+        "height": 40,
+        "width": 40,
+      },
+      {
+        "borderColor": "rgba(202, 196, 208, 1)",
+        "borderRadius": 20,
+        "borderWidth": 0,
+      },
+      undefined,
+    ]
   }
-  testID="icon-button-container-outer-layer"
 >
   <View
-    collapsable={false}
-    style={
+    accessibilityState={
       {
-        "backgroundColor": "transparent",
-        "borderColor": "rgba(121, 116, 126, 1)",
-        "borderRadius": 20,
-        "borderWidth": 0,
-        "elevation": 0,
-        "flex": 1,
-        "overflow": "hidden",
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="icon-button-container"
-  >
-    <View
-      accessibilityComponentType="button"
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityTraits="button"
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+    }
+    accessible={true}
+    centered={true}
+    collapsable={false}
+    focusable={true}
+    hitSlop={
+      {
+        "bottom": 6,
+        "left": 6,
+        "right": 6,
+        "top": 6,
       }
-      accessible={true}
-      centered={true}
-      collapsable={false}
-      focusable={true}
-      hitSlop={
+    }
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "bottom": 6,
-          "left": 6,
-          "right": 6,
-          "top": 6,
-        }
-      }
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
+          "overflow": "hidden",
+        },
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexGrow": 1,
+            "justifyContent": "center",
           },
-          [
-            {
-              "alignItems": "center",
-              "flexGrow": 1,
-              "justifyContent": "center",
-            },
-            undefined,
-          ],
-        ]
+          undefined,
+        ],
+      ]
+    }
+  >
+    <View
+      style={
+        {
+          "opacity": 1,
+        }
       }
-      testID="icon-button"
     >
       <Text
         accessibilityElementsHidden={true}
@@ -281,103 +244,87 @@ exports[`renders icon button with color 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "height": 40,
-      "margin": 6,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {
+        "margin": 6,
+        "overflow": "hidden",
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-      "width": 40,
-    }
+      {
+        "backgroundColor": undefined,
+        "height": 40,
+        "width": 40,
+      },
+      {
+        "borderColor": "rgba(202, 196, 208, 1)",
+        "borderRadius": 20,
+        "borderWidth": 0,
+      },
+      undefined,
+    ]
   }
-  testID="icon-button-container-outer-layer"
 >
   <View
-    collapsable={false}
-    style={
+    accessibilityState={
       {
-        "backgroundColor": "transparent",
-        "borderColor": "rgba(121, 116, 126, 1)",
-        "borderRadius": 20,
-        "borderWidth": 0,
-        "elevation": 0,
-        "flex": 1,
-        "overflow": "hidden",
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="icon-button-container"
-  >
-    <View
-      accessibilityComponentType="button"
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityTraits="button"
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+    }
+    accessible={true}
+    centered={true}
+    collapsable={false}
+    focusable={true}
+    hitSlop={
+      {
+        "bottom": 6,
+        "left": 6,
+        "right": 6,
+        "top": 6,
       }
-      accessible={true}
-      centered={true}
-      collapsable={false}
-      focusable={true}
-      hitSlop={
+    }
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "bottom": 6,
-          "left": 6,
-          "right": 6,
-          "top": 6,
-        }
-      }
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
+          "overflow": "hidden",
+        },
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexGrow": 1,
+            "justifyContent": "center",
           },
-          [
-            {
-              "alignItems": "center",
-              "flexGrow": 1,
-              "justifyContent": "center",
-            },
-            undefined,
-          ],
-        ]
+          undefined,
+        ],
+      ]
+    }
+  >
+    <View
+      style={
+        {
+          "opacity": 1,
+        }
       }
-      testID="icon-button"
     >
       <Text
         accessibilityElementsHidden={true}
@@ -413,107 +360,214 @@ exports[`renders icon button with color 1`] = `
 </View>
 `;
 
-exports[`renders icon button with size 1`] = `
+exports[`renders icon button with custom border radius 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 23,
-      "height": 46,
-      "margin": 6,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {
+        "margin": 6,
+        "overflow": "hidden",
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-      "width": 46,
-    }
+      {
+        "backgroundColor": undefined,
+        "height": 52,
+        "width": 52,
+      },
+      {
+        "borderColor": "rgba(202, 196, 208, 1)",
+        "borderRadius": 26,
+        "borderWidth": 0,
+      },
+      {
+        "borderRadius": 0,
+      },
+    ]
   }
-  testID="icon-button-container-outer-layer"
 >
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    centered={true}
     collapsable={false}
-    style={
+    focusable={true}
+    hitSlop={
       {
-        "backgroundColor": "transparent",
-        "borderColor": "rgba(121, 116, 126, 1)",
-        "borderRadius": 23,
-        "borderWidth": 0,
-        "elevation": 0,
-        "flex": 1,
-        "overflow": "hidden",
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
+        "bottom": 6,
+        "left": 6,
+        "right": 6,
+        "top": 6,
       }
     }
-    testID="icon-button-container"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
+        {
+          "overflow": "hidden",
+        },
+        [
+          {
+            "alignItems": "center",
+            "flexGrow": 1,
+            "justifyContent": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    testID="icon-button"
   >
     <View
-      accessibilityComponentType="button"
-      accessibilityRole="button"
-      accessibilityState={
+      style={
         {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
+          "opacity": 1,
         }
       }
-      accessibilityTraits="button"
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
+    >
+      <Text
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no-hide-descendants"
+        pointerEvents="none"
+        selectable={false}
+        style={
+          [
+            {
+              "color": "rgba(73, 69, 79, 1)",
+              "fontSize": 36,
+            },
+            [
+              {
+                "lineHeight": 36,
+                "transform": [
+                  {
+                    "scaleX": 1,
+                  },
+                ],
+              },
+              {
+                "backgroundColor": "transparent",
+              },
+            ],
+          ]
         }
+      >
+        camera
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders icon button with size 1`] = `
+<View
+  collapsable={false}
+  style={
+    [
+      {
+        "margin": 6,
+        "overflow": "hidden",
+      },
+      {
+        "backgroundColor": undefined,
+        "height": 46,
+        "width": 46,
+      },
+      {
+        "borderColor": "rgba(202, 196, 208, 1)",
+        "borderRadius": 23,
+        "borderWidth": 0,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
-      accessible={true}
-      centered={true}
-      collapsable={false}
-      focusable={true}
-      hitSlop={
-        {
-          "bottom": 6,
-          "left": 6,
-          "right": 6,
-          "top": 6,
-        }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
+    }
+    accessible={true}
+    centered={true}
+    collapsable={false}
+    focusable={true}
+    hitSlop={
+      {
+        "bottom": 6,
+        "left": 6,
+        "right": 6,
+        "top": 6,
+      }
+    }
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
+        {
+          "overflow": "hidden",
+        },
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexGrow": 1,
+            "justifyContent": "center",
           },
-          [
-            {
-              "alignItems": "center",
-              "flexGrow": 1,
-              "justifyContent": "center",
-            },
-            undefined,
-          ],
-        ]
+          undefined,
+        ],
+      ]
+    }
+  >
+    <View
+      style={
+        {
+          "opacity": 1,
+        }
       }
-      testID="icon-button"
     >
       <Text
         accessibilityElementsHidden={true}
@@ -549,107 +603,214 @@ exports[`renders icon button with size 1`] = `
 </View>
 `;
 
-exports[`renders icon change animated 1`] = `
+exports[`renders icon button with small border radius 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "height": 40,
-      "margin": 6,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {
+        "margin": 6,
+        "overflow": "hidden",
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-      "width": 40,
-    }
+      {
+        "backgroundColor": undefined,
+        "height": 52,
+        "width": 52,
+      },
+      {
+        "borderColor": "rgba(202, 196, 208, 1)",
+        "borderRadius": 26,
+        "borderWidth": 0,
+      },
+      {
+        "borderRadius": 4,
+      },
+    ]
   }
-  testID="icon-button-container-outer-layer"
 >
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    centered={true}
     collapsable={false}
-    style={
+    focusable={true}
+    hitSlop={
       {
-        "backgroundColor": "transparent",
-        "borderColor": "rgba(121, 116, 126, 1)",
-        "borderRadius": 20,
-        "borderWidth": 0,
-        "elevation": 0,
-        "flex": 1,
-        "overflow": "hidden",
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
+        "bottom": 6,
+        "left": 6,
+        "right": 6,
+        "top": 6,
       }
     }
-    testID="icon-button-container"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
+        {
+          "overflow": "hidden",
+        },
+        [
+          {
+            "alignItems": "center",
+            "flexGrow": 1,
+            "justifyContent": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    testID="icon-button"
   >
     <View
-      accessibilityComponentType="button"
-      accessibilityRole="button"
-      accessibilityState={
+      style={
         {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
+          "opacity": 1,
         }
       }
-      accessibilityTraits="button"
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
+    >
+      <Text
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no-hide-descendants"
+        pointerEvents="none"
+        selectable={false}
+        style={
+          [
+            {
+              "color": "rgba(73, 69, 79, 1)",
+              "fontSize": 36,
+            },
+            [
+              {
+                "lineHeight": 36,
+                "transform": [
+                  {
+                    "scaleX": 1,
+                  },
+                ],
+              },
+              {
+                "backgroundColor": "transparent",
+              },
+            ],
+          ]
         }
+      >
+        camera
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders icon change animated 1`] = `
+<View
+  collapsable={false}
+  style={
+    [
+      {
+        "margin": 6,
+        "overflow": "hidden",
+      },
+      {
+        "backgroundColor": undefined,
+        "height": 40,
+        "width": 40,
+      },
+      {
+        "borderColor": "rgba(202, 196, 208, 1)",
+        "borderRadius": 20,
+        "borderWidth": 0,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
-      accessible={true}
-      centered={true}
-      collapsable={false}
-      focusable={true}
-      hitSlop={
-        {
-          "bottom": 6,
-          "left": 6,
-          "right": 6,
-          "top": 6,
-        }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
+    }
+    accessible={true}
+    centered={true}
+    collapsable={false}
+    focusable={true}
+    hitSlop={
+      {
+        "bottom": 6,
+        "left": 6,
+        "right": 6,
+        "top": 6,
+      }
+    }
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
+        {
+          "overflow": "hidden",
+        },
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexGrow": 1,
+            "justifyContent": "center",
           },
-          [
-            {
-              "alignItems": "center",
-              "flexGrow": 1,
-              "justifyContent": "center",
-            },
-            undefined,
-          ],
-        ]
+          undefined,
+        ],
+      ]
+    }
+  >
+    <View
+      style={
+        {
+          "opacity": 1,
+        }
       }
-      testID="icon-button"
     >
       <View
         style={
@@ -668,21 +829,24 @@ exports[`renders icon change animated 1`] = `
         <View
           collapsable={false}
           style={
-            {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "transform": [
-                {
-                  "rotate": "0deg",
-                },
-              ],
-            }
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "opacity": 1,
+                "transform": [
+                  {
+                    "rotate": "0deg",
+                  },
+                ],
+              },
+            ]
           }
-          testID="cross-fade-icon-current"
         >
           <Text
             accessibilityElementsHidden={true}
diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap
index 0857e59773..c01fcf856a 100644
--- a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap
@@ -5,12 +5,11 @@ exports[`renders expanded accordion 1`] = `
   <View
     style={
       {
-        "backgroundColor": "rgba(255, 251, 254, 1)",
+        "backgroundColor": "rgba(254, 247, 255, 1)",
       }
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -40,6 +39,7 @@ exports[`renders expanded accordion 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -90,7 +90,7 @@ exports[`renders expanded accordion 1`] = `
                   "textAlign": "left",
                 },
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontFamily": "System",
                   "fontWeight": "400",
                   "letterSpacing": 0,
@@ -226,7 +226,6 @@ exports[`renders expanded accordion 1`] = `
             undefined,
           ]
         }
-        testID="undefined-content"
       >
         <Text
           numberOfLines={1}
@@ -237,7 +236,7 @@ exports[`renders expanded accordion 1`] = `
                 "textAlign": "left",
               },
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
                 "fontFamily": "System",
                 "fontWeight": "400",
                 "letterSpacing": 0,
@@ -250,7 +249,7 @@ exports[`renders expanded accordion 1`] = `
                   "fontSize": 16,
                 },
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                 },
                 undefined,
               ],
@@ -270,12 +269,11 @@ exports[`renders list accordion with children 1`] = `
   <View
     style={
       {
-        "backgroundColor": "rgba(255, 251, 254, 1)",
+        "backgroundColor": "rgba(254, 247, 255, 1)",
       }
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -305,6 +303,7 @@ exports[`renders list accordion with children 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -402,7 +401,7 @@ exports[`renders list accordion with children 1`] = `
                   "textAlign": "left",
                 },
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontFamily": "System",
                   "fontWeight": "400",
                   "letterSpacing": 0,
@@ -415,7 +414,7 @@ exports[`renders list accordion with children 1`] = `
                     "fontSize": 16,
                   },
                   {
-                    "color": "rgba(28, 27, 31, 1)",
+                    "color": "rgba(29, 27, 32, 1)",
                   },
                   undefined,
                 ],
@@ -477,12 +476,11 @@ exports[`renders list accordion with custom title and description styles 1`] = `
   <View
     style={
       {
-        "backgroundColor": "rgba(255, 251, 254, 1)",
+        "backgroundColor": "rgba(254, 247, 255, 1)",
       }
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -512,6 +510,7 @@ exports[`renders list accordion with custom title and description styles 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -562,7 +561,7 @@ exports[`renders list accordion with custom title and description styles 1`] = `
                   "textAlign": "left",
                 },
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontFamily": "System",
                   "fontWeight": "400",
                   "letterSpacing": 0,
@@ -575,7 +574,7 @@ exports[`renders list accordion with custom title and description styles 1`] = `
                     "fontSize": 16,
                   },
                   {
-                    "color": "rgba(28, 27, 31, 1)",
+                    "color": "rgba(29, 27, 32, 1)",
                   },
                   {
                     "color": "#f44336",
@@ -596,7 +595,7 @@ exports[`renders list accordion with custom title and description styles 1`] = `
                   "textAlign": "left",
                 },
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontFamily": "System",
                   "fontWeight": "400",
                   "letterSpacing": 0,
@@ -677,12 +676,11 @@ exports[`renders list accordion with left items 1`] = `
   <View
     style={
       {
-        "backgroundColor": "rgba(255, 251, 254, 1)",
+        "backgroundColor": "rgba(254, 247, 255, 1)",
       }
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -712,6 +710,7 @@ exports[`renders list accordion with left items 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -809,7 +808,7 @@ exports[`renders list accordion with left items 1`] = `
                   "textAlign": "left",
                 },
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontFamily": "System",
                   "fontWeight": "400",
                   "letterSpacing": 0,
@@ -822,7 +821,7 @@ exports[`renders list accordion with left items 1`] = `
                     "fontSize": 16,
                   },
                   {
-                    "color": "rgba(28, 27, 31, 1)",
+                    "color": "rgba(29, 27, 32, 1)",
                   },
                   undefined,
                 ],
@@ -884,12 +883,11 @@ exports[`renders multiline list accordion 1`] = `
   <View
     style={
       {
-        "backgroundColor": "rgba(255, 251, 254, 1)",
+        "backgroundColor": "rgba(254, 247, 255, 1)",
       }
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -919,6 +917,7 @@ exports[`renders multiline list accordion 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -969,7 +968,7 @@ exports[`renders multiline list accordion 1`] = `
                   "textAlign": "left",
                 },
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontFamily": "System",
                   "fontWeight": "400",
                   "letterSpacing": 0,
@@ -982,7 +981,7 @@ exports[`renders multiline list accordion 1`] = `
                     "fontSize": 16,
                   },
                   {
-                    "color": "rgba(28, 27, 31, 1)",
+                    "color": "rgba(29, 27, 32, 1)",
                   },
                   undefined,
                 ],
@@ -1001,7 +1000,7 @@ exports[`renders multiline list accordion 1`] = `
                   "textAlign": "left",
                 },
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontFamily": "System",
                   "fontWeight": "400",
                   "letterSpacing": 0,
diff --git a/src/components/__tests__/__snapshots__/ListImage.test.tsx.snap b/src/components/__tests__/__snapshots__/ListImage.test.tsx.snap
index 7aff9530b8..927779644c 100644
--- a/src/components/__tests__/__snapshots__/ListImage.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListImage.test.tsx.snap
@@ -1,5 +1,46 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders ListImage with \`image\` variant 1`] = `
+<Image
+  accessibilityIgnoresInvertColors={true}
+  source={
+    {
+      "uri": "https://www.someurl.com/apple",
+    }
+  }
+  style={
+    [
+      undefined,
+      {
+        "height": 56,
+        "width": 56,
+      },
+    ]
+  }
+/>
+`;
+
+exports[`renders ListImage with \`video\` variant 1`] = `
+<Image
+  accessibilityIgnoresInvertColors={true}
+  source={
+    {
+      "uri": "https://www.someurl.com/apple",
+    }
+  }
+  style={
+    [
+      undefined,
+      {
+        "height": 64,
+        "marginLeft": 0,
+        "width": 114,
+      },
+    ]
+  }
+/>
+`;
+
 exports[`renders ListImage with default variant & styles 1`] = `
 <Image
   accessibilityIgnoresInvertColors={true}
@@ -20,7 +61,6 @@ exports[`renders ListImage with default variant & styles 1`] = `
       },
     ]
   }
-  testID="list-image"
 />
 `;
 
@@ -41,6 +81,5 @@ exports[`renders ListImage with default variant 1`] = `
       },
     ]
   }
-  testID="list-image"
 />
 `;
diff --git a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
index 1f8c683d3a..e63259b5ef 100644
--- a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
@@ -1,5 +1,149 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders list item with custom content style 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      false,
+      [
+        {
+          "paddingRight": 24,
+          "paddingVertical": 8,
+        },
+        undefined,
+      ],
+    ]
+  }
+  testID="list-item"
+>
+  <View
+    style={
+      [
+        {
+          "flexDirection": "row",
+          "marginVertical": 6,
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "paddingLeft": 16,
+          },
+          {
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "justifyContent": "center",
+          },
+          {
+            "paddingLeft": 0,
+          },
+        ]
+      }
+    >
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "fontFamily": "System",
+              "fontWeight": "400",
+              "letterSpacing": 0,
+            },
+            {
+              "writingDirection": "ltr",
+            },
+            [
+              {
+                "fontSize": 16,
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        First Item
+      </Text>
+      <Text
+        numberOfLines={2}
+        onTextLayout={[Function]}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "fontFamily": "System",
+              "fontWeight": "400",
+              "letterSpacing": 0,
+            },
+            {
+              "writingDirection": "ltr",
+            },
+            [
+              {
+                "fontSize": 14,
+              },
+              {
+                "color": "rgba(73, 69, 79, 1)",
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        Item description
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
 exports[`renders list item with custom description 1`] = `
 <View
   accessibilityState={
@@ -71,7 +215,6 @@ exports[`renders list item with custom description 1`] = `
           undefined,
         ]
       }
-      testID="list-item-content"
     >
       <Text
         numberOfLines={1}
@@ -82,7 +225,7 @@ exports[`renders list item with custom description 1`] = `
               "textAlign": "left",
             },
             {
-              "color": "rgba(28, 27, 31, 1)",
+              "color": "rgba(29, 27, 32, 1)",
               "fontFamily": "System",
               "fontWeight": "400",
               "letterSpacing": 0,
@@ -95,7 +238,7 @@ exports[`renders list item with custom description 1`] = `
                 "fontSize": 16,
               },
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
               },
               undefined,
             ],
@@ -120,199 +263,257 @@ exports[`renders list item with custom description 1`] = `
           <View
             collapsable={false}
             style={
-              {
-                "backgroundColor": "rgba(232, 222, 248, 1)",
-                "borderRadius": 8,
-                "shadowColor": "#000",
-                "shadowOffset": {
-                  "height": 0,
-                  "width": 0,
+              [
+                {},
+                {
+                  "borderStyle": "solid",
+                  "borderWidth": 0.5,
+                  "flexDirection": "column",
+                },
+                {
+                  "borderWidth": 1,
                 },
-                "shadowOpacity": 0,
-                "shadowRadius": 0,
-              }
-            }
-            testID="chip-container-outer-layer"
-          >
-            <View
-              collapsable={false}
-              style={
                 {
-                  "backgroundColor": "rgba(232, 222, 248, 1)",
                   "borderColor": "transparent",
+                },
+                undefined,
+                {},
+                {
+                  "backgroundColor": "rgba(232, 222, 248, 1)",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
                   "borderRadius": 8,
-                  "borderStyle": "solid",
-                  "borderWidth": 1,
-                  "flex": undefined,
-                  "flexDirection": "column",
-                  "shadowColor": "#000",
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
                   "shadowOffset": {
                     "height": 0,
                     "width": 0,
                   },
                   "shadowOpacity": 0,
                   "shadowRadius": 0,
+                },
+              ]
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                [
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  {
+                    "pointerEvents": "none",
+                  },
+                  {},
+                  {},
+                  {
+                    "backgroundColor": "rgba(232, 222, 248, 1)",
+                  },
+                  {
+                    "borderBottomEndRadius": undefined,
+                    "borderBottomLeftRadius": undefined,
+                    "borderBottomRightRadius": undefined,
+                    "borderBottomStartRadius": undefined,
+                    "borderCurve": "continuous",
+                    "borderEndEndRadius": undefined,
+                    "borderEndStartRadius": undefined,
+                    "borderRadius": 8,
+                    "borderStartEndRadius": undefined,
+                    "borderStartStartRadius": undefined,
+                    "borderTopEndRadius": undefined,
+                    "borderTopLeftRadius": undefined,
+                    "borderTopRightRadius": undefined,
+                    "borderTopStartRadius": undefined,
+                  },
+                  {
+                    "shadowColor": "rgba(0, 0, 0, 1)",
+                    "shadowOffset": {
+                      "height": 0,
+                      "width": 0,
+                    },
+                    "shadowOpacity": 0,
+                    "shadowRadius": 0,
+                  },
+                ]
+              }
+            />
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": false,
                 }
               }
-              testID="chip-container"
-            >
-              <View
-                accessibilityRole="button"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": false,
-                    "expanded": undefined,
-                    "selected": false,
-                  }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
                 }
-                accessibilityValue={
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              role="button"
+              style={
+                [
                   {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 8,
+                    },
+                    {
+                      "width": "100%",
+                    },
+                  ],
+                ]
+              }
+            >
+              <View
                 style={
                   [
                     {
-                      "overflow": "hidden",
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "paddingLeft": 4,
+                      "position": "relative",
+                    },
+                    {
+                      "paddingLeft": 0,
+                    },
+                    {
+                      "opacity": 1,
+                    },
+                    {
+                      "paddingRight": 0,
                     },
-                    [
-                      {
-                        "borderRadius": 8,
-                      },
-                      {
-                        "width": "100%",
-                      },
-                    ],
                   ]
                 }
-                testID="chip"
               >
                 <View
                   style={
                     [
                       {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "paddingLeft": 4,
-                        "position": "relative",
-                      },
-                      {
-                        "paddingLeft": 0,
+                        "alignSelf": "center",
+                        "padding": 4,
                       },
                       {
+                        "paddingLeft": 8,
                         "paddingRight": 0,
                       },
+                      null,
                     ]
                   }
                 >
-                  <View
+                  <Text
+                    accessibilityElementsHidden={true}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       [
                         {
-                          "alignSelf": "center",
-                          "padding": 4,
-                        },
-                        {
-                          "paddingLeft": 8,
-                          "paddingRight": 0,
+                          "color": "rgba(103, 80, 164, 1)",
+                          "fontSize": 18,
                         },
-                        null,
-                      ]
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
                         [
                           {
-                            "color": "rgba(103, 80, 164, 1)",
-                            "fontSize": 18,
+                            "lineHeight": 18,
+                            "transform": [
+                              {
+                                "scaleX": 1,
+                              },
+                            ],
                           },
-                          [
-                            {
-                              "lineHeight": 18,
-                              "transform": [
-                                {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      file-pdf-box
-                    </Text>
-                  </View>
-                  <Text
-                    numberOfLines={1}
-                    selectable={false}
-                    style={
+                          {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
+                      ]
+                    }
+                  >
+                    file-pdf-box
+                  </Text>
+                </View>
+                <Text
+                  numberOfLines={1}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(28, 27, 31, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
                         },
                         [
                           {
+                            "marginVertical": 6,
+                            "textAlignVertical": "center",
+                          },
+                          {
+                            "color": "rgba(29, 25, 43, 1)",
                             "fontFamily": "System",
                             "fontSize": 14,
                             "fontWeight": "500",
                             "letterSpacing": 0.1,
                             "lineHeight": 20,
                           },
-                          [
-                            {
-                              "marginVertical": 6,
-                              "textAlignVertical": "center",
-                            },
-                            {
-                              "color": "rgba(29, 25, 43, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 14,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.1,
-                              "lineHeight": 20,
-                            },
-                            {
-                              "marginLeft": 8,
-                              "marginRight": 16,
-                            },
-                            undefined,
-                          ],
+                          {
+                            "marginLeft": 8,
+                            "marginRight": 16,
+                          },
+                          undefined,
                         ],
-                      ]
-                    }
-                  >
-                    DOCS.pdf
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  DOCS.pdf
+                </Text>
               </View>
             </View>
           </View>
@@ -394,7 +595,6 @@ exports[`renders list item with custom title and description styles 1`] = `
           undefined,
         ]
       }
-      testID="list-item-content"
     >
       <Text
         numberOfLines={1}
@@ -405,7 +605,7 @@ exports[`renders list item with custom title and description styles 1`] = `
               "textAlign": "left",
             },
             {
-              "color": "rgba(28, 27, 31, 1)",
+              "color": "rgba(29, 27, 32, 1)",
               "fontFamily": "System",
               "fontWeight": "400",
               "letterSpacing": 0,
@@ -418,7 +618,7 @@ exports[`renders list item with custom title and description styles 1`] = `
                 "fontSize": 16,
               },
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
               },
               {
                 "fontSize": 20,
@@ -439,7 +639,7 @@ exports[`renders list item with custom title and description styles 1`] = `
               "textAlign": "left",
             },
             {
-              "color": "rgba(28, 27, 31, 1)",
+              "color": "rgba(29, 27, 32, 1)",
               "fontFamily": "System",
               "fontWeight": "400",
               "letterSpacing": 0,
@@ -542,7 +742,6 @@ exports[`renders list item with left and right items 1`] = `
           undefined,
         ]
       }
-      testID="list-item-content"
     >
       <Text
         numberOfLines={1}
@@ -553,7 +752,7 @@ exports[`renders list item with left and right items 1`] = `
               "textAlign": "left",
             },
             {
-              "color": "rgba(28, 27, 31, 1)",
+              "color": "rgba(29, 27, 32, 1)",
               "fontFamily": "System",
               "fontWeight": "400",
               "letterSpacing": 0,
@@ -566,7 +765,7 @@ exports[`renders list item with left and right items 1`] = `
                 "fontSize": 16,
               },
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
               },
               undefined,
             ],
@@ -585,7 +784,7 @@ exports[`renders list item with left and right items 1`] = `
               "textAlign": "left",
             },
             {
-              "color": "rgba(28, 27, 31, 1)",
+              "color": "rgba(29, 27, 32, 1)",
               "fontFamily": "System",
               "fontWeight": "400",
               "letterSpacing": 0,
@@ -776,7 +975,6 @@ exports[`renders list item with left item 1`] = `
           undefined,
         ]
       }
-      testID="list-item-content"
     >
       <Text
         numberOfLines={1}
@@ -787,7 +985,7 @@ exports[`renders list item with left item 1`] = `
               "textAlign": "left",
             },
             {
-              "color": "rgba(28, 27, 31, 1)",
+              "color": "rgba(29, 27, 32, 1)",
               "fontFamily": "System",
               "fontWeight": "400",
               "letterSpacing": 0,
@@ -800,7 +998,7 @@ exports[`renders list item with left item 1`] = `
                 "fontSize": 16,
               },
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
               },
               undefined,
             ],
@@ -885,7 +1083,6 @@ exports[`renders list item with right item 1`] = `
           undefined,
         ]
       }
-      testID="list-item-content"
     >
       <Text
         numberOfLines={1}
@@ -896,7 +1093,7 @@ exports[`renders list item with right item 1`] = `
               "textAlign": "left",
             },
             {
-              "color": "rgba(28, 27, 31, 1)",
+              "color": "rgba(29, 27, 32, 1)",
               "fontFamily": "System",
               "fontWeight": "400",
               "letterSpacing": 0,
@@ -909,7 +1106,7 @@ exports[`renders list item with right item 1`] = `
                 "fontSize": 16,
               },
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
               },
               undefined,
             ],
@@ -997,7 +1194,6 @@ exports[`renders list item with title and description 1`] = `
           undefined,
         ]
       }
-      testID="list-item-content"
     >
       <Text
         numberOfLines={1}
@@ -1008,7 +1204,7 @@ exports[`renders list item with title and description 1`] = `
               "textAlign": "left",
             },
             {
-              "color": "rgba(28, 27, 31, 1)",
+              "color": "rgba(29, 27, 32, 1)",
               "fontFamily": "System",
               "fontWeight": "400",
               "letterSpacing": 0,
@@ -1021,7 +1217,7 @@ exports[`renders list item with title and description 1`] = `
                 "fontSize": 16,
               },
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
               },
               undefined,
             ],
@@ -1040,7 +1236,7 @@ exports[`renders list item with title and description 1`] = `
               "textAlign": "left",
             },
             {
-              "color": "rgba(28, 27, 31, 1)",
+              "color": "rgba(29, 27, 32, 1)",
               "fontFamily": "System",
               "fontWeight": "400",
               "letterSpacing": 0,
@@ -1138,7 +1334,6 @@ exports[`renders with a description with typeof number 1`] = `
           undefined,
         ]
       }
-      testID="list-item-content"
     >
       <Text
         numberOfLines={1}
@@ -1149,7 +1344,7 @@ exports[`renders with a description with typeof number 1`] = `
               "textAlign": "left",
             },
             {
-              "color": "rgba(28, 27, 31, 1)",
+              "color": "rgba(29, 27, 32, 1)",
               "fontFamily": "System",
               "fontWeight": "400",
               "letterSpacing": 0,
@@ -1162,7 +1357,7 @@ exports[`renders with a description with typeof number 1`] = `
                 "fontSize": 16,
               },
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
               },
               {
                 "fontSize": 20,
@@ -1183,7 +1378,7 @@ exports[`renders with a description with typeof number 1`] = `
               "textAlign": "left",
             },
             {
-              "color": "rgba(28, 27, 31, 1)",
+              "color": "rgba(29, 27, 32, 1)",
               "fontFamily": "System",
               "fontWeight": "400",
               "letterSpacing": 0,
diff --git a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap
index b5bc07c4b8..a64f2e3662 100644
--- a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap
@@ -16,54 +16,86 @@ exports[`renders list section with custom title style 1`] = `
         "scale": 1,
       },
       "colors": {
-        "backdrop": "rgba(50, 47, 55, 0.4)",
-        "background": "rgba(255, 251, 254, 1)",
+        "background": "rgba(254, 247, 255, 1)",
         "elevation": {
           "level0": "transparent",
-          "level1": "rgb(247, 243, 249)",
-          "level2": "rgb(243, 237, 246)",
-          "level3": "rgb(238, 232, 244)",
-          "level4": "rgb(236, 230, 243)",
-          "level5": "rgb(233, 227, 241)",
+          "level1": "rgba(247, 242, 250, 1)",
+          "level2": "rgba(243, 237, 247, 1)",
+          "level3": "rgba(236, 230, 240, 1)",
+          "level4": "rgba(236, 230, 240, 1)",
+          "level5": "rgba(230, 224, 233, 1)",
         },
         "error": "rgba(179, 38, 30, 1)",
         "errorContainer": "rgba(249, 222, 220, 1)",
-        "inverseOnSurface": "rgba(244, 239, 244, 1)",
+        "inverseOnSurface": "rgba(245, 239, 247, 1)",
         "inversePrimary": "rgba(208, 188, 255, 1)",
-        "inverseSurface": "rgba(49, 48, 51, 1)",
-        "onBackground": "rgba(28, 27, 31, 1)",
+        "inverseSurface": "rgba(50, 47, 53, 1)",
+        "onBackground": "rgba(29, 27, 32, 1)",
         "onError": "rgba(255, 255, 255, 1)",
         "onErrorContainer": "rgba(65, 14, 11, 1)",
         "onPrimary": "rgba(255, 255, 255, 1)",
         "onPrimaryContainer": "rgba(33, 0, 93, 1)",
+        "onPrimaryFixed": "rgba(33, 0, 93, 1)",
+        "onPrimaryFixedVariant": "rgba(79, 55, 139, 1)",
         "onSecondary": "rgba(255, 255, 255, 1)",
         "onSecondaryContainer": "rgba(29, 25, 43, 1)",
-        "onSurface": "rgba(28, 27, 31, 1)",
-        "onSurfaceDisabled": "rgba(28, 27, 31, 0.38)",
+        "onSecondaryFixed": "rgba(29, 25, 43, 1)",
+        "onSecondaryFixedVariant": "rgba(74, 68, 88, 1)",
+        "onSurface": "rgba(29, 27, 32, 1)",
         "onSurfaceVariant": "rgba(73, 69, 79, 1)",
         "onTertiary": "rgba(255, 255, 255, 1)",
         "onTertiaryContainer": "rgba(49, 17, 29, 1)",
+        "onTertiaryFixed": "rgba(49, 17, 29, 1)",
+        "onTertiaryFixedVariant": "rgba(99, 59, 72, 1)",
         "outline": "rgba(121, 116, 126, 1)",
         "outlineVariant": "rgba(202, 196, 208, 1)",
         "primary": "rgba(103, 80, 164, 1)",
         "primaryContainer": "rgba(234, 221, 255, 1)",
+        "primaryFixed": "rgba(234, 221, 255, 1)",
+        "primaryFixedDim": "rgba(208, 188, 255, 1)",
         "scrim": "rgba(0, 0, 0, 1)",
         "secondary": "rgba(98, 91, 113, 1)",
         "secondaryContainer": "rgba(232, 222, 248, 1)",
+        "secondaryFixed": "rgba(232, 222, 248, 1)",
+        "secondaryFixedDim": "rgba(204, 194, 220, 1)",
         "shadow": "rgba(0, 0, 0, 1)",
-        "surface": "rgba(255, 251, 254, 1)",
-        "surfaceDisabled": "rgba(28, 27, 31, 0.12)",
+        "stateLayerPressed": "rgba(29, 27, 32, 0.1)",
+        "surface": "rgba(254, 247, 255, 1)",
+        "surfaceBright": "rgba(254, 247, 255, 1)",
+        "surfaceContainer": "rgba(243, 237, 247, 1)",
+        "surfaceContainerHigh": "rgba(236, 230, 240, 1)",
+        "surfaceContainerHighest": "rgba(230, 224, 233, 1)",
+        "surfaceContainerLow": "rgba(247, 242, 250, 1)",
+        "surfaceContainerLowest": "rgba(255, 255, 255, 1)",
+        "surfaceDim": "rgba(222, 216, 225, 1)",
         "surfaceVariant": "rgba(231, 224, 236, 1)",
         "tertiary": "rgba(125, 82, 96, 1)",
         "tertiaryContainer": "rgba(255, 216, 228, 1)",
+        "tertiaryFixed": "rgba(255, 216, 228, 1)",
+        "tertiaryFixedDim": "rgba(239, 184, 200, 1)",
       },
       "dark": false,
+      "elevation": {
+        "level0": 0,
+        "level1": 1,
+        "level2": 2,
+        "level3": 3,
+        "level4": 4,
+        "level5": 5,
+      },
       "fonts": {
         "bodyLarge": {
           "fontFamily": "System",
           "fontSize": 16,
           "fontWeight": "400",
-          "letterSpacing": 0.15,
+          "letterSpacing": 0.5,
+          "lineHeight": 24,
+        },
+        "bodyLargeEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 16,
+          "fontWeight": "500",
+          "letterSpacing": 0.5,
           "lineHeight": 24,
         },
         "bodyMedium": {
@@ -73,6 +105,13 @@ exports[`renders list section with custom title style 1`] = `
           "letterSpacing": 0.25,
           "lineHeight": 20,
         },
+        "bodyMediumEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 14,
+          "fontWeight": "500",
+          "letterSpacing": 0.25,
+          "lineHeight": 20,
+        },
         "bodySmall": {
           "fontFamily": "System",
           "fontSize": 12,
@@ -80,6 +119,13 @@ exports[`renders list section with custom title style 1`] = `
           "letterSpacing": 0.4,
           "lineHeight": 16,
         },
+        "bodySmallEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 12,
+          "fontWeight": "500",
+          "letterSpacing": 0.4,
+          "lineHeight": 16,
+        },
         "default": {
           "fontFamily": "System",
           "fontWeight": "400",
@@ -89,7 +135,14 @@ exports[`renders list section with custom title style 1`] = `
           "fontFamily": "System",
           "fontSize": 57,
           "fontWeight": "400",
-          "letterSpacing": 0,
+          "letterSpacing": -0.25,
+          "lineHeight": 64,
+        },
+        "displayLargeEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 57,
+          "fontWeight": "500",
+          "letterSpacing": -0.25,
           "lineHeight": 64,
         },
         "displayMedium": {
@@ -99,6 +152,13 @@ exports[`renders list section with custom title style 1`] = `
           "letterSpacing": 0,
           "lineHeight": 52,
         },
+        "displayMediumEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 45,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 52,
+        },
         "displaySmall": {
           "fontFamily": "System",
           "fontSize": 36,
@@ -106,6 +166,13 @@ exports[`renders list section with custom title style 1`] = `
           "letterSpacing": 0,
           "lineHeight": 44,
         },
+        "displaySmallEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 36,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 44,
+        },
         "headlineLarge": {
           "fontFamily": "System",
           "fontSize": 32,
@@ -113,6 +180,13 @@ exports[`renders list section with custom title style 1`] = `
           "letterSpacing": 0,
           "lineHeight": 40,
         },
+        "headlineLargeEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 32,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 40,
+        },
         "headlineMedium": {
           "fontFamily": "System",
           "fontSize": 28,
@@ -120,6 +194,13 @@ exports[`renders list section with custom title style 1`] = `
           "letterSpacing": 0,
           "lineHeight": 36,
         },
+        "headlineMediumEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 28,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 36,
+        },
         "headlineSmall": {
           "fontFamily": "System",
           "fontSize": 24,
@@ -127,6 +208,13 @@ exports[`renders list section with custom title style 1`] = `
           "letterSpacing": 0,
           "lineHeight": 32,
         },
+        "headlineSmallEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 24,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 32,
+        },
         "labelLarge": {
           "fontFamily": "System",
           "fontSize": 14,
@@ -134,6 +222,13 @@ exports[`renders list section with custom title style 1`] = `
           "letterSpacing": 0.1,
           "lineHeight": 20,
         },
+        "labelLargeEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 14,
+          "fontWeight": "700",
+          "letterSpacing": 0.1,
+          "lineHeight": 20,
+        },
         "labelMedium": {
           "fontFamily": "System",
           "fontSize": 12,
@@ -141,6 +236,13 @@ exports[`renders list section with custom title style 1`] = `
           "letterSpacing": 0.5,
           "lineHeight": 16,
         },
+        "labelMediumEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 12,
+          "fontWeight": "700",
+          "letterSpacing": 0.5,
+          "lineHeight": 16,
+        },
         "labelSmall": {
           "fontFamily": "System",
           "fontSize": 11,
@@ -148,6 +250,13 @@ exports[`renders list section with custom title style 1`] = `
           "letterSpacing": 0.5,
           "lineHeight": 16,
         },
+        "labelSmallEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 11,
+          "fontWeight": "700",
+          "letterSpacing": 0.5,
+          "lineHeight": 16,
+        },
         "titleLarge": {
           "fontFamily": "System",
           "fontSize": 22,
@@ -155,6 +264,13 @@ exports[`renders list section with custom title style 1`] = `
           "letterSpacing": 0,
           "lineHeight": 28,
         },
+        "titleLargeEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 22,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 28,
+        },
         "titleMedium": {
           "fontFamily": "System",
           "fontSize": 16,
@@ -162,6 +278,13 @@ exports[`renders list section with custom title style 1`] = `
           "letterSpacing": 0.15,
           "lineHeight": 24,
         },
+        "titleMediumEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 16,
+          "fontWeight": "700",
+          "letterSpacing": 0.15,
+          "lineHeight": 24,
+        },
         "titleSmall": {
           "fontFamily": "System",
           "fontSize": 14,
@@ -169,10 +292,122 @@ exports[`renders list section with custom title style 1`] = `
           "letterSpacing": 0.1,
           "lineHeight": 20,
         },
+        "titleSmallEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 14,
+          "fontWeight": "700",
+          "letterSpacing": 0.1,
+          "lineHeight": 20,
+        },
+      },
+      "motion": {
+        "duration": {
+          "extraLong1": 700,
+          "extraLong2": 800,
+          "extraLong3": 900,
+          "extraLong4": 1000,
+          "long1": 450,
+          "long2": 500,
+          "long3": 550,
+          "long4": 600,
+          "medium1": 250,
+          "medium2": 300,
+          "medium3": 350,
+          "medium4": 400,
+          "short1": 50,
+          "short2": 100,
+          "short3": 150,
+          "short4": 200,
+        },
+        "easing": {
+          "emphasized": [
+            0.2,
+            0,
+            0,
+            1,
+          ],
+          "emphasizedAccelerate": [
+            0.3,
+            0,
+            0.8,
+            0.15,
+          ],
+          "emphasizedDecelerate": [
+            0.05,
+            0.7,
+            0.1,
+            1,
+          ],
+          "linear": [
+            0,
+            0,
+            1,
+            1,
+          ],
+          "standard": [
+            0.2,
+            0,
+            0,
+            1,
+          ],
+          "standardAccelerate": [
+            0.3,
+            0,
+            1,
+            1,
+          ],
+          "standardDecelerate": [
+            0,
+            0,
+            0,
+            1,
+          ],
+        },
+        "spring": {
+          "default": {
+            "effects": {
+              "damping": 1,
+              "stiffness": 1600,
+            },
+            "spatial": {
+              "damping": 0.8,
+              "stiffness": 380,
+            },
+          },
+          "fast": {
+            "effects": {
+              "damping": 1,
+              "stiffness": 3800,
+            },
+            "spatial": {
+              "damping": 0.6,
+              "stiffness": 800,
+            },
+          },
+          "slow": {
+            "effects": {
+              "damping": 1,
+              "stiffness": 800,
+            },
+            "spatial": {
+              "damping": 0.8,
+              "stiffness": 200,
+            },
+          },
+        },
+      },
+      "shapes": {
+        "corner": {
+          "extraExtraLarge": 48,
+          "extraLarge": 28,
+          "extraLargeIncreased": 32,
+          "extraSmall": 4,
+          "large": 16,
+          "largeIncreased": 20,
+          "medium": 12,
+          "small": 8,
+        },
       },
-      "isV3": true,
-      "roundness": 4,
-      "version": 3,
     }
   }
 >
@@ -184,7 +419,7 @@ exports[`renders list section with custom title style 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "writingDirection": "ltr",
         },
         [
@@ -335,7 +570,6 @@ exports[`renders list section with custom title style 1`] = `
             undefined,
           ]
         }
-        testID="list-item-content"
       >
         <Text
           numberOfLines={1}
@@ -346,7 +580,7 @@ exports[`renders list section with custom title style 1`] = `
                 "textAlign": "left",
               },
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
                 "fontFamily": "System",
                 "fontWeight": "400",
                 "letterSpacing": 0,
@@ -359,7 +593,7 @@ exports[`renders list section with custom title style 1`] = `
                   "fontSize": 16,
                 },
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                 },
                 undefined,
               ],
@@ -488,7 +722,6 @@ exports[`renders list section with custom title style 1`] = `
             undefined,
           ]
         }
-        testID="list-item-content"
       >
         <Text
           numberOfLines={1}
@@ -499,7 +732,7 @@ exports[`renders list section with custom title style 1`] = `
                 "textAlign": "left",
               },
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
                 "fontFamily": "System",
                 "fontWeight": "400",
                 "letterSpacing": 0,
@@ -512,7 +745,7 @@ exports[`renders list section with custom title style 1`] = `
                   "fontSize": 16,
                 },
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                 },
                 undefined,
               ],
@@ -543,54 +776,86 @@ exports[`renders list section with subheader 1`] = `
         "scale": 1,
       },
       "colors": {
-        "backdrop": "rgba(50, 47, 55, 0.4)",
-        "background": "rgba(255, 251, 254, 1)",
+        "background": "rgba(254, 247, 255, 1)",
         "elevation": {
           "level0": "transparent",
-          "level1": "rgb(247, 243, 249)",
-          "level2": "rgb(243, 237, 246)",
-          "level3": "rgb(238, 232, 244)",
-          "level4": "rgb(236, 230, 243)",
-          "level5": "rgb(233, 227, 241)",
+          "level1": "rgba(247, 242, 250, 1)",
+          "level2": "rgba(243, 237, 247, 1)",
+          "level3": "rgba(236, 230, 240, 1)",
+          "level4": "rgba(236, 230, 240, 1)",
+          "level5": "rgba(230, 224, 233, 1)",
         },
         "error": "rgba(179, 38, 30, 1)",
         "errorContainer": "rgba(249, 222, 220, 1)",
-        "inverseOnSurface": "rgba(244, 239, 244, 1)",
+        "inverseOnSurface": "rgba(245, 239, 247, 1)",
         "inversePrimary": "rgba(208, 188, 255, 1)",
-        "inverseSurface": "rgba(49, 48, 51, 1)",
-        "onBackground": "rgba(28, 27, 31, 1)",
+        "inverseSurface": "rgba(50, 47, 53, 1)",
+        "onBackground": "rgba(29, 27, 32, 1)",
         "onError": "rgba(255, 255, 255, 1)",
         "onErrorContainer": "rgba(65, 14, 11, 1)",
         "onPrimary": "rgba(255, 255, 255, 1)",
         "onPrimaryContainer": "rgba(33, 0, 93, 1)",
+        "onPrimaryFixed": "rgba(33, 0, 93, 1)",
+        "onPrimaryFixedVariant": "rgba(79, 55, 139, 1)",
         "onSecondary": "rgba(255, 255, 255, 1)",
         "onSecondaryContainer": "rgba(29, 25, 43, 1)",
-        "onSurface": "rgba(28, 27, 31, 1)",
-        "onSurfaceDisabled": "rgba(28, 27, 31, 0.38)",
+        "onSecondaryFixed": "rgba(29, 25, 43, 1)",
+        "onSecondaryFixedVariant": "rgba(74, 68, 88, 1)",
+        "onSurface": "rgba(29, 27, 32, 1)",
         "onSurfaceVariant": "rgba(73, 69, 79, 1)",
         "onTertiary": "rgba(255, 255, 255, 1)",
         "onTertiaryContainer": "rgba(49, 17, 29, 1)",
+        "onTertiaryFixed": "rgba(49, 17, 29, 1)",
+        "onTertiaryFixedVariant": "rgba(99, 59, 72, 1)",
         "outline": "rgba(121, 116, 126, 1)",
         "outlineVariant": "rgba(202, 196, 208, 1)",
         "primary": "rgba(103, 80, 164, 1)",
         "primaryContainer": "rgba(234, 221, 255, 1)",
+        "primaryFixed": "rgba(234, 221, 255, 1)",
+        "primaryFixedDim": "rgba(208, 188, 255, 1)",
         "scrim": "rgba(0, 0, 0, 1)",
         "secondary": "rgba(98, 91, 113, 1)",
         "secondaryContainer": "rgba(232, 222, 248, 1)",
+        "secondaryFixed": "rgba(232, 222, 248, 1)",
+        "secondaryFixedDim": "rgba(204, 194, 220, 1)",
         "shadow": "rgba(0, 0, 0, 1)",
-        "surface": "rgba(255, 251, 254, 1)",
-        "surfaceDisabled": "rgba(28, 27, 31, 0.12)",
+        "stateLayerPressed": "rgba(29, 27, 32, 0.1)",
+        "surface": "rgba(254, 247, 255, 1)",
+        "surfaceBright": "rgba(254, 247, 255, 1)",
+        "surfaceContainer": "rgba(243, 237, 247, 1)",
+        "surfaceContainerHigh": "rgba(236, 230, 240, 1)",
+        "surfaceContainerHighest": "rgba(230, 224, 233, 1)",
+        "surfaceContainerLow": "rgba(247, 242, 250, 1)",
+        "surfaceContainerLowest": "rgba(255, 255, 255, 1)",
+        "surfaceDim": "rgba(222, 216, 225, 1)",
         "surfaceVariant": "rgba(231, 224, 236, 1)",
         "tertiary": "rgba(125, 82, 96, 1)",
         "tertiaryContainer": "rgba(255, 216, 228, 1)",
+        "tertiaryFixed": "rgba(255, 216, 228, 1)",
+        "tertiaryFixedDim": "rgba(239, 184, 200, 1)",
       },
       "dark": false,
+      "elevation": {
+        "level0": 0,
+        "level1": 1,
+        "level2": 2,
+        "level3": 3,
+        "level4": 4,
+        "level5": 5,
+      },
       "fonts": {
         "bodyLarge": {
           "fontFamily": "System",
           "fontSize": 16,
           "fontWeight": "400",
-          "letterSpacing": 0.15,
+          "letterSpacing": 0.5,
+          "lineHeight": 24,
+        },
+        "bodyLargeEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 16,
+          "fontWeight": "500",
+          "letterSpacing": 0.5,
           "lineHeight": 24,
         },
         "bodyMedium": {
@@ -600,6 +865,13 @@ exports[`renders list section with subheader 1`] = `
           "letterSpacing": 0.25,
           "lineHeight": 20,
         },
+        "bodyMediumEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 14,
+          "fontWeight": "500",
+          "letterSpacing": 0.25,
+          "lineHeight": 20,
+        },
         "bodySmall": {
           "fontFamily": "System",
           "fontSize": 12,
@@ -607,6 +879,13 @@ exports[`renders list section with subheader 1`] = `
           "letterSpacing": 0.4,
           "lineHeight": 16,
         },
+        "bodySmallEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 12,
+          "fontWeight": "500",
+          "letterSpacing": 0.4,
+          "lineHeight": 16,
+        },
         "default": {
           "fontFamily": "System",
           "fontWeight": "400",
@@ -616,7 +895,14 @@ exports[`renders list section with subheader 1`] = `
           "fontFamily": "System",
           "fontSize": 57,
           "fontWeight": "400",
-          "letterSpacing": 0,
+          "letterSpacing": -0.25,
+          "lineHeight": 64,
+        },
+        "displayLargeEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 57,
+          "fontWeight": "500",
+          "letterSpacing": -0.25,
           "lineHeight": 64,
         },
         "displayMedium": {
@@ -626,6 +912,13 @@ exports[`renders list section with subheader 1`] = `
           "letterSpacing": 0,
           "lineHeight": 52,
         },
+        "displayMediumEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 45,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 52,
+        },
         "displaySmall": {
           "fontFamily": "System",
           "fontSize": 36,
@@ -633,6 +926,13 @@ exports[`renders list section with subheader 1`] = `
           "letterSpacing": 0,
           "lineHeight": 44,
         },
+        "displaySmallEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 36,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 44,
+        },
         "headlineLarge": {
           "fontFamily": "System",
           "fontSize": 32,
@@ -640,6 +940,13 @@ exports[`renders list section with subheader 1`] = `
           "letterSpacing": 0,
           "lineHeight": 40,
         },
+        "headlineLargeEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 32,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 40,
+        },
         "headlineMedium": {
           "fontFamily": "System",
           "fontSize": 28,
@@ -647,6 +954,13 @@ exports[`renders list section with subheader 1`] = `
           "letterSpacing": 0,
           "lineHeight": 36,
         },
+        "headlineMediumEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 28,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 36,
+        },
         "headlineSmall": {
           "fontFamily": "System",
           "fontSize": 24,
@@ -654,6 +968,13 @@ exports[`renders list section with subheader 1`] = `
           "letterSpacing": 0,
           "lineHeight": 32,
         },
+        "headlineSmallEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 24,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 32,
+        },
         "labelLarge": {
           "fontFamily": "System",
           "fontSize": 14,
@@ -661,6 +982,13 @@ exports[`renders list section with subheader 1`] = `
           "letterSpacing": 0.1,
           "lineHeight": 20,
         },
+        "labelLargeEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 14,
+          "fontWeight": "700",
+          "letterSpacing": 0.1,
+          "lineHeight": 20,
+        },
         "labelMedium": {
           "fontFamily": "System",
           "fontSize": 12,
@@ -668,6 +996,13 @@ exports[`renders list section with subheader 1`] = `
           "letterSpacing": 0.5,
           "lineHeight": 16,
         },
+        "labelMediumEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 12,
+          "fontWeight": "700",
+          "letterSpacing": 0.5,
+          "lineHeight": 16,
+        },
         "labelSmall": {
           "fontFamily": "System",
           "fontSize": 11,
@@ -675,6 +1010,13 @@ exports[`renders list section with subheader 1`] = `
           "letterSpacing": 0.5,
           "lineHeight": 16,
         },
+        "labelSmallEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 11,
+          "fontWeight": "700",
+          "letterSpacing": 0.5,
+          "lineHeight": 16,
+        },
         "titleLarge": {
           "fontFamily": "System",
           "fontSize": 22,
@@ -682,6 +1024,13 @@ exports[`renders list section with subheader 1`] = `
           "letterSpacing": 0,
           "lineHeight": 28,
         },
+        "titleLargeEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 22,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 28,
+        },
         "titleMedium": {
           "fontFamily": "System",
           "fontSize": 16,
@@ -689,6 +1038,13 @@ exports[`renders list section with subheader 1`] = `
           "letterSpacing": 0.15,
           "lineHeight": 24,
         },
+        "titleMediumEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 16,
+          "fontWeight": "700",
+          "letterSpacing": 0.15,
+          "lineHeight": 24,
+        },
         "titleSmall": {
           "fontFamily": "System",
           "fontSize": 14,
@@ -696,10 +1052,122 @@ exports[`renders list section with subheader 1`] = `
           "letterSpacing": 0.1,
           "lineHeight": 20,
         },
+        "titleSmallEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 14,
+          "fontWeight": "700",
+          "letterSpacing": 0.1,
+          "lineHeight": 20,
+        },
+      },
+      "motion": {
+        "duration": {
+          "extraLong1": 700,
+          "extraLong2": 800,
+          "extraLong3": 900,
+          "extraLong4": 1000,
+          "long1": 450,
+          "long2": 500,
+          "long3": 550,
+          "long4": 600,
+          "medium1": 250,
+          "medium2": 300,
+          "medium3": 350,
+          "medium4": 400,
+          "short1": 50,
+          "short2": 100,
+          "short3": 150,
+          "short4": 200,
+        },
+        "easing": {
+          "emphasized": [
+            0.2,
+            0,
+            0,
+            1,
+          ],
+          "emphasizedAccelerate": [
+            0.3,
+            0,
+            0.8,
+            0.15,
+          ],
+          "emphasizedDecelerate": [
+            0.05,
+            0.7,
+            0.1,
+            1,
+          ],
+          "linear": [
+            0,
+            0,
+            1,
+            1,
+          ],
+          "standard": [
+            0.2,
+            0,
+            0,
+            1,
+          ],
+          "standardAccelerate": [
+            0.3,
+            0,
+            1,
+            1,
+          ],
+          "standardDecelerate": [
+            0,
+            0,
+            0,
+            1,
+          ],
+        },
+        "spring": {
+          "default": {
+            "effects": {
+              "damping": 1,
+              "stiffness": 1600,
+            },
+            "spatial": {
+              "damping": 0.8,
+              "stiffness": 380,
+            },
+          },
+          "fast": {
+            "effects": {
+              "damping": 1,
+              "stiffness": 3800,
+            },
+            "spatial": {
+              "damping": 0.6,
+              "stiffness": 800,
+            },
+          },
+          "slow": {
+            "effects": {
+              "damping": 1,
+              "stiffness": 800,
+            },
+            "spatial": {
+              "damping": 0.8,
+              "stiffness": 200,
+            },
+          },
+        },
+      },
+      "shapes": {
+        "corner": {
+          "extraExtraLarge": 48,
+          "extraLarge": 28,
+          "extraLargeIncreased": 32,
+          "extraSmall": 4,
+          "large": 16,
+          "largeIncreased": 20,
+          "medium": 12,
+          "small": 8,
+        },
       },
-      "isV3": true,
-      "roundness": 4,
-      "version": 3,
     }
   }
 >
@@ -711,7 +1179,7 @@ exports[`renders list section with subheader 1`] = `
           "textAlign": "left",
         },
         {
-          "color": "rgba(28, 27, 31, 1)",
+          "color": "rgba(29, 27, 32, 1)",
           "writingDirection": "ltr",
         },
         [
@@ -860,7 +1328,6 @@ exports[`renders list section with subheader 1`] = `
             undefined,
           ]
         }
-        testID="list-item-content"
       >
         <Text
           numberOfLines={1}
@@ -871,7 +1338,7 @@ exports[`renders list section with subheader 1`] = `
                 "textAlign": "left",
               },
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
                 "fontFamily": "System",
                 "fontWeight": "400",
                 "letterSpacing": 0,
@@ -884,7 +1351,7 @@ exports[`renders list section with subheader 1`] = `
                   "fontSize": 16,
                 },
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                 },
                 undefined,
               ],
@@ -1013,7 +1480,6 @@ exports[`renders list section with subheader 1`] = `
             undefined,
           ]
         }
-        testID="list-item-content"
       >
         <Text
           numberOfLines={1}
@@ -1024,7 +1490,7 @@ exports[`renders list section with subheader 1`] = `
                 "textAlign": "left",
               },
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
                 "fontFamily": "System",
                 "fontWeight": "400",
                 "letterSpacing": 0,
@@ -1037,7 +1503,7 @@ exports[`renders list section with subheader 1`] = `
                   "fontSize": 16,
                 },
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                 },
                 undefined,
               ],
@@ -1068,54 +1534,86 @@ exports[`renders list section without subheader 1`] = `
         "scale": 1,
       },
       "colors": {
-        "backdrop": "rgba(50, 47, 55, 0.4)",
-        "background": "rgba(255, 251, 254, 1)",
+        "background": "rgba(254, 247, 255, 1)",
         "elevation": {
           "level0": "transparent",
-          "level1": "rgb(247, 243, 249)",
-          "level2": "rgb(243, 237, 246)",
-          "level3": "rgb(238, 232, 244)",
-          "level4": "rgb(236, 230, 243)",
-          "level5": "rgb(233, 227, 241)",
+          "level1": "rgba(247, 242, 250, 1)",
+          "level2": "rgba(243, 237, 247, 1)",
+          "level3": "rgba(236, 230, 240, 1)",
+          "level4": "rgba(236, 230, 240, 1)",
+          "level5": "rgba(230, 224, 233, 1)",
         },
         "error": "rgba(179, 38, 30, 1)",
         "errorContainer": "rgba(249, 222, 220, 1)",
-        "inverseOnSurface": "rgba(244, 239, 244, 1)",
+        "inverseOnSurface": "rgba(245, 239, 247, 1)",
         "inversePrimary": "rgba(208, 188, 255, 1)",
-        "inverseSurface": "rgba(49, 48, 51, 1)",
-        "onBackground": "rgba(28, 27, 31, 1)",
+        "inverseSurface": "rgba(50, 47, 53, 1)",
+        "onBackground": "rgba(29, 27, 32, 1)",
         "onError": "rgba(255, 255, 255, 1)",
         "onErrorContainer": "rgba(65, 14, 11, 1)",
         "onPrimary": "rgba(255, 255, 255, 1)",
         "onPrimaryContainer": "rgba(33, 0, 93, 1)",
+        "onPrimaryFixed": "rgba(33, 0, 93, 1)",
+        "onPrimaryFixedVariant": "rgba(79, 55, 139, 1)",
         "onSecondary": "rgba(255, 255, 255, 1)",
         "onSecondaryContainer": "rgba(29, 25, 43, 1)",
-        "onSurface": "rgba(28, 27, 31, 1)",
-        "onSurfaceDisabled": "rgba(28, 27, 31, 0.38)",
+        "onSecondaryFixed": "rgba(29, 25, 43, 1)",
+        "onSecondaryFixedVariant": "rgba(74, 68, 88, 1)",
+        "onSurface": "rgba(29, 27, 32, 1)",
         "onSurfaceVariant": "rgba(73, 69, 79, 1)",
         "onTertiary": "rgba(255, 255, 255, 1)",
         "onTertiaryContainer": "rgba(49, 17, 29, 1)",
+        "onTertiaryFixed": "rgba(49, 17, 29, 1)",
+        "onTertiaryFixedVariant": "rgba(99, 59, 72, 1)",
         "outline": "rgba(121, 116, 126, 1)",
         "outlineVariant": "rgba(202, 196, 208, 1)",
         "primary": "rgba(103, 80, 164, 1)",
         "primaryContainer": "rgba(234, 221, 255, 1)",
+        "primaryFixed": "rgba(234, 221, 255, 1)",
+        "primaryFixedDim": "rgba(208, 188, 255, 1)",
         "scrim": "rgba(0, 0, 0, 1)",
         "secondary": "rgba(98, 91, 113, 1)",
         "secondaryContainer": "rgba(232, 222, 248, 1)",
+        "secondaryFixed": "rgba(232, 222, 248, 1)",
+        "secondaryFixedDim": "rgba(204, 194, 220, 1)",
         "shadow": "rgba(0, 0, 0, 1)",
-        "surface": "rgba(255, 251, 254, 1)",
-        "surfaceDisabled": "rgba(28, 27, 31, 0.12)",
+        "stateLayerPressed": "rgba(29, 27, 32, 0.1)",
+        "surface": "rgba(254, 247, 255, 1)",
+        "surfaceBright": "rgba(254, 247, 255, 1)",
+        "surfaceContainer": "rgba(243, 237, 247, 1)",
+        "surfaceContainerHigh": "rgba(236, 230, 240, 1)",
+        "surfaceContainerHighest": "rgba(230, 224, 233, 1)",
+        "surfaceContainerLow": "rgba(247, 242, 250, 1)",
+        "surfaceContainerLowest": "rgba(255, 255, 255, 1)",
+        "surfaceDim": "rgba(222, 216, 225, 1)",
         "surfaceVariant": "rgba(231, 224, 236, 1)",
         "tertiary": "rgba(125, 82, 96, 1)",
         "tertiaryContainer": "rgba(255, 216, 228, 1)",
+        "tertiaryFixed": "rgba(255, 216, 228, 1)",
+        "tertiaryFixedDim": "rgba(239, 184, 200, 1)",
       },
       "dark": false,
+      "elevation": {
+        "level0": 0,
+        "level1": 1,
+        "level2": 2,
+        "level3": 3,
+        "level4": 4,
+        "level5": 5,
+      },
       "fonts": {
         "bodyLarge": {
           "fontFamily": "System",
           "fontSize": 16,
           "fontWeight": "400",
-          "letterSpacing": 0.15,
+          "letterSpacing": 0.5,
+          "lineHeight": 24,
+        },
+        "bodyLargeEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 16,
+          "fontWeight": "500",
+          "letterSpacing": 0.5,
           "lineHeight": 24,
         },
         "bodyMedium": {
@@ -1125,6 +1623,13 @@ exports[`renders list section without subheader 1`] = `
           "letterSpacing": 0.25,
           "lineHeight": 20,
         },
+        "bodyMediumEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 14,
+          "fontWeight": "500",
+          "letterSpacing": 0.25,
+          "lineHeight": 20,
+        },
         "bodySmall": {
           "fontFamily": "System",
           "fontSize": 12,
@@ -1132,6 +1637,13 @@ exports[`renders list section without subheader 1`] = `
           "letterSpacing": 0.4,
           "lineHeight": 16,
         },
+        "bodySmallEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 12,
+          "fontWeight": "500",
+          "letterSpacing": 0.4,
+          "lineHeight": 16,
+        },
         "default": {
           "fontFamily": "System",
           "fontWeight": "400",
@@ -1141,7 +1653,14 @@ exports[`renders list section without subheader 1`] = `
           "fontFamily": "System",
           "fontSize": 57,
           "fontWeight": "400",
-          "letterSpacing": 0,
+          "letterSpacing": -0.25,
+          "lineHeight": 64,
+        },
+        "displayLargeEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 57,
+          "fontWeight": "500",
+          "letterSpacing": -0.25,
           "lineHeight": 64,
         },
         "displayMedium": {
@@ -1151,6 +1670,13 @@ exports[`renders list section without subheader 1`] = `
           "letterSpacing": 0,
           "lineHeight": 52,
         },
+        "displayMediumEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 45,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 52,
+        },
         "displaySmall": {
           "fontFamily": "System",
           "fontSize": 36,
@@ -1158,6 +1684,13 @@ exports[`renders list section without subheader 1`] = `
           "letterSpacing": 0,
           "lineHeight": 44,
         },
+        "displaySmallEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 36,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 44,
+        },
         "headlineLarge": {
           "fontFamily": "System",
           "fontSize": 32,
@@ -1165,6 +1698,13 @@ exports[`renders list section without subheader 1`] = `
           "letterSpacing": 0,
           "lineHeight": 40,
         },
+        "headlineLargeEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 32,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 40,
+        },
         "headlineMedium": {
           "fontFamily": "System",
           "fontSize": 28,
@@ -1172,6 +1712,13 @@ exports[`renders list section without subheader 1`] = `
           "letterSpacing": 0,
           "lineHeight": 36,
         },
+        "headlineMediumEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 28,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 36,
+        },
         "headlineSmall": {
           "fontFamily": "System",
           "fontSize": 24,
@@ -1179,6 +1726,13 @@ exports[`renders list section without subheader 1`] = `
           "letterSpacing": 0,
           "lineHeight": 32,
         },
+        "headlineSmallEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 24,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 32,
+        },
         "labelLarge": {
           "fontFamily": "System",
           "fontSize": 14,
@@ -1186,6 +1740,13 @@ exports[`renders list section without subheader 1`] = `
           "letterSpacing": 0.1,
           "lineHeight": 20,
         },
+        "labelLargeEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 14,
+          "fontWeight": "700",
+          "letterSpacing": 0.1,
+          "lineHeight": 20,
+        },
         "labelMedium": {
           "fontFamily": "System",
           "fontSize": 12,
@@ -1193,6 +1754,13 @@ exports[`renders list section without subheader 1`] = `
           "letterSpacing": 0.5,
           "lineHeight": 16,
         },
+        "labelMediumEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 12,
+          "fontWeight": "700",
+          "letterSpacing": 0.5,
+          "lineHeight": 16,
+        },
         "labelSmall": {
           "fontFamily": "System",
           "fontSize": 11,
@@ -1200,6 +1768,13 @@ exports[`renders list section without subheader 1`] = `
           "letterSpacing": 0.5,
           "lineHeight": 16,
         },
+        "labelSmallEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 11,
+          "fontWeight": "700",
+          "letterSpacing": 0.5,
+          "lineHeight": 16,
+        },
         "titleLarge": {
           "fontFamily": "System",
           "fontSize": 22,
@@ -1207,6 +1782,13 @@ exports[`renders list section without subheader 1`] = `
           "letterSpacing": 0,
           "lineHeight": 28,
         },
+        "titleLargeEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 22,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 28,
+        },
         "titleMedium": {
           "fontFamily": "System",
           "fontSize": 16,
@@ -1214,6 +1796,13 @@ exports[`renders list section without subheader 1`] = `
           "letterSpacing": 0.15,
           "lineHeight": 24,
         },
+        "titleMediumEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 16,
+          "fontWeight": "700",
+          "letterSpacing": 0.15,
+          "lineHeight": 24,
+        },
         "titleSmall": {
           "fontFamily": "System",
           "fontSize": 14,
@@ -1221,10 +1810,122 @@ exports[`renders list section without subheader 1`] = `
           "letterSpacing": 0.1,
           "lineHeight": 20,
         },
+        "titleSmallEmphasized": {
+          "fontFamily": "System",
+          "fontSize": 14,
+          "fontWeight": "700",
+          "letterSpacing": 0.1,
+          "lineHeight": 20,
+        },
+      },
+      "motion": {
+        "duration": {
+          "extraLong1": 700,
+          "extraLong2": 800,
+          "extraLong3": 900,
+          "extraLong4": 1000,
+          "long1": 450,
+          "long2": 500,
+          "long3": 550,
+          "long4": 600,
+          "medium1": 250,
+          "medium2": 300,
+          "medium3": 350,
+          "medium4": 400,
+          "short1": 50,
+          "short2": 100,
+          "short3": 150,
+          "short4": 200,
+        },
+        "easing": {
+          "emphasized": [
+            0.2,
+            0,
+            0,
+            1,
+          ],
+          "emphasizedAccelerate": [
+            0.3,
+            0,
+            0.8,
+            0.15,
+          ],
+          "emphasizedDecelerate": [
+            0.05,
+            0.7,
+            0.1,
+            1,
+          ],
+          "linear": [
+            0,
+            0,
+            1,
+            1,
+          ],
+          "standard": [
+            0.2,
+            0,
+            0,
+            1,
+          ],
+          "standardAccelerate": [
+            0.3,
+            0,
+            1,
+            1,
+          ],
+          "standardDecelerate": [
+            0,
+            0,
+            0,
+            1,
+          ],
+        },
+        "spring": {
+          "default": {
+            "effects": {
+              "damping": 1,
+              "stiffness": 1600,
+            },
+            "spatial": {
+              "damping": 0.8,
+              "stiffness": 380,
+            },
+          },
+          "fast": {
+            "effects": {
+              "damping": 1,
+              "stiffness": 3800,
+            },
+            "spatial": {
+              "damping": 0.6,
+              "stiffness": 800,
+            },
+          },
+          "slow": {
+            "effects": {
+              "damping": 1,
+              "stiffness": 800,
+            },
+            "spatial": {
+              "damping": 0.8,
+              "stiffness": 200,
+            },
+          },
+        },
+      },
+      "shapes": {
+        "corner": {
+          "extraExtraLarge": 48,
+          "extraLarge": 28,
+          "extraLargeIncreased": 32,
+          "extraSmall": 4,
+          "large": 16,
+          "largeIncreased": 20,
+          "medium": 12,
+          "small": 8,
+        },
       },
-      "isV3": true,
-      "roundness": 4,
-      "version": 3,
     }
   }
 >
@@ -1345,7 +2046,6 @@ exports[`renders list section without subheader 1`] = `
             undefined,
           ]
         }
-        testID="list-item-content"
       >
         <Text
           numberOfLines={1}
@@ -1356,7 +2056,7 @@ exports[`renders list section without subheader 1`] = `
                 "textAlign": "left",
               },
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
                 "fontFamily": "System",
                 "fontWeight": "400",
                 "letterSpacing": 0,
@@ -1369,7 +2069,7 @@ exports[`renders list section without subheader 1`] = `
                   "fontSize": 16,
                 },
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                 },
                 undefined,
               ],
@@ -1498,7 +2198,6 @@ exports[`renders list section without subheader 1`] = `
             undefined,
           ]
         }
-        testID="list-item-content"
       >
         <Text
           numberOfLines={1}
@@ -1509,7 +2208,7 @@ exports[`renders list section without subheader 1`] = `
                 "textAlign": "left",
               },
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
                 "fontFamily": "System",
                 "fontWeight": "400",
                 "letterSpacing": 0,
@@ -1522,7 +2221,7 @@ exports[`renders list section without subheader 1`] = `
                   "fontSize": 16,
                 },
                 {
-                  "color": "rgba(28, 27, 31, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                 },
                 undefined,
               ],
diff --git a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
index fc3ac61473..3e059001aa 100644
--- a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
@@ -1,7 +1,903 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders menu with content styles 1`] = `
-[
+exports[`renders not visible menu 1`] = `
+<View
+  collapsable={false}
+  pointerEvents="box-none"
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    collapsable={false}
+  >
+    <View
+      collapsable={false}
+      style={
+        [
+          {},
+          {
+            "borderStyle": "solid",
+            "minWidth": 64,
+          },
+          undefined,
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderWidth": 1,
+          },
+          undefined,
+          {},
+          {
+            "backgroundColor": "transparent",
+          },
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 20,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          },
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 20,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+      />
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": true,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
+            {
+              "overflow": "hidden",
+            },
+            {
+              "borderRadius": 19,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 1,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            numberOfLines={1}
+            selectable={false}
+            style={
+              [
+                {
+                  "textAlign": "left",
+                },
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                  "writingDirection": "ltr",
+                },
+                [
+                  {
+                    "fontFamily": "System",
+                    "fontSize": 14,
+                    "fontWeight": "500",
+                    "letterSpacing": 0.1,
+                    "lineHeight": 20,
+                  },
+                  [
+                    {
+                      "marginHorizontal": 16,
+                      "marginVertical": 9,
+                      "textAlign": "center",
+                    },
+                    {
+                      "marginHorizontal": 24,
+                      "marginVertical": 10,
+                    },
+                    undefined,
+                    false,
+                    {
+                      "color": "rgba(103, 80, 164, 1)",
+                      "fontFamily": "System",
+                      "fontSize": 14,
+                      "fontWeight": "500",
+                      "letterSpacing": 0.1,
+                      "lineHeight": 20,
+                    },
+                    undefined,
+                  ],
+                ],
+              ]
+            }
+          >
+            Open menu
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders visible menu 1`] = `
+<>
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+    >
+      <View
+        collapsable={false}
+        style={
+          [
+            {},
+            {
+              "borderStyle": "solid",
+              "minWidth": 64,
+            },
+            undefined,
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderWidth": 1,
+            },
+            undefined,
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 20,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 20,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0,
+                "shadowRadius": 0,
+              },
+            ]
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "overflow": "hidden",
+              },
+              {
+                "borderRadius": 19,
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                },
+                {
+                  "opacity": 1,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text
+              numberOfLines={1}
+              selectable={false}
+              style={
+                [
+                  {
+                    "textAlign": "left",
+                  },
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                    "writingDirection": "ltr",
+                  },
+                  [
+                    {
+                      "fontFamily": "System",
+                      "fontSize": 14,
+                      "fontWeight": "500",
+                      "letterSpacing": 0.1,
+                      "lineHeight": 20,
+                    },
+                    [
+                      {
+                        "marginHorizontal": 16,
+                        "marginVertical": 9,
+                        "textAlign": "center",
+                      },
+                      {
+                        "marginHorizontal": 24,
+                        "marginVertical": 10,
+                      },
+                      undefined,
+                      false,
+                      {
+                        "color": "rgba(103, 80, 164, 1)",
+                        "fontFamily": "System",
+                        "fontSize": 14,
+                        "fontWeight": "500",
+                        "letterSpacing": 0.1,
+                        "lineHeight": 20,
+                      },
+                      undefined,
+                    ],
+                  ],
+                ]
+              }
+            >
+              Open menu
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      accessibilityLabel="Close menu"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      pointerEvents="auto"
+      role="button"
+      style={
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+          "width": "100%",
+        }
+      }
+    />
+    <View
+      aria-modal={true}
+      collapsable={false}
+      onAccessibilityEscape={[MockFunction]}
+      pointerEvents="box-none"
+      style={
+        [
+          {
+            "position": "absolute",
+          },
+          {
+            "left": 8,
+            "top": 8,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "transform": [
+                {
+                  "translateX": -0,
+                },
+                {
+                  "translateY": -0,
+                },
+              ],
+            },
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {},
+              {
+                "opacity": 0,
+              },
+              {
+                "pointerEvents": "box-none",
+              },
+              {},
+              {
+                "opacity": 0,
+                "transform": [
+                  {
+                    "scaleX": 0,
+                  },
+                  {
+                    "scaleY": 0,
+                  },
+                ],
+              },
+              {},
+              {
+                "backgroundColor": "rgba(243, 237, 247, 1)",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 4,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 1.66,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 2.36,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "rgba(243, 237, 247, 1)",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": 4,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.75,
+                },
+              ]
+            }
+          />
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "paddingVertical": 8,
+                },
+                false,
+                undefined,
+              ]
+            }
+          >
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              role="menuitem"
+              style={
+                [
+                  false,
+                  [
+                    {
+                      "height": 48,
+                      "justifyContent": "center",
+                      "maxWidth": 280,
+                      "minWidth": 112,
+                    },
+                    {
+                      "paddingHorizontal": 12,
+                    },
+                    undefined,
+                    undefined,
+                  ],
+                ]
+              }
+            >
+              <View
+                style={
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {
+                      "opacity": 1,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View
+                  pointerEvents="none"
+                  style={
+                    [
+                      {
+                        "justifyContent": "center",
+                      },
+                      {
+                        "maxWidth": 268,
+                        "minWidth": 100,
+                      },
+                      {
+                        "marginLeft": 4,
+                      },
+                      undefined,
+                    ]
+                  }
+                >
+                  <Text
+                    maxFontSizeMultiplier={1.5}
+                    numberOfLines={1}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        [
+                          {
+                            "fontFamily": "System",
+                            "fontSize": 16,
+                            "fontWeight": "400",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 24,
+                          },
+                          [
+                            {
+                              "color": "rgba(29, 27, 32, 1)",
+                              "fontFamily": "System",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "letterSpacing": 0.5,
+                              "lineHeight": 24,
+                            },
+                            undefined,
+                          ],
+                        ],
+                      ]
+                    }
+                  >
+                    Undo
+                  </Text>
+                </View>
+              </View>
+            </View>
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              role="menuitem"
+              style={
+                [
+                  false,
+                  [
+                    {
+                      "height": 48,
+                      "justifyContent": "center",
+                      "maxWidth": 280,
+                      "minWidth": 112,
+                    },
+                    {
+                      "paddingHorizontal": 12,
+                    },
+                    undefined,
+                    undefined,
+                  ],
+                ]
+              }
+            >
+              <View
+                style={
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {
+                      "opacity": 1,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View
+                  pointerEvents="none"
+                  style={
+                    [
+                      {
+                        "justifyContent": "center",
+                      },
+                      {
+                        "maxWidth": 268,
+                        "minWidth": 100,
+                      },
+                      {
+                        "marginLeft": 4,
+                      },
+                      undefined,
+                    ]
+                  }
+                >
+                  <Text
+                    maxFontSizeMultiplier={1.5}
+                    numberOfLines={1}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        [
+                          {
+                            "fontFamily": "System",
+                            "fontSize": 16,
+                            "fontWeight": "400",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 24,
+                          },
+                          [
+                            {
+                              "color": "rgba(29, 27, 32, 1)",
+                              "fontFamily": "System",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "letterSpacing": 0.5,
+                              "lineHeight": 24,
+                            },
+                            undefined,
+                          ],
+                        ],
+                      ]
+                    }
+                  >
+                    Redo
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
+
+exports[`respects anchorPosition bottom 1`] = `
+<>
   <View
     collapsable={false}
     pointerEvents="box-none"
@@ -17,153 +913,208 @@ exports[`renders menu with content styles 1`] = `
       <View
         collapsable={false}
         style={
-          {
-            "backgroundColor": "transparent",
-            "borderRadius": 20,
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
+          [
+            {},
+            {
+              "borderStyle": "solid",
+              "minWidth": 64,
             },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
-          }
-        }
-        testID="button-container-outer-layer"
-      >
-        <View
-          collapsable={false}
-          style={
+            undefined,
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderWidth": 1,
+            },
+            undefined,
+            {},
             {
               "backgroundColor": "transparent",
-              "borderColor": "rgba(121, 116, 126, 1)",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
               "borderRadius": 20,
-              "borderStyle": "solid",
-              "borderWidth": 1,
-              "flex": undefined,
-              "minWidth": 64,
-              "shadowColor": "#000",
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
               "shadowOffset": {
                 "height": 0,
                 "width": 0,
               },
               "shadowOpacity": 0,
               "shadowRadius": 0,
+            },
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 20,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0,
+                "shadowRadius": 0,
+              },
+            ]
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
             }
           }
-          testID="button-container"
-        >
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": true,
-                "expanded": undefined,
-                "selected": undefined,
-              }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
-            accessibilityValue={
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
               {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+                "overflow": "hidden",
+              },
+              {
+                "borderRadius": 19,
+              },
+            ]
+          }
+          testID="anchor"
+        >
+          <View
             style={
               [
                 {
-                  "overflow": "hidden",
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
                 },
                 {
-                  "borderRadius": 19,
+                  "opacity": 1,
                 },
+                undefined,
               ]
             }
-            testID="button"
           >
-            <View
+            <Text
+              numberOfLines={1}
+              selectable={false}
               style={
                 [
                   {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "justifyContent": "center",
+                    "textAlign": "left",
+                  },
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                    "writingDirection": "ltr",
                   },
-                  undefined,
-                ]
-              }
-            >
-              <Text
-                numberOfLines={1}
-                selectable={false}
-                style={
                   [
                     {
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "rgba(28, 27, 31, 1)",
-                      "writingDirection": "ltr",
+                      "fontFamily": "System",
+                      "fontSize": 14,
+                      "fontWeight": "500",
+                      "letterSpacing": 0.1,
+                      "lineHeight": 20,
                     },
                     [
                       {
+                        "marginHorizontal": 16,
+                        "marginVertical": 9,
+                        "textAlign": "center",
+                      },
+                      {
+                        "marginHorizontal": 24,
+                        "marginVertical": 10,
+                      },
+                      undefined,
+                      false,
+                      {
+                        "color": "rgba(103, 80, 164, 1)",
                         "fontFamily": "System",
                         "fontSize": 14,
                         "fontWeight": "500",
                         "letterSpacing": 0.1,
                         "lineHeight": 20,
                       },
-                      [
-                        {
-                          "marginHorizontal": 16,
-                          "marginVertical": 9,
-                          "textAlign": "center",
-                        },
-                        false,
-                        {
-                          "marginHorizontal": 24,
-                          "marginVertical": 10,
-                        },
-                        undefined,
-                        false,
-                        {
-                          "color": "rgba(103, 80, 164, 1)",
-                          "fontFamily": "System",
-                          "fontSize": 14,
-                          "fontWeight": "500",
-                          "letterSpacing": 0.1,
-                          "lineHeight": 20,
-                        },
-                        undefined,
-                      ],
+                      undefined,
                     ],
-                  ]
-                }
-                testID="button-text"
-              >
-                Open menu
-              </Text>
-            </View>
+                  ],
+                ]
+              }
+            >
+              Open menu
+            </Text>
           </View>
         </View>
       </View>
     </View>
-  </View>,
+  </View>
   <View
     collapsable={false}
     pointerEvents="box-none"
@@ -179,7 +1130,6 @@ exports[`renders menu with content styles 1`] = `
   >
     <View
       accessibilityLabel="Close menu"
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -210,6 +1160,7 @@ exports[`renders menu with content styles 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       pointerEvents="auto"
+      role="button"
       style={
         {
           "bottom": 0,
@@ -222,7 +1173,7 @@ exports[`renders menu with content styles 1`] = `
       }
     />
     <View
-      accessibilityViewIsModal={true}
+      aria-modal={true}
       collapsable={false}
       onAccessibilityEscape={[MockFunction]}
       pointerEvents="box-none"
@@ -232,82 +1183,147 @@ exports[`renders menu with content styles 1`] = `
             "position": "absolute",
           },
           {
-            "left": 8,
-            "top": 8,
+            "left": 100,
+            "top": 132,
           },
           undefined,
         ]
       }
-      testID="menu-view"
     >
       <View
         collapsable={false}
         pointerEvents="box-none"
         style={
-          {
-            "transform": [
-              {
-                "translateX": -0,
-              },
-              {
-                "translateY": -0,
-              },
-            ],
-          }
+          [
+            {
+              "transform": [
+                {
+                  "translateX": -0,
+                },
+                {
+                  "translateY": -0,
+                },
+              ],
+            },
+          ]
         }
       >
         <View
           collapsable={false}
           style={
-            {
-              "backgroundColor": "rgb(243, 237, 246)",
-              "borderRadius": 4,
-              "borderTopLeftRadius": 0,
-              "borderTopRightRadius": 0,
-              "opacity": 0,
-              "shadowColor": "#000",
-              "shadowOffset": {
-                "height": 2,
-                "width": 0,
+            [
+              {},
+              {
+                "opacity": 0,
               },
-              "shadowOpacity": 0.15,
-              "shadowRadius": 6,
-              "transform": [
+              {
+                "pointerEvents": "box-none",
+              },
+              {},
+              {
+                "opacity": 0,
+                "transform": [
+                  {
+                    "scaleX": 0,
+                  },
+                  {
+                    "scaleY": 0,
+                  },
+                ],
+              },
+              {},
+              {
+                "backgroundColor": "rgba(243, 237, 247, 1)",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 4,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 1.66,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 2.36,
+              },
+            ]
+          }
+          testID="bottom-positioned-menu"
+        >
+          <View
+            collapsable={false}
+            style={
+              [
                 {
-                  "scaleX": 0,
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
                 },
                 {
-                  "scaleY": 0,
+                  "pointerEvents": "none",
                 },
-              ],
+                {},
+                {},
+                {
+                  "backgroundColor": "rgba(243, 237, 247, 1)",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": 4,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.75,
+                },
+              ]
             }
-          }
-          testID="menu-surface-outer-layer"
-        >
+          />
           <View
             collapsable={false}
-            pointerEvents="box-none"
             style={
-              {
-                "backgroundColor": "rgb(243, 237, 246)",
-                "borderRadius": 4,
-                "borderTopLeftRadius": 0,
-                "borderTopRightRadius": 0,
-                "flex": undefined,
-                "paddingVertical": 8,
-                "shadowColor": "#000",
-                "shadowOffset": {
-                  "height": 1,
-                  "width": 0,
+              [
+                {
+                  "paddingVertical": 8,
                 },
-                "shadowOpacity": 0.3,
-                "shadowRadius": 2,
-              }
+                false,
+                undefined,
+              ]
             }
-            testID="menu-surface"
           >
             <View
-              accessibilityRole="menuitem"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -337,6 +1353,7 @@ exports[`renders menu with content styles 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="menuitem"
               style={
                 [
                   false,
@@ -355,7 +1372,6 @@ exports[`renders menu with content styles 1`] = `
                   ],
                 ]
               }
-              testID="menu-item"
             >
               <View
                 style={
@@ -363,6 +1379,9 @@ exports[`renders menu with content styles 1`] = `
                     {
                       "flexDirection": "row",
                     },
+                    {
+                      "opacity": 1,
+                    },
                     undefined,
                   ]
                 }
@@ -371,7 +1390,6 @@ exports[`renders menu with content styles 1`] = `
                   pointerEvents="none"
                   style={
                     [
-                      false,
                       {
                         "justifyContent": "center",
                       },
@@ -396,7 +1414,7 @@ exports[`renders menu with content styles 1`] = `
                           "textAlign": "left",
                         },
                         {
-                          "color": "rgba(28, 27, 31, 1)",
+                          "color": "rgba(29, 27, 32, 1)",
                           "writingDirection": "ltr",
                         },
                         [
@@ -404,17 +1422,16 @@ exports[`renders menu with content styles 1`] = `
                             "fontFamily": "System",
                             "fontSize": 16,
                             "fontWeight": "400",
-                            "letterSpacing": 0.15,
+                            "letterSpacing": 0.5,
                             "lineHeight": 24,
                           },
                           [
-                            false,
                             {
-                              "color": "rgba(28, 27, 31, 1)",
+                              "color": "rgba(29, 27, 32, 1)",
                               "fontFamily": "System",
                               "fontSize": 16,
                               "fontWeight": "400",
-                              "letterSpacing": 0.15,
+                              "letterSpacing": 0.5,
                               "lineHeight": 24,
                             },
                             undefined,
@@ -422,7 +1439,6 @@ exports[`renders menu with content styles 1`] = `
                         ],
                       ]
                     }
-                    testID="menu-item-title"
                   >
                     Undo
                   </Text>
@@ -430,7 +1446,6 @@ exports[`renders menu with content styles 1`] = `
               </View>
             </View>
             <View
-              accessibilityRole="menuitem"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -460,6 +1475,7 @@ exports[`renders menu with content styles 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="menuitem"
               style={
                 [
                   false,
@@ -478,13 +1494,15 @@ exports[`renders menu with content styles 1`] = `
                   ],
                 ]
               }
-              testID="menu-item"
             >
               <View
                 style={
                   [
                     {
-                      "flexDirection": "row",
+                      "flexDirection": "row",
+                    },
+                    {
+                      "opacity": 1,
                     },
                     undefined,
                   ]
@@ -494,7 +1512,6 @@ exports[`renders menu with content styles 1`] = `
                   pointerEvents="none"
                   style={
                     [
-                      false,
                       {
                         "justifyContent": "center",
                       },
@@ -519,7 +1536,7 @@ exports[`renders menu with content styles 1`] = `
                           "textAlign": "left",
                         },
                         {
-                          "color": "rgba(28, 27, 31, 1)",
+                          "color": "rgba(29, 27, 32, 1)",
                           "writingDirection": "ltr",
                         },
                         [
@@ -527,17 +1544,16 @@ exports[`renders menu with content styles 1`] = `
                             "fontFamily": "System",
                             "fontSize": 16,
                             "fontWeight": "400",
-                            "letterSpacing": 0.15,
+                            "letterSpacing": 0.5,
                             "lineHeight": 24,
                           },
                           [
-                            false,
                             {
-                              "color": "rgba(28, 27, 31, 1)",
+                              "color": "rgba(29, 27, 32, 1)",
                               "fontFamily": "System",
                               "fontSize": 16,
                               "fontWeight": "400",
-                              "letterSpacing": 0.15,
+                              "letterSpacing": 0.5,
                               "lineHeight": 24,
                             },
                             undefined,
@@ -545,7 +1561,6 @@ exports[`renders menu with content styles 1`] = `
                         ],
                       ]
                     }
-                    testID="menu-item-title"
                   >
                     Redo
                   </Text>
@@ -556,64 +1571,119 @@ exports[`renders menu with content styles 1`] = `
         </View>
       </View>
     </View>
-  </View>,
-]
+  </View>
+</>
 `;
 
-exports[`renders not visible menu 1`] = `
-<View
-  collapsable={false}
-  pointerEvents="box-none"
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
+exports[`uses the default anchorPosition of top 1`] = `
+<>
   <View
     collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
   >
     <View
       collapsable={false}
-      style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-        }
-      }
-      testID="button-container-outer-layer"
     >
       <View
         collapsable={false}
         style={
-          {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(121, 116, 126, 1)",
-            "borderRadius": 20,
-            "borderStyle": "solid",
-            "borderWidth": 1,
-            "flex": undefined,
-            "minWidth": 64,
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
+          [
+            {},
+            {
+              "borderStyle": "solid",
+              "minWidth": 64,
             },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
-          }
+            undefined,
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderWidth": 1,
+            },
+            undefined,
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 20,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
         }
-        testID="button-container"
       >
         <View
-          accessibilityRole="button"
+          collapsable={false}
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 20,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0,
+                "shadowRadius": 0,
+              },
+            ]
+          }
+        />
+        <View
           accessibilityState={
             {
               "busy": undefined,
@@ -643,6 +1713,7 @@ exports[`renders not visible menu 1`] = `
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
@@ -653,7 +1724,7 @@ exports[`renders not visible menu 1`] = `
               },
             ]
           }
-          testID="button"
+          testID="anchor"
         >
           <View
             style={
@@ -663,6 +1734,9 @@ exports[`renders not visible menu 1`] = `
                   "flexDirection": "row",
                   "justifyContent": "center",
                 },
+                {
+                  "opacity": 1,
+                },
                 undefined,
               ]
             }
@@ -676,7 +1750,7 @@ exports[`renders not visible menu 1`] = `
                     "textAlign": "left",
                   },
                   {
-                    "color": "rgba(28, 27, 31, 1)",
+                    "color": "rgba(29, 27, 32, 1)",
                     "writingDirection": "ltr",
                   },
                   [
@@ -693,7 +1767,6 @@ exports[`renders not visible menu 1`] = `
                         "marginVertical": 9,
                         "textAlign": "center",
                       },
-                      false,
                       {
                         "marginHorizontal": 24,
                         "marginVertical": 10,
@@ -713,7 +1786,6 @@ exports[`renders not visible menu 1`] = `
                   ],
                 ]
               }
-              testID="button-text"
             >
               Open menu
             </Text>
@@ -722,173 +1794,6 @@ exports[`renders not visible menu 1`] = `
       </View>
     </View>
   </View>
-</View>
-`;
-
-exports[`renders visible menu 1`] = `
-[
-  <View
-    collapsable={false}
-    pointerEvents="box-none"
-    style={
-      {
-        "flex": 1,
-      }
-    }
-  >
-    <View
-      collapsable={false}
-    >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "transparent",
-            "borderRadius": 20,
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
-          }
-        }
-        testID="button-container-outer-layer"
-      >
-        <View
-          collapsable={false}
-          style={
-            {
-              "backgroundColor": "transparent",
-              "borderColor": "rgba(121, 116, 126, 1)",
-              "borderRadius": 20,
-              "borderStyle": "solid",
-              "borderWidth": 1,
-              "flex": undefined,
-              "minWidth": 64,
-              "shadowColor": "#000",
-              "shadowOffset": {
-                "height": 0,
-                "width": 0,
-              },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
-            }
-          }
-          testID="button-container"
-        >
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": true,
-                "expanded": undefined,
-                "selected": undefined,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "overflow": "hidden",
-                },
-                {
-                  "borderRadius": 19,
-                },
-              ]
-            }
-            testID="button"
-          >
-            <View
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "justifyContent": "center",
-                  },
-                  undefined,
-                ]
-              }
-            >
-              <Text
-                numberOfLines={1}
-                selectable={false}
-                style={
-                  [
-                    {
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "rgba(28, 27, 31, 1)",
-                      "writingDirection": "ltr",
-                    },
-                    [
-                      {
-                        "fontFamily": "System",
-                        "fontSize": 14,
-                        "fontWeight": "500",
-                        "letterSpacing": 0.1,
-                        "lineHeight": 20,
-                      },
-                      [
-                        {
-                          "marginHorizontal": 16,
-                          "marginVertical": 9,
-                          "textAlign": "center",
-                        },
-                        false,
-                        {
-                          "marginHorizontal": 24,
-                          "marginVertical": 10,
-                        },
-                        undefined,
-                        false,
-                        {
-                          "color": "rgba(103, 80, 164, 1)",
-                          "fontFamily": "System",
-                          "fontSize": 14,
-                          "fontWeight": "500",
-                          "letterSpacing": 0.1,
-                          "lineHeight": 20,
-                        },
-                        undefined,
-                      ],
-                    ],
-                  ]
-                }
-                testID="button-text"
-              >
-                Open menu
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>,
   <View
     collapsable={false}
     pointerEvents="box-none"
@@ -904,7 +1809,6 @@ exports[`renders visible menu 1`] = `
   >
     <View
       accessibilityLabel="Close menu"
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -935,6 +1839,7 @@ exports[`renders visible menu 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       pointerEvents="auto"
+      role="button"
       style={
         {
           "bottom": 0,
@@ -947,7 +1852,7 @@ exports[`renders visible menu 1`] = `
       }
     />
     <View
-      accessibilityViewIsModal={true}
+      aria-modal={true}
       collapsable={false}
       onAccessibilityEscape={[MockFunction]}
       pointerEvents="box-none"
@@ -957,78 +1862,147 @@ exports[`renders visible menu 1`] = `
             "position": "absolute",
           },
           {
-            "left": 8,
-            "top": 8,
+            "left": 100,
+            "top": 100,
           },
           undefined,
         ]
       }
-      testID="menu-view"
     >
       <View
         collapsable={false}
         pointerEvents="box-none"
         style={
-          {
-            "transform": [
-              {
-                "translateX": -0,
-              },
-              {
-                "translateY": -0,
-              },
-            ],
-          }
+          [
+            {
+              "transform": [
+                {
+                  "translateX": -0,
+                },
+                {
+                  "translateY": -0,
+                },
+              ],
+            },
+          ]
         }
       >
         <View
           collapsable={false}
           style={
-            {
-              "backgroundColor": "rgb(243, 237, 246)",
-              "borderRadius": 4,
-              "opacity": 0,
-              "shadowColor": "#000",
-              "shadowOffset": {
-                "height": 2,
-                "width": 0,
+            [
+              {},
+              {
+                "opacity": 0,
               },
-              "shadowOpacity": 0.15,
-              "shadowRadius": 6,
-              "transform": [
+              {
+                "pointerEvents": "box-none",
+              },
+              {},
+              {
+                "opacity": 0,
+                "transform": [
+                  {
+                    "scaleX": 0,
+                  },
+                  {
+                    "scaleY": 0,
+                  },
+                ],
+              },
+              {},
+              {
+                "backgroundColor": "rgba(243, 237, 247, 1)",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 4,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 1.66,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 2.36,
+              },
+            ]
+          }
+          testID="top-positioned-menu"
+        >
+          <View
+            collapsable={false}
+            style={
+              [
                 {
-                  "scaleX": 0,
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
                 },
                 {
-                  "scaleY": 0,
+                  "pointerEvents": "none",
                 },
-              ],
+                {},
+                {},
+                {
+                  "backgroundColor": "rgba(243, 237, 247, 1)",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": 4,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.75,
+                },
+              ]
             }
-          }
-          testID="menu-surface-outer-layer"
-        >
+          />
           <View
             collapsable={false}
-            pointerEvents="box-none"
             style={
-              {
-                "backgroundColor": "rgb(243, 237, 246)",
-                "borderRadius": 4,
-                "flex": undefined,
-                "paddingVertical": 8,
-                "shadowColor": "#000",
-                "shadowOffset": {
-                  "height": 1,
-                  "width": 0,
+              [
+                {
+                  "paddingVertical": 8,
                 },
-                "shadowOpacity": 0.3,
-                "shadowRadius": 2,
-              }
+                false,
+                undefined,
+              ]
             }
-            testID="menu-surface"
           >
             <View
-              accessibilityRole="menuitem"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -1058,6 +2032,7 @@ exports[`renders visible menu 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="menuitem"
               style={
                 [
                   false,
@@ -1076,7 +2051,6 @@ exports[`renders visible menu 1`] = `
                   ],
                 ]
               }
-              testID="menu-item"
             >
               <View
                 style={
@@ -1084,6 +2058,9 @@ exports[`renders visible menu 1`] = `
                     {
                       "flexDirection": "row",
                     },
+                    {
+                      "opacity": 1,
+                    },
                     undefined,
                   ]
                 }
@@ -1092,7 +2069,6 @@ exports[`renders visible menu 1`] = `
                   pointerEvents="none"
                   style={
                     [
-                      false,
                       {
                         "justifyContent": "center",
                       },
@@ -1117,7 +2093,7 @@ exports[`renders visible menu 1`] = `
                           "textAlign": "left",
                         },
                         {
-                          "color": "rgba(28, 27, 31, 1)",
+                          "color": "rgba(29, 27, 32, 1)",
                           "writingDirection": "ltr",
                         },
                         [
@@ -1125,17 +2101,16 @@ exports[`renders visible menu 1`] = `
                             "fontFamily": "System",
                             "fontSize": 16,
                             "fontWeight": "400",
-                            "letterSpacing": 0.15,
+                            "letterSpacing": 0.5,
                             "lineHeight": 24,
                           },
                           [
-                            false,
                             {
-                              "color": "rgba(28, 27, 31, 1)",
+                              "color": "rgba(29, 27, 32, 1)",
                               "fontFamily": "System",
                               "fontSize": 16,
                               "fontWeight": "400",
-                              "letterSpacing": 0.15,
+                              "letterSpacing": 0.5,
                               "lineHeight": 24,
                             },
                             undefined,
@@ -1143,7 +2118,6 @@ exports[`renders visible menu 1`] = `
                         ],
                       ]
                     }
-                    testID="menu-item-title"
                   >
                     Undo
                   </Text>
@@ -1151,7 +2125,6 @@ exports[`renders visible menu 1`] = `
               </View>
             </View>
             <View
-              accessibilityRole="menuitem"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -1181,6 +2154,7 @@ exports[`renders visible menu 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="menuitem"
               style={
                 [
                   false,
@@ -1199,7 +2173,6 @@ exports[`renders visible menu 1`] = `
                   ],
                 ]
               }
-              testID="menu-item"
             >
               <View
                 style={
@@ -1207,6 +2180,9 @@ exports[`renders visible menu 1`] = `
                     {
                       "flexDirection": "row",
                     },
+                    {
+                      "opacity": 1,
+                    },
                     undefined,
                   ]
                 }
@@ -1215,7 +2191,6 @@ exports[`renders visible menu 1`] = `
                   pointerEvents="none"
                   style={
                     [
-                      false,
                       {
                         "justifyContent": "center",
                       },
@@ -1240,7 +2215,7 @@ exports[`renders visible menu 1`] = `
                           "textAlign": "left",
                         },
                         {
-                          "color": "rgba(28, 27, 31, 1)",
+                          "color": "rgba(29, 27, 32, 1)",
                           "writingDirection": "ltr",
                         },
                         [
@@ -1248,17 +2223,16 @@ exports[`renders visible menu 1`] = `
                             "fontFamily": "System",
                             "fontSize": 16,
                             "fontWeight": "400",
-                            "letterSpacing": 0.15,
+                            "letterSpacing": 0.5,
                             "lineHeight": 24,
                           },
                           [
-                            false,
                             {
-                              "color": "rgba(28, 27, 31, 1)",
+                              "color": "rgba(29, 27, 32, 1)",
                               "fontFamily": "System",
                               "fontSize": 16,
                               "fontWeight": "400",
-                              "letterSpacing": 0.15,
+                              "letterSpacing": 0.5,
                               "lineHeight": 24,
                             },
                             undefined,
@@ -1266,7 +2240,6 @@ exports[`renders visible menu 1`] = `
                         ],
                       ]
                     }
-                    testID="menu-item-title"
                   >
                     Redo
                   </Text>
@@ -1277,6 +2250,6 @@ exports[`renders visible menu 1`] = `
         </View>
       </View>
     </View>
-  </View>,
-]
+  </View>
+</>
 `;
diff --git a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap
index e16c6134f4..c316a38599 100644
--- a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap
@@ -1,9 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Menu Item renders menu item 1`] = `
-[
+<>
   <View
-    accessibilityRole="menuitem"
     accessibilityState={
       {
         "busy": undefined,
@@ -33,6 +32,7 @@ exports[`Menu Item renders menu item 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    role="menuitem"
     style={
       [
         false,
@@ -51,7 +51,6 @@ exports[`Menu Item renders menu item 1`] = `
         ],
       ]
     }
-    testID="menu-item"
   >
     <View
       style={
@@ -59,6 +58,9 @@ exports[`Menu Item renders menu item 1`] = `
           {
             "flexDirection": "row",
           },
+          {
+            "opacity": 1,
+          },
           undefined,
         ]
       }
@@ -67,7 +69,6 @@ exports[`Menu Item renders menu item 1`] = `
         pointerEvents="box-none"
         style={
           [
-            false,
             {
               "width": 24,
             },
@@ -108,7 +109,6 @@ exports[`Menu Item renders menu item 1`] = `
         pointerEvents="none"
         style={
           [
-            false,
             {
               "justifyContent": "center",
             },
@@ -133,7 +133,7 @@ exports[`Menu Item renders menu item 1`] = `
                 "textAlign": "left",
               },
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
                 "writingDirection": "ltr",
               },
               [
@@ -141,17 +141,16 @@ exports[`Menu Item renders menu item 1`] = `
                   "fontFamily": "System",
                   "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0.15,
+                  "letterSpacing": 0.5,
                   "lineHeight": 24,
                 },
                 [
-                  false,
                   {
-                    "color": "rgba(28, 27, 31, 1)",
+                    "color": "rgba(29, 27, 32, 1)",
                     "fontFamily": "System",
                     "fontSize": 16,
                     "fontWeight": "400",
-                    "letterSpacing": 0.15,
+                    "letterSpacing": 0.5,
                     "lineHeight": 24,
                   },
                   undefined,
@@ -159,15 +158,13 @@ exports[`Menu Item renders menu item 1`] = `
               ],
             ]
           }
-          testID="menu-item-title"
         >
           Redo
         </Text>
       </View>
     </View>
-  </View>,
+  </View>
   <View
-    accessibilityRole="menuitem"
     accessibilityState={
       {
         "busy": undefined,
@@ -197,6 +194,7 @@ exports[`Menu Item renders menu item 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    role="menuitem"
     style={
       [
         false,
@@ -215,7 +213,6 @@ exports[`Menu Item renders menu item 1`] = `
         ],
       ]
     }
-    testID="menu-item"
   >
     <View
       style={
@@ -223,6 +220,9 @@ exports[`Menu Item renders menu item 1`] = `
           {
             "flexDirection": "row",
           },
+          {
+            "opacity": 1,
+          },
           undefined,
         ]
       }
@@ -231,7 +231,6 @@ exports[`Menu Item renders menu item 1`] = `
         pointerEvents="box-none"
         style={
           [
-            false,
             {
               "width": 24,
             },
@@ -272,7 +271,6 @@ exports[`Menu Item renders menu item 1`] = `
         pointerEvents="none"
         style={
           [
-            false,
             {
               "justifyContent": "center",
             },
@@ -297,7 +295,7 @@ exports[`Menu Item renders menu item 1`] = `
                 "textAlign": "left",
               },
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
                 "writingDirection": "ltr",
               },
               [
@@ -305,17 +303,16 @@ exports[`Menu Item renders menu item 1`] = `
                   "fontFamily": "System",
                   "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0.15,
+                  "letterSpacing": 0.5,
                   "lineHeight": 24,
                 },
                 [
-                  false,
                   {
-                    "color": "rgba(28, 27, 31, 1)",
+                    "color": "rgba(29, 27, 32, 1)",
                     "fontFamily": "System",
                     "fontSize": 16,
                     "fontWeight": "400",
-                    "letterSpacing": 0.15,
+                    "letterSpacing": 0.5,
                     "lineHeight": 24,
                   },
                   undefined,
@@ -323,15 +320,13 @@ exports[`Menu Item renders menu item 1`] = `
               ],
             ]
           }
-          testID="menu-item-title"
         >
           Undo
         </Text>
       </View>
     </View>
-  </View>,
+  </View>
   <View
-    accessibilityRole="menuitem"
     accessibilityState={
       {
         "busy": undefined,
@@ -361,6 +356,7 @@ exports[`Menu Item renders menu item 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    role="menuitem"
     style={
       [
         false,
@@ -379,7 +375,6 @@ exports[`Menu Item renders menu item 1`] = `
         ],
       ]
     }
-    testID="menu-item"
   >
     <View
       style={
@@ -387,6 +382,9 @@ exports[`Menu Item renders menu item 1`] = `
           {
             "flexDirection": "row",
           },
+          {
+            "opacity": 0.38,
+          },
           undefined,
         ]
       }
@@ -395,7 +393,6 @@ exports[`Menu Item renders menu item 1`] = `
         pointerEvents="box-none"
         style={
           [
-            false,
             {
               "width": 24,
             },
@@ -410,7 +407,7 @@ exports[`Menu Item renders menu item 1`] = `
           style={
             [
               {
-                "color": "rgba(28, 27, 31, 0.38)",
+                "color": "rgba(73, 69, 79, 1)",
                 "fontSize": 24,
               },
               [
@@ -436,7 +433,6 @@ exports[`Menu Item renders menu item 1`] = `
         pointerEvents="none"
         style={
           [
-            false,
             {
               "justifyContent": "center",
             },
@@ -461,7 +457,7 @@ exports[`Menu Item renders menu item 1`] = `
                 "textAlign": "left",
               },
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
                 "writingDirection": "ltr",
               },
               [
@@ -469,17 +465,16 @@ exports[`Menu Item renders menu item 1`] = `
                   "fontFamily": "System",
                   "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0.15,
+                  "letterSpacing": 0.5,
                   "lineHeight": 24,
                 },
                 [
-                  false,
                   {
-                    "color": "rgba(28, 27, 31, 0.38)",
+                    "color": "rgba(29, 27, 32, 1)",
                     "fontFamily": "System",
                     "fontSize": 16,
                     "fontWeight": "400",
-                    "letterSpacing": 0.15,
+                    "letterSpacing": 0.5,
                     "lineHeight": 24,
                   },
                   undefined,
@@ -487,15 +482,13 @@ exports[`Menu Item renders menu item 1`] = `
               ],
             ]
           }
-          testID="menu-item-title"
         >
           Cut
         </Text>
       </View>
     </View>
-  </View>,
+  </View>
   <View
-    accessibilityRole="menuitem"
     accessibilityState={
       {
         "busy": undefined,
@@ -525,6 +518,7 @@ exports[`Menu Item renders menu item 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    role="menuitem"
     style={
       [
         false,
@@ -543,7 +537,6 @@ exports[`Menu Item renders menu item 1`] = `
         ],
       ]
     }
-    testID="menu-item"
   >
     <View
       style={
@@ -551,6 +544,9 @@ exports[`Menu Item renders menu item 1`] = `
           {
             "flexDirection": "row",
           },
+          {
+            "opacity": 0.38,
+          },
           undefined,
         ]
       }
@@ -559,7 +555,6 @@ exports[`Menu Item renders menu item 1`] = `
         pointerEvents="box-none"
         style={
           [
-            false,
             {
               "width": 24,
             },
@@ -574,7 +569,7 @@ exports[`Menu Item renders menu item 1`] = `
           style={
             [
               {
-                "color": "rgba(28, 27, 31, 0.38)",
+                "color": "rgba(73, 69, 79, 1)",
                 "fontSize": 24,
               },
               [
@@ -600,7 +595,6 @@ exports[`Menu Item renders menu item 1`] = `
         pointerEvents="none"
         style={
           [
-            false,
             {
               "justifyContent": "center",
             },
@@ -625,7 +619,7 @@ exports[`Menu Item renders menu item 1`] = `
                 "textAlign": "left",
               },
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
                 "writingDirection": "ltr",
               },
               [
@@ -633,17 +627,16 @@ exports[`Menu Item renders menu item 1`] = `
                   "fontFamily": "System",
                   "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0.15,
+                  "letterSpacing": 0.5,
                   "lineHeight": 24,
                 },
                 [
-                  false,
                   {
-                    "color": "rgba(28, 27, 31, 0.38)",
+                    "color": "rgba(29, 27, 32, 1)",
                     "fontFamily": "System",
                     "fontSize": 16,
                     "fontWeight": "400",
-                    "letterSpacing": 0.15,
+                    "letterSpacing": 0.5,
                     "lineHeight": 24,
                   },
                   undefined,
@@ -651,15 +644,13 @@ exports[`Menu Item renders menu item 1`] = `
               ],
             ]
           }
-          testID="menu-item-title"
         >
           Copy
         </Text>
       </View>
     </View>
-  </View>,
+  </View>
   <View
-    accessibilityRole="menuitem"
     accessibilityState={
       {
         "busy": undefined,
@@ -689,6 +680,7 @@ exports[`Menu Item renders menu item 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    role="menuitem"
     style={
       [
         false,
@@ -707,7 +699,6 @@ exports[`Menu Item renders menu item 1`] = `
         ],
       ]
     }
-    testID="menu-item"
   >
     <View
       style={
@@ -715,6 +706,9 @@ exports[`Menu Item renders menu item 1`] = `
           {
             "flexDirection": "row",
           },
+          {
+            "opacity": 1,
+          },
           undefined,
         ]
       }
@@ -723,7 +717,6 @@ exports[`Menu Item renders menu item 1`] = `
         pointerEvents="none"
         style={
           [
-            false,
             {
               "justifyContent": "center",
             },
@@ -748,7 +741,7 @@ exports[`Menu Item renders menu item 1`] = `
                 "textAlign": "left",
               },
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
                 "writingDirection": "ltr",
               },
               [
@@ -756,17 +749,16 @@ exports[`Menu Item renders menu item 1`] = `
                   "fontFamily": "System",
                   "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0.15,
+                  "letterSpacing": 0.5,
                   "lineHeight": 24,
                 },
                 [
-                  false,
                   {
-                    "color": "rgba(28, 27, 31, 1)",
+                    "color": "rgba(29, 27, 32, 1)",
                     "fontFamily": "System",
                     "fontSize": 16,
                     "fontWeight": "400",
-                    "letterSpacing": 0.15,
+                    "letterSpacing": 0.5,
                     "lineHeight": 24,
                   },
                   undefined,
@@ -774,12 +766,11 @@ exports[`Menu Item renders menu item 1`] = `
               ],
             ]
           }
-          testID="menu-item-title"
         >
           Paste
         </Text>
       </View>
     </View>
-  </View>,
-]
+  </View>
+</>
 `;
diff --git a/src/components/__tests__/__snapshots__/Modal.test.tsx.snap b/src/components/__tests__/__snapshots__/Modal.test.tsx.snap
new file mode 100644
index 0000000000..8cf23e1346
--- /dev/null
+++ b/src/components/__tests__/__snapshots__/Modal.test.tsx.snap
@@ -0,0 +1,5940 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modal closes a non-dismissible modal when visible changes from true to false 1`] = `
+<>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      aria-live="polite"
+      collapsable={false}
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+      testID="modal"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": true,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        aria-hidden={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "backgroundColor": "rgba(0, 0, 0, 1)",
+              "opacity": 0.32,
+            },
+            {},
+          ]
+        }
+        tabIndex={-1}
+        testID="backdrop"
+      />
+      <View
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "marginBottom": 44,
+              "marginTop": 37,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          aria-modal={true}
+          collapsable={false}
+          role="dialog"
+          style={
+            [
+              {},
+              {
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 1,
+              },
+              {},
+              undefined,
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": undefined,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0.55,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 0.79,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.25,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
+
+exports[`Modal closes a non-dismissible modal when visible changes from true to false 2`] = `
+<>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      aria-live="polite"
+      collapsable={false}
+      pointerEvents="none"
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+      testID="modal"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": true,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        aria-hidden={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "backgroundColor": "rgba(0, 0, 0, 1)",
+              "opacity": 0.32,
+            },
+            {},
+          ]
+        }
+        tabIndex={-1}
+        testID="backdrop"
+      />
+      <View
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "marginBottom": 44,
+              "marginTop": 37,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          aria-modal={true}
+          collapsable={false}
+          role="dialog"
+          style={
+            [
+              {},
+              {
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 1,
+              },
+              {},
+              undefined,
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": undefined,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0.55,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 0.79,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.25,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
+
+exports[`Modal invokes onDismiss immediately when the backdrop is pressed 1`] = `
+<>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      aria-live="polite"
+      collapsable={false}
+      onAccessibilityEscape={[Function]}
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+      testID="modal"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        aria-hidden={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "backgroundColor": "rgba(0, 0, 0, 1)",
+              "opacity": 0.32,
+            },
+            {},
+          ]
+        }
+        tabIndex={-1}
+        testID="backdrop"
+      />
+      <View
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "marginBottom": 44,
+              "marginTop": 37,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          aria-modal={true}
+          collapsable={false}
+          role="dialog"
+          style={
+            [
+              {},
+              {
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 1,
+              },
+              {},
+              undefined,
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": undefined,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0.55,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 0.79,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.25,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityLabel="Close modal"
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              {
+                "height": 1,
+                "position": "absolute",
+                "width": 1,
+              }
+            }
+            tabIndex={-1}
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
+
+exports[`Modal invokes onDismiss immediately when the backdrop is pressed 2`] = `
+<>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      aria-live="polite"
+      collapsable={false}
+      onAccessibilityEscape={[Function]}
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+      testID="modal"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        aria-hidden={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "backgroundColor": "rgba(0, 0, 0, 1)",
+              "opacity": 0.32,
+            },
+            {},
+          ]
+        }
+        tabIndex={-1}
+        testID="backdrop"
+      />
+      <View
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "marginBottom": 44,
+              "marginTop": 37,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          aria-modal={true}
+          collapsable={false}
+          role="dialog"
+          style={
+            [
+              {},
+              {
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 1,
+              },
+              {},
+              undefined,
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": undefined,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0.55,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 0.79,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.25,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityLabel="Close modal"
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              {
+                "height": 1,
+                "position": "absolute",
+                "width": 1,
+              }
+            }
+            tabIndex={-1}
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
+
+exports[`Modal invokes onDismiss when the Android back button is pressed 1`] = `
+<>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      aria-live="polite"
+      collapsable={false}
+      onAccessibilityEscape={[Function]}
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+      testID="modal"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        aria-hidden={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "backgroundColor": "rgba(0, 0, 0, 1)",
+              "opacity": 0.32,
+            },
+            {},
+          ]
+        }
+        tabIndex={-1}
+        testID="backdrop"
+      />
+      <View
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "marginBottom": 44,
+              "marginTop": 37,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          aria-modal={true}
+          collapsable={false}
+          role="dialog"
+          style={
+            [
+              {},
+              {
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 1,
+              },
+              {},
+              undefined,
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": undefined,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0.55,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 0.79,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.25,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityLabel="Close modal"
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              {
+                "height": 1,
+                "position": "absolute",
+                "width": 1,
+              }
+            }
+            tabIndex={-1}
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
+
+exports[`Modal invokes onDismiss when the Android back button is pressed 2`] = `
+<>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      aria-live="polite"
+      collapsable={false}
+      onAccessibilityEscape={[Function]}
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+      testID="modal"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        aria-hidden={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "backgroundColor": "rgba(0, 0, 0, 1)",
+              "opacity": 0.32,
+            },
+            {},
+          ]
+        }
+        tabIndex={-1}
+        testID="backdrop"
+      />
+      <View
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "marginBottom": 44,
+              "marginTop": 37,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          aria-modal={true}
+          collapsable={false}
+          role="dialog"
+          style={
+            [
+              {},
+              {
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 1,
+              },
+              {},
+              undefined,
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": undefined,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0.55,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 0.79,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.25,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityLabel="Close modal"
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              {
+                "height": 1,
+                "position": "absolute",
+                "width": 1,
+              }
+            }
+            tabIndex={-1}
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
+
+exports[`Modal invokes onDismiss when the Android back button is pressed 3`] = `
+<>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      aria-live="polite"
+      collapsable={false}
+      onAccessibilityEscape={[Function]}
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+      testID="modal"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        aria-hidden={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "backgroundColor": "rgba(0, 0, 0, 1)",
+              "opacity": 0.32,
+            },
+            {},
+          ]
+        }
+        tabIndex={-1}
+        testID="backdrop"
+      />
+      <View
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "marginBottom": 44,
+              "marginTop": 37,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          aria-modal={true}
+          collapsable={false}
+          role="dialog"
+          style={
+            [
+              {},
+              {
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 1,
+              },
+              {},
+              undefined,
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": undefined,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0.55,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 0.79,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.25,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityLabel="Close modal"
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              {
+                "height": 1,
+                "position": "absolute",
+                "width": 1,
+              }
+            }
+            tabIndex={-1}
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
+
+exports[`Modal keeps a non-dismissible modal visible when the Android back button is pressed 1`] = `
+<>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      aria-live="polite"
+      collapsable={false}
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+      testID="modal"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": true,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        aria-hidden={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "backgroundColor": "rgba(0, 0, 0, 1)",
+              "opacity": 0.32,
+            },
+            {},
+          ]
+        }
+        tabIndex={-1}
+        testID="backdrop"
+      />
+      <View
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "marginBottom": 44,
+              "marginTop": 37,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          aria-modal={true}
+          collapsable={false}
+          role="dialog"
+          style={
+            [
+              {},
+              {
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 1,
+              },
+              {},
+              undefined,
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": undefined,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0.55,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 0.79,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.25,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
+
+exports[`Modal keeps a non-dismissible modal visible when the Android back button is pressed 2`] = `
+<>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      aria-live="polite"
+      collapsable={false}
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+      testID="modal"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": true,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        aria-hidden={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "backgroundColor": "rgba(0, 0, 0, 1)",
+              "opacity": 0.32,
+            },
+            {},
+          ]
+        }
+        tabIndex={-1}
+        testID="backdrop"
+      />
+      <View
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "marginBottom": 44,
+              "marginTop": 37,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          aria-modal={true}
+          collapsable={false}
+          role="dialog"
+          style={
+            [
+              {},
+              {
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 1,
+              },
+              {},
+              undefined,
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": undefined,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0.55,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 0.79,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.25,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
+
+exports[`Modal keeps a non-dismissible modal visible when the Android back button is pressed 3`] = `
+<>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      aria-live="polite"
+      collapsable={false}
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+      testID="modal"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": true,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        aria-hidden={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "backgroundColor": "rgba(0, 0, 0, 1)",
+              "opacity": 0.32,
+            },
+            {},
+          ]
+        }
+        tabIndex={-1}
+        testID="backdrop"
+      />
+      <View
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "marginBottom": 44,
+              "marginTop": 37,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          aria-modal={true}
+          collapsable={false}
+          role="dialog"
+          style={
+            [
+              {},
+              {
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 1,
+              },
+              {},
+              undefined,
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": undefined,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0.55,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 0.79,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.25,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
+
+exports[`Modal keeps a non-dismissible modal visible when the backdrop is pressed 1`] = `
+<>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      aria-live="polite"
+      collapsable={false}
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+      testID="modal"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": true,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        aria-hidden={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "backgroundColor": "rgba(0, 0, 0, 1)",
+              "opacity": 0.32,
+            },
+            {},
+          ]
+        }
+        tabIndex={-1}
+        testID="backdrop"
+      />
+      <View
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "marginBottom": 44,
+              "marginTop": 37,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          aria-modal={true}
+          collapsable={false}
+          role="dialog"
+          style={
+            [
+              {},
+              {
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 1,
+              },
+              {},
+              undefined,
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": undefined,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0.55,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 0.79,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.25,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
+
+exports[`Modal keeps a non-dismissible modal visible when the backdrop is pressed 2`] = `
+<>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      aria-live="polite"
+      collapsable={false}
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+      testID="modal"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": true,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        aria-hidden={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "backgroundColor": "rgba(0, 0, 0, 1)",
+              "opacity": 0.32,
+            },
+            {},
+          ]
+        }
+        tabIndex={-1}
+        testID="backdrop"
+      />
+      <View
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "marginBottom": 44,
+              "marginTop": 37,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          aria-modal={true}
+          collapsable={false}
+          role="dialog"
+          style={
+            [
+              {},
+              {
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 1,
+              },
+              {},
+              undefined,
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": undefined,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0.55,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 0.79,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.25,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
+
+exports[`Modal keeps a non-dismissible modal visible when the backdrop is pressed 3`] = `
+<>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      aria-live="polite"
+      collapsable={false}
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+      testID="modal"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": true,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        aria-hidden={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "backgroundColor": "rgba(0, 0, 0, 1)",
+              "opacity": 0.32,
+            },
+            {},
+          ]
+        }
+        tabIndex={-1}
+        testID="backdrop"
+      />
+      <View
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "marginBottom": 44,
+              "marginTop": 37,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          aria-modal={true}
+          collapsable={false}
+          role="dialog"
+          style={
+            [
+              {},
+              {
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 1,
+              },
+              {},
+              undefined,
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": undefined,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0.55,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 0.79,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.25,
+                },
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
+
+exports[`Modal keeps the modal closed when visible changes back to false while opening 1`] = `
+<>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      aria-live="polite"
+      collapsable={false}
+      onAccessibilityEscape={[Function]}
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+      testID="modal"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        aria-hidden={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "backgroundColor": "rgba(0, 0, 0, 1)",
+              "opacity": 0,
+            },
+            {},
+          ]
+        }
+        tabIndex={-1}
+        testID="backdrop"
+      />
+      <View
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "marginBottom": 44,
+              "marginTop": 37,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          aria-modal={true}
+          collapsable={false}
+          role="dialog"
+          style={
+            [
+              {},
+              {
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 0,
+              },
+              {},
+              undefined,
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": undefined,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0.55,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 0.79,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.25,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityLabel="Close modal"
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              {
+                "height": 1,
+                "position": "absolute",
+                "width": 1,
+              }
+            }
+            tabIndex={-1}
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
+
+exports[`Modal keeps the modal open when visible changes back to true while closing 1`] = `
+<>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      aria-live="polite"
+      collapsable={false}
+      onAccessibilityEscape={[Function]}
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+      testID="modal"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        aria-hidden={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "backgroundColor": "rgba(0, 0, 0, 1)",
+              "opacity": 0.32,
+            },
+            {},
+          ]
+        }
+        tabIndex={-1}
+        testID="backdrop"
+      />
+      <View
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "marginBottom": 44,
+              "marginTop": 37,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          aria-modal={true}
+          collapsable={false}
+          role="dialog"
+          style={
+            [
+              {},
+              {
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 1,
+              },
+              {},
+              undefined,
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": undefined,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0.55,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 0.79,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.25,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityLabel="Close modal"
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              {
+                "height": 1,
+                "position": "absolute",
+                "width": 1,
+              }
+            }
+            tabIndex={-1}
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
+
+exports[`Modal keeps the modal open when visible changes back to true while closing 2`] = `
+<>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      aria-live="polite"
+      collapsable={false}
+      onAccessibilityEscape={[Function]}
+      pointerEvents="none"
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+      testID="modal"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        aria-hidden={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "backgroundColor": "rgba(0, 0, 0, 1)",
+              "opacity": 0.32,
+            },
+            {},
+          ]
+        }
+        tabIndex={-1}
+        testID="backdrop"
+      />
+      <View
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "marginBottom": 44,
+              "marginTop": 37,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          aria-modal={true}
+          collapsable={false}
+          role="dialog"
+          style={
+            [
+              {},
+              {
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 1,
+              },
+              {},
+              undefined,
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": undefined,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0.55,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 0.79,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.25,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityLabel="Close modal"
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              {
+                "height": 1,
+                "position": "absolute",
+                "width": 1,
+              }
+            }
+            tabIndex={-1}
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
+
+exports[`Modal keeps the modal open when visible changes back to true while closing 3`] = `
+<>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      aria-live="polite"
+      collapsable={false}
+      onAccessibilityEscape={[Function]}
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+      testID="modal"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        aria-hidden={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "backgroundColor": "rgba(0, 0, 0, 1)",
+              "opacity": 0.32,
+            },
+            {},
+          ]
+        }
+        tabIndex={-1}
+        testID="backdrop"
+      />
+      <View
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "marginBottom": 44,
+              "marginTop": 37,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          aria-modal={true}
+          collapsable={false}
+          role="dialog"
+          style={
+            [
+              {},
+              {
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 1,
+              },
+              {},
+              undefined,
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": undefined,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0.55,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 0.79,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.25,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityLabel="Close modal"
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              {
+                "height": 1,
+                "position": "absolute",
+                "width": 1,
+              }
+            }
+            tabIndex={-1}
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
+
+exports[`Modal receives appropriate top and bottom insets 1`] = `
+<>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      aria-live="polite"
+      collapsable={false}
+      onAccessibilityEscape={[Function]}
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+      testID="modal"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        aria-hidden={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "backgroundColor": "rgba(0, 0, 0, 1)",
+              "opacity": 0.32,
+            },
+            {},
+          ]
+        }
+        tabIndex={-1}
+        testID="backdrop"
+      />
+      <View
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "marginBottom": 44,
+              "marginTop": 37,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          aria-modal={true}
+          collapsable={false}
+          role="dialog"
+          style={
+            [
+              {},
+              {
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 1,
+              },
+              {},
+              undefined,
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": undefined,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0.55,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 0.79,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.25,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityLabel="Close modal"
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              {
+                "height": 1,
+                "position": "absolute",
+                "width": 1,
+              }
+            }
+            tabIndex={-1}
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
+
+exports[`Modal runs the closing animation when visible changes to false after dismissing 1`] = `
+<>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      aria-live="polite"
+      collapsable={false}
+      onAccessibilityEscape={[Function]}
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+      testID="modal"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        aria-hidden={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "backgroundColor": "rgba(0, 0, 0, 1)",
+              "opacity": 0.32,
+            },
+            {},
+          ]
+        }
+        tabIndex={-1}
+        testID="backdrop"
+      />
+      <View
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "marginBottom": 44,
+              "marginTop": 37,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          aria-modal={true}
+          collapsable={false}
+          role="dialog"
+          style={
+            [
+              {},
+              {
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 1,
+              },
+              {},
+              undefined,
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": undefined,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0.55,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 0.79,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.25,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityLabel="Close modal"
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              {
+                "height": 1,
+                "position": "absolute",
+                "width": 1,
+              }
+            }
+            tabIndex={-1}
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
+
+exports[`Modal runs the closing animation when visible changes to false after dismissing 2`] = `
+<>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      aria-live="polite"
+      collapsable={false}
+      onAccessibilityEscape={[Function]}
+      pointerEvents="none"
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+      testID="modal"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        aria-hidden={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "backgroundColor": "rgba(0, 0, 0, 1)",
+              "opacity": 0.32,
+            },
+            {},
+          ]
+        }
+        tabIndex={-1}
+        testID="backdrop"
+      />
+      <View
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "marginBottom": 44,
+              "marginTop": 37,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          aria-modal={true}
+          collapsable={false}
+          role="dialog"
+          style={
+            [
+              {},
+              {
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 1,
+              },
+              {},
+              undefined,
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": undefined,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0.55,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 0.79,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.25,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityLabel="Close modal"
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              {
+                "height": 1,
+                "position": "absolute",
+                "width": 1,
+              }
+            }
+            tabIndex={-1}
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
+
+exports[`Modal runs the closing animation when visible changes to false after dismissing 3`] = `
+<>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      aria-live="polite"
+      collapsable={false}
+      onAccessibilityEscape={[Function]}
+      pointerEvents="none"
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+      testID="modal"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        aria-hidden={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "backgroundColor": "rgba(0, 0, 0, 1)",
+              "opacity": 0.32,
+            },
+            {},
+          ]
+        }
+        tabIndex={-1}
+        testID="backdrop"
+      />
+      <View
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "marginBottom": 44,
+              "marginTop": 37,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          aria-modal={true}
+          collapsable={false}
+          role="dialog"
+          style={
+            [
+              {},
+              {
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 1,
+              },
+              {},
+              undefined,
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": undefined,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0.55,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 0.79,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.25,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityLabel="Close modal"
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              {
+                "height": 1,
+                "position": "absolute",
+                "width": 1,
+              }
+            }
+            tabIndex={-1}
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
+
+exports[`Modal runs the fade-in animation when visible changes from false to true 1`] = `
+<>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      aria-live="polite"
+      collapsable={false}
+      onAccessibilityEscape={[Function]}
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+      testID="modal"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        aria-hidden={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "backgroundColor": "rgba(0, 0, 0, 1)",
+              "opacity": 0,
+            },
+            {},
+          ]
+        }
+        tabIndex={-1}
+        testID="backdrop"
+      />
+      <View
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "marginBottom": 44,
+              "marginTop": 37,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          aria-modal={true}
+          collapsable={false}
+          role="dialog"
+          style={
+            [
+              {},
+              {
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 0,
+              },
+              {},
+              undefined,
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": undefined,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0.55,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 0.79,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.25,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityLabel="Close modal"
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              {
+                "height": 1,
+                "position": "absolute",
+                "width": 1,
+              }
+            }
+            tabIndex={-1}
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
+
+exports[`Modal runs the fade-in animation when visible changes from false to true 2`] = `
+<>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      aria-live="polite"
+      collapsable={false}
+      onAccessibilityEscape={[Function]}
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+      testID="modal"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        aria-hidden={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "backgroundColor": "rgba(0, 0, 0, 1)",
+              "opacity": 0.32,
+            },
+            {},
+          ]
+        }
+        tabIndex={-1}
+        testID="backdrop"
+      />
+      <View
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "marginBottom": 44,
+              "marginTop": 37,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          aria-modal={true}
+          collapsable={false}
+          role="dialog"
+          style={
+            [
+              {},
+              {
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 1,
+              },
+              {},
+              undefined,
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": undefined,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0.55,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 0.79,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.25,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityLabel="Close modal"
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              {
+                "height": 1,
+                "position": "absolute",
+                "width": 1,
+              }
+            }
+            tabIndex={-1}
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
+
+exports[`Modal runs the fade-out animation when visible changes from true to false 1`] = `
+<>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      aria-live="polite"
+      collapsable={false}
+      onAccessibilityEscape={[Function]}
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+      testID="modal"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        aria-hidden={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "backgroundColor": "rgba(0, 0, 0, 1)",
+              "opacity": 0.32,
+            },
+            {},
+          ]
+        }
+        tabIndex={-1}
+        testID="backdrop"
+      />
+      <View
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "marginBottom": 44,
+              "marginTop": 37,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          aria-modal={true}
+          collapsable={false}
+          role="dialog"
+          style={
+            [
+              {},
+              {
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 1,
+              },
+              {},
+              undefined,
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": undefined,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0.55,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 0.79,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.25,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityLabel="Close modal"
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              {
+                "height": 1,
+                "position": "absolute",
+                "width": 1,
+              }
+            }
+            tabIndex={-1}
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
+
+exports[`Modal runs the fade-out animation when visible changes from true to false 2`] = `
+<>
+  <View
+    aria-hidden={true}
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      aria-live="polite"
+      collapsable={false}
+      onAccessibilityEscape={[Function]}
+      pointerEvents="none"
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+      testID="modal"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        aria-hidden={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "backgroundColor": "rgba(0, 0, 0, 1)",
+              "opacity": 0.32,
+            },
+            {},
+          ]
+        }
+        tabIndex={-1}
+        testID="backdrop"
+      />
+      <View
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "marginBottom": 44,
+              "marginTop": 37,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          aria-modal={true}
+          collapsable={false}
+          role="dialog"
+          style={
+            [
+              {},
+              {
+                "justifyContent": "center",
+              },
+              {
+                "opacity": 1,
+              },
+              {},
+              undefined,
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": undefined,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0.55,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 0.79,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
+                {
+                  "backgroundColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.25,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityLabel="Close modal"
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            role="button"
+            style={
+              {
+                "height": 1,
+                "position": "absolute",
+                "width": 1,
+              }
+            }
+            tabIndex={-1}
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</>
+`;
diff --git a/src/components/__tests__/__snapshots__/Portal.test.tsx.snap b/src/components/__tests__/__snapshots__/Portal.test.tsx.snap
index d4a8f49b9d..7168f606d8 100644
--- a/src/components/__tests__/__snapshots__/Portal.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Portal.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders portal with siblings 1`] = `
-[
+<>
   <View
     collapsable={false}
     pointerEvents="box-none"
@@ -14,7 +14,7 @@ exports[`renders portal with siblings 1`] = `
     <Text>
       Outside content
     </Text>
-  </View>,
+  </View>
   <View
     collapsable={false}
     pointerEvents="box-none"
@@ -33,6 +33,6 @@ exports[`renders portal with siblings 1`] = `
     >
       Portal content
     </Text>
-  </View>,
-]
+  </View>
+</>
 `;
diff --git a/src/components/__tests__/__snapshots__/ProgressBar.test.tsx.snap b/src/components/__tests__/__snapshots__/ProgressBar.test.tsx.snap
index ae5c19ff75..d747e9794b 100644
--- a/src/components/__tests__/__snapshots__/ProgressBar.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ProgressBar.test.tsx.snap
@@ -2,23 +2,14 @@
 
 exports[`renders colored progress bar 1`] = `
 <View
-  accessibilityRole="progressbar"
-  accessibilityState={
-    {
-      "busy": true,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": 100,
-      "min": 0,
-      "now": 20,
-    }
-  }
   accessible={true}
+  aria-busy={true}
+  aria-valuemax={100}
+  aria-valuemin={0}
+  aria-valuenow={20}
   onLayout={[Function]}
+  role="progressbar"
   style={false}
-  testID="progress-bar"
 >
   <View
     collapsable={false}
@@ -48,7 +39,6 @@ exports[`renders colored progress bar 1`] = `
           "width": 100,
         }
       }
-      testID="progress-bar-fill"
     />
   </View>
 </View>
@@ -56,23 +46,14 @@ exports[`renders colored progress bar 1`] = `
 
 exports[`renders hidden progress bar 1`] = `
 <View
-  accessibilityRole="progressbar"
-  accessibilityState={
-    {
-      "busy": false,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": 100,
-      "min": 0,
-      "now": 20,
-    }
-  }
   accessible={true}
+  aria-busy={false}
+  aria-valuemax={100}
+  aria-valuemin={0}
+  aria-valuenow={20}
   onLayout={[Function]}
+  role="progressbar"
   style={false}
-  testID="progress-bar"
 >
   <View
     collapsable={false}
@@ -102,7 +83,6 @@ exports[`renders hidden progress bar 1`] = `
           "width": 100,
         }
       }
-      testID="progress-bar-fill"
     />
   </View>
 </View>
@@ -110,15 +90,54 @@ exports[`renders hidden progress bar 1`] = `
 
 exports[`renders indeterminate progress bar 1`] = `
 <View
-  accessibilityRole="progressbar"
-  accessibilityState={
-    {
-      "busy": true,
+  accessible={true}
+  aria-busy={true}
+  onLayout={[Function]}
+  role="progressbar"
+  style={false}
+>
+  <View
+    collapsable={false}
+    style={
+      {
+        "backgroundColor": "rgba(231, 224, 236, 1)",
+        "height": 4,
+        "opacity": 0,
+        "overflow": "hidden",
+      }
     }
-  }
-  accessibilityValue={{}}
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "rgba(103, 80, 164, 1)",
+          "flex": 1,
+          "transform": [
+            {
+              "translateX": -50,
+            },
+            {
+              "scaleX": 0.0001,
+            },
+          ],
+          "width": 100,
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`renders progress bar with custom style of filled part 1`] = `
+<View
   accessible={true}
+  aria-busy={true}
+  aria-valuemax={100}
+  aria-valuemin={0}
+  aria-valuenow={20}
   onLayout={[Function]}
+  role="progressbar"
   style={false}
   testID="progress-bar"
 >
@@ -138,6 +157,7 @@ exports[`renders indeterminate progress bar 1`] = `
       style={
         {
           "backgroundColor": "rgba(103, 80, 164, 1)",
+          "borderRadius": 4,
           "flex": 1,
           "transform": [
             {
@@ -150,7 +170,6 @@ exports[`renders indeterminate progress bar 1`] = `
           "width": 100,
         }
       }
-      testID="progress-bar-fill"
     />
   </View>
 </View>
@@ -158,23 +177,14 @@ exports[`renders indeterminate progress bar 1`] = `
 
 exports[`renders progress bar with specific progress 1`] = `
 <View
-  accessibilityRole="progressbar"
-  accessibilityState={
-    {
-      "busy": true,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": 100,
-      "min": 0,
-      "now": 20,
-    }
-  }
   accessible={true}
+  aria-busy={true}
+  aria-valuemax={100}
+  aria-valuemin={0}
+  aria-valuenow={20}
   onLayout={[Function]}
+  role="progressbar"
   style={false}
-  testID="progress-bar"
 >
   <View
     collapsable={false}
@@ -204,7 +214,6 @@ exports[`renders progress bar with specific progress 1`] = `
           "width": 100,
         }
       }
-      testID="progress-bar-fill"
     />
   </View>
 </View>
diff --git a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap
index f30e19f3f8..c200e71706 100644
--- a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap
@@ -4,238 +4,282 @@ exports[`activity indicator snapshot test 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgb(238, 232, 244)",
-      "borderRadius": 28,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="search-bar-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+    [
+      {},
       {
         "alignItems": "center",
-        "backgroundColor": "rgb(238, 232, 244)",
-        "borderRadius": 28,
-        "flex": undefined,
         "flexDirection": "row",
-        "shadowColor": "#000",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(236, 230, 240, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 28,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
-      }
-    }
-    testID="search-bar-container"
-  >
-    <View
-      collapsable={false}
-      style={
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
         {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "#000",
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(236, 230, 240, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 28,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
           },
           "shadowOpacity": 0,
           "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "margin": 6,
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": undefined,
+          "height": 40,
           "width": 40,
+        },
+        {
+          "borderColor": "rgba(202, 196, 208, 1)",
+          "borderRadius": 20,
+          "borderWidth": 0,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessibilityLabel="search"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": true,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      centered={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        {
+          "bottom": 6,
+          "left": 6,
+          "right": 6,
+          "top": 6,
         }
       }
-      testID="search-bar-icon-container-outer-layer"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          [
+            {
+              "alignItems": "center",
+              "flexGrow": 1,
+              "justifyContent": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
     >
       <View
-        collapsable={false}
         style={
           {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(121, 116, 126, 1)",
-            "borderRadius": 20,
-            "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+            "opacity": 1,
           }
         }
-        testID="search-bar-icon-container"
       >
-        <View
-          accessibilityComponentType="button"
-          accessibilityLabel="search"
-          accessibilityRole="button"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": true,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityTraits="button"
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
-            {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
           style={
             [
               {
-                "overflow": "hidden",
+                "color": "rgba(73, 69, 79, 1)",
+                "fontSize": 24,
               },
               [
                 {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
+                  "lineHeight": 24,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
                 },
-                undefined,
               ],
             ]
           }
-          testID="search-bar-icon"
         >
-          <Text
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "rgba(73, 69, 79, 1)",
-                  "fontSize": 24,
-                },
-                [
-                  {
-                    "lineHeight": 24,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                  },
-                ],
-              ]
-            }
-          >
-            magnify
-          </Text>
-        </View>
+          magnify
+        </Text>
       </View>
     </View>
-    <TextInput
-      accessibilityRole="search"
-      keyboardAppearance="light"
-      placeholder=""
-      placeholderTextColor="rgba(28, 27, 31, 1)"
-      returnKeyType="search"
-      selectionColor="rgba(103, 80, 164, 1)"
-      style={
-        [
-          {
-            "alignSelf": "stretch",
-            "flex": 1,
-            "fontSize": 18,
-            "minWidth": 0,
-            "paddingLeft": 8,
-            "textAlign": "left",
-          },
-          {
-            "color": "rgba(73, 69, 79, 1)",
-            "fontFamily": "System",
-            "fontSize": 16,
-            "fontWeight": "400",
-            "letterSpacing": 0.15,
-            "lineHeight": 0,
-          },
-          {
-            "minHeight": 56,
-            "paddingLeft": 0,
-          },
-          undefined,
-        ]
-      }
-      testID="search-bar"
-      underlineColorAndroid="transparent"
-      value=""
-    />
+  </View>
+  <TextInput
+    keyboardAppearance="light"
+    placeholder=""
+    placeholderTextColor="rgba(29, 27, 32, 1)"
+    returnKeyType="search"
+    role="searchbox"
+    selectionColor="rgba(103, 80, 164, 1)"
+    style={
+      [
+        {
+          "alignSelf": "stretch",
+          "flex": 1,
+          "fontSize": 18,
+          "minWidth": 0,
+          "paddingLeft": 8,
+        },
+        {
+          "color": "rgba(73, 69, 79, 1)",
+          "fontFamily": "System",
+          "fontSize": 16,
+          "fontWeight": "400",
+          "letterSpacing": 0.5,
+          "lineHeight": 0,
+          "textAlign": "left",
+        },
+        {
+          "minHeight": 56,
+          "paddingLeft": 0,
+        },
+        undefined,
+      ]
+    }
+    underlineColorAndroid="transparent"
+    value=""
+  />
+  <View
+    accessible={true}
+    aria-busy={true}
+    role="progressbar"
+    style={
+      [
+        {
+          "alignItems": "center",
+          "justifyContent": "center",
+        },
+        {
+          "marginHorizontal": 16,
+        },
+      ]
+    }
+  >
     <View
-      accessibilityRole="progressbar"
-      accessibilityState={
+      collapsable={false}
+      style={
         {
-          "busy": true,
+          "height": 24,
+          "opacity": 1,
+          "width": 24,
         }
       }
-      accessible={true}
-      style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "center",
-          },
-          {
-            "marginHorizontal": 16,
-          },
-        ]
-      }
-      testID="activity-indicator"
     >
       <View
         collapsable={false}
         style={
           {
-            "height": 24,
-            "opacity": 1,
-            "width": 24,
+            "alignItems": "center",
+            "bottom": 0,
+            "justifyContent": "center",
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           }
         }
       >
@@ -243,13 +287,13 @@ exports[`activity indicator snapshot test 1`] = `
           collapsable={false}
           style={
             {
-              "alignItems": "center",
-              "bottom": 0,
-              "justifyContent": "center",
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
+              "height": 24,
+              "transform": [
+                {
+                  "rotate": "45deg",
+                },
+              ],
+              "width": 24,
             }
           }
         >
@@ -257,12 +301,8 @@ exports[`activity indicator snapshot test 1`] = `
             collapsable={false}
             style={
               {
-                "height": 24,
-                "transform": [
-                  {
-                    "rotate": "45deg",
-                  },
-                ],
+                "height": 12,
+                "overflow": "hidden",
                 "width": 24,
               }
             }
@@ -271,8 +311,15 @@ exports[`activity indicator snapshot test 1`] = `
               collapsable={false}
               style={
                 {
-                  "height": 12,
-                  "overflow": "hidden",
+                  "height": 24,
+                  "transform": [
+                    {
+                      "translateY": 0,
+                    },
+                    {
+                      "rotate": "-165deg",
+                    },
+                  ],
                   "width": 24,
                 }
               }
@@ -281,15 +328,8 @@ exports[`activity indicator snapshot test 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "height": 24,
-                    "transform": [
-                      {
-                        "translateY": 0,
-                      },
-                      {
-                        "rotate": "-165deg",
-                      },
-                    ],
+                    "height": 12,
+                    "overflow": "hidden",
                     "width": 24,
                   }
                 }
@@ -298,40 +338,44 @@ exports[`activity indicator snapshot test 1`] = `
                   collapsable={false}
                   style={
                     {
-                      "height": 12,
-                      "overflow": "hidden",
+                      "borderColor": "rgba(103, 80, 164, 1)",
+                      "borderRadius": 12,
+                      "borderWidth": 2.4,
+                      "height": 24,
                       "width": 24,
                     }
                   }
-                >
-                  <View
-                    collapsable={false}
-                    style={
-                      {
-                        "borderColor": "rgba(103, 80, 164, 1)",
-                        "borderRadius": 12,
-                        "borderWidth": 2.4,
-                        "height": 24,
-                        "width": 24,
-                      }
-                    }
-                  />
-                </View>
+                />
               </View>
             </View>
           </View>
         </View>
+      </View>
+      <View
+        collapsable={false}
+        style={
+          {
+            "alignItems": "center",
+            "bottom": 0,
+            "justifyContent": "center",
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      >
         <View
           collapsable={false}
           style={
             {
-              "alignItems": "center",
-              "bottom": 0,
-              "justifyContent": "center",
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
+              "height": 24,
+              "transform": [
+                {
+                  "rotate": "45deg",
+                },
+              ],
+              "width": 24,
             }
           }
         >
@@ -339,12 +383,9 @@ exports[`activity indicator snapshot test 1`] = `
             collapsable={false}
             style={
               {
-                "height": 24,
-                "transform": [
-                  {
-                    "rotate": "45deg",
-                  },
-                ],
+                "height": 12,
+                "overflow": "hidden",
+                "top": 12,
                 "width": 24,
               }
             }
@@ -353,9 +394,15 @@ exports[`activity indicator snapshot test 1`] = `
               collapsable={false}
               style={
                 {
-                  "height": 12,
-                  "overflow": "hidden",
-                  "top": 12,
+                  "height": 24,
+                  "transform": [
+                    {
+                      "translateY": -12,
+                    },
+                    {
+                      "rotate": "345deg",
+                    },
+                  ],
                   "width": 24,
                 }
               }
@@ -364,15 +411,8 @@ exports[`activity indicator snapshot test 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "height": 24,
-                    "transform": [
-                      {
-                        "translateY": -12,
-                      },
-                      {
-                        "rotate": "345deg",
-                      },
-                    ],
+                    "height": 12,
+                    "overflow": "hidden",
                     "width": 24,
                   }
                 }
@@ -381,25 +421,14 @@ exports[`activity indicator snapshot test 1`] = `
                   collapsable={false}
                   style={
                     {
-                      "height": 12,
-                      "overflow": "hidden",
+                      "borderColor": "rgba(103, 80, 164, 1)",
+                      "borderRadius": 12,
+                      "borderWidth": 2.4,
+                      "height": 24,
                       "width": 24,
                     }
                   }
-                >
-                  <View
-                    collapsable={false}
-                    style={
-                      {
-                        "borderColor": "rgba(103, 80, 164, 1)",
-                        "borderRadius": 12,
-                        "borderWidth": 2.4,
-                        "height": 24,
-                        "width": 24,
-                      }
-                    }
-                  />
-                </View>
+                />
               </View>
             </View>
           </View>
@@ -410,145 +439,347 @@ exports[`activity indicator snapshot test 1`] = `
 </View>
 `;
 
-exports[`renders with placeholder 1`] = `
+exports[`renders searchbar in "view" mode 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgb(238, 232, 244)",
-      "borderRadius": 28,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="search-bar-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+    [
+      {},
       {
         "alignItems": "center",
-        "backgroundColor": "rgb(238, 232, 244)",
-        "borderRadius": 28,
-        "flex": undefined,
         "flexDirection": "row",
-        "shadowColor": "#000",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(236, 230, 240, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 0,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
-      }
-    }
-    testID="search-bar-container"
-  >
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "#000",
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(236, 230, 240, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 0,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
           },
           "shadowOpacity": 0,
           "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "margin": 6,
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": undefined,
+          "height": 40,
           "width": 40,
+        },
+        {
+          "borderColor": "rgba(202, 196, 208, 1)",
+          "borderRadius": 20,
+          "borderWidth": 0,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessibilityLabel="search"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": true,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      centered={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        {
+          "bottom": 6,
+          "left": 6,
+          "right": 6,
+          "top": 6,
         }
       }
-      testID="search-bar-icon-container-outer-layer"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          [
+            {
+              "alignItems": "center",
+              "flexGrow": 1,
+              "justifyContent": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
     >
       <View
-        collapsable={false}
         style={
           {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(121, 116, 126, 1)",
-            "borderRadius": 20,
-            "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+            "opacity": 1,
           }
         }
-        testID="search-bar-icon-container"
       >
-        <View
-          accessibilityComponentType="button"
-          accessibilityLabel="search"
-          accessibilityRole="button"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": true,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityTraits="button"
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
-            {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
           style={
             [
               {
-                "overflow": "hidden",
+                "color": "rgba(73, 69, 79, 1)",
+                "fontSize": 24,
               },
               [
                 {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
+                  "lineHeight": 24,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
                 },
-                undefined,
               ],
             ]
           }
-          testID="search-bar-icon"
+        >
+          magnify
+        </Text>
+      </View>
+    </View>
+  </View>
+  <TextInput
+    keyboardAppearance="light"
+    placeholder=""
+    placeholderTextColor="rgba(29, 27, 32, 1)"
+    returnKeyType="search"
+    role="searchbox"
+    selectionColor="rgba(103, 80, 164, 1)"
+    style={
+      [
+        {
+          "alignSelf": "stretch",
+          "flex": 1,
+          "fontSize": 18,
+          "minWidth": 0,
+          "paddingLeft": 8,
+        },
+        {
+          "color": "rgba(73, 69, 79, 1)",
+          "fontFamily": "System",
+          "fontSize": 16,
+          "fontWeight": "400",
+          "letterSpacing": 0.5,
+          "lineHeight": 0,
+          "textAlign": "left",
+        },
+        {
+          "minHeight": 72,
+          "paddingLeft": 0,
+        },
+        undefined,
+      ]
+    }
+    underlineColorAndroid="transparent"
+    value=""
+  />
+  <View
+    pointerEvents="none"
+    style={
+      [
+        {
+          "marginLeft": 16,
+          "position": "absolute",
+          "right": 0,
+        },
+        false,
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        accessibilityLabel="clear"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        centered={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
+          }
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
+            {
+              "overflow": "hidden",
+            },
+            [
+              {
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "opacity": 1,
+            }
+          }
         >
           <Text
             accessibilityElementsHidden={true}
@@ -558,7 +789,7 @@ exports[`renders with placeholder 1`] = `
             style={
               [
                 {
-                  "color": "rgba(73, 69, 79, 1)",
+                  "color": "rgba(255, 255, 255, 0)",
                   "fontSize": 24,
                 },
                 [
@@ -577,193 +808,411 @@ exports[`renders with placeholder 1`] = `
               ]
             }
           >
-            magnify
+            close
           </Text>
         </View>
       </View>
     </View>
-    <TextInput
-      accessibilityRole="search"
-      keyboardAppearance="light"
-      placeholder="Search"
-      placeholderTextColor="rgba(28, 27, 31, 1)"
-      returnKeyType="search"
-      selectionColor="rgba(103, 80, 164, 1)"
-      style={
+  </View>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "rgba(202, 196, 208, 1)",
+          "height": 0.5,
+        },
+        undefined,
+        false,
+        {
+          "height": 1,
+        },
         [
           {
-            "alignSelf": "stretch",
-            "flex": 1,
-            "fontSize": 18,
-            "minWidth": 0,
-            "paddingLeft": 8,
-            "textAlign": "left",
+            "bottom": 0,
+            "position": "absolute",
+            "width": "100%",
           },
           {
-            "color": "rgba(73, 69, 79, 1)",
-            "fontFamily": "System",
-            "fontSize": 16,
-            "fontWeight": "400",
-            "letterSpacing": 0.15,
-            "lineHeight": 0,
+            "backgroundColor": "rgba(121, 116, 126, 1)",
+          },
+        ],
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`renders with placeholder 1`] = `
+<View
+  collapsable={false}
+  style={
+    [
+      {},
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(236, 230, 240, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 28,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(236, 230, 240, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 28,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
           },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "margin": 6,
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": undefined,
+          "height": 40,
+          "width": 40,
+        },
+        {
+          "borderColor": "rgba(202, 196, 208, 1)",
+          "borderRadius": 20,
+          "borderWidth": 0,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessibilityLabel="search"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": true,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      centered={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        {
+          "bottom": 6,
+          "left": 6,
+          "right": 6,
+          "top": 6,
+        }
+      }
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
           {
-            "minHeight": 56,
-            "paddingLeft": 0,
+            "overflow": "hidden",
           },
-          undefined,
+          [
+            {
+              "alignItems": "center",
+              "flexGrow": 1,
+              "justifyContent": "center",
+            },
+            undefined,
+          ],
         ]
       }
-      testID="search-bar"
-      underlineColorAndroid="transparent"
-      value=""
-    />
+    >
+      <View
+        style={
+          {
+            "opacity": 1,
+          }
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
+          style={
+            [
+              {
+                "color": "rgba(73, 69, 79, 1)",
+                "fontSize": 24,
+              },
+              [
+                {
+                  "lineHeight": 24,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          magnify
+        </Text>
+      </View>
+    </View>
+  </View>
+  <TextInput
+    keyboardAppearance="light"
+    placeholder="Search"
+    placeholderTextColor="rgba(29, 27, 32, 1)"
+    returnKeyType="search"
+    role="searchbox"
+    selectionColor="rgba(103, 80, 164, 1)"
+    style={
+      [
+        {
+          "alignSelf": "stretch",
+          "flex": 1,
+          "fontSize": 18,
+          "minWidth": 0,
+          "paddingLeft": 8,
+        },
+        {
+          "color": "rgba(73, 69, 79, 1)",
+          "fontFamily": "System",
+          "fontSize": 16,
+          "fontWeight": "400",
+          "letterSpacing": 0.5,
+          "lineHeight": 0,
+          "textAlign": "left",
+        },
+        {
+          "minHeight": 56,
+          "paddingLeft": 0,
+        },
+        undefined,
+      ]
+    }
+    underlineColorAndroid="transparent"
+    value=""
+  />
+  <View
+    pointerEvents="none"
+    style={
+      [
+        {
+          "marginLeft": 16,
+          "position": "absolute",
+          "right": 0,
+        },
+        false,
+      ]
+    }
+  >
     <View
-      pointerEvents="none"
+      collapsable={false}
       style={
         [
           {
-            "marginLeft": 16,
-            "position": "absolute",
-            "right": 0,
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
           },
-          false,
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+          },
+          undefined,
         ]
       }
-      testID="search-bar-icon-wrapper"
     >
       <View
+        accessibilityLabel="clear"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        centered={true}
         collapsable={false}
-        style={
+        focusable={true}
+        hitSlop={
           {
-            "backgroundColor": "transparent",
-            "borderRadius": 20,
-            "height": 40,
-            "margin": 6,
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
-            "width": 40,
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
         }
-        testID="search-bar-clear-icon-container-outer-layer"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
+            {
+              "overflow": "hidden",
+            },
+            [
+              {
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
       >
         <View
-          collapsable={false}
           style={
             {
-              "backgroundColor": "transparent",
-              "borderColor": "rgba(121, 116, 126, 1)",
-              "borderRadius": 20,
-              "borderWidth": 0,
-              "elevation": 0,
-              "flex": 1,
-              "overflow": "hidden",
-              "shadowColor": "#000",
-              "shadowOffset": {
-                "height": 0,
-                "width": 0,
-              },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
+              "opacity": 1,
             }
           }
-          testID="search-bar-clear-icon-container"
         >
-          <View
-            accessibilityComponentType="button"
-            accessibilityLabel="clear"
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": false,
-                "expanded": undefined,
-                "selected": undefined,
-              }
-            }
-            accessibilityTraits="button"
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            centered={true}
-            collapsable={false}
-            focusable={true}
-            hitSlop={
-              {
-                "bottom": 6,
-                "left": 6,
-                "right": 6,
-                "top": 6,
-              }
-            }
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
               [
                 {
-                  "overflow": "hidden",
+                  "color": "rgba(255, 255, 255, 0)",
+                  "fontSize": 24,
                 },
                 [
                   {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
+                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "backgroundColor": "transparent",
                   },
-                  undefined,
                 ],
               ]
             }
-            testID="search-bar-clear-icon"
           >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                [
-                  {
-                    "color": "rgba(255, 255, 255, 0)",
-                    "fontSize": 24,
-                  },
-                  [
-                    {
-                      "lineHeight": 24,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                ]
-              }
-            >
-              close
-            </Text>
-          </View>
+            close
+          </Text>
         </View>
       </View>
     </View>
@@ -775,352 +1224,369 @@ exports[`renders with text 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgb(238, 232, 244)",
-      "borderRadius": 28,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="search-bar-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+    [
+      {},
       {
         "alignItems": "center",
-        "backgroundColor": "rgb(238, 232, 244)",
-        "borderRadius": 28,
-        "flex": undefined,
         "flexDirection": "row",
-        "shadowColor": "#000",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(236, 230, 240, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 28,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
-      }
-    }
-    testID="search-bar-container"
-  >
-    <View
-      collapsable={false}
-      style={
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
         {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "#000",
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(236, 230, 240, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 28,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
           },
           "shadowOpacity": 0,
           "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "margin": 6,
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": undefined,
+          "height": 40,
           "width": 40,
+        },
+        {
+          "borderColor": "rgba(202, 196, 208, 1)",
+          "borderRadius": 20,
+          "borderWidth": 0,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessibilityLabel="search"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": true,
+          "expanded": undefined,
+          "selected": undefined,
         }
       }
-      testID="search-bar-icon-container-outer-layer"
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      centered={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        {
+          "bottom": 6,
+          "left": 6,
+          "right": 6,
+          "top": 6,
+        }
+      }
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          [
+            {
+              "alignItems": "center",
+              "flexGrow": 1,
+              "justifyContent": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
     >
       <View
-        collapsable={false}
         style={
           {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(121, 116, 126, 1)",
-            "borderRadius": 20,
-            "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+            "opacity": 1,
           }
         }
-        testID="search-bar-icon-container"
       >
-        <View
-          accessibilityComponentType="button"
-          accessibilityLabel="search"
-          accessibilityRole="button"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": true,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityTraits="button"
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
-            {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
           style={
             [
               {
-                "overflow": "hidden",
+                "color": "rgba(73, 69, 79, 1)",
+                "fontSize": 24,
               },
               [
                 {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
+                  "lineHeight": 24,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
                 },
-                undefined,
               ],
             ]
           }
-          testID="search-bar-icon"
         >
-          <Text
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "rgba(73, 69, 79, 1)",
-                  "fontSize": 24,
-                },
-                [
-                  {
-                    "lineHeight": 24,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                  },
-                ],
-              ]
-            }
-          >
-            magnify
-          </Text>
-        </View>
+          magnify
+        </Text>
       </View>
     </View>
-    <TextInput
-      accessibilityRole="search"
-      keyboardAppearance="light"
-      placeholder="Search"
-      placeholderTextColor="rgba(28, 27, 31, 1)"
-      returnKeyType="search"
-      selectionColor="rgba(103, 80, 164, 1)"
+  </View>
+  <TextInput
+    keyboardAppearance="light"
+    placeholder="Search"
+    placeholderTextColor="rgba(29, 27, 32, 1)"
+    returnKeyType="search"
+    role="searchbox"
+    selectionColor="rgba(103, 80, 164, 1)"
+    style={
+      [
+        {
+          "alignSelf": "stretch",
+          "flex": 1,
+          "fontSize": 18,
+          "minWidth": 0,
+          "paddingLeft": 8,
+        },
+        {
+          "color": "rgba(73, 69, 79, 1)",
+          "fontFamily": "System",
+          "fontSize": 16,
+          "fontWeight": "400",
+          "letterSpacing": 0.5,
+          "lineHeight": 0,
+          "textAlign": "left",
+        },
+        {
+          "minHeight": 56,
+          "paddingLeft": 0,
+        },
+        undefined,
+      ]
+    }
+    underlineColorAndroid="transparent"
+    value="query"
+  />
+  <View
+    pointerEvents="auto"
+    style={
+      [
+        false,
+        false,
+      ]
+    }
+  >
+    <View
+      collapsable={false}
       style={
         [
           {
-            "alignSelf": "stretch",
-            "flex": 1,
-            "fontSize": 18,
-            "minWidth": 0,
-            "paddingLeft": 8,
-            "textAlign": "left",
+            "margin": 6,
+            "overflow": "hidden",
           },
           {
-            "color": "rgba(73, 69, 79, 1)",
-            "fontFamily": "System",
-            "fontSize": 16,
-            "fontWeight": "400",
-            "letterSpacing": 0.15,
-            "lineHeight": 0,
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
           },
           {
-            "minHeight": 56,
-            "paddingLeft": 0,
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
           },
           undefined,
         ]
       }
-      testID="search-bar"
-      underlineColorAndroid="transparent"
-      value="query"
-    />
-    <View
-      pointerEvents="auto"
-      style={
-        [
-          false,
-          false,
-        ]
-      }
-      testID="search-bar-icon-wrapper"
     >
       <View
+        accessibilityLabel="clear"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        centered={true}
         collapsable={false}
-        style={
+        focusable={true}
+        hitSlop={
           {
-            "backgroundColor": "transparent",
-            "borderRadius": 20,
-            "height": 40,
-            "margin": 6,
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
-            "width": 40,
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
         }
-        testID="search-bar-clear-icon-container-outer-layer"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
+            {
+              "overflow": "hidden",
+            },
+            [
+              {
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
       >
         <View
-          collapsable={false}
           style={
             {
-              "backgroundColor": "transparent",
-              "borderColor": "rgba(121, 116, 126, 1)",
-              "borderRadius": 20,
-              "borderWidth": 0,
-              "elevation": 0,
-              "flex": 1,
-              "overflow": "hidden",
-              "shadowColor": "#000",
-              "shadowOffset": {
-                "height": 0,
-                "width": 0,
-              },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
+              "opacity": 1,
             }
           }
-          testID="search-bar-clear-icon-container"
         >
-          <View
-            accessibilityComponentType="button"
-            accessibilityLabel="clear"
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": false,
-                "expanded": undefined,
-                "selected": undefined,
-              }
-            }
-            accessibilityTraits="button"
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            centered={true}
-            collapsable={false}
-            focusable={true}
-            hitSlop={
-              {
-                "bottom": 6,
-                "left": 6,
-                "right": 6,
-                "top": 6,
-              }
-            }
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
               [
                 {
-                  "overflow": "hidden",
+                  "color": "rgba(73, 69, 79, 1)",
+                  "fontSize": 24,
                 },
                 [
                   {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
+                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "backgroundColor": "transparent",
                   },
-                  undefined,
                 ],
               ]
             }
-            testID="search-bar-clear-icon"
           >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                [
-                  {
-                    "color": "rgba(73, 69, 79, 1)",
-                    "fontSize": 24,
-                  },
-                  [
-                    {
-                      "lineHeight": 24,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                ]
-              }
-            >
-              close
-            </Text>
-          </View>
+            close
+          </Text>
         </View>
       </View>
     </View>
diff --git a/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap b/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap
index 83f1541397..76988d9bc2 100644
--- a/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap
@@ -36,7 +36,6 @@ exports[`renders segmented button 1`] = `
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -66,6 +65,7 @@ exports[`renders segmented button 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -91,6 +91,7 @@ exports[`renders segmented button 1`] = `
               "paddingVertical": 9,
             },
             {
+              "opacity": 1,
               "paddingVertical": 9,
             },
           ]
@@ -105,7 +106,7 @@ exports[`renders segmented button 1`] = `
                 "textAlign": "left",
               },
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
                 "writingDirection": "ltr",
               },
               [
@@ -133,7 +134,6 @@ exports[`renders segmented button 1`] = `
               ],
             ]
           }
-          testID="undefined-label"
         />
       </View>
     </View>
@@ -162,7 +162,6 @@ exports[`renders segmented button 1`] = `
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -192,6 +191,7 @@ exports[`renders segmented button 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -216,6 +216,7 @@ exports[`renders segmented button 1`] = `
               "paddingVertical": 9,
             },
             {
+              "opacity": 1,
               "paddingVertical": 9,
             },
           ]
@@ -230,7 +231,7 @@ exports[`renders segmented button 1`] = `
                 "textAlign": "left",
               },
               {
-                "color": "rgba(28, 27, 31, 1)",
+                "color": "rgba(29, 27, 32, 1)",
                 "writingDirection": "ltr",
               },
               [
@@ -246,7 +247,7 @@ exports[`renders segmented button 1`] = `
                     "textAlign": "center",
                   },
                   {
-                    "color": "rgba(28, 27, 31, 1)",
+                    "color": "rgba(29, 27, 32, 1)",
                     "fontFamily": "System",
                     "fontSize": 14,
                     "fontWeight": "500",
@@ -258,10 +259,2179 @@ exports[`renders segmented button 1`] = `
               ],
             ]
           }
-          testID="undefined-label"
         />
       </View>
     </View>
   </View>
 </View>
 `;
+
+exports[`should have \`accessibilityState={ checked: true }\` when selected show selected check icon should be shown 1`] = `
+<View
+  style={
+    [
+      {
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+          "borderBottomRightRadius": 0,
+          "borderColor": "rgba(121, 116, 126, 1)",
+          "borderEndWidth": 0,
+          "borderRadius": 20,
+          "borderTopRightRadius": 0,
+          "borderWidth": 1,
+        },
+        {
+          "borderStyle": "solid",
+          "flex": 1,
+          "minWidth": 76,
+        },
+        [
+          undefined,
+          {},
+        ],
+      ]
+    }
+  >
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": true,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          {
+            "borderBottomRightRadius": 0,
+            "borderEndWidth": 0,
+            "borderRadius": 20,
+            "borderTopRightRadius": 0,
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 9,
+            },
+            {
+              "opacity": 1,
+              "paddingVertical": 9,
+            },
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "marginRight": 5,
+              },
+              {
+                "transform": [
+                  {
+                    "scale": 0,
+                  },
+                ],
+              },
+            ]
+          }
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "rgba(29, 25, 43, 1)",
+                  "fontSize": 18,
+                },
+                [
+                  {
+                    "lineHeight": 18,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            check
+          </Text>
+        </View>
+        <Text
+          numberOfLines={1}
+          selectable={false}
+          style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
+              [
+                {
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                [
+                  {
+                    "textAlign": "center",
+                  },
+                  {
+                    "color": "rgba(29, 25, 43, 1)",
+                    "fontFamily": "System",
+                    "fontSize": 14,
+                    "fontWeight": "500",
+                    "letterSpacing": 0.1,
+                    "lineHeight": 20,
+                  },
+                  undefined,
+                ],
+              ],
+            ]
+          }
+        >
+          Walking
+        </Text>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+          "borderColor": "rgba(121, 116, 126, 1)",
+          "borderEndWidth": 0,
+          "borderRadius": 0,
+          "borderWidth": 1,
+        },
+        {
+          "borderStyle": "solid",
+          "flex": 1,
+          "minWidth": 76,
+        },
+        [
+          undefined,
+          {},
+        ],
+      ]
+    }
+  >
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": true,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          {
+            "borderEndWidth": 0,
+            "borderRadius": 0,
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 9,
+            },
+            {
+              "opacity": 1,
+              "paddingVertical": 9,
+            },
+          ]
+        }
+      >
+        <Text
+          numberOfLines={1}
+          selectable={false}
+          style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
+              [
+                {
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                [
+                  {
+                    "textAlign": "center",
+                  },
+                  {
+                    "color": "rgba(29, 25, 43, 1)",
+                    "fontFamily": "System",
+                    "fontSize": 14,
+                    "fontWeight": "500",
+                    "letterSpacing": 0.1,
+                    "lineHeight": 20,
+                  },
+                  undefined,
+                ],
+              ],
+            ]
+          }
+        >
+          Transit
+        </Text>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "borderBottomLeftRadius": 0,
+          "borderColor": "rgba(121, 116, 126, 1)",
+          "borderRadius": 20,
+          "borderTopLeftRadius": 0,
+          "borderWidth": 1,
+        },
+        {
+          "borderStyle": "solid",
+          "flex": 1,
+          "minWidth": 76,
+        },
+        [
+          undefined,
+          {},
+        ],
+      ]
+    }
+  >
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": false,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          {
+            "borderBottomLeftRadius": 0,
+            "borderRadius": 20,
+            "borderTopLeftRadius": 0,
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 9,
+            },
+            {
+              "opacity": 1,
+              "paddingVertical": 9,
+            },
+          ]
+        }
+      >
+        <Text
+          numberOfLines={1}
+          selectable={false}
+          style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
+              [
+                {
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                [
+                  {
+                    "textAlign": "center",
+                  },
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                    "fontFamily": "System",
+                    "fontSize": 14,
+                    "fontWeight": "500",
+                    "letterSpacing": 0.1,
+                    "lineHeight": 20,
+                  },
+                  undefined,
+                ],
+              ],
+            ]
+          }
+        >
+          Driving
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`should not render icon when icon prop is not passed 1`] = `
+<View
+  style={
+    [
+      {
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+          "borderBottomRightRadius": 0,
+          "borderColor": "rgba(121, 116, 126, 1)",
+          "borderEndWidth": 0,
+          "borderRadius": 20,
+          "borderTopRightRadius": 0,
+          "borderWidth": 1,
+        },
+        {
+          "borderStyle": "solid",
+          "flex": 1,
+          "minWidth": 76,
+        },
+        [
+          undefined,
+          {},
+        ],
+      ]
+    }
+  >
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": true,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          {
+            "borderBottomRightRadius": 0,
+            "borderEndWidth": 0,
+            "borderRadius": 20,
+            "borderTopRightRadius": 0,
+          },
+        ]
+      }
+      testID="walking-button"
+    >
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 9,
+            },
+            {
+              "opacity": 1,
+              "paddingVertical": 9,
+            },
+          ]
+        }
+      >
+        <Text
+          numberOfLines={1}
+          selectable={false}
+          style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
+              [
+                {
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                [
+                  {
+                    "textAlign": "center",
+                  },
+                  {
+                    "color": "rgba(29, 25, 43, 1)",
+                    "fontFamily": "System",
+                    "fontSize": 14,
+                    "fontWeight": "500",
+                    "letterSpacing": 0.1,
+                    "lineHeight": 20,
+                  },
+                  undefined,
+                ],
+              ],
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "borderBottomLeftRadius": 0,
+          "borderColor": "rgba(121, 116, 126, 1)",
+          "borderRadius": 20,
+          "borderTopLeftRadius": 0,
+          "borderWidth": 1,
+        },
+        {
+          "borderStyle": "solid",
+          "flex": 1,
+          "minWidth": 76,
+        },
+        [
+          undefined,
+          {},
+        ],
+      ]
+    }
+  >
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": false,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          {
+            "borderBottomLeftRadius": 0,
+            "borderRadius": 20,
+            "borderTopLeftRadius": 0,
+          },
+        ]
+      }
+      testID="driving-button"
+    >
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 9,
+            },
+            {
+              "opacity": 1,
+              "paddingVertical": 9,
+            },
+          ]
+        }
+      >
+        <Text
+          numberOfLines={1}
+          selectable={false}
+          style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
+              [
+                {
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                [
+                  {
+                    "textAlign": "center",
+                  },
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                    "fontFamily": "System",
+                    "fontSize": 14,
+                    "fontWeight": "500",
+                    "letterSpacing": 0.1,
+                    "lineHeight": 20,
+                  },
+                  undefined,
+                ],
+              ],
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`should not render icon when icon prop is passed along with label, button is checked, showSelectedCheck is true 1`] = `
+<View
+  style={
+    [
+      {
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+          "borderBottomRightRadius": 0,
+          "borderColor": "rgba(121, 116, 126, 1)",
+          "borderEndWidth": 0,
+          "borderRadius": 20,
+          "borderTopRightRadius": 0,
+          "borderWidth": 1,
+        },
+        {
+          "borderStyle": "solid",
+          "flex": 1,
+          "minWidth": 76,
+        },
+        [
+          undefined,
+          {},
+        ],
+      ]
+    }
+  >
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": true,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          {
+            "borderBottomRightRadius": 0,
+            "borderEndWidth": 0,
+            "borderRadius": 20,
+            "borderTopRightRadius": 0,
+          },
+        ]
+      }
+      testID="walking-button"
+    >
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 9,
+            },
+            {
+              "opacity": 1,
+              "paddingVertical": 9,
+            },
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "marginRight": 5,
+              },
+              {
+                "transform": [
+                  {
+                    "scale": 0,
+                  },
+                ],
+              },
+            ]
+          }
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "rgba(29, 25, 43, 1)",
+                  "fontSize": 18,
+                },
+                [
+                  {
+                    "lineHeight": 18,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            check
+          </Text>
+        </View>
+        <Text
+          numberOfLines={1}
+          selectable={false}
+          style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
+              [
+                {
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                [
+                  {
+                    "textAlign": "center",
+                  },
+                  {
+                    "color": "rgba(29, 25, 43, 1)",
+                    "fontFamily": "System",
+                    "fontSize": 14,
+                    "fontWeight": "500",
+                    "letterSpacing": 0.1,
+                    "lineHeight": 20,
+                  },
+                  undefined,
+                ],
+              ],
+            ]
+          }
+        >
+          Walking
+        </Text>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "borderBottomLeftRadius": 0,
+          "borderColor": "rgba(121, 116, 126, 1)",
+          "borderRadius": 20,
+          "borderTopLeftRadius": 0,
+          "borderWidth": 1,
+        },
+        {
+          "borderStyle": "solid",
+          "flex": 1,
+          "minWidth": 76,
+        },
+        [
+          undefined,
+          {},
+        ],
+      ]
+    }
+  >
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": false,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          {
+            "borderBottomLeftRadius": 0,
+            "borderRadius": 20,
+            "borderTopLeftRadius": 0,
+          },
+        ]
+      }
+      testID="driving-button"
+    >
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 9,
+            },
+            {
+              "opacity": 1,
+              "paddingVertical": 9,
+            },
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "marginRight": 5,
+              },
+              {
+                "transform": [
+                  {
+                    "scale": 1,
+                  },
+                ],
+              },
+            ]
+          }
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                  "fontSize": 18,
+                },
+                [
+                  {
+                    "lineHeight": 18,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            car
+          </Text>
+        </View>
+        <Text
+          numberOfLines={1}
+          selectable={false}
+          style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
+              [
+                {
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                [
+                  {
+                    "textAlign": "center",
+                  },
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                    "fontFamily": "System",
+                    "fontSize": 14,
+                    "fontWeight": "500",
+                    "letterSpacing": 0.1,
+                    "lineHeight": 20,
+                  },
+                  undefined,
+                ],
+              ],
+            ]
+          }
+        >
+          Driving
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`should render icon when icon prop is passed 1`] = `
+<View
+  style={
+    [
+      {
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+          "borderBottomRightRadius": 0,
+          "borderColor": "rgba(121, 116, 126, 1)",
+          "borderEndWidth": 0,
+          "borderRadius": 20,
+          "borderTopRightRadius": 0,
+          "borderWidth": 1,
+        },
+        {
+          "borderStyle": "solid",
+          "flex": 1,
+          "minWidth": 76,
+        },
+        [
+          undefined,
+          {},
+        ],
+      ]
+    }
+  >
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": true,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          {
+            "borderBottomRightRadius": 0,
+            "borderEndWidth": 0,
+            "borderRadius": 20,
+            "borderTopRightRadius": 0,
+          },
+        ]
+      }
+      testID="walking-button"
+    >
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 9,
+            },
+            {
+              "opacity": 1,
+              "paddingVertical": 9,
+            },
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "marginRight": 0,
+              },
+              {
+                "transform": [
+                  {
+                    "scale": 1,
+                  },
+                ],
+              },
+            ]
+          }
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "rgba(29, 25, 43, 1)",
+                  "fontSize": 18,
+                },
+                [
+                  {
+                    "lineHeight": 18,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            walk
+          </Text>
+        </View>
+        <Text
+          numberOfLines={1}
+          selectable={false}
+          style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
+              [
+                {
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                [
+                  {
+                    "textAlign": "center",
+                  },
+                  {
+                    "color": "rgba(29, 25, 43, 1)",
+                    "fontFamily": "System",
+                    "fontSize": 14,
+                    "fontWeight": "500",
+                    "letterSpacing": 0.1,
+                    "lineHeight": 20,
+                  },
+                  undefined,
+                ],
+              ],
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "borderBottomLeftRadius": 0,
+          "borderColor": "rgba(121, 116, 126, 1)",
+          "borderRadius": 20,
+          "borderTopLeftRadius": 0,
+          "borderWidth": 1,
+        },
+        {
+          "borderStyle": "solid",
+          "flex": 1,
+          "minWidth": 76,
+        },
+        [
+          undefined,
+          {},
+        ],
+      ]
+    }
+  >
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": false,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          {
+            "borderBottomLeftRadius": 0,
+            "borderRadius": 20,
+            "borderTopLeftRadius": 0,
+          },
+        ]
+      }
+      testID="driving-button"
+    >
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 9,
+            },
+            {
+              "opacity": 1,
+              "paddingVertical": 9,
+            },
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "marginRight": 0,
+              },
+              {
+                "transform": [
+                  {
+                    "scale": 1,
+                  },
+                ],
+              },
+            ]
+          }
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                  "fontSize": 18,
+                },
+                [
+                  {
+                    "lineHeight": 18,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            car
+          </Text>
+        </View>
+        <Text
+          numberOfLines={1}
+          selectable={false}
+          style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
+              [
+                {
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                [
+                  {
+                    "textAlign": "center",
+                  },
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                    "fontFamily": "System",
+                    "fontSize": 14,
+                    "fontWeight": "500",
+                    "letterSpacing": 0.1,
+                    "lineHeight": 20,
+                  },
+                  undefined,
+                ],
+              ],
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`should render icon when icon prop is passed along with label, button is checked, showSelectedCheck is false 1`] = `
+<View
+  style={
+    [
+      {
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+          "borderBottomRightRadius": 0,
+          "borderColor": "rgba(121, 116, 126, 1)",
+          "borderEndWidth": 0,
+          "borderRadius": 20,
+          "borderTopRightRadius": 0,
+          "borderWidth": 1,
+        },
+        {
+          "borderStyle": "solid",
+          "flex": 1,
+          "minWidth": 76,
+        },
+        [
+          undefined,
+          {},
+        ],
+      ]
+    }
+  >
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": true,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          {
+            "borderBottomRightRadius": 0,
+            "borderEndWidth": 0,
+            "borderRadius": 20,
+            "borderTopRightRadius": 0,
+          },
+        ]
+      }
+      testID="walking-button"
+    >
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 9,
+            },
+            {
+              "opacity": 1,
+              "paddingVertical": 9,
+            },
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "marginRight": 5,
+              },
+              {
+                "transform": [
+                  {
+                    "scale": 1,
+                  },
+                ],
+              },
+            ]
+          }
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "rgba(29, 25, 43, 1)",
+                  "fontSize": 18,
+                },
+                [
+                  {
+                    "lineHeight": 18,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            walk
+          </Text>
+        </View>
+        <Text
+          numberOfLines={1}
+          selectable={false}
+          style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
+              [
+                {
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                [
+                  {
+                    "textAlign": "center",
+                  },
+                  {
+                    "color": "rgba(29, 25, 43, 1)",
+                    "fontFamily": "System",
+                    "fontSize": 14,
+                    "fontWeight": "500",
+                    "letterSpacing": 0.1,
+                    "lineHeight": 20,
+                  },
+                  undefined,
+                ],
+              ],
+            ]
+          }
+        >
+          Walking
+        </Text>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "borderBottomLeftRadius": 0,
+          "borderColor": "rgba(121, 116, 126, 1)",
+          "borderRadius": 20,
+          "borderTopLeftRadius": 0,
+          "borderWidth": 1,
+        },
+        {
+          "borderStyle": "solid",
+          "flex": 1,
+          "minWidth": 76,
+        },
+        [
+          undefined,
+          {},
+        ],
+      ]
+    }
+  >
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": false,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          {
+            "borderBottomLeftRadius": 0,
+            "borderRadius": 20,
+            "borderTopLeftRadius": 0,
+          },
+        ]
+      }
+      testID="driving-button"
+    >
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 9,
+            },
+            {
+              "opacity": 1,
+              "paddingVertical": 9,
+            },
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "marginRight": 5,
+              },
+              {
+                "transform": [
+                  {
+                    "scale": 1,
+                  },
+                ],
+              },
+            ]
+          }
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                  "fontSize": 18,
+                },
+                [
+                  {
+                    "lineHeight": 18,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            car
+          </Text>
+        </View>
+        <Text
+          numberOfLines={1}
+          selectable={false}
+          style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
+              [
+                {
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                [
+                  {
+                    "textAlign": "center",
+                  },
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                    "fontFamily": "System",
+                    "fontSize": 14,
+                    "fontWeight": "500",
+                    "letterSpacing": 0.1,
+                    "lineHeight": 20,
+                  },
+                  undefined,
+                ],
+              ],
+            ]
+          }
+        >
+          Driving
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`should render icon when icon prop is passed along with label, no matter if button is checked 1`] = `
+<View
+  style={
+    [
+      {
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+          "borderBottomRightRadius": 0,
+          "borderColor": "rgba(121, 116, 126, 1)",
+          "borderEndWidth": 0,
+          "borderRadius": 20,
+          "borderTopRightRadius": 0,
+          "borderWidth": 1,
+        },
+        {
+          "borderStyle": "solid",
+          "flex": 1,
+          "minWidth": 76,
+        },
+        [
+          undefined,
+          {},
+        ],
+      ]
+    }
+  >
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": true,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          {
+            "borderBottomRightRadius": 0,
+            "borderEndWidth": 0,
+            "borderRadius": 20,
+            "borderTopRightRadius": 0,
+          },
+        ]
+      }
+      testID="walking-button"
+    >
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 9,
+            },
+            {
+              "opacity": 1,
+              "paddingVertical": 9,
+            },
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "marginRight": 5,
+              },
+              {
+                "transform": [
+                  {
+                    "scale": 1,
+                  },
+                ],
+              },
+            ]
+          }
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "rgba(29, 25, 43, 1)",
+                  "fontSize": 18,
+                },
+                [
+                  {
+                    "lineHeight": 18,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            walk
+          </Text>
+        </View>
+        <Text
+          numberOfLines={1}
+          selectable={false}
+          style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
+              [
+                {
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                [
+                  {
+                    "textAlign": "center",
+                  },
+                  {
+                    "color": "rgba(29, 25, 43, 1)",
+                    "fontFamily": "System",
+                    "fontSize": 14,
+                    "fontWeight": "500",
+                    "letterSpacing": 0.1,
+                    "lineHeight": 20,
+                  },
+                  undefined,
+                ],
+              ],
+            ]
+          }
+        >
+          Walking
+        </Text>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "borderBottomLeftRadius": 0,
+          "borderColor": "rgba(121, 116, 126, 1)",
+          "borderRadius": 20,
+          "borderTopLeftRadius": 0,
+          "borderWidth": 1,
+        },
+        {
+          "borderStyle": "solid",
+          "flex": 1,
+          "minWidth": 76,
+        },
+        [
+          undefined,
+          {},
+        ],
+      ]
+    }
+  >
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": false,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          {
+            "borderBottomLeftRadius": 0,
+            "borderRadius": 20,
+            "borderTopLeftRadius": 0,
+          },
+        ]
+      }
+      testID="driving-button"
+    >
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 9,
+            },
+            {
+              "opacity": 1,
+              "paddingVertical": 9,
+            },
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "marginRight": 5,
+              },
+              {
+                "transform": [
+                  {
+                    "scale": 1,
+                  },
+                ],
+              },
+            ]
+          }
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                  "fontSize": 18,
+                },
+                [
+                  {
+                    "lineHeight": 18,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            car
+          </Text>
+        </View>
+        <Text
+          numberOfLines={1}
+          selectable={false}
+          style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
+              [
+                {
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                [
+                  {
+                    "textAlign": "center",
+                  },
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                    "fontFamily": "System",
+                    "fontSize": 14,
+                    "fontWeight": "500",
+                    "letterSpacing": 0.1,
+                    "lineHeight": 20,
+                  },
+                  undefined,
+                ],
+              ],
+            ]
+          }
+        >
+          Driving
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;
diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
index 9fdd75d4dc..353efa0fed 100644
--- a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
@@ -21,69 +21,122 @@ exports[`renders snackbar with Text as a child 1`] = `
   }
 >
   <View
+    aria-live="polite"
     collapsable={false}
     style={
-      {
-        "backgroundColor": "rgba(49, 48, 51, 1)",
-        "borderRadius": 4,
-        "margin": 8,
-        "opacity": 0,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 2,
-          "width": 0,
+      [
+        {},
+        {
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "margin": 8,
+          "minHeight": 48,
+          "pointerEvents": "box-none",
         },
-        "shadowOpacity": 0.15,
-        "shadowRadius": 6,
-        "transform": [
-          {
-            "scale": 0.9,
+        {
+          "opacity": 0,
+          "transform": [
+            {
+              "scale": 0.9,
+            },
+          ],
+        },
+        undefined,
+        {},
+        {
+          "backgroundColor": "rgba(50, 47, 53, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 4,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 1.66,
+            "width": 0,
           },
-        ],
-      }
+          "shadowOpacity": 0.19,
+          "shadowRadius": 2.36,
+        },
+      ]
     }
-    testID="surface-outer-layer"
   >
     <View
-      accessibilityLiveRegion="polite"
       collapsable={false}
-      pointerEvents="box-none"
       style={
-        {
-          "backgroundColor": "rgba(49, 48, 51, 1)",
-          "borderRadius": 4,
-          "flex": undefined,
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-          "minHeight": 48,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 1,
-            "width": 0,
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           },
-          "shadowOpacity": 0.3,
-          "shadowRadius": 2,
-        }
+          {
+            "pointerEvents": "none",
+          },
+          {},
+          {},
+          {
+            "backgroundColor": "rgba(50, 47, 53, 1)",
+          },
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 4,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 0.75,
+          },
+        ]
+      }
+    />
+    <View
+      style={
+        [
+          {
+            "flex": 1,
+            "marginHorizontal": 16,
+            "marginVertical": 14,
+          },
+          undefined,
+        ]
       }
-      testID="surface"
     >
-      <View
-        style={
-          [
-            {
-              "flex": 1,
-              "marginHorizontal": 16,
-              "marginVertical": 14,
-            },
-            undefined,
-          ]
-        }
-      >
-        <View>
-          <Text>
-            Snackbar content
-          </Text>
-        </View>
+      <View>
+        <Text>
+          Snackbar content
+        </Text>
       </View>
     </View>
   </View>
@@ -109,94 +162,147 @@ exports[`renders snackbar with View & Text as a child 1`] = `
   }
 >
   <View
+    aria-live="polite"
     collapsable={false}
     style={
-      {
-        "backgroundColor": "rgba(49, 48, 51, 1)",
-        "borderRadius": 4,
-        "margin": 8,
-        "opacity": 0,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 2,
-          "width": 0,
+      [
+        {},
+        {
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "margin": 8,
+          "minHeight": 48,
+          "pointerEvents": "box-none",
         },
-        "shadowOpacity": 0.15,
-        "shadowRadius": 6,
-        "transform": [
-          {
-            "scale": 0.9,
+        {
+          "opacity": 0,
+          "transform": [
+            {
+              "scale": 0.9,
+            },
+          ],
+        },
+        undefined,
+        {},
+        {
+          "backgroundColor": "rgba(50, 47, 53, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 4,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 1.66,
+            "width": 0,
           },
-        ],
-      }
+          "shadowOpacity": 0.19,
+          "shadowRadius": 2.36,
+        },
+      ]
     }
-    testID="surface-outer-layer"
   >
     <View
-      accessibilityLiveRegion="polite"
       collapsable={false}
-      pointerEvents="box-none"
       style={
-        {
-          "backgroundColor": "rgba(49, 48, 51, 1)",
-          "borderRadius": 4,
-          "flex": undefined,
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-          "minHeight": 48,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 1,
-            "width": 0,
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           },
-          "shadowOpacity": 0.3,
-          "shadowRadius": 2,
-        }
+          {
+            "pointerEvents": "none",
+          },
+          {},
+          {},
+          {
+            "backgroundColor": "rgba(50, 47, 53, 1)",
+          },
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 4,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 0.75,
+          },
+        ]
+      }
+    />
+    <View
+      style={
+        [
+          {
+            "flex": 1,
+            "marginHorizontal": 16,
+            "marginVertical": 14,
+          },
+          undefined,
+        ]
       }
-      testID="surface"
     >
-      <View
-        style={
-          [
+      <View>
+        <View
+          style={
             {
-              "flex": 1,
-              "marginHorizontal": 16,
-              "marginVertical": 14,
-            },
-            undefined,
-          ]
-        }
-      >
-        <View>
+              "alignItems": "center",
+              "flexDirection": "row",
+            }
+          }
+        >
           <View
             style={
               {
-                "alignItems": "center",
-                "flexDirection": "row",
+                "backgroundColor": "#ef9a9a",
+                "padding": 15,
               }
             }
-          >
-            <View
-              style={
-                {
-                  "backgroundColor": "#ef9a9a",
-                  "padding": 15,
-                }
-              }
-            />
-            <Text
-              style={
-                {
-                  "color": "#ffffff",
-                  "flexShrink": 1,
-                  "flexWrap": "wrap",
-                  "marginLeft": 10,
-                }
+          />
+          <Text
+            style={
+              {
+                "color": "#ffffff",
+                "flexShrink": 1,
+                "flexWrap": "wrap",
+                "marginLeft": 10,
               }
-            >
-              Error Message which is veryyyyyyyyyyyy longggggggg Error Message which is veryyyyyyyyyyyy longggggggg
-            </Text>
-          </View>
+            }
+          >
+            Error Message which is veryyyyyyyyyyyy longggggggg Error Message which is veryyyyyyyyyyyy longggggggg
+          </Text>
         </View>
       </View>
     </View>
@@ -223,248 +329,357 @@ exports[`renders snackbar with action button 1`] = `
   }
 >
   <View
+    aria-live="polite"
     collapsable={false}
     style={
-      {
-        "backgroundColor": "rgba(49, 48, 51, 1)",
-        "borderRadius": 4,
-        "margin": 8,
-        "opacity": 0,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 2,
-          "width": 0,
+      [
+        {},
+        {
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "margin": 8,
+          "minHeight": 48,
+          "pointerEvents": "box-none",
         },
-        "shadowOpacity": 0.15,
-        "shadowRadius": 6,
-        "transform": [
-          {
-            "scale": 0.9,
+        {
+          "opacity": 0,
+          "transform": [
+            {
+              "scale": 0.9,
+            },
+          ],
+        },
+        undefined,
+        {},
+        {
+          "backgroundColor": "rgba(50, 47, 53, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 4,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 1.66,
+            "width": 0,
           },
-        ],
-      }
+          "shadowOpacity": 0.19,
+          "shadowRadius": 2.36,
+        },
+      ]
     }
-    testID="surface-outer-layer"
   >
     <View
-      accessibilityLiveRegion="polite"
       collapsable={false}
-      pointerEvents="box-none"
       style={
-        {
-          "backgroundColor": "rgba(49, 48, 51, 1)",
-          "borderRadius": 4,
-          "flex": undefined,
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-          "minHeight": 48,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 1,
-            "width": 0,
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           },
-          "shadowOpacity": 0.3,
-          "shadowRadius": 2,
-        }
+          {
+            "pointerEvents": "none",
+          },
+          {},
+          {},
+          {
+            "backgroundColor": "rgba(50, 47, 53, 1)",
+          },
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 4,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 0.75,
+          },
+        ]
       }
-      testID="surface"
-    >
-      <Text
-        style={
+    />
+    <Text
+      style={
+        [
+          {
+            "textAlign": "left",
+          },
+          {
+            "color": "rgba(29, 27, 32, 1)",
+            "writingDirection": "ltr",
+          },
           [
             {
-              "textAlign": "left",
-            },
-            {
-              "color": "rgba(28, 27, 31, 1)",
-              "writingDirection": "ltr",
+              "fontFamily": "System",
+              "fontSize": 14,
+              "fontWeight": "400",
+              "letterSpacing": 0.25,
+              "lineHeight": 20,
             },
             [
               {
-                "fontFamily": "System",
-                "fontSize": 14,
-                "fontWeight": "400",
-                "letterSpacing": 0.25,
-                "lineHeight": 20,
+                "flex": 1,
+                "marginHorizontal": 16,
+                "marginVertical": 14,
+              },
+              {
+                "color": "rgba(245, 239, 247, 1)",
               },
-              [
-                {
-                  "flex": 1,
-                  "marginHorizontal": 16,
-                  "marginVertical": 14,
-                },
-                {
-                  "color": "rgba(244, 239, 244, 1)",
-                },
-              ],
             ],
-          ]
-        }
-      >
-        Snackbar content
-      </Text>
+          ],
+        ]
+      }
+    >
+      Snackbar content
+    </Text>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
+            "minHeight": 48,
+          },
+          {
+            "marginLeft": -12,
+          },
+        ]
+      }
+    >
       <View
+        collapsable={false}
         style={
           [
+            {},
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "flex-end",
-              "minHeight": 48,
+              "borderStyle": "solid",
+              "minWidth": 64,
             },
+            false,
             {
-              "marginLeft": -12,
+              "borderColor": "transparent",
+              "borderWidth": 0,
             },
-          ]
-        }
-      >
-        <View
-          collapsable={false}
-          style={
             {
-              "backgroundColor": "transparent",
-              "borderRadius": 20,
               "marginLeft": 4,
               "marginRight": 8,
-              "shadowColor": "#000",
+            },
+            undefined,
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 20,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
               "shadowOffset": {
                 "height": 0,
                 "width": 0,
               },
               "shadowOpacity": 0,
               "shadowRadius": 0,
-            }
-          }
-          testID="button-container-outer-layer"
-        >
-          <View
-            collapsable={false}
-            style={
+            },
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {},
               {
                 "backgroundColor": "transparent",
-                "borderColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
                 "borderRadius": 20,
-                "borderStyle": "solid",
-                "borderWidth": 0,
-                "flex": undefined,
-                "minWidth": 64,
-                "shadowColor": "#000",
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
                 "shadowOffset": {
                   "height": 0,
                   "width": 0,
                 },
                 "shadowOpacity": 0,
                 "shadowRadius": 0,
-              }
+              },
+            ]
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
             }
-            testID="button-container"
-          >
-            <View
-              accessibilityRole="button"
-              accessibilityState={
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "overflow": "hidden",
+              },
+              {
+                "borderRadius": 20,
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              [
                 {
-                  "busy": undefined,
-                  "checked": undefined,
-                  "disabled": false,
-                  "expanded": undefined,
-                  "selected": undefined,
-                }
-              }
-              accessibilityValue={
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                },
                 {
-                  "max": undefined,
-                  "min": undefined,
-                  "now": undefined,
-                  "text": undefined,
-                }
-              }
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
+                  "opacity": 1,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text
+              numberOfLines={1}
+              selectable={false}
               style={
                 [
                   {
-                    "overflow": "hidden",
+                    "textAlign": "left",
                   },
                   {
-                    "borderRadius": 20,
+                    "color": "rgba(29, 27, 32, 1)",
+                    "writingDirection": "ltr",
                   },
-                ]
-              }
-              testID="button"
-            >
-              <View
-                style={
                   [
                     {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
+                      "fontFamily": "System",
+                      "fontSize": 14,
+                      "fontWeight": "500",
+                      "letterSpacing": 0.1,
+                      "lineHeight": 20,
                     },
-                    undefined,
-                  ]
-                }
-              >
-                <Text
-                  numberOfLines={1}
-                  selectable={false}
-                  style={
                     [
                       {
-                        "textAlign": "left",
+                        "marginHorizontal": 16,
+                        "marginVertical": 9,
+                        "textAlign": "center",
+                      },
+                      {
+                        "marginHorizontal": 12,
                       },
+                      false,
+                      false,
                       {
-                        "color": "rgba(28, 27, 31, 1)",
-                        "writingDirection": "ltr",
+                        "color": "rgba(208, 188, 255, 1)",
+                        "fontFamily": "System",
+                        "fontSize": 14,
+                        "fontWeight": "500",
+                        "letterSpacing": 0.1,
+                        "lineHeight": 20,
                       },
-                      [
-                        {
-                          "fontFamily": "System",
-                          "fontSize": 14,
-                          "fontWeight": "500",
-                          "letterSpacing": 0.1,
-                          "lineHeight": 20,
-                        },
-                        [
-                          {
-                            "marginHorizontal": 16,
-                            "marginVertical": 9,
-                            "textAlign": "center",
-                          },
-                          false,
-                          {
-                            "marginHorizontal": 12,
-                          },
-                          false,
-                          false,
-                          {
-                            "color": "rgba(208, 188, 255, 1)",
-                            "fontFamily": "System",
-                            "fontSize": 14,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.1,
-                            "lineHeight": 20,
-                          },
-                          undefined,
-                        ],
-                      ],
-                    ]
-                  }
-                  testID="button-text"
-                >
-                  Undo
-                </Text>
-              </View>
-            </View>
+                      undefined,
+                    ],
+                  ],
+                ]
+              }
+            >
+              Undo
+            </Text>
           </View>
         </View>
       </View>
@@ -492,87 +707,140 @@ exports[`renders snackbar with content 1`] = `
   }
 >
   <View
+    aria-live="polite"
     collapsable={false}
     style={
-      {
-        "backgroundColor": "rgba(49, 48, 51, 1)",
-        "borderRadius": 4,
-        "margin": 8,
-        "opacity": 0,
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 2,
-          "width": 0,
+      [
+        {},
+        {
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "margin": 8,
+          "minHeight": 48,
+          "pointerEvents": "box-none",
         },
-        "shadowOpacity": 0.15,
-        "shadowRadius": 6,
-        "transform": [
-          {
-            "scale": 0.9,
+        {
+          "opacity": 0,
+          "transform": [
+            {
+              "scale": 0.9,
+            },
+          ],
+        },
+        undefined,
+        {},
+        {
+          "backgroundColor": "rgba(50, 47, 53, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 4,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 1.66,
+            "width": 0,
           },
-        ],
-      }
+          "shadowOpacity": 0.19,
+          "shadowRadius": 2.36,
+        },
+      ]
     }
-    testID="surface-outer-layer"
   >
     <View
-      accessibilityLiveRegion="polite"
       collapsable={false}
-      pointerEvents="box-none"
       style={
-        {
-          "backgroundColor": "rgba(49, 48, 51, 1)",
-          "borderRadius": 4,
-          "flex": undefined,
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-          "minHeight": 48,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 1,
-            "width": 0,
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           },
-          "shadowOpacity": 0.3,
-          "shadowRadius": 2,
-        }
+          {
+            "pointerEvents": "none",
+          },
+          {},
+          {},
+          {
+            "backgroundColor": "rgba(50, 47, 53, 1)",
+          },
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 4,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 0.75,
+          },
+        ]
       }
-      testID="surface"
-    >
-      <Text
-        style={
+    />
+    <Text
+      style={
+        [
+          {
+            "textAlign": "left",
+          },
+          {
+            "color": "rgba(29, 27, 32, 1)",
+            "writingDirection": "ltr",
+          },
           [
             {
-              "textAlign": "left",
-            },
-            {
-              "color": "rgba(28, 27, 31, 1)",
-              "writingDirection": "ltr",
+              "fontFamily": "System",
+              "fontSize": 14,
+              "fontWeight": "400",
+              "letterSpacing": 0.25,
+              "lineHeight": 20,
             },
             [
               {
-                "fontFamily": "System",
-                "fontSize": 14,
-                "fontWeight": "400",
-                "letterSpacing": 0.25,
-                "lineHeight": 20,
+                "flex": 1,
+                "marginHorizontal": 16,
+                "marginVertical": 14,
+              },
+              {
+                "color": "rgba(245, 239, 247, 1)",
               },
-              [
-                {
-                  "flex": 1,
-                  "marginHorizontal": 16,
-                  "marginVertical": 14,
-                },
-                {
-                  "color": "rgba(244, 239, 244, 1)",
-                },
-              ],
             ],
-          ]
-        }
-      >
-        Snackbar content
-      </Text>
-    </View>
+          ],
+        ]
+      }
+    >
+      Snackbar content
+    </Text>
   </View>
 </View>
 `;
diff --git a/src/components/__tests__/__snapshots__/Switch.test.tsx.snap b/src/components/__tests__/__snapshots__/Switch.test.tsx.snap
index f7839d9be4..e38a5145e1 100644
--- a/src/components/__tests__/__snapshots__/Switch.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Switch.test.tsx.snap
@@ -1,70 +1,1285 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders disabled switch 1`] = `
-<RCTSwitch
-  accessibilityRole="switch"
-  disabled={true}
-  onChange={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  onTintColor="rgba(103, 80, 164, 1)"
+exports[`Switch render renders disabled off 1`] = `
+<View
   style={
-    {
-      "alignSelf": "flex-start",
-    }
+    [
+      {
+        "alignItems": "center",
+        "height": 40,
+        "justifyContent": "center",
+        "overflow": "visible",
+        "width": 52,
+      },
+      undefined,
+    ]
   }
-  tintColor="rgba(103, 80, 164, 1)"
-  value={true}
-/>
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": false,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="switch"
+    style={
+      [
+        {
+          "alignItems": "center",
+          "height": 40,
+          "justifyContent": "center",
+          "width": 52,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "borderRadius": 9999,
+            "height": 32,
+            "overflow": "visible",
+            "width": 52,
+          },
+          {
+            "backgroundColor": "rgba(230, 224, 233, 1)",
+            "opacity": 0.12,
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "borderRadius": 9999,
+              "borderWidth": 2,
+              "bottom": 0,
+              "left": 0,
+              "pointerEvents": "none",
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "borderColor": "rgba(29, 27, 32, 1)",
+            },
+          ]
+        }
+      />
+    </View>
+  </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "borderRadius": 9999,
+          "height": 40,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "top": 0,
+          "width": 40,
+        },
+        {
+          "left": 0,
+        },
+        {
+          "backgroundColor": "rgba(29, 27, 32, 1)",
+        },
+        {
+          "opacity": 0,
+          "transform": [
+            {
+              "translateX": -4,
+            },
+          ],
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "justifyContent": "center",
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+        {
+          "left": 0,
+        },
+        {
+          "height": 16,
+          "top": 12,
+          "transform": [
+            {
+              "translateX": 8,
+            },
+          ],
+          "width": 16,
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "borderRadius": 9999,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "backgroundColor": "rgba(254, 247, 255, 1)",
+          },
+        ]
+      }
+    />
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "borderRadius": 9999,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "opacity": 0.38,
+          },
+          {
+            "backgroundColor": "rgba(29, 27, 32, 1)",
+          },
+        ]
+      }
+    />
+  </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+          "borderRadius": 9999,
+          "borderWidth": 3,
+          "bottom": -1,
+          "left": -5,
+          "right": -5,
+          "top": -1,
+        },
+        {
+          "opacity": 0,
+        },
+      ]
+    }
+  />
+</View>
 `;
 
-exports[`renders off switch 1`] = `
-<RCTSwitch
-  accessibilityRole="switch"
-  onChange={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  onTintColor="rgba(103, 80, 164, 1)"
+exports[`Switch render renders disabled on 1`] = `
+<View
   style={
-    {
-      "alignSelf": "flex-start",
-    }
+    [
+      {
+        "alignItems": "center",
+        "height": 40,
+        "justifyContent": "center",
+        "overflow": "visible",
+        "width": 52,
+      },
+      undefined,
+    ]
   }
-  tintColor="rgba(103, 80, 164, 1)"
-  value={false}
-/>
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": true,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="switch"
+    style={
+      [
+        {
+          "alignItems": "center",
+          "height": 40,
+          "justifyContent": "center",
+          "width": 52,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "borderRadius": 9999,
+            "height": 32,
+            "overflow": "visible",
+            "width": 52,
+          },
+          {
+            "backgroundColor": "rgba(29, 27, 32, 1)",
+            "opacity": 0.12,
+          },
+        ]
+      }
+    />
+  </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "borderRadius": 9999,
+          "height": 40,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "top": 0,
+          "width": 40,
+        },
+        {
+          "left": 0,
+        },
+        {
+          "backgroundColor": "rgba(103, 80, 164, 1)",
+        },
+        {
+          "opacity": 0,
+          "transform": [
+            {
+              "translateX": 16,
+            },
+          ],
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "justifyContent": "center",
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+        {
+          "left": 0,
+        },
+        {
+          "height": 24,
+          "top": 8,
+          "transform": [
+            {
+              "translateX": 24,
+            },
+          ],
+          "width": 24,
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "borderRadius": 9999,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "backgroundColor": "rgba(254, 247, 255, 1)",
+          },
+        ]
+      }
+    />
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "borderRadius": 9999,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "opacity": 1,
+          },
+          {
+            "backgroundColor": "rgba(254, 247, 255, 1)",
+          },
+        ]
+      }
+    />
+  </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+          "borderRadius": 9999,
+          "borderWidth": 3,
+          "bottom": -1,
+          "left": -5,
+          "right": -5,
+          "top": -1,
+        },
+        {
+          "opacity": 0,
+        },
+      ]
+    }
+  />
+</View>
 `;
 
-exports[`renders on switch 1`] = `
-<RCTSwitch
-  accessibilityRole="switch"
-  onChange={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  onTintColor="rgba(103, 80, 164, 1)"
+exports[`Switch render renders off 1`] = `
+<View
   style={
-    {
-      "alignSelf": "flex-start",
+    [
+      {
+        "alignItems": "center",
+        "height": 40,
+        "justifyContent": "center",
+        "overflow": "visible",
+        "width": 52,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": false,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="switch"
+    style={
+      [
+        {
+          "alignItems": "center",
+          "height": 40,
+          "justifyContent": "center",
+          "width": 52,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "borderRadius": 9999,
+            "height": 32,
+            "overflow": "visible",
+            "width": 52,
+          },
+          {
+            "backgroundColor": "rgba(230, 224, 233, 1)",
+            "opacity": 1,
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "borderRadius": 9999,
+              "borderWidth": 2,
+              "bottom": 0,
+              "left": 0,
+              "pointerEvents": "none",
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "borderColor": "rgba(121, 116, 126, 1)",
+            },
+          ]
+        }
+      />
+    </View>
+  </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "borderRadius": 9999,
+          "height": 40,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "top": 0,
+          "width": 40,
+        },
+        {
+          "left": 0,
+        },
+        {
+          "backgroundColor": "rgba(29, 27, 32, 1)",
+        },
+        {
+          "opacity": 0,
+          "transform": [
+            {
+              "translateX": -4,
+            },
+          ],
+        },
+      ]
     }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "justifyContent": "center",
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+        {
+          "left": 0,
+        },
+        {
+          "height": 16,
+          "top": 12,
+          "transform": [
+            {
+              "translateX": 8,
+            },
+          ],
+          "width": 16,
+        },
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "borderRadius": 9999,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "opacity": 1,
+          },
+          {
+            "backgroundColor": "rgba(121, 116, 126, 1)",
+          },
+        ]
+      }
+    />
+  </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+          "borderRadius": 9999,
+          "borderWidth": 3,
+          "bottom": -1,
+          "left": -5,
+          "right": -5,
+          "top": -1,
+        },
+        {
+          "opacity": 0,
+        },
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Switch render renders on 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "center",
+        "height": 40,
+        "justifyContent": "center",
+        "overflow": "visible",
+        "width": 52,
+      },
+      undefined,
+    ]
   }
-  tintColor="rgba(103, 80, 164, 1)"
-  value={true}
-/>
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": true,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="switch"
+    style={
+      [
+        {
+          "alignItems": "center",
+          "height": 40,
+          "justifyContent": "center",
+          "width": 52,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "borderRadius": 9999,
+            "height": 32,
+            "overflow": "visible",
+            "width": 52,
+          },
+          {
+            "backgroundColor": "rgba(103, 80, 164, 1)",
+            "opacity": 1,
+          },
+        ]
+      }
+    />
+  </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "borderRadius": 9999,
+          "height": 40,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "top": 0,
+          "width": 40,
+        },
+        {
+          "left": 0,
+        },
+        {
+          "backgroundColor": "rgba(103, 80, 164, 1)",
+        },
+        {
+          "opacity": 0,
+          "transform": [
+            {
+              "translateX": 16,
+            },
+          ],
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "justifyContent": "center",
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+        {
+          "left": 0,
+        },
+        {
+          "height": 24,
+          "top": 8,
+          "transform": [
+            {
+              "translateX": 24,
+            },
+          ],
+          "width": 24,
+        },
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "borderRadius": 9999,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "opacity": 1,
+          },
+          {
+            "backgroundColor": "rgba(255, 255, 255, 1)",
+          },
+        ]
+      }
+    />
+  </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+          "borderRadius": 9999,
+          "borderWidth": 3,
+          "bottom": -1,
+          "left": -5,
+          "right": -5,
+          "top": -1,
+        },
+        {
+          "opacity": 0,
+        },
+      ]
+    }
+  />
+</View>
 `;
 
-exports[`renders switch with color 1`] = `
-<RCTSwitch
-  accessibilityRole="switch"
-  onChange={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  onTintColor="#e91e63"
+exports[`Switch render renders with checked icon 1`] = `
+<View
   style={
-    {
-      "alignSelf": "flex-start",
+    [
+      {
+        "alignItems": "center",
+        "height": 40,
+        "justifyContent": "center",
+        "overflow": "visible",
+        "width": 52,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": true,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="switch"
+    style={
+      [
+        {
+          "alignItems": "center",
+          "height": 40,
+          "justifyContent": "center",
+          "width": 52,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "borderRadius": 9999,
+            "height": 32,
+            "overflow": "visible",
+            "width": 52,
+          },
+          {
+            "backgroundColor": "rgba(103, 80, 164, 1)",
+            "opacity": 1,
+          },
+        ]
+      }
+    />
+  </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "borderRadius": 9999,
+          "height": 40,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "top": 0,
+          "width": 40,
+        },
+        {
+          "left": 0,
+        },
+        {
+          "backgroundColor": "rgba(103, 80, 164, 1)",
+        },
+        {
+          "opacity": 0,
+          "transform": [
+            {
+              "translateX": 16,
+            },
+          ],
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "justifyContent": "center",
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+        {
+          "left": 0,
+        },
+        {
+          "height": 24,
+          "top": 8,
+          "transform": [
+            {
+              "translateX": 24,
+            },
+          ],
+          "width": 24,
+        },
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "borderRadius": 9999,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "opacity": 1,
+          },
+          {
+            "backgroundColor": "rgba(255, 255, 255, 1)",
+          },
+        ]
+      }
+    />
+  </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "height": 16,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "top": 12,
+          "width": 16,
+        },
+        {
+          "left": 0,
+        },
+        {
+          "transform": [
+            {
+              "translateX": 28,
+            },
+          ],
+        },
+      ]
     }
+  >
+    <View
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "opacity": 1,
+          },
+        ]
+      }
+    >
+      <Text
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no-hide-descendants"
+        pointerEvents="none"
+        selectable={false}
+        style={
+          [
+            {
+              "color": "rgba(103, 80, 164, 1)",
+              "fontSize": 16,
+            },
+            [
+              {
+                "lineHeight": 16,
+                "transform": [
+                  {
+                    "scaleX": 1,
+                  },
+                ],
+              },
+              {
+                "backgroundColor": "transparent",
+              },
+            ],
+          ]
+        }
+      >
+        check
+      </Text>
+    </View>
+  </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+          "borderRadius": 9999,
+          "borderWidth": 3,
+          "bottom": -1,
+          "left": -5,
+          "right": -5,
+          "top": -1,
+        },
+        {
+          "opacity": 0,
+        },
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Switch render renders with per-state icons 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "center",
+        "height": 40,
+        "justifyContent": "center",
+        "overflow": "visible",
+        "width": 52,
+      },
+      undefined,
+    ]
   }
-  tintColor="#e91e63"
-  value={true}
-/>
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": true,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="switch"
+    style={
+      [
+        {
+          "alignItems": "center",
+          "height": 40,
+          "justifyContent": "center",
+          "width": 52,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "borderRadius": 9999,
+            "height": 32,
+            "overflow": "visible",
+            "width": 52,
+          },
+          {
+            "backgroundColor": "rgba(103, 80, 164, 1)",
+            "opacity": 1,
+          },
+        ]
+      }
+    />
+  </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "borderRadius": 9999,
+          "height": 40,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "top": 0,
+          "width": 40,
+        },
+        {
+          "left": 0,
+        },
+        {
+          "backgroundColor": "rgba(103, 80, 164, 1)",
+        },
+        {
+          "opacity": 0,
+          "transform": [
+            {
+              "translateX": 16,
+            },
+          ],
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "justifyContent": "center",
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+        {
+          "left": 0,
+        },
+        {
+          "height": 24,
+          "top": 8,
+          "transform": [
+            {
+              "translateX": 24,
+            },
+          ],
+          "width": 24,
+        },
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "borderRadius": 9999,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "opacity": 1,
+          },
+          {
+            "backgroundColor": "rgba(255, 255, 255, 1)",
+          },
+        ]
+      }
+    />
+  </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "height": 16,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "top": 12,
+          "width": 16,
+        },
+        {
+          "left": 0,
+        },
+        {
+          "transform": [
+            {
+              "translateX": 28,
+            },
+          ],
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "opacity": 1,
+          },
+        ]
+      }
+    >
+      <Text
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no-hide-descendants"
+        pointerEvents="none"
+        selectable={false}
+        style={
+          [
+            {
+              "color": "rgba(103, 80, 164, 1)",
+              "fontSize": 16,
+            },
+            [
+              {
+                "lineHeight": 16,
+                "transform": [
+                  {
+                    "scaleX": 1,
+                  },
+                ],
+              },
+              {
+                "backgroundColor": "transparent",
+              },
+            ],
+          ]
+        }
+      >
+        check
+      </Text>
+    </View>
+  </View>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+          "borderRadius": 9999,
+          "borderWidth": 3,
+          "bottom": -1,
+          "left": -5,
+          "right": -5,
+          "top": -1,
+        },
+        {
+          "opacity": 0,
+        },
+      ]
+    }
+  />
+</View>
 `;
diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
index 76ad8d4e54..6efc467066 100644
--- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -1,2037 +1,1952 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`call onPress when affix adornment pressed 1`] = `
+exports[`renders filled TextInput with TextInput.Icon accessories 1`] = `
 <View
-  style={
-    [
-      {
-        "backgroundColor": "rgba(231, 224, 236, 1)",
-        "borderTopLeftRadius": 4,
-        "borderTopRightRadius": 4,
-      },
-      {},
-    ]
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
   }
->
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "rgba(73, 69, 79, 1)",
-        "bottom": 0,
-        "height": 1,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "transform": [
-          {
-            "scaleY": 0.5,
-          },
-        ],
-        "zIndex": 1,
-      }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
-    testID="text-input-underline"
-  />
+  }
+  accessible={false}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  role="none"
+>
   <View
-    onLayout={[Function]}
     style={
       [
         {
-          "flexGrow": 1,
-          "paddingBottom": 0,
-          "paddingTop": 0,
+          "flexDirection": "row",
+          "minHeight": 112,
+          "paddingVertical": 16,
         },
         {
-          "minHeight": 56,
+          "backgroundColor": "rgba(230, 224, 233, 1)",
+          "borderTopEndRadius": 4,
+          "borderTopStartRadius": 4,
+          "overflow": "hidden",
+          "paddingBottom": 19,
         },
       ]
     }
   >
     <View
-      pointerEvents="none"
       style={
         [
           {
             "bottom": 0,
             "left": 0,
+            "pointerEvents": "none",
             "position": "absolute",
             "right": 0,
-            "top": 0,
-          },
-          {
-            "overflow": "hidden",
           },
           {
-            "zIndex": 3,
+            "backgroundColor": "rgba(121, 116, 126, 1)",
+            "height": 1,
           },
+          false,
         ]
       }
-    >
-      <View
-        collapsable={false}
-        pointerEvents="none"
-        style={
+    />
+    <View
+      collapsable={false}
+      style={
+        [
           {
             "bottom": 0,
             "left": 0,
-            "opacity": 1,
+            "pointerEvents": "none",
             "position": "absolute",
             "right": 0,
-            "top": 0,
+          },
+          {
+            "backgroundColor": "rgba(103, 80, 164, 1)",
+            "height": 2,
+          },
+          false,
+          {
             "transform": [
               {
-                "translateX": 0,
+                "scaleX": 0,
               },
             ],
-            "width": 750,
-          }
-        }
-      >
-        <View
-          style={
-            {
-              "width": 73,
-            }
-          }
-        >
-          <Text
-            collapsable={false}
-            maxFontSizeMultiplier={1.5}
-            numberOfLines={1}
-            onLayout={[Function]}
-            onTextLayout={[Function]}
-            style={
-              {
-                "color": "rgba(103, 80, 164, 1)",
-                "fontFamily": "System",
-                "fontSize": 16,
-                "fontWeight": undefined,
-                "left": 0,
-                "letterSpacing": 0.15,
-                "lineHeight": undefined,
-                "maxWidth": 73,
-                "opacity": 0,
-                "paddingLeft": 16,
-                "paddingRight": 16,
-                "position": "absolute",
-                "textAlign": "left",
-                "top": 30,
-                "transform": [
-                  {
-                    "translateX": 0,
-                  },
-                  {
-                    "translateY": 0,
-                  },
-                  {
-                    "scale": 1,
-                  },
-                ],
-                "writingDirection": "ltr",
-              }
-            }
-            testID="text-input-flat-label-active"
-          >
-            Flat input
-          </Text>
-          <Text
-            collapsable={false}
-            maxFontSizeMultiplier={1.5}
-            numberOfLines={1}
-            style={
-              {
-                "color": "rgba(73, 69, 79, 1)",
-                "fontFamily": "System",
-                "fontSize": 16,
-                "fontWeight": undefined,
-                "left": 0,
-                "letterSpacing": 0.15,
-                "lineHeight": undefined,
-                "maxWidth": 73,
-                "opacity": 0,
-                "paddingLeft": 16,
-                "paddingRight": 16,
-                "position": "absolute",
-                "textAlign": "left",
-                "top": 30,
-                "transform": [
-                  {
-                    "translateX": 0,
-                  },
-                  {
-                    "translateY": 0,
-                  },
-                  {
-                    "scale": 1,
-                  },
-                ],
-                "writingDirection": "ltr",
-              }
-            }
-            testID="text-input-flat-label-inactive"
-          >
-            Flat input
-          </Text>
-        </View>
-      </View>
-    </View>
-    <TextInput
-      cursorColor="rgba(103, 80, 164, 1)"
-      editable={true}
-      maxFontSizeMultiplier={1.5}
-      multiline={false}
-      onBlur={[Function]}
-      onChangeText={[Function]}
-      onFocus={[Function]}
-      placeholder="Enter your phone number"
-      placeholderTextColor="transparent"
-      selectionColor="rgba(103, 80, 164, 1)"
+          },
+        ]
+      }
+    />
+    <View
+      aria-hidden={true}
+      collapsable={false}
       style={
         [
           {
-            "flexGrow": 1,
-            "margin": 0,
-          },
-          {},
-          {
-            "paddingBottom": 4,
-            "paddingTop": 24,
+            "pointerEvents": "none",
+            "position": "absolute",
           },
           {
-            "color": "rgba(28, 27, 31, 1)",
-            "fontFamily": "System",
-            "fontSize": 16,
-            "fontWeight": undefined,
-            "letterSpacing": 0.15,
-            "lineHeight": undefined,
-            "minWidth": 65,
-            "paddingLeft": 16,
-            "paddingRight": 16,
-            "textAlign": "left",
-            "textAlignVertical": "center",
+            "left": 52,
           },
-          undefined,
           {
-            "marginLeft": 0,
-            "paddingLeft": 40,
+            "top": 16,
           },
-          undefined,
         ]
       }
-      testID="text-input-flat"
-      underlineColorAndroid="transparent"
-      value=""
-    />
-  </View>
-  <View
-    collapsable={false}
-    onLayout={[Function]}
-    style={
-      {
-        "alignItems": "center",
-        "justifyContent": "center",
-        "left": 16,
-        "opacity": 0,
-        "position": "absolute",
-        "top": null,
-      }
-    }
-    testID="left-affix-adornment"
-  >
-    <View
-      accessibilityLabel="+39"
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
     >
       <Text
-        maxFontSizeMultiplier={1.5}
+        collapsable={false}
         style={
           [
+            {
+              "fontWeight": "400",
+              "includeFontPadding": false,
+              "paddingHorizontal": 0,
+              "paddingVertical": 0,
+            },
             {
               "color": "rgba(73, 69, 79, 1)",
             },
             {
-              "fontFamily": "System",
-              "fontSize": 16,
-              "fontWeight": undefined,
-              "letterSpacing": 0.15,
-              "lineHeight": undefined,
+              "fontSize": 12,
             },
-            undefined,
+            false,
           ]
         }
-        testID="left-affix-adornment-text"
       >
-        +39
+        Search
       </Text>
     </View>
-  </View>
-</View>
-`;
-
-exports[`correctly applies a component as the text label 1`] = `
-<View
-  style={
-    [
-      {
-        "backgroundColor": "rgba(231, 224, 236, 1)",
-        "borderTopLeftRadius": 4,
-        "borderTopRightRadius": 4,
-      },
-      {},
-    ]
-  }
->
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "rgba(73, 69, 79, 1)",
-        "bottom": 0,
-        "height": 1,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "transform": [
-          {
-            "scaleY": 0.5,
-          },
-        ],
-        "zIndex": 1,
-      }
-    }
-    testID="text-input-underline"
-  />
-  <View
-    onLayout={[Function]}
-    style={
-      [
-        {
-          "flexGrow": 1,
-          "paddingBottom": 0,
-          "paddingTop": 0,
-        },
-        {
-          "minHeight": 56,
-        },
-      ]
-    }
-  >
     <View
-      pointerEvents="none"
       style={
-        [
-          {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          {
-            "overflow": "hidden",
-          },
-          {
-            "zIndex": 3,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "justifyContent": "center",
+        }
       }
     >
       <View
         collapsable={false}
-        pointerEvents="none"
         style={
-          {
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "transform": [
-              {
-                "translateX": 4,
-              },
-            ],
-            "width": 750,
-          }
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderRadius": 20,
+              "borderWidth": 0,
+            },
+            {
+              "margin": 0,
+            },
+            {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "marginStart": 12,
+              "width": 24,
+            },
+            false,
+          ]
         }
       >
         <View
-          style={
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
             {
-              "width": 97.33333333333333,
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
           }
+          multiline={false}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "overflow": "hidden",
+              },
+              [
+                {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                undefined,
+              ],
+            ]
+          }
         >
-          <Text
-            collapsable={false}
-            maxFontSizeMultiplier={1.5}
-            numberOfLines={1}
-            onLayout={[Function]}
-            onTextLayout={[Function]}
+          <View
             style={
               {
-                "color": "rgba(103, 80, 164, 1)",
-                "fontFamily": "System",
-                "fontSize": 16,
-                "fontWeight": undefined,
-                "left": 0,
-                "letterSpacing": 0.15,
-                "lineHeight": undefined,
-                "maxWidth": 97.33333333333333,
-                "opacity": 0,
-                "paddingLeft": 16,
-                "paddingRight": 16,
-                "position": "absolute",
-                "textAlign": "left",
-                "top": 30,
-                "transform": [
-                  {
-                    "translateX": 0,
-                  },
-                  {
-                    "translateY": -12,
-                  },
-                  {
-                    "scale": 0.75,
-                  },
-                ],
-                "writingDirection": "ltr",
+                "opacity": 1,
               }
             }
-            testID="text-input-flat-label-active"
           >
             <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
               style={
-                {
-                  "color": "#f44336",
-                }
-              }
-            >
-              Flat input
-            </Text>
-          </Text>
-          <Text
-            collapsable={false}
-            maxFontSizeMultiplier={1.5}
-            numberOfLines={1}
-            style={
-              {
-                "color": "rgba(73, 69, 79, 1)",
-                "fontFamily": "System",
-                "fontSize": 16,
-                "fontWeight": undefined,
-                "left": 0,
-                "letterSpacing": 0.15,
-                "lineHeight": undefined,
-                "maxWidth": 97.33333333333333,
-                "opacity": 0,
-                "paddingLeft": 16,
-                "paddingRight": 16,
-                "position": "absolute",
-                "textAlign": "left",
-                "top": 30,
-                "transform": [
-                  {
-                    "translateX": 0,
-                  },
-                  {
-                    "translateY": -12,
-                  },
+                [
                   {
-                    "scale": 0.75,
+                    "color": "#49454F",
+                    "fontSize": 24,
                   },
-                ],
-                "writingDirection": "ltr",
-              }
-            }
-            testID="text-input-flat-label-inactive"
-          >
-            <Text
-              style={
-                {
-                  "color": "#f44336",
-                }
+                  [
+                    {
+                      "lineHeight": 24,
+                      "transform": [
+                        {
+                          "scaleX": 1,
+                        },
+                      ],
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                    },
+                  ],
+                ]
               }
             >
-              Flat input
+              magnify
             </Text>
-          </Text>
+          </View>
         </View>
       </View>
     </View>
-    <TextInput
-      cursorColor="rgba(103, 80, 164, 1)"
-      editable={true}
-      maxFontSizeMultiplier={1.5}
-      multiline={false}
-      onBlur={[Function]}
-      onChangeText={[Function]}
-      onFocus={[Function]}
-      placeholder="Type something"
-      placeholderTextColor="transparent"
-      selectionColor="rgba(103, 80, 164, 1)"
+    <View
+      collapsable={false}
       style={
         [
           {
-            "flexGrow": 1,
-            "margin": 0,
-          },
-          {},
-          {
-            "paddingBottom": 4,
-            "paddingTop": 24,
+            "alignItems": "flex-end",
+            "flex": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 16,
           },
+          false,
           {
-            "color": "rgba(28, 27, 31, 1)",
-            "fontFamily": "System",
-            "fontSize": 16,
-            "fontWeight": undefined,
-            "letterSpacing": 0.15,
-            "lineHeight": undefined,
-            "minWidth": 65,
-            "paddingLeft": 16,
-            "paddingRight": 16,
-            "textAlign": "left",
-            "textAlignVertical": "center",
+            "opacity": 1,
           },
-          undefined,
-          [
-            {},
-          ],
-          undefined,
         ]
       }
-      testID="text-input-flat"
-      underlineColorAndroid="transparent"
-      value="Some test value"
-    />
-  </View>
-</View>
-`;
-
-exports[`correctly applies cursorColor prop 1`] = `
-<View
-  style={
-    [
-      {
-        "backgroundColor": "rgba(231, 224, 236, 1)",
-        "borderTopLeftRadius": 4,
-        "borderTopRightRadius": 4,
-      },
-      {},
-    ]
-  }
->
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "rgba(73, 69, 79, 1)",
-        "bottom": 0,
-        "height": 1,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "transform": [
-          {
-            "scaleY": 0.5,
-          },
-        ],
-        "zIndex": 1,
-      }
-    }
-    testID="text-input-underline"
-  />
-  <View
-    onLayout={[Function]}
-    style={
-      [
-        {
-          "flexGrow": 1,
-          "paddingBottom": 0,
-          "paddingTop": 0,
-        },
-        {
-          "minHeight": 56,
-        },
-      ]
-    }
-  >
+    >
+      <TextInput
+        aria-disabled={false}
+        aria-invalid={false}
+        aria-label="Search"
+        cursorColor="rgba(103, 80, 164, 1)"
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        placeholderTextColor="rgba(73, 69, 79, 1)"
+        selectionColor="rgba(103, 80, 164, 1)"
+        style={
+          [
+            {
+              "fontWeight": "400",
+              "includeFontPadding": false,
+              "paddingHorizontal": 0,
+              "paddingVertical": 0,
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "flex": 1,
+              "fontSize": 16,
+              "textAlign": "left",
+              "writingDirection": "ltr",
+            },
+            undefined,
+            false,
+            false,
+            undefined,
+          ]
+        }
+        value="q"
+      />
+    </View>
     <View
-      pointerEvents="none"
       style={
-        [
-          {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          {
-            "overflow": "hidden",
-          },
-          {
-            "zIndex": 3,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "justifyContent": "center",
+        }
       }
     >
       <View
         collapsable={false}
-        pointerEvents="none"
         style={
-          {
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "transform": [
-              {
-                "translateX": 4,
-              },
-            ],
-            "width": 750,
-          }
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderRadius": 20,
+              "borderWidth": 0,
+            },
+            {
+              "margin": 0,
+            },
+            {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "marginEnd": 12,
+              "width": 24,
+            },
+            false,
+          ]
         }
       >
         <View
-          style={
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
             {
-              "width": 97.33333333333333,
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
           }
+          multiline={false}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "overflow": "hidden",
+              },
+              [
+                {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                undefined,
+              ],
+            ]
+          }
         >
-          <Text
-            collapsable={false}
-            maxFontSizeMultiplier={1.5}
-            numberOfLines={1}
-            onLayout={[Function]}
-            onTextLayout={[Function]}
+          <View
             style={
               {
-                "color": "rgba(103, 80, 164, 1)",
-                "fontFamily": "System",
-                "fontSize": 16,
-                "fontWeight": undefined,
-                "left": 0,
-                "letterSpacing": 0.15,
-                "lineHeight": undefined,
-                "maxWidth": 97.33333333333333,
-                "opacity": 0,
-                "paddingLeft": 16,
-                "paddingRight": 16,
-                "position": "absolute",
-                "textAlign": "left",
-                "top": 30,
-                "transform": [
-                  {
-                    "translateX": 0,
-                  },
-                  {
-                    "translateY": -12,
-                  },
-                  {
-                    "scale": 0.75,
-                  },
-                ],
-                "writingDirection": "ltr",
+                "opacity": 1,
               }
             }
-            testID="text-input-flat-label-active"
           >
-            Flat input
-          </Text>
-          <Text
-            collapsable={false}
-            maxFontSizeMultiplier={1.5}
-            numberOfLines={1}
-            style={
-              {
-                "color": "rgba(73, 69, 79, 1)",
-                "fontFamily": "System",
-                "fontSize": 16,
-                "fontWeight": undefined,
-                "left": 0,
-                "letterSpacing": 0.15,
-                "lineHeight": undefined,
-                "maxWidth": 97.33333333333333,
-                "opacity": 0,
-                "paddingLeft": 16,
-                "paddingRight": 16,
-                "position": "absolute",
-                "textAlign": "left",
-                "top": 30,
-                "transform": [
-                  {
-                    "translateX": 0,
-                  },
-                  {
-                    "translateY": -12,
-                  },
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
+              style={
+                [
                   {
-                    "scale": 0.75,
+                    "color": "#49454F",
+                    "fontSize": 24,
                   },
-                ],
-                "writingDirection": "ltr",
+                  [
+                    {
+                      "lineHeight": 24,
+                      "transform": [
+                        {
+                          "scaleX": 1,
+                        },
+                      ],
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                    },
+                  ],
+                ]
               }
-            }
-            testID="text-input-flat-label-inactive"
-          >
-            Flat input
-          </Text>
+            >
+              close
+            </Text>
+          </View>
         </View>
       </View>
     </View>
-    <TextInput
-      cursorColor="#f44336"
-      editable={true}
-      maxFontSizeMultiplier={1.5}
-      multiline={false}
-      onBlur={[Function]}
-      onChangeText={[Function]}
-      onFocus={[Function]}
-      placeholder="Type something"
-      placeholderTextColor="transparent"
-      selectionColor="rgba(103, 80, 164, 1)"
-      style={
-        [
-          {
-            "flexGrow": 1,
-            "margin": 0,
-          },
-          {},
-          {
-            "paddingBottom": 4,
-            "paddingTop": 24,
-          },
-          {
-            "color": "rgba(28, 27, 31, 1)",
-            "fontFamily": "System",
-            "fontSize": 16,
-            "fontWeight": undefined,
-            "letterSpacing": 0.15,
-            "lineHeight": undefined,
-            "minWidth": 65,
-            "paddingLeft": 16,
-            "paddingRight": 16,
-            "textAlign": "left",
-            "textAlignVertical": "center",
-          },
-          undefined,
-          [
-            {},
-          ],
-          undefined,
-        ]
-      }
-      testID="text-input-flat"
-      underlineColorAndroid="transparent"
-      value="Some test value"
-    />
   </View>
-</View>
-`;
-
-exports[`correctly applies default textAlign based on default RTL 1`] = `
-<View
-  style={
-    [
-      {
-        "backgroundColor": "rgba(231, 224, 236, 1)",
-        "borderTopLeftRadius": 4,
-        "borderTopRightRadius": 4,
-      },
-      {},
-    ]
-  }
->
   <View
-    collapsable={false}
     style={
       {
-        "backgroundColor": "rgba(73, 69, 79, 1)",
-        "bottom": 0,
-        "height": 1,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "transform": [
-          {
-            "scaleY": 0.5,
-          },
-        ],
-        "zIndex": 1,
+        "flexDirection": "row",
       }
     }
-    testID="text-input-underline"
   />
+</View>
+`;
+
+exports[`renders filled TextInput with TextInput.Icon accessories when error is true 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={false}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  role="none"
+>
   <View
-    onLayout={[Function]}
     style={
       [
         {
-          "flexGrow": 1,
-          "paddingBottom": 0,
-          "paddingTop": 0,
+          "flexDirection": "row",
+          "minHeight": 112,
+          "paddingVertical": 16,
         },
         {
-          "minHeight": 56,
+          "backgroundColor": "rgba(230, 224, 233, 1)",
+          "borderTopEndRadius": 4,
+          "borderTopStartRadius": 4,
+          "overflow": "hidden",
+          "paddingBottom": 19,
         },
       ]
     }
   >
     <View
-      pointerEvents="none"
       style={
         [
           {
             "bottom": 0,
             "left": 0,
+            "pointerEvents": "none",
             "position": "absolute",
             "right": 0,
-            "top": 0,
-          },
-          {
-            "overflow": "hidden",
           },
           {
-            "zIndex": 3,
+            "backgroundColor": "rgba(179, 38, 30, 1)",
+            "height": 1,
           },
+          false,
         ]
       }
-    >
-      <View
-        collapsable={false}
-        pointerEvents="none"
-        style={
+    />
+    <View
+      collapsable={false}
+      style={
+        [
           {
             "bottom": 0,
             "left": 0,
-            "opacity": 0,
+            "pointerEvents": "none",
             "position": "absolute",
             "right": 0,
-            "top": 0,
+          },
+          {
+            "backgroundColor": "rgba(179, 38, 30, 1)",
+            "height": 2,
+          },
+          false,
+          {
             "transform": [
               {
-                "translateX": 4,
+                "scaleX": 0,
               },
             ],
-            "width": 750,
-          }
-        }
-      >
-        <View
-          style={
-            {
-              "width": 97.33333333333333,
-            }
-          }
-        >
-          <Text
-            collapsable={false}
-            maxFontSizeMultiplier={1.5}
-            numberOfLines={1}
-            onLayout={[Function]}
-            onTextLayout={[Function]}
-            style={
-              {
-                "color": "rgba(103, 80, 164, 1)",
-                "fontFamily": "System",
-                "fontSize": 16,
-                "fontWeight": undefined,
-                "left": 0,
-                "letterSpacing": 0.15,
-                "lineHeight": undefined,
-                "maxWidth": 97.33333333333333,
-                "opacity": 0,
-                "paddingLeft": 16,
-                "paddingRight": 16,
-                "position": "absolute",
-                "textAlign": "left",
-                "top": 30,
-                "transform": [
-                  {
-                    "translateX": 0,
-                  },
-                  {
-                    "translateY": -12,
-                  },
-                  {
-                    "scale": 0.75,
-                  },
-                ],
-                "writingDirection": "ltr",
-              }
-            }
-            testID="text-input-flat-label-active"
-          >
-            Flat input
-          </Text>
-          <Text
-            collapsable={false}
-            maxFontSizeMultiplier={1.5}
-            numberOfLines={1}
-            style={
-              {
-                "color": "rgba(73, 69, 79, 1)",
-                "fontFamily": "System",
-                "fontSize": 16,
-                "fontWeight": undefined,
-                "left": 0,
-                "letterSpacing": 0.15,
-                "lineHeight": undefined,
-                "maxWidth": 97.33333333333333,
-                "opacity": 0,
-                "paddingLeft": 16,
-                "paddingRight": 16,
-                "position": "absolute",
-                "textAlign": "left",
-                "top": 30,
-                "transform": [
-                  {
-                    "translateX": 0,
-                  },
-                  {
-                    "translateY": -12,
-                  },
-                  {
-                    "scale": 0.75,
-                  },
-                ],
-                "writingDirection": "ltr",
-              }
-            }
-            testID="text-input-flat-label-inactive"
-          >
-            Flat input
-          </Text>
-        </View>
-      </View>
-    </View>
-    <TextInput
-      cursorColor="rgba(103, 80, 164, 1)"
-      editable={true}
-      maxFontSizeMultiplier={1.5}
-      multiline={false}
-      onBlur={[Function]}
-      onChangeText={[Function]}
-      onFocus={[Function]}
-      placeholder="Type something"
-      placeholderTextColor="transparent"
-      selectionColor="rgba(103, 80, 164, 1)"
+          },
+        ]
+      }
+    />
+    <View
+      aria-hidden={true}
+      collapsable={false}
       style={
         [
           {
-            "flexGrow": 1,
-            "margin": 0,
+            "pointerEvents": "none",
+            "position": "absolute",
           },
-          {},
           {
-            "paddingBottom": 4,
-            "paddingTop": 24,
+            "left": 52,
           },
           {
-            "color": "rgba(28, 27, 31, 1)",
-            "fontFamily": "System",
-            "fontSize": 16,
-            "fontWeight": undefined,
-            "letterSpacing": 0.15,
-            "lineHeight": undefined,
-            "minWidth": 65,
-            "paddingLeft": 16,
-            "paddingRight": 16,
-            "textAlign": "left",
-            "textAlignVertical": "center",
+            "top": 16,
           },
-          undefined,
-          [
-            {},
-          ],
-          undefined,
         ]
       }
-      testID="text-input-flat"
-      underlineColorAndroid="transparent"
-      value="Some test value"
-    />
-  </View>
-</View>
-`;
-
-exports[`correctly applies height to multiline Outline TextInput 1`] = `
-<View
-  style={{}}
->
-  <View
-    pointerEvents="none"
-    style={
-      [
-        {
-          "bottom": 0,
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 6,
-        },
-        false,
+    >
+      <Text
+        collapsable={false}
+        style={
+          [
+            {
+              "fontWeight": "400",
+              "includeFontPadding": false,
+              "paddingHorizontal": 0,
+              "paddingVertical": 0,
+            },
+            {
+              "color": "rgba(179, 38, 30, 1)",
+            },
+            {
+              "fontSize": 12,
+            },
+            false,
+          ]
+        }
+      >
+        Search
+      </Text>
+    </View>
+    <View
+      style={
         {
-          "backgroundColor": "rgba(255, 251, 254, 1)",
-          "borderColor": "rgba(121, 116, 126, 1)",
-          "borderRadius": 4,
-          "borderWidth": 1,
-        },
-        undefined,
-      ]
+          "alignItems": "center",
+          "justifyContent": "center",
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderRadius": 20,
+              "borderWidth": 0,
+            },
+            {
+              "margin": 0,
+            },
+            {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "marginStart": 12,
+              "width": 24,
+            },
+            false,
+          ]
+        }
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
+            }
+          }
+          multiline={false}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "overflow": "hidden",
+              },
+              [
+                {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                undefined,
+              ],
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "opacity": 1,
+              }
+            }
+          >
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "rgba(179, 38, 30, 1)",
+                    "fontSize": 24,
+                  },
+                  [
+                    {
+                      "lineHeight": 24,
+                      "transform": [
+                        {
+                          "scaleX": 1,
+                        },
+                      ],
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                    },
+                  ],
+                ]
+              }
+            >
+              magnify
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "alignItems": "flex-end",
+            "flex": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 16,
+          },
+          false,
+          {
+            "opacity": 1,
+          },
+        ]
+      }
+    >
+      <TextInput
+        aria-disabled={false}
+        aria-invalid={true}
+        aria-label="Search"
+        cursorColor="rgba(179, 38, 30, 1)"
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        placeholderTextColor="rgba(73, 69, 79, 1)"
+        selectionColor="rgba(179, 38, 30, 1)"
+        style={
+          [
+            {
+              "fontWeight": "400",
+              "includeFontPadding": false,
+              "paddingHorizontal": 0,
+              "paddingVertical": 0,
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "flex": 1,
+              "fontSize": 16,
+              "textAlign": "left",
+              "writingDirection": "ltr",
+            },
+            undefined,
+            false,
+            false,
+            undefined,
+          ]
+        }
+        value="q"
+      />
+    </View>
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "justifyContent": "center",
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderRadius": 20,
+              "borderWidth": 0,
+            },
+            {
+              "margin": 0,
+            },
+            {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "marginEnd": 12,
+              "width": 24,
+            },
+            false,
+          ]
+        }
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
+            }
+          }
+          multiline={false}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "overflow": "hidden",
+              },
+              [
+                {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                undefined,
+              ],
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "opacity": 1,
+              }
+            }
+          >
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "rgba(179, 38, 30, 1)",
+                    "fontSize": 24,
+                  },
+                  [
+                    {
+                      "lineHeight": 24,
+                      "transform": [
+                        {
+                          "scaleX": 1,
+                        },
+                      ],
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                    },
+                  ],
+                ]
+              }
+            >
+              close
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+      }
     }
-    testID="text-input-outline"
   />
+</View>
+`;
+
+exports[`renders filled TextInput with label and value 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={false}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  role="none"
+>
   <View
     style={
       [
         {
-          "flexGrow": 1,
-          "paddingBottom": 0,
+          "flexDirection": "row",
+          "minHeight": 112,
+          "paddingVertical": 16,
         },
         {
-          "minHeight": 100,
-          "paddingTop": 8,
+          "backgroundColor": "rgba(230, 224, 233, 1)",
+          "borderTopEndRadius": 4,
+          "borderTopStartRadius": 4,
+          "overflow": "hidden",
+          "paddingBottom": 19,
         },
       ]
     }
   >
     <View
-      pointerEvents="none"
       style={
         [
           {
             "bottom": 0,
             "left": 0,
+            "pointerEvents": "none",
             "position": "absolute",
             "right": 0,
-            "top": 0,
-          },
-          {
-            "overflow": "hidden",
           },
           {
-            "zIndex": 3,
+            "backgroundColor": "rgba(121, 116, 126, 1)",
+            "height": 1,
           },
+          false,
         ]
       }
-    >
-      <View
-        collapsable={false}
-        pointerEvents="none"
-        style={
+    />
+    <View
+      collapsable={false}
+      style={
+        [
           {
             "bottom": 0,
             "left": 0,
-            "opacity": 0,
+            "pointerEvents": "none",
             "position": "absolute",
             "right": 0,
-            "top": 0,
+          },
+          {
+            "backgroundColor": "rgba(103, 80, 164, 1)",
+            "height": 2,
+          },
+          false,
+          {
             "transform": [
               {
-                "translateX": 3,
+                "scaleX": 0,
               },
             ],
-            "width": 750,
-          }
-        }
-      >
-        <View
-          style={
-            {
-              "width": 97.33333333333333,
-            }
-          }
-        >
-          <Text
-            collapsable={false}
-            maxFontSizeMultiplier={1.5}
-            numberOfLines={1}
-            style={
-              {
-                "backgroundColor": "rgba(255, 251, 254, 1)",
-                "color": "transparent",
-                "fontFamily": "System",
-                "fontSize": 16,
-                "fontWeight": undefined,
-                "height": 0,
-                "left": 8,
-                "letterSpacing": 0.15,
-                "lineHeight": undefined,
-                "opacity": 1,
-                "paddingHorizontal": 0,
-                "position": "absolute",
-                "textAlign": "left",
-                "top": 59,
-                "transform": [
-                  {
-                    "translateX": 0,
-                  },
-                  {
-                    "translateY": -52,
-                  },
-                  {
-                    "scale": 0.75,
-                  },
-                  {
-                    "scaleY": 0.2,
-                  },
-                ],
-                "width": -16,
-                "writingDirection": "ltr",
-              }
-            }
-            testID="text-input-outlined-label-background"
-          />
-          <Text
-            collapsable={false}
-            maxFontSizeMultiplier={1.5}
-            numberOfLines={1}
-            onLayout={[Function]}
-            onTextLayout={[Function]}
-            style={
-              {
-                "color": "rgba(103, 80, 164, 1)",
-                "fontFamily": "System",
-                "fontSize": 16,
-                "fontWeight": undefined,
-                "left": 0,
-                "letterSpacing": 0.15,
-                "lineHeight": undefined,
-                "maxWidth": 97.33333333333333,
-                "opacity": 0,
-                "paddingHorizontal": 16,
-                "position": "absolute",
-                "textAlign": "left",
-                "top": 58,
-                "transform": [
-                  {
-                    "translateX": 0,
-                  },
-                  {
-                    "translateY": -52,
-                  },
-                  {
-                    "scale": 0.75,
-                  },
-                ],
-                "writingDirection": "ltr",
-              }
-            }
-            testID="text-input-outlined-label-active"
-          >
-            Outline Input
-          </Text>
-          <Text
-            collapsable={false}
-            maxFontSizeMultiplier={1.5}
-            numberOfLines={1}
-            style={
-              {
-                "color": "rgba(73, 69, 79, 1)",
-                "fontFamily": "System",
-                "fontSize": 16,
-                "fontWeight": undefined,
-                "left": 0,
-                "letterSpacing": 0.15,
-                "lineHeight": undefined,
-                "maxWidth": 97.33333333333333,
-                "opacity": 0,
-                "paddingHorizontal": 16,
-                "position": "absolute",
-                "textAlign": "left",
-                "top": 58,
-                "transform": [
-                  {
-                    "translateX": 0,
-                  },
-                  {
-                    "translateY": -52,
-                  },
-                  {
-                    "scale": 0.75,
-                  },
-                ],
-                "writingDirection": "ltr",
-              }
-            }
-            testID="text-input-outlined-label-inactive"
-          >
-            Outline Input
-          </Text>
-        </View>
-      </View>
-    </View>
-    <TextInput
-      cursorColor="rgba(103, 80, 164, 1)"
-      editable={true}
-      maxFontSizeMultiplier={1.5}
-      multiline={true}
-      onBlur={[Function]}
-      onChangeText={[Function]}
-      onFocus={[Function]}
-      onLayout={[Function]}
-      placeholder="Type Something"
-      placeholderTextColor="transparent"
-      selectionColor="rgba(103, 80, 164, 1)"
+          },
+        ]
+      }
+    />
+    <View
+      aria-hidden={true}
+      collapsable={false}
       style={
         [
           {
-            "flexGrow": 1,
-            "margin": 0,
+            "pointerEvents": "none",
+            "position": "absolute",
           },
           {
-            "height": 100,
+            "left": 16,
           },
           {
-            "paddingBottom": 24,
-            "paddingTop": 24,
+            "top": 16,
           },
+        ]
+      }
+    >
+      <Text
+        collapsable={false}
+        style={
+          [
+            {
+              "fontWeight": "400",
+              "includeFontPadding": false,
+              "paddingHorizontal": 0,
+              "paddingVertical": 0,
+            },
+            {
+              "color": "rgba(73, 69, 79, 1)",
+            },
+            {
+              "fontSize": 12,
+            },
+            false,
+          ]
+        }
+      >
+        Email
+      </Text>
+    </View>
+    <View
+      collapsable={false}
+      style={
+        [
           {
-            "color": "rgba(28, 27, 31, 1)",
-            "fontFamily": "System",
-            "fontSize": 16,
-            "fontWeight": undefined,
-            "letterSpacing": 0.15,
-            "lineHeight": undefined,
-            "minWidth": 65,
+            "alignItems": "flex-end",
+            "flex": 1,
+            "flexDirection": "row",
             "paddingHorizontal": 16,
-            "textAlign": "left",
-            "textAlignVertical": "top",
           },
-          undefined,
-          [
-            {},
-          ],
-          undefined,
+          false,
+          {
+            "opacity": 1,
+          },
         ]
       }
-      testID="text-input-outlined"
-      underlineColorAndroid="transparent"
-      value="Some test value"
-    />
+    >
+      <TextInput
+        aria-disabled={false}
+        aria-invalid={false}
+        aria-label="Email"
+        cursorColor="rgba(103, 80, 164, 1)"
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        placeholderTextColor="rgba(73, 69, 79, 1)"
+        selectionColor="rgba(103, 80, 164, 1)"
+        style={
+          [
+            {
+              "fontWeight": "400",
+              "includeFontPadding": false,
+              "paddingHorizontal": 0,
+              "paddingVertical": 0,
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "flex": 1,
+              "fontSize": 16,
+              "textAlign": "left",
+              "writingDirection": "ltr",
+            },
+            undefined,
+            false,
+            false,
+            undefined,
+          ]
+        }
+        value="a@b.co"
+      />
+    </View>
   </View>
-</View>
-`;
-
-exports[`correctly applies paddingLeft from contentStyleProp 1`] = `
-<View
-  style={
-    [
-      {
-        "backgroundColor": "rgba(231, 224, 236, 1)",
-        "borderTopLeftRadius": 4,
-        "borderTopRightRadius": 4,
-      },
-      {},
-    ]
-  }
->
   <View
-    collapsable={false}
     style={
       {
-        "backgroundColor": "rgba(73, 69, 79, 1)",
-        "bottom": 0,
-        "height": 1,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "transform": [
-          {
-            "scaleY": 0.5,
-          },
-        ],
-        "zIndex": 1,
+        "flexDirection": "row",
       }
     }
-    testID="text-input-underline"
   />
+</View>
+`;
+
+exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={false}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  role="none"
+>
   <View
-    onLayout={[Function]}
     style={
       [
         {
-          "flexGrow": 1,
-          "paddingBottom": 0,
-          "paddingTop": 0,
+          "flexDirection": "row",
+          "minHeight": 112,
+          "paddingVertical": 16,
         },
         {
-          "minHeight": 56,
+          "borderRadius": 4,
         },
+        undefined,
       ]
     }
   >
     <View
-      pointerEvents="none"
       style={
         [
           {
+            "borderRadius": 4,
             "bottom": 0,
             "left": 0,
+            "pointerEvents": "none",
             "position": "absolute",
             "right": 0,
             "top": 0,
           },
           {
-            "overflow": "hidden",
-          },
-          {
-            "zIndex": 3,
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderWidth": 1,
           },
+          false,
         ]
       }
-    >
-      <View
-        collapsable={false}
-        pointerEvents="none"
-        style={
+    />
+    <View
+      aria-hidden={true}
+      collapsable={false}
+      style={
+        [
           {
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
+            "paddingHorizontal": 4,
+            "pointerEvents": "none",
             "position": "absolute",
-            "right": 0,
-            "top": 0,
+          },
+          {
+            "backgroundColor": "rgba(254, 247, 255, 1)",
+            "left": 48,
+          },
+          {
+            "top": -12,
             "transform": [
               {
-                "translateX": 4,
+                "translateX": -36,
               },
             ],
-            "width": 750,
-          }
+          },
+        ]
+      }
+    >
+      <Text
+        collapsable={false}
+        style={
+          [
+            {
+              "fontWeight": "400",
+              "includeFontPadding": false,
+              "paddingHorizontal": 0,
+              "paddingVertical": 0,
+            },
+            {
+              "color": "rgba(73, 69, 79, 1)",
+            },
+            {
+              "fontSize": 12,
+            },
+            false,
+          ]
+        }
+      >
+        Search
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "justifyContent": "center",
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderRadius": 20,
+              "borderWidth": 0,
+            },
+            {
+              "margin": 0,
+            },
+            {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "marginStart": 12,
+              "width": 24,
+            },
+            false,
+          ]
         }
       >
         <View
-          style={
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
             {
-              "width": 97.33333333333333,
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
           }
+          multiline={false}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "overflow": "hidden",
+              },
+              [
+                {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                undefined,
+              ],
+            ]
+          }
         >
-          <Text
-            collapsable={false}
-            maxFontSizeMultiplier={1.5}
-            numberOfLines={1}
-            onLayout={[Function]}
-            onTextLayout={[Function]}
+          <View
             style={
               {
-                "color": "rgba(103, 80, 164, 1)",
-                "fontFamily": "System",
-                "fontSize": 16,
-                "fontWeight": undefined,
-                "left": 0,
-                "letterSpacing": 0.15,
-                "lineHeight": undefined,
-                "maxWidth": 97.33333333333333,
-                "opacity": 0,
-                "paddingLeft": 16,
-                "paddingRight": 16,
-                "position": "absolute",
-                "textAlign": "left",
-                "top": 30,
-                "transform": [
-                  {
-                    "translateX": 0,
-                  },
-                  {
-                    "translateY": -12,
-                  },
-                  {
-                    "scale": 0.75,
-                  },
-                ],
-                "writingDirection": "ltr",
+                "opacity": 1,
               }
             }
-            testID="text-input-flat-label-active"
           >
-            With padding
-          </Text>
-          <Text
-            collapsable={false}
-            maxFontSizeMultiplier={1.5}
-            numberOfLines={1}
-            style={
-              {
-                "color": "rgba(73, 69, 79, 1)",
-                "fontFamily": "System",
-                "fontSize": 16,
-                "fontWeight": undefined,
-                "left": 0,
-                "letterSpacing": 0.15,
-                "lineHeight": undefined,
-                "maxWidth": 97.33333333333333,
-                "opacity": 0,
-                "paddingLeft": 16,
-                "paddingRight": 16,
-                "position": "absolute",
-                "textAlign": "left",
-                "top": 30,
-                "transform": [
-                  {
-                    "translateX": 0,
-                  },
-                  {
-                    "translateY": -12,
-                  },
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
+              style={
+                [
                   {
-                    "scale": 0.75,
+                    "color": "#49454F",
+                    "fontSize": 24,
                   },
-                ],
-                "writingDirection": "ltr",
+                  [
+                    {
+                      "lineHeight": 24,
+                      "transform": [
+                        {
+                          "scaleX": 1,
+                        },
+                      ],
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                    },
+                  ],
+                ]
               }
-            }
-            testID="text-input-flat-label-inactive"
-          >
-            With padding
-          </Text>
+            >
+              magnify
+            </Text>
+          </View>
         </View>
       </View>
     </View>
-    <TextInput
-      cursorColor="rgba(103, 80, 164, 1)"
-      editable={true}
-      maxFontSizeMultiplier={1.5}
-      multiline={false}
-      onBlur={[Function]}
-      onChangeText={[Function]}
-      onFocus={[Function]}
-      placeholder="Type something"
-      placeholderTextColor="transparent"
-      selectionColor="rgba(103, 80, 164, 1)"
+    <View
+      collapsable={false}
       style={
         [
           {
-            "flexGrow": 1,
-            "margin": 0,
-          },
-          {},
-          {
-            "paddingBottom": 4,
-            "paddingTop": 24,
-          },
-          {
-            "color": "rgba(28, 27, 31, 1)",
-            "fontFamily": "System",
-            "fontSize": 16,
-            "fontWeight": undefined,
-            "letterSpacing": 0.15,
-            "lineHeight": undefined,
-            "minWidth": 65,
-            "paddingLeft": 16,
-            "paddingRight": 16,
-            "textAlign": "left",
-            "textAlignVertical": "center",
+            "alignItems": "center",
+            "flex": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 16,
           },
-          undefined,
-          [
-            {},
-          ],
+          false,
           {
-            "paddingLeft": 20,
+            "opacity": 1,
           },
         ]
       }
-      testID="text-input-flat"
-      underlineColorAndroid="transparent"
-      value="Some test value"
-    />
-  </View>
-</View>
-`;
-
-exports[`correctly applies textAlign center 1`] = `
-<View
-  style={
-    [
-      {
-        "backgroundColor": "rgba(231, 224, 236, 1)",
-        "borderTopLeftRadius": 4,
-        "borderTopRightRadius": 4,
-      },
-      {},
-    ]
-  }
->
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "rgba(73, 69, 79, 1)",
-        "bottom": 0,
-        "height": 1,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "transform": [
-          {
-            "scaleY": 0.5,
-          },
-        ],
-        "zIndex": 1,
-      }
-    }
-    testID="text-input-underline"
-  />
-  <View
-    onLayout={[Function]}
-    style={
-      [
-        {
-          "flexGrow": 1,
-          "paddingBottom": 0,
-          "paddingTop": 0,
-        },
-        {
-          "minHeight": 56,
-        },
-      ]
-    }
-  >
+    >
+      <TextInput
+        aria-disabled={false}
+        aria-invalid={false}
+        aria-label="Search"
+        cursorColor="rgba(103, 80, 164, 1)"
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        placeholderTextColor="rgba(73, 69, 79, 1)"
+        selectionColor="rgba(103, 80, 164, 1)"
+        style={
+          [
+            {
+              "fontWeight": "400",
+              "includeFontPadding": false,
+              "paddingHorizontal": 0,
+              "paddingVertical": 0,
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "flex": 1,
+              "fontSize": 16,
+              "textAlign": "left",
+              "writingDirection": "ltr",
+            },
+            undefined,
+            false,
+            false,
+            undefined,
+          ]
+        }
+        value="q"
+      />
+    </View>
     <View
-      pointerEvents="none"
       style={
-        [
-          {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          {
-            "overflow": "hidden",
-          },
-          {
-            "zIndex": 3,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "justifyContent": "center",
+        }
       }
     >
       <View
         collapsable={false}
-        pointerEvents="none"
         style={
-          {
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "transform": [
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderRadius": 20,
+              "borderWidth": 0,
+            },
+            {
+              "margin": 0,
+            },
+            {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "marginEnd": 12,
+              "width": 24,
+            },
+            false,
+          ]
+        }
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
+            }
+          }
+          multiline={false}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
               {
-                "translateX": 4,
+                "overflow": "hidden",
               },
-            ],
-            "width": 750,
-          }
-        }
-      >
-        <View
-          style={
-            {
-              "width": 97.33333333333333,
-            }
+              [
+                {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                undefined,
+              ],
+            ]
           }
         >
-          <Text
-            collapsable={false}
-            maxFontSizeMultiplier={1.5}
-            numberOfLines={1}
-            onLayout={[Function]}
-            onTextLayout={[Function]}
+          <View
             style={
               {
-                "color": "rgba(103, 80, 164, 1)",
-                "fontFamily": "System",
-                "fontSize": 16,
-                "fontWeight": undefined,
-                "left": 0,
-                "letterSpacing": 0.15,
-                "lineHeight": undefined,
-                "maxWidth": 97.33333333333333,
-                "opacity": 0,
-                "paddingLeft": 16,
-                "paddingRight": 16,
-                "position": "absolute",
-                "textAlign": "left",
-                "top": 30,
-                "transform": [
-                  {
-                    "translateX": 0,
-                  },
-                  {
-                    "translateY": -12,
-                  },
-                  {
-                    "scale": 0.75,
-                  },
-                ],
-                "writingDirection": "ltr",
+                "opacity": 1,
               }
             }
-            testID="text-input-flat-label-active"
           >
-            Flat input
-          </Text>
-          <Text
-            collapsable={false}
-            maxFontSizeMultiplier={1.5}
-            numberOfLines={1}
-            style={
-              {
-                "color": "rgba(73, 69, 79, 1)",
-                "fontFamily": "System",
-                "fontSize": 16,
-                "fontWeight": undefined,
-                "left": 0,
-                "letterSpacing": 0.15,
-                "lineHeight": undefined,
-                "maxWidth": 97.33333333333333,
-                "opacity": 0,
-                "paddingLeft": 16,
-                "paddingRight": 16,
-                "position": "absolute",
-                "textAlign": "left",
-                "top": 30,
-                "transform": [
-                  {
-                    "translateX": 0,
-                  },
-                  {
-                    "translateY": -12,
-                  },
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
+              style={
+                [
                   {
-                    "scale": 0.75,
+                    "color": "#49454F",
+                    "fontSize": 24,
                   },
-                ],
-                "writingDirection": "ltr",
+                  [
+                    {
+                      "lineHeight": 24,
+                      "transform": [
+                        {
+                          "scaleX": 1,
+                        },
+                      ],
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                    },
+                  ],
+                ]
               }
-            }
-            testID="text-input-flat-label-inactive"
-          >
-            Flat input
-          </Text>
+            >
+              close
+            </Text>
+          </View>
         </View>
       </View>
     </View>
-    <TextInput
-      cursorColor="rgba(103, 80, 164, 1)"
-      editable={true}
-      maxFontSizeMultiplier={1.5}
-      multiline={false}
-      onBlur={[Function]}
-      onChangeText={[Function]}
-      onFocus={[Function]}
-      placeholder="Type something"
-      placeholderTextColor="transparent"
-      selectionColor="rgba(103, 80, 164, 1)"
-      style={
-        [
-          {
-            "flexGrow": 1,
-            "margin": 0,
-          },
-          {},
-          {
-            "paddingBottom": 4,
-            "paddingTop": 24,
-          },
-          {
-            "color": "rgba(28, 27, 31, 1)",
-            "fontFamily": "System",
-            "fontSize": 16,
-            "fontWeight": undefined,
-            "letterSpacing": 0.15,
-            "lineHeight": undefined,
-            "minWidth": 65,
-            "paddingLeft": 16,
-            "paddingRight": 16,
-            "textAlign": "center",
-            "textAlignVertical": "center",
-          },
-          undefined,
-          [
-            {},
-          ],
-          undefined,
-        ]
-      }
-      testID="text-input-flat"
-      underlineColorAndroid="transparent"
-      value="Some test value"
-    />
   </View>
-</View>
-`;
-
-exports[`correctly renders left-side affix adornment, and right-side icon adornment 1`] = `
-<View
-  style={
-    [
-      {
-        "backgroundColor": "rgba(231, 224, 236, 1)",
-        "borderTopLeftRadius": 4,
-        "borderTopRightRadius": 4,
-      },
-      {},
-    ]
-  }
->
   <View
-    collapsable={false}
     style={
       {
-        "backgroundColor": "rgba(73, 69, 79, 1)",
-        "bottom": 0,
-        "height": 1,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "transform": [
-          {
-            "scaleY": 0.5,
-          },
-        ],
-        "zIndex": 1,
+        "flexDirection": "row",
       }
     }
-    testID="text-input-underline"
   />
+</View>
+`;
+
+exports[`renders outlined TextInput with TextInput.Icon accessories when error is true 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={false}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  role="none"
+>
   <View
-    onLayout={[Function]}
     style={
       [
         {
-          "flexGrow": 1,
-          "paddingBottom": 0,
-          "paddingTop": 0,
+          "flexDirection": "row",
+          "minHeight": 112,
+          "paddingVertical": 16,
         },
         {
-          "minHeight": 56,
+          "borderRadius": 4,
         },
+        undefined,
       ]
     }
   >
     <View
-      pointerEvents="none"
       style={
         [
           {
+            "borderRadius": 4,
             "bottom": 0,
             "left": 0,
+            "pointerEvents": "none",
             "position": "absolute",
             "right": 0,
             "top": 0,
           },
           {
-            "overflow": "hidden",
-          },
-          {
-            "zIndex": 3,
+            "borderColor": "rgba(179, 38, 30, 1)",
+            "borderWidth": 1,
           },
+          false,
         ]
       }
-    >
-      <View
-        collapsable={false}
-        pointerEvents="none"
-        style={
+    />
+    <View
+      aria-hidden={true}
+      collapsable={false}
+      style={
+        [
           {
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
+            "paddingHorizontal": 4,
+            "pointerEvents": "none",
             "position": "absolute",
-            "right": 0,
-            "top": 0,
+          },
+          {
+            "backgroundColor": "rgba(254, 247, 255, 1)",
+            "left": 48,
+          },
+          {
+            "top": -12,
             "transform": [
               {
-                "translateX": 4,
+                "translateX": -36,
               },
             ],
-            "width": 750,
-          }
+          },
+        ]
+      }
+    >
+      <Text
+        collapsable={false}
+        style={
+          [
+            {
+              "fontWeight": "400",
+              "includeFontPadding": false,
+              "paddingHorizontal": 0,
+              "paddingVertical": 0,
+            },
+            {
+              "color": "rgba(179, 38, 30, 1)",
+            },
+            {
+              "fontSize": 12,
+            },
+            false,
+          ]
+        }
+      >
+        Search
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "justifyContent": "center",
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderRadius": 20,
+              "borderWidth": 0,
+            },
+            {
+              "margin": 0,
+            },
+            {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "marginStart": 12,
+              "width": 24,
+            },
+            false,
+          ]
         }
       >
         <View
-          style={
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
             {
-              "width": 97.33333333333333,
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
           }
+          multiline={false}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
+              {
+                "overflow": "hidden",
+              },
+              [
+                {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                undefined,
+              ],
+            ]
+          }
         >
-          <Text
-            collapsable={false}
-            maxFontSizeMultiplier={1.5}
-            numberOfLines={1}
-            onLayout={[Function]}
-            onTextLayout={[Function]}
+          <View
             style={
               {
-                "color": "rgba(103, 80, 164, 1)",
-                "fontFamily": "System",
-                "fontSize": 16,
-                "fontWeight": undefined,
-                "left": 0,
-                "letterSpacing": 0.15,
-                "lineHeight": undefined,
-                "maxWidth": 97.33333333333333,
-                "opacity": 0,
-                "paddingLeft": 16,
-                "paddingRight": 56,
-                "position": "absolute",
-                "textAlign": "left",
-                "top": 30,
-                "transform": [
-                  {
-                    "translateX": 0,
-                  },
-                  {
-                    "translateY": -12,
-                  },
-                  {
-                    "scale": 0.75,
-                  },
-                ],
-                "writingDirection": "ltr",
+                "opacity": 1,
               }
             }
-            testID="text-input-flat-label-active"
           >
-            Flat input
-          </Text>
-          <Text
-            collapsable={false}
-            maxFontSizeMultiplier={1.5}
-            numberOfLines={1}
-            style={
-              {
-                "color": "rgba(73, 69, 79, 1)",
-                "fontFamily": "System",
-                "fontSize": 16,
-                "fontWeight": undefined,
-                "left": 0,
-                "letterSpacing": 0.15,
-                "lineHeight": undefined,
-                "maxWidth": 97.33333333333333,
-                "opacity": 0,
-                "paddingLeft": 16,
-                "paddingRight": 56,
-                "position": "absolute",
-                "textAlign": "left",
-                "top": 30,
-                "transform": [
-                  {
-                    "translateX": 0,
-                  },
-                  {
-                    "translateY": -12,
-                  },
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
+              style={
+                [
                   {
-                    "scale": 0.75,
+                    "color": "rgba(179, 38, 30, 1)",
+                    "fontSize": 24,
                   },
-                ],
-                "writingDirection": "ltr",
+                  [
+                    {
+                      "lineHeight": 24,
+                      "transform": [
+                        {
+                          "scaleX": 1,
+                        },
+                      ],
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                    },
+                  ],
+                ]
               }
-            }
-            testID="text-input-flat-label-inactive"
-          >
-            Flat input
-          </Text>
+            >
+              magnify
+            </Text>
+          </View>
         </View>
       </View>
     </View>
-    <TextInput
-      cursorColor="rgba(103, 80, 164, 1)"
-      editable={true}
-      maxFontSizeMultiplier={1.5}
-      multiline={false}
-      onBlur={[Function]}
-      onChangeText={[Function]}
-      onFocus={[Function]}
-      placeholder="Type something"
-      placeholderTextColor="transparent"
-      selectionColor="rgba(103, 80, 164, 1)"
-      style={
-        [
-          {
-            "flexGrow": 1,
-            "margin": 0,
-          },
-          {},
-          {
-            "paddingBottom": 4,
-            "paddingTop": 24,
-          },
-          {
-            "color": "rgba(28, 27, 31, 1)",
-            "fontFamily": "System",
-            "fontSize": 16,
-            "fontWeight": undefined,
-            "letterSpacing": 0.15,
-            "lineHeight": undefined,
-            "minWidth": 65,
-            "paddingLeft": 16,
-            "paddingRight": 56,
-            "textAlign": "left",
-            "textAlignVertical": "center",
-          },
-          undefined,
-          {
-            "marginLeft": 0,
-            "marginRight": 40,
-            "paddingLeft": 40,
-            "paddingRight": 16,
-          },
-          undefined,
-        ]
-      }
-      testID="text-input-flat"
-      underlineColorAndroid="transparent"
-      value="Some test value"
-    />
-  </View>
-  <View
-    collapsable={false}
-    onLayout={[Function]}
-    style={
-      {
-        "alignItems": "center",
-        "justifyContent": "center",
-        "left": 16,
-        "opacity": 1,
-        "position": "absolute",
-        "top": null,
-      }
-    }
-    testID="left-affix-adornment"
-  >
-    <Text
-      maxFontSizeMultiplier={1.5}
+    <View
+      collapsable={false}
       style={
         [
           {
-            "color": "rgba(73, 69, 79, 1)",
-          },
-          {
-            "fontFamily": "System",
-            "fontSize": 16,
-            "fontWeight": undefined,
-            "letterSpacing": 0.15,
-            "lineHeight": undefined,
+            "alignItems": "center",
+            "flex": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 16,
           },
+          false,
           {
-            "color": "#f44336",
+            "opacity": 1,
           },
         ]
       }
-      testID="left-affix-adornment-text"
     >
-      /100
-    </Text>
-  </View>
-  <View
-    style={
-      [
-        {
-          "alignItems": "center",
-          "height": 24,
-          "justifyContent": "center",
-          "position": "absolute",
-          "width": 24,
-        },
-        {
-          "right": 16,
-          "top": 16,
-        },
-      ]
-    }
-  >
+      <TextInput
+        aria-disabled={false}
+        aria-invalid={true}
+        aria-label="Search"
+        cursorColor="rgba(179, 38, 30, 1)"
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        placeholderTextColor="rgba(73, 69, 79, 1)"
+        selectionColor="rgba(179, 38, 30, 1)"
+        style={
+          [
+            {
+              "fontWeight": "400",
+              "includeFontPadding": false,
+              "paddingHorizontal": 0,
+              "paddingVertical": 0,
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "flex": 1,
+              "fontSize": 16,
+              "textAlign": "left",
+              "writingDirection": "ltr",
+            },
+            undefined,
+            false,
+            false,
+            undefined,
+          ]
+        }
+        value="q"
+      />
+    </View>
     <View
-      collapsable={false}
       style={
         {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 0,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
+          "alignItems": "center",
+          "justifyContent": "center",
         }
       }
-      testID="right-icon-adornment-container-outer-layer"
     >
       <View
         collapsable={false}
         style={
-          {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(121, 116, 126, 1)",
-            "borderRadius": 20,
-            "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
-          }
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderRadius": 20,
+              "borderWidth": 0,
+            },
+            {
+              "margin": 0,
+            },
+            {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "marginEnd": 12,
+              "width": 24,
+            },
+            false,
+          ]
         }
-        testID="right-icon-adornment-container"
       >
         <View
-          accessibilityComponentType="button"
-          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
@@ -2041,7 +1956,6 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
               "selected": undefined,
             }
           }
-          accessibilityTraits="button"
           accessibilityValue={
             {
               "max": undefined,
@@ -2062,6 +1976,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
               "top": 6,
             }
           }
+          multiline={false}
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
@@ -2071,6 +1986,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
@@ -2086,459 +2002,232 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
               ],
             ]
           }
-          testID="right-icon-adornment"
         >
-          <Text
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            selectable={false}
+          <View
             style={
-              [
-                {
-                  "color": "rgba(73, 69, 79, 1)",
-                  "fontSize": 24,
-                },
+              {
+                "opacity": 1,
+              }
+            }
+          >
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
+              style={
                 [
                   {
-                    "lineHeight": 24,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  {
-                    "backgroundColor": "transparent",
+                    "color": "rgba(179, 38, 30, 1)",
+                    "fontSize": 24,
                   },
-                ],
-              ]
-            }
-          >
-            heart
-          </Text>
+                  [
+                    {
+                      "lineHeight": 24,
+                      "transform": [
+                        {
+                          "scaleX": 1,
+                        },
+                      ],
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                    },
+                  ],
+                ]
+              }
+            >
+              close
+            </Text>
+          </View>
         </View>
       </View>
     </View>
   </View>
-</View>
-`;
-
-exports[`correctly renders left-side icon adornment, and right-side affix adornment 1`] = `
-<View
-  style={
-    [
-      {
-        "backgroundColor": "rgba(231, 224, 236, 1)",
-        "borderTopLeftRadius": 4,
-        "borderTopRightRadius": 4,
-      },
-      {},
-    ]
-  }
->
   <View
-    collapsable={false}
     style={
       {
-        "backgroundColor": "rgba(73, 69, 79, 1)",
-        "bottom": 0,
-        "height": 1,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "transform": [
-          {
-            "scaleY": 0.5,
-          },
-        ],
-        "zIndex": 1,
+        "flexDirection": "row",
       }
     }
-    testID="text-input-underline"
   />
+</View>
+`;
+
+exports[`renders outlined TextInput with label and value 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={false}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  role="none"
+>
   <View
-    onLayout={[Function]}
     style={
       [
         {
-          "flexGrow": 1,
-          "paddingBottom": 0,
-          "paddingTop": 0,
+          "flexDirection": "row",
+          "minHeight": 112,
+          "paddingVertical": 16,
         },
         {
-          "minHeight": 56,
+          "borderRadius": 4,
         },
+        undefined,
       ]
     }
   >
     <View
-      pointerEvents="none"
       style={
         [
           {
+            "borderRadius": 4,
             "bottom": 0,
             "left": 0,
+            "pointerEvents": "none",
             "position": "absolute",
             "right": 0,
             "top": 0,
           },
           {
-            "overflow": "hidden",
-          },
-          {
-            "zIndex": 3,
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderWidth": 1,
           },
+          false,
         ]
       }
-    >
-      <View
-        collapsable={false}
-        pointerEvents="none"
-        style={
+    />
+    <View
+      aria-hidden={true}
+      collapsable={false}
+      style={
+        [
           {
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
+            "paddingHorizontal": 4,
+            "pointerEvents": "none",
             "position": "absolute",
-            "right": 0,
-            "top": 0,
+          },
+          {
+            "backgroundColor": "rgba(254, 247, 255, 1)",
+            "left": 16,
+          },
+          {
+            "top": -12,
             "transform": [
               {
-                "translateX": 14,
+                "translateX": -4,
               },
             ],
-            "width": 750,
-          }
+          },
+        ]
+      }
+    >
+      <Text
+        collapsable={false}
+        style={
+          [
+            {
+              "fontWeight": "400",
+              "includeFontPadding": false,
+              "paddingHorizontal": 0,
+              "paddingVertical": 0,
+            },
+            {
+              "color": "rgba(73, 69, 79, 1)",
+            },
+            {
+              "fontSize": 12,
+            },
+            false,
+          ]
         }
       >
-        <View
-          style={
-            {
-              "width": 97.33333333333333,
-            }
-          }
-        >
-          <Text
-            collapsable={false}
-            maxFontSizeMultiplier={1.5}
-            numberOfLines={1}
-            onLayout={[Function]}
-            onTextLayout={[Function]}
-            style={
-              {
-                "color": "rgba(103, 80, 164, 1)",
-                "fontFamily": "System",
-                "fontSize": 16,
-                "fontWeight": undefined,
-                "left": 0,
-                "letterSpacing": 0.15,
-                "lineHeight": undefined,
-                "maxWidth": 97.33333333333333,
-                "opacity": 0,
-                "paddingLeft": 56,
-                "paddingRight": 56,
-                "position": "absolute",
-                "textAlign": "left",
-                "top": 30,
-                "transform": [
-                  {
-                    "translateX": 0,
-                  },
-                  {
-                    "translateY": -12,
-                  },
-                  {
-                    "scale": 0.75,
-                  },
-                ],
-                "writingDirection": "ltr",
-              }
-            }
-            testID="text-input-flat-label-active"
-          >
-            Flat input
-          </Text>
-          <Text
-            collapsable={false}
-            maxFontSizeMultiplier={1.5}
-            numberOfLines={1}
-            style={
-              {
-                "color": "rgba(73, 69, 79, 1)",
-                "fontFamily": "System",
-                "fontSize": 16,
-                "fontWeight": undefined,
-                "left": 0,
-                "letterSpacing": 0.15,
-                "lineHeight": undefined,
-                "maxWidth": 97.33333333333333,
-                "opacity": 0,
-                "paddingLeft": 56,
-                "paddingRight": 56,
-                "position": "absolute",
-                "textAlign": "left",
-                "top": 30,
-                "transform": [
-                  {
-                    "translateX": 0,
-                  },
-                  {
-                    "translateY": -12,
-                  },
-                  {
-                    "scale": 0.75,
-                  },
-                ],
-                "writingDirection": "ltr",
-              }
-            }
-            testID="text-input-flat-label-inactive"
-          >
-            Flat input
-          </Text>
-        </View>
-      </View>
+        Password
+      </Text>
     </View>
-    <TextInput
-      cursorColor="rgba(103, 80, 164, 1)"
-      editable={true}
-      maxFontSizeMultiplier={1.5}
-      multiline={false}
-      onBlur={[Function]}
-      onChangeText={[Function]}
-      onFocus={[Function]}
-      placeholder="Type something"
-      placeholderTextColor="transparent"
-      selectionColor="rgba(103, 80, 164, 1)"
+    <View
+      collapsable={false}
       style={
         [
           {
-            "flexGrow": 1,
-            "margin": 0,
-          },
-          {},
-          {
-            "paddingBottom": 4,
-            "paddingTop": 24,
-          },
-          {
-            "color": "rgba(28, 27, 31, 1)",
-            "fontFamily": "System",
-            "fontSize": 16,
-            "fontWeight": undefined,
-            "letterSpacing": 0.15,
-            "lineHeight": undefined,
-            "minWidth": 65,
-            "paddingLeft": 56,
-            "paddingRight": 56,
-            "textAlign": "left",
-            "textAlignVertical": "center",
+            "alignItems": "center",
+            "flex": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 16,
           },
-          undefined,
+          false,
           {
-            "marginLeft": 40,
-            "marginRight": 0,
-            "paddingLeft": 16,
-            "paddingRight": 40,
+            "opacity": 1,
           },
-          undefined,
         ]
       }
-      testID="text-input-flat"
-      underlineColorAndroid="transparent"
-      value="Some test value"
-    />
-  </View>
-  <View
-    style={
-      [
-        {
-          "alignItems": "center",
-          "height": 24,
-          "justifyContent": "center",
-          "position": "absolute",
-          "width": 24,
-        },
-        {
-          "left": 16,
-          "top": 16,
-        },
-      ]
-    }
-  >
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 0,
-          "shadowColor": "#000",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
-      }
-      testID="left-icon-adornment-container-outer-layer"
     >
-      <View
-        collapsable={false}
+      <TextInput
+        aria-disabled={false}
+        aria-invalid={false}
+        aria-label="Password"
+        cursorColor="rgba(103, 80, 164, 1)"
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        placeholderTextColor="rgba(73, 69, 79, 1)"
+        selectionColor="rgba(103, 80, 164, 1)"
         style={
-          {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(121, 116, 126, 1)",
-            "borderRadius": 20,
-            "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
-          }
-        }
-        testID="left-icon-adornment-container"
-      >
-        <View
-          accessibilityComponentType="button"
-          accessibilityRole="button"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityTraits="button"
-          accessibilityValue={
+          [
             {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
+              "fontWeight": "400",
+              "includeFontPadding": false,
+              "paddingHorizontal": 0,
+              "paddingVertical": 0,
+            },
             {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            [
-              {
-                "overflow": "hidden",
-              },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
-            ]
-          }
-          testID="left-icon-adornment"
-        >
-          <Text
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "rgba(73, 69, 79, 1)",
-                  "fontSize": 24,
-                },
-                [
-                  {
-                    "lineHeight": 24,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                  },
-                ],
-              ]
-            }
-          >
-            heart
-          </Text>
-        </View>
-      </View>
+              "color": "rgba(29, 27, 32, 1)",
+              "flex": 1,
+              "fontSize": 16,
+              "textAlign": "left",
+              "writingDirection": "ltr",
+            },
+            undefined,
+            false,
+            false,
+            undefined,
+          ]
+        }
+        value="secret"
+      />
     </View>
   </View>
   <View
-    collapsable={false}
-    onLayout={[Function]}
     style={
       {
-        "alignItems": "center",
-        "justifyContent": "center",
-        "opacity": 1,
-        "position": "absolute",
-        "right": 16,
-        "top": null,
+        "flexDirection": "row",
       }
     }
-    testID="right-affix-adornment"
-  >
-    <Text
-      maxFontSizeMultiplier={1.5}
-      style={
-        [
-          {
-            "color": "rgba(73, 69, 79, 1)",
-          },
-          {
-            "fontFamily": "System",
-            "fontSize": 16,
-            "fontWeight": undefined,
-            "letterSpacing": 0.15,
-            "lineHeight": undefined,
-          },
-          {
-            "color": "#f44336",
-          },
-        ]
-      }
-      testID="right-affix-adornment-text"
-    >
-      /100
-    </Text>
-  </View>
+  />
 </View>
 `;
diff --git a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap
deleted file mode 100644
index 456c0402fa..0000000000
--- a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap
+++ /dev/null
@@ -1,413 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders disabled toggle button 1`] = `
-<View
-  collapsable={false}
-  style={
-    {
-      "backgroundColor": "rgba(29, 25, 43, 0.12)",
-      "borderRadius": 4,
-      "height": 42,
-      "margin": 0,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-      "width": 42,
-    }
-  }
-  testID="icon-button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "rgba(29, 25, 43, 0.12)",
-        "borderColor": "rgba(121, 116, 126, 1)",
-        "borderRadius": 4,
-        "borderWidth": 0,
-        "elevation": 0,
-        "flex": 1,
-        "overflow": "hidden",
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
-      }
-    }
-    testID="icon-button-container"
-  >
-    <View
-      accessibilityComponentType="button"
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": true,
-        }
-      }
-      accessibilityTraits={
-        [
-          "button",
-          "disabled",
-        ]
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      centered={true}
-      collapsable={false}
-      focusable={true}
-      hitSlop={
-        {
-          "bottom": 6,
-          "left": 6,
-          "right": 6,
-          "top": 6,
-        }
-      }
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        [
-          false,
-          [
-            {
-              "alignItems": "center",
-              "flexGrow": 1,
-              "justifyContent": "center",
-            },
-            undefined,
-          ],
-        ]
-      }
-      testID="icon-button"
-    >
-      <Text
-        accessibilityElementsHidden={true}
-        importantForAccessibility="no-hide-descendants"
-        pointerEvents="none"
-        selectable={false}
-        style={
-          [
-            {
-              "color": "rgba(28, 27, 31, 0.38)",
-              "fontSize": 24,
-            },
-            [
-              {
-                "lineHeight": 24,
-                "transform": [
-                  {
-                    "scaleX": 1,
-                  },
-                ],
-              },
-              {
-                "backgroundColor": "transparent",
-              },
-            ],
-          ]
-        }
-      >
-        heart
-      </Text>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`renders toggle button 1`] = `
-<View
-  collapsable={false}
-  style={
-    {
-      "backgroundColor": "rgba(29, 25, 43, 0.12)",
-      "borderRadius": 4,
-      "height": 42,
-      "margin": 0,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-      "width": 42,
-    }
-  }
-  testID="icon-button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "rgba(29, 25, 43, 0.12)",
-        "borderColor": "rgba(121, 116, 126, 1)",
-        "borderRadius": 4,
-        "borderWidth": 0,
-        "elevation": 0,
-        "flex": 1,
-        "overflow": "hidden",
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
-      }
-    }
-    testID="icon-button-container"
-  >
-    <View
-      accessibilityComponentType="button"
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": false,
-          "expanded": undefined,
-          "selected": true,
-        }
-      }
-      accessibilityTraits="button"
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      centered={true}
-      collapsable={false}
-      focusable={true}
-      hitSlop={
-        {
-          "bottom": 6,
-          "left": 6,
-          "right": 6,
-          "top": 6,
-        }
-      }
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        [
-          false,
-          [
-            {
-              "alignItems": "center",
-              "flexGrow": 1,
-              "justifyContent": "center",
-            },
-            undefined,
-          ],
-        ]
-      }
-      testID="icon-button"
-    >
-      <Text
-        accessibilityElementsHidden={true}
-        importantForAccessibility="no-hide-descendants"
-        pointerEvents="none"
-        selectable={false}
-        style={
-          [
-            {
-              "color": "rgba(73, 69, 79, 1)",
-              "fontSize": 24,
-            },
-            [
-              {
-                "lineHeight": 24,
-                "transform": [
-                  {
-                    "scaleX": 1,
-                  },
-                ],
-              },
-              {
-                "backgroundColor": "transparent",
-              },
-            ],
-          ]
-        }
-      >
-        heart
-      </Text>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`renders unchecked toggle button 1`] = `
-<View
-  collapsable={false}
-  style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 4,
-      "height": 42,
-      "margin": 0,
-      "shadowColor": "#000",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-      "width": 42,
-    }
-  }
-  testID="icon-button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "transparent",
-        "borderColor": "rgba(121, 116, 126, 1)",
-        "borderRadius": 4,
-        "borderWidth": 0,
-        "elevation": 0,
-        "flex": 1,
-        "overflow": "hidden",
-        "shadowColor": "#000",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
-      }
-    }
-    testID="icon-button-container"
-  >
-    <View
-      accessibilityComponentType="button"
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": false,
-        }
-      }
-      accessibilityTraits={
-        [
-          "button",
-          "disabled",
-        ]
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      centered={true}
-      collapsable={false}
-      focusable={true}
-      hitSlop={
-        {
-          "bottom": 6,
-          "left": 6,
-          "right": 6,
-          "top": 6,
-        }
-      }
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        [
-          false,
-          [
-            {
-              "alignItems": "center",
-              "flexGrow": 1,
-              "justifyContent": "center",
-            },
-            undefined,
-          ],
-        ]
-      }
-      testID="icon-button"
-    >
-      <Text
-        accessibilityElementsHidden={true}
-        importantForAccessibility="no-hide-descendants"
-        pointerEvents="none"
-        selectable={false}
-        style={
-          [
-            {
-              "color": "rgba(28, 27, 31, 0.38)",
-              "fontSize": 24,
-            },
-            [
-              {
-                "lineHeight": 24,
-                "transform": [
-                  {
-                    "scaleX": 1,
-                  },
-                ],
-              },
-              {
-                "backgroundColor": "transparent",
-              },
-            ],
-          ]
-        }
-      >
-        heart
-      </Text>
-    </View>
-  </View>
-</View>
-`;
diff --git a/src/components/__tests__/__snapshots__/TouchableRipple.test.tsx.snap b/src/components/__tests__/__snapshots__/TouchableRipple.test.tsx.snap
new file mode 100644
index 0000000000..00ac206260
--- /dev/null
+++ b/src/components/__tests__/__snapshots__/TouchableRipple.test.tsx.snap
@@ -0,0 +1,123 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TouchableRipple on iOS displays the underlay when pressed 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      false,
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+          "zIndex": 2,
+        },
+        {
+          "backgroundColor": "rgba(29, 27, 32, 0.1)",
+        },
+      ]
+    }
+  />
+  <Text>
+    Press me!
+  </Text>
+</View>
+`;
+
+exports[`TouchableRipple on iOS renders custom underlay color 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      false,
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+          "zIndex": 2,
+        },
+        {
+          "backgroundColor": "purple",
+        },
+      ]
+    }
+  />
+  <Text>
+    Press me!
+  </Text>
+</View>
+`;
diff --git a/src/core/PaperProvider.tsx b/src/core/PaperProvider.tsx
index 44fd426ab5..43e61453cc 100644
--- a/src/core/PaperProvider.tsx
+++ b/src/core/PaperProvider.tsx
@@ -1,104 +1,54 @@
 import * as React from 'react';
-import {
-  AccessibilityInfo,
-  Appearance,
-  ColorSchemeName,
-  NativeEventSubscription,
-} from 'react-native';
 
+import { getDefaultDirection, LocaleProvider, type Direction } from './locale';
 import SafeAreaProviderCompat from './SafeAreaProviderCompat';
-import { Provider as SettingsProvider, Settings } from './settings';
-import { defaultThemesByVersion, ThemeProvider } from './theming';
+import { Provider as SettingsProvider } from './settings';
+import type { Settings } from './settings';
+import { ThemeProvider } from './theming';
+import {
+  useResolvedReduceMotion,
+  type ReduceMotionPreference,
+} from './useResolvedReduceMotion';
+import { useSystemColorScheme } from './useSystemColorScheme';
 import MaterialCommunityIcon from '../components/MaterialCommunityIcon';
 import PortalHost from '../components/Portal/PortalHost';
-import type { ThemeProp } from '../types';
-import { addEventListener } from '../utils/addEventListener';
+import { ReduceMotionContext } from '../theme/accessibility/ReduceMotionContext';
+import { DarkTheme, LightTheme } from '../theme/schemes';
+import type { ThemeProp } from '../theme/types';
 
 export type Props = {
   children: React.ReactNode;
   theme?: ThemeProp;
   settings?: Settings;
+  direction?: Direction;
+  reduceMotion?: ReduceMotionPreference;
 };
 
 const PaperProvider = (props: Props) => {
-  const isOnlyVersionInTheme =
-    props.theme && Object.keys(props.theme).length === 1 && props.theme.version;
-
-  const colorSchemeName =
-    ((!props.theme || isOnlyVersionInTheme) && Appearance?.getColorScheme()) ||
-    'light';
-
-  const [reduceMotionEnabled, setReduceMotionEnabled] =
-    React.useState<boolean>(false);
-  const [colorScheme, setColorScheme] =
-    React.useState<ColorSchemeName>(colorSchemeName);
-
-  const handleAppearanceChange = (
-    preferences: Appearance.AppearancePreferences
-  ) => {
-    const { colorScheme } = preferences;
-    setColorScheme(colorScheme);
-  };
-
-  React.useEffect(() => {
-    let subscription: NativeEventSubscription | undefined;
-
-    if (!props.theme) {
-      subscription = addEventListener(
-        AccessibilityInfo,
-        'reduceMotionChanged',
-        setReduceMotionEnabled
-      );
-    }
-    return () => {
-      if (!props.theme) {
-        subscription?.remove();
-      }
-    };
-  }, [props.theme]);
+  const { reduceMotion = 'auto' } = props;
 
-  React.useEffect(() => {
-    let appearanceSubscription: NativeEventSubscription | undefined;
-    if (!props.theme || isOnlyVersionInTheme) {
-      appearanceSubscription = Appearance?.addChangeListener(
-        handleAppearanceChange
-      ) as NativeEventSubscription | undefined;
-    }
-    return () => {
-      if (!props.theme || isOnlyVersionInTheme) {
-        if (appearanceSubscription) {
-          appearanceSubscription.remove();
-        } else {
-          // @ts-expect-error: We keep deprecated listener remove method for backwards compat with old RN versions
-          Appearance?.removeChangeListener(handleAppearanceChange);
-        }
-      }
-    };
-  }, [props.theme, isOnlyVersionInTheme]);
+  const colorScheme = useSystemColorScheme(!props.theme);
+  const resolvedReduceMotion = useResolvedReduceMotion(reduceMotion);
 
   const theme = React.useMemo(() => {
-    const themeVersion = props.theme?.version || 3;
-    const scheme = colorScheme === 'dark' ? 'dark' : 'light';
-    const defaultThemeBase = defaultThemesByVersion[themeVersion][scheme];
-
-    const extendedThemeBase = {
-      ...defaultThemeBase,
-      ...props.theme,
-      version: themeVersion,
-      animation: {
-        ...props.theme?.animation,
-        scale: reduceMotionEnabled ? 0 : 1,
-      },
-    };
+    const isDark = props.theme?.dark ?? colorScheme === 'dark';
+    const base = isDark ? DarkTheme : LightTheme;
+    const scale = resolvedReduceMotion
+      ? 0
+      : (props.theme?.animation?.scale ?? 1);
 
     return {
-      ...extendedThemeBase,
-      isV3: extendedThemeBase.version === 3,
+      ...base,
+      ...props.theme,
+      colors: { ...base.colors, ...props.theme?.colors },
+      animation: { ...props.theme?.animation, scale },
     };
-  }, [colorScheme, props.theme, reduceMotionEnabled]);
+  }, [colorScheme, props.theme, resolvedReduceMotion]);
 
   const { children, settings } = props;
 
+  const direction = props.direction ?? getDefaultDirection();
+
   const settingsValue = React.useMemo(
     () => ({
       icon: MaterialCommunityIcon,
@@ -112,7 +62,11 @@ const PaperProvider = (props: Props) => {
     <SafeAreaProviderCompat>
       <PortalHost>
         <SettingsProvider value={settingsValue}>
-          <ThemeProvider theme={theme}>{children}</ThemeProvider>
+          <ReduceMotionContext.Provider value={resolvedReduceMotion}>
+            <LocaleProvider direction={direction}>
+              <ThemeProvider theme={theme}>{children}</ThemeProvider>
+            </LocaleProvider>
+          </ReduceMotionContext.Provider>
         </SettingsProvider>
       </PortalHost>
     </SafeAreaProviderCompat>
diff --git a/src/core/SafeAreaProviderCompat.tsx b/src/core/SafeAreaProviderCompat.tsx
index a258f297cb..7fed0523e5 100644
--- a/src/core/SafeAreaProviderCompat.tsx
+++ b/src/core/SafeAreaProviderCompat.tsx
@@ -2,14 +2,8 @@
  * Ported from @react-navigation https://github.com/react-navigation/react-navigation/blob/main/packages/elements/src/SafeAreaProviderCompat.tsx
  */
 import * as React from 'react';
-import {
-  Dimensions,
-  Platform,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
+import { Dimensions, Platform, StyleSheet, View } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 
 import {
   initialWindowMetrics,
diff --git a/src/core/__tests__/PaperProvider.test.tsx b/src/core/__tests__/PaperProvider.test.tsx
index 11c4beff49..e1f5aa9cbd 100644
--- a/src/core/__tests__/PaperProvider.test.tsx
+++ b/src/core/__tests__/PaperProvider.test.tsx
@@ -1,29 +1,25 @@
-import * as React from 'react';
-import {
-  Appearance,
-  AccessibilityInfo,
-  View,
-  ColorSchemeName,
-} from 'react-native';
-
-import { render, act } from '@testing-library/react-native';
+import { Appearance, AccessibilityInfo, Platform, View } from 'react-native';
+import type { ColorSchemeName } from 'react-native';
 
 import {
-  MD2LightTheme,
-  MD2DarkTheme,
-  MD3LightTheme,
-  MD3DarkTheme,
-} from '../../styles/themes';
-import type { ThemeProp } from '../../types';
+  beforeEach,
+  describe,
+  expect,
+  it,
+  jest as mockJest,
+} from '@jest/globals';
+import { act, render, screen } from '@testing-library/react-native';
+
+import { useReduceMotion } from '../../theme/accessibility/ReduceMotionContext';
+import { DarkTheme, DynamicLightTheme, LightTheme } from '../../theme/schemes';
+import type { ThemeProp } from '../../theme/types';
 import PaperProvider from '../PaperProvider';
 import { useTheme } from '../theming';
 
 declare module 'react-native' {
   interface AccessibilityInfoStatic {
     removeEventListener(): void;
-    __internalListeners: Array<
-      (options: { reduceMotionEnabled: boolean }) => {}
-    >;
+    __internalListeners: Array<(enabled: boolean) => void>;
   }
 
   namespace Appearance {
@@ -43,24 +39,33 @@ declare module 'react-native' {
 
   interface ViewProps {
     theme?: object;
+    reduceMotion?: boolean;
   }
 }
 
 const mockAppearance = () => {
-  jest.mock('react-native/Libraries/Utilities/Appearance', () => {
-    const realApp = jest.requireActual(
-      'react-native/Libraries/Utilities/Appearance'
-    );
-    const listeners: Function[] = [];
+  mockJest.mock('react-native/Libraries/Utilities/Appearance', () => {
+    const realApp = mockJest.requireActual<
+      typeof import('react-native/Libraries/Utilities/Appearance')
+    >('react-native/Libraries/Utilities/Appearance');
+
+    const listeners: Array<
+      (options: { colorScheme: ColorSchemeName }) => void
+    > = [];
+
     return {
       ...realApp,
-      addChangeListener: jest.fn((cb) => {
-        listeners.push(cb);
-      }),
-      removeChangeListener: jest.fn((cb) => {
-        listeners.push(cb);
-      }),
-      getColorScheme: jest.fn(() => {
+      addChangeListener: mockJest.fn(
+        (cb: (options: { colorScheme: ColorSchemeName }) => void) => {
+          listeners.push(cb);
+        }
+      ),
+      removeChangeListener: mockJest.fn(
+        (cb: (options: { colorScheme: ColorSchemeName }) => void) => {
+          listeners.push(cb);
+        }
+      ),
+      getColorScheme: mockJest.fn(() => {
         return 'light';
       }),
       __internalListeners: listeners,
@@ -69,24 +74,29 @@ const mockAppearance = () => {
 };
 
 const mockAccessibilityInfo = () => {
-  jest.mock(
+  mockJest.mock(
     'react-native/Libraries/Components/AccessibilityInfo/AccessibilityInfo',
     () => {
-      const realApp = jest.requireActual(
+      const realApp = mockJest.requireActual<{
+        default: typeof AccessibilityInfo;
+      }>(
         'react-native/Libraries/Components/AccessibilityInfo/AccessibilityInfo'
       );
 
-      const listeners: Function[] = [];
+      const listeners: Array<(enabled: boolean) => void> = [];
       return {
         __esModule: true,
         default: {
           realApp,
-          addEventListener: jest.fn((_event, cb) => {
-            listeners.push(cb);
-          }),
-          removeEventListener: jest.fn((cb) => {
+          addEventListener: mockJest.fn(
+            (_event, cb: (enabled: boolean) => void) => {
+              listeners.push(cb);
+            }
+          ),
+          removeEventListener: mockJest.fn((cb: (enabled: boolean) => void) => {
             listeners.push(cb);
           }),
+          isReduceMotionEnabled: mockJest.fn(() => Promise.resolve(undefined)),
           __internalListeners: listeners,
         },
       };
@@ -101,159 +111,222 @@ const FakeChild = () => {
 
 const createProvider = (theme?: ThemeProp) => {
   return (
-    <PaperProvider theme={theme}>
+    <PaperProvider theme={theme} reduceMotion="off">
       <FakeChild />
     </PaperProvider>
   );
 };
 
-const ExtendedLightTheme = { ...MD3LightTheme, isV3: true } as ThemeProp;
-const ExtendedDarkTheme = { ...MD3DarkTheme, isV3: true } as ThemeProp;
+const ExtendedLightTheme: ThemeProp = { ...LightTheme };
+const ExtendedDarkTheme: ThemeProp = { ...DarkTheme };
+
+const defaultPlatform = Platform.OS;
 
 describe('PaperProvider', () => {
   beforeEach(() => {
-    jest.resetModules();
+    mockJest.resetModules();
+    Platform.OS = defaultPlatform;
   });
 
   it('handles theme change', async () => {
     mockAppearance();
-    const { getByTestId } = render(createProvider());
-    expect(getByTestId('provider-child-view').props.theme).toStrictEqual(
+    await render(createProvider());
+    // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+    expect(screen.getByTestId('provider-child-view').props.theme).toStrictEqual(
       ExtendedLightTheme
     );
-    act(() => Appearance.__internalListeners[0]({ colorScheme: 'dark' }));
-    expect(getByTestId('provider-child-view').props.theme).toStrictEqual(
+    await act(() => Appearance.__internalListeners[0]({ colorScheme: 'dark' }));
+    // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+    expect(screen.getByTestId('provider-child-view').props.theme).toStrictEqual(
       ExtendedDarkTheme
     );
   });
 
-  it('handles overriding animation with the custom one', () => {
-    const { getByTestId } = render(
-      createProvider({
-        ...MD3LightTheme,
-        animation: { defaultAnimationDuration: 250 },
-      })
+  it('subscribes to AccessibilityInfo and adapts theme.animation.scale when OS reduce-motion is enabled (auto mode)', async () => {
+    mockAppearance();
+    mockAccessibilityInfo();
+
+    await render(
+      <PaperProvider reduceMotion="auto">
+        <FakeChild />
+      </PaperProvider>
     );
 
-    expect(getByTestId('provider-child-view').props.theme).toStrictEqual({
-      ...MD3LightTheme,
-      animation: { scale: 1, defaultAnimationDuration: 250 },
-    });
+    expect(AccessibilityInfo.addEventListener).toHaveBeenCalled();
+    await act(() => AccessibilityInfo.__internalListeners[0](true));
+
+    expect(
+      // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+      screen.getByTestId('provider-child-view').props.theme.animation.scale
+    ).toStrictEqual(0);
   });
 
-  it('should set AccessibilityInfo listeners, if there is no theme', async () => {
+  it('exposes the resolved reduce-motion boolean via useReduceMotion to children', async () => {
     mockAppearance();
     mockAccessibilityInfo();
 
-    const { rerender, getByTestId } = render(createProvider());
+    const Probe = () => {
+      const reduceMotion = useReduceMotion();
+      return <View testID="reduce-motion-probe" reduceMotion={reduceMotion} />;
+    };
 
-    expect(AccessibilityInfo.addEventListener).toHaveBeenCalled();
-    act(() =>
-      AccessibilityInfo.__internalListeners[0]({
-        reduceMotionEnabled: true,
-      })
+    const { rerender } = await render(
+      <PaperProvider reduceMotion="on">
+        <Probe />
+      </PaperProvider>
+    );
+    // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+    expect(screen.getByTestId('reduce-motion-probe').props.reduceMotion).toBe(
+      true
     );
 
-    expect(
-      getByTestId('provider-child-view').props.theme.animation.scale
-    ).toStrictEqual(0);
+    await rerender(
+      <PaperProvider reduceMotion="off">
+        <Probe />
+      </PaperProvider>
+    );
+    // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+    expect(screen.getByTestId('reduce-motion-probe').props.reduceMotion).toBe(
+      false
+    );
+  });
+
+  it('removes the AccessibilityInfo listener when reduceMotion switches from "auto" to "off"', async () => {
+    mockAppearance();
+    mockAccessibilityInfo();
 
-    rerender(createProvider(ExtendedLightTheme));
-    expect(AccessibilityInfo.removeEventListener).toHaveBeenCalled();
+    const { rerender } = await render(
+      <PaperProvider reduceMotion="auto">
+        <FakeChild />
+      </PaperProvider>
+    );
+
+    expect(AccessibilityInfo.addEventListener).toHaveBeenCalledTimes(1);
+    expect(AccessibilityInfo.removeEventListener).not.toHaveBeenCalled();
+
+    await rerender(
+      <PaperProvider reduceMotion="off">
+        <FakeChild />
+      </PaperProvider>
+    );
+
+    expect(AccessibilityInfo.removeEventListener).toHaveBeenCalledTimes(1);
   });
 
-  it('should not set AccessibilityInfo listeners, if there is a theme', async () => {
+  it('does not subscribe to AccessibilityInfo when reduceMotion is "off"', async () => {
     mockAppearance();
-    const { getByTestId } = render(createProvider(ExtendedDarkTheme));
+    mockAccessibilityInfo();
+    await render(
+      <PaperProvider theme={ExtendedDarkTheme} reduceMotion="off">
+        <FakeChild />
+      </PaperProvider>
+    );
 
     expect(AccessibilityInfo.addEventListener).not.toHaveBeenCalled();
-    expect(AccessibilityInfo.removeEventListener).not.toHaveBeenCalled();
-    expect(getByTestId('provider-child-view').props.theme).toStrictEqual(
-      ExtendedDarkTheme
+    expect(
+      // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+      screen.getByTestId('provider-child-view').props.theme.animation.scale
+    ).toStrictEqual(1);
+  });
+
+  it('forces animation.scale to 0 when reduceMotion is "on" without subscribing', async () => {
+    mockAppearance();
+    mockAccessibilityInfo();
+    await render(
+      <PaperProvider reduceMotion="on">
+        <FakeChild />
+      </PaperProvider>
     );
+
+    expect(AccessibilityInfo.addEventListener).not.toHaveBeenCalled();
+    expect(
+      // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+      screen.getByTestId('provider-child-view').props.theme.animation.scale
+    ).toStrictEqual(0);
+  });
+
+  it('DynamicLightTheme falls back to LightTheme on non-Android platforms', () => {
+    Platform.OS = 'ios';
+    expect(DynamicLightTheme.colors).toStrictEqual(LightTheme.colors);
   });
 
   it('should set Appearance listeners, if there is no theme', async () => {
     mockAppearance();
-    const { getByTestId } = render(createProvider());
+    await render(createProvider());
 
     expect(Appearance.addChangeListener).toHaveBeenCalled();
-    act(() => Appearance.__internalListeners[0]({ colorScheme: 'dark' }));
-    expect(getByTestId('provider-child-view').props.theme).toStrictEqual(
+    await act(() => Appearance.__internalListeners[0]({ colorScheme: 'dark' }));
+    // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+    expect(screen.getByTestId('provider-child-view').props.theme).toStrictEqual(
       ExtendedDarkTheme
     );
   });
 
   it('should not set Appearance listeners, if the theme is passed', async () => {
     mockAppearance();
-    const { getByTestId } = render(createProvider(ExtendedLightTheme));
+    await render(createProvider(ExtendedLightTheme));
 
     expect(Appearance.addChangeListener).not.toHaveBeenCalled();
     expect(Appearance.removeChangeListener).not.toHaveBeenCalled();
-    expect(getByTestId('provider-child-view').props.theme).toStrictEqual(
+    // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+    expect(screen.getByTestId('provider-child-view').props.theme).toStrictEqual(
       ExtendedLightTheme
     );
   });
 
   it('uses default theme, if Appearance module is not defined', async () => {
-    jest.mock('react-native/Libraries/Utilities/Appearance', () => {
+    mockJest.mock('react-native/Libraries/Utilities/Appearance', () => {
       return null;
     });
-    const { getByTestId } = render(createProvider());
+    await render(createProvider());
     expect(Appearance).toEqual(null);
-    expect(getByTestId('provider-child-view').props.theme).toStrictEqual(
+    // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+    expect(screen.getByTestId('provider-child-view').props.theme).toStrictEqual(
       ExtendedLightTheme
     );
   });
 
-  it.each`
-    label              | theme                 | colorScheme
-    ${'default theme'} | ${ExtendedLightTheme} | ${'light'}
-    ${'dark theme'}    | ${ExtendedDarkTheme}  | ${'dark'}
-  `(
+  it.each([
+    {
+      label: 'default theme',
+      theme: ExtendedLightTheme,
+      colorScheme: 'light',
+    },
+    {
+      label: 'dark theme',
+      theme: ExtendedDarkTheme,
+      colorScheme: 'dark',
+    },
+  ] satisfies Array<{
+    label: string;
+    theme: ThemeProp;
+    colorScheme: ColorSchemeName;
+  }>)(
     'provides $label for $colorScheme color scheme',
     async ({ theme, colorScheme }) => {
       mockAppearance();
-      (Appearance.getColorScheme as jest.Mock).mockReturnValue(colorScheme);
-      const { getByTestId } = render(createProvider());
-      expect(getByTestId('provider-child-view').props.theme).toStrictEqual(
-        theme
-      );
+      mockJest.mocked(Appearance.getColorScheme).mockReturnValue(colorScheme);
+      await render(createProvider());
+      expect(
+        // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+        screen.getByTestId('provider-child-view').props.theme
+      ).toStrictEqual(theme);
     }
   );
 
   it('uses provided custom theme', async () => {
     mockAppearance();
-    const customTheme = {
+    const customTheme: ThemeProp = {
       ...ExtendedLightTheme,
       colors: {
         ...ExtendedLightTheme.colors,
         primary: 'tomato',
-        accent: 'yellow',
       },
-    } as ThemeProp;
-    const { getByTestId } = render(createProvider(customTheme));
-    expect(getByTestId('provider-child-view').props.theme).toStrictEqual(
+    };
+    await render(createProvider(customTheme));
+    // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
+    expect(screen.getByTestId('provider-child-view').props.theme).toStrictEqual(
       customTheme
     );
   });
-
-  it.each`
-    version | colorScheme | expectedTheme
-    ${2}    | ${'light'}  | ${MD2LightTheme}
-    ${2}    | ${'dark'}   | ${MD2DarkTheme}
-    ${3}    | ${'light'}  | ${MD3LightTheme}
-    ${3}    | ${'dark'}   | ${MD3DarkTheme}
-  `(
-    'uses correct theme, $colorScheme mode, version $version',
-    async ({ version, colorScheme, expectedTheme }) => {
-      mockAppearance();
-      (Appearance.getColorScheme as jest.Mock).mockReturnValue(colorScheme);
-      const { getByTestId } = render(createProvider({ version }));
-
-      expect(getByTestId('provider-child-view').props.theme).toStrictEqual(
-        expectedTheme
-      );
-    }
-  );
 });
diff --git a/src/core/__tests__/theming.test.tsx b/src/core/__tests__/theming.test.tsx
index 7b069cd482..3ae5d44691 100644
--- a/src/core/__tests__/theming.test.tsx
+++ b/src/core/__tests__/theming.test.tsx
@@ -1,4 +1,6 @@
-import { MD3DarkTheme, MD3LightTheme } from '../../styles/themes';
+import { describe, expect, it } from '@jest/globals';
+
+import { DarkTheme, LightTheme } from '../../theme/schemes';
 import { adaptNavigationTheme } from '../theming';
 
 const NavigationLightTheme = {
@@ -40,17 +42,17 @@ const NavigationCustomLightTheme = {
 };
 
 const AppCustomLightTheme = {
-  ...MD3LightTheme,
+  ...LightTheme,
   colors: {
-    ...MD3LightTheme.colors,
+    ...LightTheme.colors,
     primary: 'purple',
   },
 };
 
 const AppCustomDarkTheme = {
-  ...MD3DarkTheme,
+  ...DarkTheme,
   colors: {
-    ...MD3DarkTheme.colors,
+    ...DarkTheme.colors,
     primary: 'orchid',
   },
 };
@@ -89,43 +91,43 @@ describe('adaptNavigationTheme', () => {
         ...NavigationLightTheme,
         colors: {
           ...NavigationLightTheme.colors,
-          primary: MD3LightTheme.colors.primary,
-          background: MD3LightTheme.colors.background,
-          card: MD3LightTheme.colors.elevation.level2,
-          text: MD3LightTheme.colors.onSurface,
-          border: MD3LightTheme.colors.outline,
-          notification: MD3LightTheme.colors.error,
+          primary: LightTheme.colors.primary,
+          background: LightTheme.colors.background,
+          card: LightTheme.colors.surfaceContainer,
+          text: LightTheme.colors.onSurface,
+          border: LightTheme.colors.outline,
+          notification: LightTheme.colors.error,
         },
       },
       DarkTheme: {
         ...NavigationDarkTheme,
         colors: {
           ...NavigationDarkTheme.colors,
-          primary: MD3DarkTheme.colors.primary,
-          background: MD3DarkTheme.colors.background,
-          card: MD3DarkTheme.colors.elevation.level2,
-          text: MD3DarkTheme.colors.onSurface,
-          border: MD3DarkTheme.colors.outline,
-          notification: MD3DarkTheme.colors.error,
+          primary: DarkTheme.colors.primary,
+          background: DarkTheme.colors.background,
+          card: DarkTheme.colors.surfaceContainer,
+          text: DarkTheme.colors.onSurface,
+          border: DarkTheme.colors.outline,
+          notification: DarkTheme.colors.error,
         },
       },
     });
   });
 
   it('should return adapted navigation light theme', () => {
-    const { LightTheme } = adaptNavigationTheme({
+    const { LightTheme: navLight } = adaptNavigationTheme({
       reactNavigationLight: NavigationLightTheme,
     });
 
-    const { colors } = MD3LightTheme;
+    const { colors } = LightTheme;
 
-    expect(LightTheme).toMatchObject({
+    expect(navLight).toMatchObject({
       ...NavigationLightTheme,
       colors: {
         ...NavigationLightTheme.colors,
         primary: colors.primary,
         background: colors.background,
-        card: colors.elevation.level2,
+        card: colors.surfaceContainer,
         text: colors.onSurface,
         border: colors.outline,
         notification: colors.error,
@@ -134,19 +136,19 @@ describe('adaptNavigationTheme', () => {
   });
 
   it('should return adapted navigation dark theme', () => {
-    const { DarkTheme } = adaptNavigationTheme({
+    const { DarkTheme: navDark } = adaptNavigationTheme({
       reactNavigationDark: NavigationDarkTheme,
     });
 
-    const { colors } = MD3DarkTheme;
+    const { colors } = DarkTheme;
 
-    expect(DarkTheme).toMatchObject({
+    expect(navDark).toMatchObject({
       ...NavigationDarkTheme,
       colors: {
         ...NavigationDarkTheme.colors,
         primary: colors.primary,
         background: colors.background,
-        card: colors.elevation.level2,
+        card: colors.surfaceContainer,
         text: colors.onSurface,
         border: colors.outline,
         notification: colors.error,
@@ -155,19 +157,19 @@ describe('adaptNavigationTheme', () => {
   });
 
   it('should return adapted custom navigation theme', () => {
-    const { LightTheme } = adaptNavigationTheme({
+    const { LightTheme: navLight } = adaptNavigationTheme({
       reactNavigationLight: NavigationCustomLightTheme,
     });
 
-    const { colors } = MD3LightTheme;
+    const { colors } = LightTheme;
 
-    expect(LightTheme).toMatchObject({
+    expect(navLight).toMatchObject({
       ...NavigationCustomLightTheme,
       colors: {
         ...NavigationCustomLightTheme.colors,
         primary: colors.primary,
         background: colors.background,
-        card: colors.elevation.level2,
+        card: colors.surfaceContainer,
         text: colors.onSurface,
         border: colors.outline,
         notification: colors.error,
@@ -178,20 +180,20 @@ describe('adaptNavigationTheme', () => {
   });
 
   it('should return adapted navigation light theme based on custom app light theme', () => {
-    const { LightTheme } = adaptNavigationTheme({
+    const { LightTheme: navLight } = adaptNavigationTheme({
       reactNavigationLight: NavigationLightTheme,
       materialLight: AppCustomLightTheme,
     });
 
     const { colors } = AppCustomLightTheme;
 
-    expect(LightTheme).toMatchObject({
+    expect(navLight).toMatchObject({
       ...NavigationLightTheme,
       colors: {
         ...NavigationLightTheme.colors,
         primary: colors.primary,
         background: colors.background,
-        card: colors.elevation.level2,
+        card: colors.surfaceContainer,
         text: colors.onSurface,
         border: colors.outline,
         notification: colors.error,
@@ -200,20 +202,20 @@ describe('adaptNavigationTheme', () => {
   });
 
   it('should return adapted navigation dark theme based on custom app dark theme', () => {
-    const { DarkTheme } = adaptNavigationTheme({
+    const { DarkTheme: navDark } = adaptNavigationTheme({
       reactNavigationDark: NavigationDarkTheme,
       materialDark: AppCustomDarkTheme,
     });
 
     const { colors } = AppCustomDarkTheme;
 
-    expect(DarkTheme).toMatchObject({
+    expect(navDark).toMatchObject({
       ...NavigationDarkTheme,
       colors: {
         ...NavigationDarkTheme.colors,
         primary: colors.primary,
         background: colors.background,
-        card: colors.elevation.level2,
+        card: colors.surfaceContainer,
         text: colors.onSurface,
         border: colors.outline,
         notification: colors.error,
@@ -222,53 +224,73 @@ describe('adaptNavigationTheme', () => {
   });
 
   it('should adapt navigation theme with fonts', () => {
-    const { LightTheme } = adaptNavigationTheme({
+    const { LightTheme: navLight } = adaptNavigationTheme({
       reactNavigationLight: NavigationThemeWithFonts,
     });
 
-    expect(LightTheme).toMatchObject({
+    expect(navLight).toMatchObject({
       ...NavigationThemeWithFonts,
       colors: {
         ...NavigationThemeWithFonts.colors,
-        primary: MD3LightTheme.colors.primary,
-        background: MD3LightTheme.colors.background,
-        card: MD3LightTheme.colors.elevation.level2,
-        text: MD3LightTheme.colors.onSurface,
-        border: MD3LightTheme.colors.outline,
-        notification: MD3LightTheme.colors.error,
+        primary: LightTheme.colors.primary,
+        background: LightTheme.colors.background,
+        card: LightTheme.colors.surfaceContainer,
+        text: LightTheme.colors.onSurface,
+        border: LightTheme.colors.outline,
+        notification: LightTheme.colors.error,
       },
       fonts: {
         regular: {
-          fontFamily: MD3LightTheme.fonts.bodyMedium.fontFamily,
-          fontWeight: MD3LightTheme.fonts.bodyMedium.fontWeight,
-          letterSpacing: MD3LightTheme.fonts.bodyMedium.letterSpacing,
+          fontFamily: LightTheme.fonts.bodyMedium.fontFamily,
+          fontWeight: LightTheme.fonts.bodyMedium.fontWeight,
+          letterSpacing: LightTheme.fonts.bodyMedium.letterSpacing,
         },
         medium: {
-          fontFamily: MD3LightTheme.fonts.titleMedium.fontFamily,
-          fontWeight: MD3LightTheme.fonts.titleMedium.fontWeight,
-          letterSpacing: MD3LightTheme.fonts.titleMedium.letterSpacing,
+          fontFamily: LightTheme.fonts.titleMedium.fontFamily,
+          fontWeight: LightTheme.fonts.titleMedium.fontWeight,
+          letterSpacing: LightTheme.fonts.titleMedium.letterSpacing,
         },
         bold: {
-          fontFamily: MD3LightTheme.fonts.headlineSmall.fontFamily,
-          fontWeight: MD3LightTheme.fonts.headlineSmall.fontWeight,
-          letterSpacing: MD3LightTheme.fonts.headlineSmall.letterSpacing,
+          fontFamily: LightTheme.fonts.headlineSmall.fontFamily,
+          fontWeight: LightTheme.fonts.headlineSmall.fontWeight,
+          letterSpacing: LightTheme.fonts.headlineSmall.letterSpacing,
         },
         heavy: {
-          fontFamily: MD3LightTheme.fonts.headlineLarge.fontFamily,
-          fontWeight: MD3LightTheme.fonts.headlineLarge.fontWeight,
-          letterSpacing: MD3LightTheme.fonts.headlineLarge.letterSpacing,
+          fontFamily: LightTheme.fonts.headlineLarge.fontFamily,
+          fontWeight: LightTheme.fonts.headlineLarge.fontWeight,
+          letterSpacing: LightTheme.fonts.headlineLarge.letterSpacing,
         },
       },
     });
   });
 
+  it('should keep fonts and custom colors when adapting a single theme', () => {
+    const { LightTheme: navLight } = adaptNavigationTheme({
+      reactNavigationLight: {
+        ...NavigationThemeWithFonts,
+        colors: NavigationCustomLightTheme.colors,
+      },
+    });
+    const { DarkTheme: navDark } = adaptNavigationTheme({
+      reactNavigationDark: { ...NavigationThemeWithFonts, dark: true },
+    });
+
+    expect(navLight.colors.secondary).toBe('rgb(150,45,85)');
+    expect(navLight.fonts.regular.fontFamily).toBe(
+      LightTheme.fonts.bodyMedium.fontFamily
+    );
+    expect(navDark.fonts.regular.fontFamily).toBe(
+      DarkTheme.fonts.bodyMedium.fontFamily
+    );
+  });
+
   it('should not expect fonts on theme without fonts', () => {
-    const { LightTheme, DarkTheme } = adaptNavigationTheme({
+    const { LightTheme: navLight, DarkTheme: navDark } = adaptNavigationTheme({
       reactNavigationLight: NavigationLightTheme,
       reactNavigationDark: NavigationDarkTheme,
     });
 
-    expect(LightTheme).not.toHaveProperty('fonts');
-    expect(DarkTheme).not.toHaveProperty('fonts');
+    expect(navLight).not.toHaveProperty('fonts');
+    expect(navDark).not.toHaveProperty('fonts');
   });
 });
diff --git a/src/core/locale.tsx b/src/core/locale.tsx
new file mode 100644
index 0000000000..11433f736f
--- /dev/null
+++ b/src/core/locale.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { I18nManager } from 'react-native';
+
+/**
+ * Writing direction of the app.
+ * Use this to override RTL/LTR on platforms where `I18nManager` is a no-op (e.g. React Native Web).
+ */
+export type Direction = 'ltr' | 'rtl';
+
+export type LocaleContextValue = {
+  direction: Direction;
+};
+
+export const LocaleContext = React.createContext<LocaleContextValue | null>(
+  null
+);
+
+export type LocaleProviderProps = {
+  direction: Direction;
+  children: React.ReactNode;
+};
+
+/**
+ * Provider component for locale configuration.
+ */
+export function LocaleProvider({ direction, children }: LocaleProviderProps) {
+  const value = React.useMemo(() => ({ direction }), [direction]);
+  return (
+    <LocaleContext.Provider value={value}>{children}</LocaleContext.Provider>
+  );
+}
+
+/**
+ * Returns the locale context value. Must be used inside a `PaperProvider` (or `LocaleProvider`).
+ */
+export function useLocale(): LocaleContextValue {
+  const context = React.useContext(LocaleContext);
+  if (context === null) {
+    throw new Error('useLocale must be used within a LocaleProvider');
+  }
+  return context;
+}
+
+export const getDefaultDirection = (): Direction =>
+  I18nManager.getConstants?.().isRTL ? 'rtl' : 'ltr';
diff --git a/src/core/settings.tsx b/src/core/settings.tsx
index 446aec36a3..4082db3b62 100644
--- a/src/core/settings.tsx
+++ b/src/core/settings.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
 
-import MaterialCommunityIcon, {
-  IconProps,
-} from '../components/MaterialCommunityIcon';
+import MaterialCommunityIcon from '../components/MaterialCommunityIcon';
+import type { IconProps } from '../components/MaterialCommunityIcon';
 
 export type Settings = {
   icon?: ({
diff --git a/src/core/theming.tsx b/src/core/theming.tsx
index 44223f032a..ff478d0117 100644
--- a/src/core/theming.tsx
+++ b/src/core/theming.tsx
@@ -1,178 +1 @@
-import type { ComponentType } from 'react';
-
-import { $DeepPartial, createTheming } from '@callstack/react-theme-provider';
-import color from 'color';
-
-import {
-  MD2DarkTheme,
-  MD2LightTheme,
-  MD3DarkTheme,
-  MD3LightTheme,
-} from '../styles/themes';
-import type {
-  InternalTheme,
-  MD3Theme,
-  MD3AndroidColors,
-  NavigationTheme,
-} from '../types';
-
-export const DefaultTheme = MD3LightTheme;
-
-export const {
-  ThemeProvider,
-  withTheme,
-  useTheme: useAppTheme,
-} = createTheming<unknown>(MD3LightTheme);
-
-export function useTheme<T = MD3Theme>(overrides?: $DeepPartial<T>) {
-  return useAppTheme<T>(overrides);
-}
-
-export const useInternalTheme = (
-  themeOverrides: $DeepPartial<InternalTheme> | undefined
-) => useAppTheme<InternalTheme>(themeOverrides);
-
-export const withInternalTheme = <Props extends { theme: InternalTheme }, C>(
-  WrappedComponent: ComponentType<Props & { theme: InternalTheme }> & C
-) => withTheme<Props, C>(WrappedComponent);
-
-export const defaultThemesByVersion = {
-  2: {
-    light: MD2LightTheme,
-    dark: MD2DarkTheme,
-  },
-  3: {
-    light: MD3LightTheme,
-    dark: MD3DarkTheme,
-  },
-};
-
-export const getTheme = <
-  Scheme extends boolean = false,
-  IsVersion3 extends boolean = true
->(
-  isDark: Scheme = false as Scheme,
-  isV3: IsVersion3 = true as IsVersion3
-): (typeof defaultThemesByVersion)[IsVersion3 extends true
-  ? 3
-  : 2][Scheme extends true ? 'dark' : 'light'] => {
-  const themeVersion = isV3 ? 3 : 2;
-  const scheme = isDark ? 'dark' : 'light';
-
-  return defaultThemesByVersion[themeVersion][scheme];
-};
-
-// eslint-disable-next-line no-redeclare
-export function adaptNavigationTheme<T extends NavigationTheme>(themes: {
-  reactNavigationLight: T;
-  materialLight?: MD3Theme;
-}): {
-  LightTheme: NavigationTheme;
-};
-// eslint-disable-next-line no-redeclare
-export function adaptNavigationTheme<T extends NavigationTheme>(themes: {
-  reactNavigationDark: T;
-  materialDark?: MD3Theme;
-}): {
-  DarkTheme: NavigationTheme;
-};
-// eslint-disable-next-line no-redeclare
-export function adaptNavigationTheme<
-  TLight extends NavigationTheme,
-  TDark extends NavigationTheme
->(themes: {
-  reactNavigationLight: TLight;
-  reactNavigationDark: TDark;
-  materialLight?: MD3Theme;
-  materialDark?: MD3Theme;
-}): { LightTheme: TLight; DarkTheme: TDark };
-// eslint-disable-next-line no-redeclare
-export function adaptNavigationTheme(themes: any) {
-  const {
-    reactNavigationLight,
-    reactNavigationDark,
-    materialLight,
-    materialDark,
-  } = themes;
-
-  const MD3Themes = {
-    light: materialLight || MD3LightTheme,
-    dark: materialDark || MD3DarkTheme,
-  };
-
-  const result: { LightTheme?: any; DarkTheme?: any } = {};
-
-  if (reactNavigationLight) {
-    result.LightTheme = getAdaptedTheme(reactNavigationLight, MD3Themes.light);
-  }
-
-  if (reactNavigationDark) {
-    result.DarkTheme = getAdaptedTheme(reactNavigationDark, MD3Themes.dark);
-  }
-
-  return result;
-}
-
-const getAdaptedTheme = <T extends NavigationTheme>(
-  theme: T,
-  materialTheme: MD3Theme
-): T => {
-  const base = {
-    ...theme,
-    colors: {
-      ...theme.colors,
-      primary: materialTheme.colors.primary,
-      background: materialTheme.colors.background,
-      card: materialTheme.colors.elevation.level2,
-      text: materialTheme.colors.onSurface,
-      border: materialTheme.colors.outline,
-      notification: materialTheme.colors.error,
-    },
-  };
-
-  if ('fonts' in theme) {
-    return {
-      ...base,
-      fonts: {
-        regular: {
-          fontFamily: materialTheme.fonts.bodyMedium.fontFamily,
-          fontWeight: materialTheme.fonts.bodyMedium.fontWeight,
-          letterSpacing: materialTheme.fonts.bodyMedium.letterSpacing,
-        },
-        medium: {
-          fontFamily: materialTheme.fonts.titleMedium.fontFamily,
-          fontWeight: materialTheme.fonts.titleMedium.fontWeight,
-          letterSpacing: materialTheme.fonts.titleMedium.letterSpacing,
-        },
-        bold: {
-          fontFamily: materialTheme.fonts.headlineSmall.fontFamily,
-          fontWeight: materialTheme.fonts.headlineSmall.fontWeight,
-          letterSpacing: materialTheme.fonts.headlineSmall.letterSpacing,
-        },
-        heavy: {
-          fontFamily: materialTheme.fonts.headlineLarge.fontFamily,
-          fontWeight: materialTheme.fonts.headlineLarge.fontWeight,
-          letterSpacing: materialTheme.fonts.headlineLarge.letterSpacing,
-        },
-      },
-    };
-  }
-
-  return base;
-};
-
-export const getDynamicThemeElevations = (scheme: MD3AndroidColors) => {
-  const elevationValues = ['transparent', 0.05, 0.08, 0.11, 0.12, 0.14];
-  return elevationValues.reduce((elevations, elevationValue, index) => {
-    return {
-      ...elevations,
-      [`level${index}`]:
-        index === 0
-          ? elevationValue
-          : color(scheme.surface)
-              .mix(color(scheme.primary), elevationValue as number)
-              .rgb()
-              .string(),
-    };
-  }, {});
-};
+export * from '../theme/provider';
diff --git a/src/core/useResolvedReduceMotion.ts b/src/core/useResolvedReduceMotion.ts
new file mode 100644
index 0000000000..fe264e54fd
--- /dev/null
+++ b/src/core/useResolvedReduceMotion.ts
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+import { addEventListener } from '../utils/addEventListener';
+
+export type ReduceMotionPreference = 'auto' | 'on' | 'off';
+
+/**
+ * Resolves a reduce-motion preference into a boolean.
+ *
+ * - `'on'` / `'off'` are explicit overrides.
+ * - `'auto'` subscribes to `AccessibilityInfo.reduceMotionChanged` and follows
+ *   the OS-level setting.
+ *
+ * `AccessibilityInfo.isReduceMotionEnabled()` is async, so the first render
+ * returns `false` for one frame regardless of OS state.
+ */
+export function useResolvedReduceMotion(
+  preference: ReduceMotionPreference
+): boolean {
+  const [osReduceMotion, setOsReduceMotion] = React.useState(false);
+
+  React.useEffect(() => {
+    if (preference !== 'auto') return;
+    let cancelled = false;
+
+    const init = async () => {
+      const v = await AccessibilityInfo.isReduceMotionEnabled?.();
+      if (!cancelled && v != null) setOsReduceMotion(v);
+    };
+    void init();
+
+    const sub = addEventListener(
+      AccessibilityInfo,
+      'reduceMotionChanged',
+      setOsReduceMotion
+    );
+    return () => {
+      cancelled = true;
+      sub.remove();
+    };
+  }, [preference]);
+
+  return preference === 'auto' ? osReduceMotion : preference === 'on';
+}
diff --git a/src/core/useSystemColorScheme.ts b/src/core/useSystemColorScheme.ts
new file mode 100644
index 0000000000..12c2ab793c
--- /dev/null
+++ b/src/core/useSystemColorScheme.ts
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Appearance } from 'react-native';
+import type { ColorSchemeName } from 'react-native';
+
+/**
+ * Subscribes to the OS color-scheme setting via `Appearance.addChangeListener`
+ * and returns the current value.
+ *
+ * When `enabled` is false the hook does not subscribe and returns `'light'` —
+ * used by `PaperProvider` to skip system tracking when the user has supplied
+ * an explicit theme.
+ */
+export function useSystemColorScheme(enabled: boolean): ColorSchemeName {
+  const [colorScheme, setColorScheme] = React.useState<ColorSchemeName>(() =>
+    enabled ? (Appearance?.getColorScheme() ?? 'light') : 'light'
+  );
+
+  React.useEffect(() => {
+    if (!enabled) return;
+    const sub = Appearance?.addChangeListener((preferences) => {
+      setColorScheme(preferences.colorScheme);
+    });
+    return () => {
+      sub?.remove();
+    };
+  }, [enabled]);
+
+  return colorScheme;
+}
diff --git a/src/index.tsx b/src/index.tsx
index 1b20528787..1807d2f249 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,31 +1,26 @@
-export { MD3Colors } from './styles/themes/v3/tokens';
+export { Palette } from './theme/tokens';
 
 export {
   useTheme,
   withTheme,
   ThemeProvider,
-  DefaultTheme,
   adaptNavigationTheme,
 } from './core/theming';
 
-export * from './styles/themes';
+export { useLocale, LocaleProvider } from './core/locale';
+
+export * from './theme/schemes';
 
 export { default as Provider } from './core/PaperProvider';
 export { default as PaperProvider } from './core/PaperProvider';
-export { default as shadow } from './styles/shadow';
-export { default as overlay } from './styles/overlay';
-export { default as configureFonts } from './styles/fonts';
+export { default as configureFonts } from './theme/fonts';
 
 import * as Avatar from './components/Avatar/Avatar';
 import * as Drawer from './components/Drawer/Drawer';
 import * as List from './components/List/List';
-import * as MD2Colors from './styles/themes/v2/colors';
 
-export { MD2Colors };
 export { Avatar, List, Drawer };
 
-export * from './components/FAB/AnimatedFAB';
-
 export { default as Badge } from './components/Badge';
 export { default as ActivityIndicator } from './components/ActivityIndicator';
 export { default as Banner } from './components/Banner';
@@ -38,8 +33,6 @@ export { default as DataTable } from './components/DataTable/DataTable';
 export { default as Dialog } from './components/Dialog/Dialog';
 export { default as Divider } from './components/Divider';
 export { default as FAB } from './components/FAB';
-export { default as AnimatedFAB } from './components/FAB/AnimatedFAB';
-export { default as HelperText } from './components/HelperText/HelperText';
 export { default as Icon } from './components/Icon';
 export { default as IconButton } from './components/IconButton/IconButton';
 export { default as Menu } from './components/Menu/Menu';
@@ -53,23 +46,14 @@ export { default as Surface } from './components/Surface';
 export { default as Switch } from './components/Switch/Switch';
 export { default as Appbar } from './components/Appbar';
 export { default as TouchableRipple } from './components/TouchableRipple/TouchableRipple';
-export { default as TextInput } from './components/TextInput/TextInput';
-export { default as ToggleButton } from './components/ToggleButton';
+export { default as TextInput } from './components/TextInput';
 export { default as SegmentedButtons } from './components/SegmentedButtons/SegmentedButtons';
 export { default as Tooltip } from './components/Tooltip/Tooltip';
 
-export {
-  Caption,
-  Headline,
-  Paragraph,
-  Subheading,
-  Title,
-} from './components/Typography/v2';
 export { default as Text, customText } from './components/Typography/Text';
 
 // Types
 export type { Props as ActivityIndicatorProps } from './components/ActivityIndicator';
-export type { Props as AnimatedFABProps } from './components/FAB/AnimatedFAB';
 export type { Props as AppbarProps } from './components/Appbar/Appbar';
 export type { Props as AppbarActionProps } from './components/Appbar/AppbarAction';
 export type { Props as AppbarBackActionProps } from './components/Appbar/AppbarBackAction';
@@ -91,8 +75,6 @@ export type { Props as CardContentProps } from './components/Card/CardContent';
 export type { Props as CardCoverProps } from './components/Card/CardCover';
 export type { Props as CardTitleProps } from './components/Card/CardTitle';
 export type { Props as CheckboxProps } from './components/Checkbox/Checkbox';
-export type { Props as CheckboxAndroidProps } from './components/Checkbox/CheckboxAndroid';
-export type { Props as CheckboxIOSProps } from './components/Checkbox/CheckboxIOS';
 export type { Props as CheckboxItemProps } from './components/Checkbox/CheckboxItem';
 export type { Props as ChipProps } from './components/Chip/Chip';
 export type { Props as DataTableProps } from './components/DataTable/DataTable';
@@ -112,8 +94,16 @@ export type { Props as DrawerCollapsedItemProps } from './components/Drawer/Draw
 export type { Props as DrawerItemProps } from './components/Drawer/DrawerItem';
 export type { Props as DrawerSectionProps } from './components/Drawer/DrawerSection';
 export type { Props as FABProps } from './components/FAB/FAB';
-export type { Props as FABGroupProps } from './components/FAB/FABGroup';
-export type { Props as HelperTextProps } from './components/HelperText/HelperText';
+export type { Props as FABExtendedProps } from './components/FAB/Extended';
+export type {
+  MenuProps as FABMenuProps,
+  MenuItemProps as FABMenuItemProps,
+  MenuTriggerProps as FABMenuTriggerProps,
+} from './components/FAB/Menu';
+export type {
+  Variant as FABVariant,
+  Size as FABSize,
+} from './components/FAB/tokens';
 export type { Props as IconButtonProps } from './components/IconButton/IconButton';
 export type { Props as ListAccordionProps } from './components/List/ListAccordion';
 export type { Props as ListAccordionGroupProps } from './components/List/ListAccordionGroup';
@@ -137,33 +127,20 @@ export type { Props as SearchbarProps } from './components/Searchbar';
 export type { Props as SnackbarProps } from './components/Snackbar';
 export type { Props as SurfaceProps } from './components/Surface';
 export type { Props as SwitchProps } from './components/Switch/Switch';
-export type { Props as TextInputProps } from './components/TextInput/TextInput';
-export type { Props as TextInputAffixProps } from './components/TextInput/Adornment/TextInputAffix';
-export type { Props as TextInputIconProps } from './components/TextInput/Adornment/TextInputIcon';
-export type { Props as ToggleButtonProps } from './components/ToggleButton/ToggleButton';
-export type { Props as ToggleButtonGroupProps } from './components/ToggleButton/ToggleButtonGroup';
-export type { Props as ToggleButtonRowProps } from './components/ToggleButton/ToggleButtonRow';
+export type {
+  TextInputProps,
+  TextInputRenderProps,
+  TextInputVariant,
+  TextInputHandles,
+} from './components/TextInput/TextInput';
+export type {
+  TextInputAccessoryProps,
+  TextInputIconProps,
+} from './components/TextInput/TextInputIcon';
 export type { Props as TouchableRippleProps } from './components/TouchableRipple/TouchableRipple';
-export type { Props as CaptionProps } from './components/Typography/v2/Caption';
-export type { Props as HeadlineProps } from './components/Typography/v2/Headline';
-export type { Props as ParagraphProps } from './components/Typography/v2/Paragraph';
-export type { Props as SubheadingProps } from './components/Typography/v2/Subheading';
-export type { Props as TitleProps } from './components/Typography/v2/Title';
 export type { Props as TextProps } from './components/Typography/Text';
 export type { Props as SegmentedButtonsProps } from './components/SegmentedButtons/SegmentedButtons';
 export type { Props as ListImageProps } from './components/List/ListImage';
 export type { Props as TooltipProps } from './components/Tooltip/Tooltip';
-export type {
-  MaterialBottomTabNavigationEventMap,
-  MaterialBottomTabNavigationOptions,
-  MaterialBottomTabNavigationProp,
-  MaterialBottomTabScreenProps,
-} from './react-navigation';
 
-export type {
-  MD2Theme,
-  MD3Theme,
-  ThemeBase,
-  MD3Elevation,
-  MD3TypescaleKey,
-} from './types';
+export { type TypescaleKey, type Theme, type Elevation } from './theme/types';
diff --git a/src/react-navigation/__tests__/index.test.tsx b/src/react-navigation/__tests__/index.test.tsx
deleted file mode 100644
index a04495639d..0000000000
--- a/src/react-navigation/__tests__/index.test.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as React from 'react';
-import { Button, Text, View } from 'react-native';
-
-import { NavigationContainer, ParamListBase } from '@react-navigation/native';
-import { fireEvent, render } from '@testing-library/react-native';
-
-import PaperProvider from '../../core/PaperProvider';
-import {
-  createMaterialBottomTabNavigator,
-  MaterialBottomTabScreenProps,
-} from '../index';
-
-it('renders a material bottom tab navigator with screens', async () => {
-  const Test = ({
-    route,
-    navigation,
-  }: MaterialBottomTabScreenProps<ParamListBase>) => (
-    <View>
-      <Text>Screen {route.name}</Text>
-      <Button onPress={() => navigation.navigate('A')} title="Go to A" />
-      <Button onPress={() => navigation.navigate('B')} title="Go to B" />
-    </View>
-  );
-
-  const Tab = createMaterialBottomTabNavigator();
-
-  const { findByText, queryByText } = render(
-    <NavigationContainer>
-      <PaperProvider>
-        <Tab.Navigator>
-          <Tab.Screen name="A" component={Test} />
-          <Tab.Screen name="B" component={Test} />
-        </Tab.Navigator>
-      </PaperProvider>
-    </NavigationContainer>
-  );
-
-  expect(queryByText('Screen A')).not.toBeNull();
-  expect(queryByText('Screen B')).toBeNull();
-
-  fireEvent(await findByText('Go to B'), 'press');
-
-  expect(queryByText('Screen B')).not.toBeNull();
-});
diff --git a/src/react-navigation/index.tsx b/src/react-navigation/index.tsx
deleted file mode 100644
index 2f018caf74..0000000000
--- a/src/react-navigation/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Navigators
- */
-export { default as createMaterialBottomTabNavigator } from './navigators/createMaterialBottomTabNavigator';
-
-/**
- * Views
- */
-export { default as MaterialBottomTabView } from './views/MaterialBottomTabView';
-
-/**
- * Types
- */
-export type {
-  MaterialBottomTabNavigationEventMap,
-  MaterialBottomTabNavigationOptions,
-  MaterialBottomTabNavigationProp,
-  MaterialBottomTabScreenProps,
-} from './types';
diff --git a/src/react-navigation/navigators/createMaterialBottomTabNavigator.tsx b/src/react-navigation/navigators/createMaterialBottomTabNavigator.tsx
deleted file mode 100644
index 7b162554b3..0000000000
--- a/src/react-navigation/navigators/createMaterialBottomTabNavigator.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import * as React from 'react';
-
-import {
-  createNavigatorFactory,
-  DefaultNavigatorOptions,
-  ParamListBase,
-  TabActionHelpers,
-  TabNavigationState,
-  TabRouter,
-  TabRouterOptions,
-  useNavigationBuilder,
-} from '@react-navigation/native';
-
-import type {
-  MaterialBottomTabNavigationConfig,
-  MaterialBottomTabNavigationEventMap,
-  MaterialBottomTabNavigationOptions,
-} from '../types';
-import MaterialBottomTabView from '../views/MaterialBottomTabView';
-
-export type MaterialBottomTabNavigatorProps = DefaultNavigatorOptions<
-  ParamListBase,
-  TabNavigationState<ParamListBase>,
-  MaterialBottomTabNavigationOptions,
-  MaterialBottomTabNavigationEventMap
-> &
-  TabRouterOptions &
-  MaterialBottomTabNavigationConfig;
-
-function MaterialBottomTabNavigator({
-  id,
-  initialRouteName,
-  backBehavior,
-  children,
-  screenListeners,
-  screenOptions,
-  ...rest
-}: MaterialBottomTabNavigatorProps) {
-  const { state, descriptors, navigation, NavigationContent } =
-    useNavigationBuilder<
-      TabNavigationState<ParamListBase>,
-      TabRouterOptions,
-      TabActionHelpers<ParamListBase>,
-      MaterialBottomTabNavigationOptions,
-      MaterialBottomTabNavigationEventMap
-    >(TabRouter, {
-      id,
-      initialRouteName,
-      backBehavior,
-      children,
-      screenListeners,
-      screenOptions,
-    });
-
-  return (
-    <NavigationContent>
-      <MaterialBottomTabView
-        {...rest}
-        state={state}
-        navigation={navigation}
-        descriptors={descriptors}
-      />
-    </NavigationContent>
-  );
-}
-
-/**
- * @deprecated `createMaterialBottomTabNavigator` has been deprecated since `react-native-paper@5.14.0`.
- * Please use `@react-navigation/bottom-tabs` version `7.x` or higher and combine it with `BottomNavigation.Bar` for a Material Design look.
- */
-export default createNavigatorFactory<
-  TabNavigationState<ParamListBase>,
-  MaterialBottomTabNavigationOptions,
-  MaterialBottomTabNavigationEventMap,
-  typeof MaterialBottomTabNavigator
->(MaterialBottomTabNavigator);
diff --git a/src/react-navigation/types.tsx b/src/react-navigation/types.tsx
deleted file mode 100644
index d0aa40fe3d..0000000000
--- a/src/react-navigation/types.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import type {
-  Descriptor,
-  NavigationHelpers,
-  NavigationProp,
-  ParamListBase,
-  RouteProp,
-  TabActionHelpers,
-  TabNavigationState,
-} from '@react-navigation/native';
-
-import type BottomNavigation from '../components/BottomNavigation/BottomNavigation';
-
-export type MaterialBottomTabNavigationEventMap = {
-  /**
-   * Event which fires on tapping on the tab in the tab bar.
-   */
-  tabPress: { data: undefined; canPreventDefault: true };
-  /**
-   * Event which fires on long pressing on the tab in the tab bar.
-   */
-  tabLongPress: {};
-};
-
-export type MaterialBottomTabNavigationHelpers = NavigationHelpers<
-  ParamListBase,
-  MaterialBottomTabNavigationEventMap
-> &
-  TabActionHelpers<ParamListBase>;
-
-export type MaterialBottomTabNavigationProp<
-  ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = keyof ParamList,
-  NavigatorID extends string | undefined = undefined
-> = NavigationProp<
-  ParamList,
-  RouteName,
-  NavigatorID,
-  TabNavigationState<ParamList>,
-  MaterialBottomTabNavigationOptions,
-  MaterialBottomTabNavigationEventMap
-> &
-  TabActionHelpers<ParamList>;
-
-export type MaterialBottomTabScreenProps<
-  ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = keyof ParamList,
-  NavigatorID extends string | undefined = undefined
-> = {
-  navigation: MaterialBottomTabNavigationProp<
-    ParamList,
-    RouteName,
-    NavigatorID
-  >;
-  route: RouteProp<ParamList, RouteName>;
-};
-
-export type MaterialBottomTabNavigationOptions = {
-  /**
-   * Title text for the screen.
-   */
-  title?: string;
-
-  /**
-   * @deprecated In v5.x works only with theme version 2.
-   * Color of the tab bar when this tab is active. Only used when `shifting` is `true`.
-   */
-  tabBarColor?: string;
-
-  /**
-   * Label text of the tab displayed in the navigation bar. When undefined, scene title is used.
-   */
-  tabBarLabel?: string;
-
-  /**
-   * String referring to an icon in the `MaterialCommunityIcons` set, or a
-   * function that given { focused: boolean, color: string } returns a React.Node to display in the navigation bar.
-   */
-  tabBarIcon?:
-    | string
-    | ((props: { focused: boolean; color: string }) => React.ReactNode);
-
-  /**
-   * Badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text.
-   */
-  tabBarBadge?: boolean | number | string;
-
-  /**
-   * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
-   */
-  tabBarAccessibilityLabel?: string;
-
-  /**
-   * ID to locate this tab button in tests.
-   */
-  tabBarButtonTestID?: string;
-};
-
-export type MaterialBottomTabDescriptor = Descriptor<
-  MaterialBottomTabNavigationOptions,
-  MaterialBottomTabNavigationProp<ParamListBase>,
-  RouteProp<ParamListBase>
->;
-
-export type MaterialBottomTabDescriptorMap = Record<
-  string,
-  MaterialBottomTabDescriptor
->;
-
-export type MaterialBottomTabNavigationConfig = Partial<
-  Omit<
-    React.ComponentProps<typeof BottomNavigation>,
-    | 'navigationState'
-    | 'onIndexChange'
-    | 'onTabPress'
-    | 'onTabLongPress'
-    | 'renderScene'
-    | 'renderLabel'
-    | 'renderIcon'
-    | 'getAccessibilityLabel'
-    | 'getBadge'
-    | 'getColor'
-    | 'getLabelText'
-    | 'getTestID'
-    | 'getLazy'
-  >
->;
diff --git a/src/react-navigation/views/MaterialBottomTabView.tsx b/src/react-navigation/views/MaterialBottomTabView.tsx
deleted file mode 100644
index df846ae2fb..0000000000
--- a/src/react-navigation/views/MaterialBottomTabView.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import * as React from 'react';
-import { I18nManager, Platform, StyleSheet } from 'react-native';
-
-import {
-  CommonActions,
-  Link,
-  ParamListBase,
-  Route,
-  TabNavigationState,
-  useLinkBuilder,
-} from '@react-navigation/native';
-
-import BottomNavigation from '../../components/BottomNavigation/BottomNavigation';
-import MaterialCommunityIcon from '../../components/MaterialCommunityIcon';
-import type {
-  MaterialBottomTabDescriptorMap,
-  MaterialBottomTabNavigationConfig,
-  MaterialBottomTabNavigationHelpers,
-} from '../types';
-
-type Props = MaterialBottomTabNavigationConfig & {
-  state: TabNavigationState<ParamListBase>;
-  navigation: MaterialBottomTabNavigationHelpers;
-  descriptors: MaterialBottomTabDescriptorMap;
-};
-export default function MaterialBottomTabView({
-  state,
-  navigation,
-  descriptors,
-  ...rest
-}: Props) {
-  const buildLink = useLinkBuilder();
-
-  return (
-    <BottomNavigation
-      {...rest}
-      onIndexChange={noop}
-      navigationState={state}
-      renderScene={({ route }) => descriptors[route.key].render()}
-      renderTouchable={
-        Platform.OS === 'web'
-          ? ({
-              onPress,
-              route,
-              accessibilityRole: _0,
-              borderless: _1,
-              centered: _2,
-              rippleColor: _3,
-              style,
-              ...rest
-            }) => {
-              return (
-                <Link
-                  {...rest}
-                  // @ts-expect-error: to could be undefined, but it doesn't affect functionality
-                  to={buildLink(route.name, route.params)}
-                  accessibilityRole="link"
-                  onPress={(e: any) => {
-                    if (
-                      !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) && // ignore clicks with modifier keys
-                      (e.button == null || e.button === 0) // ignore everything but left clicks
-                    ) {
-                      e.preventDefault();
-                      onPress?.(e);
-                    }
-                  }}
-                  style={[styles.touchable, style]}
-                />
-              );
-            }
-          : undefined
-      }
-      renderIcon={({ route, focused, color }) => {
-        const { options } = descriptors[route.key];
-
-        if (typeof options.tabBarIcon === 'string') {
-          return (
-            <MaterialCommunityIcon
-              direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
-              name={options.tabBarIcon}
-              color={color}
-              size={24}
-            />
-          );
-        }
-
-        if (typeof options.tabBarIcon === 'function') {
-          return options.tabBarIcon({ focused, color });
-        }
-
-        return null;
-      }}
-      getLabelText={({ route }) => {
-        const { options } = descriptors[route.key];
-
-        return options.tabBarLabel !== undefined
-          ? options.tabBarLabel
-          : options.title !== undefined
-          ? options.title
-          : (route as Route<string>).name;
-      }}
-      getColor={({ route }) => descriptors[route.key].options.tabBarColor}
-      getBadge={({ route }) => descriptors[route.key].options.tabBarBadge}
-      getAccessibilityLabel={({ route }) =>
-        descriptors[route.key].options.tabBarAccessibilityLabel
-      }
-      getTestID={({ route }) =>
-        descriptors[route.key].options.tabBarButtonTestID
-      }
-      onTabPress={({ route, preventDefault }) => {
-        const event = navigation.emit({
-          type: 'tabPress',
-          target: route.key,
-          canPreventDefault: true,
-        });
-
-        if (event.defaultPrevented) {
-          preventDefault();
-        } else {
-          navigation.dispatch({
-            ...CommonActions.navigate(route.name, route.params),
-            target: state.key,
-          });
-        }
-      }}
-      onTabLongPress={({ route }) =>
-        navigation.emit({ type: 'tabLongPress', target: route.key })
-      }
-    />
-  );
-}
-
-const styles = StyleSheet.create({
-  touchable: {
-    display: 'flex',
-    justifyContent: 'center',
-  },
-});
-
-function noop() {}
diff --git a/src/styles/fonts.tsx b/src/styles/fonts.tsx
deleted file mode 100644
index e3b5017fc4..0000000000
--- a/src/styles/fonts.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import { Platform, PlatformOSType } from 'react-native';
-
-import type { Fonts, MD3Type, MD3Typescale, MD3TypescaleKey } from '../types';
-import { typescale } from './themes/v3/tokens';
-
-export const fontConfig = {
-  web: {
-    regular: {
-      fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
-      fontWeight: '400' as '400',
-    },
-    medium: {
-      fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
-      fontWeight: '500' as '500',
-    },
-    light: {
-      fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
-      fontWeight: '300' as '300',
-    },
-    thin: {
-      fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
-      fontWeight: '100' as '100',
-    },
-  },
-  ios: {
-    regular: {
-      fontFamily: 'System',
-      fontWeight: '400' as '400',
-    },
-    medium: {
-      fontFamily: 'System',
-      fontWeight: '500' as '500',
-    },
-    light: {
-      fontFamily: 'System',
-      fontWeight: '300' as '300',
-    },
-    thin: {
-      fontFamily: 'System',
-      fontWeight: '100' as '100',
-    },
-  },
-  default: {
-    regular: {
-      fontFamily: 'sans-serif',
-      fontWeight: 'normal' as 'normal',
-    },
-    medium: {
-      fontFamily: 'sans-serif-medium',
-      fontWeight: 'normal' as 'normal',
-    },
-    light: {
-      fontFamily: 'sans-serif-light',
-      fontWeight: 'normal' as 'normal',
-    },
-    thin: {
-      fontFamily: 'sans-serif-thin',
-      fontWeight: 'normal' as 'normal',
-    },
-  },
-};
-
-type MD2FontsConfig = {
-  [platform in PlatformOSType | 'default']?: Fonts;
-};
-
-type MD3FontsConfig =
-  | {
-      [key in MD3TypescaleKey]: Partial<MD3Type>;
-    }
-  | {
-      [key: string]: MD3Type;
-    }
-  | Partial<MD3Type>;
-
-function configureV2Fonts(config: MD2FontsConfig): Fonts {
-  const fonts = Platform.select({ ...fontConfig, ...config }) as Fonts;
-  return fonts;
-}
-
-function configureV3Fonts(
-  config: MD3FontsConfig
-): MD3Typescale | (MD3Typescale & { [key: string]: MD3Type }) {
-  if (!config) {
-    return typescale;
-  }
-
-  const isFlatConfig = Object.keys(config).every(
-    (key) => typeof config[key as keyof typeof config] !== 'object'
-  );
-
-  if (isFlatConfig) {
-    return Object.fromEntries(
-      Object.entries(typescale).map(([variantName, variantProperties]) => [
-        variantName,
-        { ...variantProperties, ...config },
-      ])
-    ) as MD3Typescale;
-  }
-
-  return Object.assign(
-    {},
-    typescale,
-    ...Object.entries(config).map(([variantName, variantProperties]) => ({
-      [variantName]: {
-        ...typescale[variantName as MD3TypescaleKey],
-        ...variantProperties,
-      },
-    }))
-  );
-}
-
-// eslint-disable-next-line no-redeclare
-export default function configureFonts(params: { isV3: false }): Fonts;
-// eslint-disable-next-line no-redeclare
-export default function configureFonts(params: {
-  config?: MD2FontsConfig;
-  isV3: false;
-}): Fonts;
-// eslint-disable-next-line no-redeclare
-export default function configureFonts(params?: {
-  config?: Partial<MD3Type>;
-  isV3?: true;
-}): MD3Typescale;
-// eslint-disable-next-line no-redeclare
-export default function configureFonts(params?: {
-  config?: Partial<Record<MD3TypescaleKey, Partial<MD3Type>>>;
-  isV3?: true;
-}): MD3Typescale;
-// eslint-disable-next-line no-redeclare
-export default function configureFonts(params: {
-  config: Record<string, MD3Type>;
-  isV3?: true;
-}): MD3Typescale & { [key: string]: MD3Type };
-// eslint-disable-next-line no-redeclare
-export default function configureFonts(params?: any) {
-  const { isV3 = true, config } = params || {};
-
-  if (isV3) {
-    return configureV3Fonts(config);
-  }
-  return configureV2Fonts(config);
-}
diff --git a/src/styles/overlay.tsx b/src/styles/overlay.tsx
deleted file mode 100644
index f9e6f8f9a5..0000000000
--- a/src/styles/overlay.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Animated } from 'react-native';
-
-import color from 'color';
-
-import { MD2DarkTheme } from './themes/v2/DarkTheme';
-
-export const isAnimatedValue = (
-  it: number | string | Animated.AnimatedInterpolation<number | string>
-): it is Animated.Value => it instanceof Animated.Value;
-
-export default function overlay<T extends Animated.Value | number>(
-  elevation: T,
-  surfaceColor: string = MD2DarkTheme.colors?.surface
-): T extends number ? string : Animated.AnimatedInterpolation<number | string> {
-  if (isAnimatedValue(elevation)) {
-    const inputRange = [0, 1, 2, 3, 8, 24];
-
-    // @ts-expect-error: TS doesn't seem to refine the type correctly
-    return elevation.interpolate({
-      inputRange,
-      outputRange: inputRange.map((elevation) => {
-        return calculateColor(surfaceColor, elevation);
-      }),
-    });
-  }
-
-  // @ts-expect-error: TS doesn't seem to refine the type correctly
-  return calculateColor(surfaceColor, elevation);
-}
-
-function calculateColor(surfaceColor: string, elevation: number = 1) {
-  let overlayTransparency: number;
-  if (elevation >= 1 && elevation <= 24) {
-    overlayTransparency = elevationOverlayTransparency[elevation];
-  } else if (elevation > 24) {
-    overlayTransparency = elevationOverlayTransparency[24];
-  } else {
-    overlayTransparency = elevationOverlayTransparency[1];
-  }
-  return color(surfaceColor)
-    .mix(color('white'), overlayTransparency * 0.01)
-    .hex();
-}
-
-const elevationOverlayTransparency: Record<string, number> = {
-  1: 5,
-  2: 7,
-  3: 8,
-  4: 9,
-  5: 10,
-  6: 11,
-  7: 11.5,
-  8: 12,
-  9: 12.5,
-  10: 13,
-  11: 13.5,
-  12: 14,
-  13: 14.25,
-  14: 14.5,
-  15: 14.75,
-  16: 15,
-  17: 15.12,
-  18: 15.24,
-  19: 15.36,
-  20: 15.48,
-  21: 15.6,
-  22: 15.72,
-  23: 15.84,
-  24: 16,
-};
diff --git a/src/styles/shadow.tsx b/src/styles/shadow.tsx
deleted file mode 100644
index dcc11e8b65..0000000000
--- a/src/styles/shadow.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { Animated } from 'react-native';
-
-import * as MD2Colors from './themes/v2/colors';
-import { MD3Colors } from './themes/v3/tokens';
-
-const SHADOW_COLOR = MD2Colors.black;
-const SHADOW_OPACITY = 0.24;
-const MD3_SHADOW_OPACITY = 0.3;
-const MD3_SHADOW_COLOR = MD3Colors.primary0;
-
-export default function shadow(
-  elevation: number | Animated.Value = 0,
-  isV3 = false
-) {
-  return isV3 ? v3Shadow(elevation) : v2Shadow(elevation);
-}
-
-function v2Shadow(elevation: number | Animated.Value = 0) {
-  if (elevation instanceof Animated.Value) {
-    const inputRange = [0, 1, 2, 3, 8, 24];
-
-    return {
-      shadowColor: SHADOW_COLOR,
-      shadowOffset: {
-        width: new Animated.Value(0),
-        height: elevation.interpolate({
-          inputRange,
-          outputRange: [0, 0.5, 0.75, 2, 7, 23],
-        }),
-      },
-      shadowOpacity: elevation.interpolate({
-        inputRange: [0, 1],
-        outputRange: [0, SHADOW_OPACITY],
-        extrapolate: 'clamp',
-      }),
-      shadowRadius: elevation.interpolate({
-        inputRange,
-        outputRange: [0, 0.75, 1.5, 3, 8, 24],
-      }),
-    };
-  } else {
-    if (elevation === 0) {
-      return {};
-    }
-
-    let height, radius;
-    switch (elevation) {
-      case 1:
-        height = 0.5;
-        radius = 0.75;
-        break;
-      case 2:
-        height = 0.75;
-        radius = 1.5;
-        break;
-      default:
-        height = elevation - 1;
-        radius = elevation;
-    }
-
-    return {
-      shadowColor: SHADOW_COLOR,
-      shadowOffset: {
-        width: 0,
-        height,
-      },
-      shadowOpacity: SHADOW_OPACITY,
-      shadowRadius: radius,
-    };
-  }
-}
-
-function v3Shadow(elevation: number | Animated.Value = 0) {
-  const inputRange = [0, 1, 2, 3, 4, 5];
-  const shadowHeight = [0, 1, 2, 4, 6, 8];
-  const shadowRadius = [0, 3, 6, 8, 10, 12];
-
-  if (elevation instanceof Animated.Value) {
-    return {
-      shadowColor: MD3_SHADOW_COLOR,
-      shadowOffset: {
-        width: new Animated.Value(0),
-        height: elevation.interpolate({
-          inputRange,
-          outputRange: shadowHeight,
-        }),
-      },
-      shadowOpacity: elevation.interpolate({
-        inputRange: [0, 1],
-        outputRange: [0, MD3_SHADOW_OPACITY],
-        extrapolate: 'clamp',
-      }),
-      shadowRadius: elevation.interpolate({
-        inputRange,
-        outputRange: shadowRadius,
-      }),
-    };
-  } else {
-    return {
-      shadowColor: MD3_SHADOW_COLOR,
-      shadowOpacity: elevation ? MD3_SHADOW_OPACITY : 0,
-      shadowOffset: {
-        width: 0,
-        height: shadowHeight[elevation],
-      },
-      shadowRadius: shadowRadius[elevation],
-    };
-  }
-}
diff --git a/src/styles/themes/index.ts b/src/styles/themes/index.ts
deleted file mode 100644
index 3db1a460ad..0000000000
--- a/src/styles/themes/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { MD3LightTheme } from './v3/LightTheme';
-export { MD3DarkTheme } from './v3/DarkTheme';
-export { MD2LightTheme } from './v2/LightTheme';
-export { MD2DarkTheme } from './v2/DarkTheme';
diff --git a/src/styles/themes/v2/DarkTheme.tsx b/src/styles/themes/v2/DarkTheme.tsx
deleted file mode 100644
index 9eaa576dcb..0000000000
--- a/src/styles/themes/v2/DarkTheme.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import color from 'color';
-
-import { black, pinkA100, white } from './colors';
-import { MD2LightTheme } from './LightTheme';
-import type { Fonts, MD2Theme } from '../../../types';
-import configureFonts from '../../fonts';
-
-export const MD2DarkTheme: MD2Theme = {
-  ...MD2LightTheme,
-  dark: true,
-  mode: 'adaptive',
-  version: 2,
-  isV3: false,
-  colors: {
-    ...MD2LightTheme.colors,
-    primary: '#BB86FC',
-    accent: '#03dac6',
-    background: '#121212',
-    surface: '#121212',
-    error: '#CF6679',
-    onSurface: '#FFFFFF',
-    text: white,
-    disabled: color(white).alpha(0.38).rgb().string(),
-    placeholder: color(white).alpha(0.54).rgb().string(),
-    backdrop: color(black).alpha(0.5).rgb().string(),
-    notification: pinkA100,
-    tooltip: 'rgba(230, 225, 229, 1)',
-  },
-  fonts: configureFonts({ isV3: false }) as Fonts,
-};
diff --git a/src/styles/themes/v2/LightTheme.tsx b/src/styles/themes/v2/LightTheme.tsx
deleted file mode 100644
index 8566bdcc40..0000000000
--- a/src/styles/themes/v2/LightTheme.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import color from 'color';
-
-import { black, pinkA400, white } from './colors';
-import type { Fonts, MD2Theme } from '../../../types';
-import configureFonts from '../../fonts';
-
-export const MD2LightTheme: MD2Theme = {
-  dark: false,
-  roundness: 4,
-  version: 2,
-  isV3: false,
-  colors: {
-    primary: '#6200ee',
-    accent: '#03dac4',
-    background: '#f6f6f6',
-    surface: white,
-    error: '#B00020',
-    text: black,
-    onSurface: '#000000',
-    disabled: color(black).alpha(0.26).rgb().string(),
-    placeholder: color(black).alpha(0.54).rgb().string(),
-    backdrop: color(black).alpha(0.5).rgb().string(),
-    notification: pinkA400,
-    tooltip: 'rgba(28, 27, 31, 1)',
-  },
-  fonts: configureFonts({ isV3: false }) as Fonts,
-  animation: {
-    scale: 1.0,
-  },
-};
diff --git a/src/styles/themes/v3/DarkTheme.tsx b/src/styles/themes/v3/DarkTheme.tsx
deleted file mode 100644
index 9823e677bd..0000000000
--- a/src/styles/themes/v3/DarkTheme.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import color from 'color';
-
-import { MD3LightTheme } from './LightTheme';
-import { MD3Colors, tokens } from './tokens';
-import type { MD3Theme } from '../../../types';
-
-const { palette, opacity } = tokens.md.ref;
-
-export const MD3DarkTheme: MD3Theme = {
-  ...MD3LightTheme,
-  dark: true,
-  mode: 'adaptive',
-  version: 3,
-  isV3: true,
-  colors: {
-    primary: palette.primary80,
-    primaryContainer: palette.primary30,
-    secondary: palette.secondary80,
-    secondaryContainer: palette.secondary30,
-    tertiary: palette.tertiary80,
-    tertiaryContainer: palette.tertiary30,
-    surface: palette.neutral10,
-    surfaceVariant: palette.neutralVariant30,
-    surfaceDisabled: color(palette.neutral90)
-      .alpha(opacity.level2)
-      .rgb()
-      .string(),
-    background: palette.neutral10,
-    error: palette.error80,
-    errorContainer: palette.error30,
-    onPrimary: palette.primary20,
-    onPrimaryContainer: palette.primary90,
-    onSecondary: palette.secondary20,
-    onSecondaryContainer: palette.secondary90,
-    onTertiary: palette.tertiary20,
-    onTertiaryContainer: palette.tertiary90,
-    onSurface: palette.neutral90,
-    onSurfaceVariant: palette.neutralVariant80,
-    onSurfaceDisabled: color(palette.neutral90)
-      .alpha(opacity.level4)
-      .rgb()
-      .string(),
-    onError: palette.error20,
-    onErrorContainer: palette.error80,
-    onBackground: palette.neutral90,
-    outline: palette.neutralVariant60,
-    outlineVariant: palette.neutralVariant30,
-    inverseSurface: palette.neutral90,
-    inverseOnSurface: palette.neutral20,
-    inversePrimary: palette.primary40,
-    shadow: palette.neutral0,
-    scrim: palette.neutral0,
-    backdrop: color(MD3Colors.neutralVariant20).alpha(0.4).rgb().string(),
-    elevation: {
-      level0: 'transparent',
-      // Note: Color values with transparency cause RN to transfer shadows to children nodes
-      // instead of View component in Surface. Providing solid background fixes the issue.
-      // Opaque color values generated with `palette.primary80` used as background
-      level1: 'rgb(37, 35, 42)', // palette.primary80, alpha 0.05
-      level2: 'rgb(44, 40, 49)', // palette.primary80, alpha 0.08
-      level3: 'rgb(49, 44, 56)', // palette.primary80, alpha 0.11
-      level4: 'rgb(51, 46, 58)', // palette.primary80, alpha 0.12
-      level5: 'rgb(52, 49, 63)', // palette.primary80, alpha 0.14
-    },
-  },
-};
diff --git a/src/styles/themes/v3/LightTheme.tsx b/src/styles/themes/v3/LightTheme.tsx
deleted file mode 100644
index 99e0d11ab4..0000000000
--- a/src/styles/themes/v3/LightTheme.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import color from 'color';
-
-import { MD3Colors, tokens } from './tokens';
-import type { MD3Theme } from '../../../types';
-import configureFonts from '../../fonts';
-
-const { palette, opacity } = tokens.md.ref;
-
-export const MD3LightTheme: MD3Theme = {
-  dark: false,
-  roundness: 4,
-  version: 3,
-  isV3: true,
-  colors: {
-    primary: palette.primary40,
-    primaryContainer: palette.primary90,
-    secondary: palette.secondary40,
-    secondaryContainer: palette.secondary90,
-    tertiary: palette.tertiary40,
-    tertiaryContainer: palette.tertiary90,
-    surface: palette.neutral99,
-    surfaceVariant: palette.neutralVariant90,
-    surfaceDisabled: color(palette.neutral10)
-      .alpha(opacity.level2)
-      .rgb()
-      .string(),
-    background: palette.neutral99,
-    error: palette.error40,
-    errorContainer: palette.error90,
-    onPrimary: palette.primary100,
-    onPrimaryContainer: palette.primary10,
-    onSecondary: palette.secondary100,
-    onSecondaryContainer: palette.secondary10,
-    onTertiary: palette.tertiary100,
-    onTertiaryContainer: palette.tertiary10,
-    onSurface: palette.neutral10,
-    onSurfaceVariant: palette.neutralVariant30,
-    onSurfaceDisabled: color(palette.neutral10)
-      .alpha(opacity.level4)
-      .rgb()
-      .string(),
-    onError: palette.error100,
-    onErrorContainer: palette.error10,
-    onBackground: palette.neutral10,
-    outline: palette.neutralVariant50,
-    outlineVariant: palette.neutralVariant80,
-    inverseSurface: palette.neutral20,
-    inverseOnSurface: palette.neutral95,
-    inversePrimary: palette.primary80,
-    shadow: palette.neutral0,
-    scrim: palette.neutral0,
-    backdrop: color(MD3Colors.neutralVariant20).alpha(0.4).rgb().string(),
-    elevation: {
-      level0: 'transparent',
-      // Note: Color values with transparency cause RN to transfer shadows to children nodes
-      // instead of View component in Surface. Providing solid background fixes the issue.
-      // Opaque color values generated with `palette.primary99` used as background
-      level1: 'rgb(247, 243, 249)', // palette.primary40, alpha 0.05
-      level2: 'rgb(243, 237, 246)', // palette.primary40, alpha 0.08
-      level3: 'rgb(238, 232, 244)', // palette.primary40, alpha 0.11
-      level4: 'rgb(236, 230, 243)', // palette.primary40, alpha 0.12
-      level5: 'rgb(233, 227, 241)', // palette.primary40, alpha 0.14
-    },
-  },
-  fonts: configureFonts(),
-  animation: {
-    scale: 1.0,
-  },
-};
diff --git a/src/styles/themes/v3/tokens.tsx b/src/styles/themes/v3/tokens.tsx
deleted file mode 100644
index d008944d86..0000000000
--- a/src/styles/themes/v3/tokens.tsx
+++ /dev/null
@@ -1,230 +0,0 @@
-import { Platform } from 'react-native';
-
-import type { Font } from '../../../types';
-
-const ref = {
-  palette: {
-    primary100: 'rgba(255, 255, 255, 1)',
-    primary99: 'rgba(255, 251, 254, 1)',
-    primary95: 'rgba(246, 237, 255, 1)',
-    primary90: 'rgba(234, 221, 255, 1)',
-    primary80: 'rgba(208, 188, 255, 1)',
-    primary70: 'rgba(182, 157, 248, 1)',
-    primary60: 'rgba(154, 130, 219, 1)',
-    primary50: 'rgba(127, 103, 190, 1)',
-    primary40: 'rgba(103, 80, 164, 1)',
-    primary30: 'rgba(79, 55, 139, 1)',
-    primary20: 'rgba(56, 30, 114, 1)',
-    primary10: 'rgba(33, 0, 93, 1)',
-    primary0: 'rgba(0, 0, 0, 1)',
-    secondary100: 'rgba(255, 255, 255, 1)',
-    secondary99: 'rgba(255, 251, 254, 1)',
-    secondary95: 'rgba(246, 237, 255, 1)',
-    secondary90: 'rgba(232, 222, 248, 1)',
-    secondary80: 'rgba(204, 194, 220, 1)',
-    secondary70: 'rgba(176, 167, 192, 1)',
-    secondary60: 'rgba(149, 141, 165, 1)',
-    secondary50: 'rgba(122, 114, 137, 1)',
-    secondary40: 'rgba(98, 91, 113, 1)',
-    secondary30: 'rgba(74, 68, 88, 1)',
-    secondary20: 'rgba(51, 45, 65, 1)',
-    secondary10: 'rgba(29, 25, 43, 1)',
-    secondary0: 'rgba(0, 0, 0, 1)',
-    tertiary100: 'rgba(255, 255, 255, 1)',
-    tertiary99: 'rgba(255, 251, 250, 1)',
-    tertiary95: 'rgba(255, 236, 241, 1)',
-    tertiary90: 'rgba(255, 216, 228, 1)',
-    tertiary80: 'rgba(239, 184, 200, 1)',
-    tertiary70: 'rgba(210, 157, 172, 1)',
-    tertiary60: 'rgba(181, 131, 146, 1)',
-    tertiary50: 'rgba(152, 105, 119, 1)',
-    tertiary40: 'rgba(125, 82, 96, 1)',
-    tertiary30: 'rgba(99, 59, 72, 1)',
-    tertiary20: 'rgba(73, 37, 50, 1)',
-    tertiary10: 'rgba(49, 17, 29, 1)',
-    tertiary0: 'rgba(0, 0, 0, 1)',
-    neutral100: 'rgba(255, 255, 255, 1)',
-    neutral99: 'rgba(255, 251, 254, 1)',
-    neutral95: 'rgba(244, 239, 244, 1)',
-    neutral90: 'rgba(230, 225, 229, 1)',
-    neutral80: 'rgba(201, 197, 202, 1)',
-    neutral70: 'rgba(174, 170, 174, 1)',
-    neutral60: 'rgba(147, 144, 148, 1)',
-    neutral50: 'rgba(120, 117, 121, 1)',
-    neutral40: 'rgba(96, 93, 98, 1)',
-    neutral30: 'rgba(72, 70, 73, 1)',
-    neutral20: 'rgba(49, 48, 51, 1)',
-    neutral10: 'rgba(28, 27, 31, 1)',
-    neutral0: 'rgba(0, 0, 0, 1)',
-    neutralVariant100: 'rgba(255, 255, 255, 1)',
-    neutralVariant99: 'rgba(255, 251, 254, 1)',
-    neutralVariant95: 'rgba(245, 238, 250, 1)',
-    neutralVariant90: 'rgba(231, 224, 236, 1)',
-    neutralVariant80: 'rgba(202, 196, 208, 1)',
-    neutralVariant70: 'rgba(174, 169, 180, 1)',
-    neutralVariant60: 'rgba(147, 143, 153, 1)',
-    neutralVariant50: 'rgba(121, 116, 126, 1)',
-    neutralVariant40: 'rgba(96, 93, 102, 1)',
-    neutralVariant30: 'rgba(73, 69, 79, 1)',
-    neutralVariant20: 'rgba(50, 47, 55, 1)',
-    neutralVariant10: 'rgba(29, 26, 34, 1)',
-    neutralVariant0: 'rgba(0, 0, 0, 1)',
-    error100: 'rgba(255, 255, 255, 1)',
-    error99: 'rgba(255, 251, 249, 1)',
-    error95: 'rgba(252, 238, 238, 1)',
-    error90: 'rgba(249, 222, 220, 1)',
-    error80: 'rgba(242, 184, 181, 1)',
-    error70: 'rgba(236, 146, 142, 1)',
-    error60: 'rgba(228, 105, 98, 1)',
-    error50: 'rgba(220, 54, 46, 1)',
-    error40: 'rgba(179, 38, 30, 1)',
-    error30: 'rgba(140, 29, 24, 1)',
-    error20: 'rgba(96, 20, 16, 1)',
-    error10: 'rgba(65, 14, 11, 1)',
-    error0: 'rgba(0, 0, 0, 1)',
-  },
-
-  typeface: {
-    brandRegular: Platform.select({
-      web: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
-      ios: 'System',
-      default: 'sans-serif',
-    }),
-    weightRegular: '400' as Font['fontWeight'],
-
-    plainMedium: Platform.select({
-      web: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
-      ios: 'System',
-      default: 'sans-serif-medium',
-    }),
-    weightMedium: '500' as Font['fontWeight'],
-  },
-
-  opacity: {
-    level1: 0.08,
-    level2: 0.12,
-    level3: 0.16,
-    level4: 0.38,
-  },
-};
-
-const regularType = {
-  fontFamily: ref.typeface.brandRegular,
-  letterSpacing: 0,
-  fontWeight: ref.typeface.weightRegular,
-};
-
-const mediumType = {
-  fontFamily: ref.typeface.plainMedium,
-  letterSpacing: 0.15,
-  fontWeight: ref.typeface.weightMedium,
-};
-
-export const typescale = {
-  displayLarge: {
-    ...regularType,
-    lineHeight: 64,
-    fontSize: 57,
-  },
-  displayMedium: {
-    ...regularType,
-    lineHeight: 52,
-    fontSize: 45,
-  },
-  displaySmall: {
-    ...regularType,
-    lineHeight: 44,
-    fontSize: 36,
-  },
-
-  headlineLarge: {
-    ...regularType,
-    lineHeight: 40,
-    fontSize: 32,
-  },
-  headlineMedium: {
-    ...regularType,
-    lineHeight: 36,
-    fontSize: 28,
-  },
-  headlineSmall: {
-    ...regularType,
-    lineHeight: 32,
-    fontSize: 24,
-  },
-
-  titleLarge: {
-    ...regularType,
-    lineHeight: 28,
-    fontSize: 22,
-  },
-  titleMedium: {
-    ...mediumType,
-    lineHeight: 24,
-    fontSize: 16,
-  },
-  titleSmall: {
-    ...mediumType,
-    letterSpacing: 0.1,
-    lineHeight: 20,
-    fontSize: 14,
-  },
-
-  labelLarge: {
-    ...mediumType,
-    letterSpacing: 0.1,
-    lineHeight: 20,
-    fontSize: 14,
-  },
-  labelMedium: {
-    ...mediumType,
-    letterSpacing: 0.5,
-    lineHeight: 16,
-    fontSize: 12,
-  },
-  labelSmall: {
-    ...mediumType,
-    letterSpacing: 0.5,
-    lineHeight: 16,
-    fontSize: 11,
-  },
-
-  bodyLarge: {
-    ...mediumType,
-    fontWeight: ref.typeface.weightRegular,
-    fontFamily: ref.typeface.brandRegular,
-    lineHeight: 24,
-    fontSize: 16,
-  },
-  bodyMedium: {
-    ...mediumType,
-    fontWeight: ref.typeface.weightRegular,
-    fontFamily: ref.typeface.brandRegular,
-    letterSpacing: 0.25,
-    lineHeight: 20,
-    fontSize: 14,
-  },
-  bodySmall: {
-    ...mediumType,
-    fontWeight: ref.typeface.weightRegular,
-    fontFamily: ref.typeface.brandRegular,
-    letterSpacing: 0.4,
-    lineHeight: 16,
-    fontSize: 12,
-  },
-
-  default: {
-    ...regularType,
-  },
-};
-
-export const tokens = {
-  md: {
-    ref,
-    sys: {
-      typescale,
-    },
-  },
-};
-
-export const MD3Colors = ref.palette;
diff --git a/src/test-utils.tsx b/src/test-utils.tsx
new file mode 100644
index 0000000000..4eec1e548e
--- /dev/null
+++ b/src/test-utils.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { render, type RenderOptions } from '@testing-library/react-native';
+
+import MaterialCommunityIcon from './components/MaterialCommunityIcon';
+import { getDefaultDirection, LocaleProvider } from './core/locale';
+import { Provider as SettingsProvider } from './core/settings';
+import { ThemeProvider } from './core/theming';
+import { LightTheme } from './theme/schemes';
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <SettingsProvider
+    value={{ icon: MaterialCommunityIcon, rippleEffectEnabled: true }}
+  >
+    <LocaleProvider direction={getDefaultDirection()}>
+      <ThemeProvider theme={LightTheme}>{children}</ThemeProvider>
+    </LocaleProvider>
+  </SettingsProvider>
+);
+
+const customRender = (ui: React.ReactElement, options?: RenderOptions) =>
+  render(ui, { wrapper: Wrapper, ...options });
+
+export * from '@testing-library/react-native';
+export { customRender as render };
diff --git a/src/styles/__tests__/fonts.test.js b/src/theme/__tests__/fonts.test.js
similarity index 52%
rename from src/styles/__tests__/fonts.test.js
rename to src/theme/__tests__/fonts.test.js
index fb8dce5ba5..6189b2ca96 100644
--- a/src/styles/__tests__/fonts.test.js
+++ b/src/theme/__tests__/fonts.test.js
@@ -1,11 +1,6 @@
-const customFont = {
-  custom: {
-    fontFamily: 'sans-serif',
-    fontWeight: 'bold',
-  },
-};
+import { afterEach, describe, expect, it, jest } from '@jest/globals';
 
-const customFontV3 = {
+const customFont = {
   displayLarge: {
     fontFamily: 'NotoSans',
     letterSpacing: 0,
@@ -111,6 +106,111 @@ const customFontV3 = {
     lineHeight: 16,
     fontSize: 12,
   },
+  displayLargeEmphasized: {
+    fontFamily: 'NotoSans',
+    letterSpacing: 0,
+    fontWeight: '500',
+    lineHeight: 64,
+    fontSize: 57,
+  },
+  displayMediumEmphasized: {
+    fontFamily: 'NotoSans',
+    letterSpacing: 0,
+    fontWeight: '500',
+    lineHeight: 52,
+    fontSize: 45,
+  },
+  displaySmallEmphasized: {
+    fontFamily: 'NotoSans',
+    letterSpacing: 0,
+    fontWeight: '500',
+    lineHeight: 44,
+    fontSize: 36,
+  },
+  headlineLargeEmphasized: {
+    fontFamily: 'NotoSans',
+    letterSpacing: 0,
+    fontWeight: '500',
+    lineHeight: 40,
+    fontSize: 32,
+  },
+  headlineMediumEmphasized: {
+    fontFamily: 'NotoSans',
+    letterSpacing: 0,
+    fontWeight: '500',
+    lineHeight: 36,
+    fontSize: 28,
+  },
+  headlineSmallEmphasized: {
+    fontFamily: 'NotoSans',
+    letterSpacing: 0,
+    fontWeight: '500',
+    lineHeight: 32,
+    fontSize: 24,
+  },
+  titleLargeEmphasized: {
+    fontFamily: 'NotoSans',
+    letterSpacing: 0,
+    fontWeight: '500',
+    lineHeight: 28,
+    fontSize: 22,
+  },
+  titleMediumEmphasized: {
+    fontFamily: 'NotoSans',
+    letterSpacing: 0,
+    fontWeight: '700',
+    lineHeight: 24,
+    fontSize: 16,
+  },
+  titleSmallEmphasized: {
+    fontFamily: 'NotoSans',
+    letterSpacing: 0,
+    fontWeight: '700',
+    lineHeight: 20,
+    fontSize: 14,
+  },
+  labelLargeEmphasized: {
+    fontFamily: 'NotoSans',
+    letterSpacing: 0,
+    fontWeight: '700',
+    lineHeight: 20,
+    fontSize: 14,
+  },
+  labelMediumEmphasized: {
+    fontFamily: 'NotoSans',
+    letterSpacing: 0,
+    fontWeight: '700',
+    lineHeight: 16,
+    fontSize: 12,
+  },
+  labelSmallEmphasized: {
+    fontFamily: 'NotoSans',
+    letterSpacing: 0,
+    fontWeight: '700',
+    lineHeight: 16,
+    fontSize: 11,
+  },
+  bodyLargeEmphasized: {
+    fontFamily: 'NotoSans',
+    letterSpacing: 0,
+    fontWeight: '500',
+    lineHeight: 24,
+    fontSize: 16,
+  },
+  bodyMediumEmphasized: {
+    fontFamily: 'NotoSans',
+    letterSpacing: 0,
+    fontWeight: '500',
+    lineHeight: 20,
+    fontSize: 14,
+  },
+  bodySmallEmphasized: {
+    fontFamily: 'NotoSans',
+    letterSpacing: 0,
+    fontWeight: '500',
+    lineHeight: 16,
+    fontSize: 12,
+  },
   default: {
     fontFamily: 'NotoSans',
     letterSpacing: 0,
@@ -131,18 +231,16 @@ const mockPlatform = (OS) => {
 
 const loadFonts = () => {
   let configureFonts;
-  let fontConfig;
   let typescale;
 
   jest.isolateModules(() => {
     const fonts = require('../fonts');
     configureFonts = fonts.default;
-    fontConfig = fonts.fontConfig;
 
-    typescale = require('../themes/v3/tokens').typescale;
+    typescale = require('../tokens').typescale;
   });
 
-  return { configureFonts, fontConfig, typescale };
+  return { configureFonts, typescale };
 };
 
 describe('configureFonts', () => {
@@ -150,66 +248,6 @@ describe('configureFonts', () => {
     jest.dontMock('react-native');
   });
 
-  it('adds custom fonts to the iOS config', () => {
-    mockPlatform('ios');
-    const { configureFonts, fontConfig } = loadFonts();
-
-    expect(
-      configureFonts({
-        config: {
-          ios: {
-            ...fontConfig.ios,
-            customFont,
-          },
-        },
-        isV3: false,
-      })
-    ).toEqual({
-      ...fontConfig.ios,
-      customFont,
-    });
-  });
-
-  it('adds custom fonts to the Android config', () => {
-    mockPlatform('android');
-    const { configureFonts, fontConfig } = loadFonts();
-
-    expect(
-      configureFonts({
-        config: {
-          android: {
-            ...fontConfig.android,
-            customFont,
-          },
-        },
-        isV3: false,
-      })
-    ).toEqual({
-      ...fontConfig.android,
-      customFont,
-    });
-  });
-
-  it('adds custom fonts to the Web config', () => {
-    mockPlatform('web');
-    const { configureFonts, fontConfig } = loadFonts();
-
-    expect(
-      configureFonts({
-        config: {
-          web: {
-            ...fontConfig.web,
-            customFont,
-          },
-        },
-        isV3: false,
-      })
-    ).toEqual({
-      ...fontConfig.web,
-      customFont,
-    });
-  });
-
   it('overrides properties passed in config for all variants', () => {
     mockPlatform('ios');
     const { configureFonts } = loadFonts();
@@ -221,7 +259,7 @@ describe('configureFonts', () => {
           letterSpacing: 0,
         },
       })
-    ).toEqual(customFontV3);
+    ).toEqual(customFont);
   });
 
   it('overrides properties passed in config for several variants', () => {
@@ -248,7 +286,7 @@ describe('configureFonts', () => {
       ...typescale,
       bodyLarge: {
         fontFamily: 'NotoSans',
-        letterSpacing: 0.15,
+        letterSpacing: 0.5,
         fontWeight: '400',
         fontStyle: 'italic',
         lineHeight: 24,
@@ -302,6 +340,97 @@ describe('configureFonts', () => {
     });
   });
 
+  it('resolves the Android font families per MD3 family assignment', () => {
+    mockPlatform('android');
+    const { typescale } = loadFonts();
+
+    for (const variant of ['bodyLarge', 'bodyMedium', 'bodySmall']) {
+      expect(typescale[variant]).toMatchObject({
+        fontFamily: 'sans-serif',
+        fontWeight: '400',
+      });
+    }
+
+    for (const variant of [
+      'displayLargeEmphasized',
+      'displayMediumEmphasized',
+      'displaySmallEmphasized',
+      'headlineLargeEmphasized',
+      'headlineMediumEmphasized',
+      'headlineSmallEmphasized',
+      'titleLargeEmphasized',
+    ]) {
+      expect(typescale[variant]).toMatchObject({
+        fontFamily: 'sans-serif-medium',
+        fontWeight: '500',
+      });
+    }
+
+    for (const variant of ['displayLarge', 'headlineLarge', 'titleLarge']) {
+      expect(typescale[variant]).toMatchObject({
+        fontFamily: 'sans-serif',
+        fontWeight: '400',
+      });
+    }
+
+    for (const variant of [
+      'titleMediumEmphasized',
+      'titleSmallEmphasized',
+      'labelLargeEmphasized',
+      'labelMediumEmphasized',
+      'labelSmallEmphasized',
+    ]) {
+      expect(typescale[variant]).toMatchObject({
+        fontFamily: 'sans-serif',
+        fontWeight: '700',
+      });
+    }
+  });
+
+  it('applies flat properties to every variant when the config also has per-variant entries', () => {
+    mockPlatform('ios');
+    const { configureFonts, typescale } = loadFonts();
+
+    const fonts = configureFonts({
+      config: {
+        fontFamily: 'NotoSans',
+        bodyLarge: {
+          fontSize: 18,
+        },
+      },
+    });
+
+    expect(fonts).toEqual({
+      ...Object.fromEntries(
+        Object.entries(typescale).map(([variantName, variantProperties]) => [
+          variantName,
+          { ...variantProperties, fontFamily: 'NotoSans' },
+        ])
+      ),
+      bodyLarge: {
+        ...typescale.bodyLarge,
+        fontFamily: 'NotoSans',
+        fontSize: 18,
+      },
+    });
+  });
+
+  it('does not add flat properties of a mixed config as typescale variants', () => {
+    mockPlatform('ios');
+    const { configureFonts } = loadFonts();
+
+    const fonts = configureFonts({
+      config: {
+        fontFamily: 'NotoSans',
+        bodyLarge: {
+          fontSize: 18,
+        },
+      },
+    });
+
+    expect(fonts.fontFamily).toBeUndefined();
+  });
+
   it('should be deterministic', () => {
     mockPlatform('ios');
     const { configureFonts } = loadFonts();
diff --git a/src/theme/__tests__/provider.test.ts b/src/theme/__tests__/provider.test.ts
new file mode 100644
index 0000000000..acac88b491
--- /dev/null
+++ b/src/theme/__tests__/provider.test.ts
@@ -0,0 +1,208 @@
+import * as React from 'react';
+import { PlatformColor } from 'react-native';
+
+import { describe, expect, it } from '@jest/globals';
+import { renderHook } from '@testing-library/react-native';
+
+import {
+  isPlatformColorSentinel,
+  safeMerge,
+  ThemeProvider,
+  useInternalTheme,
+} from '../provider';
+import { DarkTheme, LightTheme } from '../schemes';
+import type { ThemeProp } from '../types';
+
+describe('isPlatformColorSentinel', () => {
+  it('detects iOS PlatformColor (semantic)', () => {
+    expect(isPlatformColorSentinel({ semantic: ['label'] })).toBe(true);
+  });
+
+  it('detects iOS DynamicColorIOS (dynamic)', () => {
+    expect(
+      isPlatformColorSentinel({ dynamic: { light: '#fff', dark: '#000' } })
+    ).toBe(true);
+  });
+
+  it('detects Android PlatformColor (resource_paths)', () => {
+    expect(
+      isPlatformColorSentinel({ resource_paths: ['@android:color/black'] })
+    ).toBe(true);
+  });
+
+  it('rejects plain objects, primitives, null, and arrays', () => {
+    expect(isPlatformColorSentinel({ primary: '#fff' })).toBe(false);
+    expect(isPlatformColorSentinel('#fff')).toBe(false);
+    expect(isPlatformColorSentinel(null)).toBe(false);
+    expect(isPlatformColorSentinel(undefined)).toBe(false);
+    expect(isPlatformColorSentinel([1, 2, 3])).toBe(false);
+  });
+});
+
+describe('safeMerge', () => {
+  it('deep-merges plain objects, overrides win at leaves', () => {
+    const base = { a: 1, nested: { x: 1, y: 2 } };
+    const overrides = { nested: { y: 20, z: 30 } };
+
+    expect(safeMerge(base, overrides)).toEqual({
+      a: 1,
+      nested: { x: 1, y: 20, z: 30 },
+    });
+  });
+
+  it('returns a new object reference (does not mutate base)', () => {
+    const base = { nested: { x: 1 } };
+    const overrides = { nested: { y: 2 } };
+    const result = safeMerge(base, overrides);
+
+    expect(result).not.toBe(base);
+    expect(result.nested).not.toBe(base.nested);
+    expect(base).toEqual({ nested: { x: 1 } });
+  });
+
+  it('falls back to base when overrides is null/undefined', () => {
+    const base = { a: 1 };
+    expect(safeMerge(base, null)).toEqual(base);
+    expect(safeMerge(base, undefined)).toEqual(base);
+  });
+
+  it('replaces arrays instead of merging', () => {
+    const base = { list: [1, 2, 3] };
+    const overrides = { list: [9] };
+    expect(safeMerge(base, overrides)).toEqual({ list: [9] });
+  });
+
+  it('treats iOS semantic sentinel as a leaf (no recursion into array)', () => {
+    const sentinel = { semantic: ['label'] };
+    const base = { colors: { primary: '#000' } };
+    const overrides = { colors: { primary: sentinel } };
+
+    const result = safeMerge<typeof base & { colors: { primary: unknown } }>(
+      base,
+      overrides
+    );
+    expect(result.colors.primary).toBe(sentinel);
+  });
+
+  it('treats DynamicColorIOS sentinel as a leaf', () => {
+    const sentinel = { dynamic: { light: '#fff', dark: '#000' } };
+    const base = { colors: { primary: sentinel } };
+    const overrides = { colors: { primary: '#abc' } };
+
+    const result = safeMerge<typeof base & { colors: { primary: unknown } }>(
+      base,
+      overrides
+    );
+    expect(result.colors.primary).toBe('#abc');
+  });
+
+  it('treats Android resource_paths sentinel as a leaf', () => {
+    const sentinelBase = { resource_paths: ['@android:color/black'] };
+    const sentinelOverride = { resource_paths: ['@android:color/white'] };
+    const base = { colors: { primary: sentinelBase } };
+    const overrides = { colors: { primary: sentinelOverride } };
+
+    const result = safeMerge<typeof base & { colors: { primary: unknown } }>(
+      base,
+      overrides
+    );
+    expect(result.colors.primary).toBe(sentinelOverride);
+  });
+
+  it('preserves sentinel siblings when merging a colors map', () => {
+    const sentinel = { semantic: ['label'] };
+    const base = {
+      colors: { primary: sentinel, secondary: '#111', tertiary: '#222' },
+    };
+    const overrides = { colors: { secondary: '#999' } };
+
+    const result = safeMerge<typeof base & { colors: Record<string, unknown> }>(
+      base,
+      overrides
+    );
+    expect(result.colors.primary).toBe(sentinel);
+    expect(result.colors.secondary).toBe('#999');
+    expect(result.colors.tertiary).toBe('#222');
+  });
+});
+
+describe('useInternalTheme', () => {
+  it('returns the default theme without overrides', async () => {
+    const { result } = await renderHook(() => useInternalTheme(undefined));
+
+    expect(result.current).toBe(LightTheme);
+  });
+
+  it('keeps the theme reference when nested overrides have equal values', async () => {
+    const { result, rerender } = await renderHook(
+      (overrides: ThemeProp) => useInternalTheme(overrides),
+      { initialProps: { colors: { primary: '#123456' } } }
+    );
+    const theme = result.current;
+
+    await rerender({ colors: { primary: '#123456' } });
+
+    expect(result.current).toBe(theme);
+    expect(result.current.colors.primary).toBe('#123456');
+    expect(result.current.colors.secondary).toBe(LightTheme.colors.secondary);
+  });
+
+  it('updates changed overrides and restores defaults when overrides are removed', async () => {
+    const { result, rerender } = await renderHook(
+      (overrides: ThemeProp | undefined) => useInternalTheme(overrides),
+      { initialProps: { colors: { primary: '#123456', secondary: '#abcdef' } } }
+    );
+    const theme = result.current;
+
+    await rerender({ colors: { primary: '#654321' } });
+
+    expect(result.current).not.toBe(theme);
+    expect(result.current.colors.primary).toBe('#654321');
+    expect(result.current.colors.secondary).toBe(LightTheme.colors.secondary);
+
+    await rerender(undefined);
+
+    expect(result.current).toBe(LightTheme);
+  });
+
+  it('updates the provider theme while keeping local overrides', async () => {
+    let theme = LightTheme;
+    const wrapper = (props: { children: React.ReactNode }) =>
+      React.createElement(ThemeProvider, { ...props, theme });
+    const { result, rerender } = await renderHook(
+      (overrides: ThemeProp) => useInternalTheme(overrides),
+      { wrapper, initialProps: { colors: { primary: '#123456' } } }
+    );
+    const previous = result.current;
+
+    theme = DarkTheme;
+    await rerender({ colors: { primary: '#123456' } });
+
+    expect(result.current).not.toBe(previous);
+    expect(result.current.dark).toBe(true);
+    expect(result.current.colors.primary).toBe('#123456');
+    expect(result.current.colors.secondary).toBe(DarkTheme.colors.secondary);
+  });
+
+  it('preserves platform colors and keeps equal platform color overrides stable', async () => {
+    const primary = PlatformColor('label');
+    const { result, rerender } = await renderHook(
+      (overrides: ThemeProp) => useInternalTheme(overrides),
+      { initialProps: { colors: { primary } } }
+    );
+    const theme = result.current;
+
+    expect(result.current.colors.primary).toBe(primary);
+
+    await rerender({ colors: { primary: PlatformColor('label') } });
+
+    expect(result.current).toBe(theme);
+
+    await rerender({ colors: { primary: PlatformColor('secondaryLabel') } });
+
+    expect(result.current).not.toBe(theme);
+    expect(result.current.colors.primary).toEqual(
+      PlatformColor('secondaryLabel')
+    );
+  });
+});
diff --git a/src/theme/accessibility/ReduceMotionContext.tsx b/src/theme/accessibility/ReduceMotionContext.tsx
new file mode 100644
index 0000000000..34ad809060
--- /dev/null
+++ b/src/theme/accessibility/ReduceMotionContext.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+export const ReduceMotionContext = React.createContext<boolean>(false);
+
+/**
+ * Returns `true` when the user has requested reduced motion, either via the
+ * `reduceMotion` prop on `PaperProvider` (`"on"` | `"off"`) or, in `"auto"`
+ * mode (the default), via the OS-level setting reported by `AccessibilityInfo`.
+ *
+ * Use this in component code to gate motion-specific animations (translation,
+ * scale, transforms) while keeping non-motion animations (opacity, color) intact.
+ */
+export function useReduceMotion(): boolean {
+  return React.useContext(ReduceMotionContext);
+}
diff --git a/src/styles/themes/v2/colors.tsx b/src/theme/colors.tsx
similarity index 100%
rename from src/styles/themes/v2/colors.tsx
rename to src/theme/colors.tsx
diff --git a/src/theme/fonts.tsx b/src/theme/fonts.tsx
new file mode 100644
index 0000000000..268f4dde02
--- /dev/null
+++ b/src/theme/fonts.tsx
@@ -0,0 +1,73 @@
+import { typescale } from './tokens';
+import type { TypescaleStyle, Typescale, TypescaleKey } from './types';
+
+type FontsConfig =
+  | Record<TypescaleKey, Partial<TypescaleStyle>>
+  | Record<string, TypescaleStyle>
+  | Partial<TypescaleStyle>;
+
+function configureFontsConfig(
+  config: FontsConfig
+): Typescale | (Typescale & { [key: string]: TypescaleStyle }) {
+  if (!config) {
+    return typescale;
+  }
+
+  // A config entry is either a whole variant (an object, e.g. `bodyLarge: { fontSize: 18 }`)
+  // or a single font property shared by every variant (e.g. `fontFamily: 'NotoSans'`).
+  // Both may appear in the same config, so they are collected separately instead of
+  // classifying the config as a whole.
+  const sharedProperties: Record<string, unknown> = {};
+  const variantOverrides: Record<string, object> = {};
+
+  for (const [key, value] of Object.entries(config)) {
+    if (typeof value === 'object' && value !== null) {
+      variantOverrides[key] = value;
+    } else {
+      sharedProperties[key] = value;
+    }
+  }
+
+  const typescaleByVariant: Partial<
+    Record<string, Typescale[keyof Typescale]>
+  > = typescale;
+
+  const variantNames = new Set([
+    ...Object.keys(typescale),
+    ...Object.keys(variantOverrides),
+  ]);
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+  return Object.fromEntries(
+    Array.from(variantNames, (variantName) => [
+      variantName,
+      {
+        ...typescaleByVariant[variantName],
+        ...sharedProperties,
+        ...variantOverrides[variantName],
+      },
+    ])
+  ) as Typescale;
+}
+
+export default function configureFonts(params?: {
+  config?: Partial<TypescaleStyle>;
+}): Typescale;
+// eslint-disable-next-line no-redeclare
+export default function configureFonts(params?: {
+  config?: Partial<Record<TypescaleKey, Partial<TypescaleStyle>>>;
+}): Typescale;
+// eslint-disable-next-line no-redeclare
+export default function configureFonts(params: {
+  config: Partial<TypescaleStyle> &
+    Partial<Record<TypescaleKey, Partial<TypescaleStyle>>>;
+}): Typescale;
+// eslint-disable-next-line no-redeclare
+export default function configureFonts(params: {
+  config: Record<string, TypescaleStyle>;
+}): Typescale & { [key: string]: TypescaleStyle };
+// eslint-disable-next-line no-redeclare
+export default function configureFonts(params?: any) {
+  const { config } = params || {};
+  return configureFontsConfig(config);
+}
diff --git a/src/theme/provider.tsx b/src/theme/provider.tsx
new file mode 100644
index 0000000000..2c1f8ca9f9
--- /dev/null
+++ b/src/theme/provider.tsx
@@ -0,0 +1,170 @@
+import * as React from 'react';
+
+import { createTheming } from '@callstack/react-theme-provider';
+import type { $DeepPartial } from '@callstack/react-theme-provider';
+import isEqual from 'fast-deep-equal';
+
+import { DarkTheme, LightTheme } from './schemes';
+import type { Theme, NavigationTheme } from './types';
+
+const {
+  ThemeProvider,
+  withTheme,
+  useTheme: useThemeBase,
+} = createTheming<unknown>(LightTheme);
+
+export { ThemeProvider, withTheme };
+
+export function useTheme<T = Theme>(overrides?: $DeepPartial<T>) {
+  return useThemeBase<T>(overrides);
+}
+
+// Upstream `deepmerge` corrupts PlatformColor objects, so we recurse manually
+// and treat sentinels as leaves. Three shapes:
+//   `semantic`        — iOS PlatformColor
+//   `dynamic`         — DynamicColorIOS
+//   `resource_paths`  — Android PlatformColor
+export const isPlatformColorSentinel = (v: unknown): boolean =>
+  !!v &&
+  typeof v === 'object' &&
+  ('resource_paths' in v || 'semantic' in v || 'dynamic' in v);
+
+/* eslint-disable @typescript-eslint/no-unsafe-type-assertion */
+export const safeMerge = <T,>(base: T, overrides: unknown): T => {
+  if (
+    !base ||
+    !overrides ||
+    typeof base !== 'object' ||
+    typeof overrides !== 'object' ||
+    Array.isArray(base) ||
+    Array.isArray(overrides) ||
+    isPlatformColorSentinel(base) ||
+    isPlatformColorSentinel(overrides)
+  ) {
+    // leaf: override wins, fall back to base
+    return (overrides ?? base) as T;
+  }
+  const out: Record<string, unknown> = { ...(base as Record<string, unknown>) };
+  for (const key of Object.keys(overrides)) {
+    out[key] = safeMerge(
+      (base as Record<string, unknown>)[key],
+      (overrides as Record<string, unknown>)[key]
+    );
+  }
+  return out as T;
+};
+/* eslint-enable @typescript-eslint/no-unsafe-type-assertion */
+
+export const useInternalTheme = (
+  themeOverrides: $DeepPartial<Theme> | undefined
+): Theme => {
+  const theme = useThemeBase<Theme>();
+  const [overrides, setOverrides] = React.useState(themeOverrides);
+
+  if (!isEqual(overrides, themeOverrides)) {
+    setOverrides(themeOverrides);
+  }
+
+  return React.useMemo(
+    () => (overrides ? safeMerge(theme, overrides) : theme),
+    [theme, overrides]
+  );
+};
+
+export function adaptNavigationTheme<T extends NavigationTheme>(themes: {
+  reactNavigationLight: T;
+  materialLight?: Theme;
+}): {
+  LightTheme: T;
+};
+// eslint-disable-next-line no-redeclare
+export function adaptNavigationTheme<T extends NavigationTheme>(themes: {
+  reactNavigationDark: T;
+  materialDark?: Theme;
+}): {
+  DarkTheme: T;
+};
+// eslint-disable-next-line no-redeclare
+export function adaptNavigationTheme<
+  TLight extends NavigationTheme,
+  TDark extends NavigationTheme,
+>(themes: {
+  reactNavigationLight: TLight;
+  reactNavigationDark: TDark;
+  materialLight?: Theme;
+  materialDark?: Theme;
+}): { LightTheme: TLight; DarkTheme: TDark };
+// eslint-disable-next-line no-redeclare
+export function adaptNavigationTheme(themes: any) {
+  const {
+    reactNavigationLight,
+    reactNavigationDark,
+    materialLight,
+    materialDark,
+  } = themes;
+
+  const MD3Themes = {
+    light: materialLight || LightTheme,
+    dark: materialDark || DarkTheme,
+  };
+
+  const result: { LightTheme?: any; DarkTheme?: any } = {};
+
+  if (reactNavigationLight) {
+    result.LightTheme = getAdaptedTheme(reactNavigationLight, MD3Themes.light);
+  }
+
+  if (reactNavigationDark) {
+    result.DarkTheme = getAdaptedTheme(reactNavigationDark, MD3Themes.dark);
+  }
+
+  return result;
+}
+
+const getAdaptedTheme = <T extends NavigationTheme>(
+  theme: T,
+  materialTheme: Theme
+): T => {
+  const base = {
+    ...theme,
+    colors: {
+      ...theme.colors,
+      primary: materialTheme.colors.primary,
+      background: materialTheme.colors.background,
+      card: materialTheme.colors.surfaceContainer,
+      text: materialTheme.colors.onSurface,
+      border: materialTheme.colors.outline,
+      notification: materialTheme.colors.error,
+    },
+  };
+
+  if ('fonts' in theme) {
+    return {
+      ...base,
+      fonts: {
+        regular: {
+          fontFamily: materialTheme.fonts.bodyMedium.fontFamily,
+          fontWeight: materialTheme.fonts.bodyMedium.fontWeight,
+          letterSpacing: materialTheme.fonts.bodyMedium.letterSpacing,
+        },
+        medium: {
+          fontFamily: materialTheme.fonts.titleMedium.fontFamily,
+          fontWeight: materialTheme.fonts.titleMedium.fontWeight,
+          letterSpacing: materialTheme.fonts.titleMedium.letterSpacing,
+        },
+        bold: {
+          fontFamily: materialTheme.fonts.headlineSmall.fontFamily,
+          fontWeight: materialTheme.fonts.headlineSmall.fontWeight,
+          letterSpacing: materialTheme.fonts.headlineSmall.letterSpacing,
+        },
+        heavy: {
+          fontFamily: materialTheme.fonts.headlineLarge.fontFamily,
+          fontWeight: materialTheme.fonts.headlineLarge.fontWeight,
+          letterSpacing: materialTheme.fonts.headlineLarge.letterSpacing,
+        },
+      },
+    };
+  }
+
+  return base;
+};
diff --git a/src/theme/schemes/DarkTheme.tsx b/src/theme/schemes/DarkTheme.tsx
new file mode 100644
index 0000000000..9b7ff60ef4
--- /dev/null
+++ b/src/theme/schemes/DarkTheme.tsx
@@ -0,0 +1,12 @@
+import { themeDefaults } from './base';
+import { tokens } from '../tokens';
+import { buildScheme } from '../tokens/sys/color';
+import { defaultShapes } from '../tokens/sys/shape';
+import type { Theme } from '../types';
+
+export const DarkTheme: Theme = {
+  ...themeDefaults,
+  dark: true,
+  colors: buildScheme(tokens.md.ref.palette, { mode: 'dark' }),
+  shapes: defaultShapes,
+};
diff --git a/src/theme/schemes/DynamicTheme.android.tsx b/src/theme/schemes/DynamicTheme.android.tsx
new file mode 100644
index 0000000000..0fb9c29b0e
--- /dev/null
+++ b/src/theme/schemes/DynamicTheme.android.tsx
@@ -0,0 +1,491 @@
+import { Platform, PlatformColor, type ColorValue } from 'react-native';
+
+import { DarkTheme } from './DarkTheme';
+import { LightTheme } from './LightTheme';
+import { Palette } from '../tokens';
+import type { Theme, ThemeColors } from '../types';
+
+const apiLevel = Platform.OS === 'android' ? Platform.Version : null;
+
+// eslint-disable-next-line @react-native/platform-colors
+const ac = (name: string) => PlatformColor(`@android:color/${name}`);
+
+/**
+ * Picks the correct color value for the current Android API level.
+ * - API 34+: uses the named role resource (system_*_light/dark)
+ * - API 31-33: uses the tonal accent resource (system_accent*_NNN), or ref when null
+ * - API < 31: uses the reference palette value
+ *
+ * Pass `null` as api31 for roles that have no @android:color/ resource on API31-33
+ * (MCL @color/m3_ref_palette_* resources and error roles). Those fall through to ref.
+ * @see https://github.com/material-components/material-components-android/blob/master/docs/theming/Color.md
+ */
+const pick = (api34: string, api31: string | null, ref: string): ColorValue =>
+  apiLevel != null && apiLevel >= 34
+    ? ac(api34)
+    : apiLevel != null && apiLevel >= 31 && api31 !== null
+      ? ac(api31)
+      : ref;
+
+// Known limitation: surface/container roles on API 31-33 use
+// @color/m3_ref_palette_dynamic_neutral_variant* (MCL resources that require a
+// native DynamicColors setup). No @android:color/ equivalent exists for those
+// slots. Reference palette values are used as fallback on API 31-33.
+
+type RoleEntry = {
+  role: keyof ThemeColors;
+  light: [string, string | null, string];
+  dark: [string, string | null, string];
+};
+
+const colorRoleMap: RoleEntry[] = [
+  // Primary family
+  {
+    role: 'primary',
+    light: ['system_primary_light', 'system_accent1_600', Palette.primary40],
+    dark: ['system_primary_dark', 'system_accent1_200', Palette.primary80],
+  },
+  {
+    role: 'onPrimary',
+    light: ['system_on_primary_light', 'system_accent1_0', Palette.primary100],
+    dark: ['system_on_primary_dark', 'system_accent1_800', Palette.primary20],
+  },
+  {
+    role: 'primaryContainer',
+    light: [
+      'system_primary_container_light',
+      'system_accent1_100',
+      Palette.primary90,
+    ],
+    dark: [
+      'system_primary_container_dark',
+      'system_accent1_700',
+      Palette.primary30,
+    ],
+  },
+  {
+    role: 'onPrimaryContainer',
+    light: [
+      'system_on_primary_container_light',
+      'system_accent1_900',
+      Palette.primary10,
+    ],
+    dark: [
+      'system_on_primary_container_dark',
+      'system_accent1_100',
+      Palette.primary90,
+    ],
+  },
+  {
+    role: 'inversePrimary',
+    light: ['system_primary_dark', 'system_accent1_200', Palette.primary80],
+    dark: ['system_primary_light', 'system_accent1_600', Palette.primary40],
+  },
+  // Secondary family
+  {
+    role: 'secondary',
+    light: [
+      'system_secondary_light',
+      'system_accent2_600',
+      Palette.secondary40,
+    ],
+    dark: ['system_secondary_dark', 'system_accent2_200', Palette.secondary80],
+  },
+  {
+    role: 'onSecondary',
+    light: [
+      'system_on_secondary_light',
+      'system_accent2_0',
+      Palette.secondary100,
+    ],
+    dark: [
+      'system_on_secondary_dark',
+      'system_accent2_800',
+      Palette.secondary20,
+    ],
+  },
+  {
+    role: 'secondaryContainer',
+    light: [
+      'system_secondary_container_light',
+      'system_accent2_100',
+      Palette.secondary90,
+    ],
+    dark: [
+      'system_secondary_container_dark',
+      'system_accent2_700',
+      Palette.secondary30,
+    ],
+  },
+  {
+    role: 'onSecondaryContainer',
+    light: [
+      'system_on_secondary_container_light',
+      'system_accent2_900',
+      Palette.secondary10,
+    ],
+    dark: [
+      'system_on_secondary_container_dark',
+      'system_accent2_100',
+      Palette.secondary90,
+    ],
+  },
+  // Tertiary family
+  {
+    role: 'tertiary',
+    light: ['system_tertiary_light', 'system_accent3_600', Palette.tertiary40],
+    dark: ['system_tertiary_dark', 'system_accent3_200', Palette.tertiary80],
+  },
+  {
+    role: 'onTertiary',
+    light: [
+      'system_on_tertiary_light',
+      'system_accent3_0',
+      Palette.tertiary100,
+    ],
+    dark: ['system_on_tertiary_dark', 'system_accent3_800', Palette.tertiary20],
+  },
+  {
+    role: 'tertiaryContainer',
+    light: [
+      'system_tertiary_container_light',
+      'system_accent3_100',
+      Palette.tertiary90,
+    ],
+    dark: [
+      'system_tertiary_container_dark',
+      'system_accent3_700',
+      Palette.tertiary30,
+    ],
+  },
+  {
+    role: 'onTertiaryContainer',
+    light: [
+      'system_on_tertiary_container_light',
+      'system_accent3_900',
+      Palette.tertiary10,
+    ],
+    dark: [
+      'system_on_tertiary_container_dark',
+      'system_accent3_100',
+      Palette.tertiary90,
+    ],
+  },
+  // Error family -- no @android:color/ resource on API31-33; null falls through to ref
+  {
+    role: 'error',
+    light: ['system_error_light', null, Palette.error40],
+    dark: ['system_error_dark', null, Palette.error80],
+  },
+  {
+    role: 'onError',
+    light: ['system_on_error_light', null, Palette.error100],
+    dark: ['system_on_error_dark', null, Palette.error20],
+  },
+  {
+    role: 'errorContainer',
+    light: ['system_error_container_light', null, Palette.error90],
+    dark: ['system_error_container_dark', null, Palette.error30],
+  },
+  {
+    role: 'onErrorContainer',
+    light: ['system_on_error_container_light', null, Palette.error10],
+    dark: ['system_on_error_container_dark', null, Palette.error90],
+  },
+  // Neutral roles
+  {
+    role: 'onSurface',
+    light: [
+      'system_on_surface_light',
+      'system_neutral1_900',
+      Palette.neutral10,
+    ],
+    dark: ['system_on_surface_dark', 'system_neutral1_100', Palette.neutral90],
+  },
+  {
+    role: 'onBackground',
+    light: [
+      'system_on_background_light',
+      'system_neutral1_900',
+      Palette.neutral10,
+    ],
+    dark: [
+      'system_on_background_dark',
+      'system_neutral1_100',
+      Palette.neutral90,
+    ],
+  },
+  {
+    role: 'onSurfaceVariant',
+    light: [
+      'system_on_surface_variant_light',
+      'system_neutral2_700',
+      Palette.neutralVariant30,
+    ],
+    dark: [
+      'system_on_surface_variant_dark',
+      'system_neutral2_200',
+      Palette.neutralVariant80,
+    ],
+  },
+  {
+    role: 'outline',
+    light: [
+      'system_outline_light',
+      'system_neutral2_500',
+      Palette.neutralVariant50,
+    ],
+    dark: [
+      'system_outline_dark',
+      'system_neutral2_400',
+      Palette.neutralVariant60,
+    ],
+  },
+  {
+    role: 'outlineVariant',
+    light: [
+      'system_outline_variant_light',
+      'system_neutral2_200',
+      Palette.neutralVariant80,
+    ],
+    dark: [
+      'system_outline_variant_dark',
+      'system_neutral2_700',
+      Palette.neutralVariant30,
+    ],
+  },
+  {
+    role: 'inverseSurface',
+    light: ['system_surface_dark', 'system_neutral1_800', Palette.neutral20],
+    dark: ['system_surface_light', 'system_neutral1_100', Palette.neutral90],
+  },
+  {
+    role: 'inverseOnSurface',
+    light: ['system_on_surface_dark', 'system_neutral1_50', Palette.neutral95],
+    dark: ['system_on_surface_light', 'system_neutral1_800', Palette.neutral20],
+  },
+  {
+    role: 'surfaceVariant',
+    light: [
+      'system_surface_variant_light',
+      'system_neutral2_100',
+      Palette.neutralVariant90,
+    ],
+    dark: [
+      'system_surface_variant_dark',
+      'system_neutral2_700',
+      Palette.neutralVariant30,
+    ],
+  },
+  // Surface/background family -- API31-33 uses MCL @color/m3_ref_palette_* (not @android:color/); null falls through to ref
+  {
+    role: 'background',
+    light: ['system_background_light', null, Palette.neutral98],
+    dark: ['system_background_dark', null, Palette.neutral6],
+  },
+  {
+    role: 'surface',
+    light: ['system_surface_light', null, Palette.neutral98],
+    dark: ['system_surface_dark', null, Palette.neutral6],
+  },
+  {
+    role: 'surfaceBright',
+    light: ['system_surface_bright_light', null, Palette.neutral98],
+    dark: ['system_surface_bright_dark', null, Palette.neutral24],
+  },
+  {
+    role: 'surfaceDim',
+    light: ['system_surface_dim_light', null, Palette.neutral87],
+    dark: ['system_surface_dim_dark', null, Palette.neutral6],
+  },
+  {
+    role: 'surfaceContainer',
+    light: ['system_surface_container_light', null, Palette.neutral94],
+    dark: ['system_surface_container_dark', null, Palette.neutral12],
+  },
+  {
+    role: 'surfaceContainerLow',
+    light: ['system_surface_container_low_light', null, Palette.neutral96],
+    dark: [
+      'system_surface_container_low_dark',
+      'system_neutral2_900',
+      Palette.neutral10,
+    ],
+  },
+  {
+    role: 'surfaceContainerLowest',
+    light: [
+      'system_surface_container_lowest_light',
+      'system_neutral2_0',
+      Palette.neutral100,
+    ],
+    dark: ['system_surface_container_lowest_dark', null, Palette.neutral4],
+  },
+  {
+    role: 'surfaceContainerHigh',
+    light: ['system_surface_container_high_light', null, Palette.neutral92],
+    dark: ['system_surface_container_high_dark', null, Palette.neutral17],
+  },
+  {
+    role: 'surfaceContainerHighest',
+    light: [
+      'system_surface_container_highest_light',
+      'system_neutral2_100',
+      Palette.neutral90,
+    ],
+    dark: ['system_surface_container_highest_dark', null, Palette.neutral22],
+  },
+  // Fixed roles: same api34/api31 for both light and dark schemes
+  {
+    role: 'primaryFixed',
+    light: ['system_primary_fixed', 'system_accent1_100', Palette.primary90],
+    dark: ['system_primary_fixed', 'system_accent1_100', Palette.primary90],
+  },
+  {
+    role: 'primaryFixedDim',
+    light: [
+      'system_primary_fixed_dim',
+      'system_accent1_200',
+      Palette.primary80,
+    ],
+    dark: ['system_primary_fixed_dim', 'system_accent1_200', Palette.primary80],
+  },
+  {
+    role: 'onPrimaryFixed',
+    light: ['system_on_primary_fixed', 'system_accent1_900', Palette.primary10],
+    dark: ['system_on_primary_fixed', 'system_accent1_900', Palette.primary10],
+  },
+  {
+    role: 'onPrimaryFixedVariant',
+    light: [
+      'system_on_primary_fixed_variant',
+      'system_accent1_700',
+      Palette.primary30,
+    ],
+    dark: [
+      'system_on_primary_fixed_variant',
+      'system_accent1_700',
+      Palette.primary30,
+    ],
+  },
+  {
+    role: 'secondaryFixed',
+    light: [
+      'system_secondary_fixed',
+      'system_accent2_100',
+      Palette.secondary90,
+    ],
+    dark: ['system_secondary_fixed', 'system_accent2_100', Palette.secondary90],
+  },
+  {
+    role: 'secondaryFixedDim',
+    light: [
+      'system_secondary_fixed_dim',
+      'system_accent2_200',
+      Palette.secondary80,
+    ],
+    dark: [
+      'system_secondary_fixed_dim',
+      'system_accent2_200',
+      Palette.secondary80,
+    ],
+  },
+  {
+    role: 'onSecondaryFixed',
+    light: [
+      'system_on_secondary_fixed',
+      'system_accent2_900',
+      Palette.secondary10,
+    ],
+    dark: [
+      'system_on_secondary_fixed',
+      'system_accent2_900',
+      Palette.secondary10,
+    ],
+  },
+  {
+    role: 'onSecondaryFixedVariant',
+    light: [
+      'system_on_secondary_fixed_variant',
+      'system_accent2_700',
+      Palette.secondary30,
+    ],
+    dark: [
+      'system_on_secondary_fixed_variant',
+      'system_accent2_700',
+      Palette.secondary30,
+    ],
+  },
+  {
+    role: 'tertiaryFixed',
+    light: ['system_tertiary_fixed', 'system_accent3_100', Palette.tertiary90],
+    dark: ['system_tertiary_fixed', 'system_accent3_100', Palette.tertiary90],
+  },
+  {
+    role: 'tertiaryFixedDim',
+    light: [
+      'system_tertiary_fixed_dim',
+      'system_accent3_200',
+      Palette.tertiary80,
+    ],
+    dark: [
+      'system_tertiary_fixed_dim',
+      'system_accent3_200',
+      Palette.tertiary80,
+    ],
+  },
+  {
+    role: 'onTertiaryFixed',
+    light: [
+      'system_on_tertiary_fixed',
+      'system_accent3_900',
+      Palette.tertiary10,
+    ],
+    dark: [
+      'system_on_tertiary_fixed',
+      'system_accent3_900',
+      Palette.tertiary10,
+    ],
+  },
+  {
+    role: 'onTertiaryFixedVariant',
+    light: [
+      'system_on_tertiary_fixed_variant',
+      'system_accent3_700',
+      Palette.tertiary30,
+    ],
+    dark: [
+      'system_on_tertiary_fixed_variant',
+      'system_accent3_700',
+      Palette.tertiary30,
+    ],
+  },
+];
+
+function buildDynamicColors(scheme: 'light' | 'dark'): Partial<ThemeColors> {
+  return Object.fromEntries(
+    colorRoleMap.map(({ role, [scheme]: [api34, api31, ref] }) => [
+      role,
+      pick(api34, api31, ref),
+    ])
+  );
+}
+
+export const isDynamicColorSupported = apiLevel != null && apiLevel >= 31;
+
+const lightDynamicColors = isDynamicColorSupported
+  ? buildDynamicColors('light')
+  : undefined;
+const darkDynamicColors = isDynamicColorSupported
+  ? buildDynamicColors('dark')
+  : undefined;
+
+export const DynamicLightTheme: Theme = {
+  ...LightTheme,
+  colors: { ...LightTheme.colors, ...lightDynamicColors },
+};
+
+export const DynamicDarkTheme: Theme = {
+  ...DarkTheme,
+  colors: { ...DarkTheme.colors, ...darkDynamicColors },
+};
diff --git a/src/theme/schemes/DynamicTheme.tsx b/src/theme/schemes/DynamicTheme.tsx
new file mode 100644
index 0000000000..a9049b86bf
--- /dev/null
+++ b/src/theme/schemes/DynamicTheme.tsx
@@ -0,0 +1,4 @@
+export { DarkTheme as DynamicDarkTheme } from './DarkTheme';
+export { LightTheme as DynamicLightTheme } from './LightTheme';
+
+export const isDynamicColorSupported = false;
diff --git a/src/theme/schemes/LightTheme.tsx b/src/theme/schemes/LightTheme.tsx
new file mode 100644
index 0000000000..42593d5d42
--- /dev/null
+++ b/src/theme/schemes/LightTheme.tsx
@@ -0,0 +1,12 @@
+import { themeDefaults } from './base';
+import { tokens } from '../tokens';
+import { buildScheme } from '../tokens/sys/color';
+import { defaultShapes } from '../tokens/sys/shape';
+import type { Theme } from '../types';
+
+export const LightTheme: Theme = {
+  ...themeDefaults,
+  dark: false,
+  colors: buildScheme(tokens.md.ref.palette, { mode: 'light' }),
+  shapes: defaultShapes,
+};
diff --git a/src/theme/schemes/base.ts b/src/theme/schemes/base.ts
new file mode 100644
index 0000000000..180ec1c155
--- /dev/null
+++ b/src/theme/schemes/base.ts
@@ -0,0 +1,17 @@
+import { defaultElevation } from '../tokens/sys/elevation';
+import { expressiveMotion } from '../tokens/sys/motion';
+import { defaultShapes } from '../tokens/sys/shape';
+import { defaultFonts } from '../tokens/sys/typography';
+import type { Theme } from '../types';
+
+type ThemeDefaults = Omit<Theme, 'dark' | 'colors'>;
+
+export const themeDefaults: ThemeDefaults = {
+  animation: {
+    scale: 1.0,
+  },
+  fonts: defaultFonts,
+  shapes: defaultShapes,
+  motion: expressiveMotion,
+  elevation: defaultElevation,
+};
diff --git a/src/theme/schemes/index.ts b/src/theme/schemes/index.ts
new file mode 100644
index 0000000000..37407657e2
--- /dev/null
+++ b/src/theme/schemes/index.ts
@@ -0,0 +1,7 @@
+export { LightTheme } from './LightTheme';
+export { DarkTheme } from './DarkTheme';
+export {
+  DynamicLightTheme,
+  DynamicDarkTheme,
+  isDynamicColorSupported,
+} from './DynamicTheme';
diff --git a/src/theme/tokens/index.ts b/src/theme/tokens/index.ts
new file mode 100644
index 0000000000..3f41b7fec5
--- /dev/null
+++ b/src/theme/tokens/index.ts
@@ -0,0 +1,22 @@
+import { palette } from './ref/palette';
+import { typeface } from './ref/typeface';
+import { state } from './sys/state';
+import { typescale } from './sys/typography';
+
+/** Material Design token tree: md.ref.* (raw values) and md.sys.* (semantic decisions). */
+export const tokens = {
+  md: {
+    ref: {
+      palette,
+      typeface,
+    },
+    sys: {
+      typescale,
+      state: state,
+      scrim: { alpha: 0.32 },
+    },
+  },
+};
+
+export { typescale };
+export const Palette = palette;
diff --git a/src/theme/tokens/ref/palette.ts b/src/theme/tokens/ref/palette.ts
new file mode 100644
index 0000000000..f16b793f66
--- /dev/null
+++ b/src/theme/tokens/ref/palette.ts
@@ -0,0 +1,97 @@
+/** md.ref.palette.* — tonal palette reference tokens. */
+export const palette = {
+  primary100: 'rgba(255, 255, 255, 1)',
+  primary99: 'rgba(255, 251, 254, 1)',
+  primary98: 'rgba(254, 247, 255, 1)',
+  primary95: 'rgba(246, 237, 255, 1)',
+  primary90: 'rgba(234, 221, 255, 1)',
+  primary80: 'rgba(208, 188, 255, 1)',
+  primary70: 'rgba(182, 157, 248, 1)',
+  primary60: 'rgba(154, 130, 219, 1)',
+  primary50: 'rgba(127, 103, 190, 1)',
+  primary40: 'rgba(103, 80, 164, 1)',
+  primary30: 'rgba(79, 55, 139, 1)',
+  primary20: 'rgba(56, 30, 114, 1)',
+  primary10: 'rgba(33, 0, 93, 1)',
+  primary0: 'rgba(0, 0, 0, 1)',
+  secondary100: 'rgba(255, 255, 255, 1)',
+  secondary99: 'rgba(255, 251, 254, 1)',
+  secondary98: 'rgba(254, 247, 255, 1)',
+  secondary95: 'rgba(246, 237, 255, 1)',
+  secondary90: 'rgba(232, 222, 248, 1)',
+  secondary80: 'rgba(204, 194, 220, 1)',
+  secondary70: 'rgba(176, 167, 192, 1)',
+  secondary60: 'rgba(149, 141, 165, 1)',
+  secondary50: 'rgba(122, 114, 137, 1)',
+  secondary40: 'rgba(98, 91, 113, 1)',
+  secondary30: 'rgba(74, 68, 88, 1)',
+  secondary20: 'rgba(51, 45, 65, 1)',
+  secondary10: 'rgba(29, 25, 43, 1)',
+  secondary0: 'rgba(0, 0, 0, 1)',
+  tertiary100: 'rgba(255, 255, 255, 1)',
+  tertiary99: 'rgba(255, 251, 250, 1)',
+  tertiary98: 'rgba(255, 248, 248, 1)',
+  tertiary95: 'rgba(255, 236, 241, 1)',
+  tertiary90: 'rgba(255, 216, 228, 1)',
+  tertiary80: 'rgba(239, 184, 200, 1)',
+  tertiary70: 'rgba(210, 157, 172, 1)',
+  tertiary60: 'rgba(181, 131, 146, 1)',
+  tertiary50: 'rgba(152, 105, 119, 1)',
+  tertiary40: 'rgba(125, 82, 96, 1)',
+  tertiary30: 'rgba(99, 59, 72, 1)',
+  tertiary20: 'rgba(73, 37, 50, 1)',
+  tertiary10: 'rgba(49, 17, 29, 1)',
+  tertiary0: 'rgba(0, 0, 0, 1)',
+  neutral100: 'rgba(255, 255, 255, 1)',
+  neutral99: 'rgba(255, 251, 255, 1)',
+  neutral98: 'rgba(254, 247, 255, 1)',
+  neutral96: 'rgba(247, 242, 250, 1)',
+  neutral95: 'rgba(245, 239, 247, 1)',
+  neutral94: 'rgba(243, 237, 247, 1)',
+  neutral92: 'rgba(236, 230, 240, 1)',
+  neutral90: 'rgba(230, 224, 233, 1)',
+  neutral87: 'rgba(222, 216, 225, 1)',
+  neutral80: 'rgba(202, 197, 205, 1)',
+  neutral70: 'rgba(174, 169, 177, 1)',
+  neutral60: 'rgba(147, 143, 150, 1)',
+  neutral50: 'rgba(121, 118, 125, 1)',
+  neutral40: 'rgba(96, 93, 100, 1)',
+  neutral30: 'rgba(72, 70, 76, 1)',
+  neutral24: 'rgba(59, 56, 62, 1)',
+  neutral22: 'rgba(54, 52, 59, 1)',
+  neutral20: 'rgba(50, 47, 53, 1)',
+  neutral17: 'rgba(43, 41, 48, 1)',
+  neutral12: 'rgba(33, 31, 38, 1)',
+  neutral10: 'rgba(29, 27, 32, 1)',
+  neutral6: 'rgba(20, 18, 24, 1)',
+  neutral4: 'rgba(15, 13, 19, 1)',
+  neutral0: 'rgba(0, 0, 0, 1)',
+  neutralVariant100: 'rgba(255, 255, 255, 1)',
+  neutralVariant99: 'rgba(255, 251, 254, 1)',
+  neutralVariant98: 'rgba(253, 247, 255, 1)',
+  neutralVariant95: 'rgba(245, 238, 250, 1)',
+  neutralVariant90: 'rgba(231, 224, 236, 1)',
+  neutralVariant80: 'rgba(202, 196, 208, 1)',
+  neutralVariant70: 'rgba(174, 169, 180, 1)',
+  neutralVariant60: 'rgba(147, 143, 153, 1)',
+  neutralVariant50: 'rgba(121, 116, 126, 1)',
+  neutralVariant40: 'rgba(96, 93, 102, 1)',
+  neutralVariant30: 'rgba(73, 69, 79, 1)',
+  neutralVariant20: 'rgba(50, 47, 55, 1)',
+  neutralVariant10: 'rgba(29, 26, 34, 1)',
+  neutralVariant0: 'rgba(0, 0, 0, 1)',
+  error100: 'rgba(255, 255, 255, 1)',
+  error99: 'rgba(255, 251, 249, 1)',
+  error98: 'rgba(255, 248, 247, 1)',
+  error95: 'rgba(252, 238, 238, 1)',
+  error90: 'rgba(249, 222, 220, 1)',
+  error80: 'rgba(242, 184, 181, 1)',
+  error70: 'rgba(236, 146, 142, 1)',
+  error60: 'rgba(228, 105, 98, 1)',
+  error50: 'rgba(220, 54, 46, 1)',
+  error40: 'rgba(179, 38, 30, 1)',
+  error30: 'rgba(140, 29, 24, 1)',
+  error20: 'rgba(96, 20, 16, 1)',
+  error10: 'rgba(65, 14, 11, 1)',
+  error0: 'rgba(0, 0, 0, 1)',
+} as const;
diff --git a/src/theme/tokens/ref/typeface.ts b/src/theme/tokens/ref/typeface.ts
new file mode 100644
index 0000000000..f62389b09b
--- /dev/null
+++ b/src/theme/tokens/ref/typeface.ts
@@ -0,0 +1,40 @@
+import { Platform } from 'react-native';
+
+import type { Font } from '../../types';
+
+/** md.ref.typeface.* — font families and weights. */
+export const typeface = {
+  brandRegular: Platform.select({
+    web: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+    ios: 'System',
+    default: 'sans-serif',
+  }),
+  brandMedium: Platform.select({
+    web: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+    ios: 'System',
+    default: 'sans-serif-medium',
+  }),
+  weightRegular: '400',
+
+  plainRegular: Platform.select({
+    web: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+    ios: 'System',
+    default: 'sans-serif',
+  }),
+  plainMedium: Platform.select({
+    web: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+    ios: 'System',
+    default: 'sans-serif-medium',
+  }),
+  weightMedium: '500',
+
+  weightBold: '700',
+} satisfies {
+  brandRegular?: string;
+  brandMedium?: string;
+  weightRegular: Font['fontWeight'];
+  plainRegular?: string;
+  plainMedium?: string;
+  weightMedium: Font['fontWeight'];
+  weightBold: Font['fontWeight'];
+};
diff --git a/src/theme/tokens/sys/color.ts b/src/theme/tokens/sys/color.ts
new file mode 100644
index 0000000000..a6c22ca0fb
--- /dev/null
+++ b/src/theme/tokens/sys/color.ts
@@ -0,0 +1,177 @@
+import color from 'color';
+
+import { state } from './state';
+import type { ElevationColors, ThemeColors } from '../../types';
+import { palette as defaultPalette } from '../ref/palette';
+
+type Palette = typeof defaultPalette;
+type PaletteKey = keyof Palette;
+
+/** Roles that map 1:1 to a palette key. Excludes the computed fields. */
+type MappedRoles = Omit<ThemeColors, 'stateLayerPressed' | 'elevation'>;
+
+type Contrast = 'standard'; // extend with 'medium' | 'high' when those ship
+
+const roleToTone: Record<
+  'light' | 'dark',
+  Record<Contrast, Record<keyof MappedRoles, PaletteKey>>
+> = {
+  light: {
+    standard: {
+      primary: 'primary40',
+      onPrimary: 'primary100',
+      primaryContainer: 'primary90',
+      onPrimaryContainer: 'primary10',
+      secondary: 'secondary40',
+      onSecondary: 'secondary100',
+      secondaryContainer: 'secondary90',
+      onSecondaryContainer: 'secondary10',
+      tertiary: 'tertiary40',
+      onTertiary: 'tertiary100',
+      tertiaryContainer: 'tertiary90',
+      onTertiaryContainer: 'tertiary10',
+      error: 'error40',
+      onError: 'error100',
+      errorContainer: 'error90',
+      onErrorContainer: 'error10',
+      surface: 'neutral98',
+      surfaceDim: 'neutral87',
+      surfaceBright: 'neutral98',
+      surfaceContainerLowest: 'neutral100',
+      surfaceContainerLow: 'neutral96',
+      surfaceContainer: 'neutral94',
+      surfaceContainerHigh: 'neutral92',
+      surfaceContainerHighest: 'neutral90',
+      surfaceVariant: 'neutralVariant90',
+      background: 'neutral98',
+      onSurface: 'neutral10',
+      onSurfaceVariant: 'neutralVariant30',
+      onBackground: 'neutral10',
+      outline: 'neutralVariant50',
+      outlineVariant: 'neutralVariant80',
+      inverseSurface: 'neutral20',
+      inverseOnSurface: 'neutral95',
+      inversePrimary: 'primary80',
+      primaryFixed: 'primary90',
+      primaryFixedDim: 'primary80',
+      onPrimaryFixed: 'primary10',
+      onPrimaryFixedVariant: 'primary30',
+      secondaryFixed: 'secondary90',
+      secondaryFixedDim: 'secondary80',
+      onSecondaryFixed: 'secondary10',
+      onSecondaryFixedVariant: 'secondary30',
+      tertiaryFixed: 'tertiary90',
+      tertiaryFixedDim: 'tertiary80',
+      onTertiaryFixed: 'tertiary10',
+      onTertiaryFixedVariant: 'tertiary30',
+      shadow: 'neutral0',
+      scrim: 'neutral0',
+    },
+  },
+  dark: {
+    standard: {
+      primary: 'primary80',
+      onPrimary: 'primary20',
+      primaryContainer: 'primary30',
+      onPrimaryContainer: 'primary90',
+      secondary: 'secondary80',
+      onSecondary: 'secondary20',
+      secondaryContainer: 'secondary30',
+      onSecondaryContainer: 'secondary90',
+      tertiary: 'tertiary80',
+      onTertiary: 'tertiary20',
+      tertiaryContainer: 'tertiary30',
+      onTertiaryContainer: 'tertiary90',
+      error: 'error80',
+      onError: 'error20',
+      errorContainer: 'error30',
+      onErrorContainer: 'error80',
+      surface: 'neutral6',
+      surfaceDim: 'neutral6',
+      surfaceBright: 'neutral24',
+      surfaceContainerLowest: 'neutral4',
+      surfaceContainerLow: 'neutral10',
+      surfaceContainer: 'neutral12',
+      surfaceContainerHigh: 'neutral17',
+      surfaceContainerHighest: 'neutral22',
+      surfaceVariant: 'neutralVariant30',
+      background: 'neutral6',
+      onSurface: 'neutral90',
+      onSurfaceVariant: 'neutralVariant80',
+      onBackground: 'neutral90',
+      outline: 'neutralVariant60',
+      outlineVariant: 'neutralVariant30',
+      inverseSurface: 'neutral90',
+      inverseOnSurface: 'neutral20',
+      inversePrimary: 'primary40',
+      primaryFixed: 'primary90',
+      primaryFixedDim: 'primary80',
+      onPrimaryFixed: 'primary10',
+      onPrimaryFixedVariant: 'primary30',
+      secondaryFixed: 'secondary90',
+      secondaryFixedDim: 'secondary80',
+      onSecondaryFixed: 'secondary10',
+      onSecondaryFixedVariant: 'secondary30',
+      tertiaryFixed: 'tertiary90',
+      tertiaryFixedDim: 'tertiary80',
+      onTertiaryFixed: 'tertiary10',
+      onTertiaryFixedVariant: 'tertiary30',
+      shadow: 'neutral0',
+      scrim: 'neutral0',
+    },
+  },
+};
+
+const elevationToTone: Record<
+  'light' | 'dark',
+  Record<Contrast, Record<Exclude<keyof ElevationColors, 'level0'>, PaletteKey>>
+> = {
+  light: {
+    standard: {
+      level1: 'neutral96',
+      level2: 'neutral94',
+      level3: 'neutral92',
+      level4: 'neutral92',
+      level5: 'neutral90',
+    },
+  },
+  dark: {
+    standard: {
+      level1: 'neutral10',
+      level2: 'neutral12',
+      level3: 'neutral17',
+      level4: 'neutral17',
+      level5: 'neutral22',
+    },
+  },
+};
+
+export function buildScheme(
+  palette: Palette,
+  opts: { mode: 'light' | 'dark'; contrast?: Contrast }
+): ThemeColors {
+  const contrast = opts.contrast ?? 'standard';
+  const tones = roleToTone[opts.mode][contrast];
+  const elevTones = elevationToTone[opts.mode][contrast];
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+  const mapped = Object.fromEntries(
+    Object.entries(tones).map(([role, tone]) => [role, palette[tone]])
+  ) as MappedRoles;
+
+  return {
+    ...mapped,
+    stateLayerPressed: color(palette[tones.onSurface])
+      .alpha(state.opacity.pressed)
+      .rgb()
+      .string(),
+    elevation: {
+      level0: 'transparent',
+      level1: palette[elevTones.level1],
+      level2: palette[elevTones.level2],
+      level3: palette[elevTones.level3],
+      level4: palette[elevTones.level4],
+      level5: palette[elevTones.level5],
+    },
+  };
+}
diff --git a/src/theme/tokens/sys/elevation.ts b/src/theme/tokens/sys/elevation.ts
new file mode 100644
index 0000000000..9a1181ecbe
--- /dev/null
+++ b/src/theme/tokens/sys/elevation.ts
@@ -0,0 +1,162 @@
+// M3 elevation tokens and shadow builder per spec:
+// https://m3.material.io/styles/elevation/tokens
+
+import { Platform, type ColorValue, type ViewStyle } from 'react-native';
+
+import color from 'color';
+
+import type { ThemeElevation } from '../../types';
+
+export const defaultElevation: ThemeElevation = {
+  level0: 0,
+  level1: 1,
+  level2: 2,
+  level3: 3,
+  level4: 4,
+  level5: 5,
+};
+
+export const androidElevationLevels = [0, 1, 3, 6, 8, 12];
+
+/**
+ * Android draws two shadows for an elevated view:
+ * - Spot shadow cast by a light source above the top edge of the window
+ * - Ambient shadow centered on the view
+ *
+ * The shadow is dynamic based on how far the view is from the light source.
+ * But we can't express this dynamic value in a static shadow.
+ *
+ * So we use an approximation assuming:
+ * - Light is at the platform's default height and radius
+ * - Screen is the size of a phone, 400dp wide and 800dp tall
+ * - View is halfway down the window, and centered horizontally
+ */
+
+// https://android.googlesource.com/platform/frameworks/base/+/refs/heads/main/core/res/res/values/dimens.xml#752
+const LIGHT_Z = 500;
+const LIGHT_RADIUS = 800;
+const SPOT_SHADOW_ALPHA = 0.19;
+const AMBIENT_SHADOW_ALPHA = 0.039;
+
+// https://skia.googlesource.com/skia/+/refs/heads/main/src/core/SkDrawShadowInfo.h#51
+const AMBIENT_HEIGHT_FACTOR = 1 / 128;
+const AMBIENT_GEOM_FACTOR = 64;
+
+// Approximate blur based on how Skia draws the shadow
+// https://skia.googlesource.com/skia/+/refs/heads/main/src/opts/SkRasterPipeline_opts.h#5326
+const SOFT_EDGE_BLUR_FACTOR = 0.94;
+const SOFT_EDGE_OFFSET_FACTOR = 0.17;
+
+// Since we can't express the dynamic shadow statically
+// We use these device dimensions to calculate as an approximation
+const WINDOW_WIDTH = 400;
+const WINDOW_HEIGHT = 800;
+
+// https://android.googlesource.com/platform/frameworks/base/+/refs/heads/main/core/java/android/view/ThreadedRenderer.java#602
+const LIGHT_HEIGHT = LIGHT_Z * ((WINDOW_WIDTH / 450 + 2) / 3);
+
+// Sub-pixel precision is enough for a shadow, and keeps the values readable.
+const round = (value: number) => Math.round(value * 100) / 100;
+
+// How far the view has moved towards the light
+// This controls the height and softness of the shadow
+const getLightRatio = (dp: number) => dp / (LIGHT_HEIGHT - dp);
+
+// How wide the shadow fades out over
+// A larger light casts a softer shadow
+const getSoftEdge = (dp: number) => getLightRatio(dp) * LIGHT_RADIUS;
+
+const spotBlurRadius = androidElevationLevels.map((dp) =>
+  round(getSoftEdge(dp) * SOFT_EDGE_BLUR_FACTOR)
+);
+
+// Android's ambient shadow starts dark at the view’s edge and fades outward.
+// A regular blur is already half faded at that edge because half of it is hidden behind the view.
+// Using the same fade distance gives both shadows a similar size, but our shadow starts lighter.
+// https://skia.googlesource.com/skia/+/refs/heads/main/src/utils/SkShadowTessellator.cpp#923
+const ambientBlurRadius = androidElevationLevels.map((dp) =>
+  round(dp * AMBIENT_HEIGHT_FACTOR * AMBIENT_GEOM_FACTOR)
+);
+
+// On iOS, we need to use half the blur radius to draw the approximately same blur in `shadowRadius`
+// https://github.com/react/react-native/blob/main/packages/react-native/React/Fabric/Utils/RCTBoxShadow.mm#L64-L67
+const IOS_SHADOW_RADIUS_FACTOR = 0.5;
+
+const getShadowRadius = (blurRadius: number[]) =>
+  blurRadius.map((radius) => round(radius * IOS_SHADOW_RADIUS_FACTOR));
+
+const shadowLayers = [
+  {
+    height: androidElevationLevels.map((dp) =>
+      round(
+        getLightRatio(dp) * (WINDOW_HEIGHT / 2) -
+          getSoftEdge(dp) * SOFT_EDGE_OFFSET_FACTOR
+      )
+    ),
+    blurRadius: spotBlurRadius,
+    shadowOpacity: SPOT_SHADOW_ALPHA,
+    shadowRadius: getShadowRadius(spotBlurRadius),
+  },
+  {
+    height: androidElevationLevels.map(() => 0),
+    blurRadius: ambientBlurRadius,
+    shadowOpacity: AMBIENT_SHADOW_ALPHA,
+    shadowRadius: getShadowRadius(ambientBlurRadius),
+  },
+];
+
+type NativeShadowStyle = {
+  shadowColor: ColorValue;
+  shadowOpacity: number;
+  shadowOffset: {
+    width: number;
+    height: number;
+  };
+  shadowRadius: number;
+};
+
+type ShadowStyle =
+  | NativeShadowStyle
+  | { boxShadow: NonNullable<ViewStyle['boxShadow']> };
+
+export function shadow(
+  elevation: number,
+  shadowColor: ColorValue
+): [ShadowStyle, NativeShadowStyle | undefined] {
+  if (Platform.OS === 'web') {
+    if (typeof shadowColor !== 'string') {
+      throw new Error(
+        `Expected a string shadow color on Web, but received a ${typeof shadowColor}.`
+      );
+    }
+
+    return [
+      {
+        boxShadow: shadowLayers
+          .map(
+            (layer) =>
+              `0px ${layer.height[elevation]}px ${layer.blurRadius[elevation]}px ${color(
+                shadowColor
+              )
+                .alpha(layer.shadowOpacity)
+                .rgb()
+                .string()}`
+          )
+          .join(', '),
+      },
+      undefined,
+    ];
+  }
+
+  const [spotShadow, ambientShadow] = shadowLayers.map((layer) => ({
+    shadowColor,
+    shadowOpacity: elevation ? layer.shadowOpacity : 0,
+    shadowOffset: {
+      width: 0,
+      height: layer.height[elevation],
+    },
+    shadowRadius: layer.shadowRadius[elevation],
+  }));
+
+  return [spotShadow, ambientShadow];
+}
diff --git a/src/theme/tokens/sys/motion.ts b/src/theme/tokens/sys/motion.ts
new file mode 100644
index 0000000000..878d63e0e9
--- /dev/null
+++ b/src/theme/tokens/sys/motion.ts
@@ -0,0 +1,113 @@
+import type {
+  MotionConfig,
+  MotionDuration,
+  MotionEasing,
+  RawSpring,
+  SpringConfig,
+} from '../../types';
+
+// Spring, easing curves and duration constants per the M3 spec:
+// https://m3.material.io/styles/motion/easing-and-duration/tokens-specs
+
+const expressiveSpring = {
+  spring: {
+    fast: {
+      spatial: { stiffness: 800, damping: 0.6 },
+      effects: { stiffness: 3800, damping: 1 },
+    },
+    default: {
+      spatial: { stiffness: 380, damping: 0.8 },
+      effects: { stiffness: 1600, damping: 1 },
+    },
+    slow: {
+      spatial: { stiffness: 200, damping: 0.8 },
+      effects: { stiffness: 800, damping: 1 },
+    },
+  },
+};
+
+const standardSpring = {
+  spring: {
+    fast: {
+      spatial: { stiffness: 1400, damping: 0.9 },
+      effects: { stiffness: 3800, damping: 1 },
+    },
+    default: {
+      spatial: { stiffness: 700, damping: 0.9 },
+      effects: { stiffness: 1600, damping: 1 },
+    },
+    slow: {
+      spatial: { stiffness: 300, damping: 0.9 },
+      effects: { stiffness: 800, damping: 1 },
+    },
+  },
+};
+
+export const motionEasing: MotionEasing = {
+  emphasized: [0.2, 0, 0, 1],
+  emphasizedAccelerate: [0.3, 0, 0.8, 0.15],
+  emphasizedDecelerate: [0.05, 0.7, 0.1, 1],
+  standard: [0.2, 0, 0, 1],
+  standardAccelerate: [0.3, 0, 1, 1],
+  standardDecelerate: [0, 0, 0, 1],
+  linear: [0, 0, 1, 1],
+};
+
+export const motionDuration: MotionDuration = {
+  short1: 50,
+  short2: 100,
+  short3: 150,
+  short4: 200,
+  medium1: 250,
+  medium2: 300,
+  medium3: 350,
+  medium4: 400,
+  long1: 450,
+  long2: 500,
+  long3: 550,
+  long4: 600,
+  extraLong1: 700,
+  extraLong2: 800,
+  extraLong3: 900,
+  extraLong4: 1000,
+};
+
+export const expressiveMotion: MotionConfig = {
+  ...expressiveSpring,
+  easing: motionEasing,
+  duration: motionDuration,
+};
+
+export const standardMotion: MotionConfig = {
+  ...standardSpring,
+  easing: motionEasing,
+  duration: motionDuration,
+};
+
+/**
+ * Converts a `SpringConfig` (spec damping ratio 0–1) to the raw damping
+ * coefficient expected by `Animated.spring` and Reanimated's `withSpring`.
+ *
+ * @example
+ * Animated.spring(value, {
+ *   toValue: 0.85,
+ *   ...toRawSpring(theme.motion.spring.fast.spatial),
+ *   useNativeDriver: true,
+ * });
+ *
+ * // Reanimated
+ * sharedValue.value = withSpring(
+ *   target,
+ *   toRawSpring(theme.motion.spring.fast.spatial)
+ * );
+ */
+export function toRawSpring({
+  stiffness,
+  damping: ratio,
+}: SpringConfig): RawSpring {
+  return {
+    stiffness,
+    damping: ratio * 2 * Math.sqrt(stiffness),
+    mass: 1, // as per MD specs
+  };
+}
diff --git a/src/theme/tokens/sys/shape.ts b/src/theme/tokens/sys/shape.ts
new file mode 100644
index 0000000000..6610004481
--- /dev/null
+++ b/src/theme/tokens/sys/shape.ts
@@ -0,0 +1,17 @@
+import type { ThemeShapes } from '../../types';
+
+export const cornerNone = 0;
+export const cornerFull = 9999;
+
+export const defaultShapes: ThemeShapes = {
+  corner: {
+    extraSmall: 4,
+    small: 8,
+    medium: 12,
+    large: 16,
+    largeIncreased: 20,
+    extraLarge: 28,
+    extraLargeIncreased: 32,
+    extraExtraLarge: 48,
+  },
+};
diff --git a/src/theme/tokens/sys/state.ts b/src/theme/tokens/sys/state.ts
new file mode 100644
index 0000000000..d0742351bf
--- /dev/null
+++ b/src/theme/tokens/sys/state.ts
@@ -0,0 +1,18 @@
+/**
+ * md.sys.state.* — interaction-state system tokens.
+ * @see https://m3.material.io/foundations/interaction/states/state-layers
+ */
+export const state = {
+  opacity: {
+    dragged: 0.16,
+    pressed: 0.1,
+    focused: 0.1,
+    hovered: 0.08,
+    disabled: 0.38,
+    enabled: 1.0,
+  },
+  focusIndicator: {
+    thickness: 3,
+    outerOffset: 2,
+  },
+} as const;
diff --git a/src/theme/tokens/sys/typography.ts b/src/theme/tokens/sys/typography.ts
new file mode 100644
index 0000000000..90b1a86aba
--- /dev/null
+++ b/src/theme/tokens/sys/typography.ts
@@ -0,0 +1,224 @@
+import type { Typescale } from '../../types';
+import { typeface } from '../ref/typeface';
+
+const brandRegularType = {
+  fontFamily: typeface.brandRegular,
+  letterSpacing: 0,
+  fontWeight: typeface.weightRegular,
+};
+
+const brandMediumType = {
+  fontFamily: typeface.brandMedium,
+  letterSpacing: 0,
+  fontWeight: typeface.weightMedium,
+};
+
+const plainRegularType = {
+  fontFamily: typeface.plainRegular,
+  letterSpacing: 0,
+  fontWeight: typeface.weightRegular,
+};
+
+const plainMediumType = {
+  fontFamily: typeface.plainMedium,
+  letterSpacing: 0.15,
+  fontWeight: typeface.weightMedium,
+};
+
+const plainMediumEmphasizedType = {
+  fontFamily: typeface.plainMedium,
+  letterSpacing: 0,
+  fontWeight: typeface.weightMedium,
+};
+
+const plainBoldType = {
+  fontFamily: typeface.plainRegular,
+  letterSpacing: 0,
+  fontWeight: typeface.weightBold,
+};
+
+/** md.sys.typescale.* */
+export const typescale = {
+  displayLarge: {
+    ...brandRegularType,
+    letterSpacing: -0.25,
+    lineHeight: 64,
+    fontSize: 57,
+  },
+  displayMedium: {
+    ...brandRegularType,
+    lineHeight: 52,
+    fontSize: 45,
+  },
+  displaySmall: {
+    ...brandRegularType,
+    lineHeight: 44,
+    fontSize: 36,
+  },
+
+  headlineLarge: {
+    ...brandRegularType,
+    lineHeight: 40,
+    fontSize: 32,
+  },
+  headlineMedium: {
+    ...brandRegularType,
+    lineHeight: 36,
+    fontSize: 28,
+  },
+  headlineSmall: {
+    ...brandRegularType,
+    lineHeight: 32,
+    fontSize: 24,
+  },
+
+  titleLarge: {
+    ...brandRegularType,
+    lineHeight: 28,
+    fontSize: 22,
+  },
+  titleMedium: {
+    ...plainMediumType,
+    lineHeight: 24,
+    fontSize: 16,
+  },
+  titleSmall: {
+    ...plainMediumType,
+    letterSpacing: 0.1,
+    lineHeight: 20,
+    fontSize: 14,
+  },
+
+  labelLarge: {
+    ...plainMediumType,
+    letterSpacing: 0.1,
+    lineHeight: 20,
+    fontSize: 14,
+  },
+  labelMedium: {
+    ...plainMediumType,
+    letterSpacing: 0.5,
+    lineHeight: 16,
+    fontSize: 12,
+  },
+  labelSmall: {
+    ...plainMediumType,
+    letterSpacing: 0.5,
+    lineHeight: 16,
+    fontSize: 11,
+  },
+
+  bodyLarge: {
+    ...plainRegularType,
+    letterSpacing: 0.5,
+    lineHeight: 24,
+    fontSize: 16,
+  },
+  bodyMedium: {
+    ...plainRegularType,
+    letterSpacing: 0.25,
+    lineHeight: 20,
+    fontSize: 14,
+  },
+  bodySmall: {
+    ...plainRegularType,
+    letterSpacing: 0.4,
+    lineHeight: 16,
+    fontSize: 12,
+  },
+
+  displayLargeEmphasized: {
+    ...brandMediumType,
+    letterSpacing: -0.25,
+    lineHeight: 64,
+    fontSize: 57,
+  },
+  displayMediumEmphasized: {
+    ...brandMediumType,
+    lineHeight: 52,
+    fontSize: 45,
+  },
+  displaySmallEmphasized: {
+    ...brandMediumType,
+    lineHeight: 44,
+    fontSize: 36,
+  },
+
+  headlineLargeEmphasized: {
+    ...brandMediumType,
+    lineHeight: 40,
+    fontSize: 32,
+  },
+  headlineMediumEmphasized: {
+    ...brandMediumType,
+    lineHeight: 36,
+    fontSize: 28,
+  },
+  headlineSmallEmphasized: {
+    ...brandMediumType,
+    lineHeight: 32,
+    fontSize: 24,
+  },
+
+  titleLargeEmphasized: {
+    ...brandMediumType,
+    lineHeight: 28,
+    fontSize: 22,
+  },
+  titleMediumEmphasized: {
+    ...plainBoldType,
+    letterSpacing: 0.15,
+    lineHeight: 24,
+    fontSize: 16,
+  },
+  titleSmallEmphasized: {
+    ...plainBoldType,
+    letterSpacing: 0.1,
+    lineHeight: 20,
+    fontSize: 14,
+  },
+
+  labelLargeEmphasized: {
+    ...plainBoldType,
+    letterSpacing: 0.1,
+    lineHeight: 20,
+    fontSize: 14,
+  },
+  labelMediumEmphasized: {
+    ...plainBoldType,
+    letterSpacing: 0.5,
+    lineHeight: 16,
+    fontSize: 12,
+  },
+  labelSmallEmphasized: {
+    ...plainBoldType,
+    letterSpacing: 0.5,
+    lineHeight: 16,
+    fontSize: 11,
+  },
+
+  bodyLargeEmphasized: {
+    ...plainMediumEmphasizedType,
+    letterSpacing: 0.5,
+    lineHeight: 24,
+    fontSize: 16,
+  },
+  bodyMediumEmphasized: {
+    ...plainMediumEmphasizedType,
+    letterSpacing: 0.25,
+    lineHeight: 20,
+    fontSize: 14,
+  },
+  bodySmallEmphasized: {
+    ...plainMediumEmphasizedType,
+    letterSpacing: 0.4,
+    lineHeight: 16,
+    fontSize: 12,
+  },
+
+  default: {
+    ...brandRegularType,
+  },
+};
+
+export const defaultFonts: Typescale = typescale;
diff --git a/src/theme/types/color.ts b/src/theme/types/color.ts
new file mode 100644
index 0000000000..84879a36ec
--- /dev/null
+++ b/src/theme/types/color.ts
@@ -0,0 +1,65 @@
+import type { ColorValue } from 'react-native';
+
+import type { ElevationColors } from './elevation';
+
+export type ColorRole = {
+  [K in keyof ThemeColors]: ThemeColors[K] extends ColorValue ? K : never;
+}[keyof ThemeColors];
+
+export type ThemeColors = {
+  primary: ColorValue;
+  primaryContainer: ColorValue;
+  secondary: ColorValue;
+  secondaryContainer: ColorValue;
+  tertiary: ColorValue;
+  tertiaryContainer: ColorValue;
+  surface: ColorValue;
+  surfaceDim: ColorValue;
+  surfaceBright: ColorValue;
+  surfaceContainerLowest: ColorValue;
+  surfaceContainerLow: ColorValue;
+  surfaceContainer: ColorValue;
+  surfaceContainerHigh: ColorValue;
+  surfaceContainerHighest: ColorValue;
+  surfaceVariant: ColorValue;
+  background: ColorValue;
+  error: ColorValue;
+  errorContainer: ColorValue;
+  onPrimary: ColorValue;
+  onPrimaryContainer: ColorValue;
+  onSecondary: ColorValue;
+  onSecondaryContainer: ColorValue;
+  onTertiary: ColorValue;
+  onTertiaryContainer: ColorValue;
+  onSurface: ColorValue;
+  onSurfaceVariant: ColorValue;
+  onError: ColorValue;
+  onErrorContainer: ColorValue;
+  onBackground: ColorValue;
+  outline: ColorValue;
+  outlineVariant: ColorValue;
+  inverseSurface: ColorValue;
+  inverseOnSurface: ColorValue;
+  inversePrimary: ColorValue;
+  primaryFixed: ColorValue;
+  primaryFixedDim: ColorValue;
+  onPrimaryFixed: ColorValue;
+  onPrimaryFixedVariant: ColorValue;
+  secondaryFixed: ColorValue;
+  secondaryFixedDim: ColorValue;
+  onSecondaryFixed: ColorValue;
+  onSecondaryFixedVariant: ColorValue;
+  tertiaryFixed: ColorValue;
+  tertiaryFixedDim: ColorValue;
+  onTertiaryFixed: ColorValue;
+  onTertiaryFixedVariant: ColorValue;
+  shadow: ColorValue;
+  scrim: ColorValue;
+  /** Pre-computed state layer color at press opacity (0.10).
+   *  Used for ripple effects. Avoids runtime alpha manipulation
+   *  which is incompatible with PlatformColor on Android.
+   *  TODO: revisit after https://github.com/facebook/react-native/pull/56395
+   *  @see https://m3.material.io/foundations/interaction/states/state-layers */
+  stateLayerPressed: ColorValue;
+  elevation: ElevationColors;
+};
diff --git a/src/theme/types/elevation.ts b/src/theme/types/elevation.ts
new file mode 100644
index 0000000000..8f531e0806
--- /dev/null
+++ b/src/theme/types/elevation.ts
@@ -0,0 +1,7 @@
+export type Elevation = 0 | 1 | 2 | 3 | 4 | 5;
+
+export type ElevationLevel = `level${Elevation}`;
+
+export type ElevationColors = Record<ElevationLevel, string>;
+
+export type ThemeElevation = Record<ElevationLevel, Elevation>;
diff --git a/src/theme/types/index.ts b/src/theme/types/index.ts
new file mode 100644
index 0000000000..b45fea45d5
--- /dev/null
+++ b/src/theme/types/index.ts
@@ -0,0 +1,8 @@
+export * from './color';
+export * from './elevation';
+export * from './motion';
+export * from './navigation';
+export * from './shape';
+export * from './state';
+export * from './theme';
+export * from './typography';
diff --git a/src/theme/types/motion.ts b/src/theme/types/motion.ts
new file mode 100644
index 0000000000..f744e93d08
--- /dev/null
+++ b/src/theme/types/motion.ts
@@ -0,0 +1,53 @@
+export type SpringConfig = {
+  stiffness: number;
+  damping: number; // damping ratio 0–1; matches md.sys.motion.spring.*.*.damping
+};
+
+export type MotionSpring = {
+  fast: { spatial: SpringConfig; effects: SpringConfig };
+  default: { spatial: SpringConfig; effects: SpringConfig };
+  slow: { spatial: SpringConfig; effects: SpringConfig };
+};
+
+export type EasingConfig = readonly [number, number, number, number];
+
+export type MotionEasing = {
+  emphasized: EasingConfig;
+  emphasizedAccelerate: EasingConfig;
+  emphasizedDecelerate: EasingConfig;
+  standard: EasingConfig;
+  standardAccelerate: EasingConfig;
+  standardDecelerate: EasingConfig;
+  linear: EasingConfig;
+};
+
+export type MotionDuration = {
+  short1: number;
+  short2: number;
+  short3: number;
+  short4: number;
+  medium1: number;
+  medium2: number;
+  medium3: number;
+  medium4: number;
+  long1: number;
+  long2: number;
+  long3: number;
+  long4: number;
+  extraLong1: number;
+  extraLong2: number;
+  extraLong3: number;
+  extraLong4: number;
+};
+
+export type MotionConfig = {
+  spring: MotionSpring;
+  easing: MotionEasing;
+  duration: MotionDuration;
+};
+
+export type RawSpring = {
+  stiffness: number;
+  damping: number;
+  mass: number;
+};
diff --git a/src/theme/types/navigation.ts b/src/theme/types/navigation.ts
new file mode 100644
index 0000000000..51d4a6f763
--- /dev/null
+++ b/src/theme/types/navigation.ts
@@ -0,0 +1,11 @@
+export type NavigationTheme = {
+  dark: boolean;
+  colors: {
+    primary: string;
+    background: string;
+    card: string;
+    text: string;
+    border: string;
+    notification: string;
+  };
+};
diff --git a/src/theme/types/shape.ts b/src/theme/types/shape.ts
new file mode 100644
index 0000000000..78d16d2285
--- /dev/null
+++ b/src/theme/types/shape.ts
@@ -0,0 +1,14 @@
+export type ThemeShapeCorners = {
+  extraSmall: number;
+  small: number;
+  medium: number;
+  large: number;
+  largeIncreased: number;
+  extraLarge: number;
+  extraLargeIncreased: number;
+  extraExtraLarge: number;
+};
+
+export type ThemeShapes = {
+  corner: ThemeShapeCorners;
+};
diff --git a/src/theme/types/state.ts b/src/theme/types/state.ts
new file mode 100644
index 0000000000..7577d21ce4
--- /dev/null
+++ b/src/theme/types/state.ts
@@ -0,0 +1,10 @@
+import type { ColorValue } from 'react-native';
+
+import type { tokens } from '../tokens';
+
+export type StateOpacityKey = keyof typeof tokens.md.sys.state.opacity;
+
+export type StateLayer = {
+  color: ColorValue;
+  opacity: number;
+};
diff --git a/src/theme/types/theme.ts b/src/theme/types/theme.ts
new file mode 100644
index 0000000000..a4ce2288ae
--- /dev/null
+++ b/src/theme/types/theme.ts
@@ -0,0 +1,23 @@
+import type { $DeepPartial } from '@callstack/react-theme-provider';
+
+import type { ThemeColors } from './color';
+import type { ThemeElevation } from './elevation';
+import type { MotionConfig } from './motion';
+import type { ThemeShapes } from './shape';
+import type { Typescale } from './typography';
+
+export type Theme = {
+  dark: boolean;
+  animation: {
+    scale: number;
+  };
+  colors: ThemeColors;
+  fonts: Typescale;
+  shapes: ThemeShapes;
+  motion: MotionConfig;
+  elevation: ThemeElevation;
+};
+
+export type InternalTheme = Theme;
+
+export type ThemeProp = $DeepPartial<InternalTheme>;
diff --git a/src/theme/types/typography.ts b/src/theme/types/typography.ts
new file mode 100644
index 0000000000..f7ad73b80f
--- /dev/null
+++ b/src/theme/types/typography.ts
@@ -0,0 +1,68 @@
+export type Font = {
+  fontFamily: string;
+  fontWeight?:
+    | 'normal'
+    | 'bold'
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900';
+  fontStyle?: 'normal' | 'italic' | undefined;
+};
+
+export type Fonts = {
+  regular: Font;
+  medium: Font;
+  light: Font;
+  thin: Font;
+};
+
+export type TypescaleKey =
+  | 'displayLarge'
+  | 'displayMedium'
+  | 'displaySmall'
+  | 'headlineLarge'
+  | 'headlineMedium'
+  | 'headlineSmall'
+  | 'titleLarge'
+  | 'titleMedium'
+  | 'titleSmall'
+  | 'labelLarge'
+  | 'labelMedium'
+  | 'labelSmall'
+  | 'bodyLarge'
+  | 'bodyMedium'
+  | 'bodySmall'
+  | 'displayLargeEmphasized'
+  | 'displayMediumEmphasized'
+  | 'displaySmallEmphasized'
+  | 'headlineLargeEmphasized'
+  | 'headlineMediumEmphasized'
+  | 'headlineSmallEmphasized'
+  | 'titleLargeEmphasized'
+  | 'titleMediumEmphasized'
+  | 'titleSmallEmphasized'
+  | 'labelLargeEmphasized'
+  | 'labelMediumEmphasized'
+  | 'labelSmallEmphasized'
+  | 'bodyLargeEmphasized'
+  | 'bodyMediumEmphasized'
+  | 'bodySmallEmphasized';
+
+export type TypescaleStyle = {
+  fontFamily: string;
+  letterSpacing: number;
+  fontWeight: Font['fontWeight'];
+  lineHeight: number;
+  fontSize: number;
+  fontStyle?: Font['fontStyle'];
+};
+
+export type Typescale = Record<TypescaleKey, TypescaleStyle> & {
+  default: Omit<TypescaleStyle, 'lineHeight' | 'fontSize'>;
+};
diff --git a/src/theme/utils/color.ts b/src/theme/utils/color.ts
new file mode 100644
index 0000000000..c13e8797e3
--- /dev/null
+++ b/src/theme/utils/color.ts
@@ -0,0 +1,66 @@
+import type { ColorValue } from 'react-native';
+
+import type { Theme } from '../types';
+
+/**
+ * Resolve the on-color (content color) that pairs with a given background
+ * role from the theme's color scheme.
+ *
+ * If `background` does not match any known role color (e.g. an arbitrary hex
+ * value), falls back to `onSurface`.
+ *
+ * @example
+ *   const fg = contentColorFor(theme, theme.colors.primaryContainer);
+ *   // theme.colors.onPrimaryContainer
+ */
+export function contentColorFor(
+  theme: Theme,
+  background: ColorValue
+): ColorValue {
+  const c = theme.colors;
+
+  switch (background) {
+    case c.primary:
+      return c.onPrimary;
+    case c.secondary:
+      return c.onSecondary;
+    case c.tertiary:
+      return c.onTertiary;
+    case c.background:
+      return c.onBackground;
+    case c.error:
+      return c.onError;
+    case c.primaryContainer:
+      return c.onPrimaryContainer;
+    case c.secondaryContainer:
+      return c.onSecondaryContainer;
+    case c.tertiaryContainer:
+      return c.onTertiaryContainer;
+    case c.errorContainer:
+      return c.onErrorContainer;
+    case c.inverseSurface:
+      return c.inverseOnSurface;
+    case c.surfaceVariant:
+      return c.onSurfaceVariant;
+    case c.surface:
+    case c.surfaceBright:
+    case c.surfaceDim:
+    case c.surfaceContainerLowest:
+    case c.surfaceContainerLow:
+    case c.surfaceContainer:
+    case c.surfaceContainerHigh:
+    case c.surfaceContainerHighest:
+      return c.onSurface;
+    case c.primaryFixed:
+    case c.primaryFixedDim:
+      return c.onPrimaryFixed;
+    case c.secondaryFixed:
+    case c.secondaryFixedDim:
+      return c.onSecondaryFixed;
+    case c.tertiaryFixed:
+    case c.tertiaryFixedDim:
+      return c.onTertiaryFixed;
+    default:
+      return c.onSurface;
+  }
+}
diff --git a/src/theme/utils/shape.ts b/src/theme/utils/shape.ts
new file mode 100644
index 0000000000..2ce6b2feb6
--- /dev/null
+++ b/src/theme/utils/shape.ts
@@ -0,0 +1,22 @@
+import { cornerFull, cornerNone } from '../tokens/sys/shape';
+import type { Theme, ThemeShapeCorners } from '../types';
+
+/**
+ * Token name accepted anywhere a corner radius is specified. `'none'` and
+ * `'full'` resolve to the `cornerNone` / `cornerFull` constants; named
+ * tokens key into `theme.shapes.corner`.
+ */
+export type ShapeToken = keyof ThemeShapeCorners | 'none' | 'full';
+
+/**
+ * Resolve a `ShapeToken` to a numeric corner radius.
+ */
+export function resolveCornerRadius(theme: Theme, token: ShapeToken): number {
+  if (token === 'full') {
+    return cornerFull;
+  }
+  if (token === 'none') {
+    return cornerNone;
+  }
+  return theme.shapes.corner[token];
+}
diff --git a/src/theme/utils/state.ts b/src/theme/utils/state.ts
new file mode 100644
index 0000000000..8addc54876
--- /dev/null
+++ b/src/theme/utils/state.ts
@@ -0,0 +1,23 @@
+import { tokens } from '../tokens';
+import type { ColorRole, StateLayer, StateOpacityKey, Theme } from '../types';
+
+const stateOpacity = tokens.md.sys.state.opacity;
+
+/**
+ * Resolve a `{ color, opacity }` state-layer for a color role + interaction
+ * state. Reads `theme.colors[role]` live, so it stays correct under deeply-merged theme overrides.
+ *
+ * @example
+ *   const stateLayer = getStateLayer(theme, 'primary', 'hovered');
+ *   // { color: theme.colors.primary, opacity: 0.08 }
+ */
+export function getStateLayer(
+  theme: Theme,
+  role: ColorRole,
+  state: StateOpacityKey
+): StateLayer {
+  return {
+    color: theme.colors[role],
+    opacity: stateOpacity[state],
+  };
+}
diff --git a/src/types.tsx b/src/types.tsx
deleted file mode 100644
index 175131cab3..0000000000
--- a/src/types.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-import type * as React from 'react';
-
-import type { $DeepPartial } from '@callstack/react-theme-provider';
-
-export type Font = {
-  fontFamily: string;
-  fontWeight?:
-    | 'normal'
-    | 'bold'
-    | '100'
-    | '200'
-    | '300'
-    | '400'
-    | '500'
-    | '600'
-    | '700'
-    | '800'
-    | '900';
-  fontStyle?: 'normal' | 'italic' | undefined;
-};
-
-export type Fonts = {
-  regular: Font;
-  medium: Font;
-  light: Font;
-  thin: Font;
-};
-
-type Mode = 'adaptive' | 'exact';
-
-export type MD2Colors = {
-  primary: string;
-  background: string;
-  surface: string;
-  accent: string;
-  error: string;
-  text: string;
-  onSurface: string;
-  disabled: string;
-  placeholder: string;
-  backdrop: string;
-  notification: string;
-  tooltip: string;
-};
-
-export type MD3Colors = {
-  primary: string;
-  primaryContainer: string;
-  secondary: string;
-  secondaryContainer: string;
-  tertiary: string;
-  tertiaryContainer: string;
-  surface: string;
-  surfaceVariant: string;
-  surfaceDisabled: string;
-  background: string;
-  error: string;
-  errorContainer: string;
-  onPrimary: string;
-  onPrimaryContainer: string;
-  onSecondary: string;
-  onSecondaryContainer: string;
-  onTertiary: string;
-  onTertiaryContainer: string;
-  onSurface: string;
-  onSurfaceVariant: string;
-  onSurfaceDisabled: string;
-  onError: string;
-  onErrorContainer: string;
-  onBackground: string;
-  outline: string;
-  outlineVariant: string;
-  inverseSurface: string;
-  inverseOnSurface: string;
-  inversePrimary: string;
-  shadow: string;
-  scrim: string;
-  backdrop: string;
-  elevation: MD3ElevationColors;
-};
-
-export type MD3AndroidColors = {
-  primary: number;
-  primaryContainer: number;
-  secondary: number;
-  secondaryContainer: number;
-  tertiary: number;
-  tertiaryContainer: number;
-  surface: number;
-  surfaceVariant: number;
-  background: number;
-  error: number;
-  errorContainer: number;
-  onPrimary: number;
-  onPrimaryContainer: number;
-  onSecondary: number;
-  onSecondaryContainer: number;
-  onTertiary: number;
-  onTertiaryContainer: number;
-  onSurface: number;
-  onSurfaceVariant: number;
-  onError: number;
-  onErrorContainer: number;
-  onBackground: number;
-  outline: number;
-  outlineVariant: number;
-  inverseSurface: number;
-  inverseOnSurface: number;
-  inversePrimary: number;
-  shadow: number;
-  scrim: number;
-};
-
-export type MD3Palette = {};
-
-export type ThemeProp = $DeepPartial<InternalTheme>;
-
-export type ThemeBase = {
-  dark: boolean;
-  mode?: Mode;
-  roundness: number;
-  animation: {
-    scale: number;
-    defaultAnimationDuration?: number;
-  };
-};
-
-export type MD3Theme = ThemeBase & {
-  version: 3;
-  isV3: true;
-  colors: MD3Colors;
-  fonts: MD3Typescale;
-};
-
-export type MD2Theme = ThemeBase & {
-  version: 2;
-  isV3: false;
-  colors: MD2Colors;
-  fonts: Fonts;
-};
-
-export type InternalTheme = MD2Theme | MD3Theme;
-
-// MD3 types
-export enum MD3TypescaleKey {
-  displayLarge = 'displayLarge',
-  displayMedium = 'displayMedium',
-  displaySmall = 'displaySmall',
-
-  headlineLarge = 'headlineLarge',
-  headlineMedium = 'headlineMedium',
-  headlineSmall = 'headlineSmall',
-
-  titleLarge = 'titleLarge',
-  titleMedium = 'titleMedium',
-  titleSmall = 'titleSmall',
-
-  labelLarge = 'labelLarge',
-  labelMedium = 'labelMedium',
-  labelSmall = 'labelSmall',
-
-  bodyLarge = 'bodyLarge',
-  bodyMedium = 'bodyMedium',
-  bodySmall = 'bodySmall',
-}
-
-export type MD3Type = {
-  fontFamily: string;
-  letterSpacing: number;
-  fontWeight: Font['fontWeight'];
-  lineHeight: number;
-  fontSize: number;
-  fontStyle?: Font['fontStyle'];
-};
-
-export type MD3Typescale =
-  | {
-      [key in MD3TypescaleKey]: MD3Type;
-    } & {
-      ['default']: Omit<MD3Type, 'lineHeight' | 'fontSize'>;
-    };
-
-export type MD3Elevation = 0 | 1 | 2 | 3 | 4 | 5;
-
-export enum ElevationLevels {
-  'level0',
-  'level1',
-  'level2',
-  'level3',
-  'level4',
-  'level5',
-}
-
-export type MD3ElevationColors = {
-  [key in keyof typeof ElevationLevels]: string;
-};
-
-export type $Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
-export type $RemoveChildren<T extends React.ComponentType<any>> = $Omit<
-  React.ComponentPropsWithoutRef<T>,
-  'children'
->;
-
-export type EllipsizeProp = 'head' | 'middle' | 'tail' | 'clip';
-
-export type NavigationTheme = {
-  dark: boolean;
-  colors: {
-    primary: string;
-    background: string;
-    card: string;
-    text: string;
-    border: string;
-    notification: string;
-  };
-};
diff --git a/src/utils/__tests__/addEventListener.js b/src/utils/__tests__/addEventListener.js
deleted file mode 100644
index 6446ccf733..0000000000
--- a/src/utils/__tests__/addEventListener.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import { BackHandler, Keyboard } from 'react-native';
-
-import { addEventListener, addListener } from '../addEventListener';
-
-const mockModule = jest.fn();
-const handler = jest.fn();
-
-describe('addEventListener', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('assigns subscription', () => {
-    BackHandler.addEventListener = mockModule;
-    addEventListener(BackHandler, 'hardwareBackPress', handler);
-    expect(BackHandler.addEventListener).toHaveBeenCalledWith(
-      'hardwareBackPress',
-      handler
-    );
-  });
-
-  it('removes subscription', () => {
-    const subscription = addEventListener(
-      BackHandler,
-      'hardwareBackPress',
-      handler
-    );
-    BackHandler.removeEventListener = mockModule;
-    subscription.remove();
-
-    expect(BackHandler.removeEventListener).toHaveBeenCalledWith(
-      'hardwareBackPress',
-      handler
-    );
-  });
-});
-
-describe('addListener', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('assigns subscription', () => {
-    Keyboard.addListener = mockModule;
-    addListener(Keyboard, 'keyboardWillShow', handler);
-    expect(Keyboard.addListener).toHaveBeenCalledWith(
-      'keyboardWillShow',
-      handler
-    );
-  });
-
-  it('removes subscription', () => {
-    const subscription = addListener(Keyboard, 'keyboardWillShow', handler);
-    Keyboard.removeEventListener = mockModule;
-    subscription.remove();
-
-    expect(Keyboard.removeEventListener).toHaveBeenCalledWith(
-      'keyboardWillShow',
-      handler
-    );
-  });
-});
diff --git a/src/utils/__tests__/addEventListener.test.tsx b/src/utils/__tests__/addEventListener.test.tsx
new file mode 100644
index 0000000000..af1a33cc11
--- /dev/null
+++ b/src/utils/__tests__/addEventListener.test.tsx
@@ -0,0 +1,77 @@
+import { beforeEach, describe, expect, it, jest } from '@jest/globals';
+
+import { addEventListener, addListener } from '../addEventListener';
+
+type LegacyEventModule = {
+  addEventListener: (eventName: string, handler: () => void) => undefined;
+  removeEventListener: (eventName: string, handler: () => void) => void;
+};
+
+type LegacyListenerModule = {
+  addListener: (eventName: string, handler: () => void) => undefined;
+  removeEventListener: (eventName: string, handler: () => void) => void;
+};
+
+const handler = jest.fn();
+
+describe('addEventListener', () => {
+  const module: LegacyEventModule = {
+    addEventListener: jest.fn<LegacyEventModule['addEventListener']>(),
+    removeEventListener: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('assigns subscription', () => {
+    addEventListener(module, 'hardwareBackPress', handler);
+
+    expect(module.addEventListener).toHaveBeenCalledWith(
+      'hardwareBackPress',
+      handler
+    );
+  });
+
+  it('removes subscription', () => {
+    const subscription = addEventListener(module, 'hardwareBackPress', handler);
+
+    subscription.remove();
+
+    expect(module.removeEventListener).toHaveBeenCalledWith(
+      'hardwareBackPress',
+      handler
+    );
+  });
+});
+
+describe('addListener', () => {
+  const module: LegacyListenerModule = {
+    addListener: jest.fn<LegacyListenerModule['addListener']>(),
+    removeEventListener: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('assigns subscription', () => {
+    addListener(module, 'keyboardWillShow', handler);
+
+    expect(module.addListener).toHaveBeenCalledWith(
+      'keyboardWillShow',
+      handler
+    );
+  });
+
+  it('removes subscription', () => {
+    const subscription = addListener(module, 'keyboardWillShow', handler);
+
+    subscription.remove();
+
+    expect(module.removeEventListener).toHaveBeenCalledWith(
+      'keyboardWillShow',
+      handler
+    );
+  });
+});
diff --git a/src/utils/__tests__/hasTouchHandler.test.ts b/src/utils/__tests__/hasTouchHandler.test.ts
index c876493621..5e17811d39 100644
--- a/src/utils/__tests__/hasTouchHandler.test.ts
+++ b/src/utils/__tests__/hasTouchHandler.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it, jest } from '@jest/globals';
+
 import hasTouchHandler from '../hasTouchHandler';
 
 describe('hasTouchHandler', () => {
diff --git a/src/utils/__tests__/splitStyles.test.ts b/src/utils/__tests__/splitStyles.test.ts
index 7019159325..c27a53d940 100644
--- a/src/utils/__tests__/splitStyles.test.ts
+++ b/src/utils/__tests__/splitStyles.test.ts
@@ -1,5 +1,7 @@
 import type { ViewStyle } from 'react-native';
 
+import { describe, expect, it } from '@jest/globals';
+
 import { splitStyles } from '../splitStyles';
 
 describe('splitStyles', () => {
diff --git a/src/utils/addEventListener.tsx b/src/utils/addEventListener.tsx
index 40bb4508b3..dce970c6b7 100644
--- a/src/utils/addEventListener.tsx
+++ b/src/utils/addEventListener.tsx
@@ -7,10 +7,10 @@ export function addEventListener<
   T extends {
     addEventListener: (
       ...args: any
-    ) => NativeEventSubscription | EmitterSubscription;
+    ) => NativeEventSubscription | EmitterSubscription | undefined;
   } & { removeEventListener?: (...args: any) => void } & {
     remove?: (...args: any) => void;
-  }
+  },
 >(Module: T, ...rest: Parameters<typeof Module.addEventListener>) {
   const [eventName, handler] = rest;
 
@@ -33,9 +33,9 @@ export function addEventListener<
 
 export function addListener<
   T extends {
-    addListener: (...args: any) => EmitterSubscription;
+    addListener: (...args: any) => EmitterSubscription | undefined;
     removeEventListener: (...args: any) => void;
-  }
+  },
 >(Module: T, ...rest: Parameters<typeof Module.addListener>) {
   const [eventName, handler] = rest;
 
diff --git a/src/utils/forwardRef.tsx b/src/utils/forwardRef.tsx
deleted file mode 100644
index 0761712d2a..0000000000
--- a/src/utils/forwardRef.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from 'react';
-import type {
-  ForwardRefRenderFunction,
-  PropsWithoutRef,
-  RefAttributes,
-  ForwardRefExoticComponent,
-} from 'react';
-
-export type ForwardRefComponent<T, P = {}> = ForwardRefExoticComponent<
-  PropsWithoutRef<P> & RefAttributes<T>
->;
-
-/**
- * TypeScript generated a large union of props from `ViewProps` in
- * `d.ts` files when using `React.forwardRef`. To prevent this
- * `ForwardRefComponent` was created and exported. Use this
- * `forwardRef` instead of `React.forwardRef` so you don't have to
- * import `ForwardRefComponent`.
- * More info: https://github.com/callstack/react-native-paper/pull/3603
- */
-export const forwardRef: <T, P = {}>(
-  render: ForwardRefRenderFunction<T, PropsWithoutRef<P>>
-) => ForwardRefComponent<T, P> = React.forwardRef;
diff --git a/src/utils/isKeyboardFocusEvent.ts b/src/utils/isKeyboardFocusEvent.ts
new file mode 100644
index 0000000000..d7f05b731d
--- /dev/null
+++ b/src/utils/isKeyboardFocusEvent.ts
@@ -0,0 +1,24 @@
+import {
+  type NativeSyntheticEvent,
+  Platform,
+  type TargetedEvent,
+} from 'react-native';
+
+/** True when a focus event came from keyboard navigation. Native: always true. */
+export const isKeyboardFocusEvent = (
+  e: NativeSyntheticEvent<TargetedEvent>
+): boolean => {
+  if (Platform.OS !== 'web') return true;
+  try {
+    const target: unknown = e.currentTarget;
+    if (typeof target === 'object' && target !== null && 'matches' in target) {
+      const { matches } = target;
+      if (typeof matches === 'function') {
+        return matches.call(target, ':focus-visible');
+      }
+    }
+  } catch {
+    // older browsers throw on unknown selectors
+  }
+  return true;
+};
diff --git a/src/utils/splitStyles.ts b/src/utils/splitStyles.ts
index 9c1f42df34..910c62eb45 100644
--- a/src/utils/splitStyles.ts
+++ b/src/utils/splitStyles.ts
@@ -29,12 +29,13 @@ export function splitStyles<Tuple extends FiltersArray>(
 
   // `Object.entries` will be used to iterate over the styles and `Object.fromEntries` will be called before returning
   // Entries which match the given filters will be temporarily stored in `newStyles`
-  const newStyles = filters.map(() => [] as Entry[]);
+  const newStyles: Entry[][] = filters.map(() => []);
 
   // Entries which match no filter
   const rest: Entry[] = [];
 
   // Iterate every style property
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
   outer: for (const item of Object.entries(styles) as Entry[]) {
     // Check each filter
     for (let i = 0; i < filters.length; i++) {
@@ -53,8 +54,9 @@ export function splitStyles<Tuple extends FiltersArray>(
   newStyles.unshift(rest);
 
   // Convert arrays of entries into objects
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
   return newStyles.map((styles) => Object.fromEntries(styles)) as unknown as [
     ViewStyle,
-    ...MappedTuple<Tuple>
+    ...MappedTuple<Tuple>,
   ];
 }
diff --git a/src/utils/useAnimatedValue.tsx b/src/utils/useAnimatedValue.tsx
index 5b61f9f4d7..565a177e0a 100644
--- a/src/utils/useAnimatedValue.tsx
+++ b/src/utils/useAnimatedValue.tsx
@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports -- TODO: remove after BottomNavigation migrates to Reanimated.
 import { Animated } from 'react-native';
 
 import useLazyRef from './useLazyRef';
diff --git a/src/utils/useAnimatedValueArray.tsx b/src/utils/useAnimatedValueArray.tsx
index 67fbfa0b51..b26ed88793 100644
--- a/src/utils/useAnimatedValueArray.tsx
+++ b/src/utils/useAnimatedValueArray.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+// eslint-disable-next-line no-restricted-imports -- TODO: remove after BottomNavigation migrates to Reanimated.
 import { Animated } from 'react-native';
 
 export default function useAnimatedValueArray(initialValues: number[]) {
diff --git a/src/utils/useIsKeyboardShown.tsx b/src/utils/useIsKeyboardShown.tsx
index 49cc3db9ac..cefe10cc72 100644
--- a/src/utils/useIsKeyboardShown.tsx
+++ b/src/utils/useIsKeyboardShown.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Keyboard, NativeEventSubscription, Platform } from 'react-native';
+import { Keyboard, Platform } from 'react-native';
+import type { NativeEventSubscription } from 'react-native';
 
 type Props = {
   onShow: () => void;
diff --git a/src/utils/useLazyRef.tsx b/src/utils/useLazyRef.tsx
index 37c11472d2..5ef6aac27d 100644
--- a/src/utils/useLazyRef.tsx
+++ b/src/utils/useLazyRef.tsx
@@ -7,5 +7,6 @@ export default function useLazyRef<T>(callback: () => T) {
     lazyRef.current = callback();
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
   return lazyRef as React.MutableRefObject<T>;
 }
diff --git a/tsconfig.build.json b/tsconfig.build.json
index 06de95f291..2a7adecd37 100644
--- a/tsconfig.build.json
+++ b/tsconfig.build.json
@@ -1,4 +1,13 @@
 {
-  "extends": "./tsconfig",
-  "exclude": ["example", "docs", "**/__tests__/*"]
+  "extends": "./tsconfig.json",
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": [
+    "**/__tests__/*",
+    "__ts-tests__",
+    "docs",
+    "example",
+    "lib",
+    "node_modules",
+    "src/test-utils.tsx"
+  ]
 }
diff --git a/tsconfig.json b/tsconfig.json
index c0b7c9cd69..8178b5189f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,26 +1,22 @@
 {
   "compilerOptions": {
-    "baseUrl": ".",
+    "rootDir": ".",
     "paths": {
-      "react-native-paper": [
-        "./src/index"
-      ],
-      "react-native-paper/react-navigation": [
-        "./src/react-navigation"
-      ]
+      "react-native-paper": ["./src/index"]
     },
+    "noEmit": true,
+    "customConditions": ["react-native-paper-source"],
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,
+    "allowImportingTsExtensions": true,
+    "erasableSyntaxOnly": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "jsx": "react",
-    "lib": [
-      "esnext",
-      "dom"
-    ],
+    "jsx": "react-jsx",
+    "lib": ["esnext", "dom"],
     "moduleSuffixes": [".ios", ".native", ".android", ""],
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "preserve",
+    "moduleResolution": "bundler",
     "noFallthroughCasesInSwitch": true,
     "noImplicitReturns": true,
     "noImplicitUseStrict": false,
@@ -28,11 +24,23 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "resolveJsonModule": true,
+    "resolvePackageJsonImports": false,
     "skipLibCheck": true,
     "strict": true,
-    "target": "esnext"
+    "target": "esnext",
+    "types": ["node"],
+    "verbatimModuleSyntax": true
   },
-  "exclude": [
-    "lib/**/*"
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.source.json"
+    },
+    {
+      "path": "./docs"
+    },
+    {
+      "path": "./example"
+    }
   ]
 }
diff --git a/tsconfig.source.json b/tsconfig.source.json
new file mode 100644
index 0000000000..c5bb31ce7f
--- /dev/null
+++ b/tsconfig.source.json
@@ -0,0 +1,5 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["docs", "example", "lib", "node_modules"]
+}
diff --git a/yarn.lock b/yarn.lock
index 3920e64583..ee4558c745 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5,390 +5,52 @@ __metadata:
   version: 8
   cacheKey: 10c0
 
-"@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/4eed600962bfab42afb49cddcfb31a47b00502f59707609cf160559920ce0f5cf8874791e4cafc465ede30ae291992f3f892bc757b2a989e80e50e358f71c518
-  languageName: node
-  linkType: hard
-
-"@algolia/abtesting@npm:1.12.2":
-  version: 1.12.2
-  resolution: "@algolia/abtesting@npm:1.12.2"
-  dependencies:
-    "@algolia/client-common": "npm:5.46.2"
-    "@algolia/requester-browser-xhr": "npm:5.46.2"
-    "@algolia/requester-fetch": "npm:5.46.2"
-    "@algolia/requester-node-http": "npm:5.46.2"
-  checksum: 10c0/2bc0c3e86a0f840664815f612e038fb941247f8c785e9aa1e1e90728875472bd853e4fa7681ff3e4f9dbe1c0c3d3997a6ce89b13eaf03af61b2125e8a10837c1
-  languageName: node
-  linkType: hard
-
-"@algolia/autocomplete-core@npm:1.17.9":
-  version: 1.17.9
-  resolution: "@algolia/autocomplete-core@npm:1.17.9"
-  dependencies:
-    "@algolia/autocomplete-plugin-algolia-insights": "npm:1.17.9"
-    "@algolia/autocomplete-shared": "npm:1.17.9"
-  checksum: 10c0/e1111769a8723b9dd45fc38cd7edc535c86c1f908b84b5fdc5de06ba6b8c7aca14e5f52ebce84fa5f7adf857332e396b93b7e7933b157b2c9aefc0a19d9574ab
-  languageName: node
-  linkType: hard
-
-"@algolia/autocomplete-plugin-algolia-insights@npm:1.17.9":
-  version: 1.17.9
-  resolution: "@algolia/autocomplete-plugin-algolia-insights@npm:1.17.9"
-  dependencies:
-    "@algolia/autocomplete-shared": "npm:1.17.9"
-  peerDependencies:
-    search-insights: ">= 1 < 3"
-  checksum: 10c0/05c21502631643abdcd6e9f70b5814a60d34bad59bca501e26e030fd72e689be5cecfb6e8939a0a1bdcb2394591e55e26a42a82c7247528eafeff714db0819a4
-  languageName: node
-  linkType: hard
-
-"@algolia/autocomplete-preset-algolia@npm:1.17.9":
-  version: 1.17.9
-  resolution: "@algolia/autocomplete-preset-algolia@npm:1.17.9"
-  dependencies:
-    "@algolia/autocomplete-shared": "npm:1.17.9"
-  peerDependencies:
-    "@algolia/client-search": ">= 4.9.1 < 6"
-    algoliasearch: ">= 4.9.1 < 6"
-  checksum: 10c0/99159c7e02a927d0d96717cb4cfd2f8dbc4da73267a8eae4f83af5bf74087089f6e7dbffd316512e713a4cc534e936b6a7ccb5c4a5ff84b4bf73f2d3cc050e79
-  languageName: node
-  linkType: hard
-
-"@algolia/autocomplete-shared@npm:1.17.9":
-  version: 1.17.9
-  resolution: "@algolia/autocomplete-shared@npm:1.17.9"
-  peerDependencies:
-    "@algolia/client-search": ">= 4.9.1 < 6"
-    algoliasearch: ">= 4.9.1 < 6"
-  checksum: 10c0/b318281aecdaae09171b47ee4f7bc66b613852cad4506e9d6278fff35ba68a12dd9cce2d90b5f4c3ba0e3d7d780583cbe46b22275260e41bbf09fb01e4a18f49
-  languageName: node
-  linkType: hard
-
-"@algolia/cache-browser-local-storage@npm:4.25.3":
-  version: 4.25.3
-  resolution: "@algolia/cache-browser-local-storage@npm:4.25.3"
-  dependencies:
-    "@algolia/cache-common": "npm:4.25.3"
-  checksum: 10c0/d511fc9d74aaccea5a5be22ca3a99f476573146a6abf3e053f11700c441088c6586a6a584f4b3dba9ea159eaf2da448e7494e566992f813fdbd1875960de42fd
-  languageName: node
-  linkType: hard
-
-"@algolia/cache-common@npm:4.25.3":
-  version: 4.25.3
-  resolution: "@algolia/cache-common@npm:4.25.3"
-  checksum: 10c0/134d43e96f90701ced24edd029289da504538f73ed7441118ca835e299aaa0902e83a1338b09afe64004b759cd633ecfa8c4f9ede3d0169cc4831d6efe0291cc
-  languageName: node
-  linkType: hard
-
-"@algolia/cache-in-memory@npm:4.25.3":
-  version: 4.25.3
-  resolution: "@algolia/cache-in-memory@npm:4.25.3"
-  dependencies:
-    "@algolia/cache-common": "npm:4.25.3"
-  checksum: 10c0/bc61281f4f481b045fb43a1bd16f677c23c1b8aea5ba8ca7e5cf4816843a705a5115edeebfee60c8f90544f99f312d919daf40db72de52ca5edef7f1cf3d35c9
-  languageName: node
-  linkType: hard
-
-"@algolia/client-abtesting@npm:5.46.2":
-  version: 5.46.2
-  resolution: "@algolia/client-abtesting@npm:5.46.2"
-  dependencies:
-    "@algolia/client-common": "npm:5.46.2"
-    "@algolia/requester-browser-xhr": "npm:5.46.2"
-    "@algolia/requester-fetch": "npm:5.46.2"
-    "@algolia/requester-node-http": "npm:5.46.2"
-  checksum: 10c0/be50eb231e023538745fac1ea61a632244816b605b31d519eacb16b28bd8e2a444842979f81391ad92e7c7737c8b0ef37037260aca0cf6651653a6383cd79603
-  languageName: node
-  linkType: hard
-
-"@algolia/client-account@npm:4.25.3":
-  version: 4.25.3
-  resolution: "@algolia/client-account@npm:4.25.3"
-  dependencies:
-    "@algolia/client-common": "npm:4.25.3"
-    "@algolia/client-search": "npm:4.25.3"
-    "@algolia/transporter": "npm:4.25.3"
-  checksum: 10c0/bb718d06febb72ea6bead8c64562a5d804fa878a9ae3a78fafa461eece6bbd0109fddb0ca517add1ef745cee7b5fe736b31f937cabc4fb29e820e8398b6bae9f
-  languageName: node
-  linkType: hard
-
-"@algolia/client-analytics@npm:4.25.3":
-  version: 4.25.3
-  resolution: "@algolia/client-analytics@npm:4.25.3"
-  dependencies:
-    "@algolia/client-common": "npm:4.25.3"
-    "@algolia/client-search": "npm:4.25.3"
-    "@algolia/requester-common": "npm:4.25.3"
-    "@algolia/transporter": "npm:4.25.3"
-  checksum: 10c0/4922f34ecea4f17e56d66a5f34d9d65b685e1c813444ee70db861aa14e8c25ded61e9d7c1555428ca3900500c18b3d7430d99a6299d1cb7b49c6ed06f9649101
-  languageName: node
-  linkType: hard
-
-"@algolia/client-analytics@npm:5.46.2":
-  version: 5.46.2
-  resolution: "@algolia/client-analytics@npm:5.46.2"
-  dependencies:
-    "@algolia/client-common": "npm:5.46.2"
-    "@algolia/requester-browser-xhr": "npm:5.46.2"
-    "@algolia/requester-fetch": "npm:5.46.2"
-    "@algolia/requester-node-http": "npm:5.46.2"
-  checksum: 10c0/80f9df688d31987d328296779a7cc30248a58f7ec6efe07837101482c737c9214796009e687e11e50f7dde1fd976b78213210916ba3666e0aa7b9d2884ccd956
-  languageName: node
-  linkType: hard
-
-"@algolia/client-common@npm:4.25.3":
-  version: 4.25.3
-  resolution: "@algolia/client-common@npm:4.25.3"
-  dependencies:
-    "@algolia/requester-common": "npm:4.25.3"
-    "@algolia/transporter": "npm:4.25.3"
-  checksum: 10c0/f0865dd8763b5695fd852b3d4fdb9fc1fcc5546235683a8714d97e994ab168cb4184a03fa79eb156daec9c789d3d93baf9f846c47acc6cdda6028b02984e3294
-  languageName: node
-  linkType: hard
-
-"@algolia/client-common@npm:5.46.2":
-  version: 5.46.2
-  resolution: "@algolia/client-common@npm:5.46.2"
-  checksum: 10c0/a88ca3f5141a6445f8518a384f53ecaad248150affc058d8edf84fd1d7397fb4aa7b66a50d10d848d278216a7b873027224375bf64145ad8435213c6a3727021
-  languageName: node
-  linkType: hard
-
-"@algolia/client-insights@npm:5.46.2":
-  version: 5.46.2
-  resolution: "@algolia/client-insights@npm:5.46.2"
-  dependencies:
-    "@algolia/client-common": "npm:5.46.2"
-    "@algolia/requester-browser-xhr": "npm:5.46.2"
-    "@algolia/requester-fetch": "npm:5.46.2"
-    "@algolia/requester-node-http": "npm:5.46.2"
-  checksum: 10c0/4a398ab4796e32c3e02f89392b2294985ad3bea7e9b9052c2c3642691b7975564cdc4b7f06b0bc6ca6d6695efb77c9932e6ff04abb56a486ca8840242b3ebe1c
-  languageName: node
-  linkType: hard
-
-"@algolia/client-personalization@npm:4.25.3":
-  version: 4.25.3
-  resolution: "@algolia/client-personalization@npm:4.25.3"
-  dependencies:
-    "@algolia/client-common": "npm:4.25.3"
-    "@algolia/requester-common": "npm:4.25.3"
-    "@algolia/transporter": "npm:4.25.3"
-  checksum: 10c0/bf8d1f13805534059354af7597d5a4f5ac7f5415751d4905e7e0f5b367ae6940c557ff35867201ae64b4d7cf1ce6591a0368b319c865a82b497415f8e0353084
-  languageName: node
-  linkType: hard
-
-"@algolia/client-personalization@npm:5.46.2":
-  version: 5.46.2
-  resolution: "@algolia/client-personalization@npm:5.46.2"
-  dependencies:
-    "@algolia/client-common": "npm:5.46.2"
-    "@algolia/requester-browser-xhr": "npm:5.46.2"
-    "@algolia/requester-fetch": "npm:5.46.2"
-    "@algolia/requester-node-http": "npm:5.46.2"
-  checksum: 10c0/e5f2225ac50e55defd544c4689438beb22db2f71143da78bb2e987b4be9d908601995e32bc21b64d8ad6fe149caa16039a6580aa5453f5ccd2d665446f98f41d
-  languageName: node
-  linkType: hard
-
-"@algolia/client-query-suggestions@npm:5.46.2":
-  version: 5.46.2
-  resolution: "@algolia/client-query-suggestions@npm:5.46.2"
-  dependencies:
-    "@algolia/client-common": "npm:5.46.2"
-    "@algolia/requester-browser-xhr": "npm:5.46.2"
-    "@algolia/requester-fetch": "npm:5.46.2"
-    "@algolia/requester-node-http": "npm:5.46.2"
-  checksum: 10c0/98869c0a230bbcaffe538603f3518b4be1b6c97a8db5cb26ed763863734624b44e549a680eea127b64924fc72c343af8c7e20b15eed7467852e4cce414ac8e7e
-  languageName: node
-  linkType: hard
-
-"@algolia/client-search@npm:4.25.3":
-  version: 4.25.3
-  resolution: "@algolia/client-search@npm:4.25.3"
-  dependencies:
-    "@algolia/client-common": "npm:4.25.3"
-    "@algolia/requester-common": "npm:4.25.3"
-    "@algolia/transporter": "npm:4.25.3"
-  checksum: 10c0/32ad49da60a14d2cfe78f30e9f3e3c57931ba91ccd21d2c5f319c1521b4a173c6ee6510d53557ef7831f964000401fd9fa02d853a2dbf00dd4d740dffe1b8325
-  languageName: node
-  linkType: hard
-
-"@algolia/client-search@npm:5.46.2":
-  version: 5.46.2
-  resolution: "@algolia/client-search@npm:5.46.2"
-  dependencies:
-    "@algolia/client-common": "npm:5.46.2"
-    "@algolia/requester-browser-xhr": "npm:5.46.2"
-    "@algolia/requester-fetch": "npm:5.46.2"
-    "@algolia/requester-node-http": "npm:5.46.2"
-  checksum: 10c0/a6cc3d80e7cb5c83b98396d67b0b8486336ad63514be47b8f5ba5ed782a2a90ec62c826653c42a9fff6630b52e3d4949f7930bc88fa1e532a62ac31a283311ed
-  languageName: node
-  linkType: hard
-
-"@algolia/events@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "@algolia/events@npm:4.0.1"
-  checksum: 10c0/f398d815c6ed21ac08f6caadf1e9155add74ac05d99430191c3b1f1335fd91deaf468c6b304e6225c9885d3d44c06037c53def101e33d9c22daff175b2a65ca9
-  languageName: node
-  linkType: hard
-
-"@algolia/ingestion@npm:1.46.2":
-  version: 1.46.2
-  resolution: "@algolia/ingestion@npm:1.46.2"
-  dependencies:
-    "@algolia/client-common": "npm:5.46.2"
-    "@algolia/requester-browser-xhr": "npm:5.46.2"
-    "@algolia/requester-fetch": "npm:5.46.2"
-    "@algolia/requester-node-http": "npm:5.46.2"
-  checksum: 10c0/b5236313c07b89457381cf614fd66b59ce3a00575afc281b2a28ee4531d0d3f66188735694339034e8faae4f7d329591006de57f9b7db7c55da63aec53b058c0
-  languageName: node
-  linkType: hard
-
-"@algolia/logger-common@npm:4.25.3":
-  version: 4.25.3
-  resolution: "@algolia/logger-common@npm:4.25.3"
-  checksum: 10c0/503434de662b7b667522ebcd2d9fbc29d9e401ba253fe16ff86a7572e6e113fe021b2762498da8a57b06c2533f86dcecd165f528865e313c5421f099fca9a27e
-  languageName: node
-  linkType: hard
-
-"@algolia/logger-console@npm:4.25.3":
-  version: 4.25.3
-  resolution: "@algolia/logger-console@npm:4.25.3"
-  dependencies:
-    "@algolia/logger-common": "npm:4.25.3"
-  checksum: 10c0/996df8eb0b1e9866deec1a0a7f58af1a779c487674a6742bf660a7d31ee2b5a163b99dbbe5050c834922a992066404f9dadf49cf9bbdf0b9adeb7a16fc569337
-  languageName: node
-  linkType: hard
-
-"@algolia/monitoring@npm:1.46.2":
-  version: 1.46.2
-  resolution: "@algolia/monitoring@npm:1.46.2"
-  dependencies:
-    "@algolia/client-common": "npm:5.46.2"
-    "@algolia/requester-browser-xhr": "npm:5.46.2"
-    "@algolia/requester-fetch": "npm:5.46.2"
-    "@algolia/requester-node-http": "npm:5.46.2"
-  checksum: 10c0/c676a3b5af8914af73a6bb2c19653381d9c6ca7e530e13f46f2bd52d0ae6d0cb162c6dfc511be2bd0e59c98b8083636553000faaf08ab0e31177635230a49726
-  languageName: node
-  linkType: hard
-
-"@algolia/recommend@npm:4.25.3":
-  version: 4.25.3
-  resolution: "@algolia/recommend@npm:4.25.3"
-  dependencies:
-    "@algolia/cache-browser-local-storage": "npm:4.25.3"
-    "@algolia/cache-common": "npm:4.25.3"
-    "@algolia/cache-in-memory": "npm:4.25.3"
-    "@algolia/client-common": "npm:4.25.3"
-    "@algolia/client-search": "npm:4.25.3"
-    "@algolia/logger-common": "npm:4.25.3"
-    "@algolia/logger-console": "npm:4.25.3"
-    "@algolia/requester-browser-xhr": "npm:4.25.3"
-    "@algolia/requester-common": "npm:4.25.3"
-    "@algolia/requester-node-http": "npm:4.25.3"
-    "@algolia/transporter": "npm:4.25.3"
-  checksum: 10c0/c59db46fcf46a784a982df8dce31298c838f65ffb3cf6193c05791c9c7114508819d81f5fe27da856820f6f2dc4a376c4cb98d3dcd9fc2e682da64c25dc5fe23
-  languageName: node
-  linkType: hard
-
-"@algolia/recommend@npm:5.46.2":
-  version: 5.46.2
-  resolution: "@algolia/recommend@npm:5.46.2"
-  dependencies:
-    "@algolia/client-common": "npm:5.46.2"
-    "@algolia/requester-browser-xhr": "npm:5.46.2"
-    "@algolia/requester-fetch": "npm:5.46.2"
-    "@algolia/requester-node-http": "npm:5.46.2"
-  checksum: 10c0/5224e8965b4e3dc7f2fadb12ecc073866fab5eceb825079d14689c0ca2bb25fad7d794d9a84d535718ae20bb28ee2a31bb2c941a9d878ffeedb46f6cb6e05600
-  languageName: node
-  linkType: hard
-
-"@algolia/requester-browser-xhr@npm:4.25.3":
-  version: 4.25.3
-  resolution: "@algolia/requester-browser-xhr@npm:4.25.3"
-  dependencies:
-    "@algolia/requester-common": "npm:4.25.3"
-  checksum: 10c0/2b923f192f32d454cef1f889cf788971cdb7b64645aed6d28770bc498036108fb84cd9a3868cf40980e2fe7632016c5eafb3fc82cdd8bd1647c26d36f741de3c
-  languageName: node
-  linkType: hard
-
-"@algolia/requester-browser-xhr@npm:5.46.2":
-  version: 5.46.2
-  resolution: "@algolia/requester-browser-xhr@npm:5.46.2"
-  dependencies:
-    "@algolia/client-common": "npm:5.46.2"
-  checksum: 10c0/4942ccc4327a4de475e8f2d57cf880fc0646d3a8a6e7aa82f429a903f74b2a337acede8dce7993d3638cb6dda432470627219da3d609ff657a7885f4c0b1bd76
-  languageName: node
-  linkType: hard
-
-"@algolia/requester-common@npm:4.25.3":
-  version: 4.25.3
-  resolution: "@algolia/requester-common@npm:4.25.3"
-  checksum: 10c0/1ba00218e1e36b676dc0809e3fc102d6912f15f71cc6f9d605af4e3510a5d1e4f57d6679a9b1187164099dfd842c4fe97c493fec732efb53cd2238fb3f144fd5
-  languageName: node
-  linkType: hard
-
-"@algolia/requester-fetch@npm:5.46.2":
-  version: 5.46.2
-  resolution: "@algolia/requester-fetch@npm:5.46.2"
-  dependencies:
-    "@algolia/client-common": "npm:5.46.2"
-  checksum: 10c0/0023a3a9918f169a967865be1c026fe639ed49fd80ec3392d5366726f672411e890f9b7898cb72da8581f754056eb6017ebe46a719e20c68cf68b892a15fa211
-  languageName: node
-  linkType: hard
-
-"@algolia/requester-node-http@npm:4.25.3":
-  version: 4.25.3
-  resolution: "@algolia/requester-node-http@npm:4.25.3"
+"@ark/schema@npm:0.56.0":
+  version: 0.56.0
+  resolution: "@ark/schema@npm:0.56.0"
   dependencies:
-    "@algolia/requester-common": "npm:4.25.3"
-  checksum: 10c0/38b2b4d87e9c48f14e7325fed17663f15472f6e0217da177a7ef8516f33e871705993626ac025072511ad587373c1eacd635c68f6922c0514fb2f7758d4c941c
+    "@ark/util": "npm:0.56.0"
+  checksum: 10c0/89fb7e4e1304ea9b34c834a8cb34bc05201b4e3a1b26277f7d74b9505a2d7ed398bb55a77e491e7a14a7f0807424a5467e1d32ee725ee2f7b9d158ae30d8121a
   languageName: node
   linkType: hard
 
-"@algolia/requester-node-http@npm:5.46.2":
-  version: 5.46.2
-  resolution: "@algolia/requester-node-http@npm:5.46.2"
-  dependencies:
-    "@algolia/client-common": "npm:5.46.2"
-  checksum: 10c0/60054e5a7f549d12917642b4cdeedbf2698436f85de6e063e1af740e774e7ef9719a620ecd44839023d3ce069e1a1a5fef18fec7dfd9449e342da3f52927e3e9
+"@ark/util@npm:0.56.0":
+  version: 0.56.0
+  resolution: "@ark/util@npm:0.56.0"
+  checksum: 10c0/dfef779c90f9f814ba97069c63bf91fa67569b87c5cd925d0e2d96b91aa677c019ed1dd5ff95332d9bb0598f785057439074b8cbfcaa2578770616e260fc5761
   languageName: node
   linkType: hard
 
-"@algolia/transporter@npm:4.25.3":
-  version: 4.25.3
-  resolution: "@algolia/transporter@npm:4.25.3"
+"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.20.0, @babel/code-frame@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/code-frame@npm:7.27.1"
   dependencies:
-    "@algolia/cache-common": "npm:4.25.3"
-    "@algolia/logger-common": "npm:4.25.3"
-    "@algolia/requester-common": "npm:4.25.3"
-  checksum: 10c0/c7160ad528c77b5a88c6da8f2ca0d28171598cbca0b9cade690e78b4baacd814541d09c7df68036849d02e73ee54ee9b06447264617d644b5f823f73e95bfcf7
+    "@babel/helper-validator-identifier": "npm:^7.27.1"
+    js-tokens: "npm:^4.0.0"
+    picocolors: "npm:^1.1.1"
+  checksum: 10c0/5dd9a18baa5fce4741ba729acc3a3272c49c25cb8736c4b18e113099520e7ef7b545a4096a26d600e4416157e63e87d66db46aa3fbf0a5f2286da2705c12da00
   languageName: node
   linkType: hard
 
-"@babel/code-frame@npm:7.10.4, @babel/code-frame@npm:~7.10.4":
-  version: 7.10.4
-  resolution: "@babel/code-frame@npm:7.10.4"
+"@babel/code-frame@npm:^7.28.6, @babel/code-frame@npm:^7.29.0":
+  version: 7.29.0
+  resolution: "@babel/code-frame@npm:7.29.0"
   dependencies:
-    "@babel/highlight": "npm:^7.10.4"
-  checksum: 10c0/69e0f52986a1f40231d891224f420436629b6678711b68c088e97b7bdba1607aeb5eb9cfb070275c433f0bf43c37c134845db80d1cdbf5ac88a69b0bdcce9402
+    "@babel/helper-validator-identifier": "npm:^7.28.5"
+    js-tokens: "npm:^4.0.0"
+    picocolors: "npm:^1.1.1"
+  checksum: 10c0/d34cc504e7765dfb576a663d97067afb614525806b5cad1a5cc1a7183b916fec8ff57fa233585e3926fd5a9e6b31aae6df91aa81ae9775fb7a28f658d3346f0d
   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.20.0, @babel/code-frame@npm:^7.24.7, @babel/code-frame@npm:^7.27.1, @babel/code-frame@npm:^7.8.3":
-  version: 7.27.1
-  resolution: "@babel/code-frame@npm:7.27.1"
+"@babel/code-frame@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/code-frame@npm:7.29.7"
   dependencies:
-    "@babel/helper-validator-identifier": "npm:^7.27.1"
+    "@babel/helper-validator-identifier": "npm:^7.29.7"
     js-tokens: "npm:^4.0.0"
     picocolors: "npm:^1.1.1"
-  checksum: 10c0/5dd9a18baa5fce4741ba729acc3a3272c49c25cb8736c4b18e113099520e7ef7b545a4096a26d600e4416157e63e87d66db46aa3fbf0a5f2286da2705c12da00
+  checksum: 10c0/169fc2080169a40c1760155eaaaf739bcb882df0bec76a83adbda5493645bc17270a3434b8848c494b1933e96fe1d147370001e3cda09a39f43ae30f08ef2069
   languageName: node
   linkType: hard
 
@@ -399,31 +61,21 @@ __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
+"@babel/compat-data@npm:^7.28.6, @babel/compat-data@npm:^7.29.3":
+  version: 7.29.3
+  resolution: "@babel/compat-data@npm:7.29.3"
+  checksum: 10c0/81bddd53ce1b1395576fbb7cb739631a976f6b421cd260e6cf2715a9691b9a0ec12ca5c4e1bb88088e60dc87875f6e4ef7fa8674f1dc96ae1bd7c357416605a7
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.16.0, @babel/core@npm:^7.18.5, @babel/core@npm:^7.18.6, @babel/core@npm:^7.19.6, @babel/core@npm:^7.20.0, @babel/core@npm:^7.20.2, @babel/core@npm:^7.23.9, @babel/core@npm:^7.25.2, @babel/core@npm:^7.7.5":
+"@babel/compat-data@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/compat-data@npm:7.29.7"
+  checksum: 10c0/47913f05e08a45a1c9df38c02b4b49e391005085b489432647a1abe112e5d9c75e3be8ea5972b7f6da4ec5d1339922ceb9ea02b8a25d4ed1cb8636e5261f344e
+  languageName: node
+  linkType: hard
+
+"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.20.0, @babel/core@npm:^7.23.9, @babel/core@npm:^7.25.2, @babel/core@npm:^7.7.5":
   version: 7.28.5
   resolution: "@babel/core@npm:7.28.5"
   dependencies:
@@ -446,9 +98,55 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/eslint-parser@npm:^7.16.3":
-  version: 7.28.5
-  resolution: "@babel/eslint-parser@npm:7.28.5"
+"@babel/core@npm:^7.22.20":
+  version: 7.29.7
+  resolution: "@babel/core@npm:7.29.7"
+  dependencies:
+    "@babel/code-frame": "npm:^7.29.7"
+    "@babel/generator": "npm:^7.29.7"
+    "@babel/helper-compilation-targets": "npm:^7.29.7"
+    "@babel/helper-module-transforms": "npm:^7.29.7"
+    "@babel/helpers": "npm:^7.29.7"
+    "@babel/parser": "npm:^7.29.7"
+    "@babel/template": "npm:^7.29.7"
+    "@babel/traverse": "npm:^7.29.7"
+    "@babel/types": "npm:^7.29.7"
+    "@jridgewell/remapping": "npm:^2.3.5"
+    convert-source-map: "npm:^2.0.0"
+    debug: "npm:^4.1.0"
+    gensync: "npm:^1.0.0-beta.2"
+    json5: "npm:^2.2.3"
+    semver: "npm:^6.3.1"
+  checksum: 10c0/112fb09c24de7a1de64d1de2c31fe65c4e6af4cb2fb6e6d99ea5373e6fc51e75b88581c0efae4c4c68f119a02a988c7106e95011a41530a2fb8ed793c7eaa07b
+  languageName: node
+  linkType: hard
+
+"@babel/core@npm:^7.29.0":
+  version: 7.29.0
+  resolution: "@babel/core@npm:7.29.0"
+  dependencies:
+    "@babel/code-frame": "npm:^7.29.0"
+    "@babel/generator": "npm:^7.29.0"
+    "@babel/helper-compilation-targets": "npm:^7.28.6"
+    "@babel/helper-module-transforms": "npm:^7.28.6"
+    "@babel/helpers": "npm:^7.28.6"
+    "@babel/parser": "npm:^7.29.0"
+    "@babel/template": "npm:^7.28.6"
+    "@babel/traverse": "npm:^7.29.0"
+    "@babel/types": "npm:^7.29.0"
+    "@jridgewell/remapping": "npm:^2.3.5"
+    convert-source-map: "npm:^2.0.0"
+    debug: "npm:^4.1.0"
+    gensync: "npm:^1.0.0-beta.2"
+    json5: "npm:^2.2.3"
+    semver: "npm:^6.3.1"
+  checksum: 10c0/5127d2e8e842ae409e11bcbb5c2dff9874abf5415e8026925af7308e903f4f43397341467a130490d1a39884f461bc2b67f3063bce0be44340db89687fd852aa
+  languageName: node
+  linkType: hard
+
+"@babel/eslint-parser@npm:^7.22.15":
+  version: 7.29.7
+  resolution: "@babel/eslint-parser@npm:7.29.7"
   dependencies:
     "@nicolo-ribaudo/eslint-scope-5-internals": "npm:5.1.1-v1"
     eslint-visitor-keys: "npm:^2.1.0"
@@ -456,11 +154,11 @@ __metadata:
   peerDependencies:
     "@babel/core": ^7.11.0
     eslint: ^7.5.0 || ^8.0.0 || ^9.0.0
-  checksum: 10c0/4d13f765434b6be83ab3917f06ad712dedf0d5bfa80fe54cd6cea44adac6a0d2519020ad307d66b4490e46a435874829eac6a9fd3a9cad54d7616c47d288aaed
+  checksum: 10c0/c24dcd941b0a149b197a9e9c3297a01d621775ac71cdf2e1134b1097c1691b46ce969355e1be3676d83b88f62c43ed33cf3a499da21ea11a5eb07339ce64ac20
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:>=7, @babel/generator@npm:^7.12.11, @babel/generator@npm:^7.12.5, @babel/generator@npm:^7.18.7, @babel/generator@npm:^7.20.5, @babel/generator@npm:^7.25.0, @babel/generator@npm:^7.28.5, @babel/generator@npm:^7.7.2":
+"@babel/generator@npm:>=7, @babel/generator@npm:^7.12.11, @babel/generator@npm:^7.20.5, @babel/generator@npm:^7.28.5, @babel/generator@npm:^7.7.2":
   version: 7.28.5
   resolution: "@babel/generator@npm:7.28.5"
   dependencies:
@@ -473,6 +171,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/generator@npm:^7.29.0, @babel/generator@npm:^7.29.1":
+  version: 7.29.1
+  resolution: "@babel/generator@npm:7.29.1"
+  dependencies:
+    "@babel/parser": "npm:^7.29.0"
+    "@babel/types": "npm:^7.29.0"
+    "@jridgewell/gen-mapping": "npm:^0.3.12"
+    "@jridgewell/trace-mapping": "npm:^0.3.28"
+    jsesc: "npm:^3.0.2"
+  checksum: 10c0/349086e6876258ef3fb2823030fee0f6c0eb9c3ebe35fc572e16997f8c030d765f636ddc6299edae63e760ea6658f8ee9a2edfa6d6b24c9a80c917916b973551
+  languageName: node
+  linkType: hard
+
+"@babel/generator@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/generator@npm:7.29.7"
+  dependencies:
+    "@babel/parser": "npm:^7.29.7"
+    "@babel/types": "npm:^7.29.7"
+    "@jridgewell/gen-mapping": "npm:^0.3.12"
+    "@jridgewell/trace-mapping": "npm:^0.3.28"
+    jsesc: "npm:^3.0.2"
+  checksum: 10c0/9bf72b01b5bd0ea5b1288a0e37dbd360bff2f2b1ce73342c0d40fb3db2ec3dc004ada5ffa925c5e12939a416eed59e600d562b8ecd938ce0d27dfd0eb6c6c2b7
+  languageName: node
+  linkType: hard
+
 "@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"
@@ -482,6 +206,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-annotate-as-pure@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/helper-annotate-as-pure@npm:7.29.7"
+  dependencies:
+    "@babel/types": "npm:^7.29.7"
+  checksum: 10c0/c56536b52d17632d89d49db2063ed6102f0e3bbadf6a0ccb74e6599d6a77173b644c7fe8c3ef17c7a162709d55b75ee5145ef6db917d16ba7f375fbffcf2e942
+  languageName: node
+  linkType: hard
+
 "@babel/helper-compilation-targets@npm:^7.20.7, @babel/helper-compilation-targets@npm:^7.27.1, @babel/helper-compilation-targets@npm:^7.27.2":
   version: 7.27.2
   resolution: "@babel/helper-compilation-targets@npm:7.27.2"
@@ -495,6 +228,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-compilation-targets@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/helper-compilation-targets@npm:7.28.6"
+  dependencies:
+    "@babel/compat-data": "npm:^7.28.6"
+    "@babel/helper-validator-option": "npm:^7.27.1"
+    browserslist: "npm:^4.24.0"
+    lru-cache: "npm:^5.1.1"
+    semver: "npm:^6.3.1"
+  checksum: 10c0/3fcdf3b1b857a1578e99d20508859dbd3f22f3c87b8a0f3dc540627b4be539bae7f6e61e49d931542fe5b557545347272bbdacd7f58a5c77025a18b745593a50
+  languageName: node
+  linkType: hard
+
+"@babel/helper-compilation-targets@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/helper-compilation-targets@npm:7.29.7"
+  dependencies:
+    "@babel/compat-data": "npm:^7.29.7"
+    "@babel/helper-validator-option": "npm:^7.29.7"
+    browserslist: "npm:^4.24.0"
+    lru-cache: "npm:^5.1.1"
+    semver: "npm:^6.3.1"
+  checksum: 10c0/4c15fd4c69a0a7047799a28a88460c19cede0a0ee8af994ea169114986f4af48b92c7393a4a3fee0456c11a656eece3448a6ed06354453d6c27cccf17195453b
+  languageName: node
+  linkType: hard
+
 "@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.27.1, @babel/helper-create-class-features-plugin@npm:^7.28.3, @babel/helper-create-class-features-plugin@npm:^7.28.5":
   version: 7.28.5
   resolution: "@babel/helper-create-class-features-plugin@npm:7.28.5"
@@ -512,7 +271,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.27.1":
+"@babel/helper-create-class-features-plugin@npm:^7.28.6":
+  version: 7.29.3
+  resolution: "@babel/helper-create-class-features-plugin@npm:7.29.3"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.27.3"
+    "@babel/helper-member-expression-to-functions": "npm:^7.28.5"
+    "@babel/helper-optimise-call-expression": "npm:^7.27.1"
+    "@babel/helper-replace-supers": "npm:^7.28.6"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.29.0"
+    semver: "npm:^6.3.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10c0/9fff94d27d2c468c38303d2e4624c72501a182f9c5e2e6f123d5bfd24c36ab2de5983ce50b60a05c97cce0b28c4809155f0669f349266072b9a5fc1047238e86
+  languageName: node
+  linkType: hard
+
+"@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.27.1, @babel/helper-create-regexp-features-plugin@npm:^7.28.5":
   version: 7.28.5
   resolution: "@babel/helper-create-regexp-features-plugin@npm:7.28.5"
   dependencies:
@@ -540,6 +316,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-define-polyfill-provider@npm:^0.6.8":
+  version: 0.6.8
+  resolution: "@babel/helper-define-polyfill-provider@npm:0.6.8"
+  dependencies:
+    "@babel/helper-compilation-targets": "npm:^7.28.6"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+    debug: "npm:^4.4.3"
+    lodash.debounce: "npm:^4.0.8"
+    resolve: "npm:^1.22.11"
+  peerDependencies:
+    "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
+  checksum: 10c0/306a169f2cb285f368578219ef18ea9702860d3d02d64334f8d45ea38648be0b9e1edad8c8f732fa34bb4206ccbb9883c395570fd57ab7bbcf293bc5964c5b3a
+  languageName: node
+  linkType: hard
+
 "@babel/helper-globals@npm:^7.28.0":
   version: 7.28.0
   resolution: "@babel/helper-globals@npm:7.28.0"
@@ -547,6 +338,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-globals@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/helper-globals@npm:7.29.7"
+  checksum: 10c0/f38417c40b1129a1b2b519ca961b9040c8827d1444fd74068702286b91b77089431dc76b6b9d5c1496e5da2a4f3ad329c6946e688ba3fa0d1d0b3d2b4f34f36a
+  languageName: node
+  linkType: hard
+
 "@babel/helper-member-expression-to-functions@npm:^7.27.1, @babel/helper-member-expression-to-functions@npm:^7.28.5":
   version: 7.28.5
   resolution: "@babel/helper-member-expression-to-functions@npm:7.28.5"
@@ -567,7 +365,27 @@ __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.3":
+"@babel/helper-module-imports@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/helper-module-imports@npm:7.28.6"
+  dependencies:
+    "@babel/traverse": "npm:^7.28.6"
+    "@babel/types": "npm:^7.28.6"
+  checksum: 10c0/b49d8d8f204d9dbfd5ac70c54e533e5269afb3cea966a9d976722b13e9922cc773a653405f53c89acb247d5aebdae4681d631a3ae3df77ec046b58da76eda2ac
+  languageName: node
+  linkType: hard
+
+"@babel/helper-module-imports@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/helper-module-imports@npm:7.29.7"
+  dependencies:
+    "@babel/traverse": "npm:^7.29.7"
+    "@babel/types": "npm:^7.29.7"
+  checksum: 10c0/6adf60d97356027413342a092f818d9678c4f5caff716a33e3284b5ae14e47a9e88059d421dde4ee4894691260039a12602c0e7becadc175602194b40dfa345d
+  languageName: node
+  linkType: hard
+
+"@babel/helper-module-transforms@npm:^7.27.1, @babel/helper-module-transforms@npm:^7.28.3":
   version: 7.28.3
   resolution: "@babel/helper-module-transforms@npm:7.28.3"
   dependencies:
@@ -580,6 +398,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-transforms@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/helper-module-transforms@npm:7.28.6"
+  dependencies:
+    "@babel/helper-module-imports": "npm:^7.28.6"
+    "@babel/helper-validator-identifier": "npm:^7.28.5"
+    "@babel/traverse": "npm:^7.28.6"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10c0/6f03e14fc30b287ce0b839474b5f271e72837d0cafe6b172d759184d998fbee3903a035e81e07c2c596449e504f453463d58baa65b6f40a37ded5bec74620b2b
+  languageName: node
+  linkType: hard
+
+"@babel/helper-module-transforms@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/helper-module-transforms@npm:7.29.7"
+  dependencies:
+    "@babel/helper-module-imports": "npm:^7.29.7"
+    "@babel/helper-validator-identifier": "npm:^7.29.7"
+    "@babel/traverse": "npm:^7.29.7"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10c0/ee5a2172c24a42be696836f4b0d947489c9729d8adf5821885cf77d1ad5333e3c447368e9a71f67df1099570490553dccf9f888ef0a92a48aa63cb086bd8c7e1
+  languageName: node
+  linkType: hard
+
 "@babel/helper-optimise-call-expression@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/helper-optimise-call-expression@npm:7.27.1"
@@ -589,13 +433,6 @@ __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.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.27.1, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3":
   version: 7.27.1
   resolution: "@babel/helper-plugin-utils@npm:7.27.1"
@@ -603,11 +440,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@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:
-    "@babel/helper-annotate-as-pure": "npm:^7.27.1"
+"@babel/helper-plugin-utils@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/helper-plugin-utils@npm:7.28.6"
+  checksum: 10c0/3f5f8acc152fdbb69a84b8624145ff4f9b9f6e776cb989f9f968f8606eb7185c5c3cfcf3ba08534e37e1e0e1c118ac67080610333f56baa4f7376c99b5f1143d
+  languageName: node
+  linkType: hard
+
+"@babel/helper-plugin-utils@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/helper-plugin-utils@npm:7.29.7"
+  checksum: 10c0/380477a06133274a2759f9355929cb60a95e8b8fee624a1ae1fa349e1d1645b89daca456f72833f6d1062bffa12ee4271c5bf0cc5a61c0166cdc24c7591e2408
+  languageName: node
+  linkType: hard
+
+"@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:
+    "@babel/helper-annotate-as-pure": "npm:^7.27.1"
     "@babel/helper-wrap-function": "npm:^7.27.1"
     "@babel/traverse": "npm:^7.27.1"
   peerDependencies:
@@ -629,6 +480,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-replace-supers@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/helper-replace-supers@npm:7.28.6"
+  dependencies:
+    "@babel/helper-member-expression-to-functions": "npm:^7.28.5"
+    "@babel/helper-optimise-call-expression": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.28.6"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10c0/04663c6389551b99b8c3e7ba4e2638b8ca2a156418c26771516124c53083aa8e74b6a45abe5dd46360af79709a0e9c6b72c076d0eab9efecdd5aaf836e79d8d5
+  languageName: node
+  linkType: hard
+
 "@babel/helper-skip-transparent-expression-wrappers@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/helper-skip-transparent-expression-wrappers@npm:7.27.1"
@@ -646,13 +510,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-validator-identifier@npm:^7.25.9, @babel/helper-validator-identifier@npm:^7.27.1, @babel/helper-validator-identifier@npm:^7.28.5":
+"@babel/helper-string-parser@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/helper-string-parser@npm:7.29.7"
+  checksum: 10c0/194bc0f1716e396d5ffde56ad6119745fb9557662c98611590e5e454906783a4ccb21ce93056b8eb69a4909044834e45d96e50ac695bbe9e3221648fe033c06c
+  languageName: node
+  linkType: hard
+
+"@babel/helper-validator-identifier@npm:^7.27.1, @babel/helper-validator-identifier@npm:^7.28.5":
   version: 7.28.5
   resolution: "@babel/helper-validator-identifier@npm:7.28.5"
   checksum: 10c0/42aaebed91f739a41f3d80b72752d1f95fd7c72394e8e4bd7cdd88817e0774d80a432451bcba17c2c642c257c483bf1d409dd4548883429ea9493a3bc4ab0847
   languageName: node
   linkType: hard
 
+"@babel/helper-validator-identifier@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/helper-validator-identifier@npm:7.29.7"
+  checksum: 10c0/4795354e7ae0dcafa72de1cd04ec51252dc1498517170beaf019e03effc5b7bf13c6b21a3949a77e07b8125be7f106ed1131350d8ebd4566ae874094a726d62b
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-option@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/helper-validator-option@npm:7.27.1"
@@ -660,6 +538,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-validator-option@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/helper-validator-option@npm:7.29.7"
+  checksum: 10c0/d2a06c6d0ac40ba4a2f219fc2cab249c7a94bacdb2686273b7f9598571c908809b48468ff588915a346e6cc7296f60b581023d1d498b747fed06f779d335c2cc
+  languageName: node
+  linkType: hard
+
 "@babel/helper-wrap-function@npm:^7.27.1":
   version: 7.28.3
   resolution: "@babel/helper-wrap-function@npm:7.28.3"
@@ -671,7 +556,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helpers@npm:^7.12.5, @babel/helpers@npm:^7.28.4":
+"@babel/helpers@npm:^7.28.4":
   version: 7.28.4
   resolution: "@babel/helpers@npm:7.28.4"
   dependencies:
@@ -681,19 +566,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/highlight@npm:^7.10.4":
-  version: 7.25.9
-  resolution: "@babel/highlight@npm:7.25.9"
+"@babel/helpers@npm:^7.28.6":
+  version: 7.29.2
+  resolution: "@babel/helpers@npm:7.29.2"
   dependencies:
-    "@babel/helper-validator-identifier": "npm:^7.25.9"
-    chalk: "npm:^2.4.2"
-    js-tokens: "npm:^4.0.0"
-    picocolors: "npm:^1.0.0"
-  checksum: 10c0/ae0ed93c151b85a07df42936117fa593ce91563a22dfc8944a90ae7088c9679645c33e00dcd20b081c1979665d65f986241172dae1fc9e5922692fc3ff685a49
+    "@babel/template": "npm:^7.28.6"
+    "@babel/types": "npm:^7.29.0"
+  checksum: 10c0/dab0e65b9318b2502a62c58bc0913572318595eec0482c31f0ad416b72636e6698a1d7c57cd2791d4528eb8c548bca88d338dc4d2a55a108dc1f6702f9bc5512
+  languageName: node
+  linkType: hard
+
+"@babel/helpers@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/helpers@npm:7.29.7"
+  dependencies:
+    "@babel/template": "npm:^7.29.7"
+    "@babel/types": "npm:^7.29.7"
+  checksum: 10c0/218e8d10953647c9f44775f5a022b227a182674853b5ea8631889deb7e1a3e4bc870388aaecf59bb8bd92a87f9a96220ed3f70a35bffec6bcf9169ecb67891ac
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.12.7, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.18.8, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.25.3, @babel/parser@npm:^7.27.2, @babel/parser@npm:^7.28.5":
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.27.2, @babel/parser@npm:^7.28.5":
   version: 7.28.5
   resolution: "@babel/parser@npm:7.28.5"
   dependencies:
@@ -704,6 +597,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/parser@npm:^7.28.6, @babel/parser@npm:^7.29.0":
+  version: 7.29.3
+  resolution: "@babel/parser@npm:7.29.3"
+  dependencies:
+    "@babel/types": "npm:^7.29.0"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 10c0/f06920c819550c0db689e4c5b626bf55ba3cebf80ebe9ccfa434e134036cf3de50951fe759f74abb2dae381989239860bde46d4600328578ad1f7114c3711a6d
+  languageName: node
+  linkType: hard
+
+"@babel/parser@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/parser@npm:7.29.7"
+  dependencies:
+    "@babel/types": "npm:^7.29.7"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 10c0/65133038f80b54a714d6027cb77cee3f9a6b5c4c6842ce674301e13947cbcbfa8055e63acaf1b84c085d34226a14425b2c2b97b829e0e226d2e8f1299942a51d
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.28.5":
   version: 7.28.5
   resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.28.5"
@@ -738,6 +653,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-bugfix-safari-rest-destructuring-rhs-array@npm:^7.29.3":
+  version: 7.29.3
+  resolution: "@babel/plugin-bugfix-safari-rest-destructuring-rhs-array@npm:7.29.3"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10c0/5c60605526e87d1bb200faa6c2fae606764bd675f3338c32924feac55ad98671ccb16f270112310a8667e50e4905d893993c4e2533a9bb53507e8fcc2f6893ad
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.27.1"
@@ -763,7 +690,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-class-properties@npm:^7.12.1, @babel/plugin-proposal-class-properties@npm:^7.17.12":
+"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.28.6"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+    "@babel/traverse": "npm:^7.28.6"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10c0/f1a9194e8d1742081def7af748e9249eb5082c25d0ced292720a1f054895f99041c764a05f45af669a2c8898aeb79266058aedb0d3e1038963ad49be8288918a
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-proposal-class-properties@npm:^7.12.1":
   version: 7.18.6
   resolution: "@babel/plugin-proposal-class-properties@npm:7.18.6"
   dependencies:
@@ -811,19 +750,6 @@ __metadata:
   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.3.2":
   version: 7.20.7
   resolution: "@babel/plugin-proposal-object-rest-spread@npm:7.20.7"
@@ -936,7 +862,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-flow@npm:^7.12.1, @babel/plugin-syntax-flow@npm:^7.18.6, @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:
@@ -947,6 +873,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-syntax-flow@npm:^7.22.5":
+  version: 7.29.7
+  resolution: "@babel/plugin-syntax-flow@npm:7.29.7"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.29.7"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/b2e330dd0dc535c7364937ce2b29a06065e60b1d523db75f36ab4fb89e4ba664e2230cbb1937b35712c9a0ebafc3358f323d6e6b22247d5ebad12fdd3e1f6e98
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-syntax-import-assertions@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-syntax-import-assertions@npm:7.27.1"
@@ -958,6 +895,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-syntax-import-assertions@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-syntax-import-assertions@npm:7.28.6"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/f3b8bdccb9b4d3e3b9226684ca518e055399d05579da97dfe0160a38d65198cfe7dce809e73179d6463a863a040f980de32425a876d88efe4eda933d0d95982c
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-syntax-import-attributes@npm:^7.24.7, @babel/plugin-syntax-import-attributes@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-syntax-import-attributes@npm:7.27.1"
@@ -969,6 +917,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-syntax-import-attributes@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-syntax-import-attributes@npm:7.28.6"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/1be160e2c426faa74e5be2e30e39e8d0d8c543063bd5d06cd804f8751b8fbcb82ce824ca7f9ce4b09c003693f6c06a11ce503b7e34d85e1a259631e4c3f72ad2
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-syntax-import-meta@npm:^7.10.4":
   version: 7.10.4
   resolution: "@babel/plugin-syntax-import-meta@npm:7.10.4"
@@ -991,25 +950,36 @@ __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"
+"@babel/plugin-syntax-jsx@npm:^7.2.0, @babel/plugin-syntax-jsx@npm:^7.27.1, @babel/plugin-syntax-jsx@npm:^7.7.2":
+  version: 7.27.1
+  resolution: "@babel/plugin-syntax-jsx@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.10.4"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/11d435f9e4e71c0f00e5bc295b40747c2c42341b7f38ddc5f8ac41d49ddfa247514dbe91932fa3dabd65581b4c7a9fe5b3d1c2b285e5ca32f4e5296cc185d40c
+  checksum: 10c0/bc5afe6a458d5f0492c02a54ad98c5756a0c13bd6d20609aae65acd560a9e141b0876da5f358dce34ea136f271c1016df58b461184d7ae9c4321e0f98588bc84
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-jsx@npm:^7.2.0, @babel/plugin-syntax-jsx@npm:^7.27.1, @babel/plugin-syntax-jsx@npm:^7.7.2":
-  version: 7.27.1
-  resolution: "@babel/plugin-syntax-jsx@npm:7.27.1"
+"@babel/plugin-syntax-jsx@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-syntax-jsx@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/bc5afe6a458d5f0492c02a54ad98c5756a0c13bd6d20609aae65acd560a9e141b0876da5f358dce34ea136f271c1016df58b461184d7ae9c4321e0f98588bc84
+  checksum: 10c0/b98fc3cd75e4ca3d5ca1162f610c286e14ede1486e0d297c13a5eb0ac85680ac9656d17d348bddd9160a54d797a08cea5eaac02b9330ddebb7b26732b7b99fb5
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-syntax-jsx@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/plugin-syntax-jsx@npm:7.29.7"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.29.7"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/1736000de183538ba8eef34520105508860e48b0c763254ba9158af5e814ed8bbceeedbb4281fbda33de787ae5b3870e92f60c6ae7131e7d322e451d57387896
   languageName: node
   linkType: hard
 
@@ -1046,7 +1016,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-object-rest-spread@npm:7.8.3, @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:
@@ -1124,7 +1094,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@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":
+"@babel/plugin-transform-arrow-functions@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-arrow-functions@npm:7.27.1"
   dependencies:
@@ -1148,6 +1118,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-async-generator-functions@npm:^7.29.0":
+  version: 7.29.0
+  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.29.0"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+    "@babel/helper-remap-async-to-generator": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.29.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/4080fc5e7dad7761bfebbb4fbe06bdfeb3a8bf0c027bcb4373e59e6b3dc7c5002eca7cbb1afba801d6439df8f92f7bcb3fb862e8fbbe43a9e59bb5653dcc0568
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-async-to-generator@npm:^7.24.7, @babel/plugin-transform-async-to-generator@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-async-to-generator@npm:7.27.1"
@@ -1161,6 +1144,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-async-to-generator@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-async-to-generator@npm:7.28.6"
+  dependencies:
+    "@babel/helper-module-imports": "npm:^7.28.6"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+    "@babel/helper-remap-async-to-generator": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/2eb0826248587df6e50038f36194a138771a7df22581020451c7779edeaf9ef39bf47c5b7a20ae2645af6416e8c896feeca273317329652e84abd79a4ab920ad
+  languageName: node
+  linkType: hard
+
 "@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"
@@ -1183,7 +1179,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-properties@npm:^7.0.0-0, @babel/plugin-transform-class-properties@npm:^7.25.4, @babel/plugin-transform-class-properties@npm:^7.27.1":
+"@babel/plugin-transform-block-scoping@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-block-scoping@npm:7.28.6"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/2e3e09e1f9770b56cef4dcbffddf262508fd03416072f815ac66b2b224a3a12cd285cfec12fc067f1add414e7db5ce6dafb5164a6e0fb1a728e6a97d0c6f6e9d
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-class-properties@npm:^7.25.4, @babel/plugin-transform-class-properties@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-class-properties@npm:7.27.1"
   dependencies:
@@ -1195,6 +1202,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-class-properties@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-class-properties@npm:7.28.6"
+  dependencies:
+    "@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/c4327fcd730c239d9f173f9b695b57b801729e273b4848aef1f75818069dfd31d985d75175db188d947b9b1bbe5353dae298849042026a5e4fcf07582ff3f9f1
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-class-static-block@npm:^7.27.1, @babel/plugin-transform-class-static-block@npm:^7.28.3":
   version: 7.28.3
   resolution: "@babel/plugin-transform-class-static-block@npm:7.28.3"
@@ -1207,7 +1226,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-classes@npm:^7.0.0-0, @babel/plugin-transform-classes@npm:^7.25.4, @babel/plugin-transform-classes@npm:^7.28.4":
+"@babel/plugin-transform-class-static-block@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-class-static-block@npm:7.28.6"
+  dependencies:
+    "@babel/helper-create-class-features-plugin": "npm:^7.28.6"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+  peerDependencies:
+    "@babel/core": ^7.12.0
+  checksum: 10c0/dbe9b1fd302ae41b73186e17ac8d8ecf625ebc2416a91f2dc8013977a1bdf21e6ea288a83f084752b412242f3866e789d4fddeb428af323fe35b60e0fae4f98c
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-classes@npm:^7.25.4, @babel/plugin-transform-classes@npm:^7.28.4":
   version: 7.28.4
   resolution: "@babel/plugin-transform-classes@npm:7.28.4"
   dependencies:
@@ -1223,7 +1254,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-computed-properties@npm:^7.24.7, @babel/plugin-transform-computed-properties@npm:^7.27.1":
+"@babel/plugin-transform-classes@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-classes@npm:7.28.6"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.27.3"
+    "@babel/helper-compilation-targets": "npm:^7.28.6"
+    "@babel/helper-globals": "npm:^7.28.0"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+    "@babel/helper-replace-supers": "npm:^7.28.6"
+    "@babel/traverse": "npm:^7.28.6"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/dc22f1f6eadab17305128fbf9cc5f30e87a51a77dd0a6d5498097994e8a9b9a90ab298c11edf2342acbeaac9edc9c601cad72eedcf4b592cd465a787d7f41490
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-computed-properties@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-computed-properties@npm:7.27.1"
   dependencies:
@@ -1235,6 +1282,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-computed-properties@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-computed-properties@npm:7.28.6"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+    "@babel/template": "npm:^7.28.6"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/1e9893503ae6d651125701cc29450e87c0b873c8febebff19da75da9c40cfb7968c52c28bf948244e461110aeb7b3591f2cc199b7406ff74a24c50c7a5729f39
+  languageName: node
+  linkType: hard
+
 "@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"
@@ -1259,6 +1318,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-dotall-regex@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-dotall-regex@npm:7.28.6"
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.28.5"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/e2fb76b7ae99087cf4212013a3ca9dee07048f90f98fd6264855080fb6c3f169be11c9b8c9d8b26cf9a407e4d0a5fa6e103f7cef433a542b75cf7127c99d4f97
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-duplicate-keys@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-duplicate-keys@npm:7.27.1"
@@ -1282,6 +1353,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-duplicate-named-capturing-groups-regex@npm:^7.29.0":
+  version: 7.29.0
+  resolution: "@babel/plugin-transform-duplicate-named-capturing-groups-regex@npm:7.29.0"
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.28.5"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10c0/6f03d9e5e31a05b28555541be6e283407e08447a36be6ddf8068b3efa970411d832e04b1282e2b894baf89a3864ff7e7f1e36346652a8d983170c6d548555167
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-dynamic-import@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-dynamic-import@npm:7.27.1"
@@ -1305,6 +1388,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-explicit-resource-management@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-explicit-resource-management@npm:7.28.6"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+    "@babel/plugin-transform-destructuring": "npm:^7.28.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/e6ea28c26e058fe61ada3e70b0def1992dd5a44f5fc14d8e2c6a3a512fb4d4c6dc96a3e1d0b466d83db32a9101e0b02df94051e48d3140da115b8ea9f8a31f37
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-exponentiation-operator@npm:^7.28.5":
   version: 7.28.5
   resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.28.5"
@@ -1316,6 +1411,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-exponentiation-operator@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.28.6"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/4572d955a50dbc9a652a19431b4bb822cb479ee6045f4e6df72659c499c13036da0a2adf650b07ca995f2781e80aa868943bea1e7bff1de3169ec3f0a73a902e
+  languageName: node
+  linkType: hard
+
 "@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"
@@ -1351,7 +1457,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-function-name@npm:^7.25.1, @babel/plugin-transform-function-name@npm:^7.27.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:
@@ -1375,7 +1481,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-literals@npm:^7.25.2, @babel/plugin-transform-literals@npm:^7.27.1":
+"@babel/plugin-transform-json-strings@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-json-strings@npm:7.28.6"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/ab1091798c58e6c0bb8a864ee2b727c400924592c6ed69797a26b4c205f850a935de77ad516570be0419c279a3d9f7740c2aa448762eb8364ea77a6a357a9653
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-literals@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-literals@npm:7.27.1"
   dependencies:
@@ -1397,6 +1514,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-logical-assignment-operators@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.28.6"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/4632a35453d2131f0be466681d0a33e3db44d868ff51ec46cd87e0ebd1e47c6a39b894f7d1c9b06f931addf6efa9d30e60c4cdedeb4f69d426f683e11f8490cf
+  languageName: node
+  linkType: hard
+
 "@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"
@@ -1432,6 +1560,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-modules-commonjs@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-modules-commonjs@npm:7.28.6"
+  dependencies:
+    "@babel/helper-module-transforms": "npm:^7.28.6"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/7c45992797c6150644c8552feff4a016ba7bd6d59ff2b039ed969a9c5b20a6804cd9d21db5045fc8cca8ca7f08262497e354e93f8f2be6a1cdf3fbfa8c31a9b6
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-modules-systemjs@npm:^7.28.5":
   version: 7.28.5
   resolution: "@babel/plugin-transform-modules-systemjs@npm:7.28.5"
@@ -1446,6 +1586,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-modules-systemjs@npm:^7.29.4":
+  version: 7.29.4
+  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.29.4"
+  dependencies:
+    "@babel/helper-module-transforms": "npm:^7.28.6"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+    "@babel/helper-validator-identifier": "npm:^7.28.5"
+    "@babel/traverse": "npm:^7.29.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/1da94f89ef8ba1aa1501136a80eb4c010c6a19f5550e10db84677b3ccb7a4934c8098f2b5134def87cf513bf05747ffa523d33722a1ea5a5c8ef956e9136c4c2
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-modules-umd@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-modules-umd@npm:7.27.1"
@@ -1470,6 +1624,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-named-capturing-groups-regex@npm:^7.29.0":
+  version: 7.29.0
+  resolution: "@babel/plugin-transform-named-capturing-groups-regex@npm:7.29.0"
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.28.5"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10c0/1904db22da7f2bc3e380cd2c0786bda330ee1b1b3efa3f5203d980708c4bfeb5daa4dff48d01692193040bcc5f275dbdc0c2eadc8b1eb1b6dfe363564ad6e898
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-new-target@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-new-target@npm:7.27.1"
@@ -1481,7 +1647,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.0.0-0, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.7, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.27.1":
+"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.7, @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"
   dependencies:
@@ -1492,7 +1658,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-numeric-separator@npm:^7.24.7, @babel/plugin-transform-numeric-separator@npm:^7.27.1":
+"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.28.6"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  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"
   dependencies:
@@ -1503,6 +1680,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-numeric-separator@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-numeric-separator@npm:7.28.6"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/191097d8d2753cdd16d1acca65a945d1645ab20b65655c2f5b030a9e38967a52e093dcb21ebf391e342222705c6ffe5dea15dafd6257f7b51b77fb64a830b637
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-object-rest-spread@npm:^7.24.7, @babel/plugin-transform-object-rest-spread@npm:^7.28.4":
   version: 7.28.4
   resolution: "@babel/plugin-transform-object-rest-spread@npm:7.28.4"
@@ -1518,6 +1706,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-object-rest-spread@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-object-rest-spread@npm:7.28.6"
+  dependencies:
+    "@babel/helper-compilation-targets": "npm:^7.28.6"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+    "@babel/plugin-transform-destructuring": "npm:^7.28.5"
+    "@babel/plugin-transform-parameters": "npm:^7.27.7"
+    "@babel/traverse": "npm:^7.28.6"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/f55334352d4fcde385f2e8a58836687e71ff668c9b6e4c34d52575bf2789cdde92d9d3116edba13647ac0bc3e51fb2a6d1e8fb822dce7e8123334b82600bc4c3
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-object-super@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-object-super@npm:7.27.1"
@@ -1541,7 +1744,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-chaining@npm:^7.0.0-0, @babel/plugin-transform-optional-chaining@npm:^7.24.8, @babel/plugin-transform-optional-chaining@npm:^7.27.1, @babel/plugin-transform-optional-chaining@npm:^7.28.5":
+"@babel/plugin-transform-optional-catch-binding@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.28.6"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/36e8face000ee65e478a55febf687ce9be7513ad498c60dfe585851555565e0c28e7cb891b3c59709318539ce46f7697d5f42130eb18f385cd47e47cfa297446
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-optional-chaining@npm:^7.24.8, @babel/plugin-transform-optional-chaining@npm:^7.27.1, @babel/plugin-transform-optional-chaining@npm:^7.28.5":
   version: 7.28.5
   resolution: "@babel/plugin-transform-optional-chaining@npm:7.28.5"
   dependencies:
@@ -1553,7 +1767,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-parameters@npm:^7.12.1, @babel/plugin-transform-parameters@npm:^7.20.7, @babel/plugin-transform-parameters@npm:^7.24.7, @babel/plugin-transform-parameters@npm:^7.27.7":
+"@babel/plugin-transform-optional-chaining@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-optional-chaining@npm:7.28.6"
+  dependencies:
+    "@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/c159cc74115c2266be21791f192dd079e2aeb65c8731157e53b80fcefa41e8e28ad370021d4dfbdb31f25e5afa0322669a8eb2d032cd96e65ac37e020324c763
+  languageName: node
+  linkType: hard
+
+"@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:
@@ -1576,6 +1802,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-private-methods@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-private-methods@npm:7.28.6"
+  dependencies:
+    "@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/fb504e2bfdcf3f734d2a90ab20d61427c58385f57f950d3de6ff4e6d12dd4aa7d552147312d218367e129b7920dccfc3230ba554de861986cda38921bad84067
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-private-property-in-object@npm:^7.24.7, @babel/plugin-transform-private-property-in-object@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-private-property-in-object@npm:7.27.1"
@@ -1589,25 +1827,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-property-literals@npm:^7.27.1":
-  version: 7.27.1
-  resolution: "@babel/plugin-transform-property-literals@npm:7.27.1"
+"@babel/plugin-transform-private-property-in-object@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-private-property-in-object@npm:7.28.6"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-annotate-as-pure": "npm:^7.27.3"
+    "@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/15713a87edd6db620d6e66eb551b4fbfff5b8232c460c7c76cedf98efdc5cd21080c97040231e19e06594c6d7dfa66e1ab3d0951e29d5814fb25e813f6d6209c
+  checksum: 10c0/0f6bbc6ec3f93b556d3de7d56bf49335255fc4c43488e51a5025d6ee0286183fd3cf950ffcac1bbeed8a45777f860a49996455c8d3b4a04c3b1a5f28e697fe31
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-constant-elements@npm:^7.18.12":
+"@babel/plugin-transform-property-literals@npm:^7.27.1":
   version: 7.27.1
-  resolution: "@babel/plugin-transform-react-constant-elements@npm:7.27.1"
+  resolution: "@babel/plugin-transform-property-literals@npm:7.27.1"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/07fa88dd312c97d05de95e344a11a78e24d711e7bde879076d8880869ad7b0dc69c5a5ad056790595043cb9c533fd93af0ba015eed4631315282295f767ccfbe
+  checksum: 10c0/15713a87edd6db620d6e66eb551b4fbfff5b8232c460c7c76cedf98efdc5cd21080c97040231e19e06594c6d7dfa66e1ab3d0951e29d5814fb25e813f6d6209c
   languageName: node
   linkType: hard
 
@@ -1655,13 +1895,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx@npm:^7.18.10, @babel/plugin-transform-react-jsx@npm:^7.25.2, @babel/plugin-transform-react-jsx@npm:^7.27.1":
-  version: 7.27.1
-  resolution: "@babel/plugin-transform-react-jsx@npm:7.27.1"
+"@babel/plugin-transform-react-jsx@npm:^7.22.15":
+  version: 7.29.7
+  resolution: "@babel/plugin-transform-react-jsx@npm:7.29.7"
   dependencies:
-    "@babel/helper-annotate-as-pure": "npm:^7.27.1"
-    "@babel/helper-module-imports": "npm:^7.27.1"
-    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-annotate-as-pure": "npm:^7.29.7"
+    "@babel/helper-module-imports": "npm:^7.29.7"
+    "@babel/helper-plugin-utils": "npm:^7.29.7"
+    "@babel/plugin-syntax-jsx": "npm:^7.29.7"
+    "@babel/types": "npm:^7.29.7"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/ae6487c3deafcffda8a2c1b1eb77e0b7121630fa1a9646cecd73dbbdd8271532a0f7f0e8c01f69b6d39a36d8d79eb67e2d51031369c9055f18f7d8e70d9b5446
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-react-jsx@npm:^7.25.2, @babel/plugin-transform-react-jsx@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-react-jsx@npm:7.27.1"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.27.1"
+    "@babel/helper-module-imports": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
     "@babel/plugin-syntax-jsx": "npm:^7.27.1"
     "@babel/types": "npm:^7.27.1"
   peerDependencies:
@@ -1670,6 +1925,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-react-jsx@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-react-jsx@npm:7.28.6"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.27.3"
+    "@babel/helper-module-imports": "npm:^7.28.6"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+    "@babel/plugin-syntax-jsx": "npm:^7.28.6"
+    "@babel/types": "npm:^7.28.6"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/cc75b9bb3997751df6cf7e86afe1b3fa33130b5031a412f6f12cc5faec083650fe852de0af5ec8f88d3588cc3428a3f514d3bc1f423d26f8b014cc5dff9f15a7
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-react-pure-annotations@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.27.1"
@@ -1693,6 +1963,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-regenerator@npm:^7.29.0":
+  version: 7.29.0
+  resolution: "@babel/plugin-transform-regenerator@npm:7.29.0"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/86c7db9b97f85ee47c0fae0528802cbc06e5775e61580ee905335c16bb971270086764a3859873d9adcd7d0f913a5b93eb0dc271aec8fb9e93e090e4ac95e29e
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-regexp-modifiers@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-regexp-modifiers@npm:7.27.1"
@@ -1705,6 +1986,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-regexp-modifiers@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-regexp-modifiers@npm:7.28.6"
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.28.5"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10c0/97e36b086800f71694fa406abc00192e3833662f2bdd5f51c018bd0c95eef247c4ae187417c207d03a9c5374342eac0bb65a39112c431a9b23b09b1eda1562e5
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-reserved-words@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-reserved-words@npm:7.27.1"
@@ -1716,7 +2009,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-runtime@npm:>=7, @babel/plugin-transform-runtime@npm:^7.18.6, @babel/plugin-transform-runtime@npm:^7.24.7":
+"@babel/plugin-transform-runtime@npm:>=7, @babel/plugin-transform-runtime@npm:^7.24.7":
   version: 7.28.5
   resolution: "@babel/plugin-transform-runtime@npm:7.28.5"
   dependencies:
@@ -1732,7 +2025,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@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":
+"@babel/plugin-transform-shorthand-properties@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-shorthand-properties@npm:7.27.1"
   dependencies:
@@ -1743,7 +2036,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-spread@npm:^7.24.7, @babel/plugin-transform-spread@npm:^7.27.1":
+"@babel/plugin-transform-spread@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-spread@npm:7.27.1"
   dependencies:
@@ -1755,7 +2048,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-sticky-regex@npm:^7.24.7, @babel/plugin-transform-sticky-regex@npm:^7.27.1":
+"@babel/plugin-transform-spread@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-spread@npm:7.28.6"
+  dependencies:
+    "@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/bcac50e558d6f0c501cbce19ec197af558cef51fe3b3a6eba27276e323e57a5be28109b4264a5425ac12a67bf95d6af9c2a42b05e79c522ce913fb9529259d76
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-sticky-regex@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-sticky-regex@npm:7.27.1"
   dependencies:
@@ -1766,7 +2071,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@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":
+"@babel/plugin-transform-strict-mode@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-strict-mode@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/e280406a948da3603daa0aeea01e4ba9797c81ceb3743fa052552fc7a257da29f68ece772d40dc03d9e07579de03a31042d17825b3f9ec1bf16785bbebb11d57
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-template-literals@npm:>=7, @babel/plugin-transform-template-literals@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-template-literals@npm:7.27.1"
   dependencies:
@@ -1826,7 +2142,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@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":
+"@babel/plugin-transform-unicode-property-regex@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.28.6"
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.28.5"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/b25f8cde643f4f47e0fa4f7b5c552e2dfbb6ad0ce07cf40f7e8ae40daa9855ad855d76d4d6d010153b74e48c8794685955c92ca637c0da152ce5f0fa9e7c90fa
+  languageName: node
+  linkType: hard
+
+"@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:
@@ -1850,7 +2178,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-env@npm:^7.12.1, @babel/preset-env@npm:^7.18.2, @babel/preset-env@npm:^7.18.6, @babel/preset-env@npm:^7.19.4":
+"@babel/plugin-transform-unicode-sets-regex@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.28.6"
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.28.5"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10c0/c03c8818736b138db73d1f7a96fbfa22d1994639164d743f0f00e6383d3b7b3144d333de960ff4afad0bddd0baaac257295e3316969eba995b1b6a1b4dec933e
+  languageName: node
+  linkType: hard
+
+"@babel/preset-env@npm:^7.12.1":
   version: 7.28.5
   resolution: "@babel/preset-env@npm:7.28.5"
   dependencies:
@@ -1930,7 +2270,88 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-flow@npm:^7.12.1, @babel/preset-flow@npm:^7.17.12":
+"@babel/preset-env@npm:^7.29.2":
+  version: 7.29.5
+  resolution: "@babel/preset-env@npm:7.29.5"
+  dependencies:
+    "@babel/compat-data": "npm:^7.29.3"
+    "@babel/helper-compilation-targets": "npm:^7.28.6"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
+    "@babel/helper-validator-option": "npm:^7.27.1"
+    "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "npm:^7.28.5"
+    "@babel/plugin-bugfix-safari-class-field-initializer-scope": "npm:^7.27.1"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.27.1"
+    "@babel/plugin-bugfix-safari-rest-destructuring-rhs-array": "npm:^7.29.3"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.27.1"
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.28.6"
+    "@babel/plugin-proposal-private-property-in-object": "npm:7.21.0-placeholder-for-preset-env.2"
+    "@babel/plugin-syntax-import-assertions": "npm:^7.28.6"
+    "@babel/plugin-syntax-import-attributes": "npm:^7.28.6"
+    "@babel/plugin-syntax-unicode-sets-regex": "npm:^7.18.6"
+    "@babel/plugin-transform-arrow-functions": "npm:^7.27.1"
+    "@babel/plugin-transform-async-generator-functions": "npm:^7.29.0"
+    "@babel/plugin-transform-async-to-generator": "npm:^7.28.6"
+    "@babel/plugin-transform-block-scoped-functions": "npm:^7.27.1"
+    "@babel/plugin-transform-block-scoping": "npm:^7.28.6"
+    "@babel/plugin-transform-class-properties": "npm:^7.28.6"
+    "@babel/plugin-transform-class-static-block": "npm:^7.28.6"
+    "@babel/plugin-transform-classes": "npm:^7.28.6"
+    "@babel/plugin-transform-computed-properties": "npm:^7.28.6"
+    "@babel/plugin-transform-destructuring": "npm:^7.28.5"
+    "@babel/plugin-transform-dotall-regex": "npm:^7.28.6"
+    "@babel/plugin-transform-duplicate-keys": "npm:^7.27.1"
+    "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "npm:^7.29.0"
+    "@babel/plugin-transform-dynamic-import": "npm:^7.27.1"
+    "@babel/plugin-transform-explicit-resource-management": "npm:^7.28.6"
+    "@babel/plugin-transform-exponentiation-operator": "npm:^7.28.6"
+    "@babel/plugin-transform-export-namespace-from": "npm:^7.27.1"
+    "@babel/plugin-transform-for-of": "npm:^7.27.1"
+    "@babel/plugin-transform-function-name": "npm:^7.27.1"
+    "@babel/plugin-transform-json-strings": "npm:^7.28.6"
+    "@babel/plugin-transform-literals": "npm:^7.27.1"
+    "@babel/plugin-transform-logical-assignment-operators": "npm:^7.28.6"
+    "@babel/plugin-transform-member-expression-literals": "npm:^7.27.1"
+    "@babel/plugin-transform-modules-amd": "npm:^7.27.1"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.28.6"
+    "@babel/plugin-transform-modules-systemjs": "npm:^7.29.4"
+    "@babel/plugin-transform-modules-umd": "npm:^7.27.1"
+    "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.29.0"
+    "@babel/plugin-transform-new-target": "npm:^7.27.1"
+    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.28.6"
+    "@babel/plugin-transform-numeric-separator": "npm:^7.28.6"
+    "@babel/plugin-transform-object-rest-spread": "npm:^7.28.6"
+    "@babel/plugin-transform-object-super": "npm:^7.27.1"
+    "@babel/plugin-transform-optional-catch-binding": "npm:^7.28.6"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.28.6"
+    "@babel/plugin-transform-parameters": "npm:^7.27.7"
+    "@babel/plugin-transform-private-methods": "npm:^7.28.6"
+    "@babel/plugin-transform-private-property-in-object": "npm:^7.28.6"
+    "@babel/plugin-transform-property-literals": "npm:^7.27.1"
+    "@babel/plugin-transform-regenerator": "npm:^7.29.0"
+    "@babel/plugin-transform-regexp-modifiers": "npm:^7.28.6"
+    "@babel/plugin-transform-reserved-words": "npm:^7.27.1"
+    "@babel/plugin-transform-shorthand-properties": "npm:^7.27.1"
+    "@babel/plugin-transform-spread": "npm:^7.28.6"
+    "@babel/plugin-transform-sticky-regex": "npm:^7.27.1"
+    "@babel/plugin-transform-template-literals": "npm:^7.27.1"
+    "@babel/plugin-transform-typeof-symbol": "npm:^7.27.1"
+    "@babel/plugin-transform-unicode-escapes": "npm:^7.27.1"
+    "@babel/plugin-transform-unicode-property-regex": "npm:^7.28.6"
+    "@babel/plugin-transform-unicode-regex": "npm:^7.27.1"
+    "@babel/plugin-transform-unicode-sets-regex": "npm:^7.28.6"
+    "@babel/preset-modules": "npm:0.1.6-no-external-plugins"
+    babel-plugin-polyfill-corejs2: "npm:^0.4.15"
+    babel-plugin-polyfill-corejs3: "npm:^0.14.0"
+    babel-plugin-polyfill-regenerator: "npm:^0.6.6"
+    core-js-compat: "npm:^3.48.0"
+    semver: "npm:^6.3.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/9d70ed5235f5f210bc793cd3e47ae7b108356c6d86b4ef3b4f9718e6ed5ec011dcd3d994e3d211e05e755e9442558eeb4723570bd2df3db7ba5863eaa98303e3
+  languageName: node
+  linkType: hard
+
+"@babel/preset-flow@npm:^7.12.1":
   version: 7.27.1
   resolution: "@babel/preset-flow@npm:7.27.1"
   dependencies:
@@ -1956,7 +2377,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-react@npm:^7.12.1, @babel/preset-react@npm:^7.17.12, @babel/preset-react@npm:^7.18.6, @babel/preset-react@npm:^7.22.15":
+"@babel/preset-react@npm:^7.12.1, @babel/preset-react@npm:^7.28.5":
   version: 7.28.5
   resolution: "@babel/preset-react@npm:7.28.5"
   dependencies:
@@ -1972,7 +2393,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-typescript@npm:^7.12.1, @babel/preset-typescript@npm:^7.16.7, @babel/preset-typescript@npm:^7.17.12, @babel/preset-typescript@npm:^7.18.6, @babel/preset-typescript@npm:^7.23.0":
+"@babel/preset-typescript@npm:^7.12.1, @babel/preset-typescript@npm:^7.23.0, @babel/preset-typescript@npm:^7.27.1, @babel/preset-typescript@npm:^7.28.5":
   version: 7.28.5
   resolution: "@babel/preset-typescript@npm:7.28.5"
   dependencies:
@@ -2002,23 +2423,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime-corejs3@npm:^7.18.6":
-  version: 7.28.4
-  resolution: "@babel/runtime-corejs3@npm:7.28.4"
-  dependencies:
-    core-js-pure: "npm:^3.43.0"
-  checksum: 10c0/0a7fe2d4e36d345acf090dd685b5c6ed55af3ead69a84e2cfca56631815dd757f3a362031b376cc746f63f0fd856e7a5280807833f7fa9a5b7f1febd97f8c0da
-  languageName: node
-  linkType: hard
-
-"@babel/runtime@npm:^7.1.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.18.6, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.25.0, @babel/runtime@npm:^7.7.6":
+"@babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.25.0, @babel/runtime@npm:^7.7.6":
   version: 7.28.4
   resolution: "@babel/runtime@npm:7.28.4"
   checksum: 10c0/792ce7af9750fb9b93879cc9d1db175701c4689da890e6ced242ea0207c9da411ccf16dc04e689cc01158b28d7898c40d75598f4559109f761c12ce01e959bf7
   languageName: node
   linkType: hard
 
-"@babel/template@npm:>=7, @babel/template@npm:^7.12.7, @babel/template@npm:^7.25.0, @babel/template@npm:^7.27.1, @babel/template@npm:^7.27.2, @babel/template@npm:^7.3.3":
+"@babel/template@npm:>=7, @babel/template@npm:^7.27.1, @babel/template@npm:^7.27.2, @babel/template@npm:^7.3.3":
   version: 7.27.2
   resolution: "@babel/template@npm:7.27.2"
   dependencies:
@@ -2029,7 +2441,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse--for-generate-function-map@npm:@babel/traverse@^7.25.3, @babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.12.9, @babel/traverse@npm:^7.18.8, @babel/traverse@npm:^7.25.3, @babel/traverse@npm:^7.27.1, @babel/traverse@npm:^7.28.0, @babel/traverse@npm:^7.28.3, @babel/traverse@npm:^7.28.4, @babel/traverse@npm:^7.28.5":
+"@babel/template@npm:^7.28.6":
+  version: 7.28.6
+  resolution: "@babel/template@npm:7.28.6"
+  dependencies:
+    "@babel/code-frame": "npm:^7.28.6"
+    "@babel/parser": "npm:^7.28.6"
+    "@babel/types": "npm:^7.28.6"
+  checksum: 10c0/66d87225ed0bc77f888181ae2d97845021838c619944877f7c4398c6748bcf611f216dfd6be74d39016af502bca876e6ce6873db3c49e4ac354c56d34d57e9f5
+  languageName: node
+  linkType: hard
+
+"@babel/template@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/template@npm:7.29.7"
+  dependencies:
+    "@babel/code-frame": "npm:^7.29.7"
+    "@babel/parser": "npm:^7.29.7"
+    "@babel/types": "npm:^7.29.7"
+  checksum: 10c0/8bb7f900dcab0e9e1c5ffbc33ca10e0d26b7b2e2ca804becb73ee771b9c4ed6e2908a4ae4a14c08560febb45d2b6b9a173955e42ad404d05f8b04840a14d9c58
+  languageName: node
+  linkType: hard
+
+"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.27.1, @babel/traverse@npm:^7.28.0, @babel/traverse@npm:^7.28.3, @babel/traverse@npm:^7.28.4, @babel/traverse@npm:^7.28.5":
   version: 7.28.5
   resolution: "@babel/traverse@npm:7.28.5"
   dependencies:
@@ -2044,7 +2478,37 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.12.7, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.0, @babel/types@npm:^7.20.7, @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.4, @babel/types@npm:^7.28.5, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
+"@babel/traverse@npm:^7.28.6, @babel/traverse@npm:^7.29.0":
+  version: 7.29.0
+  resolution: "@babel/traverse@npm:7.29.0"
+  dependencies:
+    "@babel/code-frame": "npm:^7.29.0"
+    "@babel/generator": "npm:^7.29.0"
+    "@babel/helper-globals": "npm:^7.28.0"
+    "@babel/parser": "npm:^7.29.0"
+    "@babel/template": "npm:^7.28.6"
+    "@babel/types": "npm:^7.29.0"
+    debug: "npm:^4.3.1"
+  checksum: 10c0/f63ef6e58d02a9fbf3c0e2e5f1c877da3e0bc57f91a19d2223d53e356a76859cbaf51171c9211c71816d94a0e69efa2732fd27ffc0e1bbc84b636e60932333eb
+  languageName: node
+  linkType: hard
+
+"@babel/traverse@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/traverse@npm:7.29.7"
+  dependencies:
+    "@babel/code-frame": "npm:^7.29.7"
+    "@babel/generator": "npm:^7.29.7"
+    "@babel/helper-globals": "npm:^7.29.7"
+    "@babel/parser": "npm:^7.29.7"
+    "@babel/template": "npm:^7.29.7"
+    "@babel/types": "npm:^7.29.7"
+    debug: "npm:^4.3.1"
+  checksum: 10c0/e256a1fbdb956555b76f3c285b1e453f6bedec8b3afb61751d99d933efd11c7d79caf5ddf2493570058a9f7deaa1b48324380d7c1aa1443fd9508becbf56331a
+  languageName: node
+  linkType: hard
+
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @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.4, @babel/types@npm:^7.28.5, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
   version: 7.28.5
   resolution: "@babel/types@npm:7.28.5"
   dependencies:
@@ -2054,6 +2518,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.28.6, @babel/types@npm:^7.29.0":
+  version: 7.29.0
+  resolution: "@babel/types@npm:7.29.0"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.27.1"
+    "@babel/helper-validator-identifier": "npm:^7.28.5"
+  checksum: 10c0/23cc3466e83bcbfab8b9bd0edaafdb5d4efdb88b82b3be6728bbade5ba2f0996f84f63b1c5f7a8c0d67efded28300898a5f930b171bb40b311bca2029c4e9b4f
+  languageName: node
+  linkType: hard
+
+"@babel/types@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/types@npm:7.29.7"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.29.7"
+    "@babel/helper-validator-identifier": "npm:^7.29.7"
+  checksum: 10c0/b6623994c69717fa27294f5fa46d59140338e2d86c6c1c13085c84ef7d53086ee357fbf4fe9abe3dd3da75734dc77c4c0df2f90fb29e667558bb3b3fb705e88f
+  languageName: node
+  linkType: hard
+
 "@bcoe/v8-coverage@npm:^0.2.3":
   version: 0.2.3
   resolution: "@bcoe/v8-coverage@npm:0.2.3"
@@ -2061,31 +2545,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@callstack/eslint-config@npm:^13.0.2":
-  version: 13.0.2
-  resolution: "@callstack/eslint-config@npm:13.0.2"
+"@callstack/eslint-config@npm:^15.0.0":
+  version: 15.0.0
+  resolution: "@callstack/eslint-config@npm:15.0.0"
   dependencies:
-    "@babel/core": "npm:^7.16.0"
-    "@babel/eslint-parser": "npm:^7.16.3"
-    "@babel/plugin-syntax-flow": "npm:^7.18.6"
-    "@babel/plugin-transform-react-jsx": "npm:^7.18.10"
-    "@typescript-eslint/eslint-plugin": "npm:^5.36.2"
-    "@typescript-eslint/parser": "npm:^5.36.2"
-    eslint-config-prettier: "npm:^8.3.0"
+    "@babel/core": "npm:^7.22.20"
+    "@babel/eslint-parser": "npm:^7.22.15"
+    "@babel/plugin-syntax-flow": "npm:^7.22.5"
+    "@babel/plugin-transform-react-jsx": "npm:^7.22.15"
+    "@eslint/compat": "npm:^1.1.1"
+    "@react-native/eslint-plugin": "npm:^0.74.0 || ^0.73.0 || ^0.72.0"
+    "@typescript-eslint/eslint-plugin": "npm:^8.0.1"
+    "@typescript-eslint/parser": "npm:^8.0.1"
+    eslint-config-prettier: "npm:^9.0.0"
     eslint-plugin-flowtype: "npm:^8.0.3"
-    eslint-plugin-import: "npm:^2.25.3"
-    eslint-plugin-jest: "npm:^27.0.1"
-    eslint-plugin-prettier: "npm:^4.0.0"
-    eslint-plugin-promise: "npm:^6.0.1"
-    eslint-plugin-react: "npm:^7.27.1"
-    eslint-plugin-react-hooks: "npm:^4.3.0"
-    eslint-plugin-react-native: "npm:^4.0.0"
-    eslint-plugin-react-native-a11y: "npm:^3.2.1"
+    eslint-plugin-import: "npm:^2.28.1"
+    eslint-plugin-jest: "npm:^28.7.0"
+    eslint-plugin-prettier: "npm:^5.2.1"
+    eslint-plugin-promise: "npm:^7.1.0"
+    eslint-plugin-react: "npm:^7.35.0"
+    eslint-plugin-react-hooks: "npm:^4.6.0"
+    eslint-plugin-react-native: "npm:^4.1.0"
+    eslint-plugin-react-native-a11y: "npm:^3.4.1"
     eslint-restricted-globals: "npm:^0.2.0"
-    prettier: "npm:^2.4.1"
+    globals: "npm:^15.9.0"
+    prettier: "npm:^3.0.3"
   peerDependencies:
     eslint: ">=8.1.0"
-  checksum: 10c0/12daf8fe2cd96d8a1ef72a4af5b789b979036063aac02f571c5d3bcd56537db3f43be412d79a14fedba599f8fac9a3c2e5bd54244ae4b786aab0aabc18a0d5fc
+  checksum: 10c0/f99d38f625f00d9224519872a8a657474d044540f79de024cec0e90d2d5f3c30dff7310e8cba49740b6a15dac443af12491be4c3a00b7ae679024d2e7961826a
   languageName: node
   linkType: hard
 
@@ -2101,6 +2588,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@callstack/rspress-preset@npm:0.6.6":
+  version: 0.6.6
+  resolution: "@callstack/rspress-preset@npm:0.6.6"
+  dependencies:
+    "@callstack/rspress-theme": "npm:0.6.6"
+    "@rspress/plugin-sitemap": "npm:^2.0.8"
+    "@vercel/analytics": "npm:^2.0.1"
+    rsbuild-plugin-open-graph: "npm:^1.1.2"
+    zod: "npm:^4.3.6"
+  peerDependencies:
+    "@rspress/core": ^2.0.8
+  checksum: 10c0/2f45d4e6a231bd9ca36e809d6a55064bbe035ebf042ecf8d9e31e819fa6d8b703192488cf4a884ee2772be84a08d12dbc5a2d10aee5df453804b402882363929
+  languageName: node
+  linkType: hard
+
+"@callstack/rspress-theme@npm:0.6.6":
+  version: 0.6.6
+  resolution: "@callstack/rspress-theme@npm:0.6.6"
+  peerDependencies:
+    "@rspress/core": ^2.0.8
+    react: ^19.2.4
+    react-dom: ^19.2.4
+  checksum: 10c0/e361625a922389bb23ab223e2b3ff4720c976e16c016784fbb0da373ee816920b3316ce9ad3ede6e485d05aeec942568940e62d0854ff785dd66c839957848e3
+  languageName: node
+  linkType: hard
+
 "@cnakazawa/watch@npm:^1.0.3":
   version: 1.0.4
   resolution: "@cnakazawa/watch@npm:1.0.4"
@@ -2113,13 +2626,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@colors/colors@npm:1.5.0":
-  version: 1.5.0
-  resolution: "@colors/colors@npm:1.5.0"
-  checksum: 10c0/eb42729851adca56d19a08e48d5a1e95efd2a32c55ae0323de8119052be0510d4b7a1611f2abcbf28c044a6c11e6b7d38f99fccdad7429300c37a8ea5fb95b44
-  languageName: node
-  linkType: hard
-
 "@commitlint/cli@npm:^8.3.6":
   version: 8.3.6
   resolution: "@commitlint/cli@npm:8.3.6"
@@ -2282,730 +2788,190 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@discoveryjs/json-ext@npm:0.5.7":
-  version: 0.5.7
-  resolution: "@discoveryjs/json-ext@npm:0.5.7"
-  checksum: 10c0/e10f1b02b78e4812646ddf289b7d9f2cb567d336c363b266bd50cd223cf3de7c2c74018d91cd2613041568397ef3a4a2b500aba588c6e5bd78c38374ba68f38c
-  languageName: node
-  linkType: hard
-
-"@docsearch/css@npm:3.9.0":
-  version: 3.9.0
-  resolution: "@docsearch/css@npm:3.9.0"
-  checksum: 10c0/6300551e1cab7a5487063ec3581ae78ddaee3d93ec799556b451054448559b3ba849751b825fbd8b678367ef944bd82b3f11bc1d9e74e08e3cc48db40487b396
-  languageName: node
-  linkType: hard
-
-"@docsearch/react@npm:^3.1.1":
-  version: 3.9.0
-  resolution: "@docsearch/react@npm:3.9.0"
-  dependencies:
-    "@algolia/autocomplete-core": "npm:1.17.9"
-    "@algolia/autocomplete-preset-algolia": "npm:1.17.9"
-    "@docsearch/css": "npm:3.9.0"
-    algoliasearch: "npm:^5.14.2"
-  peerDependencies:
-    "@types/react": ">= 16.8.0 < 20.0.0"
-    react: ">= 16.8.0 < 20.0.0"
-    react-dom: ">= 16.8.0 < 20.0.0"
-    search-insights: ">= 1 < 3"
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    react:
-      optional: true
-    react-dom:
-      optional: true
-    search-insights:
-      optional: true
-  checksum: 10c0/5e737a5d9ef1daae1cd93e89870214c1ab0c36a3a2193e898db044bcc5d9de59f85228b2360ec0e8f10cdac7fd2fe3c6ec8a05d943ee7e17d6c1cef2e6e9ff2d
-  languageName: node
-  linkType: hard
-
-"@docusaurus/core@npm:2.4.3, @docusaurus/core@npm:^2.3.6":
-  version: 2.4.3
-  resolution: "@docusaurus/core@npm:2.4.3"
+"@egjs/hammerjs@npm:^2.0.17":
+  version: 2.0.17
+  resolution: "@egjs/hammerjs@npm:2.0.17"
   dependencies:
-    "@babel/core": "npm:^7.18.6"
-    "@babel/generator": "npm:^7.18.7"
-    "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3"
-    "@babel/plugin-transform-runtime": "npm:^7.18.6"
-    "@babel/preset-env": "npm:^7.18.6"
-    "@babel/preset-react": "npm:^7.18.6"
-    "@babel/preset-typescript": "npm:^7.18.6"
-    "@babel/runtime": "npm:^7.18.6"
-    "@babel/runtime-corejs3": "npm:^7.18.6"
-    "@babel/traverse": "npm:^7.18.8"
-    "@docusaurus/cssnano-preset": "npm:2.4.3"
-    "@docusaurus/logger": "npm:2.4.3"
-    "@docusaurus/mdx-loader": "npm:2.4.3"
-    "@docusaurus/react-loadable": "npm:5.5.2"
-    "@docusaurus/utils": "npm:2.4.3"
-    "@docusaurus/utils-common": "npm:2.4.3"
-    "@docusaurus/utils-validation": "npm:2.4.3"
-    "@slorber/static-site-generator-webpack-plugin": "npm:^4.0.7"
-    "@svgr/webpack": "npm:^6.2.1"
-    autoprefixer: "npm:^10.4.7"
-    babel-loader: "npm:^8.2.5"
-    babel-plugin-dynamic-import-node: "npm:^2.3.3"
-    boxen: "npm:^6.2.1"
-    chalk: "npm:^4.1.2"
-    chokidar: "npm:^3.5.3"
-    clean-css: "npm:^5.3.0"
-    cli-table3: "npm:^0.6.2"
-    combine-promises: "npm:^1.1.0"
-    commander: "npm:^5.1.0"
-    copy-webpack-plugin: "npm:^11.0.0"
-    core-js: "npm:^3.23.3"
-    css-loader: "npm:^6.7.1"
-    css-minimizer-webpack-plugin: "npm:^4.0.0"
-    cssnano: "npm:^5.1.12"
-    del: "npm:^6.1.1"
-    detect-port: "npm:^1.3.0"
-    escape-html: "npm:^1.0.3"
-    eta: "npm:^2.0.0"
-    file-loader: "npm:^6.2.0"
-    fs-extra: "npm:^10.1.0"
-    html-minifier-terser: "npm:^6.1.0"
-    html-tags: "npm:^3.2.0"
-    html-webpack-plugin: "npm:^5.5.0"
-    import-fresh: "npm:^3.3.0"
-    leven: "npm:^3.1.0"
-    lodash: "npm:^4.17.21"
-    mini-css-extract-plugin: "npm:^2.6.1"
-    postcss: "npm:^8.4.14"
-    postcss-loader: "npm:^7.0.0"
-    prompts: "npm:^2.4.2"
-    react-dev-utils: "npm:^12.0.1"
-    react-helmet-async: "npm:^1.3.0"
-    react-loadable: "npm:@docusaurus/react-loadable@5.5.2"
-    react-loadable-ssr-addon-v5-slorber: "npm:^1.0.1"
-    react-router: "npm:^5.3.3"
-    react-router-config: "npm:^5.1.1"
-    react-router-dom: "npm:^5.3.3"
-    rtl-detect: "npm:^1.0.4"
-    semver: "npm:^7.3.7"
-    serve-handler: "npm:^6.1.3"
-    shelljs: "npm:^0.8.5"
-    terser-webpack-plugin: "npm:^5.3.3"
-    tslib: "npm:^2.4.0"
-    update-notifier: "npm:^5.1.0"
-    url-loader: "npm:^4.1.1"
-    wait-on: "npm:^6.0.1"
-    webpack: "npm:^5.73.0"
-    webpack-bundle-analyzer: "npm:^4.5.0"
-    webpack-dev-server: "npm:^4.9.3"
-    webpack-merge: "npm:^5.8.0"
-    webpackbar: "npm:^5.0.2"
-  peerDependencies:
-    react: ^16.8.4 || ^17.0.0
-    react-dom: ^16.8.4 || ^17.0.0
-  bin:
-    docusaurus: bin/docusaurus.mjs
-  checksum: 10c0/afa7e504e537499d110cbf1aad58873864b3ddce8ee6891ad951bb43c8a5bbab39e46519c3b92506bd12476e25abfaa8330fbb261e2cc90ef18386e8e8e3e9e3
+    "@types/hammerjs": "npm:^2.0.36"
+  checksum: 10c0/dbedc15a0e633f887c08394bd636faf6a3abd05726dc0909a0e01209d5860a752d9eca5e512da623aecfabe665f49f1d035de3103eb2f9022c5cea692f9cc9be
   languageName: node
   linkType: hard
 
-"@docusaurus/cssnano-preset@npm:2.4.3":
-  version: 2.4.3
-  resolution: "@docusaurus/cssnano-preset@npm:2.4.3"
+"@emnapi/core@npm:1.10.0":
+  version: 1.10.0
+  resolution: "@emnapi/core@npm:1.10.0"
   dependencies:
-    cssnano-preset-advanced: "npm:^5.3.8"
-    postcss: "npm:^8.4.14"
-    postcss-sort-media-queries: "npm:^4.2.1"
+    "@emnapi/wasi-threads": "npm:1.2.1"
     tslib: "npm:^2.4.0"
-  checksum: 10c0/f069913f17d8ccacecb7ed9f471f3f7bfce9f98872de796e0751066546378f6dcfe74bf2c1cd11764c372c7ae4b1538f8564971d982c3209160b24d39fc7f383
+  checksum: 10c0/f51d08227857b60632de7714d708124f0e100a1462dde6df8221760939aa3204a73193830371830fac0716f3ccd2129f2cac1b17cd7d7958bc4da9018a296edb
   languageName: node
   linkType: hard
 
-"@docusaurus/logger@npm:2.4.3":
-  version: 2.4.3
-  resolution: "@docusaurus/logger@npm:2.4.3"
+"@emnapi/runtime@npm:1.10.0":
+  version: 1.10.0
+  resolution: "@emnapi/runtime@npm:1.10.0"
   dependencies:
-    chalk: "npm:^4.1.2"
     tslib: "npm:^2.4.0"
-  checksum: 10c0/a94de20b5c3742fb273878db497e16c14f130b7a245579f6eb293dab59b13833085317e864876e0e87f145a92cdf522bcb0ea2c98ae7dd7af00b8d6aa0da9229
+  checksum: 10c0/953f14991d1aefb92ee6f8eb27dea725e484791a53a0cb5f47d9e0087b9a2c929ff2e92adf95af15d6ad456db6300c6b761ebf72b50a875b874a83520b3ba093
   languageName: node
   linkType: hard
 
-"@docusaurus/mdx-loader@npm:2.4.3":
-  version: 2.4.3
-  resolution: "@docusaurus/mdx-loader@npm:2.4.3"
+"@emnapi/wasi-threads@npm:1.2.1":
+  version: 1.2.1
+  resolution: "@emnapi/wasi-threads@npm:1.2.1"
   dependencies:
-    "@babel/parser": "npm:^7.18.8"
-    "@babel/traverse": "npm:^7.18.8"
-    "@docusaurus/logger": "npm:2.4.3"
-    "@docusaurus/utils": "npm:2.4.3"
-    "@mdx-js/mdx": "npm:^1.6.22"
-    escape-html: "npm:^1.0.3"
-    file-loader: "npm:^6.2.0"
-    fs-extra: "npm:^10.1.0"
-    image-size: "npm:^1.0.1"
-    mdast-util-to-string: "npm:^2.0.0"
-    remark-emoji: "npm:^2.2.0"
-    stringify-object: "npm:^3.3.0"
     tslib: "npm:^2.4.0"
-    unified: "npm:^9.2.2"
-    unist-util-visit: "npm:^2.0.3"
-    url-loader: "npm:^4.1.1"
-    webpack: "npm:^5.73.0"
-  peerDependencies:
-    react: ^16.8.4 || ^17.0.0
-    react-dom: ^16.8.4 || ^17.0.0
-  checksum: 10c0/3daf13e28ecd152003977ec428cba3a06db347968e6a26d83b3191d35f036a852f536bf66dd2e8928086ad6c9d5496695bac6a75935cf4722234481f608b9cfa
+  checksum: 10c0/32fcfa81ab396533b2ec1f4082b1ff779a05d9c836bbbd3f4398405b0e6814c0d9503b7993130e37bc6941dbc1ded49f55e9700ae9ca4e803bab2b5bc5deb331
   languageName: node
   linkType: hard
 
-"@docusaurus/module-type-aliases@npm:2.4.3, @docusaurus/module-type-aliases@npm:^2.3.6":
-  version: 2.4.3
-  resolution: "@docusaurus/module-type-aliases@npm:2.4.3"
+"@emotion/is-prop-valid@npm:^0.8.8":
+  version: 0.8.8
+  resolution: "@emotion/is-prop-valid@npm:0.8.8"
   dependencies:
-    "@docusaurus/react-loadable": "npm:5.5.2"
-    "@docusaurus/types": "npm:2.4.3"
-    "@types/history": "npm:^4.7.11"
-    "@types/react": "npm:*"
-    "@types/react-router-config": "npm:*"
-    "@types/react-router-dom": "npm:*"
-    react-helmet-async: "npm:*"
-    react-loadable: "npm:@docusaurus/react-loadable@5.5.2"
-  peerDependencies:
-    react: "*"
-    react-dom: "*"
-  checksum: 10c0/9141a6d6162e4b5a610152a8323830696484e98484c1687661098103936b1ac8137c8131b55bff9e270975dcdba1b59426e561451d56fe1b2424c1485ec31906
+    "@emotion/memoize": "npm:0.7.4"
+  checksum: 10c0/f6be625f067c7fa56a12a4edaf090715616dc4fc7803c87212831f38c969350107b9709b1be54100e53153b18d9fa068eb4bf4f9ac66a37a8edf1bac9b64e279
   languageName: node
   linkType: hard
 
-"@docusaurus/plugin-content-blog@npm:2.4.3":
-  version: 2.4.3
-  resolution: "@docusaurus/plugin-content-blog@npm:2.4.3"
-  dependencies:
-    "@docusaurus/core": "npm:2.4.3"
-    "@docusaurus/logger": "npm:2.4.3"
-    "@docusaurus/mdx-loader": "npm:2.4.3"
-    "@docusaurus/types": "npm:2.4.3"
-    "@docusaurus/utils": "npm:2.4.3"
-    "@docusaurus/utils-common": "npm:2.4.3"
-    "@docusaurus/utils-validation": "npm:2.4.3"
-    cheerio: "npm:^1.0.0-rc.12"
-    feed: "npm:^4.2.2"
-    fs-extra: "npm:^10.1.0"
-    lodash: "npm:^4.17.21"
-    reading-time: "npm:^1.5.0"
-    tslib: "npm:^2.4.0"
-    unist-util-visit: "npm:^2.0.3"
-    utility-types: "npm:^3.10.0"
-    webpack: "npm:^5.73.0"
-  peerDependencies:
-    react: ^16.8.4 || ^17.0.0
-    react-dom: ^16.8.4 || ^17.0.0
-  checksum: 10c0/23869d0533bd9693ea9d32d7a638e9adb51a9a9dbbc189533f1f0c62092c613538448d10c9b9fc24b2e1fd4832d8f969574768191a2850bdb40fdd8e7b0470b6
-  languageName: node
-  linkType: hard
-
-"@docusaurus/plugin-content-docs@npm:2.4.3, @docusaurus/plugin-content-docs@npm:^2.0.0-rc.1":
-  version: 2.4.3
-  resolution: "@docusaurus/plugin-content-docs@npm:2.4.3"
-  dependencies:
-    "@docusaurus/core": "npm:2.4.3"
-    "@docusaurus/logger": "npm:2.4.3"
-    "@docusaurus/mdx-loader": "npm:2.4.3"
-    "@docusaurus/module-type-aliases": "npm:2.4.3"
-    "@docusaurus/types": "npm:2.4.3"
-    "@docusaurus/utils": "npm:2.4.3"
-    "@docusaurus/utils-validation": "npm:2.4.3"
-    "@types/react-router-config": "npm:^5.0.6"
-    combine-promises: "npm:^1.1.0"
-    fs-extra: "npm:^10.1.0"
-    import-fresh: "npm:^3.3.0"
-    js-yaml: "npm:^4.1.0"
-    lodash: "npm:^4.17.21"
-    tslib: "npm:^2.4.0"
-    utility-types: "npm:^3.10.0"
-    webpack: "npm:^5.73.0"
-  peerDependencies:
-    react: ^16.8.4 || ^17.0.0
-    react-dom: ^16.8.4 || ^17.0.0
-  checksum: 10c0/ad22c773a875c96e82b1ecb770d19d34edbf9acc23464ce2e5098049d2b1f6220493f94d77c3670668572a3e70dbd2e52dc1015137bcf0944d4cc8867dbc8cef
+"@emotion/memoize@npm:0.7.4":
+  version: 0.7.4
+  resolution: "@emotion/memoize@npm:0.7.4"
+  checksum: 10c0/b2376548fc147b43afd1ff005a80a1a025bd7eb4fb759fdb23e96e5ff290ee8ba16628a332848d600fb91c3cdc319eee5395fa33d8875e5d5a8c4ce18cddc18e
   languageName: node
   linkType: hard
 
-"@docusaurus/plugin-content-pages@npm:2.4.3":
-  version: 2.4.3
-  resolution: "@docusaurus/plugin-content-pages@npm:2.4.3"
+"@eslint-community/eslint-utils@npm:^4.4.0, @eslint-community/eslint-utils@npm:^4.8.0, @eslint-community/eslint-utils@npm:^4.9.1":
+  version: 4.9.1
+  resolution: "@eslint-community/eslint-utils@npm:4.9.1"
   dependencies:
-    "@docusaurus/core": "npm:2.4.3"
-    "@docusaurus/mdx-loader": "npm:2.4.3"
-    "@docusaurus/types": "npm:2.4.3"
-    "@docusaurus/utils": "npm:2.4.3"
-    "@docusaurus/utils-validation": "npm:2.4.3"
-    fs-extra: "npm:^10.1.0"
-    tslib: "npm:^2.4.0"
-    webpack: "npm:^5.73.0"
+    eslint-visitor-keys: "npm:^3.4.3"
   peerDependencies:
-    react: ^16.8.4 || ^17.0.0
-    react-dom: ^16.8.4 || ^17.0.0
-  checksum: 10c0/c488027a1f119e207f264a96fdb5fba33bb3ec02b01d1ecbe0beaddc66773e446aca58e8ae2f62b705e9ace0789d02f9731902a150d3c1b60a3e9b75ca9c9839
+    eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+  checksum: 10c0/dc4ab5e3e364ef27e33666b11f4b86e1a6c1d7cbf16f0c6ff87b1619b3562335e9201a3d6ce806221887ff780ec9d828962a290bb910759fd40a674686503f02
   languageName: node
   linkType: hard
 
-"@docusaurus/plugin-debug@npm:2.4.3":
-  version: 2.4.3
-  resolution: "@docusaurus/plugin-debug@npm:2.4.3"
-  dependencies:
-    "@docusaurus/core": "npm:2.4.3"
-    "@docusaurus/types": "npm:2.4.3"
-    "@docusaurus/utils": "npm:2.4.3"
-    fs-extra: "npm:^10.1.0"
-    react-json-view: "npm:^1.21.3"
-    tslib: "npm:^2.4.0"
-  peerDependencies:
-    react: ^16.8.4 || ^17.0.0
-    react-dom: ^16.8.4 || ^17.0.0
-  checksum: 10c0/64cd8c0c9868f4da2b1a19525c1af3a5e8ee8284a29053243afbbb888542c506f6a0c30711042dca31d170ff6fada5b2f5736603c4b2ea0017155ec9659aa77f
+"@eslint-community/regexpp@npm:^4.12.1, @eslint-community/regexpp@npm:^4.12.2":
+  version: 4.12.2
+  resolution: "@eslint-community/regexpp@npm:4.12.2"
+  checksum: 10c0/fddcbc66851b308478d04e302a4d771d6917a0b3740dc351513c0da9ca2eab8a1adf99f5e0aa7ab8b13fa0df005c81adeee7e63a92f3effd7d367a163b721c2d
   languageName: node
   linkType: hard
 
-"@docusaurus/plugin-google-analytics@npm:2.4.3":
-  version: 2.4.3
-  resolution: "@docusaurus/plugin-google-analytics@npm:2.4.3"
+"@eslint/compat@npm:^1.1.1":
+  version: 1.4.1
+  resolution: "@eslint/compat@npm:1.4.1"
   dependencies:
-    "@docusaurus/core": "npm:2.4.3"
-    "@docusaurus/types": "npm:2.4.3"
-    "@docusaurus/utils-validation": "npm:2.4.3"
-    tslib: "npm:^2.4.0"
+    "@eslint/core": "npm:^0.17.0"
   peerDependencies:
-    react: ^16.8.4 || ^17.0.0
-    react-dom: ^16.8.4 || ^17.0.0
-  checksum: 10c0/2998a4ed28d046baa6c443a57b9420fb3f4d78d318c076308b4c1890fc8d05b3f4f7236eba271c1ed88cc80621314eb176f06f29f7ee23274c62d916916a7dee
+    eslint: ^8.40 || 9
+  peerDependenciesMeta:
+    eslint:
+      optional: true
+  checksum: 10c0/46f5ff884873c2e2366df55dd7b2d6b12f7f852bfba8e2a48dae4819cc5e58756deefa9b7f87f1b107af725ee883a05fcc02caf969b58fb142e790c6036a0450
   languageName: node
   linkType: hard
 
-"@docusaurus/plugin-google-gtag@npm:2.4.3":
-  version: 2.4.3
-  resolution: "@docusaurus/plugin-google-gtag@npm:2.4.3"
+"@eslint/config-array@npm:^0.21.2":
+  version: 0.21.2
+  resolution: "@eslint/config-array@npm:0.21.2"
   dependencies:
-    "@docusaurus/core": "npm:2.4.3"
-    "@docusaurus/types": "npm:2.4.3"
-    "@docusaurus/utils-validation": "npm:2.4.3"
-    tslib: "npm:^2.4.0"
-  peerDependencies:
-    react: ^16.8.4 || ^17.0.0
-    react-dom: ^16.8.4 || ^17.0.0
-  checksum: 10c0/e978622437b19fe6873c301cb2da5ff64e6d464bb10cac509b07eef01622f5518f4b41c3c91fb8a384017b0414e32439970dbacef61cddba8279615eb59a011c
+    "@eslint/object-schema": "npm:^2.1.7"
+    debug: "npm:^4.3.1"
+    minimatch: "npm:^3.1.5"
+  checksum: 10c0/89dfe815d18456177c0a1f238daf4593107fd20298b3598e0103054360d3b8d09d967defd8318f031185d68df1f95cfa68becf1390a9c5c6887665f1475142e3
   languageName: node
   linkType: hard
 
-"@docusaurus/plugin-google-tag-manager@npm:2.4.3":
-  version: 2.4.3
-  resolution: "@docusaurus/plugin-google-tag-manager@npm:2.4.3"
+"@eslint/config-helpers@npm:^0.4.2":
+  version: 0.4.2
+  resolution: "@eslint/config-helpers@npm:0.4.2"
   dependencies:
-    "@docusaurus/core": "npm:2.4.3"
-    "@docusaurus/types": "npm:2.4.3"
-    "@docusaurus/utils-validation": "npm:2.4.3"
-    tslib: "npm:^2.4.0"
-  peerDependencies:
-    react: ^16.8.4 || ^17.0.0
-    react-dom: ^16.8.4 || ^17.0.0
-  checksum: 10c0/d17e82aa6bbaa6f25752677dc50f3343212e112035ab5c2dfc065126d287f93354adfe655c726708be59de3e66c0cecdf6feb12fd5eb36b8939ed26ad4338a10
+    "@eslint/core": "npm:^0.17.0"
+  checksum: 10c0/92efd7a527b2d17eb1a148409d71d80f9ac160b565ac73ee092252e8bf08ecd08670699f46b306b94f13d22e88ac88a612120e7847570dd7cdc72f234d50dcb4
   languageName: node
   linkType: hard
 
-"@docusaurus/plugin-sitemap@npm:2.4.3":
-  version: 2.4.3
-  resolution: "@docusaurus/plugin-sitemap@npm:2.4.3"
+"@eslint/core@npm:^0.17.0":
+  version: 0.17.0
+  resolution: "@eslint/core@npm:0.17.0"
   dependencies:
-    "@docusaurus/core": "npm:2.4.3"
-    "@docusaurus/logger": "npm:2.4.3"
-    "@docusaurus/types": "npm:2.4.3"
-    "@docusaurus/utils": "npm:2.4.3"
-    "@docusaurus/utils-common": "npm:2.4.3"
-    "@docusaurus/utils-validation": "npm:2.4.3"
-    fs-extra: "npm:^10.1.0"
-    sitemap: "npm:^7.1.1"
-    tslib: "npm:^2.4.0"
-  peerDependencies:
-    react: ^16.8.4 || ^17.0.0
-    react-dom: ^16.8.4 || ^17.0.0
-  checksum: 10c0/da268caa3ef80c6581c66bcc141ab4ead9256be45c92acfbb9fa1ddf1288f1eaeae482bf5957193efdfa8b1723696f3d7d4f2cc256d0db009fcc3cea7f53b9e7
+    "@types/json-schema": "npm:^7.0.15"
+  checksum: 10c0/9a580f2246633bc752298e7440dd942ec421860d1946d0801f0423830e67887e4aeba10ab9a23d281727a978eb93d053d1922a587d502942a713607f40ed704e
   languageName: node
   linkType: hard
 
-"@docusaurus/preset-classic@npm:^2.3.6":
-  version: 2.4.3
-  resolution: "@docusaurus/preset-classic@npm:2.4.3"
+"@eslint/eslintrc@npm:^3.3.5":
+  version: 3.3.5
+  resolution: "@eslint/eslintrc@npm:3.3.5"
   dependencies:
-    "@docusaurus/core": "npm:2.4.3"
-    "@docusaurus/plugin-content-blog": "npm:2.4.3"
-    "@docusaurus/plugin-content-docs": "npm:2.4.3"
-    "@docusaurus/plugin-content-pages": "npm:2.4.3"
-    "@docusaurus/plugin-debug": "npm:2.4.3"
-    "@docusaurus/plugin-google-analytics": "npm:2.4.3"
-    "@docusaurus/plugin-google-gtag": "npm:2.4.3"
-    "@docusaurus/plugin-google-tag-manager": "npm:2.4.3"
-    "@docusaurus/plugin-sitemap": "npm:2.4.3"
-    "@docusaurus/theme-classic": "npm:2.4.3"
-    "@docusaurus/theme-common": "npm:2.4.3"
-    "@docusaurus/theme-search-algolia": "npm:2.4.3"
-    "@docusaurus/types": "npm:2.4.3"
-  peerDependencies:
-    react: ^16.8.4 || ^17.0.0
-    react-dom: ^16.8.4 || ^17.0.0
-  checksum: 10c0/2ab1e2a8f4e3b80edf1b6e8900d0c49976ff1e05b74ee5cc1d9c41b805f1dbc5948f1ad01189278682f2cbb4269dfa1d0ea0e73e3defc7406522ff047bc06321
+    ajv: "npm:^6.14.0"
+    debug: "npm:^4.3.2"
+    espree: "npm:^10.0.1"
+    globals: "npm:^14.0.0"
+    ignore: "npm:^5.2.0"
+    import-fresh: "npm:^3.2.1"
+    js-yaml: "npm:^4.1.1"
+    minimatch: "npm:^3.1.5"
+    strip-json-comments: "npm:^3.1.1"
+  checksum: 10c0/9fb9f1ca65e46d6173966e3aaa5bd353e3a65d7f1f582bebf77f578fab7d7960a399fac1ecfb1e7d52bd61f5cefd6531087ca52a3a3c388f2e1b4f1ebd3da8b7
   languageName: node
   linkType: hard
 
-"@docusaurus/react-loadable@npm:5.5.2, react-loadable@npm:@docusaurus/react-loadable@5.5.2":
-  version: 5.5.2
-  resolution: "@docusaurus/react-loadable@npm:5.5.2"
-  dependencies:
-    "@types/react": "npm:*"
-    prop-types: "npm:^15.6.2"
-  peerDependencies:
-    react: "*"
-  checksum: 10c0/3f6a335d55c811c4fd40300ff0d87ae88f44f96e9c43a4c3f54f1c19b7a55bae601e43d66f797074e204699fd6abb69affa65fc4c5a819e8f1c2adb8a912da46
+"@eslint/js@npm:9.39.4":
+  version: 9.39.4
+  resolution: "@eslint/js@npm:9.39.4"
+  checksum: 10c0/5aa7dea2cbc5decf7f5e3b0c6f86a084ccee0f792d288ca8e839f8bc1b64e03e227068968e49b26096e6f71fd857ab6e42691d1b993826b9a3883f1bdd7a0e46
   languageName: node
   linkType: hard
 
-"@docusaurus/remark-plugin-npm2yarn@npm:^2.3.6":
-  version: 2.4.3
-  resolution: "@docusaurus/remark-plugin-npm2yarn@npm:2.4.3"
-  dependencies:
-    npm-to-yarn: "npm:^2.0.0"
-    tslib: "npm:^2.4.1"
-    unist-util-visit: "npm:^2.0.3"
-  checksum: 10c0/e80fe27f9d366154686c3db6328d37871d192ef6dbc0762f75852b9705cb1d193832aa74ba73cff375c175845f84c05a202165d17f2f2a2f9c525ecf4aa51f8b
-  languageName: node
-  linkType: hard
-
-"@docusaurus/theme-classic@npm:2.4.3":
-  version: 2.4.3
-  resolution: "@docusaurus/theme-classic@npm:2.4.3"
-  dependencies:
-    "@docusaurus/core": "npm:2.4.3"
-    "@docusaurus/mdx-loader": "npm:2.4.3"
-    "@docusaurus/module-type-aliases": "npm:2.4.3"
-    "@docusaurus/plugin-content-blog": "npm:2.4.3"
-    "@docusaurus/plugin-content-docs": "npm:2.4.3"
-    "@docusaurus/plugin-content-pages": "npm:2.4.3"
-    "@docusaurus/theme-common": "npm:2.4.3"
-    "@docusaurus/theme-translations": "npm:2.4.3"
-    "@docusaurus/types": "npm:2.4.3"
-    "@docusaurus/utils": "npm:2.4.3"
-    "@docusaurus/utils-common": "npm:2.4.3"
-    "@docusaurus/utils-validation": "npm:2.4.3"
-    "@mdx-js/react": "npm:^1.6.22"
-    clsx: "npm:^1.2.1"
-    copy-text-to-clipboard: "npm:^3.0.1"
-    infima: "npm:0.2.0-alpha.43"
-    lodash: "npm:^4.17.21"
-    nprogress: "npm:^0.2.0"
-    postcss: "npm:^8.4.14"
-    prism-react-renderer: "npm:^1.3.5"
-    prismjs: "npm:^1.28.0"
-    react-router-dom: "npm:^5.3.3"
-    rtlcss: "npm:^3.5.0"
-    tslib: "npm:^2.4.0"
-    utility-types: "npm:^3.10.0"
-  peerDependencies:
-    react: ^16.8.4 || ^17.0.0
-    react-dom: ^16.8.4 || ^17.0.0
-  checksum: 10c0/18d2c997e416f8f933781db522f48ed2ee5d89ea80822f33ab0b4056d3866f9890cf19fdbd8e90839625aad858dcc7c63c1cf52c737a1d4ac8272606e505ec88
+"@eslint/object-schema@npm:^2.1.7":
+  version: 2.1.7
+  resolution: "@eslint/object-schema@npm:2.1.7"
+  checksum: 10c0/936b6e499853d1335803f556d526c86f5fe2259ed241bc665000e1d6353828edd913feed43120d150adb75570cae162cf000b5b0dfc9596726761c36b82f4e87
   languageName: node
   linkType: hard
 
-"@docusaurus/theme-common@npm:2.4.3":
-  version: 2.4.3
-  resolution: "@docusaurus/theme-common@npm:2.4.3"
+"@eslint/plugin-kit@npm:^0.4.1":
+  version: 0.4.1
+  resolution: "@eslint/plugin-kit@npm:0.4.1"
   dependencies:
-    "@docusaurus/mdx-loader": "npm:2.4.3"
-    "@docusaurus/module-type-aliases": "npm:2.4.3"
-    "@docusaurus/plugin-content-blog": "npm:2.4.3"
-    "@docusaurus/plugin-content-docs": "npm:2.4.3"
-    "@docusaurus/plugin-content-pages": "npm:2.4.3"
-    "@docusaurus/utils": "npm:2.4.3"
-    "@docusaurus/utils-common": "npm:2.4.3"
-    "@types/history": "npm:^4.7.11"
-    "@types/react": "npm:*"
-    "@types/react-router-config": "npm:*"
-    clsx: "npm:^1.2.1"
-    parse-numeric-range: "npm:^1.3.0"
-    prism-react-renderer: "npm:^1.3.5"
-    tslib: "npm:^2.4.0"
-    use-sync-external-store: "npm:^1.2.0"
-    utility-types: "npm:^3.10.0"
-  peerDependencies:
-    react: ^16.8.4 || ^17.0.0
-    react-dom: ^16.8.4 || ^17.0.0
-  checksum: 10c0/bb0c6e253a77a033d8041b7e042e67d28feb3fbc99a3c753fb45e1b4ffa38ce9f24d21b3363ff971d1d63bc34025ec5baf09a476a7c8eba372c94c5db24e8b34
-  languageName: node
-  linkType: hard
-
-"@docusaurus/theme-search-algolia@npm:2.4.3":
-  version: 2.4.3
-  resolution: "@docusaurus/theme-search-algolia@npm:2.4.3"
-  dependencies:
-    "@docsearch/react": "npm:^3.1.1"
-    "@docusaurus/core": "npm:2.4.3"
-    "@docusaurus/logger": "npm:2.4.3"
-    "@docusaurus/plugin-content-docs": "npm:2.4.3"
-    "@docusaurus/theme-common": "npm:2.4.3"
-    "@docusaurus/theme-translations": "npm:2.4.3"
-    "@docusaurus/utils": "npm:2.4.3"
-    "@docusaurus/utils-validation": "npm:2.4.3"
-    algoliasearch: "npm:^4.13.1"
-    algoliasearch-helper: "npm:^3.10.0"
-    clsx: "npm:^1.2.1"
-    eta: "npm:^2.0.0"
-    fs-extra: "npm:^10.1.0"
-    lodash: "npm:^4.17.21"
-    tslib: "npm:^2.4.0"
-    utility-types: "npm:^3.10.0"
-  peerDependencies:
-    react: ^16.8.4 || ^17.0.0
-    react-dom: ^16.8.4 || ^17.0.0
-  checksum: 10c0/657974a334ecaf96e8901af1c56c716b2d18e188420c828740dea12e04f49897108c621fb49319ce2b6ed82fc09ceb6931deb242ac35d0a42b96e9fad4275567
+    "@eslint/core": "npm:^0.17.0"
+    levn: "npm:^0.4.1"
+  checksum: 10c0/51600f78b798f172a9915dffb295e2ffb44840d583427bc732baf12ecb963eb841b253300e657da91d890f4b323d10a1bd12934bf293e3018d8bb66fdce5217b
   languageName: node
   linkType: hard
 
-"@docusaurus/theme-translations@npm:2.4.3, @docusaurus/theme-translations@npm:^2.0.0-rc.1":
-  version: 2.4.3
-  resolution: "@docusaurus/theme-translations@npm:2.4.3"
+"@expo/cli@npm:^56.1.7":
+  version: 56.1.7
+  resolution: "@expo/cli@npm:56.1.7"
   dependencies:
-    fs-extra: "npm:^10.1.0"
-    tslib: "npm:^2.4.0"
-  checksum: 10c0/6b3765b73453e05e2d4b4f90a30373d1e8511ede04a6f0134157a7d79ef0f27d7a8990b30e932c769fc51058942943b01b82d73c3acae7d2573a7075e00d97dd
-  languageName: node
-  linkType: hard
-
-"@docusaurus/types@npm:2.4.3":
-  version: 2.4.3
-  resolution: "@docusaurus/types@npm:2.4.3"
-  dependencies:
-    "@types/history": "npm:^4.7.11"
-    "@types/react": "npm:*"
-    commander: "npm:^5.1.0"
-    joi: "npm:^17.6.0"
-    react-helmet-async: "npm:^1.3.0"
-    utility-types: "npm:^3.10.0"
-    webpack: "npm:^5.73.0"
-    webpack-merge: "npm:^5.8.0"
-  peerDependencies:
-    react: ^16.8.4 || ^17.0.0
-    react-dom: ^16.8.4 || ^17.0.0
-  checksum: 10c0/71ae109849862629033cc2f275b1064c1e2dde7f39b065793320fc1a442c40353fcc8730a7274da9814c577a059f0ddb956429228ad407ada6c0f5b5816d0aee
-  languageName: node
-  linkType: hard
-
-"@docusaurus/utils-common@npm:2.4.3, @docusaurus/utils-common@npm:^2.0.0-rc.1":
-  version: 2.4.3
-  resolution: "@docusaurus/utils-common@npm:2.4.3"
-  dependencies:
-    tslib: "npm:^2.4.0"
-  peerDependencies:
-    "@docusaurus/types": "*"
-  peerDependenciesMeta:
-    "@docusaurus/types":
-      optional: true
-  checksum: 10c0/6810da88b7b2df0031ec40e9f73f34eef6c8457a40a5719eef8c8e351f880a0666570a0ed77aea9b3d85c17fedc77b9a8b58ac4426fb4f11e34bc6994601ced3
-  languageName: node
-  linkType: hard
-
-"@docusaurus/utils-validation@npm:2.4.3, @docusaurus/utils-validation@npm:^2.0.0-rc.1":
-  version: 2.4.3
-  resolution: "@docusaurus/utils-validation@npm:2.4.3"
-  dependencies:
-    "@docusaurus/logger": "npm:2.4.3"
-    "@docusaurus/utils": "npm:2.4.3"
-    joi: "npm:^17.6.0"
-    js-yaml: "npm:^4.1.0"
-    tslib: "npm:^2.4.0"
-  checksum: 10c0/cb8e2dc5201870ef7c42e89389ab9f0d43c2ff5be26793aa1be9432d9d3510f1696a41108e99aac439308606d8496d5b038776c4037f3925aadedeae1d56148f
-  languageName: node
-  linkType: hard
-
-"@docusaurus/utils@npm:2.4.3, @docusaurus/utils@npm:^2.0.0-rc.1":
-  version: 2.4.3
-  resolution: "@docusaurus/utils@npm:2.4.3"
-  dependencies:
-    "@docusaurus/logger": "npm:2.4.3"
-    "@svgr/webpack": "npm:^6.2.1"
-    escape-string-regexp: "npm:^4.0.0"
-    file-loader: "npm:^6.2.0"
-    fs-extra: "npm:^10.1.0"
-    github-slugger: "npm:^1.4.0"
-    globby: "npm:^11.1.0"
-    gray-matter: "npm:^4.0.3"
-    js-yaml: "npm:^4.1.0"
-    lodash: "npm:^4.17.21"
-    micromatch: "npm:^4.0.5"
-    resolve-pathname: "npm:^3.0.0"
-    shelljs: "npm:^0.8.5"
-    tslib: "npm:^2.4.0"
-    url-loader: "npm:^4.1.1"
-    webpack: "npm:^5.73.0"
-  peerDependencies:
-    "@docusaurus/types": "*"
-  peerDependenciesMeta:
-    "@docusaurus/types":
-      optional: true
-  checksum: 10c0/84e11e0245b11f7c611297ede2deb4598dbfb62e14a7146199f6bfb0306c35d015336a2c220fb902e4d35ba432ffe86bc48a03125c4fd1f295570965f58065d2
-  languageName: node
-  linkType: hard
-
-"@easyops-cn/autocomplete.js@npm:^0.38.1":
-  version: 0.38.1
-  resolution: "@easyops-cn/autocomplete.js@npm:0.38.1"
-  dependencies:
-    cssesc: "npm:^3.0.0"
-    immediate: "npm:^3.2.3"
-  checksum: 10c0/114132fc71811cb319463ef9592179b99ab6265030e612c0c790839929764c6f632d7e155784fe89921365005ddf838cb83ed428799de67c581d25e1110bc84d
-  languageName: node
-  linkType: hard
-
-"@easyops-cn/docusaurus-search-local@npm:^0.33.4":
-  version: 0.33.6
-  resolution: "@easyops-cn/docusaurus-search-local@npm:0.33.6"
-  dependencies:
-    "@docusaurus/plugin-content-docs": "npm:^2.0.0-rc.1"
-    "@docusaurus/theme-translations": "npm:^2.0.0-rc.1"
-    "@docusaurus/utils": "npm:^2.0.0-rc.1"
-    "@docusaurus/utils-common": "npm:^2.0.0-rc.1"
-    "@docusaurus/utils-validation": "npm:^2.0.0-rc.1"
-    "@easyops-cn/autocomplete.js": "npm:^0.38.1"
-    "@node-rs/jieba": "npm:^1.6.0"
-    cheerio: "npm:^1.0.0-rc.3"
-    clsx: "npm:^1.1.1"
-    debug: "npm:^4.2.0"
-    fs-extra: "npm:^10.0.0"
-    klaw-sync: "npm:^6.0.0"
-    lunr: "npm:^2.3.9"
-    lunr-languages: "npm:^1.4.0"
-    mark.js: "npm:^8.11.1"
-    tslib: "npm:^2.4.0"
-  peerDependencies:
-    "@docusaurus/theme-common": ^2.0.0-rc.1
-    react: ^16.14.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/ba6b141afdc16b50ee0141742b1c7ee16662ec49b735dea90e2348327cc989111ab1fdd4774defcae550ff77bfd4d0506adb14a0836b9b2af3c4d63c47dfeb8e
-  languageName: node
-  linkType: hard
-
-"@egjs/hammerjs@npm:^2.0.17":
-  version: 2.0.17
-  resolution: "@egjs/hammerjs@npm:2.0.17"
-  dependencies:
-    "@types/hammerjs": "npm:^2.0.36"
-  checksum: 10c0/dbedc15a0e633f887c08394bd636faf6a3abd05726dc0909a0e01209d5860a752d9eca5e512da623aecfabe665f49f1d035de3103eb2f9022c5cea692f9cc9be
-  languageName: node
-  linkType: hard
-
-"@emnapi/core@npm:^1.4.3":
-  version: 1.8.1
-  resolution: "@emnapi/core@npm:1.8.1"
-  dependencies:
-    "@emnapi/wasi-threads": "npm:1.1.0"
-    tslib: "npm:^2.4.0"
-  checksum: 10c0/2c242f4b49779bac403e1cbcc98edacdb1c8ad36562408ba9a20663824669e930bc8493be46a2522d9dc946b8d96cd7073970bae914928c7671b5221c85b432e
-  languageName: node
-  linkType: hard
-
-"@emnapi/runtime@npm:^1.4.3":
-  version: 1.8.1
-  resolution: "@emnapi/runtime@npm:1.8.1"
-  dependencies:
-    tslib: "npm:^2.4.0"
-  checksum: 10c0/f4929d75e37aafb24da77d2f58816761fe3f826aad2e37fa6d4421dac9060cbd5098eea1ac3c9ecc4526b89deb58153852fa432f87021dc57863f2ff726d713f
-  languageName: node
-  linkType: hard
-
-"@emnapi/wasi-threads@npm:1.1.0":
-  version: 1.1.0
-  resolution: "@emnapi/wasi-threads@npm:1.1.0"
-  dependencies:
-    tslib: "npm:^2.4.0"
-  checksum: 10c0/e6d54bf2b1e64cdd83d2916411e44e579b6ae35d5def0dea61a3c452d9921373044dff32a8b8473ae60c80692bdc39323e98b96a3f3d87ba6886b24dd0ef7ca1
-  languageName: node
-  linkType: hard
-
-"@emotion/is-prop-valid@npm:^0.8.8":
-  version: 0.8.8
-  resolution: "@emotion/is-prop-valid@npm:0.8.8"
-  dependencies:
-    "@emotion/memoize": "npm:0.7.4"
-  checksum: 10c0/f6be625f067c7fa56a12a4edaf090715616dc4fc7803c87212831f38c969350107b9709b1be54100e53153b18d9fa068eb4bf4f9ac66a37a8edf1bac9b64e279
-  languageName: node
-  linkType: hard
-
-"@emotion/memoize@npm:0.7.4":
-  version: 0.7.4
-  resolution: "@emotion/memoize@npm:0.7.4"
-  checksum: 10c0/b2376548fc147b43afd1ff005a80a1a025bd7eb4fb759fdb23e96e5ff290ee8ba16628a332848d600fb91c3cdc319eee5395fa33d8875e5d5a8c4ce18cddc18e
-  languageName: node
-  linkType: hard
-
-"@eslint-community/eslint-utils@npm:^4.2.0":
-  version: 4.9.1
-  resolution: "@eslint-community/eslint-utils@npm:4.9.1"
-  dependencies:
-    eslint-visitor-keys: "npm:^3.4.3"
-  peerDependencies:
-    eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-  checksum: 10c0/dc4ab5e3e364ef27e33666b11f4b86e1a6c1d7cbf16f0c6ff87b1619b3562335e9201a3d6ce806221887ff780ec9d828962a290bb910759fd40a674686503f02
-  languageName: node
-  linkType: hard
-
-"@eslint-community/regexpp@npm:^4.4.0":
-  version: 4.12.2
-  resolution: "@eslint-community/regexpp@npm:4.12.2"
-  checksum: 10c0/fddcbc66851b308478d04e302a4d771d6917a0b3740dc351513c0da9ca2eab8a1adf99f5e0aa7ab8b13fa0df005c81adeee7e63a92f3effd7d367a163b721c2d
-  languageName: node
-  linkType: hard
-
-"@eslint/eslintrc@npm:^1.4.1":
-  version: 1.4.1
-  resolution: "@eslint/eslintrc@npm:1.4.1"
-  dependencies:
-    ajv: "npm:^6.12.4"
-    debug: "npm:^4.3.2"
-    espree: "npm:^9.4.0"
-    globals: "npm:^13.19.0"
-    ignore: "npm:^5.2.0"
-    import-fresh: "npm:^3.2.1"
-    js-yaml: "npm:^4.1.0"
-    minimatch: "npm:^3.1.2"
-    strip-json-comments: "npm:^3.1.1"
-  checksum: 10c0/1030e1a4a355f8e4629e19d3d45448a05a8e65ecf49154bebc66599d038f155e830498437cbfc7246e8084adc1f814904f696c2461707cc8c73be961e2e8ae5a
-  languageName: node
-  linkType: hard
-
-"@expo/cli@npm:54.0.21":
-  version: 54.0.21
-  resolution: "@expo/cli@npm:54.0.21"
-  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/config": "npm:~56.0.8"
+    "@expo/config-plugins": "npm:~56.0.7"
     "@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.13"
-    "@expo/osascript": "npm:^2.3.8"
-    "@expo/package-manager": "npm:^1.9.9"
-    "@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/env": "npm:~2.3.0"
+    "@expo/image-utils": "npm:^0.10.0"
+    "@expo/inline-modules": "npm:^0.0.9"
+    "@expo/json-file": "npm:^10.2.0"
+    "@expo/log-box": "npm:^56.0.12"
+    "@expo/metro": "npm:~56.0.0"
+    "@expo/metro-config": "npm:~56.0.11"
+    "@expo/metro-file-map": "npm:^56.0.3"
+    "@expo/osascript": "npm:^2.6.0"
+    "@expo/package-manager": "npm:^1.12.0"
+    "@expo/plist": "npm:^0.7.0"
+    "@expo/prebuild-config": "npm:^56.0.10"
+    "@expo/require-utils": "npm:^56.1.2"
+    "@expo/router-server": "npm:^56.0.10"
+    "@expo/schema-utils": "npm:^56.0.0"
+    "@expo/spawn-async": "npm:^1.8.0"
     "@expo/ws-tunnel": "npm:^1.0.1"
-    "@expo/xcpretty": "npm:^4.3.0"
-    "@react-native/dev-middleware": "npm:0.81.5"
-    "@urql/core": "npm:^5.0.6"
-    "@urql/exchange-retry": "npm:^1.3.0"
+    "@expo/xcpretty": "npm:^4.4.4"
+    "@react-native/dev-middleware": "npm:0.85.3"
     accepts: "npm:^1.3.8"
     arg: "npm:^5.0.2"
-    better-opn: "npm:~3.0.2"
     bplist-creator: "npm:0.1.0"
     bplist-parser: "npm:^0.3.1"
     chalk: "npm:^4.0.0"
@@ -3013,38 +2979,31 @@ __metadata:
     compression: "npm:^1.7.4"
     connect: "npm:^3.7.0"
     debug: "npm:^4.3.4"
-    env-editor: "npm:^0.4.1"
-    expo-server: "npm:^1.0.5"
-    freeport-async: "npm:^2.0.0"
+    dnssd-advertise: "npm:^1.1.4"
+    expo-server: "npm:^56.0.4"
+    fetch-nodeshim: "npm:^0.4.10"
     getenv: "npm:^2.0.0"
     glob: "npm:^13.0.0"
-    lan-network: "npm:^0.1.6"
-    minimatch: "npm:^9.0.0"
+    lan-network: "npm:^0.2.1"
+    multitars: "npm:^1.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"
+    picomatch: "npm:^4.0.4"
     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.3"
     semver: "npm:^7.6.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:^7.5.2"
     terminal-link: "npm:^2.1.1"
-    undici: "npm:^6.18.2"
+    toqr: "npm:^0.1.1"
     wrap-ansi: "npm:^7.0.0"
     ws: "npm:^8.12.1"
+    zod: "npm:^3.25.76"
   peerDependencies:
     expo: "*"
     expo-router: "*"
@@ -3055,8 +3014,8 @@ __metadata:
     react-native:
       optional: true
   bin:
-    expo-internal: build/bin/cli
-  checksum: 10c0/3d4c8b7fa9a8934bf029f8b918b6dd6cd240f0120163b765fc733262caf63981d07e62a967734d793c9511363513005ad6d45d4e03546ba594bbdb6a0a81ce3e
+    expo-internal: main.js
+  checksum: 10c0/d85fd954379263537d514d1649c54d12af0b3a0157f5a19e34545268e93edc32ca38410324955046bc83b4f6bc6cd576b367f955585350c2fb5784413951379d
   languageName: node
   linkType: hard
 
@@ -3069,53 +3028,95 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@expo/config-plugins@npm:~54.0.4":
-  version: 54.0.4
-  resolution: "@expo/config-plugins@npm:54.0.4"
+"@expo/config-plugins@npm:~56.0.7":
+  version: 56.0.7
+  resolution: "@expo/config-plugins@npm:56.0.7"
   dependencies:
-    "@expo/config-types": "npm:^54.0.10"
-    "@expo/json-file": "npm:~10.0.8"
-    "@expo/plist": "npm:^0.4.8"
+    "@expo/config-types": "npm:^56.0.5"
+    "@expo/json-file": "npm:~10.2.0"
+    "@expo/plist": "npm:^0.7.0"
+    "@expo/require-utils": "npm:^56.1.2"
+    "@expo/sdk-runtime-versions": "npm:^1.0.0"
+    chalk: "npm:^4.1.2"
+    debug: "npm:^4.3.5"
+    getenv: "npm:^2.0.0"
+    glob: "npm:^13.0.0"
+    semver: "npm:^7.5.4"
+    slugify: "npm:^1.6.6"
+    xcode: "npm:^3.0.1"
+    xml2js: "npm:0.6.0"
+  checksum: 10c0/072883de80ddba355c159685e5c5cd92036e8a5069349bc2c93ccfcfa7458c36d3268d316ed86ae553a508d838e1fe4ba40058a00580f4f38191c328a1acf30c
+  languageName: node
+  linkType: hard
+
+"@expo/config-plugins@npm:~56.0.8":
+  version: 56.0.9
+  resolution: "@expo/config-plugins@npm:56.0.9"
+  dependencies:
+    "@expo/config-types": "npm:^56.0.6"
+    "@expo/json-file": "npm:~10.2.0"
+    "@expo/plist": "npm:^0.7.0"
+    "@expo/require-utils": "npm:^56.1.3"
     "@expo/sdk-runtime-versions": "npm:^1.0.0"
     chalk: "npm:^4.1.2"
     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/c7537485a0e883d8a98f1fb93335a1f56d4be2c2a4b5676ba09a8e9253190996241022f841c437e64578fa63b20b6ecf843d88b52930b890fa199d7aa188253f
+  checksum: 10c0/401be0071d0bdc1e86431a8dd2b19dfa117ad04b2c58c583b62a5ab5ebb93be3eed26857bdbec9433cb9f554771dda32ea2b7aa5aabf45b8037e6ce7cd705dee
+  languageName: node
+  linkType: hard
+
+"@expo/config-types@npm:^56.0.5":
+  version: 56.0.5
+  resolution: "@expo/config-types@npm:56.0.5"
+  checksum: 10c0/b6aa98e3cb4b66954e307640550a168290d1e843c9fdedce64077e286d77cfd7e33c40333672d6434c32ad5468fa723e251bc49897fd606f7c1b985dc2170a1d
   languageName: node
   linkType: hard
 
-"@expo/config-types@npm:^54.0.10":
-  version: 54.0.10
-  resolution: "@expo/config-types@npm:54.0.10"
-  checksum: 10c0/a304e18314937cbe3a146fe7daf23d5b78049676dabc14b1e181330f9e74ab2f4ada288f23999f254b59ee7c59380f895ffcb536f537e9039cd10336b1c1d7bc
+"@expo/config-types@npm:^56.0.6":
+  version: 56.0.6
+  resolution: "@expo/config-types@npm:56.0.6"
+  checksum: 10c0/fa5d8b6a755a5ffa4ee4a138e7a3273f2f3fb7d1a84c4986ecc804f40656e18da89209cf85f3f93d4b3ca730c1a2688e5dc620a1ffd20dc9781834f3b426853f
   languageName: node
   linkType: hard
 
-"@expo/config@npm:~12.0.11, @expo/config@npm:~12.0.13":
-  version: 12.0.13
-  resolution: "@expo/config@npm:12.0.13"
+"@expo/config@npm:~56.0.8":
+  version: 56.0.8
+  resolution: "@expo/config@npm:56.0.8"
   dependencies:
-    "@babel/code-frame": "npm:~7.10.4"
-    "@expo/config-plugins": "npm:~54.0.4"
-    "@expo/config-types": "npm:^54.0.10"
-    "@expo/json-file": "npm:^10.0.8"
+    "@expo/config-plugins": "npm:~56.0.7"
+    "@expo/config-types": "npm:^56.0.5"
+    "@expo/json-file": "npm:^10.2.0"
+    "@expo/require-utils": "npm:^56.1.2"
+    deepmerge: "npm:^4.3.1"
+    getenv: "npm:^2.0.0"
+    glob: "npm:^13.0.0"
+    resolve-workspace-root: "npm:^2.0.0"
+    semver: "npm:^7.6.0"
+    slugify: "npm:^1.3.4"
+  checksum: 10c0/faee70cfc2a04f90203914d35058094d00eb1cbfa94d88efaec38fa7bdd934dc23cbdc8eedde9945d8b77ed758566403a1f5da6a599408d6c77df7f4b30cd2e9
+  languageName: node
+  linkType: hard
+
+"@expo/config@npm:~56.0.9":
+  version: 56.0.9
+  resolution: "@expo/config@npm:56.0.9"
+  dependencies:
+    "@expo/config-plugins": "npm:~56.0.8"
+    "@expo/config-types": "npm:^56.0.5"
+    "@expo/json-file": "npm:^10.2.0"
+    "@expo/require-utils": "npm:^56.1.3"
     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.35.1"
-  checksum: 10c0/c81494670424251b629f3c1a3ff8eb76e40b51838dbeaa793f6f763d0252fa506d5c7bf60dc358555a64bded7e9c33731169675a56604ff439510359e41b6d10
+  checksum: 10c0/ef643ee063229e1cfba67998f2fd63c5e75781110af0bef99e8730e541fe5599cc8616c571d03918f2b21988652d108e6d0116b8a0d0599f21e7988d3e59f9c4
   languageName: node
   linkType: hard
 
@@ -3129,9 +3130,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@expo/devtools@npm:0.1.8":
-  version: 0.1.8
-  resolution: "@expo/devtools@npm:0.1.8"
+"@expo/devtools@npm:~56.0.2":
+  version: 56.0.2
+  resolution: "@expo/devtools@npm:56.0.2"
   dependencies:
     chalk: "npm:^4.1.2"
   peerDependencies:
@@ -3142,282 +3143,367 @@ __metadata:
       optional: true
     react-native:
       optional: true
-  checksum: 10c0/dc4e095e5f4508370ae2258f23370a295b9400c87f29aee2338caa3ca3733d789ba3ff1bfafbf5fa285ac6974aec89b3cbf363fca5885eb9be3973ac1a7d7fa8
+  checksum: 10c0/05455baf5ab1b5213f90c408b42ca38cb7db21fce1b616300072a6b82de14ee1d9cb80023cb6774573abdccbd52a835e04fed06c90b82b4e5ba2958320fb1265
   languageName: node
   linkType: hard
 
-"@expo/env@npm:~2.0.8":
-  version: 2.0.8
-  resolution: "@expo/env@npm:2.0.8"
+"@expo/dom-webview@npm:^56.0.5, @expo/dom-webview@npm:~56.0.5":
+  version: 56.0.5
+  resolution: "@expo/dom-webview@npm:56.0.5"
+  peerDependencies:
+    expo: "*"
+    react: "*"
+    react-native: "*"
+  checksum: 10c0/0bdd893754586de59ccecac06eb98da203dada8e8a6434c3bb214a3c19f007ab0847d3bd3ec0dd53f1e6e80d64656f4775c654adb883f95b0a0bd8d9266512ef
+  languageName: node
+  linkType: hard
+
+"@expo/env@npm:^2.3.0, @expo/env@npm:~2.3.0":
+  version: 2.3.0
+  resolution: "@expo/env@npm:2.3.0"
   dependencies:
     chalk: "npm:^4.0.0"
     debug: "npm:^4.3.4"
-    dotenv: "npm:~16.4.5"
-    dotenv-expand: "npm:~11.0.6"
     getenv: "npm:^2.0.0"
-  checksum: 10c0/e6e4cd1be45a6873f5ad4a6a2176957897159b08104f04ea8f28a9d9f38abe0d109ded76ac197c0edba1ac606c14a034be19cfda75b44111be85b78a2d209375
+  checksum: 10c0/2a930a86a12daa63503ca250dfe8a45fe060f1f9b2e272a0aef83924cb103f7dc0ebbe6ebe6b067ecb369fafdcb7e017bd88bb161b5d54465b8da014fda89f84
+  languageName: node
+  linkType: hard
+
+"@expo/expo-modules-macros-plugin@npm:~0.0.9":
+  version: 0.0.9
+  resolution: "@expo/expo-modules-macros-plugin@npm:0.0.9"
+  checksum: 10c0/ed48100a888052338437d3165111b72099a9a415975e507a43cdc89f4dd26defca3a15621223b62b816ba4c12ecf95697c70a001698b69139897288c801aebad
   languageName: node
   linkType: hard
 
-"@expo/fingerprint@npm:0.15.4":
-  version: 0.15.4
-  resolution: "@expo/fingerprint@npm:0.15.4"
+"@expo/fingerprint@npm:^0.19.0":
+  version: 0.19.0
+  resolution: "@expo/fingerprint@npm:0.19.0"
   dependencies:
-    "@expo/spawn-async": "npm:^1.7.2"
+    "@expo/env": "npm:^2.3.0"
+    "@expo/spawn-async": "npm:^1.8.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"
+    minimatch: "npm:^10.2.2"
     resolve-from: "npm:^5.0.0"
     semver: "npm:^7.6.0"
   bin:
     fingerprint: bin/cli.js
-  checksum: 10c0/fe5aa9eff4f649cc58aa0b67cd6b93845ddc81b49a61f03c50632405bf2b99fc83ecbb15c527bfddc0156f8fad297f066dd46edf4cfa17580025fb192d7a98ee
+  checksum: 10c0/197acde4a297b75177859397303a4fba465d2dc0fc1e48c063cde92e57292ee9b0cf83cebb77af19aa7f1aebca357ae69b4070b7955240290c4712eedf348bac
   languageName: node
   linkType: hard
 
-"@expo/image-utils@npm:0.3.23":
-  version: 0.3.23
-  resolution: "@expo/image-utils@npm:0.3.23"
+"@expo/image-utils@npm:^0.10.0":
+  version: 0.10.0
+  resolution: "@expo/image-utils@npm:0.10.0"
   dependencies:
-    "@expo/spawn-async": "npm:1.5.0"
+    "@expo/require-utils": "npm:^56.1.2"
+    "@expo/spawn-async": "npm:^1.8.0"
     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"
-    mime: "npm:^2.4.4"
-    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/01e9c417ffa02e4d44b5c67f6180ebf47f8a3ddbcb1ba9aef01f551daf35556660bc2ccd117157abe42a0d34c542fc8cf0030af520cab657408cfa29944402c8
+    semver: "npm:^7.6.0"
+  checksum: 10c0/62ea44fb7c598c8dc88cad16294018a3e87a86bc9c723ef15c6ce43e44176b0251ec2255e99048d4cde5fd770f3bc45ffc23dd631884e7cd02a10b7f6a34af3d
   languageName: node
   linkType: hard
 
-"@expo/image-utils@npm:^0.8.8":
-  version: 0.8.8
-  resolution: "@expo/image-utils@npm:0.8.8"
+"@expo/inline-modules@npm:^0.0.9":
+  version: 0.0.9
+  resolution: "@expo/inline-modules@npm:0.0.9"
   dependencies:
-    "@expo/spawn-async": "npm:^1.7.2"
-    chalk: "npm:^4.0.0"
-    getenv: "npm:^2.0.0"
-    jimp-compact: "npm:0.16.1"
-    parse-png: "npm:^2.1.0"
-    resolve-from: "npm:^5.0.0"
-    resolve-global: "npm:^1.0.0"
-    semver: "npm:^7.6.0"
-    temp-dir: "npm:~2.0.0"
-    unique-string: "npm:~2.0.0"
-  checksum: 10c0/d08a93036d865b52d1a4848597bd872192c7023d415f62ed744e9ff20fd9e68308ade06b39c25b0eabbc04745ffa68c4b5a8d79883adb0c32738e1a414d7d62e
+    "@expo/config-plugins": "npm:~56.0.7"
+  checksum: 10c0/7129b0c05cd444b2a0d1db365c37a9523bfc65730ca1c1720a9fd002dad0c6fa98d8560a082821276684751ff9dbf3ff7112e9dded707693f47d5b98dbd41e5a
   languageName: node
   linkType: hard
 
-"@expo/json-file@npm:^10.0.8, @expo/json-file@npm:~10.0.8":
-  version: 10.0.8
-  resolution: "@expo/json-file@npm:10.0.8"
+"@expo/json-file@npm:^10.2.0, @expo/json-file@npm:~10.2.0":
+  version: 10.2.0
+  resolution: "@expo/json-file@npm:10.2.0"
   dependencies:
-    "@babel/code-frame": "npm:~7.10.4"
+    "@babel/code-frame": "npm:^7.20.0"
     json5: "npm:^2.2.3"
-  checksum: 10c0/dddd7ef7966fe0d29d1cad5a1d517d01c4e6a7b55cd15e901b947e7832d613aa1b982de5336d1305a3714bb4b5e3d78110c0ff799ca33fd54a8cd887f8ba533d
+  checksum: 10c0/198058e18dea2f31083c2ae8a6831dddfc8fc01c4cb30020728da04f155a6b600b4219830b6df48195548fa29a450b5b775007ed8430fb8098fd9a1656188ea0
+  languageName: node
+  linkType: hard
+
+"@expo/local-build-cache-provider@npm:^56.0.7":
+  version: 56.0.7
+  resolution: "@expo/local-build-cache-provider@npm:56.0.7"
+  dependencies:
+    "@expo/config": "npm:~56.0.8"
+    chalk: "npm:^4.1.2"
+  checksum: 10c0/284eb6f662850550cb8018117e0751f6a0e63acf3b468f3b5e3af2ede6dfc0f866e7dd0f752d8db861130cb168b32cd90a3748c2f627a6a6cb0c950e4d2259de
+  languageName: node
+  linkType: hard
+
+"@expo/log-box@npm:^56.0.12":
+  version: 56.0.12
+  resolution: "@expo/log-box@npm:56.0.12"
+  dependencies:
+    "@expo/dom-webview": "npm:^56.0.5"
+    anser: "npm:^1.4.9"
+    stacktrace-parser: "npm:^0.1.10"
+  peerDependencies:
+    "@expo/dom-webview": ^56.0.5
+    expo: "*"
+    react: "*"
+    react-native: "*"
+  checksum: 10c0/454d9f16df1921cad6afe8bf008693971d50c1f3ef7271a9ced86b69a4f5ec570d4781141731ce9306c7a222dd7ddd22712de85a208479bf4df028f81113a33e
+  languageName: node
+  linkType: hard
+
+"@expo/metro-config@npm:~56.0.0":
+  version: 56.0.14
+  resolution: "@expo/metro-config@npm:56.0.14"
+  dependencies:
+    "@babel/code-frame": "npm:^7.20.0"
+    "@babel/core": "npm:^7.20.0"
+    "@babel/generator": "npm:^7.20.5"
+    "@expo/config": "npm:~56.0.9"
+    "@expo/env": "npm:~2.3.0"
+    "@expo/json-file": "npm:~10.2.0"
+    "@expo/metro": "npm:~56.0.0"
+    "@expo/require-utils": "npm:^56.1.3"
+    "@expo/spawn-async": "npm:^1.8.0"
+    "@jridgewell/gen-mapping": "npm:^0.3.13"
+    "@jridgewell/remapping": "npm:^2.3.5"
+    "@jridgewell/sourcemap-codec": "npm:^1.5.5"
+    browserslist: "npm:^4.25.0"
+    chalk: "npm:^4.1.0"
+    debug: "npm:^4.3.2"
+    getenv: "npm:^2.0.0"
+    glob: "npm:^13.0.0"
+    hermes-parser: "npm:^0.33.3"
+    jsc-safe-url: "npm:^0.2.4"
+    lightningcss: "npm:^1.30.1"
+    picomatch: "npm:^4.0.4"
+    postcss: "npm:^8.5.14"
+    resolve-from: "npm:^5.0.0"
+  peerDependencies:
+    expo: "*"
+  peerDependenciesMeta:
+    expo:
+      optional: true
+  checksum: 10c0/3abbcd28d746be0afd21dfbf9be21ecea8471fded8df98bd381bf16c555c21a11617deda38b2586856a09eec1dd9f5edcea04a24ddcf7fca734fd3da1373e9db
   languageName: node
   linkType: hard
 
-"@expo/metro-config@npm:54.0.13, @expo/metro-config@npm:~54.0.13":
-  version: 54.0.13
-  resolution: "@expo/metro-config@npm:54.0.13"
+"@expo/metro-config@npm:~56.0.11":
+  version: 56.0.11
+  resolution: "@expo/metro-config@npm:56.0.11"
   dependencies:
     "@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"
+    "@expo/config": "npm:~56.0.8"
+    "@expo/env": "npm:~2.3.0"
+    "@expo/json-file": "npm:~10.2.0"
+    "@expo/metro": "npm:~56.0.0"
+    "@expo/spawn-async": "npm:^1.8.0"
+    "@jridgewell/gen-mapping": "npm:^0.3.13"
+    "@jridgewell/remapping": "npm:^2.3.5"
+    "@jridgewell/sourcemap-codec": "npm:^1.5.5"
     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"
+    hermes-parser: "npm:^0.33.3"
     jsc-safe-url: "npm:^0.2.4"
     lightningcss: "npm:^1.30.1"
-    minimatch: "npm:^9.0.0"
-    postcss: "npm:~8.4.32"
+    msgpackr: "npm:^2.0.1"
+    picomatch: "npm:^4.0.4"
+    postcss: "npm:^8.5.14"
     resolve-from: "npm:^5.0.0"
   peerDependencies:
     expo: "*"
   peerDependenciesMeta:
     expo:
       optional: true
-  checksum: 10c0/9876b9ef40742c879e94e80386d5238e9f4954d752d72251ade4e9bdf944ae5afdcc5ce877bffdf461ebec8775faed7b04d084ac1ac52283e64f86a122780d4e
+  checksum: 10c0/2031f0040c216b850c89801769fa6a31aef5c8f6329d66bdafd7cd7032f4372bb992d59e91667aed57a559075b58ab63c48100a41efcdf6d80950d11df4cdfc8
   languageName: node
   linkType: hard
 
-"@expo/metro@npm:~54.2.0":
-  version: 54.2.0
-  resolution: "@expo/metro@npm:54.2.0"
+"@expo/metro-file-map@npm:^56.0.3":
+  version: 56.0.3
+  resolution: "@expo/metro-file-map@npm:56.0.3"
   dependencies:
-    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
+    debug: "npm:^4.3.4"
+    fb-watchman: "npm:^2.0.2"
+    invariant: "npm:^2.2.4"
+    jest-worker: "npm:^29.7.0"
+    micromatch: "npm:^4.0.4"
+    walker: "npm:^1.0.8"
+  checksum: 10c0/457e751c7a2824788494dc456579b6badde852c1ebc22a37231f5f6caf543e51155c276b6283ffd751e430e7300847cd8c85c7cc5e630469b09513ead4d97e9a
   languageName: node
   linkType: hard
 
-"@expo/osascript@npm:^2.3.8":
-  version: 2.3.8
-  resolution: "@expo/osascript@npm:2.3.8"
+"@expo/metro@npm:~56.0.0":
+  version: 56.0.0
+  resolution: "@expo/metro@npm:56.0.0"
+  dependencies:
+    metro: "npm:0.84.4"
+    metro-babel-transformer: "npm:0.84.4"
+    metro-cache: "npm:0.84.4"
+    metro-cache-key: "npm:0.84.4"
+    metro-config: "npm:0.84.4"
+    metro-core: "npm:0.84.4"
+    metro-file-map: "npm:0.84.4"
+    metro-minify-terser: "npm:0.84.4"
+    metro-resolver: "npm:0.84.4"
+    metro-runtime: "npm:0.84.4"
+    metro-source-map: "npm:0.84.4"
+    metro-symbolicate: "npm:0.84.4"
+    metro-transform-plugins: "npm:0.84.4"
+    metro-transform-worker: "npm:0.84.4"
+  checksum: 10c0/51f647dfce71a45ac0092ae06826be91ed05000eb96390c79499c407678121ee9fed1d807d00356e4636020801a42395ef32d316c997fad34806207145d9e9d1
+  languageName: node
+  linkType: hard
+
+"@expo/osascript@npm:^2.6.0":
+  version: 2.6.0
+  resolution: "@expo/osascript@npm:2.6.0"
   dependencies:
-    "@expo/spawn-async": "npm:^1.7.2"
-    exec-async: "npm:^2.2.0"
-  checksum: 10c0/5991c363fb33fb1f740eb8bfdb7ccafd1944a6d89a644ec20dd76b546ffa995a3963727150155391287536046f5f47c7efae003a27a86299224d55191e2f65cb
+    "@expo/spawn-async": "npm:^1.8.0"
+  checksum: 10c0/1d5f6440ea97e0ece1e46c8a54c35ad793ef942c53268f9535df7c7caac330e01114426c6780dacf5b716d5ee96bfdeaa7a924b7522eb18edcf9cf3b309d2421
   languageName: node
   linkType: hard
 
-"@expo/package-manager@npm:^1.9.9":
-  version: 1.9.9
-  resolution: "@expo/package-manager@npm:1.9.9"
+"@expo/package-manager@npm:^1.12.0":
+  version: 1.12.0
+  resolution: "@expo/package-manager@npm:1.12.0"
   dependencies:
-    "@expo/json-file": "npm:^10.0.8"
-    "@expo/spawn-async": "npm:^1.7.2"
+    "@expo/json-file": "npm:^10.2.0"
+    "@expo/spawn-async": "npm:^1.8.0"
     chalk: "npm:^4.0.0"
     npm-package-arg: "npm:^11.0.0"
     ora: "npm:^3.4.0"
     resolve-workspace-root: "npm:^2.0.0"
-  checksum: 10c0/f822b49f4b6c6b8e4d95b7d136a515131f85b145fe6bc15eef42ef2c2890474b5bba913d03c098c614373be2e5e85afa24ea3ca237dfd0ec077bdd4b6c5248cc
+  checksum: 10c0/e6060b67ae4557594a31b5dd259c0a322945a07df72e59d78a96059806756adccb67db32a210941cc49de47d0ac07f68dd4adc5d308d97f8d23f8daadc3db4b2
   languageName: node
   linkType: hard
 
-"@expo/plist@npm:^0.4.8":
-  version: 0.4.8
-  resolution: "@expo/plist@npm:0.4.8"
+"@expo/plist@npm:^0.7.0":
+  version: 0.7.0
+  resolution: "@expo/plist@npm:0.7.0"
   dependencies:
     "@xmldom/xmldom": "npm:^0.8.8"
-    base64-js: "npm:^1.2.3"
+    base64-js: "npm:^1.5.1"
     xmlbuilder: "npm:^15.1.1"
-  checksum: 10c0/5bacdb6f8c5e0e56da07f4504290036e3a5433164a29bea7857e72234137d8eaa04adb319221fcc1ec7f931d40d7f9f6fc9528fa601ed18c308a4cf8179f7783
+  checksum: 10c0/b0d3df057f9a388a761a9261381d55e86ad0935ca15d32bd78da536c803bfc9334c2381fdced99f086e76f5d675535101bfb652d9a79a39c10b0c764c140dcc9
   languageName: node
   linkType: hard
 
-"@expo/prebuild-config@npm:^54.0.8":
-  version: 54.0.8
-  resolution: "@expo/prebuild-config@npm:54.0.8"
+"@expo/prebuild-config@npm:^56.0.10":
+  version: 56.0.10
+  resolution: "@expo/prebuild-config@npm:56.0.10"
   dependencies:
-    "@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"
+    "@expo/config": "npm:~56.0.8"
+    "@expo/config-plugins": "npm:~56.0.7"
+    "@expo/config-types": "npm:^56.0.5"
+    "@expo/image-utils": "npm:^0.10.0"
+    "@expo/json-file": "npm:^10.2.0"
+    "@react-native/normalize-colors": "npm:0.85.3"
     debug: "npm:^4.3.1"
+    expo-modules-autolinking: "npm:~56.0.9"
     resolve-from: "npm:^5.0.0"
     semver: "npm:^7.6.0"
-    xml2js: "npm:0.6.0"
-  peerDependencies:
-    expo: "*"
-  checksum: 10c0/70bef3fe360a7035b449e9f137e5046c6fe9137f2220f87bb563af2c34de4593034cd68cea5716ae98930e43a63331659795d1ec2af0f9a905565f2086f7c1a1
-  languageName: node
-  linkType: hard
-
-"@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
-
-"@expo/sdk-runtime-versions@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "@expo/sdk-runtime-versions@npm:1.0.0"
-  checksum: 10c0/f80ae78a294daf396f3eff2eb412948ced5501395a6d3b88058866da9c5135dbacbb2804f8d062222e7452159a61eebefd2f548a2939f539f0f0efe8145588a2
+  checksum: 10c0/04c40196d6d0b5744dc6d3a09c4cdfa46b800f4288173b64cebbabff8bad32cd86a37d0a616161afc054c4bc9decef3c8b19d3e831f4e358dbc2890f4efaa090
   languageName: node
   linkType: hard
 
-"@expo/spawn-async@npm:1.5.0":
-  version: 1.5.0
-  resolution: "@expo/spawn-async@npm:1.5.0"
+"@expo/require-utils@npm:^56.1.2":
+  version: 56.1.2
+  resolution: "@expo/require-utils@npm:56.1.2"
   dependencies:
-    cross-spawn: "npm:^6.0.5"
-  checksum: 10c0/122a6d9a678d69084455fd4e56874460d2937c6116c0228d879da9e8112e731f2540c1018911cef62e7d5cca4fa1d596e74f72bac4094f3d575a4d33fbd73833
+    "@babel/code-frame": "npm:^7.20.0"
+    "@babel/core": "npm:^7.25.2"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.24.8"
+  peerDependencies:
+    typescript: ^5.0.0 || ^5.0.0-0 || ^6.0.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/c0396d9129831430959b83ed5e376e7d86a76678ab66f53998109fe73eedf6366b3147f64d5229a3c9773d506f0ebd24a79a24fc73dfada7d169d02d0ef5967f
   languageName: node
   linkType: hard
 
-"@expo/spawn-async@npm:^1.7.2":
-  version: 1.7.2
-  resolution: "@expo/spawn-async@npm:1.7.2"
+"@expo/require-utils@npm:^56.1.3":
+  version: 56.1.3
+  resolution: "@expo/require-utils@npm:56.1.3"
   dependencies:
-    cross-spawn: "npm:^7.0.3"
-  checksum: 10c0/0548c4e95ee39393c2f3919bc605f21eba4f0a8ba66fa82fbbc4b1b624e0054526918489227b924f03af5bc156a011f39a2472c223c0d2237fb7afd8dedd5357
+    "@babel/code-frame": "npm:^7.20.0"
+    "@babel/core": "npm:^7.25.2"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.24.8"
+  peerDependencies:
+    typescript: ^5.0.0 || ^5.0.0-0 || ^6.0.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/b0fc61db4e45507508bf01524f42770a5bf1f53fab9b244a7dc6c9d8acce0e912940d9945716b8f0c747a07262d34128150c78d00bbe996b2efc5d522c45d874
   languageName: node
   linkType: hard
 
-"@expo/sudo-prompt@npm:^9.3.1":
-  version: 9.3.2
-  resolution: "@expo/sudo-prompt@npm:9.3.2"
-  checksum: 10c0/032652bf1c3f326c9c194f336de5821b9ece9d48b22e3e277950d939fcd728c85459680a9771705904d375f128221cca2e1e91c5d7a85cf3c07fe6f88c361e9d
+"@expo/router-server@npm:^56.0.10":
+  version: 56.0.10
+  resolution: "@expo/router-server@npm:56.0.10"
+  dependencies:
+    debug: "npm:^4.3.4"
+  peerDependencies:
+    "@expo/metro-runtime": ^56.0.10
+    expo: "*"
+    expo-constants: ^56.0.13
+    expo-font: ^56.0.5
+    expo-router: "*"
+    expo-server: ^56.0.4
+    react: "*"
+    react-dom: "*"
+    react-server-dom-webpack: ~19.0.1 || ~19.1.2 || ~19.2.1
+  peerDependenciesMeta:
+    "@expo/metro-runtime":
+      optional: true
+    expo-router:
+      optional: true
+    react-dom:
+      optional: true
+    react-server-dom-webpack:
+      optional: true
+  checksum: 10c0/e50a3f33f1f002b30e8ee2ac6b742cc53b38e80ec0e0a6c81e938e11d12e7c900db7f879159dc1f36127e12085e0219f8c52e52df971ccff78063ed15fdf4334
   languageName: node
   linkType: hard
 
-"@expo/vector-icons@npm:^15.0.2, @expo/vector-icons@npm:^15.0.3":
-  version: 15.0.3
-  resolution: "@expo/vector-icons@npm:15.0.3"
-  peerDependencies:
-    expo-font: ">=14.0.4"
-    react: "*"
-    react-native: "*"
-  checksum: 10c0/f33274dede267c713618512969afdee28e47e97ba8a7ee7e1d0ab18b417683ace7c4a1b79152d6ec2d254420a23a685582fd956f6cd83a2120514d9efbab1109
+"@expo/schema-utils@npm:^56.0.0":
+  version: 56.0.1
+  resolution: "@expo/schema-utils@npm:56.0.1"
+  checksum: 10c0/8d6b2c76a754f64ae7f10ff417ab11ee64e6e665d34f13a6428ee86b1657cae5c0f40811b41c9716bd5e5f87461d403a08c915cb1c169408031e3c244184980d
+  languageName: node
+  linkType: hard
+
+"@expo/sdk-runtime-versions@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@expo/sdk-runtime-versions@npm:1.0.0"
+  checksum: 10c0/f80ae78a294daf396f3eff2eb412948ced5501395a6d3b88058866da9c5135dbacbb2804f8d062222e7452159a61eebefd2f548a2939f539f0f0efe8145588a2
   languageName: node
   linkType: hard
 
-"@expo/webpack-config@npm:~19.0.1":
-  version: 19.0.1
-  resolution: "@expo/webpack-config@npm:19.0.1"
+"@expo/spawn-async@npm:^1.8.0":
+  version: 1.8.0
+  resolution: "@expo/spawn-async@npm:1.8.0"
   dependencies:
-    "@babel/core": "npm:^7.20.2"
-    babel-loader: "npm:^8.3.0"
-    chalk: "npm:^4.0.0"
-    clean-webpack-plugin: "npm:^4.0.0"
-    copy-webpack-plugin: "npm:^10.2.0"
-    css-loader: "npm:^6.5.1"
-    css-minimizer-webpack-plugin: "npm:^3.4.1"
-    expo-pwa: "npm:0.0.127"
-    find-up: "npm:^5.0.0"
-    find-yarn-workspace-root: "npm:~2.0.0"
-    fs-extra: "npm:^11.2.0"
-    getenv: "npm:^1.0.0"
-    html-webpack-plugin: "npm:^5.5.0"
-    is-wsl: "npm:^2.0.0"
-    mini-css-extract-plugin: "npm:^2.5.2"
-    node-html-parser: "npm:^5.2.0"
-    semver: "npm:~7.5.4"
-    source-map-loader: "npm:^3.0.1"
-    style-loader: "npm:^3.3.1"
-    terser-webpack-plugin: "npm:^5.3.0"
-    webpack: "npm:^5.64.4"
-    webpack-dev-server: "npm:^4.11.1"
-    webpack-manifest-plugin: "npm:^4.1.1"
-  peerDependencies:
-    expo: ^49.0.7 || ^50.0.0-0
-  checksum: 10c0/b55b0c1bf3e096bc0bb2e15d9f26889f5bfe31fac7ffafc856521111e2e1e2b74e3c88384bba4e84a27ec3da22e49d24f05b73e88df3711b61697103b265d792
+    cross-spawn: "npm:^7.0.6"
+  checksum: 10c0/08d3c63f9cc097ce9c8cf6850ca482fd7999a6fddc4cb38a3a9915a1662cb674fe7353de2eb3c693728542bf57db732ae433e82b2d698be141d07cea3092ebf3
+  languageName: node
+  linkType: hard
+
+"@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
 
@@ -3428,44 +3514,43 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@expo/xcpretty@npm:^4.3.0":
-  version: 4.3.2
-  resolution: "@expo/xcpretty@npm:4.3.2"
+"@expo/xcpretty@npm:^4.4.4":
+  version: 4.4.4
+  resolution: "@expo/xcpretty@npm:4.4.4"
   dependencies:
-    "@babel/code-frame": "npm:7.10.4"
+    "@babel/code-frame": "npm:^7.20.0"
     chalk: "npm:^4.1.0"
-    find-up: "npm:^5.0.0"
     js-yaml: "npm:^4.1.0"
   bin:
     excpretty: build/cli.js
-  checksum: 10c0/e524817b2e42fb8c8914fca7e8f7c2f723f4f6d338a57b7ae97cd3e76da8108af63a22d4c7dc2e96a192a248a242f6e0f8056f0ca53bc4fb5cd2e5ae428e0891
+  checksum: 10c0/cd555ad49438dee2cc3f2950ecbef3048f7169bbdadc8db169cfcddaad13668fee6377c010624ed4079dc439c46d6023d2551da403a2070deec000bc864e8dd8
   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"
-  checksum: 10c0/a096063805051fb8bba4c947e293c664b05a32b47e13bc654c0dd43813a1cec993bdd8f29ceb838020299e1d0f89f68dc0d62a603c13c9cc8541963f0beca055
+"@humanfs/core@npm:^0.19.2":
+  version: 0.19.2
+  resolution: "@humanfs/core@npm:0.19.2"
+  dependencies:
+    "@humanfs/types": "npm:^0.15.0"
+  checksum: 10c0/d0a1d52d7b30c27d49475a53072d1510b81c5803e44b342fb8faf3887f1aa27593a1e6dc76a45268e7892d3f4e198146659281f6b6d55eacf3fd5a38bac30c5c
   languageName: node
   linkType: hard
 
-"@hapi/topo@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "@hapi/topo@npm:5.1.0"
+"@humanfs/node@npm:^0.16.6":
+  version: 0.16.8
+  resolution: "@humanfs/node@npm:0.16.8"
   dependencies:
-    "@hapi/hoek": "npm:^9.0.0"
-  checksum: 10c0/b16b06d9357947149e032bdf10151eb71aea8057c79c4046bf32393cb89d0d0f7ca501c40c0f7534a5ceca078de0700d2257ac855c15e59fe4e00bba2f25c86f
+    "@humanfs/core": "npm:^0.19.2"
+    "@humanfs/types": "npm:^0.15.0"
+    "@humanwhocodes/retry": "npm:^0.4.0"
+  checksum: 10c0/56140579db811af4e160b195d45d0f29acf644d192c93fe24c9e594ebf06f19dfc157494a07c84540b8a071c0e4b37209c2362765d31734f4d0be869c2422e25
   languageName: node
   linkType: hard
 
-"@humanwhocodes/config-array@npm:^0.11.8":
-  version: 0.11.14
-  resolution: "@humanwhocodes/config-array@npm:0.11.14"
-  dependencies:
-    "@humanwhocodes/object-schema": "npm:^2.0.2"
-    debug: "npm:^4.3.1"
-    minimatch: "npm:^3.0.5"
-  checksum: 10c0/66f725b4ee5fdd8322c737cb5013e19fac72d4d69c8bf4b7feb192fcb83442b035b92186f8e9497c220e58b2d51a080f28a73f7899bc1ab288c3be172c467541
+"@humanfs/types@npm:^0.15.0":
+  version: 0.15.0
+  resolution: "@humanfs/types@npm:0.15.0"
+  checksum: 10c0/fc26b9a024b0e55f7eaf64036df94345bf5d36d6a41ef80ef38e78f1f7430ce26cf435af736adae58913baae18eac3f38c18739054a3d379102015978eae862e
   languageName: node
   linkType: hard
 
@@ -3476,10 +3561,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@humanwhocodes/object-schema@npm:^2.0.2":
-  version: 2.0.3
-  resolution: "@humanwhocodes/object-schema@npm:2.0.3"
-  checksum: 10c0/80520eabbfc2d32fe195a93557cef50dfe8c8905de447f022675aaf66abc33ae54098f5ea78548d925aa671cd4ab7c7daa5ad704fe42358c9b5e7db60f80696c
+"@humanwhocodes/retry@npm:^0.4.0, @humanwhocodes/retry@npm:^0.4.2":
+  version: 0.4.3
+  resolution: "@humanwhocodes/retry@npm:0.4.3"
+  checksum: 10c0/3775bb30087d4440b3f7406d5a057777d90e4b9f435af488a4923ef249e93615fb78565a85f173a186a076c7706a81d0d57d563a2624e4de2c5c9c66c486ce42
   languageName: node
   linkType: hard
 
@@ -3622,6 +3707,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/diff-sequences@npm:30.4.0":
+  version: 30.4.0
+  resolution: "@jest/diff-sequences@npm:30.4.0"
+  checksum: 10c0/b4358b1b885098b905cb777f58788ddd45f90c4ebc3ce2c04fb1d4c9516f35ac2d9daef8263cd21c537bd7a52ab320f03e4ba9521677959ae20e3d405356b420
+  languageName: node
+  linkType: hard
+
 "@jest/environment@npm:^29.7.0":
   version: 29.7.0
   resolution: "@jest/environment@npm:29.7.0"
@@ -3667,6 +3759,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"
@@ -3716,6 +3815,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/schemas@npm:30.4.1":
+  version: 30.4.1
+  resolution: "@jest/schemas@npm:30.4.1"
+  dependencies:
+    "@sinclair/typebox": "npm:^0.34.0"
+  checksum: 10c0/96f388ebfc1974457fcbde2ad36c40a0b549cba3f624fe8d9d6e5903a152dc75e4043f4ac9ac7668622f2ecb0f9a4dcb9a38edf3bc0d52b82045b2bb2b69b72a
+  languageName: node
+  linkType: hard
+
 "@jest/schemas@npm:^29.6.3":
   version: 29.6.3
   resolution: "@jest/schemas@npm:29.6.3"
@@ -3808,7 +3916,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/gen-mapping@npm:^0.3.12, @jridgewell/gen-mapping@npm:^0.3.2, @jridgewell/gen-mapping@npm:^0.3.5":
+"@jridgewell/gen-mapping@npm:^0.3.12, @jridgewell/gen-mapping@npm:^0.3.13, @jridgewell/gen-mapping@npm:^0.3.5":
   version: 0.3.13
   resolution: "@jridgewell/gen-mapping@npm:0.3.13"
   dependencies:
@@ -3845,7 +3953,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.5.0":
+"@jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.5.0, @jridgewell/sourcemap-codec@npm:^1.5.5":
   version: 1.5.5
   resolution: "@jridgewell/sourcemap-codec@npm:1.5.5"
   checksum: 10c0/f9e538f302b63c0ebc06eecb1dd9918dd4289ed36147a0ddce35d6ea4d7ebbda243cda7b2213b6a5e1d8087a298d5cf630fb2bd39329cdecb82017023f6081a0
@@ -3862,13 +3970,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@leichtgewicht/ip-codec@npm:^2.0.1":
-  version: 2.0.5
-  resolution: "@leichtgewicht/ip-codec@npm:2.0.5"
-  checksum: 10c0/14a0112bd59615eef9e3446fea018045720cd3da85a98f801a685a818b0d96ef2a1f7227e8d271def546b2e2a0fe91ef915ba9dc912ab7967d2317b1a051d66b
-  languageName: node
-  linkType: hard
-
 "@marionebl/sander@npm:^0.6.0":
   version: 0.6.1
   resolution: "@marionebl/sander@npm:0.6.1"
@@ -3887,13 +3988,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@material/material-color-utilities@npm:^0.2.7":
-  version: 0.2.7
-  resolution: "@material/material-color-utilities@npm:0.2.7"
-  checksum: 10c0/7734f8d7cffe6a92d47fcca82b4846e39ffd79be9c057f3299466696dcdee5379b8a8a3aa6a9692d40bd6900905f689105d9a8ce47882ab22348df10621f70cd
-  languageName: node
-  linkType: hard
-
 "@mdx-js/mdx@npm:^0.20.3":
   version: 0.20.3
   resolution: "@mdx-js/mdx@npm:0.20.3"
@@ -3914,39 +4008,48 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mdx-js/mdx@npm:^1.6.22":
-  version: 1.6.22
-  resolution: "@mdx-js/mdx@npm:1.6.22"
+"@mdx-js/mdx@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "@mdx-js/mdx@npm:3.1.1"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    "@types/estree-jsx": "npm:^1.0.0"
+    "@types/hast": "npm:^3.0.0"
+    "@types/mdx": "npm:^2.0.0"
+    acorn: "npm:^8.0.0"
+    collapse-white-space: "npm:^2.0.0"
+    devlop: "npm:^1.0.0"
+    estree-util-is-identifier-name: "npm:^3.0.0"
+    estree-util-scope: "npm:^1.0.0"
+    estree-walker: "npm:^3.0.0"
+    hast-util-to-jsx-runtime: "npm:^2.0.0"
+    markdown-extensions: "npm:^2.0.0"
+    recma-build-jsx: "npm:^1.0.0"
+    recma-jsx: "npm:^1.0.0"
+    recma-stringify: "npm:^1.0.0"
+    rehype-recma: "npm:^1.0.0"
+    remark-mdx: "npm:^3.0.0"
+    remark-parse: "npm:^11.0.0"
+    remark-rehype: "npm:^11.0.0"
+    source-map: "npm:^0.7.0"
+    unified: "npm:^11.0.0"
+    unist-util-position-from-estree: "npm:^2.0.0"
+    unist-util-stringify-position: "npm:^4.0.0"
+    unist-util-visit: "npm:^5.0.0"
+    vfile: "npm:^6.0.0"
+  checksum: 10c0/371ed95e2bee7731f30a7ce57db66383a0b7470e66c38139427174cb456d6a40bf7d259f3652716370c1de64acfba50a1ba27eb8c556e7a431dc7940b04cb1a1
+  languageName: node
+  linkType: hard
+
+"@mdx-js/react@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "@mdx-js/react@npm:3.1.1"
   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/react@npm:^1.6.22":
-  version: 1.6.22
-  resolution: "@mdx-js/react@npm:1.6.22"
+    "@types/mdx": "npm:^2.0.0"
   peerDependencies:
-    react: ^16.13.1 || ^17.0.0
-  checksum: 10c0/ed896671ffab04c1f11cdba45bfb2786acff58cd0b749b0a13d9b7a7022ac75cc036bec067ca946e6540e2934727e0ba8bf174e4ae10c916f30cda6aecac8992
+    "@types/react": ">=16"
+    react: ">=16"
+  checksum: 10c0/34ca98bc2a0f969894ea144dc5c8a5294690505458cd24965cd9be854d779c193ad9192bf9143c4c18438fafd1902e100d99067e045c69319288562d497558c6
   languageName: node
   linkType: hard
 
@@ -3959,181 +4062,66 @@ __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
-
-"@napi-rs/wasm-runtime@npm:^0.2.3":
-  version: 0.2.12
-  resolution: "@napi-rs/wasm-runtime@npm:0.2.12"
-  dependencies:
-    "@emnapi/core": "npm:^1.4.3"
-    "@emnapi/runtime": "npm:^1.4.3"
-    "@tybys/wasm-util": "npm:^0.10.0"
-  checksum: 10c0/6d07922c0613aab30c6a497f4df297ca7c54e5b480e00035e0209b872d5c6aab7162fc49477267556109c2c7ed1eb9c65a174e27e9b87568106a87b0a6e3ca7d
-  languageName: node
-  linkType: hard
-
-"@nicolo-ribaudo/eslint-scope-5-internals@npm:5.1.1-v1":
-  version: 5.1.1-v1
-  resolution: "@nicolo-ribaudo/eslint-scope-5-internals@npm:5.1.1-v1"
-  dependencies:
-    eslint-scope: "npm:5.1.1"
-  checksum: 10c0/75dda3e623b8ad7369ca22552d6beee337a814b2d0e8a32d23edd13fcb65c8082b32c5d86e436f3860dd7ade30d91d5db55d4ef9a08fb5a976c718ecc0d88a74
-  languageName: node
-  linkType: hard
-
-"@node-rs/jieba-android-arm-eabi@npm:1.10.4":
-  version: 1.10.4
-  resolution: "@node-rs/jieba-android-arm-eabi@npm:1.10.4"
-  conditions: os=android & cpu=arm
-  languageName: node
-  linkType: hard
-
-"@node-rs/jieba-android-arm64@npm:1.10.4":
-  version: 1.10.4
-  resolution: "@node-rs/jieba-android-arm64@npm:1.10.4"
-  conditions: os=android & cpu=arm64
-  languageName: node
-  linkType: hard
-
-"@node-rs/jieba-darwin-arm64@npm:1.10.4":
-  version: 1.10.4
-  resolution: "@node-rs/jieba-darwin-arm64@npm:1.10.4"
+"@msgpackr-extract/msgpackr-extract-darwin-arm64@npm:3.0.3":
+  version: 3.0.3
+  resolution: "@msgpackr-extract/msgpackr-extract-darwin-arm64@npm:3.0.3"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@node-rs/jieba-darwin-x64@npm:1.10.4":
-  version: 1.10.4
-  resolution: "@node-rs/jieba-darwin-x64@npm:1.10.4"
+"@msgpackr-extract/msgpackr-extract-darwin-x64@npm:3.0.3":
+  version: 3.0.3
+  resolution: "@msgpackr-extract/msgpackr-extract-darwin-x64@npm:3.0.3"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@node-rs/jieba-freebsd-x64@npm:1.10.4":
-  version: 1.10.4
-  resolution: "@node-rs/jieba-freebsd-x64@npm:1.10.4"
-  conditions: os=freebsd & cpu=x64
+"@msgpackr-extract/msgpackr-extract-linux-arm64@npm:3.0.3":
+  version: 3.0.3
+  resolution: "@msgpackr-extract/msgpackr-extract-linux-arm64@npm:3.0.3"
+  conditions: os=linux & cpu=arm64
   languageName: node
   linkType: hard
 
-"@node-rs/jieba-linux-arm-gnueabihf@npm:1.10.4":
-  version: 1.10.4
-  resolution: "@node-rs/jieba-linux-arm-gnueabihf@npm:1.10.4"
+"@msgpackr-extract/msgpackr-extract-linux-arm@npm:3.0.3":
+  version: 3.0.3
+  resolution: "@msgpackr-extract/msgpackr-extract-linux-arm@npm:3.0.3"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@node-rs/jieba-linux-arm64-gnu@npm:1.10.4":
-  version: 1.10.4
-  resolution: "@node-rs/jieba-linux-arm64-gnu@npm:1.10.4"
-  conditions: os=linux & cpu=arm64 & libc=glibc
-  languageName: node
-  linkType: hard
-
-"@node-rs/jieba-linux-arm64-musl@npm:1.10.4":
-  version: 1.10.4
-  resolution: "@node-rs/jieba-linux-arm64-musl@npm:1.10.4"
-  conditions: os=linux & cpu=arm64 & libc=musl
-  languageName: node
-  linkType: hard
-
-"@node-rs/jieba-linux-x64-gnu@npm:1.10.4":
-  version: 1.10.4
-  resolution: "@node-rs/jieba-linux-x64-gnu@npm:1.10.4"
-  conditions: os=linux & cpu=x64 & libc=glibc
+"@msgpackr-extract/msgpackr-extract-linux-x64@npm:3.0.3":
+  version: 3.0.3
+  resolution: "@msgpackr-extract/msgpackr-extract-linux-x64@npm:3.0.3"
+  conditions: os=linux & cpu=x64
   languageName: node
   linkType: hard
 
-"@node-rs/jieba-linux-x64-musl@npm:1.10.4":
-  version: 1.10.4
-  resolution: "@node-rs/jieba-linux-x64-musl@npm:1.10.4"
-  conditions: os=linux & cpu=x64 & libc=musl
+"@msgpackr-extract/msgpackr-extract-win32-x64@npm:3.0.3":
+  version: 3.0.3
+  resolution: "@msgpackr-extract/msgpackr-extract-win32-x64@npm:3.0.3"
+  conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
-"@node-rs/jieba-wasm32-wasi@npm:1.10.4":
-  version: 1.10.4
-  resolution: "@node-rs/jieba-wasm32-wasi@npm:1.10.4"
+"@napi-rs/wasm-runtime@npm:1.1.4":
+  version: 1.1.4
+  resolution: "@napi-rs/wasm-runtime@npm:1.1.4"
   dependencies:
-    "@napi-rs/wasm-runtime": "npm:^0.2.3"
-  conditions: cpu=wasm32
-  languageName: node
-  linkType: hard
-
-"@node-rs/jieba-win32-arm64-msvc@npm:1.10.4":
-  version: 1.10.4
-  resolution: "@node-rs/jieba-win32-arm64-msvc@npm:1.10.4"
-  conditions: os=win32 & cpu=arm64
-  languageName: node
-  linkType: hard
-
-"@node-rs/jieba-win32-ia32-msvc@npm:1.10.4":
-  version: 1.10.4
-  resolution: "@node-rs/jieba-win32-ia32-msvc@npm:1.10.4"
-  conditions: os=win32 & cpu=ia32
-  languageName: node
-  linkType: hard
-
-"@node-rs/jieba-win32-x64-msvc@npm:1.10.4":
-  version: 1.10.4
-  resolution: "@node-rs/jieba-win32-x64-msvc@npm:1.10.4"
-  conditions: os=win32 & cpu=x64
+    "@tybys/wasm-util": "npm:^0.10.1"
+  peerDependencies:
+    "@emnapi/core": ^1.7.1
+    "@emnapi/runtime": ^1.7.1
+  checksum: 10c0/2e88e1955258949ccf2d18c79975821ad38071b465ef126a5e14110977b97868867b016c1ad046e963cccc42c0bd9db6c8ff5fd1ebb61b87bb3487f339041658
   languageName: node
   linkType: hard
 
-"@node-rs/jieba@npm:^1.6.0":
-  version: 1.10.4
-  resolution: "@node-rs/jieba@npm:1.10.4"
-  dependencies:
-    "@node-rs/jieba-android-arm-eabi": "npm:1.10.4"
-    "@node-rs/jieba-android-arm64": "npm:1.10.4"
-    "@node-rs/jieba-darwin-arm64": "npm:1.10.4"
-    "@node-rs/jieba-darwin-x64": "npm:1.10.4"
-    "@node-rs/jieba-freebsd-x64": "npm:1.10.4"
-    "@node-rs/jieba-linux-arm-gnueabihf": "npm:1.10.4"
-    "@node-rs/jieba-linux-arm64-gnu": "npm:1.10.4"
-    "@node-rs/jieba-linux-arm64-musl": "npm:1.10.4"
-    "@node-rs/jieba-linux-x64-gnu": "npm:1.10.4"
-    "@node-rs/jieba-linux-x64-musl": "npm:1.10.4"
-    "@node-rs/jieba-wasm32-wasi": "npm:1.10.4"
-    "@node-rs/jieba-win32-arm64-msvc": "npm:1.10.4"
-    "@node-rs/jieba-win32-ia32-msvc": "npm:1.10.4"
-    "@node-rs/jieba-win32-x64-msvc": "npm:1.10.4"
-  dependenciesMeta:
-    "@node-rs/jieba-android-arm-eabi":
-      optional: true
-    "@node-rs/jieba-android-arm64":
-      optional: true
-    "@node-rs/jieba-darwin-arm64":
-      optional: true
-    "@node-rs/jieba-darwin-x64":
-      optional: true
-    "@node-rs/jieba-freebsd-x64":
-      optional: true
-    "@node-rs/jieba-linux-arm-gnueabihf":
-      optional: true
-    "@node-rs/jieba-linux-arm64-gnu":
-      optional: true
-    "@node-rs/jieba-linux-arm64-musl":
-      optional: true
-    "@node-rs/jieba-linux-x64-gnu":
-      optional: true
-    "@node-rs/jieba-linux-x64-musl":
-      optional: true
-    "@node-rs/jieba-wasm32-wasi":
-      optional: true
-    "@node-rs/jieba-win32-arm64-msvc":
-      optional: true
-    "@node-rs/jieba-win32-ia32-msvc":
-      optional: true
-    "@node-rs/jieba-win32-x64-msvc":
-      optional: true
-  checksum: 10c0/9c51e51e9c0319e1a9d658bf08adf7b2ace06e30fb248ef499fe0059fc582071e8e1d197783c1fcf084cf0d738c3828f7fd50f35735f2b1cf9d003171b8e43e2
+"@nicolo-ribaudo/eslint-scope-5-internals@npm:5.1.1-v1":
+  version: 5.1.1-v1
+  resolution: "@nicolo-ribaudo/eslint-scope-5-internals@npm:5.1.1-v1"
+  dependencies:
+    eslint-scope: "npm:5.1.1"
+  checksum: 10c0/75dda3e623b8ad7369ca22552d6beee337a814b2d0e8a32d23edd13fcb65c8082b32c5d86e436f3860dd7ade30d91d5db55d4ef9a08fb5a976c718ecc0d88a74
   languageName: node
   linkType: hard
 
@@ -4154,7 +4142,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8":
+"@nodelib/fs.walk@npm:^1.2.3":
   version: 1.2.8
   resolution: "@nodelib/fs.walk@npm:1.2.8"
   dependencies:
@@ -4317,24 +4305,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@pchmn/expo-material3-theme@npm:^1.3.2":
-  version: 1.3.2
-  resolution: "@pchmn/expo-material3-theme@npm:1.3.2"
-  dependencies:
-    "@material/material-color-utilities": "npm:^0.2.7"
-    color: "npm:^4.2.3"
-  peerDependencies:
-    expo: "*"
-    react: "*"
-    react-native: "*"
-  checksum: 10c0/89aa0a65b04f4a7f709c35bbdc2f7830dff73e0335877d36a091c55fb174ce82e4b2c67690657978b03fc563ab4c20565ded0ed7faec94d0a384a9c5085dfe19
-  languageName: node
-  linkType: hard
-
-"@polka/url@npm:^1.0.0-next.24":
-  version: 1.0.0-next.29
-  resolution: "@polka/url@npm:1.0.0-next.29"
-  checksum: 10c0/0d58e081844095cb029d3c19a659bfefd09d5d51a2f791bc61eba7ea826f13d6ee204a8a448c2f5a855c17df07b37517373ff916dd05801063c0568ae9937684
+"@pkgr/core@npm:^0.3.6":
+  version: 0.3.6
+  resolution: "@pkgr/core@npm:0.3.6"
+  checksum: 10c0/153f0f4563f505faeba13c733efa0e05e467ce1c6b941055a5fd3b4560da60fbf1dff4b11da0075f034ddda11f2842b90395f60895dde5825875b616edccc11c
   languageName: node
   linkType: hard
 
@@ -4391,98 +4365,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native/assets-registry@npm:0.81.4":
-  version: 0.81.4
-  resolution: "@react-native/assets-registry@npm:0.81.4"
-  checksum: 10c0/4433a354e909344941c7be0de56a6f3b090b2a805f6faf9a35cdf4644f827839399bf074b7836b9742606b470a1dd3442852adeaa0d547748302bf66c7ce64e8
+"@react-native/assets-registry@npm:0.85.3":
+  version: 0.85.3
+  resolution: "@react-native/assets-registry@npm:0.85.3"
+  checksum: 10c0/c926848dae180940c19a68df42783900474a010944fc2f31f1b9a61ec722e6b4ead76943a560df5679d64d4784e7e945fd9f6d60f25555fdd1eb59c4326b8c29
   languageName: node
   linkType: hard
 
-"@react-native/assets-registry@npm:0.82.1":
-  version: 0.82.1
-  resolution: "@react-native/assets-registry@npm:0.82.1"
-  checksum: 10c0/d11947f7ea0de671bd45029bd72f748d82a22487175e1e199b635871c7ef99ef364da03fd83c75a5ae89687773c66c6b44edc1ddd6543e16829995e7e8aff3a0
-  languageName: node
-  linkType: hard
-
-"@react-native/babel-plugin-codegen@npm:0.81.5":
-  version: 0.81.5
-  resolution: "@react-native/babel-plugin-codegen@npm:0.81.5"
-  dependencies:
-    "@babel/traverse": "npm:^7.25.3"
-    "@react-native/codegen": "npm:0.81.5"
-  checksum: 10c0/54971e723480bf5e169e1075a9525274e024c94c4286953c699ddb5f82e6229895147f19723b9f1319b55e0eaaa10389a19f349b6c0ac8451d72941a7d9f448b
-  languageName: node
-  linkType: hard
-
-"@react-native/babel-plugin-codegen@npm:0.82.1":
-  version: 0.82.1
-  resolution: "@react-native/babel-plugin-codegen@npm:0.82.1"
-  dependencies:
-    "@babel/traverse": "npm:^7.25.3"
-    "@react-native/codegen": "npm:0.82.1"
-  checksum: 10c0/48c220808048cd1f8873fd7619ce62f7daa0b8615c24d5943bcb0ffe50e6e7f506edba0b230576e304fe3d4be353a4d1fc7bdb952077d31d861e2c2b353ad0b7
-  languageName: node
-  linkType: hard
-
-"@react-native/babel-preset@npm:0.81.5":
-  version: 0.81.5
-  resolution: "@react-native/babel-preset@npm:0.81.5"
+"@react-native/babel-plugin-codegen@npm:0.85.3":
+  version: 0.85.3
+  resolution: "@react-native/babel-plugin-codegen@npm:0.85.3"
   dependencies:
-    "@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/f3146982c329f7fa7554195e6f8689275cb737856da192a934e7b509f0a5fe07c77c24993801d44914c5c6405799e9b500d227bd1deddf19947c28af6e14ad91
+    "@babel/traverse": "npm:^7.29.0"
+    "@react-native/codegen": "npm:0.85.3"
+  checksum: 10c0/59f61f5d783ac0a820a84ff45b7700b3c290de32e313e55171fe3bf0234d9836422bc239832d2650f893dc409a63772a50664f9487a8e6f86bc0c3bc88eb7ecd
   languageName: node
   linkType: hard
 
-"@react-native/babel-preset@npm:^0.82.1":
-  version: 0.82.1
-  resolution: "@react-native/babel-preset@npm:0.82.1"
+"@react-native/babel-preset@npm:^0.85.3":
+  version: 0.85.3
+  resolution: "@react-native/babel-preset@npm:0.85.3"
   dependencies:
     "@babel/core": "npm:^7.25.2"
     "@babel/plugin-proposal-export-default-from": "npm:^7.24.7"
@@ -4490,27 +4392,19 @@ __metadata:
     "@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"
@@ -4519,254 +4413,136 @@ __metadata:
     "@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.82.1"
-    babel-plugin-syntax-hermes-parser: "npm:0.32.0"
+    "@react-native/babel-plugin-codegen": "npm:0.85.3"
+    babel-plugin-syntax-hermes-parser: "npm:0.33.3"
     babel-plugin-transform-flow-enums: "npm:^0.0.2"
     react-refresh: "npm:^0.14.0"
   peerDependencies:
     "@babel/core": "*"
-  checksum: 10c0/410d5e182c7e2d2b66cb19178fb3a49336d04ef4dd7354eadc9f0d042e25452a738999361577d106756eebee85140266c6d6880ad378fd7f5d88707d36bd0701
-  languageName: node
-  linkType: hard
-
-"@react-native/codegen@npm:0.81.4":
-  version: 0.81.4
-  resolution: "@react-native/codegen@npm:0.81.4"
-  dependencies:
-    "@babel/core": "npm:^7.25.2"
-    "@babel/parser": "npm:^7.25.3"
-    glob: "npm:^7.1.1"
-    hermes-parser: "npm:0.29.1"
-    invariant: "npm:^2.2.4"
-    nullthrows: "npm:^1.1.1"
-    yargs: "npm:^17.6.2"
-  peerDependencies:
-    "@babel/core": "*"
-  checksum: 10c0/6cb89b8ab0c296641633b4f83f9cc7a0d19a6d381312675ca079b33dee746022142ce117ebab69b03e91ff3f0856becae1782d47ae5d4169466e1fe353f5916b
-  languageName: node
-  linkType: hard
-
-"@react-native/codegen@npm:0.81.5":
-  version: 0.81.5
-  resolution: "@react-native/codegen@npm:0.81.5"
-  dependencies:
-    "@babel/core": "npm:^7.25.2"
-    "@babel/parser": "npm:^7.25.3"
-    glob: "npm:^7.1.1"
-    hermes-parser: "npm:0.29.1"
-    invariant: "npm:^2.2.4"
-    nullthrows: "npm:^1.1.1"
-    yargs: "npm:^17.6.2"
-  peerDependencies:
-    "@babel/core": "*"
-  checksum: 10c0/047a29fadb51f6c58ff6fbad8be3ffc395c1492a869befacd74e11df5a9fa164b15b135824404e34af409c88f722874f9311966ebe4de3dcf10846abfcce0574
+  checksum: 10c0/88b1ea1d0fcebf5df9b2eb6e48eb2c8c18c92fda64d54c91b95a6974348d6f2c2cc72777ac479586fee27b24ce7caccd9d6460394a3adb2a8a0915d36d6da14b
   languageName: node
   linkType: hard
 
-"@react-native/codegen@npm:0.82.1":
-  version: 0.82.1
-  resolution: "@react-native/codegen@npm:0.82.1"
+"@react-native/codegen@npm:0.85.3":
+  version: 0.85.3
+  resolution: "@react-native/codegen@npm:0.85.3"
   dependencies:
     "@babel/core": "npm:^7.25.2"
-    "@babel/parser": "npm:^7.25.3"
-    glob: "npm:^7.1.1"
-    hermes-parser: "npm:0.32.0"
+    "@babel/parser": "npm:^7.29.0"
+    hermes-parser: "npm:0.33.3"
     invariant: "npm:^2.2.4"
     nullthrows: "npm:^1.1.1"
+    tinyglobby: "npm:^0.2.15"
     yargs: "npm:^17.6.2"
   peerDependencies:
     "@babel/core": "*"
-  checksum: 10c0/072a1e96c3bb8b16364b9cf48e1ab7726ff6b87fc71ee5be7dfd5d1055060bd053fe5f974a4a8f4832c16c16141087c6769bbd8ca16525168358be6adf5f2083
-  languageName: node
-  linkType: hard
-
-"@react-native/community-cli-plugin@npm:0.81.4":
-  version: 0.81.4
-  resolution: "@react-native/community-cli-plugin@npm:0.81.4"
-  dependencies:
-    "@react-native/dev-middleware": "npm:0.81.4"
-    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/2d3a8eb749f9347603b05f0902ec91409dc06dbeb3f9d94f0669fc41b822a70a042391c0455fce772baa2ec30685e130d36f6945d78b4cd81af905f25701b045
+  checksum: 10c0/3d6e08564c3436fcbd450c279b6755768ddfa47a534455c3077c222d5aa0a77270682afe933aa8d84bcd952b1a43107d25220d17c83f4f003fd338846a33ea4c
   languageName: node
   linkType: hard
 
-"@react-native/community-cli-plugin@npm:0.82.1":
-  version: 0.82.1
-  resolution: "@react-native/community-cli-plugin@npm:0.82.1"
+"@react-native/community-cli-plugin@npm:0.85.3":
+  version: 0.85.3
+  resolution: "@react-native/community-cli-plugin@npm:0.85.3"
   dependencies:
-    "@react-native/dev-middleware": "npm:0.82.1"
+    "@react-native/dev-middleware": "npm:0.85.3"
     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"
+    metro: "npm:^0.84.3"
+    metro-config: "npm:^0.84.3"
+    metro-core: "npm:^0.84.3"
     semver: "npm:^7.1.3"
   peerDependencies:
     "@react-native-community/cli": "*"
-    "@react-native/metro-config": "*"
+    "@react-native/metro-config": 0.85.3
   peerDependenciesMeta:
     "@react-native-community/cli":
       optional: true
     "@react-native/metro-config":
       optional: true
-  checksum: 10c0/c072a8f91b2ca25b266070de63bbbb174b827690be24953123e10fec7938f5b5c24c6de7bf7fa0bf1dd309a1913348791a417e90528a7bf5f7c2c0af76b106db
-  languageName: node
-  linkType: hard
-
-"@react-native/debugger-frontend@npm:0.81.4":
-  version: 0.81.4
-  resolution: "@react-native/debugger-frontend@npm:0.81.4"
-  checksum: 10c0/80ebb17b5fba77419ef8f32bc710f614a9dab39ee0e57e8a308f0f2c177aa11595922bc8d5230aca8e33e151334bd6c709f21c7d27e05e656ad484ea308b388a
-  languageName: node
-  linkType: hard
-
-"@react-native/debugger-frontend@npm:0.81.5":
-  version: 0.81.5
-  resolution: "@react-native/debugger-frontend@npm:0.81.5"
-  checksum: 10c0/6c8769526373314956ec53584b49d3ac94aace4232ba77cfdd96edaf346be8a648e2d877c719e7edaa4c1dcd6a09376012f35b25ca6498679b115815cc6940c3
+  checksum: 10c0/23d09b4b7e7324efb563f96e7d6fe672bd6c6e2e2a81e60cb60ef017765e43790a1ed0b56d2960d73780730fe3f13b2a4c53cf88b93a2c44da61bbcd16af8e78
   languageName: node
   linkType: hard
 
-"@react-native/debugger-frontend@npm:0.82.1":
-  version: 0.82.1
-  resolution: "@react-native/debugger-frontend@npm:0.82.1"
-  checksum: 10c0/3d69e46bf6bd34107f81349f3470e6e69f2dfdc1022f4de9d54ebd943172a0e599a9ca5e3d804f67ff0f9ffbe16f8d75ea1456e528a1d2519e5327fbf6b26573
+"@react-native/debugger-frontend@npm:0.85.3":
+  version: 0.85.3
+  resolution: "@react-native/debugger-frontend@npm:0.85.3"
+  checksum: 10c0/4e52fc9f10051d0d1ae225ff5c1d0fbcf5e5cc2fdfa13f5985b8578352a3196bd0ad6c7714f62901496be7f231e593308964a469f26575680f558f48e6161a2e
   languageName: node
   linkType: hard
 
-"@react-native/debugger-shell@npm:0.82.1":
-  version: 0.82.1
-  resolution: "@react-native/debugger-shell@npm:0.82.1"
+"@react-native/debugger-shell@npm:0.85.3":
+  version: 0.85.3
+  resolution: "@react-native/debugger-shell@npm:0.85.3"
   dependencies:
     cross-spawn: "npm:^7.0.6"
+    debug: "npm:^4.4.0"
     fb-dotslash: "npm:0.5.8"
-  checksum: 10c0/0c3050ef96bc6546bfc68e1e5d554788edf3d63f0f5672a99a0c997cbfae626c3162013aebe2bae094e0c624326cb1b635bf3bd4a239e3125544b469d111df77
+  checksum: 10c0/2782929d1352c323cc33289fb2b08a8d05b4df5b59af7d588958729f59db966ffd6d73e2df86a66b240f005e23f796829b56978f4a0152a6837e67fd0fae1dd0
   languageName: node
   linkType: hard
 
-"@react-native/dev-middleware@npm:0.81.4":
-  version: 0.81.4
-  resolution: "@react-native/dev-middleware@npm:0.81.4"
+"@react-native/dev-middleware@npm:0.85.3":
+  version: 0.85.3
+  resolution: "@react-native/dev-middleware@npm:0.85.3"
   dependencies:
     "@isaacs/ttlcache": "npm:^1.4.1"
-    "@react-native/debugger-frontend": "npm:0.81.4"
+    "@react-native/debugger-frontend": "npm:0.85.3"
+    "@react-native/debugger-shell": "npm:0.85.3"
     chrome-launcher: "npm:^0.15.2"
-    chromium-edge-launcher: "npm:^0.2.0"
+    chromium-edge-launcher: "npm:^0.3.0"
     connect: "npm:^3.6.5"
     debug: "npm:^4.4.0"
     invariant: "npm:^2.2.4"
     nullthrows: "npm:^1.1.1"
     open: "npm:^7.0.3"
     serve-static: "npm:^1.16.2"
-    ws: "npm:^6.2.3"
-  checksum: 10c0/d0d2b56cc8701fe3527a0115d810b574af70d57a1330b1bde890f2392a7918acb64be26958e7be48e44fc8635b5dea53de30e8c2d0f6c4222b974cd049a4f3c6
+    ws: "npm:^7.5.10"
+  checksum: 10c0/6adb5e0ecf933f1936eaf993bc39dd8afd4b20e1f1f6525f2c1428fb9000855a764fa93a4043a1bb1678ec827d9c5fca2d6082a928c3dac49f51ea882d991011
   languageName: node
   linkType: hard
 
-"@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.81.5"
-    chrome-launcher: "npm:^0.15.2"
-    chromium-edge-launcher: "npm:^0.2.0"
-    connect: "npm:^3.6.5"
-    debug: "npm:^4.4.0"
-    invariant: "npm:^2.2.4"
-    nullthrows: "npm:^1.1.1"
-    open: "npm:^7.0.3"
-    serve-static: "npm:^1.16.2"
-    ws: "npm:^6.2.3"
-  checksum: 10c0/d057b320940626d41db7f02ac249b9fdba2569ea3167864986bfe61028c4f890cefe24a5b8d4cd1b33c8c33ab547aa361d13a6cdaf991475302eb83a4ab3372a
-  languageName: node
-  linkType: hard
-
-"@react-native/dev-middleware@npm:0.82.1":
-  version: 0.82.1
-  resolution: "@react-native/dev-middleware@npm:0.82.1"
-  dependencies:
-    "@isaacs/ttlcache": "npm:^1.4.1"
-    "@react-native/debugger-frontend": "npm:0.82.1"
-    "@react-native/debugger-shell": "npm:0.82.1"
-    chrome-launcher: "npm:^0.15.2"
-    chromium-edge-launcher: "npm:^0.2.0"
-    connect: "npm:^3.6.5"
-    debug: "npm:^4.4.0"
-    invariant: "npm:^2.2.4"
-    nullthrows: "npm:^1.1.1"
-    open: "npm:^7.0.3"
-    serve-static: "npm:^1.16.2"
-    ws: "npm:^6.2.3"
-  checksum: 10c0/cf3224b214aa22665b1a0509579a25b514e9ac11215457cb1f601090b4e3ca922c72f804a76d3d642dda1ee6e1f3ee10a40620bc487b4e786b34cc955b158e52
-  languageName: node
-  linkType: hard
-
-"@react-native/gradle-plugin@npm:0.81.4":
-  version: 0.81.4
-  resolution: "@react-native/gradle-plugin@npm:0.81.4"
-  checksum: 10c0/f9cca8439009ea1edf077ac0dfe509cae614dfdbf645ad42b66bed300c8b1595c9dd9fffe04f2a6540cdc2b6119e253bd09267d4a748ed8084cb7221b1de9bdb
-  languageName: node
-  linkType: hard
-
-"@react-native/gradle-plugin@npm:0.82.1":
-  version: 0.82.1
-  resolution: "@react-native/gradle-plugin@npm:0.82.1"
-  checksum: 10c0/330471c9116d3382b95e5afa9dd301e4bcea090b799754b3565e241c8823fade1c673270bd94f079b338e1f1c9a3c92ab16a091ae6cfe38b84d89782cc9e1437
-  languageName: node
-  linkType: hard
-
-"@react-native/js-polyfills@npm:0.81.4":
-  version: 0.81.4
-  resolution: "@react-native/js-polyfills@npm:0.81.4"
-  checksum: 10c0/3a9fe20f257562c9971d1115973441fe41f8d4a8f3530aa5d269ce7dd0d25a4854f009b772e6f8d17b6ad5e88b739b06d3d6018228b4305c2922d3f087ef9697
+"@react-native/eslint-plugin@npm:^0.74.0 || ^0.73.0 || ^0.72.0":
+  version: 0.74.89
+  resolution: "@react-native/eslint-plugin@npm:0.74.89"
+  checksum: 10c0/7e24c13d9869320b011bcef7901b080438d6a182720135f443c62dd565ee8e8b57e8bb709fee86095f5956cdaeb45a96a4c2334e22b048b20eb8bdea12cfd34d
   languageName: node
   linkType: hard
 
-"@react-native/js-polyfills@npm:0.82.1":
-  version: 0.82.1
-  resolution: "@react-native/js-polyfills@npm:0.82.1"
-  checksum: 10c0/68758e624bd349228ad9f32edeba562e43c7b52fb2630e88725ac6115180ea1ef6ab54b1f6be32379230e3285da55740e57fa1cc95abb41f86ba59d0c6879010
+"@react-native/gradle-plugin@npm:0.85.3":
+  version: 0.85.3
+  resolution: "@react-native/gradle-plugin@npm:0.85.3"
+  checksum: 10c0/a5a57a0f0783cc31f3daec9e092c32774e72dbae334e9a3eaa86a4ff55f6563069003213d72efc2666e2381b73c653a2f8a4af42c8efd5a974eb848233984a2c
   languageName: node
   linkType: hard
 
-"@react-native/normalize-colors@npm:0.81.4":
-  version: 0.81.4
-  resolution: "@react-native/normalize-colors@npm:0.81.4"
-  checksum: 10c0/d08de08ccbc47e2e8b8c9a258f2d38de02f9970067ce570961326ec916216ec2bcb48f28682b5b77d6a02f8d1734f02f181455915b6a0c1f145edca683545a9a
+"@react-native/jest-preset@npm:^0.85.3":
+  version: 0.85.3
+  resolution: "@react-native/jest-preset@npm:0.85.3"
+  dependencies:
+    "@jest/create-cache-key-function": "npm:^29.7.0"
+    "@react-native/js-polyfills": "npm:0.85.3"
+    babel-jest: "npm:^29.7.0"
+    jest-environment-node: "npm:^29.7.0"
+    regenerator-runtime: "npm:^0.13.2"
+  peerDependencies:
+    react: ^19.2.3
+  checksum: 10c0/7c18a87432978d8e05bb66401d6591a99e1aaf575a206afd0a120611359c8addf7259ecf9f1ccb162fd2bd23412eaf8d7791168718bbe180e397a219806a302f
   languageName: node
   linkType: hard
 
-"@react-native/normalize-colors@npm:0.81.5":
-  version: 0.81.5
-  resolution: "@react-native/normalize-colors@npm:0.81.5"
-  checksum: 10c0/827b120eedd0bf90ab3113e5a74900d15f73bfd826451d493f8047f78824894c516ccaf85bb02fcbe5f11b9f8852c1266593f1999e46a5752ff34b0a2db89a97
+"@react-native/js-polyfills@npm:0.85.3":
+  version: 0.85.3
+  resolution: "@react-native/js-polyfills@npm:0.85.3"
+  checksum: 10c0/67c4ed8234cbeb6d5250b06901f352ddd5348f9aad88aac8a06dc884f42e0da22ff2e1ca8e06c7d03e1e659486bdb9d7682f34858ebf9398d7ae199ce02b3749
   languageName: node
   linkType: hard
 
-"@react-native/normalize-colors@npm:0.82.1":
-  version: 0.82.1
-  resolution: "@react-native/normalize-colors@npm:0.82.1"
-  checksum: 10c0/9c5e84fa6ab6ba1323305ba928c364ae2442d9edea21dda06f2c9267371a509d3799bc06646056c906e078102f6e74dc2aac7a56c83fa5daa43998508701a553
+"@react-native/normalize-colors@npm:0.85.3":
+  version: 0.85.3
+  resolution: "@react-native/normalize-colors@npm:0.85.3"
+  checksum: 10c0/343cdbe79e51b0f62e13fcf8620d9c72d7d956d18e9b1b04380a231cff1ec43ff2c54f1ed7a9b975bc23ed4879b96520a7c88aa1c8c7f17a99c32ef8073cf341
   languageName: node
   linkType: hard
 
@@ -4777,195 +4553,133 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native/virtualized-lists@npm:0.81.4":
-  version: 0.81.4
-  resolution: "@react-native/virtualized-lists@npm:0.81.4"
-  dependencies:
-    invariant: "npm:^2.2.4"
-    nullthrows: "npm:^1.1.1"
-  peerDependencies:
-    "@types/react": ^19.1.0
-    react: "*"
-    react-native: "*"
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 10c0/dfd7ed38b844a47869d4c0238ad639f3770a8cfc7ac7a3c682f17703c38370937182c0f05b8ac91ed79e74475c4e10c1ddbdcca4050eaf38150b39d579799cca
-  languageName: node
-  linkType: hard
-
-"@react-native/virtualized-lists@npm:0.82.1":
-  version: 0.82.1
-  resolution: "@react-native/virtualized-lists@npm:0.82.1"
+"@react-native/virtualized-lists@npm:0.85.3":
+  version: 0.85.3
+  resolution: "@react-native/virtualized-lists@npm:0.85.3"
   dependencies:
     invariant: "npm:^2.2.4"
     nullthrows: "npm:^1.1.1"
   peerDependencies:
-    "@types/react": ^19.1.1
+    "@types/react": ^19.2.0
     react: "*"
-    react-native: "*"
+    react-native: 0.85.3
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/89f454ad43ef4d6ccd94828923dbc28a3ca847e70754d7bf9ea64daea3d6eff53bb87a0a5aa79637e7a26cc293f38c3636f76b8a2a4fabc2ad20727564148b51
+  checksum: 10c0/ff3425a27c90f3d51292533c330338cfb285d1a230129abed315e7ea07be55e62ab395f7b167c0fe5b20385f67f587a8ea17440e6ab18661846cc8a1936f8fdb
   languageName: node
   linkType: hard
 
-"@react-navigation/bottom-tabs@npm:^7.3.10":
-  version: 7.9.0
-  resolution: "@react-navigation/bottom-tabs@npm:7.9.0"
+"@react-navigation/bottom-tabs@npm:^8.0.0-alpha.33":
+  version: 8.0.0-alpha.33
+  resolution: "@react-navigation/bottom-tabs@npm:8.0.0-alpha.33"
   dependencies:
-    "@react-navigation/elements": "npm:^2.9.3"
-    color: "npm:^4.2.3"
-    sf-symbols-typescript: "npm:^2.1.0"
+    "@react-navigation/elements": "npm:^3.0.0-alpha.31"
   peerDependencies:
-    "@react-navigation/native": ^7.1.26
-    react: ">= 18.2.0"
+    "@react-navigation/native": ^8.0.0-alpha.28
+    react: ">= 19.2.0"
     react-native: "*"
-    react-native-safe-area-context: ">= 4.0.0"
-    react-native-screens: ">= 4.0.0"
-  checksum: 10c0/98d56b517cb0e5ad5b7669b5f039cd9a7e23f44f561b0e11abc9834bbbc83152944628fe9badbdaf74f224c77b10e2b463af06aac53a6a89a07319d319c713ed
-  languageName: node
-  linkType: hard
-
-"@react-navigation/core@npm:^6.4.17":
-  version: 6.4.17
-  resolution: "@react-navigation/core@npm:6.4.17"
-  dependencies:
-    "@react-navigation/routers": "npm:^6.1.9"
-    escape-string-regexp: "npm:^4.0.0"
-    nanoid: "npm:^3.1.23"
-    query-string: "npm:^7.1.3"
-    react-is: "npm:^16.13.0"
-    use-latest-callback: "npm:^0.2.1"
-  peerDependencies:
-    react: "*"
-  checksum: 10c0/f71fc10dd34d0bd13abd9c947833b9f5ac6aa18af58f74aa72bac45a5d348a4881924fec6534e7694d7084d940d7dac368a1b1fe7d86b260ff5cf475498e9d1b
+    react-native-safe-area-context: ">= 5.5.0"
+    react-native-screens: ">= 4.25.0"
+  checksum: 10c0/94a2f3c6ec0f266d0bd53066069bdcfc8e59563530cec4519bb34aca6f248e79295d367fb1a63299658081411fb4b93718927a04d7d41fa399c3b6fbdf874f26
   languageName: node
   linkType: hard
 
-"@react-navigation/core@npm:^7.13.7":
-  version: 7.13.7
-  resolution: "@react-navigation/core@npm:7.13.7"
+"@react-navigation/core@npm:^8.0.0-alpha.19":
+  version: 8.0.0-alpha.19
+  resolution: "@react-navigation/core@npm:8.0.0-alpha.19"
   dependencies:
-    "@react-navigation/routers": "npm:^7.5.3"
-    escape-string-regexp: "npm:^4.0.0"
+    "@react-navigation/routers": "npm:^8.0.0-alpha.10"
+    escape-string-regexp: "npm:^5.0.0"
     fast-deep-equal: "npm:^3.1.3"
-    nanoid: "npm:^3.3.11"
-    query-string: "npm:^7.1.3"
+    nanoid: "npm:^5.1.7"
+    query-string: "npm:^9.3.1"
     react-is: "npm:^19.1.0"
-    use-latest-callback: "npm:^0.2.4"
-    use-sync-external-store: "npm:^1.5.0"
+    use-latest-callback: "npm:^0.3.3"
+    use-sync-external-store: "npm:^1.6.0"
   peerDependencies:
-    react: ">= 18.2.0"
-  checksum: 10c0/6d33e97a4fb72ffbb5fd135afb418b8d3411abbdbe7ce0fde026fcb0bc0ce7c96e8995a24c77314d6e5e4b689ba3b0311805cb619eedbafc2011aca5e26591fa
+    react: ">= 19.2.0"
+  checksum: 10c0/bb0ce7e49b063cf423effcc8b668c5b73ad83ea61abcdd807aebe04cf1ededfe4042e13a1ba92fae09d8c1ed5f4fcc8faf51e8603c8a9f7a710d66be051b5ec0
   languageName: node
   linkType: hard
 
-"@react-navigation/drawer@npm:^7.3.9":
-  version: 7.7.10
-  resolution: "@react-navigation/drawer@npm:7.7.10"
+"@react-navigation/drawer@npm:^8.0.0-alpha.34":
+  version: 8.0.0-alpha.34
+  resolution: "@react-navigation/drawer@npm:8.0.0-alpha.34"
   dependencies:
-    "@react-navigation/elements": "npm:^2.9.3"
-    color: "npm:^4.2.3"
-    react-native-drawer-layout: "npm:^4.2.1"
-    use-latest-callback: "npm:^0.2.4"
+    "@react-navigation/elements": "npm:^3.0.0-alpha.31"
+    react-native-drawer-layout: "npm:^5.0.0-alpha.10"
+    use-latest-callback: "npm:^0.3.3"
   peerDependencies:
-    "@react-navigation/native": ^7.1.26
-    react: ">= 18.2.0"
+    "@react-navigation/native": ^8.0.0-alpha.28
+    react: ">= 19.2.0"
     react-native: "*"
     react-native-gesture-handler: ">= 2.0.0"
-    react-native-reanimated: ">= 2.0.0"
-    react-native-safe-area-context: ">= 4.0.0"
-    react-native-screens: ">= 4.0.0"
-  checksum: 10c0/5da6055d318d7552eac97fd1ea7c657c673df29230532e0f27a42c4496ceaa461bcb359c3fc16c28b2ebc8680629c2a46a533870712f8d7d1db7f7007fad13c5
+    react-native-reanimated: ">= 4.0.0"
+    react-native-safe-area-context: ">= 5.5.0"
+    react-native-screens: ">= 4.25.0"
+    react-native-worklets: ">= 0.4.0"
+  checksum: 10c0/0e1b6a0b34b06c4d42e7495619a4871a7cee4f2fa798259607f4399c7c8716ff0d6a1a0da0025d1a83b6c7097f252ac67b136a1d7de533ce35d0d61f11e8b0c2
   languageName: node
   linkType: hard
 
-"@react-navigation/elements@npm:^2.9.3":
-  version: 2.9.3
-  resolution: "@react-navigation/elements@npm:2.9.3"
+"@react-navigation/elements@npm:3.0.0-alpha.31, @react-navigation/elements@npm:^3.0.0-alpha.31":
+  version: 3.0.0-alpha.31
+  resolution: "@react-navigation/elements@npm:3.0.0-alpha.31"
   dependencies:
-    color: "npm:^4.2.3"
-    use-latest-callback: "npm:^0.2.4"
-    use-sync-external-store: "npm:^1.5.0"
+    sf-symbols-typescript: "npm:^2.2.0"
+    use-latest-callback: "npm:^0.3.3"
+    use-sync-external-store: "npm:^1.6.0"
   peerDependencies:
-    "@react-native-masked-view/masked-view": ">= 0.2.0"
-    "@react-navigation/native": ^7.1.26
-    react: ">= 18.2.0"
+    "@callstack/liquid-glass": ">= 0.6.0"
+    "@react-navigation/native": ^8.0.0-alpha.28
+    react: ">= 19.2.0"
     react-native: "*"
-    react-native-safe-area-context: ">= 4.0.0"
-  peerDependenciesMeta:
-    "@react-native-masked-view/masked-view":
-      optional: true
-  checksum: 10c0/50c30366507ca420e65b1a232edca8d64fbac1420d90d0a9aa16ec84d8c63719b9c626a24095943fd63283b4116c0ec888f6ccc6cb2317a4cba4d1b1c2c5021a
+    react-native-safe-area-context: ">= 5.5.0"
+    react-native-screens: ">= 4.25.0"
+  checksum: 10c0/a3a4433fba4cb15a7cb043fdd6033ee09c834e03a34b91f2fdee02527f5f19951ff2841f583dc569a7b0b44f5030c6313cd5ebc10a2743700a33fc404bcdc906
   languageName: node
   linkType: hard
 
-"@react-navigation/native@npm:^6.1.2":
-  version: 6.1.18
-  resolution: "@react-navigation/native@npm:6.1.18"
+"@react-navigation/native-stack@npm:^8.0.0-alpha.34":
+  version: 8.0.0-alpha.34
+  resolution: "@react-navigation/native-stack@npm:8.0.0-alpha.34"
   dependencies:
-    "@react-navigation/core": "npm:^6.4.17"
-    escape-string-regexp: "npm:^4.0.0"
-    fast-deep-equal: "npm:^3.1.3"
-    nanoid: "npm:^3.1.23"
+    "@react-navigation/elements": "npm:^3.0.0-alpha.31"
+    warn-once: "npm:^0.1.1"
   peerDependencies:
-    react: "*"
+    "@react-navigation/native": ^8.0.0-alpha.28
+    react: ">= 19.2.0"
     react-native: "*"
-  checksum: 10c0/1f7138da298067f537a22c5ab2e8e8529e83df8f87c5c61e84afdcd49d6ba1409f44a33bac3bd08bb11bcfba3f1c84574b7aa0a67b28531e4520d485bd4e3b9b
+    react-native-safe-area-context: ">= 5.5.0"
+    react-native-screens: ">= 4.25.0"
+  checksum: 10c0/322de7b9e0ad1ddcec95d96c793807a11b8d20cb0c008d70863d8401d97b8620277c39c6f93eac65e854f583d1d078542979cfa52ce30b6e188c13eaa001b842
   languageName: node
   linkType: hard
 
-"@react-navigation/native@npm:^7.1.6":
-  version: 7.1.26
-  resolution: "@react-navigation/native@npm:7.1.26"
+"@react-navigation/native@npm:^8.0.0-alpha.28":
+  version: 8.0.0-alpha.28
+  resolution: "@react-navigation/native@npm:8.0.0-alpha.28"
   dependencies:
-    "@react-navigation/core": "npm:^7.13.7"
-    escape-string-regexp: "npm:^4.0.0"
+    "@react-navigation/core": "npm:^8.0.0-alpha.19"
+    escape-string-regexp: "npm:^5.0.0"
     fast-deep-equal: "npm:^3.1.3"
-    nanoid: "npm:^3.3.11"
-    use-latest-callback: "npm:^0.2.4"
+    nanoid: "npm:^5.1.7"
+    sf-symbols-typescript: "npm:^2.2.0"
+    use-latest-callback: "npm:^0.3.3"
   peerDependencies:
-    react: ">= 18.2.0"
+    react: ">= 19.2.0"
     react-native: "*"
-  checksum: 10c0/7aa1e3ff40b36fb13f615412465d48eaa115f95c9b4278c67c616f8aa3d86bab68656b2528827307dbdba1cd2f30b3614837a042cc19b4316baf78ec0ff3f4c8
-  languageName: node
-  linkType: hard
-
-"@react-navigation/routers@npm:^6.1.9":
-  version: 6.1.9
-  resolution: "@react-navigation/routers@npm:6.1.9"
-  dependencies:
-    nanoid: "npm:^3.1.23"
-  checksum: 10c0/5b58014cf29bb71c7dc01201e271d55f0ecfe6d38d064179eeff0fc0b5cb739d4d9906eb133f100d25fc674c72c24aa65d5f6bfc3d036d79f7c5d1936391c605
-  languageName: node
-  linkType: hard
-
-"@react-navigation/routers@npm:^7.5.3":
-  version: 7.5.3
-  resolution: "@react-navigation/routers@npm:7.5.3"
-  dependencies:
-    nanoid: "npm:^3.3.11"
-  checksum: 10c0/85f6cb9ac71e0492845aa87637c7c745d85aa15e4ad7e71a8d910080f5d5a469dd348f59ffaaed8c488cb92708fae56350a0bfc7bc5750c65e12da1f0d4eca70
+  checksum: 10c0/2221366589b1fce39578c7dc25e420902585ea0eed02214deca7795a407f56dc607a97bc0e346e4e01502fe181269d3075380b3c7af75a8b70f73e0ddb5585c4
   languageName: node
   linkType: hard
 
-"@react-navigation/stack@npm:^7.2.10":
-  version: 7.6.13
-  resolution: "@react-navigation/stack@npm:7.6.13"
+"@react-navigation/routers@npm:^8.0.0-alpha.10":
+  version: 8.0.0-alpha.10
+  resolution: "@react-navigation/routers@npm:8.0.0-alpha.10"
   dependencies:
-    "@react-navigation/elements": "npm:^2.9.3"
-    color: "npm:^4.2.3"
-    use-latest-callback: "npm:^0.2.4"
-  peerDependencies:
-    "@react-navigation/native": ^7.1.26
-    react: ">= 18.2.0"
-    react-native: "*"
-    react-native-gesture-handler: ">= 2.0.0"
-    react-native-safe-area-context: ">= 4.0.0"
-    react-native-screens: ">= 4.0.0"
-  checksum: 10c0/2c6b7c8783a981c8316d79f3ac5dc563c6cdca3e15e8d5dcb4ef8f58f40e0d26c0a7c0903cc3793b73bfcfd03261045f5a848a54d34f11379f045c0fd723a307
+    nanoid: "npm:^5.1.7"
+  checksum: 10c0/1ca44e6b0baccd802cd306c96bcd38ab7513856c2cbad457c146449349718ccecdedbdeeff77c490429b080f5fc92df7fd5e8e87a902b62bbec9a8e6e7a6ae14
   languageName: node
   linkType: hard
 
@@ -4982,334 +4696,476 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rtsao/scc@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "@rtsao/scc@npm:1.1.0"
-  checksum: 10c0/b5bcfb0d87f7d1c1c7c0f7693f53b07866ed9fec4c34a97a8c948fb9a7c0082e416ce4d3b60beb4f5e167cbe04cdeefbf6771320f3ede059b9ce91188c409a5b
+"@rsbuild/core@npm:^2.0.9":
+  version: 2.0.15
+  resolution: "@rsbuild/core@npm:2.0.15"
+  dependencies:
+    "@rspack/core": "npm:~2.0.8"
+    "@swc/helpers": "npm:^0.5.23"
+  peerDependencies:
+    core-js: ">= 3.0.0"
+  peerDependenciesMeta:
+    core-js:
+      optional: true
+  bin:
+    rsbuild: ./bin/rsbuild.js
+  checksum: 10c0/0aa77a2e4928e1b62b26fa986467d8226a89f2fb0680ae825a36f7e581a976e6bb43debcca4dcdb7fd8d68b05a7f7ef2e5b25b9769afd70ea2a65c1103b59e2e
   languageName: node
   linkType: hard
 
-"@sideway/address@npm:^4.1.5":
-  version: 4.1.5
-  resolution: "@sideway/address@npm:4.1.5"
+"@rsbuild/plugin-react@npm:~2.0.1":
+  version: 2.0.1
+  resolution: "@rsbuild/plugin-react@npm:2.0.1"
   dependencies:
-    "@hapi/hoek": "npm:^9.0.0"
-  checksum: 10c0/638eb6f7e7dba209053dd6c8da74d7cc995e2b791b97644d0303a7dd3119263bcb7225a4f6804d4db2bc4f96e5a9d262975a014f58eae4d1753c27cbc96ef959
+    "@rspack/plugin-react-refresh": "npm:2.0.0"
+    react-refresh: "npm:^0.18.0"
+  peerDependencies:
+    "@rsbuild/core": ^2.0.0-0
+  peerDependenciesMeta:
+    "@rsbuild/core":
+      optional: true
+  checksum: 10c0/b9bb8941ca8081a7231e5b61fe071f8eda79f09ef3177b1ba4d2472ad6df749931446e0a3c71f2de930b8cdf05eac90d37d7f50f498752577516a694c2ee43e9
   languageName: node
   linkType: hard
 
-"@sideway/formula@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "@sideway/formula@npm:3.0.1"
-  checksum: 10c0/3fe81fa9662efc076bf41612b060eb9b02e846ea4bea5bd114f1662b7f1541e9dedcf98aff0d24400bcb92f113964a50e0290b86e284edbdf6346fa9b7e2bf2c
+"@rspack/binding-darwin-arm64@npm:2.0.8":
+  version: 2.0.8
+  resolution: "@rspack/binding-darwin-arm64@npm:2.0.8"
+  conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@sideway/pinpoint@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "@sideway/pinpoint@npm:2.0.0"
-  checksum: 10c0/d2ca75dacaf69b8fc0bb8916a204e01def3105ee44d8be16c355e5f58189eb94039e15ce831f3d544f229889ccfa35562a0ce2516179f3a7ee1bbe0b71e55b36
+"@rspack/binding-darwin-x64@npm:2.0.8":
+  version: 2.0.8
+  resolution: "@rspack/binding-darwin-x64@npm:2.0.8"
+  conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@sinclair/typebox@npm:^0.27.8":
-  version: 0.27.8
-  resolution: "@sinclair/typebox@npm:0.27.8"
-  checksum: 10c0/ef6351ae073c45c2ac89494dbb3e1f87cc60a93ce4cde797b782812b6f97da0d620ae81973f104b43c9b7eaa789ad20ba4f6a1359f1cc62f63729a55a7d22d4e
+"@rspack/binding-linux-arm64-gnu@npm:2.0.8":
+  version: 2.0.8
+  resolution: "@rspack/binding-linux-arm64-gnu@npm:2.0.8"
+  conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@sindresorhus/is@npm:^0.14.0":
-  version: 0.14.0
-  resolution: "@sindresorhus/is@npm:0.14.0"
-  checksum: 10c0/7247aa9314d4fc3df9b3f63d8b5b962a89c7600a5db1f268546882bfc4d31a975a899f5f42a09dd41a11e58636e6402f7c40f92df853aee417247bb11faee9a0
+"@rspack/binding-linux-arm64-musl@npm:2.0.8":
+  version: 2.0.8
+  resolution: "@rspack/binding-linux-arm64-musl@npm:2.0.8"
+  conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@sindresorhus/is@npm:^4.0.0":
-  version: 4.6.0
-  resolution: "@sindresorhus/is@npm:4.6.0"
-  checksum: 10c0/33b6fb1d0834ec8dd7689ddc0e2781c2bfd8b9c4e4bacbcb14111e0ae00621f2c264b8a7d36541799d74888b5dccdf422a891a5cb5a709ace26325eedc81e22e
+"@rspack/binding-linux-x64-gnu@npm:2.0.8":
+  version: 2.0.8
+  resolution: "@rspack/binding-linux-x64-gnu@npm:2.0.8"
+  conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@sinonjs/commons@npm:^3.0.0":
-  version: 3.0.1
-  resolution: "@sinonjs/commons@npm:3.0.1"
-  dependencies:
-    type-detect: "npm:4.0.8"
-  checksum: 10c0/1227a7b5bd6c6f9584274db996d7f8cee2c8c350534b9d0141fc662eaf1f292ea0ae3ed19e5e5271c8fd390d27e492ca2803acd31a1978be2cdc6be0da711403
+"@rspack/binding-linux-x64-musl@npm:2.0.8":
+  version: 2.0.8
+  resolution: "@rspack/binding-linux-x64-musl@npm:2.0.8"
+  conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@sinonjs/fake-timers@npm:^10.0.2":
-  version: 10.3.0
-  resolution: "@sinonjs/fake-timers@npm:10.3.0"
+"@rspack/binding-wasm32-wasi@npm:2.0.8":
+  version: 2.0.8
+  resolution: "@rspack/binding-wasm32-wasi@npm:2.0.8"
   dependencies:
-    "@sinonjs/commons": "npm:^3.0.0"
-  checksum: 10c0/2e2fb6cc57f227912814085b7b01fede050cd4746ea8d49a1e44d5a0e56a804663b0340ae2f11af7559ea9bf4d087a11f2f646197a660ea3cb04e19efc04aa63
+    "@emnapi/core": "npm:1.10.0"
+    "@emnapi/runtime": "npm:1.10.0"
+    "@napi-rs/wasm-runtime": "npm:1.1.4"
+  conditions: cpu=wasm32
   languageName: node
   linkType: hard
 
-"@slorber/static-site-generator-webpack-plugin@npm:^4.0.7":
-  version: 4.0.7
-  resolution: "@slorber/static-site-generator-webpack-plugin@npm:4.0.7"
-  dependencies:
-    eval: "npm:^0.1.8"
-    p-map: "npm:^4.0.0"
-    webpack-sources: "npm:^3.2.2"
-  checksum: 10c0/6ba8abc2d99e8c513bb955502f9cd219c78b2c7b9b76668bf05067cf369cfa838089b52ee51c957e1e6e8442f9dd4f2bbd8df706a3c3388e9a0d41b09a895f97
+"@rspack/binding-win32-arm64-msvc@npm:2.0.8":
+  version: 2.0.8
+  resolution: "@rspack/binding-win32-arm64-msvc@npm:2.0.8"
+  conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@svgr/babel-plugin-add-jsx-attribute@npm:^6.5.1":
-  version: 6.5.1
-  resolution: "@svgr/babel-plugin-add-jsx-attribute@npm:6.5.1"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/a13ed0797189d5497890530449029bec388310e260a96459e304e2729e7a2cf4d20d34f882d9a77ccce73dd3d36065afbb6987258fdff618d7d57955065a8ad4
+"@rspack/binding-win32-ia32-msvc@npm:2.0.8":
+  version: 2.0.8
+  resolution: "@rspack/binding-win32-ia32-msvc@npm:2.0.8"
+  conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@svgr/babel-plugin-remove-jsx-attribute@npm:*":
-  version: 8.0.0
-  resolution: "@svgr/babel-plugin-remove-jsx-attribute@npm:8.0.0"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/8a98e59bd9971e066815b4129409932f7a4db4866834fe75677ea6d517972fb40b380a69a4413189f20e7947411f9ab1b0f029dd5e8068686a5a0188d3ccd4c7
+"@rspack/binding-win32-x64-msvc@npm:2.0.8":
+  version: 2.0.8
+  resolution: "@rspack/binding-win32-x64-msvc@npm:2.0.8"
+  conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
-"@svgr/babel-plugin-remove-jsx-empty-expression@npm:*":
-  version: 8.0.0
-  resolution: "@svgr/babel-plugin-remove-jsx-empty-expression@npm:8.0.0"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/517dcca75223bd05d3f056a8514dbba3031278bea4eadf0842c576d84f4651e7a4e0e7082d3ee4ef42456de0f9c4531d8a1917c04876ca64b014b859ca8f1bde
+"@rspack/binding@npm:2.0.8":
+  version: 2.0.8
+  resolution: "@rspack/binding@npm:2.0.8"
+  dependencies:
+    "@rspack/binding-darwin-arm64": "npm:2.0.8"
+    "@rspack/binding-darwin-x64": "npm:2.0.8"
+    "@rspack/binding-linux-arm64-gnu": "npm:2.0.8"
+    "@rspack/binding-linux-arm64-musl": "npm:2.0.8"
+    "@rspack/binding-linux-x64-gnu": "npm:2.0.8"
+    "@rspack/binding-linux-x64-musl": "npm:2.0.8"
+    "@rspack/binding-wasm32-wasi": "npm:2.0.8"
+    "@rspack/binding-win32-arm64-msvc": "npm:2.0.8"
+    "@rspack/binding-win32-ia32-msvc": "npm:2.0.8"
+    "@rspack/binding-win32-x64-msvc": "npm:2.0.8"
+  dependenciesMeta:
+    "@rspack/binding-darwin-arm64":
+      optional: true
+    "@rspack/binding-darwin-x64":
+      optional: true
+    "@rspack/binding-linux-arm64-gnu":
+      optional: true
+    "@rspack/binding-linux-arm64-musl":
+      optional: true
+    "@rspack/binding-linux-x64-gnu":
+      optional: true
+    "@rspack/binding-linux-x64-musl":
+      optional: true
+    "@rspack/binding-wasm32-wasi":
+      optional: true
+    "@rspack/binding-win32-arm64-msvc":
+      optional: true
+    "@rspack/binding-win32-ia32-msvc":
+      optional: true
+    "@rspack/binding-win32-x64-msvc":
+      optional: true
+  checksum: 10c0/a5a61d6ea25fafb002bbdb6bc2600c4fba1ae1e2da3d4afd86b458eb83bfff413fa2415ecd83ffd7c4e8aa60f2cc90df6793a27e56681a5fdb415d0df428e42b
   languageName: node
   linkType: hard
 
-"@svgr/babel-plugin-replace-jsx-attribute-value@npm:^6.5.1":
-  version: 6.5.1
-  resolution: "@svgr/babel-plugin-replace-jsx-attribute-value@npm:6.5.1"
+"@rspack/core@npm:~2.0.8":
+  version: 2.0.8
+  resolution: "@rspack/core@npm:2.0.8"
+  dependencies:
+    "@rspack/binding": "npm:2.0.8"
   peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/318786787c9a217c33a7340c8856436858e1fffa5a6df635fedc6b9a371f3afea080ea074b9e3cfbbd9dd962ead924fde8bc9855a394c38dd60e391883a58c81
+    "@module-federation/runtime-tools": ^0.24.1 || ^2.0.0
+    "@swc/helpers": ^0.5.23
+  peerDependenciesMeta:
+    "@module-federation/runtime-tools":
+      optional: true
+    "@swc/helpers":
+      optional: true
+  checksum: 10c0/7862d5e17df9bcf70de1472142df047188a1a87c028481225702af15d69940d9935b91502e05d04f42ccc12fcdd70d6d846222817a2054b18135b4143d483047
   languageName: node
   linkType: hard
 
-"@svgr/babel-plugin-svg-dynamic-title@npm:^6.5.1":
-  version: 6.5.1
-  resolution: "@svgr/babel-plugin-svg-dynamic-title@npm:6.5.1"
+"@rspack/plugin-react-refresh@npm:2.0.0":
+  version: 2.0.0
+  resolution: "@rspack/plugin-react-refresh@npm:2.0.0"
   peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/16ef228c793b909fec47dd7dc05c1c3c2d77a824f42055df37e141e0534081b1bc4aec6dcc51be50c221df9f262f59270fc1c379923bfd4f5db302abafabfd8d
+    "@rspack/core": ^2.0.0-0
+    react-refresh: ">=0.10.0 <1.0.0"
+  peerDependenciesMeta:
+    "@rspack/core":
+      optional: true
+  checksum: 10c0/ee8e6492c0772536abb98ab5ec92d0e4ad092613a3a6085542f0b354131eef48f4d7cbe9a8cf9a9389d5e51d623d08a2c07594c8add5ad5fb54fd5543150ead1
   languageName: node
   linkType: hard
 
-"@svgr/babel-plugin-svg-em-dimensions@npm:^6.5.1":
-  version: 6.5.1
-  resolution: "@svgr/babel-plugin-svg-em-dimensions@npm:6.5.1"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/dfdd5cbe6ae543505eaa0da69df0735b7407294c4b0504b3e74c0e7e371f1acb914eb99fd21ff39ef5bd626b3474f064a4cccc50f41b7c556ee834f9a6d6610a
+"@rspress/core@npm:2.0.14":
+  version: 2.0.14
+  resolution: "@rspress/core@npm:2.0.14"
+  dependencies:
+    "@mdx-js/mdx": "npm:^3.1.1"
+    "@mdx-js/react": "npm:^3.1.1"
+    "@rsbuild/core": "npm:^2.0.9"
+    "@rsbuild/plugin-react": "npm:~2.0.1"
+    "@rspress/shared": "npm:2.0.14"
+    "@shikijs/rehype": "npm:^4.0.2"
+    "@types/unist": "npm:^3.0.3"
+    "@unhead/react": "npm:^2.1.15"
+    body-scroll-lock: "npm:4.0.0-beta.0"
+    clsx: "npm:2.1.1"
+    copy-to-clipboard: "npm:^3.3.3"
+    flexsearch: "npm:0.8.212"
+    hast-util-heading-rank: "npm:^3.0.0"
+    hast-util-to-jsx-runtime: "npm:^2.3.6"
+    mdast-util-mdx: "npm:^3.0.0"
+    mdast-util-mdxjs-esm: "npm:^2.0.1"
+    medium-zoom: "npm:1.1.0"
+    nprogress: "npm:^0.2.0"
+    react: "npm:^19.2.6"
+    react-dom: "npm:^19.2.6"
+    react-lazy-with-preload: "npm:^2.2.1"
+    react-reconciler: "npm:0.33.0"
+    react-render-to-markdown: "npm:19.1.0"
+    react-router-dom: "npm:^7.15.1"
+    rehype-external-links: "npm:^3.0.0"
+    rehype-raw: "npm:^7.0.0"
+    remark-cjk-friendly: "npm:^2.0.1"
+    remark-cjk-friendly-gfm-strikethrough: "npm:^2.0.1"
+    remark-gfm: "npm:^4.0.1"
+    remark-mdx: "npm:^3.1.1"
+    remark-parse: "npm:^11.0.0"
+    remark-stringify: "npm:^11.0.0"
+    scroll-into-view-if-needed: "npm:^3.1.0"
+    shiki: "npm:^4.0.2"
+    unified: "npm:^11.0.5"
+    unist-util-remove: "npm:^4.0.0"
+    unist-util-visit: "npm:^5.1.0"
+    unist-util-visit-children: "npm:^3.0.0"
+  bin:
+    rspress: bin/rspress.js
+  checksum: 10c0/118ae88259f55dae748f92bdb64a7185861612fe5d784ebb5991b2598b85320ec9a718a72f6015542b79f620c358a34ed9f4f83cf98ff2aab45036f44b0f9455
   languageName: node
   linkType: hard
 
-"@svgr/babel-plugin-transform-react-native-svg@npm:^6.5.1":
-  version: 6.5.1
-  resolution: "@svgr/babel-plugin-transform-react-native-svg@npm:6.5.1"
+"@rspress/plugin-sitemap@npm:^2.0.8":
+  version: 2.0.14
+  resolution: "@rspress/plugin-sitemap@npm:2.0.14"
   peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/332fbf3bbc19d938b744440dbab9c8acd8f7a2ed6bf9c4e23f40e3f2c25615a60b3bf00902a4f1f6c20b5f382a1547b3acc6f2b2d70d80e532b5d45945f1b979
+    "@rspress/core": ^2.0.10
+  checksum: 10c0/d8d1c902cdc5315ecbefb30b9c2a3530031e153d679fc547b8b916a7c8f390c097ffe9150a99dc2117a887c6923f13e06e081a8b134ce0d3bab9608fc6d2c8df
   languageName: node
   linkType: hard
 
-"@svgr/babel-plugin-transform-svg-component@npm:^6.5.1":
-  version: 6.5.1
-  resolution: "@svgr/babel-plugin-transform-svg-component@npm:6.5.1"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/8d9e1c7c62abce23837e53cdacc6d09bc1f1f2b0ad7322105001c097995e9aa8dca4fa41acf39148af69f342e40081c438106949fb083e997ca497cb0448f27d
+"@rspress/shared@npm:2.0.14":
+  version: 2.0.14
+  resolution: "@rspress/shared@npm:2.0.14"
+  dependencies:
+    "@rsbuild/core": "npm:^2.0.9"
+    "@shikijs/rehype": "npm:^4.0.2"
+    unified: "npm:^11.0.5"
+  checksum: 10c0/a33bec3b057886e549f5fbd5b6c754e770836533346b339241d2cc77a8792ee501654434afceac459fcc5b1bf1a7b0d1d2f940ba296df57a628e9697accde596
   languageName: node
   linkType: hard
 
-"@svgr/babel-preset@npm:^6.5.1":
-  version: 6.5.1
-  resolution: "@svgr/babel-preset@npm:6.5.1"
-  dependencies:
-    "@svgr/babel-plugin-add-jsx-attribute": "npm:^6.5.1"
-    "@svgr/babel-plugin-remove-jsx-attribute": "npm:*"
-    "@svgr/babel-plugin-remove-jsx-empty-expression": "npm:*"
-    "@svgr/babel-plugin-replace-jsx-attribute-value": "npm:^6.5.1"
-    "@svgr/babel-plugin-svg-dynamic-title": "npm:^6.5.1"
-    "@svgr/babel-plugin-svg-em-dimensions": "npm:^6.5.1"
-    "@svgr/babel-plugin-transform-react-native-svg": "npm:^6.5.1"
-    "@svgr/babel-plugin-transform-svg-component": "npm:^6.5.1"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/8e8d7a0049279152f9ac308fbfd4ce74063d8a376154718cba6309bae4316318804a32201c75c5839c629f8e1e5d641a87822764000998161d0fc1de24b0374a
+"@rtsao/scc@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@rtsao/scc@npm:1.1.0"
+  checksum: 10c0/b5bcfb0d87f7d1c1c7c0f7693f53b07866ed9fec4c34a97a8c948fb9a7c0082e416ce4d3b60beb4f5e167cbe04cdeefbf6771320f3ede059b9ce91188c409a5b
   languageName: node
   linkType: hard
 
-"@svgr/core@npm:^6.5.1":
-  version: 6.5.1
-  resolution: "@svgr/core@npm:6.5.1"
+"@shikijs/core@npm:4.2.0":
+  version: 4.2.0
+  resolution: "@shikijs/core@npm:4.2.0"
   dependencies:
-    "@babel/core": "npm:^7.19.6"
-    "@svgr/babel-preset": "npm:^6.5.1"
-    "@svgr/plugin-jsx": "npm:^6.5.1"
-    camelcase: "npm:^6.2.0"
-    cosmiconfig: "npm:^7.0.1"
-  checksum: 10c0/60cce11e13391171132115dcc8da592d23e51f155ebadf9b819bd1836b8c13d40aa5c30a03a7d429f65e70a71c50669b2e10c94e4922de4e58bc898275f46c05
+    "@shikijs/primitive": "npm:4.2.0"
+    "@shikijs/types": "npm:4.2.0"
+    "@shikijs/vscode-textmate": "npm:^10.0.2"
+    "@types/hast": "npm:^3.0.4"
+    hast-util-to-html: "npm:^9.0.5"
+  checksum: 10c0/86828109468e6de10a9976d951ab09c124b06ded3f46cf8043a3e45d7f78f1d6fe24abbdf0044e7fe4fd734e837ecd9b63b7fa964eccadb7e1b0c95519c44f5a
   languageName: node
   linkType: hard
 
-"@svgr/hast-util-to-babel-ast@npm:^6.5.1":
-  version: 6.5.1
-  resolution: "@svgr/hast-util-to-babel-ast@npm:6.5.1"
+"@shikijs/engine-javascript@npm:4.2.0":
+  version: 4.2.0
+  resolution: "@shikijs/engine-javascript@npm:4.2.0"
   dependencies:
-    "@babel/types": "npm:^7.20.0"
-    entities: "npm:^4.4.0"
-  checksum: 10c0/18fa37b36581ba1678f5cc5a05ce0411e08df4db267f3cd900af7ffdf5bd90522f3a46465f315cd5d7345264949479133930aafdd27ce05c474e63756196256f
+    "@shikijs/types": "npm:4.2.0"
+    "@shikijs/vscode-textmate": "npm:^10.0.2"
+    oniguruma-to-es: "npm:^4.3.6"
+  checksum: 10c0/681045e8acfe19feaf5bb2b282ffdd006a5a06c666a726f844f8bd489c9c12eb5290cd29b97655d43a366370f2edac4eea868d8221637a5fcdc886e562bef0c6
   languageName: node
   linkType: hard
 
-"@svgr/plugin-jsx@npm:^6.5.1":
-  version: 6.5.1
-  resolution: "@svgr/plugin-jsx@npm:6.5.1"
+"@shikijs/engine-oniguruma@npm:4.2.0":
+  version: 4.2.0
+  resolution: "@shikijs/engine-oniguruma@npm:4.2.0"
   dependencies:
-    "@babel/core": "npm:^7.19.6"
-    "@svgr/babel-preset": "npm:^6.5.1"
-    "@svgr/hast-util-to-babel-ast": "npm:^6.5.1"
-    svg-parser: "npm:^2.0.4"
-  peerDependencies:
-    "@svgr/core": ^6.0.0
-  checksum: 10c0/365da6e43ceeff6b49258fa2fbb3c880210300e4a85ba74831e92d2dc9c53e6ab8dda422dc33fb6a339803227cf8d9a0024ce769401c46fd87209abe36d5ae43
+    "@shikijs/types": "npm:4.2.0"
+    "@shikijs/vscode-textmate": "npm:^10.0.2"
+  checksum: 10c0/ffba487224c9d96735a251b2aacd33a1769d27f4ad6b80b83bb025abd7ae2195c7e07dfc96c5978a6cc4b32d55b232dc9fe6e67c0752a78962c649891700bf7f
   languageName: node
   linkType: hard
 
-"@svgr/plugin-svgo@npm:^6.5.1":
-  version: 6.5.1
-  resolution: "@svgr/plugin-svgo@npm:6.5.1"
+"@shikijs/langs@npm:4.2.0":
+  version: 4.2.0
+  resolution: "@shikijs/langs@npm:4.2.0"
   dependencies:
-    cosmiconfig: "npm:^7.0.1"
-    deepmerge: "npm:^4.2.2"
-    svgo: "npm:^2.8.0"
-  peerDependencies:
-    "@svgr/core": "*"
-  checksum: 10c0/da40e461145af1a92fd2ec50ea64626681fa73786f218497a4b4fb85393a58812999ca2744ee33bb7ab771aa5ce9ab1dbd08a189cb3d7a89fb58fd96913ddf91
+    "@shikijs/types": "npm:4.2.0"
+  checksum: 10c0/a069467bf1dc458a1deef91388e3b48dffeef20502d51fa0c548c0dc3adfc4222c789fa47975ff28b0f9fe76de139899830ad320cfddc99ce2c193b05de69937
   languageName: node
   linkType: hard
 
-"@svgr/webpack@npm:^6.2.1":
-  version: 6.5.1
-  resolution: "@svgr/webpack@npm:6.5.1"
+"@shikijs/primitive@npm:4.2.0":
+  version: 4.2.0
+  resolution: "@shikijs/primitive@npm:4.2.0"
   dependencies:
-    "@babel/core": "npm:^7.19.6"
-    "@babel/plugin-transform-react-constant-elements": "npm:^7.18.12"
-    "@babel/preset-env": "npm:^7.19.4"
-    "@babel/preset-react": "npm:^7.18.6"
-    "@babel/preset-typescript": "npm:^7.18.6"
-    "@svgr/core": "npm:^6.5.1"
-    "@svgr/plugin-jsx": "npm:^6.5.1"
-    "@svgr/plugin-svgo": "npm:^6.5.1"
-  checksum: 10c0/3e9edfbc2ef3dc07b5f50c9c5ff5c951048511dff9dffb0407e6d15343849dfb36099fc7e1e3911429382cab81f7735a86ba1d6f77d21bb8f9ca33a5dec4824a
+    "@shikijs/types": "npm:4.2.0"
+    "@shikijs/vscode-textmate": "npm:^10.0.2"
+    "@types/hast": "npm:^3.0.4"
+  checksum: 10c0/8acd8af89d427bc8e1c0c9a98be8ca3ac0b7cb193039c59389fc80a4747daaf4ee0ee273d33e99e94e969be1ca3eb33da700caabd17218c848b11526cb6eaf52
   languageName: node
   linkType: hard
 
-"@szmarczak/http-timer@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "@szmarczak/http-timer@npm:1.1.2"
+"@shikijs/rehype@npm:^4.0.2":
+  version: 4.2.0
+  resolution: "@shikijs/rehype@npm:4.2.0"
   dependencies:
-    defer-to-connect: "npm:^1.0.1"
-  checksum: 10c0/0594140e027ce4e98970c6d176457fcbff80900b1b3101ac0d08628ca6d21d70e0b94c6aaada94d4f76c1423fcc7195af83da145ce0fd556fc0595ca74a17b8b
+    "@shikijs/types": "npm:4.2.0"
+    "@types/hast": "npm:^3.0.4"
+    hast-util-to-string: "npm:^3.0.1"
+    shiki: "npm:4.2.0"
+    unified: "npm:^11.0.5"
+    unist-util-visit: "npm:^5.1.0"
+  checksum: 10c0/209e03b211e9be445fa7dcc592a399c0df41e598fbd70340b3b3e736c1ced98b6463c041727cf1fe1d7de4f49306d880ee9a3d811d2d2c20d793881dc8a60f88
   languageName: node
   linkType: hard
 
-"@szmarczak/http-timer@npm:^4.0.5":
-  version: 4.0.6
-  resolution: "@szmarczak/http-timer@npm:4.0.6"
+"@shikijs/themes@npm:4.2.0":
+  version: 4.2.0
+  resolution: "@shikijs/themes@npm:4.2.0"
   dependencies:
-    defer-to-connect: "npm:^2.0.0"
-  checksum: 10c0/73946918c025339db68b09abd91fa3001e87fc749c619d2e9c2003a663039d4c3cb89836c98a96598b3d47dec2481284ba85355392644911f5ecd2336536697f
+    "@shikijs/types": "npm:4.2.0"
+  checksum: 10c0/95c3611fab74802efe6025154a7f145fe5c71fb7ad8a998b061b0a628788bce667f942ade9bd8f0c16b47d2afde10a4bbeccbd455c96f35e21ccecf126740c7d
   languageName: node
   linkType: hard
 
-"@testing-library/jest-native@npm:^5.4.1":
-  version: 5.4.3
-  resolution: "@testing-library/jest-native@npm:5.4.3"
+"@shikijs/types@npm:4.2.0":
+  version: 4.2.0
+  resolution: "@shikijs/types@npm:4.2.0"
   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"
-    redent: "npm:^3.0.0"
-  peerDependencies:
-    react: ">=16.0.0"
-    react-native: ">=0.59"
-    react-test-renderer: ">=16.0.0"
-  checksum: 10c0/9315989dc0377a778f7ec9317b98c1dab9a7e2ebe0ca20a5c75f9dba3a4b486c02452b4399dd1aeef9ebf0007247594c6357f62089f095fde5280ce0344f5e65
+    "@shikijs/vscode-textmate": "npm:^10.0.2"
+    "@types/hast": "npm:^3.0.4"
+  checksum: 10c0/d78095c1df9ec8ee0a3cd3e203b9431943f88d1f5efce5cfabad87935f6bcd9628d3f450b42c8e65e7119fd94549e84ae4c5ac564cb55424bab12f67f26a0f0b
   languageName: node
   linkType: hard
 
-"@testing-library/react-native@npm:11.5.0":
-  version: 11.5.0
-  resolution: "@testing-library/react-native@npm:11.5.0"
-  dependencies:
-    pretty-format: "npm:^29.0.0"
-  peerDependencies:
-    jest: ">=28.0.0"
-    react: ">=16.0.0"
-    react-native: ">=0.59"
-    react-test-renderer: ">=16.0.0"
-  peerDependenciesMeta:
-    jest:
-      optional: true
-  checksum: 10c0/2b5a1c18fa69d6b38b937b70a60fb300db4c88d0c73205fb84f61075819075937715f029b3e623cdd88e752460aaf8b65d3f716ae1209d8b8cff5ec6501ebc98
+"@shikijs/vscode-textmate@npm:^10.0.2":
+  version: 10.0.2
+  resolution: "@shikijs/vscode-textmate@npm:10.0.2"
+  checksum: 10c0/36b682d691088ec244de292dc8f91b808f95c89466af421cf84cbab92230f03c8348649c14b3251991b10ce632b0c715e416e992dd5f28ff3221dc2693fd9462
   languageName: node
   linkType: hard
 
-"@trysound/sax@npm:0.2.0":
-  version: 0.2.0
-  resolution: "@trysound/sax@npm:0.2.0"
-  checksum: 10c0/44907308549ce775a41c38a815f747009ac45929a45d642b836aa6b0a536e4978d30b8d7d680bbd116e9dd73b7dbe2ef0d1369dcfc2d09e83ba381e485ecbe12
+"@sinclair/typebox@npm:^0.27.8":
+  version: 0.27.8
+  resolution: "@sinclair/typebox@npm:0.27.8"
+  checksum: 10c0/ef6351ae073c45c2ac89494dbb3e1f87cc60a93ce4cde797b782812b6f97da0d620ae81973f104b43c9b7eaa789ad20ba4f6a1359f1cc62f63729a55a7d22d4e
   languageName: node
   linkType: hard
 
-"@tsconfig/docusaurus@npm:^1.0.6":
-  version: 1.0.7
-  resolution: "@tsconfig/docusaurus@npm:1.0.7"
-  checksum: 10c0/49a9bb6f04a4eaee889a6950084dd14c6755fbd68951c7b9101f7031f7186ab7b46bb7e58e60e7a42d58db7ea20f981f43501ea653c1125f9863287c7108eb86
+"@sinclair/typebox@npm:^0.34.0":
+  version: 0.34.49
+  resolution: "@sinclair/typebox@npm:0.34.49"
+  checksum: 10c0/16b7d87f039a49b68c10bb4cdcae2ce5242b2472228851fd6483731616aba4ef977690aa517b230a8d20da8185bb416eb34e326f30568b3963c1cf26b05d1ad8
   languageName: node
   linkType: hard
 
-"@tybys/wasm-util@npm:^0.10.0":
-  version: 0.10.1
-  resolution: "@tybys/wasm-util@npm:0.10.1"
-  dependencies:
-    tslib: "npm:^2.4.0"
-  checksum: 10c0/b255094f293794c6d2289300c5fbcafbb5532a3aed3a5ffd2f8dc1828e639b88d75f6a376dd8f94347a44813fd7a7149d8463477a9a49525c8b2dcaa38c2d1e8
+"@sindresorhus/is@npm:^0.14.0":
+  version: 0.14.0
+  resolution: "@sindresorhus/is@npm:0.14.0"
+  checksum: 10c0/7247aa9314d4fc3df9b3f63d8b5b962a89c7600a5db1f268546882bfc4d31a975a899f5f42a09dd41a11e58636e6402f7c40f92df853aee417247bb11faee9a0
   languageName: node
   linkType: hard
 
-"@types/babel__core@npm:^7.1.14":
-  version: 7.20.5
-  resolution: "@types/babel__core@npm:7.20.5"
-  dependencies:
-    "@babel/parser": "npm:^7.20.7"
-    "@babel/types": "npm:^7.20.7"
-    "@types/babel__generator": "npm:*"
-    "@types/babel__template": "npm:*"
-    "@types/babel__traverse": "npm:*"
-  checksum: 10c0/bdee3bb69951e833a4b811b8ee9356b69a61ed5b7a23e1a081ec9249769117fa83aaaf023bb06562a038eb5845155ff663e2d5c75dd95c1d5ccc91db012868ff
+"@sindresorhus/is@npm:^4.0.0":
+  version: 4.6.0
+  resolution: "@sindresorhus/is@npm:4.6.0"
+  checksum: 10c0/33b6fb1d0834ec8dd7689ddc0e2781c2bfd8b9c4e4bacbcb14111e0ae00621f2c264b8a7d36541799d74888b5dccdf422a891a5cb5a709ace26325eedc81e22e
   languageName: node
   linkType: hard
 
-"@types/babel__generator@npm:*":
-  version: 7.27.0
-  resolution: "@types/babel__generator@npm:7.27.0"
-  dependencies:
+"@sindresorhus/merge-streams@npm:^2.1.0":
+  version: 2.3.0
+  resolution: "@sindresorhus/merge-streams@npm:2.3.0"
+  checksum: 10c0/69ee906f3125fb2c6bb6ec5cdd84e8827d93b49b3892bce8b62267116cc7e197b5cccf20c160a1d32c26014ecd14470a72a5e3ee37a58f1d6dadc0db1ccf3894
+  languageName: node
+  linkType: hard
+
+"@sinonjs/commons@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "@sinonjs/commons@npm:3.0.1"
+  dependencies:
+    type-detect: "npm:4.0.8"
+  checksum: 10c0/1227a7b5bd6c6f9584274db996d7f8cee2c8c350534b9d0141fc662eaf1f292ea0ae3ed19e5e5271c8fd390d27e492ca2803acd31a1978be2cdc6be0da711403
+  languageName: node
+  linkType: hard
+
+"@sinonjs/fake-timers@npm:^10.0.2":
+  version: 10.3.0
+  resolution: "@sinonjs/fake-timers@npm:10.3.0"
+  dependencies:
+    "@sinonjs/commons": "npm:^3.0.0"
+  checksum: 10c0/2e2fb6cc57f227912814085b7b01fede050cd4746ea8d49a1e44d5a0e56a804663b0340ae2f11af7559ea9bf4d087a11f2f646197a660ea3cb04e19efc04aa63
+  languageName: node
+  linkType: hard
+
+"@swc/helpers@npm:^0.5.23":
+  version: 0.5.23
+  resolution: "@swc/helpers@npm:0.5.23"
+  dependencies:
+    tslib: "npm:^2.8.0"
+  checksum: 10c0/02da7b4df465693933ecd4851cc193ec729c309939c8a84eccae5ec0010aafc3894e713b8ef8d13a6ba401759f0e900c88e2dcfef5872c27bb91e70f73275cce
+  languageName: node
+  linkType: hard
+
+"@szmarczak/http-timer@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "@szmarczak/http-timer@npm:1.1.2"
+  dependencies:
+    defer-to-connect: "npm:^1.0.1"
+  checksum: 10c0/0594140e027ce4e98970c6d176457fcbff80900b1b3101ac0d08628ca6d21d70e0b94c6aaada94d4f76c1423fcc7195af83da145ce0fd556fc0595ca74a17b8b
+  languageName: node
+  linkType: hard
+
+"@szmarczak/http-timer@npm:^4.0.5":
+  version: 4.0.6
+  resolution: "@szmarczak/http-timer@npm:4.0.6"
+  dependencies:
+    defer-to-connect: "npm:^2.0.0"
+  checksum: 10c0/73946918c025339db68b09abd91fa3001e87fc749c619d2e9c2003a663039d4c3cb89836c98a96598b3d47dec2481284ba85355392644911f5ecd2336536697f
+  languageName: node
+  linkType: hard
+
+"@testing-library/react-native@npm:^14.0.0":
+  version: 14.0.0
+  resolution: "@testing-library/react-native@npm:14.0.0"
+  dependencies:
+    jest-matcher-utils: "npm:^30.4.1"
+    picocolors: "npm:^1.1.1"
+    pretty-format: "npm:^30.4.1"
+    redent: "npm:^3.0.0"
+  peerDependencies:
+    jest: ">=29.0.0"
+    react: ">=19.0.0"
+    react-native: ">=0.78"
+    test-renderer: ^1.0.0
+  peerDependenciesMeta:
+    jest:
+      optional: true
+  checksum: 10c0/1c19b1d8e1b66757b38904ddddb54c24185b4969faafcbd6b3888841f8597c4a1d87fbff68f3a950bcf051b2ef16adbdb395f44aad1cbc4ba7eaeca900ffc984
+  languageName: node
+  linkType: hard
+
+"@tybys/wasm-util@npm:^0.10.1":
+  version: 0.10.2
+  resolution: "@tybys/wasm-util@npm:0.10.2"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10c0/26165bcd1fd7269f42d7fbe3de318f854a8968de8397e89fc9a423bb3e2da35a52150f382e6323b3367595beb16d9800a6f35971a5599daf76da1742ec3afc25
+  languageName: node
+  linkType: hard
+
+"@types/babel__core@npm:^7.1.14":
+  version: 7.20.5
+  resolution: "@types/babel__core@npm:7.20.5"
+  dependencies:
+    "@babel/parser": "npm:^7.20.7"
+    "@babel/types": "npm:^7.20.7"
+    "@types/babel__generator": "npm:*"
+    "@types/babel__template": "npm:*"
+    "@types/babel__traverse": "npm:*"
+  checksum: 10c0/bdee3bb69951e833a4b811b8ee9356b69a61ed5b7a23e1a081ec9249769117fa83aaaf023bb06562a038eb5845155ff663e2d5c75dd95c1d5ccc91db012868ff
+  languageName: node
+  linkType: hard
+
+"@types/babel__generator@npm:*":
+  version: 7.27.0
+  resolution: "@types/babel__generator@npm:7.27.0"
+  dependencies:
     "@babel/types": "npm:^7.0.0"
   checksum: 10c0/9f9e959a8792df208a9d048092fda7e1858bddc95c6314857a8211a99e20e6830bdeb572e3587ae8be5429e37f2a96fcf222a9f53ad232f5537764c9e13a2bbd
   languageName: node
@@ -5334,25 +5190,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/body-parser@npm:*":
-  version: 1.19.6
-  resolution: "@types/body-parser@npm:1.19.6"
-  dependencies:
-    "@types/connect": "npm:*"
-    "@types/node": "npm:*"
-  checksum: 10c0/542da05c924dce58ee23f50a8b981fee36921850c82222e384931fda3e106f750f7880c47be665217d72dbe445129049db6eb1f44e7a06b09d62af8f3cca8ea7
-  languageName: node
-  linkType: hard
-
-"@types/bonjour@npm:^3.5.9":
-  version: 3.5.13
-  resolution: "@types/bonjour@npm:3.5.13"
-  dependencies:
-    "@types/node": "npm:*"
-  checksum: 10c0/eebedbca185ac3c39dd5992ef18d9e2a9f99e7f3c2f52f5561f90e9ed482c5d224c7962db95362712f580ed5713264e777a98d8f0bd8747f4eadf62937baed16
-  languageName: node
-  linkType: hard
-
 "@types/cacheable-request@npm:^6.0.1":
   version: 6.0.3
   resolution: "@types/cacheable-request@npm:6.0.3"
@@ -5390,22 +5227,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/connect-history-api-fallback@npm:^1.3.5":
-  version: 1.5.4
-  resolution: "@types/connect-history-api-fallback@npm:1.5.4"
-  dependencies:
-    "@types/express-serve-static-core": "npm:*"
-    "@types/node": "npm:*"
-  checksum: 10c0/1b4035b627dcd714b05a22557f942e24a57ca48e7377dde0d2f86313fe685bc0a6566512a73257a55b5665b96c3041fb29228ac93331d8133011716215de8244
-  languageName: node
-  linkType: hard
-
-"@types/connect@npm:*":
-  version: 3.4.38
-  resolution: "@types/connect@npm:3.4.38"
+"@types/debug@npm:^4.0.0":
+  version: 4.1.13
+  resolution: "@types/debug@npm:4.1.13"
   dependencies:
-    "@types/node": "npm:*"
-  checksum: 10c0/2e1cdba2c410f25649e77856505cd60223250fa12dff7a503e492208dbfdd25f62859918f28aba95315251fd1f5e1ffbfca1e25e73037189ab85dd3f8d0a148c
+    "@types/ms": "npm:*"
+  checksum: 10c0/e5e124021bbdb23a82727eee0a726ae0fc8a3ae1f57253cbcc47497f259afb357de7f6941375e773e1abbfa1604c1555b901a409d762ec2bb4c1612131d4afb7
   languageName: node
   linkType: hard
 
@@ -5429,67 +5256,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/estree@npm:*, @types/estree@npm:^1.0.8":
-  version: 1.0.8
-  resolution: "@types/estree@npm:1.0.8"
-  checksum: 10c0/39d34d1afaa338ab9763f37ad6066e3f349444f9052b9676a7cc0252ef9485a41c6d81c9c4e0d26e9077993354edf25efc853f3224dd4b447175ef62bdcc86a5
-  languageName: node
-  linkType: hard
-
-"@types/express-serve-static-core@npm:*, @types/express-serve-static-core@npm:^5.0.0":
-  version: 5.1.0
-  resolution: "@types/express-serve-static-core@npm:5.1.0"
-  dependencies:
-    "@types/node": "npm:*"
-    "@types/qs": "npm:*"
-    "@types/range-parser": "npm:*"
-    "@types/send": "npm:*"
-  checksum: 10c0/1918233c68a0c69695f78331af1aed5fb5190f91da6309318f700adeb78573be840b5d206cb8eda804b65a9989fdeccdaaf84c1e95adc3615052749224b64519
-  languageName: node
-  linkType: hard
-
-"@types/express-serve-static-core@npm:^4.17.33":
-  version: 4.19.7
-  resolution: "@types/express-serve-static-core@npm:4.19.7"
-  dependencies:
-    "@types/node": "npm:*"
-    "@types/qs": "npm:*"
-    "@types/range-parser": "npm:*"
-    "@types/send": "npm:*"
-  checksum: 10c0/c239df87863b8515e68dcb18203a9e2ba6108f86fdc385090284464a57a6dca6abb60a961cb6a73fea2110576f4f8acefa1cb06b60d14b6b0e5104478e7d57d1
-  languageName: node
-  linkType: hard
-
-"@types/express@npm:*":
-  version: 5.0.6
-  resolution: "@types/express@npm:5.0.6"
+"@types/estree-jsx@npm:^1.0.0":
+  version: 1.0.5
+  resolution: "@types/estree-jsx@npm:1.0.5"
   dependencies:
-    "@types/body-parser": "npm:*"
-    "@types/express-serve-static-core": "npm:^5.0.0"
-    "@types/serve-static": "npm:^2"
-  checksum: 10c0/f1071e3389a955d4f9a38aae38634121c7cd9b3171ba4201ec9b56bd534aba07866839d278adc0dda05b942b05a901a02fd174201c3b1f70ce22b10b6c68f24b
+    "@types/estree": "npm:*"
+  checksum: 10c0/07b354331516428b27a3ab99ee397547d47eb223c34053b48f84872fafb841770834b90cc1a0068398e7c7ccb15ec51ab00ec64b31dc5e3dbefd624638a35c6d
   languageName: node
   linkType: hard
 
-"@types/express@npm:^4.17.13":
-  version: 4.17.25
-  resolution: "@types/express@npm:4.17.25"
-  dependencies:
-    "@types/body-parser": "npm:*"
-    "@types/express-serve-static-core": "npm:^4.17.33"
-    "@types/qs": "npm:*"
-    "@types/serve-static": "npm:^1"
-  checksum: 10c0/f42b616d2c9dbc50352c820db7de182f64ebbfa8dba6fb6c98e5f8f0e2ef3edde0131719d9dc6874803d25ad9ca2d53471d0fec2fbc60a6003a43d015bab72c4
+"@types/estree@npm:*, @types/estree@npm:^1.0.8":
+  version: 1.0.8
+  resolution: "@types/estree@npm:1.0.8"
+  checksum: 10c0/39d34d1afaa338ab9763f37ad6066e3f349444f9052b9676a7cc0252ef9485a41c6d81c9c4e0d26e9077993354edf25efc853f3224dd4b447175ef62bdcc86a5
   languageName: node
   linkType: hard
 
-"@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
+"@types/estree@npm:^1.0.0, @types/estree@npm:^1.0.6":
+  version: 1.0.9
+  resolution: "@types/estree@npm:1.0.9"
+  checksum: 10c0/3ad3286ca2988cd550dafb8f2ad599c8474868e954fa601a36655bdfefd8039f7c714b8c1c7f2ae219ffbd58bd4660e66fa7479a0120fc02d4777057d4865387
   languageName: node
   linkType: hard
 
@@ -5518,17 +5304,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/history@npm:^4.7.11":
-  version: 4.7.11
-  resolution: "@types/history@npm:4.7.11"
-  checksum: 10c0/3facf37c2493d1f92b2e93a22cac7ea70b06351c2ab9aaceaa3c56aa6099fb63516f6c4ec1616deb5c56b4093c026a043ea2d3373e6c0644d55710364d02c934
-  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"
-  checksum: 10c0/a62fb8588e2f3818d82a2d7b953ad60a4a52fd767ae04671de1c16f5788bd72f1ed3a6109ed63fd190c06a37d919e3c39d8adbc1793a005def76c15a3f5f5dab
+"@types/hast@npm:^3.0.0, @types/hast@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "@types/hast@npm:3.0.4"
+  dependencies:
+    "@types/unist": "npm:*"
+  checksum: 10c0/3249781a511b38f1d330fd1e3344eed3c4e7ea8eff82e835d35da78e637480d36fad37a78be5a7aed8465d237ad0446abc1150859d0fde395354ea634decf9f7
   languageName: node
   linkType: hard
 
@@ -5539,22 +5320,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/http-errors@npm:*":
-  version: 2.0.5
-  resolution: "@types/http-errors@npm:2.0.5"
-  checksum: 10c0/00f8140fbc504f47356512bd88e1910c2f07e04233d99c88c854b3600ce0523c8cd0ba7d1897667243282eb44c59abb9245959e2428b9de004f93937f52f7c15
-  languageName: node
-  linkType: hard
-
-"@types/http-proxy@npm:^1.17.8":
-  version: 1.17.17
-  resolution: "@types/http-proxy@npm:1.17.17"
-  dependencies:
-    "@types/node": "npm:*"
-  checksum: 10c0/547e322a5eecf0b50d08f6a46bd89c8c8663d67dbdcd472da5daf968b03e63a82f6b3650443378abe6c10a46475dac52015f30e8c74ba2ea5820dd4e9cdef2d4
-  languageName: node
-  linkType: hard
-
 "@types/istanbul-lib-coverage@npm:*, @types/istanbul-lib-coverage@npm:^2.0.0, @types/istanbul-lib-coverage@npm:^2.0.1":
   version: 2.0.6
   resolution: "@types/istanbul-lib-coverage@npm:2.0.6"
@@ -5590,17 +5355,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/jest@npm:^29.2.1":
-  version: 29.5.14
-  resolution: "@types/jest@npm:29.5.14"
-  dependencies:
-    expect: "npm:^29.0.0"
-    pretty-format: "npm:^29.0.0"
-  checksum: 10c0/18e0712d818890db8a8dab3d91e9ea9f7f19e3f83c2e50b312f557017dc81466207a71f3ed79cf4428e813ba939954fa26ffa0a9a7f153181ba174581b1c2aed
-  languageName: node
-  linkType: hard
-
-"@types/json-schema@npm:*, @types/json-schema@npm:^7.0.15, @types/json-schema@npm:^7.0.4, @types/json-schema@npm:^7.0.5, @types/json-schema@npm:^7.0.8, @types/json-schema@npm:^7.0.9":
+"@types/json-schema@npm:*, @types/json-schema@npm:^7.0.15, @types/json-schema@npm:^7.0.5, @types/json-schema@npm:^7.0.8, @types/json-schema@npm:^7.0.9":
   version: 7.0.15
   resolution: "@types/json-schema@npm:7.0.15"
   checksum: 10c0/a996a745e6c5d60292f36731dd41341339d4eeed8180bb09226e5c8d23759067692b1d88e5d91d72ee83dfc00d3aca8e7bd43ea120516c17922cbcb7c3e252db
@@ -5630,26 +5385,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/mdast@npm:^3.0.0":
-  version: 3.0.15
-  resolution: "@types/mdast@npm:3.0.15"
+"@types/mdast@npm:^4.0.0":
+  version: 4.0.4
+  resolution: "@types/mdast@npm:4.0.4"
   dependencies:
-    "@types/unist": "npm:^2"
-  checksum: 10c0/fcbf716c03d1ed5465deca60862e9691414f9c43597c288c7d2aefbe274552e1bbd7aeee91b88a02597e88a28c139c57863d0126fcf8416a95fdc681d054ee3d
-  languageName: node
-  linkType: hard
-
-"@types/mime@npm:^1":
-  version: 1.3.5
-  resolution: "@types/mime@npm:1.3.5"
-  checksum: 10c0/c2ee31cd9b993804df33a694d5aa3fa536511a49f2e06eeab0b484fef59b4483777dbb9e42a4198a0809ffbf698081fdbca1e5c2218b82b91603dfab10a10fbc
+    "@types/unist": "npm:*"
+  checksum: 10c0/84f403dbe582ee508fd9c7643ac781ad8597fcbfc9ccb8d4715a2c92e4545e5772cbd0dbdf18eda65789386d81b009967fdef01b24faf6640f817287f54d9c82
   languageName: node
   linkType: hard
 
-"@types/minimatch@npm:*":
-  version: 5.1.2
-  resolution: "@types/minimatch@npm:5.1.2"
-  checksum: 10c0/83cf1c11748891b714e129de0585af4c55dd4c2cafb1f1d5233d79246e5e1e19d1b5ad9e8db449667b3ffa2b6c80125c429dbee1054e9efb45758dbc4e118562
+"@types/mdx@npm:^2.0.0":
+  version: 2.0.14
+  resolution: "@types/mdx@npm:2.0.14"
+  checksum: 10c0/f1e3873c1e36e2685fb99222bf81a23c55a8e2edf49d0c45cabf2c875b0ae814cd6050cce5770ff1c6881ac747d2ad33731e1de32139b04cf181d8d7e1943ff4
   languageName: node
   linkType: hard
 
@@ -5660,12 +5408,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node-forge@npm:^1.3.0":
-  version: 1.3.14
-  resolution: "@types/node-forge@npm:1.3.14"
-  dependencies:
-    "@types/node": "npm:*"
-  checksum: 10c0/da6158fd34fa7652aa7f8164508f97a76b558724ab292f13c257e39d54d95d4d77604e8fb14dc454a867f1aeec7af70118294889195ec4400cecbb8a5c77a212
+"@types/ms@npm:*":
+  version: 2.1.0
+  resolution: "@types/ms@npm:2.1.0"
+  checksum: 10c0/5ce692ffe1549e1b827d99ef8ff71187457e0eb44adbae38fdf7b9a74bae8d20642ee963c14516db1d35fa2652e65f47680fdf679dcbde52bbfadd021f497225
   languageName: node
   linkType: hard
 
@@ -5678,17 +5424,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:^13.1.0":
-  version: 13.13.52
-  resolution: "@types/node@npm:13.13.52"
-  checksum: 10c0/9224aaea219fe7f8b903039bb146d4c38b391d0166a8226a1efa2d43a35b5b7dddfe021c32941bb454a1543da94921c112687934da88e2a019f4bd44f9d517b5
-  languageName: node
-  linkType: hard
-
-"@types/node@npm:^17.0.5":
-  version: 17.0.45
-  resolution: "@types/node@npm:17.0.45"
-  checksum: 10c0/0db377133d709b33a47892581a21a41cd7958f22723a3cc6c71d55ac018121382de42fbfc7970d5ae3e7819dbe5f40e1c6a5174aedf7e7964e9cb8fa72b580b0
+"@types/node@npm:^24.0.0":
+  version: 24.13.2
+  resolution: "@types/node@npm:24.13.2"
+  dependencies:
+    undici-types: "npm:~7.18.0"
+  checksum: 10c0/d7d48a88a4feb0a6aac3cbfaf9ef3b12752b4b09447f88dd0b4c77c03b281e3d4330fe6982a99aedcd63fc16c7540a0c248b91eb2abb0b3edd884d7fe684e9ea
   languageName: node
   linkType: hard
 
@@ -5713,20 +5454,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/qs@npm:*":
-  version: 6.14.0
-  resolution: "@types/qs@npm:6.14.0"
-  checksum: 10c0/5b3036df6e507483869cdb3858201b2e0b64b4793dc4974f188caa5b5732f2333ab9db45c08157975054d3b070788b35088b4bc60257ae263885016ee2131310
-  languageName: node
-  linkType: hard
-
-"@types/range-parser@npm:*":
-  version: 1.2.7
-  resolution: "@types/range-parser@npm:1.2.7"
-  checksum: 10c0/361bb3e964ec5133fa40644a0b942279ed5df1949f21321d77de79f48b728d39253e5ce0408c9c17e4e0fd95ca7899da36841686393b9f7a1e209916e9381a3c
-  languageName: node
-  linkType: hard
-
 "@types/react-color@npm:^3.0.6":
   version: 3.0.13
   resolution: "@types/react-color@npm:3.0.13"
@@ -5738,7 +5465,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:^19.1.1":
+"@types/react-dom@npm:^19.2.3":
   version: 19.2.3
   resolution: "@types/react-dom@npm:19.2.3"
   peerDependencies:
@@ -5747,54 +5474,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-native-vector-icons@npm:^6.4.18":
-  version: 6.4.18
-  resolution: "@types/react-native-vector-icons@npm:6.4.18"
-  dependencies:
-    "@types/react": "npm:*"
-    "@types/react-native": "npm:^0.70"
-  checksum: 10c0/b27f2295c5baaba9ce2ff9ade6e505e4d1fe4f40a628df13dc26d0e1b3ccee9775846f3613a443d91cfe86844703b81e9e64a10cc4b7fac1edfde96cb82c893b
-  languageName: node
-  linkType: hard
-
-"@types/react-native@npm:^0.70":
-  version: 0.70.19
-  resolution: "@types/react-native@npm:0.70.19"
-  dependencies:
-    "@types/react": "npm:*"
-  checksum: 10c0/09a5191dd0f3b85abfa8939df585860ba11a666d888846c7fd7d8d5d1cd72a39224e154403f90a5b82f1dc6c896fa3447e4f5061b2d3e102d0ce798e559d7f13
-  languageName: node
-  linkType: hard
-
-"@types/react-router-config@npm:*, @types/react-router-config@npm:^5.0.6":
-  version: 5.0.11
-  resolution: "@types/react-router-config@npm:5.0.11"
-  dependencies:
-    "@types/history": "npm:^4.7.11"
-    "@types/react": "npm:*"
-    "@types/react-router": "npm:^5.1.0"
-  checksum: 10c0/3fa4daf8c14689a05f34e289fc53c4a892e97f35715455c507a8048d9875b19cd3d3142934ca973effed6a6c38f33539b6e173cd254f67e2021ecd5458d551c8
-  languageName: node
-  linkType: hard
-
-"@types/react-router-dom@npm:*":
-  version: 5.3.3
-  resolution: "@types/react-router-dom@npm:5.3.3"
-  dependencies:
-    "@types/history": "npm:^4.7.11"
-    "@types/react": "npm:*"
-    "@types/react-router": "npm:*"
-  checksum: 10c0/a9231a16afb9ed5142678147eafec9d48582809295754fb60946e29fcd3757a4c7a3180fa94b45763e4c7f6e3f02379e2fcb8dd986db479dcab40eff5fc62a91
-  languageName: node
-  linkType: hard
-
-"@types/react-router@npm:*, @types/react-router@npm:^5.1.0":
-  version: 5.1.20
-  resolution: "@types/react-router@npm:5.1.20"
-  dependencies:
-    "@types/history": "npm:^4.7.11"
-    "@types/react": "npm:*"
-  checksum: 10c0/1f7eee61981d2f807fa01a34a0ef98ebc0774023832b6611a69c7f28fdff01de5a38cabf399f32e376bf8099dcb7afaf724775bea9d38870224492bea4cb5737
+"@types/react-reconciler@npm:~0.33.0":
+  version: 0.33.0
+  resolution: "@types/react-reconciler@npm:0.33.0"
+  peerDependencies:
+    "@types/react": "*"
+  checksum: 10c0/190c203d93c0df9a42fabd693ce059dbdf6c53e15eb14502d9e5b946c981231c5846b867de15522ff61368e9218a8508a9db5476f3e47b5d664bbb2c84b31ac7
   languageName: node
   linkType: hard
 
@@ -5816,6 +5501,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react@npm:^19.2.7":
+  version: 19.2.17
+  resolution: "@types/react@npm:19.2.17"
+  dependencies:
+    csstype: "npm:^3.2.2"
+  checksum: 10c0/bc2c4af96b3e480604424de70d5ebda90c5f4b485df471858c0bc2d7d70364b606ec3c4d8579f94f01aa0c6c0591f56bcf14cba5689f5eea4b74250ccdc3a232
+  languageName: node
+  linkType: hard
+
 "@types/reactcss@npm:*":
   version: 1.2.13
   resolution: "@types/reactcss@npm:1.2.13"
@@ -5834,87 +5528,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/retry@npm:0.12.0":
-  version: 0.12.0
-  resolution: "@types/retry@npm:0.12.0"
-  checksum: 10c0/7c5c9086369826f569b83a4683661557cab1361bac0897a1cefa1a915ff739acd10ca0d62b01071046fe3f5a3f7f2aec80785fe283b75602dc6726781ea3e328
-  languageName: node
-  linkType: hard
-
-"@types/sax@npm:^1.2.1":
-  version: 1.2.7
-  resolution: "@types/sax@npm:1.2.7"
-  dependencies:
-    "@types/node": "npm:*"
-  checksum: 10c0/d077a761a0753b079bf8279b3993948030ca86ed9125437b9b29c1de40db9b2deb7fddc369f014b58861d450e8b8cc75f163aa29dc8cea81952efbfd859168cf
-  languageName: node
-  linkType: hard
-
-"@types/semver@npm:^7.3.12":
-  version: 7.7.1
-  resolution: "@types/semver@npm:7.7.1"
-  checksum: 10c0/c938aef3bf79a73f0f3f6037c16e2e759ff40c54122ddf0b2583703393d8d3127130823facb880e694caa324eb6845628186aac1997ee8b31dc2d18fafe26268
-  languageName: node
-  linkType: hard
-
-"@types/send@npm:*":
-  version: 1.2.1
-  resolution: "@types/send@npm:1.2.1"
-  dependencies:
-    "@types/node": "npm:*"
-  checksum: 10c0/7673747f8c2d8e67f3b1b3b57e9d4d681801a4f7b526ecf09987bb9a84a61cf94aa411c736183884dc762c1c402a61681eb1ef200d8d45d7e5ec0ab67ea5f6c1
-  languageName: node
-  linkType: hard
-
-"@types/send@npm:<1":
-  version: 0.17.6
-  resolution: "@types/send@npm:0.17.6"
-  dependencies:
-    "@types/mime": "npm:^1"
-    "@types/node": "npm:*"
-  checksum: 10c0/a9d76797f0637738062f1b974e0fcf3d396a28c5dc18c3f95ecec5dabda82e223afbc2d56a0bca46b6326fd7bb229979916cea40de2270a98128fd94441b87c2
-  languageName: node
-  linkType: hard
-
-"@types/serve-index@npm:^1.9.1":
-  version: 1.9.4
-  resolution: "@types/serve-index@npm:1.9.4"
-  dependencies:
-    "@types/express": "npm:*"
-  checksum: 10c0/94c1b9e8f1ea36a229e098e1643d5665d9371f8c2658521718e259130a237c447059b903bac0dcc96ee2c15fd63f49aa647099b7d0d437a67a6946527a837438
-  languageName: node
-  linkType: hard
-
-"@types/serve-static@npm:^1, @types/serve-static@npm:^1.13.10":
-  version: 1.15.10
-  resolution: "@types/serve-static@npm:1.15.10"
-  dependencies:
-    "@types/http-errors": "npm:*"
-    "@types/node": "npm:*"
-    "@types/send": "npm:<1"
-  checksum: 10c0/842fca14c9e80468f89b6cea361773f2dcd685d4616a9f59013b55e1e83f536e4c93d6d8e3ba5072d40c4e7e64085210edd6646b15d538ded94512940a23021f
-  languageName: node
-  linkType: hard
-
-"@types/serve-static@npm:^2":
-  version: 2.2.0
-  resolution: "@types/serve-static@npm:2.2.0"
-  dependencies:
-    "@types/http-errors": "npm:*"
-    "@types/node": "npm:*"
-  checksum: 10c0/a3c6126bdbf9685e6c7dc03ad34639666eff32754e912adeed9643bf3dd3aa0ff043002a7f69039306e310d233eb8e160c59308f95b0a619f32366bbc48ee094
-  languageName: node
-  linkType: hard
-
-"@types/sockjs@npm:^0.3.33":
-  version: 0.3.36
-  resolution: "@types/sockjs@npm:0.3.36"
-  dependencies:
-    "@types/node": "npm:*"
-  checksum: 10c0/b20b7820ee813f22de4f2ce98bdd12c68c930e016a8912b1ed967595ac0d8a4cbbff44f4d486dd97f77f5927e7b5725bdac7472c9ec5b27f53a5a13179f0612f
-  languageName: node
-  linkType: hard
-
 "@types/stack-utils@npm:^2.0.0":
   version: 2.0.3
   resolution: "@types/stack-utils@npm:2.0.3"
@@ -5922,14 +5535,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/unist@npm:*":
+"@types/unist@npm:*, @types/unist@npm:^3.0.0, @types/unist@npm:^3.0.3":
   version: 3.0.3
   resolution: "@types/unist@npm:3.0.3"
   checksum: 10c0/2b1e4adcab78388e088fcc3c0ae8700f76619dbcb4741d7d201f87e2cb346bfc29a89003cfea2d76c996e1061452e14fcd737e8b25aacf949c1f2d6b2bc3dd60
   languageName: node
   linkType: hard
 
-"@types/unist@npm:^2, @types/unist@npm:^2.0.0, @types/unist@npm:^2.0.2, @types/unist@npm:^2.0.3":
+"@types/unist@npm:^2, @types/unist@npm:^2.0.0, @types/unist@npm:^2.0.2":
   version: 2.0.11
   resolution: "@types/unist@npm:2.0.11"
   checksum: 10c0/24dcdf25a168f453bb70298145eb043cfdbb82472db0bc0b56d6d51cd2e484b9ed8271d4ac93000a80da568f2402e9339723db262d0869e2bf13bc58e081768d
@@ -5957,15 +5570,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/ws@npm:^8.5.5":
-  version: 8.18.1
-  resolution: "@types/ws@npm:8.18.1"
-  dependencies:
-    "@types/node": "npm:*"
-  checksum: 10c0/61aff1129143fcc4312f083bc9e9e168aa3026b7dd6e70796276dcfb2c8211c4292603f9c4864fae702f2ed86e4abd4d38aa421831c2fd7f856c931a481afbab
-  languageName: node
-  linkType: hard
-
 "@types/yargs-parser@npm:*":
   version: 21.0.3
   resolution: "@types/yargs-parser@npm:21.0.3"
@@ -5991,124 +5595,145 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:^5.36.2, @typescript-eslint/eslint-plugin@npm:^5.41.0":
-  version: 5.62.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:5.62.0"
+"@typescript-eslint/eslint-plugin@npm:8.61.1, @typescript-eslint/eslint-plugin@npm:^8.0.1":
+  version: 8.61.1
+  resolution: "@typescript-eslint/eslint-plugin@npm:8.61.1"
   dependencies:
-    "@eslint-community/regexpp": "npm:^4.4.0"
-    "@typescript-eslint/scope-manager": "npm:5.62.0"
-    "@typescript-eslint/type-utils": "npm:5.62.0"
-    "@typescript-eslint/utils": "npm:5.62.0"
-    debug: "npm:^4.3.4"
-    graphemer: "npm:^1.4.0"
-    ignore: "npm:^5.2.0"
-    natural-compare-lite: "npm:^1.4.0"
-    semver: "npm:^7.3.7"
-    tsutils: "npm:^3.21.0"
+    "@eslint-community/regexpp": "npm:^4.12.2"
+    "@typescript-eslint/scope-manager": "npm:8.61.1"
+    "@typescript-eslint/type-utils": "npm:8.61.1"
+    "@typescript-eslint/utils": "npm:8.61.1"
+    "@typescript-eslint/visitor-keys": "npm:8.61.1"
+    ignore: "npm:^7.0.5"
+    natural-compare: "npm:^1.4.0"
+    ts-api-utils: "npm:^2.5.0"
   peerDependencies:
-    "@typescript-eslint/parser": ^5.0.0
-    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 10c0/3f40cb6bab5a2833c3544e4621b9fdacd8ea53420cadc1c63fac3b89cdf5c62be1e6b7bcf56976dede5db4c43830de298ced3db60b5494a3b961ca1b4bff9f2a
+    "@typescript-eslint/parser": ^8.61.1
+    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+    typescript: ">=4.8.4 <6.1.0"
+  checksum: 10c0/3cb445622907283fb23e78f8bde4d1b04cca96da181a0c549b2775954c5dfa59f20e34c27f73ae3e189420e36637f59145bd97ce45c55017a6c3ac1871197951
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:^5.36.2, @typescript-eslint/parser@npm:^5.41.0":
-  version: 5.62.0
-  resolution: "@typescript-eslint/parser@npm:5.62.0"
+"@typescript-eslint/parser@npm:8.61.1, @typescript-eslint/parser@npm:^8.0.1":
+  version: 8.61.1
+  resolution: "@typescript-eslint/parser@npm:8.61.1"
   dependencies:
-    "@typescript-eslint/scope-manager": "npm:5.62.0"
-    "@typescript-eslint/types": "npm:5.62.0"
-    "@typescript-eslint/typescript-estree": "npm:5.62.0"
-    debug: "npm:^4.3.4"
+    "@typescript-eslint/scope-manager": "npm:8.61.1"
+    "@typescript-eslint/types": "npm:8.61.1"
+    "@typescript-eslint/typescript-estree": "npm:8.61.1"
+    "@typescript-eslint/visitor-keys": "npm:8.61.1"
+    debug: "npm:^4.4.3"
   peerDependencies:
-    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 10c0/315194b3bf39beb9bd16c190956c46beec64b8371e18d6bb72002108b250983eb1e186a01d34b77eb4045f4941acbb243b16155fbb46881105f65e37dc9e24d4
+    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+    typescript: ">=4.8.4 <6.1.0"
+  checksum: 10c0/6515afed5df24fd56fd0c96f94b2fc951236fc805e5d5ec925cbcae1319e5a41caea44284cd35b21f5ce7b812e567185c9dfe0882607135b947895509f23b253
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:5.62.0":
-  version: 5.62.0
-  resolution: "@typescript-eslint/scope-manager@npm:5.62.0"
+"@typescript-eslint/project-service@npm:8.61.1":
+  version: 8.61.1
+  resolution: "@typescript-eslint/project-service@npm:8.61.1"
   dependencies:
-    "@typescript-eslint/types": "npm:5.62.0"
-    "@typescript-eslint/visitor-keys": "npm:5.62.0"
-  checksum: 10c0/861253235576c1c5c1772d23cdce1418c2da2618a479a7de4f6114a12a7ca853011a1e530525d0931c355a8fd237b9cd828fac560f85f9623e24054fd024726f
+    "@typescript-eslint/tsconfig-utils": "npm:^8.61.1"
+    "@typescript-eslint/types": "npm:^8.61.1"
+    debug: "npm:^4.4.3"
+  peerDependencies:
+    typescript: ">=4.8.4 <6.1.0"
+  checksum: 10c0/4ced4f96cbe6b4b1f1f53d02e0e5d1efcb6ca02316d8ea11f9b328f7b3783a76e59b72ebbe233a00452de7466ac176f9836afe8a99c63acc94e8e2d1d31d370b
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:5.62.0":
-  version: 5.62.0
-  resolution: "@typescript-eslint/type-utils@npm:5.62.0"
+"@typescript-eslint/scope-manager@npm:8.61.1, @typescript-eslint/scope-manager@npm:^8.56.0":
+  version: 8.61.1
+  resolution: "@typescript-eslint/scope-manager@npm:8.61.1"
   dependencies:
-    "@typescript-eslint/typescript-estree": "npm:5.62.0"
-    "@typescript-eslint/utils": "npm:5.62.0"
-    debug: "npm:^4.3.4"
-    tsutils: "npm:^3.21.0"
+    "@typescript-eslint/types": "npm:8.61.1"
+    "@typescript-eslint/visitor-keys": "npm:8.61.1"
+  checksum: 10c0/8558b56629acc28da1b90a8254eaf9862a38bf49c0a04680c767ea542f49d683c8c60c43676e0348491d1eac9af25cc67abe0a1bb3cfe90add42523faf48b029
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/tsconfig-utils@npm:8.61.1, @typescript-eslint/tsconfig-utils@npm:^8.61.1":
+  version: 8.61.1
+  resolution: "@typescript-eslint/tsconfig-utils@npm:8.61.1"
   peerDependencies:
-    eslint: "*"
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 10c0/93112e34026069a48f0484b98caca1c89d9707842afe14e08e7390af51cdde87378df29d213d3bbd10a7cfe6f91b228031b56218515ce077bdb62ddea9d9f474
+    typescript: ">=4.8.4 <6.1.0"
+  checksum: 10c0/ab732f3c329f0ee8ea9e7d6c7c7d91b508cc0cf6c48c17d95e5df348d3e475730bd7ce63ac1f90260c80a9339a8a6f2eec8f2a35e1793e956a447130291bb5e3
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/type-utils@npm:8.61.1":
+  version: 8.61.1
+  resolution: "@typescript-eslint/type-utils@npm:8.61.1"
+  dependencies:
+    "@typescript-eslint/types": "npm:8.61.1"
+    "@typescript-eslint/typescript-estree": "npm:8.61.1"
+    "@typescript-eslint/utils": "npm:8.61.1"
+    debug: "npm:^4.4.3"
+    ts-api-utils: "npm:^2.5.0"
+  peerDependencies:
+    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+    typescript: ">=4.8.4 <6.1.0"
+  checksum: 10c0/c6d112e80e82de3ad5a4f8a875c5caf267fa856df2eb97e3ef945de7b62ad07eff02e1dd9e8943cc2e1388180d4f31f1d97e0300d2e5e662245e322205af67dc
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:5.62.0":
-  version: 5.62.0
-  resolution: "@typescript-eslint/types@npm:5.62.0"
-  checksum: 10c0/7febd3a7f0701c0b927e094f02e82d8ee2cada2b186fcb938bc2b94ff6fbad88237afc304cbaf33e82797078bbbb1baf91475f6400912f8b64c89be79bfa4ddf
+"@typescript-eslint/types@npm:8.61.1, @typescript-eslint/types@npm:^8.61.1":
+  version: 8.61.1
+  resolution: "@typescript-eslint/types@npm:8.61.1"
+  checksum: 10c0/165c3f0d3f4e1d04b310fe2a918c1012d037a0f0913895096eed40895fa72638e414a69e36182fc1bcc78efb9a4b7d81654b8768d8f1c3f43f3f2792694dfa49
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:5.62.0":
-  version: 5.62.0
-  resolution: "@typescript-eslint/typescript-estree@npm:5.62.0"
+"@typescript-eslint/typescript-estree@npm:8.61.1":
+  version: 8.61.1
+  resolution: "@typescript-eslint/typescript-estree@npm:8.61.1"
   dependencies:
-    "@typescript-eslint/types": "npm:5.62.0"
-    "@typescript-eslint/visitor-keys": "npm:5.62.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/d7984a3e9d56897b2481940ec803cb8e7ead03df8d9cfd9797350be82ff765dfcf3cfec04e7355e1779e948da8f02bc5e11719d07a596eb1cb995c48a95e38cf
+    "@typescript-eslint/project-service": "npm:8.61.1"
+    "@typescript-eslint/tsconfig-utils": "npm:8.61.1"
+    "@typescript-eslint/types": "npm:8.61.1"
+    "@typescript-eslint/visitor-keys": "npm:8.61.1"
+    debug: "npm:^4.4.3"
+    minimatch: "npm:^10.2.2"
+    semver: "npm:^7.7.3"
+    tinyglobby: "npm:^0.2.15"
+    ts-api-utils: "npm:^2.5.0"
+  peerDependencies:
+    typescript: ">=4.8.4 <6.1.0"
+  checksum: 10c0/cc3f15e8e30dee0522e9f8b5879824cfe3d98aad6a64e863bf0a21c26eedb3b0e5c82c2b73d59f9d5bc1b66f67305132c7c71f11a542e04e152f92b58599b358
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:5.62.0, @typescript-eslint/utils@npm:^5.10.0":
-  version: 5.62.0
-  resolution: "@typescript-eslint/utils@npm:5.62.0"
+"@typescript-eslint/utils@npm:8.61.1, @typescript-eslint/utils@npm:^6.0.0 || ^7.0.0 || ^8.0.0, @typescript-eslint/utils@npm:^8.56.0":
+  version: 8.61.1
+  resolution: "@typescript-eslint/utils@npm:8.61.1"
   dependencies:
-    "@eslint-community/eslint-utils": "npm:^4.2.0"
-    "@types/json-schema": "npm:^7.0.9"
-    "@types/semver": "npm:^7.3.12"
-    "@typescript-eslint/scope-manager": "npm:5.62.0"
-    "@typescript-eslint/types": "npm:5.62.0"
-    "@typescript-eslint/typescript-estree": "npm:5.62.0"
-    eslint-scope: "npm:^5.1.1"
-    semver: "npm:^7.3.7"
+    "@eslint-community/eslint-utils": "npm:^4.9.1"
+    "@typescript-eslint/scope-manager": "npm:8.61.1"
+    "@typescript-eslint/types": "npm:8.61.1"
+    "@typescript-eslint/typescript-estree": "npm:8.61.1"
   peerDependencies:
-    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  checksum: 10c0/f09b7d9952e4a205eb1ced31d7684dd55cee40bf8c2d78e923aa8a255318d97279825733902742c09d8690f37a50243f4c4d383ab16bd7aefaf9c4b438f785e1
+    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+    typescript: ">=4.8.4 <6.1.0"
+  checksum: 10c0/afb5e6f39da3ee34c11cfc73a64045a0e5dadd74ae2a2fcf01d9494e3be00c849a3b9ca8b23570f596726611f00598a198d66cd82e3753f63b8bde69ead0e507
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:5.62.0":
-  version: 5.62.0
-  resolution: "@typescript-eslint/visitor-keys@npm:5.62.0"
+"@typescript-eslint/visitor-keys@npm:8.61.1":
+  version: 8.61.1
+  resolution: "@typescript-eslint/visitor-keys@npm:8.61.1"
   dependencies:
-    "@typescript-eslint/types": "npm:5.62.0"
-    eslint-visitor-keys: "npm:^3.3.0"
-  checksum: 10c0/7c3b8e4148e9b94d9b7162a596a1260d7a3efc4e65199693b8025c71c4652b8042501c0bc9f57654c1e2943c26da98c0f77884a746c6ae81389fcb0b513d995d
+    "@typescript-eslint/types": "npm:8.61.1"
+    eslint-visitor-keys: "npm:^5.0.0"
+  checksum: 10c0/fa2075b891076fe640cfc36fd68299985f35c9b6782ff35cf231c1418e38dba56b28412bc6fced7fb8fabbd91444a02643f62e1ebe424aa45a885b8a8e60fbfd
+  languageName: node
+  linkType: hard
+
+"@ungap/structured-clone@npm:^1.0.0":
+  version: 1.3.1
+  resolution: "@ungap/structured-clone@npm:1.3.1"
+  checksum: 10c0/7e75faf93cf12ff07c3d15a9e4d326b68f57d13f7246d9f4df2c1ed1a5cde581f899d397816ba5d5d703a0d7f6219e4408f385160156cf20b4e082721817cc37
   languageName: node
   linkType: hard
 
@@ -6119,25 +5744,47 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@urql/core@npm:^5.0.6, @urql/core@npm:^5.1.2":
-  version: 5.2.0
-  resolution: "@urql/core@npm:5.2.0"
+"@unhead/react@npm:^2.1.15":
+  version: 2.1.15
+  resolution: "@unhead/react@npm:2.1.15"
   dependencies:
-    "@0no-co/graphql.web": "npm:^1.0.13"
-    wonka: "npm:^6.3.2"
-  checksum: 10c0/1893a7417c6e5e3604fc3bd27e8b63b748d1817fb906fa95beba52be103d18e015d20ca740a9be570bca2bd11e98d34f605e108a4d3428678d9a1e3368ab2275
+    unhead: "npm:2.1.15"
+  peerDependencies:
+    react: ">=18.3.1"
+  checksum: 10c0/0a341187a86b9ac38065b521cad124bc0f8092052507551ffbc2d9538598c0dfcd0be7c473a9d117c20949aae0a02fced271a9b81d3826a6d62c0c69e1b4482b
   languageName: node
   linkType: hard
 
-"@urql/exchange-retry@npm:^1.3.0":
-  version: 1.3.2
-  resolution: "@urql/exchange-retry@npm:1.3.2"
-  dependencies:
-    "@urql/core": "npm:^5.1.2"
-    wonka: "npm:^6.3.2"
-  peerDependencies:
-    "@urql/core": ^5.0.0
-  checksum: 10c0/3d7e9879aef81714ca04c8b4dc1633d61b2090f5a6d5b8aac538633d41c26e8749e18bf66bed2936b209d038b3acdd21f20bc5ec4229a449b5a0b13d5694effe
+"@vercel/analytics@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "@vercel/analytics@npm:2.0.1"
+  peerDependencies:
+    "@remix-run/react": ^2
+    "@sveltejs/kit": ^1 || ^2
+    next: ">= 13"
+    nuxt: ">= 3"
+    react: ^18 || ^19 || ^19.0.0-rc
+    svelte: ">= 4"
+    vue: ^3
+    vue-router: ^4
+  peerDependenciesMeta:
+    "@remix-run/react":
+      optional: true
+    "@sveltejs/kit":
+      optional: true
+    next:
+      optional: true
+    nuxt:
+      optional: true
+    react:
+      optional: true
+    svelte:
+      optional: true
+    vue:
+      optional: true
+    vue-router:
+      optional: true
+  checksum: 10c0/c788c03d0f072f6f2be52d3f6f4f0680d2343f0d8765a759a044204223b14a6e14b285d0c5d5d05c0b66d4419746c5b245656ebdc48398328d85d96f1ede982b
   languageName: node
   linkType: hard
 
@@ -6313,13 +5960,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@yarnpkg/lockfile@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "@yarnpkg/lockfile@npm:1.1.0"
-  checksum: 10c0/0bfa50a3d756623d1f3409bc23f225a1d069424dbc77c6fd2f14fb377390cd57ec703dc70286e081c564be9051ead9ba85d81d66a3e68eeb6eb506d4e0c0fbda
-  languageName: node
-  linkType: hard
-
 "JSONStream@npm:^1.0.4":
   version: 1.3.5
   resolution: "JSONStream@npm:1.3.5"
@@ -6332,13 +5972,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"abab@npm:^2.0.5":
-  version: 2.0.6
-  resolution: "abab@npm:2.0.6"
-  checksum: 10c0/0b245c3c3ea2598fe0025abf7cc7bb507b06949d51e8edae5d12c1b847a0a0c09639abcb94788332b4e2044ac4491c1e8f571b51c7826fd4b0bda1685ad4a278
-  languageName: node
-  linkType: hard
-
 "abbrev@npm:^4.0.0":
   version: 4.0.0
   resolution: "abbrev@npm:4.0.0"
@@ -6355,7 +5988,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.8":
+"accepts@npm:^1.3.8, accepts@npm:~1.3.8":
   version: 1.3.8
   resolution: "accepts@npm:1.3.8"
   dependencies:
@@ -6365,6 +5998,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"accepts@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "accepts@npm:2.0.0"
+  dependencies:
+    mime-types: "npm:^3.0.0"
+    negotiator: "npm:^1.0.0"
+  checksum: 10c0/98374742097e140891546076215f90c32644feacf652db48412329de4c2a529178a81aa500fbb13dd3e6cbf6e68d829037b123ac037fc9a08bcec4b87b358eef
+  languageName: node
+  linkType: hard
+
 "acorn-import-phases@npm:^1.0.3":
   version: 1.0.4
   resolution: "acorn-import-phases@npm:1.0.4"
@@ -6374,7 +6017,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn-jsx@npm:^5.3.2":
+"acorn-jsx@npm:^5.0.0, acorn-jsx@npm:^5.3.2":
   version: 5.3.2
   resolution: "acorn-jsx@npm:5.3.2"
   peerDependencies:
@@ -6383,16 +6026,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn-walk@npm:^8.0.0":
-  version: 8.3.4
-  resolution: "acorn-walk@npm:8.3.4"
-  dependencies:
-    acorn: "npm:^8.11.0"
-  checksum: 10c0/76537ac5fb2c37a64560feaf3342023dadc086c46da57da363e64c6148dc21b57d49ace26f949e225063acb6fb441eabffd89f7a3066de5ad37ab3e328927c62
+"acorn@npm:^8.0.0":
+  version: 8.17.0
+  resolution: "acorn@npm:8.17.0"
+  bin:
+    acorn: bin/acorn
+  checksum: 10c0/5dcefea5f8f023b6cc24cbe71fb5a8112b601d36c4fa07d14e4e6ffc2ee47383332c46b36c766d9437725aa6660156eae50efa0c838719823b50d7c327c4ed42
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.0.4, acorn@npm:^8.11.0, acorn@npm:^8.15.0, acorn@npm:^8.9.0":
+"acorn@npm:^8.15.0":
   version: 8.15.0
   resolution: "acorn@npm:8.15.0"
   bin:
@@ -6408,13 +6051,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"address@npm:^1.0.1, address@npm:^1.1.2":
-  version: 1.2.2
-  resolution: "address@npm:1.2.2"
-  checksum: 10c0/1c8056b77fb124456997b78ed682ecc19d2fd7ea8bd5850a2aa8c3e3134c913847c57bcae418622efd32ba858fa1e242a40a251ac31da0515664fc0ac03a047d
-  languageName: node
-  linkType: hard
-
 "agent-base@npm:^7.1.0, agent-base@npm:^7.1.2":
   version: 7.1.4
   resolution: "agent-base@npm:7.1.4"
@@ -6422,16 +6058,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aggregate-error@npm:^3.0.0":
-  version: 3.1.0
-  resolution: "aggregate-error@npm:3.1.0"
-  dependencies:
-    clean-stack: "npm:^2.0.0"
-    indent-string: "npm:^4.0.0"
-  checksum: 10c0/a42f67faa79e3e6687a4923050e7c9807db3848a037076f791d10e092677d65c1d2d863b7848560699f40fc0502c19f40963fb1cd1fb3d338a7423df8e45e039
-  languageName: node
-  linkType: hard
-
 "ajv-formats@npm:^2.1.1":
   version: 2.1.1
   resolution: "ajv-formats@npm:2.1.1"
@@ -6446,7 +6072,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv-keywords@npm:^3.4.1, ajv-keywords@npm:^3.5.2":
+"ajv-keywords@npm:^3.5.2":
   version: 3.5.2
   resolution: "ajv-keywords@npm:3.5.2"
   peerDependencies:
@@ -6466,7 +6092,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:^6.10.0, ajv@npm:^6.12.2, ajv@npm:^6.12.4, ajv@npm:^6.12.5":
+"ajv@npm:^6.12.4, ajv@npm:^6.12.5":
   version: 6.12.6
   resolution: "ajv@npm:6.12.6"
   dependencies:
@@ -6478,7 +6104,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:^8.0.0, ajv@npm:^8.11.0, ajv@npm:^8.9.0":
+"ajv@npm:^6.14.0":
+  version: 6.15.0
+  resolution: "ajv@npm:6.15.0"
+  dependencies:
+    fast-deep-equal: "npm:^3.1.1"
+    fast-json-stable-stringify: "npm:^2.0.0"
+    json-schema-traverse: "npm:^0.4.1"
+    uri-js: "npm:^4.2.2"
+  checksum: 10c0/67966499dd272ecde1c2e467084411132891523d057487587879d39ac04207f4351b7b2324c83198013967fbfa632c1612adc960114a30770fbe07a0773b32c2
+  languageName: node
+  linkType: hard
+
+"ajv@npm:^8.0.0, ajv@npm:^8.9.0":
   version: 8.17.1
   resolution: "ajv@npm:8.17.1"
   dependencies:
@@ -6490,62 +6128,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"algoliasearch-helper@npm:^3.10.0":
-  version: 3.27.0
-  resolution: "algoliasearch-helper@npm:3.27.0"
-  dependencies:
-    "@algolia/events": "npm:^4.0.1"
-  peerDependencies:
-    algoliasearch: ">= 3.1 < 6"
-  checksum: 10c0/09cdb9c5faf14127030e3dfb4bf6715bb36a9896edf3b43e128c8b2137a1f7d448817995840c0c1ca53dfd94891a2c3554774e885e826f07a0325f9dede3c527
-  languageName: node
-  linkType: hard
-
-"algoliasearch@npm:^4.13.1":
-  version: 4.25.3
-  resolution: "algoliasearch@npm:4.25.3"
-  dependencies:
-    "@algolia/cache-browser-local-storage": "npm:4.25.3"
-    "@algolia/cache-common": "npm:4.25.3"
-    "@algolia/cache-in-memory": "npm:4.25.3"
-    "@algolia/client-account": "npm:4.25.3"
-    "@algolia/client-analytics": "npm:4.25.3"
-    "@algolia/client-common": "npm:4.25.3"
-    "@algolia/client-personalization": "npm:4.25.3"
-    "@algolia/client-search": "npm:4.25.3"
-    "@algolia/logger-common": "npm:4.25.3"
-    "@algolia/logger-console": "npm:4.25.3"
-    "@algolia/recommend": "npm:4.25.3"
-    "@algolia/requester-browser-xhr": "npm:4.25.3"
-    "@algolia/requester-common": "npm:4.25.3"
-    "@algolia/requester-node-http": "npm:4.25.3"
-    "@algolia/transporter": "npm:4.25.3"
-  checksum: 10c0/e293b79ad5c49991b1882fd811ef69ab81af1e524632cfbaa8afcc96315a7f1a777d7cc5cef075cd7460a3d54d49e03f8c0bb6338bf9f31890e5b05fa20ec844
-  languageName: node
-  linkType: hard
-
-"algoliasearch@npm:^5.14.2":
-  version: 5.46.2
-  resolution: "algoliasearch@npm:5.46.2"
-  dependencies:
-    "@algolia/abtesting": "npm:1.12.2"
-    "@algolia/client-abtesting": "npm:5.46.2"
-    "@algolia/client-analytics": "npm:5.46.2"
-    "@algolia/client-common": "npm:5.46.2"
-    "@algolia/client-insights": "npm:5.46.2"
-    "@algolia/client-personalization": "npm:5.46.2"
-    "@algolia/client-query-suggestions": "npm:5.46.2"
-    "@algolia/client-search": "npm:5.46.2"
-    "@algolia/ingestion": "npm:1.46.2"
-    "@algolia/monitoring": "npm:1.46.2"
-    "@algolia/recommend": "npm:5.46.2"
-    "@algolia/requester-browser-xhr": "npm:5.46.2"
-    "@algolia/requester-fetch": "npm:5.46.2"
-    "@algolia/requester-node-http": "npm:5.46.2"
-  checksum: 10c0/37f30159a89f0b4a67d8198a4fe32d32b19c6961bc1d3dc99ea8b8f284dfa0e095b5e24580c15f3b6213a1b3983ef1aae529c41afb3f056b32c1560e329b3a1f
-  languageName: node
-  linkType: hard
-
 "all-contributors-cli@npm:^6.24.0":
   version: 6.26.1
   resolution: "all-contributors-cli@npm:6.26.1"
@@ -6577,7 +6159,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-align@npm:^3.0.0, ansi-align@npm:^3.0.1":
+"ansi-align@npm:^3.0.0":
   version: 3.0.1
   resolution: "ansi-align@npm:3.0.1"
   dependencies:
@@ -6595,7 +6177,7 @@ __metadata:
   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:
@@ -6604,13 +6186,6 @@ __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":
   version: 4.1.1
   resolution: "ansi-regex@npm:4.1.1"
@@ -6625,20 +6200,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-regex@npm:^6.0.1":
+"ansi-regex@npm:^6.2.2":
   version: 6.2.2
   resolution: "ansi-regex@npm:6.2.2"
   checksum: 10c0/05d4acb1d2f59ab2cf4b794339c7b168890d44dda4bf0ce01152a8da0213aca207802f930442ce8cd22d7a92f44907664aac6508904e75e038fa944d2601b30f
   languageName: node
   linkType: hard
 
-"ansi-styles@npm:^2.2.1":
-  version: 2.2.1
-  resolution: "ansi-styles@npm:2.2.1"
-  checksum: 10c0/7c68aed4f1857389e7a12f85537ea5b40d832656babbf511cc7ecd9efc52889b9c3e5653a71a6aade783c3c5e0aa223ad4ff8e83c27ac8a666514e6c79068cab
-  languageName: node
-  linkType: hard
-
 "ansi-styles@npm:^3.2.0, ansi-styles@npm:^3.2.1":
   version: 3.2.1
   resolution: "ansi-styles@npm:3.2.1"
@@ -6657,37 +6225,20 @@ __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
   languageName: node
   linkType: hard
 
-"ansi-styles@npm:^6.1.0":
+"ansi-styles@npm:^6.2.1":
   version: 6.2.3
   resolution: "ansi-styles@npm:6.2.3"
   checksum: 10c0/23b8a4ce14e18fb854693b95351e286b771d23d8844057ed2e7d083cd3e708376c3323707ec6a24365f7d7eda3ca00327fe04092e29e551499ec4c8b7bfac868
   languageName: node
   linkType: hard
 
-"any-promise@npm:^1.0.0":
-  version: 1.3.0
-  resolution: "any-promise@npm:1.3.0"
-  checksum: 10c0/60f0298ed34c74fef50daab88e8dab786036ed5a7fad02e012ab57e376e0a0b4b29e83b95ea9b5e7d89df762f5f25119b83e00706ecaccb22cfbacee98d74889
-  languageName: node
-  linkType: hard
-
-"anymatch@npm:^1.3.0":
-  version: 1.3.2
-  resolution: "anymatch@npm:1.3.2"
-  dependencies:
-    micromatch: "npm:^2.1.5"
-    normalize-path: "npm:^2.0.0"
-  checksum: 10c0/aa1eae8ef5076cfecefef1983811b4666b365513d60dfcb30756556cc7e8547fae2654328509beedb812b211da4785df5d42ca720aa24d52e745509ad3a4b2a8
-  languageName: node
-  linkType: hard
-
 "anymatch@npm:^2.0.0":
   version: 2.0.0
   resolution: "anymatch@npm:2.0.0"
@@ -6698,7 +6249,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"anymatch@npm:^3.0.3, anymatch@npm:~3.1.2":
+"anymatch@npm:^3.0.3":
   version: 3.1.3
   resolution: "anymatch@npm:3.1.3"
   dependencies:
@@ -6708,14 +6259,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"arg@npm:4.1.0":
-  version: 4.1.0
-  resolution: "arg@npm:4.1.0"
-  checksum: 10c0/a453e07f25370c7910df9b8a8eecb1a0c71e902a3843339ff9391ea4b4dac6871cd99a1a11e38642cf6d0723c7ab7f15f5824f1ccb862f3317a9c05c56a251c7
+"arg@npm:^4.1.0":
+  version: 4.1.3
+  resolution: "arg@npm:4.1.3"
+  checksum: 10c0/070ff801a9d236a6caa647507bdcc7034530604844d64408149a26b9e87c2f97650055c0f049abd1efc024b334635c01f29e0b632b371ac3f26130f4cf65997a
   languageName: node
   linkType: hard
 
-"arg@npm:^5.0.0, arg@npm:^5.0.2":
+"arg@npm:^5.0.2":
   version: 5.0.2
   resolution: "arg@npm:5.0.2"
   checksum: 10c0/ccaf86f4e05d342af6666c569f844bec426595c567d32a8289715087825c2ca7edd8a3d204e4d2fb2aa4602e09a57d0c13ea8c9eea75aac3dbb4af5514e6800e
@@ -6738,12 +6289,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"arr-diff@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "arr-diff@npm:2.0.0"
+"arkregex@npm:0.0.5":
+  version: 0.0.5
+  resolution: "arkregex@npm:0.0.5"
+  dependencies:
+    "@ark/util": "npm:0.56.0"
+  checksum: 10c0/1a39510e04d69b9287b9b53d3965afcc4ef27bdd9ff9c21a78092fcb841f35c11227d8476be66d2f76347deccfd10c202f395bd871383c328057ad004ffe7ebd
+  languageName: node
+  linkType: hard
+
+"arktype@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "arktype@npm:2.2.0"
   dependencies:
-    arr-flatten: "npm:^1.0.1"
-  checksum: 10c0/d79592bf2b621b9c038e7a697357174409fceb63658529ea3b2d2d53a2918160e6bebb2e6ae756eb53330f07c11b052752377905d743a8928f9d3858598cafa2
+    "@ark/schema": "npm:0.56.0"
+    "@ark/util": "npm:0.56.0"
+    arkregex: "npm:0.0.5"
+  checksum: 10c0/67c05dfe9654996c6129e68ce6c39188d4a3c6f1268cf78f028d6c98ab0b92954142853f03a41ecff029d56a0703824d2ca5d76525dab54a32de09a7145b374e
   languageName: node
   linkType: hard
 
@@ -6754,7 +6316,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"arr-flatten@npm:^1.0.1, arr-flatten@npm:^1.1.0":
+"arr-flatten@npm:^1.1.0":
   version: 1.1.0
   resolution: "arr-flatten@npm:1.1.0"
   checksum: 10c0/bef53be02ed3bc58f202b3861a5b1eb6e1ae4fecf39c3ad4d15b1e0433f941077d16e019a33312d820844b0661777322acbb7d0c447b04d9bdf7d6f9c532548a
@@ -6815,15 +6377,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-union@npm:^1.0.1":
-  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"
@@ -6831,27 +6384,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-union@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "array-union@npm:3.0.1"
-  checksum: 10c0/b5271d7e5688d2d1932928b271796dbbddc422448557ab05ef6f34a9f84fb645eb855384feec6234bf59c226053a0e21b8a00b0e6cd588874b90a5c13dbeb64e
-  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.2.1":
-  version: 0.2.1
-  resolution: "array-unique@npm:0.2.1"
-  checksum: 10c0/e72f4c45a432b44f9785b24bb5742648ed68f074a74f7bcf65b3f47630cd6aea05e532ab921f1a5f57266512a02183440b42f683dab95636bb81c8d6e2758641
-  languageName: node
-  linkType: hard
-
 "array-unique@npm:^0.3.2":
   version: 0.3.2
   resolution: "array-unique@npm:0.3.2"
@@ -6968,19 +6500,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ast-types@npm:0.14.2, ast-types@npm:^0.14.2":
-  version: 0.14.2
-  resolution: "ast-types@npm:0.14.2"
+"ast-types@npm:0.16.1":
+  version: 0.16.1
+  resolution: "ast-types@npm:0.16.1"
   dependencies:
     tslib: "npm:^2.0.1"
-  checksum: 10c0/5d66d89b6c07fe092087454b6042dbaf81f2882b176db93861e2b986aafe0bce49e1f1ff59aac775d451c1426ad1e967d250e9e3548f5166ea8a3475e66c169d
+  checksum: 10c0/abcc49e42eb921a7ebc013d5bec1154651fb6dbc3f497541d488859e681256901b2990b954d530ba0da4d0851271d484f7057d5eff5e07cb73e8b10909f711bf
   languageName: node
   linkType: hard
 
-"async-each@npm:^1.0.0":
-  version: 1.0.6
-  resolution: "async-each@npm:1.0.6"
-  checksum: 10c0/d4e45e8f077e20e015952c065ceae75f82b30ee2d4a8e56a5c454ae44331aaa009d8c94fe043ba254c177bffae9f6ebeefebb7daf9f7ce4d27fac0274dc328ae
+"astring@npm:^1.8.0":
+  version: 1.9.0
+  resolution: "astring@npm:1.9.0"
+  bin:
+    astring: bin/astring
+  checksum: 10c0/e7519544d9824494e80ef0e722bb3a0c543a31440d59691c13aeaceb75b14502af536b23f08db50aa6c632dafaade54caa25f0788aa7550b6b2d6e2df89e0830
   languageName: node
   linkType: hard
 
@@ -6998,13 +6532,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"async-limiter@npm:~1.0.0":
-  version: 1.0.1
-  resolution: "async-limiter@npm:1.0.1"
-  checksum: 10c0/0693d378cfe86842a70d4c849595a0bb50dc44c11649640ca982fa90cbfc74e3cc4753b5a0847e51933f2e9c65ce8e05576e75e5e1fd963a086e673735b35969
-  languageName: node
-  linkType: hard
-
 "async-retry@npm:1.3.1":
   version: 1.3.1
   resolution: "async-retry@npm:1.3.1"
@@ -7044,23 +6571,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"autoprefixer@npm:^10.4.12, autoprefixer@npm:^10.4.7":
-  version: 10.4.23
-  resolution: "autoprefixer@npm:10.4.23"
-  dependencies:
-    browserslist: "npm:^4.28.1"
-    caniuse-lite: "npm:^1.0.30001760"
-    fraction.js: "npm:^5.3.4"
-    picocolors: "npm:^1.1.1"
-    postcss-value-parser: "npm:^4.2.0"
-  peerDependencies:
-    postcss: ^8.1.0
-  bin:
-    autoprefixer: bin/autoprefixer
-  checksum: 10c0/3765c5d0fa3e95fb2ebe9d5a6d4da0156f5d346c7ec9ac0fbf5c97c8139d0ca1e8743bf5dc1b4aa954467be6929fddf8498a3b6202d468d70b5f359f3b6af90f
-  languageName: node
-  linkType: hard
-
 "available-typed-arrays@npm:^1.0.7":
   version: 1.0.7
   resolution: "available-typed-arrays@npm:1.0.7"
@@ -7070,119 +6580,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axios@npm:^0.25.0":
-  version: 0.25.0
-  resolution: "axios@npm:0.25.0"
-  dependencies:
-    follow-redirects: "npm:^1.14.7"
-  checksum: 10c0/33475dc847e8494341db5ff5d3ce3a830e511d9698eda1e2507618a0a875ca774e7c59b9194c70664e886699b5917416175da2ea5ccb67a2945f7cdc939d7c56
-  languageName: node
-  linkType: hard
-
-"babel-cli@npm:^6.26.0":
-  version: 6.26.0
-  resolution: "babel-cli@npm:6.26.0"
-  dependencies:
-    babel-core: "npm:^6.26.0"
-    babel-polyfill: "npm:^6.26.0"
-    babel-register: "npm:^6.26.0"
-    babel-runtime: "npm:^6.26.0"
-    chokidar: "npm:^1.6.1"
-    commander: "npm:^2.11.0"
-    convert-source-map: "npm:^1.5.0"
-    fs-readdir-recursive: "npm:^1.0.0"
-    glob: "npm:^7.1.2"
-    lodash: "npm:^4.17.4"
-    output-file-sync: "npm:^1.1.2"
-    path-is-absolute: "npm:^1.0.1"
-    slash: "npm:^1.0.0"
-    source-map: "npm:^0.5.6"
-    v8flags: "npm:^2.1.1"
-  dependenciesMeta:
-    chokidar:
-      optional: true
-  bin:
-    babel: ./bin/babel.js
-    babel-doctor: ./bin/babel-doctor.js
-    babel-external-helpers: ./bin/babel-external-helpers.js
-    babel-node: ./bin/babel-node.js
-  checksum: 10c0/8b83a100a5e7ea121141c7305dba06d9acf607f545687b9d331adc881beec2ed6ce2a0b0d8d4e75a4d3138eee82a26922841c75f6ff2f94db42331b513008de7
-  languageName: node
-  linkType: hard
-
-"babel-code-frame@npm:^6.26.0":
-  version: 6.26.0
-  resolution: "babel-code-frame@npm:6.26.0"
-  dependencies:
-    chalk: "npm:^1.1.3"
-    esutils: "npm:^2.0.2"
-    js-tokens: "npm:^3.0.2"
-  checksum: 10c0/7fecc128e87578cf1b96e78d2b25e0b260e202bdbbfcefa2eac23b7f8b7b2f7bc9276a14599cde14403cc798cc2a38e428e2cab50b77658ab49228b09ae92473
-  languageName: node
-  linkType: hard
-
-"babel-core@npm:^6.26.0":
-  version: 6.26.3
-  resolution: "babel-core@npm:6.26.3"
-  dependencies:
-    babel-code-frame: "npm:^6.26.0"
-    babel-generator: "npm:^6.26.0"
-    babel-helpers: "npm:^6.24.1"
-    babel-messages: "npm:^6.23.0"
-    babel-register: "npm:^6.26.0"
-    babel-runtime: "npm:^6.26.0"
-    babel-template: "npm:^6.26.0"
-    babel-traverse: "npm:^6.26.0"
-    babel-types: "npm:^6.26.0"
-    babylon: "npm:^6.18.0"
-    convert-source-map: "npm:^1.5.1"
-    debug: "npm:^2.6.9"
-    json5: "npm:^0.5.1"
-    lodash: "npm:^4.17.4"
-    minimatch: "npm:^3.0.4"
-    path-is-absolute: "npm:^1.0.1"
-    private: "npm:^0.1.8"
-    slash: "npm:^1.0.0"
-    source-map: "npm:^0.5.7"
-  checksum: 10c0/10292649779f8c33d1908f5671c92ca9df036c9e1b9f35f97e7f62c9da9e3a146ee069f94fc401283ce129ba980f34a30339f137c512f3e62ddd354653b2da0e
-  languageName: node
-  linkType: hard
-
-"babel-core@npm:^7.0.0-bridge.0":
-  version: 7.0.0-bridge.0
-  resolution: "babel-core@npm:7.0.0-bridge.0"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/f57576e30267be4607d163b7288031d332cf9200ea35efe9fb33c97f834e304376774c28c1f9d6928d6733fcde7041e4010f1248a0519e7730c590d4b07b9608
-  languageName: node
-  linkType: hard
-
-"babel-generator@npm:^6.26.0":
-  version: 6.26.1
-  resolution: "babel-generator@npm:6.26.1"
-  dependencies:
-    babel-messages: "npm:^6.23.0"
-    babel-runtime: "npm:^6.26.0"
-    babel-types: "npm:^6.26.0"
-    detect-indent: "npm:^4.0.0"
-    jsesc: "npm:^1.3.0"
-    lodash: "npm:^4.17.4"
-    source-map: "npm:^0.5.7"
-    trim-right: "npm:^1.0.1"
-  checksum: 10c0/d5f9d20c6f7d8644dc41ee57d48c98a78d24d5b74dc305cc518d6e0872d4fa73c5fd8d47ec00e3515858eaf3c3e512a703cdbc184ff0061af5979bc206618555
-  languageName: node
-  linkType: hard
-
-"babel-helpers@npm:^6.24.1":
-  version: 6.24.1
-  resolution: "babel-helpers@npm:6.24.1"
-  dependencies:
-    babel-runtime: "npm:^6.22.0"
-    babel-template: "npm:^6.24.1"
-  checksum: 10c0/bbd082e42adaa9c584242515e8c5b1e861108e03ed9517f0b600189e1c1041376ab6a15c71265a2cc095c5af4bd15cfc97158e30ce95a81cbfcea1bfd81ce3e6
-  languageName: node
-  linkType: hard
-
 "babel-jest@npm:^29.6.3, babel-jest@npm:^29.7.0":
   version: 29.7.0
   resolution: "babel-jest@npm:29.7.0"
@@ -7200,7 +6597,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-loader@npm:^8.1.0, babel-loader@npm:^8.2.3, babel-loader@npm:^8.2.5, babel-loader@npm:^8.3.0":
+"babel-loader@npm:^8.1.0":
   version: 8.4.1
   resolution: "babel-loader@npm:8.4.1"
   dependencies:
@@ -7215,45 +6612,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-messages@npm:^6.23.0":
-  version: 6.23.0
-  resolution: "babel-messages@npm:6.23.0"
-  dependencies:
-    babel-runtime: "npm:^6.22.0"
-  checksum: 10c0/d4fd6414ee5bb1aa0dad6d8d2c4ffaa66331ec5a507959e11f56b19a683566e2c1e7a4d0b16cfef58ea4cc07db8acf5ff3dc8b25c585407cff2e09ac60553401
-  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-dynamic-import-node@npm:^2.3.3":
-  version: 2.3.3
-  resolution: "babel-plugin-dynamic-import-node@npm:2.3.3"
-  dependencies:
-    object.assign: "npm:^4.1.0"
-  checksum: 10c0/1bd80df981e1fc1aff0cd4e390cf27aaa34f95f7620cd14dff07ba3bad56d168c098233a7d2deb2c9b1dc13643e596a6b94fc608a3412ee3c56e74a25cd2167e
-  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"
@@ -7279,19 +6637,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-module-resolver@npm:^5.0.0":
-  version: 5.0.2
-  resolution: "babel-plugin-module-resolver@npm:5.0.2"
-  dependencies:
-    find-babel-config: "npm:^2.1.1"
-    glob: "npm:^9.3.3"
-    pkg-up: "npm:^3.1.0"
-    reselect: "npm:^4.1.7"
-    resolve: "npm:^1.22.8"
-  checksum: 10c0/ccbb9e673c4219f68937349267521becb72be292cf30bf70b861c3e709d24fbfa589da0bf6c100a0def799d38199299171cb6eac3fb00b1ea740373e2c1fe54c
-  languageName: node
-  linkType: hard
-
 "babel-plugin-polyfill-corejs2@npm:^0.4.14":
   version: 0.4.14
   resolution: "babel-plugin-polyfill-corejs2@npm:0.4.14"
@@ -7305,6 +6650,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-plugin-polyfill-corejs2@npm:^0.4.15":
+  version: 0.4.17
+  resolution: "babel-plugin-polyfill-corejs2@npm:0.4.17"
+  dependencies:
+    "@babel/compat-data": "npm:^7.28.6"
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.8"
+    semver: "npm:^6.3.1"
+  peerDependencies:
+    "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
+  checksum: 10c0/1284960ea403c63b0dd598f338666c4b17d489aefee30b4da6a7313eff1d91edffb0ccf26341a6e5d94231684b74e016eade66b3921ea112f8b0e4980fa08a5c
+  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"
@@ -7317,6 +6675,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-plugin-polyfill-corejs3@npm:^0.14.0":
+  version: 0.14.2
+  resolution: "babel-plugin-polyfill-corejs3@npm:0.14.2"
+  dependencies:
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.8"
+    core-js-compat: "npm:^3.48.0"
+  peerDependencies:
+    "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
+  checksum: 10c0/32f70442f142d0f5607f4b57c121c573b106e09da8659c0f03108a85bf1d09ba5bdc89595a82b34ff76c19f1faf3d1c831b56166f03babf69c024f36da77c3bf
+  languageName: node
+  linkType: hard
+
 "babel-plugin-polyfill-regenerator@npm:^0.6.5":
   version: 0.6.5
   resolution: "babel-plugin-polyfill-regenerator@npm:0.6.5"
@@ -7328,6 +6698,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-plugin-polyfill-regenerator@npm:^0.6.6":
+  version: 0.6.8
+  resolution: "babel-plugin-polyfill-regenerator@npm:0.6.8"
+  dependencies:
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.8"
+  peerDependencies:
+    "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
+  checksum: 10c0/7c8b2497c29fa880e0acdc8e7b93e29b81b154179b83beb0476eb2c4e7a78b6b42fc35c2554ca250c9bd6d39941eaf75416254b8592ce50979f9a12e1d51c049
+  languageName: node
+  linkType: hard
+
 "babel-plugin-react-compiler@npm:^1.0.0":
   version: 1.0.0
   resolution: "babel-plugin-react-compiler@npm:1.0.0"
@@ -7344,21 +6725,21 @@ __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"
+"babel-plugin-syntax-hermes-parser@npm:0.33.3, babel-plugin-syntax-hermes-parser@npm:^0.33.3":
+  version: 0.33.3
+  resolution: "babel-plugin-syntax-hermes-parser@npm:0.33.3"
   dependencies:
-    hermes-parser: "npm:0.29.1"
-  checksum: 10c0/a6d95e4a7079976e477636d18509272a7a185930e143c61d0421a36096e85905563630ac4f0f317518b6db37f50daaefc1828d575b3d5fb090a55e9d39d2534c
+    hermes-parser: "npm:0.33.3"
+  checksum: 10c0/61d9f0014b249247e6d5809b638cec4770769a077d3509b8ad575f62c814b28bdd78157dfddf94b040696497c3b78e69cc14793b0b5c15f893c11dc225cc0e3e
   languageName: node
   linkType: hard
 
-"babel-plugin-syntax-hermes-parser@npm:0.32.0":
-  version: 0.32.0
-  resolution: "babel-plugin-syntax-hermes-parser@npm:0.32.0"
+"babel-plugin-syntax-hermes-parser@npm:^0.34.0":
+  version: 0.34.0
+  resolution: "babel-plugin-syntax-hermes-parser@npm:0.34.0"
   dependencies:
-    hermes-parser: "npm:0.32.0"
-  checksum: 10c0/2e5aad897d4abd643d33329814ed7adb301047890a8a4325ef140da86e377a1127f1ce6af4064526e5cb603c16d3d3e15784998df4095f1385e7f4e8ca53f03e
+    hermes-parser: "npm:0.34.0"
+  checksum: 10c0/68f82656f541dd8aa65f4359eca5893e2b2641a17549af73e7c1d4e95cdbefdbcfb2019ce3a307a4d060c9b6e9cac82946ef5048f550ce5963237d6877b0b709
   languageName: node
   linkType: hard
 
@@ -7378,7 +6759,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-polyfill@npm:6.26.0, babel-polyfill@npm:^6.26.0":
+"babel-polyfill@npm:6.26.0":
   version: 6.26.0
   resolution: "babel-polyfill@npm:6.26.0"
   dependencies:
@@ -7414,47 +6795,132 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-preset-expo@npm:~54.0.0, babel-preset-expo@npm:~54.0.9":
-  version: 54.0.9
-  resolution: "babel-preset-expo@npm:54.0.9"
+"babel-preset-expo@npm:~56.0.0":
+  version: 56.0.8
+  resolution: "babel-preset-expo@npm:56.0.8"
   dependencies:
+    "@babel/generator": "npm:^7.20.5"
     "@babel/helper-module-imports": "npm:^7.25.9"
     "@babel/plugin-proposal-decorators": "npm:^7.12.9"
     "@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-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-class-static-block": "npm:^7.27.1"
+    "@babel/plugin-transform-classes": "npm:^7.25.4"
+    "@babel/plugin-transform-destructuring": "npm:^7.24.8"
     "@babel/plugin-transform-export-namespace-from": "npm:^7.25.9"
     "@babel/plugin-transform-flow-strip-types": "npm:^7.25.2"
+    "@babel/plugin-transform-for-of": "npm:^7.24.7"
+    "@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-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.28.6"
+    "@babel/plugin-transform-react-jsx-development": "npm:^7.27.1"
+    "@babel/plugin-transform-react-pure-annotations": "npm:^7.27.1"
     "@babel/plugin-transform-runtime": "npm:^7.24.7"
-    "@babel/preset-react": "npm:^7.22.15"
+    "@babel/plugin-transform-typescript": "npm:^7.25.2"
+    "@babel/plugin-transform-unicode-regex": "npm:^7.24.7"
     "@babel/preset-typescript": "npm:^7.23.0"
-    "@react-native/babel-preset": "npm:0.81.5"
+    "@react-native/babel-plugin-codegen": "npm:0.85.3"
     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-syntax-hermes-parser: "npm:^0.33.3"
     babel-plugin-transform-flow-enums: "npm:^0.0.2"
     debug: "npm:^4.3.4"
-    resolve-from: "npm:^5.0.0"
   peerDependencies:
     "@babel/runtime": ^7.20.0
     expo: "*"
+    expo-widgets: ^56.0.8
     react-refresh: ">=0.14.0 <1.0.0"
   peerDependenciesMeta:
     "@babel/runtime":
       optional: true
     expo:
       optional: true
-  checksum: 10c0/40e3142204d3abcad492021ebac3581ca1b25c27039999f6bd244e1da830f230410930d3d65850b76c85791390f36b269f93585171f84d839eb959d5d5d3cd4f
+    expo-widgets:
+      optional: true
+  checksum: 10c0/7282010ce66048c7750f09c9ea1ac1accc6a6f613ea2df28a5386d3d1f45588e1bb79bbc0ea23d4c0466d4e224afb2b03ab6870334d1c26fc6e4a919a704febb
   languageName: node
   linkType: hard
 
-"babel-preset-jest@npm:^29.6.3":
-  version: 29.6.3
+"babel-preset-expo@npm:~56.0.10":
+  version: 56.0.10
+  resolution: "babel-preset-expo@npm:56.0.10"
+  dependencies:
+    "@babel/generator": "npm:^7.20.5"
+    "@babel/helper-module-imports": "npm:^7.25.9"
+    "@babel/plugin-proposal-decorators": "npm:^7.12.9"
+    "@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-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-class-static-block": "npm:^7.27.1"
+    "@babel/plugin-transform-classes": "npm:^7.25.4"
+    "@babel/plugin-transform-destructuring": "npm:^7.24.8"
+    "@babel/plugin-transform-export-namespace-from": "npm:^7.25.9"
+    "@babel/plugin-transform-flow-strip-types": "npm:^7.25.2"
+    "@babel/plugin-transform-for-of": "npm:^7.24.7"
+    "@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-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.28.6"
+    "@babel/plugin-transform-react-jsx-development": "npm:^7.27.1"
+    "@babel/plugin-transform-react-pure-annotations": "npm:^7.27.1"
+    "@babel/plugin-transform-runtime": "npm:^7.24.7"
+    "@babel/plugin-transform-typescript": "npm:^7.25.2"
+    "@babel/plugin-transform-unicode-regex": "npm:^7.24.7"
+    "@babel/preset-typescript": "npm:^7.23.0"
+    "@react-native/babel-plugin-codegen": "npm:0.85.3"
+    babel-plugin-react-compiler: "npm:^1.0.0"
+    babel-plugin-react-native-web: "npm:~0.21.0"
+    babel-plugin-syntax-hermes-parser: "npm:^0.33.3"
+    babel-plugin-transform-flow-enums: "npm:^0.0.2"
+    debug: "npm:^4.3.4"
+  peerDependencies:
+    "@babel/runtime": ^7.20.0
+    expo: "*"
+    expo-widgets: ^56.0.11
+    react-refresh: ">=0.14.0 <1.0.0"
+  peerDependenciesMeta:
+    "@babel/runtime":
+      optional: true
+    expo:
+      optional: true
+    expo-widgets:
+      optional: true
+  checksum: 10c0/2db26378df4138ad48a92fb62c25a2a8d0ec7cbf4b49024e662121bead9ed9dd7a39cb9ce8c758554c22f148d52876f925486e336d3570c9f48d4cefce513282
+  languageName: node
+  linkType: hard
+
+"babel-preset-jest@npm:^29.6.3":
+  version: 29.6.3
   resolution: "babel-preset-jest@npm:29.6.3"
   dependencies:
     babel-plugin-jest-hoist: "npm:^29.6.3"
@@ -7465,22 +6931,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-register@npm:^6.26.0":
-  version: 6.26.0
-  resolution: "babel-register@npm:6.26.0"
-  dependencies:
-    babel-core: "npm:^6.26.0"
-    babel-runtime: "npm:^6.26.0"
-    core-js: "npm:^2.5.0"
-    home-or-tmp: "npm:^2.0.0"
-    lodash: "npm:^4.17.4"
-    mkdirp: "npm:^0.5.1"
-    source-map-support: "npm:^0.4.15"
-  checksum: 10c0/4ffbc1bfa60a817fb306c98d1a6d10852b0130a614dae3a91e45f391dbebdc95f428d95b489943d85724e046527d2aac3bafb74d3c24f62143492b5f606e2e04
-  languageName: node
-  linkType: hard
-
-"babel-runtime@npm:^6.22.0, babel-runtime@npm:^6.23.0, babel-runtime@npm:^6.26.0":
+"babel-runtime@npm:^6.23.0, babel-runtime@npm:^6.26.0":
   version: 6.26.0
   resolution: "babel-runtime@npm:6.26.0"
   dependencies:
@@ -7490,19 +6941,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-template@npm:^6.24.1, babel-template@npm:^6.26.0":
-  version: 6.26.0
-  resolution: "babel-template@npm:6.26.0"
-  dependencies:
-    babel-runtime: "npm:^6.26.0"
-    babel-traverse: "npm:^6.26.0"
-    babel-types: "npm:^6.26.0"
-    babylon: "npm:^6.18.0"
-    lodash: "npm:^4.17.4"
-  checksum: 10c0/67bc875f19d289dabb1830a1cde93d7f1e187e4599dac9b1d16392fd47f1d12b53fea902dacf7be360acd09807d440faafe0f7907758c13275b1a14d100b68e4
-  languageName: node
-  linkType: hard
-
 "babel-test@npm:^0.1.1":
   version: 0.1.6
   resolution: "babel-test@npm:0.1.6"
@@ -7515,44 +6953,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-traverse@npm:^6.26.0":
-  version: 6.26.0
-  resolution: "babel-traverse@npm:6.26.0"
-  dependencies:
-    babel-code-frame: "npm:^6.26.0"
-    babel-messages: "npm:^6.23.0"
-    babel-runtime: "npm:^6.26.0"
-    babel-types: "npm:^6.26.0"
-    babylon: "npm:^6.18.0"
-    debug: "npm:^2.6.8"
-    globals: "npm:^9.18.0"
-    invariant: "npm:^2.2.2"
-    lodash: "npm:^4.17.4"
-  checksum: 10c0/dca71b23d07e3c00833c3222d7998202e687105f461048107afeb2b4a7aa2507efab1bd5a6e3e724724ebb9b1e0b14f0113621e1d8c25b4ffdb829392b54b8de
-  languageName: node
-  linkType: hard
-
-"babel-types@npm:^6.26.0":
-  version: 6.26.0
-  resolution: "babel-types@npm:6.26.0"
-  dependencies:
-    babel-runtime: "npm:^6.26.0"
-    esutils: "npm:^2.0.2"
-    lodash: "npm:^4.17.4"
-    to-fast-properties: "npm:^1.0.3"
-  checksum: 10c0/cabe371de1b32c4bbb1fd4ed0fe8a8726d42e5ad7d5cefb83cdae6de0f0a152dce591e4026719743fdf3aa45f84fea2c8851fb822fbe29b0c78a1f0094b67418
-  languageName: node
-  linkType: hard
-
-"babylon@npm:^6.18.0":
-  version: 6.18.0
-  resolution: "babylon@npm:6.18.0"
-  bin:
-    babylon: ./bin/babylon.js
-  checksum: 10c0/9b1bf946e16782deadb1f5414c1269efa6044eb1e97a3de2051f09a3f2a54e97be3542d4242b28d23de0ef67816f519d38ce1ec3ddb7be306131c39a60e5a667
-  languageName: node
-  linkType: hard
-
 "bail@npm:^1.0.0":
   version: 1.0.5
   resolution: "bail@npm:1.0.5"
@@ -7560,6 +6960,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bail@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "bail@npm:2.0.2"
+  checksum: 10c0/25cbea309ef6a1f56214187004e8f34014eb015713ea01fa5b9b7e9e776ca88d0fdffd64143ac42dc91966c915a4b7b683411b56e14929fad16153fc026ffb8b
+  languageName: node
+  linkType: hard
+
 "balanced-match@npm:^1.0.0":
   version: 1.0.2
   resolution: "balanced-match@npm:1.0.2"
@@ -7567,14 +6974,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"base16@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "base16@npm:1.0.0"
-  checksum: 10c0/af1aee7b297d968528ef47c8de2c5274029743e8a4a5f61ec823e36b673781691d124168cb22936c7997f53d89b344c58bf7ecf93eeb148cffa7e3fb4e4b8b18
+"balanced-match@npm:^4.0.2":
+  version: 4.0.4
+  resolution: "balanced-match@npm:4.0.4"
+  checksum: 10c0/07e86102a3eb2ee2a6a1a89164f29d0dbaebd28f2ca3f5ca786f36b8b23d9e417eb3be45a4acf754f837be5ac0a2317de90d3fcb7f4f4dc95720a1f36b26a17b
   languageName: node
   linkType: hard
 
-"base64-js@npm:^1.2.3, base64-js@npm:^1.3.0, base64-js@npm:^1.3.1, base64-js@npm:^1.5.1":
+"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
@@ -7596,19 +7003,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"baseline-browser-mapping@npm:^2.9.0":
-  version: 2.9.13
-  resolution: "baseline-browser-mapping@npm:2.9.13"
+"baseline-browser-mapping@npm:^2.10.12, baseline-browser-mapping@npm:^2.9.0":
+  version: 2.11.20
+  resolution: "baseline-browser-mapping@npm:2.11.20"
   bin:
-    baseline-browser-mapping: dist/cli.js
-  checksum: 10c0/0881e813472865ae5f7f19d48c9525fabf358acb43547d57b294b9b62e28821562877627f5c7818595fa583b76e01967c1395ff9525164e5905e1d8be2c71318
-  languageName: node
-  linkType: hard
-
-"batch@npm:0.6.1":
-  version: 0.6.1
-  resolution: "batch@npm:0.6.1"
-  checksum: 10c0/925a13897b4db80d4211082fe287bcf96d297af38e26448c857cee3e095c9792e3b8f26b37d268812e7f38a589f694609de8534a018b1937d7dc9f84e6b387c5
+    baseline-browser-mapping: dist/cli.cjs
+  checksum: 10c0/67588b7edafa4e6c52996ec4b96b6e007312961cefc5a179cb49232f6681a38ba68d4d43990081e9d0e1dcadcbd28f13105ee7dc3e43b267385d0beb14824ecc
   languageName: node
   linkType: hard
 
@@ -7619,15 +7019,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"better-opn@npm:~3.0.2":
-  version: 3.0.2
-  resolution: "better-opn@npm:3.0.2"
-  dependencies:
-    open: "npm:^8.0.4"
-  checksum: 10c0/911ef25d44da75aabfd2444ce7a4294a8000ebcac73068c04a60298b0f7c7506b60421aa4cd02ac82502fb42baaff7e4892234b51e6923eded44c5a11185f2f5
-  languageName: node
-  linkType: hard
-
 "big-integer@npm:1.6.x":
   version: 1.6.52
   resolution: "big-integer@npm:1.6.52"
@@ -7642,29 +7033,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.3.0
-  resolution: "binary-extensions@npm:2.3.0"
-  checksum: 10c0/75a59cafc10fb12a11d510e77110c6c7ae3f4ca22463d52487709ca7f18f69d886aa387557cc9864fbdb10153d0bdb4caacabf11541f55e89ed6e18d12ece2b5
-  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.1.0":
   version: 4.1.0
   resolution: "bl@npm:4.1.0"
@@ -7696,20 +7064,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bonjour-service@npm:^1.0.11":
-  version: 1.3.0
-  resolution: "bonjour-service@npm:1.3.0"
-  dependencies:
-    fast-deep-equal: "npm:^3.1.3"
-    multicast-dns: "npm:^7.2.5"
-  checksum: 10c0/5721fd9f9bb968e9cc16c1e8116d770863dd2329cb1f753231de1515870648c225142b7eefa71f14a5c22bc7b37ddd7fdeb018700f28a8c936d50d4162d433c7
-  languageName: node
-  linkType: hard
-
-"boolbase@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "boolbase@npm:1.0.0"
-  checksum: 10c0/e4b53deb4f2b85c52be0e21a273f2045c7b6a6ea002b0e139c744cb6f95e9ec044439a52883b0d74dedd1ff3da55ed140cfdddfed7fb0cccbed373de5dce1bcf
+"body-scroll-lock@npm:4.0.0-beta.0":
+  version: 4.0.0-beta.0
+  resolution: "body-scroll-lock@npm:4.0.0-beta.0"
+  checksum: 10c0/32a9553b83424e69f3784d7bbcef2949c43159ea13b5084c96dc08b1e2585e4eeb1e915f14e37a4ac44110339dfa6fa2ddde4d3d812be88ecbea060aa724a791
   languageName: node
   linkType: hard
 
@@ -7729,38 +7087,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"boxen@npm:^5.0.0":
-  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"
-  dependencies:
-    ansi-align: "npm:^3.0.1"
-    camelcase: "npm:^6.2.0"
-    chalk: "npm:^4.1.2"
-    cli-boxes: "npm:^3.0.0"
-    string-width: "npm:^5.0.1"
-    type-fest: "npm:^2.5.0"
-    widest-line: "npm:^4.0.1"
-    wrap-ansi: "npm:^8.0.1"
-  checksum: 10c0/2a50d059c950a50d9f3c873093702747740814ce8819225c4f8cbe92024c9f5a9219d2b7128f5cfa17c022644d929bbbc88b9591de67249c6ebe07f7486bdcfd
-  languageName: node
-  linkType: hard
-
 "bplist-creator@npm:0.1.0":
   version: 0.1.0
   resolution: "bplist-creator@npm:0.1.0"
@@ -7798,23 +7124,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"brace-expansion@npm:^2.0.1":
-  version: 2.0.2
-  resolution: "brace-expansion@npm:2.0.2"
-  dependencies:
-    balanced-match: "npm:^1.0.0"
-  checksum: 10c0/6d117a4c793488af86b83172deb6af143e94c17bc53b0b3cec259733923b4ca84679d506ac261f4ba3c7ed37c46018e2ff442f9ce453af8643ecd64f4a54e6cf
-  languageName: node
-  linkType: hard
-
-"braces@npm:^1.8.2":
-  version: 1.8.5
-  resolution: "braces@npm:1.8.5"
+"brace-expansion@npm:^5.0.5":
+  version: 5.0.6
+  resolution: "brace-expansion@npm:5.0.6"
   dependencies:
-    expand-range: "npm:^1.8.1"
-    preserve: "npm:^0.2.0"
-    repeat-element: "npm:^1.1.2"
-  checksum: 10c0/41092fe0f5dbb522f013963fa4432fbef3323a92ee8c1a6b9b6681fc05525b8541968b525632aa9df217daa6307fe526e9ce994054d4308abd0627a7d26e4745
+    balanced-match: "npm:^4.0.2"
+  checksum: 10c0/8c919869b90f61d533b341d3340be5ee4413232ea89b8246cbc2f38eb014f1d8182785c98a006eaf6111d02dc9eeffefdc240d5ac158625b2ed084dccd4bbf9b
   languageName: node
   linkType: hard
 
@@ -7836,7 +7151,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"braces@npm:^3.0.3, braces@npm:~3.0.2":
+"braces@npm:^3.0.3":
   version: 3.0.3
   resolution: "braces@npm:3.0.3"
   dependencies:
@@ -7845,7 +7160,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.0.0, browserslist@npm:^4.18.1, browserslist@npm:^4.20.4, browserslist@npm:^4.21.4, browserslist@npm:^4.24.0, browserslist@npm:^4.25.0, browserslist@npm:^4.28.0, browserslist@npm:^4.28.1":
+"browserslist@npm:^4.24.0, browserslist@npm:^4.25.0, browserslist@npm:^4.28.0, browserslist@npm:^4.28.1":
   version: 4.28.1
   resolution: "browserslist@npm:4.28.1"
   dependencies:
@@ -7860,6 +7175,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"browserslist@npm:^4.28.2":
+  version: 4.28.2
+  resolution: "browserslist@npm:4.28.2"
+  dependencies:
+    baseline-browser-mapping: "npm:^2.10.12"
+    caniuse-lite: "npm:^1.0.30001782"
+    electron-to-chromium: "npm:^1.5.328"
+    node-releases: "npm:^2.0.36"
+    update-browserslist-db: "npm:^1.2.3"
+  bin:
+    browserslist: cli.js
+  checksum: 10c0/c0228b6330f785b7fa59d2d360124ec6d9322f96ed9f3ee1f873e33ecc9503a6f0ffc3b71191a28c4ff6e930b753b30043da1c33844a9548f3018d491f09ce60
+  languageName: node
+  linkType: hard
+
 "bser@npm:2.1.1":
   version: 2.1.1
   resolution: "bser@npm:2.1.1"
@@ -7876,7 +7206,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"buffer@npm:^5.4.3, buffer@npm:^5.5.0":
+"buffer@npm:^5.5.0":
   version: 5.7.1
   resolution: "buffer@npm:5.7.1"
   dependencies:
@@ -7886,13 +7216,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bytes@npm:3.0.0":
-  version: 3.0.0
-  resolution: "bytes@npm:3.0.0"
-  checksum: 10c0/91d42c38601c76460519ffef88371caacaea483a354c8e4b8808e7b027574436a5713337c003ea3de63ee4991c2a9a637884fdfe7f761760d746929d9e8fec60
-  languageName: node
-  linkType: hard
-
 "bytes@npm:3.1.2, bytes@npm:~3.1.2":
   version: 3.1.2
   resolution: "bytes@npm:3.1.2"
@@ -8069,23 +7392,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"camel-case@npm:^4.1.2":
-  version: 4.1.2
-  resolution: "camel-case@npm:4.1.2"
-  dependencies:
-    pascal-case: "npm:^3.1.2"
-    tslib: "npm:^2.0.3"
-  checksum: 10c0/bf9eefaee1f20edbed2e9a442a226793bc72336e2b99e5e48c6b7252b6f70b080fc46d8246ab91939e2af91c36cdd422e0af35161e58dd089590f302f8f64c8a
-  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:^4.0.0":
   version: 4.2.0
   resolution: "camelcase-keys@npm:4.2.0"
@@ -8136,22 +7442,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-api@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "caniuse-api@npm:3.0.0"
-  dependencies:
-    browserslist: "npm:^4.0.0"
-    caniuse-lite: "npm:^1.0.0"
-    lodash.memoize: "npm:^4.1.2"
-    lodash.uniq: "npm:^4.5.0"
-  checksum: 10c0/60f9e85a3331e6d761b1b03eec71ca38ef7d74146bece34694853033292156b815696573ed734b65583acf493e88163618eda915c6c826d46a024c71a9572b4c
-  languageName: node
-  linkType: hard
-
-"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001759, caniuse-lite@npm:^1.0.30001760":
-  version: 1.0.30001763
-  resolution: "caniuse-lite@npm:1.0.30001763"
-  checksum: 10c0/4524f6ae15a18c8510849e43baed01441940c50cab29687cba62dde6354a49549d5bcb7f79b864dadf3f0c8c342038c63131cdb64af382a501593106b1d0028b
+"caniuse-lite@npm:^1.0.30001759, caniuse-lite@npm:^1.0.30001782":
+  version: 1.0.30001810
+  resolution: "caniuse-lite@npm:1.0.30001810"
+  checksum: 10c0/d29bc73f33c888025d54c7ff2984372d3b350b15a6a9e174884fb40976175e9177f202e2a72c2d428dddfc032784bc8ba635a31d168fcab9fac65756d7b3d6b4
   languageName: node
   linkType: hard
 
@@ -8171,6 +7465,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ccount@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "ccount@npm:2.0.1"
+  checksum: 10c0/3939b1664390174484322bc3f45b798462e6c07ee6384cb3d645e0aa2f318502d174845198c1561930e1d431087f74cf1fe291ae9a4722821a9f4ba67e574350
+  languageName: node
+  linkType: hard
+
 "chalk@npm:2.4.2, chalk@npm:^2.0.1, chalk@npm:^2.4.1, chalk@npm:^2.4.2":
   version: 2.4.2
   resolution: "chalk@npm:2.4.2"
@@ -8192,19 +7493,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "chalk@npm:1.1.3"
-  dependencies:
-    ansi-styles: "npm:^2.2.1"
-    escape-string-regexp: "npm:^1.0.2"
-    has-ansi: "npm:^2.0.0"
-    strip-ansi: "npm:^3.0.0"
-    supports-color: "npm:^2.0.0"
-  checksum: 10c0/28c3e399ec286bb3a7111fd4225ebedb0d7b813aef38a37bca7c498d032459c265ef43404201d5fbb8d888d29090899c95335b4c0cda13e8b126ff15c541cef8
-  languageName: node
-  linkType: hard
-
 "chalk@npm:^3.0.0":
   version: 3.0.0
   resolution: "chalk@npm:3.0.0"
@@ -8272,6 +7560,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"character-entities-html4@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "character-entities-html4@npm:2.1.0"
+  checksum: 10c0/fe61b553f083400c20c0b0fd65095df30a0b445d960f3bbf271536ae6c3ba676f39cb7af0b4bf2755812f08ab9b88f2feed68f9aebb73bb153f7a115fe5c6e40
+  languageName: node
+  linkType: hard
+
 "character-entities-legacy@npm:^1.0.0":
   version: 1.1.4
   resolution: "character-entities-legacy@npm:1.1.4"
@@ -8279,6 +7574,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"character-entities-legacy@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "character-entities-legacy@npm:3.0.0"
+  checksum: 10c0/ec4b430af873661aa754a896a2b55af089b4e938d3d010fad5219299a6b6d32ab175142699ee250640678cd64bdecd6db3c9af0b8759ab7b155d970d84c4c7d1
+  languageName: node
+  linkType: hard
+
 "character-entities@npm:^1.0.0":
   version: 1.2.4
   resolution: "character-entities@npm:1.2.4"
@@ -8286,6 +7588,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"character-entities@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "character-entities@npm:2.0.2"
+  checksum: 10c0/b0c645a45bcc90ff24f0e0140f4875a8436b8ef13b6bcd31ec02cfb2ca502b680362aa95386f7815bdc04b6464d48cf191210b3840d7c04241a149ede591a308
+  languageName: node
+  linkType: hard
+
 "character-reference-invalid@npm:^1.0.0":
   version: 1.1.4
   resolution: "character-reference-invalid@npm:1.1.4"
@@ -8293,6 +7602,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"character-reference-invalid@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "character-reference-invalid@npm:2.0.1"
+  checksum: 10c0/2ae0dec770cd8659d7e8b0ce24392d83b4c2f0eb4a3395c955dce5528edd4cc030a794cfa06600fcdd700b3f2de2f9b8e40e309c0011c4180e3be64a0b42e6a1
+  languageName: node
+  linkType: hard
+
 "chardet@npm:^0.7.0":
   version: 0.7.0
   resolution: "chardet@npm:0.7.0"
@@ -8300,78 +7616,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cheerio-select@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "cheerio-select@npm:2.1.0"
-  dependencies:
-    boolbase: "npm:^1.0.0"
-    css-select: "npm:^5.1.0"
-    css-what: "npm:^6.1.0"
-    domelementtype: "npm:^2.3.0"
-    domhandler: "npm:^5.0.3"
-    domutils: "npm:^3.0.1"
-  checksum: 10c0/2242097e593919dba4aacb97d7b8275def8b9ec70b00aa1f43335456870cfc9e284eae2080bdc832ed232dabb9eefcf56c722d152da4a154813fb8814a55d282
-  languageName: node
-  linkType: hard
-
-"cheerio@npm:^1.0.0-rc.12, cheerio@npm:^1.0.0-rc.3":
-  version: 1.1.2
-  resolution: "cheerio@npm:1.1.2"
-  dependencies:
-    cheerio-select: "npm:^2.1.0"
-    dom-serializer: "npm:^2.0.0"
-    domhandler: "npm:^5.0.3"
-    domutils: "npm:^3.2.2"
-    encoding-sniffer: "npm:^0.2.1"
-    htmlparser2: "npm:^10.0.0"
-    parse5: "npm:^7.3.0"
-    parse5-htmlparser2-tree-adapter: "npm:^7.1.0"
-    parse5-parser-stream: "npm:^7.1.2"
-    undici: "npm:^7.12.0"
-    whatwg-mimetype: "npm:^4.0.0"
-  checksum: 10c0/2c6d2274666fe122f54fdca457ee76453e1a993b19563acaa23eb565bf7776f0f01e4c3800092f00e84aa13c83a161f0cf000ac0a8332d1d7f2b2387d6ecc5fc
-  languageName: node
-  linkType: hard
-
-"chokidar@npm:^1.6.1":
-  version: 1.7.0
-  resolution: "chokidar@npm:1.7.0"
-  dependencies:
-    anymatch: "npm:^1.3.0"
-    async-each: "npm:^1.0.0"
-    fsevents: "npm:^1.0.0"
-    glob-parent: "npm:^2.0.0"
-    inherits: "npm:^2.0.1"
-    is-binary-path: "npm:^1.0.0"
-    is-glob: "npm:^2.0.0"
-    path-is-absolute: "npm:^1.0.0"
-    readdirp: "npm:^2.0.0"
-  dependenciesMeta:
-    fsevents:
-      optional: true
-  checksum: 10c0/d3f82bc7fba1d5793a05ae494c30536cf6e4b23364a610e8bee8ae49dbaf963a67f70c627a943ab538cab252f6ac1862c6012885bccd06a10487438de5ae8a15
-  languageName: node
-  linkType: hard
-
-"chokidar@npm:^3.4.2, chokidar@npm:^3.5.3":
-  version: 3.6.0
-  resolution: "chokidar@npm:3.6.0"
-  dependencies:
-    anymatch: "npm:~3.1.2"
-    braces: "npm:~3.0.2"
-    fsevents: "npm:~2.3.2"
-    glob-parent: "npm:~5.1.2"
-    is-binary-path: "npm:~2.1.0"
-    is-glob: "npm:~4.0.1"
-    normalize-path: "npm:~3.0.0"
-    readdirp: "npm:~3.6.0"
-  dependenciesMeta:
-    fsevents:
-      optional: true
-  checksum: 10c0/8361dcd013f2ddbe260eacb1f3cb2f2c6f2b0ad118708a343a5ed8158941a39cb8fb1d272e0f389712e74ee90ce8ba864eece9e0e62b9705cb468a2f6d917462
-  languageName: node
-  linkType: hard
-
 "chownr@npm:^3.0.0":
   version: 3.0.0
   resolution: "chownr@npm:3.0.0"
@@ -8400,17 +7644,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chromium-edge-launcher@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "chromium-edge-launcher@npm:0.2.0"
+"chromium-edge-launcher@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "chromium-edge-launcher@npm:0.3.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
+  checksum: 10c0/ad04a75bf53ebed0b7adc5bd133587369b0c2e55c92fe460eb6ccec5efe03c161a7466756173969867a2acbe02dd40449186bd74671dd892520492283d4ff43d
   languageName: node
   linkType: hard
 
@@ -8447,47 +7690,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clean-css@npm:^5.2.2, clean-css@npm:^5.3.0":
-  version: 5.3.3
-  resolution: "clean-css@npm:5.3.3"
-  dependencies:
-    source-map: "npm:~0.6.0"
-  checksum: 10c0/381de7523e23f3762eb180e327dcc0cedafaf8cb1cd8c26b7cc1fc56e0829a92e734729c4f955394d65ed72fb62f82d8baf78af34b33b8a7d41ebad2accdd6fb
-  languageName: node
-  linkType: hard
-
-"clean-stack@npm:^2.0.0":
-  version: 2.2.0
-  resolution: "clean-stack@npm:2.2.0"
-  checksum: 10c0/1f90262d5f6230a17e27d0c190b09d47ebe7efdd76a03b5a1127863f7b3c9aec4c3e6c8bb3a7bbf81d553d56a1fd35728f5a8ef4c63f867ac8d690109742a8c1
-  languageName: node
-  linkType: hard
-
-"clean-webpack-plugin@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "clean-webpack-plugin@npm:4.0.0"
-  dependencies:
-    del: "npm:^4.1.1"
-  peerDependencies:
-    webpack: ">=4.0.0 <6.0.0"
-  checksum: 10c0/55fe230dddb9fdf2b3cbffa7fab4e47570c84d524f9ae81a3fa1f58ec4077349e9aabf6a2b5bcf4915f1e4205d2dd6b945e633146fccb21dd59989260527615f
-  languageName: node
-  linkType: hard
-
-"cli-boxes@npm:^2.2.0, cli-boxes@npm:^2.2.1":
+"cli-boxes@npm:^2.2.0":
   version: 2.2.1
   resolution: "cli-boxes@npm:2.2.1"
   checksum: 10c0/6111352edbb2f62dbc7bfd58f2d534de507afed7f189f13fa894ce5a48badd94b2aa502fda28f1d7dd5f1eb456e7d4033d09a76660013ef50c7f66e7a034f050
   languageName: node
   linkType: hard
 
-"cli-boxes@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "cli-boxes@npm:3.0.0"
-  checksum: 10c0/4db3e8fbfaf1aac4fb3a6cbe5a2d3fa048bee741a45371b906439b9ffc821c6e626b0f108bdcd3ddf126a4a319409aedcf39a0730573ff050fdd7b6731e99fb9
-  languageName: node
-  linkType: hard
-
 "cli-cursor@npm:^2.1.0":
   version: 2.1.0
   resolution: "cli-cursor@npm:2.1.0"
@@ -8513,19 +7722,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cli-table3@npm:^0.6.2":
-  version: 0.6.5
-  resolution: "cli-table3@npm:0.6.5"
-  dependencies:
-    "@colors/colors": "npm:1.5.0"
-    string-width: "npm:^4.2.0"
-  dependenciesMeta:
-    "@colors/colors":
-      optional: true
-  checksum: 10c0/d7cc9ed12212ae68241cc7a3133c52b844113b17856e11f4f81308acc3febcea7cc9fd298e70933e294dd642866b29fd5d113c2c098948701d0c35f09455de78
-  languageName: node
-  linkType: hard
-
 "cli-width@npm:^3.0.0":
   version: 3.0.0
   resolution: "cli-width@npm:3.0.0"
@@ -8577,6 +7773,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cliui@npm:^9.0.1":
+  version: 9.0.1
+  resolution: "cliui@npm:9.0.1"
+  dependencies:
+    string-width: "npm:^7.2.0"
+    strip-ansi: "npm:^7.1.0"
+    wrap-ansi: "npm:^9.0.0"
+  checksum: 10c0/13441832e9efe7c7a76bd2b8e683555c478d461a9f249dc5db9b17fe8d4b47fa9277b503914b90bd00e4a151abb6b9b02b2288972ffe2e5e3ca40bcb1c2330d3
+  languageName: node
+  linkType: hard
+
 "clone-deep@npm:^4.0.1":
   version: 4.0.1
   resolution: "clone-deep@npm:4.0.1"
@@ -8604,10 +7811,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clsx@npm:^1.1.1, clsx@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "clsx@npm:1.2.1"
-  checksum: 10c0/34dead8bee24f5e96f6e7937d711978380647e936a22e76380290e35486afd8634966ce300fc4b74a32f3762c7d4c0303f442c3e259f4ce02374eb0c82834f27
+"clsx@npm:2.1.1":
+  version: 2.1.1
+  resolution: "clsx@npm:2.1.1"
+  checksum: 10c0/c4c8eb865f8c82baab07e71bfa8897c73454881c4f99d6bc81585aecd7c441746c1399d08363dc096c550cceaf97bd4ce1e8854e1771e9998d9f94c4fe075839
   languageName: node
   linkType: hard
 
@@ -8625,7 +7832,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"collect-v8-coverage@npm:^1.0.0":
+"collapse-white-space@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "collapse-white-space@npm:2.1.0"
+  checksum: 10c0/b2e2800f4ab261e62eb27a1fbe853378296e3a726d6695117ed033e82d61fb6abeae4ffc1465d5454499e237005de9cfc52c9562dc7ca4ac759b9a222ef14453
+  languageName: node
+  linkType: hard
+
+"collect-v8-coverage@npm:^1.0.0":
   version: 1.0.3
   resolution: "collect-v8-coverage@npm:1.0.3"
   checksum: 10c0/bc62ba251bcce5e3354a8f88fa6442bee56e3e612fec08d4dfcf66179b41ea0bf544b0f78c4ebc0f8050871220af95bb5c5578a6aef346feea155640582f09dc
@@ -8704,13 +7918,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"colord@npm:^2.9.1":
-  version: 2.9.3
-  resolution: "colord@npm:2.9.3"
-  checksum: 10c0/9699e956894d8996b28c686afe8988720785f476f59335c80ce852ded76ab3ebe252703aec53d9bef54f6219aea6b960fb3d9a8300058a1d0c0d4026460cd110
-  languageName: node
-  linkType: hard
-
 "colorette@npm:^1.2.2":
   version: 1.4.0
   resolution: "colorette@npm:1.4.0"
@@ -8718,20 +7925,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"colorette@npm:^2.0.10":
-  version: 2.0.20
-  resolution: "colorette@npm:2.0.20"
-  checksum: 10c0/e94116ff33b0ff56f3b83b9ace895e5bf87c2a7a47b3401b8c3f3226e050d5ef76cf4072fb3325f9dc24d1698f9b730baf4e05eeaf861d74a1883073f4c98a40
-  languageName: node
-  linkType: hard
-
-"combine-promises@npm:^1.1.0":
-  version: 1.2.0
-  resolution: "combine-promises@npm:1.2.0"
-  checksum: 10c0/906ebf056006eff93c11548df0415053b6756145dae1f5a89579e743cb15fceeb0604555791321db4fba5072aa39bb4de6547e9cdf14589fe949b33d1613422c
-  languageName: node
-  linkType: hard
-
 "combined-stream@npm:^1.0.8":
   version: 1.0.8
   resolution: "combined-stream@npm:1.0.8"
@@ -8748,10 +7941,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:2.20.0":
-  version: 2.20.0
-  resolution: "commander@npm:2.20.0"
-  checksum: 10c0/c037420cdf8c8bbadf37749fe129298eda5b5c004e81805057d87ff508f9dbfb680d30aebe1bbcdfc54b579eaf6182dd90077e506add74d6b26ef52c7e22d41d
+"comma-separated-tokens@npm:^2.0.0":
+  version: 2.0.3
+  resolution: "comma-separated-tokens@npm:2.0.3"
+  checksum: 10c0/91f90f1aae320f1755d6957ef0b864fe4f54737f3313bd95e0802686ee2ca38bff1dd381964d00ae5db42912dd1f4ae5c2709644e82706ffc6f6842a813cdd67
   languageName: node
   linkType: hard
 
@@ -8762,27 +7955,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:^2.11.0, commander@npm:^2.19.0, commander@npm:^2.20.0":
+"commander@npm:^2.19.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":
-  version: 4.1.1
-  resolution: "commander@npm:4.1.1"
-  checksum: 10c0/84a76c08fe6cc08c9c93f62ac573d2907d8e79138999312c92d4155bc2325d487d64d13f669b2000c9f8caf70493c1be2dac74fec3c51d5a04f8bc3ae1830bab
-  languageName: node
-  linkType: hard
-
-"commander@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "commander@npm:5.1.0"
-  checksum: 10c0/da9d71dbe4ce039faf1fe9eac3771dca8c11d66963341f62602f7b66e36d2a3f8883407af4f9a37b1db1a55c59c0c1325f186425764c2e963dc1d67aec2a4b6d
-  languageName: node
-  linkType: hard
-
 "commander@npm:^7.2.0":
   version: 7.2.0
   resolution: "commander@npm:7.2.0"
@@ -8790,13 +7969,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:^8.3.0":
-  version: 8.3.0
-  resolution: "commander@npm:8.3.0"
-  checksum: 10c0/8b043bb8322ea1c39664a1598a95e0495bfe4ca2fad0d84a92d7d1d8d213e2a155b441d2470c8e08de7c4a28cf2bc6e169211c49e1b21d9f7edc6ae4d9356060
-  languageName: node
-  linkType: hard
-
 "commitlint@npm:^8.3.4":
   version: 8.3.6
   resolution: "commitlint@npm:8.3.6"
@@ -8931,6 +8103,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"compute-scroll-into-view@npm:^3.0.2":
+  version: 3.1.1
+  resolution: "compute-scroll-into-view@npm:3.1.1"
+  checksum: 10c0/59761ed62304a9599b52ad75d0d6fbf0669ee2ab7dd472fdb0ad9da36628414c014dea7b5810046560180ad30ffec52a953d19297f66a1d4f3aa0999b9d2521d
+  languageName: node
+  linkType: hard
+
 "concat-map@npm:0.0.1":
   version: 0.0.1
   resolution: "concat-map@npm:0.0.1"
@@ -8964,13 +8143,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"connect-history-api-fallback@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "connect-history-api-fallback@npm:2.0.0"
-  checksum: 10c0/90fa8b16ab76e9531646cc70b010b1dbd078153730c510d3142f6cf07479ae8a812c5a3c0e40a28528dd1681a62395d0cfdef67da9e914c4772ac85d69a3ed87
-  languageName: node
-  linkType: hard
-
 "connect@npm:^3.6.5, connect@npm:^3.7.0":
   version: 3.7.0
   resolution: "connect@npm:3.7.0"
@@ -8983,13 +8155,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"consola@npm:^2.15.3":
-  version: 2.15.3
-  resolution: "consola@npm:2.15.3"
-  checksum: 10c0/34a337e6b4a1349ee4d7b4c568484344418da8fdb829d7d71bfefcd724f608f273987633b6eef465e8de510929907a092e13cb7a28a5d3acb3be446fcc79fd5e
-  languageName: node
-  linkType: hard
-
 "constant-case@npm:^2.0.0":
   version: 2.0.0
   resolution: "constant-case@npm:2.0.0"
@@ -9000,13 +8165,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"content-disposition@npm:0.5.2":
-  version: 0.5.2
-  resolution: "content-disposition@npm:0.5.2"
-  checksum: 10c0/49eebaa0da1f9609b192e99d7fec31d1178cb57baa9d01f5b63b29787ac31e9d18b5a1033e854c68c9b6cce790e700a6f7fa60e43f95e2e416404e114a8f2f49
-  languageName: node
-  linkType: hard
-
 "content-disposition@npm:~0.5.4":
   version: 0.5.4
   resolution: "content-disposition@npm:0.5.4"
@@ -9052,21 +8210,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"conventional-changelog-cli@npm:^2.0.11":
-  version: 2.2.2
-  resolution: "conventional-changelog-cli@npm:2.2.2"
-  dependencies:
-    add-stream: "npm:^1.0.0"
-    conventional-changelog: "npm:^3.1.24"
-    lodash: "npm:^4.17.15"
-    meow: "npm:^8.0.0"
-    tempfile: "npm:^3.0.0"
-  bin:
-    conventional-changelog: cli.js
-  checksum: 10c0/f78790778b3e35c0f16d8299af98b03fd6376222047996cbfd2503a45ee86e3462f3276403ff6ee0cdaf7dcd90a2e230e16fc01fa7f64f5b5019a0dd34052ff4
-  languageName: node
-  linkType: hard
-
 "conventional-changelog-codemirror@npm:^2.0.8":
   version: 2.0.8
   resolution: "conventional-changelog-codemirror@npm:2.0.8"
@@ -9192,7 +8335,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"conventional-changelog@npm:^3.1.24, conventional-changelog@npm:^3.1.8":
+"conventional-changelog@npm:^3.1.8":
   version: 3.1.25
   resolution: "conventional-changelog@npm:3.1.25"
   dependencies:
@@ -9255,13 +8398,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"convert-source-map@npm:^1.5.0, convert-source-map@npm:^1.5.1, convert-source-map@npm:^1.7.0":
-  version: 1.9.0
-  resolution: "convert-source-map@npm:1.9.0"
-  checksum: 10c0/281da55454bf8126cbc6625385928c43479f2060984180c42f3a86c8b8c12720a24eac260624a7d1e090004028d2dee78602330578ceec1a08e27cb8bb0a8a5b
-  languageName: node
-  linkType: hard
-
 "convert-source-map@npm:^2.0.0":
   version: 2.0.0
   resolution: "convert-source-map@npm:2.0.0"
@@ -9276,6 +8412,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cookie@npm:^1.0.1":
+  version: 1.1.1
+  resolution: "cookie@npm:1.1.1"
+  checksum: 10c0/79c4ddc0fcad9c4f045f826f42edf54bcc921a29586a4558b0898277fa89fb47be95bc384c2253f493af7b29500c830da28341274527328f18eba9f58afa112c
+  languageName: node
+  linkType: hard
+
 "cookie@npm:~0.7.1":
   version: 0.7.2
   resolution: "cookie@npm:0.7.2"
@@ -9290,42 +8433,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"copy-text-to-clipboard@npm:^3.0.1":
-  version: 3.2.2
-  resolution: "copy-text-to-clipboard@npm:3.2.2"
-  checksum: 10c0/451796734a380f7da7b0af27c4d94e449719d3a2f2170e99c7e46eeee54cf3c4b4fdeabc185f6d6e8cbdf932e350831d05e8387c4bae8dcedb7fb961c600ddd4
-  languageName: node
-  linkType: hard
-
-"copy-webpack-plugin@npm:^10.2.0":
-  version: 10.2.4
-  resolution: "copy-webpack-plugin@npm:10.2.4"
-  dependencies:
-    fast-glob: "npm:^3.2.7"
-    glob-parent: "npm:^6.0.1"
-    globby: "npm:^12.0.2"
-    normalize-path: "npm:^3.0.0"
-    schema-utils: "npm:^4.0.0"
-    serialize-javascript: "npm:^6.0.0"
-  peerDependencies:
-    webpack: ^5.1.0
-  checksum: 10c0/d4501aa2d813eadc906318ed301707240fc7bfeb250813e2e4d93e95bc9896822c136e49de01dfe612ea5334a1f04cb8fbed4412b91117666a92607c0deba624
-  languageName: node
-  linkType: hard
-
-"copy-webpack-plugin@npm:^11.0.0":
-  version: 11.0.0
-  resolution: "copy-webpack-plugin@npm:11.0.0"
+"copy-to-clipboard@npm:^3.3.3":
+  version: 3.3.3
+  resolution: "copy-to-clipboard@npm:3.3.3"
   dependencies:
-    fast-glob: "npm:^3.2.11"
-    glob-parent: "npm:^6.0.1"
-    globby: "npm:^13.1.1"
-    normalize-path: "npm:^3.0.0"
-    schema-utils: "npm:^4.0.0"
-    serialize-javascript: "npm:^6.0.0"
-  peerDependencies:
-    webpack: ^5.1.0
-  checksum: 10c0/a667dd226b26f148584a35fb705f5af926d872584912cf9fd203c14f2b3a68f473a1f5cf768ec1dd5da23820823b850e5d50458b685c468e4a224b25c12a15b4
+    toggle-selection: "npm:^1.0.6"
+  checksum: 10c0/3ebf5e8ee00601f8c440b83ec08d838e8eabb068c1fae94a9cda6b42f288f7e1b552f3463635f419af44bf7675afc8d0390d30876cf5c2d5d35f86d9c56a3e5f
   languageName: node
   linkType: hard
 
@@ -9338,10 +8451,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js-pure@npm:^3.43.0":
-  version: 3.47.0
-  resolution: "core-js-pure@npm:3.47.0"
-  checksum: 10c0/7eb5f897e532b33e6ea85ec2c60073fc2fe943e4543ec9903340450fc0f3b46b5b118d57d332e9f2c3d681a8b7b219a4cc64ccf548d933f6b79f754b682696dd
+"core-js-compat@npm:^3.48.0":
+  version: 3.49.0
+  resolution: "core-js-compat@npm:3.49.0"
+  dependencies:
+    browserslist: "npm:^4.28.1"
+  checksum: 10c0/546e64b7ce45f724825bc13c1347f35c0459a6e71c0dcccff3ec21fbff463f5b0b97fc1220e6d90302153863489301793276fe2bf96f46001ff555ead4140308
   languageName: node
   linkType: hard
 
@@ -9359,7 +8474,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js@npm:^3.23.3, core-js@npm:^3.6.3":
+"core-js@npm:^3.6.3":
   version: 3.47.0
   resolution: "core-js@npm:3.47.0"
   checksum: 10c0/9b1a7088b7c660c7b8f1d4c90bb1816a8d5352ebdcb7bc742e3a0e4eb803316b5aa17bacb8769522342196351a5430178f46914644f2bfdb94ce0ced3c7fd523
@@ -9386,7 +8501,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cosmiconfig@npm:^5.0.7, cosmiconfig@npm:^5.1.0, cosmiconfig@npm:^5.2.0":
+"cosmiconfig@npm:^5.1.0, cosmiconfig@npm:^5.2.0":
   version: 5.2.1
   resolution: "cosmiconfig@npm:5.2.1"
   dependencies:
@@ -9398,20 +8513,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cosmiconfig@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "cosmiconfig@npm:6.0.0"
-  dependencies:
-    "@types/parse-json": "npm:^4.0.0"
-    import-fresh: "npm:^3.1.0"
-    parse-json: "npm:^5.0.0"
-    path-type: "npm:^4.0.0"
-    yaml: "npm:^1.7.2"
-  checksum: 10c0/666ed8732d0bf7d7fe6f8516c8ee6041e0622032e8fa26201577b883d2767ad105d03f38b34b93d1f02f26b22a89e7bab4443b9d2e7f931f48d0e944ffa038b5
-  languageName: node
-  linkType: hard
-
-"cosmiconfig@npm:^7.0.0, cosmiconfig@npm:^7.0.1":
+"cosmiconfig@npm:^7.0.0":
   version: 7.1.0
   resolution: "cosmiconfig@npm:7.1.0"
   dependencies:
@@ -9424,23 +8526,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cosmiconfig@npm:^8.3.5":
-  version: 8.3.6
-  resolution: "cosmiconfig@npm:8.3.6"
-  dependencies:
-    import-fresh: "npm:^3.3.0"
-    js-yaml: "npm:^4.1.0"
-    parse-json: "npm:^5.2.0"
-    path-type: "npm:^4.0.0"
-  peerDependencies:
-    typescript: ">=4.9.5"
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 10c0/0382a9ed13208f8bfc22ca2f62b364855207dffdb73dc26e150ade78c3093f1cf56172df2dd460c8caf2afa91c0ed4ec8a88c62f8f9cd1cf423d26506aa8797a
-  languageName: node
-  linkType: hard
-
 "create-jest@npm:^29.7.0":
   version: 29.7.0
   resolution: "create-jest@npm:29.7.0"
@@ -9458,16 +8543,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"create-react-class@npm:^15.7.0":
-  version: 15.7.0
-  resolution: "create-react-class@npm:15.7.0"
-  dependencies:
-    loose-envify: "npm:^1.3.1"
-    object-assign: "npm:^4.1.1"
-  checksum: 10c0/bce4b46e6d85b424cb50ca8089266c7664fcecfd81abaafb829680fae2e2e60dc6999cac88f5a16a38473ed284859f2328935a42fc5cd1b7cc48888fdd8363c9
-  languageName: node
-  linkType: hard
-
 "cross-fetch@npm:^3.1.5":
   version: 3.2.0
   resolution: "cross-fetch@npm:3.2.0"
@@ -9477,7 +8552,7 @@ __metadata:
   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.6
   resolution: "cross-spawn@npm:6.0.6"
   dependencies:
@@ -9490,7 +8565,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3, cross-spawn@npm:^7.0.6":
+"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.3, cross-spawn@npm:^7.0.6":
   version: 7.0.6
   resolution: "cross-spawn@npm:7.0.6"
   dependencies:
@@ -9501,13 +8576,6 @@ __metadata:
   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"
@@ -9515,15 +8583,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-declaration-sorter@npm:^6.3.1":
-  version: 6.4.1
-  resolution: "css-declaration-sorter@npm:6.4.1"
-  peerDependencies:
-    postcss: ^8.0.9
-  checksum: 10c0/b8b664338dac528266a1ed9b27927ac51a907fb16bc1954fa9038b5286c442603bd494cc920c6a3616111309d18ee6b5a85b6d9927938efc942af452a5145160
-  languageName: node
-  linkType: hard
-
 "css-hot-loader@npm:^1.4.4":
   version: 1.4.4
   resolution: "css-hot-loader@npm:1.4.4"
@@ -9564,127 +8623,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-loader@npm:^6.5.1, css-loader@npm:^6.7.1":
-  version: 6.11.0
-  resolution: "css-loader@npm:6.11.0"
-  dependencies:
-    icss-utils: "npm:^5.1.0"
-    postcss: "npm:^8.4.33"
-    postcss-modules-extract-imports: "npm:^3.1.0"
-    postcss-modules-local-by-default: "npm:^4.0.5"
-    postcss-modules-scope: "npm:^3.2.0"
-    postcss-modules-values: "npm:^4.0.0"
-    postcss-value-parser: "npm:^4.2.0"
-    semver: "npm:^7.5.4"
-  peerDependencies:
-    "@rspack/core": 0.x || 1.x
-    webpack: ^5.0.0
-  peerDependenciesMeta:
-    "@rspack/core":
-      optional: true
-    webpack:
-      optional: true
-  checksum: 10c0/bb52434138085fed06a33e2ffbdae9ee9014ad23bf60f59d6b7ee67f28f26c6b1764024d3030bd19fd884d6ee6ee2224eaed64ad19eb18fbbb23d148d353a965
-  languageName: node
-  linkType: hard
-
-"css-minimizer-webpack-plugin@npm:^3.4.1":
-  version: 3.4.1
-  resolution: "css-minimizer-webpack-plugin@npm:3.4.1"
-  dependencies:
-    cssnano: "npm:^5.0.6"
-    jest-worker: "npm:^27.0.2"
-    postcss: "npm:^8.3.5"
-    schema-utils: "npm:^4.0.0"
-    serialize-javascript: "npm:^6.0.0"
-    source-map: "npm:^0.6.1"
-  peerDependencies:
-    webpack: ^5.0.0
-  peerDependenciesMeta:
-    "@parcel/css":
-      optional: true
-    clean-css:
-      optional: true
-    csso:
-      optional: true
-    esbuild:
-      optional: true
-  checksum: 10c0/a6b749a136f7a62a173e576a10c8f2ada18013800a2698ede08dfdf6df6761b9ad24cabfce153ef4958ffcf8509e7b6a40c6ddffa6eb06f3624a97c17b825e06
-  languageName: node
-  linkType: hard
-
-"css-minimizer-webpack-plugin@npm:^4.0.0":
-  version: 4.2.2
-  resolution: "css-minimizer-webpack-plugin@npm:4.2.2"
-  dependencies:
-    cssnano: "npm:^5.1.8"
-    jest-worker: "npm:^29.1.2"
-    postcss: "npm:^8.4.17"
-    schema-utils: "npm:^4.0.0"
-    serialize-javascript: "npm:^6.0.0"
-    source-map: "npm:^0.6.1"
-  peerDependencies:
-    webpack: ^5.0.0
-  peerDependenciesMeta:
-    "@parcel/css":
-      optional: true
-    "@swc/css":
-      optional: true
-    clean-css:
-      optional: true
-    csso:
-      optional: true
-    esbuild:
-      optional: true
-    lightningcss:
-      optional: true
-  checksum: 10c0/05cd1460b83d9a5f8878fd63d3a80fd100cbb10f48e295a6ad52519761f3390e1e1bc0e269ff28d15b062a1b11379e04608d50ee30424e177c281bd845fef9fb
-  languageName: node
-  linkType: hard
-
-"css-select@npm:^4.1.3, css-select@npm:^4.2.1":
-  version: 4.3.0
-  resolution: "css-select@npm:4.3.0"
-  dependencies:
-    boolbase: "npm:^1.0.0"
-    css-what: "npm:^6.0.1"
-    domhandler: "npm:^4.3.1"
-    domutils: "npm:^2.8.0"
-    nth-check: "npm:^2.0.1"
-  checksum: 10c0/a489d8e5628e61063d5a8fe0fa1cc7ae2478cb334a388a354e91cf2908154be97eac9fa7ed4dffe87a3e06cf6fcaa6016553115335c4fd3377e13dac7bd5a8e1
-  languageName: node
-  linkType: hard
-
-"css-select@npm:^5.1.0":
-  version: 5.2.2
-  resolution: "css-select@npm:5.2.2"
-  dependencies:
-    boolbase: "npm:^1.0.0"
-    css-what: "npm:^6.1.0"
-    domhandler: "npm:^5.0.2"
-    domutils: "npm:^3.0.1"
-    nth-check: "npm:^2.0.1"
-  checksum: 10c0/d79fffa97106007f2802589f3ed17b8c903f1c961c0fc28aa8a051eee0cbad394d8446223862efd4c1b40445a6034f626bb639cf2035b0bfc468544177593c99
-  languageName: node
-  linkType: hard
-
-"css-tree@npm:^1.1.2, css-tree@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "css-tree@npm:1.1.3"
-  dependencies:
-    mdn-data: "npm:2.0.14"
-    source-map: "npm:^0.6.1"
-  checksum: 10c0/499a507bfa39b8b2128f49736882c0dd636b0cd3370f2c69f4558ec86d269113286b7df469afc955de6a68b0dba00bc533e40022a73698081d600072d5d83c1c
-  languageName: node
-  linkType: hard
-
-"css-what@npm:^6.0.1, css-what@npm:^6.1.0":
-  version: 6.2.2
-  resolution: "css-what@npm:6.2.2"
-  checksum: 10c0/91e24c26fb977b4ccef30d7007d2668c1c10ac0154cc3f42f7304410e9594fb772aea4f30c832d2993b132ca8d99338050866476210316345ec2e7d47b248a56
-  languageName: node
-  linkType: hard
-
 "cssesc@npm:^3.0.0":
   version: 3.0.0
   resolution: "cssesc@npm:3.0.0"
@@ -9694,92 +8632,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cssnano-preset-advanced@npm:^5.3.8":
-  version: 5.3.10
-  resolution: "cssnano-preset-advanced@npm:5.3.10"
-  dependencies:
-    autoprefixer: "npm:^10.4.12"
-    cssnano-preset-default: "npm:^5.2.14"
-    postcss-discard-unused: "npm:^5.1.0"
-    postcss-merge-idents: "npm:^5.1.1"
-    postcss-reduce-idents: "npm:^5.2.0"
-    postcss-zindex: "npm:^5.1.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/abfa870a6e3ab52cddfea7cac83f49b510efb941c7f2960ca9d41ae11fabbe03e9453cad7f81fd1b35cf6080c94094cd7bb1b58c07fad4cf0453f6e4bb9a07ae
-  languageName: node
-  linkType: hard
-
-"cssnano-preset-default@npm:^5.2.14":
-  version: 5.2.14
-  resolution: "cssnano-preset-default@npm:5.2.14"
-  dependencies:
-    css-declaration-sorter: "npm:^6.3.1"
-    cssnano-utils: "npm:^3.1.0"
-    postcss-calc: "npm:^8.2.3"
-    postcss-colormin: "npm:^5.3.1"
-    postcss-convert-values: "npm:^5.1.3"
-    postcss-discard-comments: "npm:^5.1.2"
-    postcss-discard-duplicates: "npm:^5.1.0"
-    postcss-discard-empty: "npm:^5.1.1"
-    postcss-discard-overridden: "npm:^5.1.0"
-    postcss-merge-longhand: "npm:^5.1.7"
-    postcss-merge-rules: "npm:^5.1.4"
-    postcss-minify-font-values: "npm:^5.1.0"
-    postcss-minify-gradients: "npm:^5.1.1"
-    postcss-minify-params: "npm:^5.1.4"
-    postcss-minify-selectors: "npm:^5.2.1"
-    postcss-normalize-charset: "npm:^5.1.0"
-    postcss-normalize-display-values: "npm:^5.1.0"
-    postcss-normalize-positions: "npm:^5.1.1"
-    postcss-normalize-repeat-style: "npm:^5.1.1"
-    postcss-normalize-string: "npm:^5.1.0"
-    postcss-normalize-timing-functions: "npm:^5.1.0"
-    postcss-normalize-unicode: "npm:^5.1.1"
-    postcss-normalize-url: "npm:^5.1.0"
-    postcss-normalize-whitespace: "npm:^5.1.1"
-    postcss-ordered-values: "npm:^5.1.3"
-    postcss-reduce-initial: "npm:^5.1.2"
-    postcss-reduce-transforms: "npm:^5.1.0"
-    postcss-svgo: "npm:^5.1.0"
-    postcss-unique-selectors: "npm:^5.1.1"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/d125bdb9ac007f97f920e30be953c550a8e7de0cb9298f67e0bc9744f4b920039046b5a6b817e345872836b08689af747f82fbf2189c8bd48da3e6f0c1087b89
-  languageName: node
-  linkType: hard
-
-"cssnano-utils@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "cssnano-utils@npm:3.1.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/057508645a3e7584decede1045daa5b362dbfa2f5df96c3527c7d52e41e787a3442a56a8ea0c0af6a757f518e79a459ee580a35c323ad0d0eec912afd67d7630
-  languageName: node
-  linkType: hard
-
-"cssnano@npm:^5.0.6, cssnano@npm:^5.1.12, cssnano@npm:^5.1.8":
-  version: 5.1.15
-  resolution: "cssnano@npm:5.1.15"
-  dependencies:
-    cssnano-preset-default: "npm:^5.2.14"
-    lilconfig: "npm:^2.0.3"
-    yaml: "npm:^1.10.2"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/4252e4f4edd7a0fbdd4017825c0f8632b7a12ecbfdd432d2ff7ec268d48eb956a0a10bbf209602181f9f84ceeecea4a864719ecde03aa2cc48f5d9636fcf5f9a
-  languageName: node
-  linkType: hard
-
-"csso@npm:^4.2.0":
-  version: 4.2.0
-  resolution: "csso@npm:4.2.0"
-  dependencies:
-    css-tree: "npm:^1.1.2"
-  checksum: 10c0/f8c6b1300efaa0f8855a7905ae3794a29c6496e7f16a71dec31eb6ca7cfb1f058a4b03fd39b66c4deac6cb06bf6b4ba86da7b67d7320389cb9994d52b924b903
-  languageName: node
-  linkType: hard
-
 "csstype@npm:^3.2.2":
   version: 3.2.3
   resolution: "csstype@npm:3.2.3"
@@ -9850,14 +8702,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debounce@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "debounce@npm:1.2.1"
-  checksum: 10c0/6c9320aa0973fc42050814621a7a8a78146c1975799b5b3cc1becf1f77ba9a5aa583987884230da0842a03f385def452fad5d60db97c3d1c8b824e38a8edf500
-  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.8, debug@npm:^2.6.9":
+"debug@npm:2.6.9, debug@npm:^2.2.0, debug@npm:^2.3.3, debug@npm:^2.6.9":
   version: 2.6.9
   resolution: "debug@npm:2.6.9"
   dependencies:
@@ -9866,7 +8711,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.2.0, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.4, debug@npm:^4.3.5, 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.4.0, debug@npm:^4.4.1, debug@npm:^4.4.3":
   version: 4.4.3
   resolution: "debug@npm:4.4.3"
   dependencies:
@@ -9916,13 +8761,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"decode-uri-component@npm:^0.2.0, decode-uri-component@npm:^0.2.2":
+"decode-named-character-reference@npm:^1.0.0":
+  version: 1.3.0
+  resolution: "decode-named-character-reference@npm:1.3.0"
+  dependencies:
+    character-entities: "npm:^2.0.0"
+  checksum: 10c0/787f4c87f3b82ea342aa7c2d7b1882b6fb9511bb77f72ae44dcaabea0470bacd1e9c6a0080ab886545019fa0cb3a7109573fad6b61a362844c3a0ac52b36e4bb
+  languageName: node
+  linkType: hard
+
+"decode-uri-component@npm:^0.2.0":
   version: 0.2.2
   resolution: "decode-uri-component@npm:0.2.2"
   checksum: 10c0/1f4fa54eb740414a816b3f6c24818fbfcabd74ac478391e9f4e2282c994127db02010ce804f3d08e38255493cfe68608b3f5c8e09fd6efc4ae46c807691f7a31
   languageName: node
   linkType: hard
 
+"decode-uri-component@npm:^0.4.1":
+  version: 0.4.1
+  resolution: "decode-uri-component@npm:0.4.1"
+  checksum: 10c0/a180bbdb5398ec8270d236a3ac07cb988bbf6097428481780b85840f088951dc0318a8d8f9d56796e1a322b55b29859cea29982f22f9b03af0bc60974c54e591
+  languageName: node
+  linkType: hard
+
 "decompress-response@npm:^3.3.0":
   version: 3.3.0
   resolution: "decompress-response@npm:3.3.0"
@@ -9960,6 +8821,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dedent@npm:^1.7.2":
+  version: 1.7.2
+  resolution: "dedent@npm:1.7.2"
+  peerDependencies:
+    babel-plugin-macros: ^3.1.0
+  peerDependenciesMeta:
+    babel-plugin-macros:
+      optional: true
+  checksum: 10c0/acaff07cac355b93f17b1b17ebbb84d3cc55af6ab4b7814c3f505e061903e168bc6bf9ddce331552d64dee1525f0b4c549c9ade46aebfac6f69caaed74e90751
+  languageName: node
+  linkType: hard
+
 "deep-extend@npm:^0.6.0":
   version: 0.6.0
   resolution: "deep-extend@npm:0.6.0"
@@ -9988,15 +8861,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"default-gateway@npm:^6.0.3":
-  version: 6.0.3
-  resolution: "default-gateway@npm:6.0.3"
-  dependencies:
-    execa: "npm:^5.0.0"
-  checksum: 10c0/5184f9e6e105d24fb44ade9e8741efa54bb75e84625c1ea78c4ef8b81dff09ca52d6dbdd1185cf0dc655bb6b282a64fffaf7ed2dd561b8d9ad6f322b1f039aba
-  languageName: node
-  linkType: hard
-
 "defaults@npm:^1.0.3":
   version: 1.0.4
   resolution: "defaults@npm:1.0.4"
@@ -10031,13 +8895,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"define-lazy-prop@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "define-lazy-prop@npm:2.0.0"
-  checksum: 10c0/db6c63864a9d3b7dc9def55d52764968a5af296de87c1b2cc71d8be8142e445208071953649e0386a8cc37cfcf9a2067a47207f1eb9ff250c2a269658fdae422
-  languageName: node
-  linkType: hard
-
 "define-properties@npm:^1.1.3, define-properties@npm:^1.2.1":
   version: 1.2.1
   resolution: "define-properties@npm:1.2.1"
@@ -10077,34 +8934,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"del@npm:^4.1.1":
-  version: 4.1.1
-  resolution: "del@npm:4.1.1"
-  dependencies:
-    "@types/glob": "npm:^7.1.1"
-    globby: "npm:^6.1.0"
-    is-path-cwd: "npm:^2.0.0"
-    is-path-in-cwd: "npm:^2.0.0"
-    p-map: "npm:^2.0.0"
-    pify: "npm:^4.0.1"
-    rimraf: "npm:^2.6.3"
-  checksum: 10c0/ed3233e86e39c0a6a7ea85d8ad0ebc00603078ad408b9c34b4742f707c20028c5731dce2e8aa9a6eb5ae6bee30ccc5405cf7b5d457306520e37c92d0410b6061
-  languageName: node
-  linkType: hard
-
-"del@npm:^6.1.1":
-  version: 6.1.1
-  resolution: "del@npm:6.1.1"
+"del@npm:^8.0.1":
+  version: 8.0.1
+  resolution: "del@npm:8.0.1"
   dependencies:
-    globby: "npm:^11.0.1"
-    graceful-fs: "npm:^4.2.4"
-    is-glob: "npm:^4.0.1"
-    is-path-cwd: "npm:^2.2.0"
-    is-path-inside: "npm:^3.0.2"
-    p-map: "npm:^4.0.0"
-    rimraf: "npm:^3.0.2"
-    slash: "npm:^3.0.0"
-  checksum: 10c0/8a095c5ccade42c867a60252914ae485ec90da243d735d1f63ec1e64c1cfbc2b8810ad69a29ab6326d159d4fddaa2f5bad067808c42072351ec458efff86708f
+    globby: "npm:^14.0.2"
+    is-glob: "npm:^4.0.3"
+    is-path-cwd: "npm:^3.0.0"
+    is-path-inside: "npm:^4.0.0"
+    p-map: "npm:^7.0.2"
+    presentable-error: "npm:^0.0.1"
+    slash: "npm:^5.1.0"
+  checksum: 10c0/77100f260e6b5bd2a927fe4a770b321c088aa15ce9c8266b9f0297a85613c225913e52fc78150ea701b163d0d9c9fec945107fef0e23836747a57a7d3709fb1c
   languageName: node
   linkType: hard
 
@@ -10122,13 +8963,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"depd@npm:~1.1.2":
-  version: 1.1.2
-  resolution: "depd@npm:1.1.2"
-  checksum: 10c0/acb24aaf936ef9a227b6be6d495f0d2eb20108a9a6ad40585c5bda1a897031512fef6484e4fdbb80bd249fdaa82841fa1039f416ece03188e677ba11bcfda249
-  languageName: node
-  linkType: hard
-
 "deprecated-obj@npm:2.0.0":
   version: 2.0.0
   resolution: "deprecated-obj@npm:2.0.0"
@@ -10146,6 +8980,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dequal@npm:^2.0.0":
+  version: 2.0.3
+  resolution: "dequal@npm:2.0.3"
+  checksum: 10c0/f98860cdf58b64991ae10205137c0e97d384c3a4edc7f807603887b7c4b850af1224a33d88012009f150861cbee4fa2d322c4cc04b9313bee312e47f6ecaa888
+  languageName: node
+  linkType: hard
+
 "destroy@npm:1.2.0, destroy@npm:~1.2.0":
   version: 1.2.0
   resolution: "destroy@npm:1.2.0"
@@ -10153,7 +8994,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"detab@npm:2.0.4, detab@npm:^2.0.0":
+"detab@npm:^2.0.0":
   version: 2.0.4
   resolution: "detab@npm:2.0.4"
   dependencies:
@@ -10162,16 +9003,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"detect-indent@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "detect-indent@npm:4.0.0"
-  dependencies:
-    repeating: "npm:^2.0.0"
-  checksum: 10c0/066a0d13eadebb1e7d2ba395fdf9f3956f31f8383a6db263320108c283e2230250a102f4871f54926cc8a77c6323ac7103f30550a4ac3d6518aa1b934c041295
-  languageName: node
-  linkType: hard
-
-"detect-libc@npm:^2.0.3":
+"detect-libc@npm:^2.0.1, detect-libc@npm:^2.0.3":
   version: 2.1.2
   resolution: "detect-libc@npm:2.1.2"
   checksum: 10c0/acc675c29a5649fa1fb6e255f993b8ee829e510b6b56b0910666949c80c364738833417d0edb5f90e4e46be17228b0f2b66a010513984e18b15deeeac49369c4
@@ -10185,48 +9017,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"detect-node@npm:^2.0.4":
-  version: 2.1.0
-  resolution: "detect-node@npm:2.1.0"
-  checksum: 10c0/f039f601790f2e9d4654e499913259a798b1f5246ae24f86ab5e8bd4aaf3bce50484234c494f11fb00aecb0c6e2733aa7b1cf3f530865640b65fbbd65b2c4e09
+"detect-repo-changelog@npm:1.0.1":
+  version: 1.0.1
+  resolution: "detect-repo-changelog@npm:1.0.1"
+  dependencies:
+    changelog-filename-regex: "npm:^1.1.0"
+    is-regular-file: "npm:^1.0.1"
+    lodash.find: "npm:^4.6.0"
+    pify: "npm:^2.3.0"
+  checksum: 10c0/6b7bd319520c126be6ca65eb8b214fbbe77bc71cddfcdf2c6e37c8a0f0fa02ba1479bc91f1d786e1a0b512e50f003337cdad261173212926df29d3a0e1010658
   languageName: node
   linkType: hard
 
-"detect-port-alt@npm:^1.1.6":
-  version: 1.1.6
-  resolution: "detect-port-alt@npm:1.1.6"
-  dependencies:
-    address: "npm:^1.0.1"
-    debug: "npm:^2.6.0"
-  bin:
-    detect: ./bin/detect-port
-    detect-port: ./bin/detect-port
-  checksum: 10c0/7269e6aef7b782d98c77505c07a7a0f5e2ee98a9607dc791035fc0192fc58aa03cc833fae605e10eaf239a2a5a55cd938e0bb141dea764ac6180ca082fd62b23
-  languageName: node
-  linkType: hard
-
-"detect-port@npm:^1.3.0":
-  version: 1.6.1
-  resolution: "detect-port@npm:1.6.1"
-  dependencies:
-    address: "npm:^1.0.1"
-    debug: "npm:4"
-  bin:
-    detect: bin/detect-port.js
-    detect-port: bin/detect-port.js
-  checksum: 10c0/4ea9eb46a637cb21220dd0a62b6074792894fc77b2cacbc9de533d1908b2eedafa7bfd7547baaa2ac1e9c7ba7c289b34b17db896dca6da142f4fc6e2060eee17
-  languageName: node
-  linkType: hard
-
-"detect-repo-changelog@npm:1.0.1":
-  version: 1.0.1
-  resolution: "detect-repo-changelog@npm:1.0.1"
+"devlop@npm:^1.0.0, devlop@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "devlop@npm:1.1.0"
   dependencies:
-    changelog-filename-regex: "npm:^1.1.0"
-    is-regular-file: "npm:^1.0.1"
-    lodash.find: "npm:^4.6.0"
-    pify: "npm:^2.3.0"
-  checksum: 10c0/6b7bd319520c126be6ca65eb8b214fbbe77bc71cddfcdf2c6e37c8a0f0fa02ba1479bc91f1d786e1a0b512e50f003337cdad261173212926df29d3a0e1010658
+    dequal: "npm:^2.0.0"
+  checksum: 10c0/e0928ab8f94c59417a2b8389c45c55ce0a02d9ac7fd74ef62d01ba48060129e1d594501b77de01f3eeafc7cb00773819b0df74d96251cf20b31c5b3071f45c0e
   languageName: node
   linkType: hard
 
@@ -10260,12 +9068,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dns-packet@npm:^5.2.2":
-  version: 5.6.1
-  resolution: "dns-packet@npm:5.6.1"
-  dependencies:
-    "@leichtgewicht/ip-codec": "npm:^2.0.1"
-  checksum: 10c0/8948d3d03063fb68e04a1e386875f8c3bcc398fc375f535f2b438fad8f41bf1afa6f5e70893ba44f4ae884c089247e0a31045722fa6ff0f01d228da103f1811d
+"dnssd-advertise@npm:^1.1.4":
+  version: 1.1.4
+  resolution: "dnssd-advertise@npm:1.1.4"
+  checksum: 10c0/7a875a206f1d08ad74683b73b2399361b4cc15ff855f4d7831c40375e0f582609ca35a0b7dc55f5b8055efe615fa70d80e057a32e81278d97a81ed362149b3e3
   languageName: node
   linkType: hard
 
@@ -10274,31 +9080,26 @@ __metadata:
   resolution: "docs@workspace:docs"
   dependencies:
     "@callstack/react-theme-provider": "npm:^3.0.9"
-    "@docusaurus/core": "npm:^2.3.6"
-    "@docusaurus/module-type-aliases": "npm:^2.3.6"
-    "@docusaurus/preset-classic": "npm:^2.3.6"
-    "@docusaurus/remark-plugin-npm2yarn": "npm:^2.3.6"
-    "@easyops-cn/docusaurus-search-local": "npm:^0.33.4"
+    "@callstack/rspress-preset": "npm:0.6.6"
+    "@callstack/rspress-theme": "npm:0.6.6"
     "@material/material-color-utilities": "npm:0.2.4"
-    "@mdx-js/react": "npm:^1.6.22"
     "@react-native-vector-icons/material-design-icons": "npm:^12.0.0"
-    "@tsconfig/docusaurus": "npm:^1.0.6"
+    "@rspress/core": "npm:2.0.14"
     "@types/marked": "npm:^4.0.7"
+    "@types/react": "npm:^19.2.7"
     "@types/react-color": "npm:^3.0.6"
+    "@types/react-dom": "npm:^19.2.3"
     camelcase: "npm:^7.0.1"
-    clsx: "npm:^1.2.1"
     color: "npm:^4.2.3"
     component-docs: "npm:^0.24.0"
     marked: "npm:^4.1.1"
-    patch-package: "npm:^6.5.0"
-    prism-react-renderer: "npm:^1.3.5"
-    react: "npm:17.0.2"
+    react: "npm:19.2.6"
     react-color: "npm:^2.19.3"
-    react-dom: "npm:17.0.2"
-    react-native-safe-area-context: "npm:^4.5.0"
-    react-native-web: "npm:^0.18.12"
-    typescript: "npm:^4.8.4"
-    use-latest-callback: "npm:^0.1.7"
+    react-dom: "npm:19.2.6"
+    react-native-safe-area-context: "npm:5.7.0"
+    react-native-web: "npm:^0.21.2"
+    typescript: "npm:5.8.3"
+    use-latest-callback: "npm:^0.2.3"
   languageName: unknown
   linkType: soft
 
@@ -10320,15 +9121,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom-converter@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "dom-converter@npm:0.2.0"
-  dependencies:
-    utila: "npm:~0.4"
-  checksum: 10c0/e96aa63bd8c6ee3cd9ce19c3aecfc2c42e50a460e8087114794d4f5ecf3a4f052b34ea3bf2d73b5d80b4da619073b49905e6d7d788ceb7814ca4c29be5354a11
-  languageName: node
-  linkType: hard
-
 "dom-serializer@npm:^1.0.1":
   version: 1.4.1
   resolution: "dom-serializer@npm:1.4.1"
@@ -10340,18 +9132,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom-serializer@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "dom-serializer@npm:2.0.0"
-  dependencies:
-    domelementtype: "npm:^2.3.0"
-    domhandler: "npm:^5.0.2"
-    entities: "npm:^4.2.0"
-  checksum: 10c0/d5ae2b7110ca3746b3643d3ef60ef823f5f078667baf530cec096433f1627ec4b6fa8c072f09d079d7cda915fd2c7bc1b7b935681e9b09e591e1e15f4040b8e2
-  languageName: node
-  linkType: hard
-
-"domelementtype@npm:^2.0.1, domelementtype@npm:^2.2.0, domelementtype@npm:^2.3.0":
+"domelementtype@npm:^2.0.1, domelementtype@npm:^2.2.0":
   version: 2.3.0
   resolution: "domelementtype@npm:2.3.0"
   checksum: 10c0/686f5a9ef0fff078c1412c05db73a0dce096190036f33e400a07e2a4518e9f56b1e324f5c576a0a747ef0e75b5d985c040b0d51945ce780c0dd3c625a18cd8c9
@@ -10367,7 +9148,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"domhandler@npm:^4.0.0, domhandler@npm:^4.2.0, domhandler@npm:^4.3.1":
+"domhandler@npm:^4.2.0":
   version: 4.3.1
   resolution: "domhandler@npm:4.3.1"
   dependencies:
@@ -10376,16 +9157,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"domhandler@npm:^5.0.2, domhandler@npm:^5.0.3":
-  version: 5.0.3
-  resolution: "domhandler@npm:5.0.3"
-  dependencies:
-    domelementtype: "npm:^2.3.0"
-  checksum: 10c0/bba1e5932b3e196ad6862286d76adc89a0dbf0c773e5ced1eb01f9af930c50093a084eff14b8de5ea60b895c56a04d5de8bbc4930c5543d029091916770b2d2a
-  languageName: node
-  linkType: hard
-
-"domutils@npm:^2.0.0, domutils@npm:^2.5.2, domutils@npm:^2.8.0":
+"domutils@npm:^2.0.0":
   version: 2.8.0
   resolution: "domutils@npm:2.8.0"
   dependencies:
@@ -10396,17 +9168,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"domutils@npm:^3.0.1, domutils@npm:^3.2.1, domutils@npm:^3.2.2":
-  version: 3.2.2
-  resolution: "domutils@npm:3.2.2"
-  dependencies:
-    dom-serializer: "npm:^2.0.0"
-    domelementtype: "npm:^2.3.0"
-    domhandler: "npm:^5.0.3"
-  checksum: 10c0/47938f473b987ea71cd59e59626eb8666d3aa8feba5266e45527f3b636c7883cca7e582d901531961f742c519d7514636b7973353b648762b2e3bedbf235fada
-  languageName: node
-  linkType: hard
-
 "dot-case@npm:^2.1.0":
   version: 2.1.1
   resolution: "dot-case@npm:2.1.1"
@@ -10416,16 +9177,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dot-case@npm:^3.0.4":
-  version: 3.0.4
-  resolution: "dot-case@npm:3.0.4"
-  dependencies:
-    no-case: "npm:^3.0.4"
-    tslib: "npm:^2.0.3"
-  checksum: 10c0/5b859ea65097a7ea870e2c91b5768b72ddf7fa947223fd29e167bcdff58fe731d941c48e47a38ec8aa8e43044c8fbd15cd8fa21689a526bc34b6548197cd5b05
-  languageName: node
-  linkType: hard
-
 "dot-prop@npm:^3.0.0":
   version: 3.0.0
   resolution: "dot-prop@npm:3.0.0"
@@ -10444,29 +9195,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dotenv-expand@npm:~11.0.6":
-  version: 11.0.7
-  resolution: "dotenv-expand@npm:11.0.7"
-  dependencies:
-    dotenv: "npm:^16.4.5"
-  checksum: 10c0/d80b8a7be085edf351270b96ac0e794bc3ddd7f36157912939577cb4d33ba6492ebee349d59798b71b90e36f498d24a2a564fb4aa00073b2ef4c2a3a49c467b1
-  languageName: node
-  linkType: hard
-
-"dotenv@npm:^16.4.5":
-  version: 16.6.1
-  resolution: "dotenv@npm:16.6.1"
-  checksum: 10c0/15ce56608326ea0d1d9414a5c8ee6dcf0fffc79d2c16422b4ac2268e7e2d76ff5a572d37ffe747c377de12005f14b3cc22361e79fc7f1061cce81f77d2c973dc
-  languageName: node
-  linkType: hard
-
-"dotenv@npm:~16.4.5":
-  version: 16.4.7
-  resolution: "dotenv@npm:16.4.7"
-  checksum: 10c0/be9f597e36a8daf834452daa1f4cc30e5375a5968f98f46d89b16b983c567398a330580c88395069a77473943c06b877d1ca25b4afafcdd6d4adb549e8293462
-  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"
@@ -10485,20 +9213,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"duplexer@npm:^0.1.2":
-  version: 0.1.2
-  resolution: "duplexer@npm:0.1.2"
-  checksum: 10c0/c57bcd4bdf7e623abab2df43a7b5b23d18152154529d166c1e0da6bee341d84c432d157d7e97b32fecb1bf3a8b8857dd85ed81a915789f550637ed25b8e64fc2
-  languageName: node
-  linkType: hard
-
-"eastasianwidth@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "eastasianwidth@npm:0.2.0"
-  checksum: 10c0/26f364ebcdb6395f95124fda411f63137a4bfb5d3a06453f7f23dfe52502905bd84e0488172e0f9ec295fdc45f05c23d5d91baf16bd26f0fe9acd777a188dc39
-  languageName: node
-  linkType: hard
-
 "ee-first@npm:1.1.1":
   version: 1.1.1
   resolution: "ee-first@npm:1.1.1"
@@ -10513,6 +9227,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"electron-to-chromium@npm:^1.5.328":
+  version: 1.5.356
+  resolution: "electron-to-chromium@npm:1.5.356"
+  checksum: 10c0/79a9aaa0f8e7c9ffbb3c9b3cc76bc9859bd556da34837ca7f6e25797cb35da033477425c1f74cf846ad2d50ac4b1f7f7808769ab27a4a7efdaf54eb1450e8a39
+  languageName: node
+  linkType: hard
+
 "emittery@npm:^0.13.1":
   version: 0.13.1
   resolution: "emittery@npm:0.13.1"
@@ -10520,6 +9241,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"emoji-regex@npm:^10.3.0":
+  version: 10.6.0
+  resolution: "emoji-regex@npm:10.6.0"
+  checksum: 10c0/1e4aa097bb007301c3b4b1913879ae27327fdc48e93eeefefe3b87e495eb33c5af155300be951b4349ff6ac084f4403dc9eff970acba7c1c572d89396a9a32d7
+  languageName: node
+  linkType: hard
+
 "emoji-regex@npm:^7.0.1":
   version: 7.0.3
   resolution: "emoji-regex@npm:7.0.3"
@@ -10534,13 +9262,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"emoji-regex@npm:^9.2.2":
-  version: 9.2.2
-  resolution: "emoji-regex@npm:9.2.2"
-  checksum: 10c0/af014e759a72064cf66e6e694a7fc6b0ed3d8db680427b021a89727689671cefe9d04151b2cad51dbaf85d5ba790d061cd167f1cf32eb7b281f6368b3c181639
-  languageName: node
-  linkType: hard
-
 "emojis-list@npm:^3.0.0":
   version: 3.0.0
   resolution: "emojis-list@npm:3.0.0"
@@ -10548,13 +9269,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"emoticon@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "emoticon@npm:3.2.0"
-  checksum: 10c0/ee0078d81f64fd1b5ce928ea88cbc3f7a1b3c4d731de1cabb53e2411eba412ad3b152b0982a184c7d0818b01d704ac5a238f3b9aaf8c187ddc51d8c17a9881b8
-  languageName: node
-  linkType: hard
-
 "encodeurl@npm:~1.0.2":
   version: 1.0.2
   resolution: "encodeurl@npm:1.0.2"
@@ -10569,16 +9283,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"encoding-sniffer@npm:^0.2.1":
-  version: 0.2.1
-  resolution: "encoding-sniffer@npm:0.2.1"
-  dependencies:
-    iconv-lite: "npm:^0.6.3"
-    whatwg-encoding: "npm:^3.1.1"
-  checksum: 10c0/d6b591880788f3baf8dd1744636dd189d24a1ec93e6f9817267c60ac3458a5191ca70ab1a186fb67731beff1c3489c6527dfdc4718158ed8460ab2f400dd5e7d
-  languageName: node
-  linkType: hard
-
 "encoding@npm:^0.1.13":
   version: 0.1.13
   resolution: "encoding@npm:0.1.13"
@@ -10625,13 +9329,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"entities@npm:^4.2.0, entities@npm:^4.4.0":
-  version: 4.5.0
-  resolution: "entities@npm:4.5.0"
-  checksum: 10c0/5b039739f7621f5d1ad996715e53d964035f75ad3b9a4d38c6b3804bb226e282ffeae2443624d8fdd9c47d8e926ae9ac009c54671243f0c3294c26af7cc85250
-  languageName: node
-  linkType: hard
-
 "entities@npm:^6.0.0":
   version: 6.0.1
   resolution: "entities@npm:6.0.1"
@@ -10639,13 +9336,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"env-editor@npm:^0.4.1":
-  version: 0.4.2
-  resolution: "env-editor@npm:0.4.2"
-  checksum: 10c0/edb33583b0ae5197535905cbcefca424796f6afec799604f7578428ee523245edcd7df48d582fdab67dbcc697ed39070057f512e72f94c91ceefdcb432f5eadb
-  languageName: node
-  linkType: hard
-
 "env-paths@npm:^2.2.0":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
@@ -10846,6 +9536,30 @@ __metadata:
   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"
+  dependencies:
+    "@types/estree-jsx": "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    estree-util-visit: "npm:^2.0.0"
+    unist-util-position-from-estree: "npm:^2.0.0"
+  checksum: 10c0/6c619bc6963314f8f64b32e3b101b321bf121f659e62b11e70f425619c2db6f1d25f4c594a57fd00908da96c67d9bfbf876eb5172abf9e13f47a71796f6630ff
+  languageName: node
+  linkType: hard
+
+"esast-util-from-js@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "esast-util-from-js@npm:2.0.1"
+  dependencies:
+    "@types/estree-jsx": "npm:^1.0.0"
+    acorn: "npm:^8.0.0"
+    esast-util-from-estree: "npm:^2.0.0"
+    vfile-message: "npm:^4.0.0"
+  checksum: 10c0/3a446fb0b0d7bcd7e0157aa44b3b692802a08c93edbea81cc0f7fe4437bfdfb4b72e4563fe63b4e36d390086b71185dba4ac921f4180cc6349985c263cc74421
+  languageName: node
+  linkType: hard
+
 "escalade@npm:^3.1.1, escalade@npm:^3.2.0":
   version: 3.2.0
   resolution: "escalade@npm:3.2.0"
@@ -10895,14 +9609,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-config-prettier@npm:^8.3.0":
-  version: 8.10.2
-  resolution: "eslint-config-prettier@npm:8.10.2"
+"eslint-config-prettier@npm:^9.0.0":
+  version: 9.1.2
+  resolution: "eslint-config-prettier@npm:9.1.2"
   peerDependencies:
     eslint: ">=7.0.0"
   bin:
     eslint-config-prettier: bin/cli.js
-  checksum: 10c0/b5953cf7a86f685e1218b16707bf36643b525513d08495226a6820caccd8b7bfc6b9aa64ac7cb2415dbe2c1f7dc4995832148bdc53ad45777f75a8ded1073b29
+  checksum: 10c0/d2e9dc913b1677764a4732433d83d258f40820458c65d0274cb9e3eaf6559b39f2136446f310c05abed065a4b3c2e901807ccf583dff76c6227eaebf4132c39a
   languageName: node
   linkType: hard
 
@@ -10943,7 +9657,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-import@npm:^2.25.3":
+"eslint-plugin-import@npm:^2.28.1":
   version: 2.32.0
   resolution: "eslint-plugin-import@npm:2.32.0"
   dependencies:
@@ -10972,56 +9686,56 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-jest@npm:^27.0.1":
-  version: 27.9.0
-  resolution: "eslint-plugin-jest@npm:27.9.0"
+"eslint-plugin-jest@npm:^28.7.0":
+  version: 28.14.0
+  resolution: "eslint-plugin-jest@npm:28.14.0"
   dependencies:
-    "@typescript-eslint/utils": "npm:^5.10.0"
+    "@typescript-eslint/utils": "npm:^6.0.0 || ^7.0.0 || ^8.0.0"
   peerDependencies:
-    "@typescript-eslint/eslint-plugin": ^5.0.0 || ^6.0.0 || ^7.0.0
-    eslint: ^7.0.0 || ^8.0.0
+    "@typescript-eslint/eslint-plugin": ^6.0.0 || ^7.0.0 || ^8.0.0
+    eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
     jest: "*"
   peerDependenciesMeta:
     "@typescript-eslint/eslint-plugin":
       optional: true
     jest:
       optional: true
-  checksum: 10c0/b8b09f7d8ba3d84a8779a6e95702a6e4dce45ab034e4edf5ddb631e77cd38dcdf791dfd9228e0a0d1d80d1eb2d278deb62ad2ec39f10fb8fd43cec07304e0c38
-  languageName: node
-  linkType: hard
-
-"eslint-plugin-local-rules@npm:^1.3.2":
-  version: 1.3.2
-  resolution: "eslint-plugin-local-rules@npm:1.3.2"
-  checksum: 10c0/a6677d0d7ad1e8cf08c175046fe13508c018f0d9294de42905769848aef2fdab9541272177b8b1af59b2ee6650b81a9ea3c5f4be3815be27829c79da2645529d
+  checksum: 10c0/da9c99dd8a1a80aa0c126ff4558882451dcee61b7e4c88e2407ac27d0c86fad2951384a4b037748e26f8743890b4628c6917b0760b01b7017c53fb29768584bc
   languageName: node
   linkType: hard
 
-"eslint-plugin-prettier@npm:^4.0.0":
-  version: 4.2.5
-  resolution: "eslint-plugin-prettier@npm:4.2.5"
+"eslint-plugin-prettier@npm:^5.2.1":
+  version: 5.5.6
+  resolution: "eslint-plugin-prettier@npm:5.5.6"
   dependencies:
-    prettier-linter-helpers: "npm:^1.0.0"
+    prettier-linter-helpers: "npm:^1.0.1"
+    synckit: "npm:^0.11.13"
   peerDependencies:
-    eslint: ">=7.28.0"
-    prettier: ">=2.0.0"
+    "@types/eslint": ">=8.0.0"
+    eslint: ">=8.0.0"
+    eslint-config-prettier: ">= 7.0.0 <10.0.0 || >=10.1.0"
+    prettier: ">=3.0.0"
   peerDependenciesMeta:
+    "@types/eslint":
+      optional: true
     eslint-config-prettier:
       optional: true
-  checksum: 10c0/75b3cdc90328aacf4cc7fabc522e651bd8208d40634c9b2772274332a696548136dac4608b141863bc462500c5a8012fbc2495623f684f631ddb62c2f5bca0a3
+  checksum: 10c0/af37126c947ff3e87ff1ea76408db8cb1c7da966ebdaba68c6dd5924da7eb1b43b1abc4796d753a97b1bc26ea94c5497093e6ab9f8588fffe558d5a554e19bbf
   languageName: node
   linkType: hard
 
-"eslint-plugin-promise@npm:^6.0.1":
-  version: 6.6.0
-  resolution: "eslint-plugin-promise@npm:6.6.0"
+"eslint-plugin-promise@npm:^7.1.0":
+  version: 7.3.0
+  resolution: "eslint-plugin-promise@npm:7.3.0"
+  dependencies:
+    "@eslint-community/eslint-utils": "npm:^4.4.0"
   peerDependencies:
-    eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
-  checksum: 10c0/93a667dbc9ff15c4d586b0d40a31c7828314cbbb31b2b9a75802aa4ef536e9457bb3e1a89b384b07aa336dd61b315ae8b0aadc0870210378023dd018819b59b3
+    eslint: ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0
+  checksum: 10c0/417d3ab57895143bd687aa840804d0d7bbe70227242530eea7d4af7ae680a67d6872ce3a2adcc36dec29009d1861c63717c5887c30da1887153c8e5a181f3eb5
   languageName: node
   linkType: hard
 
-"eslint-plugin-react-hooks@npm:^4.3.0":
+"eslint-plugin-react-hooks@npm:^4.6.0":
   version: 4.6.2
   resolution: "eslint-plugin-react-hooks@npm:4.6.2"
   peerDependencies:
@@ -11030,7 +9744,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-react-native-a11y@npm:^3.2.1":
+"eslint-plugin-react-native-a11y@npm:^3.4.1":
   version: 3.5.1
   resolution: "eslint-plugin-react-native-a11y@npm:3.5.1"
   dependencies:
@@ -11050,7 +9764,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-react-native@npm:^4.0.0":
+"eslint-plugin-react-native@npm:^4.1.0":
   version: 4.1.0
   resolution: "eslint-plugin-react-native@npm:4.1.0"
   dependencies:
@@ -11061,7 +9775,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-react@npm:^7.27.1":
+"eslint-plugin-react@npm:^7.35.0":
   version: 7.37.5
   resolution: "eslint-plugin-react@npm:7.37.5"
   dependencies:
@@ -11089,6 +9803,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-testing-library@npm:^7.16.2":
+  version: 7.16.2
+  resolution: "eslint-plugin-testing-library@npm:7.16.2"
+  dependencies:
+    "@typescript-eslint/scope-manager": "npm:^8.56.0"
+    "@typescript-eslint/utils": "npm:^8.56.0"
+  peerDependencies:
+    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+  checksum: 10c0/ea99f41eee929e0b139d927f8a89bef7ffe3bd33c51fc3c2c93d8e9d146e146395e1f7bb8a34d4b5bd9a1ffe7a1879959fc171e952c731e1e8310b079d9d5c97
+  languageName: node
+  linkType: hard
+
 "eslint-restricted-globals@npm:^0.2.0":
   version: 0.2.0
   resolution: "eslint-restricted-globals@npm:0.2.0"
@@ -11096,7 +9822,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:
@@ -11106,98 +9832,101 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-scope@npm:^7.1.1":
-  version: 7.2.2
-  resolution: "eslint-scope@npm:7.2.2"
+"eslint-scope@npm:^8.4.0":
+  version: 8.4.0
+  resolution: "eslint-scope@npm:8.4.0"
   dependencies:
     esrecurse: "npm:^4.3.0"
     estraverse: "npm:^5.2.0"
-  checksum: 10c0/613c267aea34b5a6d6c00514e8545ef1f1433108097e857225fed40d397dd6b1809dffd11c2fde23b37ca53d7bf935fe04d2a18e6fc932b31837b6ad67e1c116
-  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
+  checksum: 10c0/407f6c600204d0f3705bd557f81bd0189e69cd7996f408f8971ab5779c0af733d1af2f1412066b40ee1588b085874fc37a2333986c6521669cdbdd36ca5058e0
   languageName: node
   linkType: hard
 
-"eslint-visitor-keys@npm:^2.0.0, eslint-visitor-keys@npm:^2.1.0":
+"eslint-visitor-keys@npm:^2.1.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.1, 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
   languageName: node
   linkType: hard
 
-"eslint@npm:8.31.0":
-  version: 8.31.0
-  resolution: "eslint@npm:8.31.0"
+"eslint-visitor-keys@npm:^4.2.1":
+  version: 4.2.1
+  resolution: "eslint-visitor-keys@npm:4.2.1"
+  checksum: 10c0/fcd43999199d6740db26c58dbe0c2594623e31ca307e616ac05153c9272f12f1364f5a0b1917a8e962268fdecc6f3622c1c2908b4fcc2e047a106fe6de69dc43
+  languageName: node
+  linkType: hard
+
+"eslint-visitor-keys@npm:^5.0.0":
+  version: 5.0.1
+  resolution: "eslint-visitor-keys@npm:5.0.1"
+  checksum: 10c0/16190bdf2cbae40a1109384c94450c526a79b0b9c3cb21e544256ed85ac48a4b84db66b74a6561d20fe6ab77447f150d711c2ad5ad74df4fcc133736bce99678
+  languageName: node
+  linkType: hard
+
+"eslint@npm:9.39.4":
+  version: 9.39.4
+  resolution: "eslint@npm:9.39.4"
   dependencies:
-    "@eslint/eslintrc": "npm:^1.4.1"
-    "@humanwhocodes/config-array": "npm:^0.11.8"
+    "@eslint-community/eslint-utils": "npm:^4.8.0"
+    "@eslint-community/regexpp": "npm:^4.12.1"
+    "@eslint/config-array": "npm:^0.21.2"
+    "@eslint/config-helpers": "npm:^0.4.2"
+    "@eslint/core": "npm:^0.17.0"
+    "@eslint/eslintrc": "npm:^3.3.5"
+    "@eslint/js": "npm:9.39.4"
+    "@eslint/plugin-kit": "npm:^0.4.1"
+    "@humanfs/node": "npm:^0.16.6"
     "@humanwhocodes/module-importer": "npm:^1.0.1"
-    "@nodelib/fs.walk": "npm:^1.2.8"
-    ajv: "npm:^6.10.0"
+    "@humanwhocodes/retry": "npm:^0.4.2"
+    "@types/estree": "npm:^1.0.6"
+    ajv: "npm:^6.14.0"
     chalk: "npm:^4.0.0"
-    cross-spawn: "npm:^7.0.2"
+    cross-spawn: "npm:^7.0.6"
     debug: "npm:^4.3.2"
-    doctrine: "npm:^3.0.0"
     escape-string-regexp: "npm:^4.0.0"
-    eslint-scope: "npm:^7.1.1"
-    eslint-utils: "npm:^3.0.0"
-    eslint-visitor-keys: "npm:^3.3.0"
-    espree: "npm:^9.4.0"
-    esquery: "npm:^1.4.0"
+    eslint-scope: "npm:^8.4.0"
+    eslint-visitor-keys: "npm:^4.2.1"
+    espree: "npm:^10.4.0"
+    esquery: "npm:^1.5.0"
     esutils: "npm:^2.0.2"
     fast-deep-equal: "npm:^3.1.3"
-    file-entry-cache: "npm:^6.0.1"
+    file-entry-cache: "npm:^8.0.0"
     find-up: "npm:^5.0.0"
     glob-parent: "npm:^6.0.2"
-    globals: "npm:^13.19.0"
-    grapheme-splitter: "npm:^1.0.4"
     ignore: "npm:^5.2.0"
-    import-fresh: "npm:^3.0.0"
     imurmurhash: "npm:^0.1.4"
     is-glob: "npm:^4.0.0"
-    is-path-inside: "npm:^3.0.3"
-    js-sdsl: "npm:^4.1.4"
-    js-yaml: "npm:^4.1.0"
     json-stable-stringify-without-jsonify: "npm:^1.0.1"
-    levn: "npm:^0.4.1"
     lodash.merge: "npm:^4.6.2"
-    minimatch: "npm:^3.1.2"
+    minimatch: "npm:^3.1.5"
     natural-compare: "npm:^1.4.0"
-    optionator: "npm:^0.9.1"
-    regexpp: "npm:^3.2.0"
-    strip-ansi: "npm:^6.0.1"
-    strip-json-comments: "npm:^3.1.0"
-    text-table: "npm:^0.2.0"
+    optionator: "npm:^0.9.3"
+  peerDependencies:
+    jiti: "*"
+  peerDependenciesMeta:
+    jiti:
+      optional: true
   bin:
     eslint: bin/eslint.js
-  checksum: 10c0/55c32aeeb9b5d6d7417a9c5e5789aa5486ffd31cc0cf498ebaa945f2492964ea2372c38eff084eb99948d81d69cc387ca62ddf58e5824fac3c1d0162a53a76f7
+  checksum: 10c0/1955067c2d991f0c84f4c4abfafe31bb47fa3b717a7fd3e43fe1e511c6f859d7700cbca969f85661dc4c130f7aeced5e5444884314198a54428f5e5141db9337
   languageName: node
   linkType: hard
 
-"espree@npm:^9.4.0":
-  version: 9.6.1
-  resolution: "espree@npm:9.6.1"
+"espree@npm:^10.0.1, espree@npm:^10.4.0":
+  version: 10.4.0
+  resolution: "espree@npm:10.4.0"
   dependencies:
-    acorn: "npm:^8.9.0"
+    acorn: "npm:^8.15.0"
     acorn-jsx: "npm:^5.3.2"
-    eslint-visitor-keys: "npm:^3.4.1"
-  checksum: 10c0/1a2e9b4699b715347f62330bcc76aee224390c28bb02b31a3752e9d07549c473f5f986720483c6469cf3cfb3c9d05df612ffc69eb1ee94b54b739e67de9bb460
+    eslint-visitor-keys: "npm:^4.2.1"
+  checksum: 10c0/c63fe06131c26c8157b4083313cb02a9a54720a08e21543300e55288c40e06c3fc284bdecf108d3a1372c5934a0a88644c98714f38b6ae8ed272b40d9ea08d6b
   languageName: node
   linkType: hard
 
@@ -11211,7 +9940,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esquery@npm:^1.4.0":
+"esquery@npm:^1.5.0":
   version: 1.7.0
   resolution: "esquery@npm:1.7.0"
   dependencies:
@@ -11254,6 +9983,65 @@ __metadata:
   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"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+  checksum: 10c0/ee69bb5c45e2ad074725b90ed181c1c934b29d81bce4b0c7761431e83c4c6ab1b223a6a3d6a4fbeb92128bc5d5ee201d5dd36cf1770aa5e16a40b0cf36e8a1f1
+  languageName: node
+  linkType: hard
+
+"estree-util-build-jsx@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "estree-util-build-jsx@npm:3.0.1"
+  dependencies:
+    "@types/estree-jsx": "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    estree-util-is-identifier-name: "npm:^3.0.0"
+    estree-walker: "npm:^3.0.0"
+  checksum: 10c0/274c119817b8e7caa14a9778f1e497fea56cdd2b01df1a1ed037f843178992d3afe85e0d364d485e1e2e239255763553d1b647b15e4a7ba50851bcb43dc6bf80
+  languageName: node
+  linkType: hard
+
+"estree-util-is-identifier-name@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "estree-util-is-identifier-name@npm:3.0.0"
+  checksum: 10c0/d1881c6ed14bd588ebd508fc90bf2a541811dbb9ca04dec2f39d27dcaa635f85b5ed9bbbe7fc6fb1ddfca68744a5f7c70456b4b7108b6c4c52780631cc787c5b
+  languageName: node
+  linkType: hard
+
+"estree-util-scope@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "estree-util-scope@npm:1.0.0"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+  checksum: 10c0/ef8a573cc899277c613623a1722f630e2163abbc6e9e2f49e758c59b81b484e248b585df6df09a38c00fbfb6390117997cc80c1347b7a86bc1525d9e462b60d5
+  languageName: node
+  linkType: hard
+
+"estree-util-to-js@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "estree-util-to-js@npm:2.0.0"
+  dependencies:
+    "@types/estree-jsx": "npm:^1.0.0"
+    astring: "npm:^1.8.0"
+    source-map: "npm:^0.7.0"
+  checksum: 10c0/ac88cb831401ef99e365f92f4af903755d56ae1ce0e0f0fb8ff66e678141f3d529194f0fb15f6c78cd7554c16fda36854df851d58f9e05cfab15bddf7a97cea0
+  languageName: node
+  linkType: hard
+
+"estree-util-visit@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "estree-util-visit@npm:2.0.0"
+  dependencies:
+    "@types/estree-jsx": "npm:^1.0.0"
+    "@types/unist": "npm:^3.0.0"
+  checksum: 10c0/acda8b03cc8f890d79c7c7361f6c95331ba84b7ccc0c32b49f447fc30206b20002b37ffdfc97b6ad16e6fe065c63ecbae1622492e2b6b4775c15966606217f39
+  languageName: node
+  linkType: hard
+
 "estree-walker@npm:^0.6.1":
   version: 0.6.1
   resolution: "estree-walker@npm:0.6.1"
@@ -11261,6 +10049,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"estree-walker@npm:^3.0.0":
+  version: 3.0.3
+  resolution: "estree-walker@npm:3.0.3"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+  checksum: 10c0/c12e3c2b2642d2bcae7d5aa495c60fa2f299160946535763969a1c83fc74518ffa9c2cd3a8b69ac56aea547df6a8aac25f729a342992ef0bbac5f1c73e78995d
+  languageName: node
+  linkType: hard
+
 "esutils@npm:^2.0.2":
   version: 2.0.3
   resolution: "esutils@npm:2.0.3"
@@ -11268,13 +10065,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eta@npm:^2.0.0":
-  version: 2.2.0
-  resolution: "eta@npm:2.2.0"
-  checksum: 10c0/643b54d9539d2761bf6c5f4f48df1a5ea2d46c7f5a5fdc47a7d4802a8aa2b6262d4d61f724452e226c18cf82db02d48e65293fcc548f26a3f9d75a5ba7c3b859
-  languageName: node
-  linkType: hard
-
 "etag@npm:~1.8.1":
   version: 1.8.1
   resolution: "etag@npm:1.8.1"
@@ -11282,16 +10072,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eval@npm:^0.1.8":
-  version: 0.1.8
-  resolution: "eval@npm:0.1.8"
-  dependencies:
-    "@types/node": "npm:*"
-    require-like: "npm:>= 0.1.1"
-  checksum: 10c0/258e700bff09e3ce3344273d5b6691b8ec5b043538d84f738f14d8b0aded33d64c00c15b380de725b1401b15f428ab35a9e7ca19a7d25f162c4f877c71586be9
-  languageName: node
-  linkType: hard
-
 "event-target-shim@npm:^5.0.0":
   version: 5.0.1
   resolution: "event-target-shim@npm:5.0.1"
@@ -11299,13 +10079,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eventemitter3@npm:^4.0.0":
-  version: 4.0.7
-  resolution: "eventemitter3@npm:4.0.7"
-  checksum: 10c0/5f6d97cbcbac47be798e6355e3a7639a84ee1f7d9b199a07017f1d2f1e2fe236004d14fa5dfaeba661f94ea57805385e326236a6debbc7145c8877fbc0297c6b
-  languageName: node
-  linkType: hard
-
 "events@npm:^3.2.0":
   version: 3.3.0
   resolution: "events@npm:3.3.0"
@@ -11313,13 +10086,6 @@ __metadata:
   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
-
 "exec-sh@npm:^0.3.2":
   version: 0.3.6
   resolution: "exec-sh@npm:0.3.6"
@@ -11359,7 +10125,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"execa@npm:^4.0.2, execa@npm:^4.0.3":
+"execa@npm:^4.0.2":
   version: 4.1.0
   resolution: "execa@npm:4.1.0"
   dependencies:
@@ -11400,15 +10166,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"expand-brackets@npm:^0.1.4":
-  version: 0.1.5
-  resolution: "expand-brackets@npm:0.1.5"
-  dependencies:
-    is-posix-bracket: "npm:^0.1.0"
-  checksum: 10c0/49b7fc1250f5f60ffe640be03777471ce63420eaa9850ce897b32bcf874e7be16b00917c7e2266a310e674ddb4ffe499ca964115bbc3f8c881288a280740aa6f
-  languageName: node
-  linkType: hard
-
 "expand-brackets@npm:^2.1.4":
   version: 2.1.4
   resolution: "expand-brackets@npm:2.1.4"
@@ -11424,16 +10181,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"expand-range@npm:^1.8.1":
-  version: 1.8.2
-  resolution: "expand-range@npm:1.8.2"
-  dependencies:
-    fill-range: "npm:^2.1.0"
-  checksum: 10c0/ad7911af12f026953c57e3d7b7fe9f750ce2a1d45f7f7d717de890ed6429baf5e8a7224540cd648eeb603d409be0b7a7df09f951693cc83e98dcdc1e0043c23e
-  languageName: node
-  linkType: hard
-
-"expect@npm:^29.0.0, expect@npm:^29.7.0":
+"expect@npm:^29.7.0":
   version: 29.7.0
   resolution: "expect@npm:29.7.0"
   dependencies:
@@ -11446,311 +10194,333 @@ __metadata:
   languageName: node
   linkType: hard
 
-"expo-asset@npm:~12.0.12":
-  version: 12.0.12
-  resolution: "expo-asset@npm:12.0.12"
+"expo-asset@npm:~56.0.12":
+  version: 56.0.12
+  resolution: "expo-asset@npm:56.0.12"
   dependencies:
-    "@expo/image-utils": "npm:^0.8.8"
-    expo-constants: "npm:~18.0.12"
+    "@expo/image-utils": "npm:^0.10.0"
+    expo-constants: "npm:~56.0.13"
   peerDependencies:
     expo: "*"
     react: "*"
     react-native: "*"
-  checksum: 10c0/303b7e08126edbddd3235a6803ffa6ff98b1cc0fb7bfa019d1ad891560bbbe9a9b84db7275ced33011330a8f4f225175d3780f4771a925d8e1c3782a343b9796
+  checksum: 10c0/be5cdea96f3152aa9d8b48f83e1d2b80895da2c7a66063feff5194fe808237d63cc20293f21a9b170e144bba50dc9ff5bf335e7b0a66e56e45ccf8c3a3692679
   languageName: node
   linkType: hard
 
-"expo-constants@npm:~18.0.12, expo-constants@npm:~18.0.13":
-  version: 18.0.13
-  resolution: "expo-constants@npm:18.0.13"
+"expo-constants@npm:~56.0.13":
+  version: 56.0.13
+  resolution: "expo-constants@npm:56.0.13"
   dependencies:
-    "@expo/config": "npm:~12.0.13"
-    "@expo/env": "npm:~2.0.8"
+    "@expo/env": "npm:~2.3.0"
   peerDependencies:
     expo: "*"
     react-native: "*"
-  checksum: 10c0/bbe33c0611b8085ecd965434d71d27f065427146fe23f3162d170812f8c917b032604c79e0cd129f39147f58f7dc581ee3c6b64a84bf865dd325595289dc77e6
+  checksum: 10c0/bb6648ab0cf146f95c20a2bb52d25cc38259a201ef6e85e04a8568318ee732f7c42b97e6fb7e4797c147c012f6839e1836629a03819aef44013ee73144d91bd0
   languageName: node
   linkType: hard
 
-"expo-crypto@npm:~15.0.7":
-  version: 15.0.8
-  resolution: "expo-crypto@npm:15.0.8"
+"expo-constants@npm:~56.0.18":
+  version: 56.0.18
+  resolution: "expo-constants@npm:56.0.18"
   dependencies:
-    base64-js: "npm:^1.3.0"
+    "@expo/env": "npm:~2.3.0"
+  peerDependencies:
+    expo: "*"
+    react-native: "*"
+  checksum: 10c0/4a8c35f4eeeb078c0feb3d5b55da403ef1d151a35b9b3a4e17505cedfb7ddd78cc02d670ebc5b7c9fb11d42052fd1b0c143cd0a652d22fa6a3730685b19ca0b2
+  languageName: node
+  linkType: hard
+
+"expo-crypto@npm:~56.0.3":
+  version: 56.0.3
+  resolution: "expo-crypto@npm:56.0.3"
   peerDependencies:
     expo: "*"
-  checksum: 10c0/714806a2245a0aa05b7ec0d7044cd6ec317f3da7d96298b3a4b39c3ef8f62f25fa0d64b5b9df4018151a6b65c4c4348f6a7f5ad23e09bd73364daab260745df5
+  checksum: 10c0/ab047a2df00292f04c6ece9ae488073d1b54718ff9c2febd947ebdacb73ecf008f3ebc28f181db9d70caab9d6b6f027e91f8abd06b4ef92c7c02f35c095cf7e6
   languageName: node
   linkType: hard
 
-"expo-dev-client@npm:~6.0.14":
-  version: 6.0.20
-  resolution: "expo-dev-client@npm:6.0.20"
+"expo-dev-client@npm:~56.0.13":
+  version: 56.0.13
+  resolution: "expo-dev-client@npm:56.0.13"
   dependencies:
-    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"
+    expo-dev-launcher: "npm:~56.0.13"
+    expo-dev-menu: "npm:~56.0.12"
+    expo-dev-menu-interface: "npm:~56.0.0"
+    expo-manifests: "npm:~56.0.4"
+    expo-updates-interface: "npm:~56.0.1"
   peerDependencies:
     expo: "*"
-  checksum: 10c0/0a35906f005323d9c207e9fec40915867a29e5fd6a8c09ce9cd1ffb4a32234bcb89344b83d5dfd8680457e1db7f0331c02ef19342019dd1ae476ad77f5acac5c
+  checksum: 10c0/937138497f5d789d83a67969e04ce8dea034f460f1d19a1425e2aa6c39fa81eb5d5c873f7fd9c8b1639728f7be572c528c0201a3ca81837a090aa9fbf966e9a5
   languageName: node
   linkType: hard
 
-"expo-dev-launcher@npm:6.0.20":
-  version: 6.0.20
-  resolution: "expo-dev-launcher@npm:6.0.20"
+"expo-dev-launcher@npm:~56.0.13":
+  version: 56.0.13
+  resolution: "expo-dev-launcher@npm:56.0.13"
   dependencies:
-    ajv: "npm:^8.11.0"
-    expo-dev-menu: "npm:7.0.18"
-    expo-manifests: "npm:~1.0.10"
+    "@expo/schema-utils": "npm:^56.0.0"
+    expo-dev-menu: "npm:~56.0.12"
+    expo-manifests: "npm:~56.0.4"
   peerDependencies:
     expo: "*"
-  checksum: 10c0/215b48a55097ce44159dccbfce1ec9c51c1707f51d6304059f76446b1ba0a166a5b153f5583858138c66dcc830b8d9da7d895046a7aa801d815bd40ba0cf5c75
+    react-native: "*"
+  checksum: 10c0/daf92e91cd727e68c951574f1572ee7fbf0394ebaf7d3cda09fa9ba5b0b4aba217bc76104a1abb1d96bd3cf200c851455ca3805b0757478b3797f09e5f62a171
   languageName: node
   linkType: hard
 
-"expo-dev-menu-interface@npm:2.0.0":
-  version: 2.0.0
-  resolution: "expo-dev-menu-interface@npm:2.0.0"
+"expo-dev-menu-interface@npm:~56.0.0":
+  version: 56.0.1
+  resolution: "expo-dev-menu-interface@npm:56.0.1"
   peerDependencies:
     expo: "*"
-  checksum: 10c0/ef85287262acce5822cd274f91b908bccbc590d3eba2fb34f037271f6f7d6d9e312655c72fca82f890035ed5954e47c58e4509ad5b925737da61d656c48170a4
+  checksum: 10c0/9abdc36845817856c262e52b6f2dfa2f0f1e2585bf32f85320e28e6c436cff298ad3860aac4a5dd4140492b7987105c1b748b88dd4d8eaf7eaa8e5ad373b8f67
   languageName: node
   linkType: hard
 
-"expo-dev-menu@npm:7.0.18":
-  version: 7.0.18
-  resolution: "expo-dev-menu@npm:7.0.18"
+"expo-dev-menu@npm:~56.0.12":
+  version: 56.0.12
+  resolution: "expo-dev-menu@npm:56.0.12"
   dependencies:
-    expo-dev-menu-interface: "npm:2.0.0"
+    expo-dev-menu-interface: "npm:~56.0.0"
   peerDependencies:
     expo: "*"
-  checksum: 10c0/947bee35304acbd46888d52c30dbdf158c211118237d545e64c50be50f702fe1b49ca9d0690d05443942ec751e6c6e56cc62a43957ae34f4299f794070fc93e4
+    react-native: "*"
+  checksum: 10c0/9d7a16f6763b7791534a6997fd29a6aae6241e78f3648541397a1b8746907c28eca11f5610a2af0429a727adaefb543268dcd69cdbb7c9697029c88803dee665
   languageName: node
   linkType: hard
 
-"expo-eas-client@npm:~1.0.8":
-  version: 1.0.8
-  resolution: "expo-eas-client@npm:1.0.8"
-  checksum: 10c0/c291351db616f6163900b5ef6294240068e2d7b916dde1aee5b82353375f63cdfe4523f63ff72903c6ee81e5f1be2a20555f0c024d6fb11b5de1507c7c2d8b09
+"expo-eas-client@npm:~56.0.0":
+  version: 56.0.1
+  resolution: "expo-eas-client@npm:56.0.1"
+  checksum: 10c0/01627f690371353115da0db561f77d091203c2a28076aecfac69bacc84ca025b2b035dc6079190c2940d4045e5e8ff511f276b0ea09aa5e078b457eae3f7eadd
   languageName: node
   linkType: hard
 
-"expo-file-system@npm:~19.0.21":
-  version: 19.0.21
-  resolution: "expo-file-system@npm:19.0.21"
+"expo-file-system@npm:~56.0.7":
+  version: 56.0.7
+  resolution: "expo-file-system@npm:56.0.7"
   peerDependencies:
     expo: "*"
     react-native: "*"
-  checksum: 10c0/0ece34f86beda2048f8bf1f3218e57f6c7c14a875fe8be0f0dd2704d968ee61f979ddf0561b8769f4d46cfeb77ac759da0a030c5a77128cf2a06ce0bb9e3959b
+  checksum: 10c0/a21211a2fded2926897071af7a7b3e13d422a7218d4de4928c5241849b1b0d38354e42a6dd7ef0a58dadc322815c71f1fc0d09e857f79319d4ccd85e13e12417
   languageName: node
   linkType: hard
 
-"expo-font@npm:~14.0.10, expo-font@npm:~14.0.9":
-  version: 14.0.10
-  resolution: "expo-font@npm:14.0.10"
+"expo-font@npm:~56.0.5":
+  version: 56.0.5
+  resolution: "expo-font@npm:56.0.5"
   dependencies:
     fontfaceobserver: "npm:^2.1.0"
   peerDependencies:
     expo: "*"
     react: "*"
     react-native: "*"
-  checksum: 10c0/67b5ea924319235426c27a4b69a8409438314bed635ad9c57bfbb4b5dcc873a575d2f44129683ec145785d3cdf591349078cc2e96d750ba2dea3aebf89e19e9f
+  checksum: 10c0/d4d821e6f176596f09ec0e1ee68d5af64d68fa139c8c5da3549d014d6a297bea4d0ccca6503ad753f1c0096e097364754e65ee176cafc74902a72e47ac810655
   languageName: node
   linkType: hard
 
-"expo-json-utils@npm:~0.15.0":
-  version: 0.15.0
-  resolution: "expo-json-utils@npm:0.15.0"
-  checksum: 10c0/c4cd95ad27fb7379f072a979399ea84781ec99db8a8f675dfaab8261eb16361d07133624fa50c70940bb57c280785a429a7a20a1f83b839ee03c96746370f59d
+"expo-json-utils@npm:~56.0.0":
+  version: 56.0.0
+  resolution: "expo-json-utils@npm:56.0.0"
+  checksum: 10c0/c4620d9b967877e1c44c79a8718f5fe709b260252780e0a8411fd6f9877928dca21ee6c53f595fcbc66f4b4e3bc699a2359c99bb8282ccc9722cf8f096a9a307
   languageName: node
   linkType: hard
 
-"expo-keep-awake@npm:~15.0.7, expo-keep-awake@npm:~15.0.8":
-  version: 15.0.8
-  resolution: "expo-keep-awake@npm:15.0.8"
+"expo-keep-awake@npm:~56.0.3":
+  version: 56.0.3
+  resolution: "expo-keep-awake@npm:56.0.3"
   peerDependencies:
     expo: "*"
     react: "*"
-  checksum: 10c0/23064b18285498e70be0aa525dc875cc809fc723b9a101d51e4721a09b1460eb041c73ebeb6d51e9175bb4c9b7a668bc08a48b99ebddac4cfaadb5a47194d329
+  checksum: 10c0/5137da41b6d45deca54f9bbbfbbb1e1c90b6459d489e0f8ce2cf5090cd5298f56947a5d4a4aec8ebd77c587978ce96f05ef86c8610a6e6b24718dc3ab2282802
   languageName: node
   linkType: hard
 
-"expo-manifests@npm:~1.0.10":
-  version: 1.0.10
-  resolution: "expo-manifests@npm:1.0.10"
+"expo-manifests@npm:~56.0.4":
+  version: 56.0.4
+  resolution: "expo-manifests@npm:56.0.4"
   dependencies:
-    "@expo/config": "npm:~12.0.11"
-    expo-json-utils: "npm:~0.15.0"
+    expo-json-utils: "npm:~56.0.0"
   peerDependencies:
     expo: "*"
-  checksum: 10c0/97130cb1800486fc65c1e4269580aef6b6603dd4fce2299ebc3227bdeb38ea24e691ff4f66be9ca9842f4bddcddfe6e3637a1bc5c22d96fe807eadfbd6c44434
+  checksum: 10c0/5ba98148a759d98059bd30f4551eba8ed97a74e8461e7d47ea6f1d9d614666c1fd531a71a521c7dc413c5da2162530c0a93afc2d31900b7011ff3cf2e2c39c32
   languageName: node
   linkType: hard
 
-"expo-modules-autolinking@npm:3.0.24":
-  version: 3.0.24
-  resolution: "expo-modules-autolinking@npm:3.0.24"
+"expo-modules-autolinking@npm:~56.0.9":
+  version: 56.0.9
+  resolution: "expo-modules-autolinking@npm:56.0.9"
   dependencies:
-    "@expo/spawn-async": "npm:^1.7.2"
+    "@expo/require-utils": "npm:^56.1.2"
+    "@expo/spawn-async": "npm:^1.8.0"
     chalk: "npm:^4.1.0"
     commander: "npm:^7.2.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/cdd59e3aa1aca61955eabc25d21dc3c0a8971fffd234cb491245bc3eac96b45f197dce723089b5760c968ad309e9deb75660e6810c6c58b8a629b83a7e2abc76
+  checksum: 10c0/1265e8577c4781adce060ff3c024c7b730132c0189d90c8fdf16aed3a401ed4f0df9358fdeafb4d3ea7c50b01d3cd3568e889fa0a60a29ee1da90f3c8357d25f
   languageName: node
   linkType: hard
 
-"expo-modules-core@npm:3.0.29":
-  version: 3.0.29
-  resolution: "expo-modules-core@npm:3.0.29"
+"expo-modules-core@npm:~56.0.11":
+  version: 56.0.11
+  resolution: "expo-modules-core@npm:56.0.11"
   dependencies:
+    "@expo/expo-modules-macros-plugin": "npm:~0.0.9"
+    expo-modules-jsi: "npm:~56.0.7"
     invariant: "npm:^2.2.4"
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: 10c0/e32a87b06aa772f523afa5a995523848c61c06370085ae9e724ad24432cac38925ff69976f58b2c562828c2cefba6df00cfef2dbb206111413890ce1c2baee19
+    react-native-worklets: ^0.7.4 || ^0.8.0
+  peerDependenciesMeta:
+    react-native-worklets:
+      optional: true
+  checksum: 10c0/47005b45d5c5a60c3ea06ccc5d6e554d1f48ed41176322cc37e8f51e5f0c93785de08384cb93595de0af7f03482e66288c935149c7047af7e6d02427bdb53d23
   languageName: node
   linkType: hard
 
-"expo-pwa@npm:0.0.127":
-  version: 0.0.127
-  resolution: "expo-pwa@npm:0.0.127"
-  dependencies:
-    "@expo/image-utils": "npm:0.3.23"
-    chalk: "npm:^4.0.0"
-    commander: "npm:2.20.0"
-    update-check: "npm:1.5.3"
+"expo-modules-jsi@npm:~56.0.7":
+  version: 56.0.7
+  resolution: "expo-modules-jsi@npm:56.0.7"
   peerDependencies:
-    expo: "*"
-  bin:
-    expo-pwa: build/cli.js
-  checksum: 10c0/fa3cb77a8d36889566fa6440ea7e3726bd8de8d83c32d24ee8019f5000d807f450d910372580512b8cfd4db362bc1d3da276782bbf2f3e3eead6fe43e58efb5d
+    react-native: "*"
+  checksum: 10c0/4d5c19333102401bbefa5fc6ad38cf522a93c18f23f8f11a0b5c91a0781da7c1f7f670b668446125178a0bf2d9d4a13adbded3bf5733b8a04c2c1e8a73035137
   languageName: node
   linkType: hard
 
-"expo-server@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "expo-server@npm:1.0.5"
-  checksum: 10c0/0da974f733235d457f7ce51e5452f48f203378687f821bdab7159617a491c0192251423a17a7a3a118486e1cbfffff5d5ad31aeeedcf2cfad6412a1bd7e86877
+"expo-server@npm:^56.0.4":
+  version: 56.0.4
+  resolution: "expo-server@npm:56.0.4"
+  checksum: 10c0/80b9217b742b4c88e540d00fd60b9b02537ffb7ecc03d205abc7936d655ba02d6c5fa17be0e9b0a1a28550a2cbd958b32b22e5d1ef116341c506467a3a8822a1
   languageName: node
   linkType: hard
 
-"expo-splash-screen@npm:~31.0.10":
-  version: 31.0.13
-  resolution: "expo-splash-screen@npm:31.0.13"
+"expo-splash-screen@npm:~56.0.9":
+  version: 56.0.9
+  resolution: "expo-splash-screen@npm:56.0.9"
   dependencies:
-    "@expo/prebuild-config": "npm:^54.0.8"
+    "@expo/config-plugins": "npm:~56.0.7"
+    "@expo/image-utils": "npm:^0.10.0"
+    xml2js: "npm:0.6.0"
   peerDependencies:
     expo: "*"
-  checksum: 10c0/f2caf9ac41f35f4790ca8cbdecec7f5b453d95f2a31261bb4117c5bb0515547704568998e3c1dfbbad55dc41ec8d1221288a69d2a4a943c4cf4681f5b213e860
+  checksum: 10c0/90f207be9c1a8def374852370723f872cc6722a6ab994f8998c01bdafeb38c9b206d9bdff26c21609a0fbd60a8d4c515b04333ea30cf1839adc4b88cca481d69
   languageName: node
   linkType: hard
 
-"expo-status-bar@npm:~3.0.8":
-  version: 3.0.9
-  resolution: "expo-status-bar@npm:3.0.9"
-  dependencies:
-    react-native-is-edge-to-edge: "npm:^1.2.1"
+"expo-status-bar@npm:~56.0.4":
+  version: 56.0.4
+  resolution: "expo-status-bar@npm:56.0.4"
   peerDependencies:
+    expo: "*"
     react: "*"
     react-native: "*"
-  checksum: 10c0/b35ed996a3da45a657075447bbf687dad4e7d5321129182e58737ea0fa4aeb8bb145bbe20967abd6823587a738e4c6fd62c41d18d8c11094ff926e2079c02fc2
+  checksum: 10c0/74790ea40ebfd0f7928864b2f5bb8e7893030df46828f954ffedde931702192ab4b9ca41aa972e37457c1e6658b19e0a4266ebbecc243ccd3e9b78abccebe6c6
   languageName: node
   linkType: hard
 
-"expo-structured-headers@npm:~5.0.0":
-  version: 5.0.0
-  resolution: "expo-structured-headers@npm:5.0.0"
-  checksum: 10c0/bbe0f9cb91ca5fd8482fd15723bfe279b26f34a37360af2ce9a510434351e50d889e429037915be9ede493893b99eb8e7f0be56bfcebaebb5d9a25443b1fa419
+"expo-structured-headers@npm:~56.0.0":
+  version: 56.0.0
+  resolution: "expo-structured-headers@npm:56.0.0"
+  checksum: 10c0/f4f88184abe0532f0aaff52e2963275c3db5e03cc1579faae82f2dbe859f44ed65660444faa2e0290ee7f604ae1a5d4b76ffe9484193147d01a3cc6ea54d4957
   languageName: node
   linkType: hard
 
-"expo-updates-interface@npm:~2.0.0":
-  version: 2.0.0
-  resolution: "expo-updates-interface@npm:2.0.0"
+"expo-updates-interface@npm:~56.0.1":
+  version: 56.0.2
+  resolution: "expo-updates-interface@npm:56.0.2"
   peerDependencies:
     expo: "*"
-  checksum: 10c0/d2ccf8325c1c8092fac6cfa521291943dce92f56a633bcc60abe1db54c88da601d6b0174aa1e824db6d3508486ccccafa16e39f05b7014dd70442ba91340b02e
+  checksum: 10c0/9200d11a5affb568b6d39fe500578e9d38a2164d05fef3bc8a6ec1ff7393fe416ec62596d4d46677406e9f20c6b5e660b8fa85015b09d6695c0d3bd87187f360
   languageName: node
   linkType: hard
 
-"expo-updates@npm:~29.0.12":
-  version: 29.0.16
-  resolution: "expo-updates@npm:29.0.16"
+"expo-updates@npm:~56.0.14":
+  version: 56.0.14
+  resolution: "expo-updates@npm:56.0.14"
   dependencies:
     "@expo/code-signing-certificates": "npm:^0.0.6"
-    "@expo/plist": "npm:^0.4.8"
-    "@expo/spawn-async": "npm:^1.7.2"
-    arg: "npm:4.1.0"
+    "@expo/plist": "npm:^0.7.0"
+    "@expo/spawn-async": "npm:^1.8.0"
+    arg: "npm:^4.1.0"
     chalk: "npm:^4.1.2"
     debug: "npm:^4.3.4"
-    expo-eas-client: "npm:~1.0.8"
-    expo-manifests: "npm:~1.0.10"
-    expo-structured-headers: "npm:~5.0.0"
-    expo-updates-interface: "npm:~2.0.0"
+    expo-eas-client: "npm:~56.0.0"
+    expo-manifests: "npm:~56.0.4"
+    expo-structured-headers: "npm:~56.0.0"
+    expo-updates-interface: "npm:~56.0.1"
     getenv: "npm:^2.0.0"
     glob: "npm:^13.0.0"
     ignore: "npm:^5.3.1"
+    nullthrows: "npm:^1.1.1"
     resolve-from: "npm:^5.0.0"
   peerDependencies:
     expo: "*"
+    expo-dev-client: "*"
     react: "*"
     react-native: "*"
+  peerDependenciesMeta:
+    expo-dev-client:
+      optional: true
   bin:
     expo-updates: bin/cli.js
-  checksum: 10c0/2dfadc04df7a6e37c1162a4d1eca76f6249e2c3fb8f8e6ac0ccd6f55cce34acf6867c2dfbd75c2d0a37c0578386d19d1a2fbc97a2b5efba0b5217f2a83e3a85d
+  checksum: 10c0/b19786df2458ba33a4b9f12d9a543780826a0337216cbe184d105d092e6d6b12f8716ee018465a3a3597f01a8ad52c4894bcfb9af2e05cf7defd673743928664
   languageName: node
   linkType: hard
 
-"expo@npm:^54.0.0":
-  version: 54.0.31
-  resolution: "expo@npm:54.0.31"
+"expo@npm:~56.0.0":
+  version: 56.0.0
+  resolution: "expo@npm:56.0.0"
   dependencies:
     "@babel/runtime": "npm:^7.20.0"
-    "@expo/cli": "npm:54.0.21"
-    "@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.13"
-    "@expo/vector-icons": "npm:^15.0.3"
+    "@expo/cli": "npm:^56.1.7"
+    "@expo/config": "npm:~56.0.8"
+    "@expo/config-plugins": "npm:~56.0.7"
+    "@expo/devtools": "npm:~56.0.2"
+    "@expo/dom-webview": "npm:~56.0.5"
+    "@expo/fingerprint": "npm:^0.19.0"
+    "@expo/local-build-cache-provider": "npm:^56.0.7"
+    "@expo/log-box": "npm:^56.0.12"
+    "@expo/metro": "npm:~56.0.0"
+    "@expo/metro-config": "npm:~56.0.11"
     "@ungap/structured-clone": "npm:^1.3.0"
-    babel-preset-expo: "npm:~54.0.9"
-    expo-asset: "npm:~12.0.12"
-    expo-constants: "npm:~18.0.13"
-    expo-file-system: "npm:~19.0.21"
-    expo-font: "npm:~14.0.10"
-    expo-keep-awake: "npm:~15.0.8"
-    expo-modules-autolinking: "npm:3.0.24"
-    expo-modules-core: "npm:3.0.29"
+    babel-preset-expo: "npm:~56.0.10"
+    expo-asset: "npm:~56.0.12"
+    expo-constants: "npm:~56.0.13"
+    expo-file-system: "npm:~56.0.7"
+    expo-font: "npm:~56.0.5"
+    expo-keep-awake: "npm:~56.0.3"
+    expo-modules-autolinking: "npm:~56.0.9"
+    expo-modules-core: "npm:~56.0.11"
     pretty-format: "npm:^29.7.0"
     react-refresh: "npm:^0.14.2"
-    whatwg-url-without-unicode: "npm:8.0.0-3"
+    whatwg-url-minimum: "npm:^0.1.2"
   peerDependencies:
     "@expo/dom-webview": "*"
     "@expo/metro-runtime": "*"
     react: "*"
+    react-dom: "*"
     react-native: "*"
+    react-native-web: "*"
     react-native-webview: "*"
   peerDependenciesMeta:
     "@expo/dom-webview":
       optional: true
     "@expo/metro-runtime":
       optional: true
+    react-dom:
+      optional: true
+    react-native-web:
+      optional: true
     react-native-webview:
       optional: true
   bin:
     expo: bin/cli
     expo-modules-autolinking: bin/autolinking
     fingerprint: bin/fingerprint
-  checksum: 10c0/57a65b709ac16e44cf235e279c2fb56b130487074971f17b201fa8bb528998e536af764b59c2f7483ff5a4fa5cdb785f3fd031a251fa69c563433128677bf571
+  checksum: 10c0/9493bd284ea7f8ba813827a789f7a23b43715a9fb195f54612e1375fd74b975dee41302dfd118ff16a25d4d2086194dc4f34f7326a57693b018717244d91219e
   languageName: node
   linkType: hard
 
@@ -11761,7 +10531,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"express@npm:^4.17.1, express@npm:^4.17.3":
+"express@npm:^4.17.1":
   version: 4.22.1
   resolution: "express@npm:4.22.1"
   dependencies:
@@ -11837,15 +10607,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"extglob@npm:^0.3.1":
-  version: 0.3.2
-  resolution: "extglob@npm:0.3.2"
-  dependencies:
-    is-extglob: "npm:^1.0.0"
-  checksum: 10c0/9fcca7651e5c50fc970ec402476fb7a150e27cc2d8b415de8a6719fc111b2e03a9fabbff4fbed51221853f720ad734e842dfaef087ef57bdeb2456dcf0369029
-  languageName: node
-  linkType: hard
-
 "extglob@npm:^2.0.4":
   version: 2.0.4
   resolution: "extglob@npm:2.0.4"
@@ -11876,7 +10637,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.1.1, fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.7, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.3":
+"fast-glob@npm:^3.1.1, fast-glob@npm:^3.3.3":
   version: 3.3.3
   resolution: "fast-glob@npm:3.3.3"
   dependencies:
@@ -11903,13 +10664,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-loops@npm:^1.1.3":
-  version: 1.1.4
-  resolution: "fast-loops@npm:1.1.4"
-  checksum: 10c0/25e8a608fccc0d84c1d037efa715ab1e6f21576e1070931b3ed966657204c47ed2b1cba16e5c46ddde2d62aba0b4100d86616d995318b7367fa0a902a78ed885
-  languageName: node
-  linkType: hard
-
 "fast-uri@npm:^3.0.1":
   version: 3.1.0
   resolution: "fast-uri@npm:3.1.0"
@@ -11926,15 +10680,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"faye-websocket@npm:^0.11.3":
-  version: 0.11.4
-  resolution: "faye-websocket@npm:0.11.4"
-  dependencies:
-    websocket-driver: "npm:>=0.5.1"
-  checksum: 10c0/c6052a0bb322778ce9f89af92890f6f4ce00d5ec92418a35e5f4c6864a4fe736fec0bcebd47eac7c0f0e979b01530746b1c85c83cb04bae789271abf19737420
-  languageName: node
-  linkType: hard
-
 "fb-dotslash@npm:0.5.8":
   version: 0.5.8
   resolution: "fb-dotslash@npm:0.5.8"
@@ -11944,7 +10689,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fb-watchman@npm:^2.0.0":
+"fb-watchman@npm:^2.0.0, fb-watchman@npm:^2.0.2":
   version: 2.0.2
   resolution: "fb-watchman@npm:2.0.2"
   dependencies:
@@ -11953,15 +10698,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"
@@ -11969,7 +10705,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fbjs@npm:^3.0.0, fbjs@npm:^3.0.1, fbjs@npm:^3.0.4":
+"fbjs@npm:^3.0.4":
   version: 3.0.5
   resolution: "fbjs@npm:3.0.5"
   dependencies:
@@ -11996,12 +10732,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"feed@npm:^4.2.2":
-  version: 4.2.2
-  resolution: "feed@npm:4.2.2"
-  dependencies:
-    xml-js: "npm:^1.6.11"
-  checksum: 10c0/c0849bde569da94493224525db00614fd1855a5d7c2e990f6e8637bd0298e85c3d329efe476cba77e711e438c3fb48af60cd5ef0c409da5bcd1f479790b0a372
+"fetch-nodeshim@npm:^0.4.10":
+  version: 0.4.10
+  resolution: "fetch-nodeshim@npm:0.4.10"
+  checksum: 10c0/73b840b5d1252e82c416b350526ff24f5aebf554bfe911c713a19fbe4ad1218fb4c488f95055362a132f5dd733679c929fbe6a65ee23339592290c4d107ade92
   languageName: node
   linkType: hard
 
@@ -12014,12 +10748,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"file-entry-cache@npm:^6.0.1":
-  version: 6.0.1
-  resolution: "file-entry-cache@npm:6.0.1"
+"file-entry-cache@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "file-entry-cache@npm:8.0.0"
   dependencies:
-    flat-cache: "npm:^3.0.4"
-  checksum: 10c0/58473e8a82794d01b38e5e435f6feaf648e3f36fdb3a56e98f417f4efae71ad1c0d4ebd8a9a7c50c3ad085820a93fc7494ad721e0e4ebc1da3573f4e1c3c7cdd
+    flat-cache: "npm:^4.0.0"
+  checksum: 10c0/9e2b5938b1cd9b6d7e3612bdc533afd4ac17b2fc646569e9a8abbf2eb48e5eb8e316bc38815a3ef6a1b456f4107f0d0f055a614ca613e75db6bf9ff4d72c1638
   languageName: node
   linkType: hard
 
@@ -12035,32 +10769,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"file-loader@npm:^6.2.0":
-  version: 6.2.0
-  resolution: "file-loader@npm:6.2.0"
-  dependencies:
-    loader-utils: "npm:^2.0.0"
-    schema-utils: "npm:^3.0.0"
-  peerDependencies:
-    webpack: ^4.0.0 || ^5.0.0
-  checksum: 10c0/e176a57c2037ab0f78e5755dbf293a6b7f0f8392350a120bd03cc2ce2525bea017458ba28fea14ca535ff1848055e86d1a3a216bdb2561ef33395b27260a1dd3
-  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
-
-"filename-regex@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "filename-regex@npm:2.0.1"
-  checksum: 10c0/c669fe758641e4830641a9df1d387f14080d96ddde0ef9525439c6d16f4492ea167109362ea69eedd0eef39ae2739586b71daf5f4dab0847d1d07a01a1190ab3
-  languageName: node
-  linkType: hard
-
 "filename-reserved-regex@npm:^2.0.0":
   version: 2.0.0
   resolution: "filename-reserved-regex@npm:2.0.0"
@@ -12079,26 +10787,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"filesize@npm:^8.0.6":
-  version: 8.0.7
-  resolution: "filesize@npm:8.0.7"
-  checksum: 10c0/82072d94816484df5365d4d5acbb2327a65dc49704c64e403e8c40d8acb7364de1cf1e65cb512c77a15d353870f73e4fed46dad5c6153d0618d9ce7a64d09cfc
-  languageName: node
-  linkType: hard
-
-"fill-range@npm:^2.1.0":
-  version: 2.2.4
-  resolution: "fill-range@npm:2.2.4"
-  dependencies:
-    is-number: "npm:^2.1.0"
-    isobject: "npm:^2.0.0"
-    randomatic: "npm:^3.0.0"
-    repeat-element: "npm:^1.1.2"
-    repeat-string: "npm:^1.5.2"
-  checksum: 10c0/1cfd1329311d778a844d5806bd06a5d297047e5ff352c45b4f9fadcda68eb272c8ef2196f1c44224f3fe66c672234453ce89aca94fb00122874bdb3978de5f71
-  languageName: node
-  linkType: hard
-
 "fill-range@npm:^4.0.0":
   version: 4.0.0
   resolution: "fill-range@npm:4.0.0"
@@ -12127,6 +10815,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"filter-obj@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "filter-obj@npm:5.1.0"
+  checksum: 10c0/716e8ad2bc352e206556b3e5695b3cdff8aab80c53ea4b00c96315bbf467b987df3640575100aef8b84e812cf5ea4251db4cd672bbe33b1e78afea88400c67dd
+  languageName: node
+  linkType: hard
+
 "finalhandler@npm:1.1.2":
   version: 1.1.2
   resolution: "finalhandler@npm:1.1.2"
@@ -12157,15 +10852,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"find-babel-config@npm:^2.1.1":
-  version: 2.1.2
-  resolution: "find-babel-config@npm:2.1.2"
-  dependencies:
-    json5: "npm:^2.2.3"
-  checksum: 10c0/c9151b23d636378eae11aa761b0af41d5f67d5479e3ebfca7b0ec7feef91723f14242d243342783b89e6c51fc5b4120086eacf5d8a1a335cf7bae4b0ac89f493
-  languageName: node
-  linkType: hard
-
 "find-cache-dir@npm:^2.0.0":
   version: 2.1.0
   resolution: "find-cache-dir@npm:2.1.0"
@@ -12247,23 +10933,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"find-yarn-workspace-root@npm:^2.0.0, 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
-
-"flat-cache@npm:^3.0.4":
-  version: 3.2.0
-  resolution: "flat-cache@npm:3.2.0"
+"flat-cache@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "flat-cache@npm:4.0.1"
   dependencies:
     flatted: "npm:^3.2.9"
-    keyv: "npm:^4.5.3"
-    rimraf: "npm:^3.0.2"
-  checksum: 10c0/b76f611bd5f5d68f7ae632e3ae503e678d205cf97a17c6ab5b12f6ca61188b5f1f7464503efae6dc18683ed8f0b41460beb48ac4b9ac63fe6201296a91ba2f75
+    keyv: "npm:^4.5.4"
+  checksum: 10c0/2c59d93e9faa2523e4fda6b4ada749bed432cfa28c8e251f33b25795e426a1c6dbada777afb1f74fcfff33934fdbdea921ee738fcc33e71adc9d6eca984a1cfc
   languageName: node
   linkType: hard
 
@@ -12283,6 +10959,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"flexsearch@npm:0.8.212":
+  version: 0.8.212
+  resolution: "flexsearch@npm:0.8.212"
+  checksum: 10c0/557a320fe028e694579d9f3f4cacd6acab6bcfa9101a63dbacf23ddbc872310a3370586a12007cf080ed2dfe3c99e6b21dd1e83697f2b4734722fbd43285d782
+  languageName: node
+  linkType: hard
+
 "flow-enums-runtime@npm:^0.0.6":
   version: 0.0.6
   resolution: "flow-enums-runtime@npm:0.0.6"
@@ -12290,28 +10973,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"flux@npm:^4.0.1":
-  version: 4.0.4
-  resolution: "flux@npm:4.0.4"
-  dependencies:
-    fbemitter: "npm:^3.0.0"
-    fbjs: "npm:^3.0.1"
-  peerDependencies:
-    react: ^15.0.2 || ^16.0.0 || ^17.0.0
-  checksum: 10c0/948bc01b97ff21babc8bfe5c40543d643ca126b71edd447a9ac051b05d20fd549a6bcc4afe043bcde56201782e688a5eaeda1bd8e3e58915641abdd5b3ea21e0
-  languageName: node
-  linkType: hard
-
-"follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.14.7":
-  version: 1.15.11
-  resolution: "follow-redirects@npm:1.15.11"
-  peerDependenciesMeta:
-    debug:
-      optional: true
-  checksum: 10c0/d301f430542520a54058d4aeeb453233c564aaccac835d29d15e050beb33f339ad67d9bddbce01739c5dc46a6716dbe3d9d0d5134b1ca203effa11a7ef092343
-  languageName: node
-  linkType: hard
-
 "fontfaceobserver@npm:^2.1.0":
   version: 2.3.0
   resolution: "fontfaceobserver@npm:2.3.0"
@@ -12328,22 +10989,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"for-in@npm:^1.0.1, for-in@npm:^1.0.2":
+"for-in@npm:^1.0.2":
   version: 1.0.2
   resolution: "for-in@npm:1.0.2"
   checksum: 10c0/42bb609d564b1dc340e1996868b67961257fd03a48d7fdafd4f5119530b87f962be6b4d5b7e3a3fc84c9854d149494b1d358e0b0ce9837e64c4c6603a49451d6
   languageName: node
   linkType: hard
 
-"for-own@npm:^0.1.4":
-  version: 0.1.5
-  resolution: "for-own@npm:0.1.5"
-  dependencies:
-    for-in: "npm:^1.0.1"
-  checksum: 10c0/3f82c2ea489ce2eb74c0eb8634d89b30a620801c2cb5f2a83d2d797fe6990d40c1aeac8968783e157b1404cf35bac9acb0a6c46065ec37b38a21b5d896e500bd
-  languageName: node
-  linkType: hard
-
 "foreground-child@npm:^2.0.0":
   version: 2.0.0
   resolution: "foreground-child@npm:2.0.0"
@@ -12354,37 +11006,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fork-ts-checker-webpack-plugin@npm:^6.5.0":
-  version: 6.5.3
-  resolution: "fork-ts-checker-webpack-plugin@npm:6.5.3"
-  dependencies:
-    "@babel/code-frame": "npm:^7.8.3"
-    "@types/json-schema": "npm:^7.0.5"
-    chalk: "npm:^4.1.0"
-    chokidar: "npm:^3.4.2"
-    cosmiconfig: "npm:^6.0.0"
-    deepmerge: "npm:^4.2.2"
-    fs-extra: "npm:^9.0.0"
-    glob: "npm:^7.1.6"
-    memfs: "npm:^3.1.2"
-    minimatch: "npm:^3.0.4"
-    schema-utils: "npm:2.7.0"
-    semver: "npm:^7.3.2"
-    tapable: "npm:^1.0.0"
-  peerDependencies:
-    eslint: ">= 6"
-    typescript: ">= 2.7"
-    vue-template-compiler: "*"
-    webpack: ">= 4"
-  peerDependenciesMeta:
-    eslint:
-      optional: true
-    vue-template-compiler:
-      optional: true
-  checksum: 10c0/0885ea75474de011d4068ca3e2d3ca6e4cd318f5cfa018e28ff8fef23ef3a1f1c130160ef192d3e5d31ef7b6fe9f8fb1d920eab5e9e449fb30ce5cc96647245c
-  languageName: node
-  linkType: hard
-
 "form-data@npm:3.0.0":
   version: 3.0.0
   resolution: "form-data@npm:3.0.0"
@@ -12403,13 +11024,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fraction.js@npm:^5.3.4":
-  version: 5.3.4
-  resolution: "fraction.js@npm:5.3.4"
-  checksum: 10c0/f90079fe9bfc665e0a07079938e8ff71115bce9462f17b32fc283f163b0540ec34dc33df8ed41bb56f028316b04361b9a9995b9ee9258617f8338e0b05c5f95a
-  languageName: node
-  linkType: hard
-
 "fragment-cache@npm:^0.2.1":
   version: 0.2.1
   resolution: "fragment-cache@npm:0.2.1"
@@ -12419,13 +11033,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"freeport-async@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "freeport-async@npm:2.0.0"
-  checksum: 10c0/421828d1a689695b6c8122d310fd8941af99ebe0b5793e3f8d49aa5923ce580b6c4dd6b7470d46983e60839c302f6c793a8541dbab80817396cdde2b04c83c90
-  languageName: node
-  linkType: hard
-
 "fresh@npm:~0.5.2":
   version: 0.5.2
   resolution: "fresh@npm:0.5.2"
@@ -12442,37 +11049,14 @@ __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:^10.0.0, fs-extra@npm:^10.1.0":
-  version: 10.1.0
-  resolution: "fs-extra@npm:10.1.0"
-  dependencies:
-    graceful-fs: "npm:^4.2.0"
-    jsonfile: "npm:^6.0.1"
-    universalify: "npm:^2.0.0"
-  checksum: 10c0/5f579466e7109719d162a9249abbeffe7f426eb133ea486e020b89bc6d67a741134076bf439983f2eb79276ceaf6bd7b7c1e43c3fd67fe889863e69072fb0a5e
-  languageName: node
-  linkType: hard
-
-"fs-extra@npm:^11.2.0":
-  version: 11.3.3
-  resolution: "fs-extra@npm:11.3.3"
+"fs-extra@npm:^11.3.4":
+  version: 11.3.5
+  resolution: "fs-extra@npm:11.3.5"
   dependencies:
     graceful-fs: "npm:^4.2.0"
     jsonfile: "npm:^6.0.1"
     universalify: "npm:^2.0.0"
-  checksum: 10c0/984924ff4104e3e9f351b658a864bf3b354b2c90429f57aec0acd12d92c4e6b762cbacacdffb4e745b280adce882e1f980c485d9f02c453f769ab4e7fc646ce3
+  checksum: 10c0/33e80bad6b5d17308faa197e5ede99ecba4b6f6cb4aa4645d52745476c75afc57665bdf39ec75b2ebb38b97b7110f634a8dcc0a546e248eb4de059275cf5ac90
   languageName: node
   linkType: hard
 
@@ -12487,7 +11071,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-extra@npm:^9.0.0, fs-extra@npm:^9.0.1":
+"fs-extra@npm:^9.0.1":
   version: 9.1.0
   resolution: "fs-extra@npm:9.1.0"
   dependencies:
@@ -12515,13 +11099,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-readdir-recursive@npm:^1.0.0":
-  version: 1.1.0
-  resolution: "fs-readdir-recursive@npm:1.1.0"
-  checksum: 10c0/7e190393952143e674b6d1ad4abcafa1b5d3e337fcc21b0cb051079a7140a54617a7df193d562ef9faf21bd7b2148a38601b3d5c16261fa76f278d88dc69989c
-  languageName: node
-  linkType: hard
-
 "fs.realpath@npm:^1.0.0":
   version: 1.0.0
   resolution: "fs.realpath@npm:1.0.0"
@@ -12529,18 +11106,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@npm:^1.0.0":
-  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.2":
   version: 2.3.3
   resolution: "fsevents@npm:2.3.3"
   dependencies:
@@ -12550,17 +11116,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@patch:fsevents@npm%3A^1.0.0#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.2#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"
   dependencies:
@@ -12604,7 +11160,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
@@ -12618,6 +11174,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-east-asian-width@npm:^1.0.0, get-east-asian-width@npm:^1.4.0":
+  version: 1.6.0
+  resolution: "get-east-asian-width@npm:1.6.0"
+  checksum: 10c0/7e72e9550fd49ca5b246f9af6bb2afc129c96412845ff6556b3274fd44817a381702ca17028efe9866b261a3d44254cbf21e6c90cf05b4b61675630af776d431
+  languageName: node
+  linkType: hard
+
 "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.1
   resolution: "get-intrinsic@npm:1.3.1"
@@ -12639,13 +11202,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-own-enumerable-property-symbols@npm:^3.0.0":
-  version: 3.0.2
-  resolution: "get-own-enumerable-property-symbols@npm:3.0.2"
-  checksum: 10c0/103999855f3d1718c631472437161d76962cbddcd95cc642a34c07bfb661ed41b6c09a9c669ccdff89ee965beb7126b80eec7b2101e20e31e9cc6c4725305e10
-  languageName: node
-  linkType: hard
-
 "get-package-type@npm:^0.1.0":
   version: 0.1.0
   resolution: "get-package-type@npm:0.1.0"
@@ -12684,13 +11240,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-stdin@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "get-stdin@npm:6.0.0"
-  checksum: 10c0/c8971d27ffb72e4aae0f18ba792d2bfec872f662e98e13b182d8611a36f38396b79f43563884f597e667c7bb9ab98f337ee958ae278af5fa7c310ca62845e56b
-  languageName: node
-  linkType: hard
-
 "get-stream@npm:^4.0.0, get-stream@npm:^4.1.0":
   version: 4.1.0
   resolution: "get-stream@npm:4.1.0"
@@ -12734,13 +11283,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"getenv@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "getenv@npm:1.0.0"
-  checksum: 10c0/9661c5996c7622e12eab1d23448474ae51dbec6f8862eed903ebaa864dcd332895441c23d962e3ff5c180a9e3dff6cb1f569a115e1447db4acb52af2d880d655
-  languageName: node
-  linkType: hard
-
 "getenv@npm:^2.0.0":
   version: 2.0.0
   resolution: "getenv@npm:2.0.0"
@@ -12813,33 +11355,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"github-slugger@npm:^1.4.0":
-  version: 1.5.0
-  resolution: "github-slugger@npm:1.5.0"
-  checksum: 10c0/116f99732925f939cbfd6f2e57db1aa7e111a460db0d103e3b3f2fce6909d44311663d4542350706cad806345b9892358cc3b153674f88eeae77f43380b3bfca
-  languageName: node
-  linkType: hard
-
-"glob-base@npm:^0.3.0":
-  version: 0.3.0
-  resolution: "glob-base@npm:0.3.0"
-  dependencies:
-    glob-parent: "npm:^2.0.0"
-    is-glob: "npm:^2.0.0"
-  checksum: 10c0/4ce785c1dac2ff1e4660c010fa43ed2f1b38993dfd004023a3e7080b20bc61f29fbfe5d265b7e64cc84096ecf44e8ca876c7c1aad8f1f995d4c0f33034f3ae8c
-  languageName: node
-  linkType: hard
-
-"glob-parent@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "glob-parent@npm:2.0.0"
-  dependencies:
-    is-glob: "npm:^2.0.0"
-  checksum: 10c0/b9d59dc532d47aaaa4841046ff631b325a707f738445300b83b7a1ee603dd060c041a378e8a195c887d479bb703685cee4725c8f54b8dacef65355375f57d32a
-  languageName: node
-  linkType: hard
-
-"glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2":
+"glob-parent@npm:^5.1.2":
   version: 5.1.2
   resolution: "glob-parent@npm:5.1.2"
   dependencies:
@@ -12848,7 +11364,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob-parent@npm:^6.0.1, glob-parent@npm:^6.0.2":
+"glob-parent@npm:^6.0.2":
   version: 6.0.2
   resolution: "glob-parent@npm:6.0.2"
   dependencies:
@@ -12875,7 +11391,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:^7.0.0, glob@npm:^7.0.3, glob@npm:^7.1.1, glob@npm:^7.1.2, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6":
+"glob@npm:^13.0.6":
+  version: 13.0.6
+  resolution: "glob@npm:13.0.6"
+  dependencies:
+    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.3, glob@npm:^7.1.4, glob@npm:^7.1.6":
   version: 7.2.3
   resolution: "glob@npm:7.2.3"
   dependencies:
@@ -12889,31 +11416,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@npm:^9.3.3":
-  version: 9.3.5
-  resolution: "glob@npm:9.3.5"
-  dependencies:
-    fs.realpath: "npm:^1.0.0"
-    minimatch: "npm:^8.0.2"
-    minipass: "npm:^4.2.4"
-    path-scurry: "npm:^1.6.1"
-  checksum: 10c0/2f6c2b9ee019ee21dc258ae97a88719614591e4c979cb4580b1b9df6f0f778a3cb38b4bdaf18dfa584637ea10f89a3c5f2533a5e449cf8741514ad18b0951f2e
-  languageName: node
-  linkType: hard
-
 "global-dirs@npm:^0.1.1":
   version: 0.1.1
   resolution: "global-dirs@npm:0.1.1"
@@ -12932,48 +11434,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"global-dirs@npm:^3.0.0":
-  version: 3.0.1
-  resolution: "global-dirs@npm:3.0.1"
-  dependencies:
-    ini: "npm:2.0.0"
-  checksum: 10c0/ef65e2241a47ff978f7006a641302bc7f4c03dfb98783d42bf7224c136e3a06df046e70ee3a010cf30214114755e46c9eb5eb1513838812fbbe0d92b14c25080
-  languageName: node
-  linkType: hard
-
-"global-modules@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "global-modules@npm:2.0.0"
-  dependencies:
-    global-prefix: "npm:^3.0.0"
-  checksum: 10c0/43b770fe24aa6028f4b9770ea583a47f39750be15cf6e2578f851e4ccc9e4fa674b8541928c0b09c21461ca0763f0d36e4068cec86c914b07fd6e388e66ba5b9
-  languageName: node
-  linkType: hard
-
-"global-prefix@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "global-prefix@npm:3.0.0"
-  dependencies:
-    ini: "npm:^1.3.5"
-    kind-of: "npm:^6.0.2"
-    which: "npm:^1.3.1"
-  checksum: 10c0/510f489fb68d1cc7060f276541709a0ee6d41356ef852de48f7906c648ac223082a1cc8fce86725ca6c0e032bcdc1189ae77b4744a624b29c34a9d0ece498269
-  languageName: node
-  linkType: hard
-
-"globals@npm:^13.19.0":
-  version: 13.24.0
-  resolution: "globals@npm:13.24.0"
-  dependencies:
-    type-fest: "npm:^0.20.2"
-  checksum: 10c0/d3c11aeea898eb83d5ec7a99508600fbe8f83d2cf00cbb77f873dbf2bcb39428eff1b538e4915c993d8a3b3473fa71eeebfe22c9bb3a3003d1e26b1f2c8a42cd
+"globals@npm:^14.0.0":
+  version: 14.0.0
+  resolution: "globals@npm:14.0.0"
+  checksum: 10c0/b96ff42620c9231ad468d4c58ff42afee7777ee1c963013ff8aabe095a451d0ceeb8dcd8ef4cbd64d2538cef45f787a78ba3a9574f4a634438963e334471302d
   languageName: node
   linkType: hard
 
-"globals@npm:^9.18.0":
-  version: 9.18.0
-  resolution: "globals@npm:9.18.0"
-  checksum: 10c0/5ab74cb67cf060a9fceede4a0f2babc4c2c0b90dbb13847d2659defdf2121c60035ef23823c8417ce8c11bdaa7b412396077f2b3d2a7dedab490a881a0a96754
+"globals@npm:^15.9.0":
+  version: 15.15.0
+  resolution: "globals@npm:15.15.0"
+  checksum: 10c0/f9ae80996392ca71316495a39bec88ac43ae3525a438b5626cd9d5ce9d5500d0a98a266409605f8cd7241c7acf57c354a48111ea02a767ba4f374b806d6861fe
   languageName: node
   linkType: hard
 
@@ -13001,57 +11472,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"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:
-    array-union: "npm:^2.1.0"
-    dir-glob: "npm:^3.0.1"
-    fast-glob: "npm:^3.2.9"
-    ignore: "npm:^5.2.0"
-    merge2: "npm:^1.4.1"
-    slash: "npm:^3.0.0"
-  checksum: 10c0/b39511b4afe4bd8a7aead3a27c4ade2b9968649abab0a6c28b1a90141b96ca68ca5db1302f7c7bd29eab66bf51e13916b8e0a3d0ac08f75e1e84a39b35691189
-  languageName: node
-  linkType: hard
-
-"globby@npm:^12.0.2":
-  version: 12.2.0
-  resolution: "globby@npm:12.2.0"
-  dependencies:
-    array-union: "npm:^3.0.1"
-    dir-glob: "npm:^3.0.1"
-    fast-glob: "npm:^3.2.7"
-    ignore: "npm:^5.1.9"
-    merge2: "npm:^1.4.1"
-    slash: "npm:^4.0.0"
-  checksum: 10c0/121fee62bb9a43a35a32731cda9540241003ef578f9cee5ad87b27d3020b94857ff62f8d82cb99dbeedf6f26981c9fa62509d873392642ceb37674f3d6ec4e52
-  languageName: node
-  linkType: hard
-
-"globby@npm:^13.1.1":
-  version: 13.2.2
-  resolution: "globby@npm:13.2.2"
-  dependencies:
-    dir-glob: "npm:^3.0.1"
-    fast-glob: "npm:^3.3.0"
-    ignore: "npm:^5.2.4"
-    merge2: "npm:^1.4.1"
-    slash: "npm:^4.0.0"
-  checksum: 10c0/a8d7cc7cbe5e1b2d0f81d467bbc5bc2eac35f74eaded3a6c85fc26d7acc8e6de22d396159db8a2fc340b8a342e74cac58de8f4aee74146d3d146921a76062664
-  languageName: node
-  linkType: hard
-
-"globby@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "globby@npm:6.1.0"
+"globby@npm:^14.0.2":
+  version: 14.1.0
+  resolution: "globby@npm:14.1.0"
   dependencies:
-    array-union: "npm:^1.0.1"
-    glob: "npm:^7.0.3"
-    object-assign: "npm:^4.0.1"
-    pify: "npm:^2.0.0"
-    pinkie-promise: "npm:^2.0.0"
-  checksum: 10c0/656ad1f0d02c6ef378c07589519ed3ec27fe988ea177195c05b8aff280320f3d67b91fa0baa6f7e49288f9bf1f92fc84f783a79ac3ed66278f3fa082e627ed84
+    "@sindresorhus/merge-streams": "npm:^2.1.0"
+    fast-glob: "npm:^3.3.3"
+    ignore: "npm:^7.0.3"
+    path-type: "npm:^6.0.0"
+    slash: "npm:^5.1.0"
+    unicorn-magic: "npm:^0.3.0"
+  checksum: 10c0/527a1063c5958255969620c6fa4444a2b2e9278caddd571d46dfbfa307cb15977afb746e84d682ba5b6c94fc081e8997f80ff05dd235441ba1cb16f86153e58e
   languageName: node
   linkType: hard
 
@@ -13100,55 +11531,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"graceful-fs@npm:^4.1.11, graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.3, graceful-fs@npm:^4.1.4, 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":
+"graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.3, 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
   languageName: node
   linkType: hard
 
-"grapheme-splitter@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "grapheme-splitter@npm:1.0.4"
-  checksum: 10c0/108415fb07ac913f17040dc336607772fcea68c7f495ef91887edddb0b0f5ff7bc1d1ab181b125ecb2f0505669ef12c9a178a3bbd2dd8e042d8c5f1d7c90331a
-  languageName: node
-  linkType: hard
-
-"graphemer@npm:^1.4.0":
-  version: 1.4.0
-  resolution: "graphemer@npm:1.4.0"
-  checksum: 10c0/e951259d8cd2e0d196c72ec711add7115d42eb9a8146c8eeda5b8d3ac91e5dd816b9cd68920726d9fd4490368e7ed86e9c423f40db87e2d8dfafa00fa17c3a31
-  languageName: node
-  linkType: hard
-
-"gray-matter@npm:^4.0.3":
-  version: 4.0.3
-  resolution: "gray-matter@npm:4.0.3"
-  dependencies:
-    js-yaml: "npm:^3.13.1"
-    kind-of: "npm:^6.0.2"
-    section-matter: "npm:^1.0.0"
-    strip-bom-string: "npm:^1.0.0"
-  checksum: 10c0/e38489906dad4f162ca01e0dcbdbed96d1a53740cef446b9bf76d80bec66fa799af07776a18077aee642346c5e1365ed95e4c91854a12bf40ba0d4fb43a625a6
-  languageName: node
-  linkType: hard
-
-"gzip-size@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "gzip-size@npm:6.0.0"
-  dependencies:
-    duplexer: "npm:^0.1.2"
-  checksum: 10c0/4ccb924626c82125897a997d1c84f2377846a6ef57fbee38f7c0e6b41387fba4d00422274440747b58008b5d60114bac2349c2908e9aba55188345281af40a3f
-  languageName: node
-  linkType: hard
-
-"handle-thing@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "handle-thing@npm:2.0.1"
-  checksum: 10c0/7ae34ba286a3434f1993ebd1cc9c9e6b6d8ea672182db28b1afc0a7119229552fa7031e3e5f3cd32a76430ece4e94b7da6f12af2eb39d6239a7693e4bd63a998
-  languageName: node
-  linkType: hard
-
 "handlebars@npm:^4.7.7":
   version: 4.7.8
   resolution: "handlebars@npm:4.7.8"
@@ -13174,15 +11563,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-ansi@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "has-ansi@npm:2.0.0"
-  dependencies:
-    ansi-regex: "npm:^2.0.0"
-  checksum: 10c0/f54e4887b9f8f3c4bfefd649c48825b3c093987c92c27880ee9898539e6f01aed261e82e73153c3f920fde0db5bf6ebd58deb498ed1debabcb4bc40113ccdf05
-  languageName: node
-  linkType: hard
-
 "has-bigints@npm:^1.0.2":
   version: 1.1.0
   resolution: "has-bigints@npm:1.1.0"
@@ -13307,21 +11687,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:^5.0.0":
   version: 5.0.3
   resolution: "hast-util-from-parse5@npm:5.0.3"
@@ -13349,10 +11714,44 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hast-util-is-element@npm:^1.0.0":
-  version: 1.1.0
-  resolution: "hast-util-is-element@npm:1.1.0"
-  checksum: 10c0/9f95b1e356af3d891a293c1e63560480cb9c2aa33c14e0da3abfaf76aa3f2de8e178643f8459b10e1e2d11a0bc4553c628b57e5afa607791073b61d456f77926
+"hast-util-from-parse5@npm:^8.0.0":
+  version: 8.0.3
+  resolution: "hast-util-from-parse5@npm:8.0.3"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+    "@types/unist": "npm:^3.0.0"
+    devlop: "npm:^1.0.0"
+    hastscript: "npm:^9.0.0"
+    property-information: "npm:^7.0.0"
+    vfile: "npm:^6.0.0"
+    vfile-location: "npm:^5.0.0"
+    web-namespaces: "npm:^2.0.0"
+  checksum: 10c0/40ace6c0ad43c26f721c7499fe408e639cde917b2350c9299635e6326559855896dae3c3ebf7440df54766b96c4276a7823e8f376a2b6a28b37b591f03412545
+  languageName: node
+  linkType: hard
+
+"hast-util-heading-rank@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "hast-util-heading-rank@npm:3.0.0"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+  checksum: 10c0/1879c84f629e73f1f13247ab349324355cd801363b44e3d46f763aa5c0ea3b42dcd47b46e5643a0502cf01a6b1fdb9208fd12852e44ca6c671b3e4bccf9369a1
+  languageName: node
+  linkType: hard
+
+"hast-util-is-element@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "hast-util-is-element@npm:1.1.0"
+  checksum: 10c0/9f95b1e356af3d891a293c1e63560480cb9c2aa33c14e0da3abfaf76aa3f2de8e178643f8459b10e1e2d11a0bc4553c628b57e5afa607791073b61d456f77926
+  languageName: node
+  linkType: hard
+
+"hast-util-is-element@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "hast-util-is-element@npm:3.0.0"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+  checksum: 10c0/f5361e4c9859c587ca8eb0d8343492f3077ccaa0f58a44cd09f35d5038f94d65152288dcd0c19336ef2c9491ec4d4e45fde2176b05293437021570aa0bc3613b
   languageName: node
   linkType: hard
 
@@ -13363,21 +11762,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hast-util-raw@npm:6.0.1":
-  version: 6.0.1
-  resolution: "hast-util-raw@npm:6.0.1"
+"hast-util-parse-selector@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "hast-util-parse-selector@npm:4.0.0"
   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
+    "@types/hast": "npm:^3.0.0"
+  checksum: 10c0/5e98168cb44470dc274aabf1a28317e4feb09b1eaf7a48bbaa8c1de1b43a89cd195cb1284e535698e658e3ec26ad91bc5e52c9563c36feb75abbc68aaf68fb9f
   languageName: node
   linkType: hard
 
@@ -13397,6 +11787,51 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hast-util-raw@npm:^9.0.0":
+  version: 9.1.0
+  resolution: "hast-util-raw@npm:9.1.0"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+    "@types/unist": "npm:^3.0.0"
+    "@ungap/structured-clone": "npm:^1.0.0"
+    hast-util-from-parse5: "npm:^8.0.0"
+    hast-util-to-parse5: "npm:^8.0.0"
+    html-void-elements: "npm:^3.0.0"
+    mdast-util-to-hast: "npm:^13.0.0"
+    parse5: "npm:^7.0.0"
+    unist-util-position: "npm:^5.0.0"
+    unist-util-visit: "npm:^5.0.0"
+    vfile: "npm:^6.0.0"
+    web-namespaces: "npm:^2.0.0"
+    zwitch: "npm:^2.0.0"
+  checksum: 10c0/d0d909d2aedecef6a06f0005cfae410d6475e6e182d768bde30c3af9fcbbe4f9beb0522bdc21d0679cb3c243c0df40385797ed255148d68b3d3f12e82d12aacc
+  languageName: node
+  linkType: hard
+
+"hast-util-to-estree@npm:^3.0.0":
+  version: 3.1.3
+  resolution: "hast-util-to-estree@npm:3.1.3"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    "@types/estree-jsx": "npm:^1.0.0"
+    "@types/hast": "npm:^3.0.0"
+    comma-separated-tokens: "npm:^2.0.0"
+    devlop: "npm:^1.0.0"
+    estree-util-attach-comments: "npm:^3.0.0"
+    estree-util-is-identifier-name: "npm:^3.0.0"
+    hast-util-whitespace: "npm:^3.0.0"
+    mdast-util-mdx-expression: "npm:^2.0.0"
+    mdast-util-mdx-jsx: "npm:^3.0.0"
+    mdast-util-mdxjs-esm: "npm:^2.0.0"
+    property-information: "npm:^7.0.0"
+    space-separated-tokens: "npm:^2.0.0"
+    style-to-js: "npm:^1.0.0"
+    unist-util-position: "npm:^5.0.0"
+    zwitch: "npm:^2.0.0"
+  checksum: 10c0/8e86c075319082c8a6304c5bcdf24ec02466074571e993f58bfa2cfd70850ef46d33b5c402208597a87fe0f02f1e620bda5958217efb1b7396c81c486373b75f
+  languageName: node
+  linkType: hard
+
 "hast-util-to-html@npm:^7.1.1, hast-util-to-html@npm:^7.1.2":
   version: 7.1.3
   resolution: "hast-util-to-html@npm:7.1.3"
@@ -13415,6 +11850,48 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hast-util-to-html@npm:^9.0.5":
+  version: 9.0.5
+  resolution: "hast-util-to-html@npm:9.0.5"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+    "@types/unist": "npm:^3.0.0"
+    ccount: "npm:^2.0.0"
+    comma-separated-tokens: "npm:^2.0.0"
+    hast-util-whitespace: "npm:^3.0.0"
+    html-void-elements: "npm:^3.0.0"
+    mdast-util-to-hast: "npm:^13.0.0"
+    property-information: "npm:^7.0.0"
+    space-separated-tokens: "npm:^2.0.0"
+    stringify-entities: "npm:^4.0.0"
+    zwitch: "npm:^2.0.4"
+  checksum: 10c0/b7a08c30bab4371fc9b4a620965c40b270e5ae7a8e94cf885f43b21705179e28c8e43b39c72885d1647965fb3738654e6962eb8b58b0c2a84271655b4d748836
+  languageName: node
+  linkType: hard
+
+"hast-util-to-jsx-runtime@npm:^2.0.0, hast-util-to-jsx-runtime@npm:^2.3.6":
+  version: 2.3.6
+  resolution: "hast-util-to-jsx-runtime@npm:2.3.6"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    "@types/hast": "npm:^3.0.0"
+    "@types/unist": "npm:^3.0.0"
+    comma-separated-tokens: "npm:^2.0.0"
+    devlop: "npm:^1.0.0"
+    estree-util-is-identifier-name: "npm:^3.0.0"
+    hast-util-whitespace: "npm:^3.0.0"
+    mdast-util-mdx-expression: "npm:^2.0.0"
+    mdast-util-mdx-jsx: "npm:^3.0.0"
+    mdast-util-mdxjs-esm: "npm:^2.0.0"
+    property-information: "npm:^7.0.0"
+    space-separated-tokens: "npm:^2.0.0"
+    style-to-js: "npm:^1.0.0"
+    unist-util-position: "npm:^5.0.0"
+    vfile-message: "npm:^4.0.0"
+  checksum: 10c0/27297e02848fe37ef219be04a26ce708d17278a175a807689e94a821dcffc88aa506d62c3a85beed1f9a8544f7211bdcbcde0528b7b456a57c2e342c3fd11056
+  languageName: node
+  linkType: hard
+
 "hast-util-to-parse5@npm:^5.0.0":
   version: 5.1.2
   resolution: "hast-util-to-parse5@npm:5.1.2"
@@ -13428,16 +11905,18 @@ __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"
+"hast-util-to-parse5@npm:^8.0.0":
+  version: 8.0.1
+  resolution: "hast-util-to-parse5@npm:8.0.1"
   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
+    "@types/hast": "npm:^3.0.0"
+    comma-separated-tokens: "npm:^2.0.0"
+    devlop: "npm:^1.0.0"
+    property-information: "npm:^7.0.0"
+    space-separated-tokens: "npm:^2.0.0"
+    web-namespaces: "npm:^2.0.0"
+    zwitch: "npm:^2.0.0"
+  checksum: 10c0/8e8a1817c7ff8906ac66e7201b1b8d19d9e1b705e695a6e71620270d498d982ec1ecc0e227bd517f723e91e7fdfb90ef75f9ae64d14b3b65239a7d5e1194d7dd
   languageName: node
   linkType: hard
 
@@ -13448,6 +11927,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hast-util-to-string@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "hast-util-to-string@npm:3.0.1"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+  checksum: 10c0/b5fa1912a6ba6131affae52a0f4394406c4c0d23c2b0307f1d69988f1030c7bb830289303e67c5ad8f674f5f23a454c1dcd492c39e45a22c1f46d3c9bce5bd0c
+  languageName: node
+  linkType: hard
+
 "hast-util-whitespace@npm:^1.0.0":
   version: 1.0.4
   resolution: "hast-util-whitespace@npm:1.0.4"
@@ -13455,6 +11943,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hast-util-whitespace@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "hast-util-whitespace@npm:3.0.0"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+  checksum: 10c0/b898bc9fe27884b272580d15260b6bbdabe239973a147e97fa98c45fa0ffec967a481aaa42291ec34fb56530dc2d484d473d7e2bae79f39c83f3762307edfea8
+  languageName: node
+  linkType: hard
+
 "hastscript@npm:^5.0.0":
   version: 5.1.2
   resolution: "hastscript@npm:5.1.2"
@@ -13480,12 +11977,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"he@npm:1.2.0, he@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "he@npm:1.2.0"
-  bin:
-    he: bin/he
-  checksum: 10c0/a27d478befe3c8192f006cdd0639a66798979dfa6e2125c6ac582a19a5ebfec62ad83e8382e6036170d873f46e4536a7e795bf8b95bf7c247f4cc0825ccc8c17
+"hastscript@npm:^9.0.0":
+  version: 9.0.1
+  resolution: "hastscript@npm:9.0.1"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+    comma-separated-tokens: "npm:^2.0.0"
+    hast-util-parse-selector: "npm:^4.0.0"
+    property-information: "npm:^7.0.0"
+    space-separated-tokens: "npm:^2.0.0"
+  checksum: 10c0/18dc8064e5c3a7a2ae862978e626b97a254e1c8a67ee9d0c9f06d373bba155ed805fc5b5ce21b990fb7bc174624889e5e1ce1cade264f1b1d58b48f994bc85ce
   languageName: node
   linkType: hard
 
@@ -13499,56 +12000,58 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hermes-compiler@npm:0.0.0":
-  version: 0.0.0
-  resolution: "hermes-compiler@npm:0.0.0"
-  checksum: 10c0/8a653925c3ab65c4ae568a9c51267266c5b5e20c297df101e6f5897b8606f5f23d3af1a7b7d128d23cd7cde933e69c96826f1677fcf7fd23135d24bdc7553a50
+"hermes-compiler@npm:250829098.0.10":
+  version: 250829098.0.10
+  resolution: "hermes-compiler@npm:250829098.0.10"
+  checksum: 10c0/ccf02f842dc0257deb45cf508dd9183b163fbb1db3b37aca25943cc4667193722dece99c7fba94d89666560b74210873ab139d741def1863bd440ff515113b27
+  languageName: node
+  linkType: hard
+
+"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-estree@npm:0.29.1":
-  version: 0.29.1
-  resolution: "hermes-estree@npm:0.29.1"
-  checksum: 10c0/e6b01f79ba708697d61a74b871d5ebae5f863c6d782657d8e2d2256eb838f1eb86ff9c34773a81d9cc69e54be3a5059c686e0ab54a4afba903b40dde92dd0ccb
+"hermes-estree@npm:0.34.0":
+  version: 0.34.0
+  resolution: "hermes-estree@npm:0.34.0"
+  checksum: 10c0/bd4ad520838c69aa79887230a2030fe1e07d0826389112e2c23a8b18494f9f2fa6b1639f413ad978f3468daea66903869188481f9500aaa1fb79ed6266afb744
   languageName: node
   linkType: hard
 
-"hermes-estree@npm:0.32.0":
-  version: 0.32.0
-  resolution: "hermes-estree@npm:0.32.0"
-  checksum: 10c0/3b67d1fe44336240ef7f9c40ecbf363279ba263d51efe120570c3862cc109e652fc09aebddfe6b73d0f0246610bee130e4064c359f1f4cbf002bdb1d99717ef2
+"hermes-estree@npm:0.35.0":
+  version: 0.35.0
+  resolution: "hermes-estree@npm:0.35.0"
+  checksum: 10c0/a88c9dc63b8b3679b1aeb43e72e977597096c1bd7d59978c952f1d6df6d1a517c4a817c70b1b701854996b485adfa66c2fc7f80871029a7f0c04306f6717b59a
   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"
+"hermes-parser@npm:0.33.3, hermes-parser@npm:^0.33.3":
+  version: 0.33.3
+  resolution: "hermes-parser@npm:0.33.3"
   dependencies:
-    hermes-estree: "npm:0.29.1"
-  checksum: 10c0/7f40d9bdfb5acaa700f333a24c644b17f5f8d0e823b1e7a9fb6dcf253a54d54716ae63c74effa023688ee4f09013c80188c40d601570fee256a44954e04c2926
+    hermes-estree: "npm:0.33.3"
+  checksum: 10c0/f7d69de54c77321d8481e37a323bbac01d180ec982275ef8925ceaaf7e501fc3062593e84cf5da50852f36daffb34d0f5d6cbbef079fd0125a7b91c1fe84f225
   languageName: node
   linkType: hard
 
-"hermes-parser@npm:0.32.0":
-  version: 0.32.0
-  resolution: "hermes-parser@npm:0.32.0"
+"hermes-parser@npm:0.34.0":
+  version: 0.34.0
+  resolution: "hermes-parser@npm:0.34.0"
   dependencies:
-    hermes-estree: "npm:0.32.0"
-  checksum: 10c0/5902d2c5d347c0629fba07a47eaad5569590ac69bc8bfb2e454e08d2dfbe1ebd989d88518dca2cba64061689b5eac5960ae6bd15a4a66600bbf377498a3234b7
+    hermes-estree: "npm:0.34.0"
+  checksum: 10c0/e20657a21ebc3187f53780f5f2c5dd7434f4371979d05b016ff06306b6db63f9d2575ee60c63e9e7d831dd0f592542193a50a6e8397678d4a312fc5373bbe382
   languageName: node
   linkType: hard
 
-"history@npm:^4.9.0":
-  version: 4.10.1
-  resolution: "history@npm:4.10.1"
+"hermes-parser@npm:0.35.0":
+  version: 0.35.0
+  resolution: "hermes-parser@npm:0.35.0"
   dependencies:
-    "@babel/runtime": "npm:^7.1.2"
-    loose-envify: "npm:^1.2.0"
-    resolve-pathname: "npm:^3.0.0"
-    tiny-invariant: "npm:^1.0.2"
-    tiny-warning: "npm:^1.0.0"
-    value-equal: "npm:^1.0.1"
-  checksum: 10c0/35377694e4f10f2cf056a9cb1a8ee083e04e4b4717a63baeee4afd565658a62c7e73700bf9e82aa53dbe1ec94e0a25a83c080d63bad8ee6b274a98d2fbc5ed4c
+    hermes-estree: "npm:0.35.0"
+  checksum: 10c0/49d98093a2094758db5b536627c6cf5146b140f66e63143acf471c62f1d3fd8bd6ae10a33f2372f72e3653deda5d4615c6dae89d01248849440916209901fc4a
   languageName: node
   linkType: hard
 
@@ -13561,7 +12064,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0":
+"hoist-non-react-statics@npm:^3.3.0":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
   dependencies:
@@ -13570,13 +12073,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"home-or-tmp@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "home-or-tmp@npm:2.0.0"
-  dependencies:
-    os-homedir: "npm:^1.0.0"
-    os-tmpdir: "npm:^1.0.1"
-  checksum: 10c0/a0e0d26db09dc0b3245f52a9159d3e970e628ddc22d69842e8413ea42f81d5a29c3808f9b08ea4d48db084e4e693193cc238c114775aa92d753bf95a9daa10fb
+"hookable@npm:^6.0.1":
+  version: 6.1.1
+  resolution: "hookable@npm:6.1.1"
+  checksum: 10c0/bb46cd9ffc0a997af21febd97835da4e59a6989adec73dc3c215fcc44c7ac01de4781f251c3d420bf45862d2592a695f5f0de095b6f5df52db8afb5166938212
   languageName: node
   linkType: hard
 
@@ -13605,56 +12105,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hpack.js@npm:^2.1.6":
-  version: 2.1.6
-  resolution: "hpack.js@npm:2.1.6"
-  dependencies:
-    inherits: "npm:^2.0.1"
-    obuf: "npm:^1.0.0"
-    readable-stream: "npm:^2.0.1"
-    wbuf: "npm:^1.1.0"
-  checksum: 10c0/55b9e824430bab82a19d079cb6e33042d7d0640325678c9917fcc020c61d8a08ca671b6c942c7f0aae9bb6e4b67ffb50734a72f9e21d66407c3138c1983b70f0
-  languageName: node
-  linkType: hard
-
-"html-entities@npm:^2.1.0, html-entities@npm:^2.3.2":
+"html-entities@npm:^2.1.0":
   version: 2.6.0
   resolution: "html-entities@npm:2.6.0"
   checksum: 10c0/7c8b15d9ea0cd00dc9279f61bab002ba6ca8a7a0f3c36ed2db3530a67a9621c017830d1d2c1c65beb9b8e3436ea663e9cf8b230472e0e413359399413b27c8b7
   languageName: node
   linkType: hard
 
-"html-escaper@npm:^2.0.0, html-escaper@npm:^2.0.2":
+"html-escaper@npm:^2.0.0":
   version: 2.0.2
   resolution: "html-escaper@npm:2.0.2"
   checksum: 10c0/208e8a12de1a6569edbb14544f4567e6ce8ecc30b9394fcaa4e7bb1e60c12a7c9a1ed27e31290817157e8626f3a4f29e76c8747030822eb84a6abb15c255f0a0
   languageName: node
   linkType: hard
 
-"html-minifier-terser@npm:^6.0.2, html-minifier-terser@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "html-minifier-terser@npm:6.1.0"
-  dependencies:
-    camel-case: "npm:^4.1.2"
-    clean-css: "npm:^5.2.2"
-    commander: "npm:^8.3.0"
-    he: "npm:^1.2.0"
-    param-case: "npm:^3.0.4"
-    relateurl: "npm:^0.2.7"
-    terser: "npm:^5.10.0"
-  bin:
-    html-minifier-terser: cli.js
-  checksum: 10c0/1aa4e4f01cf7149e3ac5ea84fb7a1adab86da40d38d77a6fff42852b5ee3daccb78b615df97264e3a6a5c33e57f0c77f471d607ca1e1debd1dab9b58286f4b5a
-  languageName: node
-  linkType: hard
-
-"html-tags@npm:^3.2.0":
-  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"
@@ -13662,36 +12126,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"html-webpack-plugin@npm:^5.5.0":
-  version: 5.6.5
-  resolution: "html-webpack-plugin@npm:5.6.5"
-  dependencies:
-    "@types/html-minifier-terser": "npm:^6.0.0"
-    html-minifier-terser: "npm:^6.0.2"
-    lodash: "npm:^4.17.21"
-    pretty-error: "npm:^4.0.0"
-    tapable: "npm:^2.0.0"
-  peerDependencies:
-    "@rspack/core": 0.x || 1.x
-    webpack: ^5.20.0
-  peerDependenciesMeta:
-    "@rspack/core":
-      optional: true
-    webpack:
-      optional: true
-  checksum: 10c0/4ae0ae48fec6337e4eb055e730e46340172ec1967bd383d897d03cb3c4e385a8128e8d5179c4658536b00e432c2d3f026d97eb5fdb4cf9dc710498d2e871b84e
-  languageName: node
-  linkType: hard
-
-"htmlparser2@npm:^10.0.0":
-  version: 10.0.0
-  resolution: "htmlparser2@npm:10.0.0"
-  dependencies:
-    domelementtype: "npm:^2.3.0"
-    domhandler: "npm:^5.0.3"
-    domutils: "npm:^3.2.1"
-    entities: "npm:^6.0.0"
-  checksum: 10c0/47cfa37e529c86a7ba9a1e0e6f951ad26ef8ca5af898ab6e8916fa02c0264c1453b4a65f28b7b8a7f9d0d29b5a70abead8203bf8b3f07bc69407e85e7d9a68e4
+"html-void-elements@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "html-void-elements@npm:3.0.0"
+  checksum: 10c0/a8b9ec5db23b7c8053876dad73a0336183e6162bf6d2677376d8b38d654fdc59ba74fdd12f8812688f7db6fad451210c91b300e472afc0909224e0a44c8610d2
   languageName: node
   linkType: hard
 
@@ -13707,18 +12145,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"htmlparser2@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "htmlparser2@npm:6.1.0"
-  dependencies:
-    domelementtype: "npm:^2.0.1"
-    domhandler: "npm:^4.0.0"
-    domutils: "npm:^2.5.2"
-    entities: "npm:^2.0.0"
-  checksum: 10c0/3058499c95634f04dc66be8c2e0927cd86799413b2d6989d8ae542ca4dbf5fa948695d02c27d573acf44843af977aec6d9a7bdd0f6faa6b2d99e2a729b2a31b6
-  languageName: node
-  linkType: hard
-
 "http-cache-semantics@npm:^4.0.0, http-cache-semantics@npm:^4.1.1":
   version: 4.2.0
   resolution: "http-cache-semantics@npm:4.2.0"
@@ -13726,25 +12152,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"http-deceiver@npm:^1.2.7":
-  version: 1.2.7
-  resolution: "http-deceiver@npm:1.2.7"
-  checksum: 10c0/8bb9b716f5fc55f54a451da7f49b9c695c3e45498a789634daec26b61e4add7c85613a4a9e53726c39d09de7a163891ecd6eb5809adb64500a840fd86fe81d03
-  languageName: node
-  linkType: hard
-
-"http-errors@npm:~1.6.2":
-  version: 1.6.3
-  resolution: "http-errors@npm:1.6.3"
-  dependencies:
-    depd: "npm:~1.1.2"
-    inherits: "npm:2.0.3"
-    setprototypeof: "npm:1.1.0"
-    statuses: "npm:>= 1.4.0 < 2"
-  checksum: 10c0/17ec4046ee974477778bfdd525936c254b872054703ec2caa4d6f099566b8adade636ae6aeeacb39302c5cd6e28fb407ebd937f500f5010d0b6850750414ff78
-  languageName: node
-  linkType: hard
-
 "http-errors@npm:~2.0.0, http-errors@npm:~2.0.1":
   version: 2.0.1
   resolution: "http-errors@npm:2.0.1"
@@ -13758,13 +12165,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"http-parser-js@npm:>=0.5.1":
-  version: 0.5.10
-  resolution: "http-parser-js@npm:0.5.10"
-  checksum: 10c0/8bbcf1832a8d70b2bd515270112116333add88738a2cc05bfb94ba6bde3be4b33efee5611584113818d2bcf654fdc335b652503be5a6b4c0b95e46f214187d93
-  languageName: node
-  linkType: hard
-
 "http-proxy-agent@npm:^7.0.0":
   version: 7.0.2
   resolution: "http-proxy-agent@npm:7.0.2"
@@ -13775,35 +12175,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"http-proxy-middleware@npm:^2.0.3":
-  version: 2.0.9
-  resolution: "http-proxy-middleware@npm:2.0.9"
-  dependencies:
-    "@types/http-proxy": "npm:^1.17.8"
-    http-proxy: "npm:^1.18.1"
-    is-glob: "npm:^4.0.1"
-    is-plain-obj: "npm:^3.0.0"
-    micromatch: "npm:^4.0.2"
-  peerDependencies:
-    "@types/express": ^4.17.13
-  peerDependenciesMeta:
-    "@types/express":
-      optional: true
-  checksum: 10c0/8e9032af625f7c9f2f0d318f6cdb14eb725cc16ffe7b4ccccea25cf591fa819bb7c3bb579e0b543e0ae9c73059b505a6d728290c757bff27bae526a6ed11c05e
-  languageName: node
-  linkType: hard
-
-"http-proxy@npm:^1.18.1":
-  version: 1.18.1
-  resolution: "http-proxy@npm:1.18.1"
-  dependencies:
-    eventemitter3: "npm:^4.0.0"
-    follow-redirects: "npm:^1.0.0"
-    requires-port: "npm:^1.0.0"
-  checksum: 10c0/148dfa700a03fb421e383aaaf88ac1d94521dfc34072f6c59770528c65250983c2e4ec996f2f03aa9f3fe46cd1270a593126068319311e3e8d9e610a37533e94
-  languageName: node
-  linkType: hard
-
 "http2-wrapper@npm:^1.0.0-beta.5.2":
   version: 1.0.3
   resolution: "http2-wrapper@npm:1.0.3"
@@ -13838,26 +12209,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"husky@npm:^1.3.1":
-  version: 1.3.1
-  resolution: "husky@npm:1.3.1"
-  dependencies:
-    cosmiconfig: "npm:^5.0.7"
-    execa: "npm:^1.0.0"
-    find-up: "npm:^3.0.0"
-    get-stdin: "npm:^6.0.0"
-    is-ci: "npm:^2.0.0"
-    pkg-dir: "npm:^3.0.0"
-    please-upgrade-node: "npm:^3.1.1"
-    read-pkg: "npm:^4.0.1"
-    run-node: "npm:^1.0.0"
-    slash: "npm:^2.0.0"
-  bin:
-    husky-upgrade: ./lib/upgrader/bin.js
-  checksum: 10c0/5151906792ef9421536db0a23f922c6f8cb01872a75f0e9a82b22647202350f3791eaf9036cbf68ba911a4c2f3bc601b7507141bd6d9e28ba3222bef8b2679ad
-  languageName: node
-  linkType: hard
-
 "hyphenate-style-name@npm:^1.0.3":
   version: 1.1.0
   resolution: "hyphenate-style-name@npm:1.1.0"
@@ -13865,15 +12216,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iconv-lite@npm:0.6.3, iconv-lite@npm:^0.6.2, iconv-lite@npm:^0.6.3":
-  version: 0.6.3
-  resolution: "iconv-lite@npm:0.6.3"
-  dependencies:
-    safer-buffer: "npm:>= 2.1.2 < 3.0.0"
-  checksum: 10c0/98102bc66b33fcf5ac044099d1257ba0b7ad5e3ccd3221f34dd508ab4070edff183276221684e1e0555b145fce0850c9f7d2b60a9fcac50fbb4ea0d6e845a3b1
-  languageName: node
-  linkType: hard
-
 "iconv-lite@npm:^0.4.24, iconv-lite@npm:~0.4.24":
   version: 0.4.24
   resolution: "iconv-lite@npm:0.4.24"
@@ -13883,6 +12225,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"iconv-lite@npm:^0.6.2":
+  version: 0.6.3
+  resolution: "iconv-lite@npm:0.6.3"
+  dependencies:
+    safer-buffer: "npm:>= 2.1.2 < 3.0.0"
+  checksum: 10c0/98102bc66b33fcf5ac044099d1257ba0b7ad5e3ccd3221f34dd508ab4070edff183276221684e1e0555b145fce0850c9f7d2b60a9fcac50fbb4ea0d6e845a3b1
+  languageName: node
+  linkType: hard
+
 "icss-utils@npm:^5.0.0, icss-utils@npm:^5.1.0":
   version: 5.1.0
   resolution: "icss-utils@npm:5.1.0"
@@ -13906,14 +12257,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ignore@npm:^5.1.4, ignore@npm:^5.1.9, ignore@npm:^5.2.0, ignore@npm:^5.2.4, ignore@npm:^5.3.1":
+"ignore@npm:^5.1.4, ignore@npm:^5.2.0, ignore@npm:^5.3.1":
   version: 5.3.2
   resolution: "ignore@npm:5.3.2"
   checksum: 10c0/f9f652c957983634ded1e7f02da3b559a0d4cc210fca3792cb67f1b153623c9c42efdc1c4121af171e295444459fc4a9201101fb041b1104a3c000bccb188337
   languageName: node
   linkType: hard
 
-"image-size@npm:^1.0.1, image-size@npm:^1.0.2":
+"ignore@npm:^7.0.3, ignore@npm:^7.0.5":
+  version: 7.0.5
+  resolution: "ignore@npm:7.0.5"
+  checksum: 10c0/ae00db89fe873064a093b8999fe4cc284b13ef2a178636211842cceb650b9c3e390d3339191acb145d81ed5379d2074840cf0c33a20bdbd6f32821f79eb4ad5d
+  languageName: node
+  linkType: hard
+
+"image-size@npm:^1.0.2":
   version: 1.2.1
   resolution: "image-size@npm:1.2.1"
   dependencies:
@@ -13924,20 +12282,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"immediate@npm:^3.2.3":
-  version: 3.3.0
-  resolution: "immediate@npm:3.3.0"
-  checksum: 10c0/40eab095d5944ad79af054700beee97000271fde8743720932d8eb41ccbf2cb8c855ff95b128cf9a7fec523a4f11ee2e392b9f2fa6456b055b1160f1b4ad3e3b
-  languageName: node
-  linkType: hard
-
-"immer@npm:^9.0.7":
-  version: 9.0.21
-  resolution: "immer@npm:9.0.21"
-  checksum: 10c0/03ea3ed5d4d72e8bd428df4a38ad7e483ea8308e9a113d3b42e0ea2cc0cc38340eb0a6aca69592abbbf047c685dbda04e3d34bf2ff438ab57339ed0a34cc0a05
-  languageName: node
-  linkType: hard
-
 "import-cwd@npm:3.0.0":
   version: 3.0.0
   resolution: "import-cwd@npm:3.0.0"
@@ -13957,7 +12301,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"import-fresh@npm:^3.0.0, import-fresh@npm:^3.1.0, import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0":
+"import-fresh@npm:^3.0.0, import-fresh@npm:^3.2.1":
   version: 3.3.1
   resolution: "import-fresh@npm:3.3.1"
   dependencies:
@@ -14016,13 +12360,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"infima@npm:0.2.0-alpha.43":
-  version: 0.2.0-alpha.43
-  resolution: "infima@npm:0.2.0-alpha.43"
-  checksum: 10c0/d248958713a97e1c9f73ace27ceff726ba86a9b534efb0ebdec3e72b785d8edb36db922e38ce09bbeb98a17b657e61357f22edc3a58f02ad51b7ae2ebd96e4e4
-  languageName: node
-  linkType: hard
-
 "inflight@npm:^1.0.4":
   version: 1.0.6
   resolution: "inflight@npm:1.0.6"
@@ -14033,20 +12370,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"inherits@npm:2, inherits@npm:^2.0.0, inherits@npm:^2.0.1, inherits@npm:^2.0.3, inherits@npm:^2.0.4, inherits@npm:~2.0.3, inherits@npm:~2.0.4":
+"inherits@npm:2, inherits@npm:^2.0.0, inherits@npm:^2.0.3, inherits@npm:^2.0.4, 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.3":
-  version: 2.0.3
-  resolution: "inherits@npm:2.0.3"
-  checksum: 10c0/6e56402373149ea076a434072671f9982f5fad030c7662be0332122fe6c0fa490acb3cc1010d90b6eff8d640b1167d77674add52dfd1bb85d545cf29e80e73e7
-  languageName: node
-  linkType: hard
-
 "ini@npm:1.3.7":
   version: 1.3.7
   resolution: "ini@npm:1.3.7"
@@ -14054,14 +12384,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ini@npm:2.0.0":
-  version: 2.0.0
-  resolution: "ini@npm:2.0.0"
-  checksum: 10c0/2e0c8f386369139029da87819438b20a1ff3fe58372d93fb1a86e9d9344125ace3a806b8ec4eb160a46e64cbc422fe68251869441676af49b7fc441af2389c25
-  languageName: node
-  linkType: hard
-
-"ini@npm:^1.3.2, ini@npm:^1.3.4, ini@npm:^1.3.5, ini@npm:~1.3.0":
+"ini@npm:^1.3.2, ini@npm:^1.3.4, ini@npm:~1.3.0":
   version: 1.3.8
   resolution: "ini@npm:1.3.8"
   checksum: 10c0/ec93838d2328b619532e4f1ff05df7909760b6f66d9c9e2ded11e5c1897d6f2f9980c54dd638f88654b00919ce31e827040631eab0a3969e4d1abefa0719516a
@@ -14075,13 +12398,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"inline-style-prefixer@npm:^6.0.1":
-  version: 6.0.4
-  resolution: "inline-style-prefixer@npm:6.0.4"
-  dependencies:
-    css-in-js-utils: "npm:^3.1.0"
-    fast-loops: "npm:^1.1.3"
-  checksum: 10c0/d3d42bf0c48d621ea4bcfb077b5d370b106995422300a3a472674f96c9b489d96b4aac6f29dea3bb26ff2dfd7293e4752098bc2b53407769eafdb66c6c4c1764
+"inline-style-parser@npm:0.2.7":
+  version: 0.2.7
+  resolution: "inline-style-parser@npm:0.2.7"
+  checksum: 10c0/d884d76f84959517430ae6c22f0bda59bb3f58f539f99aac75a8d786199ec594ed648c6ab4640531f9fc244b0ed5cd8c458078e592d016ef06de793beb1debff
   languageName: node
   linkType: hard
 
@@ -14133,7 +12453,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"invariant@npm:^2.2.2, invariant@npm:^2.2.4":
+"invariant@npm:^2.2.4":
   version: 2.2.4
   resolution: "invariant@npm:2.2.4"
   dependencies:
@@ -14156,20 +12476,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ipaddr.js@npm:^2.0.1":
-  version: 2.3.0
-  resolution: "ipaddr.js@npm:2.3.0"
-  checksum: 10c0/084bab99e2f6875d7a62adc3325e1c64b038a12c9521e35fb967b5e263a8b3afb1b8884dd77c276092331f5d63298b767491e10997ef147c62da01b143780bbd
-  languageName: node
-  linkType: hard
-
-"is-absolute@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "is-absolute@npm:1.0.0"
-  dependencies:
-    is-relative: "npm:^1.0.0"
-    is-windows: "npm:^1.0.1"
-  checksum: 10c0/422302ce879d4f3ca6848499b6f3ddcc8fd2dc9f3e9cad3f6bcedff58cdfbbbd7f4c28600fffa7c59a858f1b15c27fb6cfe1d5275e58a36d2bf098a44ef5abc4
+"is-absolute-url@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "is-absolute-url@npm:4.0.1"
+  checksum: 10c0/6f8f603945bd9f2c6031758bbc12352fc647bd5d807cad10d96cc6300fd0e15240cc091521a61db767e4ec0bacff257b4f1015fd5249c147bbb4a4497356c72e
   languageName: node
   linkType: hard
 
@@ -14182,13 +12492,20 @@ __metadata:
   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
   languageName: node
   linkType: hard
 
+"is-alphabetical@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-alphabetical@npm:2.0.1"
+  checksum: 10c0/932367456f17237533fd1fc9fe179df77957271020b83ea31da50e5cc472d35ef6b5fb8147453274ffd251134472ce24eb6f8d8398d96dee98237cdb81a6c9a7
+  languageName: node
+  linkType: hard
+
 "is-alphanumerical@npm:^1.0.0":
   version: 1.0.4
   resolution: "is-alphanumerical@npm:1.0.4"
@@ -14199,6 +12516,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-alphanumerical@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-alphanumerical@npm:2.0.1"
+  dependencies:
+    is-alphabetical: "npm:^2.0.0"
+    is-decimal: "npm:^2.0.0"
+  checksum: 10c0/4b35c42b18e40d41378293f82a3ecd9de77049b476f748db5697c297f686e1e05b072a6aaae2d16f54d2a57f85b00cbbe755c75f6d583d1c77d6657bd0feb5a2
+  languageName: node
+  linkType: hard
+
 "is-array-buffer@npm:^3.0.4, is-array-buffer@npm:^3.0.5":
   version: 3.0.5
   resolution: "is-array-buffer@npm:3.0.5"
@@ -14246,24 +12573,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"
-  dependencies:
-    binary-extensions: "npm:^2.0.0"
-  checksum: 10c0/a16eaee59ae2b315ba36fad5c5dcaf8e49c3e27318f8ab8fa3cdb8772bf559c8d1ba750a589c2ccb096113bb64497084361a25960899cb6172a6925ab6123d38
-  languageName: node
-  linkType: hard
-
 "is-boolean-object@npm:^1.2.1":
   version: 1.2.2
   resolution: "is-boolean-object@npm:1.2.2"
@@ -14352,6 +12661,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-decimal@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-decimal@npm:2.0.1"
+  checksum: 10c0/8085dd66f7d82f9de818fba48b9e9c0429cb4291824e6c5f2622e96b9680b54a07a624cfc663b24148b8e853c62a1c987cfe8b0b5a13f5156991afaf6736e334
+  languageName: node
+  linkType: hard
+
 "is-descriptor@npm:^0.1.0":
   version: 0.1.7
   resolution: "is-descriptor@npm:0.1.7"
@@ -14379,7 +12695,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-docker@npm:^2.0.0, is-docker@npm:^2.1.1":
+"is-docker@npm:^2.0.0":
   version: 2.2.1
   resolution: "is-docker@npm:2.2.1"
   bin:
@@ -14388,22 +12704,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-dotfile@npm:^1.0.0":
-  version: 1.0.3
-  resolution: "is-dotfile@npm:1.0.3"
-  checksum: 10c0/aa6bb345aa06555f46eedd491bdd039b95d3fa80b899ee7d6b30628e309d705d403e445fd8a126ff70962adc1252171dbe0d72884afa323fb3c817387faf10ed
-  languageName: node
-  linkType: hard
-
-"is-equal-shallow@npm:^0.1.3":
-  version: 0.1.3
-  resolution: "is-equal-shallow@npm:0.1.3"
-  dependencies:
-    is-primitive: "npm:^2.0.0"
-  checksum: 10c0/ae623698cdfeeec0688b2e6128d76cabe1cc5957d533bf7f7596caf3f2993d4c50a20c97420e60a0d58745fc4b2709dfb62e653e054cf948c5834615b715f05f
-  languageName: node
-  linkType: hard
-
 "is-extendable@npm:^0.1.0, is-extendable@npm:^0.1.1":
   version: 0.1.1
   resolution: "is-extendable@npm:0.1.1"
@@ -14420,13 +12720,6 @@ __metadata:
   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.1":
   version: 2.1.1
   resolution: "is-extglob@npm:2.1.1"
@@ -14443,13 +12736,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"
@@ -14484,36 +12770,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-git-dirty@npm:^2.0.1":
-  version: 2.0.2
-  resolution: "is-git-dirty@npm:2.0.2"
-  dependencies:
-    execa: "npm:^4.0.3"
-    is-git-repository: "npm:^2.0.0"
-  checksum: 10c0/e7c223fb26416af52e0f3aba97b0147394fd96314d0a620cc4b44543538d62951ebaf049919a7f5df9bab270679dfde277b848d087a2733e00ca8481ee2fe984
-  languageName: node
-  linkType: hard
-
-"is-git-repository@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "is-git-repository@npm:2.0.0"
-  dependencies:
-    execa: "npm:^4.0.3"
-    is-absolute: "npm:^1.0.0"
-  checksum: 10c0/522f41a205dab4b6bad43e69b4ea9e29612b9a2ff82281425632a4c6c7c106cf65eabaaa4967bec0b468331660cde10d88101962f913e3efa59f4fffdfb4154f
-  languageName: node
-  linkType: hard
-
-"is-glob@npm:^2.0.0, is-glob@npm:^2.0.1":
-  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:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3, is-glob@npm:~4.0.1":
+"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3":
   version: 4.0.3
   resolution: "is-glob@npm:4.0.3"
   dependencies:
@@ -14529,6 +12786,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-hexadecimal@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-hexadecimal@npm:2.0.1"
+  checksum: 10c0/3eb60fe2f1e2bbc760b927dcad4d51eaa0c60138cf7fc671803f66353ad90c301605b502c7ea4c6bb0548e1c7e79dfd37b73b632652e3b76030bba603a7e9626
+  languageName: node
+  linkType: hard
+
 "is-installed-globally@npm:^0.3.1":
   version: 0.3.2
   resolution: "is-installed-globally@npm:0.3.2"
@@ -14539,16 +12803,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-installed-globally@npm:^0.4.0":
-  version: 0.4.0
-  resolution: "is-installed-globally@npm:0.4.0"
-  dependencies:
-    global-dirs: "npm:^3.0.0"
-    is-path-inside: "npm:^3.0.2"
-  checksum: 10c0/f3e6220ee5824b845c9ed0d4b42c24272701f1f9926936e30c0e676254ca5b34d1b92c6205cae11b283776f9529212c0cdabb20ec280a6451677d6493ca9c22d
-  languageName: node
-  linkType: hard
-
 "is-interactive@npm:^1.0.0":
   version: 1.0.0
   resolution: "is-interactive@npm:1.0.0"
@@ -14586,13 +12840,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-npm@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "is-npm@npm:5.0.0"
-  checksum: 10c0/8ded3ae1119bbbda22395fe1c64d2d79d3b3baeb2635c90f9a9dca4b8ce19a67b55fda178269b63421b257b361892fd545807fb5ac212f06776f544d9fcc3ab0
-  languageName: node
-  linkType: hard
-
 "is-number-object@npm:^1.1.1":
   version: 1.1.1
   resolution: "is-number-object@npm:1.1.1"
@@ -14603,15 +12850,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-number@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "is-number@npm:2.1.0"
-  dependencies:
-    kind-of: "npm:^3.0.2"
-  checksum: 10c0/f9d2079a0dbfbce6f9f3b6644f6eb60d0211ee56bb26db3963ef4d514e2444f87e3f56c8169896c90544c501ed5e510c5b83abae6748a57d15f6ac8d85efd602
-  languageName: node
-  linkType: hard
-
 "is-number@npm:^3.0.0":
   version: 3.0.0
   resolution: "is-number@npm:3.0.0"
@@ -14621,13 +12859,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-number@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "is-number@npm:4.0.0"
-  checksum: 10c0/bb17a331f357eb59a7f8db848086c41886715b2ea1db03f284a99d14001cda094083a5b6a7b343b5bcf410ccef668a70bc626d07bc2032cc4ab46dd264cea244
-  languageName: node
-  linkType: hard
-
 "is-number@npm:^7.0.0":
   version: 7.0.0
   resolution: "is-number@npm:7.0.0"
@@ -14635,7 +12866,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-obj@npm:^1.0.0, is-obj@npm:^1.0.1":
+"is-obj@npm:^1.0.0":
   version: 1.0.1
   resolution: "is-obj@npm:1.0.1"
   checksum: 10c0/5003acba0af7aa47dfe0760e545a89bbac89af37c12092c3efadc755372cdaec034f130e7a3653a59eb3c1843cfc72ca71eaf1a6c3bafe5a0bab3611a47f9945
@@ -14649,38 +12880,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-path-cwd@npm:^2.0.0, is-path-cwd@npm:^2.2.0":
-  version: 2.2.0
-  resolution: "is-path-cwd@npm:2.2.0"
-  checksum: 10c0/afce71533a427a759cd0329301c18950333d7589533c2c90205bd3fdcf7b91eb92d1940493190567a433134d2128ec9325de2fd281e05be1920fbee9edd22e0a
-  languageName: node
-  linkType: hard
-
-"is-path-in-cwd@npm:^2.0.0":
-  version: 2.1.0
-  resolution: "is-path-in-cwd@npm:2.1.0"
-  dependencies:
-    is-path-inside: "npm:^2.1.0"
-  checksum: 10c0/674a4282fb3732cf4b4e9ea31e06380d8b074fb8106c4c1742a9f0f3d5650bf059b2c45e5c4cfa7abe847ca88474de63abec323a7fe1eb14f8ec4de2fa951d3a
-  languageName: node
-  linkType: hard
-
-"is-path-inside@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "is-path-inside@npm:2.1.0"
-  dependencies:
-    path-is-inside: "npm:^1.0.2"
-  checksum: 10c0/50272b9aa301964c0bc4032d5c968e63c516d15bd7800cd06845df97bee637451fcd92a8001b37e309563eff2dffae5fa6d635a0c1d162dc257489c86b1fda51
+"is-path-cwd@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "is-path-cwd@npm:3.0.0"
+  checksum: 10c0/8135b789c74e137501ca33b11a846c32d160c517037c0ce390004a98335e010b9712792d97c73d9e98a5ecbcfd03589a81e95c72e1c05014a69fead963a02753
   languageName: node
   linkType: hard
 
-"is-path-inside@npm:^3.0.1, is-path-inside@npm:^3.0.2, is-path-inside@npm:^3.0.3":
+"is-path-inside@npm:^3.0.1":
   version: 3.0.3
   resolution: "is-path-inside@npm:3.0.3"
   checksum: 10c0/cf7d4ac35fb96bab6a1d2c3598fe5ebb29aafb52c0aaa482b5a3ed9d8ba3edc11631e3ec2637660c44b3ce0e61a08d54946e8af30dec0b60a7c27296c68ffd05
   languageName: node
   linkType: hard
 
+"is-path-inside@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "is-path-inside@npm:4.0.0"
+  checksum: 10c0/51188d7e2b1d907a9a5f7c18d99a90b60870b951ed87cf97595d9aaa429d4c010652c3350bcbf31182e7f4b0eab9a1860b43e16729b13cb1a44baaa6cdb64c46
+  languageName: node
+  linkType: hard
+
 "is-plain-obj@npm:^1.0.0, is-plain-obj@npm:^1.1.0":
   version: 1.1.0
   resolution: "is-plain-obj@npm:1.1.0"
@@ -14695,10 +12915,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-plain-obj@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "is-plain-obj@npm:3.0.0"
-  checksum: 10c0/8e6483bfb051d42ec9c704c0ede051a821c6b6f9a6c7a3e3b55aa855e00981b0580c8f3b1f5e2e62649b39179b1abfee35d6f8086d999bfaa32c1908d29b07bc
+"is-plain-obj@npm:^4.0.0":
+  version: 4.1.0
+  resolution: "is-plain-obj@npm:4.1.0"
+  checksum: 10c0/32130d651d71d9564dc88ba7e6fda0e91a1010a3694648e9f4f47bb6080438140696d3e3e15c741411d712e47ac9edc1a8a9de1fe76f3487b0d90be06ac9975e
   languageName: node
   linkType: hard
 
@@ -14718,20 +12938,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-posix-bracket@npm:^0.1.0":
-  version: 0.1.1
-  resolution: "is-posix-bracket@npm:0.1.1"
-  checksum: 10c0/13ef3f466700fd63c1c348e647edfa22b73bb89cf8d993fb7820824ea2ddc7119975e64861fe1d52c3c4e881a7dcf2538faa05e3f700e9d2ea56eeeb4ba26a25
-  languageName: node
-  linkType: hard
-
-"is-primitive@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "is-primitive@npm:2.0.0"
-  checksum: 10c0/bb84a2f05eca29f560aafc3bca9173e4c06d74dc24a6fc7faee6e61c70a00bae95e08f0d3d217d61e646b521378d4326103d124bb469d1de0240c8722b56a3fd
-  languageName: node
-  linkType: hard
-
 "is-regex@npm:^1.2.1":
   version: 1.2.1
   resolution: "is-regex@npm:1.2.1"
@@ -14744,13 +12950,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-regexp@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "is-regexp@npm:1.0.0"
-  checksum: 10c0/34cacda1901e00f6e44879378f1d2fa96320ea956c1bec27713130aaf1d44f6e7bd963eed28945bfe37e600cb27df1cf5207302680dad8bdd27b9baff8ecf611
-  languageName: node
-  linkType: hard
-
 "is-regular-file@npm:^1.0.1":
   version: 1.1.1
   resolution: "is-regular-file@npm:1.1.1"
@@ -14758,22 +12957,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-relative@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "is-relative@npm:1.0.0"
-  dependencies:
-    is-unc-path: "npm:^1.0.0"
-  checksum: 10c0/61157c4be8594dd25ac6f0ef29b1218c36667259ea26698367a4d9f39ff9018368bc365c490b3c79be92dfb1e389e43c4b865c95709e7b3bc72c5932f751fb60
-  languageName: node
-  linkType: hard
-
-"is-root@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "is-root@npm:2.1.0"
-  checksum: 10c0/83d3f5b052c3f28fbdbdf0d564bdd34fa14933f5694c78704f85cd1871255bc017fbe3fe2bc2fff2d227c6be5927ad2149b135c0a7c0060e7ac4e610d81a4f01
-  languageName: node
-  linkType: hard
-
 "is-set@npm:^2.0.3":
   version: 2.0.3
   resolution: "is-set@npm:2.0.3"
@@ -14859,15 +13042,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-unc-path@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "is-unc-path@npm:1.0.0"
-  dependencies:
-    unc-path-regex: "npm:^0.1.2"
-  checksum: 10c0/ac1b78f9b748196e3be3d0e722cd4b0f98639247a130a8f2473a58b29baf63fdb1b1c5a12c830660c5ee6ef0279c5418ca8e346f98cbe1a29e433d7ae531d42e
-  languageName: node
-  linkType: hard
-
 "is-unicode-supported@npm:^0.1.0":
   version: 0.1.0
   resolution: "is-unicode-supported@npm:0.1.0"
@@ -14917,7 +13091,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-windows@npm:^1.0.1, is-windows@npm:^1.0.2":
+"is-windows@npm:^1.0.2":
   version: 1.0.2
   resolution: "is-windows@npm:1.0.2"
   checksum: 10c0/b32f418ab3385604a66f1b7a3ce39d25e8881dee0bd30816dc8344ef6ff9df473a732bcc1ec4e84fe99b2f229ae474f7133e8e93f9241686cfcf7eebe53ba7a5
@@ -14938,7 +13112,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-wsl@npm:^2.0.0, is-wsl@npm:^2.1.1, is-wsl@npm:^2.2.0":
+"is-wsl@npm:^2.1.1, is-wsl@npm:^2.2.0":
   version: 2.2.0
   resolution: "is-wsl@npm:2.2.0"
   dependencies:
@@ -14954,13 +13128,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"isarray@npm:0.0.1":
-  version: 0.0.1
-  resolution: "isarray@npm:0.0.1"
-  checksum: 10c0/ed1e62da617f71fe348907c71743b5ed550448b455f8d269f89a7c7ddb8ae6e962de3dab6a74a237b06f5eb7f6ece7a45ada8ce96d87fe972926530f91ae3311
-  languageName: node
-  linkType: hard
-
 "isarray@npm:1.0.0, isarray@npm:~1.0.0":
   version: 1.0.0
   resolution: "isarray@npm:1.0.0"
@@ -14989,6 +13156,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"isexe@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "isexe@npm:4.0.0"
+  checksum: 10c0/5884815115bceac452877659a9c7726382531592f43dc29e5d48b7c4100661aed54018cb90bd36cb2eaeba521092570769167acbb95c18d39afdccbcca06c5ce
+  languageName: node
+  linkType: hard
+
 "isobject@npm:^2.0.0":
   version: 2.1.0
   resolution: "isobject@npm:2.1.0"
@@ -15187,6 +13361,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-diff@npm:30.4.1":
+  version: 30.4.1
+  resolution: "jest-diff@npm:30.4.1"
+  dependencies:
+    "@jest/diff-sequences": "npm:30.4.0"
+    "@jest/get-type": "npm:30.1.0"
+    chalk: "npm:^4.1.2"
+    pretty-format: "npm:30.4.1"
+  checksum: 10c0/787e11f0ea27e94815479d6c5415e4173da1e74bede34c1515b8515fc9d1fe053e2ad25a3c31f9998a7292c186a0e4d395ed82e0e149d57d7708ee6759b442e9
+  languageName: node
+  linkType: hard
+
 "jest-diff@npm:^24.8.0":
   version: 24.9.0
   resolution: "jest-diff@npm:24.9.0"
@@ -15199,7 +13385,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-diff@npm:^29.0.1, jest-diff@npm:^29.7.0":
+"jest-diff@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-diff@npm:29.7.0"
   dependencies:
@@ -15306,7 +13492,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:
@@ -15318,6 +13504,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-matcher-utils@npm:^30.4.1":
+  version: 30.4.1
+  resolution: "jest-matcher-utils@npm:30.4.1"
+  dependencies:
+    "@jest/get-type": "npm:30.1.0"
+    chalk: "npm:^4.1.2"
+    jest-diff: "npm:30.4.1"
+    pretty-format: "npm:30.4.1"
+  checksum: 10c0/ddbb0c7075def27ba30160883c327cb3fd13f561f5789d00a1edca1b48b0651f8ea23a1c51bcfcb6413a68c47d658bcf47a34701b8a39ce135dd28d87a3117af
+  languageName: node
+  linkType: hard
+
 "jest-message-util@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-message-util@npm:29.7.0"
@@ -15523,7 +13721,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-worker@npm:^27.0.2, jest-worker@npm:^27.4.5":
+"jest-worker@npm:^27.4.5":
   version: 27.5.1
   resolution: "jest-worker@npm:27.5.1"
   dependencies:
@@ -15534,7 +13732,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-worker@npm:^29.1.2, jest-worker@npm:^29.7.0":
+"jest-worker@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-worker@npm:29.7.0"
   dependencies:
@@ -15565,17 +13763,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jetifier@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "jetifier@npm:2.0.0"
-  bin:
-    jetifier: bin/jetify
-    jetifier-standalone: bin/jetifier-standalone
-    jetify: bin/jetify
-  checksum: 10c0/3716b7a26d1d912aef604a88fdd4aface01b26db95873860adecdb5ed4d1396f5a847efe5315630a90b2e84f447c872dedf55f368482fc9e59236edca03ff100
-  languageName: node
-  linkType: hard
-
 "jimp-compact@npm:0.16.1":
   version: 0.16.1
   resolution: "jimp-compact@npm:0.16.1"
@@ -15583,35 +13770,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jiti@npm:^1.20.0":
-  version: 1.21.7
-  resolution: "jiti@npm:1.21.7"
-  bin:
-    jiti: bin/jiti.js
-  checksum: 10c0/77b61989c758ff32407cdae8ddc77f85e18e1a13fc4977110dbd2e05fc761842f5f71bce684d9a01316e1c4263971315a111385759951080bbfe17cbb5de8f7a
-  languageName: node
-  linkType: hard
-
-"joi@npm:^17.6.0":
-  version: 17.13.3
-  resolution: "joi@npm:17.13.3"
-  dependencies:
-    "@hapi/hoek": "npm:^9.3.0"
-    "@hapi/topo": "npm:^5.1.0"
-    "@sideway/address": "npm:^4.1.5"
-    "@sideway/formula": "npm:^3.0.1"
-    "@sideway/pinpoint": "npm:^2.0.0"
-  checksum: 10c0/9262aef1da3f1bec5b03caf50c46368899fe03b8ff26cbe3d53af4584dd1049079fc97230bbf1500b6149db7cc765b9ee45f0deb24bb6fc3fa06229d7148c17f
-  languageName: node
-  linkType: hard
-
-"js-sdsl@npm:^4.1.4":
-  version: 4.4.2
-  resolution: "js-sdsl@npm:4.4.2"
-  checksum: 10c0/50707728fc31642164f4d83c8087f3750aaa99c450b008b19e236a1f190c9e48f9fc799615c341f9ca2c0803b15ab6f48d92a9cc3e6ffd20065cba7d7e742b92
-  languageName: node
-  linkType: hard
-
 "js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0":
   version: 4.0.0
   resolution: "js-tokens@npm:4.0.0"
@@ -15619,13 +13777,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"js-tokens@npm:^3.0.2":
-  version: 3.0.2
-  resolution: "js-tokens@npm:3.0.2"
-  checksum: 10c0/e3c3ee4d12643d90197628eb022a2884a15f08ea7dcac1ce97fdeee43031fbfc7ede674f2cdbbb582dcd4c94388b22e52d56c6cbeb2ac7d1b57c2f33c405e2ba
-  languageName: node
-  linkType: hard
-
 "js-yaml@npm:^3.13.1":
   version: 3.14.2
   resolution: "js-yaml@npm:3.14.2"
@@ -15649,6 +13800,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"js-yaml@npm:^4.1.1":
+  version: 4.2.0
+  resolution: "js-yaml@npm:4.2.0"
+  dependencies:
+    argparse: "npm:^2.0.1"
+  bin:
+    js-yaml: bin/js-yaml.js
+  checksum: 10c0/1916456c118746603b067d74bbcbb0445d9a1d5e474ad4ae775e7b20525bed902e01d9d97dd0c81fcd8d4f596162309d0eb057f4aa38f3e9647f14075e9dea45
+  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"
@@ -15656,15 +13818,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsesc@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "jsesc@npm:1.3.0"
-  bin:
-    jsesc: bin/jsesc
-  checksum: 10c0/62420889dd46b4cdba4df20fe6ffdefa6eeab7532fb4079170ea1b53c45d5a6abcb485144905833e5a69cc1735db12319b1e0b0f9a556811ec926b57a22318a7
-  languageName: node
-  linkType: hard
-
 "jsesc@npm:^3.0.2, jsesc@npm:~3.1.0":
   version: 3.1.0
   resolution: "jsesc@npm:3.1.0"
@@ -15741,15 +13894,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json5@npm:^0.5.1":
-  version: 0.5.1
-  resolution: "json5@npm:0.5.1"
-  bin:
-    json5: lib/cli.js
-  checksum: 10c0/aca0ab7ccf1883d3fc2ecc16219bc389716a773f774552817deaadb549acc0bb502e317a81946fc0a48f9eb6e0822cf1dc5a097009203f2c94de84c8db02a1f3
-  languageName: node
-  linkType: hard
-
 "json5@npm:^1.0.1, json5@npm:^1.0.2":
   version: 1.0.2
   resolution: "json5@npm:1.0.2"
@@ -15761,7 +13905,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json5@npm:^2.1.2, json5@npm:^2.2.1, json5@npm:^2.2.3":
+"json5@npm:^2.1.2, json5@npm:^2.2.3":
   version: 2.2.3
   resolution: "json5@npm:2.2.3"
   bin:
@@ -15823,7 +13967,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"keyv@npm:^4.0.0, keyv@npm:^4.5.3":
+"keyv@npm:^4.0.0, keyv@npm:^4.5.4":
   version: 4.5.4
   resolution: "keyv@npm:4.5.4"
   dependencies:
@@ -15850,22 +13994,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"kind-of@npm:^6.0.0, kind-of@npm:^6.0.2, kind-of@npm:^6.0.3":
+"kind-of@npm:^6.0.2, kind-of@npm:^6.0.3":
   version: 6.0.3
   resolution: "kind-of@npm:6.0.3"
   checksum: 10c0/61cdff9623dabf3568b6445e93e31376bee1cdb93f8ba7033d86022c2a9b1791a1d9510e026e6465ebd701a6dd2f7b0808483ad8838341ac52f003f512e0b4c4
   languageName: node
   linkType: hard
 
-"klaw-sync@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "klaw-sync@npm:6.0.0"
-  dependencies:
-    graceful-fs: "npm:^4.1.11"
-  checksum: 10c0/00d8e4c48d0d699b743b3b028e807295ea0b225caf6179f51029e19783a93ad8bb9bccde617d169659fbe99559d73fb35f796214de031d0023c26b906cecd70a
-  languageName: node
-  linkType: hard
-
 "kleur@npm:^3.0.3":
   version: 3.0.3
   resolution: "kleur@npm:3.0.3"
@@ -15873,23 +14008,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"kleur@npm:^4.1.4":
+"kleur@npm:^4.1.5":
   version: 4.1.5
   resolution: "kleur@npm:4.1.5"
   checksum: 10c0/e9de6cb49657b6fa70ba2d1448fd3d691a5c4370d8f7bbf1c2f64c24d461270f2117e1b0afe8cb3114f13bbd8e51de158c2a224953960331904e636a5e4c0f2a
   languageName: node
   linkType: hard
 
-"lan-network@npm:^0.1.6":
-  version: 0.1.7
-  resolution: "lan-network@npm:0.1.7"
+"lan-network@npm:^0.2.1":
+  version: 0.2.1
+  resolution: "lan-network@npm:0.2.1"
   bin:
     lan-network: dist/lan-network-cli.js
-  checksum: 10c0/7afd3a7159bb65ff40bded481e4d522b1faa6b65e8b69d6404651d87fe800a35510aff9b913bb90def4f66ca886e28907492b8323f8c568830b42d28f521fb18
+  checksum: 10c0/14995644bab174cde57e41c80ed828a52d6b788f8701b8a8347c536f3ecade3e71bd33b98091484b27a1df1e35b7f6f1921ac59521bf905b5dd06ab123e82e94
   languageName: node
   linkType: hard
 
-"latest-version@npm:^5.0.0, latest-version@npm:^5.1.0":
+"latest-version@npm:^5.0.0":
   version: 5.1.0
   resolution: "latest-version@npm:5.1.0"
   dependencies:
@@ -15898,13 +14033,114 @@ __metadata:
   languageName: node
   linkType: hard
 
-"launch-editor@npm:^2.6.0":
-  version: 2.12.0
-  resolution: "launch-editor@npm:2.12.0"
+"lefthook-darwin-arm64@npm:2.1.9":
+  version: 2.1.9
+  resolution: "lefthook-darwin-arm64@npm:2.1.9"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lefthook-darwin-x64@npm:2.1.9":
+  version: 2.1.9
+  resolution: "lefthook-darwin-x64@npm:2.1.9"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lefthook-freebsd-arm64@npm:2.1.9":
+  version: 2.1.9
+  resolution: "lefthook-freebsd-arm64@npm:2.1.9"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lefthook-freebsd-x64@npm:2.1.9":
+  version: 2.1.9
+  resolution: "lefthook-freebsd-x64@npm:2.1.9"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lefthook-linux-arm64@npm:2.1.9":
+  version: 2.1.9
+  resolution: "lefthook-linux-arm64@npm:2.1.9"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lefthook-linux-x64@npm:2.1.9":
+  version: 2.1.9
+  resolution: "lefthook-linux-x64@npm:2.1.9"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lefthook-openbsd-arm64@npm:2.1.9":
+  version: 2.1.9
+  resolution: "lefthook-openbsd-arm64@npm:2.1.9"
+  conditions: os=openbsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lefthook-openbsd-x64@npm:2.1.9":
+  version: 2.1.9
+  resolution: "lefthook-openbsd-x64@npm:2.1.9"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lefthook-windows-arm64@npm:2.1.9":
+  version: 2.1.9
+  resolution: "lefthook-windows-arm64@npm:2.1.9"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lefthook-windows-x64@npm:2.1.9":
+  version: 2.1.9
+  resolution: "lefthook-windows-x64@npm:2.1.9"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lefthook@npm:^2.1.9":
+  version: 2.1.9
+  resolution: "lefthook@npm:2.1.9"
   dependencies:
-    picocolors: "npm:^1.1.1"
-    shell-quote: "npm:^1.8.3"
-  checksum: 10c0/fac5e7ad90bf185594cad4c831a52419eef50e667c4eddb5b0a58eb5f944e16d947636ee767b9896ffd46a51db34925edd3b854c48efb47f6d767ffd7d904e71
+    lefthook-darwin-arm64: "npm:2.1.9"
+    lefthook-darwin-x64: "npm:2.1.9"
+    lefthook-freebsd-arm64: "npm:2.1.9"
+    lefthook-freebsd-x64: "npm:2.1.9"
+    lefthook-linux-arm64: "npm:2.1.9"
+    lefthook-linux-x64: "npm:2.1.9"
+    lefthook-openbsd-arm64: "npm:2.1.9"
+    lefthook-openbsd-x64: "npm:2.1.9"
+    lefthook-windows-arm64: "npm:2.1.9"
+    lefthook-windows-x64: "npm:2.1.9"
+  dependenciesMeta:
+    lefthook-darwin-arm64:
+      optional: true
+    lefthook-darwin-x64:
+      optional: true
+    lefthook-freebsd-arm64:
+      optional: true
+    lefthook-freebsd-x64:
+      optional: true
+    lefthook-linux-arm64:
+      optional: true
+    lefthook-linux-x64:
+      optional: true
+    lefthook-openbsd-arm64:
+      optional: true
+    lefthook-openbsd-x64:
+      optional: true
+    lefthook-windows-arm64:
+      optional: true
+    lefthook-windows-x64:
+      optional: true
+  bin:
+    lefthook: bin/index.js
+  checksum: 10c0/676d9798942439d1cd5373bb0b2c9907f6a8097b29c05cc028d87d897d2a2cfe15a8f7e4f40b02fa93cd1ae0f02528f24053a10fb5c5967210a9c23f3c7b5059
   languageName: node
   linkType: hard
 
@@ -16055,13 +14291,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lilconfig@npm:^2.0.3":
-  version: 2.1.0
-  resolution: "lilconfig@npm:2.1.0"
-  checksum: 10c0/64645641aa8d274c99338e130554abd6a0190533c0d9eb2ce7ebfaf2e05c7d9961f3ffe2bfa39efd3b60c521ba3dd24fa236fe2775fc38501bf82bf49d4678b8
-  languageName: node
-  linkType: hard
-
 "linaria@npm:^1.3.3":
   version: 1.4.1
   resolution: "linaria@npm:1.4.1"
@@ -16147,13 +14376,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loader-utils@npm:^3.2.0":
-  version: 3.3.1
-  resolution: "loader-utils@npm:3.3.1"
-  checksum: 10c0/f2af4eb185ac5bf7e56e1337b666f90744e9f443861ac521b48f093fb9e8347f191c8960b4388a3365147d218913bc23421234e7788db69f385bacfefa0b4758
-  languageName: node
-  linkType: hard
-
 "locate-path@npm:^2.0.0":
   version: 2.0.0
   resolution: "locate-path@npm:2.0.0"
@@ -16208,13 +14430,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.curry@npm:^4.0.1":
-  version: 4.1.1
-  resolution: "lodash.curry@npm:4.1.1"
-  checksum: 10c0/f0431947dc9236df879fc13eb40c31a2839c958bd0eaa39170a5758c25a7d85d461716a851ab45a175371950b283480615cdd4b07fb0dd1afff7a2914a90696f
-  languageName: node
-  linkType: hard
-
 "lodash.debounce@npm:^4.0.8":
   version: 4.0.8
   resolution: "lodash.debounce@npm:4.0.8"
@@ -16229,13 +14444,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.flow@npm:^3.3.0":
-  version: 3.5.0
-  resolution: "lodash.flow@npm:3.5.0"
-  checksum: 10c0/b3202ddbb79e5aab41719806d0d5ae969f64ae6b59e6bdaaecaa96ec68d6ba429e544017fe0e71ecf5b7ee3cea7b45d43c46b7d67ca159d6cca86fca76c61a31
-  languageName: node
-  linkType: hard
-
 "lodash.ismatch@npm:^4.4.0":
   version: 4.4.0
   resolution: "lodash.ismatch@npm:4.4.0"
@@ -16243,13 +14451,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.memoize@npm:^4.1.2":
-  version: 4.1.2
-  resolution: "lodash.memoize@npm:4.1.2"
-  checksum: 10c0/c8713e51eccc650422716a14cece1809cfe34bc5ab5e242b7f8b4e2241c2483697b971a604252807689b9dd69bfe3a98852e19a5b89d506b000b4187a1285df8
-  languageName: node
-  linkType: hard
-
 "lodash.merge@npm:^4.6.2":
   version: 4.6.2
   resolution: "lodash.merge@npm:4.6.2"
@@ -16264,14 +14465,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"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.17.21, lodash@npm:^4.0.1, lodash@npm:^4.11.2, lodash@npm:^4.17.11, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.4, lodash@npm:^4.17.5, lodash@npm:^4.2.1":
+"lodash@npm:4.17.21, lodash@npm:^4.0.1, lodash@npm:^4.11.2, lodash@npm:^4.17.11, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.5, lodash@npm:^4.2.1":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
   checksum: 10c0/d8cbea072bb08655bb4c989da418994b073a608dffa608b09ac04b43a791b12aeae7cd7ad919aa4c925f33b48490b5cfe6c1f71d827956071dae2e7bb3a6b74c
@@ -16297,7 +14491,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.2.0, loose-envify@npm:^1.3.1, loose-envify@npm:^1.4.0":
+"longest-streak@npm:^3.0.0":
+  version: 3.1.0
+  resolution: "longest-streak@npm:3.1.0"
+  checksum: 10c0/7c2f02d0454b52834d1bcedef79c557bd295ee71fdabb02d041ff3aa9da48a90b5df7c0409156dedbc4df9b65da18742652aaea4759d6ece01f08971af6a7eaa
+  languageName: node
+  linkType: hard
+
+"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
   dependencies:
@@ -16334,15 +14535,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lower-case@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "lower-case@npm:2.0.2"
-  dependencies:
-    tslib: "npm:^2.0.3"
-  checksum: 10c0/3d925e090315cf7dc1caa358e0477e186ffa23947740e4314a7429b6e62d72742e0bbe7536a5ae56d19d7618ce998aba05caca53c2902bd5742fdca5fc57fd7b
-  languageName: node
-  linkType: hard
-
 "lowercase-keys@npm:^1.0.0, lowercase-keys@npm:^1.0.1":
   version: 1.0.1
   resolution: "lowercase-keys@npm:1.0.1"
@@ -16357,7 +14549,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lru-cache@npm:^10.0.1, lru-cache@npm:^10.2.0":
+"lru-cache@npm:^10.0.1":
   version: 10.4.3
   resolution: "lru-cache@npm:10.4.3"
   checksum: 10c0/ebd04fbca961e6c1d6c0af3799adcc966a1babe798f685bb84e6599266599cd95d94630b10262f5424539bc4640107e8a33aa28585374abf561d30d16f4b39fb
@@ -16389,20 +14581,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lunr-languages@npm:^1.4.0":
-  version: 1.14.0
-  resolution: "lunr-languages@npm:1.14.0"
-  checksum: 10c0/5dc26fa75c8f3f14a69b3d54ae1228907b3552bc26727a14c5f302aab05d2547a924d095f075c9d3439756a38e2dafb78d1b74fc862dc290a13ddce236a55e87
-  languageName: node
-  linkType: hard
-
-"lunr@npm:^2.3.9":
-  version: 2.3.9
-  resolution: "lunr@npm:2.3.9"
-  checksum: 10c0/77d7dbb4fbd602aac161e2b50887d8eda28c0fa3b799159cee380fbb311f1e614219126ecbbd2c3a9c685f1720a8109b3c1ca85cc893c39b6c9cc6a62a1d8a8b
-  languageName: node
-  linkType: hard
-
 "macos-release@npm:^2.2.0":
   version: 2.5.1
   resolution: "macos-release@npm:2.5.1"
@@ -16512,13 +14690,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mark.js@npm:^8.11.1":
-  version: 8.11.1
-  resolution: "mark.js@npm:8.11.1"
-  checksum: 10c0/5e69e776db61abdd857b5cbb7070c8a3b1b0e5c12bf077fcd5a8c6f17b1f85ed65275aba5662b57136d1b9f82b54bb34d4ef4220f7703c9a7ab806ae1e208cff
-  languageName: node
-  linkType: hard
-
 "markdown-escapes@npm:^1.0.0":
   version: 1.0.4
   resolution: "markdown-escapes@npm:1.0.4"
@@ -16526,6 +14697,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"markdown-extensions@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "markdown-extensions@npm:2.0.0"
+  checksum: 10c0/406139da2aa0d5ebad86195c8e8c02412f873c452b4c087ae7bc767af37956141be449998223bb379eea179b5fd38dfa610602b6f29c22ddab5d51e627a7e41d
+  languageName: node
+  linkType: hard
+
+"markdown-table@npm:^3.0.0":
+  version: 3.0.4
+  resolution: "markdown-table@npm:3.0.4"
+  checksum: 10c0/1257b31827629a54c24a5030a3dac952256c559174c95ce3ef89bebd6bff0cb1444b1fd667b1a1bb53307f83278111505b3e26f0c4e7b731e0060d435d2d930b
+  languageName: node
+  linkType: hard
+
 "marked@npm:^1.2.2":
   version: 1.2.9
   resolution: "marked@npm:1.2.9"
@@ -16565,13 +14750,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"math-random@npm:^1.0.1":
-  version: 1.0.4
-  resolution: "math-random@npm:1.0.4"
-  checksum: 10c0/7b0ddc17f5dfe3b426c1e92505122e6a32f884dd50f5e0bb3898e5ce2da60b4ffb47c9b607809cf0beb5b8bf253b9dcc3b6f7331b20ce59b8bd7e8dbbbb1e347
-  languageName: node
-  linkType: hard
-
 "mdast-squeeze-paragraphs@npm:^3.0.0":
   version: 3.0.5
   resolution: "mdast-squeeze-paragraphs@npm:3.0.5"
@@ -16581,15 +14759,6 @@ __metadata:
   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:^1.2.0":
   version: 1.2.5
   resolution: "mdast-util-definitions@npm:1.2.5"
@@ -16599,78 +14768,302 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mdast-util-definitions@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "mdast-util-definitions@npm:4.0.0"
+"mdast-util-find-and-replace@npm:^3.0.0":
+  version: 3.0.2
+  resolution: "mdast-util-find-and-replace@npm:3.0.2"
   dependencies:
-    unist-util-visit: "npm:^2.0.0"
-  checksum: 10c0/d81bb0b702f99878c8e8e4f66dd7f6f673ab341f061b3d9487ba47dad28b584e02f16b4c42df23714eaac8a7dd8544ba7d77308fad8d4a9fd0ac92e2a7f56be9
+    "@types/mdast": "npm:^4.0.0"
+    escape-string-regexp: "npm:^5.0.0"
+    unist-util-is: "npm:^6.0.0"
+    unist-util-visit-parents: "npm:^6.0.0"
+  checksum: 10c0/c8417a35605d567772ff5c1aa08363ff3010b0d60c8ea68c53cba09bf25492e3dd261560425c1756535f3b7107f62e7ff3857cdd8fb1e62d1b2cc2ea6e074ca2
   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"
+"mdast-util-from-markdown@npm:^2.0.0":
+  version: 2.0.3
+  resolution: "mdast-util-from-markdown@npm:2.0.3"
   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
+    "@types/mdast": "npm:^4.0.0"
+    "@types/unist": "npm:^3.0.0"
+    decode-named-character-reference: "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    mdast-util-to-string: "npm:^4.0.0"
+    micromark: "npm:^4.0.0"
+    micromark-util-decode-numeric-character-reference: "npm:^2.0.0"
+    micromark-util-decode-string: "npm:^2.0.0"
+    micromark-util-normalize-identifier: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+    unist-util-stringify-position: "npm:^4.0.0"
+  checksum: 10c0/d3eac9ac2b88e3b41fb85aa81c7bfd1f4f8a2fde497ad805e66fea7b2abfe486ffd94d2a20f9fd2951dcdebe4916f3bdcf851319891dd62d343e26c2f02583ba
   languageName: node
   linkType: hard
 
-"mdast-util-to-hast@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "mdast-util-to-hast@npm:4.0.0"
+"mdast-util-gfm-autolink-literal@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "mdast-util-gfm-autolink-literal@npm:2.0.1"
   dependencies:
-    collapse-white-space: "npm:^1.0.0"
-    detab: "npm:^2.0.0"
-    mdast-util-definitions: "npm:^1.2.0"
-    mdurl: "npm:^1.0.1"
-    trim: "npm:0.0.1"
-    trim-lines: "npm:^1.0.0"
-    unist-builder: "npm:^1.0.1"
-    unist-util-generated: "npm:^1.1.0"
-    unist-util-position: "npm:^3.0.0"
-    unist-util-visit: "npm:^1.1.0"
-    xtend: "npm:^4.0.1"
-  checksum: 10c0/28bd500b2f1b0a62bb13b7f6626a9122e037f25450850dc53200d04223ba765db56c41c57e64d59a6dd565a3275bfae1136171943f436c334cbd3dc5901718f7
+    "@types/mdast": "npm:^4.0.0"
+    ccount: "npm:^2.0.0"
+    devlop: "npm:^1.0.0"
+    mdast-util-find-and-replace: "npm:^3.0.0"
+    micromark-util-character: "npm:^2.0.0"
+  checksum: 10c0/963cd22bd42aebdec7bdd0a527c9494d024d1ad0739c43dc040fee35bdfb5e29c22564330a7418a72b5eab51d47a6eff32bc0255ef3ccb5cebfe8970e91b81b6
+  languageName: node
+  linkType: hard
+
+"mdast-util-gfm-footnote@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "mdast-util-gfm-footnote@npm:2.1.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    devlop: "npm:^1.1.0"
+    mdast-util-from-markdown: "npm:^2.0.0"
+    mdast-util-to-markdown: "npm:^2.0.0"
+    micromark-util-normalize-identifier: "npm:^2.0.0"
+  checksum: 10c0/8ab965ee6be3670d76ec0e95b2ba3101fc7444eec47564943ab483d96ac17d29da2a4e6146a2a288be30c21b48c4f3938a1e54b9a46fbdd321d49a5bc0077ed0
   languageName: node
   linkType: hard
 
-"mdast-util-to-string@npm:^2.0.0":
+"mdast-util-gfm-strikethrough@npm:^2.0.0":
   version: 2.0.0
-  resolution: "mdast-util-to-string@npm:2.0.0"
-  checksum: 10c0/a4231085133cdfec24644b694c13661e5a01d26716be0105b6792889faa04b8030e4abbf72d4be3363098b2b38b2b98f1f1f1f0858eb6580dc04e2aca1436a37
+  resolution: "mdast-util-gfm-strikethrough@npm:2.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    mdast-util-from-markdown: "npm:^2.0.0"
+    mdast-util-to-markdown: "npm:^2.0.0"
+  checksum: 10c0/b053e93d62c7545019bd914271ea9e5667ad3b3b57d16dbf68e56fea39a7e19b4a345e781312714eb3d43fdd069ff7ee22a3ca7f6149dfa774554f19ce3ac056
   languageName: node
   linkType: hard
 
-"mdn-data@npm:2.0.14":
-  version: 2.0.14
-  resolution: "mdn-data@npm:2.0.14"
-  checksum: 10c0/67241f8708c1e665a061d2b042d2d243366e93e5bf1f917693007f6d55111588b952dcbfd3ea9c2d0969fb754aad81b30fdcfdcc24546495fc3b24336b28d4bd
+"mdast-util-gfm-table@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "mdast-util-gfm-table@npm:2.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    devlop: "npm:^1.0.0"
+    markdown-table: "npm:^3.0.0"
+    mdast-util-from-markdown: "npm:^2.0.0"
+    mdast-util-to-markdown: "npm:^2.0.0"
+  checksum: 10c0/128af47c503a53bd1c79f20642561e54a510ad5e2db1e418d28fefaf1294ab839e6c838e341aef5d7e404f9170b9ca3d1d89605f234efafde93ee51174a6e31e
   languageName: node
   linkType: hard
 
-"mdurl@npm:^1.0.0, mdurl@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "mdurl@npm:1.0.1"
-  checksum: 10c0/ea8534341eb002aaa532a722daef6074cd8ca66202e10a2b4cda46722c1ebdb1da92197ac300bc953d3ef1bf41cd6561ef2cc69d82d5d0237dae00d4a61a4eee
+"mdast-util-gfm-task-list-item@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "mdast-util-gfm-task-list-item@npm:2.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    devlop: "npm:^1.0.0"
+    mdast-util-from-markdown: "npm:^2.0.0"
+    mdast-util-to-markdown: "npm:^2.0.0"
+  checksum: 10c0/258d725288482b636c0a376c296431390c14b4f29588675297cb6580a8598ed311fc73ebc312acfca12cc8546f07a3a285a53a3b082712e2cbf5c190d677d834
   languageName: node
   linkType: hard
 
-"media-typer@npm:0.3.0":
+"mdast-util-gfm@npm:^3.0.0":
+  version: 3.1.0
+  resolution: "mdast-util-gfm@npm:3.1.0"
+  dependencies:
+    mdast-util-from-markdown: "npm:^2.0.0"
+    mdast-util-gfm-autolink-literal: "npm:^2.0.0"
+    mdast-util-gfm-footnote: "npm:^2.0.0"
+    mdast-util-gfm-strikethrough: "npm:^2.0.0"
+    mdast-util-gfm-table: "npm:^2.0.0"
+    mdast-util-gfm-task-list-item: "npm:^2.0.0"
+    mdast-util-to-markdown: "npm:^2.0.0"
+  checksum: 10c0/4bedcfb6a20e39901c8772f0d2bb2d7a64ae87a54c13cbd92eec062cf470fbb68c2ad754e149af5b30794e2de61c978ab1de1ace03c0c40f443ca9b9b8044f81
+  languageName: node
+  linkType: hard
+
+"mdast-util-mdx-expression@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "mdast-util-mdx-expression@npm:2.0.1"
+  dependencies:
+    "@types/estree-jsx": "npm:^1.0.0"
+    "@types/hast": "npm:^3.0.0"
+    "@types/mdast": "npm:^4.0.0"
+    devlop: "npm:^1.0.0"
+    mdast-util-from-markdown: "npm:^2.0.0"
+    mdast-util-to-markdown: "npm:^2.0.0"
+  checksum: 10c0/9a1e57940f66431f10312fa239096efa7627f375e7933b5d3162c0b5c1712a72ac87447aff2b6838d2bbd5c1311b188718cc90b33b67dc67a88550e0a6ef6183
+  languageName: node
+  linkType: hard
+
+"mdast-util-mdx-jsx@npm:^3.0.0":
+  version: 3.2.0
+  resolution: "mdast-util-mdx-jsx@npm:3.2.0"
+  dependencies:
+    "@types/estree-jsx": "npm:^1.0.0"
+    "@types/hast": "npm:^3.0.0"
+    "@types/mdast": "npm:^4.0.0"
+    "@types/unist": "npm:^3.0.0"
+    ccount: "npm:^2.0.0"
+    devlop: "npm:^1.1.0"
+    mdast-util-from-markdown: "npm:^2.0.0"
+    mdast-util-to-markdown: "npm:^2.0.0"
+    parse-entities: "npm:^4.0.0"
+    stringify-entities: "npm:^4.0.0"
+    unist-util-stringify-position: "npm:^4.0.0"
+    vfile-message: "npm:^4.0.0"
+  checksum: 10c0/3acadaf3b962254f7ad2990fed4729961dc0217ca31fde9917986e880843f3ecf3392b1f22d569235cacd180d50894ad266db7af598aedca69d330d33c7ac613
+  languageName: node
+  linkType: hard
+
+"mdast-util-mdx@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "mdast-util-mdx@npm:3.0.0"
+  dependencies:
+    mdast-util-from-markdown: "npm:^2.0.0"
+    mdast-util-mdx-expression: "npm:^2.0.0"
+    mdast-util-mdx-jsx: "npm:^3.0.0"
+    mdast-util-mdxjs-esm: "npm:^2.0.0"
+    mdast-util-to-markdown: "npm:^2.0.0"
+  checksum: 10c0/4faea13f77d6bc9aa64ee41a5e4779110b73444a17fda363df6ebe880ecfa58b321155b71f8801c3faa6d70d6222a32a00cbd6dbf5fad8db417f4688bc9c74e1
+  languageName: node
+  linkType: hard
+
+"mdast-util-mdxjs-esm@npm:^2.0.0, mdast-util-mdxjs-esm@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "mdast-util-mdxjs-esm@npm:2.0.1"
+  dependencies:
+    "@types/estree-jsx": "npm:^1.0.0"
+    "@types/hast": "npm:^3.0.0"
+    "@types/mdast": "npm:^4.0.0"
+    devlop: "npm:^1.0.0"
+    mdast-util-from-markdown: "npm:^2.0.0"
+    mdast-util-to-markdown: "npm:^2.0.0"
+  checksum: 10c0/5bda92fc154141705af2b804a534d891f28dac6273186edf1a4c5e3f045d5b01dbcac7400d27aaf91b7e76e8dce007c7b2fdf136c11ea78206ad00bdf9db46bc
+  languageName: node
+  linkType: hard
+
+"mdast-util-phrasing@npm:^4.0.0":
+  version: 4.1.0
+  resolution: "mdast-util-phrasing@npm:4.1.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    unist-util-is: "npm:^6.0.0"
+  checksum: 10c0/bf6c31d51349aa3d74603d5e5a312f59f3f65662ed16c58017169a5fb0f84ca98578f626c5ee9e4aa3e0a81c996db8717096705521bddb4a0185f98c12c9b42f
+  languageName: node
+  linkType: hard
+
+"mdast-util-to-hast@npm:^13.0.0":
+  version: 13.2.1
+  resolution: "mdast-util-to-hast@npm:13.2.1"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+    "@types/mdast": "npm:^4.0.0"
+    "@ungap/structured-clone": "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    micromark-util-sanitize-uri: "npm:^2.0.0"
+    trim-lines: "npm:^3.0.0"
+    unist-util-position: "npm:^5.0.0"
+    unist-util-visit: "npm:^5.0.0"
+    vfile: "npm:^6.0.0"
+  checksum: 10c0/3eeaf28a5e84e1e08e6d54a1a8a06c0fca88cb5d36f4cf8086f0177248d1ce6e4e751f4ad0da19a3dea1c6ea61bd80784acc3ae021e44ceeb21aa5413a375e43
+  languageName: node
+  linkType: hard
+
+"mdast-util-to-hast@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "mdast-util-to-hast@npm:4.0.0"
+  dependencies:
+    collapse-white-space: "npm:^1.0.0"
+    detab: "npm:^2.0.0"
+    mdast-util-definitions: "npm:^1.2.0"
+    mdurl: "npm:^1.0.1"
+    trim: "npm:0.0.1"
+    trim-lines: "npm:^1.0.0"
+    unist-builder: "npm:^1.0.1"
+    unist-util-generated: "npm:^1.1.0"
+    unist-util-position: "npm:^3.0.0"
+    unist-util-visit: "npm:^1.1.0"
+    xtend: "npm:^4.0.1"
+  checksum: 10c0/28bd500b2f1b0a62bb13b7f6626a9122e037f25450850dc53200d04223ba765db56c41c57e64d59a6dd565a3275bfae1136171943f436c334cbd3dc5901718f7
+  languageName: node
+  linkType: hard
+
+"mdast-util-to-markdown-cjk-friendly-gfm-strikethrough@npm:1.0.0":
+  version: 1.0.0
+  resolution: "mdast-util-to-markdown-cjk-friendly-gfm-strikethrough@npm:1.0.0"
+  dependencies:
+    mdast-util-gfm-strikethrough: "npm:^2.0.0"
+    mdast-util-to-markdown: "npm:^2.1.2"
+    micromark-extension-cjk-friendly-util: "npm:3.0.1"
+    micromark-util-symbol: "npm:^2.0.1"
+  peerDependencies:
+    "@types/mdast": "*"
+  peerDependenciesMeta:
+    "@types/mdast":
+      optional: true
+  checksum: 10c0/dc03d1001d8f5d2b33134935daa162d8f5bd307f1dc93af5b257487bdb216a0b60434d238c8f4f762f77c99767838a2f1f0790d355b711318df1de4f95072953
+  languageName: node
+  linkType: hard
+
+"mdast-util-to-markdown-cjk-friendly@npm:1.0.0":
+  version: 1.0.0
+  resolution: "mdast-util-to-markdown-cjk-friendly@npm:1.0.0"
+  dependencies:
+    mdast-util-to-markdown: "npm:^2.1.2"
+    micromark-extension-cjk-friendly-util: "npm:3.0.1"
+    micromark-util-symbol: "npm:^2.0.1"
+  peerDependencies:
+    "@types/mdast": "*"
+  peerDependenciesMeta:
+    "@types/mdast":
+      optional: true
+  checksum: 10c0/5fedb40578f136f74921abd3457626637328ddec8d0e60f490ee7c69b10308d5a580faa627a06a11303985d2c714ad46a883d4a436015c0e9639bd333b54ec6b
+  languageName: node
+  linkType: hard
+
+"mdast-util-to-markdown@npm:^2.0.0, mdast-util-to-markdown@npm:^2.1.2":
+  version: 2.1.2
+  resolution: "mdast-util-to-markdown@npm:2.1.2"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    "@types/unist": "npm:^3.0.0"
+    longest-streak: "npm:^3.0.0"
+    mdast-util-phrasing: "npm:^4.0.0"
+    mdast-util-to-string: "npm:^4.0.0"
+    micromark-util-classify-character: "npm:^2.0.0"
+    micromark-util-decode-string: "npm:^2.0.0"
+    unist-util-visit: "npm:^5.0.0"
+    zwitch: "npm:^2.0.0"
+  checksum: 10c0/4649722a6099f12e797bd8d6469b2b43b44e526b5182862d9c7766a3431caad2c0112929c538a972f214e63c015395e5d3f54bd81d9ac1b16e6d8baaf582f749
+  languageName: node
+  linkType: hard
+
+"mdast-util-to-string@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "mdast-util-to-string@npm:4.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+  checksum: 10c0/2d3c1af29bf3fe9c20f552ee9685af308002488f3b04b12fa66652c9718f66f41a32f8362aa2d770c3ff464c034860b41715902ada2306bb0a055146cef064d7
+  languageName: node
+  linkType: hard
+
+"mdurl@npm:^1.0.1":
+  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"
   checksum: 10c0/d160f31246907e79fed398470285f21bafb45a62869dc469b1c8877f3f064f5eabc4bcc122f9479b8b605bc5c76187d7871cf84c4ee3ecd3e487da1993279928
   languageName: node
   linkType: hard
 
+"medium-zoom@npm:1.1.0":
+  version: 1.1.0
+  resolution: "medium-zoom@npm:1.1.0"
+  checksum: 10c0/7d1f05e8eab045c33d7c04d4ee7bf04f5246cf7a720d7b5f5a51c36ab23666e363bcbb6bffae50b5948d5eb19361914cb0e26a1fce5c1fff7a266bc0217893f3
+  languageName: node
+  linkType: hard
+
 "mem@npm:^8.1.1":
   version: 8.1.1
   resolution: "mem@npm:8.1.1"
@@ -16681,7 +15074,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"memfs@npm:^3.1.2, memfs@npm:^3.2.2, memfs@npm:^3.4.3":
+"memfs@npm:^3.2.2":
   version: 3.5.3
   resolution: "memfs@npm:3.5.3"
   dependencies:
@@ -16731,309 +15124,778 @@ __metadata:
   languageName: node
   linkType: hard
 
-"meow@npm:^8.0.0":
-  version: 8.1.2
-  resolution: "meow@npm:8.1.2"
+"meow@npm:^8.0.0":
+  version: 8.1.2
+  resolution: "meow@npm:8.1.2"
+  dependencies:
+    "@types/minimist": "npm:^1.2.0"
+    camelcase-keys: "npm:^6.2.2"
+    decamelize-keys: "npm:^1.1.0"
+    hard-rejection: "npm:^2.1.0"
+    minimist-options: "npm:4.1.0"
+    normalize-package-data: "npm:^3.0.0"
+    read-pkg-up: "npm:^7.0.1"
+    redent: "npm:^3.0.0"
+    trim-newlines: "npm:^3.0.0"
+    type-fest: "npm:^0.18.0"
+    yargs-parser: "npm:^20.2.3"
+  checksum: 10c0/9a8d90e616f783650728a90f4ea1e5f763c1c5260369e6596b52430f877f4af8ecbaa8c9d952c93bbefd6d5bda4caed6a96a20ba7d27b511d2971909b01922a2
+  languageName: node
+  linkType: hard
+
+"merge-descriptors@npm:1.0.3":
+  version: 1.0.3
+  resolution: "merge-descriptors@npm:1.0.3"
+  checksum: 10c0/866b7094afd9293b5ea5dcd82d71f80e51514bed33b4c4e9f516795dc366612a4cbb4dc94356e943a8a6914889a914530badff27f397191b9b75cda20b6bae93
+  languageName: node
+  linkType: hard
+
+"merge-options@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "merge-options@npm:3.0.4"
+  dependencies:
+    is-plain-obj: "npm:^2.1.0"
+  checksum: 10c0/02b5891ceef09b0b497b5a0154c37a71784e68ed71b14748f6fd4258ffd3fe4ecd5cb0fd6f7cae3954fd11e7686c5cb64486daffa63c2793bbe8b614b61c7055
+  languageName: node
+  linkType: hard
+
+"merge-stream@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "merge-stream@npm:2.0.0"
+  checksum: 10c0/867fdbb30a6d58b011449b8885601ec1690c3e41c759ecd5a9d609094f7aed0096c37823ff4a7190ef0b8f22cc86beb7049196ff68c016e3b3c671d0dac91ce5
+  languageName: node
+  linkType: hard
+
+"merge2@npm:^1.3.0":
+  version: 1.4.1
+  resolution: "merge2@npm:1.4.1"
+  checksum: 10c0/254a8a4605b58f450308fc474c82ac9a094848081bf4c06778200207820e5193726dc563a0d2c16468810516a5c97d9d3ea0ca6585d23c58ccfff2403e8dbbeb
+  languageName: node
+  linkType: hard
+
+"methods@npm:~1.1.2":
+  version: 1.1.2
+  resolution: "methods@npm:1.1.2"
+  checksum: 10c0/bdf7cc72ff0a33e3eede03708c08983c4d7a173f91348b4b1e4f47d4cdbf734433ad971e7d1e8c77247d9e5cd8adb81ea4c67b0a2db526b758b2233d7814b8b2
+  languageName: node
+  linkType: hard
+
+"metro-babel-transformer@npm:0.84.4":
+  version: 0.84.4
+  resolution: "metro-babel-transformer@npm:0.84.4"
+  dependencies:
+    "@babel/core": "npm:^7.25.2"
+    flow-enums-runtime: "npm:^0.0.6"
+    hermes-parser: "npm:0.35.0"
+    metro-cache-key: "npm:0.84.4"
+    nullthrows: "npm:^1.1.1"
+  checksum: 10c0/d1ac996666334bc1cfe9d399cbf4cd747b675f6f8f758c2317eebcc52bd76046ed864ddb7b270efeb8cf337940a61fb03912e5c859b7cbc54687c2f5c41a9d2a
+  languageName: node
+  linkType: hard
+
+"metro-cache-key@npm:0.84.4":
+  version: 0.84.4
+  resolution: "metro-cache-key@npm:0.84.4"
+  dependencies:
+    flow-enums-runtime: "npm:^0.0.6"
+  checksum: 10c0/a82ab6367f11886d960cc8fa1f3aa54f6529fe30c16059c141c3e789084c50838fdd7e1a5528534cd9c11a74c63aa5c6a7461dbfa50e8c449b6141eaf2fd05e0
+  languageName: node
+  linkType: hard
+
+"metro-cache@npm:0.84.4":
+  version: 0.84.4
+  resolution: "metro-cache@npm:0.84.4"
+  dependencies:
+    exponential-backoff: "npm:^3.1.1"
+    flow-enums-runtime: "npm:^0.0.6"
+    https-proxy-agent: "npm:^7.0.5"
+    metro-core: "npm:0.84.4"
+  checksum: 10c0/3bf7f3a1f85b4f1af05f4b2c71c78e56fd3262d967ee43f02e9ff6820254063af33a70b6549e3dc5e993a6a0b9df92e9279632ad9a8b1cde2577342f93df45eb
+  languageName: node
+  linkType: hard
+
+"metro-config@npm:0.84.4, metro-config@npm:^0.84.3":
+  version: 0.84.4
+  resolution: "metro-config@npm:0.84.4"
+  dependencies:
+    connect: "npm:^3.6.5"
+    flow-enums-runtime: "npm:^0.0.6"
+    jest-validate: "npm:^29.7.0"
+    metro: "npm:0.84.4"
+    metro-cache: "npm:0.84.4"
+    metro-core: "npm:0.84.4"
+    metro-runtime: "npm:0.84.4"
+    yaml: "npm:^2.6.1"
+  checksum: 10c0/f8aaf7d8cff9b486353b62f4746b0a70f99749bd4061f5ae847524aaedcd9c5a34bf176cbbe12fb33e771e8ed3c1496654b2578fa5ba8b9e4f856f0589744d98
+  languageName: node
+  linkType: hard
+
+"metro-core@npm:0.84.4, metro-core@npm:^0.84.3":
+  version: 0.84.4
+  resolution: "metro-core@npm:0.84.4"
+  dependencies:
+    flow-enums-runtime: "npm:^0.0.6"
+    lodash.throttle: "npm:^4.1.1"
+    metro-resolver: "npm:0.84.4"
+  checksum: 10c0/19d859de16b5e082c9c31bed981c579a4e6d31a626c7829b725df9ae0ffb755d0ef7809ba9f8adf22d3921f5ffdd931ed77b21b95ca2ea17895f0c99b3cab831
+  languageName: node
+  linkType: hard
+
+"metro-file-map@npm:0.84.4":
+  version: 0.84.4
+  resolution: "metro-file-map@npm:0.84.4"
+  dependencies:
+    debug: "npm:^4.4.0"
+    fb-watchman: "npm:^2.0.0"
+    flow-enums-runtime: "npm:^0.0.6"
+    graceful-fs: "npm:^4.2.4"
+    invariant: "npm:^2.2.4"
+    jest-worker: "npm:^29.7.0"
+    micromatch: "npm:^4.0.4"
+    nullthrows: "npm:^1.1.1"
+    walker: "npm:^1.0.7"
+  checksum: 10c0/09ca829570d1d6dc5beb0534da8a7f2bfcae5415b0974fd5f58b4a05da95dbafdd47f7dc8dedeb11b6562ee9a92c4d918466d02a05cda6e1eaf2c400cbbe6fb4
+  languageName: node
+  linkType: hard
+
+"metro-minify-terser@npm:0.84.4":
+  version: 0.84.4
+  resolution: "metro-minify-terser@npm:0.84.4"
+  dependencies:
+    flow-enums-runtime: "npm:^0.0.6"
+    terser: "npm:^5.15.0"
+  checksum: 10c0/c9b36c2adb8254c38bdedad9da8bf2b7fae7f45cbd883e590430a5fc9cad808af24dd08a9420925e15733dab886528ad553e3eeb3faffc53d3ad80e7e03e5f6d
+  languageName: node
+  linkType: hard
+
+"metro-resolver@npm:0.84.4":
+  version: 0.84.4
+  resolution: "metro-resolver@npm:0.84.4"
+  dependencies:
+    flow-enums-runtime: "npm:^0.0.6"
+  checksum: 10c0/468334270598222e15cbee32af51a3b5e1f4fa6869794955b95d1134b28a58594e8e3879e841ccf00bbb5cd86c689a4481714d6c6a464931987d5333d2c55f80
+  languageName: node
+  linkType: hard
+
+"metro-runtime@npm:0.84.4, metro-runtime@npm:^0.84.3":
+  version: 0.84.4
+  resolution: "metro-runtime@npm:0.84.4"
+  dependencies:
+    "@babel/runtime": "npm:^7.25.0"
+    flow-enums-runtime: "npm:^0.0.6"
+  checksum: 10c0/e2b2e819027940c6bbd081e5650238d52b6c6d78561cd486b8c10cd1e7fce0213c66fa7f885e37ad5377fcd5726b1c9e473fba6de13938cdf2c966e82968c05f
+  languageName: node
+  linkType: hard
+
+"metro-source-map@npm:0.84.4, metro-source-map@npm:^0.84.3":
+  version: 0.84.4
+  resolution: "metro-source-map@npm:0.84.4"
+  dependencies:
+    "@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.84.4"
+    nullthrows: "npm:^1.1.1"
+    ob1: "npm:0.84.4"
+    source-map: "npm:^0.5.6"
+    vlq: "npm:^1.0.0"
+  checksum: 10c0/39df4524022e07aa4b4d09dd874a9509eb9e2e1e491e80a35099020347ab6be2407851b026452296aad314b0eb7ecf14f9b6bab96bd7c31d47d8b1eb30279aaf
+  languageName: node
+  linkType: hard
+
+"metro-symbolicate@npm:0.84.4":
+  version: 0.84.4
+  resolution: "metro-symbolicate@npm:0.84.4"
+  dependencies:
+    flow-enums-runtime: "npm:^0.0.6"
+    invariant: "npm:^2.2.4"
+    metro-source-map: "npm:0.84.4"
+    nullthrows: "npm:^1.1.1"
+    source-map: "npm:^0.5.6"
+    vlq: "npm:^1.0.0"
+  bin:
+    metro-symbolicate: src/index.js
+  checksum: 10c0/416a9ef694150a8ec708187743b74ab67e0b4fec39c64610b3771b584830117670a62acb9aa824f84a44efbb1cfec07aaf943d1aaf349d977eecf7c72bd8c0bf
+  languageName: node
+  linkType: hard
+
+"metro-transform-plugins@npm:0.84.4":
+  version: 0.84.4
+  resolution: "metro-transform-plugins@npm:0.84.4"
+  dependencies:
+    "@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/7edb0c0d3655e9f5f5fb8bd8221ec297394b8730c959a3245ea81e50da8177ad7782f21696201a0dcb922281efd919e9548d5b819d8338e52d4b130f06333123
+  languageName: node
+  linkType: hard
+
+"metro-transform-worker@npm:0.84.4":
+  version: 0.84.4
+  resolution: "metro-transform-worker@npm:0.84.4"
+  dependencies:
+    "@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.84.4"
+    metro-babel-transformer: "npm:0.84.4"
+    metro-cache: "npm:0.84.4"
+    metro-cache-key: "npm:0.84.4"
+    metro-minify-terser: "npm:0.84.4"
+    metro-source-map: "npm:0.84.4"
+    metro-transform-plugins: "npm:0.84.4"
+    nullthrows: "npm:^1.1.1"
+  checksum: 10c0/95924f9bcaf6df931bba2783f440d8fab29909bdde8cecdcc3bc7603e7de71e51728a34288f045694b616c94216d1fc683493b8a470e074c9c8a7f220aa9f9b5
+  languageName: node
+  linkType: hard
+
+"metro@npm:0.84.4, metro@npm:^0.84.3":
+  version: 0.84.4
+  resolution: "metro@npm:0.84.4"
+  dependencies:
+    "@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"
+    ci-info: "npm:^2.0.0"
+    connect: "npm:^3.6.5"
+    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.35.0"
+    image-size: "npm:^1.0.2"
+    invariant: "npm:^2.2.4"
+    jest-worker: "npm:^29.7.0"
+    jsc-safe-url: "npm:^0.2.2"
+    lodash.throttle: "npm:^4.1.1"
+    metro-babel-transformer: "npm:0.84.4"
+    metro-cache: "npm:0.84.4"
+    metro-cache-key: "npm:0.84.4"
+    metro-config: "npm:0.84.4"
+    metro-core: "npm:0.84.4"
+    metro-file-map: "npm:0.84.4"
+    metro-resolver: "npm:0.84.4"
+    metro-runtime: "npm:0.84.4"
+    metro-source-map: "npm:0.84.4"
+    metro-symbolicate: "npm:0.84.4"
+    metro-transform-plugins: "npm:0.84.4"
+    metro-transform-worker: "npm:0.84.4"
+    mime-types: "npm:^3.0.1"
+    nullthrows: "npm:^1.1.1"
+    serialize-error: "npm:^2.1.0"
+    source-map: "npm:^0.5.6"
+    throat: "npm:^5.0.0"
+    ws: "npm:^7.5.10"
+    yargs: "npm:^17.6.2"
+  bin:
+    metro: src/cli.js
+  checksum: 10c0/ff92915119db29cd855274f3789d391cba83c50cb92e22d1e9b8c729e7f6d39495e32540a22ca4c6591eea6a847ade49fcfa5faab01b2300227e3f1fc7df359c
+  languageName: node
+  linkType: hard
+
+"micromark-core-commonmark@npm:^2.0.0":
+  version: 2.0.3
+  resolution: "micromark-core-commonmark@npm:2.0.3"
+  dependencies:
+    decode-named-character-reference: "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    micromark-factory-destination: "npm:^2.0.0"
+    micromark-factory-label: "npm:^2.0.0"
+    micromark-factory-space: "npm:^2.0.0"
+    micromark-factory-title: "npm:^2.0.0"
+    micromark-factory-whitespace: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-chunked: "npm:^2.0.0"
+    micromark-util-classify-character: "npm:^2.0.0"
+    micromark-util-html-tag-name: "npm:^2.0.0"
+    micromark-util-normalize-identifier: "npm:^2.0.0"
+    micromark-util-resolve-all: "npm:^2.0.0"
+    micromark-util-subtokenize: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/bd4a794fdc9e88dbdf59eaf1c507ddf26e5f7ddf4e52566c72239c0f1b66adbcd219ba2cd42350debbe24471434d5f5e50099d2b3f4e5762ca222ba8e5b549ee
+  languageName: node
+  linkType: hard
+
+"micromark-extension-cjk-friendly-gfm-strikethrough@npm:2.0.1":
+  version: 2.0.1
+  resolution: "micromark-extension-cjk-friendly-gfm-strikethrough@npm:2.0.1"
+  dependencies:
+    devlop: "npm:^1.1.0"
+    get-east-asian-width: "npm:^1.4.0"
+    micromark-extension-cjk-friendly-util: "npm:3.0.1"
+    micromark-util-character: "npm:^2.1.1"
+    micromark-util-chunked: "npm:^2.0.1"
+    micromark-util-resolve-all: "npm:^2.0.1"
+    micromark-util-symbol: "npm:^2.0.1"
+  peerDependencies:
+    micromark: ^4.0.0
+    micromark-util-types: ^2.0.0
+  peerDependenciesMeta:
+    micromark-util-types:
+      optional: true
+  checksum: 10c0/6e51e6101fc287322b12379b32052fb6cbfdb1f427f87671d1b5a3b9d4fc685b60eb8a01f897bb5fc1aeae6197ec668e8f0a3179db80870b11e295cc2fe4bbb3
+  languageName: node
+  linkType: hard
+
+"micromark-extension-cjk-friendly-util@npm:3.0.1":
+  version: 3.0.1
+  resolution: "micromark-extension-cjk-friendly-util@npm:3.0.1"
+  dependencies:
+    get-east-asian-width: "npm:^1.4.0"
+    micromark-util-character: "npm:^2.1.1"
+    micromark-util-symbol: "npm:^2.0.1"
+  peerDependenciesMeta:
+    micromark-util-types:
+      optional: true
+  checksum: 10c0/5a9210b21fcf38b6b6f17dd49587eb70cc17001294e49a81cc128975be8fcb7654d70ed198280c7d56e8664338c1cbe0ca9d4ecbe57348e380f0552b7178602c
+  languageName: node
+  linkType: hard
+
+"micromark-extension-cjk-friendly@npm:2.0.1":
+  version: 2.0.1
+  resolution: "micromark-extension-cjk-friendly@npm:2.0.1"
+  dependencies:
+    devlop: "npm:^1.1.0"
+    micromark-extension-cjk-friendly-util: "npm:3.0.1"
+    micromark-util-chunked: "npm:^2.0.1"
+    micromark-util-resolve-all: "npm:^2.0.1"
+    micromark-util-symbol: "npm:^2.0.1"
+  peerDependencies:
+    micromark: ^4.0.0
+    micromark-util-types: ^2.0.0
+  peerDependenciesMeta:
+    micromark-util-types:
+      optional: true
+  checksum: 10c0/23bd7aabecc83f58508e29a181cf1baa5ad7e0612e1a227cdbd445214afbfd47e9bb2100e740d15728078eaeedd7820cdc70585f36c62ecb70e38bd6e017afa4
+  languageName: node
+  linkType: hard
+
+"micromark-extension-gfm-autolink-literal@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "micromark-extension-gfm-autolink-literal@npm:2.1.0"
+  dependencies:
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-sanitize-uri: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/84e6fbb84ea7c161dfa179665dc90d51116de4c28f3e958260c0423e5a745372b7dcbc87d3cde98213b532e6812f847eef5ae561c9397d7f7da1e59872ef3efe
+  languageName: node
+  linkType: hard
+
+"micromark-extension-gfm-footnote@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "micromark-extension-gfm-footnote@npm:2.1.0"
+  dependencies:
+    devlop: "npm:^1.0.0"
+    micromark-core-commonmark: "npm:^2.0.0"
+    micromark-factory-space: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-normalize-identifier: "npm:^2.0.0"
+    micromark-util-sanitize-uri: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/d172e4218968b7371b9321af5cde8c77423f73b233b2b0fcf3ff6fd6f61d2e0d52c49123a9b7910612478bf1f0d5e88c75a3990dd68f70f3933fe812b9f77edc
+  languageName: node
+  linkType: hard
+
+"micromark-extension-gfm-strikethrough@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "micromark-extension-gfm-strikethrough@npm:2.1.0"
+  dependencies:
+    devlop: "npm:^1.0.0"
+    micromark-util-chunked: "npm:^2.0.0"
+    micromark-util-classify-character: "npm:^2.0.0"
+    micromark-util-resolve-all: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/ef4f248b865bdda71303b494671b7487808a340b25552b11ca6814dff3fcfaab9be8d294643060bbdb50f79313e4a686ab18b99cbe4d3ee8a4170fcd134234fb
+  languageName: node
+  linkType: hard
+
+"micromark-extension-gfm-table@npm:^2.0.0":
+  version: 2.1.1
+  resolution: "micromark-extension-gfm-table@npm:2.1.1"
+  dependencies:
+    devlop: "npm:^1.0.0"
+    micromark-factory-space: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/04bc00e19b435fa0add62cd029d8b7eb6137522f77832186b1d5ef34544a9bd030c9cf85e92ddfcc5c31f6f0a58a43d4b96dba4fc21316037c734630ee12c912
+  languageName: node
+  linkType: hard
+
+"micromark-extension-gfm-tagfilter@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-extension-gfm-tagfilter@npm:2.0.0"
+  dependencies:
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/995558843fff137ae4e46aecb878d8a4691cdf23527dcf1e2f0157d66786be9f7bea0109c52a8ef70e68e3f930af811828ba912239438e31a9cfb9981f44d34d
+  languageName: node
+  linkType: hard
+
+"micromark-extension-gfm-task-list-item@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "micromark-extension-gfm-task-list-item@npm:2.1.0"
+  dependencies:
+    devlop: "npm:^1.0.0"
+    micromark-factory-space: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/78aa537d929e9309f076ba41e5edc99f78d6decd754b6734519ccbbfca8abd52e1c62df68d41a6ae64d2a3fc1646cea955893c79680b0b4385ced4c52296181f
+  languageName: node
+  linkType: hard
+
+"micromark-extension-gfm@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "micromark-extension-gfm@npm:3.0.0"
+  dependencies:
+    micromark-extension-gfm-autolink-literal: "npm:^2.0.0"
+    micromark-extension-gfm-footnote: "npm:^2.0.0"
+    micromark-extension-gfm-strikethrough: "npm:^2.0.0"
+    micromark-extension-gfm-table: "npm:^2.0.0"
+    micromark-extension-gfm-tagfilter: "npm:^2.0.0"
+    micromark-extension-gfm-task-list-item: "npm:^2.0.0"
+    micromark-util-combine-extensions: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/970e28df6ebdd7c7249f52a0dda56e0566fbfa9ae56c8eeeb2445d77b6b89d44096880cd57a1c01e7821b1f4e31009109fbaca4e89731bff7b83b8519690e5d9
+  languageName: node
+  linkType: hard
+
+"micromark-extension-mdx-expression@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "micromark-extension-mdx-expression@npm:3.0.1"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    micromark-factory-mdx-expression: "npm:^2.0.0"
+    micromark-factory-space: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-events-to-acorn: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/4d8cc5353b083b06bd51c98389de9c198261a5b2b440b75e85000a18d10511f21ba77538d6dfde0e0589df9de3fba9a1d14c2448d30c92d6b461c26d86e397f4
+  languageName: node
+  linkType: hard
+
+"micromark-extension-mdx-jsx@npm:^3.0.0":
+  version: 3.0.2
+  resolution: "micromark-extension-mdx-jsx@npm:3.0.2"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    estree-util-is-identifier-name: "npm:^3.0.0"
+    micromark-factory-mdx-expression: "npm:^2.0.0"
+    micromark-factory-space: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-events-to-acorn: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+    vfile-message: "npm:^4.0.0"
+  checksum: 10c0/5693b2e51934ac29a6aab521eaa2151f891d1fe092550bbd4ce24e4dd7567c1421a54f5e585a57dfa1769a79570f6df57ddd7a98bf0889dd11d495847a266dd7
+  languageName: node
+  linkType: hard
+
+"micromark-extension-mdx-md@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-extension-mdx-md@npm:2.0.0"
   dependencies:
-    "@types/minimist": "npm:^1.2.0"
-    camelcase-keys: "npm:^6.2.2"
-    decamelize-keys: "npm:^1.1.0"
-    hard-rejection: "npm:^2.1.0"
-    minimist-options: "npm:4.1.0"
-    normalize-package-data: "npm:^3.0.0"
-    read-pkg-up: "npm:^7.0.1"
-    redent: "npm:^3.0.0"
-    trim-newlines: "npm:^3.0.0"
-    type-fest: "npm:^0.18.0"
-    yargs-parser: "npm:^20.2.3"
-  checksum: 10c0/9a8d90e616f783650728a90f4ea1e5f763c1c5260369e6596b52430f877f4af8ecbaa8c9d952c93bbefd6d5bda4caed6a96a20ba7d27b511d2971909b01922a2
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/bae91c61273de0e5ba80a980c03470e6cd9d7924aa936f46fbda15d780704d9386e945b99eda200e087b96254fbb4271a9545d5ce02676cd6ae67886a8bf82df
   languageName: node
   linkType: hard
 
-"merge-descriptors@npm:1.0.3":
-  version: 1.0.3
-  resolution: "merge-descriptors@npm:1.0.3"
-  checksum: 10c0/866b7094afd9293b5ea5dcd82d71f80e51514bed33b4c4e9f516795dc366612a4cbb4dc94356e943a8a6914889a914530badff27f397191b9b75cda20b6bae93
+"micromark-extension-mdxjs-esm@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "micromark-extension-mdxjs-esm@npm:3.0.0"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    micromark-core-commonmark: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-events-to-acorn: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+    unist-util-position-from-estree: "npm:^2.0.0"
+    vfile-message: "npm:^4.0.0"
+  checksum: 10c0/13e3f726495a960650cdedcba39198ace5bdc953ccb12c14d71fc9ed9bb88e40cc3ba9231e973f6984da3b3573e7ddb23ce409f7c16f52a8d57b608bf46c748d
   languageName: node
   linkType: hard
 
-"merge-options@npm:^3.0.4":
-  version: 3.0.4
-  resolution: "merge-options@npm:3.0.4"
+"micromark-extension-mdxjs@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "micromark-extension-mdxjs@npm:3.0.0"
   dependencies:
-    is-plain-obj: "npm:^2.1.0"
-  checksum: 10c0/02b5891ceef09b0b497b5a0154c37a71784e68ed71b14748f6fd4258ffd3fe4ecd5cb0fd6f7cae3954fd11e7686c5cb64486daffa63c2793bbe8b614b61c7055
+    acorn: "npm:^8.0.0"
+    acorn-jsx: "npm:^5.0.0"
+    micromark-extension-mdx-expression: "npm:^3.0.0"
+    micromark-extension-mdx-jsx: "npm:^3.0.0"
+    micromark-extension-mdx-md: "npm:^2.0.0"
+    micromark-extension-mdxjs-esm: "npm:^3.0.0"
+    micromark-util-combine-extensions: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/fd84f036ddad0aabbc12e7f1b3e9dcfe31573bbc413c5ae903779ef0366d7a4c08193547e7ba75718c9f45654e45f52e575cfc2f23a5f89205a8a70d9a506aea
   languageName: node
   linkType: hard
 
-"merge-stream@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "merge-stream@npm:2.0.0"
-  checksum: 10c0/867fdbb30a6d58b011449b8885601ec1690c3e41c759ecd5a9d609094f7aed0096c37823ff4a7190ef0b8f22cc86beb7049196ff68c016e3b3c671d0dac91ce5
+"micromark-factory-destination@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-factory-destination@npm:2.0.1"
+  dependencies:
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/bbafcf869cee5bf511161354cb87d61c142592fbecea051000ff116068dc85216e6d48519d147890b9ea5d7e2864a6341c0c09d9948c203bff624a80a476023c
   languageName: node
   linkType: hard
 
-"merge2@npm:^1.3.0, merge2@npm:^1.4.1":
-  version: 1.4.1
-  resolution: "merge2@npm:1.4.1"
-  checksum: 10c0/254a8a4605b58f450308fc474c82ac9a094848081bf4c06778200207820e5193726dc563a0d2c16468810516a5c97d9d3ea0ca6585d23c58ccfff2403e8dbbeb
+"micromark-factory-label@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-factory-label@npm:2.0.1"
+  dependencies:
+    devlop: "npm:^1.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/0137716b4ecb428114165505e94a2f18855c8bbea21b07a8b5ce514b32a595ed789d2b967125718fc44c4197ceaa48f6609d58807a68e778138d2e6b91b824e8
   languageName: node
   linkType: hard
 
-"methods@npm:~1.1.2":
-  version: 1.1.2
-  resolution: "methods@npm:1.1.2"
-  checksum: 10c0/bdf7cc72ff0a33e3eede03708c08983c4d7a173f91348b4b1e4f47d4cdbf734433ad971e7d1e8c77247d9e5cd8adb81ea4c67b0a2db526b758b2233d7814b8b2
+"micromark-factory-mdx-expression@npm:^2.0.0":
+  version: 2.0.3
+  resolution: "micromark-factory-mdx-expression@npm:2.0.3"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    micromark-factory-space: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-events-to-acorn: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+    unist-util-position-from-estree: "npm:^2.0.0"
+    vfile-message: "npm:^4.0.0"
+  checksum: 10c0/a6004ef6272dd01a5d718f2affd7bfb5e08f0849340f5fd96ac823fbc5e9d3b3343acedda50805873ccda5e3b8af4d5fbb302abc874544044ac90c217345cf97
   languageName: node
   linkType: hard
 
-"metro-babel-transformer@npm:0.83.3":
-  version: 0.83.3
-  resolution: "metro-babel-transformer@npm:0.83.3"
+"micromark-factory-space@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-factory-space@npm:2.0.1"
   dependencies:
-    "@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/b0107f86cdc9ef9419d669b5b3dac22e35b02c67c480563a63d98f5fb50953587938769efc854bfc09c225557790cd6488dbe3fed6f05c2b3f322cfb2e5ff577
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/f9ed43f1c0652d8d898de0ac2be3f77f776fffe7dd96bdbba1e02d7ce33d3853c6ff5daa52568fc4fa32cdf3a62d86b85ead9b9189f7211e1d69ff2163c450fb
   languageName: node
   linkType: hard
 
-"metro-cache-key@npm:0.83.3":
-  version: 0.83.3
-  resolution: "metro-cache-key@npm:0.83.3"
+"micromark-factory-title@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-factory-title@npm:2.0.1"
   dependencies:
-    flow-enums-runtime: "npm:^0.0.6"
-  checksum: 10c0/403a2ca5b5bbb31a979effaa31fba0c47e2eb3830428c39c99db58aa0739a6fcc386f5a56c91495c53a4569065f0bda29e3038e9c41ca17af443971395f257dc
+    micromark-factory-space: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/e72fad8d6e88823514916890099a5af20b6a9178ccf78e7e5e05f4de99bb8797acb756257d7a3a57a53854cb0086bf8aab15b1a9e9db8982500dd2c9ff5948b6
   languageName: node
   linkType: hard
 
-"metro-cache@npm:0.83.3":
-  version: 0.83.3
-  resolution: "metro-cache@npm:0.83.3"
+"micromark-factory-whitespace@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-factory-whitespace@npm:2.0.1"
   dependencies:
-    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
+    micromark-factory-space: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/20a1ec58698f24b766510a309b23a10175034fcf1551eaa9da3adcbed3e00cd53d1ebe5f030cf873f76a1cec3c34eb8c50cc227be3344caa9ed25d56cf611224
   languageName: node
   linkType: hard
 
-"metro-config@npm:0.83.3, metro-config@npm:^0.83.1":
-  version: 0.83.3
-  resolution: "metro-config@npm:0.83.3"
+"micromark-util-character@npm:^2.0.0, micromark-util-character@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "micromark-util-character@npm:2.1.1"
   dependencies:
-    connect: "npm:^3.6.5"
-    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
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/d3fe7a5e2c4060fc2a076f9ce699c82a2e87190a3946e1e5eea77f563869b504961f5668d9c9c014724db28ac32fa909070ea8b30c3a39bd0483cc6c04cc76a1
   languageName: node
   linkType: hard
 
-"metro-core@npm:0.83.3, metro-core@npm:^0.83.1":
-  version: 0.83.3
-  resolution: "metro-core@npm:0.83.3"
+"micromark-util-chunked@npm:^2.0.0, micromark-util-chunked@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "micromark-util-chunked@npm:2.0.1"
   dependencies:
-    flow-enums-runtime: "npm:^0.0.6"
-    lodash.throttle: "npm:^4.1.1"
-    metro-resolver: "npm:0.83.3"
-  checksum: 10c0/d44c1f117c4b27f18abd27110e9536abf3105733e8fccaa522bd0e008248cce0260130517840c4914d7ce5df498f39ecfd43b6046a0f0b1c0f8ada7de38e52c4
+    micromark-util-symbol: "npm:^2.0.0"
+  checksum: 10c0/b68c0c16fe8106949537bdcfe1be9cf36c0ccd3bc54c4007003cb0984c3750b6cdd0fd77d03f269a3382b85b0de58bde4f6eedbe7ecdf7244759112289b1ab56
   languageName: node
   linkType: hard
 
-"metro-file-map@npm:0.83.3":
-  version: 0.83.3
-  resolution: "metro-file-map@npm:0.83.3"
+"micromark-util-classify-character@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-classify-character@npm:2.0.1"
   dependencies:
-    debug: "npm:^4.4.0"
-    fb-watchman: "npm:^2.0.0"
-    flow-enums-runtime: "npm:^0.0.6"
-    graceful-fs: "npm:^4.2.4"
-    invariant: "npm:^2.2.4"
-    jest-worker: "npm:^29.7.0"
-    micromatch: "npm:^4.0.4"
-    nullthrows: "npm:^1.1.1"
-    walker: "npm:^1.0.7"
-  checksum: 10c0/4bf9c0fcdb5a5c08851f7370d6427fb68a770f156c4eabbddf20bd3583fb25ae428507eaeb8dc525e792db41d048620209750f33735055863abc909cbb6ef71a
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/8a02e59304005c475c332f581697e92e8c585bcd45d5d225a66c1c1b14ab5a8062705188c2ccec33cc998d33502514121478b2091feddbc751887fc9c290ed08
   languageName: node
   linkType: hard
 
-"metro-minify-terser@npm:0.83.3":
-  version: 0.83.3
-  resolution: "metro-minify-terser@npm:0.83.3"
+"micromark-util-combine-extensions@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-combine-extensions@npm:2.0.1"
   dependencies:
-    flow-enums-runtime: "npm:^0.0.6"
-    terser: "npm:^5.15.0"
-  checksum: 10c0/9158e3199c0ea647776a7ed5c68ec1bb493f5347ac979f1ca75020cf1c39f907bd29983d60f8cb24dca17053d6b5c35f140c6d720fad0bd0fa9728e8c51e95c6
+    micromark-util-chunked: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/f15e282af24c8372cbb10b9b0b3e2c0aa681fea0ca323a44d6bc537dc1d9382c819c3689f14eaa000118f5a163245358ce6276b2cda9a84439cdb221f5d86ae7
   languageName: node
   linkType: hard
 
-"metro-resolver@npm:0.83.3":
-  version: 0.83.3
-  resolution: "metro-resolver@npm:0.83.3"
+"micromark-util-decode-numeric-character-reference@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "micromark-util-decode-numeric-character-reference@npm:2.0.2"
   dependencies:
-    flow-enums-runtime: "npm:^0.0.6"
-  checksum: 10c0/1d6c030a00b987fbee38e5c632219b2be602e38c9aa9628bb4b591f646e64130d08adb8dcb35076c5c8cc151135557b655f3dee514c0df9f26d3416629eb006b
+    micromark-util-symbol: "npm:^2.0.0"
+  checksum: 10c0/9c8a9f2c790e5593ffe513901c3a110e9ec8882a08f466da014112a25e5059b51551ca0aeb7ff494657d86eceb2f02ee556c6558b8d66aadc61eae4a240da0df
   languageName: node
   linkType: hard
 
-"metro-runtime@npm:0.83.3, metro-runtime@npm:^0.83.1":
-  version: 0.83.3
-  resolution: "metro-runtime@npm:0.83.3"
+"micromark-util-decode-string@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-decode-string@npm:2.0.1"
   dependencies:
-    "@babel/runtime": "npm:^7.25.0"
-    flow-enums-runtime: "npm:^0.0.6"
-  checksum: 10c0/1d788483b6c2f13e0ea9ff4564996154754d3de84f683812ac848053eaea9243144adee3e8ffe90789e6c253f7402211d72b1b5ebf09e6c23841bc956a680253
+    decode-named-character-reference: "npm:^1.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-decode-numeric-character-reference: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+  checksum: 10c0/f24d75b2e5310be6e7b6dee532e0d17d3bf46996841d6295f2a9c87a2046fff4ab603c52ab9d7a7a6430a8b787b1574ae895849c603d262d1b22eef71736b5cb
   languageName: node
   linkType: hard
 
-"metro-source-map@npm:0.83.3, metro-source-map@npm:^0.83.1":
-  version: 0.83.3
-  resolution: "metro-source-map@npm:0.83.3"
-  dependencies:
-    "@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.83.3"
-    nullthrows: "npm:^1.1.1"
-    ob1: "npm:0.83.3"
-    source-map: "npm:^0.5.6"
-    vlq: "npm:^1.0.0"
-  checksum: 10c0/47e984bde1f8f06348298771f44b5803657c9cfa387df8ff36a359cc72ae3bc0e9c4ea6141345609b183ac8c63dcc997000d3626006e388c24779abb57c6f82c
+"micromark-util-encode@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-encode@npm:2.0.1"
+  checksum: 10c0/b2b29f901093845da8a1bf997ea8b7f5e061ffdba85070dfe14b0197c48fda64ffcf82bfe53c90cf9dc185e69eef8c5d41cae3ba918b96bc279326921b59008a
   languageName: node
   linkType: hard
 
-"metro-symbolicate@npm:0.83.3":
-  version: 0.83.3
-  resolution: "metro-symbolicate@npm:0.83.3"
+"micromark-util-events-to-acorn@npm:^2.0.0":
+  version: 2.0.3
+  resolution: "micromark-util-events-to-acorn@npm:2.0.3"
   dependencies:
-    flow-enums-runtime: "npm:^0.0.6"
-    invariant: "npm:^2.2.4"
-    metro-source-map: "npm:0.83.3"
-    nullthrows: "npm:^1.1.1"
-    source-map: "npm:^0.5.6"
-    vlq: "npm:^1.0.0"
-  bin:
-    metro-symbolicate: src/index.js
-  checksum: 10c0/bd3d234c7581466a9a78f952caa25816666753f6b560fe41502727b3e59931ac65225c9909635dc7c25d4dfaf392631366ef3ec5fa8490413385d60f8d900112
+    "@types/estree": "npm:^1.0.0"
+    "@types/unist": "npm:^3.0.0"
+    devlop: "npm:^1.0.0"
+    estree-util-visit: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+    vfile-message: "npm:^4.0.0"
+  checksum: 10c0/a4e0716e943ffdd16a918edf51d4f8291ec2692f5c4d04693dbef3358716fba891f288197afd102c14f4d98dac09d52351046ab7aad1d50b74677bdd5fa683c0
+  languageName: node
+  linkType: hard
+
+"micromark-util-html-tag-name@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-html-tag-name@npm:2.0.1"
+  checksum: 10c0/ae80444db786fde908e9295f19a27a4aa304171852c77414516418650097b8afb401961c9edb09d677b06e97e8370cfa65638dde8438ebd41d60c0a8678b85b9
   languageName: node
   linkType: hard
 
-"metro-transform-plugins@npm:0.83.3":
-  version: 0.83.3
-  resolution: "metro-transform-plugins@npm:0.83.3"
+"micromark-util-normalize-identifier@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-normalize-identifier@npm:2.0.1"
   dependencies:
-    "@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/df3c6db6a69d4888e1b6aad40d48ffec0c3c3faa38e89c07633432fc107ef12c47d55598904c91aadfe0751c5bcb7ec191f8a5ee70c18d253201150fc617ca37
+    micromark-util-symbol: "npm:^2.0.0"
+  checksum: 10c0/5299265fa360769fc499a89f40142f10a9d4a5c3dd8e6eac8a8ef3c2e4a6570e4c009cf75ea46dce5ee31c01f25587bde2f4a5cc0a935584ae86dd857f2babbd
   languageName: node
   linkType: hard
 
-"metro-transform-worker@npm:0.83.3":
-  version: 0.83.3
-  resolution: "metro-transform-worker@npm:0.83.3"
+"micromark-util-resolve-all@npm:^2.0.0, micromark-util-resolve-all@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "micromark-util-resolve-all@npm:2.0.1"
   dependencies:
-    "@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/bea0cbcc7d13cd2b97a2159257b3a53b9ecfb15da18ace82ae05bf2d0ac7cc1806c0bd77ed3b8f4c82c9532773fb99f3938e4b1480e2673f5eda69575ee1d7ef
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/bb6ca28764696bb479dc44a2d5b5fe003e7177aeae1d6b0d43f24cc223bab90234092d9c3ce4a4d2b8df095ccfd820537b10eb96bb7044d635f385d65a4c984a
   languageName: node
   linkType: hard
 
-"metro@npm:0.83.3, metro@npm:^0.83.1":
-  version: 0.83.3
-  resolution: "metro@npm:0.83.3"
+"micromark-util-sanitize-uri@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-sanitize-uri@npm:2.0.1"
   dependencies:
-    "@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"
-    chalk: "npm:^4.0.0"
-    ci-info: "npm:^2.0.0"
-    connect: "npm:^3.6.5"
-    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.32.0"
-    image-size: "npm:^1.0.2"
-    invariant: "npm:^2.2.4"
-    jest-worker: "npm:^29.7.0"
-    jsc-safe-url: "npm:^0.2.2"
-    lodash.throttle: "npm:^4.1.1"
-    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"
-    nullthrows: "npm:^1.1.1"
-    serialize-error: "npm:^2.1.0"
-    source-map: "npm:^0.5.6"
-    throat: "npm:^5.0.0"
-    ws: "npm:^7.5.10"
-    yargs: "npm:^17.6.2"
-  bin:
-    metro: src/cli.js
-  checksum: 10c0/9513c05725c3984ce3b72896c4f7d019ad4fd024a1231b8b84c5c655a0563fc7f26725f28c20c5d3511e3825d64fec3a1e68621f6a6af34d785c5e714ed7da89
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-encode: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+  checksum: 10c0/60e92166e1870fd4f1961468c2651013ff760617342918e0e0c3c4e872433aa2e60c1e5a672bfe5d89dc98f742d6b33897585cf86ae002cda23e905a3c02527c
   languageName: node
   linkType: hard
 
-"micromatch@npm:^2.1.5":
-  version: 2.3.11
-  resolution: "micromatch@npm:2.3.11"
+"micromark-util-subtokenize@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "micromark-util-subtokenize@npm:2.1.0"
   dependencies:
-    arr-diff: "npm:^2.0.0"
-    array-unique: "npm:^0.2.1"
-    braces: "npm:^1.8.2"
-    expand-brackets: "npm:^0.1.4"
-    extglob: "npm:^0.3.1"
-    filename-regex: "npm:^2.0.0"
-    is-extglob: "npm:^1.0.0"
-    is-glob: "npm:^2.0.1"
-    kind-of: "npm:^3.0.2"
-    normalize-path: "npm:^2.0.1"
-    object.omit: "npm:^2.0.0"
-    parse-glob: "npm:^3.0.4"
-    regex-cache: "npm:^0.4.2"
-  checksum: 10c0/56864f45f5a76523a3b3fe7c07c1a19cb9e6a2078b1e5dd036bacdd6e65f5d8adc00679ebb785ab88d577fce80197f2d8fd6f5565188643f87d8a47f64f6127a
+    devlop: "npm:^1.0.0"
+    micromark-util-chunked: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/bee69eece4393308e657c293ba80d92ebcb637e5f55e21dcf9c3fa732b91a8eda8ac248d76ff375e675175bfadeae4712e5158ef97eef1111789da1ce7ab5067
+  languageName: node
+  linkType: hard
+
+"micromark-util-symbol@npm:^2.0.0, micromark-util-symbol@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "micromark-util-symbol@npm:2.0.1"
+  checksum: 10c0/f2d1b207771e573232436618e78c5e46cd4b5c560dd4a6d63863d58018abbf49cb96ec69f7007471e51434c60de3c9268ef2bf46852f26ff4aacd10f9da16fe9
+  languageName: node
+  linkType: hard
+
+"micromark-util-types@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "micromark-util-types@npm:2.0.2"
+  checksum: 10c0/c8c15b96c858db781c4393f55feec10004bf7df95487636c9a9f7209e51002a5cca6a047c5d2a5dc669ff92da20e57aaa881e81a268d9ccadb647f9dce305298
   languageName: node
   linkType: hard
 
-"micromatch@npm:^3.1.10, micromatch@npm:^3.1.4":
+"micromark@npm:^4.0.0":
+  version: 4.0.2
+  resolution: "micromark@npm:4.0.2"
+  dependencies:
+    "@types/debug": "npm:^4.0.0"
+    debug: "npm:^4.0.0"
+    decode-named-character-reference: "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    micromark-core-commonmark: "npm:^2.0.0"
+    micromark-factory-space: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-chunked: "npm:^2.0.0"
+    micromark-util-combine-extensions: "npm:^2.0.0"
+    micromark-util-decode-numeric-character-reference: "npm:^2.0.0"
+    micromark-util-encode: "npm:^2.0.0"
+    micromark-util-normalize-identifier: "npm:^2.0.0"
+    micromark-util-resolve-all: "npm:^2.0.0"
+    micromark-util-sanitize-uri: "npm:^2.0.0"
+    micromark-util-subtokenize: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/07462287254219d6eda6eac8a3cebaff2994e0575499e7088027b825105e096e4f51e466b14b2a81b71933a3b6c48ee069049d87bc2c2127eee50d9cc69e8af6
+  languageName: node
+  linkType: hard
+
+"micromatch@npm:^3.1.4":
   version: 3.1.10
   resolution: "micromatch@npm:3.1.10"
   dependencies:
@@ -17054,7 +15916,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.5, micromatch@npm:^4.0.8":
+"micromatch@npm:^4.0.4, micromatch@npm:^4.0.8":
   version: 4.0.8
   resolution: "micromatch@npm:4.0.8"
   dependencies:
@@ -17078,29 +15940,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mime-db@npm:>= 1.43.0 < 2":
+"mime-db@npm:>= 1.43.0 < 2, mime-db@npm:^1.54.0":
   version: 1.54.0
   resolution: "mime-db@npm:1.54.0"
   checksum: 10c0/8d907917bc2a90fa2df842cdf5dfeaf509adc15fe0531e07bb2f6ab15992416479015828d6a74200041c492e42cce3ebf78e5ce714388a0a538ea9c53eece284
   languageName: node
   linkType: hard
 
-"mime-db@npm:~1.33.0":
-  version: 1.33.0
-  resolution: "mime-db@npm:1.33.0"
-  checksum: 10c0/79172ce5468c8503b49dddfdddc18d3f5fe2599f9b5fe1bc321a8cbee14c96730fc6db22f907b23701b05b2936f865795f62ec3a78a7f3c8cb2450bb68c6763e
-  languageName: node
-  linkType: hard
-
-"mime-types@npm:2.1.18":
-  version: 2.1.18
-  resolution: "mime-types@npm:2.1.18"
-  dependencies:
-    mime-db: "npm:~1.33.0"
-  checksum: 10c0/a96a8d12f4bb98bc7bfac6a8ccbd045f40368fc1030d9366050c3613825d3715d1c1f393e10a75a885d2cdc1a26cd6d5e11f3a2a0d5c4d361f00242139430a0f
-  languageName: node
-  linkType: hard
-
 "mime-types@npm:2.1.31":
   version: 2.1.31
   resolution: "mime-types@npm:2.1.31"
@@ -17110,7 +15956,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mime-types@npm:^2.1.12, mime-types@npm:^2.1.27, mime-types@npm:^2.1.30, mime-types@npm:^2.1.31, mime-types@npm:~2.1.17, mime-types@npm:~2.1.24, mime-types@npm:~2.1.34":
+"mime-types@npm:^2.1.12, mime-types@npm:^2.1.27, mime-types@npm:^2.1.30, mime-types@npm:~2.1.24, mime-types@npm:~2.1.34":
   version: 2.1.35
   resolution: "mime-types@npm:2.1.35"
   dependencies:
@@ -17119,6 +15965,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mime-types@npm:^3.0.0, mime-types@npm:^3.0.1":
+  version: 3.0.2
+  resolution: "mime-types@npm:3.0.2"
+  dependencies:
+    mime-db: "npm:^1.54.0"
+  checksum: 10c0/35a0dd1035d14d185664f346efcdb72e93ef7a9b6e9ae808bd1f6358227010267fab52657b37562c80fc888ff76becb2b2938deb5e730818b7983bf8bd359767
+  languageName: node
+  linkType: hard
+
 "mime@npm:1.6.0":
   version: 1.6.0
   resolution: "mime@npm:1.6.0"
@@ -17128,15 +15983,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"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"
@@ -17192,34 +16038,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mini-css-extract-plugin@npm:^2.5.2, mini-css-extract-plugin@npm:^2.6.1":
-  version: 2.9.4
-  resolution: "mini-css-extract-plugin@npm:2.9.4"
-  dependencies:
-    schema-utils: "npm:^4.0.0"
-    tapable: "npm:^2.2.1"
-  peerDependencies:
-    webpack: ^5.0.0
-  checksum: 10c0/76f9e471784d52435ea766ce576ad23d37d0ea51c32ddc56414c8fdf14f7de44202dbc772cdf7549b7e54a5e56f569af93cfbd036d62d13ff8fd9571e53353b7
-  languageName: node
-  linkType: hard
-
-"minimalistic-assert@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "minimalistic-assert@npm:1.0.1"
-  checksum: 10c0/96730e5601cd31457f81a296f521eb56036e6f69133c0b18c13fe941109d53ad23a4204d946a0d638d7f3099482a0cec8c9bb6d642604612ce43ee536be3dddd
-  languageName: node
-  linkType: hard
-
-"minimatch@npm:3.1.2, minimatch@npm:^3.0.2, minimatch@npm:^3.0.4, minimatch@npm:^3.0.5, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
-  version: 3.1.2
-  resolution: "minimatch@npm:3.1.2"
-  dependencies:
-    brace-expansion: "npm:^1.1.7"
-  checksum: 10c0/0262810a8fc2e72cca45d6fd86bd349eee435eb95ac6aa45c9ea2180e7ee875ef44c32b55b5973ceabe95ea12682f6e3725cbb63d7a2d1da3ae1163c8b210311
-  languageName: node
-  linkType: hard
-
 "minimatch@npm:^10.1.1":
   version: 10.1.1
   resolution: "minimatch@npm:10.1.1"
@@ -17229,30 +16047,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:^5.0.1":
-  version: 5.1.6
-  resolution: "minimatch@npm:5.1.6"
+"minimatch@npm:^10.2.2":
+  version: 10.2.5
+  resolution: "minimatch@npm:10.2.5"
   dependencies:
-    brace-expansion: "npm:^2.0.1"
-  checksum: 10c0/3defdfd230914f22a8da203747c42ee3c405c39d4d37ffda284dac5e45b7e1f6c49aa8be606509002898e73091ff2a3bbfc59c2c6c71d4660609f63aa92f98e3
+    brace-expansion: "npm:^5.0.5"
+  checksum: 10c0/6bb058bd6324104b9ec2f763476a35386d05079c1f5fe4fbf1f324a25237cd4534d6813ecd71f48208f4e635c1221899bef94c3c89f7df55698fe373aaae20fd
   languageName: node
   linkType: hard
 
-"minimatch@npm:^8.0.2":
-  version: 8.0.4
-  resolution: "minimatch@npm:8.0.4"
+"minimatch@npm:^3.0.2, minimatch@npm:^3.0.4, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
+  version: 3.1.2
+  resolution: "minimatch@npm:3.1.2"
   dependencies:
-    brace-expansion: "npm:^2.0.1"
-  checksum: 10c0/a0a394c356dd5b4cb7f821720841a82fa6f07c9c562c5b716909d1b6ec5e56a7e4c4b5029da26dd256b7d2b3a3f38cbf9ddd8680e887b9b5282b09c05501c1ca
+    brace-expansion: "npm:^1.1.7"
+  checksum: 10c0/0262810a8fc2e72cca45d6fd86bd349eee435eb95ac6aa45c9ea2180e7ee875ef44c32b55b5973ceabe95ea12682f6e3725cbb63d7a2d1da3ae1163c8b210311
   languageName: node
   linkType: hard
 
-"minimatch@npm:^9.0.0":
-  version: 9.0.5
-  resolution: "minimatch@npm:9.0.5"
+"minimatch@npm:^3.1.5":
+  version: 3.1.5
+  resolution: "minimatch@npm:3.1.5"
   dependencies:
-    brace-expansion: "npm:^2.0.1"
-  checksum: 10c0/de96cf5e35bdf0eab3e2c853522f98ffbe9a36c37797778d2665231ec1f20a9447a7e567cb640901f89e4daaa95ae5d70c65a9e8aa2bb0019b6facbc3c0575ed
+    brace-expansion: "npm:^1.1.7"
+  checksum: 10c0/2ecbdc0d33f07bddb0315a8b5afbcb761307a8778b48f0b312418ccbced99f104a2d17d8aca7573433c70e8ccd1c56823a441897a45e384ea76ef401a26ace70
   languageName: node
   linkType: hard
 
@@ -17344,20 +16162,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minipass@npm:^4.2.4":
-  version: 4.2.8
-  resolution: "minipass@npm:4.2.8"
-  checksum: 10c0/4ea76b030d97079f4429d6e8a8affd90baf1b6a1898977c8ccce4701c5a2ba2792e033abc6709373f25c2c4d4d95440d9d5e9464b46b7b76ca44d2ce26d939ce
-  languageName: node
-  linkType: hard
-
-"minipass@npm:^5.0.0 || ^6.0.2 || ^7.0.0, minipass@npm:^7.0.2, minipass@npm:^7.0.3, minipass@npm:^7.0.4, minipass@npm:^7.1.2":
+"minipass@npm:^7.0.2, minipass@npm:^7.0.3, minipass@npm:^7.0.4, minipass@npm:^7.1.2":
   version: 7.1.2
   resolution: "minipass@npm:7.1.2"
   checksum: 10c0/b0fd20bb9fb56e5fa9a8bfac539e8915ae07430a619e4b86ff71f5fc757ef3924b23b2c4230393af1eda647ed3d75739e4e0acb250a6b1eb277cf7f8fe449557
   languageName: node
   linkType: hard
 
+"minipass@npm:^7.1.3":
+  version: 7.1.3
+  resolution: "minipass@npm:7.1.3"
+  checksum: 10c0/539da88daca16533211ea5a9ee98dc62ff5742f531f54640dd34429e621955e91cc280a91a776026264b7f9f6735947629f920944e9c1558369e8bf22eb33fbb
+  languageName: node
+  linkType: hard
+
 "minizlib@npm:^3.0.1, minizlib@npm:^3.1.0":
   version: 3.1.0
   resolution: "minizlib@npm:3.1.0"
@@ -17404,13 +16222,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mrmime@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "mrmime@npm:2.0.1"
-  checksum: 10c0/af05afd95af202fdd620422f976ad67dc18e6ee29beb03dd1ce950ea6ef664de378e44197246df4c7cdd73d47f2e7143a6e26e473084b9e4aa2095c0ad1e1761
-  languageName: node
-  linkType: hard
-
 "ms@npm:2.0.0":
   version: 2.0.0
   resolution: "ms@npm:2.0.0"
@@ -17432,46 +16243,64 @@ __metadata:
   languageName: node
   linkType: hard
 
-"multicast-dns@npm:^7.2.5":
-  version: 7.2.5
-  resolution: "multicast-dns@npm:7.2.5"
-  dependencies:
-    dns-packet: "npm:^5.2.2"
-    thunky: "npm:^1.0.2"
+"msgpackr-extract@npm:^3.0.2":
+  version: 3.0.3
+  resolution: "msgpackr-extract@npm:3.0.3"
+  dependencies:
+    "@msgpackr-extract/msgpackr-extract-darwin-arm64": "npm:3.0.3"
+    "@msgpackr-extract/msgpackr-extract-darwin-x64": "npm:3.0.3"
+    "@msgpackr-extract/msgpackr-extract-linux-arm": "npm:3.0.3"
+    "@msgpackr-extract/msgpackr-extract-linux-arm64": "npm:3.0.3"
+    "@msgpackr-extract/msgpackr-extract-linux-x64": "npm:3.0.3"
+    "@msgpackr-extract/msgpackr-extract-win32-x64": "npm:3.0.3"
+    node-gyp: "npm:latest"
+    node-gyp-build-optional-packages: "npm:5.2.2"
+  dependenciesMeta:
+    "@msgpackr-extract/msgpackr-extract-darwin-arm64":
+      optional: true
+    "@msgpackr-extract/msgpackr-extract-darwin-x64":
+      optional: true
+    "@msgpackr-extract/msgpackr-extract-linux-arm":
+      optional: true
+    "@msgpackr-extract/msgpackr-extract-linux-arm64":
+      optional: true
+    "@msgpackr-extract/msgpackr-extract-linux-x64":
+      optional: true
+    "@msgpackr-extract/msgpackr-extract-win32-x64":
+      optional: true
   bin:
-    multicast-dns: cli.js
-  checksum: 10c0/5120171d4bdb1577764c5afa96e413353bff530d1b37081cb29cccc747f989eb1baf40574fe8e27060fc1aef72b59c042f72b9b208413de33bcf411343c69057
+    download-msgpackr-prebuilds: bin/download-prebuilds.js
+  checksum: 10c0/e504fd8bf86a29d7527c83776530ee6dc92dcb0273bb3679fd4a85173efead7f0ee32fb82c8410a13c33ef32828c45f81118ffc0fbed5d6842e72299894623b4
   languageName: node
   linkType: hard
 
-"mute-stream@npm:0.0.8":
-  version: 0.0.8
-  resolution: "mute-stream@npm:0.0.8"
-  checksum: 10c0/18d06d92e5d6d45e2b63c0e1b8f25376af71748ac36f53c059baa8b76ffac31c5ab225480494e7d35d30215ecdb18fed26ec23cafcd2f7733f2f14406bcd19e2
+"msgpackr@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "msgpackr@npm:2.0.1"
+  dependencies:
+    msgpackr-extract: "npm:^3.0.2"
+  dependenciesMeta:
+    msgpackr-extract:
+      optional: true
+  checksum: 10c0/683eaaecf4835acb759e393cf5e76dd097354e1f3b35ed260539b4fd4e0da5523b93bbaf8fc1a956a06d9a60aa2571fe210159c6f2a29fd37a9b0fa54863b6a2
   languageName: node
   linkType: hard
 
-"mz@npm:^2.7.0":
-  version: 2.7.0
-  resolution: "mz@npm:2.7.0"
-  dependencies:
-    any-promise: "npm:^1.0.0"
-    object-assign: "npm:^4.0.1"
-    thenify-all: "npm:^1.0.0"
-  checksum: 10c0/103114e93f87362f0b56ab5b2e7245051ad0276b646e3902c98397d18bb8f4a77f2ea4a2c9d3ad516034ea3a56553b60d3f5f78220001ca4c404bd711bd0af39
+"multitars@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "multitars@npm:1.0.0"
+  checksum: 10c0/c3c432ae6c76f802270bfaff63de66ba740d8599503e78cca7c489d43968869509330f68329abd5d3dfc495790c47598fd3994a2cccb68b738d76eba66ae4b04
   languageName: node
   linkType: hard
 
-"nan@npm:^2.12.1":
-  version: 2.24.0
-  resolution: "nan@npm:2.24.0"
-  dependencies:
-    node-gyp: "npm:latest"
-  checksum: 10c0/6f9828a15464999ccefcae61b0f94f1f37067048a56363966e892cc6a194e3500966ae6964dd5a6a8acc5e1a849d60d620b120a84bc66c60445379a930c5b0f8
+"mute-stream@npm:0.0.8":
+  version: 0.0.8
+  resolution: "mute-stream@npm:0.0.8"
+  checksum: 10c0/18d06d92e5d6d45e2b63c0e1b8f25376af71748ac36f53c059baa8b76ffac31c5ab225480494e7d35d30215ecdb18fed26ec23cafcd2f7733f2f14406bcd19e2
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.1.23, nanoid@npm:^3.3.11, nanoid@npm:^3.3.7":
+"nanoid@npm:^3.3.11":
   version: 3.3.11
   resolution: "nanoid@npm:3.3.11"
   bin:
@@ -17480,6 +16309,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nanoid@npm:^5.1.7":
+  version: 5.1.11
+  resolution: "nanoid@npm:5.1.11"
+  bin:
+    nanoid: bin/nanoid.js
+  checksum: 10c0/91580d18c29263ac0e871734f0d86e7f906f523f974d3c30fc65354ccf387ccffd606c2a6c28acc2977a3950146347e790ce9e3f514133a48995af5ccdb308ce
+  languageName: node
+  linkType: hard
+
 "nanomatch@npm:^1.2.9":
   version: 1.2.13
   resolution: "nanomatch@npm:1.2.13"
@@ -17499,13 +16337,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"natural-compare-lite@npm:^1.4.0":
-  version: 1.4.0
-  resolution: "natural-compare-lite@npm:1.4.0"
-  checksum: 10c0/f6cef26f5044515754802c0fc475d81426f3b90fe88c20fabe08771ce1f736ce46e0397c10acb569a4dd0acb84c7f1ee70676122f95d5bfdd747af3a6c6bbaa8
-  languageName: node
-  linkType: hard
-
 "natural-compare@npm:^1.4.0":
   version: 1.4.0
   resolution: "natural-compare@npm:1.4.0"
@@ -17541,13 +16372,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nested-error-stacks@npm:~2.0.1":
-  version: 2.0.1
-  resolution: "nested-error-stacks@npm:2.0.1"
-  checksum: 10c0/125049632bc3ca2252e994ca07f27d795c0e6decc4077f0f4163348d30d7cb95409ceff6184284c95396aa5ea8ff5010673063db7674058b966b4f0228d4981c
-  languageName: node
-  linkType: hard
-
 "nice-try@npm:^1.0.4":
   version: 1.0.5
   resolution: "nice-try@npm:1.0.5"
@@ -17564,16 +16388,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"no-case@npm:^3.0.4":
-  version: 3.0.4
-  resolution: "no-case@npm:3.0.4"
-  dependencies:
-    lower-case: "npm:^2.0.2"
-    tslib: "npm:^2.0.3"
-  checksum: 10c0/8ef545f0b3f8677c848f86ecbd42ca0ff3cd9dd71c158527b344c69ba14710d816d8489c746b6ca225e7b615108938a0bda0a54706f8c255933703ac1cf8e703
-  languageName: node
-  linkType: hard
-
 "node-dir@npm:^0.1.10":
   version: 0.1.17
   resolution: "node-dir@npm:0.1.17"
@@ -17583,15 +16397,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-emoji@npm:^1.10.0":
-  version: 1.11.0
-  resolution: "node-emoji@npm:1.11.0"
-  dependencies:
-    lodash: "npm:^4.17.21"
-  checksum: 10c0/5dac6502dbef087092d041fcc2686d8be61168593b3a9baf964d62652f55a3a9c2277f171b81cccb851ccef33f2d070f45e633fab1fda3264f8e1ae9041c673f
-  languageName: node
-  linkType: hard
-
 "node-fetch@npm:^2.6.0, node-fetch@npm:^2.6.7, node-fetch@npm:^2.7.0":
   version: 2.7.0
   resolution: "node-fetch@npm:2.7.0"
@@ -17606,13 +16411,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-forge@npm:^1, node-forge@npm:^1.3.3":
+"node-forge@npm:^1.3.3":
   version: 1.3.3
   resolution: "node-forge@npm:1.3.3"
   checksum: 10c0/9c6f53b0ebb34865872cf62a35b0aef8fb337e2efc766626c2e3a0040f4c02933bf29a62ba999eb44a2aca73bd512c4eda22705a47b94654b9fb8ed53db9a1db
   languageName: node
   linkType: hard
 
+"node-gyp-build-optional-packages@npm:5.2.2":
+  version: 5.2.2
+  resolution: "node-gyp-build-optional-packages@npm:5.2.2"
+  dependencies:
+    detect-libc: "npm:^2.0.1"
+  bin:
+    node-gyp-build-optional-packages: bin.js
+    node-gyp-build-optional-packages-optional: optional.js
+    node-gyp-build-optional-packages-test: build-test.js
+  checksum: 10c0/c81128c6f91873381be178c5eddcbdf66a148a6a89a427ce2bcd457593ce69baf2a8662b6d22cac092d24aa9c43c230dec4e69b3a0da604503f4777cd77e282b
+  languageName: node
+  linkType: hard
+
 "node-gyp@npm:latest":
   version: 12.1.0
   resolution: "node-gyp@npm:12.1.0"
@@ -17633,16 +16451,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-html-parser@npm:^5.2.0":
-  version: 5.4.2
-  resolution: "node-html-parser@npm:5.4.2"
-  dependencies:
-    css-select: "npm:^4.2.1"
-    he: "npm:1.2.0"
-  checksum: 10c0/5a46ce4dc29dcb656067a977ef977d09328b21d1e26e6105176230bb151970cf7deb2db0dd084abeb98106ac79a83102232ad0d9a45d0a686f3eb6931a048663
-  languageName: node
-  linkType: hard
-
 "node-int64@npm:^0.4.0":
   version: 0.4.0
   resolution: "node-int64@npm:0.4.0"
@@ -17657,6 +16465,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-releases@npm:^2.0.36":
+  version: 2.0.44
+  resolution: "node-releases@npm:2.0.44"
+  checksum: 10c0/004337ee9c0c455e81fdfc85cc8a585e89932d28338cd35a4ddba21ef2b68ff20cf06097544e7859c1868579d8529ed230802b127be5357c153e267079e8d851
+  languageName: node
+  linkType: hard
+
 "nopt@npm:^9.0.0":
   version: 9.0.0
   resolution: "nopt@npm:9.0.0"
@@ -17668,13 +16483,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"normalize-css-color@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "normalize-css-color@npm:1.0.2"
-  checksum: 10c0/48655c9113d35c9e49d71e63ef636556b807692fdc536cfb3de2b51827ab9d75998c76d671576268e40dc3d89af91b750b2d1c889aa98856dd6181924add1712
-  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":
   version: 2.5.0
   resolution: "normalize-package-data@npm:2.5.0"
@@ -17699,7 +16507,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"normalize-path@npm:^2.0.0, normalize-path@npm:^2.0.1, normalize-path@npm:^2.1.1":
+"normalize-path@npm:^2.1.1":
   version: 2.1.1
   resolution: "normalize-path@npm:2.1.1"
   dependencies:
@@ -17708,7 +16516,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"normalize-path@npm:^3.0.0, normalize-path@npm:~3.0.0":
+"normalize-path@npm:^3.0.0":
   version: 3.0.0
   resolution: "normalize-path@npm:3.0.0"
   checksum: 10c0/e008c8142bcc335b5e38cf0d63cfd39d6cf2d97480af9abdbe9a439221fd4d749763bab492a8ee708ce7a194bb00c9da6d0a115018672310850489137b3da046
@@ -17771,13 +16579,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"npm-to-yarn@npm:^2.0.0":
-  version: 2.2.1
-  resolution: "npm-to-yarn@npm:2.2.1"
-  checksum: 10c0/65c696a3e595facad802b6b13c04e504806ea88fd4f87ab758f8042c19f65b4c4822815a47095df944b0809a95e574c27323c33cca5533f8454515eaa6e14fac
-  languageName: node
-  linkType: hard
-
 "nprogress@npm:^0.2.0":
   version: 0.2.0
   resolution: "nprogress@npm:0.2.0"
@@ -17785,15 +16586,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nth-check@npm:^2.0.1":
-  version: 2.1.1
-  resolution: "nth-check@npm:2.1.1"
-  dependencies:
-    boolbase: "npm:^1.0.0"
-  checksum: 10c0/5fee7ff309727763689cfad844d979aedd2204a817fbaaf0e1603794a7c20db28548d7b024692f953557df6ce4a0ee4ae46cd8ebd9b36cfb300b9226b567c479
-  languageName: node
-  linkType: hard
-
 "nullthrows@npm:^1.1.1":
   version: 1.1.1
   resolution: "nullthrows@npm:1.1.1"
@@ -17801,12 +16593,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ob1@npm:0.83.3":
-  version: 0.83.3
-  resolution: "ob1@npm:0.83.3"
+"ob1@npm:0.84.4":
+  version: 0.84.4
+  resolution: "ob1@npm:0.84.4"
   dependencies:
     flow-enums-runtime: "npm:^0.0.6"
-  checksum: 10c0/9231315de39cf0612a01e283c7d7ef31d16618e598de96e44ae1ab3007629296ce1a3d5d02ef60ff22d9fefe33050358c10e7fcba8278861157b89befe13cb3d
+  checksum: 10c0/8bf3a3bdc2b27f1b1b60569c31ff2d9d829025f9a1ce7388b5e810242e48672c8d6b24e5972d6e30aef4d84f6894d12b13d0c6c418460d031da1972b96920bba
   languageName: node
   linkType: hard
 
@@ -17851,7 +16643,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.assign@npm:^4.1.0, object.assign@npm:^4.1.4, object.assign@npm:^4.1.7":
+"object.assign@npm:^4.1.4, object.assign@npm:^4.1.7":
   version: 4.1.7
   resolution: "object.assign@npm:4.1.7"
   dependencies:
@@ -17900,16 +16692,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.omit@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "object.omit@npm:2.0.1"
-  dependencies:
-    for-own: "npm:^0.1.4"
-    is-extendable: "npm:^0.1.1"
-  checksum: 10c0/219549087650a1dce1990bbb9c207aa9e0c5302372cbcb363b4a7a36a7b1655a80287d290bebcaff5ae4b5ab7e5859a57f49e3f766cade65bc149fe15c0ba38d
-  languageName: node
-  linkType: hard
-
 "object.pick@npm:^1.3.0":
   version: 1.3.0
   resolution: "object.pick@npm:1.3.0"
@@ -17931,13 +16713,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"obuf@npm:^1.0.0, obuf@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "obuf@npm:1.1.2"
-  checksum: 10c0/520aaac7ea701618eacf000fc96ae458e20e13b0569845800fc582f81b386731ab22d55354b4915d58171db00e79cfcd09c1638c02f89577ef092b38c65b7d81
-  languageName: node
-  linkType: hard
-
 "on-finished@npm:~2.3.0":
   version: 2.3.0
   resolution: "on-finished@npm:2.3.0"
@@ -17990,33 +16765,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"open@npm:^7.0.3, open@npm:^7.4.2":
-  version: 7.4.2
-  resolution: "open@npm:7.4.2"
-  dependencies:
-    is-docker: "npm:^2.0.0"
-    is-wsl: "npm:^2.1.1"
-  checksum: 10c0/77573a6a68f7364f3a19a4c80492712720746b63680ee304555112605ead196afe91052bd3c3d165efdf4e9d04d255e87de0d0a77acec11ef47fd5261251813f
+"oniguruma-parser@npm:^0.12.2":
+  version: 0.12.2
+  resolution: "oniguruma-parser@npm:0.12.2"
+  checksum: 10c0/fe5255d2cd5a6b845d5a0abe1725898ef40cea5522290dba6ccc08cc388891e9e8007af4baa5059942b786ad44b2b677ef25948039c9ba3f057bd35d2c52076a
   languageName: node
   linkType: hard
 
-"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"
+"oniguruma-to-es@npm:^4.3.6":
+  version: 4.3.6
+  resolution: "oniguruma-to-es@npm:4.3.6"
   dependencies:
-    define-lazy-prop: "npm:^2.0.0"
-    is-docker: "npm:^2.1.1"
-    is-wsl: "npm:^2.2.0"
-  checksum: 10c0/bb6b3a58401dacdb0aad14360626faf3fb7fba4b77816b373495988b724fb48941cad80c1b65d62bb31a17609b2cd91c41a181602caea597ca80dfbcc27e84c9
+    oniguruma-parser: "npm:^0.12.2"
+    regex: "npm:^6.1.0"
+    regex-recursion: "npm:^6.0.2"
+  checksum: 10c0/044e08b98e706987c2882ccf228de2a671de4aff33e3bd370da137ba599c0d520549625ad26ecc8898502445c991e19f106f584e94382262ba2af02c908ca3cf
   languageName: node
   linkType: hard
 
-"opener@npm:^1.5.2":
-  version: 1.5.2
-  resolution: "opener@npm:1.5.2"
-  bin:
-    opener: bin/opener-bin.js
-  checksum: 10c0/dd56256ab0cf796585617bc28e06e058adf09211781e70b264c76a1dbe16e90f868c974e5bf5309c93469157c7d14b89c35dc53fe7293b0e40b4d2f92073bc79
+"open@npm:^7.0.3":
+  version: 7.4.2
+  resolution: "open@npm:7.4.2"
+  dependencies:
+    is-docker: "npm:^2.0.0"
+    is-wsl: "npm:^2.1.1"
+  checksum: 10c0/77573a6a68f7364f3a19a4c80492712720746b63680ee304555112605ead196afe91052bd3c3d165efdf4e9d04d255e87de0d0a77acec11ef47fd5261251813f
   languageName: node
   linkType: hard
 
@@ -18029,7 +16802,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"optionator@npm:^0.9.1":
+"optionator@npm:^0.9.3":
   version: 0.9.4
   resolution: "optionator@npm:0.9.4"
   dependencies:
@@ -18074,13 +16847,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"os-homedir@npm:^1.0.0":
-  version: 1.0.2
-  resolution: "os-homedir@npm:1.0.2"
-  checksum: 10c0/6be4aa67317ee247b8d46142e243fb4ef1d2d65d3067f54bfc5079257a2f4d4d76b2da78cba7af3cb3f56dbb2e4202e0c47f26171d11ca1ed4008d842c90363f
-  languageName: node
-  linkType: hard
-
 "os-name@npm:4.0.0":
   version: 4.0.0
   resolution: "os-name@npm:4.0.0"
@@ -18091,24 +16857,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"os-tmpdir@npm:^1.0.1, os-tmpdir@npm:~1.0.1, os-tmpdir@npm:~1.0.2":
+"os-tmpdir@npm:~1.0.1, os-tmpdir@npm:~1.0.2":
   version: 1.0.2
   resolution: "os-tmpdir@npm:1.0.2"
   checksum: 10c0/f438450224f8e2687605a8dd318f0db694b6293c5d835ae509a69e97c8de38b6994645337e5577f5001115470414638978cc49da1cdcc25106dad8738dc69990
   languageName: node
   linkType: hard
 
-"output-file-sync@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "output-file-sync@npm:1.1.2"
-  dependencies:
-    graceful-fs: "npm:^4.1.4"
-    mkdirp: "npm:^0.5.1"
-    object-assign: "npm:^4.1.0"
-  checksum: 10c0/b77185cb61fe209061898180eefab0d2c619e87cf5f6de14fa2c043a38795c8f00109624b017966a4528a2eab8b5f34e37a81cb48f31e1ebad5193f00e8fe8a4
-  languageName: node
-  linkType: hard
-
 "own-keys@npm:^1.0.1":
   version: 1.0.1
   resolution: "own-keys@npm:1.0.1"
@@ -18229,22 +16984,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:^4.0.0":
-  version: 4.0.0
-  resolution: "p-map@npm:4.0.0"
-  dependencies:
-    aggregate-error: "npm:^3.0.0"
-  checksum: 10c0/592c05bd6262c466ce269ff172bb8de7c6975afca9b50c975135b974e9bdaafbfe80e61aaaf5be6d1200ba08b30ead04b88cfa7e25ff1e3b93ab28c9f62a2c75
-  languageName: node
-  linkType: hard
-
 "p-map@npm:^7.0.2":
   version: 7.0.4
   resolution: "p-map@npm:7.0.4"
@@ -18252,16 +16991,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-retry@npm:^4.5.0":
-  version: 4.6.2
-  resolution: "p-retry@npm:4.6.2"
-  dependencies:
-    "@types/retry": "npm:0.12.0"
-    retry: "npm:^0.13.1"
-  checksum: 10c0/d58512f120f1590cfedb4c2e0c42cb3fa66f3cea8a4646632fcb834c56055bb7a6f138aa57b20cc236fb207c9d694e362e0b5c2b14d9b062f67e8925580c73b0
-  languageName: node
-  linkType: hard
-
 "p-try@npm:^1.0.0":
   version: 1.0.0
   resolution: "p-try@npm:1.0.0"
@@ -18297,16 +17026,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"param-case@npm:^3.0.4":
-  version: 3.0.4
-  resolution: "param-case@npm:3.0.4"
-  dependencies:
-    dot-case: "npm:^3.0.4"
-    tslib: "npm:^2.0.3"
-  checksum: 10c0/ccc053f3019f878eca10e70ec546d92f51a592f762917dafab11c8b532715dcff58356118a6f350976e4ab109e321756f05739643ed0ca94298e82291e6f9e76
-  languageName: node
-  linkType: hard
-
 "parent-module@npm:^1.0.0":
   version: 1.0.1
   resolution: "parent-module@npm:1.0.1"
@@ -18344,15 +17063,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse-glob@npm:^3.0.4":
-  version: 3.0.4
-  resolution: "parse-glob@npm:3.0.4"
+"parse-entities@npm:^4.0.0":
+  version: 4.0.2
+  resolution: "parse-entities@npm:4.0.2"
   dependencies:
-    glob-base: "npm:^0.3.0"
-    is-dotfile: "npm:^1.0.0"
-    is-extglob: "npm:^1.0.0"
-    is-glob: "npm:^2.0.0"
-  checksum: 10c0/4faf2e81ca85bc545777a1210ab770e0305c9e095680c219e5635e1a439d763feaf761e055b136425c3d6dcd3ec9431b77fd20f7411525b21031620125dc1dbc
+    "@types/unist": "npm:^2.0.0"
+    character-entities-legacy: "npm:^3.0.0"
+    character-reference-invalid: "npm:^2.0.0"
+    decode-named-character-reference: "npm:^1.0.0"
+    is-alphanumerical: "npm:^2.0.0"
+    is-decimal: "npm:^2.0.0"
+    is-hexadecimal: "npm:^2.0.0"
+  checksum: 10c0/a13906b1151750b78ed83d386294066daf5fb559e08c5af9591b2d98cc209123103016a01df776f65f8219ad26652d6d6b210d0974d452049cddfc53a8916c34
   languageName: node
   linkType: hard
 
@@ -18378,13 +17100,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse-numeric-range@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "parse-numeric-range@npm:1.3.0"
-  checksum: 10c0/53465afaa92111e86697281b684aa4574427360889cc23a1c215488c06b72441febdbf09f47ab0bef9a0c701e059629f3eebd2fe6fb241a254ad7a7a642aebe8
-  languageName: node
-  linkType: hard
-
 "parse-path@npm:^4.0.0":
   version: 4.0.4
   resolution: "parse-path@npm:4.0.4"
@@ -18425,25 +17140,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse5-htmlparser2-tree-adapter@npm:^7.1.0":
-  version: 7.1.0
-  resolution: "parse5-htmlparser2-tree-adapter@npm:7.1.0"
-  dependencies:
-    domhandler: "npm:^5.0.3"
-    parse5: "npm:^7.0.0"
-  checksum: 10c0/e5a4e0b834c84c9e244b5749f8d007f4baaeafac7a1da2c54be3421ffd9ef8fdec4f198bf55cda22e88e6ba95e9943f6ed5aa3ae5900b39972ebf5dc8c3f4722
-  languageName: node
-  linkType: hard
-
-"parse5-parser-stream@npm:^7.1.2":
-  version: 7.1.2
-  resolution: "parse5-parser-stream@npm:7.1.2"
-  dependencies:
-    parse5: "npm:^7.0.0"
-  checksum: 10c0/e236c61000d38ecad369e725a48506b051cebad8abb00e6d4e8bff7aa85c183820fcb45db1559cc90955bdbbdbd665ea94c41259594e74566fff411478dc7fcb
-  languageName: node
-  linkType: hard
-
 "parse5@npm:^5.0.0":
   version: 5.1.1
   resolution: "parse5@npm:5.1.1"
@@ -18458,7 +17154,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse5@npm:^7.0.0, parse5@npm:^7.3.0":
+"parse5@npm:^7.0.0":
   version: 7.3.0
   resolution: "parse5@npm:7.3.0"
   dependencies:
@@ -18467,7 +17163,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parseurl@npm:~1.3.2, parseurl@npm:~1.3.3":
+"parseurl@npm:~1.3.3":
   version: 1.3.3
   resolution: "parseurl@npm:1.3.3"
   checksum: 10c0/90dd4760d6f6174adb9f20cf0965ae12e23879b5f5464f38e92fce8073354341e4b3b76fa3d878351efe7d01e617121955284cfd002ab087fba1a0726ec0b4f5
@@ -18484,16 +17180,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pascal-case@npm:^3.1.2":
-  version: 3.1.2
-  resolution: "pascal-case@npm:3.1.2"
-  dependencies:
-    no-case: "npm:^3.0.4"
-    tslib: "npm:^2.0.3"
-  checksum: 10c0/05ff7c344809fd272fc5030ae0ee3da8e4e63f36d47a1e0a4855ca59736254192c5a27b5822ed4bae96e54048eec5f6907713cfcfff7cdf7a464eaf7490786d8
-  languageName: node
-  linkType: hard
-
 "pascalcase@npm:^0.1.1":
   version: 0.1.1
   resolution: "pascalcase@npm:0.1.1"
@@ -18501,30 +17187,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"patch-package@npm:^6.5.0":
-  version: 6.5.1
-  resolution: "patch-package@npm:6.5.1"
-  dependencies:
-    "@yarnpkg/lockfile": "npm:^1.1.0"
-    chalk: "npm:^4.1.2"
-    cross-spawn: "npm:^6.0.5"
-    find-yarn-workspace-root: "npm:^2.0.0"
-    fs-extra: "npm:^9.0.0"
-    is-ci: "npm:^2.0.0"
-    klaw-sync: "npm:^6.0.0"
-    minimist: "npm:^1.2.6"
-    open: "npm:^7.4.2"
-    rimraf: "npm:^2.6.3"
-    semver: "npm:^5.6.0"
-    slash: "npm:^2.0.0"
-    tmp: "npm:^0.0.33"
-    yaml: "npm:^1.10.2"
-  bin:
-    patch-package: index.js
-  checksum: 10c0/0f74d6099b05431c88a60308bd9ec0b1f9d3ae436026f488cfe99476ae74e7a464be4a16a7c83c7b89c23764502c79d37227cf27b17c30b9b2e4d577f8aecedb
-  languageName: node
-  linkType: hard
-
 "path-case@npm:^2.1.0":
   version: 2.1.1
   resolution: "path-case@npm:2.1.1"
@@ -18555,14 +17217,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-is-absolute@npm:^1.0.0, path-is-absolute@npm:^1.0.1":
+"path-is-absolute@npm:^1.0.0":
   version: 1.0.1
   resolution: "path-is-absolute@npm:1.0.1"
   checksum: 10c0/127da03c82172a2a50099cddbf02510c1791fc2cc5f7713ddb613a56838db1e8168b121a920079d052e0936c23005562059756d653b7c544c53185efe53be078
   languageName: node
   linkType: hard
 
-"path-is-inside@npm:1.0.2, path-is-inside@npm:^1.0.2":
+"path-is-inside@npm:^1.0.2":
   version: 1.0.2
   resolution: "path-is-inside@npm:1.0.2"
   checksum: 10c0/7fdd4b41672c70461cce734fc222b33e7b447fa489c7c4377c95e7e6852d83d69741f307d88ec0cc3b385b41cb4accc6efac3c7c511cd18512e95424f5fa980c
@@ -18583,23 +17245,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-parse@npm:^1.0.5, path-parse@npm:^1.0.7":
+"path-parse@npm:^1.0.7":
   version: 1.0.7
   resolution: "path-parse@npm:1.0.7"
   checksum: 10c0/11ce261f9d294cc7a58d6a574b7f1b935842355ec66fba3c3fd79e0f036462eaf07d0aa95bb74ff432f9afef97ce1926c720988c6a7451d8a584930ae7de86e1
   languageName: node
   linkType: hard
 
-"path-scurry@npm:^1.6.1":
-  version: 1.11.1
-  resolution: "path-scurry@npm:1.11.1"
-  dependencies:
-    lru-cache: "npm:^10.2.0"
-    minipass: "npm:^5.0.0 || ^6.0.2 || ^7.0.0"
-  checksum: 10c0/32a13711a2a505616ae1cc1b5076801e453e7aae6ac40ab55b388bb91b9d0547a52f5aaceff710ea400205f18691120d4431e520afbe4266b836fadede15872d
-  languageName: node
-  linkType: hard
-
 "path-scurry@npm:^2.0.0":
   version: 2.0.1
   resolution: "path-scurry@npm:2.0.1"
@@ -18610,19 +17262,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-to-regexp@npm:3.3.0":
-  version: 3.3.0
-  resolution: "path-to-regexp@npm:3.3.0"
-  checksum: 10c0/ffa0ebe7088d38d435a8d08b0fe6e8c93ceb2a81a65d4dd1d9a538f52e09d5e3474ed5f553cb3b180d894b0caa10698a68737ab599fd1e56b4663d1a64c9f77b
-  languageName: node
-  linkType: hard
-
-"path-to-regexp@npm:^1.7.0":
-  version: 1.9.0
-  resolution: "path-to-regexp@npm:1.9.0"
+"path-scurry@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "path-scurry@npm:2.0.2"
   dependencies:
-    isarray: "npm:0.0.1"
-  checksum: 10c0/de9ddb01b84d9c2c8e2bed18630d8d039e2d6f60a6538595750fa08c7a6482512257464c8da50616f266ab2cdd2428387e85f3b089e4c3f25d0c537e898a0751
+    lru-cache: "npm:^11.0.0"
+    minipass: "npm:^7.1.2"
+  checksum: 10c0/b35ad37cf6557a87fd057121ce2be7695380c9138d93e87ae928609da259ea0a170fac6f3ef1eb3ece8a068e8b7f2f3adf5bb2374cf4d4a57fe484954fcc9482
   languageName: node
   linkType: hard
 
@@ -18649,6 +17295,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-type@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "path-type@npm:6.0.0"
+  checksum: 10c0/55baa8b1187d6dc683d5a9cfcc866168d6adff58e5db91126795376d818eee46391e00b2a4d53e44d844c7524a7d96aa68cc68f4f3e500d3d069a39e6535481c
+  languageName: node
+  linkType: hard
+
 "pegjs@npm:^0.10.0":
   version: 0.10.0
   resolution: "pegjs@npm:0.10.0"
@@ -18665,27 +17318,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picocolors@npm:^1.0.0, picocolors@npm:^1.1.1":
+"picocolors@npm:^1.1.1":
   version: 1.1.1
   resolution: "picocolors@npm:1.1.1"
   checksum: 10c0/e2e3e8170ab9d7c7421969adaa7e1b31434f789afb9b3f115f6b96d91945041ac3ceb02e9ec6fe6510ff036bcc0bf91e69a1772edc0b707e12b19c0f2d6bcf58
   languageName: node
   linkType: hard
 
-"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.3, picomatch@npm:^2.3.1":
+"picomatch@npm:^2.0.4, picomatch@npm:^2.2.3, picomatch@npm:^2.3.1":
   version: 2.3.1
   resolution: "picomatch@npm:2.3.1"
   checksum: 10c0/26c02b8d06f03206fc2ab8d16f19960f2ff9e81a658f831ecb656d8f17d9edc799e8364b1f4a7873e89d9702dff96204be0fa26fe4181f6843f040f819dac4be
   languageName: node
   linkType: hard
 
-"picomatch@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "picomatch@npm:3.0.1"
-  checksum: 10c0/70ec738569f1864658378b7abdab8939d15dae0718c1df994eae3346fd33daf6a3c1ff4e0c1a0cd1e2c0319130985b63a2cff34d192f2f2acbb78aca76111736
-  languageName: node
-  linkType: hard
-
 "picomatch@npm:^4.0.3":
   version: 4.0.3
   resolution: "picomatch@npm:4.0.3"
@@ -18693,7 +17339,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pify@npm:^2.0.0, pify@npm:^2.3.0":
+"picomatch@npm:^4.0.4":
+  version: 4.0.4
+  resolution: "picomatch@npm:4.0.4"
+  checksum: 10c0/e2c6023372cc7b5764719a5ffb9da0f8e781212fa7ca4bd0562db929df8e117460f00dff3cb7509dacfc06b86de924b247f504d0ce1806a37fac4633081466b0
+  languageName: node
+  linkType: hard
+
+"pify@npm:^2.3.0":
   version: 2.3.0
   resolution: "pify@npm:2.3.0"
   checksum: 10c0/551ff8ab830b1052633f59cb8adc9ae8407a436e06b4a9718bcb27dc5844b83d535c3a8512b388b6062af65a98c49bdc0dd523d8b2617b188f7c8fee457158dc
@@ -18714,290 +17367,71 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pify@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "pify@npm:5.0.0"
-  checksum: 10c0/9f6f3cd1f159652692f514383efe401a06473af35a699962230ad1c4c9796df5999961461fc1a3b81eed8e3e74adb8bd032474fb3f93eb6bdbd9f33328da1ed2
-  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"
-  checksum: 10c0/a51f108dd811beb779d58a76864bbd49e239fa40c7984cd11596c75a121a8cc789f1c8971d8bb15f0dbf9d48b76c05bb62fcbce840f89b688c0fa64b37e8478a
-  languageName: node
-  linkType: hard
-
-"pkg-dir@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "pkg-dir@npm:3.0.0"
-  dependencies:
-    find-up: "npm:^3.0.0"
-  checksum: 10c0/902a3d0c1f8ac43b1795fa1ba6ffeb37dfd53c91469e969790f6ed5e29ff2bdc50b63ba6115dc056d2efb4a040aa2446d512b3804bdafdf302f734fb3ec21847
-  languageName: node
-  linkType: hard
-
-"pkg-dir@npm:^4.1.0, pkg-dir@npm:^4.2.0":
-  version: 4.2.0
-  resolution: "pkg-dir@npm:4.2.0"
-  dependencies:
-    find-up: "npm:^4.0.0"
-  checksum: 10c0/c56bda7769e04907a88423feb320babaed0711af8c436ce3e56763ab1021ba107c7b0cafb11cde7529f669cfc22bffcaebffb573645cbd63842ea9fb17cd7728
-  languageName: node
-  linkType: hard
-
-"pkg-up@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "pkg-up@npm:3.1.0"
-  dependencies:
-    find-up: "npm:^3.0.0"
-  checksum: 10c0/ecb60e1f8e1f611c0bdf1a0b6a474d6dfb51185567dc6f29cdef37c8d480ecba5362e006606bb290519bbb6f49526c403fabea93c3090c20368d98bb90c999ab
-  languageName: node
-  linkType: hard
-
-"please-upgrade-node@npm:^3.1.1":
-  version: 3.2.0
-  resolution: "please-upgrade-node@npm:3.2.0"
-  dependencies:
-    semver-compare: "npm:^1.0.0"
-  checksum: 10c0/222514d2841022be4b843f38d415beadcc6409c0545d6d153778d71c601bba7bbf1cd5827d650c7fae6a9a2ba7cf00f4b6729b40d015a3a5ba2937e57bc1c435
-  languageName: node
-  linkType: hard
-
-"plist@npm:^3.0.5, plist@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "plist@npm:3.1.0"
-  dependencies:
-    "@xmldom/xmldom": "npm:^0.8.8"
-    base64-js: "npm:^1.5.1"
-    xmlbuilder: "npm:^15.1.1"
-  checksum: 10c0/db19ba50faafc4103df8e79bcd6b08004a56db2a9dd30b3e5c8b0ef30398ef44344a674e594d012c8fc39e539a2b72cb58c60a76b4b4401cbbc7c8f6b028d93d
-  languageName: node
-  linkType: hard
-
-"pngjs@npm:^3.3.0":
-  version: 3.4.0
-  resolution: "pngjs@npm:3.4.0"
-  checksum: 10c0/88ee73e2ad3f736e0b2573722309eb80bd2aa28916f0862379b4fd0f904751b4f61bb6bd1ecd7d4242d331f2b5c28c13309dd4b7d89a9b78306e35122fdc5011
-  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.1.0
-  resolution: "possible-typed-array-names@npm:1.1.0"
-  checksum: 10c0/c810983414142071da1d644662ce4caebce890203eb2bc7bf119f37f3fe5796226e117e6cca146b521921fa6531072674174a3325066ac66fce089a53e1e5196
-  languageName: node
-  linkType: hard
-
-"postcss-calc@npm:^8.2.3":
-  version: 8.2.4
-  resolution: "postcss-calc@npm:8.2.4"
-  dependencies:
-    postcss-selector-parser: "npm:^6.0.9"
-    postcss-value-parser: "npm:^4.2.0"
-  peerDependencies:
-    postcss: ^8.2.2
-  checksum: 10c0/8518a429488c3283ff1560c83a511f6f772329bc61d88875eb7c83e13a8683b7ccbdccaa9946024cf1553da3eacd2f40fcbcebf1095f7fdeb432bf86bc6ba6ba
-  languageName: node
-  linkType: hard
-
-"postcss-colormin@npm:^5.3.1":
-  version: 5.3.1
-  resolution: "postcss-colormin@npm:5.3.1"
-  dependencies:
-    browserslist: "npm:^4.21.4"
-    caniuse-api: "npm:^3.0.0"
-    colord: "npm:^2.9.1"
-    postcss-value-parser: "npm:^4.2.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/c4ca6f335dd992dc8e3df24bffc3495c4e504eba8489c81cb6836fdce3203f423cf4c0b640c4b63c586f588c59d82adb5313c3c5d1a68113896d18ed71caa462
-  languageName: node
-  linkType: hard
-
-"postcss-convert-values@npm:^5.1.3":
-  version: 5.1.3
-  resolution: "postcss-convert-values@npm:5.1.3"
-  dependencies:
-    browserslist: "npm:^4.21.4"
-    postcss-value-parser: "npm:^4.2.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/cd10a81781a12487b2921ff84a1a068e948a1956b9539a284c202abecf4cacdd3e106eb026026b22dbf70933f4315c824c111f6b71f56c355e47b842ca9b1dec
-  languageName: node
-  linkType: hard
-
-"postcss-discard-comments@npm:^5.1.2":
-  version: 5.1.2
-  resolution: "postcss-discard-comments@npm:5.1.2"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/cb5ba81623c498e18d406138e7d27d69fc668802a1139a8de69d28e80b3fe222cda7b634940512cae78d04f0c78afcd15d92bcf80e537c6c85fa8ff9cd61d00f
-  languageName: node
-  linkType: hard
-
-"postcss-discard-duplicates@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "postcss-discard-duplicates@npm:5.1.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/3d3a49536c56097c06b4f085412e0cda0854fac1c559563ccb922d9fab6305ff13058cd6fee422aa66c1d7e466add4e7672d7ae2ff551a4af6f1a8d2142d471f
-  languageName: node
-  linkType: hard
-
-"postcss-discard-empty@npm:^5.1.1":
-  version: 5.1.1
-  resolution: "postcss-discard-empty@npm:5.1.1"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/36c8b2197af836dbd93168c72cde4edc1f10fe00e564824119da076d3764909745bb60e4ada04052322e26872d1bce6a37c56815f1c48c813a21adca1a41fbdc
-  languageName: node
-  linkType: hard
-
-"postcss-discard-overridden@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "postcss-discard-overridden@npm:5.1.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/7d3fc0b0d90599606fc083327a7c24390f90270a94a0119af4b74815d518948581579281f63b9bfa62e2644edf59bc9e725dc04ea5ba213f697804f3fb4dd8dc
-  languageName: node
-  linkType: hard
-
-"postcss-discard-unused@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "postcss-discard-unused@npm:5.1.0"
-  dependencies:
-    postcss-selector-parser: "npm:^6.0.5"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/eb7649eae1ef9987c397f4f533eb83f4245686317a5a0b468affd875d4d22778b62134e638198750efbaa41b7b7767995a91e5eb58d5fbbfe097506a3311102b
-  languageName: node
-  linkType: hard
-
-"postcss-loader@npm:^7.0.0":
-  version: 7.3.4
-  resolution: "postcss-loader@npm:7.3.4"
-  dependencies:
-    cosmiconfig: "npm:^8.3.5"
-    jiti: "npm:^1.20.0"
-    semver: "npm:^7.5.4"
-  peerDependencies:
-    postcss: ^7.0.0 || ^8.0.1
-    webpack: ^5.0.0
-  checksum: 10c0/1bf7614aeea9ad1f8ee6be3a5451576c059391688ea67f825aedc2674056369597faeae4e4a81fe10843884c9904a71403d9a54197e1f560e8fbb9e61f2a2680
+"pify@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "pify@npm:5.0.0"
+  checksum: 10c0/9f6f3cd1f159652692f514383efe401a06473af35a699962230ad1c4c9796df5999961461fc1a3b81eed8e3e74adb8bd032474fb3f93eb6bdbd9f33328da1ed2
   languageName: node
   linkType: hard
 
-"postcss-merge-idents@npm:^5.1.1":
-  version: 5.1.1
-  resolution: "postcss-merge-idents@npm:5.1.1"
-  dependencies:
-    cssnano-utils: "npm:^3.1.0"
-    postcss-value-parser: "npm:^4.2.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/97552b831330a8055641d3aea7b9840c60922d22d7fefdaf109daa7dee543e48a93ea6189a5549798b3f29e66657bc5c520e76493a04f8f999b94a2c8fee6060
+"pirates@npm:^4.0.4, pirates@npm:^4.0.6":
+  version: 4.0.7
+  resolution: "pirates@npm:4.0.7"
+  checksum: 10c0/a51f108dd811beb779d58a76864bbd49e239fa40c7984cd11596c75a121a8cc789f1c8971d8bb15f0dbf9d48b76c05bb62fcbce840f89b688c0fa64b37e8478a
   languageName: node
   linkType: hard
 
-"postcss-merge-longhand@npm:^5.1.7":
-  version: 5.1.7
-  resolution: "postcss-merge-longhand@npm:5.1.7"
+"pkg-dir@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "pkg-dir@npm:3.0.0"
   dependencies:
-    postcss-value-parser: "npm:^4.2.0"
-    stylehacks: "npm:^5.1.1"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/4d9f44b03f19522cc81ae4f5b1f2a9ef2db918dbd8b3042d4f1b2461b2230b8ec1269334db6a67a863ba68f64cabd712e6e45340ddb22a3fc03cd34df69d2bf0
+    find-up: "npm:^3.0.0"
+  checksum: 10c0/902a3d0c1f8ac43b1795fa1ba6ffeb37dfd53c91469e969790f6ed5e29ff2bdc50b63ba6115dc056d2efb4a040aa2446d512b3804bdafdf302f734fb3ec21847
   languageName: node
   linkType: hard
 
-"postcss-merge-rules@npm:^5.1.4":
-  version: 5.1.4
-  resolution: "postcss-merge-rules@npm:5.1.4"
+"pkg-dir@npm:^4.1.0, pkg-dir@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "pkg-dir@npm:4.2.0"
   dependencies:
-    browserslist: "npm:^4.21.4"
-    caniuse-api: "npm:^3.0.0"
-    cssnano-utils: "npm:^3.1.0"
-    postcss-selector-parser: "npm:^6.0.5"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/e7686cdda052071bf98810ad381e26145c43a2286f9540f04f97ef93101604b78d478dd555db91e5f73751bb353c283ba75c2fcb16a3751ac7d93dc6a0130c41
+    find-up: "npm:^4.0.0"
+  checksum: 10c0/c56bda7769e04907a88423feb320babaed0711af8c436ce3e56763ab1021ba107c7b0cafb11cde7529f669cfc22bffcaebffb573645cbd63842ea9fb17cd7728
   languageName: node
   linkType: hard
 
-"postcss-minify-font-values@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "postcss-minify-font-values@npm:5.1.0"
+"plist@npm:^3.0.5, plist@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "plist@npm:3.1.0"
   dependencies:
-    postcss-value-parser: "npm:^4.2.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/7aa4f93a853b657f79a8b28d0e924cafce3720086d9da02ce04b8b2f8de42e18ce32c8f7f1078390fb5ec82468e2d8e771614387cea3563f05fd9fa1798e1c59
+    "@xmldom/xmldom": "npm:^0.8.8"
+    base64-js: "npm:^1.5.1"
+    xmlbuilder: "npm:^15.1.1"
+  checksum: 10c0/db19ba50faafc4103df8e79bcd6b08004a56db2a9dd30b3e5c8b0ef30398ef44344a674e594d012c8fc39e539a2b72cb58c60a76b4b4401cbbc7c8f6b028d93d
   languageName: node
   linkType: hard
 
-"postcss-minify-gradients@npm:^5.1.1":
-  version: 5.1.1
-  resolution: "postcss-minify-gradients@npm:5.1.1"
-  dependencies:
-    colord: "npm:^2.9.1"
-    cssnano-utils: "npm:^3.1.0"
-    postcss-value-parser: "npm:^4.2.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/bcb2802d7c8f0f76c7cff089884844f26c24b95f35c3ec951d7dec8c212495d1873d6ba62d6225ce264570e8e0668e271f9bc79bb6f5d2429c1f8933f4e3021d
+"pngjs@npm:^3.3.0":
+  version: 3.4.0
+  resolution: "pngjs@npm:3.4.0"
+  checksum: 10c0/88ee73e2ad3f736e0b2573722309eb80bd2aa28916f0862379b4fd0f904751b4f61bb6bd1ecd7d4242d331f2b5c28c13309dd4b7d89a9b78306e35122fdc5011
   languageName: node
   linkType: hard
 
-"postcss-minify-params@npm:^5.1.4":
-  version: 5.1.4
-  resolution: "postcss-minify-params@npm:5.1.4"
-  dependencies:
-    browserslist: "npm:^4.21.4"
-    cssnano-utils: "npm:^3.1.0"
-    postcss-value-parser: "npm:^4.2.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/debce6f0f7dd9af69b4bb9e467ea1ccccff2d849b6020461a2b9741c0c137340e6076c245dc2e83880180eb2e82936280fa31dfe8608e5a2e3618f3d864314c5
+"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
 
-"postcss-minify-selectors@npm:^5.2.1":
-  version: 5.2.1
-  resolution: "postcss-minify-selectors@npm:5.2.1"
-  dependencies:
-    postcss-selector-parser: "npm:^6.0.5"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/f3f4ec110f5f697cfc9dde3e491ff10aa07509bf33cc940aa539e4b5b643d1b9f8bb97f8bb83d05fc96f5eeb220500ebdeffbde513bd176c0671e21c2c96fab9
+"possible-typed-array-names@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "possible-typed-array-names@npm:1.1.0"
+  checksum: 10c0/c810983414142071da1d644662ce4caebce890203eb2bc7bf119f37f3fe5796226e117e6cca146b521921fa6531072674174a3325066ac66fce089a53e1e5196
   languageName: node
   linkType: hard
 
-"postcss-modules-extract-imports@npm:^3.0.0, postcss-modules-extract-imports@npm:^3.1.0":
+"postcss-modules-extract-imports@npm:^3.0.0":
   version: 3.1.0
   resolution: "postcss-modules-extract-imports@npm:3.1.0"
   peerDependencies:
@@ -19006,7 +17440,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-modules-local-by-default@npm:^4.0.0, postcss-modules-local-by-default@npm:^4.0.5":
+"postcss-modules-local-by-default@npm:^4.0.0":
   version: 4.2.0
   resolution: "postcss-modules-local-by-default@npm:4.2.0"
   dependencies:
@@ -19019,7 +17453,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-modules-scope@npm:^3.0.0, postcss-modules-scope@npm:^3.2.0":
+"postcss-modules-scope@npm:^3.0.0":
   version: 3.2.1
   resolution: "postcss-modules-scope@npm:3.2.1"
   dependencies:
@@ -19041,161 +17475,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-normalize-charset@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "postcss-normalize-charset@npm:5.1.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/aa481584d4db48e0dbf820f992fa235e6c41ff3d4701a62d349f33c1ad4c5c7dcdea3096db9ff2a5c9497e9bed2186d594ccdb1b42d57b30f58affba5829ad9c
-  languageName: node
-  linkType: hard
-
-"postcss-normalize-display-values@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "postcss-normalize-display-values@npm:5.1.0"
-  dependencies:
-    postcss-value-parser: "npm:^4.2.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/70b164fda885c097c02c98914fba4cd19b2382ff5f85f77e5315d88a1d477b4803f0f271d95a38e044e2a6c3b781c5c9bfb83222fc577199f2aeb0b8f4254e2f
-  languageName: node
-  linkType: hard
-
-"postcss-normalize-positions@npm:^5.1.1":
-  version: 5.1.1
-  resolution: "postcss-normalize-positions@npm:5.1.1"
-  dependencies:
-    postcss-value-parser: "npm:^4.2.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/910d58991fd38a7cf6ed6471e6fa4a96349690ad1a99a02e8cac46d76ba5045f2fca453088b68b05ff665afd96dc617c4674c68acaeabbe83f502e4963fb78b1
-  languageName: node
-  linkType: hard
-
-"postcss-normalize-repeat-style@npm:^5.1.1":
-  version: 5.1.1
-  resolution: "postcss-normalize-repeat-style@npm:5.1.1"
-  dependencies:
-    postcss-value-parser: "npm:^4.2.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/57c3817a2107ebb17e4ceee3831d230c72a3ccc7650f4d5f12aa54f6ea766777401f4f63b2615b721350b2e8c7ae0b0bbc3f1c5ad4e7fa737c9efb92cfa0cbb0
-  languageName: node
-  linkType: hard
-
-"postcss-normalize-string@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "postcss-normalize-string@npm:5.1.0"
-  dependencies:
-    postcss-value-parser: "npm:^4.2.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/a5e9979998f478d385ddff865bdd8a4870af69fa8c91c9398572a299ff39b39a6bda922a48fab0d2cddc639f30159c39baaed880ed7d13cd27cc64eaa9400b3b
-  languageName: node
-  linkType: hard
-
-"postcss-normalize-timing-functions@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "postcss-normalize-timing-functions@npm:5.1.0"
-  dependencies:
-    postcss-value-parser: "npm:^4.2.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/afb34d8e313004ae8cd92910bf1a6eb9885f29ae803cd9032b6dfe7b67a9ad93f800976f10e55170b2b08fe9484825e9272629971186812c2764c73843268237
-  languageName: node
-  linkType: hard
-
-"postcss-normalize-unicode@npm:^5.1.1":
-  version: 5.1.1
-  resolution: "postcss-normalize-unicode@npm:5.1.1"
-  dependencies:
-    browserslist: "npm:^4.21.4"
-    postcss-value-parser: "npm:^4.2.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/c102888d488d05c53ab10ffcd4e0efb892ef0cc2f9b0abe9c9b175a2d7a9c226981ca6806ed9e5c1b82a8190f2b3a8342a6de800f019b417130661b0787ff6d7
-  languageName: node
-  linkType: hard
-
-"postcss-normalize-url@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "postcss-normalize-url@npm:5.1.0"
-  dependencies:
-    normalize-url: "npm:^6.0.1"
-    postcss-value-parser: "npm:^4.2.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/a016cefd1ef80f74ef9dbed50593d3b533101e93aaadfc292896fddd8d6c3eb732a9fc5cb2e0d27f79c1f60f0fdfc40b045a494b514451e9610c6acf9392eb98
-  languageName: node
-  linkType: hard
-
-"postcss-normalize-whitespace@npm:^5.1.1":
-  version: 5.1.1
-  resolution: "postcss-normalize-whitespace@npm:5.1.1"
-  dependencies:
-    postcss-value-parser: "npm:^4.2.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/d7b53dd90fe369bfb9838a40096db904a41f50dadfd04247ec07d7ab5588c3d4e70d1c7f930523bd061cb74e6683cef45c6e6c4eb57ea174ee3fc99f3de222d1
-  languageName: node
-  linkType: hard
-
-"postcss-ordered-values@npm:^5.1.3":
-  version: 5.1.3
-  resolution: "postcss-ordered-values@npm:5.1.3"
-  dependencies:
-    cssnano-utils: "npm:^3.1.0"
-    postcss-value-parser: "npm:^4.2.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/55abfbd2c7267eefed62a881ed0b5c0c98409c50a589526a3ebb9f8d879979203e523b8888fa84732bdd1ac887f721287a037002fa70c27c8d33f1bcbae9d9c6
-  languageName: node
-  linkType: hard
-
-"postcss-reduce-idents@npm:^5.2.0":
-  version: 5.2.0
-  resolution: "postcss-reduce-idents@npm:5.2.0"
-  dependencies:
-    postcss-value-parser: "npm:^4.2.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/f7a6bc0caa531e7983c98a79d796e078ff8d02df1bb38357a5d7f11ddb5842d6777ab090fd811e889ab1a5e92ba2644c9a9e5e353f7c9f7ce85dbf1e07001c29
-  languageName: node
-  linkType: hard
-
-"postcss-reduce-initial@npm:^5.1.2":
-  version: 5.1.2
-  resolution: "postcss-reduce-initial@npm:5.1.2"
-  dependencies:
-    browserslist: "npm:^4.21.4"
-    caniuse-api: "npm:^3.0.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/ddb2ce61c8d0997184f08200eafdf32b3c67e88228fee960f5e2010c32da0c1d8ea07712585bf2b3aaa15f583066401d45db2c1131527c5116ca6794ebebd865
-  languageName: node
-  linkType: hard
-
-"postcss-reduce-transforms@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "postcss-reduce-transforms@npm:5.1.0"
-  dependencies:
-    postcss-value-parser: "npm:^4.2.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/caefaeb78652ad8701b94e91500e38551255e4899fa298a7357519a36cbeebae088eab4535e00f17675a1230f448c4a7077045639d496da4614a46bc41df4add
-  languageName: node
-  linkType: hard
-
-"postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.0.5, postcss-selector-parser@npm:^6.0.9":
-  version: 6.1.2
-  resolution: "postcss-selector-parser@npm:6.1.2"
-  dependencies:
-    cssesc: "npm:^3.0.0"
-    util-deprecate: "npm:^1.0.2"
-  checksum: 10c0/523196a6bd8cf660bdf537ad95abd79e546d54180f9afb165a4ab3e651ac705d0f8b8ce6b3164fb9e3279ce482c5f751a69eb2d3a1e8eb0fd5e82294fb3ef13e
-  languageName: node
-  linkType: hard
-
 "postcss-selector-parser@npm:^7.0.0":
   version: 7.1.1
   resolution: "postcss-selector-parser@npm:7.1.1"
@@ -19206,40 +17485,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-sort-media-queries@npm:^4.2.1":
-  version: 4.4.1
-  resolution: "postcss-sort-media-queries@npm:4.4.1"
-  dependencies:
-    sort-css-media-queries: "npm:2.1.0"
-  peerDependencies:
-    postcss: ^8.4.16
-  checksum: 10c0/8bbc604daee29dc3e1f5090df972599c3c0eb08b37650e16c134a040cc1357484a48bbe03dac2977d616be1d490cde2934226fa1e6f7e52f4f5e7bf8f57e98d6
-  languageName: node
-  linkType: hard
-
-"postcss-svgo@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "postcss-svgo@npm:5.1.0"
-  dependencies:
-    postcss-value-parser: "npm:^4.2.0"
-    svgo: "npm:^2.7.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/309634a587e38fef244648bc9cd1817e12144868d24f1173d87b1edc14a4a7fca614962b2cb9d93f4801e11bd8d676083986ad40ebab4438cb84731ce1571994
-  languageName: node
-  linkType: hard
-
-"postcss-unique-selectors@npm:^5.1.1":
-  version: 5.1.1
-  resolution: "postcss-unique-selectors@npm:5.1.1"
-  dependencies:
-    postcss-selector-parser: "npm:^6.0.5"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/484f6409346d6244c134c5cdcd62f4f2751b269742f95222f13d8bac5fb224471ffe04e28a354670cbe0bdc2707778ead034fc1b801b473ffcbea5436807de30
-  languageName: node
-  linkType: hard
-
 "postcss-value-parser@npm:^4.1.0, postcss-value-parser@npm:^4.2.0":
   version: 4.2.0
   resolution: "postcss-value-parser@npm:4.2.0"
@@ -19247,15 +17492,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-zindex@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "postcss-zindex@npm:5.1.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/f739d3c0dec3875c770d6a101bc6ac1ccf545b0121e75b7fade911ad6ce454a2af87e6c3587c80a76a00f217e1761778f2083c2807eb78c17bfc53624b625ded
-  languageName: node
-  linkType: hard
-
 "postcss@npm:^7.0.14, postcss@npm:^7.0.27":
   version: 7.0.39
   resolution: "postcss@npm:7.0.39"
@@ -19266,7 +17502,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.2.15, postcss@npm:^8.3.11, postcss@npm:^8.3.5, postcss@npm:^8.4.14, postcss@npm:^8.4.17, postcss@npm:^8.4.33":
+"postcss@npm:^8.2.15":
   version: 8.5.6
   resolution: "postcss@npm:8.5.6"
   dependencies:
@@ -19277,14 +17513,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:~8.4.32":
-  version: 8.4.49
-  resolution: "postcss@npm:8.4.49"
+"postcss@npm:^8.5.14":
+  version: 8.5.14
+  resolution: "postcss@npm:8.5.14"
   dependencies:
-    nanoid: "npm:^3.3.7"
+    nanoid: "npm:^3.3.11"
     picocolors: "npm:^1.1.1"
     source-map-js: "npm:^1.2.1"
-  checksum: 10c0/f1b3f17aaf36d136f59ec373459f18129908235e65dbdc3aee5eef8eba0756106f52de5ec4682e29a2eab53eb25170e7e871b3e4b52a8f1de3d344a514306be3
+  checksum: 10c0/48138207cf5ef5581be1bfe2cb65ccfe0ac75e43888ba045afc8ed6043d7b56aeb3b9a9fe5b353ff554be943cd0cc15d826ccb991525159175971e5ee8ab0237
   languageName: node
   linkType: hard
 
@@ -19318,14 +17554,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"preserve@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "preserve@npm:0.2.0"
-  checksum: 10c0/21154ae0e53e3a338bcdf61dd6859a62f12f198961509fe07ac4f7f59b6f97de0b60c0dda2cce18e57894c77fa22544c8941c4e6f41fc30ed36753763fba6f19
+"presentable-error@npm:^0.0.1":
+  version: 0.0.1
+  resolution: "presentable-error@npm:0.0.1"
+  checksum: 10c0/84a0ef6f2c34fbb1ee006b803b9e6df52886b39ae431f0359364f8a8b74b41ca98976217fdced80bf56a9dee05fa2b456cbb57323cfc3e135bce8825ec5e8650
   languageName: node
   linkType: hard
 
-"prettier-linter-helpers@npm:^1.0.0":
+"prettier-linter-helpers@npm:^1.0.1":
   version: 1.0.1
   resolution: "prettier-linter-helpers@npm:1.0.1"
   dependencies:
@@ -19334,7 +17570,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:^2, prettier@npm:^2.4.1":
+"prettier@npm:^2":
   version: 2.8.8
   resolution: "prettier@npm:2.8.8"
   bin:
@@ -19343,20 +17579,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pretty-bytes@npm:^5.6.0":
-  version: 5.6.0
-  resolution: "pretty-bytes@npm:5.6.0"
-  checksum: 10c0/f69f494dcc1adda98dbe0e4a36d301e8be8ff99bfde7a637b2ee2820e7cb583b0fc0f3a63b0e3752c01501185a5cf38602c7be60da41bdf84ef5b70e89c370f3
+"prettier@npm:^3.0.3, prettier@npm:^3.8.4":
+  version: 3.8.4
+  resolution: "prettier@npm:3.8.4"
+  bin:
+    prettier: bin/prettier.cjs
+  checksum: 10c0/b90a0cbe75b88ac0af9c13fe0f359bd19926fabccd88483227b21f71f0c1cc42da056fc1ac3a361e665577c568371d5ccfb2c62c31c8a1186f8d1bd531a063e9
   languageName: node
   linkType: hard
 
-"pretty-error@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "pretty-error@npm:4.0.0"
+"pretty-format@npm:30.4.1, pretty-format@npm:^30.4.1":
+  version: 30.4.1
+  resolution: "pretty-format@npm:30.4.1"
   dependencies:
-    lodash: "npm:^4.17.20"
-    renderkid: "npm:^3.0.0"
-  checksum: 10c0/dc292c087e2857b2e7592784ab31e37a40f3fa918caa11eba51f9fb2853e1d4d6e820b219917e35f5721d833cfd20fdf4f26ae931a90fd1ad0cae2125c345138
+    "@jest/schemas": "npm:30.4.1"
+    ansi-styles: "npm:^5.2.0"
+    react-is-18: "npm:react-is@^18.3.1"
+    react-is-19: "npm:react-is@^19.2.5"
+  checksum: 10c0/c7e6633740cd2f6d382f188c00c8b4b3f2bee3cda16db6753471c6bb4b94f76531358d3a7793062a0fb00d72ebfb934e8ae1d4f5ced6bb34c8e7f60996f90076
   languageName: node
   linkType: hard
 
@@ -19372,7 +17612,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pretty-format@npm:^29.0.0, pretty-format@npm:^29.0.3, pretty-format@npm:^29.7.0":
+"pretty-format@npm:^29.7.0":
   version: 29.7.0
   resolution: "pretty-format@npm:29.7.0"
   dependencies:
@@ -19383,29 +17623,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pretty-time@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "pretty-time@npm:1.1.0"
-  checksum: 10c0/ba9d7af19cd43838fb2b147654990949575e400dc2cc24bf71ec4a6c4033a38ba8172b1014b597680c6d4d3c075e94648b2c13a7206c5f0c90b711c7388726f3
-  languageName: node
-  linkType: hard
-
-"prism-react-renderer@npm:^1.3.5":
-  version: 1.3.5
-  resolution: "prism-react-renderer@npm:1.3.5"
-  peerDependencies:
-    react: ">=0.14.9"
-  checksum: 10c0/9caada97fa7325fc99484cff409a84ed947a061615851bd0aedf4fcfd4b3496e2eff4b252dbfd4465dd6ea7310134ed67d737cabf0c78b192969c3c7da383237
-  languageName: node
-  linkType: hard
-
-"prismjs@npm:^1.28.0":
-  version: 1.30.0
-  resolution: "prismjs@npm:1.30.0"
-  checksum: 10c0/f56205bfd58ef71ccfcbcb691fd0eb84adc96c6ff21b0b69fc6fdcf02be42d6ef972ba4aed60466310de3d67733f6a746f89f2fb79c00bf217406d465b3e8f23
-  languageName: node
-  linkType: hard
-
 "prismjs@npm:~1.27.0":
   version: 1.27.0
   resolution: "prismjs@npm:1.27.0"
@@ -19413,13 +17630,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"private@npm:^0.1.8":
-  version: 0.1.8
-  resolution: "private@npm:0.1.8"
-  checksum: 10c0/829a23723e5fd3105c72b2dadeeb65743a430f7e6967a8a6f3e49392a1b3ea52975a255376d8c513b0c988bdf162f1a5edf9d9bac27d1ab11f8dba8cdb58880e
-  languageName: node
-  linkType: hard
-
 "proc-log@npm:^4.0.0":
   version: 4.2.0
   resolution: "proc-log@npm:4.2.0"
@@ -19486,7 +17696,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.5.10, prop-types@npm:^15.5.4, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.5.10, prop-types@npm:^15.5.4, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -19506,6 +17716,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"property-information@npm:^7.0.0":
+  version: 7.2.0
+  resolution: "property-information@npm:7.2.0"
+  checksum: 10c0/03662c8f9e1544510914c5e594ae72963f67d261027a5fdc06c4134742584fe40dd49b959470d30e757e9fb70b297d8546ab1362a040364144029926ad4e07c4
+  languageName: node
+  linkType: hard
+
 "protocols@npm:^1.4.0":
   version: 1.4.8
   resolution: "protocols@npm:1.4.8"
@@ -19554,14 +17771,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"punycode@npm:^2.1.0, punycode@npm:^2.1.1":
+"punycode@npm:^2.1.0":
   version: 2.3.1
   resolution: "punycode@npm:2.3.1"
   checksum: 10c0/14f76a8206bc3464f794fb2e3d3cc665ae416c01893ad7a02b23766eb07159144ee612ad67af5e84fa4479ccfe67678c4feb126b0485651b302babf66f04f9e9
   languageName: node
   linkType: hard
 
-"pupa@npm:^2.0.1, pupa@npm:^2.1.1":
+"pupa@npm:^2.0.1":
   version: 2.1.1
   resolution: "pupa@npm:2.1.1"
   dependencies:
@@ -19570,13 +17787,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pure-color@npm:^1.2.0":
-  version: 1.3.0
-  resolution: "pure-color@npm:1.3.0"
-  checksum: 10c0/50d0e088ad0349bdd508cddf7c7afbb2d14ba3c047628dbfcfddf467a98f10462caf91f3227172ada88f64afaf761c499ecba0d4053b06926f0f914769be24b9
-  languageName: node
-  linkType: hard
-
 "pure-rand@npm:^6.0.0":
   version: 6.1.0
   resolution: "pure-rand@npm:6.1.0"
@@ -19591,15 +17801,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qrcode-terminal@npm:0.11.0":
-  version: 0.11.0
-  resolution: "qrcode-terminal@npm:0.11.0"
-  bin:
-    qrcode-terminal: ./bin/qrcode-terminal.js
-  checksum: 10c0/7561a649d21d7672d451ada5f2a2b393f586627cea75670c97141dc2b4b4145db547e1fddf512a3552e7fb54de530d513a736cd604c840adb908ed03c32312ad
-  languageName: node
-  linkType: hard
-
 "qs@npm:^6.12.3, qs@npm:^6.9.4, qs@npm:~6.14.0":
   version: 6.14.1
   resolution: "qs@npm:6.14.1"
@@ -19631,15 +17832,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"query-string@npm:^7.1.3":
-  version: 7.1.3
-  resolution: "query-string@npm:7.1.3"
+"query-string@npm:^9.3.1":
+  version: 9.3.1
+  resolution: "query-string@npm:9.3.1"
   dependencies:
-    decode-uri-component: "npm:^0.2.2"
-    filter-obj: "npm:^1.1.0"
-    split-on-first: "npm:^1.0.0"
-    strict-uri-encode: "npm:^2.0.0"
-  checksum: 10c0/a896c08e9e0d4f8ffd89a572d11f668c8d0f7df9c27c6f49b92ab31366d3ba0e9c331b9a620ee747893436cd1f2f821a6327e2bc9776bde2402ac6c270b801b2
+    decode-uri-component: "npm:^0.4.1"
+    filter-obj: "npm:^5.1.0"
+    split-on-first: "npm:^3.0.0"
+  checksum: 10c0/47f62350be7ace6d2e03d12becf5d1985731d97577963a4d8b684e166f6708cb42f63f09aa4c92931f2ee1ff57c0800a25807b95f28fd98f7064b1d06b02b07e
   languageName: node
   linkType: hard
 
@@ -19680,17 +17880,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"randomatic@npm:^3.0.0":
-  version: 3.1.1
-  resolution: "randomatic@npm:3.1.1"
-  dependencies:
-    is-number: "npm:^4.0.0"
-    kind-of: "npm:^6.0.0"
-    math-random: "npm:^1.0.1"
-  checksum: 10c0/4b1da4b8e234d3d0bd2294a42541dfa03edbde85ee06fa0722e2b004e845da197d72fa7995723d32ea7d7402823ea62550034118cf22e94638560a509cec5bfc
-  languageName: node
-  linkType: hard
-
 "randombytes@npm:^2.1.0":
   version: 2.1.0
   resolution: "randombytes@npm:2.1.0"
@@ -19700,13 +17889,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"range-parser@npm:1.2.0":
-  version: 1.2.0
-  resolution: "range-parser@npm:1.2.0"
-  checksum: 10c0/c7aef4f6588eb974c475649c157f197d07437d8c6c8ff7e36280a141463fb5ab7a45918417334ebd7b665c6b8321cf31c763f7631dd5f5db9372249261b8b02a
-  languageName: node
-  linkType: hard
-
 "range-parser@npm:^1.2.1, range-parser@npm:~1.2.1":
   version: 1.2.1
   resolution: "range-parser@npm:1.2.1"
@@ -19726,7 +17908,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc@npm:1.2.8, rc@npm:^1.0.1, rc@npm:^1.1.6, rc@npm:^1.2.8, rc@npm:~1.2.7":
+"rc@npm:1.2.8, rc@npm:^1.2.8":
   version: 1.2.8
   resolution: "rc@npm:1.2.8"
   dependencies:
@@ -19740,18 +17922,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-base16-styling@npm:^0.6.0":
-  version: 0.6.0
-  resolution: "react-base16-styling@npm:0.6.0"
-  dependencies:
-    base16: "npm:^1.0.0"
-    lodash.curry: "npm:^4.0.1"
-    lodash.flow: "npm:^3.3.0"
-    pure-color: "npm:^1.2.0"
-  checksum: 10c0/4887ac57b36fedc7e1ebc99ae431c5feb07d60a9150770d0ca3a59f4ae7059434ea8813ca4f915e7434d4d8d8529b9ba072ceb85041fd52ca1cd6289c57c9621
-  languageName: node
-  linkType: hard
-
 "react-color@npm:^2.19.3":
   version: 2.19.3
   resolution: "react-color@npm:2.19.3"
@@ -19769,38 +17939,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dev-utils@npm:^12.0.1":
-  version: 12.0.1
-  resolution: "react-dev-utils@npm:12.0.1"
-  dependencies:
-    "@babel/code-frame": "npm:^7.16.0"
-    address: "npm:^1.1.2"
-    browserslist: "npm:^4.18.1"
-    chalk: "npm:^4.1.2"
-    cross-spawn: "npm:^7.0.3"
-    detect-port-alt: "npm:^1.1.6"
-    escape-string-regexp: "npm:^4.0.0"
-    filesize: "npm:^8.0.6"
-    find-up: "npm:^5.0.0"
-    fork-ts-checker-webpack-plugin: "npm:^6.5.0"
-    global-modules: "npm:^2.0.0"
-    globby: "npm:^11.0.4"
-    gzip-size: "npm:^6.0.0"
-    immer: "npm:^9.0.7"
-    is-root: "npm:^2.1.0"
-    loader-utils: "npm:^3.2.0"
-    open: "npm:^8.4.0"
-    pkg-up: "npm:^3.1.0"
-    prompts: "npm:^2.4.2"
-    react-error-overlay: "npm:^6.0.11"
-    recursive-readdir: "npm:^2.2.2"
-    shell-quote: "npm:^1.7.3"
-    strip-ansi: "npm:^6.0.1"
-    text-table: "npm:^0.2.0"
-  checksum: 10c0/94bc4ee5014290ca47a025e53ab2205c5dc0299670724d46a0b1bacbdd48904827b5ae410842d0a3a92481509097ae032e4a9dc7ca70db437c726eaba6411e82
-  languageName: node
-  linkType: hard
-
 "react-devtools-core@npm:^6.1.5":
   version: 6.1.5
   resolution: "react-devtools-core@npm:6.1.5"
@@ -19824,60 +17962,56 @@ __metadata:
     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/c920e9611e08317f8fdae707114cf02baaa18e2f1bd23ed18f57e66b9e1042e51dc98cc9de828b03d018ccc4e26300c9a6c4f74e862fc94dc64029267c801a01
-  languageName: node
-  linkType: hard
-
-"react-dom@npm:17.0.2, react-dom@npm:~17.0.1":
-  version: 17.0.2
-  resolution: "react-dom@npm:17.0.2"
-  dependencies:
-    loose-envify: "npm:^1.1.0"
-    object-assign: "npm:^4.1.1"
-    scheduler: "npm:^0.20.2"
-  peerDependencies:
-    react: 17.0.2
-  checksum: 10c0/51abbcb72450fe527ebf978c3bc989ba266630faaa53f47a2fae5392369729e8de62b2e4683598cbe651ea7873cd34ec7d5127e2f50bf4bfe6bd0c3ad9bddcb0
+    strip-indent: "npm:^3.0.0"
+  bin:
+    react-docgen: bin/react-docgen.js
+  checksum: 10c0/c920e9611e08317f8fdae707114cf02baaa18e2f1bd23ed18f57e66b9e1042e51dc98cc9de828b03d018ccc4e26300c9a6c4f74e862fc94dc64029267c801a01
   languageName: node
   linkType: hard
 
-"react-dom@npm:18.3.1":
-  version: 18.3.1
-  resolution: "react-dom@npm:18.3.1"
+"react-dom@npm:19.2.3":
+  version: 19.2.3
+  resolution: "react-dom@npm:19.2.3"
   dependencies:
-    loose-envify: "npm:^1.1.0"
-    scheduler: "npm:^0.23.2"
+    scheduler: "npm:^0.27.0"
   peerDependencies:
-    react: ^18.3.1
-  checksum: 10c0/a752496c1941f958f2e8ac56239172296fcddce1365ce45222d04a1947e0cc5547df3e8447f855a81d6d39f008d7c32eab43db3712077f09e3f67c4874973e85
+    react: ^19.2.3
+  checksum: 10c0/dc43f7ede06f46f3acc16ee83107c925530de9b91d1d0b3824583814746ff4c498ea64fd65cd83aba363205268adff52e2827c582634ae7b15069deaeabc4892
   languageName: node
   linkType: hard
 
-"react-dom@npm:19.1.0":
-  version: 19.1.0
-  resolution: "react-dom@npm:19.1.0"
+"react-dom@npm:19.2.6":
+  version: 19.2.6
+  resolution: "react-dom@npm:19.2.6"
   dependencies:
-    scheduler: "npm:^0.26.0"
+    scheduler: "npm:^0.27.0"
   peerDependencies:
-    react: ^19.1.0
-  checksum: 10c0/3e26e89bb6c67c9a6aa86cb888c7a7f8258f2e347a6d2a15299c17eb16e04c19194e3452bc3255bd34000a61e45e2cb51e46292392340432f133e5a5d2dfb5fc
+    react: ^19.2.6
+  checksum: 10c0/dbf2aef67857c03a612bc9316a4562e5066f43fa04bf28f7f0734963fc1350da2c9f8eb973930655453281079f30cc8222bab383dbec4b5097084e2c081e3334
   languageName: node
   linkType: hard
 
-"react-error-overlay@npm:^6.0.11":
-  version: 6.1.0
-  resolution: "react-error-overlay@npm:6.1.0"
-  checksum: 10c0/2b52308b9e489dfaa25df85c7ed5c200371bc214245161a0833b729f9c6b1a2e591e1d1e07c3d3859ffa19b84a386c219d93df9ba13d819be34c20f40e71a555
+"react-dom@npm:^19.2.6":
+  version: 19.2.7
+  resolution: "react-dom@npm:19.2.7"
+  dependencies:
+    scheduler: "npm:^0.27.0"
+  peerDependencies:
+    react: ^19.2.7
+  checksum: 10c0/970ff600f6e80d47d39e2f226f12f226173b3cba3382efc97c5f0cd663de9af38c7a4c11c213fb936094faeac83060d660247accaa96b752180d5b951b9cfecb
   languageName: node
   linkType: hard
 
-"react-fast-compare@npm:^3.2.0, react-fast-compare@npm:^3.2.2":
-  version: 3.2.2
-  resolution: "react-fast-compare@npm:3.2.2"
-  checksum: 10c0/0bbd2f3eb41ab2ff7380daaa55105db698d965c396df73e6874831dbafec8c4b5b08ba36ff09df01526caa3c61595247e3269558c284e37646241cba2b90a367
+"react-dom@npm:~17.0.1":
+  version: 17.0.2
+  resolution: "react-dom@npm:17.0.2"
+  dependencies:
+    loose-envify: "npm:^1.1.0"
+    object-assign: "npm:^4.1.1"
+    scheduler: "npm:^0.20.2"
+  peerDependencies:
+    react: 17.0.2
+  checksum: 10c0/51abbcb72450fe527ebf978c3bc989ba266630faaa53f47a2fae5392369729e8de62b2e4683598cbe651ea7873cd34ec7d5127e2f50bf4bfe6bd0c3ad9bddcb0
   languageName: node
   linkType: hard
 
@@ -19890,169 +18024,131 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-helmet-async@npm:*":
-  version: 2.0.5
-  resolution: "react-helmet-async@npm:2.0.5"
-  dependencies:
-    invariant: "npm:^2.2.4"
-    react-fast-compare: "npm:^3.2.2"
-    shallowequal: "npm:^1.1.0"
-  peerDependencies:
-    react: ^16.6.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/f390ea8bf13c2681850e5f8eb5b73d8613f407c245a5fd23e9db9b2cc14a3700dd1ce992d3966632886d1d613083294c2aeee009193f49dfa7d145d9f13ea2b0
+"react-is-18@npm:react-is@^18.3.1, react-is@npm:^18.0.0":
+  version: 18.3.1
+  resolution: "react-is@npm:18.3.1"
+  checksum: 10c0/f2f1e60010c683479e74c63f96b09fb41603527cd131a9959e2aee1e5a8b0caf270b365e5ca77d4a6b18aae659b60a86150bb3979073528877029b35aecd2072
   languageName: node
   linkType: hard
 
-"react-helmet-async@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "react-helmet-async@npm:1.3.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.12.5"
-    invariant: "npm:^2.2.4"
-    prop-types: "npm:^15.7.2"
-    react-fast-compare: "npm:^3.2.0"
-    shallowequal: "npm:^1.1.0"
-  peerDependencies:
-    react: ^16.6.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/8f3e6d26beff61d2ed18f7b41561df3e4d83a7582914c7196aa65158c7f3cce939276547d7a0b8987952d9d44131406df74efba02d1f8fa8a3940b49e6ced70b
+"react-is-19@npm:react-is@^19.2.5":
+  version: 19.2.7
+  resolution: "react-is@npm:19.2.7"
+  checksum: 10c0/419fe54d5bd7fdf5414a5bb7bd9a1e0e36f9fae28ffb4cb73290fbe342bde15d8584a90d1db62547f6aa03018dce517b178a041abb522136cd4b4b51b4e94c83
   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.3, react-is@npm:^16.8.4":
+"react-is@npm:^16.13.1, react-is@npm:^16.7.0, react-is@npm:^16.8.3, react-is@npm:^16.8.4":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
   checksum: 10c0/33977da7a5f1a287936a0c85639fec6ca74f4f15ef1e59a6bc20338fc73dc69555381e211f7a3529b8150a1f71e4225525b41b60b52965bda53ce7d47377ada1
   languageName: node
   linkType: hard
 
-"react-is@npm:^18.0.0":
-  version: 18.3.1
-  resolution: "react-is@npm:18.3.1"
-  checksum: 10c0/f2f1e60010c683479e74c63f96b09fb41603527cd131a9959e2aee1e5a8b0caf270b365e5ca77d4a6b18aae659b60a86150bb3979073528877029b35aecd2072
-  languageName: node
-  linkType: hard
-
-"react-is@npm:^19.1.0, react-is@npm:^19.1.1":
+"react-is@npm:^19.1.0":
   version: 19.2.3
   resolution: "react-is@npm:19.2.3"
   checksum: 10c0/2b54c422c21b8dbd68a435a1cce21ecd5b6f06f48659531f7d53dd7368365da5a67e946f352fb2010d11ca40658aa67bec90995f0f1ec5556c0f71dbffe54994
   languageName: node
   linkType: hard
 
-"react-json-view@npm:^1.21.3":
-  version: 1.21.3
-  resolution: "react-json-view@npm:1.21.3"
-  dependencies:
-    flux: "npm:^4.0.1"
-    react-base16-styling: "npm:^0.6.0"
-    react-lifecycles-compat: "npm:^3.0.4"
-    react-textarea-autosize: "npm:^8.3.2"
-  peerDependencies:
-    react: ^17.0.0 || ^16.3.0 || ^15.5.4
-    react-dom: ^17.0.0 || ^16.3.0 || ^15.5.4
-  checksum: 10c0/f41b38e599f148cf922f60390e56bb821f17a091373b08310fd82ebc526428683011751aa023687041481a46b20aeb1c47f660979d43db77674486aec9dc1d3f
-  languageName: node
-  linkType: hard
-
-"react-lifecycles-compat@npm:^3.0.4":
-  version: 3.0.4
-  resolution: "react-lifecycles-compat@npm:3.0.4"
-  checksum: 10c0/1d0df3c85af79df720524780f00c064d53a9dd1899d785eddb7264b378026979acbddb58a4b7e06e7d0d12aa1494fd5754562ee55d32907b15601068dae82c27
+"react-lazy-with-preload@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "react-lazy-with-preload@npm:2.2.1"
+  checksum: 10c0/57c36baedc24a2c8fa148681dc7c5123ac183542964063b4a0433856a06d4edead27deb893012a43f75905af51a479b4409e688b97be3ef70cffff926954f6d2
   languageName: node
   linkType: hard
 
-"react-loadable-ssr-addon-v5-slorber@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "react-loadable-ssr-addon-v5-slorber@npm:1.0.1"
+"react-native-builder-bob@npm:^0.42.1":
+  version: 0.42.1
+  resolution: "react-native-builder-bob@npm:0.42.1"
   dependencies:
-    "@babel/runtime": "npm:^7.10.3"
-  peerDependencies:
-    react-loadable: "*"
-    webpack: ">=4.41.1 || 5.x"
-  checksum: 10c0/7b0645f66adec56646f985ba8094c66a1c0a4627d96ad80eea32431d773ef1f79aa47d3247a8f21db3b064a0c6091653c5b5d3483b7046722eb64e55bffe635c
-  languageName: node
-  linkType: hard
-
-"react-native-builder-bob@npm:^0.21.3":
-  version: 0.21.3
-  resolution: "react-native-builder-bob@npm:0.21.3"
-  dependencies:
-    "@babel/core": "npm:^7.18.5"
-    "@babel/plugin-proposal-class-properties": "npm:^7.17.12"
-    "@babel/preset-env": "npm:^7.18.2"
-    "@babel/preset-flow": "npm:^7.17.12"
-    "@babel/preset-react": "npm:^7.17.12"
-    "@babel/preset-typescript": "npm:^7.17.12"
-    browserslist: "npm:^4.20.4"
-    cosmiconfig: "npm:^7.0.1"
-    cross-spawn: "npm:^7.0.3"
-    dedent: "npm:^0.7.0"
-    del: "npm:^6.1.1"
-    fs-extra: "npm:^10.1.0"
-    glob: "npm:^8.0.3"
-    is-git-dirty: "npm:^2.0.1"
-    jetifier: "npm:^2.0.0"
-    json5: "npm:^2.2.1"
-    kleur: "npm:^4.1.4"
+    "@babel/core": "npm:^7.29.0"
+    "@babel/plugin-transform-flow-strip-types": "npm:^7.27.1"
+    "@babel/plugin-transform-strict-mode": "npm:^7.27.1"
+    "@babel/preset-env": "npm:^7.29.2"
+    "@babel/preset-react": "npm:^7.28.5"
+    "@babel/preset-typescript": "npm:^7.28.5"
+    "@jridgewell/sourcemap-codec": "npm:^1.5.5"
+    arktype: "npm:^2.2.0"
+    babel-plugin-syntax-hermes-parser: "npm:^0.34.0"
+    browserslist: "npm:^4.28.2"
+    cross-spawn: "npm:^7.0.6"
+    dedent: "npm:^1.7.2"
+    del: "npm:^8.0.1"
+    escape-string-regexp: "npm:^5.0.0"
+    fs-extra: "npm:^11.3.4"
+    glob: "npm:^13.0.6"
+    json5: "npm:^2.2.3"
+    kleur: "npm:^4.1.5"
     prompts: "npm:^2.4.2"
-    which: "npm:^2.0.2"
-    yargs: "npm:^17.5.1"
-  dependenciesMeta:
-    jetifier:
-      optional: true
+    react-native-monorepo-config: "npm:^0.3.3"
+    typescript: "npm:^6.0.3"
+    which: "npm:^6.0.1"
+    yargs: "npm:^18.0.0"
   bin:
     bob: bin/bob
-  checksum: 10c0/46f026e1024814430fe7b68b5da3cf5d6f38aa72fcd1a351c2bb5590795544a8254a3cb07f47d114f253cadf9f85961901d66e664a147f8f1562a87421001089
+  checksum: 10c0/9d4eb9097eef8e204ffb1ab8c861e90c8b8b6bfc5f4cb86388d1015322fb205c3c8a08db19cd6803f2505ebba9311a7186949e2023f434d097c6e026e7fd013f
   languageName: node
   linkType: hard
 
-"react-native-drawer-layout@npm:^4.2.1":
-  version: 4.2.1
-  resolution: "react-native-drawer-layout@npm:4.2.1"
+"react-native-drawer-layout@npm:^5.0.0-alpha.10":
+  version: 5.0.0-alpha.10
+  resolution: "react-native-drawer-layout@npm:5.0.0-alpha.10"
   dependencies:
-    color: "npm:^4.2.3"
-    use-latest-callback: "npm:^0.2.4"
+    use-latest-callback: "npm:^0.3.3"
   peerDependencies:
-    react: ">= 18.2.0"
+    react: ">= 19.2.0"
     react-native: "*"
     react-native-gesture-handler: ">= 2.0.0"
-    react-native-reanimated: ">= 2.0.0"
-  checksum: 10c0/156960cf9947db0628e4ae5f4ba39c85c4fd75825326090eb9a3051aec94bd0b429e6f90e5983e3da64fe124ef41887e344cf08e5f40a27a2d6a81e0ebeec3b2
+    react-native-reanimated: ">= 4.0.0"
+    react-native-worklets: ">= 0.4.0"
+  checksum: 10c0/00fa3bc90e8544342343497f6c70be2eb8577c18d2080dbfc58fe1db3f84fb09ab8c1c883c0a3c266d5b05f8d0bc032a9c0423bd36a7633fa38dceee766e3955
   languageName: node
   linkType: hard
 
-"react-native-gesture-handler@npm:~2.28.0":
-  version: 2.28.0
-  resolution: "react-native-gesture-handler@npm:2.28.0"
+"react-native-gesture-handler@npm:~2.31.1":
+  version: 2.31.2
+  resolution: "react-native-gesture-handler@npm:2.31.2"
   dependencies:
     "@egjs/hammerjs": "npm:^2.0.17"
+    "@types/react-test-renderer": "npm:^19.1.0"
     hoist-non-react-statics: "npm:^3.3.0"
     invariant: "npm:^2.2.4"
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: 10c0/4240c8eedca69eb36b5d3e375b71867251cf8b87a755ba7066b3f73cfdbc80574042dbd4ff821041fd1539c4cd90dbf7ee34586f5a0ea6cc38052375b3169f2e
+  checksum: 10c0/a312bb684b5de5376078e407a08a17fddef51a11ea09dd12236b3a971b18a68496f3d8c13391cdfefcc5af776fd90936066aaf20a7cfe2849d8c47c223643dd2
   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"
+"react-native-is-edge-to-edge@npm:^1.3.1":
+  version: 1.3.1
+  resolution: "react-native-is-edge-to-edge@npm:1.3.1"
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: 10c0/87d20b900aded7d44c90afb946a7aa03c23a94ca3dd547bdddc2303b85357e4aab22567a57b19f1558d6c8be7058e3dcf34faa1e15182d1604f90974266d9a1d
+  checksum: 10c0/28cebd5f1f3632864ff5e342278721d1e5e38627ae73859a8814012116ef15c629fee7137a6c9c97bb05d94bbe639b0b47e69b36fc2735ab53ed31570140663f
+  languageName: node
+  linkType: hard
+
+"react-native-monorepo-config@npm:^0.3.3":
+  version: 0.3.4
+  resolution: "react-native-monorepo-config@npm:0.3.4"
+  dependencies:
+    escape-string-regexp: "npm:^5.0.0"
+    fast-glob: "npm:^3.3.3"
+  checksum: 10c0/c7bf7ae964b36cec2de667791c77b4011044343ba9640a9b6e4b34c51a487441180c5e2e48133218fbd401e910be43ecf1dc96a3e79d1679dd4e4c7c89b568a5
   languageName: node
   linkType: hard
 
-"react-native-monorepo-config@npm:^0.1.6":
-  version: 0.1.10
-  resolution: "react-native-monorepo-config@npm:0.1.10"
+"react-native-monorepo-config@npm:^0.4.0":
+  version: 0.4.0
+  resolution: "react-native-monorepo-config@npm:0.4.0"
   dependencies:
     escape-string-regexp: "npm:^5.0.0"
     fast-glob: "npm:^3.3.3"
-  checksum: 10c0/fa88a725b4fe65443291fba746cccf2a3732defe6c8e1f7aab532b8345feac2b34af7fe17a28a96d30c7b9520f0f99e42962069ef8eb31acc4d33e7aa3b68a83
+  checksum: 10c0/62e6e2ab859a2e0e5a4028b9f018043a803bfd35c62017a0ca834fc0ff389b5f9cca82c3bf5332d30644e9488e6144ebb0a94965c918d64fce5dbabe094163f8
   languageName: node
   linkType: hard
 
@@ -20060,39 +18156,36 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "react-native-paper-example@workspace:example"
   dependencies:
-    "@babel/core": "npm:^7.25.2"
-    "@expo/vector-icons": "npm:^15.0.2"
-    "@expo/webpack-config": "npm:~19.0.1"
-    "@pchmn/expo-material3-theme": "npm:^1.3.2"
+    "@babel/core": "npm:^7.29.0"
+    "@expo/metro-config": "npm:~56.0.0"
     "@react-native-async-storage/async-storage": "npm:2.2.0"
     "@react-native-masked-view/masked-view": "npm:0.3.2"
-    "@react-navigation/bottom-tabs": "npm:^7.3.10"
-    "@react-navigation/drawer": "npm:^7.3.9"
-    "@react-navigation/native": "npm:^7.1.6"
-    "@react-navigation/stack": "npm:^7.2.10"
-    babel-plugin-module-resolver: "npm:^5.0.0"
-    babel-preset-expo: "npm:~54.0.0"
-    expo: "npm:^54.0.0"
-    expo-crypto: "npm:~15.0.7"
-    expo-dev-client: "npm:~6.0.14"
-    expo-font: "npm:~14.0.9"
-    expo-keep-awake: "npm:~15.0.7"
-    expo-splash-screen: "npm:~31.0.10"
-    expo-status-bar: "npm:~3.0.8"
-    expo-updates: "npm:~29.0.12"
-    file-loader: "npm:^6.2.0"
-    react: "npm:19.1.0"
-    react-dom: "npm:19.1.0"
-    react-native: "npm:0.81.4"
-    react-native-gesture-handler: "npm:~2.28.0"
-    react-native-monorepo-config: "npm:^0.1.6"
-    react-native-reanimated: "npm:~4.1.1"
-    react-native-safe-area-context: "npm:~5.6.0"
-    react-native-screens: "npm:~4.16.0"
+    "@react-navigation/bottom-tabs": "npm:^8.0.0-alpha.33"
+    "@react-navigation/drawer": "npm:^8.0.0-alpha.34"
+    "@react-navigation/elements": "npm:3.0.0-alpha.31"
+    "@react-navigation/native": "npm:^8.0.0-alpha.28"
+    "@react-navigation/native-stack": "npm:^8.0.0-alpha.34"
+    babel-preset-expo: "npm:~56.0.0"
+    expo: "npm:~56.0.0"
+    expo-constants: "npm:~56.0.18"
+    expo-crypto: "npm:~56.0.3"
+    expo-dev-client: "npm:~56.0.13"
+    expo-font: "npm:~56.0.5"
+    expo-keep-awake: "npm:~56.0.3"
+    expo-splash-screen: "npm:~56.0.9"
+    expo-status-bar: "npm:~56.0.4"
+    expo-updates: "npm:~56.0.14"
+    react: "npm:19.2.3"
+    react-dom: "npm:19.2.3"
+    react-native: "npm:0.85.3"
+    react-native-builder-bob: "npm:^0.42.1"
+    react-native-gesture-handler: "npm:~2.31.1"
+    react-native-monorepo-config: "npm:^0.4.0"
+    react-native-reanimated: "npm:4.3.1"
+    react-native-safe-area-context: "npm:~5.7.0"
+    react-native-screens: "npm:4.25.1"
     react-native-web: "npm:^0.21.0"
-    react-native-worklets: "npm:0.5.1"
-    typeface-roboto: "npm:^1.1.13"
-    url-loader: "npm:^4.1.1"
+    react-native-worklets: "npm:0.8.3"
   languageName: unknown
   linkType: soft
 
@@ -20100,139 +18193,95 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "react-native-paper@workspace:."
   dependencies:
-    "@babel/core": "npm:^7.25.2"
+    "@babel/core": "npm:^7.29.0"
+    "@babel/parser": "npm:^7.29.0"
     "@babel/plugin-proposal-export-namespace-from": "npm:^7.18.9"
-    "@babel/runtime": "npm:^7.25.0"
-    "@callstack/eslint-config": "npm:^13.0.2"
+    "@babel/types": "npm:^7.29.0"
+    "@callstack/eslint-config": "npm:^15.0.0"
     "@callstack/react-theme-provider": "npm:^3.0.9"
     "@commitlint/config-conventional": "npm:^8.3.4"
+    "@eslint/js": "npm:9.39.4"
+    "@jest/globals": "npm:^29.7.0"
     "@react-native-vector-icons/material-design-icons": "npm:^12.0.0"
-    "@react-native/babel-preset": "npm:^0.82.1"
-    "@react-navigation/native": "npm:^6.1.2"
+    "@react-native/babel-preset": "npm:^0.85.3"
+    "@react-native/jest-preset": "npm:^0.85.3"
+    "@react-navigation/native": "npm:^8.0.0-alpha.28"
     "@release-it/conventional-changelog": "npm:^1.1.0"
-    "@testing-library/jest-native": "npm:^5.4.1"
-    "@testing-library/react-native": "npm:11.5.0"
+    "@testing-library/react-native": "npm:^14.0.0"
     "@types/color": "npm:^3.0.0"
-    "@types/jest": "npm:^29.2.1"
-    "@types/node": "npm:^13.1.0"
-    "@types/react-dom": "npm:^19.1.1"
-    "@types/react-native-vector-icons": "npm:^6.4.18"
-    "@types/react-test-renderer": "npm:^19.1.0"
-    "@typescript-eslint/eslint-plugin": "npm:^5.41.0"
-    "@typescript-eslint/parser": "npm:^5.41.0"
+    "@types/node": "npm:^24.0.0"
+    "@types/react": "npm:^19.2.7"
     all-contributors-cli: "npm:^6.24.0"
-    babel-cli: "npm:^6.26.0"
-    babel-core: "npm:^7.0.0-bridge.0"
     babel-jest: "npm:^29.6.3"
-    babel-loader: "npm:^8.2.3"
     babel-test: "npm:^0.1.1"
-    chalk: "npm:^4.0.0"
     color: "npm:^3.1.2"
     commitlint: "npm:^8.3.4"
-    conventional-changelog-cli: "npm:^2.0.11"
-    dedent: "npm:^0.7.0"
-    eslint: "npm:8.31.0"
+    eslint: "npm:9.39.4"
     eslint-plugin-flowtype: "npm:^8.0.3"
-    eslint-plugin-local-rules: "npm:^1.3.2"
-    glob: "npm:^7.1.3"
-    husky: "npm:^1.3.1"
+    eslint-plugin-testing-library: "npm:^7.16.2"
+    fast-deep-equal: "npm:^3.1.3"
     jest: "npm:^29.6.3"
     jest-file-snapshot: "npm:^0.3.2"
-    react: "npm:19.1.1"
-    react-dom: "npm:18.3.1"
-    react-native: "npm:0.82.1"
-    react-native-builder-bob: "npm:^0.21.3"
-    react-native-safe-area-context: "npm:5.5.2"
-    react-test-renderer: "npm:19.1.1"
+    lefthook: "npm:^2.1.9"
+    prettier: "npm:^3.8.4"
+    react: "npm:19.2.3"
+    react-native: "npm:0.85.3"
+    react-native-builder-bob: "npm:^0.42.1"
+    react-native-reanimated: "npm:4.3.1"
+    react-native-safe-area-context: "npm:5.7.0"
+    react-native-worklets: "npm:0.8.3"
     release-it: "npm:^13.4.0"
-    rimraf: "npm:^3.0.2"
+    test-renderer: "npm:1.2.0"
     typescript: "npm:5.8.3"
+    typescript-eslint: "npm:^8.61.1"
     use-latest-callback: "npm:^0.2.3"
   peerDependencies:
     react: "*"
     react-native: "*"
+    react-native-reanimated: ">=4.3.0"
     react-native-safe-area-context: "*"
+    react-native-worklets: ">=0.8.1"
   languageName: unknown
   linkType: soft
 
-"react-native-reanimated@npm:~4.1.1":
-  version: 4.1.6
-  resolution: "react-native-reanimated@npm:4.1.6"
+"react-native-reanimated@npm:4.3.1":
+  version: 4.3.1
+  resolution: "react-native-reanimated@npm:4.3.1"
   dependencies:
-    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: "*"
-    react-native-worklets: ">=0.5.0"
-  checksum: 10c0/924b3a3fc0e6b47b97491122689bc00d59c5c2abf90ba05dd811f1c6d59efb8fb83135e4fa4463241ff937450025b7b335af54ab5f35c15197efaaef90235e91
-  languageName: node
-  linkType: hard
-
-"react-native-safe-area-context@npm:5.5.2":
-  version: 5.5.2
-  resolution: "react-native-safe-area-context@npm:5.5.2"
-  peerDependencies:
-    react: "*"
-    react-native: "*"
-  checksum: 10c0/529cafcafbc1d994f6d9c9be41ae4f78768b7c103a22265d3fe5223a930249e0a07a934b5ec358ce510622061f339a20c2147b620bd15032366b12b4258c2ce5
-  languageName: node
-  linkType: hard
-
-"react-native-safe-area-context@npm:^4.5.0":
-  version: 4.14.1
-  resolution: "react-native-safe-area-context@npm:4.14.1"
+    react-native-is-edge-to-edge: "npm:^1.3.1"
+    semver: "npm:^7.7.3"
   peerDependencies:
     react: "*"
-    react-native: "*"
-  checksum: 10c0/c34c6fe9002a89c80ddb206fc68db99f1e432e19c7cf5aaa93b430584051b7e7caf889093224029437dc5b66fe434b09e9950d755aa40b58e1e3a1f976c2fec1
+    react-native: 0.81 - 0.85
+    react-native-worklets: 0.8.x
+  checksum: 10c0/e456e2def81433872e3a43fd8a37b4e8d8be807ecb9f692b876a5d513d71918104c56db388ae0b58417f25764e3ab82c6fda9327079b3fdc73bedc8593d4f189
   languageName: node
   linkType: hard
 
-"react-native-safe-area-context@npm:~5.6.0":
-  version: 5.6.2
-  resolution: "react-native-safe-area-context@npm:5.6.2"
+"react-native-safe-area-context@npm:5.7.0, react-native-safe-area-context@npm:~5.7.0":
+  version: 5.7.0
+  resolution: "react-native-safe-area-context@npm:5.7.0"
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: 10c0/3c8df21a1dbac83116b9c9bd5d20b7c1bb7649ecef44a111af6fb6b237241f5f4d692189eec30a69f5701b857249257da3621b9e17165460a2bb71faac7b92ae
+  checksum: 10c0/c3799e17321b41df1e0a10492c98472f8f8225ef0bbaf8146c4a9acb9519aae9ac11429059143c215e4402c2808e8445274850a339f8477522ded2461e18da80
   languageName: node
   linkType: hard
 
-"react-native-screens@npm:~4.16.0":
-  version: 4.16.0
-  resolution: "react-native-screens@npm:4.16.0"
+"react-native-screens@npm:4.25.1":
+  version: 4.25.1
+  resolution: "react-native-screens@npm:4.25.1"
   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/8ec459ff52cbd317bfca598843a0010b4ca9070d05664f28d792594d8ceabb398b9d68abb578f40295e41f906308efe7ac7359046fba7aaf318a0d9d65446102
-  languageName: node
-  linkType: hard
-
-"react-native-web@npm:^0.18.12":
-  version: 0.18.12
-  resolution: "react-native-web@npm:0.18.12"
-  dependencies:
-    "@babel/runtime": "npm:^7.18.6"
-    create-react-class: "npm:^15.7.0"
-    fbjs: "npm:^3.0.4"
-    inline-style-prefixer: "npm:^6.0.1"
-    normalize-css-color: "npm:^1.0.2"
-    postcss-value-parser: "npm:^4.2.0"
-    styleq: "npm:^0.1.2"
-  peerDependencies:
-    react: ^17.0.2 || ^18.0.0
-    react-dom: ^17.0.2 || ^18.0.0
-  checksum: 10c0/845bbe1061e0c80cc998a75345ca4ebee4972fb39c8344fb96faec1c8961c38c015df047d9c3a7ebab2f74151aba9fe930b0da49c55b710549ba93bf577a1696
+    react-native: ">=0.82.0"
+  checksum: 10c0/9657e2bb35f73b779acad5d9d2f280791842b3a830496368806170fe9b97d2c09ec792f4566ac30237334f16aa646638f5062c770828feebb4135ea62c32c61e
   languageName: node
   linkType: hard
 
-"react-native-web@npm:^0.21.0":
+"react-native-web@npm:^0.21.0, react-native-web@npm:^0.21.2":
   version: 0.21.2
   resolution: "react-native-web@npm:0.21.2"
   dependencies:
@@ -20251,127 +18300,89 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-worklets@npm:0.5.1":
-  version: 0.5.1
-  resolution: "react-native-worklets@npm:0.5.1"
+"react-native-worklets@npm:0.8.3":
+  version: 0.8.3
+  resolution: "react-native-worklets@npm:0.8.3"
   dependencies:
-    "@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"
+    "@babel/plugin-transform-arrow-functions": "npm:^7.27.1"
+    "@babel/plugin-transform-class-properties": "npm:^7.27.1"
+    "@babel/plugin-transform-classes": "npm:^7.28.4"
+    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.27.1"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.27.1"
+    "@babel/plugin-transform-shorthand-properties": "npm:^7.27.1"
+    "@babel/plugin-transform-template-literals": "npm:^7.27.1"
+    "@babel/plugin-transform-unicode-regex": "npm:^7.27.1"
+    "@babel/preset-typescript": "npm:^7.27.1"
     convert-source-map: "npm:^2.0.0"
-    semver: "npm:7.7.2"
+    semver: "npm:^7.7.3"
   peerDependencies:
-    "@babel/core": ^7.0.0-0
+    "@babel/core": "*"
+    "@react-native/metro-config": "*"
     react: "*"
-    react-native: "*"
-  checksum: 10c0/9eb9e6dea9abaf889400a6618355ef59af3075f5004a4bec9e4cba6dcfd13d8b63de0d4b29d75c00a3dcf5ad422e1bdb71636c75b1a2ad1c43d8b512f198bdab
+    react-native: 0.81 - 0.85
+  checksum: 10c0/9ceb8ff1f1569165be3318c958087ed95d7b89e5e7308b733dc3f8e328d48c2acc7bc7369449b004b1824ed96e14a15a279d2dbee0105d7d62a55001045484ba
   languageName: node
   linkType: hard
 
-"react-native@npm:0.81.4":
-  version: 0.81.4
-  resolution: "react-native@npm:0.81.4"
+"react-native@npm:0.85.3":
+  version: 0.85.3
+  resolution: "react-native@npm:0.85.3"
   dependencies:
-    "@jest/create-cache-key-function": "npm:^29.7.0"
-    "@react-native/assets-registry": "npm:0.81.4"
-    "@react-native/codegen": "npm:0.81.4"
-    "@react-native/community-cli-plugin": "npm:0.81.4"
-    "@react-native/gradle-plugin": "npm:0.81.4"
-    "@react-native/js-polyfills": "npm:0.81.4"
-    "@react-native/normalize-colors": "npm:0.81.4"
-    "@react-native/virtualized-lists": "npm:0.81.4"
+    "@react-native/assets-registry": "npm:0.85.3"
+    "@react-native/codegen": "npm:0.85.3"
+    "@react-native/community-cli-plugin": "npm:0.85.3"
+    "@react-native/gradle-plugin": "npm:0.85.3"
+    "@react-native/js-polyfills": "npm:0.85.3"
+    "@react-native/normalize-colors": "npm:0.85.3"
+    "@react-native/virtualized-lists": "npm:0.85.3"
     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"
+    babel-plugin-syntax-hermes-parser: "npm:0.33.3"
     base64-js: "npm:^1.5.1"
     commander: "npm:^12.0.0"
     flow-enums-runtime: "npm:^0.0.6"
-    glob: "npm:^7.1.1"
+    hermes-compiler: "npm:250829098.0.10"
     invariant: "npm:^2.2.4"
-    jest-environment-node: "npm:^29.7.0"
     memoize-one: "npm:^5.0.0"
-    metro-runtime: "npm:^0.83.1"
-    metro-source-map: "npm:^0.83.1"
+    metro-runtime: "npm:^0.84.3"
+    metro-source-map: "npm:^0.84.3"
     nullthrows: "npm:^1.1.1"
     pretty-format: "npm:^29.7.0"
     promise: "npm:^8.3.0"
     react-devtools-core: "npm:^6.1.5"
     react-refresh: "npm:^0.14.0"
     regenerator-runtime: "npm:^0.13.2"
-    scheduler: "npm:0.26.0"
+    scheduler: "npm:0.27.0"
     semver: "npm:^7.1.3"
     stacktrace-parser: "npm:^0.1.10"
+    tinyglobby: "npm:^0.2.15"
     whatwg-fetch: "npm:^3.0.0"
-    ws: "npm:^6.2.3"
+    ws: "npm:^7.5.10"
     yargs: "npm:^17.6.2"
   peerDependencies:
-    "@types/react": ^19.1.0
-    react: ^19.1.0
+    "@react-native/jest-preset": 0.85.3
+    "@types/react": ^19.1.1
+    react: ^19.2.3
   peerDependenciesMeta:
+    "@react-native/jest-preset":
+      optional: true
     "@types/react":
       optional: true
   bin:
     react-native: cli.js
-  checksum: 10c0/fcac8d18e1b479a0df43577b3c78bf88add430b529c32a649cd7528c6f1661d64eaf99910df48647df910a68a93adb88f3a2d8a9baddf9003ae59b8570d4ab09
+  checksum: 10c0/365bd8ea2de1a707b753e249f17d9f18d993fd80edf76d4316e133ab6d10d51b9ed6912b952fa2173f56a3b8fbef34f179b686907e7d7c06b6e605fbf1dce895
   languageName: node
   linkType: hard
 
-"react-native@npm:0.82.1":
-  version: 0.82.1
-  resolution: "react-native@npm:0.82.1"
+"react-reconciler@npm:0.33.0, react-reconciler@npm:~0.33.0":
+  version: 0.33.0
+  resolution: "react-reconciler@npm:0.33.0"
   dependencies:
-    "@jest/create-cache-key-function": "npm:^29.7.0"
-    "@react-native/assets-registry": "npm:0.82.1"
-    "@react-native/codegen": "npm:0.82.1"
-    "@react-native/community-cli-plugin": "npm:0.82.1"
-    "@react-native/gradle-plugin": "npm:0.82.1"
-    "@react-native/js-polyfills": "npm:0.82.1"
-    "@react-native/normalize-colors": "npm:0.82.1"
-    "@react-native/virtualized-lists": "npm:0.82.1"
-    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.32.0"
-    base64-js: "npm:^1.5.1"
-    commander: "npm:^12.0.0"
-    flow-enums-runtime: "npm:^0.0.6"
-    glob: "npm:^7.1.1"
-    hermes-compiler: "npm:0.0.0"
-    invariant: "npm:^2.2.4"
-    jest-environment-node: "npm:^29.7.0"
-    memoize-one: "npm:^5.0.0"
-    metro-runtime: "npm:^0.83.1"
-    metro-source-map: "npm:^0.83.1"
-    nullthrows: "npm:^1.1.1"
-    pretty-format: "npm:^29.7.0"
-    promise: "npm:^8.3.0"
-    react-devtools-core: "npm:^6.1.5"
-    react-refresh: "npm:^0.14.0"
-    regenerator-runtime: "npm:^0.13.2"
-    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.3"
-    yargs: "npm:^17.6.2"
+    scheduler: "npm:^0.27.0"
   peerDependencies:
-    "@types/react": ^19.1.1
-    react: ^19.1.1
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  bin:
-    react-native: cli.js
-  checksum: 10c0/131f58417331b90cd09bc191c42903fa55c0d9e76c4cd2916c3f553299736778614ecc9bf685400275eeb16bd00b033ba65fd4f411ba1d6d46efb95bc5e36e35
+    react: ^19.2.0
+  checksum: 10c0/3f7b27ea8d0ff4c8bf0e402a285e1af9b7d0e6f4c1a70a28f4384938bc1130bc82a90a31df0b79ef5e380e2e55e2598bd90b4dbf802b1203d735ba0355817d3a
   languageName: node
   linkType: hard
 
@@ -20382,100 +18393,80 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router-config@npm:^5.1.1":
-  version: 5.1.1
-  resolution: "react-router-config@npm:5.1.1"
-  dependencies:
-    "@babel/runtime": "npm:^7.1.2"
-  peerDependencies:
-    react: ">=15"
-    react-router: ">=5"
-  checksum: 10c0/1f8f4e55ca68b7b012293e663eb0ee4d670a3df929b78928f713ef98cd9d62c7f5c30a098d6668e64bbb11c7d6bb24e9e6b9c985a8b82465a1858dc7ba663f2b
+"react-refresh@npm:^0.18.0":
+  version: 0.18.0
+  resolution: "react-refresh@npm:0.18.0"
+  checksum: 10c0/34a262f7fd803433a534f50deb27a148112a81adcae440c7d1cbae7ef14d21ea8f2b3d783e858cb7698968183b77755a38b4d4b5b1d79b4f4689c2f6d358fff2
   languageName: node
   linkType: hard
 
-"react-router-dom@npm:^5.3.3":
-  version: 5.3.4
-  resolution: "react-router-dom@npm:5.3.4"
+"react-render-to-markdown@npm:19.1.0":
+  version: 19.1.0
+  resolution: "react-render-to-markdown@npm:19.1.0"
   dependencies:
-    "@babel/runtime": "npm:^7.12.13"
-    history: "npm:^4.9.0"
-    loose-envify: "npm:^1.3.1"
-    prop-types: "npm:^15.6.2"
-    react-router: "npm:5.3.4"
-    tiny-invariant: "npm:^1.0.2"
-    tiny-warning: "npm:^1.0.0"
+    react-reconciler: "npm:0.33.0"
   peerDependencies:
-    react: ">=15"
-  checksum: 10c0/f04f727e2ed2e9d1d3830af02cc61690ff67b1524c0d18690582bfba0f4d14142ccc88fb6da6befad644fddf086f5ae4c2eb7048c67da8a0b0929c19426421b0
+    react: ">=19"
+  checksum: 10c0/f24f733f20ddeaa43c3564b5e8fd60ffa851c026d5b5469569503b5fbef43da44d959d2ffdf64d0c11b2b26db673df0d7484d701775946c10d8996787d722d22
   languageName: node
   linkType: hard
 
-"react-router@npm:5.3.4, react-router@npm:^5.3.3":
-  version: 5.3.4
-  resolution: "react-router@npm:5.3.4"
+"react-router-dom@npm:^7.15.1":
+  version: 7.17.0
+  resolution: "react-router-dom@npm:7.17.0"
   dependencies:
-    "@babel/runtime": "npm:^7.12.13"
-    history: "npm:^4.9.0"
-    hoist-non-react-statics: "npm:^3.1.0"
-    loose-envify: "npm:^1.3.1"
-    path-to-regexp: "npm:^1.7.0"
-    prop-types: "npm:^15.6.2"
-    react-is: "npm:^16.6.0"
-    tiny-invariant: "npm:^1.0.2"
-    tiny-warning: "npm:^1.0.0"
+    react-router: "npm:7.17.0"
   peerDependencies:
-    react: ">=15"
-  checksum: 10c0/e15c00dfef199249b4c6e6d98e5e76cc352ce66f3270f13df37cc069ddf7c05e43281e8c308fc407e4435d72924373baef1d2890e0f6b0b1eb423cf47315a053
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 10c0/60fc4022bccf2fb17b0d8ae8e7c4bda866ca9bf2d45edf0bcbefc854e97fa8971a589b6b77b984a19abecb718faffde357c829d9a22a7913790d608cc7433714
   languageName: node
   linkType: hard
 
-"react-test-renderer@npm:19.1.1":
-  version: 19.1.1
-  resolution: "react-test-renderer@npm:19.1.1"
+"react-router@npm:7.17.0":
+  version: 7.17.0
+  resolution: "react-router@npm:7.17.0"
   dependencies:
-    react-is: "npm:^19.1.1"
-    scheduler: "npm:^0.26.0"
+    cookie: "npm:^1.0.1"
+    set-cookie-parser: "npm:^2.6.0"
   peerDependencies:
-    react: ^19.1.1
-  checksum: 10c0/430636d63cff6b79a15fe876d16601891fcdf1c58236471063f4cfe50de2c9fae935c6894eebe6ca5be0bf7245cb572c14ff69e1aada7761b41c73c842e2879c
+    react: ">=18"
+    react-dom: ">=18"
+  peerDependenciesMeta:
+    react-dom:
+      optional: true
+  checksum: 10c0/dfa9b0182edba6fab14ef5ac297b292068e71e05bf7e07c6b45fe073d77002089e8e164542364232a8bbb0c7d3ec47b57b78db3984c4383e12308f2d31ad404a
   languageName: node
   linkType: hard
 
-"react-textarea-autosize@npm:^8.3.2":
-  version: 8.5.9
-  resolution: "react-textarea-autosize@npm:8.5.9"
-  dependencies:
-    "@babel/runtime": "npm:^7.20.13"
-    use-composed-ref: "npm:^1.3.0"
-    use-latest: "npm:^1.2.1"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-  checksum: 10c0/3a924db59259a6e3b834dcddc12a8661b43dcdaa1b43c41c732e0548bb2761e9a53dbc6db4e0d9e237728b4869e42c25e5417408b0391aec290c90874733a09f
+"react@npm:19.2.3":
+  version: 19.2.3
+  resolution: "react@npm:19.2.3"
+  checksum: 10c0/094220b3ba3a76c1b668f972ace1dd15509b157aead1b40391d1c8e657e720c201d9719537375eff08f5e0514748c0319063392a6f000e31303aafc4471f1436
   languageName: node
   linkType: hard
 
-"react@npm:17.0.2, react@npm:~17.0.1":
-  version: 17.0.2
-  resolution: "react@npm:17.0.2"
-  dependencies:
-    loose-envify: "npm:^1.1.0"
-    object-assign: "npm:^4.1.1"
-  checksum: 10c0/07ae8959acf1596f0550685102fd6097d461a54a4fd46a50f88a0cd7daaa97fdd6415de1dcb4bfe0da6aa43221a6746ce380410fa848acc60f8ac41f6649c148
+"react@npm:19.2.6":
+  version: 19.2.6
+  resolution: "react@npm:19.2.6"
+  checksum: 10c0/66afde33b9a9ee87b1e1cae39d8e7e040d1262e719524fd70660c4d4ce79929c532ac19fc3df5a911edaf02768fdf2c49de4ede1ba99bc6aad72796e0e26e798
   languageName: node
   linkType: hard
 
-"react@npm:19.1.0":
-  version: 19.1.0
-  resolution: "react@npm:19.1.0"
-  checksum: 10c0/530fb9a62237d54137a13d2cfb67a7db6a2156faed43eecc423f4713d9b20c6f2728b026b45e28fcd72e8eadb9e9ed4b089e99f5e295d2f0ad3134251bdd3698
+"react@npm:^19.2.6":
+  version: 19.2.7
+  resolution: "react@npm:19.2.7"
+  checksum: 10c0/0bd0e2f1bbd4ba97561c6597bf8a5fec05e6476fe61e165c1065598d16668efc6715205599c94d3ddd49d36cb0f21cbf1b9bcc18ee840b805ce222c3e8d558ac
   languageName: node
   linkType: hard
 
-"react@npm:19.1.1":
-  version: 19.1.1
-  resolution: "react@npm:19.1.1"
-  checksum: 10c0/8c9769a2dfd02e603af6445058325e6c8a24b47b185d0e461f66a6454765ddcaecb3f0a90184836c68bb509f3c38248359edbc42f0d07c23eb500a5c30c87b4e
+"react@npm:~17.0.1":
+  version: 17.0.2
+  resolution: "react@npm:17.0.2"
+  dependencies:
+    loose-envify: "npm:^1.1.0"
+    object-assign: "npm:^4.1.1"
+  checksum: 10c0/07ae8959acf1596f0550685102fd6097d461a54a4fd46a50f88a0cd7daaa97fdd6415de1dcb4bfe0da6aa43221a6746ce380410fa848acc60f8ac41f6649c148
   languageName: node
   linkType: hard
 
@@ -20532,18 +18523,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"read-pkg@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "read-pkg@npm:4.0.1"
-  dependencies:
-    normalize-package-data: "npm:^2.3.2"
-    parse-json: "npm:^4.0.0"
-    pify: "npm:^3.0.0"
-  checksum: 10c0/70c934969aba7267a229871345fe1714e1416085c3db9cba8f7fcd78fba3bd38cef7f08a9d661880e552a5722baf8feaf792875b3108d251a5b6dd94369c752d
-  languageName: node
-  linkType: hard
-
-"readable-stream@npm:3, readable-stream@npm:^3.0.0, readable-stream@npm:^3.0.2, readable-stream@npm:^3.0.6, readable-stream@npm:^3.4.0":
+"readable-stream@npm:3, readable-stream@npm:^3.0.0, readable-stream@npm:^3.0.2, readable-stream@npm:^3.4.0":
   version: 3.6.2
   resolution: "readable-stream@npm:3.6.2"
   dependencies:
@@ -20554,7 +18534,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"readable-stream@npm:^2.0.1, readable-stream@npm:^2.0.2, readable-stream@npm:~2.3.6":
+"readable-stream@npm:^2.0.1, readable-stream@npm:~2.3.6":
   version: 2.3.8
   resolution: "readable-stream@npm:2.3.8"
   dependencies:
@@ -20569,33 +18549,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"readdirp@npm:^2.0.0":
-  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":
-  version: 3.6.0
-  resolution: "readdirp@npm:3.6.0"
-  dependencies:
-    picomatch: "npm:^2.2.1"
-  checksum: 10c0/6fa848cf63d1b82ab4e985f4cf72bd55b7dcfd8e0a376905804e48c3634b7e749170940ba77b32804d5fe93b3cc521aa95a8d7e7d725f830da6d93f3669ce66b
-  languageName: node
-  linkType: hard
-
-"reading-time@npm:^1.5.0":
-  version: 1.5.0
-  resolution: "reading-time@npm:1.5.0"
-  checksum: 10c0/0f730852fd4fb99e5f78c5b0cf36ab8c3fa15db96f87d9563843f6fd07a47864273ade539ebb184b785b728cde81a70283aa2d9b80cba5ca03b81868be03cabc
-  languageName: node
-  linkType: hard
-
 "recast@npm:^0.20.4":
   version: 0.20.5
   resolution: "recast@npm:0.20.5"
@@ -20617,12 +18570,53 @@ __metadata:
   languageName: node
   linkType: hard
 
-"recursive-readdir@npm:^2.2.2":
-  version: 2.2.3
-  resolution: "recursive-readdir@npm:2.2.3"
+"recma-build-jsx@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "recma-build-jsx@npm:1.0.0"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    estree-util-build-jsx: "npm:^3.0.0"
+    vfile: "npm:^6.0.0"
+  checksum: 10c0/ca30f5163887b44c74682355da2625f7b49f33267699d22247913e513e043650cbdd6a7497cf13c60f09ad9e7bc2bd35bd20853672773c19188569814b56bb04
+  languageName: node
+  linkType: hard
+
+"recma-jsx@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "recma-jsx@npm:1.0.1"
   dependencies:
-    minimatch: "npm:^3.0.5"
-  checksum: 10c0/d0238f137b03af9cd645e1e0b40ae78b6cda13846e3ca57f626fcb58a66c79ae018a10e926b13b3a460f1285acc946a4e512ea8daa2e35df4b76a105709930d1
+    acorn-jsx: "npm:^5.0.0"
+    estree-util-to-js: "npm:^2.0.0"
+    recma-parse: "npm:^1.0.0"
+    recma-stringify: "npm:^1.0.0"
+    unified: "npm:^11.0.0"
+  peerDependencies:
+    acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+  checksum: 10c0/9921b1270581ff133b94678868e665ba0fb6285ee60a6936106bac4899196c2ffb02dde894d9bc088fbf3deacb3e2426a3452e72066bf1203cbefebd7809d93f
+  languageName: node
+  linkType: hard
+
+"recma-parse@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "recma-parse@npm:1.0.0"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    esast-util-from-js: "npm:^2.0.0"
+    unified: "npm:^11.0.0"
+    vfile: "npm:^6.0.0"
+  checksum: 10c0/37c0990859a562d082e02d475ca5f4c8ef0840d285270f6699fe888cbb06260f97eb098585eda4aae416182c207fd19cf05e4f0b2dcf55cbf81dde4406d95545
+  languageName: node
+  linkType: hard
+
+"recma-stringify@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "recma-stringify@npm:1.0.0"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    estree-util-to-js: "npm:^2.0.0"
+    unified: "npm:^11.0.0"
+    vfile: "npm:^6.0.0"
+  checksum: 10c0/c2ed4c0e8cf8a09aedcd47c5d016d47f6e1ff6c2d4b220e2abaf1b77713bf404756af2ea3ea7999aec5862e8825aff035edceb370c7fd8603a7e9da03bd6987e
   languageName: node
   linkType: hard
 
@@ -20725,15 +18719,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regex-cache@npm:^0.4.2":
-  version: 0.4.4
-  resolution: "regex-cache@npm:0.4.4"
-  dependencies:
-    is-equal-shallow: "npm:^0.1.3"
-  checksum: 10c0/d3e374638b577ae560a445c7f36b801cab4815f7d25e1a9afc2328c01d5c0d203ea0d24e95635843e25ebc54e061f1790f7d47aa3839c49f67bbc53358ad9066
-  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"
@@ -20744,6 +18729,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"regex-recursion@npm:^6.0.2":
+  version: 6.0.2
+  resolution: "regex-recursion@npm:6.0.2"
+  dependencies:
+    regex-utilities: "npm:^2.3.0"
+  checksum: 10c0/68e8b6889680e904b75d7f26edaf70a1a4dc1087406bff53face4c2929d918fd77c72223843fe816ac8ed9964f96b4160650e8d5909e26a998c6e9de324dadb1
+  languageName: node
+  linkType: hard
+
+"regex-utilities@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "regex-utilities@npm:2.3.0"
+  checksum: 10c0/78c550a80a0af75223244fff006743922591bd8f61d91fef7c86b9b56cf9bbf8ee5d7adb6d8991b5e304c57c90103fc4818cf1e357b11c6c669b782839bd7893
+  languageName: node
+  linkType: hard
+
+"regex@npm:^6.1.0":
+  version: 6.1.0
+  resolution: "regex@npm:6.1.0"
+  dependencies:
+    regex-utilities: "npm:^2.3.0"
+  checksum: 10c0/6e0ee2a1c17d5a66dc1120dfc51899dedf6677857e83a0df4d5a822ebb8645a54a079772efc1ade382b67aad35e4e22b5bd2d33c05ed28b0e000f8f57eb0aec1
+  languageName: node
+  linkType: hard
+
 "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"
@@ -20758,13 +18768,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regexpp@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "regexpp@npm:3.2.0"
-  checksum: 10c0/d1da82385c8754a1681416b90b9cca0e21b4a2babef159099b88f640637d789c69011d0bc94705dacab85b81133e929d027d85210e8b8b03f8035164dbc14710
-  languageName: node
-  linkType: hard
-
 "regexpu-core@npm:^6.3.1":
   version: 6.4.0
   resolution: "regexpu-core@npm:6.4.0"
@@ -20779,31 +18782,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"registry-auth-token@npm:3.3.2":
-  version: 3.3.2
-  resolution: "registry-auth-token@npm:3.3.2"
-  dependencies:
-    rc: "npm:^1.1.6"
-    safe-buffer: "npm:^5.0.1"
-  checksum: 10c0/934b5d504ec6d94d78672dc5e74646c52793e74a6e400c1cffc78838bbb12c5f45e3ef3edba506f3295db794d4dda76f924f2948d48fe1f8e83b6500b0ba53c5
-  languageName: node
-  linkType: hard
-
 "registry-auth-token@npm:^4.0.0":
-  version: 4.2.2
-  resolution: "registry-auth-token@npm:4.2.2"
-  dependencies:
-    rc: "npm:1.2.8"
-  checksum: 10c0/1d0000b8b65e7141a4cc4594926e2551607f48596e01326e7aa2ba2bc688aea86b2aa0471c5cb5de7acc9a59808a3a1ddde9084f974da79bfc67ab67aa48e003
-  languageName: node
-  linkType: hard
-
-"registry-url@npm:3.1.0":
-  version: 3.1.0
-  resolution: "registry-url@npm:3.1.0"
+  version: 4.2.2
+  resolution: "registry-auth-token@npm:4.2.2"
   dependencies:
-    rc: "npm:^1.0.1"
-  checksum: 10c0/345cf9638f99d95863d92800b3f595ac312c19d6865595e499fbeb33fcda04021a0dbdafbb5e61a838a89a558bc239d78752a1f90eb68cf53fdf0d91da816a7c
+    rc: "npm:1.2.8"
+  checksum: 10c0/1d0000b8b65e7141a4cc4594926e2551607f48596e01326e7aa2ba2bc688aea86b2aa0471c5cb5de7acc9a59808a3a1ddde9084f974da79bfc67ab67aa48e003
   languageName: node
   linkType: hard
 
@@ -20834,6 +18818,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rehype-external-links@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "rehype-external-links@npm:3.0.0"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+    "@ungap/structured-clone": "npm:^1.0.0"
+    hast-util-is-element: "npm:^3.0.0"
+    is-absolute-url: "npm:^4.0.0"
+    space-separated-tokens: "npm:^2.0.0"
+    unist-util-visit: "npm:^5.0.0"
+  checksum: 10c0/486b5db73d8fe72611d62b4eb0b56ec71025ea32bba764ad54473f714ca627be75e057ac29243763f85a77c3810f31727ce3e03c975b3803c1c98643d038e9ae
+  languageName: node
+  linkType: hard
+
 "rehype-parse@npm:^7.0.0":
   version: 7.0.1
   resolution: "rehype-parse@npm:7.0.1"
@@ -20844,6 +18842,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rehype-raw@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "rehype-raw@npm:7.0.0"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+    hast-util-raw: "npm:^9.0.0"
+    vfile: "npm:^6.0.0"
+  checksum: 10c0/1435b4b6640a5bc3abe3b2133885c4dbff5ef2190ef9cfe09d6a63f74dd7d7ffd0cede70603278560ccf1acbfb9da9faae4b68065a28bc5aa88ad18e40f32d52
+  languageName: node
+  linkType: hard
+
+"rehype-recma@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "rehype-recma@npm:1.0.0"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    "@types/hast": "npm:^3.0.0"
+    hast-util-to-estree: "npm:^3.0.0"
+  checksum: 10c0/be60d7433a7f788a14f41da3e93ba9d9272c908ddef47757026cc4bbcc912f6301d56810349adf876d294a8d048626a0dbf6988aaa574afbfc29eac1ddc1eb74
+  languageName: node
+  linkType: hard
+
 "rehype-stringify@npm:^8.0.0":
   version: 8.0.0
   resolution: "rehype-stringify@npm:8.0.0"
@@ -20864,13 +18884,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"relateurl@npm:^0.2.7":
-  version: 0.2.7
-  resolution: "relateurl@npm:0.2.7"
-  checksum: 10c0/c248b4e3b32474f116a804b537fa6343d731b80056fb506dffd91e737eef4cac6be47a65aae39b522b0db9d0b1011d1a12e288d82a109ecd94a5299d82f6573a
-  languageName: node
-  linkType: hard
-
 "release-it@npm:^13.4.0, release-it@npm:^13.5.6":
   version: 13.7.2
   resolution: "release-it@npm:13.7.2"
@@ -20912,61 +18925,71 @@ __metadata:
   languageName: node
   linkType: hard
 
-"remark-emoji@npm:^2.2.0":
-  version: 2.2.0
-  resolution: "remark-emoji@npm:2.2.0"
+"remark-cjk-friendly-gfm-strikethrough@npm:^2.0.1":
+  version: 2.1.0
+  resolution: "remark-cjk-friendly-gfm-strikethrough@npm:2.1.0"
   dependencies:
-    emoticon: "npm:^3.2.0"
-    node-emoji: "npm:^1.10.0"
-    unist-util-visit: "npm:^2.0.3"
-  checksum: 10c0/f7b98c7879ebf289e277e8a2a5f6c75da6a0447efde56a347ad6bb67084da6de8605b3ae9eb9244f02ef0c47755e2c5288222ef12a93c2ba1dec3ba02b0342f5
+    mdast-util-to-markdown-cjk-friendly-gfm-strikethrough: "npm:1.0.0"
+    micromark-extension-cjk-friendly-gfm-strikethrough: "npm:2.0.1"
+  peerDependencies:
+    "@types/mdast": ^4.0.0
+    unified: ^11.0.0
+  peerDependenciesMeta:
+    "@types/mdast":
+      optional: true
+  checksum: 10c0/57d0df3428d53bfbaaffb9ea02a7a47eb073841f13a952f9ce228685d56211749c8a9b10ee6e4b060ae1ed671a4eb4eb715f7877fce64cc7dc3b1f27c324ccd6
   languageName: node
   linkType: hard
 
-"remark-footnotes@npm:2.0.0":
-  version: 2.0.0
-  resolution: "remark-footnotes@npm:2.0.0"
-  checksum: 10c0/45b55b3440b74bfeed11fba5ed6b31f2fd35ab4e9ba169061b76a19f5ff4d16d851c9f3c423c7fa54eb0fa5e6043b89098cb9478e9b5b417cf4bdef5571b0236
+"remark-cjk-friendly@npm:^2.0.1":
+  version: 2.1.0
+  resolution: "remark-cjk-friendly@npm:2.1.0"
+  dependencies:
+    mdast-util-to-markdown-cjk-friendly: "npm:1.0.0"
+    micromark-extension-cjk-friendly: "npm:2.0.1"
+  peerDependencies:
+    "@types/mdast": ^4.0.0
+    unified: ^11.0.0
+  peerDependenciesMeta:
+    "@types/mdast":
+      optional: true
+  checksum: 10c0/2dcab78899e56674c459cc2bbd1e208f7d4b45abd3ffd29aa71238c8fa536d453121abb7132b4ee22f1157a75e799be317dcff2d0d224a1c5f0d24b3f52d816d
   languageName: node
   linkType: hard
 
-"remark-mdx@npm:1.6.22":
-  version: 1.6.22
-  resolution: "remark-mdx@npm:1.6.22"
+"remark-gfm@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "remark-gfm@npm:4.0.1"
   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
+    "@types/mdast": "npm:^4.0.0"
+    mdast-util-gfm: "npm:^3.0.0"
+    micromark-extension-gfm: "npm:^3.0.0"
+    remark-parse: "npm:^11.0.0"
+    remark-stringify: "npm:^11.0.0"
+    unified: "npm:^11.0.0"
+  checksum: 10c0/427ecc6af3e76222662061a5f670a3e4e33ec5fffe2cabf04034da6a3f9a1bda1fc023e838a636385ba314e66e2bebbf017ca61ebea357eb0f5200fe0625a4b7
   languageName: node
   linkType: hard
 
-"remark-parse@npm:8.0.3":
-  version: 8.0.3
-  resolution: "remark-parse@npm:8.0.3"
+"remark-mdx@npm:^3.0.0, remark-mdx@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "remark-mdx@npm:3.1.1"
   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
+    mdast-util-mdx: "npm:^3.0.0"
+    micromark-extension-mdxjs: "npm:^3.0.0"
+  checksum: 10c0/3e5585d4c2448d8ac7548b1d148f04b89251ff47fbfc80be1428cecec2fc2530abe30a5da53bb031283f8a78933259df6120c1cd4cc7cc1d43978d508798ba88
+  languageName: node
+  linkType: hard
+
+"remark-parse@npm:^11.0.0":
+  version: 11.0.0
+  resolution: "remark-parse@npm:11.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    mdast-util-from-markdown: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+    unified: "npm:^11.0.0"
+  checksum: 10c0/6eed15ddb8680eca93e04fcb2d1b8db65a743dcc0023f5007265dda558b09db595a087f622062ccad2630953cd5cddc1055ce491d25a81f3317c858348a8dd38
   languageName: node
   linkType: hard
 
@@ -20993,12 +19016,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"remark-squeeze-paragraphs@npm:4.0.0":
-  version: 4.0.0
-  resolution: "remark-squeeze-paragraphs@npm:4.0.0"
+"remark-rehype@npm:^11.0.0":
+  version: 11.1.2
+  resolution: "remark-rehype@npm:11.1.2"
   dependencies:
-    mdast-squeeze-paragraphs: "npm:^4.0.0"
-  checksum: 10c0/61b39acfde3bebb1e9364a6991957f83ab0d878c0fd1de0e86e9bf9e060574cefb7a76057d64e7422e2a2bcf6e3c54635a4ae43f00b3dda38812ae4b6f4342f4
+    "@types/hast": "npm:^3.0.0"
+    "@types/mdast": "npm:^4.0.0"
+    mdast-util-to-hast: "npm:^13.0.0"
+    unified: "npm:^11.0.0"
+    vfile: "npm:^6.0.0"
+  checksum: 10c0/f9eccacfb596d9605581dc05bfad28635d6ded5dd0a18e88af5fd4df0d3fcf9612e1501d4513bc2164d833cfe9636dab20400080b09e53f155c6e1442a1231fb
   languageName: node
   linkType: hard
 
@@ -21011,6 +19038,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-stringify@npm:^11.0.0":
+  version: 11.0.0
+  resolution: "remark-stringify@npm:11.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    mdast-util-to-markdown: "npm:^2.0.0"
+    unified: "npm:^11.0.0"
+  checksum: 10c0/0cdb37ce1217578f6f847c7ec9f50cbab35df5b9e3903d543e74b405404e67c07defcb23cd260a567b41b769400f6de03c2c3d9cd6ae7a6707d5c8d89ead489f
+  languageName: node
+  linkType: hard
+
 "remove-trailing-separator@npm:^1.0.1":
   version: 1.1.0
   resolution: "remove-trailing-separator@npm:1.1.0"
@@ -21018,19 +19056,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"renderkid@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "renderkid@npm:3.0.0"
-  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:^6.0.1"
-  checksum: 10c0/24a9fae4cc50e731d059742d1b3eec163dc9e3872b12010d120c3fcbd622765d9cda41f79a1bbb4bf63c1d3442f18a08f6e1642cb5d7ebf092a0ce3f7a3bd143
-  languageName: node
-  linkType: hard
-
 "repeat-element@npm:^1.1.2":
   version: 1.1.4
   resolution: "repeat-element@npm:1.1.4"
@@ -21038,22 +19063,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"repeat-string@npm:^1.5.2, repeat-string@npm:^1.5.4, repeat-string@npm:^1.6.1":
+"repeat-string@npm:^1.5.4, repeat-string@npm:^1.6.1":
   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
-
 "replace-ext@npm:1.0.0":
   version: 1.0.0
   resolution: "replace-ext@npm:1.0.0"
@@ -21075,13 +19091,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"require-like@npm:>= 0.1.1":
-  version: 0.1.2
-  resolution: "require-like@npm:0.1.2"
-  checksum: 10c0/9035ff6c4000a56ede6fc51dd5c56541fafa5a7dddc9b1c3a5f9148d95ee21c603c9bf5c6e37b19fc7de13d9294260842d8590b2ffd6c7c773e78603d1af8050
-  languageName: node
-  linkType: hard
-
 "require-main-filename@npm:^2.0.0":
   version: 2.0.0
   resolution: "require-main-filename@npm:2.0.0"
@@ -21096,31 +19105,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"requireg@npm:^0.2.2":
-  version: 0.2.2
-  resolution: "requireg@npm:0.2.2"
-  dependencies:
-    nested-error-stacks: "npm:~2.0.1"
-    rc: "npm:~1.2.7"
-    resolve: "npm:~1.7.1"
-  checksum: 10c0/806cff08d8fa63f2ec9c74fa9602c86b56627a824d0a188bf777c8d82ba012a1b3c01ab6e88ffcf610713b6bc5ec8a9f9e55dc941b7606ce735e72c4d9daa059
-  languageName: node
-  linkType: hard
-
-"requires-port@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "requires-port@npm:1.0.0"
-  checksum: 10c0/b2bfdd09db16c082c4326e573a82c0771daaf7b53b9ce8ad60ea46aa6e30aaf475fe9b164800b89f93b748d2c234d8abff945d2551ba47bf5698e04cd7713267
-  languageName: node
-  linkType: hard
-
-"reselect@npm:^4.1.7":
-  version: 4.1.8
-  resolution: "reselect@npm:4.1.8"
-  checksum: 10c0/06a305a504affcbb67dd0561ddc8306b35796199c7e15b38934c80606938a021eadcf68cfd58e7bb5e17786601c37602a3362a4665c7bf0a96c1041ceee9d0b7
-  languageName: node
-  linkType: hard
-
 "resolve-alpn@npm:^1.0.0":
   version: 1.2.1
   resolution: "resolve-alpn@npm:1.2.1"
@@ -21167,13 +19151,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve-pathname@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "resolve-pathname@npm:3.0.0"
-  checksum: 10c0/c6ec49b670dc35b9a303c47fa83ba9348a71e92d64a4c4bb85e1b659a29b407aa1ac1cb14a9b5b502982132ca77482bd80534bca147439d66880d35a137fe723
-  languageName: node
-  linkType: hard
-
 "resolve-pkg@npm:2.0.0":
   version: 2.0.0
   resolution: "resolve-pkg@npm:2.0.0"
@@ -21197,14 +19174,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve.exports@npm:^2.0.0, resolve.exports@npm:^2.0.3":
+"resolve.exports@npm:^2.0.0":
   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.20.0, resolve@npm:^1.22.10, resolve@npm:^1.22.2, resolve@npm:^1.22.4, resolve@npm:^1.22.8, resolve@npm:^1.3.2":
+"resolve@npm:^1.1.6, resolve@npm:^1.10.0, resolve@npm:^1.20.0, resolve@npm:^1.22.10, resolve@npm:^1.22.4":
   version: 1.22.11
   resolution: "resolve@npm:1.22.11"
   dependencies:
@@ -21217,6 +19194,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resolve@npm:^1.22.11":
+  version: 1.22.12
+  resolution: "resolve@npm:1.22.12"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    is-core-module: "npm:^2.16.1"
+    path-parse: "npm:^1.0.7"
+    supports-preserve-symlinks-flag: "npm:^1.0.0"
+  bin:
+    resolve: bin/resolve
+  checksum: 10c0/b16dc9b537c02e8c3388f7d3dcff9741d3071625f9a97ac1c885f2b0ca51e78df22328fb6d6ef214dd9101fb7cfc19aa2836fe3410402a94f3f7b8639c7149bf
+  languageName: node
+  linkType: hard
+
 "resolve@npm:^2.0.0-next.5":
   version: 2.0.0-next.5
   resolution: "resolve@npm:2.0.0-next.5"
@@ -21230,25 +19221,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:~1.7.1":
-  version: 1.7.1
-  resolution: "resolve@npm:1.7.1"
+"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.20.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.10#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#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"
   dependencies:
-    path-parse: "npm:^1.0.5"
-  checksum: 10c0/6e9e29185ac57801aff013849e9717c769ef0a27eac30b6492405ba3d61db73d8967023b96578f4b2deba4ef5fb11fc4f0a4db47c0f536890ced5c014e94fbde
+    is-core-module: "npm:^2.16.1"
+    path-parse: "npm:^1.0.7"
+    supports-preserve-symlinks-flag: "npm:^1.0.0"
+  bin:
+    resolve: bin/resolve
+  checksum: 10c0/ee5b182f2e37cb1165465e58c6abc797fec0a80b5ba3231607beb4677db0c9291ac010c47cf092b6daa2b7f518d69a0e21888e7e2b633f68d501a874212a8c63
   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.20.0#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.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.22.11#optional!builtin<compat/resolve>":
+  version: 1.22.12
+  resolution: "resolve@patch:resolve@npm%3A1.22.12#optional!builtin<compat/resolve>::version=1.22.12&hash=c3c19d"
   dependencies:
+    es-errors: "npm:^1.3.0"
     is-core-module: "npm:^2.16.1"
     path-parse: "npm:^1.0.7"
     supports-preserve-symlinks-flag: "npm:^1.0.0"
   bin:
     resolve: bin/resolve
-  checksum: 10c0/ee5b182f2e37cb1165465e58c6abc797fec0a80b5ba3231607beb4677db0c9291ac010c47cf092b6daa2b7f518d69a0e21888e7e2b633f68d501a874212a8c63
+  checksum: 10c0/fc6519984ae1f894d877c0060ba8b1f5ba3bc0e85a02f74e141929c118c23d74d9735619a9cc2965397387e514884245c65d72a40731dcb6cfc84c7bcdc8321e
   languageName: node
   linkType: hard
 
@@ -21265,15 +19261,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A~1.7.1#optional!builtin<compat/resolve>":
-  version: 1.7.1
-  resolution: "resolve@patch:resolve@npm%3A1.7.1#optional!builtin<compat/resolve>::version=1.7.1&hash=3bafbf"
-  dependencies:
-    path-parse: "npm:^1.0.5"
-  checksum: 10c0/1301dba7c12cd9dab2ab4eee8518089f25bb7480db34b746a923ded472c4c0600ebb1ba9b8028ca843f7c6017ac76524355800c52b82633e53bd601ca288b4de
-  languageName: node
-  linkType: hard
-
 "responselike@npm:^1.0.2":
   version: 1.0.2
   resolution: "responselike@npm:1.0.2"
@@ -21326,13 +19313,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"retry@npm:^0.13.1":
-  version: 0.13.1
-  resolution: "retry@npm:0.13.1"
-  checksum: 10c0/9ae822ee19db2163497e074ea919780b1efa00431d197c7afdb950e42bf109196774b92a49fc9821f0b8b328a98eea6017410bfc5e8a0fc19c85c6d11adb3772
-  languageName: node
-  linkType: hard
-
 "reusify@npm:^1.0.4":
   version: 1.1.0
   resolution: "reusify@npm:1.1.0"
@@ -21340,7 +19320,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rimraf@npm:^2.5.2, rimraf@npm:^2.6.3":
+"rimraf@npm:^2.5.2":
   version: 2.7.1
   resolution: "rimraf@npm:2.7.1"
   dependencies:
@@ -21371,6 +19351,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rsbuild-plugin-open-graph@npm:^1.1.2":
+  version: 1.1.3
+  resolution: "rsbuild-plugin-open-graph@npm:1.1.3"
+  peerDependencies:
+    "@rsbuild/core": ^1.0.0 || ^2.0.0-0
+  peerDependenciesMeta:
+    "@rsbuild/core":
+      optional: true
+  checksum: 10c0/612f2401133ae31797f8fca623cf6317abbcf2ff8862fa13667596f4045ba46c3c6d2b9113ab9fe512b091ac5b6de50b309f991ac11b974ea283e3deb2e3d6c0
+  languageName: node
+  linkType: hard
+
 "rsvp@npm:^4.8.4":
   version: 4.8.5
   resolution: "rsvp@npm:4.8.5"
@@ -21378,27 +19370,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rtl-detect@npm:^1.0.4":
-  version: 1.1.2
-  resolution: "rtl-detect@npm:1.1.2"
-  checksum: 10c0/1b92888aafca1593314f837e83fdf02eb208faae3e713ab87c176804728efd3b1980d53b64f65f1fa593348087e852c5cd729b7b9372950f6e9b7be489afc0ca
-  languageName: node
-  linkType: hard
-
-"rtlcss@npm:^3.5.0":
-  version: 3.5.0
-  resolution: "rtlcss@npm:3.5.0"
-  dependencies:
-    find-up: "npm:^5.0.0"
-    picocolors: "npm:^1.0.0"
-    postcss: "npm:^8.3.11"
-    strip-json-comments: "npm:^3.1.1"
-  bin:
-    rtlcss: bin/rtlcss.js
-  checksum: 10c0/c50f61bf7315be5677a75464e7457661687e321f714cae51be8b6f7b7ab89c4203b25fae15951eceb79f6d551eae65e42eabde55087fd5aa07ad1e05698793d0
-  languageName: node
-  linkType: hard
-
 "run-async@npm:^2.4.0":
   version: 2.4.1
   resolution: "run-async@npm:2.4.1"
@@ -21406,15 +19377,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"run-node@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "run-node@npm:1.0.0"
-  bin:
-    run-node: run-node
-  checksum: 10c0/ab32a065194903e5cd2e4c01e4a5568d22720b4eaa5c853d5386e8d116c59c313e84591f0375913dbe6cc973c2181aed4f54d6b32dba9f7d0d5d01a762de8b6b
-  languageName: node
-  linkType: hard
-
 "run-parallel@npm:^1.1.9":
   version: 1.2.0
   resolution: "run-parallel@npm:1.2.0"
@@ -21433,15 +19395,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rxjs@npm:^7.5.4":
-  version: 7.8.2
-  resolution: "rxjs@npm:7.8.2"
-  dependencies:
-    tslib: "npm:^2.1.0"
-  checksum: 10c0/1fcd33d2066ada98ba8f21fcbbcaee9f0b271de1d38dc7f4e256bfbc6ffcdde68c8bfb69093de7eeb46f24b1fb820620bf0223706cff26b4ab99a7ff7b2e2c45
-  languageName: node
-  linkType: hard
-
 "safe-array-concat@npm:^1.1.3":
   version: 1.1.3
   resolution: "safe-array-concat@npm:1.1.3"
@@ -21455,7 +19408,7 @@ __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.2.0":
+"safe-buffer@npm:5.2.1, 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
@@ -21537,17 +19490,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sax@npm:>=0.6.0, sax@npm:^1.2.4":
+"sax@npm:>=0.6.0":
   version: 1.4.3
   resolution: "sax@npm:1.4.3"
   checksum: 10c0/45bba07561d93f184a8686e1a543418ced8c844b994fbe45cc49d5cd2fc8ac7ec949dae38565e35e388ad0cca2b75997a29b6857c927bf6553da3f80ed0e4e62
   languageName: node
   linkType: hard
 
-"scheduler@npm:0.26.0, scheduler@npm:^0.26.0":
-  version: 0.26.0
-  resolution: "scheduler@npm:0.26.0"
-  checksum: 10c0/5b8d5bfddaae3513410eda54f2268e98a376a429931921a81b5c3a2873aab7ca4d775a8caac5498f8cbc7d0daeab947cf923dbd8e215d61671f9f4e392d34356
+"scheduler@npm:0.27.0, scheduler@npm:^0.27.0":
+  version: 0.27.0
+  resolution: "scheduler@npm:0.27.0"
+  checksum: 10c0/4f03048cb05a3c8fddc45813052251eca00688f413a3cee236d984a161da28db28ba71bd11e7a3dd02f7af84ab28d39fb311431d3b3772fed557945beb00c452
   languageName: node
   linkType: hard
 
@@ -21561,26 +19514,6 @@ __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
-  languageName: node
-  linkType: hard
-
-"schema-utils@npm:2.7.0":
-  version: 2.7.0
-  resolution: "schema-utils@npm:2.7.0"
-  dependencies:
-    "@types/json-schema": "npm:^7.0.4"
-    ajv: "npm:^6.12.2"
-    ajv-keywords: "npm:^3.4.1"
-  checksum: 10c0/723c3c856a0313a89aa81c5fb2c93d4b11225f5cdd442665fddd55d3c285ae72e079f5286a3a9a1a973affe888f6c33554a2cf47b79b24cd8de2f1f756a6fb1b
-  languageName: node
-  linkType: hard
-
 "schema-utils@npm:^2.5.0, schema-utils@npm:^2.6.5":
   version: 2.7.1
   resolution: "schema-utils@npm:2.7.1"
@@ -21603,7 +19536,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"schema-utils@npm:^4.0.0, schema-utils@npm:^4.3.0, schema-utils@npm:^4.3.3":
+"schema-utils@npm:^4.3.0, schema-utils@npm:^4.3.3":
   version: 4.3.3
   resolution: "schema-utils@npm:4.3.3"
   dependencies:
@@ -21615,37 +19548,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"section-matter@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "section-matter@npm:1.0.0"
-  dependencies:
-    extend-shallow: "npm:^2.0.1"
-    kind-of: "npm:^6.0.0"
-  checksum: 10c0/8007f91780adc5aaa781a848eaae50b0f680bbf4043b90cf8a96778195b8fab690c87fe7a989e02394ce69890e330811ec8dab22397d384673ce59f7d750641d
-  languageName: node
-  linkType: hard
-
-"select-hose@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "select-hose@npm:2.0.0"
-  checksum: 10c0/01cc52edd29feddaf379efb4328aededa633f0ac43c64b11a8abd075ff34f05b0d280882c4fbcbdf1a0658202c9cd2ea8d5985174dcf9a2dac7e3a4996fa9b67
-  languageName: node
-  linkType: hard
-
-"selfsigned@npm:^2.1.1":
-  version: 2.4.1
-  resolution: "selfsigned@npm:2.4.1"
+"scroll-into-view-if-needed@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "scroll-into-view-if-needed@npm:3.1.0"
   dependencies:
-    "@types/node-forge": "npm:^1.3.0"
-    node-forge: "npm:^1"
-  checksum: 10c0/521829ec36ea042f7e9963bf1da2ed040a815cf774422544b112ec53b7edc0bc50a0f8cc2ae7aa6cc19afa967c641fd96a15de0fc650c68651e41277d2e1df09
-  languageName: node
-  linkType: hard
-
-"semver-compare@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "semver-compare@npm:1.0.0"
-  checksum: 10c0/9ef4d8b81847556f0865f46ddc4d276bace118c7cb46811867af82e837b7fc473911981d5a0abc561fa2db487065572217e5b06e18701c4281bcdd2a1affaff1
+    compute-scroll-into-view: "npm:^3.0.2"
+  checksum: 10c0/1f46b090e1e04fcfdef1e384f6d7e615f9f84d4176faf4dbba7347cc0a6e491e5d578eaf4dbe9618dd3d8d38efafde58535b3e00f2a21ce4178c14be364850ff
   languageName: node
   linkType: hard
 
@@ -21658,7 +19566,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:
@@ -21676,15 +19584,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:7.3.2":
-  version: 7.3.2
-  resolution: "semver@npm:7.3.2"
-  bin:
-    semver: bin/semver.js
-  checksum: 10c0/cea60e44127a4b586ba0ac4a3036f920b351f50c9578740621e837c9efd307f6f90081312ac97682ed74996983bc15f5652cd7be310453a0865aa70f9f5636f3
-  languageName: node
-  linkType: hard
-
 "semver@npm:7.3.5":
   version: 7.3.5
   resolution: "semver@npm:7.3.5"
@@ -21696,15 +19595,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:7.7.2":
-  version: 7.7.2
-  resolution: "semver@npm:7.7.2"
-  bin:
-    semver: bin/semver.js
-  checksum: 10c0/aca305edfbf2383c22571cb7714f48cadc7ac95371b4b52362fb8eeffdfbc0de0669368b82b2b15978f8848f01d7114da65697e56cd8c37b0dab8c58e543f9ea
-  languageName: node
-  linkType: hard
-
 "semver@npm:^6.0.0, semver@npm:^6.2.0, semver@npm:^6.3.0, semver@npm:^6.3.1":
   version: 6.3.1
   resolution: "semver@npm:6.3.1"
@@ -21714,7 +19604,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"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.1.3, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0":
   version: 7.7.3
   resolution: "semver@npm:7.7.3"
   bin:
@@ -21723,14 +19613,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:~7.5.4":
-  version: 7.5.4
-  resolution: "semver@npm:7.5.4"
-  dependencies:
-    lru-cache: "npm:^6.0.0"
+"semver@npm:^7.7.3":
+  version: 7.7.4
+  resolution: "semver@npm:7.7.4"
   bin:
     semver: bin/semver.js
-  checksum: 10c0/5160b06975a38b11c1ab55950cb5b8a23db78df88275d3d8a42ccf1f29e55112ac995b3a26a522c36e3b5f76b0445f1eef70d696b8c7862a2b4303d7b0e7609e
+  checksum: 10c0/5215ad0234e2845d4ea5bb9d836d42b03499546ddafb12075566899fc617f68794bb6f146076b6881d755de17d6c6cc73372555879ec7dce2c2feee947866ad2
   languageName: node
   linkType: hard
 
@@ -21772,7 +19660,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"serialize-javascript@npm:^6.0.0, serialize-javascript@npm:^6.0.2":
+"serialize-javascript@npm:^6.0.2":
   version: 6.0.2
   resolution: "serialize-javascript@npm:6.0.2"
   dependencies:
@@ -21781,36 +19669,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"serve-handler@npm:^6.1.3":
-  version: 6.1.6
-  resolution: "serve-handler@npm:6.1.6"
-  dependencies:
-    bytes: "npm:3.0.0"
-    content-disposition: "npm:0.5.2"
-    mime-types: "npm:2.1.18"
-    minimatch: "npm:3.1.2"
-    path-is-inside: "npm:1.0.2"
-    path-to-regexp: "npm:3.3.0"
-    range-parser: "npm:1.2.0"
-  checksum: 10c0/1e1cb6bbc51ee32bc1505f2e0605bdc2e96605c522277c977b67f83be9d66bd1eec8604388714a4d728e036d86b629bc9aec02120ea030d3d2c3899d44696503
-  languageName: node
-  linkType: hard
-
-"serve-index@npm:^1.9.1":
-  version: 1.9.1
-  resolution: "serve-index@npm:1.9.1"
-  dependencies:
-    accepts: "npm:~1.3.4"
-    batch: "npm:0.6.1"
-    debug: "npm:2.6.9"
-    escape-html: "npm:~1.0.3"
-    http-errors: "npm:~1.6.2"
-    mime-types: "npm:~2.1.17"
-    parseurl: "npm:~1.3.2"
-  checksum: 10c0/a666471a24196f74371edf2c3c7bcdd82adbac52f600804508754b5296c3567588bf694258b19e0cb23a567acfa20d9721bfdaed3286007b81f9741ada8a3a9c
-  languageName: node
-  linkType: hard
-
 "serve-static@npm:^1.16.2, serve-static@npm:~1.16.2":
   version: 1.16.3
   resolution: "serve-static@npm:1.16.3"
@@ -21830,6 +19688,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"set-cookie-parser@npm:^2.6.0":
+  version: 2.7.2
+  resolution: "set-cookie-parser@npm:2.7.2"
+  checksum: 10c0/4381a9eb7ee951dfe393fe7aacf76b9a3b4e93a684d2162ab35594fa4053cc82a4d7d7582bf397718012c9adcf839b8cd8f57c6c42901ea9effe33c752da4a45
+  languageName: node
+  linkType: hard
+
 "set-function-length@npm:^1.2.2":
   version: 1.2.2
   resolution: "set-function-length@npm:1.2.2"
@@ -21886,13 +19751,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"setprototypeof@npm:1.1.0":
-  version: 1.1.0
-  resolution: "setprototypeof@npm:1.1.0"
-  checksum: 10c0/a77b20876689c6a89c3b42f0c3596a9cae02f90fc902570cbd97198e9e8240382086c9303ad043e88cee10f61eae19f1004e51d885395a1e9bf49f9ebed12872
-  languageName: node
-  linkType: hard
-
 "setprototypeof@npm:1.2.0, setprototypeof@npm:~1.2.0":
   version: 1.2.0
   resolution: "setprototypeof@npm:1.2.0"
@@ -21900,7 +19758,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sf-symbols-typescript@npm:^2.1.0":
+"sf-symbols-typescript@npm:^2.2.0":
   version: 2.2.0
   resolution: "sf-symbols-typescript@npm:2.2.0"
   checksum: 10c0/3f3bbf33aaad19e619d6f169899b39e9fe9c5fd21f0d6d511100e36887606ad349109ddc6ff82933f2b8cbf437dd7105c2ae6b0059b291dc47f143b30c2074cc
@@ -21916,13 +19774,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shallowequal@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "shallowequal@npm:1.1.0"
-  checksum: 10c0/b926efb51cd0f47aa9bc061add788a4a650550bbe50647962113a4579b60af2abe7b62f9b02314acc6f97151d4cf87033a2b15fc20852fae306d1a095215396c
-  languageName: node
-  linkType: hard
-
 "shebang-command@npm:^1.2.0":
   version: 1.2.0
   resolution: "shebang-command@npm:1.2.0"
@@ -21955,7 +19806,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shell-quote@npm:^1.6.1, shell-quote@npm:^1.7.3, shell-quote@npm:^1.8.3":
+"shell-quote@npm:^1.6.1":
   version: 1.8.3
   resolution: "shell-quote@npm:1.8.3"
   checksum: 10c0/bee87c34e1e986cfb4c30846b8e6327d18874f10b535699866f368ade11ea4ee45433d97bf5eada22c4320c27df79c3a6a7eb1bf3ecfc47f2c997d9e5e2672fd
@@ -21975,16 +19826,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shelljs@npm:^0.8.5":
-  version: 0.8.5
-  resolution: "shelljs@npm:0.8.5"
+"shiki@npm:4.2.0, shiki@npm:^4.0.2":
+  version: 4.2.0
+  resolution: "shiki@npm:4.2.0"
   dependencies:
-    glob: "npm:^7.0.0"
-    interpret: "npm:^1.0.0"
-    rechoir: "npm:^0.6.2"
-  bin:
-    shjs: bin/shjs
-  checksum: 10c0/feb25289a12e4bcd04c40ddfab51aff98a3729f5c2602d5b1a1b95f6819ec7804ac8147ebd8d9a85dfab69d501bcf92d7acef03247320f51c1552cec8d8e2382
+    "@shikijs/core": "npm:4.2.0"
+    "@shikijs/engine-javascript": "npm:4.2.0"
+    "@shikijs/engine-oniguruma": "npm:4.2.0"
+    "@shikijs/langs": "npm:4.2.0"
+    "@shikijs/themes": "npm:4.2.0"
+    "@shikijs/types": "npm:4.2.0"
+    "@shikijs/vscode-textmate": "npm:^10.0.2"
+    "@types/hast": "npm:^3.0.4"
+  checksum: 10c0/a729d91e10e22787c56a553663c487454bbdfc3f5604e2833bea1f47bcbc20b824b2e7629f7b03889706314a3fe5963a8c4808a002282dc1c19f726231096b1c
   languageName: node
   linkType: hard
 
@@ -22063,17 +19917,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sirv@npm:^2.0.3":
-  version: 2.0.4
-  resolution: "sirv@npm:2.0.4"
-  dependencies:
-    "@polka/url": "npm:^1.0.0-next.24"
-    mrmime: "npm:^2.0.0"
-    totalist: "npm:^3.0.0"
-  checksum: 10c0/68f8ee857f6a9415e9c07a1f31c7c561df8d5f1b1ba79bee3de583fa37da8718def5309f6b1c6e2c3ef77de45d74f5e49efc7959214443aa92d42e9c99180a4e
-  languageName: node
-  linkType: hard
-
 "sisteransi@npm:^1.0.5":
   version: 1.0.5
   resolution: "sisteransi@npm:1.0.5"
@@ -22081,34 +19924,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sitemap@npm:^7.1.1":
-  version: 7.1.2
-  resolution: "sitemap@npm:7.1.2"
-  dependencies:
-    "@types/node": "npm:^17.0.5"
-    "@types/sax": "npm:^1.2.1"
-    arg: "npm:^5.0.0"
-    sax: "npm:^1.2.4"
-  bin:
-    sitemap: dist/cli.js
-  checksum: 10c0/01dd1268c0d4b89f8ef082bcb9ef18d0182d00d1622e9c54743474918169491e5360538f9a01a769262e0fe23d6e3822a90680eff0f076cf87b68d459014a34c
-  languageName: node
-  linkType: hard
-
-"slash@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "slash@npm:1.0.0"
-  checksum: 10c0/3944659885d905480f98810542fd314f3e1006eaad25ec78227a7835a469d9ed66fc3dd90abc7377dd2e71f4b5473e8f766bd08198fdd25152a80792e9ed464c
-  languageName: node
-  linkType: hard
-
-"slash@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "slash@npm:2.0.0"
-  checksum: 10c0/f83dbd3cb62c41bb8fcbbc6bf5473f3234b97fa1d008f571710a9d3757a28c7169e1811cad1554ccb1cc531460b3d221c9a7b37f549398d9a30707f0a5af9193
-  languageName: node
-  linkType: hard
-
 "slash@npm:^3.0.0":
   version: 3.0.0
   resolution: "slash@npm:3.0.0"
@@ -22116,10 +19931,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"slash@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "slash@npm:4.0.0"
-  checksum: 10c0/b522ca75d80d107fd30d29df0549a7b2537c83c4c4ecd12cd7d4ea6c8aaca2ab17ada002e7a1d78a9d736a0261509f26ea5b489082ee443a3a810586ef8eff18
+"slash@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "slash@npm:5.1.0"
+  checksum: 10c0/eb48b815caf0bdc390d0519d41b9e0556a14380f6799c72ba35caf03544d501d18befdeeef074bc9c052acf69654bc9e0d79d7f1de0866284137a40805299eb3
   languageName: node
   linkType: hard
 
@@ -22182,17 +19997,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sockjs@npm:^0.3.24":
-  version: 0.3.24
-  resolution: "sockjs@npm:0.3.24"
-  dependencies:
-    faye-websocket: "npm:^0.11.3"
-    uuid: "npm:^8.3.2"
-    websocket-driver: "npm:^0.7.4"
-  checksum: 10c0/aa102c7d921bf430215754511c81ea7248f2dcdf268fbdb18e4d8183493a86b8793b164c636c52f474a886f747447c962741df2373888823271efdb9d2594f33
-  languageName: node
-  linkType: hard
-
 "socks-proxy-agent@npm:^8.0.3":
   version: 8.0.5
   resolution: "socks-proxy-agent@npm:8.0.5"
@@ -22214,13 +20018,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sort-css-media-queries@npm:2.1.0":
-  version: 2.1.0
-  resolution: "sort-css-media-queries@npm:2.1.0"
-  checksum: 10c0/6b39dd2503d8279688fee837c63bdf3b49eea14d10d5ae09d9e99e4a0b3da1b702c3931e8f793b702b9ea8929a9389ba8d6345b58b5d1f0ec3e84920685a724a
-  languageName: node
-  linkType: hard
-
 "sort-keys@npm:^1.0.0":
   version: 1.1.2
   resolution: "sort-keys@npm:1.1.2"
@@ -22230,30 +20027,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-list-map@npm:^2.0.0, source-list-map@npm:^2.0.1":
+"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-js@npm:^1.0.1, source-map-js@npm:^1.2.1":
+"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-loader@npm:^3.0.1":
-  version: 3.0.2
-  resolution: "source-map-loader@npm:3.0.2"
-  dependencies:
-    abab: "npm:^2.0.5"
-    iconv-lite: "npm:^0.6.3"
-    source-map-js: "npm:^1.0.1"
-  peerDependencies:
-    webpack: ^5.0.0
-  checksum: 10c0/ce38822d10ac0fc09f3a3f320f184d5a5c7e66a6c447e5f2c36476d901e3224a00cc7843be615212a50b8607beee565f08b526fbb0621357a1a6247f48fd09bc
+  checksum: 10c0/7bda1fc4c197e3c6ff17de1b8b2c20e60af81b63a52cb32ec5a5d67a20a7d42651e2cb34ebe93833c5a2a084377e17455854fee3e21e7925c64a51b6a52b0faf
   languageName: node
   linkType: hard
 
@@ -22280,16 +20064,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-support@npm:^0.4.15":
-  version: 0.4.18
-  resolution: "source-map-support@npm:0.4.18"
-  dependencies:
-    source-map: "npm:^0.5.6"
-  checksum: 10c0/cd9f0309c1632b1e01a7715a009e0b036d565f3af8930fa8cda2a06aeec05ad1d86180e743b7e1f02cc3c97abe8b6d8de7c3878c2d8e01e86e17f876f7ecf98e
-  languageName: node
-  linkType: hard
-
-"source-map-support@npm:^0.5.16, 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":
   version: 0.5.21
   resolution: "source-map-support@npm:0.5.21"
   dependencies:
@@ -22313,20 +20088,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map@npm:^0.5.0, source-map@npm:^0.5.6, source-map@npm:^0.5.7":
+"source-map@npm:^0.5.6":
   version: 0.5.7
   resolution: "source-map@npm:0.5.7"
   checksum: 10c0/904e767bb9c494929be013017380cbba013637da1b28e5943b566031e29df04fba57edf3f093e0914be094648b577372bd8ad247fa98cfba9c600794cd16b599
   languageName: node
   linkType: hard
 
-"source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.0, source-map@npm:~0.6.1":
+"source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.1":
   version: 0.6.1
   resolution: "source-map@npm:0.6.1"
   checksum: 10c0/ab55398007c5e5532957cb0beee2368529618ac0ab372d789806f5718123cc4367d57de3904b4e6a4170eb5a0b0f41373066d02ca0735a0c4d75c7d328d3e011
   languageName: node
   linkType: hard
 
+"source-map@npm:^0.7.0":
+  version: 0.7.6
+  resolution: "source-map@npm:0.7.6"
+  checksum: 10c0/59f6f05538539b274ba771d2e9e32f6c65451982510564438e048bc1352f019c6efcdc6dd07909b1968144941c14015c2c7d4369fb7c4d7d53ae769716dcc16c
+  languageName: node
+  linkType: hard
+
 "sourcemapped-stacktrace@npm:^1.1.6":
   version: 1.1.11
   resolution: "sourcemapped-stacktrace@npm:1.1.11"
@@ -22343,6 +20125,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"space-separated-tokens@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "space-separated-tokens@npm:2.0.2"
+  checksum: 10c0/6173e1d903dca41dcab6a2deed8b4caf61bd13b6d7af8374713500570aa929ff9414ae09a0519f4f8772df993300305a395d4871f35bc4ca72b6db57e1f30af8
+  languageName: node
+  linkType: hard
+
 "spdx-correct@npm:^3.0.0":
   version: 3.2.0
   resolution: "spdx-correct@npm:3.2.0"
@@ -22377,33 +20166,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"spdy-transport@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "spdy-transport@npm:3.0.0"
-  dependencies:
-    debug: "npm:^4.1.0"
-    detect-node: "npm:^2.0.4"
-    hpack.js: "npm:^2.1.6"
-    obuf: "npm:^1.1.2"
-    readable-stream: "npm:^3.0.6"
-    wbuf: "npm:^1.7.3"
-  checksum: 10c0/eaf7440fa90724fffc813c386d4a8a7427d967d6e46d7c51d8f8a533d1a6911b9823ea9218703debbae755337e85f110185d7a00ae22ec5c847077b908ce71bb
-  languageName: node
-  linkType: hard
-
-"spdy@npm:^4.0.2":
-  version: 4.0.2
-  resolution: "spdy@npm:4.0.2"
-  dependencies:
-    debug: "npm:^4.1.0"
-    handle-thing: "npm:^2.0.0"
-    http-deceiver: "npm:^1.2.7"
-    select-hose: "npm:^2.0.0"
-    spdy-transport: "npm:^3.0.0"
-  checksum: 10c0/983509c0be9d06fd00bb9dff713c5b5d35d3ffd720db869acdd5ad7aa6fc0e02c2318b58f75328957d8ff772acdf1f7d19382b6047df342044ff3e2d6805ccdf
-  languageName: node
-  linkType: hard
-
 "split-on-first@npm:^1.0.0":
   version: 1.1.0
   resolution: "split-on-first@npm:1.1.0"
@@ -22411,6 +20173,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"split-on-first@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "split-on-first@npm:3.0.0"
+  checksum: 10c0/a1262eae12b68de235e1a08e011bf5b42c42621985ddf807e6221fb1e2b3304824913ae7019f18436b96b8fab8aef5f1ad80dedd2385317fdc51b521c3882cd0
+  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"
@@ -22454,13 +20223,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stable@npm:^0.1.8":
-  version: 0.1.8
-  resolution: "stable@npm:0.1.8"
-  checksum: 10c0/df74b5883075076e78f8e365e4068ecd977af6c09da510cfc3148a303d4b87bc9aa8f7c48feb67ed4ef970b6140bd9eabba2129e28024aa88df5ea0114cba39d
-  languageName: node
-  linkType: hard
-
 "stack-utils@npm:^2.0.3":
   version: 2.0.6
   resolution: "stack-utils@npm:2.0.6"
@@ -22510,7 +20272,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"statuses@npm:>= 1.4.0 < 2, statuses@npm:~1.5.0":
+"statuses@npm:~1.5.0":
   version: 1.5.0
   resolution: "statuses@npm:1.5.0"
   checksum: 10c0/e433900956357b3efd79b1c547da4d291799ac836960c016d10a98f6a810b1b5c0dcc13b5a7aa609a58239b5190e1ea176ad9221c2157d2fd1c747393e6b2940
@@ -22524,13 +20286,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"std-env@npm:^3.0.1":
-  version: 3.10.0
-  resolution: "std-env@npm:3.10.0"
-  checksum: 10c0/1814927a45004d36dde6707eaf17552a546769bc79a6421be2c16ce77d238158dfe5de30910b78ec30d95135cc1c59ea73ee22d2ca170f8b9753f84da34c427f
-  languageName: node
-  linkType: hard
-
 "stop-iteration-iterator@npm:^1.1.0":
   version: 1.1.0
   resolution: "stop-iteration-iterator@npm:1.1.0"
@@ -22590,7 +20345,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"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":
+"string-width@npm:^4.0.0, string-width@npm:^4.1.0, string-width@npm:^4.2.0, string-width@npm:^4.2.3":
   version: 4.2.3
   resolution: "string-width@npm:4.2.3"
   dependencies:
@@ -22601,14 +20356,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string-width@npm:^5.0.1":
-  version: 5.1.2
-  resolution: "string-width@npm:5.1.2"
+"string-width@npm:^7.0.0, string-width@npm:^7.2.0":
+  version: 7.2.0
+  resolution: "string-width@npm:7.2.0"
   dependencies:
-    eastasianwidth: "npm:^0.2.0"
-    emoji-regex: "npm:^9.2.2"
-    strip-ansi: "npm:^7.0.1"
-  checksum: 10c0/ab9c4264443d35b8b923cbdd513a089a60de339216d3b0ed3be3ba57d6880e1a192b70ae17225f764d7adbf5994e9bb8df253a944736c15a0240eff553c678ca
+    emoji-regex: "npm:^10.3.0"
+    get-east-asian-width: "npm:^1.0.0"
+    strip-ansi: "npm:^7.1.0"
+  checksum: 10c0/eb0430dd43f3199c7a46dcbf7a0b34539c76fe3aa62763d0b0655acdcbdf360b3f66f3d58ca25ba0205f42ea3491fa00f09426d3b7d3040e506878fc7664c9b9
   languageName: node
   linkType: hard
 
@@ -22710,23 +20465,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stringify-object@npm:^3.3.0":
-  version: 3.3.0
-  resolution: "stringify-object@npm:3.3.0"
-  dependencies:
-    get-own-enumerable-property-symbols: "npm:^3.0.0"
-    is-obj: "npm:^1.0.1"
-    is-regexp: "npm:^1.0.0"
-  checksum: 10c0/ba8078f84128979ee24b3de9a083489cbd3c62cb8572a061b47d4d82601a8ae4b4d86fa8c54dd955593da56bb7c16a6de51c27221fdc6b7139bb4f29d815f35b
-  languageName: node
-  linkType: hard
-
-"strip-ansi@npm:^3.0.0":
-  version: 3.0.1
-  resolution: "strip-ansi@npm:3.0.1"
+"stringify-entities@npm:^4.0.0":
+  version: 4.0.4
+  resolution: "stringify-entities@npm:4.0.4"
   dependencies:
-    ansi-regex: "npm:^2.0.0"
-  checksum: 10c0/f6e7fbe8e700105dccf7102eae20e4f03477537c74b286fd22cfc970f139002ed6f0d9c10d0e21aa9ed9245e0fa3c9275930e8795c5b947da136e4ecb644a70f
+    character-entities-html4: "npm:^2.0.0"
+    character-entities-legacy: "npm:^3.0.0"
+  checksum: 10c0/537c7e656354192406bdd08157d759cd615724e9d0873602d2c9b2f6a5c0a8d0b1d73a0a08677848105c5eebac6db037b57c0b3a4ec86331117fa7319ed50448
   languageName: node
   linkType: hard
 
@@ -22748,19 +20493,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-ansi@npm:^7.0.1":
-  version: 7.1.2
-  resolution: "strip-ansi@npm:7.1.2"
+"strip-ansi@npm:^7.1.0":
+  version: 7.2.0
+  resolution: "strip-ansi@npm:7.2.0"
   dependencies:
-    ansi-regex: "npm:^6.0.1"
-  checksum: 10c0/0d6d7a023de33368fd042aab0bf48f4f4077abdfd60e5393e73c7c411e85e1b3a83507c11af2e656188511475776215df9ca589b4da2295c9455cc399ce1858b
-  languageName: node
-  linkType: hard
-
-"strip-bom-string@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "strip-bom-string@npm:1.0.0"
-  checksum: 10c0/5c5717e2643225aa6a6d659d34176ab2657037f1fe2423ac6fcdb488f135e14fef1022030e426d8b4d0989e09adbd5c3288d5d3b9c632abeefd2358dfc512bca
+    ansi-regex: "npm:^6.2.2"
+  checksum: 10c0/544d13b7582f8254811ea97db202f519e189e59d35740c46095897e254e4f1aa9fe1524a83ad6bc5ad67d4dd6c0281d2e0219ed62b880a6238a16a17d375f221
   languageName: node
   linkType: hard
 
@@ -22808,7 +20546,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-json-comments@npm:^3.1.0, strip-json-comments@npm:^3.1.1":
+"strip-json-comments@npm:^3.1.1":
   version: 3.1.1
   resolution: "strip-json-comments@npm:3.1.1"
   checksum: 10c0/9681a6257b925a7fa0f285851c0e613cc934a50661fa7bb41ca9cbbff89686bb4a0ee366e6ecedc4daafd01e83eee0720111ab294366fe7c185e935475ebcecd
@@ -22838,21 +20576,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"style-loader@npm:^3.3.1":
-  version: 3.3.4
-  resolution: "style-loader@npm:3.3.4"
-  peerDependencies:
-    webpack: ^5.0.0
-  checksum: 10c0/8f8027fc5c6e91400cbb60066e7db3315810f8eaa0d19b2a254936eb0bec399ba8a7043b1789da9d05ab7c3ba50faf9267765ae0bf3571e48aa34ecdc774be37
+"style-to-js@npm:^1.0.0":
+  version: 1.1.21
+  resolution: "style-to-js@npm:1.1.21"
+  dependencies:
+    style-to-object: "npm:1.0.14"
+  checksum: 10c0/94231aa80f58f442c3a5ae01a21d10701e5d62f96b4b3e52eab3499077ee52df203cc0df4a1a870707f5e99470859136ea8657b782a5f4ca7934e0ffe662a588
   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"
+"style-to-object@npm:1.0.14":
+  version: 1.0.14
+  resolution: "style-to-object@npm:1.0.14"
   dependencies:
-    inline-style-parser: "npm:0.1.1"
-  checksum: 10c0/afe9b96ba077a9068baf8887091870f50298157c0ebf5378151792cf2a2ce084fec9b34fc544da0d9f8e6c22ca0c9e23aa6f075bb8eb051aa1d64363e9987600
+    inline-style-parser: "npm:0.2.7"
+  checksum: 10c0/854d9e9b77afc336e6d7b09348e7939f2617b34eb0895824b066d8cd1790284cb6d8b2ba36be88025b2595d715dba14b299ae76e4628a366541106f639e13679
   languageName: node
   linkType: hard
 
@@ -22865,19 +20603,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stylehacks@npm:^5.1.1":
-  version: 5.1.1
-  resolution: "stylehacks@npm:5.1.1"
-  dependencies:
-    browserslist: "npm:^4.21.4"
-    postcss-selector-parser: "npm:^6.0.4"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 10c0/402c2b545eeda0e972f125779adddc88df11bcf3a89de60c92026bd98cd49c1abffcd5bfe41766398835e0a1c7e5e72bdb6905809ecbb60716cd8d3a32ea7cd3
-  languageName: node
-  linkType: hard
-
-"styleq@npm:^0.1.2, styleq@npm:^0.1.3":
+"styleq@npm:^0.1.3":
   version: 0.1.3
   resolution: "styleq@npm:0.1.3"
   checksum: 10c0/975d951792e65052f1f6e41aaad46492642ce4922b3dc36d4b49b37c8509f9a776794d8f275360f00116a5e6ab1e31514bdcd5840656c4e3213da6803fa12941
@@ -22891,24 +20617,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sucrase@npm:~3.35.1":
-  version: 3.35.1
-  resolution: "sucrase@npm:3.35.1"
-  dependencies:
-    "@jridgewell/gen-mapping": "npm:^0.3.2"
-    commander: "npm:^4.0.0"
-    lines-and-columns: "npm:^1.1.6"
-    mz: "npm:^2.7.0"
-    pirates: "npm:^4.0.1"
-    tinyglobby: "npm:^0.2.11"
-    ts-interface-checker: "npm:^0.1.9"
-  bin:
-    sucrase: bin/sucrase
-    sucrase-node: bin/sucrase-node
-  checksum: 10c0/6fa22329c261371feb9560630d961ad0d0b9c87dce21ea74557c5f3ffbe5c1ee970ea8bcce9962ae9c90c3c47165ffa7dd41865c7414f5d8ea7a40755d612c5c
-  languageName: node
-  linkType: hard
-
 "supports-color@npm:7.2.0, supports-color@npm:^7.0.0, supports-color@npm:^7.1.0":
   version: 7.2.0
   resolution: "supports-color@npm:7.2.0"
@@ -22918,13 +20626,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"supports-color@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "supports-color@npm:2.0.0"
-  checksum: 10c0/570e0b63be36cccdd25186350a6cb2eaad332a95ff162fa06d9499982315f2fe4217e69dd98e862fbcd9c81eaff300a825a1fe7bf5cc752e5b84dfed042b0dda
-  languageName: node
-  linkType: hard
-
 "supports-color@npm:^5.3.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"
@@ -22960,30 +20661,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"svg-parser@npm:^2.0.4":
-  version: 2.0.4
-  resolution: "svg-parser@npm:2.0.4"
-  checksum: 10c0/02f6cb155dd7b63ebc2f44f36365bc294543bebb81b614b7628f1af3c54ab64f7e1cec20f06e252bf95bdde78441ae295a412c68ad1678f16a6907d924512b7a
-  languageName: node
-  linkType: hard
-
-"svgo@npm:^2.7.0, svgo@npm:^2.8.0":
-  version: 2.8.0
-  resolution: "svgo@npm:2.8.0"
-  dependencies:
-    "@trysound/sax": "npm:0.2.0"
-    commander: "npm:^7.2.0"
-    css-select: "npm:^4.1.3"
-    css-tree: "npm:^1.1.3"
-    csso: "npm:^4.2.0"
-    picocolors: "npm:^1.0.0"
-    stable: "npm:^0.1.8"
-  bin:
-    svgo: bin/svgo
-  checksum: 10c0/0741f5d5cad63111a90a0ce7a1a5a9013f6d293e871b75efe39addb57f29a263e45294e485a4d2ff9cc260a5d142c8b5937b2234b4ef05efdd2706fb2d360ecc
-  languageName: node
-  linkType: hard
-
 "swap-case@npm:^1.1.0":
   version: 1.1.2
   resolution: "swap-case@npm:1.1.2"
@@ -22994,6 +20671,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"synckit@npm:^0.11.13":
+  version: 0.11.13
+  resolution: "synckit@npm:0.11.13"
+  dependencies:
+    "@pkgr/core": "npm:^0.3.6"
+  checksum: 10c0/5a6c19f4f79045aaa7994106401bff6dbe7cca23a6d0a0723ff14eb8b1bebeb4a71729118f6914905598e304ea2fa13509885e11ba07d92e7cb68a06740cb328
+  languageName: node
+  linkType: hard
+
 "tapable@npm:^1.0.0":
   version: 1.1.3
   resolution: "tapable@npm:1.1.3"
@@ -23001,7 +20687,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tapable@npm:^2.0.0, tapable@npm:^2.2.0, tapable@npm:^2.2.1, tapable@npm:^2.3.0":
+"tapable@npm:^2.2.0, tapable@npm:^2.3.0":
   version: 2.3.0
   resolution: "tapable@npm:2.3.0"
   checksum: 10c0/cb9d67cc2c6a74dedc812ef3085d9d681edd2c1fa18e4aef57a3c0605fdbe44e6b8ea00bd9ef21bc74dd45314e39d31227aa031ebf2f5e38164df514136f2681
@@ -23021,41 +20707,6 @@ __metadata:
   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, temp-dir@npm:~2.0.0":
-  version: 2.0.0
-  resolution: "temp-dir@npm:2.0.0"
-  checksum: 10c0/b1df969e3f3f7903f3426861887ed76ba3b495f63f6d0c8e1ce22588679d9384d336df6064210fda14e640ed422e2a17d5c40d901f60e161c99482d723f4d309
-  languageName: node
-  linkType: hard
-
-"tempfile@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "tempfile@npm:3.0.0"
-  dependencies:
-    temp-dir: "npm:^2.0.0"
-    uuid: "npm:^3.3.2"
-  checksum: 10c0/1547e7b5c199868f9b8bf0e321f4cbdc3c57c05c03ff0b1a93deae94edc529ac1499ec7b6d7ebf4e79f469194262c4606785b47ec77d979eaece42c46db72932
-  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
-
 "term-size@npm:^2.1.0":
   version: 2.2.1
   resolution: "term-size@npm:2.2.1"
@@ -23073,7 +20724,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"terser-webpack-plugin@npm:^5.3.0, terser-webpack-plugin@npm:^5.3.16, terser-webpack-plugin@npm:^5.3.3":
+"terser-webpack-plugin@npm:^5.3.16":
   version: 5.3.16
   resolution: "terser-webpack-plugin@npm:5.3.16"
   dependencies:
@@ -23095,7 +20746,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"terser@npm:^5.10.0, terser@npm:^5.15.0, terser@npm:^5.31.1":
+"terser@npm:^5.15.0, terser@npm:^5.31.1":
   version: 5.44.1
   resolution: "terser@npm:5.44.1"
   dependencies:
@@ -23120,35 +20771,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"text-extensions@npm:^1.0.0":
-  version: 1.9.0
-  resolution: "text-extensions@npm:1.9.0"
-  checksum: 10c0/9ad5a9f723a871e2d884e132d7e93f281c60b5759c95f3f6b04704856548715d93a36c10dbaf5f12b91bf405f0cf3893bf169d4d143c0f5509563b992d385443
-  languageName: node
-  linkType: hard
-
-"text-table@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "text-table@npm:0.2.0"
-  checksum: 10c0/02805740c12851ea5982686810702e2f14369a5f4c5c40a836821e3eefc65ffeec3131ba324692a37608294b0fd8c1e55a2dd571ffed4909822787668ddbee5c
-  languageName: node
-  linkType: hard
-
-"thenify-all@npm:^1.0.0":
-  version: 1.6.0
-  resolution: "thenify-all@npm:1.6.0"
+"test-renderer@npm:1.2.0":
+  version: 1.2.0
+  resolution: "test-renderer@npm:1.2.0"
   dependencies:
-    thenify: "npm:>= 3.1.0 < 4"
-  checksum: 10c0/9b896a22735e8122754fe70f1d65f7ee691c1d70b1f116fda04fea103d0f9b356e3676cb789506e3909ae0486a79a476e4914b0f92472c2e093d206aed4b7d6b
+    "@types/react-reconciler": "npm:~0.33.0"
+    react-reconciler: "npm:~0.33.0"
+  peerDependencies:
+    react: ^19.0.0
+  checksum: 10c0/f6ac10a7906d46fd67e3a2ece1964a71f31ca15d70e8e18e2d06170fa355f8e042599f8956ae55b2b5ce15644d5574c580e1fe751954341ac9327a631215d77e
   languageName: node
   linkType: hard
 
-"thenify@npm:>= 3.1.0 < 4":
-  version: 3.3.1
-  resolution: "thenify@npm:3.3.1"
-  dependencies:
-    any-promise: "npm:^1.0.0"
-  checksum: 10c0/f375aeb2b05c100a456a30bc3ed07ef03a39cbdefe02e0403fb714b8c7e57eeaad1a2f5c4ecfb9ce554ce3db9c2b024eba144843cd9e344566d9fcee73b04767
+"text-extensions@npm:^1.0.0":
+  version: 1.9.0
+  resolution: "text-extensions@npm:1.9.0"
+  checksum: 10c0/9ad5a9f723a871e2d884e132d7e93f281c60b5759c95f3f6b04704856548715d93a36c10dbaf5f12b91bf405f0cf3893bf169d4d143c0f5509563b992d385443
   languageName: node
   linkType: hard
 
@@ -23185,27 +20823,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"thunky@npm:^1.0.2":
-  version: 1.1.0
-  resolution: "thunky@npm:1.1.0"
-  checksum: 10c0/369764f39de1ce1de2ba2fa922db4a3f92e9c7f33bcc9a713241bc1f4a5238b484c17e0d36d1d533c625efb00e9e82c3e45f80b47586945557b45abb890156d2
-  languageName: node
-  linkType: hard
-
-"tiny-invariant@npm:^1.0.2":
-  version: 1.3.3
-  resolution: "tiny-invariant@npm:1.3.3"
-  checksum: 10c0/65af4a07324b591a059b35269cd696aba21bef2107f29b9f5894d83cc143159a204b299553435b03874ebb5b94d019afa8b8eff241c8a4cfee95872c2e1c1c4a
-  languageName: node
-  linkType: hard
-
-"tiny-warning@npm:^1.0.0":
-  version: 1.0.3
-  resolution: "tiny-warning@npm:1.0.3"
-  checksum: 10c0/ef8531f581b30342f29670cb41ca248001c6fd7975ce22122bd59b8d62b4fc84ad4207ee7faa95cde982fa3357cd8f4be650142abc22805538c3b1392d7084fa
-  languageName: node
-  linkType: hard
-
 "tinycolor2@npm:^1.4.1":
   version: 1.6.0
   resolution: "tinycolor2@npm:1.6.0"
@@ -23213,7 +20830,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinyglobby@npm:^0.2.11, tinyglobby@npm:^0.2.12":
+"tinyglobby@npm:^0.2.12":
   version: 0.2.15
   resolution: "tinyglobby@npm:0.2.15"
   dependencies:
@@ -23223,6 +20840,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tinyglobby@npm:^0.2.15":
+  version: 0.2.16
+  resolution: "tinyglobby@npm:0.2.16"
+  dependencies:
+    fdir: "npm:^6.5.0"
+    picomatch: "npm:^4.0.4"
+  checksum: 10c0/f2e09fd93dd95c41e522113b686ff6f7c13020962f8698a864a257f3d7737599afc47722b7ab726e12f8a813f779906187911ff8ee6701ede65072671a7e934b
+  languageName: node
+  linkType: hard
+
 "title-case@npm:^2.1.0":
   version: 2.1.1
   resolution: "title-case@npm:2.1.1"
@@ -23258,13 +20885,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"to-fast-properties@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "to-fast-properties@npm:1.0.3"
-  checksum: 10c0/78974a4f4528700d18e4c2bbf0b1fb1b19862dcc20a18dc5ed659843dea2dff4f933d167a11d3819865c1191042003aea65f7f035791af9e65d070f2e05af787
-  languageName: node
-  linkType: hard
-
 "to-object-path@npm:^0.3.0":
   version: 0.3.0
   resolution: "to-object-path@npm:0.3.0"
@@ -23319,6 +20939,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"toggle-selection@npm:^1.0.6":
+  version: 1.0.6
+  resolution: "toggle-selection@npm:1.0.6"
+  checksum: 10c0/f2cf1f2c70f374fd87b0cdc8007453ba9e981c4305a8bf4eac10a30e62ecdfd28bca7d18f8f15b15a506bf8a7bfb20dbe3539f0fcf2a2c8396c1a78d53e1f179
+  languageName: node
+  linkType: hard
+
 "toidentifier@npm:~1.0.1":
   version: 1.0.1
   resolution: "toidentifier@npm:1.0.1"
@@ -23326,10 +20953,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"totalist@npm:^3.0.0":
-  version: 3.0.1
-  resolution: "totalist@npm:3.0.1"
-  checksum: 10c0/4bb1fadb69c3edbef91c73ebef9d25b33bbf69afe1e37ce544d5f7d13854cda15e47132f3e0dc4cafe300ddb8578c77c50a65004d8b6e97e77934a69aa924863
+"toqr@npm:^0.1.1":
+  version: 0.1.1
+  resolution: "toqr@npm:0.1.1"
+  checksum: 10c0/eec346afae2eede8886938992a7eba59f765b3d3a3d5e7ce4984cb25b124e1a3d02531ed1ef3100d60fe443eeb1c7f83ca1fa0bbb04915d67baa5380e7c9eda4
   languageName: node
   linkType: hard
 
@@ -23347,6 +20974,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"trim-lines@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "trim-lines@npm:3.0.1"
+  checksum: 10c0/3a1611fa9e52aa56a94c69951a9ea15b8aaad760eaa26c56a65330dc8adf99cb282fc07cc9d94968b7d4d88003beba220a7278bbe2063328eb23fb56f9509e94
+  languageName: node
+  linkType: hard
+
 "trim-newlines@npm:^2.0.0":
   version: 2.0.0
   resolution: "trim-newlines@npm:2.0.0"
@@ -23370,13 +21004,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"
@@ -23398,10 +21025,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-interface-checker@npm:^0.1.9":
-  version: 0.1.13
-  resolution: "ts-interface-checker@npm:0.1.13"
-  checksum: 10c0/232509f1b84192d07b81d1e9b9677088e590ac1303436da1e92b296e9be8e31ea042e3e1fd3d29b1742ad2c959e95afe30f63117b8f1bc3a3850070a5142fea7
+"trough@npm:^2.0.0":
+  version: 2.2.0
+  resolution: "trough@npm:2.2.0"
+  checksum: 10c0/58b671fc970e7867a48514168894396dd94e6d9d6456aca427cc299c004fe67f35ed7172a36449086b2edde10e78a71a284ec0076809add6834fb8f857ccb9b0
+  languageName: node
+  linkType: hard
+
+"ts-api-utils@npm:^2.5.0":
+  version: 2.5.0
+  resolution: "ts-api-utils@npm:2.5.0"
+  peerDependencies:
+    typescript: ">=4.8.4"
+  checksum: 10c0/767849383c114e7f1971fa976b20e73ac28fd0c70d8d65c0004790bf4d8f89888c7e4cf6d5949f9c1beae9bc3c64835bef77bbe27fddf45a3c7b60cebcf85c8c
   languageName: node
   linkType: hard
 
@@ -23417,31 +21053,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^1.8.1, tslib@npm:^1.9.0":
+"tslib@npm:^1.9.0":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"
   checksum: 10c0/69ae09c49eea644bc5ebe1bca4fa4cc2c82b7b3e02f43b84bd891504edf66dbc6b2ec0eef31a957042de2269139e4acff911e6d186a258fb14069cd7f6febce2
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.4.0, tslib@npm:^2.4.1":
+"tslib@npm:^2.0.1, tslib@npm:^2.4.0, tslib@npm:^2.8.0":
   version: 2.8.1
   resolution: "tslib@npm:2.8.1"
   checksum: 10c0/9c4759110a19c53f992d9aae23aac5ced636e99887b51b9e61def52611732872ff7668757d4e4c61f19691e36f4da981cd9485e869b4a7408d689f6bf1f14e62
   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
-
 "type-check@npm:^0.4.0, type-check@npm:~0.4.0":
   version: 0.4.0
   resolution: "type-check@npm:0.4.0"
@@ -23465,13 +21090,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"type-fest@npm:^0.20.2":
-  version: 0.20.2
-  resolution: "type-fest@npm:0.20.2"
-  checksum: 10c0/dea9df45ea1f0aaa4e2d3bed3f9a0bfe9e5b2592bddb92eb1bf06e50bcf98dbb78189668cd8bc31a0511d3fc25539b4cd5c704497e53e93e2d40ca764b10bfc3
-  languageName: node
-  linkType: hard
-
 "type-fest@npm:^0.21.3":
   version: 0.21.3
   resolution: "type-fest@npm:0.21.3"
@@ -23479,13 +21097,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"
@@ -23507,13 +21118,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"type-fest@npm:^2.5.0":
-  version: 2.19.0
-  resolution: "type-fest@npm:2.19.0"
-  checksum: 10c0/a5a7ecf2e654251613218c215c7493574594951c08e52ab9881c9df6a6da0aeca7528c213c622bc374b4e0cb5c443aa3ab758da4e3c959783ce884c3194e12cb
-  languageName: node
-  linkType: hard
-
 "type-is@npm:~1.6.18":
   version: 1.6.18
   resolution: "type-is@npm:1.6.18"
@@ -23593,10 +21197,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typeface-roboto@npm:^1.1.13":
-  version: 1.1.13
-  resolution: "typeface-roboto@npm:1.1.13"
-  checksum: 10c0/7a6caf5aa084d7e968311ab23415cb921f30bc6c89fe9886fb998b1095673cde2e5d77386a0249a3493f93ed58046c4685d4e718b08d129bc88fd46c798f37dd
+"typescript-eslint@npm:^8.61.1":
+  version: 8.61.1
+  resolution: "typescript-eslint@npm:8.61.1"
+  dependencies:
+    "@typescript-eslint/eslint-plugin": "npm:8.61.1"
+    "@typescript-eslint/parser": "npm:8.61.1"
+    "@typescript-eslint/typescript-estree": "npm:8.61.1"
+    "@typescript-eslint/utils": "npm:8.61.1"
+  peerDependencies:
+    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+    typescript: ">=4.8.4 <6.1.0"
+  checksum: 10c0/cf27a5c25a6d492a77ee72d98ff0e708b25553c4450483c627018556bee5b7b17066c0696947aa968ed24fd07ebc095b449dea79f8a7a4c65bccdb6aaf8dc09d
   languageName: node
   linkType: hard
 
@@ -23610,13 +21222,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^4.8.4":
-  version: 4.9.5
-  resolution: "typescript@npm:4.9.5"
+"typescript@npm:^6.0.3":
+  version: 6.0.3
+  resolution: "typescript@npm:6.0.3"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/5f6cad2e728a8a063521328e612d7876e12f0d8a8390d3b3aaa452a6a65e24e9ac8ea22beb72a924fd96ea0a49ea63bb4e251fb922b12eedfb7f7a26475e5c56
+  checksum: 10c0/4a25ff5045b984370f48f196b3a0120779b1b343d40b9a68d114ea5e5fff099809b2bb777576991a63a5cd59cf7bffd96ff6fe10afcefbcb8bd6fb96ad4b6606
   languageName: node
   linkType: hard
 
@@ -23630,13 +21242,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A^4.8.4#optional!builtin<compat/typescript>":
-  version: 4.9.5
-  resolution: "typescript@patch:typescript@npm%3A4.9.5#optional!builtin<compat/typescript>::version=4.9.5&hash=289587"
+"typescript@patch:typescript@npm%3A^6.0.3#optional!builtin<compat/typescript>":
+  version: 6.0.3
+  resolution: "typescript@patch:typescript@npm%3A6.0.3#optional!builtin<compat/typescript>::version=6.0.3&hash=5786d5"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/e3333f887c6829dfe0ab6c1dbe0dd1e3e2aeb56c66460cb85c5440c566f900c833d370ca34eb47558c0c69e78ced4bfe09b8f4f98b6de7afed9b84b8d1dd06a1
+  checksum: 10c0/2f25c74e65663c248fa1ade2b8459d9ce5372ff9dad07067310f132966ebec1d93f6c42f0baf77a6b6a7a91460463f708e6887013aaade22111037457c6b25df
   languageName: node
   linkType: hard
 
@@ -23670,13 +21282,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unc-path-regex@npm:^0.1.2":
-  version: 0.1.2
-  resolution: "unc-path-regex@npm:0.1.2"
-  checksum: 10c0/bf9c781c4e2f38e6613ea17a51072e4b416840fbe6eeb244597ce9b028fac2fb6cfd3dde1f14111b02c245e665dc461aab8168ecc30b14364d02caa37f812996
-  languageName: node
-  linkType: hard
-
 "undici-types@npm:~7.16.0":
   version: 7.16.0
   resolution: "undici-types@npm:7.16.0"
@@ -23684,17 +21289,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"undici@npm:^6.18.2":
-  version: 6.23.0
-  resolution: "undici@npm:6.23.0"
-  checksum: 10c0/d846b3fdfd05aa6081ba1eab5db6bbc21b283042c7a43722b86d1ee2bf749d7c990ceac0c809f9a07ffd88b1b0f4c0f548a8362c035088cb1997d63abdda499c
+"undici-types@npm:~7.18.0":
+  version: 7.18.2
+  resolution: "undici-types@npm:7.18.2"
+  checksum: 10c0/85a79189113a238959d7a647368e4f7c5559c3a404ebdb8fc4488145ce9426fcd82252a844a302798dfc0e37e6fb178ff481ed03bc4caf634c5757d9ef43521d
   languageName: node
   linkType: hard
 
-"undici@npm:^7.12.0":
-  version: 7.18.2
-  resolution: "undici@npm:7.18.2"
-  checksum: 10c0/4ff0722799f5e06fde5d1e58d318b1d78ba9a477836ad3e7374e9ac30ca20d1ab3282952d341635bf69b8e74b5c1cf366e595b3a96810e0dbf74e622dad7b5f9
+"unhead@npm:2.1.15":
+  version: 2.1.15
+  resolution: "unhead@npm:2.1.15"
+  dependencies:
+    hookable: "npm:^6.0.1"
+  checksum: 10c0/ab266e9cda44d0b528ae3b62ce9136cb4f81bd2aa1e2d66431cefe6b41151a811971951e05b4d81e6adea105b65901d9091dffa29d646f1be6246691606b2407
   languageName: node
   linkType: hard
 
@@ -23746,17 +21353,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unified@npm:9.2.0":
-  version: 9.2.0
-  resolution: "unified@npm:9.2.0"
+"unicorn-magic@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "unicorn-magic@npm:0.3.0"
+  checksum: 10c0/0a32a997d6c15f1c2a077a15b1c4ca6f268d574cf5b8975e778bb98e6f8db4ef4e86dfcae4e158cd4c7e38fb4dd383b93b13eefddc7f178dea13d3ac8a603271
+  languageName: node
+  linkType: hard
+
+"unified@npm:^11.0.0, unified@npm:^11.0.5":
+  version: 11.0.5
+  resolution: "unified@npm:11.0.5"
   dependencies:
-    bail: "npm:^1.0.0"
+    "@types/unist": "npm:^3.0.0"
+    bail: "npm:^2.0.0"
+    devlop: "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
+    is-plain-obj: "npm:^4.0.0"
+    trough: "npm:^2.0.0"
+    vfile: "npm:^6.0.0"
+  checksum: 10c0/53c8e685f56d11d9d458a43e0e74328a4d6386af51c8ac37a3dcabec74ce5026da21250590d4aff6733ccd7dc203116aae2b0769abc18cdf9639a54ae528dfc9
   languageName: node
   linkType: hard
 
@@ -23776,7 +21391,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unified@npm:^9.0.0, unified@npm:^9.2.2":
+"unified@npm:^9.0.0":
   version: 9.2.2
   resolution: "unified@npm:9.2.2"
   dependencies:
@@ -23820,16 +21435,7 @@ __metadata:
   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, unique-string@npm:~2.0.0":
+"unique-string@npm:^2.0.0":
   version: 2.0.0
   resolution: "unique-string@npm:2.0.0"
   dependencies:
@@ -23838,13 +21444,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-builder@npm:^1.0.1":
   version: 1.0.4
   resolution: "unist-builder@npm:1.0.4"
@@ -23854,7 +21453,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unist-util-generated@npm:^1.0.0, unist-util-generated@npm:^1.1.0":
+"unist-util-generated@npm:^1.1.0":
   version: 1.1.6
   resolution: "unist-util-generated@npm:1.1.6"
   checksum: 10c0/ee04a58a6711145ec5c8c6f10dfd3335ac93d9039dc35e7410ffc1299d6f3671b27d9b7aa486f826bd66ec15807ad6d0bf9348b34a1046440e1617abcf42903f
@@ -23875,6 +21474,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unist-util-is@npm:^6.0.0":
+  version: 6.0.1
+  resolution: "unist-util-is@npm:6.0.1"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+  checksum: 10c0/5a487d390193811d37a68264e204dbc7c15c40b8fc29b5515a535d921d071134f571d7b5cbd59bcd58d5ce1c0ab08f20fc4a1f0df2287a249c979267fc32ce06
+  languageName: node
+  linkType: hard
+
+"unist-util-position-from-estree@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "unist-util-position-from-estree@npm:2.0.0"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+  checksum: 10c0/39127bf5f0594e0a76d9241dec4f7aa26323517120ce1edd5ed91c8c1b9df7d6fb18af556e4b6250f1c7368825720ed892e2b6923be5cdc08a9bb16536dc37b3
+  languageName: node
+  linkType: hard
+
 "unist-util-position@npm:^3.0.0":
   version: 3.1.0
   resolution: "unist-util-position@npm:3.1.0"
@@ -23882,6 +21499,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unist-util-position@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "unist-util-position@npm:5.0.0"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+  checksum: 10c0/dde3b31e314c98f12b4dc6402f9722b2bf35e96a4f2d463233dd90d7cde2d4928074a7a11eff0a5eb1f4e200f27fc1557e0a64a7e8e4da6558542f251b1b7400
+  languageName: node
+  linkType: hard
+
 "unist-util-remove-position@npm:^1.0.0":
   version: 1.1.4
   resolution: "unist-util-remove-position@npm:1.1.4"
@@ -23891,15 +21517,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:^1.0.0":
   version: 1.0.3
   resolution: "unist-util-remove@npm:1.0.3"
@@ -23909,12 +21526,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unist-util-remove@npm:^2.0.0":
-  version: 2.1.0
-  resolution: "unist-util-remove@npm:2.1.0"
+"unist-util-remove@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "unist-util-remove@npm:4.0.0"
   dependencies:
-    unist-util-is: "npm:^4.0.0"
-  checksum: 10c0/f7dea56fb720ddab5e406af12ce37453b028273e23a7cc3e4c9f3f1ec85e1f72c6943a1ebb907120c9be0b1d08b209d7b8c7d2191a5012e16081056edf638df9
+    "@types/unist": "npm:^3.0.0"
+    unist-util-is: "npm:^6.0.0"
+    unist-util-visit-parents: "npm:^6.0.0"
+  checksum: 10c0/30f3ed31095dd7f3109266d39c514fab5f2da3fb656d5f78a0e3e7700f219760f2f4d8286c810ae43c241fee3f0a8dd40f8d1e5ebeee3cb810581d5e7e8d4f7d
   languageName: node
   linkType: hard
 
@@ -23934,6 +21553,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unist-util-stringify-position@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "unist-util-stringify-position@npm:4.0.0"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+  checksum: 10c0/dfe1dbe79ba31f589108cb35e523f14029b6675d741a79dea7e5f3d098785045d556d5650ec6a8338af11e9e78d2a30df12b1ee86529cded1098da3f17ee999e
+  languageName: node
+  linkType: hard
+
+"unist-util-visit-children@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "unist-util-visit-children@npm:3.0.0"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+  checksum: 10c0/51e95f54fbf11d414952c011c761c3960864948ad3fd2abe3989eb18b18d96b8f48e7ea5ab6f23264d1a3f4f5a1ff76312dd8f2196c78b762098403505c3abb9
+  languageName: node
+  linkType: hard
+
 "unist-util-visit-parents@npm:^2.0.0":
   version: 2.1.2
   resolution: "unist-util-visit-parents@npm:2.1.2"
@@ -23953,7 +21590,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unist-util-visit@npm:2.0.3, unist-util-visit@npm:^2.0.0, unist-util-visit@npm:^2.0.3":
+"unist-util-visit-parents@npm:^6.0.0":
+  version: 6.0.2
+  resolution: "unist-util-visit-parents@npm:6.0.2"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+    unist-util-is: "npm:^6.0.0"
+  checksum: 10c0/f1e4019dbd930301825895e3737b1ee0cd682f7622ddd915062135cbb39f8c090aaece3a3b5eae1f2ea52ec33f0931abb8f8a8b5c48a511a4203e3d360a8cd49
+  languageName: node
+  linkType: hard
+
+"unist-util-visit@npm:^1.0.0, unist-util-visit@npm:^1.1.0, unist-util-visit@npm:^1.3.0":
+  version: 1.4.1
+  resolution: "unist-util-visit@npm:1.4.1"
+  dependencies:
+    unist-util-visit-parents: "npm:^2.0.0"
+  checksum: 10c0/8fb61725270059034d987813816e6c2d6362f55d4d19936db9ce23a5ace0ae4d584064ceb94dee6618e3318aef087505607f7ccc8c4305fbb644c3b643ae0059
+  languageName: node
+  linkType: hard
+
+"unist-util-visit@npm:^2.0.3":
   version: 2.0.3
   resolution: "unist-util-visit@npm:2.0.3"
   dependencies:
@@ -23964,12 +21620,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unist-util-visit@npm:^1.0.0, unist-util-visit@npm:^1.1.0, unist-util-visit@npm:^1.3.0":
-  version: 1.4.1
-  resolution: "unist-util-visit@npm:1.4.1"
+"unist-util-visit@npm:^5.0.0, unist-util-visit@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "unist-util-visit@npm:5.1.0"
   dependencies:
-    unist-util-visit-parents: "npm:^2.0.0"
-  checksum: 10c0/8fb61725270059034d987813816e6c2d6362f55d4d19936db9ce23a5ace0ae4d584064ceb94dee6618e3318aef087505607f7ccc8c4305fbb644c3b643ae0059
+    "@types/unist": "npm:^3.0.0"
+    unist-util-is: "npm:^6.0.0"
+    unist-util-visit-parents: "npm:^6.0.0"
+  checksum: 10c0/a56e1bbbf63fcb55abe379e660b9a3367787e8be1e2473bdb7e86cfa6f32b6c1fa0092432d7040b8a30b2fc674bbbe024ffe6d03c3d6bf4839b064f584463a4e
   languageName: node
   linkType: hard
 
@@ -23987,13 +21645,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.1
   resolution: "universalify@npm:2.0.1"
@@ -24018,7 +21669,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"update-browserslist-db@npm:^1.2.0":
+"update-browserslist-db@npm:^1.2.0, update-browserslist-db@npm:^1.2.3":
   version: 1.2.3
   resolution: "update-browserslist-db@npm:1.2.3"
   dependencies:
@@ -24032,16 +21683,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"update-check@npm:1.5.3":
-  version: 1.5.3
-  resolution: "update-check@npm:1.5.3"
-  dependencies:
-    registry-auth-token: "npm:3.3.2"
-    registry-url: "npm:3.1.0"
-  checksum: 10c0/3c6fcc41600c1a61f0606a67c7cdba879e2dd493cc1dc466a78f93657b397df40e1bed8f6517cbf01e2e1f6abcb92f69509da13c495a5d81d133ac1e33c6e66f
-  languageName: node
-  linkType: hard
-
 "update-notifier@npm:4.1.1":
   version: 4.1.1
   resolution: "update-notifier@npm:4.1.1"
@@ -24063,28 +21704,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"update-notifier@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "update-notifier@npm:5.1.0"
-  dependencies:
-    boxen: "npm:^5.0.0"
-    chalk: "npm:^4.1.0"
-    configstore: "npm:^5.0.1"
-    has-yarn: "npm:^2.1.0"
-    import-lazy: "npm:^2.1.0"
-    is-ci: "npm:^2.0.0"
-    is-installed-globally: "npm:^0.4.0"
-    is-npm: "npm:^5.0.0"
-    is-yarn-global: "npm:^0.3.0"
-    latest-version: "npm:^5.1.0"
-    pupa: "npm:^2.1.1"
-    semver: "npm:^7.3.4"
-    semver-diff: "npm:^3.1.1"
-    xdg-basedir: "npm:^4.0.0"
-  checksum: 10c0/0dde6db5ac1e5244e1f8bf5b26895a0d53c00797ea2bdbc1302623dd1aecab5cfb88b4f324d482cbd4c8b089464383d8c83db64dec5798ec0136820e22478e47
-  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"
@@ -24124,23 +21743,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"url-loader@npm:^4.1.1":
-  version: 4.1.1
-  resolution: "url-loader@npm:4.1.1"
-  dependencies:
-    loader-utils: "npm:^2.0.0"
-    mime-types: "npm:^2.1.27"
-    schema-utils: "npm:^3.0.0"
-  peerDependencies:
-    file-loader: "*"
-    webpack: ^4.0.0 || ^5.0.0
-  peerDependenciesMeta:
-    file-loader:
-      optional: true
-  checksum: 10c0/71b6300e02ce26c70625eae1a2297c0737635038c62691bb3007ac33e85c0130efc74bfb444baf5c6b3bad5953491159d31d66498967d1417865d0c7e7cd1a64
-  languageName: node
-  linkType: hard
-
 "url-parse-lax@npm:^3.0.0":
   version: 3.0.0
   resolution: "url-parse-lax@npm:3.0.0"
@@ -24160,40 +21762,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-composed-ref@npm:^1.3.0":
-  version: 1.4.0
-  resolution: "use-composed-ref@npm:1.4.0"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 10c0/c77e0cba9579b7746d52feaf3ce77d8c345f266c9c1ef46584ae68f54646537c87b2ad97f5219a4b1db52f97ec2905e88e5b146add1f28f7e457bd52ca1b93cf
-  languageName: node
-  linkType: hard
-
-"use-isomorphic-layout-effect@npm:^1.1.1":
-  version: 1.2.1
-  resolution: "use-isomorphic-layout-effect@npm:1.2.1"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 10c0/4d3c1124d630fbe09c1d2a16af0cd78ac2fe1d22eb24a178363e3d84a897659cc04e8e8cd71f66ff78ff75ef8287fa72e746cb213b96c1097e70e4b4ed69f63f
-  languageName: node
-  linkType: hard
-
-"use-latest-callback@npm:^0.1.7":
-  version: 0.1.11
-  resolution: "use-latest-callback@npm:0.1.11"
-  peerDependencies:
-    react: ">=16.8"
-  checksum: 10c0/8361ccd3e121552173a27fad67bd226e0cc8acf377073357a7ce83f516be3993b57111eb0e5a8748932543ff6bf4d202200de6e8ba6fa78ae111f44d05404128
-  languageName: node
-  linkType: hard
-
-"use-latest-callback@npm:^0.2.1, use-latest-callback@npm:^0.2.3, use-latest-callback@npm:^0.2.4":
+"use-latest-callback@npm:^0.2.3":
   version: 0.2.6
   resolution: "use-latest-callback@npm:0.2.6"
   peerDependencies:
@@ -24202,21 +21771,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-latest@npm:^1.2.1":
-  version: 1.3.0
-  resolution: "use-latest@npm:1.3.0"
-  dependencies:
-    use-isomorphic-layout-effect: "npm:^1.1.1"
+"use-latest-callback@npm:^0.3.3":
+  version: 0.3.4
+  resolution: "use-latest-callback@npm:0.3.4"
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 10c0/067c648814ad0c1f1e89d2d0e496254b05c4bed6a34e23045b4413824222aab08fd803c59a42852acc16830c17567d03f8c90af0a62be2f4e4b931454d079798
+    react: ">=16.8"
+  checksum: 10c0/af4a4ae7c0a378023efc06f195eeb78420ae9f8c01221a88f73b36561a6561436dcda7e3a6bc37c382271ce247fc2331fd614ef66d9a2b5066ed303ea6c886f0
   languageName: node
   linkType: hard
 
-"use-sync-external-store@npm:^1.2.0, use-sync-external-store@npm:^1.5.0":
+"use-sync-external-store@npm:^1.6.0":
   version: 1.6.0
   resolution: "use-sync-external-store@npm:1.6.0"
   peerDependencies:
@@ -24232,15 +21796,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"user-home@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "user-home@npm:1.1.1"
-  bin:
-    user-home: cli.js
-  checksum: 10c0/9d80a5df3bfea008e4d17b1465e8eb4ac7472ba02766feb242e84349b877f74e302838c85a622d4ba78665c2378b654fe1b0d27cf912c917b5536eb4778f8804
-  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"
@@ -24248,20 +21803,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"utila@npm:~0.4":
-  version: 0.4.0
-  resolution: "utila@npm:0.4.0"
-  checksum: 10c0/2791604e09ca4f77ae314df83e80d1805f867eb5c7e13e7413caee01273c278cf2c9a3670d8d25c889a877f7b149d892fe61b0181a81654b425e9622ab23d42e
-  languageName: node
-  linkType: hard
-
-"utility-types@npm:^3.10.0":
-  version: 3.11.0
-  resolution: "utility-types@npm:3.11.0"
-  checksum: 10c0/2f1580137b0c3e6cf5405f37aaa8f5249961a76d26f1ca8efc0ff49a2fc0e0b2db56de8e521a174d075758e0c7eb3e590edec0832eb44478b958f09914920f19
-  languageName: node
-  linkType: hard
-
 "utils-merge@npm:1.0.1":
   version: 1.0.1
   resolution: "utils-merge@npm:1.0.1"
@@ -24269,7 +21810,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uuid@npm:8.3.2, uuid@npm:^8.3.2":
+"uuid@npm:8.3.2":
   version: 8.3.2
   resolution: "uuid@npm:8.3.2"
   bin:
@@ -24278,15 +21819,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"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"
@@ -24307,15 +21839,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"v8flags@npm:^2.1.1":
-  version: 2.1.1
-  resolution: "v8flags@npm:2.1.1"
-  dependencies:
-    user-home: "npm:^1.1.1"
-  checksum: 10c0/ab5e478e661826a16c261515367091befa2edcdf0819d3a2f25013f80328e5998aed05429d2b28c1bc58e7df0eedc8377dc5829ba44811626fbadd5f6877c31f
-  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"
@@ -24333,13 +21856,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"value-equal@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "value-equal@npm:1.0.1"
-  checksum: 10c0/79068098355483ef29f4d3753999ad880875b87625d7e9055cad9346ea4b7662aad3a66f87976801b0dd7a6f828ba973d28b1669ebcd37eaf88cc5f687c1a691
-  languageName: node
-  linkType: hard
-
 "vary@npm:~1.1.2":
   version: 1.1.2
   resolution: "vary@npm:1.1.2"
@@ -24354,13 +21870,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vfile-location@npm:^3.0.0, vfile-location@npm:^3.2.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"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+    vfile: "npm:^6.0.0"
+  checksum: 10c0/1711f67802a5bc175ea69750d59863343ed43d1b1bb25c0a9063e4c70595e673e53e2ed5cdbb6dcdc370059b31605144d95e8c061b9361bcc2b036b8f63a4966
+  languageName: node
+  linkType: hard
+
 "vfile-message@npm:^1.0.0":
   version: 1.1.1
   resolution: "vfile-message@npm:1.1.1"
@@ -24380,6 +21906,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vfile-message@npm:^4.0.0":
+  version: 4.0.3
+  resolution: "vfile-message@npm:4.0.3"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+    unist-util-stringify-position: "npm:^4.0.0"
+  checksum: 10c0/33d9f219610d27987689bb14fa5573d2daa146941d1a05416dd7702c4215b23f44ed81d059e70d0e4e24f9a57d5f4dc9f18d35a993f04cf9446a7abe6d72d0c0
+  languageName: node
+  linkType: hard
+
 "vfile@npm:^3.0.0":
   version: 3.0.1
   resolution: "vfile@npm:3.0.1"
@@ -24404,6 +21940,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vfile@npm:^6.0.0":
+  version: 6.0.3
+  resolution: "vfile@npm:6.0.3"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+    vfile-message: "npm:^4.0.0"
+  checksum: 10c0/e5d9eb4810623f23758cfc2205323e33552fb5972e5c2e6587babe08fe4d24859866277404fb9e2a20afb71013860d96ec806cb257536ae463c87d70022ab9ef
+  languageName: node
+  linkType: hard
+
 "vlq@npm:^1.0.0":
   version: 1.0.1
   resolution: "vlq@npm:1.0.1"
@@ -24411,21 +21957,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"wait-on@npm:^6.0.1":
-  version: 6.0.1
-  resolution: "wait-on@npm:6.0.1"
-  dependencies:
-    axios: "npm:^0.25.0"
-    joi: "npm:^17.6.0"
-    lodash: "npm:^4.17.21"
-    minimist: "npm:^1.2.5"
-    rxjs: "npm:^7.5.4"
-  bin:
-    wait-on: bin/wait-on
-  checksum: 10c0/99772bc85d17f7e6ff8b0e40bd2c90a2c2025b0e9a5a3f8edcf39af0c367d8a5bbdd3d4f1190588be8b09745e80bbdf59c2c4059053a7d180e29b8711cc4a840
-  languageName: node
-  linkType: hard
-
 "walker@npm:^1.0.7, walker@npm:^1.0.8, walker@npm:~1.0.5":
   version: 1.0.8
   resolution: "walker@npm:1.0.8"
@@ -24435,7 +21966,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"warn-once@npm:^0.1.0":
+"warn-once@npm:^0.1.0, warn-once@npm:^0.1.1":
   version: 0.1.1
   resolution: "warn-once@npm:0.1.1"
   checksum: 10c0/f531e7b2382124f51e6d8f97b8c865246db8ab6ff4e53257a2d274e0f02b97d7201eb35db481843dc155815e154ad7afb53b01c4d4db15fb5aa073562496aff7
@@ -24452,15 +21983,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"wbuf@npm:^1.1.0, wbuf@npm:^1.7.3":
-  version: 1.7.3
-  resolution: "wbuf@npm:1.7.3"
-  dependencies:
-    minimalistic-assert: "npm:^1.0.0"
-  checksum: 10c0/56edcc5ef2b3d30913ba8f1f5cccc364d180670b24d5f3f8849c1e6fb514e5c7e3a87548ae61227a82859eba6269c11393ae24ce12a2ea1ecb9b465718ddced7
-  languageName: node
-  linkType: hard
-
 "wcwidth@npm:^1.0.1":
   version: 1.0.1
   resolution: "wcwidth@npm:1.0.1"
@@ -24477,6 +21999,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"web-namespaces@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "web-namespaces@npm:2.0.1"
+  checksum: 10c0/df245f466ad83bd5cd80bfffc1674c7f64b7b84d1de0e4d2c0934fb0782e0a599164e7197a4bce310ee3342fd61817b8047ff04f076a1ce12dd470584142a4bd
+  languageName: node
+  linkType: hard
+
 "webidl-conversions@npm:^3.0.0":
   version: 3.0.1
   resolution: "webidl-conversions@npm:3.0.1"
@@ -24484,35 +22013,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webidl-conversions@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "webidl-conversions@npm:5.0.0"
-  checksum: 10c0/bf31df332ed11e1114bfcae7712d9ab2c37e7faa60ba32d8fdbee785937c0b012eee235c19d2b5d84f5072db84a160e8d08dd382da7f850feec26a4f46add8ff
-  languageName: node
-  linkType: hard
-
-"webpack-bundle-analyzer@npm:^4.5.0":
-  version: 4.10.2
-  resolution: "webpack-bundle-analyzer@npm:4.10.2"
-  dependencies:
-    "@discoveryjs/json-ext": "npm:0.5.7"
-    acorn: "npm:^8.0.4"
-    acorn-walk: "npm:^8.0.0"
-    commander: "npm:^7.2.0"
-    debounce: "npm:^1.2.1"
-    escape-string-regexp: "npm:^4.0.0"
-    gzip-size: "npm:^6.0.0"
-    html-escaper: "npm:^2.0.2"
-    opener: "npm:^1.5.2"
-    picocolors: "npm:^1.0.0"
-    sirv: "npm:^2.0.3"
-    ws: "npm:^7.3.1"
-  bin:
-    webpack-bundle-analyzer: lib/bin/analyzer.js
-  checksum: 10c0/00603040e244ead15b2d92981f0559fa14216381349412a30070a7358eb3994cd61a8221d34a3b3fb8202dc3d1c5ee1fbbe94c5c52da536e5b410aa1cf279a48
-  languageName: node
-  linkType: hard
-
 "webpack-dev-middleware@npm:^4.0.0":
   version: 4.3.0
   resolution: "webpack-dev-middleware@npm:4.3.0"
@@ -24529,68 +22029,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-dev-middleware@npm:^5.3.4":
-  version: 5.3.4
-  resolution: "webpack-dev-middleware@npm:5.3.4"
-  dependencies:
-    colorette: "npm:^2.0.10"
-    memfs: "npm:^3.4.3"
-    mime-types: "npm:^2.1.31"
-    range-parser: "npm:^1.2.1"
-    schema-utils: "npm:^4.0.0"
-  peerDependencies:
-    webpack: ^4.0.0 || ^5.0.0
-  checksum: 10c0/257df7d6bc5494d1d3cb66bba70fbdf5a6e0423e39b6420f7631aeb52435afbfbff8410a62146dcdf3d2f945c62e03193aae2ac1194a2f7d5a2523b9d194e9e1
-  languageName: node
-  linkType: hard
-
-"webpack-dev-server@npm:^4.11.1, webpack-dev-server@npm:^4.9.3":
-  version: 4.15.2
-  resolution: "webpack-dev-server@npm:4.15.2"
-  dependencies:
-    "@types/bonjour": "npm:^3.5.9"
-    "@types/connect-history-api-fallback": "npm:^1.3.5"
-    "@types/express": "npm:^4.17.13"
-    "@types/serve-index": "npm:^1.9.1"
-    "@types/serve-static": "npm:^1.13.10"
-    "@types/sockjs": "npm:^0.3.33"
-    "@types/ws": "npm:^8.5.5"
-    ansi-html-community: "npm:^0.0.8"
-    bonjour-service: "npm:^1.0.11"
-    chokidar: "npm:^3.5.3"
-    colorette: "npm:^2.0.10"
-    compression: "npm:^1.7.4"
-    connect-history-api-fallback: "npm:^2.0.0"
-    default-gateway: "npm:^6.0.3"
-    express: "npm:^4.17.3"
-    graceful-fs: "npm:^4.2.6"
-    html-entities: "npm:^2.3.2"
-    http-proxy-middleware: "npm:^2.0.3"
-    ipaddr.js: "npm:^2.0.1"
-    launch-editor: "npm:^2.6.0"
-    open: "npm:^8.0.9"
-    p-retry: "npm:^4.5.0"
-    rimraf: "npm:^3.0.2"
-    schema-utils: "npm:^4.0.0"
-    selfsigned: "npm:^2.1.1"
-    serve-index: "npm:^1.9.1"
-    sockjs: "npm:^0.3.24"
-    spdy: "npm:^4.0.2"
-    webpack-dev-middleware: "npm:^5.3.4"
-    ws: "npm:^8.13.0"
-  peerDependencies:
-    webpack: ^4.37.0 || ^5.0.0
-  peerDependenciesMeta:
-    webpack:
-      optional: true
-    webpack-cli:
-      optional: true
-  bin:
-    webpack-dev-server: bin/webpack-dev-server.js
-  checksum: 10c0/625bd5b79360afcf98782c8b1fd710b180bb0e96d96b989defff550c546890010ceea82ffbecb2a0a23f7f018bc72f2dee7b3070f7b448fb0110df6657fb2904
-  languageName: node
-  linkType: hard
-
 "webpack-hot-middleware@npm:^2.25.0":
   version: 2.26.1
   resolution: "webpack-hot-middleware@npm:2.26.1"
@@ -24602,29 +22040,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-manifest-plugin@npm:^4.1.1":
-  version: 4.1.1
-  resolution: "webpack-manifest-plugin@npm:4.1.1"
-  dependencies:
-    tapable: "npm:^2.0.0"
-    webpack-sources: "npm:^2.2.0"
-  peerDependencies:
-    webpack: ^4.44.2 || ^5.47.0
-  checksum: 10c0/9486f399c86358e5811f314c71ba0ef2915c2db885ae01fd14002f2fb3d791bc9cf7b0fbe92e9f012c85c06f2efd94ecfc50f85d3fbce6359757f327039a7839
-  languageName: node
-  linkType: hard
-
-"webpack-merge@npm:^5.8.0":
-  version: 5.10.0
-  resolution: "webpack-merge@npm:5.10.0"
-  dependencies:
-    clone-deep: "npm:^4.0.1"
-    flat: "npm:^5.0.2"
-    wildcard: "npm:^2.0.0"
-  checksum: 10c0/b607c84cabaf74689f965420051a55a08722d897bdd6c29cb0b2263b451c090f962d41ecf8c9bf56b0ab3de56e65476ace0a8ecda4f4a4663684243d90e0512b
-  languageName: node
-  linkType: hard
-
 "webpack-sources@npm:^1.1.0":
   version: 1.4.3
   resolution: "webpack-sources@npm:1.4.3"
@@ -24635,24 +22050,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-sources@npm:^2.2.0":
-  version: 2.3.1
-  resolution: "webpack-sources@npm:2.3.1"
-  dependencies:
-    source-list-map: "npm:^2.0.1"
-    source-map: "npm:^0.6.1"
-  checksum: 10c0/caf56a9a478eca7e77feca2b6ddc7673f1384eb870280014b300c40cf42abca656f639ff58a8d55a889a92a810ae3c22e71e578aa38fde416e8c2e6827a6ddfd
-  languageName: node
-  linkType: hard
-
-"webpack-sources@npm:^3.2.2, webpack-sources@npm:^3.3.3":
+"webpack-sources@npm:^3.3.3":
   version: 3.3.3
   resolution: "webpack-sources@npm:3.3.3"
   checksum: 10c0/ab732f6933b513ba4d505130418995ddef6df988421fccf3289e53583c6a39e205c4a0739cee98950964552d3006604912679c736031337fb4a9d78d8576ed40
   languageName: node
   linkType: hard
 
-"webpack@npm:^5.3.2, webpack@npm:^5.64.4, webpack@npm:^5.73.0":
+"webpack@npm:^5.3.2":
   version: 5.104.1
   resolution: "webpack@npm:5.104.1"
   dependencies:
@@ -24690,47 +22095,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpackbar@npm:^5.0.2":
-  version: 5.0.2
-  resolution: "webpackbar@npm:5.0.2"
-  dependencies:
-    chalk: "npm:^4.1.0"
-    consola: "npm:^2.15.3"
-    pretty-time: "npm:^1.1.0"
-    std-env: "npm:^3.0.1"
-  peerDependencies:
-    webpack: 3 || 4 || 5
-  checksum: 10c0/336568a6ed1c1ad743c8d20a5cab5875a7ebe1e96181f49ae0a1a897f1a59d1661d837574a25d8ba9dfa4f2f705bd46ca0cd037ff60286ff70fb8d9db2b0c123
-  languageName: node
-  linkType: hard
-
-"websocket-driver@npm:>=0.5.1, websocket-driver@npm:^0.7.4":
-  version: 0.7.4
-  resolution: "websocket-driver@npm:0.7.4"
-  dependencies:
-    http-parser-js: "npm:>=0.5.1"
-    safe-buffer: "npm:>=5.1.0"
-    websocket-extensions: "npm:>=0.1.1"
-  checksum: 10c0/5f09547912b27bdc57bac17b7b6527d8993aa4ac8a2d10588bb74aebaf785fdcf64fea034aae0c359b7adff2044dd66f3d03866e4685571f81b13e548f9021f1
-  languageName: node
-  linkType: hard
-
-"websocket-extensions@npm:>=0.1.1":
-  version: 0.1.4
-  resolution: "websocket-extensions@npm:0.1.4"
-  checksum: 10c0/bbc8c233388a0eb8a40786ee2e30d35935cacbfe26ab188b3e020987e85d519c2009fe07cfc37b7f718b85afdba7e54654c9153e6697301f72561bfe429177e0
-  languageName: node
-  linkType: hard
-
-"whatwg-encoding@npm:^3.1.1":
-  version: 3.1.1
-  resolution: "whatwg-encoding@npm:3.1.1"
-  dependencies:
-    iconv-lite: "npm:0.6.3"
-  checksum: 10c0/273b5f441c2f7fda3368a496c3009edbaa5e43b71b09728f90425e7f487e5cef9eb2b846a31bd760dd8077739c26faf6b5ca43a5f24033172b003b72cf61a93e
-  languageName: node
-  linkType: hard
-
 "whatwg-fetch@npm:^3.0.0":
   version: 3.6.20
   resolution: "whatwg-fetch@npm:3.6.20"
@@ -24738,21 +22102,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"whatwg-mimetype@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "whatwg-mimetype@npm:4.0.0"
-  checksum: 10c0/a773cdc8126b514d790bdae7052e8bf242970cebd84af62fb2f35a33411e78e981f6c0ab9ed1fe6ec5071b09d5340ac9178e05b52d35a9c4bcf558ba1b1551df
-  languageName: node
-  linkType: hard
-
-"whatwg-url-without-unicode@npm:8.0.0-3":
-  version: 8.0.0-3
-  resolution: "whatwg-url-without-unicode@npm:8.0.0-3"
-  dependencies:
-    buffer: "npm:^5.4.3"
-    punycode: "npm:^2.1.1"
-    webidl-conversions: "npm:^5.0.0"
-  checksum: 10c0/c27a637ab7d01981b2e2f576fde2113b9c42247500e093d2f5ba94b515d5c86dbcf70e5cad4b21b8813185f21fa1b4846f53c79fa87995293457e28c889cc0fd
+"whatwg-url-minimum@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "whatwg-url-minimum@npm:0.1.2"
+  checksum: 10c0/5437bc4e1f49d89ff58b7565214db4640c4ad5d90de6c61207e0dc766dae9b9894a0ea7b7883b8576524601586705c5dc359681c388d76c18eddb51f50de558f
   languageName: node
   linkType: hard
 
@@ -24834,7 +22187,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which@npm:^1.2.9, which@npm:^1.3.1":
+"which@npm:^1.2.9":
   version: 1.3.1
   resolution: "which@npm:1.3.1"
   dependencies:
@@ -24845,7 +22198,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which@npm:^2.0.1, which@npm:^2.0.2":
+"which@npm:^2.0.1":
   version: 2.0.2
   resolution: "which@npm:2.0.2"
   dependencies:
@@ -24867,6 +22220,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"which@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "which@npm:6.0.1"
+  dependencies:
+    isexe: "npm:^4.0.0"
+  bin:
+    node-which: bin/which.js
+  checksum: 10c0/7e710e54ea36d2d6183bee2f9caa27a3b47b9baf8dee55a199b736fcf85eab3b9df7556fca3d02b50af7f3dfba5ea3a45644189836df06267df457e354da66d5
+  languageName: node
+  linkType: hard
+
 "widest-line@npm:^3.1.0":
   version: 3.1.0
   resolution: "widest-line@npm:3.1.0"
@@ -24876,22 +22240,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"widest-line@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "widest-line@npm:4.0.1"
-  dependencies:
-    string-width: "npm:^5.0.1"
-  checksum: 10c0/7da9525ba45eaf3e4ed1a20f3dcb9b85bd9443962450694dae950f4bdd752839747bbc14713522b0b93080007de8e8af677a61a8c2114aa553ad52bde72d0f9c
-  languageName: node
-  linkType: hard
-
-"wildcard@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "wildcard@npm:2.0.1"
-  checksum: 10c0/08f70cd97dd9a20aea280847a1fe8148e17cae7d231640e41eb26d2388697cbe65b67fd9e68715251c39b080c5ae4f76d71a9a69fa101d897273efdfb1b58bf7
-  languageName: node
-  linkType: hard
-
 "window-size@npm:1.1.1":
   version: 1.1.1
   resolution: "window-size@npm:1.1.1"
@@ -24913,13 +22261,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"wonka@npm:^6.3.2":
-  version: 6.3.5
-  resolution: "wonka@npm:6.3.5"
-  checksum: 10c0/044fe5ae26c0a32b0a1603cc0ed71ede8c9febe5bb3adab4fad5e088ceee600a84a08d0deb95a72189bbaf0d510282d183b6fb7b6e9837e7a1c9b209f788dd07
-  languageName: node
-  linkType: hard
-
 "word-wrap@npm:^1.2.5":
   version: 1.2.5
   resolution: "word-wrap@npm:1.2.5"
@@ -24967,14 +22308,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"wrap-ansi@npm:^8.0.1":
-  version: 8.1.0
-  resolution: "wrap-ansi@npm:8.1.0"
+"wrap-ansi@npm:^9.0.0":
+  version: 9.0.2
+  resolution: "wrap-ansi@npm:9.0.2"
   dependencies:
-    ansi-styles: "npm:^6.1.0"
-    string-width: "npm:^5.0.1"
-    strip-ansi: "npm:^7.0.1"
-  checksum: 10c0/138ff58a41d2f877eae87e3282c0630fc2789012fc1af4d6bd626eeb9a2f9a65ca92005e6e69a75c7b85a68479fe7443c7dbe1eb8fbaa681a4491364b7c55c60
+    ansi-styles: "npm:^6.2.1"
+    string-width: "npm:^7.0.0"
+    strip-ansi: "npm:^7.1.0"
+  checksum: 10c0/3305839b9a0d6fb930cb63a52f34d3936013d8b0682ff3ec133c9826512620f213800ffa19ea22904876d5b7e9a3c1f40682f03597d986a4ca881fa7b033688c
   languageName: node
   linkType: hard
 
@@ -25007,16 +22348,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^6.2.3":
-  version: 6.2.3
-  resolution: "ws@npm:6.2.3"
-  dependencies:
-    async-limiter: "npm:~1.0.0"
-  checksum: 10c0/56a35b9799993cea7ce2260197e7879f21bbbb194a967f31acbbda6f7f46ecda4365951966fb062044c95197e19fb2f053be6f65c172435455186835f494de41
-  languageName: node
-  linkType: hard
-
-"ws@npm:^7, ws@npm:^7.3.1, ws@npm:^7.5.10":
+"ws@npm:^7, ws@npm:^7.5.10":
   version: 7.5.10
   resolution: "ws@npm:7.5.10"
   peerDependencies:
@@ -25031,7 +22363,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^8.12.1, ws@npm:^8.13.0":
+"ws@npm:^8.12.1":
   version: 8.19.0
   resolution: "ws@npm:8.19.0"
   peerDependencies:
@@ -25070,17 +22402,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"xml-js@npm:^1.6.11":
-  version: 1.6.11
-  resolution: "xml-js@npm:1.6.11"
-  dependencies:
-    sax: "npm:^1.2.4"
-  bin:
-    xml-js: ./bin/cli.js
-  checksum: 10c0/c83631057f10bf90ea785cee434a8a1a0030c7314fe737ad9bf568a281083b565b28b14c9e9ba82f11fc9dc582a3a907904956af60beb725be1c9ad4b030bc5a
-  languageName: node
-  linkType: hard
-
 "xml2js@npm:0.6.0":
   version: 0.6.0
   resolution: "xml2js@npm:0.6.0"
@@ -25147,7 +22468,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yaml@npm:1.10.2, yaml@npm:^1.10.0, yaml@npm:^1.10.2, yaml@npm:^1.7.2":
+"yaml@npm:1.10.2, yaml@npm:^1.10.0":
   version: 1.10.2
   resolution: "yaml@npm:1.10.2"
   checksum: 10c0/5c28b9eb7adc46544f28d9a8d20c5b3cb1215a886609a2fd41f51628d8aaa5878ccd628b755dbcd29f6bb4921bd04ffbc6dcc370689bb96e594e2f9813d2605f
@@ -25213,6 +22534,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yargs-parser@npm:^22.0.0":
+  version: 22.0.0
+  resolution: "yargs-parser@npm:22.0.0"
+  checksum: 10c0/cb7ef81759c4271cb1d96b9351dbbc9a9ce35d3e1122d2b739bf6c432603824fa02c67cc12dcef6ea80283379d63495686e8f41cc7b06c6576e792aba4d33e1c
+  languageName: node
+  linkType: hard
+
 "yargs@npm:^13.2.1":
   version: 13.3.2
   resolution: "yargs@npm:13.3.2"
@@ -25265,7 +22593,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs@npm:^17.3.1, yargs@npm:^17.5.1, yargs@npm:^17.6.2":
+"yargs@npm:^17.3.1, yargs@npm:^17.6.2":
   version: 17.7.2
   resolution: "yargs@npm:17.7.2"
   dependencies:
@@ -25280,6 +22608,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yargs@npm:^18.0.0":
+  version: 18.0.0
+  resolution: "yargs@npm:18.0.0"
+  dependencies:
+    cliui: "npm:^9.0.1"
+    escalade: "npm:^3.1.1"
+    get-caller-file: "npm:^2.0.5"
+    string-width: "npm:^7.2.0"
+    y18n: "npm:^5.0.5"
+    yargs-parser: "npm:^22.0.0"
+  checksum: 10c0/bf290e4723876ea9c638c786a5c42ac28e03c9ca2325e1424bf43b94e5876456292d3ed905b853ebbba6daf43ed29e772ac2a6b3c5fb1b16533245d6211778f3
+  languageName: node
+  linkType: hard
+
 "yocto-queue@npm:^0.1.0":
   version: 0.1.0
   resolution: "yocto-queue@npm:0.1.0"
@@ -25294,9 +22636,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"zod@npm:^3.25.76":
+  version: 3.25.76
+  resolution: "zod@npm:3.25.76"
+  checksum: 10c0/5718ec35e3c40b600316c5b4c5e4976f7fee68151bc8f8d90ec18a469be9571f072e1bbaace10f1e85cf8892ea12d90821b200e980ab46916a6166a4260a983c
+  languageName: node
+  linkType: hard
+
+"zod@npm:^4.3.6":
+  version: 4.4.3
+  resolution: "zod@npm:4.4.3"
+  checksum: 10c0/7ea31b558e88f9faf44f31dd185e2e1cbf51fed3081787fb96cc2534749b50c0acfc6da7f0922a7353ed092dd358c7d50c28ea96c94d04af64191bd33152eca3
+  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, zwitch@npm:^2.0.4":
+  version: 2.0.4
+  resolution: "zwitch@npm:2.0.4"
+  checksum: 10c0/3c7830cdd3378667e058ffdb4cf2bb78ac5711214e2725900873accb23f3dfe5f9e7e5a06dcdc5f29605da976fc45c26d9a13ca334d6eea2245a15e77b8fc06e
+  languageName: node
+  linkType: hard