diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..c28e8bd
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,29 @@
+name: ci
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v7
+      - uses: pnpm/action-setup@v6
+      - uses: actions/setup-node@v7
+        with:
+          node-version: 24
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - uses: actions/cache@v6
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ runner.os }}-${{ hashFiles('pnpm-workspace.yaml') }}
+      - run: pnpm -F @thinkbuff/figma-react exec playwright install --with-deps chromium
+      - run: pnpm build
+      - run: pnpm check
+      - run: pnpm typecheck
+      - run: pnpm test
+      - name: generated theme css is committed
+        run: git diff --exit-code -- packages/theme/src/css/
diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
new file mode 100644
index 0000000..b9a1919
--- /dev/null
+++ b/.github/workflows/pages.yml
@@ -0,0 +1,37 @@
+name: pages
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - uses: actions/checkout@v7
+      - uses: pnpm/action-setup@v6
+      - uses: actions/setup-node@v7
+        with:
+          node-version: 24
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm pages:build
+      - uses: actions/configure-pages@v6
+      - uses: actions/upload-pages-artifact@v5
+        with:
+          path: site/figma
+      - id: deployment
+        uses: actions/deploy-pages@v5
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
new file mode 100644
index 0000000..f61c198
--- /dev/null
+++ b/.github/workflows/release.yml
@@ -0,0 +1,52 @@
+name: release
+
+on:
+  push:
+    tags: ['v*']
+
+permissions:
+  contents: write # create the GitHub release
+  id-token: write # npm provenance / trusted publishing
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v7
+      - uses: pnpm/action-setup@v6
+      - uses: actions/setup-node@v7
+        with:
+          node-version: 24
+          cache: pnpm
+
+      # A mistyped tag publishes the wrong version; refuse early.
+      - name: tag matches package version
+        run: |
+          pkg=$(node -p "require('./package.json').version")
+          [ "$GITHUB_REF_NAME" = "v$pkg" ] || {
+            echo "::error::tag $GITHUB_REF_NAME does not match package.json version v$pkg"
+            exit 1
+          }
+
+      - run: pnpm install --frozen-lockfile
+      - uses: actions/cache@v6
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ runner.os }}-${{ hashFiles('pnpm-workspace.yaml') }}
+      - run: pnpm -F @thinkbuff/figma-react exec playwright install --with-deps chromium
+      - run: pnpm check
+      - run: pnpm typecheck
+      - run: pnpm test
+      - run: pnpm build
+
+      # Auth is npm trusted publishing (OIDC) — no token needed.
+      - name: publish to npm
+        run: pnpm -r publish --provenance --no-git-checks
+
+      - name: create github release
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          ver="${GITHUB_REF_NAME#v}"
+          awk -v v="$ver" '$0=="## v"v{f=1;next} f&&/^## /{exit} f' CHANGELOG.md > notes.md
+          gh release create "$GITHUB_REF_NAME" --notes-file notes.md --verify-tag
diff --git a/.gitignore b/.gitignore
index c0a6bd3..298216b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -51,3 +51,17 @@ coverage
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache
+
+# storybook static build output
+storybook-static
+
+# assembled github pages site (scripts/pages.ts)
+site/
+.vitest
+
+# Devin local config
+.devin/*.local.json
+
+# Local Design file working-copy links and component audits
+docs/figma-ui3-design.md
+docs/audit/
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..e34b6d8
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "vitest.explorer",
+    "oxc.oxc-vscode",
+    "antfu.pnpm-catalog-lens",
+    "bradlc.vscode-tailwindcss"
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 350aa46..7aa1034 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,32 +1,32 @@
 {
-  "editor.formatOnSave": false,
+  "editor.formatOnSave": true,
+  "editor.formatOnSaveMode": "file",
+  "editor.defaultFormatter": "oxc.oxc-vscode",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit",
+    "source.fixAll.oxc": "explicit",
     "source.organizeImports": "never"
   },
-  "eslint.useFlatConfig": true,
-  "eslint.workingDirectories": [
-    {
-      "pattern": "./apps/*/"
-    },
-    {
-      "pattern": "./packages/*/"
-    }
-  ],
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact"
-  ],
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "cSpell.words": [
-    "onbrand",
-    "oncomponent",
-    "ondanger",
-    "ondisabled",
-    "oninverse",
-    "onselected",
-    "onwarning"
-  ]
+  "editor.quickSuggestions": {
+    "strings": "on"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  },
+  "[yaml]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  },
+  "explorer.fileNesting.enabled": true,
+  "explorer.fileNesting.patterns": {
+    "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .oxlint*, oxlint*, .oxfmt*, oxfmt*, .prettier*, prettier*, .editorconfig",
+    "tsconfig.json": "tsconfig.*.json, env.d.ts, *.tsbuildinfo",
+    "vite.config.*": "jsconfig*, vitest.config.*, playwright.config.*"
+  },
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "tailwindCSS.classAttributes": ["class", "className"],
+  "tailwindCSS.classFunctions": ["cn", "cva", "clsx", "addClassName"]
 }
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..d7a107a
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,90 @@
+# AGENTS.md
+
+Component library for Figma/FigJam plugin UIs: `packages/react` (React + Base UI
++ Tailwind v4) over shared tokens in `packages/theme`. `playground/` is a
+consumer smoke test. Layering, token rules, naming and release policy:
+`docs/architecture.md`; decisions in `docs/adr/`; vocabulary in `GLOSSARY.md`.
+Per-component design audits live in `docs/audit/` (gitignored, local only).
+
+## Layout
+
+- Tests live in `packages/<pkg>/tests/` mirroring `src/` (e.g.
+  `src/components/x/x.test.tsx` → `tests/components/x/x.test.tsx`); shared
+  helpers in `packages/react/tests/test-utils/`; never colocate tests in `src/`.
+- React tests import sources via the `~` alias (`~/components/x/x`); theme and
+  utils tests use relative `../src/...` paths.
+
+## Verify
+
+- `pnpm test` — unit + browser tests.
+- `pnpm test:visual` — pixel-exact screenshot suite (207 baselines). CI does not
+  run it; always run locally before finishing UI work.
+- `pnpm typecheck`, `pnpm check`, `pnpm build`.
+- `pnpm deps` — taze interactive dependency updates (`-r -I -l`).
+- `pnpm -F @thinkbuff/figma-react build-storybook` after component changes.
+
+## Visual tests
+
+- Baselines: `packages/react/tests/visual/__screenshots__/*-chromium-darwin.png`.
+  `pnpm test:visual:update` rewrites them — inspect every changed image before
+  committing; an update bakes whatever rendered, including bugs.
+- Vite can serve stale styles: a "no diff" result may be a cached render, not a
+  real match. The vrt scripts clear `node_modules/.vite` first. To verify a
+  suspicious result, dump computed styles:
+  `VRT_PROBE="<story id>" pnpm -F @thinkbuff/figma-react probe`.
+- `pnpm vrt:diff -- [vitest args]` snapshots baselines, re-runs the update and
+  lists which shots changed (before-copies under `$TMPDIR/figma-vrt-diff/`).
+- An update run can rewrite PNGs byte-differently with identical pixels; compare
+  decoded pixels against `HEAD` with PIL
+  `ImageChops.difference(a.convert('RGB'), b.convert('RGB')).getbbox()` (RGBA
+  `getbbox()` only checks alpha) and `git restore` the pixel-identical ones
+  before committing.
+- The comparator is pixelmatch with `threshold: 0` — strict, any changed pixel
+  counts.
+
+## Theme (`packages/theme`)
+
+- Token values live only in `tokens/*.json`. `tokens/colors/*`, `sizing.json`
+  and `typography.json` come from `pnpm tokens:import <dir>` (a Figma "Export
+  modes" folder; copy it out of `~/Downloads` first — the sandbox can't read
+  it); `elevation.json` and `extensions.json` are hand-maintained. Never edit
+  imported files by hand unless the Design file can't be exported.
+- `src/css/**` is generated by `pnpm generate:css` — edit `tokens/` or
+  `src/theme/`, never the output. CI fails on uncommitted drift.
+- Styles resolve through built artifacts: `styles.css` imports the theme's
+  `dist/css` and scans `packages/react/dist` via `@source`. After adding a
+  utility or changing classes, rebuild (`pnpm build`) or VRT/Storybook renders
+  stale CSS with silently missing rules.
+- `--figma-color-*` values are injected by the Figma editor at runtime
+  (`themeColors: true`); see `docs/figma-runtime-colors.md` to extract them.
+- Register every new utility family in `packages/react/src/utils/cn.ts`
+  (tailwind-merge groups) or `cn()` merges it into the wrong group.
+- Elevation/shadow variables live in the per-theme blocks (`.figma-light`,
+  `.figma-dark`, `.figjam`), not `@theme`, so nested `.figma-dark` resolves dark
+  values.
+- Design reference: the UI3 Design file (official community file linked in
+  `docs/architecture.md` §1). Match component sets by page and set name, never
+  by node id; working-copy links live in the gitignored
+  `docs/figma-ui3-design.md`.
+
+## Components (`packages/react`)
+
+- Base UI conventions: `render` prop (never `asChild`), `aria-expanded` for
+  open-state styling, `addClassName` for callback classNames, `cn()` to merge.
+- Controlled `Tabs.Root value` scrolls the tab list to the end on mount (Base UI
+  composite scrolls the active item into view). Prefer `defaultValue` unless
+  external state control is required.
+- Prefer canonical Tailwind forms (`data-popup-open`, `inset-0.5`,
+  `-top-1.25`) over bracket variants and arbitrary values.
+- Component styles are cva variants in `<name>-variants.ts` (or inline classes)
+  built only from Utility contract classes; `packages/react/styles.css`
+  `@layer components` is only for what cva cannot express (keyframes,
+  third-party DOM).
+
+## Commits
+
+- Conventional Commits (commitlint enforced); pre-commit runs `vp check --fix`
+  on staged files.
+- File names are kebab-case (`unicorn/filename-case` is an error); conventional
+  uppercase files like `README.md` and `AGENTS.md` are the exception.
+- Do not kill listeners on dev ports (Storybook uses 6006) you did not start.
diff --git a/CHANGELOG.md b/CHANGELOG.md
index fd8d9f2..b0dad18 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,133 @@
 # Changelog
 
 
+## v0.1.0
+
+### ⚠️ Breaking Changes
+
+#### Styling: UnoCSS → Tailwind CSS v4
+
+- `@thinkbuff/figma-theme/unocss` is removed. The theme now ships Tailwind v4 CSS (`@thinkbuff/figma-theme/css/*`) generated from the Figma tokens; `@thinkbuff/figma-theme/colors` is unchanged.
+- `@thinkbuff/figma-react` ships `styles.css`, so consumers only need:
+  ```css
+  @import 'tailwindcss';
+  @import '@thinkbuff/figma-react/styles.css';
+  ```
+- Utilities follow the theme's utility contract (`text-figma-sm`, `rounded-figma-sm`, `bg-figma-*`, …). Dark mode is `.figma-dark`; FigJam is `.figjam`.
+- Components use inline SVG icons, so no icon preset is needed.
+
+#### `Button` API rework
+
+- `variant` + `color` collapsed into a single `variant`: `primary`, `secondary`, `destructive`, `secondary-destructive`, `inverse`, `success`, `figjam`, `link`, `link-danger`, `ghost`. `size="wide"` replaces `fullWidth`; new `icon` slot prop.
+
+| Before | After |
+| --- | --- |
+| `variant="solid" color="primary"` (default) | `variant="primary"` |
+| `variant="solid" color="danger"` | `variant="destructive"` |
+| `variant="solid" color="success"` | `variant="success"` |
+| `variant="solid" color="inverse"` | `variant="inverse"` |
+| `variant="outline"` / `color="secondary"` | `variant="secondary"` |
+| `variant="outline" color="danger"` | `variant="secondary-destructive"` |
+| `variant="link" color="danger"` | `variant="link-danger"` |
+| `variant="link"` | `variant="link"` |
+| `variant="ghost"` | `variant="ghost"` |
+| `fullWidth` | `size="wide"` |
+
+#### `ActionIconSplit` added
+
+- New compound component for the UI3 `Button icon split` set (41x24 small / 49x32 large): `ActionIconSplit` root plus `Button` (primary action) and `Chevron` (16px trigger half) subparts. Each half supports `render`, `aria-expanded` fills follow the dialog-toggle spec.
+
+#### `ActionIcon` / `Toggle` API rework
+
+- `ActionIcon`: `activeAppearance` removed (the on state now always follows the UI3 dialog-toggle spec); new `variant="secondary"` for the stroked `Button icon` variant.
+- `Toggle`: `stroke` replaced by `variant` — `'highlighted'` (default, previous fill behavior), `'default'` (icon-swap only, no pressed fill), `'secondary'` (the former `stroke` look with the `bordertranslucent` token).
+
+#### Menu items: UI3 tokens + `ItemSwitch`
+
+- `DropdownMenu.ItemSwitch` and `ContextMenu.ItemSwitch` added: a `menuitemcheckbox` row with a Switch cell on the leading side (the spec's `Menu row/Toggle`). Clicking the row toggles the switch; the menu stays open.
+- Menu row highlight now uses `bg-menu-selected` (was `bg-selected-strong` — visibly wrong in FigJam dark). `ItemBadge` uses `bg-toolbar` + `text-onbrand`; `ItemCheck` renders the spec's plain 16px check icon instead of a filled chip. Disabled items unify on `text-menu-disabled` / `icon-menu-disabled`.
+
+#### Fields: UI3 variants and states
+
+- `Select.Trigger`: new `stroke` prop (`Stroke=False` renders borderless on `bg-default`); focus and open states are a single `border-selected` swap (the extra outline ring is removed); the open value shows the spec's `texthighlight` block; the `icon` lead is a flush 24px cell, and on `size="large"` a 32px cell holding the spec's 24px `bg-secondary` well.
+- `VariableChip` is 16px tall (was 18px) and uses `border-disabled` when disabled.
+- New `VariableCell`: the spec's `Variable Cell` — a 24px bordered row with the variable icon cell plus a label.
+- `ValueField.NumericSelect`: the dropdown segment uses `bg-selected` + `border-selected` while open (the spec's selected-chevron state).
+
+#### Slider and Swatch: UI3 spec variants
+
+- `Slider`: new `modified` prop renders the spec's `Stroke (Modified)` thumb (`bg-default` knob, `icon-onbrand` ring, elevation-300). Hue/opacity thumbs now embed the spec's 12px `_Chit 24` square instead of a 6px disc. Disabled thumb uses `bg-disabled` (was `bg-disabled-secondary`); the track and gradient-chit rings use the `bordertranslucent` token (were hardcoded); stepper ticks use `icon-tertiary` / `icon` (were `black/30` / `black/85`).
+- `Swatch`: new `type="opacity"` (left half solid, right half at ~24% alpha — the spec's `Type=Opacity`) and `shape="circle"` (the spec's 16px round chit). The inset ring now uses `bordertranslucent` (same values as the previous hardcoded hexes — no visual change).
+
+#### Avatar and Badge: UI3 spec variants
+
+- `Avatar`: initials fills now bind to the `multiplayer*` / `textonmultiplayer*` tokens (were hardcoded light-theme hexes — dark themes were visibly wrong). Colors renamed to spec names (`magenta`→`pink`, `slate`→`grey`); new `overflow-unread` / `overflow-read` colors for "+N" avatars; new `disabled` prop (`bg-tertiary` + `text`); `shape="square"` uses `rounded-figma-sm` at `size="small"` (spec r=2).
+- `Badge`: `size="small"` (14px) removed — no such badge in the spec; `size="large"` added (16px with 13px text — the spec's "Badge large"). New `variant="alt"` for the "Badge small alt" subtle-fill family (`default`/`count`/`count-inactive`/`strong`); new colors `figjam`, `menu`, `merged`, `archived`; the `warning` strong fill uses `icon-warning` per spec. New `BadgeDot` (the spec's "Badge Dot": 9px `bg-default` pill + 5px `bg-brand` dot).
+
+#### Radio, Tabs, Toast, Visual Bell, ScrollArea: UI3 tokens and states
+
+- `Radio` button variant: default border now uses `bordertranslucent` (was opaque `border`).
+- `Tabs`: trigger gains the spec's `border-selected` focus ring; unselected hover uses `bg-hover` (same values, correct token).
+- `Toast`: surface uses `bg-menu` / `text-menu` tokens (same values); shadow upgraded to the spec's "LEGACY - HUD shadow" via new `shadow-figma-hud` utility.
+- `VisualBell`: `color="default"` is now the spec's light bell (`bg-default` + `text` + elevation-100) — replaces the dark `#2c2c2c` hardcoded fill. Action/dismiss edges use `bordertranslucent`; hover/active use the secondary-button transparent tokens.
+- `ScrollArea`: thumb uses the `scrollbar` token via new `bg-figma-scrollbar` utility (was `text-secondary`).
+
+#### Remaining UI3 audit items
+
+- `Switch`: `indeterminate` renders the spec's `icon.16.mixed` glyph (16px, `icon-onbrand`; `icon-disabled` when disabled) instead of a hand-drawn bar.
+- `Input`/`Textarea`: disabled state follows the spec per size — `size="default"` keeps `bg-default` + `border-default` stroke; `size="large"` stays `bg-secondary` with no stroke.
+- Disabled colors aligned to the spec's tokens where values are identical: `text-tertiary` on `Select`, `ToggleGroup` items and labels, and all ValueField elements; `border-default` on ValueField outlines.
+- `LinkTooltip.Action`: new `strong` prop for the spec's `body.medium.strong` CTA weight (w550).
+- `Separator`: documented per-surface divider tokens — menu/tooltip surfaces should pass `bg-figma-border-menu`/`bg-figma-border-tooltip`.
+- `AlertDialog` story CTA gap aligned to the Modal footer's 8px rhythm.
+
+#### Tokens: generated from `packages/theme/tokens/`
+
+- `@thinkbuff/figma-theme/colors` no longer exports `BaseThemeCSSVariables`/`BaseThemeCSSVariableKey` — each mode map is complete on its own.
+- New exports: `FigJamDarkThemeCSSVariables`, `DevModeLightThemeCSSVariables`, `DevModeDarkThemeCSSVariables`, `SlidesLightThemeCSSVariables`, `SlidesDarkThemeCSSVariables` (+ types).
+- Token values are now generated from `packages/theme/tokens/` via `pnpm tokens:import`; the FigJam block no longer claims `:root` (that selector is Figma light only).
+
+#### Primitives: Radix UI → Base UI (`@base-ui/react`)
+
+- `asChild` → `render` everywhere (e.g. `<Dialog.Trigger render={<Button />} />`). Use `nativeButton={false}` when rendering a non-button element through `Button`.
+- Change callbacks receive a second `eventDetails` argument (`onValueChange`, `onCheckedChange`, `onPressedChange`, `onOpenChange`). Dismissal is cancelled via `eventDetails.cancel()` instead of `event.preventDefault()` on `onPointerDownOutside` / `onEscapeKeyDown` / `onInteractOutside` (removed).
+- State attributes follow Base UI: `data-checked`, `data-unchecked`, `data-pressed`, `data-active`, `data-popup-open`, `data-highlighted`, `data-starting-style` / `data-ending-style`. Open triggers are styled through `aria-expanded`.
+- Overlays (`Popover`, `Tooltip`, `DropdownMenu`, `Select`) position through a Base UI Positioner: `avoidCollisions` and `updatePositionStrategy` are removed, `collisionPadding` defaults to 5, and `sideOffset` measures to the popup edge (no automatic arrow height).
+- `Checkbox`: `checked="indeterminate"` → `indeterminate` prop.
+- `ToggleGroup`: `type="single" | "multiple"` → `multiple`; `value` / `defaultValue` are always arrays.
+- `Slider`: `onValueCommit` → `onValueCommitted`; `minStepsBetweenThumbs` → `minStepsBetweenValues`; `inverted` removed; `SliderRoot` wraps a Base UI `Control`.
+- `ScrollArea`: `type` / `scrollHideDelay` removed; the scrollbar shows while hovering or scrolling.
+- `Tabs`: `activationMode` → `activateOnFocus` (default `false`: arrow keys move focus without selecting); `forceMount` → `keepMounted`; disabled tabs stay focusable.
+- `Tooltip`: `delayDuration` → `delay`, `skipDelayDuration` → `timeout`, `disableHoverableContent` → `disableHoverablePopup`; `delay` / `closeDelay` live on the trigger.
+- `DropdownMenu`: `Item onSelect` → `onClick`; `Label` must be inside `Group` / `RadioGroup`; checkbox and radio items keep the menu open.
+- `Select`: pass `items` to `Root` so the trigger shows labels; `position` → `alignItemWithTrigger`; `Item asChild` removed; the empty value is `null`; `Label` must be inside `Group`; focus returns to the trigger on close.
+- `Dialog` / `AlertDialog` / `Sheet`: `Overlay` renders Base UI `Backdrop`; `AlertDialog.Action` and `AlertDialog.Cancel` both close the dialog.
+- `Label` is a native `<label>`.
+- `react` / `react-dom` peer range is now `^19`: components forward `ref` as a prop, which React 18 cannot pass to function components. Node `>=24.21.0`.
+
+#### Theme tokens: UI3 sync
+
+- Spacing renumbered to the UI3 scale: `--figma-space-5` is now 32px (was 20px), `--figma-space-6` is now 40px (was 28px), and `--figma-space-7` is removed. Utilities such as `p-figma-5` / `gap-figma-6` follow the new values.
+
+#### Components: UI3 look
+
+- Components are restyled to Figma's UI3 against the official [UI3 Design file](https://www.figma.com/community/file/1486123838948777078/ui3-figmas-ui-kit) and its exported variables. Layouts may shift: `Input`, `Select` triggers, `Tabs` and `ToggleGroup` items are 24px tall (were 32px), `Checkbox` and `Radio` are 16px, and `Switch` is 32×16.
+- Solid buttons have no hover background; focus is a 1px outline plus a 1px ring. Fields are outline-only on `bg-secondary`. Menus, popovers and dialogs use 13px radius and elevation shadows; menu highlight is `bg-menu-selected`.
+- `ActionIcon` open state (`aria-expanded`) is now subtle (`bg-selected`) instead of solid brand.
+- Inline `RadioGroup` items are 20px apart (were 8px).
+
+Per-component details, behavior notes and QA checklists live in `docs/migration/`.
+
+### 🚀 Features
+
+- UI3 semantic typography utilities: `text-figma-body-{small,medium,large}` and `text-figma-heading-{small,medium,large}` set size, leading and tracking in one class; the `heading-*` variants also apply `font-weight: 550`. Matching `leading-figma-*` and `tracking-figma-*` utilities are available.
+- UI3 elevation shadows: `shadow-figma-elevation-{100..500}` plus semantic `shadow-figma-tooltip` / `shadow-figma-menu` / `shadow-figma-modal` (elevation 300/400/500). Elevations are theme-scoped, so `.figma-dark` gets the dark values (inset highlights) even on nested elements; `shadow-figma-slider` is unchanged.
+
+### 🧹 Chore
+
+- Toolchain moved to Vite+ (`vp check` / `vp test` / `vp pack`), Oxlint and Oxfmt, pnpm catalogs, Storybook 10.
+- Added Vitest unit, browser-mode behavior and visual regression tests.
+
 ## v0.0.8
 
 [compare changes](https://github.com/thinkbuff/figma/compare/v0.0.7...v0.0.8)
diff --git a/GLOSSARY.md b/GLOSSARY.md
new file mode 100644
index 0000000..541c585
--- /dev/null
+++ b/GLOSSARY.md
@@ -0,0 +1,41 @@
+# Thinkbuff Figma
+
+Libraries for building Figma and FigJam plugin and widget UIs that look native to the host editor.
+
+## Language
+
+**Editor theme**:
+The visual language of a host editor: Figma, FigJam, Dev Mode, or Slides, each with a light and a dark mode.
+_Avoid_: skin, palette
+
+**Design file**:
+Figma's published UI3 community file of components, styles, and variables; private copies of it are working copies, not separate references. It is the single reference for every Theme token value and for component appearance.
+_Avoid_: UI Kit, Figma Kit, figma-kit, design system
+
+**Theme token**:
+A named design value (color, font size, radius, spacing) taken from the host editor's own design system.
+_Avoid_: design variable, CSS variable (that is how a token is delivered, not what it is)
+
+**Elevation**:
+A shadow level (100 to 500) expressing how far an element floats above the surface beneath it, from shapes up to modals. Each level has its own light and dark mode value.
+_Avoid_: shadow size, depth
+
+**Primitive color**:
+A raw palette value in the Design file (e.g. blue 300) that semantic Theme tokens alias. It is never a Theme token itself.
+_Avoid_: base color, palette token
+
+**Core component**:
+A component that corresponds one-to-one to a component set in the Design file.
+_Avoid_: base component, primitive
+
+**Pattern component**:
+An editor-specific component with no component set of its own in the Design file, composed from Core components and matched against the screens that use it.
+_Avoid_: composite, widget, business component
+
+**Color scope**:
+The role a color token plays: background, text, border, or icon. The same name in two scopes is two different tokens.
+_Avoid_: color category, color type
+
+**Utility contract**:
+The set of class names the theme package guarantees to consumers, shared by the React and Vue component libraries.
+_Avoid_: preset, class API
diff --git a/LICENSE b/LICENSE
index 40f98de..e2c2f0f 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Thinkbuff
+Copyright (c) 2024-PRESENT Thinkbuff
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/NOTICE.md b/NOTICE.md
new file mode 100644
index 0000000..6e0a3e0
--- /dev/null
+++ b/NOTICE.md
@@ -0,0 +1,56 @@
+# Third-Party Notices
+
+Portions of this project were originally adapted from the following
+open-source works.
+
+## figma-kit
+
+<https://github.com/tigranpetrossian/figma-kit>
+
+Icon path data, the named-color table, `addClassName`,
+`useSelectOnInputClick`, menu styling, and the ValueField family were
+originally adapted from figma-kit.
+
+## MUI Base UI
+
+<https://github.com/mui/base-ui>
+
+The ValueField scrubber derives from Base UI's `NumberFieldScrubArea`
+(via figma-kit).
+
+## Radix UI Primitives
+
+<https://github.com/radix-ui/primitives>
+
+`useControllableState`, `useComposedRefs`, and `createContext` were
+originally adapted from Radix UI Primitives.
+
+---
+
+All of these works are distributed under the MIT License:
+
+```
+MIT License
+
+Copyright (c) 2024 Tigran Petrossian (figma-kit)
+Copyright (c) 2019 Material-UI SAS (MUI Base UI)
+Copyright (c) 2022 WorkOS (Radix UI Primitives)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
diff --git a/README.md b/README.md
index 5156df6..d1b739e 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,10 @@
 
 - [Eleven](https://github.com/eteplus)
 
+## Acknowledgements
+
+Third-party attributions are listed in [NOTICE.md](./NOTICE.md).
+
 ## License
 
 [MIT](./LICENSE) License &copy; 2024-PRESENT [Thinkbuff](https://github.com/thinkbuff)
diff --git a/changelog.config.ts b/changelog.config.ts
index 0d5c841..68885a1 100644
--- a/changelog.config.ts
+++ b/changelog.config.ts
@@ -1,16 +1,16 @@
 export default {
   types: {
-    feat: { title: "🚀 Features", semver: "minor" },
-    perf: { title: "🔥 Performance", semver: "patch" },
-    fix: { title: "🐛 Fixes", semver: "patch" },
-    refactor: { title: "🔨 Refactors", semver: "patch" },
-    docs: { title: "📖 Documentation", semver: "patch" },
-    build: { title: "📦 Build", semver: "patch" },
-    types: { title: "📝 Types", semver: "patch" },
-    chore: { title: "🧹 Chore" },
-    examples: { title: "📚 Examples" },
-    test: { title: "✅ Tests" },
-    style: { title: "🎨 Styles" },
-    ci: { title: "🤖 CI" },
+    feat: { title: '🚀 Features', semver: 'minor' },
+    perf: { title: '🔥 Performance', semver: 'patch' },
+    fix: { title: '🐛 Fixes', semver: 'patch' },
+    refactor: { title: '🔨 Refactors', semver: 'patch' },
+    docs: { title: '📖 Documentation', semver: 'patch' },
+    build: { title: '📦 Build', semver: 'patch' },
+    types: { title: '📝 Types', semver: 'patch' },
+    chore: { title: '🧹 Chore' },
+    examples: { title: '📚 Examples' },
+    test: { title: '✅ Tests' },
+    style: { title: '🎨 Styles' },
+    ci: { title: '🤖 CI' },
   },
-}
+};
diff --git a/docs/adr/0001-figma-theme-single-source.md b/docs/adr/0001-figma-theme-single-source.md
new file mode 100644
index 0000000..ff79a77
--- /dev/null
+++ b/docs/adr/0001-figma-theme-single-source.md
@@ -0,0 +1,14 @@
+# This repo is the single publisher of @thinkbuff/figma-theme
+
+`@thinkbuff/figma-theme` existed in two places with the same package name: this repo (UnoCSS preset, published as 0.0.x) and the `thinkbuff/platform` monorepo (Tailwind CSS v4 rewrite with generated utilities and a token sync pipeline, source-only, never published). We port the platform implementation into `packages/theme` here and make this repo the only place the package is built and published; platform will later consume the published package instead of its own copy. The UnoCSS preset export (`./unocss`) is dropped, not kept alongside, so the theme has one utility contract shared by the React and Vue component libraries.
+
+## Considered Options
+
+- Rewrite a Tailwind theme independently in this repo: rejected, would fork the utility contract from platform's Vue `figma-ui`.
+- Depend on platform's package: rejected, it ships TypeScript sources with no build and lives in a private-app monorepo.
+- Keep both UnoCSS and Tailwind exports: rejected, doubles the surface to maintain and test for no current consumer.
+
+## Consequences
+
+- Until platform is switched over, the two copies can drift; token changes must be made here first.
+- Removing `./unocss` is a breaking change for existing consumers (released as 0.1.0).
diff --git a/docs/adr/0002-runtime-variable-names-over-design-file-names.md b/docs/adr/0002-runtime-variable-names-over-design-file-names.md
new file mode 100644
index 0000000..25cf05e
--- /dev/null
+++ b/docs/adr/0002-runtime-variable-names-over-design-file-names.md
@@ -0,0 +1,12 @@
+# Theme tokens keep the runtime `--figma-color-*` names, not the Design file's `--color-*`
+
+The Design file's exported variables declare their web names as `--color-*` (e.g. `var(--color-text)`), while the Figma editor injects the same colors into a plugin iframe as `--figma-color-*` when the plugin calls `figma.showUI(html, { themeColors: true })`. We take token values from the Design file but publish them under the runtime names, so a plugin built on this library follows the live editor theme for free: the injected variables simply override ours.
+
+## Considered Options
+
+- Adopt the Design file's `--color-*` names: rejected, the editor never injects them, so plugins would freeze on our build-time values and drift from the editor.
+- Publish both names: rejected, doubles the public surface for no consumer.
+
+## Consequences
+
+- The token generator maps every `--color-<name>` to `--figma-color-<name>`; a Design file variable with no runtime counterpart still gets the `--figma-color-` prefix and simply never receives a runtime override.
diff --git a/docs/adr/0003-normalized-token-source.md b/docs/adr/0003-normalized-token-source.md
new file mode 100644
index 0000000..c43d773
--- /dev/null
+++ b/docs/adr/0003-normalized-token-source.md
@@ -0,0 +1,10 @@
+# Theme tokens come from a normalized JSON source, not the raw Design file export
+
+Theme token values are taken from the Design file's variables, but the raw DTCG export (one file per mode, ~15k lines each, mostly `com.figma.*` metadata) is not committed. `pnpm tokens:import <dir>` normalizes an export into compact per-mode JSON under `packages/theme/tokens/` (name → value or alias, plus description; letter spacing converted from Figma's percent to em). That JSON is the only hand-maintained token source; every TS map and CSS file in the theme is generated from it. Because the source is small and readable, it can be edited by hand or fed from any route (native "Export modes", a Plugin API script, the runtime `#figma-style` dump), so updates never depend on a particular Figma seat or plan.
+
+Primitive colors (the Design file's raw palette) are resolved at generation time and never published as CSS variables or utilities: the editor does not inject them at runtime, so a component using one would stop following the live Editor theme.
+
+## Considered Options
+
+- Commit the raw export: rejected, unreviewable diffs and noise.
+- Keep hand-written TS maps: rejected, every Design file update becomes manual transcription across eight modes.
diff --git a/docs/adr/0004-flat-component-directories.md b/docs/adr/0004-flat-component-directories.md
new file mode 100644
index 0000000..6191c5a
--- /dev/null
+++ b/docs/adr/0004-flat-component-directories.md
@@ -0,0 +1,3 @@
+# Component directories stay flat even though components are layered
+
+Components are classified as Core (one-to-one with a Design file component set) or Pattern (editor-specific compositions of Core components), but they all live in `packages/react/src/components/<kebab-name>/` rather than `core/` and `patterns/` subfolders. The published subpath exports (`@thinkbuff/figma-react/<name>`) map directly onto that folder, and a component may move between layers as the Design file evolves; nesting would make either change a breaking import path. The layer is expressed in the Storybook title (`Core/Button`, `Pattern/ValueField`) and the component inventory in `docs/architecture.md`.
diff --git a/docs/architecture.md b/docs/architecture.md
new file mode 100644
index 0000000..09affcd
--- /dev/null
+++ b/docs/architecture.md
@@ -0,0 +1,266 @@
+# Architecture
+
+How the libraries in this repo are layered, where design values come from, and
+the rules that keep components aligned with Figma's UI3 Design file. Terms in
+**bold** are defined in [GLOSSARY.md](../GLOSSARY.md); decisions with real
+trade-offs are recorded in [docs/adr/](./adr/).
+
+## 1. Sources of truth
+
+| What | Source | Notes |
+| --- | --- | --- |
+| Token values (color, spacing, radius, typography) | **Design file** variables | [UI3: Figma's UI Kit (Community)](https://www.figma.com/community/file/1486123838948777078/ui3-figmas-ui-kit). Work from a private working copy so Dev Mode is available; working-copy links stay local (`docs/figma-ui3-design.md`, gitignored). |
+| Elevation | Design file effect styles (`light/elevation-*`, `dark/elevation-*`) | Effect styles are not part of a variables export; see §3.1. |
+| Component appearance | Design file component sets, matched by page and set name | Never by node id: ids differ between working copies. |
+| Runtime colors | Figma editor (`themeColors: true`) | Overrides our values at runtime under the same names ([ADR 0002](./adr/0002-runtime-variable-names-over-design-file-names.md)). |
+
+Precedence when they disagree: Design file component set > Design file
+variables > user screenshots of the live editor. When the Design file
+contradicts itself (e.g. text style
+`heading.medium` is 11/25 while its variables say 15/25), variables win and the
+conflict is noted in the audit.
+
+## 2. Packages and layers
+
+```
+@thinkbuff/figma-theme      Theme layer: tokens, generated CSS, utility contract, preflight
+        ▲
+@thinkbuff/figma-react      Core components ─▶ Pattern components
+        ▲                   (both may use src/utils and src/icons)
+consumer plugin UI
+@thinkbuff/figma-utils      Plugin-side helpers (no UI); independent of the two above
+```
+
+| Layer | Contents | Rule |
+| --- | --- | --- |
+| Theme | `packages/theme` | Only place that knows token values. Exposes CSS variables and the **Utility contract**; no React. |
+| **Core component** | One per Design file component set (Button, Checkbox, Tabs, …) | Appearance and variant/size/state model mirror the component set. Built on a Base UI primitive when one exists. |
+| **Pattern component** | Editor-specific compositions with no set of their own (e.g. value-field) | Built from Core components and theme utilities; matched against the screens that use it. |
+| Internal | `src/utils`, `src/icons`, shared class modules such as `components/menu` | Not a component; not exported as a subpath. |
+
+Dependency rules: Pattern → Core is allowed, Core → Pattern is not; a component
+imports another component only through its `index.ts`; nothing in
+`packages/react` hard-codes a color, shadow or font value.
+
+## 3. Tokens
+
+### 3.1 Pipeline
+
+```
+Design file ──export / plugin / runtime dump──▶ pnpm tokens:import <dir>
+        ▼
+packages/theme/tokens/*.json        normalized, hand-editable, committed (the only token source)
+        ▼  pnpm generate:css
+packages/theme/src/theme/**         generated TS maps
+packages/theme/src/css/**           generated CSS (CI fails on drift)
+```
+
+- Raw DTCG exports are never committed ([ADR 0003](./adr/0003-normalized-token-source.md)).
+  The normalized files hold, per mode, `name → value | {alias}` plus
+  `description`; Figma metadata (variable ids, scopes) is dropped.
+- Import conversions: Figma letter spacing is a percentage (`0.5` = 0.5% of the
+  font size) and becomes `em`; numbers become `rem` except radius `full`
+  (`9999px`) and hairlines.
+- **Primitive colors** (`🎨` palette) are resolved during generation and never
+  emitted.
+- Published color tokens: every semantic Design file variable with a web code
+  syntax, except the editor-internal families `fullscreen/*`, `*desktop*`,
+  `special/code*` and `special/*inspect*`. Where the Design file binds an
+  excluded token, components use the published token with identical values in
+  all modes (e.g. `border-fs-selected-strong` → `border-selected-strong`).
+- Elevation lives in `tokens/elevation.json` (one entry per level and mode),
+  maintained by hand or by a Plugin API dump of the effect styles, because a
+  variables export does not contain effect styles.
+
+### 3.2 Naming
+
+| Design file | CSS variable | Utility examples |
+| --- | --- | --- |
+| color `--color-<name>` (code syntax) | `--figma-color-<name>` | `bg-figma-secondary`, `text-figma-brand`, `border-figma-selected` |
+| `Spacers/spacer-<n>` (0, 4, 8, 16, 24, 32, 40 px) | `--figma-space-<n>` | `p-figma-2`, `gap-figma-1` |
+| `Radius/radius-{small,medium,large,full}` (2, 5, 13, 9999) | `--figma-radius-{sm,md,lg,full}` | `rounded-figma-md` |
+| `body.{small,medium,large}[.strong]`, `heading.{small,medium,large}`, `heading.display` | `--figma-font-size-<style>`, `--figma-line-height-<style>`, `--figma-letter-spacing-<style>` | `text-figma-body-medium`, `font-figma-strong` |
+| `font.family.{default,mono,display}` | `--figma-font-family-{default,code,display}` | `font-figma`, `font-figma-code` |
+| effect style `elevation-<level>-*` | `--figma-elevation-<level>` | `shadow-figma-menu` (= 400) |
+
+Spacing and radius keep short names because the scales match the Design file
+one-to-one. The extra spacing steps `0.5`, `1.5`, `2.5` (2, 6, 12 px) are
+extension tokens with no Design file counterpart and are marked as such in the
+source. Typography uses the Design file names only (`text-figma-body-medium`,
+…); the line height and letter spacing come with the text utility, so there are
+no separate `leading-figma-*` / `tracking-figma-*` steps.
+
+### 3.3 Editor themes and modes
+
+The editor adds `figma-light` or `figma-dark` to `<html>`; the consumer adds the
+editor-type class from `figma.editorType`. Their combination selects one of
+eight modes. `:root` is Figma light.
+
+| Mode | Selector | Visual tests |
+| --- | --- | --- |
+| Figma light / dark | `:root`, `.figma-light` / `.figma-dark` | yes |
+| FigJam light / dark | `.figjam` / `.figjam.figma-dark` | yes |
+| Dev Mode light / dark | `.devmode` / `.devmode.figma-dark` | no (experimental) |
+| Slides light / dark | `.slides` / `.slides.figma-dark` | no (experimental) |
+
+Theme-scoped values (colors, elevation) live in these selector blocks, not in
+`@theme`, so nested scopes resolve correctly. `dark:` matches `.figma-dark`.
+The single-editor entries `css/figjam.css`, `css/devmode.css` and
+`css/slides.css` resolve their own editor's light mode at `:root` instead.
+
+### 3.4 Usage rules for components
+
+1. Colors, shadows, radii, font sizes come only from Utility contract classes.
+2. No arbitrary values that reach into variables
+   (`shadow-[0_0_0_1px_var(--figma-color-…)]`, `bg-[var(--…)]`). If a needed
+   value has no utility, add the token or utility to the theme first.
+3. Geometry (height, padding, gap) uses the Tailwind spacing scale where it
+   equals the Design file pixel value (`h-6` = 24px) or the `figma` spacing
+   tokens; arbitrary pixel values need a comment naming the Design file layer.
+4. Use the token the Design file binds, not a visually similar one
+   (`bordertranslucent` is not `border`).
+5. New utility families are registered in `packages/react/src/utils/cn.ts`.
+
+## 4. Naming and directory structure
+
+```
+packages/react/
+├── src/
+│   ├── components/<kebab-name>/
+│   │   ├── index.ts                 public surface of the component
+│   │   ├── <kebab-name>.tsx         component(s)
+│   │   ├── <kebab-name>-variants.ts cva definitions, when the component has variants
+│   │   └── <kebab-name>.stories.tsx title `Core/<Name>` or `Pattern/<Name>`
+│   ├── icons/                       inline SVG icons (`create-icon.tsx`)
+│   └── utils/                       cn, addClassName, shared hooks
+├── tests/                           mirrors src/ (never colocated)
+│   └── visual/__screenshots__/      pixel baselines
+└── styles.css                       theme import + @layer components escape hatch
+```
+
+- Directories stay flat regardless of layer ([ADR 0004](./adr/0004-flat-component-directories.md));
+  each directory is a subpath export (`@thinkbuff/figma-react/<kebab-name>`).
+- File names are kebab-case. Component names are PascalCase and keep their
+  established names where the Design file uses a different one (Select ↔
+  Dropdown, Toast ↔ Notifications); the mapping is in §7.
+- Core component props mirror the component set's properties: `Variant` →
+  `variant`, `Size` → `size`, `Disabled` → `disabled`, `Icon Lead` → an icon
+  slot. Interaction states (`State=Hover/Focused/Active`) are never props; they
+  come from `:hover`, `:focus-visible`, `:active`, `aria-*` and Base UI
+  `data-*` attributes. Prop values are the property values in kebab-case
+  (Button: `variant` = `primary | secondary | destructive |
+  secondary-destructive | inverse | success | figjam | link | link-danger |
+  ghost`).
+- `styles.css` `@layer components` is reserved for what cva cannot express
+  (keyframes, third-party DOM such as sonner).
+
+## 5. Reuse and extension
+
+Consumers extend components in exactly four ways:
+
+| Mechanism | Use |
+| --- | --- |
+| `className` | Merged last through `cn()` (tailwind-merge with the figma groups), so consumer classes win. |
+| `render` prop | Base UI element replacement (`<Dialog.Trigger render={<Button />} />`); never `asChild`. |
+| Compound parts | `Dialog.Root` / `Dialog.Title` …; each part forwards `ref` and props. |
+| Exported variants | `buttonVariants(...)` applies the same styling to a consumer element. |
+
+Theming is done only by overriding `--figma-*` CSS variables in a scope; there
+is no JavaScript theme configuration. Inside the library, Pattern components
+reuse Core components or their exported variants instead of copying classes.
+
+## 6. Versioning and release
+
+- The three packages are versioned in lockstep and released together with
+  changelogen (`pnpm release`). No changesets.
+- Releasing: `pnpm release` drafts the changelog and bumps versions; review,
+  commit, push, then tag `vX.Y.Z` and push the tag — the tag is the only
+  release trigger. `.github/workflows/release.yml` verifies the tag equals the
+  root package version, reruns check/typecheck/test/build, publishes all
+  packages to npm with provenance via trusted publishing (OIDC, no stored
+  token), and creates the GitHub release.
+- The Storybook + playground site (`pnpm pages:build`) deploys to GitHub Pages
+  on pushes to `main` via `.github/workflows/pages.yml` — the site tracks
+  latest `main`, not the latest release.
+- Public API: `--figma-*` variable names, Utility contract class names,
+  component props and compound parts, and subpath exports.
+- Before 0.1.0 is published, API changes are made directly. From 0.1.0 on:
+  any change to the public API is breaking; while below 1.0 a breaking change
+  bumps the minor version, a fix the patch version. A rename keeps the old name
+  as a deprecated alias for one minor release, and the CHANGELOG lists old → new.
+- Token value changes that follow the Design file are fixes, not breaking
+  changes.
+
+## 7. Component inventory
+
+From the component audits (`docs/audit/`, local only). "—" means the Design
+file has no component set; such components follow the token rules and the
+nearest evidence noted in their audit.
+
+| Component | Layer | Design file page / component set |
+| --- | --- | --- |
+| avatar | Core | Avatars / Avatar |
+| badge | Core | Badges / Badge small, Badge small alt, Badge large, Badge Dot |
+| button | Core | Buttons / Button |
+| action-icon | Core | Buttons / Button icon |
+| action-icon-split | Core | Buttons / Button icon split |
+| toggle | Core | Buttons / Button icon toggle, Button icon dialog toggle |
+| checkbox | Core | Checkboxes / Checkbox |
+| radio | Core | Radio Buttons / Radio button |
+| switch | Core | Switches / Switch |
+| select | Core | Dropdowns / Dropdown |
+| input | Core | Inputs / Text input (Single Line) |
+| textarea | Core | Inputs / Text input (Multi Line) |
+| swatch | Core | Inputs / _Chit 24, Color input |
+| variable-chip | Core | Inputs / _Chip variable, Variable Cell |
+| segmented-control | Core | Segmented Control / Segmented control |
+| toggle-group | Core | Segmented Control / Segmented control (multi-select extension) |
+| slider | Core | Sliders / Slider |
+| tabs | Core | Tabs / Tabs, _Tab |
+| tooltip | Core | Tooltips / Tooltip |
+| value-field | Pattern | Inputs / Numeric input, Numeric input multi, Color input, Combo input |
+| dropdown-menu, context-menu | Pattern | Menus / Menu row/*, Menu example (shared classes in internal `menu`) |
+| link-tooltip | Pattern | Tooltips / Tooltip link |
+| dialog, alert-dialog | Pattern | Modals, Dialogs / Modal header, Modal footer, Modal body/Row |
+| toast | Pattern | Notifications / Notifications |
+| visual-bell | Pattern | Visual Bells / Bell |
+| sheet, popover, scroll-area, separator, label | — | — |
+
+Design file sets with no component yet: Combo input (as a standalone input),
+Numeric input multi, Menu multi-select, Bell Multiplayer, and the Comments
+page.
+
+## 8. Remediation roadmap
+
+Phases, each with its own acceptance gate:
+
+| Phase | Scope | Gate |
+| --- | --- | --- |
+| P1 Token pipeline | `tokens:import`, normalized sources, generator, 8 modes, `:root` = Figma light | `pnpm vrt:diff` shows only the value changes listed in the audits; everything else is pixel-identical. |
+| P2 Naming and selectors | Typography rename, editor-type selectors, token gaps closed | Unit tests over the generated CSS; VRT for the four tested modes. |
+| P3 Components | Fixes in the order below, one commit per component | Re-baselined screenshots for that component, each changed image reviewed. |
+
+Theme baseline (checked 2026-10-28): all 268 published color tokens match the
+Design file in Figma light, Figma dark and FigJam light; spacing, radius,
+typography and elevation values match. The Design file defines 674 semantic
+color tokens; the gaps components need are `bordertranslucent`,
+`bghovertransparent`, `bgtransparent`, `bgtransparentsecondary` (+ `-hover`,
+`-pressed`), `texthighlight`, `scrollbar`, `modalbackdrop`, `multiplayer*`,
+`textonmultiplayer*`, the `figjam` family (`bg-figjam*`, `text-onfigjam`, …)
+and `bg-toolbar`. Known theme defects: without an editor-theme class `:root`
+resolves FigJam colors; elevation shadow layers are listed in a different order
+than the Design file; `heading.display` is missing.
+
+P3 order, by visible impact and shared fixes (P1 = visible value, P2 = missing
+variant/state, P3 = naming only):
+
+| # | Components | P1 / P2 | Main fixes |
+| --- | --- | --- | --- |
+| 1 | button | 7 / 3 | Secondary = unfilled + `bordertranslucent`; filled focus = `border-selected` + 2px white inset; Ghost hover/active on `bgtransparentsecondary`; Link and Secondary Destruct active fills; FigJam variant; icon-lead slot; drop `warning`, dead `btn-*` |
+| 2 | action-icon, toggle | 8 / 5 | Hover `bghovertransparent`, active `bgtransparentsecondary`; Secondary stroke `bordertranslucent`; on-hover `bg-selected-secondary`; split button |
+| 3 | dropdown-menu, context-menu, internal menu | 5 / 4 | Highlight `bg-menu-selected`; badge/check trails |
+| 4 | select, input, value-field, variable-chip | 4 / 10 | Single focus ring; 24px icon cell; chip 16px tall; large-size icon well; combo input |
+| 5 | slider, swatch | 3 / 4 | `bordertranslucent` rings; disabled fill `bg-disabled`; chit types |
+| 6 | avatar, badge | 3 / 8 | `multiplayer*` tokens; badge alt/large/dot families |
+| 7 | radio, tabs, toast, visual-bell, scroll-area | 6 / 2 | Radio button-variant stroke and focus ring (`border-selected-strong`); tabs focus ring; toast elevation-400; visual bell becomes the light `bg` + elevation-100 bell of the Design file, edge token; scrollbar token |
+| 8 | the rest | 0 / ≤2 each | P2/P3 items only |
diff --git a/docs/figma-runtime-colors.md b/docs/figma-runtime-colors.md
new file mode 100644
index 0000000..9d50060
--- /dev/null
+++ b/docs/figma-runtime-colors.md
@@ -0,0 +1,39 @@
+# Figma runtime colors
+
+`@thinkbuff/figma-theme` mirrors the `--figma-color-*` variables that Figma
+injects into a plugin iframe when the plugin calls
+`figma.showUI(html, { themeColors: true })`. The editor owns the values, not
+this repo — the official docs
+(<https://developers.figma.com/docs/plugins/css-variables/>) only publish the
+light set, so dark and FigJam values must be extracted from a running editor.
+
+Naming: `--figma-color-{type}-{role}-{prominence}-{interaction}`.
+
+## Extract current values
+
+Open devtools on a plugin iframe running with `themeColors: true` and run:
+
+```js
+document.getElementById('figma-style').innerHTML;
+```
+
+This returns the injected stylesheet with every `--figma-color-*` declaration
+for the current mode. Run it once per mode (Figma light, Figma dark, FigJam by
+opening a FigJam file and toggling the editor theme). If `#figma-style` is
+absent, look for other `<style>` elements Figma injected into `<head>`.
+
+New variables (e.g. `bg-slot`, `border-slot`) belong in
+`packages/theme/src/theme/colors/` for all three theme variants.
+
+## Reading the design file via MCP
+
+Figma desktop exposes a Dev Mode MCP at `http://127.0.0.1:3845/mcp`. Add it to
+`.devin/mcp_config.local.json` (gitignored):
+
+```json
+{ "mcpServers": { "figma": { "type": "http", "url": "http://127.0.0.1:3845/mcp" } } }
+```
+
+It only responds while the active Figma tab is a design or FigJam file, needs a
+paid seat, and Devin may need a session restart to pick up the server. When it
+is unavailable, use user-provided screenshots as design evidence.
diff --git a/docs/migration/radix-to-base-ui/alert-dialog.md b/docs/migration/radix-to-base-ui/alert-dialog.md
new file mode 100644
index 0000000..a5d0083
--- /dev/null
+++ b/docs/migration/radix-to-base-ui/alert-dialog.md
@@ -0,0 +1,27 @@
+# alert-dialog
+
+2026-10-25 · strategy: transformation engine · verdict: migrated, behavior tests 4/4, VRT unchanged.
+
+## Changed
+
+- `src/components/alert-dialog/alert-dialog.tsx` — `@radix-ui/react-alert-dialog` → `AlertDialog` (`@base-ui/react/alert-dialog`). `Overlay` → `Backdrop`; `Content` → Portal > Backdrop + Popup with starting/ending-style transitions. Base UI has no Action/Cancel parts, so both `Action` and `Cancel` are `AlertDialog.Close` (both close the dialog, same as Radix). `className` narrowed to `string`.
+- `alert-dialog.stories.tsx`, `alert-dialog.test.tsx` — `asChild` → `render`.
+
+Leftover scan: `rg "@radix-ui" src/components/alert-dialog/` → 0.
+
+## API changes (for CHANGELOG)
+
+- `Trigger`/`Action`/`Cancel` `asChild` → `render`.
+- `Content` focus/dismiss callbacks moved to `Root onOpenChange(open, eventDetails)` and `initialFocus`/`finalFocus`, same as Dialog.
+
+## Behavior changes
+
+- None observed: `role="alertdialog"`, outside press does not close, Escape closes, Action/Cancel close.
+
+## Re-baselined
+
+- None.
+
+## Manual QA
+
+- Open, Cancel, Action, Escape; focus returns to the trigger.
diff --git a/docs/migration/radix-to-base-ui/animations.md b/docs/migration/radix-to-base-ui/animations.md
new file mode 100644
index 0000000..4203a4b
--- /dev/null
+++ b/docs/migration/radix-to-base-ui/animations.md
@@ -0,0 +1,25 @@
+# Animations removed in step 5a (UnoCSS preset-animations → Base UI transitions in step 6)
+
+All `animate-in/out`, `fade-*`, `zoom-*`, `slide-*`, `animate-duration-*` utility classes were removed from components. Step 6 reimplements these as Base UI `data-starting-style` / `data-ending-style` transitions.
+
+## alert-dialog
+- open: `animate-in fade-in-0 zoom-in-95 slide-in-from-left-1/2 slide-in-from-top-12/25` (duration 200ms)
+- closed: `animate-out fade-out-0 zoom-out-95 slide-out-to-left-1/2 slide-out-to-top-12/25` (duration 200ms)
+
+## dialog
+- open: `animate-in fade-in-0 zoom-in-95 slide-in-from-left-1/2 slide-in-from-top-12/25` (duration 200ms)
+- closed: `animate-out fade-out-0 zoom-out-95 slide-out-to-left-1/2 slide-out-to-top-12/25` (duration 200ms)
+
+## dropdown-menu
+- open: `animate-in fade-in-0 zoom-in-95` + `data-[side=*]:slide-in-from-{top|bottom|left|right}-2`
+- closed: `animate-out fade-out-0 zoom-out-95`
+
+## popover
+- open: `animate-in fade-in zoom-in-95` + `data-[side=*]:slide-in-from-{top|bottom|left|right}-1`
+- closed: `animate-out fade-out zoom-out-95`
+
+## sheet
+- open: `animate-in fade-in-0` (duration 240ms) + `data-[side=*]:slide-in-from-{top|bottom|left|right}`
+- closed: `animate-out fade-out-0` (duration 120ms) + `data-[side=*]:slide-out-to-{top|bottom|left|right}`
+
+Not animated before / unchanged: checkbox, radio, select, slider, switch, tabs, toast (sonner-driven), tooltip, scroll-area, separator, label, input, textarea, toggle, toggle-group, button, action-icon.
diff --git a/docs/migration/radix-to-base-ui/button.md b/docs/migration/radix-to-base-ui/button.md
new file mode 100644
index 0000000..80c599d
--- /dev/null
+++ b/docs/migration/radix-to-base-ui/button.md
@@ -0,0 +1,38 @@
+# button (+ action-icon)
+
+2026-10-25 · strategy: transformation engine (non-shadcn repo) · verdict: clean migration, zero VRT diffs, all tests pass unchanged.
+
+## Changed
+
+- `packages/react/src/components/button/button.tsx` — `@radix-ui/react-slot` `Slot` → `Button` from `@base-ui/react/button`. `asChild` removed; Base UI `render`, `nativeButton`, `focusableWhenDisabled`, `disabled` props pass through natively. `ButtonProps = Omit<React.ComponentPropsWithRef<typeof BaseButton>, 'color'> & ButtonVariantsProps`.
+- `packages/react/src/components/action-icon/action-icon.tsx` — `Slot` → `useRender` (`@base-ui/react/use-render`) + `mergeProps` (`@base-ui/react/merge-props`), `defaultTagName: 'button'`; `asChild` → `render?: React.ReactElement`.
+- `pnpm-workspace.yaml` + `packages/react/package.json` — `@base-ui/react` 1.9.0 catalog entry (done under separator).
+
+Leftover scan: `rg "@radix-ui" packages/react/src/components/{button,action-icon}/` → 0 matches.
+
+## Left alone
+
+- `input.tsx` — its `InputSlot` is a local component name, not `@radix-ui/react-slot` (verified imports).
+- All `asChild` usages in stories/tests belong to still-Radix primitives (`Dialog.Trigger`, `Popover.Trigger`, `Select.*`, `Sheet.*`, `Tooltip.*`, `AlertDialog.*`, `DropdownMenu.Trigger`, checkbox indicator) — those own `asChild` until their own handoffs.
+- `.storybook/preview.tsx` excludes an `asChild` arg control — harmless, cleans up with the last trigger.
+- No consumer of `<Button asChild>` or `<ActionIcon asChild>` existed.
+
+## API changes (for CHANGELOG)
+
+- `Button`: `asChild?: boolean` removed → `render?: ReactElement` (Base UI). For non-button elements: `<Button render={<a />} nativeButton={false}>`. New passthrough props: `nativeButton`, `focusableWhenDisabled`.
+- `ActionIcon`: `asChild` → `render?: React.ReactElement`.
+- `disabled` buttons remain **not** focusable by default (`focusableWhenDisabled` opt-in) — same as Radix.
+
+## Behavior changes
+
+- Open-trigger styling later moved to `aria-expanded:` (see `popover.md`).
+- None observed in tests or VRT.
+
+## Re-baselined screenshots
+
+- None — `pnpm test:visual` 207/207 with zero changed baselines.
+
+## Verify by hand
+
+- `<Button>` click/focus/disabled states unchanged; `<Button render={<a/>} nativeButton={false}>` renders an anchor with button styling.
+- `<ActionIcon>` renders `<button>` by default, custom element via `render`.
diff --git a/docs/migration/radix-to-base-ui/checkbox.md b/docs/migration/radix-to-base-ui/checkbox.md
new file mode 100644
index 0000000..a13d164
--- /dev/null
+++ b/docs/migration/radix-to-base-ui/checkbox.md
@@ -0,0 +1,37 @@
+# checkbox
+
+2026-10-25 · strategy: transformation engine · verdict: clean migration, zero VRT diffs, all tests pass unchanged.
+
+## Changed
+
+- `packages/react/src/components/checkbox/checkbox.tsx` — `@radix-ui/react-checkbox` → `Checkbox` (`@base-ui/react/checkbox`, Root + Indicator). `data-[state=checked]` → `data-[checked]`; `className` narrowed to `string`; `checked="indeterminate"` mapping removed (Base UI has a native `indeterminate` boolean).
+- `packages/react/vite.config.ts` — `optimizeDeps.include` now derives every exported `@base-ui/react/*` subpath from the installed package's `exports` map (`fs.readFileSync` + filter), fixing the stale dep-optimize cache that caused phantom VRT diffs after each dependency swap (the bare `@base-ui/react` name did not cover deep imports). `./package.json` filtered out (not a module).
+
+Leftover scan: `rg "@radix-ui" packages/react/src/components/checkbox/` → 0 matches.
+
+## Left alone
+
+- `checkbox.test.tsx`, `checkbox.stories.tsx`, `index.ts` — unchanged; all tests pass as-is including the Label `htmlFor` association test (Base UI forwards the checkbox `id` to the hidden `<input>`, so `<Label htmlFor>` still toggles it).
+- `@radix-ui/react-checkbox` stays in `dependencies` until step 7.
+- `checkbox.tsx:62` `asChild` was on `Indicator` (renders the icon directly); Base UI `Indicator` renders children inline — same result, no `render` needed.
+
+## API changes (for CHANGELOG)
+
+- `checked: boolean | 'indeterminate'` → `checked: boolean` + `indeterminate: boolean` (public `indeterminate` prop already existed on our wrapper — now maps 1:1 to Base UI).
+- `onCheckedChange(checked)` → `onCheckedChange(checked, eventDetails)` — second param added.
+- `className` narrowed to `string`; `render` prop available.
+
+## Behavior changes
+
+- DOM shape: `<button>` → `<span role="checkbox">` + hidden `<input>` (Base UI). `role`, `aria-checked` (incl. `mixed`), keyboard Space toggle, disabled suppression all verified by tests. `peer` class preserved for `peer-disabled` label dimming.
+- None else observed.
+
+## Re-baselined screenshots
+
+- None — `pnpm test:visual` 207/207 zero diffs (the `optimizeDeps` fix held; no manual cache clear was needed this run).
+
+## Verify by hand
+
+- Click/Space toggles check + indeterminate icon swaps (`MdiMinusThick`/`MdiCheckBold`).
+- `<Label htmlFor>` association toggles the checkbox.
+- Disabled checkbox ignores input and dims via `data-checked` states.
diff --git a/docs/migration/radix-to-base-ui/dialog.md b/docs/migration/radix-to-base-ui/dialog.md
new file mode 100644
index 0000000..bb25827
--- /dev/null
+++ b/docs/migration/radix-to-base-ui/dialog.md
@@ -0,0 +1,31 @@
+# dialog
+
+2026-10-25 · strategy: transformation engine · verdict: migrated, behavior tests 5/5, VRT unchanged.
+
+## Changed
+
+- `src/components/dialog/dialog.tsx` — `@radix-ui/react-dialog` → `Dialog` (`@base-ui/react/dialog`). `Overlay` → `Backdrop`; `Content` → Portal > Backdrop + Popup. Backdrop/Popup get Base UI starting/ending-style transitions (opacity, popup scale) with `motion-reduce:transition-none`. `className` narrowed to `string`.
+- `dialog.stories.tsx`, `dialog.test.tsx` — Trigger/Close `asChild` → `render`. The story's `onPointerDownOutside` toast guard moved to `Root onOpenChange`, which cancels `outside-press` changes on sonner toasts.
+
+Left alone: Header/Footer/Title/Description styling.
+
+Leftover scan: `rg "@radix-ui" src/components/dialog/` → 0.
+
+## API changes (for CHANGELOG)
+
+- `Trigger`/`Close` `asChild` → `render`.
+- `Content` no longer takes `onPointerDownOutside` / `onInteractOutside` / `onEscapeKeyDown` / `onOpenAutoFocus` / `onCloseAutoFocus`. Use `Root onOpenChange(open, eventDetails)` (`eventDetails.reason`, `eventDetails.cancel()`) and `Content` `initialFocus` / `finalFocus`.
+- `modal` also accepts `'trap-focus'`.
+
+## Behavior changes
+
+- None observed in tests: focus moves into the popup on open and returns to the trigger on close; Escape closes.
+
+## Re-baselined
+
+- None.
+
+## Manual QA
+
+- Open/close via trigger, Close button, Escape, backdrop click.
+- Clicking a sonner toast while the dialog is open does not close it (story).
diff --git a/docs/migration/radix-to-base-ui/dropdown-menu.md b/docs/migration/radix-to-base-ui/dropdown-menu.md
new file mode 100644
index 0000000..514e336
--- /dev/null
+++ b/docs/migration/radix-to-base-ui/dropdown-menu.md
@@ -0,0 +1,37 @@
+# dropdown-menu
+
+2026-10-25 · strategy: transformation engine · verdict: migrated, behavior tests 8/8, VRT green.
+
+## Changed
+
+- `src/components/dropdown-menu/dropdown-menu.tsx` — `@radix-ui/react-dropdown-menu` → `Menu` (`@base-ui/react/menu`). Root/Trigger/Group/RadioGroup map directly; `Sub` → `SubmenuRoot`; `SubTrigger` → `SubmenuTrigger`; `Content`/`SubContent` → Portal > Positioner (`z-50`) > Popup (starting/ending-style transitions); `ItemIndicator` → `CheckboxItemIndicator` / `RadioItemIndicator`; `Label` → `GroupLabel`; Arrow renders the 10×5 SVG with side-dependent placement. `className` narrowed to `string`.
+- `dropdown-menu.stories.tsx` — Trigger `asChild` → `render={<ActionIcon />}`; `Label` moved inside `RadioGroup`; `avoidCollisions` removed; `sideOffset` 4 → 9 (arrow height no longer added automatically).
+- `dropdown-menu.test.tsx` — `onSelect` → `onClick` (API change only; assertions unchanged).
+
+Left alone: inline SVG icons, item styling.
+
+Leftover scan: `rg "@radix-ui" src/components/dropdown-menu/` → 0.
+
+## API changes (for CHANGELOG)
+
+- `Item`'s `onSelect` → `onClick`; `closeOnClick` controls whether the menu closes.
+- `Trigger asChild` → `render`.
+- `Label` must be rendered inside `Group` or `RadioGroup` (Base UI throws otherwise).
+- `Sub` props follow `Menu.SubmenuRoot`; `onOpenChange(open, eventDetails)`.
+- `sideOffset` measures to the popup edge; with `<DropdownMenu.Arrow />`, add 5px to keep the old gap.
+- `avoidCollisions`, `loop`, `forceMount` removed (Base UI: `loopFocus`, `keepMounted`).
+
+## Behavior changes
+
+- `CheckboxItem` / `RadioItem` no longer close the menu on click (Base UI `closeOnClick` defaults to false for them; Radix closed). Plain items still close. Not patched.
+- Submenu opens on hover after Base UI's default delay.
+
+## Re-baselined
+
+- `dropdown-menu-open-*`, `dropdown-menu-submenu-open-*` (×3 themes): menu ~5px further from the viewport edge (Base UI default `collisionPadding` 5 vs Radix 0). Content, arrow and submenu placement otherwise identical.
+
+## Manual QA
+
+- Open via click and keyboard (Enter/ArrowDown); Escape closes and returns focus.
+- Submenu via hover and ArrowRight; ArrowLeft closes it.
+- Checkbox/radio items toggle and keep the menu open.
diff --git a/docs/migration/radix-to-base-ui/label.md b/docs/migration/radix-to-base-ui/label.md
new file mode 100644
index 0000000..ca1503e
--- /dev/null
+++ b/docs/migration/radix-to-base-ui/label.md
@@ -0,0 +1,35 @@
+# label
+
+2026-10-25 · strategy: transformation engine (no Base UI counterpart — native `<label>` per migration guide) · verdict: clean migration, zero VRT diffs, all tests pass unchanged.
+
+## Changed
+
+- `packages/react/src/components/label/label.tsx` — `@radix-ui/react-label` → native `<label>`. Same classes (`text-figma-sm leading-figma-sm font-medium cursor-default disabled:* peer-disabled:*`), `htmlFor`/`ref` pass through natively.
+
+Leftover scan: `rg "@radix-ui" packages/react/src/components/label/` → 0 matches.
+
+## Left alone
+
+- `label.test.tsx`, `index.ts` — unchanged; tests pass as-is.
+- Consumers (`checkbox`, `radio`, `switch`, `dialog`, `popover`, `sheet` stories/tests) — import `Label` from `../label`, unchanged.
+- `@radix-ui/react-label` stays in `dependencies` until step 7.
+- The `disabled:`/`peer-disabled:` classes remain — `peer-disabled` still hooks the sibling form control's `disabled` state, same as before.
+
+## API changes (for CHANGELOG)
+
+- None on the public surface: `<Label htmlFor className>` is unchanged.
+
+## Behavior changes
+
+- **Text selection on double-click**: Radix Label called `preventDefault` on `onMouseDown` with `detail > 1`, so double-clicking the label did not select its text. A native `<label>` has no such behavior — double-click now selects the label text and focuses/activates the control per platform defaults. Not re-implemented (per decision); flagged as an accepted delta.
+- Otherwise none: `htmlFor` association, `peer-disabled` styling, cursor, and font are unchanged (test-verified).
+
+## Re-baselined screenshots
+
+- None — `pnpm test:visual` 207/207 with zero changed baselines.
+
+## Verify by hand
+
+- Click a `<Label htmlFor=…>` next to a checkbox/radio/switch → native label association activates the control.
+- Disabled control → `peer-disabled:*` dims the label (cursor + `text-figma-disabled`).
+- Double-click a label → text now selects (accepted delta vs Radix).
diff --git a/docs/migration/radix-to-base-ui/popover.md b/docs/migration/radix-to-base-ui/popover.md
new file mode 100644
index 0000000..0ec7982
--- /dev/null
+++ b/docs/migration/radix-to-base-ui/popover.md
@@ -0,0 +1,34 @@
+# popover
+
+2026-10-25 · strategy: transformation engine · verdict: migrated, all tests and 207/207 VRT green.
+
+## Changed
+
+- `src/components/popover/popover.tsx` — `@radix-ui/react-popover` → `Popover` (`@base-ui/react/popover`): Root, Trigger, Portal, Positioner (`z-50`, side/align/offset props), Popup (starting/ending-style transitions + `motion-reduce:transition-none`), Arrow (custom 14×7 SVG via `render`, side-dependent placement/rotation), Close. `asChild` → `render` on Trigger/Close. `PopoverAnchor` = inert passthrough `<div>` (Base UI has no Anchor — flagged).
+- `popover.stories.tsx`, `popover.test.tsx` — `asChild` → `render`; `avoidCollisions` arg removed; story `sideOffset` 4 → 11 (see API changes).
+- `src/components/tooltip/tooltip.tsx` — follow-up fix to the tooltip migration: Base UI's Arrow renders an empty element, so the tooltip arrow was invisible. It now renders the 10×5 SVG with side-dependent placement; the composed `Tooltip` defaults `sideOffset` to 9 with an arrow (4 without). Tooltip story no longer pins `sideOffset: 4`.
+- `action-icon.tsx`, `button-variants.tsx` — open-trigger styling `data-[state=open]:` → `aria-expanded:`. Both Radix and Base UI set `aria-expanded` on popover/menu/select/dialog triggers, while tooltip triggers are excluded (Base UI tooltip triggers also carry `data-popup-open`, which would wrongly highlight them). ActionIcon story `WithDataState` → `Expanded` (`aria-expanded`), baselines renamed.
+- `tests/visual/vrt.setup.ts` — motion frozen (`transition/animation: none`) for deterministic overlay screenshots.
+
+Leftover scan: `rg "@radix-ui" src/components/popover/` → 0.
+
+## API changes (for CHANGELOG)
+
+- `asChild` → `render`; `modal` passthrough; `onOpenChange(open, eventDetails)`; `avoidCollisions`/`updatePositionStrategy` removed.
+- `sideOffset` now measures to the popup edge; Radix added the arrow height automatically. With `<Popover.Arrow />`, pass `sideOffset={11}` to keep the previous gap.
+- Open-trigger styling uses `aria-expanded` instead of `data-state=open`.
+
+## Behavior changes
+
+- Base UI moves focus into the popup on open and returns it to the trigger on close.
+- Initial focus no longer selects the text of a focused input (Radix did).
+
+## Re-baselined
+
+- `popover-open-{figma-light,figma-dark,figjam}`, `tooltip-open-{figma-light,figjam}`: popup ~5px further from the viewport edge because Base UI's default `collisionPadding` is 5 (Radix 0); popover input text no longer selected. Tooltip baselines were restored to the pre-migration Radix captures first, so the only remaining delta is the collision padding. `tooltip-open-figma-dark` matches the Radix capture.
+
+## Manual QA
+
+- Open/close via trigger click, Escape, outside click; focus returns to trigger.
+- Arrow points at trigger for all four sides.
+- ActionIcon/Button triggers show pressed look while popover is open, not while a tooltip is shown.
diff --git a/docs/migration/radix-to-base-ui/radio.md b/docs/migration/radix-to-base-ui/radio.md
new file mode 100644
index 0000000..6a09739
--- /dev/null
+++ b/docs/migration/radix-to-base-ui/radio.md
@@ -0,0 +1,32 @@
+# radio
+
+2026-10-25 · strategy: transformation engine · verdict: clean after one styling fix; 207/207 VRT.
+
+## Changed
+
+- `src/components/radio/radio.tsx` — `@radix-ui/react-radio-group` → `RadioGroup` (`@base-ui/react/radio-group`) + `Radio.Root`/`Radio.Indicator` (`@base-ui/react/radio`). Item classes: `disabled:*` → `data-[disabled]:*`, `not-disabled:focus:*` → `not-data-[disabled]:focus:*`, indicator `group-disabled:*` → `group-data-[disabled]:*` (span renders `data-disabled`, not a native `disabled` attr).
+- `src/components/label/label.tsx` — **belongs to this handoff**: added `peer-data-[disabled]:cursor-not-allowed peer-data-[disabled]:text-figma-disabled` alongside `peer-disabled:*`. Base UI radio/checkbox roots are `<span>`s emitting `data-disabled`; `peer-disabled` only matches native `disabled` attrs. Without it the Radio-Disabled story's paired labels were not dimmed (the 3 VRT diffs).
+
+Leftover scan: `rg "@radix-ui" src/components/radio/` → 0.
+
+## Left alone
+
+- Tests (incl. arrow-key nav via synthetic keydown — passes as-is; Base UI arrow keys move focus AND select, matching the old assertions), stories, index.ts, radix dep.
+
+## API changes (for CHANGELOG)
+
+- `onValueChange(value)` → `onValueChange(value, eventDetails)`; `render` passthrough; `className` narrowed to `string`; `RadioGroupItem` maps to `Radio.Root` + `Radio.Indicator`.
+
+## Behavior changes
+
+- DOM: item `<button>` → `<span role="radio">` + hidden `<input type="radio">`; `data-disabled`/`aria-disabled` replace native `disabled`; `data-checked`/`data-unchecked` added.
+- `data-composite` attribute now present on items (Base UI composite item metadata) — non-visual.
+
+## Re-baselined screenshots
+
+- None — 207/207 after the `peer-data-[disabled]` fix (3 earlier diffs on Radio-Disabled across themes were the label-dimming regression, fixed not re-baselined).
+
+## Verify by hand
+
+- Arrow keys move focus + select (matches old assertions).
+- Group `disabled` dims items AND their peer Labels.
diff --git a/docs/migration/radix-to-base-ui/scroll-area.md b/docs/migration/radix-to-base-ui/scroll-area.md
new file mode 100644
index 0000000..3018f45
--- /dev/null
+++ b/docs/migration/radix-to-base-ui/scroll-area.md
@@ -0,0 +1,34 @@
+# scroll-area
+
+2026-10-25 · strategy: transformation engine · verdict: clean after two fixes; 207/207 VRT.
+
+## Changed
+
+- `src/components/scroll-area/scroll-area.tsx` — `@radix-ui/react-scroll-area` → `ScrollArea` (`@base-ui/react/scroll-area`: Root, Viewport, Scrollbar, Thumb, Corner). `className` narrowed to `string`.
+- Two fixes to keep visuals identical:
+  1. Removed `[&>div]:!block` from the viewport — it was a Radix hack for its `display:table` inner wrapper; Base UI renders no inner div, so the selector was hitting consumer content (the story's `flex flex-col` container) and breaking layout (the 3 ScrollArea-Default diffs).
+  2. Added `opacity-0 transition-all data-[hovering]:opacity-100 data-[scrolling]:opacity-100` on `ScrollBar` — Radix `type="hover"` hid the scrollbar at rest; Base UI renders it visible. Base UI emits `data-hovering`/`data-scrolling` on the scrollbar during hover/scroll, matching the old show-on-hover semantics.
+
+Leftover scan: `rg "@radix-ui" src/components/scroll-area/` → 0.
+
+## Left alone
+
+- Test, story, index.ts; radix dep stays until step 7.
+
+## API changes (for CHANGELOG)
+
+- `type` (`"always"|"hover"|"scroll"|"auto"`) and `scrollHideDelay` removed — no Base UI equivalent; Base UI's hover/scroll visibility is now styled via `data-hovering`/`data-scrolling`.
+- `className` narrowed to `string`; `render` passthrough on parts.
+
+## Behavior changes
+
+- Scrollbar shows on `data-hovering` (pointer over the scroll area) / `data-scrolling` — equivalent to Radix `type="hover"` minus the hide delay (Base UI drops it immediately when hover ends; accepted delta).
+- `aria-hidden="true"` on the scrollbar track — same as Radix.
+
+## Re-baselined screenshots
+
+- None — 207/207 after the two fixes.
+
+## Verify by hand
+
+- Scroll the list → scrollbar appears during hover/scroll, hides at rest; track width and thumb color unchanged.
diff --git a/docs/migration/radix-to-base-ui/select.md b/docs/migration/radix-to-base-ui/select.md
new file mode 100644
index 0000000..8090e23
--- /dev/null
+++ b/docs/migration/radix-to-base-ui/select.md
@@ -0,0 +1,37 @@
+# select
+
+2026-10-25 · strategy: transformation engine · verdict: migrated, behavior tests 6/6, VRT green.
+
+## Changed
+
+- `src/components/select/select.tsx` — `@radix-ui/react-select` → `Select` (`@base-ui/react/select`). Content = Portal > Positioner (`z-50`, `alignItemWithTrigger`) > Popup > ScrollUpArrow / List / ScrollDownArrow. `Viewport` → `List`; `ScrollUp/DownButton` → `ScrollUp/DownArrow`; `Label` → `GroupLabel`; `Icon`/`ItemIndicator` use `render` for the inline SVGs; Arrow renders the 10×5 SVG. Trigger open styling `data-[state=open]` → `data-[popup-open]`; item highlight `focus:` → `data-[highlighted]:`; Radix CSS vars → `--anchor-width` / `--available-height`. `className` narrowed to `string`.
+- `select.stories.tsx` — `position` arg → `alignItemWithTrigger`; `avoidCollisions` removed; every `Root` passes `items`; `OptionWithIcon` labels are React nodes in `items` (no more `Item asChild`); Placeholder story uses `value: null`.
+- `select.test.tsx` — Fixture passes `items`; the Escape test now asserts focus returns to the trigger.
+- `playground/src/app.tsx` — passes `items`.
+
+Leftover scan: `rg "@radix-ui" src/components/select/` → 0.
+
+## API changes (for CHANGELOG)
+
+- `Root` needs `items` (record or `{ value, label }[]`) for the trigger to show labels instead of raw values. Labels can be React nodes.
+- `Content` `position="item-aligned" | "popper"` → `alignItemWithTrigger` (default `true`).
+- `Item asChild` removed; put rich content in `items` / children.
+- `Label` must be inside `Group`.
+- "No value" is `null` (Radix used `''`).
+- `onValueChange(value, eventDetails)`; `avoidCollisions` removed.
+- `sideOffset` measures to the popup edge; with `withArrow` the default is 9 (was 4 + arrow).
+
+## Behavior changes
+
+- Escape/selection returns focus to the trigger. The Radix wrapper prevented `onCloseAutoFocus`; that suppression is gone.
+- Item alignment only applies to mouse input and turns off automatically when there isn't room around the trigger; the list then opens below it.
+
+## Re-baselined
+
+- `select-open-{figma-light,figma-dark,figjam}`: the VRT trigger sits at the top of the viewport, so Base UI falls back from item-aligned to below-trigger placement (Radix overlapped the trigger and could cross the viewport edge). Item content and styling are otherwise identical. All Select story screenshots (incl. OptionWithIcon trigger with icon) are unchanged.
+
+## Manual QA
+
+- Open via click and keyboard; ArrowDown/Enter selects; Escape closes and focuses trigger.
+- Item-aligned positioning when the trigger has room above.
+- Long list scrolls with the scroll arrows.
diff --git a/docs/migration/radix-to-base-ui/separator.md b/docs/migration/radix-to-base-ui/separator.md
new file mode 100644
index 0000000..3e0284c
--- /dev/null
+++ b/docs/migration/radix-to-base-ui/separator.md
@@ -0,0 +1,35 @@
+# separator
+
+2026-10-25 · strategy: transformation engine (non-shadcn repo, no golden pair) · verdict: clean migration, zero VRT diffs, all behavior tests pass unchanged.
+
+## Changed
+
+- `packages/react/src/components/separator/separator.tsx` — `@radix-ui/react-separator` → `Separator as BaseSeparator` from `@base-ui/react/separator`. Same classes, same DOM shape (`<div>` with `data-orientation`).
+- `packages/react/package.json` — `@base-ui/react` `catalog:` (1.9.0) added to `dependencies`.
+- `pnpm-workspace.yaml` — `@base-ui/react: 1.9.0` added to the default catalog.
+
+Leftover scan: `rg "@radix-ui" packages/react/src/components/separator/` → 0 matches.
+
+## Left alone
+
+- `separator.stories.tsx`, `separator.test.tsx`, `index.ts` — unchanged; stories/tests pass as-is.
+- `dropdown-menu.tsx`, `select.tsx` — their `DropdownMenuPrimitive.Separator`/`SelectPrimitive.Separator` are menu-scoped Radix parts, migrated in their own handoffs.
+- `@radix-ui/react-separator` stays in `dependencies` until step 7 removes all Radix packages.
+
+## API changes (for CHANGELOG)
+
+- None on the public surface: `<Separator decorative orientation className>` is unchanged. `ref` is a normal React 19 prop either way.
+- Implementation note: Base UI's `Separator` has no `decorative` prop — ours is preserved as a component-level prop mapped to `role="none"` (decorative) vs `role="separator"` (semantic). Explicit `role` is required because a passed `role={undefined}` would otherwise suppress Base UI's internal role.
+
+## Behavior changes
+
+- None observed. `aria-orientation` still emitted when non-decorative (test-verified); `data-orientation` now comes from Base UI.
+
+## Re-baselined screenshots
+
+- None — `pnpm test:visual` 207/207 with zero changed baselines.
+
+## Verify by hand
+
+- Render `<Separator decorative />` → no role in a11y tree; `<Separator decorative={false} orientation="vertical" />` → `role=separator`, `aria-orientation=vertical`.
+- In the Separator story, both orientations render as a 1px `bg-figma-border` line — identical to before.
diff --git a/docs/migration/radix-to-base-ui/sheet.md b/docs/migration/radix-to-base-ui/sheet.md
new file mode 100644
index 0000000..ee50e3f
--- /dev/null
+++ b/docs/migration/radix-to-base-ui/sheet.md
@@ -0,0 +1,27 @@
+# sheet
+
+2026-10-25 · strategy: transformation engine · verdict: migrated, behavior tests green, VRT unchanged.
+
+## Changed
+
+- `src/components/sheet/sheet.tsx` — still Dialog-based, now on `@base-ui/react/dialog`. `Overlay` → `Backdrop` (opacity transition); `Content` → Portal > Backdrop + Popup. Each `side` variant slides in and out via `data-[starting-style]` / `data-[ending-style]` translate classes (200ms, `motion-reduce:transition-none`). `className` narrowed to `string` on the Base UI parts.
+- `sheet.stories.tsx`, `sheet.test.tsx` — Trigger/Close `asChild` → `render`.
+- `src/components/dialog/dialog.stories.tsx` — the Toaster decorator replaced `@radix-ui/react-portal` with `react-dom`'s `createPortal(…, document.body)`. This was the last Radix import in the package.
+
+Leftover scan: `rg "@radix-ui" packages/react/src playground/src` → 0.
+
+## API changes (for CHANGELOG)
+
+- Same as Dialog: `asChild` → `render`; dismiss/focus callbacks go through `Root onOpenChange(open, eventDetails)` and `initialFocus`/`finalFocus`.
+
+## Behavior changes
+
+- None observed in tests.
+
+## Re-baselined
+
+- None.
+
+## Manual QA
+
+- All four sides slide in and out; Escape, backdrop click and Close dismiss the sheet.
diff --git a/docs/migration/radix-to-base-ui/slider.md b/docs/migration/radix-to-base-ui/slider.md
new file mode 100644
index 0000000..6d4d9aa
--- /dev/null
+++ b/docs/migration/radix-to-base-ui/slider.md
@@ -0,0 +1,38 @@
+# slider
+
+2026-10-25 · strategy: transformation engine · verdict: clean, zero VRT diffs, tests pass with two `// Base UI:` assertion updates.
+
+## Changed
+
+- `src/components/slider/slider.tsx` — `@radix-ui/react-slider` → `Slider` (`@base-ui/react/slider`). `SliderRoot` now wraps `Slider.Root` + `Slider.Control` (children = Track + thumbs land inside Control, matching story composition). `SliderRange` → `Slider.Indicator`; `SliderThumb` → `Slider.Thumb` (composed Slider passes `index`). Root props pass through untouched (Base UI types); composed `Slider` counts thumbs via a local `toArray` only.
+- `slider.stories.tsx` — removed `inverted` arg/argType (no Base UI equivalent), `minStepsBetweenThumbs` → `minStepsBetweenValues`, thumbs get `index={index}`.
+- `slider.test.tsx` — two assertions marked `// Base UI:` (see below).
+
+Leftover scan: `rg "@radix-ui" src/components/slider/` → 0.
+
+## Left alone
+
+- `index.ts`, radix dep (step 7). WithValueTooltip story still composes with still-Radix `Tooltip` — `render` composition unchanged.
+- `data-[orientation]`/`data-[disabled]`/`data-[checked]` class hooks already use Base UI attributes.
+
+## API changes (for CHANGELOG)
+
+- `onValueCommit` → `onValueCommitted`; `onValueChange(value)` → `onValueChange(value, eventDetails)` — **no compat layer**: value/defaultValue/callbacks pass straight through with Base UI types (Base UI returns the same shape you pass in: number for number, array for array). The composed `Slider` only uses `toArray` locally to count thumbs.
+- `inverted` removed (no Base UI equivalent).
+- `minStepsBetweenThumbs` → `minStepsBetweenValues`.
+- `className` narrowed to `string`; `render` passthrough on parts.
+- New `SliderControl` exists inside `SliderRoot` (not exported separately — composition transparent to consumers).
+
+## Behavior changes
+
+- DOM: thumb `<button>` → `<span>` + hidden `<input type="range">` per thumb; `role=slider` moves to the hidden input (aria-valuenow/valuetext on it; native `min`/`max` attrs instead of `aria-valuemin`/`aria-valuemax`).
+- Disabled state: `data-disabled` on parts + `disabled` on the hidden input (was `aria-disabled`).
+
+## Re-baselined screenshots
+
+- None — 207/207, zero diffs (pixel-identical incl. WithValueTooltip + 1px CustomStyle track).
+
+## Verify by hand
+
+- Drag/arrow keys/Home/End change value; range slider has two thumbs (`index` prop).
+- Disabled slider ignores pointer input; WithValueTooltip shows on hover.
diff --git a/docs/migration/radix-to-base-ui/switch.md b/docs/migration/radix-to-base-ui/switch.md
new file mode 100644
index 0000000..62c54a1
--- /dev/null
+++ b/docs/migration/radix-to-base-ui/switch.md
@@ -0,0 +1,29 @@
+# switch
+
+2026-10-25 · strategy: transformation engine · verdict: clean, zero VRT diffs, tests pass unchanged.
+
+## Changed
+
+- `src/components/switch/switch.tsx` — `@radix-ui/react-switch` → `Switch` (`@base-ui/react/switch`, Root + Thumb). `data-[state=checked]` → `data-[checked]`, `data-[state=unchecked]` → `data-[unchecked]`; `className` narrowed; `displayName` literal.
+
+Leftover scan: `rg "@radix-ui" src/components/switch/` → 0.
+
+## Left alone
+
+- Tests, stories, index.ts; radix dep stays until step 7.
+
+## API changes (for CHANGELOG)
+
+- `onCheckedChange(checked)` → `onCheckedChange(checked, eventDetails)`; `render` passthrough; `className` narrowed to `string`.
+
+## Behavior changes
+
+- DOM: `<button>` → `<span role="switch">` + hidden input — roles/aria unchanged (test-verified). None else.
+
+## Re-baselined screenshots
+
+- None — 207/207, zero diffs.
+
+## Verify by hand
+
+- Click/Space toggles; brand track + thumb slide; disabled dims.
diff --git a/docs/migration/radix-to-base-ui/tabs.md b/docs/migration/radix-to-base-ui/tabs.md
new file mode 100644
index 0000000..75c4ec4
--- /dev/null
+++ b/docs/migration/radix-to-base-ui/tabs.md
@@ -0,0 +1,36 @@
+# tabs
+
+2026-10-25 · strategy: transformation engine · verdict: clean, zero VRT diffs, one `// Base UI:` test update for the disabled-tab focus delta.
+
+## Changed
+
+- `src/components/tabs/tabs.tsx` — `@radix-ui/react-tabs` → `Tabs` (`@base-ui/react/tabs`). `TabsTrigger` → `Tabs.Tab`, `TabsContent` → `Tabs.Panel`; `data-[state=active]` → `data-[active]`, `disabled:pointer-events-none` → `data-[disabled]:pointer-events-none` (Tab is a `<button>` but emits `aria-disabled`/`data-disabled`, not a native `disabled` attr); `className` narrowed on all four wrappers. Export names unchanged (`Root`/`List`/`Trigger`/`Content`).
+- `tabs.test.tsx` — "cannot select a disabled tab" updated (see below).
+
+Leftover scan: `rg "@radix-ui" src/components/tabs/` → 0.
+
+## Left alone
+
+- Stories, index.ts; radix dep stays until step 7. No `Tabs.Indicator` added (not needed visually — no underline indicator in the design).
+
+## API changes (for CHANGELOG)
+
+- `onValueChange(value)` → `onValueChange(value, eventDetails)`.
+- `forceMount` → `keepMounted` (Base UI prop name).
+- `activationMode` → `activateOnFocus` on `Tabs.List` (Base UI prop name; see behavior delta).
+- `className` narrowed to `string`; `render` passthrough.
+- Panel state attrs: `data-hidden`, `data-active`; Tab: `data-active`, `data-disabled`, `data-orientation`, `data-index`, `data-activation-direction`.
+
+## Behavior changes
+
+- **`activateOnFocus` default differs**: Radix's default `activationMode="automatic"` activated tabs on focus; Base UI `Tabs.List` defaults `activateOnFocus` to false — arrow keys move focus WITHOUT selecting until Enter/Space. Left at Base UI default (not imitated). No existing test asserted auto-activation.
+- **Disabled tabs stay in arrow-key order**: Radix skipped disabled tabs in roving focus; Base UI keeps them focusable (`aria-disabled`, `tabindex` still managed) but non-selectable. Test updated: assert `aria-disabled="true"` + `aria-selected="false"` on Tab C and that Tab A remains selected — same "cannot select" semantics, flagged with `// Base UI:`.
+
+## Re-baselined screenshots
+
+- None — 207/207, zero diffs.
+
+## Verify by hand
+
+- Arrow keys move focus between tabs without selecting (Enter/Space activates); disabled Tab C is reachable by arrows but never selects.
+- Active tab styling via `data-active` (bold + `text-figma`); panel switches correctly.
diff --git a/docs/migration/radix-to-base-ui/tailwind.md b/docs/migration/radix-to-base-ui/tailwind.md
new file mode 100644
index 0000000..eae601d
--- /dev/null
+++ b/docs/migration/radix-to-base-ui/tailwind.md
@@ -0,0 +1,56 @@
+# Step 5a — UnoCSS → Tailwind CSS v4 migration
+
+## Class mapping table
+
+| UnoCSS | Tailwind v4 | Notes |
+|---|---|---|
+| `x:(a b)` variant groups | `x:a x:b` | expanded everywhere |
+| `font-size-11` | `text-figma-sm leading-figma-sm` | old rule also set lh 16px |
+| `font-size-12` | `text-xs` | 12px |
+| `font-size-13` | `text-figma-lg` | 13px |
+| `font-size-14` | `text-sm leading-4` | 14px + lh 16px |
+| `rounded-0.5` | `rounded-figma-sm` | 2px |
+| `rounded-1` | `rounded` | 4px |
+| `rounded-1.5` | `rounded-md` | 6px |
+| `flex-grow` | `grow` | |
+| `flex-shrink-0` | `shrink-0` | |
+| `left-unset` | `left-auto` | |
+| `translate-x-2/5` / `-translate-y-2/5` | `translate-x-[40%]` / `-translate-y-[40%]` | |
+| `backdrop-blur-2` | `backdrop-blur` | |
+| `Npx` (e.g. `h-1px`, `-mt-1px`) | `N-px` (e.g. `h-px`, `-mt-px`) | |
+| `will-change-(a,b)` | `will-change-[a,b]` | |
+| `i-mdi-*` / `i-tabler-*` (components) | inline SVG in `src/icons/` | exact path data, license comments |
+| `i-mdi-*` / `i-tabler-*` (stories) | `icon-[mdi--*]` / `icon-[tabler--*]` | `@iconify/tailwind4` |
+| `animate-in/out`, `fade-*`, `zoom-*`, `slide-*`, `animate-duration-*` | removed | inventory in `animations.md`; reimplemented in step 6 |
+
+## Root causes fixed during verification
+
+1. **Label line-height collapse**: old `font-size-11` emitted font-size + line-height 16px and beat `leading-none`; under Tailwind, `leading-none` won → 11px labels. Fixed by removing `leading-none` in `label.tsx` (keeps `text-figma-sm leading-figma-sm`). Also added `--text-figma-*--line-height` paired theme keys so `text-figma-*` emits its paired leading.
+2. **Unexpanded variant group**: `slider.tsx` retained `after:(block size-2 shrink-0 rounded-full content-[""] bg-figma-icon)` — expanded to separate `after:` utilities; swept all sources for remaining `x:(` groups (none).
+3. **Leftover empty `''` entries** in cn()/cva arrays after animation removal — cleaned in dialog, alert-dialog, popover, sheet, dropdown-menu.
+4. **Root font-size**: old preflight put `font-size: 11px` on `html`; under rem-based tokens this shrank everything to 11/16. Moved to `body` only so rem anchors at 16px.
+
+## Re-baselined screenshots (22 files)
+
+### (a) FigJam palette now applies (old preset emitted no figjam vars)
+- overlays: `dialog-open-figjam`, `dropdown-menu-open-figjam`, `dropdown-menu-submenu-open-figjam`, `popover-open-figjam`, `select-open-figjam`, `sheet-open-figjam`
+- stories: `Components-ActionIcon-WithDataState-figjam`, `Components-Button-Primary-figjam`, `Components-Button-WithIcon-figjam`, `Components-Button-WithSpinner-figjam`, `Components-Sheet-Default-figjam`, `Components-Slider-Default-figjam`, `Components-Slider-WithValueTooltip-figjam`, `Components-Toast-Default-figjam`, `Components-Toggle-Pressed-figjam`
+
+### (b) Select highlighted item — UA focus ring removed (TW4 `outline-0` vs UnoCSS width-only)
+- overlays: `select-open-figma-light`, `select-open-figma-dark`
+
+### (c) Slider CustomStyle track 2px → 1px (`h-px` now wins, story's intent)
+- stories: `Components-Slider-CustomStyle-figma-light`, `Components-Slider-CustomStyle-figma-dark`, `Components-Slider-CustomStyle-figjam`
+
+### (d) Preflight-related story-shell changes (`h3` size, root padding/font stack)
+- overlays: `popover-open-figma-light`, `popover-open-figma-dark` (story-only `h3` at 11px)
+
+No unclassified diffs: `pnpm test:visual` passes 207/207 with these updated baselines, verified twice consecutively.
+
+## Follow-up review fixes
+
+- `./colors` export kept source-compatible: `BaseThemeCSSVariables`, `FigmaLightThemeCSSVariables`, `FigmaDarkThemeCSSVariables`, `FigJamLightThemeCSSVariables`, `FigmaThemeCSSVariables`/`FigmaThemeCSSVariableKey`, `FigJamThemeCSSVariables`/`FigJamThemeCSSVariableKey`, `BaseThemeCSSVariableKey`, `ThemeCSSVariableKey`, `ThemeColorScope`, `getCSSPreflights` and `generateCSSVariables` (old `--color-*` alias output format preserved verbatim). Covered by a compat test in `src/colors/diff.test.ts`.
+- Variable-map diff old vs new: **Base +0/-0/~0, FigmaLight +0/-0/~0, FigmaDark +0/-0/~0, FigJam +0/-0/~0** — all keys and values identical.
+- `@thinkbuff/figma-theme` moved to `dependencies` (`workspace:^`) in `@thinkbuff/figma-react` — consumers no longer install it separately; removed from peerDependencies/devDependencies.
+- `files` dedup: `styles.css` covered by `*.css`.
+- package.json keywords: `unocss*` → `tailwindcss*`; `unocss.config.ts` dropped from tsconfig.node.json include. Remaining `unocss` mentions exist only in `docs/adr/0001-figma-theme-single-source.md` (historical decision record).
diff --git a/docs/migration/radix-to-base-ui/toggle-group.md b/docs/migration/radix-to-base-ui/toggle-group.md
new file mode 100644
index 0000000..0fe57f4
--- /dev/null
+++ b/docs/migration/radix-to-base-ui/toggle-group.md
@@ -0,0 +1,36 @@
+# toggle-group
+
+2026-10-25 · strategy: transformation engine · verdict: clean migration, zero VRT diffs, tests pass with API-driven updates only.
+
+## Changed
+
+- `packages/react/src/components/toggle-group/toggle-group.tsx` — `@radix-ui/react-toggle-group` → `ToggleGroup` from `@base-ui/react/toggle-group` + `Toggle` from `@base-ui/react/toggle` for `ToggleGroupItem`. `data-[state=on]` → `data-[pressed]`; `className` narrowed to `string` on both; `displayName` literals.
+- `toggle-group.test.tsx` — API updates only: `type="single"` → default, `type="multiple"` → `multiple`, `defaultValue="center"` → `['center']`, `firstArg` assertion `'right'` → `['right']` (equally strong).
+- `toggle-group.stories.tsx` — `type` arg/argTypes removed; `multiple` for the multi stories; `useArgs` value `string` → `string[]`; `defaultValue="horizontal"` → `['horizontal']`; removed the `if (selected)` deselect guard (array is always defined).
+
+Leftover scan: `rg "@radix-ui" packages/react/src/components/toggle-group/` → 0 matches.
+
+## Left alone
+
+- `index.ts`, `@radix-ui/react-toggle-group` dep (step 7).
+- Styling unchanged; `disabled:` item selectors still work (native disabled attr).
+
+## API changes (for CHANGELOG)
+
+- `type="single"|"multiple"` → `multiple?: boolean` (single is the default).
+- `value`/`defaultValue` are now always `string[]`; `onValueChange(value)` → `onValueChange(value, eventDetails)`.
+- `rovingFocus`/`loop` → `loopFocus` (passes through).
+- `className` narrowed to `string`; `render` prop available.
+
+## Behavior changes
+
+- None observed — single mode still allows deselecting the pressed item, same as Radix.
+
+## Re-baselined screenshots
+
+- None — `pnpm test:visual` 207/207 zero diffs (cleared `node_modules/.vite` dep-optimize cache after the edit; the earlier "no tests" run was that stale cache).
+
+## Verify by hand
+
+- Single: click items → exclusive selection + deselect allowed; `data-pressed` styling applies.
+- Multiple: independent toggles; disabled item/group inert.
diff --git a/docs/migration/radix-to-base-ui/toggle.md b/docs/migration/radix-to-base-ui/toggle.md
new file mode 100644
index 0000000..051a8fa
--- /dev/null
+++ b/docs/migration/radix-to-base-ui/toggle.md
@@ -0,0 +1,33 @@
+# toggle
+
+2026-10-25 · strategy: transformation engine · verdict: clean migration, zero VRT diffs (one stale-cache flake resolved by clearing `node_modules/.vite`), all tests pass unchanged.
+
+## Changed
+
+- `packages/react/src/components/toggle/toggle.tsx` — `@radix-ui/react-toggle` → `Toggle` from `@base-ui/react/toggle`. `data-[state=on]` classes → `data-[pressed]`; `className` narrowed to `className?: string` per the button review rule; `displayName` literal.
+
+Leftover scan: `rg "@radix-ui" packages/react/src/components/toggle/` → 0 matches.
+
+## Left alone
+
+- `toggle.stories.tsx`, `toggle.test.tsx`, `index.ts` — unchanged; `onPressedChange(pressed)` first arg is compatible.
+- `@radix-ui/react-toggle` stays in `dependencies` until step 7.
+- `toggle-group` untouched — its own handoff.
+
+## API changes (for CHANGELOG)
+
+- `onPressedChange(pressed)` → `onPressedChange(pressed, eventDetails)` — second param added, first unchanged.
+- `className` narrowed to `string` (function form unsupported).
+- New passthrough props from Base UI Toggle: `render`.
+
+## Behavior changes
+
+- None observed.
+
+## Re-baselined screenshots
+
+- None — `pnpm test:visual` 207/207 with zero changed baselines (after clearing a stale `node_modules/.vite` dep-optimize cache that initially produced 9 phantom diffs).
+
+## Verify by hand
+
+- Click toggle → `data-pressed` + `aria-pressed` flip; brand styling applies when pressed, `bg-figma-disabled` when pressed+disabled.
diff --git a/docs/migration/radix-to-base-ui/tooltip.md b/docs/migration/radix-to-base-ui/tooltip.md
new file mode 100644
index 0000000..ad680eb
--- /dev/null
+++ b/docs/migration/radix-to-base-ui/tooltip.md
@@ -0,0 +1,44 @@
+# tooltip
+
+2026-10-25 · strategy: transformation engine · verdict: clean; 2 open-state screenshots re-baselined (unavoidable positioner geometry delta); 2 `// Base UI:` test updates.
+
+## Changed
+
+- `src/components/tooltip/tooltip.tsx` — `@radix-ui/react-tooltip` → `Tooltip` (`@base-ui/react/tooltip`): Provider, Root, Trigger, Portal, **Positioner**, Popup, Arrow.
+  - `TooltipContent` now renders `Portal > Positioner(side, align, sideOffset=4, alignOffset, collisionPadding) > Popup`; arrow stays inside the popup.
+  - `TooltipTrigger asChild` → `render={children}` (composed `Tooltip`'s `children` is the trigger element).
+  - `delayDuration` → `delay`, `skipDelayDuration` → `timeout` (Provider); `delay`/`closeDelay` on Trigger; `disableHoverableContent` → `disableHoverablePopup` (Root).
+  - `className` narrowed to `string` on all wrappers.
+- `tooltip.test.tsx` — `aria-describedby` assertions → `data-popup-open` on the trigger (`// Base UI:` comments; Base UI doesn't link trigger↔popup via aria-describedby).
+- `tooltip.stories.tsx` + `tooltip.test.tsx` — `delayDuration` → `delay`; `avoidCollisions` arg/argType removed (not a Base UI Positioner prop in 1.9).
+- `slider.stories.tsx` — `delayDuration` → `delay`, `updatePositionStrategy="always"` removed (floating-ui-specific, no Base UI equivalent).
+- `input.stories.tsx`, `toggle-group.stories.tsx` — `delayDuration` → `delay`.
+- `tests/visual/overlays.vrt.test.tsx` — tooltip `open()` now waits for the popup to be fully settled (`data-open` present, no `data-starting-style`/`data-ending-style`, bounding rect stable across two animation frames).
+
+Leftover scan: `rg "@radix-ui" src/components/tooltip/` → 0.
+
+## Left alone
+
+- `index.ts`; radix dep stays until step 7.
+- Tooltip had no animation classes (per `animations.md`) — no `data-[starting-style]` transitions added.
+
+## API changes (for CHANGELOG)
+
+- `delayDuration` → `delay`; `skipDelayDuration` → `timeout`; `disableHoverableContent` → `disableHoverablePopup`; `delay`/`closeDelay` on trigger.
+- `avoidCollisions`, `updatePositionStrategy` removed (no Base UI equivalent on Positioner).
+- `onOpenChange(open)` → `onOpenChange(open, eventDetails)`; `onOpenChangeComplete` available.
+- Trigger: `asChild` → `render`.
+
+## Behavior changes
+
+- Trigger emits `data-popup-open`/`data-base-ui-tooltip-trigger` instead of `aria-describedby`.
+- `data-open`, `data-side`, `data-align`, `data-activation-direction` on popup/positioner; `data-uncentered` on the arrow when it can't center on the anchor.
+
+## Re-baselined screenshots
+
+- Superseded: the arrow was invisible after the first pass (Base UI Arrow renders no SVG). Fixed in the popover commit, where tooltip baselines were restored to the Radix captures; the only remaining delta is Base UI's default `collisionPadding` (5px). See `popover.md`.
+
+## Verify by hand
+
+- Hover shows tooltip after `delay`; focus shows it; Escape closes; moving off hides it (hoverable-content tracking still works without the pointer-move hack — the `expect.poll` handles it).
+- Arrow renders at the correct side; `withArrow={false}` hides it.
diff --git a/package.json b/package.json
index 7b9d60c..ef37537 100644
--- a/package.json
+++ b/package.json
@@ -1,50 +1,57 @@
 {
   "name": "@thinkbuff/figma",
-  "version": "0.0.8",
-  "description": "Simplify plugin and widget creation for Figma and FigJam",
+  "version": "0.1.0",
   "private": true,
+  "description": "Simplify plugin and widget creation for Figma and FigJam",
+  "license": "MIT",
+  "author": "Eleven <eteplus@outlook.com>",
   "type": "module",
   "scripts": {
     "clean": "pnpm run -r clean && rm -rf node_modules",
-    "lint": "pnpm run -r lint",
-    "lint:fix": "pnpm run -r lint --fix",
+    "lint": "vp lint",
+    "lint:fix": "vp lint --fix",
+    "fmt": "vp fmt",
+    "fmt:check": "vp fmt --check",
+    "deps": "taze -r -I -l",
+    "check": "vp check",
     "typecheck": "pnpm run -r typecheck",
-    "build": "pnpm --parallel run -r build",
-    "release": "changelogen --release --no-commit --no-tag && tsx scripts/update-version.ts",
+    "build": "pnpm run -r build",
+    "test": "pnpm -r test",
+    "test:visual": "pnpm -F @thinkbuff/figma-react test:visual",
+    "test:visual:update": "pnpm -F @thinkbuff/figma-react test:visual:update",
+    "vrt:diff": "tsx scripts/vrt-diff.ts",
+    "pages:build": "tsx scripts/pages.ts build",
+    "pages:preview": "tsx scripts/pages.ts preview",
+    "pages:serve": "tsx scripts/pages.ts serve",
     "storybook": "pnpm -F @thinkbuff/figma-react storybook",
-    "postinstall": "pnpm run -r stub",
-    "prepare": "simple-git-hooks"
-  },
-  "packageManager": "pnpm@10.11.0",
-  "engines": {
-    "node": ">=20"
+    "release": "changelogen --release --no-commit --no-tag --no-github && tsx scripts/update-version.ts",
+    "postinstall": "pnpm -F @thinkbuff/figma-theme build",
+    "prepare": "simple-git-hooks",
+    "tokens:import": "pnpm -F @thinkbuff/figma-theme tokens:import"
   },
-  "author": "Eleven <eteplus@outlook.com>",
-  "license": "MIT",
   "devDependencies": {
-    "@eslint-react/eslint-plugin": "^1.49.0",
-    "@thinkbuff/eslint-config": "^0.2.7",
-    "@types/node": "^22.15.18",
-    "@unocss/eslint-plugin": "^66.1.2",
-    "changelogen": "^0.6.1",
-    "eslint": "^9.27.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "eslint-plugin-storybook": "^0.12.0",
-    "glob": "^11.0.2",
-    "lint-staged": "^16.0.0",
-    "simple-git-hooks": "^2.13.0",
-    "tsx": "^4.19.4",
-    "typescript": "^5.8.3"
+    "@commitlint/cli": "catalog:cli",
+    "@commitlint/config-conventional": "catalog:cli",
+    "@types/node": "catalog:types",
+    "changelogen": "catalog:cli",
+    "glob": "catalog:toolchain",
+    "simple-git-hooks": "catalog:cli",
+    "taze": "catalog:cli",
+    "tsx": "catalog:cli",
+    "typescript": "catalog:toolchain",
+    "vite-plus": "catalog:toolchain"
   },
   "simple-git-hooks": {
-    "pre-commit": "pnpm lint-staged"
+    "pre-commit": "vp staged",
+    "commit-msg": "pnpm commitlint --edit ${1}"
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "engines": {
+    "node": ">=24.21.0"
   },
-  "prettier": {
-    "semi": true,
-    "singleQuote": true,
-    "jsxSingleQuote": false,
-    "printWidth": 120,
-    "trailingComma": "all"
-  }
+  "packageManager": "pnpm@12.15.0"
 }
diff --git a/packages/react/.storybook/main.ts b/packages/react/.storybook/main.ts
index 86f07c4..9812ca6 100644
--- a/packages/react/.storybook/main.ts
+++ b/packages/react/.storybook/main.ts
@@ -2,20 +2,11 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-onboarding',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@chromatic-com/storybook',
-    '@storybook/addon-interactions',
-  ],
+  addons: ['@storybook/addon-docs'],
   framework: {
     name: '@storybook/react-vite',
     options: {},
   },
-  docs: {
-    autodocs: 'tag',
-  },
   core: {
     disableTelemetry: true,
   },
diff --git a/packages/react/.storybook/preview.css b/packages/react/.storybook/preview.css
index be41724..f7b6912 100644
--- a/packages/react/.storybook/preview.css
+++ b/packages/react/.storybook/preview.css
@@ -1,3 +1,3 @@
 html .docs-story {
-  background-color: var(--color-bg);
+  background-color: var(--figma-color-bg);
 }
diff --git a/packages/react/.storybook/preview.tsx b/packages/react/.storybook/preview.tsx
index 71041d8..46cbc7c 100644
--- a/packages/react/.storybook/preview.tsx
+++ b/packages/react/.storybook/preview.tsx
@@ -1,21 +1,29 @@
-import React from 'react';
-import type { Preview } from '@storybook/react';
-import 'virtual:uno.css';
+import type { Preview } from '@storybook/react-vite';
+
+// @ts-ignore -- wildcard css declaration lives in tests/test-utils/styles.d.ts
+import '../tests/test-utils/styles.css';
+// @ts-ignore -- wildcard css declaration lives in tests/test-utils/styles.d.ts
 import './preview.css';
 
 const themes = [
-  { value: 'figma-light', title: 'Figma (Light)' },
-  { value: 'figma-dark', title: 'Figma (Dark)' },
-  { value: 'figjam', title: 'FigJam' },
+  { value: 'figma-light', title: 'Figma (Light)', classes: ['figma-light'] },
+  { value: 'figma-dark', title: 'Figma (Dark)', classes: ['figma-dark'] },
+  { value: 'figjam', title: 'FigJam (Light)', classes: ['figjam'] },
+  { value: 'figjam-dark', title: 'FigJam (Dark)', classes: ['figjam', 'figma-dark'] },
+  { value: 'devmode', title: 'Dev Mode (Light)', classes: ['devmode'] },
+  { value: 'devmode-dark', title: 'Dev Mode (Dark)', classes: ['devmode', 'figma-dark'] },
+  { value: 'slides', title: 'Slides (Light)', classes: ['slides'] },
+  { value: 'slides-dark', title: 'Slides (Dark)', classes: ['slides', 'figma-dark'] },
 ] as const;
 
-type Theme = typeof themes[number]['value'];
+const ALL_THEME_CLASSES = [...new Set(themes.flatMap(({ classes }) => classes))];
+
+type Theme = (typeof themes)[number]['value'];
 
 function setTheme(theme: Theme) {
-  for (const theme of themes) {
-    document.documentElement.classList.remove(theme.value);
-  }
-  document.documentElement.classList.add(theme);
+  const selected = themes.find(({ value }) => value === theme);
+  document.documentElement.classList.remove(...ALL_THEME_CLASSES);
+  document.documentElement.classList.add(...(selected?.classes ?? []));
 }
 
 const preview: Preview = {
@@ -24,7 +32,7 @@ const preview: Preview = {
       defaultValue: 'figma-light',
       toolbar: {
         icon: 'mirror',
-        items: themes,
+        items: [...themes],
         dynamicTitle: true,
       },
     },
@@ -36,7 +44,7 @@ const preview: Preview = {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
-      exclude: ['asChild'],
+      exclude: ['render'],
     },
     docs: {
       toc: true,
diff --git a/packages/react/LICENSE b/packages/react/LICENSE
new file mode 100644
index 0000000..e2c2f0f
--- /dev/null
+++ b/packages/react/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-PRESENT Thinkbuff
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/react/NOTICE.md b/packages/react/NOTICE.md
new file mode 100644
index 0000000..6e0a3e0
--- /dev/null
+++ b/packages/react/NOTICE.md
@@ -0,0 +1,56 @@
+# Third-Party Notices
+
+Portions of this project were originally adapted from the following
+open-source works.
+
+## figma-kit
+
+<https://github.com/tigranpetrossian/figma-kit>
+
+Icon path data, the named-color table, `addClassName`,
+`useSelectOnInputClick`, menu styling, and the ValueField family were
+originally adapted from figma-kit.
+
+## MUI Base UI
+
+<https://github.com/mui/base-ui>
+
+The ValueField scrubber derives from Base UI's `NumberFieldScrubArea`
+(via figma-kit).
+
+## Radix UI Primitives
+
+<https://github.com/radix-ui/primitives>
+
+`useControllableState`, `useComposedRefs`, and `createContext` were
+originally adapted from Radix UI Primitives.
+
+---
+
+All of these works are distributed under the MIT License:
+
+```
+MIT License
+
+Copyright (c) 2024 Tigran Petrossian (figma-kit)
+Copyright (c) 2019 Material-UI SAS (MUI Base UI)
+Copyright (c) 2022 WorkOS (Radix UI Primitives)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
diff --git a/packages/react/README.md b/packages/react/README.md
index 8f19d9e..450bc1d 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -6,74 +6,54 @@ A React UI component library for creating Figma plugins and widgets.
 
 ```bash
 pnpm add @thinkbuff/figma-react
-
 ```
 
-We also rely on a few dependencies, so make sure they are also installed.
+The components are styled with Tailwind CSS v4, which is required as a peer dependency. The theme package ships as a regular dependency — no separate install needed.
 
 ```bash
-pnpm add @thinkbuff/figma-theme unocss @unocss/preset-rem-to-px unocss-preset-animations -D
+pnpm add tailwindcss @tailwindcss/vite -D
 ```
 
 ## Vite Config
 
-Set up your `vite.config.ts` file, by importing UnoCSS and passing it the location of the config file.
+Set up your `vite.config.ts` file with the Tailwind CSS plugin.
 
 ```ts
 // vite.config.ts
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import unocss from 'unocss/vite';
+import tailwindcss from '@tailwindcss/vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), unocss()],
+  plugins: [react(), tailwindcss()],
 });
 ```
 
-## UnoCSS Config
-
-Create a `unocss.config.ts` file with all the required presets and transformers.
+## CSS Setup
 
-```ts
-// unocss.config.ts
-import { defineConfig, presetUno, presetIcons, transformerVariantGroup } from 'unocss';
-import presetRemToPx from '@unocss/preset-rem-to-px';
-import presetAnimations from 'unocss-preset-animations';
-import { presetFigmaTheme } from '@thinkbuff/figma-theme/unocss';
+Create a CSS entry file that imports Tailwind and the component library styles. The published `styles.css` includes the theme CSS and an `@source` directive pointing at the built components, so every utility class the components use is generated in your bundle.
 
-export default defineConfig({
-  content: {
-    pipeline: {
-      include: [
-        'src/**/*.tsx',
-        /(.*)figma-react(.*)\.(c|m)?(js)(x?)$/
-      ],
-    },
-  },
-  presets: [
-    presetUno({
-      dark: {
-        light: '.figma-light',
-        dark: '.figma-dark',
-      },
-    }),
-    presetFigmaTheme(),
-    presetAnimations(),
-    presetRemToPx(),
-    presetIcons({
-      cdn: 'https://esm.sh/',
-    }),
-  ],
-  transformers: [transformerVariantGroup()],
-});
+```css
+/* styles.css */
+@import 'tailwindcss';
+@import '@thinkbuff/figma-react/styles.css';
 ```
 
-Add virtual:uno.css to your main entry:
+Import it once in your main entry:
 
 ```ts
 // main.ts
-import 'virtual:uno.css';
+import './styles.css';
+```
+
+## Theming
+
+The theme is scoped by a class on `html`: `figma-light` (the default when no class is set), `figma-dark`, or `figjam`. `dark:` variants follow `.figma-dark`.
+
+```ts
+// e.g. follow the plugin UI theme
+document.documentElement.className = 'figma-dark';
 ```
 
 ## Usage
@@ -84,8 +64,12 @@ import { TooltipProvider, Tooltip } from '@thinkbuff/figma-react/tooltip';
 <TooltipProvider>
   <Tooltip>
     <ActionIcon>
-      <span className="i-tabler-adjustments-alt size-4"></span>
+      <MyIcon />
     </ActionIcon>
   </Tooltip>
 </TooltipProvider>
 ```
+
+## License
+
+[MIT](./LICENSE) — third-party attributions are listed in [NOTICE.md](./NOTICE.md).
diff --git a/packages/react/eslint.config.mjs b/packages/react/eslint.config.mjs
deleted file mode 100644
index 73cf5f2..0000000
--- a/packages/react/eslint.config.mjs
+++ /dev/null
@@ -1,9 +0,0 @@
-import storybook from 'eslint-plugin-storybook';
-import { defineFlatConfigAsync } from '@thinkbuff/eslint-config';
-
-export default defineFlatConfigAsync({
-  unocss: true,
-  extends: [
-    ...storybook.configs['flat/recommended'],
-  ],
-});
diff --git a/packages/react/package.json b/packages/react/package.json
index ffa18d2..65600af 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,78 +1,115 @@
 {
   "name": "@thinkbuff/figma-react",
-  "author": "Eleven <eteplus@outlook.com>",
-  "license": "MIT",
-  "type": "module",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "description": "A Figma React UI components for creating plugins and widgets",
-  "scripts": {
-    "clean": "rm -rf dist node_modules",
-    "build": "tsc && vite build",
-    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
-    "lint:config-viewer": "npx @eslint/config-inspector",
-    "typecheck": "tsc --noEmit",
-    "storybook": "storybook dev -h 127.0.0.1 -p 6006",
-    "build-storybook": "storybook build",
-    "prepublishOnly": "pnpm build"
-  },
-  "homepage": "https://github.com/thinkbuff/figma/tree/main/packages/react#readme",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/thinkbuff/figma",
-    "directory": "packages/react"
-  },
-  "bugs": {
-    "url": "https://github.com/thinkbuff/figma/issues"
-  },
   "keywords": [
     "figma",
     "figma-plugin",
     "figma-react",
     "react",
     "react-component",
-    "unocss",
-    "unocss-preset",
-    "unocss-preset-figma-theme"
+    "tailwindcss",
+    "tailwindcss-figma-theme",
+    "tailwindcss-theme"
   ],
+  "homepage": "https://github.com/thinkbuff/figma/tree/main/packages/react#readme",
+  "bugs": {
+    "url": "https://github.com/thinkbuff/figma/issues"
+  },
+  "license": "MIT",
+  "author": "Eleven <eteplus@outlook.com>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/thinkbuff/figma",
+    "directory": "packages/react"
+  },
+  "files": [
+    "*.css",
+    "dist",
+    "LICENSE",
+    "NOTICE.md"
+  ],
+  "type": "module",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/index.d.mts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./*"
+      ]
+    }
+  },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./dist/index.d.mts",
       "import": "./dist/index.mjs"
     },
     "./utils": {
-      "types": "./dist/utils/index.d.ts",
+      "types": "./dist/utils/index.d.mts",
       "import": "./dist/utils/index.mjs"
     },
     "./components": {
-      "types": "./dist/components/index.d.ts",
+      "types": "./dist/components/index.d.mts",
       "import": "./dist/components/index.mjs"
     },
     "./*": {
-      "types": "./dist/components/*/index.d.ts",
+      "types": "./dist/components/*/index.d.mts",
       "import": "./dist/components/*/index.mjs"
-    }
+    },
+    "./styles.css": "./styles.css"
   },
-  "typesVersions": {
-    "*": {
-      "*": [
-        "./dist/*",
-        "./*"
-      ]
-    }
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rm -rf dist node_modules",
+    "build": "vp pack",
+    "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -h 127.0.0.1 -p 6006",
+    "build-storybook": "storybook build",
+    "prepublishOnly": "pnpm build",
+    "test": "vitest run --project browser --project unit",
+    "test:visual": "rm -rf node_modules/.vite && vitest run --project vrt",
+    "test:visual:update": "rm -rf node_modules/.vite && vitest run --project vrt --update",
+    "probe": "rm -rf node_modules/.vite && vitest run --project probe --reporter=verbose"
+  },
+  "dependencies": {
+    "@base-ui/react": "catalog:react",
+    "@emmetio/math-expression": "catalog:runtime",
+    "@thinkbuff/figma-theme": "workspace:^",
+    "class-variance-authority": "catalog:tailwind",
+    "clsx": "catalog:tailwind",
+    "sonner": "catalog:react",
+    "tailwind-merge": "catalog:tailwind"
+  },
+  "devDependencies": {
+    "@iconify-json/mdi": "catalog:iconify",
+    "@iconify-json/tabler": "catalog:iconify",
+    "@iconify/tailwind4": "catalog:iconify",
+    "@storybook/addon-docs": "catalog:storybook",
+    "@storybook/react-vite": "catalog:storybook",
+    "@tailwindcss/vite": "catalog:tailwind",
+    "@vitejs/plugin-react": "catalog:react",
+    "@vitest/browser": "catalog:test",
+    "@vitest/browser-playwright": "catalog:test",
+    "glob": "catalog:toolchain",
+    "playwright": "catalog:test",
+    "react": "catalog:react",
+    "react-dom": "catalog:react",
+    "storybook": "catalog:storybook",
+    "tailwindcss": "catalog:tailwind",
+    "typescript": "catalog:toolchain",
+    "vite": "catalog:toolchain",
+    "vitest": "catalog:test",
+    "vitest-browser-react": "catalog:test"
   },
-  "files": [
-    "*.css",
-    "dist"
-  ],
   "peerDependencies": {
-    "@thinkbuff/figma-theme": "*",
     "@types/react": "*",
     "@types/react-dom": "*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19",
+    "react-dom": "^19"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -81,57 +118,5 @@
     "@types/react-dom": {
       "optional": true
     }
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.6",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/addon-onboarding": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-vite": "^8.6.14",
-    "@storybook/test": "^8.6.14",
-    "@thinkbuff/figma-theme": "workspace:*",
-    "@unocss/preset-rem-to-px": "^66.1.2",
-    "@vitejs/plugin-react": "^4.4.1",
-    "glob": "^11.0.2",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "storybook": "^8.6.14",
-    "typescript": "^5.8.3",
-    "unocss": "^66.1.2",
-    "unocss-preset-animations": "^1.2.1",
-    "vite": "^6.3.5",
-    "vite-plugin-dts": "^4.5.4"
-  },
-  "dependencies": {
-    "@radix-ui/react-alert-dialog": "^1.1.13",
-    "@radix-ui/react-checkbox": "^1.3.1",
-    "@radix-ui/react-dialog": "^1.1.13",
-    "@radix-ui/react-dropdown-menu": "^2.1.14",
-    "@radix-ui/react-label": "^2.1.6",
-    "@radix-ui/react-popover": "^1.1.13",
-    "@radix-ui/react-radio-group": "^1.3.6",
-    "@radix-ui/react-scroll-area": "^1.2.8",
-    "@radix-ui/react-select": "^2.2.4",
-    "@radix-ui/react-separator": "^1.1.6",
-    "@radix-ui/react-slider": "^1.3.4",
-    "@radix-ui/react-slot": "^1.2.2",
-    "@radix-ui/react-switch": "^1.2.4",
-    "@radix-ui/react-tabs": "^1.1.11",
-    "@radix-ui/react-toggle": "^1.1.8",
-    "@radix-ui/react-toggle-group": "^1.1.9",
-    "@radix-ui/react-tooltip": "^1.2.6",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "sonner": "^2.0.3",
-    "tailwind-merge": "^3.3.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx}": "eslint --fix"
   }
 }
diff --git a/packages/react/src/components/action-icon-split/action-icon-split.stories.tsx b/packages/react/src/components/action-icon-split/action-icon-split.stories.tsx
new file mode 100644
index 0000000..e687786
--- /dev/null
+++ b/packages/react/src/components/action-icon-split/action-icon-split.stories.tsx
@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { PlayIcon } from '~/icons';
+
+import * as ActionIconSplit from './action-icon-split';
+
+const meta = {
+  title: 'Components/ActionIconSplit',
+  component: ActionIconSplit.Root,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'inline-radio',
+      options: ['small', 'large'],
+      table: {
+        defaultValue: { summary: 'small' },
+      },
+    },
+    disabled: {
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+  args: {
+    disabled: false,
+  },
+  render: (args) => (
+    <ActionIconSplit.Root {...args}>
+      <ActionIconSplit.Button aria-label="Run">
+        <PlayIcon />
+      </ActionIconSplit.Button>
+      <ActionIconSplit.Chevron aria-label="More options" />
+    </ActionIconSplit.Root>
+  ),
+} satisfies Meta<typeof ActionIconSplit.Root>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+  },
+};
+
+export const Expanded: Story = {
+  render: (args) => (
+    <ActionIconSplit.Root {...args}>
+      <ActionIconSplit.Button aria-label="Run">
+        <PlayIcon />
+      </ActionIconSplit.Button>
+      <ActionIconSplit.Chevron
+        aria-label="More options"
+        aria-expanded="true"
+      />
+    </ActionIconSplit.Root>
+  ),
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export default meta;
diff --git a/packages/react/src/components/action-icon-split/action-icon-split.tsx b/packages/react/src/components/action-icon-split/action-icon-split.tsx
new file mode 100644
index 0000000..3b15ba2
--- /dev/null
+++ b/packages/react/src/components/action-icon-split/action-icon-split.tsx
@@ -0,0 +1,173 @@
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { createContext, useContext } from 'react';
+
+import { ChevronDownIcon } from '~/icons';
+import { cn } from '~/utils';
+
+interface ActionIconSplitContextValue {
+  size: 'small' | 'large';
+  disabled?: boolean;
+}
+
+const ActionIconSplitContext = createContext<ActionIconSplitContextValue>({ size: 'small' });
+
+interface ActionIconSplitProps extends React.ComponentPropsWithRef<'div'> {
+  /**
+   * Change the default rendered element to the one passed, merging their props and behavior.
+   *
+   * Read [Render](https://base-ui.com/react/utils/use-render) guide for more details.
+   */
+  render?: React.ReactElement;
+  /**
+   * `'small'` is 41x24, `'large'` is 49x32 (UI3 `Button icon split` spec).
+   *
+   * @default 'small'
+   */
+  size?: 'small' | 'large';
+  /**
+   * Disables both halves.
+   */
+  disabled?: boolean;
+}
+
+/**
+ * A split icon button (UI3 `Button icon split`): a primary action on the left
+ * and a chevron trigger on the right for alternate options.
+ */
+function ActionIconSplit({
+  className,
+  render,
+  size = 'small',
+  disabled,
+  ref,
+  ...props
+}: ActionIconSplitProps) {
+  return (
+    <ActionIconSplitContext.Provider value={{ size, disabled }}>
+      {useRender({
+        render,
+        defaultTagName: 'div',
+        ref,
+        props: mergeProps<'div'>(
+          { className: cn('inline-flex shrink-0 gap-px rounded-figma-md', className) },
+          props,
+        ),
+      })}
+    </ActionIconSplitContext.Provider>
+  );
+}
+
+interface ActionIconSplitHalfProps extends Omit<
+  React.ComponentPropsWithRef<'button'>,
+  'color' | 'disabled'
+> {
+  /**
+   * Change the default rendered element to the one passed, merging their props and behavior.
+   *
+   * Read [Render](https://base-ui.com/react/utils/use-render) guide for more details.
+   */
+  render?: React.ReactElement;
+  /**
+   * Accessible name for the icon-only button.
+   */
+  'aria-label': string;
+}
+
+function ActionIconSplitHalf({
+  className,
+  rounded,
+  width,
+  render,
+  ref,
+  ...props
+}: ActionIconSplitHalfProps & { rounded: 'l' | 'r'; width: 'icon' | 'chevron' }) {
+  const { size, disabled } = useContext(ActionIconSplitContext);
+
+  return useRender({
+    render,
+    defaultTagName: 'button',
+    ref,
+    props: mergeProps<'button'>(
+      {
+        className: cn(
+          size === 'small' ? 'h-6' : 'h-8',
+          width === 'icon' ? (size === 'small' ? 'w-6' : 'w-8') : 'w-4',
+          rounded === 'l' ? 'rounded-l-figma-md' : 'rounded-r-figma-md',
+          'icon-figma',
+          'flex',
+          'justify-center',
+          'items-center',
+          'shrink-0',
+          'cursor-default',
+          'appearance-none',
+          'text-figma-icon',
+          'fill-figma-icon',
+          'bg-transparent',
+          'bg-clip-border',
+          'outline-solid',
+          'outline-1',
+          '-outline-offset-1',
+          'outline-transparent',
+          'transition-colors',
+          'focus:not-focus-visible:outline-0 focus:not-focus-visible:outline-transparent',
+          disabled
+            ? [
+                'cursor-not-allowed',
+                'icon-figma-disabled',
+                'text-figma-icon-disabled',
+                'fill-figma-icon-disabled',
+              ]
+            : [
+                'hover:bg-figma-bghovertransparent',
+                'active:bg-figma-bgtransparent-secondary-hover',
+                'focus-visible:outline-figma-border-selected',
+                'aria-expanded:bg-figma-selected',
+                'aria-expanded:hover:bg-figma-selected-secondary',
+                'aria-expanded:active:bg-figma-selected',
+              ],
+          className,
+        ),
+        disabled,
+      },
+      props,
+    ),
+  });
+}
+
+function ActionIconSplitButton(props: ActionIconSplitHalfProps) {
+  return (
+    <ActionIconSplitHalf
+      rounded="l"
+      width="icon"
+      {...props}
+    />
+  );
+}
+
+function ActionIconSplitChevron({
+  children = <ChevronDownIcon size="4" />,
+  ...props
+}: ActionIconSplitHalfProps) {
+  return (
+    <ActionIconSplitHalf
+      rounded="r"
+      width="chevron"
+      {...props}
+    >
+      {children}
+    </ActionIconSplitHalf>
+  );
+}
+
+ActionIconSplit.displayName = 'ActionIconSplit';
+ActionIconSplitButton.displayName = 'ActionIconSplitButton';
+ActionIconSplitChevron.displayName = 'ActionIconSplitChevron';
+
+export {
+  ActionIconSplit as Root,
+  ActionIconSplitButton as Button,
+  ActionIconSplitChevron as Chevron,
+};
+
+export type { ActionIconSplitProps, ActionIconSplitHalfProps };
diff --git a/packages/react/src/components/action-icon-split/index.ts b/packages/react/src/components/action-icon-split/index.ts
new file mode 100644
index 0000000..3274142
--- /dev/null
+++ b/packages/react/src/components/action-icon-split/index.ts
@@ -0,0 +1 @@
+export * as ActionIconSplit from './action-icon-split';
diff --git a/packages/react/src/components/action-icon/action-icon.stories.tsx b/packages/react/src/components/action-icon/action-icon.stories.tsx
index 4555975..8542060 100644
--- a/packages/react/src/components/action-icon/action-icon.stories.tsx
+++ b/packages/react/src/components/action-icon/action-icon.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { ActionIcon } from './action-icon';
 
@@ -10,6 +10,20 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {
+    size: {
+      control: 'inline-radio',
+      options: ['small', 'medium'],
+      table: {
+        defaultValue: { summary: 'small' },
+      },
+    },
+    variant: {
+      control: 'inline-radio',
+      options: ['default', 'secondary'],
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
     disabled: {
       table: {
         defaultValue: { summary: 'false' },
@@ -18,8 +32,9 @@ const meta = {
   },
   args: {
     disabled: false,
+    'aria-label': 'Add',
   },
-  render: args => (
+  render: (args) => (
     <ActionIcon {...args}>
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -33,8 +48,7 @@ const meta = {
           fillRule="nonzero"
           stroke="none"
           d="M5.5 5.5v-5h1v5h5v1h-5v5h-1v-5h-5v-1h5z"
-        >
-        </path>
+        ></path>
       </svg>
     </ActionIcon>
   ),
@@ -44,15 +58,38 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
-export const WithDataState = {
+export const Expanded = {
   argTypes: {
-    'data-state': {
-      control: 'inline-radio',
-      options: ['open', 'closed'],
+    'aria-expanded': {
+      control: 'boolean',
+    },
+  },
+  args: {
+    'aria-expanded': true,
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: 'medium',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+  },
+};
+
+export const SecondaryExpanded = {
+  argTypes: {
+    'aria-expanded': {
+      control: 'boolean',
     },
   },
   args: {
-    'data-state': 'open',
+    'aria-expanded': true,
+    variant: 'secondary',
   },
 };
 
diff --git a/packages/react/src/components/action-icon/action-icon.tsx b/packages/react/src/components/action-icon/action-icon.tsx
index 1f0eaf8..41c66c1 100644
--- a/packages/react/src/components/action-icon/action-icon.tsx
+++ b/packages/react/src/components/action-icon/action-icon.tsx
@@ -1,56 +1,95 @@
-import { Slot } from '@radix-ui/react-slot';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 
 import { cn } from '~/utils';
 
 interface ActionIconProps extends Omit<React.ComponentPropsWithRef<'button'>, 'color'> {
   /**
-   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * Change the default rendered element to the one passed, merging their props and behavior.
    *
-   * Read [Composition](https://www.radix-ui.com/primitives/docs/guides/composition) guide for more details.
+   * Read [Render](https://base-ui.com/react/utils/use-render) guide for more details.
    */
-  asChild?: boolean;
+  render?: React.ReactElement;
+  /**
+   * Accessible name for the icon-only button.
+   */
+  'aria-label': string;
+  /**
+   * `secondary` draws the persistent translucent stroke from the UI3
+   * `Button icon` spec.
+   *
+   * @default 'default'
+   */
+  variant?: 'default' | 'secondary';
+  /**
+   * The button size. `'small'` matches the UI3 `Button icon` spec (24px).
+   *
+   * @default 'small'
+   */
+  size?: 'small' | 'medium';
 }
 
-const ActionIcon: React.FC<ActionIconProps> = ({ className, disabled, asChild = false, ref, ...props }) => {
-  const Component = asChild ? Slot : 'button';
-  return (
-    <Component
-      ref={ref}
-      className={cn(
-        'size-8',
-        'font-size-11',
-        'flex',
-        'justify-center',
-        'items-center',
-        'shrink-0',
-        'rounded-0.5',
-        'cursor-default',
-        'appearance-none',
-        'text-figma-icon',
-        'fill-figma-icon',
-        'bg-transparent',
-        'bg-clip-border',
-        'outline-solid',
-        'outline-1',
-        '-outline-offset-1',
-        'outline-transparent',
-        'transition-colors',
-        'focus:not-focus-visible:(outline-0 outline-transparent)',
-        disabled
-          ? ['cursor-not-allowed', 'text-figma-disabled', 'fill-figma-icon-disabled']
-          : [
-              'hover:(bg-figma-hover text-figma-icon-hover fill-figma-icon-hover)',
-              'focus-visible:(outline-2 -outline-offset-2 outline-figma-border-brand-strong)',
-              'data-[state=open]:(bg-figma-brand text-figma-icon-onbrand fill-figma-icon-onbrand)',
-              'data-[state=open]:hover:(bg-figma-brand text-figma-icon-onbrand fill-figma-icon-onbrand)',
-            ],
-        className,
-      )}
-      {...props}
-      disabled={disabled}
-    />
-  );
-};
+function ActionIcon({
+  className,
+  disabled,
+  render,
+  variant = 'default',
+  size = 'small',
+  ref,
+  ...props
+}: ActionIconProps) {
+  return useRender({
+    render,
+    defaultTagName: 'button',
+    ref,
+    props: mergeProps<'button'>(
+      {
+        className: cn(
+          size === 'small' ? 'size-6' : 'size-8',
+          'icon-figma',
+          'flex',
+          'justify-center',
+          'items-center',
+          'shrink-0',
+          'rounded-figma-md',
+          'cursor-default',
+          'appearance-none',
+          'text-figma-icon',
+          'fill-figma-icon',
+          'bg-transparent',
+          'bg-clip-border',
+          'outline-solid',
+          'outline-1',
+          '-outline-offset-1',
+          'outline-transparent',
+          'transition-colors',
+          'focus:not-focus-visible:outline-0 focus:not-focus-visible:outline-transparent',
+          variant === 'secondary' && 'border border-solid border-figma-bordertranslucent',
+          disabled
+            ? [
+                'cursor-not-allowed',
+                'icon-figma-disabled',
+                'text-figma-icon-disabled',
+                'fill-figma-icon-disabled',
+              ]
+            : [
+                'hover:bg-figma-bghovertransparent',
+                'focus-visible:outline-figma-border-selected',
+                variant === 'secondary'
+                  ? 'not-aria-expanded:active:bg-figma-bghovertransparent'
+                  : 'not-aria-expanded:active:bg-figma-bgtransparent-secondary-hover',
+                'aria-expanded:bg-figma-selected aria-expanded:border-transparent',
+                'aria-expanded:hover:bg-figma-selected-secondary',
+                'aria-expanded:active:bg-figma-selected',
+              ],
+          className,
+        ),
+        disabled,
+      },
+      props,
+    ),
+  });
+}
 
 ActionIcon.displayName = 'ActionIcon';
 
diff --git a/packages/react/src/components/alert-dialog/alert-dialog.stories.tsx b/packages/react/src/components/alert-dialog/alert-dialog.stories.tsx
index e6bc31b..ed234c5 100644
--- a/packages/react/src/components/alert-dialog/alert-dialog.stories.tsx
+++ b/packages/react/src/components/alert-dialog/alert-dialog.stories.tsx
@@ -1,8 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 
 import { Button } from '../button';
-
 import * as AlertDialog from './alert-dialog';
 
 type StoryArgs = React.ComponentPropsWithRef<typeof AlertDialog.Content> & {
@@ -19,34 +18,30 @@ const meta = {
   args: {
     open: false,
   },
-  render: (args) => {
+  render: function Render(args) {
     const { open: _, ...props } = args;
     const [{ open }, updateArgs] = useArgs();
     return (
       <AlertDialog.Root
         open={open}
-        onOpenChange={value => updateArgs({ open: value })}
+        onOpenChange={(value) => updateArgs({ open: value })}
       >
-        <AlertDialog.Trigger asChild>
-          <Button variant="outline" color="danger">
-            Delete account
-          </Button>
-        </AlertDialog.Trigger>
+        <AlertDialog.Trigger
+          render={<Button variant="secondary-destructive">Delete account</Button>}
+        />
         <AlertDialog.Content {...props}>
           <AlertDialog.Header>
             <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
           </AlertDialog.Header>
           <AlertDialog.Description>
-            This action cannot be undone. This will permanently delete your
-            account and remove your data from our servers.
+            This action cannot be undone. This will permanently delete your account and remove your
+            data from our servers.
           </AlertDialog.Description>
-          <AlertDialog.Footer className="justify-end gap-3">
-            <AlertDialog.Cancel asChild>
-              <Button variant="outline" color="secondary">Cancel</Button>
-            </AlertDialog.Cancel>
-            <AlertDialog.Action asChild>
-              <Button color="danger">Yes, delete account</Button>
-            </AlertDialog.Action>
+          <AlertDialog.Footer className="justify-end gap-2">
+            <AlertDialog.Cancel render={<Button variant="secondary">Cancel</Button>} />
+            <AlertDialog.Action
+              render={<Button variant="destructive">Yes, delete account</Button>}
+            />
           </AlertDialog.Footer>
         </AlertDialog.Content>
       </AlertDialog.Root>
diff --git a/packages/react/src/components/alert-dialog/alert-dialog.tsx b/packages/react/src/components/alert-dialog/alert-dialog.tsx
index 8c40d9f..46be45d 100644
--- a/packages/react/src/components/alert-dialog/alert-dialog.tsx
+++ b/packages/react/src/components/alert-dialog/alert-dialog.tsx
@@ -1,6 +1,6 @@
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
 
-import { cn } from '~/utils';
+import { addClassName, cn } from '~/utils';
 
 const AlertDialogRoot = AlertDialogPrimitive.Root;
 
@@ -8,110 +8,151 @@ const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
-const AlertDialogAction = AlertDialogPrimitive.Action;
+const AlertDialogAction = AlertDialogPrimitive.Close;
 
-const AlertDialogCancel = AlertDialogPrimitive.Cancel;
+const AlertDialogCancel = AlertDialogPrimitive.Close;
 
-const AlertDialogOverlay: React.FC<React.ComponentPropsWithRef<typeof AlertDialogPrimitive.Overlay>> = ({
+function AlertDialogOverlay({
   className,
   ref,
   ...props
-}) => (
-  <AlertDialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      'fixed',
-      'inset-0',
-      'z-50',
-      'bg-black/50',
-      'data-[state=open]:(animate-in fade-in-0)',
-      'data-[state=closed]:(animate-out fade-out-0)',
-      className,
-    )}
-    {...props}
-  />
-);
-
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-
-interface AlertDialogContentProps extends React.ComponentPropsWithRef<typeof AlertDialogPrimitive.Content> {
-  container?: AlertDialogPrimitive.AlertDialogPortalProps['container'];
-}
-
-/**
- * A modal dialog that interrupts the user with important content and expects a response.
- *
- * - [Docs](https://www.radix-ui.com/docs/primitives/components/alert-dialog)
- * - [API Reference](https://www.radix-ui.com/primitives/docs/components/alert-dialog#api-reference)
- */
-const AlertDialogContent: React.FC<AlertDialogContentProps> = ({ className, container, ref, ...props }) => (
-  <AlertDialogPortal container={container}>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
+}: React.ComponentPropsWithRef<typeof AlertDialogPrimitive.Backdrop>) {
+  return (
+    <AlertDialogPrimitive.Backdrop
       ref={ref}
-      className={cn(
+      className={addClassName(
+        className,
         'fixed',
-        'grid',
-        'w-full',
-        'max-w-80',
-        'left-1/2',
-        'top-1/2',
-        '-translate-x-1/2',
-        '-translate-y-1/2',
+        'inset-0',
         'z-50',
-        'rounded-0.5',
-        'bg-figma',
-        'p-6',
-        'shadow-lg',
-        'data-[state=open]:(animate-in fade-in-0 zoom-in-95 slide-in-from-left-1/2 slide-in-from-top-12/25)',
-        'data-[state=closed]:(animate-out fade-out-0 zoom-out-95 slide-out-to-left-1/2 slide-out-to-top-12/25)',
-        'animate-duration-200',
-        className,
+        'bg-figma-overlay',
+        'transition-opacity duration-150 data-starting-style:opacity-0 data-ending-style:opacity-0 motion-reduce:transition-none',
       )}
       {...props}
     />
-  </AlertDialogPortal>
-);
+  );
+}
+
+AlertDialogOverlay.displayName = 'AlertDialogOverlay';
 
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+interface AlertDialogContentProps extends React.ComponentPropsWithRef<
+  typeof AlertDialogPrimitive.Popup
+> {
+  container?: React.ComponentProps<typeof AlertDialogPrimitive.Portal>['container'];
+}
+
+/**
+ * A modal dialog that interrupts the user with important content and expects a response.
+ *
+ * - [Docs](https://base-ui.com/react/components/alert-dialog)
+ * - [API Reference](https://base-ui.com/react/components/alert-dialog#api-reference)
+ */
+function AlertDialogContent({ className, container, ref, ...props }: AlertDialogContentProps) {
+  return (
+    <AlertDialogPortal container={container}>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        ref={ref}
+        className={addClassName(
+          className,
+          'fixed',
+          'grid',
+          'w-full',
+          'max-w-80',
+          'left-1/2',
+          'top-1/2',
+          '-translate-x-1/2',
+          '-translate-y-1/2',
+          'z-50',
+          'rounded-figma-lg',
+          'bg-figma',
+          'p-4',
+          'shadow-figma-modal',
+          'outline-none',
+          'transition-[opacity,scale] duration-150 data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95 motion-reduce:transition-none',
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+AlertDialogContent.displayName = 'AlertDialogContent';
 
-const AlertDialogHeader: React.FC<React.ComponentPropsWithRef<'div'>> = ({ className, children, ref, ...props }) => (
-  <div ref={ref} className={cn('flex', 'items-center', 'pb-6', className)} {...props}>
-    {children}
-  </div>
-);
+function AlertDialogHeader({
+  className,
+  children,
+  ref,
+  ...props
+}: React.ComponentPropsWithRef<'div'>) {
+  return (
+    <div
+      ref={ref}
+      className={cn('flex', 'items-center', 'pb-6', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
 
 AlertDialogHeader.displayName = 'AlertDialogHeader';
 
-const AlertDialogFooter: React.FC<React.ComponentPropsWithRef<'div'>> = ({ className, children, ref, ...props }) => (
-  <div ref={ref} className={cn('flex', 'items-center', 'pt-6', className)} {...props}>
-    {children}
-  </div>
-);
+function AlertDialogFooter({
+  className,
+  children,
+  ref,
+  ...props
+}: React.ComponentPropsWithRef<'div'>) {
+  return (
+    <div
+      ref={ref}
+      className={cn('flex', 'items-center', 'pt-6', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
 
 AlertDialogFooter.displayName = 'AlertDialogFooter';
 
-const AlertDialogTitle: React.FC<React.ComponentPropsWithRef<typeof AlertDialogPrimitive.Title>> = ({
+function AlertDialogTitle({
   className,
   ref,
   ...props
-}) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn('text-figma', 'font-size-14', 'font-medium', className)}
-    {...props}
-  />
-);
+}: React.ComponentPropsWithRef<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      ref={ref}
+      className={addClassName(
+        className,
+        'text-figma',
+        'text-figma-body-medium',
+        'font-figma-strong',
+      )}
+      {...props}
+    />
+  );
+}
 
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+AlertDialogTitle.displayName = 'AlertDialogTitle';
 
-const AlertDialogDescription: React.FC<React.ComponentPropsWithRef<typeof AlertDialogPrimitive.Description>> = ({
+function AlertDialogDescription({
   className,
   ref,
   ...props
-}) => <AlertDialogPrimitive.Description ref={ref} className={cn('text-figma', 'font-size-11', className)} {...props} />;
+}: React.ComponentPropsWithRef<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      ref={ref}
+      className={addClassName(className, 'text-figma', 'text-figma-body-medium')}
+      {...props}
+    />
+  );
+}
 
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+AlertDialogDescription.displayName = 'AlertDialogDescription';
 
 export {
   AlertDialogRoot as Root,
diff --git a/packages/react/src/components/avatar/avatar.stories.tsx b/packages/react/src/components/avatar/avatar.stories.tsx
new file mode 100644
index 0000000..8a71269
--- /dev/null
+++ b/packages/react/src/components/avatar/avatar.stories.tsx
@@ -0,0 +1,156 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Avatar, AvatarGroup } from './avatar';
+
+const meta = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    size: 'default',
+    shape: 'circle',
+    color: 'purple',
+    name: 'Ada',
+  },
+} satisfies Meta<React.ComponentPropsWithRef<typeof Avatar>>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+const colors = ['purple', 'blue', 'pink', 'red', 'yellow', 'green', 'grey'] as const;
+
+export const Gallery: Story = {
+  render: (args) => (
+    <div className="flex flex-col items-start gap-4">
+      {(['large', 'default', 'small'] as const).map((size) => (
+        <div
+          key={size}
+          className="flex items-center gap-2"
+        >
+          {colors.map((color) => (
+            <Avatar
+              key={color}
+              {...args}
+              size={size}
+              color={color}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const Square: Story = {
+  render: (args) => (
+    <div className="flex items-center gap-2">
+      {colors.map((color) => (
+        <Avatar
+          key={color}
+          {...args}
+          shape="square"
+          color={color}
+        />
+      ))}
+    </div>
+  ),
+};
+
+const photo =
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23e8def8'/%3E%3Ccircle cx='16' cy='13' r='6' fill='%239747ff'/%3E%3Cpath d='M4 32c1-7 6-10 12-10s11 3 12 10' fill='%239747ff'/%3E%3C/svg%3E";
+
+export const Photo: Story = {
+  args: {
+    src: photo,
+    name: 'Ada Lovelace',
+  },
+};
+
+/**
+ * The spec's Overflow variants — "+N" style avatars.
+ */
+export const Overflow: Story = {
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      <Avatar
+        {...args}
+        color="overflow-unread"
+      >
+        +12
+      </Avatar>
+      <Avatar
+        {...args}
+        color="overflow-read"
+      >
+        +8
+      </Avatar>
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      <Avatar
+        {...args}
+        disabled
+        color="purple"
+      />
+      <Avatar
+        {...args}
+        disabled
+        color="overflow-read"
+      >
+        +8
+      </Avatar>
+    </div>
+  ),
+};
+
+export const Content: Story = {
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      <Avatar
+        {...args}
+        color="neutral"
+      >
+        2
+      </Avatar>
+      <Avatar
+        {...args}
+        color="green"
+      >
+        <span className="icon-[tabler--hand-stop] size-3 text-white"></span>
+      </Avatar>
+    </div>
+  ),
+};
+
+export const Group: Story = {
+  render: (args) => (
+    <AvatarGroup>
+      <Avatar
+        {...args}
+        color="purple"
+      />
+      <Avatar
+        {...args}
+        color="blue"
+      />
+      <Avatar
+        {...args}
+        color="pink"
+      />
+      <Avatar
+        {...args}
+        color="green"
+      />
+    </AvatarGroup>
+  ),
+};
+
+export default meta;
diff --git a/packages/react/src/components/avatar/avatar.tsx b/packages/react/src/components/avatar/avatar.tsx
new file mode 100644
index 0000000..e81d45b
--- /dev/null
+++ b/packages/react/src/components/avatar/avatar.tsx
@@ -0,0 +1,121 @@
+import { cn } from '~/utils';
+
+// The spec's `_multiplayer/*` fills paired with `special/textonmultiplayer*` text.
+const palette = {
+  purple: 'bg-figma-multiplayerpurple text-figma-textonmultiplayerpurple',
+  blue: 'bg-figma-multiplayerblue text-figma-textonmultiplayerblue',
+  pink: 'bg-figma-multiplayerpink text-figma-textonmultiplayerpink',
+  red: 'bg-figma-multiplayerred text-figma-textonmultiplayerred',
+  yellow: 'bg-figma-multiplayeryellow text-figma-textonmultiplayeryellow',
+  green: 'bg-figma-multiplayergreen text-figma-textonmultiplayergreen',
+  grey: 'bg-figma-multiplayergrey text-figma-textonmultiplayergrey',
+  neutral: 'bg-figma-secondary text-figma',
+  'overflow-unread': 'bg-figma-brand-secondary text-figma-onbrand',
+  'overflow-read': 'bg-figma-secondary text-figma',
+} as const;
+
+type AvatarColor = keyof typeof palette;
+
+const sizes = {
+  small: 'size-4 text-figma-body-small leading-figma-body-small font-figma-strong',
+  default: 'size-6 text-figma-body-large font-figma-default',
+  large: 'size-8 text-figma-body-large font-figma-strong',
+} as const;
+
+interface AvatarProps extends React.ComponentPropsWithRef<'span'> {
+  /**
+   * `default` is 24px (UI3 default user avatar), `small` 16px, `large` 32px.
+   */
+  size?: keyof typeof sizes;
+  shape?: 'circle' | 'square';
+  /**
+   * Photo source. Falls back to the `name` initial when omitted.
+   */
+  src?: string;
+  /**
+   * Display name — used for the `alt` text and the initials fallback.
+   */
+  name?: string;
+  /**
+   * Initials background color from the UI3 user palette. `overflow-unread` /
+   * `overflow-read` render the spec's "+N" overflow variants.
+   */
+  color?: AvatarColor;
+  /**
+   * The spec's `State=Disabled` — `bg-tertiary` fill with `text-default`.
+   */
+  disabled?: boolean;
+}
+
+/**
+ * A user avatar — photo, initials on a user-palette color, or custom children
+ * (count "+2", glyph).
+ */
+function Avatar({
+  size = 'default',
+  shape = 'circle',
+  src,
+  name,
+  color = 'purple',
+  disabled,
+  className,
+  children,
+  ref,
+  ...props
+}: AvatarProps) {
+  const content = src ? (
+    <img
+      src={src}
+      alt={name ?? ''}
+      className="size-full object-cover"
+    />
+  ) : (
+    (children ?? name?.charAt(0).toUpperCase() ?? '')
+  );
+  return (
+    <span
+      ref={ref}
+      // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- a span is intentional; the img case renders a real <img> inside
+      role="img"
+      aria-label={name}
+      className={cn(
+        'inline-flex select-none items-center justify-center overflow-hidden leading-none',
+        sizes[size],
+        shape === 'circle'
+          ? 'rounded-full'
+          : size === 'small'
+            ? 'rounded-figma-sm'
+            : 'rounded-figma-md',
+        !src && (disabled ? 'bg-figma-tertiary text-figma' : palette[color]),
+        className,
+      )}
+      {...props}
+    >
+      {content}
+    </span>
+  );
+}
+
+Avatar.displayName = 'Avatar';
+
+/**
+ * Overlapping avatar cluster inside a pill — the UI3 toolbar avatar pattern.
+ */
+function AvatarGroup({ className, ref, ...props }: React.ComponentPropsWithRef<'span'>) {
+  return (
+    <span
+      ref={ref}
+      className={cn(
+        'inline-flex items-center rounded-full bg-figma-secondary p-0.5',
+        '[&>*]:-ml-2 [&>*]:outline [&>*]:outline-2 [&>*]:outline-figma-bg [&>*:first-child]:ml-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+AvatarGroup.displayName = 'AvatarGroup';
+
+export { Avatar, AvatarGroup };
+export type { AvatarProps };
diff --git a/packages/react/src/components/avatar/index.ts b/packages/react/src/components/avatar/index.ts
new file mode 100644
index 0000000..a7424ca
--- /dev/null
+++ b/packages/react/src/components/avatar/index.ts
@@ -0,0 +1 @@
+export * from './avatar';
diff --git a/packages/react/src/components/badge/badge.stories.tsx b/packages/react/src/components/badge/badge.stories.tsx
new file mode 100644
index 0000000..206888e
--- /dev/null
+++ b/packages/react/src/components/badge/badge.stories.tsx
@@ -0,0 +1,174 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { CheckmarkIcon } from '~/icons';
+
+import { Badge, BadgeDot } from './badge';
+
+const meta = {
+  title: 'Components/Badge',
+  component: Badge,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    icon: {
+      table: { disable: true },
+    },
+  },
+  args: {
+    variant: 'light',
+    color: 'default',
+    size: 'default',
+    children: 'Badge',
+  },
+} satisfies Meta<React.ComponentPropsWithRef<typeof Badge>>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+const colors = [
+  'default',
+  'brand',
+  'component',
+  'danger',
+  'warning',
+  'success',
+  'selected',
+  'figjam',
+] as const;
+
+export const Gallery: Story = {
+  render: (args) => (
+    <div className="grid grid-cols-2 gap-4">
+      {colors.map((color) => (
+        <div
+          key={color}
+          className="flex items-center gap-2"
+        >
+          <Badge
+            {...args}
+            variant="strong"
+            color={color}
+          />
+          <Badge
+            {...args}
+            variant="light"
+            color={color}
+          />
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const BranchingAndMerging: Story = {
+  render: (args) => (
+    <div className="flex flex-col items-start gap-3">
+      <Badge
+        {...args}
+        variant="light"
+        color="merged"
+        size="large"
+        icon={<span className="size-1.5 rounded-full bg-figma-icon-success" />}
+      >
+        Merged
+      </Badge>
+      <Badge
+        {...args}
+        variant="light"
+        color="archived"
+        size="large"
+        icon={<span className="size-1.5 rounded-full bg-figma-icon-disabled" />}
+      >
+        Archived
+      </Badge>
+    </div>
+  ),
+};
+
+/**
+ * The "Badge small alt" family — subtle fills, no border.
+ */
+export const Alt: Story = {
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      <Badge
+        {...args}
+        variant="alt"
+        color="default"
+      >
+        Default
+      </Badge>
+      <Badge
+        {...args}
+        variant="alt"
+        color="count"
+      >
+        3
+      </Badge>
+      <Badge
+        {...args}
+        variant="alt"
+        color="count-inactive"
+      >
+        12
+      </Badge>
+      <Badge
+        {...args}
+        variant="alt"
+        color="strong"
+      >
+        Strong
+      </Badge>
+    </div>
+  ),
+};
+
+/**
+ * The spec's "Badge Dot" — a 9x9 `bg-default` pill with a 5x5 brand dot.
+ */
+export const Dot: Story = {
+  render: () => <BadgeDot />,
+};
+
+/**
+ * `size="large"` — 16px badge with 13px text.
+ */
+export const Large: Story = {
+  args: {
+    size: 'large',
+    children: 'Large badge',
+  },
+};
+
+export const WithIcons: Story = {
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      <Badge
+        {...args}
+        variant="light"
+        color="selected"
+        icon={
+          <CheckmarkIcon
+            size="3"
+            className="icon-figma-selected"
+          />
+        }
+      >
+        Selected
+      </Badge>
+      <Badge
+        {...args}
+        variant="light"
+        color="brand"
+      >
+        Beta feedback
+        <span className="icon-[mdi--open-in-new] size-3 icon-figma-brand"></span>
+      </Badge>
+    </div>
+  ),
+};
+
+export default meta;
diff --git a/packages/react/src/components/badge/badge.tsx b/packages/react/src/components/badge/badge.tsx
new file mode 100644
index 0000000..f7e84f6
--- /dev/null
+++ b/packages/react/src/components/badge/badge.tsx
@@ -0,0 +1,134 @@
+import { cn } from '~/utils';
+
+type BadgeColor =
+  | 'default'
+  | 'brand'
+  | 'component'
+  | 'danger'
+  | 'warning'
+  | 'success'
+  | 'selected'
+  | 'figjam'
+  | 'menu'
+  | 'merged'
+  | 'archived';
+
+type BadgeAltColor = 'default' | 'count' | 'count-inactive' | 'strong';
+
+const strongColors: Record<BadgeColor, string> = {
+  default: 'bg-figma-inverse text-figma-oninverse',
+  brand: 'bg-figma-brand text-figma-onbrand',
+  component: 'bg-figma-component text-figma-oncomponent',
+  danger: 'bg-figma-danger text-figma-ondanger',
+  // The spec's Warn strong fill is `icon-warning`, not `bg-warning`.
+  warning: 'bg-figma-icon-warning text-figma-onwarning',
+  success: 'bg-figma-success text-figma-onsuccess',
+  selected: 'bg-figma-selected-strong text-figma-onselected-strong',
+  figjam: 'bg-figma-figjam text-figma-onfigjam',
+  menu: 'bg-figma-toolbar text-figma-onbrand',
+  merged: 'bg-figma border-figma-success text-figma-success',
+  archived: 'bg-figma border-figma-disabled text-figma-disabled',
+};
+
+const lightColors: Record<BadgeColor, string> = {
+  default: 'border border-figma text-figma',
+  brand: 'border border-figma-brand text-figma-brand',
+  component: 'border border-figma-component text-figma-component',
+  danger: 'border border-figma-danger text-figma-danger',
+  warning: 'border border-figma-warning text-figma-warning',
+  success: 'border border-figma-success text-figma-success',
+  selected: 'border border-figma-onselected text-figma-brand',
+  figjam: 'border border-figma-figjam text-figma-figjam',
+  menu: 'border border-figma text-figma',
+  merged: 'border border-figma-success bg-figma text-figma-success',
+  archived: 'border border-figma-disabled bg-figma text-figma-disabled',
+};
+
+// The "Badge small alt" family — subtle fills, no border.
+const altColors: Record<BadgeAltColor, string> = {
+  default: 'bg-figma-tertiary text-figma',
+  count: 'bg-figma-selected text-figma',
+  'count-inactive': 'bg-figma-hover text-figma-secondary',
+  strong: 'bg-figma-inverse text-figma-oninverse',
+};
+
+interface BadgeProps extends React.ComponentPropsWithRef<'span'> {
+  /**
+   * `light` is the outline form, `strong` is filled, `alt` is the spec's
+   * "Badge small alt" subtle-fill family (borderless).
+   */
+  variant?: 'light' | 'strong' | 'alt';
+  color?: BadgeColor | BadgeAltColor;
+  /**
+   * `default` is the 16px "Badge small" (11px text); `large` is the spec's
+   * "Badge large" — also 16px but 13px text.
+   */
+  size?: 'default' | 'large';
+  /**
+   * Leading slot — e.g. a status dot or the selected check icon.
+   */
+  icon?: React.ReactNode;
+}
+
+/**
+ * A small status label (UI3 Badge) — "New", "Beta", "Merged", …
+ */
+function Badge({
+  variant = 'light',
+  color = 'default',
+  size = 'default',
+  icon,
+  className,
+  children,
+  ref,
+  ...props
+}: BadgeProps) {
+  const colors =
+    variant === 'alt'
+      ? (altColors[color as BadgeAltColor] ?? altColors.default)
+      : variant === 'strong'
+        ? (strongColors[color as BadgeColor] ?? strongColors.default)
+        : (lightColors[color as BadgeColor] ?? lightColors.default);
+  return (
+    <span
+      ref={ref}
+      className={cn(
+        'inline-flex items-center gap-1 rounded-figma-md select-none',
+        size === 'large' ? 'text-figma-body-large' : 'text-figma-body-medium',
+        'h-4 px-1',
+        colors,
+        className,
+      )}
+      {...props}
+    >
+      {icon}
+      {children}
+    </span>
+  );
+}
+
+Badge.displayName = 'Badge';
+
+/**
+ * The spec's "Badge Dot" — a 9x9 `bg-default` pill holding a 5x5
+ * `bg-brand` dot.
+ */
+function BadgeDot({ className, ref, ...props }: React.ComponentPropsWithRef<'span'>) {
+  return (
+    <span
+      ref={ref}
+      className={cn(
+        'inline-flex size-[9px] items-center justify-center rounded-figma-md bg-figma',
+        className,
+      )}
+      {...props}
+    >
+      <span className="size-[5px] rounded-[3px] bg-figma-brand" />
+    </span>
+  );
+}
+
+BadgeDot.displayName = 'BadgeDot';
+
+export { Badge, BadgeDot };
+export type { BadgeProps };
diff --git a/packages/react/src/components/badge/index.ts b/packages/react/src/components/badge/index.ts
new file mode 100644
index 0000000..1566eee
--- /dev/null
+++ b/packages/react/src/components/badge/index.ts
@@ -0,0 +1 @@
+export * from './badge';
diff --git a/packages/react/src/components/button/button-variants.tsx b/packages/react/src/components/button/button-variants.tsx
index 7ec0597..31585f0 100644
--- a/packages/react/src/components/button/button-variants.tsx
+++ b/packages/react/src/components/button/button-variants.tsx
@@ -2,16 +2,16 @@ import { cva, type VariantProps } from 'class-variance-authority';
 
 export const buttonVariants = cva(
   [
-    'h-8',
-    'px-3',
     'inline-flex',
     'items-center',
     'justify-center',
     'shrink-0',
-    'rounded-1.5',
-    'font-size-11',
+    'select-none',
+    'appearance-none',
+    'rounded-figma-md',
+    'text-figma-body-medium',
     'truncate',
-    'font-medium',
+    'font-figma-default',
     'border-none',
     'cursor-default',
     'transition-colors',
@@ -21,187 +21,98 @@ export const buttonVariants = cva(
     'outline-transparent',
     'bg-transparent',
     'bg-clip-border',
-    'not-disabled:focus-visible:(outline-2 -outline-offset-2)',
-    'disabled:cursor-not-allowed',
+    'disabled:cursor-default',
   ],
   {
     variants: {
       variant: {
-        solid: [
-          'focus:not-focus-visible:(outline-0 outline-transparent)',
-          'disabled:(text-figma-ondisabled bg-figma-disabled)',
-          'disabled:hover:bg-figma-disabled',
-          'disabled:active:(bg-figma-disabled outline-transparent)',
-          'disabled:focus-visible:outline-transparent',
+        primary: [
+          'bg-figma-brand text-figma-onbrand',
+          'active:bg-figma-brand-pressed aria-expanded:bg-figma-brand-pressed',
+          'focus-visible:outline-figma-border-selected focus-visible:shadow-figma-focus-inset',
+          'disabled:bg-figma-disabled disabled:text-figma-ondisabled',
+          'disabled:active:bg-figma-disabled disabled:aria-expanded:bg-figma-disabled',
+          'disabled:focus-visible:shadow-none disabled:focus-visible:outline-transparent',
         ],
-        outline: [
-          'disabled:(text-figma-disabled bg-transparent outline-figma-text-disabled)',
-          'disabled:hover:bg-transparent',
-          'disabled:active:bg-transparent',
+        secondary: [
+          'outline-figma-bordertranslucent text-figma',
+          'active:bg-figma-pressed aria-expanded:bg-figma-pressed',
+          'focus-visible:outline-figma-border-selected',
+          'disabled:outline-figma-border-disabled disabled:text-figma-disabled disabled:bg-transparent',
+          'disabled:active:bg-transparent disabled:aria-expanded:bg-transparent',
         ],
-        link: [
-          'hover:underline',
-          'disabled:(text-figma-disabled no-underline)',
+        destructive: [
+          'bg-figma-danger text-figma-ondanger',
+          'active:bg-figma-danger-pressed aria-expanded:bg-figma-danger-pressed',
+          'focus-visible:outline-figma-border-selected focus-visible:shadow-figma-focus-inset',
+          'disabled:bg-figma-disabled disabled:text-figma-ondisabled',
+          'disabled:active:bg-figma-disabled disabled:aria-expanded:bg-figma-disabled',
+          'disabled:focus-visible:shadow-none disabled:focus-visible:outline-transparent',
         ],
-      },
-      color: {
-        primary: 'btn-primary',
-        secondary: 'btn-secondary',
-        success: 'btn-success',
-        warning: 'btn-warning',
-        danger: 'btn-danger',
-      },
-    },
-    compoundVariants: [
-      {
-        variant: 'solid',
-        color: 'primary',
-        className: [
-          'text-figma-onbrand',
-          'bg-figma-brand',
-          'hover:bg-figma-brand-hover',
-          'active:bg-figma-brand-pressed',
-          'focus-visible:outline-figma-border-brand-strong',
-          'data-[state=open]:bg-figma-brand-pressed',
+        'secondary-destructive': [
+          'outline-figma-border-danger text-figma-danger',
+          'active:bg-figma-pressed aria-expanded:bg-figma-pressed',
+          'focus-visible:outline-figma-border-selected',
+          'disabled:outline-figma-border-disabled disabled:text-figma-disabled disabled:bg-transparent',
+          'disabled:active:bg-transparent disabled:aria-expanded:bg-transparent',
         ],
-      },
-      {
-        variant: 'solid',
-        color: 'secondary',
-        className: [
-          'text-figma',
-          'bg-figma-secondary',
-          'hover:bg-figma-tertiary',
-          'active:bg-figma-tertiary',
-          'focus-visible:outline-figma-border-brand-strong',
-          'data-[state=open]:bg-figma-brand-pressed',
+        inverse: [
+          'bg-figma-inverse text-figma-oninverse',
+          'focus-visible:outline-figma-border-selected-strong focus-visible:shadow-figma-focus-inset',
+          'disabled:bg-figma-disabled disabled:text-figma-ondisabled',
+          'disabled:focus-visible:shadow-none disabled:focus-visible:outline-transparent',
         ],
-      },
-      {
-        variant: 'solid',
-        color: 'success',
-        className: [
-          'text-figma-onsuccess',
-          'bg-figma-success',
-          'hover:bg-figma-success-hover',
-          'active:bg-figma-success-pressed',
-          'focus-visible:outline-figma-border-success-strong',
-          'data-[state=open]:bg-figma-success-pressed',
+        success: [
+          'bg-figma-success text-figma-onbrand',
+          'active:bg-figma-success-pressed aria-expanded:bg-figma-success-pressed',
+          'focus-visible:outline-figma-border-selected focus-visible:shadow-figma-focus-inset',
+          'disabled:bg-figma-disabled disabled:text-figma-ondisabled',
+          'disabled:active:bg-figma-disabled disabled:aria-expanded:bg-figma-disabled',
+          'disabled:focus-visible:shadow-none disabled:focus-visible:outline-transparent',
         ],
-      },
-      {
-        variant: 'solid',
-        color: 'warning',
-        className: [
-          'text-figma-onwarning',
-          'bg-figma-warning',
-          'hover:bg-figma-warning-hover',
-          'active:bg-figma-warning-pressed',
-          'focus-visible:outline-figma-border-warning-strong',
-          'data-[state=open]:bg-figma-warning-pressed',
-        ],
-      },
-      {
-        variant: 'solid',
-        color: 'danger',
-        className: [
-          'text-figma-ondanger',
-          'bg-figma-danger',
-          'hover:bg-figma-danger-hover',
-          'active:bg-figma-danger-pressed',
-          'focus-visible:outline-figma-border-danger-strong',
-          'data-[state=open]:bg-figma-danger-pressed',
+        figjam: [
+          'bg-figma-figjam text-figma-onfigjam',
+          'active:bg-figma-figjam-pressed aria-expanded:bg-figma-figjam-pressed',
+          'focus-visible:outline-figma-border-selected focus-visible:shadow-figma-focus-inset',
+          'disabled:bg-figma-disabled disabled:text-figma-ondisabled',
+          'disabled:active:bg-figma-disabled disabled:aria-expanded:bg-figma-disabled',
+          'disabled:focus-visible:shadow-none disabled:focus-visible:outline-transparent',
         ],
-      },
-      {
-        variant: 'outline',
-        color: 'primary',
-        className: [
+        link: [
           'text-figma-brand',
-          'outline-figma-text-brand',
-          'hover:bg-figma-brand-tertiary',
-          'active:bg-figma-brand-tertiary',
-          'focus-visible:outline-figma-border-brand-strong',
-          'data-[state=open]:bg-figma-brand-tertiary',
-        ],
-      },
-      {
-        variant: 'outline',
-        color: 'secondary',
-        className: [
-          'text-figma',
-          'outline-figma-text',
-          'hover:bg-figma-pressed',
-          'active:bg-figma-pressed',
-          'focus-visible:outline-figma-border-brand-strong',
-          'data-[state=open]:bg-figma-pressed',
-        ],
-      },
-      {
-        variant: 'outline',
-        color: 'success',
-        className: [
-          'text-figma-success',
-          'outline-figma-text-success',
-          'hover:bg-figma-success-tertiary',
-          'active:bg-figma-success-tertiary',
-          'focus-visible:outline-figma-border-success-strong',
-          'data-[state=open]:bg-figma-success-tertiary',
+          'active:bg-figma-brand-tertiary aria-expanded:bg-figma-brand-tertiary',
+          'focus-visible:outline-figma-border-selected',
+          'disabled:text-figma-disabled disabled:bg-transparent',
+          'disabled:active:bg-transparent disabled:aria-expanded:bg-transparent',
         ],
-      },
-      {
-        variant: 'outline',
-        color: 'warning',
-        className: [
-          'text-figma-warning',
-          'outline-figma-text-warning',
-          'hover:bg-figma-warning-tertiary',
-          'active:bg-figma-warning-tertiary',
-          'focus-visible:outline-figma-border-warning-strong',
-          'data-[state=open]:bg-figma-warning-tertiary',
-        ],
-      },
-      {
-        variant: 'outline',
-        color: 'danger',
-        className: [
+        'link-danger': [
           'text-figma-danger',
-          'outline-figma-text-danger',
-          'hover:bg-figma-danger-tertiary',
-          'active:bg-figma-danger-tertiary',
-          'focus-visible:outline-figma-border-danger-strong',
-          'data-[state=open]:bg-figma-danger-tertiary',
+          'active:bg-figma-danger-tertiary aria-expanded:bg-figma-danger-tertiary',
+          'focus-visible:outline-figma-border-danger',
+          'disabled:text-figma-disabled disabled:bg-transparent',
+          'disabled:active:bg-transparent disabled:aria-expanded:bg-transparent',
+        ],
+        ghost: [
+          'text-figma',
+          'not-disabled:hover:bg-figma-bgtransparent-secondary-hover',
+          'active:bg-figma-bgtransparent-secondary-pressed aria-expanded:bg-figma-bgtransparent-secondary-pressed',
+          'focus-visible:outline-figma-border-selected',
+          'disabled:text-figma-disabled disabled:bg-transparent',
+          'disabled:active:bg-transparent disabled:aria-expanded:bg-transparent',
         ],
       },
-      {
-        variant: 'link',
-        color: 'primary',
-        className: ['text-figma-brand-secondary'],
-      },
-      {
-        variant: 'link',
-        color: 'secondary',
-        className: ['text-figma'],
-      },
-      {
-        variant: 'link',
-        color: 'success',
-        className: ['text-figma-success'],
-      },
-      {
-        variant: 'link',
-        color: 'warning',
-        className: ['text-figma-warning'],
+      size: {
+        default: 'h-6 px-2',
+        large: 'h-8 px-3',
+        wide: 'h-6 w-full px-2 justify-center',
       },
-      {
-        variant: 'link',
-        color: 'danger',
-        className: ['text-figma-danger'],
+      icon: {
+        true: 'pl-1',
       },
-    ],
+    },
     defaultVariants: {
-      variant: 'solid',
-      color: 'primary',
+      variant: 'primary',
+      size: 'default',
     },
   },
 );
diff --git a/packages/react/src/components/button/button.stories.tsx b/packages/react/src/components/button/button.stories.tsx
index 296d21e..1dd2822 100644
--- a/packages/react/src/components/button/button.stories.tsx
+++ b/packages/react/src/components/button/button.stories.tsx
@@ -1,105 +1,60 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { PlusIcon } from '~/icons';
 
 import { Button } from './button';
 
 const meta = {
   title: 'Components/Button',
   component: Button,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: 'radio',
-      options: ['solid', 'outline', 'link'],
-      table: {
-        defaultValue: { summary: 'solid' },
-      },
-    },
-    color: {
-      control: 'radio',
-      options: ['primary', 'secondary', 'success', 'warning', 'danger'],
-      table: {
-        defaultValue: { summary: 'primary' },
-      },
-    },
-    disabled: {
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-  },
-  args: {
-    variant: 'solid',
-    color: 'primary',
-    disabled: false,
-  },
-  render: args => <Button {...args}>Figma</Button>,
+  parameters: { layout: 'centered' },
 } satisfies Meta<typeof Button>;
 
+export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = {
-  args: {
-    color: 'primary',
-  },
+export const Primary: Story = { args: { children: 'Primary' } };
+export const Secondary: Story = { args: { variant: 'secondary', children: 'Secondary' } };
+export const Destructive: Story = { args: { variant: 'destructive', children: 'Destructive' } };
+export const SecondaryDestructive: Story = {
+  args: { variant: 'secondary-destructive', children: 'Secondary destructive' },
 };
-
-export const Secondary: Story = {
-  args: {
-    color: 'secondary',
-  },
-};
-
-export const Success: Story = {
-  args: {
-    color: 'success',
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    color: 'warning',
-  },
-};
-
-export const Danger: Story = {
-  args: {
-    color: 'danger',
-  },
-};
-
+export const Inverse: Story = { args: { variant: 'inverse', children: 'Inverse' } };
+export const Success: Story = { args: { variant: 'success', children: 'Success' } };
+export const FigJam: Story = { args: { variant: 'figjam', children: 'Open in FigJam' } };
+export const Link: Story = { args: { variant: 'link', children: 'Link' } };
+export const LinkDanger: Story = { args: { variant: 'link-danger', children: 'Link danger' } };
+export const Ghost: Story = { args: { variant: 'ghost', children: 'Ghost' } };
+export const Large: Story = { args: { size: 'large', children: 'Large' } };
+export const Wide: Story = { args: { size: 'wide', children: 'Wide' } };
 export const WithIcon: Story = {
-  render: args => (
-    <Button {...args}>
-      <svg
-        className="mr-1"
-        xmlns="http://www.w3.org/2000/svg"
-        width="8"
-        height="8"
-        viewBox="0 0 8 8"
-      >
-        <path
-          fill="currentColor"
-          fillOpacity="1"
-          fillRule="evenodd"
-          stroke="none"
-          d="M3.5 3.5V0h1v3.5H8v1H4.5V8h-1V4.5H0v-1h3.5z"
-        >
-        </path>
-      </svg>
-      Design File
-    </Button>
-  ),
+  args: { icon: <PlusIcon />, children: 'With icon' },
 };
-
-export const WithSpinner: Story = {
-  render: args => (
-    <Button {...args}>
-      <span className="i-tabler:loader-2 mx-2 size-4 animate-spin"></span>
-    </Button>
+export const Disabled: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      {(
+        [
+          'primary',
+          'secondary',
+          'destructive',
+          'secondary-destructive',
+          'inverse',
+          'success',
+          'figjam',
+          'link',
+          'link-danger',
+          'ghost',
+        ] as const
+      ).map((variant) => (
+        <Button
+          key={variant}
+          variant={variant}
+          disabled
+        >
+          {variant}
+        </Button>
+      ))}
+    </div>
   ),
 };
-
-export default meta;
diff --git a/packages/react/src/components/button/button.tsx b/packages/react/src/components/button/button.tsx
index c2a92d7..ef1c835 100644
--- a/packages/react/src/components/button/button.tsx
+++ b/packages/react/src/components/button/button.tsx
@@ -1,34 +1,33 @@
-import { Slot } from '@radix-ui/react-slot';
+import { Button as BaseButton } from '@base-ui/react/button';
 
-import { cn } from '~/utils';
+import { addClassName } from '~/utils';
 
 import { buttonVariants, type ButtonVariantsProps } from './button-variants';
 
-interface ButtonProps extends Omit<React.ComponentPropsWithRef<'button'>, 'color'>, ButtonVariantsProps {
+interface ButtonProps
+  extends
+    Omit<React.ComponentPropsWithRef<typeof BaseButton>, 'color'>,
+    Omit<ButtonVariantsProps, 'class' | 'className' | 'icon'> {
   /**
-   * Change the default rendered element for the one passed as a child, merging their props and behavior.
-   *
-   * Read [Composition](https://www.radix-ui.com/primitives/docs/guides/composition) guide for more details.
+   * Leading icon slot (Design "Icon Lead") — rendered in a 24px box.
    */
-  asChild?: boolean;
+  icon?: React.ReactNode;
 }
 
-const Button: React.FC<ButtonProps> = ({ className, variant, color, asChild = false, ref, ...props }) => {
-  const Component = asChild ? Slot : 'button';
+function Button({ className, variant, size, icon, children, ref, ...props }: ButtonProps) {
   return (
-    <Component
+    <BaseButton
       ref={ref}
-      className={cn(
-        buttonVariants({
-          variant,
-          color,
-          className,
-        }),
-      )}
+      className={addClassName(className, buttonVariants({ variant, size, icon: icon != null }))}
       {...props}
-    />
+    >
+      {icon ? (
+        <span className="flex size-6 shrink-0 items-center justify-center">{icon}</span>
+      ) : null}
+      {children}
+    </BaseButton>
   );
-};
+}
 
 Button.displayName = 'Button';
 
diff --git a/packages/react/src/components/checkbox/checkbox.stories.tsx b/packages/react/src/components/checkbox/checkbox.stories.tsx
index 2c05c20..25880b4 100644
--- a/packages/react/src/components/checkbox/checkbox.stories.tsx
+++ b/packages/react/src/components/checkbox/checkbox.stories.tsx
@@ -1,8 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 
 import { Label } from '../label';
-
 import { Checkbox } from './checkbox';
 
 const meta = {
@@ -24,7 +23,7 @@ const meta = {
     indeterminate: false,
     checked: false,
   },
-  render: (args) => {
+  render: function Render(args) {
     const [{ checked, indeterminate }, updateArgs] = useArgs();
 
     return (
@@ -66,6 +65,55 @@ export const Disabled: Story = {
   },
 };
 
+export const Variants: Story = {
+  render: function Render(args) {
+    const [{ checked }, updateArgs] = useArgs();
+    const variants = ['default', 'muted', 'ghost'] as const;
+    return (
+      <div className="flex flex-col gap-3">
+        {variants.map((variant) => (
+          <div
+            key={variant}
+            className="flex items-center gap-2"
+          >
+            <Checkbox
+              {...args}
+              variant={variant}
+              checked={checked}
+              onCheckedChange={(value) => updateArgs({ checked: value })}
+            />
+            <Label>{variant}</Label>
+          </div>
+        ))}
+      </div>
+    );
+  },
+};
+
+export const WithDescription: Story = {
+  render: function Render(args) {
+    const [{ checked }, updateArgs] = useArgs();
+    return (
+      <div className="flex w-64 items-start gap-2">
+        <Checkbox
+          id="checkbox-desc"
+          {...args}
+          variant="muted"
+          checked={checked}
+          onCheckedChange={(value) => updateArgs({ checked: value })}
+        />
+        <div className="flex flex-col">
+          <Label htmlFor="checkbox-desc">Off, Normal + Muted</Label>
+          <span className="text-figma-body-medium text-figma-secondary">
+            Helpful description of the setting which may briefly highlight side effects or
+            conditions of the setting.
+          </span>
+        </div>
+      </div>
+    );
+  },
+};
+
 export const WithLabel: Story = {
   argTypes: {
     indeterminate: {
@@ -74,11 +122,11 @@ export const WithLabel: Story = {
       },
     },
   },
-  render: (args) => {
+  render: function Render(args) {
     const [{ checked }, updateArgs] = useArgs();
 
     return (
-      <div className="flex items-center gap-1">
+      <div className="flex items-center gap-2">
         <Checkbox
           id="checkbox"
           {...args}
@@ -87,9 +135,7 @@ export const WithLabel: Story = {
             updateArgs({ checked: !checked });
           }}
         />
-        <Label htmlFor="checkbox">
-          Accept terms and conditions.
-        </Label>
+        <Label htmlFor="checkbox">Accept terms and conditions.</Label>
       </div>
     );
   },
diff --git a/packages/react/src/components/checkbox/checkbox.tsx b/packages/react/src/components/checkbox/checkbox.tsx
index 80d1e2e..18087c0 100644
--- a/packages/react/src/components/checkbox/checkbox.tsx
+++ b/packages/react/src/components/checkbox/checkbox.tsx
@@ -1,61 +1,119 @@
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
 
-import { cn } from '~/utils';
+import { CheckmarkIcon, CheckmarkIndeterminateIcon } from '~/icons';
+import { addClassName } from '~/utils';
 
 interface CheckboxProps extends React.ComponentPropsWithRef<typeof CheckboxPrimitive.Root> {
-  indeterminate?: boolean;
+  /**
+   * `muted` renders a de-emphasized grey box, `ghost` a solid dark box (for
+   * inverse contexts); both per the UI3 spec variants.
+   */
+  variant?: 'default' | 'muted' | 'ghost';
 }
 
 /**
  * A control that allows the user to toggle between checked and not checked.
- * - [Docs](https://www.radix-ui.com/docs/primitives/components/checkbox)
- * - [API Reference](https://www.radix-ui.com/primitives/docs/components/checkbox#api-reference)
+ *
+ * - [Docs](https://base-ui.com/react/components/checkbox)
+ * - [API Reference](https://base-ui.com/react/components/checkbox#api)
  */
-const Checkbox: React.FC<CheckboxProps> = ({ className, checked, indeterminate = false, disabled, ref, ...props }) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      'peer',
-      'relative',
-      'size-3',
-      'inline-flex',
-      'items-center',
-      'justify-center',
-      'shrink-0',
-      'cursor-default',
-      'rounded-0.5',
-      'outline-solid',
-      'outline-1',
-      'outline-transparent',
-      'border',
-      'border-solid',
-      'border-figma-icon',
-      'bg-figma',
-      disabled
-        ? [
-            'cursor-not-allowed',
-            'text-figma-disabled',
-            'border-figma-bg-disabled',
-            'data-[state=checked]:(text-figma-ondisabled bg-figma-disabled)',
-          ]
-        : [
-            'focus:(border-figma-selected-strong outline-figma-border-selected-strong)',
-            'data-[state=checked]:focus:border-figma-bg',
-            'data-[state=checked]:(bg-figma-brand text-figma-onbrand border-figma-bg-brand)',
-          ],
-      className,
-    )}
-    {...props}
-    checked={indeterminate ? 'indeterminate' : checked}
-    disabled={disabled}
-  >
-    <CheckboxPrimitive.Indicator className="absolute inline-block size-2.5" asChild>
-      {indeterminate ? <span className="i-mdi-minus-thick"></span> : <span className="i-mdi-check-bold -mt-1px"></span>}
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-);
+function Checkbox({
+  className,
+  checked,
+  indeterminate = false,
+  disabled,
+  variant = 'default',
+  ref,
+  ...props
+}: CheckboxProps) {
+  return (
+    <CheckboxPrimitive.Root
+      ref={ref}
+      className={addClassName(
+        className,
+        'peer',
+        'relative',
+        'size-4',
+        'my-1',
+        'inline-flex',
+        'items-center',
+        'justify-center',
+        'shrink-0',
+        'cursor-default',
+        'rounded-figma-md',
+        'outline-solid',
+        'outline-1',
+        '-outline-offset-1',
+        'outline-transparent',
+        'border',
+        'border-solid',
+        variant === 'muted'
+          ? [
+              'border-figma',
+              'bg-figma-secondary',
+              'data-checked:icon-figma-secondary data-checked:focus-visible:icon-figma',
+              'data-indeterminate:icon-figma',
+              disabled
+                ? [
+                    'border-figma-border-disabled bg-transparent',
+                    'data-checked:border-transparent data-checked:bg-figma-disabled data-checked:icon-figma-bg',
+                    'data-indeterminate:border-transparent data-indeterminate:bg-figma-disabled data-indeterminate:icon-figma-disabled',
+                  ]
+                : [
+                    'focus-visible:border-figma-border-selected-strong',
+                    'data-checked:focus-visible:shadow-[inset_0_0_0_2px_var(--figma-color-bg)]',
+                    'data-indeterminate:focus-visible:shadow-[inset_0_0_0_2px_var(--figma-color-bg)]',
+                  ],
+            ]
+          : variant === 'ghost'
+            ? [
+                'border-0',
+                'bg-figma-menu',
+                'data-checked:icon-figma-onbrand',
+                'data-indeterminate:icon-figma-onbrand',
+                disabled
+                  ? [
+                      'bg-figma-icon-disabled',
+                      'data-checked:bg-figma-icon-disabled data-checked:icon-figma-bg',
+                      'data-indeterminate:bg-figma-icon-disabled data-indeterminate:icon-figma-disabled',
+                    ]
+                  : [
+                      'focus-visible:border focus-visible:border-figma-border-selected-strong',
+                      'data-checked:focus-visible:border-figma-border-selected',
+                      'data-indeterminate:focus-visible:border-figma-border-selected',
+                    ],
+              ]
+            : [
+                'border-figma',
+                'bg-figma-secondary',
+                'data-checked:border-figma-border-selected-strong data-checked:bg-figma-brand data-checked:icon-figma-onbrand',
+                'data-indeterminate:border-figma-border-selected-strong data-indeterminate:bg-figma-brand data-indeterminate:icon-figma-onbrand',
+                disabled
+                  ? [
+                      'border-figma-border-disabled bg-transparent',
+                      'data-checked:border-transparent data-checked:bg-figma-disabled data-checked:icon-figma-bg',
+                      'data-indeterminate:border-transparent data-indeterminate:bg-figma-disabled data-indeterminate:icon-figma-disabled',
+                    ]
+                  : [
+                      'focus-visible:border-figma-border-selected-strong',
+                      'data-checked:focus-visible:shadow-[inset_0_0_0_2px_var(--figma-color-bg)]',
+                      'data-indeterminate:focus-visible:shadow-[inset_0_0_0_2px_var(--figma-color-bg)]',
+                    ],
+              ],
+      )}
+      {...props}
+      checked={checked}
+      indeterminate={indeterminate}
+      disabled={disabled}
+    >
+      <CheckboxPrimitive.Indicator className="absolute inset-0 flex items-center justify-center">
+        {indeterminate ? <CheckmarkIndeterminateIcon size="4" /> : <CheckmarkIcon size="4" />}
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
 
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+Checkbox.displayName = 'Checkbox';
 
 export { Checkbox };
 
diff --git a/packages/react/src/components/context-menu/context-menu.stories.tsx b/packages/react/src/components/context-menu/context-menu.stories.tsx
new file mode 100644
index 0000000..9c52950
--- /dev/null
+++ b/packages/react/src/components/context-menu/context-menu.stories.tsx
@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { cn } from '~/utils';
+
+import * as ContextMenu from './context-menu';
+
+type StoryArgs = React.ComponentPropsWithRef<typeof ContextMenu.Content>;
+
+const meta = {
+  title: 'Components/ContextMenu',
+  component: ContextMenu.Content,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<StoryArgs>;
+
+type Story = StoryObj<typeof meta>;
+
+function TriggerBox({ className, ...props }: React.ComponentPropsWithRef<'div'>) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        'flex h-20 w-50 items-center justify-center rounded-md border border-figma-border text-figma-text-secondary',
+        className,
+      )}
+    >
+      Right click here
+    </div>
+  );
+}
+
+export const Default: Story = {
+  render: function Render() {
+    return (
+      <ContextMenu.Root>
+        <ContextMenu.Trigger render={<TriggerBox />} />
+        <ContextMenu.Content className="min-w-50">
+          <ContextMenu.Item>Paste here</ContextMenu.Item>
+          <ContextMenu.Separator />
+          <ContextMenu.Item>Show/Hide UI</ContextMenu.Item>
+          <ContextMenu.Item>Show/Hide comments</ContextMenu.Item>
+          <ContextMenu.Separator />
+          <ContextMenu.Item>Cursor chat</ContextMenu.Item>
+          <ContextMenu.Item>Quick actions</ContextMenu.Item>
+          <ContextMenu.Sub>
+            <ContextMenu.SubTrigger>Plugins</ContextMenu.SubTrigger>
+            <ContextMenu.SubContent className="min-w-50">
+              <ContextMenu.Group>
+                <ContextMenu.Label>Recents</ContextMenu.Label>
+                <ContextMenu.Item>OkColor</ContextMenu.Item>
+                <ContextMenu.Item>Noise & Texture</ContextMenu.Item>
+                <ContextMenu.Item>Bold Blobs</ContextMenu.Item>
+              </ContextMenu.Group>
+              <ContextMenu.Separator />
+              <ContextMenu.Item>Run last plugin</ContextMenu.Item>
+              <ContextMenu.Item>Manage plugins…</ContextMenu.Item>
+            </ContextMenu.SubContent>
+          </ContextMenu.Sub>
+        </ContextMenu.Content>
+      </ContextMenu.Root>
+    );
+  },
+};
+
+export const WithCheckboxes: Story = {
+  render: function Render() {
+    return (
+      <ContextMenu.Root>
+        <ContextMenu.Trigger render={<TriggerBox />} />
+        <ContextMenu.Content className="min-w-50">
+          <ContextMenu.Item>Show version history</ContextMenu.Item>
+          <ContextMenu.Item>Publish library…</ContextMenu.Item>
+          <ContextMenu.Item>Export…</ContextMenu.Item>
+          <ContextMenu.Separator />
+          <ContextMenu.Sub>
+            <ContextMenu.SubTrigger>File color profile…</ContextMenu.SubTrigger>
+            <ContextMenu.SubContent className="min-w-40">
+              <ContextMenu.CheckboxItem checked>Display P3</ContextMenu.CheckboxItem>
+              <ContextMenu.CheckboxItem>Change to sRGB</ContextMenu.CheckboxItem>
+            </ContextMenu.SubContent>
+          </ContextMenu.Sub>
+          <ContextMenu.Separator />
+          <ContextMenu.Item>Duplicate</ContextMenu.Item>
+          <ContextMenu.Item>Rename</ContextMenu.Item>
+          <ContextMenu.Item>Move to project…</ContextMenu.Item>
+          <ContextMenu.Item>Delete…</ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Root>
+    );
+  },
+};
+
+export default meta;
diff --git a/packages/react/src/components/context-menu/context-menu.tsx b/packages/react/src/components/context-menu/context-menu.tsx
new file mode 100644
index 0000000..a0912ce
--- /dev/null
+++ b/packages/react/src/components/context-menu/context-menu.tsx
@@ -0,0 +1,317 @@
+import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';
+
+import { CheckmarkIcon, ChevronRightIcon, CircleIcon } from '~/icons';
+import { addClassName, useControllableState } from '~/utils';
+
+import { ItemBadge, ItemCheck, ItemShortcut } from '../dropdown-menu/dropdown-menu';
+import {
+  menuContentClassName,
+  menuItemClassName,
+  menuItemIndicatorClassName,
+  menuLabelClassName,
+  menuSeparatorClassName,
+} from '../menu/menu-classes';
+import { Switch } from '../switch/switch';
+
+type PositionerProps = React.ComponentPropsWithRef<typeof ContextMenuPrimitive.Positioner>;
+
+type PortalContainer = React.ComponentProps<typeof ContextMenuPrimitive.Portal>['container'];
+
+const ContextMenuRoot = ContextMenuPrimitive.Root;
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+
+function ContextMenuGroup({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithRef<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group
+      ref={ref}
+      className={addClassName(
+        className,
+        'py-2 first:pt-0 last:pb-0 not-first:mt-[7.5px] not-first:pt-[7.5px] not-first:border-t not-first:border-solid not-first:border-figma-border-menu',
+      )}
+      {...props}
+    />
+  );
+}
+
+const ContextMenuSub = ContextMenuPrimitive.SubmenuRoot;
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+function ContextMenuSubTrigger({
+  className,
+  children,
+  ref,
+  ...props
+}: React.ComponentPropsWithRef<typeof ContextMenuPrimitive.SubmenuTrigger>) {
+  return (
+    <ContextMenuPrimitive.SubmenuTrigger
+      ref={ref}
+      className={addClassName(
+        className,
+        menuItemClassName,
+        'justify-between',
+        'data-disabled:pointer-events-none data-disabled:text-figma-menu-disabled data-disabled:icon-figma-menu-disabled',
+      )}
+      {...props}
+    >
+      {children}
+      <span className="ml-auto -mr-2 flex items-center pl-6">
+        <ChevronRightIcon />
+      </span>
+    </ContextMenuPrimitive.SubmenuTrigger>
+  );
+}
+
+ContextMenuSubTrigger.displayName = 'ContextMenuSubTrigger';
+
+interface ContextMenuContentProps extends React.ComponentPropsWithRef<
+  typeof ContextMenuPrimitive.Popup
+> {
+  container?: PortalContainer;
+  side?: PositionerProps['side'];
+  align?: PositionerProps['align'];
+  sideOffset?: PositionerProps['sideOffset'];
+  alignOffset?: PositionerProps['alignOffset'];
+  collisionPadding?: PositionerProps['collisionPadding'];
+}
+
+function ContextMenuPopup({
+  className,
+  container,
+  side,
+  align,
+  sideOffset,
+  alignOffset,
+  collisionPadding,
+  ref,
+  ...props
+}: ContextMenuContentProps) {
+  return (
+    <ContextMenuPrimitive.Portal container={container}>
+      <ContextMenuPrimitive.Positioner
+        className="z-50"
+        side={side}
+        align={align}
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
+        collisionPadding={collisionPadding}
+      >
+        <ContextMenuPrimitive.Popup
+          ref={ref}
+          className={addClassName(className, menuContentClassName)}
+          {...props}
+        />
+      </ContextMenuPrimitive.Positioner>
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+function ContextMenuSubContent(props: ContextMenuContentProps) {
+  return <ContextMenuPopup {...props} />;
+}
+
+ContextMenuSubContent.displayName = 'ContextMenuSubContent';
+
+/**
+ * Displays a menu at the pointer position, triggered by a right-click.
+ *
+ * - [Docs](https://base-ui.com/react/components/context-menu)
+ * - [API Reference](https://base-ui.com/react/components/context-menu#api-reference)
+ */
+function ContextMenuContent({ className, sideOffset = 4, ...props }: ContextMenuContentProps) {
+  return (
+    <ContextMenuPopup
+      className={addClassName(className, 'group')}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  );
+}
+
+ContextMenuContent.displayName = 'ContextMenuContent';
+
+function ContextMenuItem({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithRef<typeof ContextMenuPrimitive.Item>) {
+  return (
+    <ContextMenuPrimitive.Item
+      ref={ref}
+      className={addClassName(
+        className,
+        menuItemClassName,
+        'data-disabled:pointer-events-none data-disabled:text-figma-menu-disabled data-disabled:icon-figma-menu-disabled',
+      )}
+      {...props}
+    />
+  );
+}
+
+ContextMenuItem.displayName = 'ContextMenuItem';
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  ref,
+  ...props
+}: React.ComponentPropsWithRef<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      ref={ref}
+      className={addClassName(
+        className,
+        menuItemClassName,
+        'pl-6 data-disabled:pointer-events-none data-disabled:text-figma-menu-disabled data-disabled:icon-figma-menu-disabled',
+      )}
+      {...props}
+    >
+      <ContextMenuPrimitive.CheckboxItemIndicator
+        className={menuItemIndicatorClassName}
+        render={<CheckmarkIcon size="4" />}
+      />
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+ContextMenuCheckboxItem.displayName = 'ContextMenuCheckboxItem';
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ref,
+  ...props
+}: React.ComponentPropsWithRef<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      ref={ref}
+      className={addClassName(
+        className,
+        menuItemClassName,
+        'pl-6 data-disabled:pointer-events-none data-disabled:text-figma-menu-disabled data-disabled:icon-figma-menu-disabled',
+      )}
+      {...props}
+    >
+      <ContextMenuPrimitive.RadioItemIndicator className="absolute left-1 w-4 flex items-center justify-center">
+        <CircleIcon size="4" />
+      </ContextMenuPrimitive.RadioItemIndicator>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+ContextMenuRadioItem.displayName = 'ContextMenuRadioItem';
+
+/**
+ * Menu row/Toggle from the spec — a `menuitemcheckbox` row with a Switch
+ * cell on the leading side. Clicking the row toggles the switch; the menu
+ * stays open (`closeOnClick={false}` by default).
+ */
+function ContextMenuItemSwitch({
+  className,
+  children,
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  disabled,
+  ref,
+  ...props
+}: React.ComponentPropsWithRef<typeof ContextMenuPrimitive.CheckboxItem>) {
+  const [isChecked, setChecked] = useControllableState<boolean>({
+    prop: checked,
+    defaultProp: defaultChecked ?? false,
+  });
+
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      ref={ref}
+      checked={isChecked}
+      disabled={disabled}
+      onCheckedChange={(next, details) => {
+        setChecked(next);
+        onCheckedChange?.(next, details);
+      }}
+      className={addClassName(
+        className,
+        menuItemClassName,
+        'px-4 gap-2',
+        'data-disabled:pointer-events-none data-disabled:text-figma-menu-disabled data-disabled:icon-figma-menu-disabled',
+      )}
+      {...props}
+    >
+      <span className="flex h-6 w-8 shrink-0 items-center">
+        <Switch
+          render={<span aria-hidden />}
+          checked={isChecked}
+          disabled={disabled}
+          tabIndex={-1}
+          className="pointer-events-none"
+        />
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+ContextMenuItemSwitch.displayName = 'ContextMenuItemSwitch';
+
+/**
+ * Must be rendered inside `Group` or `RadioGroup`.
+ */
+function ContextMenuLabel({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithRef<typeof ContextMenuPrimitive.GroupLabel>) {
+  return (
+    <ContextMenuPrimitive.GroupLabel
+      ref={ref}
+      className={addClassName(className, menuLabelClassName)}
+      {...props}
+    />
+  );
+}
+
+ContextMenuLabel.displayName = 'ContextMenuLabel';
+
+function ContextMenuSeparator({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithRef<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      ref={ref}
+      className={addClassName(className, menuSeparatorClassName)}
+      {...props}
+    />
+  );
+}
+
+ContextMenuSeparator.displayName = 'ContextMenuSeparator';
+
+export {
+  ContextMenuRoot as Root,
+  ContextMenuTrigger as Trigger,
+  ContextMenuCheckboxItem as CheckboxItem,
+  ContextMenuContent as Content,
+  ContextMenuGroup as Group,
+  ContextMenuItem as Item,
+  ItemBadge,
+  ItemCheck,
+  ItemShortcut,
+  ContextMenuItemSwitch as ItemSwitch,
+  ContextMenuLabel as Label,
+  ContextMenuRadioGroup as RadioGroup,
+  ContextMenuRadioItem as RadioItem,
+  ContextMenuSeparator as Separator,
+  ContextMenuSub as Sub,
+  ContextMenuSubTrigger as SubTrigger,
+  ContextMenuSubContent as SubContent,
+};
diff --git a/packages/react/src/components/context-menu/index.ts b/packages/react/src/components/context-menu/index.ts
new file mode 100644
index 0000000..e785968
--- /dev/null
+++ b/packages/react/src/components/context-menu/index.ts
@@ -0,0 +1 @@
+export * as ContextMenu from './context-menu';
diff --git a/packages/react/src/components/dialog/dialog.stories.tsx b/packages/react/src/components/dialog/dialog.stories.tsx
index e2d85ef..2de18b8 100644
--- a/packages/react/src/components/dialog/dialog.stories.tsx
+++ b/packages/react/src/components/dialog/dialog.stories.tsx
@@ -1,13 +1,12 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
-import { Root as Portal } from '@radix-ui/react-portal';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { createPortal } from 'react-dom';
+import { useArgs } from 'storybook/preview-api';
 
+import { ActionIcon } from '../action-icon';
 import { Button } from '../button';
-import { Label } from '../label';
 import { Input } from '../input';
-import { ActionIcon } from '../action-icon';
+import { Label } from '../label';
 import { toast, Toaster } from '../toast';
-
 import * as Dialog from './dialog';
 
 type StoryArgs = React.ComponentPropsWithRef<typeof Dialog.Content> & {
@@ -15,7 +14,7 @@ type StoryArgs = React.ComponentPropsWithRef<typeof Dialog.Content> & {
   open?: boolean;
 };
 
-const meta = {
+const meta: Meta = {
   title: 'Components/Dialog',
   component: Dialog.Content,
   parameters: {
@@ -27,43 +26,56 @@ const meta = {
     open: false,
   },
   decorators: [
-    Story => (
+    (Story) => (
       <>
         <Story />
-        <Portal>
-          <Toaster className="pointer-events-auto" />
-        </Portal>
+        {createPortal(<Toaster className="pointer-events-auto" />, document.body)}
       </>
     ),
   ],
-  render: (args) => {
+  render: function Render(args) {
     const { open: _, modal, ...props } = args;
     const [{ open }, updateArgs] = useArgs();
     return (
-      <Dialog.Root modal={modal} open={open} onOpenChange={value => updateArgs({ open: value })}>
-        <Dialog.Trigger asChild>
-          <Button variant="outline">Edit profile</Button>
-        </Dialog.Trigger>
-        <Dialog.Content
-          {...props}
-          onPointerDownOutside={(event) => {
-            if (event.target instanceof Element && event.target.closest('[data-sonner-toast]')) {
-              event.preventDefault();
-            }
-          }}
-        >
+      <Dialog.Root
+        modal={modal}
+        open={open}
+        onOpenChange={(value, eventDetails) => {
+          const target = eventDetails.event.target;
+          if (
+            eventDetails.reason === 'outside-press' &&
+            target instanceof Element &&
+            target.closest('[data-sonner-toast]')
+          ) {
+            eventDetails.cancel();
+            return;
+          }
+          updateArgs({ open: value });
+        }}
+      >
+        <Dialog.Trigger render={<Button variant="secondary">Edit profile</Button>} />
+        <Dialog.Content {...props}>
           <Dialog.Header className="justify-between">
             <Dialog.Title>Edit profile</Dialog.Title>
-            <Dialog.Close asChild>
-              <ActionIcon className="-mr-2 -mt-2">
-                <span className="i-mdi-window-close size-4"></span>
-              </ActionIcon>
-            </Dialog.Close>
+            <Dialog.Close
+              render={
+                <ActionIcon aria-label="Close">
+                  <span className="icon-[mdi--window-close] size-4"></span>
+                </ActionIcon>
+              }
+            />
           </Dialog.Header>
-          <Dialog.Description>Make changes to your profile here. Click save when you&apos;re done.</Dialog.Description>
-          <div className="grid gap-4 p-4">
+          <Dialog.Section>
+            <Dialog.Description>
+              Make changes to your profile here. Click save when you&apos;re done.
+            </Dialog.Description>
+          </Dialog.Section>
+          <Dialog.Section className="grid gap-4">
             <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="name" className="text-right">
+              <Label
+                htmlFor="name"
+                className="text-right"
+              >
                 Name
               </Label>
               <Input
@@ -76,7 +88,10 @@ const meta = {
               />
             </div>
             <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="username" className="text-right">
+              <Label
+                htmlFor="username"
+                className="text-right"
+              >
                 Username
               </Label>
               <Input
@@ -88,13 +103,9 @@ const meta = {
                 }}
               />
             </div>
-          </div>
-          <Dialog.Footer className="justify-end gap-3">
-            <Dialog.Close asChild>
-              <Button variant="outline" color="secondary">
-                Cancel
-              </Button>
-            </Dialog.Close>
+          </Dialog.Section>
+          <Dialog.Footer className="justify-end gap-2">
+            <Dialog.Close render={<Button variant="secondary">Cancel</Button>} />
             <Button
               onClick={() => {
                 toast.success('Profile has been updated', {
@@ -116,4 +127,10 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
+export const Large: Story = {
+  args: {
+    size: 'large',
+  },
+};
+
 export default meta;
diff --git a/packages/react/src/components/dialog/dialog.tsx b/packages/react/src/components/dialog/dialog.tsx
index e6dc49f..e2b174e 100644
--- a/packages/react/src/components/dialog/dialog.tsx
+++ b/packages/react/src/components/dialog/dialog.tsx
@@ -1,6 +1,6 @@
-import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
 
-import { cn } from '~/utils';
+import { addClassName, cn } from '~/utils';
 
 const DialogRoot = DialogPrimitive.Root;
 
@@ -10,102 +10,179 @@ const DialogPortal = DialogPrimitive.Portal;
 
 const DialogClose = DialogPrimitive.Close;
 
-const DialogOverlay: React.FC<React.ComponentPropsWithRef<typeof DialogPrimitive.Overlay>> = ({
+function DialogOverlay({
   className,
   ref,
   ...props
-}) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      'fixed',
-      'inset-0',
-      'z-50',
-      'bg-black/50',
-      'data-[state=open]:(animate-in fade-in-0)',
-      'data-[state=closed]:(animate-out fade-out-0)',
-      className,
-    )}
-    {...props}
-  />
-);
-
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-interface DialogContentProps extends React.ComponentPropsWithRef<typeof DialogPrimitive.Content> {
-  container?: DialogPrimitive.DialogPortalProps['container'];
+}: React.ComponentPropsWithRef<typeof DialogPrimitive.Backdrop>) {
+  return (
+    <DialogPrimitive.Backdrop
+      ref={ref}
+      className={addClassName(
+        className,
+        'fixed',
+        'inset-0',
+        'z-50',
+        'bg-figma-overlay',
+        'transition-opacity duration-150 data-starting-style:opacity-0 data-ending-style:opacity-0 motion-reduce:transition-none',
+      )}
+      {...props}
+    />
+  );
+}
+
+DialogOverlay.displayName = 'DialogOverlay';
+
+interface DialogContentProps extends React.ComponentPropsWithRef<typeof DialogPrimitive.Popup> {
+  container?: React.ComponentProps<typeof DialogPrimitive.Portal>['container'];
+  /**
+   * UI3 template width: `default` is 320px, `large` is 480px.
+   */
+  size?: 'default' | 'large';
+  /**
+   * Vertical placement. UI3 modals hang near the top (`top`) rather than
+   * dead-center.
+   */
+  placement?: 'top' | 'center';
 }
 
 /**
- * A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
+ * A window overlaid on either the primary window or another dialog window, rendering the content
+ * underneath inert.
  *
- * - [Docs](https://www.radix-ui.com/docs/primitives/components/dialog)
- * - [API Reference](https://www.radix-ui.com/primitives/docs/components/dialog#api-reference)
+ * - [Docs](https://base-ui.com/react/components/dialog)
+ * - [API Reference](https://base-ui.com/react/components/dialog#api-reference)
  */
-const DialogContent: React.FC<DialogContentProps> = ({ className, container, ref, ...props }) => (
-  <DialogPortal container={container}>
-    <DialogOverlay />
-    <DialogPrimitive.Content
+function DialogContent({
+  className,
+  container,
+  size,
+  placement,
+  ref,
+  ...props
+}: DialogContentProps) {
+  return (
+    <DialogPortal container={container}>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        ref={ref}
+        className={addClassName(
+          className,
+          'fixed',
+          'w-full',
+          size === 'large' ? 'max-w-120' : 'max-w-80',
+          placement === 'center' ? 'top-1/2 -translate-y-1/2' : 'top-[min(10vh,80px)]',
+          'left-1/2',
+          '-translate-x-1/2',
+          'z-50',
+          'max-h-[80%]',
+          'overflow-y-auto',
+          'rounded-figma-lg',
+          'bg-figma',
+          'shadow-figma-modal',
+          'outline-none',
+          'transition-[opacity,scale] duration-150 data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95 motion-reduce:transition-none',
+        )}
+        {...props}
+      />
+    </DialogPortal>
+  );
+}
+
+DialogContent.displayName = 'DialogContent';
+
+function DialogHeader({ className, children, ref, ...props }: React.ComponentPropsWithRef<'div'>) {
+  return (
+    <div
       ref={ref}
       className={cn(
-        'fixed',
-        'grid',
-        'w-full',
-        'max-w-80',
-        'left-1/2',
-        'top-1/2',
-        '-translate-x-1/2',
-        '-translate-y-1/2',
-        'z-50',
-        'rounded-0.5',
-        'bg-figma',
-        'p-6',
-        'shadow-lg',
-        'data-[state=open]:(animate-in fade-in-0 zoom-in-95 slide-in-from-left-1/2 slide-in-from-top-12/25)',
-        'data-[state=closed]:(animate-out fade-out-0 zoom-out-95 slide-out-to-left-1/2 slide-out-to-top-12/25)',
-        'animate-duration-200',
+        'flex',
+        'h-10',
+        'items-center',
+        'px-2',
+        'border-b',
+        'border-figma-border',
         className,
       )}
       {...props}
-    />
-  </DialogPortal>
-);
+    >
+      {children}
+    </div>
+  );
+}
 
-DialogContent.displayName = DialogPrimitive.Content.displayName;
+DialogHeader.displayName = 'DialogHeader';
 
-const DialogHeader: React.FC<React.ComponentPropsWithRef<'div'>> = ({ className, children, ref, ...props }) => (
-  <div ref={ref} className={cn('flex', 'items-center', 'pb-6', className)} {...props}>
-    {children}
-  </div>
-);
+function DialogSection({ className, ref, ...props }: React.ComponentPropsWithRef<'div'>) {
+  return (
+    <div
+      ref={ref}
+      className={cn('px-4 py-2', className)}
+      {...props}
+    />
+  );
+}
 
-DialogHeader.displayName = 'DialogHeader';
+DialogSection.displayName = 'DialogSection';
 
-const DialogFooter: React.FC<React.ComponentPropsWithRef<'div'>> = ({ className, children, ref, ...props }) => (
-  <div ref={ref} className={cn('flex', 'items-center', 'pt-6', className)} {...props}>
-    {children}
-  </div>
-);
+function DialogFooter({ className, children, ref, ...props }: React.ComponentPropsWithRef<'div'>) {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'flex',
+        'h-10',
+        'items-center',
+        'px-2',
+        'border-t',
+        'border-figma-border',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
 
 DialogFooter.displayName = 'DialogFooter';
 
-const DialogTitle: React.FC<React.ComponentPropsWithRef<typeof DialogPrimitive.Title>> = ({
+function DialogTitle({
   className,
   ref,
   ...props
-}) => (
-  <DialogPrimitive.Title ref={ref} className={cn('text-figma', 'font-size-14', 'font-medium', className)} {...props} />
-);
+}: React.ComponentPropsWithRef<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      ref={ref}
+      className={addClassName(
+        className,
+        'text-figma',
+        'text-figma-body-medium',
+        'font-figma-strong',
+      )}
+      {...props}
+    />
+  );
+}
 
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
+DialogTitle.displayName = 'DialogTitle';
 
-const DialogDescription: React.FC<React.ComponentPropsWithRef<typeof DialogPrimitive.Description>> = ({
+function DialogDescription({
   className,
   ref,
   ...props
-}) => <DialogPrimitive.Description ref={ref} className={cn('text-figma', 'font-size-11', className)} {...props} />;
+}: React.ComponentPropsWithRef<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      ref={ref}
+      className={addClassName(className, 'text-figma', 'text-figma-body-medium')}
+      {...props}
+    />
+  );
+}
 
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
+DialogDescription.displayName = 'DialogDescription';
 
 export {
   DialogRoot as Root,
@@ -115,6 +192,7 @@ export {
   DialogContent as Content,
   DialogHeader as Header,
   DialogFooter as Footer,
+  DialogSection as Section,
   DialogTitle as Title,
   DialogDescription as Description,
   DialogClose as Close,
diff --git a/packages/react/src/components/dropdown-menu/dropdown-menu.stories.tsx b/packages/react/src/components/dropdown-menu/dropdown-menu.stories.tsx
index 9d8469e..e84f8ad 100644
--- a/packages/react/src/components/dropdown-menu/dropdown-menu.stories.tsx
+++ b/packages/react/src/components/dropdown-menu/dropdown-menu.stories.tsx
@@ -1,8 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 
 import { ActionIcon } from '../action-icon';
-
 import * as DropdownMenu from './dropdown-menu';
 
 type StoryArgs = React.ComponentPropsWithRef<typeof DropdownMenu.Content> & {
@@ -34,7 +33,10 @@ const meta = {
         type: 'number',
       },
       table: {
-        type: { summary: 'number', detail: 'An offset in pixels from the "start" or "end" alignment options.' },
+        type: {
+          summary: 'number',
+          detail: 'An offset in pixels from the "start" or "end" alignment options.',
+        },
       },
     },
     side: {
@@ -59,15 +61,6 @@ const meta = {
         type: { summary: 'number', detail: 'The distance in pixels from the trigger.' },
       },
     },
-    avoidCollisions: {
-      table: {
-        type: {
-          summary: 'boolean',
-          detail: 'When true, overrides the side andalign preferences to prevent collisions with boundary edges.',
-        },
-        defaultValue: { summary: 'true' },
-      },
-    },
   },
   args: {
     modal: true,
@@ -75,10 +68,9 @@ const meta = {
     align: 'center',
     alignOffset: 0,
     side: 'top',
-    sideOffset: 4,
-    avoidCollisions: true,
+    sideOffset: 9,
   },
-  render: (args) => {
+  render: function Render(args) {
     const { open: _, modal, ...props } = args;
     const [{ open }, updateArgs] = useArgs();
     return (
@@ -86,38 +78,42 @@ const meta = {
         modal={modal}
         defaultOpen={false}
         open={open}
-        onOpenChange={value => updateArgs({ open: value })}
+        onOpenChange={(value) => updateArgs({ open: value })}
       >
-        <DropdownMenu.Trigger asChild>
-          <ActionIcon>
-            <span className="i-tabler-menu-2 size-4"></span>
-          </ActionIcon>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content {...props} className="min-w-60">
+        <DropdownMenu.Trigger
+          render={
+            <ActionIcon aria-label="Open menu">
+              <span className="icon-[tabler--menu-2] size-4"></span>
+            </ActionIcon>
+          }
+        />
+        <DropdownMenu.Content
+          {...props}
+          className="min-w-60"
+        >
           <DropdownMenu.Item>
-            New Tab
-            {' '}
-            <span className="ml-auto">⌘+T</span>
+            New Tab <DropdownMenu.ItemShortcut>⌘+T</DropdownMenu.ItemShortcut>
           </DropdownMenu.Item>
           <DropdownMenu.Item>
-            New Window
-            {' '}
-            <span className="ml-auto">⌘+N</span>
+            New Window <DropdownMenu.ItemShortcut>⌘+N</DropdownMenu.ItemShortcut>
           </DropdownMenu.Item>
           <DropdownMenu.Item disabled>
-            New Private Window
-            {' '}
-            <span className="ml-auto">⇧+⌘+N</span>
+            New Private Window <DropdownMenu.ItemShortcut>⇧+⌘+N</DropdownMenu.ItemShortcut>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item>
+            File Menu <DropdownMenu.ItemBadge>Menu</DropdownMenu.ItemBadge>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item>
+            Selected <DropdownMenu.ItemCheck />
+          </DropdownMenu.Item>
+          <DropdownMenu.Item>
+            Item count <DropdownMenu.ItemShortcut>250</DropdownMenu.ItemShortcut>
           </DropdownMenu.Item>
           <DropdownMenu.Sub>
-            <DropdownMenu.SubTrigger>
-              More Tools
-            </DropdownMenu.SubTrigger>
+            <DropdownMenu.SubTrigger>More Tools</DropdownMenu.SubTrigger>
             <DropdownMenu.SubContent className="min-w-40">
               <DropdownMenu.Item>
-                Save Page As
-                {' '}
-                <span className="ml-auto">⌘+S</span>
+                Save Page As <DropdownMenu.ItemShortcut>⌘+S</DropdownMenu.ItemShortcut>
               </DropdownMenu.Item>
               <DropdownMenu.Item>Create Shortcut</DropdownMenu.Item>
               <DropdownMenu.Item>Name Window</DropdownMenu.Item>
@@ -127,22 +123,20 @@ const meta = {
           </DropdownMenu.Sub>
           <DropdownMenu.Separator />
           <DropdownMenu.CheckboxItem>
-            Show Bookmarks
-            {' '}
-            <span className="ml-auto">⌘+B</span>
-          </DropdownMenu.CheckboxItem>
-          <DropdownMenu.CheckboxItem checked>
-            Show Full URLs
+            Show Bookmarks <span className="ml-auto">⌘+B</span>
           </DropdownMenu.CheckboxItem>
+          <DropdownMenu.CheckboxItem checked>Show Full URLs</DropdownMenu.CheckboxItem>
+          <DropdownMenu.Separator />
+          <DropdownMenu.ItemSwitch defaultChecked>
+            Toggle row <DropdownMenu.ItemShortcut>⌥⇧⌘O</DropdownMenu.ItemShortcut>
+          </DropdownMenu.ItemSwitch>
+          <DropdownMenu.ItemSwitch>Toggle row off</DropdownMenu.ItemSwitch>
+          <DropdownMenu.ItemSwitch disabled>Toggle disabled</DropdownMenu.ItemSwitch>
           <DropdownMenu.Separator />
-          <DropdownMenu.Label>People</DropdownMenu.Label>
           <DropdownMenu.RadioGroup value="pedro">
-            <DropdownMenu.RadioItem value="pedro">
-              Eleven Zhang
-            </DropdownMenu.RadioItem>
-            <DropdownMenu.RadioItem value="colm">
-              Jerry Zhang
-            </DropdownMenu.RadioItem>
+            <DropdownMenu.Label>People</DropdownMenu.Label>
+            <DropdownMenu.RadioItem value="pedro">Eleven Zhang</DropdownMenu.RadioItem>
+            <DropdownMenu.RadioItem value="colm">Jerry Zhang</DropdownMenu.RadioItem>
           </DropdownMenu.RadioGroup>
           <DropdownMenu.Arrow />
         </DropdownMenu.Content>
diff --git a/packages/react/src/components/dropdown-menu/dropdown-menu.tsx b/packages/react/src/components/dropdown-menu/dropdown-menu.tsx
index aef622b..8b7f741 100644
--- a/packages/react/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/packages/react/src/components/dropdown-menu/dropdown-menu.tsx
@@ -1,270 +1,398 @@
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
 
-import { cn } from '~/utils';
+import { CheckmarkIcon, ChevronRightIcon, CircleIcon } from '~/icons';
+import { addClassName, cn, useControllableState } from '~/utils';
 
-const DropdownMenuRoot = DropdownMenuPrimitive.Root;
+import {
+  menuContentClassName,
+  menuItemBadgeClassName,
+  menuItemCheckClassName,
+  menuItemClassName,
+  menuItemIndicatorClassName,
+  menuLabelClassName,
+  menuSeparatorClassName,
+  menuItemTrailClassName,
+} from '../menu/menu-classes';
+import { Switch } from '../switch/switch';
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+type PositionerProps = React.ComponentPropsWithRef<typeof MenuPrimitive.Positioner>;
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+type PortalContainer = React.ComponentProps<typeof MenuPrimitive.Portal>['container'];
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRoot = MenuPrimitive.Root;
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+const DropdownMenuTrigger = MenuPrimitive.Trigger;
 
-const DropdownMenuArrow: React.FC<React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.Arrow>> = ({
+function DropdownMenuGroup({
   className,
   ref,
   ...props
-}) => <DropdownMenuPrimitive.Arrow ref={ref} className={cn('fill-figma-bg-menu', className)} {...props} />;
+}: React.ComponentPropsWithRef<typeof MenuPrimitive.Group>) {
+  return (
+    <MenuPrimitive.Group
+      ref={ref}
+      className={addClassName(
+        className,
+        'py-2 first:pt-0 last:pb-0 not-first:mt-[7.5px] not-first:pt-[7.5px] not-first:border-t not-first:border-solid not-first:border-figma-border-menu',
+      )}
+      {...props}
+    />
+  );
+}
+
+const DropdownMenuSub = MenuPrimitive.SubmenuRoot;
 
-DropdownMenuArrow.displayName = DropdownMenuPrimitive.Arrow.displayName;
+const DropdownMenuRadioGroup = MenuPrimitive.RadioGroup;
 
-const DropdownMenuSubTrigger: React.FC<React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.SubTrigger>> = ({
+function DropdownMenuArrow({
   className,
-  children,
   ref,
   ...props
-}) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      'relative',
-      'flex',
-      'items-center',
-      'justify-between',
-      'h-6',
-      'pl-8',
-      'pr-4',
-      'font-size-11',
-      'text-figma-menu',
-      'cursor-default',
-      'select-none',
-      'outline-none',
-      'hover:bg-figma-menu-selected',
-      'focus:bg-figma-menu-selected',
-      'data-[disabled]:(pointer-events-none text-figma-menu-disabled)',
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <span className="i-mdi-triangle size-2 rotate-90"></span>
-  </DropdownMenuPrimitive.SubTrigger>
-);
-
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-
-interface DropdownMenuSubContentProps extends React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.SubContent> {
-  container?: DropdownMenuPrimitive.DropdownMenuPortalProps['container'];
+}: React.ComponentPropsWithRef<typeof MenuPrimitive.Arrow>) {
+  return (
+    <MenuPrimitive.Arrow
+      ref={ref}
+      className={addClassName(
+        className,
+        'fill-figma-bg-menu',
+        'data-[side=bottom]:-top-1.25 data-[side=bottom]:rotate-180',
+        'data-[side=top]:-bottom-1.25',
+        'data-[side=left]:right-[-7.5px] data-[side=left]:-rotate-90',
+        'data-[side=right]:left-[-7.5px] data-[side=right]:rotate-90',
+      )}
+      render={
+        <svg
+          width={10}
+          height={5}
+          viewBox="0 0 30 10"
+          preserveAspectRatio="none"
+        >
+          <polygon points="0,0 30,0 15,10" />
+        </svg>
+      }
+      {...props}
+    />
+  );
 }
 
-const DropdownMenuSubContent: React.FC<DropdownMenuSubContentProps> = ({
+DropdownMenuArrow.displayName = 'DropdownMenuArrow';
+
+function DropdownMenuSubTrigger({
   className,
-  container,
+  children,
   ref,
   ...props
-}) => (
-  <DropdownMenuPrimitive.Portal container={container}>
-    <DropdownMenuPrimitive.SubContent
+}: React.ComponentPropsWithRef<typeof MenuPrimitive.SubmenuTrigger>) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
       ref={ref}
-      className={cn(
-        'text-figma-menu',
-        'bg-figma-menu',
-        'data-[state=open]:(animate-in fade-in-0 zoom-in-95)',
-        'data-[state=closed]:(animate-out fade-out-0 zoom-out-95)',
-        'data-[side=top]:slide-in-from-bottom-2',
-        'data-[side=right]:slide-in-from-left-2',
-        'data-[side=bottom]:slide-in-from-top-2',
-        'data-[side=left]:slide-in-from-right-2',
-        'min-w-20',
-        'rounded-0.5',
-        'border-none',
-        'py-2',
-        'shadow-md',
-        'z-50',
+      className={addClassName(
         className,
+        menuItemClassName,
+        'justify-between',
+        'data-disabled:pointer-events-none data-disabled:text-figma-menu-disabled data-disabled:icon-figma-menu-disabled',
       )}
       {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-);
+    >
+      {children}
+      <span className="ml-auto -mr-2 flex items-center pl-6">
+        <ChevronRightIcon />
+      </span>
+    </MenuPrimitive.SubmenuTrigger>
+  );
+}
 
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+DropdownMenuSubTrigger.displayName = 'DropdownMenuSubTrigger';
 
-interface DropdownMenuContentProps extends React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.Content> {
-  container?: DropdownMenuPrimitive.DropdownMenuPortalProps['container'];
+interface DropdownMenuContentProps extends React.ComponentPropsWithRef<typeof MenuPrimitive.Popup> {
+  container?: PortalContainer;
+  side?: PositionerProps['side'];
+  align?: PositionerProps['align'];
+  sideOffset?: PositionerProps['sideOffset'];
+  alignOffset?: PositionerProps['alignOffset'];
+  collisionPadding?: PositionerProps['collisionPadding'];
 }
 
+const popupClassName = menuContentClassName;
+
+function DropdownMenuPopup({
+  className,
+  container,
+  side,
+  align,
+  sideOffset,
+  alignOffset,
+  collisionPadding,
+  ref,
+  ...props
+}: DropdownMenuContentProps) {
+  return (
+    <MenuPrimitive.Portal container={container}>
+      <MenuPrimitive.Positioner
+        className="z-50"
+        side={side}
+        align={align}
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
+        collisionPadding={collisionPadding}
+      >
+        <MenuPrimitive.Popup
+          ref={ref}
+          className={addClassName(className, popupClassName)}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuSubContent(props: DropdownMenuContentProps) {
+  return <DropdownMenuPopup {...props} />;
+}
+
+DropdownMenuSubContent.displayName = 'DropdownMenuSubContent';
+
 /**
  * Displays a menu to the user — such as a set of actions or functions — triggered by a button.
  *
- * - [Docs](https://www.radix-ui.com/docs/primitives/components/dropdown-menu)
- * - [API Reference](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#api-reference)
+ * - [Docs](https://base-ui.com/react/components/menu)
+ * - [API Reference](https://base-ui.com/react/components/menu#api-reference)
  */
-const DropdownMenuContent: React.FC<DropdownMenuContentProps> = ({
+function DropdownMenuContent({ className, sideOffset = 4, ...props }: DropdownMenuContentProps) {
+  return (
+    <DropdownMenuPopup
+      className={addClassName(className, 'group')}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  );
+}
+
+DropdownMenuContent.displayName = 'DropdownMenuContent';
+
+function DropdownMenuItem({
   className,
-  container,
-  sideOffset = 4,
   ref,
   ...props
-}) => (
-  <DropdownMenuPrimitive.Portal container={container}>
-    <DropdownMenuPrimitive.Content
+}: React.ComponentPropsWithRef<typeof MenuPrimitive.Item>) {
+  return (
+    <MenuPrimitive.Item
       ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        'group',
-        'text-figma-menu',
-        'bg-figma-menu',
-        'data-[state=open]:(animate-in fade-in-0 zoom-in-95)',
-        'data-[state=closed]:(animate-out fade-out-0 zoom-out-95)',
-        'data-[side=top]:slide-in-from-bottom-2',
-        'data-[side=right]:slide-in-from-left-2',
-        'data-[side=bottom]:slide-in-from-top-2',
-        'data-[side=left]:slide-in-from-right-2',
-        'min-w-20',
-        'rounded-0.5',
-        'border-none',
-        'py-2',
-        'shadow-md',
-        'z-50',
+      className={addClassName(
         className,
+        menuItemClassName,
+        'data-disabled:pointer-events-none data-disabled:text-figma-menu-disabled data-disabled:icon-figma-menu-disabled',
       )}
       {...props}
     />
-  </DropdownMenuPrimitive.Portal>
-);
+  );
+}
 
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+DropdownMenuItem.displayName = 'DropdownMenuItem';
 
-const DropdownMenuItem: React.FC<React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.Item>> = ({
+function DropdownMenuCheckboxItem({
   className,
+  children,
   ref,
   ...props
-}) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative',
-      'flex',
-      'items-center',
-      'h-6',
-      'pl-8',
-      'pr-4',
-      'font-size-11',
-      'text-figma-menu',
-      'cursor-default',
-      'select-none',
-      'outline-none',
-      'hover:bg-figma-menu-selected',
-      'focus:bg-figma-menu-selected',
-      'data-[disabled]:(pointer-events-none text-figma-menu-disabled)',
-      className,
-    )}
-    {...props}
-  />
-);
-
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem: React.FC<React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.CheckboxItem>> = ({
+}: React.ComponentPropsWithRef<typeof MenuPrimitive.CheckboxItem>) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      ref={ref}
+      className={addClassName(
+        className,
+        menuItemClassName,
+        'pl-6 data-disabled:pointer-events-none data-disabled:text-figma-menu-disabled data-disabled:icon-figma-menu-disabled',
+      )}
+      {...props}
+    >
+      <MenuPrimitive.CheckboxItemIndicator
+        className={menuItemIndicatorClassName}
+        render={<CheckmarkIcon size="4" />}
+      />
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  );
+}
+
+DropdownMenuCheckboxItem.displayName = 'DropdownMenuCheckboxItem';
+
+function DropdownMenuRadioItem({
   className,
   children,
   ref,
   ...props
-}) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      'relative',
-      'flex',
-      'items-center',
-      'h-6',
-      'pl-8',
-      'pr-4',
-      'font-size-11',
-      'text-figma-menu',
-      'cursor-default',
-      'select-none',
-      'outline-none',
-      'hover:bg-figma-menu-selected',
-      'focus:bg-figma-menu-selected',
-      'data-[disabled]:(pointer-events-none text-figma-disabled)',
-      className,
-    )}
-    {...props}
-  >
-    <DropdownMenuPrimitive.ItemIndicator className="i-mdi-check-bold absolute left-2 h-3 w-4" />
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-);
-
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuRadioItem: React.FC<React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.RadioItem>> = ({
+}: React.ComponentPropsWithRef<typeof MenuPrimitive.RadioItem>) {
+  return (
+    <MenuPrimitive.RadioItem
+      ref={ref}
+      className={addClassName(
+        className,
+        menuItemClassName,
+        'pl-6 data-disabled:pointer-events-none data-disabled:text-figma-menu-disabled data-disabled:icon-figma-menu-disabled',
+      )}
+      {...props}
+    >
+      <MenuPrimitive.RadioItemIndicator className="absolute left-1 w-4 flex items-center justify-center">
+        <CircleIcon size="4" />
+      </MenuPrimitive.RadioItemIndicator>
+      {children}
+    </MenuPrimitive.RadioItem>
+  );
+}
+
+DropdownMenuRadioItem.displayName = 'DropdownMenuRadioItem';
+
+/**
+ * Menu row/Toggle from the spec — a `menuitemcheckbox` row with a Switch
+ * cell on the leading side. Clicking the row toggles the switch; the menu
+ * stays open (`closeOnClick={false}` by default).
+ */
+function DropdownMenuItemSwitch({
   className,
   children,
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  disabled,
+  ref,
+  ...props
+}: React.ComponentPropsWithRef<typeof MenuPrimitive.CheckboxItem>) {
+  const [isChecked, setChecked] = useControllableState<boolean>({
+    prop: checked,
+    defaultProp: defaultChecked ?? false,
+  });
+
+  return (
+    <MenuPrimitive.CheckboxItem
+      ref={ref}
+      checked={isChecked}
+      disabled={disabled}
+      onCheckedChange={(next, details) => {
+        setChecked(next);
+        onCheckedChange?.(next, details);
+      }}
+      className={addClassName(
+        className,
+        menuItemClassName,
+        'px-4 gap-2',
+        'data-disabled:pointer-events-none data-disabled:text-figma-menu-disabled data-disabled:icon-figma-menu-disabled',
+      )}
+      {...props}
+    >
+      <span className="flex h-6 w-8 shrink-0 items-center">
+        <Switch
+          render={<span aria-hidden />}
+          checked={isChecked}
+          disabled={disabled}
+          tabIndex={-1}
+          className="pointer-events-none"
+        />
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  );
+}
+
+DropdownMenuItemSwitch.displayName = 'DropdownMenuItemSwitch';
+
+/**
+ * Must be rendered inside `Group` or `RadioGroup`.
+ */
+function DropdownMenuLabel({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithRef<typeof MenuPrimitive.GroupLabel>) {
+  return (
+    <MenuPrimitive.GroupLabel
+      ref={ref}
+      className={addClassName(className, menuLabelClassName)}
+      {...props}
+    />
+  );
+}
+
+DropdownMenuLabel.displayName = 'DropdownMenuLabel';
+
+function DropdownMenuSeparator({
+  className,
   ref,
   ...props
-}) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      'relative',
-      'flex',
-      'items-center',
-      'h-6',
-      'pl-8',
-      'pr-4',
-      'font-size-11',
-      'text-figma-menu',
-      'cursor-default',
-      'select-none',
-      'outline-none',
-      'hover:bg-figma-menu-selected',
-      'focus:bg-figma-menu-selected',
-      'data-[disabled]:(pointer-events-none text-figma-disabled)',
-      className,
-    )}
-    {...props}
-  >
-    <DropdownMenuPrimitive.ItemIndicator className="absolute left-2 w-4 flex items-center justify-center">
-      <span className="i-mdi-circle-medium size-3"></span>
-    </DropdownMenuPrimitive.ItemIndicator>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-);
-
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-const DropdownMenuLabel: React.FC<React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.Label>> = ({
+}: React.ComponentPropsWithRef<typeof MenuPrimitive.Separator>) {
+  return (
+    <MenuPrimitive.Separator
+      ref={ref}
+      className={addClassName(className, menuSeparatorClassName)}
+      {...props}
+    />
+  );
+}
+
+DropdownMenuSeparator.displayName = 'DropdownMenuSeparator';
+
+/**
+ * Right-aligned trail for keyboard shortcuts or other trailing text.
+ * Render inside `Item`, `CheckboxItem`, or `RadioItem`.
+ */
+function DropdownMenuItemShortcut({
   className,
   ref,
   ...props
-}) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn('px-8', 'py-1', 'font-size-11', 'text-figma-menu-secondary', 'font-medium', className)}
-    {...props}
-  />
-);
+}: React.ComponentPropsWithRef<'span'>) {
+  return (
+    <span
+      ref={ref}
+      className={cn(menuItemTrailClassName, className)}
+      {...props}
+    />
+  );
+}
 
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+DropdownMenuItemShortcut.displayName = 'DropdownMenuItemShortcut';
 
-const DropdownMenuSeparator: React.FC<React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.Separator>> = ({
+/**
+ * Right-aligned badge trail — the spec's `Badge small` Variant=Menu chip
+ * (`bg-toolbar` fill, `text-onbrand` label).
+ */
+function DropdownMenuItemBadge({
   className,
+  children,
   ref,
   ...props
-}) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn('border-figma-menu my-2 h-[1px] w-full border-t', className)}
-    {...props}
-  />
-);
+}: React.ComponentPropsWithRef<'span'>) {
+  return (
+    <span
+      ref={ref}
+      className={cn(menuItemTrailClassName, className)}
+      {...props}
+    >
+      <span className={menuItemBadgeClassName}>{children}</span>
+    </span>
+  );
+}
+
+DropdownMenuItemBadge.displayName = 'DropdownMenuItemBadge';
+
+/**
+ * Right-aligned check trail — a plain 16px check icon used as a trailing
+ * selection indicator.
+ */
+function DropdownMenuItemCheck({ className, ref, ...props }: React.ComponentPropsWithRef<'span'>) {
+  return (
+    <span
+      ref={ref}
+      className={cn(menuItemTrailClassName, className)}
+      {...props}
+    >
+      <span className={menuItemCheckClassName}>
+        <CheckmarkIcon size="4" />
+      </span>
+    </span>
+  );
+}
 
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+DropdownMenuItemCheck.displayName = 'DropdownMenuItemCheck';
 
 export {
   DropdownMenuRoot as Root,
@@ -274,6 +402,10 @@ export {
   DropdownMenuContent as Content,
   DropdownMenuGroup as Group,
   DropdownMenuItem as Item,
+  DropdownMenuItemBadge as ItemBadge,
+  DropdownMenuItemCheck as ItemCheck,
+  DropdownMenuItemShortcut as ItemShortcut,
+  DropdownMenuItemSwitch as ItemSwitch,
   DropdownMenuLabel as Label,
   DropdownMenuRadioGroup as RadioGroup,
   DropdownMenuRadioItem as RadioItem,
diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
index df25f04..188e0b8 100644
--- a/packages/react/src/components/index.ts
+++ b/packages/react/src/components/index.ts
@@ -1,22 +1,32 @@
 export * from './action-icon';
+export * from './action-icon-split';
 export * from './alert-dialog';
+export * from './avatar';
+export * from './badge';
 export * from './button';
 export * from './checkbox';
+export * from './context-menu';
 export * from './dialog';
 export * from './dropdown-menu';
 export * from './input';
 export * from './label';
+export * from './link-tooltip';
 export * from './popover';
 export * from './radio';
 export * from './scroll-area';
+export * from './segmented-control';
 export * from './select';
 export * from './separator';
 export * from './sheet';
 export * from './slider';
 export * from './switch';
+export * from './swatch';
 export * from './tabs';
 export * from './textarea';
 export * from './toast';
 export * from './toggle';
 export * from './toggle-group';
 export * from './tooltip';
+export * from './value-field';
+export * from './variable-chip';
+export * from './visual-bell';
diff --git a/packages/react/src/components/input/input-variants.tsx b/packages/react/src/components/input/input-variants.tsx
index 62e4ec0..0d66508 100644
--- a/packages/react/src/components/input/input-variants.tsx
+++ b/packages/react/src/components/input/input-variants.tsx
@@ -3,64 +3,61 @@ import { cva, type VariantProps } from 'class-variance-authority';
 export const inputVariants = cva(
   [
     'w-full',
-    'font-size-11',
+    'text-figma-body-medium',
     'text-figma',
     'fill-figma-icon',
     'cursor-default',
-    'bg-figma',
+    'bg-figma-secondary',
     'bg-clip-border',
-    'border',
     'outline-solid',
     'outline-1',
-    '-outline-offset-2',
+    '-outline-offset-1',
     'outline-transparent',
-    'rounded-0.5',
+    'rounded-figma-md',
     'placeholder:text-figma-tertiary',
-    'focus:(border-figma-selected outline-figma-border-selected)',
+    'focus:outline-figma-border-selected',
   ],
   {
     variants: {
       variant: {
-        default: ['border-transparent', 'not-focus:hover:border-figma'],
-        border: ['border-figma'],
+        default: ['not-disabled:not-focus:hover:outline-figma-border'],
+        border: ['outline-figma-border'],
       },
       invalid: {
-        true: ['fill-figma-icon-danger', 'border-figma-danger'],
+        true: ['fill-figma-icon-danger', 'outline-figma-border-danger'],
         false: '',
       },
       disabled: {
         true: ['cursor-not-allowed', 'text-figma-disabled', 'fill-figma-icon-disabled'],
         false: '',
       },
+      size: {
+        default: '',
+        large: '',
+      },
     },
     compoundVariants: [
       {
-        variant: 'default',
-        disabled: true,
-        className: [
-          'border-transparent',
-          'focus:(border-transparent outline-transparent)',
-          'not-focus:hover:border-transparent',
-        ],
+        invalid: true,
+        disabled: false,
+        className: ['focus:outline-figma-border-danger'],
       },
       {
-        variant: 'border',
         disabled: true,
-        className: ['border-figma-disabled', 'focus:(border-figma-disabled outline-transparent)'],
+        size: 'default',
+        className: ['bg-figma', 'outline-figma-border'],
       },
       {
-        disabled: false,
-        invalid: true,
-        className: [
-          'focus:(border-figma-danger outline-figma-transparent)',
-          'not-focus:hover:border-figma-danger',
-        ],
+        disabled: true,
+        size: 'large',
+        className: ['bg-figma-secondary', 'outline-transparent'],
       },
     ],
     defaultVariants: {
       variant: 'default',
       invalid: false,
       disabled: false,
+      size: 'default',
     },
   },
 );
diff --git a/packages/react/src/components/input/input.stories.tsx b/packages/react/src/components/input/input.stories.tsx
index daa6046..3659e6d 100644
--- a/packages/react/src/components/input/input.stories.tsx
+++ b/packages/react/src/components/input/input.stories.tsx
@@ -1,9 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 
 import { ActionIcon } from '../action-icon';
 import { Tooltip, TooltipProvider } from '../tooltip';
-
+import { VariableChip } from '../variable-chip';
 import { Input, InputSlot } from './input';
 
 const meta = {
@@ -21,6 +21,13 @@ const meta = {
         defaultValue: { summary: 'border' },
       },
     },
+    size: {
+      control: 'inline-radio',
+      options: ['default', 'large'],
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
     invalid: {
       table: {
         defaultValue: { summary: 'false' },
@@ -50,6 +57,12 @@ export const Border: Story = {
   },
 };
 
+export const Large: Story = {
+  args: {
+    size: 'large',
+  },
+};
+
 export const Disabled: Story = {
   args: {
     disabled: true,
@@ -63,20 +76,20 @@ export const Invalid: Story = {
 };
 
 export const WithLeftIcon: Story = {
-  render: args => (
+  render: (args) => (
     <Input {...args}>
       <InputSlot>
-        <span className="i-tabler-hash size-3"></span>
+        <span className="icon-[tabler--hash] size-3"></span>
       </InputSlot>
     </Input>
   ),
 };
 
 export const WithRightIcon: Story = {
-  render: args => (
+  render: (args) => (
     <Input {...args}>
       <InputSlot side="right">
-        <span className="i-tabler-hash size-3"></span>
+        <span className="icon-[tabler--hash] size-3"></span>
       </InputSlot>
     </Input>
   ),
@@ -86,44 +99,65 @@ export const WithSlots: Story = {
   args: {
     variant: 'border',
   },
-  render: args => (
+  render: (args) => (
     <Input {...args}>
       <InputSlot side="left">
-        <span className="i-tabler-search size-3"></span>
+        <span className="icon-[tabler--search] size-3"></span>
       </InputSlot>
       <InputSlot side="right">
         <ActionIcon
+          aria-label="Clear"
           disabled={args.disabled}
           className="mx-1 size-6 text-figma-icon-secondary focus:outline-transparent"
-          onClick={e => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
         >
-          <span className="i-tabler-x size-3"></span>
+          <span className="icon-[tabler--x] size-3"></span>
         </ActionIcon>
       </InputSlot>
     </Input>
   ),
 };
 
+/**
+ * The spec's `State=Variable` — an applied variable renders as a
+ * `VariableChip` pill in place of the field text.
+ */
+export const WithVariable: Story = {
+  args: {
+    placeholder: undefined,
+  },
+  render: (args) => (
+    <Input
+      {...args}
+      className="text-transparent"
+    >
+      <span className="absolute left-2 top-1">
+        <VariableChip>Spacing</VariableChip>
+      </span>
+    </Input>
+  ),
+};
+
 export const WithTooltip: Story = {
   args: {
     variant: 'border',
     value: 12,
   },
-  render: (args) => {
+  render: function Render(args) {
     const [{ value }, updateArgs] = useArgs();
     return (
-      <TooltipProvider delayDuration={100}>
+      <TooltipProvider delay={100}>
         <Tooltip content={<p>Spacing</p>}>
           <div className="relative w-20 flex items-center">
             <Input
               id="spacing"
               {...args}
               value={value}
-              onFocus={e => e.currentTarget.select()}
-              onChange={e => updateArgs({ value: Number(e.currentTarget.value) })}
+              onFocus={(e) => e.currentTarget.select()}
+              onChange={(e) => updateArgs({ value: Number(e.currentTarget.value) })}
             >
               <InputSlot side="left">
-                <span className="i-tabler-spacing-vertical size-3.5"></span>
+                <span className="icon-[tabler--spacing-vertical] size-3.5"></span>
               </InputSlot>
             </Input>
           </div>
diff --git a/packages/react/src/components/input/input.tsx b/packages/react/src/components/input/input.tsx
index 76c9b0d..261c419 100644
--- a/packages/react/src/components/input/input.tsx
+++ b/packages/react/src/components/input/input.tsx
@@ -1,59 +1,91 @@
+import { mergeProps } from '@base-ui/react/merge-props';
 import { createContext, useContext } from 'react';
 
-import { cn } from '~/utils';
+import { cn, useSelectOnInputClick } from '~/utils';
 
 import { inputVariants, type InputVariantsProps } from './input-variants';
 
 const InputContext = createContext<{
   disabled?: boolean;
   invalid?: boolean;
+  size?: 'default' | 'large';
 }>({
   disabled: false,
   invalid: false,
 });
 
-interface InputProps extends React.ComponentPropsWithRef<'input'>, InputVariantsProps {
+interface InputProps
+  extends Omit<React.ComponentPropsWithRef<'input'>, 'size'>, InputVariantsProps {
   invalid?: boolean;
   disabled?: boolean;
+  /**
+   * The control height. `'default'` is the 24px UI3 size, `'large'` is 32px.
+   *
+   * @default 'default'
+   */
+  size?: 'default' | 'large';
+  /**
+   * Selects the input's contents when clicked, unless the user is selecting manually.
+   */
+  selectOnClick?: boolean;
   /**
    * Props passed down to the root element of the Input component
    */
-  wrapperProps?: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> &
-    React.DataHTMLAttributes<'div'>;
+  wrapperProps?: Omit<
+    React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>,
+    'ref'
+  > &
+    React.DataHTMLAttributes<HTMLLabelElement>;
 }
 
-const Input: React.FC<InputProps> = ({
+function Input({
   wrapperProps,
   className,
   variant,
   invalid,
   disabled,
   children,
+  selectOnClick,
+  size = 'default',
   ref,
   ...props
-}) => {
+}: InputProps) {
+  const selectOnClickProps = useSelectOnInputClick();
   return (
-    <InputContext.Provider value={{ disabled, invalid }}>
-      <div
+    <InputContext.Provider value={{ disabled, invalid, size }}>
+      <label
         {...wrapperProps}
-        className={cn('peer', 'relative', 'h-8', 'flex', 'items-center', wrapperProps?.className ?? '')}
+        className={cn(
+          'peer',
+          'relative',
+          size === 'large' ? 'h-8' : 'h-6',
+          'flex',
+          'items-center',
+          wrapperProps?.className ?? '',
+        )}
         data-disabled={disabled}
         data-invalid={invalid}
-        onClick={() => (ref as React.RefObject<HTMLInputElement>).current?.focus?.()}
       >
         {children}
         <input
           ref={ref}
           data-invalid={invalid}
           aria-invalid={invalid}
-          className={cn('inline-block', 'h-full', 'px-2', inputVariants({ variant, disabled, invalid, className }))}
-          {...props}
+          className={cn(
+            'inline-block',
+            'h-full',
+            'py-1',
+            'pl-2',
+            'pr-2',
+            inputVariants({ variant, disabled, invalid, size, className }),
+          )}
+          {...mergeProps<'input'>(selectOnClick ? selectOnClickProps : {}, props)}
           disabled={disabled}
         />
-      </div>
+      </label>
     </InputContext.Provider>
   );
-};
+}
 
 Input.displayName = 'Input';
 
@@ -67,8 +99,9 @@ interface InputSlotProps extends React.ComponentPropsWithRef<'div'> {
 /**
  * Contains icons or buttons associated with an Input.
  */
-const InputSlot: React.FC<InputSlotProps> = ({ className, side = 'left', ref, ...props }) => {
-  const { disabled, invalid } = useContext(InputContext);
+function InputSlot({ className, side = 'left', ref, ...props }: InputSlotProps) {
+  const { disabled, invalid, size } = useContext(InputContext);
+  const large = size === 'large';
   return (
     <div
       ref={ref}
@@ -76,11 +109,14 @@ const InputSlot: React.FC<InputSlotProps> = ({ className, side = 'left', ref, ..
         'absolute',
         'flex',
         'shrink-0',
-        'w-8',
+        'w-6',
         'items-center',
         'justify-center',
         'transition-colors',
-        side === 'left' ? ['left-0', '[&~input]:pl-8'] : ['right-0', '[&~input]:pr-8'],
+        // UI3 icon cells are 24px; on 32px inputs they sit inside a 4px inset.
+        side === 'left'
+          ? [large ? 'left-1 [&~input]:pl-7' : 'left-0 [&~input]:pl-6']
+          : [large ? 'right-1 [&~input]:pr-7' : 'right-0 [&~input]:pr-6'],
         disabled
           ? ['cursor-not-allowed', 'text-figma-disabled', 'fill-figma-icon-disabled']
           : ['cursor-default', 'text-figma-secondary', 'fill-figma-icon-secondary'],
@@ -93,7 +129,7 @@ const InputSlot: React.FC<InputSlotProps> = ({ className, side = 'left', ref, ..
       data-disabled={disabled}
     />
   );
-};
+}
 
 InputSlot.displayName = 'InputSlot';
 
diff --git a/packages/react/src/components/label/label.tsx b/packages/react/src/components/label/label.tsx
index 8db770f..8672f0e 100644
--- a/packages/react/src/components/label/label.tsx
+++ b/packages/react/src/components/label/label.tsx
@@ -1,23 +1,24 @@
-import * as LabelPrimitive from '@radix-ui/react-label';
-
 import { cn } from '~/utils';
 
-const Label: React.FC<React.ComponentPropsWithRef<typeof LabelPrimitive.Root>> = ({ className, ref, ...props }) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(
-      'font-size-11',
-      'font-medium',
-      'leading-none',
-      'cursor-default',
-      'disabled:(cursor-not-allowed text-figma-disabled)',
-      'peer-disabled:(cursor-not-allowed text-figma-disabled)',
-      className,
-    )}
-    {...props}
-  />
-);
+function Label({ className, ref, ...props }: React.ComponentPropsWithRef<'label'>) {
+  return (
+    // oxlint-disable-next-line jsx-a11y/label-has-associated-control -- primitive; the caller associates via htmlFor or nesting
+    <label
+      ref={ref}
+      className={cn(
+        'text-figma-body-medium',
+        'font-figma-default',
+        'cursor-default',
+        'disabled:cursor-not-allowed disabled:text-figma-disabled',
+        'peer-disabled:cursor-not-allowed peer-disabled:text-figma-disabled',
+        'peer-data-disabled:cursor-not-allowed peer-data-disabled:text-figma-disabled',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
 
-Label.displayName = LabelPrimitive.Root.displayName;
+Label.displayName = 'Label';
 
 export { Label };
diff --git a/packages/react/src/components/link-tooltip/index.ts b/packages/react/src/components/link-tooltip/index.ts
new file mode 100644
index 0000000..c202e74
--- /dev/null
+++ b/packages/react/src/components/link-tooltip/index.ts
@@ -0,0 +1 @@
+export * from './link-tooltip';
diff --git a/packages/react/src/components/link-tooltip/link-tooltip.stories.tsx b/packages/react/src/components/link-tooltip/link-tooltip.stories.tsx
new file mode 100644
index 0000000..835e4ca
--- /dev/null
+++ b/packages/react/src/components/link-tooltip/link-tooltip.stories.tsx
@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import * as React from 'react';
+
+import { ValueField } from '~/components/value-field';
+import { FolderIcon, FrameIcon, LinkIcon, MailIcon, PageIcon, PhoneIcon, PlayIcon } from '~/icons';
+
+import * as Popover from '../popover';
+import {
+  LinkTooltip,
+  LinkTooltipAction,
+  LinkTooltipInput,
+  LinkTooltipItem,
+  LinkTooltipPopup,
+} from './link-tooltip';
+
+const meta = {
+  title: 'Components/LinkTooltip',
+  component: LinkTooltip,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<React.ComponentPropsWithRef<typeof LinkTooltip>>;
+
+type Story = StoryObj<typeof meta>;
+
+export const UrlInput: Story = {
+  render: () => (
+    <LinkTooltip arrow>
+      <LinkTooltipInput placeholder="Type or paste URL" />
+    </LinkTooltip>
+  ),
+};
+
+export const LinkActions: Story = {
+  render: () => (
+    <div className="flex flex-col items-center gap-6">
+      <LinkTooltip arrow>
+        <LinkTooltipItem icon={<LinkIcon size="4" />}>
+          <LinkTooltipAction>Open google.com</LinkTooltipAction>
+          <LinkTooltipAction>Edit</LinkTooltipAction>
+        </LinkTooltipItem>
+      </LinkTooltip>
+      <LinkTooltip arrow>
+        <LinkTooltipItem icon={<PhoneIcon size="4" />}>
+          <LinkTooltipAction>Call (415) 355-0394</LinkTooltipAction>
+          <LinkTooltipAction>Edit</LinkTooltipAction>
+        </LinkTooltipItem>
+      </LinkTooltip>
+      <LinkTooltip arrow>
+        <LinkTooltipItem icon={<MailIcon size="4" />}>
+          <LinkTooltipAction>Copy mail@mail.com</LinkTooltipAction>
+          <LinkTooltipAction>Send mail</LinkTooltipAction>
+          <LinkTooltipAction>Edit</LinkTooltipAction>
+        </LinkTooltipItem>
+      </LinkTooltip>
+      <LinkTooltip arrow>
+        <LinkTooltipItem icon={<PageIcon size="4" />}>
+          <LinkTooltipAction>Go to page</LinkTooltipAction>
+          <LinkTooltipAction>Edit</LinkTooltipAction>
+        </LinkTooltipItem>
+      </LinkTooltip>
+      <LinkTooltip arrow>
+        <LinkTooltipItem icon={<PlayIcon size="4" />}>
+          <LinkTooltipAction>Open prototype</LinkTooltipAction>
+          <LinkTooltipAction>Edit</LinkTooltipAction>
+        </LinkTooltipItem>
+      </LinkTooltip>
+      <LinkTooltip arrow>
+        <LinkTooltipItem icon={<FrameIcon size="4" />}>
+          <LinkTooltipAction>Go to frame</LinkTooltipAction>
+          <LinkTooltipAction>Edit</LinkTooltipAction>
+        </LinkTooltipItem>
+      </LinkTooltip>
+      <LinkTooltip arrow>
+        <LinkTooltipItem icon={<FolderIcon size="4" />}>
+          <LinkTooltipAction>Open file</LinkTooltipAction>
+          <LinkTooltipAction>Edit</LinkTooltipAction>
+        </LinkTooltipItem>
+      </LinkTooltip>
+    </div>
+  ),
+};
+
+const urlFormatter = {
+  format: (value: string) => value,
+  parse: (input: string) => ({ valid: true as const, value: input }),
+};
+
+/**
+ * The link tooltip anchored to a URL field — click the field to open the
+ * editor popup, as in the Figma link control.
+ */
+export const InField: Story = {
+  render: function Render() {
+    const [url, setUrl] = React.useState('https://google.com');
+    return (
+      <div className="pt-40">
+        <Popover.Root defaultOpen>
+          <Popover.Trigger
+            render={
+              <ValueField.Root className="w-44">
+                <ValueField.Label>
+                  <LinkIcon size="4" />
+                </ValueField.Label>
+                <ValueField.Base
+                  value={url}
+                  onChange={setUrl}
+                  formatter={urlFormatter}
+                />
+              </ValueField.Root>
+            }
+          />
+          <LinkTooltipPopup>
+            <LinkTooltipItem icon={<LinkIcon size="4" />}>
+              <LinkTooltipAction>Open google.com</LinkTooltipAction>
+              <LinkTooltipAction>Edit</LinkTooltipAction>
+            </LinkTooltipItem>
+          </LinkTooltipPopup>
+        </Popover.Root>
+      </div>
+    );
+  },
+};
+
+export default meta;
diff --git a/packages/react/src/components/link-tooltip/link-tooltip.tsx b/packages/react/src/components/link-tooltip/link-tooltip.tsx
new file mode 100644
index 0000000..ef5f9b5
--- /dev/null
+++ b/packages/react/src/components/link-tooltip/link-tooltip.tsx
@@ -0,0 +1,209 @@
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
+
+import { addClassName, cn } from '~/utils';
+
+const linkTooltipChrome = [
+  'relative inline-flex w-fit flex-col',
+  'bg-figma-tooltip text-figma-tooltip',
+  'rounded-figma-md shadow-figma-tooltip',
+];
+
+function LinkTooltipArrow({ className, ...props }: React.ComponentPropsWithRef<'svg'>) {
+  return (
+    <svg
+      width={12}
+      height={6}
+      viewBox="0 0 12 6"
+      preserveAspectRatio="none"
+      className={cn('fill-figma-bg-tooltip absolute', className)}
+      aria-hidden="true"
+      {...props}
+    >
+      <polygon points="0,0 12,0 6,6" />
+    </svg>
+  );
+}
+
+interface LinkTooltipProps extends React.ComponentPropsWithRef<'div'> {
+  /**
+   * Renders the downward-pointing tooltip arrow under the box.
+   */
+  arrow?: boolean;
+}
+
+/**
+ * The link editor popup (UI3 "Link tooltip") — a tooltip-styled box holding
+ * a URL input or a row of link actions (Open …, Send mail, Edit).
+ */
+function LinkTooltip({ arrow, className, children, ref, ...props }: LinkTooltipProps) {
+  return (
+    <div
+      ref={ref}
+      className={cn(linkTooltipChrome, className)}
+      {...props}
+    >
+      {children}
+      {arrow ? <LinkTooltipArrow className="-bottom-1.5 left-1/2 -translate-x-1/2" /> : null}
+    </div>
+  );
+}
+
+LinkTooltip.displayName = 'LinkTooltip';
+
+type PositionerProps = React.ComponentPropsWithRef<typeof PopoverPrimitive.Positioner>;
+
+interface LinkTooltipPopupProps extends React.ComponentPropsWithRef<typeof PopoverPrimitive.Popup> {
+  /**
+   * Renders the arrow on the edge facing the anchor (side-aware).
+   *
+   * @default true
+   */
+  arrow?: boolean;
+  /**
+   * Specify a container element to portal the popup into.
+   *
+   * @default document.body
+   */
+  container?: React.ComponentProps<typeof PopoverPrimitive.Portal>['container'];
+  side?: PositionerProps['side'];
+  align?: PositionerProps['align'];
+  sideOffset?: PositionerProps['sideOffset'];
+  alignOffset?: PositionerProps['alignOffset'];
+  collisionPadding?: PositionerProps['collisionPadding'];
+}
+
+/**
+ * The link tooltip rendered as a popover popup — anchors it to a field or
+ * link and keeps it open for interaction. Compose inside `Popover.Root`.
+ */
+function LinkTooltipPopup({
+  arrow = true,
+  container,
+  side = 'top',
+  align = 'center',
+  sideOffset = 7,
+  alignOffset,
+  collisionPadding,
+  className,
+  children,
+  ref,
+  ...props
+}: LinkTooltipPopupProps) {
+  return (
+    <PopoverPrimitive.Portal container={container}>
+      <PopoverPrimitive.Positioner
+        className="group/positioner z-50"
+        side={side}
+        align={align}
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
+        collisionPadding={collisionPadding}
+      >
+        <PopoverPrimitive.Popup
+          ref={ref}
+          className={addClassName(className, linkTooltipChrome, 'outline-0')}
+          {...props}
+        >
+          {children}
+          {arrow ? (
+            <LinkTooltipArrow className="left-1/2 -translate-x-1/2 group-data-[side=bottom]/positioner:-top-1.5 group-data-[side=bottom]/positioner:rotate-180 group-data-[side=top]/positioner:-bottom-1.5" />
+          ) : null}
+        </PopoverPrimitive.Popup>
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  );
+}
+
+LinkTooltipPopup.displayName = 'LinkTooltipPopup';
+
+/**
+ * The "Type or paste URL" input row.
+ */
+function LinkTooltipInput({ className, ref, ...props }: React.ComponentPropsWithRef<'input'>) {
+  return (
+    <input
+      ref={ref}
+      className={cn(
+        'h-6 w-46 bg-transparent px-2',
+        'text-figma-body-medium text-figma-tooltip',
+        'cursor-default outline-none',
+        'placeholder:text-figma-tooltip-secondary',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+LinkTooltipInput.displayName = 'LinkTooltipInput';
+
+interface LinkTooltipItemProps extends React.ComponentPropsWithRef<'div'> {
+  /**
+   * Leading icon — e.g. link, phone, mail, file glyphs (secondary color).
+   */
+  icon?: React.ReactNode;
+}
+
+/**
+ * A row of link actions separated by full-height dividers:
+ * `[icon] Open google.com | Edit`.
+ */
+function LinkTooltipItem({ icon, className, children, ref, ...props }: LinkTooltipItemProps) {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'flex h-6 items-stretch overflow-hidden rounded-figma-md icon-figma-tooltip-secondary',
+        className,
+      )}
+      {...props}
+    >
+      {icon ? <span className="flex w-6 shrink-0 items-center justify-center">{icon}</span> : null}
+      <div className="flex items-stretch [&>*+*]:border-l [&>*+*]:border-figma-tooltip">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+LinkTooltipItem.displayName = 'LinkTooltipItem';
+
+/**
+ * A single action inside a `LinkTooltipItem` — `Open google.com`, `Edit`, …
+ */
+interface LinkTooltipActionProps extends React.ComponentPropsWithRef<'button'> {
+  /**
+   * UI3 "Email" variant: the trailing CTA uses `body.medium.strong` (w550).
+   */
+  strong?: boolean;
+}
+
+function LinkTooltipAction({
+  className,
+  children,
+  strong = false,
+  ref,
+  ...props
+}: LinkTooltipActionProps) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={cn(
+        'flex cursor-default items-center px-2',
+        'text-figma-body-medium text-figma-tooltip',
+        strong && 'font-figma-strong',
+        'whitespace-nowrap hover:bg-figma-tooltip-hover',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+LinkTooltipAction.displayName = 'LinkTooltipAction';
+
+export { LinkTooltip, LinkTooltipPopup, LinkTooltipInput, LinkTooltipItem, LinkTooltipAction };
+export type { LinkTooltipProps, LinkTooltipPopupProps, LinkTooltipItemProps };
diff --git a/packages/react/src/components/menu/menu-classes.ts b/packages/react/src/components/menu/menu-classes.ts
new file mode 100644
index 0000000..ab1e53c
--- /dev/null
+++ b/packages/react/src/components/menu/menu-classes.ts
@@ -0,0 +1,68 @@
+const menuPopupClassName = [
+  'text-figma-body-medium text-figma-menu',
+  'bg-figma-menu',
+  'rounded-figma-lg',
+  'shadow-figma-menu',
+  'outline-none',
+  'origin-(--transform-origin) transition-[opacity,scale] duration-100 data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95 motion-reduce:transition-none',
+];
+
+const menuContentClassName = [
+  menuPopupClassName,
+  'min-w-20',
+  'border-none',
+  'p-2',
+  'max-h-(--available-height) overflow-y-auto',
+];
+
+const menuItemClassName = [
+  'relative',
+  'flex',
+  'items-center',
+  'h-6',
+  'px-2',
+  'text-figma-body-medium',
+  'text-figma-menu',
+  'icon-figma-menu',
+  'cursor-default',
+  'select-none',
+  'outline-none',
+  'rounded-figma-md',
+  'data-highlighted:bg-figma-menu-selected',
+];
+
+const menuItemIndicatorClassName = 'absolute left-1';
+
+const menuLabelClassName = [
+  'flex',
+  'items-center',
+  'h-6',
+  'px-2',
+  'text-figma-body-medium',
+  'text-figma-menu-tertiary',
+];
+
+const menuSeparatorClassName = 'my-[7.5px] -mx-2 h-px bg-figma-border-menu';
+
+const menuScrollButtonClassName =
+  'h-6 w-full flex cursor-default items-center justify-center bg-figma-menu hover:bg-figma-menu-hover icon-figma-menu';
+
+const menuItemTrailClassName = 'ml-auto flex items-center pl-6 text-figma-menu-secondary';
+
+const menuItemBadgeClassName =
+  'flex h-5 items-center rounded-figma-md bg-figma-toolbar px-1.5 text-figma-onbrand';
+
+const menuItemCheckClassName = 'flex size-4 items-center justify-center icon-figma-menu';
+
+export {
+  menuContentClassName,
+  menuPopupClassName,
+  menuItemClassName,
+  menuItemIndicatorClassName,
+  menuLabelClassName,
+  menuSeparatorClassName,
+  menuScrollButtonClassName,
+  menuItemTrailClassName,
+  menuItemBadgeClassName,
+  menuItemCheckClassName,
+};
diff --git a/packages/react/src/components/popover/popover.stories.tsx b/packages/react/src/components/popover/popover.stories.tsx
index 4c36a86..8fcf4b5 100644
--- a/packages/react/src/components/popover/popover.stories.tsx
+++ b/packages/react/src/components/popover/popover.stories.tsx
@@ -1,10 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 
 import { Button } from '../button';
 import { Input } from '../input';
 import { Label } from '../label';
-
 import * as Popover from './popover';
 
 type StoryArgs = React.ComponentPropsWithRef<typeof Popover.Content> & {
@@ -53,8 +52,7 @@ const meta = {
       table: {
         type: {
           summary: 'number',
-          detail:
-            'An offset in pixels from the "start" or "end" alignment options.',
+          detail: 'An offset in pixels from the "start" or "end" alignment options.',
         },
       },
     },
@@ -83,16 +81,6 @@ const meta = {
         },
       },
     },
-    avoidCollisions: {
-      table: {
-        type: {
-          summary: 'boolean',
-          detail:
-            'When true, overrides the side andalign preferences to prevent collisions with boundary edges.',
-        },
-        defaultValue: { summary: 'true' },
-      },
-    },
   },
   args: {
     modal: false,
@@ -100,10 +88,9 @@ const meta = {
     align: 'center',
     alignOffset: 0,
     side: 'bottom',
-    sideOffset: 4,
-    avoidCollisions: true,
+    sideOffset: 11,
   },
-  render: (args) => {
+  render: function Render(args) {
     const { open: _, modal, ...props } = args;
     const [{ open }, updateArgs] = useArgs();
 
@@ -112,12 +99,13 @@ const meta = {
         modal={modal}
         defaultOpen={false}
         open={open}
-        onOpenChange={value => updateArgs({ open: value })}
+        onOpenChange={(value) => updateArgs({ open: value })}
       >
-        <Popover.Trigger asChild>
-          <Button variant="outline">Open</Button>
-        </Popover.Trigger>
-        <Popover.Content {...props} className="w-60 p-4">
+        <Popover.Trigger render={<Button variant="secondary">Open</Button>} />
+        <Popover.Content
+          {...props}
+          className="w-60 p-4"
+        >
           <div className="grid gap-4">
             <div className="space-y-2">
               <h3 className="font-medium leading-none">Dimensions</h3>
diff --git a/packages/react/src/components/popover/popover.tsx b/packages/react/src/components/popover/popover.tsx
index f64c9cd..884822e 100644
--- a/packages/react/src/components/popover/popover.tsx
+++ b/packages/react/src/components/popover/popover.tsx
@@ -1,96 +1,124 @@
-import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
 
-import { cn } from '~/utils';
+import { addClassName } from '~/utils';
 
 const PopoverRoot = PopoverPrimitive.Root;
 
 const PopoverTrigger = PopoverPrimitive.Trigger;
 
-const PopoverAnchor = PopoverPrimitive.Anchor;
+// Base UI has no Popover.Anchor equivalent — inert passthrough.
+function PopoverAnchor(props: React.ComponentPropsWithRef<'div'>) {
+  return <div {...props} />;
+}
 
 const PopoverClose = PopoverPrimitive.Close;
 
-const PopoverArrow: React.FC<React.ComponentPropsWithRef<typeof PopoverPrimitive.Arrow>> = ({
-  className,
-  ref,
-  ...props
-}) => (
-  <PopoverPrimitive.Arrow
-    ref={ref}
-    width={14}
-    height={7}
-    className={cn('text-figma-border fill-figma-bg', className)}
-    {...props}
-    asChild
-  >
-    <svg
-      viewBox="0 0 24 12"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect width="24" height="2" />
-      <path
-        d="M24 1C18 1 18 11 12 11C6 11 6 0.999999 8.74228e-07 0.999999"
-        stroke="currentColor"
-        strokeWidth="2"
-      />
-    </svg>
-  </PopoverPrimitive.Arrow>
-);
+interface PopoverArrowProps extends React.ComponentPropsWithRef<typeof PopoverPrimitive.Arrow> {}
+
+function PopoverArrow({ className, ref, ...props }: PopoverArrowProps) {
+  return (
+    <PopoverPrimitive.Arrow
+      ref={ref}
+      className={addClassName(
+        className,
+        'text-figma-border fill-figma-bg',
+        'data-[side=bottom]:-top-1.75 data-[side=bottom]:rotate-180',
+        'data-[side=top]:-bottom-1.75',
+        'data-[side=left]:right-[-10.5px] data-[side=left]:-rotate-90',
+        'data-[side=right]:left-[-10.5px] data-[side=right]:rotate-90',
+      )}
+      render={
+        <svg
+          width={14}
+          height={7}
+          viewBox="0 0 24 12"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect
+            width="24"
+            height="2"
+          />
+          <path
+            d="M24 1C18 1 18 11 12 11C6 11 6 0.999999 8.74228e-07 0.999999"
+            stroke="currentColor"
+            strokeWidth="2"
+          />
+        </svg>
+      }
+      {...props}
+    />
+  );
+}
+
+PopoverArrow.displayName = 'PopoverArrow';
 
-PopoverArrow.displayName = PopoverPrimitive.Arrow.displayName;
+type PositionerProps = React.ComponentPropsWithRef<typeof PopoverPrimitive.Positioner>;
 
-interface PopoverContentProps extends React.ComponentPropsWithRef<typeof PopoverPrimitive.Content> {
+interface PopoverContentProps extends React.ComponentPropsWithRef<typeof PopoverPrimitive.Popup> {
   /**
    * Specify a container element to portal the content into.
    *
    * @default document.body
    */
-  container?: PopoverPrimitive.PopoverPortalProps['container'];
+  container?: React.ComponentProps<typeof PopoverPrimitive.Portal>['container'];
+  side?: PositionerProps['side'];
+  align?: PositionerProps['align'];
+  sideOffset?: PositionerProps['sideOffset'];
+  alignOffset?: PositionerProps['alignOffset'];
+  collisionPadding?: PositionerProps['collisionPadding'];
 }
 
 /**
  * Displays rich content in a portal, triggered by a button.
  *
- * - [Docs](https://www.radix-ui.com/docs/primitives/components/popover)
- * - [API Reference](https://www.radix-ui.com/primitives/docs/components/popover#api-reference)
+ * - [Docs](https://base-ui.com/react/components/popover)
+ * - [API Reference](https://base-ui.com/react/components/popover#api)
  */
-const PopoverContent: React.FC<PopoverContentProps> = ({
+function PopoverContent({
   className,
   container,
   align = 'center',
+  side,
   sideOffset = 4,
+  alignOffset,
+  collisionPadding,
   ref,
   ...props
-}) => (
-  <PopoverPrimitive.Portal container={container}>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        'w-auto',
-        'bg-figma',
-        'rounded-0.5',
-        'outline-solid',
-        'outline-1',
-        'outline-figma-border',
-        'shadow-md',
-        'will-change-(transform,opacity)',
-        'data-[state=open]:(animate-in fade-in zoom-in-95)',
-        'data-[state=closed]:(animate-out fade-out zoom-out-95)',
-        'data-[side=top]:slide-in-from-bottom-1',
-        'data-[side=right]:slide-in-from-left-1',
-        'data-[side=bottom]:slide-in-from-top-1',
-        'data-[side=left]:slide-in-from-right-1',
-        className,
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-);
+}: PopoverContentProps) {
+  return (
+    <PopoverPrimitive.Portal container={container}>
+      <PopoverPrimitive.Positioner
+        className="z-50"
+        side={side}
+        align={align}
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
+        collisionPadding={collisionPadding}
+      >
+        <PopoverPrimitive.Popup
+          ref={ref}
+          className={addClassName(
+            className,
+            'w-auto',
+            'text-figma',
+            'text-figma-body-medium',
+            'bg-figma',
+            'rounded-figma-lg',
+            'overflow-y-auto',
+            'outline-0',
+            'shadow-figma-elevation-500',
+            'will-change-[transform,opacity]',
+            'origin-(--transform-origin) transition-[opacity,scale] duration-100 data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95 motion-reduce:transition-none',
+          )}
+          {...props}
+        />
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  );
+}
 
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+PopoverContent.displayName = 'PopoverContent';
 
 export {
   PopoverRoot as Root,
diff --git a/packages/react/src/components/radio/radio.stories.tsx b/packages/react/src/components/radio/radio.stories.tsx
index d1d1b3d..0ca93a4 100644
--- a/packages/react/src/components/radio/radio.stories.tsx
+++ b/packages/react/src/components/radio/radio.stories.tsx
@@ -1,8 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 
 import { Label } from '../label';
-
 import * as Radio from './radio';
 
 const meta = {
@@ -35,36 +34,41 @@ const meta = {
     value: 'all',
     inline: false,
   },
-  render: (args) => {
+  render: function Render(args) {
     const [{ value }, updateArgs] = useArgs();
 
-    const options = [{
-      value: 'all',
-      label: 'All comments, mentions, and replies',
-    }, {
-      value: 'only',
-      label: 'Only mentions and replies',
-    }, {
-      value: 'none',
-      label: 'None',
-    }];
+    const options = [
+      {
+        value: 'all',
+        label: 'All comments, mentions, and replies',
+      },
+      {
+        value: 'only',
+        label: 'Only mentions and replies',
+      },
+      {
+        value: 'none',
+        label: 'None',
+      },
+    ];
 
     return (
       <Radio.Group
         {...args}
         className="gap-3"
         value={value}
-        onValueChange={changed => updateArgs({ value: changed })}
+        onValueChange={(changed) => updateArgs({ value: changed })}
       >
-        {options.map(option => (
-          <div key={option.value} className="flex items-center gap-2">
+        {options.map((option) => (
+          <div
+            key={option.value}
+            className="flex items-center gap-2"
+          >
             <Radio.GroupItem
               id={`radio-${option.value}`}
               value={option.value}
             />
-            <Label htmlFor={`radio-${option.value}`}>
-              {option.label}
-            </Label>
+            <Label htmlFor={`radio-${option.value}`}>{option.label}</Label>
           </div>
         ))}
       </Radio.Group>
@@ -88,4 +92,34 @@ export const Disabled: Story = {
   },
 };
 
+export const Buttons: Story = {
+  render: function Render() {
+    const [{ value }, updateArgs] = useArgs();
+    return (
+      <Radio.Group
+        className="w-48 gap-2"
+        value={value}
+        onValueChange={(changed) => updateArgs({ value: changed })}
+      >
+        {['all', 'only', 'none'].map((option) => (
+          <Radio.GroupItem
+            key={option}
+            value={option}
+            variant="button"
+          >
+            {option === 'all' ? 'All' : option === 'only' ? 'Only' : 'None'}
+          </Radio.GroupItem>
+        ))}
+        <Radio.GroupItem
+          value="disabled"
+          variant="button"
+          disabled
+        >
+          Disabled
+        </Radio.GroupItem>
+      </Radio.Group>
+    );
+  },
+};
+
 export default meta;
diff --git a/packages/react/src/components/radio/radio.tsx b/packages/react/src/components/radio/radio.tsx
index 20ccf64..22705a4 100644
--- a/packages/react/src/components/radio/radio.tsx
+++ b/packages/react/src/components/radio/radio.tsx
@@ -1,75 +1,57 @@
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Radio } from '@base-ui/react/radio';
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
 
-import { cn } from '~/utils';
+import { addClassName } from '~/utils';
 
-interface RadioGroupProps extends React.ComponentPropsWithRef<typeof RadioGroupPrimitive.Root> {
+interface RadioGroupProps extends React.ComponentPropsWithRef<typeof RadioGroupPrimitive> {
   inline?: boolean;
 }
 
+interface RadioGroupItemProps extends React.ComponentPropsWithRef<typeof Radio.Root> {
+  /**
+   * `input` renders the spec circle; `button` renders a label pill with no circle.
+   */
+  variant?: 'input' | 'button';
+}
+
 /**
- * A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
+ * A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be
+ * checked at a time.
  *
- * - [Docs](https://www.radix-ui.com/docs/primitives/components/radio-group)
- * - [API Reference](https://www.radix-ui.com/primitives/docs/components/radio-group#api-reference)
+ * - [Docs](https://base-ui.com/react/components/radio)
+ * - [API Reference](https://base-ui.com/react/components/radio#api)
  */
-const RadioGroup: React.FC<RadioGroupProps> = ({
-  className,
-  inline = false,
-  ref,
-  ...props
-}) => {
+function RadioGroup({ className, inline = false, ref, ...props }: RadioGroupProps) {
   return (
-    <RadioGroupPrimitive.Root
+    <RadioGroupPrimitive
       ref={ref}
-      className={cn(
-        'flex',
-        'gap-2',
-        inline ? 'flex-row' : 'flex-col',
-        className,
-      )}
+      className={addClassName(className, 'flex', inline ? 'flex-row gap-5' : 'flex-col gap-2')}
       {...props}
     />
   );
-};
+}
 
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+RadioGroup.displayName = 'RadioGroup';
 
-const RadioGroupItem: React.FC<React.ComponentPropsWithRef<typeof RadioGroupPrimitive.Item>> = ({
-  className,
-  ref,
-  ...props
-}) => {
+function RadioGroupItem({ className, variant = 'input', ref, ...props }: RadioGroupItemProps) {
   return (
-    <RadioGroupPrimitive.Item
+    <Radio.Root
       ref={ref}
-      className={cn(
+      className={addClassName(
+        className,
         'peer',
-        'group',
-        'size-3.5',
-        'text-figma',
-        'fill-figma-icon',
-        'border',
-        'border-solid',
-        'border-figma-icon',
-        'rounded-full',
-        'aspect-square',
         'cursor-default',
-        'outline-solid',
-        'outline-1',
-        '-outline-offset-2',
-        'outline-transparent',
-        'bg-clip-border',
-        'not-disabled:focus:(border-figma-selected outline-figma-border-selected)',
-        'disabled:(cursor-not-allowed text-figma-disabled fill-figma-icon-disabled border-figma-disabled-strong)',
-        className,
+        'bg-figma',
+        variant === 'input'
+          ? 'size-4 aspect-square border-4 border-solid border-transparent rounded-full data-checked:bg-figma-icon data-checked:border-figma-bg data-disabled:data-checked:bg-figma-icon-disabled outline-solid outline-1 -outline-offset-1 outline-figma-icon not-data-disabled:focus-visible:outline-figma-border-selected-strong data-disabled:outline-figma-icon-disabled'
+          : 'flex h-6 w-full items-center justify-center rounded-figma-md border border-solid border-figma-bordertranslucent px-3 font-figma-default text-figma-body-medium text-figma data-checked:border-figma-brand data-checked:bg-figma-selected not-data-disabled:focus-visible:border-figma-border-selected data-disabled:border-figma-disabled data-disabled:text-figma-disabled',
       )}
       {...props}
-    >
-      <RadioGroupPrimitive.Indicator className="pointer-events-none flex items-center justify-center after:block after:size-1.5 after:rounded-full after:content-[''] after:bg-figma-icon group-disabled:after:bg-figma-icon-disabled" />
-    </RadioGroupPrimitive.Item>
+    />
   );
-};
+}
 
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+RadioGroupItem.displayName = 'RadioGroupItem';
 
 export { RadioGroup as Group, RadioGroupItem as GroupItem };
+export type { RadioGroupProps, RadioGroupItemProps };
diff --git a/packages/react/src/components/scroll-area/scroll-area.stories.tsx b/packages/react/src/components/scroll-area/scroll-area.stories.tsx
index a855093..5612562 100644
--- a/packages/react/src/components/scroll-area/scroll-area.stories.tsx
+++ b/packages/react/src/components/scroll-area/scroll-area.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { ScrollArea } from './scroll-area';
 
@@ -15,21 +15,17 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   render: (args) => {
-    const TAGS = Array.from({ length: 50 }).map(
-      (_, i, a) => `v1.2.0-beta.${a.length - i}`,
-    );
+    const TAGS = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
     return (
       <ScrollArea
         className="h-60 w-40 border rounded border-solid border-figma"
         {...args}
       >
         <div className="w-full flex flex-col p-2">
-          <div className="h-6 inline-flex items-center font-medium font-size-13">
-            Tags
-          </div>
-          {TAGS.map(tag => (
+          <div className="h-6 inline-flex items-center font-medium text-figma-body-large">Tags</div>
+          {TAGS.map((tag) => (
             <div
-              className="h-8 inline-flex items-center border-t font-size-12 border-figma text-figma"
+              className="h-8 inline-flex items-center border-t text-xs border-figma text-figma"
               key={tag}
             >
               {tag}
diff --git a/packages/react/src/components/scroll-area/scroll-area.tsx b/packages/react/src/components/scroll-area/scroll-area.tsx
index 1e1a515..8b4df4c 100644
--- a/packages/react/src/components/scroll-area/scroll-area.tsx
+++ b/packages/react/src/components/scroll-area/scroll-area.tsx
@@ -1,55 +1,56 @@
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-
-import { cn } from '~/utils';
-
-const ScrollBar: React.FC<React.ComponentPropsWithRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>> = ({
-  className,
-  orientation = 'vertical',
-  ref,
-  ...props
-}) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      'flex touch-none select-none transition-colors',
-      orientation === 'vertical' && 'h-full w-1.5 border-l border-l-transparent p-px',
-      orientation === 'horizontal' && 'h-1.5 border-t border-t-transparent p-px',
-      className,
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-grow rounded-full bg-figma-text-secondary" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-);
-
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
+
+import { addClassName } from '~/utils';
+
+interface ScrollBarProps extends React.ComponentPropsWithRef<
+  typeof ScrollAreaPrimitive.Scrollbar
+> {}
+
+function ScrollBar({ className, orientation = 'vertical', ref, ...props }: ScrollBarProps) {
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      ref={ref}
+      orientation={orientation}
+      className={addClassName(
+        className,
+        'flex touch-none select-none transition-all opacity-0 data-hovering:opacity-100 data-scrolling:opacity-100',
+        orientation === 'vertical' && 'h-full w-1.5 border-l border-l-transparent p-px',
+        orientation === 'horizontal' && 'h-1.5 border-t border-t-transparent p-px',
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Thumb className="relative grow rounded-full bg-figma-scrollbar" />
+    </ScrollAreaPrimitive.Scrollbar>
+  );
+}
+
+ScrollBar.displayName = 'ScrollBar';
+
+interface ScrollAreaProps extends React.ComponentPropsWithRef<typeof ScrollAreaPrimitive.Root> {}
 
 /**
  * Augments native scroll functionality for custom, cross-browser styling.
  *
- * - [Docs](https://www.radix-ui.com/docs/primitives/components/scroll-area)
- * - [API Reference](https://www.radix-ui.com/primitives/docs/components/scroll-area#api-reference)
+ * - [Docs](https://base-ui.com/react/components/scroll-area)
+ * - [API Reference](https://base-ui.com/react/components/scroll-area#api)
  */
-const ScrollArea: React.FC<React.ComponentPropsWithRef<typeof ScrollAreaPrimitive.Root>> = ({
-  className,
-  children,
-  ref,
-  ...props
-}) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn('relative overflow-hidden', className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit] [&>div]:!block">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-);
-
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+function ScrollArea({ className, children, ref, ...props }: ScrollAreaProps) {
+  return (
+    <ScrollAreaPrimitive.Root
+      ref={ref}
+      className={addClassName(className, 'relative overflow-hidden')}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+ScrollArea.displayName = 'ScrollArea';
 
 export { ScrollArea, ScrollBar };
+export type { ScrollAreaProps, ScrollBarProps };
diff --git a/packages/react/src/components/segmented-control/index.ts b/packages/react/src/components/segmented-control/index.ts
new file mode 100644
index 0000000..c615dcf
--- /dev/null
+++ b/packages/react/src/components/segmented-control/index.ts
@@ -0,0 +1 @@
+export * from './segmented-control';
diff --git a/packages/react/src/components/segmented-control/segmented-control.stories.tsx b/packages/react/src/components/segmented-control/segmented-control.stories.tsx
new file mode 100644
index 0000000..f21073b
--- /dev/null
+++ b/packages/react/src/components/segmented-control/segmented-control.stories.tsx
@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import {
+  AlignHorizontalCenterIcon,
+  AlignLeftIcon,
+  AlignRightIcon,
+  MinusIcon,
+  TextAlignJustifiedIcon,
+} from '~/icons';
+
+import { SegmentedControl, SegmentedControlItem, SegmentedControlText } from './segmented-control';
+
+const meta = {
+  title: 'Components/SegmentedControl',
+  component: SegmentedControl,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    defaultValue: 'left',
+  },
+} satisfies Meta<React.ComponentPropsWithRef<typeof SegmentedControl>>;
+
+type Story = StoryObj<typeof meta>;
+
+const alignOptions = [
+  { value: 'left', label: 'Align left', icon: <AlignLeftIcon size="4" /> },
+  { value: 'center', label: 'Align center', icon: <AlignHorizontalCenterIcon size="4" /> },
+  { value: 'right', label: 'Align right', icon: <AlignRightIcon size="4" /> },
+  { value: 'justify', label: 'Align justify', icon: <TextAlignJustifiedIcon size="4" /> },
+];
+
+export const Icons: Story = {
+  render: (args) => (
+    <SegmentedControl {...args}>
+      {alignOptions.map((option) => (
+        <SegmentedControlItem
+          key={option.value}
+          value={option.value}
+          aria-label={option.label}
+        >
+          {option.icon}
+        </SegmentedControlItem>
+      ))}
+    </SegmentedControl>
+  ),
+};
+
+export const DefaultMark: Story = {
+  render: (args) => (
+    <SegmentedControl
+      {...args}
+      defaultValue="auto"
+    >
+      <SegmentedControlItem
+        value="auto"
+        aria-label="Default"
+      >
+        <MinusIcon size="4" />
+      </SegmentedControlItem>
+      {['17', '17', '17', '17'].map((label, i) => (
+        <SegmentedControlItem
+          key={i}
+          value={`v${i}`}
+        >
+          <SegmentedControlText>{label}</SegmentedControlText>
+        </SegmentedControlItem>
+      ))}
+    </SegmentedControl>
+  ),
+};
+
+export const Labels: Story = {
+  render: (args) => (
+    <div className="flex flex-col items-start gap-2">
+      <SegmentedControl
+        {...args}
+        defaultValue="minimalist"
+      >
+        {['Minimalist', 'Modern', 'Retro'].map((label) => (
+          <SegmentedControlItem
+            key={label}
+            value={label.toLowerCase()}
+          >
+            <SegmentedControlText>{label}</SegmentedControlText>
+          </SegmentedControlItem>
+        ))}
+      </SegmentedControl>
+      <div style={{ width: 168 }}>
+        <SegmentedControl
+          fullWidth
+          defaultValue="a"
+        >
+          <SegmentedControlItem value="a">
+            <SegmentedControlText>Truncation label</SegmentedControlText>
+          </SegmentedControlItem>
+          <SegmentedControlItem value="b">
+            <SegmentedControlText>Label</SegmentedControlText>
+          </SegmentedControlItem>
+          <SegmentedControlItem value="c">
+            <SegmentedControlText>Label</SegmentedControlText>
+          </SegmentedControlItem>
+        </SegmentedControl>
+      </div>
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  render: Icons.render,
+};
+
+export default meta;
diff --git a/packages/react/src/components/segmented-control/segmented-control.tsx b/packages/react/src/components/segmented-control/segmented-control.tsx
new file mode 100644
index 0000000..f01a786
--- /dev/null
+++ b/packages/react/src/components/segmented-control/segmented-control.tsx
@@ -0,0 +1,67 @@
+import { useControllableState } from '~/utils';
+
+import { ToggleGroup, ToggleGroupItem, ToggleGroupText } from '../toggle-group/toggle-group';
+
+interface SegmentedControlProps extends Omit<
+  React.ComponentPropsWithRef<typeof ToggleGroup>,
+  'defaultValue' | 'multiple' | 'onValueChange' | 'value'
+> {
+  /**
+   * Stretches the control to fill the available width.
+   */
+  fullWidth?: boolean | undefined;
+  defaultValue?: string | undefined;
+  onValueChange?: ((value: string) => void) | undefined;
+  value?: string | undefined;
+}
+
+/**
+ * A "segmented control" — one choice out of a small set, formerly the UI3
+ * "Option Strip". Single value; pressing the selected segment does not
+ * deselect it (radio-like keyboard behavior per spec).
+ */
+function SegmentedControl({
+  value: valueProp,
+  defaultValue: defaultValueProp,
+  onValueChange,
+  ref,
+  ...props
+}: SegmentedControlProps) {
+  const [value, setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValueProp,
+    onChange: onValueChange,
+  });
+
+  return (
+    <ToggleGroup
+      ref={ref}
+      {...props}
+      multiple={false}
+      value={value === undefined ? [] : [value]}
+      onValueChange={(groupValue) => {
+        const nextValue = groupValue[0];
+        if (nextValue !== undefined) {
+          setValue(nextValue);
+        }
+      }}
+    />
+  );
+}
+
+SegmentedControl.displayName = 'SegmentedControl';
+
+function SegmentedControlItem(props: React.ComponentPropsWithRef<typeof ToggleGroupItem>) {
+  return <ToggleGroupItem {...props} />;
+}
+
+SegmentedControlItem.displayName = 'SegmentedControlItem';
+
+function SegmentedControlText(props: React.ComponentPropsWithRef<typeof ToggleGroupText>) {
+  return <ToggleGroupText {...props} />;
+}
+
+SegmentedControlText.displayName = 'SegmentedControlText';
+
+export { SegmentedControl, SegmentedControlItem, SegmentedControlText };
+export type { SegmentedControlProps };
diff --git a/packages/react/src/components/select/select.stories.tsx b/packages/react/src/components/select/select.stories.tsx
index 4f9a447..5550ca4 100644
--- a/packages/react/src/components/select/select.stories.tsx
+++ b/packages/react/src/components/select/select.stories.tsx
@@ -1,16 +1,86 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 
 import * as Select from './select';
 
-type StoryArgs = React.ComponentPropsWithRef<typeof Select.Content> &
-  Pick<
-    React.ComponentProps<typeof Select.Trigger>,
-    | 'disabled'
-    | 'value'
-  >;
+type StoryArgs = React.ComponentPropsWithRef<typeof Select.Content> & {
+  disabled?: boolean;
+  size?: 'default' | 'large';
+  stroke?: boolean;
+  icon?: boolean;
+  value?: string | null;
+};
+
+const optionWithIconItems: Record<string, React.ReactNode> = {
+  none: (
+    <div className="flex items-center gap-2">
+      <span className="icon-[tabler--circle-dot] size-3.5"></span>
+      None
+    </div>
+  ),
+  'navigate-to': (
+    <div className="flex items-center gap-2">
+      <span className="icon-[tabler--arrow-right] size-3.5"></span>
+      Navigate to
+    </div>
+  ),
+  'change-to': (
+    <div className="flex items-center gap-2">
+      <span className="icon-[tabler--refresh] size-3.5"></span>
+      Change to
+    </div>
+  ),
+  back: (
+    <div className="flex items-center gap-2">
+      <span className="icon-[tabler--arrow-back-up] size-3.5"></span>
+      Back
+    </div>
+  ),
+  'set-variable': (
+    <div className="flex items-center gap-2">
+      <span className="icon-[tabler--settings-2] size-3.5"></span>
+      Set variable
+    </div>
+  ),
+  conditional: (
+    <div className="flex items-center gap-2">
+      <span className="icon-[tabler--arrows-split-2] size-3.5"></span>
+      Conditional
+    </div>
+  ),
+  'scroll-to': (
+    <div className="flex items-center gap-2">
+      <span className="icon-[tabler--arrow-move-down] size-3.5"></span>
+      Scroll to
+    </div>
+  ),
+  'open-link': (
+    <div className="flex items-center gap-2">
+      <span className="icon-[tabler--link] size-3.5"></span>
+      Open link
+    </div>
+  ),
+  'open-overlay': (
+    <div className="flex items-center gap-2">
+      <span className="icon-[tabler--square-half] size-3.5"></span>
+      Open overlay
+    </div>
+  ),
+  'swap-overlay': (
+    <div className="flex items-center gap-2">
+      <span className="icon-[tabler--replace] size-3.5"></span>
+      Swap overlay
+    </div>
+  ),
+  'close-overlay': (
+    <div className="flex items-center gap-2">
+      <span className="icon-[tabler--square-x] size-3.5"></span>
+      Close overlay
+    </div>
+  ),
+};
 
-const meta = {
+const meta: Meta = {
   title: 'Components/Select',
   component: Select.Content,
   parameters: {
@@ -27,61 +97,78 @@ const meta = {
         defaultValue: { summary: 'false' },
       },
     },
+    size: {
+      control: 'inline-radio',
+      options: ['default', 'large'],
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    stroke: {
+      control: 'boolean',
+      table: {
+        defaultValue: { summary: 'true' },
+      },
+    },
+    icon: {
+      control: 'boolean',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
     value: {
       control: 'text',
     },
-    position: {
-      control: 'inline-radio',
-      options: ['item-aligned', 'popper'],
+    alignItemWithTrigger: {
+      control: 'boolean',
       table: {
-        defaultValue: { summary: 'item-aligned' },
-        type: {
-          summary: 'enum',
-        },
+        defaultValue: { summary: 'true' },
       },
     },
     withArrow: {
-      if: { arg: 'position', eq: 'popper' },
+      if: { arg: 'alignItemWithTrigger', truthy: false },
       control: 'boolean',
     },
     side: {
-      if: { arg: 'position', eq: 'popper' },
+      if: { arg: 'alignItemWithTrigger', truthy: false },
       control: 'inline-radio',
       options: ['top', 'right', 'bottom', 'left'],
       table: {
         defaultValue: {
           summary: 'top',
           detail:
-            'The preferred side of the anchor to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled. Only available when position is set to popper.',
+            'The preferred side of the anchor to render against when open. Only available when alignItemWithTrigger is false.',
         },
       },
     },
     sideOffset: {
-      if: { arg: 'position', eq: 'popper' },
+      if: { arg: 'alignItemWithTrigger', truthy: false },
       control: {
         type: 'number',
       },
       table: {
         type: {
           summary: 'number',
-          detail: 'The distance in pixels from the anchor. Only available when position is set to popper.',
+          detail:
+            'The distance in pixels from the anchor. Only available when alignItemWithTrigger is false.',
         },
       },
     },
     align: {
-      if: { arg: 'position', eq: 'popper' },
+      if: { arg: 'alignItemWithTrigger', truthy: false },
       control: 'inline-radio',
       options: ['start', 'center', 'end'],
       table: {
         defaultValue: { summary: 'center' },
         type: {
           summary: 'enum',
-          detail: 'The preferred alignment against the anchor. May change when collisions occur. Only available when position is set to popper.',
+          detail:
+            'The preferred alignment against the anchor. May change when collisions occur. Only available when alignItemWithTrigger is false.',
         },
       },
     },
     alignOffset: {
-      if: { arg: 'position', eq: 'popper' },
+      if: { arg: 'alignItemWithTrigger', truthy: false },
       control: {
         type: 'number',
       },
@@ -89,49 +176,46 @@ const meta = {
         type: {
           summary: 'number',
           detail:
-            'An offset in pixels from the "start" or "end" alignment options. Only available when position is set to popper.',
-        },
-      },
-    },
-    avoidCollisions: {
-      if: { arg: 'position', eq: 'popper' },
-      table: {
-        type: {
-          summary: 'boolean',
-          detail:
-            'When true, overrides the side andalign preferences to prevent collisions with boundary edges. Only available when position is set to popper.',
+            'An offset in pixels from the "start" or "end" alignment options. Only available when alignItemWithTrigger is false.',
         },
-        defaultValue: { summary: 'true' },
       },
     },
   },
   args: {
     disabled: false,
-    position: 'item-aligned',
+    stroke: true,
+    icon: false,
+    alignItemWithTrigger: true,
     side: 'top',
     sideOffset: 4,
     align: 'center',
     alignOffset: 0,
-    avoidCollisions: true,
     withArrow: true,
   },
   decorators: [
-    Story => (
+    (Story) => (
       <div className="w-40 p-2">
         <Story />
       </div>
     ),
   ],
-  render: ({ disabled, ...props }) => {
+  render: function Render({ disabled, size, stroke, icon, ...props }) {
     const [args, updateArgs] = useArgs();
 
     return (
       <Select.Root
+        items={{ blue: 'Blue', red: 'Red', green: 'Green' }}
         disabled={disabled}
         value={args.value}
-        onValueChange={value => updateArgs({ value })}
+        onValueChange={(value) => updateArgs({ value })}
       >
-        <Select.Trigger disabled={disabled} placeholder="Select. color" />
+        <Select.Trigger
+          disabled={disabled}
+          size={size}
+          stroke={stroke}
+          icon={icon ? <span className="icon-[tabler--droplet] size-4"></span> : undefined}
+          placeholder="Select. color"
+        />
         <Select.Content {...props}>
           <Select.Item value="blue">Blue</Select.Item>
           <Select.Item value="red">Red</Select.Item>
@@ -150,17 +234,46 @@ export const Default: Story = {
   },
 };
 
+export const Large: Story = {
+  args: {
+    value: 'blue',
+    size: 'large',
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    value: 'blue',
+    icon: true,
+  },
+};
+
+export const WithIconLarge: Story = {
+  args: {
+    value: 'blue',
+    icon: true,
+    size: 'large',
+  },
+};
+
+export const NoStroke: Story = {
+  args: {
+    value: 'blue',
+    stroke: false,
+  },
+};
+
 export const Popover: Story = {
   args: {
     value: 'blue',
-    position: 'popper',
+    alignItemWithTrigger: false,
     align: 'center',
   },
 };
 
 export const Placeholder: Story = {
   args: {
-    value: '',
+    value: null,
   },
 };
 
@@ -168,19 +281,43 @@ export const CustomTrigger: Story = {
   args: {
     value: 'normal',
   },
-  render: ({ disabled, ...props }) => {
+  render: function Render({ disabled, ...props }) {
     const [args, updateArgs] = useArgs();
 
     return (
       <Select.Root
+        items={{
+          'pass-through': 'Pass through',
+          normal: 'Normal',
+          darken: 'Darken',
+          multiply: 'Multiply',
+          'plus-darker': 'Plus darker',
+          'color-burn': 'Color burn',
+          lighten: 'Lighten',
+          screen: 'Screen',
+          'plus-lighter': 'Plus lighter',
+          'color-dodge': 'Color dodge',
+          overlay: 'Overlay',
+          'soft-light': 'Soft light',
+          'hard-light': 'Hard light',
+          difference: 'Difference',
+          exclusion: 'Exclusion',
+          hue: 'Hue',
+          saturation: 'Saturation',
+          color: 'Color',
+          luminosity: 'Luminosity',
+          contrast: 'Contrast',
+          invert: 'Invert',
+        }}
         disabled={disabled}
         value={args.value}
-        onValueChange={value => updateArgs({ value })}
+        onValueChange={(value) => updateArgs({ value })}
       >
-        <Select.Trigger disabled={disabled}>
-          <span className="i-tabler-droplet h-3 w-8 text-figma-secondary -ml-2"></span>
-          <Select.Value placeholder="Select. an option" />
-        </Select.Trigger>
+        <Select.Trigger
+          disabled={disabled}
+          icon={<span className="icon-[tabler--droplet] size-4"></span>}
+          placeholder="Select. an option"
+        />
         <Select.Content {...props}>
           <Select.Group>
             <Select.Item value="pass-through">Pass through</Select.Item>
@@ -245,16 +382,30 @@ export const WithLabel: Story = {
   args: {
     value: 'text',
   },
-  render: ({ disabled, ...props }) => {
+  render: function Render({ disabled, ...props }) {
     const [args, updateArgs] = useArgs();
 
     return (
       <Select.Root
+        items={{
+          text: 'Text',
+          'fill-width': 'Fill weight',
+          width: 'Width',
+          height: 'Height',
+          gap: 'Gap',
+          'horizontal-padding': 'Horizontal padding',
+          'vertical-padding': 'Vertical padding',
+          'stroke-width': 'Stroke weight',
+          'corner-radius': 'Corner radius',
+        }}
         disabled={disabled}
         value={args.value}
-        onValueChange={value => updateArgs({ value })}
+        onValueChange={(value) => updateArgs({ value })}
       >
-        <Select.Trigger disabled={disabled} placeholder="Select. an option" />
+        <Select.Trigger
+          disabled={disabled}
+          placeholder="Select. an option"
+        />
         <Select.Content {...props}>
           <Select.Group>
             <Select.Label>String</Select.Label>
@@ -270,14 +421,15 @@ export const WithLabel: Story = {
           <Select.Group>
             <Select.Label>Auto Layout</Select.Label>
             <Select.Item value="gap">Gap</Select.Item>
-            <Select.Item value="horizontal-padding">
-              Horizontal padding
-            </Select.Item>
+            <Select.Item value="horizontal-padding">Horizontal padding</Select.Item>
             <Select.Item value="vertical-padding">Vertical padding</Select.Item>
           </Select.Group>
           <Select.Separator />
           <Select.Group>
-            <Select.Item value="fill-width" disabled>
+            <Select.Item
+              value="fill-width"
+              disabled
+            >
               Fill weight
             </Select.Item>
             <Select.Item value="stroke-width">Stroke weight</Select.Item>
@@ -293,99 +445,53 @@ export const OptionWithIcon: Story = {
   args: {
     value: 'back',
   },
-  render: ({ disabled, ...props }) => {
+  render: function Render({ disabled, ...props }) {
     const [args, updateArgs] = useArgs();
 
     return (
       <Select.Root
+        items={optionWithIconItems}
         disabled={disabled}
         value={args.value}
-        onValueChange={value => updateArgs({ value })}
+        onValueChange={(value) => updateArgs({ value })}
       >
-        <Select.Trigger disabled={disabled} placeholder="Select. an option" />
+        <Select.Trigger
+          disabled={disabled}
+          placeholder="Select. an option"
+        />
         <Select.Content {...props}>
           <Select.Group>
-            <Select.Item asChild value="none">
-              <div className="flex items-center gap-2">
-                <span className="i-tabler-circle-dot size-3.5"></span>
-                None
-              </div>
-            </Select.Item>
+            <Select.Item value="none">{optionWithIconItems['none']}</Select.Item>
           </Select.Group>
 
           <Select.Separator />
 
           <Select.Group>
-            <Select.Item asChild value="navigate-to">
-              <div className="flex items-center gap-2">
-                <span className="i-tabler-arrow-right size-3.5"></span>
-                Navigate to
-              </div>
-            </Select.Item>
-            <Select.Item asChild disabled value="change-to">
-              <div className="flex items-center gap-2">
-                <span className="i-tabler-refresh size-3.5"></span>
-                Change to
-              </div>
-            </Select.Item>
-            <Select.Item asChild value="back">
-              <div className="flex items-center gap-2">
-                <span className="i-tabler-arrow-back-up size-3.5"></span>
-                Back
-              </div>
+            <Select.Item value="navigate-to">{optionWithIconItems['navigate-to']}</Select.Item>
+            <Select.Item
+              value="change-to"
+              disabled
+            >
+              {optionWithIconItems['change-to']}
             </Select.Item>
+            <Select.Item value="back">{optionWithIconItems['back']}</Select.Item>
           </Select.Group>
 
           <Select.Separator />
 
           <Select.Group>
-            <Select.Item asChild value="set-variable">
-              <div className="flex items-center gap-2">
-                <span className="i-tabler-settings-2 size-3.5"></span>
-                Set variable
-              </div>
-            </Select.Item>
-            <Select.Item asChild value="conditional">
-              <div className="flex items-center gap-2">
-                <span className="i-tabler-arrows-split-2 size-3.5"></span>
-                Conditional
-              </div>
-            </Select.Item>
-            <Select.Item asChild value="scroll-to">
-              <div className="flex items-center gap-2">
-                <span className="i-tabler-arrow-move-down size-3.5"></span>
-                Scroll to
-              </div>
-            </Select.Item>
-            <Select.Item asChild value="open-link">
-              <div className="flex items-center gap-2">
-                <span className="i-tabler-link size-3.5"></span>
-                Open link
-              </div>
-            </Select.Item>
+            <Select.Item value="set-variable">{optionWithIconItems['set-variable']}</Select.Item>
+            <Select.Item value="conditional">{optionWithIconItems['conditional']}</Select.Item>
+            <Select.Item value="scroll-to">{optionWithIconItems['scroll-to']}</Select.Item>
+            <Select.Item value="open-link">{optionWithIconItems['open-link']}</Select.Item>
           </Select.Group>
 
           <Select.Separator />
 
           <Select.Group>
-            <Select.Item asChild value="open-overlay">
-              <div className="flex items-center gap-2">
-                <span className="i-tabler-square-half size-3.5"></span>
-                Open overlay
-              </div>
-            </Select.Item>
-            <Select.Item asChild value="swap-overlay">
-              <div className="flex items-center gap-2">
-                <span className="i-tabler-replace size-3.5"></span>
-                Swap overlay
-              </div>
-            </Select.Item>
-            <Select.Item asChild value="close-overlay">
-              <div className="flex items-center gap-2">
-                <span className="i-tabler-square-x size-3.5"></span>
-                Close overlay
-              </div>
-            </Select.Item>
+            <Select.Item value="open-overlay">{optionWithIconItems['open-overlay']}</Select.Item>
+            <Select.Item value="swap-overlay">{optionWithIconItems['swap-overlay']}</Select.Item>
+            <Select.Item value="close-overlay">{optionWithIconItems['close-overlay']}</Select.Item>
           </Select.Group>
         </Select.Content>
       </Select.Root>
diff --git a/packages/react/src/components/select/select.tsx b/packages/react/src/components/select/select.tsx
index b050e26..c52e680 100644
--- a/packages/react/src/components/select/select.tsx
+++ b/packages/react/src/components/select/select.tsx
@@ -1,6 +1,18 @@
-import * as SelectPrimitive from '@radix-ui/react-select';
+import { Select as SelectPrimitive } from '@base-ui/react/select';
 
-import { cn } from '~/utils';
+import { CheckmarkIcon, ChevronDownIcon, ChevronUpIcon } from '~/icons';
+import { addClassName, cn } from '~/utils';
+
+import {
+  menuItemClassName,
+  menuItemIndicatorClassName,
+  menuLabelClassName,
+  menuPopupClassName,
+  menuScrollButtonClassName,
+  menuSeparatorClassName,
+} from '../menu/menu-classes';
+
+type PositionerProps = React.ComponentPropsWithRef<typeof SelectPrimitive.Positioner>;
 
 const SelectRoot = SelectPrimitive.Root;
 
@@ -8,217 +20,292 @@ const SelectGroup = SelectPrimitive.Group;
 
 const SelectValue = SelectPrimitive.Value;
 
-const SelectArrow: React.FC<React.ComponentPropsWithRef<typeof SelectPrimitive.Arrow>> = ({ ref, ...props }) => (
-  <SelectPrimitive.Arrow
-    className="z-10 fill-figma-bg-menu"
-    {...props}
-    ref={ref}
-  />
-);
+function SelectArrow({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithRef<typeof SelectPrimitive.Arrow>) {
+  return (
+    <SelectPrimitive.Arrow
+      className={addClassName(
+        className,
+        'z-10 fill-figma-bg-menu',
+        'data-[side=bottom]:-top-1.25 data-[side=bottom]:rotate-180',
+        'data-[side=top]:-bottom-1.25',
+        'data-[side=left]:right-[-7.5px] data-[side=left]:-rotate-90',
+        'data-[side=right]:left-[-7.5px] data-[side=right]:rotate-90',
+      )}
+      render={
+        <svg
+          width={10}
+          height={5}
+          viewBox="0 0 30 10"
+          preserveAspectRatio="none"
+        >
+          <polygon points="0,0 30,0 15,10" />
+        </svg>
+      }
+      {...props}
+      ref={ref}
+    />
+  );
+}
 
-SelectArrow.displayName = SelectPrimitive.Arrow.displayName;
+SelectArrow.displayName = 'SelectArrow';
 
-interface SelectTriggerProps
-  extends React.ComponentPropsWithRef<typeof SelectPrimitive.Trigger> {
-  placeholder?: SelectPrimitive.SelectValueProps['placeholder'];
+interface SelectTriggerProps extends React.ComponentPropsWithRef<typeof SelectPrimitive.Trigger> {
+  placeholder?: React.ComponentProps<typeof SelectPrimitive.Value>['placeholder'];
+  /**
+   * Leading icon rendered before the value — the spec's icon-lead variant.
+   */
+  icon?: React.ReactNode;
+  /**
+   * The control height. `'default'` is the 24px UI3 size, `'large'` is 32px.
+   *
+   * @default 'default'
+   */
+  size?: 'default' | 'large';
+  /**
+   * Whether the trigger renders its `border-default` stroke — the spec's
+   * `Stroke` property. Focused/open states still swap in `border-selected`.
+   *
+   * @default true
+   */
+  stroke?: boolean;
 }
 
-const SelectTrigger: React.FC<SelectTriggerProps> = ({
+function SelectTrigger({
   className,
   children,
   disabled,
+  icon,
   placeholder,
+  size = 'default',
+  stroke = true,
   ref,
   ...props
-}) => (
-  <SelectPrimitive.Trigger
-    className={cn(
-      'relative',
-      'w-full',
-      'h-7',
-      'flex',
-      'pl-2',
-      'items-center',
-      'bg-figma',
-      'bg-clip-border',
-      'border',
-      'border-solid',
-      'border-transparent',
-      'outline-solid',
-      'outline-1',
-      '-outline-offset-2',
-      'outline-transparent',
-      'rounded-0.5',
-      'data-[placeholder]:(text-figma-tertiary fill-figma-icon-tertiary)',
-      disabled
-        ? [
-            'cursor-not-allowed',
-            'text-figma-disabled',
-            'fill-figma-icon-disabled',
-          ]
-        : [
-            'group',
-            'cursor-default',
-            'text-figma',
-            'fill-figma-icon',
-            'hover:border-figma',
-            'focus-visible:(border-figma-selected outline-figma-border-selected)',
-            'data-[state=open]:outline-figma-border-selected',
-          ],
-      className,
-    )}
-    {...props}
-    ref={ref}
-    disabled={disabled}
-    asChild={false}
-  >
-    <div className="pointer-events-none flex items-center group-hover:flex-grow group-data-[state=open]:flex-grow">
-      {children ?? <SelectValue placeholder={placeholder} />}
-    </div>
-    <SelectPrimitive.Icon
-      data-disabled={disabled}
-      className="i-mdi-chevron-down pointer-events-none ml-1 mr-2 size-3 flex-shrink-0 text-figma-icon-tertiary data-[disabled=true]:text-figma-icon-disabled group-hover:text-figma-icon"
-    />
-  </SelectPrimitive.Trigger>
-);
+}: SelectTriggerProps) {
+  return (
+    <SelectPrimitive.Trigger
+      className={addClassName(
+        className,
+        'relative',
+        'w-full',
+        size === 'large' ? 'h-8' : 'h-6',
+        'flex',
+        icon ? 'pl-0' : 'pl-2',
+        size === 'large' && 'pr-1',
+        'items-center',
+        'bg-figma',
+        'bg-clip-border',
+        'border',
+        'border-solid',
+        stroke ? 'border-figma-border' : 'border-transparent',
+        'rounded-figma-md',
+        'data-placeholder:text-figma-tertiary data-placeholder:fill-figma-icon-tertiary',
+        disabled
+          ? ['cursor-not-allowed', 'text-figma-tertiary', 'fill-figma-icon-disabled']
+          : [
+              'group',
+              'cursor-default',
+              'text-figma',
+              'fill-figma-icon',
+              'focus-visible:border-figma-selected',
+              'data-popup-open:border-figma-selected',
+            ],
+      )}
+      {...props}
+      ref={ref}
+      disabled={disabled}
+    >
+      <div className="pointer-events-none flex items-center grow">
+        {icon &&
+          (size === 'large' ? (
+            <span className="flex size-8 shrink-0 items-center justify-center">
+              <span
+                className={cn(
+                  'flex size-6 items-center justify-center rounded-figma-md bg-figma-secondary',
+                  disabled ? 'icon-figma-disabled' : 'icon-figma-secondary',
+                )}
+              >
+                {icon}
+              </span>
+            </span>
+          ) : (
+            <span
+              className={cn(
+                'flex size-6 shrink-0 items-center justify-center',
+                disabled ? 'icon-figma-disabled' : 'icon-figma-secondary',
+              )}
+            >
+              {icon}
+            </span>
+          ))}
+        {children ?? (
+          <SelectValue
+            className="group-data-popup-open:bg-figma-texthighlight"
+            placeholder={placeholder}
+          />
+        )}
+      </div>
+      <SelectPrimitive.Icon
+        data-disabled={disabled}
+        className="pointer-events-none ml-1 flex w-6 shrink-0 items-center justify-center icon-figma data-[disabled=true]:icon-figma-disabled"
+        render={<ChevronDownIcon />}
+      />
+    </SelectPrimitive.Trigger>
+  );
+}
 
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+SelectTrigger.displayName = 'SelectTrigger';
 
-interface SelectContentProps
-  extends React.ComponentPropsWithRef<typeof SelectPrimitive.Content> {
-  container?: SelectPrimitive.SelectPortalProps['container'];
+interface SelectContentProps extends React.ComponentPropsWithRef<typeof SelectPrimitive.Popup> {
+  container?: React.ComponentProps<typeof SelectPrimitive.Portal>['container'];
+  /**
+   * Render an arrow pointing at the trigger. Only visible when `alignItemWithTrigger` is false.
+   */
   withArrow?: boolean;
+  alignItemWithTrigger?: PositionerProps['alignItemWithTrigger'];
+  side?: PositionerProps['side'];
+  align?: PositionerProps['align'];
+  sideOffset?: PositionerProps['sideOffset'];
+  alignOffset?: PositionerProps['alignOffset'];
+  collisionPadding?: PositionerProps['collisionPadding'];
 }
 
 /**
  * Displays a list of options for the user to pick from—triggered by a button.
  *
- * - [Docs](https://www.radix-ui.com/docs/primitives/components/select)
- * - [API Reference](https://www.radix-ui.com/primitives/docs/components/select#api-reference)
+ * - [Docs](https://base-ui.com/react/components/select)
+ * - [API Reference](https://base-ui.com/react/components/select#api-reference)
  */
-const SelectContent: React.FC<SelectContentProps> = ({
+function SelectContent({
   className,
   children,
   container,
   withArrow,
-  sideOffset = 4,
+  alignItemWithTrigger = true,
+  side,
+  align,
+  sideOffset = withArrow ? 9 : 4,
+  alignOffset,
+  collisionPadding,
   ref,
   ...props
-}) => (
-  <SelectPrimitive.Portal container={container}>
-    <SelectPrimitive.Content
-      className={cn(
-        'relative',
-        'text-figma-menu',
-        'w-full',
-        'bg-figma-menu',
-        'rounded-0.5',
-        'z-50',
-        'data-[side=top]:min-w-[var(--radix-select-trigger-width)]',
-        'data-[side=bottom]:min-w-[var(--radix-select-trigger-width)]',
-        'max-h-[var(--radix-select-content-available-height)]',
-        className,
-      )}
-      sideOffset={sideOffset}
-      onCloseAutoFocus={e => e.preventDefault()}
-      {...props}
-      ref={ref}
-    >
-      {withArrow && <SelectArrow />}
-      <SelectPrimitive.ScrollUpButton className="h-6 flex cursor-default items-center justify-center">
-        <span className="i-tabler-chevron-up size-3.5"></span>
-      </SelectPrimitive.ScrollUpButton>
-      <SelectPrimitive.Viewport className="py-2">
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectPrimitive.ScrollDownButton className="h-6 flex cursor-default items-center justify-center">
-        <span className="i-tabler-chevron-down size-3.5"></span>
-      </SelectPrimitive.ScrollDownButton>
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-);
-
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-const SelectLabel: React.FC<React.ComponentPropsWithRef<typeof SelectPrimitive.Label>> = ({
+}: SelectContentProps) {
+  return (
+    <SelectPrimitive.Portal container={container}>
+      <SelectPrimitive.Positioner
+        className="z-50"
+        alignItemWithTrigger={alignItemWithTrigger}
+        side={side}
+        align={align}
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
+        collisionPadding={collisionPadding}
+      >
+        <SelectPrimitive.Popup
+          className={addClassName(
+            className,
+            menuPopupClassName,
+            'relative',
+            'flex flex-col overflow-hidden',
+            'w-full',
+            'min-w-(--anchor-width)',
+            'max-h-(--available-height)',
+          )}
+          {...props}
+          ref={ref}
+        >
+          {withArrow && !alignItemWithTrigger && <SelectArrow />}
+          <SelectPrimitive.ScrollUpArrow
+            className={cn(
+              menuScrollButtonClassName,
+              'absolute inset-x-0 top-0 z-10 rounded-t-figma-lg',
+            )}
+          >
+            <ChevronUpIcon />
+          </SelectPrimitive.ScrollUpArrow>
+          <SelectPrimitive.List className="min-h-0 overflow-y-auto p-2">
+            {children}
+          </SelectPrimitive.List>
+          <SelectPrimitive.ScrollDownArrow
+            className={cn(
+              menuScrollButtonClassName,
+              'absolute inset-x-0 bottom-0 z-10 rounded-b-figma-lg',
+            )}
+          >
+            <ChevronDownIcon />
+          </SelectPrimitive.ScrollDownArrow>
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  );
+}
+
+SelectContent.displayName = 'SelectContent';
+
+/**
+ * Must be rendered inside `Group`.
+ */
+function SelectLabel({
   className,
   ref,
   ...props
-}) => (
-  <SelectPrimitive.Label
-    className={cn(
-      'font-size-11',
-      'text-figma-menu-secondary',
-      'px-8',
-      'py-1',
-      'font-medium',
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-);
-
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
+}: React.ComponentPropsWithRef<typeof SelectPrimitive.GroupLabel>) {
+  return (
+    <SelectPrimitive.GroupLabel
+      className={addClassName(className, menuLabelClassName, 'font-medium')}
+      {...props}
+      ref={ref}
+    />
+  );
+}
+
+SelectLabel.displayName = 'SelectLabel';
 
 type SelectItemProps = React.ComponentPropsWithRef<typeof SelectPrimitive.Item>;
 
-const SelectItem: React.FC<SelectItemProps> = ({
-  className,
-  children,
-  asChild = false,
-  ref,
-  ...props
-}) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative',
-      'w-full',
-      'h-6',
-      'flex',
-      'items-center',
-      'font-size-11',
-      'pl-8',
-      'pr-4',
-      'cursor-default',
-      'select-none',
-      'outline-0',
-      'focus:bg-figma-menu-selected',
-      'data-[disabled]:(text-figma-menu-disabled pointer-events-none)',
-      className,
-    )}
-    {...props}
-  >
-    <SelectPrimitive.ItemIndicator className="i-mdi-check-bold absolute left-2 h-3 w-4" />
-    <SelectPrimitive.ItemText asChild={asChild}>
-      {children}
-    </SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-);
-
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-const SelectSeparator: React.FC<React.ComponentPropsWithRef<typeof SelectPrimitive.Separator>> = ({
+function SelectItem({ className, children, ref, ...props }: SelectItemProps) {
+  return (
+    <SelectPrimitive.Item
+      ref={ref}
+      className={addClassName(
+        className,
+        menuItemClassName,
+        'w-full',
+        'pl-6',
+        'pr-2',
+        'data-disabled:text-figma-menu-disabled data-disabled:icon-figma-menu-disabled data-disabled:pointer-events-none',
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemIndicator
+        className={menuItemIndicatorClassName}
+        render={<CheckmarkIcon size="4" />}
+      />
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+SelectItem.displayName = 'SelectItem';
+
+function SelectSeparator({
   className,
   ref,
   ...props
-}) => (
-  <SelectPrimitive.Separator
-    className={cn(
-      'w-full',
-      'border-t',
-      'border-figma-menu',
-      'my-2',
-      'h-px',
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-);
-
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+}: React.ComponentPropsWithRef<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      className={addClassName(className, menuSeparatorClassName)}
+      {...props}
+      ref={ref}
+    />
+  );
+}
+
+SelectSeparator.displayName = 'SelectSeparator';
 
 export {
   SelectRoot as Root,
diff --git a/packages/react/src/components/separator/separator.stories.tsx b/packages/react/src/components/separator/separator.stories.tsx
index fffc5ae..1e36443 100644
--- a/packages/react/src/components/separator/separator.stories.tsx
+++ b/packages/react/src/components/separator/separator.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { cn } from '~/utils';
 
@@ -47,9 +47,15 @@ const meta = {
           })}
         >
           <span>Blog</span>
-          <Separator decorative={decorative} orientation={orientation} />
+          <Separator
+            decorative={decorative}
+            orientation={orientation}
+          />
           <span>Docs</span>
-          <Separator decorative={decorative} orientation={orientation} />
+          <Separator
+            decorative={decorative}
+            orientation={orientation}
+          />
           <span>Community</span>
         </div>
       </div>
diff --git a/packages/react/src/components/separator/separator.tsx b/packages/react/src/components/separator/separator.tsx
index e147b79..8dcc404 100644
--- a/packages/react/src/components/separator/separator.tsx
+++ b/packages/react/src/components/separator/separator.tsx
@@ -1,35 +1,40 @@
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { Separator as BaseSeparator } from '@base-ui/react/separator';
 
-import { cn } from '~/utils';
+import { addClassName } from '~/utils';
 
 /**
  * Visually or semantically separates content.
  *
- * - [Docs](https://www.radix-ui.com/docs/primitives/components/separator)
- * - [API Reference](https://www.radix-ui.com/primitives/docs/components/separator#api-reference)
+ * Uses `border/default`, the divider token for default surfaces. On menu or
+ * tooltip surfaces the spec draws `border/menu` / `border/tooltip` instead —
+ * pass `bg-figma-border-menu` / `bg-figma-border-tooltip` via `className`.
+ *
+ * - [Docs](https://base-ui.com/react/components/separator)
  */
-const Separator: React.FC<React.ComponentPropsWithRef<typeof SeparatorPrimitive.Root>> = ({
+function Separator({
   className,
   orientation = 'vertical',
   decorative = true,
   ref,
   ...props
-}) => (
-  <SeparatorPrimitive.Root
-    ref={ref}
-    decorative={decorative}
-    orientation={orientation}
-    className={cn(
-      'block',
-      'shrink-0',
-      'bg-figma-border',
-      orientation === 'horizontal' ? 'w-full h-px' : 'w-px h-full',
-      className,
-    )}
-    {...props}
-  />
-);
+}: React.ComponentPropsWithRef<typeof BaseSeparator> & { decorative?: boolean }) {
+  return (
+    <BaseSeparator
+      ref={ref}
+      role={decorative ? 'none' : 'separator'}
+      orientation={orientation}
+      className={addClassName(
+        className,
+        'block',
+        'shrink-0',
+        'bg-figma-border',
+        orientation === 'horizontal' ? 'w-full h-px' : 'w-px h-full',
+      )}
+      {...props}
+    />
+  );
+}
 
-Separator.displayName = SeparatorPrimitive.Root.displayName;
+Separator.displayName = 'Separator';
 
 export { Separator };
diff --git a/packages/react/src/components/sheet/sheet.stories.tsx b/packages/react/src/components/sheet/sheet.stories.tsx
index 7fa0c3f..392f512 100644
--- a/packages/react/src/components/sheet/sheet.stories.tsx
+++ b/packages/react/src/components/sheet/sheet.stories.tsx
@@ -1,11 +1,10 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 
+import { ActionIcon } from '../action-icon';
 import { Button } from '../button';
-import { Label } from '../label';
 import { Input } from '../input';
-import { ActionIcon } from '../action-icon';
-
+import { Label } from '../label';
 import * as Sheet from './sheet';
 
 type StoryArgs = React.ComponentPropsWithRef<typeof Sheet.Content> & {
@@ -27,8 +26,7 @@ const meta = {
       table: {
         type: {
           summary: 'enum',
-          detail:
-            'Indicate the edge of the screen where the component will appear',
+          detail: 'Indicate the edge of the screen where the component will appear',
         },
         defaultValue: {
           summary: 'bottom',
@@ -41,30 +39,36 @@ const meta = {
     open: false,
     side: 'bottom',
   },
-  render: (args) => {
+  render: function Render(args) {
     const { open: _, modal, ...props } = args;
     const [{ open }, updateArgs] = useArgs();
     return (
       <Sheet.Root
         open={open}
         modal={modal}
-        onOpenChange={value => updateArgs({ open: value })}
+        onOpenChange={(value) => updateArgs({ open: value })}
       >
-        <Sheet.Trigger asChild>
-          <Button>Open</Button>
-        </Sheet.Trigger>
+        <Sheet.Trigger render={<Button>Open</Button>} />
         <Sheet.Content {...props}>
           <Sheet.Header className="justify-between">
             <Sheet.Title>Edit profile</Sheet.Title>
-            <Sheet.Close asChild>
-              <ActionIcon className="-mr-2">
-                <span className="i-mdi-window-close size-4"></span>
-              </ActionIcon>
-            </Sheet.Close>
+            <Sheet.Close
+              render={
+                <ActionIcon
+                  aria-label="Close"
+                  className="-mr-2"
+                >
+                  <span className="icon-[mdi--window-close] size-4"></span>
+                </ActionIcon>
+              }
+            />
           </Sheet.Header>
           <div className="grid gap-4 p-4">
             <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="name" className="text-right">
+              <Label
+                htmlFor="name"
+                className="text-right"
+              >
                 Name
               </Label>
               <Input
@@ -75,7 +79,10 @@ const meta = {
               />
             </div>
             <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="username" className="text-right">
+              <Label
+                htmlFor="username"
+                className="text-right"
+              >
                 Username
               </Label>
               <Input
@@ -87,11 +94,16 @@ const meta = {
             </div>
           </div>
           <Sheet.Footer className="justify-end">
-            <Sheet.Close asChild>
-              <Button type="submit" className="h-7">
-                Save changes
-              </Button>
-            </Sheet.Close>
+            <Sheet.Close
+              render={
+                <Button
+                  type="submit"
+                  className="h-7"
+                >
+                  Save changes
+                </Button>
+              }
+            />
           </Sheet.Footer>
         </Sheet.Content>
       </Sheet.Root>
diff --git a/packages/react/src/components/sheet/sheet.tsx b/packages/react/src/components/sheet/sheet.tsx
index 41fe8aa..d1c3c47 100644
--- a/packages/react/src/components/sheet/sheet.tsx
+++ b/packages/react/src/components/sheet/sheet.tsx
@@ -1,7 +1,7 @@
-import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { Dialog as SheetPrimitive } from '@base-ui/react/dialog';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '~/utils';
+import { addClassName, cn } from '~/utils';
 
 const SheetRoot = SheetPrimitive.Root;
 
@@ -11,28 +11,29 @@ const SheetClose = SheetPrimitive.Close;
 
 const SheetPortal = SheetPrimitive.Portal;
 
-const SheetOverlay: React.FC<React.ComponentPropsWithRef<typeof SheetPrimitive.Overlay>> = ({
+function SheetOverlay({
   className,
   ref,
   ...props
-}) => (
-  <SheetPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      'fixed',
-      'inset-0',
-      'z-50',
-      'bg-black/50',
-      'backdrop-blur-2',
-      'data-[state=open]:(animate-in fade-in-0)',
-      'data-[state=closed]:(animate-out fade-out-0)',
-      className,
-    )}
-    {...props}
-  />
-);
+}: React.ComponentPropsWithRef<typeof SheetPrimitive.Backdrop>) {
+  return (
+    <SheetPrimitive.Backdrop
+      ref={ref}
+      className={addClassName(
+        className,
+        'fixed',
+        'inset-0',
+        'z-50',
+        'bg-figma-overlay',
+        'backdrop-blur',
+        'transition-opacity duration-200 data-starting-style:opacity-0 data-ending-style:opacity-0 motion-reduce:transition-none',
+      )}
+      {...props}
+    />
+  );
+}
 
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+SheetOverlay.displayName = 'SheetOverlay';
 
 const sheetVariants = cva(
   [
@@ -45,8 +46,8 @@ const sheetVariants = cva(
     'focus-visible:outline-none',
     'transition-all',
     'ease-in-out',
-    'data-[state=open]:(animate-in animate-duration-240)',
-    'data-[state=closed]:(animate-out animate-duration-120)',
+    'duration-200',
+    'motion-reduce:transition-none',
   ],
   {
     variants: {
@@ -55,31 +56,27 @@ const sheetVariants = cva(
           'inset-x-0',
           'top-0',
           'border-b',
-          'data-[state=open]:slide-in-from-top',
-          'data-[state=closed]:slide-out-to-top',
+          'data-starting-style:-translate-y-full data-ending-style:-translate-y-full',
         ],
         bottom: [
           'inset-x-0',
           'bottom-0',
           'border-t',
-          'data-[state=open]:slide-in-from-bottom',
-          'data-[state=closed]:slide-out-to-bottom',
+          'data-starting-style:translate-y-full data-ending-style:translate-y-full',
         ],
         left: [
           'inset-y-0',
           'left-0',
           'h-full',
           'border-r',
-          'data-[state=open]:slide-in-from-left',
-          'data-[state=closed]:slide-out-to-left',
+          'data-starting-style:-translate-x-full data-ending-style:-translate-x-full',
         ],
         right: [
           'inset-y-0',
           'right-0',
           'h-full',
           'border-l',
-          'data-[state=open]:slide-in-from-right',
-          'data-[state=closed]:slide-out-to-right',
+          'data-starting-style:translate-x-full data-ending-style:translate-x-full',
         ],
       },
     },
@@ -90,114 +87,113 @@ const sheetVariants = cva(
 );
 
 export interface SheetContentProps
-  extends React.ComponentPropsWithRef<typeof SheetPrimitive.Content>,
-  VariantProps<typeof sheetVariants> {
-  container?: SheetPrimitive.DialogPortalProps['container'];
+  extends
+    React.ComponentPropsWithRef<typeof SheetPrimitive.Popup>,
+    VariantProps<typeof sheetVariants> {
+  container?: React.ComponentProps<typeof SheetPrimitive.Portal>['container'];
 }
 
 /**
  * Extends the Dialog component to display content that complements the main content of the screen.
  *
- * - [Docs](https://www.radix-ui.com/docs/primitives/components/dialog)
- * - [API Reference](https://www.radix-ui.com/primitives/docs/components/dialog#api-reference)
+ * - [Docs](https://base-ui.com/react/components/dialog)
+ * - [API Reference](https://base-ui.com/react/components/dialog#api-reference)
  */
-const SheetContent: React.FC<SheetContentProps> = ({
-  className,
-  children,
-  container,
-  side,
-  ref,
-  ...props
-}) => {
+function SheetContent({ className, children, container, side, ref, ...props }: SheetContentProps) {
   return (
     <SheetPortal container={container}>
       <SheetOverlay />
-      <SheetPrimitive.Content
+      <SheetPrimitive.Popup
         ref={ref}
-        className={cn(sheetVariants({ side }), className)}
+        className={addClassName(className, sheetVariants({ side }))}
         {...props}
       >
         {children}
-      </SheetPrimitive.Content>
+      </SheetPrimitive.Popup>
     </SheetPortal>
   );
-};
+}
 
-SheetContent.displayName = SheetPrimitive.Content.displayName;
+SheetContent.displayName = 'SheetContent';
 
-const SheetHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex',
-      'items-center',
-      'px-4',
-      'text-left',
-      'min-h-10',
-      'border-b',
-      'border-solid',
-      'border-figma',
-      className,
-    )}
-    {...props}
-  >
-  </div>
-);
+function SheetHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'flex',
+        'items-center',
+        'px-4',
+        'text-left',
+        'min-h-10',
+        'border-b',
+        'border-solid',
+        'border-figma',
+        className,
+      )}
+      {...props}
+    ></div>
+  );
+}
 
 SheetHeader.displayName = 'SheetHeader';
 
-const SheetFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex',
-      'items-center',
-      'px-4',
-      'text-left',
-      'min-h-10',
-      'border-t',
-      'border-solid',
-      'border-figma',
-      className,
-    )}
-    {...props}
-  >
-  </div>
-);
+function SheetFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'flex',
+        'items-center',
+        'px-4',
+        'text-left',
+        'min-h-10',
+        'border-t',
+        'border-solid',
+        'border-figma',
+        className,
+      )}
+      {...props}
+    ></div>
+  );
+}
 
 SheetFooter.displayName = 'SheetFooter';
 
-const SheetTitle: React.FC<React.ComponentPropsWithRef<typeof SheetPrimitive.Title>> = ({
+function SheetTitle({
   className,
   ref,
   ...props
-}) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn('font-size-12', 'text-figma', 'font-semibold', className)}
-    {...props}
-  />
-);
+}: React.ComponentPropsWithRef<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      ref={ref}
+      className={addClassName(
+        className,
+        'text-figma',
+        'text-figma-body-medium',
+        'font-figma-strong',
+      )}
+      {...props}
+    />
+  );
+}
 
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
+SheetTitle.displayName = 'SheetTitle';
 
-const SheetDescription: React.FC<React.ComponentPropsWithRef<typeof SheetPrimitive.Description>> = ({
+function SheetDescription({
   className,
   ref,
   ...props
-}) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn('text-figma-secondary', className)}
-    {...props}
-  />
-);
+}: React.ComponentPropsWithRef<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      ref={ref}
+      className={addClassName(className, 'text-figma-secondary')}
+      {...props}
+    />
+  );
+}
 
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
+SheetDescription.displayName = 'SheetDescription';
 
 export {
   SheetRoot as Root,
diff --git a/packages/react/src/components/slider/slider.stories.tsx b/packages/react/src/components/slider/slider.stories.tsx
index a143399..e2696fe 100644
--- a/packages/react/src/components/slider/slider.stories.tsx
+++ b/packages/react/src/components/slider/slider.stories.tsx
@@ -1,15 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 
 import { TooltipProvider, Tooltip } from '../tooltip';
-
-import {
-  Slider,
-  SliderRoot,
-  SliderTrack,
-  SliderRange,
-  SliderThumb,
-} from './slider';
+import { Slider, SliderRoot, SliderTrack, SliderRange, SliderThumb } from './slider';
 
 type CustomStoryProps = React.ComponentPropsWithRef<typeof Slider> & {
   showTooltip?: boolean;
@@ -39,14 +32,6 @@ const meta = {
         },
       },
     },
-    inverted: {
-      table: {
-        type: {
-          summary: 'boolean',
-          detail: 'Whether the slider is visually inverted.',
-        },
-      },
-    },
     orientation: {
       control: 'inline-radio',
       options: ['horizontal', 'vertical'],
@@ -82,7 +67,7 @@ const meta = {
         },
       },
     },
-    minStepsBetweenThumbs: {
+    minStepsBetweenValues: {
       table: {
         type: {
           summary: 'number',
@@ -98,15 +83,14 @@ const meta = {
   },
   args: {
     disabled: false,
-    inverted: false,
     orientation: 'horizontal',
     value: [50],
     min: 0,
     max: 100,
     step: 1,
-    minStepsBetweenThumbs: 0,
+    minStepsBetweenValues: 0,
   },
-  render: (args) => {
+  render: function Render(args) {
     const [{ value }, updateArgs] = useArgs();
     return (
       <div className="min-h-60 min-w-60 flex items-center justify-center">
@@ -114,7 +98,7 @@ const meta = {
           {...args}
           value={value}
           className="data-[orientation=vertical]:h-60"
-          onValueChange={changed => updateArgs({ value: changed })}
+          onValueChange={(changed) => updateArgs({ value: changed })}
         />
       </div>
     );
@@ -137,8 +121,56 @@ export const RangeSlider: Story = {
   },
 };
 
+export const Stepper: Story = {
+  args: {
+    hints: [0, 25, 50, 75, 100],
+  },
+};
+
+export const Delta: Story = {
+  args: {
+    hints: [0, 25, 50, 75, 100],
+    baseValue: 50,
+  },
+};
+
+/**
+ * The spec's `Stroke (Modified)` thumb — a `bg-default` knob with an
+ * `icon-onbrand` ring and elevation-300.
+ */
+export const Modified: Story = {
+  args: {
+    modified: true,
+  },
+};
+
+export const Hue: Story = {
+  args: {
+    variant: 'hue',
+    value: [210],
+    max: 360,
+  },
+};
+
+export const Opacity: Story = {
+  args: {
+    variant: 'opacity',
+    fill: '#9747ff',
+    value: [60],
+  },
+};
+
+export const Gradient: Story = {
+  args: {
+    variant: 'gradient',
+    fill: 'linear-gradient(to right, rgba(151, 71, 255, 0), #9747ff)',
+    thumbFills: ['rgba(151, 71, 255, 0.4)', '#9747ff'],
+    value: [20, 80],
+  },
+};
+
 export const CustomStyle: Story = {
-  render: (args) => {
+  render: function Render(args) {
     const [{ value: values }, updateArgs] = useArgs<{
       value: number[];
     }>();
@@ -148,9 +180,9 @@ export const CustomStyle: Story = {
           {...args}
           value={values}
           className="data-[orientation=vertical]:h-60"
-          onValueChange={value => updateArgs({ value })}
+          onValueChange={(value) => updateArgs({ value: value as number[] })}
         >
-          <SliderTrack className="h-1px bg-figma-icon data-[orientation=vertical]:w-1px">
+          <SliderTrack className="h-px bg-figma-icon data-[orientation=vertical]:w-px">
             <SliderRange className="bg-figma-icon" />
           </SliderTrack>
           {values.map((_, index) => (
@@ -174,7 +206,7 @@ export const WithValueTooltip: Story = {
   args: {
     showTooltip: false,
   },
-  render: ({ showTooltip: _, ...props }) => {
+  render: function Render({ showTooltip: _showTooltip, ...props }) {
     const [{ value: values, showTooltip }, updateArgs] = useArgs<{
       value: number[];
       showTooltip: boolean;
@@ -187,7 +219,7 @@ export const WithValueTooltip: Story = {
             {...props}
             value={values}
             className="data-[orientation=vertical]:h-60"
-            onValueChange={value => updateArgs({ value })}
+            onValueChange={(value) => updateArgs({ value: value as number[] })}
           >
             <SliderTrack>
               <SliderRange />
@@ -199,8 +231,7 @@ export const WithValueTooltip: Story = {
                 open={showTooltip}
                 side={props.orientation === 'horizontal' ? 'top' : 'left'}
                 content={<p>{value}</p>}
-                delayDuration={200}
-                updatePositionStrategy="always"
+                delay={200}
               >
                 <SliderThumb
                   onMouseOver={() => updateArgs({ showTooltip: true })}
diff --git a/packages/react/src/components/slider/slider.tsx b/packages/react/src/components/slider/slider.tsx
index f95e707..31a6050 100644
--- a/packages/react/src/components/slider/slider.tsx
+++ b/packages/react/src/components/slider/slider.tsx
@@ -1,126 +1,437 @@
-import * as SliderPrimitive from '@radix-ui/react-slider';
+import { Slider as SliderPrimitive } from '@base-ui/react/slider';
+import { createContext, useContext, useState } from 'react';
 
-import { cn } from '~/utils';
+import { addClassName, cn } from '~/utils';
 
-const SliderRoot: React.FC<React.ComponentPropsWithRef<typeof SliderPrimitive.Root>> = ({
+const SNAP_PERCENTAGE_THRESHOLD = 2;
+
+interface SliderValuesContextValue {
+  min: number;
+  values: readonly number[];
+}
+
+/**
+ * The resolved slider values, mirrored from `SliderRoot` so `SliderRange`
+ * can tell when the range is empty and skip its under-thumb bleed (a
+ * zero-width indicator would otherwise still paint its padding, leaving a
+ * stray fill stub inside the hollow thumb at the min edge).
+ */
+const SliderValuesContext = createContext<SliderValuesContextValue>({ min: 0, values: [1] });
+
+function getSnappedValue(value: number, hints: number[] | undefined, min: number, max: number) {
+  const snappingFactor = ((max - min) / 100) * SNAP_PERCENTAGE_THRESHOLD;
+  const closestHint = hints?.find((hint) => Math.abs(hint - value) <= snappingFactor);
+  return typeof closestHint === 'number' ? closestHint : value;
+}
+
+function snapValue(
+  value: number | readonly number[],
+  hints: number[] | undefined,
+  min: number,
+  max: number,
+): number | number[] {
+  return typeof value === 'number'
+    ? getSnappedValue(value, hints, min, max)
+    : value.map((v) => getSnappedValue(v, hints, min, max));
+}
+
+interface SliderRootProps extends React.ComponentPropsWithRef<typeof SliderPrimitive.Root> {}
+
+function toArray(value: number | readonly number[]) {
+  return typeof value === 'number' ? [value] : value;
+}
+
+function SliderRoot({
   className,
+  children,
   ref,
+  value,
+  defaultValue,
+  onValueChange,
+  min = 0,
   ...props
-}) => (
-  <SliderPrimitive.Root
-    className={cn(
-      'relative',
-      'flex',
-      'items-center',
-      'w-full',
-      'h-3',
-      'touch-none',
-      'select-none',
-      'data-[orientation=vertical]:(flex-col w-3 h-full)',
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-);
-
-SliderRoot.displayName = SliderPrimitive.Root.displayName;
-
-const SliderTrack: React.FC<React.ComponentPropsWithRef<typeof SliderPrimitive.Track>> = ({
+}: SliderRootProps) {
+  // In uncontrolled usage Base UI keeps the value internally — mirror it so
+  // the context below always reflects the resolved range.
+  const [mirroredValue, setMirroredValue] = useState<number | readonly number[] | undefined>(
+    defaultValue,
+  );
+  const values = toArray(value ?? mirroredValue ?? min);
+
+  return (
+    <SliderValuesContext.Provider value={{ min, values }}>
+      <SliderPrimitive.Root
+        thumbAlignment="center"
+        className={addClassName(
+          className,
+          'relative',
+          'flex',
+          'items-center',
+          'grow',
+          'w-full',
+          'h-6',
+          'touch-none',
+          'select-none',
+          'border-0 border-x-8 border-solid border-transparent',
+          'data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-6 data-[orientation=vertical]:h-full data-[orientation=vertical]:border-x-0 data-[orientation=vertical]:border-y-8',
+        )}
+        min={min}
+        value={value}
+        defaultValue={defaultValue}
+        onValueChange={(next, details) => {
+          setMirroredValue(next);
+          onValueChange?.(next, details);
+        }}
+        {...props}
+        ref={ref}
+      >
+        <SliderPrimitive.Control className="group relative flex h-full w-full items-center data-[orientation=vertical]:flex-col">
+          {children}
+        </SliderPrimitive.Control>
+      </SliderPrimitive.Root>
+    </SliderValuesContext.Provider>
+  );
+}
+
+SliderRoot.displayName = 'SliderRoot';
+
+function SliderTrack({
   className,
+  children,
   ref,
   ...props
-}) => (
-  <SliderPrimitive.Track
-    className={cn(
-      'relative',
-      'h-0.5',
-      'grow',
-      'overflow-hidden',
-      'rounded-full',
-      'bg-figma-tertiary',
-      'data-[orientation=vertical]:w-0.5',
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-);
-
-SliderTrack.displayName = SliderPrimitive.Track.displayName;
-
-const SliderRange: React.FC<React.ComponentPropsWithRef<typeof SliderPrimitive.Range>> = ({
+}: React.ComponentPropsWithRef<typeof SliderPrimitive.Track>) {
+  return (
+    <SliderPrimitive.Track
+      className={addClassName(
+        className,
+        'static',
+        'h-4',
+        'grow',
+        'overflow-hidden',
+        'rounded-full',
+        'bg-figma-secondary',
+        'outline-solid outline-1 -outline-offset-1 outline-figma-bordertranslucent',
+        'data-[orientation=horizontal]:-mx-2',
+        'data-[orientation=vertical]:w-4 data-[orientation=vertical]:-my-2',
+      )}
+      {...props}
+      ref={ref}
+    >
+      <div className="absolute group-data-[orientation=horizontal]:inset-x-2 group-data-[orientation=horizontal]:top-0 group-data-[orientation=horizontal]:h-full group-data-[orientation=vertical]:inset-y-2 group-data-[orientation=vertical]:left-0 group-data-[orientation=vertical]:w-full">
+        {children}
+      </div>
+    </SliderPrimitive.Track>
+  );
+}
+
+SliderTrack.displayName = 'SliderTrack';
+
+function SliderRange({
   className,
   ref,
   ...props
-}) => (
-  <SliderPrimitive.Range
-    className={cn(
-      'absolute',
-      'bg-figma-brand',
-      'data-[orientation=horizontal]:h-full',
-      'data-[orientation=vertical]:w-full',
-      'data-[disabled]:bg-figma-icon-disabled',
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-);
-
-SliderRange.displayName = SliderPrimitive.Range.displayName;
-
-const SliderThumb: React.FC<React.ComponentPropsWithRef<typeof SliderPrimitive.Thumb>> = ({
+}: React.ComponentPropsWithRef<typeof SliderPrimitive.Indicator>) {
+  const { min, values } = useContext(SliderValuesContext);
+  // The track bleeds 8px past the value domain so the hollow thumb at the
+  // extremes still sits on the rail; the fill must reach -8 on the min side
+  // to stay flush with the rounded cap, and +6 on the value side to reach
+  // under the thumb's 4px hollow center. On an empty range the indicator is
+  // zero-size and the bleed alone would still paint a stub — skip it.
+  const empty = values.length === 1 ? values[0] <= min : values[values.length - 1] <= values[0];
+  return (
+    <SliderPrimitive.Indicator
+      className={addClassName(
+        className,
+        'absolute',
+        'block',
+        'rounded-full',
+        'bg-figma-brand',
+        'box-content',
+        'data-[orientation=horizontal]:h-4 data-[orientation=vertical]:w-4',
+        !empty &&
+          'data-[orientation=horizontal]:-ml-2 data-[orientation=horizontal]:pl-2 data-[orientation=horizontal]:pr-1.5 data-[orientation=vertical]:-mb-2 data-[orientation=vertical]:pb-2 data-[orientation=vertical]:pt-1.5',
+        'data-disabled:bg-figma-disabled',
+      )}
+      {...props}
+      ref={ref}
+    />
+  );
+}
+
+SliderRange.displayName = 'SliderRange';
+
+function SliderThumb({
   className,
   ref,
   ...props
-}) => (
-  <SliderPrimitive.Thumb
-    className={cn(
-      'flex',
-      'items-center',
-      'justify-center',
-      'border',
-      'border-solid',
-      'border-transparent',
-      'rounded-full',
-      'bg-figma',
-      'outline-solid',
-      'outline-2',
-      'outline-transparent',
-      'after:(block size-2 shrink-0 rounded-full content-[""] bg-figma-icon)',
-      '[&:not(data-disabled)]:focus:outline-figma-border-selected',
-      'data-[disabled]:after:bg-figma-icon-disabled',
-      'data-[disabled]:pointer-events-none',
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-);
-
-SliderThumb.displayName = SliderPrimitive.Thumb.displayName;
+}: React.ComponentPropsWithRef<typeof SliderPrimitive.Thumb>) {
+  return (
+    <SliderPrimitive.Thumb
+      className={addClassName(
+        className,
+        'relative',
+        'block',
+        'z-10',
+        'size-4',
+        'border-4',
+        'border-solid',
+        'border-figma-icon-onbrand',
+        'rounded-full',
+        'bg-transparent',
+        'shadow-figma-elevation-200',
+        'outline-0',
+        'after:pointer-events-none after:absolute after:inset-1 after:rounded-full after:content-[""] after:shadow-[inset_0_0_0_0.5px_rgba(0,0,0,0.1)]',
+        'focus-visible:outline-1 focus-visible:outline-solid focus-visible:outline-figma-border-selected',
+        'data-disabled:border-0 data-disabled:bg-figma-disabled data-disabled:shadow-none data-disabled:pointer-events-none data-disabled:after:hidden',
+      )}
+      {...props}
+      ref={ref}
+    />
+  );
+}
+
+SliderThumb.displayName = 'SliderThumb';
+
+interface SliderHintProps {
+  hint: number;
+  baseValue?: number;
+  min: number;
+  max: number;
+  orientation?: 'horizontal' | 'vertical';
+}
+
+function SliderHint({ hint, baseValue, min, max, orientation = 'horizontal' }: SliderHintProps) {
+  const offset = ((hint - min) / (max - min)) * 100;
+  const horizontal = orientation !== 'vertical';
+  return (
+    <span
+      data-hint=""
+      data-orientation={orientation}
+      className={cn(
+        'pointer-events-none absolute block size-1 rounded-full bg-figma-icon-tertiary',
+        horizontal
+          ? 'top-1/2 -translate-y-1/2 -translate-x-1/2'
+          : 'left-1/2 -translate-x-1/2 translate-y-1/2',
+        hint === baseValue && 'bg-figma-icon',
+      )}
+      style={horizontal ? { left: `${offset}%` } : { bottom: `${offset}%` }}
+    />
+  );
+}
+
+// UI3 paints a white sheen fading down over the hue/opacity/gradient fills.
+const TRACK_SHEEN = 'linear-gradient(to bottom, rgb(255 255 255), rgb(255 255 255 / 0))';
+
+const HUE_TRACK =
+  'linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%))';
+
+const CHECKERBOARD = 'repeating-conic-gradient(#00000026 0% 25%, transparent 0% 50%) 0 0 / 8px 8px';
+
+// A bare color can't be a non-final `background` layer — wrap it as a
+// solid gradient so it can stack above the checkerboard.
+function toLayer(fill: string) {
+  return /gradient|url\(/.test(fill) ? fill : `linear-gradient(${fill}, ${fill})`;
+}
+
+interface SliderProps extends React.ComponentPropsWithRef<typeof SliderRoot> {
+  /**
+   * Values shown as tick marks on the track. Pointer values snap to the
+   * nearest hint within 2% of the range (UI3 "Stepper" slider).
+   */
+  hints?: number[];
+  /**
+   * The value treated as the baseline (UI3 "Delta" slider): its hint is
+   * emphasized and the thumb at that value renders filled.
+   */
+  baseValue?: number;
+  /**
+   * UI3 "Slider Color" / "Slider Gradient" presentation:
+   *
+   * - `'hue'` paints the spectrum track and derives the thumb's inner color disc from the value.
+   * - `'opacity'` paints a checkerboard fading into `fill`; the thumb disc shows `fill` at the
+   *   value's alpha.
+   * - `'gradient'` renders `fill` on the track and square chit.24-style thumbs (spec's gradient stop
+   *   handles).
+   */
+  variant?: 'hue' | 'opacity' | 'gradient';
+  /**
+   * The color being edited: the fade-in endpoint for `variant="opacity"`,
+   * the track paint for `variant="gradient"`, and the thumb preview fill.
+   */
+  fill?: string;
+  /**
+   * Per-thumb preview fills — e.g. each gradient stop's own color.
+   * Overrides `fill` inside the thumb at that index.
+   */
+  thumbFills?: string[];
+  /**
+   * Renders the spec's `Stroke (Modified)` thumb: a `bg-default` knob with
+   * an `icon-onbrand` ring and elevation-300.
+   */
+  modified?: boolean;
+}
 
 /**
  * An input where the user selects a value from within a given range.
  *
- * - [Docs](https://www.radix-ui.com/docs/primitives/components/slider)
- * - [API Reference](https://www.radix-ui.com/primitives/docs/components/slider#api-reference)
+ * - [Docs](https://base-ui.com/react/components/slider)
+ * - [API Reference](https://base-ui.com/react/components/slider#api)
  */
-const Slider: React.FC<React.ComponentPropsWithRef<typeof SliderRoot>> = ({ ref, ...props }) => {
-  const value = props.value ?? props.defaultValue ?? [0];
+function Slider({
+  ref,
+  hints,
+  baseValue,
+  variant,
+  fill,
+  thumbFills,
+  modified,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  onValueCommitted,
+  ...props
+}: SliderProps) {
+  const min = props.min ?? 0;
+  const max = props.max ?? 100;
+  // Internally controlled so hint snapping also moves the thumb in
+  // uncontrolled usage — wrapping the callback alone can't feed back
+  // into Base UI's internal state.
+  const isControlled = valueProp !== undefined;
+  const [innerValue, setInnerValue] = useState<number | number[]>(() =>
+    typeof defaultValue === 'number' || defaultValue === undefined
+      ? (defaultValue ?? min)
+      : [...defaultValue],
+  );
+  const value = isControlled ? valueProp : innerValue;
+  const values = toArray(value);
+  const trackFill = fill;
+
   return (
-    <SliderRoot {...props} ref={ref}>
-      <SliderTrack>
-        <SliderRange />
+    <SliderRoot
+      {...props}
+      ref={ref}
+      value={value as number | number[]}
+      onValueChange={(next, details) => {
+        // Snap only on pointer input — snapping keyboard steps would trap
+        // the value inside a hint's threshold.
+        const snapped: number | number[] = details.event?.type.startsWith('key')
+          ? typeof next === 'number'
+            ? next
+            : [...next]
+          : snapValue(next, hints, min, max);
+        if (!isControlled) {
+          setInnerValue(snapped);
+        }
+        onValueChange?.(snapped, details);
+      }}
+      onValueCommitted={
+        onValueCommitted
+          ? (next, details) => onValueCommitted(snapValue(next, hints, min, max), details)
+          : undefined
+      }
+    >
+      <SliderTrack
+        className={variant && cn('bg-transparent outline-none', 'overflow-hidden')}
+        style={
+          variant === 'hue'
+            ? { background: `${TRACK_SHEEN}, ${HUE_TRACK}` }
+            : variant === 'opacity'
+              ? {
+                  background: `${TRACK_SHEEN}, ${trackFill ? `linear-gradient(to right, transparent, ${trackFill}), ` : ''}${CHECKERBOARD}`,
+                }
+              : variant === 'gradient'
+                ? {
+                    background: `${TRACK_SHEEN}, ${trackFill ? `${toLayer(trackFill)}, ` : ''}${CHECKERBOARD}`,
+                  }
+                : undefined
+        }
+      >
+        {variant === undefined && <SliderRange />}
       </SliderTrack>
-      {value.map((_, index) => (
-        <SliderThumb key={index} />
+      {values.map((v: number, index: number) => {
+        const thumbFill = thumbFills?.[index] ?? trackFill;
+        return (
+          <SliderThumb
+            key={index}
+            index={index}
+            className={cn(
+              v === baseValue && 'bg-figma-icon-onbrand',
+              (variant || v === baseValue) &&
+                variant !== 'gradient' &&
+                'flex items-center justify-center',
+              variant === 'gradient' &&
+                'group/thumb size-4 border-0 bg-transparent shadow-none focus-visible:outline-0 after:hidden',
+              modified &&
+                'border bg-figma shadow-figma-elevation-300 flex items-center justify-center',
+            )}
+          >
+            {modified && variant !== 'gradient' && (
+              <span className="block size-2 rounded-full outline-1 outline-figma-bordertranslucent" />
+            )}
+            {variant && variant !== 'gradient' && !modified && (
+              <span
+                data-thumb-fill=""
+                className="block size-2 shrink-0 rounded-full"
+                style={{
+                  background:
+                    variant === 'hue'
+                      ? `hsl(${((v - min) / (max - min)) * 360} 100% 50%)`
+                      : thumbFill
+                        ? `color-mix(in srgb, ${thumbFill} ${(((v - min) / (max - min)) * 100).toFixed(1)}%, transparent)`
+                        : undefined,
+                }}
+              />
+            )}
+            {variant === undefined && v === baseValue && (
+              <span
+                data-thumb-fill=""
+                className="block size-1.5 rounded-full bg-figma-icon-secondary"
+              />
+            )}
+            {variant === 'gradient' && (
+              <span
+                data-thumb-fill=""
+                className="absolute bottom-[21px] left-1/2 block -translate-x-1/2"
+              >
+                <span
+                  className={cn(
+                    'relative block size-6 rounded-figma-md bg-figma p-1.25',
+                    'outline-1 -outline-offset-1 outline-solid outline-figma-bordertranslucent',
+                    'drop-shadow-[0_0_0.25px_rgba(0,0,0,0.18),0_3px_4px_rgba(0,0,0,0.1),0_1px_1.5px_rgba(0,0,0,0.1)]',
+                    'after:absolute after:bottom-[-5px] after:left-1/2 after:block after:h-1.5 after:w-3',
+                    'after:-translate-x-1/2 after:bg-inherit after:content-[""]',
+                    'after:[clip-path:polygon(0_0,100%_0,58%_100%,42%_100%)]',
+                    'group-focus-within/thumb:bg-figma-selected-strong',
+                  )}
+                >
+                  <span
+                    className="block size-full rounded-figma-sm outline-1 -outline-offset-1 outline-solid outline-figma-bordertranslucent"
+                    style={{
+                      background: `${thumbFill ? `${toLayer(thumbFill)}, ` : ''}${CHECKERBOARD}, linear-gradient(#fff, #fff)`,
+                    }}
+                  />
+                </span>
+              </span>
+            )}
+          </SliderThumb>
+        );
+      })}
+      {hints?.map((hint) => (
+        <SliderHint
+          key={hint}
+          hint={hint}
+          baseValue={baseValue}
+          min={min}
+          max={max}
+          orientation={props.orientation}
+        />
       ))}
     </SliderRoot>
   );
-};
+}
 
-Slider.displayName = SliderPrimitive.Root.displayName;
+Slider.displayName = 'Slider';
 
 export { Slider, SliderRoot, SliderTrack, SliderRange, SliderThumb };
+export type { SliderProps };
diff --git a/packages/react/src/components/swatch/index.ts b/packages/react/src/components/swatch/index.ts
new file mode 100644
index 0000000..18a822d
--- /dev/null
+++ b/packages/react/src/components/swatch/index.ts
@@ -0,0 +1 @@
+export * from './swatch';
diff --git a/packages/react/src/components/swatch/swatch.stories.tsx b/packages/react/src/components/swatch/swatch.stories.tsx
new file mode 100644
index 0000000..643fc3b
--- /dev/null
+++ b/packages/react/src/components/swatch/swatch.stories.tsx
@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import * as ValueField from '../value-field/value-field';
+import { Swatch } from './swatch';
+
+const meta = {
+  title: 'Components/Swatch',
+  component: Swatch,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    fill: '#ff24bd',
+    size: 'default',
+  },
+} satisfies Meta<React.ComponentPropsWithRef<typeof Swatch>>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Fills: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      <Swatch fill="#ff24bd" />
+      <Swatch fill="rgba(255, 36, 189, 0.4)" />
+      <Swatch fill="linear-gradient(90deg, #ff24bd, #007be5)" />
+      <Swatch fill="conic-gradient(#f24822, #ffcd29, #14ae5c, #007be5, #9747ff, #f24822)" />
+      <Swatch fill="repeating-linear-gradient(45deg, #1e1e1e 0 4px, #ffcd29 4px 8px)" />
+    </div>
+  ),
+};
+
+/**
+ * The spec's Type=Opacity — solid fill on the left half, ~24% alpha on
+ * the right.
+ */
+export const Opacity: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      <Swatch
+        type="opacity"
+        fill="#ff24bd"
+      />
+      <Swatch
+        type="opacity"
+        fill="linear-gradient(90deg, #ff24bd, #007be5)"
+      />
+    </div>
+  ),
+};
+
+/**
+ * The spec's Variant=Circle — a 16px round chit with no inset ring.
+ */
+export const Circle: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      <Swatch
+        shape="circle"
+        fill="#ff24bd"
+      />
+      <Swatch
+        shape="circle"
+        fill="linear-gradient(90deg, #ff24bd, #007be5)"
+      />
+    </div>
+  ),
+};
+
+export const InValueField: Story = {
+  render: () => (
+    <ValueField.Root>
+      <ValueField.Label>
+        <Swatch fill="rgba(255, 36, 189, 0.24)" />
+      </ValueField.Label>
+      <ValueField.Hex
+        value={{ r: 1, g: 0.14, b: 0.74, a: 0.24 }}
+        onChange={() => {}}
+      />
+    </ValueField.Root>
+  ),
+};
+
+export default meta;
diff --git a/packages/react/src/components/swatch/swatch.tsx b/packages/react/src/components/swatch/swatch.tsx
new file mode 100644
index 0000000..b7c101f
--- /dev/null
+++ b/packages/react/src/components/swatch/swatch.tsx
@@ -0,0 +1,85 @@
+import { cn } from '~/utils';
+
+const CHECKERBOARD = 'repeating-conic-gradient(#d4d4d4 0% 25%, #ffffff 0% 50%) 0 0 / 8px 8px';
+
+interface SwatchProps extends React.ComponentPropsWithRef<'span'> {
+  /**
+   * The fill preview — any CSS background value: solid color (including
+   * alpha), gradient, or `url(...)`/`image-set(...)`.
+   */
+  fill?: string;
+  /**
+   * `default` is 14px (the UI3 chit inside a 24px field cell), `small` is 12px.
+   */
+  size?: 'default' | 'small';
+  /**
+   * `opacity` renders the spec's Type=Opacity chit: the fill solid on the
+   * left half and at ~24% alpha on the right.
+   */
+  type?: 'fill' | 'opacity';
+  /**
+   * `circle` renders the spec's Variant=Circle — a round chit with no
+   * inset ring (16px, or 12px at `size="small"`).
+   */
+  shape?: 'square' | 'circle';
+}
+
+/**
+ * A fill preview chit — solid color, gradient, or image — over a checkerboard
+ * so alpha transparency is visible (UI3 "Value - Paint" swatch).
+ */
+function Swatch({
+  fill,
+  size = 'default',
+  type = 'fill',
+  shape = 'square',
+  className,
+  style,
+  ref,
+  ...props
+}: SwatchProps) {
+  const circle = shape === 'circle';
+  return (
+    <span
+      ref={ref}
+      aria-hidden="true"
+      className={cn(
+        'relative inline-block overflow-hidden',
+        circle
+          ? 'rounded-full'
+          : 'rounded-figma-sm after:absolute after:inset-0 after:rounded-[inherit] after:shadow-[inset_0_0_0_1px_var(--figma-color-bordertranslucent)]',
+        size === 'small' ? 'size-3' : circle ? 'size-4' : 'size-3.5',
+        className,
+      )}
+      style={style}
+      {...props}
+    >
+      <span
+        className="absolute inset-0"
+        style={{ background: CHECKERBOARD }}
+      />
+      {type === 'opacity' ? (
+        <>
+          <span
+            className="absolute inset-y-0 left-0 w-1/2 rounded-l-figma-sm"
+            style={fill ? { background: fill } : undefined}
+          />
+          <span
+            className="absolute inset-y-0 right-0 w-1/2 rounded-r-figma-sm opacity-[0.24]"
+            style={fill ? { background: fill } : undefined}
+          />
+        </>
+      ) : (
+        <span
+          className="absolute inset-0"
+          style={fill ? { background: fill, backgroundSize: 'cover' } : undefined}
+        />
+      )}
+    </span>
+  );
+}
+
+Swatch.displayName = 'Swatch';
+
+export { Swatch };
+export type { SwatchProps };
diff --git a/packages/react/src/components/switch/switch.stories.tsx b/packages/react/src/components/switch/switch.stories.tsx
index 3f8942e..65761e7 100644
--- a/packages/react/src/components/switch/switch.stories.tsx
+++ b/packages/react/src/components/switch/switch.stories.tsx
@@ -1,8 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 
 import { Label } from '../label';
-
 import { Switch } from './switch';
 
 const meta = {
@@ -23,14 +22,14 @@ const meta = {
     disabled: false,
     checked: false,
   },
-  render: (args) => {
+  render: function Render(args) {
     const [{ checked }, updateArgs] = useArgs();
 
     return (
       <Switch
         {...args}
         checked={checked}
-        onCheckedChange={value => updateArgs({ checked: value })}
+        onCheckedChange={(value) => updateArgs({ checked: value })}
       />
     );
   },
@@ -46,6 +45,12 @@ export const Checked: Story = {
   },
 };
 
+export const Mixed: Story = {
+  args: {
+    indeterminate: true,
+  },
+};
+
 export const Disabled: Story = {
   args: {
     disabled: true,
@@ -53,7 +58,7 @@ export const Disabled: Story = {
 };
 
 export const WithLabel: Story = {
-  render: (args) => {
+  render: function Render(args) {
     const [{ checked }, updateArgs] = useArgs();
 
     return (
diff --git a/packages/react/src/components/switch/switch.tsx b/packages/react/src/components/switch/switch.tsx
index a2b9b1a..3ab2c18 100644
--- a/packages/react/src/components/switch/switch.tsx
+++ b/packages/react/src/components/switch/switch.tsx
@@ -1,46 +1,74 @@
-import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { Switch as SwitchPrimitives } from '@base-ui/react/switch';
 
-import { cn } from '~/utils';
+import { CheckmarkIndeterminateIcon } from '~/icons';
+import { addClassName } from '~/utils';
+
+interface SwitchProps extends React.ComponentPropsWithRef<typeof SwitchPrimitives.Root> {
+  /**
+   * Marks the switch as indeterminate (UI3 "Mixed" state). Renders a bar
+   * instead of the knob and sets `aria-checked="mixed"`.
+   */
+  indeterminate?: boolean;
+}
 
 /**
  * A control that allows the user to toggle between checked and not checked.
  *
- * - [Docs](https://www.radix-ui.com/docs/primitives/components/switch)
- * - [API Reference](https://www.radix-ui.com/primitives/docs/components/switch#api-reference)
+ * - [Docs](https://base-ui.com/react/components/switch)
+ * - [API Reference](https://base-ui.com/react/components/switch#api)
  */
-const Switch: React.FC<React.ComponentPropsWithRef<typeof SwitchPrimitives.Root>> = ({
-  className,
-  ref,
-  ...props
-}) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      'peer',
-      'inline-flex',
-      'shrink-0',
-      'items-center',
-      'w-6',
-      'h-3',
-      'rounded-full',
-      'cursor-default',
-      'border-1',
-      'border-solid',
-      'border-transparent',
-      'transition-colors',
-      'disabled:(cursor-not-allowed bg-figma-disabled)',
-      'data-[state=checked]:bg-figma-brand',
-      'data-[state=unchecked]:bg-figma-icon-tertiary',
-      className,
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className="pointer-events-none block size-2.5 rounded-full transition-transform bg-figma-icon-onbrand data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0"
-    />
-  </SwitchPrimitives.Root>
-);
+function Switch({ className, indeterminate = false, ref, ...props }: SwitchProps) {
+  return (
+    <SwitchPrimitives.Root
+      data-mixed={indeterminate || undefined}
+      {...(indeterminate ? { 'aria-checked': 'mixed' as const } : {})}
+      className={addClassName(
+        className,
+        'peer',
+        'group',
+        'relative',
+        'block',
+        'shrink-0',
+        'w-8',
+        'h-4',
+        'rounded-full',
+        'cursor-default',
+        'appearance-none',
+        'border-0',
+        'bg-transparent',
+        'outline-solid',
+        'outline-1',
+        '-outline-offset-1',
+        'outline-transparent',
+        'transition-[background-position] duration-[80ms]',
+        'focus-visible:outline-figma-border-selected focus-visible:before:inset-[3px]',
+        'data-checked:focus-visible:outline-figma-border-selected-strong',
+        'data-mixed:focus-visible:outline-figma-border-selected-strong',
+        'before:absolute before:inset-0 before:rounded-full before:content-[""]',
+        'data-unchecked:before:bg-figma-tertiary',
+        'data-checked:before:bg-figma-brand',
+        'data-mixed:data-unchecked:before:bg-figma-brand',
+        'data-checked:active:before:bg-figma-brand-pressed',
+        'data-mixed:data-unchecked:active:before:bg-figma-brand-pressed',
+        'data-disabled:data-unchecked:before:bg-figma-disabled',
+        'data-disabled:data-checked:before:bg-figma-tertiary',
+      )}
+      {...props}
+      ref={ref}
+    >
+      {indeterminate ? (
+        <CheckmarkIndeterminateIcon
+          size="4"
+          className="pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 icon-figma-onbrand group-data-disabled:icon-figma-disabled"
+        />
+      ) : (
+        <SwitchPrimitives.Thumb className="pointer-events-none absolute top-px left-px size-3.5 rounded-full bg-figma-icon-onbrand transition-all duration-[80ms] data-checked:left-[calc(100%-15px)] data-disabled:bg-figma-icon-ondisabled" />
+      )}
+    </SwitchPrimitives.Root>
+  );
+}
 
-Switch.displayName = SwitchPrimitives.Root.displayName;
+Switch.displayName = 'Switch';
 
 export { Switch };
+export type { SwitchProps };
diff --git a/packages/react/src/components/tabs/tabs.stories.tsx b/packages/react/src/components/tabs/tabs.stories.tsx
index e6fc8c0..c8db1e9 100644
--- a/packages/react/src/components/tabs/tabs.stories.tsx
+++ b/packages/react/src/components/tabs/tabs.stories.tsx
@@ -1,9 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 
 import * as Tabs from './tabs';
 
-const meta = {
+const meta: Meta = {
   title: 'Components/Tabs',
   component: Tabs.Root,
   parameters: {
@@ -19,29 +19,33 @@ const meta = {
   args: {
     value: 'all',
   },
-  render: (args) => {
+  render: function Render(args) {
     const [{ value }, updateArgs] = useArgs();
 
-    const list = [{
-      value: 'all',
-      content: 'All comments, mentions, and replies',
-    }, {
-      value: 'only',
-      content: 'Only mentions and replies',
-    }, {
-      value: 'none',
-      content: 'None',
-    }];
+    const list = [
+      {
+        value: 'all',
+        content: 'All comments, mentions, and replies',
+      },
+      {
+        value: 'only',
+        content: 'Only mentions and replies',
+      },
+      {
+        value: 'none',
+        content: 'None',
+      },
+    ];
 
     return (
       <Tabs.Root
         {...args}
         className="min-w-60"
         value={value}
-        onValueChange={tab => updateArgs({ value: tab })}
+        onValueChange={(tab) => updateArgs({ value: tab })}
       >
         <Tabs.List className="h-9 w-full justify-start">
-          {list.map(item => (
+          {list.map((item) => (
             <Tabs.Trigger
               key={item.value}
               value={item.value}
@@ -51,7 +55,7 @@ const meta = {
           ))}
         </Tabs.List>
         <div className="flex p-2">
-          {list.map(item => (
+          {list.map((item) => (
             <Tabs.Content
               key={item.value}
               value={item.value}
@@ -63,10 +67,35 @@ const meta = {
       </Tabs.Root>
     );
   },
-} satisfies Meta<typeof Tabs.Root>;
+} satisfies Meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
+export const Overflow: Story = {
+  argTypes: { value: { control: false } },
+  render: (args) => (
+    <Tabs.Root
+      {...args}
+      className="w-48"
+      defaultValue="first"
+    >
+      <Tabs.List
+        scrollable
+        className="h-9"
+      >
+        {['first', 'second', 'third', 'fourth'].map((v) => (
+          <Tabs.Trigger
+            key={v}
+            value={v}
+          >
+            {v} tab
+          </Tabs.Trigger>
+        ))}
+      </Tabs.List>
+    </Tabs.Root>
+  ),
+};
+
 export default meta;
diff --git a/packages/react/src/components/tabs/tabs.tsx b/packages/react/src/components/tabs/tabs.tsx
index 57af75c..8f14a41 100644
--- a/packages/react/src/components/tabs/tabs.tsx
+++ b/packages/react/src/components/tabs/tabs.tsx
@@ -1,93 +1,106 @@
-import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { Tabs } from '@base-ui/react/tabs';
+import * as React from 'react';
 
-import { cn } from '~/utils';
+import { addClassName, useComposedRefs } from '~/utils';
+
+interface TabsRootProps extends React.ComponentPropsWithRef<typeof Tabs.Root> {}
+
+interface TabsListProps extends React.ComponentPropsWithRef<typeof Tabs.List> {
+  /**
+   * UI3 "Overflow" behavior — horizontal scrolling with a right-edge
+   * gradient fade on the visible frame.
+   */
+  scrollable?: boolean;
+}
+
+interface TabsTriggerProps extends React.ComponentPropsWithRef<typeof Tabs.Tab> {}
+
+interface TabsContentProps extends React.ComponentPropsWithRef<typeof Tabs.Panel> {}
 
 /**
  * A set of layered sections of content—known as tab panels—that are displayed one at a time.
  *
- * - [Docs](https://www.radix-ui.com/docs/primitives/components/tabs)
- * - [API Reference](https://www.radix-ui.com/primitives/docs/components/tabs#api-reference)
+ * - [Docs](https://base-ui.com/react/components/tabs)
+ * - [API Reference](https://base-ui.com/react/components/tabs#api)
  */
-const TabsRoot: React.FC<React.ComponentPropsWithRef<typeof TabsPrimitive.Root>> = ({
-  className,
-  ref,
-  ...props
-}) => (
-  <TabsPrimitive.Root
-    className={cn('bg-figma', className)}
-    {...props}
-    ref={ref}
-  />
-);
+function TabsRoot({ className, ref, ...props }: TabsRootProps) {
+  return (
+    <Tabs.Root
+      className={addClassName(className, 'bg-figma')}
+      {...props}
+      ref={ref}
+    />
+  );
+}
 
-TabsRoot.displayName = TabsPrimitive.Root.displayName;
+TabsRoot.displayName = 'Tabs';
 
-const TabsList: React.FC<React.ComponentPropsWithRef<typeof TabsPrimitive.List>> = ({
-  className,
-  ref,
-  ...props
-}) => (
-  <TabsPrimitive.List
-    className={cn(
-      'bg-figma',
-      'inline-flex',
-      'items-center',
-      'justify-center',
-      'border-b',
-      'border-solid',
-      'border-figma',
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-);
+function TabsList({ className, scrollable, ref, ...props }: TabsListProps) {
+  return (
+    <Tabs.List
+      className={addClassName(
+        className,
+        'flex',
+        'gap-1',
+        scrollable
+          ? 'overflow-x-auto overflow-y-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [mask-image:linear-gradient(to_right,black_88%,transparent)]'
+          : 'overflow-y-auto',
+      )}
+      {...props}
+      ref={ref}
+    />
+  );
+}
 
-TabsList.displayName = TabsPrimitive.List.displayName;
+TabsList.displayName = 'TabsList';
 
-const TabsTrigger: React.FC<React.ComponentPropsWithRef<typeof TabsPrimitive.Trigger>> = ({
-  className,
-  ref,
-  ...props
-}) => (
-  <TabsPrimitive.Trigger
-    className={cn(
-      'inline-flex',
-      'items-center',
-      'justify-center',
-      'px-3',
-      'font-size-11',
-      'text-figma-secondary',
-      'bg-transparent',
-      'hover:text-figma',
-      'data-[state=active]:(text-figma font-bold)',
-      'disabled:pointer-events-none',
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-);
+function TabsTrigger({ className, ref, ...props }: TabsTriggerProps) {
+  // Freeze the measured width on mount so switching to the active (bolder)
+  // weight doesn't shift siblings.
+  const fixedWidthRef = React.useCallback((node: HTMLButtonElement | null) => {
+    if (node !== null) {
+      node.style.width = `${node.getBoundingClientRect().width}px`;
+    }
+  }, []);
+  return (
+    <Tabs.Tab
+      ref={useComposedRefs(ref, fixedWidthRef)}
+      className={addClassName(
+        className,
+        'flex',
+        'items-center',
+        'justify-center',
+        'shrink-0',
+        'h-6',
+        'px-2',
+        'text-figma-body-medium',
+        'font-figma-default',
+        'text-figma-secondary',
+        'fill-figma-icon-secondary',
+        'whitespace-nowrap',
+        'rounded-figma-md',
+        'not-data-disabled:hover:bg-figma-hover',
+        'not-data-disabled:focus-visible:outline-solid not-data-disabled:focus-visible:outline-1 not-data-disabled:focus-visible:outline-figma-border-selected',
+        'data-active:font-figma-strong data-active:text-figma data-active:fill-figma-icon data-active:bg-figma-secondary',
+        'data-disabled:text-figma-disabled',
+      )}
+      {...props}
+    />
+  );
+}
 
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+TabsTrigger.displayName = 'TabsTrigger';
 
-const TabsContent: React.FC<React.ComponentPropsWithRef<typeof TabsPrimitive.Content>> = ({
-  className,
-  ref,
-  ...props
-}) => (
-  <TabsPrimitive.Content
-    className={cn('bg-figma', className)}
-    {...props}
-    ref={ref}
-  />
-);
+function TabsContent({ className, ref, ...props }: TabsContentProps) {
+  return (
+    <Tabs.Panel
+      className={addClassName(className, 'bg-figma')}
+      {...props}
+      ref={ref}
+    />
+  );
+}
 
-TabsContent.displayName = TabsPrimitive.Content.displayName;
+TabsContent.displayName = 'TabsContent';
 
-export {
-  TabsRoot as Root,
-  TabsList as List,
-  TabsTrigger as Trigger,
-  TabsContent as Content,
-};
+export { TabsRoot as Root, TabsList as List, TabsTrigger as Trigger, TabsContent as Content };
diff --git a/packages/react/src/components/textarea/textarea.stories.tsx b/packages/react/src/components/textarea/textarea.stories.tsx
index b66fa50..27486be 100644
--- a/packages/react/src/components/textarea/textarea.stories.tsx
+++ b/packages/react/src/components/textarea/textarea.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Textarea } from './textarea';
 
@@ -10,13 +10,6 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {
-    variant: {
-      control: 'inline-radio',
-      options: ['default', 'border'],
-      table: {
-        defaultValue: { summary: 'border' },
-      },
-    },
     invalid: {
       table: {
         defaultValue: { summary: 'false' },
@@ -29,7 +22,6 @@ const meta = {
     },
   },
   args: {
-    variant: 'default',
     invalid: false,
     disabled: false,
     placeholder: 'Placeholder',
@@ -40,12 +32,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
-export const Border: Story = {
-  args: {
-    variant: 'border',
-  },
-};
-
 export const Disabled: Story = {
   args: {
     disabled: true,
diff --git a/packages/react/src/components/textarea/textarea.tsx b/packages/react/src/components/textarea/textarea.tsx
index d238ae1..f3cb9ce 100644
--- a/packages/react/src/components/textarea/textarea.tsx
+++ b/packages/react/src/components/textarea/textarea.tsx
@@ -1,19 +1,23 @@
 import { cn } from '~/utils';
 
-import { inputVariants, type InputVariantsProps } from '../input';
+import { inputVariants } from '../input';
 
 const textareaVariants = inputVariants;
 
-type TextareaVariantsProps = InputVariantsProps;
-
-interface TextareaProps extends React.ComponentPropsWithRef<'textarea'>, TextareaVariantsProps {
+// UI3 multi-line inputs only exist in the bordered style, so unlike Input there
+// is no variant prop.
+interface TextareaProps extends React.ComponentPropsWithRef<'textarea'> {
   invalid?: boolean;
   disabled?: boolean;
 }
 
-const Textarea: React.FC<TextareaProps> = ({ className, variant, invalid, disabled, children, ref, ...props }) => {
+function Textarea({ className, invalid, disabled, children, ref, ...props }: TextareaProps) {
   return (
-    <div className={cn('peer', 'relative')} data-disabled={disabled} data-invalid={invalid}>
+    <div
+      className={cn('peer', 'relative')}
+      data-disabled={disabled}
+      data-invalid={invalid}
+    >
       {children}
       <textarea
         ref={ref}
@@ -24,14 +28,20 @@ const Textarea: React.FC<TextareaProps> = ({ className, variant, invalid, disabl
           'px-2',
           'py-1',
           'resize-none',
-          textareaVariants({ variant, disabled, invalid, className }),
+          'break-words',
+          textareaVariants({
+            variant: 'border',
+            disabled,
+            invalid,
+            className: cn('bg-figma', className),
+          }),
         )}
         {...props}
         disabled={disabled}
       />
     </div>
   );
-};
+}
 
 Textarea.displayName = 'Textarea';
 
diff --git a/packages/react/src/components/toast/toast.stories.tsx b/packages/react/src/components/toast/toast.stories.tsx
index a25ce37..39ef0ce 100644
--- a/packages/react/src/components/toast/toast.stories.tsx
+++ b/packages/react/src/components/toast/toast.stories.tsx
@@ -1,11 +1,10 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Button } from '../button';
-
-import { Toaster } from './toaster';
 import { toast } from './toast';
+import { Toaster } from './toaster';
 
-const meta = {
+const meta: Meta = {
   title: 'Components/Toast',
   component: Toaster,
   parameters: {
@@ -16,14 +15,14 @@ const meta = {
   },
   tags: ['autodocs'],
   decorators: [
-    Story => (
+    (Story) => (
       <div className="min-h-60">
         <Story />
         <Toaster />
       </div>
     ),
   ],
-} satisfies Meta<typeof Toaster>;
+} satisfies Meta;
 
 type Story = StoryObj<typeof meta>;
 
@@ -32,16 +31,17 @@ export const Default: Story = {
     return (
       <div className="flex flex-wrap items-center gap-2">
         <Button
-          variant="outline"
+          variant="secondary"
           onClick={() =>
             toast('Event has been created', {
               duration: 1_000_000,
-            })}
+            })
+          }
         >
           Default
         </Button>
         <Button
-          variant="outline"
+          variant="secondary"
           onClick={() =>
             toast('Event has been created', {
               description: 'Monday, January 3rd at 6:00pm',
@@ -50,12 +50,13 @@ export const Default: Story = {
                 label: 'Undo',
                 onClick: () => console.log('Undo'),
               },
-            })}
+            })
+          }
         >
           Action
         </Button>
         <Button
-          variant="outline"
+          variant="secondary"
           onClick={() =>
             toast('Event has been created', {
               description: 'Monday, January 3rd at 6:00pm',
@@ -64,12 +65,32 @@ export const Default: Story = {
                 label: 'Cancel',
                 onClick: () => console.log('Cancel'),
               },
-            })}
+            })
+          }
         >
           Cancel
         </Button>
         <Button
-          variant="outline"
+          variant="secondary"
+          onClick={() =>
+            toast('Event has been created', {
+              description: 'Monday, January 3rd at 6:00pm',
+              duration: 1_000_000,
+              action: {
+                label: 'Action',
+                onClick: () => console.log('Action'),
+              },
+              cancel: {
+                label: 'Dismiss',
+                onClick: () => console.log('Dismiss'),
+              },
+            })
+          }
+        >
+          Action + Dismiss
+        </Button>
+        <Button
+          variant="secondary"
           onClick={() =>
             toast.success('Event has been created', {
               description: 'Monday, January 3rd at 6:00pm',
@@ -78,12 +99,13 @@ export const Default: Story = {
                 label: 'Cancel',
                 onClick: () => console.log('Cancel'),
               },
-            })}
+            })
+          }
         >
           Success
         </Button>
         <Button
-          variant="outline"
+          variant="secondary"
           onClick={() =>
             toast.info('Event has been created', {
               description: 'Monday, January 3rd at 6:00pm',
@@ -92,12 +114,13 @@ export const Default: Story = {
                 label: 'Cancel',
                 onClick: () => console.log('Cancel'),
               },
-            })}
+            })
+          }
         >
           Info
         </Button>
         <Button
-          variant="outline"
+          variant="secondary"
           onClick={() =>
             toast.warning('Event has been created', {
               description: 'Monday, January 3rd at 6:00pm',
@@ -106,12 +129,13 @@ export const Default: Story = {
                 label: 'Cancel',
                 onClick: () => console.log('Cancel'),
               },
-            })}
+            })
+          }
         >
           Warning
         </Button>
         <Button
-          variant="outline"
+          variant="secondary"
           onClick={() =>
             toast.error('Event has been created', {
               description: 'Monday, January 3rd at 6:00pm',
@@ -120,15 +144,16 @@ export const Default: Story = {
                 label: 'Cancel',
                 onClick: () => console.log('Cancel'),
               },
-            })}
+            })
+          }
         >
           Error
         </Button>
         <Button
-          variant="outline"
+          variant="secondary"
           onClick={() => {
             toast.promise(
-              new Promise<{ name: string }>(resolve =>
+              new Promise<{ name: string }>((resolve) =>
                 setTimeout(() => resolve({ name: 'Figma' }), 2000),
               ),
               {
@@ -136,7 +161,7 @@ export const Default: Story = {
                 description: () => {
                   return 'Monday, January 3rd at 6:00pm';
                 },
-                success: (data) => {
+                success: (data: { name: string }) => {
                   return `${data.name} toast has been added`;
                 },
                 error: 'Error',
@@ -147,7 +172,7 @@ export const Default: Story = {
           Promise
         </Button>
         <Button
-          variant="outline"
+          variant="secondary"
           onClick={() => {
             toast.loading('Loading toast...', {
               duration: 2000,
@@ -161,22 +186,6 @@ export const Default: Story = {
         >
           Loading
         </Button>
-        <Button
-          variant="outline"
-          onClick={() => {
-            toast('Event has been created', {
-              description: 'Monday, January 3rd at 6:00pm',
-              duration: 6000,
-              closeButton: true,
-              action: {
-                label: 'Undo',
-                onClick: () => console.log('Undo'),
-              },
-            });
-          }}
-        >
-          CloseButton
-        </Button>
       </div>
     );
   },
diff --git a/packages/react/src/components/toast/toaster.tsx b/packages/react/src/components/toast/toaster.tsx
index 31c41f8..5ad8aca 100644
--- a/packages/react/src/components/toast/toaster.tsx
+++ b/packages/react/src/components/toast/toaster.tsx
@@ -2,8 +2,6 @@ import { Toaster as SonnerToaster } from 'sonner';
 
 import { cn } from '~/utils';
 
-import { buttonVariants } from '../button/button-variants';
-
 type ToasterProps = React.ComponentProps<typeof SonnerToaster>;
 
 /**
@@ -11,32 +9,37 @@ type ToasterProps = React.ComponentProps<typeof SonnerToaster>;
  *
  * - [Docs](https://sonner.emilkowal.ski/)
  */
-const Toaster = ({ className, ...props }: ToasterProps) => {
+function Toaster({ className, ...props }: ToasterProps) {
   return (
     <SonnerToaster
-      className={cn('toaster', 'group', className)}
+      className={cn('toaster', className)}
       visibleToasts={2}
       gap={12}
       position="bottom-center"
       toastOptions={{
         unstyled: true,
         classNames: {
-          toast: 'group toast flex items-center gap-2 p-3 font-size-11 bg-figma text-figma shadow-lg flex items-center border-solid border border-figma rounded-1 w-[var(--width)]',
-          title: 'font-size-12',
-          description: 'font-size-11 text-figma-secondary group-data-[type=success]:text-figma-success-tertiary group-data-[type=info]:text-figma-brand-tertiary group-data-[type=warning]:text-figma-warning-tertiary group-data-[type=error]:text-figma-danger-tertiary dark:group-data-[type=warning]:text-figma-onwarning dark:group-data-[type=danger]:text-figma-ondanger',
-          success: 'bg-figma-success-tertiary text-figma-success border-figma-success',
-          info: 'bg-figma-brand-tertiary text-figma-brand border-figma-brand',
-          warning: 'bg-figma-warning-tertiary text-figma-warning border-figma-warning dark:(bg-figma-warning-secondary text-figma-onwarning border-figma-onwarning)',
-          error: 'bg-figma-danger-tertiary text-figma-danger border-figma-danger dark:(bg-figma-danger-secondary text-figma-ondanger border-figma-ondanger)',
-          actionButton: cn(buttonVariants({ color: 'secondary' }), 'h-7 ml-auto'),
-          cancelButton: cn(buttonVariants({ color: 'secondary' }), 'h-7 ml-auto'),
-          closeButton: 'text-figma cursor-default bg-figma-secondary hover:bg-figma-tertiary! active:bg-figma-tertiary! border border-solid border-figma right-0 left-unset translate-x-2/5 -translate-y-2/5 opacity-0 group-hover:opacity-100',
-          icon: '[&_.sonner-loading-bar]:bg-figma-text',
+          toast:
+            'group toast grid min-h-14 w-73 auto-rows-fr grid-cols-[auto_1fr_auto] items-stretch overflow-hidden rounded-figma-md bg-figma-menu text-figma-body-medium text-figma-menu shadow-figma-hud',
+          icon: 'relative col-start-1 row-start-1 flex w-8 items-center justify-start self-stretch pl-2 [&_svg]:size-6 [&_.sonner-loading-wrapper]:inset-0 [&_.sonner-loading-wrapper]:m-auto [&_.sonner-spinner]:top-0 [&_.sonner-spinner]:left-0 [&_.sonner-loading-bar]:bg-figma-tooltip group-has-[[data-action]]:group-has-[[data-cancel]]:row-end-3',
+          content:
+            'col-start-2 row-start-1 flex flex-col justify-center gap-0.5 self-stretch pl-2 pr-1 py-2.5 group-has-[[data-icon]]:pl-1 group-has-[[data-action]]:group-has-[[data-cancel]]:row-end-3',
+          title: 'text-figma-body-medium line-clamp-2',
+          description: 'text-figma-body-medium text-figma-menu',
+          success: '[&_[data-icon]]:text-figma-success',
+          info: '[&_[data-icon]]:text-figma-brand',
+          warning: '[&_[data-icon]]:text-figma-warning',
+          error: '[&_[data-icon]]:text-figma-danger',
+          actionButton:
+            'col-start-3 row-start-1 flex w-18 items-center justify-center self-stretch border-l border-figma-tooltip px-2 font-figma-strong text-figma-menu hover:bg-figma-tooltip-hover active:bg-figma-tooltip-pressed',
+          cancelButton:
+            'col-start-3 row-start-1 flex w-18 items-center justify-center self-stretch border-l border-figma-tooltip px-2 font-figma-strong text-figma-menu group-has-[[data-action]]:row-start-2 group-has-[[data-action]]:border-t hover:bg-figma-tooltip-hover active:bg-figma-tooltip-pressed',
+          closeButton: 'hidden',
         },
       }}
       {...props}
     />
   );
-};
+}
 
 export { Toaster };
diff --git a/packages/react/src/components/toggle-group/toggle-group.stories.tsx b/packages/react/src/components/toggle-group/toggle-group.stories.tsx
index 8cf9351..f918bf2 100644
--- a/packages/react/src/components/toggle-group/toggle-group.stories.tsx
+++ b/packages/react/src/components/toggle-group/toggle-group.stories.tsx
@@ -1,9 +1,15 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 
-import { Tooltip, TooltipProvider } from '../tooltip';
+import {
+  AlignHorizontalCenterIcon,
+  AlignLeftIcon,
+  AlignRightIcon,
+  TextAlignJustifiedIcon,
+} from '~/icons';
 
-import { ToggleGroup, ToggleGroupItem } from './toggle-group';
+import { Tooltip, TooltipProvider } from '../tooltip';
+import { ToggleGroup, ToggleGroupItem, ToggleGroupText } from './toggle-group';
 
 type StoryArgs = React.ComponentPropsWithRef<typeof ToggleGroup>;
 
@@ -20,50 +26,45 @@ const meta = {
         defaultValue: { summary: 'false' },
       },
     },
-    type: {
-      table: {
-        disable: true,
-      },
-    },
   },
   args: {
     disabled: false,
   },
-  render: (args) => {
+  render: function Render(args) {
     const [{ value }, updateArgs] = useArgs<{
-      value: string;
+      value: string[];
     }>();
     const options = [
       {
         value: 'horizontal',
         label: 'Horizontal layout',
-        icon: <span className="i-tabler-arrow-left"></span>,
+        icon: <span className="icon-[tabler--arrow-left]"></span>,
       },
       {
         value: 'vertical',
         label: 'Vertical layout',
-        icon: <span className="i-tabler-arrow-down"></span>,
+        icon: <span className="icon-[tabler--arrow-down]"></span>,
       },
       {
         value: 'wrap',
-        label: 'Wrap ',
-        icon: <span className="i-tabler-arrow-back"></span>,
+        label: 'Wrap',
+        icon: <span className="icon-[tabler--arrow-back]"></span>,
       },
     ];
     return (
       <ToggleGroup
         {...args}
-        type="single"
-        defaultValue="horizontal"
+        defaultValue={['horizontal']}
         value={value}
         onValueChange={(selected) => {
-          if (selected) {
-            updateArgs({ value: selected });
-          }
+          updateArgs({ value: selected });
         }}
       >
-        {options.map(option => (
-          <ToggleGroupItem key={option.value} value={option.value}>
+        {options.map((option) => (
+          <ToggleGroupItem
+            key={option.value}
+            value={option.value}
+          >
             {option.icon}
           </ToggleGroupItem>
         ))}
@@ -76,17 +77,16 @@ type Story = StoryObj<typeof meta>;
 
 export const Single: Story = {
   args: {
-    type: 'single',
-    value: 'horizontal',
+    value: ['horizontal'],
   },
 };
 
 export const Multiple: Story = {
   args: {
-    type: 'multiple',
+    multiple: true,
     value: [],
   },
-  render: (args) => {
+  render: function Render(args) {
     const [{ value }, updateArgs] = useArgs<{
       value: string[];
     }>();
@@ -94,31 +94,34 @@ export const Multiple: Story = {
       {
         value: 'bold',
         label: 'Bold',
-        icon: <span className="i-tabler-bold"></span>,
+        icon: <span className="icon-[tabler--bold]"></span>,
       },
       {
         value: 'italic',
         label: 'Italic',
-        icon: <span className="i-tabler-italic"></span>,
+        icon: <span className="icon-[tabler--italic]"></span>,
       },
       {
         value: 'underline',
-        label: 'Underline ',
-        icon: <span className="i-tabler-underline"></span>,
+        label: 'Underline',
+        icon: <span className="icon-[tabler--underline]"></span>,
       },
     ];
     return (
       <ToggleGroup
         {...args}
-        type="multiple"
+        multiple
         defaultValue={[]}
         value={value}
         onValueChange={(selected) => {
           updateArgs({ value: selected });
         }}
       >
-        {options.map(option => (
-          <ToggleGroupItem key={option.value} value={option.value}>
+        {options.map((option) => (
+          <ToggleGroupItem
+            key={option.value}
+            value={option.value}
+          >
             {option.icon}
           </ToggleGroupItem>
         ))}
@@ -129,10 +132,10 @@ export const Multiple: Story = {
 
 export const WithTooltip: Story = {
   args: {
-    type: 'multiple',
+    multiple: true,
     value: [],
   },
-  render: (args) => {
+  render: function Render(args) {
     const [{ value }, updateArgs] = useArgs<{
       value: string[];
     }>();
@@ -140,36 +143,37 @@ export const WithTooltip: Story = {
       {
         value: 'bold',
         label: 'Bold',
-        icon: <span className="i-tabler-bold"></span>,
+        icon: <span className="icon-[tabler--bold]"></span>,
       },
       {
         value: 'italic',
         label: 'Italic',
-        icon: <span className="i-tabler-italic"></span>,
+        icon: <span className="icon-[tabler--italic]"></span>,
       },
       {
         value: 'underline',
-        label: 'Underline ',
-        icon: <span className="i-tabler-underline"></span>,
+        label: 'Underline',
+        icon: <span className="icon-[tabler--underline]"></span>,
       },
     ];
     return (
-      <TooltipProvider delayDuration={200}>
+      <TooltipProvider delay={200}>
         <ToggleGroup
           {...args}
-          type="multiple"
+          multiple
           defaultValue={[]}
           value={value}
           onValueChange={(selected) => {
             updateArgs({ value: selected });
           }}
         >
-          {options.map(option => (
-            <Tooltip key={option.value} content={option.label}>
+          {options.map((option) => (
+            <Tooltip
+              key={option.value}
+              content={option.label}
+            >
               <div className="inline-flex items-center justify-center">
-                <ToggleGroupItem value={option.value}>
-                  {option.icon}
-                </ToggleGroupItem>
+                <ToggleGroupItem value={option.value}>{option.icon}</ToggleGroupItem>
               </div>
             </Tooltip>
           ))}
@@ -181,10 +185,62 @@ export const WithTooltip: Story = {
 
 export const Disabled: Story = {
   args: {
-    type: 'single',
-    value: 'vertical',
+    value: ['vertical'],
     disabled: true,
   },
 };
 
+const alignOptions = [
+  { value: 'left', label: 'Align left', icon: <AlignLeftIcon size="4" /> },
+  { value: 'center', label: 'Align center', icon: <AlignHorizontalCenterIcon size="4" /> },
+  { value: 'right', label: 'Align right', icon: <AlignRightIcon size="4" /> },
+  { value: 'justify', label: 'Align justify', icon: <TextAlignJustifiedIcon size="4" /> },
+];
+
+export const FullWidth: Story = {
+  render: function Render() {
+    return (
+      <ToggleGroup
+        fullWidth
+        defaultValue={['left']}
+      >
+        {alignOptions.map((option) => (
+          <ToggleGroupItem
+            key={option.value}
+            value={option.value}
+            aria-label={option.label}
+          >
+            {option.icon}
+          </ToggleGroupItem>
+        ))}
+      </ToggleGroup>
+    );
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 240 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const Text: Story = {
+  render: function Render() {
+    return (
+      <ToggleGroup defaultValue={['minimalist']}>
+        <ToggleGroupItem value="minimalist">
+          <ToggleGroupText>Minimalist</ToggleGroupText>
+        </ToggleGroupItem>
+        <ToggleGroupItem value="modern">
+          <ToggleGroupText>Modern</ToggleGroupText>
+        </ToggleGroupItem>
+        <ToggleGroupItem value="retro">
+          <ToggleGroupText>Retro</ToggleGroupText>
+        </ToggleGroupItem>
+      </ToggleGroup>
+    );
+  },
+};
+
 export default meta;
diff --git a/packages/react/src/components/toggle-group/toggle-group.tsx b/packages/react/src/components/toggle-group/toggle-group.tsx
index ad69183..13b8bf1 100644
--- a/packages/react/src/components/toggle-group/toggle-group.tsx
+++ b/packages/react/src/components/toggle-group/toggle-group.tsx
@@ -1,75 +1,109 @@
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { Toggle as BaseToggle } from '@base-ui/react/toggle';
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
 
-import { cn } from '~/utils';
+import { addClassName } from '~/utils';
+
+interface ToggleGroupProps extends React.ComponentPropsWithRef<typeof BaseToggleGroup> {
+  /**
+   * Stretches the control to fill the available width.
+   */
+  fullWidth?: boolean | undefined;
+}
+
+interface ToggleGroupItemProps extends React.ComponentPropsWithRef<typeof BaseToggle> {}
 
 /**
  * A set of two-state buttons that can be toggled on or off.
  *
- * - [Docs](https://www.radix-ui.com/docs/primitives/components/toggle-group)
- * - [API Reference](https://www.radix-ui.com/primitives/docs/components/toggle-group#api-reference)
+ * - [Docs](https://base-ui.com/react/components/toggle-group)
+ * - [API Reference](https://base-ui.com/react/components/toggle-group#api)
  */
-const ToggleGroup: React.FC<React.ComponentPropsWithRef<typeof ToggleGroupPrimitive.Root>> = ({
+function ToggleGroup({
   className,
   children,
   disabled,
+  fullWidth,
   ref,
   ...props
-}) => (
-  <ToggleGroupPrimitive.Root
-    ref={ref}
-    className={cn(
-      'group',
-      'flex',
-      'items-center',
-      'justify-center',
-      'bg-figma',
-      'border',
-      'border-solid',
-      'border-transparent',
-      'rounded-0.5',
-      disabled ? 'cursor-not-allowed' : 'hover:border-figma',
-      className,
-    )}
-    {...props}
-    disabled={disabled}
-  >
-    {children}
-  </ToggleGroupPrimitive.Root>
-);
+}: ToggleGroupProps) {
+  return (
+    <BaseToggleGroup
+      ref={ref}
+      className={addClassName(
+        className,
+        'group',
+        fullWidth ? 'flex' : 'inline-flex',
+        'bg-figma-secondary',
+        'rounded-figma-md',
+      )}
+      {...props}
+      data-full-width={fullWidth || undefined}
+      disabled={disabled}
+    >
+      {children}
+    </BaseToggleGroup>
+  );
+}
 
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+ToggleGroup.displayName = 'ToggleGroup';
 
-const ToggleGroupItem: React.FC<React.ComponentPropsWithRef<typeof ToggleGroupPrimitive.Item>> = ({
-  className,
-  children,
-  ref,
-  ...props
-}) => (
-  <ToggleGroupPrimitive.Item
-    ref={ref}
-    className={cn(
-      'size-6',
-      'font-size-11',
-      'flex',
-      'justify-center',
-      'items-center',
-      'cursor-default',
-      'appearance-none',
-      'text-figma',
-      'fill-figma-icon',
-      'bg-transparent',
-      'transition-colors',
-      'data-[state=on]:bg-figma-tertiary',
-      'disabled:(pointer-events-none cursor-not-allowed text-figma-disabled fill-figma-icon-disabled)',
-      'disabled:data-[state=on]:(bg-figma-disabled text-figma-ondisabled fill-figma-icon-ondisabled)',
-      className,
-    )}
-    {...props}
-  >
-    {children}
-  </ToggleGroupPrimitive.Item>
-);
+function ToggleGroupItem({ className, children, ref, ...props }: ToggleGroupItemProps) {
+  return (
+    <BaseToggle
+      ref={ref}
+      className={addClassName(
+        className,
+        'h-6',
+        'min-w-6',
+        'w-fit',
+        'flex-[1_0_auto]',
+        'group-data-[full-width]:min-w-0 group-data-[full-width]:flex-1',
+        'text-figma-body-medium',
+        'font-figma-default',
+        'flex',
+        'justify-center',
+        'items-center',
+        'whitespace-nowrap',
+        'cursor-default',
+        'appearance-none',
+        'text-figma-secondary',
+        'fill-figma-icon-secondary',
+        'bg-transparent',
+        'rounded-figma-md',
+        'transition-colors',
+        'focus-visible:outline-solid focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-figma-border-selected',
+        'data-pressed:bg-figma data-pressed:text-figma data-pressed:fill-figma-icon data-pressed:shadow-[inset_0_0_0_1px_var(--figma-color-border)]',
+        'disabled:text-figma-tertiary disabled:fill-figma-icon-disabled',
+      )}
+      {...props}
+    >
+      {children}
+    </BaseToggle>
+  );
+}
+
+ToggleGroupItem.displayName = 'ToggleGroupItem';
+
+function ToggleGroupText({ className, ref, ...props }: React.ComponentPropsWithRef<'span'>) {
+  return (
+    <span
+      ref={ref}
+      className={addClassName(
+        className,
+        'flex',
+        'items-center',
+        'p-2',
+        'gap-1.5',
+        'min-w-0',
+        'truncate',
+        'group-data-disabled:text-figma-tertiary',
+      )}
+      {...props}
+    />
+  );
+}
 
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+ToggleGroupText.displayName = 'ToggleGroupText';
 
-export { ToggleGroup, ToggleGroupItem };
+export { ToggleGroup, ToggleGroupItem, ToggleGroupText };
+export type { ToggleGroupProps, ToggleGroupItemProps };
diff --git a/packages/react/src/components/toggle/toggle.stories.tsx b/packages/react/src/components/toggle/toggle.stories.tsx
index 9fea8a9..df93119 100644
--- a/packages/react/src/components/toggle/toggle.stories.tsx
+++ b/packages/react/src/components/toggle/toggle.stories.tsx
@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 
 import { Toggle } from './toggle';
 
@@ -11,6 +11,13 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {
+    variant: {
+      control: 'inline-radio',
+      options: ['default', 'highlighted', 'secondary'],
+      table: {
+        defaultValue: { summary: 'highlighted' },
+      },
+    },
     disabled: {
       table: {
         defaultValue: { summary: 'false' },
@@ -21,15 +28,15 @@ const meta = {
     disabled: false,
     pressed: false,
   },
-  render: (args) => {
+  render: function Render(args) {
     const [{ pressed }, updateArgs] = useArgs();
     return (
       <Toggle
         {...args}
         pressed={pressed}
-        onPressedChange={value => updateArgs({ pressed: value })}
+        onPressedChange={(value) => updateArgs({ pressed: value })}
       >
-        <span className="i-tabler-dots size-4"></span>
+        <span className="icon-[tabler--dots] size-4"></span>
       </Toggle>
     );
   },
@@ -51,4 +58,24 @@ export const Disabled: Story = {
   },
 };
 
+export const IconSwap: Story = {
+  args: {
+    variant: 'default',
+    pressed: true,
+  },
+};
+
+export const WithStroke: Story = {
+  args: {
+    variant: 'secondary',
+  },
+};
+
+export const WithStrokePressed: Story = {
+  args: {
+    variant: 'secondary',
+    pressed: true,
+  },
+};
+
 export default meta;
diff --git a/packages/react/src/components/toggle/toggle.tsx b/packages/react/src/components/toggle/toggle.tsx
index 8d1e61f..fc5ebc0 100644
--- a/packages/react/src/components/toggle/toggle.tsx
+++ b/packages/react/src/components/toggle/toggle.tsx
@@ -1,64 +1,82 @@
-import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { Toggle as BaseToggle } from '@base-ui/react/toggle';
 
-import { cn } from '~/utils';
+import { addClassName } from '~/utils';
+
+interface ToggleProps extends React.ComponentPropsWithRef<typeof BaseToggle> {
+  /**
+   * `default` shows no fill when pressed (the spec's icon-swap toggle);
+   * `highlighted` fills the pressed state with `bg-selected`;
+   * `secondary` draws the persistent translucent stroke from the
+   * "Dialog Toggle w/ Stroke" spec.
+   *
+   * @default 'highlighted'
+   */
+  variant?: 'default' | 'highlighted' | 'secondary';
+}
 
 /**
  * A two-state button that can be either on or off.
  *
- * - [Docs](https://www.radix-ui.com/docs/primitives/components/toggle)
- * - [API Reference](https://www.radix-ui.com/primitives/docs/components/toggle#api-reference)
+ * - [Docs](https://base-ui.com/react/components/toggle)
+ * - [API Reference](https://base-ui.com/react/components/toggle#api)
  */
-const Toggle: React.FC<React.ComponentPropsWithRef<typeof TogglePrimitive.Root>> = ({
-  className,
-  disabled,
-  ref,
-  ...props
-}) => (
-  <TogglePrimitive.Root
-    ref={ref}
-    className={cn(
-      'size-8',
-      'font-size-11',
-      'text-figma',
-      'inline-flex',
-      'items-center',
-      'justify-center',
-      'shrink-0',
-      'rounded-0.5',
-      'font-medium',
-      'cursor-default',
-      'appearance-none',
-      'text-figma-icon',
-      'fill-figma-icon',
-      'bg-transparent',
-      'bg-clip-border',
-      'outline-solid',
-      'outline-1',
-      '-outline-offset-1',
-      'outline-transparent',
-      'transition-colors',
-      'focus:not-focus-visible:(outline-0 outline-transparent)',
-      disabled
-        ? [
-            'cursor-not-allowed',
-            'pointer-events-none',
-            'text-figma-disabled',
-            'fill-figma-icon-disabled',
-            'data-[state=on]:bg-figma-disabled',
-          ]
-        : [
-            'hover:(bg-figma-hover text-figma-icon-hover fill-figma-icon-hover)',
-            'focus-visible:(outline-2 -outline-offset-2 outline-figma-border-brand-strong)',
-            'data-[state=on]:(bg-figma-brand text-figma-icon-onbrand fill-figma-icon-onbrand)',
-            'data-[state=on]:hover:(bg-figma-brand text-figma-icon-onbrand fill-figma-icon-onbrand)',
-          ],
-      className,
-    )}
-    {...props}
-    disabled={disabled}
-  />
-);
+function Toggle({ className, disabled, variant = 'highlighted', ref, ...props }: ToggleProps) {
+  return (
+    <BaseToggle
+      ref={ref}
+      className={addClassName(
+        className,
+        'size-6',
+        'icon-figma',
+        'inline-flex',
+        'items-center',
+        'justify-center',
+        'shrink-0',
+        'rounded-figma-md',
+        'cursor-default',
+        'appearance-none',
+        'text-figma-icon',
+        'fill-figma-icon',
+        'bg-transparent',
+        'bg-clip-border',
+        'outline-solid',
+        'outline-1',
+        '-outline-offset-1',
+        'outline-transparent',
+        'transition-colors',
+        'focus:not-focus-visible:outline-0 focus:not-focus-visible:outline-transparent',
+        variant === 'secondary' && 'border border-solid border-figma-bordertranslucent',
+        disabled
+          ? [
+              'cursor-not-allowed',
+              'pointer-events-none',
+              'text-figma-disabled',
+              'fill-figma-icon-disabled',
+              'icon-figma-disabled',
+              'data-pressed:bg-figma-disabled data-pressed:icon-figma-disabled',
+            ]
+          : [
+              'hover:bg-figma-bghovertransparent',
+              'hover:text-figma-icon-hover hover:fill-figma-icon-hover',
+              variant === 'default'
+                ? 'active:bg-figma-bgtransparent-secondary-hover'
+                : 'not-data-pressed:active:bg-figma-bgtransparent-secondary-hover',
+              'focus-visible:outline-figma-border-selected',
+              variant !== 'default' && [
+                'data-pressed:bg-figma-selected',
+                'data-pressed:hover:bg-figma-selected-secondary',
+                'data-pressed:active:bg-figma-selected',
+                variant === 'secondary' && 'data-pressed:border-transparent',
+              ],
+            ],
+      )}
+      {...props}
+      disabled={disabled}
+    />
+  );
+}
 
-Toggle.displayName = TogglePrimitive.Root.displayName;
+Toggle.displayName = 'Toggle';
 
 export { Toggle };
+export type { ToggleProps };
diff --git a/packages/react/src/components/tooltip/tooltip.stories.tsx b/packages/react/src/components/tooltip/tooltip.stories.tsx
index c14a8e8..d88010a 100644
--- a/packages/react/src/components/tooltip/tooltip.stories.tsx
+++ b/packages/react/src/components/tooltip/tooltip.stories.tsx
@@ -1,8 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 
 import { ActionIcon } from '../action-icon';
-
 import { Tooltip, TooltipProvider } from './tooltip';
 
 const meta = {
@@ -34,7 +33,10 @@ const meta = {
         type: 'number',
       },
       table: {
-        type: { summary: 'number', detail: 'An offset in pixels from the "start" or "end" alignment options.' },
+        type: {
+          summary: 'number',
+          detail: 'An offset in pixels from the "start" or "end" alignment options.',
+        },
       },
     },
     side: {
@@ -59,15 +61,6 @@ const meta = {
         type: { summary: 'number', detail: 'The distance in pixels from the trigger.' },
       },
     },
-    avoidCollisions: {
-      table: {
-        type: {
-          summary: 'boolean',
-          detail: 'When true, overrides the side andalign preferences to prevent collisions with boundary edges.',
-        },
-        defaultValue: { summary: 'true' },
-      },
-    },
     withArrow: {
       table: {
         type: {
@@ -92,8 +85,6 @@ const meta = {
     align: 'center',
     alignOffset: 0,
     side: 'top',
-    sideOffset: 4,
-    avoidCollisions: true,
     withArrow: true,
   },
 } satisfies Meta<typeof Tooltip>;
@@ -104,11 +95,11 @@ export const Default: Story = {
   args: {
     content: 'Open settings',
   },
-  render: (args) => {
+  render: function Render(args) {
     const [{ open }, updateArgs] = useArgs();
 
     return (
-      <TooltipProvider delayDuration={200}>
+      <TooltipProvider delay={200}>
         <Tooltip
           {...args}
           open={open}
@@ -116,8 +107,8 @@ export const Default: Story = {
             updateArgs({ open: value });
           }}
         >
-          <ActionIcon>
-            <span className="i-tabler-adjustments-alt size-4"></span>
+          <ActionIcon aria-label="Adjust">
+            <span className="icon-[tabler--adjustments-alt] size-4"></span>
           </ActionIcon>
         </Tooltip>
       </TooltipProvider>
@@ -125,4 +116,13 @@ export const Default: Story = {
   },
 };
 
+export const WithHotkey: Story = {
+  args: {
+    content: 'Paste',
+    hotkey: '⌘V',
+    open: true,
+  },
+  render: Default.render,
+};
+
 export default meta;
diff --git a/packages/react/src/components/tooltip/tooltip.tsx b/packages/react/src/components/tooltip/tooltip.tsx
index 249e68d..c7668bd 100644
--- a/packages/react/src/components/tooltip/tooltip.tsx
+++ b/packages/react/src/components/tooltip/tooltip.tsx
@@ -1,6 +1,6 @@
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
 
-import { cn } from '~/utils';
+import { addClassName } from '~/utils';
 
 const TooltipProvider = TooltipPrimitive.Provider;
 
@@ -8,118 +8,179 @@ const TooltipRoot = TooltipPrimitive.Root;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
-const TooltipArrow: React.FC<React.ComponentPropsWithRef<typeof TooltipPrimitive.Arrow>> = ({
-  className,
-  ref,
-  ...props
-}) => (
-  <TooltipPrimitive.Arrow
-    className={cn('fill-figma-bg-tooltip', className)}
-    ref={ref}
-    {...props}
-  />
-);
+interface TooltipArrowProps extends React.ComponentPropsWithRef<typeof TooltipPrimitive.Arrow> {}
+
+function TooltipArrow({ className, ref, ...props }: TooltipArrowProps) {
+  return (
+    <TooltipPrimitive.Arrow
+      className={addClassName(
+        className,
+        'fill-figma-bg-tooltip',
+        'data-[side=bottom]:-top-1.5 data-[side=bottom]:rotate-180',
+        'data-[side=top]:-bottom-1.5',
+        'data-[side=left]:right-[-9px] data-[side=left]:-rotate-90',
+        'data-[side=right]:left-[-9px] data-[side=right]:rotate-90',
+      )}
+      ref={ref}
+      render={
+        <svg
+          width={12}
+          height={6}
+          viewBox="0 0 12 6"
+          preserveAspectRatio="none"
+        >
+          <polygon points="0,0 12,0 6,6" />
+        </svg>
+      }
+      {...props}
+    />
+  );
+}
+
+TooltipArrow.displayName = 'TooltipArrow';
 
-TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
+type PositionerProps = React.ComponentPropsWithRef<typeof TooltipPrimitive.Positioner>;
 
-interface TooltipContentProps
-  extends TooltipPrimitive.TooltipPortalProps,
-  React.ComponentPropsWithRef<typeof TooltipPrimitive.Content> {}
+interface TooltipContentProps extends React.ComponentPropsWithRef<typeof TooltipPrimitive.Popup> {
+  container?: React.ComponentProps<typeof TooltipPrimitive.Portal>['container'];
+  side?: PositionerProps['side'];
+  align?: PositionerProps['align'];
+  sideOffset?: PositionerProps['sideOffset'];
+  alignOffset?: PositionerProps['alignOffset'];
+  collisionPadding?: PositionerProps['collisionPadding'];
+}
 
-const TooltipContent: React.FC<TooltipContentProps> = ({
+function TooltipContent({
   className,
   container,
+  side,
+  align,
   sideOffset = 4,
+  alignOffset,
+  collisionPadding,
   ref,
   ...props
-}) => (
-  <TooltipPrimitive.Portal container={container}>
-    <TooltipPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        'bg-figma-tooltip',
-        'text-figma-tooltip',
-        'fill-figma-icon-tooltip',
-        'px-3',
-        'rounded-0.5',
-        'py-2',
-        'z-50',
-        className,
-      )}
-      {...props}
-    />
-  </TooltipPrimitive.Portal>
-);
+}: TooltipContentProps) {
+  return (
+    <TooltipPrimitive.Portal container={container}>
+      <TooltipPrimitive.Positioner
+        className="z-50"
+        side={side}
+        align={align}
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
+        collisionPadding={collisionPadding}
+      >
+        <TooltipPrimitive.Popup
+          ref={ref}
+          className={addClassName(
+            className,
+            'bg-figma-tooltip',
+            'text-figma-tooltip',
+            'fill-figma-icon-tooltip',
+            'font-figma-default',
+            'text-figma-body-medium',
+            'max-w-50',
+            'px-2',
+            'py-1',
+            'min-h-6',
+            'whitespace-pre-wrap',
+            'break-words',
+            'rounded-figma-md',
+            'shadow-figma-tooltip',
+            'origin-(--transform-origin) transition-[opacity,scale] duration-100 data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95 motion-reduce:transition-none',
+          )}
+          {...props}
+        />
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  );
+}
 
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+TooltipContent.displayName = 'TooltipContent';
 
 interface TooltipProps
-  extends TooltipPrimitive.TooltipProps,
-  Omit<TooltipContentProps, 'content'> {
+  extends
+    Omit<React.ComponentPropsWithRef<typeof TooltipRoot>, 'children'>,
+    Pick<React.ComponentPropsWithRef<typeof TooltipTrigger>, 'delay' | 'closeDelay'>,
+    Omit<TooltipContentProps, 'children' | 'content'> {
   /**
    * The content of the tooltip
    */
   content: React.ReactNode;
+  /**
+   * Optional hotkey hint rendered dimmed after the content (UI3 "⌘V").
+   */
+  hotkey?: React.ReactNode;
   /**
    * The container of the tooltip
    */
-  container?: TooltipPrimitive.TooltipPortalProps['container'];
+  container?: React.ComponentProps<typeof TooltipPrimitive.Portal>['container'];
   /**
    * Whether the tooltip should have an arrow
    *
    * @default true
    */
   withArrow?: boolean;
+  /**
+   * The trigger element.
+   */
+  children?: React.ReactElement;
 }
 
 /**
- * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
- * - [Docs](https://www.radix-ui.com/primitives/docs/components/tooltip)
- * - [API Reference](https://www.radix-ui.com/primitives/docs/components/tooltip#api-reference)
+ * A popup that displays information related to an element when the element receives keyboard focus
+ * or the mouse hovers over it.
+ *
+ * - [Docs](https://base-ui.com/react/components/tooltip)
+ * - [API Reference](https://base-ui.com/react/components/tooltip#api)
  */
-const Tooltip = ({
+function Tooltip({
   // Root props,
   open,
   defaultOpen,
   onOpenChange,
-  delayDuration,
-  disableHoverableContent,
+  disableHoverablePopup,
   // Tooltip Trigger
+  delay,
+  closeDelay,
   children,
   // Tooltip Content
   content,
+  hotkey,
   withArrow = true,
+  sideOffset = withArrow ? 9 : 4,
   // Tooltip Content props
   ...props
-}: TooltipProps) => (
-  <TooltipRoot
-    open={open}
-    defaultOpen={defaultOpen}
-    onOpenChange={onOpenChange}
-    delayDuration={delayDuration}
-    disableHoverableContent={disableHoverableContent}
-  >
-    <TooltipTrigger asChild>{children}</TooltipTrigger>
-    <TooltipContent
-      {...props}
-      asChild={false}
+}: TooltipProps) {
+  return (
+    <TooltipRoot
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+      disableHoverablePopup={disableHoverablePopup}
     >
-      {content}
-      {withArrow ? <TooltipArrow /> : null}
-    </TooltipContent>
-  </TooltipRoot>
-);
+      {children ? (
+        <TooltipTrigger
+          render={children as React.ReactElement}
+          delay={delay}
+          closeDelay={closeDelay}
+        />
+      ) : null}
+      <TooltipContent
+        sideOffset={sideOffset}
+        {...props}
+      >
+        {content}
+        {hotkey ? <span className="text-figma-tooltip-secondary ml-1">{hotkey}</span> : null}
+        {withArrow ? <TooltipArrow /> : null}
+      </TooltipContent>
+    </TooltipRoot>
+  );
+}
 
 Tooltip.displayName = 'Tooltip';
 
-export {
-  Tooltip,
-  TooltipProvider,
-  TooltipRoot,
-  TooltipTrigger,
-  TooltipContent,
-  TooltipArrow,
-};
+export { Tooltip, TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent, TooltipArrow };
 
 export type { TooltipProps };
diff --git a/packages/react/src/components/value-field/index.ts b/packages/react/src/components/value-field/index.ts
new file mode 100644
index 0000000..e9b9586
--- /dev/null
+++ b/packages/react/src/components/value-field/index.ts
@@ -0,0 +1 @@
+export * as ValueField from './value-field';
diff --git a/packages/react/src/components/value-field/named-colors.ts b/packages/react/src/components/value-field/named-colors.ts
new file mode 100644
index 0000000..2b9b18a
--- /dev/null
+++ b/packages/react/src/components/value-field/named-colors.ts
@@ -0,0 +1,153 @@
+import type { RGB } from './types';
+
+const namedColors: Record<string, RGB> = {
+  aliceblue: { r: 240, g: 248, b: 255 },
+  antiquewhite: { r: 250, g: 235, b: 215 },
+  aqua: { r: 0, g: 255, b: 255 },
+  aquamarine: { r: 127, g: 255, b: 212 },
+  azure: { r: 240, g: 255, b: 255 },
+  beige: { r: 245, g: 245, b: 220 },
+  bisque: { r: 255, g: 228, b: 196 },
+  black: { r: 0, g: 0, b: 0 },
+  blanchedalmond: { r: 255, g: 235, b: 205 },
+  blue: { r: 0, g: 0, b: 255 },
+  blueviolet: { r: 138, g: 43, b: 226 },
+  brown: { r: 165, g: 42, b: 42 },
+  burlywood: { r: 222, g: 184, b: 135 },
+  cadetblue: { r: 95, g: 158, b: 160 },
+  chartreuse: { r: 127, g: 255, b: 0 },
+  chocolate: { r: 210, g: 105, b: 30 },
+  coral: { r: 255, g: 127, b: 80 },
+  cornflowerblue: { r: 100, g: 149, b: 237 },
+  cornsilk: { r: 255, g: 248, b: 220 },
+  crimson: { r: 220, g: 20, b: 60 },
+  cyan: { r: 0, g: 255, b: 255 },
+  darkblue: { r: 0, g: 0, b: 139 },
+  darkcyan: { r: 0, g: 139, b: 139 },
+  darkgoldenrod: { r: 184, g: 134, b: 11 },
+  darkgray: { r: 169, g: 169, b: 169 },
+  darkgreen: { r: 0, g: 100, b: 0 },
+  darkgrey: { r: 169, g: 169, b: 169 },
+  darkkhaki: { r: 189, g: 183, b: 107 },
+  darkmagenta: { r: 139, g: 0, b: 139 },
+  darkolivegreen: { r: 85, g: 107, b: 47 },
+  darkorange: { r: 255, g: 140, b: 0 },
+  darkorchid: { r: 153, g: 50, b: 204 },
+  darkred: { r: 139, g: 0, b: 0 },
+  darksalmon: { r: 233, g: 150, b: 122 },
+  darkseagreen: { r: 143, g: 188, b: 143 },
+  darkslateblue: { r: 72, g: 61, b: 139 },
+  darkslategray: { r: 47, g: 79, b: 79 },
+  darkslategrey: { r: 47, g: 79, b: 79 },
+  darkturquoise: { r: 0, g: 206, b: 209 },
+  darkviolet: { r: 148, g: 0, b: 211 },
+  deeppink: { r: 255, g: 20, b: 147 },
+  deepskyblue: { r: 0, g: 191, b: 255 },
+  dimgray: { r: 105, g: 105, b: 105 },
+  dimgrey: { r: 105, g: 105, b: 105 },
+  dodgerblue: { r: 30, g: 144, b: 255 },
+  firebrick: { r: 178, g: 34, b: 34 },
+  floralwhite: { r: 255, g: 250, b: 240 },
+  forestgreen: { r: 34, g: 139, b: 34 },
+  fuchsia: { r: 255, g: 0, b: 255 },
+  gainsboro: { r: 220, g: 220, b: 220 },
+  ghostwhite: { r: 248, g: 248, b: 255 },
+  gold: { r: 255, g: 215, b: 0 },
+  goldenrod: { r: 218, g: 165, b: 32 },
+  gray: { r: 128, g: 128, b: 128 },
+  green: { r: 0, g: 128, b: 0 },
+  greenyellow: { r: 173, g: 255, b: 47 },
+  grey: { r: 128, g: 128, b: 128 },
+  honeydew: { r: 240, g: 255, b: 240 },
+  hotpink: { r: 255, g: 105, b: 180 },
+  indianred: { r: 205, g: 92, b: 92 },
+  indigo: { r: 75, g: 0, b: 130 },
+  ivory: { r: 255, g: 255, b: 240 },
+  khaki: { r: 240, g: 230, b: 140 },
+  lavender: { r: 230, g: 230, b: 250 },
+  lavenderblush: { r: 255, g: 240, b: 245 },
+  lawngreen: { r: 124, g: 252, b: 0 },
+  lemonchiffon: { r: 255, g: 250, b: 205 },
+  lightblue: { r: 173, g: 216, b: 230 },
+  lightcoral: { r: 240, g: 128, b: 128 },
+  lightcyan: { r: 224, g: 255, b: 255 },
+  lightgoldenrodyellow: { r: 250, g: 250, b: 210 },
+  lightgray: { r: 211, g: 211, b: 211 },
+  lightgreen: { r: 144, g: 238, b: 144 },
+  lightgrey: { r: 211, g: 211, b: 211 },
+  lightpink: { r: 255, g: 182, b: 193 },
+  lightsalmon: { r: 255, g: 160, b: 122 },
+  lightseagreen: { r: 32, g: 178, b: 170 },
+  lightskyblue: { r: 135, g: 206, b: 250 },
+  lightslategray: { r: 119, g: 136, b: 153 },
+  lightslategrey: { r: 119, g: 136, b: 153 },
+  lightsteelblue: { r: 176, g: 196, b: 222 },
+  lightyellow: { r: 255, g: 255, b: 224 },
+  lime: { r: 0, g: 255, b: 0 },
+  limegreen: { r: 50, g: 205, b: 50 },
+  linen: { r: 250, g: 240, b: 230 },
+  magenta: { r: 255, g: 0, b: 255 },
+  maroon: { r: 128, g: 0, b: 0 },
+  mediumaquamarine: { r: 102, g: 205, b: 170 },
+  mediumblue: { r: 0, g: 0, b: 205 },
+  mediumorchid: { r: 186, g: 85, b: 211 },
+  mediumpurple: { r: 147, g: 112, b: 219 },
+  mediumseagreen: { r: 60, g: 179, b: 113 },
+  mediumslateblue: { r: 123, g: 104, b: 238 },
+  mediumspringgreen: { r: 0, g: 250, b: 154 },
+  mediumturquoise: { r: 72, g: 209, b: 204 },
+  mediumvioletred: { r: 199, g: 21, b: 133 },
+  midnightblue: { r: 25, g: 25, b: 112 },
+  mintcream: { r: 245, g: 255, b: 250 },
+  mistyrose: { r: 255, g: 228, b: 225 },
+  moccasin: { r: 255, g: 228, b: 181 },
+  navajowhite: { r: 255, g: 222, b: 173 },
+  navy: { r: 0, g: 0, b: 128 },
+  oldlace: { r: 253, g: 245, b: 230 },
+  olive: { r: 128, g: 128, b: 0 },
+  olivedrab: { r: 107, g: 142, b: 35 },
+  orange: { r: 255, g: 165, b: 0 },
+  orangered: { r: 255, g: 69, b: 0 },
+  orchid: { r: 218, g: 112, b: 214 },
+  palegoldenrod: { r: 238, g: 232, b: 170 },
+  palegreen: { r: 152, g: 251, b: 152 },
+  paleturquoise: { r: 175, g: 238, b: 238 },
+  palevioletred: { r: 219, g: 112, b: 147 },
+  papayawhip: { r: 255, g: 239, b: 213 },
+  peachpuff: { r: 255, g: 218, b: 185 },
+  peru: { r: 205, g: 133, b: 63 },
+  pink: { r: 255, g: 192, b: 203 },
+  plum: { r: 221, g: 160, b: 221 },
+  powderblue: { r: 176, g: 224, b: 230 },
+  purple: { r: 128, g: 0, b: 128 },
+  red: { r: 255, g: 0, b: 0 },
+  rosybrown: { r: 188, g: 143, b: 143 },
+  royalblue: { r: 65, g: 105, b: 225 },
+  saddlebrown: { r: 139, g: 69, b: 19 },
+  salmon: { r: 250, g: 128, b: 114 },
+  sandybrown: { r: 244, g: 164, b: 96 },
+  seagreen: { r: 46, g: 139, b: 87 },
+  seashell: { r: 255, g: 245, b: 238 },
+  sienna: { r: 160, g: 82, b: 45 },
+  silver: { r: 192, g: 192, b: 192 },
+  skyblue: { r: 135, g: 206, b: 235 },
+  slateblue: { r: 106, g: 90, b: 205 },
+  slategray: { r: 112, g: 128, b: 144 },
+  slategrey: { r: 112, g: 128, b: 144 },
+  snow: { r: 255, g: 250, b: 250 },
+  springgreen: { r: 0, g: 255, b: 127 },
+  steelblue: { r: 70, g: 130, b: 180 },
+  tan: { r: 210, g: 180, b: 140 },
+  teal: { r: 0, g: 128, b: 128 },
+  thistle: { r: 216, g: 191, b: 216 },
+  tomato: { r: 255, g: 99, b: 71 },
+  turquoise: { r: 64, g: 224, b: 208 },
+  violet: { r: 238, g: 130, b: 238 },
+  wheat: { r: 245, g: 222, b: 179 },
+  white: { r: 255, g: 255, b: 255 },
+  whitesmoke: { r: 245, g: 245, b: 245 },
+  yellow: { r: 255, g: 255, b: 0 },
+  yellowgreen: { r: 154, g: 205, b: 50 },
+};
+
+export { namedColors };
diff --git a/packages/react/src/components/value-field/types.ts b/packages/react/src/components/value-field/types.ts
new file mode 100644
index 0000000..53df770
--- /dev/null
+++ b/packages/react/src/components/value-field/types.ts
@@ -0,0 +1,23 @@
+type RGB = { r: number; g: number; b: number };
+type RGBA = RGB & { a: number };
+
+type ParserResult<V> =
+  | {
+      valid: true;
+      value: V;
+    }
+  | {
+      valid: false;
+    };
+
+type IncrementTargets = Record<string, boolean> | null;
+
+type Formatter<V> = {
+  parse: (input: string, value: V) => ParserResult<V>;
+  format: (value: V) => string;
+  incrementBy?: (value: V, amount: number, incrementTargets: IncrementTargets) => V;
+  getIncrementTargets?: (element: HTMLInputElement) => IncrementTargets;
+  getIncrementSelection?: (incrementTargets: IncrementTargets) => [start: number, end: number];
+};
+
+export type { Formatter, IncrementTargets, ParserResult, RGB, RGBA };
diff --git a/packages/react/src/components/value-field/value-field-base.tsx b/packages/react/src/components/value-field/value-field-base.tsx
new file mode 100644
index 0000000..6afa1c4
--- /dev/null
+++ b/packages/react/src/components/value-field/value-field-base.tsx
@@ -0,0 +1,195 @@
+import { mergeProps } from '@base-ui/react/merge-props';
+import * as React from 'react';
+
+import { cn, useComposedRefs, useSelectOnInputClick } from '~/utils';
+
+import type { Formatter } from './types';
+import { type ValueFieldScrubTarget, useValueFieldContext } from './value-field-elements';
+
+const DEFAULT_SMALL_NUDGE = 1;
+const DEFAULT_BIG_NUDGE = 10;
+
+type BaseProps<V> = Omit<React.ComponentPropsWithRef<'input'>, 'value' | 'onChange'> & {
+  value: V;
+  onChange: (value: V) => void;
+  smallNudge?: number;
+  bigNudge?: number;
+  formatter: Formatter<V>;
+};
+
+function Base<V>(props: BaseProps<V>) {
+  const {
+    className,
+    ref: forwardedRef,
+    value: valueProp,
+    onChange,
+    smallNudge = DEFAULT_SMALL_NUDGE,
+    bigNudge = DEFAULT_BIG_NUDGE,
+    formatter,
+    disabled,
+    ...fieldProps
+  } = props;
+  const ref = React.useRef<HTMLInputElement>(null);
+  const composedRef = useComposedRefs(forwardedRef, ref);
+  const scrubValueRef = React.useRef(valueProp);
+  const [editingValue, setEditingValue] = React.useState<string | null>(null);
+  const inputValue = editingValue ?? formatter.format(valueProp);
+  const context = useValueFieldContext('ValueField');
+  const disabledValue = disabled || context?.disabled ? true : undefined;
+  const registerScrubTarget = context?.registerScrubTarget;
+  const selectOnClickProps = useSelectOnInputClick();
+
+  React.useEffect(() => {
+    if (!context?.scrubbing) {
+      scrubValueRef.current = valueProp;
+    }
+  }, [context?.scrubbing, valueProp]);
+
+  function submit(input: string) {
+    const parserResult = formatter.parse(input, valueProp);
+
+    if (input.length === 0 || !parserResult.valid || parserResult.value === valueProp) {
+      return revert();
+    }
+
+    setEditingValue(null);
+    onChange(parserResult.value);
+  }
+
+  function revert() {
+    setEditingValue(null);
+  }
+
+  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+    setEditingValue(event.currentTarget.value);
+  }
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+    const inputElement = event.currentTarget;
+
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      inputElement.blur();
+    }
+
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      revert();
+      // Delegate selection to the next tick to make sure it happens after value is set.
+      requestAnimationFrame(() => {
+        inputElement.blur();
+      });
+    }
+
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      if (!formatter.incrementBy) {
+        return;
+      }
+
+      event.preventDefault();
+      const parseResult = formatter.parse(inputElement.value, valueProp);
+      const oldValue = parseResult.valid ? parseResult.value : valueProp;
+      const nudge = event.shiftKey ? bigNudge : smallNudge;
+      const amount = event.key === 'ArrowUp' ? nudge : -nudge;
+      const incrementTargets = formatter.getIncrementTargets
+        ? formatter.getIncrementTargets(inputElement)
+        : null;
+      const newValue = formatter.incrementBy(oldValue, amount, incrementTargets);
+      submit(formatter.format(newValue));
+      // Delegate selection to the next tick to make sure it happens after value is set.
+      requestAnimationFrame(() => {
+        if (incrementTargets && formatter.getIncrementSelection) {
+          const [start, end] = formatter.getIncrementSelection(incrementTargets);
+          inputElement.setSelectionRange(start, end);
+        } else {
+          inputElement.select();
+        }
+      });
+    }
+  }
+
+  function handleBlur(event: React.FocusEvent<HTMLInputElement>) {
+    submit(event.currentTarget.value);
+  }
+
+  const handleScrubStart = React.useCallback(() => {
+    const inputElement = ref.current;
+    setEditingValue(null);
+
+    if (!inputElement) {
+      scrubValueRef.current = valueProp;
+      return;
+    }
+
+    const parseResult = formatter.parse(inputElement.value, valueProp);
+    scrubValueRef.current = parseResult.valid ? parseResult.value : valueProp;
+    inputElement.focus();
+  }, [formatter, valueProp]);
+
+  const handleScrub = React.useCallback(
+    (movementX: number, event: PointerEvent) => {
+      if (!formatter.incrementBy) {
+        return;
+      }
+
+      const currentValue = scrubValueRef.current;
+      const nudge = event.shiftKey ? bigNudge : smallNudge;
+      const nextValue = formatter.incrementBy(currentValue, movementX * nudge, null);
+      const parserResult = formatter.parse(formatter.format(nextValue), currentValue);
+
+      if (!parserResult.valid || parserResult.value === currentValue) {
+        return;
+      }
+
+      scrubValueRef.current = parserResult.value;
+      setEditingValue(null);
+      onChange(parserResult.value);
+    },
+    [bigNudge, formatter, onChange, smallNudge],
+  );
+
+  React.useEffect(() => {
+    if (!registerScrubTarget || !formatter.incrementBy) {
+      return undefined;
+    }
+
+    const scrubTarget: ValueFieldScrubTarget = {
+      disabled: Boolean(disabledValue),
+      inputRef: ref,
+      startScrub: handleScrubStart,
+      scrub: handleScrub,
+    };
+
+    return registerScrubTarget(scrubTarget);
+  }, [disabledValue, formatter, handleScrub, handleScrubStart, registerScrubTarget]);
+
+  return (
+    <input
+      ref={composedRef}
+      dir="auto"
+      autoComplete="off"
+      spellCheck="false"
+      className={cn(
+        'h-full min-w-0 flex-1',
+        'bg-transparent',
+        'cursor-default outline-none',
+        'font-figma text-figma-body-medium font-figma-default',
+        'text-figma placeholder:text-figma-tertiary',
+        context?.inMulti ? 'pl-1 pr-1' : 'pl-2 pr-2',
+        'disabled:cursor-not-allowed disabled:text-figma-tertiary',
+        className,
+      )}
+      value={inputValue}
+      onChange={handleChange}
+      disabled={disabledValue}
+      {...mergeProps<'input'>(
+        { onBlur: handleBlur, onKeyDown: handleKeyDown },
+        selectOnClickProps,
+        fieldProps,
+      )}
+    />
+  );
+}
+
+export { Base };
+export type { BaseProps };
diff --git a/packages/react/src/components/value-field/value-field-elements.tsx b/packages/react/src/components/value-field/value-field-elements.tsx
new file mode 100644
index 0000000..134e6ae
--- /dev/null
+++ b/packages/react/src/components/value-field/value-field-elements.tsx
@@ -0,0 +1,175 @@
+import * as React from 'react';
+
+import { cn, createContext } from '~/utils';
+
+type ValueFieldScrubTarget = {
+  disabled: boolean;
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  startScrub: () => void;
+  scrub: (movementX: number, event: PointerEvent) => void;
+};
+
+type ValueFieldContext = {
+  disabled?: boolean;
+  /**
+   * Whether the field is rendered inside `ValueField.Multi`. Root/Base read this
+   * to swap the standalone chrome for the in-multi cell styling, replacing the
+   * descendant-selector overrides from the reference CSS.
+   */
+  inMulti?: boolean;
+  scrubbing: boolean;
+  scrubTargetsRef: React.RefObject<ValueFieldScrubTarget[]>;
+  registerScrubTarget: (target: ValueFieldScrubTarget | null) => () => void;
+  setScrubbing: (scrubbing: boolean) => void;
+};
+
+const [ValueFieldProvider, useValueFieldContext] = createContext<ValueFieldContext | null>(
+  'ValueFieldProvider',
+  null,
+);
+
+interface RootProps extends React.ComponentPropsWithRef<'label'> {
+  disabled?: boolean;
+}
+
+function Root({ className, disabled, ref, children, ...props }: RootProps) {
+  const context = useValueFieldContext('Root');
+  const providerValue = useValueFieldProviderValue(disabled, context);
+
+  return (
+    <ValueFieldProvider {...providerValue}>
+      <label
+        ref={ref}
+        className={cn(
+          'relative flex h-6 items-center',
+          'font-figma text-figma-body-medium font-figma-default',
+          'text-figma',
+          context?.inMulti
+            ? [
+                '-mt-px grow min-w-0',
+                'rounded-none bg-transparent outline-0',
+                'first:rounded-l-figma-md last:rounded-r-figma-md',
+                'not-first:border-l not-first:border-figma-bg',
+              ]
+            : [
+                'rounded-figma-md overflow-clip',
+                'bg-figma-secondary',
+                'outline-1 -outline-offset-1 outline-solid outline-transparent',
+                'not-data-disabled:hover:outline-figma-border',
+                'focus-within:outline-figma-border-selected',
+                'data-disabled:bg-figma data-disabled:outline-figma-border',
+              ],
+          'data-disabled:text-figma-tertiary',
+          className,
+        )}
+        data-disabled={providerValue.disabled ? '' : undefined}
+        data-scrubbing={providerValue.scrubbing ? '' : undefined}
+        {...props}
+      >
+        {children}
+      </label>
+    </ValueFieldProvider>
+  );
+}
+
+interface MultiProps extends React.ComponentPropsWithRef<'div'> {
+  disabled?: boolean;
+}
+
+function Multi({ className, disabled, ref, ...props }: MultiProps) {
+  const context = useValueFieldContext('Multi');
+  const providerValue = useValueFieldProviderValue(disabled, context, true);
+
+  return (
+    <ValueFieldProvider {...providerValue}>
+      <div
+        ref={ref}
+        className={cn(
+          'relative flex h-6',
+          'rounded-figma-md border border-transparent bg-figma-secondary',
+          'after:absolute after:-inset-px after:rounded-[inherit] after:border',
+          'after:border-transparent after:-outline-offset-1 after:pointer-events-none',
+          'not-data-disabled:hover:after:border-figma-border',
+          'focus-within:after:outline-1 focus-within:after:outline-solid focus-within:after:outline-figma-border-selected',
+          'data-disabled:bg-figma data-disabled:after:border-figma-border',
+          className,
+        )}
+        data-disabled={providerValue.disabled ? '' : undefined}
+        data-scrubbing={providerValue.scrubbing ? '' : undefined}
+        {...props}
+      />
+    </ValueFieldProvider>
+  );
+}
+
+type LabelProps = React.ComponentPropsWithRef<'span'>;
+
+function Label({ className, ref, ...props }: LabelProps) {
+  const context = useValueFieldContext('Label');
+
+  return (
+    <span
+      ref={ref}
+      className={cn(
+        'flex size-6 shrink-0 items-center justify-center self-stretch',
+        'text-figma-secondary icon-figma-secondary',
+        // A leading label's input sits flush against the cell — the spec pads
+        // text to the icon cell edge, not past it. In a Multi cell the input's
+        // own 4px inset supplies the inter-cell gap instead.
+        // Suffix labels sit narrower; labels nested in a Scrubber keep size-6.
+        // The parent <label> element is the Root.
+        context?.inMulti ? '' : '[&+input]:pl-0',
+        '[label>&]:last:w-5',
+        'data-disabled:text-figma-tertiary data-disabled:icon-figma-disabled',
+        className,
+      )}
+      data-disabled={context?.disabled ? '' : undefined}
+      {...props}
+    />
+  );
+}
+
+Root.displayName = 'ValueField.Root';
+Label.displayName = 'ValueField.Label';
+Multi.displayName = 'ValueField.Multi';
+
+function useValueFieldProviderValue(
+  disabled: boolean | undefined,
+  context: ValueFieldContext | null,
+  inMulti = false,
+) {
+  const [scrubbing, setScrubbing] = React.useState(false);
+  const scrubTargetsRef = React.useRef<ValueFieldScrubTarget[]>([]);
+  const inheritedDisabled = disabled || context?.disabled ? true : undefined;
+  const inMultiValue = inMulti || context?.inMulti ? true : undefined;
+
+  const registerScrubTarget = React.useCallback((target: ValueFieldScrubTarget | null) => {
+    if (!target) {
+      return () => {};
+    }
+
+    scrubTargetsRef.current = [
+      ...scrubTargetsRef.current.filter((item) => item !== target),
+      target,
+    ];
+
+    return () => {
+      scrubTargetsRef.current = scrubTargetsRef.current.filter((item) => item !== target);
+    };
+  }, []);
+
+  return React.useMemo(
+    () => ({
+      disabled: inheritedDisabled,
+      inMulti: inMultiValue,
+      scrubbing,
+      scrubTargetsRef,
+      registerScrubTarget,
+      setScrubbing,
+    }),
+    [inMultiValue, inheritedDisabled, registerScrubTarget, scrubbing],
+  );
+}
+
+export { Label, Multi, Root, useValueFieldContext };
+export type { LabelProps, MultiProps, RootProps, ValueFieldContext, ValueFieldScrubTarget };
diff --git a/packages/react/src/components/value-field/value-field-hex.tsx b/packages/react/src/components/value-field/value-field-hex.tsx
new file mode 100644
index 0000000..206bc18
--- /dev/null
+++ b/packages/react/src/components/value-field/value-field-hex.tsx
@@ -0,0 +1,201 @@
+import { useMemo } from 'react';
+
+import { namedColors } from './named-colors';
+import type { Formatter, RGBA } from './types';
+import { Base, type BaseProps } from './value-field-base';
+
+type HexProps = Omit<BaseProps<RGBA>, 'value' | 'onChange' | 'formatter'> & {
+  /**
+   * Color in Figma's normalized RGBA format
+   */
+  value: RGBA;
+  /**
+   * Callback to call upon submission.
+   */
+  onChange: (value: RGBA) => void;
+  /**
+   * Ignores the alpha channel in user input, treating it as opaque. Useful when rendering without
+   * an alpha field. Results in 'onChange' always being called with an alpha value of 1.
+   *
+   * @default false
+   */
+  ignoreAlpha?: boolean;
+};
+
+function Hex({ ref, value, onChange, ignoreAlpha = false, ...inputProps }: HexProps) {
+  const formatter = useMemo(() => createFormatter({ ignoreAlpha }), [ignoreAlpha]);
+
+  return (
+    <Base
+      ref={ref}
+      value={value}
+      onChange={onChange}
+      formatter={formatter}
+      {...inputProps}
+    />
+  );
+}
+
+type FormatterOptions = { ignoreAlpha?: boolean };
+
+function createFormatter(options: FormatterOptions): Formatter<RGBA> {
+  const { ignoreAlpha } = options;
+
+  return {
+    parse(input, currentValue) {
+      if (isValidNamedColor(input)) {
+        const { r, g, b } = namedColors[input];
+        return {
+          valid: true,
+          value: { r: r / 255, g: g / 255, b: b / 255, a: currentValue.a },
+        };
+      }
+
+      try {
+        const hex = expandToHex8(getFirstValidSubstring(input), currentValue);
+        const rgba = hex8toRgba(hex);
+        return {
+          value: ignoreAlpha ? { ...rgba, a: 1 } : rgba,
+          valid: true,
+        };
+      } catch {
+        return { valid: false };
+      }
+    },
+    format(value) {
+      return (
+        Math.round(value.r * 255)
+          .toString(16)
+          .padStart(2, '0') +
+        Math.round(value.g * 255)
+          .toString(16)
+          .padStart(2, '0') +
+        Math.round(value.b * 255)
+          .toString(16)
+          .padStart(2, '0')
+      ).toUpperCase();
+    },
+    incrementBy(value, amount, incrementTargets): RGBA {
+      incrementTargets ??= { r: true, g: true, b: true };
+      return {
+        r: incrementTargets.r ? clampByte(Math.round(value.r * 255) + amount) / 255 : value.r,
+        g: incrementTargets.g ? clampByte(Math.round(value.g * 255) + amount) / 255 : value.g,
+        b: incrementTargets.b ? clampByte(Math.round(value.b * 255) + amount) / 255 : value.b,
+        a: value.a,
+      };
+    },
+    getIncrementTargets(inputElement) {
+      const start = inputElement.selectionStart;
+      const end = inputElement.selectionEnd;
+
+      if (start === null || end === null) {
+        return null;
+      }
+
+      return {
+        r: start < 2 || (start === 2 && end === 2),
+        g: (start < 4 && end >= 3) || (start === 4 && end === 4),
+        b: end >= 5,
+      };
+    },
+    getIncrementSelection(targets) {
+      let start: number;
+      let end: number;
+
+      if (!targets) {
+        return [0, 6];
+      }
+
+      if (targets.r) {
+        start = 0;
+      } else if (targets.g) {
+        start = 2;
+      } else {
+        start = 4;
+      }
+
+      if (targets.b) {
+        end = 6;
+      } else if (targets.g) {
+        end = 4;
+      } else {
+        end = 2;
+      }
+
+      return [start, end];
+    },
+  };
+}
+
+function clampByte(value: number) {
+  return Math.min(255, Math.max(0, value));
+}
+
+function isValidNamedColor(input: string): input is keyof typeof namedColors {
+  return Object.keys(namedColors).includes(input);
+}
+
+function getFirstValidSubstring(input: string) {
+  const pattern = /[0-9a-f]+/gi;
+  return input.match(pattern)?.[0] ?? '';
+}
+
+function expandToHex8(hexLike: string, currentValue: RGBA): string {
+  if (!/^[0-9a-f]{1,8}$/i.test(hexLike)) {
+    throw new Error('Invalid hex substring');
+  }
+
+  switch (hexLike.length) {
+    case 1:
+      return hexLike.repeat(6) + alphaToHex(currentValue.a);
+    case 2:
+      return hexLike.repeat(3) + alphaToHex(currentValue.a);
+    case 3:
+      return (
+        hexLike
+          .split('')
+          .map((c) => c.repeat(2))
+          .join('') + alphaToHex(currentValue.a)
+      );
+    case 4:
+      return (
+        hexLike
+          .slice(0, 3)
+          .split('')
+          .map((c) => c.repeat(2))
+          .join('') + hexLike[3].repeat(2)
+      );
+    case 5:
+      return (
+        hexLike
+          .slice(0, 3)
+          .split('')
+          .map((c) => c.repeat(2))
+          .join('') + hexLike.slice(-2)
+      );
+    case 6:
+      return hexLike + alphaToHex(currentValue.a);
+    case 7:
+      return hexLike.slice(0, 6) + hexLike[6].repeat(2);
+    case 8:
+      return hexLike;
+    default:
+      throw new Error('Invalid hex substring');
+  }
+}
+
+function hex8toRgba(hex: string): RGBA {
+  return {
+    r: parseInt(hex.substring(0, 2), 16) / 255,
+    g: parseInt(hex.substring(2, 4), 16) / 255,
+    b: parseInt(hex.substring(4, 6), 16) / 255,
+    a: parseInt(hex.substring(6, 8), 16) / 255,
+  };
+}
+
+function alphaToHex(a: number): string {
+  return Math.round(a * 255).toString(16);
+}
+
+export { Hex };
+export type { HexProps };
diff --git a/packages/react/src/components/value-field/value-field-numeric-select.tsx b/packages/react/src/components/value-field/value-field-numeric-select.tsx
new file mode 100644
index 0000000..31161db
--- /dev/null
+++ b/packages/react/src/components/value-field/value-field-numeric-select.tsx
@@ -0,0 +1,211 @@
+import { Select as BaseSelect } from '@base-ui/react/select';
+import * as React from 'react';
+
+import { CheckmarkIcon, ChevronDownIcon, ChevronUpIcon } from '~/icons';
+import { cn } from '~/utils';
+
+import {
+  menuItemClassName,
+  menuItemIndicatorClassName,
+  menuPopupClassName,
+  menuScrollButtonClassName,
+  menuSeparatorClassName,
+} from '../menu/menu-classes';
+import { Multi, Root } from './value-field-elements';
+import { Numeric, type NumericProps } from './value-field-numeric';
+import { Scrubber } from './value-field-scrubber';
+
+interface NumericSelectProps extends Omit<NumericProps, 'className' | 'style'> {
+  options: readonly number[];
+  onItemHighlighted?: (value: number | undefined) => void;
+  className?: string;
+  style?: React.CSSProperties;
+  triggerLabel?: string;
+}
+
+function NumericSelect(props: NumericSelectProps) {
+  const {
+    className,
+    style,
+    value,
+    onChange,
+    options,
+    onItemHighlighted,
+    disabled,
+    triggerLabel = 'Select value',
+    ref,
+    ...numericProps
+  } = props;
+  const valueOption = options.includes(value);
+  const selectValue = toSelectValue(value);
+  const selectOptions = getSelectOptions(value, options, valueOption);
+  const anchorRef = React.useRef<HTMLDivElement>(null);
+  const highlightedValueRef = React.useRef<number | undefined>(undefined);
+
+  function changeSelectValue(nextValue: string | null) {
+    if (nextValue !== null) {
+      onChange(Number(nextValue));
+    }
+  }
+
+  function highlightItem(nextValue: number | undefined) {
+    if (highlightedValueRef.current === nextValue) {
+      return;
+    }
+
+    highlightedValueRef.current = nextValue;
+    onItemHighlighted?.(nextValue);
+  }
+
+  function changeOpen(open: boolean) {
+    if (!open) {
+      highlightItem(undefined);
+    }
+  }
+
+  function clearHighlightOnPopupFocus(event: React.FocusEvent<HTMLElement>) {
+    if (event.target === event.currentTarget) {
+      highlightItem(undefined);
+    }
+  }
+
+  return (
+    <BaseSelect.Root
+      items={selectOptions}
+      value={selectValue}
+      onValueChange={changeSelectValue}
+      onOpenChange={changeOpen}
+      disabled={disabled}
+    >
+      <Multi
+        ref={anchorRef}
+        className={cn(
+          'w-full',
+          'not-data-disabled:hover:after:border-transparent',
+          'not-data-disabled:has-[>label:hover]:after:border-figma-border',
+          className,
+        )}
+        style={style}
+        disabled={disabled}
+      >
+        <Root
+          className="min-w-0"
+          disabled={disabled}
+        >
+          <Scrubber />
+          <Numeric
+            ref={ref}
+            value={value}
+            onChange={onChange}
+            disabled={disabled}
+            {...numericProps}
+          />
+        </Root>
+        <BaseSelect.Trigger
+          className={cn(
+            'box-border appearance-none self-start',
+            'flex h-6 w-6 shrink-0 items-center justify-center p-0',
+            '-mt-px',
+            'rounded-r-figma-md border-0 border-l border-figma-bg bg-transparent',
+            'text-figma icon-figma',
+            'not-disabled:hover:bg-figma-tertiary',
+            'data-popup-open:bg-figma-selected data-popup-open:border-figma-selected',
+            'disabled:text-figma-tertiary disabled:icon-figma-disabled',
+          )}
+          aria-label={triggerLabel}
+        >
+          <BaseSelect.Value className="pointer-events-none absolute top-0 left-2 h-6 w-0 overflow-hidden whitespace-nowrap opacity-0" />
+          <BaseSelect.Icon className="flex items-center justify-center">
+            <ChevronDownIcon />
+          </BaseSelect.Icon>
+        </BaseSelect.Trigger>
+      </Multi>
+      <BaseSelect.Portal>
+        <BaseSelect.Positioner
+          anchor={anchorRef}
+          className={cn(
+            'flex flex-col',
+            'min-w-[calc(var(--anchor-width)+22px)]',
+            'min-h-[calc(var(--available-height)+22px)]',
+            valueOption && 'mt-2.25!',
+          )}
+          positionMethod="fixed"
+          collisionPadding={0}
+        >
+          <BaseSelect.Popup
+            className={cn(
+              menuPopupClassName,
+              'relative flex flex-col overflow-hidden min-w-20 p-2',
+            )}
+            onFocus={clearHighlightOnPopupFocus}
+          >
+            <BaseSelect.ScrollUpArrow
+              className={cn(menuScrollButtonClassName, 'absolute inset-x-0 top-0 z-10')}
+            >
+              <ChevronUpIcon />
+            </BaseSelect.ScrollUpArrow>
+            <BaseSelect.List className="min-h-0 overflow-y-auto">
+              {!valueOption && (
+                <>
+                  <BaseSelect.Item
+                    value={selectValue}
+                    label={selectValue}
+                    className={cn(menuItemClassName, 'pl-6 bg-figma-menu-selected')}
+                    onFocus={() => highlightItem(value)}
+                  >
+                    <BaseSelect.ItemIndicator className={menuItemIndicatorClassName}>
+                      <CheckmarkIcon size="4" />
+                    </BaseSelect.ItemIndicator>
+                    <BaseSelect.ItemText>{value}</BaseSelect.ItemText>
+                  </BaseSelect.Item>
+                  <BaseSelect.Separator className={menuSeparatorClassName} />
+                </>
+              )}
+              {options.map((option) => (
+                <BaseSelect.Item
+                  key={toSelectValue(option)}
+                  value={toSelectValue(option)}
+                  label={toSelectValue(option)}
+                  className={cn(menuItemClassName, 'pl-6')}
+                  onFocus={() => highlightItem(option)}
+                >
+                  <BaseSelect.ItemIndicator className={menuItemIndicatorClassName}>
+                    <CheckmarkIcon size="4" />
+                  </BaseSelect.ItemIndicator>
+                  <BaseSelect.ItemText>{option}</BaseSelect.ItemText>
+                </BaseSelect.Item>
+              ))}
+            </BaseSelect.List>
+            <BaseSelect.ScrollDownArrow
+              className={cn(menuScrollButtonClassName, 'absolute inset-x-0 bottom-0 z-10')}
+            >
+              <ChevronDownIcon />
+            </BaseSelect.ScrollDownArrow>
+          </BaseSelect.Popup>
+        </BaseSelect.Positioner>
+      </BaseSelect.Portal>
+    </BaseSelect.Root>
+  );
+}
+
+function getSelectOptions(value: number, options: readonly number[], valueOption: boolean) {
+  const optionItems = options.map((option) => {
+    const optionValue = toSelectValue(option);
+    return { value: optionValue, label: optionValue };
+  });
+
+  if (valueOption) {
+    return optionItems;
+  }
+
+  return [{ value: toSelectValue(value), label: toSelectValue(value) }, ...optionItems];
+}
+
+function toSelectValue(value: number) {
+  return `${value}`;
+}
+
+NumericSelect.displayName = 'ValueField.NumericSelect';
+
+export { NumericSelect };
+export type { NumericSelectProps };
diff --git a/packages/react/src/components/value-field/value-field-numeric.tsx b/packages/react/src/components/value-field/value-field-numeric.tsx
new file mode 100644
index 0000000..59e380c
--- /dev/null
+++ b/packages/react/src/components/value-field/value-field-numeric.tsx
@@ -0,0 +1,244 @@
+import evaluate from '@emmetio/math-expression';
+import { useMemo } from 'react';
+
+import type { Formatter } from './types';
+import { Base, type BaseProps } from './value-field-base';
+
+const MAX_SUPPORTED_PRECISION = 15;
+
+type NumericProps = Omit<
+  BaseProps<number>,
+  'value' | 'onChange' | 'formatter' | 'min' | 'max' | 'type'
+> & {
+  /**
+   * The numeric value of the input.
+   */
+  value: number;
+
+  /**
+   * Callback to call upon submission.
+   */
+  onChange: (value: number) => void;
+
+  /**
+   * The minimum allowed value.
+   */
+  min?: number;
+
+  /**
+   * The maximum allowed value.
+   */
+  max?: number;
+
+  /**
+   * The numeric range that the `value` prop will be normalized to when displayed in the input.
+   * Requires non-equal 'max' and 'min' values.
+   *
+   * @example
+   *   <Numeric value={0.5} min={0} max={1} targetRange={[0, 100]} /> // Displays value of 50
+   */
+  targetRange?: [number, number];
+
+  /**
+   * The decimal precision that user input will be rounded to.
+   */
+  precision?: number;
+
+  /**
+   * Units that will be accepted as valid input (e.g., "px", "%").
+   */
+  allowedUnits?: string[];
+
+  /**
+   * Suffix to be appended to the value (e.g., "px", "%"). Suffix is treated as an allowed unit.
+   */
+  suffix?: string;
+
+  /**
+   * The small nudge increment for the value.
+   */
+  smallNudge?: number;
+
+  /**
+   * The big nudge increment for the value.
+   */
+  bigNudge?: number;
+};
+
+function Numeric({
+  ref,
+  value,
+  onChange,
+  min,
+  max,
+  targetRange,
+  precision,
+  suffix,
+  allowedUnits,
+  ...inputProps
+}: NumericProps) {
+  const formatter = useMemo(
+    () => createFormatter({ min, max, precision, targetRange, suffix, allowedUnits }),
+    [min, max, precision, targetRange, suffix, allowedUnits],
+  );
+
+  return (
+    <Base
+      ref={ref}
+      value={value}
+      onChange={onChange}
+      formatter={formatter}
+      {...inputProps}
+    />
+  );
+}
+
+type FormatterOptions = Pick<
+  NumericProps,
+  'min' | 'max' | 'targetRange' | 'precision' | 'suffix' | 'allowedUnits'
+>;
+
+function createFormatter(options: FormatterOptions = {}): Formatter<number> {
+  const {
+    min,
+    max,
+    targetRange,
+    precision = MAX_SUPPORTED_PRECISION,
+    suffix,
+    allowedUnits = [],
+  } = options;
+  const { toDisplayValue, fromDisplayValue } = getValueTransformers({ min, max, targetRange });
+
+  return {
+    parse: (input: string, currentValue: number) => {
+      try {
+        const evaluated = evaluateExpression({
+          expression: input,
+          displayValue: toDisplayValue(currentValue),
+          suffix,
+          allowedUnits,
+        });
+        const rounded = roundTo(precision, evaluated);
+        return {
+          valid: true,
+          value: clampRange(fromDisplayValue(rounded), { min, max }),
+        };
+      } catch {
+        return { valid: false };
+      }
+    },
+    format: (value: number) => {
+      const clamped = clampRange(value, { min, max });
+      return toValueString(roundTo(precision, toDisplayValue(clamped)), suffix);
+    },
+    incrementBy(value: number, amount: number) {
+      return value + fromDisplayValue(amount);
+    },
+  };
+}
+
+function getValueTransformers(props: Pick<NumericProps, 'min' | 'max' | 'targetRange'>) {
+  const { min, max, targetRange } = props;
+
+  if (!targetRange) {
+    return {
+      toDisplayValue: (value: number) => value,
+      fromDisplayValue: (value: number) => value,
+    };
+  }
+
+  if (typeof min !== 'number' || typeof max !== 'number') {
+    throw Error("'targetRange' requires specifying 'min' and 'max'.");
+  }
+
+  if (min === max) {
+    throw Error("'min' and 'max' cannot be equal.");
+  }
+
+  return {
+    toDisplayValue: normalize([min, max], targetRange),
+    fromDisplayValue: normalize(targetRange, [min, max]),
+  };
+}
+
+/**
+ * Map a value to a specified range.
+ * https://stats.stackexchange.com/a/281164
+ *
+ * @example
+ *   normalize([0, 1], [0, 100])(0.5) -> 50
+ */
+function normalize(sourceRange: [number, number], targetRange: [number, number]) {
+  const [sourceMin, sourceMax] = sourceRange;
+  const [targetMin, targetMax] = targetRange;
+
+  return function (value: number): number {
+    if (sourceMin === sourceMax || targetMin === targetMax) {
+      return targetMin;
+    }
+
+    return ((value - sourceMin) / (sourceMax - sourceMin)) * (targetMax - targetMin) + targetMin;
+  };
+}
+
+function roundTo(precision: number, value: number) {
+  const factor = 10 ** precision;
+  return Math.round(value * factor) / factor;
+}
+
+function clampRange(value: number, range: { min?: number; max?: number }) {
+  const { min, max } = range;
+
+  if (min !== undefined && value < min) {
+    return min;
+  }
+
+  if (max !== undefined && value > max) {
+    return max;
+  }
+
+  return value;
+}
+
+function toValueString(value: number, suffix: string | undefined) {
+  if (Number.isNaN(value)) {
+    return '';
+  }
+
+  return suffix ? `${value}${suffix}` : `${value}`;
+}
+
+function evaluateExpression(params: {
+  expression: string;
+  displayValue: number;
+  suffix?: string;
+  allowedUnits?: string[];
+}) {
+  const { displayValue, expression, suffix = '', allowedUnits = [] } = params;
+  const numberPattern = '(\\d*\\.?\\d+)';
+  const unitsPattern = `(?:${[...allowedUnits, suffix].join('|')})*`;
+
+  const modifiedExpression = expression
+    .replace(new RegExp(`${numberPattern}${unitsPattern}`, 'gi'), (_, p1) => p1)
+    .replace(new RegExp(`${unitsPattern}${numberPattern}`, 'gi'), (_, p1) => p1)
+    .replace(new RegExp(`${numberPattern}%`, 'gi'), (_, p1) => `(${displayValue}*${p1}/100)`)
+    .replace(new RegExp(`%${numberPattern}`, 'gi'), (_, p1) => `(${displayValue}*${p1}/100)`)
+    .replace(new RegExp(`${numberPattern}x`, 'gi'), (_, p1) => `(${displayValue}*${p1})`)
+    .replace(new RegExp(`x${numberPattern}`, 'gi'), (_, p1) => `(${displayValue}*${p1})`)
+    .replace(/(?<!\d)x(?!\d)/gi, `${displayValue}`)
+    .trim();
+
+  let result: number | null;
+  try {
+    result = evaluate(modifiedExpression);
+  } catch {
+    result = null;
+  }
+  if (result === null) {
+    throw new Error('Invalid expression.');
+  }
+  return result;
+}
+
+export { evaluateExpression, Numeric };
+export type { NumericProps };
diff --git a/packages/react/src/components/value-field/value-field-scrubber.tsx b/packages/react/src/components/value-field/value-field-scrubber.tsx
new file mode 100644
index 0000000..78a4f32
--- /dev/null
+++ b/packages/react/src/components/value-field/value-field-scrubber.tsx
@@ -0,0 +1,470 @@
+import * as React from 'react';
+import { createPortal, flushSync } from 'react-dom';
+
+import { cn, useComposedRefs } from '~/utils';
+
+import { type ValueFieldScrubTarget, useValueFieldContext } from './value-field-elements';
+
+const DEFAULT_PIXEL_SENSITIVITY = 2;
+const DOCUMENT_POSITION_FOLLOWING = 4;
+
+interface ScrubberProps extends React.ComponentPropsWithRef<'span'> {
+  /**
+   * The number of horizontal pixels the pointer must move before the value changes.
+   */
+  pixelSensitivity?: number;
+  /**
+   * Expands the cursor wrap boundary around the scrubber by half this distance on each side.
+   */
+  teleportDistance?: number;
+}
+
+type PointerCoordinates = {
+  x: number;
+  y: number;
+};
+
+type ViewportBounds = {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+};
+
+function Scrubber(props: ScrubberProps) {
+  const {
+    children,
+    className,
+    onPointerDown,
+    pixelSensitivity = DEFAULT_PIXEL_SENSITIVITY,
+    teleportDistance,
+    style,
+    ref: forwardedRef,
+    ...scrubberProps
+  } = props;
+  const context = useValueFieldContext('Scrubber');
+  const scrubberRef = React.useRef<HTMLSpanElement | null>(null);
+  const cursorRef = React.useRef<HTMLSpanElement>(null);
+  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(null);
+  const setScrubberElement = React.useCallback((element: HTMLSpanElement | null) => {
+    scrubberRef.current = element;
+    setPortalRoot(getPortalRoot(element));
+  }, []);
+  const composedRef = useComposedRefs(forwardedRef, setScrubberElement);
+  const [isScrubbing, setIsScrubbing] = React.useState(false);
+  const [isTouchInput, setIsTouchInput] = React.useState(false);
+  const [isPointerLockDenied, setIsPointerLockDenied] = React.useState(false);
+  const isScrubbingRef = React.useRef(false);
+  const didMoveRef = React.useRef(false);
+  const pointerDownTargetRef = React.useRef<EventTarget | null>(null);
+  const cumulativeDeltaRef = React.useRef(0);
+  const cursorCoordinatesRef = React.useRef<PointerCoordinates>({ x: 0, y: 0 });
+  const scrubTargetsRef = context?.scrubTargetsRef;
+  const contextDisabled = context?.disabled;
+  const setRootScrubbing = context?.setScrubbing;
+  const shouldRenderCursor =
+    isScrubbing && !isTouchInput && !isPointerLockDenied && !isWebKitBrowser();
+
+  const setScrubbingState = React.useCallback(
+    (scrubbing: boolean, event: PointerEvent) => {
+      flushSync(() => {
+        setIsScrubbing(scrubbing);
+        setRootScrubbing?.(scrubbing);
+      });
+
+      const cursor = cursorRef.current;
+      if (!scrubbing || !cursor) {
+        return;
+      }
+
+      const coordinates = {
+        x: event.clientX - cursor.offsetWidth / 2,
+        y: event.clientY - cursor.offsetHeight / 2,
+      };
+      cursorCoordinatesRef.current = coordinates;
+      updateCursorTransform(cursor, coordinates);
+    },
+    [setRootScrubbing],
+  );
+
+  const updateCursorPosition = React.useCallback(
+    (movementX: number, movementY: number) => {
+      const cursor = cursorRef.current;
+      const scrubber = scrubberRef.current;
+
+      if (!cursor || !scrubber) {
+        return;
+      }
+
+      const bounds = getViewportBounds(teleportDistance, scrubber);
+      const coordinates = cursorCoordinatesRef.current;
+      const nextCoordinates = wrapCursorCoordinates(
+        {
+          x: Math.round(coordinates.x + movementX),
+          y: Math.round(coordinates.y + movementY),
+        },
+        bounds,
+        cursor,
+      );
+
+      cursorCoordinatesRef.current = nextCoordinates;
+      updateCursorTransform(cursor, nextCoordinates);
+    },
+    [teleportDistance],
+  );
+
+  function handlePointerDown(event: React.PointerEvent<HTMLSpanElement>) {
+    onPointerDown?.(event);
+
+    const scrubTarget = getScrubTarget(scrubTargetsRef?.current, scrubberRef.current);
+    const isMainButton = event.button === 0;
+
+    if (
+      event.defaultPrevented ||
+      !isMainButton ||
+      contextDisabled ||
+      !scrubTarget ||
+      scrubTarget.disabled
+    ) {
+      return;
+    }
+
+    const isTouch = event.pointerType === 'touch';
+    setIsTouchInput(isTouch);
+    setIsPointerLockDenied(false);
+
+    if (event.pointerType === 'mouse') {
+      event.preventDefault();
+    }
+
+    scrubTarget.startScrub();
+    isScrubbingRef.current = true;
+    didMoveRef.current = false;
+    cumulativeDeltaRef.current = 0;
+    pointerDownTargetRef.current = event.nativeEvent.target;
+    setScrubbingState(true, event.nativeEvent);
+
+    if (!isTouch && !isWebKitBrowser()) {
+      requestPointerLock(scrubberRef.current, setIsPointerLockDenied);
+    }
+  }
+
+  React.useEffect(() => {
+    if (!isScrubbing || !scrubTargetsRef || contextDisabled) {
+      return undefined;
+    }
+
+    const activeScrubTargetsRef = scrubTargetsRef;
+    const scrubTarget = getScrubTarget(activeScrubTargetsRef.current, scrubberRef.current);
+    if (!scrubTarget || scrubTarget.disabled) {
+      return undefined;
+    }
+
+    const ownerWindow = getOwnerWindow(scrubberRef.current);
+    if (!ownerWindow) {
+      return undefined;
+    }
+
+    function handlePointerMove(event: PointerEvent) {
+      if (!isScrubbingRef.current) {
+        return;
+      }
+
+      event.preventDefault();
+      updateCursorPosition(event.movementX, event.movementY);
+      cumulativeDeltaRef.current += event.movementX;
+
+      if (Math.abs(cumulativeDeltaRef.current) >= pixelSensitivity) {
+        const movementX = cumulativeDeltaRef.current;
+        cumulativeDeltaRef.current = 0;
+        didMoveRef.current = true;
+
+        const activeScrubTarget = getScrubTarget(
+          activeScrubTargetsRef.current,
+          scrubberRef.current,
+        );
+        if (movementX !== 0 && activeScrubTarget && !activeScrubTarget.disabled) {
+          activeScrubTarget.scrub(movementX, event);
+        }
+      }
+    }
+
+    function handlePointerUp(event: PointerEvent) {
+      const ownerDocument = getOwnerDocument(scrubberRef.current);
+      if (typeof ownerDocument?.exitPointerLock === 'function') {
+        ownerDocument.exitPointerLock();
+      }
+      isScrubbingRef.current = false;
+      setScrubbingState(false, event);
+      dispatchClickIfNeeded(pointerDownTargetRef.current, scrubberRef.current, didMoveRef.current);
+      didMoveRef.current = false;
+      pointerDownTargetRef.current = null;
+      cumulativeDeltaRef.current = 0;
+    }
+
+    ownerWindow.addEventListener('pointermove', handlePointerMove, true);
+    ownerWindow.addEventListener('pointerup', handlePointerUp, true);
+
+    return () => {
+      ownerWindow.removeEventListener('pointermove', handlePointerMove, true);
+      ownerWindow.removeEventListener('pointerup', handlePointerUp, true);
+    };
+  }, [
+    contextDisabled,
+    isScrubbing,
+    pixelSensitivity,
+    scrubTargetsRef,
+    setScrubbingState,
+    updateCursorPosition,
+  ]);
+
+  React.useEffect(() => {
+    const scrubber = scrubberRef.current;
+    if (!scrubber || contextDisabled) {
+      return undefined;
+    }
+
+    function handleTouchStart(event: TouchEvent) {
+      if (event.touches.length === 1) {
+        event.preventDefault();
+      }
+    }
+
+    scrubber.addEventListener('touchstart', handleTouchStart);
+
+    return () => {
+      scrubber.removeEventListener('touchstart', handleTouchStart);
+    };
+  }, [contextDisabled]);
+
+  const scrubberStyle: React.CSSProperties = {
+    touchAction: 'none',
+    WebkitUserSelect: 'none',
+    userSelect: 'none',
+    ...style,
+  };
+  return (
+    <span
+      ref={composedRef}
+      className={cn(
+        'flex shrink-0 items-center self-stretch',
+        'cursor-ew-resize',
+        'text-figma-secondary icon-figma-secondary',
+        // An empty scrubber collapses to a 4px drag strip over the input's left edge;
+        // a populated one pushes the input against its content. In a Multi cell the
+        // input's 4px inset already accounts for the spec's inter-cell gap.
+        'empty:absolute empty:inset-y-0 empty:left-0 empty:z-figma-1 empty:w-1',
+        context?.inMulti ? '' : 'not-empty:-mr-2',
+        'data-disabled:cursor-default data-disabled:text-figma-tertiary data-disabled:icon-figma-disabled',
+        className,
+      )}
+      data-disabled={contextDisabled ? '' : undefined}
+      data-scrubbing={isScrubbing ? '' : undefined}
+      role="presentation"
+      style={scrubberStyle}
+      onPointerDown={handlePointerDown}
+      {...scrubberProps}
+    >
+      {children}
+      {shouldRenderCursor && portalRoot
+        ? createPortal(
+            <span
+              ref={cursorRef}
+              role="presentation"
+              data-value-field-cursor
+              className={cn(
+                'pointer-events-none fixed top-0 left-0 z-2147483647',
+                'h-3.5 w-6.5',
+                'text-figma-oninverse',
+                'drop-shadow-[0_1px_1px_var(--figma-color-bg-inverse)]',
+              )}
+            >
+              <CursorGrowIcon />
+            </span>,
+            portalRoot,
+          )
+        : null}
+    </span>
+  );
+}
+
+function requestPointerLock(
+  element: HTMLElement | null,
+  setPointerLockDenied: (denied: boolean) => void,
+) {
+  const ownerDocument = getOwnerDocument(element);
+  const body = ownerDocument?.body;
+
+  if (!body || !body.requestPointerLock) {
+    setPointerLockDenied(true);
+    return;
+  }
+
+  try {
+    void body.requestPointerLock().then(
+      () => setPointerLockDenied(false),
+      () => setPointerLockDenied(true),
+    );
+  } catch {
+    setPointerLockDenied(true);
+  }
+}
+
+function getScrubTarget(
+  targets: ValueFieldScrubTarget[] | undefined,
+  scrubber: HTMLElement | null,
+) {
+  if (!targets || targets.length === 0) {
+    return null;
+  }
+
+  if (!scrubber || targets.length === 1) {
+    return targets[0] ?? null;
+  }
+
+  const root = scrubber.closest('label');
+  const scopedTargets = root
+    ? targets.filter((target) => target.inputRef.current?.closest('label') === root)
+    : targets;
+
+  return getNextScrubTarget(scopedTargets, scrubber) ?? scopedTargets[0] ?? null;
+}
+
+function getNextScrubTarget(targets: ValueFieldScrubTarget[], scrubber: HTMLElement) {
+  return (
+    targets.find((target) => {
+      const input = target.inputRef.current;
+      return input
+        ? (scrubber.compareDocumentPosition(input) & DOCUMENT_POSITION_FOLLOWING) !== 0
+        : false;
+    }) ?? null
+  );
+}
+
+function dispatchClickIfNeeded(
+  target: EventTarget | null,
+  element: HTMLElement | null,
+  didMove: boolean,
+) {
+  if (didMove || !target) {
+    return;
+  }
+
+  const ownerWindow = getOwnerWindow(element);
+  if (!ownerWindow) {
+    return;
+  }
+
+  target.dispatchEvent(new ownerWindow.MouseEvent('click', { bubbles: true, cancelable: true }));
+}
+
+function updateCursorTransform(cursor: HTMLElement, coordinates: PointerCoordinates) {
+  cursor.style.transform = `translate3d(${coordinates.x}px,${coordinates.y}px,0)`;
+}
+
+function wrapCursorCoordinates(
+  coordinates: PointerCoordinates,
+  bounds: ViewportBounds,
+  cursor: HTMLElement,
+) {
+  const nextCoordinates = { ...coordinates };
+  const halfWidth = cursor.offsetWidth / 2;
+  const halfHeight = cursor.offsetHeight / 2;
+
+  if (nextCoordinates.x + halfWidth < bounds.left) {
+    nextCoordinates.x = bounds.right - halfWidth;
+  } else if (nextCoordinates.x + halfWidth > bounds.right) {
+    nextCoordinates.x = bounds.left - halfWidth;
+  }
+
+  if (nextCoordinates.y + halfHeight < bounds.top) {
+    nextCoordinates.y = bounds.bottom - halfHeight;
+  } else if (nextCoordinates.y + halfHeight > bounds.bottom) {
+    nextCoordinates.y = bounds.top - halfHeight;
+  }
+
+  return nextCoordinates;
+}
+
+function getViewportBounds(
+  teleportDistance: number | undefined,
+  element: HTMLElement,
+): ViewportBounds {
+  const rect = element.getBoundingClientRect();
+
+  if (teleportDistance !== undefined) {
+    return {
+      left: rect.left - teleportDistance / 2,
+      top: rect.top - teleportDistance / 2,
+      right: rect.right + teleportDistance / 2,
+      bottom: rect.bottom + teleportDistance / 2,
+    };
+  }
+
+  const ownerWindow = getOwnerWindow(element);
+  const visualViewport = ownerWindow?.visualViewport;
+
+  if (visualViewport) {
+    return {
+      left: visualViewport.offsetLeft,
+      top: visualViewport.offsetTop,
+      right: visualViewport.offsetLeft + visualViewport.width,
+      bottom: visualViewport.offsetTop + visualViewport.height,
+    };
+  }
+
+  return {
+    left: 0,
+    top: 0,
+    right: element.ownerDocument.documentElement.clientWidth,
+    bottom: element.ownerDocument.documentElement.clientHeight,
+  };
+}
+
+function getOwnerDocument(element: HTMLElement | null) {
+  if (element) {
+    return element.ownerDocument;
+  }
+
+  if (typeof document === 'undefined') {
+    return null;
+  }
+
+  return document;
+}
+
+function getOwnerWindow(element: HTMLElement | null) {
+  const ownerDocument = getOwnerDocument(element);
+  return ownerDocument?.defaultView ?? null;
+}
+
+function getPortalRoot(element: HTMLElement | null) {
+  return getOwnerDocument(element)?.body ?? null;
+}
+
+function isWebKitBrowser() {
+  return (
+    typeof navigator !== 'undefined' &&
+    /AppleWebKit/i.test(navigator.userAgent) &&
+    !/(Chrome|Chromium|Edg|OPR|Firefox|HappyDOM)/i.test(navigator.userAgent)
+  );
+}
+
+function CursorGrowIcon() {
+  return (
+    <svg
+      className="block h-3.5 w-6.5 fill-figma-bg-inverse stroke-figma-text-oninverse"
+      width="26"
+      height="14"
+      viewBox="0 0 26 14"
+      aria-hidden="true"
+    >
+      <path d="M20.5 5.5H6.5V2L1 7L6.5 12V8.5H20.5V12L26 7L20.5 2V5.5Z" />
+    </svg>
+  );
+}
+
+Scrubber.displayName = 'ValueField.Scrubber';
+
+export { Scrubber };
+export type { ScrubberProps };
diff --git a/packages/react/src/components/value-field/value-field.stories.tsx b/packages/react/src/components/value-field/value-field.stories.tsx
new file mode 100644
index 0000000..f5cc29c
--- /dev/null
+++ b/packages/react/src/components/value-field/value-field.stories.tsx
@@ -0,0 +1,322 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+import { OpacityIcon } from '~/icons';
+
+import { ValueField } from './index';
+import type { RGBA } from './types';
+
+const meta = {
+  component: ValueField.Numeric,
+  title: 'Components/Value Field',
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ValueField.Numeric>;
+
+type NumericStory = StoryObj<typeof ValueField.Numeric>;
+type NumericSelectStory = StoryObj<typeof ValueField.NumericSelect>;
+type HexStory = StoryObj<typeof ValueField.Hex>;
+type Story = StoryObj;
+
+const NUMERIC_SELECT_OPTIONS = [10, 11, 12, 13, 14, 15, 16, 20, 24, 32, 36, 40, 48, 64, 96, 128];
+
+const Numeric: NumericStory = {
+  render() {
+    return <NumericField />;
+  },
+  argTypes: {
+    value: {
+      control: false,
+    },
+    min: {
+      control: 'number',
+    },
+    max: {
+      control: 'number',
+    },
+    precision: {
+      control: 'number',
+    },
+    suffix: {
+      control: 'text',
+    },
+    smallNudge: {
+      control: 'number',
+    },
+    bigNudge: {
+      control: 'number',
+    },
+  },
+};
+
+const Hex: HexStory = {
+  render() {
+    return <HexField />;
+  },
+};
+
+const NumericSelect: NumericSelectStory = {
+  render() {
+    return <NumericSelectField initialValue={20} />;
+  },
+};
+
+const NumericSelectOutOfOptions: NumericSelectStory = {
+  render() {
+    return <NumericSelectField initialValue={21} />;
+  },
+};
+
+const NumericSelectHighlightPreview: NumericSelectStory = {
+  render() {
+    return <NumericSelectPreviewField />;
+  },
+};
+
+const WithLabel: Story = {
+  render() {
+    return <LabeledField />;
+  },
+};
+
+const WithIcon: Story = {
+  render() {
+    return <IconField />;
+  },
+};
+
+const MultiInput: Story = {
+  render() {
+    return <RgbaFields />;
+  },
+};
+
+const Rgba: Story = {
+  render() {
+    return <RgbaFields />;
+  },
+};
+
+const HexWithAlpha: Story = {
+  render() {
+    return <HexWithAlphaField />;
+  },
+};
+
+function NumericField() {
+  const [value, setValue] = useState(0);
+
+  return (
+    <ValueField.Root style={{ width: 100 }}>
+      <ValueField.Scrubber />
+      <ValueField.Numeric
+        value={value}
+        onChange={setValue}
+      />
+    </ValueField.Root>
+  );
+}
+
+function NumericSelectField(props: { initialValue: number }) {
+  const [value, setValue] = useState(props.initialValue);
+
+  return (
+    <ValueField.NumericSelect
+      value={value}
+      onChange={setValue}
+      options={NUMERIC_SELECT_OPTIONS}
+      style={{ width: 296 }}
+      min={0}
+      precision={0}
+    />
+  );
+}
+
+function NumericSelectPreviewField() {
+  const [value, setValue] = useState(20);
+  const [highlightedValue, setHighlightedValue] = useState<number>();
+  const previewSize = highlightedValue ?? value;
+
+  return (
+    <div className="flex flex-col gap-4">
+      <ValueField.NumericSelect
+        value={value}
+        onChange={setValue}
+        onItemHighlighted={setHighlightedValue}
+        options={NUMERIC_SELECT_OPTIONS}
+        style={{ width: 296 }}
+        min={0}
+        precision={0}
+      />
+      <div style={{ fontSize: previewSize, lineHeight: 1.2 }}>Preview {previewSize}</div>
+    </div>
+  );
+}
+
+function HexField() {
+  const [rgba, setRgba] = useState<RGBA>({ r: 0, g: 0, b: 0, a: 1 });
+
+  return (
+    <ValueField.Root style={{ width: 100 }}>
+      <ValueField.Hex
+        value={rgba}
+        onChange={setRgba}
+      />
+    </ValueField.Root>
+  );
+}
+
+function LabeledField() {
+  const [value, setValue] = useState(0);
+
+  return (
+    <ValueField.Root style={{ width: 100 }}>
+      <ValueField.Scrubber>
+        <ValueField.Label>X</ValueField.Label>
+      </ValueField.Scrubber>
+      <ValueField.Numeric
+        value={value}
+        onChange={setValue}
+      />
+    </ValueField.Root>
+  );
+}
+
+function IconField() {
+  const [value, setValue] = useState(0);
+
+  return (
+    <ValueField.Root style={{ width: 100 }}>
+      <ValueField.Scrubber>
+        <ValueField.Label>
+          <OpacityIcon size="4" />
+        </ValueField.Label>
+      </ValueField.Scrubber>
+      <ValueField.Numeric
+        value={value}
+        onChange={setValue}
+      />
+    </ValueField.Root>
+  );
+}
+
+function RgbaFields() {
+  const [rgba, setRgba] = useState<RGBA>({ r: 1, g: 1, b: 1, a: 1 });
+
+  function setRed(r: number) {
+    setRgba((rgba) => ({ ...rgba, r }));
+  }
+
+  function setGreen(g: number) {
+    setRgba((rgba) => ({ ...rgba, g }));
+  }
+
+  function setBlue(b: number) {
+    setRgba((rgba) => ({ ...rgba, b }));
+  }
+
+  function setAlpha(a: number) {
+    setRgba((rgba) => ({ ...rgba, a }));
+  }
+
+  return (
+    <div style={{ width: 160 }}>
+      <ValueField.Multi>
+        <ValueField.Root>
+          <ValueField.Scrubber />
+          <ValueField.Numeric
+            value={rgba.r}
+            onChange={setRed}
+            min={0}
+            max={1}
+            targetRange={[0, 255]}
+            precision={0}
+          />
+        </ValueField.Root>
+        <ValueField.Root>
+          <ValueField.Scrubber />
+          <ValueField.Numeric
+            value={rgba.g}
+            onChange={setGreen}
+            min={0}
+            max={1}
+            targetRange={[0, 255]}
+            precision={0}
+          />
+        </ValueField.Root>
+        <ValueField.Root>
+          <ValueField.Scrubber />
+          <ValueField.Numeric
+            value={rgba.b}
+            onChange={setBlue}
+            min={0}
+            max={1}
+            targetRange={[0, 255]}
+            precision={0}
+          />
+        </ValueField.Root>
+        <ValueField.Root style={{ flex: '0 0 48px' }}>
+          <ValueField.Scrubber />
+          <ValueField.Numeric
+            value={rgba.a}
+            onChange={setAlpha}
+            min={0}
+            max={1}
+            targetRange={[0, 100]}
+            precision={2}
+            suffix="%"
+          />
+        </ValueField.Root>
+      </ValueField.Multi>
+    </div>
+  );
+}
+
+function HexWithAlphaField() {
+  const [rgba, setRgba] = useState<RGBA>({ r: 1, g: 1, b: 1, a: 1 });
+
+  function setAlpha(a: number) {
+    setRgba((rgba) => ({ ...rgba, a }));
+  }
+
+  return (
+    <div style={{ width: 160 }}>
+      <ValueField.Multi>
+        <ValueField.Root>
+          <ValueField.Hex
+            value={rgba}
+            onChange={setRgba}
+          />
+        </ValueField.Root>
+        <ValueField.Root style={{ flex: '0 0 62px' }}>
+          <ValueField.Numeric
+            value={rgba.a}
+            onChange={setAlpha}
+            min={0}
+            max={1}
+            targetRange={[0, 100]}
+            allowedUnits={['%']}
+            precision={2}
+          />
+          <ValueField.Label>%</ValueField.Label>
+        </ValueField.Root>
+      </ValueField.Multi>
+    </div>
+  );
+}
+
+export default meta;
+export {
+  Hex,
+  HexWithAlpha,
+  MultiInput,
+  Numeric,
+  NumericSelect,
+  NumericSelectHighlightPreview,
+  NumericSelectOutOfOptions,
+  Rgba,
+  WithIcon,
+  WithLabel,
+};
diff --git a/packages/react/src/components/value-field/value-field.ts b/packages/react/src/components/value-field/value-field.ts
new file mode 100644
index 0000000..7b70e1e
--- /dev/null
+++ b/packages/react/src/components/value-field/value-field.ts
@@ -0,0 +1,13 @@
+export { Label, Multi, Root } from './value-field-elements';
+export { Numeric } from './value-field-numeric';
+export { NumericSelect } from './value-field-numeric-select';
+export { Hex } from './value-field-hex';
+export { Scrubber } from './value-field-scrubber';
+export { Base } from './value-field-base';
+export type { LabelProps, MultiProps, RootProps } from './value-field-elements';
+export type { NumericProps } from './value-field-numeric';
+export type { NumericSelectProps } from './value-field-numeric-select';
+export type { HexProps } from './value-field-hex';
+export type { ScrubberProps } from './value-field-scrubber';
+export type { BaseProps } from './value-field-base';
+export type { RGBA } from './types';
diff --git a/packages/react/src/components/variable-chip/index.ts b/packages/react/src/components/variable-chip/index.ts
new file mode 100644
index 0000000..daa855c
--- /dev/null
+++ b/packages/react/src/components/variable-chip/index.ts
@@ -0,0 +1 @@
+export * from './variable-chip';
diff --git a/packages/react/src/components/variable-chip/variable-chip.stories.tsx b/packages/react/src/components/variable-chip/variable-chip.stories.tsx
new file mode 100644
index 0000000..1b942f1
--- /dev/null
+++ b/packages/react/src/components/variable-chip/variable-chip.stories.tsx
@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { LinkBrokenIcon } from '~/icons';
+import { cn } from '~/utils';
+
+import { VariableCell, VariableChip } from './variable-chip';
+
+const meta = {
+  title: 'Components/VariableChip',
+  component: VariableChip,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    children: '24',
+  },
+} satisfies Meta<React.ComponentPropsWithRef<typeof VariableChip>>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+function Field({
+  state = 'default',
+  detach,
+  children,
+}: {
+  state?: 'default' | 'hover' | 'focus';
+  detach?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      className={cn(
+        'flex h-6 w-22 items-center gap-1 rounded-figma-md bg-figma-secondary pl-1 pr-2',
+        '-outline-offset-1 outline-1 outline-solid',
+        state === 'focus'
+          ? 'outline-figma-border-selected'
+          : state === 'hover'
+            ? 'outline-figma-border'
+            : 'outline-transparent',
+      )}
+    >
+      <span className="w-4 shrink-0 text-center text-figma-body-medium text-figma-secondary">
+        X
+      </span>
+      {children}
+      <LinkBrokenIcon
+        className={cn('ml-auto size-4 shrink-0 icon-figma', !detach && 'invisible')}
+      />
+    </div>
+  );
+}
+
+export const States: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Field>
+        <VariableChip>24</VariableChip>
+      </Field>
+      <Field
+        state="hover"
+        detach
+      >
+        <VariableChip>24</VariableChip>
+      </Field>
+      <Field>
+        <VariableChip selected>24</VariableChip>
+      </Field>
+      <Field>
+        <VariableChip onSelected>24</VariableChip>
+      </Field>
+      <Field>
+        <VariableChip variant="sunken">24</VariableChip>
+      </Field>
+      <Field>
+        <VariableChip
+          variant="sunken"
+          disabled
+        >
+          24
+        </VariableChip>
+      </Field>
+      <Field>
+        <VariableChip disabled>24</VariableChip>
+      </Field>
+      <Field>
+        <VariableChip variant="sunken">24</VariableChip>
+      </Field>
+    </div>
+  ),
+};
+
+export const InFocusedField: Story = {
+  render: () => (
+    <Field
+      state="focus"
+      detach
+    >
+      <VariableChip selected>24</VariableChip>
+    </Field>
+  ),
+};
+
+/**
+ * The spec's `Variable Cell` — a 24px bordered row next to fields that
+ * accept a variable binding.
+ */
+export const Cell: Story = {
+  render: () => <VariableCell>Value</VariableCell>,
+};
+
+export default meta;
diff --git a/packages/react/src/components/variable-chip/variable-chip.tsx b/packages/react/src/components/variable-chip/variable-chip.tsx
new file mode 100644
index 0000000..7f14f8e
--- /dev/null
+++ b/packages/react/src/components/variable-chip/variable-chip.tsx
@@ -0,0 +1,103 @@
+import { VariableIcon } from '~/icons';
+import { cn } from '~/utils';
+
+interface VariableChipProps extends React.ComponentPropsWithRef<'span'> {
+  /**
+   * `sunken` matches the chip fill to the surrounding secondary field —
+   * UI3 "Soft Deleted", "Value not rendered" and "Disabled Secondary".
+   * `elevated` is the default white-on-field pill.
+   */
+  variant?: 'elevated' | 'sunken';
+  /**
+   * UI3 "Selected" — light `bg-selected` fill inside a `border-selected`
+   * ring. A field focused with a variable applied auto-selects its pill.
+   */
+  selected?: boolean;
+  /**
+   * UI3 "On Selected" — solid `bg-onselected` fill.
+   */
+  onSelected?: boolean;
+  disabled?: boolean;
+}
+
+/**
+ * The pill that represents an applied variable inside an input field
+ * (UI3 "Variable Applied Chips").
+ */
+function VariableChip({
+  variant = 'elevated',
+  selected,
+  onSelected,
+  disabled,
+  className,
+  children,
+  ref,
+  ...props
+}: VariableChipProps) {
+  return (
+    <span
+      ref={ref}
+      data-variant={variant}
+      data-selected={selected || undefined}
+      data-on-selected={onSelected || undefined}
+      data-disabled={disabled || undefined}
+      className={cn(
+        'inline-flex h-4 select-none items-center truncate rounded-figma-md border px-1',
+        'text-figma-body-medium',
+        onSelected
+          ? 'border-figma-onselected bg-figma-onselected'
+          : selected
+            ? 'border-figma-border-selected bg-figma-selected'
+            : variant === 'sunken'
+              ? cn('bg-figma-secondary', disabled ? 'border-figma-disabled' : 'border-figma')
+              : cn(
+                  'bg-figma',
+                  disabled ? 'border-figma-disabled' : 'border-figma',
+                  !disabled && 'hover:bg-figma-tertiary',
+                ),
+        disabled ? 'text-figma-disabled' : 'text-figma',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}
+
+VariableChip.displayName = 'VariableChip';
+
+interface VariableCellProps extends React.ComponentPropsWithRef<'span'> {
+  /**
+   * Leading 24px icon cell — defaults to the spec's `icon.24.variable.small`.
+   */
+  icon?: React.ReactNode;
+}
+
+/**
+ * The spec's `Variable Cell` — a 24px bordered row pairing a variable icon
+ * with a label, used next to fields that accept variables.
+ */
+function VariableCell({ className, icon, children, ref, ...props }: VariableCellProps) {
+  return (
+    <span
+      ref={ref}
+      className={cn(
+        'inline-flex h-6 select-none items-center rounded-figma-md border border-figma bg-figma pr-1',
+        'text-figma-body-medium text-figma',
+        className,
+      )}
+      {...props}
+    >
+      <span className="flex size-6 shrink-0 items-center justify-center icon-figma-secondary">
+        {icon ?? <VariableIcon />}
+      </span>
+      {children}
+    </span>
+  );
+}
+
+VariableCell.displayName = 'VariableCell';
+
+export { VariableChip, VariableCell };
+export type { VariableCellProps, VariableChipProps };
diff --git a/packages/react/src/components/visual-bell/index.ts b/packages/react/src/components/visual-bell/index.ts
new file mode 100644
index 0000000..816c2fe
--- /dev/null
+++ b/packages/react/src/components/visual-bell/index.ts
@@ -0,0 +1 @@
+export * as VisualBell from './visual-bell';
diff --git a/packages/react/src/components/visual-bell/visual-bell.stories.tsx b/packages/react/src/components/visual-bell/visual-bell.stories.tsx
new file mode 100644
index 0000000..4b82309
--- /dev/null
+++ b/packages/react/src/components/visual-bell/visual-bell.stories.tsx
@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { CircleIcon, DrawIcon } from '~/icons';
+
+import * as VisualBell from './visual-bell';
+
+const meta = {
+  title: 'Components/VisualBell',
+  component: VisualBell.Root,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    color: 'default',
+  },
+} satisfies Meta<React.ComponentPropsWithRef<typeof VisualBell.Root>>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <VisualBell.Root {...args}>
+      <VisualBell.Label icon={<CircleIcon size="6" />}>Default messaging bell</VisualBell.Label>
+      <VisualBell.Actions>
+        <VisualBell.Action>Action</VisualBell.Action>
+        <VisualBell.Action>Action</VisualBell.Action>
+      </VisualBell.Actions>
+      <VisualBell.Dismiss />
+    </VisualBell.Root>
+  ),
+};
+
+export const MessageOnly: Story = {
+  render: (args) => (
+    <VisualBell.Root {...args}>
+      <VisualBell.Label>Message only</VisualBell.Label>
+    </VisualBell.Root>
+  ),
+};
+
+export const ExplicitDismiss: Story = {
+  render: (args) => (
+    <VisualBell.Root {...args}>
+      <VisualBell.Label>Message with explicit dismiss</VisualBell.Label>
+      <VisualBell.Dismiss />
+    </VisualBell.Root>
+  ),
+};
+
+export const Danger: Story = {
+  args: {
+    color: 'danger',
+  },
+  render: Default.render,
+};
+
+export const Spotlight: Story = {
+  render: () => (
+    <div className="flex flex-col items-start gap-3">
+      {(['brand', 'success', 'component', 'danger'] as const).map((color) => (
+        <VisualBell.Root
+          key={color}
+          color={color}
+        >
+          <VisualBell.Label icon={<DrawIcon size="6" />}>
+            Spotlight on Tim Van Damme
+          </VisualBell.Label>
+          <VisualBell.Actions>
+            <VisualBell.Action>Follow</VisualBell.Action>
+          </VisualBell.Actions>
+          <VisualBell.Dismiss />
+        </VisualBell.Root>
+      ))}
+    </div>
+  ),
+};
+
+export default meta;
diff --git a/packages/react/src/components/visual-bell/visual-bell.tsx b/packages/react/src/components/visual-bell/visual-bell.tsx
new file mode 100644
index 0000000..cefc412
--- /dev/null
+++ b/packages/react/src/components/visual-bell/visual-bell.tsx
@@ -0,0 +1,127 @@
+import { CloseIcon } from '~/icons';
+import { cn } from '~/utils';
+
+type VisualBellColor = 'default' | 'danger' | 'brand' | 'success' | 'component';
+
+const colors: Record<VisualBellColor, string> = {
+  default: 'bg-figma text-figma [--bell-edge:var(--figma-color-bordertranslucent)]',
+  danger: 'bg-figma-danger text-figma-ondanger [--bell-edge:var(--figma-color-bordertranslucent)]',
+  brand: 'bg-figma-brand text-figma-onbrand [--bell-edge:var(--figma-color-bordertranslucent)]',
+  success:
+    'bg-figma-success text-figma-onsuccess [--bell-edge:var(--figma-color-bordertranslucent)]',
+  component:
+    'bg-figma-component text-figma-oncomponent [--bell-edge:var(--figma-color-bordertranslucent)]',
+};
+
+interface VisualBellRootProps extends React.ComponentPropsWithRef<'div'> {
+  color?: VisualBellColor;
+}
+
+/**
+ * A transient message pill overlaid on the page (UI3 "Visual Bell") — a label
+ * zone plus a CTA rail of actions and dismiss.
+ */
+function VisualBellRoot({ color = 'default', className, ref, ...props }: VisualBellRootProps) {
+  return (
+    <div
+      ref={ref}
+      // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- a div pill is intentional; role=status announces it politely
+      role="status"
+      className={cn(
+        'inline-flex h-10 items-center gap-2 overflow-hidden rounded-figma-lg px-2 text-figma-body-medium shadow-figma-elevation-100',
+        colors[color],
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+VisualBellRoot.displayName = 'VisualBellRoot';
+
+interface VisualBellLabelProps extends React.ComponentPropsWithRef<'span'> {
+  /**
+   * Leading 24px status icon.
+   */
+  icon?: React.ReactNode;
+}
+
+function VisualBellLabel({ icon, className, children, ref, ...props }: VisualBellLabelProps) {
+  return (
+    <span
+      ref={ref}
+      className={cn('flex items-center gap-1 font-figma-strong', className)}
+      {...props}
+    >
+      {icon}
+      {children}
+    </span>
+  );
+}
+
+VisualBellLabel.displayName = 'VisualBellLabel';
+
+function VisualBellActions({ className, ref, ...props }: React.ComponentPropsWithRef<'span'>) {
+  return (
+    <span
+      ref={ref}
+      className={cn('flex items-center gap-2', className)}
+      {...props}
+    />
+  );
+}
+
+VisualBellActions.displayName = 'VisualBellActions';
+
+function VisualBellAction({
+  className,
+  ref,
+  type = 'button',
+  ...props
+}: React.ComponentPropsWithRef<'button'>) {
+  return (
+    <button
+      ref={ref}
+      type={type}
+      className={cn(
+        'flex h-6 items-center rounded-figma-md border border-(--bell-edge) px-2 text-figma-body-medium',
+        'hover:bg-figma-bghovertransparent active:bg-figma-bgtransparent-secondary-hover',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+VisualBellAction.displayName = 'VisualBellAction';
+
+function VisualBellDismiss({ className, ref, ...props }: React.ComponentPropsWithRef<'button'>) {
+  return (
+    <>
+      <span className="w-px self-stretch bg-(--bell-edge)" />
+      <button
+        ref={ref}
+        type="button"
+        aria-label="Dismiss"
+        className={cn(
+          'flex size-6 items-center justify-center rounded-figma-md',
+          'hover:bg-figma-bghovertransparent active:bg-figma-bgtransparent-secondary-hover',
+          className,
+        )}
+        {...props}
+      >
+        <CloseIcon size="6" />
+      </button>
+    </>
+  );
+}
+
+VisualBellDismiss.displayName = 'VisualBellDismiss';
+
+export {
+  VisualBellRoot as Root,
+  VisualBellLabel as Label,
+  VisualBellActions as Actions,
+  VisualBellAction as Action,
+  VisualBellDismiss as Dismiss,
+};
diff --git a/packages/react/src/icons/actions.tsx b/packages/react/src/icons/actions.tsx
new file mode 100644
index 0000000..5374c9b
--- /dev/null
+++ b/packages/react/src/icons/actions.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const ActionsIcon = createIcon({
+  displayName: 'Actions',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M9 13a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2zm7.5 0a.5.5 0 0 1 .5.5V16h2.5a.5.5 0 0 1 0 1H17v2.5a.5.5 0 0 1-1 0V17h-2.5a.5.5 0 0 1 0-1H16v-2.5a.5.5 0 0 1 .5-.5M6 14a1 1 0 0 0-1 1v3a1 1 0 0 0 .897.995L6 19h3a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1zm.87-10.275a1 1 0 0 1 1.337.068l3 3a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414l3-3zM16.5 4a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7m-12 3.5 3 3 3-3-3-3zm12-2.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/align-bottom.tsx b/packages/react/src/icons/align-bottom.tsx
new file mode 100644
index 0000000..a974c62
--- /dev/null
+++ b/packages/react/src/icons/align-bottom.tsx
@@ -0,0 +1,19 @@
+import { createIcon } from './create-icon';
+
+export const AlignBottomIcon = createIcon({
+  displayName: 'AlignBottom',
+  path: (
+    <>
+      <path
+        fill="var(--color-icon, currentColor)"
+        fillRule="evenodd"
+        d="M10 6.75A.75.75 0 0 0 9.25 6h-.5a.75.75 0 0 0-.75.75v8.5c0 .414.336.75.75.75h.5a.75.75 0 0 0 .75-.75zm5 4a.75.75 0 0 0-.75-.75h-.5a.75.75 0 0 0-.75.75v4.5c0 .414.336.75.75.75h.5a.75.75 0 0 0 .75-.75z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="var(--color-icon-tertiary)"
+        d="M17.5 18a.5.5 0 0 1 0 1h-12a.5.5 0 0 1 0-1z"
+      />
+    </>
+  ),
+});
diff --git a/packages/react/src/icons/align-horizontal-center.tsx b/packages/react/src/icons/align-horizontal-center.tsx
new file mode 100644
index 0000000..c73ac53
--- /dev/null
+++ b/packages/react/src/icons/align-horizontal-center.tsx
@@ -0,0 +1,21 @@
+import { createIcon } from './create-icon';
+
+export const AlignHorizontalCenterIcon = createIcon({
+  displayName: 'AlignHorizontalCenter',
+  path: (
+    <>
+      <path
+        fill="var(--color-icon, currentColor)"
+        fillRule="evenodd"
+        d="M17.25 10a.75.75 0 0 0 .75-.75v-.5a.75.75 0 0 0-.75-.75h-9.5a.75.75 0 0 0-.75.75v.5c0 .414.336.75.75.75zm-2 5a.75.75 0 0 0 .75-.75v-.5a.75.75 0 0 0-.75-.75h-5.5a.75.75 0 0 0-.75.75v.5c0 .414.336.75.75.75z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="var(--color-icon-tertiary)"
+        fillRule="evenodd"
+        d="M13 17.5a.5.5 0 0 1-1 0V15h1zm0-4.5v-3h-1v3zm0-7.5V8h-1V5.5a.5.5 0 0 1 1 0"
+        clipRule="evenodd"
+      />
+    </>
+  ),
+});
diff --git a/packages/react/src/icons/align-left.tsx b/packages/react/src/icons/align-left.tsx
new file mode 100644
index 0000000..0c0aa45
--- /dev/null
+++ b/packages/react/src/icons/align-left.tsx
@@ -0,0 +1,19 @@
+import { createIcon } from './create-icon';
+
+export const AlignLeftIcon = createIcon({
+  displayName: 'AlignLeft',
+  path: (
+    <>
+      <path
+        fill="var(--color-icon, currentColor)"
+        fillRule="evenodd"
+        d="M17.25 10a.75.75 0 0 0 .75-.75v-.5a.75.75 0 0 0-.75-.75h-8.5a.75.75 0 0 0-.75.75v.5c0 .414.336.75.75.75zm-4 5a.75.75 0 0 0 .75-.75v-.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0-.75.75v.5c0 .414.336.75.75.75z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="var(--color-icon-tertiary)"
+        d="M6 17.5a.5.5 0 0 1-1 0v-12a.5.5 0 0 1 1 0z"
+      />
+    </>
+  ),
+});
diff --git a/packages/react/src/icons/align-right.tsx b/packages/react/src/icons/align-right.tsx
new file mode 100644
index 0000000..c0b04e3
--- /dev/null
+++ b/packages/react/src/icons/align-right.tsx
@@ -0,0 +1,19 @@
+import { createIcon } from './create-icon';
+
+export const AlignRightIcon = createIcon({
+  displayName: 'AlignRight',
+  path: (
+    <>
+      <path
+        fill="var(--color-icon, currentColor)"
+        fillRule="evenodd"
+        d="M6.75 10A.75.75 0 0 1 6 9.25v-.5A.75.75 0 0 1 6.75 8h8.5a.75.75 0 0 1 .75.75v.5a.75.75 0 0 1-.75.75zm4 5a.75.75 0 0 1-.75-.75v-.5a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 .75.75v.5a.75.75 0 0 1-.75.75z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="var(--color-icon-tertiary)"
+        d="M18 17.5a.5.5 0 0 0 1 0v-12a.5.5 0 0 0-1 0z"
+      />
+    </>
+  ),
+});
diff --git a/packages/react/src/icons/align-top.tsx b/packages/react/src/icons/align-top.tsx
new file mode 100644
index 0000000..744c5bb
--- /dev/null
+++ b/packages/react/src/icons/align-top.tsx
@@ -0,0 +1,19 @@
+import { createIcon } from './create-icon';
+
+export const AlignTopIcon = createIcon({
+  displayName: 'AlignTop',
+  path: (
+    <>
+      <path
+        fill="var(--color-icon, currentColor)"
+        fillRule="evenodd"
+        d="M10 17.25a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1-.75-.75v-8.5A.75.75 0 0 1 8.75 8h.5a.75.75 0 0 1 .75.75zm5-4a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 .75.75z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="var(--color-icon-tertiary)"
+        d="M17.5 6a.5.5 0 0 0 0-1h-12a.5.5 0 0 0 0 1z"
+      />
+    </>
+  ),
+});
diff --git a/packages/react/src/icons/align-vertical-center.tsx b/packages/react/src/icons/align-vertical-center.tsx
new file mode 100644
index 0000000..da9f8ae
--- /dev/null
+++ b/packages/react/src/icons/align-vertical-center.tsx
@@ -0,0 +1,21 @@
+import { createIcon } from './create-icon';
+
+export const AlignVerticalCenterIcon = createIcon({
+  displayName: 'AlignVerticalCenter',
+  path: (
+    <>
+      <path
+        fill="var(--color-icon, currentColor)"
+        fillRule="evenodd"
+        d="M10 6.75A.75.75 0 0 0 9.25 6h-.5a.75.75 0 0 0-.75.75v9.5c0 .414.336.75.75.75h.5a.75.75 0 0 0 .75-.75zm5 2a.75.75 0 0 0-.75-.75h-.5a.75.75 0 0 0-.75.75v5.5c0 .414.336.75.75.75h.5a.75.75 0 0 0 .75-.75z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="var(--color-icon-tertiary)"
+        fillRule="evenodd"
+        d="M17.5 11a.5.5 0 0 1 0 1H15v-1zM13 11h-3v1h3zm-7.5 0H8v1H5.5a.5.5 0 0 1 0-1"
+        clipRule="evenodd"
+      />
+    </>
+  ),
+});
diff --git a/packages/react/src/icons/annotation.tsx b/packages/react/src/icons/annotation.tsx
new file mode 100644
index 0000000..03f325d
--- /dev/null
+++ b/packages/react/src/icons/annotation.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const AnnotationIcon = createIcon({
+  displayName: 'Annotation',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M16.8 5H8.2c-.577 0-.949 0-1.232.024-.272.022-.373.06-.422.085a1 1 0 0 0-.437.437c-.025.05-.063.15-.085.422C6 6.25 6 6.623 6 7.2v7.3a.5.5 0 0 1-1 0V7.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C6.52 4 7.08 4 8.2 4h8.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C20 5.52 20 6.08 20 7.2v8.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C18.48 19 17.92 19 16.8 19H9.5a.5.5 0 0 1 0-1h7.3c.577 0 .949 0 1.232-.024.272-.022.372-.06.422-.085a1 1 0 0 0 .437-.437c.025-.05.063-.15.085-.422C19 16.75 19 16.377 19 15.8V7.2c0-.577 0-.949-.024-1.232-.022-.272-.06-.373-.085-.422a1 1 0 0 0-.437-.437c-.05-.025-.15-.063-.422-.085C17.75 5 17.377 5 16.8 5M7 18.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m1 0a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0m1-5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5M9.5 9a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/aspect-ratio.tsx b/packages/react/src/icons/aspect-ratio.tsx
new file mode 100644
index 0000000..0056f5c
--- /dev/null
+++ b/packages/react/src/icons/aspect-ratio.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const AspectRatioIcon = createIcon({
+  displayName: 'AspectRatio',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M7.5 7h9a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5M6 7.5A1.5 1.5 0 0 1 7.5 6h9A1.5 1.5 0 0 1 18 7.5v9a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 6 16.5zM9.5 9a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0V10h1.5a.5.5 0 0 0 0-1zm5.5 3.5a.5.5 0 0 0-1 0V14h-1.5a.5.5 0 0 0 0 1h2a.5.5 0 0 0 .5-.5z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/auto-height.tsx b/packages/react/src/icons/auto-height.tsx
new file mode 100644
index 0000000..3340b97
--- /dev/null
+++ b/packages/react/src/icons/auto-height.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const AutoHeightIcon = createIcon({
+  displayName: 'AutoHeight',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M6.5 6a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-1 0v-11a.5.5 0 0 1 .5-.5m3 4h5a.5.5 0 1 0 0-1h-5a.5.5 0 0 0 0 1m5 2.5h-5a.5.5 0 1 1 0-1h5a.5.5 0 1 1 0 1m-5.5 2a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m9-8a.5.5 0 0 0-1 0v11a.5.5 0 0 0 1 0z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/auto-width.tsx b/packages/react/src/icons/auto-width.tsx
new file mode 100644
index 0000000..84ea92c
--- /dev/null
+++ b/packages/react/src/icons/auto-width.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const AutoWidthIcon = createIcon({
+  displayName: 'AutoWidth',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M7 6.5a.5.5 0 0 0-1 0v11a.5.5 0 0 0 1 0zm7.853 2.146a.5.5 0 1 0-.707.708l2.147 2.146H9.5a.5.5 0 0 0 0 1h6.793l-2.147 2.146a.5.5 0 0 0 .707.708l3-3a.5.5 0 0 0 0-.708z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/blend-mode.tsx b/packages/react/src/icons/blend-mode.tsx
new file mode 100644
index 0000000..3e1e95b
--- /dev/null
+++ b/packages/react/src/icons/blend-mode.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const BlendModeIcon = createIcon({
+  displayName: 'BlendMode',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M14.783 16.058C15.479 15.454 16 14.49 16 13c0-1.037-.597-2.328-1.493-3.631-.844-1.227-1.85-2.316-2.507-2.98-.658.664-1.662 1.753-2.507 2.98C8.597 10.673 8 11.964 8 13c0 1.491.521 2.454 1.217 3.058.72.623 1.721.943 2.783.943s2.063-.32 2.783-.944M12 18c2.5 0 5-1.5 5-5 0-2.712-3-6.023-4.353-7.378a.907.907 0 0 0-1.294 0C10 6.978 7 10.29 7 13.001c0 3.5 2.5 5 5 5"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/boolean.tsx b/packages/react/src/icons/boolean.tsx
new file mode 100644
index 0000000..b274d19
--- /dev/null
+++ b/packages/react/src/icons/boolean.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const BooleanIcon = createIcon({
+  displayName: 'Boolean',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M10 8h4a4 4 0 0 1 0 8h-4a4 4 0 0 1 0-8m-5 4a5 5 0 0 1 5-5h4a5 5 0 0 1 0 10h-4a5 5 0 0 1-5-5m5 2a2 2 0 1 1 0-4 2 2 0 0 1 0 4m-3-2a3 3 0 1 1 6 0 3 3 0 0 1-6 0"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/checkmark-indeterminate.tsx b/packages/react/src/icons/checkmark-indeterminate.tsx
new file mode 100644
index 0000000..7f76c19
--- /dev/null
+++ b/packages/react/src/icons/checkmark-indeterminate.tsx
@@ -0,0 +1,12 @@
+import { createIcon } from './create-icon';
+
+export const CheckmarkIndeterminateIcon = createIcon({
+  displayName: 'CheckmarkIndeterminate',
+  viewBox: '0 0 16 16',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M4 8c0-.27614.22386-.5.5-.5h7c.27614 0 .5.22386.5.5s-.22386.5-.5.5h-7c-.27614 0-.5-.22386-.5-.5Z"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/checkmark.tsx b/packages/react/src/icons/checkmark.tsx
new file mode 100644
index 0000000..64a3fc9
--- /dev/null
+++ b/packages/react/src/icons/checkmark.tsx
@@ -0,0 +1,14 @@
+import { createIcon } from './create-icon';
+
+export const CheckmarkIcon = createIcon({
+  displayName: 'Checkmark',
+  viewBox: '0 0 16 16',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11.777 4.08399C11.8873 4.1575 11.9639 4.27178 11.99 4.40172C12.016 4.53167 11.9894 4.66665 11.916 4.77699L7.91602 10.777C7.87506 10.8387 7.82091 10.8905 7.75748 10.9287C7.69405 10.9669 7.62294 10.9905 7.54926 10.9979C7.47559 11.0053 7.40119 10.9962 7.33146 10.9713C7.26172 10.9464 7.19839 10.9063 7.14602 10.854L4.14602 7.85399C4.09953 7.80751 4.06266 7.75232 4.0375 7.69158C4.01234 7.63084 3.99939 7.56574 3.99939 7.49999C3.99939 7.43425 4.01234 7.36915 4.0375 7.30841C4.06266 7.24767 4.09953 7.19248 4.14602 7.14599C4.19251 7.09951 4.2477 7.06263 4.30844 7.03747C4.36918 7.01231 4.43428 6.99936 4.50002 6.99936C4.56577 6.99936 4.63087 7.01231 4.6916 7.03747C4.75234 7.06263 4.80753 7.09951 4.85402 7.14599L7.42202 9.71599L11.084 4.22299C11.1575 4.11271 11.2718 4.03612 11.4018 4.01006C11.5317 3.98399 11.6667 4.01059 11.777 4.08399Z"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/chevron-down.tsx b/packages/react/src/icons/chevron-down.tsx
new file mode 100644
index 0000000..0f3d8cb
--- /dev/null
+++ b/packages/react/src/icons/chevron-down.tsx
@@ -0,0 +1,12 @@
+import { createIcon } from './create-icon';
+
+export const ChevronDownIcon = createIcon({
+  displayName: 'ChevronDown',
+  path: (
+    <path
+      stroke="var(--color-icon, currentColor)"
+      strokeLinecap="round"
+      d="M9.87897 11.121L12 13.243L14.121 11.12"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/chevron-left.tsx b/packages/react/src/icons/chevron-left.tsx
new file mode 100644
index 0000000..f67da99
--- /dev/null
+++ b/packages/react/src/icons/chevron-left.tsx
@@ -0,0 +1,12 @@
+import { createIcon } from './create-icon';
+
+export const ChevronLeftIcon = createIcon({
+  displayName: 'ChevronLeft',
+  path: (
+    <path
+      stroke="var(--color-icon, currentColor)"
+      strokeLinecap="round"
+      d="M12.879 9.879L10.757 12L12.88 14.121"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/chevron-right.tsx b/packages/react/src/icons/chevron-right.tsx
new file mode 100644
index 0000000..93998b1
--- /dev/null
+++ b/packages/react/src/icons/chevron-right.tsx
@@ -0,0 +1,12 @@
+import { createIcon } from './create-icon';
+
+export const ChevronRightIcon = createIcon({
+  displayName: 'ChevronRight',
+  path: (
+    <path
+      stroke="var(--color-icon, currentColor)"
+      strokeLinecap="round"
+      d="M11.121 14.121L13.243 12L11.12 9.879"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/chevron-up.tsx b/packages/react/src/icons/chevron-up.tsx
new file mode 100644
index 0000000..0a278e4
--- /dev/null
+++ b/packages/react/src/icons/chevron-up.tsx
@@ -0,0 +1,12 @@
+import { createIcon } from './create-icon';
+
+export const ChevronUpIcon = createIcon({
+  displayName: 'ChevronUp',
+  path: (
+    <path
+      stroke="var(--color-icon, currentColor)"
+      strokeLinecap="round"
+      d="M14.121 12.879L12 10.757L9.87903 12.88"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/circle.tsx b/packages/react/src/icons/circle.tsx
new file mode 100644
index 0000000..0649093
--- /dev/null
+++ b/packages/react/src/icons/circle.tsx
@@ -0,0 +1,14 @@
+import { createIcon } from './create-icon';
+
+export const CircleIcon = createIcon({
+  displayName: 'Circle',
+  viewBox: '0 0 16 16',
+  path: (
+    <circle
+      fill="var(--color-icon, currentColor)"
+      cx="8"
+      cy="8"
+      r="3"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/clear.tsx b/packages/react/src/icons/clear.tsx
new file mode 100644
index 0000000..f632428
--- /dev/null
+++ b/packages/react/src/icons/clear.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const ClearIcon = createIcon({
+  displayName: 'Clear',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M12 5a7 7 0 1 1 0 14 7 7 0 0 1 0-14m0 1a6 6 0 1 0 0 12 6 6 0 0 0 0-12m2.225 3.082a.5.5 0 0 1 .693.693l-.064.079L12.707 12l2.147 2.146.064.079a.5.5 0 0 1-.693.693l-.078-.064L12 12.707l-2.146 2.146a.5.5 0 1 1-.707-.707L11.293 12 9.147 9.854l-.065-.079a.5.5 0 0 1 .694-.693l.078.064L12 11.293l2.147-2.147z"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/close.tsx b/packages/react/src/icons/close.tsx
new file mode 100644
index 0000000..b30a1d6
--- /dev/null
+++ b/packages/react/src/icons/close.tsx
@@ -0,0 +1,12 @@
+import { createIcon } from './create-icon';
+
+export const CloseIcon = createIcon({
+  displayName: 'Close',
+  path: (
+    <path
+      stroke="var(--color-icon, currentColor)"
+      d="M16.5 7.5L12 12M12 12L7.5 16.5M12 12L7.5 7.5M12 12L16.5 16.5"
+      strokeLinecap="round"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/code.tsx b/packages/react/src/icons/code.tsx
new file mode 100644
index 0000000..16b9819
--- /dev/null
+++ b/packages/react/src/icons/code.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const CodeIcon = createIcon({
+  displayName: 'Code',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M13.631 6.018a.5.5 0 0 1 .367.513l-.016.1-3 11-.036.095a.5.5 0 0 1-.93-.358l3-11 .037-.095a.5.5 0 0 1 .578-.255M8.224 8.582a.501.501 0 0 1 .693.693l-.064.079L6.206 12l2.647 2.646a.5.5 0 1 1-.707.707l-3-3a.5.5 0 0 1 0-.707l3-3zm6.922.064a.5.5 0 0 1 .707 0l3 3a.5.5 0 0 1 0 .707l-3 3-.078.065a.5.5 0 0 1-.694-.693l.065-.079L17.792 12l-2.646-2.646a.5.5 0 0 1 0-.707"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/comment.tsx b/packages/react/src/icons/comment.tsx
new file mode 100644
index 0000000..1fba17b
--- /dev/null
+++ b/packages/react/src/icons/comment.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const CommentIcon = createIcon({
+  displayName: 'Comment',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M12.5 3a8.5 8.5 0 0 1 0 17H7.09c-.89 0-1.39 0-1.767-.121l-.154-.06a2 2 0 0 1-.906-.828l-.082-.16c-.136-.297-.17-.657-.178-1.248L4 16.909V11.5A8.5 8.5 0 0 1 12.5 3m0 1A7.5 7.5 0 0 0 5 11.5v5.41c0 .523 0 .861.02 1.12.018.247.05.34.07.385a1 1 0 0 0 .495.494c.045.02.138.053.386.072.258.019.596.019 1.12.019H12.5a7.5 7.5 0 0 0 0-15"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/component.tsx b/packages/react/src/icons/component.tsx
new file mode 100644
index 0000000..b07d7f4
--- /dev/null
+++ b/packages/react/src/icons/component.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const ComponentIcon = createIcon({
+  displayName: 'Component',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M11.116 13.592a1.25 1.25 0 0 1 1.768 0l1.637 1.637a1.25 1.25 0 0 1 0 1.768l-1.637 1.638-.095.085a1.25 1.25 0 0 1-1.578 0l-.095-.085-1.638-1.64a1.25 1.25 0 0 1-.085-1.672l.085-.095zm1.06.707a.25.25 0 0 0-.353 0l-1.638 1.636a.25.25 0 0 0 0 .354l1.638 1.639a.25.25 0 0 0 .354 0l1.637-1.638a.25.25 0 0 0 0-.354zm3.053-4.82a1.25 1.25 0 0 1 1.767 0l1.639 1.637a1.25 1.25 0 0 1 0 1.768l-1.639 1.638-.095.086a1.25 1.25 0 0 1-1.578 0l-.095-.086-1.637-1.637a1.25 1.25 0 0 1-.086-1.673l.086-.095zm-8.226 0a1.25 1.25 0 0 1 1.767 0l1.64 1.638a1.25 1.25 0 0 1 0 1.768L8.77 14.52a1.25 1.25 0 0 1-1.672.086l-.095-.086-1.638-1.637a1.25 1.25 0 0 1-.086-1.673l.086-.095zm9.286.706a.25.25 0 0 0-.354 0l-1.637 1.64a.25.25 0 0 0 0 .353l1.637 1.637a.25.25 0 0 0 .354 0l1.639-1.638a.25.25 0 0 0 0-.354zm-8.226 0a.25.25 0 0 0-.353 0l-1.637 1.638a.25.25 0 0 0 0 .354l1.638 1.637a.25.25 0 0 0 .353 0l1.638-1.636a.25.25 0 0 0 0-.354zm3.053-4.819a1.25 1.25 0 0 1 1.768 0l1.637 1.638a1.25 1.25 0 0 1 0 1.767l-1.637 1.639-.095.085a1.25 1.25 0 0 1-1.578 0l-.095-.085-1.639-1.639a1.25 1.25 0 0 1-.085-1.673l.085-.094zm1.06.707a.25.25 0 0 0-.353 0l-1.639 1.638a.25.25 0 0 0 0 .353l1.64 1.639a.25.25 0 0 0 .353 0l1.637-1.639a.25.25 0 0 0 0-.353z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/constraint-left.tsx b/packages/react/src/icons/constraint-left.tsx
new file mode 100644
index 0000000..8e717f7
--- /dev/null
+++ b/packages/react/src/icons/constraint-left.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const ConstraintLeftIcon = createIcon({
+  displayName: 'ConstraintLeft',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M16.5 8.5a.5.5 0 0 1 .5.5v5a.5.5 0 1 1-1 0v-2H7v2a.5.5 0 0 1-1 0V9a.5.5 0 0 1 1 0v2h9V9a.5.5 0 0 1 .5-.5"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/constraint-top.tsx b/packages/react/src/icons/constraint-top.tsx
new file mode 100644
index 0000000..5d9d08a
--- /dev/null
+++ b/packages/react/src/icons/constraint-top.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const ConstraintTopIcon = createIcon({
+  displayName: 'ConstraintTop',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M8.5 6.5A.5.5 0 0 1 9 6h5a.5.5 0 0 1 0 1h-2v9h2a.5.5 0 0 1 0 1H9a.5.5 0 0 1 0-1h2V7H9a.5.5 0 0 1-.5-.5"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/corner-radius.tsx b/packages/react/src/icons/corner-radius.tsx
new file mode 100644
index 0000000..d8f8d6c
--- /dev/null
+++ b/packages/react/src/icons/corner-radius.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const CornerRadiusIcon = createIcon({
+  displayName: 'CornerRadius',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M6.5 14a.5.5 0 0 1 .5.5v.6c0 .428 0 .72.019.945.017.219.05.331.09.41.096.187.249.34.437.436.078.04.19.073.41.09.224.019.516.019.944.019h.6a.5.5 0 0 1 0 1h-.621c-.402 0-.734 0-1.005-.023-.281-.022-.54-.071-.782-.195a2 2 0 0 1-.874-.874c-.124-.242-.173-.501-.196-.782A13 13 0 0 1 6 15.121V14.5a.5.5 0 0 1 .5-.5m11 0a.5.5 0 0 1 .5.5v.621c0 .402 0 .734-.023 1.005-.022.281-.071.54-.195.782a2 2 0 0 1-.874.874c-.242.124-.501.173-.782.195-.27.023-.603.023-1.005.023H14.5a.5.5 0 0 1 0-1h.6c.428 0 .72 0 .945-.019.219-.018.331-.05.41-.09a1 1 0 0 0 .436-.437c.04-.078.073-.19.09-.41.019-.224.019-.516.019-.944v-.6a.5.5 0 0 1 .5-.5m-8-8a.5.5 0 0 1 0 1h-.6c-.428 0-.719 0-.944.019-.22.017-.332.05-.41.09a1 1 0 0 0-.437.437c-.04.078-.073.19-.09.41C7 8.18 7 8.471 7 8.9v.6a.5.5 0 0 1-1 0v-.621c0-.402 0-.734.022-1.005.023-.281.072-.54.196-.782a2 2 0 0 1 .874-.874c.242-.124.501-.173.782-.196C8.144 6 8.477 6 8.88 6zm5.621 0c.402 0 .734 0 1.005.022.281.023.54.072.782.196a2 2 0 0 1 .874.874c.124.242.173.501.195.782.023.27.023.603.023 1.005V9.5a.5.5 0 0 1-1 0v-.6c0-.428 0-.72-.019-.945-.018-.219-.05-.33-.09-.41a1 1 0 0 0-.437-.436c-.078-.04-.19-.073-.41-.09A13 13 0 0 0 15.1 7h-.6a.5.5 0 0 1 0-1z"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/create-icon.tsx b/packages/react/src/icons/create-icon.tsx
new file mode 100644
index 0000000..05f9134
--- /dev/null
+++ b/packages/react/src/icons/create-icon.tsx
@@ -0,0 +1,64 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '~/utils';
+
+const iconVariants = cva('block shrink-0 pointer-events-none', {
+  variants: {
+    size: {
+      '1': 'size-1',
+      '2': 'size-2',
+      '2.5': 'size-2.5',
+      '3': 'size-3',
+      '3.5': 'size-3.5',
+      '4': 'size-4',
+      '5': 'size-5',
+      '6': 'size-6',
+      '7': 'size-7',
+      '8': 'size-8',
+      '9': 'size-9',
+      '10': 'size-10',
+    },
+  },
+  defaultVariants: {
+    size: '6',
+  },
+});
+
+type IconProps = React.ComponentPropsWithRef<'svg'> & VariantProps<typeof iconVariants>;
+
+interface IconOptions {
+  path: React.ReactElement;
+  viewBox?: string;
+  displayName?: string;
+}
+
+/**
+ * Creates a Figma UI3 icon component. Paths color through the
+ * `--color-icon` context variable (set via `icon-figma-*` utilities),
+ * so containers can recolor icons without touching text styles.
+ */
+function createIcon(options: IconOptions) {
+  const { path, viewBox = '0 0 24 24', displayName } = options;
+
+  function Icon({ className, size, ref, ...props }: IconProps) {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        ref={ref}
+        viewBox={viewBox}
+        fill="none"
+        aria-hidden="true"
+        className={cn(iconVariants({ size }), className)}
+        {...props}
+      >
+        {path}
+      </svg>
+    );
+  }
+
+  Icon.displayName = displayName ?? 'Icon';
+  return Icon;
+}
+
+export { createIcon };
+export type { IconProps };
diff --git a/packages/react/src/icons/design.tsx b/packages/react/src/icons/design.tsx
new file mode 100644
index 0000000..a70469e
--- /dev/null
+++ b/packages/react/src/icons/design.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const DesignIcon = createIcon({
+  displayName: 'Design',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M12.11 13.956c-.44-1.121.618-2.23 1.738-1.885l.108.038 4.15 1.63.115.051c1.136.556 1.027 2.254-.218 2.637l-1.205.372-.37 1.205c-.397 1.29-2.196 1.356-2.689.102zm1.48-.916a.425.425 0 0 0-.55.55l1.63 4.15c.138.35.618.356.775.038l.027-.068.526-1.711 1.711-.527a.425.425 0 0 0 .031-.802zM16.5 6A1.5 1.5 0 0 1 18 7.5v1a1.5 1.5 0 0 1-1.5 1.5H10v6.5A1.5 1.5 0 0 1 8.5 18h-1A1.5 1.5 0 0 1 6 16.5v-9A1.5 1.5 0 0 1 7.5 6zM7 16.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V15h-.5a.5.5 0 0 1 0-1H9v-1h-.5a.5.5 0 0 1 0-1H9v-2H7zM7.5 7a.5.5 0 0 0-.5.5V9h2V7zM10 9h2v-.5a.5.5 0 0 1 1 0V9h1v-.5a.5.5 0 0 1 1 0V9h1.5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5H10z"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/draw.tsx b/packages/react/src/icons/draw.tsx
new file mode 100644
index 0000000..7dacae2
--- /dev/null
+++ b/packages/react/src/icons/draw.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const DrawIcon = createIcon({
+  displayName: 'Draw',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M13.407 5.06c.61-.123 1.227-.079 1.657.343l.135.15c.277.361.316.79.208 1.204-.115.44-.397.887-.734 1.314-.68.86-1.74 1.829-2.748 2.76-1.031.952-2.01 1.867-2.606 2.662-.3.4-.466.724-.517.97-.044.21-.003.34.12.46l.065.052c.072.044.167.062.313.039.217-.034.505-.155.866-.378.72-.445 1.561-1.183 2.445-1.966.862-.763 1.768-1.571 2.57-2.076.4-.252.817-.457 1.221-.527.427-.074.87.002 1.223.346l.102.112c.22.271.296.593.266.918-.032.344-.183.684-.364.993-.363.617-.963 1.296-1.515 1.922-.574.651-1.1 1.251-1.403 1.767-.151.257-.218.449-.23.581-.01.106.012.163.072.22l.054.04c.074.038.214.062.474-.031.356-.128.853-.456 1.465-1.1a.5.5 0 0 1 .725.687c-.666.702-1.291 1.153-1.853 1.354-.535.192-1.08.173-1.485-.163l-.08-.071a1.23 1.23 0 0 1-.369-1.03c.033-.344.183-.684.364-.993.363-.617.964-1.297 1.516-1.923.574-.651 1.1-1.25 1.402-1.766.152-.258.22-.449.232-.581.007-.08-.004-.132-.035-.177l-.038-.045c-.07-.068-.162-.108-.353-.075-.213.037-.5.161-.858.388-.717.451-1.555 1.194-2.44 1.978-.862.764-1.774 1.57-2.584 2.07-.404.249-.826.45-1.237.514-.38.06-.767 0-1.095-.247l-.136-.118c-.402-.394-.502-.887-.399-1.38.097-.46.367-.923.696-1.363.663-.885 1.718-1.865 2.728-2.798 1.033-.954 2.023-1.862 2.642-2.645.31-.393.489-.71.55-.946.04-.152.028-.246-.017-.32l-.057-.069c-.082-.08-.284-.172-.76-.076-.468.094-1.091.352-1.863.803-1.537.898-3.552 2.496-5.893 4.786a.5.5 0 0 1-.699-.715c2.37-2.319 4.45-3.98 6.087-4.935.815-.476 1.55-.794 2.17-.92"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/ellipsis.tsx b/packages/react/src/icons/ellipsis.tsx
new file mode 100644
index 0000000..73180e6
--- /dev/null
+++ b/packages/react/src/icons/ellipsis.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const EllipsisIcon = createIcon({
+  displayName: 'Ellipsis',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M7.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m6 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m4.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/expand.tsx b/packages/react/src/icons/expand.tsx
new file mode 100644
index 0000000..e6df3e7
--- /dev/null
+++ b/packages/react/src/icons/expand.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const ExpandIcon = createIcon({
+  displayName: 'Expand',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="m17 7.707-3.146 3.147a.5.5 0 0 1-.708-.708L16.293 7H13.5a.5.5 0 0 1 0-1h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0zm-6.854 5.44a.5.5 0 0 1 .708.707L7.707 17H10.5a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 1 0v2.793z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/eye-closed.tsx b/packages/react/src/icons/eye-closed.tsx
new file mode 100644
index 0000000..a1304e1
--- /dev/null
+++ b/packages/react/src/icons/eye-closed.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const EyeClosedIcon = createIcon({
+  displayName: 'EyeClosed',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M5.5 9c.276 0 .533.223.641.477q.065.153.172.348c.24.435.613.938 1.121 1.414C8.442 12.184 9.954 13 12 13s3.558-.816 4.566-1.76c.508-.477.88-.98 1.121-1.415q.107-.195.171-.348c.11-.254.366-.477.642-.477s.495.225.417.49c-.202.682-.77 1.65-1.705 2.515l1.142 1.141a.5.5 0 0 1-.708.708l-1.217-1.218a7.4 7.4 0 0 1-1.89.958l.446 1.785a.5.5 0 0 1-.97.242l-.443-1.77A8 8 0 0 1 12 14a8 8 0 0 1-1.572-.15l-.443 1.771a.5.5 0 0 1-.97-.242l.446-1.785a7.4 7.4 0 0 1-1.89-.958l-1.217 1.218a.5.5 0 0 1-.708-.708l1.142-1.142c-.935-.864-1.503-1.832-1.705-2.514-.078-.265.14-.49.417-.49"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/eye.tsx b/packages/react/src/icons/eye.tsx
new file mode 100644
index 0000000..626740a
--- /dev/null
+++ b/packages/react/src/icons/eye.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const EyeIcon = createIcon({
+  displayName: 'Eye',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M6 12c0-.066.054-.358.313-.825a5.9 5.9 0 0 1 1.12-1.414C8.443 8.816 9.956 8 12 8s3.558.816 4.566 1.76c.508.477.88.98 1.121 1.415.258.467.313.76.313.825 0 .066-.055.358-.313.825-.24.435-.613.938-1.12 1.414C15.557 15.184 14.044 16 12 16s-3.558-.816-4.566-1.76a5.9 5.9 0 0 1-1.121-1.415C6.055 12.358 6 12.065 6 12m-1 0c0-1.25 2.333-5 7-5s7 3.75 7 5-2.333 5-7 5-7-3.75-7-5m8 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m1 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/eyedropper.tsx b/packages/react/src/icons/eyedropper.tsx
new file mode 100644
index 0000000..ec865b8
--- /dev/null
+++ b/packages/react/src/icons/eyedropper.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const EyedropperIcon = createIcon({
+  displayName: 'Eyedropper',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M16.922 3.56a2.501 2.501 0 0 1 3.517 3.517l-.172.19-2.206 2.205a.33.33 0 0 0 0 .466h.001c.548.549.582 1.418.103 2.007l-.104.115a1.5 1.5 0 0 1-2.12 0l-.233-.233-6.94 6.94a2.5 2.5 0 0 1-2.12.705L5.56 20.56a1.5 1.5 0 0 1-2.12-2.121l1.086-1.09a2.5 2.5 0 0 1 .706-2.118l6.94-6.939-.232-.232a1.5 1.5 0 0 1 0-2.122l.114-.103a1.5 1.5 0 0 1 1.893 0l.114.103.052.042c.127.084.3.07.411-.042l2.208-2.207zM5.939 15.939a1.5 1.5 0 0 0-.405 1.37c.044.208.013.435-.137.585l-1.25 1.25v.002a.5.5 0 0 0 .706.706l1.251-1.251c.15-.15.377-.181.584-.137.48.102 1-.032 1.372-.404L15 11.12 12.88 9zm13.621-11.5a1.5 1.5 0 0 0-2.12 0l-2.21 2.206a1.327 1.327 0 0 1-1.877 0 .5.5 0 0 0-.707.707l3.994 3.994.005.005h.001a.5.5 0 0 0 .707-.707l-.004-.003a1.33 1.33 0 0 1 .004-1.877L19.56 6.56a1.5 1.5 0 0 0 0-2.122"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/figma.tsx b/packages/react/src/icons/figma.tsx
new file mode 100644
index 0000000..73fdf0b
--- /dev/null
+++ b/packages/react/src/icons/figma.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const FigmaIcon = createIcon({
+  displayName: 'Figma',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M6.5 7c0 1.043.533 1.963 1.341 2.5A3 3 0 0 0 6.5 12c0 1.043.533 1.963 1.341 2.5A3 3 0 1 0 12.5 17v-2.764A3 3 0 1 0 16.159 9.5 3 3 0 0 0 14.5 4h-5a3 3 0 0 0-3 3m8 2a2 2 0 1 0 0-4h-2v4zm-2 3a2 2 0 1 0 4 0 2 2 0 0 0-4 0m-1 2h-2a2 2 0 1 1 0-4h2zm-2 1h2v2a2 2 0 1 1-2-2m2-6h-2a2 2 0 1 1 0-4h2z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/fill-gradient.tsx b/packages/react/src/icons/fill-gradient.tsx
new file mode 100644
index 0000000..187fd3e
--- /dev/null
+++ b/packages/react/src/icons/fill-gradient.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const FillGradientIcon = createIcon({
+  displayName: 'FillGradient',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M8 7h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1M6 8a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zm3.75.875a.875.875 0 1 1-1.75 0 .875.875 0 0 1 1.75 0m3.791.625a.625.625 0 1 0 0-1.25.625.625 0 0 0 0 1.25m-1.458.875a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m0 3.12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.458 2.245a.625.625 0 1 0 0-1.25.625.625 0 0 0 0 1.25m.625-3.865a.625.625 0 1 1-1.25 0 .625.625 0 0 1 1.25 0M8.875 15.99a.875.875 0 1 0 0-1.75.875.875 0 0 0 0 1.75m.875-4.115a.875.875 0 1 1-1.75 0 .875.875 0 0 1 1.75 0m5.75-1a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m.5 2.623a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/fill-pattern.tsx b/packages/react/src/icons/fill-pattern.tsx
new file mode 100644
index 0000000..ee98e62
--- /dev/null
+++ b/packages/react/src/icons/fill-pattern.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const FillPatternIcon = createIcon({
+  displayName: 'FillPattern',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M12.5 7H16a1 1 0 0 1 1 1v1h-4.5zm-1 0H8a1 1 0 0 0-1 1v1h4.5zM7 10v4h2v-4h1v4h4v-4h1v4h2v-4zm10 5h-4.5v2H16a1 1 0 0 0 1-1zm-5.5 2v-2H7v1a1 1 0 0 0 1 1zM6 8a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/fill-solid.tsx b/packages/react/src/icons/fill-solid.tsx
new file mode 100644
index 0000000..10e05f9
--- /dev/null
+++ b/packages/react/src/icons/fill-solid.tsx
@@ -0,0 +1,19 @@
+import { createIcon } from './create-icon';
+
+export const FillSolidIcon = createIcon({
+  displayName: 'FillSolid',
+  path: (
+    <>
+      <path
+        fill="var(--color-icon-tertiary)"
+        d="M9 9h6v6H9z"
+      />
+      <path
+        fill="var(--color-icon, currentColor)"
+        fillRule="evenodd"
+        d="M8 7h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1M6 8a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zm3 7V9h6v6zM8 8.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5z"
+        clipRule="evenodd"
+      />
+    </>
+  ),
+});
diff --git a/packages/react/src/icons/fixed-size.tsx b/packages/react/src/icons/fixed-size.tsx
new file mode 100644
index 0000000..85456e0
--- /dev/null
+++ b/packages/react/src/icons/fixed-size.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const FixedSizeIcon = createIcon({
+  displayName: 'FixedSize',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M7 7.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5zM7.5 6A1.5 1.5 0 0 0 6 7.5v9A1.5 1.5 0 0 0 7.5 18h9a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 16.5 6zm7 4h-5a.5.5 0 1 1 0-1h5a.5.5 0 1 1 0 1m-5 2.5h5a.5.5 0 1 0 0-1h-5a.5.5 0 0 0 0 1m0 1.5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/flip-horizontal.tsx b/packages/react/src/icons/flip-horizontal.tsx
new file mode 100644
index 0000000..efc2d46
--- /dev/null
+++ b/packages/react/src/icons/flip-horizontal.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const FlipHorizontalIcon = createIcon({
+  displayName: 'FlipHorizontal',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M12.5 6.5a.5.5 0 0 0-1 0v11a.5.5 0 0 0 1 0zM6 9.104a.75.75 0 0 1 1.28-.53L10 11.292a1 1 0 0 1 0 1.414l-2.72 2.72a.75.75 0 0 1-1.28-.53zm1 .603v4.586L9.293 12zm11-.603a.75.75 0 0 0-1.28-.53L14 11.292a1 1 0 0 0 0 1.414l2.72 2.72a.75.75 0 0 0 1.28-.53zm-1 .603v4.586L14.707 12z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/flip-vertical.tsx b/packages/react/src/icons/flip-vertical.tsx
new file mode 100644
index 0000000..a29ff5e
--- /dev/null
+++ b/packages/react/src/icons/flip-vertical.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const FlipVerticalIcon = createIcon({
+  displayName: 'FlipVertical',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M17.5 12.5a.5.5 0 0 0 0-1h-11a.5.5 0 0 0 0 1zM14.896 18a.75.75 0 0 0 .53-1.28L12.708 14a1 1 0 0 0-1.414 0l-2.72 2.72a.75.75 0 0 0 .53 1.28zm-.603-1H9.707L12 14.707zm.603-11a.75.75 0 0 1 .53 1.28L12.708 10a1 1 0 0 1-1.414 0l-2.72-2.72A.75.75 0 0 1 9.103 6zm-.603 1H9.707L12 9.293z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/folder.tsx b/packages/react/src/icons/folder.tsx
new file mode 100644
index 0000000..365828f
--- /dev/null
+++ b/packages/react/src/icons/folder.tsx
@@ -0,0 +1,15 @@
+import { createIcon } from './create-icon';
+
+export const FolderIcon = createIcon({
+  displayName: 'Folder',
+  path: (
+    <path
+      fill="none"
+      stroke="var(--color-icon, currentColor)"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      d="M4 17.75V6.5A1.25 1.25 0 0 1 5.25 5.25h4l2 2.5h7.5A1.25 1.25 0 0 1 20 9v8.75a1.25 1.25 0 0 1-1.25 1.25H5.25A1.25 1.25 0 0 1 4 17.75z"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/frame.tsx b/packages/react/src/icons/frame.tsx
new file mode 100644
index 0000000..1408536
--- /dev/null
+++ b/packages/react/src/icons/frame.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const FrameIcon = createIcon({
+  displayName: 'Frame',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M7.5 4a.5.5 0 0 0-.5.5V7H4.5a.5.5 0 0 0 0 1H7v8H4.5a.5.5 0 0 0 0 1H7v2.5a.5.5 0 0 0 1 0V17h8v2.5a.5.5 0 0 0 1 0V17h2.5a.5.5 0 0 0 0-1H17V8h2.5a.5.5 0 0 0 0-1H17V4.5a.5.5 0 0 0-1 0V7H8V4.5a.5.5 0 0 0-.5-.5M16 8H8v8h8z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/help.tsx b/packages/react/src/icons/help.tsx
new file mode 100644
index 0000000..941e72c
--- /dev/null
+++ b/packages/react/src/icons/help.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const HelpIcon = createIcon({
+  displayName: 'Help',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M11.69 16.572q.357 0 .61.254a.83.83 0 0 1 .26.616q0 .236-.12.435a.9.9 0 0 1-.315.32.84.84 0 0 1-.435.114.85.85 0 0 1-.615-.253.85.85 0 0 1-.254-.616.84.84 0 0 1 .254-.616.85.85 0 0 1 .615-.254m.332-10.884q1.002 0 1.763.416.76.41 1.19 1.13.428.712.428 1.635 0 .61-.193 1.111a2.9 2.9 0 0 1-.58.924 4.8 4.8 0 0 1-.954.797 4.6 4.6 0 0 0-.863.718 2.1 2.1 0 0 0-.459.815q-.138.453-.15 1.117c0 .18-.146.326-.326.326h-.44a.326.326 0 0 1-.327-.326q.006-.954.21-1.551.207-.598.604-1.009a5.5 5.5 0 0 1 1.003-.797q.447-.29.748-.61.308-.325.465-.711a2.2 2.2 0 0 0 .163-.852q0-.651-.307-1.14a2.04 2.04 0 0 0-.822-.755 2.45 2.45 0 0 0-1.153-.272q-.603 0-1.129.266a2.15 2.15 0 0 0-1.138 1.483c-.067.3-.312.545-.619.545-.323 0-.588-.269-.53-.587a3.12 3.12 0 0 1 1.678-2.268 3.7 3.7 0 0 1 1.738-.405"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/icons.stories.tsx b/packages/react/src/icons/icons.stories.tsx
new file mode 100644
index 0000000..189c0d6
--- /dev/null
+++ b/packages/react/src/icons/icons.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import * as Icons from './index';
+
+const icons = Object.entries(Icons)
+  .filter(([name]) => name.endsWith('Icon'))
+  .map(([name, Icon]) => ({ name, Icon: Icon as React.ComponentType }));
+
+const meta = {
+  title: 'Icons/Set',
+  parameters: {
+    layout: 'padded',
+  },
+  render: function Render() {
+    return (
+      <div className="icon-figma grid w-140 grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-2">
+        {icons.map(({ name, Icon }) => (
+          <div
+            key={name}
+            className="flex flex-col items-center gap-2 rounded-figma-md py-3 hover:bg-figma-secondary"
+          >
+            <Icon />
+            <span className="text-figma-secondary">{name.replace(/Icon$/, '')}</span>
+          </div>
+        ))}
+      </div>
+    );
+  },
+} satisfies Meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export default meta;
diff --git a/packages/react/src/icons/image.tsx b/packages/react/src/icons/image.tsx
new file mode 100644
index 0000000..bd668d7
--- /dev/null
+++ b/packages/react/src/icons/image.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const ImageIcon = createIcon({
+  displayName: 'Image',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M16 6a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zM8 7a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1zm2.225 4.082a.5.5 0 0 1 .629.064l4 4a.5.5 0 1 1-.707.707L10.5 12.208l-1.646 1.646a.5.5 0 1 1-.708-.707l2-2zM14.5 8a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3m0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/index.ts b/packages/react/src/icons/index.ts
new file mode 100644
index 0000000..f85038a
--- /dev/null
+++ b/packages/react/src/icons/index.ts
@@ -0,0 +1,104 @@
+export { createIcon } from './create-icon';
+export type { IconProps } from './create-icon';
+export { ActionsIcon } from './actions';
+export { AlignBottomIcon } from './align-bottom';
+export { AlignHorizontalCenterIcon } from './align-horizontal-center';
+export { AlignLeftIcon } from './align-left';
+export { AlignRightIcon } from './align-right';
+export { AlignTopIcon } from './align-top';
+export { AlignVerticalCenterIcon } from './align-vertical-center';
+export { AnnotationIcon } from './annotation';
+export { AspectRatioIcon } from './aspect-ratio';
+export { AutoHeightIcon } from './auto-height';
+export { AutoWidthIcon } from './auto-width';
+export { BlendModeIcon } from './blend-mode';
+export { BooleanIcon } from './boolean';
+export { CheckmarkIndeterminateIcon } from './checkmark-indeterminate';
+export { CheckmarkIcon } from './checkmark';
+export { ChevronDownIcon } from './chevron-down';
+export { ChevronLeftIcon } from './chevron-left';
+export { ChevronRightIcon } from './chevron-right';
+export { ChevronUpIcon } from './chevron-up';
+export { CircleIcon } from './circle';
+export { ClearIcon } from './clear';
+export { CloseIcon } from './close';
+export { CodeIcon } from './code';
+export { CommentIcon } from './comment';
+export { ComponentIcon } from './component';
+export { ConstraintLeftIcon } from './constraint-left';
+export { ConstraintTopIcon } from './constraint-top';
+export { CornerRadiusIcon } from './corner-radius';
+export { DesignIcon } from './design';
+export { DrawIcon } from './draw';
+export { EllipsisIcon } from './ellipsis';
+export { ExpandIcon } from './expand';
+export { EyeClosedIcon } from './eye-closed';
+export { EyeIcon } from './eye';
+export { EyedropperIcon } from './eyedropper';
+export { FigmaIcon } from './figma';
+export { FillGradientIcon } from './fill-gradient';
+export { FillPatternIcon } from './fill-pattern';
+export { FillSolidIcon } from './fill-solid';
+export { FixedSizeIcon } from './fixed-size';
+export { FlipHorizontalIcon } from './flip-horizontal';
+export { FlipVerticalIcon } from './flip-vertical';
+export { FrameIcon } from './frame';
+export { FolderIcon } from './folder';
+export { HelpIcon } from './help';
+export { ImageIcon } from './image';
+export { LayersCollapseIcon } from './layers-collapse';
+export { LetterSpacingIcon } from './letter-spacing';
+export { LineHeightIcon } from './line-height';
+export { LinkIcon } from './link';
+export { LinkBrokenIcon } from './link-broken';
+export { ListBulletedIcon } from './list-bulleted';
+export { ListNumberedIcon } from './list-numbered';
+export { MailIcon } from './mail';
+export { MinusIcon } from './minus';
+export { MoveIcon } from './move';
+export { NumberIcon } from './number';
+export { OpacityIcon } from './opacity';
+export { PageIcon } from './page';
+export { PaletteIcon } from './palette';
+export { PanelLeftCloseIcon } from './panel-left-close';
+export { PenIcon } from './pen';
+export { PhoneIcon } from './phone';
+export { PlayIcon } from './play';
+export { PlusIcon } from './plus';
+export { RectangleIcon } from './rectangle';
+export { RotateClockwiseIcon } from './rotate-clockwise';
+export { RotationIcon } from './rotation';
+export { RulerIcon } from './ruler';
+export { SearchIcon } from './search';
+export { SelectMatchingIcon } from './select-matching';
+export { ShadowBottomLeftIcon } from './shadow-bottom-left';
+export { ShadowBottomRightIcon } from './shadow-bottom-right';
+export { ShadowDownIcon } from './shadow-down';
+export { ShadowLeftIcon } from './shadow-left';
+export { ShadowRightIcon } from './shadow-right';
+export { ShadowTopLeftIcon } from './shadow-top-left';
+export { ShadowTopRightIcon } from './shadow-top-right';
+export { ShadowUpIcon } from './shadow-up';
+export { SlidersIcon } from './sliders';
+export { StringIcon } from './string';
+export { StylesIcon } from './styles';
+export { TextAlignCenterIcon } from './text-align-center';
+export { TextAlignJustifiedIcon } from './text-align-justified';
+export { TextAlignLeftIcon } from './text-align-left';
+export { TextAlignRightIcon } from './text-align-right';
+export { TextCaseLowerIcon } from './text-case-lower';
+export { TextCaseSmallCapsIcon } from './text-case-small-caps';
+export { TextCaseTitleIcon } from './text-case-title';
+export { TextCaseUpperIcon } from './text-case-upper';
+export { TextStrikethroughIcon } from './text-strikethrough';
+export { TextTruncateIcon } from './text-truncate';
+export { TextUnderlineIcon } from './text-underline';
+export { TextVerticalAlignBottomIcon } from './text-vertical-align-bottom';
+export { TextVerticalAlignMiddleIcon } from './text-vertical-align-middle';
+export { TextVerticalAlignTopIcon } from './text-vertical-align-top';
+export { TextIcon } from './text';
+export { VariableModeIcon } from './variable-mode';
+export { VariableIcon } from './variable';
+export { VerticalTrimCapHeightIcon } from './vertical-trim-cap-height';
+export { VerticalTrimStandardIcon } from './vertical-trim-standard';
+export { VideoIcon } from './video';
diff --git a/packages/react/src/icons/layers-collapse.tsx b/packages/react/src/icons/layers-collapse.tsx
new file mode 100644
index 0000000..565cdc4
--- /dev/null
+++ b/packages/react/src/icons/layers-collapse.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const LayersCollapseIcon = createIcon({
+  displayName: 'LayersCollapse',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M6.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zm0 3a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM6 13.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m.5 2.5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zm6.646.146 2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L15.5 15.207l-1.646 1.647a.5.5 0 0 1-.708-.708m2.708-6.292a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L15.5 8.793l1.646-1.647a.5.5 0 0 1 .708.708z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/letter-spacing.tsx b/packages/react/src/icons/letter-spacing.tsx
new file mode 100644
index 0000000..419e1fb
--- /dev/null
+++ b/packages/react/src/icons/letter-spacing.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const LetterSpacingIcon = createIcon({
+  displayName: 'LetterSpacing',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M6.5 6a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-1 0v-11a.5.5 0 0 1 .5-.5m11 0a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-1 0v-11a.5.5 0 0 1 .5-.5m-5.25 3a.5.5 0 0 1 .472.335l1.75 5a.5.5 0 1 1-.944.33l-.407-1.165H10.88l-.407 1.165a.5.5 0 1 1-.944-.33l1.75-5 .032-.072A.5.5 0 0 1 11.75 9zm-1.02 3.5h1.54L12 10.298z"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/line-height.tsx b/packages/react/src/icons/line-height.tsx
new file mode 100644
index 0000000..4aa27d6
--- /dev/null
+++ b/packages/react/src/icons/line-height.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const LineHeightIcon = createIcon({
+  displayName: 'LineHeight',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M17.5 17a.5.5 0 0 1 0 1h-11a.5.5 0 0 1 0-1zm-5.25-9a.5.5 0 0 1 .476.347l2.25 7a.5.5 0 0 1-.952.306L13.494 14h-2.987l-.531 1.653a.5.5 0 0 1-.952-.306l2.25-7 .03-.075A.5.5 0 0 1 11.75 8zm-1.422 5h2.344L12 9.354zM17.5 6a.5.5 0 0 1 0 1h-11a.5.5 0 0 1 0-1z"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/link-broken.tsx b/packages/react/src/icons/link-broken.tsx
new file mode 100644
index 0000000..3a00548
--- /dev/null
+++ b/packages/react/src/icons/link-broken.tsx
@@ -0,0 +1,18 @@
+import { createIcon } from './create-icon';
+
+export const LinkBrokenIcon = createIcon({
+  displayName: 'LinkBroken',
+  path: (
+    <g
+      fill="none"
+      stroke="var(--color-icon, currentColor)"
+      strokeLinecap="round"
+      strokeWidth="1.5"
+    >
+      <path d="M14.7 7.8a4.05 4.05 0 0 1 6 6" />
+      <path d="M9.3 16.2a4.05 4.05 0 0 1-6-6" />
+      <path d="M6.3 6.3l2.1 2.1" />
+      <path d="M15.6 15.6l2.1 2.1" />
+    </g>
+  ),
+});
diff --git a/packages/react/src/icons/link.tsx b/packages/react/src/icons/link.tsx
new file mode 100644
index 0000000..c71de5b
--- /dev/null
+++ b/packages/react/src/icons/link.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const LinkIcon = createIcon({
+  displayName: 'Link',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M12.444 10.37a2.998 2.998 0 0 1 .677 4.75l-2 2a3 3 0 1 1-4.243-4.242l1.27-1.27c.262-.263.746-.069.826.293a.44.44 0 0 1-.111.405l-1.278 1.279a2 2 0 1 0 2.829 2.828l2-2a2 2 0 0 0 0-2.828l-.029-.028c-.093-.089-.187-.184-.224-.307a.88.88 0 0 1 .22-.87.05.05 0 0 1 .063-.01m.434-3.492a3 3 0 1 1 4.243 4.242l-1.27 1.27c-.262.262-.745.068-.826-.294a.44.44 0 0 1 .111-.405l1.278-1.278a2 2 0 1 0-2.829-2.828l-2 2a2 2 0 0 0 0 2.828l.029.026c.093.089.186.183.223.306a.88.88 0 0 1-.218.874.05.05 0 0 1-.062.009 3 3 0 0 1-.679-4.75z"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/list-bulleted.tsx b/packages/react/src/icons/list-bulleted.tsx
new file mode 100644
index 0000000..fd794d6
--- /dev/null
+++ b/packages/react/src/icons/list-bulleted.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const ListBulletedIcon = createIcon({
+  displayName: 'ListBulleted',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M7 16a1 1 0 1 1 0 2 1 1 0 0 1 0-2m10.5.5a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1zM7 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2m10.5.5a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1zM7 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2m10.5.5a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1z"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/list-numbered.tsx b/packages/react/src/icons/list-numbered.tsx
new file mode 100644
index 0000000..e560268
--- /dev/null
+++ b/packages/react/src/icons/list-numbered.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const ListNumberedIcon = createIcon({
+  displayName: 'ListNumbered',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M7.573 13a1.427 1.427 0 0 1 .638 2.703l-.935.468a.5.5 0 0 0-.26.329H8.5a.5.5 0 0 1 0 1h-2A.5.5 0 0 1 6 17v-.382a1.5 1.5 0 0 1 .83-1.342l.934-.467a.427.427 0 0 0-.19-.809h-.16a.5.5 0 0 0-.353.146l-.207.207a.5.5 0 1 1-.708-.707l.208-.207A1.5 1.5 0 0 1 7.414 13zm9.927 3.5a.5.5 0 0 1 0 1h-6a.5.5 0 0 1 0-1zm0-5a.5.5 0 0 1 0 1h-6a.5.5 0 0 1 0-1zM7.276 6.553A.5.5 0 0 1 8 7v3h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H7V7.809l-.276.138a.5.5 0 0 1-.448-.894zM17.5 6.5a.5.5 0 0 1 0 1h-6a.5.5 0 0 1 0-1z"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/mail.tsx b/packages/react/src/icons/mail.tsx
new file mode 100644
index 0000000..6eb9435
--- /dev/null
+++ b/packages/react/src/icons/mail.tsx
@@ -0,0 +1,17 @@
+import { createIcon } from './create-icon';
+
+export const MailIcon = createIcon({
+  displayName: 'Mail',
+  path: (
+    <g
+      fill="none"
+      stroke="var(--color-icon, currentColor)"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    >
+      <path d="M4.5 6.25h15a1.25 1.25 0 0 1 1.25 1.25v9a1.25 1.25 0 0 1-1.25 1.25h-15a1.25 1.25 0 0 1-1.25-1.25v-9a1.25 1.25 0 0 1 1.25-1.25z" />
+      <path d="M4 7.5l8 6 8-6" />
+    </g>
+  ),
+});
diff --git a/packages/react/src/icons/minus.tsx b/packages/react/src/icons/minus.tsx
new file mode 100644
index 0000000..32d31c6
--- /dev/null
+++ b/packages/react/src/icons/minus.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const MinusIcon = createIcon({
+  displayName: 'Minus',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M6 12a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 6 12"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/move.tsx b/packages/react/src/icons/move.tsx
new file mode 100644
index 0000000..adaf153
--- /dev/null
+++ b/packages/react/src/icons/move.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const MoveIcon = createIcon({
+  displayName: 'Move',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M4.586 4.586a2 2 0 0 1 2.005-.497l.14.05 13 5.107a2 2 0 0 1 1.267 1.779v.159a2 2 0 0 1-1.26 1.782l-.15.053-5.024 1.545-1.545 5.024a2 2 0 0 1-1.677 1.398l-.158.012a2 2 0 0 1-1.938-1.267l-5.107-13a2 2 0 0 1 .447-2.145m1.78.484a1 1 0 0 0-1.073.223l-.097.112a1 1 0 0 0-.127.96l5.108 13a1 1 0 0 0 .811.628l.158.006a1 1 0 0 0 .859-.558l.058-.147 1.7-5.53 5.531-1.701a1 1 0 0 0 .687-.76l.018-.157a1 1 0 0 0-.492-.9l-.142-.069z"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/number.tsx b/packages/react/src/icons/number.tsx
new file mode 100644
index 0000000..59d6c54
--- /dev/null
+++ b/packages/react/src/icons/number.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const NumberIcon = createIcon({
+  displayName: 'Number',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M16 6a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zM8 7a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1zm3.05 2.002a.5.5 0 0 1 .448.547l-.045.452h1.495l.055-.55a.5.5 0 0 1 .995.098l-.045.452h.547a.5.5 0 1 1 0 1h-.648l-.199 2h.847a.5.5 0 1 1 0 1h-.948l-.054.548a.501.501 0 0 1-.995-.098l.044-.45h-1.495l-.054.548a.501.501 0 0 1-.995-.098l.044-.45H9.5a.5.5 0 0 1 0-1h.647l.2-2H9.5a.5.5 0 0 1 0-1h.948l.055-.55a.5.5 0 0 1 .546-.449m.302 1.999-.199 2h1.494l.2-2z"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/opacity.tsx b/packages/react/src/icons/opacity.tsx
new file mode 100644
index 0000000..1c322f7
--- /dev/null
+++ b/packages/react/src/icons/opacity.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const OpacityIcon = createIcon({
+  displayName: 'Opacity',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M8 7h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1M6 8a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zm9 1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1M13.5 11a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m-2 2a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m-2 2a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m1.5.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m2-2a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m.5 1.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m2-4a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m-.5 2.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m.5 1.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/page.tsx b/packages/react/src/icons/page.tsx
new file mode 100644
index 0000000..80e9e07
--- /dev/null
+++ b/packages/react/src/icons/page.tsx
@@ -0,0 +1,17 @@
+import { createIcon } from './create-icon';
+
+export const PageIcon = createIcon({
+  displayName: 'Page',
+  path: (
+    <g
+      fill="none"
+      stroke="var(--color-icon, currentColor)"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    >
+      <path d="M14 4H7a1.5 1.5 0 0 0-1.5 1.5v13A1.5 1.5 0 0 0 7 20h10a1.5 1.5 0 0 0 1.5-1.5V8.5L14 4z" />
+      <path d="M14 4v4.5h4.5" />
+    </g>
+  ),
+});
diff --git a/packages/react/src/icons/palette.tsx b/packages/react/src/icons/palette.tsx
new file mode 100644
index 0000000..6078b0f
--- /dev/null
+++ b/packages/react/src/icons/palette.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const PaletteIcon = createIcon({
+  displayName: 'Palette',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M7.312 6.803a7 7 0 0 1 9.639.248l.28.298a7 7 0 0 1 1.76 4.998l-.029.38C18.807 14.222 17.446 15 16.242 15H13.5l-.101.01a.5.5 0 0 0-.4.49v.5c0 .82-.338 1.603-.92 2.127-.6.542-1.468.8-2.37.488a7 7 0 0 1-2.362-1.385l-.297-.28a7 7 0 0 1 0-9.9zm8.93.955a6 6 0 0 0-8.485 0l-.212.225a6 6 0 0 0 2.492 9.689c.978.337 1.848-.457 1.953-1.467L12 16v-.499a1.5 1.5 0 0 1 1.5-1.5h2.743l.158-.006c.733-.057 1.391-.513 1.543-1.216l.024-.155a6 6 0 0 0-1.484-4.611zM8.5 12.001a1 1 0 1 1 0 2 1 1 0 0 1 0-2m7-2a1 1 0 1 1-.001 2 1 1 0 0 1 0-2m-6-1.5a1 1 0 1 1 0 2.001 1 1 0 0 1 0-2m3.5-1a1 1 0 1 1 0 2 1 1 0 0 1 0-2"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/panel-left-close.tsx b/packages/react/src/icons/panel-left-close.tsx
new file mode 100644
index 0000000..326e53e
--- /dev/null
+++ b/packages/react/src/icons/panel-left-close.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const PanelLeftCloseIcon = createIcon({
+  displayName: 'PanelLeftClose',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M17.653 7.008A1.5 1.5 0 0 1 19 8.5v7a1.5 1.5 0 0 1-1.347 1.492L17.5 17h-11a1.5 1.5 0 0 1-1.492-1.347L5 15.5v-7A1.5 1.5 0 0 1 6.5 7h11zM6.5 8a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5H9V8zm3.5 8h7.5a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.5-.5H10z"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/pen.tsx b/packages/react/src/icons/pen.tsx
new file mode 100644
index 0000000..889e8dc
--- /dev/null
+++ b/packages/react/src/icons/pen.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const PenIcon = createIcon({
+  displayName: 'Pen',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M4.886 3.21a1 1 0 0 1 .812-.19l7.698 1.56.338.076a7.67 7.67 0 0 1 5.806 7.266v.346l-.008.329 1.197 1.197a1 1 0 0 1 0 1.414l-5.523 5.522a1 1 0 0 1-1.413 0l-1.198-1.197-.328.008a7.67 7.67 0 0 1-7.612-5.806l-.077-.338L3.02 5.7a1 1 0 0 1 .274-.906l1.5-1.5zm.674 9.99a6.666 6.666 0 0 0 6.383 5.342h.3l.756-.018 1.5 1.5 5.523-5.522-1.5-1.5.018-.756a6.67 6.67 0 0 0-5.048-6.619l-.295-.066L5.5 4l-.396.397 5.16 5.16A3 3 0 0 1 12 9.001 3.001 3.001 0 0 1 12 15a3 3 0 0 1-2.444-4.737l-5.16-5.16L4 5.5zM12 10.001a2 2 0 0 0-2 2l.01.204a2 2 0 0 0 1.786 1.785L12 14a2 2 0 0 0 1.989-1.795l.01-.204a2 2 0 0 0-1.795-1.99z"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/phone.tsx b/packages/react/src/icons/phone.tsx
new file mode 100644
index 0000000..b4f32cf
--- /dev/null
+++ b/packages/react/src/icons/phone.tsx
@@ -0,0 +1,15 @@
+import { createIcon } from './create-icon';
+
+export const PhoneIcon = createIcon({
+  displayName: 'Phone',
+  path: (
+    <path
+      fill="none"
+      stroke="var(--color-icon, currentColor)"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      d="M20.25 15.69v2.25a1.5 1.5 0 0 1-1.64 1.5 14.85 14.85 0 0 1-6.47-2.31 14.63 14.63 0 0 1-4.5-4.5A14.85 14.85 0 0 1 5.33 6.16 1.5 1.5 0 0 1 6.83 4.52h2.25a1.5 1.5 0 0 1 1.5 1.29c.07.75.29 1.48.53 2.11a1.5 1.5 0 0 1-.34 1.58l-.95.95a12 12 0 0 0 4.5 4.5l.95-.95a1.5 1.5 0 0 1 1.58-.34c.63.24 1.36.46 2.11.53a1.5 1.5 0 0 1 1.29 1.5z"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/play.tsx b/packages/react/src/icons/play.tsx
new file mode 100644
index 0000000..5f2ee1d
--- /dev/null
+++ b/packages/react/src/icons/play.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const PlayIcon = createIcon({
+  displayName: 'Play',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M6 5.903C6 4.43 7.604 3.517 8.87 4.269l10.15 6.028c1.307.776 1.305 2.669-.003 3.442l-10.15 5.995c-1.228.724-2.768-.11-2.863-1.5L6 18.098zm1 12.195a.9.9 0 0 0 1.357.774l10.152-5.995a1 1 0 0 0 .002-1.72L8.359 5.129A.9.9 0 0 0 7 5.903z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/plus.tsx b/packages/react/src/icons/plus.tsx
new file mode 100644
index 0000000..107c440
--- /dev/null
+++ b/packages/react/src/icons/plus.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const PlusIcon = createIcon({
+  displayName: 'Plus',
+  path: (
+    <path
+      stroke="var(--color-icon, currentColor)"
+      d="M12 6.5V17.5M6.5 12H17.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/rectangle.tsx b/packages/react/src/icons/rectangle.tsx
new file mode 100644
index 0000000..79fb3b0
--- /dev/null
+++ b/packages/react/src/icons/rectangle.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const RectangleIcon = createIcon({
+  displayName: 'Rectangle',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M18 5H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1M6 4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/rotate-clockwise.tsx b/packages/react/src/icons/rotate-clockwise.tsx
new file mode 100644
index 0000000..c1b61fc
--- /dev/null
+++ b/packages/react/src/icons/rotate-clockwise.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const RotateClockwiseIcon = createIcon({
+  displayName: 'RotateClockwise',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M11.054 9.543a1.5 1.5 0 0 1 2.007.103l3.293 3.293a1.5 1.5 0 0 1 0 2.121l-3.293 3.293a1.5 1.5 0 0 1-2.121 0L7.647 15.06a1.5 1.5 0 0 1 0-2.121l3.293-3.293zm1.3.81a.5.5 0 0 0-.707 0l-3.293 3.293a.5.5 0 0 0 0 .707l3.293 3.293a.5.5 0 0 0 .629.064l.078-.064 3.293-3.293a.5.5 0 0 0 .064-.629l-.064-.078zM9.526 5.767a3.5 3.5 0 0 1 4.949 0L16 7.292V6a.5.5 0 0 1 1 0v2.5a.5.5 0 0 1-.5.5H14a.5.5 0 0 1 0-1h1.293l-1.525-1.526a2.5 2.5 0 0 0-3.535 0l-2.38 2.379a.5.5 0 0 1-.706-.707z"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/rotation.tsx b/packages/react/src/icons/rotation.tsx
new file mode 100644
index 0000000..ead7325
--- /dev/null
+++ b/packages/react/src/icons/rotation.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const RotationIcon = createIcon({
+  displayName: 'Rotation',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M9 8.5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1H13a4 4 0 0 0-4-4zM9 12v3h3a3 3 0 0 0-3-3"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/ruler.tsx b/packages/react/src/icons/ruler.tsx
new file mode 100644
index 0000000..a37239e
--- /dev/null
+++ b/packages/react/src/icons/ruler.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const RulerIcon = createIcon({
+  displayName: 'Ruler',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M3.293 7.793a1 1 0 0 0 0 1.414l11.5 11.5a1 1 0 0 0 1.414 0l4.5-4.5a1 1 0 0 0 0-1.414l-11.5-11.5a1 1 0 0 0-1.414 0zM4 8.5l.707.707.69.69.75-.75a.5.5 0 1 1 .707.707l-.75.75 1.292 1.292 2.25-2.25a.5.5 0 0 1 .708.708l-2.25 2.25 1.292 1.292.75-.75a.5.5 0 0 1 .708.708l-.75.75 1.292 1.292 2.25-2.25a.5.5 0 0 1 .708.708l-2.25 2.25 2.689 2.689.707.707.707-.707 3.086-3.086L20 15.5l-.707-.707L9.207 4.707 8.5 4l-.707.707-3.086 3.086zM16 17a1 1 0 1 0 0-2 1 1 0 0 0 0 2"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/search.tsx b/packages/react/src/icons/search.tsx
new file mode 100644
index 0000000..ba557ce
--- /dev/null
+++ b/packages/react/src/icons/search.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const SearchIcon = createIcon({
+  displayName: 'Search',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M11.5 6a5.5 5.5 0 0 1 4.226 9.019l2.127 2.127a.5.5 0 1 1-.707.707l-2.127-2.127A5.5 5.5 0 1 1 11.5 6m0 1a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/select-matching.tsx b/packages/react/src/icons/select-matching.tsx
new file mode 100644
index 0000000..75ededd
--- /dev/null
+++ b/packages/react/src/icons/select-matching.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const SelectMatchingIcon = createIcon({
+  displayName: 'SelectMatching',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M6.5 16a.5.5 0 0 1 .49.4l.02.2c.04.196.194.35.39.39l.2.02a.5.5 0 0 1-.1.99A1.5 1.5 0 0 1 6 16.5a.5.5 0 0 1 .5-.5m4 0a.5.5 0 0 1 .5.5A1.5 1.5 0 0 1 9.5 18a.5.5 0 0 1-.1-.99l.2-.02a.5.5 0 0 0 .39-.39l.02-.2a.5.5 0 0 1 .49-.4m3 0a.5.5 0 0 1 .49.4l.02.2c.04.196.194.35.39.39l.2.02a.5.5 0 0 1-.1.99 1.5 1.5 0 0 1-1.5-1.5.5.5 0 0 1 .5-.5m4 0a.5.5 0 0 1 .5.5 1.5 1.5 0 0 1-1.5 1.5.5.5 0 0 1-.1-.99l.2-.02a.5.5 0 0 0 .39-.39l.02-.2a.5.5 0 0 1 .49-.4m-10-3a.5.5 0 0 1 .1.99l-.2.02a.5.5 0 0 0-.39.39l-.02.2a.5.5 0 0 1-.99-.1A1.5 1.5 0 0 1 7.5 13m2 0a1.5 1.5 0 0 1 1.5 1.5.5.5 0 0 1-.99.1l-.02-.2a.5.5 0 0 0-.39-.39l-.2-.02a.5.5 0 0 1 .1-.99m5 0a.5.5 0 0 1 .1.99l-.2.02a.5.5 0 0 0-.39.39l-.02.2a.5.5 0 0 1-.99-.1 1.5 1.5 0 0 1 1.5-1.5m2 0a1.5 1.5 0 0 1 1.5 1.5.5.5 0 0 1-.99.1l-.02-.2a.5.5 0 0 0-.39-.39l-.2-.02a.5.5 0 0 1 .1-.99m-7-7A1.5 1.5 0 0 1 11 7.5v2A1.5 1.5 0 0 1 9.5 11h-2A1.5 1.5 0 0 1 6 9.5v-2A1.5 1.5 0 0 1 7.5 6zm4 3a.5.5 0 0 1 .49.4l.02.2c.04.196.194.35.39.39l.2.02a.5.5 0 0 1-.1.99A1.5 1.5 0 0 1 13 9.5a.5.5 0 0 1 .5-.5m4 0a.5.5 0 0 1 .5.5 1.5 1.5 0 0 1-1.5 1.5.5.5 0 0 1-.1-.99l.2-.02a.5.5 0 0 0 .39-.39l.02-.2a.5.5 0 0 1 .49-.4m-10-2a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5zm7-1a.5.5 0 0 1 .1.99l-.2.02a.5.5 0 0 0-.39.39l-.02.2a.5.5 0 0 1-.99-.1A1.5 1.5 0 0 1 14.5 6m2 0A1.5 1.5 0 0 1 18 7.5a.5.5 0 0 1-.99.1l-.02-.2a.5.5 0 0 0-.39-.39l-.2-.02a.5.5 0 0 1 .1-.99"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/shadow-bottom-left.tsx b/packages/react/src/icons/shadow-bottom-left.tsx
new file mode 100644
index 0000000..cfae042
--- /dev/null
+++ b/packages/react/src/icons/shadow-bottom-left.tsx
@@ -0,0 +1,17 @@
+import { createIcon } from './create-icon';
+
+export const ShadowBottomLeftIcon = createIcon({
+  displayName: 'ShadowBottomLeft',
+  path: (
+    <>
+      <path
+        fill="var(--color-icon, currentColor)"
+        d="M16.204 6.01A2 2 0 0 1 18 8v8l-.01.204a2 2 0 0 1-1.786 1.785L16 18H8l-.204-.01a2 2 0 0 1-1.785-1.786L6 16V8a2 2 0 0 1 1.796-1.99L8 6h8zM8 7a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1z"
+      />
+      <path
+        fill="var(--color-icon-tertiary)"
+        d="M6 8v8a2 2 0 0 0 2 2h8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 1.796-1.99z"
+      />
+    </>
+  ),
+});
diff --git a/packages/react/src/icons/shadow-bottom-right.tsx b/packages/react/src/icons/shadow-bottom-right.tsx
new file mode 100644
index 0000000..57666af
--- /dev/null
+++ b/packages/react/src/icons/shadow-bottom-right.tsx
@@ -0,0 +1,17 @@
+import { createIcon } from './create-icon';
+
+export const ShadowBottomRightIcon = createIcon({
+  displayName: 'ShadowBottomRight',
+  path: (
+    <>
+      <path
+        fill="var(--color-icon, currentColor)"
+        d="M16.204 6.01A2 2 0 0 1 18 8v8l-.01.204a2 2 0 0 1-1.786 1.785L16 18H8l-.204-.01a2 2 0 0 1-1.785-1.786L6 16V8a2 2 0 0 1 1.796-1.99L8 6h8zM8 7a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1z"
+      />
+      <path
+        fill="var(--color-icon-tertiary)"
+        d="M18.204 8.01A2 2 0 0 1 20 10v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-1.99-1.796L8 18h8a2 2 0 0 0 2-2V8z"
+      />
+    </>
+  ),
+});
diff --git a/packages/react/src/icons/shadow-down.tsx b/packages/react/src/icons/shadow-down.tsx
new file mode 100644
index 0000000..9a7945f
--- /dev/null
+++ b/packages/react/src/icons/shadow-down.tsx
@@ -0,0 +1,17 @@
+import { createIcon } from './create-icon';
+
+export const ShadowDownIcon = createIcon({
+  displayName: 'ShadowDown',
+  path: (
+    <>
+      <path
+        fill="var(--color-icon, currentColor)"
+        d="M16.204 6.01A2 2 0 0 1 18 8v8l-.01.204a2 2 0 0 1-1.786 1.785L16 18H8l-.204-.01a2 2 0 0 1-1.785-1.786L6 16V8a2 2 0 0 1 1.796-1.99L8 6h8zM8 7a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1z"
+      />
+      <path
+        fill="var(--color-icon-tertiary)"
+        d="M18 19a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-3a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2z"
+      />
+    </>
+  ),
+});
diff --git a/packages/react/src/icons/shadow-left.tsx b/packages/react/src/icons/shadow-left.tsx
new file mode 100644
index 0000000..3573358
--- /dev/null
+++ b/packages/react/src/icons/shadow-left.tsx
@@ -0,0 +1,17 @@
+import { createIcon } from './create-icon';
+
+export const ShadowLeftIcon = createIcon({
+  displayName: 'ShadowLeft',
+  path: (
+    <>
+      <path
+        fill="var(--color-icon, currentColor)"
+        d="M16.204 6.01A2 2 0 0 1 18 8v8l-.01.204a2 2 0 0 1-1.786 1.785L16 18H8l-.204-.01a2 2 0 0 1-1.785-1.786L6 16V8a2 2 0 0 1 1.796-1.99L8 6h8zM8 7a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1z"
+      />
+      <path
+        fill="var(--color-icon-tertiary)"
+        d="M8 6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z"
+      />
+    </>
+  ),
+});
diff --git a/packages/react/src/icons/shadow-right.tsx b/packages/react/src/icons/shadow-right.tsx
new file mode 100644
index 0000000..abcf2ab
--- /dev/null
+++ b/packages/react/src/icons/shadow-right.tsx
@@ -0,0 +1,17 @@
+import { createIcon } from './create-icon';
+
+export const ShadowRightIcon = createIcon({
+  displayName: 'ShadowRight',
+  path: (
+    <>
+      <path
+        fill="var(--color-icon, currentColor)"
+        d="M16.204 6.01A2 2 0 0 1 18 8v8l-.01.204a2 2 0 0 1-1.786 1.785L16 18H8l-.204-.01a2 2 0 0 1-1.785-1.786L6 16V8a2 2 0 0 1 1.796-1.99L8 6h8zM8 7a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1z"
+      />
+      <path
+        fill="var(--color-icon-tertiary)"
+        d="M19 6a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-3a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2z"
+      />
+    </>
+  ),
+});
diff --git a/packages/react/src/icons/shadow-top-left.tsx b/packages/react/src/icons/shadow-top-left.tsx
new file mode 100644
index 0000000..a208bac
--- /dev/null
+++ b/packages/react/src/icons/shadow-top-left.tsx
@@ -0,0 +1,17 @@
+import { createIcon } from './create-icon';
+
+export const ShadowTopLeftIcon = createIcon({
+  displayName: 'ShadowTopLeft',
+  path: (
+    <>
+      <path
+        fill="var(--color-icon, currentColor)"
+        d="M16.204 6.01A2 2 0 0 1 18 8v8l-.01.204a2 2 0 0 1-1.786 1.785L16 18H8l-.204-.01a2 2 0 0 1-1.785-1.786L6 16V8a2 2 0 0 1 1.796-1.99L8 6h8zM8 7a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1z"
+      />
+      <path
+        fill="var(--color-icon-tertiary)"
+        d="M14 4a2 2 0 0 1 2 2H8a2 2 0 0 0-2 2v8l-.204-.01A2 2 0 0 1 4 14V6a2 2 0 0 1 2-2z"
+      />
+    </>
+  ),
+});
diff --git a/packages/react/src/icons/shadow-top-right.tsx b/packages/react/src/icons/shadow-top-right.tsx
new file mode 100644
index 0000000..1b38ac7
--- /dev/null
+++ b/packages/react/src/icons/shadow-top-right.tsx
@@ -0,0 +1,17 @@
+import { createIcon } from './create-icon';
+
+export const ShadowTopRightIcon = createIcon({
+  displayName: 'ShadowTopRight',
+  path: (
+    <>
+      <path
+        fill="var(--color-icon, currentColor)"
+        d="M16.204 6.01A2 2 0 0 1 18 8v8l-.01.204a2 2 0 0 1-1.786 1.785L16 18H8l-.204-.01a2 2 0 0 1-1.785-1.786L6 16V8a2 2 0 0 1 1.796-1.99L8 6h8zM8 7a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1z"
+      />
+      <path
+        fill="var(--color-icon-tertiary)"
+        d="M18 4a2 2 0 0 1 2 2v8a2 2 0 0 1-1.796 1.99L18 16V8a2 2 0 0 0-2-2H8a2 2 0 0 1 2-2z"
+      />
+    </>
+  ),
+});
diff --git a/packages/react/src/icons/shadow-up.tsx b/packages/react/src/icons/shadow-up.tsx
new file mode 100644
index 0000000..1df661b
--- /dev/null
+++ b/packages/react/src/icons/shadow-up.tsx
@@ -0,0 +1,17 @@
+import { createIcon } from './create-icon';
+
+export const ShadowUpIcon = createIcon({
+  displayName: 'ShadowUp',
+  path: (
+    <>
+      <path
+        fill="var(--color-icon, currentColor)"
+        d="M16.204 6.01A2 2 0 0 1 18 8v8l-.01.204a2 2 0 0 1-1.786 1.785L16 18H8l-.204-.01a2 2 0 0 1-1.785-1.786L6 16V8a2 2 0 0 1 1.796-1.99L8 6h8zM8 7a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1z"
+      />
+      <path
+        fill="var(--color-icon-tertiary)"
+        d="M16 3a2 2 0 0 1 2 2v3a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2V5a2 2 0 0 1 2-2z"
+      />
+    </>
+  ),
+});
diff --git a/packages/react/src/icons/sliders.tsx b/packages/react/src/icons/sliders.tsx
new file mode 100644
index 0000000..0067114
--- /dev/null
+++ b/packages/react/src/icons/sliders.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const SlidersIcon = createIcon({
+  displayName: 'Sliders',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M8.5 18a.5.5 0 0 0 .5-.5v-1.55a2.5 2.5 0 0 0 0-4.9V6.5a.5.5 0 0 0-1 0v4.55a2.501 2.501 0 0 0 0 4.9v1.55a.5.5 0 0 0 .5.5m7 0a.5.5 0 0 0 .5-.5v-4.55a2.501 2.501 0 0 0 0-4.9V6.5a.5.5 0 0 0-1 0v1.55a2.5 2.5 0 0 0 0 4.9v4.55a.5.5 0 0 0 .5.5m0-6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m-7 3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/string.tsx b/packages/react/src/icons/string.tsx
new file mode 100644
index 0000000..4615a61
--- /dev/null
+++ b/packages/react/src/icons/string.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const StringIcon = createIcon({
+  displayName: 'String',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M8 7h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1M6 8a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zm3.5 1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 1 0V10h1.5v4H11a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-.5v-4H14v.5a.5.5 0 0 0 1 0v-1a.5.5 0 0 0-.5-.5z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/styles.tsx b/packages/react/src/icons/styles.tsx
new file mode 100644
index 0000000..126e8c8
--- /dev/null
+++ b/packages/react/src/icons/styles.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const StylesIcon = createIcon({
+  displayName: 'Styles',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.5 10a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm0 1a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Zm7-1a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm0 1a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5ZM14 15.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0Zm-1 0a2.5 2.5 0 1 0 5 0 2.5 2.5 0 0 0-5 0ZM8.5 17a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm0 1a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/text-align-center.tsx b/packages/react/src/icons/text-align-center.tsx
new file mode 100644
index 0000000..9902bc2
--- /dev/null
+++ b/packages/react/src/icons/text-align-center.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const TextAlignCenterIcon = createIcon({
+  displayName: 'TextAlignCenter',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M5 7.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5m3 4a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5M7.5 15a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/text-align-justified.tsx b/packages/react/src/icons/text-align-justified.tsx
new file mode 100644
index 0000000..e3e2586
--- /dev/null
+++ b/packages/react/src/icons/text-align-justified.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const TextAlignJustifiedIcon = createIcon({
+  displayName: 'TextAlignJustified',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M5 7.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5m0 4a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5m.5 3.5a.5.5 0 0 0 0 1h13a.5.5 0 0 0 0-1z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/text-align-left.tsx b/packages/react/src/icons/text-align-left.tsx
new file mode 100644
index 0000000..74d5002
--- /dev/null
+++ b/packages/react/src/icons/text-align-left.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const TextAlignLeftIcon = createIcon({
+  displayName: 'TextAlignLeft',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M5 7.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5m0 4a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m.5 3.5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/text-align-right.tsx b/packages/react/src/icons/text-align-right.tsx
new file mode 100644
index 0000000..643a85b
--- /dev/null
+++ b/packages/react/src/icons/text-align-right.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const TextAlignRightIcon = createIcon({
+  displayName: 'TextAlignRight',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M19 7.5a.5.5 0 0 0-.5-.5h-13a.5.5 0 0 0 0 1h13a.5.5 0 0 0 .5-.5m0 4a.5.5 0 0 0-.5-.5h-7a.5.5 0 0 0 0 1h7a.5.5 0 0 0 .5-.5m-.5 3.5a.5.5 0 0 1 0 1h-9a.5.5 0 0 1 0-1z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/text-case-lower.tsx b/packages/react/src/icons/text-case-lower.tsx
new file mode 100644
index 0000000..4e13342
--- /dev/null
+++ b/packages/react/src/icons/text-case-lower.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const TextCaseLowerIcon = createIcon({
+  displayName: 'TextCaseLower',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M8.38 16.215q-.555 0-1.008-.209a1.7 1.7 0 0 1-.714-.604q-.262-.399-.262-.973 0-.497.194-.813.197-.32.524-.501.327-.183.726-.274.399-.09.809-.14.528-.07.855-.107.33-.038.482-.125.152-.088.152-.3v-.03q0-.529-.292-.822-.293-.292-.878-.292-.607 0-.954.266-.137.105-.242.219c-.17.185-.424.31-.666.242-.287-.082-.447-.4-.276-.645q.142-.202.322-.352.375-.315.84-.448.468-.137.953-.137.315 0 .696.076.38.072.722.285.345.21.57.62.225.405.224 1.07v3.36a.5.5 0 0 1-.502.501h-.104a.397.397 0 0 1-.397-.397v-.369a.028.028 0 0 0-.054-.012 1.6 1.6 0 0 1-.307.406 1.8 1.8 0 0 1-.566.36 2.2 2.2 0 0 1-.848.145m.19-.858q.504 0 .854-.198t.532-.513q.186-.315.186-.673v-.513c0-.098-.149-.183-.243-.155q-.181.053-.418.09a17 17 0 0 1-.82.115q-.339.045-.628.144-.285.1-.46.293-.17.19-.17.513 0 .444.33.672.331.225.836.225m6.456 3.036q-.672 0-1.155-.175a2.3 2.3 0 0 1-.798-.456 3 3 0 0 1-.198-.203c-.183-.21-.084-.518.161-.65a.57.57 0 0 1 .689.14l.006.006q.182.198.494.342.31.144.809.144.675 0 1.117-.33.44-.327.44-1.034V15.06a.05.05 0 0 0-.047-.048.05.05 0 0 0-.042.024 3 3 0 0 1-.271.382 1.6 1.6 0 0 1-.525.403q-.335.171-.885.171-.699 0-1.258-.327a2.3 2.3 0 0 1-.877-.969q-.324-.637-.323-1.558 0-.911.315-1.576.316-.67.874-1.03.559-.36 1.28-.361.559 0 .893.186.335.183.517.422.172.22.273.378.016.024.046.025c.03 0 .054-.024.054-.054v-.414c0-.258.209-.467.467-.467h.028c.274 0 .496.222.496.496v5.488q0 .753-.345 1.228-.343.479-.928.707t-1.307.227m-.019-3.276q.518 0 .87-.235.358-.24.544-.688.186-.449.186-1.072 0-.612-.182-1.075a1.6 1.6 0 0 0-.54-.726q-.356-.266-.878-.266-.54 0-.9.278a1.7 1.7 0 0 0-.544.744 2.9 2.9 0 0 0-.178 1.045q0 .593.182 1.041.186.45.544.703.361.251.896.251"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/text-case-small-caps.tsx b/packages/react/src/icons/text-case-small-caps.tsx
new file mode 100644
index 0000000..f36794a
--- /dev/null
+++ b/packages/react/src/icons/text-case-small-caps.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const TextCaseSmallCapsIcon = createIcon({
+  displayName: 'TextCaseSmallCaps',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M6.847 15.495a.523.523 0 1 1-.985-.352L8.24 8.609a.83.83 0 0 1 1.56 0l2.374 6.534a.523.523 0 1 1-.985.351L9.06 9.414a.043.043 0 0 0-.081 0zm.162-2.238c0-.252.204-.456.456-.456h3.1a.456.456 0 0 1 0 .912h-3.1a.456.456 0 0 1-.456-.456m10.426-1.277c-.234 0-.431-.158-.551-.359l-.036-.056a1.24 1.24 0 0 0-.687-.507 1.6 1.6 0 0 0-.48-.07q-.462 0-.825.233a1.56 1.56 0 0 0-.57.684q-.205.45-.205 1.1t.205 1.103q.208.451.573.686.365.233.848.233.437 0 .759-.169a1.2 1.2 0 0 0 .498-.485q.174-.304.177-.718c0-.011.01-.02.021-.018.022.004.02.036-.003.036h-1.226a.12.12 0 0 1-.121-.12v-.272c0-.217.175-.392.392-.392h1.226c.371 0 .673.301.673.673q0 .729-.31 1.258a2.1 2.1 0 0 1-.85.817q-.542.285-1.242.285-.778 0-1.368-.352a2.4 2.4 0 0 1-.92-1.008q-.33-.654-.33-1.551 0-.684.194-1.225.194-.54.543-.916.353-.38.823-.576.47-.2 1.028-.2.468 0 .872.139.405.136.72.387a2.1 2.1 0 0 1 .615.768c.139.296-.117.592-.443.592"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/text-case-title.tsx b/packages/react/src/icons/text-case-title.tsx
new file mode 100644
index 0000000..3a3ff33
--- /dev/null
+++ b/packages/react/src/icons/text-case-title.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const TextCaseTitleIcon = createIcon({
+  displayName: 'TextCaseTitle',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M6.62 15.732a.523.523 0 1 1-.985-.352l2.377-6.534a.83.83 0 0 1 1.56 0l2.374 6.534a.523.523 0 1 1-.985.351l-2.129-6.08a.043.043 0 0 0-.08 0zm.162-2.238c0-.252.204-.456.456-.456h3.1a.456.456 0 1 1 0 .912h-3.1a.456.456 0 0 1-.456-.456m8.738 4.898q-.674 0-1.155-.175a2.3 2.3 0 0 1-.798-.456 3 3 0 0 1-.198-.202c-.183-.21-.085-.518.16-.65a.57.57 0 0 1 .695.145q.182.198.494.342.311.145.81.145.675 0 1.117-.33.44-.328.44-1.034v-1.119a.048.048 0 0 0-.09-.024q-.098.167-.27.383a1.6 1.6 0 0 1-.525.402q-.335.171-.885.171-.7 0-1.258-.326a2.3 2.3 0 0 1-.878-.97q-.323-.638-.323-1.557 0-.912.316-1.577.315-.67.874-1.03t1.28-.36q.558 0 .893.185.334.183.517.422.171.222.273.378.017.024.045.025c.03 0 .054-.024.054-.054v-.413c0-.258.21-.468.467-.468h.029c.274 0 .496.222.496.496v5.489q0 .752-.346 1.227-.342.48-.927.707-.585.228-1.307.228m-.02-3.275q.518 0 .87-.236.358-.24.544-.688t.186-1.071q0-.612-.182-1.076a1.6 1.6 0 0 0-.54-.725q-.357-.267-.877-.266-.54 0-.9.277a1.7 1.7 0 0 0-.544.745q-.18.467-.179 1.045 0 .593.183 1.04.186.45.543.704.36.25.897.25"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/text-case-upper.tsx b/packages/react/src/icons/text-case-upper.tsx
new file mode 100644
index 0000000..8e12d6b
--- /dev/null
+++ b/packages/react/src/icons/text-case-upper.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const TextCaseUpperIcon = createIcon({
+  displayName: 'TextCaseUpper',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M15.5 8c-1.7 0-3 1.501-3 3.25v1.5c0 1.749 1.3 3.25 3 3.25s3-1.501 3-3.25V12a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 0 0 1h1.5v.25c0 1.289-.94 2.25-2 2.25s-2-.961-2-2.25v-1.5c0-1.289.94-2.25 2-2.25.655 0 1.252.357 1.624.938a.5.5 0 0 0 .843-.54C17.434 8.568 16.537 8 15.5 8m-9.754 8c.223 0 .42-.14.494-.35l.624-1.781h3.093l.624 1.781a.523.523 0 1 0 .985-.35L9.192 8.764a.83.83 0 0 0-1.56 0l-2.377 6.534a.523.523 0 0 0 .491.702m3.892-3.043L8.453 9.57a.043.043 0 0 0-.081 0l-1.188 3.387z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/text-strikethrough.tsx b/packages/react/src/icons/text-strikethrough.tsx
new file mode 100644
index 0000000..73b7ba1
--- /dev/null
+++ b/packages/react/src/icons/text-strikethrough.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const TextStrikethroughIcon = createIcon({
+  displayName: 'TextStrikethrough',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M15.835 13.5a.27.27 0 0 1 .24.138q.306.554.306 1.316 0 1.01-.543 1.816-.543.8-1.554 1.268-1.01.462-2.409.462-1.323 0-2.295-.419-.972-.424-1.534-1.175a3.2 3.2 0 0 1-.533-1.135c-.082-.326.187-.614.522-.614.299 0 .539.233.625.519q.13.43.415.768.448.524 1.17.8.73.271 1.63.272.996 0 1.764-.32.773-.327 1.215-.906a2.16 2.16 0 0 0 .44-1.348q0-.645-.345-1.09c-.1-.132-.016-.352.15-.352zm-3.846-8q1.215 0 2.142.438.933.43 1.476 1.187.38.518.519 1.134c.07.31-.19.577-.507.577-.286 0-.518-.22-.6-.493q-.22-.738-.875-1.224-.864-.646-2.18-.646-.92 0-1.63.313-.703.308-1.1.85a2.04 2.04 0 0 0-.395 1.237q0 .492.217.874.216.376.588.652.376.278.843.475.474.197.972.338l1.052.288H18.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1h3.94a4.4 4.4 0 0 1-.844-.602q-.844-.781-.844-1.982 0-1.009.562-1.778t1.522-1.2q.959-.438 2.153-.438"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/text-truncate.tsx b/packages/react/src/icons/text-truncate.tsx
new file mode 100644
index 0000000..ffd3a32
--- /dev/null
+++ b/packages/react/src/icons/text-truncate.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const TextTruncateIcon = createIcon({
+  displayName: 'TextTruncate',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M18.319 15.336a.65.65 0 0 1-.476-.2.65.65 0 0 1-.199-.475.65.65 0 0 1 .2-.476.65.65 0 0 1 .475-.199.65.65 0 0 1 .476.2.65.65 0 0 1 .199.475q0 .18-.093.337a.7.7 0 0 1-.245.245.63.63 0 0 1-.337.093m-2.693 0a.65.65 0 0 1-.476-.2.65.65 0 0 1-.199-.475.65.65 0 0 1 .2-.476.65.65 0 0 1 .475-.199.65.65 0 0 1 .476.2.65.65 0 0 1 .199.475q0 .18-.092.337a.7.7 0 0 1-.245.245.63.63 0 0 1-.338.093m-2.693 0a.65.65 0 0 1-.476-.2.65.65 0 0 1-.199-.475.65.65 0 0 1 .2-.476.65.65 0 0 1 .475-.199.65.65 0 0 1 .476.2.65.65 0 0 1 .199.475q0 .18-.093.337a.7.7 0 0 1-.245.245.63.63 0 0 1-.337.093m-6.769-.39a.489.489 0 1 1-.92-.329l2.22-6.107a.776.776 0 0 1 1.459 0l2.218 6.107a.489.489 0 1 1-.92.328L8.23 9.263a.04.04 0 0 0-.075 0zm.151-2.092c0-.235.191-.426.426-.426H9.64a.426.426 0 1 1 0 .852H6.741a.426.426 0 0 1-.426-.426"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/text-underline.tsx b/packages/react/src/icons/text-underline.tsx
new file mode 100644
index 0000000..6ffc791
--- /dev/null
+++ b/packages/react/src/icons/text-underline.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const TextUnderlineIcon = createIcon({
+  displayName: 'TextUnderline',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M9 7.5a.5.5 0 0 0-1 0V12a4 4 0 0 0 8 0V7.5a.5.5 0 0 0-1 0V12a3 3 0 1 1-6 0zM16.5 19a.5.5 0 0 0 0-1h-9a.5.5 0 0 0 0 1z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/text-vertical-align-bottom.tsx b/packages/react/src/icons/text-vertical-align-bottom.tsx
new file mode 100644
index 0000000..e516833
--- /dev/null
+++ b/packages/react/src/icons/text-vertical-align-bottom.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const TextVerticalAlignBottomIcon = createIcon({
+  displayName: 'TextVerticalAlignBottom',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="m14.854 13.854-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 .708-.708L11 15.293V7.5a.5.5 0 0 1 1 0v7.793l2.146-2.147a.5.5 0 0 1 .708.708M5.5 19a.5.5 0 0 1 0-1h12a.5.5 0 0 1 0 1z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/text-vertical-align-middle.tsx b/packages/react/src/icons/text-vertical-align-middle.tsx
new file mode 100644
index 0000000..fa12172
--- /dev/null
+++ b/packages/react/src/icons/text-vertical-align-middle.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const TextVerticalAlignMiddleIcon = createIcon({
+  displayName: 'TextVerticalAlignMiddle',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="m11.854 9.854 2-2a.5.5 0 0 0-.708-.708L12 8.293V4.5a.5.5 0 0 0-1 0v3.793L9.854 7.146a.5.5 0 1 0-.708.708l2 2a.5.5 0 0 0 .708 0m0 3.292 2 2a.5.5 0 0 1-.708.708L12 14.707V18.5a.5.5 0 0 1-1 0v-3.793l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0M5.5 11a.5.5 0 0 0 0 1h12a.5.5 0 0 0 0-1z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/text-vertical-align-top.tsx b/packages/react/src/icons/text-vertical-align-top.tsx
new file mode 100644
index 0000000..074adf6
--- /dev/null
+++ b/packages/react/src/icons/text-vertical-align-top.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const TextVerticalAlignTopIcon = createIcon({
+  displayName: 'TextVerticalAlignTop',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M5.5 5a.5.5 0 0 0 0 1h12a.5.5 0 0 0 0-1zm6.354 2.146a.5.5 0 0 0-.708 0l-3 3a.5.5 0 0 0 .708.708L11 8.707V16.5a.5.5 0 0 0 1 0V8.707l2.146 2.147a.5.5 0 0 0 .708-.708z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/text.tsx b/packages/react/src/icons/text.tsx
new file mode 100644
index 0000000..375e83b
--- /dev/null
+++ b/packages/react/src/icons/text.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const TextIcon = createIcon({
+  displayName: 'Text',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M19.5 4a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0V5h-6.5v14H15a.5.5 0 0 1 0 1H9a.5.5 0 0 1 0-1h2.5V5H5v2.5a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5z"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/variable-mode.tsx b/packages/react/src/icons/variable-mode.tsx
new file mode 100644
index 0000000..5d2516e
--- /dev/null
+++ b/packages/react/src/icons/variable-mode.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const VariableModeIcon = createIcon({
+  displayName: 'VariableMode',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M9.154 5.004A3 3 0 0 1 12 8v7a3 3 0 0 1-5.996.154L6 15V8a3 3 0 0 1 3-3zm7.953 7.544a.41.41 0 0 1 .512-.07A2.99 2.99 0 0 1 19 15a3 3 0 0 1-3 3h-3.29c-.371 0-.574-.492-.37-.802a.43.43 0 0 1 .356-.198H16a2 2 0 0 0 1.24-3.57c-.269-.211-.374-.64-.133-.882M9 6a2 2 0 0 0-2 2v7a2 2 0 0 0 4 0V8a2 2 0 0 0-2-2m0 8a1 1 0 1 1 0 2 1 1 0 0 1 0-2m4.305-6.918a3 3 0 0 1 2.816.797l.107.112a3 3 0 0 1 0 4.018l-.107.112-2.267 2.268a.5.5 0 0 1-.707-.707l2.267-2.268a2 2 0 0 0-1.68-3.394c-.344.046-.734-.184-.734-.53 0-.19.12-.364.305-.408"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/variable.tsx b/packages/react/src/icons/variable.tsx
new file mode 100644
index 0000000..fa3b296
--- /dev/null
+++ b/packages/react/src/icons/variable.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const VariableIcon = createIcon({
+  displayName: 'Variable',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M11 5.65a2 2 0 0 1 2 0l4 2.31a2 2 0 0 1 1 1.731v4.62a2 2 0 0 1-1 1.732l-4 2.309a2 2 0 0 1-2 0l-4-2.309a2 2 0 0 1-1-1.732.31.31 0 0 1 .31-.311h.38a.31.31 0 0 1 .31.31l.009.133c.04.305.22.578.491.734l4 2.31c.27.155.597.175.88.058l.12-.059 4-2.31a1 1 0 0 0 .491-.733L17 14.31V9.692a1 1 0 0 0-.5-.866l-4-2.308a1 1 0 0 0-1 0l-4 2.308-.11.074a1 1 0 0 0-.39.792.31.31 0 0 1-.309.309H6.31a.31.31 0 0 1-.31-.31A2 2 0 0 1 7 7.96zm1 4.351a2 2 0 1 1-1.935 2.499H5.5a.5.5 0 0 1 0-1h4.566A2 2 0 0 1 12 10.001m0 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/vertical-trim-cap-height.tsx b/packages/react/src/icons/vertical-trim-cap-height.tsx
new file mode 100644
index 0000000..225ab37
--- /dev/null
+++ b/packages/react/src/icons/vertical-trim-cap-height.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const VerticalTrimCapHeightIcon = createIcon({
+  displayName: 'VerticalTrimCapHeight',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M11.5 16a.5.5 0 1 1 0 1h-5a.5.5 0 0 1 0-1zm5-5a.5.5 0 0 1 .5.5v3.691A1.81 1.81 0 0 1 15.19 17h-.484a2.2 2.2 0 0 1-1.56-.646.5.5 0 0 1 .706-.707c.226.226.534.353.854.353h.484a.81.81 0 0 0 .809-.809v-.46a2 2 0 1 1 .044-3.435A.5.5 0 0 1 16.5 11M9.75 9a.5.5 0 0 1 .471.335l1.75 5a.5.5 0 1 1-.943.33l-.407-1.165H8.379l-.408 1.165a.5.5 0 1 1-.943-.33l1.75-5 .031-.072A.5.5 0 0 1 9.25 9zM15 12a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-6.27.5h1.54l-.77-2.202zM17.5 7a.5.5 0 1 1 0 1h-11a.5.5 0 0 1 0-1z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/vertical-trim-standard.tsx b/packages/react/src/icons/vertical-trim-standard.tsx
new file mode 100644
index 0000000..7e7ee21
--- /dev/null
+++ b/packages/react/src/icons/vertical-trim-standard.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+
+export const VerticalTrimStandardIcon = createIcon({
+  displayName: 'VerticalTrimStandard',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      d="M17.5 18a.5.5 0 0 1 0 1h-11a.5.5 0 0 1 0-1zm-1-8a.5.5 0 0 1 .5.5v3.691A1.81 1.81 0 0 1 15.191 16h-.484a2.2 2.2 0 0 1-1.56-.646.5.5 0 1 1 .707-.707c.226.226.533.353.853.353h.484a.81.81 0 0 0 .809-.809v-.462A2 2 0 0 1 15 14a2 2 0 1 1 1.044-3.704A.5.5 0 0 1 16.5 10M9.75 8a.5.5 0 0 1 .472.335l1.75 5a.5.5 0 1 1-.944.33l-.407-1.165H8.38l-.407 1.165a.5.5 0 1 1-.944-.33l1.75-5 .032-.072A.5.5 0 0 1 9.25 8zM15 11a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-6.27.5h1.54L9.5 9.298zM17.5 5a.5.5 0 0 1 0 1h-11a.5.5 0 0 1 0-1z"
+    />
+  ),
+});
diff --git a/packages/react/src/icons/video.tsx b/packages/react/src/icons/video.tsx
new file mode 100644
index 0000000..3b86c79
--- /dev/null
+++ b/packages/react/src/icons/video.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+
+export const VideoIcon = createIcon({
+  displayName: 'Video',
+  path: (
+    <path
+      fill="var(--color-icon, currentColor)"
+      fillRule="evenodd"
+      d="M8 7h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1M6 8a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zm4.996 1.132A1 1 0 0 0 9.5 10v4a1 1 0 0 0 1.496.868l3.5-2a1 1 0 0 0 0-1.736zm.504 4.297-1 .571v-4l1 .571 1.492.853L14 12l-1.008.576z"
+      clipRule="evenodd"
+    />
+  ),
+});
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 07635cb..95d58a7 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -1 +1,2 @@
 export * from './components';
+export * from './icons';
diff --git a/packages/react/src/playground.mdx b/packages/react/src/playground.mdx
new file mode 100644
index 0000000..3a5a13f
--- /dev/null
+++ b/packages/react/src/playground.mdx
@@ -0,0 +1,30 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Playground" />
+
+# Playground
+
+The playground is a consumer smoke test: it imports `@thinkbuff/figma-react`
+through the published package surface, the same way an installed plugin does.
+
+Embedded below on the deployed docs site — or
+
+<a
+  href="../playground/"
+  target="_blank"
+  rel="noreferrer"
+>
+  open it full page
+</a>
+.
+
+<iframe
+  src="../playground/"
+  title="Playground"
+  style={{
+    width: '100%',
+    height: '80vh',
+    border: '1px solid var(--figma-color-border, #d7d7d7)',
+    borderRadius: 4,
+  }}
+/>
diff --git a/packages/react/src/utils/add-class-name.ts b/packages/react/src/utils/add-class-name.ts
new file mode 100644
index 0000000..10b63f5
--- /dev/null
+++ b/packages/react/src/utils/add-class-name.ts
@@ -0,0 +1,28 @@
+import type { ClassValue } from 'clsx';
+
+import { cn } from './cn';
+
+type ClassName<State> = string | ((state: State) => string | undefined) | undefined;
+
+function addClassName(className: string | undefined, ...values: ClassValue[]): string;
+function addClassName<State>(
+  className: ClassName<State>,
+  ...values: ClassValue[]
+): ClassName<State>;
+/**
+ * Merges component classes into a `className` prop while preserving the
+ * callback form (`(state) => string`) that Base UI parts accept.
+ */
+function addClassName<State>(
+  className: ClassName<State>,
+  ...values: ClassValue[]
+): ClassName<State> {
+  if (typeof className === 'function') {
+    return (state) => cn(values, className(state));
+  }
+
+  return cn(values, className);
+}
+
+export type { ClassName };
+export { addClassName };
diff --git a/packages/react/src/utils/cn.ts b/packages/react/src/utils/cn.ts
index eae9c7a..1813a1c 100644
--- a/packages/react/src/utils/cn.ts
+++ b/packages/react/src/utils/cn.ts
@@ -1,9 +1,35 @@
 import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { extendTailwindMerge } from 'tailwind-merge';
+
+const twMerge = extendTailwindMerge<'icon-color'>({
+  extend: {
+    theme: {
+      text: [
+        'figma-body-small',
+        'figma-body-small-strong',
+        'figma-body-medium',
+        'figma-body-medium-strong',
+        'figma-body-large',
+        'figma-body-large-strong',
+        'figma-heading-small',
+        'figma-heading-medium',
+        'figma-heading-large',
+        'figma-heading-display',
+      ],
+      font: ['figma', 'figma-code', 'figma-display'],
+    },
+    classGroups: {
+      'font-weight': [{ font: ['figma-default', 'figma-medium', 'figma-strong', 'figma-heavy'] }],
+      'icon-color': [{ icon: [(classPart: string) => classPart.startsWith('figma')] }],
+    },
+  },
+});
 
 /**
  * Merge classes
+ *
  * @param inputs
+ *
  * @returns
  */
 export function cn(...inputs: ClassValue[]) {
diff --git a/packages/react/src/utils/create-context.tsx b/packages/react/src/utils/create-context.tsx
new file mode 100644
index 0000000..1c612e6
--- /dev/null
+++ b/packages/react/src/utils/create-context.tsx
@@ -0,0 +1,38 @@
+import {
+  createContext as createReactContext,
+  useContext as useReactContext,
+  useMemo,
+  type ReactNode,
+} from 'react';
+
+function createContext<ContextValueType extends object | null>(
+  rootComponentName: string,
+  defaultContext?: ContextValueType,
+) {
+  const Context = createReactContext<ContextValueType | undefined>(defaultContext);
+
+  function Provider(props: ContextValueType & { children: ReactNode }) {
+    const { children, ...context } = props;
+    // Only re-memoize when prop values change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const value = useMemo(() => context, Object.values(context)) as ContextValueType;
+    return <Context.Provider value={value}>{children}</Context.Provider>;
+  }
+
+  function useContext(consumerName: string) {
+    const context = useReactContext(Context);
+    if (context) {
+      return context;
+    }
+    if (defaultContext !== undefined) {
+      return defaultContext;
+    }
+    // if a defaultContext wasn't specified, it's a required context.
+    throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+  }
+
+  Provider.displayName = `${rootComponentName}Provider`;
+  return [Provider, useContext] as const;
+}
+
+export { createContext };
diff --git a/packages/react/src/utils/index.ts b/packages/react/src/utils/index.ts
index 9ae36a5..7861566 100644
--- a/packages/react/src/utils/index.ts
+++ b/packages/react/src/utils/index.ts
@@ -1 +1,6 @@
+export * from './add-class-name';
 export * from './cn';
+export * from './create-context';
+export * from './use-composed-refs';
+export * from './use-controllable-state';
+export * from './use-select-on-input-click';
diff --git a/packages/react/src/utils/use-composed-refs.ts b/packages/react/src/utils/use-composed-refs.ts
new file mode 100644
index 0000000..96da2c2
--- /dev/null
+++ b/packages/react/src/utils/use-composed-refs.ts
@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+type PossibleRef<T> = React.Ref<T> | undefined;
+
+/**
+ * Set a given ref to a given value
+ * This utility takes care of different types of refs: callback refs and RefObject(s)
+ */
+function setRef<T>(ref: PossibleRef<T>, value: T) {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref !== null && ref !== undefined) {
+    (ref as React.RefObject<T>).current = value;
+  }
+}
+
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ */
+function composeRefs<T>(...refs: PossibleRef<T>[]) {
+  return (node: T) => refs.forEach((ref) => setRef(ref, node));
+}
+
+/**
+ * A custom hook that composes multiple refs
+ * Accepts callback refs and RefObject(s)
+ */
+function useComposedRefs<T>(...refs: PossibleRef<T>[]) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return React.useCallback(composeRefs(...refs), refs);
+}
+
+export { composeRefs, useComposedRefs };
diff --git a/packages/react/src/utils/use-controllable-state.ts b/packages/react/src/utils/use-controllable-state.ts
new file mode 100644
index 0000000..46f0715
--- /dev/null
+++ b/packages/react/src/utils/use-controllable-state.ts
@@ -0,0 +1,70 @@
+import * as React from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function useCallbackRef<T extends (...args: any[]) => any>(callback: T | undefined): T {
+  const callbackRef = React.useRef(callback);
+
+  React.useEffect(() => {
+    callbackRef.current = callback;
+  });
+
+  // https://github.com/facebook/react/issues/19240
+  return React.useMemo(() => ((...args) => callbackRef.current?.(...args)) as T, []);
+}
+
+type UseControllableStateParams<T> = {
+  prop?: T | undefined;
+  defaultProp?: T | undefined;
+  onChange?: (state: T) => void;
+};
+
+type SetStateFn<T> = (prevState?: T) => T;
+
+function useControllableState<T>({
+  prop,
+  defaultProp,
+  onChange = () => {},
+}: UseControllableStateParams<T>) {
+  const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });
+  const isControlled = prop !== undefined;
+  const value = isControlled ? prop : uncontrolledProp;
+  const handleChange = useCallbackRef(onChange);
+
+  const setValue: React.Dispatch<React.SetStateAction<T | undefined>> = React.useCallback(
+    (nextValue) => {
+      if (isControlled) {
+        const setter = nextValue as SetStateFn<T>;
+        const value = typeof nextValue === 'function' ? setter(prop) : nextValue;
+        if (value !== prop) {
+          handleChange(value as T);
+        }
+      } else {
+        setUncontrolledProp(nextValue);
+      }
+    },
+    [isControlled, prop, setUncontrolledProp, handleChange],
+  );
+
+  return [value, setValue] as const;
+}
+
+function useUncontrolledState<T>({
+  defaultProp,
+  onChange,
+}: Omit<UseControllableStateParams<T>, 'prop'>) {
+  const uncontrolledState = React.useState<T | undefined>(defaultProp);
+  const [value] = uncontrolledState;
+  const prevValueRef = React.useRef(value);
+  const handleChange = useCallbackRef(onChange);
+
+  React.useEffect(() => {
+    if (prevValueRef.current !== value) {
+      handleChange(value as T);
+      prevValueRef.current = value;
+    }
+  }, [value, prevValueRef, handleChange]);
+
+  return uncontrolledState;
+}
+
+export { useControllableState };
diff --git a/packages/react/src/utils/use-select-on-input-click.ts b/packages/react/src/utils/use-select-on-input-click.ts
new file mode 100644
index 0000000..7e52e81
--- /dev/null
+++ b/packages/react/src/utils/use-select-on-input-click.ts
@@ -0,0 +1,32 @@
+import { useCallback, useState, type MouseEvent } from 'react';
+
+/**
+ * Selects the target element's contents on click, unless the user is selecting manually.
+ */
+export function useSelectOnInputClick() {
+  const [mustSelect, setMustSelect] = useState(true);
+
+  const handleFocus = useCallback(() => {
+    setMustSelect(true);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setMustSelect(false);
+  }, []);
+
+  const handleMouseUp = useCallback(
+    (event: MouseEvent<HTMLInputElement>) => {
+      if (mustSelect && event.currentTarget.selectionStart === event.currentTarget.selectionEnd) {
+        event.currentTarget.select();
+        setMustSelect(false);
+      }
+    },
+    [mustSelect],
+  );
+
+  return {
+    onMouseLeave: handleMouseLeave,
+    onMouseUp: handleMouseUp,
+    onFocus: handleFocus,
+  };
+}
diff --git a/packages/react/styles.css b/packages/react/styles.css
new file mode 100644
index 0000000..fa41011
--- /dev/null
+++ b/packages/react/styles.css
@@ -0,0 +1,2 @@
+@import '@thinkbuff/figma-theme/css/index.css';
+@source './dist';
diff --git a/packages/react/tests/components/action-icon-split/action-icon-split.test.tsx b/packages/react/tests/components/action-icon-split/action-icon-split.test.tsx
new file mode 100644
index 0000000..b7c1f09
--- /dev/null
+++ b/packages/react/tests/components/action-icon-split/action-icon-split.test.tsx
@@ -0,0 +1,68 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page, userEvent } from 'vitest/browser';
+
+import { ActionIconSplit } from '~/components/action-icon-split/index';
+
+function Split({
+  onPrimary,
+  onChevron,
+  ...props
+}: React.ComponentProps<typeof ActionIconSplit.Root> & {
+  onPrimary?: () => void;
+  onChevron?: () => void;
+}) {
+  return (
+    <ActionIconSplit.Root {...props}>
+      <ActionIconSplit.Button
+        aria-label="Run"
+        onClick={onPrimary}
+      />
+      <ActionIconSplit.Chevron
+        aria-label="More options"
+        onClick={onChevron}
+      />
+    </ActionIconSplit.Root>
+  );
+}
+
+describe('ActionIconSplit', () => {
+  it('renders two labelled buttons', async () => {
+    await render(<Split />);
+
+    await expect.element(page.getByRole('button', { name: 'Run' })).toBeVisible();
+    await expect.element(page.getByRole('button', { name: 'More options' })).toBeVisible();
+  });
+
+  it('fires each half independently', async () => {
+    const onPrimary = vi.fn<() => void>();
+    const onChevron = vi.fn<() => void>();
+    await render(
+      <Split
+        onPrimary={onPrimary}
+        onChevron={onChevron}
+      />,
+    );
+
+    await userEvent.click(page.getByRole('button', { name: 'Run' }));
+    expect(onPrimary).toHaveBeenCalledOnce();
+    expect(onChevron).not.toHaveBeenCalled();
+
+    await userEvent.click(page.getByRole('button', { name: 'More options' }));
+    expect(onChevron).toHaveBeenCalledOnce();
+    expect(onPrimary).toHaveBeenCalledOnce();
+  });
+
+  it('disables both halves', async () => {
+    const onPrimary = vi.fn<() => void>();
+    await render(
+      <Split
+        disabled
+        onPrimary={onPrimary}
+      />,
+    );
+
+    await expect.element(page.getByRole('button', { name: 'Run' })).toBeDisabled();
+    await expect.element(page.getByRole('button', { name: 'More options' })).toBeDisabled();
+  });
+});
diff --git a/packages/react/tests/components/action-icon/action-icon.test.tsx b/packages/react/tests/components/action-icon/action-icon.test.tsx
new file mode 100644
index 0000000..f732a35
--- /dev/null
+++ b/packages/react/tests/components/action-icon/action-icon.test.tsx
@@ -0,0 +1,42 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page, userEvent } from 'vitest/browser';
+
+import { ActionIcon } from '~/components/action-icon/action-icon';
+
+describe('ActionIcon', () => {
+  it('renders a button with an accessible name', async () => {
+    await render(<ActionIcon aria-label="Settings" />);
+
+    await expect.element(page.getByRole('button', { name: 'Settings' })).toBeVisible();
+  });
+
+  it('fires onClick when clicked', async () => {
+    const onClick = vi.fn<() => void>();
+    await render(
+      <ActionIcon
+        aria-label="Settings"
+        onClick={onClick}
+      />,
+    );
+
+    await userEvent.click(page.getByRole('button', { name: 'Settings' }));
+
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it('does not fire onClick when disabled', async () => {
+    const onClick = vi.fn<() => void>();
+    await render(
+      <ActionIcon
+        aria-label="Settings"
+        disabled
+        onClick={onClick}
+      />,
+    );
+
+    await expect.element(page.getByRole('button', { name: 'Settings' })).toBeDisabled();
+
+    expect(onClick).not.toHaveBeenCalled();
+  });
+});
diff --git a/packages/react/tests/components/alert-dialog/alert-dialog.test.tsx b/packages/react/tests/components/alert-dialog/alert-dialog.test.tsx
new file mode 100644
index 0000000..831fc26
--- /dev/null
+++ b/packages/react/tests/components/alert-dialog/alert-dialog.test.tsx
@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page, userEvent } from 'vitest/browser';
+
+import { AlertDialog } from '~/components/alert-dialog/index';
+import { Button } from '~/components/button';
+
+import { clickOutside } from '../../test-utils';
+
+function Fixture() {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger render={<Button variant="secondary">Delete account</Button>} />
+      <AlertDialog.Content>
+        <AlertDialog.Header>
+          <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
+        </AlertDialog.Header>
+        <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>
+        <AlertDialog.Footer>
+          <AlertDialog.Cancel render={<Button variant="secondary">Cancel</Button>} />
+          <AlertDialog.Action render={<Button>Yes, delete account</Button>} />
+        </AlertDialog.Footer>
+      </AlertDialog.Content>
+    </AlertDialog.Root>
+  );
+}
+
+describe('AlertDialog', () => {
+  it('opens an alertdialog with an accessible name', async () => {
+    await render(<Fixture />);
+
+    await userEvent.click(page.getByRole('button', { name: 'Delete account' }));
+
+    await expect
+      .element(page.getByRole('alertdialog', { name: 'Are you absolutely sure?' }))
+      .toBeVisible();
+  });
+
+  it('closes on Cancel', async () => {
+    await render(<Fixture />);
+
+    await userEvent.click(page.getByRole('button', { name: 'Delete account' }));
+    await userEvent.click(page.getByRole('button', { name: 'Cancel' }));
+
+    await expect.element(page.getByRole('alertdialog')).not.toBeInTheDocument();
+  });
+
+  it('closes on Action', async () => {
+    await render(<Fixture />);
+
+    await userEvent.click(page.getByRole('button', { name: 'Delete account' }));
+    await userEvent.click(page.getByRole('button', { name: 'Yes, delete account' }));
+
+    await expect.element(page.getByRole('alertdialog')).not.toBeInTheDocument();
+  });
+
+  it('does not close on an outside click', async () => {
+    await render(<Fixture />);
+
+    await userEvent.click(page.getByRole('button', { name: 'Delete account' }));
+    await expect.element(page.getByRole('alertdialog')).toBeVisible();
+
+    await clickOutside();
+
+    await expect.element(page.getByRole('alertdialog')).toBeVisible();
+  });
+});
diff --git a/packages/react/tests/components/avatar/avatar.test.tsx b/packages/react/tests/components/avatar/avatar.test.tsx
new file mode 100644
index 0000000..b526710
--- /dev/null
+++ b/packages/react/tests/components/avatar/avatar.test.tsx
@@ -0,0 +1,63 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+import { Avatar, AvatarGroup } from '~/components/avatar/avatar';
+
+describe('Avatar', () => {
+  it('renders the name initial on a palette color', async () => {
+    const { container } = await render(<Avatar name="Ada" />);
+    const avatar = container.querySelector('[role="img"]') as HTMLElement;
+    expect(avatar.textContent).toBe('A');
+    expect(avatar.className).toContain('bg-figma-multiplayerpurple');
+    expect(avatar.getAttribute('aria-label')).toBe('Ada');
+  });
+
+  it('renders a photo when src is provided', async () => {
+    const { container } = await render(
+      <Avatar
+        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"
+        name="Ada"
+      />,
+    );
+    const img = container.querySelector('img');
+    expect(img?.getAttribute('alt')).toBe('Ada');
+  });
+
+  it('applies size and square shape', async () => {
+    const { container } = await render(
+      <Avatar
+        name="Ada"
+        size="small"
+        shape="square"
+      />,
+    );
+    const avatar = container.querySelector('[role="img"]') as HTMLElement;
+    expect(avatar.className).toContain('size-4');
+    // The spec's small square avatar is r=2; default/large are r=5.
+    expect(avatar.className).toContain('rounded-figma-sm');
+  });
+
+  it('renders the disabled state', async () => {
+    const { container } = await render(
+      <Avatar
+        name="Ada"
+        disabled
+      />,
+    );
+    const avatar = container.querySelector('[role="img"]') as HTMLElement;
+    expect(avatar.className).toContain('bg-figma-tertiary');
+    expect(avatar.className).not.toContain('multiplayer');
+  });
+
+  it('groups avatars in a pill', async () => {
+    const { container } = await render(
+      <AvatarGroup data-testid="group">
+        <Avatar name="A" />
+        <Avatar name="B" />
+      </AvatarGroup>,
+    );
+    const group = container.querySelector('[data-testid="group"]') as HTMLElement;
+    expect(group.querySelectorAll('[role="img"]')).toHaveLength(2);
+    expect(group.className).toContain('rounded-full');
+  });
+});
diff --git a/packages/react/tests/components/badge/badge.test.tsx b/packages/react/tests/components/badge/badge.test.tsx
new file mode 100644
index 0000000..29168f5
--- /dev/null
+++ b/packages/react/tests/components/badge/badge.test.tsx
@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page } from 'vitest/browser';
+
+import { Badge } from '~/components/badge/badge';
+
+describe('Badge', () => {
+  it('renders children inside a span', async () => {
+    await render(<Badge>New</Badge>);
+    await expect.element(page.getByText('New')).toBeVisible();
+  });
+
+  it('renders a leading icon', async () => {
+    const { container } = await render(
+      <Badge
+        color="success"
+        icon={<span data-testid="dot" />}
+      >
+        Merged
+      </Badge>,
+    );
+    expect(container.querySelector('[data-testid="dot"]')).not.toBeNull();
+  });
+
+  it('applies strong and light color styles', async () => {
+    const { container } = await render(
+      <>
+        <Badge
+          variant="strong"
+          color="danger"
+        >
+          Removed
+        </Badge>
+        <Badge
+          variant="light"
+          color="danger"
+        >
+          Modified
+        </Badge>
+      </>,
+    );
+    const [strong, light] = container.querySelectorAll('span');
+    expect(strong.className).toContain('bg-figma-danger');
+    expect(light.className).toContain('border-figma-danger');
+  });
+});
diff --git a/packages/react/tests/components/button/button-variants.test.ts b/packages/react/tests/components/button/button-variants.test.ts
new file mode 100644
index 0000000..afcec0f
--- /dev/null
+++ b/packages/react/tests/components/button/button-variants.test.ts
@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest';
+
+import { buttonVariants } from '~/components/button/button-variants';
+
+describe('buttonVariants', () => {
+  it('applies the default variant', () => {
+    const classes = buttonVariants();
+    expect(classes).toContain('bg-figma-brand');
+    expect(classes).toContain('text-figma-onbrand');
+    expect(classes).toContain('h-6');
+    expect(classes).toContain('px-2');
+  });
+
+  it('applies per-variant classes', () => {
+    expect(buttonVariants({ variant: 'secondary' })).toContain('outline-figma-bordertranslucent');
+    expect(buttonVariants({ variant: 'destructive' })).toContain('bg-figma-danger');
+    expect(buttonVariants({ variant: 'secondary-destructive' })).toContain(
+      'outline-figma-border-danger',
+    );
+    expect(buttonVariants({ variant: 'inverse' })).toContain('bg-figma-inverse');
+    expect(buttonVariants({ variant: 'success' })).toContain('bg-figma-success');
+    expect(buttonVariants({ variant: 'figjam' })).toContain('bg-figma-figjam');
+    expect(buttonVariants({ variant: 'link' })).toContain('text-figma-brand');
+    expect(buttonVariants({ variant: 'link-danger' })).toContain('text-figma-danger');
+    const ghost = buttonVariants({ variant: 'ghost' });
+    expect(ghost).toContain('hover:bg-figma-bgtransparent-secondary-hover');
+    expect(ghost).toContain('active:bg-figma-bgtransparent-secondary-pressed');
+  });
+
+  it('applies the focus ring only to filled variants via shadow-figma-focus-inset', () => {
+    for (const variant of ['primary', 'destructive', 'success', 'figjam', 'inverse'] as const) {
+      expect(buttonVariants({ variant })).toContain('shadow-figma-focus-inset');
+    }
+    for (const variant of ['secondary', 'ghost', 'link'] as const) {
+      expect(buttonVariants({ variant })).not.toContain('shadow-figma-focus-inset');
+    }
+  });
+
+  it('applies icon lead padding and sizes', () => {
+    expect(buttonVariants({ icon: true })).toContain('pl-1');
+    expect(buttonVariants({ icon: true, size: 'large' })).toContain('pl-1');
+    expect(buttonVariants({ size: 'large' })).toContain('h-8');
+    expect(buttonVariants({ size: 'wide' })).toContain('w-full');
+  });
+});
diff --git a/packages/react/tests/components/checkbox/checkbox.test.tsx b/packages/react/tests/components/checkbox/checkbox.test.tsx
new file mode 100644
index 0000000..5e6f5fe
--- /dev/null
+++ b/packages/react/tests/components/checkbox/checkbox.test.tsx
@@ -0,0 +1,148 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page, userEvent } from 'vitest/browser';
+
+import { Checkbox } from '~/components/checkbox/checkbox';
+import { Label } from '~/components/label';
+
+import { firstArg } from '../../test-utils';
+
+describe('Checkbox', () => {
+  it('toggles aria-checked on click', async () => {
+    await render(<Checkbox aria-label="Accept" />);
+
+    const checkbox = page.getByRole('checkbox', { name: 'Accept' });
+    await expect.element(checkbox).toHaveAttribute('aria-checked', 'false');
+
+    await userEvent.click(checkbox);
+    await expect.element(checkbox).toHaveAttribute('aria-checked', 'true');
+
+    await userEvent.click(checkbox);
+    await expect.element(checkbox).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('toggles with Space key', async () => {
+    await render(<Checkbox aria-label="Accept" />);
+
+    const checkbox = page.getByRole('checkbox', { name: 'Accept' });
+    (checkbox.element() as HTMLElement).focus();
+
+    await userEvent.keyboard('{ }');
+    await expect.element(checkbox).toHaveAttribute('aria-checked', 'true');
+
+    await userEvent.keyboard('{ }');
+    await expect.element(checkbox).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('respects controlled checked', async () => {
+    await render(
+      <Checkbox
+        aria-label="Accept"
+        checked
+      />,
+    );
+
+    await expect
+      .element(page.getByRole('checkbox', { name: 'Accept' }))
+      .toHaveAttribute('aria-checked', 'true');
+  });
+
+  it('reports aria-checked="mixed" when indeterminate', async () => {
+    await render(
+      <Checkbox
+        aria-label="Accept"
+        indeterminate
+      />,
+    );
+
+    await expect
+      .element(page.getByRole('checkbox', { name: 'Accept' }))
+      .toHaveAttribute('aria-checked', 'mixed');
+  });
+
+  it('does not toggle when disabled', async () => {
+    const onCheckedChange = vi.fn<() => void>();
+    await render(
+      <Checkbox
+        aria-label="Accept"
+        disabled
+        onCheckedChange={onCheckedChange}
+      />,
+    );
+
+    const checkbox = page.getByRole('checkbox', { name: 'Accept' });
+    await expect.element(checkbox).toBeDisabled();
+
+    expect(onCheckedChange).not.toHaveBeenCalled();
+  });
+
+  it('calls onCheckedChange with the new state', async () => {
+    const onCheckedChange = vi.fn<() => void>();
+    await render(
+      <Checkbox
+        aria-label="Accept"
+        onCheckedChange={onCheckedChange}
+      />,
+    );
+
+    await userEvent.click(page.getByRole('checkbox', { name: 'Accept' }));
+
+    expect(onCheckedChange).toHaveBeenCalledOnce();
+    expect(firstArg(onCheckedChange)).toBe(true);
+  });
+
+  it('toggles when an associated label is clicked', async () => {
+    await render(
+      <>
+        <Checkbox id="accept" />
+        <Label htmlFor="accept">Accept terms</Label>
+      </>,
+    );
+
+    const checkbox = page.getByRole('checkbox', { name: 'Accept terms' });
+    await userEvent.click(page.getByText('Accept terms'));
+
+    await expect.element(checkbox).toHaveAttribute('aria-checked', 'true');
+  });
+});
+
+describe('Checkbox variants', () => {
+  it('muted renders a secondary box with a secondary check', async () => {
+    await render(
+      <Checkbox
+        aria-label="Muted"
+        variant="muted"
+        checked
+        data-testid="muted"
+      />,
+    );
+
+    const box = document.querySelector<HTMLElement>('[data-testid="muted"]')!;
+    const probe = document.createElement('div');
+    document.body.appendChild(probe);
+    probe.style.backgroundColor = 'var(--figma-color-bg-secondary)';
+    const secondary = getComputedStyle(probe).backgroundColor;
+    probe.remove();
+
+    expect(getComputedStyle(box).backgroundColor).toBe(secondary);
+  });
+
+  it('ghost renders a dark menu-colored box', async () => {
+    await render(
+      <Checkbox
+        aria-label="Ghost"
+        variant="ghost"
+        data-testid="ghost"
+      />,
+    );
+
+    const box = document.querySelector<HTMLElement>('[data-testid="ghost"]')!;
+    const probe = document.createElement('div');
+    document.body.appendChild(probe);
+    probe.style.backgroundColor = 'var(--figma-color-bg-menu)';
+    const menuColor = getComputedStyle(probe).backgroundColor;
+    probe.remove();
+
+    expect(getComputedStyle(box).backgroundColor).toBe(menuColor);
+  });
+});
diff --git a/packages/react/tests/components/context-menu/context-menu.test.tsx b/packages/react/tests/components/context-menu/context-menu.test.tsx
new file mode 100644
index 0000000..49cfff6
--- /dev/null
+++ b/packages/react/tests/components/context-menu/context-menu.test.tsx
@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page } from 'vitest/browser';
+
+import { ContextMenu } from '~/components/context-menu/index';
+
+function TriggerBox(props: React.ComponentPropsWithRef<'div'>) {
+  return <div {...props}>Right click here</div>;
+}
+
+function Fixture() {
+  return (
+    <ContextMenu.Root>
+      <ContextMenu.Trigger render={<TriggerBox />} />
+      <ContextMenu.Content>
+        <ContextMenu.Item>Paste here</ContextMenu.Item>
+        <ContextMenu.Item>Duplicate</ContextMenu.Item>
+      </ContextMenu.Content>
+    </ContextMenu.Root>
+  );
+}
+
+describe('ContextMenu', () => {
+  it('opens the menu on right-click', async () => {
+    await render(<Fixture />);
+    const trigger = page.getByText('Right click here');
+    trigger
+      .element()
+      .dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, clientX: 20, clientY: 20 }));
+    await expect.poll(() => page.getByRole('menu').query()).not.toBeNull();
+    await expect
+      .poll(() => page.getByRole('menuitem', { name: 'Paste here' }).query())
+      .not.toBeNull();
+  });
+});
diff --git a/packages/react/tests/components/dialog/dialog.test.tsx b/packages/react/tests/components/dialog/dialog.test.tsx
new file mode 100644
index 0000000..e2e6902
--- /dev/null
+++ b/packages/react/tests/components/dialog/dialog.test.tsx
@@ -0,0 +1,103 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page, userEvent } from 'vitest/browser';
+
+import { Button } from '~/components/button';
+import { Dialog } from '~/components/dialog/index';
+
+import { firstArg } from '../../test-utils';
+
+function Fixture({
+  open,
+  onOpenChange,
+}: {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}) {
+  return (
+    <Dialog.Root
+      onOpenChange={onOpenChange}
+      open={open}
+    >
+      <Dialog.Trigger render={<Button variant="secondary">Edit profile</Button>} />
+      <Dialog.Content>
+        <Dialog.Header>
+          <Dialog.Title>Edit profile</Dialog.Title>
+          <Dialog.Close render={<Button variant="secondary">Close</Button>} />
+        </Dialog.Header>
+        <Dialog.Description>Make changes to your profile here.</Dialog.Description>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+}
+
+describe('Dialog', () => {
+  it('opens a dialog with an accessible name and description', async () => {
+    await render(<Fixture />);
+
+    await userEvent.click(page.getByRole('button', { name: 'Edit profile' }));
+
+    const dialog = page.getByRole('dialog', { name: 'Edit profile' });
+    await expect.element(dialog).toBeVisible();
+    await expect
+      .element(dialog)
+      .toContainElement(
+        page.getByText('Make changes to your profile here.').element() as HTMLElement,
+      );
+  });
+
+  it('moves focus inside the dialog on open', async () => {
+    await render(<Fixture />);
+
+    await userEvent.click(page.getByRole('button', { name: 'Edit profile' }));
+    await expect.element(page.getByRole('dialog')).toBeVisible();
+
+    const dialog = page.getByRole('dialog').element() as HTMLElement;
+    expect(dialog.contains(document.activeElement)).toBe(true);
+  });
+
+  it('closes on Escape', async () => {
+    await render(<Fixture />);
+
+    await userEvent.click(page.getByRole('button', { name: 'Edit profile' }));
+    await expect.element(page.getByRole('dialog')).toBeVisible();
+
+    await userEvent.keyboard('{Escape}');
+    await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('closes via the close button and returns focus to the trigger', async () => {
+    await render(<Fixture />);
+
+    const trigger = page.getByRole('button', { name: 'Edit profile' });
+    await userEvent.click(trigger);
+    await userEvent.click(page.getByRole('button', { name: 'Close' }));
+
+    await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
+    await expect.element(trigger).toHaveFocus();
+  });
+
+  it('supports controlled open with onOpenChange', async () => {
+    const onOpenChange = vi.fn<() => void>();
+    const screen = await render(
+      <Fixture
+        onOpenChange={onOpenChange}
+        open={false}
+      />,
+    );
+
+    await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
+
+    await screen.rerender(
+      <Fixture
+        onOpenChange={onOpenChange}
+        open
+      />,
+    );
+    await expect.element(page.getByRole('dialog', { name: 'Edit profile' })).toBeVisible();
+
+    await userEvent.keyboard('{Escape}');
+    expect(onOpenChange).toHaveBeenCalled();
+    expect(firstArg(onOpenChange)).toBe(false);
+  });
+});
diff --git a/packages/react/tests/components/dropdown-menu/dropdown-menu.test.tsx b/packages/react/tests/components/dropdown-menu/dropdown-menu.test.tsx
new file mode 100644
index 0000000..5cbff8c
--- /dev/null
+++ b/packages/react/tests/components/dropdown-menu/dropdown-menu.test.tsx
@@ -0,0 +1,187 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page, userEvent } from 'vitest/browser';
+
+import { DropdownMenu } from '~/components/dropdown-menu/index';
+
+import { clickForce, firstArg } from '../../test-utils';
+
+function Fixture({
+  onSelect,
+  onCheckedChange,
+  onSwitchChange,
+  onRadioChange,
+  checked = true,
+  radioValue = 'a',
+}: {
+  onSelect?: () => void;
+  onCheckedChange?: (checked: boolean) => void;
+  onSwitchChange?: (checked: boolean) => void;
+  onRadioChange?: (value: string) => void;
+  checked?: boolean;
+  radioValue?: string;
+}) {
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>Open menu</DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.Item onClick={onSelect}>Undo</DropdownMenu.Item>
+        <DropdownMenu.Item
+          disabled
+          onClick={onSelect}
+        >
+          Redo
+        </DropdownMenu.Item>
+        <DropdownMenu.CheckboxItem
+          checked={checked}
+          onCheckedChange={onCheckedChange}
+        >
+          Show grid
+        </DropdownMenu.CheckboxItem>
+        <DropdownMenu.ItemSwitch
+          defaultChecked
+          onCheckedChange={onSwitchChange}
+        >
+          Toggle row
+        </DropdownMenu.ItemSwitch>
+        <DropdownMenu.RadioGroup
+          value={radioValue}
+          onValueChange={onRadioChange}
+        >
+          <DropdownMenu.RadioItem value="a">Layout A</DropdownMenu.RadioItem>
+          <DropdownMenu.RadioItem value="b">Layout B</DropdownMenu.RadioItem>
+        </DropdownMenu.RadioGroup>
+        <DropdownMenu.Sub>
+          <DropdownMenu.SubTrigger>More tools</DropdownMenu.SubTrigger>
+          <DropdownMenu.SubContent>
+            <DropdownMenu.Item>Save page</DropdownMenu.Item>
+          </DropdownMenu.SubContent>
+        </DropdownMenu.Sub>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+}
+
+describe('DropdownMenu', () => {
+  it('opens a menu on trigger click', async () => {
+    await render(<Fixture />);
+
+    const trigger = page.getByRole('button', { name: 'Open menu' });
+    const triggerEl = trigger.element() as HTMLElement;
+    await expect.element(trigger).toHaveAttribute('aria-expanded', 'false');
+
+    await userEvent.click(trigger);
+
+    // while the modal menu is open the trigger is hidden from the
+    // accessibility tree, so assert on the captured element
+    expect(triggerEl.getAttribute('aria-expanded')).toBe('true');
+    await expect.element(page.getByRole('menu')).toBeVisible();
+  });
+
+  it('fires the item handler on click', async () => {
+    const onSelect = vi.fn<() => void>();
+    await render(<Fixture onSelect={onSelect} />);
+
+    await userEvent.click(page.getByRole('button', { name: 'Open menu' }));
+    await userEvent.click(page.getByRole('menuitem', { name: 'Undo' }));
+
+    expect(onSelect).toHaveBeenCalledOnce();
+  });
+
+  it('closes the menu after an item click (expected behavior)', async () => {
+    await render(<Fixture />);
+
+    await userEvent.click(page.getByRole('button', { name: 'Open menu' }));
+    await userEvent.click(page.getByRole('menuitem', { name: 'Undo' }));
+
+    await expect.element(page.getByRole('menu')).not.toBeInTheDocument();
+  });
+
+  it('toggles a checkbox item', async () => {
+    const onCheckedChange = vi.fn<() => void>();
+    await render(
+      <Fixture
+        checked
+        onCheckedChange={onCheckedChange}
+      />,
+    );
+
+    await userEvent.click(page.getByRole('button', { name: 'Open menu' }));
+
+    const item = page.getByRole('menuitemcheckbox', { name: 'Show grid' });
+    await expect.element(item).toHaveAttribute('aria-checked', 'true');
+
+    await userEvent.click(item);
+    expect(onCheckedChange).toHaveBeenCalledOnce();
+    expect(firstArg(onCheckedChange)).toBe(false);
+  });
+
+  it('toggles a switch item without closing the menu', async () => {
+    const onSwitchChange = vi.fn<(checked: boolean) => void>();
+    await render(<Fixture onSwitchChange={onSwitchChange} />);
+
+    await userEvent.click(page.getByRole('button', { name: 'Open menu' }));
+
+    const item = page.getByRole('menuitemcheckbox', { name: 'Toggle row' });
+    await expect.element(item).toHaveAttribute('aria-checked', 'true');
+
+    await userEvent.click(item);
+    expect(onSwitchChange).toHaveBeenCalledOnce();
+    expect(firstArg(onSwitchChange)).toBe(false);
+
+    await expect.element(page.getByRole('menu')).toBeVisible();
+    await expect.element(item).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('renders radio items with checked state', async () => {
+    await render(<Fixture radioValue="b" />);
+
+    await userEvent.click(page.getByRole('button', { name: 'Open menu' }));
+
+    await expect
+      .element(page.getByRole('menuitemradio', { name: 'Layout B' }))
+      .toHaveAttribute('aria-checked', 'true');
+    await expect
+      .element(page.getByRole('menuitemradio', { name: 'Layout A' }))
+      .toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('opens a submenu with ArrowRight', async () => {
+    await render(<Fixture />);
+
+    await userEvent.click(page.getByRole('button', { name: 'Open menu' }));
+
+    const subTrigger = page.getByRole('menuitem', { name: 'More tools' });
+    (subTrigger.element() as HTMLElement).focus();
+    await userEvent.keyboard('{ArrowRight}');
+
+    await expect.element(page.getByRole('menuitem', { name: 'Save page' })).toBeVisible();
+  });
+
+  it('closes on Escape and returns focus to the trigger', async () => {
+    await render(<Fixture />);
+
+    const trigger = page.getByRole('button', { name: 'Open menu' });
+    await userEvent.click(trigger);
+    await expect.element(page.getByRole('menu')).toBeVisible();
+
+    await userEvent.keyboard('{Escape}');
+
+    await expect.element(page.getByRole('menu')).not.toBeInTheDocument();
+    await expect.element(trigger).toHaveFocus();
+  });
+
+  it('does not fire the handler for a disabled item', async () => {
+    const onSelect = vi.fn<() => void>();
+    await render(<Fixture onSelect={onSelect} />);
+
+    await userEvent.click(page.getByRole('button', { name: 'Open menu' }));
+
+    const disabled = page.getByRole('menuitem', { name: 'Redo' });
+    await expect.element(disabled).toHaveAttribute('aria-disabled', 'true');
+
+    await clickForce(disabled);
+
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+});
diff --git a/packages/react/tests/components/input/input-variants.test.ts b/packages/react/tests/components/input/input-variants.test.ts
new file mode 100644
index 0000000..b452fcc
--- /dev/null
+++ b/packages/react/tests/components/input/input-variants.test.ts
@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest';
+
+import { inputVariants } from '~/components/input/input-variants';
+
+describe('inputVariants', () => {
+  it('applies the default variant', () => {
+    expect(inputVariants()).toMatchInlineSnapshot(
+      `"w-full text-figma-body-medium text-figma fill-figma-icon cursor-default bg-figma-secondary bg-clip-border outline-solid outline-1 -outline-offset-1 outline-transparent rounded-figma-md placeholder:text-figma-tertiary focus:outline-figma-border-selected not-disabled:not-focus:hover:outline-figma-border"`,
+    );
+  });
+
+  it('applies the border variant', () => {
+    expect(inputVariants({ variant: 'border' })).toMatchInlineSnapshot(
+      `"w-full text-figma-body-medium text-figma fill-figma-icon cursor-default bg-figma-secondary bg-clip-border outline-solid outline-1 -outline-offset-1 outline-transparent rounded-figma-md placeholder:text-figma-tertiary focus:outline-figma-border-selected outline-figma-border"`,
+    );
+  });
+
+  it('applies invalid and disabled states', () => {
+    expect(inputVariants({ invalid: true })).toContain('outline-figma-border-danger');
+    expect(inputVariants({ disabled: true })).toContain('cursor-not-allowed');
+    expect(inputVariants({ disabled: true })).toContain('text-figma-disabled');
+  });
+});
diff --git a/packages/react/tests/components/input/input.test.tsx b/packages/react/tests/components/input/input.test.tsx
new file mode 100644
index 0000000..09eb2ae
--- /dev/null
+++ b/packages/react/tests/components/input/input.test.tsx
@@ -0,0 +1,79 @@
+import { createRef } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page, userEvent } from 'vitest/browser';
+
+import { Input, InputSlot } from '~/components/input/input';
+
+describe('Input', () => {
+  it('renders a textbox', async () => {
+    await render(<Input aria-label="Name" />);
+
+    await expect.element(page.getByRole('textbox', { name: 'Name' })).toBeVisible();
+  });
+
+  it('updates value and calls onChange when typing', async () => {
+    const onChange = vi.fn<() => void>();
+    await render(
+      <Input
+        aria-label="Name"
+        onChange={onChange}
+      />,
+    );
+
+    const input = page.getByRole('textbox', { name: 'Name' });
+    await userEvent.fill(input, 'hello');
+
+    await expect.element(input).toHaveValue('hello');
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('is disabled', async () => {
+    await render(
+      <Input
+        aria-label="Name"
+        disabled
+      />,
+    );
+
+    await expect.element(page.getByRole('textbox', { name: 'Name' })).toBeDisabled();
+  });
+
+  it('is marked invalid', async () => {
+    await render(
+      <Input
+        aria-label="Name"
+        invalid
+      />,
+    );
+
+    await expect
+      .element(page.getByRole('textbox', { name: 'Name' }))
+      .toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('forwards ref to the input element', async () => {
+    const ref = createRef<HTMLInputElement>();
+    await render(<Input ref={ref} />);
+
+    expect(ref.current).toBeInstanceOf(HTMLInputElement);
+  });
+
+  it('focuses the input when the wrapper is clicked', async () => {
+    const ref = createRef<HTMLInputElement>();
+    await render(
+      <Input
+        ref={ref}
+        aria-label="Name"
+      >
+        <InputSlot>
+          <span>icon</span>
+        </InputSlot>
+      </Input>,
+    );
+
+    await userEvent.click(page.getByText('icon'));
+
+    await expect.element(page.getByRole('textbox', { name: 'Name' })).toHaveFocus();
+  });
+});
diff --git a/packages/react/tests/components/label/label.test.tsx b/packages/react/tests/components/label/label.test.tsx
new file mode 100644
index 0000000..ecf9521
--- /dev/null
+++ b/packages/react/tests/components/label/label.test.tsx
@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page, userEvent } from 'vitest/browser';
+
+import { Label } from '~/components/label/label';
+
+describe('Label', () => {
+  it('renders label text', async () => {
+    await render(<Label htmlFor="name">Name</Label>);
+
+    await expect.element(page.getByText('Name')).toBeVisible();
+  });
+
+  it('focuses the associated control on click', async () => {
+    await render(
+      <>
+        <Label htmlFor="name">Name</Label>
+        <input
+          id="name"
+          type="text"
+        />
+      </>,
+    );
+
+    await userEvent.click(page.getByText('Name'));
+
+    await expect.element(page.getByRole('textbox')).toHaveFocus();
+  });
+});
diff --git a/packages/react/tests/components/link-tooltip/link-tooltip.test.tsx b/packages/react/tests/components/link-tooltip/link-tooltip.test.tsx
new file mode 100644
index 0000000..f97e234
--- /dev/null
+++ b/packages/react/tests/components/link-tooltip/link-tooltip.test.tsx
@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+import {
+  LinkTooltip,
+  LinkTooltipAction,
+  LinkTooltipInput,
+  LinkTooltipItem,
+  LinkTooltipPopup,
+} from '~/components/link-tooltip/link-tooltip';
+import { Root as PopoverRoot, Trigger as PopoverTrigger } from '~/components/popover';
+
+describe('LinkTooltip', () => {
+  it('renders the URL input row', async () => {
+    const { container } = await render(
+      <LinkTooltip>
+        <LinkTooltipInput placeholder="Type or paste URL" />
+      </LinkTooltip>,
+    );
+    expect(container.querySelector('input')).toHaveAttribute('placeholder', 'Type or paste URL');
+  });
+
+  it('renders action rows with dividers', async () => {
+    const { container } = await render(
+      <LinkTooltip arrow>
+        <LinkTooltipItem icon={<svg data-testid="icon" />}>
+          <LinkTooltipAction>Open google.com</LinkTooltipAction>
+          <LinkTooltipAction>Edit</LinkTooltipAction>
+        </LinkTooltipItem>
+      </LinkTooltip>,
+    );
+    expect(container.querySelector('[data-testid=icon]')).toBeTruthy();
+    const buttons = container.querySelectorAll('button');
+    expect(buttons).toHaveLength(2);
+    expect(buttons[0]).toHaveTextContent('Open google.com');
+    expect(buttons[1]).toHaveTextContent('Edit');
+    expect(container.querySelector('svg[aria-hidden=true]')).toBeTruthy();
+  });
+
+  it('clips action hover backgrounds to the rounded corner', async () => {
+    const { container } = await render(
+      <LinkTooltip arrow>
+        <LinkTooltipItem>
+          <LinkTooltipAction>Open google.com</LinkTooltipAction>
+          <LinkTooltipAction>Edit</LinkTooltipAction>
+        </LinkTooltipItem>
+      </LinkTooltip>,
+    );
+    const item = container.querySelector<HTMLElement>('.overflow-hidden');
+    expect(item).toBeTruthy();
+    const style = getComputedStyle(item!);
+    expect(style.overflowX).toBe('hidden');
+    expect(parseFloat(style.borderTopRightRadius)).toBeGreaterThan(0);
+  });
+
+  it('renders the popup anchored to the trigger with a side-aware arrow', async () => {
+    await render(
+      <PopoverRoot open>
+        <PopoverTrigger render={<button>field</button>} />
+        <LinkTooltipPopup side="bottom">
+          <LinkTooltipItem>
+            <LinkTooltipAction>Edit</LinkTooltipAction>
+          </LinkTooltipItem>
+        </LinkTooltipPopup>
+      </PopoverRoot>,
+    );
+    const positioner = document.querySelector<HTMLElement>('[data-side]');
+    expect(positioner).toBeTruthy();
+    expect(positioner).toHaveAttribute('data-side', 'bottom');
+    const buttons = document.querySelectorAll('[data-side] button');
+    expect(buttons[0]).toHaveTextContent('Edit');
+    expect(document.querySelector('[data-side] svg[aria-hidden=true]')).toBeTruthy();
+  });
+});
diff --git a/packages/react/tests/components/popover/popover.test.tsx b/packages/react/tests/components/popover/popover.test.tsx
new file mode 100644
index 0000000..66eff79
--- /dev/null
+++ b/packages/react/tests/components/popover/popover.test.tsx
@@ -0,0 +1,57 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page, userEvent } from 'vitest/browser';
+
+import { Button } from '~/components/button';
+import * as Popover from '~/components/popover/popover';
+
+import { clickOutside } from '../../test-utils';
+
+function Fixture() {
+  return (
+    <Popover.Root>
+      <Popover.Trigger render={<Button variant="secondary">Open popover</Button>} />
+      <Popover.Content>
+        <div>Popover content</div>
+      </Popover.Content>
+    </Popover.Root>
+  );
+}
+
+describe('Popover', () => {
+  it('opens content on trigger click', async () => {
+    await render(<Fixture />);
+
+    const trigger = page.getByRole('button', { name: 'Open popover' });
+    await expect.element(trigger).toHaveAttribute('aria-expanded', 'false');
+
+    await userEvent.click(trigger);
+
+    await expect.element(trigger).toHaveAttribute('aria-expanded', 'true');
+    await expect.element(page.getByText('Popover content')).toBeVisible();
+  });
+
+  it('closes on Escape and returns focus to the trigger', async () => {
+    await render(<Fixture />);
+
+    const trigger = page.getByRole('button', { name: 'Open popover' });
+    await userEvent.click(trigger);
+    await expect.element(page.getByText('Popover content')).toBeVisible();
+
+    await userEvent.keyboard('{Escape}');
+
+    await expect.element(page.getByText('Popover content')).not.toBeInTheDocument();
+    await expect.element(trigger).toHaveFocus();
+  });
+
+  it('closes on an outside click', async () => {
+    await render(<Fixture />);
+
+    await userEvent.click(page.getByRole('button', { name: 'Open popover' }));
+    await expect.element(page.getByText('Popover content')).toBeVisible();
+
+    await clickOutside();
+
+    await expect.element(page.getByText('Popover content')).not.toBeInTheDocument();
+  });
+});
diff --git a/packages/react/tests/components/radio/radio.test.tsx b/packages/react/tests/components/radio/radio.test.tsx
new file mode 100644
index 0000000..cbe2e25
--- /dev/null
+++ b/packages/react/tests/components/radio/radio.test.tsx
@@ -0,0 +1,206 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page, userEvent } from 'vitest/browser';
+
+import { Radio } from '~/components/radio/index';
+
+import { firstArg, pressKey } from '../../test-utils';
+
+function Fixture(props: React.ComponentProps<typeof Radio.Group>) {
+  return (
+    <Radio.Group {...props}>
+      <Radio.GroupItem
+        aria-label="Option A"
+        value="a"
+      />
+      <Radio.GroupItem
+        aria-label="Option B"
+        value="b"
+      />
+      <Radio.GroupItem
+        aria-label="Option C"
+        value="c"
+      />
+    </Radio.Group>
+  );
+}
+
+describe('Radio', () => {
+  it('renders a radiogroup with radios', async () => {
+    await render(<Fixture />);
+
+    await expect.element(page.getByRole('radiogroup')).toBeVisible();
+    await expect.element(page.getByRole('radio', { name: 'Option A' })).toBeVisible();
+    await expect.element(page.getByRole('radio', { name: 'Option B' })).toBeVisible();
+    await expect.element(page.getByRole('radio', { name: 'Option C' })).toBeVisible();
+  });
+
+  it('selects a radio on click', async () => {
+    await render(<Fixture />);
+
+    await userEvent.click(page.getByRole('radio', { name: 'Option B' }));
+
+    await expect
+      .element(page.getByRole('radio', { name: 'Option B' }))
+      .toHaveAttribute('aria-checked', 'true');
+    await expect
+      .element(page.getByRole('radio', { name: 'Option A' }))
+      .toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('moves selection with arrow keys', async () => {
+    await render(<Fixture defaultValue="a" />);
+
+    (page.getByRole('radio', { name: 'Option A' }).element() as HTMLElement).focus();
+    pressKey('ArrowDown');
+
+    await expect
+      .element(page.getByRole('radio', { name: 'Option B' }))
+      .toHaveAttribute('aria-checked', 'true');
+
+    pressKey('ArrowDown');
+    await expect
+      .element(page.getByRole('radio', { name: 'Option C' }))
+      .toHaveAttribute('aria-checked', 'true');
+  });
+
+  it('skips disabled items during keyboard navigation', async () => {
+    await render(
+      <Radio.Group defaultValue="a">
+        <Radio.GroupItem
+          aria-label="Option A"
+          value="a"
+        />
+        <Radio.GroupItem
+          aria-label="Option B"
+          disabled
+          value="b"
+        />
+        <Radio.GroupItem
+          aria-label="Option C"
+          value="c"
+        />
+      </Radio.Group>,
+    );
+
+    (page.getByRole('radio', { name: 'Option A' }).element() as HTMLElement).focus();
+    pressKey('ArrowDown');
+
+    await expect
+      .element(page.getByRole('radio', { name: 'Option C' }))
+      .toHaveAttribute('aria-checked', 'true');
+    await expect
+      .element(page.getByRole('radio', { name: 'Option B' }))
+      .toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('respects defaultValue', async () => {
+    await render(<Fixture defaultValue="b" />);
+
+    await expect
+      .element(page.getByRole('radio', { name: 'Option B' }))
+      .toHaveAttribute('aria-checked', 'true');
+  });
+
+  it('calls onValueChange with the selected value', async () => {
+    const onValueChange = vi.fn<() => void>();
+    await render(<Fixture onValueChange={onValueChange} />);
+
+    await userEvent.click(page.getByRole('radio', { name: 'Option C' }));
+
+    expect(onValueChange).toHaveBeenCalledOnce();
+    expect(firstArg(onValueChange)).toBe('c');
+  });
+});
+
+describe('RadioGroupItem checked state', () => {
+  it('renders the dot via the root background and the border gap', async () => {
+    await render(
+      <Radio.Group defaultValue="a">
+        <Radio.GroupItem
+          aria-label="Option A"
+          value="a"
+          data-testid="checked-radio"
+        />
+        <Radio.GroupItem
+          aria-label="Option B"
+          value="b"
+          data-testid="unchecked-radio"
+        />
+      </Radio.Group>,
+    );
+
+    const checked = document.querySelector<HTMLElement>('[data-testid="checked-radio"]')!;
+    const unchecked = document.querySelector<HTMLElement>('[data-testid="unchecked-radio"]')!;
+
+    const probe = document.createElement('div');
+    document.body.appendChild(probe);
+    probe.style.backgroundColor = 'var(--figma-color-icon)';
+    const iconColor = getComputedStyle(probe).backgroundColor;
+    probe.style.backgroundColor = 'var(--figma-color-bg)';
+    const bgColor = getComputedStyle(probe).backgroundColor;
+    probe.remove();
+
+    // checked: the 8px padding box is the icon-colored dot, the 4px border is the bg-colored gap
+    expect(getComputedStyle(checked).backgroundColor).toBe(iconColor);
+    expect(getComputedStyle(checked).borderColor).toBe(bgColor);
+    // unchecked: fully bg-colored inside the icon-colored outline ring
+    expect(getComputedStyle(unchecked).backgroundColor).toBe(bgColor);
+  });
+});
+
+describe('RadioGroupItem button variant', () => {
+  it('renders a pill label radio that checks on click', async () => {
+    await render(
+      <Radio.Group defaultValue="a">
+        <Radio.GroupItem
+          value="a"
+          variant="button"
+        >
+          Alpha
+        </Radio.GroupItem>
+        <Radio.GroupItem
+          value="b"
+          variant="button"
+        >
+          Beta
+        </Radio.GroupItem>
+      </Radio.Group>,
+    );
+
+    const alpha = page.getByRole('radio', { name: 'Alpha' });
+    const beta = page.getByRole('radio', { name: 'Beta' });
+    await expect.element(alpha).toBeVisible();
+    await expect.element(alpha).toHaveAttribute('aria-checked', 'true');
+
+    await userEvent.click(beta);
+    await expect.element(beta).toHaveAttribute('aria-checked', 'true');
+    await expect.element(alpha).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('applies the selected fill and border when checked', async () => {
+    await render(
+      <Radio.Group defaultValue="a">
+        <Radio.GroupItem
+          value="a"
+          variant="button"
+          data-testid="pill"
+        />
+        ,
+      </Radio.Group>,
+    );
+
+    const pill = document.querySelector<HTMLElement>('[data-testid="pill"]')!;
+    const probe = document.createElement('div');
+    document.body.appendChild(probe);
+    probe.style.backgroundColor = 'var(--figma-color-bg-selected)';
+    const selectedBg = getComputedStyle(probe).backgroundColor;
+    probe.style.borderColor = 'var(--figma-color-border-brand)';
+    const brandBorder = getComputedStyle(probe).borderColor;
+    probe.remove();
+
+    const style = getComputedStyle(pill);
+    expect(style.backgroundColor).toBe(selectedBg);
+    expect(style.borderColor).toBe(brandBorder);
+  });
+});
diff --git a/packages/react/tests/components/scroll-area/scroll-area.test.tsx b/packages/react/tests/components/scroll-area/scroll-area.test.tsx
new file mode 100644
index 0000000..585efd4
--- /dev/null
+++ b/packages/react/tests/components/scroll-area/scroll-area.test.tsx
@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page } from 'vitest/browser';
+
+import { ScrollArea } from '~/components/scroll-area/scroll-area';
+
+describe('ScrollArea', () => {
+  it('renders children', async () => {
+    await render(
+      <ScrollArea>
+        <div>First item</div>
+      </ScrollArea>,
+    );
+
+    await expect.element(page.getByText('First item')).toBeVisible();
+  });
+
+  it('overflowing content is scrollable', async () => {
+    await render(
+      <ScrollArea style={{ height: 80, width: 120 }}>
+        {Array.from({ length: 50 }, (_, i) => (
+          <div key={i}>{`Item ${i + 1}`}</div>
+        ))}
+      </ScrollArea>,
+    );
+
+    const last = page.getByText('Item 50');
+    await expect.element(last).toBeInTheDocument();
+
+    // find the scrollable ancestor of the content
+    let scroller = (last.element() as HTMLElement).parentElement;
+    while (scroller && scroller.scrollHeight <= scroller.clientHeight) {
+      scroller = scroller.parentElement;
+    }
+
+    expect(scroller).not.toBeNull();
+    expect(scroller!.scrollHeight).toBeGreaterThan(scroller!.clientHeight);
+
+    scroller!.scrollTop = 100;
+    expect(scroller!.scrollTop).toBeGreaterThan(0);
+  });
+});
diff --git a/packages/react/tests/components/segmented-control/segmented-control.test.tsx b/packages/react/tests/components/segmented-control/segmented-control.test.tsx
new file mode 100644
index 0000000..7ca07fd
--- /dev/null
+++ b/packages/react/tests/components/segmented-control/segmented-control.test.tsx
@@ -0,0 +1,82 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { userEvent } from 'vitest/browser';
+
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+  SegmentedControlText,
+} from '~/components/segmented-control/segmented-control';
+
+import { firstArg, getToggleable, isOn } from '../../test-utils';
+
+function Fixture(props: React.ComponentProps<typeof SegmentedControl>) {
+  return (
+    <SegmentedControl {...props}>
+      <SegmentedControlItem value="left">
+        <SegmentedControlText>Left</SegmentedControlText>
+      </SegmentedControlItem>
+      <SegmentedControlItem value="center">
+        <SegmentedControlText>Center</SegmentedControlText>
+      </SegmentedControlItem>
+      <SegmentedControlItem value="right">
+        <SegmentedControlText>Right</SegmentedControlText>
+      </SegmentedControlItem>
+    </SegmentedControl>
+  );
+}
+
+describe('SegmentedControl', () => {
+  it('selects a single segment at a time', async () => {
+    await render(<Fixture defaultValue="left" />);
+
+    expect(isOn(getToggleable('Left').element())).toBe(true);
+
+    await userEvent.click(getToggleable('Center'));
+    expect(isOn(getToggleable('Center').element())).toBe(true);
+    expect(isOn(getToggleable('Left').element())).toBe(false);
+  });
+
+  it('does not deselect the selected segment', async () => {
+    const onValueChange = vi.fn<(value: string) => void>();
+    await render(
+      <Fixture
+        defaultValue="left"
+        onValueChange={onValueChange}
+      />,
+    );
+
+    await userEvent.click(getToggleable('Left'));
+    expect(isOn(getToggleable('Left').element())).toBe(true);
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
+  it('calls onValueChange with the selected value', async () => {
+    const onValueChange = vi.fn<(value: string) => void>();
+    await render(
+      <Fixture
+        defaultValue="left"
+        onValueChange={onValueChange}
+      />,
+    );
+
+    await userEvent.click(getToggleable('Right'));
+    expect(firstArg<string>(onValueChange)).toBe('right');
+  });
+
+  it('supports controlled value', async () => {
+    const onValueChange = vi.fn<(value: string) => void>();
+    await render(
+      <Fixture
+        value="center"
+        onValueChange={onValueChange}
+      />,
+    );
+
+    expect(isOn(getToggleable('Center').element())).toBe(true);
+
+    await userEvent.click(getToggleable('Right'));
+    expect(firstArg<string>(onValueChange)).toBe('right');
+    expect(isOn(getToggleable('Center').element())).toBe(true);
+  });
+});
diff --git a/packages/react/tests/components/select/select.test.tsx b/packages/react/tests/components/select/select.test.tsx
new file mode 100644
index 0000000..194e09a
--- /dev/null
+++ b/packages/react/tests/components/select/select.test.tsx
@@ -0,0 +1,107 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page, userEvent } from 'vitest/browser';
+
+import { Select } from '~/components/select/index';
+
+import { firstArg } from '../../test-utils';
+
+const items = { apple: 'Apple', banana: 'Banana', cherry: 'Cherry' };
+
+function Fixture(props: React.ComponentProps<typeof Select.Root>) {
+  return (
+    // Base UI: the trigger shows item labels only when `items` is provided.
+    <Select.Root
+      items={items}
+      {...props}
+    >
+      <Select.Trigger aria-label="Fruit">
+        <Select.Value placeholder="Pick a fruit" />
+      </Select.Trigger>
+      <Select.Content>
+        <Select.Item value="apple">Apple</Select.Item>
+        <Select.Item value="banana">Banana</Select.Item>
+        <Select.Item value="cherry">Cherry</Select.Item>
+      </Select.Content>
+    </Select.Root>
+  );
+}
+
+describe('Select', () => {
+  it('renders a combobox trigger', async () => {
+    await render(<Fixture />);
+
+    await expect.element(page.getByRole('combobox', { name: 'Fruit' })).toBeVisible();
+  });
+
+  it('opens a listbox on click and selects an option', async () => {
+    await render(<Fixture />);
+
+    const trigger = page.getByRole('combobox', { name: 'Fruit' });
+    await userEvent.click(trigger);
+
+    await expect.element(page.getByRole('listbox')).toBeVisible();
+    await userEvent.click(page.getByRole('option', { name: 'Banana' }));
+
+    await expect.element(page.getByRole('listbox')).not.toBeInTheDocument();
+    expect((trigger.element() as HTMLElement).textContent).toContain('Banana');
+  });
+
+  it('opens with the keyboard and selects with ArrowDown + Enter', async () => {
+    await render(<Fixture />);
+
+    const trigger = page.getByRole('combobox', { name: 'Fruit' });
+    (trigger.element() as HTMLElement).focus();
+
+    await userEvent.keyboard('{ArrowDown}');
+    await expect.element(page.getByRole('listbox')).toBeVisible();
+
+    await userEvent.keyboard('{ArrowDown}');
+    await userEvent.keyboard('{Enter}');
+
+    await expect.element(page.getByRole('listbox')).not.toBeInTheDocument();
+    expect((trigger.element() as HTMLElement).textContent).toContain('Banana');
+  });
+
+  it('closes on Escape', async () => {
+    await render(<Fixture />);
+
+    const trigger = page.getByRole('combobox', { name: 'Fruit' });
+    await userEvent.click(trigger);
+    await expect.element(page.getByRole('listbox')).toBeVisible();
+
+    await userEvent.keyboard('{Escape}');
+    await expect.element(page.getByRole('listbox')).not.toBeInTheDocument();
+    // Base UI: focus returns to the trigger (the Radix wrapper suppressed this).
+    await expect.element(trigger).toHaveFocus();
+  });
+
+  it('does not open when the trigger is disabled', async () => {
+    await render(
+      <Select.Root disabled>
+        <Select.Trigger aria-label="Fruit">
+          <Select.Value placeholder="Pick a fruit" />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="apple">Apple</Select.Item>
+        </Select.Content>
+      </Select.Root>,
+    );
+
+    const trigger = page.getByRole('combobox', { name: 'Fruit' });
+    await expect.element(trigger).toBeDisabled();
+
+    await expect.element(page.getByRole('listbox')).not.toBeInTheDocument();
+  });
+
+  it('calls onValueChange with the selected value', async () => {
+    const onValueChange = vi.fn<() => void>();
+    await render(<Fixture onValueChange={onValueChange} />);
+
+    await userEvent.click(page.getByRole('combobox', { name: 'Fruit' }));
+    await userEvent.click(page.getByRole('option', { name: 'Cherry' }));
+
+    expect(onValueChange).toHaveBeenCalledOnce();
+    expect(firstArg(onValueChange)).toBe('cherry');
+  });
+});
diff --git a/packages/react/tests/components/separator/separator.test.tsx b/packages/react/tests/components/separator/separator.test.tsx
new file mode 100644
index 0000000..a358b74
--- /dev/null
+++ b/packages/react/tests/components/separator/separator.test.tsx
@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page } from 'vitest/browser';
+
+import { Separator } from '~/components/separator/separator';
+
+describe('Separator', () => {
+  it('is not exposed to the accessibility tree when decorative', async () => {
+    await render(<Separator decorative />);
+
+    await expect.element(page.getByRole('separator')).not.toBeInTheDocument();
+  });
+
+  it('has the separator role when not decorative', async () => {
+    await render(<Separator decorative={false} />);
+
+    await expect.element(page.getByRole('separator')).toBeInTheDocument();
+  });
+
+  it('exposes aria-orientation when not decorative', async () => {
+    await render(
+      <Separator
+        decorative={false}
+        orientation="vertical"
+      />,
+    );
+
+    await expect
+      .element(page.getByRole('separator'))
+      .toHaveAttribute('aria-orientation', 'vertical');
+  });
+
+  it('reports horizontal orientation', async () => {
+    await render(
+      <Separator
+        decorative={false}
+        orientation="horizontal"
+      />,
+    );
+
+    // horizontal is the implicit default: it is either explicit or omitted
+    const separator = page.getByRole('separator');
+    await expect.element(separator).toBeInTheDocument();
+    expect(separator.element().getAttribute('aria-orientation')).not.toBe('vertical');
+  });
+});
diff --git a/packages/react/tests/components/sheet/sheet.test.tsx b/packages/react/tests/components/sheet/sheet.test.tsx
new file mode 100644
index 0000000..d2dde81
--- /dev/null
+++ b/packages/react/tests/components/sheet/sheet.test.tsx
@@ -0,0 +1,101 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page, userEvent } from 'vitest/browser';
+
+import { Button } from '~/components/button';
+import { Sheet } from '~/components/sheet/index';
+
+import { firstArg } from '../../test-utils';
+
+function Fixture({
+  open,
+  onOpenChange,
+}: {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}) {
+  return (
+    <Sheet.Root
+      onOpenChange={onOpenChange}
+      open={open}
+    >
+      <Sheet.Trigger render={<Button variant="secondary">Open sheet</Button>} />
+      <Sheet.Content>
+        <Sheet.Header>
+          <Sheet.Title>Sheet title</Sheet.Title>
+          <Sheet.Close render={<Button variant="secondary">Close</Button>} />
+        </Sheet.Header>
+        <Sheet.Description>Sheet description goes here.</Sheet.Description>
+      </Sheet.Content>
+    </Sheet.Root>
+  );
+}
+
+describe('Sheet', () => {
+  it('opens a dialog with an accessible name and description', async () => {
+    await render(<Fixture />);
+
+    await userEvent.click(page.getByRole('button', { name: 'Open sheet' }));
+
+    const dialog = page.getByRole('dialog', { name: 'Sheet title' });
+    await expect.element(dialog).toBeVisible();
+    await expect
+      .element(dialog)
+      .toContainElement(page.getByText('Sheet description goes here.').element() as HTMLElement);
+  });
+
+  it('moves focus inside the sheet on open', async () => {
+    await render(<Fixture />);
+
+    await userEvent.click(page.getByRole('button', { name: 'Open sheet' }));
+    await expect.element(page.getByRole('dialog')).toBeVisible();
+
+    const dialog = page.getByRole('dialog').element() as HTMLElement;
+    expect(dialog.contains(document.activeElement)).toBe(true);
+  });
+
+  it('closes on Escape', async () => {
+    await render(<Fixture />);
+
+    await userEvent.click(page.getByRole('button', { name: 'Open sheet' }));
+    await expect.element(page.getByRole('dialog')).toBeVisible();
+
+    await userEvent.keyboard('{Escape}');
+    await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('closes via the close button and returns focus to the trigger', async () => {
+    await render(<Fixture />);
+
+    const trigger = page.getByRole('button', { name: 'Open sheet' });
+    await userEvent.click(trigger);
+    await userEvent.click(page.getByRole('button', { name: 'Close' }));
+
+    await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
+    await expect.element(trigger).toHaveFocus();
+  });
+
+  it('supports controlled open with onOpenChange', async () => {
+    const onOpenChange = vi.fn<() => void>();
+    const screen = await render(
+      <Fixture
+        onOpenChange={onOpenChange}
+        open={false}
+      />,
+    );
+
+    await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
+
+    await screen.rerender(
+      <Fixture
+        onOpenChange={onOpenChange}
+        open
+      />,
+    );
+    await expect.element(page.getByRole('dialog', { name: 'Sheet title' })).toBeVisible();
+
+    await userEvent.keyboard('{Escape}');
+    expect(onOpenChange).toHaveBeenCalled();
+    expect(firstArg(onOpenChange)).toBe(false);
+  });
+});
diff --git a/packages/react/tests/components/slider/slider.test.tsx b/packages/react/tests/components/slider/slider.test.tsx
new file mode 100644
index 0000000..6ddf0b5
--- /dev/null
+++ b/packages/react/tests/components/slider/slider.test.tsx
@@ -0,0 +1,210 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page, userEvent } from 'vitest/browser';
+
+import {
+  Slider,
+  SliderRange,
+  SliderRoot,
+  SliderThumb,
+  SliderTrack,
+} from '~/components/slider/slider';
+
+import { clickAt, firstArg } from '../../test-utils';
+
+describe('Slider', () => {
+  it('renders a slider with the current value', async () => {
+    await render(
+      <Slider
+        defaultValue={[40]}
+        max={100}
+        min={0}
+      />,
+    );
+
+    const slider = page.getByRole('slider');
+    await expect.element(slider).toBeVisible();
+    await expect.element(slider).toHaveAttribute('aria-valuenow', '40');
+    // Base UI: role=slider lives on a hidden <input type="range">, which carries native min/max attrs instead of aria-valuemin/max.
+    await expect.element(slider).toHaveAttribute('min', '0');
+    await expect.element(slider).toHaveAttribute('max', '100');
+  });
+
+  it('steps with ArrowRight and ArrowLeft', async () => {
+    await render(
+      <Slider
+        defaultValue={[40]}
+        max={100}
+        min={0}
+        step={10}
+      />,
+    );
+
+    const slider = page.getByRole('slider');
+    (slider.element() as HTMLElement).focus();
+
+    await userEvent.keyboard('{ArrowRight}');
+    await expect.element(slider).toHaveAttribute('aria-valuenow', '50');
+
+    await userEvent.keyboard('{ArrowLeft}');
+    await userEvent.keyboard('{ArrowLeft}');
+    await expect.element(slider).toHaveAttribute('aria-valuenow', '30');
+  });
+
+  it('jumps to min/max with Home and End', async () => {
+    await render(
+      <Slider
+        defaultValue={[40]}
+        max={100}
+        min={0}
+        step={10}
+      />,
+    );
+
+    const slider = page.getByRole('slider');
+    (slider.element() as HTMLElement).focus();
+
+    await userEvent.keyboard('{End}');
+    await expect.element(slider).toHaveAttribute('aria-valuenow', '100');
+
+    await userEvent.keyboard('{Home}');
+    await expect.element(slider).toHaveAttribute('aria-valuenow', '0');
+  });
+
+  it('is disabled', async () => {
+    const onValueChange = vi.fn<() => void>();
+    await render(
+      <Slider
+        defaultValue={[40]}
+        disabled
+        onValueChange={onValueChange}
+      />,
+    );
+
+    const slider = page.getByRole('slider');
+    const sliderEl = slider.element() as HTMLElement;
+
+    // Base UI: disabled state is exposed via data-disabled (the hidden input also carries the disabled attr).
+    const disabledAncestor = sliderEl.closest('[data-disabled]') as HTMLElement | null;
+    expect(disabledAncestor?.getAttribute('data-disabled')).not.toBeNull();
+
+    // pointer interaction does not change the value
+    const root = page.elementLocator(sliderEl.parentElement as Element);
+    await clickAt(root, (root.element() as HTMLElement).clientWidth - 2, 4);
+
+    await expect.element(slider).toHaveAttribute('aria-valuenow', '40');
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
+  it('renders hint ticks and emphasizes the base value', async () => {
+    const { container } = await render(
+      <Slider
+        defaultValue={[50]}
+        hints={[0, 25, 50, 75, 100]}
+        baseValue={50}
+      />,
+    );
+
+    const hints = container.querySelectorAll('[data-hint]');
+    expect(hints).toHaveLength(5);
+    const emphasized = container.querySelectorAll('[data-hint].bg-figma-icon');
+    expect(emphasized).toHaveLength(1);
+  });
+
+  it('does not snap keyboard steps, so hints are escapable', async () => {
+    await render(
+      <Slider
+        defaultValue={[50]}
+        hints={[50]}
+        step={1}
+      />,
+    );
+
+    const slider = page.getByRole('slider');
+    (slider.element() as HTMLElement).focus();
+
+    // 50 -> 49 must stay there even though 49 is inside the snap threshold.
+    await userEvent.keyboard('{ArrowLeft}');
+    await expect.element(slider).toHaveAttribute('aria-valuenow', '49');
+  });
+
+  it('snaps pointer input to the nearest hint within the threshold', async () => {
+    const { container } = await render(
+      <Slider
+        defaultValue={[0]}
+        hints={[50]}
+        step={1}
+      />,
+    );
+
+    const slider = page.getByRole('slider');
+    const root = page.elementLocator(container.firstElementChild as Element);
+    const rect = (root.element() as HTMLElement).getBoundingClientRect();
+    // click at ~48% of the draggable area (inset by 16px on each side):
+    // inside the 2% snap window around 50
+    await clickAt(root, 16 + (rect.width - 32) * 0.48, rect.height / 2);
+    await expect.element(slider).toHaveAttribute('aria-valuenow', '50');
+  });
+
+  it('exposes aria-orientation for vertical sliders', async () => {
+    await render(
+      <Slider
+        defaultValue={[40]}
+        orientation="vertical"
+      />,
+    );
+
+    await expect.element(page.getByRole('slider')).toHaveAttribute('aria-orientation', 'vertical');
+  });
+
+  it('calls onValueChange with the new value', async () => {
+    const onValueChange = vi.fn<() => void>();
+    await render(
+      <Slider
+        defaultValue={[40]}
+        max={100}
+        min={0}
+        step={10}
+        onValueChange={onValueChange}
+      />,
+    );
+
+    const slider = page.getByRole('slider');
+    (slider.element() as HTMLElement).focus();
+    await userEvent.keyboard('{ArrowRight}');
+
+    expect(onValueChange).toHaveBeenCalled();
+    // callback arity/shape varies between primitives (Radix passes an array)
+    expect([firstArg(onValueChange)].flat()[0]).toBe(50);
+  });
+});
+
+describe('range coverage', () => {
+  it('extends the indicator under the center of every thumb', async () => {
+    await render(
+      <SliderRoot
+        defaultValue={[25, 75]}
+        data-testid="slider"
+      >
+        <SliderTrack>
+          <SliderRange data-testid="range" />
+        </SliderTrack>
+        <SliderThumb index={0} />
+        <SliderThumb index={1} />
+      </SliderRoot>,
+    );
+
+    const range = document
+      .querySelector<HTMLElement>('[data-testid="range"]')!
+      .getBoundingClientRect();
+    const thumbs = [...document.querySelectorAll<HTMLElement>('[role="slider"], [data-index]')]
+      .filter((el) => el.hasAttribute('data-index'))
+      .map((el) => el.getBoundingClientRect());
+
+    const firstCenter = thumbs[0].left + thumbs[0].width / 2;
+    const lastCenter = thumbs[thumbs.length - 1].left + thumbs[thumbs.length - 1].width / 2;
+
+    expect(range.left).toBeLessThanOrEqual(firstCenter);
+    expect(range.right).toBeGreaterThanOrEqual(lastCenter);
+  });
+});
diff --git a/packages/react/tests/components/swatch/swatch.test.tsx b/packages/react/tests/components/swatch/swatch.test.tsx
new file mode 100644
index 0000000..8361256
--- /dev/null
+++ b/packages/react/tests/components/swatch/swatch.test.tsx
@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+import { Swatch } from '~/components/swatch/swatch';
+
+describe('Swatch', () => {
+  it('paints the fill over a checkerboard', async () => {
+    const { container } = await render(<Swatch fill="#ff24bd" />);
+    const layers = container.querySelectorAll('span > span');
+    expect(layers).toHaveLength(2);
+    expect((layers[0] as HTMLElement).style.background).toContain('repeating-conic-gradient');
+    expect((layers[1] as HTMLElement).style.background).toContain('rgb(255, 36, 189)');
+  });
+
+  it('applies the small size', async () => {
+    const { container } = await render(
+      <Swatch
+        size="small"
+        fill="red"
+      />,
+    );
+    expect((container.firstElementChild as HTMLElement).className).toContain('size-3');
+  });
+});
diff --git a/packages/react/tests/components/switch/switch.test.tsx b/packages/react/tests/components/switch/switch.test.tsx
new file mode 100644
index 0000000..2ae97b7
--- /dev/null
+++ b/packages/react/tests/components/switch/switch.test.tsx
@@ -0,0 +1,62 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page, userEvent } from 'vitest/browser';
+
+import { Switch } from '~/components/switch/switch';
+
+import { firstArg } from '../../test-utils';
+
+describe('Switch', () => {
+  it('toggles aria-checked on click', async () => {
+    await render(<Switch aria-label="Notifications" />);
+
+    const toggle = page.getByRole('switch', { name: 'Notifications' });
+    await expect.element(toggle).toHaveAttribute('aria-checked', 'false');
+
+    await userEvent.click(toggle);
+    await expect.element(toggle).toHaveAttribute('aria-checked', 'true');
+
+    await userEvent.click(toggle);
+    await expect.element(toggle).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('toggles with Space key', async () => {
+    await render(<Switch aria-label="Notifications" />);
+
+    const toggle = page.getByRole('switch', { name: 'Notifications' });
+    (toggle.element() as HTMLElement).focus();
+
+    await userEvent.keyboard('{ }');
+    await expect.element(toggle).toHaveAttribute('aria-checked', 'true');
+  });
+
+  it('does not toggle when disabled', async () => {
+    const onCheckedChange = vi.fn<() => void>();
+    await render(
+      <Switch
+        aria-label="Notifications"
+        disabled
+        onCheckedChange={onCheckedChange}
+      />,
+    );
+
+    await expect.element(page.getByRole('switch', { name: 'Notifications' })).toBeDisabled();
+
+    expect(onCheckedChange).not.toHaveBeenCalled();
+  });
+
+  it('calls onCheckedChange with the new state', async () => {
+    const onCheckedChange = vi.fn<() => void>();
+    await render(
+      <Switch
+        aria-label="Notifications"
+        onCheckedChange={onCheckedChange}
+      />,
+    );
+
+    await userEvent.click(page.getByRole('switch', { name: 'Notifications' }));
+
+    expect(onCheckedChange).toHaveBeenCalledOnce();
+    expect(firstArg(onCheckedChange)).toBe(true);
+  });
+});
diff --git a/packages/react/tests/components/tabs/tabs.test.tsx b/packages/react/tests/components/tabs/tabs.test.tsx
new file mode 100644
index 0000000..1ff3e3b
--- /dev/null
+++ b/packages/react/tests/components/tabs/tabs.test.tsx
@@ -0,0 +1,77 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page, userEvent } from 'vitest/browser';
+
+import { Tabs } from '~/components/tabs/index';
+
+function Fixture() {
+  return (
+    <Tabs.Root defaultValue="a">
+      <Tabs.List aria-label="Tabs">
+        <Tabs.Trigger value="a">Tab A</Tabs.Trigger>
+        <Tabs.Trigger value="b">Tab B</Tabs.Trigger>
+        <Tabs.Trigger
+          disabled
+          value="c"
+        >
+          Tab C
+        </Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content value="a">Content A</Tabs.Content>
+      <Tabs.Content value="b">Content B</Tabs.Content>
+      <Tabs.Content value="c">Content C</Tabs.Content>
+    </Tabs.Root>
+  );
+}
+
+describe('Tabs', () => {
+  it('shows the default tab panel', async () => {
+    await render(<Fixture />);
+
+    await expect
+      .element(page.getByRole('tab', { name: 'Tab A' }))
+      .toHaveAttribute('aria-selected', 'true');
+    await expect.element(page.getByRole('tabpanel')).toHaveTextContent('Content A');
+  });
+
+  it('activates a tab on click and shows its panel', async () => {
+    await render(<Fixture />);
+
+    await userEvent.click(page.getByRole('tab', { name: 'Tab B' }));
+
+    await expect
+      .element(page.getByRole('tab', { name: 'Tab B' }))
+      .toHaveAttribute('aria-selected', 'true');
+    await expect
+      .element(page.getByRole('tab', { name: 'Tab A' }))
+      .toHaveAttribute('aria-selected', 'false');
+    await expect.element(page.getByRole('tabpanel')).toHaveTextContent('Content B');
+  });
+
+  it('moves focus with arrow keys', async () => {
+    await render(<Fixture />);
+
+    await userEvent.click(page.getByRole('tab', { name: 'Tab A' }));
+    await userEvent.keyboard('{ArrowRight}');
+
+    await expect.element(page.getByRole('tab', { name: 'Tab B' })).toHaveFocus();
+  });
+
+  it('cannot select a disabled tab', async () => {
+    await render(<Fixture />);
+
+    await userEvent.click(page.getByRole('tab', { name: 'Tab A' }));
+    // Base UI: disabled tabs stay in the arrow-key order (focusable, aria-disabled) but cannot be selected.
+    await userEvent.keyboard('{ArrowLeft}');
+
+    await expect
+      .element(page.getByRole('tab', { name: 'Tab C' }))
+      .toHaveAttribute('aria-disabled', 'true');
+    await expect
+      .element(page.getByRole('tab', { name: 'Tab C' }))
+      .toHaveAttribute('aria-selected', 'false');
+    await expect
+      .element(page.getByRole('tab', { name: 'Tab A' }))
+      .toHaveAttribute('aria-selected', 'true');
+  });
+});
diff --git a/packages/react/tests/components/textarea/textarea.test.tsx b/packages/react/tests/components/textarea/textarea.test.tsx
new file mode 100644
index 0000000..3925d90
--- /dev/null
+++ b/packages/react/tests/components/textarea/textarea.test.tsx
@@ -0,0 +1,61 @@
+import { createRef } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page, userEvent } from 'vitest/browser';
+
+import { Textarea } from '~/components/textarea/textarea';
+
+describe('Textarea', () => {
+  it('renders a textbox', async () => {
+    await render(<Textarea aria-label="Bio" />);
+
+    await expect.element(page.getByRole('textbox', { name: 'Bio' })).toBeVisible();
+  });
+
+  it('updates value and calls onChange when typing', async () => {
+    const onChange = vi.fn<() => void>();
+    await render(
+      <Textarea
+        aria-label="Bio"
+        onChange={onChange}
+      />,
+    );
+
+    const textarea = page.getByRole('textbox', { name: 'Bio' });
+    await userEvent.fill(textarea, 'a few words');
+
+    await expect.element(textarea).toHaveValue('a few words');
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('is disabled', async () => {
+    await render(
+      <Textarea
+        aria-label="Bio"
+        disabled
+      />,
+    );
+
+    await expect.element(page.getByRole('textbox', { name: 'Bio' })).toBeDisabled();
+  });
+
+  it('is marked invalid', async () => {
+    await render(
+      <Textarea
+        aria-label="Bio"
+        invalid
+      />,
+    );
+
+    await expect
+      .element(page.getByRole('textbox', { name: 'Bio' }))
+      .toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('forwards ref to the textarea element', async () => {
+    const ref = createRef<HTMLTextAreaElement>();
+    await render(<Textarea ref={ref} />);
+
+    expect(ref.current).toBeInstanceOf(HTMLTextAreaElement);
+  });
+});
diff --git a/packages/react/tests/components/toast/toast.test.tsx b/packages/react/tests/components/toast/toast.test.tsx
new file mode 100644
index 0000000..56345b1
--- /dev/null
+++ b/packages/react/tests/components/toast/toast.test.tsx
@@ -0,0 +1,63 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page } from 'vitest/browser';
+
+import { toast } from '~/components/toast/toast';
+import { Toaster } from '~/components/toast/toaster';
+
+describe('Toast', () => {
+  it('renders a toast message in the Toaster', async () => {
+    await render(<Toaster />);
+
+    toast('Event has been created');
+
+    await expect.element(page.getByText('Event has been created')).toBeVisible();
+  });
+
+  it('renders variant toasts', async () => {
+    await render(<Toaster />);
+
+    toast.success('Saved successfully');
+    toast.warning('Something needs attention');
+    toast.error('Something went wrong');
+
+    await expect.element(page.getByText('Saved successfully')).toBeVisible();
+    await expect.element(page.getByText('Something needs attention')).toBeVisible();
+    await expect.element(page.getByText('Something went wrong')).toBeVisible();
+  });
+
+  it('dismisses a toast', async () => {
+    await render(<Toaster />);
+
+    const id = toast('Temporary message');
+    await expect.element(page.getByText('Temporary message')).toBeVisible();
+
+    toast.dismiss(id);
+    await expect.element(page.getByText('Temporary message')).not.toBeInTheDocument();
+  });
+
+  it('renders the action/dismiss rail', async () => {
+    await render(<Toaster />);
+
+    const onAction = vi.fn();
+    const onCancel = vi.fn();
+    toast('Short descriptive message', {
+      duration: 60_000,
+      action: { label: 'Action', onClick: onAction },
+      cancel: { label: 'Dismiss', onClick: onCancel },
+    });
+
+    const action = page.getByRole('button', { name: 'Action' });
+    const dismiss = page.getByRole('button', { name: 'Dismiss' });
+    await expect.element(action).toBeVisible();
+    await expect.element(dismiss).toBeVisible();
+    // rail cells: action in the top cell, dismiss in the bottom cell
+    await expect.element(action).toHaveAttribute('data-action');
+    await expect.element(dismiss).toHaveAttribute('data-cancel');
+
+    await action.click();
+    expect(onAction).toHaveBeenCalled();
+    // action click dismisses the toast
+    await expect.element(page.getByText('Short descriptive message')).not.toBeInTheDocument();
+  });
+});
diff --git a/packages/react/tests/components/toggle-group/toggle-group.test.tsx b/packages/react/tests/components/toggle-group/toggle-group.test.tsx
new file mode 100644
index 0000000..caff9df
--- /dev/null
+++ b/packages/react/tests/components/toggle-group/toggle-group.test.tsx
@@ -0,0 +1,76 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { userEvent } from 'vitest/browser';
+
+import { ToggleGroup, ToggleGroupItem } from '~/components/toggle-group/toggle-group';
+
+import { firstArg, getToggleable, isOn } from '../../test-utils';
+
+function Fixture(props: React.ComponentProps<typeof ToggleGroup>) {
+  return (
+    <ToggleGroup {...props}>
+      <ToggleGroupItem value="left">Left</ToggleGroupItem>
+      <ToggleGroupItem value="center">Center</ToggleGroupItem>
+      <ToggleGroupItem value="right">Right</ToggleGroupItem>
+    </ToggleGroup>
+  );
+}
+
+describe('ToggleGroup', () => {
+  it('selects a single item at a time in single mode', async () => {
+    await render(<Fixture />);
+
+    await userEvent.click(getToggleable('Left'));
+    expect(isOn(getToggleable('Left').element())).toBe(true);
+    expect(isOn(getToggleable('Center').element())).toBe(false);
+
+    await userEvent.click(getToggleable('Center'));
+    expect(isOn(getToggleable('Center').element())).toBe(true);
+    expect(isOn(getToggleable('Left').element())).toBe(false);
+  });
+
+  it('selects multiple items in multiple mode', async () => {
+    await render(<Fixture multiple />);
+
+    await userEvent.click(getToggleable('Left'));
+    await userEvent.click(getToggleable('Right'));
+
+    expect(isOn(getToggleable('Left').element())).toBe(true);
+    expect(isOn(getToggleable('Right').element())).toBe(true);
+    expect(isOn(getToggleable('Center').element())).toBe(false);
+  });
+
+  it('respects defaultValue', async () => {
+    await render(<Fixture defaultValue={['center']} />);
+
+    expect(isOn(getToggleable('Center').element())).toBe(true);
+  });
+
+  it('calls onValueChange with the new selection', async () => {
+    const onValueChange = vi.fn<() => void>();
+    await render(<Fixture onValueChange={onValueChange} />);
+
+    await userEvent.click(getToggleable('Right'));
+
+    expect(onValueChange).toHaveBeenCalledOnce();
+    expect(firstArg(onValueChange)).toEqual(['right']);
+  });
+
+  it('does not toggle a disabled item', async () => {
+    await render(
+      <ToggleGroup>
+        <ToggleGroupItem value="left">Left</ToggleGroupItem>
+        <ToggleGroupItem
+          disabled
+          value="center"
+        >
+          Center
+        </ToggleGroupItem>
+      </ToggleGroup>,
+    );
+
+    const center = getToggleable('Center');
+    await expect.element(center).toBeDisabled();
+    expect(isOn(center.element())).toBe(false);
+  });
+});
diff --git a/packages/react/tests/components/toggle/toggle.test.tsx b/packages/react/tests/components/toggle/toggle.test.tsx
new file mode 100644
index 0000000..aff315a
--- /dev/null
+++ b/packages/react/tests/components/toggle/toggle.test.tsx
@@ -0,0 +1,53 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page, userEvent } from 'vitest/browser';
+
+import { Toggle } from '~/components/toggle/toggle';
+
+import { firstArg } from '../../test-utils';
+
+describe('Toggle', () => {
+  it('toggles aria-pressed on click', async () => {
+    await render(<Toggle aria-label="Bold" />);
+
+    const toggle = page.getByRole('button', { name: 'Bold' });
+    await expect.element(toggle).toHaveAttribute('aria-pressed', 'false');
+
+    await userEvent.click(toggle);
+    await expect.element(toggle).toHaveAttribute('aria-pressed', 'true');
+
+    await userEvent.click(toggle);
+    await expect.element(toggle).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  it('calls onPressedChange with the new state', async () => {
+    const onPressedChange = vi.fn<() => void>();
+    await render(
+      <Toggle
+        aria-label="Bold"
+        onPressedChange={onPressedChange}
+      />,
+    );
+
+    await userEvent.click(page.getByRole('button', { name: 'Bold' }));
+
+    expect(onPressedChange).toHaveBeenCalledOnce();
+    expect(firstArg(onPressedChange)).toBe(true);
+  });
+
+  it('does not toggle when disabled', async () => {
+    const onPressedChange = vi.fn<() => void>();
+    await render(
+      <Toggle
+        aria-label="Bold"
+        disabled
+        onPressedChange={onPressedChange}
+      />,
+    );
+
+    const toggle = page.getByRole('button', { name: 'Bold' });
+    await expect.element(toggle).toBeDisabled();
+
+    expect(onPressedChange).not.toHaveBeenCalled();
+  });
+});
diff --git a/packages/react/tests/components/tooltip/tooltip.test.tsx b/packages/react/tests/components/tooltip/tooltip.test.tsx
new file mode 100644
index 0000000..7a5ee98
--- /dev/null
+++ b/packages/react/tests/components/tooltip/tooltip.test.tsx
@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page, userEvent } from 'vitest/browser';
+
+import { Tooltip, TooltipProvider } from '~/components/tooltip/tooltip';
+
+import { isRendered } from '../../test-utils';
+
+function Fixture() {
+  return (
+    <TooltipProvider delay={0}>
+      <Tooltip content="Helpful hint">
+        <button type="button">Hover me</button>
+      </Tooltip>
+      <div style={{ position: 'fixed', right: 4, bottom: 4 }}>Elsewhere</div>
+    </TooltipProvider>
+  );
+}
+
+describe('Tooltip', () => {
+  it('shows content on hover and hides on unhover', async () => {
+    await render(<Fixture />);
+
+    const trigger = page.getByRole('button', { name: 'Hover me' });
+    const triggerEl = trigger.element() as HTMLElement;
+    const content = page.getByText('Helpful hint');
+
+    await trigger.hover();
+    await expect.element(content).toBeInTheDocument();
+    // the matched node may be a visually-hidden accessibility node;
+    // its visible container must actually be rendered
+    expect(isRendered(content.element().parentElement as Element)).toBe(true);
+    // Base UI: the trigger carries data-popup-open while open (no aria-describedby).
+    expect(triggerEl.hasAttribute('data-popup-open')).toBe(true);
+
+    // move the pointer over unrelated content; hoverable tooltips track
+    // pointermove events, so keep moving until they register the leave
+    const elsewhere = page.getByText('Elsewhere');
+    await elsewhere.hover();
+    await expect
+      .poll(async () => {
+        await elsewhere.hover();
+        return content.elements().length === 0;
+      })
+      .toBe(true);
+    expect(triggerEl.hasAttribute('data-popup-open')).toBe(false);
+  });
+
+  it('shows content on focus and hides on Escape', async () => {
+    await render(<Fixture />);
+
+    const trigger = page.getByRole('button', { name: 'Hover me' });
+    const content = page.getByText('Helpful hint');
+
+    (trigger.element() as HTMLElement).focus();
+    await expect.element(content).toBeInTheDocument();
+    expect(isRendered(content.element().parentElement as Element)).toBe(true);
+
+    await userEvent.keyboard('{Escape}');
+    await expect.element(content).not.toBeInTheDocument();
+  });
+});
diff --git a/packages/react/tests/components/value-field/value-field-base.test.tsx b/packages/react/tests/components/value-field/value-field-base.test.tsx
new file mode 100644
index 0000000..b9751bb
--- /dev/null
+++ b/packages/react/tests/components/value-field/value-field-base.test.tsx
@@ -0,0 +1,99 @@
+import { useState } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page, userEvent } from 'vitest/browser';
+
+import type { Formatter } from '~/components/value-field/types';
+import { Base } from '~/components/value-field/value-field-base';
+
+const LABEL = 'test-field';
+const INITIAL_VALUE = 30;
+
+const formatter: Formatter<number> = {
+  parse: (input: string) => {
+    if (input.length > 0 && !isNaN(Number(input))) {
+      return { valid: true, value: Number(input) };
+    }
+
+    return { valid: false };
+  },
+  format: (value: number) => `${value}`,
+};
+
+function field() {
+  return page.getByRole('textbox', { name: LABEL });
+}
+
+describe('given a basic field', () => {
+  const VALID_VALUE = '40';
+  const INVALID_VALUE = 'dogs';
+
+  function TestControl({ onChange }: { onChange?: (value: number) => void }) {
+    const [value, setValue] = useState(INITIAL_VALUE);
+
+    function handleChange(value: number) {
+      onChange?.(value);
+      setValue(value);
+    }
+
+    return (
+      <Base
+        aria-label={LABEL}
+        value={value}
+        onChange={handleChange}
+        formatter={formatter}
+      />
+    );
+  }
+
+  it('formats correctly', async () => {
+    await render(<TestControl />);
+    await expect.element(field()).toHaveValue(formatter.format(INITIAL_VALUE));
+  });
+
+  it('saves on blur', async () => {
+    await render(<TestControl />);
+    await userEvent.click(field());
+    await userEvent.keyboard(VALID_VALUE);
+    await userEvent.keyboard('{Tab}');
+    await expect.element(field()).not.toHaveFocus();
+    await expect.element(field()).toHaveValue(VALID_VALUE);
+  });
+
+  it('reverts invalid values', async () => {
+    await render(<TestControl />);
+    await userEvent.click(field());
+    await userEvent.keyboard(INVALID_VALUE);
+    await userEvent.keyboard('{Tab}');
+    await expect.element(field()).not.toHaveFocus();
+    await expect.element(field()).toHaveValue(formatter.format(INITIAL_VALUE));
+  });
+
+  it('saves on Enter', async () => {
+    await render(<TestControl />);
+    await userEvent.click(field());
+    await userEvent.keyboard(VALID_VALUE);
+    await userEvent.keyboard('{Enter}');
+    await expect.element(field()).not.toHaveFocus();
+    await expect.element(field()).toHaveValue(VALID_VALUE);
+  });
+
+  it('reverts on Escape', async () => {
+    await render(<TestControl />);
+    await userEvent.click(field());
+    await userEvent.keyboard(VALID_VALUE);
+    await expect.element(field()).toHaveValue(VALID_VALUE);
+    await userEvent.keyboard('{Escape}');
+    await expect.element(field()).not.toHaveFocus();
+    await expect.element(field()).toHaveValue(formatter.format(INITIAL_VALUE));
+  });
+
+  it("doesn't fire onChange when submitted value is the same", async () => {
+    const changeHandler = vi.fn();
+    await render(<TestControl onChange={changeHandler} />);
+    await userEvent.click(field());
+    await userEvent.keyboard(`${INITIAL_VALUE}`);
+    await userEvent.keyboard('{Enter}');
+    expect(changeHandler).not.toBeCalled();
+  });
+});
diff --git a/packages/react/tests/components/value-field/value-field-hex.test.tsx b/packages/react/tests/components/value-field/value-field-hex.test.tsx
new file mode 100644
index 0000000..840ccc7
--- /dev/null
+++ b/packages/react/tests/components/value-field/value-field-hex.test.tsx
@@ -0,0 +1,326 @@
+import { useState } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page, userEvent } from 'vitest/browser';
+
+import { ValueField } from '~/components/value-field';
+import type { RGBA } from '~/components/value-field/types';
+import type { HexProps } from '~/components/value-field/value-field-hex';
+
+const HEX_INPUT_LABEL = 'hex';
+const ALPHA_INPUT_LABEL = 'alpha';
+
+function hexField() {
+  return page.getByRole('textbox', { name: HEX_INPUT_LABEL });
+}
+
+function alphaField() {
+  return page.getByRole('textbox', { name: ALPHA_INPUT_LABEL });
+}
+
+describe('input parsing', () => {
+  function TestHexInput(props: Partial<HexProps>) {
+    const { onChange, ...hexProps } = props;
+    const [value, setValue] = useState({ r: 0, g: 0, b: 0, a: 1 });
+
+    function setAlpha(alpha: number) {
+      setValue(({ r, g, b }) => ({ r, g, b, a: alpha }));
+    }
+
+    function handleChange(value: RGBA) {
+      setValue(value);
+      onChange?.(value);
+    }
+
+    return (
+      <ValueField.Multi>
+        <ValueField.Root>
+          <ValueField.Hex
+            aria-label={HEX_INPUT_LABEL}
+            value={value}
+            onChange={handleChange}
+            {...hexProps}
+          />
+        </ValueField.Root>
+        <ValueField.Root>
+          <ValueField.Numeric
+            aria-label={ALPHA_INPUT_LABEL}
+            value={value.a}
+            onChange={setAlpha}
+            min={0}
+            max={1}
+            targetRange={[0, 100]}
+            suffix="%"
+            precision={2}
+          />
+        </ValueField.Root>
+      </ValueField.Multi>
+    );
+  }
+
+  describe('given an input with valid hexedecimal characters', () => {
+    it.each([
+      { input: 'f', expected: { hex: 'FFFFFF', alpha: '100%' } },
+      { input: 'ff', expected: { hex: 'FFFFFF', alpha: '100%' } },
+      { input: 'fc', expected: { hex: 'FCFCFC', alpha: '100%' } },
+      { input: 'fc0', expected: { hex: 'FFCC00', alpha: '100%' } },
+      { input: 'fc00', expected: { hex: 'FFCC00', alpha: '0%' } },
+      { input: 'fc000', expected: { hex: 'FFCC00', alpha: '0%' } },
+      { input: 'fc01', expected: { hex: 'FFCC00', alpha: '6.67%' } },
+      { input: 'fc010', expected: { hex: 'FFCC00', alpha: '6.27%' } },
+      { input: 'fc0ef', expected: { hex: 'FFCC00', alpha: '93.73%' } },
+      { input: 'fcfcfc0', expected: { hex: 'FCFCFC', alpha: '0%' } },
+      { input: 'fcfcfc00', expected: { hex: 'FCFCFC', alpha: '0%' } },
+      { input: 'fcfcfc1', expected: { hex: 'FCFCFC', alpha: '6.67%' } },
+      { input: 'fcfcfc10', expected: { hex: 'FCFCFC', alpha: '6.27%' } },
+      { input: 'fcfcfcef', expected: { hex: 'FCFCFC', alpha: '93.73%' } },
+    ])('Converts $input to $expected', async ({ input, expected }) => {
+      await render(<TestHexInput />);
+      await userEvent.click(hexField());
+      await userEvent.keyboard(input);
+      await userEvent.keyboard('{Enter}');
+      await expect.element(hexField()).toHaveValue(expected.hex);
+      await expect.element(alphaField()).toHaveValue(expected.alpha);
+    });
+  });
+
+  describe('given an input containing non-hexedecimal characters', () => {
+    it.each([
+      { input: 'z', expected: { hex: '000000', alpha: '100%' } },
+      { input: '#f', expected: { hex: 'FFFFFF', alpha: '100%' } },
+      { input: 'zf', expected: { hex: 'FFFFFF', alpha: '100%' } },
+      { input: 'fz', expected: { hex: 'FFFFFF', alpha: '100%' } },
+      { input: 'zfz', expected: { hex: 'FFFFFF', alpha: '100%' } },
+      { input: '#fcd0', expected: { hex: 'FFCCDD', alpha: '0%' } },
+      { input: '#fcd00', expected: { hex: 'FFCCDD', alpha: '0%' } },
+      { input: '#fcd80', expected: { hex: 'FFCCDD', alpha: '50.2%' } },
+      { input: '#fcdef', expected: { hex: 'FFCCDD', alpha: '93.73%' } },
+      { input: '_fcd_ef', expected: { hex: 'FFCCDD', alpha: '100%' } },
+      { input: '_fcd_e_', expected: { hex: 'FFCCDD', alpha: '100%' } },
+      { input: '#ffccdd', expected: { hex: 'FFCCDD', alpha: '100%' } },
+      { input: '#ffccdd_00', expected: { hex: 'FFCCDD', alpha: '100%' } },
+      { input: '#ffccdd0', expected: { hex: 'FFCCDD', alpha: '0%' } },
+      { input: '#ffccdd00', expected: { hex: 'FFCCDD', alpha: '0%' } },
+    ])('Converts $input to $expected', async ({ input, expected }) => {
+      await render(<TestHexInput />);
+      await userEvent.click(hexField());
+      await userEvent.keyboard(input);
+      await userEvent.keyboard('{Enter}');
+      await expect.element(hexField()).toHaveValue(expected.hex);
+      await expect.element(alphaField()).toHaveValue(expected.alpha);
+    });
+  });
+
+  describe('given a valid <named-color> input', () => {
+    it.each([
+      { input: 'red', expected: { hex: 'FF0000', alpha: '100%' } },
+      { input: 'thistle', expected: { hex: 'D8BFD8', alpha: '100%' } },
+      { input: 'darkseagreen', expected: { hex: '8FBC8F', alpha: '100%' } },
+    ])('Converts $input to $expected', async ({ input, expected }) => {
+      await render(<TestHexInput />);
+      await userEvent.click(hexField());
+      await userEvent.keyboard(input);
+      await userEvent.keyboard('{Enter}');
+      await expect.element(hexField()).toHaveValue(expected.hex);
+      await expect.element(alphaField()).toHaveValue(expected.alpha);
+    });
+  });
+
+  describe('given an input with `ignoreAlpha`', () => {
+    it('ignores alpha triplet from user input', async () => {
+      const onChange = vi.fn();
+      await render(
+        <TestHexInput
+          onChange={onChange}
+          ignoreAlpha
+        />,
+      );
+      await userEvent.click(hexField());
+      await userEvent.keyboard('#FFFFFF00');
+      await userEvent.keyboard('{Enter}');
+      expect(onChange).toHaveBeenCalledWith({ r: 1, g: 1, b: 1, a: 1 });
+    });
+  });
+});
+
+describe('incrementing', () => {
+  function TestHexInput() {
+    const [value, setValue] = useState({ r: 0.5, g: 0.5, b: 0.5, a: 1 });
+    return (
+      <ValueField.Hex
+        aria-label={HEX_INPUT_LABEL}
+        value={value}
+        onChange={setValue}
+      />
+    );
+  }
+
+  async function renderAndPrepare(options: {
+    selectionStart: number;
+    selectionEnd: number;
+    key: 'ArrowUp' | 'ArrowDown';
+  }) {
+    await render(<TestHexInput />);
+    await userEvent.click(hexField());
+    const hexInput = hexField().element() as HTMLInputElement;
+    hexInput.setSelectionRange(options.selectionStart, options.selectionEnd);
+    await userEvent.keyboard(`{${options.key}}`);
+    return hexInput;
+  }
+
+  it('increments entire hex value when input value is fully selected', async () => {
+    const hexInput = await renderAndPrepare({ selectionStart: 0, selectionEnd: 6, key: 'ArrowUp' });
+    expect(hexInput.value).toBe('818181');
+  });
+
+  it('decrements entire hex value when input value is fully selected', async () => {
+    const hexInput = await renderAndPrepare({
+      selectionStart: 0,
+      selectionEnd: 6,
+      key: 'ArrowDown',
+    });
+    expect(hexInput.value).toBe('7F7F7F');
+  });
+
+  describe('given a caret or selection in or around the first hex triplet', () => {
+    it.each([
+      { start: 0, end: 0 },
+      { start: 1, end: 1 },
+      { start: 2, end: 2 },
+      { start: 0, end: 1 },
+      { start: 1, end: 2 },
+      { start: 0, end: 2 },
+    ])('increments red channel', async ({ start, end }) => {
+      const hexInput = await renderAndPrepare({
+        selectionStart: start,
+        selectionEnd: end,
+        key: 'ArrowUp',
+      });
+      expect(hexInput.value).toBe('818080');
+      await expect.poll(() => hexInput.selectionStart).toBe(0);
+      await expect.poll(() => hexInput.selectionEnd).toBe(2);
+    });
+
+    it.each([
+      { start: 0, end: 0 },
+      { start: 1, end: 1 },
+      { start: 2, end: 2 },
+      { start: 0, end: 1 },
+      { start: 1, end: 2 },
+      { start: 0, end: 2 },
+    ])('decrements red channel', async ({ start, end }) => {
+      const hexInput = await renderAndPrepare({
+        selectionStart: start,
+        selectionEnd: end,
+        key: 'ArrowDown',
+      });
+      expect(hexInput.value).toBe('7F8080');
+      await expect.poll(() => hexInput.selectionStart).toBe(0);
+      await expect.poll(() => hexInput.selectionEnd).toBe(2);
+    });
+  });
+
+  describe('given a caret or selection in or around the second hex triplet', () => {
+    it.each([
+      { start: 3, end: 3 },
+      { start: 4, end: 4 },
+      { start: 2, end: 3 },
+      { start: 2, end: 4 },
+      { start: 3, end: 4 },
+    ])('increments red channel', async ({ start, end }) => {
+      const hexInput = await renderAndPrepare({
+        selectionStart: start,
+        selectionEnd: end,
+        key: 'ArrowUp',
+      });
+      expect(hexInput.value).toBe('808180');
+      await expect.poll(() => hexInput.selectionStart).toBe(2);
+      await expect.poll(() => hexInput.selectionEnd).toBe(4);
+    });
+
+    it.each([
+      { start: 3, end: 3 },
+      { start: 4, end: 4 },
+      { start: 2, end: 3 },
+      { start: 2, end: 4 },
+      { start: 3, end: 4 },
+    ])('decrements red channel', async ({ start, end }) => {
+      const hexInput = await renderAndPrepare({
+        selectionStart: start,
+        selectionEnd: end,
+        key: 'ArrowDown',
+      });
+      expect(hexInput.value).toBe('807F80');
+      await expect.poll(() => hexInput.selectionStart).toBe(2);
+      await expect.poll(() => hexInput.selectionEnd).toBe(4);
+    });
+  });
+
+  describe('given a caret or selection in or around the third hex triplet', () => {
+    it.each([
+      { start: 5, end: 5 },
+      { start: 4, end: 5 },
+      { start: 4, end: 6 },
+      { start: 5, end: 6 },
+    ])('increments red channel', async ({ start, end }) => {
+      const hexInput = await renderAndPrepare({
+        selectionStart: start,
+        selectionEnd: end,
+        key: 'ArrowUp',
+      });
+      expect(hexInput.value).toBe('808081');
+      await expect.poll(() => hexInput.selectionStart).toBe(4);
+      await expect.poll(() => hexInput.selectionEnd).toBe(6);
+    });
+
+    it.each([
+      { start: 5, end: 5 },
+      { start: 4, end: 5 },
+      { start: 4, end: 6 },
+      { start: 5, end: 6 },
+    ])('decrements red channel', async ({ start, end }) => {
+      const hexInput = await renderAndPrepare({
+        selectionStart: start,
+        selectionEnd: end,
+        key: 'ArrowDown',
+      });
+      expect(hexInput.value).toBe('80807F');
+      await expect.poll(() => hexInput.selectionStart).toBe(4);
+      await expect.poll(() => hexInput.selectionEnd).toBe(6);
+    });
+  });
+
+  describe('given a selection including any of the characters of red and green triplets', () => {
+    it.each([
+      { start: 0, end: 3 },
+      { start: 0, end: 4 },
+      { start: 1, end: 3 },
+      { start: 1, end: 4 },
+    ])('increments red and green channels', async ({ start, end }) => {
+      const hexInput = await renderAndPrepare({
+        selectionStart: start,
+        selectionEnd: end,
+        key: 'ArrowUp',
+      });
+      expect(hexInput.value).toBe('818180');
+      await expect.poll(() => hexInput.selectionStart).toBe(0);
+      await expect.poll(() => hexInput.selectionEnd).toBe(4);
+    });
+
+    it.each([
+      { start: 0, end: 3 },
+      { start: 0, end: 4 },
+      { start: 1, end: 3 },
+      { start: 1, end: 4 },
+    ])('decrements red and green channels', async ({ start, end }) => {
+      const hexInput = await renderAndPrepare({
+        selectionStart: start,
+        selectionEnd: end,
+        key: 'ArrowDown',
+      });
+      expect(hexInput.value).toBe('7F7F80');
+      await expect.poll(() => hexInput.selectionStart).toBe(0);
+      await expect.poll(() => hexInput.selectionEnd).toBe(4);
+    });
+  });
+});
diff --git a/packages/react/tests/components/value-field/value-field-numeric-evaluator.test.ts b/packages/react/tests/components/value-field/value-field-numeric-evaluator.test.ts
new file mode 100644
index 0000000..2ec377d
--- /dev/null
+++ b/packages/react/tests/components/value-field/value-field-numeric-evaluator.test.ts
@@ -0,0 +1,162 @@
+import { describe, expect, it } from 'vitest';
+
+import { evaluateExpression } from '~/components/value-field/value-field-numeric';
+
+describe('treat percentage as value', () => {
+  const displayValue = 1;
+
+  it.each([
+    ['20', 20],
+    ['20%', 20],
+    ['20%%', 20],
+    ['%%20', 20],
+
+    ['20 + 5', 25],
+    ['20% + 5', 25],
+    ['20%% + 5', 25],
+    ['%%20 + 5', 25],
+
+    ['20 + 5%', 25],
+    ['20% + 5%', 25],
+    ['20%% + 5%', 25],
+    ['%%20 + 5%', 25],
+
+    ['20 * 5', 100],
+    ['20% * 5', 100],
+    ['20 * 5%', 100],
+    ['20% * 5%', 100],
+
+    ['20 / 5', 4],
+    ['20% / 5', 4],
+    ['20 / 5%', 4],
+    ['20% / 5%', 4],
+
+    ['(20% + 5) / 5', 5],
+    //['(20% + 5) / -5', 5], // valid, but throws due to a bug in @emmetio/math-expression
+    ['(20% + 5) * -5', -125],
+
+    ['(20 + 5) * 5', 125],
+    ['(20% + 5) * 5', 125],
+    ['(20 + 5%) * 5', 125],
+    ['(20% + 5%) * 5', 125],
+  ])('evaluates %s to %d', (expression, expected) => {
+    expect(evaluateExpression({ expression, displayValue, suffix: '%' })).toBe(expected);
+  });
+});
+
+describe('treat percentage as value with expressions containing x', () => {
+  const displayValue = 10;
+
+  it.each([
+    ['20 + 5x', 20 + 5 * displayValue],
+    ['20% + 5x', 20 + 5 * displayValue],
+    ['20%% + 5x', 20 + 5 * displayValue],
+    ['%%20 + 5x', 20 + 5 * displayValue],
+    ['x20 + 5%', displayValue * 20 + 5],
+    ['20% * 5x', 20 * 5 * displayValue],
+    ['20x * 5%', 20 * 5 * displayValue],
+    ['20% / 5x', 20 / (5 * displayValue)],
+    ['20x / 5%', (20 * displayValue) / 5],
+    ['(20% + 5) / 5x', (20 + 5) / (5 * displayValue)],
+    // ['(20% + 5) / -5x', (20 + 5) / -(5 * displayValue)], // valid, but throws due to a bug in @emmetio/math-expression
+    ['(20% + 5) * -5x', (20 + 5) * -(5 * displayValue)],
+    ['(20% + 5x) * 5', (20 + 5 * displayValue) * 5],
+    ['(20x + 5%) * 5', (20 * displayValue + 5) * 5],
+    ['(20% + 5%) * 5x', (20 + 5) * 5 * displayValue],
+  ])('evaluates %s to %d', (expression, expected) => {
+    expect(evaluateExpression({ expression, displayValue, suffix: '%' })).toBe(expected);
+  });
+});
+
+describe('non-percentage inputs', () => {
+  const displayValue = 10;
+
+  it.each([
+    ['20', 20],
+    ['20 + 5', 25],
+    ['20 * 5', 100],
+    ['20 / 5', 4],
+    ['(20 + 5) * 5', 125],
+    ['20%', displayValue * (20 / 100)],
+    ['20% + 5', displayValue * (20 / 100) + 5],
+    ['20 + 5%', 20 + displayValue * (5 / 100)],
+    ['20% + 5%', displayValue * (20 / 100) + displayValue * (5 / 100)],
+    ['20% * 5', displayValue * (20 / 100) * 5],
+    ['20 * 5%', 20 * displayValue * (5 / 100)],
+    ['20% * 5%', displayValue * (20 / 100) * displayValue * (5 / 100)],
+    ['20% / 5', (displayValue * (20 / 100)) / 5],
+    ['20 / 5%', 20 / (displayValue * (5 / 100))],
+    ['20% / 5%', (displayValue * (20 / 100)) / (displayValue * (5 / 100))],
+    ['(20% + 5) / 5', (displayValue * (20 / 100) + 5) / 5],
+    //['(20% + 5) / -5', 5], // valid, but throws due to a bug in @emmetio/math-expression
+    ['(20% + 5) * -5', (displayValue * (20 / 100) + 5) * -5],
+    ['(20% + 5) * 5', (displayValue * (20 / 100) + 5) * 5],
+    ['(20 + 5%) * 5', (20 + displayValue * (5 / 100)) * 5],
+    ['(20% + 5%) * 5', (displayValue * (20 / 100) + displayValue * (5 / 100)) * 5],
+
+    ['(%20 + 5) * -5', (displayValue * (20 / 100) + 5) * -5],
+    ['(%20 + 5) * 5', (displayValue * (20 / 100) + 5) * 5],
+    ['(20 + 5%) * 5', (20 + displayValue * (5 / 100)) * 5],
+    ['(%20 + %5) * 5', (displayValue * (20 / 100) + displayValue * (5 / 100)) * 5],
+  ])('evaluates %s to %d', (expression, expected) => {
+    expect(evaluateExpression({ expression, displayValue })).toBe(expected);
+  });
+});
+
+describe('non-percentage inputs containing % and x', () => {
+  const displayValue = 10;
+
+  it.each([
+    ['20 + 5x', 20 + 5 * displayValue],
+    ['20% + 5X', displayValue * (20 / 100) + 5 * displayValue],
+    ['x20 + 5%', displayValue * 20 + displayValue * (5 / 100)],
+    ['20% * 5x', displayValue * (20 / 100) * (5 * displayValue)],
+    ['20x * 5%', displayValue * 20 * (displayValue * (5 / 100))],
+    ['20% / 5x', (displayValue * (20 / 100)) / (5 * displayValue)],
+    ['20x / 5%', (displayValue * 20) / (displayValue * (5 / 100))],
+    ['(20% + 5) / 5x', ((displayValue * 20) / 100 + 5) / (5 * displayValue)],
+    //['(20% + 5) / -5x', ((displayValue * 20) / 100 + 5) / -(5 * displayValue)], // valid, but throws due to a bug in @emmetio/math-expression
+    ['(20% + 5) * -5X', ((displayValue * 20) / 100 + 5) * -(5 * displayValue)],
+    ['(20% + 5x) * 5', ((displayValue * 20) / 100 + 5 * displayValue) * 5],
+    ['(20x + 5%) * 5', (20 * displayValue + (displayValue * 5) / 100) * 5],
+    [
+      '(20% + 5%) * 5x',
+      ((displayValue * 20) / 100 + (displayValue * 5) / 100) * (displayValue * 5),
+    ],
+  ])('evaluates %s to %d', (expression, expected) => {
+    expect(evaluateExpression({ expression, displayValue })).toBe(expected);
+  });
+});
+
+describe('allowed units', () => {
+  const displayValue = 10;
+
+  // prettier-ignore
+  it.each([
+    ['20px', 20],
+    ['20%', 2],
+  ])('evaluates %s to %d', (expression, expected) => {
+    expect(evaluateExpression({ expression, displayValue, allowedUnits: ['px'] })).toBe(expected);
+  });
+});
+
+describe('allowed units with suffix', () => {
+  const displayValue = 10;
+
+  // prettier-ignore
+  it.each([
+    ['20px', 20],
+    ['20pixels', 20],
+    ['20%', 2],
+  ])('evaluates %s to %d', (expression, expected) => {
+    expect(evaluateExpression({ expression, displayValue, suffix: 'px', allowedUnits: ['pixels'] })).toBe(expected);
+  });
+});
+
+describe('invalid expressions', () => {
+  const displayValue = 10;
+
+  it.each([['dogs'], ['1xx'], ['2%%']])('throws error', (expression) => {
+    expect(() => evaluateExpression({ expression, displayValue })).toThrow('Invalid expression.');
+  });
+});
diff --git a/packages/react/tests/components/value-field/value-field-numeric-select.test.tsx b/packages/react/tests/components/value-field/value-field-numeric-select.test.tsx
new file mode 100644
index 0000000..01e3d9d
--- /dev/null
+++ b/packages/react/tests/components/value-field/value-field-numeric-select.test.tsx
@@ -0,0 +1,274 @@
+import { useState } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page, userEvent } from 'vitest/browser';
+
+import {
+  NumericSelect,
+  type NumericSelectProps,
+} from '~/components/value-field/value-field-numeric-select';
+
+const LABEL = 'Size';
+const OPTIONS = [10, 12, 14, 20];
+
+type TestNumericSelectProps = Partial<
+  Omit<NumericSelectProps, 'value' | 'onChange' | 'options'>
+> & {
+  initialValue: number;
+  options?: readonly number[];
+};
+
+type TestPointerEventInit = {
+  button?: number;
+  clientX?: number;
+  clientY?: number;
+  movementX?: number;
+  pointerType?: string;
+};
+
+function field() {
+  return page.getByRole('textbox', { name: LABEL });
+}
+
+function trigger() {
+  return page.getByRole('combobox', { name: 'Select value' });
+}
+
+function TestNumericSelect(props: TestNumericSelectProps) {
+  const { initialValue, options = OPTIONS, ...numericSelectProps } = props;
+  const [value, setValue] = useState(initialValue);
+
+  return (
+    <NumericSelect
+      aria-label={LABEL}
+      value={value}
+      onChange={setValue}
+      options={options}
+      {...numericSelectProps}
+    />
+  );
+}
+
+describe('NumericSelect', () => {
+  it('renders the numeric value', async () => {
+    await render(<TestNumericSelect initialValue={12} />);
+    await expect.element(field()).toHaveValue('12');
+  });
+
+  it('updates from typed input', async () => {
+    await render(<TestNumericSelect initialValue={12} />);
+    await userEvent.click(field());
+    await userEvent.keyboard('14');
+    await userEvent.keyboard('{Enter}');
+    await expect.element(field()).toHaveValue('14');
+  });
+
+  it('updates from scrubber drag', async () => {
+    const { container } = await render(<TestNumericSelect initialValue={12} />);
+    const scrubberEl = container.querySelector('[role="presentation"]');
+
+    if (!(scrubberEl instanceof HTMLElement)) {
+      throw new Error('Scrubber element not found');
+    }
+
+    await startScrubbing(scrubberEl);
+    await movePointer(4);
+    await stopScrubbing();
+
+    await expect.element(field()).toHaveValue('16');
+  });
+
+  it('updates from selected option', async () => {
+    await render(<TestNumericSelect initialValue={12} />);
+    await userEvent.click(trigger());
+    await userEvent.click(page.getByRole('option', { name: '20' }));
+    await expect.element(field()).toHaveValue('20');
+  });
+
+  it('shows the current value above options when it is not an option', async () => {
+    await render(<TestNumericSelect initialValue={20} />);
+    await userEvent.click(field());
+    await userEvent.keyboard('21');
+    await userEvent.keyboard('{Enter}');
+    await userEvent.click(trigger());
+    await expect
+      .element(page.getByRole('option', { name: '21', selected: true }))
+      .toBeInTheDocument();
+    await expect
+      .poll(() =>
+        page
+          .getByRole('option')
+          .elements()
+          .map((option) => option.textContent),
+      )
+      .toEqual(['21', '10', '12', '14', '20']);
+  });
+
+  it('reports the option highlighted with the keyboard', async () => {
+    const onItemHighlighted = vi.fn();
+    await render(
+      <TestNumericSelect
+        initialValue={12}
+        onItemHighlighted={onItemHighlighted}
+      />,
+    );
+    await userEvent.click(trigger());
+    await expect.poll(() => onItemHighlighted.mock.calls.at(-1)?.[0]).toBe(12);
+    await userEvent.keyboard('{ArrowDown}');
+    await expect.poll(() => onItemHighlighted.mock.calls.at(-1)?.[0]).toBe(14);
+  });
+
+  it('reports the hovered option, then undefined when the pointer leaves', async () => {
+    const onItemHighlighted = vi.fn();
+    await render(
+      <TestNumericSelect
+        initialValue={12}
+        onItemHighlighted={onItemHighlighted}
+      />,
+    );
+    await userEvent.click(trigger());
+    const option = page.getByRole('option', { name: '20' });
+    await userEvent.hover(option);
+    await expect.poll(() => onItemHighlighted.mock.calls.at(-1)?.[0]).toBe(20);
+    await userEvent.unhover(option);
+    await expect.poll(() => onItemHighlighted.mock.calls.at(-1)?.[0]).toBe(undefined);
+  });
+
+  it('reports undefined when the menu closes', async () => {
+    const onItemHighlighted = vi.fn();
+    await render(
+      <TestNumericSelect
+        initialValue={12}
+        onItemHighlighted={onItemHighlighted}
+      />,
+    );
+    await userEvent.click(trigger());
+    await expect.poll(() => onItemHighlighted.mock.calls.at(-1)?.[0]).toBe(12);
+    await userEvent.keyboard('{Escape}');
+    await expect.poll(() => onItemHighlighted.mock.calls.at(-1)?.[0]).toBe(undefined);
+  });
+
+  it('reports each highlight change once', async () => {
+    const onItemHighlighted = vi.fn();
+    await render(
+      <TestNumericSelect
+        initialValue={12}
+        onItemHighlighted={onItemHighlighted}
+      />,
+    );
+    await userEvent.click(trigger());
+    await expect.poll(() => onItemHighlighted.mock.calls.at(-1)?.[0]).toBe(12);
+    const option = page.getByRole('option', { name: '20' });
+    await userEvent.hover(option);
+    await userEvent.unhover(option);
+    await userEvent.keyboard('{Escape}');
+    await expect.poll(() => onItemHighlighted.mock.calls).toEqual([[12], [20], [undefined]]);
+  });
+
+  it('reports undefined after an option is selected', async () => {
+    const onItemHighlighted = vi.fn();
+    await render(
+      <TestNumericSelect
+        initialValue={12}
+        onItemHighlighted={onItemHighlighted}
+      />,
+    );
+    await userEvent.click(trigger());
+    await expect.poll(() => onItemHighlighted.mock.calls.at(-1)?.[0]).toBe(12);
+    await userEvent.click(page.getByRole('option', { name: '20' }));
+    await expect.element(field()).toHaveValue('20');
+    await expect.poll(() => onItemHighlighted.mock.calls).toEqual([[12], [20], [undefined]]);
+  });
+
+  it('reports the current value when it is not an option', async () => {
+    const onItemHighlighted = vi.fn();
+    await render(
+      <TestNumericSelect
+        initialValue={21}
+        onItemHighlighted={onItemHighlighted}
+      />,
+    );
+    await userEvent.click(trigger());
+    await expect.poll(() => onItemHighlighted.mock.calls.at(-1)?.[0]).toBe(21);
+  });
+
+  it('reports the option matched by typing', async () => {
+    const onItemHighlighted = vi.fn();
+    await render(
+      <TestNumericSelect
+        initialValue={12}
+        onItemHighlighted={onItemHighlighted}
+      />,
+    );
+    await userEvent.click(trigger());
+    await expect.poll(() => onItemHighlighted.mock.calls.at(-1)?.[0]).toBe(12);
+    await userEvent.keyboard('2');
+    await expect.poll(() => onItemHighlighted.mock.calls.at(-1)?.[0]).toBe(20);
+  });
+
+  it('reports the highlighted option again when the menu reopens', async () => {
+    const onItemHighlighted = vi.fn();
+    await render(
+      <TestNumericSelect
+        initialValue={12}
+        onItemHighlighted={onItemHighlighted}
+      />,
+    );
+    await userEvent.click(trigger());
+    await expect.poll(() => onItemHighlighted.mock.calls.at(-1)?.[0]).toBe(12);
+    await userEvent.keyboard('{Escape}');
+    await userEvent.click(trigger());
+    await expect.poll(() => onItemHighlighted.mock.calls).toEqual([[12], [undefined], [12]]);
+  });
+
+  it('disables the field and trigger', async () => {
+    await render(
+      <TestNumericSelect
+        initialValue={12}
+        disabled
+      />,
+    );
+    await expect.element(field()).toBeDisabled();
+    await expect.element(trigger()).toBeDisabled();
+  });
+});
+
+async function startScrubbing(element: HTMLElement) {
+  element.dispatchEvent(
+    createPointerEvent('pointerdown', {
+      clientX: 10,
+      clientY: 10,
+      pointerType: 'mouse',
+    }),
+  );
+}
+
+async function movePointer(movementX: number) {
+  window.dispatchEvent(
+    createPointerEvent('pointermove', {
+      movementX,
+      pointerType: 'mouse',
+    }),
+  );
+}
+
+async function stopScrubbing() {
+  window.dispatchEvent(createPointerEvent('pointerup', { pointerType: 'mouse' }));
+}
+
+function createPointerEvent(type: string, init: TestPointerEventInit = {}) {
+  const event = new MouseEvent(type, {
+    bubbles: true,
+    cancelable: true,
+    button: init.button ?? 0,
+    clientX: init.clientX ?? 0,
+    clientY: init.clientY ?? 0,
+  });
+
+  Object.defineProperties(event, {
+    movementX: { value: init.movementX ?? 0 },
+    pointerType: { value: init.pointerType ?? 'mouse' },
+  });
+
+  return event;
+}
diff --git a/packages/react/tests/components/value-field/value-field-numeric.test.tsx b/packages/react/tests/components/value-field/value-field-numeric.test.tsx
new file mode 100644
index 0000000..4947939
--- /dev/null
+++ b/packages/react/tests/components/value-field/value-field-numeric.test.tsx
@@ -0,0 +1,231 @@
+import { useState } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page, userEvent } from 'vitest/browser';
+
+import { Numeric, type NumericProps } from '~/components/value-field/value-field-numeric';
+
+const LABEL = 'label';
+
+function field() {
+  return page.getByRole('textbox', { name: LABEL });
+}
+
+describe('formatting', () => {
+  const onChange = vi.fn();
+  function renderInput(props: Partial<NumericProps> & { value: number }) {
+    return render(
+      <Numeric
+        aria-label={LABEL}
+        onChange={onChange}
+        {...props}
+      />,
+    );
+  }
+
+  it('clamps value to max', async () => {
+    await renderInput({ min: 0, max: 100, value: 110 });
+    await expect.element(field()).toHaveValue('100');
+  });
+
+  it('clamps value to min', async () => {
+    await renderInput({ min: 0, max: 100, value: -10 });
+    await expect.element(field()).toHaveValue('0');
+  });
+
+  it('throws an error, when min or max is not specified', async () => {
+    const consoleError = vi.spyOn(console, 'error');
+    consoleError.mockImplementation(() => {});
+    await expect(renderInput({ value: 1, min: 0, targetRange: [0, 100] })).rejects.toThrow(
+      "'targetRange' requires specifying 'min' and 'max'.",
+    );
+    await expect(renderInput({ value: 1, max: 1, targetRange: [0, 100] })).rejects.toThrow(
+      "'targetRange' requires specifying 'min' and 'max'.",
+    );
+    consoleError.mockRestore();
+  });
+
+  it('throws an error, when min equals to max', async () => {
+    const consoleError = vi.spyOn(console, 'error');
+    consoleError.mockImplementation(() => {});
+    await expect(renderInput({ value: 1, min: 0, max: 0, targetRange: [0, 100] })).rejects.toThrow(
+      "'min' and 'max' cannot be equal.",
+    );
+    consoleError.mockRestore();
+  });
+
+  it('normalizes formatted value to specified target range', async () => {
+    await renderInput({ value: 0.5, min: 0, max: 1, targetRange: [0, 100] });
+    await expect.element(field()).toHaveValue('50');
+  });
+
+  it('adds suffix', async () => {
+    await renderInput({ value: 1, suffix: '%' });
+    await expect.element(field()).toHaveValue('1%');
+  });
+
+  it('rounds to specified precision', async () => {
+    await renderInput({ value: 3.14159265359, precision: 2 });
+    await expect.element(field()).toHaveValue('3.14');
+  });
+});
+
+// Expression evaluations are tested separately in ./value-field-numeric-evaluator.test.ts,
+// as they add a significant overhead to test suite duration when done via browser tests.
+describe('interactions', () => {
+  function TestNumeric(props: Partial<Omit<NumericProps, 'value'>> & { initialValue: number }) {
+    const { initialValue, onChange, ...numericProps } = props;
+    const [value, setValue] = useState(initialValue);
+
+    function handleChange(value: number) {
+      onChange?.(value);
+      setValue(value);
+    }
+
+    return (
+      <Numeric
+        aria-label={LABEL}
+        value={value}
+        onChange={handleChange}
+        {...numericProps}
+      />
+    );
+  }
+
+  function renderInput(props: Partial<NumericProps> & { initialValue: number }) {
+    return render(<TestNumeric {...props} />);
+  }
+
+  it('allows specified units in input', async () => {
+    await renderInput({ initialValue: 10, allowedUnits: ['px'] });
+    await userEvent.click(field());
+    await userEvent.keyboard('11px');
+    await userEvent.keyboard('{Enter}');
+    await expect.element(field()).toHaveValue('11');
+  });
+
+  it('allows specified suffix in input', async () => {
+    await renderInput({ initialValue: 10, suffix: 'px' });
+    await userEvent.click(field());
+    await userEvent.keyboard('11px');
+    await userEvent.keyboard('{Enter}');
+    await expect.element(field()).toHaveValue('11px');
+  });
+
+  it('rounds input to specified precision', async () => {
+    await renderInput({ initialValue: 10, precision: 2 });
+    await userEvent.click(field());
+    await userEvent.keyboard('10.23456');
+    await userEvent.keyboard('{Enter}');
+    await expect.element(field()).toHaveValue('10.23');
+  });
+
+  it('clamps input to specified min', async () => {
+    await renderInput({ initialValue: 10, min: 0, max: 100 });
+    await userEvent.click(field());
+    await userEvent.keyboard('-10');
+    await userEvent.keyboard('{Enter}');
+    await expect.element(field()).toHaveValue('0');
+  });
+
+  it('clamps input to specified max', async () => {
+    await renderInput({ initialValue: 10, min: 0, max: 100 });
+    await userEvent.click(field());
+    await userEvent.keyboard('110');
+    await userEvent.keyboard('{Enter}');
+    await expect.element(field()).toHaveValue('100');
+  });
+
+  it('denormalizes into initial min-max range upon submission', async () => {
+    const onChange = vi.fn();
+    await renderInput({
+      initialValue: 0,
+      min: 0,
+      max: 1,
+      targetRange: [0, 100],
+      onChange,
+    });
+    await userEvent.click(field());
+    await userEvent.keyboard('50');
+    await userEvent.keyboard('{Enter}');
+    await expect.element(field()).not.toHaveFocus();
+    await expect.element(field()).toHaveValue('50');
+    expect(onChange).toHaveBeenCalledWith(0.5);
+  });
+
+  describe('when nudge amounts are not specified', () => {
+    it('increments by default small nudge', async () => {
+      await renderInput({ initialValue: 10 });
+      await userEvent.click(field());
+      await userEvent.keyboard('{ArrowUp}');
+      await expect.element(field()).toHaveValue('11');
+    });
+
+    it('decrements by default small nudge', async () => {
+      await renderInput({ initialValue: 10 });
+      await userEvent.click(field());
+      await userEvent.keyboard('{ArrowDown}');
+      await expect.element(field()).toHaveValue('9');
+    });
+
+    it('increments by default big nudge with shift', async () => {
+      await renderInput({ initialValue: 10 });
+      await userEvent.click(field());
+      await userEvent.keyboard('{Shift>}{ArrowUp}{/Shift}');
+      await expect.element(field()).toHaveValue('20');
+    });
+
+    it('decrements by default big nudge with shift', async () => {
+      await renderInput({ initialValue: 10 });
+      await userEvent.click(field());
+      await userEvent.keyboard('{Shift>}{ArrowDown}{/Shift}');
+      await expect.element(field()).toHaveValue('0');
+    });
+  });
+
+  describe('when nudge amounts are specified', () => {
+    it('increments by custom small nudge', async () => {
+      await renderInput({ initialValue: 10, smallNudge: 2 });
+      await userEvent.click(field());
+      await userEvent.keyboard('{ArrowUp}');
+      await expect.element(field()).toHaveValue('12');
+    });
+
+    it('decrements by custom small nudge', async () => {
+      await renderInput({ initialValue: 10, smallNudge: 2 });
+      await userEvent.click(field());
+      await userEvent.keyboard('{ArrowDown}');
+      await expect.element(field()).toHaveValue('8');
+    });
+
+    it('increments by custom big nudge with shift', async () => {
+      await renderInput({ initialValue: 10, bigNudge: 20 });
+      await userEvent.click(field());
+      await userEvent.keyboard('{Shift>}{ArrowUp}{/Shift}');
+      await expect.element(field()).toHaveValue('30');
+    });
+
+    it('decrements by custom big nudge with shift', async () => {
+      await renderInput({ initialValue: 10, bigNudge: 20 });
+      await userEvent.click(field());
+      await userEvent.keyboard('{Shift>}{ArrowDown}{/Shift}');
+      await expect.element(field()).toHaveValue('-10');
+    });
+  });
+
+  describe('when min and max are specified', () => {
+    it('stays within range when incrementing', async () => {
+      await renderInput({ initialValue: 100, min: 0, max: 100 });
+      await userEvent.click(field());
+      await userEvent.keyboard('{ArrowUp}');
+      await expect.element(field()).toHaveValue('100');
+    });
+
+    it('stays within range when decrementing', async () => {
+      await renderInput({ initialValue: 0, min: 0, max: 100 });
+      await userEvent.click(field());
+      await userEvent.keyboard('{ArrowDown}');
+      await expect.element(field()).toHaveValue('0');
+    });
+  });
+});
diff --git a/packages/react/tests/components/value-field/value-field-scrubber.test.tsx b/packages/react/tests/components/value-field/value-field-scrubber.test.tsx
new file mode 100644
index 0000000..ecf3d60
--- /dev/null
+++ b/packages/react/tests/components/value-field/value-field-scrubber.test.tsx
@@ -0,0 +1,484 @@
+import { useState, type ReactNode } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page } from 'vitest/browser';
+
+import { ValueField } from '~/components/value-field';
+import type { NumericProps } from '~/components/value-field/value-field-numeric';
+import type { ScrubberProps } from '~/components/value-field/value-field-scrubber';
+
+const FIELD_LABEL = 'value';
+const SCRUBBER_TEST_ID = 'scrubber';
+
+type TestPointerEventInit = {
+  button?: number;
+  clientX?: number;
+  clientY?: number;
+  movementX?: number;
+  movementY?: number;
+  pointerType?: string;
+  shiftKey?: boolean;
+};
+
+type TestFieldProps = Partial<Omit<NumericProps, 'value' | 'onChange'>> & {
+  initialValue: number;
+  onChange?: (value: number) => void;
+  rootDisabled?: boolean;
+  scrubberChildren?: ReactNode;
+  scrubberProps?: Partial<Pick<ScrubberProps, 'pixelSensitivity' | 'teleportDistance'>>;
+};
+
+function field() {
+  return page.getByRole('textbox', { name: FIELD_LABEL });
+}
+
+function scrubber() {
+  return page.getByTestId(SCRUBBER_TEST_ID);
+}
+
+function scrubberElement() {
+  return scrubber().element() as HTMLElement;
+}
+
+describe('ValueField.Scrubber', () => {
+  it('increments and decrements the numeric value while dragging a wrapped label', async () => {
+    await render(<TestField initialValue={0} />);
+
+    await startScrubbing(scrubberElement());
+    await movePointer(4);
+    await expect.element(field()).toHaveValue('4');
+
+    await movePointer(-2);
+    await expect.element(field()).toHaveValue('2');
+  });
+
+  it('uses the big nudge while dragging with shift pressed', async () => {
+    await render(<TestField initialValue={0} />);
+
+    await startScrubbing(scrubberElement());
+    await movePointer(2, { shiftKey: true });
+
+    await expect.element(field()).toHaveValue('20');
+  });
+
+  it('applies the accumulated movement when pixel sensitivity is reached', async () => {
+    await render(
+      <TestField
+        initialValue={0}
+        scrubberProps={{ pixelSensitivity: 5 }}
+      />,
+    );
+
+    await startScrubbing(scrubberElement());
+    await movePointer(-2);
+    await expect.element(field()).toHaveValue('0');
+
+    await movePointer(2);
+    await expect.element(field()).toHaveValue('0');
+
+    await movePointer(1);
+    await movePointer(1);
+    await movePointer(1);
+    await movePointer(1);
+    await expect.element(field()).toHaveValue('0');
+
+    await movePointer(1);
+    await expect.element(field()).toHaveValue('5');
+
+    await movePointer(5);
+    await expect.element(field()).toHaveValue('10');
+
+    await movePointer(-4);
+    await expect.element(field()).toHaveValue('10');
+
+    await movePointer(-1);
+    await expect.element(field()).toHaveValue('5');
+  });
+
+  it('changes by the same amount for slow and fast drags over the same distance', async () => {
+    const { rerender } = await render(
+      <TestField
+        key="fast"
+        initialValue={0}
+        scrubberProps={{ pixelSensitivity: 2 }}
+      />,
+    );
+
+    await startScrubbing(scrubberElement());
+    await movePointer(10);
+    await stopScrubbing();
+    await expect.element(field()).toHaveValue('10');
+
+    await rerender(
+      <TestField
+        key="slow"
+        initialValue={0}
+        scrubberProps={{ pixelSensitivity: 2 }}
+      />,
+    );
+
+    await startScrubbing(scrubberElement());
+    await movePointer(1);
+    await movePointer(1);
+    await movePointer(1);
+    await movePointer(1);
+    await movePointer(1);
+    await movePointer(1);
+    await movePointer(1);
+    await movePointer(1);
+    await movePointer(1);
+    await movePointer(1);
+    await stopScrubbing();
+    await expect.element(field()).toHaveValue('10');
+  });
+
+  it('keeps min, max, precision, suffix, and target range behavior', async () => {
+    const onChange = vi.fn();
+    await render(
+      <TestField
+        initialValue={0.95}
+        onChange={onChange}
+        min={0}
+        max={1}
+        targetRange={[0, 100]}
+        precision={0}
+        suffix="%"
+      />,
+    );
+
+    await startScrubbing(scrubberElement());
+    await movePointer(10);
+    await expect.element(field()).toHaveValue('100%');
+    expect(onChange).toHaveBeenLastCalledWith(1);
+
+    await movePointer(-200);
+    await expect.element(field()).toHaveValue('0%');
+    expect(onChange).toHaveBeenLastCalledWith(0);
+  });
+
+  it('works as an invisible left-edge hitbox', async () => {
+    await render(
+      <TestField
+        initialValue={0}
+        scrubberChildren={null}
+      />,
+    );
+
+    await expect.element(scrubber()).toBeEmptyDOMElement();
+
+    await startScrubbing(scrubberElement());
+    await movePointer(3);
+
+    await expect.element(field()).toHaveValue('3');
+  });
+
+  it('scrubs each field independently inside a multi value field', async () => {
+    await render(<TestMultiField />);
+
+    await startScrubbing(page.getByTestId('scrubber-r').element() as HTMLElement);
+    await movePointer(4);
+    await stopScrubbing();
+    await expect.element(page.getByRole('textbox', { name: 'r' })).toHaveValue('4');
+    await expect.element(page.getByRole('textbox', { name: 'g' })).toHaveValue('0');
+    await expect.element(page.getByRole('textbox', { name: 'b' })).toHaveValue('0');
+    await expect.element(page.getByRole('textbox', { name: 'a' })).toHaveValue('0%');
+
+    await startScrubbing(page.getByTestId('scrubber-g').element() as HTMLElement);
+    await movePointer(8);
+    await stopScrubbing();
+    await expect.element(page.getByRole('textbox', { name: 'r' })).toHaveValue('4');
+    await expect.element(page.getByRole('textbox', { name: 'g' })).toHaveValue('8');
+    await expect.element(page.getByRole('textbox', { name: 'b' })).toHaveValue('0');
+    await expect.element(page.getByRole('textbox', { name: 'a' })).toHaveValue('0%');
+
+    await startScrubbing(page.getByTestId('scrubber-b').element() as HTMLElement);
+    await movePointer(12);
+    await stopScrubbing();
+    await expect.element(page.getByRole('textbox', { name: 'r' })).toHaveValue('4');
+    await expect.element(page.getByRole('textbox', { name: 'g' })).toHaveValue('8');
+    await expect.element(page.getByRole('textbox', { name: 'b' })).toHaveValue('12');
+    await expect.element(page.getByRole('textbox', { name: 'a' })).toHaveValue('0%');
+
+    await startScrubbing(page.getByTestId('scrubber-a').element() as HTMLElement);
+    await movePointer(16);
+    await stopScrubbing();
+    await expect.element(page.getByRole('textbox', { name: 'r' })).toHaveValue('4');
+    await expect.element(page.getByRole('textbox', { name: 'g' })).toHaveValue('8');
+    await expect.element(page.getByRole('textbox', { name: 'b' })).toHaveValue('12');
+    await expect.element(page.getByRole('textbox', { name: 'a' })).toHaveValue('16%');
+  });
+
+  it('does not scrub a disabled field', async () => {
+    await render(
+      <TestField
+        initialValue={0}
+        rootDisabled
+      />,
+    );
+
+    await startScrubbing(scrubberElement());
+    await movePointer(10);
+
+    await expect.element(field()).toHaveValue('0');
+  });
+
+  it('does not scrub a disabled numeric input', async () => {
+    await render(
+      <TestField
+        initialValue={0}
+        disabled
+      />,
+    );
+
+    await startScrubbing(scrubberElement());
+    await movePointer(10);
+
+    await expect.element(field()).toHaveValue('0');
+  });
+
+  it('keeps child clicks working when the pointer does not move', async () => {
+    const onClick = vi.fn();
+    await render(
+      <TestField
+        initialValue={0}
+        scrubberChildren={<button onClick={onClick}>X</button>}
+      />,
+    );
+
+    await startScrubbing(page.getByText('X').element() as HTMLElement);
+    await stopScrubbing();
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('sets scrubbing attributes only while dragging', async () => {
+    await render(<TestField initialValue={0} />);
+    const scrubberEl = scrubberElement();
+    const root = scrubberEl.parentElement;
+
+    if (!(root instanceof HTMLElement)) {
+      throw new Error('Scrubber has no parent element');
+    }
+
+    expect(root).not.toHaveAttribute('data-scrubbing');
+    expect(scrubberEl).not.toHaveAttribute('data-scrubbing');
+
+    await startScrubbing(scrubberEl);
+    await expect.poll(() => root.hasAttribute('data-scrubbing')).toBe(true);
+    await expect.poll(() => scrubberEl.hasAttribute('data-scrubbing')).toBe(true);
+
+    await stopScrubbing();
+    await expect.poll(() => root.hasAttribute('data-scrubbing')).toBe(false);
+    await expect.poll(() => scrubberEl.hasAttribute('data-scrubbing')).toBe(false);
+  });
+
+  it('stops scrubbing after pointerup', async () => {
+    await render(<TestField initialValue={0} />);
+
+    await startScrubbing(scrubberElement());
+    await movePointer(4);
+    await expect.element(field()).toHaveValue('4');
+
+    await stopScrubbing();
+    await movePointer(4);
+    await expect.element(field()).toHaveValue('4');
+  });
+
+  it('wraps the internal cursor around the viewport edge', async () => {
+    const restorePointerLock = mockPointerLock();
+    await render(
+      <TestField
+        initialValue={0}
+        scrubberProps={{ teleportDistance: 0 }}
+        scrubberChildren={null}
+      />,
+    );
+    const scrubberEl = scrubberElement();
+    Object.defineProperty(scrubberEl, 'getBoundingClientRect', {
+      configurable: true,
+      value: () => new DOMRect(0, 0, 100, 24),
+    });
+
+    await startScrubbing(scrubberEl, { clientX: 95, clientY: 12 });
+    const cursor = document.querySelector('[data-value-field-cursor]');
+
+    if (!(cursor instanceof HTMLElement)) {
+      throw new Error('Cursor element not found');
+    }
+
+    Object.defineProperty(cursor, 'offsetWidth', { configurable: true, value: 10 });
+    Object.defineProperty(cursor, 'offsetHeight', { configurable: true, value: 10 });
+    await movePointer(20);
+    await expect.poll(() => cursor.style.transform).toBe('translate3d(-5px, 5px, 0px)');
+
+    await stopScrubbing();
+    restorePointerLock();
+  });
+});
+
+function TestField(props: TestFieldProps) {
+  const { initialValue, onChange, rootDisabled, scrubberChildren, scrubberProps, ...numericProps } =
+    props;
+  const [value, setValue] = useState(initialValue);
+
+  function handleChange(nextValue: number) {
+    onChange?.(nextValue);
+    setValue(nextValue);
+  }
+
+  return (
+    <ValueField.Root
+      disabled={rootDisabled}
+      style={{ width: 100 }}
+    >
+      <ValueField.Scrubber
+        data-testid={SCRUBBER_TEST_ID}
+        {...scrubberProps}
+      >
+        {scrubberChildren === undefined ? <ValueField.Label>X</ValueField.Label> : scrubberChildren}
+      </ValueField.Scrubber>
+      <ValueField.Numeric
+        aria-label={FIELD_LABEL}
+        value={value}
+        onChange={handleChange}
+        {...numericProps}
+      />
+    </ValueField.Root>
+  );
+}
+
+function TestMultiField() {
+  const [red, setRed] = useState(0);
+  const [green, setGreen] = useState(0);
+  const [blue, setBlue] = useState(0);
+  const [alpha, setAlpha] = useState(0);
+
+  return (
+    <ValueField.Multi>
+      <ValueField.Root>
+        <ValueField.Scrubber data-testid="scrubber-r" />
+        <ValueField.Numeric
+          aria-label="r"
+          value={red}
+          onChange={setRed}
+          min={0}
+          max={1}
+          targetRange={[0, 255]}
+          precision={0}
+        />
+      </ValueField.Root>
+      <ValueField.Root>
+        <ValueField.Scrubber data-testid="scrubber-g" />
+        <ValueField.Numeric
+          aria-label="g"
+          value={green}
+          onChange={setGreen}
+          min={0}
+          max={1}
+          targetRange={[0, 255]}
+          precision={0}
+        />
+      </ValueField.Root>
+      <ValueField.Root>
+        <ValueField.Scrubber data-testid="scrubber-b" />
+        <ValueField.Numeric
+          aria-label="b"
+          value={blue}
+          onChange={setBlue}
+          min={0}
+          max={1}
+          targetRange={[0, 255]}
+          precision={0}
+        />
+      </ValueField.Root>
+      <ValueField.Root>
+        <ValueField.Scrubber data-testid="scrubber-a" />
+        <ValueField.Numeric
+          aria-label="a"
+          value={alpha}
+          onChange={setAlpha}
+          min={0}
+          max={1}
+          targetRange={[0, 100]}
+          precision={0}
+          suffix="%"
+        />
+      </ValueField.Root>
+    </ValueField.Multi>
+  );
+}
+
+async function startScrubbing(element: HTMLElement, init: TestPointerEventInit = {}) {
+  element.dispatchEvent(
+    createPointerEvent('pointerdown', {
+      clientX: 10,
+      clientY: 10,
+      pointerType: 'mouse',
+      ...init,
+    }),
+  );
+}
+
+async function movePointer(movementX: number, init: TestPointerEventInit = {}) {
+  window.dispatchEvent(
+    createPointerEvent('pointermove', {
+      movementX,
+      pointerType: 'mouse',
+      ...init,
+    }),
+  );
+}
+
+async function stopScrubbing() {
+  window.dispatchEvent(createPointerEvent('pointerup', { pointerType: 'mouse' }));
+}
+
+function createPointerEvent(type: string, init: TestPointerEventInit = {}) {
+  const event = new MouseEvent(type, {
+    bubbles: true,
+    cancelable: true,
+    button: init.button ?? 0,
+    clientX: init.clientX ?? 0,
+    clientY: init.clientY ?? 0,
+    shiftKey: init.shiftKey ?? false,
+  });
+
+  Object.defineProperties(event, {
+    movementX: { value: init.movementX ?? 0 },
+    movementY: { value: init.movementY ?? 0 },
+    pointerType: { value: init.pointerType ?? 'mouse' },
+  });
+
+  return event;
+}
+
+function mockPointerLock() {
+  const requestPointerLockDescriptor = Object.getOwnPropertyDescriptor(
+    document.body,
+    'requestPointerLock',
+  );
+  const exitPointerLockDescriptor = Object.getOwnPropertyDescriptor(document, 'exitPointerLock');
+
+  Object.defineProperty(document.body, 'requestPointerLock', {
+    configurable: true,
+    value: () => Promise.resolve(),
+  });
+  Object.defineProperty(document, 'exitPointerLock', {
+    configurable: true,
+    value: () => undefined,
+  });
+
+  return () => {
+    restoreProperty(document.body, 'requestPointerLock', requestPointerLockDescriptor);
+    restoreProperty(document, 'exitPointerLock', exitPointerLockDescriptor);
+  };
+}
+
+function restoreProperty(target: object, key: string, descriptor: PropertyDescriptor | undefined) {
+  if (descriptor) {
+    Object.defineProperty(target, key, descriptor);
+    return;
+  }
+
+  Reflect.deleteProperty(target, key);
+}
diff --git a/packages/react/tests/components/variable-chip/variable-chip.test.tsx b/packages/react/tests/components/variable-chip/variable-chip.test.tsx
new file mode 100644
index 0000000..560f826
--- /dev/null
+++ b/packages/react/tests/components/variable-chip/variable-chip.test.tsx
@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+import { VariableCell, VariableChip } from '~/components/variable-chip/variable-chip';
+
+describe('VariableChip', () => {
+  it('renders the elevated pill by default', async () => {
+    const { container } = await render(<VariableChip>24</VariableChip>);
+    const chip = container.firstElementChild as HTMLElement;
+    expect(chip.className).toContain('bg-figma');
+    expect(chip.className).toContain('border-figma');
+    expect(chip).toHaveTextContent('24');
+  });
+
+  it('renders the selected ring state', async () => {
+    const { container } = await render(<VariableChip selected>24</VariableChip>);
+    const chip = container.firstElementChild as HTMLElement;
+    expect(chip.className).toContain('bg-figma-selected');
+    expect(chip.className).toContain('border-figma-border-selected');
+    expect(chip.getAttribute('data-selected')).toBe('true');
+  });
+
+  it('renders the solid on-selected state', async () => {
+    const { container } = await render(<VariableChip onSelected>24</VariableChip>);
+    const chip = container.firstElementChild as HTMLElement;
+    expect(chip.className).toContain('bg-figma-onselected');
+    expect(chip.getAttribute('data-on-selected')).toBe('true');
+  });
+
+  it('renders the sunken variant', async () => {
+    const { container } = await render(<VariableChip variant="sunken">24</VariableChip>);
+    const chip = container.firstElementChild as HTMLElement;
+    expect(chip.className).toContain('bg-figma-secondary');
+  });
+
+  it('renders the disabled text color', async () => {
+    const { container } = await render(<VariableChip disabled>24</VariableChip>);
+    const chip = container.firstElementChild as HTMLElement;
+    expect(chip.className).toContain('text-figma-disabled');
+    expect(chip.getAttribute('data-disabled')).toBe('true');
+  });
+
+  it('uses the disabled border token when disabled', async () => {
+    const { container } = await render(<VariableChip disabled>24</VariableChip>);
+    const chip = container.firstElementChild as HTMLElement;
+    expect(chip.className).toContain('border-figma-disabled');
+  });
+});
+
+describe('VariableCell', () => {
+  it('renders the variable icon cell and label', async () => {
+    const { container } = await render(<VariableCell>Value</VariableCell>);
+    const cell = container.firstElementChild as HTMLElement;
+    expect(cell).toHaveTextContent('Value');
+    expect(cell.className).toContain('h-6');
+    expect(cell.className).toContain('bg-figma');
+    expect(cell.querySelector('svg')).not.toBeNull();
+  });
+});
diff --git a/packages/react/tests/components/visual-bell/visual-bell.test.tsx b/packages/react/tests/components/visual-bell/visual-bell.test.tsx
new file mode 100644
index 0000000..d16da5c
--- /dev/null
+++ b/packages/react/tests/components/visual-bell/visual-bell.test.tsx
@@ -0,0 +1,49 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page, userEvent } from 'vitest/browser';
+
+import { VisualBell } from '~/components/visual-bell';
+
+describe('VisualBell', () => {
+  it('renders label, actions, and a dismiss button', async () => {
+    const onDismiss = vi.fn();
+    await render(
+      <VisualBell.Root>
+        <VisualBell.Label>Waiting for followers</VisualBell.Label>
+        <VisualBell.Actions>
+          <VisualBell.Action>Cancel</VisualBell.Action>
+        </VisualBell.Actions>
+        <VisualBell.Dismiss onClick={onDismiss} />
+      </VisualBell.Root>,
+    );
+
+    await expect.element(page.getByText('Waiting for followers')).toBeVisible();
+    await expect.element(page.getByRole('button', { name: 'Cancel' })).toBeVisible();
+    const dismiss = page.getByRole('button', { name: 'Dismiss' });
+    await expect.element(dismiss).toBeVisible();
+
+    await userEvent.click(dismiss);
+    expect(onDismiss).toHaveBeenCalledOnce();
+  });
+
+  it('renders a leading icon in the label', async () => {
+    const { container } = await render(
+      <VisualBell.Root>
+        <VisualBell.Label icon={<span data-testid="bell-icon" />}>
+          Spotlight on Tim
+        </VisualBell.Label>
+      </VisualBell.Root>,
+    );
+    expect(container.querySelector('[data-testid="bell-icon"]')).not.toBeNull();
+  });
+
+  it('applies the danger color', async () => {
+    const { container } = await render(
+      <VisualBell.Root color="danger">
+        <VisualBell.Label>Danger</VisualBell.Label>
+      </VisualBell.Root>,
+    );
+    const bell = container.querySelector('[role="status"]') as HTMLElement;
+    expect(bell.className).toContain('bg-figma-danger');
+  });
+});
diff --git a/packages/react/tests/editor-themes.test.tsx b/packages/react/tests/editor-themes.test.tsx
new file mode 100644
index 0000000..76ba2f5
--- /dev/null
+++ b/packages/react/tests/editor-themes.test.tsx
@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest';
+
+import devmodeLight from '../../theme/tokens/colors/devmode-light.json';
+import figjamDark from '../../theme/tokens/colors/figjam-dark.json';
+import figjamLight from '../../theme/tokens/colors/figjam-light.json';
+import figmaDark from '../../theme/tokens/colors/figma-dark.json';
+import figmaLight from '../../theme/tokens/colors/figma-light.json';
+import slidesDark from '../../theme/tokens/colors/slides-dark.json';
+
+const ALL_CLASSES = ['figma-light', 'figma-dark', 'figjam', 'devmode', 'slides'];
+
+function brand() {
+  return getComputedStyle(document.body).getPropertyValue('--figma-color-bg-brand');
+}
+
+function clear() {
+  document.documentElement.classList.remove(...ALL_CLASSES);
+  document.body.classList.remove(...ALL_CLASSES);
+}
+
+describe('editor theme selectors', () => {
+  it('resolves --figma-color-bg-brand per editor + mode class combination', async () => {
+    document.body.style.margin = '0';
+    const cases: [string[], string][] = [
+      [[], figmaLight['bg-brand'].value],
+      [['figma-dark'], figmaDark['bg-brand'].value],
+      [['figjam'], figjamLight['bg-brand'].value],
+      [['figma-dark', 'figjam'], figjamDark['bg-brand'].value],
+      [['devmode'], devmodeLight['bg-brand'].value],
+      [['figma-dark', 'slides'], slidesDark['bg-brand'].value],
+    ];
+    for (const [classes, expected] of cases) {
+      clear();
+      document.documentElement.classList.add(...classes);
+      expect(brand()).toBe(expected);
+    }
+    clear();
+  });
+});
diff --git a/packages/react/tests/test-utils/index.ts b/packages/react/tests/test-utils/index.ts
new file mode 100644
index 0000000..e1f558b
--- /dev/null
+++ b/packages/react/tests/test-utils/index.ts
@@ -0,0 +1,94 @@
+import { page, type Locator, type UserEventClickOptions } from 'vitest/browser';
+
+/**
+ * Whether an element is in the "on" state.
+ *
+ * Works across underlying primitive implementations that express the state
+ * via `aria-pressed` (toggle-style) or `aria-checked` (radio-style).
+ */
+export function isOn(element: Element): boolean {
+  return (
+    element.getAttribute('aria-pressed') === 'true' ||
+    element.getAttribute('aria-checked') === 'true'
+  );
+}
+
+/**
+ * Locate a toggle-group item by its accessible name regardless of the role
+ * the underlying primitive assigns to it (`button` or `radio`).
+ */
+export function getToggleable(name: string | RegExp): Locator {
+  return page.getByRole('button', { name }).or(page.getByRole('radio', { name }));
+}
+
+/**
+ * Extract the first argument a mock was last called with.
+ */
+export function firstArg<T = unknown>(fn: { mock: { calls: unknown[][] } }): T {
+  const call = fn.mock.calls.at(-1);
+  if (!call) {
+    throw new Error('mock was not called');
+  }
+  return call[0] as T;
+}
+
+/**
+ * Click a locator while skipping actionability checks (e.g. for elements
+ * with `pointer-events: none`).
+ */
+export function clickForce(locator: Locator) {
+  return locator.click({ force: true } as UserEventClickOptions);
+}
+
+/**
+ * Perform a real click at the given position relative to the element's
+ * top-left corner. Useful for simulating "outside" pointer interactions.
+ */
+export function clickAt(locator: Locator, x: number, y: number) {
+  return locator.click({ force: true, position: { x, y } } as UserEventClickOptions);
+}
+
+/**
+ * Click outside of any overlay content, near the top-left corner of the page.
+ */
+export function clickOutside() {
+  return clickAt(page.elementLocator(document.body), 4, 4);
+}
+
+/**
+ * Whether an element is actually rendered on screen — visible and larger
+ * than a pixel. Visually-hidden accessibility helpers clip themselves to
+ * a tiny area, which `checkVisibility()` alone does not detect.
+ */
+export function isRendered(element: Element): boolean {
+  const rect = (element as HTMLElement).getBoundingClientRect();
+  return (element as HTMLElement).checkVisibility() && rect.width > 1 && rect.height > 1;
+}
+
+/**
+ * Whether at least one element matched by the locator is rendered.
+ * Useful when a locator can match both visible and visually-hidden elements.
+ */
+export function anyVisible(locator: Locator): boolean {
+  return locator.elements().some((element) => isRendered(element));
+}
+
+/**
+ * Whether no element matched by the locator is rendered.
+ */
+export function noneVisible(locator: Locator): boolean {
+  return locator.elements().every((element) => !isRendered(element));
+}
+
+/**
+ * Dispatch a keydown event to the focused element through the DOM.
+ *
+ * Real CDP key events are preferred via `userEvent.keyboard`, but Radix
+ * roving-focus groups stop responding to them once a real pointer click
+ * has happened in the page — this exercises the same React handlers.
+ */
+export function pressKey(key: string, options: KeyboardEventInit = {}) {
+  document.activeElement?.dispatchEvent(
+    new KeyboardEvent('keydown', { bubbles: true, cancelable: true, key, ...options }),
+  );
+}
diff --git a/packages/react/tests/test-utils/setup.ts b/packages/react/tests/test-utils/setup.ts
new file mode 100644
index 0000000..33c1883
--- /dev/null
+++ b/packages/react/tests/test-utils/setup.ts
@@ -0,0 +1,4 @@
+import './styles.css';
+
+// Match the default Storybook theme so visibility/pointer styles are realistic.
+document.documentElement.classList.add('figma-light');
diff --git a/packages/react/tests/test-utils/styles.css b/packages/react/tests/test-utils/styles.css
new file mode 100644
index 0000000..8578319
--- /dev/null
+++ b/packages/react/tests/test-utils/styles.css
@@ -0,0 +1,4 @@
+@import 'tailwindcss';
+@plugin '@iconify/tailwind4';
+@import '@thinkbuff/figma-theme/css/index.css';
+@source '../src';
diff --git a/packages/react/tests/test-utils/styles.d.ts b/packages/react/tests/test-utils/styles.d.ts
new file mode 100644
index 0000000..35306c6
--- /dev/null
+++ b/packages/react/tests/test-utils/styles.d.ts
@@ -0,0 +1 @@
+declare module '*.css';
diff --git a/packages/react/tests/test-utils/vitest.d.ts b/packages/react/tests/test-utils/vitest.d.ts
new file mode 100644
index 0000000..dbb2d4a
--- /dev/null
+++ b/packages/react/tests/test-utils/vitest.d.ts
@@ -0,0 +1,4 @@
+/// <reference types="vitest" />
+
+import type {} from '@vitest/browser/matchers';
+import type {} from 'vitest/browser';
diff --git a/packages/react/tests/theme-tokens.test.tsx b/packages/react/tests/theme-tokens.test.tsx
new file mode 100644
index 0000000..a35b742
--- /dev/null
+++ b/packages/react/tests/theme-tokens.test.tsx
@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+describe('UI3 theme tokens', () => {
+  it('resolves shadow-figma-elevation-* against the nearest theme scope', async () => {
+    const { container } = await render(
+      <div className="figma-light">
+        <div
+          data-testid="light"
+          className="shadow-figma-elevation-300"
+        />
+        <div className="figma-dark">
+          <div
+            data-testid="dark"
+            className="shadow-figma-elevation-300"
+          />
+        </div>
+      </div>,
+    );
+
+    const light = container.querySelector<HTMLElement>('[data-testid="light"]')!;
+    const dark = container.querySelector<HTMLElement>('[data-testid="dark"]')!;
+    const lightShadow = getComputedStyle(light).boxShadow;
+    const darkShadow = getComputedStyle(dark).boxShadow;
+
+    expect(lightShadow).not.toBe('none');
+    expect(darkShadow).not.toBe('none');
+    expect(darkShadow).not.toBe(lightShadow);
+    expect(darkShadow).toContain('inset');
+  });
+
+  it('applies size, leading, tracking, and weight via text-figma-heading-medium', async () => {
+    const { container } = await render(
+      <div
+        data-testid="heading"
+        className="text-figma-heading-medium"
+      />,
+    );
+
+    const style = getComputedStyle(
+      container.querySelector<HTMLElement>('[data-testid="heading"]')!,
+    );
+
+    expect(style.fontSize).toBe('15px');
+    expect(style.lineHeight).toBe('25px');
+    expect(style.fontWeight).toBe('550');
+    expect(style.letterSpacing).not.toBe('normal');
+  });
+});
diff --git a/packages/react/tests/utility-contract.test.ts b/packages/react/tests/utility-contract.test.ts
new file mode 100644
index 0000000..ead88e6
--- /dev/null
+++ b/packages/react/tests/utility-contract.test.ts
@@ -0,0 +1,154 @@
+import { readFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { compile } from 'tailwindcss';
+import { describe, expect, it } from 'vitest';
+
+const require = createRequire(import.meta.url);
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const TEST_STYLES = path.resolve(__dirname, 'test-utils/styles.css');
+const TAILWIND_INDEX = path.join(
+  path.dirname(require.resolve('tailwindcss/package.json')),
+  'index.css',
+);
+
+/**
+ * Compile the test stylesheet (same imports as the real bundle) with a set of
+ * class candidates and extract the declarations Tailwind emitted for each.
+ *
+ * This is a contract check for utilities our components rely on: a class that
+ * fails to compile returns {} and fails the assertion.
+ */
+async function buildUtilities(candidates: string[]) {
+  const compiler = await compile(readFileSync(TEST_STYLES, 'utf8'), {
+    base: path.dirname(TEST_STYLES),
+    loadStylesheet,
+    loadModule,
+  });
+  return compiler.build(candidates);
+}
+
+async function loadStylesheet(id: string, base: string) {
+  const file =
+    id === 'tailwindcss'
+      ? TAILWIND_INDEX
+      : id.startsWith('.')
+        ? path.resolve(base, id)
+        : require.resolve(id, { paths: [base, __dirname] });
+  return { path: file, base: path.dirname(file), content: readFileSync(file, 'utf8') };
+}
+
+async function loadModule(id: string, base: string) {
+  const file = require.resolve(id, { paths: [base, __dirname] });
+  const module = await import(file);
+  return { path: file, base: path.dirname(file), module: module.default ?? module };
+}
+
+function escapeCssSelector(className: string) {
+  return className.replace(/[^a-zA-Z0-9-_]/g, (char) => `\\${char}`);
+}
+
+function declarationsOf(css: string, className: string) {
+  const declarations: Record<string, string> = {};
+  const selector = escapeCssSelector(className).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const pattern = new RegExp(`\\.${selector}(?::[^{}]+)?\\s*\\{([^}]*)\\}`, 'g');
+
+  for (const match of css.matchAll(pattern)) {
+    for (const declaration of match[1].split(';')) {
+      const [property, ...rest] = declaration.split(':');
+      const value = rest.join(':').trim();
+      if (property?.trim() && value) {
+        declarations[property.trim()] = value;
+      }
+    }
+  }
+
+  return declarations;
+}
+
+describe('utility contract', () => {
+  it('compiles icon-figma-* utilities to --color-icon context variables', async () => {
+    const css = await buildUtilities([
+      'icon-figma',
+      'icon-figma-secondary',
+      'icon-figma-disabled',
+      'icon-figma-text-secondary',
+      'icon-figma-bg-brand',
+      'icon-figma-border-selected',
+    ]);
+
+    expect(declarationsOf(css, 'icon-figma')).toEqual({
+      '--color-icon': 'var(--figma-color-icon)',
+    });
+    expect(declarationsOf(css, 'icon-figma-secondary')).toEqual({
+      '--color-icon': 'var(--figma-color-icon-secondary)',
+    });
+    expect(declarationsOf(css, 'icon-figma-disabled')).toEqual({
+      '--color-icon': 'var(--figma-color-icon-disabled)',
+    });
+    expect(declarationsOf(css, 'icon-figma-text-secondary')).toEqual({
+      '--color-icon': 'var(--figma-color-text-secondary)',
+    });
+    expect(declarationsOf(css, 'icon-figma-bg-brand')).toEqual({
+      '--color-icon': 'var(--figma-color-bg-brand)',
+    });
+    expect(declarationsOf(css, 'icon-figma-border-selected')).toEqual({
+      '--color-icon': 'var(--figma-color-border-selected)',
+    });
+  });
+
+  it('keeps the iconify icon-[set--name] family compiling separately from icon-figma-*', async () => {
+    const css = await buildUtilities(['icon-[tabler--x]', 'icon-figma-secondary']);
+
+    expect(css).toContain('.icon-\\[tabler--x\\]');
+    expect(declarationsOf(css, 'icon-figma-secondary')).toEqual({
+      '--color-icon': 'var(--figma-color-icon-secondary)',
+    });
+  });
+
+  it('compiles the value-field structural variants', async () => {
+    const css = await buildUtilities([
+      'empty:absolute',
+      'empty:inset-y-0',
+      'empty:left-0',
+      'empty:z-figma-1',
+      'empty:w-1',
+      'not-empty:-mr-2',
+      '[label>&]:last:w-5',
+      'not-first:border-l',
+      'has-[>label:hover]:after:border-figma-border',
+      'mt-2.25!',
+    ]);
+
+    expect(declarationsOf(css, 'empty:absolute')).toMatchObject({ position: 'absolute' });
+    expect(declarationsOf(css, 'empty:inset-y-0')).toMatchObject({ 'inset-block': '0px' });
+    expect(declarationsOf(css, 'empty:z-figma-1')).toMatchObject({
+      'z-index': 'var(--z-index-figma-1)',
+    });
+    expect(declarationsOf(css, 'empty:w-1')).toMatchObject({ width: 'var(--spacing)' });
+    expect(declarationsOf(css, 'not-empty:-mr-2')).toMatchObject({
+      'margin-right': 'calc(var(--spacing) * -2)',
+    });
+    expect(declarationsOf(css, 'not-first:border-l')).toMatchObject({ 'border-left-width': '1px' });
+    expect(declarationsOf(css, 'has-[>label:hover]:after:border-figma-border')).toMatchObject({
+      'border-color': 'var(--figma-color-border)',
+    });
+    expect(declarationsOf(css, 'mt-2.25!')).toMatchObject({
+      'margin-top': 'calc(var(--spacing) * 2.25) !important',
+    });
+  });
+
+  it('emits the variant selectors the value-field css translation depends on', async () => {
+    const css = await buildUtilities([
+      '[label>&]:last:w-5',
+      'has-[>label:hover]:after:border-figma-border',
+    ]);
+
+    // A Label that is the last direct child of a Root (<label>) shrinks to w-5.
+    expect(css).toContain('label > .\\[label\\>\\&\\]\\:last\\:w-5:last-child');
+    // NumericSelect moves its hover ring to the Multi frame when a field is hovered.
+    expect(css).toContain(':has( > label:hover)');
+  });
+});
diff --git a/packages/react/tests/utils/cn.test.ts b/packages/react/tests/utils/cn.test.ts
new file mode 100644
index 0000000..a571baf
--- /dev/null
+++ b/packages/react/tests/utils/cn.test.ts
@@ -0,0 +1,60 @@
+import { describe, expect, it } from 'vitest';
+
+import { cn } from '~/utils/cn';
+
+describe('cn', () => {
+  it('joins class names', () => {
+    expect(cn('foo', 'bar')).toBe('foo bar');
+  });
+
+  it('ignores falsy values', () => {
+    expect(cn('foo', false, null, undefined, '', 'bar')).toBe('foo bar');
+  });
+
+  it('supports conditional classes', () => {
+    expect(cn('foo', { bar: true, baz: false })).toBe('foo bar');
+  });
+
+  it('merges conflicting tailwind classes, keeping the last', () => {
+    expect(cn('p-2', 'p-4')).toBe('p-4');
+    expect(cn('px-2 py-1', 'px-4')).toBe('py-1 px-4');
+    expect(cn('text-red-500', 'text-blue-500')).toBe('text-blue-500');
+  });
+
+  it('keeps non-conflicting classes', () => {
+    expect(cn('h-8', 'w-8', 'flex')).toBe('h-8 w-8 flex');
+  });
+
+  it('keeps figma text size and figma text color as separate groups', () => {
+    expect(cn('text-figma-body-medium', 'text-figma-danger')).toBe(
+      'text-figma-body-medium text-figma-danger',
+    );
+    expect(cn('text-figma', 'text-figma-body-large')).toBe('text-figma text-figma-body-large');
+  });
+
+  it('merges conflicting figma color classes, keeping the last', () => {
+    expect(cn('text-figma-danger', 'text-figma-success')).toBe('text-figma-success');
+    expect(cn('bg-figma-brand', 'bg-figma-danger')).toBe('bg-figma-danger');
+  });
+
+  it('merges conflicting figma text sizes, keeping the last', () => {
+    expect(cn('text-figma-body-medium', 'text-figma-body-large')).toBe('text-figma-body-large');
+  });
+
+  it('merges figma font families and weights by group', () => {
+    expect(cn('font-figma', 'font-figma-code')).toBe('font-figma-code');
+    expect(cn('font-figma-default', 'font-figma-strong')).toBe('font-figma-strong');
+  });
+});
+
+describe('cn UI3 typography', () => {
+  it('treats text-figma-body-* and text-figma-heading-* as font sizes', () => {
+    expect(cn('text-figma-body-medium', 'text-figma-heading-medium')).toBe(
+      'text-figma-heading-medium',
+    );
+    expect(cn('text-figma-body-small', 'text-figma-body-large')).toBe('text-figma-body-large');
+    expect(cn('text-figma-heading-small', 'text-figma-danger')).toBe(
+      'text-figma-heading-small text-figma-danger',
+    );
+  });
+});
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/alert-dialog-open-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/alert-dialog-open-figjam-chromium-darwin.png
new file mode 100644
index 0000000..e2fc0d8
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/alert-dialog-open-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/alert-dialog-open-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/alert-dialog-open-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..5b7681c
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/alert-dialog-open-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/alert-dialog-open-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/alert-dialog-open-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..932eda3
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/alert-dialog-open-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/alert-dialog-open-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/alert-dialog-open-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..0767caf
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/alert-dialog-open-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dialog-open-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dialog-open-figjam-chromium-darwin.png
new file mode 100644
index 0000000..32e4607
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dialog-open-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dialog-open-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dialog-open-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..b7247f5
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dialog-open-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dialog-open-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dialog-open-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..360fc66
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dialog-open-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dialog-open-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dialog-open-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..9599958
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dialog-open-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dropdown-menu-open-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dropdown-menu-open-figjam-chromium-darwin.png
new file mode 100644
index 0000000..b3d41d0
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dropdown-menu-open-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dropdown-menu-open-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dropdown-menu-open-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..eaa6657
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dropdown-menu-open-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dropdown-menu-open-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dropdown-menu-open-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..1573b30
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dropdown-menu-open-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dropdown-menu-open-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dropdown-menu-open-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..e0eb93d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dropdown-menu-open-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dropdown-menu-submenu-open-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dropdown-menu-submenu-open-figjam-chromium-darwin.png
new file mode 100644
index 0000000..1567079
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dropdown-menu-submenu-open-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dropdown-menu-submenu-open-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dropdown-menu-submenu-open-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..46cff0b
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dropdown-menu-submenu-open-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dropdown-menu-submenu-open-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dropdown-menu-submenu-open-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..dde49eb
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dropdown-menu-submenu-open-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dropdown-menu-submenu-open-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dropdown-menu-submenu-open-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..2eee6cc
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/dropdown-menu-submenu-open-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/popover-open-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/popover-open-figjam-chromium-darwin.png
new file mode 100644
index 0000000..161686a
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/popover-open-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/popover-open-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/popover-open-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..3b57952
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/popover-open-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/popover-open-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/popover-open-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..9f984fe
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/popover-open-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/popover-open-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/popover-open-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..69b74bd
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/popover-open-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/select-open-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/select-open-figjam-chromium-darwin.png
new file mode 100644
index 0000000..e3e98b7
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/select-open-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/select-open-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/select-open-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..494e489
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/select-open-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/select-open-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/select-open-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..edbf81f
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/select-open-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/select-open-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/select-open-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..ff9cdeb
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/select-open-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/sheet-open-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/sheet-open-figjam-chromium-darwin.png
new file mode 100644
index 0000000..9148069
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/sheet-open-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/sheet-open-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/sheet-open-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..8b26a2f
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/sheet-open-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/sheet-open-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/sheet-open-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..e361e4b
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/sheet-open-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/sheet-open-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/sheet-open-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..d227408
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/sheet-open-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/tooltip-open-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/tooltip-open-figjam-chromium-darwin.png
new file mode 100644
index 0000000..a8879a5
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/tooltip-open-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/tooltip-open-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/tooltip-open-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..f518768
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/tooltip-open-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/tooltip-open-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/tooltip-open-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..f518768
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/tooltip-open-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/tooltip-open-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/tooltip-open-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..a8879a5
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/overlays.vrt.test.tsx/tooltip-open-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-default-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-default-figjam-chromium-darwin.png
new file mode 100644
index 0000000..aaad61e
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-default-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-default-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-default-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..7304e4a
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-default-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-default-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-default-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..7304e4a
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-default-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-default-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-default-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..aaad61e
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-default-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-expanded-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-expanded-figjam-chromium-darwin.png
new file mode 100644
index 0000000..a6ad6f3
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-expanded-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-expanded-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-expanded-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..bd79640
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-expanded-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-expanded-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-expanded-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..d98eb67
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-expanded-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-expanded-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-expanded-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..3e4474c
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-expanded-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-medium-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-medium-figjam-chromium-darwin.png
new file mode 100644
index 0000000..aaad61e
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-medium-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-medium-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-medium-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..7304e4a
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-medium-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-medium-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-medium-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..7304e4a
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-medium-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-medium-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-medium-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..aaad61e
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-medium-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-secondary-expanded-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-secondary-expanded-figjam-chromium-darwin.png
new file mode 100644
index 0000000..a6ad6f3
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-secondary-expanded-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-secondary-expanded-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-secondary-expanded-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..bd79640
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-secondary-expanded-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-secondary-expanded-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-secondary-expanded-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..d98eb67
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-secondary-expanded-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-secondary-expanded-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-secondary-expanded-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..3e4474c
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-secondary-expanded-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-secondary-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-secondary-figjam-chromium-darwin.png
new file mode 100644
index 0000000..68a1b68
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-secondary-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-secondary-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-secondary-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..8f7f662
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-secondary-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-secondary-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-secondary-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..8f7f662
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-secondary-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-secondary-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-secondary-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..68a1b68
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-secondary-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-default-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-default-figjam-chromium-darwin.png
new file mode 100644
index 0000000..c0ca8ee
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-default-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-default-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-default-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..024ab21
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-default-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-default-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-default-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..024ab21
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-default-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-default-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-default-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..c0ca8ee
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-default-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-disabled-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-disabled-figjam-chromium-darwin.png
new file mode 100644
index 0000000..119aff8
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-disabled-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-disabled-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-disabled-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..f954a20
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-disabled-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-disabled-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-disabled-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..f954a20
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-disabled-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-disabled-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-disabled-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..119aff8
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-disabled-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-expanded-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-expanded-figjam-chromium-darwin.png
new file mode 100644
index 0000000..5f9e6ac
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-expanded-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-expanded-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-expanded-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..f2060dd
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-expanded-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-expanded-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-expanded-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..8a476d8
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-expanded-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-expanded-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-expanded-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..6527488
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-expanded-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-large-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-large-figjam-chromium-darwin.png
new file mode 100644
index 0000000..00b69f6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-large-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-large-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-large-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..519aa71
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-large-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-large-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-large-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..519aa71
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-large-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-large-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-large-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..00b69f6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-action-icon-split-large-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-alert-dialog-default-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-alert-dialog-default-figjam-chromium-darwin.png
new file mode 100644
index 0000000..88c0235
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-alert-dialog-default-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-alert-dialog-default-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-alert-dialog-default-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..1462994
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-alert-dialog-default-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-alert-dialog-default-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-alert-dialog-default-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..1462994
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-alert-dialog-default-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-alert-dialog-default-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-alert-dialog-default-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..88c0235
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-alert-dialog-default-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-content-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-content-figjam-chromium-darwin.png
new file mode 100644
index 0000000..fbb1065
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-content-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-content-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-content-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..da5bae7
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-content-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-content-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-content-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..da5bae7
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-content-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-content-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-content-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..fbb1065
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-content-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-default-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-default-figjam-chromium-darwin.png
new file mode 100644
index 0000000..cbee493
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-default-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-default-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-default-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..6e061b0
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-default-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-default-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-default-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..6e061b0
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-default-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-default-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-default-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..cbee493
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-default-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-disabled-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-disabled-figjam-chromium-darwin.png
new file mode 100644
index 0000000..fe722fd
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-disabled-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-disabled-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-disabled-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..40c9fac
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-disabled-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-disabled-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-disabled-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..40c9fac
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-disabled-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-disabled-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-disabled-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..fe722fd
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-disabled-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-gallery-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-gallery-figjam-chromium-darwin.png
new file mode 100644
index 0000000..9c1e033
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-gallery-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-gallery-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-gallery-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..c7b2ada
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-gallery-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-gallery-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-gallery-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..c7b2ada
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-gallery-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-gallery-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-gallery-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..9c1e033
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-gallery-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-group-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-group-figjam-chromium-darwin.png
new file mode 100644
index 0000000..9bae424
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-group-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-group-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-group-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..f0400cc
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-group-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-group-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-group-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..f0400cc
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-group-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-group-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-group-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..9bae424
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-group-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-overflow-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-overflow-figjam-chromium-darwin.png
new file mode 100644
index 0000000..f4f6efb
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-overflow-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-overflow-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-overflow-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..abfeab7
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-overflow-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-overflow-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-overflow-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..05a4bd2
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-overflow-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-overflow-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-overflow-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..dd6fcb8
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-overflow-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-photo-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-photo-figjam-chromium-darwin.png
new file mode 100644
index 0000000..0f6e6d5
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-photo-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-photo-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-photo-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..341bd75
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-photo-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-photo-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-photo-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..341bd75
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-photo-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-photo-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-photo-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..0f6e6d5
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-photo-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-square-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-square-figjam-chromium-darwin.png
new file mode 100644
index 0000000..28e851b
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-square-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-square-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-square-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..1223133
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-square-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-square-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-square-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..1223133
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-square-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-square-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-square-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..28e851b
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-avatar-square-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-alt-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-alt-figjam-chromium-darwin.png
new file mode 100644
index 0000000..08f8257
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-alt-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-alt-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-alt-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..5847f82
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-alt-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-alt-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-alt-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..8ab85f4
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-alt-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-alt-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-alt-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..90c929a
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-alt-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-branching-and-merging-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-branching-and-merging-figjam-chromium-darwin.png
new file mode 100644
index 0000000..2ba45e8
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-branching-and-merging-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-branching-and-merging-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-branching-and-merging-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..3b48b27
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-branching-and-merging-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-branching-and-merging-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-branching-and-merging-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..3b48b27
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-branching-and-merging-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-branching-and-merging-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-branching-and-merging-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..2ba45e8
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-branching-and-merging-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-default-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-default-figjam-chromium-darwin.png
new file mode 100644
index 0000000..1e643f7
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-default-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-default-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-default-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..7a5c2ab
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-default-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-default-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-default-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..7a5c2ab
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-default-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-default-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-default-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..1e643f7
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-default-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-dot-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-dot-figjam-chromium-darwin.png
new file mode 100644
index 0000000..e618808
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-dot-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-dot-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-dot-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..600457f
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-dot-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-dot-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-dot-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..8d69114
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-dot-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-dot-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-dot-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..70e15f2
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-dot-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-gallery-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-gallery-figjam-chromium-darwin.png
new file mode 100644
index 0000000..29d6e5d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-gallery-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-gallery-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-gallery-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..88400f7
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-gallery-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-gallery-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-gallery-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..7e5b672
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-gallery-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-gallery-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-gallery-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..305de26
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-gallery-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-large-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-large-figjam-chromium-darwin.png
new file mode 100644
index 0000000..c6f81da
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-large-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-large-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-large-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..e93b1dc
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-large-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-large-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-large-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..e93b1dc
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-large-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-large-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-large-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..c6f81da
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-large-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-with-icons-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-with-icons-figjam-chromium-darwin.png
new file mode 100644
index 0000000..78def07
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-with-icons-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-with-icons-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-with-icons-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..999284e
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-with-icons-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-with-icons-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-with-icons-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..1a9aef4
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-with-icons-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-with-icons-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-with-icons-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..010f627
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-badge-with-icons-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-destructive-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-destructive-figjam-chromium-darwin.png
new file mode 100644
index 0000000..4f157bc
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-destructive-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-destructive-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-destructive-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..449c696
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-destructive-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-destructive-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-destructive-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..449c696
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-destructive-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-destructive-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-destructive-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..4f157bc
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-destructive-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-disabled-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-disabled-figjam-chromium-darwin.png
new file mode 100644
index 0000000..b32fd0b
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-disabled-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-disabled-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-disabled-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..71685d6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-disabled-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-disabled-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-disabled-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..71685d6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-disabled-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-disabled-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-disabled-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..b32fd0b
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-disabled-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-fig-jam-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-fig-jam-figjam-chromium-darwin.png
new file mode 100644
index 0000000..71618ab
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-fig-jam-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-fig-jam-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-fig-jam-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..9dcdab6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-fig-jam-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-fig-jam-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-fig-jam-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..9dcdab6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-fig-jam-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-fig-jam-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-fig-jam-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..71618ab
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-fig-jam-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-ghost-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-ghost-figjam-chromium-darwin.png
new file mode 100644
index 0000000..da4b500
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-ghost-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-ghost-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-ghost-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..4423097
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-ghost-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-ghost-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-ghost-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..4423097
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-ghost-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-ghost-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-ghost-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..da4b500
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-ghost-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-inverse-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-inverse-figjam-chromium-darwin.png
new file mode 100644
index 0000000..e3afb36
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-inverse-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-inverse-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-inverse-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..effc0c3
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-inverse-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-inverse-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-inverse-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..effc0c3
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-inverse-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-inverse-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-inverse-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..e3afb36
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-inverse-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-large-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-large-figjam-chromium-darwin.png
new file mode 100644
index 0000000..817c6a7
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-large-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-large-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-large-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..74e3d75
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-large-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-large-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-large-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..8239e68
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-large-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-large-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-large-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..3355fd3
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-large-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-link-danger-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-link-danger-figjam-chromium-darwin.png
new file mode 100644
index 0000000..f2ecb62
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-link-danger-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-link-danger-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-link-danger-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..62ec228
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-link-danger-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-link-danger-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-link-danger-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..62ec228
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-link-danger-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-link-danger-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-link-danger-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..f2ecb62
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-link-danger-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-link-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-link-figjam-chromium-darwin.png
new file mode 100644
index 0000000..10b9a28
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-link-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-link-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-link-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..95039cf
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-link-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-link-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-link-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..cdcb8fe
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-link-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-link-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-link-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..5c29fd3
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-link-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-primary-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-primary-figjam-chromium-darwin.png
new file mode 100644
index 0000000..bdb76d9
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-primary-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-primary-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-primary-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..f05ac03
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-primary-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-primary-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-primary-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..6927a53
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-primary-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-primary-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-primary-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..94e98d4
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-primary-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-secondary-destructive-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-secondary-destructive-figjam-chromium-darwin.png
new file mode 100644
index 0000000..443b52f
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-secondary-destructive-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-secondary-destructive-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-secondary-destructive-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..3cbe0ed
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-secondary-destructive-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-secondary-destructive-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-secondary-destructive-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..3cbe0ed
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-secondary-destructive-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-secondary-destructive-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-secondary-destructive-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..443b52f
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-secondary-destructive-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-secondary-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-secondary-figjam-chromium-darwin.png
new file mode 100644
index 0000000..bce9f23
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-secondary-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-secondary-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-secondary-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..7cea15a
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-secondary-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-secondary-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-secondary-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..7cea15a
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-secondary-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-secondary-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-secondary-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..bce9f23
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-secondary-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-success-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-success-figjam-chromium-darwin.png
new file mode 100644
index 0000000..760bd45
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-success-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-success-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-success-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..460c8fe
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-success-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-success-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-success-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..460c8fe
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-success-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-success-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-success-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..760bd45
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-success-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-wide-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-wide-figjam-chromium-darwin.png
new file mode 100644
index 0000000..154cff4
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-wide-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-wide-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-wide-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..1b5f319
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-wide-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-wide-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-wide-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..89aae14
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-wide-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-wide-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-wide-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..604da04
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-wide-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-with-icon-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-with-icon-figjam-chromium-darwin.png
new file mode 100644
index 0000000..827991f
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-with-icon-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-with-icon-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-with-icon-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..fbb5017
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-with-icon-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-with-icon-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-with-icon-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..c5794f9
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-with-icon-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-with-icon-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-with-icon-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..749c9e1
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-button-with-icon-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-checked-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-checked-figjam-chromium-darwin.png
new file mode 100644
index 0000000..0d1f04c
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-checked-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-checked-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-checked-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..4c62a9d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-checked-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-checked-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-checked-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..0505bce
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-checked-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-checked-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-checked-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..a463ae5
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-checked-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-disabled-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-disabled-figjam-chromium-darwin.png
new file mode 100644
index 0000000..0bb3021
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-disabled-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-disabled-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-disabled-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..b3f203d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-disabled-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-disabled-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-disabled-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..b3f203d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-disabled-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-disabled-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-disabled-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..0bb3021
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-disabled-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-indeterminate-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-indeterminate-figjam-chromium-darwin.png
new file mode 100644
index 0000000..792f3a7
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-indeterminate-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-indeterminate-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-indeterminate-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..ff23a8d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-indeterminate-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-indeterminate-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-indeterminate-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..45d3c8e
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-indeterminate-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-indeterminate-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-indeterminate-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..0c953c7
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-indeterminate-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-unchecked-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-unchecked-figjam-chromium-darwin.png
new file mode 100644
index 0000000..19a09ab
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-unchecked-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-unchecked-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-unchecked-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..0025c09
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-unchecked-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-unchecked-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-unchecked-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..0025c09
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-unchecked-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-unchecked-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-unchecked-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..19a09ab
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-unchecked-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-variants-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-variants-figjam-chromium-darwin.png
new file mode 100644
index 0000000..e2f3fae
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-variants-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-variants-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-variants-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..b1ec25d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-variants-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-variants-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-variants-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..b1ec25d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-variants-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-variants-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-variants-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..e2f3fae
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-variants-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-with-description-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-with-description-figjam-chromium-darwin.png
new file mode 100644
index 0000000..a50cfeb
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-with-description-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-with-description-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-with-description-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..aad719a
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-with-description-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-with-description-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-with-description-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..aad719a
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-with-description-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-with-description-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-with-description-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..a50cfeb
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-with-description-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-with-label-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-with-label-figjam-chromium-darwin.png
new file mode 100644
index 0000000..3cde45f
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-with-label-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-with-label-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-with-label-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..3a86b63
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-with-label-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-with-label-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-with-label-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..3a86b63
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-with-label-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-with-label-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-with-label-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..3cde45f
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-checkbox-with-label-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-context-menu-default-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-context-menu-default-figjam-chromium-darwin.png
new file mode 100644
index 0000000..16d6d71
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-context-menu-default-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-context-menu-default-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-context-menu-default-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..81fe238
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-context-menu-default-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-context-menu-default-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-context-menu-default-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..81fe238
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-context-menu-default-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-context-menu-default-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-context-menu-default-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..16d6d71
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-context-menu-default-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-context-menu-with-checkboxes-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-context-menu-with-checkboxes-figjam-chromium-darwin.png
new file mode 100644
index 0000000..16d6d71
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-context-menu-with-checkboxes-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-context-menu-with-checkboxes-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-context-menu-with-checkboxes-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..81fe238
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-context-menu-with-checkboxes-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-context-menu-with-checkboxes-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-context-menu-with-checkboxes-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..81fe238
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-context-menu-with-checkboxes-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-context-menu-with-checkboxes-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-context-menu-with-checkboxes-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..16d6d71
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-context-menu-with-checkboxes-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dialog-default-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dialog-default-figjam-chromium-darwin.png
new file mode 100644
index 0000000..fd84881
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dialog-default-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dialog-default-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dialog-default-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..4909e9d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dialog-default-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dialog-default-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dialog-default-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..4909e9d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dialog-default-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dialog-default-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dialog-default-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..fd84881
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dialog-default-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dialog-large-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dialog-large-figjam-chromium-darwin.png
new file mode 100644
index 0000000..fd84881
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dialog-large-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dialog-large-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dialog-large-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..4909e9d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dialog-large-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dialog-large-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dialog-large-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..4909e9d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dialog-large-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dialog-large-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dialog-large-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..fd84881
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dialog-large-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dropdown-menu-default-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dropdown-menu-default-figjam-chromium-darwin.png
new file mode 100644
index 0000000..84a583d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dropdown-menu-default-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dropdown-menu-default-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dropdown-menu-default-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..fa6c8d2
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dropdown-menu-default-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dropdown-menu-default-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dropdown-menu-default-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..fa6c8d2
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dropdown-menu-default-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dropdown-menu-default-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dropdown-menu-default-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..84a583d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-dropdown-menu-default-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-border-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-border-figjam-chromium-darwin.png
new file mode 100644
index 0000000..2c74fc0
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-border-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-border-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-border-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..e74f9f6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-border-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-border-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-border-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..e74f9f6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-border-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-border-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-border-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..2c74fc0
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-border-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-default-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-default-figjam-chromium-darwin.png
new file mode 100644
index 0000000..4e497c6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-default-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-default-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-default-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..2fd6935
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-default-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-default-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-default-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..2fd6935
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-default-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-default-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-default-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..4e497c6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-default-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-disabled-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-disabled-figjam-chromium-darwin.png
new file mode 100644
index 0000000..d6e2fd9
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-disabled-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-disabled-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-disabled-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..7b5cb88
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-disabled-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-disabled-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-disabled-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..7b5cb88
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-disabled-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-disabled-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-disabled-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..d6e2fd9
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-disabled-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-invalid-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-invalid-figjam-chromium-darwin.png
new file mode 100644
index 0000000..6783237
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-invalid-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-invalid-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-invalid-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..8b6ce30
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-invalid-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-invalid-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-invalid-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..8b6ce30
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-invalid-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-invalid-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-invalid-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..6783237
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-invalid-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-large-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-large-figjam-chromium-darwin.png
new file mode 100644
index 0000000..eb9bb54
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-large-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-large-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-large-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..919988a
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-large-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-large-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-large-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..919988a
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-large-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-large-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-large-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..eb9bb54
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-large-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-left-icon-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-left-icon-figjam-chromium-darwin.png
new file mode 100644
index 0000000..1bdf51c
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-left-icon-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-left-icon-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-left-icon-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..4894b55
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-left-icon-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-left-icon-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-left-icon-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..4894b55
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-left-icon-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-left-icon-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-left-icon-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..1bdf51c
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-left-icon-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-right-icon-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-right-icon-figjam-chromium-darwin.png
new file mode 100644
index 0000000..eda2e39
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-right-icon-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-right-icon-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-right-icon-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..f5826b1
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-right-icon-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-right-icon-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-right-icon-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..f5826b1
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-right-icon-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-right-icon-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-right-icon-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..eda2e39
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-right-icon-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-slots-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-slots-figjam-chromium-darwin.png
new file mode 100644
index 0000000..e3bb4c0
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-slots-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-slots-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-slots-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..e9d2beb
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-slots-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-slots-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-slots-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..e9d2beb
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-slots-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-slots-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-slots-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..e3bb4c0
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-slots-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-tooltip-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-tooltip-figjam-chromium-darwin.png
new file mode 100644
index 0000000..002a4a1
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-tooltip-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-tooltip-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-tooltip-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..04c52da
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-tooltip-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-tooltip-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-tooltip-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..04c52da
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-tooltip-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-tooltip-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-tooltip-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..002a4a1
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-tooltip-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-variable-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-variable-figjam-chromium-darwin.png
new file mode 100644
index 0000000..2e1aa49
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-variable-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-variable-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-variable-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..bc69958
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-variable-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-variable-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-variable-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..bc69958
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-variable-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-variable-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-variable-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..2e1aa49
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-input-with-variable-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-in-field-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-in-field-figjam-chromium-darwin.png
new file mode 100644
index 0000000..7b9055b
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-in-field-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-in-field-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-in-field-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..c4f08a3
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-in-field-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-in-field-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-in-field-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..c4f08a3
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-in-field-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-in-field-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-in-field-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..7b9055b
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-in-field-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-link-actions-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-link-actions-figjam-chromium-darwin.png
new file mode 100644
index 0000000..5b0a107
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-link-actions-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-link-actions-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-link-actions-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..fe490e2
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-link-actions-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-link-actions-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-link-actions-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..fe490e2
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-link-actions-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-link-actions-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-link-actions-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..5b0a107
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-link-actions-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-url-input-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-url-input-figjam-chromium-darwin.png
new file mode 100644
index 0000000..08fec15
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-url-input-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-url-input-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-url-input-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..e49d43e
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-url-input-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-url-input-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-url-input-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..e49d43e
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-url-input-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-url-input-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-url-input-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..08fec15
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-link-tooltip-url-input-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-popover-default-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-popover-default-figjam-chromium-darwin.png
new file mode 100644
index 0000000..88b75ca
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-popover-default-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-popover-default-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-popover-default-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..36364a7
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-popover-default-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-popover-default-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-popover-default-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..36364a7
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-popover-default-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-popover-default-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-popover-default-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..88b75ca
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-popover-default-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-buttons-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-buttons-figjam-chromium-darwin.png
new file mode 100644
index 0000000..09d1619
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-buttons-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-buttons-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-buttons-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..4f35a77
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-buttons-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-buttons-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-buttons-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..6b69cfb
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-buttons-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-buttons-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-buttons-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..745db77
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-buttons-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-default-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-default-figjam-chromium-darwin.png
new file mode 100644
index 0000000..7a2b918
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-default-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-default-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-default-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..a29bb75
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-default-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-default-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-default-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..a29bb75
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-default-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-default-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-default-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..7a2b918
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-default-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-disabled-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-disabled-figjam-chromium-darwin.png
new file mode 100644
index 0000000..1eb4668
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-disabled-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-disabled-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-disabled-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..29db5e0
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-disabled-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-disabled-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-disabled-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..29db5e0
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-disabled-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-disabled-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-disabled-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..1eb4668
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-disabled-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-inline-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-inline-figjam-chromium-darwin.png
new file mode 100644
index 0000000..6d971d6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-inline-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-inline-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-inline-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..fe7432e
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-inline-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-inline-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-inline-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..fe7432e
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-inline-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-inline-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-inline-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..6d971d6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-radio-inline-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-scroll-area-default-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-scroll-area-default-figjam-chromium-darwin.png
new file mode 100644
index 0000000..a804d7d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-scroll-area-default-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-scroll-area-default-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-scroll-area-default-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..1473152
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-scroll-area-default-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-scroll-area-default-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-scroll-area-default-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..1473152
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-scroll-area-default-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-scroll-area-default-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-scroll-area-default-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..a804d7d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-scroll-area-default-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-default-mark-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-default-mark-figjam-chromium-darwin.png
new file mode 100644
index 0000000..91044bc
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-default-mark-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-default-mark-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-default-mark-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..a4b447d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-default-mark-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-default-mark-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-default-mark-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..a4b447d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-default-mark-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-default-mark-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-default-mark-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..91044bc
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-default-mark-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-disabled-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-disabled-figjam-chromium-darwin.png
new file mode 100644
index 0000000..b39afa0
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-disabled-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-disabled-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-disabled-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..07b43f2
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-disabled-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-disabled-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-disabled-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..07b43f2
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-disabled-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-disabled-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-disabled-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..b39afa0
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-disabled-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-icons-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-icons-figjam-chromium-darwin.png
new file mode 100644
index 0000000..277fa61
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-icons-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-icons-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-icons-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..8dc6a16
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-icons-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-icons-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-icons-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..8dc6a16
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-icons-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-icons-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-icons-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..277fa61
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-icons-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-labels-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-labels-figjam-chromium-darwin.png
new file mode 100644
index 0000000..e9e477c
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-labels-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-labels-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-labels-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..d8abe60
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-labels-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-labels-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-labels-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..d8abe60
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-labels-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-labels-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-labels-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..e9e477c
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-segmented-control-labels-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-custom-trigger-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-custom-trigger-figjam-chromium-darwin.png
new file mode 100644
index 0000000..0837fde
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-custom-trigger-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-custom-trigger-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-custom-trigger-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..55149ae
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-custom-trigger-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-custom-trigger-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-custom-trigger-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..55149ae
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-custom-trigger-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-custom-trigger-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-custom-trigger-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..0837fde
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-custom-trigger-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-default-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-default-figjam-chromium-darwin.png
new file mode 100644
index 0000000..b0d9a92
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-default-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-default-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-default-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..ddffae7
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-default-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-default-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-default-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..ddffae7
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-default-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-default-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-default-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..b0d9a92
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-default-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-large-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-large-figjam-chromium-darwin.png
new file mode 100644
index 0000000..cd29d58
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-large-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-large-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-large-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..8a18877
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-large-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-large-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-large-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..8a18877
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-large-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-large-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-large-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..cd29d58
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-large-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-no-stroke-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-no-stroke-figjam-chromium-darwin.png
new file mode 100644
index 0000000..c4d5f78
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-no-stroke-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-no-stroke-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-no-stroke-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..7cb4096
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-no-stroke-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-no-stroke-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-no-stroke-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..7cb4096
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-no-stroke-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-no-stroke-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-no-stroke-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..c4d5f78
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-no-stroke-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-option-with-icon-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-option-with-icon-figjam-chromium-darwin.png
new file mode 100644
index 0000000..89525b1
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-option-with-icon-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-option-with-icon-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-option-with-icon-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..fcc14d9
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-option-with-icon-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-option-with-icon-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-option-with-icon-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..fcc14d9
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-option-with-icon-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-option-with-icon-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-option-with-icon-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..89525b1
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-option-with-icon-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-placeholder-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-placeholder-figjam-chromium-darwin.png
new file mode 100644
index 0000000..2cb6ff3
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-placeholder-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-placeholder-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-placeholder-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..0388743
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-placeholder-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-placeholder-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-placeholder-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..0388743
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-placeholder-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-placeholder-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-placeholder-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..2cb6ff3
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-placeholder-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-popover-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-popover-figjam-chromium-darwin.png
new file mode 100644
index 0000000..b0d9a92
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-popover-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-popover-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-popover-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..ddffae7
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-popover-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-popover-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-popover-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..ddffae7
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-popover-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-popover-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-popover-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..b0d9a92
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-popover-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-icon-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-icon-figjam-chromium-darwin.png
new file mode 100644
index 0000000..168c4e0
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-icon-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-icon-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-icon-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..205c724
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-icon-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-icon-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-icon-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..205c724
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-icon-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-icon-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-icon-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..168c4e0
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-icon-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-icon-large-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-icon-large-figjam-chromium-darwin.png
new file mode 100644
index 0000000..126e64c
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-icon-large-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-icon-large-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-icon-large-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..a878121
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-icon-large-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-icon-large-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-icon-large-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..a878121
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-icon-large-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-icon-large-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-icon-large-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..126e64c
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-icon-large-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-label-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-label-figjam-chromium-darwin.png
new file mode 100644
index 0000000..d8fabae
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-label-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-label-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-label-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..1e14fac
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-label-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-label-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-label-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..1e14fac
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-label-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-label-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-label-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..d8fabae
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-select-with-label-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-separator-default-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-separator-default-figjam-chromium-darwin.png
new file mode 100644
index 0000000..4f14169
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-separator-default-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-separator-default-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-separator-default-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..0599a8b
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-separator-default-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-separator-default-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-separator-default-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..0599a8b
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-separator-default-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-separator-default-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-separator-default-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..4f14169
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-separator-default-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-sheet-default-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-sheet-default-figjam-chromium-darwin.png
new file mode 100644
index 0000000..d9ea487
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-sheet-default-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-sheet-default-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-sheet-default-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..9ce9c90
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-sheet-default-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-sheet-default-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-sheet-default-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..d0c4514
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-sheet-default-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-sheet-default-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-sheet-default-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..f95abab
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-sheet-default-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-custom-style-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-custom-style-figjam-chromium-darwin.png
new file mode 100644
index 0000000..2f3d04c
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-custom-style-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-custom-style-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-custom-style-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..e494acd
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-custom-style-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-custom-style-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-custom-style-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..e494acd
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-custom-style-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-custom-style-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-custom-style-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..2f3d04c
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-custom-style-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-default-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-default-figjam-chromium-darwin.png
new file mode 100644
index 0000000..bd39740
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-default-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-default-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-default-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..d8d8253
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-default-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-default-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-default-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..370bb9f
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-default-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-default-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-default-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..4df6c02
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-default-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-delta-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-delta-figjam-chromium-darwin.png
new file mode 100644
index 0000000..5127b76
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-delta-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-delta-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-delta-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..0ffacfe
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-delta-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-delta-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-delta-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..0883d68
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-delta-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-delta-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-delta-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..8e989b6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-delta-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-disabled-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-disabled-figjam-chromium-darwin.png
new file mode 100644
index 0000000..06e6fa9
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-disabled-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-disabled-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-disabled-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..ecb28d6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-disabled-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-disabled-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-disabled-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..ecb28d6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-disabled-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-disabled-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-disabled-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..06e6fa9
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-disabled-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-gradient-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-gradient-figjam-chromium-darwin.png
new file mode 100644
index 0000000..408439a
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-gradient-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-gradient-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-gradient-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..84a0259
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-gradient-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-gradient-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-gradient-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..84a0259
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-gradient-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-gradient-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-gradient-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..408439a
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-gradient-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-hue-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-hue-figjam-chromium-darwin.png
new file mode 100644
index 0000000..a8ff190
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-hue-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-hue-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-hue-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..e201032
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-hue-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-hue-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-hue-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..e201032
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-hue-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-hue-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-hue-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..a8ff190
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-hue-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-modified-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-modified-figjam-chromium-darwin.png
new file mode 100644
index 0000000..91233ab
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-modified-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-modified-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-modified-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..33b91c8
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-modified-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-modified-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-modified-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..8a08381
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-modified-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-modified-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-modified-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..a098205
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-modified-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-opacity-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-opacity-figjam-chromium-darwin.png
new file mode 100644
index 0000000..beaa7d7
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-opacity-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-opacity-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-opacity-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..5f8bfdf
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-opacity-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-opacity-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-opacity-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..5f8bfdf
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-opacity-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-opacity-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-opacity-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..beaa7d7
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-opacity-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-range-slider-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-range-slider-figjam-chromium-darwin.png
new file mode 100644
index 0000000..79fe673
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-range-slider-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-range-slider-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-range-slider-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..06ea93d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-range-slider-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-range-slider-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-range-slider-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..8006137
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-range-slider-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-range-slider-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-range-slider-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..fa7e178
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-range-slider-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-stepper-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-stepper-figjam-chromium-darwin.png
new file mode 100644
index 0000000..5bc9071
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-stepper-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-stepper-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-stepper-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..9d7e2b3
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-stepper-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-stepper-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-stepper-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..8c428ec
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-stepper-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-stepper-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-stepper-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..6eedbef
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-stepper-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-with-value-tooltip-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-with-value-tooltip-figjam-chromium-darwin.png
new file mode 100644
index 0000000..bd39740
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-with-value-tooltip-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-with-value-tooltip-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-with-value-tooltip-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..d8d8253
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-with-value-tooltip-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-with-value-tooltip-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-with-value-tooltip-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..370bb9f
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-with-value-tooltip-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-with-value-tooltip-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-with-value-tooltip-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..4df6c02
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-slider-with-value-tooltip-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-circle-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-circle-figjam-chromium-darwin.png
new file mode 100644
index 0000000..cbf52e7
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-circle-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-circle-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-circle-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..89aebd8
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-circle-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-circle-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-circle-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..89aebd8
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-circle-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-circle-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-circle-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..cbf52e7
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-circle-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-default-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-default-figjam-chromium-darwin.png
new file mode 100644
index 0000000..92d803c
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-default-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-default-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-default-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..d4d22b4
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-default-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-default-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-default-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..d4d22b4
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-default-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-default-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-default-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..92d803c
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-default-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-fills-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-fills-figjam-chromium-darwin.png
new file mode 100644
index 0000000..acdd9b1
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-fills-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-fills-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-fills-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..788ad38
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-fills-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-fills-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-fills-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..788ad38
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-fills-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-fills-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-fills-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..acdd9b1
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-fills-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-in-value-field-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-in-value-field-figjam-chromium-darwin.png
new file mode 100644
index 0000000..3e386c1
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-in-value-field-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-in-value-field-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-in-value-field-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..e4e8fc0
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-in-value-field-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-in-value-field-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-in-value-field-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..e4e8fc0
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-in-value-field-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-in-value-field-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-in-value-field-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..3e386c1
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-in-value-field-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-opacity-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-opacity-figjam-chromium-darwin.png
new file mode 100644
index 0000000..06eeae4
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-opacity-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-opacity-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-opacity-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..990bd67
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-opacity-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-opacity-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-opacity-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..990bd67
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-opacity-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-opacity-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-opacity-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..06eeae4
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-swatch-opacity-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-checked-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-checked-figjam-chromium-darwin.png
new file mode 100644
index 0000000..75979b1
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-checked-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-checked-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-checked-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..22cff79
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-checked-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-checked-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-checked-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..dbf491d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-checked-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-checked-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-checked-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..9484596
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-checked-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-disabled-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-disabled-figjam-chromium-darwin.png
new file mode 100644
index 0000000..e33789a
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-disabled-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-disabled-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-disabled-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..12a2ca3
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-disabled-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-disabled-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-disabled-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..12a2ca3
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-disabled-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-disabled-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-disabled-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..e33789a
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-disabled-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-mixed-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-mixed-figjam-chromium-darwin.png
new file mode 100644
index 0000000..af4b54e
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-mixed-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-mixed-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-mixed-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..9a3c3c2
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-mixed-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-mixed-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-mixed-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..40e4f9a
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-mixed-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-mixed-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-mixed-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..d917de0
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-mixed-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-unchecked-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-unchecked-figjam-chromium-darwin.png
new file mode 100644
index 0000000..7e0fa8d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-unchecked-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-unchecked-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-unchecked-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..84c1f55
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-unchecked-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-unchecked-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-unchecked-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..84c1f55
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-unchecked-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-unchecked-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-unchecked-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..7e0fa8d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-unchecked-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-with-label-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-with-label-figjam-chromium-darwin.png
new file mode 100644
index 0000000..e38cbe8
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-with-label-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-with-label-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-with-label-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..23c6c65
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-with-label-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-with-label-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-with-label-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..23c6c65
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-with-label-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-with-label-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-with-label-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..e38cbe8
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-switch-with-label-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tabs-default-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tabs-default-figjam-chromium-darwin.png
new file mode 100644
index 0000000..5a57a02
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tabs-default-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tabs-default-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tabs-default-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..037343e
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tabs-default-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tabs-default-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tabs-default-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..037343e
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tabs-default-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tabs-default-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tabs-default-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..5a57a02
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tabs-default-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tabs-overflow-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tabs-overflow-figjam-chromium-darwin.png
new file mode 100644
index 0000000..c67f79c
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tabs-overflow-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tabs-overflow-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tabs-overflow-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..5602c54
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tabs-overflow-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tabs-overflow-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tabs-overflow-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..5602c54
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tabs-overflow-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tabs-overflow-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tabs-overflow-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..c67f79c
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tabs-overflow-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-default-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-default-figjam-chromium-darwin.png
new file mode 100644
index 0000000..8a94a17
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-default-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-default-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-default-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..5ff9098
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-default-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-default-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-default-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..5ff9098
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-default-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-default-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-default-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..8a94a17
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-default-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-disabled-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-disabled-figjam-chromium-darwin.png
new file mode 100644
index 0000000..8a94a17
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-disabled-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-disabled-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-disabled-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..5ff9098
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-disabled-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-disabled-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-disabled-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..5ff9098
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-disabled-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-disabled-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-disabled-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..8a94a17
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-disabled-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-invalid-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-invalid-figjam-chromium-darwin.png
new file mode 100644
index 0000000..94dd65a
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-invalid-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-invalid-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-invalid-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..b9e8658
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-invalid-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-invalid-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-invalid-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..b9e8658
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-invalid-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-invalid-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-invalid-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..94dd65a
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-textarea-invalid-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toast-default-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toast-default-figjam-chromium-darwin.png
new file mode 100644
index 0000000..45a395e
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toast-default-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toast-default-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toast-default-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..1524c9c
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toast-default-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toast-default-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toast-default-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..1524c9c
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toast-default-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toast-default-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toast-default-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..45a395e
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toast-default-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-default-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-default-figjam-chromium-darwin.png
new file mode 100644
index 0000000..407b7bf
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-default-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-default-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-default-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..2369854
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-default-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-default-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-default-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..2369854
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-default-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-default-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-default-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..407b7bf
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-default-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-disabled-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-disabled-figjam-chromium-darwin.png
new file mode 100644
index 0000000..863bdbf
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-disabled-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-disabled-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-disabled-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..1ab220b
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-disabled-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-disabled-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-disabled-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..1ab220b
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-disabled-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-disabled-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-disabled-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..863bdbf
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-disabled-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-disabled-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-disabled-figjam-chromium-darwin.png
new file mode 100644
index 0000000..7c7f9d1
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-disabled-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-disabled-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-disabled-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..5119426
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-disabled-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-disabled-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-disabled-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..5119426
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-disabled-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-disabled-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-disabled-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..7c7f9d1
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-disabled-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-full-width-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-full-width-figjam-chromium-darwin.png
new file mode 100644
index 0000000..0362b74
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-full-width-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-full-width-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-full-width-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..5f1c582
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-full-width-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-full-width-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-full-width-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..5f1c582
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-full-width-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-full-width-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-full-width-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..0362b74
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-full-width-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-multiple-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-multiple-figjam-chromium-darwin.png
new file mode 100644
index 0000000..decd1c6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-multiple-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-multiple-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-multiple-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..860699b
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-multiple-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-multiple-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-multiple-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..860699b
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-multiple-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-multiple-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-multiple-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..decd1c6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-multiple-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-single-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-single-figjam-chromium-darwin.png
new file mode 100644
index 0000000..3b4966b
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-single-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-single-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-single-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..f35bb57
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-single-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-single-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-single-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..f35bb57
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-single-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-single-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-single-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..3b4966b
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-single-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-text-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-text-figjam-chromium-darwin.png
new file mode 100644
index 0000000..8ac526d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-text-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-text-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-text-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..05badd7
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-text-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-text-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-text-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..05badd7
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-text-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-text-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-text-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..8ac526d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-text-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-with-tooltip-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-with-tooltip-figjam-chromium-darwin.png
new file mode 100644
index 0000000..decd1c6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-with-tooltip-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-with-tooltip-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-with-tooltip-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..860699b
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-with-tooltip-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-with-tooltip-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-with-tooltip-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..860699b
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-with-tooltip-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-with-tooltip-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-with-tooltip-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..decd1c6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-group-with-tooltip-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-icon-swap-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-icon-swap-figjam-chromium-darwin.png
new file mode 100644
index 0000000..407b7bf
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-icon-swap-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-icon-swap-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-icon-swap-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..2369854
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-icon-swap-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-icon-swap-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-icon-swap-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..2369854
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-icon-swap-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-icon-swap-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-icon-swap-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..407b7bf
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-icon-swap-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-pressed-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-pressed-figjam-chromium-darwin.png
new file mode 100644
index 0000000..8864ad9
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-pressed-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-pressed-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-pressed-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..6ea0982
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-pressed-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-pressed-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-pressed-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..8a6ec30
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-pressed-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-pressed-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-pressed-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..22defa0
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-pressed-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-with-stroke-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-with-stroke-figjam-chromium-darwin.png
new file mode 100644
index 0000000..7e41c04
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-with-stroke-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-with-stroke-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-with-stroke-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..e9fae57
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-with-stroke-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-with-stroke-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-with-stroke-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..e9fae57
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-with-stroke-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-with-stroke-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-with-stroke-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..7e41c04
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-with-stroke-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-with-stroke-pressed-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-with-stroke-pressed-figjam-chromium-darwin.png
new file mode 100644
index 0000000..8864ad9
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-with-stroke-pressed-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-with-stroke-pressed-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-with-stroke-pressed-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..7f36e6d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-with-stroke-pressed-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-with-stroke-pressed-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-with-stroke-pressed-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..36f4a5d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-with-stroke-pressed-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-with-stroke-pressed-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-with-stroke-pressed-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..22defa0
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-toggle-with-stroke-pressed-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tooltip-default-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tooltip-default-figjam-chromium-darwin.png
new file mode 100644
index 0000000..3c12d01
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tooltip-default-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tooltip-default-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tooltip-default-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..afcee7d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tooltip-default-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tooltip-default-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tooltip-default-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..afcee7d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tooltip-default-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tooltip-default-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tooltip-default-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..3c12d01
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tooltip-default-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tooltip-with-hotkey-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tooltip-with-hotkey-figjam-chromium-darwin.png
new file mode 100644
index 0000000..fffc57e
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tooltip-with-hotkey-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tooltip-with-hotkey-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tooltip-with-hotkey-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..c257806
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tooltip-with-hotkey-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tooltip-with-hotkey-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tooltip-with-hotkey-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..c257806
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tooltip-with-hotkey-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tooltip-with-hotkey-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tooltip-with-hotkey-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..fffc57e
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-tooltip-with-hotkey-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-hex-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-hex-figjam-chromium-darwin.png
new file mode 100644
index 0000000..b44fda8
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-hex-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-hex-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-hex-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..f25c682
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-hex-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-hex-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-hex-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..f25c682
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-hex-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-hex-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-hex-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..b44fda8
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-hex-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-hex-with-alpha-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-hex-with-alpha-figjam-chromium-darwin.png
new file mode 100644
index 0000000..ba59057
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-hex-with-alpha-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-hex-with-alpha-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-hex-with-alpha-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..04920c1
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-hex-with-alpha-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-hex-with-alpha-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-hex-with-alpha-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..04920c1
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-hex-with-alpha-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-hex-with-alpha-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-hex-with-alpha-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..ba59057
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-hex-with-alpha-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-multi-input-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-multi-input-figjam-chromium-darwin.png
new file mode 100644
index 0000000..6c86dc8
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-multi-input-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-multi-input-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-multi-input-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..5a2b72d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-multi-input-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-multi-input-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-multi-input-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..5a2b72d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-multi-input-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-multi-input-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-multi-input-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..6c86dc8
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-multi-input-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-figjam-chromium-darwin.png
new file mode 100644
index 0000000..760d47e
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..5553360
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..5553360
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..760d47e
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-figjam-chromium-darwin.png
new file mode 100644
index 0000000..774b487
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..f449e77
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..f449e77
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..774b487
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-highlight-preview-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-highlight-preview-figjam-chromium-darwin.png
new file mode 100644
index 0000000..9be9f6c
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-highlight-preview-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-highlight-preview-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-highlight-preview-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..f263c66
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-highlight-preview-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-highlight-preview-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-highlight-preview-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..f263c66
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-highlight-preview-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-highlight-preview-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-highlight-preview-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..9be9f6c
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-highlight-preview-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-out-of-options-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-out-of-options-figjam-chromium-darwin.png
new file mode 100644
index 0000000..12c7e8f
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-out-of-options-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-out-of-options-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-out-of-options-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..b5e9ccc
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-out-of-options-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-out-of-options-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-out-of-options-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..b5e9ccc
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-out-of-options-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-out-of-options-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-out-of-options-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..12c7e8f
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-numeric-select-out-of-options-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-rgba-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-rgba-figjam-chromium-darwin.png
new file mode 100644
index 0000000..6c86dc8
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-rgba-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-rgba-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-rgba-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..5a2b72d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-rgba-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-rgba-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-rgba-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..5a2b72d
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-rgba-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-rgba-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-rgba-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..6c86dc8
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-rgba-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-with-icon-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-with-icon-figjam-chromium-darwin.png
new file mode 100644
index 0000000..7cbd274
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-with-icon-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-with-icon-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-with-icon-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..2a7e6a4
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-with-icon-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-with-icon-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-with-icon-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..2a7e6a4
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-with-icon-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-with-icon-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-with-icon-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..7cbd274
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-with-icon-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-with-label-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-with-label-figjam-chromium-darwin.png
new file mode 100644
index 0000000..3c23e60
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-with-label-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-with-label-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-with-label-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..71a81eb
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-with-label-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-with-label-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-with-label-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..71a81eb
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-with-label-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-with-label-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-with-label-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..3c23e60
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-value-field-with-label-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-cell-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-cell-figjam-chromium-darwin.png
new file mode 100644
index 0000000..56c9cc3
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-cell-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-cell-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-cell-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..0f72fa0
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-cell-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-cell-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-cell-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..0f72fa0
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-cell-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-cell-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-cell-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..56c9cc3
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-cell-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-default-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-default-figjam-chromium-darwin.png
new file mode 100644
index 0000000..bdd04f4
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-default-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-default-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-default-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..8d69bd6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-default-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-default-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-default-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..8d69bd6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-default-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-default-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-default-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..bdd04f4
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-default-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-in-focused-field-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-in-focused-field-figjam-chromium-darwin.png
new file mode 100644
index 0000000..29260eb
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-in-focused-field-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-in-focused-field-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-in-focused-field-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..07f742b
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-in-focused-field-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-in-focused-field-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-in-focused-field-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..c1e2745
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-in-focused-field-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-in-focused-field-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-in-focused-field-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..968d125
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-in-focused-field-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-states-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-states-figjam-chromium-darwin.png
new file mode 100644
index 0000000..35b0750
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-states-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-states-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-states-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..80a6c89
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-states-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-states-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-states-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..26c4b02
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-states-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-states-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-states-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..77b9dd6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-variable-chip-states-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-danger-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-danger-figjam-chromium-darwin.png
new file mode 100644
index 0000000..dc3f9c3
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-danger-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-danger-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-danger-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..20203b6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-danger-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-danger-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-danger-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..20203b6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-danger-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-danger-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-danger-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..dc3f9c3
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-danger-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-default-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-default-figjam-chromium-darwin.png
new file mode 100644
index 0000000..d469bc3
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-default-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-default-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-default-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..bc35f20
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-default-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-default-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-default-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..bc35f20
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-default-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-default-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-default-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..d469bc3
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-default-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-explicit-dismiss-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-explicit-dismiss-figjam-chromium-darwin.png
new file mode 100644
index 0000000..076cd82
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-explicit-dismiss-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-explicit-dismiss-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-explicit-dismiss-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..50762d4
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-explicit-dismiss-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-explicit-dismiss-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-explicit-dismiss-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..50762d4
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-explicit-dismiss-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-explicit-dismiss-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-explicit-dismiss-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..076cd82
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-explicit-dismiss-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-message-only-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-message-only-figjam-chromium-darwin.png
new file mode 100644
index 0000000..0b177c6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-message-only-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-message-only-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-message-only-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..6dc94dc
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-message-only-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-message-only-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-message-only-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..6dc94dc
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-message-only-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-message-only-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-message-only-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..0b177c6
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-message-only-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-spotlight-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-spotlight-figjam-chromium-darwin.png
new file mode 100644
index 0000000..f2d51d2
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-spotlight-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-spotlight-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-spotlight-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..78e5282
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-spotlight-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-spotlight-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-spotlight-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..08fa06a
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-spotlight-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-spotlight-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-spotlight-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..7730de8
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/components-visual-bell-spotlight-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/icons-set-default-figjam-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/icons-set-default-figjam-chromium-darwin.png
new file mode 100644
index 0000000..b25208c
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/icons-set-default-figjam-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/icons-set-default-figjam-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/icons-set-default-figjam-dark-chromium-darwin.png
new file mode 100644
index 0000000..d95349f
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/icons-set-default-figjam-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/icons-set-default-figma-dark-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/icons-set-default-figma-dark-chromium-darwin.png
new file mode 100644
index 0000000..d95349f
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/icons-set-default-figma-dark-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/icons-set-default-figma-light-chromium-darwin.png b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/icons-set-default-figma-light-chromium-darwin.png
new file mode 100644
index 0000000..b25208c
Binary files /dev/null and b/packages/react/tests/visual/__screenshots__/stories.vrt.test.tsx/icons-set-default-figma-light-chromium-darwin.png differ
diff --git a/packages/react/tests/visual/overlays.vrt.test.tsx b/packages/react/tests/visual/overlays.vrt.test.tsx
new file mode 100644
index 0000000..794259f
--- /dev/null
+++ b/packages/react/tests/visual/overlays.vrt.test.tsx
@@ -0,0 +1,129 @@
+import { composeStory } from '@storybook/react-vite';
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { page, userEvent } from 'vitest/browser';
+
+import * as alertDialogStories from '../../src/components/alert-dialog/alert-dialog.stories';
+import * as dialogStories from '../../src/components/dialog/dialog.stories';
+import * as dropdownMenuStories from '../../src/components/dropdown-menu/dropdown-menu.stories';
+import * as popoverStories from '../../src/components/popover/popover.stories';
+import * as selectStories from '../../src/components/select/select.stories';
+import * as sheetStories from '../../src/components/sheet/sheet.stories';
+import * as tooltipStories from '../../src/components/tooltip/tooltip.stories';
+
+const themes = {
+  'figma-light': ['figma-light'],
+  'figma-dark': ['figma-dark'],
+  figjam: ['figjam'],
+  'figjam-dark': ['figjam', 'figma-dark'],
+} as const;
+
+const allThemeClasses = Object.values(themes).flat();
+
+type StoriesModule = { default: unknown } & Record<string, unknown>;
+type StoryComponent = ReturnType<typeof composeStory>;
+
+// the overlay stories drive their `open` prop through useArgs, so forced-open
+// args render the open state statically — no interaction needed
+function openOverlay(
+  module: StoriesModule,
+  exportName = 'Default',
+  args: Record<string, unknown> = {},
+) {
+  const story = module[exportName] as { args?: Record<string, unknown> };
+  return composeStory(
+    { ...story, args: { ...story.args, ...args } } as never,
+    module.default as never,
+  );
+}
+
+const overlays: Record<string, { story: StoryComponent; open: () => Promise<void> }> = {
+  dialog: {
+    story: openOverlay(dialogStories, 'Default', { open: true }),
+    open: async () => {
+      await expect.element(page.getByRole('dialog')).toBeVisible();
+    },
+  },
+  'alert-dialog': {
+    story: openOverlay(alertDialogStories, 'Default', { open: true }),
+    open: async () => {
+      await expect.element(page.getByRole('alertdialog')).toBeVisible();
+    },
+  },
+  sheet: {
+    story: openOverlay(sheetStories, 'Default', { open: true }),
+    open: async () => {
+      await expect.element(page.getByRole('dialog')).toBeVisible();
+    },
+  },
+  popover: {
+    story: openOverlay(popoverStories, 'Default', { open: true }),
+    open: async () => {
+      await expect.element(page.getByText('Dimensions')).toBeVisible();
+    },
+  },
+  'dropdown-menu': {
+    story: openOverlay(dropdownMenuStories, 'Default', { open: true }),
+    open: async () => {
+      await expect.element(page.getByRole('menu')).toBeVisible();
+    },
+  },
+  'dropdown-menu-submenu': {
+    story: openOverlay(dropdownMenuStories, 'Default', { open: true }),
+    open: async () => {
+      await expect.element(page.getByRole('menu')).toBeVisible();
+      await userEvent.hover(page.getByRole('menuitem', { name: 'More Tools' }));
+      await expect.element(page.getByRole('menuitem', { name: /Save Page As/ })).toBeVisible();
+    },
+  },
+  select: {
+    story: openOverlay(selectStories),
+    open: async () => {
+      await userEvent.click(page.getByRole('combobox'));
+      await expect.element(page.getByRole('listbox')).toBeVisible();
+    },
+  },
+  tooltip: {
+    story: openOverlay(tooltipStories, 'Default', { open: true }),
+    open: async () => {
+      await expect.element(page.getByText('Open settings')).toBeVisible();
+      // Base UI: wait until the popup's open state and position have settled
+      // (data-open present, no data-starting-style, rect stable across frames).
+      await expect
+        .poll(async () => {
+          const popup = document.querySelector('[data-base-ui-focusable]') as HTMLElement | null;
+          if (!popup || !popup.hasAttribute('data-open')) {
+            return false;
+          }
+          if (document.querySelector('[data-starting-style],[data-ending-style]')) {
+            return false;
+          }
+          const r1 = popup.getBoundingClientRect();
+          await new Promise((resolve) =>
+            requestAnimationFrame(() => requestAnimationFrame(resolve)),
+          );
+          const r2 = popup.getBoundingClientRect();
+          return r1.x === r2.x && r1.y === r2.y;
+        })
+        .toBe(true);
+    },
+  },
+};
+
+for (const [name, { story: Story, open }] of Object.entries(overlays)) {
+  describe(String(name), () => {
+    for (const [theme, classes] of Object.entries(themes)) {
+      it(String(theme), async () => {
+        await render(<Story />);
+        document.documentElement.classList.remove(...allThemeClasses);
+        document.documentElement.classList.add(...classes);
+        await open();
+        await document.fonts.ready;
+        await expect(page).toMatchScreenshot(`${name}-open-${theme}`, {
+          comparatorName: 'pixelmatch',
+          comparatorOptions: { allowedMismatchedPixels: 0, threshold: 0 },
+        });
+      });
+    }
+  });
+}
diff --git a/packages/react/tests/visual/probe.test.tsx b/packages/react/tests/visual/probe.test.tsx
new file mode 100644
index 0000000..2a471f2
--- /dev/null
+++ b/packages/react/tests/visual/probe.test.tsx
@@ -0,0 +1,76 @@
+import { describe, expect, it } from 'vitest';
+
+import { allThemeClasses, renderStory, stories, themes } from './stories';
+
+// Dump computed styles for a story instead of comparing screenshots.
+// Usage: VRT_PROBE="Components-Button-Default" pnpm -F @thinkbuff/figma-react probe
+const filter = (import.meta.env.VRT_PROBE ?? '').toLowerCase();
+const matched = stories.filter((story) => story.id.toLowerCase().includes(filter));
+
+const cssProps = [
+  'display',
+  'position',
+  'width',
+  'height',
+  'padding',
+  'margin',
+  'font-size',
+  'line-height',
+  'font-weight',
+  'letter-spacing',
+  'color',
+  'background-color',
+  'border',
+  'border-radius',
+  'outline',
+  'box-shadow',
+  'fill',
+  'stroke',
+] as const;
+
+function dump(el: Element, depth: number, lines: string[]) {
+  const style = getComputedStyle(el);
+  const rect = el.getBoundingClientRect();
+  const className = (el.getAttribute('class') ?? '').trim().replaceAll(/\s+/g, ' .');
+  const scroll = `scroll:${el.scrollLeft.toFixed(1)},${el.scrollTop.toFixed(1)} left:${rect.left.toFixed(1)}`;
+  lines.push(
+    `${'  '.repeat(depth)}<${el.tagName.toLowerCase()}> .${className} ${rect.width.toFixed(1)}x${rect.height.toFixed(1)} ${scroll}`,
+  );
+  const props = cssProps.map((prop) => `${prop}:${style.getPropertyValue(prop)}`).join(' ');
+  lines.push(`${'  '.repeat(depth + 1)}${props}`);
+  for (const child of el.children) {
+    dump(child, depth + 1, lines);
+  }
+}
+
+for (const story of matched) {
+  describe(story.id, () => {
+    for (const [theme, classes] of Object.entries(themes)) {
+      it(theme, async () => {
+        const { container } = await renderStory(story);
+        document.documentElement.classList.remove(...allThemeClasses);
+        document.documentElement.classList.add(...classes);
+        await document.fonts.ready;
+        const lines: string[] = [];
+        const activeEl = document.activeElement;
+        if (activeEl && activeEl !== document.body) {
+          lines.push(
+            `activeElement: <${activeEl.tagName.toLowerCase()}> .${(activeEl.getAttribute('class') ?? '').trim()}`,
+          );
+        }
+        for (const child of container.children) {
+          dump(child, 0, lines);
+        }
+        expect(lines.length).toBeGreaterThan(0);
+        console.log(`[${story.id} | ${theme}]\n${lines.join('\n')}\n`);
+      });
+    }
+  });
+}
+
+it.runIf(matched.length === 0)('probe usage', () => {
+  expect.unreachable(
+    `No stories matched VRT_PROBE="${filter}" (${stories.length} stories collected).\n` +
+      'usage: VRT_PROBE="<story id substring>" pnpm -F @thinkbuff/figma-react probe',
+  );
+});
diff --git a/packages/react/tests/visual/stories.tsx b/packages/react/tests/visual/stories.tsx
new file mode 100644
index 0000000..e75f809
--- /dev/null
+++ b/packages/react/tests/visual/stories.tsx
@@ -0,0 +1,69 @@
+import { composeStories } from '@storybook/react-vite';
+import type { Meta } from '@storybook/react-vite';
+import type { ComponentType } from 'react';
+import { render } from 'vitest-browser-react';
+
+const modules = import.meta.glob('../../src/**/*.stories.tsx', { eager: true });
+
+export const themes = {
+  'figma-light': ['figma-light'],
+  'figma-dark': ['figma-dark'],
+  figjam: ['figjam'],
+  'figjam-dark': ['figjam', 'figma-dark'],
+} as const;
+
+export const allThemeClasses = Object.values(themes).flat();
+
+export type StoryEntry = {
+  component: ComponentType;
+  id: string;
+  layout: string;
+};
+
+function kebab(value: string) {
+  return value
+    .replaceAll(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replaceAll(/[^a-zA-Z0-9]+/g, '-')
+    .replaceAll(/^-+|-+$/g, '')
+    .toLowerCase();
+}
+
+export const stories: StoryEntry[] = [];
+for (const mod of Object.values(modules)) {
+  const module = mod as { default: Meta };
+  const composed = composeStories(module);
+  for (const [exportName, component] of Object.entries(composed)) {
+    const layout =
+      (component as unknown as { parameters?: Record<string, unknown> }).parameters?.layout ??
+      module.default.parameters?.layout ??
+      'default';
+    stories.push({
+      component: component as ComponentType,
+      id: kebab(`${module.default.title}-${exportName}`),
+      layout,
+    });
+  }
+}
+
+// honor the storybook `layout: 'centered'` parameter, which the composed
+// story does not apply on its own
+export function renderStory(story: StoryEntry) {
+  const element = <story.component />;
+  return render(
+    story.layout === 'centered' ? (
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '100vw',
+          height: '100vh',
+        }}
+      >
+        {element}
+      </div>
+    ) : (
+      element
+    ),
+  );
+}
diff --git a/packages/react/tests/visual/stories.vrt.test.tsx b/packages/react/tests/visual/stories.vrt.test.tsx
new file mode 100644
index 0000000..08116ce
--- /dev/null
+++ b/packages/react/tests/visual/stories.vrt.test.tsx
@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest';
+import { page } from 'vitest/browser';
+
+import { allThemeClasses, renderStory, stories, themes } from './stories';
+
+async function shot(name: string) {
+  await document.fonts.ready;
+  await expect(page).toMatchScreenshot(name, {
+    comparatorName: 'pixelmatch',
+    comparatorOptions: { allowedMismatchedPixels: 0, threshold: 0 },
+  });
+}
+
+for (const story of stories) {
+  describe(String(story.id), () => {
+    for (const [theme, classes] of Object.entries(themes)) {
+      it(String(theme), async () => {
+        expect.hasAssertions();
+        await renderStory(story);
+        // the preview decorator already applied globals.theme; pin the
+        // requested theme on <html> after render so it always wins
+        document.documentElement.classList.remove(...allThemeClasses);
+        document.documentElement.classList.add(...classes);
+        await shot(`${story.id}-${theme}`);
+      });
+    }
+  });
+}
diff --git a/packages/react/tests/visual/vrt.setup.ts b/packages/react/tests/visual/vrt.setup.ts
new file mode 100644
index 0000000..99d5a6f
--- /dev/null
+++ b/packages/react/tests/visual/vrt.setup.ts
@@ -0,0 +1,16 @@
+import '../test-utils/styles.css';
+import { setProjectAnnotations } from '@storybook/react-vite';
+
+import preview from '../../.storybook/preview';
+
+setProjectAnnotations(preview);
+
+// toMatchScreenshot has no `animations` option — freeze them globally so
+// entrance/exit animations never produce one-pixel diffs.
+const style = document.createElement('style');
+style.textContent = `*, *::before, *::after {
+  animation: none !important;
+  transition: none !important;
+  caret-color: transparent !important;
+}`;
+document.head.append(style);
diff --git a/packages/react/tests/vite-env.d.ts b/packages/react/tests/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/packages/react/tests/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index da85ec5..e10d36d 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ES2022",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
     "moduleResolution": "bundler",
@@ -20,6 +20,6 @@
       "~/*": ["./src/*"]
     }
   },
-  "include": ["src"],
+  "include": ["src", "tests", ".storybook"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/packages/react/tsconfig.node.json b/packages/react/tsconfig.node.json
index 604415c..97ede7e 100644
--- a/packages/react/tsconfig.node.json
+++ b/packages/react/tsconfig.node.json
@@ -7,5 +7,5 @@
     "allowSyntheticDefaultImports": true,
     "strict": true
   },
-  "include": ["vite.config.ts", "unocss.config.ts"]
+  "include": ["vite.config.ts"]
 }
diff --git a/packages/react/unocss.config.ts b/packages/react/unocss.config.ts
deleted file mode 100644
index 57baec5..0000000
--- a/packages/react/unocss.config.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { defineConfig, presetWind3, presetIcons, transformerVariantGroup } from 'unocss';
-import presetRemToPx from '@unocss/preset-rem-to-px';
-import presetAnimations from 'unocss-preset-animations';
-import { presetFigmaTheme } from '@thinkbuff/figma-theme/unocss';
-
-export default defineConfig({
-  presets: [
-    presetWind3({
-      dark: {
-        light: '.figma-light',
-        dark: '.figma-dark',
-      },
-    }),
-    presetFigmaTheme(),
-    presetAnimations(),
-    presetRemToPx(),
-    presetIcons({
-      cdn: 'https://esm.sh/',
-    }),
-  ],
-  transformers: [transformerVariantGroup()],
-});
diff --git a/packages/react/vite.config.ts b/packages/react/vite.config.ts
index 2dad1ae..588489c 100644
--- a/packages/react/vite.config.ts
+++ b/packages/react/vite.config.ts
@@ -1,64 +1,133 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import unocss from 'unocss/vite';
-import dts from 'vite-plugin-dts';
+import fs from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
+
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite-plus';
+
+import tailwindcss from '@tailwindcss/vite';
+import { playwright } from '@vitest/browser-playwright';
 import { glob } from 'glob';
 
 import { dependencies } from './package.json';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-const entries = glob
-  .sync('src/**/*.{ts,tsx}', {
-    ignore: ['src/**/*.stories.{ts,tsx}'],
-  })
-  .map(file => ([
-    path.relative(
-      'src',
-      file.slice(0, file.length - path.extname(file).length),
-    ),
-    path.resolve(__dirname, file),
-  ]));
+const vitePlugins = [react(), tailwindcss()];
 
-/**
- * @see https://vitejs.dev/config/
- */
-export default defineConfig({
-  plugins: [
-    react(),
-    unocss(),
-    dts({
-      include: ['src/**/*.{ts,tsx}'],
-      exclude: ['src/**/*.stories.{ts,tsx}'],
-    }),
+const viteResolve = {
+  alias: {
+    '~': path.resolve(__dirname, 'src'),
+  },
+};
+
+// Every exported @base-ui/react subpath must be pre-optimized: the bare
+// package name in `dependencies` does not cover deep imports, and a
+// partially-optimized dep graph leaves stale Radix chunks in the browser
+// test cache after a dependency swap (phantom VRT diffs).
+const baseUiSubpaths = Object.keys(
+  JSON.parse(
+    fs.readFileSync(path.resolve(__dirname, 'node_modules/@base-ui/react/package.json'), 'utf8'),
+  ).exports as Record<string, unknown>,
+)
+  .filter((key) => key !== '.' && !key.includes('*') && key !== './package.json')
+  .map((key) => `@base-ui/react/${key.slice(2)}`);
+
+// BrowserProviderOption<T> is invariant over T and vite-plus resolves a
+// different vitest instance than the browser-playwright import, so the
+// provider option needs an opaque cast either way.
+function browserProvider() {
+  return playwright() as never;
+}
+
+const optimizeDeps = {
+  include: [
+    'react',
+    'react/jsx-runtime',
+    'react/jsx-dev-runtime',
+    'react-dom',
+    'react-dom/client',
+    'vitest-browser-react',
+    ...baseUiSubpaths,
+    ...Object.keys(dependencies),
   ],
-  resolve: {
-    alias: {
-      '~': path.resolve(__dirname, 'src'),
-    },
+};
+
+const entries = Object.fromEntries(
+  glob
+    .sync('src/**/*.{ts,tsx}', {
+      ignore: ['src/**/*.stories.*'],
+    })
+    .map((file) => [
+      path.relative('src', file.slice(0, file.length - path.extname(file).length)),
+      path.resolve(__dirname, file),
+    ]),
+);
+
+export default defineConfig({
+  plugins: vitePlugins,
+  resolve: viteResolve,
+  optimizeDeps,
+  test: {
+    projects: [
+      {
+        test: {
+          name: 'unit',
+          environment: 'node',
+          include: ['tests/**/*.test.ts'],
+        },
+      },
+      {
+        test: {
+          name: 'browser',
+          include: ['tests/**/*.test.tsx', '!tests/visual/**'],
+          setupFiles: ['./tests/test-utils/setup.ts'],
+          browser: {
+            enabled: true,
+            provider: browserProvider(),
+            headless: true,
+            instances: [{ browser: 'chromium' }],
+          },
+        },
+      },
+      {
+        test: {
+          name: 'vrt',
+          include: ['tests/**/*.vrt.test.tsx'],
+          setupFiles: ['./tests/visual/vrt.setup.ts'],
+          browser: {
+            enabled: true,
+            provider: browserProvider(),
+            headless: true,
+            viewport: { width: 800, height: 600 },
+            instances: [{ browser: 'chromium' }],
+          },
+        },
+      },
+      {
+        define: {
+          'import.meta.env.VRT_PROBE': JSON.stringify(process.env.VRT_PROBE ?? ''),
+        },
+        test: {
+          name: 'probe',
+          include: ['tests/visual/probe.test.tsx'],
+          setupFiles: ['./tests/visual/vrt.setup.ts'],
+          browser: {
+            enabled: true,
+            provider: browserProvider(),
+            headless: true,
+            viewport: { width: 800, height: 600 },
+            instances: [{ browser: 'chromium' }],
+          },
+        },
+      },
+    ],
   },
-  build: {
-    copyPublicDir: false,
+  pack: {
+    entry: entries,
+    format: ['esm'],
+    dts: true,
+    unbundle: true,
     target: 'esnext',
-    minify: false,
-    lib: {
-      entry: Object.fromEntries(entries),
-      formats: ['es'],
-    },
-    rollupOptions: {
-      external: [
-        'react',
-        'react/jsx-runtime',
-        'react-dom',
-        './components',
-        ...Object.keys(dependencies),
-      ],
-      output: {
-        preserveModules: true,
-        entryFileNames: '[name].mjs',
-      },
-    },
   },
 });
diff --git a/packages/theme/LICENSE b/packages/theme/LICENSE
new file mode 100644
index 0000000..e2c2f0f
--- /dev/null
+++ b/packages/theme/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-PRESENT Thinkbuff
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/theme/build.config.ts b/packages/theme/build.config.ts
deleted file mode 100644
index ea95f2a..0000000
--- a/packages/theme/build.config.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { defineBuildConfig } from 'unbuild';
-
-export default defineBuildConfig({
-  entries: [
-    'src/index',
-    'src/constants',
-    'src/colors/index',
-    'src/unocss/index',
-  ],
-  clean: true,
-  declaration: true,
-  externals: ['unocss', '@unocss/core'],
-  failOnWarn: false,
-});
diff --git a/packages/theme/eslint.config.mjs b/packages/theme/eslint.config.mjs
deleted file mode 100644
index 86a33ce..0000000
--- a/packages/theme/eslint.config.mjs
+++ /dev/null
@@ -1,5 +0,0 @@
-import { defineFlatConfigAsync } from '@thinkbuff/eslint-config';
-
-export default defineFlatConfigAsync({
-  unocss: true,
-});
diff --git a/packages/theme/package.json b/packages/theme/package.json
index 0c75b14..4fdb37b 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -1,76 +1,74 @@
 {
   "name": "@thinkbuff/figma-theme",
-  "author": "Eleven <eteplus@outlook.com>",
-  "license": "MIT",
-  "type": "module",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "description": "Figma theme",
-  "scripts": {
-    "clean": "rm -rf dist node_modules",
-    "build": "unbuild --minify && pnpm generate:css",
-    "stub": "unbuild --stub && pnpm generate:css",
-    "generate:css": "tsx scripts/generate-css-files.ts",
-    "lint": "eslint .",
-    "typecheck": "tsc --noEmit",
-    "release": "changelogen --bump --no-output",
-    "prepublishOnly": "pnpm build"
-  },
+  "keywords": [
+    "figma",
+    "figma-theme",
+    "tailwindcss",
+    "tailwindcss-figma-theme",
+    "tailwindcss-theme"
+  ],
   "homepage": "https://github.com/thinkbuff/figma/tree/main/packages/react#readme",
+  "bugs": {
+    "url": "https://github.com/thinkbuff/figma/issues"
+  },
+  "license": "MIT",
+  "author": "Eleven <eteplus@outlook.com>",
   "repository": {
     "type": "git",
     "url": "https://github.com/thinkbuff/figma",
     "directory": "packages/theme"
   },
-  "bugs": {
-    "url": "https://github.com/thinkbuff/figma/issues"
-  },
-  "keywords": [
-    "figma",
-    "figma-theme",
-    "unocss",
-    "unocss-preset",
-    "unocss-preset-figma-theme"
+  "files": [
+    "*.css",
+    "dist",
+    "LICENSE"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
+  "type": "module",
   "sideEffects": false,
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/index.d.mts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./*"
+      ]
+    }
+  },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs"
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
     },
     "./colors": {
-      "types": "./dist/colors/index.d.ts",
-      "import": "./dist/colors/index.mjs"
-    },
-    "./unocss": {
-      "types": "./dist/unocss/index.d.ts",
-      "import": "./dist/unocss/index.mjs"
+      "types": "./dist/colors/index.d.mts",
+      "import": "./dist/colors/index.mjs",
+      "default": "./dist/colors/index.mjs"
     },
     "./css/*": "./dist/css/*",
     "./*": "./*"
   },
-  "typesVersions": {
-    "*": {
-      "*": [
-        "./dist/*",
-        "./*"
-      ]
-    }
+  "publishConfig": {
+    "access": "public"
   },
-  "files": [
-    "*.css",
-    "dist"
-  ],
-  "devDependencies": {
-    "unbuild": "^3.5.0",
-    "unocss": "^66.1.2"
+  "scripts": {
+    "clean": "rm -rf dist node_modules",
+    "build": "pnpm generate:css && vp pack && cp -r src/css dist/css",
+    "generate:css": "tsx src/theme/generate-css-files.ts",
+    "typecheck": "tsc --noEmit",
+    "release": "changelogen --bump --no-output",
+    "prepublishOnly": "pnpm build",
+    "test": "vitest run",
+    "tokens:import": "tsx scripts/tokens-import.ts"
   },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx}": "eslint --fix"
+  "devDependencies": {
+    "tsx": "catalog:cli",
+    "typescript": "catalog:toolchain",
+    "vite-plus": "catalog:toolchain",
+    "vitest": "catalog:test"
   }
 }
diff --git a/packages/theme/scripts/generate-css-files.ts b/packages/theme/scripts/generate-css-files.ts
deleted file mode 100644
index 8219c3e..0000000
--- a/packages/theme/scripts/generate-css-files.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import fs from 'node:fs/promises';
-import path from 'node:path';
-import { existsSync } from 'node:fs';
-import { fileURLToPath } from 'node:url';
-
-import { generateCSSVariables } from '../src/colors';
-import { THEME_BASE_CSS } from '../src/constants';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const output = path.resolve(__dirname, '../dist/css');
-const styles = ['figma', 'figjam'] as const;
-
-if (!existsSync(output)) {
-  await fs.mkdir(output, { recursive: true });
-}
-
-for (const file of styles) {
-  await fs.writeFile(`${output}/${file}.css`, `${generateCSSVariables(file)}\n${THEME_BASE_CSS}`);
-}
diff --git a/packages/theme/scripts/tokens-import.ts b/packages/theme/scripts/tokens-import.ts
new file mode 100644
index 0000000..9a2dd0c
--- /dev/null
+++ b/packages/theme/scripts/tokens-import.ts
@@ -0,0 +1,370 @@
+/**
+ * Normalize a Figma DTCG "Export modes" dump into the committed token JSON.
+ *
+ * Usage: pnpm tokens:import <dir>
+ * Recursively reads every `*.tokens.json` in <dir> and writes
+ * packages/theme/tokens/{colors/*.json, sizing.json, typography.json}.
+ */
+import { readdir, readFile, mkdir, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const TOKENS_DIR = path.resolve(__dirname, '../tokens');
+
+const COLOR_MODE_FILES: Record<string, string> = {
+  Light: 'colors/figma-light.json',
+  Dark: 'colors/figma-dark.json',
+  'FigJam-Light': 'colors/figjam-light.json',
+  'FigJam-Dark': 'colors/figjam-dark.json',
+  'DevMode-Light': 'colors/devmode-light.json',
+  'DevMode-Dark': 'colors/devmode-dark.json',
+  'Slides-Light': 'colors/slides-light.json',
+  'Slides-Dark': 'colors/slides-dark.json',
+};
+
+type DtcgNode = { [key: string]: unknown };
+type DtcgLeaf = {
+  $type?: string;
+  $value?: unknown;
+  $description?: string;
+  $extensions?: { 'com.figma.codeSyntax'?: { WEB?: string } };
+};
+
+function isLeaf(node: unknown): node is DtcgLeaf {
+  return typeof node === 'object' && node !== null && '$value' in node;
+}
+
+// $-prefixed keys are metadata EXCEPT `$root`, which Figma emits as a real
+// nested token name (e.g. {✦.icon.toolbar.selected.$root}).
+function isTokenKey(key: string) {
+  return !key.startsWith('$') || key === '$root';
+}
+
+function children(node: DtcgNode): [string, DtcgNode][] {
+  return Object.entries(node).filter(
+    ([key, value]) => isTokenKey(key) && typeof value === 'object' && value !== null,
+  ) as [string, DtcgNode][];
+}
+
+/**
+ * Longest-key match walk: segment names may themselves contain dots.
+ */
+function resolvePath(root: DtcgNode, dotPath: string): DtcgNode | DtcgLeaf | undefined {
+  const segments = dotPath.split('.');
+  let node: DtcgNode = root;
+  let index = 0;
+  while (index < segments.length) {
+    let matched = false;
+    for (let length = segments.length - index; length > 0; length--) {
+      const key = segments.slice(index, index + length).join('.');
+      const next = node[key];
+      if (typeof next === 'object' && next !== null && isTokenKey(key)) {
+        node = next as DtcgNode;
+        index += length;
+        matched = true;
+        break;
+      }
+    }
+    if (!matched) {
+      return undefined;
+    }
+  }
+  return node;
+}
+
+function resolveValue(root: DtcgNode, value: unknown, seen = new Set<string>()): unknown {
+  if (typeof value === 'string' && value.startsWith('{') && value.endsWith('}')) {
+    const ref = value.slice(1, -1);
+    if (seen.has(ref)) {
+      throw new Error(`Circular alias: ${ref}`);
+    }
+    seen.add(ref);
+    const target = resolvePath(root, ref);
+    if (!target || !isLeaf(target)) {
+      throw new Error(`Unresolved alias: {${ref}} (from ${JSON.stringify(seen)})`);
+    }
+    return resolveValue(root, target.$value, seen);
+  }
+  return value;
+}
+
+function componentToHex(component: number) {
+  return Math.round(component * 255)
+    .toString(16)
+    .padStart(2, '0');
+}
+
+function normalizeColor(value: unknown, context: string): string {
+  if (typeof value === 'string') {
+    const hex = value.trim().toLowerCase();
+    const match = /^#([0-9a-f]{3,8})$/.exec(hex);
+    if (match) {
+      let digits = match[1];
+      if (digits.length === 3 || digits.length === 4) {
+        digits = digits
+          .split('')
+          .map((digit) => digit + digit)
+          .join('');
+      }
+      if (digits.length === 8 && digits.endsWith('ff')) {
+        digits = digits.slice(0, 6);
+      }
+      if (digits.length === 6 || digits.length === 8) {
+        return `#${digits}`;
+      }
+    }
+    const rgb = /^rgba?\(([^)]+)\)$/.exec(hex);
+    if (rgb) {
+      const [r, g, b, a] = rgb[1].split(',').map((part) => parseFloat(part));
+      const alpha = Number.isNaN(a) ? 1 : a;
+      const hex6 = `#${componentToHex(r / 255)}${componentToHex(g / 255)}${componentToHex(b / 255)}`;
+      return alpha >= 1 ? hex6 : `${hex6}${componentToHex(alpha)}`;
+    }
+    throw new Error(`Unsupported color string "${value}" at ${context}`);
+  }
+  if (typeof value === 'object' && value !== null) {
+    const object = value as Record<string, unknown>;
+    if (Array.isArray(object.components)) {
+      const [r, g, b] = object.components as number[];
+      const alpha = typeof object.alpha === 'number' ? object.alpha : 1;
+      const hex6 = `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
+      return alpha >= 1 ? hex6 : `${hex6}${componentToHex(alpha)}`;
+    }
+    if (typeof object.hex === 'string') {
+      return normalizeColor(object.hex, context);
+    }
+  }
+  throw new Error(`Unsupported color value at ${context}: ${JSON.stringify(value)}`);
+}
+
+function isExcludedColorPath(joinedPath: string) {
+  return (
+    joinedPath.startsWith('✦/fullscreen/') ||
+    /desktop/i.test(joinedPath) ||
+    joinedPath.startsWith('✦/special/code') ||
+    (joinedPath.startsWith('✦/special/') && joinedPath.includes('inspect'))
+  );
+}
+
+type ColorEntry = { value: string; description?: string };
+
+function importColorFile(root: DtcgNode) {
+  const published: Record<string, ColorEntry> = {};
+
+  function walk(node: DtcgNode, segments: string[]) {
+    for (const [key, child] of children(node)) {
+      const path = [...segments, key];
+      if (isLeaf(child)) {
+        const joined = path.join('/');
+        if (isExcludedColorPath(joined)) {
+          continue;
+        }
+        const web = child.$extensions?.['com.figma.codeSyntax']?.WEB ?? '';
+        const match = /^var\(--color-([a-zA-Z0-9-]+)\)$/.exec(web);
+        if (!match) {
+          continue; // primitives (var(--ramp-*)) and unbound tokens: alias resolution only
+        }
+        const name = match[1];
+        const value = normalizeColor(resolveValue(root, child.$value), joined);
+        const description =
+          typeof child.$description === 'string' && child.$description.trim()
+            ? child.$description
+            : undefined;
+        const existing = published[name];
+        if (existing) {
+          if (existing.value !== value) {
+            throw new Error(
+              `Conflicting values for --color-${name}: ${existing.value} vs ${value} (${joined})`,
+            );
+          }
+          if (!existing.description && description) {
+            existing.description = description;
+          }
+        } else {
+          published[name] = description ? { value, description } : { value };
+        }
+      } else {
+        walk(child, path);
+      }
+    }
+  }
+
+  walk(root, []);
+  return Object.fromEntries(Object.entries(published).sort(([a], [b]) => a.localeCompare(b)));
+}
+
+function numberValue(root: DtcgNode, value: unknown, context: string): number {
+  const resolved = resolveValue(root, value);
+  if (typeof resolved === 'number') {
+    return resolved;
+  }
+  if (typeof resolved === 'object' && resolved !== null) {
+    const object = resolved as { value?: unknown };
+    if (typeof object.value === 'number') {
+      return object.value;
+    }
+  }
+  throw new Error(`Expected a number at ${context}, got ${JSON.stringify(resolved)}`);
+}
+
+function importSizingFile(root: DtcgNode) {
+  const space: Record<string, number> = {};
+  const radius: Record<string, number> = {};
+  const radiusNames: Record<string, string> = {
+    'radius-none': 'none',
+    'radius-small': 'small',
+    'radius-medium': 'medium',
+    'radius-large': 'large',
+    'radius-full': 'full',
+  };
+
+  function walk(node: DtcgNode, segments: string[]) {
+    for (const [key, child] of children(node)) {
+      const path = [...segments, key];
+      if (isLeaf(child)) {
+        if (/^spacer-\d+$/.test(key)) {
+          space[key.replace('spacer-', '')] = numberValue(root, child.$value, path.join('/'));
+        } else if (radiusNames[key]) {
+          radius[radiusNames[key]] = numberValue(root, child.$value, path.join('/'));
+        }
+      } else {
+        walk(child, path);
+      }
+    }
+  }
+
+  walk(root, []);
+  return { space, radius };
+}
+
+const TYPOGRAPHY_GROUPS = ['body', 'heading'] as const;
+
+function importTypographyFile(root: DtcgNode) {
+  const family: Record<string, string> = {};
+  const weight: Record<string, number> = {};
+  const styles: Record<
+    string,
+    { fontSize: number; lineHeight: number; letterSpacing: number; fontWeight: number }
+  > = {};
+
+  const font = root.font as DtcgNode | undefined;
+  for (const [key, child] of children((font?.family ?? {}) as DtcgNode)) {
+    const resolved = resolveValue(root, isLeaf(child) ? child.$value : undefined);
+    if (typeof resolved === 'string') {
+      family[key] = resolved;
+    }
+  }
+  for (const [key, child] of children((font?.weight ?? {}) as DtcgNode)) {
+    if (isLeaf(child)) {
+      weight[key] = numberValue(root, child.$value, `font/weight/${key}`);
+    }
+  }
+
+  function collectStyle(node: DtcgNode, styleKey: string) {
+    function read(property: string) {
+      const leaf = node[property];
+      if (!isLeaf(leaf)) {
+        throw new Error(`Style ${styleKey} is missing ${property}`);
+      }
+      return leaf.$value;
+    }
+    const fontSize = numberValue(root, read('fontSize'), styleKey);
+    const lineHeight = numberValue(root, read('lineHeight'), styleKey);
+    const fontWeight = numberValue(root, read('fontWeight'), styleKey);
+    const letterSpacingRaw = resolveValue(root, read('letterSpacing'));
+    let percent: number;
+    if (typeof letterSpacingRaw === 'number') {
+      percent = letterSpacingRaw;
+    } else if (
+      typeof letterSpacingRaw === 'object' &&
+      letterSpacingRaw !== null &&
+      typeof (letterSpacingRaw as { value?: unknown }).value === 'number'
+    ) {
+      percent = (letterSpacingRaw as { value: number }).value;
+    } else {
+      throw new Error(`Style ${styleKey} has non-numeric letterSpacing`);
+    }
+    styles[styleKey] = {
+      fontSize,
+      lineHeight,
+      letterSpacing: Number((percent / 100).toFixed(5)),
+      fontWeight,
+    };
+  }
+
+  for (const group of TYPOGRAPHY_GROUPS) {
+    const groupNode = root[group] as DtcgNode | undefined;
+    if (!groupNode) {
+      continue;
+    }
+    for (const [size, sizeNode] of children(groupNode)) {
+      collectStyle(sizeNode, `${group}-${size}`);
+      const strong = sizeNode.strong as DtcgNode | undefined;
+      if (strong && !isLeaf(strong)) {
+        collectStyle(strong, `${group}-${size}-strong`);
+      }
+    }
+  }
+
+  return { family, weight, styles };
+}
+
+async function collectExportFiles(directory: string): Promise<string[]> {
+  const entries = await readdir(directory, { withFileTypes: true });
+  const files: string[] = [];
+  for (const entry of entries) {
+    const fullPath = path.join(directory, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...(await collectExportFiles(fullPath)));
+    } else if (entry.name.endsWith('.tokens.json')) {
+      files.push(fullPath);
+    }
+  }
+  return files.sort();
+}
+
+async function writeTokenFile(relativePath: string, data: unknown) {
+  const filePath = path.join(TOKENS_DIR, relativePath);
+  await mkdir(path.dirname(filePath), { recursive: true });
+  await writeFile(filePath, `${JSON.stringify(data, null, 2)}\n`);
+  console.log(`wrote ${relativePath}`);
+}
+
+export { importColorFile, importSizingFile, importTypographyFile };
+
+async function main() {
+  const directory = process.argv[2];
+  if (!directory) {
+    throw new Error('Usage: pnpm tokens:import <dir>');
+  }
+  const files = await collectExportFiles(path.resolve(directory));
+  if (files.length === 0) {
+    throw new Error(`No *.tokens.json files found in ${directory}`);
+  }
+
+  for (const file of files) {
+    const root = JSON.parse(await readFile(file, 'utf8')) as DtcgNode;
+    const extensions = root.$extensions as { 'com.figma.modeName'?: string } | undefined;
+    const mode = extensions?.['com.figma.modeName'];
+    if (!mode) {
+      throw new Error(`${path.basename(file)}: missing $extensions["com.figma.modeName"]`);
+    }
+    if (COLOR_MODE_FILES[mode]) {
+      await writeTokenFile(COLOR_MODE_FILES[mode], importColorFile(root));
+    } else if (mode === 'Default') {
+      await writeTokenFile('sizing.json', importSizingFile(root));
+    } else if (mode === 'Mode 1') {
+      await writeTokenFile('typography.json', importTypographyFile(root));
+    } else {
+      throw new Error(`${path.basename(file)}: unknown mode name "${mode}"`);
+    }
+  }
+}
+
+const invokedAsScript =
+  process.argv[1] && fileURLToPath(import.meta.url) === path.resolve(process.argv[1]);
+
+if (invokedAsScript) {
+  await main();
+}
diff --git a/packages/theme/src/colors/base.ts b/packages/theme/src/colors/base.ts
deleted file mode 100644
index af147f7..0000000
--- a/packages/theme/src/colors/base.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-export const BaseThemeCSSVariables = {
-  '--figma-color-bg-menu': '#1e1e1e',
-  '--figma-color-bg-menu-disabled': '#757575',
-  '--figma-color-bg-menu-hover': '#2c2c2c',
-  '--figma-color-bg-menu-pressed': '#2c2c2c',
-  '--figma-color-bg-menu-secondary': '#383838',
-  '--figma-color-bg-menu-selected': '#0c8ce9',
-  '--figma-color-bg-menu-selected-hover': '#0a6dc2',
-  '--figma-color-bg-menu-selected-pressed': '#0a6dc2',
-  '--figma-color-bg-menu-selected-secondary': '#394360',
-  '--figma-color-bg-menu-selected-tertiary': '#394360',
-  '--figma-color-bg-menu-tertiary': '#444444',
-  '--figma-color-bg-tooltip': '#1e1e1e',
-  '--figma-color-bg-tooltip-disabled': '#757575',
-  '--figma-color-bg-tooltip-hover': '#2c2c2c',
-  '--figma-color-bg-tooltip-pressed': '#2c2c2c',
-  '--figma-color-bg-tooltip-secondary': '#383838',
-  '--figma-color-bg-tooltip-selected': '#0d99ff',
-  '--figma-color-bg-tooltip-selected-hover': '#007be5',
-  '--figma-color-bg-tooltip-selected-pressed': '#007be5',
-  '--figma-color-bg-tooltip-selected-secondary': '#394360',
-  '--figma-color-bg-tooltip-selected-tertiary': '#394360',
-  '--figma-color-bg-tooltip-tertiary': '#444444',
-  '--figma-color-border-menu': '#383838',
-  '--figma-color-border-menu-disabled': '#383838',
-  '--figma-color-border-menu-disabled-strong': '#383838',
-  '--figma-color-border-menu-onselected': '#007be5',
-  '--figma-color-border-menu-onselected-strong': '#ffffff',
-  '--figma-color-border-menu-selected': '#0d99ff',
-  '--figma-color-border-menu-selected-strong': '#80caff',
-  '--figma-color-border-menu-strong': '#ffffff',
-  '--figma-color-border-tooltip': '#383838',
-  '--figma-color-border-tooltip-disabled': '#383838',
-  '--figma-color-border-tooltip-disabled-strong': '#383838',
-  '--figma-color-border-tooltip-onselected': '#007be5',
-  '--figma-color-border-tooltip-onselected-strong': '#ffffff',
-  '--figma-color-border-tooltip-selected': '#0d99ff',
-  '--figma-color-border-tooltip-selected-strong': '#80caff',
-  '--figma-color-border-tooltip-strong': '#ffffff',
-  '--figma-color-icon-menu': '#ffffff',
-  '--figma-color-icon-menu-danger': '#f24822',
-  '--figma-color-icon-menu-disabled': '#ffffff66',
-  '--figma-color-icon-menu-hover': '#ffffff',
-  '--figma-color-icon-menu-ondisabled': '#1e1e1e',
-  '--figma-color-icon-menu-onselected': '#ffffff',
-  '--figma-color-icon-menu-pressed': '#0d99ff',
-  '--figma-color-icon-menu-secondary': '#ffffffb2',
-  '--figma-color-icon-menu-secondary-hover': '#ffffff',
-  '--figma-color-icon-menu-selected': '#80caff',
-  '--figma-color-icon-menu-selected-secondary': '#80caff',
-  '--figma-color-icon-menu-selected-tertiary': '#80caff',
-  '--figma-color-icon-menu-tertiary': '#ffffff66',
-  '--figma-color-icon-menu-tertiary-hover': '#ffffff',
-  '--figma-color-icon-menu-warning': '#ffcd29',
-  '--figma-color-icon-tooltip': '#ffffff',
-  '--figma-color-icon-tooltip-danger': '#f24822',
-  '--figma-color-icon-tooltip-disabled': '#ffffff66',
-  '--figma-color-icon-tooltip-hover': '#ffffff',
-  '--figma-color-icon-tooltip-ondisabled': '#1e1e1e',
-  '--figma-color-icon-tooltip-onselected': '#ffffff',
-  '--figma-color-icon-tooltip-pressed': '#0d99ff',
-  '--figma-color-icon-tooltip-secondary': '#ffffffb2',
-  '--figma-color-icon-tooltip-secondary-hover': '#ffffff',
-  '--figma-color-icon-tooltip-selected': '#80caff',
-  '--figma-color-icon-tooltip-selected-secondary': '#80caff',
-  '--figma-color-icon-tooltip-selected-tertiary': '#80caff',
-  '--figma-color-icon-tooltip-tertiary': '#ffffff66',
-  '--figma-color-icon-tooltip-tertiary-hover': '#ffffff',
-  '--figma-color-icon-tooltip-warning': '#ffcd29',
-  '--figma-color-text-menu': '#ffffff',
-  '--figma-color-text-menu-danger': '#f24822',
-  '--figma-color-text-menu-disabled': '#ffffff66',
-  '--figma-color-text-menu-hover': '#ffffff',
-  '--figma-color-text-menu-ondisabled': '#1e1e1e',
-  '--figma-color-text-menu-onselected': '#ffffff',
-  '--figma-color-text-menu-secondary': '#ffffffb2',
-  '--figma-color-text-menu-secondary-hover': '#ffffff',
-  '--figma-color-text-menu-selected': '#80caff',
-  '--figma-color-text-menu-selected-secondary': '#80caff',
-  '--figma-color-text-menu-selected-tertiary': '#80caff',
-  '--figma-color-text-menu-tertiary': '#ffffff66',
-  '--figma-color-text-menu-tertiary-hover': '#ffffff',
-  '--figma-color-text-menu-warning': '#ffd966',
-  '--figma-color-text-tooltip': '#ffffff',
-  '--figma-color-text-tooltip-danger': '#ffafa3',
-  '--figma-color-text-tooltip-disabled': '#ffffff66',
-  '--figma-color-text-tooltip-hover': '#ffffff',
-  '--figma-color-text-tooltip-ondisabled': '#1e1e1e',
-  '--figma-color-text-tooltip-onselected': '#ffffff',
-  '--figma-color-text-tooltip-secondary': '#ffffffb2',
-  '--figma-color-text-tooltip-secondary-hover': '#ffffff',
-  '--figma-color-text-tooltip-selected': '#80caff',
-  '--figma-color-text-tooltip-selected-secondary': '#80caff',
-  '--figma-color-text-tooltip-selected-tertiary': '#80caff',
-  '--figma-color-text-tooltip-tertiary': '#ffffff66',
-  '--figma-color-text-tooltip-tertiary-hover': '#ffffff',
-  '--figma-color-text-tooltip-warning': '#ffd966',
-};
-
-export type BaseThemeCSSVariableKey = keyof typeof BaseThemeCSSVariables;
diff --git a/packages/theme/src/colors/figjam.ts b/packages/theme/src/colors/figjam.ts
deleted file mode 100644
index 33af740..0000000
--- a/packages/theme/src/colors/figjam.ts
+++ /dev/null
@@ -1,178 +0,0 @@
-export const FigJamLightThemeCSSVariables = {
-  '--figma-color-bg': 'rgba(255, 255, 255, 1)',
-  '--figma-color-bg-brand': '#9747ff',
-  '--figma-color-bg-brand-hover': '#8638e5',
-  '--figma-color-bg-brand-pressed': '#8638e5',
-  '--figma-color-bg-brand-secondary': '#7c2bda',
-  '--figma-color-bg-brand-tertiary': '#f1e5ff',
-  '--figma-color-bg-component': '#9747ff',
-  '--figma-color-bg-component-hover': '#8638e5',
-  '--figma-color-bg-component-pressed': '#8638e5',
-  '--figma-color-bg-component-secondary': '#7c2bda',
-  '--figma-color-bg-component-tertiary': '#f1e5ff',
-  '--figma-color-bg-danger': '#f24822',
-  '--figma-color-bg-danger-hover': '#dc3412',
-  '--figma-color-bg-danger-pressed': '#dc3412',
-  '--figma-color-bg-danger-secondary': '#bd2915',
-  '--figma-color-bg-danger-tertiary': '#ffe2e0',
-  '--figma-color-bg-disabled': '#d9d9d9',
-  '--figma-color-bg-disabled-secondary': '#b3b3b3',
-  '--figma-color-bg-hover': '#f5f5f5',
-  '--figma-color-bg-inverse': '#2c2c2c',
-  '--figma-color-bg-onselected': '#e4ccff',
-  '--figma-color-bg-onselected-hover': '#e4ccff',
-  '--figma-color-bg-onselected-pressed': '#e4ccff',
-  '--figma-color-bg-pressed': '#f5f5f5',
-  '--figma-color-bg-secondary': '#f5f5f5',
-  '--figma-color-bg-selected': '#f1e5ff',
-  '--figma-color-bg-selected-hover': '#e4ccff',
-  '--figma-color-bg-selected-pressed': '#e4ccff',
-  '--figma-color-bg-selected-secondary': '#f9f5ff',
-  '--figma-color-bg-selected-strong': '#9747ff',
-  '--figma-color-bg-selected-tertiary': '#f9f5ff',
-  '--figma-color-bg-success': '#14ae5c',
-  '--figma-color-bg-success-hover': '#009951',
-  '--figma-color-bg-success-pressed': '#009951',
-  '--figma-color-bg-success-secondary': '#008043',
-  '--figma-color-bg-success-tertiary': '#cff7d3',
-  '--figma-color-bg-tertiary': '#e6e6e6',
-  '--figma-color-bg-warning': '#ffcd29',
-  '--figma-color-bg-warning-hover': '#ffc21a',
-  '--figma-color-bg-warning-pressed': '#ffc21a',
-  '--figma-color-bg-warning-secondary': '#fab815',
-  '--figma-color-bg-warning-tertiary': '#fff1c2',
-  '--figma-color-border': '#e6e6e6',
-  '--figma-color-border-brand': '#e4ccff',
-  '--figma-color-border-brand-strong': '#8638e5',
-  '--figma-color-border-component': '#e4ccff',
-  '--figma-color-border-component-hover': '#9747ff',
-  '--figma-color-border-component-strong': '#8638e5',
-  '--figma-color-border-danger': '#ffc7c2',
-  '--figma-color-border-danger-strong': '#dc3412',
-  '--figma-color-border-disabled': '#e6e6e6',
-  '--figma-color-border-disabled-strong': 'rgba(0, 0, 0, 0.3)',
-  '--figma-color-border-onbrand': '#8638e5',
-  '--figma-color-border-onbrand-strong': 'rgba(255, 255, 255, 1)',
-  '--figma-color-border-oncomponent': '#8638e5',
-  '--figma-color-border-oncomponent-strong': 'rgba(255, 255, 255, 1)',
-  '--figma-color-border-ondanger': '#dc3412',
-  '--figma-color-border-ondanger-strong': 'rgba(255, 255, 255, 1)',
-  '--figma-color-border-onselected': '#e4ccff',
-  '--figma-color-border-onselected-strong': 'rgba(0, 0, 0, 0.9)',
-  '--figma-color-border-onsuccess': '#009951',
-  '--figma-color-border-onsuccess-strong': 'rgba(255, 255, 255, 1)',
-  '--figma-color-border-onwarning': '#fab815',
-  '--figma-color-border-onwarning-strong': 'rgba(0, 0, 0, 0.9)',
-  '--figma-color-border-selected': '#9747ff',
-  '--figma-color-border-selected-strong': '#8638e5',
-  '--figma-color-border-strong': '#2c2c2c',
-  '--figma-color-border-success': '#aff4c6',
-  '--figma-color-border-success-strong': '#009951',
-  '--figma-color-border-warning': '#ffe8a3',
-  '--figma-color-border-warning-strong': '#b86200',
-  '--figma-color-icon': 'rgba(0, 0, 0, 0.9)',
-  '--figma-color-icon-brand': '#8638e5',
-  '--figma-color-icon-brand-pressed': '#7c2bda',
-  '--figma-color-icon-brand-secondary': '#d9b8ff',
-  '--figma-color-icon-brand-tertiary': '#e4ccff',
-  '--figma-color-icon-component': '#8638e5',
-  '--figma-color-icon-component-pressed': '#7c2bda',
-  '--figma-color-icon-component-secondary': '#c5b2dc',
-  '--figma-color-icon-component-tertiary': '#c5b2dc',
-  '--figma-color-icon-danger': '#f24822',
-  '--figma-color-icon-danger-hover': '#bd2915',
-  '--figma-color-icon-danger-pressed': '#bd2915',
-  '--figma-color-icon-danger-secondary': '#f24822',
-  '--figma-color-icon-danger-secondary-hover': '#f24822',
-  '--figma-color-icon-danger-tertiary': '#f24822',
-  '--figma-color-icon-disabled': 'rgba(0, 0, 0, 0.3)',
-  '--figma-color-icon-hover': 'rgba(0, 0, 0, 0.9)',
-  '--figma-color-icon-onbrand': 'rgba(255, 255, 255, 1)',
-  '--figma-color-icon-onbrand-secondary': 'rgba(255, 255, 255, 0.8)',
-  '--figma-color-icon-onbrand-tertiary': 'rgba(255, 255, 255, 0.4)',
-  '--figma-color-icon-oncomponent': 'rgba(255, 255, 255, 1)',
-  '--figma-color-icon-oncomponent-secondary': 'rgba(255, 255, 255, 0.8)',
-  '--figma-color-icon-oncomponent-tertiary': 'rgba(255, 255, 255, 0.4)',
-  '--figma-color-icon-ondanger': 'rgba(255, 255, 255, 1)',
-  '--figma-color-icon-ondanger-secondary': 'rgba(255, 255, 255, 0.8)',
-  '--figma-color-icon-ondanger-tertiary': 'rgba(255, 255, 255, 0.4)',
-  '--figma-color-icon-ondisabled': 'rgba(255, 255, 255, 1)',
-  '--figma-color-icon-oninverse': 'rgba(255, 255, 255, 0.9)',
-  '--figma-color-icon-onselected': 'rgba(0, 0, 0, 0.9)',
-  '--figma-color-icon-onselected-secondary': 'rgba(0, 0, 0, 0.5)',
-  '--figma-color-icon-onselected-strong': 'gba(255, 255, 255, 1)',
-  '--figma-color-icon-onselected-tertiary': 'rgba(0, 0, 0, 0.3)',
-  '--figma-color-icon-onsuccess': 'rgba(255, 255, 255, 1)',
-  '--figma-color-icon-onsuccess-secondary': 'rgba(255, 255, 255, 0.8)',
-  '--figma-color-icon-onsuccess-tertiary': 'rgba(255, 255, 255, 0.4)',
-  '--figma-color-icon-onwarning': 'rgba(0, 0, 0, 0.9)',
-  '--figma-color-icon-onwarning-secondary': 'rgba(0, 0, 0, 0.5)',
-  '--figma-color-icon-onwarning-tertiary': 'rgba(0, 0, 0, 0.3)',
-  '--figma-color-icon-pressed': '#8638e5',
-  '--figma-color-icon-secondary': 'rgba(0, 0, 0, 0.5)',
-  '--figma-color-icon-secondary-hover': 'rgba(0, 0, 0, 0.9)',
-  '--figma-color-icon-selected': '#8638e5',
-  '--figma-color-icon-selected-secondary': '#8638e5',
-  '--figma-color-icon-selected-tertiary': '#8638e5',
-  '--figma-color-icon-success': '#14ae5c',
-  '--figma-color-icon-success-pressed': '#008043',
-  '--figma-color-icon-success-secondary': '#14ae5c',
-  '--figma-color-icon-success-tertiary': '#14ae5c',
-  '--figma-color-icon-tertiary': 'rgba(0, 0, 0, 0.3)',
-  '--figma-color-icon-tertiary-hover': 'rgba(0, 0, 0, 0.9)',
-  '--figma-color-icon-warning': '#ffcd29',
-  '--figma-color-icon-warning-pressed': '#b86200',
-  '--figma-color-icon-warning-secondary': '#ffcd29',
-  '--figma-color-icon-warning-tertiary': '#ffcd29',
-  '--figma-color-text': 'rgba(0, 0, 0, 0.9)',
-  '--figma-color-text-brand': '#8638e5',
-  '--figma-color-text-brand-secondary': '#8638e5',
-  '--figma-color-text-brand-tertiary': '#8638e5',
-  '--figma-color-text-component': '#8638e5',
-  '--figma-color-text-component-pressed': '#7c2bda',
-  '--figma-color-text-component-secondary': '#c5b2dc',
-  '--figma-color-text-component-tertiary': '#c5b2dc',
-  '--figma-color-text-danger': '#dc3412',
-  '--figma-color-text-danger-secondary': '#dc3412',
-  '--figma-color-text-danger-tertiary': '#dc3412',
-  '--figma-color-text-disabled': 'rgba(0, 0, 0, 0.3)',
-  '--figma-color-text-hover': 'rgba(0, 0, 0, 0.9)',
-  '--figma-color-text-onbrand': 'rgba(255, 255, 255, 1)',
-  '--figma-color-text-onbrand-secondary': 'rgba(255, 255, 255, 0.8)',
-  '--figma-color-text-onbrand-tertiary': 'rgba(255, 255, 255, 0.4)',
-  '--figma-color-text-oncomponent': 'rgba(255, 255, 255, 1)',
-  '--figma-color-text-oncomponent-secondary': 'rgba(255, 255, 255, 0.8)',
-  '--figma-color-text-oncomponent-tertiary': 'rgba(255, 255, 255, 0.4)',
-  '--figma-color-text-ondanger': 'rgba(255, 255, 255, 1)',
-  '--figma-color-text-ondanger-secondary': 'rgba(255, 255, 255, 0.8)',
-  '--figma-color-text-ondanger-tertiary': 'rgba(255, 255, 255, 0.4)',
-  '--figma-color-text-ondisabled': 'rgba(255, 255, 255, 1)',
-  '--figma-color-text-oninverse': 'rgba(255, 255, 255, 0.9)',
-  '--figma-color-text-onselected': 'rgba(0, 0, 0, 0.9)',
-  '--figma-color-text-onselected-secondary': 'rgba(0, 0, 0, 0.5)',
-  '--figma-color-text-onselected-strong': 'rgba(255, 255, 255, 1)',
-  '--figma-color-text-onselected-tertiary': 'rgba(0, 0, 0, 0.3)',
-  '--figma-color-text-onsuccess': 'rgba(255, 255, 255, 1)',
-  '--figma-color-text-onsuccess-secondary': 'rgba(255, 255, 255, 0.8)',
-  '--figma-color-text-onsuccess-tertiary': 'rgba(255, 255, 255, 0.4)',
-  '--figma-color-text-onwarning': 'rgba(0, 0, 0, 0.9)',
-  '--figma-color-text-onwarning-secondary': 'rgba(0, 0, 0, 0.5)',
-  '--figma-color-text-onwarning-tertiary': 'rgba(0, 0, 0, 0.3)',
-  '--figma-color-text-secondary': 'rgba(0, 0, 0, 0.5)',
-  '--figma-color-text-secondary-hover': 'rgba(0, 0, 0, 0.9)',
-  '--figma-color-text-selected': '#8638e5',
-  '--figma-color-text-selected-secondary': '#8638e5',
-  '--figma-color-text-selected-tertiary': '#8638e5',
-  '--figma-color-text-success': '#009951',
-  '--figma-color-text-success-secondary': '#009951',
-  '--figma-color-text-success-tertiary': '#009951',
-  '--figma-color-text-tertiary': 'rgba(0, 0, 0, 0.3)',
-  '--figma-color-text-tertiary-hover': 'rgba(0, 0, 0, 0.9)',
-  '--figma-color-text-warning': '#b86200',
-  '--figma-color-text-warning-secondary': '#b86200',
-  '--figma-color-text-warning-tertiary': '#b86200',
-};
-
-export type FigJamThemeCSSVariables = typeof FigJamLightThemeCSSVariables;
-
-export type FigJamThemeCSSVariableKey = keyof FigJamThemeCSSVariables;
diff --git a/packages/theme/src/colors/figma.ts b/packages/theme/src/colors/figma.ts
deleted file mode 100644
index d43364f..0000000
--- a/packages/theme/src/colors/figma.ts
+++ /dev/null
@@ -1,353 +0,0 @@
-export const FigmaLightThemeCSSVariables = {
-  '--figma-color-bg': '#ffffff',
-  '--figma-color-bg-brand': '#0d99ff',
-  '--figma-color-bg-brand-hover': '#007be5',
-  '--figma-color-bg-brand-pressed': '#007be5',
-  '--figma-color-bg-brand-secondary': '#0768cf',
-  '--figma-color-bg-brand-tertiary': '#e5f4ff',
-  '--figma-color-bg-component': '#9747ff',
-  '--figma-color-bg-component-hover': '#8638e5',
-  '--figma-color-bg-component-pressed': '#8638e5',
-  '--figma-color-bg-component-secondary': '#7c2bda',
-  '--figma-color-bg-component-tertiary': '#f1e5ff',
-  '--figma-color-bg-danger': '#f24822',
-  '--figma-color-bg-danger-hover': '#dc3412',
-  '--figma-color-bg-danger-pressed': '#dc3412',
-  '--figma-color-bg-danger-secondary': '#bd2915',
-  '--figma-color-bg-danger-tertiary': '#ffe2e0',
-  '--figma-color-bg-disabled': '#d9d9d9',
-  '--figma-color-bg-disabled-secondary': '#b3b3b3',
-  '--figma-color-bg-hover': '#f5f5f5',
-  '--figma-color-bg-inverse': '#2c2c2c',
-  '--figma-color-bg-onselected': '#bde3ff',
-  '--figma-color-bg-onselected-hover': '#bde3ff',
-  '--figma-color-bg-onselected-pressed': '#bde3ff',
-  '--figma-color-bg-pressed': '#f5f5f5',
-  '--figma-color-bg-secondary': '#f5f5f5',
-  '--figma-color-bg-selected': '#e5f4ff',
-  '--figma-color-bg-selected-hover': '#bde3ff',
-  '--figma-color-bg-selected-pressed': '#bde3ff',
-  '--figma-color-bg-selected-secondary': '#f2f9ff',
-  '--figma-color-bg-selected-strong': '#0d99ff',
-  '--figma-color-bg-selected-tertiary': '#f2f9ff',
-  '--figma-color-bg-success': '#14ae5c',
-  '--figma-color-bg-success-hover': '#009951',
-  '--figma-color-bg-success-pressed': '#009951',
-  '--figma-color-bg-success-secondary': '#008043',
-  '--figma-color-bg-success-tertiary': '#cff7d3',
-  '--figma-color-bg-tertiary': '#e6e6e6',
-  '--figma-color-bg-warning': '#ffcd29',
-  '--figma-color-bg-warning-hover': '#ffc21a',
-  '--figma-color-bg-warning-pressed': '#ffc21a',
-  '--figma-color-bg-warning-secondary': '#fab815',
-  '--figma-color-bg-warning-tertiary': '#fff1c2',
-  '--figma-color-border': '#e6e6e6',
-  '--figma-color-border-brand': '#bde3ff',
-  '--figma-color-border-brand-strong': '#007be5',
-  '--figma-color-border-component': '#e4ccff',
-  '--figma-color-border-component-hover': '#9747ff',
-  '--figma-color-border-component-strong': '#8638e5',
-  '--figma-color-border-danger': '#ffc7c2',
-  '--figma-color-border-danger-strong': '#dc3412',
-  '--figma-color-border-disabled': '#e6e6e6',
-  '--figma-color-border-disabled-strong': '#0000004d',
-  '--figma-color-border-onbrand': '#007be5',
-  '--figma-color-border-onbrand-strong': '#ffffff',
-  '--figma-color-border-oncomponent': '#8638e5',
-  '--figma-color-border-oncomponent-strong': '#ffffff',
-  '--figma-color-border-ondanger': '#dc3412',
-  '--figma-color-border-ondanger-strong': '#ffffff',
-  '--figma-color-border-onselected': '#bde3ff',
-  '--figma-color-border-onselected-strong': '#000000e5',
-  '--figma-color-border-onsuccess': '#009951',
-  '--figma-color-border-onsuccess-strong': '#ffffff',
-  '--figma-color-border-onwarning': '#fab815',
-  '--figma-color-border-onwarning-strong': '#000000e5',
-  '--figma-color-border-selected': '#0d99ff',
-  '--figma-color-border-selected-strong': '#007be5',
-  '--figma-color-border-strong': '#2c2c2c',
-  '--figma-color-border-success': '#aff4c6',
-  '--figma-color-border-success-strong': '#009951',
-  '--figma-color-border-warning': '#ffe8a3',
-  '--figma-color-border-warning-strong': '#b86200',
-  '--figma-color-icon': '#000000e5',
-  '--figma-color-icon-brand': '#007be5',
-  '--figma-color-icon-brand-pressed': '#0768cf',
-  '--figma-color-icon-brand-secondary': '#80caff',
-  '--figma-color-icon-brand-tertiary': '#bde3ff',
-  '--figma-color-icon-component': '#8638e5',
-  '--figma-color-icon-component-pressed': '#7c2bda',
-  '--figma-color-icon-component-secondary': '#c5b2dc',
-  '--figma-color-icon-component-tertiary': '#c5b2dc',
-  '--figma-color-icon-danger': '#f24822',
-  '--figma-color-icon-danger-hover': '#bd2915',
-  '--figma-color-icon-danger-pressed': '#bd2915',
-  '--figma-color-icon-danger-secondary': '#f24822',
-  '--figma-color-icon-danger-secondary-hover': '#f24822',
-  '--figma-color-icon-danger-tertiary': '#f24822',
-  '--figma-color-icon-disabled': '#0000004d',
-  '--figma-color-icon-hover': '#000000e5',
-  '--figma-color-icon-onbrand': '#ffffff',
-  '--figma-color-icon-onbrand-secondary': '#ffffffcc',
-  '--figma-color-icon-onbrand-tertiary': '#ffffff66',
-  '--figma-color-icon-oncomponent': '#ffffff',
-  '--figma-color-icon-oncomponent-secondary': '#ffffffcc',
-  '--figma-color-icon-oncomponent-tertiary': '#ffffff66',
-  '--figma-color-icon-ondanger': '#ffffff',
-  '--figma-color-icon-ondanger-secondary': '#ffffffcc',
-  '--figma-color-icon-ondanger-tertiary': '#ffffff66',
-  '--figma-color-icon-ondisabled': '#ffffff',
-  '--figma-color-icon-oninverse': '#ffffffe5',
-  '--figma-color-icon-onselected': '#000000e5',
-  '--figma-color-icon-onselected-secondary': '#00000080',
-  '--figma-color-icon-onselected-strong': '#ffffff',
-  '--figma-color-icon-onselected-tertiary': '#0000004d',
-  '--figma-color-icon-onsuccess': '#ffffff',
-  '--figma-color-icon-onsuccess-secondary': '#ffffffcc',
-  '--figma-color-icon-onsuccess-tertiary': '#ffffff66',
-  '--figma-color-icon-onwarning': '#000000e5',
-  '--figma-color-icon-onwarning-secondary': '#ffffffcc',
-  '--figma-color-icon-onwarning-tertiary': '#ffffff66',
-  '--figma-color-icon-pressed': '#007be5',
-  '--figma-color-icon-secondary': '#00000080',
-  '--figma-color-icon-secondary-hover': '#000000e5',
-  '--figma-color-icon-selected': '#007be5',
-  '--figma-color-icon-selected-secondary': '#007be5',
-  '--figma-color-icon-selected-tertiary': '#007be5',
-  '--figma-color-icon-success': '#14ae5c',
-  '--figma-color-icon-success-pressed': '#008043',
-  '--figma-color-icon-success-secondary': '#14ae5c',
-  '--figma-color-icon-success-tertiary': '#14ae5c',
-  '--figma-color-icon-tertiary': '#0000004d',
-  '--figma-color-icon-tertiary-hover': '#000000e5',
-  '--figma-color-icon-warning': '#ffcd29',
-  '--figma-color-icon-warning-pressed': '#b86200',
-  '--figma-color-icon-warning-secondary': '#ffcd29',
-  '--figma-color-icon-warning-tertiary': '#ffcd29',
-  '--figma-color-text': '#000000e5',
-  '--figma-color-text-brand': '#007be5',
-  '--figma-color-text-brand-secondary': '#007be5',
-  '--figma-color-text-brand-tertiary': '#007be5',
-  '--figma-color-text-component': '#8638e5',
-  '--figma-color-text-component-pressed': '#7c2bda',
-  '--figma-color-text-component-secondary': '#c5b2dc',
-  '--figma-color-text-component-tertiary': '#c5b2dc',
-  '--figma-color-text-danger': '#dc3412',
-  '--figma-color-text-danger-secondary': '#dc3412',
-  '--figma-color-text-danger-tertiary': '#dc3412',
-  '--figma-color-text-disabled': '#0000004d',
-  '--figma-color-text-hover': '#000000e5',
-  '--figma-color-text-onbrand': '#ffffff',
-  '--figma-color-text-onbrand-secondary': '#ffffffcc',
-  '--figma-color-text-onbrand-tertiary': '#ffffff66',
-  '--figma-color-text-oncomponent': '#ffffff',
-  '--figma-color-text-oncomponent-secondary': '#ffffffcc',
-  '--figma-color-text-oncomponent-tertiary': '#ffffff66',
-  '--figma-color-text-ondanger': '#ffffff',
-  '--figma-color-text-ondanger-secondary': '#ffffffcc',
-  '--figma-color-text-ondanger-tertiary': '#ffffff66',
-  '--figma-color-text-ondisabled': '#ffffff',
-  '--figma-color-text-oninverse': '#ffffffe5',
-  '--figma-color-text-onselected': '#000000e5',
-  '--figma-color-text-onselected-secondary': '#00000080',
-  '--figma-color-text-onselected-strong': '#ffffff',
-  '--figma-color-text-onselected-tertiary': '#0000004d',
-  '--figma-color-text-onsuccess': '#ffffff',
-  '--figma-color-text-onsuccess-secondary': '#ffffffcc',
-  '--figma-color-text-onsuccess-tertiary': '#ffffff66',
-  '--figma-color-text-onwarning': '#000000e5',
-  '--figma-color-text-onwarning-secondary': '#00000080',
-  '--figma-color-text-onwarning-tertiary': '#0000004d',
-  '--figma-color-text-secondary': '#00000080',
-  '--figma-color-text-secondary-hover': '#000000e5',
-  '--figma-color-text-selected': '#007be5',
-  '--figma-color-text-selected-secondary': '#007be5',
-  '--figma-color-text-selected-tertiary': '#007be5',
-  '--figma-color-text-success': '#009951',
-  '--figma-color-text-success-secondary': '#009951',
-  '--figma-color-text-success-tertiary': '#009951',
-  '--figma-color-text-tertiary': '#0000004d',
-  '--figma-color-text-tertiary-hover': '#000000e5',
-  '--figma-color-text-warning': '#b86200',
-  '--figma-color-text-warning-secondary': '#b86200',
-  '--figma-color-text-warning-tertiary': '#b86200',
-};
-
-export const FigmaDarkThemeCSSVariables = {
-  '--figma-color-bg': '#2c2c2c',
-  '--figma-color-bg-brand': '#0c8ce9',
-  '--figma-color-bg-brand-hover': '#0a6dc2',
-  '--figma-color-bg-brand-pressed': '#0a6dc2',
-  '--figma-color-bg-brand-secondary': '#105cad',
-  '--figma-color-bg-brand-tertiary': '#394360',
-  '--figma-color-bg-component': '#8a38f5',
-  '--figma-color-bg-component-hover': '#7a2ed6',
-  '--figma-color-bg-component-pressed': '#7a2ed6',
-  '--figma-color-bg-component-secondary': '#652ca8',
-  '--figma-color-bg-component-tertiary': '#473956',
-  '--figma-color-bg-danger': '#e03e1a',
-  '--figma-color-bg-danger-hover': '#c4381c',
-  '--figma-color-bg-danger-pressed': '#c4381c',
-  '--figma-color-bg-danger-secondary': '#963323',
-  '--figma-color-bg-danger-tertiary': '#7c2622',
-  '--figma-color-bg-disabled': '#757575',
-  '--figma-color-bg-disabled-secondary': '#b3b3b3',
-  '--figma-color-bg-hover': '#383838',
-  '--figma-color-bg-inverse': '#ffffff',
-  '--figma-color-bg-onselected': '#667799',
-  '--figma-color-bg-onselected-hover': '#667799',
-  '--figma-color-bg-onselected-pressed': '#667799',
-  '--figma-color-bg-pressed': '#383838',
-  '--figma-color-bg-secondary': '#383838',
-  '--figma-color-bg-selected': '#4a5878',
-  '--figma-color-bg-selected-hover': '#536383',
-  '--figma-color-bg-selected-pressed': '#536383',
-  '--figma-color-bg-selected-secondary': '#394360',
-  '--figma-color-bg-selected-strong': '#0c8ce9',
-  '--figma-color-bg-selected-tertiary': '#394360',
-  '--figma-color-bg-success': '#198f51',
-  '--figma-color-bg-success-hover': '#078348',
-  '--figma-color-bg-success-pressed': '#078348',
-  '--figma-color-bg-success-secondary': '#0a5c35',
-  '--figma-color-bg-success-tertiary': '#0a4c2d',
-  '--figma-color-bg-tertiary': '#444444',
-  '--figma-color-bg-warning': '#f3c11b',
-  '--figma-color-bg-warning-hover': '#f2b50d',
-  '--figma-color-bg-warning-pressed': '#f2b50d',
-  '--figma-color-bg-warning-secondary': '#e4a711',
-  '--figma-color-bg-warning-tertiary': '#c58011',
-  '--figma-color-border': '#444444',
-  '--figma-color-border-brand': '#105cad',
-  '--figma-color-border-brand-strong': '#7cc4f8',
-  '--figma-color-border-component': '#652ca8',
-  '--figma-color-border-component-hover': '#8a38f5',
-  '--figma-color-border-component-strong': '#d6b6fb',
-  '--figma-color-border-danger': '#963323',
-  '--figma-color-border-danger-strong': '#fca397',
-  '--figma-color-border-disabled': '#444444',
-  '--figma-color-border-disabled-strong': '#ffffff66',
-  '--figma-color-border-onbrand': '#0a6dc2',
-  '--figma-color-border-onbrand-strong': '#ffffff',
-  '--figma-color-border-oncomponent': '#7a2ed6',
-  '--figma-color-border-oncomponent-strong': '#ffffff',
-  '--figma-color-border-ondanger': '#c4381c',
-  '--figma-color-border-ondanger-strong': '#ffffff',
-  '--figma-color-border-onselected': '#667799',
-  '--figma-color-border-onselected-strong': '#ffffffe5',
-  '--figma-color-border-onsuccess': '#078348',
-  '--figma-color-border-onsuccess-strong': '#ffffff',
-  '--figma-color-border-onwarning': '#e4a711',
-  '--figma-color-border-onwarning-strong': '#000000e5',
-  '--figma-color-border-selected': '#0c8ce9',
-  '--figma-color-border-selected-strong': '#7cc4f8',
-  '--figma-color-border-strong': '#ffffffe5',
-  '--figma-color-border-success': '#0a5c35',
-  '--figma-color-border-success-strong': '#79d297',
-  '--figma-color-border-warning': '#925711',
-  '--figma-color-border-warning-strong': '#f7d15f',
-  '--figma-color-icon': '#ffffff',
-  '--figma-color-icon-brand': '#7cc4f8',
-  '--figma-color-icon-brand-pressed': '#0c8ce9',
-  '--figma-color-icon-brand-secondary': '#536383',
-  '--figma-color-icon-brand-tertiary': '#394360',
-  '--figma-color-icon-component': '#d1a8ff',
-  '--figma-color-icon-component-pressed': '#d6b6fb',
-  '--figma-color-icon-component-secondary': '#6b5884',
-  '--figma-color-icon-component-tertiary': '#6b5884',
-  '--figma-color-icon-danger': '#e03e1a',
-  '--figma-color-icon-danger-hover': '#fbbcb6',
-  '--figma-color-icon-danger-pressed': '#fbbcb6',
-  '--figma-color-icon-danger-secondary': '#e03e1a',
-  '--figma-color-icon-danger-secondary-hover': '#e03e1a',
-  '--figma-color-icon-danger-tertiary': '#e03e1a',
-  '--figma-color-icon-disabled': '#ffffff66',
-  '--figma-color-icon-hover': '#ffffff',
-  '--figma-color-icon-onbrand': '#ffffff',
-  '--figma-color-icon-onbrand-secondary': '#ffffffcc',
-  '--figma-color-icon-onbrand-tertiary': '#ffffff66',
-  '--figma-color-icon-oncomponent': '#ffffff',
-  '--figma-color-icon-oncomponent-secondary': '#ffffffcc',
-  '--figma-color-icon-oncomponent-tertiary': '#ffffff66',
-  '--figma-color-icon-ondanger': '#ffffff',
-  '--figma-color-icon-ondanger-secondary': '#ffffffcc',
-  '--figma-color-icon-ondanger-tertiary': '#ffffff66',
-  '--figma-color-icon-ondisabled': '#2c2c2c',
-  '--figma-color-icon-oninverse': '#000000e5',
-  '--figma-color-icon-onselected': '#ffffff',
-  '--figma-color-icon-onselected-secondary': '#ffffffb2',
-  '--figma-color-icon-onselected-strong': '#ffffff',
-  '--figma-color-icon-onselected-tertiary': '#ffffff66',
-  '--figma-color-icon-onsuccess': '#ffffff',
-  '--figma-color-icon-onsuccess-secondary': '#ffffffcc',
-  '--figma-color-icon-onsuccess-tertiary': '#ffffff66',
-  '--figma-color-icon-onwarning': '#000000e5',
-  '--figma-color-icon-onwarning-secondary': '#00000080',
-  '--figma-color-icon-onwarning-tertiary': '#0000004d',
-  '--figma-color-icon-pressed': '#0a6dc2',
-  '--figma-color-icon-secondary': '#ffffffb2',
-  '--figma-color-icon-secondary-hover': '#ffffff',
-  '--figma-color-icon-selected': '#7cc4f8',
-  '--figma-color-icon-selected-secondary': '#7cc4f8',
-  '--figma-color-icon-selected-tertiary': '#7cc4f8',
-  '--figma-color-icon-success': '#198f51',
-  '--figma-color-icon-success-pressed': '#a1e8b9',
-  '--figma-color-icon-success-secondary': '#198f51',
-  '--figma-color-icon-success-tertiary': '#198f51',
-  '--figma-color-icon-tertiary': '#ffffff66',
-  '--figma-color-icon-tertiary-hover': '#ffffff',
-  '--figma-color-icon-warning': '#f3c11b',
-  '--figma-color-icon-warning-pressed': '#f7d15f',
-  '--figma-color-icon-warning-secondary': '#f3c11b',
-  '--figma-color-icon-warning-tertiary': '#f3c11b',
-  '--figma-color-text': '#ffffff',
-  '--figma-color-text-brand': '#7cc4f8',
-  '--figma-color-text-brand-secondary': '#7cc4f8',
-  '--figma-color-text-brand-tertiary': '#7cc4f8',
-  '--figma-color-text-component': '#d1a8ff',
-  '--figma-color-text-component-pressed': '#d6b6fb',
-  '--figma-color-text-component-secondary': '#6b5884',
-  '--figma-color-text-component-tertiary': '#6b5884',
-  '--figma-color-text-danger': '#fca397',
-  '--figma-color-text-danger-secondary': '#fca397',
-  '--figma-color-text-danger-tertiary': '#fca397',
-  '--figma-color-text-disabled': '#ffffff66',
-  '--figma-color-text-hover': '#ffffff',
-  '--figma-color-text-onbrand': '#ffffff',
-  '--figma-color-text-onbrand-secondary': '#ffffffcc',
-  '--figma-color-text-onbrand-tertiary': '#ffffff66',
-  '--figma-color-text-oncomponent': '#ffffff',
-  '--figma-color-text-oncomponent-secondary': '#ffffffcc',
-  '--figma-color-text-oncomponent-tertiary': '#ffffff66',
-  '--figma-color-text-ondanger': '#ffffff',
-  '--figma-color-text-ondanger-secondary': '#ffffffcc',
-  '--figma-color-text-ondanger-tertiary': '#ffffff66',
-  '--figma-color-text-ondisabled': '#2c2c2c',
-  '--figma-color-text-oninverse': '#000000e5',
-  '--figma-color-text-onselected': '#ffffffe5',
-  '--figma-color-text-onselected-secondary': '#ffffffb2',
-  '--figma-color-text-onselected-strong': '#ffffff',
-  '--figma-color-text-onselected-tertiary': '#ffffff66',
-  '--figma-color-text-onsuccess': '#ffffff',
-  '--figma-color-text-onsuccess-secondary': '#ffffffcc',
-  '--figma-color-text-onsuccess-tertiary': '#ffffff66',
-  '--figma-color-text-onwarning': '#000000e5',
-  '--figma-color-text-onwarning-secondary': '#00000080',
-  '--figma-color-text-onwarning-tertiary': '#0000004d',
-  '--figma-color-text-secondary': '#ffffffb2',
-  '--figma-color-text-secondary-hover': '#ffffff',
-  '--figma-color-text-selected': '#7cc4f8',
-  '--figma-color-text-selected-secondary': '#7cc4f8',
-  '--figma-color-text-selected-tertiary': '#7cc4f8',
-  '--figma-color-text-success': '#79d297',
-  '--figma-color-text-success-secondary': '#79d297',
-  '--figma-color-text-success-tertiary': '#79d297',
-  '--figma-color-text-tertiary': '#ffffff66',
-  '--figma-color-text-tertiary-hover': '#ffffff',
-  '--figma-color-text-warning': '#f7d15f',
-  '--figma-color-text-warning-secondary': '#f7d15f',
-  '--figma-color-text-warning-tertiary': '#f7d15f',
-};
-
-export type FigmaThemeCSSVariables = typeof FigmaLightThemeCSSVariables & typeof FigmaDarkThemeCSSVariables;
-
-export type FigmaThemeCSSVariableKey = keyof FigmaThemeCSSVariables;
diff --git a/packages/theme/src/colors/index.ts b/packages/theme/src/colors/index.ts
index e70b163..039cd29 100644
--- a/packages/theme/src/colors/index.ts
+++ b/packages/theme/src/colors/index.ts
@@ -1,12 +1,21 @@
-import { BaseThemeCSSVariables, type BaseThemeCSSVariableKey } from './base';
-import { FigmaLightThemeCSSVariables, FigmaDarkThemeCSSVariables, type FigmaThemeCSSVariableKey } from './figma';
-import { FigJamLightThemeCSSVariables, type FigJamThemeCSSVariableKey } from './figjam';
+import { FigJamLightThemeCSSVariables } from '../theme/colors/figjam';
+import { FigmaDarkThemeCSSVariables, FigmaLightThemeCSSVariables } from '../theme/colors/figma';
+import type { ThemeCSSVariableKey } from '../theme/colors/types';
 
-export * from './base';
-export * from './figma';
-export * from './figjam';
+export { FigmaLightThemeCSSVariables, FigmaDarkThemeCSSVariables, FigJamLightThemeCSSVariables };
+export { FigJamDarkThemeCSSVariables } from '../theme/colors/figjam';
+export {
+  DevModeLightThemeCSSVariables,
+  DevModeDarkThemeCSSVariables,
+} from '../theme/colors/devmode';
+export { SlidesLightThemeCSSVariables, SlidesDarkThemeCSSVariables } from '../theme/colors/slides';
+export type { FigmaThemeCSSVariables, FigmaThemeCSSVariableKey } from '../theme/colors/figma';
+export type { FigJamThemeCSSVariables, FigJamThemeCSSVariableKey } from '../theme/colors/figjam';
+export type { DevModeThemeCSSVariables, DevModeThemeCSSVariableKey } from '../theme/colors/devmode';
+export type { SlidesThemeCSSVariables, SlidesThemeCSSVariableKey } from '../theme/colors/slides';
+export { generateThemeVariablesCSS } from '../theme/colors';
 
-export type ThemeCSSVariableKey = BaseThemeCSSVariableKey | FigmaThemeCSSVariableKey | FigJamThemeCSSVariableKey;
+export type { ThemeCSSVariableKey };
 
 export type ThemeColorScope = 'bg' | 'border' | 'icon' | 'text';
 
@@ -21,14 +30,14 @@ export function getCSSPreflights(theme: Record<ThemeCSSVariableKey, string>) {
 export function generateCSSVariables(type: 'figma' | 'figjam') {
   if (type === 'figma') {
     return `html, html.figma-light, .figma-light {
-      ${getCSSPreflights({ ...BaseThemeCSSVariables, ...FigmaLightThemeCSSVariables })}
+      ${getCSSPreflights(FigmaLightThemeCSSVariables)}
     }
     html.figma-dark, .figma-dark {
-      ${getCSSPreflights({ ...BaseThemeCSSVariables, ...FigmaDarkThemeCSSVariables })}
+      ${getCSSPreflights(FigmaDarkThemeCSSVariables)}
     }`;
   }
 
   return `html.figjam, .figjam {
-    ${getCSSPreflights({ ...BaseThemeCSSVariables, ...FigJamLightThemeCSSVariables })}
+    ${getCSSPreflights(FigJamLightThemeCSSVariables)}
   }`;
 }
diff --git a/packages/theme/src/css/devmode-theme.css b/packages/theme/src/css/devmode-theme.css
new file mode 100644
index 0000000..0049b89
--- /dev/null
+++ b/packages/theme/src/css/devmode-theme.css
@@ -0,0 +1,1172 @@
+@theme {
+  --figma-font-family-default: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "SFProLocalRange";
+  --figma-font-family-code: "Roboto Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
+  --figma-font-family-display: "Whyte", ui-sans-serif, system-ui, sans-serif;
+  --figma-font-weight-default: 450;
+  --figma-font-weight-medium: 450;
+  --figma-font-weight-strong: 550;
+  --figma-font-weight-heavy: 550;
+  --figma-font-size-body-large: .8125rem;
+  --figma-line-height-body-large: 1.375rem;
+  --figma-letter-spacing-body-large: -.00203rem;
+  --figma-font-size-body-large-strong: .8125rem;
+  --figma-line-height-body-large-strong: 1.375rem;
+  --figma-letter-spacing-body-large-strong: -.00203rem;
+  --figma-font-size-body-medium: .6875rem;
+  --figma-line-height-body-medium: 1rem;
+  --figma-letter-spacing-body-medium: .00344rem;
+  --figma-font-size-body-medium-strong: .6875rem;
+  --figma-line-height-body-medium-strong: 1rem;
+  --figma-letter-spacing-body-medium-strong: .00344rem;
+  --figma-font-size-body-small: .5625rem;
+  --figma-line-height-body-small: .875rem;
+  --figma-letter-spacing-body-small: .00281rem;
+  --figma-font-size-body-small-strong: .5625rem;
+  --figma-line-height-body-small-strong: .875rem;
+  --figma-letter-spacing-body-small-strong: .00281rem;
+  --figma-font-size-heading-display: 3rem;
+  --figma-line-height-heading-display: 3.5rem;
+  --figma-letter-spacing-heading-display: -.09rem;
+  --figma-font-size-heading-large: 1.5rem;
+  --figma-line-height-heading-large: 2rem;
+  --figma-letter-spacing-heading-large: -.0255rem;
+  --figma-font-size-heading-medium: .9375rem;
+  --figma-line-height-heading-medium: 1.5625rem;
+  --figma-letter-spacing-heading-medium: -.00469rem;
+  --figma-font-size-heading-small: .8125rem;
+  --figma-line-height-heading-small: 1.375rem;
+  --figma-letter-spacing-heading-small: -.00203rem;
+  --figma-radius-sm: .125rem;
+  --figma-radius-md: .3125rem;
+  --figma-radius-lg: .8125rem;
+  --figma-radius-none: 0;
+  --figma-radius-full: 9999px;
+  --figma-space-0: 0;
+  --figma-space-0\.5: .125rem;
+  --figma-space-1: .25rem;
+  --figma-space-1\.5: .375rem;
+  --figma-space-2: .5rem;
+  --figma-space-2\.5: .75rem;
+  --figma-space-3: 1rem;
+  --figma-space-4: 1.5rem;
+  --figma-space-5: 2rem;
+  --figma-space-6: 2.5rem;
+  --figma-border-width-1: 1px;
+  --figma-border-width-4: .25rem;
+  --figma-duration-100: 100ms;
+  --figma-duration-200: 200ms;
+  --figma-duration-300: 300ms;
+  --figma-opacity-50: 0.5;
+  --figma-opacity-disabled: 0.3;
+  --figma-z-index-1: 1;
+  --figma-z-index-2: 2;
+  --figma-z-index-dropdown: 10;
+  --figma-z-index-modal: 50;
+  --figma-z-index-tooltip: 100;
+  --figma-shadow-slider: 0 1px 3px 0 #0000001a, 0 3px 8px 0 #0000001a, 0 0 0.5px 0 #0000002e, inset 0 0 0 0.5px #0000001a;
+  --figma-shadow-hud: 0px 5px 17px rgba(0, 0, 0, 0.2), 0px 2px 7px rgba(0, 0, 0, 0.15);
+  --font-figma: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "SFProLocalRange";
+  --font-figma-code: "Roboto Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
+  --font-weight-figma-default: 450;
+  --font-weight-figma-heavy: 550;
+  --font-weight-figma-medium: 450;
+  --font-weight-figma-strong: 550;
+  --text-figma-body-large: .8125rem;
+  --text-figma-body-large-strong: .8125rem;
+  --text-figma-body-medium: .6875rem;
+  --text-figma-body-medium-strong: .6875rem;
+  --text-figma-body-small: .5625rem;
+  --text-figma-body-small-strong: .5625rem;
+  --text-figma-heading-display: 3rem;
+  --text-figma-heading-large: 1.5rem;
+  --text-figma-heading-medium: .9375rem;
+  --text-figma-heading-small: .8125rem;
+  --leading-figma-body-large: 1.375rem;
+  --leading-figma-body-large-strong: 1.375rem;
+  --leading-figma-body-medium: 1rem;
+  --leading-figma-body-medium-strong: 1rem;
+  --leading-figma-body-small: .875rem;
+  --leading-figma-body-small-strong: .875rem;
+  --leading-figma-heading-display: 3.5rem;
+  --leading-figma-heading-large: 2rem;
+  --leading-figma-heading-medium: 1.5625rem;
+  --leading-figma-heading-small: 1.375rem;
+  --text-figma-body-large--line-height: 1.375rem;
+  --text-figma-body-large-strong--line-height: 1.375rem;
+  --text-figma-body-medium--line-height: 1rem;
+  --text-figma-body-medium-strong--line-height: 1rem;
+  --text-figma-body-small--line-height: .875rem;
+  --text-figma-body-small-strong--line-height: .875rem;
+  --text-figma-heading-display--line-height: 3.5rem;
+  --text-figma-heading-large--line-height: 2rem;
+  --text-figma-heading-medium--line-height: 1.5625rem;
+  --text-figma-heading-small--line-height: 1.375rem;
+  --tracking-figma-body-large: -.00203rem;
+  --tracking-figma-body-large-strong: -.00203rem;
+  --tracking-figma-body-medium: .00344rem;
+  --tracking-figma-body-medium-strong: .00344rem;
+  --tracking-figma-body-small: .00281rem;
+  --tracking-figma-body-small-strong: .00281rem;
+  --tracking-figma-heading-display: -.09rem;
+  --tracking-figma-heading-large: -.0255rem;
+  --tracking-figma-heading-medium: -.00469rem;
+  --tracking-figma-heading-small: -.00203rem;
+  --text-figma-body-large--letter-spacing: -.00203rem;
+  --text-figma-body-large-strong--letter-spacing: -.00203rem;
+  --text-figma-body-medium--letter-spacing: .00344rem;
+  --text-figma-body-medium-strong--letter-spacing: .00344rem;
+  --text-figma-body-small--letter-spacing: .00281rem;
+  --text-figma-body-small-strong--letter-spacing: .00281rem;
+  --text-figma-heading-display--letter-spacing: -.09rem;
+  --text-figma-heading-large--letter-spacing: -.0255rem;
+  --text-figma-heading-medium--letter-spacing: -.00469rem;
+  --text-figma-heading-small--letter-spacing: -.00203rem;
+  --text-figma-body-large-strong--font-weight: 550;
+  --text-figma-body-medium-strong--font-weight: 550;
+  --text-figma-body-small-strong--font-weight: 550;
+  --text-figma-heading-large--font-weight: 550;
+  --text-figma-heading-medium--font-weight: 550;
+  --text-figma-heading-small--font-weight: 550;
+  --radius-figma-full: 9999px;
+  --radius-figma-lg: .8125rem;
+  --radius-figma-md: .3125rem;
+  --radius-figma-none: 0;
+  --radius-figma-sm: .125rem;
+  --spacing-figma-0: 0;
+  --spacing-figma-0\.5: .125rem;
+  --spacing-figma-1: .25rem;
+  --spacing-figma-1\.5: .375rem;
+  --spacing-figma-2: .5rem;
+  --spacing-figma-2\.5: .75rem;
+  --spacing-figma-3: 1rem;
+  --spacing-figma-4: 1.5rem;
+  --spacing-figma-5: 2rem;
+  --spacing-figma-6: 2.5rem;
+  --border-figma-1: 1px;
+  --border-figma-4: .25rem;
+  --transition-duration-figma-100: 100ms;
+  --transition-duration-figma-200: 200ms;
+  --transition-duration-figma-300: 300ms;
+  --opacity-figma-50: 0.5;
+  --opacity-figma-disabled: 0.3;
+  --z-index-figma-1: 1;
+  --z-index-figma-2: 2;
+  --z-index-figma-dropdown: 10;
+  --z-index-figma-modal: 50;
+  --z-index-figma-tooltip: 100;
+}
+
+@theme inline {
+  --shadow-figma-elevation-100: var(--figma-elevation-100);
+  --shadow-figma-elevation-200: var(--figma-elevation-200);
+  --shadow-figma-elevation-300: var(--figma-elevation-300);
+  --shadow-figma-elevation-400: var(--figma-elevation-400);
+  --shadow-figma-elevation-500: var(--figma-elevation-500);
+  --shadow-figma-tooltip: var(--figma-elevation-300);
+  --shadow-figma-menu: var(--figma-elevation-400);
+  --shadow-figma-modal: var(--figma-elevation-500);
+  --shadow-figma-slider: 0 1px 3px 0 #0000001a, 0 3px 8px 0 #0000001a, 0 0 0.5px 0 #0000002e, inset 0 0 0 0.5px #0000001a;
+  --shadow-figma-hud: 0px 5px 17px rgba(0, 0, 0, 0.2), 0px 2px 7px rgba(0, 0, 0, 0.15);
+}
+
+.devmode, .figma-light .devmode, .devmode .figma-light, .devmode.figma-light {
+  --figma-color-bg: #ffffff;
+  --figma-color-bg-assistive: #ff24bd;
+  --figma-color-bg-assistive-hover: #ea10ac;
+  --figma-color-bg-assistive-pressed: #ea10ac;
+  --figma-color-bg-assistive-secondary: #cb0b96;
+  --figma-color-bg-assistive-tertiary: #ffe0fc;
+  --figma-color-bg-brand: #14ae5c;
+  --figma-color-bg-brand-hover: #009951;
+  --figma-color-bg-brand-pressed: #009951;
+  --figma-color-bg-brand-secondary: #008043;
+  --figma-color-bg-brand-tertiary: #cff7d3;
+  --figma-color-bg-component: #9747ff;
+  --figma-color-bg-component-hover: #8638e5;
+  --figma-color-bg-component-pressed: #8638e5;
+  --figma-color-bg-component-secondary: #7c2bda;
+  --figma-color-bg-component-tertiary: #f1e5ff;
+  --figma-color-bg-danger: #f24822;
+  --figma-color-bg-danger-hover: #dc3412;
+  --figma-color-bg-danger-pressed: #dc3412;
+  --figma-color-bg-danger-secondary: #bd2915;
+  --figma-color-bg-danger-tertiary: #ffe2e0;
+  --figma-color-bg-design: #0d99ff;
+  --figma-color-bg-design-hover: #007be5;
+  --figma-color-bg-design-pressed: #007be5;
+  --figma-color-bg-design-secondary: #0768cf;
+  --figma-color-bg-design-tertiary: #e5f4ff;
+  --figma-color-bg-disabled: #d9d9d9;
+  --figma-color-bg-disabled-secondary: #b3b3b3;
+  --figma-color-bg-figjam: #9747ff;
+  --figma-color-bg-figjam-hover: #8638e5;
+  --figma-color-bg-figjam-pressed: #8638e5;
+  --figma-color-bg-figjam-secondary: #7c2bda;
+  --figma-color-bg-figjam-tertiary: #f1e5ff;
+  --figma-color-bg-handoff: #14ae5c;
+  --figma-color-bg-handoff-hover: #009951;
+  --figma-color-bg-handoff-pressed: #009951;
+  --figma-color-bg-handoff-secondary: #008043;
+  --figma-color-bg-handoff-tertiary: #daecdf;
+  --figma-color-bg-hover: #f5f5f5;
+  --figma-color-bg-info: #daecdf;
+  --figma-color-bg-inverse: #2c2c2c;
+  --figma-color-bg-measure: #f24822;
+  --figma-color-bg-measure-hover: #dc3412;
+  --figma-color-bg-measure-pressed: #dc3412;
+  --figma-color-bg-measure-secondary: #bd2915;
+  --figma-color-bg-measure-tertiary: #ffe2e0;
+  --figma-color-bg-menu: #1e1e1e;
+  --figma-color-bg-menu-disabled: #757575;
+  --figma-color-bg-menu-hover: #2c2c2c;
+  --figma-color-bg-menu-pressed: #2c2c2c;
+  --figma-color-bg-menu-secondary: #383838;
+  --figma-color-bg-menu-selected: #14ae5c;
+  --figma-color-bg-menu-selected-hover: #009951;
+  --figma-color-bg-menu-selected-pressed: #009951;
+  --figma-color-bg-menu-selected-secondary: #476656;
+  --figma-color-bg-menu-selected-tertiary: #476656;
+  --figma-color-bg-menu-tertiary: #444444;
+  --figma-color-bg-onselected: #aff4c6;
+  --figma-color-bg-onselected-hover: #aff4c6;
+  --figma-color-bg-onselected-pressed: #aff4c6;
+  --figma-color-bg-pressed: #f5f5f5;
+  --figma-color-bg-secondary: #f5f5f5;
+  --figma-color-bg-selected: #daecdf;
+  --figma-color-bg-selected-hover: #c3e0cc;
+  --figma-color-bg-selected-pressed: #c3e0cc;
+  --figma-color-bg-selected-secondary: #f1f8f2;
+  --figma-color-bg-selected-strong: #14ae5c;
+  --figma-color-bg-selected-tertiary: #f1f8f2;
+  --figma-color-bg-success: #14ae5c;
+  --figma-color-bg-success-hover: #009951;
+  --figma-color-bg-success-pressed: #009951;
+  --figma-color-bg-success-secondary: #008043;
+  --figma-color-bg-success-tertiary: #cff7d3;
+  --figma-color-bg-tertiary: #e6e6e6;
+  --figma-color-bg-toolbar: #2c2c2c;
+  --figma-color-bg-toolbar-disabled: #757575;
+  --figma-color-bg-toolbar-hover: #111111;
+  --figma-color-bg-toolbar-pressed: #111111;
+  --figma-color-bg-toolbar-secondary: #383838;
+  --figma-color-bg-toolbar-selected: #14ae5c;
+  --figma-color-bg-toolbar-selected-hover: #009951;
+  --figma-color-bg-toolbar-selected-pressed: #009951;
+  --figma-color-bg-toolbar-selected-secondary: #008043;
+  --figma-color-bg-toolbar-selected-tertiary: #14ae5c;
+  --figma-color-bg-toolbar-tertiary: #444444;
+  --figma-color-bg-tooltip: #1e1e1e;
+  --figma-color-bg-tooltip-disabled: #757575;
+  --figma-color-bg-tooltip-hover: #2c2c2c;
+  --figma-color-bg-tooltip-pressed: #2c2c2c;
+  --figma-color-bg-tooltip-secondary: #383838;
+  --figma-color-bg-tooltip-selected: #14ae5c;
+  --figma-color-bg-tooltip-selected-hover: #009951;
+  --figma-color-bg-tooltip-selected-pressed: #009951;
+  --figma-color-bg-tooltip-selected-secondary: #476656;
+  --figma-color-bg-tooltip-selected-tertiary: #476656;
+  --figma-color-bg-tooltip-tertiary: #444444;
+  --figma-color-bg-warning: #ffcd29;
+  --figma-color-bg-warning-hover: #ffc21a;
+  --figma-color-bg-warning-pressed: #ffc21a;
+  --figma-color-bg-warning-secondary: #fab815;
+  --figma-color-bg-warning-tertiary: #fff1c2;
+  --figma-color-bghoverondarkcanvas: #ffffff33;
+  --figma-color-bghoveronlightcanvas: #00000033;
+  --figma-color-bghovertransparent: #0000000d;
+  --figma-color-bgsecondaryoncanvas: #e6e6e6;
+  --figma-color-bgselectedarea: #14ae5c33;
+  --figma-color-bgtransparent: #ffffff99;
+  --figma-color-bgtransparent-secondary-hover: #0000001a;
+  --figma-color-bgtransparent-secondary-pressed: #00000026;
+  --figma-color-bgtransparentsecondary: #ffffff;
+  --figma-color-bgvoting: #ffcd29;
+  --figma-color-bgvotingsecondary: #fff1c2;
+  --figma-color-bgvotingtertiary: #fffbeb;
+  --figma-color-bgvotingwheeldial: #fffbeb;
+  --figma-color-bgvotingwheelhover: #fff1c2;
+  --figma-color-border: #e6e6e6;
+  --figma-color-border-assistive: #ffbdf2;
+  --figma-color-border-assistive-strong: #ea10ac;
+  --figma-color-border-brand: #aff4c6;
+  --figma-color-border-brand-strong: #009951;
+  --figma-color-border-component: #e4ccff;
+  --figma-color-border-component-hover: #9747ff;
+  --figma-color-border-component-strong: #8638e5;
+  --figma-color-border-danger: #ffc7c2;
+  --figma-color-border-danger-strong: #dc3412;
+  --figma-color-border-design: #bde3ff;
+  --figma-color-border-design-strong: #007be5;
+  --figma-color-border-disabled: #e6e6e6;
+  --figma-color-border-disabled-strong: #0000004d;
+  --figma-color-border-figjam: #e4ccff;
+  --figma-color-border-figjam-strong: #8638e5;
+  --figma-color-border-handoff: #aff4c6;
+  --figma-color-border-handoff-strong: #009951;
+  --figma-color-border-measure: #ffc7c2;
+  --figma-color-border-measure-strong: #dc3412;
+  --figma-color-border-menu: #383838;
+  --figma-color-border-menu-disabled: #383838;
+  --figma-color-border-menu-disabled-strong: #383838;
+  --figma-color-border-menu-onselected: #85e0a3;
+  --figma-color-border-menu-onselected-strong: #ffffff;
+  --figma-color-border-menu-selected: #14ae5c;
+  --figma-color-border-menu-selected-strong: #85e0a3;
+  --figma-color-border-menu-strong: #ffffff;
+  --figma-color-border-onassistive: #ea10ac;
+  --figma-color-border-onassistive-strong: #ffffff;
+  --figma-color-border-onbrand: #009951;
+  --figma-color-border-onbrand-strong: #ffffff;
+  --figma-color-border-oncomponent: #8638e5;
+  --figma-color-border-oncomponent-strong: #ffffff;
+  --figma-color-border-ondanger: #dc3412;
+  --figma-color-border-ondanger-strong: #ffffff;
+  --figma-color-border-ondesign: #007be5;
+  --figma-color-border-ondesign-strong: #ffffff;
+  --figma-color-border-onfigjam: #8638e5;
+  --figma-color-border-onfigjam-strong: #8638e5;
+  --figma-color-border-onmeasure: #dc3412;
+  --figma-color-border-onmeasure-strong: #ffffff;
+  --figma-color-border-onselected: #aff4c6;
+  --figma-color-border-onselected-strong: #000000e5;
+  --figma-color-border-onsuccess: #009951;
+  --figma-color-border-onsuccess-strong: #ffffff;
+  --figma-color-border-onwarning: #fab815;
+  --figma-color-border-onwarning-strong: #000000e5;
+  --figma-color-border-selected: #14ae5c;
+  --figma-color-border-selected-strong: #009951;
+  --figma-color-border-strong: #2c2c2c;
+  --figma-color-border-success: #aff4c6;
+  --figma-color-border-success-strong: #009951;
+  --figma-color-border-toolbar: #444444;
+  --figma-color-border-toolbar-disabled: #ffffff66;
+  --figma-color-border-toolbar-onselected: #ffffff;
+  --figma-color-border-toolbar-selected: #14ae5c;
+  --figma-color-border-toolbar-selected-strong: #85e0a3;
+  --figma-color-border-toolbar-strong: #ffffff;
+  --figma-color-border-tooltip: #383838;
+  --figma-color-border-tooltip-disabled: #383838;
+  --figma-color-border-tooltip-disabled-strong: #383838;
+  --figma-color-border-tooltip-onselected: #009951;
+  --figma-color-border-tooltip-onselected-strong: #ffffff;
+  --figma-color-border-tooltip-selected: #14ae5c;
+  --figma-color-border-tooltip-selected-strong: #85e0a3;
+  --figma-color-border-tooltip-strong: #ffffff;
+  --figma-color-border-warning: #ffe8a3;
+  --figma-color-border-warning-strong: #b86200;
+  --figma-color-bordertranslucent: #0000001a;
+  --figma-color-conditionalborder: #ffffff00;
+  --figma-color-icon: #000000e5;
+  --figma-color-icon-assistive: #ea10ac;
+  --figma-color-icon-assistive-pressed: #cb0b96;
+  --figma-color-icon-assistive-secondary: #ea10ac;
+  --figma-color-icon-assistive-tertiary: #ea10ac;
+  --figma-color-icon-brand: #009951;
+  --figma-color-icon-brand-pressed: #008043;
+  --figma-color-icon-brand-secondary: #85e0a3;
+  --figma-color-icon-brand-tertiary: #aff4c6;
+  --figma-color-icon-component: #8638e5;
+  --figma-color-icon-component-pressed: #7c2bda;
+  --figma-color-icon-component-secondary: #c5b2dc;
+  --figma-color-icon-component-tertiary: #c5b2dc;
+  --figma-color-icon-danger: #f24822;
+  --figma-color-icon-danger-hover: #bd2915;
+  --figma-color-icon-danger-pressed: #bd2915;
+  --figma-color-icon-danger-secondary: #f24822;
+  --figma-color-icon-danger-secondary-hover: #f24822;
+  --figma-color-icon-danger-tertiary: #f24822;
+  --figma-color-icon-design: #007be5;
+  --figma-color-icon-design-pressed: #0768cf;
+  --figma-color-icon-design-secondary: #007be5;
+  --figma-color-icon-design-tertiary: #007be5;
+  --figma-color-icon-disabled: #0000004d;
+  --figma-color-icon-figjam: #8638e5;
+  --figma-color-icon-figjam-pressed: #7c2bda;
+  --figma-color-icon-figjam-secondary: #c5b2dc;
+  --figma-color-icon-figjam-tertiary: #c5b2dc;
+  --figma-color-icon-handoff: #009951;
+  --figma-color-icon-handoff-pressed: #008043;
+  --figma-color-icon-handoff-secondary: #009951;
+  --figma-color-icon-handoff-tertiary: #009951;
+  --figma-color-icon-hover: #000000e5;
+  --figma-color-icon-measure: #f24822;
+  --figma-color-icon-measure-hover: #bd2915;
+  --figma-color-icon-measure-pressed: #bd2915;
+  --figma-color-icon-measure-secondary: #f24822;
+  --figma-color-icon-measure-secondary-hover: #f24822;
+  --figma-color-icon-measure-tertiary: #f24822;
+  --figma-color-icon-menu: #ffffff;
+  --figma-color-icon-menu-danger: #f24822;
+  --figma-color-icon-menu-disabled: #ffffff66;
+  --figma-color-icon-menu-hover: #ffffff;
+  --figma-color-icon-menu-ondisabled: #1e1e1e;
+  --figma-color-icon-menu-onselected: #ffffff;
+  --figma-color-icon-menu-pressed: #14ae5c;
+  --figma-color-icon-menu-secondary: #ffffffb2;
+  --figma-color-icon-menu-secondary-hover: #ffffff;
+  --figma-color-icon-menu-selected: #85e0a3;
+  --figma-color-icon-menu-selected-secondary: #85e0a3;
+  --figma-color-icon-menu-selected-tertiary: #85e0a3;
+  --figma-color-icon-menu-tertiary: #ffffff66;
+  --figma-color-icon-menu-tertiary-hover: #ffffff;
+  --figma-color-icon-menu-warning: #ffcd29;
+  --figma-color-icon-onassistive: #ffffff;
+  --figma-color-icon-onassistive-secondary: #ffffffcc;
+  --figma-color-icon-onassistive-tertiary: #ffffff66;
+  --figma-color-icon-onbrand: #ffffff;
+  --figma-color-icon-onbrand-secondary: #ffffffcc;
+  --figma-color-icon-onbrand-tertiary: #ffffff66;
+  --figma-color-icon-oncomponent: #ffffff;
+  --figma-color-icon-oncomponent-secondary: #ffffffcc;
+  --figma-color-icon-oncomponent-tertiary: #ffffff66;
+  --figma-color-icon-ondanger: #ffffff;
+  --figma-color-icon-ondanger-secondary: #ffffffcc;
+  --figma-color-icon-ondanger-tertiary: #ffffff66;
+  --figma-color-icon-ondesign: #ffffff;
+  --figma-color-icon-ondesign-secondary: #ffffffcc;
+  --figma-color-icon-ondesign-tertiary: #ffffff66;
+  --figma-color-icon-ondisabled: #ffffff;
+  --figma-color-icon-onfigjam: #ffffff;
+  --figma-color-icon-onfigjam-secondary: #ffffffcc;
+  --figma-color-icon-onfigjam-tertiary: #ffffff66;
+  --figma-color-icon-oninverse: #ffffffe5;
+  --figma-color-icon-onmeasure: #ffffff;
+  --figma-color-icon-onmeasure-secondary: #ffffffcc;
+  --figma-color-icon-onmeasure-tertiary: #ffffff66;
+  --figma-color-icon-onselected: #000000e5;
+  --figma-color-icon-onselected-secondary: #00000080;
+  --figma-color-icon-onselected-strong: #ffffff;
+  --figma-color-icon-onselected-tertiary: #0000004d;
+  --figma-color-icon-onsuccess: #ffffff;
+  --figma-color-icon-onsuccess-secondary: #ffffffcc;
+  --figma-color-icon-onsuccess-tertiary: #ffffff66;
+  --figma-color-icon-onwarning: #000000e5;
+  --figma-color-icon-onwarning-secondary: #00000080;
+  --figma-color-icon-onwarning-tertiary: #0000004d;
+  --figma-color-icon-pressed: #009951;
+  --figma-color-icon-secondary: #00000080;
+  --figma-color-icon-secondary-hover: #000000e5;
+  --figma-color-icon-selected: #009951;
+  --figma-color-icon-selected-secondary: #009951;
+  --figma-color-icon-selected-tertiary: #009951;
+  --figma-color-icon-success: #14ae5c;
+  --figma-color-icon-success-pressed: #008043;
+  --figma-color-icon-success-secondary: #14ae5c;
+  --figma-color-icon-success-tertiary: #14ae5c;
+  --figma-color-icon-tertiary: #0000004d;
+  --figma-color-icon-tertiary-hover: #000000e5;
+  --figma-color-icon-toolbar: #ffffff;
+  --figma-color-icon-toolbar-danger: #f24822;
+  --figma-color-icon-toolbar-disabled: #ffffff66;
+  --figma-color-icon-toolbar-hover: #ffffff;
+  --figma-color-icon-toolbar-ondisabled: #2c2c2c;
+  --figma-color-icon-toolbar-onselected: #ffffff;
+  --figma-color-icon-toolbar-pressed: #14ae5c;
+  --figma-color-icon-toolbar-secondary: #ffffffb2;
+  --figma-color-icon-toolbar-secondary-hover: #ffffff;
+  --figma-color-icon-toolbar-selected: #85e0a3;
+  --figma-color-icon-toolbar-selected-secondary: #85e0a3;
+  --figma-color-icon-toolbar-selected-tertiary: #85e0a3;
+  --figma-color-icon-toolbar-tertiary: #ffffff66;
+  --figma-color-icon-toolbar-tertiary-hover: #ffffff;
+  --figma-color-icon-toolbar-warning: #ffcd29;
+  --figma-color-icon-tooltip: #ffffff;
+  --figma-color-icon-tooltip-danger: #f24822;
+  --figma-color-icon-tooltip-disabled: #ffffff66;
+  --figma-color-icon-tooltip-hover: #ffffff;
+  --figma-color-icon-tooltip-ondisabled: #1e1e1e;
+  --figma-color-icon-tooltip-onselected: #ffffff;
+  --figma-color-icon-tooltip-pressed: #14ae5c;
+  --figma-color-icon-tooltip-secondary: #ffffffb2;
+  --figma-color-icon-tooltip-secondary-hover: #ffffff;
+  --figma-color-icon-tooltip-selected: #85e0a3;
+  --figma-color-icon-tooltip-selected-secondary: #85e0a3;
+  --figma-color-icon-tooltip-selected-tertiary: #85e0a3;
+  --figma-color-icon-tooltip-tertiary: #ffffff66;
+  --figma-color-icon-tooltip-tertiary-hover: #ffffff;
+  --figma-color-icon-tooltip-warning: #ffcd29;
+  --figma-color-icon-warning: #ffcd29;
+  --figma-color-icon-warning-pressed: #b86200;
+  --figma-color-icon-warning-secondary: #ffcd29;
+  --figma-color-icon-warning-tertiary: #ffcd29;
+  --figma-color-icondesignfilesecondary: #80caff;
+  --figma-color-iconfigjamfilesecondary: #d9b8ff;
+  --figma-color-iconondarkcanvas: #ffffffe5;
+  --figma-color-icononlightcanvas: #000000e5;
+  --figma-color-icononvoting: #000000e5;
+  --figma-color-iconprototypefile: #d9d9d9;
+  --figma-color-iconprototypefilesecondary: #2c2c2c;
+  --figma-color-iconpublishedfile: #2c2c2c;
+  --figma-color-iconpublishedfilesecondary: #757575;
+  --figma-color-loading: #0000001a;
+  --figma-color-loadingmenu: #ffffff1a;
+  --figma-color-loadingsecondary: #0000000d;
+  --figma-color-loadingsecondarymenu: #ffffff0d;
+  --figma-color-modalbackdrop: #00000080;
+  --figma-color-multiplayerblue: #007be5;
+  --figma-color-multiplayerbluehover: #0768cf;
+  --figma-color-multiplayerbluesecondary: #034ac1;
+  --figma-color-multiplayergreen: #14ae5c;
+  --figma-color-multiplayergreenhover: #009951;
+  --figma-color-multiplayergreensecondary: #036838;
+  --figma-color-multiplayergrey: #667799;
+  --figma-color-multiplayergreyhover: #536383;
+  --figma-color-multiplayergreysecondary: #394360;
+  --figma-color-multiplayerpink: #ff24bd;
+  --figma-color-multiplayerpinkhover: #ea10ac;
+  --figma-color-multiplayerpinksecondary: #971172;
+  --figma-color-multiplayerpurple: #9747ff;
+  --figma-color-multiplayerpurplehover: #8638e5;
+  --figma-color-multiplayerpurplesecondary: #681abb;
+  --figma-color-multiplayerred: #f24822;
+  --figma-color-multiplayerredhover: #dc3412;
+  --figma-color-multiplayerredsecondary: #9f1f18;
+  --figma-color-multiplayeryellow: #ffcd29;
+  --figma-color-multiplayeryellowhover: #ffc21a;
+  --figma-color-multiplayeryellowsecondary: #eba611;
+  --figma-color-nodehandle: #80caff;
+  --figma-color-prototypeloadingbackdrop: #000000e5;
+  --figma-color-scrollbar: #b3b3b380;
+  --figma-color-shadow: #00000026;
+  --figma-color-text: #000000e5;
+  --figma-color-text-assistive: #ea10ac;
+  --figma-color-text-assistive-pressed: #cb0b96;
+  --figma-color-text-assistive-secondary: #ea10ac;
+  --figma-color-text-assistive-tertiary: #ea10ac;
+  --figma-color-text-brand: #009951;
+  --figma-color-text-brand-secondary: #009951;
+  --figma-color-text-brand-tertiary: #009951;
+  --figma-color-text-component: #8638e5;
+  --figma-color-text-component-pressed: #7c2bda;
+  --figma-color-text-component-secondary: #c5b2dc;
+  --figma-color-text-component-tertiary: #c5b2dc;
+  --figma-color-text-danger: #dc3412;
+  --figma-color-text-danger-secondary: #dc3412;
+  --figma-color-text-danger-tertiary: #dc3412;
+  --figma-color-text-design: #007be5;
+  --figma-color-text-design-pressed: #0768cf;
+  --figma-color-text-design-secondary: #007be5;
+  --figma-color-text-design-tertiary: #007be5;
+  --figma-color-text-disabled: #0000004d;
+  --figma-color-text-figjam: #8638e5;
+  --figma-color-text-figjam-pressed: #7c2bda;
+  --figma-color-text-figjam-secondary: #c5b2dc;
+  --figma-color-text-figjam-tertiary: #c5b2dc;
+  --figma-color-text-handoff: #009951;
+  --figma-color-text-handoff-secondary: #009951;
+  --figma-color-text-handoff-tertiary: #009951;
+  --figma-color-text-hover: #000000e5;
+  --figma-color-text-measure: #dc3412;
+  --figma-color-text-measure-secondary: #dc3412;
+  --figma-color-text-measure-tertiary: #dc3412;
+  --figma-color-text-menu: #ffffff;
+  --figma-color-text-menu-danger: #f24822;
+  --figma-color-text-menu-disabled: #ffffff66;
+  --figma-color-text-menu-hover: #ffffff;
+  --figma-color-text-menu-ondisabled: #1e1e1e;
+  --figma-color-text-menu-onselected: #ffffff;
+  --figma-color-text-menu-secondary: #ffffffb2;
+  --figma-color-text-menu-secondary-hover: #ffffff;
+  --figma-color-text-menu-selected: #85e0a3;
+  --figma-color-text-menu-selected-secondary: #85e0a3;
+  --figma-color-text-menu-selected-tertiary: #85e0a3;
+  --figma-color-text-menu-tertiary: #ffffff66;
+  --figma-color-text-menu-tertiary-hover: #ffffff;
+  --figma-color-text-menu-warning: #ffd966;
+  --figma-color-text-onassistive: #ffffff;
+  --figma-color-text-onassistive-secondary: #ffffffcc;
+  --figma-color-text-onassistive-tertiary: #ffffff66;
+  --figma-color-text-onbrand: #ffffff;
+  --figma-color-text-onbrand-secondary: #ffffffcc;
+  --figma-color-text-onbrand-tertiary: #ffffff66;
+  --figma-color-text-oncomponent: #ffffff;
+  --figma-color-text-oncomponent-secondary: #ffffffcc;
+  --figma-color-text-oncomponent-tertiary: #ffffff66;
+  --figma-color-text-ondanger: #ffffff;
+  --figma-color-text-ondanger-secondary: #ffffffcc;
+  --figma-color-text-ondanger-tertiary: #ffffff66;
+  --figma-color-text-ondesign: #ffffff;
+  --figma-color-text-ondesign-secondary: #ffffffcc;
+  --figma-color-text-ondesign-tertiary: #ffffff66;
+  --figma-color-text-ondisabled: #ffffff;
+  --figma-color-text-onfigjam: #ffffff;
+  --figma-color-text-onfigjam-secondary: #ffffffcc;
+  --figma-color-text-onfigjam-tertiary: #ffffff66;
+  --figma-color-text-oninverse: #ffffffe5;
+  --figma-color-text-onmeasure: #ffffff;
+  --figma-color-text-onmeasure-secondary: #ffffffcc;
+  --figma-color-text-onmeasure-tertiary: #ffffff66;
+  --figma-color-text-onselected: #000000e5;
+  --figma-color-text-onselected-secondary: #00000080;
+  --figma-color-text-onselected-strong: #ffffff;
+  --figma-color-text-onselected-tertiary: #0000004d;
+  --figma-color-text-onsuccess: #ffffff;
+  --figma-color-text-onsuccess-secondary: #ffffffcc;
+  --figma-color-text-onsuccess-tertiary: #ffffff66;
+  --figma-color-text-onwarning: #000000e5;
+  --figma-color-text-onwarning-secondary: #00000080;
+  --figma-color-text-onwarning-tertiary: #0000004d;
+  --figma-color-text-secondary: #00000080;
+  --figma-color-text-secondary-hover: #000000e5;
+  --figma-color-text-selected: #009951;
+  --figma-color-text-selected-secondary: #009951;
+  --figma-color-text-selected-tertiary: #009951;
+  --figma-color-text-success: #009951;
+  --figma-color-text-success-secondary: #009951;
+  --figma-color-text-success-tertiary: #009951;
+  --figma-color-text-tertiary: #0000004d;
+  --figma-color-text-tertiary-hover: #000000e5;
+  --figma-color-text-toolbar: #ffffff;
+  --figma-color-text-toolbar-danger: #ffafa3;
+  --figma-color-text-toolbar-disabled: #ffffff66;
+  --figma-color-text-toolbar-hover: #ffffff;
+  --figma-color-text-toolbar-ondisabled: #2c2c2c;
+  --figma-color-text-toolbar-onselected: #ffffff;
+  --figma-color-text-toolbar-secondary: #ffffffb2;
+  --figma-color-text-toolbar-secondary-hover: #ffffff;
+  --figma-color-text-toolbar-selected: #85e0a3;
+  --figma-color-text-toolbar-selected-secondary: #85e0a3;
+  --figma-color-text-toolbar-selected-tertiary: #85e0a3;
+  --figma-color-text-toolbar-tertiary: #ffffff66;
+  --figma-color-text-toolbar-tertiary-hover: #ffffff;
+  --figma-color-text-toolbar-warning: #ffd966;
+  --figma-color-text-tooltip: #ffffff;
+  --figma-color-text-tooltip-danger: #ffafa3;
+  --figma-color-text-tooltip-disabled: #ffffff66;
+  --figma-color-text-tooltip-hover: #ffffff;
+  --figma-color-text-tooltip-ondisabled: #1e1e1e;
+  --figma-color-text-tooltip-onselected: #ffffff;
+  --figma-color-text-tooltip-secondary: #ffffffb2;
+  --figma-color-text-tooltip-secondary-hover: #ffffff;
+  --figma-color-text-tooltip-selected: #85e0a3;
+  --figma-color-text-tooltip-selected-secondary: #85e0a3;
+  --figma-color-text-tooltip-selected-tertiary: #85e0a3;
+  --figma-color-text-tooltip-tertiary: #ffffff66;
+  --figma-color-text-tooltip-tertiary-hover: #ffffff;
+  --figma-color-text-tooltip-warning: #ffd966;
+  --figma-color-text-warning: #b86200;
+  --figma-color-text-warning-secondary: #b86200;
+  --figma-color-text-warning-tertiary: #b86200;
+  --figma-color-texthighlight: #14ae5c66;
+  --figma-color-textondarkcanvas: #ffffffe5;
+  --figma-color-textondarkcanvassecondary: #ffffffb2;
+  --figma-color-textonlightcanvas: #000000e5;
+  --figma-color-textonlightcanvassecondary: #0000004d;
+  --figma-color-textonmultiplayerblue: #ffffff;
+  --figma-color-textonmultiplayergreen: #ffffff;
+  --figma-color-textonmultiplayergrey: #ffffff;
+  --figma-color-textonmultiplayerpink: #ffffff;
+  --figma-color-textonmultiplayerpurple: #ffffff;
+  --figma-color-textonmultiplayerred: #ffffff;
+  --figma-color-textonmultiplayeryellow: #000000e5;
+  --figma-color-textonvoting: #000000e5;
+  --figma-elevation-100: 0px 1px 3px rgba(0, 0, 0, 0.15), 0px 0px 0.5px rgba(0, 0, 0, 0.3);
+  --figma-elevation-200: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 3px 8px rgba(0, 0, 0, 0.1), 0px 0px 0.5px rgba(0, 0, 0, 0.18);
+  --figma-elevation-300: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 5px 12px rgba(0, 0, 0, 0.13), 0px 0px 0.5px rgba(0, 0, 0, 0.15);
+  --figma-elevation-400: 0px 2px 5px rgba(0, 0, 0, 0.15), 0px 10px 16px rgba(0, 0, 0, 0.12), 0px 0px 0.5px rgba(0, 0, 0, 0.12);
+  --figma-elevation-500: 0px 2px 5px rgba(0, 0, 0, 0.15), 0px 10px 24px rgba(0, 0, 0, 0.18), 0px 0px 0.5px rgba(0, 0, 0, 0.08);
+  --figma-shadow-tooltip: var(--figma-elevation-300);
+  --figma-shadow-menu: var(--figma-elevation-400);
+  --figma-shadow-modal: var(--figma-elevation-500);
+}
+
+.figma-dark .devmode, .devmode .figma-dark, .devmode.figma-dark {
+  --figma-color-bg: #2c2c2c;
+  --figma-color-bg-assistive: #f316b0;
+  --figma-color-bg-assistive-hover: #d01b9c;
+  --figma-color-bg-assistive-pressed: #d01b9c;
+  --figma-color-bg-assistive-secondary: #96207a;
+  --figma-color-bg-assistive-tertiary: #68275e;
+  --figma-color-bg-brand: #198f51;
+  --figma-color-bg-brand-hover: #078348;
+  --figma-color-bg-brand-pressed: #078348;
+  --figma-color-bg-brand-secondary: #0a5c35;
+  --figma-color-bg-brand-tertiary: #476656;
+  --figma-color-bg-component: #8a38f5;
+  --figma-color-bg-component-hover: #7a2ed6;
+  --figma-color-bg-component-pressed: #7a2ed6;
+  --figma-color-bg-component-secondary: #652ca8;
+  --figma-color-bg-component-tertiary: #473956;
+  --figma-color-bg-danger: #e03e1a;
+  --figma-color-bg-danger-hover: #c4381c;
+  --figma-color-bg-danger-pressed: #c4381c;
+  --figma-color-bg-danger-secondary: #963323;
+  --figma-color-bg-danger-tertiary: #60332a;
+  --figma-color-bg-design: #0c8ce9;
+  --figma-color-bg-design-hover: #0a6dc2;
+  --figma-color-bg-design-pressed: #0a6dc2;
+  --figma-color-bg-design-secondary: #105cad;
+  --figma-color-bg-design-tertiary: #394360;
+  --figma-color-bg-disabled: #757575;
+  --figma-color-bg-disabled-secondary: #b3b3b3;
+  --figma-color-bg-figjam: #8a38f5;
+  --figma-color-bg-figjam-hover: #7a2ed6;
+  --figma-color-bg-figjam-pressed: #7a2ed6;
+  --figma-color-bg-figjam-secondary: #652ca8;
+  --figma-color-bg-figjam-tertiary: #473956;
+  --figma-color-bg-handoff: #198f51;
+  --figma-color-bg-handoff-hover: #078348;
+  --figma-color-bg-handoff-pressed: #078348;
+  --figma-color-bg-handoff-secondary: #0a5c35;
+  --figma-color-bg-handoff-tertiary: #476656;
+  --figma-color-bg-hover: #383838;
+  --figma-color-bg-info: #476656;
+  --figma-color-bg-inverse: #ffffff;
+  --figma-color-bg-measure: #e03e1a;
+  --figma-color-bg-measure-hover: #c4381c;
+  --figma-color-bg-measure-pressed: #c4381c;
+  --figma-color-bg-measure-secondary: #963323;
+  --figma-color-bg-measure-tertiary: #60332a;
+  --figma-color-bg-menu: #1e1e1e;
+  --figma-color-bg-menu-disabled: #757575;
+  --figma-color-bg-menu-hover: #2c2c2c;
+  --figma-color-bg-menu-pressed: #2c2c2c;
+  --figma-color-bg-menu-secondary: #383838;
+  --figma-color-bg-menu-selected: #198f51;
+  --figma-color-bg-menu-selected-hover: #078348;
+  --figma-color-bg-menu-selected-pressed: #078348;
+  --figma-color-bg-menu-selected-secondary: #476656;
+  --figma-color-bg-menu-selected-tertiary: #476656;
+  --figma-color-bg-menu-tertiary: #444444;
+  --figma-color-bg-onselected: #678e79;
+  --figma-color-bg-onselected-hover: #678e79;
+  --figma-color-bg-onselected-pressed: #678e79;
+  --figma-color-bg-pressed: #383838;
+  --figma-color-bg-secondary: #383838;
+  --figma-color-bg-selected: #517361;
+  --figma-color-bg-selected-hover: #5c806d;
+  --figma-color-bg-selected-pressed: #5c806d;
+  --figma-color-bg-selected-secondary: #476656;
+  --figma-color-bg-selected-strong: #198f51;
+  --figma-color-bg-selected-tertiary: #476656;
+  --figma-color-bg-success: #198f51;
+  --figma-color-bg-success-hover: #078348;
+  --figma-color-bg-success-pressed: #078348;
+  --figma-color-bg-success-secondary: #0a5c35;
+  --figma-color-bg-success-tertiary: #476656;
+  --figma-color-bg-tertiary: #444444;
+  --figma-color-bg-toolbar: #2c2c2c;
+  --figma-color-bg-toolbar-disabled: #757575;
+  --figma-color-bg-toolbar-hover: #111111;
+  --figma-color-bg-toolbar-pressed: #111111;
+  --figma-color-bg-toolbar-secondary: #383838;
+  --figma-color-bg-toolbar-selected: #198f51;
+  --figma-color-bg-toolbar-selected-hover: #078348;
+  --figma-color-bg-toolbar-selected-pressed: #078348;
+  --figma-color-bg-toolbar-selected-secondary: #0a5c35;
+  --figma-color-bg-toolbar-selected-tertiary: #198f51;
+  --figma-color-bg-toolbar-tertiary: #444444;
+  --figma-color-bg-tooltip: #1e1e1e;
+  --figma-color-bg-tooltip-disabled: #757575;
+  --figma-color-bg-tooltip-hover: #2c2c2c;
+  --figma-color-bg-tooltip-pressed: #2c2c2c;
+  --figma-color-bg-tooltip-secondary: #383838;
+  --figma-color-bg-tooltip-selected: #198f51;
+  --figma-color-bg-tooltip-selected-hover: #078348;
+  --figma-color-bg-tooltip-selected-pressed: #078348;
+  --figma-color-bg-tooltip-selected-secondary: #476656;
+  --figma-color-bg-tooltip-selected-tertiary: #476656;
+  --figma-color-bg-tooltip-tertiary: #444444;
+  --figma-color-bg-warning: #f3c11b;
+  --figma-color-bg-warning-hover: #f2b50d;
+  --figma-color-bg-warning-pressed: #f2b50d;
+  --figma-color-bg-warning-secondary: #e4a711;
+  --figma-color-bg-warning-tertiary: #5c4100;
+  --figma-color-bghoverondarkcanvas: #ffffff33;
+  --figma-color-bghoveronlightcanvas: #00000033;
+  --figma-color-bghovertransparent: #ffffff0d;
+  --figma-color-bgsecondaryoncanvas: #111111;
+  --figma-color-bgselectedarea: #14ae5c33;
+  --figma-color-bgtransparent: #00000099;
+  --figma-color-bgtransparent-secondary-hover: #ffffff1a;
+  --figma-color-bgtransparent-secondary-pressed: #ffffff26;
+  --figma-color-bgtransparentsecondary: #ffffff26;
+  --figma-color-bgvoting: #f3c11b;
+  --figma-color-bgvotingsecondary: #fbe8ad;
+  --figma-color-bgvotingtertiary: #fdf7dd;
+  --figma-color-bgvotingwheeldial: #fdf7dd;
+  --figma-color-bgvotingwheelhover: #fbe8ad;
+  --figma-color-border: #444444;
+  --figma-color-border-assistive: #96207a;
+  --figma-color-border-assistive-strong: #fc9ce0;
+  --figma-color-border-brand: #0a5c35;
+  --figma-color-border-brand-strong: #79d297;
+  --figma-color-border-component: #652ca8;
+  --figma-color-border-component-hover: #8a38f5;
+  --figma-color-border-component-strong: #d6b6fb;
+  --figma-color-border-danger: #963323;
+  --figma-color-border-danger-strong: #fca397;
+  --figma-color-border-design: #105cad;
+  --figma-color-border-design-strong: #7cc4f8;
+  --figma-color-border-disabled: #444444;
+  --figma-color-border-disabled-strong: #ffffff66;
+  --figma-color-border-figjam: #652ca8;
+  --figma-color-border-figjam-strong: #d1a8ff;
+  --figma-color-border-handoff: #0a5c35;
+  --figma-color-border-handoff-strong: #79d297;
+  --figma-color-border-measure: #963323;
+  --figma-color-border-measure-strong: #fca397;
+  --figma-color-border-menu: #383838;
+  --figma-color-border-menu-disabled: #383838;
+  --figma-color-border-menu-disabled-strong: #383838;
+  --figma-color-border-menu-onselected: #79d297;
+  --figma-color-border-menu-onselected-strong: #ffffff;
+  --figma-color-border-menu-selected: #198f51;
+  --figma-color-border-menu-selected-strong: #79d297;
+  --figma-color-border-menu-strong: #ffffff;
+  --figma-color-border-onassistive: #d01b9c;
+  --figma-color-border-onassistive-strong: #ffffff;
+  --figma-color-border-onbrand: #078348;
+  --figma-color-border-onbrand-strong: #ffffff;
+  --figma-color-border-oncomponent: #7a2ed6;
+  --figma-color-border-oncomponent-strong: #ffffff;
+  --figma-color-border-ondanger: #c4381c;
+  --figma-color-border-ondanger-strong: #ffffff;
+  --figma-color-border-ondesign: #0a6dc2;
+  --figma-color-border-ondesign-strong: #ffffff;
+  --figma-color-border-onfigjam: #7a2ed6;
+  --figma-color-border-onfigjam-strong: #7a2ed6;
+  --figma-color-border-onmeasure: #c4381c;
+  --figma-color-border-onmeasure-strong: #ffffff;
+  --figma-color-border-onselected: #678e79;
+  --figma-color-border-onselected-strong: #ffffffe5;
+  --figma-color-border-onsuccess: #078348;
+  --figma-color-border-onsuccess-strong: #ffffff;
+  --figma-color-border-onwarning: #e4a711;
+  --figma-color-border-onwarning-strong: #000000e5;
+  --figma-color-border-selected: #198f51;
+  --figma-color-border-selected-strong: #79d297;
+  --figma-color-border-strong: #ffffffe5;
+  --figma-color-border-success: #0a5c35;
+  --figma-color-border-success-strong: #79d297;
+  --figma-color-border-toolbar: #444444;
+  --figma-color-border-toolbar-disabled: #ffffff66;
+  --figma-color-border-toolbar-onselected: #ffffff;
+  --figma-color-border-toolbar-selected: #198f51;
+  --figma-color-border-toolbar-selected-strong: #79d297;
+  --figma-color-border-toolbar-strong: #ffffff;
+  --figma-color-border-tooltip: #383838;
+  --figma-color-border-tooltip-disabled: #383838;
+  --figma-color-border-tooltip-disabled-strong: #383838;
+  --figma-color-border-tooltip-onselected: #078348;
+  --figma-color-border-tooltip-onselected-strong: #ffffff;
+  --figma-color-border-tooltip-selected: #198f51;
+  --figma-color-border-tooltip-selected-strong: #79d297;
+  --figma-color-border-tooltip-strong: #ffffff;
+  --figma-color-border-warning: #925711;
+  --figma-color-border-warning-strong: #f7d15f;
+  --figma-color-bordertranslucent: #ffffff1a;
+  --figma-color-conditionalborder: #444444;
+  --figma-color-icon: #ffffff;
+  --figma-color-icon-assistive: #fc9ce0;
+  --figma-color-icon-assistive-pressed: #fbb1ed;
+  --figma-color-icon-assistive-secondary: #fc9ce0;
+  --figma-color-icon-assistive-tertiary: #fc9ce0;
+  --figma-color-icon-brand: #79d297;
+  --figma-color-icon-brand-pressed: #198f51;
+  --figma-color-icon-brand-secondary: #078348;
+  --figma-color-icon-brand-tertiary: #476656;
+  --figma-color-icon-component: #d1a8ff;
+  --figma-color-icon-component-pressed: #d6b6fb;
+  --figma-color-icon-component-secondary: #7f699b;
+  --figma-color-icon-component-tertiary: #7f699b;
+  --figma-color-icon-danger: #e03e1a;
+  --figma-color-icon-danger-hover: #fbbcb6;
+  --figma-color-icon-danger-pressed: #fbbcb6;
+  --figma-color-icon-danger-secondary: #e03e1a;
+  --figma-color-icon-danger-secondary-hover: #e03e1a;
+  --figma-color-icon-danger-tertiary: #e03e1a;
+  --figma-color-icon-design: #7cc4f8;
+  --figma-color-icon-design-pressed: #a8d7fa;
+  --figma-color-icon-design-secondary: #7cc4f8;
+  --figma-color-icon-design-tertiary: #7cc4f8;
+  --figma-color-icon-disabled: #ffffff66;
+  --figma-color-icon-figjam: #d1a8ff;
+  --figma-color-icon-figjam-pressed: #d6b6fb;
+  --figma-color-icon-figjam-secondary: #7f699b;
+  --figma-color-icon-figjam-tertiary: #7f699b;
+  --figma-color-icon-handoff: #79d297;
+  --figma-color-icon-handoff-pressed: #a1e8b9;
+  --figma-color-icon-handoff-secondary: #79d297;
+  --figma-color-icon-handoff-tertiary: #79d297;
+  --figma-color-icon-hover: #ffffff;
+  --figma-color-icon-measure: #e03e1a;
+  --figma-color-icon-measure-hover: #fbbcb6;
+  --figma-color-icon-measure-pressed: #fbbcb6;
+  --figma-color-icon-measure-secondary: #e03e1a;
+  --figma-color-icon-measure-secondary-hover: #e03e1a;
+  --figma-color-icon-measure-tertiary: #e03e1a;
+  --figma-color-icon-menu: #ffffff;
+  --figma-color-icon-menu-danger: #e03e1a;
+  --figma-color-icon-menu-disabled: #ffffff66;
+  --figma-color-icon-menu-hover: #ffffff;
+  --figma-color-icon-menu-ondisabled: #1e1e1e;
+  --figma-color-icon-menu-onselected: #ffffff;
+  --figma-color-icon-menu-pressed: #198f51;
+  --figma-color-icon-menu-secondary: #ffffffb2;
+  --figma-color-icon-menu-secondary-hover: #ffffff;
+  --figma-color-icon-menu-selected: #79d297;
+  --figma-color-icon-menu-selected-secondary: #79d297;
+  --figma-color-icon-menu-selected-tertiary: #79d297;
+  --figma-color-icon-menu-tertiary: #ffffff66;
+  --figma-color-icon-menu-tertiary-hover: #ffffff;
+  --figma-color-icon-menu-warning: #f3c11b;
+  --figma-color-icon-onassistive: #ffffff;
+  --figma-color-icon-onassistive-secondary: #ffffffcc;
+  --figma-color-icon-onassistive-tertiary: #ffffff66;
+  --figma-color-icon-onbrand: #ffffff;
+  --figma-color-icon-onbrand-secondary: #ffffffcc;
+  --figma-color-icon-onbrand-tertiary: #ffffff66;
+  --figma-color-icon-oncomponent: #ffffff;
+  --figma-color-icon-oncomponent-secondary: #ffffffcc;
+  --figma-color-icon-oncomponent-tertiary: #ffffff66;
+  --figma-color-icon-ondanger: #ffffff;
+  --figma-color-icon-ondanger-secondary: #ffffffcc;
+  --figma-color-icon-ondanger-tertiary: #ffffff66;
+  --figma-color-icon-ondesign: #ffffff;
+  --figma-color-icon-ondesign-secondary: #ffffffcc;
+  --figma-color-icon-ondesign-tertiary: #ffffff66;
+  --figma-color-icon-ondisabled: #2c2c2c;
+  --figma-color-icon-onfigjam: #ffffff;
+  --figma-color-icon-onfigjam-secondary: #ffffffcc;
+  --figma-color-icon-onfigjam-tertiary: #ffffff66;
+  --figma-color-icon-oninverse: #000000e5;
+  --figma-color-icon-onmeasure: #ffffff;
+  --figma-color-icon-onmeasure-secondary: #ffffffcc;
+  --figma-color-icon-onmeasure-tertiary: #ffffff66;
+  --figma-color-icon-onselected: #ffffff;
+  --figma-color-icon-onselected-secondary: #ffffffb2;
+  --figma-color-icon-onselected-strong: #ffffff;
+  --figma-color-icon-onselected-tertiary: #ffffff66;
+  --figma-color-icon-onsuccess: #ffffff;
+  --figma-color-icon-onsuccess-secondary: #ffffffcc;
+  --figma-color-icon-onsuccess-tertiary: #ffffff66;
+  --figma-color-icon-onwarning: #000000e5;
+  --figma-color-icon-onwarning-secondary: #00000080;
+  --figma-color-icon-onwarning-tertiary: #0000004d;
+  --figma-color-icon-pressed: #078348;
+  --figma-color-icon-secondary: #ffffffb2;
+  --figma-color-icon-secondary-hover: #ffffff;
+  --figma-color-icon-selected: #79d297;
+  --figma-color-icon-selected-secondary: #79d297;
+  --figma-color-icon-selected-tertiary: #79d297;
+  --figma-color-icon-success: #198f51;
+  --figma-color-icon-success-pressed: #a1e8b9;
+  --figma-color-icon-success-secondary: #198f51;
+  --figma-color-icon-success-tertiary: #198f51;
+  --figma-color-icon-tertiary: #ffffff66;
+  --figma-color-icon-tertiary-hover: #ffffff;
+  --figma-color-icon-toolbar: #ffffff;
+  --figma-color-icon-toolbar-danger: #e03e1a;
+  --figma-color-icon-toolbar-disabled: #ffffff66;
+  --figma-color-icon-toolbar-hover: #ffffff;
+  --figma-color-icon-toolbar-ondisabled: #2c2c2c;
+  --figma-color-icon-toolbar-onselected: #ffffff;
+  --figma-color-icon-toolbar-pressed: #198f51;
+  --figma-color-icon-toolbar-secondary: #ffffffb2;
+  --figma-color-icon-toolbar-secondary-hover: #ffffff;
+  --figma-color-icon-toolbar-selected: #79d297;
+  --figma-color-icon-toolbar-selected-secondary: #79d297;
+  --figma-color-icon-toolbar-selected-tertiary: #79d297;
+  --figma-color-icon-toolbar-tertiary: #ffffff66;
+  --figma-color-icon-toolbar-tertiary-hover: #ffffff;
+  --figma-color-icon-toolbar-warning: #f3c11b;
+  --figma-color-icon-tooltip: #ffffff;
+  --figma-color-icon-tooltip-danger: #e03e1a;
+  --figma-color-icon-tooltip-disabled: #ffffff66;
+  --figma-color-icon-tooltip-hover: #ffffff;
+  --figma-color-icon-tooltip-ondisabled: #1e1e1e;
+  --figma-color-icon-tooltip-onselected: #ffffff;
+  --figma-color-icon-tooltip-pressed: #198f51;
+  --figma-color-icon-tooltip-secondary: #ffffffb2;
+  --figma-color-icon-tooltip-secondary-hover: #ffffff;
+  --figma-color-icon-tooltip-selected: #79d297;
+  --figma-color-icon-tooltip-selected-secondary: #79d297;
+  --figma-color-icon-tooltip-selected-tertiary: #79d297;
+  --figma-color-icon-tooltip-tertiary: #ffffff66;
+  --figma-color-icon-tooltip-tertiary-hover: #ffffff;
+  --figma-color-icon-tooltip-warning: #f3c11b;
+  --figma-color-icon-warning: #f3c11b;
+  --figma-color-icon-warning-pressed: #f7d15f;
+  --figma-color-icon-warning-secondary: #f3c11b;
+  --figma-color-icon-warning-tertiary: #f3c11b;
+  --figma-color-icondesignfilesecondary: #7cc4f8;
+  --figma-color-iconfigjamfilesecondary: #d1a8ff;
+  --figma-color-iconondarkcanvas: #ffffffe5;
+  --figma-color-icononlightcanvas: #000000e5;
+  --figma-color-icononvoting: #000000e5;
+  --figma-color-iconprototypefile: #757575;
+  --figma-color-iconprototypefilesecondary: #ffffff;
+  --figma-color-iconpublishedfile: #757575;
+  --figma-color-iconpublishedfilesecondary: #b3b3b3;
+  --figma-color-loading: #ffffff1a;
+  --figma-color-loadingmenu: #ffffff1a;
+  --figma-color-loadingsecondary: #ffffff0d;
+  --figma-color-loadingsecondarymenu: #ffffff0d;
+  --figma-color-modalbackdrop: #00000080;
+  --figma-color-multiplayerblue: #0a6dc2;
+  --figma-color-multiplayerbluehover: #105cad;
+  --figma-color-multiplayerbluesecondary: #184591;
+  --figma-color-multiplayergreen: #198f51;
+  --figma-color-multiplayergreenhover: #078348;
+  --figma-color-multiplayergreensecondary: #0a4c2d;
+  --figma-color-multiplayergrey: #667799;
+  --figma-color-multiplayergreyhover: #536383;
+  --figma-color-multiplayergreysecondary: #394360;
+  --figma-color-multiplayerpink: #f316b0;
+  --figma-color-multiplayerpinkhover: #d01b9c;
+  --figma-color-multiplayerpinksecondary: #68275e;
+  --figma-color-multiplayerpurple: #8a38f5;
+  --figma-color-multiplayerpurplehover: #7a2ed6;
+  --figma-color-multiplayerpurplesecondary: #50297a;
+  --figma-color-multiplayerred: #e03e1a;
+  --figma-color-multiplayerredhover: #c4381c;
+  --figma-color-multiplayerredsecondary: #7c2622;
+  --figma-color-multiplayeryellow: #f3c11b;
+  --figma-color-multiplayeryellowhover: #f2b50d;
+  --figma-color-multiplayeryellowsecondary: #c58011;
+  --figma-color-nodehandle: #7cc4f8;
+  --figma-color-prototypeloadingbackdrop: #000000e5;
+  --figma-color-scrollbar: #b3b3b380;
+  --figma-color-shadow: #00000099;
+  --figma-color-text: #ffffff;
+  --figma-color-text-assistive: #fc9ce0;
+  --figma-color-text-assistive-pressed: #fbb1ed;
+  --figma-color-text-assistive-secondary: #fc9ce0;
+  --figma-color-text-assistive-tertiary: #fc9ce0;
+  --figma-color-text-brand: #79d297;
+  --figma-color-text-brand-secondary: #79d297;
+  --figma-color-text-brand-tertiary: #79d297;
+  --figma-color-text-component: #d1a8ff;
+  --figma-color-text-component-pressed: #d6b6fb;
+  --figma-color-text-component-secondary: #7f699b;
+  --figma-color-text-component-tertiary: #7f699b;
+  --figma-color-text-danger: #fca397;
+  --figma-color-text-danger-secondary: #fca397;
+  --figma-color-text-danger-tertiary: #fca397;
+  --figma-color-text-design: #7cc4f8;
+  --figma-color-text-design-pressed: #a8d7fa;
+  --figma-color-text-design-secondary: #7cc4f8;
+  --figma-color-text-design-tertiary: #7cc4f8;
+  --figma-color-text-disabled: #ffffff66;
+  --figma-color-text-figjam: #c5b2dc;
+  --figma-color-text-figjam-pressed: #d6b6fb;
+  --figma-color-text-figjam-secondary: #7f699b;
+  --figma-color-text-figjam-tertiary: #7f699b;
+  --figma-color-text-handoff: #79d297;
+  --figma-color-text-handoff-secondary: #79d297;
+  --figma-color-text-handoff-tertiary: #79d297;
+  --figma-color-text-hover: #ffffff;
+  --figma-color-text-measure: #fca397;
+  --figma-color-text-measure-secondary: #fca397;
+  --figma-color-text-measure-tertiary: #fca397;
+  --figma-color-text-menu: #ffffff;
+  --figma-color-text-menu-danger: #fca397;
+  --figma-color-text-menu-disabled: #ffffff66;
+  --figma-color-text-menu-hover: #ffffff;
+  --figma-color-text-menu-ondisabled: #1e1e1e;
+  --figma-color-text-menu-onselected: #ffffff;
+  --figma-color-text-menu-secondary: #ffffffb2;
+  --figma-color-text-menu-secondary-hover: #ffffff;
+  --figma-color-text-menu-selected: #79d297;
+  --figma-color-text-menu-selected-secondary: #79d297;
+  --figma-color-text-menu-selected-tertiary: #79d297;
+  --figma-color-text-menu-tertiary: #ffffff66;
+  --figma-color-text-menu-tertiary-hover: #ffffff;
+  --figma-color-text-menu-warning: #f7d15f;
+  --figma-color-text-onassistive: #ffffff;
+  --figma-color-text-onassistive-secondary: #ffffffcc;
+  --figma-color-text-onassistive-tertiary: #ffffff66;
+  --figma-color-text-onbrand: #ffffff;
+  --figma-color-text-onbrand-secondary: #ffffffcc;
+  --figma-color-text-onbrand-tertiary: #ffffff66;
+  --figma-color-text-oncomponent: #ffffff;
+  --figma-color-text-oncomponent-secondary: #ffffffcc;
+  --figma-color-text-oncomponent-tertiary: #ffffff66;
+  --figma-color-text-ondanger: #ffffff;
+  --figma-color-text-ondanger-secondary: #ffffffcc;
+  --figma-color-text-ondanger-tertiary: #ffffff66;
+  --figma-color-text-ondesign: #ffffff;
+  --figma-color-text-ondesign-secondary: #ffffffcc;
+  --figma-color-text-ondesign-tertiary: #ffffff66;
+  --figma-color-text-ondisabled: #2c2c2c;
+  --figma-color-text-onfigjam: #ffffff;
+  --figma-color-text-onfigjam-secondary: #ffffffcc;
+  --figma-color-text-onfigjam-tertiary: #ffffff66;
+  --figma-color-text-oninverse: #000000e5;
+  --figma-color-text-onmeasure: #ffffff;
+  --figma-color-text-onmeasure-secondary: #ffffffcc;
+  --figma-color-text-onmeasure-tertiary: #ffffff66;
+  --figma-color-text-onselected: #ffffffe5;
+  --figma-color-text-onselected-secondary: #ffffffb2;
+  --figma-color-text-onselected-strong: #ffffff;
+  --figma-color-text-onselected-tertiary: #ffffff66;
+  --figma-color-text-onsuccess: #ffffff;
+  --figma-color-text-onsuccess-secondary: #ffffffcc;
+  --figma-color-text-onsuccess-tertiary: #ffffff66;
+  --figma-color-text-onwarning: #000000e5;
+  --figma-color-text-onwarning-secondary: #00000080;
+  --figma-color-text-onwarning-tertiary: #0000004d;
+  --figma-color-text-secondary: #ffffffb2;
+  --figma-color-text-secondary-hover: #ffffff;
+  --figma-color-text-selected: #79d297;
+  --figma-color-text-selected-secondary: #79d297;
+  --figma-color-text-selected-tertiary: #79d297;
+  --figma-color-text-success: #79d297;
+  --figma-color-text-success-secondary: #79d297;
+  --figma-color-text-success-tertiary: #79d297;
+  --figma-color-text-tertiary: #ffffff66;
+  --figma-color-text-tertiary-hover: #ffffff;
+  --figma-color-text-toolbar: #ffffff;
+  --figma-color-text-toolbar-danger: #fca397;
+  --figma-color-text-toolbar-disabled: #ffffff66;
+  --figma-color-text-toolbar-hover: #ffffff;
+  --figma-color-text-toolbar-ondisabled: #2c2c2c;
+  --figma-color-text-toolbar-onselected: #ffffff;
+  --figma-color-text-toolbar-secondary: #ffffffb2;
+  --figma-color-text-toolbar-secondary-hover: #ffffff;
+  --figma-color-text-toolbar-selected: #79d297;
+  --figma-color-text-toolbar-selected-secondary: #79d297;
+  --figma-color-text-toolbar-selected-tertiary: #79d297;
+  --figma-color-text-toolbar-tertiary: #ffffff66;
+  --figma-color-text-toolbar-tertiary-hover: #ffffff;
+  --figma-color-text-toolbar-warning: #f7d15f;
+  --figma-color-text-tooltip: #ffffff;
+  --figma-color-text-tooltip-danger: #fca397;
+  --figma-color-text-tooltip-disabled: #ffffff66;
+  --figma-color-text-tooltip-hover: #ffffff;
+  --figma-color-text-tooltip-ondisabled: #1e1e1e;
+  --figma-color-text-tooltip-onselected: #ffffff;
+  --figma-color-text-tooltip-secondary: #ffffffb2;
+  --figma-color-text-tooltip-secondary-hover: #ffffff;
+  --figma-color-text-tooltip-selected: #79d297;
+  --figma-color-text-tooltip-selected-secondary: #79d297;
+  --figma-color-text-tooltip-selected-tertiary: #79d297;
+  --figma-color-text-tooltip-tertiary: #ffffff66;
+  --figma-color-text-tooltip-tertiary-hover: #ffffff;
+  --figma-color-text-tooltip-warning: #f7d15f;
+  --figma-color-text-warning: #f7d15f;
+  --figma-color-text-warning-secondary: #f7d15f;
+  --figma-color-text-warning-tertiary: #f7d15f;
+  --figma-color-texthighlight: #14ae5c66;
+  --figma-color-textondarkcanvas: #ffffffe5;
+  --figma-color-textondarkcanvassecondary: #ffffffb2;
+  --figma-color-textonlightcanvas: #000000e5;
+  --figma-color-textonlightcanvassecondary: #0000004d;
+  --figma-color-textonmultiplayerblue: #ffffff;
+  --figma-color-textonmultiplayergreen: #ffffff;
+  --figma-color-textonmultiplayergrey: #ffffff;
+  --figma-color-textonmultiplayerpink: #ffffff;
+  --figma-color-textonmultiplayerpurple: #ffffff;
+  --figma-color-textonmultiplayerred: #ffffff;
+  --figma-color-textonmultiplayeryellow: #000000e5;
+  --figma-color-textonvoting: #000000e5;
+  --figma-elevation-100: 0px 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3), inset 0px 0.5px 0px rgba(255, 255, 255, 0.1), 0px 0px 0.5px rgba(0, 0, 0, 0.5);
+  --figma-elevation-200: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3), 0px 3px 8px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-elevation-300: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3), 0px 5px 12px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-elevation-400: 0px 2px 5px rgba(0, 0, 0, 0.35), inset 0px 0px 0.5px rgba(255, 255, 255, 0.35), 0px 10px 16px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-elevation-500: 0px 3px 5px rgba(0, 0, 0, 0.35), inset 0px 0px 0.5px rgba(255, 255, 255, 0.35), 0px 10px 24px rgba(0, 0, 0, 0.45), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-shadow-tooltip: var(--figma-elevation-300);
+  --figma-shadow-menu: var(--figma-elevation-400);
+  --figma-shadow-modal: var(--figma-elevation-500);
+}
diff --git a/packages/theme/src/css/devmode.css b/packages/theme/src/css/devmode.css
new file mode 100644
index 0000000..91a7949
--- /dev/null
+++ b/packages/theme/src/css/devmode.css
@@ -0,0 +1,1174 @@
+@import './preflight.css' layer(base);
+@import './utilities.css';
+@theme {
+  --figma-font-family-default: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "SFProLocalRange";
+  --figma-font-family-code: "Roboto Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
+  --figma-font-family-display: "Whyte", ui-sans-serif, system-ui, sans-serif;
+  --figma-font-weight-default: 450;
+  --figma-font-weight-medium: 450;
+  --figma-font-weight-strong: 550;
+  --figma-font-weight-heavy: 550;
+  --figma-font-size-body-large: .8125rem;
+  --figma-line-height-body-large: 1.375rem;
+  --figma-letter-spacing-body-large: -.00203rem;
+  --figma-font-size-body-large-strong: .8125rem;
+  --figma-line-height-body-large-strong: 1.375rem;
+  --figma-letter-spacing-body-large-strong: -.00203rem;
+  --figma-font-size-body-medium: .6875rem;
+  --figma-line-height-body-medium: 1rem;
+  --figma-letter-spacing-body-medium: .00344rem;
+  --figma-font-size-body-medium-strong: .6875rem;
+  --figma-line-height-body-medium-strong: 1rem;
+  --figma-letter-spacing-body-medium-strong: .00344rem;
+  --figma-font-size-body-small: .5625rem;
+  --figma-line-height-body-small: .875rem;
+  --figma-letter-spacing-body-small: .00281rem;
+  --figma-font-size-body-small-strong: .5625rem;
+  --figma-line-height-body-small-strong: .875rem;
+  --figma-letter-spacing-body-small-strong: .00281rem;
+  --figma-font-size-heading-display: 3rem;
+  --figma-line-height-heading-display: 3.5rem;
+  --figma-letter-spacing-heading-display: -.09rem;
+  --figma-font-size-heading-large: 1.5rem;
+  --figma-line-height-heading-large: 2rem;
+  --figma-letter-spacing-heading-large: -.0255rem;
+  --figma-font-size-heading-medium: .9375rem;
+  --figma-line-height-heading-medium: 1.5625rem;
+  --figma-letter-spacing-heading-medium: -.00469rem;
+  --figma-font-size-heading-small: .8125rem;
+  --figma-line-height-heading-small: 1.375rem;
+  --figma-letter-spacing-heading-small: -.00203rem;
+  --figma-radius-sm: .125rem;
+  --figma-radius-md: .3125rem;
+  --figma-radius-lg: .8125rem;
+  --figma-radius-none: 0;
+  --figma-radius-full: 9999px;
+  --figma-space-0: 0;
+  --figma-space-0\.5: .125rem;
+  --figma-space-1: .25rem;
+  --figma-space-1\.5: .375rem;
+  --figma-space-2: .5rem;
+  --figma-space-2\.5: .75rem;
+  --figma-space-3: 1rem;
+  --figma-space-4: 1.5rem;
+  --figma-space-5: 2rem;
+  --figma-space-6: 2.5rem;
+  --figma-border-width-1: 1px;
+  --figma-border-width-4: .25rem;
+  --figma-duration-100: 100ms;
+  --figma-duration-200: 200ms;
+  --figma-duration-300: 300ms;
+  --figma-opacity-50: 0.5;
+  --figma-opacity-disabled: 0.3;
+  --figma-z-index-1: 1;
+  --figma-z-index-2: 2;
+  --figma-z-index-dropdown: 10;
+  --figma-z-index-modal: 50;
+  --figma-z-index-tooltip: 100;
+  --figma-shadow-slider: 0 1px 3px 0 #0000001a, 0 3px 8px 0 #0000001a, 0 0 0.5px 0 #0000002e, inset 0 0 0 0.5px #0000001a;
+  --figma-shadow-hud: 0px 5px 17px rgba(0, 0, 0, 0.2), 0px 2px 7px rgba(0, 0, 0, 0.15);
+  --font-figma: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "SFProLocalRange";
+  --font-figma-code: "Roboto Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
+  --font-weight-figma-default: 450;
+  --font-weight-figma-heavy: 550;
+  --font-weight-figma-medium: 450;
+  --font-weight-figma-strong: 550;
+  --text-figma-body-large: .8125rem;
+  --text-figma-body-large-strong: .8125rem;
+  --text-figma-body-medium: .6875rem;
+  --text-figma-body-medium-strong: .6875rem;
+  --text-figma-body-small: .5625rem;
+  --text-figma-body-small-strong: .5625rem;
+  --text-figma-heading-display: 3rem;
+  --text-figma-heading-large: 1.5rem;
+  --text-figma-heading-medium: .9375rem;
+  --text-figma-heading-small: .8125rem;
+  --leading-figma-body-large: 1.375rem;
+  --leading-figma-body-large-strong: 1.375rem;
+  --leading-figma-body-medium: 1rem;
+  --leading-figma-body-medium-strong: 1rem;
+  --leading-figma-body-small: .875rem;
+  --leading-figma-body-small-strong: .875rem;
+  --leading-figma-heading-display: 3.5rem;
+  --leading-figma-heading-large: 2rem;
+  --leading-figma-heading-medium: 1.5625rem;
+  --leading-figma-heading-small: 1.375rem;
+  --text-figma-body-large--line-height: 1.375rem;
+  --text-figma-body-large-strong--line-height: 1.375rem;
+  --text-figma-body-medium--line-height: 1rem;
+  --text-figma-body-medium-strong--line-height: 1rem;
+  --text-figma-body-small--line-height: .875rem;
+  --text-figma-body-small-strong--line-height: .875rem;
+  --text-figma-heading-display--line-height: 3.5rem;
+  --text-figma-heading-large--line-height: 2rem;
+  --text-figma-heading-medium--line-height: 1.5625rem;
+  --text-figma-heading-small--line-height: 1.375rem;
+  --tracking-figma-body-large: -.00203rem;
+  --tracking-figma-body-large-strong: -.00203rem;
+  --tracking-figma-body-medium: .00344rem;
+  --tracking-figma-body-medium-strong: .00344rem;
+  --tracking-figma-body-small: .00281rem;
+  --tracking-figma-body-small-strong: .00281rem;
+  --tracking-figma-heading-display: -.09rem;
+  --tracking-figma-heading-large: -.0255rem;
+  --tracking-figma-heading-medium: -.00469rem;
+  --tracking-figma-heading-small: -.00203rem;
+  --text-figma-body-large--letter-spacing: -.00203rem;
+  --text-figma-body-large-strong--letter-spacing: -.00203rem;
+  --text-figma-body-medium--letter-spacing: .00344rem;
+  --text-figma-body-medium-strong--letter-spacing: .00344rem;
+  --text-figma-body-small--letter-spacing: .00281rem;
+  --text-figma-body-small-strong--letter-spacing: .00281rem;
+  --text-figma-heading-display--letter-spacing: -.09rem;
+  --text-figma-heading-large--letter-spacing: -.0255rem;
+  --text-figma-heading-medium--letter-spacing: -.00469rem;
+  --text-figma-heading-small--letter-spacing: -.00203rem;
+  --text-figma-body-large-strong--font-weight: 550;
+  --text-figma-body-medium-strong--font-weight: 550;
+  --text-figma-body-small-strong--font-weight: 550;
+  --text-figma-heading-large--font-weight: 550;
+  --text-figma-heading-medium--font-weight: 550;
+  --text-figma-heading-small--font-weight: 550;
+  --radius-figma-full: 9999px;
+  --radius-figma-lg: .8125rem;
+  --radius-figma-md: .3125rem;
+  --radius-figma-none: 0;
+  --radius-figma-sm: .125rem;
+  --spacing-figma-0: 0;
+  --spacing-figma-0\.5: .125rem;
+  --spacing-figma-1: .25rem;
+  --spacing-figma-1\.5: .375rem;
+  --spacing-figma-2: .5rem;
+  --spacing-figma-2\.5: .75rem;
+  --spacing-figma-3: 1rem;
+  --spacing-figma-4: 1.5rem;
+  --spacing-figma-5: 2rem;
+  --spacing-figma-6: 2.5rem;
+  --border-figma-1: 1px;
+  --border-figma-4: .25rem;
+  --transition-duration-figma-100: 100ms;
+  --transition-duration-figma-200: 200ms;
+  --transition-duration-figma-300: 300ms;
+  --opacity-figma-50: 0.5;
+  --opacity-figma-disabled: 0.3;
+  --z-index-figma-1: 1;
+  --z-index-figma-2: 2;
+  --z-index-figma-dropdown: 10;
+  --z-index-figma-modal: 50;
+  --z-index-figma-tooltip: 100;
+}
+
+@theme inline {
+  --shadow-figma-elevation-100: var(--figma-elevation-100);
+  --shadow-figma-elevation-200: var(--figma-elevation-200);
+  --shadow-figma-elevation-300: var(--figma-elevation-300);
+  --shadow-figma-elevation-400: var(--figma-elevation-400);
+  --shadow-figma-elevation-500: var(--figma-elevation-500);
+  --shadow-figma-tooltip: var(--figma-elevation-300);
+  --shadow-figma-menu: var(--figma-elevation-400);
+  --shadow-figma-modal: var(--figma-elevation-500);
+  --shadow-figma-slider: 0 1px 3px 0 #0000001a, 0 3px 8px 0 #0000001a, 0 0 0.5px 0 #0000002e, inset 0 0 0 0.5px #0000001a;
+  --shadow-figma-hud: 0px 5px 17px rgba(0, 0, 0, 0.2), 0px 2px 7px rgba(0, 0, 0, 0.15);
+}
+
+:root, .devmode, .figma-light .devmode, .devmode .figma-light, .devmode.figma-light {
+  --figma-color-bg: #ffffff;
+  --figma-color-bg-assistive: #ff24bd;
+  --figma-color-bg-assistive-hover: #ea10ac;
+  --figma-color-bg-assistive-pressed: #ea10ac;
+  --figma-color-bg-assistive-secondary: #cb0b96;
+  --figma-color-bg-assistive-tertiary: #ffe0fc;
+  --figma-color-bg-brand: #14ae5c;
+  --figma-color-bg-brand-hover: #009951;
+  --figma-color-bg-brand-pressed: #009951;
+  --figma-color-bg-brand-secondary: #008043;
+  --figma-color-bg-brand-tertiary: #cff7d3;
+  --figma-color-bg-component: #9747ff;
+  --figma-color-bg-component-hover: #8638e5;
+  --figma-color-bg-component-pressed: #8638e5;
+  --figma-color-bg-component-secondary: #7c2bda;
+  --figma-color-bg-component-tertiary: #f1e5ff;
+  --figma-color-bg-danger: #f24822;
+  --figma-color-bg-danger-hover: #dc3412;
+  --figma-color-bg-danger-pressed: #dc3412;
+  --figma-color-bg-danger-secondary: #bd2915;
+  --figma-color-bg-danger-tertiary: #ffe2e0;
+  --figma-color-bg-design: #0d99ff;
+  --figma-color-bg-design-hover: #007be5;
+  --figma-color-bg-design-pressed: #007be5;
+  --figma-color-bg-design-secondary: #0768cf;
+  --figma-color-bg-design-tertiary: #e5f4ff;
+  --figma-color-bg-disabled: #d9d9d9;
+  --figma-color-bg-disabled-secondary: #b3b3b3;
+  --figma-color-bg-figjam: #9747ff;
+  --figma-color-bg-figjam-hover: #8638e5;
+  --figma-color-bg-figjam-pressed: #8638e5;
+  --figma-color-bg-figjam-secondary: #7c2bda;
+  --figma-color-bg-figjam-tertiary: #f1e5ff;
+  --figma-color-bg-handoff: #14ae5c;
+  --figma-color-bg-handoff-hover: #009951;
+  --figma-color-bg-handoff-pressed: #009951;
+  --figma-color-bg-handoff-secondary: #008043;
+  --figma-color-bg-handoff-tertiary: #daecdf;
+  --figma-color-bg-hover: #f5f5f5;
+  --figma-color-bg-info: #daecdf;
+  --figma-color-bg-inverse: #2c2c2c;
+  --figma-color-bg-measure: #f24822;
+  --figma-color-bg-measure-hover: #dc3412;
+  --figma-color-bg-measure-pressed: #dc3412;
+  --figma-color-bg-measure-secondary: #bd2915;
+  --figma-color-bg-measure-tertiary: #ffe2e0;
+  --figma-color-bg-menu: #1e1e1e;
+  --figma-color-bg-menu-disabled: #757575;
+  --figma-color-bg-menu-hover: #2c2c2c;
+  --figma-color-bg-menu-pressed: #2c2c2c;
+  --figma-color-bg-menu-secondary: #383838;
+  --figma-color-bg-menu-selected: #14ae5c;
+  --figma-color-bg-menu-selected-hover: #009951;
+  --figma-color-bg-menu-selected-pressed: #009951;
+  --figma-color-bg-menu-selected-secondary: #476656;
+  --figma-color-bg-menu-selected-tertiary: #476656;
+  --figma-color-bg-menu-tertiary: #444444;
+  --figma-color-bg-onselected: #aff4c6;
+  --figma-color-bg-onselected-hover: #aff4c6;
+  --figma-color-bg-onselected-pressed: #aff4c6;
+  --figma-color-bg-pressed: #f5f5f5;
+  --figma-color-bg-secondary: #f5f5f5;
+  --figma-color-bg-selected: #daecdf;
+  --figma-color-bg-selected-hover: #c3e0cc;
+  --figma-color-bg-selected-pressed: #c3e0cc;
+  --figma-color-bg-selected-secondary: #f1f8f2;
+  --figma-color-bg-selected-strong: #14ae5c;
+  --figma-color-bg-selected-tertiary: #f1f8f2;
+  --figma-color-bg-success: #14ae5c;
+  --figma-color-bg-success-hover: #009951;
+  --figma-color-bg-success-pressed: #009951;
+  --figma-color-bg-success-secondary: #008043;
+  --figma-color-bg-success-tertiary: #cff7d3;
+  --figma-color-bg-tertiary: #e6e6e6;
+  --figma-color-bg-toolbar: #2c2c2c;
+  --figma-color-bg-toolbar-disabled: #757575;
+  --figma-color-bg-toolbar-hover: #111111;
+  --figma-color-bg-toolbar-pressed: #111111;
+  --figma-color-bg-toolbar-secondary: #383838;
+  --figma-color-bg-toolbar-selected: #14ae5c;
+  --figma-color-bg-toolbar-selected-hover: #009951;
+  --figma-color-bg-toolbar-selected-pressed: #009951;
+  --figma-color-bg-toolbar-selected-secondary: #008043;
+  --figma-color-bg-toolbar-selected-tertiary: #14ae5c;
+  --figma-color-bg-toolbar-tertiary: #444444;
+  --figma-color-bg-tooltip: #1e1e1e;
+  --figma-color-bg-tooltip-disabled: #757575;
+  --figma-color-bg-tooltip-hover: #2c2c2c;
+  --figma-color-bg-tooltip-pressed: #2c2c2c;
+  --figma-color-bg-tooltip-secondary: #383838;
+  --figma-color-bg-tooltip-selected: #14ae5c;
+  --figma-color-bg-tooltip-selected-hover: #009951;
+  --figma-color-bg-tooltip-selected-pressed: #009951;
+  --figma-color-bg-tooltip-selected-secondary: #476656;
+  --figma-color-bg-tooltip-selected-tertiary: #476656;
+  --figma-color-bg-tooltip-tertiary: #444444;
+  --figma-color-bg-warning: #ffcd29;
+  --figma-color-bg-warning-hover: #ffc21a;
+  --figma-color-bg-warning-pressed: #ffc21a;
+  --figma-color-bg-warning-secondary: #fab815;
+  --figma-color-bg-warning-tertiary: #fff1c2;
+  --figma-color-bghoverondarkcanvas: #ffffff33;
+  --figma-color-bghoveronlightcanvas: #00000033;
+  --figma-color-bghovertransparent: #0000000d;
+  --figma-color-bgsecondaryoncanvas: #e6e6e6;
+  --figma-color-bgselectedarea: #14ae5c33;
+  --figma-color-bgtransparent: #ffffff99;
+  --figma-color-bgtransparent-secondary-hover: #0000001a;
+  --figma-color-bgtransparent-secondary-pressed: #00000026;
+  --figma-color-bgtransparentsecondary: #ffffff;
+  --figma-color-bgvoting: #ffcd29;
+  --figma-color-bgvotingsecondary: #fff1c2;
+  --figma-color-bgvotingtertiary: #fffbeb;
+  --figma-color-bgvotingwheeldial: #fffbeb;
+  --figma-color-bgvotingwheelhover: #fff1c2;
+  --figma-color-border: #e6e6e6;
+  --figma-color-border-assistive: #ffbdf2;
+  --figma-color-border-assistive-strong: #ea10ac;
+  --figma-color-border-brand: #aff4c6;
+  --figma-color-border-brand-strong: #009951;
+  --figma-color-border-component: #e4ccff;
+  --figma-color-border-component-hover: #9747ff;
+  --figma-color-border-component-strong: #8638e5;
+  --figma-color-border-danger: #ffc7c2;
+  --figma-color-border-danger-strong: #dc3412;
+  --figma-color-border-design: #bde3ff;
+  --figma-color-border-design-strong: #007be5;
+  --figma-color-border-disabled: #e6e6e6;
+  --figma-color-border-disabled-strong: #0000004d;
+  --figma-color-border-figjam: #e4ccff;
+  --figma-color-border-figjam-strong: #8638e5;
+  --figma-color-border-handoff: #aff4c6;
+  --figma-color-border-handoff-strong: #009951;
+  --figma-color-border-measure: #ffc7c2;
+  --figma-color-border-measure-strong: #dc3412;
+  --figma-color-border-menu: #383838;
+  --figma-color-border-menu-disabled: #383838;
+  --figma-color-border-menu-disabled-strong: #383838;
+  --figma-color-border-menu-onselected: #85e0a3;
+  --figma-color-border-menu-onselected-strong: #ffffff;
+  --figma-color-border-menu-selected: #14ae5c;
+  --figma-color-border-menu-selected-strong: #85e0a3;
+  --figma-color-border-menu-strong: #ffffff;
+  --figma-color-border-onassistive: #ea10ac;
+  --figma-color-border-onassistive-strong: #ffffff;
+  --figma-color-border-onbrand: #009951;
+  --figma-color-border-onbrand-strong: #ffffff;
+  --figma-color-border-oncomponent: #8638e5;
+  --figma-color-border-oncomponent-strong: #ffffff;
+  --figma-color-border-ondanger: #dc3412;
+  --figma-color-border-ondanger-strong: #ffffff;
+  --figma-color-border-ondesign: #007be5;
+  --figma-color-border-ondesign-strong: #ffffff;
+  --figma-color-border-onfigjam: #8638e5;
+  --figma-color-border-onfigjam-strong: #8638e5;
+  --figma-color-border-onmeasure: #dc3412;
+  --figma-color-border-onmeasure-strong: #ffffff;
+  --figma-color-border-onselected: #aff4c6;
+  --figma-color-border-onselected-strong: #000000e5;
+  --figma-color-border-onsuccess: #009951;
+  --figma-color-border-onsuccess-strong: #ffffff;
+  --figma-color-border-onwarning: #fab815;
+  --figma-color-border-onwarning-strong: #000000e5;
+  --figma-color-border-selected: #14ae5c;
+  --figma-color-border-selected-strong: #009951;
+  --figma-color-border-strong: #2c2c2c;
+  --figma-color-border-success: #aff4c6;
+  --figma-color-border-success-strong: #009951;
+  --figma-color-border-toolbar: #444444;
+  --figma-color-border-toolbar-disabled: #ffffff66;
+  --figma-color-border-toolbar-onselected: #ffffff;
+  --figma-color-border-toolbar-selected: #14ae5c;
+  --figma-color-border-toolbar-selected-strong: #85e0a3;
+  --figma-color-border-toolbar-strong: #ffffff;
+  --figma-color-border-tooltip: #383838;
+  --figma-color-border-tooltip-disabled: #383838;
+  --figma-color-border-tooltip-disabled-strong: #383838;
+  --figma-color-border-tooltip-onselected: #009951;
+  --figma-color-border-tooltip-onselected-strong: #ffffff;
+  --figma-color-border-tooltip-selected: #14ae5c;
+  --figma-color-border-tooltip-selected-strong: #85e0a3;
+  --figma-color-border-tooltip-strong: #ffffff;
+  --figma-color-border-warning: #ffe8a3;
+  --figma-color-border-warning-strong: #b86200;
+  --figma-color-bordertranslucent: #0000001a;
+  --figma-color-conditionalborder: #ffffff00;
+  --figma-color-icon: #000000e5;
+  --figma-color-icon-assistive: #ea10ac;
+  --figma-color-icon-assistive-pressed: #cb0b96;
+  --figma-color-icon-assistive-secondary: #ea10ac;
+  --figma-color-icon-assistive-tertiary: #ea10ac;
+  --figma-color-icon-brand: #009951;
+  --figma-color-icon-brand-pressed: #008043;
+  --figma-color-icon-brand-secondary: #85e0a3;
+  --figma-color-icon-brand-tertiary: #aff4c6;
+  --figma-color-icon-component: #8638e5;
+  --figma-color-icon-component-pressed: #7c2bda;
+  --figma-color-icon-component-secondary: #c5b2dc;
+  --figma-color-icon-component-tertiary: #c5b2dc;
+  --figma-color-icon-danger: #f24822;
+  --figma-color-icon-danger-hover: #bd2915;
+  --figma-color-icon-danger-pressed: #bd2915;
+  --figma-color-icon-danger-secondary: #f24822;
+  --figma-color-icon-danger-secondary-hover: #f24822;
+  --figma-color-icon-danger-tertiary: #f24822;
+  --figma-color-icon-design: #007be5;
+  --figma-color-icon-design-pressed: #0768cf;
+  --figma-color-icon-design-secondary: #007be5;
+  --figma-color-icon-design-tertiary: #007be5;
+  --figma-color-icon-disabled: #0000004d;
+  --figma-color-icon-figjam: #8638e5;
+  --figma-color-icon-figjam-pressed: #7c2bda;
+  --figma-color-icon-figjam-secondary: #c5b2dc;
+  --figma-color-icon-figjam-tertiary: #c5b2dc;
+  --figma-color-icon-handoff: #009951;
+  --figma-color-icon-handoff-pressed: #008043;
+  --figma-color-icon-handoff-secondary: #009951;
+  --figma-color-icon-handoff-tertiary: #009951;
+  --figma-color-icon-hover: #000000e5;
+  --figma-color-icon-measure: #f24822;
+  --figma-color-icon-measure-hover: #bd2915;
+  --figma-color-icon-measure-pressed: #bd2915;
+  --figma-color-icon-measure-secondary: #f24822;
+  --figma-color-icon-measure-secondary-hover: #f24822;
+  --figma-color-icon-measure-tertiary: #f24822;
+  --figma-color-icon-menu: #ffffff;
+  --figma-color-icon-menu-danger: #f24822;
+  --figma-color-icon-menu-disabled: #ffffff66;
+  --figma-color-icon-menu-hover: #ffffff;
+  --figma-color-icon-menu-ondisabled: #1e1e1e;
+  --figma-color-icon-menu-onselected: #ffffff;
+  --figma-color-icon-menu-pressed: #14ae5c;
+  --figma-color-icon-menu-secondary: #ffffffb2;
+  --figma-color-icon-menu-secondary-hover: #ffffff;
+  --figma-color-icon-menu-selected: #85e0a3;
+  --figma-color-icon-menu-selected-secondary: #85e0a3;
+  --figma-color-icon-menu-selected-tertiary: #85e0a3;
+  --figma-color-icon-menu-tertiary: #ffffff66;
+  --figma-color-icon-menu-tertiary-hover: #ffffff;
+  --figma-color-icon-menu-warning: #ffcd29;
+  --figma-color-icon-onassistive: #ffffff;
+  --figma-color-icon-onassistive-secondary: #ffffffcc;
+  --figma-color-icon-onassistive-tertiary: #ffffff66;
+  --figma-color-icon-onbrand: #ffffff;
+  --figma-color-icon-onbrand-secondary: #ffffffcc;
+  --figma-color-icon-onbrand-tertiary: #ffffff66;
+  --figma-color-icon-oncomponent: #ffffff;
+  --figma-color-icon-oncomponent-secondary: #ffffffcc;
+  --figma-color-icon-oncomponent-tertiary: #ffffff66;
+  --figma-color-icon-ondanger: #ffffff;
+  --figma-color-icon-ondanger-secondary: #ffffffcc;
+  --figma-color-icon-ondanger-tertiary: #ffffff66;
+  --figma-color-icon-ondesign: #ffffff;
+  --figma-color-icon-ondesign-secondary: #ffffffcc;
+  --figma-color-icon-ondesign-tertiary: #ffffff66;
+  --figma-color-icon-ondisabled: #ffffff;
+  --figma-color-icon-onfigjam: #ffffff;
+  --figma-color-icon-onfigjam-secondary: #ffffffcc;
+  --figma-color-icon-onfigjam-tertiary: #ffffff66;
+  --figma-color-icon-oninverse: #ffffffe5;
+  --figma-color-icon-onmeasure: #ffffff;
+  --figma-color-icon-onmeasure-secondary: #ffffffcc;
+  --figma-color-icon-onmeasure-tertiary: #ffffff66;
+  --figma-color-icon-onselected: #000000e5;
+  --figma-color-icon-onselected-secondary: #00000080;
+  --figma-color-icon-onselected-strong: #ffffff;
+  --figma-color-icon-onselected-tertiary: #0000004d;
+  --figma-color-icon-onsuccess: #ffffff;
+  --figma-color-icon-onsuccess-secondary: #ffffffcc;
+  --figma-color-icon-onsuccess-tertiary: #ffffff66;
+  --figma-color-icon-onwarning: #000000e5;
+  --figma-color-icon-onwarning-secondary: #00000080;
+  --figma-color-icon-onwarning-tertiary: #0000004d;
+  --figma-color-icon-pressed: #009951;
+  --figma-color-icon-secondary: #00000080;
+  --figma-color-icon-secondary-hover: #000000e5;
+  --figma-color-icon-selected: #009951;
+  --figma-color-icon-selected-secondary: #009951;
+  --figma-color-icon-selected-tertiary: #009951;
+  --figma-color-icon-success: #14ae5c;
+  --figma-color-icon-success-pressed: #008043;
+  --figma-color-icon-success-secondary: #14ae5c;
+  --figma-color-icon-success-tertiary: #14ae5c;
+  --figma-color-icon-tertiary: #0000004d;
+  --figma-color-icon-tertiary-hover: #000000e5;
+  --figma-color-icon-toolbar: #ffffff;
+  --figma-color-icon-toolbar-danger: #f24822;
+  --figma-color-icon-toolbar-disabled: #ffffff66;
+  --figma-color-icon-toolbar-hover: #ffffff;
+  --figma-color-icon-toolbar-ondisabled: #2c2c2c;
+  --figma-color-icon-toolbar-onselected: #ffffff;
+  --figma-color-icon-toolbar-pressed: #14ae5c;
+  --figma-color-icon-toolbar-secondary: #ffffffb2;
+  --figma-color-icon-toolbar-secondary-hover: #ffffff;
+  --figma-color-icon-toolbar-selected: #85e0a3;
+  --figma-color-icon-toolbar-selected-secondary: #85e0a3;
+  --figma-color-icon-toolbar-selected-tertiary: #85e0a3;
+  --figma-color-icon-toolbar-tertiary: #ffffff66;
+  --figma-color-icon-toolbar-tertiary-hover: #ffffff;
+  --figma-color-icon-toolbar-warning: #ffcd29;
+  --figma-color-icon-tooltip: #ffffff;
+  --figma-color-icon-tooltip-danger: #f24822;
+  --figma-color-icon-tooltip-disabled: #ffffff66;
+  --figma-color-icon-tooltip-hover: #ffffff;
+  --figma-color-icon-tooltip-ondisabled: #1e1e1e;
+  --figma-color-icon-tooltip-onselected: #ffffff;
+  --figma-color-icon-tooltip-pressed: #14ae5c;
+  --figma-color-icon-tooltip-secondary: #ffffffb2;
+  --figma-color-icon-tooltip-secondary-hover: #ffffff;
+  --figma-color-icon-tooltip-selected: #85e0a3;
+  --figma-color-icon-tooltip-selected-secondary: #85e0a3;
+  --figma-color-icon-tooltip-selected-tertiary: #85e0a3;
+  --figma-color-icon-tooltip-tertiary: #ffffff66;
+  --figma-color-icon-tooltip-tertiary-hover: #ffffff;
+  --figma-color-icon-tooltip-warning: #ffcd29;
+  --figma-color-icon-warning: #ffcd29;
+  --figma-color-icon-warning-pressed: #b86200;
+  --figma-color-icon-warning-secondary: #ffcd29;
+  --figma-color-icon-warning-tertiary: #ffcd29;
+  --figma-color-icondesignfilesecondary: #80caff;
+  --figma-color-iconfigjamfilesecondary: #d9b8ff;
+  --figma-color-iconondarkcanvas: #ffffffe5;
+  --figma-color-icononlightcanvas: #000000e5;
+  --figma-color-icononvoting: #000000e5;
+  --figma-color-iconprototypefile: #d9d9d9;
+  --figma-color-iconprototypefilesecondary: #2c2c2c;
+  --figma-color-iconpublishedfile: #2c2c2c;
+  --figma-color-iconpublishedfilesecondary: #757575;
+  --figma-color-loading: #0000001a;
+  --figma-color-loadingmenu: #ffffff1a;
+  --figma-color-loadingsecondary: #0000000d;
+  --figma-color-loadingsecondarymenu: #ffffff0d;
+  --figma-color-modalbackdrop: #00000080;
+  --figma-color-multiplayerblue: #007be5;
+  --figma-color-multiplayerbluehover: #0768cf;
+  --figma-color-multiplayerbluesecondary: #034ac1;
+  --figma-color-multiplayergreen: #14ae5c;
+  --figma-color-multiplayergreenhover: #009951;
+  --figma-color-multiplayergreensecondary: #036838;
+  --figma-color-multiplayergrey: #667799;
+  --figma-color-multiplayergreyhover: #536383;
+  --figma-color-multiplayergreysecondary: #394360;
+  --figma-color-multiplayerpink: #ff24bd;
+  --figma-color-multiplayerpinkhover: #ea10ac;
+  --figma-color-multiplayerpinksecondary: #971172;
+  --figma-color-multiplayerpurple: #9747ff;
+  --figma-color-multiplayerpurplehover: #8638e5;
+  --figma-color-multiplayerpurplesecondary: #681abb;
+  --figma-color-multiplayerred: #f24822;
+  --figma-color-multiplayerredhover: #dc3412;
+  --figma-color-multiplayerredsecondary: #9f1f18;
+  --figma-color-multiplayeryellow: #ffcd29;
+  --figma-color-multiplayeryellowhover: #ffc21a;
+  --figma-color-multiplayeryellowsecondary: #eba611;
+  --figma-color-nodehandle: #80caff;
+  --figma-color-prototypeloadingbackdrop: #000000e5;
+  --figma-color-scrollbar: #b3b3b380;
+  --figma-color-shadow: #00000026;
+  --figma-color-text: #000000e5;
+  --figma-color-text-assistive: #ea10ac;
+  --figma-color-text-assistive-pressed: #cb0b96;
+  --figma-color-text-assistive-secondary: #ea10ac;
+  --figma-color-text-assistive-tertiary: #ea10ac;
+  --figma-color-text-brand: #009951;
+  --figma-color-text-brand-secondary: #009951;
+  --figma-color-text-brand-tertiary: #009951;
+  --figma-color-text-component: #8638e5;
+  --figma-color-text-component-pressed: #7c2bda;
+  --figma-color-text-component-secondary: #c5b2dc;
+  --figma-color-text-component-tertiary: #c5b2dc;
+  --figma-color-text-danger: #dc3412;
+  --figma-color-text-danger-secondary: #dc3412;
+  --figma-color-text-danger-tertiary: #dc3412;
+  --figma-color-text-design: #007be5;
+  --figma-color-text-design-pressed: #0768cf;
+  --figma-color-text-design-secondary: #007be5;
+  --figma-color-text-design-tertiary: #007be5;
+  --figma-color-text-disabled: #0000004d;
+  --figma-color-text-figjam: #8638e5;
+  --figma-color-text-figjam-pressed: #7c2bda;
+  --figma-color-text-figjam-secondary: #c5b2dc;
+  --figma-color-text-figjam-tertiary: #c5b2dc;
+  --figma-color-text-handoff: #009951;
+  --figma-color-text-handoff-secondary: #009951;
+  --figma-color-text-handoff-tertiary: #009951;
+  --figma-color-text-hover: #000000e5;
+  --figma-color-text-measure: #dc3412;
+  --figma-color-text-measure-secondary: #dc3412;
+  --figma-color-text-measure-tertiary: #dc3412;
+  --figma-color-text-menu: #ffffff;
+  --figma-color-text-menu-danger: #f24822;
+  --figma-color-text-menu-disabled: #ffffff66;
+  --figma-color-text-menu-hover: #ffffff;
+  --figma-color-text-menu-ondisabled: #1e1e1e;
+  --figma-color-text-menu-onselected: #ffffff;
+  --figma-color-text-menu-secondary: #ffffffb2;
+  --figma-color-text-menu-secondary-hover: #ffffff;
+  --figma-color-text-menu-selected: #85e0a3;
+  --figma-color-text-menu-selected-secondary: #85e0a3;
+  --figma-color-text-menu-selected-tertiary: #85e0a3;
+  --figma-color-text-menu-tertiary: #ffffff66;
+  --figma-color-text-menu-tertiary-hover: #ffffff;
+  --figma-color-text-menu-warning: #ffd966;
+  --figma-color-text-onassistive: #ffffff;
+  --figma-color-text-onassistive-secondary: #ffffffcc;
+  --figma-color-text-onassistive-tertiary: #ffffff66;
+  --figma-color-text-onbrand: #ffffff;
+  --figma-color-text-onbrand-secondary: #ffffffcc;
+  --figma-color-text-onbrand-tertiary: #ffffff66;
+  --figma-color-text-oncomponent: #ffffff;
+  --figma-color-text-oncomponent-secondary: #ffffffcc;
+  --figma-color-text-oncomponent-tertiary: #ffffff66;
+  --figma-color-text-ondanger: #ffffff;
+  --figma-color-text-ondanger-secondary: #ffffffcc;
+  --figma-color-text-ondanger-tertiary: #ffffff66;
+  --figma-color-text-ondesign: #ffffff;
+  --figma-color-text-ondesign-secondary: #ffffffcc;
+  --figma-color-text-ondesign-tertiary: #ffffff66;
+  --figma-color-text-ondisabled: #ffffff;
+  --figma-color-text-onfigjam: #ffffff;
+  --figma-color-text-onfigjam-secondary: #ffffffcc;
+  --figma-color-text-onfigjam-tertiary: #ffffff66;
+  --figma-color-text-oninverse: #ffffffe5;
+  --figma-color-text-onmeasure: #ffffff;
+  --figma-color-text-onmeasure-secondary: #ffffffcc;
+  --figma-color-text-onmeasure-tertiary: #ffffff66;
+  --figma-color-text-onselected: #000000e5;
+  --figma-color-text-onselected-secondary: #00000080;
+  --figma-color-text-onselected-strong: #ffffff;
+  --figma-color-text-onselected-tertiary: #0000004d;
+  --figma-color-text-onsuccess: #ffffff;
+  --figma-color-text-onsuccess-secondary: #ffffffcc;
+  --figma-color-text-onsuccess-tertiary: #ffffff66;
+  --figma-color-text-onwarning: #000000e5;
+  --figma-color-text-onwarning-secondary: #00000080;
+  --figma-color-text-onwarning-tertiary: #0000004d;
+  --figma-color-text-secondary: #00000080;
+  --figma-color-text-secondary-hover: #000000e5;
+  --figma-color-text-selected: #009951;
+  --figma-color-text-selected-secondary: #009951;
+  --figma-color-text-selected-tertiary: #009951;
+  --figma-color-text-success: #009951;
+  --figma-color-text-success-secondary: #009951;
+  --figma-color-text-success-tertiary: #009951;
+  --figma-color-text-tertiary: #0000004d;
+  --figma-color-text-tertiary-hover: #000000e5;
+  --figma-color-text-toolbar: #ffffff;
+  --figma-color-text-toolbar-danger: #ffafa3;
+  --figma-color-text-toolbar-disabled: #ffffff66;
+  --figma-color-text-toolbar-hover: #ffffff;
+  --figma-color-text-toolbar-ondisabled: #2c2c2c;
+  --figma-color-text-toolbar-onselected: #ffffff;
+  --figma-color-text-toolbar-secondary: #ffffffb2;
+  --figma-color-text-toolbar-secondary-hover: #ffffff;
+  --figma-color-text-toolbar-selected: #85e0a3;
+  --figma-color-text-toolbar-selected-secondary: #85e0a3;
+  --figma-color-text-toolbar-selected-tertiary: #85e0a3;
+  --figma-color-text-toolbar-tertiary: #ffffff66;
+  --figma-color-text-toolbar-tertiary-hover: #ffffff;
+  --figma-color-text-toolbar-warning: #ffd966;
+  --figma-color-text-tooltip: #ffffff;
+  --figma-color-text-tooltip-danger: #ffafa3;
+  --figma-color-text-tooltip-disabled: #ffffff66;
+  --figma-color-text-tooltip-hover: #ffffff;
+  --figma-color-text-tooltip-ondisabled: #1e1e1e;
+  --figma-color-text-tooltip-onselected: #ffffff;
+  --figma-color-text-tooltip-secondary: #ffffffb2;
+  --figma-color-text-tooltip-secondary-hover: #ffffff;
+  --figma-color-text-tooltip-selected: #85e0a3;
+  --figma-color-text-tooltip-selected-secondary: #85e0a3;
+  --figma-color-text-tooltip-selected-tertiary: #85e0a3;
+  --figma-color-text-tooltip-tertiary: #ffffff66;
+  --figma-color-text-tooltip-tertiary-hover: #ffffff;
+  --figma-color-text-tooltip-warning: #ffd966;
+  --figma-color-text-warning: #b86200;
+  --figma-color-text-warning-secondary: #b86200;
+  --figma-color-text-warning-tertiary: #b86200;
+  --figma-color-texthighlight: #14ae5c66;
+  --figma-color-textondarkcanvas: #ffffffe5;
+  --figma-color-textondarkcanvassecondary: #ffffffb2;
+  --figma-color-textonlightcanvas: #000000e5;
+  --figma-color-textonlightcanvassecondary: #0000004d;
+  --figma-color-textonmultiplayerblue: #ffffff;
+  --figma-color-textonmultiplayergreen: #ffffff;
+  --figma-color-textonmultiplayergrey: #ffffff;
+  --figma-color-textonmultiplayerpink: #ffffff;
+  --figma-color-textonmultiplayerpurple: #ffffff;
+  --figma-color-textonmultiplayerred: #ffffff;
+  --figma-color-textonmultiplayeryellow: #000000e5;
+  --figma-color-textonvoting: #000000e5;
+  --figma-elevation-100: 0px 1px 3px rgba(0, 0, 0, 0.15), 0px 0px 0.5px rgba(0, 0, 0, 0.3);
+  --figma-elevation-200: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 3px 8px rgba(0, 0, 0, 0.1), 0px 0px 0.5px rgba(0, 0, 0, 0.18);
+  --figma-elevation-300: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 5px 12px rgba(0, 0, 0, 0.13), 0px 0px 0.5px rgba(0, 0, 0, 0.15);
+  --figma-elevation-400: 0px 2px 5px rgba(0, 0, 0, 0.15), 0px 10px 16px rgba(0, 0, 0, 0.12), 0px 0px 0.5px rgba(0, 0, 0, 0.12);
+  --figma-elevation-500: 0px 2px 5px rgba(0, 0, 0, 0.15), 0px 10px 24px rgba(0, 0, 0, 0.18), 0px 0px 0.5px rgba(0, 0, 0, 0.08);
+  --figma-shadow-tooltip: var(--figma-elevation-300);
+  --figma-shadow-menu: var(--figma-elevation-400);
+  --figma-shadow-modal: var(--figma-elevation-500);
+}
+
+.figma-dark .devmode, .devmode .figma-dark, .devmode.figma-dark {
+  --figma-color-bg: #2c2c2c;
+  --figma-color-bg-assistive: #f316b0;
+  --figma-color-bg-assistive-hover: #d01b9c;
+  --figma-color-bg-assistive-pressed: #d01b9c;
+  --figma-color-bg-assistive-secondary: #96207a;
+  --figma-color-bg-assistive-tertiary: #68275e;
+  --figma-color-bg-brand: #198f51;
+  --figma-color-bg-brand-hover: #078348;
+  --figma-color-bg-brand-pressed: #078348;
+  --figma-color-bg-brand-secondary: #0a5c35;
+  --figma-color-bg-brand-tertiary: #476656;
+  --figma-color-bg-component: #8a38f5;
+  --figma-color-bg-component-hover: #7a2ed6;
+  --figma-color-bg-component-pressed: #7a2ed6;
+  --figma-color-bg-component-secondary: #652ca8;
+  --figma-color-bg-component-tertiary: #473956;
+  --figma-color-bg-danger: #e03e1a;
+  --figma-color-bg-danger-hover: #c4381c;
+  --figma-color-bg-danger-pressed: #c4381c;
+  --figma-color-bg-danger-secondary: #963323;
+  --figma-color-bg-danger-tertiary: #60332a;
+  --figma-color-bg-design: #0c8ce9;
+  --figma-color-bg-design-hover: #0a6dc2;
+  --figma-color-bg-design-pressed: #0a6dc2;
+  --figma-color-bg-design-secondary: #105cad;
+  --figma-color-bg-design-tertiary: #394360;
+  --figma-color-bg-disabled: #757575;
+  --figma-color-bg-disabled-secondary: #b3b3b3;
+  --figma-color-bg-figjam: #8a38f5;
+  --figma-color-bg-figjam-hover: #7a2ed6;
+  --figma-color-bg-figjam-pressed: #7a2ed6;
+  --figma-color-bg-figjam-secondary: #652ca8;
+  --figma-color-bg-figjam-tertiary: #473956;
+  --figma-color-bg-handoff: #198f51;
+  --figma-color-bg-handoff-hover: #078348;
+  --figma-color-bg-handoff-pressed: #078348;
+  --figma-color-bg-handoff-secondary: #0a5c35;
+  --figma-color-bg-handoff-tertiary: #476656;
+  --figma-color-bg-hover: #383838;
+  --figma-color-bg-info: #476656;
+  --figma-color-bg-inverse: #ffffff;
+  --figma-color-bg-measure: #e03e1a;
+  --figma-color-bg-measure-hover: #c4381c;
+  --figma-color-bg-measure-pressed: #c4381c;
+  --figma-color-bg-measure-secondary: #963323;
+  --figma-color-bg-measure-tertiary: #60332a;
+  --figma-color-bg-menu: #1e1e1e;
+  --figma-color-bg-menu-disabled: #757575;
+  --figma-color-bg-menu-hover: #2c2c2c;
+  --figma-color-bg-menu-pressed: #2c2c2c;
+  --figma-color-bg-menu-secondary: #383838;
+  --figma-color-bg-menu-selected: #198f51;
+  --figma-color-bg-menu-selected-hover: #078348;
+  --figma-color-bg-menu-selected-pressed: #078348;
+  --figma-color-bg-menu-selected-secondary: #476656;
+  --figma-color-bg-menu-selected-tertiary: #476656;
+  --figma-color-bg-menu-tertiary: #444444;
+  --figma-color-bg-onselected: #678e79;
+  --figma-color-bg-onselected-hover: #678e79;
+  --figma-color-bg-onselected-pressed: #678e79;
+  --figma-color-bg-pressed: #383838;
+  --figma-color-bg-secondary: #383838;
+  --figma-color-bg-selected: #517361;
+  --figma-color-bg-selected-hover: #5c806d;
+  --figma-color-bg-selected-pressed: #5c806d;
+  --figma-color-bg-selected-secondary: #476656;
+  --figma-color-bg-selected-strong: #198f51;
+  --figma-color-bg-selected-tertiary: #476656;
+  --figma-color-bg-success: #198f51;
+  --figma-color-bg-success-hover: #078348;
+  --figma-color-bg-success-pressed: #078348;
+  --figma-color-bg-success-secondary: #0a5c35;
+  --figma-color-bg-success-tertiary: #476656;
+  --figma-color-bg-tertiary: #444444;
+  --figma-color-bg-toolbar: #2c2c2c;
+  --figma-color-bg-toolbar-disabled: #757575;
+  --figma-color-bg-toolbar-hover: #111111;
+  --figma-color-bg-toolbar-pressed: #111111;
+  --figma-color-bg-toolbar-secondary: #383838;
+  --figma-color-bg-toolbar-selected: #198f51;
+  --figma-color-bg-toolbar-selected-hover: #078348;
+  --figma-color-bg-toolbar-selected-pressed: #078348;
+  --figma-color-bg-toolbar-selected-secondary: #0a5c35;
+  --figma-color-bg-toolbar-selected-tertiary: #198f51;
+  --figma-color-bg-toolbar-tertiary: #444444;
+  --figma-color-bg-tooltip: #1e1e1e;
+  --figma-color-bg-tooltip-disabled: #757575;
+  --figma-color-bg-tooltip-hover: #2c2c2c;
+  --figma-color-bg-tooltip-pressed: #2c2c2c;
+  --figma-color-bg-tooltip-secondary: #383838;
+  --figma-color-bg-tooltip-selected: #198f51;
+  --figma-color-bg-tooltip-selected-hover: #078348;
+  --figma-color-bg-tooltip-selected-pressed: #078348;
+  --figma-color-bg-tooltip-selected-secondary: #476656;
+  --figma-color-bg-tooltip-selected-tertiary: #476656;
+  --figma-color-bg-tooltip-tertiary: #444444;
+  --figma-color-bg-warning: #f3c11b;
+  --figma-color-bg-warning-hover: #f2b50d;
+  --figma-color-bg-warning-pressed: #f2b50d;
+  --figma-color-bg-warning-secondary: #e4a711;
+  --figma-color-bg-warning-tertiary: #5c4100;
+  --figma-color-bghoverondarkcanvas: #ffffff33;
+  --figma-color-bghoveronlightcanvas: #00000033;
+  --figma-color-bghovertransparent: #ffffff0d;
+  --figma-color-bgsecondaryoncanvas: #111111;
+  --figma-color-bgselectedarea: #14ae5c33;
+  --figma-color-bgtransparent: #00000099;
+  --figma-color-bgtransparent-secondary-hover: #ffffff1a;
+  --figma-color-bgtransparent-secondary-pressed: #ffffff26;
+  --figma-color-bgtransparentsecondary: #ffffff26;
+  --figma-color-bgvoting: #f3c11b;
+  --figma-color-bgvotingsecondary: #fbe8ad;
+  --figma-color-bgvotingtertiary: #fdf7dd;
+  --figma-color-bgvotingwheeldial: #fdf7dd;
+  --figma-color-bgvotingwheelhover: #fbe8ad;
+  --figma-color-border: #444444;
+  --figma-color-border-assistive: #96207a;
+  --figma-color-border-assistive-strong: #fc9ce0;
+  --figma-color-border-brand: #0a5c35;
+  --figma-color-border-brand-strong: #79d297;
+  --figma-color-border-component: #652ca8;
+  --figma-color-border-component-hover: #8a38f5;
+  --figma-color-border-component-strong: #d6b6fb;
+  --figma-color-border-danger: #963323;
+  --figma-color-border-danger-strong: #fca397;
+  --figma-color-border-design: #105cad;
+  --figma-color-border-design-strong: #7cc4f8;
+  --figma-color-border-disabled: #444444;
+  --figma-color-border-disabled-strong: #ffffff66;
+  --figma-color-border-figjam: #652ca8;
+  --figma-color-border-figjam-strong: #d1a8ff;
+  --figma-color-border-handoff: #0a5c35;
+  --figma-color-border-handoff-strong: #79d297;
+  --figma-color-border-measure: #963323;
+  --figma-color-border-measure-strong: #fca397;
+  --figma-color-border-menu: #383838;
+  --figma-color-border-menu-disabled: #383838;
+  --figma-color-border-menu-disabled-strong: #383838;
+  --figma-color-border-menu-onselected: #79d297;
+  --figma-color-border-menu-onselected-strong: #ffffff;
+  --figma-color-border-menu-selected: #198f51;
+  --figma-color-border-menu-selected-strong: #79d297;
+  --figma-color-border-menu-strong: #ffffff;
+  --figma-color-border-onassistive: #d01b9c;
+  --figma-color-border-onassistive-strong: #ffffff;
+  --figma-color-border-onbrand: #078348;
+  --figma-color-border-onbrand-strong: #ffffff;
+  --figma-color-border-oncomponent: #7a2ed6;
+  --figma-color-border-oncomponent-strong: #ffffff;
+  --figma-color-border-ondanger: #c4381c;
+  --figma-color-border-ondanger-strong: #ffffff;
+  --figma-color-border-ondesign: #0a6dc2;
+  --figma-color-border-ondesign-strong: #ffffff;
+  --figma-color-border-onfigjam: #7a2ed6;
+  --figma-color-border-onfigjam-strong: #7a2ed6;
+  --figma-color-border-onmeasure: #c4381c;
+  --figma-color-border-onmeasure-strong: #ffffff;
+  --figma-color-border-onselected: #678e79;
+  --figma-color-border-onselected-strong: #ffffffe5;
+  --figma-color-border-onsuccess: #078348;
+  --figma-color-border-onsuccess-strong: #ffffff;
+  --figma-color-border-onwarning: #e4a711;
+  --figma-color-border-onwarning-strong: #000000e5;
+  --figma-color-border-selected: #198f51;
+  --figma-color-border-selected-strong: #79d297;
+  --figma-color-border-strong: #ffffffe5;
+  --figma-color-border-success: #0a5c35;
+  --figma-color-border-success-strong: #79d297;
+  --figma-color-border-toolbar: #444444;
+  --figma-color-border-toolbar-disabled: #ffffff66;
+  --figma-color-border-toolbar-onselected: #ffffff;
+  --figma-color-border-toolbar-selected: #198f51;
+  --figma-color-border-toolbar-selected-strong: #79d297;
+  --figma-color-border-toolbar-strong: #ffffff;
+  --figma-color-border-tooltip: #383838;
+  --figma-color-border-tooltip-disabled: #383838;
+  --figma-color-border-tooltip-disabled-strong: #383838;
+  --figma-color-border-tooltip-onselected: #078348;
+  --figma-color-border-tooltip-onselected-strong: #ffffff;
+  --figma-color-border-tooltip-selected: #198f51;
+  --figma-color-border-tooltip-selected-strong: #79d297;
+  --figma-color-border-tooltip-strong: #ffffff;
+  --figma-color-border-warning: #925711;
+  --figma-color-border-warning-strong: #f7d15f;
+  --figma-color-bordertranslucent: #ffffff1a;
+  --figma-color-conditionalborder: #444444;
+  --figma-color-icon: #ffffff;
+  --figma-color-icon-assistive: #fc9ce0;
+  --figma-color-icon-assistive-pressed: #fbb1ed;
+  --figma-color-icon-assistive-secondary: #fc9ce0;
+  --figma-color-icon-assistive-tertiary: #fc9ce0;
+  --figma-color-icon-brand: #79d297;
+  --figma-color-icon-brand-pressed: #198f51;
+  --figma-color-icon-brand-secondary: #078348;
+  --figma-color-icon-brand-tertiary: #476656;
+  --figma-color-icon-component: #d1a8ff;
+  --figma-color-icon-component-pressed: #d6b6fb;
+  --figma-color-icon-component-secondary: #7f699b;
+  --figma-color-icon-component-tertiary: #7f699b;
+  --figma-color-icon-danger: #e03e1a;
+  --figma-color-icon-danger-hover: #fbbcb6;
+  --figma-color-icon-danger-pressed: #fbbcb6;
+  --figma-color-icon-danger-secondary: #e03e1a;
+  --figma-color-icon-danger-secondary-hover: #e03e1a;
+  --figma-color-icon-danger-tertiary: #e03e1a;
+  --figma-color-icon-design: #7cc4f8;
+  --figma-color-icon-design-pressed: #a8d7fa;
+  --figma-color-icon-design-secondary: #7cc4f8;
+  --figma-color-icon-design-tertiary: #7cc4f8;
+  --figma-color-icon-disabled: #ffffff66;
+  --figma-color-icon-figjam: #d1a8ff;
+  --figma-color-icon-figjam-pressed: #d6b6fb;
+  --figma-color-icon-figjam-secondary: #7f699b;
+  --figma-color-icon-figjam-tertiary: #7f699b;
+  --figma-color-icon-handoff: #79d297;
+  --figma-color-icon-handoff-pressed: #a1e8b9;
+  --figma-color-icon-handoff-secondary: #79d297;
+  --figma-color-icon-handoff-tertiary: #79d297;
+  --figma-color-icon-hover: #ffffff;
+  --figma-color-icon-measure: #e03e1a;
+  --figma-color-icon-measure-hover: #fbbcb6;
+  --figma-color-icon-measure-pressed: #fbbcb6;
+  --figma-color-icon-measure-secondary: #e03e1a;
+  --figma-color-icon-measure-secondary-hover: #e03e1a;
+  --figma-color-icon-measure-tertiary: #e03e1a;
+  --figma-color-icon-menu: #ffffff;
+  --figma-color-icon-menu-danger: #e03e1a;
+  --figma-color-icon-menu-disabled: #ffffff66;
+  --figma-color-icon-menu-hover: #ffffff;
+  --figma-color-icon-menu-ondisabled: #1e1e1e;
+  --figma-color-icon-menu-onselected: #ffffff;
+  --figma-color-icon-menu-pressed: #198f51;
+  --figma-color-icon-menu-secondary: #ffffffb2;
+  --figma-color-icon-menu-secondary-hover: #ffffff;
+  --figma-color-icon-menu-selected: #79d297;
+  --figma-color-icon-menu-selected-secondary: #79d297;
+  --figma-color-icon-menu-selected-tertiary: #79d297;
+  --figma-color-icon-menu-tertiary: #ffffff66;
+  --figma-color-icon-menu-tertiary-hover: #ffffff;
+  --figma-color-icon-menu-warning: #f3c11b;
+  --figma-color-icon-onassistive: #ffffff;
+  --figma-color-icon-onassistive-secondary: #ffffffcc;
+  --figma-color-icon-onassistive-tertiary: #ffffff66;
+  --figma-color-icon-onbrand: #ffffff;
+  --figma-color-icon-onbrand-secondary: #ffffffcc;
+  --figma-color-icon-onbrand-tertiary: #ffffff66;
+  --figma-color-icon-oncomponent: #ffffff;
+  --figma-color-icon-oncomponent-secondary: #ffffffcc;
+  --figma-color-icon-oncomponent-tertiary: #ffffff66;
+  --figma-color-icon-ondanger: #ffffff;
+  --figma-color-icon-ondanger-secondary: #ffffffcc;
+  --figma-color-icon-ondanger-tertiary: #ffffff66;
+  --figma-color-icon-ondesign: #ffffff;
+  --figma-color-icon-ondesign-secondary: #ffffffcc;
+  --figma-color-icon-ondesign-tertiary: #ffffff66;
+  --figma-color-icon-ondisabled: #2c2c2c;
+  --figma-color-icon-onfigjam: #ffffff;
+  --figma-color-icon-onfigjam-secondary: #ffffffcc;
+  --figma-color-icon-onfigjam-tertiary: #ffffff66;
+  --figma-color-icon-oninverse: #000000e5;
+  --figma-color-icon-onmeasure: #ffffff;
+  --figma-color-icon-onmeasure-secondary: #ffffffcc;
+  --figma-color-icon-onmeasure-tertiary: #ffffff66;
+  --figma-color-icon-onselected: #ffffff;
+  --figma-color-icon-onselected-secondary: #ffffffb2;
+  --figma-color-icon-onselected-strong: #ffffff;
+  --figma-color-icon-onselected-tertiary: #ffffff66;
+  --figma-color-icon-onsuccess: #ffffff;
+  --figma-color-icon-onsuccess-secondary: #ffffffcc;
+  --figma-color-icon-onsuccess-tertiary: #ffffff66;
+  --figma-color-icon-onwarning: #000000e5;
+  --figma-color-icon-onwarning-secondary: #00000080;
+  --figma-color-icon-onwarning-tertiary: #0000004d;
+  --figma-color-icon-pressed: #078348;
+  --figma-color-icon-secondary: #ffffffb2;
+  --figma-color-icon-secondary-hover: #ffffff;
+  --figma-color-icon-selected: #79d297;
+  --figma-color-icon-selected-secondary: #79d297;
+  --figma-color-icon-selected-tertiary: #79d297;
+  --figma-color-icon-success: #198f51;
+  --figma-color-icon-success-pressed: #a1e8b9;
+  --figma-color-icon-success-secondary: #198f51;
+  --figma-color-icon-success-tertiary: #198f51;
+  --figma-color-icon-tertiary: #ffffff66;
+  --figma-color-icon-tertiary-hover: #ffffff;
+  --figma-color-icon-toolbar: #ffffff;
+  --figma-color-icon-toolbar-danger: #e03e1a;
+  --figma-color-icon-toolbar-disabled: #ffffff66;
+  --figma-color-icon-toolbar-hover: #ffffff;
+  --figma-color-icon-toolbar-ondisabled: #2c2c2c;
+  --figma-color-icon-toolbar-onselected: #ffffff;
+  --figma-color-icon-toolbar-pressed: #198f51;
+  --figma-color-icon-toolbar-secondary: #ffffffb2;
+  --figma-color-icon-toolbar-secondary-hover: #ffffff;
+  --figma-color-icon-toolbar-selected: #79d297;
+  --figma-color-icon-toolbar-selected-secondary: #79d297;
+  --figma-color-icon-toolbar-selected-tertiary: #79d297;
+  --figma-color-icon-toolbar-tertiary: #ffffff66;
+  --figma-color-icon-toolbar-tertiary-hover: #ffffff;
+  --figma-color-icon-toolbar-warning: #f3c11b;
+  --figma-color-icon-tooltip: #ffffff;
+  --figma-color-icon-tooltip-danger: #e03e1a;
+  --figma-color-icon-tooltip-disabled: #ffffff66;
+  --figma-color-icon-tooltip-hover: #ffffff;
+  --figma-color-icon-tooltip-ondisabled: #1e1e1e;
+  --figma-color-icon-tooltip-onselected: #ffffff;
+  --figma-color-icon-tooltip-pressed: #198f51;
+  --figma-color-icon-tooltip-secondary: #ffffffb2;
+  --figma-color-icon-tooltip-secondary-hover: #ffffff;
+  --figma-color-icon-tooltip-selected: #79d297;
+  --figma-color-icon-tooltip-selected-secondary: #79d297;
+  --figma-color-icon-tooltip-selected-tertiary: #79d297;
+  --figma-color-icon-tooltip-tertiary: #ffffff66;
+  --figma-color-icon-tooltip-tertiary-hover: #ffffff;
+  --figma-color-icon-tooltip-warning: #f3c11b;
+  --figma-color-icon-warning: #f3c11b;
+  --figma-color-icon-warning-pressed: #f7d15f;
+  --figma-color-icon-warning-secondary: #f3c11b;
+  --figma-color-icon-warning-tertiary: #f3c11b;
+  --figma-color-icondesignfilesecondary: #7cc4f8;
+  --figma-color-iconfigjamfilesecondary: #d1a8ff;
+  --figma-color-iconondarkcanvas: #ffffffe5;
+  --figma-color-icononlightcanvas: #000000e5;
+  --figma-color-icononvoting: #000000e5;
+  --figma-color-iconprototypefile: #757575;
+  --figma-color-iconprototypefilesecondary: #ffffff;
+  --figma-color-iconpublishedfile: #757575;
+  --figma-color-iconpublishedfilesecondary: #b3b3b3;
+  --figma-color-loading: #ffffff1a;
+  --figma-color-loadingmenu: #ffffff1a;
+  --figma-color-loadingsecondary: #ffffff0d;
+  --figma-color-loadingsecondarymenu: #ffffff0d;
+  --figma-color-modalbackdrop: #00000080;
+  --figma-color-multiplayerblue: #0a6dc2;
+  --figma-color-multiplayerbluehover: #105cad;
+  --figma-color-multiplayerbluesecondary: #184591;
+  --figma-color-multiplayergreen: #198f51;
+  --figma-color-multiplayergreenhover: #078348;
+  --figma-color-multiplayergreensecondary: #0a4c2d;
+  --figma-color-multiplayergrey: #667799;
+  --figma-color-multiplayergreyhover: #536383;
+  --figma-color-multiplayergreysecondary: #394360;
+  --figma-color-multiplayerpink: #f316b0;
+  --figma-color-multiplayerpinkhover: #d01b9c;
+  --figma-color-multiplayerpinksecondary: #68275e;
+  --figma-color-multiplayerpurple: #8a38f5;
+  --figma-color-multiplayerpurplehover: #7a2ed6;
+  --figma-color-multiplayerpurplesecondary: #50297a;
+  --figma-color-multiplayerred: #e03e1a;
+  --figma-color-multiplayerredhover: #c4381c;
+  --figma-color-multiplayerredsecondary: #7c2622;
+  --figma-color-multiplayeryellow: #f3c11b;
+  --figma-color-multiplayeryellowhover: #f2b50d;
+  --figma-color-multiplayeryellowsecondary: #c58011;
+  --figma-color-nodehandle: #7cc4f8;
+  --figma-color-prototypeloadingbackdrop: #000000e5;
+  --figma-color-scrollbar: #b3b3b380;
+  --figma-color-shadow: #00000099;
+  --figma-color-text: #ffffff;
+  --figma-color-text-assistive: #fc9ce0;
+  --figma-color-text-assistive-pressed: #fbb1ed;
+  --figma-color-text-assistive-secondary: #fc9ce0;
+  --figma-color-text-assistive-tertiary: #fc9ce0;
+  --figma-color-text-brand: #79d297;
+  --figma-color-text-brand-secondary: #79d297;
+  --figma-color-text-brand-tertiary: #79d297;
+  --figma-color-text-component: #d1a8ff;
+  --figma-color-text-component-pressed: #d6b6fb;
+  --figma-color-text-component-secondary: #7f699b;
+  --figma-color-text-component-tertiary: #7f699b;
+  --figma-color-text-danger: #fca397;
+  --figma-color-text-danger-secondary: #fca397;
+  --figma-color-text-danger-tertiary: #fca397;
+  --figma-color-text-design: #7cc4f8;
+  --figma-color-text-design-pressed: #a8d7fa;
+  --figma-color-text-design-secondary: #7cc4f8;
+  --figma-color-text-design-tertiary: #7cc4f8;
+  --figma-color-text-disabled: #ffffff66;
+  --figma-color-text-figjam: #c5b2dc;
+  --figma-color-text-figjam-pressed: #d6b6fb;
+  --figma-color-text-figjam-secondary: #7f699b;
+  --figma-color-text-figjam-tertiary: #7f699b;
+  --figma-color-text-handoff: #79d297;
+  --figma-color-text-handoff-secondary: #79d297;
+  --figma-color-text-handoff-tertiary: #79d297;
+  --figma-color-text-hover: #ffffff;
+  --figma-color-text-measure: #fca397;
+  --figma-color-text-measure-secondary: #fca397;
+  --figma-color-text-measure-tertiary: #fca397;
+  --figma-color-text-menu: #ffffff;
+  --figma-color-text-menu-danger: #fca397;
+  --figma-color-text-menu-disabled: #ffffff66;
+  --figma-color-text-menu-hover: #ffffff;
+  --figma-color-text-menu-ondisabled: #1e1e1e;
+  --figma-color-text-menu-onselected: #ffffff;
+  --figma-color-text-menu-secondary: #ffffffb2;
+  --figma-color-text-menu-secondary-hover: #ffffff;
+  --figma-color-text-menu-selected: #79d297;
+  --figma-color-text-menu-selected-secondary: #79d297;
+  --figma-color-text-menu-selected-tertiary: #79d297;
+  --figma-color-text-menu-tertiary: #ffffff66;
+  --figma-color-text-menu-tertiary-hover: #ffffff;
+  --figma-color-text-menu-warning: #f7d15f;
+  --figma-color-text-onassistive: #ffffff;
+  --figma-color-text-onassistive-secondary: #ffffffcc;
+  --figma-color-text-onassistive-tertiary: #ffffff66;
+  --figma-color-text-onbrand: #ffffff;
+  --figma-color-text-onbrand-secondary: #ffffffcc;
+  --figma-color-text-onbrand-tertiary: #ffffff66;
+  --figma-color-text-oncomponent: #ffffff;
+  --figma-color-text-oncomponent-secondary: #ffffffcc;
+  --figma-color-text-oncomponent-tertiary: #ffffff66;
+  --figma-color-text-ondanger: #ffffff;
+  --figma-color-text-ondanger-secondary: #ffffffcc;
+  --figma-color-text-ondanger-tertiary: #ffffff66;
+  --figma-color-text-ondesign: #ffffff;
+  --figma-color-text-ondesign-secondary: #ffffffcc;
+  --figma-color-text-ondesign-tertiary: #ffffff66;
+  --figma-color-text-ondisabled: #2c2c2c;
+  --figma-color-text-onfigjam: #ffffff;
+  --figma-color-text-onfigjam-secondary: #ffffffcc;
+  --figma-color-text-onfigjam-tertiary: #ffffff66;
+  --figma-color-text-oninverse: #000000e5;
+  --figma-color-text-onmeasure: #ffffff;
+  --figma-color-text-onmeasure-secondary: #ffffffcc;
+  --figma-color-text-onmeasure-tertiary: #ffffff66;
+  --figma-color-text-onselected: #ffffffe5;
+  --figma-color-text-onselected-secondary: #ffffffb2;
+  --figma-color-text-onselected-strong: #ffffff;
+  --figma-color-text-onselected-tertiary: #ffffff66;
+  --figma-color-text-onsuccess: #ffffff;
+  --figma-color-text-onsuccess-secondary: #ffffffcc;
+  --figma-color-text-onsuccess-tertiary: #ffffff66;
+  --figma-color-text-onwarning: #000000e5;
+  --figma-color-text-onwarning-secondary: #00000080;
+  --figma-color-text-onwarning-tertiary: #0000004d;
+  --figma-color-text-secondary: #ffffffb2;
+  --figma-color-text-secondary-hover: #ffffff;
+  --figma-color-text-selected: #79d297;
+  --figma-color-text-selected-secondary: #79d297;
+  --figma-color-text-selected-tertiary: #79d297;
+  --figma-color-text-success: #79d297;
+  --figma-color-text-success-secondary: #79d297;
+  --figma-color-text-success-tertiary: #79d297;
+  --figma-color-text-tertiary: #ffffff66;
+  --figma-color-text-tertiary-hover: #ffffff;
+  --figma-color-text-toolbar: #ffffff;
+  --figma-color-text-toolbar-danger: #fca397;
+  --figma-color-text-toolbar-disabled: #ffffff66;
+  --figma-color-text-toolbar-hover: #ffffff;
+  --figma-color-text-toolbar-ondisabled: #2c2c2c;
+  --figma-color-text-toolbar-onselected: #ffffff;
+  --figma-color-text-toolbar-secondary: #ffffffb2;
+  --figma-color-text-toolbar-secondary-hover: #ffffff;
+  --figma-color-text-toolbar-selected: #79d297;
+  --figma-color-text-toolbar-selected-secondary: #79d297;
+  --figma-color-text-toolbar-selected-tertiary: #79d297;
+  --figma-color-text-toolbar-tertiary: #ffffff66;
+  --figma-color-text-toolbar-tertiary-hover: #ffffff;
+  --figma-color-text-toolbar-warning: #f7d15f;
+  --figma-color-text-tooltip: #ffffff;
+  --figma-color-text-tooltip-danger: #fca397;
+  --figma-color-text-tooltip-disabled: #ffffff66;
+  --figma-color-text-tooltip-hover: #ffffff;
+  --figma-color-text-tooltip-ondisabled: #1e1e1e;
+  --figma-color-text-tooltip-onselected: #ffffff;
+  --figma-color-text-tooltip-secondary: #ffffffb2;
+  --figma-color-text-tooltip-secondary-hover: #ffffff;
+  --figma-color-text-tooltip-selected: #79d297;
+  --figma-color-text-tooltip-selected-secondary: #79d297;
+  --figma-color-text-tooltip-selected-tertiary: #79d297;
+  --figma-color-text-tooltip-tertiary: #ffffff66;
+  --figma-color-text-tooltip-tertiary-hover: #ffffff;
+  --figma-color-text-tooltip-warning: #f7d15f;
+  --figma-color-text-warning: #f7d15f;
+  --figma-color-text-warning-secondary: #f7d15f;
+  --figma-color-text-warning-tertiary: #f7d15f;
+  --figma-color-texthighlight: #14ae5c66;
+  --figma-color-textondarkcanvas: #ffffffe5;
+  --figma-color-textondarkcanvassecondary: #ffffffb2;
+  --figma-color-textonlightcanvas: #000000e5;
+  --figma-color-textonlightcanvassecondary: #0000004d;
+  --figma-color-textonmultiplayerblue: #ffffff;
+  --figma-color-textonmultiplayergreen: #ffffff;
+  --figma-color-textonmultiplayergrey: #ffffff;
+  --figma-color-textonmultiplayerpink: #ffffff;
+  --figma-color-textonmultiplayerpurple: #ffffff;
+  --figma-color-textonmultiplayerred: #ffffff;
+  --figma-color-textonmultiplayeryellow: #000000e5;
+  --figma-color-textonvoting: #000000e5;
+  --figma-elevation-100: 0px 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3), inset 0px 0.5px 0px rgba(255, 255, 255, 0.1), 0px 0px 0.5px rgba(0, 0, 0, 0.5);
+  --figma-elevation-200: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3), 0px 3px 8px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-elevation-300: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3), 0px 5px 12px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-elevation-400: 0px 2px 5px rgba(0, 0, 0, 0.35), inset 0px 0px 0.5px rgba(255, 255, 255, 0.35), 0px 10px 16px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-elevation-500: 0px 3px 5px rgba(0, 0, 0, 0.35), inset 0px 0px 0.5px rgba(255, 255, 255, 0.35), 0px 10px 24px rgba(0, 0, 0, 0.45), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-shadow-tooltip: var(--figma-elevation-300);
+  --figma-shadow-menu: var(--figma-elevation-400);
+  --figma-shadow-modal: var(--figma-elevation-500);
+}
diff --git a/packages/theme/src/css/figjam-theme.css b/packages/theme/src/css/figjam-theme.css
new file mode 100644
index 0000000..fc3e012
--- /dev/null
+++ b/packages/theme/src/css/figjam-theme.css
@@ -0,0 +1,1172 @@
+@theme {
+  --figma-font-family-default: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "SFProLocalRange";
+  --figma-font-family-code: "Roboto Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
+  --figma-font-family-display: "Whyte", ui-sans-serif, system-ui, sans-serif;
+  --figma-font-weight-default: 450;
+  --figma-font-weight-medium: 450;
+  --figma-font-weight-strong: 550;
+  --figma-font-weight-heavy: 550;
+  --figma-font-size-body-large: .8125rem;
+  --figma-line-height-body-large: 1.375rem;
+  --figma-letter-spacing-body-large: -.00203rem;
+  --figma-font-size-body-large-strong: .8125rem;
+  --figma-line-height-body-large-strong: 1.375rem;
+  --figma-letter-spacing-body-large-strong: -.00203rem;
+  --figma-font-size-body-medium: .6875rem;
+  --figma-line-height-body-medium: 1rem;
+  --figma-letter-spacing-body-medium: .00344rem;
+  --figma-font-size-body-medium-strong: .6875rem;
+  --figma-line-height-body-medium-strong: 1rem;
+  --figma-letter-spacing-body-medium-strong: .00344rem;
+  --figma-font-size-body-small: .5625rem;
+  --figma-line-height-body-small: .875rem;
+  --figma-letter-spacing-body-small: .00281rem;
+  --figma-font-size-body-small-strong: .5625rem;
+  --figma-line-height-body-small-strong: .875rem;
+  --figma-letter-spacing-body-small-strong: .00281rem;
+  --figma-font-size-heading-display: 3rem;
+  --figma-line-height-heading-display: 3.5rem;
+  --figma-letter-spacing-heading-display: -.09rem;
+  --figma-font-size-heading-large: 1.5rem;
+  --figma-line-height-heading-large: 2rem;
+  --figma-letter-spacing-heading-large: -.0255rem;
+  --figma-font-size-heading-medium: .9375rem;
+  --figma-line-height-heading-medium: 1.5625rem;
+  --figma-letter-spacing-heading-medium: -.00469rem;
+  --figma-font-size-heading-small: .8125rem;
+  --figma-line-height-heading-small: 1.375rem;
+  --figma-letter-spacing-heading-small: -.00203rem;
+  --figma-radius-sm: .125rem;
+  --figma-radius-md: .3125rem;
+  --figma-radius-lg: .8125rem;
+  --figma-radius-none: 0;
+  --figma-radius-full: 9999px;
+  --figma-space-0: 0;
+  --figma-space-0\.5: .125rem;
+  --figma-space-1: .25rem;
+  --figma-space-1\.5: .375rem;
+  --figma-space-2: .5rem;
+  --figma-space-2\.5: .75rem;
+  --figma-space-3: 1rem;
+  --figma-space-4: 1.5rem;
+  --figma-space-5: 2rem;
+  --figma-space-6: 2.5rem;
+  --figma-border-width-1: 1px;
+  --figma-border-width-4: .25rem;
+  --figma-duration-100: 100ms;
+  --figma-duration-200: 200ms;
+  --figma-duration-300: 300ms;
+  --figma-opacity-50: 0.5;
+  --figma-opacity-disabled: 0.3;
+  --figma-z-index-1: 1;
+  --figma-z-index-2: 2;
+  --figma-z-index-dropdown: 10;
+  --figma-z-index-modal: 50;
+  --figma-z-index-tooltip: 100;
+  --figma-shadow-slider: 0 1px 3px 0 #0000001a, 0 3px 8px 0 #0000001a, 0 0 0.5px 0 #0000002e, inset 0 0 0 0.5px #0000001a;
+  --figma-shadow-hud: 0px 5px 17px rgba(0, 0, 0, 0.2), 0px 2px 7px rgba(0, 0, 0, 0.15);
+  --font-figma: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "SFProLocalRange";
+  --font-figma-code: "Roboto Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
+  --font-weight-figma-default: 450;
+  --font-weight-figma-heavy: 550;
+  --font-weight-figma-medium: 450;
+  --font-weight-figma-strong: 550;
+  --text-figma-body-large: .8125rem;
+  --text-figma-body-large-strong: .8125rem;
+  --text-figma-body-medium: .6875rem;
+  --text-figma-body-medium-strong: .6875rem;
+  --text-figma-body-small: .5625rem;
+  --text-figma-body-small-strong: .5625rem;
+  --text-figma-heading-display: 3rem;
+  --text-figma-heading-large: 1.5rem;
+  --text-figma-heading-medium: .9375rem;
+  --text-figma-heading-small: .8125rem;
+  --leading-figma-body-large: 1.375rem;
+  --leading-figma-body-large-strong: 1.375rem;
+  --leading-figma-body-medium: 1rem;
+  --leading-figma-body-medium-strong: 1rem;
+  --leading-figma-body-small: .875rem;
+  --leading-figma-body-small-strong: .875rem;
+  --leading-figma-heading-display: 3.5rem;
+  --leading-figma-heading-large: 2rem;
+  --leading-figma-heading-medium: 1.5625rem;
+  --leading-figma-heading-small: 1.375rem;
+  --text-figma-body-large--line-height: 1.375rem;
+  --text-figma-body-large-strong--line-height: 1.375rem;
+  --text-figma-body-medium--line-height: 1rem;
+  --text-figma-body-medium-strong--line-height: 1rem;
+  --text-figma-body-small--line-height: .875rem;
+  --text-figma-body-small-strong--line-height: .875rem;
+  --text-figma-heading-display--line-height: 3.5rem;
+  --text-figma-heading-large--line-height: 2rem;
+  --text-figma-heading-medium--line-height: 1.5625rem;
+  --text-figma-heading-small--line-height: 1.375rem;
+  --tracking-figma-body-large: -.00203rem;
+  --tracking-figma-body-large-strong: -.00203rem;
+  --tracking-figma-body-medium: .00344rem;
+  --tracking-figma-body-medium-strong: .00344rem;
+  --tracking-figma-body-small: .00281rem;
+  --tracking-figma-body-small-strong: .00281rem;
+  --tracking-figma-heading-display: -.09rem;
+  --tracking-figma-heading-large: -.0255rem;
+  --tracking-figma-heading-medium: -.00469rem;
+  --tracking-figma-heading-small: -.00203rem;
+  --text-figma-body-large--letter-spacing: -.00203rem;
+  --text-figma-body-large-strong--letter-spacing: -.00203rem;
+  --text-figma-body-medium--letter-spacing: .00344rem;
+  --text-figma-body-medium-strong--letter-spacing: .00344rem;
+  --text-figma-body-small--letter-spacing: .00281rem;
+  --text-figma-body-small-strong--letter-spacing: .00281rem;
+  --text-figma-heading-display--letter-spacing: -.09rem;
+  --text-figma-heading-large--letter-spacing: -.0255rem;
+  --text-figma-heading-medium--letter-spacing: -.00469rem;
+  --text-figma-heading-small--letter-spacing: -.00203rem;
+  --text-figma-body-large-strong--font-weight: 550;
+  --text-figma-body-medium-strong--font-weight: 550;
+  --text-figma-body-small-strong--font-weight: 550;
+  --text-figma-heading-large--font-weight: 550;
+  --text-figma-heading-medium--font-weight: 550;
+  --text-figma-heading-small--font-weight: 550;
+  --radius-figma-full: 9999px;
+  --radius-figma-lg: .8125rem;
+  --radius-figma-md: .3125rem;
+  --radius-figma-none: 0;
+  --radius-figma-sm: .125rem;
+  --spacing-figma-0: 0;
+  --spacing-figma-0\.5: .125rem;
+  --spacing-figma-1: .25rem;
+  --spacing-figma-1\.5: .375rem;
+  --spacing-figma-2: .5rem;
+  --spacing-figma-2\.5: .75rem;
+  --spacing-figma-3: 1rem;
+  --spacing-figma-4: 1.5rem;
+  --spacing-figma-5: 2rem;
+  --spacing-figma-6: 2.5rem;
+  --border-figma-1: 1px;
+  --border-figma-4: .25rem;
+  --transition-duration-figma-100: 100ms;
+  --transition-duration-figma-200: 200ms;
+  --transition-duration-figma-300: 300ms;
+  --opacity-figma-50: 0.5;
+  --opacity-figma-disabled: 0.3;
+  --z-index-figma-1: 1;
+  --z-index-figma-2: 2;
+  --z-index-figma-dropdown: 10;
+  --z-index-figma-modal: 50;
+  --z-index-figma-tooltip: 100;
+}
+
+@theme inline {
+  --shadow-figma-elevation-100: var(--figma-elevation-100);
+  --shadow-figma-elevation-200: var(--figma-elevation-200);
+  --shadow-figma-elevation-300: var(--figma-elevation-300);
+  --shadow-figma-elevation-400: var(--figma-elevation-400);
+  --shadow-figma-elevation-500: var(--figma-elevation-500);
+  --shadow-figma-tooltip: var(--figma-elevation-300);
+  --shadow-figma-menu: var(--figma-elevation-400);
+  --shadow-figma-modal: var(--figma-elevation-500);
+  --shadow-figma-slider: 0 1px 3px 0 #0000001a, 0 3px 8px 0 #0000001a, 0 0 0.5px 0 #0000002e, inset 0 0 0 0.5px #0000001a;
+  --shadow-figma-hud: 0px 5px 17px rgba(0, 0, 0, 0.2), 0px 2px 7px rgba(0, 0, 0, 0.15);
+}
+
+.figjam, .figma-light .figjam, .figjam .figma-light, .figjam.figma-light {
+  --figma-color-bg: #ffffff;
+  --figma-color-bg-assistive: #ff24bd;
+  --figma-color-bg-assistive-hover: #ea10ac;
+  --figma-color-bg-assistive-pressed: #ea10ac;
+  --figma-color-bg-assistive-secondary: #cb0b96;
+  --figma-color-bg-assistive-tertiary: #ffe0fc;
+  --figma-color-bg-brand: #9747ff;
+  --figma-color-bg-brand-hover: #8638e5;
+  --figma-color-bg-brand-pressed: #8638e5;
+  --figma-color-bg-brand-secondary: #7c2bda;
+  --figma-color-bg-brand-tertiary: #f1e5ff;
+  --figma-color-bg-component: #9747ff;
+  --figma-color-bg-component-hover: #8638e5;
+  --figma-color-bg-component-pressed: #8638e5;
+  --figma-color-bg-component-secondary: #7c2bda;
+  --figma-color-bg-component-tertiary: #f1e5ff;
+  --figma-color-bg-danger: #f24822;
+  --figma-color-bg-danger-hover: #dc3412;
+  --figma-color-bg-danger-pressed: #dc3412;
+  --figma-color-bg-danger-secondary: #bd2915;
+  --figma-color-bg-danger-tertiary: #ffe2e0;
+  --figma-color-bg-design: #0d99ff;
+  --figma-color-bg-design-hover: #007be5;
+  --figma-color-bg-design-pressed: #007be5;
+  --figma-color-bg-design-secondary: #0768cf;
+  --figma-color-bg-design-tertiary: #e5f4ff;
+  --figma-color-bg-disabled: #d9d9d9;
+  --figma-color-bg-disabled-secondary: #b3b3b3;
+  --figma-color-bg-figjam: #9747ff;
+  --figma-color-bg-figjam-hover: #8638e5;
+  --figma-color-bg-figjam-pressed: #8638e5;
+  --figma-color-bg-figjam-secondary: #7c2bda;
+  --figma-color-bg-figjam-tertiary: #f1e5ff;
+  --figma-color-bg-handoff: #14ae5c;
+  --figma-color-bg-handoff-hover: #009951;
+  --figma-color-bg-handoff-pressed: #009951;
+  --figma-color-bg-handoff-secondary: #008043;
+  --figma-color-bg-handoff-tertiary: #daecdf;
+  --figma-color-bg-hover: #f5f5f5;
+  --figma-color-bg-info: #f1e5ff;
+  --figma-color-bg-inverse: #2c2c2c;
+  --figma-color-bg-measure: #f24822;
+  --figma-color-bg-measure-hover: #dc3412;
+  --figma-color-bg-measure-pressed: #dc3412;
+  --figma-color-bg-measure-secondary: #bd2915;
+  --figma-color-bg-measure-tertiary: #ffe2e0;
+  --figma-color-bg-menu: #1e1e1e;
+  --figma-color-bg-menu-disabled: #757575;
+  --figma-color-bg-menu-hover: #2c2c2c;
+  --figma-color-bg-menu-pressed: #2c2c2c;
+  --figma-color-bg-menu-secondary: #383838;
+  --figma-color-bg-menu-selected: #9747ff;
+  --figma-color-bg-menu-selected-hover: #8638e5;
+  --figma-color-bg-menu-selected-pressed: #8638e5;
+  --figma-color-bg-menu-selected-secondary: #473956;
+  --figma-color-bg-menu-selected-tertiary: #473956;
+  --figma-color-bg-menu-tertiary: #444444;
+  --figma-color-bg-onselected: #e4ccff;
+  --figma-color-bg-onselected-hover: #e4ccff;
+  --figma-color-bg-onselected-pressed: #e4ccff;
+  --figma-color-bg-pressed: #f5f5f5;
+  --figma-color-bg-secondary: #f5f5f5;
+  --figma-color-bg-selected: #f1e5ff;
+  --figma-color-bg-selected-hover: #e4ccff;
+  --figma-color-bg-selected-pressed: #e4ccff;
+  --figma-color-bg-selected-secondary: #f9f5ff;
+  --figma-color-bg-selected-strong: #9747ff;
+  --figma-color-bg-selected-tertiary: #f9f5ff;
+  --figma-color-bg-success: #14ae5c;
+  --figma-color-bg-success-hover: #009951;
+  --figma-color-bg-success-pressed: #009951;
+  --figma-color-bg-success-secondary: #008043;
+  --figma-color-bg-success-tertiary: #cff7d3;
+  --figma-color-bg-tertiary: #e6e6e6;
+  --figma-color-bg-toolbar: #ffffff;
+  --figma-color-bg-toolbar-disabled: #d9d9d9;
+  --figma-color-bg-toolbar-hover: #f5f5f5;
+  --figma-color-bg-toolbar-pressed: #f5f5f5;
+  --figma-color-bg-toolbar-secondary: #f5f5f5;
+  --figma-color-bg-toolbar-selected: #9747ff;
+  --figma-color-bg-toolbar-selected-hover: #8638e5;
+  --figma-color-bg-toolbar-selected-pressed: #8638e5;
+  --figma-color-bg-toolbar-selected-secondary: #7c2bda;
+  --figma-color-bg-toolbar-selected-tertiary: #9747ff;
+  --figma-color-bg-toolbar-tertiary: #e6e6e6;
+  --figma-color-bg-tooltip: #1e1e1e;
+  --figma-color-bg-tooltip-disabled: #757575;
+  --figma-color-bg-tooltip-hover: #2c2c2c;
+  --figma-color-bg-tooltip-pressed: #2c2c2c;
+  --figma-color-bg-tooltip-secondary: #383838;
+  --figma-color-bg-tooltip-selected: #9747ff;
+  --figma-color-bg-tooltip-selected-hover: #8638e5;
+  --figma-color-bg-tooltip-selected-pressed: #8638e5;
+  --figma-color-bg-tooltip-selected-secondary: #473956;
+  --figma-color-bg-tooltip-selected-tertiary: #473956;
+  --figma-color-bg-tooltip-tertiary: #444444;
+  --figma-color-bg-warning: #ffcd29;
+  --figma-color-bg-warning-hover: #ffc21a;
+  --figma-color-bg-warning-pressed: #ffc21a;
+  --figma-color-bg-warning-secondary: #fab815;
+  --figma-color-bg-warning-tertiary: #fff1c2;
+  --figma-color-bghoverondarkcanvas: #ffffff33;
+  --figma-color-bghoveronlightcanvas: #00000033;
+  --figma-color-bghovertransparent: #0000000d;
+  --figma-color-bgsecondaryoncanvas: #e6e6e6;
+  --figma-color-bgselectedarea: #974aff33;
+  --figma-color-bgtransparent: #ffffff99;
+  --figma-color-bgtransparent-secondary-hover: #0000001a;
+  --figma-color-bgtransparent-secondary-pressed: #00000026;
+  --figma-color-bgtransparentsecondary: #ffffff;
+  --figma-color-bgvoting: #ffcd29;
+  --figma-color-bgvotingsecondary: #fff1c2;
+  --figma-color-bgvotingtertiary: #fffbeb;
+  --figma-color-bgvotingwheeldial: #fffbeb;
+  --figma-color-bgvotingwheelhover: #fff1c2;
+  --figma-color-border: #e6e6e6;
+  --figma-color-border-assistive: #ffbdf2;
+  --figma-color-border-assistive-strong: #ea10ac;
+  --figma-color-border-brand: #e4ccff;
+  --figma-color-border-brand-strong: #8638e5;
+  --figma-color-border-component: #e4ccff;
+  --figma-color-border-component-hover: #9747ff;
+  --figma-color-border-component-strong: #8638e5;
+  --figma-color-border-danger: #ffc7c2;
+  --figma-color-border-danger-strong: #dc3412;
+  --figma-color-border-design: #bde3ff;
+  --figma-color-border-design-strong: #007be5;
+  --figma-color-border-disabled: #e6e6e6;
+  --figma-color-border-disabled-strong: #0000004d;
+  --figma-color-border-figjam: #e4ccff;
+  --figma-color-border-figjam-strong: #8638e5;
+  --figma-color-border-handoff: #aff4c6;
+  --figma-color-border-handoff-strong: #009951;
+  --figma-color-border-measure: #ffc7c2;
+  --figma-color-border-measure-strong: #dc3412;
+  --figma-color-border-menu: #383838;
+  --figma-color-border-menu-disabled: #383838;
+  --figma-color-border-menu-disabled-strong: #383838;
+  --figma-color-border-menu-onselected: #d9b8ff;
+  --figma-color-border-menu-onselected-strong: #ffffff;
+  --figma-color-border-menu-selected: #9747ff;
+  --figma-color-border-menu-selected-strong: #d9b8ff;
+  --figma-color-border-menu-strong: #ffffff;
+  --figma-color-border-onassistive: #ea10ac;
+  --figma-color-border-onassistive-strong: #ffffff;
+  --figma-color-border-onbrand: #8638e5;
+  --figma-color-border-onbrand-strong: #ffffff;
+  --figma-color-border-oncomponent: #8638e5;
+  --figma-color-border-oncomponent-strong: #ffffff;
+  --figma-color-border-ondanger: #dc3412;
+  --figma-color-border-ondanger-strong: #ffffff;
+  --figma-color-border-ondesign: #007be5;
+  --figma-color-border-ondesign-strong: #ffffff;
+  --figma-color-border-onfigjam: #8638e5;
+  --figma-color-border-onfigjam-strong: #8638e5;
+  --figma-color-border-onmeasure: #dc3412;
+  --figma-color-border-onmeasure-strong: #ffffff;
+  --figma-color-border-onselected: #e4ccff;
+  --figma-color-border-onselected-strong: #000000e5;
+  --figma-color-border-onsuccess: #009951;
+  --figma-color-border-onsuccess-strong: #ffffff;
+  --figma-color-border-onwarning: #fab815;
+  --figma-color-border-onwarning-strong: #000000e5;
+  --figma-color-border-selected: #9747ff;
+  --figma-color-border-selected-strong: #8638e5;
+  --figma-color-border-strong: #2c2c2c;
+  --figma-color-border-success: #aff4c6;
+  --figma-color-border-success-strong: #009951;
+  --figma-color-border-toolbar: #e6e6e6;
+  --figma-color-border-toolbar-disabled: #e6e6e6;
+  --figma-color-border-toolbar-onselected: #ffffff;
+  --figma-color-border-toolbar-selected: #9747ff;
+  --figma-color-border-toolbar-selected-strong: #d9b8ff;
+  --figma-color-border-toolbar-strong: #2c2c2c;
+  --figma-color-border-tooltip: #383838;
+  --figma-color-border-tooltip-disabled: #383838;
+  --figma-color-border-tooltip-disabled-strong: #383838;
+  --figma-color-border-tooltip-onselected: #8638e5;
+  --figma-color-border-tooltip-onselected-strong: #ffffff;
+  --figma-color-border-tooltip-selected: #9747ff;
+  --figma-color-border-tooltip-selected-strong: #d9b8ff;
+  --figma-color-border-tooltip-strong: #ffffff;
+  --figma-color-border-warning: #ffe8a3;
+  --figma-color-border-warning-strong: #b86200;
+  --figma-color-bordertranslucent: #0000001a;
+  --figma-color-conditionalborder: #ffffff00;
+  --figma-color-icon: #000000e5;
+  --figma-color-icon-assistive: #ea10ac;
+  --figma-color-icon-assistive-pressed: #cb0b96;
+  --figma-color-icon-assistive-secondary: #ea10ac;
+  --figma-color-icon-assistive-tertiary: #ea10ac;
+  --figma-color-icon-brand: #8638e5;
+  --figma-color-icon-brand-pressed: #7c2bda;
+  --figma-color-icon-brand-secondary: #d9b8ff;
+  --figma-color-icon-brand-tertiary: #e4ccff;
+  --figma-color-icon-component: #8638e5;
+  --figma-color-icon-component-pressed: #7c2bda;
+  --figma-color-icon-component-secondary: #c5b2dc;
+  --figma-color-icon-component-tertiary: #c5b2dc;
+  --figma-color-icon-danger: #f24822;
+  --figma-color-icon-danger-hover: #bd2915;
+  --figma-color-icon-danger-pressed: #bd2915;
+  --figma-color-icon-danger-secondary: #f24822;
+  --figma-color-icon-danger-secondary-hover: #f24822;
+  --figma-color-icon-danger-tertiary: #f24822;
+  --figma-color-icon-design: #007be5;
+  --figma-color-icon-design-pressed: #0768cf;
+  --figma-color-icon-design-secondary: #007be5;
+  --figma-color-icon-design-tertiary: #007be5;
+  --figma-color-icon-disabled: #0000004d;
+  --figma-color-icon-figjam: #8638e5;
+  --figma-color-icon-figjam-pressed: #7c2bda;
+  --figma-color-icon-figjam-secondary: #c5b2dc;
+  --figma-color-icon-figjam-tertiary: #c5b2dc;
+  --figma-color-icon-handoff: #009951;
+  --figma-color-icon-handoff-pressed: #008043;
+  --figma-color-icon-handoff-secondary: #009951;
+  --figma-color-icon-handoff-tertiary: #009951;
+  --figma-color-icon-hover: #000000e5;
+  --figma-color-icon-measure: #f24822;
+  --figma-color-icon-measure-hover: #bd2915;
+  --figma-color-icon-measure-pressed: #bd2915;
+  --figma-color-icon-measure-secondary: #f24822;
+  --figma-color-icon-measure-secondary-hover: #f24822;
+  --figma-color-icon-measure-tertiary: #f24822;
+  --figma-color-icon-menu: #ffffff;
+  --figma-color-icon-menu-danger: #f24822;
+  --figma-color-icon-menu-disabled: #ffffff66;
+  --figma-color-icon-menu-hover: #ffffff;
+  --figma-color-icon-menu-ondisabled: #1e1e1e;
+  --figma-color-icon-menu-onselected: #ffffff;
+  --figma-color-icon-menu-pressed: #9747ff;
+  --figma-color-icon-menu-secondary: #ffffffb2;
+  --figma-color-icon-menu-secondary-hover: #ffffff;
+  --figma-color-icon-menu-selected: #d9b8ff;
+  --figma-color-icon-menu-selected-secondary: #d9b8ff;
+  --figma-color-icon-menu-selected-tertiary: #d9b8ff;
+  --figma-color-icon-menu-tertiary: #ffffff66;
+  --figma-color-icon-menu-tertiary-hover: #ffffff;
+  --figma-color-icon-menu-warning: #ffcd29;
+  --figma-color-icon-onassistive: #ffffff;
+  --figma-color-icon-onassistive-secondary: #ffffffcc;
+  --figma-color-icon-onassistive-tertiary: #ffffff66;
+  --figma-color-icon-onbrand: #ffffff;
+  --figma-color-icon-onbrand-secondary: #ffffffcc;
+  --figma-color-icon-onbrand-tertiary: #ffffff66;
+  --figma-color-icon-oncomponent: #ffffff;
+  --figma-color-icon-oncomponent-secondary: #ffffffcc;
+  --figma-color-icon-oncomponent-tertiary: #ffffff66;
+  --figma-color-icon-ondanger: #ffffff;
+  --figma-color-icon-ondanger-secondary: #ffffffcc;
+  --figma-color-icon-ondanger-tertiary: #ffffff66;
+  --figma-color-icon-ondesign: #ffffff;
+  --figma-color-icon-ondesign-secondary: #ffffffcc;
+  --figma-color-icon-ondesign-tertiary: #ffffff66;
+  --figma-color-icon-ondisabled: #ffffff;
+  --figma-color-icon-onfigjam: #ffffff;
+  --figma-color-icon-onfigjam-secondary: #ffffffcc;
+  --figma-color-icon-onfigjam-tertiary: #ffffff66;
+  --figma-color-icon-oninverse: #ffffffe5;
+  --figma-color-icon-onmeasure: #ffffff;
+  --figma-color-icon-onmeasure-secondary: #ffffffcc;
+  --figma-color-icon-onmeasure-tertiary: #ffffff66;
+  --figma-color-icon-onselected: #000000e5;
+  --figma-color-icon-onselected-secondary: #00000080;
+  --figma-color-icon-onselected-strong: #ffffff;
+  --figma-color-icon-onselected-tertiary: #0000004d;
+  --figma-color-icon-onsuccess: #ffffff;
+  --figma-color-icon-onsuccess-secondary: #ffffffcc;
+  --figma-color-icon-onsuccess-tertiary: #ffffff66;
+  --figma-color-icon-onwarning: #000000e5;
+  --figma-color-icon-onwarning-secondary: #00000080;
+  --figma-color-icon-onwarning-tertiary: #0000004d;
+  --figma-color-icon-pressed: #8638e5;
+  --figma-color-icon-secondary: #00000080;
+  --figma-color-icon-secondary-hover: #000000e5;
+  --figma-color-icon-selected: #8638e5;
+  --figma-color-icon-selected-secondary: #8638e5;
+  --figma-color-icon-selected-tertiary: #8638e5;
+  --figma-color-icon-success: #14ae5c;
+  --figma-color-icon-success-pressed: #008043;
+  --figma-color-icon-success-secondary: #14ae5c;
+  --figma-color-icon-success-tertiary: #14ae5c;
+  --figma-color-icon-tertiary: #0000004d;
+  --figma-color-icon-tertiary-hover: #000000e5;
+  --figma-color-icon-toolbar: #000000e5;
+  --figma-color-icon-toolbar-danger: #f24822;
+  --figma-color-icon-toolbar-disabled: #0000004d;
+  --figma-color-icon-toolbar-hover: #000000e5;
+  --figma-color-icon-toolbar-ondisabled: #0000004d;
+  --figma-color-icon-toolbar-onselected: #ffffff;
+  --figma-color-icon-toolbar-pressed: #9747ff;
+  --figma-color-icon-toolbar-secondary: #00000080;
+  --figma-color-icon-toolbar-secondary-hover: #000000e5;
+  --figma-color-icon-toolbar-selected: #8638e5;
+  --figma-color-icon-toolbar-selected-secondary: #8638e5;
+  --figma-color-icon-toolbar-selected-tertiary: #8638e5;
+  --figma-color-icon-toolbar-tertiary: #0000004d;
+  --figma-color-icon-toolbar-tertiary-hover: #000000e5;
+  --figma-color-icon-toolbar-warning: #ffcd29;
+  --figma-color-icon-tooltip: #ffffff;
+  --figma-color-icon-tooltip-danger: #f24822;
+  --figma-color-icon-tooltip-disabled: #ffffff66;
+  --figma-color-icon-tooltip-hover: #ffffff;
+  --figma-color-icon-tooltip-ondisabled: #1e1e1e;
+  --figma-color-icon-tooltip-onselected: #ffffff;
+  --figma-color-icon-tooltip-pressed: #9747ff;
+  --figma-color-icon-tooltip-secondary: #ffffffb2;
+  --figma-color-icon-tooltip-secondary-hover: #ffffff;
+  --figma-color-icon-tooltip-selected: #d9b8ff;
+  --figma-color-icon-tooltip-selected-secondary: #d9b8ff;
+  --figma-color-icon-tooltip-selected-tertiary: #d9b8ff;
+  --figma-color-icon-tooltip-tertiary: #ffffff66;
+  --figma-color-icon-tooltip-tertiary-hover: #ffffff;
+  --figma-color-icon-tooltip-warning: #ffcd29;
+  --figma-color-icon-warning: #ffcd29;
+  --figma-color-icon-warning-pressed: #b86200;
+  --figma-color-icon-warning-secondary: #ffcd29;
+  --figma-color-icon-warning-tertiary: #ffcd29;
+  --figma-color-icondesignfilesecondary: #80caff;
+  --figma-color-iconfigjamfilesecondary: #d9b8ff;
+  --figma-color-iconondarkcanvas: #ffffffe5;
+  --figma-color-icononlightcanvas: #000000e5;
+  --figma-color-icononvoting: #000000e5;
+  --figma-color-iconprototypefile: #d9d9d9;
+  --figma-color-iconprototypefilesecondary: #2c2c2c;
+  --figma-color-iconpublishedfile: #2c2c2c;
+  --figma-color-iconpublishedfilesecondary: #757575;
+  --figma-color-loading: #0000001a;
+  --figma-color-loadingmenu: #ffffff1a;
+  --figma-color-loadingsecondary: #0000000d;
+  --figma-color-loadingsecondarymenu: #ffffff0d;
+  --figma-color-modalbackdrop: #00000080;
+  --figma-color-multiplayerblue: #007be5;
+  --figma-color-multiplayerbluehover: #0768cf;
+  --figma-color-multiplayerbluesecondary: #034ac1;
+  --figma-color-multiplayergreen: #14ae5c;
+  --figma-color-multiplayergreenhover: #009951;
+  --figma-color-multiplayergreensecondary: #036838;
+  --figma-color-multiplayergrey: #667799;
+  --figma-color-multiplayergreyhover: #536383;
+  --figma-color-multiplayergreysecondary: #394360;
+  --figma-color-multiplayerpink: #ff24bd;
+  --figma-color-multiplayerpinkhover: #ea10ac;
+  --figma-color-multiplayerpinksecondary: #971172;
+  --figma-color-multiplayerpurple: #9747ff;
+  --figma-color-multiplayerpurplehover: #8638e5;
+  --figma-color-multiplayerpurplesecondary: #681abb;
+  --figma-color-multiplayerred: #f24822;
+  --figma-color-multiplayerredhover: #dc3412;
+  --figma-color-multiplayerredsecondary: #9f1f18;
+  --figma-color-multiplayeryellow: #ffcd29;
+  --figma-color-multiplayeryellowhover: #ffc21a;
+  --figma-color-multiplayeryellowsecondary: #eba611;
+  --figma-color-nodehandle: #80caff;
+  --figma-color-prototypeloadingbackdrop: #000000e5;
+  --figma-color-scrollbar: #b3b3b380;
+  --figma-color-shadow: #00000026;
+  --figma-color-text: #000000e5;
+  --figma-color-text-assistive: #ea10ac;
+  --figma-color-text-assistive-pressed: #cb0b96;
+  --figma-color-text-assistive-secondary: #ea10ac;
+  --figma-color-text-assistive-tertiary: #ea10ac;
+  --figma-color-text-brand: #8638e5;
+  --figma-color-text-brand-secondary: #8638e5;
+  --figma-color-text-brand-tertiary: #8638e5;
+  --figma-color-text-component: #8638e5;
+  --figma-color-text-component-pressed: #7c2bda;
+  --figma-color-text-component-secondary: #c5b2dc;
+  --figma-color-text-component-tertiary: #c5b2dc;
+  --figma-color-text-danger: #dc3412;
+  --figma-color-text-danger-secondary: #dc3412;
+  --figma-color-text-danger-tertiary: #dc3412;
+  --figma-color-text-design: #007be5;
+  --figma-color-text-design-pressed: #0768cf;
+  --figma-color-text-design-secondary: #007be5;
+  --figma-color-text-design-tertiary: #007be5;
+  --figma-color-text-disabled: #0000004d;
+  --figma-color-text-figjam: #8638e5;
+  --figma-color-text-figjam-pressed: #7c2bda;
+  --figma-color-text-figjam-secondary: #c5b2dc;
+  --figma-color-text-figjam-tertiary: #c5b2dc;
+  --figma-color-text-handoff: #009951;
+  --figma-color-text-handoff-secondary: #009951;
+  --figma-color-text-handoff-tertiary: #009951;
+  --figma-color-text-hover: #000000e5;
+  --figma-color-text-measure: #dc3412;
+  --figma-color-text-measure-secondary: #dc3412;
+  --figma-color-text-measure-tertiary: #dc3412;
+  --figma-color-text-menu: #ffffff;
+  --figma-color-text-menu-danger: #f24822;
+  --figma-color-text-menu-disabled: #ffffff66;
+  --figma-color-text-menu-hover: #ffffff;
+  --figma-color-text-menu-ondisabled: #1e1e1e;
+  --figma-color-text-menu-onselected: #ffffff;
+  --figma-color-text-menu-secondary: #ffffffb2;
+  --figma-color-text-menu-secondary-hover: #ffffff;
+  --figma-color-text-menu-selected: #d9b8ff;
+  --figma-color-text-menu-selected-secondary: #d9b8ff;
+  --figma-color-text-menu-selected-tertiary: #d9b8ff;
+  --figma-color-text-menu-tertiary: #ffffff66;
+  --figma-color-text-menu-tertiary-hover: #ffffff;
+  --figma-color-text-menu-warning: #ffd966;
+  --figma-color-text-onassistive: #ffffff;
+  --figma-color-text-onassistive-secondary: #ffffffcc;
+  --figma-color-text-onassistive-tertiary: #ffffff66;
+  --figma-color-text-onbrand: #ffffff;
+  --figma-color-text-onbrand-secondary: #ffffffcc;
+  --figma-color-text-onbrand-tertiary: #ffffff66;
+  --figma-color-text-oncomponent: #ffffff;
+  --figma-color-text-oncomponent-secondary: #ffffffcc;
+  --figma-color-text-oncomponent-tertiary: #ffffff66;
+  --figma-color-text-ondanger: #ffffff;
+  --figma-color-text-ondanger-secondary: #ffffffcc;
+  --figma-color-text-ondanger-tertiary: #ffffff66;
+  --figma-color-text-ondesign: #ffffff;
+  --figma-color-text-ondesign-secondary: #ffffffcc;
+  --figma-color-text-ondesign-tertiary: #ffffff66;
+  --figma-color-text-ondisabled: #ffffff;
+  --figma-color-text-onfigjam: #ffffff;
+  --figma-color-text-onfigjam-secondary: #ffffffcc;
+  --figma-color-text-onfigjam-tertiary: #ffffff66;
+  --figma-color-text-oninverse: #ffffffe5;
+  --figma-color-text-onmeasure: #ffffff;
+  --figma-color-text-onmeasure-secondary: #ffffffcc;
+  --figma-color-text-onmeasure-tertiary: #ffffff66;
+  --figma-color-text-onselected: #000000e5;
+  --figma-color-text-onselected-secondary: #00000080;
+  --figma-color-text-onselected-strong: #ffffff;
+  --figma-color-text-onselected-tertiary: #0000004d;
+  --figma-color-text-onsuccess: #ffffff;
+  --figma-color-text-onsuccess-secondary: #ffffffcc;
+  --figma-color-text-onsuccess-tertiary: #ffffff66;
+  --figma-color-text-onwarning: #000000e5;
+  --figma-color-text-onwarning-secondary: #00000080;
+  --figma-color-text-onwarning-tertiary: #0000004d;
+  --figma-color-text-secondary: #00000080;
+  --figma-color-text-secondary-hover: #000000e5;
+  --figma-color-text-selected: #8638e5;
+  --figma-color-text-selected-secondary: #8638e5;
+  --figma-color-text-selected-tertiary: #8638e5;
+  --figma-color-text-success: #009951;
+  --figma-color-text-success-secondary: #009951;
+  --figma-color-text-success-tertiary: #009951;
+  --figma-color-text-tertiary: #0000004d;
+  --figma-color-text-tertiary-hover: #000000e5;
+  --figma-color-text-toolbar: #000000e5;
+  --figma-color-text-toolbar-danger: #ffafa3;
+  --figma-color-text-toolbar-disabled: #0000004d;
+  --figma-color-text-toolbar-hover: #000000e5;
+  --figma-color-text-toolbar-ondisabled: #2c2c2c;
+  --figma-color-text-toolbar-onselected: #ffffff;
+  --figma-color-text-toolbar-secondary: #00000080;
+  --figma-color-text-toolbar-secondary-hover: #000000e5;
+  --figma-color-text-toolbar-selected: #d9b8ff;
+  --figma-color-text-toolbar-selected-secondary: #d9b8ff;
+  --figma-color-text-toolbar-selected-tertiary: #d9b8ff;
+  --figma-color-text-toolbar-tertiary: #0000004d;
+  --figma-color-text-toolbar-tertiary-hover: #000000e5;
+  --figma-color-text-toolbar-warning: #b86200;
+  --figma-color-text-tooltip: #ffffff;
+  --figma-color-text-tooltip-danger: #ffafa3;
+  --figma-color-text-tooltip-disabled: #ffffff66;
+  --figma-color-text-tooltip-hover: #ffffff;
+  --figma-color-text-tooltip-ondisabled: #1e1e1e;
+  --figma-color-text-tooltip-onselected: #ffffff;
+  --figma-color-text-tooltip-secondary: #ffffffb2;
+  --figma-color-text-tooltip-secondary-hover: #ffffff;
+  --figma-color-text-tooltip-selected: #d9b8ff;
+  --figma-color-text-tooltip-selected-secondary: #d9b8ff;
+  --figma-color-text-tooltip-selected-tertiary: #d9b8ff;
+  --figma-color-text-tooltip-tertiary: #ffffff66;
+  --figma-color-text-tooltip-tertiary-hover: #ffffff;
+  --figma-color-text-tooltip-warning: #ffd966;
+  --figma-color-text-warning: #b86200;
+  --figma-color-text-warning-secondary: #b86200;
+  --figma-color-text-warning-tertiary: #b86200;
+  --figma-color-texthighlight: #974aff66;
+  --figma-color-textondarkcanvas: #ffffffe5;
+  --figma-color-textondarkcanvassecondary: #ffffffb2;
+  --figma-color-textonlightcanvas: #000000e5;
+  --figma-color-textonlightcanvassecondary: #0000004d;
+  --figma-color-textonmultiplayerblue: #ffffff;
+  --figma-color-textonmultiplayergreen: #ffffff;
+  --figma-color-textonmultiplayergrey: #ffffff;
+  --figma-color-textonmultiplayerpink: #ffffff;
+  --figma-color-textonmultiplayerpurple: #ffffff;
+  --figma-color-textonmultiplayerred: #ffffff;
+  --figma-color-textonmultiplayeryellow: #000000e5;
+  --figma-color-textonvoting: #000000e5;
+  --figma-elevation-100: 0px 1px 3px rgba(0, 0, 0, 0.15), 0px 0px 0.5px rgba(0, 0, 0, 0.3);
+  --figma-elevation-200: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 3px 8px rgba(0, 0, 0, 0.1), 0px 0px 0.5px rgba(0, 0, 0, 0.18);
+  --figma-elevation-300: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 5px 12px rgba(0, 0, 0, 0.13), 0px 0px 0.5px rgba(0, 0, 0, 0.15);
+  --figma-elevation-400: 0px 2px 5px rgba(0, 0, 0, 0.15), 0px 10px 16px rgba(0, 0, 0, 0.12), 0px 0px 0.5px rgba(0, 0, 0, 0.12);
+  --figma-elevation-500: 0px 2px 5px rgba(0, 0, 0, 0.15), 0px 10px 24px rgba(0, 0, 0, 0.18), 0px 0px 0.5px rgba(0, 0, 0, 0.08);
+  --figma-shadow-tooltip: var(--figma-elevation-300);
+  --figma-shadow-menu: var(--figma-elevation-400);
+  --figma-shadow-modal: var(--figma-elevation-500);
+}
+
+.figma-dark .figjam, .figjam .figma-dark, .figjam.figma-dark {
+  --figma-color-bg: #2c2c2c;
+  --figma-color-bg-assistive: #f316b0;
+  --figma-color-bg-assistive-hover: #d01b9c;
+  --figma-color-bg-assistive-pressed: #d01b9c;
+  --figma-color-bg-assistive-secondary: #96207a;
+  --figma-color-bg-assistive-tertiary: #68275e;
+  --figma-color-bg-brand: #8a38f5;
+  --figma-color-bg-brand-hover: #7a2ed6;
+  --figma-color-bg-brand-pressed: #7a2ed6;
+  --figma-color-bg-brand-secondary: #652ca8;
+  --figma-color-bg-brand-tertiary: #473956;
+  --figma-color-bg-component: #8a38f5;
+  --figma-color-bg-component-hover: #7a2ed6;
+  --figma-color-bg-component-pressed: #7a2ed6;
+  --figma-color-bg-component-secondary: #652ca8;
+  --figma-color-bg-component-tertiary: #473956;
+  --figma-color-bg-danger: #e03e1a;
+  --figma-color-bg-danger-hover: #c4381c;
+  --figma-color-bg-danger-pressed: #c4381c;
+  --figma-color-bg-danger-secondary: #963323;
+  --figma-color-bg-danger-tertiary: #60332a;
+  --figma-color-bg-design: #0c8ce9;
+  --figma-color-bg-design-hover: #0a6dc2;
+  --figma-color-bg-design-pressed: #0a6dc2;
+  --figma-color-bg-design-secondary: #105cad;
+  --figma-color-bg-design-tertiary: #394360;
+  --figma-color-bg-disabled: #757575;
+  --figma-color-bg-disabled-secondary: #b3b3b3;
+  --figma-color-bg-figjam: #8a38f5;
+  --figma-color-bg-figjam-hover: #7a2ed6;
+  --figma-color-bg-figjam-pressed: #7a2ed6;
+  --figma-color-bg-figjam-secondary: #652ca8;
+  --figma-color-bg-figjam-tertiary: #473956;
+  --figma-color-bg-handoff: #198f51;
+  --figma-color-bg-handoff-hover: #078348;
+  --figma-color-bg-handoff-pressed: #078348;
+  --figma-color-bg-handoff-secondary: #0a5c35;
+  --figma-color-bg-handoff-tertiary: #476656;
+  --figma-color-bg-hover: #383838;
+  --figma-color-bg-info: #473956;
+  --figma-color-bg-inverse: #ffffff;
+  --figma-color-bg-measure: #e03e1a;
+  --figma-color-bg-measure-hover: #c4381c;
+  --figma-color-bg-measure-pressed: #c4381c;
+  --figma-color-bg-measure-secondary: #963323;
+  --figma-color-bg-measure-tertiary: #60332a;
+  --figma-color-bg-menu: #1e1e1e;
+  --figma-color-bg-menu-disabled: #757575;
+  --figma-color-bg-menu-hover: #2c2c2c;
+  --figma-color-bg-menu-pressed: #2c2c2c;
+  --figma-color-bg-menu-secondary: #383838;
+  --figma-color-bg-menu-selected: #8a38f5;
+  --figma-color-bg-menu-selected-hover: #7a2ed6;
+  --figma-color-bg-menu-selected-pressed: #7a2ed6;
+  --figma-color-bg-menu-selected-secondary: #473956;
+  --figma-color-bg-menu-selected-tertiary: #473956;
+  --figma-color-bg-menu-tertiary: #444444;
+  --figma-color-bg-onselected: #7f699b;
+  --figma-color-bg-onselected-hover: #7f699b;
+  --figma-color-bg-onselected-pressed: #7f699b;
+  --figma-color-bg-pressed: #383838;
+  --figma-color-bg-secondary: #383838;
+  --figma-color-bg-selected: #604d75;
+  --figma-color-bg-selected-hover: #6b5884;
+  --figma-color-bg-selected-pressed: #6b5884;
+  --figma-color-bg-selected-secondary: #473956;
+  --figma-color-bg-selected-strong: #50297a;
+  --figma-color-bg-selected-tertiary: #473956;
+  --figma-color-bg-success: #198f51;
+  --figma-color-bg-success-hover: #078348;
+  --figma-color-bg-success-pressed: #078348;
+  --figma-color-bg-success-secondary: #0a5c35;
+  --figma-color-bg-success-tertiary: #476656;
+  --figma-color-bg-tertiary: #444444;
+  --figma-color-bg-toolbar: #2c2c2c;
+  --figma-color-bg-toolbar-disabled: #757575;
+  --figma-color-bg-toolbar-hover: #111111;
+  --figma-color-bg-toolbar-pressed: #111111;
+  --figma-color-bg-toolbar-secondary: #383838;
+  --figma-color-bg-toolbar-selected: #8a38f5;
+  --figma-color-bg-toolbar-selected-hover: #7a2ed6;
+  --figma-color-bg-toolbar-selected-pressed: #7a2ed6;
+  --figma-color-bg-toolbar-selected-secondary: #652ca8;
+  --figma-color-bg-toolbar-selected-tertiary: #8a38f5;
+  --figma-color-bg-toolbar-tertiary: #444444;
+  --figma-color-bg-tooltip: #1e1e1e;
+  --figma-color-bg-tooltip-disabled: #757575;
+  --figma-color-bg-tooltip-hover: #2c2c2c;
+  --figma-color-bg-tooltip-pressed: #2c2c2c;
+  --figma-color-bg-tooltip-secondary: #383838;
+  --figma-color-bg-tooltip-selected: #8a38f5;
+  --figma-color-bg-tooltip-selected-hover: #7a2ed6;
+  --figma-color-bg-tooltip-selected-pressed: #7a2ed6;
+  --figma-color-bg-tooltip-selected-secondary: #473956;
+  --figma-color-bg-tooltip-selected-tertiary: #473956;
+  --figma-color-bg-tooltip-tertiary: #444444;
+  --figma-color-bg-warning: #f3c11b;
+  --figma-color-bg-warning-hover: #f2b50d;
+  --figma-color-bg-warning-pressed: #f2b50d;
+  --figma-color-bg-warning-secondary: #e4a711;
+  --figma-color-bg-warning-tertiary: #5c4100;
+  --figma-color-bghoverondarkcanvas: #ffffff33;
+  --figma-color-bghoveronlightcanvas: #00000033;
+  --figma-color-bghovertransparent: #ffffff0d;
+  --figma-color-bgsecondaryoncanvas: #111111;
+  --figma-color-bgselectedarea: #974aff33;
+  --figma-color-bgtransparent: #00000099;
+  --figma-color-bgtransparent-secondary-hover: #ffffff1a;
+  --figma-color-bgtransparent-secondary-pressed: #ffffff26;
+  --figma-color-bgtransparentsecondary: #ffffff26;
+  --figma-color-bgvoting: #f3c11b;
+  --figma-color-bgvotingsecondary: #fbe8ad;
+  --figma-color-bgvotingtertiary: #fdf7dd;
+  --figma-color-bgvotingwheeldial: #fdf7dd;
+  --figma-color-bgvotingwheelhover: #fbe8ad;
+  --figma-color-border: #444444;
+  --figma-color-border-assistive: #96207a;
+  --figma-color-border-assistive-strong: #fc9ce0;
+  --figma-color-border-brand: #652ca8;
+  --figma-color-border-brand-strong: #d1a8ff;
+  --figma-color-border-component: #652ca8;
+  --figma-color-border-component-hover: #8a38f5;
+  --figma-color-border-component-strong: #d6b6fb;
+  --figma-color-border-danger: #963323;
+  --figma-color-border-danger-strong: #fca397;
+  --figma-color-border-design: #105cad;
+  --figma-color-border-design-strong: #7cc4f8;
+  --figma-color-border-disabled: #444444;
+  --figma-color-border-disabled-strong: #ffffff66;
+  --figma-color-border-figjam: #652ca8;
+  --figma-color-border-figjam-strong: #d1a8ff;
+  --figma-color-border-handoff: #0a5c35;
+  --figma-color-border-handoff-strong: #79d297;
+  --figma-color-border-measure: #963323;
+  --figma-color-border-measure-strong: #fca397;
+  --figma-color-border-menu: #383838;
+  --figma-color-border-menu-disabled: #383838;
+  --figma-color-border-menu-disabled-strong: #383838;
+  --figma-color-border-menu-onselected: #d1a8ff;
+  --figma-color-border-menu-onselected-strong: #ffffff;
+  --figma-color-border-menu-selected: #8a38f5;
+  --figma-color-border-menu-selected-strong: #d1a8ff;
+  --figma-color-border-menu-strong: #ffffff;
+  --figma-color-border-onassistive: #d01b9c;
+  --figma-color-border-onassistive-strong: #ffffff;
+  --figma-color-border-onbrand: #7a2ed6;
+  --figma-color-border-onbrand-strong: #ffffff;
+  --figma-color-border-oncomponent: #7a2ed6;
+  --figma-color-border-oncomponent-strong: #ffffff;
+  --figma-color-border-ondanger: #c4381c;
+  --figma-color-border-ondanger-strong: #ffffff;
+  --figma-color-border-ondesign: #0a6dc2;
+  --figma-color-border-ondesign-strong: #ffffff;
+  --figma-color-border-onfigjam: #7a2ed6;
+  --figma-color-border-onfigjam-strong: #7a2ed6;
+  --figma-color-border-onmeasure: #c4381c;
+  --figma-color-border-onmeasure-strong: #ffffff;
+  --figma-color-border-onselected: #7f699b;
+  --figma-color-border-onselected-strong: #ffffffe5;
+  --figma-color-border-onsuccess: #078348;
+  --figma-color-border-onsuccess-strong: #ffffff;
+  --figma-color-border-onwarning: #e4a711;
+  --figma-color-border-onwarning-strong: #000000e5;
+  --figma-color-border-selected: #8a38f5;
+  --figma-color-border-selected-strong: #d1a8ff;
+  --figma-color-border-strong: #ffffffe5;
+  --figma-color-border-success: #0a5c35;
+  --figma-color-border-success-strong: #79d297;
+  --figma-color-border-toolbar: #444444;
+  --figma-color-border-toolbar-disabled: #ffffff66;
+  --figma-color-border-toolbar-onselected: #ffffff;
+  --figma-color-border-toolbar-selected: #8a38f5;
+  --figma-color-border-toolbar-selected-strong: #d1a8ff;
+  --figma-color-border-toolbar-strong: #ffffff;
+  --figma-color-border-tooltip: #383838;
+  --figma-color-border-tooltip-disabled: #383838;
+  --figma-color-border-tooltip-disabled-strong: #383838;
+  --figma-color-border-tooltip-onselected: #7a2ed6;
+  --figma-color-border-tooltip-onselected-strong: #ffffff;
+  --figma-color-border-tooltip-selected: #8a38f5;
+  --figma-color-border-tooltip-selected-strong: #d1a8ff;
+  --figma-color-border-tooltip-strong: #ffffff;
+  --figma-color-border-warning: #925711;
+  --figma-color-border-warning-strong: #f7d15f;
+  --figma-color-bordertranslucent: #ffffff1a;
+  --figma-color-conditionalborder: #444444;
+  --figma-color-icon: #ffffff;
+  --figma-color-icon-assistive: #fc9ce0;
+  --figma-color-icon-assistive-pressed: #fbb1ed;
+  --figma-color-icon-assistive-secondary: #fc9ce0;
+  --figma-color-icon-assistive-tertiary: #fc9ce0;
+  --figma-color-icon-brand: #d1a8ff;
+  --figma-color-icon-brand-pressed: #8a38f5;
+  --figma-color-icon-brand-secondary: #7a2ed6;
+  --figma-color-icon-brand-tertiary: #473956;
+  --figma-color-icon-component: #d1a8ff;
+  --figma-color-icon-component-pressed: #d6b6fb;
+  --figma-color-icon-component-secondary: #7f699b;
+  --figma-color-icon-component-tertiary: #7f699b;
+  --figma-color-icon-danger: #e03e1a;
+  --figma-color-icon-danger-hover: #fbbcb6;
+  --figma-color-icon-danger-pressed: #fbbcb6;
+  --figma-color-icon-danger-secondary: #e03e1a;
+  --figma-color-icon-danger-secondary-hover: #e03e1a;
+  --figma-color-icon-danger-tertiary: #e03e1a;
+  --figma-color-icon-design: #7cc4f8;
+  --figma-color-icon-design-pressed: #a8d7fa;
+  --figma-color-icon-design-secondary: #7cc4f8;
+  --figma-color-icon-design-tertiary: #7cc4f8;
+  --figma-color-icon-disabled: #ffffff66;
+  --figma-color-icon-figjam: #d1a8ff;
+  --figma-color-icon-figjam-pressed: #d6b6fb;
+  --figma-color-icon-figjam-secondary: #7f699b;
+  --figma-color-icon-figjam-tertiary: #7f699b;
+  --figma-color-icon-handoff: #79d297;
+  --figma-color-icon-handoff-pressed: #a1e8b9;
+  --figma-color-icon-handoff-secondary: #79d297;
+  --figma-color-icon-handoff-tertiary: #79d297;
+  --figma-color-icon-hover: #ffffff;
+  --figma-color-icon-measure: #e03e1a;
+  --figma-color-icon-measure-hover: #fbbcb6;
+  --figma-color-icon-measure-pressed: #fbbcb6;
+  --figma-color-icon-measure-secondary: #e03e1a;
+  --figma-color-icon-measure-secondary-hover: #e03e1a;
+  --figma-color-icon-measure-tertiary: #e03e1a;
+  --figma-color-icon-menu: #ffffff;
+  --figma-color-icon-menu-danger: #e03e1a;
+  --figma-color-icon-menu-disabled: #ffffff66;
+  --figma-color-icon-menu-hover: #ffffff;
+  --figma-color-icon-menu-ondisabled: #1e1e1e;
+  --figma-color-icon-menu-onselected: #ffffff;
+  --figma-color-icon-menu-pressed: #8a38f5;
+  --figma-color-icon-menu-secondary: #ffffffb2;
+  --figma-color-icon-menu-secondary-hover: #ffffff;
+  --figma-color-icon-menu-selected: #d1a8ff;
+  --figma-color-icon-menu-selected-secondary: #d1a8ff;
+  --figma-color-icon-menu-selected-tertiary: #d1a8ff;
+  --figma-color-icon-menu-tertiary: #ffffff66;
+  --figma-color-icon-menu-tertiary-hover: #ffffff;
+  --figma-color-icon-menu-warning: #f3c11b;
+  --figma-color-icon-onassistive: #ffffff;
+  --figma-color-icon-onassistive-secondary: #ffffffcc;
+  --figma-color-icon-onassistive-tertiary: #ffffff66;
+  --figma-color-icon-onbrand: #ffffff;
+  --figma-color-icon-onbrand-secondary: #ffffffcc;
+  --figma-color-icon-onbrand-tertiary: #ffffff66;
+  --figma-color-icon-oncomponent: #ffffff;
+  --figma-color-icon-oncomponent-secondary: #ffffffcc;
+  --figma-color-icon-oncomponent-tertiary: #ffffff66;
+  --figma-color-icon-ondanger: #ffffff;
+  --figma-color-icon-ondanger-secondary: #ffffffcc;
+  --figma-color-icon-ondanger-tertiary: #ffffff66;
+  --figma-color-icon-ondesign: #ffffff;
+  --figma-color-icon-ondesign-secondary: #ffffffcc;
+  --figma-color-icon-ondesign-tertiary: #ffffff66;
+  --figma-color-icon-ondisabled: #2c2c2c;
+  --figma-color-icon-onfigjam: #ffffff;
+  --figma-color-icon-onfigjam-secondary: #ffffffcc;
+  --figma-color-icon-onfigjam-tertiary: #ffffff66;
+  --figma-color-icon-oninverse: #000000e5;
+  --figma-color-icon-onmeasure: #ffffff;
+  --figma-color-icon-onmeasure-secondary: #ffffffcc;
+  --figma-color-icon-onmeasure-tertiary: #ffffff66;
+  --figma-color-icon-onselected: #ffffff;
+  --figma-color-icon-onselected-secondary: #ffffffb2;
+  --figma-color-icon-onselected-strong: #ffffff;
+  --figma-color-icon-onselected-tertiary: #ffffff66;
+  --figma-color-icon-onsuccess: #ffffff;
+  --figma-color-icon-onsuccess-secondary: #ffffffcc;
+  --figma-color-icon-onsuccess-tertiary: #ffffff66;
+  --figma-color-icon-onwarning: #000000e5;
+  --figma-color-icon-onwarning-secondary: #00000080;
+  --figma-color-icon-onwarning-tertiary: #0000004d;
+  --figma-color-icon-pressed: #7a2ed6;
+  --figma-color-icon-secondary: #ffffffb2;
+  --figma-color-icon-secondary-hover: #ffffff;
+  --figma-color-icon-selected: #d1a8ff;
+  --figma-color-icon-selected-secondary: #d1a8ff;
+  --figma-color-icon-selected-tertiary: #d1a8ff;
+  --figma-color-icon-success: #198f51;
+  --figma-color-icon-success-pressed: #a1e8b9;
+  --figma-color-icon-success-secondary: #198f51;
+  --figma-color-icon-success-tertiary: #198f51;
+  --figma-color-icon-tertiary: #ffffff66;
+  --figma-color-icon-tertiary-hover: #ffffff;
+  --figma-color-icon-toolbar: #ffffff;
+  --figma-color-icon-toolbar-danger: #e03e1a;
+  --figma-color-icon-toolbar-disabled: #ffffff66;
+  --figma-color-icon-toolbar-hover: #ffffff;
+  --figma-color-icon-toolbar-ondisabled: #2c2c2c;
+  --figma-color-icon-toolbar-onselected: #ffffff;
+  --figma-color-icon-toolbar-pressed: #8a38f5;
+  --figma-color-icon-toolbar-secondary: #ffffffb2;
+  --figma-color-icon-toolbar-secondary-hover: #ffffff;
+  --figma-color-icon-toolbar-selected: #d1a8ff;
+  --figma-color-icon-toolbar-selected-secondary: #d1a8ff;
+  --figma-color-icon-toolbar-selected-tertiary: #d1a8ff;
+  --figma-color-icon-toolbar-tertiary: #ffffff66;
+  --figma-color-icon-toolbar-tertiary-hover: #ffffff;
+  --figma-color-icon-toolbar-warning: #f3c11b;
+  --figma-color-icon-tooltip: #ffffff;
+  --figma-color-icon-tooltip-danger: #e03e1a;
+  --figma-color-icon-tooltip-disabled: #ffffff66;
+  --figma-color-icon-tooltip-hover: #ffffff;
+  --figma-color-icon-tooltip-ondisabled: #1e1e1e;
+  --figma-color-icon-tooltip-onselected: #ffffff;
+  --figma-color-icon-tooltip-pressed: #8a38f5;
+  --figma-color-icon-tooltip-secondary: #ffffffb2;
+  --figma-color-icon-tooltip-secondary-hover: #ffffff;
+  --figma-color-icon-tooltip-selected: #d1a8ff;
+  --figma-color-icon-tooltip-selected-secondary: #d1a8ff;
+  --figma-color-icon-tooltip-selected-tertiary: #d1a8ff;
+  --figma-color-icon-tooltip-tertiary: #ffffff66;
+  --figma-color-icon-tooltip-tertiary-hover: #ffffff;
+  --figma-color-icon-tooltip-warning: #f3c11b;
+  --figma-color-icon-warning: #f3c11b;
+  --figma-color-icon-warning-pressed: #f7d15f;
+  --figma-color-icon-warning-secondary: #f3c11b;
+  --figma-color-icon-warning-tertiary: #f3c11b;
+  --figma-color-icondesignfilesecondary: #7cc4f8;
+  --figma-color-iconfigjamfilesecondary: #d1a8ff;
+  --figma-color-iconondarkcanvas: #ffffffe5;
+  --figma-color-icononlightcanvas: #000000e5;
+  --figma-color-icononvoting: #000000e5;
+  --figma-color-iconprototypefile: #757575;
+  --figma-color-iconprototypefilesecondary: #ffffff;
+  --figma-color-iconpublishedfile: #757575;
+  --figma-color-iconpublishedfilesecondary: #b3b3b3;
+  --figma-color-loading: #ffffff1a;
+  --figma-color-loadingmenu: #ffffff1a;
+  --figma-color-loadingsecondary: #ffffff0d;
+  --figma-color-loadingsecondarymenu: #ffffff0d;
+  --figma-color-modalbackdrop: #00000080;
+  --figma-color-multiplayerblue: #0a6dc2;
+  --figma-color-multiplayerbluehover: #105cad;
+  --figma-color-multiplayerbluesecondary: #184591;
+  --figma-color-multiplayergreen: #198f51;
+  --figma-color-multiplayergreenhover: #078348;
+  --figma-color-multiplayergreensecondary: #0a4c2d;
+  --figma-color-multiplayergrey: #667799;
+  --figma-color-multiplayergreyhover: #536383;
+  --figma-color-multiplayergreysecondary: #394360;
+  --figma-color-multiplayerpink: #f316b0;
+  --figma-color-multiplayerpinkhover: #d01b9c;
+  --figma-color-multiplayerpinksecondary: #68275e;
+  --figma-color-multiplayerpurple: #8a38f5;
+  --figma-color-multiplayerpurplehover: #7a2ed6;
+  --figma-color-multiplayerpurplesecondary: #50297a;
+  --figma-color-multiplayerred: #e03e1a;
+  --figma-color-multiplayerredhover: #c4381c;
+  --figma-color-multiplayerredsecondary: #7c2622;
+  --figma-color-multiplayeryellow: #f3c11b;
+  --figma-color-multiplayeryellowhover: #f2b50d;
+  --figma-color-multiplayeryellowsecondary: #c58011;
+  --figma-color-nodehandle: #7cc4f8;
+  --figma-color-prototypeloadingbackdrop: #000000e5;
+  --figma-color-scrollbar: #b3b3b380;
+  --figma-color-shadow: #00000099;
+  --figma-color-text: #ffffff;
+  --figma-color-text-assistive: #fc9ce0;
+  --figma-color-text-assistive-pressed: #fbb1ed;
+  --figma-color-text-assistive-secondary: #fc9ce0;
+  --figma-color-text-assistive-tertiary: #fc9ce0;
+  --figma-color-text-brand: #d1a8ff;
+  --figma-color-text-brand-secondary: #d1a8ff;
+  --figma-color-text-brand-tertiary: #d1a8ff;
+  --figma-color-text-component: #d1a8ff;
+  --figma-color-text-component-pressed: #d6b6fb;
+  --figma-color-text-component-secondary: #7f699b;
+  --figma-color-text-component-tertiary: #7f699b;
+  --figma-color-text-danger: #fca397;
+  --figma-color-text-danger-secondary: #fca397;
+  --figma-color-text-danger-tertiary: #fca397;
+  --figma-color-text-design: #7cc4f8;
+  --figma-color-text-design-pressed: #a8d7fa;
+  --figma-color-text-design-secondary: #7cc4f8;
+  --figma-color-text-design-tertiary: #7cc4f8;
+  --figma-color-text-disabled: #ffffff66;
+  --figma-color-text-figjam: #c5b2dc;
+  --figma-color-text-figjam-pressed: #d6b6fb;
+  --figma-color-text-figjam-secondary: #7f699b;
+  --figma-color-text-figjam-tertiary: #7f699b;
+  --figma-color-text-handoff: #79d297;
+  --figma-color-text-handoff-secondary: #79d297;
+  --figma-color-text-handoff-tertiary: #79d297;
+  --figma-color-text-hover: #ffffff;
+  --figma-color-text-measure: #fca397;
+  --figma-color-text-measure-secondary: #fca397;
+  --figma-color-text-measure-tertiary: #fca397;
+  --figma-color-text-menu: #ffffff;
+  --figma-color-text-menu-danger: #fca397;
+  --figma-color-text-menu-disabled: #ffffff66;
+  --figma-color-text-menu-hover: #ffffff;
+  --figma-color-text-menu-ondisabled: #1e1e1e;
+  --figma-color-text-menu-onselected: #ffffff;
+  --figma-color-text-menu-secondary: #ffffffb2;
+  --figma-color-text-menu-secondary-hover: #ffffff;
+  --figma-color-text-menu-selected: #d1a8ff;
+  --figma-color-text-menu-selected-secondary: #d1a8ff;
+  --figma-color-text-menu-selected-tertiary: #d1a8ff;
+  --figma-color-text-menu-tertiary: #ffffff66;
+  --figma-color-text-menu-tertiary-hover: #ffffff;
+  --figma-color-text-menu-warning: #f7d15f;
+  --figma-color-text-onassistive: #ffffff;
+  --figma-color-text-onassistive-secondary: #ffffffcc;
+  --figma-color-text-onassistive-tertiary: #ffffff66;
+  --figma-color-text-onbrand: #ffffff;
+  --figma-color-text-onbrand-secondary: #ffffffcc;
+  --figma-color-text-onbrand-tertiary: #ffffff66;
+  --figma-color-text-oncomponent: #ffffff;
+  --figma-color-text-oncomponent-secondary: #ffffffcc;
+  --figma-color-text-oncomponent-tertiary: #ffffff66;
+  --figma-color-text-ondanger: #ffffff;
+  --figma-color-text-ondanger-secondary: #ffffffcc;
+  --figma-color-text-ondanger-tertiary: #ffffff66;
+  --figma-color-text-ondesign: #ffffff;
+  --figma-color-text-ondesign-secondary: #ffffffcc;
+  --figma-color-text-ondesign-tertiary: #ffffff66;
+  --figma-color-text-ondisabled: #2c2c2c;
+  --figma-color-text-onfigjam: #ffffff;
+  --figma-color-text-onfigjam-secondary: #ffffffcc;
+  --figma-color-text-onfigjam-tertiary: #ffffff66;
+  --figma-color-text-oninverse: #000000e5;
+  --figma-color-text-onmeasure: #ffffff;
+  --figma-color-text-onmeasure-secondary: #ffffffcc;
+  --figma-color-text-onmeasure-tertiary: #ffffff66;
+  --figma-color-text-onselected: #ffffffe5;
+  --figma-color-text-onselected-secondary: #ffffffb2;
+  --figma-color-text-onselected-strong: #ffffff;
+  --figma-color-text-onselected-tertiary: #ffffff66;
+  --figma-color-text-onsuccess: #ffffff;
+  --figma-color-text-onsuccess-secondary: #ffffffcc;
+  --figma-color-text-onsuccess-tertiary: #ffffff66;
+  --figma-color-text-onwarning: #000000e5;
+  --figma-color-text-onwarning-secondary: #00000080;
+  --figma-color-text-onwarning-tertiary: #0000004d;
+  --figma-color-text-secondary: #ffffffb2;
+  --figma-color-text-secondary-hover: #ffffff;
+  --figma-color-text-selected: #d1a8ff;
+  --figma-color-text-selected-secondary: #d1a8ff;
+  --figma-color-text-selected-tertiary: #d1a8ff;
+  --figma-color-text-success: #79d297;
+  --figma-color-text-success-secondary: #79d297;
+  --figma-color-text-success-tertiary: #79d297;
+  --figma-color-text-tertiary: #ffffff66;
+  --figma-color-text-tertiary-hover: #ffffff;
+  --figma-color-text-toolbar: #ffffff;
+  --figma-color-text-toolbar-danger: #fca397;
+  --figma-color-text-toolbar-disabled: #ffffff66;
+  --figma-color-text-toolbar-hover: #ffffff;
+  --figma-color-text-toolbar-ondisabled: #2c2c2c;
+  --figma-color-text-toolbar-onselected: #ffffff;
+  --figma-color-text-toolbar-secondary: #ffffffb2;
+  --figma-color-text-toolbar-secondary-hover: #ffffff;
+  --figma-color-text-toolbar-selected: #d1a8ff;
+  --figma-color-text-toolbar-selected-secondary: #d1a8ff;
+  --figma-color-text-toolbar-selected-tertiary: #d1a8ff;
+  --figma-color-text-toolbar-tertiary: #ffffff66;
+  --figma-color-text-toolbar-tertiary-hover: #ffffff;
+  --figma-color-text-toolbar-warning: #f7d15f;
+  --figma-color-text-tooltip: #ffffff;
+  --figma-color-text-tooltip-danger: #fca397;
+  --figma-color-text-tooltip-disabled: #ffffff66;
+  --figma-color-text-tooltip-hover: #ffffff;
+  --figma-color-text-tooltip-ondisabled: #1e1e1e;
+  --figma-color-text-tooltip-onselected: #ffffff;
+  --figma-color-text-tooltip-secondary: #ffffffb2;
+  --figma-color-text-tooltip-secondary-hover: #ffffff;
+  --figma-color-text-tooltip-selected: #d1a8ff;
+  --figma-color-text-tooltip-selected-secondary: #d1a8ff;
+  --figma-color-text-tooltip-selected-tertiary: #d1a8ff;
+  --figma-color-text-tooltip-tertiary: #ffffff66;
+  --figma-color-text-tooltip-tertiary-hover: #ffffff;
+  --figma-color-text-tooltip-warning: #f7d15f;
+  --figma-color-text-warning: #f7d15f;
+  --figma-color-text-warning-secondary: #f7d15f;
+  --figma-color-text-warning-tertiary: #f7d15f;
+  --figma-color-texthighlight: #974aff66;
+  --figma-color-textondarkcanvas: #ffffffe5;
+  --figma-color-textondarkcanvassecondary: #ffffffb2;
+  --figma-color-textonlightcanvas: #000000e5;
+  --figma-color-textonlightcanvassecondary: #0000004d;
+  --figma-color-textonmultiplayerblue: #ffffff;
+  --figma-color-textonmultiplayergreen: #ffffff;
+  --figma-color-textonmultiplayergrey: #ffffff;
+  --figma-color-textonmultiplayerpink: #ffffff;
+  --figma-color-textonmultiplayerpurple: #ffffff;
+  --figma-color-textonmultiplayerred: #ffffff;
+  --figma-color-textonmultiplayeryellow: #000000e5;
+  --figma-color-textonvoting: #000000e5;
+  --figma-elevation-100: 0px 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3), inset 0px 0.5px 0px rgba(255, 255, 255, 0.1), 0px 0px 0.5px rgba(0, 0, 0, 0.5);
+  --figma-elevation-200: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3), 0px 3px 8px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-elevation-300: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3), 0px 5px 12px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-elevation-400: 0px 2px 5px rgba(0, 0, 0, 0.35), inset 0px 0px 0.5px rgba(255, 255, 255, 0.35), 0px 10px 16px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-elevation-500: 0px 3px 5px rgba(0, 0, 0, 0.35), inset 0px 0px 0.5px rgba(255, 255, 255, 0.35), 0px 10px 24px rgba(0, 0, 0, 0.45), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-shadow-tooltip: var(--figma-elevation-300);
+  --figma-shadow-menu: var(--figma-elevation-400);
+  --figma-shadow-modal: var(--figma-elevation-500);
+}
diff --git a/packages/theme/src/css/figjam.css b/packages/theme/src/css/figjam.css
new file mode 100644
index 0000000..7ee8bca
--- /dev/null
+++ b/packages/theme/src/css/figjam.css
@@ -0,0 +1,1174 @@
+@import './preflight.css' layer(base);
+@import './utilities.css';
+@theme {
+  --figma-font-family-default: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "SFProLocalRange";
+  --figma-font-family-code: "Roboto Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
+  --figma-font-family-display: "Whyte", ui-sans-serif, system-ui, sans-serif;
+  --figma-font-weight-default: 450;
+  --figma-font-weight-medium: 450;
+  --figma-font-weight-strong: 550;
+  --figma-font-weight-heavy: 550;
+  --figma-font-size-body-large: .8125rem;
+  --figma-line-height-body-large: 1.375rem;
+  --figma-letter-spacing-body-large: -.00203rem;
+  --figma-font-size-body-large-strong: .8125rem;
+  --figma-line-height-body-large-strong: 1.375rem;
+  --figma-letter-spacing-body-large-strong: -.00203rem;
+  --figma-font-size-body-medium: .6875rem;
+  --figma-line-height-body-medium: 1rem;
+  --figma-letter-spacing-body-medium: .00344rem;
+  --figma-font-size-body-medium-strong: .6875rem;
+  --figma-line-height-body-medium-strong: 1rem;
+  --figma-letter-spacing-body-medium-strong: .00344rem;
+  --figma-font-size-body-small: .5625rem;
+  --figma-line-height-body-small: .875rem;
+  --figma-letter-spacing-body-small: .00281rem;
+  --figma-font-size-body-small-strong: .5625rem;
+  --figma-line-height-body-small-strong: .875rem;
+  --figma-letter-spacing-body-small-strong: .00281rem;
+  --figma-font-size-heading-display: 3rem;
+  --figma-line-height-heading-display: 3.5rem;
+  --figma-letter-spacing-heading-display: -.09rem;
+  --figma-font-size-heading-large: 1.5rem;
+  --figma-line-height-heading-large: 2rem;
+  --figma-letter-spacing-heading-large: -.0255rem;
+  --figma-font-size-heading-medium: .9375rem;
+  --figma-line-height-heading-medium: 1.5625rem;
+  --figma-letter-spacing-heading-medium: -.00469rem;
+  --figma-font-size-heading-small: .8125rem;
+  --figma-line-height-heading-small: 1.375rem;
+  --figma-letter-spacing-heading-small: -.00203rem;
+  --figma-radius-sm: .125rem;
+  --figma-radius-md: .3125rem;
+  --figma-radius-lg: .8125rem;
+  --figma-radius-none: 0;
+  --figma-radius-full: 9999px;
+  --figma-space-0: 0;
+  --figma-space-0\.5: .125rem;
+  --figma-space-1: .25rem;
+  --figma-space-1\.5: .375rem;
+  --figma-space-2: .5rem;
+  --figma-space-2\.5: .75rem;
+  --figma-space-3: 1rem;
+  --figma-space-4: 1.5rem;
+  --figma-space-5: 2rem;
+  --figma-space-6: 2.5rem;
+  --figma-border-width-1: 1px;
+  --figma-border-width-4: .25rem;
+  --figma-duration-100: 100ms;
+  --figma-duration-200: 200ms;
+  --figma-duration-300: 300ms;
+  --figma-opacity-50: 0.5;
+  --figma-opacity-disabled: 0.3;
+  --figma-z-index-1: 1;
+  --figma-z-index-2: 2;
+  --figma-z-index-dropdown: 10;
+  --figma-z-index-modal: 50;
+  --figma-z-index-tooltip: 100;
+  --figma-shadow-slider: 0 1px 3px 0 #0000001a, 0 3px 8px 0 #0000001a, 0 0 0.5px 0 #0000002e, inset 0 0 0 0.5px #0000001a;
+  --figma-shadow-hud: 0px 5px 17px rgba(0, 0, 0, 0.2), 0px 2px 7px rgba(0, 0, 0, 0.15);
+  --font-figma: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "SFProLocalRange";
+  --font-figma-code: "Roboto Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
+  --font-weight-figma-default: 450;
+  --font-weight-figma-heavy: 550;
+  --font-weight-figma-medium: 450;
+  --font-weight-figma-strong: 550;
+  --text-figma-body-large: .8125rem;
+  --text-figma-body-large-strong: .8125rem;
+  --text-figma-body-medium: .6875rem;
+  --text-figma-body-medium-strong: .6875rem;
+  --text-figma-body-small: .5625rem;
+  --text-figma-body-small-strong: .5625rem;
+  --text-figma-heading-display: 3rem;
+  --text-figma-heading-large: 1.5rem;
+  --text-figma-heading-medium: .9375rem;
+  --text-figma-heading-small: .8125rem;
+  --leading-figma-body-large: 1.375rem;
+  --leading-figma-body-large-strong: 1.375rem;
+  --leading-figma-body-medium: 1rem;
+  --leading-figma-body-medium-strong: 1rem;
+  --leading-figma-body-small: .875rem;
+  --leading-figma-body-small-strong: .875rem;
+  --leading-figma-heading-display: 3.5rem;
+  --leading-figma-heading-large: 2rem;
+  --leading-figma-heading-medium: 1.5625rem;
+  --leading-figma-heading-small: 1.375rem;
+  --text-figma-body-large--line-height: 1.375rem;
+  --text-figma-body-large-strong--line-height: 1.375rem;
+  --text-figma-body-medium--line-height: 1rem;
+  --text-figma-body-medium-strong--line-height: 1rem;
+  --text-figma-body-small--line-height: .875rem;
+  --text-figma-body-small-strong--line-height: .875rem;
+  --text-figma-heading-display--line-height: 3.5rem;
+  --text-figma-heading-large--line-height: 2rem;
+  --text-figma-heading-medium--line-height: 1.5625rem;
+  --text-figma-heading-small--line-height: 1.375rem;
+  --tracking-figma-body-large: -.00203rem;
+  --tracking-figma-body-large-strong: -.00203rem;
+  --tracking-figma-body-medium: .00344rem;
+  --tracking-figma-body-medium-strong: .00344rem;
+  --tracking-figma-body-small: .00281rem;
+  --tracking-figma-body-small-strong: .00281rem;
+  --tracking-figma-heading-display: -.09rem;
+  --tracking-figma-heading-large: -.0255rem;
+  --tracking-figma-heading-medium: -.00469rem;
+  --tracking-figma-heading-small: -.00203rem;
+  --text-figma-body-large--letter-spacing: -.00203rem;
+  --text-figma-body-large-strong--letter-spacing: -.00203rem;
+  --text-figma-body-medium--letter-spacing: .00344rem;
+  --text-figma-body-medium-strong--letter-spacing: .00344rem;
+  --text-figma-body-small--letter-spacing: .00281rem;
+  --text-figma-body-small-strong--letter-spacing: .00281rem;
+  --text-figma-heading-display--letter-spacing: -.09rem;
+  --text-figma-heading-large--letter-spacing: -.0255rem;
+  --text-figma-heading-medium--letter-spacing: -.00469rem;
+  --text-figma-heading-small--letter-spacing: -.00203rem;
+  --text-figma-body-large-strong--font-weight: 550;
+  --text-figma-body-medium-strong--font-weight: 550;
+  --text-figma-body-small-strong--font-weight: 550;
+  --text-figma-heading-large--font-weight: 550;
+  --text-figma-heading-medium--font-weight: 550;
+  --text-figma-heading-small--font-weight: 550;
+  --radius-figma-full: 9999px;
+  --radius-figma-lg: .8125rem;
+  --radius-figma-md: .3125rem;
+  --radius-figma-none: 0;
+  --radius-figma-sm: .125rem;
+  --spacing-figma-0: 0;
+  --spacing-figma-0\.5: .125rem;
+  --spacing-figma-1: .25rem;
+  --spacing-figma-1\.5: .375rem;
+  --spacing-figma-2: .5rem;
+  --spacing-figma-2\.5: .75rem;
+  --spacing-figma-3: 1rem;
+  --spacing-figma-4: 1.5rem;
+  --spacing-figma-5: 2rem;
+  --spacing-figma-6: 2.5rem;
+  --border-figma-1: 1px;
+  --border-figma-4: .25rem;
+  --transition-duration-figma-100: 100ms;
+  --transition-duration-figma-200: 200ms;
+  --transition-duration-figma-300: 300ms;
+  --opacity-figma-50: 0.5;
+  --opacity-figma-disabled: 0.3;
+  --z-index-figma-1: 1;
+  --z-index-figma-2: 2;
+  --z-index-figma-dropdown: 10;
+  --z-index-figma-modal: 50;
+  --z-index-figma-tooltip: 100;
+}
+
+@theme inline {
+  --shadow-figma-elevation-100: var(--figma-elevation-100);
+  --shadow-figma-elevation-200: var(--figma-elevation-200);
+  --shadow-figma-elevation-300: var(--figma-elevation-300);
+  --shadow-figma-elevation-400: var(--figma-elevation-400);
+  --shadow-figma-elevation-500: var(--figma-elevation-500);
+  --shadow-figma-tooltip: var(--figma-elevation-300);
+  --shadow-figma-menu: var(--figma-elevation-400);
+  --shadow-figma-modal: var(--figma-elevation-500);
+  --shadow-figma-slider: 0 1px 3px 0 #0000001a, 0 3px 8px 0 #0000001a, 0 0 0.5px 0 #0000002e, inset 0 0 0 0.5px #0000001a;
+  --shadow-figma-hud: 0px 5px 17px rgba(0, 0, 0, 0.2), 0px 2px 7px rgba(0, 0, 0, 0.15);
+}
+
+:root, .figjam, .figma-light .figjam, .figjam .figma-light, .figjam.figma-light {
+  --figma-color-bg: #ffffff;
+  --figma-color-bg-assistive: #ff24bd;
+  --figma-color-bg-assistive-hover: #ea10ac;
+  --figma-color-bg-assistive-pressed: #ea10ac;
+  --figma-color-bg-assistive-secondary: #cb0b96;
+  --figma-color-bg-assistive-tertiary: #ffe0fc;
+  --figma-color-bg-brand: #9747ff;
+  --figma-color-bg-brand-hover: #8638e5;
+  --figma-color-bg-brand-pressed: #8638e5;
+  --figma-color-bg-brand-secondary: #7c2bda;
+  --figma-color-bg-brand-tertiary: #f1e5ff;
+  --figma-color-bg-component: #9747ff;
+  --figma-color-bg-component-hover: #8638e5;
+  --figma-color-bg-component-pressed: #8638e5;
+  --figma-color-bg-component-secondary: #7c2bda;
+  --figma-color-bg-component-tertiary: #f1e5ff;
+  --figma-color-bg-danger: #f24822;
+  --figma-color-bg-danger-hover: #dc3412;
+  --figma-color-bg-danger-pressed: #dc3412;
+  --figma-color-bg-danger-secondary: #bd2915;
+  --figma-color-bg-danger-tertiary: #ffe2e0;
+  --figma-color-bg-design: #0d99ff;
+  --figma-color-bg-design-hover: #007be5;
+  --figma-color-bg-design-pressed: #007be5;
+  --figma-color-bg-design-secondary: #0768cf;
+  --figma-color-bg-design-tertiary: #e5f4ff;
+  --figma-color-bg-disabled: #d9d9d9;
+  --figma-color-bg-disabled-secondary: #b3b3b3;
+  --figma-color-bg-figjam: #9747ff;
+  --figma-color-bg-figjam-hover: #8638e5;
+  --figma-color-bg-figjam-pressed: #8638e5;
+  --figma-color-bg-figjam-secondary: #7c2bda;
+  --figma-color-bg-figjam-tertiary: #f1e5ff;
+  --figma-color-bg-handoff: #14ae5c;
+  --figma-color-bg-handoff-hover: #009951;
+  --figma-color-bg-handoff-pressed: #009951;
+  --figma-color-bg-handoff-secondary: #008043;
+  --figma-color-bg-handoff-tertiary: #daecdf;
+  --figma-color-bg-hover: #f5f5f5;
+  --figma-color-bg-info: #f1e5ff;
+  --figma-color-bg-inverse: #2c2c2c;
+  --figma-color-bg-measure: #f24822;
+  --figma-color-bg-measure-hover: #dc3412;
+  --figma-color-bg-measure-pressed: #dc3412;
+  --figma-color-bg-measure-secondary: #bd2915;
+  --figma-color-bg-measure-tertiary: #ffe2e0;
+  --figma-color-bg-menu: #1e1e1e;
+  --figma-color-bg-menu-disabled: #757575;
+  --figma-color-bg-menu-hover: #2c2c2c;
+  --figma-color-bg-menu-pressed: #2c2c2c;
+  --figma-color-bg-menu-secondary: #383838;
+  --figma-color-bg-menu-selected: #9747ff;
+  --figma-color-bg-menu-selected-hover: #8638e5;
+  --figma-color-bg-menu-selected-pressed: #8638e5;
+  --figma-color-bg-menu-selected-secondary: #473956;
+  --figma-color-bg-menu-selected-tertiary: #473956;
+  --figma-color-bg-menu-tertiary: #444444;
+  --figma-color-bg-onselected: #e4ccff;
+  --figma-color-bg-onselected-hover: #e4ccff;
+  --figma-color-bg-onselected-pressed: #e4ccff;
+  --figma-color-bg-pressed: #f5f5f5;
+  --figma-color-bg-secondary: #f5f5f5;
+  --figma-color-bg-selected: #f1e5ff;
+  --figma-color-bg-selected-hover: #e4ccff;
+  --figma-color-bg-selected-pressed: #e4ccff;
+  --figma-color-bg-selected-secondary: #f9f5ff;
+  --figma-color-bg-selected-strong: #9747ff;
+  --figma-color-bg-selected-tertiary: #f9f5ff;
+  --figma-color-bg-success: #14ae5c;
+  --figma-color-bg-success-hover: #009951;
+  --figma-color-bg-success-pressed: #009951;
+  --figma-color-bg-success-secondary: #008043;
+  --figma-color-bg-success-tertiary: #cff7d3;
+  --figma-color-bg-tertiary: #e6e6e6;
+  --figma-color-bg-toolbar: #ffffff;
+  --figma-color-bg-toolbar-disabled: #d9d9d9;
+  --figma-color-bg-toolbar-hover: #f5f5f5;
+  --figma-color-bg-toolbar-pressed: #f5f5f5;
+  --figma-color-bg-toolbar-secondary: #f5f5f5;
+  --figma-color-bg-toolbar-selected: #9747ff;
+  --figma-color-bg-toolbar-selected-hover: #8638e5;
+  --figma-color-bg-toolbar-selected-pressed: #8638e5;
+  --figma-color-bg-toolbar-selected-secondary: #7c2bda;
+  --figma-color-bg-toolbar-selected-tertiary: #9747ff;
+  --figma-color-bg-toolbar-tertiary: #e6e6e6;
+  --figma-color-bg-tooltip: #1e1e1e;
+  --figma-color-bg-tooltip-disabled: #757575;
+  --figma-color-bg-tooltip-hover: #2c2c2c;
+  --figma-color-bg-tooltip-pressed: #2c2c2c;
+  --figma-color-bg-tooltip-secondary: #383838;
+  --figma-color-bg-tooltip-selected: #9747ff;
+  --figma-color-bg-tooltip-selected-hover: #8638e5;
+  --figma-color-bg-tooltip-selected-pressed: #8638e5;
+  --figma-color-bg-tooltip-selected-secondary: #473956;
+  --figma-color-bg-tooltip-selected-tertiary: #473956;
+  --figma-color-bg-tooltip-tertiary: #444444;
+  --figma-color-bg-warning: #ffcd29;
+  --figma-color-bg-warning-hover: #ffc21a;
+  --figma-color-bg-warning-pressed: #ffc21a;
+  --figma-color-bg-warning-secondary: #fab815;
+  --figma-color-bg-warning-tertiary: #fff1c2;
+  --figma-color-bghoverondarkcanvas: #ffffff33;
+  --figma-color-bghoveronlightcanvas: #00000033;
+  --figma-color-bghovertransparent: #0000000d;
+  --figma-color-bgsecondaryoncanvas: #e6e6e6;
+  --figma-color-bgselectedarea: #974aff33;
+  --figma-color-bgtransparent: #ffffff99;
+  --figma-color-bgtransparent-secondary-hover: #0000001a;
+  --figma-color-bgtransparent-secondary-pressed: #00000026;
+  --figma-color-bgtransparentsecondary: #ffffff;
+  --figma-color-bgvoting: #ffcd29;
+  --figma-color-bgvotingsecondary: #fff1c2;
+  --figma-color-bgvotingtertiary: #fffbeb;
+  --figma-color-bgvotingwheeldial: #fffbeb;
+  --figma-color-bgvotingwheelhover: #fff1c2;
+  --figma-color-border: #e6e6e6;
+  --figma-color-border-assistive: #ffbdf2;
+  --figma-color-border-assistive-strong: #ea10ac;
+  --figma-color-border-brand: #e4ccff;
+  --figma-color-border-brand-strong: #8638e5;
+  --figma-color-border-component: #e4ccff;
+  --figma-color-border-component-hover: #9747ff;
+  --figma-color-border-component-strong: #8638e5;
+  --figma-color-border-danger: #ffc7c2;
+  --figma-color-border-danger-strong: #dc3412;
+  --figma-color-border-design: #bde3ff;
+  --figma-color-border-design-strong: #007be5;
+  --figma-color-border-disabled: #e6e6e6;
+  --figma-color-border-disabled-strong: #0000004d;
+  --figma-color-border-figjam: #e4ccff;
+  --figma-color-border-figjam-strong: #8638e5;
+  --figma-color-border-handoff: #aff4c6;
+  --figma-color-border-handoff-strong: #009951;
+  --figma-color-border-measure: #ffc7c2;
+  --figma-color-border-measure-strong: #dc3412;
+  --figma-color-border-menu: #383838;
+  --figma-color-border-menu-disabled: #383838;
+  --figma-color-border-menu-disabled-strong: #383838;
+  --figma-color-border-menu-onselected: #d9b8ff;
+  --figma-color-border-menu-onselected-strong: #ffffff;
+  --figma-color-border-menu-selected: #9747ff;
+  --figma-color-border-menu-selected-strong: #d9b8ff;
+  --figma-color-border-menu-strong: #ffffff;
+  --figma-color-border-onassistive: #ea10ac;
+  --figma-color-border-onassistive-strong: #ffffff;
+  --figma-color-border-onbrand: #8638e5;
+  --figma-color-border-onbrand-strong: #ffffff;
+  --figma-color-border-oncomponent: #8638e5;
+  --figma-color-border-oncomponent-strong: #ffffff;
+  --figma-color-border-ondanger: #dc3412;
+  --figma-color-border-ondanger-strong: #ffffff;
+  --figma-color-border-ondesign: #007be5;
+  --figma-color-border-ondesign-strong: #ffffff;
+  --figma-color-border-onfigjam: #8638e5;
+  --figma-color-border-onfigjam-strong: #8638e5;
+  --figma-color-border-onmeasure: #dc3412;
+  --figma-color-border-onmeasure-strong: #ffffff;
+  --figma-color-border-onselected: #e4ccff;
+  --figma-color-border-onselected-strong: #000000e5;
+  --figma-color-border-onsuccess: #009951;
+  --figma-color-border-onsuccess-strong: #ffffff;
+  --figma-color-border-onwarning: #fab815;
+  --figma-color-border-onwarning-strong: #000000e5;
+  --figma-color-border-selected: #9747ff;
+  --figma-color-border-selected-strong: #8638e5;
+  --figma-color-border-strong: #2c2c2c;
+  --figma-color-border-success: #aff4c6;
+  --figma-color-border-success-strong: #009951;
+  --figma-color-border-toolbar: #e6e6e6;
+  --figma-color-border-toolbar-disabled: #e6e6e6;
+  --figma-color-border-toolbar-onselected: #ffffff;
+  --figma-color-border-toolbar-selected: #9747ff;
+  --figma-color-border-toolbar-selected-strong: #d9b8ff;
+  --figma-color-border-toolbar-strong: #2c2c2c;
+  --figma-color-border-tooltip: #383838;
+  --figma-color-border-tooltip-disabled: #383838;
+  --figma-color-border-tooltip-disabled-strong: #383838;
+  --figma-color-border-tooltip-onselected: #8638e5;
+  --figma-color-border-tooltip-onselected-strong: #ffffff;
+  --figma-color-border-tooltip-selected: #9747ff;
+  --figma-color-border-tooltip-selected-strong: #d9b8ff;
+  --figma-color-border-tooltip-strong: #ffffff;
+  --figma-color-border-warning: #ffe8a3;
+  --figma-color-border-warning-strong: #b86200;
+  --figma-color-bordertranslucent: #0000001a;
+  --figma-color-conditionalborder: #ffffff00;
+  --figma-color-icon: #000000e5;
+  --figma-color-icon-assistive: #ea10ac;
+  --figma-color-icon-assistive-pressed: #cb0b96;
+  --figma-color-icon-assistive-secondary: #ea10ac;
+  --figma-color-icon-assistive-tertiary: #ea10ac;
+  --figma-color-icon-brand: #8638e5;
+  --figma-color-icon-brand-pressed: #7c2bda;
+  --figma-color-icon-brand-secondary: #d9b8ff;
+  --figma-color-icon-brand-tertiary: #e4ccff;
+  --figma-color-icon-component: #8638e5;
+  --figma-color-icon-component-pressed: #7c2bda;
+  --figma-color-icon-component-secondary: #c5b2dc;
+  --figma-color-icon-component-tertiary: #c5b2dc;
+  --figma-color-icon-danger: #f24822;
+  --figma-color-icon-danger-hover: #bd2915;
+  --figma-color-icon-danger-pressed: #bd2915;
+  --figma-color-icon-danger-secondary: #f24822;
+  --figma-color-icon-danger-secondary-hover: #f24822;
+  --figma-color-icon-danger-tertiary: #f24822;
+  --figma-color-icon-design: #007be5;
+  --figma-color-icon-design-pressed: #0768cf;
+  --figma-color-icon-design-secondary: #007be5;
+  --figma-color-icon-design-tertiary: #007be5;
+  --figma-color-icon-disabled: #0000004d;
+  --figma-color-icon-figjam: #8638e5;
+  --figma-color-icon-figjam-pressed: #7c2bda;
+  --figma-color-icon-figjam-secondary: #c5b2dc;
+  --figma-color-icon-figjam-tertiary: #c5b2dc;
+  --figma-color-icon-handoff: #009951;
+  --figma-color-icon-handoff-pressed: #008043;
+  --figma-color-icon-handoff-secondary: #009951;
+  --figma-color-icon-handoff-tertiary: #009951;
+  --figma-color-icon-hover: #000000e5;
+  --figma-color-icon-measure: #f24822;
+  --figma-color-icon-measure-hover: #bd2915;
+  --figma-color-icon-measure-pressed: #bd2915;
+  --figma-color-icon-measure-secondary: #f24822;
+  --figma-color-icon-measure-secondary-hover: #f24822;
+  --figma-color-icon-measure-tertiary: #f24822;
+  --figma-color-icon-menu: #ffffff;
+  --figma-color-icon-menu-danger: #f24822;
+  --figma-color-icon-menu-disabled: #ffffff66;
+  --figma-color-icon-menu-hover: #ffffff;
+  --figma-color-icon-menu-ondisabled: #1e1e1e;
+  --figma-color-icon-menu-onselected: #ffffff;
+  --figma-color-icon-menu-pressed: #9747ff;
+  --figma-color-icon-menu-secondary: #ffffffb2;
+  --figma-color-icon-menu-secondary-hover: #ffffff;
+  --figma-color-icon-menu-selected: #d9b8ff;
+  --figma-color-icon-menu-selected-secondary: #d9b8ff;
+  --figma-color-icon-menu-selected-tertiary: #d9b8ff;
+  --figma-color-icon-menu-tertiary: #ffffff66;
+  --figma-color-icon-menu-tertiary-hover: #ffffff;
+  --figma-color-icon-menu-warning: #ffcd29;
+  --figma-color-icon-onassistive: #ffffff;
+  --figma-color-icon-onassistive-secondary: #ffffffcc;
+  --figma-color-icon-onassistive-tertiary: #ffffff66;
+  --figma-color-icon-onbrand: #ffffff;
+  --figma-color-icon-onbrand-secondary: #ffffffcc;
+  --figma-color-icon-onbrand-tertiary: #ffffff66;
+  --figma-color-icon-oncomponent: #ffffff;
+  --figma-color-icon-oncomponent-secondary: #ffffffcc;
+  --figma-color-icon-oncomponent-tertiary: #ffffff66;
+  --figma-color-icon-ondanger: #ffffff;
+  --figma-color-icon-ondanger-secondary: #ffffffcc;
+  --figma-color-icon-ondanger-tertiary: #ffffff66;
+  --figma-color-icon-ondesign: #ffffff;
+  --figma-color-icon-ondesign-secondary: #ffffffcc;
+  --figma-color-icon-ondesign-tertiary: #ffffff66;
+  --figma-color-icon-ondisabled: #ffffff;
+  --figma-color-icon-onfigjam: #ffffff;
+  --figma-color-icon-onfigjam-secondary: #ffffffcc;
+  --figma-color-icon-onfigjam-tertiary: #ffffff66;
+  --figma-color-icon-oninverse: #ffffffe5;
+  --figma-color-icon-onmeasure: #ffffff;
+  --figma-color-icon-onmeasure-secondary: #ffffffcc;
+  --figma-color-icon-onmeasure-tertiary: #ffffff66;
+  --figma-color-icon-onselected: #000000e5;
+  --figma-color-icon-onselected-secondary: #00000080;
+  --figma-color-icon-onselected-strong: #ffffff;
+  --figma-color-icon-onselected-tertiary: #0000004d;
+  --figma-color-icon-onsuccess: #ffffff;
+  --figma-color-icon-onsuccess-secondary: #ffffffcc;
+  --figma-color-icon-onsuccess-tertiary: #ffffff66;
+  --figma-color-icon-onwarning: #000000e5;
+  --figma-color-icon-onwarning-secondary: #00000080;
+  --figma-color-icon-onwarning-tertiary: #0000004d;
+  --figma-color-icon-pressed: #8638e5;
+  --figma-color-icon-secondary: #00000080;
+  --figma-color-icon-secondary-hover: #000000e5;
+  --figma-color-icon-selected: #8638e5;
+  --figma-color-icon-selected-secondary: #8638e5;
+  --figma-color-icon-selected-tertiary: #8638e5;
+  --figma-color-icon-success: #14ae5c;
+  --figma-color-icon-success-pressed: #008043;
+  --figma-color-icon-success-secondary: #14ae5c;
+  --figma-color-icon-success-tertiary: #14ae5c;
+  --figma-color-icon-tertiary: #0000004d;
+  --figma-color-icon-tertiary-hover: #000000e5;
+  --figma-color-icon-toolbar: #000000e5;
+  --figma-color-icon-toolbar-danger: #f24822;
+  --figma-color-icon-toolbar-disabled: #0000004d;
+  --figma-color-icon-toolbar-hover: #000000e5;
+  --figma-color-icon-toolbar-ondisabled: #0000004d;
+  --figma-color-icon-toolbar-onselected: #ffffff;
+  --figma-color-icon-toolbar-pressed: #9747ff;
+  --figma-color-icon-toolbar-secondary: #00000080;
+  --figma-color-icon-toolbar-secondary-hover: #000000e5;
+  --figma-color-icon-toolbar-selected: #8638e5;
+  --figma-color-icon-toolbar-selected-secondary: #8638e5;
+  --figma-color-icon-toolbar-selected-tertiary: #8638e5;
+  --figma-color-icon-toolbar-tertiary: #0000004d;
+  --figma-color-icon-toolbar-tertiary-hover: #000000e5;
+  --figma-color-icon-toolbar-warning: #ffcd29;
+  --figma-color-icon-tooltip: #ffffff;
+  --figma-color-icon-tooltip-danger: #f24822;
+  --figma-color-icon-tooltip-disabled: #ffffff66;
+  --figma-color-icon-tooltip-hover: #ffffff;
+  --figma-color-icon-tooltip-ondisabled: #1e1e1e;
+  --figma-color-icon-tooltip-onselected: #ffffff;
+  --figma-color-icon-tooltip-pressed: #9747ff;
+  --figma-color-icon-tooltip-secondary: #ffffffb2;
+  --figma-color-icon-tooltip-secondary-hover: #ffffff;
+  --figma-color-icon-tooltip-selected: #d9b8ff;
+  --figma-color-icon-tooltip-selected-secondary: #d9b8ff;
+  --figma-color-icon-tooltip-selected-tertiary: #d9b8ff;
+  --figma-color-icon-tooltip-tertiary: #ffffff66;
+  --figma-color-icon-tooltip-tertiary-hover: #ffffff;
+  --figma-color-icon-tooltip-warning: #ffcd29;
+  --figma-color-icon-warning: #ffcd29;
+  --figma-color-icon-warning-pressed: #b86200;
+  --figma-color-icon-warning-secondary: #ffcd29;
+  --figma-color-icon-warning-tertiary: #ffcd29;
+  --figma-color-icondesignfilesecondary: #80caff;
+  --figma-color-iconfigjamfilesecondary: #d9b8ff;
+  --figma-color-iconondarkcanvas: #ffffffe5;
+  --figma-color-icononlightcanvas: #000000e5;
+  --figma-color-icononvoting: #000000e5;
+  --figma-color-iconprototypefile: #d9d9d9;
+  --figma-color-iconprototypefilesecondary: #2c2c2c;
+  --figma-color-iconpublishedfile: #2c2c2c;
+  --figma-color-iconpublishedfilesecondary: #757575;
+  --figma-color-loading: #0000001a;
+  --figma-color-loadingmenu: #ffffff1a;
+  --figma-color-loadingsecondary: #0000000d;
+  --figma-color-loadingsecondarymenu: #ffffff0d;
+  --figma-color-modalbackdrop: #00000080;
+  --figma-color-multiplayerblue: #007be5;
+  --figma-color-multiplayerbluehover: #0768cf;
+  --figma-color-multiplayerbluesecondary: #034ac1;
+  --figma-color-multiplayergreen: #14ae5c;
+  --figma-color-multiplayergreenhover: #009951;
+  --figma-color-multiplayergreensecondary: #036838;
+  --figma-color-multiplayergrey: #667799;
+  --figma-color-multiplayergreyhover: #536383;
+  --figma-color-multiplayergreysecondary: #394360;
+  --figma-color-multiplayerpink: #ff24bd;
+  --figma-color-multiplayerpinkhover: #ea10ac;
+  --figma-color-multiplayerpinksecondary: #971172;
+  --figma-color-multiplayerpurple: #9747ff;
+  --figma-color-multiplayerpurplehover: #8638e5;
+  --figma-color-multiplayerpurplesecondary: #681abb;
+  --figma-color-multiplayerred: #f24822;
+  --figma-color-multiplayerredhover: #dc3412;
+  --figma-color-multiplayerredsecondary: #9f1f18;
+  --figma-color-multiplayeryellow: #ffcd29;
+  --figma-color-multiplayeryellowhover: #ffc21a;
+  --figma-color-multiplayeryellowsecondary: #eba611;
+  --figma-color-nodehandle: #80caff;
+  --figma-color-prototypeloadingbackdrop: #000000e5;
+  --figma-color-scrollbar: #b3b3b380;
+  --figma-color-shadow: #00000026;
+  --figma-color-text: #000000e5;
+  --figma-color-text-assistive: #ea10ac;
+  --figma-color-text-assistive-pressed: #cb0b96;
+  --figma-color-text-assistive-secondary: #ea10ac;
+  --figma-color-text-assistive-tertiary: #ea10ac;
+  --figma-color-text-brand: #8638e5;
+  --figma-color-text-brand-secondary: #8638e5;
+  --figma-color-text-brand-tertiary: #8638e5;
+  --figma-color-text-component: #8638e5;
+  --figma-color-text-component-pressed: #7c2bda;
+  --figma-color-text-component-secondary: #c5b2dc;
+  --figma-color-text-component-tertiary: #c5b2dc;
+  --figma-color-text-danger: #dc3412;
+  --figma-color-text-danger-secondary: #dc3412;
+  --figma-color-text-danger-tertiary: #dc3412;
+  --figma-color-text-design: #007be5;
+  --figma-color-text-design-pressed: #0768cf;
+  --figma-color-text-design-secondary: #007be5;
+  --figma-color-text-design-tertiary: #007be5;
+  --figma-color-text-disabled: #0000004d;
+  --figma-color-text-figjam: #8638e5;
+  --figma-color-text-figjam-pressed: #7c2bda;
+  --figma-color-text-figjam-secondary: #c5b2dc;
+  --figma-color-text-figjam-tertiary: #c5b2dc;
+  --figma-color-text-handoff: #009951;
+  --figma-color-text-handoff-secondary: #009951;
+  --figma-color-text-handoff-tertiary: #009951;
+  --figma-color-text-hover: #000000e5;
+  --figma-color-text-measure: #dc3412;
+  --figma-color-text-measure-secondary: #dc3412;
+  --figma-color-text-measure-tertiary: #dc3412;
+  --figma-color-text-menu: #ffffff;
+  --figma-color-text-menu-danger: #f24822;
+  --figma-color-text-menu-disabled: #ffffff66;
+  --figma-color-text-menu-hover: #ffffff;
+  --figma-color-text-menu-ondisabled: #1e1e1e;
+  --figma-color-text-menu-onselected: #ffffff;
+  --figma-color-text-menu-secondary: #ffffffb2;
+  --figma-color-text-menu-secondary-hover: #ffffff;
+  --figma-color-text-menu-selected: #d9b8ff;
+  --figma-color-text-menu-selected-secondary: #d9b8ff;
+  --figma-color-text-menu-selected-tertiary: #d9b8ff;
+  --figma-color-text-menu-tertiary: #ffffff66;
+  --figma-color-text-menu-tertiary-hover: #ffffff;
+  --figma-color-text-menu-warning: #ffd966;
+  --figma-color-text-onassistive: #ffffff;
+  --figma-color-text-onassistive-secondary: #ffffffcc;
+  --figma-color-text-onassistive-tertiary: #ffffff66;
+  --figma-color-text-onbrand: #ffffff;
+  --figma-color-text-onbrand-secondary: #ffffffcc;
+  --figma-color-text-onbrand-tertiary: #ffffff66;
+  --figma-color-text-oncomponent: #ffffff;
+  --figma-color-text-oncomponent-secondary: #ffffffcc;
+  --figma-color-text-oncomponent-tertiary: #ffffff66;
+  --figma-color-text-ondanger: #ffffff;
+  --figma-color-text-ondanger-secondary: #ffffffcc;
+  --figma-color-text-ondanger-tertiary: #ffffff66;
+  --figma-color-text-ondesign: #ffffff;
+  --figma-color-text-ondesign-secondary: #ffffffcc;
+  --figma-color-text-ondesign-tertiary: #ffffff66;
+  --figma-color-text-ondisabled: #ffffff;
+  --figma-color-text-onfigjam: #ffffff;
+  --figma-color-text-onfigjam-secondary: #ffffffcc;
+  --figma-color-text-onfigjam-tertiary: #ffffff66;
+  --figma-color-text-oninverse: #ffffffe5;
+  --figma-color-text-onmeasure: #ffffff;
+  --figma-color-text-onmeasure-secondary: #ffffffcc;
+  --figma-color-text-onmeasure-tertiary: #ffffff66;
+  --figma-color-text-onselected: #000000e5;
+  --figma-color-text-onselected-secondary: #00000080;
+  --figma-color-text-onselected-strong: #ffffff;
+  --figma-color-text-onselected-tertiary: #0000004d;
+  --figma-color-text-onsuccess: #ffffff;
+  --figma-color-text-onsuccess-secondary: #ffffffcc;
+  --figma-color-text-onsuccess-tertiary: #ffffff66;
+  --figma-color-text-onwarning: #000000e5;
+  --figma-color-text-onwarning-secondary: #00000080;
+  --figma-color-text-onwarning-tertiary: #0000004d;
+  --figma-color-text-secondary: #00000080;
+  --figma-color-text-secondary-hover: #000000e5;
+  --figma-color-text-selected: #8638e5;
+  --figma-color-text-selected-secondary: #8638e5;
+  --figma-color-text-selected-tertiary: #8638e5;
+  --figma-color-text-success: #009951;
+  --figma-color-text-success-secondary: #009951;
+  --figma-color-text-success-tertiary: #009951;
+  --figma-color-text-tertiary: #0000004d;
+  --figma-color-text-tertiary-hover: #000000e5;
+  --figma-color-text-toolbar: #000000e5;
+  --figma-color-text-toolbar-danger: #ffafa3;
+  --figma-color-text-toolbar-disabled: #0000004d;
+  --figma-color-text-toolbar-hover: #000000e5;
+  --figma-color-text-toolbar-ondisabled: #2c2c2c;
+  --figma-color-text-toolbar-onselected: #ffffff;
+  --figma-color-text-toolbar-secondary: #00000080;
+  --figma-color-text-toolbar-secondary-hover: #000000e5;
+  --figma-color-text-toolbar-selected: #d9b8ff;
+  --figma-color-text-toolbar-selected-secondary: #d9b8ff;
+  --figma-color-text-toolbar-selected-tertiary: #d9b8ff;
+  --figma-color-text-toolbar-tertiary: #0000004d;
+  --figma-color-text-toolbar-tertiary-hover: #000000e5;
+  --figma-color-text-toolbar-warning: #b86200;
+  --figma-color-text-tooltip: #ffffff;
+  --figma-color-text-tooltip-danger: #ffafa3;
+  --figma-color-text-tooltip-disabled: #ffffff66;
+  --figma-color-text-tooltip-hover: #ffffff;
+  --figma-color-text-tooltip-ondisabled: #1e1e1e;
+  --figma-color-text-tooltip-onselected: #ffffff;
+  --figma-color-text-tooltip-secondary: #ffffffb2;
+  --figma-color-text-tooltip-secondary-hover: #ffffff;
+  --figma-color-text-tooltip-selected: #d9b8ff;
+  --figma-color-text-tooltip-selected-secondary: #d9b8ff;
+  --figma-color-text-tooltip-selected-tertiary: #d9b8ff;
+  --figma-color-text-tooltip-tertiary: #ffffff66;
+  --figma-color-text-tooltip-tertiary-hover: #ffffff;
+  --figma-color-text-tooltip-warning: #ffd966;
+  --figma-color-text-warning: #b86200;
+  --figma-color-text-warning-secondary: #b86200;
+  --figma-color-text-warning-tertiary: #b86200;
+  --figma-color-texthighlight: #974aff66;
+  --figma-color-textondarkcanvas: #ffffffe5;
+  --figma-color-textondarkcanvassecondary: #ffffffb2;
+  --figma-color-textonlightcanvas: #000000e5;
+  --figma-color-textonlightcanvassecondary: #0000004d;
+  --figma-color-textonmultiplayerblue: #ffffff;
+  --figma-color-textonmultiplayergreen: #ffffff;
+  --figma-color-textonmultiplayergrey: #ffffff;
+  --figma-color-textonmultiplayerpink: #ffffff;
+  --figma-color-textonmultiplayerpurple: #ffffff;
+  --figma-color-textonmultiplayerred: #ffffff;
+  --figma-color-textonmultiplayeryellow: #000000e5;
+  --figma-color-textonvoting: #000000e5;
+  --figma-elevation-100: 0px 1px 3px rgba(0, 0, 0, 0.15), 0px 0px 0.5px rgba(0, 0, 0, 0.3);
+  --figma-elevation-200: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 3px 8px rgba(0, 0, 0, 0.1), 0px 0px 0.5px rgba(0, 0, 0, 0.18);
+  --figma-elevation-300: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 5px 12px rgba(0, 0, 0, 0.13), 0px 0px 0.5px rgba(0, 0, 0, 0.15);
+  --figma-elevation-400: 0px 2px 5px rgba(0, 0, 0, 0.15), 0px 10px 16px rgba(0, 0, 0, 0.12), 0px 0px 0.5px rgba(0, 0, 0, 0.12);
+  --figma-elevation-500: 0px 2px 5px rgba(0, 0, 0, 0.15), 0px 10px 24px rgba(0, 0, 0, 0.18), 0px 0px 0.5px rgba(0, 0, 0, 0.08);
+  --figma-shadow-tooltip: var(--figma-elevation-300);
+  --figma-shadow-menu: var(--figma-elevation-400);
+  --figma-shadow-modal: var(--figma-elevation-500);
+}
+
+.figma-dark .figjam, .figjam .figma-dark, .figjam.figma-dark {
+  --figma-color-bg: #2c2c2c;
+  --figma-color-bg-assistive: #f316b0;
+  --figma-color-bg-assistive-hover: #d01b9c;
+  --figma-color-bg-assistive-pressed: #d01b9c;
+  --figma-color-bg-assistive-secondary: #96207a;
+  --figma-color-bg-assistive-tertiary: #68275e;
+  --figma-color-bg-brand: #8a38f5;
+  --figma-color-bg-brand-hover: #7a2ed6;
+  --figma-color-bg-brand-pressed: #7a2ed6;
+  --figma-color-bg-brand-secondary: #652ca8;
+  --figma-color-bg-brand-tertiary: #473956;
+  --figma-color-bg-component: #8a38f5;
+  --figma-color-bg-component-hover: #7a2ed6;
+  --figma-color-bg-component-pressed: #7a2ed6;
+  --figma-color-bg-component-secondary: #652ca8;
+  --figma-color-bg-component-tertiary: #473956;
+  --figma-color-bg-danger: #e03e1a;
+  --figma-color-bg-danger-hover: #c4381c;
+  --figma-color-bg-danger-pressed: #c4381c;
+  --figma-color-bg-danger-secondary: #963323;
+  --figma-color-bg-danger-tertiary: #60332a;
+  --figma-color-bg-design: #0c8ce9;
+  --figma-color-bg-design-hover: #0a6dc2;
+  --figma-color-bg-design-pressed: #0a6dc2;
+  --figma-color-bg-design-secondary: #105cad;
+  --figma-color-bg-design-tertiary: #394360;
+  --figma-color-bg-disabled: #757575;
+  --figma-color-bg-disabled-secondary: #b3b3b3;
+  --figma-color-bg-figjam: #8a38f5;
+  --figma-color-bg-figjam-hover: #7a2ed6;
+  --figma-color-bg-figjam-pressed: #7a2ed6;
+  --figma-color-bg-figjam-secondary: #652ca8;
+  --figma-color-bg-figjam-tertiary: #473956;
+  --figma-color-bg-handoff: #198f51;
+  --figma-color-bg-handoff-hover: #078348;
+  --figma-color-bg-handoff-pressed: #078348;
+  --figma-color-bg-handoff-secondary: #0a5c35;
+  --figma-color-bg-handoff-tertiary: #476656;
+  --figma-color-bg-hover: #383838;
+  --figma-color-bg-info: #473956;
+  --figma-color-bg-inverse: #ffffff;
+  --figma-color-bg-measure: #e03e1a;
+  --figma-color-bg-measure-hover: #c4381c;
+  --figma-color-bg-measure-pressed: #c4381c;
+  --figma-color-bg-measure-secondary: #963323;
+  --figma-color-bg-measure-tertiary: #60332a;
+  --figma-color-bg-menu: #1e1e1e;
+  --figma-color-bg-menu-disabled: #757575;
+  --figma-color-bg-menu-hover: #2c2c2c;
+  --figma-color-bg-menu-pressed: #2c2c2c;
+  --figma-color-bg-menu-secondary: #383838;
+  --figma-color-bg-menu-selected: #8a38f5;
+  --figma-color-bg-menu-selected-hover: #7a2ed6;
+  --figma-color-bg-menu-selected-pressed: #7a2ed6;
+  --figma-color-bg-menu-selected-secondary: #473956;
+  --figma-color-bg-menu-selected-tertiary: #473956;
+  --figma-color-bg-menu-tertiary: #444444;
+  --figma-color-bg-onselected: #7f699b;
+  --figma-color-bg-onselected-hover: #7f699b;
+  --figma-color-bg-onselected-pressed: #7f699b;
+  --figma-color-bg-pressed: #383838;
+  --figma-color-bg-secondary: #383838;
+  --figma-color-bg-selected: #604d75;
+  --figma-color-bg-selected-hover: #6b5884;
+  --figma-color-bg-selected-pressed: #6b5884;
+  --figma-color-bg-selected-secondary: #473956;
+  --figma-color-bg-selected-strong: #50297a;
+  --figma-color-bg-selected-tertiary: #473956;
+  --figma-color-bg-success: #198f51;
+  --figma-color-bg-success-hover: #078348;
+  --figma-color-bg-success-pressed: #078348;
+  --figma-color-bg-success-secondary: #0a5c35;
+  --figma-color-bg-success-tertiary: #476656;
+  --figma-color-bg-tertiary: #444444;
+  --figma-color-bg-toolbar: #2c2c2c;
+  --figma-color-bg-toolbar-disabled: #757575;
+  --figma-color-bg-toolbar-hover: #111111;
+  --figma-color-bg-toolbar-pressed: #111111;
+  --figma-color-bg-toolbar-secondary: #383838;
+  --figma-color-bg-toolbar-selected: #8a38f5;
+  --figma-color-bg-toolbar-selected-hover: #7a2ed6;
+  --figma-color-bg-toolbar-selected-pressed: #7a2ed6;
+  --figma-color-bg-toolbar-selected-secondary: #652ca8;
+  --figma-color-bg-toolbar-selected-tertiary: #8a38f5;
+  --figma-color-bg-toolbar-tertiary: #444444;
+  --figma-color-bg-tooltip: #1e1e1e;
+  --figma-color-bg-tooltip-disabled: #757575;
+  --figma-color-bg-tooltip-hover: #2c2c2c;
+  --figma-color-bg-tooltip-pressed: #2c2c2c;
+  --figma-color-bg-tooltip-secondary: #383838;
+  --figma-color-bg-tooltip-selected: #8a38f5;
+  --figma-color-bg-tooltip-selected-hover: #7a2ed6;
+  --figma-color-bg-tooltip-selected-pressed: #7a2ed6;
+  --figma-color-bg-tooltip-selected-secondary: #473956;
+  --figma-color-bg-tooltip-selected-tertiary: #473956;
+  --figma-color-bg-tooltip-tertiary: #444444;
+  --figma-color-bg-warning: #f3c11b;
+  --figma-color-bg-warning-hover: #f2b50d;
+  --figma-color-bg-warning-pressed: #f2b50d;
+  --figma-color-bg-warning-secondary: #e4a711;
+  --figma-color-bg-warning-tertiary: #5c4100;
+  --figma-color-bghoverondarkcanvas: #ffffff33;
+  --figma-color-bghoveronlightcanvas: #00000033;
+  --figma-color-bghovertransparent: #ffffff0d;
+  --figma-color-bgsecondaryoncanvas: #111111;
+  --figma-color-bgselectedarea: #974aff33;
+  --figma-color-bgtransparent: #00000099;
+  --figma-color-bgtransparent-secondary-hover: #ffffff1a;
+  --figma-color-bgtransparent-secondary-pressed: #ffffff26;
+  --figma-color-bgtransparentsecondary: #ffffff26;
+  --figma-color-bgvoting: #f3c11b;
+  --figma-color-bgvotingsecondary: #fbe8ad;
+  --figma-color-bgvotingtertiary: #fdf7dd;
+  --figma-color-bgvotingwheeldial: #fdf7dd;
+  --figma-color-bgvotingwheelhover: #fbe8ad;
+  --figma-color-border: #444444;
+  --figma-color-border-assistive: #96207a;
+  --figma-color-border-assistive-strong: #fc9ce0;
+  --figma-color-border-brand: #652ca8;
+  --figma-color-border-brand-strong: #d1a8ff;
+  --figma-color-border-component: #652ca8;
+  --figma-color-border-component-hover: #8a38f5;
+  --figma-color-border-component-strong: #d6b6fb;
+  --figma-color-border-danger: #963323;
+  --figma-color-border-danger-strong: #fca397;
+  --figma-color-border-design: #105cad;
+  --figma-color-border-design-strong: #7cc4f8;
+  --figma-color-border-disabled: #444444;
+  --figma-color-border-disabled-strong: #ffffff66;
+  --figma-color-border-figjam: #652ca8;
+  --figma-color-border-figjam-strong: #d1a8ff;
+  --figma-color-border-handoff: #0a5c35;
+  --figma-color-border-handoff-strong: #79d297;
+  --figma-color-border-measure: #963323;
+  --figma-color-border-measure-strong: #fca397;
+  --figma-color-border-menu: #383838;
+  --figma-color-border-menu-disabled: #383838;
+  --figma-color-border-menu-disabled-strong: #383838;
+  --figma-color-border-menu-onselected: #d1a8ff;
+  --figma-color-border-menu-onselected-strong: #ffffff;
+  --figma-color-border-menu-selected: #8a38f5;
+  --figma-color-border-menu-selected-strong: #d1a8ff;
+  --figma-color-border-menu-strong: #ffffff;
+  --figma-color-border-onassistive: #d01b9c;
+  --figma-color-border-onassistive-strong: #ffffff;
+  --figma-color-border-onbrand: #7a2ed6;
+  --figma-color-border-onbrand-strong: #ffffff;
+  --figma-color-border-oncomponent: #7a2ed6;
+  --figma-color-border-oncomponent-strong: #ffffff;
+  --figma-color-border-ondanger: #c4381c;
+  --figma-color-border-ondanger-strong: #ffffff;
+  --figma-color-border-ondesign: #0a6dc2;
+  --figma-color-border-ondesign-strong: #ffffff;
+  --figma-color-border-onfigjam: #7a2ed6;
+  --figma-color-border-onfigjam-strong: #7a2ed6;
+  --figma-color-border-onmeasure: #c4381c;
+  --figma-color-border-onmeasure-strong: #ffffff;
+  --figma-color-border-onselected: #7f699b;
+  --figma-color-border-onselected-strong: #ffffffe5;
+  --figma-color-border-onsuccess: #078348;
+  --figma-color-border-onsuccess-strong: #ffffff;
+  --figma-color-border-onwarning: #e4a711;
+  --figma-color-border-onwarning-strong: #000000e5;
+  --figma-color-border-selected: #8a38f5;
+  --figma-color-border-selected-strong: #d1a8ff;
+  --figma-color-border-strong: #ffffffe5;
+  --figma-color-border-success: #0a5c35;
+  --figma-color-border-success-strong: #79d297;
+  --figma-color-border-toolbar: #444444;
+  --figma-color-border-toolbar-disabled: #ffffff66;
+  --figma-color-border-toolbar-onselected: #ffffff;
+  --figma-color-border-toolbar-selected: #8a38f5;
+  --figma-color-border-toolbar-selected-strong: #d1a8ff;
+  --figma-color-border-toolbar-strong: #ffffff;
+  --figma-color-border-tooltip: #383838;
+  --figma-color-border-tooltip-disabled: #383838;
+  --figma-color-border-tooltip-disabled-strong: #383838;
+  --figma-color-border-tooltip-onselected: #7a2ed6;
+  --figma-color-border-tooltip-onselected-strong: #ffffff;
+  --figma-color-border-tooltip-selected: #8a38f5;
+  --figma-color-border-tooltip-selected-strong: #d1a8ff;
+  --figma-color-border-tooltip-strong: #ffffff;
+  --figma-color-border-warning: #925711;
+  --figma-color-border-warning-strong: #f7d15f;
+  --figma-color-bordertranslucent: #ffffff1a;
+  --figma-color-conditionalborder: #444444;
+  --figma-color-icon: #ffffff;
+  --figma-color-icon-assistive: #fc9ce0;
+  --figma-color-icon-assistive-pressed: #fbb1ed;
+  --figma-color-icon-assistive-secondary: #fc9ce0;
+  --figma-color-icon-assistive-tertiary: #fc9ce0;
+  --figma-color-icon-brand: #d1a8ff;
+  --figma-color-icon-brand-pressed: #8a38f5;
+  --figma-color-icon-brand-secondary: #7a2ed6;
+  --figma-color-icon-brand-tertiary: #473956;
+  --figma-color-icon-component: #d1a8ff;
+  --figma-color-icon-component-pressed: #d6b6fb;
+  --figma-color-icon-component-secondary: #7f699b;
+  --figma-color-icon-component-tertiary: #7f699b;
+  --figma-color-icon-danger: #e03e1a;
+  --figma-color-icon-danger-hover: #fbbcb6;
+  --figma-color-icon-danger-pressed: #fbbcb6;
+  --figma-color-icon-danger-secondary: #e03e1a;
+  --figma-color-icon-danger-secondary-hover: #e03e1a;
+  --figma-color-icon-danger-tertiary: #e03e1a;
+  --figma-color-icon-design: #7cc4f8;
+  --figma-color-icon-design-pressed: #a8d7fa;
+  --figma-color-icon-design-secondary: #7cc4f8;
+  --figma-color-icon-design-tertiary: #7cc4f8;
+  --figma-color-icon-disabled: #ffffff66;
+  --figma-color-icon-figjam: #d1a8ff;
+  --figma-color-icon-figjam-pressed: #d6b6fb;
+  --figma-color-icon-figjam-secondary: #7f699b;
+  --figma-color-icon-figjam-tertiary: #7f699b;
+  --figma-color-icon-handoff: #79d297;
+  --figma-color-icon-handoff-pressed: #a1e8b9;
+  --figma-color-icon-handoff-secondary: #79d297;
+  --figma-color-icon-handoff-tertiary: #79d297;
+  --figma-color-icon-hover: #ffffff;
+  --figma-color-icon-measure: #e03e1a;
+  --figma-color-icon-measure-hover: #fbbcb6;
+  --figma-color-icon-measure-pressed: #fbbcb6;
+  --figma-color-icon-measure-secondary: #e03e1a;
+  --figma-color-icon-measure-secondary-hover: #e03e1a;
+  --figma-color-icon-measure-tertiary: #e03e1a;
+  --figma-color-icon-menu: #ffffff;
+  --figma-color-icon-menu-danger: #e03e1a;
+  --figma-color-icon-menu-disabled: #ffffff66;
+  --figma-color-icon-menu-hover: #ffffff;
+  --figma-color-icon-menu-ondisabled: #1e1e1e;
+  --figma-color-icon-menu-onselected: #ffffff;
+  --figma-color-icon-menu-pressed: #8a38f5;
+  --figma-color-icon-menu-secondary: #ffffffb2;
+  --figma-color-icon-menu-secondary-hover: #ffffff;
+  --figma-color-icon-menu-selected: #d1a8ff;
+  --figma-color-icon-menu-selected-secondary: #d1a8ff;
+  --figma-color-icon-menu-selected-tertiary: #d1a8ff;
+  --figma-color-icon-menu-tertiary: #ffffff66;
+  --figma-color-icon-menu-tertiary-hover: #ffffff;
+  --figma-color-icon-menu-warning: #f3c11b;
+  --figma-color-icon-onassistive: #ffffff;
+  --figma-color-icon-onassistive-secondary: #ffffffcc;
+  --figma-color-icon-onassistive-tertiary: #ffffff66;
+  --figma-color-icon-onbrand: #ffffff;
+  --figma-color-icon-onbrand-secondary: #ffffffcc;
+  --figma-color-icon-onbrand-tertiary: #ffffff66;
+  --figma-color-icon-oncomponent: #ffffff;
+  --figma-color-icon-oncomponent-secondary: #ffffffcc;
+  --figma-color-icon-oncomponent-tertiary: #ffffff66;
+  --figma-color-icon-ondanger: #ffffff;
+  --figma-color-icon-ondanger-secondary: #ffffffcc;
+  --figma-color-icon-ondanger-tertiary: #ffffff66;
+  --figma-color-icon-ondesign: #ffffff;
+  --figma-color-icon-ondesign-secondary: #ffffffcc;
+  --figma-color-icon-ondesign-tertiary: #ffffff66;
+  --figma-color-icon-ondisabled: #2c2c2c;
+  --figma-color-icon-onfigjam: #ffffff;
+  --figma-color-icon-onfigjam-secondary: #ffffffcc;
+  --figma-color-icon-onfigjam-tertiary: #ffffff66;
+  --figma-color-icon-oninverse: #000000e5;
+  --figma-color-icon-onmeasure: #ffffff;
+  --figma-color-icon-onmeasure-secondary: #ffffffcc;
+  --figma-color-icon-onmeasure-tertiary: #ffffff66;
+  --figma-color-icon-onselected: #ffffff;
+  --figma-color-icon-onselected-secondary: #ffffffb2;
+  --figma-color-icon-onselected-strong: #ffffff;
+  --figma-color-icon-onselected-tertiary: #ffffff66;
+  --figma-color-icon-onsuccess: #ffffff;
+  --figma-color-icon-onsuccess-secondary: #ffffffcc;
+  --figma-color-icon-onsuccess-tertiary: #ffffff66;
+  --figma-color-icon-onwarning: #000000e5;
+  --figma-color-icon-onwarning-secondary: #00000080;
+  --figma-color-icon-onwarning-tertiary: #0000004d;
+  --figma-color-icon-pressed: #7a2ed6;
+  --figma-color-icon-secondary: #ffffffb2;
+  --figma-color-icon-secondary-hover: #ffffff;
+  --figma-color-icon-selected: #d1a8ff;
+  --figma-color-icon-selected-secondary: #d1a8ff;
+  --figma-color-icon-selected-tertiary: #d1a8ff;
+  --figma-color-icon-success: #198f51;
+  --figma-color-icon-success-pressed: #a1e8b9;
+  --figma-color-icon-success-secondary: #198f51;
+  --figma-color-icon-success-tertiary: #198f51;
+  --figma-color-icon-tertiary: #ffffff66;
+  --figma-color-icon-tertiary-hover: #ffffff;
+  --figma-color-icon-toolbar: #ffffff;
+  --figma-color-icon-toolbar-danger: #e03e1a;
+  --figma-color-icon-toolbar-disabled: #ffffff66;
+  --figma-color-icon-toolbar-hover: #ffffff;
+  --figma-color-icon-toolbar-ondisabled: #2c2c2c;
+  --figma-color-icon-toolbar-onselected: #ffffff;
+  --figma-color-icon-toolbar-pressed: #8a38f5;
+  --figma-color-icon-toolbar-secondary: #ffffffb2;
+  --figma-color-icon-toolbar-secondary-hover: #ffffff;
+  --figma-color-icon-toolbar-selected: #d1a8ff;
+  --figma-color-icon-toolbar-selected-secondary: #d1a8ff;
+  --figma-color-icon-toolbar-selected-tertiary: #d1a8ff;
+  --figma-color-icon-toolbar-tertiary: #ffffff66;
+  --figma-color-icon-toolbar-tertiary-hover: #ffffff;
+  --figma-color-icon-toolbar-warning: #f3c11b;
+  --figma-color-icon-tooltip: #ffffff;
+  --figma-color-icon-tooltip-danger: #e03e1a;
+  --figma-color-icon-tooltip-disabled: #ffffff66;
+  --figma-color-icon-tooltip-hover: #ffffff;
+  --figma-color-icon-tooltip-ondisabled: #1e1e1e;
+  --figma-color-icon-tooltip-onselected: #ffffff;
+  --figma-color-icon-tooltip-pressed: #8a38f5;
+  --figma-color-icon-tooltip-secondary: #ffffffb2;
+  --figma-color-icon-tooltip-secondary-hover: #ffffff;
+  --figma-color-icon-tooltip-selected: #d1a8ff;
+  --figma-color-icon-tooltip-selected-secondary: #d1a8ff;
+  --figma-color-icon-tooltip-selected-tertiary: #d1a8ff;
+  --figma-color-icon-tooltip-tertiary: #ffffff66;
+  --figma-color-icon-tooltip-tertiary-hover: #ffffff;
+  --figma-color-icon-tooltip-warning: #f3c11b;
+  --figma-color-icon-warning: #f3c11b;
+  --figma-color-icon-warning-pressed: #f7d15f;
+  --figma-color-icon-warning-secondary: #f3c11b;
+  --figma-color-icon-warning-tertiary: #f3c11b;
+  --figma-color-icondesignfilesecondary: #7cc4f8;
+  --figma-color-iconfigjamfilesecondary: #d1a8ff;
+  --figma-color-iconondarkcanvas: #ffffffe5;
+  --figma-color-icononlightcanvas: #000000e5;
+  --figma-color-icononvoting: #000000e5;
+  --figma-color-iconprototypefile: #757575;
+  --figma-color-iconprototypefilesecondary: #ffffff;
+  --figma-color-iconpublishedfile: #757575;
+  --figma-color-iconpublishedfilesecondary: #b3b3b3;
+  --figma-color-loading: #ffffff1a;
+  --figma-color-loadingmenu: #ffffff1a;
+  --figma-color-loadingsecondary: #ffffff0d;
+  --figma-color-loadingsecondarymenu: #ffffff0d;
+  --figma-color-modalbackdrop: #00000080;
+  --figma-color-multiplayerblue: #0a6dc2;
+  --figma-color-multiplayerbluehover: #105cad;
+  --figma-color-multiplayerbluesecondary: #184591;
+  --figma-color-multiplayergreen: #198f51;
+  --figma-color-multiplayergreenhover: #078348;
+  --figma-color-multiplayergreensecondary: #0a4c2d;
+  --figma-color-multiplayergrey: #667799;
+  --figma-color-multiplayergreyhover: #536383;
+  --figma-color-multiplayergreysecondary: #394360;
+  --figma-color-multiplayerpink: #f316b0;
+  --figma-color-multiplayerpinkhover: #d01b9c;
+  --figma-color-multiplayerpinksecondary: #68275e;
+  --figma-color-multiplayerpurple: #8a38f5;
+  --figma-color-multiplayerpurplehover: #7a2ed6;
+  --figma-color-multiplayerpurplesecondary: #50297a;
+  --figma-color-multiplayerred: #e03e1a;
+  --figma-color-multiplayerredhover: #c4381c;
+  --figma-color-multiplayerredsecondary: #7c2622;
+  --figma-color-multiplayeryellow: #f3c11b;
+  --figma-color-multiplayeryellowhover: #f2b50d;
+  --figma-color-multiplayeryellowsecondary: #c58011;
+  --figma-color-nodehandle: #7cc4f8;
+  --figma-color-prototypeloadingbackdrop: #000000e5;
+  --figma-color-scrollbar: #b3b3b380;
+  --figma-color-shadow: #00000099;
+  --figma-color-text: #ffffff;
+  --figma-color-text-assistive: #fc9ce0;
+  --figma-color-text-assistive-pressed: #fbb1ed;
+  --figma-color-text-assistive-secondary: #fc9ce0;
+  --figma-color-text-assistive-tertiary: #fc9ce0;
+  --figma-color-text-brand: #d1a8ff;
+  --figma-color-text-brand-secondary: #d1a8ff;
+  --figma-color-text-brand-tertiary: #d1a8ff;
+  --figma-color-text-component: #d1a8ff;
+  --figma-color-text-component-pressed: #d6b6fb;
+  --figma-color-text-component-secondary: #7f699b;
+  --figma-color-text-component-tertiary: #7f699b;
+  --figma-color-text-danger: #fca397;
+  --figma-color-text-danger-secondary: #fca397;
+  --figma-color-text-danger-tertiary: #fca397;
+  --figma-color-text-design: #7cc4f8;
+  --figma-color-text-design-pressed: #a8d7fa;
+  --figma-color-text-design-secondary: #7cc4f8;
+  --figma-color-text-design-tertiary: #7cc4f8;
+  --figma-color-text-disabled: #ffffff66;
+  --figma-color-text-figjam: #c5b2dc;
+  --figma-color-text-figjam-pressed: #d6b6fb;
+  --figma-color-text-figjam-secondary: #7f699b;
+  --figma-color-text-figjam-tertiary: #7f699b;
+  --figma-color-text-handoff: #79d297;
+  --figma-color-text-handoff-secondary: #79d297;
+  --figma-color-text-handoff-tertiary: #79d297;
+  --figma-color-text-hover: #ffffff;
+  --figma-color-text-measure: #fca397;
+  --figma-color-text-measure-secondary: #fca397;
+  --figma-color-text-measure-tertiary: #fca397;
+  --figma-color-text-menu: #ffffff;
+  --figma-color-text-menu-danger: #fca397;
+  --figma-color-text-menu-disabled: #ffffff66;
+  --figma-color-text-menu-hover: #ffffff;
+  --figma-color-text-menu-ondisabled: #1e1e1e;
+  --figma-color-text-menu-onselected: #ffffff;
+  --figma-color-text-menu-secondary: #ffffffb2;
+  --figma-color-text-menu-secondary-hover: #ffffff;
+  --figma-color-text-menu-selected: #d1a8ff;
+  --figma-color-text-menu-selected-secondary: #d1a8ff;
+  --figma-color-text-menu-selected-tertiary: #d1a8ff;
+  --figma-color-text-menu-tertiary: #ffffff66;
+  --figma-color-text-menu-tertiary-hover: #ffffff;
+  --figma-color-text-menu-warning: #f7d15f;
+  --figma-color-text-onassistive: #ffffff;
+  --figma-color-text-onassistive-secondary: #ffffffcc;
+  --figma-color-text-onassistive-tertiary: #ffffff66;
+  --figma-color-text-onbrand: #ffffff;
+  --figma-color-text-onbrand-secondary: #ffffffcc;
+  --figma-color-text-onbrand-tertiary: #ffffff66;
+  --figma-color-text-oncomponent: #ffffff;
+  --figma-color-text-oncomponent-secondary: #ffffffcc;
+  --figma-color-text-oncomponent-tertiary: #ffffff66;
+  --figma-color-text-ondanger: #ffffff;
+  --figma-color-text-ondanger-secondary: #ffffffcc;
+  --figma-color-text-ondanger-tertiary: #ffffff66;
+  --figma-color-text-ondesign: #ffffff;
+  --figma-color-text-ondesign-secondary: #ffffffcc;
+  --figma-color-text-ondesign-tertiary: #ffffff66;
+  --figma-color-text-ondisabled: #2c2c2c;
+  --figma-color-text-onfigjam: #ffffff;
+  --figma-color-text-onfigjam-secondary: #ffffffcc;
+  --figma-color-text-onfigjam-tertiary: #ffffff66;
+  --figma-color-text-oninverse: #000000e5;
+  --figma-color-text-onmeasure: #ffffff;
+  --figma-color-text-onmeasure-secondary: #ffffffcc;
+  --figma-color-text-onmeasure-tertiary: #ffffff66;
+  --figma-color-text-onselected: #ffffffe5;
+  --figma-color-text-onselected-secondary: #ffffffb2;
+  --figma-color-text-onselected-strong: #ffffff;
+  --figma-color-text-onselected-tertiary: #ffffff66;
+  --figma-color-text-onsuccess: #ffffff;
+  --figma-color-text-onsuccess-secondary: #ffffffcc;
+  --figma-color-text-onsuccess-tertiary: #ffffff66;
+  --figma-color-text-onwarning: #000000e5;
+  --figma-color-text-onwarning-secondary: #00000080;
+  --figma-color-text-onwarning-tertiary: #0000004d;
+  --figma-color-text-secondary: #ffffffb2;
+  --figma-color-text-secondary-hover: #ffffff;
+  --figma-color-text-selected: #d1a8ff;
+  --figma-color-text-selected-secondary: #d1a8ff;
+  --figma-color-text-selected-tertiary: #d1a8ff;
+  --figma-color-text-success: #79d297;
+  --figma-color-text-success-secondary: #79d297;
+  --figma-color-text-success-tertiary: #79d297;
+  --figma-color-text-tertiary: #ffffff66;
+  --figma-color-text-tertiary-hover: #ffffff;
+  --figma-color-text-toolbar: #ffffff;
+  --figma-color-text-toolbar-danger: #fca397;
+  --figma-color-text-toolbar-disabled: #ffffff66;
+  --figma-color-text-toolbar-hover: #ffffff;
+  --figma-color-text-toolbar-ondisabled: #2c2c2c;
+  --figma-color-text-toolbar-onselected: #ffffff;
+  --figma-color-text-toolbar-secondary: #ffffffb2;
+  --figma-color-text-toolbar-secondary-hover: #ffffff;
+  --figma-color-text-toolbar-selected: #d1a8ff;
+  --figma-color-text-toolbar-selected-secondary: #d1a8ff;
+  --figma-color-text-toolbar-selected-tertiary: #d1a8ff;
+  --figma-color-text-toolbar-tertiary: #ffffff66;
+  --figma-color-text-toolbar-tertiary-hover: #ffffff;
+  --figma-color-text-toolbar-warning: #f7d15f;
+  --figma-color-text-tooltip: #ffffff;
+  --figma-color-text-tooltip-danger: #fca397;
+  --figma-color-text-tooltip-disabled: #ffffff66;
+  --figma-color-text-tooltip-hover: #ffffff;
+  --figma-color-text-tooltip-ondisabled: #1e1e1e;
+  --figma-color-text-tooltip-onselected: #ffffff;
+  --figma-color-text-tooltip-secondary: #ffffffb2;
+  --figma-color-text-tooltip-secondary-hover: #ffffff;
+  --figma-color-text-tooltip-selected: #d1a8ff;
+  --figma-color-text-tooltip-selected-secondary: #d1a8ff;
+  --figma-color-text-tooltip-selected-tertiary: #d1a8ff;
+  --figma-color-text-tooltip-tertiary: #ffffff66;
+  --figma-color-text-tooltip-tertiary-hover: #ffffff;
+  --figma-color-text-tooltip-warning: #f7d15f;
+  --figma-color-text-warning: #f7d15f;
+  --figma-color-text-warning-secondary: #f7d15f;
+  --figma-color-text-warning-tertiary: #f7d15f;
+  --figma-color-texthighlight: #974aff66;
+  --figma-color-textondarkcanvas: #ffffffe5;
+  --figma-color-textondarkcanvassecondary: #ffffffb2;
+  --figma-color-textonlightcanvas: #000000e5;
+  --figma-color-textonlightcanvassecondary: #0000004d;
+  --figma-color-textonmultiplayerblue: #ffffff;
+  --figma-color-textonmultiplayergreen: #ffffff;
+  --figma-color-textonmultiplayergrey: #ffffff;
+  --figma-color-textonmultiplayerpink: #ffffff;
+  --figma-color-textonmultiplayerpurple: #ffffff;
+  --figma-color-textonmultiplayerred: #ffffff;
+  --figma-color-textonmultiplayeryellow: #000000e5;
+  --figma-color-textonvoting: #000000e5;
+  --figma-elevation-100: 0px 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3), inset 0px 0.5px 0px rgba(255, 255, 255, 0.1), 0px 0px 0.5px rgba(0, 0, 0, 0.5);
+  --figma-elevation-200: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3), 0px 3px 8px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-elevation-300: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3), 0px 5px 12px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-elevation-400: 0px 2px 5px rgba(0, 0, 0, 0.35), inset 0px 0px 0.5px rgba(255, 255, 255, 0.35), 0px 10px 16px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-elevation-500: 0px 3px 5px rgba(0, 0, 0, 0.35), inset 0px 0px 0.5px rgba(255, 255, 255, 0.35), 0px 10px 24px rgba(0, 0, 0, 0.45), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-shadow-tooltip: var(--figma-elevation-300);
+  --figma-shadow-menu: var(--figma-elevation-400);
+  --figma-shadow-modal: var(--figma-elevation-500);
+}
diff --git a/packages/theme/src/css/figma-theme.css b/packages/theme/src/css/figma-theme.css
new file mode 100644
index 0000000..6911629
--- /dev/null
+++ b/packages/theme/src/css/figma-theme.css
@@ -0,0 +1,1172 @@
+@theme {
+  --figma-font-family-default: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "SFProLocalRange";
+  --figma-font-family-code: "Roboto Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
+  --figma-font-family-display: "Whyte", ui-sans-serif, system-ui, sans-serif;
+  --figma-font-weight-default: 450;
+  --figma-font-weight-medium: 450;
+  --figma-font-weight-strong: 550;
+  --figma-font-weight-heavy: 550;
+  --figma-font-size-body-large: .8125rem;
+  --figma-line-height-body-large: 1.375rem;
+  --figma-letter-spacing-body-large: -.00203rem;
+  --figma-font-size-body-large-strong: .8125rem;
+  --figma-line-height-body-large-strong: 1.375rem;
+  --figma-letter-spacing-body-large-strong: -.00203rem;
+  --figma-font-size-body-medium: .6875rem;
+  --figma-line-height-body-medium: 1rem;
+  --figma-letter-spacing-body-medium: .00344rem;
+  --figma-font-size-body-medium-strong: .6875rem;
+  --figma-line-height-body-medium-strong: 1rem;
+  --figma-letter-spacing-body-medium-strong: .00344rem;
+  --figma-font-size-body-small: .5625rem;
+  --figma-line-height-body-small: .875rem;
+  --figma-letter-spacing-body-small: .00281rem;
+  --figma-font-size-body-small-strong: .5625rem;
+  --figma-line-height-body-small-strong: .875rem;
+  --figma-letter-spacing-body-small-strong: .00281rem;
+  --figma-font-size-heading-display: 3rem;
+  --figma-line-height-heading-display: 3.5rem;
+  --figma-letter-spacing-heading-display: -.09rem;
+  --figma-font-size-heading-large: 1.5rem;
+  --figma-line-height-heading-large: 2rem;
+  --figma-letter-spacing-heading-large: -.0255rem;
+  --figma-font-size-heading-medium: .9375rem;
+  --figma-line-height-heading-medium: 1.5625rem;
+  --figma-letter-spacing-heading-medium: -.00469rem;
+  --figma-font-size-heading-small: .8125rem;
+  --figma-line-height-heading-small: 1.375rem;
+  --figma-letter-spacing-heading-small: -.00203rem;
+  --figma-radius-sm: .125rem;
+  --figma-radius-md: .3125rem;
+  --figma-radius-lg: .8125rem;
+  --figma-radius-none: 0;
+  --figma-radius-full: 9999px;
+  --figma-space-0: 0;
+  --figma-space-0\.5: .125rem;
+  --figma-space-1: .25rem;
+  --figma-space-1\.5: .375rem;
+  --figma-space-2: .5rem;
+  --figma-space-2\.5: .75rem;
+  --figma-space-3: 1rem;
+  --figma-space-4: 1.5rem;
+  --figma-space-5: 2rem;
+  --figma-space-6: 2.5rem;
+  --figma-border-width-1: 1px;
+  --figma-border-width-4: .25rem;
+  --figma-duration-100: 100ms;
+  --figma-duration-200: 200ms;
+  --figma-duration-300: 300ms;
+  --figma-opacity-50: 0.5;
+  --figma-opacity-disabled: 0.3;
+  --figma-z-index-1: 1;
+  --figma-z-index-2: 2;
+  --figma-z-index-dropdown: 10;
+  --figma-z-index-modal: 50;
+  --figma-z-index-tooltip: 100;
+  --figma-shadow-slider: 0 1px 3px 0 #0000001a, 0 3px 8px 0 #0000001a, 0 0 0.5px 0 #0000002e, inset 0 0 0 0.5px #0000001a;
+  --figma-shadow-hud: 0px 5px 17px rgba(0, 0, 0, 0.2), 0px 2px 7px rgba(0, 0, 0, 0.15);
+  --font-figma: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "SFProLocalRange";
+  --font-figma-code: "Roboto Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
+  --font-weight-figma-default: 450;
+  --font-weight-figma-heavy: 550;
+  --font-weight-figma-medium: 450;
+  --font-weight-figma-strong: 550;
+  --text-figma-body-large: .8125rem;
+  --text-figma-body-large-strong: .8125rem;
+  --text-figma-body-medium: .6875rem;
+  --text-figma-body-medium-strong: .6875rem;
+  --text-figma-body-small: .5625rem;
+  --text-figma-body-small-strong: .5625rem;
+  --text-figma-heading-display: 3rem;
+  --text-figma-heading-large: 1.5rem;
+  --text-figma-heading-medium: .9375rem;
+  --text-figma-heading-small: .8125rem;
+  --leading-figma-body-large: 1.375rem;
+  --leading-figma-body-large-strong: 1.375rem;
+  --leading-figma-body-medium: 1rem;
+  --leading-figma-body-medium-strong: 1rem;
+  --leading-figma-body-small: .875rem;
+  --leading-figma-body-small-strong: .875rem;
+  --leading-figma-heading-display: 3.5rem;
+  --leading-figma-heading-large: 2rem;
+  --leading-figma-heading-medium: 1.5625rem;
+  --leading-figma-heading-small: 1.375rem;
+  --text-figma-body-large--line-height: 1.375rem;
+  --text-figma-body-large-strong--line-height: 1.375rem;
+  --text-figma-body-medium--line-height: 1rem;
+  --text-figma-body-medium-strong--line-height: 1rem;
+  --text-figma-body-small--line-height: .875rem;
+  --text-figma-body-small-strong--line-height: .875rem;
+  --text-figma-heading-display--line-height: 3.5rem;
+  --text-figma-heading-large--line-height: 2rem;
+  --text-figma-heading-medium--line-height: 1.5625rem;
+  --text-figma-heading-small--line-height: 1.375rem;
+  --tracking-figma-body-large: -.00203rem;
+  --tracking-figma-body-large-strong: -.00203rem;
+  --tracking-figma-body-medium: .00344rem;
+  --tracking-figma-body-medium-strong: .00344rem;
+  --tracking-figma-body-small: .00281rem;
+  --tracking-figma-body-small-strong: .00281rem;
+  --tracking-figma-heading-display: -.09rem;
+  --tracking-figma-heading-large: -.0255rem;
+  --tracking-figma-heading-medium: -.00469rem;
+  --tracking-figma-heading-small: -.00203rem;
+  --text-figma-body-large--letter-spacing: -.00203rem;
+  --text-figma-body-large-strong--letter-spacing: -.00203rem;
+  --text-figma-body-medium--letter-spacing: .00344rem;
+  --text-figma-body-medium-strong--letter-spacing: .00344rem;
+  --text-figma-body-small--letter-spacing: .00281rem;
+  --text-figma-body-small-strong--letter-spacing: .00281rem;
+  --text-figma-heading-display--letter-spacing: -.09rem;
+  --text-figma-heading-large--letter-spacing: -.0255rem;
+  --text-figma-heading-medium--letter-spacing: -.00469rem;
+  --text-figma-heading-small--letter-spacing: -.00203rem;
+  --text-figma-body-large-strong--font-weight: 550;
+  --text-figma-body-medium-strong--font-weight: 550;
+  --text-figma-body-small-strong--font-weight: 550;
+  --text-figma-heading-large--font-weight: 550;
+  --text-figma-heading-medium--font-weight: 550;
+  --text-figma-heading-small--font-weight: 550;
+  --radius-figma-full: 9999px;
+  --radius-figma-lg: .8125rem;
+  --radius-figma-md: .3125rem;
+  --radius-figma-none: 0;
+  --radius-figma-sm: .125rem;
+  --spacing-figma-0: 0;
+  --spacing-figma-0\.5: .125rem;
+  --spacing-figma-1: .25rem;
+  --spacing-figma-1\.5: .375rem;
+  --spacing-figma-2: .5rem;
+  --spacing-figma-2\.5: .75rem;
+  --spacing-figma-3: 1rem;
+  --spacing-figma-4: 1.5rem;
+  --spacing-figma-5: 2rem;
+  --spacing-figma-6: 2.5rem;
+  --border-figma-1: 1px;
+  --border-figma-4: .25rem;
+  --transition-duration-figma-100: 100ms;
+  --transition-duration-figma-200: 200ms;
+  --transition-duration-figma-300: 300ms;
+  --opacity-figma-50: 0.5;
+  --opacity-figma-disabled: 0.3;
+  --z-index-figma-1: 1;
+  --z-index-figma-2: 2;
+  --z-index-figma-dropdown: 10;
+  --z-index-figma-modal: 50;
+  --z-index-figma-tooltip: 100;
+}
+
+@theme inline {
+  --shadow-figma-elevation-100: var(--figma-elevation-100);
+  --shadow-figma-elevation-200: var(--figma-elevation-200);
+  --shadow-figma-elevation-300: var(--figma-elevation-300);
+  --shadow-figma-elevation-400: var(--figma-elevation-400);
+  --shadow-figma-elevation-500: var(--figma-elevation-500);
+  --shadow-figma-tooltip: var(--figma-elevation-300);
+  --shadow-figma-menu: var(--figma-elevation-400);
+  --shadow-figma-modal: var(--figma-elevation-500);
+  --shadow-figma-slider: 0 1px 3px 0 #0000001a, 0 3px 8px 0 #0000001a, 0 0 0.5px 0 #0000002e, inset 0 0 0 0.5px #0000001a;
+  --shadow-figma-hud: 0px 5px 17px rgba(0, 0, 0, 0.2), 0px 2px 7px rgba(0, 0, 0, 0.15);
+}
+
+:root, html.figma-light, .figma-light {
+  --figma-color-bg: #ffffff;
+  --figma-color-bg-assistive: #ff24bd;
+  --figma-color-bg-assistive-hover: #ea10ac;
+  --figma-color-bg-assistive-pressed: #ea10ac;
+  --figma-color-bg-assistive-secondary: #cb0b96;
+  --figma-color-bg-assistive-tertiary: #ffe0fc;
+  --figma-color-bg-brand: #0d99ff;
+  --figma-color-bg-brand-hover: #007be5;
+  --figma-color-bg-brand-pressed: #007be5;
+  --figma-color-bg-brand-secondary: #0768cf;
+  --figma-color-bg-brand-tertiary: #e5f4ff;
+  --figma-color-bg-component: #9747ff;
+  --figma-color-bg-component-hover: #8638e5;
+  --figma-color-bg-component-pressed: #8638e5;
+  --figma-color-bg-component-secondary: #7c2bda;
+  --figma-color-bg-component-tertiary: #f1e5ff;
+  --figma-color-bg-danger: #f24822;
+  --figma-color-bg-danger-hover: #dc3412;
+  --figma-color-bg-danger-pressed: #dc3412;
+  --figma-color-bg-danger-secondary: #bd2915;
+  --figma-color-bg-danger-tertiary: #ffe2e0;
+  --figma-color-bg-design: #0d99ff;
+  --figma-color-bg-design-hover: #007be5;
+  --figma-color-bg-design-pressed: #007be5;
+  --figma-color-bg-design-secondary: #0768cf;
+  --figma-color-bg-design-tertiary: #e5f4ff;
+  --figma-color-bg-disabled: #d9d9d9;
+  --figma-color-bg-disabled-secondary: #b3b3b3;
+  --figma-color-bg-figjam: #9747ff;
+  --figma-color-bg-figjam-hover: #8638e5;
+  --figma-color-bg-figjam-pressed: #8638e5;
+  --figma-color-bg-figjam-secondary: #7c2bda;
+  --figma-color-bg-figjam-tertiary: #f1e5ff;
+  --figma-color-bg-handoff: #14ae5c;
+  --figma-color-bg-handoff-hover: #009951;
+  --figma-color-bg-handoff-pressed: #009951;
+  --figma-color-bg-handoff-secondary: #008043;
+  --figma-color-bg-handoff-tertiary: #daecdf;
+  --figma-color-bg-hover: #f5f5f5;
+  --figma-color-bg-info: #e5f4ff;
+  --figma-color-bg-inverse: #2c2c2c;
+  --figma-color-bg-measure: #f24822;
+  --figma-color-bg-measure-hover: #dc3412;
+  --figma-color-bg-measure-pressed: #dc3412;
+  --figma-color-bg-measure-secondary: #bd2915;
+  --figma-color-bg-measure-tertiary: #ffe2e0;
+  --figma-color-bg-menu: #1e1e1e;
+  --figma-color-bg-menu-disabled: #757575;
+  --figma-color-bg-menu-hover: #2c2c2c;
+  --figma-color-bg-menu-pressed: #2c2c2c;
+  --figma-color-bg-menu-secondary: #383838;
+  --figma-color-bg-menu-selected: #0d99ff;
+  --figma-color-bg-menu-selected-hover: #007be5;
+  --figma-color-bg-menu-selected-pressed: #007be5;
+  --figma-color-bg-menu-selected-secondary: #394360;
+  --figma-color-bg-menu-selected-tertiary: #394360;
+  --figma-color-bg-menu-tertiary: #444444;
+  --figma-color-bg-onselected: #bde3ff;
+  --figma-color-bg-onselected-hover: #bde3ff;
+  --figma-color-bg-onselected-pressed: #bde3ff;
+  --figma-color-bg-pressed: #f5f5f5;
+  --figma-color-bg-secondary: #f5f5f5;
+  --figma-color-bg-selected: #e5f4ff;
+  --figma-color-bg-selected-hover: #bde3ff;
+  --figma-color-bg-selected-pressed: #bde3ff;
+  --figma-color-bg-selected-secondary: #f2f9ff;
+  --figma-color-bg-selected-strong: #0d99ff;
+  --figma-color-bg-selected-tertiary: #f2f9ff;
+  --figma-color-bg-success: #14ae5c;
+  --figma-color-bg-success-hover: #009951;
+  --figma-color-bg-success-pressed: #009951;
+  --figma-color-bg-success-secondary: #008043;
+  --figma-color-bg-success-tertiary: #cff7d3;
+  --figma-color-bg-tertiary: #e6e6e6;
+  --figma-color-bg-toolbar: #2c2c2c;
+  --figma-color-bg-toolbar-disabled: #757575;
+  --figma-color-bg-toolbar-hover: #111111;
+  --figma-color-bg-toolbar-pressed: #111111;
+  --figma-color-bg-toolbar-secondary: #383838;
+  --figma-color-bg-toolbar-selected: #0d99ff;
+  --figma-color-bg-toolbar-selected-hover: #007be5;
+  --figma-color-bg-toolbar-selected-pressed: #007be5;
+  --figma-color-bg-toolbar-selected-secondary: #0768cf;
+  --figma-color-bg-toolbar-selected-tertiary: #0d99ff;
+  --figma-color-bg-toolbar-tertiary: #444444;
+  --figma-color-bg-tooltip: #1e1e1e;
+  --figma-color-bg-tooltip-disabled: #757575;
+  --figma-color-bg-tooltip-hover: #2c2c2c;
+  --figma-color-bg-tooltip-pressed: #2c2c2c;
+  --figma-color-bg-tooltip-secondary: #383838;
+  --figma-color-bg-tooltip-selected: #0d99ff;
+  --figma-color-bg-tooltip-selected-hover: #007be5;
+  --figma-color-bg-tooltip-selected-pressed: #007be5;
+  --figma-color-bg-tooltip-selected-secondary: #394360;
+  --figma-color-bg-tooltip-selected-tertiary: #394360;
+  --figma-color-bg-tooltip-tertiary: #444444;
+  --figma-color-bg-warning: #ffcd29;
+  --figma-color-bg-warning-hover: #ffc21a;
+  --figma-color-bg-warning-pressed: #ffc21a;
+  --figma-color-bg-warning-secondary: #fab815;
+  --figma-color-bg-warning-tertiary: #fff1c2;
+  --figma-color-bghoverondarkcanvas: #ffffff33;
+  --figma-color-bghoveronlightcanvas: #00000033;
+  --figma-color-bghovertransparent: #0000000d;
+  --figma-color-bgsecondaryoncanvas: #e6e6e6;
+  --figma-color-bgselectedarea: #0d99ff33;
+  --figma-color-bgtransparent: #ffffff99;
+  --figma-color-bgtransparent-secondary-hover: #0000001a;
+  --figma-color-bgtransparent-secondary-pressed: #00000026;
+  --figma-color-bgtransparentsecondary: #ffffff;
+  --figma-color-bgvoting: #ffcd29;
+  --figma-color-bgvotingsecondary: #fff1c2;
+  --figma-color-bgvotingtertiary: #fffbeb;
+  --figma-color-bgvotingwheeldial: #fffbeb;
+  --figma-color-bgvotingwheelhover: #fff1c2;
+  --figma-color-border: #e6e6e6;
+  --figma-color-border-assistive: #ffbdf2;
+  --figma-color-border-assistive-strong: #ea10ac;
+  --figma-color-border-brand: #bde3ff;
+  --figma-color-border-brand-strong: #007be5;
+  --figma-color-border-component: #e4ccff;
+  --figma-color-border-component-hover: #9747ff;
+  --figma-color-border-component-strong: #8638e5;
+  --figma-color-border-danger: #ffc7c2;
+  --figma-color-border-danger-strong: #dc3412;
+  --figma-color-border-design: #bde3ff;
+  --figma-color-border-design-strong: #007be5;
+  --figma-color-border-disabled: #e6e6e6;
+  --figma-color-border-disabled-strong: #0000004d;
+  --figma-color-border-figjam: #e4ccff;
+  --figma-color-border-figjam-strong: #8638e5;
+  --figma-color-border-handoff: #aff4c6;
+  --figma-color-border-handoff-strong: #009951;
+  --figma-color-border-measure: #ffc7c2;
+  --figma-color-border-measure-strong: #dc3412;
+  --figma-color-border-menu: #383838;
+  --figma-color-border-menu-disabled: #383838;
+  --figma-color-border-menu-disabled-strong: #383838;
+  --figma-color-border-menu-onselected: #80caff;
+  --figma-color-border-menu-onselected-strong: #ffffff;
+  --figma-color-border-menu-selected: #0d99ff;
+  --figma-color-border-menu-selected-strong: #80caff;
+  --figma-color-border-menu-strong: #ffffff;
+  --figma-color-border-onassistive: #ea10ac;
+  --figma-color-border-onassistive-strong: #ffffff;
+  --figma-color-border-onbrand: #007be5;
+  --figma-color-border-onbrand-strong: #ffffff;
+  --figma-color-border-oncomponent: #8638e5;
+  --figma-color-border-oncomponent-strong: #ffffff;
+  --figma-color-border-ondanger: #dc3412;
+  --figma-color-border-ondanger-strong: #ffffff;
+  --figma-color-border-ondesign: #007be5;
+  --figma-color-border-ondesign-strong: #ffffff;
+  --figma-color-border-onfigjam: #8638e5;
+  --figma-color-border-onfigjam-strong: #8638e5;
+  --figma-color-border-onmeasure: #dc3412;
+  --figma-color-border-onmeasure-strong: #ffffff;
+  --figma-color-border-onselected: #bde3ff;
+  --figma-color-border-onselected-strong: #000000e5;
+  --figma-color-border-onsuccess: #009951;
+  --figma-color-border-onsuccess-strong: #ffffff;
+  --figma-color-border-onwarning: #fab815;
+  --figma-color-border-onwarning-strong: #000000e5;
+  --figma-color-border-selected: #0d99ff;
+  --figma-color-border-selected-strong: #007be5;
+  --figma-color-border-strong: #2c2c2c;
+  --figma-color-border-success: #aff4c6;
+  --figma-color-border-success-strong: #009951;
+  --figma-color-border-toolbar: #444444;
+  --figma-color-border-toolbar-disabled: #ffffff66;
+  --figma-color-border-toolbar-onselected: #ffffff;
+  --figma-color-border-toolbar-selected: #0d99ff;
+  --figma-color-border-toolbar-selected-strong: #80caff;
+  --figma-color-border-toolbar-strong: #ffffff;
+  --figma-color-border-tooltip: #383838;
+  --figma-color-border-tooltip-disabled: #383838;
+  --figma-color-border-tooltip-disabled-strong: #383838;
+  --figma-color-border-tooltip-onselected: #007be5;
+  --figma-color-border-tooltip-onselected-strong: #ffffff;
+  --figma-color-border-tooltip-selected: #0d99ff;
+  --figma-color-border-tooltip-selected-strong: #80caff;
+  --figma-color-border-tooltip-strong: #ffffff;
+  --figma-color-border-warning: #ffe8a3;
+  --figma-color-border-warning-strong: #b86200;
+  --figma-color-bordertranslucent: #0000001a;
+  --figma-color-conditionalborder: #ffffff00;
+  --figma-color-icon: #000000e5;
+  --figma-color-icon-assistive: #ea10ac;
+  --figma-color-icon-assistive-pressed: #cb0b96;
+  --figma-color-icon-assistive-secondary: #ea10ac;
+  --figma-color-icon-assistive-tertiary: #ea10ac;
+  --figma-color-icon-brand: #007be5;
+  --figma-color-icon-brand-pressed: #0768cf;
+  --figma-color-icon-brand-secondary: #80caff;
+  --figma-color-icon-brand-tertiary: #bde3ff;
+  --figma-color-icon-component: #8638e5;
+  --figma-color-icon-component-pressed: #7c2bda;
+  --figma-color-icon-component-secondary: #c5b2dc;
+  --figma-color-icon-component-tertiary: #c5b2dc;
+  --figma-color-icon-danger: #f24822;
+  --figma-color-icon-danger-hover: #bd2915;
+  --figma-color-icon-danger-pressed: #bd2915;
+  --figma-color-icon-danger-secondary: #f24822;
+  --figma-color-icon-danger-secondary-hover: #f24822;
+  --figma-color-icon-danger-tertiary: #f24822;
+  --figma-color-icon-design: #007be5;
+  --figma-color-icon-design-pressed: #0768cf;
+  --figma-color-icon-design-secondary: #007be5;
+  --figma-color-icon-design-tertiary: #007be5;
+  --figma-color-icon-disabled: #0000004d;
+  --figma-color-icon-figjam: #8638e5;
+  --figma-color-icon-figjam-pressed: #7c2bda;
+  --figma-color-icon-figjam-secondary: #c5b2dc;
+  --figma-color-icon-figjam-tertiary: #c5b2dc;
+  --figma-color-icon-handoff: #009951;
+  --figma-color-icon-handoff-pressed: #008043;
+  --figma-color-icon-handoff-secondary: #009951;
+  --figma-color-icon-handoff-tertiary: #009951;
+  --figma-color-icon-hover: #000000e5;
+  --figma-color-icon-measure: #f24822;
+  --figma-color-icon-measure-hover: #bd2915;
+  --figma-color-icon-measure-pressed: #bd2915;
+  --figma-color-icon-measure-secondary: #f24822;
+  --figma-color-icon-measure-secondary-hover: #f24822;
+  --figma-color-icon-measure-tertiary: #f24822;
+  --figma-color-icon-menu: #ffffff;
+  --figma-color-icon-menu-danger: #f24822;
+  --figma-color-icon-menu-disabled: #ffffff66;
+  --figma-color-icon-menu-hover: #ffffff;
+  --figma-color-icon-menu-ondisabled: #1e1e1e;
+  --figma-color-icon-menu-onselected: #ffffff;
+  --figma-color-icon-menu-pressed: #0d99ff;
+  --figma-color-icon-menu-secondary: #ffffffb2;
+  --figma-color-icon-menu-secondary-hover: #ffffff;
+  --figma-color-icon-menu-selected: #80caff;
+  --figma-color-icon-menu-selected-secondary: #80caff;
+  --figma-color-icon-menu-selected-tertiary: #80caff;
+  --figma-color-icon-menu-tertiary: #ffffff66;
+  --figma-color-icon-menu-tertiary-hover: #ffffff;
+  --figma-color-icon-menu-warning: #ffcd29;
+  --figma-color-icon-onassistive: #ffffff;
+  --figma-color-icon-onassistive-secondary: #ffffffcc;
+  --figma-color-icon-onassistive-tertiary: #ffffff66;
+  --figma-color-icon-onbrand: #ffffff;
+  --figma-color-icon-onbrand-secondary: #ffffffcc;
+  --figma-color-icon-onbrand-tertiary: #ffffff66;
+  --figma-color-icon-oncomponent: #ffffff;
+  --figma-color-icon-oncomponent-secondary: #ffffffcc;
+  --figma-color-icon-oncomponent-tertiary: #ffffff66;
+  --figma-color-icon-ondanger: #ffffff;
+  --figma-color-icon-ondanger-secondary: #ffffffcc;
+  --figma-color-icon-ondanger-tertiary: #ffffff66;
+  --figma-color-icon-ondesign: #ffffff;
+  --figma-color-icon-ondesign-secondary: #ffffffcc;
+  --figma-color-icon-ondesign-tertiary: #ffffff66;
+  --figma-color-icon-ondisabled: #ffffff;
+  --figma-color-icon-onfigjam: #ffffff;
+  --figma-color-icon-onfigjam-secondary: #ffffffcc;
+  --figma-color-icon-onfigjam-tertiary: #ffffff66;
+  --figma-color-icon-oninverse: #ffffffe5;
+  --figma-color-icon-onmeasure: #ffffff;
+  --figma-color-icon-onmeasure-secondary: #ffffffcc;
+  --figma-color-icon-onmeasure-tertiary: #ffffff66;
+  --figma-color-icon-onselected: #000000e5;
+  --figma-color-icon-onselected-secondary: #00000080;
+  --figma-color-icon-onselected-strong: #ffffff;
+  --figma-color-icon-onselected-tertiary: #0000004d;
+  --figma-color-icon-onsuccess: #ffffff;
+  --figma-color-icon-onsuccess-secondary: #ffffffcc;
+  --figma-color-icon-onsuccess-tertiary: #ffffff66;
+  --figma-color-icon-onwarning: #000000e5;
+  --figma-color-icon-onwarning-secondary: #00000080;
+  --figma-color-icon-onwarning-tertiary: #0000004d;
+  --figma-color-icon-pressed: #007be5;
+  --figma-color-icon-secondary: #00000080;
+  --figma-color-icon-secondary-hover: #000000e5;
+  --figma-color-icon-selected: #007be5;
+  --figma-color-icon-selected-secondary: #007be5;
+  --figma-color-icon-selected-tertiary: #007be5;
+  --figma-color-icon-success: #14ae5c;
+  --figma-color-icon-success-pressed: #008043;
+  --figma-color-icon-success-secondary: #14ae5c;
+  --figma-color-icon-success-tertiary: #14ae5c;
+  --figma-color-icon-tertiary: #0000004d;
+  --figma-color-icon-tertiary-hover: #000000e5;
+  --figma-color-icon-toolbar: #ffffff;
+  --figma-color-icon-toolbar-danger: #f24822;
+  --figma-color-icon-toolbar-disabled: #ffffff66;
+  --figma-color-icon-toolbar-hover: #ffffff;
+  --figma-color-icon-toolbar-ondisabled: #2c2c2c;
+  --figma-color-icon-toolbar-onselected: #ffffff;
+  --figma-color-icon-toolbar-pressed: #0d99ff;
+  --figma-color-icon-toolbar-secondary: #ffffffb2;
+  --figma-color-icon-toolbar-secondary-hover: #ffffff;
+  --figma-color-icon-toolbar-selected: #80caff;
+  --figma-color-icon-toolbar-selected-secondary: #80caff;
+  --figma-color-icon-toolbar-selected-tertiary: #80caff;
+  --figma-color-icon-toolbar-tertiary: #ffffff66;
+  --figma-color-icon-toolbar-tertiary-hover: #ffffff;
+  --figma-color-icon-toolbar-warning: #ffcd29;
+  --figma-color-icon-tooltip: #ffffff;
+  --figma-color-icon-tooltip-danger: #f24822;
+  --figma-color-icon-tooltip-disabled: #ffffff66;
+  --figma-color-icon-tooltip-hover: #ffffff;
+  --figma-color-icon-tooltip-ondisabled: #1e1e1e;
+  --figma-color-icon-tooltip-onselected: #ffffff;
+  --figma-color-icon-tooltip-pressed: #0d99ff;
+  --figma-color-icon-tooltip-secondary: #ffffffb2;
+  --figma-color-icon-tooltip-secondary-hover: #ffffff;
+  --figma-color-icon-tooltip-selected: #80caff;
+  --figma-color-icon-tooltip-selected-secondary: #80caff;
+  --figma-color-icon-tooltip-selected-tertiary: #80caff;
+  --figma-color-icon-tooltip-tertiary: #ffffff66;
+  --figma-color-icon-tooltip-tertiary-hover: #ffffff;
+  --figma-color-icon-tooltip-warning: #ffcd29;
+  --figma-color-icon-warning: #ffcd29;
+  --figma-color-icon-warning-pressed: #b86200;
+  --figma-color-icon-warning-secondary: #ffcd29;
+  --figma-color-icon-warning-tertiary: #ffcd29;
+  --figma-color-icondesignfilesecondary: #80caff;
+  --figma-color-iconfigjamfilesecondary: #d9b8ff;
+  --figma-color-iconondarkcanvas: #ffffffe5;
+  --figma-color-icononlightcanvas: #000000e5;
+  --figma-color-icononvoting: #000000e5;
+  --figma-color-iconprototypefile: #d9d9d9;
+  --figma-color-iconprototypefilesecondary: #2c2c2c;
+  --figma-color-iconpublishedfile: #2c2c2c;
+  --figma-color-iconpublishedfilesecondary: #757575;
+  --figma-color-loading: #0000001a;
+  --figma-color-loadingmenu: #ffffff1a;
+  --figma-color-loadingsecondary: #0000000d;
+  --figma-color-loadingsecondarymenu: #ffffff0d;
+  --figma-color-modalbackdrop: #00000080;
+  --figma-color-multiplayerblue: #007be5;
+  --figma-color-multiplayerbluehover: #0768cf;
+  --figma-color-multiplayerbluesecondary: #034ac1;
+  --figma-color-multiplayergreen: #14ae5c;
+  --figma-color-multiplayergreenhover: #009951;
+  --figma-color-multiplayergreensecondary: #036838;
+  --figma-color-multiplayergrey: #667799;
+  --figma-color-multiplayergreyhover: #536383;
+  --figma-color-multiplayergreysecondary: #394360;
+  --figma-color-multiplayerpink: #ff24bd;
+  --figma-color-multiplayerpinkhover: #ea10ac;
+  --figma-color-multiplayerpinksecondary: #971172;
+  --figma-color-multiplayerpurple: #9747ff;
+  --figma-color-multiplayerpurplehover: #8638e5;
+  --figma-color-multiplayerpurplesecondary: #681abb;
+  --figma-color-multiplayerred: #f24822;
+  --figma-color-multiplayerredhover: #dc3412;
+  --figma-color-multiplayerredsecondary: #9f1f18;
+  --figma-color-multiplayeryellow: #ffcd29;
+  --figma-color-multiplayeryellowhover: #ffc21a;
+  --figma-color-multiplayeryellowsecondary: #eba611;
+  --figma-color-nodehandle: #80caff;
+  --figma-color-prototypeloadingbackdrop: #000000e5;
+  --figma-color-scrollbar: #b3b3b380;
+  --figma-color-shadow: #00000026;
+  --figma-color-text: #000000e5;
+  --figma-color-text-assistive: #ea10ac;
+  --figma-color-text-assistive-pressed: #cb0b96;
+  --figma-color-text-assistive-secondary: #ea10ac;
+  --figma-color-text-assistive-tertiary: #ea10ac;
+  --figma-color-text-brand: #007be5;
+  --figma-color-text-brand-secondary: #007be5;
+  --figma-color-text-brand-tertiary: #007be5;
+  --figma-color-text-component: #8638e5;
+  --figma-color-text-component-pressed: #7c2bda;
+  --figma-color-text-component-secondary: #c5b2dc;
+  --figma-color-text-component-tertiary: #c5b2dc;
+  --figma-color-text-danger: #dc3412;
+  --figma-color-text-danger-secondary: #dc3412;
+  --figma-color-text-danger-tertiary: #dc3412;
+  --figma-color-text-design: #007be5;
+  --figma-color-text-design-pressed: #0768cf;
+  --figma-color-text-design-secondary: #007be5;
+  --figma-color-text-design-tertiary: #007be5;
+  --figma-color-text-disabled: #0000004d;
+  --figma-color-text-figjam: #8638e5;
+  --figma-color-text-figjam-pressed: #7c2bda;
+  --figma-color-text-figjam-secondary: #c5b2dc;
+  --figma-color-text-figjam-tertiary: #c5b2dc;
+  --figma-color-text-handoff: #009951;
+  --figma-color-text-handoff-secondary: #009951;
+  --figma-color-text-handoff-tertiary: #009951;
+  --figma-color-text-hover: #000000e5;
+  --figma-color-text-measure: #dc3412;
+  --figma-color-text-measure-secondary: #dc3412;
+  --figma-color-text-measure-tertiary: #dc3412;
+  --figma-color-text-menu: #ffffff;
+  --figma-color-text-menu-danger: #f24822;
+  --figma-color-text-menu-disabled: #ffffff66;
+  --figma-color-text-menu-hover: #ffffff;
+  --figma-color-text-menu-ondisabled: #1e1e1e;
+  --figma-color-text-menu-onselected: #ffffff;
+  --figma-color-text-menu-secondary: #ffffffb2;
+  --figma-color-text-menu-secondary-hover: #ffffff;
+  --figma-color-text-menu-selected: #80caff;
+  --figma-color-text-menu-selected-secondary: #80caff;
+  --figma-color-text-menu-selected-tertiary: #80caff;
+  --figma-color-text-menu-tertiary: #ffffff66;
+  --figma-color-text-menu-tertiary-hover: #ffffff;
+  --figma-color-text-menu-warning: #ffd966;
+  --figma-color-text-onassistive: #ffffff;
+  --figma-color-text-onassistive-secondary: #ffffffcc;
+  --figma-color-text-onassistive-tertiary: #ffffff66;
+  --figma-color-text-onbrand: #ffffff;
+  --figma-color-text-onbrand-secondary: #ffffffcc;
+  --figma-color-text-onbrand-tertiary: #ffffff66;
+  --figma-color-text-oncomponent: #ffffff;
+  --figma-color-text-oncomponent-secondary: #ffffffcc;
+  --figma-color-text-oncomponent-tertiary: #ffffff66;
+  --figma-color-text-ondanger: #ffffff;
+  --figma-color-text-ondanger-secondary: #ffffffcc;
+  --figma-color-text-ondanger-tertiary: #ffffff66;
+  --figma-color-text-ondesign: #ffffff;
+  --figma-color-text-ondesign-secondary: #ffffffcc;
+  --figma-color-text-ondesign-tertiary: #ffffff66;
+  --figma-color-text-ondisabled: #ffffff;
+  --figma-color-text-onfigjam: #ffffff;
+  --figma-color-text-onfigjam-secondary: #ffffffcc;
+  --figma-color-text-onfigjam-tertiary: #ffffff66;
+  --figma-color-text-oninverse: #ffffffe5;
+  --figma-color-text-onmeasure: #ffffff;
+  --figma-color-text-onmeasure-secondary: #ffffffcc;
+  --figma-color-text-onmeasure-tertiary: #ffffff66;
+  --figma-color-text-onselected: #000000e5;
+  --figma-color-text-onselected-secondary: #00000080;
+  --figma-color-text-onselected-strong: #ffffff;
+  --figma-color-text-onselected-tertiary: #0000004d;
+  --figma-color-text-onsuccess: #ffffff;
+  --figma-color-text-onsuccess-secondary: #ffffffcc;
+  --figma-color-text-onsuccess-tertiary: #ffffff66;
+  --figma-color-text-onwarning: #000000e5;
+  --figma-color-text-onwarning-secondary: #00000080;
+  --figma-color-text-onwarning-tertiary: #0000004d;
+  --figma-color-text-secondary: #00000080;
+  --figma-color-text-secondary-hover: #000000e5;
+  --figma-color-text-selected: #007be5;
+  --figma-color-text-selected-secondary: #007be5;
+  --figma-color-text-selected-tertiary: #007be5;
+  --figma-color-text-success: #009951;
+  --figma-color-text-success-secondary: #009951;
+  --figma-color-text-success-tertiary: #009951;
+  --figma-color-text-tertiary: #0000004d;
+  --figma-color-text-tertiary-hover: #000000e5;
+  --figma-color-text-toolbar: #ffffff;
+  --figma-color-text-toolbar-danger: #ffafa3;
+  --figma-color-text-toolbar-disabled: #ffffff66;
+  --figma-color-text-toolbar-hover: #ffffff;
+  --figma-color-text-toolbar-ondisabled: #2c2c2c;
+  --figma-color-text-toolbar-onselected: #ffffff;
+  --figma-color-text-toolbar-secondary: #ffffffb2;
+  --figma-color-text-toolbar-secondary-hover: #ffffff;
+  --figma-color-text-toolbar-selected: #80caff;
+  --figma-color-text-toolbar-selected-secondary: #80caff;
+  --figma-color-text-toolbar-selected-tertiary: #80caff;
+  --figma-color-text-toolbar-tertiary: #ffffff66;
+  --figma-color-text-toolbar-tertiary-hover: #ffffff;
+  --figma-color-text-toolbar-warning: #ffd966;
+  --figma-color-text-tooltip: #ffffff;
+  --figma-color-text-tooltip-danger: #ffafa3;
+  --figma-color-text-tooltip-disabled: #ffffff66;
+  --figma-color-text-tooltip-hover: #ffffff;
+  --figma-color-text-tooltip-ondisabled: #1e1e1e;
+  --figma-color-text-tooltip-onselected: #ffffff;
+  --figma-color-text-tooltip-secondary: #ffffffb2;
+  --figma-color-text-tooltip-secondary-hover: #ffffff;
+  --figma-color-text-tooltip-selected: #80caff;
+  --figma-color-text-tooltip-selected-secondary: #80caff;
+  --figma-color-text-tooltip-selected-tertiary: #80caff;
+  --figma-color-text-tooltip-tertiary: #ffffff66;
+  --figma-color-text-tooltip-tertiary-hover: #ffffff;
+  --figma-color-text-tooltip-warning: #ffd966;
+  --figma-color-text-warning: #b86200;
+  --figma-color-text-warning-secondary: #b86200;
+  --figma-color-text-warning-tertiary: #b86200;
+  --figma-color-texthighlight: #0d99ff66;
+  --figma-color-textondarkcanvas: #ffffffe5;
+  --figma-color-textondarkcanvassecondary: #ffffffb2;
+  --figma-color-textonlightcanvas: #000000e5;
+  --figma-color-textonlightcanvassecondary: #0000004d;
+  --figma-color-textonmultiplayerblue: #ffffff;
+  --figma-color-textonmultiplayergreen: #ffffff;
+  --figma-color-textonmultiplayergrey: #ffffff;
+  --figma-color-textonmultiplayerpink: #ffffff;
+  --figma-color-textonmultiplayerpurple: #ffffff;
+  --figma-color-textonmultiplayerred: #ffffff;
+  --figma-color-textonmultiplayeryellow: #000000e5;
+  --figma-color-textonvoting: #000000e5;
+  --figma-elevation-100: 0px 1px 3px rgba(0, 0, 0, 0.15), 0px 0px 0.5px rgba(0, 0, 0, 0.3);
+  --figma-elevation-200: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 3px 8px rgba(0, 0, 0, 0.1), 0px 0px 0.5px rgba(0, 0, 0, 0.18);
+  --figma-elevation-300: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 5px 12px rgba(0, 0, 0, 0.13), 0px 0px 0.5px rgba(0, 0, 0, 0.15);
+  --figma-elevation-400: 0px 2px 5px rgba(0, 0, 0, 0.15), 0px 10px 16px rgba(0, 0, 0, 0.12), 0px 0px 0.5px rgba(0, 0, 0, 0.12);
+  --figma-elevation-500: 0px 2px 5px rgba(0, 0, 0, 0.15), 0px 10px 24px rgba(0, 0, 0, 0.18), 0px 0px 0.5px rgba(0, 0, 0, 0.08);
+  --figma-shadow-tooltip: var(--figma-elevation-300);
+  --figma-shadow-menu: var(--figma-elevation-400);
+  --figma-shadow-modal: var(--figma-elevation-500);
+}
+
+html.figma-dark, .figma-dark {
+  --figma-color-bg: #2c2c2c;
+  --figma-color-bg-assistive: #f316b0;
+  --figma-color-bg-assistive-hover: #d01b9c;
+  --figma-color-bg-assistive-pressed: #d01b9c;
+  --figma-color-bg-assistive-secondary: #96207a;
+  --figma-color-bg-assistive-tertiary: #68275e;
+  --figma-color-bg-brand: #0c8ce9;
+  --figma-color-bg-brand-hover: #0a6dc2;
+  --figma-color-bg-brand-pressed: #0a6dc2;
+  --figma-color-bg-brand-secondary: #105cad;
+  --figma-color-bg-brand-tertiary: #394360;
+  --figma-color-bg-component: #8a38f5;
+  --figma-color-bg-component-hover: #7a2ed6;
+  --figma-color-bg-component-pressed: #7a2ed6;
+  --figma-color-bg-component-secondary: #652ca8;
+  --figma-color-bg-component-tertiary: #473956;
+  --figma-color-bg-danger: #e03e1a;
+  --figma-color-bg-danger-hover: #c4381c;
+  --figma-color-bg-danger-pressed: #c4381c;
+  --figma-color-bg-danger-secondary: #963323;
+  --figma-color-bg-danger-tertiary: #60332a;
+  --figma-color-bg-design: #0c8ce9;
+  --figma-color-bg-design-hover: #0a6dc2;
+  --figma-color-bg-design-pressed: #0a6dc2;
+  --figma-color-bg-design-secondary: #105cad;
+  --figma-color-bg-design-tertiary: #394360;
+  --figma-color-bg-disabled: #757575;
+  --figma-color-bg-disabled-secondary: #b3b3b3;
+  --figma-color-bg-figjam: #8a38f5;
+  --figma-color-bg-figjam-hover: #7a2ed6;
+  --figma-color-bg-figjam-pressed: #7a2ed6;
+  --figma-color-bg-figjam-secondary: #652ca8;
+  --figma-color-bg-figjam-tertiary: #473956;
+  --figma-color-bg-handoff: #198f51;
+  --figma-color-bg-handoff-hover: #078348;
+  --figma-color-bg-handoff-pressed: #078348;
+  --figma-color-bg-handoff-secondary: #0a5c35;
+  --figma-color-bg-handoff-tertiary: #476656;
+  --figma-color-bg-hover: #383838;
+  --figma-color-bg-info: #394360;
+  --figma-color-bg-inverse: #ffffff;
+  --figma-color-bg-measure: #e03e1a;
+  --figma-color-bg-measure-hover: #c4381c;
+  --figma-color-bg-measure-pressed: #c4381c;
+  --figma-color-bg-measure-secondary: #963323;
+  --figma-color-bg-measure-tertiary: #60332a;
+  --figma-color-bg-menu: #1e1e1e;
+  --figma-color-bg-menu-disabled: #757575;
+  --figma-color-bg-menu-hover: #2c2c2c;
+  --figma-color-bg-menu-pressed: #2c2c2c;
+  --figma-color-bg-menu-secondary: #383838;
+  --figma-color-bg-menu-selected: #0c8ce9;
+  --figma-color-bg-menu-selected-hover: #0a6dc2;
+  --figma-color-bg-menu-selected-pressed: #0a6dc2;
+  --figma-color-bg-menu-selected-secondary: #394360;
+  --figma-color-bg-menu-selected-tertiary: #394360;
+  --figma-color-bg-menu-tertiary: #444444;
+  --figma-color-bg-onselected: #667799;
+  --figma-color-bg-onselected-hover: #667799;
+  --figma-color-bg-onselected-pressed: #667799;
+  --figma-color-bg-pressed: #383838;
+  --figma-color-bg-secondary: #383838;
+  --figma-color-bg-selected: #4a5878;
+  --figma-color-bg-selected-hover: #536383;
+  --figma-color-bg-selected-pressed: #536383;
+  --figma-color-bg-selected-secondary: #394360;
+  --figma-color-bg-selected-strong: #0c8ce9;
+  --figma-color-bg-selected-tertiary: #394360;
+  --figma-color-bg-success: #198f51;
+  --figma-color-bg-success-hover: #078348;
+  --figma-color-bg-success-pressed: #078348;
+  --figma-color-bg-success-secondary: #0a5c35;
+  --figma-color-bg-success-tertiary: #476656;
+  --figma-color-bg-tertiary: #444444;
+  --figma-color-bg-toolbar: #2c2c2c;
+  --figma-color-bg-toolbar-disabled: #757575;
+  --figma-color-bg-toolbar-hover: #111111;
+  --figma-color-bg-toolbar-pressed: #111111;
+  --figma-color-bg-toolbar-secondary: #383838;
+  --figma-color-bg-toolbar-selected: #0c8ce9;
+  --figma-color-bg-toolbar-selected-hover: #0a6dc2;
+  --figma-color-bg-toolbar-selected-pressed: #0a6dc2;
+  --figma-color-bg-toolbar-selected-secondary: #105cad;
+  --figma-color-bg-toolbar-selected-tertiary: #0c8ce9;
+  --figma-color-bg-toolbar-tertiary: #444444;
+  --figma-color-bg-tooltip: #1e1e1e;
+  --figma-color-bg-tooltip-disabled: #757575;
+  --figma-color-bg-tooltip-hover: #2c2c2c;
+  --figma-color-bg-tooltip-pressed: #2c2c2c;
+  --figma-color-bg-tooltip-secondary: #383838;
+  --figma-color-bg-tooltip-selected: #0c8ce9;
+  --figma-color-bg-tooltip-selected-hover: #0a6dc2;
+  --figma-color-bg-tooltip-selected-pressed: #0a6dc2;
+  --figma-color-bg-tooltip-selected-secondary: #394360;
+  --figma-color-bg-tooltip-selected-tertiary: #394360;
+  --figma-color-bg-tooltip-tertiary: #444444;
+  --figma-color-bg-warning: #f3c11b;
+  --figma-color-bg-warning-hover: #f2b50d;
+  --figma-color-bg-warning-pressed: #f2b50d;
+  --figma-color-bg-warning-secondary: #e4a711;
+  --figma-color-bg-warning-tertiary: #5c4100;
+  --figma-color-bghoverondarkcanvas: #ffffff33;
+  --figma-color-bghoveronlightcanvas: #00000033;
+  --figma-color-bghovertransparent: #ffffff0d;
+  --figma-color-bgsecondaryoncanvas: #111111;
+  --figma-color-bgselectedarea: #0d99ff33;
+  --figma-color-bgtransparent: #00000099;
+  --figma-color-bgtransparent-secondary-hover: #ffffff1a;
+  --figma-color-bgtransparent-secondary-pressed: #ffffff26;
+  --figma-color-bgtransparentsecondary: #ffffff26;
+  --figma-color-bgvoting: #f3c11b;
+  --figma-color-bgvotingsecondary: #fbe8ad;
+  --figma-color-bgvotingtertiary: #fdf7dd;
+  --figma-color-bgvotingwheeldial: #fdf7dd;
+  --figma-color-bgvotingwheelhover: #fbe8ad;
+  --figma-color-border: #444444;
+  --figma-color-border-assistive: #96207a;
+  --figma-color-border-assistive-strong: #fc9ce0;
+  --figma-color-border-brand: #105cad;
+  --figma-color-border-brand-strong: #7cc4f8;
+  --figma-color-border-component: #652ca8;
+  --figma-color-border-component-hover: #8a38f5;
+  --figma-color-border-component-strong: #d6b6fb;
+  --figma-color-border-danger: #963323;
+  --figma-color-border-danger-strong: #fca397;
+  --figma-color-border-design: #105cad;
+  --figma-color-border-design-strong: #7cc4f8;
+  --figma-color-border-disabled: #444444;
+  --figma-color-border-disabled-strong: #ffffff66;
+  --figma-color-border-figjam: #652ca8;
+  --figma-color-border-figjam-strong: #d1a8ff;
+  --figma-color-border-handoff: #0a5c35;
+  --figma-color-border-handoff-strong: #79d297;
+  --figma-color-border-measure: #963323;
+  --figma-color-border-measure-strong: #fca397;
+  --figma-color-border-menu: #383838;
+  --figma-color-border-menu-disabled: #383838;
+  --figma-color-border-menu-disabled-strong: #383838;
+  --figma-color-border-menu-onselected: #7cc4f8;
+  --figma-color-border-menu-onselected-strong: #ffffff;
+  --figma-color-border-menu-selected: #0c8ce9;
+  --figma-color-border-menu-selected-strong: #7cc4f8;
+  --figma-color-border-menu-strong: #ffffff;
+  --figma-color-border-onassistive: #d01b9c;
+  --figma-color-border-onassistive-strong: #ffffff;
+  --figma-color-border-onbrand: #0a6dc2;
+  --figma-color-border-onbrand-strong: #ffffff;
+  --figma-color-border-oncomponent: #7a2ed6;
+  --figma-color-border-oncomponent-strong: #ffffff;
+  --figma-color-border-ondanger: #c4381c;
+  --figma-color-border-ondanger-strong: #ffffff;
+  --figma-color-border-ondesign: #0a6dc2;
+  --figma-color-border-ondesign-strong: #ffffff;
+  --figma-color-border-onfigjam: #7a2ed6;
+  --figma-color-border-onfigjam-strong: #7a2ed6;
+  --figma-color-border-onmeasure: #c4381c;
+  --figma-color-border-onmeasure-strong: #ffffff;
+  --figma-color-border-onselected: #667799;
+  --figma-color-border-onselected-strong: #ffffffe5;
+  --figma-color-border-onsuccess: #078348;
+  --figma-color-border-onsuccess-strong: #ffffff;
+  --figma-color-border-onwarning: #e4a711;
+  --figma-color-border-onwarning-strong: #000000e5;
+  --figma-color-border-selected: #0c8ce9;
+  --figma-color-border-selected-strong: #7cc4f8;
+  --figma-color-border-strong: #ffffffe5;
+  --figma-color-border-success: #0a5c35;
+  --figma-color-border-success-strong: #79d297;
+  --figma-color-border-toolbar: #444444;
+  --figma-color-border-toolbar-disabled: #ffffff66;
+  --figma-color-border-toolbar-onselected: #ffffff;
+  --figma-color-border-toolbar-selected: #0c8ce9;
+  --figma-color-border-toolbar-selected-strong: #7cc4f8;
+  --figma-color-border-toolbar-strong: #ffffff;
+  --figma-color-border-tooltip: #383838;
+  --figma-color-border-tooltip-disabled: #383838;
+  --figma-color-border-tooltip-disabled-strong: #383838;
+  --figma-color-border-tooltip-onselected: #0a6dc2;
+  --figma-color-border-tooltip-onselected-strong: #ffffff;
+  --figma-color-border-tooltip-selected: #0c8ce9;
+  --figma-color-border-tooltip-selected-strong: #7cc4f8;
+  --figma-color-border-tooltip-strong: #ffffff;
+  --figma-color-border-warning: #925711;
+  --figma-color-border-warning-strong: #f7d15f;
+  --figma-color-bordertranslucent: #ffffff1a;
+  --figma-color-conditionalborder: #444444;
+  --figma-color-icon: #ffffff;
+  --figma-color-icon-assistive: #fc9ce0;
+  --figma-color-icon-assistive-pressed: #fbb1ed;
+  --figma-color-icon-assistive-secondary: #fc9ce0;
+  --figma-color-icon-assistive-tertiary: #fc9ce0;
+  --figma-color-icon-brand: #7cc4f8;
+  --figma-color-icon-brand-pressed: #0c8ce9;
+  --figma-color-icon-brand-secondary: #0a6dc2;
+  --figma-color-icon-brand-tertiary: #394360;
+  --figma-color-icon-component: #d1a8ff;
+  --figma-color-icon-component-pressed: #d6b6fb;
+  --figma-color-icon-component-secondary: #7f699b;
+  --figma-color-icon-component-tertiary: #7f699b;
+  --figma-color-icon-danger: #e03e1a;
+  --figma-color-icon-danger-hover: #fbbcb6;
+  --figma-color-icon-danger-pressed: #fbbcb6;
+  --figma-color-icon-danger-secondary: #e03e1a;
+  --figma-color-icon-danger-secondary-hover: #e03e1a;
+  --figma-color-icon-danger-tertiary: #e03e1a;
+  --figma-color-icon-design: #7cc4f8;
+  --figma-color-icon-design-pressed: #a8d7fa;
+  --figma-color-icon-design-secondary: #7cc4f8;
+  --figma-color-icon-design-tertiary: #7cc4f8;
+  --figma-color-icon-disabled: #ffffff66;
+  --figma-color-icon-figjam: #d1a8ff;
+  --figma-color-icon-figjam-pressed: #d6b6fb;
+  --figma-color-icon-figjam-secondary: #7f699b;
+  --figma-color-icon-figjam-tertiary: #7f699b;
+  --figma-color-icon-handoff: #79d297;
+  --figma-color-icon-handoff-pressed: #a1e8b9;
+  --figma-color-icon-handoff-secondary: #79d297;
+  --figma-color-icon-handoff-tertiary: #79d297;
+  --figma-color-icon-hover: #ffffff;
+  --figma-color-icon-measure: #e03e1a;
+  --figma-color-icon-measure-hover: #fbbcb6;
+  --figma-color-icon-measure-pressed: #fbbcb6;
+  --figma-color-icon-measure-secondary: #e03e1a;
+  --figma-color-icon-measure-secondary-hover: #e03e1a;
+  --figma-color-icon-measure-tertiary: #e03e1a;
+  --figma-color-icon-menu: #ffffff;
+  --figma-color-icon-menu-danger: #e03e1a;
+  --figma-color-icon-menu-disabled: #ffffff66;
+  --figma-color-icon-menu-hover: #ffffff;
+  --figma-color-icon-menu-ondisabled: #1e1e1e;
+  --figma-color-icon-menu-onselected: #ffffff;
+  --figma-color-icon-menu-pressed: #0c8ce9;
+  --figma-color-icon-menu-secondary: #ffffffb2;
+  --figma-color-icon-menu-secondary-hover: #ffffff;
+  --figma-color-icon-menu-selected: #7cc4f8;
+  --figma-color-icon-menu-selected-secondary: #7cc4f8;
+  --figma-color-icon-menu-selected-tertiary: #7cc4f8;
+  --figma-color-icon-menu-tertiary: #ffffff66;
+  --figma-color-icon-menu-tertiary-hover: #ffffff;
+  --figma-color-icon-menu-warning: #f3c11b;
+  --figma-color-icon-onassistive: #ffffff;
+  --figma-color-icon-onassistive-secondary: #ffffffcc;
+  --figma-color-icon-onassistive-tertiary: #ffffff66;
+  --figma-color-icon-onbrand: #ffffff;
+  --figma-color-icon-onbrand-secondary: #ffffffcc;
+  --figma-color-icon-onbrand-tertiary: #ffffff66;
+  --figma-color-icon-oncomponent: #ffffff;
+  --figma-color-icon-oncomponent-secondary: #ffffffcc;
+  --figma-color-icon-oncomponent-tertiary: #ffffff66;
+  --figma-color-icon-ondanger: #ffffff;
+  --figma-color-icon-ondanger-secondary: #ffffffcc;
+  --figma-color-icon-ondanger-tertiary: #ffffff66;
+  --figma-color-icon-ondesign: #ffffff;
+  --figma-color-icon-ondesign-secondary: #ffffffcc;
+  --figma-color-icon-ondesign-tertiary: #ffffff66;
+  --figma-color-icon-ondisabled: #2c2c2c;
+  --figma-color-icon-onfigjam: #ffffff;
+  --figma-color-icon-onfigjam-secondary: #ffffffcc;
+  --figma-color-icon-onfigjam-tertiary: #ffffff66;
+  --figma-color-icon-oninverse: #000000e5;
+  --figma-color-icon-onmeasure: #ffffff;
+  --figma-color-icon-onmeasure-secondary: #ffffffcc;
+  --figma-color-icon-onmeasure-tertiary: #ffffff66;
+  --figma-color-icon-onselected: #ffffff;
+  --figma-color-icon-onselected-secondary: #ffffffb2;
+  --figma-color-icon-onselected-strong: #ffffff;
+  --figma-color-icon-onselected-tertiary: #ffffff66;
+  --figma-color-icon-onsuccess: #ffffff;
+  --figma-color-icon-onsuccess-secondary: #ffffffcc;
+  --figma-color-icon-onsuccess-tertiary: #ffffff66;
+  --figma-color-icon-onwarning: #000000e5;
+  --figma-color-icon-onwarning-secondary: #00000080;
+  --figma-color-icon-onwarning-tertiary: #0000004d;
+  --figma-color-icon-pressed: #0a6dc2;
+  --figma-color-icon-secondary: #ffffffb2;
+  --figma-color-icon-secondary-hover: #ffffff;
+  --figma-color-icon-selected: #7cc4f8;
+  --figma-color-icon-selected-secondary: #7cc4f8;
+  --figma-color-icon-selected-tertiary: #7cc4f8;
+  --figma-color-icon-success: #198f51;
+  --figma-color-icon-success-pressed: #a1e8b9;
+  --figma-color-icon-success-secondary: #198f51;
+  --figma-color-icon-success-tertiary: #198f51;
+  --figma-color-icon-tertiary: #ffffff66;
+  --figma-color-icon-tertiary-hover: #ffffff;
+  --figma-color-icon-toolbar: #ffffff;
+  --figma-color-icon-toolbar-danger: #e03e1a;
+  --figma-color-icon-toolbar-disabled: #ffffff66;
+  --figma-color-icon-toolbar-hover: #ffffff;
+  --figma-color-icon-toolbar-ondisabled: #2c2c2c;
+  --figma-color-icon-toolbar-onselected: #ffffff;
+  --figma-color-icon-toolbar-pressed: #0c8ce9;
+  --figma-color-icon-toolbar-secondary: #ffffffb2;
+  --figma-color-icon-toolbar-secondary-hover: #ffffff;
+  --figma-color-icon-toolbar-selected: #7cc4f8;
+  --figma-color-icon-toolbar-selected-secondary: #7cc4f8;
+  --figma-color-icon-toolbar-selected-tertiary: #7cc4f8;
+  --figma-color-icon-toolbar-tertiary: #ffffff66;
+  --figma-color-icon-toolbar-tertiary-hover: #ffffff;
+  --figma-color-icon-toolbar-warning: #f3c11b;
+  --figma-color-icon-tooltip: #ffffff;
+  --figma-color-icon-tooltip-danger: #e03e1a;
+  --figma-color-icon-tooltip-disabled: #ffffff66;
+  --figma-color-icon-tooltip-hover: #ffffff;
+  --figma-color-icon-tooltip-ondisabled: #1e1e1e;
+  --figma-color-icon-tooltip-onselected: #ffffff;
+  --figma-color-icon-tooltip-pressed: #0c8ce9;
+  --figma-color-icon-tooltip-secondary: #ffffffb2;
+  --figma-color-icon-tooltip-secondary-hover: #ffffff;
+  --figma-color-icon-tooltip-selected: #7cc4f8;
+  --figma-color-icon-tooltip-selected-secondary: #7cc4f8;
+  --figma-color-icon-tooltip-selected-tertiary: #7cc4f8;
+  --figma-color-icon-tooltip-tertiary: #ffffff66;
+  --figma-color-icon-tooltip-tertiary-hover: #ffffff;
+  --figma-color-icon-tooltip-warning: #f3c11b;
+  --figma-color-icon-warning: #f3c11b;
+  --figma-color-icon-warning-pressed: #f7d15f;
+  --figma-color-icon-warning-secondary: #f3c11b;
+  --figma-color-icon-warning-tertiary: #f3c11b;
+  --figma-color-icondesignfilesecondary: #7cc4f8;
+  --figma-color-iconfigjamfilesecondary: #d1a8ff;
+  --figma-color-iconondarkcanvas: #ffffffe5;
+  --figma-color-icononlightcanvas: #000000e5;
+  --figma-color-icononvoting: #000000e5;
+  --figma-color-iconprototypefile: #757575;
+  --figma-color-iconprototypefilesecondary: #ffffff;
+  --figma-color-iconpublishedfile: #757575;
+  --figma-color-iconpublishedfilesecondary: #b3b3b3;
+  --figma-color-loading: #ffffff1a;
+  --figma-color-loadingmenu: #ffffff1a;
+  --figma-color-loadingsecondary: #ffffff0d;
+  --figma-color-loadingsecondarymenu: #ffffff0d;
+  --figma-color-modalbackdrop: #00000080;
+  --figma-color-multiplayerblue: #0a6dc2;
+  --figma-color-multiplayerbluehover: #105cad;
+  --figma-color-multiplayerbluesecondary: #184591;
+  --figma-color-multiplayergreen: #198f51;
+  --figma-color-multiplayergreenhover: #078348;
+  --figma-color-multiplayergreensecondary: #0a4c2d;
+  --figma-color-multiplayergrey: #667799;
+  --figma-color-multiplayergreyhover: #536383;
+  --figma-color-multiplayergreysecondary: #394360;
+  --figma-color-multiplayerpink: #f316b0;
+  --figma-color-multiplayerpinkhover: #d01b9c;
+  --figma-color-multiplayerpinksecondary: #68275e;
+  --figma-color-multiplayerpurple: #8a38f5;
+  --figma-color-multiplayerpurplehover: #7a2ed6;
+  --figma-color-multiplayerpurplesecondary: #50297a;
+  --figma-color-multiplayerred: #e03e1a;
+  --figma-color-multiplayerredhover: #c4381c;
+  --figma-color-multiplayerredsecondary: #7c2622;
+  --figma-color-multiplayeryellow: #f3c11b;
+  --figma-color-multiplayeryellowhover: #f2b50d;
+  --figma-color-multiplayeryellowsecondary: #c58011;
+  --figma-color-nodehandle: #7cc4f8;
+  --figma-color-prototypeloadingbackdrop: #000000e5;
+  --figma-color-scrollbar: #b3b3b380;
+  --figma-color-shadow: #00000099;
+  --figma-color-text: #ffffff;
+  --figma-color-text-assistive: #fc9ce0;
+  --figma-color-text-assistive-pressed: #fbb1ed;
+  --figma-color-text-assistive-secondary: #fc9ce0;
+  --figma-color-text-assistive-tertiary: #fc9ce0;
+  --figma-color-text-brand: #7cc4f8;
+  --figma-color-text-brand-secondary: #7cc4f8;
+  --figma-color-text-brand-tertiary: #7cc4f8;
+  --figma-color-text-component: #d1a8ff;
+  --figma-color-text-component-pressed: #d6b6fb;
+  --figma-color-text-component-secondary: #7f699b;
+  --figma-color-text-component-tertiary: #7f699b;
+  --figma-color-text-danger: #fca397;
+  --figma-color-text-danger-secondary: #fca397;
+  --figma-color-text-danger-tertiary: #fca397;
+  --figma-color-text-design: #7cc4f8;
+  --figma-color-text-design-pressed: #a8d7fa;
+  --figma-color-text-design-secondary: #7cc4f8;
+  --figma-color-text-design-tertiary: #7cc4f8;
+  --figma-color-text-disabled: #ffffff66;
+  --figma-color-text-figjam: #c5b2dc;
+  --figma-color-text-figjam-pressed: #d6b6fb;
+  --figma-color-text-figjam-secondary: #7f699b;
+  --figma-color-text-figjam-tertiary: #7f699b;
+  --figma-color-text-handoff: #79d297;
+  --figma-color-text-handoff-secondary: #79d297;
+  --figma-color-text-handoff-tertiary: #79d297;
+  --figma-color-text-hover: #ffffff;
+  --figma-color-text-measure: #fca397;
+  --figma-color-text-measure-secondary: #fca397;
+  --figma-color-text-measure-tertiary: #fca397;
+  --figma-color-text-menu: #ffffff;
+  --figma-color-text-menu-danger: #fca397;
+  --figma-color-text-menu-disabled: #ffffff66;
+  --figma-color-text-menu-hover: #ffffff;
+  --figma-color-text-menu-ondisabled: #1e1e1e;
+  --figma-color-text-menu-onselected: #ffffff;
+  --figma-color-text-menu-secondary: #ffffffb2;
+  --figma-color-text-menu-secondary-hover: #ffffff;
+  --figma-color-text-menu-selected: #7cc4f8;
+  --figma-color-text-menu-selected-secondary: #7cc4f8;
+  --figma-color-text-menu-selected-tertiary: #7cc4f8;
+  --figma-color-text-menu-tertiary: #ffffff66;
+  --figma-color-text-menu-tertiary-hover: #ffffff;
+  --figma-color-text-menu-warning: #f7d15f;
+  --figma-color-text-onassistive: #ffffff;
+  --figma-color-text-onassistive-secondary: #ffffffcc;
+  --figma-color-text-onassistive-tertiary: #ffffff66;
+  --figma-color-text-onbrand: #ffffff;
+  --figma-color-text-onbrand-secondary: #ffffffcc;
+  --figma-color-text-onbrand-tertiary: #ffffff66;
+  --figma-color-text-oncomponent: #ffffff;
+  --figma-color-text-oncomponent-secondary: #ffffffcc;
+  --figma-color-text-oncomponent-tertiary: #ffffff66;
+  --figma-color-text-ondanger: #ffffff;
+  --figma-color-text-ondanger-secondary: #ffffffcc;
+  --figma-color-text-ondanger-tertiary: #ffffff66;
+  --figma-color-text-ondesign: #ffffff;
+  --figma-color-text-ondesign-secondary: #ffffffcc;
+  --figma-color-text-ondesign-tertiary: #ffffff66;
+  --figma-color-text-ondisabled: #2c2c2c;
+  --figma-color-text-onfigjam: #ffffff;
+  --figma-color-text-onfigjam-secondary: #ffffffcc;
+  --figma-color-text-onfigjam-tertiary: #ffffff66;
+  --figma-color-text-oninverse: #000000e5;
+  --figma-color-text-onmeasure: #ffffff;
+  --figma-color-text-onmeasure-secondary: #ffffffcc;
+  --figma-color-text-onmeasure-tertiary: #ffffff66;
+  --figma-color-text-onselected: #ffffffe5;
+  --figma-color-text-onselected-secondary: #ffffffb2;
+  --figma-color-text-onselected-strong: #ffffff;
+  --figma-color-text-onselected-tertiary: #ffffff66;
+  --figma-color-text-onsuccess: #ffffff;
+  --figma-color-text-onsuccess-secondary: #ffffffcc;
+  --figma-color-text-onsuccess-tertiary: #ffffff66;
+  --figma-color-text-onwarning: #000000e5;
+  --figma-color-text-onwarning-secondary: #00000080;
+  --figma-color-text-onwarning-tertiary: #0000004d;
+  --figma-color-text-secondary: #ffffffb2;
+  --figma-color-text-secondary-hover: #ffffff;
+  --figma-color-text-selected: #7cc4f8;
+  --figma-color-text-selected-secondary: #7cc4f8;
+  --figma-color-text-selected-tertiary: #7cc4f8;
+  --figma-color-text-success: #79d297;
+  --figma-color-text-success-secondary: #79d297;
+  --figma-color-text-success-tertiary: #79d297;
+  --figma-color-text-tertiary: #ffffff66;
+  --figma-color-text-tertiary-hover: #ffffff;
+  --figma-color-text-toolbar: #ffffff;
+  --figma-color-text-toolbar-danger: #fca397;
+  --figma-color-text-toolbar-disabled: #ffffff66;
+  --figma-color-text-toolbar-hover: #ffffff;
+  --figma-color-text-toolbar-ondisabled: #2c2c2c;
+  --figma-color-text-toolbar-onselected: #ffffff;
+  --figma-color-text-toolbar-secondary: #ffffffb2;
+  --figma-color-text-toolbar-secondary-hover: #ffffff;
+  --figma-color-text-toolbar-selected: #7cc4f8;
+  --figma-color-text-toolbar-selected-secondary: #7cc4f8;
+  --figma-color-text-toolbar-selected-tertiary: #7cc4f8;
+  --figma-color-text-toolbar-tertiary: #ffffff66;
+  --figma-color-text-toolbar-tertiary-hover: #ffffff;
+  --figma-color-text-toolbar-warning: #f7d15f;
+  --figma-color-text-tooltip: #ffffff;
+  --figma-color-text-tooltip-danger: #fca397;
+  --figma-color-text-tooltip-disabled: #ffffff66;
+  --figma-color-text-tooltip-hover: #ffffff;
+  --figma-color-text-tooltip-ondisabled: #1e1e1e;
+  --figma-color-text-tooltip-onselected: #ffffff;
+  --figma-color-text-tooltip-secondary: #ffffffb2;
+  --figma-color-text-tooltip-secondary-hover: #ffffff;
+  --figma-color-text-tooltip-selected: #7cc4f8;
+  --figma-color-text-tooltip-selected-secondary: #7cc4f8;
+  --figma-color-text-tooltip-selected-tertiary: #7cc4f8;
+  --figma-color-text-tooltip-tertiary: #ffffff66;
+  --figma-color-text-tooltip-tertiary-hover: #ffffff;
+  --figma-color-text-tooltip-warning: #f7d15f;
+  --figma-color-text-warning: #f7d15f;
+  --figma-color-text-warning-secondary: #f7d15f;
+  --figma-color-text-warning-tertiary: #f7d15f;
+  --figma-color-texthighlight: #0d99ff66;
+  --figma-color-textondarkcanvas: #ffffffe5;
+  --figma-color-textondarkcanvassecondary: #ffffffb2;
+  --figma-color-textonlightcanvas: #000000e5;
+  --figma-color-textonlightcanvassecondary: #0000004d;
+  --figma-color-textonmultiplayerblue: #ffffff;
+  --figma-color-textonmultiplayergreen: #ffffff;
+  --figma-color-textonmultiplayergrey: #ffffff;
+  --figma-color-textonmultiplayerpink: #ffffff;
+  --figma-color-textonmultiplayerpurple: #ffffff;
+  --figma-color-textonmultiplayerred: #ffffff;
+  --figma-color-textonmultiplayeryellow: #000000e5;
+  --figma-color-textonvoting: #000000e5;
+  --figma-elevation-100: 0px 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3), inset 0px 0.5px 0px rgba(255, 255, 255, 0.1), 0px 0px 0.5px rgba(0, 0, 0, 0.5);
+  --figma-elevation-200: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3), 0px 3px 8px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-elevation-300: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3), 0px 5px 12px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-elevation-400: 0px 2px 5px rgba(0, 0, 0, 0.35), inset 0px 0px 0.5px rgba(255, 255, 255, 0.35), 0px 10px 16px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-elevation-500: 0px 3px 5px rgba(0, 0, 0, 0.35), inset 0px 0px 0.5px rgba(255, 255, 255, 0.35), 0px 10px 24px rgba(0, 0, 0, 0.45), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-shadow-tooltip: var(--figma-elevation-300);
+  --figma-shadow-menu: var(--figma-elevation-400);
+  --figma-shadow-modal: var(--figma-elevation-500);
+}
diff --git a/packages/theme/src/css/figma.css b/packages/theme/src/css/figma.css
new file mode 100644
index 0000000..8bde1a2
--- /dev/null
+++ b/packages/theme/src/css/figma.css
@@ -0,0 +1,3 @@
+@import './preflight.css' layer(base);
+@import './figma-theme.css';
+@import './utilities.css';
diff --git a/packages/theme/src/css/index.css b/packages/theme/src/css/index.css
new file mode 100644
index 0000000..e927d68
--- /dev/null
+++ b/packages/theme/src/css/index.css
@@ -0,0 +1,7 @@
+@import './preflight.css' layer(base);
+@import './figma-theme.css';
+@import './figjam-theme.css';
+@import './devmode-theme.css';
+@import './slides-theme.css';
+@import './utilities.css';
+@custom-variant dark (&:where(.figma-dark, .figma-dark *));
diff --git a/packages/theme/src/constants.ts b/packages/theme/src/css/preflight.css
similarity index 73%
rename from packages/theme/src/constants.ts
rename to packages/theme/src/css/preflight.css
index aa1a666..e1c1fcb 100644
--- a/packages/theme/src/constants.ts
+++ b/packages/theme/src/css/preflight.css
@@ -1,7 +1,4 @@
-/**
- * base css for figma
- */
-export const THEME_BASE_CSS = `
+
 * {
   margin: 0;
   padding: 0;
@@ -21,16 +18,21 @@ body {
   width: 100vw;
   margin: 0;
   padding: 0;
-  color: var(--color-text);
-  background-color: var(--color-bg);
+  color: var(--figma-color-text);
+  background-color: var(--figma-color-bg);
   font-family: "Inter", "Helvetica", sans-serif;
-  font-size: 11px;
   line-height: 16px;
   font-weight: 400;
 }
 
+/* Keep rem-based theme tokens anchored to the default 16px root size;
+   the 11px Figma UI font-size applies to body content only. */
+body {
+  font-size: 11px;
+}
+
 ::selection {
-  background-color: var(--color-bg-onselected);
+  background-color: var(--figma-color-bg-onselected);
 }
 
 div,
@@ -75,4 +77,4 @@ textarea {
 svg {
   display: block;
 }
-` as const;
+
diff --git a/packages/theme/src/css/slides-theme.css b/packages/theme/src/css/slides-theme.css
new file mode 100644
index 0000000..8b88a72
--- /dev/null
+++ b/packages/theme/src/css/slides-theme.css
@@ -0,0 +1,1172 @@
+@theme {
+  --figma-font-family-default: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "SFProLocalRange";
+  --figma-font-family-code: "Roboto Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
+  --figma-font-family-display: "Whyte", ui-sans-serif, system-ui, sans-serif;
+  --figma-font-weight-default: 450;
+  --figma-font-weight-medium: 450;
+  --figma-font-weight-strong: 550;
+  --figma-font-weight-heavy: 550;
+  --figma-font-size-body-large: .8125rem;
+  --figma-line-height-body-large: 1.375rem;
+  --figma-letter-spacing-body-large: -.00203rem;
+  --figma-font-size-body-large-strong: .8125rem;
+  --figma-line-height-body-large-strong: 1.375rem;
+  --figma-letter-spacing-body-large-strong: -.00203rem;
+  --figma-font-size-body-medium: .6875rem;
+  --figma-line-height-body-medium: 1rem;
+  --figma-letter-spacing-body-medium: .00344rem;
+  --figma-font-size-body-medium-strong: .6875rem;
+  --figma-line-height-body-medium-strong: 1rem;
+  --figma-letter-spacing-body-medium-strong: .00344rem;
+  --figma-font-size-body-small: .5625rem;
+  --figma-line-height-body-small: .875rem;
+  --figma-letter-spacing-body-small: .00281rem;
+  --figma-font-size-body-small-strong: .5625rem;
+  --figma-line-height-body-small-strong: .875rem;
+  --figma-letter-spacing-body-small-strong: .00281rem;
+  --figma-font-size-heading-display: 3rem;
+  --figma-line-height-heading-display: 3.5rem;
+  --figma-letter-spacing-heading-display: -.09rem;
+  --figma-font-size-heading-large: 1.5rem;
+  --figma-line-height-heading-large: 2rem;
+  --figma-letter-spacing-heading-large: -.0255rem;
+  --figma-font-size-heading-medium: .9375rem;
+  --figma-line-height-heading-medium: 1.5625rem;
+  --figma-letter-spacing-heading-medium: -.00469rem;
+  --figma-font-size-heading-small: .8125rem;
+  --figma-line-height-heading-small: 1.375rem;
+  --figma-letter-spacing-heading-small: -.00203rem;
+  --figma-radius-sm: .125rem;
+  --figma-radius-md: .3125rem;
+  --figma-radius-lg: .8125rem;
+  --figma-radius-none: 0;
+  --figma-radius-full: 9999px;
+  --figma-space-0: 0;
+  --figma-space-0\.5: .125rem;
+  --figma-space-1: .25rem;
+  --figma-space-1\.5: .375rem;
+  --figma-space-2: .5rem;
+  --figma-space-2\.5: .75rem;
+  --figma-space-3: 1rem;
+  --figma-space-4: 1.5rem;
+  --figma-space-5: 2rem;
+  --figma-space-6: 2.5rem;
+  --figma-border-width-1: 1px;
+  --figma-border-width-4: .25rem;
+  --figma-duration-100: 100ms;
+  --figma-duration-200: 200ms;
+  --figma-duration-300: 300ms;
+  --figma-opacity-50: 0.5;
+  --figma-opacity-disabled: 0.3;
+  --figma-z-index-1: 1;
+  --figma-z-index-2: 2;
+  --figma-z-index-dropdown: 10;
+  --figma-z-index-modal: 50;
+  --figma-z-index-tooltip: 100;
+  --figma-shadow-slider: 0 1px 3px 0 #0000001a, 0 3px 8px 0 #0000001a, 0 0 0.5px 0 #0000002e, inset 0 0 0 0.5px #0000001a;
+  --figma-shadow-hud: 0px 5px 17px rgba(0, 0, 0, 0.2), 0px 2px 7px rgba(0, 0, 0, 0.15);
+  --font-figma: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "SFProLocalRange";
+  --font-figma-code: "Roboto Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
+  --font-weight-figma-default: 450;
+  --font-weight-figma-heavy: 550;
+  --font-weight-figma-medium: 450;
+  --font-weight-figma-strong: 550;
+  --text-figma-body-large: .8125rem;
+  --text-figma-body-large-strong: .8125rem;
+  --text-figma-body-medium: .6875rem;
+  --text-figma-body-medium-strong: .6875rem;
+  --text-figma-body-small: .5625rem;
+  --text-figma-body-small-strong: .5625rem;
+  --text-figma-heading-display: 3rem;
+  --text-figma-heading-large: 1.5rem;
+  --text-figma-heading-medium: .9375rem;
+  --text-figma-heading-small: .8125rem;
+  --leading-figma-body-large: 1.375rem;
+  --leading-figma-body-large-strong: 1.375rem;
+  --leading-figma-body-medium: 1rem;
+  --leading-figma-body-medium-strong: 1rem;
+  --leading-figma-body-small: .875rem;
+  --leading-figma-body-small-strong: .875rem;
+  --leading-figma-heading-display: 3.5rem;
+  --leading-figma-heading-large: 2rem;
+  --leading-figma-heading-medium: 1.5625rem;
+  --leading-figma-heading-small: 1.375rem;
+  --text-figma-body-large--line-height: 1.375rem;
+  --text-figma-body-large-strong--line-height: 1.375rem;
+  --text-figma-body-medium--line-height: 1rem;
+  --text-figma-body-medium-strong--line-height: 1rem;
+  --text-figma-body-small--line-height: .875rem;
+  --text-figma-body-small-strong--line-height: .875rem;
+  --text-figma-heading-display--line-height: 3.5rem;
+  --text-figma-heading-large--line-height: 2rem;
+  --text-figma-heading-medium--line-height: 1.5625rem;
+  --text-figma-heading-small--line-height: 1.375rem;
+  --tracking-figma-body-large: -.00203rem;
+  --tracking-figma-body-large-strong: -.00203rem;
+  --tracking-figma-body-medium: .00344rem;
+  --tracking-figma-body-medium-strong: .00344rem;
+  --tracking-figma-body-small: .00281rem;
+  --tracking-figma-body-small-strong: .00281rem;
+  --tracking-figma-heading-display: -.09rem;
+  --tracking-figma-heading-large: -.0255rem;
+  --tracking-figma-heading-medium: -.00469rem;
+  --tracking-figma-heading-small: -.00203rem;
+  --text-figma-body-large--letter-spacing: -.00203rem;
+  --text-figma-body-large-strong--letter-spacing: -.00203rem;
+  --text-figma-body-medium--letter-spacing: .00344rem;
+  --text-figma-body-medium-strong--letter-spacing: .00344rem;
+  --text-figma-body-small--letter-spacing: .00281rem;
+  --text-figma-body-small-strong--letter-spacing: .00281rem;
+  --text-figma-heading-display--letter-spacing: -.09rem;
+  --text-figma-heading-large--letter-spacing: -.0255rem;
+  --text-figma-heading-medium--letter-spacing: -.00469rem;
+  --text-figma-heading-small--letter-spacing: -.00203rem;
+  --text-figma-body-large-strong--font-weight: 550;
+  --text-figma-body-medium-strong--font-weight: 550;
+  --text-figma-body-small-strong--font-weight: 550;
+  --text-figma-heading-large--font-weight: 550;
+  --text-figma-heading-medium--font-weight: 550;
+  --text-figma-heading-small--font-weight: 550;
+  --radius-figma-full: 9999px;
+  --radius-figma-lg: .8125rem;
+  --radius-figma-md: .3125rem;
+  --radius-figma-none: 0;
+  --radius-figma-sm: .125rem;
+  --spacing-figma-0: 0;
+  --spacing-figma-0\.5: .125rem;
+  --spacing-figma-1: .25rem;
+  --spacing-figma-1\.5: .375rem;
+  --spacing-figma-2: .5rem;
+  --spacing-figma-2\.5: .75rem;
+  --spacing-figma-3: 1rem;
+  --spacing-figma-4: 1.5rem;
+  --spacing-figma-5: 2rem;
+  --spacing-figma-6: 2.5rem;
+  --border-figma-1: 1px;
+  --border-figma-4: .25rem;
+  --transition-duration-figma-100: 100ms;
+  --transition-duration-figma-200: 200ms;
+  --transition-duration-figma-300: 300ms;
+  --opacity-figma-50: 0.5;
+  --opacity-figma-disabled: 0.3;
+  --z-index-figma-1: 1;
+  --z-index-figma-2: 2;
+  --z-index-figma-dropdown: 10;
+  --z-index-figma-modal: 50;
+  --z-index-figma-tooltip: 100;
+}
+
+@theme inline {
+  --shadow-figma-elevation-100: var(--figma-elevation-100);
+  --shadow-figma-elevation-200: var(--figma-elevation-200);
+  --shadow-figma-elevation-300: var(--figma-elevation-300);
+  --shadow-figma-elevation-400: var(--figma-elevation-400);
+  --shadow-figma-elevation-500: var(--figma-elevation-500);
+  --shadow-figma-tooltip: var(--figma-elevation-300);
+  --shadow-figma-menu: var(--figma-elevation-400);
+  --shadow-figma-modal: var(--figma-elevation-500);
+  --shadow-figma-slider: 0 1px 3px 0 #0000001a, 0 3px 8px 0 #0000001a, 0 0 0.5px 0 #0000002e, inset 0 0 0 0.5px #0000001a;
+  --shadow-figma-hud: 0px 5px 17px rgba(0, 0, 0, 0.2), 0px 2px 7px rgba(0, 0, 0, 0.15);
+}
+
+.slides, .figma-light .slides, .slides .figma-light, .slides.figma-light {
+  --figma-color-bg: #ffffff;
+  --figma-color-bg-assistive: #ff24bd;
+  --figma-color-bg-assistive-hover: #ea10ac;
+  --figma-color-bg-assistive-pressed: #ea10ac;
+  --figma-color-bg-assistive-secondary: #cb0b96;
+  --figma-color-bg-assistive-tertiary: #ffe0fc;
+  --figma-color-bg-brand: #ff5c16;
+  --figma-color-bg-brand-hover: #e24c0c;
+  --figma-color-bg-brand-pressed: #e24c0c;
+  --figma-color-bg-brand-secondary: #c53e0d;
+  --figma-color-bg-brand-tertiary: #ffdfcc;
+  --figma-color-bg-component: #9747ff;
+  --figma-color-bg-component-hover: #8638e5;
+  --figma-color-bg-component-pressed: #8638e5;
+  --figma-color-bg-component-secondary: #7c2bda;
+  --figma-color-bg-component-tertiary: #f1e5ff;
+  --figma-color-bg-danger: #f24822;
+  --figma-color-bg-danger-hover: #dc3412;
+  --figma-color-bg-danger-pressed: #dc3412;
+  --figma-color-bg-danger-secondary: #bd2915;
+  --figma-color-bg-danger-tertiary: #ffe2e0;
+  --figma-color-bg-design: #0d99ff;
+  --figma-color-bg-design-hover: #007be5;
+  --figma-color-bg-design-pressed: #007be5;
+  --figma-color-bg-design-secondary: #0768cf;
+  --figma-color-bg-design-tertiary: #e5f4ff;
+  --figma-color-bg-disabled: #d9d9d9;
+  --figma-color-bg-disabled-secondary: #b3b3b3;
+  --figma-color-bg-figjam: #9747ff;
+  --figma-color-bg-figjam-hover: #8638e5;
+  --figma-color-bg-figjam-pressed: #8638e5;
+  --figma-color-bg-figjam-secondary: #7c2bda;
+  --figma-color-bg-figjam-tertiary: #f1e5ff;
+  --figma-color-bg-handoff: #14ae5c;
+  --figma-color-bg-handoff-hover: #009951;
+  --figma-color-bg-handoff-pressed: #009951;
+  --figma-color-bg-handoff-secondary: #008043;
+  --figma-color-bg-handoff-tertiary: #daecdf;
+  --figma-color-bg-hover: #f5f5f5;
+  --figma-color-bg-info: #ffdfcc;
+  --figma-color-bg-inverse: #2c2c2c;
+  --figma-color-bg-measure: #f24822;
+  --figma-color-bg-measure-hover: #dc3412;
+  --figma-color-bg-measure-pressed: #dc3412;
+  --figma-color-bg-measure-secondary: #bd2915;
+  --figma-color-bg-measure-tertiary: #ffe2e0;
+  --figma-color-bg-menu: #1e1e1e;
+  --figma-color-bg-menu-disabled: #757575;
+  --figma-color-bg-menu-hover: #2c2c2c;
+  --figma-color-bg-menu-pressed: #2c2c2c;
+  --figma-color-bg-menu-secondary: #383838;
+  --figma-color-bg-menu-selected: #ff5c16;
+  --figma-color-bg-menu-selected-hover: #e24c0c;
+  --figma-color-bg-menu-selected-pressed: #e24c0c;
+  --figma-color-bg-menu-selected-secondary: #603a2a;
+  --figma-color-bg-menu-selected-tertiary: #603a2a;
+  --figma-color-bg-menu-tertiary: #444444;
+  --figma-color-bg-onselected: #ffbb9e;
+  --figma-color-bg-onselected-hover: #ffbb9e;
+  --figma-color-bg-onselected-pressed: #ffbb9e;
+  --figma-color-bg-pressed: #f5f5f5;
+  --figma-color-bg-secondary: #f5f5f5;
+  --figma-color-bg-selected: #ffdfcc;
+  --figma-color-bg-selected-hover: #ffbb9e;
+  --figma-color-bg-selected-pressed: #ffbb9e;
+  --figma-color-bg-selected-secondary: #fff2eb;
+  --figma-color-bg-selected-strong: #ff5c16;
+  --figma-color-bg-selected-tertiary: #fff2eb;
+  --figma-color-bg-success: #14ae5c;
+  --figma-color-bg-success-hover: #009951;
+  --figma-color-bg-success-pressed: #009951;
+  --figma-color-bg-success-secondary: #008043;
+  --figma-color-bg-success-tertiary: #cff7d3;
+  --figma-color-bg-tertiary: #e6e6e6;
+  --figma-color-bg-toolbar: #2c2c2c;
+  --figma-color-bg-toolbar-disabled: #757575;
+  --figma-color-bg-toolbar-hover: #f5f5f5;
+  --figma-color-bg-toolbar-pressed: #111111;
+  --figma-color-bg-toolbar-secondary: #383838;
+  --figma-color-bg-toolbar-selected: #ff5c16;
+  --figma-color-bg-toolbar-selected-hover: #e24c0c;
+  --figma-color-bg-toolbar-selected-pressed: #e24c0c;
+  --figma-color-bg-toolbar-selected-secondary: #c53e0d;
+  --figma-color-bg-toolbar-selected-tertiary: #ff5c16;
+  --figma-color-bg-toolbar-tertiary: #444444;
+  --figma-color-bg-tooltip: #1e1e1e;
+  --figma-color-bg-tooltip-disabled: #757575;
+  --figma-color-bg-tooltip-hover: #2c2c2c;
+  --figma-color-bg-tooltip-pressed: #2c2c2c;
+  --figma-color-bg-tooltip-secondary: #383838;
+  --figma-color-bg-tooltip-selected: #ff5c16;
+  --figma-color-bg-tooltip-selected-hover: #e24c0c;
+  --figma-color-bg-tooltip-selected-pressed: #e24c0c;
+  --figma-color-bg-tooltip-selected-secondary: #603a2a;
+  --figma-color-bg-tooltip-selected-tertiary: #603a2a;
+  --figma-color-bg-tooltip-tertiary: #444444;
+  --figma-color-bg-warning: #ffcd29;
+  --figma-color-bg-warning-hover: #ffc21a;
+  --figma-color-bg-warning-pressed: #ffc21a;
+  --figma-color-bg-warning-secondary: #fab815;
+  --figma-color-bg-warning-tertiary: #fff1c2;
+  --figma-color-bghoverondarkcanvas: #ffffff33;
+  --figma-color-bghoveronlightcanvas: #00000033;
+  --figma-color-bghovertransparent: #0000000d;
+  --figma-color-bgsecondaryoncanvas: #e6e6e6;
+  --figma-color-bgselectedarea: #ff5c1633;
+  --figma-color-bgtransparent: #ffffff99;
+  --figma-color-bgtransparent-secondary-hover: #0000001a;
+  --figma-color-bgtransparent-secondary-pressed: #00000026;
+  --figma-color-bgtransparentsecondary: #ffffff;
+  --figma-color-bgvoting: #ffcd29;
+  --figma-color-bgvotingsecondary: #fff1c2;
+  --figma-color-bgvotingtertiary: #fffbeb;
+  --figma-color-bgvotingwheeldial: #fffbeb;
+  --figma-color-bgvotingwheelhover: #fff1c2;
+  --figma-color-border: #e6e6e6;
+  --figma-color-border-assistive: #ffbdf2;
+  --figma-color-border-assistive-strong: #ea10ac;
+  --figma-color-border-brand: #ffbb9e;
+  --figma-color-border-brand-strong: #e24c0c;
+  --figma-color-border-component: #e4ccff;
+  --figma-color-border-component-hover: #9747ff;
+  --figma-color-border-component-strong: #8638e5;
+  --figma-color-border-danger: #ffc7c2;
+  --figma-color-border-danger-strong: #dc3412;
+  --figma-color-border-design: #bde3ff;
+  --figma-color-border-design-strong: #007be5;
+  --figma-color-border-disabled: #e6e6e6;
+  --figma-color-border-disabled-strong: #0000004d;
+  --figma-color-border-figjam: #e4ccff;
+  --figma-color-border-figjam-strong: #8638e5;
+  --figma-color-border-handoff: #aff4c6;
+  --figma-color-border-handoff-strong: #009951;
+  --figma-color-border-measure: #ffc7c2;
+  --figma-color-border-measure-strong: #dc3412;
+  --figma-color-border-menu: #383838;
+  --figma-color-border-menu-disabled: #383838;
+  --figma-color-border-menu-disabled-strong: #383838;
+  --figma-color-border-menu-onselected: #ffa27a;
+  --figma-color-border-menu-onselected-strong: #ffffff;
+  --figma-color-border-menu-selected: #ff5c16;
+  --figma-color-border-menu-selected-strong: #ffa27a;
+  --figma-color-border-menu-strong: #ffffff;
+  --figma-color-border-onassistive: #ea10ac;
+  --figma-color-border-onassistive-strong: #ffffff;
+  --figma-color-border-onbrand: #e24c0c;
+  --figma-color-border-onbrand-strong: #ffffff;
+  --figma-color-border-oncomponent: #8638e5;
+  --figma-color-border-oncomponent-strong: #ffffff;
+  --figma-color-border-ondanger: #dc3412;
+  --figma-color-border-ondanger-strong: #ffffff;
+  --figma-color-border-ondesign: #007be5;
+  --figma-color-border-ondesign-strong: #ffffff;
+  --figma-color-border-onfigjam: #8638e5;
+  --figma-color-border-onfigjam-strong: #8638e5;
+  --figma-color-border-onmeasure: #dc3412;
+  --figma-color-border-onmeasure-strong: #ffffff;
+  --figma-color-border-onselected: #ffbb9e;
+  --figma-color-border-onselected-strong: #000000e5;
+  --figma-color-border-onsuccess: #009951;
+  --figma-color-border-onsuccess-strong: #ffffff;
+  --figma-color-border-onwarning: #fab815;
+  --figma-color-border-onwarning-strong: #000000e5;
+  --figma-color-border-selected: #ff5c16;
+  --figma-color-border-selected-strong: #e24c0c;
+  --figma-color-border-strong: #2c2c2c;
+  --figma-color-border-success: #aff4c6;
+  --figma-color-border-success-strong: #009951;
+  --figma-color-border-toolbar: #444444;
+  --figma-color-border-toolbar-disabled: #ffffff66;
+  --figma-color-border-toolbar-onselected: #ffffff;
+  --figma-color-border-toolbar-selected: #ff5c16;
+  --figma-color-border-toolbar-selected-strong: #ffa27a;
+  --figma-color-border-toolbar-strong: #ffffff;
+  --figma-color-border-tooltip: #383838;
+  --figma-color-border-tooltip-disabled: #383838;
+  --figma-color-border-tooltip-disabled-strong: #383838;
+  --figma-color-border-tooltip-onselected: #e24c0c;
+  --figma-color-border-tooltip-onselected-strong: #ffffff;
+  --figma-color-border-tooltip-selected: #ff5c16;
+  --figma-color-border-tooltip-selected-strong: #ffa27a;
+  --figma-color-border-tooltip-strong: #ffffff;
+  --figma-color-border-warning: #ffe8a3;
+  --figma-color-border-warning-strong: #b86200;
+  --figma-color-bordertranslucent: #0000001a;
+  --figma-color-conditionalborder: #ffffff00;
+  --figma-color-icon: #000000e5;
+  --figma-color-icon-assistive: #ea10ac;
+  --figma-color-icon-assistive-pressed: #cb0b96;
+  --figma-color-icon-assistive-secondary: #ea10ac;
+  --figma-color-icon-assistive-tertiary: #ea10ac;
+  --figma-color-icon-brand: #e24c0c;
+  --figma-color-icon-brand-pressed: #c53e0d;
+  --figma-color-icon-brand-secondary: #ffa27a;
+  --figma-color-icon-brand-tertiary: #ffbb9e;
+  --figma-color-icon-component: #8638e5;
+  --figma-color-icon-component-pressed: #7c2bda;
+  --figma-color-icon-component-secondary: #c5b2dc;
+  --figma-color-icon-component-tertiary: #c5b2dc;
+  --figma-color-icon-danger: #f24822;
+  --figma-color-icon-danger-hover: #bd2915;
+  --figma-color-icon-danger-pressed: #bd2915;
+  --figma-color-icon-danger-secondary: #f24822;
+  --figma-color-icon-danger-secondary-hover: #f24822;
+  --figma-color-icon-danger-tertiary: #f24822;
+  --figma-color-icon-design: #007be5;
+  --figma-color-icon-design-pressed: #0768cf;
+  --figma-color-icon-design-secondary: #007be5;
+  --figma-color-icon-design-tertiary: #007be5;
+  --figma-color-icon-disabled: #0000004d;
+  --figma-color-icon-figjam: #8638e5;
+  --figma-color-icon-figjam-pressed: #7c2bda;
+  --figma-color-icon-figjam-secondary: #c5b2dc;
+  --figma-color-icon-figjam-tertiary: #c5b2dc;
+  --figma-color-icon-handoff: #009951;
+  --figma-color-icon-handoff-pressed: #008043;
+  --figma-color-icon-handoff-secondary: #009951;
+  --figma-color-icon-handoff-tertiary: #009951;
+  --figma-color-icon-hover: #000000e5;
+  --figma-color-icon-measure: #f24822;
+  --figma-color-icon-measure-hover: #bd2915;
+  --figma-color-icon-measure-pressed: #bd2915;
+  --figma-color-icon-measure-secondary: #f24822;
+  --figma-color-icon-measure-secondary-hover: #f24822;
+  --figma-color-icon-measure-tertiary: #f24822;
+  --figma-color-icon-menu: #ffffff;
+  --figma-color-icon-menu-danger: #f24822;
+  --figma-color-icon-menu-disabled: #ffffff66;
+  --figma-color-icon-menu-hover: #ffffff;
+  --figma-color-icon-menu-ondisabled: #1e1e1e;
+  --figma-color-icon-menu-onselected: #ffffff;
+  --figma-color-icon-menu-pressed: #ff5c16;
+  --figma-color-icon-menu-secondary: #ffffffb2;
+  --figma-color-icon-menu-secondary-hover: #ffffff;
+  --figma-color-icon-menu-selected: #ffa27a;
+  --figma-color-icon-menu-selected-secondary: #ffa27a;
+  --figma-color-icon-menu-selected-tertiary: #ffa27a;
+  --figma-color-icon-menu-tertiary: #ffffff66;
+  --figma-color-icon-menu-tertiary-hover: #ffffff;
+  --figma-color-icon-menu-warning: #ffcd29;
+  --figma-color-icon-onassistive: #ffffff;
+  --figma-color-icon-onassistive-secondary: #ffffffcc;
+  --figma-color-icon-onassistive-tertiary: #ffffff66;
+  --figma-color-icon-onbrand: #ffffff;
+  --figma-color-icon-onbrand-secondary: #ffffffcc;
+  --figma-color-icon-onbrand-tertiary: #ffffff66;
+  --figma-color-icon-oncomponent: #ffffff;
+  --figma-color-icon-oncomponent-secondary: #ffffffcc;
+  --figma-color-icon-oncomponent-tertiary: #ffffff66;
+  --figma-color-icon-ondanger: #ffffff;
+  --figma-color-icon-ondanger-secondary: #ffffffcc;
+  --figma-color-icon-ondanger-tertiary: #ffffff66;
+  --figma-color-icon-ondesign: #ffffff;
+  --figma-color-icon-ondesign-secondary: #ffffffcc;
+  --figma-color-icon-ondesign-tertiary: #ffffff66;
+  --figma-color-icon-ondisabled: #ffffff;
+  --figma-color-icon-onfigjam: #ffffff;
+  --figma-color-icon-onfigjam-secondary: #ffffffcc;
+  --figma-color-icon-onfigjam-tertiary: #ffffff66;
+  --figma-color-icon-oninverse: #ffffffe5;
+  --figma-color-icon-onmeasure: #ffffff;
+  --figma-color-icon-onmeasure-secondary: #ffffffcc;
+  --figma-color-icon-onmeasure-tertiary: #ffffff66;
+  --figma-color-icon-onselected: #000000e5;
+  --figma-color-icon-onselected-secondary: #00000080;
+  --figma-color-icon-onselected-strong: #ffffff;
+  --figma-color-icon-onselected-tertiary: #0000004d;
+  --figma-color-icon-onsuccess: #ffffff;
+  --figma-color-icon-onsuccess-secondary: #ffffffcc;
+  --figma-color-icon-onsuccess-tertiary: #ffffff66;
+  --figma-color-icon-onwarning: #000000e5;
+  --figma-color-icon-onwarning-secondary: #00000080;
+  --figma-color-icon-onwarning-tertiary: #0000004d;
+  --figma-color-icon-pressed: #e24c0c;
+  --figma-color-icon-secondary: #00000080;
+  --figma-color-icon-secondary-hover: #000000e5;
+  --figma-color-icon-selected: #e24c0c;
+  --figma-color-icon-selected-secondary: #e24c0c;
+  --figma-color-icon-selected-tertiary: #e24c0c;
+  --figma-color-icon-success: #14ae5c;
+  --figma-color-icon-success-pressed: #008043;
+  --figma-color-icon-success-secondary: #14ae5c;
+  --figma-color-icon-success-tertiary: #14ae5c;
+  --figma-color-icon-tertiary: #0000004d;
+  --figma-color-icon-tertiary-hover: #000000e5;
+  --figma-color-icon-toolbar: #ffffff;
+  --figma-color-icon-toolbar-danger: #f24822;
+  --figma-color-icon-toolbar-disabled: #ffffff66;
+  --figma-color-icon-toolbar-hover: #000000e5;
+  --figma-color-icon-toolbar-ondisabled: #2c2c2c;
+  --figma-color-icon-toolbar-onselected: #ffffff;
+  --figma-color-icon-toolbar-pressed: #ff5c16;
+  --figma-color-icon-toolbar-secondary: #ffffffb2;
+  --figma-color-icon-toolbar-secondary-hover: #ffffff;
+  --figma-color-icon-toolbar-selected: #ffa27a;
+  --figma-color-icon-toolbar-selected-secondary: #ffa27a;
+  --figma-color-icon-toolbar-selected-tertiary: #ffa27a;
+  --figma-color-icon-toolbar-tertiary: #ffffff66;
+  --figma-color-icon-toolbar-tertiary-hover: #ffffff;
+  --figma-color-icon-toolbar-warning: #ffcd29;
+  --figma-color-icon-tooltip: #ffffff;
+  --figma-color-icon-tooltip-danger: #f24822;
+  --figma-color-icon-tooltip-disabled: #ffffff66;
+  --figma-color-icon-tooltip-hover: #ffffff;
+  --figma-color-icon-tooltip-ondisabled: #1e1e1e;
+  --figma-color-icon-tooltip-onselected: #ffffff;
+  --figma-color-icon-tooltip-pressed: #ff5c16;
+  --figma-color-icon-tooltip-secondary: #ffffffb2;
+  --figma-color-icon-tooltip-secondary-hover: #ffffff;
+  --figma-color-icon-tooltip-selected: #ffa27a;
+  --figma-color-icon-tooltip-selected-secondary: #ffa27a;
+  --figma-color-icon-tooltip-selected-tertiary: #ffa27a;
+  --figma-color-icon-tooltip-tertiary: #ffffff66;
+  --figma-color-icon-tooltip-tertiary-hover: #ffffff;
+  --figma-color-icon-tooltip-warning: #ffcd29;
+  --figma-color-icon-warning: #ffcd29;
+  --figma-color-icon-warning-pressed: #b86200;
+  --figma-color-icon-warning-secondary: #ffcd29;
+  --figma-color-icon-warning-tertiary: #ffcd29;
+  --figma-color-icondesignfilesecondary: #80caff;
+  --figma-color-iconfigjamfilesecondary: #d9b8ff;
+  --figma-color-iconondarkcanvas: #ffffffe5;
+  --figma-color-icononlightcanvas: #000000e5;
+  --figma-color-icononvoting: #000000e5;
+  --figma-color-iconprototypefile: #d9d9d9;
+  --figma-color-iconprototypefilesecondary: #2c2c2c;
+  --figma-color-iconpublishedfile: #2c2c2c;
+  --figma-color-iconpublishedfilesecondary: #757575;
+  --figma-color-loading: #0000001a;
+  --figma-color-loadingmenu: #ffffff1a;
+  --figma-color-loadingsecondary: #0000000d;
+  --figma-color-loadingsecondarymenu: #ffffff0d;
+  --figma-color-modalbackdrop: #00000080;
+  --figma-color-multiplayerblue: #007be5;
+  --figma-color-multiplayerbluehover: #0768cf;
+  --figma-color-multiplayerbluesecondary: #034ac1;
+  --figma-color-multiplayergreen: #14ae5c;
+  --figma-color-multiplayergreenhover: #009951;
+  --figma-color-multiplayergreensecondary: #036838;
+  --figma-color-multiplayergrey: #667799;
+  --figma-color-multiplayergreyhover: #536383;
+  --figma-color-multiplayergreysecondary: #394360;
+  --figma-color-multiplayerpink: #ff24bd;
+  --figma-color-multiplayerpinkhover: #ea10ac;
+  --figma-color-multiplayerpinksecondary: #971172;
+  --figma-color-multiplayerpurple: #9747ff;
+  --figma-color-multiplayerpurplehover: #8638e5;
+  --figma-color-multiplayerpurplesecondary: #681abb;
+  --figma-color-multiplayerred: #f24822;
+  --figma-color-multiplayerredhover: #dc3412;
+  --figma-color-multiplayerredsecondary: #9f1f18;
+  --figma-color-multiplayeryellow: #ffcd29;
+  --figma-color-multiplayeryellowhover: #ffc21a;
+  --figma-color-multiplayeryellowsecondary: #eba611;
+  --figma-color-nodehandle: #80caff;
+  --figma-color-prototypeloadingbackdrop: #000000e5;
+  --figma-color-scrollbar: #b3b3b380;
+  --figma-color-shadow: #00000026;
+  --figma-color-text: #000000e5;
+  --figma-color-text-assistive: #ea10ac;
+  --figma-color-text-assistive-pressed: #cb0b96;
+  --figma-color-text-assistive-secondary: #ea10ac;
+  --figma-color-text-assistive-tertiary: #ea10ac;
+  --figma-color-text-brand: #e24c0c;
+  --figma-color-text-brand-secondary: #e24c0c;
+  --figma-color-text-brand-tertiary: #e24c0c;
+  --figma-color-text-component: #8638e5;
+  --figma-color-text-component-pressed: #7c2bda;
+  --figma-color-text-component-secondary: #c5b2dc;
+  --figma-color-text-component-tertiary: #c5b2dc;
+  --figma-color-text-danger: #dc3412;
+  --figma-color-text-danger-secondary: #dc3412;
+  --figma-color-text-danger-tertiary: #dc3412;
+  --figma-color-text-design: #007be5;
+  --figma-color-text-design-pressed: #0768cf;
+  --figma-color-text-design-secondary: #007be5;
+  --figma-color-text-design-tertiary: #007be5;
+  --figma-color-text-disabled: #0000004d;
+  --figma-color-text-figjam: #8638e5;
+  --figma-color-text-figjam-pressed: #7c2bda;
+  --figma-color-text-figjam-secondary: #c5b2dc;
+  --figma-color-text-figjam-tertiary: #c5b2dc;
+  --figma-color-text-handoff: #009951;
+  --figma-color-text-handoff-secondary: #009951;
+  --figma-color-text-handoff-tertiary: #009951;
+  --figma-color-text-hover: #000000e5;
+  --figma-color-text-measure: #dc3412;
+  --figma-color-text-measure-secondary: #dc3412;
+  --figma-color-text-measure-tertiary: #dc3412;
+  --figma-color-text-menu: #ffffff;
+  --figma-color-text-menu-danger: #f24822;
+  --figma-color-text-menu-disabled: #ffffff66;
+  --figma-color-text-menu-hover: #ffffff;
+  --figma-color-text-menu-ondisabled: #1e1e1e;
+  --figma-color-text-menu-onselected: #ffffff;
+  --figma-color-text-menu-secondary: #ffffffb2;
+  --figma-color-text-menu-secondary-hover: #ffffff;
+  --figma-color-text-menu-selected: #ffa27a;
+  --figma-color-text-menu-selected-secondary: #ffa27a;
+  --figma-color-text-menu-selected-tertiary: #ffa27a;
+  --figma-color-text-menu-tertiary: #ffffff66;
+  --figma-color-text-menu-tertiary-hover: #ffffff;
+  --figma-color-text-menu-warning: #ffd966;
+  --figma-color-text-onassistive: #ffffff;
+  --figma-color-text-onassistive-secondary: #ffffffcc;
+  --figma-color-text-onassistive-tertiary: #ffffff66;
+  --figma-color-text-onbrand: #ffffff;
+  --figma-color-text-onbrand-secondary: #ffffffcc;
+  --figma-color-text-onbrand-tertiary: #ffffff66;
+  --figma-color-text-oncomponent: #ffffff;
+  --figma-color-text-oncomponent-secondary: #ffffffcc;
+  --figma-color-text-oncomponent-tertiary: #ffffff66;
+  --figma-color-text-ondanger: #ffffff;
+  --figma-color-text-ondanger-secondary: #ffffffcc;
+  --figma-color-text-ondanger-tertiary: #ffffff66;
+  --figma-color-text-ondesign: #ffffff;
+  --figma-color-text-ondesign-secondary: #ffffffcc;
+  --figma-color-text-ondesign-tertiary: #ffffff66;
+  --figma-color-text-ondisabled: #ffffff;
+  --figma-color-text-onfigjam: #ffffff;
+  --figma-color-text-onfigjam-secondary: #ffffffcc;
+  --figma-color-text-onfigjam-tertiary: #ffffff66;
+  --figma-color-text-oninverse: #ffffffe5;
+  --figma-color-text-onmeasure: #ffffff;
+  --figma-color-text-onmeasure-secondary: #ffffffcc;
+  --figma-color-text-onmeasure-tertiary: #ffffff66;
+  --figma-color-text-onselected: #000000e5;
+  --figma-color-text-onselected-secondary: #00000080;
+  --figma-color-text-onselected-strong: #ffffff;
+  --figma-color-text-onselected-tertiary: #0000004d;
+  --figma-color-text-onsuccess: #ffffff;
+  --figma-color-text-onsuccess-secondary: #ffffffcc;
+  --figma-color-text-onsuccess-tertiary: #ffffff66;
+  --figma-color-text-onwarning: #000000e5;
+  --figma-color-text-onwarning-secondary: #00000080;
+  --figma-color-text-onwarning-tertiary: #0000004d;
+  --figma-color-text-secondary: #00000080;
+  --figma-color-text-secondary-hover: #000000e5;
+  --figma-color-text-selected: #e24c0c;
+  --figma-color-text-selected-secondary: #e24c0c;
+  --figma-color-text-selected-tertiary: #e24c0c;
+  --figma-color-text-success: #009951;
+  --figma-color-text-success-secondary: #009951;
+  --figma-color-text-success-tertiary: #009951;
+  --figma-color-text-tertiary: #0000004d;
+  --figma-color-text-tertiary-hover: #000000e5;
+  --figma-color-text-toolbar: #ffffff;
+  --figma-color-text-toolbar-danger: #ffafa3;
+  --figma-color-text-toolbar-disabled: #ffffff66;
+  --figma-color-text-toolbar-hover: #ffffff;
+  --figma-color-text-toolbar-ondisabled: #2c2c2c;
+  --figma-color-text-toolbar-onselected: #ffffff;
+  --figma-color-text-toolbar-secondary: #ffffffb2;
+  --figma-color-text-toolbar-secondary-hover: #ffffff;
+  --figma-color-text-toolbar-selected: #ffa27a;
+  --figma-color-text-toolbar-selected-secondary: #ffa27a;
+  --figma-color-text-toolbar-selected-tertiary: #ffa27a;
+  --figma-color-text-toolbar-tertiary: #ffffff66;
+  --figma-color-text-toolbar-tertiary-hover: #ffffff;
+  --figma-color-text-toolbar-warning: #ffd966;
+  --figma-color-text-tooltip: #ffffff;
+  --figma-color-text-tooltip-danger: #ffafa3;
+  --figma-color-text-tooltip-disabled: #ffffff66;
+  --figma-color-text-tooltip-hover: #ffffff;
+  --figma-color-text-tooltip-ondisabled: #1e1e1e;
+  --figma-color-text-tooltip-onselected: #ffffff;
+  --figma-color-text-tooltip-secondary: #ffffffb2;
+  --figma-color-text-tooltip-secondary-hover: #ffffff;
+  --figma-color-text-tooltip-selected: #ffa27a;
+  --figma-color-text-tooltip-selected-secondary: #ffa27a;
+  --figma-color-text-tooltip-selected-tertiary: #ffa27a;
+  --figma-color-text-tooltip-tertiary: #ffffff66;
+  --figma-color-text-tooltip-tertiary-hover: #ffffff;
+  --figma-color-text-tooltip-warning: #ffd966;
+  --figma-color-text-warning: #b86200;
+  --figma-color-text-warning-secondary: #b86200;
+  --figma-color-text-warning-tertiary: #b86200;
+  --figma-color-texthighlight: #0d99ff66;
+  --figma-color-textondarkcanvas: #ffffffe5;
+  --figma-color-textondarkcanvassecondary: #ffffffb2;
+  --figma-color-textonlightcanvas: #000000e5;
+  --figma-color-textonlightcanvassecondary: #0000004d;
+  --figma-color-textonmultiplayerblue: #ffffff;
+  --figma-color-textonmultiplayergreen: #ffffff;
+  --figma-color-textonmultiplayergrey: #ffffff;
+  --figma-color-textonmultiplayerpink: #ffffff;
+  --figma-color-textonmultiplayerpurple: #ffffff;
+  --figma-color-textonmultiplayerred: #ffffff;
+  --figma-color-textonmultiplayeryellow: #000000e5;
+  --figma-color-textonvoting: #000000e5;
+  --figma-elevation-100: 0px 1px 3px rgba(0, 0, 0, 0.15), 0px 0px 0.5px rgba(0, 0, 0, 0.3);
+  --figma-elevation-200: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 3px 8px rgba(0, 0, 0, 0.1), 0px 0px 0.5px rgba(0, 0, 0, 0.18);
+  --figma-elevation-300: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 5px 12px rgba(0, 0, 0, 0.13), 0px 0px 0.5px rgba(0, 0, 0, 0.15);
+  --figma-elevation-400: 0px 2px 5px rgba(0, 0, 0, 0.15), 0px 10px 16px rgba(0, 0, 0, 0.12), 0px 0px 0.5px rgba(0, 0, 0, 0.12);
+  --figma-elevation-500: 0px 2px 5px rgba(0, 0, 0, 0.15), 0px 10px 24px rgba(0, 0, 0, 0.18), 0px 0px 0.5px rgba(0, 0, 0, 0.08);
+  --figma-shadow-tooltip: var(--figma-elevation-300);
+  --figma-shadow-menu: var(--figma-elevation-400);
+  --figma-shadow-modal: var(--figma-elevation-500);
+}
+
+.figma-dark .slides, .slides .figma-dark, .slides.figma-dark {
+  --figma-color-bg: #2c2c2c;
+  --figma-color-bg-assistive: #f316b0;
+  --figma-color-bg-assistive-hover: #d01b9c;
+  --figma-color-bg-assistive-pressed: #d01b9c;
+  --figma-color-bg-assistive-secondary: #96207a;
+  --figma-color-bg-assistive-tertiary: #68275e;
+  --figma-color-bg-brand: #f65009;
+  --figma-color-bg-brand-hover: #db4606;
+  --figma-color-bg-brand-pressed: #db4606;
+  --figma-color-bg-brand-secondary: #b93f13;
+  --figma-color-bg-brand-tertiary: #603a2a;
+  --figma-color-bg-component: #8a38f5;
+  --figma-color-bg-component-hover: #7a2ed6;
+  --figma-color-bg-component-pressed: #7a2ed6;
+  --figma-color-bg-component-secondary: #652ca8;
+  --figma-color-bg-component-tertiary: #473956;
+  --figma-color-bg-danger: #e03e1a;
+  --figma-color-bg-danger-hover: #c4381c;
+  --figma-color-bg-danger-pressed: #c4381c;
+  --figma-color-bg-danger-secondary: #963323;
+  --figma-color-bg-danger-tertiary: #60332a;
+  --figma-color-bg-design: #0c8ce9;
+  --figma-color-bg-design-hover: #0a6dc2;
+  --figma-color-bg-design-pressed: #0a6dc2;
+  --figma-color-bg-design-secondary: #105cad;
+  --figma-color-bg-design-tertiary: #394360;
+  --figma-color-bg-disabled: #757575;
+  --figma-color-bg-disabled-secondary: #b3b3b3;
+  --figma-color-bg-figjam: #8a38f5;
+  --figma-color-bg-figjam-hover: #7a2ed6;
+  --figma-color-bg-figjam-pressed: #7a2ed6;
+  --figma-color-bg-figjam-secondary: #652ca8;
+  --figma-color-bg-figjam-tertiary: #473956;
+  --figma-color-bg-handoff: #198f51;
+  --figma-color-bg-handoff-hover: #078348;
+  --figma-color-bg-handoff-pressed: #078348;
+  --figma-color-bg-handoff-secondary: #0a5c35;
+  --figma-color-bg-handoff-tertiary: #476656;
+  --figma-color-bg-hover: #383838;
+  --figma-color-bg-info: #603a2a;
+  --figma-color-bg-inverse: #ffffff;
+  --figma-color-bg-measure: #e03e1a;
+  --figma-color-bg-measure-hover: #c4381c;
+  --figma-color-bg-measure-pressed: #c4381c;
+  --figma-color-bg-measure-secondary: #963323;
+  --figma-color-bg-measure-tertiary: #60332a;
+  --figma-color-bg-menu: #1e1e1e;
+  --figma-color-bg-menu-disabled: #757575;
+  --figma-color-bg-menu-hover: #2c2c2c;
+  --figma-color-bg-menu-pressed: #2c2c2c;
+  --figma-color-bg-menu-secondary: #383838;
+  --figma-color-bg-menu-selected: #f65009;
+  --figma-color-bg-menu-selected-hover: #db4606;
+  --figma-color-bg-menu-selected-pressed: #db4606;
+  --figma-color-bg-menu-selected-secondary: #603a2a;
+  --figma-color-bg-menu-selected-tertiary: #603a2a;
+  --figma-color-bg-menu-tertiary: #444444;
+  --figma-color-bg-onselected: #d4693b;
+  --figma-color-bg-onselected-hover: #d4693b;
+  --figma-color-bg-onselected-pressed: #d4693b;
+  --figma-color-bg-pressed: #383838;
+  --figma-color-bg-secondary: #383838;
+  --figma-color-bg-selected: #864e37;
+  --figma-color-bg-selected-hover: #a55e40;
+  --figma-color-bg-selected-pressed: #a55e40;
+  --figma-color-bg-selected-secondary: #603a2a;
+  --figma-color-bg-selected-strong: #f65009;
+  --figma-color-bg-selected-tertiary: #603a2a;
+  --figma-color-bg-success: #198f51;
+  --figma-color-bg-success-hover: #078348;
+  --figma-color-bg-success-pressed: #078348;
+  --figma-color-bg-success-secondary: #0a5c35;
+  --figma-color-bg-success-tertiary: #476656;
+  --figma-color-bg-tertiary: #444444;
+  --figma-color-bg-toolbar: #2c2c2c;
+  --figma-color-bg-toolbar-disabled: #757575;
+  --figma-color-bg-toolbar-hover: #111111;
+  --figma-color-bg-toolbar-pressed: #111111;
+  --figma-color-bg-toolbar-secondary: #383838;
+  --figma-color-bg-toolbar-selected: #f65009;
+  --figma-color-bg-toolbar-selected-hover: #db4606;
+  --figma-color-bg-toolbar-selected-pressed: #db4606;
+  --figma-color-bg-toolbar-selected-secondary: #b93f13;
+  --figma-color-bg-toolbar-selected-tertiary: #f65009;
+  --figma-color-bg-toolbar-tertiary: #444444;
+  --figma-color-bg-tooltip: #1e1e1e;
+  --figma-color-bg-tooltip-disabled: #757575;
+  --figma-color-bg-tooltip-hover: #2c2c2c;
+  --figma-color-bg-tooltip-pressed: #2c2c2c;
+  --figma-color-bg-tooltip-secondary: #383838;
+  --figma-color-bg-tooltip-selected: #f65009;
+  --figma-color-bg-tooltip-selected-hover: #db4606;
+  --figma-color-bg-tooltip-selected-pressed: #db4606;
+  --figma-color-bg-tooltip-selected-secondary: #603a2a;
+  --figma-color-bg-tooltip-selected-tertiary: #603a2a;
+  --figma-color-bg-tooltip-tertiary: #444444;
+  --figma-color-bg-warning: #f3c11b;
+  --figma-color-bg-warning-hover: #f2b50d;
+  --figma-color-bg-warning-pressed: #f2b50d;
+  --figma-color-bg-warning-secondary: #e4a711;
+  --figma-color-bg-warning-tertiary: #5c4100;
+  --figma-color-bghoverondarkcanvas: #ffffff33;
+  --figma-color-bghoveronlightcanvas: #00000033;
+  --figma-color-bghovertransparent: #ffffff0d;
+  --figma-color-bgsecondaryoncanvas: #111111;
+  --figma-color-bgselectedarea: #ff5c1633;
+  --figma-color-bgtransparent: #00000099;
+  --figma-color-bgtransparent-secondary-hover: #ffffff1a;
+  --figma-color-bgtransparent-secondary-pressed: #ffffff26;
+  --figma-color-bgtransparentsecondary: #ffffff26;
+  --figma-color-bgvoting: #f3c11b;
+  --figma-color-bgvotingsecondary: #fbe8ad;
+  --figma-color-bgvotingtertiary: #fdf7dd;
+  --figma-color-bgvotingwheeldial: #fdf7dd;
+  --figma-color-bgvotingwheelhover: #fbe8ad;
+  --figma-color-border: #444444;
+  --figma-color-border-assistive: #96207a;
+  --figma-color-border-assistive-strong: #fc9ce0;
+  --figma-color-border-brand: #b93f13;
+  --figma-color-border-brand-strong: #ffa27a;
+  --figma-color-border-component: #652ca8;
+  --figma-color-border-component-hover: #8a38f5;
+  --figma-color-border-component-strong: #d6b6fb;
+  --figma-color-border-danger: #963323;
+  --figma-color-border-danger-strong: #fca397;
+  --figma-color-border-design: #105cad;
+  --figma-color-border-design-strong: #7cc4f8;
+  --figma-color-border-disabled: #444444;
+  --figma-color-border-disabled-strong: #ffffff66;
+  --figma-color-border-figjam: #652ca8;
+  --figma-color-border-figjam-strong: #d1a8ff;
+  --figma-color-border-handoff: #0a5c35;
+  --figma-color-border-handoff-strong: #79d297;
+  --figma-color-border-measure: #963323;
+  --figma-color-border-measure-strong: #fca397;
+  --figma-color-border-menu: #383838;
+  --figma-color-border-menu-disabled: #383838;
+  --figma-color-border-menu-disabled-strong: #383838;
+  --figma-color-border-menu-onselected: #ffa27a;
+  --figma-color-border-menu-onselected-strong: #ffffff;
+  --figma-color-border-menu-selected: #f65009;
+  --figma-color-border-menu-selected-strong: #ffa27a;
+  --figma-color-border-menu-strong: #ffffff;
+  --figma-color-border-onassistive: #d01b9c;
+  --figma-color-border-onassistive-strong: #ffffff;
+  --figma-color-border-onbrand: #db4606;
+  --figma-color-border-onbrand-strong: #ffffff;
+  --figma-color-border-oncomponent: #7a2ed6;
+  --figma-color-border-oncomponent-strong: #ffffff;
+  --figma-color-border-ondanger: #c4381c;
+  --figma-color-border-ondanger-strong: #ffffff;
+  --figma-color-border-ondesign: #0a6dc2;
+  --figma-color-border-ondesign-strong: #ffffff;
+  --figma-color-border-onfigjam: #7a2ed6;
+  --figma-color-border-onfigjam-strong: #7a2ed6;
+  --figma-color-border-onmeasure: #c4381c;
+  --figma-color-border-onmeasure-strong: #ffffff;
+  --figma-color-border-onselected: #d4693b;
+  --figma-color-border-onselected-strong: #ffffffe5;
+  --figma-color-border-onsuccess: #078348;
+  --figma-color-border-onsuccess-strong: #ffffff;
+  --figma-color-border-onwarning: #e4a711;
+  --figma-color-border-onwarning-strong: #000000e5;
+  --figma-color-border-selected: #f65009;
+  --figma-color-border-selected-strong: #ffa27a;
+  --figma-color-border-strong: #ffffffe5;
+  --figma-color-border-success: #0a5c35;
+  --figma-color-border-success-strong: #79d297;
+  --figma-color-border-toolbar: #444444;
+  --figma-color-border-toolbar-disabled: #ffffff66;
+  --figma-color-border-toolbar-onselected: #ffffff;
+  --figma-color-border-toolbar-selected: #f65009;
+  --figma-color-border-toolbar-selected-strong: #ffa27a;
+  --figma-color-border-toolbar-strong: #ffffff;
+  --figma-color-border-tooltip: #383838;
+  --figma-color-border-tooltip-disabled: #383838;
+  --figma-color-border-tooltip-disabled-strong: #383838;
+  --figma-color-border-tooltip-onselected: #db4606;
+  --figma-color-border-tooltip-onselected-strong: #ffffff;
+  --figma-color-border-tooltip-selected: #f65009;
+  --figma-color-border-tooltip-selected-strong: #ffa27a;
+  --figma-color-border-tooltip-strong: #ffffff;
+  --figma-color-border-warning: #925711;
+  --figma-color-border-warning-strong: #f7d15f;
+  --figma-color-bordertranslucent: #ffffff1a;
+  --figma-color-conditionalborder: #444444;
+  --figma-color-icon: #ffffff;
+  --figma-color-icon-assistive: #fc9ce0;
+  --figma-color-icon-assistive-pressed: #fbb1ed;
+  --figma-color-icon-assistive-secondary: #fc9ce0;
+  --figma-color-icon-assistive-tertiary: #fc9ce0;
+  --figma-color-icon-brand: #ffa27a;
+  --figma-color-icon-brand-pressed: #f65009;
+  --figma-color-icon-brand-secondary: #db4606;
+  --figma-color-icon-brand-tertiary: #603a2a;
+  --figma-color-icon-component: #d1a8ff;
+  --figma-color-icon-component-pressed: #d6b6fb;
+  --figma-color-icon-component-secondary: #7f699b;
+  --figma-color-icon-component-tertiary: #7f699b;
+  --figma-color-icon-danger: #e03e1a;
+  --figma-color-icon-danger-hover: #fbbcb6;
+  --figma-color-icon-danger-pressed: #fbbcb6;
+  --figma-color-icon-danger-secondary: #e03e1a;
+  --figma-color-icon-danger-secondary-hover: #e03e1a;
+  --figma-color-icon-danger-tertiary: #e03e1a;
+  --figma-color-icon-design: #7cc4f8;
+  --figma-color-icon-design-pressed: #a8d7fa;
+  --figma-color-icon-design-secondary: #7cc4f8;
+  --figma-color-icon-design-tertiary: #7cc4f8;
+  --figma-color-icon-disabled: #ffffff66;
+  --figma-color-icon-figjam: #d1a8ff;
+  --figma-color-icon-figjam-pressed: #d6b6fb;
+  --figma-color-icon-figjam-secondary: #7f699b;
+  --figma-color-icon-figjam-tertiary: #7f699b;
+  --figma-color-icon-handoff: #79d297;
+  --figma-color-icon-handoff-pressed: #a1e8b9;
+  --figma-color-icon-handoff-secondary: #79d297;
+  --figma-color-icon-handoff-tertiary: #79d297;
+  --figma-color-icon-hover: #ffffff;
+  --figma-color-icon-measure: #e03e1a;
+  --figma-color-icon-measure-hover: #fbbcb6;
+  --figma-color-icon-measure-pressed: #fbbcb6;
+  --figma-color-icon-measure-secondary: #e03e1a;
+  --figma-color-icon-measure-secondary-hover: #e03e1a;
+  --figma-color-icon-measure-tertiary: #e03e1a;
+  --figma-color-icon-menu: #ffffff;
+  --figma-color-icon-menu-danger: #e03e1a;
+  --figma-color-icon-menu-disabled: #ffffff66;
+  --figma-color-icon-menu-hover: #ffffff;
+  --figma-color-icon-menu-ondisabled: #1e1e1e;
+  --figma-color-icon-menu-onselected: #ffffff;
+  --figma-color-icon-menu-pressed: #f65009;
+  --figma-color-icon-menu-secondary: #ffffffb2;
+  --figma-color-icon-menu-secondary-hover: #ffffff;
+  --figma-color-icon-menu-selected: #ffa27a;
+  --figma-color-icon-menu-selected-secondary: #ffa27a;
+  --figma-color-icon-menu-selected-tertiary: #ffa27a;
+  --figma-color-icon-menu-tertiary: #ffffff66;
+  --figma-color-icon-menu-tertiary-hover: #ffffff;
+  --figma-color-icon-menu-warning: #f3c11b;
+  --figma-color-icon-onassistive: #ffffff;
+  --figma-color-icon-onassistive-secondary: #ffffffcc;
+  --figma-color-icon-onassistive-tertiary: #ffffff66;
+  --figma-color-icon-onbrand: #ffffff;
+  --figma-color-icon-onbrand-secondary: #ffffffcc;
+  --figma-color-icon-onbrand-tertiary: #ffffff66;
+  --figma-color-icon-oncomponent: #ffffff;
+  --figma-color-icon-oncomponent-secondary: #ffffffcc;
+  --figma-color-icon-oncomponent-tertiary: #ffffff66;
+  --figma-color-icon-ondanger: #ffffff;
+  --figma-color-icon-ondanger-secondary: #ffffffcc;
+  --figma-color-icon-ondanger-tertiary: #ffffff66;
+  --figma-color-icon-ondesign: #ffffff;
+  --figma-color-icon-ondesign-secondary: #ffffffcc;
+  --figma-color-icon-ondesign-tertiary: #ffffff66;
+  --figma-color-icon-ondisabled: #2c2c2c;
+  --figma-color-icon-onfigjam: #ffffff;
+  --figma-color-icon-onfigjam-secondary: #ffffffcc;
+  --figma-color-icon-onfigjam-tertiary: #ffffff66;
+  --figma-color-icon-oninverse: #000000e5;
+  --figma-color-icon-onmeasure: #ffffff;
+  --figma-color-icon-onmeasure-secondary: #ffffffcc;
+  --figma-color-icon-onmeasure-tertiary: #ffffff66;
+  --figma-color-icon-onselected: #ffffff;
+  --figma-color-icon-onselected-secondary: #ffffffb2;
+  --figma-color-icon-onselected-strong: #ffffff;
+  --figma-color-icon-onselected-tertiary: #ffffff66;
+  --figma-color-icon-onsuccess: #ffffff;
+  --figma-color-icon-onsuccess-secondary: #ffffffcc;
+  --figma-color-icon-onsuccess-tertiary: #ffffff66;
+  --figma-color-icon-onwarning: #000000e5;
+  --figma-color-icon-onwarning-secondary: #00000080;
+  --figma-color-icon-onwarning-tertiary: #0000004d;
+  --figma-color-icon-pressed: #db4606;
+  --figma-color-icon-secondary: #ffffffb2;
+  --figma-color-icon-secondary-hover: #ffffff;
+  --figma-color-icon-selected: #ffa27a;
+  --figma-color-icon-selected-secondary: #ffa27a;
+  --figma-color-icon-selected-tertiary: #ffa27a;
+  --figma-color-icon-success: #198f51;
+  --figma-color-icon-success-pressed: #a1e8b9;
+  --figma-color-icon-success-secondary: #198f51;
+  --figma-color-icon-success-tertiary: #198f51;
+  --figma-color-icon-tertiary: #ffffff66;
+  --figma-color-icon-tertiary-hover: #ffffff;
+  --figma-color-icon-toolbar: #ffffff;
+  --figma-color-icon-toolbar-danger: #e03e1a;
+  --figma-color-icon-toolbar-disabled: #ffffff66;
+  --figma-color-icon-toolbar-hover: #ffffff;
+  --figma-color-icon-toolbar-ondisabled: #2c2c2c;
+  --figma-color-icon-toolbar-onselected: #ffffff;
+  --figma-color-icon-toolbar-pressed: #f65009;
+  --figma-color-icon-toolbar-secondary: #ffffffb2;
+  --figma-color-icon-toolbar-secondary-hover: #ffffff;
+  --figma-color-icon-toolbar-selected: #ffa27a;
+  --figma-color-icon-toolbar-selected-secondary: #ffa27a;
+  --figma-color-icon-toolbar-selected-tertiary: #ffa27a;
+  --figma-color-icon-toolbar-tertiary: #ffffff66;
+  --figma-color-icon-toolbar-tertiary-hover: #ffffff;
+  --figma-color-icon-toolbar-warning: #f3c11b;
+  --figma-color-icon-tooltip: #ffffff;
+  --figma-color-icon-tooltip-danger: #e03e1a;
+  --figma-color-icon-tooltip-disabled: #ffffff66;
+  --figma-color-icon-tooltip-hover: #ffffff;
+  --figma-color-icon-tooltip-ondisabled: #1e1e1e;
+  --figma-color-icon-tooltip-onselected: #ffffff;
+  --figma-color-icon-tooltip-pressed: #f65009;
+  --figma-color-icon-tooltip-secondary: #ffffffb2;
+  --figma-color-icon-tooltip-secondary-hover: #ffffff;
+  --figma-color-icon-tooltip-selected: #ffa27a;
+  --figma-color-icon-tooltip-selected-secondary: #ffa27a;
+  --figma-color-icon-tooltip-selected-tertiary: #ffa27a;
+  --figma-color-icon-tooltip-tertiary: #ffffff66;
+  --figma-color-icon-tooltip-tertiary-hover: #ffffff;
+  --figma-color-icon-tooltip-warning: #f3c11b;
+  --figma-color-icon-warning: #f3c11b;
+  --figma-color-icon-warning-pressed: #f7d15f;
+  --figma-color-icon-warning-secondary: #f3c11b;
+  --figma-color-icon-warning-tertiary: #f3c11b;
+  --figma-color-icondesignfilesecondary: #7cc4f8;
+  --figma-color-iconfigjamfilesecondary: #d1a8ff;
+  --figma-color-iconondarkcanvas: #ffffffe5;
+  --figma-color-icononlightcanvas: #000000e5;
+  --figma-color-icononvoting: #000000e5;
+  --figma-color-iconprototypefile: #757575;
+  --figma-color-iconprototypefilesecondary: #ffffff;
+  --figma-color-iconpublishedfile: #757575;
+  --figma-color-iconpublishedfilesecondary: #b3b3b3;
+  --figma-color-loading: #ffffff1a;
+  --figma-color-loadingmenu: #ffffff1a;
+  --figma-color-loadingsecondary: #ffffff0d;
+  --figma-color-loadingsecondarymenu: #ffffff0d;
+  --figma-color-modalbackdrop: #00000080;
+  --figma-color-multiplayerblue: #0a6dc2;
+  --figma-color-multiplayerbluehover: #105cad;
+  --figma-color-multiplayerbluesecondary: #184591;
+  --figma-color-multiplayergreen: #198f51;
+  --figma-color-multiplayergreenhover: #078348;
+  --figma-color-multiplayergreensecondary: #0a4c2d;
+  --figma-color-multiplayergrey: #667799;
+  --figma-color-multiplayergreyhover: #536383;
+  --figma-color-multiplayergreysecondary: #394360;
+  --figma-color-multiplayerpink: #f316b0;
+  --figma-color-multiplayerpinkhover: #d01b9c;
+  --figma-color-multiplayerpinksecondary: #68275e;
+  --figma-color-multiplayerpurple: #8a38f5;
+  --figma-color-multiplayerpurplehover: #7a2ed6;
+  --figma-color-multiplayerpurplesecondary: #50297a;
+  --figma-color-multiplayerred: #e03e1a;
+  --figma-color-multiplayerredhover: #c4381c;
+  --figma-color-multiplayerredsecondary: #7c2622;
+  --figma-color-multiplayeryellow: #f3c11b;
+  --figma-color-multiplayeryellowhover: #f2b50d;
+  --figma-color-multiplayeryellowsecondary: #c58011;
+  --figma-color-nodehandle: #7cc4f8;
+  --figma-color-prototypeloadingbackdrop: #000000e5;
+  --figma-color-scrollbar: #b3b3b380;
+  --figma-color-shadow: #00000099;
+  --figma-color-text: #ffffff;
+  --figma-color-text-assistive: #fc9ce0;
+  --figma-color-text-assistive-pressed: #fbb1ed;
+  --figma-color-text-assistive-secondary: #fc9ce0;
+  --figma-color-text-assistive-tertiary: #fc9ce0;
+  --figma-color-text-brand: #ffa27a;
+  --figma-color-text-brand-secondary: #ffa27a;
+  --figma-color-text-brand-tertiary: #ffa27a;
+  --figma-color-text-component: #d1a8ff;
+  --figma-color-text-component-pressed: #d6b6fb;
+  --figma-color-text-component-secondary: #7f699b;
+  --figma-color-text-component-tertiary: #7f699b;
+  --figma-color-text-danger: #fca397;
+  --figma-color-text-danger-secondary: #fca397;
+  --figma-color-text-danger-tertiary: #fca397;
+  --figma-color-text-design: #7cc4f8;
+  --figma-color-text-design-pressed: #a8d7fa;
+  --figma-color-text-design-secondary: #7cc4f8;
+  --figma-color-text-design-tertiary: #7cc4f8;
+  --figma-color-text-disabled: #ffffff66;
+  --figma-color-text-figjam: #c5b2dc;
+  --figma-color-text-figjam-pressed: #d6b6fb;
+  --figma-color-text-figjam-secondary: #7f699b;
+  --figma-color-text-figjam-tertiary: #7f699b;
+  --figma-color-text-handoff: #79d297;
+  --figma-color-text-handoff-secondary: #79d297;
+  --figma-color-text-handoff-tertiary: #79d297;
+  --figma-color-text-hover: #ffffff;
+  --figma-color-text-measure: #fca397;
+  --figma-color-text-measure-secondary: #fca397;
+  --figma-color-text-measure-tertiary: #fca397;
+  --figma-color-text-menu: #ffffff;
+  --figma-color-text-menu-danger: #fca397;
+  --figma-color-text-menu-disabled: #ffffff66;
+  --figma-color-text-menu-hover: #ffffff;
+  --figma-color-text-menu-ondisabled: #1e1e1e;
+  --figma-color-text-menu-onselected: #ffffff;
+  --figma-color-text-menu-secondary: #ffffffb2;
+  --figma-color-text-menu-secondary-hover: #ffffff;
+  --figma-color-text-menu-selected: #ffa27a;
+  --figma-color-text-menu-selected-secondary: #ffa27a;
+  --figma-color-text-menu-selected-tertiary: #ffa27a;
+  --figma-color-text-menu-tertiary: #ffffff66;
+  --figma-color-text-menu-tertiary-hover: #ffffff;
+  --figma-color-text-menu-warning: #f7d15f;
+  --figma-color-text-onassistive: #ffffff;
+  --figma-color-text-onassistive-secondary: #ffffffcc;
+  --figma-color-text-onassistive-tertiary: #ffffff66;
+  --figma-color-text-onbrand: #ffffff;
+  --figma-color-text-onbrand-secondary: #ffffffcc;
+  --figma-color-text-onbrand-tertiary: #ffffff66;
+  --figma-color-text-oncomponent: #ffffff;
+  --figma-color-text-oncomponent-secondary: #ffffffcc;
+  --figma-color-text-oncomponent-tertiary: #ffffff66;
+  --figma-color-text-ondanger: #ffffff;
+  --figma-color-text-ondanger-secondary: #ffffffcc;
+  --figma-color-text-ondanger-tertiary: #ffffff66;
+  --figma-color-text-ondesign: #ffffff;
+  --figma-color-text-ondesign-secondary: #ffffffcc;
+  --figma-color-text-ondesign-tertiary: #ffffff66;
+  --figma-color-text-ondisabled: #2c2c2c;
+  --figma-color-text-onfigjam: #ffffff;
+  --figma-color-text-onfigjam-secondary: #ffffffcc;
+  --figma-color-text-onfigjam-tertiary: #ffffff66;
+  --figma-color-text-oninverse: #000000e5;
+  --figma-color-text-onmeasure: #ffffff;
+  --figma-color-text-onmeasure-secondary: #ffffffcc;
+  --figma-color-text-onmeasure-tertiary: #ffffff66;
+  --figma-color-text-onselected: #ffffffe5;
+  --figma-color-text-onselected-secondary: #ffffffb2;
+  --figma-color-text-onselected-strong: #ffffff;
+  --figma-color-text-onselected-tertiary: #ffffff66;
+  --figma-color-text-onsuccess: #ffffff;
+  --figma-color-text-onsuccess-secondary: #ffffffcc;
+  --figma-color-text-onsuccess-tertiary: #ffffff66;
+  --figma-color-text-onwarning: #000000e5;
+  --figma-color-text-onwarning-secondary: #00000080;
+  --figma-color-text-onwarning-tertiary: #0000004d;
+  --figma-color-text-secondary: #ffffffb2;
+  --figma-color-text-secondary-hover: #ffffff;
+  --figma-color-text-selected: #ffa27a;
+  --figma-color-text-selected-secondary: #ffa27a;
+  --figma-color-text-selected-tertiary: #ffa27a;
+  --figma-color-text-success: #79d297;
+  --figma-color-text-success-secondary: #79d297;
+  --figma-color-text-success-tertiary: #79d297;
+  --figma-color-text-tertiary: #ffffff66;
+  --figma-color-text-tertiary-hover: #ffffff;
+  --figma-color-text-toolbar: #ffffff;
+  --figma-color-text-toolbar-danger: #fca397;
+  --figma-color-text-toolbar-disabled: #ffffff66;
+  --figma-color-text-toolbar-hover: #ffffff;
+  --figma-color-text-toolbar-ondisabled: #2c2c2c;
+  --figma-color-text-toolbar-onselected: #ffffff;
+  --figma-color-text-toolbar-secondary: #ffffffb2;
+  --figma-color-text-toolbar-secondary-hover: #ffffff;
+  --figma-color-text-toolbar-selected: #ffa27a;
+  --figma-color-text-toolbar-selected-secondary: #ffa27a;
+  --figma-color-text-toolbar-selected-tertiary: #ffa27a;
+  --figma-color-text-toolbar-tertiary: #ffffff66;
+  --figma-color-text-toolbar-tertiary-hover: #ffffff;
+  --figma-color-text-toolbar-warning: #f7d15f;
+  --figma-color-text-tooltip: #ffffff;
+  --figma-color-text-tooltip-danger: #fca397;
+  --figma-color-text-tooltip-disabled: #ffffff66;
+  --figma-color-text-tooltip-hover: #ffffff;
+  --figma-color-text-tooltip-ondisabled: #1e1e1e;
+  --figma-color-text-tooltip-onselected: #ffffff;
+  --figma-color-text-tooltip-secondary: #ffffffb2;
+  --figma-color-text-tooltip-secondary-hover: #ffffff;
+  --figma-color-text-tooltip-selected: #ffa27a;
+  --figma-color-text-tooltip-selected-secondary: #ffa27a;
+  --figma-color-text-tooltip-selected-tertiary: #ffa27a;
+  --figma-color-text-tooltip-tertiary: #ffffff66;
+  --figma-color-text-tooltip-tertiary-hover: #ffffff;
+  --figma-color-text-tooltip-warning: #f7d15f;
+  --figma-color-text-warning: #f7d15f;
+  --figma-color-text-warning-secondary: #f7d15f;
+  --figma-color-text-warning-tertiary: #f7d15f;
+  --figma-color-texthighlight: #0d99ff66;
+  --figma-color-textondarkcanvas: #ffffffe5;
+  --figma-color-textondarkcanvassecondary: #ffffffb2;
+  --figma-color-textonlightcanvas: #000000e5;
+  --figma-color-textonlightcanvassecondary: #0000004d;
+  --figma-color-textonmultiplayerblue: #ffffff;
+  --figma-color-textonmultiplayergreen: #ffffff;
+  --figma-color-textonmultiplayergrey: #ffffff;
+  --figma-color-textonmultiplayerpink: #ffffff;
+  --figma-color-textonmultiplayerpurple: #ffffff;
+  --figma-color-textonmultiplayerred: #ffffff;
+  --figma-color-textonmultiplayeryellow: #000000e5;
+  --figma-color-textonvoting: #000000e5;
+  --figma-elevation-100: 0px 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3), inset 0px 0.5px 0px rgba(255, 255, 255, 0.1), 0px 0px 0.5px rgba(0, 0, 0, 0.5);
+  --figma-elevation-200: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3), 0px 3px 8px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-elevation-300: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3), 0px 5px 12px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-elevation-400: 0px 2px 5px rgba(0, 0, 0, 0.35), inset 0px 0px 0.5px rgba(255, 255, 255, 0.35), 0px 10px 16px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-elevation-500: 0px 3px 5px rgba(0, 0, 0, 0.35), inset 0px 0px 0.5px rgba(255, 255, 255, 0.35), 0px 10px 24px rgba(0, 0, 0, 0.45), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-shadow-tooltip: var(--figma-elevation-300);
+  --figma-shadow-menu: var(--figma-elevation-400);
+  --figma-shadow-modal: var(--figma-elevation-500);
+}
diff --git a/packages/theme/src/css/slides.css b/packages/theme/src/css/slides.css
new file mode 100644
index 0000000..a96cbf1
--- /dev/null
+++ b/packages/theme/src/css/slides.css
@@ -0,0 +1,1174 @@
+@import './preflight.css' layer(base);
+@import './utilities.css';
+@theme {
+  --figma-font-family-default: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "SFProLocalRange";
+  --figma-font-family-code: "Roboto Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
+  --figma-font-family-display: "Whyte", ui-sans-serif, system-ui, sans-serif;
+  --figma-font-weight-default: 450;
+  --figma-font-weight-medium: 450;
+  --figma-font-weight-strong: 550;
+  --figma-font-weight-heavy: 550;
+  --figma-font-size-body-large: .8125rem;
+  --figma-line-height-body-large: 1.375rem;
+  --figma-letter-spacing-body-large: -.00203rem;
+  --figma-font-size-body-large-strong: .8125rem;
+  --figma-line-height-body-large-strong: 1.375rem;
+  --figma-letter-spacing-body-large-strong: -.00203rem;
+  --figma-font-size-body-medium: .6875rem;
+  --figma-line-height-body-medium: 1rem;
+  --figma-letter-spacing-body-medium: .00344rem;
+  --figma-font-size-body-medium-strong: .6875rem;
+  --figma-line-height-body-medium-strong: 1rem;
+  --figma-letter-spacing-body-medium-strong: .00344rem;
+  --figma-font-size-body-small: .5625rem;
+  --figma-line-height-body-small: .875rem;
+  --figma-letter-spacing-body-small: .00281rem;
+  --figma-font-size-body-small-strong: .5625rem;
+  --figma-line-height-body-small-strong: .875rem;
+  --figma-letter-spacing-body-small-strong: .00281rem;
+  --figma-font-size-heading-display: 3rem;
+  --figma-line-height-heading-display: 3.5rem;
+  --figma-letter-spacing-heading-display: -.09rem;
+  --figma-font-size-heading-large: 1.5rem;
+  --figma-line-height-heading-large: 2rem;
+  --figma-letter-spacing-heading-large: -.0255rem;
+  --figma-font-size-heading-medium: .9375rem;
+  --figma-line-height-heading-medium: 1.5625rem;
+  --figma-letter-spacing-heading-medium: -.00469rem;
+  --figma-font-size-heading-small: .8125rem;
+  --figma-line-height-heading-small: 1.375rem;
+  --figma-letter-spacing-heading-small: -.00203rem;
+  --figma-radius-sm: .125rem;
+  --figma-radius-md: .3125rem;
+  --figma-radius-lg: .8125rem;
+  --figma-radius-none: 0;
+  --figma-radius-full: 9999px;
+  --figma-space-0: 0;
+  --figma-space-0\.5: .125rem;
+  --figma-space-1: .25rem;
+  --figma-space-1\.5: .375rem;
+  --figma-space-2: .5rem;
+  --figma-space-2\.5: .75rem;
+  --figma-space-3: 1rem;
+  --figma-space-4: 1.5rem;
+  --figma-space-5: 2rem;
+  --figma-space-6: 2.5rem;
+  --figma-border-width-1: 1px;
+  --figma-border-width-4: .25rem;
+  --figma-duration-100: 100ms;
+  --figma-duration-200: 200ms;
+  --figma-duration-300: 300ms;
+  --figma-opacity-50: 0.5;
+  --figma-opacity-disabled: 0.3;
+  --figma-z-index-1: 1;
+  --figma-z-index-2: 2;
+  --figma-z-index-dropdown: 10;
+  --figma-z-index-modal: 50;
+  --figma-z-index-tooltip: 100;
+  --figma-shadow-slider: 0 1px 3px 0 #0000001a, 0 3px 8px 0 #0000001a, 0 0 0.5px 0 #0000002e, inset 0 0 0 0.5px #0000001a;
+  --figma-shadow-hud: 0px 5px 17px rgba(0, 0, 0, 0.2), 0px 2px 7px rgba(0, 0, 0, 0.15);
+  --font-figma: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "SFProLocalRange";
+  --font-figma-code: "Roboto Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
+  --font-weight-figma-default: 450;
+  --font-weight-figma-heavy: 550;
+  --font-weight-figma-medium: 450;
+  --font-weight-figma-strong: 550;
+  --text-figma-body-large: .8125rem;
+  --text-figma-body-large-strong: .8125rem;
+  --text-figma-body-medium: .6875rem;
+  --text-figma-body-medium-strong: .6875rem;
+  --text-figma-body-small: .5625rem;
+  --text-figma-body-small-strong: .5625rem;
+  --text-figma-heading-display: 3rem;
+  --text-figma-heading-large: 1.5rem;
+  --text-figma-heading-medium: .9375rem;
+  --text-figma-heading-small: .8125rem;
+  --leading-figma-body-large: 1.375rem;
+  --leading-figma-body-large-strong: 1.375rem;
+  --leading-figma-body-medium: 1rem;
+  --leading-figma-body-medium-strong: 1rem;
+  --leading-figma-body-small: .875rem;
+  --leading-figma-body-small-strong: .875rem;
+  --leading-figma-heading-display: 3.5rem;
+  --leading-figma-heading-large: 2rem;
+  --leading-figma-heading-medium: 1.5625rem;
+  --leading-figma-heading-small: 1.375rem;
+  --text-figma-body-large--line-height: 1.375rem;
+  --text-figma-body-large-strong--line-height: 1.375rem;
+  --text-figma-body-medium--line-height: 1rem;
+  --text-figma-body-medium-strong--line-height: 1rem;
+  --text-figma-body-small--line-height: .875rem;
+  --text-figma-body-small-strong--line-height: .875rem;
+  --text-figma-heading-display--line-height: 3.5rem;
+  --text-figma-heading-large--line-height: 2rem;
+  --text-figma-heading-medium--line-height: 1.5625rem;
+  --text-figma-heading-small--line-height: 1.375rem;
+  --tracking-figma-body-large: -.00203rem;
+  --tracking-figma-body-large-strong: -.00203rem;
+  --tracking-figma-body-medium: .00344rem;
+  --tracking-figma-body-medium-strong: .00344rem;
+  --tracking-figma-body-small: .00281rem;
+  --tracking-figma-body-small-strong: .00281rem;
+  --tracking-figma-heading-display: -.09rem;
+  --tracking-figma-heading-large: -.0255rem;
+  --tracking-figma-heading-medium: -.00469rem;
+  --tracking-figma-heading-small: -.00203rem;
+  --text-figma-body-large--letter-spacing: -.00203rem;
+  --text-figma-body-large-strong--letter-spacing: -.00203rem;
+  --text-figma-body-medium--letter-spacing: .00344rem;
+  --text-figma-body-medium-strong--letter-spacing: .00344rem;
+  --text-figma-body-small--letter-spacing: .00281rem;
+  --text-figma-body-small-strong--letter-spacing: .00281rem;
+  --text-figma-heading-display--letter-spacing: -.09rem;
+  --text-figma-heading-large--letter-spacing: -.0255rem;
+  --text-figma-heading-medium--letter-spacing: -.00469rem;
+  --text-figma-heading-small--letter-spacing: -.00203rem;
+  --text-figma-body-large-strong--font-weight: 550;
+  --text-figma-body-medium-strong--font-weight: 550;
+  --text-figma-body-small-strong--font-weight: 550;
+  --text-figma-heading-large--font-weight: 550;
+  --text-figma-heading-medium--font-weight: 550;
+  --text-figma-heading-small--font-weight: 550;
+  --radius-figma-full: 9999px;
+  --radius-figma-lg: .8125rem;
+  --radius-figma-md: .3125rem;
+  --radius-figma-none: 0;
+  --radius-figma-sm: .125rem;
+  --spacing-figma-0: 0;
+  --spacing-figma-0\.5: .125rem;
+  --spacing-figma-1: .25rem;
+  --spacing-figma-1\.5: .375rem;
+  --spacing-figma-2: .5rem;
+  --spacing-figma-2\.5: .75rem;
+  --spacing-figma-3: 1rem;
+  --spacing-figma-4: 1.5rem;
+  --spacing-figma-5: 2rem;
+  --spacing-figma-6: 2.5rem;
+  --border-figma-1: 1px;
+  --border-figma-4: .25rem;
+  --transition-duration-figma-100: 100ms;
+  --transition-duration-figma-200: 200ms;
+  --transition-duration-figma-300: 300ms;
+  --opacity-figma-50: 0.5;
+  --opacity-figma-disabled: 0.3;
+  --z-index-figma-1: 1;
+  --z-index-figma-2: 2;
+  --z-index-figma-dropdown: 10;
+  --z-index-figma-modal: 50;
+  --z-index-figma-tooltip: 100;
+}
+
+@theme inline {
+  --shadow-figma-elevation-100: var(--figma-elevation-100);
+  --shadow-figma-elevation-200: var(--figma-elevation-200);
+  --shadow-figma-elevation-300: var(--figma-elevation-300);
+  --shadow-figma-elevation-400: var(--figma-elevation-400);
+  --shadow-figma-elevation-500: var(--figma-elevation-500);
+  --shadow-figma-tooltip: var(--figma-elevation-300);
+  --shadow-figma-menu: var(--figma-elevation-400);
+  --shadow-figma-modal: var(--figma-elevation-500);
+  --shadow-figma-slider: 0 1px 3px 0 #0000001a, 0 3px 8px 0 #0000001a, 0 0 0.5px 0 #0000002e, inset 0 0 0 0.5px #0000001a;
+  --shadow-figma-hud: 0px 5px 17px rgba(0, 0, 0, 0.2), 0px 2px 7px rgba(0, 0, 0, 0.15);
+}
+
+:root, .slides, .figma-light .slides, .slides .figma-light, .slides.figma-light {
+  --figma-color-bg: #ffffff;
+  --figma-color-bg-assistive: #ff24bd;
+  --figma-color-bg-assistive-hover: #ea10ac;
+  --figma-color-bg-assistive-pressed: #ea10ac;
+  --figma-color-bg-assistive-secondary: #cb0b96;
+  --figma-color-bg-assistive-tertiary: #ffe0fc;
+  --figma-color-bg-brand: #ff5c16;
+  --figma-color-bg-brand-hover: #e24c0c;
+  --figma-color-bg-brand-pressed: #e24c0c;
+  --figma-color-bg-brand-secondary: #c53e0d;
+  --figma-color-bg-brand-tertiary: #ffdfcc;
+  --figma-color-bg-component: #9747ff;
+  --figma-color-bg-component-hover: #8638e5;
+  --figma-color-bg-component-pressed: #8638e5;
+  --figma-color-bg-component-secondary: #7c2bda;
+  --figma-color-bg-component-tertiary: #f1e5ff;
+  --figma-color-bg-danger: #f24822;
+  --figma-color-bg-danger-hover: #dc3412;
+  --figma-color-bg-danger-pressed: #dc3412;
+  --figma-color-bg-danger-secondary: #bd2915;
+  --figma-color-bg-danger-tertiary: #ffe2e0;
+  --figma-color-bg-design: #0d99ff;
+  --figma-color-bg-design-hover: #007be5;
+  --figma-color-bg-design-pressed: #007be5;
+  --figma-color-bg-design-secondary: #0768cf;
+  --figma-color-bg-design-tertiary: #e5f4ff;
+  --figma-color-bg-disabled: #d9d9d9;
+  --figma-color-bg-disabled-secondary: #b3b3b3;
+  --figma-color-bg-figjam: #9747ff;
+  --figma-color-bg-figjam-hover: #8638e5;
+  --figma-color-bg-figjam-pressed: #8638e5;
+  --figma-color-bg-figjam-secondary: #7c2bda;
+  --figma-color-bg-figjam-tertiary: #f1e5ff;
+  --figma-color-bg-handoff: #14ae5c;
+  --figma-color-bg-handoff-hover: #009951;
+  --figma-color-bg-handoff-pressed: #009951;
+  --figma-color-bg-handoff-secondary: #008043;
+  --figma-color-bg-handoff-tertiary: #daecdf;
+  --figma-color-bg-hover: #f5f5f5;
+  --figma-color-bg-info: #ffdfcc;
+  --figma-color-bg-inverse: #2c2c2c;
+  --figma-color-bg-measure: #f24822;
+  --figma-color-bg-measure-hover: #dc3412;
+  --figma-color-bg-measure-pressed: #dc3412;
+  --figma-color-bg-measure-secondary: #bd2915;
+  --figma-color-bg-measure-tertiary: #ffe2e0;
+  --figma-color-bg-menu: #1e1e1e;
+  --figma-color-bg-menu-disabled: #757575;
+  --figma-color-bg-menu-hover: #2c2c2c;
+  --figma-color-bg-menu-pressed: #2c2c2c;
+  --figma-color-bg-menu-secondary: #383838;
+  --figma-color-bg-menu-selected: #ff5c16;
+  --figma-color-bg-menu-selected-hover: #e24c0c;
+  --figma-color-bg-menu-selected-pressed: #e24c0c;
+  --figma-color-bg-menu-selected-secondary: #603a2a;
+  --figma-color-bg-menu-selected-tertiary: #603a2a;
+  --figma-color-bg-menu-tertiary: #444444;
+  --figma-color-bg-onselected: #ffbb9e;
+  --figma-color-bg-onselected-hover: #ffbb9e;
+  --figma-color-bg-onselected-pressed: #ffbb9e;
+  --figma-color-bg-pressed: #f5f5f5;
+  --figma-color-bg-secondary: #f5f5f5;
+  --figma-color-bg-selected: #ffdfcc;
+  --figma-color-bg-selected-hover: #ffbb9e;
+  --figma-color-bg-selected-pressed: #ffbb9e;
+  --figma-color-bg-selected-secondary: #fff2eb;
+  --figma-color-bg-selected-strong: #ff5c16;
+  --figma-color-bg-selected-tertiary: #fff2eb;
+  --figma-color-bg-success: #14ae5c;
+  --figma-color-bg-success-hover: #009951;
+  --figma-color-bg-success-pressed: #009951;
+  --figma-color-bg-success-secondary: #008043;
+  --figma-color-bg-success-tertiary: #cff7d3;
+  --figma-color-bg-tertiary: #e6e6e6;
+  --figma-color-bg-toolbar: #2c2c2c;
+  --figma-color-bg-toolbar-disabled: #757575;
+  --figma-color-bg-toolbar-hover: #f5f5f5;
+  --figma-color-bg-toolbar-pressed: #111111;
+  --figma-color-bg-toolbar-secondary: #383838;
+  --figma-color-bg-toolbar-selected: #ff5c16;
+  --figma-color-bg-toolbar-selected-hover: #e24c0c;
+  --figma-color-bg-toolbar-selected-pressed: #e24c0c;
+  --figma-color-bg-toolbar-selected-secondary: #c53e0d;
+  --figma-color-bg-toolbar-selected-tertiary: #ff5c16;
+  --figma-color-bg-toolbar-tertiary: #444444;
+  --figma-color-bg-tooltip: #1e1e1e;
+  --figma-color-bg-tooltip-disabled: #757575;
+  --figma-color-bg-tooltip-hover: #2c2c2c;
+  --figma-color-bg-tooltip-pressed: #2c2c2c;
+  --figma-color-bg-tooltip-secondary: #383838;
+  --figma-color-bg-tooltip-selected: #ff5c16;
+  --figma-color-bg-tooltip-selected-hover: #e24c0c;
+  --figma-color-bg-tooltip-selected-pressed: #e24c0c;
+  --figma-color-bg-tooltip-selected-secondary: #603a2a;
+  --figma-color-bg-tooltip-selected-tertiary: #603a2a;
+  --figma-color-bg-tooltip-tertiary: #444444;
+  --figma-color-bg-warning: #ffcd29;
+  --figma-color-bg-warning-hover: #ffc21a;
+  --figma-color-bg-warning-pressed: #ffc21a;
+  --figma-color-bg-warning-secondary: #fab815;
+  --figma-color-bg-warning-tertiary: #fff1c2;
+  --figma-color-bghoverondarkcanvas: #ffffff33;
+  --figma-color-bghoveronlightcanvas: #00000033;
+  --figma-color-bghovertransparent: #0000000d;
+  --figma-color-bgsecondaryoncanvas: #e6e6e6;
+  --figma-color-bgselectedarea: #ff5c1633;
+  --figma-color-bgtransparent: #ffffff99;
+  --figma-color-bgtransparent-secondary-hover: #0000001a;
+  --figma-color-bgtransparent-secondary-pressed: #00000026;
+  --figma-color-bgtransparentsecondary: #ffffff;
+  --figma-color-bgvoting: #ffcd29;
+  --figma-color-bgvotingsecondary: #fff1c2;
+  --figma-color-bgvotingtertiary: #fffbeb;
+  --figma-color-bgvotingwheeldial: #fffbeb;
+  --figma-color-bgvotingwheelhover: #fff1c2;
+  --figma-color-border: #e6e6e6;
+  --figma-color-border-assistive: #ffbdf2;
+  --figma-color-border-assistive-strong: #ea10ac;
+  --figma-color-border-brand: #ffbb9e;
+  --figma-color-border-brand-strong: #e24c0c;
+  --figma-color-border-component: #e4ccff;
+  --figma-color-border-component-hover: #9747ff;
+  --figma-color-border-component-strong: #8638e5;
+  --figma-color-border-danger: #ffc7c2;
+  --figma-color-border-danger-strong: #dc3412;
+  --figma-color-border-design: #bde3ff;
+  --figma-color-border-design-strong: #007be5;
+  --figma-color-border-disabled: #e6e6e6;
+  --figma-color-border-disabled-strong: #0000004d;
+  --figma-color-border-figjam: #e4ccff;
+  --figma-color-border-figjam-strong: #8638e5;
+  --figma-color-border-handoff: #aff4c6;
+  --figma-color-border-handoff-strong: #009951;
+  --figma-color-border-measure: #ffc7c2;
+  --figma-color-border-measure-strong: #dc3412;
+  --figma-color-border-menu: #383838;
+  --figma-color-border-menu-disabled: #383838;
+  --figma-color-border-menu-disabled-strong: #383838;
+  --figma-color-border-menu-onselected: #ffa27a;
+  --figma-color-border-menu-onselected-strong: #ffffff;
+  --figma-color-border-menu-selected: #ff5c16;
+  --figma-color-border-menu-selected-strong: #ffa27a;
+  --figma-color-border-menu-strong: #ffffff;
+  --figma-color-border-onassistive: #ea10ac;
+  --figma-color-border-onassistive-strong: #ffffff;
+  --figma-color-border-onbrand: #e24c0c;
+  --figma-color-border-onbrand-strong: #ffffff;
+  --figma-color-border-oncomponent: #8638e5;
+  --figma-color-border-oncomponent-strong: #ffffff;
+  --figma-color-border-ondanger: #dc3412;
+  --figma-color-border-ondanger-strong: #ffffff;
+  --figma-color-border-ondesign: #007be5;
+  --figma-color-border-ondesign-strong: #ffffff;
+  --figma-color-border-onfigjam: #8638e5;
+  --figma-color-border-onfigjam-strong: #8638e5;
+  --figma-color-border-onmeasure: #dc3412;
+  --figma-color-border-onmeasure-strong: #ffffff;
+  --figma-color-border-onselected: #ffbb9e;
+  --figma-color-border-onselected-strong: #000000e5;
+  --figma-color-border-onsuccess: #009951;
+  --figma-color-border-onsuccess-strong: #ffffff;
+  --figma-color-border-onwarning: #fab815;
+  --figma-color-border-onwarning-strong: #000000e5;
+  --figma-color-border-selected: #ff5c16;
+  --figma-color-border-selected-strong: #e24c0c;
+  --figma-color-border-strong: #2c2c2c;
+  --figma-color-border-success: #aff4c6;
+  --figma-color-border-success-strong: #009951;
+  --figma-color-border-toolbar: #444444;
+  --figma-color-border-toolbar-disabled: #ffffff66;
+  --figma-color-border-toolbar-onselected: #ffffff;
+  --figma-color-border-toolbar-selected: #ff5c16;
+  --figma-color-border-toolbar-selected-strong: #ffa27a;
+  --figma-color-border-toolbar-strong: #ffffff;
+  --figma-color-border-tooltip: #383838;
+  --figma-color-border-tooltip-disabled: #383838;
+  --figma-color-border-tooltip-disabled-strong: #383838;
+  --figma-color-border-tooltip-onselected: #e24c0c;
+  --figma-color-border-tooltip-onselected-strong: #ffffff;
+  --figma-color-border-tooltip-selected: #ff5c16;
+  --figma-color-border-tooltip-selected-strong: #ffa27a;
+  --figma-color-border-tooltip-strong: #ffffff;
+  --figma-color-border-warning: #ffe8a3;
+  --figma-color-border-warning-strong: #b86200;
+  --figma-color-bordertranslucent: #0000001a;
+  --figma-color-conditionalborder: #ffffff00;
+  --figma-color-icon: #000000e5;
+  --figma-color-icon-assistive: #ea10ac;
+  --figma-color-icon-assistive-pressed: #cb0b96;
+  --figma-color-icon-assistive-secondary: #ea10ac;
+  --figma-color-icon-assistive-tertiary: #ea10ac;
+  --figma-color-icon-brand: #e24c0c;
+  --figma-color-icon-brand-pressed: #c53e0d;
+  --figma-color-icon-brand-secondary: #ffa27a;
+  --figma-color-icon-brand-tertiary: #ffbb9e;
+  --figma-color-icon-component: #8638e5;
+  --figma-color-icon-component-pressed: #7c2bda;
+  --figma-color-icon-component-secondary: #c5b2dc;
+  --figma-color-icon-component-tertiary: #c5b2dc;
+  --figma-color-icon-danger: #f24822;
+  --figma-color-icon-danger-hover: #bd2915;
+  --figma-color-icon-danger-pressed: #bd2915;
+  --figma-color-icon-danger-secondary: #f24822;
+  --figma-color-icon-danger-secondary-hover: #f24822;
+  --figma-color-icon-danger-tertiary: #f24822;
+  --figma-color-icon-design: #007be5;
+  --figma-color-icon-design-pressed: #0768cf;
+  --figma-color-icon-design-secondary: #007be5;
+  --figma-color-icon-design-tertiary: #007be5;
+  --figma-color-icon-disabled: #0000004d;
+  --figma-color-icon-figjam: #8638e5;
+  --figma-color-icon-figjam-pressed: #7c2bda;
+  --figma-color-icon-figjam-secondary: #c5b2dc;
+  --figma-color-icon-figjam-tertiary: #c5b2dc;
+  --figma-color-icon-handoff: #009951;
+  --figma-color-icon-handoff-pressed: #008043;
+  --figma-color-icon-handoff-secondary: #009951;
+  --figma-color-icon-handoff-tertiary: #009951;
+  --figma-color-icon-hover: #000000e5;
+  --figma-color-icon-measure: #f24822;
+  --figma-color-icon-measure-hover: #bd2915;
+  --figma-color-icon-measure-pressed: #bd2915;
+  --figma-color-icon-measure-secondary: #f24822;
+  --figma-color-icon-measure-secondary-hover: #f24822;
+  --figma-color-icon-measure-tertiary: #f24822;
+  --figma-color-icon-menu: #ffffff;
+  --figma-color-icon-menu-danger: #f24822;
+  --figma-color-icon-menu-disabled: #ffffff66;
+  --figma-color-icon-menu-hover: #ffffff;
+  --figma-color-icon-menu-ondisabled: #1e1e1e;
+  --figma-color-icon-menu-onselected: #ffffff;
+  --figma-color-icon-menu-pressed: #ff5c16;
+  --figma-color-icon-menu-secondary: #ffffffb2;
+  --figma-color-icon-menu-secondary-hover: #ffffff;
+  --figma-color-icon-menu-selected: #ffa27a;
+  --figma-color-icon-menu-selected-secondary: #ffa27a;
+  --figma-color-icon-menu-selected-tertiary: #ffa27a;
+  --figma-color-icon-menu-tertiary: #ffffff66;
+  --figma-color-icon-menu-tertiary-hover: #ffffff;
+  --figma-color-icon-menu-warning: #ffcd29;
+  --figma-color-icon-onassistive: #ffffff;
+  --figma-color-icon-onassistive-secondary: #ffffffcc;
+  --figma-color-icon-onassistive-tertiary: #ffffff66;
+  --figma-color-icon-onbrand: #ffffff;
+  --figma-color-icon-onbrand-secondary: #ffffffcc;
+  --figma-color-icon-onbrand-tertiary: #ffffff66;
+  --figma-color-icon-oncomponent: #ffffff;
+  --figma-color-icon-oncomponent-secondary: #ffffffcc;
+  --figma-color-icon-oncomponent-tertiary: #ffffff66;
+  --figma-color-icon-ondanger: #ffffff;
+  --figma-color-icon-ondanger-secondary: #ffffffcc;
+  --figma-color-icon-ondanger-tertiary: #ffffff66;
+  --figma-color-icon-ondesign: #ffffff;
+  --figma-color-icon-ondesign-secondary: #ffffffcc;
+  --figma-color-icon-ondesign-tertiary: #ffffff66;
+  --figma-color-icon-ondisabled: #ffffff;
+  --figma-color-icon-onfigjam: #ffffff;
+  --figma-color-icon-onfigjam-secondary: #ffffffcc;
+  --figma-color-icon-onfigjam-tertiary: #ffffff66;
+  --figma-color-icon-oninverse: #ffffffe5;
+  --figma-color-icon-onmeasure: #ffffff;
+  --figma-color-icon-onmeasure-secondary: #ffffffcc;
+  --figma-color-icon-onmeasure-tertiary: #ffffff66;
+  --figma-color-icon-onselected: #000000e5;
+  --figma-color-icon-onselected-secondary: #00000080;
+  --figma-color-icon-onselected-strong: #ffffff;
+  --figma-color-icon-onselected-tertiary: #0000004d;
+  --figma-color-icon-onsuccess: #ffffff;
+  --figma-color-icon-onsuccess-secondary: #ffffffcc;
+  --figma-color-icon-onsuccess-tertiary: #ffffff66;
+  --figma-color-icon-onwarning: #000000e5;
+  --figma-color-icon-onwarning-secondary: #00000080;
+  --figma-color-icon-onwarning-tertiary: #0000004d;
+  --figma-color-icon-pressed: #e24c0c;
+  --figma-color-icon-secondary: #00000080;
+  --figma-color-icon-secondary-hover: #000000e5;
+  --figma-color-icon-selected: #e24c0c;
+  --figma-color-icon-selected-secondary: #e24c0c;
+  --figma-color-icon-selected-tertiary: #e24c0c;
+  --figma-color-icon-success: #14ae5c;
+  --figma-color-icon-success-pressed: #008043;
+  --figma-color-icon-success-secondary: #14ae5c;
+  --figma-color-icon-success-tertiary: #14ae5c;
+  --figma-color-icon-tertiary: #0000004d;
+  --figma-color-icon-tertiary-hover: #000000e5;
+  --figma-color-icon-toolbar: #ffffff;
+  --figma-color-icon-toolbar-danger: #f24822;
+  --figma-color-icon-toolbar-disabled: #ffffff66;
+  --figma-color-icon-toolbar-hover: #000000e5;
+  --figma-color-icon-toolbar-ondisabled: #2c2c2c;
+  --figma-color-icon-toolbar-onselected: #ffffff;
+  --figma-color-icon-toolbar-pressed: #ff5c16;
+  --figma-color-icon-toolbar-secondary: #ffffffb2;
+  --figma-color-icon-toolbar-secondary-hover: #ffffff;
+  --figma-color-icon-toolbar-selected: #ffa27a;
+  --figma-color-icon-toolbar-selected-secondary: #ffa27a;
+  --figma-color-icon-toolbar-selected-tertiary: #ffa27a;
+  --figma-color-icon-toolbar-tertiary: #ffffff66;
+  --figma-color-icon-toolbar-tertiary-hover: #ffffff;
+  --figma-color-icon-toolbar-warning: #ffcd29;
+  --figma-color-icon-tooltip: #ffffff;
+  --figma-color-icon-tooltip-danger: #f24822;
+  --figma-color-icon-tooltip-disabled: #ffffff66;
+  --figma-color-icon-tooltip-hover: #ffffff;
+  --figma-color-icon-tooltip-ondisabled: #1e1e1e;
+  --figma-color-icon-tooltip-onselected: #ffffff;
+  --figma-color-icon-tooltip-pressed: #ff5c16;
+  --figma-color-icon-tooltip-secondary: #ffffffb2;
+  --figma-color-icon-tooltip-secondary-hover: #ffffff;
+  --figma-color-icon-tooltip-selected: #ffa27a;
+  --figma-color-icon-tooltip-selected-secondary: #ffa27a;
+  --figma-color-icon-tooltip-selected-tertiary: #ffa27a;
+  --figma-color-icon-tooltip-tertiary: #ffffff66;
+  --figma-color-icon-tooltip-tertiary-hover: #ffffff;
+  --figma-color-icon-tooltip-warning: #ffcd29;
+  --figma-color-icon-warning: #ffcd29;
+  --figma-color-icon-warning-pressed: #b86200;
+  --figma-color-icon-warning-secondary: #ffcd29;
+  --figma-color-icon-warning-tertiary: #ffcd29;
+  --figma-color-icondesignfilesecondary: #80caff;
+  --figma-color-iconfigjamfilesecondary: #d9b8ff;
+  --figma-color-iconondarkcanvas: #ffffffe5;
+  --figma-color-icononlightcanvas: #000000e5;
+  --figma-color-icononvoting: #000000e5;
+  --figma-color-iconprototypefile: #d9d9d9;
+  --figma-color-iconprototypefilesecondary: #2c2c2c;
+  --figma-color-iconpublishedfile: #2c2c2c;
+  --figma-color-iconpublishedfilesecondary: #757575;
+  --figma-color-loading: #0000001a;
+  --figma-color-loadingmenu: #ffffff1a;
+  --figma-color-loadingsecondary: #0000000d;
+  --figma-color-loadingsecondarymenu: #ffffff0d;
+  --figma-color-modalbackdrop: #00000080;
+  --figma-color-multiplayerblue: #007be5;
+  --figma-color-multiplayerbluehover: #0768cf;
+  --figma-color-multiplayerbluesecondary: #034ac1;
+  --figma-color-multiplayergreen: #14ae5c;
+  --figma-color-multiplayergreenhover: #009951;
+  --figma-color-multiplayergreensecondary: #036838;
+  --figma-color-multiplayergrey: #667799;
+  --figma-color-multiplayergreyhover: #536383;
+  --figma-color-multiplayergreysecondary: #394360;
+  --figma-color-multiplayerpink: #ff24bd;
+  --figma-color-multiplayerpinkhover: #ea10ac;
+  --figma-color-multiplayerpinksecondary: #971172;
+  --figma-color-multiplayerpurple: #9747ff;
+  --figma-color-multiplayerpurplehover: #8638e5;
+  --figma-color-multiplayerpurplesecondary: #681abb;
+  --figma-color-multiplayerred: #f24822;
+  --figma-color-multiplayerredhover: #dc3412;
+  --figma-color-multiplayerredsecondary: #9f1f18;
+  --figma-color-multiplayeryellow: #ffcd29;
+  --figma-color-multiplayeryellowhover: #ffc21a;
+  --figma-color-multiplayeryellowsecondary: #eba611;
+  --figma-color-nodehandle: #80caff;
+  --figma-color-prototypeloadingbackdrop: #000000e5;
+  --figma-color-scrollbar: #b3b3b380;
+  --figma-color-shadow: #00000026;
+  --figma-color-text: #000000e5;
+  --figma-color-text-assistive: #ea10ac;
+  --figma-color-text-assistive-pressed: #cb0b96;
+  --figma-color-text-assistive-secondary: #ea10ac;
+  --figma-color-text-assistive-tertiary: #ea10ac;
+  --figma-color-text-brand: #e24c0c;
+  --figma-color-text-brand-secondary: #e24c0c;
+  --figma-color-text-brand-tertiary: #e24c0c;
+  --figma-color-text-component: #8638e5;
+  --figma-color-text-component-pressed: #7c2bda;
+  --figma-color-text-component-secondary: #c5b2dc;
+  --figma-color-text-component-tertiary: #c5b2dc;
+  --figma-color-text-danger: #dc3412;
+  --figma-color-text-danger-secondary: #dc3412;
+  --figma-color-text-danger-tertiary: #dc3412;
+  --figma-color-text-design: #007be5;
+  --figma-color-text-design-pressed: #0768cf;
+  --figma-color-text-design-secondary: #007be5;
+  --figma-color-text-design-tertiary: #007be5;
+  --figma-color-text-disabled: #0000004d;
+  --figma-color-text-figjam: #8638e5;
+  --figma-color-text-figjam-pressed: #7c2bda;
+  --figma-color-text-figjam-secondary: #c5b2dc;
+  --figma-color-text-figjam-tertiary: #c5b2dc;
+  --figma-color-text-handoff: #009951;
+  --figma-color-text-handoff-secondary: #009951;
+  --figma-color-text-handoff-tertiary: #009951;
+  --figma-color-text-hover: #000000e5;
+  --figma-color-text-measure: #dc3412;
+  --figma-color-text-measure-secondary: #dc3412;
+  --figma-color-text-measure-tertiary: #dc3412;
+  --figma-color-text-menu: #ffffff;
+  --figma-color-text-menu-danger: #f24822;
+  --figma-color-text-menu-disabled: #ffffff66;
+  --figma-color-text-menu-hover: #ffffff;
+  --figma-color-text-menu-ondisabled: #1e1e1e;
+  --figma-color-text-menu-onselected: #ffffff;
+  --figma-color-text-menu-secondary: #ffffffb2;
+  --figma-color-text-menu-secondary-hover: #ffffff;
+  --figma-color-text-menu-selected: #ffa27a;
+  --figma-color-text-menu-selected-secondary: #ffa27a;
+  --figma-color-text-menu-selected-tertiary: #ffa27a;
+  --figma-color-text-menu-tertiary: #ffffff66;
+  --figma-color-text-menu-tertiary-hover: #ffffff;
+  --figma-color-text-menu-warning: #ffd966;
+  --figma-color-text-onassistive: #ffffff;
+  --figma-color-text-onassistive-secondary: #ffffffcc;
+  --figma-color-text-onassistive-tertiary: #ffffff66;
+  --figma-color-text-onbrand: #ffffff;
+  --figma-color-text-onbrand-secondary: #ffffffcc;
+  --figma-color-text-onbrand-tertiary: #ffffff66;
+  --figma-color-text-oncomponent: #ffffff;
+  --figma-color-text-oncomponent-secondary: #ffffffcc;
+  --figma-color-text-oncomponent-tertiary: #ffffff66;
+  --figma-color-text-ondanger: #ffffff;
+  --figma-color-text-ondanger-secondary: #ffffffcc;
+  --figma-color-text-ondanger-tertiary: #ffffff66;
+  --figma-color-text-ondesign: #ffffff;
+  --figma-color-text-ondesign-secondary: #ffffffcc;
+  --figma-color-text-ondesign-tertiary: #ffffff66;
+  --figma-color-text-ondisabled: #ffffff;
+  --figma-color-text-onfigjam: #ffffff;
+  --figma-color-text-onfigjam-secondary: #ffffffcc;
+  --figma-color-text-onfigjam-tertiary: #ffffff66;
+  --figma-color-text-oninverse: #ffffffe5;
+  --figma-color-text-onmeasure: #ffffff;
+  --figma-color-text-onmeasure-secondary: #ffffffcc;
+  --figma-color-text-onmeasure-tertiary: #ffffff66;
+  --figma-color-text-onselected: #000000e5;
+  --figma-color-text-onselected-secondary: #00000080;
+  --figma-color-text-onselected-strong: #ffffff;
+  --figma-color-text-onselected-tertiary: #0000004d;
+  --figma-color-text-onsuccess: #ffffff;
+  --figma-color-text-onsuccess-secondary: #ffffffcc;
+  --figma-color-text-onsuccess-tertiary: #ffffff66;
+  --figma-color-text-onwarning: #000000e5;
+  --figma-color-text-onwarning-secondary: #00000080;
+  --figma-color-text-onwarning-tertiary: #0000004d;
+  --figma-color-text-secondary: #00000080;
+  --figma-color-text-secondary-hover: #000000e5;
+  --figma-color-text-selected: #e24c0c;
+  --figma-color-text-selected-secondary: #e24c0c;
+  --figma-color-text-selected-tertiary: #e24c0c;
+  --figma-color-text-success: #009951;
+  --figma-color-text-success-secondary: #009951;
+  --figma-color-text-success-tertiary: #009951;
+  --figma-color-text-tertiary: #0000004d;
+  --figma-color-text-tertiary-hover: #000000e5;
+  --figma-color-text-toolbar: #ffffff;
+  --figma-color-text-toolbar-danger: #ffafa3;
+  --figma-color-text-toolbar-disabled: #ffffff66;
+  --figma-color-text-toolbar-hover: #ffffff;
+  --figma-color-text-toolbar-ondisabled: #2c2c2c;
+  --figma-color-text-toolbar-onselected: #ffffff;
+  --figma-color-text-toolbar-secondary: #ffffffb2;
+  --figma-color-text-toolbar-secondary-hover: #ffffff;
+  --figma-color-text-toolbar-selected: #ffa27a;
+  --figma-color-text-toolbar-selected-secondary: #ffa27a;
+  --figma-color-text-toolbar-selected-tertiary: #ffa27a;
+  --figma-color-text-toolbar-tertiary: #ffffff66;
+  --figma-color-text-toolbar-tertiary-hover: #ffffff;
+  --figma-color-text-toolbar-warning: #ffd966;
+  --figma-color-text-tooltip: #ffffff;
+  --figma-color-text-tooltip-danger: #ffafa3;
+  --figma-color-text-tooltip-disabled: #ffffff66;
+  --figma-color-text-tooltip-hover: #ffffff;
+  --figma-color-text-tooltip-ondisabled: #1e1e1e;
+  --figma-color-text-tooltip-onselected: #ffffff;
+  --figma-color-text-tooltip-secondary: #ffffffb2;
+  --figma-color-text-tooltip-secondary-hover: #ffffff;
+  --figma-color-text-tooltip-selected: #ffa27a;
+  --figma-color-text-tooltip-selected-secondary: #ffa27a;
+  --figma-color-text-tooltip-selected-tertiary: #ffa27a;
+  --figma-color-text-tooltip-tertiary: #ffffff66;
+  --figma-color-text-tooltip-tertiary-hover: #ffffff;
+  --figma-color-text-tooltip-warning: #ffd966;
+  --figma-color-text-warning: #b86200;
+  --figma-color-text-warning-secondary: #b86200;
+  --figma-color-text-warning-tertiary: #b86200;
+  --figma-color-texthighlight: #0d99ff66;
+  --figma-color-textondarkcanvas: #ffffffe5;
+  --figma-color-textondarkcanvassecondary: #ffffffb2;
+  --figma-color-textonlightcanvas: #000000e5;
+  --figma-color-textonlightcanvassecondary: #0000004d;
+  --figma-color-textonmultiplayerblue: #ffffff;
+  --figma-color-textonmultiplayergreen: #ffffff;
+  --figma-color-textonmultiplayergrey: #ffffff;
+  --figma-color-textonmultiplayerpink: #ffffff;
+  --figma-color-textonmultiplayerpurple: #ffffff;
+  --figma-color-textonmultiplayerred: #ffffff;
+  --figma-color-textonmultiplayeryellow: #000000e5;
+  --figma-color-textonvoting: #000000e5;
+  --figma-elevation-100: 0px 1px 3px rgba(0, 0, 0, 0.15), 0px 0px 0.5px rgba(0, 0, 0, 0.3);
+  --figma-elevation-200: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 3px 8px rgba(0, 0, 0, 0.1), 0px 0px 0.5px rgba(0, 0, 0, 0.18);
+  --figma-elevation-300: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 5px 12px rgba(0, 0, 0, 0.13), 0px 0px 0.5px rgba(0, 0, 0, 0.15);
+  --figma-elevation-400: 0px 2px 5px rgba(0, 0, 0, 0.15), 0px 10px 16px rgba(0, 0, 0, 0.12), 0px 0px 0.5px rgba(0, 0, 0, 0.12);
+  --figma-elevation-500: 0px 2px 5px rgba(0, 0, 0, 0.15), 0px 10px 24px rgba(0, 0, 0, 0.18), 0px 0px 0.5px rgba(0, 0, 0, 0.08);
+  --figma-shadow-tooltip: var(--figma-elevation-300);
+  --figma-shadow-menu: var(--figma-elevation-400);
+  --figma-shadow-modal: var(--figma-elevation-500);
+}
+
+.figma-dark .slides, .slides .figma-dark, .slides.figma-dark {
+  --figma-color-bg: #2c2c2c;
+  --figma-color-bg-assistive: #f316b0;
+  --figma-color-bg-assistive-hover: #d01b9c;
+  --figma-color-bg-assistive-pressed: #d01b9c;
+  --figma-color-bg-assistive-secondary: #96207a;
+  --figma-color-bg-assistive-tertiary: #68275e;
+  --figma-color-bg-brand: #f65009;
+  --figma-color-bg-brand-hover: #db4606;
+  --figma-color-bg-brand-pressed: #db4606;
+  --figma-color-bg-brand-secondary: #b93f13;
+  --figma-color-bg-brand-tertiary: #603a2a;
+  --figma-color-bg-component: #8a38f5;
+  --figma-color-bg-component-hover: #7a2ed6;
+  --figma-color-bg-component-pressed: #7a2ed6;
+  --figma-color-bg-component-secondary: #652ca8;
+  --figma-color-bg-component-tertiary: #473956;
+  --figma-color-bg-danger: #e03e1a;
+  --figma-color-bg-danger-hover: #c4381c;
+  --figma-color-bg-danger-pressed: #c4381c;
+  --figma-color-bg-danger-secondary: #963323;
+  --figma-color-bg-danger-tertiary: #60332a;
+  --figma-color-bg-design: #0c8ce9;
+  --figma-color-bg-design-hover: #0a6dc2;
+  --figma-color-bg-design-pressed: #0a6dc2;
+  --figma-color-bg-design-secondary: #105cad;
+  --figma-color-bg-design-tertiary: #394360;
+  --figma-color-bg-disabled: #757575;
+  --figma-color-bg-disabled-secondary: #b3b3b3;
+  --figma-color-bg-figjam: #8a38f5;
+  --figma-color-bg-figjam-hover: #7a2ed6;
+  --figma-color-bg-figjam-pressed: #7a2ed6;
+  --figma-color-bg-figjam-secondary: #652ca8;
+  --figma-color-bg-figjam-tertiary: #473956;
+  --figma-color-bg-handoff: #198f51;
+  --figma-color-bg-handoff-hover: #078348;
+  --figma-color-bg-handoff-pressed: #078348;
+  --figma-color-bg-handoff-secondary: #0a5c35;
+  --figma-color-bg-handoff-tertiary: #476656;
+  --figma-color-bg-hover: #383838;
+  --figma-color-bg-info: #603a2a;
+  --figma-color-bg-inverse: #ffffff;
+  --figma-color-bg-measure: #e03e1a;
+  --figma-color-bg-measure-hover: #c4381c;
+  --figma-color-bg-measure-pressed: #c4381c;
+  --figma-color-bg-measure-secondary: #963323;
+  --figma-color-bg-measure-tertiary: #60332a;
+  --figma-color-bg-menu: #1e1e1e;
+  --figma-color-bg-menu-disabled: #757575;
+  --figma-color-bg-menu-hover: #2c2c2c;
+  --figma-color-bg-menu-pressed: #2c2c2c;
+  --figma-color-bg-menu-secondary: #383838;
+  --figma-color-bg-menu-selected: #f65009;
+  --figma-color-bg-menu-selected-hover: #db4606;
+  --figma-color-bg-menu-selected-pressed: #db4606;
+  --figma-color-bg-menu-selected-secondary: #603a2a;
+  --figma-color-bg-menu-selected-tertiary: #603a2a;
+  --figma-color-bg-menu-tertiary: #444444;
+  --figma-color-bg-onselected: #d4693b;
+  --figma-color-bg-onselected-hover: #d4693b;
+  --figma-color-bg-onselected-pressed: #d4693b;
+  --figma-color-bg-pressed: #383838;
+  --figma-color-bg-secondary: #383838;
+  --figma-color-bg-selected: #864e37;
+  --figma-color-bg-selected-hover: #a55e40;
+  --figma-color-bg-selected-pressed: #a55e40;
+  --figma-color-bg-selected-secondary: #603a2a;
+  --figma-color-bg-selected-strong: #f65009;
+  --figma-color-bg-selected-tertiary: #603a2a;
+  --figma-color-bg-success: #198f51;
+  --figma-color-bg-success-hover: #078348;
+  --figma-color-bg-success-pressed: #078348;
+  --figma-color-bg-success-secondary: #0a5c35;
+  --figma-color-bg-success-tertiary: #476656;
+  --figma-color-bg-tertiary: #444444;
+  --figma-color-bg-toolbar: #2c2c2c;
+  --figma-color-bg-toolbar-disabled: #757575;
+  --figma-color-bg-toolbar-hover: #111111;
+  --figma-color-bg-toolbar-pressed: #111111;
+  --figma-color-bg-toolbar-secondary: #383838;
+  --figma-color-bg-toolbar-selected: #f65009;
+  --figma-color-bg-toolbar-selected-hover: #db4606;
+  --figma-color-bg-toolbar-selected-pressed: #db4606;
+  --figma-color-bg-toolbar-selected-secondary: #b93f13;
+  --figma-color-bg-toolbar-selected-tertiary: #f65009;
+  --figma-color-bg-toolbar-tertiary: #444444;
+  --figma-color-bg-tooltip: #1e1e1e;
+  --figma-color-bg-tooltip-disabled: #757575;
+  --figma-color-bg-tooltip-hover: #2c2c2c;
+  --figma-color-bg-tooltip-pressed: #2c2c2c;
+  --figma-color-bg-tooltip-secondary: #383838;
+  --figma-color-bg-tooltip-selected: #f65009;
+  --figma-color-bg-tooltip-selected-hover: #db4606;
+  --figma-color-bg-tooltip-selected-pressed: #db4606;
+  --figma-color-bg-tooltip-selected-secondary: #603a2a;
+  --figma-color-bg-tooltip-selected-tertiary: #603a2a;
+  --figma-color-bg-tooltip-tertiary: #444444;
+  --figma-color-bg-warning: #f3c11b;
+  --figma-color-bg-warning-hover: #f2b50d;
+  --figma-color-bg-warning-pressed: #f2b50d;
+  --figma-color-bg-warning-secondary: #e4a711;
+  --figma-color-bg-warning-tertiary: #5c4100;
+  --figma-color-bghoverondarkcanvas: #ffffff33;
+  --figma-color-bghoveronlightcanvas: #00000033;
+  --figma-color-bghovertransparent: #ffffff0d;
+  --figma-color-bgsecondaryoncanvas: #111111;
+  --figma-color-bgselectedarea: #ff5c1633;
+  --figma-color-bgtransparent: #00000099;
+  --figma-color-bgtransparent-secondary-hover: #ffffff1a;
+  --figma-color-bgtransparent-secondary-pressed: #ffffff26;
+  --figma-color-bgtransparentsecondary: #ffffff26;
+  --figma-color-bgvoting: #f3c11b;
+  --figma-color-bgvotingsecondary: #fbe8ad;
+  --figma-color-bgvotingtertiary: #fdf7dd;
+  --figma-color-bgvotingwheeldial: #fdf7dd;
+  --figma-color-bgvotingwheelhover: #fbe8ad;
+  --figma-color-border: #444444;
+  --figma-color-border-assistive: #96207a;
+  --figma-color-border-assistive-strong: #fc9ce0;
+  --figma-color-border-brand: #b93f13;
+  --figma-color-border-brand-strong: #ffa27a;
+  --figma-color-border-component: #652ca8;
+  --figma-color-border-component-hover: #8a38f5;
+  --figma-color-border-component-strong: #d6b6fb;
+  --figma-color-border-danger: #963323;
+  --figma-color-border-danger-strong: #fca397;
+  --figma-color-border-design: #105cad;
+  --figma-color-border-design-strong: #7cc4f8;
+  --figma-color-border-disabled: #444444;
+  --figma-color-border-disabled-strong: #ffffff66;
+  --figma-color-border-figjam: #652ca8;
+  --figma-color-border-figjam-strong: #d1a8ff;
+  --figma-color-border-handoff: #0a5c35;
+  --figma-color-border-handoff-strong: #79d297;
+  --figma-color-border-measure: #963323;
+  --figma-color-border-measure-strong: #fca397;
+  --figma-color-border-menu: #383838;
+  --figma-color-border-menu-disabled: #383838;
+  --figma-color-border-menu-disabled-strong: #383838;
+  --figma-color-border-menu-onselected: #ffa27a;
+  --figma-color-border-menu-onselected-strong: #ffffff;
+  --figma-color-border-menu-selected: #f65009;
+  --figma-color-border-menu-selected-strong: #ffa27a;
+  --figma-color-border-menu-strong: #ffffff;
+  --figma-color-border-onassistive: #d01b9c;
+  --figma-color-border-onassistive-strong: #ffffff;
+  --figma-color-border-onbrand: #db4606;
+  --figma-color-border-onbrand-strong: #ffffff;
+  --figma-color-border-oncomponent: #7a2ed6;
+  --figma-color-border-oncomponent-strong: #ffffff;
+  --figma-color-border-ondanger: #c4381c;
+  --figma-color-border-ondanger-strong: #ffffff;
+  --figma-color-border-ondesign: #0a6dc2;
+  --figma-color-border-ondesign-strong: #ffffff;
+  --figma-color-border-onfigjam: #7a2ed6;
+  --figma-color-border-onfigjam-strong: #7a2ed6;
+  --figma-color-border-onmeasure: #c4381c;
+  --figma-color-border-onmeasure-strong: #ffffff;
+  --figma-color-border-onselected: #d4693b;
+  --figma-color-border-onselected-strong: #ffffffe5;
+  --figma-color-border-onsuccess: #078348;
+  --figma-color-border-onsuccess-strong: #ffffff;
+  --figma-color-border-onwarning: #e4a711;
+  --figma-color-border-onwarning-strong: #000000e5;
+  --figma-color-border-selected: #f65009;
+  --figma-color-border-selected-strong: #ffa27a;
+  --figma-color-border-strong: #ffffffe5;
+  --figma-color-border-success: #0a5c35;
+  --figma-color-border-success-strong: #79d297;
+  --figma-color-border-toolbar: #444444;
+  --figma-color-border-toolbar-disabled: #ffffff66;
+  --figma-color-border-toolbar-onselected: #ffffff;
+  --figma-color-border-toolbar-selected: #f65009;
+  --figma-color-border-toolbar-selected-strong: #ffa27a;
+  --figma-color-border-toolbar-strong: #ffffff;
+  --figma-color-border-tooltip: #383838;
+  --figma-color-border-tooltip-disabled: #383838;
+  --figma-color-border-tooltip-disabled-strong: #383838;
+  --figma-color-border-tooltip-onselected: #db4606;
+  --figma-color-border-tooltip-onselected-strong: #ffffff;
+  --figma-color-border-tooltip-selected: #f65009;
+  --figma-color-border-tooltip-selected-strong: #ffa27a;
+  --figma-color-border-tooltip-strong: #ffffff;
+  --figma-color-border-warning: #925711;
+  --figma-color-border-warning-strong: #f7d15f;
+  --figma-color-bordertranslucent: #ffffff1a;
+  --figma-color-conditionalborder: #444444;
+  --figma-color-icon: #ffffff;
+  --figma-color-icon-assistive: #fc9ce0;
+  --figma-color-icon-assistive-pressed: #fbb1ed;
+  --figma-color-icon-assistive-secondary: #fc9ce0;
+  --figma-color-icon-assistive-tertiary: #fc9ce0;
+  --figma-color-icon-brand: #ffa27a;
+  --figma-color-icon-brand-pressed: #f65009;
+  --figma-color-icon-brand-secondary: #db4606;
+  --figma-color-icon-brand-tertiary: #603a2a;
+  --figma-color-icon-component: #d1a8ff;
+  --figma-color-icon-component-pressed: #d6b6fb;
+  --figma-color-icon-component-secondary: #7f699b;
+  --figma-color-icon-component-tertiary: #7f699b;
+  --figma-color-icon-danger: #e03e1a;
+  --figma-color-icon-danger-hover: #fbbcb6;
+  --figma-color-icon-danger-pressed: #fbbcb6;
+  --figma-color-icon-danger-secondary: #e03e1a;
+  --figma-color-icon-danger-secondary-hover: #e03e1a;
+  --figma-color-icon-danger-tertiary: #e03e1a;
+  --figma-color-icon-design: #7cc4f8;
+  --figma-color-icon-design-pressed: #a8d7fa;
+  --figma-color-icon-design-secondary: #7cc4f8;
+  --figma-color-icon-design-tertiary: #7cc4f8;
+  --figma-color-icon-disabled: #ffffff66;
+  --figma-color-icon-figjam: #d1a8ff;
+  --figma-color-icon-figjam-pressed: #d6b6fb;
+  --figma-color-icon-figjam-secondary: #7f699b;
+  --figma-color-icon-figjam-tertiary: #7f699b;
+  --figma-color-icon-handoff: #79d297;
+  --figma-color-icon-handoff-pressed: #a1e8b9;
+  --figma-color-icon-handoff-secondary: #79d297;
+  --figma-color-icon-handoff-tertiary: #79d297;
+  --figma-color-icon-hover: #ffffff;
+  --figma-color-icon-measure: #e03e1a;
+  --figma-color-icon-measure-hover: #fbbcb6;
+  --figma-color-icon-measure-pressed: #fbbcb6;
+  --figma-color-icon-measure-secondary: #e03e1a;
+  --figma-color-icon-measure-secondary-hover: #e03e1a;
+  --figma-color-icon-measure-tertiary: #e03e1a;
+  --figma-color-icon-menu: #ffffff;
+  --figma-color-icon-menu-danger: #e03e1a;
+  --figma-color-icon-menu-disabled: #ffffff66;
+  --figma-color-icon-menu-hover: #ffffff;
+  --figma-color-icon-menu-ondisabled: #1e1e1e;
+  --figma-color-icon-menu-onselected: #ffffff;
+  --figma-color-icon-menu-pressed: #f65009;
+  --figma-color-icon-menu-secondary: #ffffffb2;
+  --figma-color-icon-menu-secondary-hover: #ffffff;
+  --figma-color-icon-menu-selected: #ffa27a;
+  --figma-color-icon-menu-selected-secondary: #ffa27a;
+  --figma-color-icon-menu-selected-tertiary: #ffa27a;
+  --figma-color-icon-menu-tertiary: #ffffff66;
+  --figma-color-icon-menu-tertiary-hover: #ffffff;
+  --figma-color-icon-menu-warning: #f3c11b;
+  --figma-color-icon-onassistive: #ffffff;
+  --figma-color-icon-onassistive-secondary: #ffffffcc;
+  --figma-color-icon-onassistive-tertiary: #ffffff66;
+  --figma-color-icon-onbrand: #ffffff;
+  --figma-color-icon-onbrand-secondary: #ffffffcc;
+  --figma-color-icon-onbrand-tertiary: #ffffff66;
+  --figma-color-icon-oncomponent: #ffffff;
+  --figma-color-icon-oncomponent-secondary: #ffffffcc;
+  --figma-color-icon-oncomponent-tertiary: #ffffff66;
+  --figma-color-icon-ondanger: #ffffff;
+  --figma-color-icon-ondanger-secondary: #ffffffcc;
+  --figma-color-icon-ondanger-tertiary: #ffffff66;
+  --figma-color-icon-ondesign: #ffffff;
+  --figma-color-icon-ondesign-secondary: #ffffffcc;
+  --figma-color-icon-ondesign-tertiary: #ffffff66;
+  --figma-color-icon-ondisabled: #2c2c2c;
+  --figma-color-icon-onfigjam: #ffffff;
+  --figma-color-icon-onfigjam-secondary: #ffffffcc;
+  --figma-color-icon-onfigjam-tertiary: #ffffff66;
+  --figma-color-icon-oninverse: #000000e5;
+  --figma-color-icon-onmeasure: #ffffff;
+  --figma-color-icon-onmeasure-secondary: #ffffffcc;
+  --figma-color-icon-onmeasure-tertiary: #ffffff66;
+  --figma-color-icon-onselected: #ffffff;
+  --figma-color-icon-onselected-secondary: #ffffffb2;
+  --figma-color-icon-onselected-strong: #ffffff;
+  --figma-color-icon-onselected-tertiary: #ffffff66;
+  --figma-color-icon-onsuccess: #ffffff;
+  --figma-color-icon-onsuccess-secondary: #ffffffcc;
+  --figma-color-icon-onsuccess-tertiary: #ffffff66;
+  --figma-color-icon-onwarning: #000000e5;
+  --figma-color-icon-onwarning-secondary: #00000080;
+  --figma-color-icon-onwarning-tertiary: #0000004d;
+  --figma-color-icon-pressed: #db4606;
+  --figma-color-icon-secondary: #ffffffb2;
+  --figma-color-icon-secondary-hover: #ffffff;
+  --figma-color-icon-selected: #ffa27a;
+  --figma-color-icon-selected-secondary: #ffa27a;
+  --figma-color-icon-selected-tertiary: #ffa27a;
+  --figma-color-icon-success: #198f51;
+  --figma-color-icon-success-pressed: #a1e8b9;
+  --figma-color-icon-success-secondary: #198f51;
+  --figma-color-icon-success-tertiary: #198f51;
+  --figma-color-icon-tertiary: #ffffff66;
+  --figma-color-icon-tertiary-hover: #ffffff;
+  --figma-color-icon-toolbar: #ffffff;
+  --figma-color-icon-toolbar-danger: #e03e1a;
+  --figma-color-icon-toolbar-disabled: #ffffff66;
+  --figma-color-icon-toolbar-hover: #ffffff;
+  --figma-color-icon-toolbar-ondisabled: #2c2c2c;
+  --figma-color-icon-toolbar-onselected: #ffffff;
+  --figma-color-icon-toolbar-pressed: #f65009;
+  --figma-color-icon-toolbar-secondary: #ffffffb2;
+  --figma-color-icon-toolbar-secondary-hover: #ffffff;
+  --figma-color-icon-toolbar-selected: #ffa27a;
+  --figma-color-icon-toolbar-selected-secondary: #ffa27a;
+  --figma-color-icon-toolbar-selected-tertiary: #ffa27a;
+  --figma-color-icon-toolbar-tertiary: #ffffff66;
+  --figma-color-icon-toolbar-tertiary-hover: #ffffff;
+  --figma-color-icon-toolbar-warning: #f3c11b;
+  --figma-color-icon-tooltip: #ffffff;
+  --figma-color-icon-tooltip-danger: #e03e1a;
+  --figma-color-icon-tooltip-disabled: #ffffff66;
+  --figma-color-icon-tooltip-hover: #ffffff;
+  --figma-color-icon-tooltip-ondisabled: #1e1e1e;
+  --figma-color-icon-tooltip-onselected: #ffffff;
+  --figma-color-icon-tooltip-pressed: #f65009;
+  --figma-color-icon-tooltip-secondary: #ffffffb2;
+  --figma-color-icon-tooltip-secondary-hover: #ffffff;
+  --figma-color-icon-tooltip-selected: #ffa27a;
+  --figma-color-icon-tooltip-selected-secondary: #ffa27a;
+  --figma-color-icon-tooltip-selected-tertiary: #ffa27a;
+  --figma-color-icon-tooltip-tertiary: #ffffff66;
+  --figma-color-icon-tooltip-tertiary-hover: #ffffff;
+  --figma-color-icon-tooltip-warning: #f3c11b;
+  --figma-color-icon-warning: #f3c11b;
+  --figma-color-icon-warning-pressed: #f7d15f;
+  --figma-color-icon-warning-secondary: #f3c11b;
+  --figma-color-icon-warning-tertiary: #f3c11b;
+  --figma-color-icondesignfilesecondary: #7cc4f8;
+  --figma-color-iconfigjamfilesecondary: #d1a8ff;
+  --figma-color-iconondarkcanvas: #ffffffe5;
+  --figma-color-icononlightcanvas: #000000e5;
+  --figma-color-icononvoting: #000000e5;
+  --figma-color-iconprototypefile: #757575;
+  --figma-color-iconprototypefilesecondary: #ffffff;
+  --figma-color-iconpublishedfile: #757575;
+  --figma-color-iconpublishedfilesecondary: #b3b3b3;
+  --figma-color-loading: #ffffff1a;
+  --figma-color-loadingmenu: #ffffff1a;
+  --figma-color-loadingsecondary: #ffffff0d;
+  --figma-color-loadingsecondarymenu: #ffffff0d;
+  --figma-color-modalbackdrop: #00000080;
+  --figma-color-multiplayerblue: #0a6dc2;
+  --figma-color-multiplayerbluehover: #105cad;
+  --figma-color-multiplayerbluesecondary: #184591;
+  --figma-color-multiplayergreen: #198f51;
+  --figma-color-multiplayergreenhover: #078348;
+  --figma-color-multiplayergreensecondary: #0a4c2d;
+  --figma-color-multiplayergrey: #667799;
+  --figma-color-multiplayergreyhover: #536383;
+  --figma-color-multiplayergreysecondary: #394360;
+  --figma-color-multiplayerpink: #f316b0;
+  --figma-color-multiplayerpinkhover: #d01b9c;
+  --figma-color-multiplayerpinksecondary: #68275e;
+  --figma-color-multiplayerpurple: #8a38f5;
+  --figma-color-multiplayerpurplehover: #7a2ed6;
+  --figma-color-multiplayerpurplesecondary: #50297a;
+  --figma-color-multiplayerred: #e03e1a;
+  --figma-color-multiplayerredhover: #c4381c;
+  --figma-color-multiplayerredsecondary: #7c2622;
+  --figma-color-multiplayeryellow: #f3c11b;
+  --figma-color-multiplayeryellowhover: #f2b50d;
+  --figma-color-multiplayeryellowsecondary: #c58011;
+  --figma-color-nodehandle: #7cc4f8;
+  --figma-color-prototypeloadingbackdrop: #000000e5;
+  --figma-color-scrollbar: #b3b3b380;
+  --figma-color-shadow: #00000099;
+  --figma-color-text: #ffffff;
+  --figma-color-text-assistive: #fc9ce0;
+  --figma-color-text-assistive-pressed: #fbb1ed;
+  --figma-color-text-assistive-secondary: #fc9ce0;
+  --figma-color-text-assistive-tertiary: #fc9ce0;
+  --figma-color-text-brand: #ffa27a;
+  --figma-color-text-brand-secondary: #ffa27a;
+  --figma-color-text-brand-tertiary: #ffa27a;
+  --figma-color-text-component: #d1a8ff;
+  --figma-color-text-component-pressed: #d6b6fb;
+  --figma-color-text-component-secondary: #7f699b;
+  --figma-color-text-component-tertiary: #7f699b;
+  --figma-color-text-danger: #fca397;
+  --figma-color-text-danger-secondary: #fca397;
+  --figma-color-text-danger-tertiary: #fca397;
+  --figma-color-text-design: #7cc4f8;
+  --figma-color-text-design-pressed: #a8d7fa;
+  --figma-color-text-design-secondary: #7cc4f8;
+  --figma-color-text-design-tertiary: #7cc4f8;
+  --figma-color-text-disabled: #ffffff66;
+  --figma-color-text-figjam: #c5b2dc;
+  --figma-color-text-figjam-pressed: #d6b6fb;
+  --figma-color-text-figjam-secondary: #7f699b;
+  --figma-color-text-figjam-tertiary: #7f699b;
+  --figma-color-text-handoff: #79d297;
+  --figma-color-text-handoff-secondary: #79d297;
+  --figma-color-text-handoff-tertiary: #79d297;
+  --figma-color-text-hover: #ffffff;
+  --figma-color-text-measure: #fca397;
+  --figma-color-text-measure-secondary: #fca397;
+  --figma-color-text-measure-tertiary: #fca397;
+  --figma-color-text-menu: #ffffff;
+  --figma-color-text-menu-danger: #fca397;
+  --figma-color-text-menu-disabled: #ffffff66;
+  --figma-color-text-menu-hover: #ffffff;
+  --figma-color-text-menu-ondisabled: #1e1e1e;
+  --figma-color-text-menu-onselected: #ffffff;
+  --figma-color-text-menu-secondary: #ffffffb2;
+  --figma-color-text-menu-secondary-hover: #ffffff;
+  --figma-color-text-menu-selected: #ffa27a;
+  --figma-color-text-menu-selected-secondary: #ffa27a;
+  --figma-color-text-menu-selected-tertiary: #ffa27a;
+  --figma-color-text-menu-tertiary: #ffffff66;
+  --figma-color-text-menu-tertiary-hover: #ffffff;
+  --figma-color-text-menu-warning: #f7d15f;
+  --figma-color-text-onassistive: #ffffff;
+  --figma-color-text-onassistive-secondary: #ffffffcc;
+  --figma-color-text-onassistive-tertiary: #ffffff66;
+  --figma-color-text-onbrand: #ffffff;
+  --figma-color-text-onbrand-secondary: #ffffffcc;
+  --figma-color-text-onbrand-tertiary: #ffffff66;
+  --figma-color-text-oncomponent: #ffffff;
+  --figma-color-text-oncomponent-secondary: #ffffffcc;
+  --figma-color-text-oncomponent-tertiary: #ffffff66;
+  --figma-color-text-ondanger: #ffffff;
+  --figma-color-text-ondanger-secondary: #ffffffcc;
+  --figma-color-text-ondanger-tertiary: #ffffff66;
+  --figma-color-text-ondesign: #ffffff;
+  --figma-color-text-ondesign-secondary: #ffffffcc;
+  --figma-color-text-ondesign-tertiary: #ffffff66;
+  --figma-color-text-ondisabled: #2c2c2c;
+  --figma-color-text-onfigjam: #ffffff;
+  --figma-color-text-onfigjam-secondary: #ffffffcc;
+  --figma-color-text-onfigjam-tertiary: #ffffff66;
+  --figma-color-text-oninverse: #000000e5;
+  --figma-color-text-onmeasure: #ffffff;
+  --figma-color-text-onmeasure-secondary: #ffffffcc;
+  --figma-color-text-onmeasure-tertiary: #ffffff66;
+  --figma-color-text-onselected: #ffffffe5;
+  --figma-color-text-onselected-secondary: #ffffffb2;
+  --figma-color-text-onselected-strong: #ffffff;
+  --figma-color-text-onselected-tertiary: #ffffff66;
+  --figma-color-text-onsuccess: #ffffff;
+  --figma-color-text-onsuccess-secondary: #ffffffcc;
+  --figma-color-text-onsuccess-tertiary: #ffffff66;
+  --figma-color-text-onwarning: #000000e5;
+  --figma-color-text-onwarning-secondary: #00000080;
+  --figma-color-text-onwarning-tertiary: #0000004d;
+  --figma-color-text-secondary: #ffffffb2;
+  --figma-color-text-secondary-hover: #ffffff;
+  --figma-color-text-selected: #ffa27a;
+  --figma-color-text-selected-secondary: #ffa27a;
+  --figma-color-text-selected-tertiary: #ffa27a;
+  --figma-color-text-success: #79d297;
+  --figma-color-text-success-secondary: #79d297;
+  --figma-color-text-success-tertiary: #79d297;
+  --figma-color-text-tertiary: #ffffff66;
+  --figma-color-text-tertiary-hover: #ffffff;
+  --figma-color-text-toolbar: #ffffff;
+  --figma-color-text-toolbar-danger: #fca397;
+  --figma-color-text-toolbar-disabled: #ffffff66;
+  --figma-color-text-toolbar-hover: #ffffff;
+  --figma-color-text-toolbar-ondisabled: #2c2c2c;
+  --figma-color-text-toolbar-onselected: #ffffff;
+  --figma-color-text-toolbar-secondary: #ffffffb2;
+  --figma-color-text-toolbar-secondary-hover: #ffffff;
+  --figma-color-text-toolbar-selected: #ffa27a;
+  --figma-color-text-toolbar-selected-secondary: #ffa27a;
+  --figma-color-text-toolbar-selected-tertiary: #ffa27a;
+  --figma-color-text-toolbar-tertiary: #ffffff66;
+  --figma-color-text-toolbar-tertiary-hover: #ffffff;
+  --figma-color-text-toolbar-warning: #f7d15f;
+  --figma-color-text-tooltip: #ffffff;
+  --figma-color-text-tooltip-danger: #fca397;
+  --figma-color-text-tooltip-disabled: #ffffff66;
+  --figma-color-text-tooltip-hover: #ffffff;
+  --figma-color-text-tooltip-ondisabled: #1e1e1e;
+  --figma-color-text-tooltip-onselected: #ffffff;
+  --figma-color-text-tooltip-secondary: #ffffffb2;
+  --figma-color-text-tooltip-secondary-hover: #ffffff;
+  --figma-color-text-tooltip-selected: #ffa27a;
+  --figma-color-text-tooltip-selected-secondary: #ffa27a;
+  --figma-color-text-tooltip-selected-tertiary: #ffa27a;
+  --figma-color-text-tooltip-tertiary: #ffffff66;
+  --figma-color-text-tooltip-tertiary-hover: #ffffff;
+  --figma-color-text-tooltip-warning: #f7d15f;
+  --figma-color-text-warning: #f7d15f;
+  --figma-color-text-warning-secondary: #f7d15f;
+  --figma-color-text-warning-tertiary: #f7d15f;
+  --figma-color-texthighlight: #0d99ff66;
+  --figma-color-textondarkcanvas: #ffffffe5;
+  --figma-color-textondarkcanvassecondary: #ffffffb2;
+  --figma-color-textonlightcanvas: #000000e5;
+  --figma-color-textonlightcanvassecondary: #0000004d;
+  --figma-color-textonmultiplayerblue: #ffffff;
+  --figma-color-textonmultiplayergreen: #ffffff;
+  --figma-color-textonmultiplayergrey: #ffffff;
+  --figma-color-textonmultiplayerpink: #ffffff;
+  --figma-color-textonmultiplayerpurple: #ffffff;
+  --figma-color-textonmultiplayerred: #ffffff;
+  --figma-color-textonmultiplayeryellow: #000000e5;
+  --figma-color-textonvoting: #000000e5;
+  --figma-elevation-100: 0px 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3), inset 0px 0.5px 0px rgba(255, 255, 255, 0.1), 0px 0px 0.5px rgba(0, 0, 0, 0.5);
+  --figma-elevation-200: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3), 0px 3px 8px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-elevation-300: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3), 0px 5px 12px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-elevation-400: 0px 2px 5px rgba(0, 0, 0, 0.35), inset 0px 0px 0.5px rgba(255, 255, 255, 0.35), 0px 10px 16px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-elevation-500: 0px 3px 5px rgba(0, 0, 0, 0.35), inset 0px 0px 0.5px rgba(255, 255, 255, 0.35), 0px 10px 24px rgba(0, 0, 0, 0.45), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
+  --figma-shadow-tooltip: var(--figma-elevation-300);
+  --figma-shadow-menu: var(--figma-elevation-400);
+  --figma-shadow-modal: var(--figma-elevation-500);
+}
diff --git a/packages/theme/src/css/utilities.css b/packages/theme/src/css/utilities.css
new file mode 100644
index 0000000..e85a909
--- /dev/null
+++ b/packages/theme/src/css/utilities.css
@@ -0,0 +1,13111 @@
+@utility bg-figma {
+  background-color: var(--figma-color-bg);
+}
+
+@utility bg-figma-bg {
+  background-color: var(--figma-color-bg);
+}
+
+@utility text-figma-bg {
+  color: var(--figma-color-bg);
+}
+
+@utility border-figma-bg {
+  border-color: var(--figma-color-bg);
+}
+
+@utility outline-figma-bg {
+  outline-color: var(--figma-color-bg);
+}
+
+@utility fill-figma-bg {
+  fill: var(--figma-color-bg);
+}
+
+@utility stroke-figma-bg {
+  stroke: var(--figma-color-bg);
+}
+
+@utility icon-figma-bg {
+  --color-icon: var(--figma-color-bg);
+}
+
+@utility bg-figma-assistive {
+  background-color: var(--figma-color-bg-assistive);
+}
+
+@utility bg-figma-bg-assistive {
+  background-color: var(--figma-color-bg-assistive);
+}
+
+@utility text-figma-bg-assistive {
+  color: var(--figma-color-bg-assistive);
+}
+
+@utility border-figma-bg-assistive {
+  border-color: var(--figma-color-bg-assistive);
+}
+
+@utility outline-figma-bg-assistive {
+  outline-color: var(--figma-color-bg-assistive);
+}
+
+@utility fill-figma-bg-assistive {
+  fill: var(--figma-color-bg-assistive);
+}
+
+@utility stroke-figma-bg-assistive {
+  stroke: var(--figma-color-bg-assistive);
+}
+
+@utility icon-figma-bg-assistive {
+  --color-icon: var(--figma-color-bg-assistive);
+}
+
+@utility bg-figma-assistive-hover {
+  background-color: var(--figma-color-bg-assistive-hover);
+}
+
+@utility bg-figma-bg-assistive-hover {
+  background-color: var(--figma-color-bg-assistive-hover);
+}
+
+@utility text-figma-bg-assistive-hover {
+  color: var(--figma-color-bg-assistive-hover);
+}
+
+@utility border-figma-bg-assistive-hover {
+  border-color: var(--figma-color-bg-assistive-hover);
+}
+
+@utility outline-figma-bg-assistive-hover {
+  outline-color: var(--figma-color-bg-assistive-hover);
+}
+
+@utility fill-figma-bg-assistive-hover {
+  fill: var(--figma-color-bg-assistive-hover);
+}
+
+@utility stroke-figma-bg-assistive-hover {
+  stroke: var(--figma-color-bg-assistive-hover);
+}
+
+@utility icon-figma-bg-assistive-hover {
+  --color-icon: var(--figma-color-bg-assistive-hover);
+}
+
+@utility bg-figma-assistive-pressed {
+  background-color: var(--figma-color-bg-assistive-pressed);
+}
+
+@utility bg-figma-bg-assistive-pressed {
+  background-color: var(--figma-color-bg-assistive-pressed);
+}
+
+@utility text-figma-bg-assistive-pressed {
+  color: var(--figma-color-bg-assistive-pressed);
+}
+
+@utility border-figma-bg-assistive-pressed {
+  border-color: var(--figma-color-bg-assistive-pressed);
+}
+
+@utility outline-figma-bg-assistive-pressed {
+  outline-color: var(--figma-color-bg-assistive-pressed);
+}
+
+@utility fill-figma-bg-assistive-pressed {
+  fill: var(--figma-color-bg-assistive-pressed);
+}
+
+@utility stroke-figma-bg-assistive-pressed {
+  stroke: var(--figma-color-bg-assistive-pressed);
+}
+
+@utility icon-figma-bg-assistive-pressed {
+  --color-icon: var(--figma-color-bg-assistive-pressed);
+}
+
+@utility bg-figma-assistive-secondary {
+  background-color: var(--figma-color-bg-assistive-secondary);
+}
+
+@utility bg-figma-bg-assistive-secondary {
+  background-color: var(--figma-color-bg-assistive-secondary);
+}
+
+@utility text-figma-bg-assistive-secondary {
+  color: var(--figma-color-bg-assistive-secondary);
+}
+
+@utility border-figma-bg-assistive-secondary {
+  border-color: var(--figma-color-bg-assistive-secondary);
+}
+
+@utility outline-figma-bg-assistive-secondary {
+  outline-color: var(--figma-color-bg-assistive-secondary);
+}
+
+@utility fill-figma-bg-assistive-secondary {
+  fill: var(--figma-color-bg-assistive-secondary);
+}
+
+@utility stroke-figma-bg-assistive-secondary {
+  stroke: var(--figma-color-bg-assistive-secondary);
+}
+
+@utility icon-figma-bg-assistive-secondary {
+  --color-icon: var(--figma-color-bg-assistive-secondary);
+}
+
+@utility bg-figma-assistive-tertiary {
+  background-color: var(--figma-color-bg-assistive-tertiary);
+}
+
+@utility bg-figma-bg-assistive-tertiary {
+  background-color: var(--figma-color-bg-assistive-tertiary);
+}
+
+@utility text-figma-bg-assistive-tertiary {
+  color: var(--figma-color-bg-assistive-tertiary);
+}
+
+@utility border-figma-bg-assistive-tertiary {
+  border-color: var(--figma-color-bg-assistive-tertiary);
+}
+
+@utility outline-figma-bg-assistive-tertiary {
+  outline-color: var(--figma-color-bg-assistive-tertiary);
+}
+
+@utility fill-figma-bg-assistive-tertiary {
+  fill: var(--figma-color-bg-assistive-tertiary);
+}
+
+@utility stroke-figma-bg-assistive-tertiary {
+  stroke: var(--figma-color-bg-assistive-tertiary);
+}
+
+@utility icon-figma-bg-assistive-tertiary {
+  --color-icon: var(--figma-color-bg-assistive-tertiary);
+}
+
+@utility bg-figma-brand {
+  background-color: var(--figma-color-bg-brand);
+}
+
+@utility bg-figma-bg-brand {
+  background-color: var(--figma-color-bg-brand);
+}
+
+@utility text-figma-bg-brand {
+  color: var(--figma-color-bg-brand);
+}
+
+@utility border-figma-bg-brand {
+  border-color: var(--figma-color-bg-brand);
+}
+
+@utility outline-figma-bg-brand {
+  outline-color: var(--figma-color-bg-brand);
+}
+
+@utility fill-figma-bg-brand {
+  fill: var(--figma-color-bg-brand);
+}
+
+@utility stroke-figma-bg-brand {
+  stroke: var(--figma-color-bg-brand);
+}
+
+@utility icon-figma-bg-brand {
+  --color-icon: var(--figma-color-bg-brand);
+}
+
+@utility bg-figma-brand-hover {
+  background-color: var(--figma-color-bg-brand-hover);
+}
+
+@utility bg-figma-bg-brand-hover {
+  background-color: var(--figma-color-bg-brand-hover);
+}
+
+@utility text-figma-bg-brand-hover {
+  color: var(--figma-color-bg-brand-hover);
+}
+
+@utility border-figma-bg-brand-hover {
+  border-color: var(--figma-color-bg-brand-hover);
+}
+
+@utility outline-figma-bg-brand-hover {
+  outline-color: var(--figma-color-bg-brand-hover);
+}
+
+@utility fill-figma-bg-brand-hover {
+  fill: var(--figma-color-bg-brand-hover);
+}
+
+@utility stroke-figma-bg-brand-hover {
+  stroke: var(--figma-color-bg-brand-hover);
+}
+
+@utility icon-figma-bg-brand-hover {
+  --color-icon: var(--figma-color-bg-brand-hover);
+}
+
+@utility bg-figma-brand-pressed {
+  background-color: var(--figma-color-bg-brand-pressed);
+}
+
+@utility bg-figma-bg-brand-pressed {
+  background-color: var(--figma-color-bg-brand-pressed);
+}
+
+@utility text-figma-bg-brand-pressed {
+  color: var(--figma-color-bg-brand-pressed);
+}
+
+@utility border-figma-bg-brand-pressed {
+  border-color: var(--figma-color-bg-brand-pressed);
+}
+
+@utility outline-figma-bg-brand-pressed {
+  outline-color: var(--figma-color-bg-brand-pressed);
+}
+
+@utility fill-figma-bg-brand-pressed {
+  fill: var(--figma-color-bg-brand-pressed);
+}
+
+@utility stroke-figma-bg-brand-pressed {
+  stroke: var(--figma-color-bg-brand-pressed);
+}
+
+@utility icon-figma-bg-brand-pressed {
+  --color-icon: var(--figma-color-bg-brand-pressed);
+}
+
+@utility bg-figma-brand-secondary {
+  background-color: var(--figma-color-bg-brand-secondary);
+}
+
+@utility bg-figma-bg-brand-secondary {
+  background-color: var(--figma-color-bg-brand-secondary);
+}
+
+@utility text-figma-bg-brand-secondary {
+  color: var(--figma-color-bg-brand-secondary);
+}
+
+@utility border-figma-bg-brand-secondary {
+  border-color: var(--figma-color-bg-brand-secondary);
+}
+
+@utility outline-figma-bg-brand-secondary {
+  outline-color: var(--figma-color-bg-brand-secondary);
+}
+
+@utility fill-figma-bg-brand-secondary {
+  fill: var(--figma-color-bg-brand-secondary);
+}
+
+@utility stroke-figma-bg-brand-secondary {
+  stroke: var(--figma-color-bg-brand-secondary);
+}
+
+@utility icon-figma-bg-brand-secondary {
+  --color-icon: var(--figma-color-bg-brand-secondary);
+}
+
+@utility bg-figma-brand-tertiary {
+  background-color: var(--figma-color-bg-brand-tertiary);
+}
+
+@utility bg-figma-bg-brand-tertiary {
+  background-color: var(--figma-color-bg-brand-tertiary);
+}
+
+@utility text-figma-bg-brand-tertiary {
+  color: var(--figma-color-bg-brand-tertiary);
+}
+
+@utility border-figma-bg-brand-tertiary {
+  border-color: var(--figma-color-bg-brand-tertiary);
+}
+
+@utility outline-figma-bg-brand-tertiary {
+  outline-color: var(--figma-color-bg-brand-tertiary);
+}
+
+@utility fill-figma-bg-brand-tertiary {
+  fill: var(--figma-color-bg-brand-tertiary);
+}
+
+@utility stroke-figma-bg-brand-tertiary {
+  stroke: var(--figma-color-bg-brand-tertiary);
+}
+
+@utility icon-figma-bg-brand-tertiary {
+  --color-icon: var(--figma-color-bg-brand-tertiary);
+}
+
+@utility bg-figma-component {
+  background-color: var(--figma-color-bg-component);
+}
+
+@utility bg-figma-bg-component {
+  background-color: var(--figma-color-bg-component);
+}
+
+@utility text-figma-bg-component {
+  color: var(--figma-color-bg-component);
+}
+
+@utility border-figma-bg-component {
+  border-color: var(--figma-color-bg-component);
+}
+
+@utility outline-figma-bg-component {
+  outline-color: var(--figma-color-bg-component);
+}
+
+@utility fill-figma-bg-component {
+  fill: var(--figma-color-bg-component);
+}
+
+@utility stroke-figma-bg-component {
+  stroke: var(--figma-color-bg-component);
+}
+
+@utility icon-figma-bg-component {
+  --color-icon: var(--figma-color-bg-component);
+}
+
+@utility bg-figma-component-hover {
+  background-color: var(--figma-color-bg-component-hover);
+}
+
+@utility bg-figma-bg-component-hover {
+  background-color: var(--figma-color-bg-component-hover);
+}
+
+@utility text-figma-bg-component-hover {
+  color: var(--figma-color-bg-component-hover);
+}
+
+@utility border-figma-bg-component-hover {
+  border-color: var(--figma-color-bg-component-hover);
+}
+
+@utility outline-figma-bg-component-hover {
+  outline-color: var(--figma-color-bg-component-hover);
+}
+
+@utility fill-figma-bg-component-hover {
+  fill: var(--figma-color-bg-component-hover);
+}
+
+@utility stroke-figma-bg-component-hover {
+  stroke: var(--figma-color-bg-component-hover);
+}
+
+@utility icon-figma-bg-component-hover {
+  --color-icon: var(--figma-color-bg-component-hover);
+}
+
+@utility bg-figma-component-pressed {
+  background-color: var(--figma-color-bg-component-pressed);
+}
+
+@utility bg-figma-bg-component-pressed {
+  background-color: var(--figma-color-bg-component-pressed);
+}
+
+@utility text-figma-bg-component-pressed {
+  color: var(--figma-color-bg-component-pressed);
+}
+
+@utility border-figma-bg-component-pressed {
+  border-color: var(--figma-color-bg-component-pressed);
+}
+
+@utility outline-figma-bg-component-pressed {
+  outline-color: var(--figma-color-bg-component-pressed);
+}
+
+@utility fill-figma-bg-component-pressed {
+  fill: var(--figma-color-bg-component-pressed);
+}
+
+@utility stroke-figma-bg-component-pressed {
+  stroke: var(--figma-color-bg-component-pressed);
+}
+
+@utility icon-figma-bg-component-pressed {
+  --color-icon: var(--figma-color-bg-component-pressed);
+}
+
+@utility bg-figma-component-secondary {
+  background-color: var(--figma-color-bg-component-secondary);
+}
+
+@utility bg-figma-bg-component-secondary {
+  background-color: var(--figma-color-bg-component-secondary);
+}
+
+@utility text-figma-bg-component-secondary {
+  color: var(--figma-color-bg-component-secondary);
+}
+
+@utility border-figma-bg-component-secondary {
+  border-color: var(--figma-color-bg-component-secondary);
+}
+
+@utility outline-figma-bg-component-secondary {
+  outline-color: var(--figma-color-bg-component-secondary);
+}
+
+@utility fill-figma-bg-component-secondary {
+  fill: var(--figma-color-bg-component-secondary);
+}
+
+@utility stroke-figma-bg-component-secondary {
+  stroke: var(--figma-color-bg-component-secondary);
+}
+
+@utility icon-figma-bg-component-secondary {
+  --color-icon: var(--figma-color-bg-component-secondary);
+}
+
+@utility bg-figma-component-tertiary {
+  background-color: var(--figma-color-bg-component-tertiary);
+}
+
+@utility bg-figma-bg-component-tertiary {
+  background-color: var(--figma-color-bg-component-tertiary);
+}
+
+@utility text-figma-bg-component-tertiary {
+  color: var(--figma-color-bg-component-tertiary);
+}
+
+@utility border-figma-bg-component-tertiary {
+  border-color: var(--figma-color-bg-component-tertiary);
+}
+
+@utility outline-figma-bg-component-tertiary {
+  outline-color: var(--figma-color-bg-component-tertiary);
+}
+
+@utility fill-figma-bg-component-tertiary {
+  fill: var(--figma-color-bg-component-tertiary);
+}
+
+@utility stroke-figma-bg-component-tertiary {
+  stroke: var(--figma-color-bg-component-tertiary);
+}
+
+@utility icon-figma-bg-component-tertiary {
+  --color-icon: var(--figma-color-bg-component-tertiary);
+}
+
+@utility bg-figma-danger {
+  background-color: var(--figma-color-bg-danger);
+}
+
+@utility bg-figma-bg-danger {
+  background-color: var(--figma-color-bg-danger);
+}
+
+@utility text-figma-bg-danger {
+  color: var(--figma-color-bg-danger);
+}
+
+@utility border-figma-bg-danger {
+  border-color: var(--figma-color-bg-danger);
+}
+
+@utility outline-figma-bg-danger {
+  outline-color: var(--figma-color-bg-danger);
+}
+
+@utility fill-figma-bg-danger {
+  fill: var(--figma-color-bg-danger);
+}
+
+@utility stroke-figma-bg-danger {
+  stroke: var(--figma-color-bg-danger);
+}
+
+@utility icon-figma-bg-danger {
+  --color-icon: var(--figma-color-bg-danger);
+}
+
+@utility bg-figma-danger-hover {
+  background-color: var(--figma-color-bg-danger-hover);
+}
+
+@utility bg-figma-bg-danger-hover {
+  background-color: var(--figma-color-bg-danger-hover);
+}
+
+@utility text-figma-bg-danger-hover {
+  color: var(--figma-color-bg-danger-hover);
+}
+
+@utility border-figma-bg-danger-hover {
+  border-color: var(--figma-color-bg-danger-hover);
+}
+
+@utility outline-figma-bg-danger-hover {
+  outline-color: var(--figma-color-bg-danger-hover);
+}
+
+@utility fill-figma-bg-danger-hover {
+  fill: var(--figma-color-bg-danger-hover);
+}
+
+@utility stroke-figma-bg-danger-hover {
+  stroke: var(--figma-color-bg-danger-hover);
+}
+
+@utility icon-figma-bg-danger-hover {
+  --color-icon: var(--figma-color-bg-danger-hover);
+}
+
+@utility bg-figma-danger-pressed {
+  background-color: var(--figma-color-bg-danger-pressed);
+}
+
+@utility bg-figma-bg-danger-pressed {
+  background-color: var(--figma-color-bg-danger-pressed);
+}
+
+@utility text-figma-bg-danger-pressed {
+  color: var(--figma-color-bg-danger-pressed);
+}
+
+@utility border-figma-bg-danger-pressed {
+  border-color: var(--figma-color-bg-danger-pressed);
+}
+
+@utility outline-figma-bg-danger-pressed {
+  outline-color: var(--figma-color-bg-danger-pressed);
+}
+
+@utility fill-figma-bg-danger-pressed {
+  fill: var(--figma-color-bg-danger-pressed);
+}
+
+@utility stroke-figma-bg-danger-pressed {
+  stroke: var(--figma-color-bg-danger-pressed);
+}
+
+@utility icon-figma-bg-danger-pressed {
+  --color-icon: var(--figma-color-bg-danger-pressed);
+}
+
+@utility bg-figma-danger-secondary {
+  background-color: var(--figma-color-bg-danger-secondary);
+}
+
+@utility bg-figma-bg-danger-secondary {
+  background-color: var(--figma-color-bg-danger-secondary);
+}
+
+@utility text-figma-bg-danger-secondary {
+  color: var(--figma-color-bg-danger-secondary);
+}
+
+@utility border-figma-bg-danger-secondary {
+  border-color: var(--figma-color-bg-danger-secondary);
+}
+
+@utility outline-figma-bg-danger-secondary {
+  outline-color: var(--figma-color-bg-danger-secondary);
+}
+
+@utility fill-figma-bg-danger-secondary {
+  fill: var(--figma-color-bg-danger-secondary);
+}
+
+@utility stroke-figma-bg-danger-secondary {
+  stroke: var(--figma-color-bg-danger-secondary);
+}
+
+@utility icon-figma-bg-danger-secondary {
+  --color-icon: var(--figma-color-bg-danger-secondary);
+}
+
+@utility bg-figma-danger-tertiary {
+  background-color: var(--figma-color-bg-danger-tertiary);
+}
+
+@utility bg-figma-bg-danger-tertiary {
+  background-color: var(--figma-color-bg-danger-tertiary);
+}
+
+@utility text-figma-bg-danger-tertiary {
+  color: var(--figma-color-bg-danger-tertiary);
+}
+
+@utility border-figma-bg-danger-tertiary {
+  border-color: var(--figma-color-bg-danger-tertiary);
+}
+
+@utility outline-figma-bg-danger-tertiary {
+  outline-color: var(--figma-color-bg-danger-tertiary);
+}
+
+@utility fill-figma-bg-danger-tertiary {
+  fill: var(--figma-color-bg-danger-tertiary);
+}
+
+@utility stroke-figma-bg-danger-tertiary {
+  stroke: var(--figma-color-bg-danger-tertiary);
+}
+
+@utility icon-figma-bg-danger-tertiary {
+  --color-icon: var(--figma-color-bg-danger-tertiary);
+}
+
+@utility bg-figma-design {
+  background-color: var(--figma-color-bg-design);
+}
+
+@utility bg-figma-bg-design {
+  background-color: var(--figma-color-bg-design);
+}
+
+@utility text-figma-bg-design {
+  color: var(--figma-color-bg-design);
+}
+
+@utility border-figma-bg-design {
+  border-color: var(--figma-color-bg-design);
+}
+
+@utility outline-figma-bg-design {
+  outline-color: var(--figma-color-bg-design);
+}
+
+@utility fill-figma-bg-design {
+  fill: var(--figma-color-bg-design);
+}
+
+@utility stroke-figma-bg-design {
+  stroke: var(--figma-color-bg-design);
+}
+
+@utility icon-figma-bg-design {
+  --color-icon: var(--figma-color-bg-design);
+}
+
+@utility bg-figma-design-hover {
+  background-color: var(--figma-color-bg-design-hover);
+}
+
+@utility bg-figma-bg-design-hover {
+  background-color: var(--figma-color-bg-design-hover);
+}
+
+@utility text-figma-bg-design-hover {
+  color: var(--figma-color-bg-design-hover);
+}
+
+@utility border-figma-bg-design-hover {
+  border-color: var(--figma-color-bg-design-hover);
+}
+
+@utility outline-figma-bg-design-hover {
+  outline-color: var(--figma-color-bg-design-hover);
+}
+
+@utility fill-figma-bg-design-hover {
+  fill: var(--figma-color-bg-design-hover);
+}
+
+@utility stroke-figma-bg-design-hover {
+  stroke: var(--figma-color-bg-design-hover);
+}
+
+@utility icon-figma-bg-design-hover {
+  --color-icon: var(--figma-color-bg-design-hover);
+}
+
+@utility bg-figma-design-pressed {
+  background-color: var(--figma-color-bg-design-pressed);
+}
+
+@utility bg-figma-bg-design-pressed {
+  background-color: var(--figma-color-bg-design-pressed);
+}
+
+@utility text-figma-bg-design-pressed {
+  color: var(--figma-color-bg-design-pressed);
+}
+
+@utility border-figma-bg-design-pressed {
+  border-color: var(--figma-color-bg-design-pressed);
+}
+
+@utility outline-figma-bg-design-pressed {
+  outline-color: var(--figma-color-bg-design-pressed);
+}
+
+@utility fill-figma-bg-design-pressed {
+  fill: var(--figma-color-bg-design-pressed);
+}
+
+@utility stroke-figma-bg-design-pressed {
+  stroke: var(--figma-color-bg-design-pressed);
+}
+
+@utility icon-figma-bg-design-pressed {
+  --color-icon: var(--figma-color-bg-design-pressed);
+}
+
+@utility bg-figma-design-secondary {
+  background-color: var(--figma-color-bg-design-secondary);
+}
+
+@utility bg-figma-bg-design-secondary {
+  background-color: var(--figma-color-bg-design-secondary);
+}
+
+@utility text-figma-bg-design-secondary {
+  color: var(--figma-color-bg-design-secondary);
+}
+
+@utility border-figma-bg-design-secondary {
+  border-color: var(--figma-color-bg-design-secondary);
+}
+
+@utility outline-figma-bg-design-secondary {
+  outline-color: var(--figma-color-bg-design-secondary);
+}
+
+@utility fill-figma-bg-design-secondary {
+  fill: var(--figma-color-bg-design-secondary);
+}
+
+@utility stroke-figma-bg-design-secondary {
+  stroke: var(--figma-color-bg-design-secondary);
+}
+
+@utility icon-figma-bg-design-secondary {
+  --color-icon: var(--figma-color-bg-design-secondary);
+}
+
+@utility bg-figma-design-tertiary {
+  background-color: var(--figma-color-bg-design-tertiary);
+}
+
+@utility bg-figma-bg-design-tertiary {
+  background-color: var(--figma-color-bg-design-tertiary);
+}
+
+@utility text-figma-bg-design-tertiary {
+  color: var(--figma-color-bg-design-tertiary);
+}
+
+@utility border-figma-bg-design-tertiary {
+  border-color: var(--figma-color-bg-design-tertiary);
+}
+
+@utility outline-figma-bg-design-tertiary {
+  outline-color: var(--figma-color-bg-design-tertiary);
+}
+
+@utility fill-figma-bg-design-tertiary {
+  fill: var(--figma-color-bg-design-tertiary);
+}
+
+@utility stroke-figma-bg-design-tertiary {
+  stroke: var(--figma-color-bg-design-tertiary);
+}
+
+@utility icon-figma-bg-design-tertiary {
+  --color-icon: var(--figma-color-bg-design-tertiary);
+}
+
+@utility bg-figma-disabled {
+  background-color: var(--figma-color-bg-disabled);
+}
+
+@utility bg-figma-bg-disabled {
+  background-color: var(--figma-color-bg-disabled);
+}
+
+@utility text-figma-bg-disabled {
+  color: var(--figma-color-bg-disabled);
+}
+
+@utility border-figma-bg-disabled {
+  border-color: var(--figma-color-bg-disabled);
+}
+
+@utility outline-figma-bg-disabled {
+  outline-color: var(--figma-color-bg-disabled);
+}
+
+@utility fill-figma-bg-disabled {
+  fill: var(--figma-color-bg-disabled);
+}
+
+@utility stroke-figma-bg-disabled {
+  stroke: var(--figma-color-bg-disabled);
+}
+
+@utility icon-figma-bg-disabled {
+  --color-icon: var(--figma-color-bg-disabled);
+}
+
+@utility bg-figma-disabled-secondary {
+  background-color: var(--figma-color-bg-disabled-secondary);
+}
+
+@utility bg-figma-bg-disabled-secondary {
+  background-color: var(--figma-color-bg-disabled-secondary);
+}
+
+@utility text-figma-bg-disabled-secondary {
+  color: var(--figma-color-bg-disabled-secondary);
+}
+
+@utility border-figma-bg-disabled-secondary {
+  border-color: var(--figma-color-bg-disabled-secondary);
+}
+
+@utility outline-figma-bg-disabled-secondary {
+  outline-color: var(--figma-color-bg-disabled-secondary);
+}
+
+@utility fill-figma-bg-disabled-secondary {
+  fill: var(--figma-color-bg-disabled-secondary);
+}
+
+@utility stroke-figma-bg-disabled-secondary {
+  stroke: var(--figma-color-bg-disabled-secondary);
+}
+
+@utility icon-figma-bg-disabled-secondary {
+  --color-icon: var(--figma-color-bg-disabled-secondary);
+}
+
+@utility bg-figma-figjam {
+  background-color: var(--figma-color-bg-figjam);
+}
+
+@utility bg-figma-bg-figjam {
+  background-color: var(--figma-color-bg-figjam);
+}
+
+@utility text-figma-bg-figjam {
+  color: var(--figma-color-bg-figjam);
+}
+
+@utility border-figma-bg-figjam {
+  border-color: var(--figma-color-bg-figjam);
+}
+
+@utility outline-figma-bg-figjam {
+  outline-color: var(--figma-color-bg-figjam);
+}
+
+@utility fill-figma-bg-figjam {
+  fill: var(--figma-color-bg-figjam);
+}
+
+@utility stroke-figma-bg-figjam {
+  stroke: var(--figma-color-bg-figjam);
+}
+
+@utility icon-figma-bg-figjam {
+  --color-icon: var(--figma-color-bg-figjam);
+}
+
+@utility bg-figma-figjam-hover {
+  background-color: var(--figma-color-bg-figjam-hover);
+}
+
+@utility bg-figma-bg-figjam-hover {
+  background-color: var(--figma-color-bg-figjam-hover);
+}
+
+@utility text-figma-bg-figjam-hover {
+  color: var(--figma-color-bg-figjam-hover);
+}
+
+@utility border-figma-bg-figjam-hover {
+  border-color: var(--figma-color-bg-figjam-hover);
+}
+
+@utility outline-figma-bg-figjam-hover {
+  outline-color: var(--figma-color-bg-figjam-hover);
+}
+
+@utility fill-figma-bg-figjam-hover {
+  fill: var(--figma-color-bg-figjam-hover);
+}
+
+@utility stroke-figma-bg-figjam-hover {
+  stroke: var(--figma-color-bg-figjam-hover);
+}
+
+@utility icon-figma-bg-figjam-hover {
+  --color-icon: var(--figma-color-bg-figjam-hover);
+}
+
+@utility bg-figma-figjam-pressed {
+  background-color: var(--figma-color-bg-figjam-pressed);
+}
+
+@utility bg-figma-bg-figjam-pressed {
+  background-color: var(--figma-color-bg-figjam-pressed);
+}
+
+@utility text-figma-bg-figjam-pressed {
+  color: var(--figma-color-bg-figjam-pressed);
+}
+
+@utility border-figma-bg-figjam-pressed {
+  border-color: var(--figma-color-bg-figjam-pressed);
+}
+
+@utility outline-figma-bg-figjam-pressed {
+  outline-color: var(--figma-color-bg-figjam-pressed);
+}
+
+@utility fill-figma-bg-figjam-pressed {
+  fill: var(--figma-color-bg-figjam-pressed);
+}
+
+@utility stroke-figma-bg-figjam-pressed {
+  stroke: var(--figma-color-bg-figjam-pressed);
+}
+
+@utility icon-figma-bg-figjam-pressed {
+  --color-icon: var(--figma-color-bg-figjam-pressed);
+}
+
+@utility bg-figma-figjam-secondary {
+  background-color: var(--figma-color-bg-figjam-secondary);
+}
+
+@utility bg-figma-bg-figjam-secondary {
+  background-color: var(--figma-color-bg-figjam-secondary);
+}
+
+@utility text-figma-bg-figjam-secondary {
+  color: var(--figma-color-bg-figjam-secondary);
+}
+
+@utility border-figma-bg-figjam-secondary {
+  border-color: var(--figma-color-bg-figjam-secondary);
+}
+
+@utility outline-figma-bg-figjam-secondary {
+  outline-color: var(--figma-color-bg-figjam-secondary);
+}
+
+@utility fill-figma-bg-figjam-secondary {
+  fill: var(--figma-color-bg-figjam-secondary);
+}
+
+@utility stroke-figma-bg-figjam-secondary {
+  stroke: var(--figma-color-bg-figjam-secondary);
+}
+
+@utility icon-figma-bg-figjam-secondary {
+  --color-icon: var(--figma-color-bg-figjam-secondary);
+}
+
+@utility bg-figma-figjam-tertiary {
+  background-color: var(--figma-color-bg-figjam-tertiary);
+}
+
+@utility bg-figma-bg-figjam-tertiary {
+  background-color: var(--figma-color-bg-figjam-tertiary);
+}
+
+@utility text-figma-bg-figjam-tertiary {
+  color: var(--figma-color-bg-figjam-tertiary);
+}
+
+@utility border-figma-bg-figjam-tertiary {
+  border-color: var(--figma-color-bg-figjam-tertiary);
+}
+
+@utility outline-figma-bg-figjam-tertiary {
+  outline-color: var(--figma-color-bg-figjam-tertiary);
+}
+
+@utility fill-figma-bg-figjam-tertiary {
+  fill: var(--figma-color-bg-figjam-tertiary);
+}
+
+@utility stroke-figma-bg-figjam-tertiary {
+  stroke: var(--figma-color-bg-figjam-tertiary);
+}
+
+@utility icon-figma-bg-figjam-tertiary {
+  --color-icon: var(--figma-color-bg-figjam-tertiary);
+}
+
+@utility bg-figma-handoff {
+  background-color: var(--figma-color-bg-handoff);
+}
+
+@utility bg-figma-bg-handoff {
+  background-color: var(--figma-color-bg-handoff);
+}
+
+@utility text-figma-bg-handoff {
+  color: var(--figma-color-bg-handoff);
+}
+
+@utility border-figma-bg-handoff {
+  border-color: var(--figma-color-bg-handoff);
+}
+
+@utility outline-figma-bg-handoff {
+  outline-color: var(--figma-color-bg-handoff);
+}
+
+@utility fill-figma-bg-handoff {
+  fill: var(--figma-color-bg-handoff);
+}
+
+@utility stroke-figma-bg-handoff {
+  stroke: var(--figma-color-bg-handoff);
+}
+
+@utility icon-figma-bg-handoff {
+  --color-icon: var(--figma-color-bg-handoff);
+}
+
+@utility bg-figma-handoff-hover {
+  background-color: var(--figma-color-bg-handoff-hover);
+}
+
+@utility bg-figma-bg-handoff-hover {
+  background-color: var(--figma-color-bg-handoff-hover);
+}
+
+@utility text-figma-bg-handoff-hover {
+  color: var(--figma-color-bg-handoff-hover);
+}
+
+@utility border-figma-bg-handoff-hover {
+  border-color: var(--figma-color-bg-handoff-hover);
+}
+
+@utility outline-figma-bg-handoff-hover {
+  outline-color: var(--figma-color-bg-handoff-hover);
+}
+
+@utility fill-figma-bg-handoff-hover {
+  fill: var(--figma-color-bg-handoff-hover);
+}
+
+@utility stroke-figma-bg-handoff-hover {
+  stroke: var(--figma-color-bg-handoff-hover);
+}
+
+@utility icon-figma-bg-handoff-hover {
+  --color-icon: var(--figma-color-bg-handoff-hover);
+}
+
+@utility bg-figma-handoff-pressed {
+  background-color: var(--figma-color-bg-handoff-pressed);
+}
+
+@utility bg-figma-bg-handoff-pressed {
+  background-color: var(--figma-color-bg-handoff-pressed);
+}
+
+@utility text-figma-bg-handoff-pressed {
+  color: var(--figma-color-bg-handoff-pressed);
+}
+
+@utility border-figma-bg-handoff-pressed {
+  border-color: var(--figma-color-bg-handoff-pressed);
+}
+
+@utility outline-figma-bg-handoff-pressed {
+  outline-color: var(--figma-color-bg-handoff-pressed);
+}
+
+@utility fill-figma-bg-handoff-pressed {
+  fill: var(--figma-color-bg-handoff-pressed);
+}
+
+@utility stroke-figma-bg-handoff-pressed {
+  stroke: var(--figma-color-bg-handoff-pressed);
+}
+
+@utility icon-figma-bg-handoff-pressed {
+  --color-icon: var(--figma-color-bg-handoff-pressed);
+}
+
+@utility bg-figma-handoff-secondary {
+  background-color: var(--figma-color-bg-handoff-secondary);
+}
+
+@utility bg-figma-bg-handoff-secondary {
+  background-color: var(--figma-color-bg-handoff-secondary);
+}
+
+@utility text-figma-bg-handoff-secondary {
+  color: var(--figma-color-bg-handoff-secondary);
+}
+
+@utility border-figma-bg-handoff-secondary {
+  border-color: var(--figma-color-bg-handoff-secondary);
+}
+
+@utility outline-figma-bg-handoff-secondary {
+  outline-color: var(--figma-color-bg-handoff-secondary);
+}
+
+@utility fill-figma-bg-handoff-secondary {
+  fill: var(--figma-color-bg-handoff-secondary);
+}
+
+@utility stroke-figma-bg-handoff-secondary {
+  stroke: var(--figma-color-bg-handoff-secondary);
+}
+
+@utility icon-figma-bg-handoff-secondary {
+  --color-icon: var(--figma-color-bg-handoff-secondary);
+}
+
+@utility bg-figma-handoff-tertiary {
+  background-color: var(--figma-color-bg-handoff-tertiary);
+}
+
+@utility bg-figma-bg-handoff-tertiary {
+  background-color: var(--figma-color-bg-handoff-tertiary);
+}
+
+@utility text-figma-bg-handoff-tertiary {
+  color: var(--figma-color-bg-handoff-tertiary);
+}
+
+@utility border-figma-bg-handoff-tertiary {
+  border-color: var(--figma-color-bg-handoff-tertiary);
+}
+
+@utility outline-figma-bg-handoff-tertiary {
+  outline-color: var(--figma-color-bg-handoff-tertiary);
+}
+
+@utility fill-figma-bg-handoff-tertiary {
+  fill: var(--figma-color-bg-handoff-tertiary);
+}
+
+@utility stroke-figma-bg-handoff-tertiary {
+  stroke: var(--figma-color-bg-handoff-tertiary);
+}
+
+@utility icon-figma-bg-handoff-tertiary {
+  --color-icon: var(--figma-color-bg-handoff-tertiary);
+}
+
+@utility bg-figma-hover {
+  background-color: var(--figma-color-bg-hover);
+}
+
+@utility bg-figma-bg-hover {
+  background-color: var(--figma-color-bg-hover);
+}
+
+@utility text-figma-bg-hover {
+  color: var(--figma-color-bg-hover);
+}
+
+@utility border-figma-bg-hover {
+  border-color: var(--figma-color-bg-hover);
+}
+
+@utility outline-figma-bg-hover {
+  outline-color: var(--figma-color-bg-hover);
+}
+
+@utility fill-figma-bg-hover {
+  fill: var(--figma-color-bg-hover);
+}
+
+@utility stroke-figma-bg-hover {
+  stroke: var(--figma-color-bg-hover);
+}
+
+@utility icon-figma-bg-hover {
+  --color-icon: var(--figma-color-bg-hover);
+}
+
+@utility bg-figma-info {
+  background-color: var(--figma-color-bg-info);
+}
+
+@utility bg-figma-bg-info {
+  background-color: var(--figma-color-bg-info);
+}
+
+@utility text-figma-bg-info {
+  color: var(--figma-color-bg-info);
+}
+
+@utility border-figma-bg-info {
+  border-color: var(--figma-color-bg-info);
+}
+
+@utility outline-figma-bg-info {
+  outline-color: var(--figma-color-bg-info);
+}
+
+@utility fill-figma-bg-info {
+  fill: var(--figma-color-bg-info);
+}
+
+@utility stroke-figma-bg-info {
+  stroke: var(--figma-color-bg-info);
+}
+
+@utility icon-figma-bg-info {
+  --color-icon: var(--figma-color-bg-info);
+}
+
+@utility bg-figma-inverse {
+  background-color: var(--figma-color-bg-inverse);
+}
+
+@utility bg-figma-bg-inverse {
+  background-color: var(--figma-color-bg-inverse);
+}
+
+@utility text-figma-bg-inverse {
+  color: var(--figma-color-bg-inverse);
+}
+
+@utility border-figma-bg-inverse {
+  border-color: var(--figma-color-bg-inverse);
+}
+
+@utility outline-figma-bg-inverse {
+  outline-color: var(--figma-color-bg-inverse);
+}
+
+@utility fill-figma-bg-inverse {
+  fill: var(--figma-color-bg-inverse);
+}
+
+@utility stroke-figma-bg-inverse {
+  stroke: var(--figma-color-bg-inverse);
+}
+
+@utility icon-figma-bg-inverse {
+  --color-icon: var(--figma-color-bg-inverse);
+}
+
+@utility bg-figma-measure {
+  background-color: var(--figma-color-bg-measure);
+}
+
+@utility bg-figma-bg-measure {
+  background-color: var(--figma-color-bg-measure);
+}
+
+@utility text-figma-bg-measure {
+  color: var(--figma-color-bg-measure);
+}
+
+@utility border-figma-bg-measure {
+  border-color: var(--figma-color-bg-measure);
+}
+
+@utility outline-figma-bg-measure {
+  outline-color: var(--figma-color-bg-measure);
+}
+
+@utility fill-figma-bg-measure {
+  fill: var(--figma-color-bg-measure);
+}
+
+@utility stroke-figma-bg-measure {
+  stroke: var(--figma-color-bg-measure);
+}
+
+@utility icon-figma-bg-measure {
+  --color-icon: var(--figma-color-bg-measure);
+}
+
+@utility bg-figma-measure-hover {
+  background-color: var(--figma-color-bg-measure-hover);
+}
+
+@utility bg-figma-bg-measure-hover {
+  background-color: var(--figma-color-bg-measure-hover);
+}
+
+@utility text-figma-bg-measure-hover {
+  color: var(--figma-color-bg-measure-hover);
+}
+
+@utility border-figma-bg-measure-hover {
+  border-color: var(--figma-color-bg-measure-hover);
+}
+
+@utility outline-figma-bg-measure-hover {
+  outline-color: var(--figma-color-bg-measure-hover);
+}
+
+@utility fill-figma-bg-measure-hover {
+  fill: var(--figma-color-bg-measure-hover);
+}
+
+@utility stroke-figma-bg-measure-hover {
+  stroke: var(--figma-color-bg-measure-hover);
+}
+
+@utility icon-figma-bg-measure-hover {
+  --color-icon: var(--figma-color-bg-measure-hover);
+}
+
+@utility bg-figma-measure-pressed {
+  background-color: var(--figma-color-bg-measure-pressed);
+}
+
+@utility bg-figma-bg-measure-pressed {
+  background-color: var(--figma-color-bg-measure-pressed);
+}
+
+@utility text-figma-bg-measure-pressed {
+  color: var(--figma-color-bg-measure-pressed);
+}
+
+@utility border-figma-bg-measure-pressed {
+  border-color: var(--figma-color-bg-measure-pressed);
+}
+
+@utility outline-figma-bg-measure-pressed {
+  outline-color: var(--figma-color-bg-measure-pressed);
+}
+
+@utility fill-figma-bg-measure-pressed {
+  fill: var(--figma-color-bg-measure-pressed);
+}
+
+@utility stroke-figma-bg-measure-pressed {
+  stroke: var(--figma-color-bg-measure-pressed);
+}
+
+@utility icon-figma-bg-measure-pressed {
+  --color-icon: var(--figma-color-bg-measure-pressed);
+}
+
+@utility bg-figma-measure-secondary {
+  background-color: var(--figma-color-bg-measure-secondary);
+}
+
+@utility bg-figma-bg-measure-secondary {
+  background-color: var(--figma-color-bg-measure-secondary);
+}
+
+@utility text-figma-bg-measure-secondary {
+  color: var(--figma-color-bg-measure-secondary);
+}
+
+@utility border-figma-bg-measure-secondary {
+  border-color: var(--figma-color-bg-measure-secondary);
+}
+
+@utility outline-figma-bg-measure-secondary {
+  outline-color: var(--figma-color-bg-measure-secondary);
+}
+
+@utility fill-figma-bg-measure-secondary {
+  fill: var(--figma-color-bg-measure-secondary);
+}
+
+@utility stroke-figma-bg-measure-secondary {
+  stroke: var(--figma-color-bg-measure-secondary);
+}
+
+@utility icon-figma-bg-measure-secondary {
+  --color-icon: var(--figma-color-bg-measure-secondary);
+}
+
+@utility bg-figma-measure-tertiary {
+  background-color: var(--figma-color-bg-measure-tertiary);
+}
+
+@utility bg-figma-bg-measure-tertiary {
+  background-color: var(--figma-color-bg-measure-tertiary);
+}
+
+@utility text-figma-bg-measure-tertiary {
+  color: var(--figma-color-bg-measure-tertiary);
+}
+
+@utility border-figma-bg-measure-tertiary {
+  border-color: var(--figma-color-bg-measure-tertiary);
+}
+
+@utility outline-figma-bg-measure-tertiary {
+  outline-color: var(--figma-color-bg-measure-tertiary);
+}
+
+@utility fill-figma-bg-measure-tertiary {
+  fill: var(--figma-color-bg-measure-tertiary);
+}
+
+@utility stroke-figma-bg-measure-tertiary {
+  stroke: var(--figma-color-bg-measure-tertiary);
+}
+
+@utility icon-figma-bg-measure-tertiary {
+  --color-icon: var(--figma-color-bg-measure-tertiary);
+}
+
+@utility bg-figma-menu {
+  background-color: var(--figma-color-bg-menu);
+}
+
+@utility bg-figma-bg-menu {
+  background-color: var(--figma-color-bg-menu);
+}
+
+@utility text-figma-bg-menu {
+  color: var(--figma-color-bg-menu);
+}
+
+@utility border-figma-bg-menu {
+  border-color: var(--figma-color-bg-menu);
+}
+
+@utility outline-figma-bg-menu {
+  outline-color: var(--figma-color-bg-menu);
+}
+
+@utility fill-figma-bg-menu {
+  fill: var(--figma-color-bg-menu);
+}
+
+@utility stroke-figma-bg-menu {
+  stroke: var(--figma-color-bg-menu);
+}
+
+@utility icon-figma-bg-menu {
+  --color-icon: var(--figma-color-bg-menu);
+}
+
+@utility bg-figma-menu-disabled {
+  background-color: var(--figma-color-bg-menu-disabled);
+}
+
+@utility bg-figma-bg-menu-disabled {
+  background-color: var(--figma-color-bg-menu-disabled);
+}
+
+@utility text-figma-bg-menu-disabled {
+  color: var(--figma-color-bg-menu-disabled);
+}
+
+@utility border-figma-bg-menu-disabled {
+  border-color: var(--figma-color-bg-menu-disabled);
+}
+
+@utility outline-figma-bg-menu-disabled {
+  outline-color: var(--figma-color-bg-menu-disabled);
+}
+
+@utility fill-figma-bg-menu-disabled {
+  fill: var(--figma-color-bg-menu-disabled);
+}
+
+@utility stroke-figma-bg-menu-disabled {
+  stroke: var(--figma-color-bg-menu-disabled);
+}
+
+@utility icon-figma-bg-menu-disabled {
+  --color-icon: var(--figma-color-bg-menu-disabled);
+}
+
+@utility bg-figma-menu-hover {
+  background-color: var(--figma-color-bg-menu-hover);
+}
+
+@utility bg-figma-bg-menu-hover {
+  background-color: var(--figma-color-bg-menu-hover);
+}
+
+@utility text-figma-bg-menu-hover {
+  color: var(--figma-color-bg-menu-hover);
+}
+
+@utility border-figma-bg-menu-hover {
+  border-color: var(--figma-color-bg-menu-hover);
+}
+
+@utility outline-figma-bg-menu-hover {
+  outline-color: var(--figma-color-bg-menu-hover);
+}
+
+@utility fill-figma-bg-menu-hover {
+  fill: var(--figma-color-bg-menu-hover);
+}
+
+@utility stroke-figma-bg-menu-hover {
+  stroke: var(--figma-color-bg-menu-hover);
+}
+
+@utility icon-figma-bg-menu-hover {
+  --color-icon: var(--figma-color-bg-menu-hover);
+}
+
+@utility bg-figma-menu-pressed {
+  background-color: var(--figma-color-bg-menu-pressed);
+}
+
+@utility bg-figma-bg-menu-pressed {
+  background-color: var(--figma-color-bg-menu-pressed);
+}
+
+@utility text-figma-bg-menu-pressed {
+  color: var(--figma-color-bg-menu-pressed);
+}
+
+@utility border-figma-bg-menu-pressed {
+  border-color: var(--figma-color-bg-menu-pressed);
+}
+
+@utility outline-figma-bg-menu-pressed {
+  outline-color: var(--figma-color-bg-menu-pressed);
+}
+
+@utility fill-figma-bg-menu-pressed {
+  fill: var(--figma-color-bg-menu-pressed);
+}
+
+@utility stroke-figma-bg-menu-pressed {
+  stroke: var(--figma-color-bg-menu-pressed);
+}
+
+@utility icon-figma-bg-menu-pressed {
+  --color-icon: var(--figma-color-bg-menu-pressed);
+}
+
+@utility bg-figma-menu-secondary {
+  background-color: var(--figma-color-bg-menu-secondary);
+}
+
+@utility bg-figma-bg-menu-secondary {
+  background-color: var(--figma-color-bg-menu-secondary);
+}
+
+@utility text-figma-bg-menu-secondary {
+  color: var(--figma-color-bg-menu-secondary);
+}
+
+@utility border-figma-bg-menu-secondary {
+  border-color: var(--figma-color-bg-menu-secondary);
+}
+
+@utility outline-figma-bg-menu-secondary {
+  outline-color: var(--figma-color-bg-menu-secondary);
+}
+
+@utility fill-figma-bg-menu-secondary {
+  fill: var(--figma-color-bg-menu-secondary);
+}
+
+@utility stroke-figma-bg-menu-secondary {
+  stroke: var(--figma-color-bg-menu-secondary);
+}
+
+@utility icon-figma-bg-menu-secondary {
+  --color-icon: var(--figma-color-bg-menu-secondary);
+}
+
+@utility bg-figma-menu-selected {
+  background-color: var(--figma-color-bg-menu-selected);
+}
+
+@utility bg-figma-bg-menu-selected {
+  background-color: var(--figma-color-bg-menu-selected);
+}
+
+@utility text-figma-bg-menu-selected {
+  color: var(--figma-color-bg-menu-selected);
+}
+
+@utility border-figma-bg-menu-selected {
+  border-color: var(--figma-color-bg-menu-selected);
+}
+
+@utility outline-figma-bg-menu-selected {
+  outline-color: var(--figma-color-bg-menu-selected);
+}
+
+@utility fill-figma-bg-menu-selected {
+  fill: var(--figma-color-bg-menu-selected);
+}
+
+@utility stroke-figma-bg-menu-selected {
+  stroke: var(--figma-color-bg-menu-selected);
+}
+
+@utility icon-figma-bg-menu-selected {
+  --color-icon: var(--figma-color-bg-menu-selected);
+}
+
+@utility bg-figma-menu-selected-hover {
+  background-color: var(--figma-color-bg-menu-selected-hover);
+}
+
+@utility bg-figma-bg-menu-selected-hover {
+  background-color: var(--figma-color-bg-menu-selected-hover);
+}
+
+@utility text-figma-bg-menu-selected-hover {
+  color: var(--figma-color-bg-menu-selected-hover);
+}
+
+@utility border-figma-bg-menu-selected-hover {
+  border-color: var(--figma-color-bg-menu-selected-hover);
+}
+
+@utility outline-figma-bg-menu-selected-hover {
+  outline-color: var(--figma-color-bg-menu-selected-hover);
+}
+
+@utility fill-figma-bg-menu-selected-hover {
+  fill: var(--figma-color-bg-menu-selected-hover);
+}
+
+@utility stroke-figma-bg-menu-selected-hover {
+  stroke: var(--figma-color-bg-menu-selected-hover);
+}
+
+@utility icon-figma-bg-menu-selected-hover {
+  --color-icon: var(--figma-color-bg-menu-selected-hover);
+}
+
+@utility bg-figma-menu-selected-pressed {
+  background-color: var(--figma-color-bg-menu-selected-pressed);
+}
+
+@utility bg-figma-bg-menu-selected-pressed {
+  background-color: var(--figma-color-bg-menu-selected-pressed);
+}
+
+@utility text-figma-bg-menu-selected-pressed {
+  color: var(--figma-color-bg-menu-selected-pressed);
+}
+
+@utility border-figma-bg-menu-selected-pressed {
+  border-color: var(--figma-color-bg-menu-selected-pressed);
+}
+
+@utility outline-figma-bg-menu-selected-pressed {
+  outline-color: var(--figma-color-bg-menu-selected-pressed);
+}
+
+@utility fill-figma-bg-menu-selected-pressed {
+  fill: var(--figma-color-bg-menu-selected-pressed);
+}
+
+@utility stroke-figma-bg-menu-selected-pressed {
+  stroke: var(--figma-color-bg-menu-selected-pressed);
+}
+
+@utility icon-figma-bg-menu-selected-pressed {
+  --color-icon: var(--figma-color-bg-menu-selected-pressed);
+}
+
+@utility bg-figma-menu-selected-secondary {
+  background-color: var(--figma-color-bg-menu-selected-secondary);
+}
+
+@utility bg-figma-bg-menu-selected-secondary {
+  background-color: var(--figma-color-bg-menu-selected-secondary);
+}
+
+@utility text-figma-bg-menu-selected-secondary {
+  color: var(--figma-color-bg-menu-selected-secondary);
+}
+
+@utility border-figma-bg-menu-selected-secondary {
+  border-color: var(--figma-color-bg-menu-selected-secondary);
+}
+
+@utility outline-figma-bg-menu-selected-secondary {
+  outline-color: var(--figma-color-bg-menu-selected-secondary);
+}
+
+@utility fill-figma-bg-menu-selected-secondary {
+  fill: var(--figma-color-bg-menu-selected-secondary);
+}
+
+@utility stroke-figma-bg-menu-selected-secondary {
+  stroke: var(--figma-color-bg-menu-selected-secondary);
+}
+
+@utility icon-figma-bg-menu-selected-secondary {
+  --color-icon: var(--figma-color-bg-menu-selected-secondary);
+}
+
+@utility bg-figma-menu-selected-tertiary {
+  background-color: var(--figma-color-bg-menu-selected-tertiary);
+}
+
+@utility bg-figma-bg-menu-selected-tertiary {
+  background-color: var(--figma-color-bg-menu-selected-tertiary);
+}
+
+@utility text-figma-bg-menu-selected-tertiary {
+  color: var(--figma-color-bg-menu-selected-tertiary);
+}
+
+@utility border-figma-bg-menu-selected-tertiary {
+  border-color: var(--figma-color-bg-menu-selected-tertiary);
+}
+
+@utility outline-figma-bg-menu-selected-tertiary {
+  outline-color: var(--figma-color-bg-menu-selected-tertiary);
+}
+
+@utility fill-figma-bg-menu-selected-tertiary {
+  fill: var(--figma-color-bg-menu-selected-tertiary);
+}
+
+@utility stroke-figma-bg-menu-selected-tertiary {
+  stroke: var(--figma-color-bg-menu-selected-tertiary);
+}
+
+@utility icon-figma-bg-menu-selected-tertiary {
+  --color-icon: var(--figma-color-bg-menu-selected-tertiary);
+}
+
+@utility bg-figma-menu-tertiary {
+  background-color: var(--figma-color-bg-menu-tertiary);
+}
+
+@utility bg-figma-bg-menu-tertiary {
+  background-color: var(--figma-color-bg-menu-tertiary);
+}
+
+@utility text-figma-bg-menu-tertiary {
+  color: var(--figma-color-bg-menu-tertiary);
+}
+
+@utility border-figma-bg-menu-tertiary {
+  border-color: var(--figma-color-bg-menu-tertiary);
+}
+
+@utility outline-figma-bg-menu-tertiary {
+  outline-color: var(--figma-color-bg-menu-tertiary);
+}
+
+@utility fill-figma-bg-menu-tertiary {
+  fill: var(--figma-color-bg-menu-tertiary);
+}
+
+@utility stroke-figma-bg-menu-tertiary {
+  stroke: var(--figma-color-bg-menu-tertiary);
+}
+
+@utility icon-figma-bg-menu-tertiary {
+  --color-icon: var(--figma-color-bg-menu-tertiary);
+}
+
+@utility bg-figma-onselected {
+  background-color: var(--figma-color-bg-onselected);
+}
+
+@utility bg-figma-bg-onselected {
+  background-color: var(--figma-color-bg-onselected);
+}
+
+@utility text-figma-bg-onselected {
+  color: var(--figma-color-bg-onselected);
+}
+
+@utility border-figma-bg-onselected {
+  border-color: var(--figma-color-bg-onselected);
+}
+
+@utility outline-figma-bg-onselected {
+  outline-color: var(--figma-color-bg-onselected);
+}
+
+@utility fill-figma-bg-onselected {
+  fill: var(--figma-color-bg-onselected);
+}
+
+@utility stroke-figma-bg-onselected {
+  stroke: var(--figma-color-bg-onselected);
+}
+
+@utility icon-figma-bg-onselected {
+  --color-icon: var(--figma-color-bg-onselected);
+}
+
+@utility bg-figma-onselected-hover {
+  background-color: var(--figma-color-bg-onselected-hover);
+}
+
+@utility bg-figma-bg-onselected-hover {
+  background-color: var(--figma-color-bg-onselected-hover);
+}
+
+@utility text-figma-bg-onselected-hover {
+  color: var(--figma-color-bg-onselected-hover);
+}
+
+@utility border-figma-bg-onselected-hover {
+  border-color: var(--figma-color-bg-onselected-hover);
+}
+
+@utility outline-figma-bg-onselected-hover {
+  outline-color: var(--figma-color-bg-onselected-hover);
+}
+
+@utility fill-figma-bg-onselected-hover {
+  fill: var(--figma-color-bg-onselected-hover);
+}
+
+@utility stroke-figma-bg-onselected-hover {
+  stroke: var(--figma-color-bg-onselected-hover);
+}
+
+@utility icon-figma-bg-onselected-hover {
+  --color-icon: var(--figma-color-bg-onselected-hover);
+}
+
+@utility bg-figma-onselected-pressed {
+  background-color: var(--figma-color-bg-onselected-pressed);
+}
+
+@utility bg-figma-bg-onselected-pressed {
+  background-color: var(--figma-color-bg-onselected-pressed);
+}
+
+@utility text-figma-bg-onselected-pressed {
+  color: var(--figma-color-bg-onselected-pressed);
+}
+
+@utility border-figma-bg-onselected-pressed {
+  border-color: var(--figma-color-bg-onselected-pressed);
+}
+
+@utility outline-figma-bg-onselected-pressed {
+  outline-color: var(--figma-color-bg-onselected-pressed);
+}
+
+@utility fill-figma-bg-onselected-pressed {
+  fill: var(--figma-color-bg-onselected-pressed);
+}
+
+@utility stroke-figma-bg-onselected-pressed {
+  stroke: var(--figma-color-bg-onselected-pressed);
+}
+
+@utility icon-figma-bg-onselected-pressed {
+  --color-icon: var(--figma-color-bg-onselected-pressed);
+}
+
+@utility bg-figma-pressed {
+  background-color: var(--figma-color-bg-pressed);
+}
+
+@utility bg-figma-bg-pressed {
+  background-color: var(--figma-color-bg-pressed);
+}
+
+@utility text-figma-bg-pressed {
+  color: var(--figma-color-bg-pressed);
+}
+
+@utility border-figma-bg-pressed {
+  border-color: var(--figma-color-bg-pressed);
+}
+
+@utility outline-figma-bg-pressed {
+  outline-color: var(--figma-color-bg-pressed);
+}
+
+@utility fill-figma-bg-pressed {
+  fill: var(--figma-color-bg-pressed);
+}
+
+@utility stroke-figma-bg-pressed {
+  stroke: var(--figma-color-bg-pressed);
+}
+
+@utility icon-figma-bg-pressed {
+  --color-icon: var(--figma-color-bg-pressed);
+}
+
+@utility bg-figma-secondary {
+  background-color: var(--figma-color-bg-secondary);
+}
+
+@utility bg-figma-bg-secondary {
+  background-color: var(--figma-color-bg-secondary);
+}
+
+@utility text-figma-bg-secondary {
+  color: var(--figma-color-bg-secondary);
+}
+
+@utility border-figma-bg-secondary {
+  border-color: var(--figma-color-bg-secondary);
+}
+
+@utility outline-figma-bg-secondary {
+  outline-color: var(--figma-color-bg-secondary);
+}
+
+@utility fill-figma-bg-secondary {
+  fill: var(--figma-color-bg-secondary);
+}
+
+@utility stroke-figma-bg-secondary {
+  stroke: var(--figma-color-bg-secondary);
+}
+
+@utility icon-figma-bg-secondary {
+  --color-icon: var(--figma-color-bg-secondary);
+}
+
+@utility bg-figma-selected {
+  background-color: var(--figma-color-bg-selected);
+}
+
+@utility bg-figma-bg-selected {
+  background-color: var(--figma-color-bg-selected);
+}
+
+@utility text-figma-bg-selected {
+  color: var(--figma-color-bg-selected);
+}
+
+@utility border-figma-bg-selected {
+  border-color: var(--figma-color-bg-selected);
+}
+
+@utility outline-figma-bg-selected {
+  outline-color: var(--figma-color-bg-selected);
+}
+
+@utility fill-figma-bg-selected {
+  fill: var(--figma-color-bg-selected);
+}
+
+@utility stroke-figma-bg-selected {
+  stroke: var(--figma-color-bg-selected);
+}
+
+@utility icon-figma-bg-selected {
+  --color-icon: var(--figma-color-bg-selected);
+}
+
+@utility bg-figma-selected-hover {
+  background-color: var(--figma-color-bg-selected-hover);
+}
+
+@utility bg-figma-bg-selected-hover {
+  background-color: var(--figma-color-bg-selected-hover);
+}
+
+@utility text-figma-bg-selected-hover {
+  color: var(--figma-color-bg-selected-hover);
+}
+
+@utility border-figma-bg-selected-hover {
+  border-color: var(--figma-color-bg-selected-hover);
+}
+
+@utility outline-figma-bg-selected-hover {
+  outline-color: var(--figma-color-bg-selected-hover);
+}
+
+@utility fill-figma-bg-selected-hover {
+  fill: var(--figma-color-bg-selected-hover);
+}
+
+@utility stroke-figma-bg-selected-hover {
+  stroke: var(--figma-color-bg-selected-hover);
+}
+
+@utility icon-figma-bg-selected-hover {
+  --color-icon: var(--figma-color-bg-selected-hover);
+}
+
+@utility bg-figma-selected-pressed {
+  background-color: var(--figma-color-bg-selected-pressed);
+}
+
+@utility bg-figma-bg-selected-pressed {
+  background-color: var(--figma-color-bg-selected-pressed);
+}
+
+@utility text-figma-bg-selected-pressed {
+  color: var(--figma-color-bg-selected-pressed);
+}
+
+@utility border-figma-bg-selected-pressed {
+  border-color: var(--figma-color-bg-selected-pressed);
+}
+
+@utility outline-figma-bg-selected-pressed {
+  outline-color: var(--figma-color-bg-selected-pressed);
+}
+
+@utility fill-figma-bg-selected-pressed {
+  fill: var(--figma-color-bg-selected-pressed);
+}
+
+@utility stroke-figma-bg-selected-pressed {
+  stroke: var(--figma-color-bg-selected-pressed);
+}
+
+@utility icon-figma-bg-selected-pressed {
+  --color-icon: var(--figma-color-bg-selected-pressed);
+}
+
+@utility bg-figma-selected-secondary {
+  background-color: var(--figma-color-bg-selected-secondary);
+}
+
+@utility bg-figma-bg-selected-secondary {
+  background-color: var(--figma-color-bg-selected-secondary);
+}
+
+@utility text-figma-bg-selected-secondary {
+  color: var(--figma-color-bg-selected-secondary);
+}
+
+@utility border-figma-bg-selected-secondary {
+  border-color: var(--figma-color-bg-selected-secondary);
+}
+
+@utility outline-figma-bg-selected-secondary {
+  outline-color: var(--figma-color-bg-selected-secondary);
+}
+
+@utility fill-figma-bg-selected-secondary {
+  fill: var(--figma-color-bg-selected-secondary);
+}
+
+@utility stroke-figma-bg-selected-secondary {
+  stroke: var(--figma-color-bg-selected-secondary);
+}
+
+@utility icon-figma-bg-selected-secondary {
+  --color-icon: var(--figma-color-bg-selected-secondary);
+}
+
+@utility bg-figma-selected-strong {
+  background-color: var(--figma-color-bg-selected-strong);
+}
+
+@utility bg-figma-bg-selected-strong {
+  background-color: var(--figma-color-bg-selected-strong);
+}
+
+@utility text-figma-bg-selected-strong {
+  color: var(--figma-color-bg-selected-strong);
+}
+
+@utility border-figma-bg-selected-strong {
+  border-color: var(--figma-color-bg-selected-strong);
+}
+
+@utility outline-figma-bg-selected-strong {
+  outline-color: var(--figma-color-bg-selected-strong);
+}
+
+@utility fill-figma-bg-selected-strong {
+  fill: var(--figma-color-bg-selected-strong);
+}
+
+@utility stroke-figma-bg-selected-strong {
+  stroke: var(--figma-color-bg-selected-strong);
+}
+
+@utility icon-figma-bg-selected-strong {
+  --color-icon: var(--figma-color-bg-selected-strong);
+}
+
+@utility bg-figma-selected-tertiary {
+  background-color: var(--figma-color-bg-selected-tertiary);
+}
+
+@utility bg-figma-bg-selected-tertiary {
+  background-color: var(--figma-color-bg-selected-tertiary);
+}
+
+@utility text-figma-bg-selected-tertiary {
+  color: var(--figma-color-bg-selected-tertiary);
+}
+
+@utility border-figma-bg-selected-tertiary {
+  border-color: var(--figma-color-bg-selected-tertiary);
+}
+
+@utility outline-figma-bg-selected-tertiary {
+  outline-color: var(--figma-color-bg-selected-tertiary);
+}
+
+@utility fill-figma-bg-selected-tertiary {
+  fill: var(--figma-color-bg-selected-tertiary);
+}
+
+@utility stroke-figma-bg-selected-tertiary {
+  stroke: var(--figma-color-bg-selected-tertiary);
+}
+
+@utility icon-figma-bg-selected-tertiary {
+  --color-icon: var(--figma-color-bg-selected-tertiary);
+}
+
+@utility bg-figma-success {
+  background-color: var(--figma-color-bg-success);
+}
+
+@utility bg-figma-bg-success {
+  background-color: var(--figma-color-bg-success);
+}
+
+@utility text-figma-bg-success {
+  color: var(--figma-color-bg-success);
+}
+
+@utility border-figma-bg-success {
+  border-color: var(--figma-color-bg-success);
+}
+
+@utility outline-figma-bg-success {
+  outline-color: var(--figma-color-bg-success);
+}
+
+@utility fill-figma-bg-success {
+  fill: var(--figma-color-bg-success);
+}
+
+@utility stroke-figma-bg-success {
+  stroke: var(--figma-color-bg-success);
+}
+
+@utility icon-figma-bg-success {
+  --color-icon: var(--figma-color-bg-success);
+}
+
+@utility bg-figma-success-hover {
+  background-color: var(--figma-color-bg-success-hover);
+}
+
+@utility bg-figma-bg-success-hover {
+  background-color: var(--figma-color-bg-success-hover);
+}
+
+@utility text-figma-bg-success-hover {
+  color: var(--figma-color-bg-success-hover);
+}
+
+@utility border-figma-bg-success-hover {
+  border-color: var(--figma-color-bg-success-hover);
+}
+
+@utility outline-figma-bg-success-hover {
+  outline-color: var(--figma-color-bg-success-hover);
+}
+
+@utility fill-figma-bg-success-hover {
+  fill: var(--figma-color-bg-success-hover);
+}
+
+@utility stroke-figma-bg-success-hover {
+  stroke: var(--figma-color-bg-success-hover);
+}
+
+@utility icon-figma-bg-success-hover {
+  --color-icon: var(--figma-color-bg-success-hover);
+}
+
+@utility bg-figma-success-pressed {
+  background-color: var(--figma-color-bg-success-pressed);
+}
+
+@utility bg-figma-bg-success-pressed {
+  background-color: var(--figma-color-bg-success-pressed);
+}
+
+@utility text-figma-bg-success-pressed {
+  color: var(--figma-color-bg-success-pressed);
+}
+
+@utility border-figma-bg-success-pressed {
+  border-color: var(--figma-color-bg-success-pressed);
+}
+
+@utility outline-figma-bg-success-pressed {
+  outline-color: var(--figma-color-bg-success-pressed);
+}
+
+@utility fill-figma-bg-success-pressed {
+  fill: var(--figma-color-bg-success-pressed);
+}
+
+@utility stroke-figma-bg-success-pressed {
+  stroke: var(--figma-color-bg-success-pressed);
+}
+
+@utility icon-figma-bg-success-pressed {
+  --color-icon: var(--figma-color-bg-success-pressed);
+}
+
+@utility bg-figma-success-secondary {
+  background-color: var(--figma-color-bg-success-secondary);
+}
+
+@utility bg-figma-bg-success-secondary {
+  background-color: var(--figma-color-bg-success-secondary);
+}
+
+@utility text-figma-bg-success-secondary {
+  color: var(--figma-color-bg-success-secondary);
+}
+
+@utility border-figma-bg-success-secondary {
+  border-color: var(--figma-color-bg-success-secondary);
+}
+
+@utility outline-figma-bg-success-secondary {
+  outline-color: var(--figma-color-bg-success-secondary);
+}
+
+@utility fill-figma-bg-success-secondary {
+  fill: var(--figma-color-bg-success-secondary);
+}
+
+@utility stroke-figma-bg-success-secondary {
+  stroke: var(--figma-color-bg-success-secondary);
+}
+
+@utility icon-figma-bg-success-secondary {
+  --color-icon: var(--figma-color-bg-success-secondary);
+}
+
+@utility bg-figma-success-tertiary {
+  background-color: var(--figma-color-bg-success-tertiary);
+}
+
+@utility bg-figma-bg-success-tertiary {
+  background-color: var(--figma-color-bg-success-tertiary);
+}
+
+@utility text-figma-bg-success-tertiary {
+  color: var(--figma-color-bg-success-tertiary);
+}
+
+@utility border-figma-bg-success-tertiary {
+  border-color: var(--figma-color-bg-success-tertiary);
+}
+
+@utility outline-figma-bg-success-tertiary {
+  outline-color: var(--figma-color-bg-success-tertiary);
+}
+
+@utility fill-figma-bg-success-tertiary {
+  fill: var(--figma-color-bg-success-tertiary);
+}
+
+@utility stroke-figma-bg-success-tertiary {
+  stroke: var(--figma-color-bg-success-tertiary);
+}
+
+@utility icon-figma-bg-success-tertiary {
+  --color-icon: var(--figma-color-bg-success-tertiary);
+}
+
+@utility bg-figma-tertiary {
+  background-color: var(--figma-color-bg-tertiary);
+}
+
+@utility bg-figma-bg-tertiary {
+  background-color: var(--figma-color-bg-tertiary);
+}
+
+@utility text-figma-bg-tertiary {
+  color: var(--figma-color-bg-tertiary);
+}
+
+@utility border-figma-bg-tertiary {
+  border-color: var(--figma-color-bg-tertiary);
+}
+
+@utility outline-figma-bg-tertiary {
+  outline-color: var(--figma-color-bg-tertiary);
+}
+
+@utility fill-figma-bg-tertiary {
+  fill: var(--figma-color-bg-tertiary);
+}
+
+@utility stroke-figma-bg-tertiary {
+  stroke: var(--figma-color-bg-tertiary);
+}
+
+@utility icon-figma-bg-tertiary {
+  --color-icon: var(--figma-color-bg-tertiary);
+}
+
+@utility bg-figma-toolbar {
+  background-color: var(--figma-color-bg-toolbar);
+}
+
+@utility bg-figma-bg-toolbar {
+  background-color: var(--figma-color-bg-toolbar);
+}
+
+@utility text-figma-bg-toolbar {
+  color: var(--figma-color-bg-toolbar);
+}
+
+@utility border-figma-bg-toolbar {
+  border-color: var(--figma-color-bg-toolbar);
+}
+
+@utility outline-figma-bg-toolbar {
+  outline-color: var(--figma-color-bg-toolbar);
+}
+
+@utility fill-figma-bg-toolbar {
+  fill: var(--figma-color-bg-toolbar);
+}
+
+@utility stroke-figma-bg-toolbar {
+  stroke: var(--figma-color-bg-toolbar);
+}
+
+@utility icon-figma-bg-toolbar {
+  --color-icon: var(--figma-color-bg-toolbar);
+}
+
+@utility bg-figma-toolbar-disabled {
+  background-color: var(--figma-color-bg-toolbar-disabled);
+}
+
+@utility bg-figma-bg-toolbar-disabled {
+  background-color: var(--figma-color-bg-toolbar-disabled);
+}
+
+@utility text-figma-bg-toolbar-disabled {
+  color: var(--figma-color-bg-toolbar-disabled);
+}
+
+@utility border-figma-bg-toolbar-disabled {
+  border-color: var(--figma-color-bg-toolbar-disabled);
+}
+
+@utility outline-figma-bg-toolbar-disabled {
+  outline-color: var(--figma-color-bg-toolbar-disabled);
+}
+
+@utility fill-figma-bg-toolbar-disabled {
+  fill: var(--figma-color-bg-toolbar-disabled);
+}
+
+@utility stroke-figma-bg-toolbar-disabled {
+  stroke: var(--figma-color-bg-toolbar-disabled);
+}
+
+@utility icon-figma-bg-toolbar-disabled {
+  --color-icon: var(--figma-color-bg-toolbar-disabled);
+}
+
+@utility bg-figma-toolbar-hover {
+  background-color: var(--figma-color-bg-toolbar-hover);
+}
+
+@utility bg-figma-bg-toolbar-hover {
+  background-color: var(--figma-color-bg-toolbar-hover);
+}
+
+@utility text-figma-bg-toolbar-hover {
+  color: var(--figma-color-bg-toolbar-hover);
+}
+
+@utility border-figma-bg-toolbar-hover {
+  border-color: var(--figma-color-bg-toolbar-hover);
+}
+
+@utility outline-figma-bg-toolbar-hover {
+  outline-color: var(--figma-color-bg-toolbar-hover);
+}
+
+@utility fill-figma-bg-toolbar-hover {
+  fill: var(--figma-color-bg-toolbar-hover);
+}
+
+@utility stroke-figma-bg-toolbar-hover {
+  stroke: var(--figma-color-bg-toolbar-hover);
+}
+
+@utility icon-figma-bg-toolbar-hover {
+  --color-icon: var(--figma-color-bg-toolbar-hover);
+}
+
+@utility bg-figma-toolbar-pressed {
+  background-color: var(--figma-color-bg-toolbar-pressed);
+}
+
+@utility bg-figma-bg-toolbar-pressed {
+  background-color: var(--figma-color-bg-toolbar-pressed);
+}
+
+@utility text-figma-bg-toolbar-pressed {
+  color: var(--figma-color-bg-toolbar-pressed);
+}
+
+@utility border-figma-bg-toolbar-pressed {
+  border-color: var(--figma-color-bg-toolbar-pressed);
+}
+
+@utility outline-figma-bg-toolbar-pressed {
+  outline-color: var(--figma-color-bg-toolbar-pressed);
+}
+
+@utility fill-figma-bg-toolbar-pressed {
+  fill: var(--figma-color-bg-toolbar-pressed);
+}
+
+@utility stroke-figma-bg-toolbar-pressed {
+  stroke: var(--figma-color-bg-toolbar-pressed);
+}
+
+@utility icon-figma-bg-toolbar-pressed {
+  --color-icon: var(--figma-color-bg-toolbar-pressed);
+}
+
+@utility bg-figma-toolbar-secondary {
+  background-color: var(--figma-color-bg-toolbar-secondary);
+}
+
+@utility bg-figma-bg-toolbar-secondary {
+  background-color: var(--figma-color-bg-toolbar-secondary);
+}
+
+@utility text-figma-bg-toolbar-secondary {
+  color: var(--figma-color-bg-toolbar-secondary);
+}
+
+@utility border-figma-bg-toolbar-secondary {
+  border-color: var(--figma-color-bg-toolbar-secondary);
+}
+
+@utility outline-figma-bg-toolbar-secondary {
+  outline-color: var(--figma-color-bg-toolbar-secondary);
+}
+
+@utility fill-figma-bg-toolbar-secondary {
+  fill: var(--figma-color-bg-toolbar-secondary);
+}
+
+@utility stroke-figma-bg-toolbar-secondary {
+  stroke: var(--figma-color-bg-toolbar-secondary);
+}
+
+@utility icon-figma-bg-toolbar-secondary {
+  --color-icon: var(--figma-color-bg-toolbar-secondary);
+}
+
+@utility bg-figma-toolbar-selected {
+  background-color: var(--figma-color-bg-toolbar-selected);
+}
+
+@utility bg-figma-bg-toolbar-selected {
+  background-color: var(--figma-color-bg-toolbar-selected);
+}
+
+@utility text-figma-bg-toolbar-selected {
+  color: var(--figma-color-bg-toolbar-selected);
+}
+
+@utility border-figma-bg-toolbar-selected {
+  border-color: var(--figma-color-bg-toolbar-selected);
+}
+
+@utility outline-figma-bg-toolbar-selected {
+  outline-color: var(--figma-color-bg-toolbar-selected);
+}
+
+@utility fill-figma-bg-toolbar-selected {
+  fill: var(--figma-color-bg-toolbar-selected);
+}
+
+@utility stroke-figma-bg-toolbar-selected {
+  stroke: var(--figma-color-bg-toolbar-selected);
+}
+
+@utility icon-figma-bg-toolbar-selected {
+  --color-icon: var(--figma-color-bg-toolbar-selected);
+}
+
+@utility bg-figma-toolbar-selected-hover {
+  background-color: var(--figma-color-bg-toolbar-selected-hover);
+}
+
+@utility bg-figma-bg-toolbar-selected-hover {
+  background-color: var(--figma-color-bg-toolbar-selected-hover);
+}
+
+@utility text-figma-bg-toolbar-selected-hover {
+  color: var(--figma-color-bg-toolbar-selected-hover);
+}
+
+@utility border-figma-bg-toolbar-selected-hover {
+  border-color: var(--figma-color-bg-toolbar-selected-hover);
+}
+
+@utility outline-figma-bg-toolbar-selected-hover {
+  outline-color: var(--figma-color-bg-toolbar-selected-hover);
+}
+
+@utility fill-figma-bg-toolbar-selected-hover {
+  fill: var(--figma-color-bg-toolbar-selected-hover);
+}
+
+@utility stroke-figma-bg-toolbar-selected-hover {
+  stroke: var(--figma-color-bg-toolbar-selected-hover);
+}
+
+@utility icon-figma-bg-toolbar-selected-hover {
+  --color-icon: var(--figma-color-bg-toolbar-selected-hover);
+}
+
+@utility bg-figma-toolbar-selected-pressed {
+  background-color: var(--figma-color-bg-toolbar-selected-pressed);
+}
+
+@utility bg-figma-bg-toolbar-selected-pressed {
+  background-color: var(--figma-color-bg-toolbar-selected-pressed);
+}
+
+@utility text-figma-bg-toolbar-selected-pressed {
+  color: var(--figma-color-bg-toolbar-selected-pressed);
+}
+
+@utility border-figma-bg-toolbar-selected-pressed {
+  border-color: var(--figma-color-bg-toolbar-selected-pressed);
+}
+
+@utility outline-figma-bg-toolbar-selected-pressed {
+  outline-color: var(--figma-color-bg-toolbar-selected-pressed);
+}
+
+@utility fill-figma-bg-toolbar-selected-pressed {
+  fill: var(--figma-color-bg-toolbar-selected-pressed);
+}
+
+@utility stroke-figma-bg-toolbar-selected-pressed {
+  stroke: var(--figma-color-bg-toolbar-selected-pressed);
+}
+
+@utility icon-figma-bg-toolbar-selected-pressed {
+  --color-icon: var(--figma-color-bg-toolbar-selected-pressed);
+}
+
+@utility bg-figma-toolbar-selected-secondary {
+  background-color: var(--figma-color-bg-toolbar-selected-secondary);
+}
+
+@utility bg-figma-bg-toolbar-selected-secondary {
+  background-color: var(--figma-color-bg-toolbar-selected-secondary);
+}
+
+@utility text-figma-bg-toolbar-selected-secondary {
+  color: var(--figma-color-bg-toolbar-selected-secondary);
+}
+
+@utility border-figma-bg-toolbar-selected-secondary {
+  border-color: var(--figma-color-bg-toolbar-selected-secondary);
+}
+
+@utility outline-figma-bg-toolbar-selected-secondary {
+  outline-color: var(--figma-color-bg-toolbar-selected-secondary);
+}
+
+@utility fill-figma-bg-toolbar-selected-secondary {
+  fill: var(--figma-color-bg-toolbar-selected-secondary);
+}
+
+@utility stroke-figma-bg-toolbar-selected-secondary {
+  stroke: var(--figma-color-bg-toolbar-selected-secondary);
+}
+
+@utility icon-figma-bg-toolbar-selected-secondary {
+  --color-icon: var(--figma-color-bg-toolbar-selected-secondary);
+}
+
+@utility bg-figma-toolbar-selected-tertiary {
+  background-color: var(--figma-color-bg-toolbar-selected-tertiary);
+}
+
+@utility bg-figma-bg-toolbar-selected-tertiary {
+  background-color: var(--figma-color-bg-toolbar-selected-tertiary);
+}
+
+@utility text-figma-bg-toolbar-selected-tertiary {
+  color: var(--figma-color-bg-toolbar-selected-tertiary);
+}
+
+@utility border-figma-bg-toolbar-selected-tertiary {
+  border-color: var(--figma-color-bg-toolbar-selected-tertiary);
+}
+
+@utility outline-figma-bg-toolbar-selected-tertiary {
+  outline-color: var(--figma-color-bg-toolbar-selected-tertiary);
+}
+
+@utility fill-figma-bg-toolbar-selected-tertiary {
+  fill: var(--figma-color-bg-toolbar-selected-tertiary);
+}
+
+@utility stroke-figma-bg-toolbar-selected-tertiary {
+  stroke: var(--figma-color-bg-toolbar-selected-tertiary);
+}
+
+@utility icon-figma-bg-toolbar-selected-tertiary {
+  --color-icon: var(--figma-color-bg-toolbar-selected-tertiary);
+}
+
+@utility bg-figma-toolbar-tertiary {
+  background-color: var(--figma-color-bg-toolbar-tertiary);
+}
+
+@utility bg-figma-bg-toolbar-tertiary {
+  background-color: var(--figma-color-bg-toolbar-tertiary);
+}
+
+@utility text-figma-bg-toolbar-tertiary {
+  color: var(--figma-color-bg-toolbar-tertiary);
+}
+
+@utility border-figma-bg-toolbar-tertiary {
+  border-color: var(--figma-color-bg-toolbar-tertiary);
+}
+
+@utility outline-figma-bg-toolbar-tertiary {
+  outline-color: var(--figma-color-bg-toolbar-tertiary);
+}
+
+@utility fill-figma-bg-toolbar-tertiary {
+  fill: var(--figma-color-bg-toolbar-tertiary);
+}
+
+@utility stroke-figma-bg-toolbar-tertiary {
+  stroke: var(--figma-color-bg-toolbar-tertiary);
+}
+
+@utility icon-figma-bg-toolbar-tertiary {
+  --color-icon: var(--figma-color-bg-toolbar-tertiary);
+}
+
+@utility bg-figma-tooltip {
+  background-color: var(--figma-color-bg-tooltip);
+}
+
+@utility bg-figma-bg-tooltip {
+  background-color: var(--figma-color-bg-tooltip);
+}
+
+@utility text-figma-bg-tooltip {
+  color: var(--figma-color-bg-tooltip);
+}
+
+@utility border-figma-bg-tooltip {
+  border-color: var(--figma-color-bg-tooltip);
+}
+
+@utility outline-figma-bg-tooltip {
+  outline-color: var(--figma-color-bg-tooltip);
+}
+
+@utility fill-figma-bg-tooltip {
+  fill: var(--figma-color-bg-tooltip);
+}
+
+@utility stroke-figma-bg-tooltip {
+  stroke: var(--figma-color-bg-tooltip);
+}
+
+@utility icon-figma-bg-tooltip {
+  --color-icon: var(--figma-color-bg-tooltip);
+}
+
+@utility bg-figma-tooltip-disabled {
+  background-color: var(--figma-color-bg-tooltip-disabled);
+}
+
+@utility bg-figma-bg-tooltip-disabled {
+  background-color: var(--figma-color-bg-tooltip-disabled);
+}
+
+@utility text-figma-bg-tooltip-disabled {
+  color: var(--figma-color-bg-tooltip-disabled);
+}
+
+@utility border-figma-bg-tooltip-disabled {
+  border-color: var(--figma-color-bg-tooltip-disabled);
+}
+
+@utility outline-figma-bg-tooltip-disabled {
+  outline-color: var(--figma-color-bg-tooltip-disabled);
+}
+
+@utility fill-figma-bg-tooltip-disabled {
+  fill: var(--figma-color-bg-tooltip-disabled);
+}
+
+@utility stroke-figma-bg-tooltip-disabled {
+  stroke: var(--figma-color-bg-tooltip-disabled);
+}
+
+@utility icon-figma-bg-tooltip-disabled {
+  --color-icon: var(--figma-color-bg-tooltip-disabled);
+}
+
+@utility bg-figma-tooltip-hover {
+  background-color: var(--figma-color-bg-tooltip-hover);
+}
+
+@utility bg-figma-bg-tooltip-hover {
+  background-color: var(--figma-color-bg-tooltip-hover);
+}
+
+@utility text-figma-bg-tooltip-hover {
+  color: var(--figma-color-bg-tooltip-hover);
+}
+
+@utility border-figma-bg-tooltip-hover {
+  border-color: var(--figma-color-bg-tooltip-hover);
+}
+
+@utility outline-figma-bg-tooltip-hover {
+  outline-color: var(--figma-color-bg-tooltip-hover);
+}
+
+@utility fill-figma-bg-tooltip-hover {
+  fill: var(--figma-color-bg-tooltip-hover);
+}
+
+@utility stroke-figma-bg-tooltip-hover {
+  stroke: var(--figma-color-bg-tooltip-hover);
+}
+
+@utility icon-figma-bg-tooltip-hover {
+  --color-icon: var(--figma-color-bg-tooltip-hover);
+}
+
+@utility bg-figma-tooltip-pressed {
+  background-color: var(--figma-color-bg-tooltip-pressed);
+}
+
+@utility bg-figma-bg-tooltip-pressed {
+  background-color: var(--figma-color-bg-tooltip-pressed);
+}
+
+@utility text-figma-bg-tooltip-pressed {
+  color: var(--figma-color-bg-tooltip-pressed);
+}
+
+@utility border-figma-bg-tooltip-pressed {
+  border-color: var(--figma-color-bg-tooltip-pressed);
+}
+
+@utility outline-figma-bg-tooltip-pressed {
+  outline-color: var(--figma-color-bg-tooltip-pressed);
+}
+
+@utility fill-figma-bg-tooltip-pressed {
+  fill: var(--figma-color-bg-tooltip-pressed);
+}
+
+@utility stroke-figma-bg-tooltip-pressed {
+  stroke: var(--figma-color-bg-tooltip-pressed);
+}
+
+@utility icon-figma-bg-tooltip-pressed {
+  --color-icon: var(--figma-color-bg-tooltip-pressed);
+}
+
+@utility bg-figma-tooltip-secondary {
+  background-color: var(--figma-color-bg-tooltip-secondary);
+}
+
+@utility bg-figma-bg-tooltip-secondary {
+  background-color: var(--figma-color-bg-tooltip-secondary);
+}
+
+@utility text-figma-bg-tooltip-secondary {
+  color: var(--figma-color-bg-tooltip-secondary);
+}
+
+@utility border-figma-bg-tooltip-secondary {
+  border-color: var(--figma-color-bg-tooltip-secondary);
+}
+
+@utility outline-figma-bg-tooltip-secondary {
+  outline-color: var(--figma-color-bg-tooltip-secondary);
+}
+
+@utility fill-figma-bg-tooltip-secondary {
+  fill: var(--figma-color-bg-tooltip-secondary);
+}
+
+@utility stroke-figma-bg-tooltip-secondary {
+  stroke: var(--figma-color-bg-tooltip-secondary);
+}
+
+@utility icon-figma-bg-tooltip-secondary {
+  --color-icon: var(--figma-color-bg-tooltip-secondary);
+}
+
+@utility bg-figma-tooltip-selected {
+  background-color: var(--figma-color-bg-tooltip-selected);
+}
+
+@utility bg-figma-bg-tooltip-selected {
+  background-color: var(--figma-color-bg-tooltip-selected);
+}
+
+@utility text-figma-bg-tooltip-selected {
+  color: var(--figma-color-bg-tooltip-selected);
+}
+
+@utility border-figma-bg-tooltip-selected {
+  border-color: var(--figma-color-bg-tooltip-selected);
+}
+
+@utility outline-figma-bg-tooltip-selected {
+  outline-color: var(--figma-color-bg-tooltip-selected);
+}
+
+@utility fill-figma-bg-tooltip-selected {
+  fill: var(--figma-color-bg-tooltip-selected);
+}
+
+@utility stroke-figma-bg-tooltip-selected {
+  stroke: var(--figma-color-bg-tooltip-selected);
+}
+
+@utility icon-figma-bg-tooltip-selected {
+  --color-icon: var(--figma-color-bg-tooltip-selected);
+}
+
+@utility bg-figma-tooltip-selected-hover {
+  background-color: var(--figma-color-bg-tooltip-selected-hover);
+}
+
+@utility bg-figma-bg-tooltip-selected-hover {
+  background-color: var(--figma-color-bg-tooltip-selected-hover);
+}
+
+@utility text-figma-bg-tooltip-selected-hover {
+  color: var(--figma-color-bg-tooltip-selected-hover);
+}
+
+@utility border-figma-bg-tooltip-selected-hover {
+  border-color: var(--figma-color-bg-tooltip-selected-hover);
+}
+
+@utility outline-figma-bg-tooltip-selected-hover {
+  outline-color: var(--figma-color-bg-tooltip-selected-hover);
+}
+
+@utility fill-figma-bg-tooltip-selected-hover {
+  fill: var(--figma-color-bg-tooltip-selected-hover);
+}
+
+@utility stroke-figma-bg-tooltip-selected-hover {
+  stroke: var(--figma-color-bg-tooltip-selected-hover);
+}
+
+@utility icon-figma-bg-tooltip-selected-hover {
+  --color-icon: var(--figma-color-bg-tooltip-selected-hover);
+}
+
+@utility bg-figma-tooltip-selected-pressed {
+  background-color: var(--figma-color-bg-tooltip-selected-pressed);
+}
+
+@utility bg-figma-bg-tooltip-selected-pressed {
+  background-color: var(--figma-color-bg-tooltip-selected-pressed);
+}
+
+@utility text-figma-bg-tooltip-selected-pressed {
+  color: var(--figma-color-bg-tooltip-selected-pressed);
+}
+
+@utility border-figma-bg-tooltip-selected-pressed {
+  border-color: var(--figma-color-bg-tooltip-selected-pressed);
+}
+
+@utility outline-figma-bg-tooltip-selected-pressed {
+  outline-color: var(--figma-color-bg-tooltip-selected-pressed);
+}
+
+@utility fill-figma-bg-tooltip-selected-pressed {
+  fill: var(--figma-color-bg-tooltip-selected-pressed);
+}
+
+@utility stroke-figma-bg-tooltip-selected-pressed {
+  stroke: var(--figma-color-bg-tooltip-selected-pressed);
+}
+
+@utility icon-figma-bg-tooltip-selected-pressed {
+  --color-icon: var(--figma-color-bg-tooltip-selected-pressed);
+}
+
+@utility bg-figma-tooltip-selected-secondary {
+  background-color: var(--figma-color-bg-tooltip-selected-secondary);
+}
+
+@utility bg-figma-bg-tooltip-selected-secondary {
+  background-color: var(--figma-color-bg-tooltip-selected-secondary);
+}
+
+@utility text-figma-bg-tooltip-selected-secondary {
+  color: var(--figma-color-bg-tooltip-selected-secondary);
+}
+
+@utility border-figma-bg-tooltip-selected-secondary {
+  border-color: var(--figma-color-bg-tooltip-selected-secondary);
+}
+
+@utility outline-figma-bg-tooltip-selected-secondary {
+  outline-color: var(--figma-color-bg-tooltip-selected-secondary);
+}
+
+@utility fill-figma-bg-tooltip-selected-secondary {
+  fill: var(--figma-color-bg-tooltip-selected-secondary);
+}
+
+@utility stroke-figma-bg-tooltip-selected-secondary {
+  stroke: var(--figma-color-bg-tooltip-selected-secondary);
+}
+
+@utility icon-figma-bg-tooltip-selected-secondary {
+  --color-icon: var(--figma-color-bg-tooltip-selected-secondary);
+}
+
+@utility bg-figma-tooltip-selected-tertiary {
+  background-color: var(--figma-color-bg-tooltip-selected-tertiary);
+}
+
+@utility bg-figma-bg-tooltip-selected-tertiary {
+  background-color: var(--figma-color-bg-tooltip-selected-tertiary);
+}
+
+@utility text-figma-bg-tooltip-selected-tertiary {
+  color: var(--figma-color-bg-tooltip-selected-tertiary);
+}
+
+@utility border-figma-bg-tooltip-selected-tertiary {
+  border-color: var(--figma-color-bg-tooltip-selected-tertiary);
+}
+
+@utility outline-figma-bg-tooltip-selected-tertiary {
+  outline-color: var(--figma-color-bg-tooltip-selected-tertiary);
+}
+
+@utility fill-figma-bg-tooltip-selected-tertiary {
+  fill: var(--figma-color-bg-tooltip-selected-tertiary);
+}
+
+@utility stroke-figma-bg-tooltip-selected-tertiary {
+  stroke: var(--figma-color-bg-tooltip-selected-tertiary);
+}
+
+@utility icon-figma-bg-tooltip-selected-tertiary {
+  --color-icon: var(--figma-color-bg-tooltip-selected-tertiary);
+}
+
+@utility bg-figma-tooltip-tertiary {
+  background-color: var(--figma-color-bg-tooltip-tertiary);
+}
+
+@utility bg-figma-bg-tooltip-tertiary {
+  background-color: var(--figma-color-bg-tooltip-tertiary);
+}
+
+@utility text-figma-bg-tooltip-tertiary {
+  color: var(--figma-color-bg-tooltip-tertiary);
+}
+
+@utility border-figma-bg-tooltip-tertiary {
+  border-color: var(--figma-color-bg-tooltip-tertiary);
+}
+
+@utility outline-figma-bg-tooltip-tertiary {
+  outline-color: var(--figma-color-bg-tooltip-tertiary);
+}
+
+@utility fill-figma-bg-tooltip-tertiary {
+  fill: var(--figma-color-bg-tooltip-tertiary);
+}
+
+@utility stroke-figma-bg-tooltip-tertiary {
+  stroke: var(--figma-color-bg-tooltip-tertiary);
+}
+
+@utility icon-figma-bg-tooltip-tertiary {
+  --color-icon: var(--figma-color-bg-tooltip-tertiary);
+}
+
+@utility bg-figma-warning {
+  background-color: var(--figma-color-bg-warning);
+}
+
+@utility bg-figma-bg-warning {
+  background-color: var(--figma-color-bg-warning);
+}
+
+@utility text-figma-bg-warning {
+  color: var(--figma-color-bg-warning);
+}
+
+@utility border-figma-bg-warning {
+  border-color: var(--figma-color-bg-warning);
+}
+
+@utility outline-figma-bg-warning {
+  outline-color: var(--figma-color-bg-warning);
+}
+
+@utility fill-figma-bg-warning {
+  fill: var(--figma-color-bg-warning);
+}
+
+@utility stroke-figma-bg-warning {
+  stroke: var(--figma-color-bg-warning);
+}
+
+@utility icon-figma-bg-warning {
+  --color-icon: var(--figma-color-bg-warning);
+}
+
+@utility bg-figma-warning-hover {
+  background-color: var(--figma-color-bg-warning-hover);
+}
+
+@utility bg-figma-bg-warning-hover {
+  background-color: var(--figma-color-bg-warning-hover);
+}
+
+@utility text-figma-bg-warning-hover {
+  color: var(--figma-color-bg-warning-hover);
+}
+
+@utility border-figma-bg-warning-hover {
+  border-color: var(--figma-color-bg-warning-hover);
+}
+
+@utility outline-figma-bg-warning-hover {
+  outline-color: var(--figma-color-bg-warning-hover);
+}
+
+@utility fill-figma-bg-warning-hover {
+  fill: var(--figma-color-bg-warning-hover);
+}
+
+@utility stroke-figma-bg-warning-hover {
+  stroke: var(--figma-color-bg-warning-hover);
+}
+
+@utility icon-figma-bg-warning-hover {
+  --color-icon: var(--figma-color-bg-warning-hover);
+}
+
+@utility bg-figma-warning-pressed {
+  background-color: var(--figma-color-bg-warning-pressed);
+}
+
+@utility bg-figma-bg-warning-pressed {
+  background-color: var(--figma-color-bg-warning-pressed);
+}
+
+@utility text-figma-bg-warning-pressed {
+  color: var(--figma-color-bg-warning-pressed);
+}
+
+@utility border-figma-bg-warning-pressed {
+  border-color: var(--figma-color-bg-warning-pressed);
+}
+
+@utility outline-figma-bg-warning-pressed {
+  outline-color: var(--figma-color-bg-warning-pressed);
+}
+
+@utility fill-figma-bg-warning-pressed {
+  fill: var(--figma-color-bg-warning-pressed);
+}
+
+@utility stroke-figma-bg-warning-pressed {
+  stroke: var(--figma-color-bg-warning-pressed);
+}
+
+@utility icon-figma-bg-warning-pressed {
+  --color-icon: var(--figma-color-bg-warning-pressed);
+}
+
+@utility bg-figma-warning-secondary {
+  background-color: var(--figma-color-bg-warning-secondary);
+}
+
+@utility bg-figma-bg-warning-secondary {
+  background-color: var(--figma-color-bg-warning-secondary);
+}
+
+@utility text-figma-bg-warning-secondary {
+  color: var(--figma-color-bg-warning-secondary);
+}
+
+@utility border-figma-bg-warning-secondary {
+  border-color: var(--figma-color-bg-warning-secondary);
+}
+
+@utility outline-figma-bg-warning-secondary {
+  outline-color: var(--figma-color-bg-warning-secondary);
+}
+
+@utility fill-figma-bg-warning-secondary {
+  fill: var(--figma-color-bg-warning-secondary);
+}
+
+@utility stroke-figma-bg-warning-secondary {
+  stroke: var(--figma-color-bg-warning-secondary);
+}
+
+@utility icon-figma-bg-warning-secondary {
+  --color-icon: var(--figma-color-bg-warning-secondary);
+}
+
+@utility bg-figma-warning-tertiary {
+  background-color: var(--figma-color-bg-warning-tertiary);
+}
+
+@utility bg-figma-bg-warning-tertiary {
+  background-color: var(--figma-color-bg-warning-tertiary);
+}
+
+@utility text-figma-bg-warning-tertiary {
+  color: var(--figma-color-bg-warning-tertiary);
+}
+
+@utility border-figma-bg-warning-tertiary {
+  border-color: var(--figma-color-bg-warning-tertiary);
+}
+
+@utility outline-figma-bg-warning-tertiary {
+  outline-color: var(--figma-color-bg-warning-tertiary);
+}
+
+@utility fill-figma-bg-warning-tertiary {
+  fill: var(--figma-color-bg-warning-tertiary);
+}
+
+@utility stroke-figma-bg-warning-tertiary {
+  stroke: var(--figma-color-bg-warning-tertiary);
+}
+
+@utility icon-figma-bg-warning-tertiary {
+  --color-icon: var(--figma-color-bg-warning-tertiary);
+}
+
+@utility border-figma {
+  border-color: var(--figma-color-border);
+}
+
+@utility bg-figma-border {
+  background-color: var(--figma-color-border);
+}
+
+@utility text-figma-border {
+  color: var(--figma-color-border);
+}
+
+@utility border-figma-border {
+  border-color: var(--figma-color-border);
+}
+
+@utility outline-figma-border {
+  outline-color: var(--figma-color-border);
+}
+
+@utility fill-figma-border {
+  fill: var(--figma-color-border);
+}
+
+@utility stroke-figma-border {
+  stroke: var(--figma-color-border);
+}
+
+@utility icon-figma-border {
+  --color-icon: var(--figma-color-border);
+}
+
+@utility border-figma-assistive {
+  border-color: var(--figma-color-border-assistive);
+}
+
+@utility bg-figma-border-assistive {
+  background-color: var(--figma-color-border-assistive);
+}
+
+@utility text-figma-border-assistive {
+  color: var(--figma-color-border-assistive);
+}
+
+@utility border-figma-border-assistive {
+  border-color: var(--figma-color-border-assistive);
+}
+
+@utility outline-figma-border-assistive {
+  outline-color: var(--figma-color-border-assistive);
+}
+
+@utility fill-figma-border-assistive {
+  fill: var(--figma-color-border-assistive);
+}
+
+@utility stroke-figma-border-assistive {
+  stroke: var(--figma-color-border-assistive);
+}
+
+@utility icon-figma-border-assistive {
+  --color-icon: var(--figma-color-border-assistive);
+}
+
+@utility border-figma-assistive-strong {
+  border-color: var(--figma-color-border-assistive-strong);
+}
+
+@utility bg-figma-border-assistive-strong {
+  background-color: var(--figma-color-border-assistive-strong);
+}
+
+@utility text-figma-border-assistive-strong {
+  color: var(--figma-color-border-assistive-strong);
+}
+
+@utility border-figma-border-assistive-strong {
+  border-color: var(--figma-color-border-assistive-strong);
+}
+
+@utility outline-figma-border-assistive-strong {
+  outline-color: var(--figma-color-border-assistive-strong);
+}
+
+@utility fill-figma-border-assistive-strong {
+  fill: var(--figma-color-border-assistive-strong);
+}
+
+@utility stroke-figma-border-assistive-strong {
+  stroke: var(--figma-color-border-assistive-strong);
+}
+
+@utility icon-figma-border-assistive-strong {
+  --color-icon: var(--figma-color-border-assistive-strong);
+}
+
+@utility border-figma-brand {
+  border-color: var(--figma-color-border-brand);
+}
+
+@utility bg-figma-border-brand {
+  background-color: var(--figma-color-border-brand);
+}
+
+@utility text-figma-border-brand {
+  color: var(--figma-color-border-brand);
+}
+
+@utility border-figma-border-brand {
+  border-color: var(--figma-color-border-brand);
+}
+
+@utility outline-figma-border-brand {
+  outline-color: var(--figma-color-border-brand);
+}
+
+@utility fill-figma-border-brand {
+  fill: var(--figma-color-border-brand);
+}
+
+@utility stroke-figma-border-brand {
+  stroke: var(--figma-color-border-brand);
+}
+
+@utility icon-figma-border-brand {
+  --color-icon: var(--figma-color-border-brand);
+}
+
+@utility border-figma-brand-strong {
+  border-color: var(--figma-color-border-brand-strong);
+}
+
+@utility bg-figma-border-brand-strong {
+  background-color: var(--figma-color-border-brand-strong);
+}
+
+@utility text-figma-border-brand-strong {
+  color: var(--figma-color-border-brand-strong);
+}
+
+@utility border-figma-border-brand-strong {
+  border-color: var(--figma-color-border-brand-strong);
+}
+
+@utility outline-figma-border-brand-strong {
+  outline-color: var(--figma-color-border-brand-strong);
+}
+
+@utility fill-figma-border-brand-strong {
+  fill: var(--figma-color-border-brand-strong);
+}
+
+@utility stroke-figma-border-brand-strong {
+  stroke: var(--figma-color-border-brand-strong);
+}
+
+@utility icon-figma-border-brand-strong {
+  --color-icon: var(--figma-color-border-brand-strong);
+}
+
+@utility border-figma-component {
+  border-color: var(--figma-color-border-component);
+}
+
+@utility bg-figma-border-component {
+  background-color: var(--figma-color-border-component);
+}
+
+@utility text-figma-border-component {
+  color: var(--figma-color-border-component);
+}
+
+@utility border-figma-border-component {
+  border-color: var(--figma-color-border-component);
+}
+
+@utility outline-figma-border-component {
+  outline-color: var(--figma-color-border-component);
+}
+
+@utility fill-figma-border-component {
+  fill: var(--figma-color-border-component);
+}
+
+@utility stroke-figma-border-component {
+  stroke: var(--figma-color-border-component);
+}
+
+@utility icon-figma-border-component {
+  --color-icon: var(--figma-color-border-component);
+}
+
+@utility border-figma-component-hover {
+  border-color: var(--figma-color-border-component-hover);
+}
+
+@utility bg-figma-border-component-hover {
+  background-color: var(--figma-color-border-component-hover);
+}
+
+@utility text-figma-border-component-hover {
+  color: var(--figma-color-border-component-hover);
+}
+
+@utility border-figma-border-component-hover {
+  border-color: var(--figma-color-border-component-hover);
+}
+
+@utility outline-figma-border-component-hover {
+  outline-color: var(--figma-color-border-component-hover);
+}
+
+@utility fill-figma-border-component-hover {
+  fill: var(--figma-color-border-component-hover);
+}
+
+@utility stroke-figma-border-component-hover {
+  stroke: var(--figma-color-border-component-hover);
+}
+
+@utility icon-figma-border-component-hover {
+  --color-icon: var(--figma-color-border-component-hover);
+}
+
+@utility border-figma-component-strong {
+  border-color: var(--figma-color-border-component-strong);
+}
+
+@utility bg-figma-border-component-strong {
+  background-color: var(--figma-color-border-component-strong);
+}
+
+@utility text-figma-border-component-strong {
+  color: var(--figma-color-border-component-strong);
+}
+
+@utility border-figma-border-component-strong {
+  border-color: var(--figma-color-border-component-strong);
+}
+
+@utility outline-figma-border-component-strong {
+  outline-color: var(--figma-color-border-component-strong);
+}
+
+@utility fill-figma-border-component-strong {
+  fill: var(--figma-color-border-component-strong);
+}
+
+@utility stroke-figma-border-component-strong {
+  stroke: var(--figma-color-border-component-strong);
+}
+
+@utility icon-figma-border-component-strong {
+  --color-icon: var(--figma-color-border-component-strong);
+}
+
+@utility border-figma-danger {
+  border-color: var(--figma-color-border-danger);
+}
+
+@utility bg-figma-border-danger {
+  background-color: var(--figma-color-border-danger);
+}
+
+@utility text-figma-border-danger {
+  color: var(--figma-color-border-danger);
+}
+
+@utility border-figma-border-danger {
+  border-color: var(--figma-color-border-danger);
+}
+
+@utility outline-figma-border-danger {
+  outline-color: var(--figma-color-border-danger);
+}
+
+@utility fill-figma-border-danger {
+  fill: var(--figma-color-border-danger);
+}
+
+@utility stroke-figma-border-danger {
+  stroke: var(--figma-color-border-danger);
+}
+
+@utility icon-figma-border-danger {
+  --color-icon: var(--figma-color-border-danger);
+}
+
+@utility border-figma-danger-strong {
+  border-color: var(--figma-color-border-danger-strong);
+}
+
+@utility bg-figma-border-danger-strong {
+  background-color: var(--figma-color-border-danger-strong);
+}
+
+@utility text-figma-border-danger-strong {
+  color: var(--figma-color-border-danger-strong);
+}
+
+@utility border-figma-border-danger-strong {
+  border-color: var(--figma-color-border-danger-strong);
+}
+
+@utility outline-figma-border-danger-strong {
+  outline-color: var(--figma-color-border-danger-strong);
+}
+
+@utility fill-figma-border-danger-strong {
+  fill: var(--figma-color-border-danger-strong);
+}
+
+@utility stroke-figma-border-danger-strong {
+  stroke: var(--figma-color-border-danger-strong);
+}
+
+@utility icon-figma-border-danger-strong {
+  --color-icon: var(--figma-color-border-danger-strong);
+}
+
+@utility border-figma-design {
+  border-color: var(--figma-color-border-design);
+}
+
+@utility bg-figma-border-design {
+  background-color: var(--figma-color-border-design);
+}
+
+@utility text-figma-border-design {
+  color: var(--figma-color-border-design);
+}
+
+@utility border-figma-border-design {
+  border-color: var(--figma-color-border-design);
+}
+
+@utility outline-figma-border-design {
+  outline-color: var(--figma-color-border-design);
+}
+
+@utility fill-figma-border-design {
+  fill: var(--figma-color-border-design);
+}
+
+@utility stroke-figma-border-design {
+  stroke: var(--figma-color-border-design);
+}
+
+@utility icon-figma-border-design {
+  --color-icon: var(--figma-color-border-design);
+}
+
+@utility border-figma-design-strong {
+  border-color: var(--figma-color-border-design-strong);
+}
+
+@utility bg-figma-border-design-strong {
+  background-color: var(--figma-color-border-design-strong);
+}
+
+@utility text-figma-border-design-strong {
+  color: var(--figma-color-border-design-strong);
+}
+
+@utility border-figma-border-design-strong {
+  border-color: var(--figma-color-border-design-strong);
+}
+
+@utility outline-figma-border-design-strong {
+  outline-color: var(--figma-color-border-design-strong);
+}
+
+@utility fill-figma-border-design-strong {
+  fill: var(--figma-color-border-design-strong);
+}
+
+@utility stroke-figma-border-design-strong {
+  stroke: var(--figma-color-border-design-strong);
+}
+
+@utility icon-figma-border-design-strong {
+  --color-icon: var(--figma-color-border-design-strong);
+}
+
+@utility border-figma-disabled {
+  border-color: var(--figma-color-border-disabled);
+}
+
+@utility bg-figma-border-disabled {
+  background-color: var(--figma-color-border-disabled);
+}
+
+@utility text-figma-border-disabled {
+  color: var(--figma-color-border-disabled);
+}
+
+@utility border-figma-border-disabled {
+  border-color: var(--figma-color-border-disabled);
+}
+
+@utility outline-figma-border-disabled {
+  outline-color: var(--figma-color-border-disabled);
+}
+
+@utility fill-figma-border-disabled {
+  fill: var(--figma-color-border-disabled);
+}
+
+@utility stroke-figma-border-disabled {
+  stroke: var(--figma-color-border-disabled);
+}
+
+@utility icon-figma-border-disabled {
+  --color-icon: var(--figma-color-border-disabled);
+}
+
+@utility border-figma-disabled-strong {
+  border-color: var(--figma-color-border-disabled-strong);
+}
+
+@utility bg-figma-border-disabled-strong {
+  background-color: var(--figma-color-border-disabled-strong);
+}
+
+@utility text-figma-border-disabled-strong {
+  color: var(--figma-color-border-disabled-strong);
+}
+
+@utility border-figma-border-disabled-strong {
+  border-color: var(--figma-color-border-disabled-strong);
+}
+
+@utility outline-figma-border-disabled-strong {
+  outline-color: var(--figma-color-border-disabled-strong);
+}
+
+@utility fill-figma-border-disabled-strong {
+  fill: var(--figma-color-border-disabled-strong);
+}
+
+@utility stroke-figma-border-disabled-strong {
+  stroke: var(--figma-color-border-disabled-strong);
+}
+
+@utility icon-figma-border-disabled-strong {
+  --color-icon: var(--figma-color-border-disabled-strong);
+}
+
+@utility border-figma-figjam {
+  border-color: var(--figma-color-border-figjam);
+}
+
+@utility bg-figma-border-figjam {
+  background-color: var(--figma-color-border-figjam);
+}
+
+@utility text-figma-border-figjam {
+  color: var(--figma-color-border-figjam);
+}
+
+@utility border-figma-border-figjam {
+  border-color: var(--figma-color-border-figjam);
+}
+
+@utility outline-figma-border-figjam {
+  outline-color: var(--figma-color-border-figjam);
+}
+
+@utility fill-figma-border-figjam {
+  fill: var(--figma-color-border-figjam);
+}
+
+@utility stroke-figma-border-figjam {
+  stroke: var(--figma-color-border-figjam);
+}
+
+@utility icon-figma-border-figjam {
+  --color-icon: var(--figma-color-border-figjam);
+}
+
+@utility border-figma-figjam-strong {
+  border-color: var(--figma-color-border-figjam-strong);
+}
+
+@utility bg-figma-border-figjam-strong {
+  background-color: var(--figma-color-border-figjam-strong);
+}
+
+@utility text-figma-border-figjam-strong {
+  color: var(--figma-color-border-figjam-strong);
+}
+
+@utility border-figma-border-figjam-strong {
+  border-color: var(--figma-color-border-figjam-strong);
+}
+
+@utility outline-figma-border-figjam-strong {
+  outline-color: var(--figma-color-border-figjam-strong);
+}
+
+@utility fill-figma-border-figjam-strong {
+  fill: var(--figma-color-border-figjam-strong);
+}
+
+@utility stroke-figma-border-figjam-strong {
+  stroke: var(--figma-color-border-figjam-strong);
+}
+
+@utility icon-figma-border-figjam-strong {
+  --color-icon: var(--figma-color-border-figjam-strong);
+}
+
+@utility border-figma-handoff {
+  border-color: var(--figma-color-border-handoff);
+}
+
+@utility bg-figma-border-handoff {
+  background-color: var(--figma-color-border-handoff);
+}
+
+@utility text-figma-border-handoff {
+  color: var(--figma-color-border-handoff);
+}
+
+@utility border-figma-border-handoff {
+  border-color: var(--figma-color-border-handoff);
+}
+
+@utility outline-figma-border-handoff {
+  outline-color: var(--figma-color-border-handoff);
+}
+
+@utility fill-figma-border-handoff {
+  fill: var(--figma-color-border-handoff);
+}
+
+@utility stroke-figma-border-handoff {
+  stroke: var(--figma-color-border-handoff);
+}
+
+@utility icon-figma-border-handoff {
+  --color-icon: var(--figma-color-border-handoff);
+}
+
+@utility border-figma-handoff-strong {
+  border-color: var(--figma-color-border-handoff-strong);
+}
+
+@utility bg-figma-border-handoff-strong {
+  background-color: var(--figma-color-border-handoff-strong);
+}
+
+@utility text-figma-border-handoff-strong {
+  color: var(--figma-color-border-handoff-strong);
+}
+
+@utility border-figma-border-handoff-strong {
+  border-color: var(--figma-color-border-handoff-strong);
+}
+
+@utility outline-figma-border-handoff-strong {
+  outline-color: var(--figma-color-border-handoff-strong);
+}
+
+@utility fill-figma-border-handoff-strong {
+  fill: var(--figma-color-border-handoff-strong);
+}
+
+@utility stroke-figma-border-handoff-strong {
+  stroke: var(--figma-color-border-handoff-strong);
+}
+
+@utility icon-figma-border-handoff-strong {
+  --color-icon: var(--figma-color-border-handoff-strong);
+}
+
+@utility border-figma-measure {
+  border-color: var(--figma-color-border-measure);
+}
+
+@utility bg-figma-border-measure {
+  background-color: var(--figma-color-border-measure);
+}
+
+@utility text-figma-border-measure {
+  color: var(--figma-color-border-measure);
+}
+
+@utility border-figma-border-measure {
+  border-color: var(--figma-color-border-measure);
+}
+
+@utility outline-figma-border-measure {
+  outline-color: var(--figma-color-border-measure);
+}
+
+@utility fill-figma-border-measure {
+  fill: var(--figma-color-border-measure);
+}
+
+@utility stroke-figma-border-measure {
+  stroke: var(--figma-color-border-measure);
+}
+
+@utility icon-figma-border-measure {
+  --color-icon: var(--figma-color-border-measure);
+}
+
+@utility border-figma-measure-strong {
+  border-color: var(--figma-color-border-measure-strong);
+}
+
+@utility bg-figma-border-measure-strong {
+  background-color: var(--figma-color-border-measure-strong);
+}
+
+@utility text-figma-border-measure-strong {
+  color: var(--figma-color-border-measure-strong);
+}
+
+@utility border-figma-border-measure-strong {
+  border-color: var(--figma-color-border-measure-strong);
+}
+
+@utility outline-figma-border-measure-strong {
+  outline-color: var(--figma-color-border-measure-strong);
+}
+
+@utility fill-figma-border-measure-strong {
+  fill: var(--figma-color-border-measure-strong);
+}
+
+@utility stroke-figma-border-measure-strong {
+  stroke: var(--figma-color-border-measure-strong);
+}
+
+@utility icon-figma-border-measure-strong {
+  --color-icon: var(--figma-color-border-measure-strong);
+}
+
+@utility border-figma-menu {
+  border-color: var(--figma-color-border-menu);
+}
+
+@utility bg-figma-border-menu {
+  background-color: var(--figma-color-border-menu);
+}
+
+@utility text-figma-border-menu {
+  color: var(--figma-color-border-menu);
+}
+
+@utility border-figma-border-menu {
+  border-color: var(--figma-color-border-menu);
+}
+
+@utility outline-figma-border-menu {
+  outline-color: var(--figma-color-border-menu);
+}
+
+@utility fill-figma-border-menu {
+  fill: var(--figma-color-border-menu);
+}
+
+@utility stroke-figma-border-menu {
+  stroke: var(--figma-color-border-menu);
+}
+
+@utility icon-figma-border-menu {
+  --color-icon: var(--figma-color-border-menu);
+}
+
+@utility border-figma-menu-disabled {
+  border-color: var(--figma-color-border-menu-disabled);
+}
+
+@utility bg-figma-border-menu-disabled {
+  background-color: var(--figma-color-border-menu-disabled);
+}
+
+@utility text-figma-border-menu-disabled {
+  color: var(--figma-color-border-menu-disabled);
+}
+
+@utility border-figma-border-menu-disabled {
+  border-color: var(--figma-color-border-menu-disabled);
+}
+
+@utility outline-figma-border-menu-disabled {
+  outline-color: var(--figma-color-border-menu-disabled);
+}
+
+@utility fill-figma-border-menu-disabled {
+  fill: var(--figma-color-border-menu-disabled);
+}
+
+@utility stroke-figma-border-menu-disabled {
+  stroke: var(--figma-color-border-menu-disabled);
+}
+
+@utility icon-figma-border-menu-disabled {
+  --color-icon: var(--figma-color-border-menu-disabled);
+}
+
+@utility border-figma-menu-disabled-strong {
+  border-color: var(--figma-color-border-menu-disabled-strong);
+}
+
+@utility bg-figma-border-menu-disabled-strong {
+  background-color: var(--figma-color-border-menu-disabled-strong);
+}
+
+@utility text-figma-border-menu-disabled-strong {
+  color: var(--figma-color-border-menu-disabled-strong);
+}
+
+@utility border-figma-border-menu-disabled-strong {
+  border-color: var(--figma-color-border-menu-disabled-strong);
+}
+
+@utility outline-figma-border-menu-disabled-strong {
+  outline-color: var(--figma-color-border-menu-disabled-strong);
+}
+
+@utility fill-figma-border-menu-disabled-strong {
+  fill: var(--figma-color-border-menu-disabled-strong);
+}
+
+@utility stroke-figma-border-menu-disabled-strong {
+  stroke: var(--figma-color-border-menu-disabled-strong);
+}
+
+@utility icon-figma-border-menu-disabled-strong {
+  --color-icon: var(--figma-color-border-menu-disabled-strong);
+}
+
+@utility border-figma-menu-onselected {
+  border-color: var(--figma-color-border-menu-onselected);
+}
+
+@utility bg-figma-border-menu-onselected {
+  background-color: var(--figma-color-border-menu-onselected);
+}
+
+@utility text-figma-border-menu-onselected {
+  color: var(--figma-color-border-menu-onselected);
+}
+
+@utility border-figma-border-menu-onselected {
+  border-color: var(--figma-color-border-menu-onselected);
+}
+
+@utility outline-figma-border-menu-onselected {
+  outline-color: var(--figma-color-border-menu-onselected);
+}
+
+@utility fill-figma-border-menu-onselected {
+  fill: var(--figma-color-border-menu-onselected);
+}
+
+@utility stroke-figma-border-menu-onselected {
+  stroke: var(--figma-color-border-menu-onselected);
+}
+
+@utility icon-figma-border-menu-onselected {
+  --color-icon: var(--figma-color-border-menu-onselected);
+}
+
+@utility border-figma-menu-onselected-strong {
+  border-color: var(--figma-color-border-menu-onselected-strong);
+}
+
+@utility bg-figma-border-menu-onselected-strong {
+  background-color: var(--figma-color-border-menu-onselected-strong);
+}
+
+@utility text-figma-border-menu-onselected-strong {
+  color: var(--figma-color-border-menu-onselected-strong);
+}
+
+@utility border-figma-border-menu-onselected-strong {
+  border-color: var(--figma-color-border-menu-onselected-strong);
+}
+
+@utility outline-figma-border-menu-onselected-strong {
+  outline-color: var(--figma-color-border-menu-onselected-strong);
+}
+
+@utility fill-figma-border-menu-onselected-strong {
+  fill: var(--figma-color-border-menu-onselected-strong);
+}
+
+@utility stroke-figma-border-menu-onselected-strong {
+  stroke: var(--figma-color-border-menu-onselected-strong);
+}
+
+@utility icon-figma-border-menu-onselected-strong {
+  --color-icon: var(--figma-color-border-menu-onselected-strong);
+}
+
+@utility border-figma-menu-selected {
+  border-color: var(--figma-color-border-menu-selected);
+}
+
+@utility bg-figma-border-menu-selected {
+  background-color: var(--figma-color-border-menu-selected);
+}
+
+@utility text-figma-border-menu-selected {
+  color: var(--figma-color-border-menu-selected);
+}
+
+@utility border-figma-border-menu-selected {
+  border-color: var(--figma-color-border-menu-selected);
+}
+
+@utility outline-figma-border-menu-selected {
+  outline-color: var(--figma-color-border-menu-selected);
+}
+
+@utility fill-figma-border-menu-selected {
+  fill: var(--figma-color-border-menu-selected);
+}
+
+@utility stroke-figma-border-menu-selected {
+  stroke: var(--figma-color-border-menu-selected);
+}
+
+@utility icon-figma-border-menu-selected {
+  --color-icon: var(--figma-color-border-menu-selected);
+}
+
+@utility border-figma-menu-selected-strong {
+  border-color: var(--figma-color-border-menu-selected-strong);
+}
+
+@utility bg-figma-border-menu-selected-strong {
+  background-color: var(--figma-color-border-menu-selected-strong);
+}
+
+@utility text-figma-border-menu-selected-strong {
+  color: var(--figma-color-border-menu-selected-strong);
+}
+
+@utility border-figma-border-menu-selected-strong {
+  border-color: var(--figma-color-border-menu-selected-strong);
+}
+
+@utility outline-figma-border-menu-selected-strong {
+  outline-color: var(--figma-color-border-menu-selected-strong);
+}
+
+@utility fill-figma-border-menu-selected-strong {
+  fill: var(--figma-color-border-menu-selected-strong);
+}
+
+@utility stroke-figma-border-menu-selected-strong {
+  stroke: var(--figma-color-border-menu-selected-strong);
+}
+
+@utility icon-figma-border-menu-selected-strong {
+  --color-icon: var(--figma-color-border-menu-selected-strong);
+}
+
+@utility border-figma-menu-strong {
+  border-color: var(--figma-color-border-menu-strong);
+}
+
+@utility bg-figma-border-menu-strong {
+  background-color: var(--figma-color-border-menu-strong);
+}
+
+@utility text-figma-border-menu-strong {
+  color: var(--figma-color-border-menu-strong);
+}
+
+@utility border-figma-border-menu-strong {
+  border-color: var(--figma-color-border-menu-strong);
+}
+
+@utility outline-figma-border-menu-strong {
+  outline-color: var(--figma-color-border-menu-strong);
+}
+
+@utility fill-figma-border-menu-strong {
+  fill: var(--figma-color-border-menu-strong);
+}
+
+@utility stroke-figma-border-menu-strong {
+  stroke: var(--figma-color-border-menu-strong);
+}
+
+@utility icon-figma-border-menu-strong {
+  --color-icon: var(--figma-color-border-menu-strong);
+}
+
+@utility border-figma-onassistive {
+  border-color: var(--figma-color-border-onassistive);
+}
+
+@utility bg-figma-border-onassistive {
+  background-color: var(--figma-color-border-onassistive);
+}
+
+@utility text-figma-border-onassistive {
+  color: var(--figma-color-border-onassistive);
+}
+
+@utility border-figma-border-onassistive {
+  border-color: var(--figma-color-border-onassistive);
+}
+
+@utility outline-figma-border-onassistive {
+  outline-color: var(--figma-color-border-onassistive);
+}
+
+@utility fill-figma-border-onassistive {
+  fill: var(--figma-color-border-onassistive);
+}
+
+@utility stroke-figma-border-onassistive {
+  stroke: var(--figma-color-border-onassistive);
+}
+
+@utility icon-figma-border-onassistive {
+  --color-icon: var(--figma-color-border-onassistive);
+}
+
+@utility border-figma-onassistive-strong {
+  border-color: var(--figma-color-border-onassistive-strong);
+}
+
+@utility bg-figma-border-onassistive-strong {
+  background-color: var(--figma-color-border-onassistive-strong);
+}
+
+@utility text-figma-border-onassistive-strong {
+  color: var(--figma-color-border-onassistive-strong);
+}
+
+@utility border-figma-border-onassistive-strong {
+  border-color: var(--figma-color-border-onassistive-strong);
+}
+
+@utility outline-figma-border-onassistive-strong {
+  outline-color: var(--figma-color-border-onassistive-strong);
+}
+
+@utility fill-figma-border-onassistive-strong {
+  fill: var(--figma-color-border-onassistive-strong);
+}
+
+@utility stroke-figma-border-onassistive-strong {
+  stroke: var(--figma-color-border-onassistive-strong);
+}
+
+@utility icon-figma-border-onassistive-strong {
+  --color-icon: var(--figma-color-border-onassistive-strong);
+}
+
+@utility border-figma-onbrand {
+  border-color: var(--figma-color-border-onbrand);
+}
+
+@utility bg-figma-border-onbrand {
+  background-color: var(--figma-color-border-onbrand);
+}
+
+@utility text-figma-border-onbrand {
+  color: var(--figma-color-border-onbrand);
+}
+
+@utility border-figma-border-onbrand {
+  border-color: var(--figma-color-border-onbrand);
+}
+
+@utility outline-figma-border-onbrand {
+  outline-color: var(--figma-color-border-onbrand);
+}
+
+@utility fill-figma-border-onbrand {
+  fill: var(--figma-color-border-onbrand);
+}
+
+@utility stroke-figma-border-onbrand {
+  stroke: var(--figma-color-border-onbrand);
+}
+
+@utility icon-figma-border-onbrand {
+  --color-icon: var(--figma-color-border-onbrand);
+}
+
+@utility border-figma-onbrand-strong {
+  border-color: var(--figma-color-border-onbrand-strong);
+}
+
+@utility bg-figma-border-onbrand-strong {
+  background-color: var(--figma-color-border-onbrand-strong);
+}
+
+@utility text-figma-border-onbrand-strong {
+  color: var(--figma-color-border-onbrand-strong);
+}
+
+@utility border-figma-border-onbrand-strong {
+  border-color: var(--figma-color-border-onbrand-strong);
+}
+
+@utility outline-figma-border-onbrand-strong {
+  outline-color: var(--figma-color-border-onbrand-strong);
+}
+
+@utility fill-figma-border-onbrand-strong {
+  fill: var(--figma-color-border-onbrand-strong);
+}
+
+@utility stroke-figma-border-onbrand-strong {
+  stroke: var(--figma-color-border-onbrand-strong);
+}
+
+@utility icon-figma-border-onbrand-strong {
+  --color-icon: var(--figma-color-border-onbrand-strong);
+}
+
+@utility border-figma-oncomponent {
+  border-color: var(--figma-color-border-oncomponent);
+}
+
+@utility bg-figma-border-oncomponent {
+  background-color: var(--figma-color-border-oncomponent);
+}
+
+@utility text-figma-border-oncomponent {
+  color: var(--figma-color-border-oncomponent);
+}
+
+@utility border-figma-border-oncomponent {
+  border-color: var(--figma-color-border-oncomponent);
+}
+
+@utility outline-figma-border-oncomponent {
+  outline-color: var(--figma-color-border-oncomponent);
+}
+
+@utility fill-figma-border-oncomponent {
+  fill: var(--figma-color-border-oncomponent);
+}
+
+@utility stroke-figma-border-oncomponent {
+  stroke: var(--figma-color-border-oncomponent);
+}
+
+@utility icon-figma-border-oncomponent {
+  --color-icon: var(--figma-color-border-oncomponent);
+}
+
+@utility border-figma-oncomponent-strong {
+  border-color: var(--figma-color-border-oncomponent-strong);
+}
+
+@utility bg-figma-border-oncomponent-strong {
+  background-color: var(--figma-color-border-oncomponent-strong);
+}
+
+@utility text-figma-border-oncomponent-strong {
+  color: var(--figma-color-border-oncomponent-strong);
+}
+
+@utility border-figma-border-oncomponent-strong {
+  border-color: var(--figma-color-border-oncomponent-strong);
+}
+
+@utility outline-figma-border-oncomponent-strong {
+  outline-color: var(--figma-color-border-oncomponent-strong);
+}
+
+@utility fill-figma-border-oncomponent-strong {
+  fill: var(--figma-color-border-oncomponent-strong);
+}
+
+@utility stroke-figma-border-oncomponent-strong {
+  stroke: var(--figma-color-border-oncomponent-strong);
+}
+
+@utility icon-figma-border-oncomponent-strong {
+  --color-icon: var(--figma-color-border-oncomponent-strong);
+}
+
+@utility border-figma-ondanger {
+  border-color: var(--figma-color-border-ondanger);
+}
+
+@utility bg-figma-border-ondanger {
+  background-color: var(--figma-color-border-ondanger);
+}
+
+@utility text-figma-border-ondanger {
+  color: var(--figma-color-border-ondanger);
+}
+
+@utility border-figma-border-ondanger {
+  border-color: var(--figma-color-border-ondanger);
+}
+
+@utility outline-figma-border-ondanger {
+  outline-color: var(--figma-color-border-ondanger);
+}
+
+@utility fill-figma-border-ondanger {
+  fill: var(--figma-color-border-ondanger);
+}
+
+@utility stroke-figma-border-ondanger {
+  stroke: var(--figma-color-border-ondanger);
+}
+
+@utility icon-figma-border-ondanger {
+  --color-icon: var(--figma-color-border-ondanger);
+}
+
+@utility border-figma-ondanger-strong {
+  border-color: var(--figma-color-border-ondanger-strong);
+}
+
+@utility bg-figma-border-ondanger-strong {
+  background-color: var(--figma-color-border-ondanger-strong);
+}
+
+@utility text-figma-border-ondanger-strong {
+  color: var(--figma-color-border-ondanger-strong);
+}
+
+@utility border-figma-border-ondanger-strong {
+  border-color: var(--figma-color-border-ondanger-strong);
+}
+
+@utility outline-figma-border-ondanger-strong {
+  outline-color: var(--figma-color-border-ondanger-strong);
+}
+
+@utility fill-figma-border-ondanger-strong {
+  fill: var(--figma-color-border-ondanger-strong);
+}
+
+@utility stroke-figma-border-ondanger-strong {
+  stroke: var(--figma-color-border-ondanger-strong);
+}
+
+@utility icon-figma-border-ondanger-strong {
+  --color-icon: var(--figma-color-border-ondanger-strong);
+}
+
+@utility border-figma-ondesign {
+  border-color: var(--figma-color-border-ondesign);
+}
+
+@utility bg-figma-border-ondesign {
+  background-color: var(--figma-color-border-ondesign);
+}
+
+@utility text-figma-border-ondesign {
+  color: var(--figma-color-border-ondesign);
+}
+
+@utility border-figma-border-ondesign {
+  border-color: var(--figma-color-border-ondesign);
+}
+
+@utility outline-figma-border-ondesign {
+  outline-color: var(--figma-color-border-ondesign);
+}
+
+@utility fill-figma-border-ondesign {
+  fill: var(--figma-color-border-ondesign);
+}
+
+@utility stroke-figma-border-ondesign {
+  stroke: var(--figma-color-border-ondesign);
+}
+
+@utility icon-figma-border-ondesign {
+  --color-icon: var(--figma-color-border-ondesign);
+}
+
+@utility border-figma-ondesign-strong {
+  border-color: var(--figma-color-border-ondesign-strong);
+}
+
+@utility bg-figma-border-ondesign-strong {
+  background-color: var(--figma-color-border-ondesign-strong);
+}
+
+@utility text-figma-border-ondesign-strong {
+  color: var(--figma-color-border-ondesign-strong);
+}
+
+@utility border-figma-border-ondesign-strong {
+  border-color: var(--figma-color-border-ondesign-strong);
+}
+
+@utility outline-figma-border-ondesign-strong {
+  outline-color: var(--figma-color-border-ondesign-strong);
+}
+
+@utility fill-figma-border-ondesign-strong {
+  fill: var(--figma-color-border-ondesign-strong);
+}
+
+@utility stroke-figma-border-ondesign-strong {
+  stroke: var(--figma-color-border-ondesign-strong);
+}
+
+@utility icon-figma-border-ondesign-strong {
+  --color-icon: var(--figma-color-border-ondesign-strong);
+}
+
+@utility border-figma-onfigjam {
+  border-color: var(--figma-color-border-onfigjam);
+}
+
+@utility bg-figma-border-onfigjam {
+  background-color: var(--figma-color-border-onfigjam);
+}
+
+@utility text-figma-border-onfigjam {
+  color: var(--figma-color-border-onfigjam);
+}
+
+@utility border-figma-border-onfigjam {
+  border-color: var(--figma-color-border-onfigjam);
+}
+
+@utility outline-figma-border-onfigjam {
+  outline-color: var(--figma-color-border-onfigjam);
+}
+
+@utility fill-figma-border-onfigjam {
+  fill: var(--figma-color-border-onfigjam);
+}
+
+@utility stroke-figma-border-onfigjam {
+  stroke: var(--figma-color-border-onfigjam);
+}
+
+@utility icon-figma-border-onfigjam {
+  --color-icon: var(--figma-color-border-onfigjam);
+}
+
+@utility border-figma-onfigjam-strong {
+  border-color: var(--figma-color-border-onfigjam-strong);
+}
+
+@utility bg-figma-border-onfigjam-strong {
+  background-color: var(--figma-color-border-onfigjam-strong);
+}
+
+@utility text-figma-border-onfigjam-strong {
+  color: var(--figma-color-border-onfigjam-strong);
+}
+
+@utility border-figma-border-onfigjam-strong {
+  border-color: var(--figma-color-border-onfigjam-strong);
+}
+
+@utility outline-figma-border-onfigjam-strong {
+  outline-color: var(--figma-color-border-onfigjam-strong);
+}
+
+@utility fill-figma-border-onfigjam-strong {
+  fill: var(--figma-color-border-onfigjam-strong);
+}
+
+@utility stroke-figma-border-onfigjam-strong {
+  stroke: var(--figma-color-border-onfigjam-strong);
+}
+
+@utility icon-figma-border-onfigjam-strong {
+  --color-icon: var(--figma-color-border-onfigjam-strong);
+}
+
+@utility border-figma-onmeasure {
+  border-color: var(--figma-color-border-onmeasure);
+}
+
+@utility bg-figma-border-onmeasure {
+  background-color: var(--figma-color-border-onmeasure);
+}
+
+@utility text-figma-border-onmeasure {
+  color: var(--figma-color-border-onmeasure);
+}
+
+@utility border-figma-border-onmeasure {
+  border-color: var(--figma-color-border-onmeasure);
+}
+
+@utility outline-figma-border-onmeasure {
+  outline-color: var(--figma-color-border-onmeasure);
+}
+
+@utility fill-figma-border-onmeasure {
+  fill: var(--figma-color-border-onmeasure);
+}
+
+@utility stroke-figma-border-onmeasure {
+  stroke: var(--figma-color-border-onmeasure);
+}
+
+@utility icon-figma-border-onmeasure {
+  --color-icon: var(--figma-color-border-onmeasure);
+}
+
+@utility border-figma-onmeasure-strong {
+  border-color: var(--figma-color-border-onmeasure-strong);
+}
+
+@utility bg-figma-border-onmeasure-strong {
+  background-color: var(--figma-color-border-onmeasure-strong);
+}
+
+@utility text-figma-border-onmeasure-strong {
+  color: var(--figma-color-border-onmeasure-strong);
+}
+
+@utility border-figma-border-onmeasure-strong {
+  border-color: var(--figma-color-border-onmeasure-strong);
+}
+
+@utility outline-figma-border-onmeasure-strong {
+  outline-color: var(--figma-color-border-onmeasure-strong);
+}
+
+@utility fill-figma-border-onmeasure-strong {
+  fill: var(--figma-color-border-onmeasure-strong);
+}
+
+@utility stroke-figma-border-onmeasure-strong {
+  stroke: var(--figma-color-border-onmeasure-strong);
+}
+
+@utility icon-figma-border-onmeasure-strong {
+  --color-icon: var(--figma-color-border-onmeasure-strong);
+}
+
+@utility border-figma-onselected {
+  border-color: var(--figma-color-border-onselected);
+}
+
+@utility bg-figma-border-onselected {
+  background-color: var(--figma-color-border-onselected);
+}
+
+@utility text-figma-border-onselected {
+  color: var(--figma-color-border-onselected);
+}
+
+@utility border-figma-border-onselected {
+  border-color: var(--figma-color-border-onselected);
+}
+
+@utility outline-figma-border-onselected {
+  outline-color: var(--figma-color-border-onselected);
+}
+
+@utility fill-figma-border-onselected {
+  fill: var(--figma-color-border-onselected);
+}
+
+@utility stroke-figma-border-onselected {
+  stroke: var(--figma-color-border-onselected);
+}
+
+@utility icon-figma-border-onselected {
+  --color-icon: var(--figma-color-border-onselected);
+}
+
+@utility border-figma-onselected-strong {
+  border-color: var(--figma-color-border-onselected-strong);
+}
+
+@utility bg-figma-border-onselected-strong {
+  background-color: var(--figma-color-border-onselected-strong);
+}
+
+@utility text-figma-border-onselected-strong {
+  color: var(--figma-color-border-onselected-strong);
+}
+
+@utility border-figma-border-onselected-strong {
+  border-color: var(--figma-color-border-onselected-strong);
+}
+
+@utility outline-figma-border-onselected-strong {
+  outline-color: var(--figma-color-border-onselected-strong);
+}
+
+@utility fill-figma-border-onselected-strong {
+  fill: var(--figma-color-border-onselected-strong);
+}
+
+@utility stroke-figma-border-onselected-strong {
+  stroke: var(--figma-color-border-onselected-strong);
+}
+
+@utility icon-figma-border-onselected-strong {
+  --color-icon: var(--figma-color-border-onselected-strong);
+}
+
+@utility border-figma-onsuccess {
+  border-color: var(--figma-color-border-onsuccess);
+}
+
+@utility bg-figma-border-onsuccess {
+  background-color: var(--figma-color-border-onsuccess);
+}
+
+@utility text-figma-border-onsuccess {
+  color: var(--figma-color-border-onsuccess);
+}
+
+@utility border-figma-border-onsuccess {
+  border-color: var(--figma-color-border-onsuccess);
+}
+
+@utility outline-figma-border-onsuccess {
+  outline-color: var(--figma-color-border-onsuccess);
+}
+
+@utility fill-figma-border-onsuccess {
+  fill: var(--figma-color-border-onsuccess);
+}
+
+@utility stroke-figma-border-onsuccess {
+  stroke: var(--figma-color-border-onsuccess);
+}
+
+@utility icon-figma-border-onsuccess {
+  --color-icon: var(--figma-color-border-onsuccess);
+}
+
+@utility border-figma-onsuccess-strong {
+  border-color: var(--figma-color-border-onsuccess-strong);
+}
+
+@utility bg-figma-border-onsuccess-strong {
+  background-color: var(--figma-color-border-onsuccess-strong);
+}
+
+@utility text-figma-border-onsuccess-strong {
+  color: var(--figma-color-border-onsuccess-strong);
+}
+
+@utility border-figma-border-onsuccess-strong {
+  border-color: var(--figma-color-border-onsuccess-strong);
+}
+
+@utility outline-figma-border-onsuccess-strong {
+  outline-color: var(--figma-color-border-onsuccess-strong);
+}
+
+@utility fill-figma-border-onsuccess-strong {
+  fill: var(--figma-color-border-onsuccess-strong);
+}
+
+@utility stroke-figma-border-onsuccess-strong {
+  stroke: var(--figma-color-border-onsuccess-strong);
+}
+
+@utility icon-figma-border-onsuccess-strong {
+  --color-icon: var(--figma-color-border-onsuccess-strong);
+}
+
+@utility border-figma-onwarning {
+  border-color: var(--figma-color-border-onwarning);
+}
+
+@utility bg-figma-border-onwarning {
+  background-color: var(--figma-color-border-onwarning);
+}
+
+@utility text-figma-border-onwarning {
+  color: var(--figma-color-border-onwarning);
+}
+
+@utility border-figma-border-onwarning {
+  border-color: var(--figma-color-border-onwarning);
+}
+
+@utility outline-figma-border-onwarning {
+  outline-color: var(--figma-color-border-onwarning);
+}
+
+@utility fill-figma-border-onwarning {
+  fill: var(--figma-color-border-onwarning);
+}
+
+@utility stroke-figma-border-onwarning {
+  stroke: var(--figma-color-border-onwarning);
+}
+
+@utility icon-figma-border-onwarning {
+  --color-icon: var(--figma-color-border-onwarning);
+}
+
+@utility border-figma-onwarning-strong {
+  border-color: var(--figma-color-border-onwarning-strong);
+}
+
+@utility bg-figma-border-onwarning-strong {
+  background-color: var(--figma-color-border-onwarning-strong);
+}
+
+@utility text-figma-border-onwarning-strong {
+  color: var(--figma-color-border-onwarning-strong);
+}
+
+@utility border-figma-border-onwarning-strong {
+  border-color: var(--figma-color-border-onwarning-strong);
+}
+
+@utility outline-figma-border-onwarning-strong {
+  outline-color: var(--figma-color-border-onwarning-strong);
+}
+
+@utility fill-figma-border-onwarning-strong {
+  fill: var(--figma-color-border-onwarning-strong);
+}
+
+@utility stroke-figma-border-onwarning-strong {
+  stroke: var(--figma-color-border-onwarning-strong);
+}
+
+@utility icon-figma-border-onwarning-strong {
+  --color-icon: var(--figma-color-border-onwarning-strong);
+}
+
+@utility border-figma-selected {
+  border-color: var(--figma-color-border-selected);
+}
+
+@utility bg-figma-border-selected {
+  background-color: var(--figma-color-border-selected);
+}
+
+@utility text-figma-border-selected {
+  color: var(--figma-color-border-selected);
+}
+
+@utility border-figma-border-selected {
+  border-color: var(--figma-color-border-selected);
+}
+
+@utility outline-figma-border-selected {
+  outline-color: var(--figma-color-border-selected);
+}
+
+@utility fill-figma-border-selected {
+  fill: var(--figma-color-border-selected);
+}
+
+@utility stroke-figma-border-selected {
+  stroke: var(--figma-color-border-selected);
+}
+
+@utility icon-figma-border-selected {
+  --color-icon: var(--figma-color-border-selected);
+}
+
+@utility border-figma-selected-strong {
+  border-color: var(--figma-color-border-selected-strong);
+}
+
+@utility bg-figma-border-selected-strong {
+  background-color: var(--figma-color-border-selected-strong);
+}
+
+@utility text-figma-border-selected-strong {
+  color: var(--figma-color-border-selected-strong);
+}
+
+@utility border-figma-border-selected-strong {
+  border-color: var(--figma-color-border-selected-strong);
+}
+
+@utility outline-figma-border-selected-strong {
+  outline-color: var(--figma-color-border-selected-strong);
+}
+
+@utility fill-figma-border-selected-strong {
+  fill: var(--figma-color-border-selected-strong);
+}
+
+@utility stroke-figma-border-selected-strong {
+  stroke: var(--figma-color-border-selected-strong);
+}
+
+@utility icon-figma-border-selected-strong {
+  --color-icon: var(--figma-color-border-selected-strong);
+}
+
+@utility border-figma-strong {
+  border-color: var(--figma-color-border-strong);
+}
+
+@utility bg-figma-border-strong {
+  background-color: var(--figma-color-border-strong);
+}
+
+@utility text-figma-border-strong {
+  color: var(--figma-color-border-strong);
+}
+
+@utility border-figma-border-strong {
+  border-color: var(--figma-color-border-strong);
+}
+
+@utility outline-figma-border-strong {
+  outline-color: var(--figma-color-border-strong);
+}
+
+@utility fill-figma-border-strong {
+  fill: var(--figma-color-border-strong);
+}
+
+@utility stroke-figma-border-strong {
+  stroke: var(--figma-color-border-strong);
+}
+
+@utility icon-figma-border-strong {
+  --color-icon: var(--figma-color-border-strong);
+}
+
+@utility border-figma-success {
+  border-color: var(--figma-color-border-success);
+}
+
+@utility bg-figma-border-success {
+  background-color: var(--figma-color-border-success);
+}
+
+@utility text-figma-border-success {
+  color: var(--figma-color-border-success);
+}
+
+@utility border-figma-border-success {
+  border-color: var(--figma-color-border-success);
+}
+
+@utility outline-figma-border-success {
+  outline-color: var(--figma-color-border-success);
+}
+
+@utility fill-figma-border-success {
+  fill: var(--figma-color-border-success);
+}
+
+@utility stroke-figma-border-success {
+  stroke: var(--figma-color-border-success);
+}
+
+@utility icon-figma-border-success {
+  --color-icon: var(--figma-color-border-success);
+}
+
+@utility border-figma-success-strong {
+  border-color: var(--figma-color-border-success-strong);
+}
+
+@utility bg-figma-border-success-strong {
+  background-color: var(--figma-color-border-success-strong);
+}
+
+@utility text-figma-border-success-strong {
+  color: var(--figma-color-border-success-strong);
+}
+
+@utility border-figma-border-success-strong {
+  border-color: var(--figma-color-border-success-strong);
+}
+
+@utility outline-figma-border-success-strong {
+  outline-color: var(--figma-color-border-success-strong);
+}
+
+@utility fill-figma-border-success-strong {
+  fill: var(--figma-color-border-success-strong);
+}
+
+@utility stroke-figma-border-success-strong {
+  stroke: var(--figma-color-border-success-strong);
+}
+
+@utility icon-figma-border-success-strong {
+  --color-icon: var(--figma-color-border-success-strong);
+}
+
+@utility border-figma-toolbar {
+  border-color: var(--figma-color-border-toolbar);
+}
+
+@utility bg-figma-border-toolbar {
+  background-color: var(--figma-color-border-toolbar);
+}
+
+@utility text-figma-border-toolbar {
+  color: var(--figma-color-border-toolbar);
+}
+
+@utility border-figma-border-toolbar {
+  border-color: var(--figma-color-border-toolbar);
+}
+
+@utility outline-figma-border-toolbar {
+  outline-color: var(--figma-color-border-toolbar);
+}
+
+@utility fill-figma-border-toolbar {
+  fill: var(--figma-color-border-toolbar);
+}
+
+@utility stroke-figma-border-toolbar {
+  stroke: var(--figma-color-border-toolbar);
+}
+
+@utility icon-figma-border-toolbar {
+  --color-icon: var(--figma-color-border-toolbar);
+}
+
+@utility border-figma-toolbar-disabled {
+  border-color: var(--figma-color-border-toolbar-disabled);
+}
+
+@utility bg-figma-border-toolbar-disabled {
+  background-color: var(--figma-color-border-toolbar-disabled);
+}
+
+@utility text-figma-border-toolbar-disabled {
+  color: var(--figma-color-border-toolbar-disabled);
+}
+
+@utility border-figma-border-toolbar-disabled {
+  border-color: var(--figma-color-border-toolbar-disabled);
+}
+
+@utility outline-figma-border-toolbar-disabled {
+  outline-color: var(--figma-color-border-toolbar-disabled);
+}
+
+@utility fill-figma-border-toolbar-disabled {
+  fill: var(--figma-color-border-toolbar-disabled);
+}
+
+@utility stroke-figma-border-toolbar-disabled {
+  stroke: var(--figma-color-border-toolbar-disabled);
+}
+
+@utility icon-figma-border-toolbar-disabled {
+  --color-icon: var(--figma-color-border-toolbar-disabled);
+}
+
+@utility border-figma-toolbar-onselected {
+  border-color: var(--figma-color-border-toolbar-onselected);
+}
+
+@utility bg-figma-border-toolbar-onselected {
+  background-color: var(--figma-color-border-toolbar-onselected);
+}
+
+@utility text-figma-border-toolbar-onselected {
+  color: var(--figma-color-border-toolbar-onselected);
+}
+
+@utility border-figma-border-toolbar-onselected {
+  border-color: var(--figma-color-border-toolbar-onselected);
+}
+
+@utility outline-figma-border-toolbar-onselected {
+  outline-color: var(--figma-color-border-toolbar-onselected);
+}
+
+@utility fill-figma-border-toolbar-onselected {
+  fill: var(--figma-color-border-toolbar-onselected);
+}
+
+@utility stroke-figma-border-toolbar-onselected {
+  stroke: var(--figma-color-border-toolbar-onselected);
+}
+
+@utility icon-figma-border-toolbar-onselected {
+  --color-icon: var(--figma-color-border-toolbar-onselected);
+}
+
+@utility border-figma-toolbar-selected {
+  border-color: var(--figma-color-border-toolbar-selected);
+}
+
+@utility bg-figma-border-toolbar-selected {
+  background-color: var(--figma-color-border-toolbar-selected);
+}
+
+@utility text-figma-border-toolbar-selected {
+  color: var(--figma-color-border-toolbar-selected);
+}
+
+@utility border-figma-border-toolbar-selected {
+  border-color: var(--figma-color-border-toolbar-selected);
+}
+
+@utility outline-figma-border-toolbar-selected {
+  outline-color: var(--figma-color-border-toolbar-selected);
+}
+
+@utility fill-figma-border-toolbar-selected {
+  fill: var(--figma-color-border-toolbar-selected);
+}
+
+@utility stroke-figma-border-toolbar-selected {
+  stroke: var(--figma-color-border-toolbar-selected);
+}
+
+@utility icon-figma-border-toolbar-selected {
+  --color-icon: var(--figma-color-border-toolbar-selected);
+}
+
+@utility border-figma-toolbar-selected-strong {
+  border-color: var(--figma-color-border-toolbar-selected-strong);
+}
+
+@utility bg-figma-border-toolbar-selected-strong {
+  background-color: var(--figma-color-border-toolbar-selected-strong);
+}
+
+@utility text-figma-border-toolbar-selected-strong {
+  color: var(--figma-color-border-toolbar-selected-strong);
+}
+
+@utility border-figma-border-toolbar-selected-strong {
+  border-color: var(--figma-color-border-toolbar-selected-strong);
+}
+
+@utility outline-figma-border-toolbar-selected-strong {
+  outline-color: var(--figma-color-border-toolbar-selected-strong);
+}
+
+@utility fill-figma-border-toolbar-selected-strong {
+  fill: var(--figma-color-border-toolbar-selected-strong);
+}
+
+@utility stroke-figma-border-toolbar-selected-strong {
+  stroke: var(--figma-color-border-toolbar-selected-strong);
+}
+
+@utility icon-figma-border-toolbar-selected-strong {
+  --color-icon: var(--figma-color-border-toolbar-selected-strong);
+}
+
+@utility border-figma-toolbar-strong {
+  border-color: var(--figma-color-border-toolbar-strong);
+}
+
+@utility bg-figma-border-toolbar-strong {
+  background-color: var(--figma-color-border-toolbar-strong);
+}
+
+@utility text-figma-border-toolbar-strong {
+  color: var(--figma-color-border-toolbar-strong);
+}
+
+@utility border-figma-border-toolbar-strong {
+  border-color: var(--figma-color-border-toolbar-strong);
+}
+
+@utility outline-figma-border-toolbar-strong {
+  outline-color: var(--figma-color-border-toolbar-strong);
+}
+
+@utility fill-figma-border-toolbar-strong {
+  fill: var(--figma-color-border-toolbar-strong);
+}
+
+@utility stroke-figma-border-toolbar-strong {
+  stroke: var(--figma-color-border-toolbar-strong);
+}
+
+@utility icon-figma-border-toolbar-strong {
+  --color-icon: var(--figma-color-border-toolbar-strong);
+}
+
+@utility border-figma-tooltip {
+  border-color: var(--figma-color-border-tooltip);
+}
+
+@utility bg-figma-border-tooltip {
+  background-color: var(--figma-color-border-tooltip);
+}
+
+@utility text-figma-border-tooltip {
+  color: var(--figma-color-border-tooltip);
+}
+
+@utility border-figma-border-tooltip {
+  border-color: var(--figma-color-border-tooltip);
+}
+
+@utility outline-figma-border-tooltip {
+  outline-color: var(--figma-color-border-tooltip);
+}
+
+@utility fill-figma-border-tooltip {
+  fill: var(--figma-color-border-tooltip);
+}
+
+@utility stroke-figma-border-tooltip {
+  stroke: var(--figma-color-border-tooltip);
+}
+
+@utility icon-figma-border-tooltip {
+  --color-icon: var(--figma-color-border-tooltip);
+}
+
+@utility border-figma-tooltip-disabled {
+  border-color: var(--figma-color-border-tooltip-disabled);
+}
+
+@utility bg-figma-border-tooltip-disabled {
+  background-color: var(--figma-color-border-tooltip-disabled);
+}
+
+@utility text-figma-border-tooltip-disabled {
+  color: var(--figma-color-border-tooltip-disabled);
+}
+
+@utility border-figma-border-tooltip-disabled {
+  border-color: var(--figma-color-border-tooltip-disabled);
+}
+
+@utility outline-figma-border-tooltip-disabled {
+  outline-color: var(--figma-color-border-tooltip-disabled);
+}
+
+@utility fill-figma-border-tooltip-disabled {
+  fill: var(--figma-color-border-tooltip-disabled);
+}
+
+@utility stroke-figma-border-tooltip-disabled {
+  stroke: var(--figma-color-border-tooltip-disabled);
+}
+
+@utility icon-figma-border-tooltip-disabled {
+  --color-icon: var(--figma-color-border-tooltip-disabled);
+}
+
+@utility border-figma-tooltip-disabled-strong {
+  border-color: var(--figma-color-border-tooltip-disabled-strong);
+}
+
+@utility bg-figma-border-tooltip-disabled-strong {
+  background-color: var(--figma-color-border-tooltip-disabled-strong);
+}
+
+@utility text-figma-border-tooltip-disabled-strong {
+  color: var(--figma-color-border-tooltip-disabled-strong);
+}
+
+@utility border-figma-border-tooltip-disabled-strong {
+  border-color: var(--figma-color-border-tooltip-disabled-strong);
+}
+
+@utility outline-figma-border-tooltip-disabled-strong {
+  outline-color: var(--figma-color-border-tooltip-disabled-strong);
+}
+
+@utility fill-figma-border-tooltip-disabled-strong {
+  fill: var(--figma-color-border-tooltip-disabled-strong);
+}
+
+@utility stroke-figma-border-tooltip-disabled-strong {
+  stroke: var(--figma-color-border-tooltip-disabled-strong);
+}
+
+@utility icon-figma-border-tooltip-disabled-strong {
+  --color-icon: var(--figma-color-border-tooltip-disabled-strong);
+}
+
+@utility border-figma-tooltip-onselected {
+  border-color: var(--figma-color-border-tooltip-onselected);
+}
+
+@utility bg-figma-border-tooltip-onselected {
+  background-color: var(--figma-color-border-tooltip-onselected);
+}
+
+@utility text-figma-border-tooltip-onselected {
+  color: var(--figma-color-border-tooltip-onselected);
+}
+
+@utility border-figma-border-tooltip-onselected {
+  border-color: var(--figma-color-border-tooltip-onselected);
+}
+
+@utility outline-figma-border-tooltip-onselected {
+  outline-color: var(--figma-color-border-tooltip-onselected);
+}
+
+@utility fill-figma-border-tooltip-onselected {
+  fill: var(--figma-color-border-tooltip-onselected);
+}
+
+@utility stroke-figma-border-tooltip-onselected {
+  stroke: var(--figma-color-border-tooltip-onselected);
+}
+
+@utility icon-figma-border-tooltip-onselected {
+  --color-icon: var(--figma-color-border-tooltip-onselected);
+}
+
+@utility border-figma-tooltip-onselected-strong {
+  border-color: var(--figma-color-border-tooltip-onselected-strong);
+}
+
+@utility bg-figma-border-tooltip-onselected-strong {
+  background-color: var(--figma-color-border-tooltip-onselected-strong);
+}
+
+@utility text-figma-border-tooltip-onselected-strong {
+  color: var(--figma-color-border-tooltip-onselected-strong);
+}
+
+@utility border-figma-border-tooltip-onselected-strong {
+  border-color: var(--figma-color-border-tooltip-onselected-strong);
+}
+
+@utility outline-figma-border-tooltip-onselected-strong {
+  outline-color: var(--figma-color-border-tooltip-onselected-strong);
+}
+
+@utility fill-figma-border-tooltip-onselected-strong {
+  fill: var(--figma-color-border-tooltip-onselected-strong);
+}
+
+@utility stroke-figma-border-tooltip-onselected-strong {
+  stroke: var(--figma-color-border-tooltip-onselected-strong);
+}
+
+@utility icon-figma-border-tooltip-onselected-strong {
+  --color-icon: var(--figma-color-border-tooltip-onselected-strong);
+}
+
+@utility border-figma-tooltip-selected {
+  border-color: var(--figma-color-border-tooltip-selected);
+}
+
+@utility bg-figma-border-tooltip-selected {
+  background-color: var(--figma-color-border-tooltip-selected);
+}
+
+@utility text-figma-border-tooltip-selected {
+  color: var(--figma-color-border-tooltip-selected);
+}
+
+@utility border-figma-border-tooltip-selected {
+  border-color: var(--figma-color-border-tooltip-selected);
+}
+
+@utility outline-figma-border-tooltip-selected {
+  outline-color: var(--figma-color-border-tooltip-selected);
+}
+
+@utility fill-figma-border-tooltip-selected {
+  fill: var(--figma-color-border-tooltip-selected);
+}
+
+@utility stroke-figma-border-tooltip-selected {
+  stroke: var(--figma-color-border-tooltip-selected);
+}
+
+@utility icon-figma-border-tooltip-selected {
+  --color-icon: var(--figma-color-border-tooltip-selected);
+}
+
+@utility border-figma-tooltip-selected-strong {
+  border-color: var(--figma-color-border-tooltip-selected-strong);
+}
+
+@utility bg-figma-border-tooltip-selected-strong {
+  background-color: var(--figma-color-border-tooltip-selected-strong);
+}
+
+@utility text-figma-border-tooltip-selected-strong {
+  color: var(--figma-color-border-tooltip-selected-strong);
+}
+
+@utility border-figma-border-tooltip-selected-strong {
+  border-color: var(--figma-color-border-tooltip-selected-strong);
+}
+
+@utility outline-figma-border-tooltip-selected-strong {
+  outline-color: var(--figma-color-border-tooltip-selected-strong);
+}
+
+@utility fill-figma-border-tooltip-selected-strong {
+  fill: var(--figma-color-border-tooltip-selected-strong);
+}
+
+@utility stroke-figma-border-tooltip-selected-strong {
+  stroke: var(--figma-color-border-tooltip-selected-strong);
+}
+
+@utility icon-figma-border-tooltip-selected-strong {
+  --color-icon: var(--figma-color-border-tooltip-selected-strong);
+}
+
+@utility border-figma-tooltip-strong {
+  border-color: var(--figma-color-border-tooltip-strong);
+}
+
+@utility bg-figma-border-tooltip-strong {
+  background-color: var(--figma-color-border-tooltip-strong);
+}
+
+@utility text-figma-border-tooltip-strong {
+  color: var(--figma-color-border-tooltip-strong);
+}
+
+@utility border-figma-border-tooltip-strong {
+  border-color: var(--figma-color-border-tooltip-strong);
+}
+
+@utility outline-figma-border-tooltip-strong {
+  outline-color: var(--figma-color-border-tooltip-strong);
+}
+
+@utility fill-figma-border-tooltip-strong {
+  fill: var(--figma-color-border-tooltip-strong);
+}
+
+@utility stroke-figma-border-tooltip-strong {
+  stroke: var(--figma-color-border-tooltip-strong);
+}
+
+@utility icon-figma-border-tooltip-strong {
+  --color-icon: var(--figma-color-border-tooltip-strong);
+}
+
+@utility border-figma-warning {
+  border-color: var(--figma-color-border-warning);
+}
+
+@utility bg-figma-border-warning {
+  background-color: var(--figma-color-border-warning);
+}
+
+@utility text-figma-border-warning {
+  color: var(--figma-color-border-warning);
+}
+
+@utility border-figma-border-warning {
+  border-color: var(--figma-color-border-warning);
+}
+
+@utility outline-figma-border-warning {
+  outline-color: var(--figma-color-border-warning);
+}
+
+@utility fill-figma-border-warning {
+  fill: var(--figma-color-border-warning);
+}
+
+@utility stroke-figma-border-warning {
+  stroke: var(--figma-color-border-warning);
+}
+
+@utility icon-figma-border-warning {
+  --color-icon: var(--figma-color-border-warning);
+}
+
+@utility border-figma-warning-strong {
+  border-color: var(--figma-color-border-warning-strong);
+}
+
+@utility bg-figma-border-warning-strong {
+  background-color: var(--figma-color-border-warning-strong);
+}
+
+@utility text-figma-border-warning-strong {
+  color: var(--figma-color-border-warning-strong);
+}
+
+@utility border-figma-border-warning-strong {
+  border-color: var(--figma-color-border-warning-strong);
+}
+
+@utility outline-figma-border-warning-strong {
+  outline-color: var(--figma-color-border-warning-strong);
+}
+
+@utility fill-figma-border-warning-strong {
+  fill: var(--figma-color-border-warning-strong);
+}
+
+@utility stroke-figma-border-warning-strong {
+  stroke: var(--figma-color-border-warning-strong);
+}
+
+@utility icon-figma-border-warning-strong {
+  --color-icon: var(--figma-color-border-warning-strong);
+}
+
+@utility bg-figma-icon {
+  background-color: var(--figma-color-icon);
+}
+
+@utility text-figma-icon {
+  color: var(--figma-color-icon);
+}
+
+@utility border-figma-icon {
+  border-color: var(--figma-color-icon);
+}
+
+@utility outline-figma-icon {
+  outline-color: var(--figma-color-icon);
+}
+
+@utility fill-figma-icon {
+  fill: var(--figma-color-icon);
+}
+
+@utility stroke-figma-icon {
+  stroke: var(--figma-color-icon);
+}
+
+@utility icon-figma {
+  --color-icon: var(--figma-color-icon);
+}
+
+@utility bg-figma-icon-assistive {
+  background-color: var(--figma-color-icon-assistive);
+}
+
+@utility text-figma-icon-assistive {
+  color: var(--figma-color-icon-assistive);
+}
+
+@utility border-figma-icon-assistive {
+  border-color: var(--figma-color-icon-assistive);
+}
+
+@utility outline-figma-icon-assistive {
+  outline-color: var(--figma-color-icon-assistive);
+}
+
+@utility fill-figma-icon-assistive {
+  fill: var(--figma-color-icon-assistive);
+}
+
+@utility stroke-figma-icon-assistive {
+  stroke: var(--figma-color-icon-assistive);
+}
+
+@utility icon-figma-assistive {
+  --color-icon: var(--figma-color-icon-assistive);
+}
+
+@utility bg-figma-icon-assistive-pressed {
+  background-color: var(--figma-color-icon-assistive-pressed);
+}
+
+@utility text-figma-icon-assistive-pressed {
+  color: var(--figma-color-icon-assistive-pressed);
+}
+
+@utility border-figma-icon-assistive-pressed {
+  border-color: var(--figma-color-icon-assistive-pressed);
+}
+
+@utility outline-figma-icon-assistive-pressed {
+  outline-color: var(--figma-color-icon-assistive-pressed);
+}
+
+@utility fill-figma-icon-assistive-pressed {
+  fill: var(--figma-color-icon-assistive-pressed);
+}
+
+@utility stroke-figma-icon-assistive-pressed {
+  stroke: var(--figma-color-icon-assistive-pressed);
+}
+
+@utility icon-figma-assistive-pressed {
+  --color-icon: var(--figma-color-icon-assistive-pressed);
+}
+
+@utility bg-figma-icon-assistive-secondary {
+  background-color: var(--figma-color-icon-assistive-secondary);
+}
+
+@utility text-figma-icon-assistive-secondary {
+  color: var(--figma-color-icon-assistive-secondary);
+}
+
+@utility border-figma-icon-assistive-secondary {
+  border-color: var(--figma-color-icon-assistive-secondary);
+}
+
+@utility outline-figma-icon-assistive-secondary {
+  outline-color: var(--figma-color-icon-assistive-secondary);
+}
+
+@utility fill-figma-icon-assistive-secondary {
+  fill: var(--figma-color-icon-assistive-secondary);
+}
+
+@utility stroke-figma-icon-assistive-secondary {
+  stroke: var(--figma-color-icon-assistive-secondary);
+}
+
+@utility icon-figma-assistive-secondary {
+  --color-icon: var(--figma-color-icon-assistive-secondary);
+}
+
+@utility bg-figma-icon-assistive-tertiary {
+  background-color: var(--figma-color-icon-assistive-tertiary);
+}
+
+@utility text-figma-icon-assistive-tertiary {
+  color: var(--figma-color-icon-assistive-tertiary);
+}
+
+@utility border-figma-icon-assistive-tertiary {
+  border-color: var(--figma-color-icon-assistive-tertiary);
+}
+
+@utility outline-figma-icon-assistive-tertiary {
+  outline-color: var(--figma-color-icon-assistive-tertiary);
+}
+
+@utility fill-figma-icon-assistive-tertiary {
+  fill: var(--figma-color-icon-assistive-tertiary);
+}
+
+@utility stroke-figma-icon-assistive-tertiary {
+  stroke: var(--figma-color-icon-assistive-tertiary);
+}
+
+@utility icon-figma-assistive-tertiary {
+  --color-icon: var(--figma-color-icon-assistive-tertiary);
+}
+
+@utility bg-figma-icon-brand {
+  background-color: var(--figma-color-icon-brand);
+}
+
+@utility text-figma-icon-brand {
+  color: var(--figma-color-icon-brand);
+}
+
+@utility border-figma-icon-brand {
+  border-color: var(--figma-color-icon-brand);
+}
+
+@utility outline-figma-icon-brand {
+  outline-color: var(--figma-color-icon-brand);
+}
+
+@utility fill-figma-icon-brand {
+  fill: var(--figma-color-icon-brand);
+}
+
+@utility stroke-figma-icon-brand {
+  stroke: var(--figma-color-icon-brand);
+}
+
+@utility icon-figma-brand {
+  --color-icon: var(--figma-color-icon-brand);
+}
+
+@utility bg-figma-icon-brand-pressed {
+  background-color: var(--figma-color-icon-brand-pressed);
+}
+
+@utility text-figma-icon-brand-pressed {
+  color: var(--figma-color-icon-brand-pressed);
+}
+
+@utility border-figma-icon-brand-pressed {
+  border-color: var(--figma-color-icon-brand-pressed);
+}
+
+@utility outline-figma-icon-brand-pressed {
+  outline-color: var(--figma-color-icon-brand-pressed);
+}
+
+@utility fill-figma-icon-brand-pressed {
+  fill: var(--figma-color-icon-brand-pressed);
+}
+
+@utility stroke-figma-icon-brand-pressed {
+  stroke: var(--figma-color-icon-brand-pressed);
+}
+
+@utility icon-figma-brand-pressed {
+  --color-icon: var(--figma-color-icon-brand-pressed);
+}
+
+@utility bg-figma-icon-brand-secondary {
+  background-color: var(--figma-color-icon-brand-secondary);
+}
+
+@utility text-figma-icon-brand-secondary {
+  color: var(--figma-color-icon-brand-secondary);
+}
+
+@utility border-figma-icon-brand-secondary {
+  border-color: var(--figma-color-icon-brand-secondary);
+}
+
+@utility outline-figma-icon-brand-secondary {
+  outline-color: var(--figma-color-icon-brand-secondary);
+}
+
+@utility fill-figma-icon-brand-secondary {
+  fill: var(--figma-color-icon-brand-secondary);
+}
+
+@utility stroke-figma-icon-brand-secondary {
+  stroke: var(--figma-color-icon-brand-secondary);
+}
+
+@utility icon-figma-brand-secondary {
+  --color-icon: var(--figma-color-icon-brand-secondary);
+}
+
+@utility bg-figma-icon-brand-tertiary {
+  background-color: var(--figma-color-icon-brand-tertiary);
+}
+
+@utility text-figma-icon-brand-tertiary {
+  color: var(--figma-color-icon-brand-tertiary);
+}
+
+@utility border-figma-icon-brand-tertiary {
+  border-color: var(--figma-color-icon-brand-tertiary);
+}
+
+@utility outline-figma-icon-brand-tertiary {
+  outline-color: var(--figma-color-icon-brand-tertiary);
+}
+
+@utility fill-figma-icon-brand-tertiary {
+  fill: var(--figma-color-icon-brand-tertiary);
+}
+
+@utility stroke-figma-icon-brand-tertiary {
+  stroke: var(--figma-color-icon-brand-tertiary);
+}
+
+@utility icon-figma-brand-tertiary {
+  --color-icon: var(--figma-color-icon-brand-tertiary);
+}
+
+@utility bg-figma-icon-component {
+  background-color: var(--figma-color-icon-component);
+}
+
+@utility text-figma-icon-component {
+  color: var(--figma-color-icon-component);
+}
+
+@utility border-figma-icon-component {
+  border-color: var(--figma-color-icon-component);
+}
+
+@utility outline-figma-icon-component {
+  outline-color: var(--figma-color-icon-component);
+}
+
+@utility fill-figma-icon-component {
+  fill: var(--figma-color-icon-component);
+}
+
+@utility stroke-figma-icon-component {
+  stroke: var(--figma-color-icon-component);
+}
+
+@utility icon-figma-component {
+  --color-icon: var(--figma-color-icon-component);
+}
+
+@utility bg-figma-icon-component-pressed {
+  background-color: var(--figma-color-icon-component-pressed);
+}
+
+@utility text-figma-icon-component-pressed {
+  color: var(--figma-color-icon-component-pressed);
+}
+
+@utility border-figma-icon-component-pressed {
+  border-color: var(--figma-color-icon-component-pressed);
+}
+
+@utility outline-figma-icon-component-pressed {
+  outline-color: var(--figma-color-icon-component-pressed);
+}
+
+@utility fill-figma-icon-component-pressed {
+  fill: var(--figma-color-icon-component-pressed);
+}
+
+@utility stroke-figma-icon-component-pressed {
+  stroke: var(--figma-color-icon-component-pressed);
+}
+
+@utility icon-figma-component-pressed {
+  --color-icon: var(--figma-color-icon-component-pressed);
+}
+
+@utility bg-figma-icon-component-secondary {
+  background-color: var(--figma-color-icon-component-secondary);
+}
+
+@utility text-figma-icon-component-secondary {
+  color: var(--figma-color-icon-component-secondary);
+}
+
+@utility border-figma-icon-component-secondary {
+  border-color: var(--figma-color-icon-component-secondary);
+}
+
+@utility outline-figma-icon-component-secondary {
+  outline-color: var(--figma-color-icon-component-secondary);
+}
+
+@utility fill-figma-icon-component-secondary {
+  fill: var(--figma-color-icon-component-secondary);
+}
+
+@utility stroke-figma-icon-component-secondary {
+  stroke: var(--figma-color-icon-component-secondary);
+}
+
+@utility icon-figma-component-secondary {
+  --color-icon: var(--figma-color-icon-component-secondary);
+}
+
+@utility bg-figma-icon-component-tertiary {
+  background-color: var(--figma-color-icon-component-tertiary);
+}
+
+@utility text-figma-icon-component-tertiary {
+  color: var(--figma-color-icon-component-tertiary);
+}
+
+@utility border-figma-icon-component-tertiary {
+  border-color: var(--figma-color-icon-component-tertiary);
+}
+
+@utility outline-figma-icon-component-tertiary {
+  outline-color: var(--figma-color-icon-component-tertiary);
+}
+
+@utility fill-figma-icon-component-tertiary {
+  fill: var(--figma-color-icon-component-tertiary);
+}
+
+@utility stroke-figma-icon-component-tertiary {
+  stroke: var(--figma-color-icon-component-tertiary);
+}
+
+@utility icon-figma-component-tertiary {
+  --color-icon: var(--figma-color-icon-component-tertiary);
+}
+
+@utility bg-figma-icon-danger {
+  background-color: var(--figma-color-icon-danger);
+}
+
+@utility text-figma-icon-danger {
+  color: var(--figma-color-icon-danger);
+}
+
+@utility border-figma-icon-danger {
+  border-color: var(--figma-color-icon-danger);
+}
+
+@utility outline-figma-icon-danger {
+  outline-color: var(--figma-color-icon-danger);
+}
+
+@utility fill-figma-icon-danger {
+  fill: var(--figma-color-icon-danger);
+}
+
+@utility stroke-figma-icon-danger {
+  stroke: var(--figma-color-icon-danger);
+}
+
+@utility icon-figma-danger {
+  --color-icon: var(--figma-color-icon-danger);
+}
+
+@utility bg-figma-icon-danger-hover {
+  background-color: var(--figma-color-icon-danger-hover);
+}
+
+@utility text-figma-icon-danger-hover {
+  color: var(--figma-color-icon-danger-hover);
+}
+
+@utility border-figma-icon-danger-hover {
+  border-color: var(--figma-color-icon-danger-hover);
+}
+
+@utility outline-figma-icon-danger-hover {
+  outline-color: var(--figma-color-icon-danger-hover);
+}
+
+@utility fill-figma-icon-danger-hover {
+  fill: var(--figma-color-icon-danger-hover);
+}
+
+@utility stroke-figma-icon-danger-hover {
+  stroke: var(--figma-color-icon-danger-hover);
+}
+
+@utility icon-figma-danger-hover {
+  --color-icon: var(--figma-color-icon-danger-hover);
+}
+
+@utility bg-figma-icon-danger-pressed {
+  background-color: var(--figma-color-icon-danger-pressed);
+}
+
+@utility text-figma-icon-danger-pressed {
+  color: var(--figma-color-icon-danger-pressed);
+}
+
+@utility border-figma-icon-danger-pressed {
+  border-color: var(--figma-color-icon-danger-pressed);
+}
+
+@utility outline-figma-icon-danger-pressed {
+  outline-color: var(--figma-color-icon-danger-pressed);
+}
+
+@utility fill-figma-icon-danger-pressed {
+  fill: var(--figma-color-icon-danger-pressed);
+}
+
+@utility stroke-figma-icon-danger-pressed {
+  stroke: var(--figma-color-icon-danger-pressed);
+}
+
+@utility icon-figma-danger-pressed {
+  --color-icon: var(--figma-color-icon-danger-pressed);
+}
+
+@utility bg-figma-icon-danger-secondary {
+  background-color: var(--figma-color-icon-danger-secondary);
+}
+
+@utility text-figma-icon-danger-secondary {
+  color: var(--figma-color-icon-danger-secondary);
+}
+
+@utility border-figma-icon-danger-secondary {
+  border-color: var(--figma-color-icon-danger-secondary);
+}
+
+@utility outline-figma-icon-danger-secondary {
+  outline-color: var(--figma-color-icon-danger-secondary);
+}
+
+@utility fill-figma-icon-danger-secondary {
+  fill: var(--figma-color-icon-danger-secondary);
+}
+
+@utility stroke-figma-icon-danger-secondary {
+  stroke: var(--figma-color-icon-danger-secondary);
+}
+
+@utility icon-figma-danger-secondary {
+  --color-icon: var(--figma-color-icon-danger-secondary);
+}
+
+@utility bg-figma-icon-danger-secondary-hover {
+  background-color: var(--figma-color-icon-danger-secondary-hover);
+}
+
+@utility text-figma-icon-danger-secondary-hover {
+  color: var(--figma-color-icon-danger-secondary-hover);
+}
+
+@utility border-figma-icon-danger-secondary-hover {
+  border-color: var(--figma-color-icon-danger-secondary-hover);
+}
+
+@utility outline-figma-icon-danger-secondary-hover {
+  outline-color: var(--figma-color-icon-danger-secondary-hover);
+}
+
+@utility fill-figma-icon-danger-secondary-hover {
+  fill: var(--figma-color-icon-danger-secondary-hover);
+}
+
+@utility stroke-figma-icon-danger-secondary-hover {
+  stroke: var(--figma-color-icon-danger-secondary-hover);
+}
+
+@utility icon-figma-danger-secondary-hover {
+  --color-icon: var(--figma-color-icon-danger-secondary-hover);
+}
+
+@utility bg-figma-icon-danger-tertiary {
+  background-color: var(--figma-color-icon-danger-tertiary);
+}
+
+@utility text-figma-icon-danger-tertiary {
+  color: var(--figma-color-icon-danger-tertiary);
+}
+
+@utility border-figma-icon-danger-tertiary {
+  border-color: var(--figma-color-icon-danger-tertiary);
+}
+
+@utility outline-figma-icon-danger-tertiary {
+  outline-color: var(--figma-color-icon-danger-tertiary);
+}
+
+@utility fill-figma-icon-danger-tertiary {
+  fill: var(--figma-color-icon-danger-tertiary);
+}
+
+@utility stroke-figma-icon-danger-tertiary {
+  stroke: var(--figma-color-icon-danger-tertiary);
+}
+
+@utility icon-figma-danger-tertiary {
+  --color-icon: var(--figma-color-icon-danger-tertiary);
+}
+
+@utility bg-figma-icon-design {
+  background-color: var(--figma-color-icon-design);
+}
+
+@utility text-figma-icon-design {
+  color: var(--figma-color-icon-design);
+}
+
+@utility border-figma-icon-design {
+  border-color: var(--figma-color-icon-design);
+}
+
+@utility outline-figma-icon-design {
+  outline-color: var(--figma-color-icon-design);
+}
+
+@utility fill-figma-icon-design {
+  fill: var(--figma-color-icon-design);
+}
+
+@utility stroke-figma-icon-design {
+  stroke: var(--figma-color-icon-design);
+}
+
+@utility icon-figma-design {
+  --color-icon: var(--figma-color-icon-design);
+}
+
+@utility bg-figma-icon-design-pressed {
+  background-color: var(--figma-color-icon-design-pressed);
+}
+
+@utility text-figma-icon-design-pressed {
+  color: var(--figma-color-icon-design-pressed);
+}
+
+@utility border-figma-icon-design-pressed {
+  border-color: var(--figma-color-icon-design-pressed);
+}
+
+@utility outline-figma-icon-design-pressed {
+  outline-color: var(--figma-color-icon-design-pressed);
+}
+
+@utility fill-figma-icon-design-pressed {
+  fill: var(--figma-color-icon-design-pressed);
+}
+
+@utility stroke-figma-icon-design-pressed {
+  stroke: var(--figma-color-icon-design-pressed);
+}
+
+@utility icon-figma-design-pressed {
+  --color-icon: var(--figma-color-icon-design-pressed);
+}
+
+@utility bg-figma-icon-design-secondary {
+  background-color: var(--figma-color-icon-design-secondary);
+}
+
+@utility text-figma-icon-design-secondary {
+  color: var(--figma-color-icon-design-secondary);
+}
+
+@utility border-figma-icon-design-secondary {
+  border-color: var(--figma-color-icon-design-secondary);
+}
+
+@utility outline-figma-icon-design-secondary {
+  outline-color: var(--figma-color-icon-design-secondary);
+}
+
+@utility fill-figma-icon-design-secondary {
+  fill: var(--figma-color-icon-design-secondary);
+}
+
+@utility stroke-figma-icon-design-secondary {
+  stroke: var(--figma-color-icon-design-secondary);
+}
+
+@utility icon-figma-design-secondary {
+  --color-icon: var(--figma-color-icon-design-secondary);
+}
+
+@utility bg-figma-icon-design-tertiary {
+  background-color: var(--figma-color-icon-design-tertiary);
+}
+
+@utility text-figma-icon-design-tertiary {
+  color: var(--figma-color-icon-design-tertiary);
+}
+
+@utility border-figma-icon-design-tertiary {
+  border-color: var(--figma-color-icon-design-tertiary);
+}
+
+@utility outline-figma-icon-design-tertiary {
+  outline-color: var(--figma-color-icon-design-tertiary);
+}
+
+@utility fill-figma-icon-design-tertiary {
+  fill: var(--figma-color-icon-design-tertiary);
+}
+
+@utility stroke-figma-icon-design-tertiary {
+  stroke: var(--figma-color-icon-design-tertiary);
+}
+
+@utility icon-figma-design-tertiary {
+  --color-icon: var(--figma-color-icon-design-tertiary);
+}
+
+@utility bg-figma-icon-disabled {
+  background-color: var(--figma-color-icon-disabled);
+}
+
+@utility text-figma-icon-disabled {
+  color: var(--figma-color-icon-disabled);
+}
+
+@utility border-figma-icon-disabled {
+  border-color: var(--figma-color-icon-disabled);
+}
+
+@utility outline-figma-icon-disabled {
+  outline-color: var(--figma-color-icon-disabled);
+}
+
+@utility fill-figma-icon-disabled {
+  fill: var(--figma-color-icon-disabled);
+}
+
+@utility stroke-figma-icon-disabled {
+  stroke: var(--figma-color-icon-disabled);
+}
+
+@utility icon-figma-disabled {
+  --color-icon: var(--figma-color-icon-disabled);
+}
+
+@utility bg-figma-icon-figjam {
+  background-color: var(--figma-color-icon-figjam);
+}
+
+@utility text-figma-icon-figjam {
+  color: var(--figma-color-icon-figjam);
+}
+
+@utility border-figma-icon-figjam {
+  border-color: var(--figma-color-icon-figjam);
+}
+
+@utility outline-figma-icon-figjam {
+  outline-color: var(--figma-color-icon-figjam);
+}
+
+@utility fill-figma-icon-figjam {
+  fill: var(--figma-color-icon-figjam);
+}
+
+@utility stroke-figma-icon-figjam {
+  stroke: var(--figma-color-icon-figjam);
+}
+
+@utility icon-figma-figjam {
+  --color-icon: var(--figma-color-icon-figjam);
+}
+
+@utility bg-figma-icon-figjam-pressed {
+  background-color: var(--figma-color-icon-figjam-pressed);
+}
+
+@utility text-figma-icon-figjam-pressed {
+  color: var(--figma-color-icon-figjam-pressed);
+}
+
+@utility border-figma-icon-figjam-pressed {
+  border-color: var(--figma-color-icon-figjam-pressed);
+}
+
+@utility outline-figma-icon-figjam-pressed {
+  outline-color: var(--figma-color-icon-figjam-pressed);
+}
+
+@utility fill-figma-icon-figjam-pressed {
+  fill: var(--figma-color-icon-figjam-pressed);
+}
+
+@utility stroke-figma-icon-figjam-pressed {
+  stroke: var(--figma-color-icon-figjam-pressed);
+}
+
+@utility icon-figma-figjam-pressed {
+  --color-icon: var(--figma-color-icon-figjam-pressed);
+}
+
+@utility bg-figma-icon-figjam-secondary {
+  background-color: var(--figma-color-icon-figjam-secondary);
+}
+
+@utility text-figma-icon-figjam-secondary {
+  color: var(--figma-color-icon-figjam-secondary);
+}
+
+@utility border-figma-icon-figjam-secondary {
+  border-color: var(--figma-color-icon-figjam-secondary);
+}
+
+@utility outline-figma-icon-figjam-secondary {
+  outline-color: var(--figma-color-icon-figjam-secondary);
+}
+
+@utility fill-figma-icon-figjam-secondary {
+  fill: var(--figma-color-icon-figjam-secondary);
+}
+
+@utility stroke-figma-icon-figjam-secondary {
+  stroke: var(--figma-color-icon-figjam-secondary);
+}
+
+@utility icon-figma-figjam-secondary {
+  --color-icon: var(--figma-color-icon-figjam-secondary);
+}
+
+@utility bg-figma-icon-figjam-tertiary {
+  background-color: var(--figma-color-icon-figjam-tertiary);
+}
+
+@utility text-figma-icon-figjam-tertiary {
+  color: var(--figma-color-icon-figjam-tertiary);
+}
+
+@utility border-figma-icon-figjam-tertiary {
+  border-color: var(--figma-color-icon-figjam-tertiary);
+}
+
+@utility outline-figma-icon-figjam-tertiary {
+  outline-color: var(--figma-color-icon-figjam-tertiary);
+}
+
+@utility fill-figma-icon-figjam-tertiary {
+  fill: var(--figma-color-icon-figjam-tertiary);
+}
+
+@utility stroke-figma-icon-figjam-tertiary {
+  stroke: var(--figma-color-icon-figjam-tertiary);
+}
+
+@utility icon-figma-figjam-tertiary {
+  --color-icon: var(--figma-color-icon-figjam-tertiary);
+}
+
+@utility bg-figma-icon-handoff {
+  background-color: var(--figma-color-icon-handoff);
+}
+
+@utility text-figma-icon-handoff {
+  color: var(--figma-color-icon-handoff);
+}
+
+@utility border-figma-icon-handoff {
+  border-color: var(--figma-color-icon-handoff);
+}
+
+@utility outline-figma-icon-handoff {
+  outline-color: var(--figma-color-icon-handoff);
+}
+
+@utility fill-figma-icon-handoff {
+  fill: var(--figma-color-icon-handoff);
+}
+
+@utility stroke-figma-icon-handoff {
+  stroke: var(--figma-color-icon-handoff);
+}
+
+@utility icon-figma-handoff {
+  --color-icon: var(--figma-color-icon-handoff);
+}
+
+@utility bg-figma-icon-handoff-pressed {
+  background-color: var(--figma-color-icon-handoff-pressed);
+}
+
+@utility text-figma-icon-handoff-pressed {
+  color: var(--figma-color-icon-handoff-pressed);
+}
+
+@utility border-figma-icon-handoff-pressed {
+  border-color: var(--figma-color-icon-handoff-pressed);
+}
+
+@utility outline-figma-icon-handoff-pressed {
+  outline-color: var(--figma-color-icon-handoff-pressed);
+}
+
+@utility fill-figma-icon-handoff-pressed {
+  fill: var(--figma-color-icon-handoff-pressed);
+}
+
+@utility stroke-figma-icon-handoff-pressed {
+  stroke: var(--figma-color-icon-handoff-pressed);
+}
+
+@utility icon-figma-handoff-pressed {
+  --color-icon: var(--figma-color-icon-handoff-pressed);
+}
+
+@utility bg-figma-icon-handoff-secondary {
+  background-color: var(--figma-color-icon-handoff-secondary);
+}
+
+@utility text-figma-icon-handoff-secondary {
+  color: var(--figma-color-icon-handoff-secondary);
+}
+
+@utility border-figma-icon-handoff-secondary {
+  border-color: var(--figma-color-icon-handoff-secondary);
+}
+
+@utility outline-figma-icon-handoff-secondary {
+  outline-color: var(--figma-color-icon-handoff-secondary);
+}
+
+@utility fill-figma-icon-handoff-secondary {
+  fill: var(--figma-color-icon-handoff-secondary);
+}
+
+@utility stroke-figma-icon-handoff-secondary {
+  stroke: var(--figma-color-icon-handoff-secondary);
+}
+
+@utility icon-figma-handoff-secondary {
+  --color-icon: var(--figma-color-icon-handoff-secondary);
+}
+
+@utility bg-figma-icon-handoff-tertiary {
+  background-color: var(--figma-color-icon-handoff-tertiary);
+}
+
+@utility text-figma-icon-handoff-tertiary {
+  color: var(--figma-color-icon-handoff-tertiary);
+}
+
+@utility border-figma-icon-handoff-tertiary {
+  border-color: var(--figma-color-icon-handoff-tertiary);
+}
+
+@utility outline-figma-icon-handoff-tertiary {
+  outline-color: var(--figma-color-icon-handoff-tertiary);
+}
+
+@utility fill-figma-icon-handoff-tertiary {
+  fill: var(--figma-color-icon-handoff-tertiary);
+}
+
+@utility stroke-figma-icon-handoff-tertiary {
+  stroke: var(--figma-color-icon-handoff-tertiary);
+}
+
+@utility icon-figma-handoff-tertiary {
+  --color-icon: var(--figma-color-icon-handoff-tertiary);
+}
+
+@utility bg-figma-icon-hover {
+  background-color: var(--figma-color-icon-hover);
+}
+
+@utility text-figma-icon-hover {
+  color: var(--figma-color-icon-hover);
+}
+
+@utility border-figma-icon-hover {
+  border-color: var(--figma-color-icon-hover);
+}
+
+@utility outline-figma-icon-hover {
+  outline-color: var(--figma-color-icon-hover);
+}
+
+@utility fill-figma-icon-hover {
+  fill: var(--figma-color-icon-hover);
+}
+
+@utility stroke-figma-icon-hover {
+  stroke: var(--figma-color-icon-hover);
+}
+
+@utility icon-figma-hover {
+  --color-icon: var(--figma-color-icon-hover);
+}
+
+@utility bg-figma-icon-measure {
+  background-color: var(--figma-color-icon-measure);
+}
+
+@utility text-figma-icon-measure {
+  color: var(--figma-color-icon-measure);
+}
+
+@utility border-figma-icon-measure {
+  border-color: var(--figma-color-icon-measure);
+}
+
+@utility outline-figma-icon-measure {
+  outline-color: var(--figma-color-icon-measure);
+}
+
+@utility fill-figma-icon-measure {
+  fill: var(--figma-color-icon-measure);
+}
+
+@utility stroke-figma-icon-measure {
+  stroke: var(--figma-color-icon-measure);
+}
+
+@utility icon-figma-measure {
+  --color-icon: var(--figma-color-icon-measure);
+}
+
+@utility bg-figma-icon-measure-hover {
+  background-color: var(--figma-color-icon-measure-hover);
+}
+
+@utility text-figma-icon-measure-hover {
+  color: var(--figma-color-icon-measure-hover);
+}
+
+@utility border-figma-icon-measure-hover {
+  border-color: var(--figma-color-icon-measure-hover);
+}
+
+@utility outline-figma-icon-measure-hover {
+  outline-color: var(--figma-color-icon-measure-hover);
+}
+
+@utility fill-figma-icon-measure-hover {
+  fill: var(--figma-color-icon-measure-hover);
+}
+
+@utility stroke-figma-icon-measure-hover {
+  stroke: var(--figma-color-icon-measure-hover);
+}
+
+@utility icon-figma-measure-hover {
+  --color-icon: var(--figma-color-icon-measure-hover);
+}
+
+@utility bg-figma-icon-measure-pressed {
+  background-color: var(--figma-color-icon-measure-pressed);
+}
+
+@utility text-figma-icon-measure-pressed {
+  color: var(--figma-color-icon-measure-pressed);
+}
+
+@utility border-figma-icon-measure-pressed {
+  border-color: var(--figma-color-icon-measure-pressed);
+}
+
+@utility outline-figma-icon-measure-pressed {
+  outline-color: var(--figma-color-icon-measure-pressed);
+}
+
+@utility fill-figma-icon-measure-pressed {
+  fill: var(--figma-color-icon-measure-pressed);
+}
+
+@utility stroke-figma-icon-measure-pressed {
+  stroke: var(--figma-color-icon-measure-pressed);
+}
+
+@utility icon-figma-measure-pressed {
+  --color-icon: var(--figma-color-icon-measure-pressed);
+}
+
+@utility bg-figma-icon-measure-secondary {
+  background-color: var(--figma-color-icon-measure-secondary);
+}
+
+@utility text-figma-icon-measure-secondary {
+  color: var(--figma-color-icon-measure-secondary);
+}
+
+@utility border-figma-icon-measure-secondary {
+  border-color: var(--figma-color-icon-measure-secondary);
+}
+
+@utility outline-figma-icon-measure-secondary {
+  outline-color: var(--figma-color-icon-measure-secondary);
+}
+
+@utility fill-figma-icon-measure-secondary {
+  fill: var(--figma-color-icon-measure-secondary);
+}
+
+@utility stroke-figma-icon-measure-secondary {
+  stroke: var(--figma-color-icon-measure-secondary);
+}
+
+@utility icon-figma-measure-secondary {
+  --color-icon: var(--figma-color-icon-measure-secondary);
+}
+
+@utility bg-figma-icon-measure-secondary-hover {
+  background-color: var(--figma-color-icon-measure-secondary-hover);
+}
+
+@utility text-figma-icon-measure-secondary-hover {
+  color: var(--figma-color-icon-measure-secondary-hover);
+}
+
+@utility border-figma-icon-measure-secondary-hover {
+  border-color: var(--figma-color-icon-measure-secondary-hover);
+}
+
+@utility outline-figma-icon-measure-secondary-hover {
+  outline-color: var(--figma-color-icon-measure-secondary-hover);
+}
+
+@utility fill-figma-icon-measure-secondary-hover {
+  fill: var(--figma-color-icon-measure-secondary-hover);
+}
+
+@utility stroke-figma-icon-measure-secondary-hover {
+  stroke: var(--figma-color-icon-measure-secondary-hover);
+}
+
+@utility icon-figma-measure-secondary-hover {
+  --color-icon: var(--figma-color-icon-measure-secondary-hover);
+}
+
+@utility bg-figma-icon-measure-tertiary {
+  background-color: var(--figma-color-icon-measure-tertiary);
+}
+
+@utility text-figma-icon-measure-tertiary {
+  color: var(--figma-color-icon-measure-tertiary);
+}
+
+@utility border-figma-icon-measure-tertiary {
+  border-color: var(--figma-color-icon-measure-tertiary);
+}
+
+@utility outline-figma-icon-measure-tertiary {
+  outline-color: var(--figma-color-icon-measure-tertiary);
+}
+
+@utility fill-figma-icon-measure-tertiary {
+  fill: var(--figma-color-icon-measure-tertiary);
+}
+
+@utility stroke-figma-icon-measure-tertiary {
+  stroke: var(--figma-color-icon-measure-tertiary);
+}
+
+@utility icon-figma-measure-tertiary {
+  --color-icon: var(--figma-color-icon-measure-tertiary);
+}
+
+@utility bg-figma-icon-menu {
+  background-color: var(--figma-color-icon-menu);
+}
+
+@utility text-figma-icon-menu {
+  color: var(--figma-color-icon-menu);
+}
+
+@utility border-figma-icon-menu {
+  border-color: var(--figma-color-icon-menu);
+}
+
+@utility outline-figma-icon-menu {
+  outline-color: var(--figma-color-icon-menu);
+}
+
+@utility fill-figma-icon-menu {
+  fill: var(--figma-color-icon-menu);
+}
+
+@utility stroke-figma-icon-menu {
+  stroke: var(--figma-color-icon-menu);
+}
+
+@utility icon-figma-menu {
+  --color-icon: var(--figma-color-icon-menu);
+}
+
+@utility bg-figma-icon-menu-danger {
+  background-color: var(--figma-color-icon-menu-danger);
+}
+
+@utility text-figma-icon-menu-danger {
+  color: var(--figma-color-icon-menu-danger);
+}
+
+@utility border-figma-icon-menu-danger {
+  border-color: var(--figma-color-icon-menu-danger);
+}
+
+@utility outline-figma-icon-menu-danger {
+  outline-color: var(--figma-color-icon-menu-danger);
+}
+
+@utility fill-figma-icon-menu-danger {
+  fill: var(--figma-color-icon-menu-danger);
+}
+
+@utility stroke-figma-icon-menu-danger {
+  stroke: var(--figma-color-icon-menu-danger);
+}
+
+@utility icon-figma-menu-danger {
+  --color-icon: var(--figma-color-icon-menu-danger);
+}
+
+@utility bg-figma-icon-menu-disabled {
+  background-color: var(--figma-color-icon-menu-disabled);
+}
+
+@utility text-figma-icon-menu-disabled {
+  color: var(--figma-color-icon-menu-disabled);
+}
+
+@utility border-figma-icon-menu-disabled {
+  border-color: var(--figma-color-icon-menu-disabled);
+}
+
+@utility outline-figma-icon-menu-disabled {
+  outline-color: var(--figma-color-icon-menu-disabled);
+}
+
+@utility fill-figma-icon-menu-disabled {
+  fill: var(--figma-color-icon-menu-disabled);
+}
+
+@utility stroke-figma-icon-menu-disabled {
+  stroke: var(--figma-color-icon-menu-disabled);
+}
+
+@utility icon-figma-menu-disabled {
+  --color-icon: var(--figma-color-icon-menu-disabled);
+}
+
+@utility bg-figma-icon-menu-hover {
+  background-color: var(--figma-color-icon-menu-hover);
+}
+
+@utility text-figma-icon-menu-hover {
+  color: var(--figma-color-icon-menu-hover);
+}
+
+@utility border-figma-icon-menu-hover {
+  border-color: var(--figma-color-icon-menu-hover);
+}
+
+@utility outline-figma-icon-menu-hover {
+  outline-color: var(--figma-color-icon-menu-hover);
+}
+
+@utility fill-figma-icon-menu-hover {
+  fill: var(--figma-color-icon-menu-hover);
+}
+
+@utility stroke-figma-icon-menu-hover {
+  stroke: var(--figma-color-icon-menu-hover);
+}
+
+@utility icon-figma-menu-hover {
+  --color-icon: var(--figma-color-icon-menu-hover);
+}
+
+@utility bg-figma-icon-menu-ondisabled {
+  background-color: var(--figma-color-icon-menu-ondisabled);
+}
+
+@utility text-figma-icon-menu-ondisabled {
+  color: var(--figma-color-icon-menu-ondisabled);
+}
+
+@utility border-figma-icon-menu-ondisabled {
+  border-color: var(--figma-color-icon-menu-ondisabled);
+}
+
+@utility outline-figma-icon-menu-ondisabled {
+  outline-color: var(--figma-color-icon-menu-ondisabled);
+}
+
+@utility fill-figma-icon-menu-ondisabled {
+  fill: var(--figma-color-icon-menu-ondisabled);
+}
+
+@utility stroke-figma-icon-menu-ondisabled {
+  stroke: var(--figma-color-icon-menu-ondisabled);
+}
+
+@utility icon-figma-menu-ondisabled {
+  --color-icon: var(--figma-color-icon-menu-ondisabled);
+}
+
+@utility bg-figma-icon-menu-onselected {
+  background-color: var(--figma-color-icon-menu-onselected);
+}
+
+@utility text-figma-icon-menu-onselected {
+  color: var(--figma-color-icon-menu-onselected);
+}
+
+@utility border-figma-icon-menu-onselected {
+  border-color: var(--figma-color-icon-menu-onselected);
+}
+
+@utility outline-figma-icon-menu-onselected {
+  outline-color: var(--figma-color-icon-menu-onselected);
+}
+
+@utility fill-figma-icon-menu-onselected {
+  fill: var(--figma-color-icon-menu-onselected);
+}
+
+@utility stroke-figma-icon-menu-onselected {
+  stroke: var(--figma-color-icon-menu-onselected);
+}
+
+@utility icon-figma-menu-onselected {
+  --color-icon: var(--figma-color-icon-menu-onselected);
+}
+
+@utility bg-figma-icon-menu-pressed {
+  background-color: var(--figma-color-icon-menu-pressed);
+}
+
+@utility text-figma-icon-menu-pressed {
+  color: var(--figma-color-icon-menu-pressed);
+}
+
+@utility border-figma-icon-menu-pressed {
+  border-color: var(--figma-color-icon-menu-pressed);
+}
+
+@utility outline-figma-icon-menu-pressed {
+  outline-color: var(--figma-color-icon-menu-pressed);
+}
+
+@utility fill-figma-icon-menu-pressed {
+  fill: var(--figma-color-icon-menu-pressed);
+}
+
+@utility stroke-figma-icon-menu-pressed {
+  stroke: var(--figma-color-icon-menu-pressed);
+}
+
+@utility icon-figma-menu-pressed {
+  --color-icon: var(--figma-color-icon-menu-pressed);
+}
+
+@utility bg-figma-icon-menu-secondary {
+  background-color: var(--figma-color-icon-menu-secondary);
+}
+
+@utility text-figma-icon-menu-secondary {
+  color: var(--figma-color-icon-menu-secondary);
+}
+
+@utility border-figma-icon-menu-secondary {
+  border-color: var(--figma-color-icon-menu-secondary);
+}
+
+@utility outline-figma-icon-menu-secondary {
+  outline-color: var(--figma-color-icon-menu-secondary);
+}
+
+@utility fill-figma-icon-menu-secondary {
+  fill: var(--figma-color-icon-menu-secondary);
+}
+
+@utility stroke-figma-icon-menu-secondary {
+  stroke: var(--figma-color-icon-menu-secondary);
+}
+
+@utility icon-figma-menu-secondary {
+  --color-icon: var(--figma-color-icon-menu-secondary);
+}
+
+@utility bg-figma-icon-menu-secondary-hover {
+  background-color: var(--figma-color-icon-menu-secondary-hover);
+}
+
+@utility text-figma-icon-menu-secondary-hover {
+  color: var(--figma-color-icon-menu-secondary-hover);
+}
+
+@utility border-figma-icon-menu-secondary-hover {
+  border-color: var(--figma-color-icon-menu-secondary-hover);
+}
+
+@utility outline-figma-icon-menu-secondary-hover {
+  outline-color: var(--figma-color-icon-menu-secondary-hover);
+}
+
+@utility fill-figma-icon-menu-secondary-hover {
+  fill: var(--figma-color-icon-menu-secondary-hover);
+}
+
+@utility stroke-figma-icon-menu-secondary-hover {
+  stroke: var(--figma-color-icon-menu-secondary-hover);
+}
+
+@utility icon-figma-menu-secondary-hover {
+  --color-icon: var(--figma-color-icon-menu-secondary-hover);
+}
+
+@utility bg-figma-icon-menu-selected {
+  background-color: var(--figma-color-icon-menu-selected);
+}
+
+@utility text-figma-icon-menu-selected {
+  color: var(--figma-color-icon-menu-selected);
+}
+
+@utility border-figma-icon-menu-selected {
+  border-color: var(--figma-color-icon-menu-selected);
+}
+
+@utility outline-figma-icon-menu-selected {
+  outline-color: var(--figma-color-icon-menu-selected);
+}
+
+@utility fill-figma-icon-menu-selected {
+  fill: var(--figma-color-icon-menu-selected);
+}
+
+@utility stroke-figma-icon-menu-selected {
+  stroke: var(--figma-color-icon-menu-selected);
+}
+
+@utility icon-figma-menu-selected {
+  --color-icon: var(--figma-color-icon-menu-selected);
+}
+
+@utility bg-figma-icon-menu-selected-secondary {
+  background-color: var(--figma-color-icon-menu-selected-secondary);
+}
+
+@utility text-figma-icon-menu-selected-secondary {
+  color: var(--figma-color-icon-menu-selected-secondary);
+}
+
+@utility border-figma-icon-menu-selected-secondary {
+  border-color: var(--figma-color-icon-menu-selected-secondary);
+}
+
+@utility outline-figma-icon-menu-selected-secondary {
+  outline-color: var(--figma-color-icon-menu-selected-secondary);
+}
+
+@utility fill-figma-icon-menu-selected-secondary {
+  fill: var(--figma-color-icon-menu-selected-secondary);
+}
+
+@utility stroke-figma-icon-menu-selected-secondary {
+  stroke: var(--figma-color-icon-menu-selected-secondary);
+}
+
+@utility icon-figma-menu-selected-secondary {
+  --color-icon: var(--figma-color-icon-menu-selected-secondary);
+}
+
+@utility bg-figma-icon-menu-selected-tertiary {
+  background-color: var(--figma-color-icon-menu-selected-tertiary);
+}
+
+@utility text-figma-icon-menu-selected-tertiary {
+  color: var(--figma-color-icon-menu-selected-tertiary);
+}
+
+@utility border-figma-icon-menu-selected-tertiary {
+  border-color: var(--figma-color-icon-menu-selected-tertiary);
+}
+
+@utility outline-figma-icon-menu-selected-tertiary {
+  outline-color: var(--figma-color-icon-menu-selected-tertiary);
+}
+
+@utility fill-figma-icon-menu-selected-tertiary {
+  fill: var(--figma-color-icon-menu-selected-tertiary);
+}
+
+@utility stroke-figma-icon-menu-selected-tertiary {
+  stroke: var(--figma-color-icon-menu-selected-tertiary);
+}
+
+@utility icon-figma-menu-selected-tertiary {
+  --color-icon: var(--figma-color-icon-menu-selected-tertiary);
+}
+
+@utility bg-figma-icon-menu-tertiary {
+  background-color: var(--figma-color-icon-menu-tertiary);
+}
+
+@utility text-figma-icon-menu-tertiary {
+  color: var(--figma-color-icon-menu-tertiary);
+}
+
+@utility border-figma-icon-menu-tertiary {
+  border-color: var(--figma-color-icon-menu-tertiary);
+}
+
+@utility outline-figma-icon-menu-tertiary {
+  outline-color: var(--figma-color-icon-menu-tertiary);
+}
+
+@utility fill-figma-icon-menu-tertiary {
+  fill: var(--figma-color-icon-menu-tertiary);
+}
+
+@utility stroke-figma-icon-menu-tertiary {
+  stroke: var(--figma-color-icon-menu-tertiary);
+}
+
+@utility icon-figma-menu-tertiary {
+  --color-icon: var(--figma-color-icon-menu-tertiary);
+}
+
+@utility bg-figma-icon-menu-tertiary-hover {
+  background-color: var(--figma-color-icon-menu-tertiary-hover);
+}
+
+@utility text-figma-icon-menu-tertiary-hover {
+  color: var(--figma-color-icon-menu-tertiary-hover);
+}
+
+@utility border-figma-icon-menu-tertiary-hover {
+  border-color: var(--figma-color-icon-menu-tertiary-hover);
+}
+
+@utility outline-figma-icon-menu-tertiary-hover {
+  outline-color: var(--figma-color-icon-menu-tertiary-hover);
+}
+
+@utility fill-figma-icon-menu-tertiary-hover {
+  fill: var(--figma-color-icon-menu-tertiary-hover);
+}
+
+@utility stroke-figma-icon-menu-tertiary-hover {
+  stroke: var(--figma-color-icon-menu-tertiary-hover);
+}
+
+@utility icon-figma-menu-tertiary-hover {
+  --color-icon: var(--figma-color-icon-menu-tertiary-hover);
+}
+
+@utility bg-figma-icon-menu-warning {
+  background-color: var(--figma-color-icon-menu-warning);
+}
+
+@utility text-figma-icon-menu-warning {
+  color: var(--figma-color-icon-menu-warning);
+}
+
+@utility border-figma-icon-menu-warning {
+  border-color: var(--figma-color-icon-menu-warning);
+}
+
+@utility outline-figma-icon-menu-warning {
+  outline-color: var(--figma-color-icon-menu-warning);
+}
+
+@utility fill-figma-icon-menu-warning {
+  fill: var(--figma-color-icon-menu-warning);
+}
+
+@utility stroke-figma-icon-menu-warning {
+  stroke: var(--figma-color-icon-menu-warning);
+}
+
+@utility icon-figma-menu-warning {
+  --color-icon: var(--figma-color-icon-menu-warning);
+}
+
+@utility bg-figma-icon-onassistive {
+  background-color: var(--figma-color-icon-onassistive);
+}
+
+@utility text-figma-icon-onassistive {
+  color: var(--figma-color-icon-onassistive);
+}
+
+@utility border-figma-icon-onassistive {
+  border-color: var(--figma-color-icon-onassistive);
+}
+
+@utility outline-figma-icon-onassistive {
+  outline-color: var(--figma-color-icon-onassistive);
+}
+
+@utility fill-figma-icon-onassistive {
+  fill: var(--figma-color-icon-onassistive);
+}
+
+@utility stroke-figma-icon-onassistive {
+  stroke: var(--figma-color-icon-onassistive);
+}
+
+@utility icon-figma-onassistive {
+  --color-icon: var(--figma-color-icon-onassistive);
+}
+
+@utility bg-figma-icon-onassistive-secondary {
+  background-color: var(--figma-color-icon-onassistive-secondary);
+}
+
+@utility text-figma-icon-onassistive-secondary {
+  color: var(--figma-color-icon-onassistive-secondary);
+}
+
+@utility border-figma-icon-onassistive-secondary {
+  border-color: var(--figma-color-icon-onassistive-secondary);
+}
+
+@utility outline-figma-icon-onassistive-secondary {
+  outline-color: var(--figma-color-icon-onassistive-secondary);
+}
+
+@utility fill-figma-icon-onassistive-secondary {
+  fill: var(--figma-color-icon-onassistive-secondary);
+}
+
+@utility stroke-figma-icon-onassistive-secondary {
+  stroke: var(--figma-color-icon-onassistive-secondary);
+}
+
+@utility icon-figma-onassistive-secondary {
+  --color-icon: var(--figma-color-icon-onassistive-secondary);
+}
+
+@utility bg-figma-icon-onassistive-tertiary {
+  background-color: var(--figma-color-icon-onassistive-tertiary);
+}
+
+@utility text-figma-icon-onassistive-tertiary {
+  color: var(--figma-color-icon-onassistive-tertiary);
+}
+
+@utility border-figma-icon-onassistive-tertiary {
+  border-color: var(--figma-color-icon-onassistive-tertiary);
+}
+
+@utility outline-figma-icon-onassistive-tertiary {
+  outline-color: var(--figma-color-icon-onassistive-tertiary);
+}
+
+@utility fill-figma-icon-onassistive-tertiary {
+  fill: var(--figma-color-icon-onassistive-tertiary);
+}
+
+@utility stroke-figma-icon-onassistive-tertiary {
+  stroke: var(--figma-color-icon-onassistive-tertiary);
+}
+
+@utility icon-figma-onassistive-tertiary {
+  --color-icon: var(--figma-color-icon-onassistive-tertiary);
+}
+
+@utility bg-figma-icon-onbrand {
+  background-color: var(--figma-color-icon-onbrand);
+}
+
+@utility text-figma-icon-onbrand {
+  color: var(--figma-color-icon-onbrand);
+}
+
+@utility border-figma-icon-onbrand {
+  border-color: var(--figma-color-icon-onbrand);
+}
+
+@utility outline-figma-icon-onbrand {
+  outline-color: var(--figma-color-icon-onbrand);
+}
+
+@utility fill-figma-icon-onbrand {
+  fill: var(--figma-color-icon-onbrand);
+}
+
+@utility stroke-figma-icon-onbrand {
+  stroke: var(--figma-color-icon-onbrand);
+}
+
+@utility icon-figma-onbrand {
+  --color-icon: var(--figma-color-icon-onbrand);
+}
+
+@utility bg-figma-icon-onbrand-secondary {
+  background-color: var(--figma-color-icon-onbrand-secondary);
+}
+
+@utility text-figma-icon-onbrand-secondary {
+  color: var(--figma-color-icon-onbrand-secondary);
+}
+
+@utility border-figma-icon-onbrand-secondary {
+  border-color: var(--figma-color-icon-onbrand-secondary);
+}
+
+@utility outline-figma-icon-onbrand-secondary {
+  outline-color: var(--figma-color-icon-onbrand-secondary);
+}
+
+@utility fill-figma-icon-onbrand-secondary {
+  fill: var(--figma-color-icon-onbrand-secondary);
+}
+
+@utility stroke-figma-icon-onbrand-secondary {
+  stroke: var(--figma-color-icon-onbrand-secondary);
+}
+
+@utility icon-figma-onbrand-secondary {
+  --color-icon: var(--figma-color-icon-onbrand-secondary);
+}
+
+@utility bg-figma-icon-onbrand-tertiary {
+  background-color: var(--figma-color-icon-onbrand-tertiary);
+}
+
+@utility text-figma-icon-onbrand-tertiary {
+  color: var(--figma-color-icon-onbrand-tertiary);
+}
+
+@utility border-figma-icon-onbrand-tertiary {
+  border-color: var(--figma-color-icon-onbrand-tertiary);
+}
+
+@utility outline-figma-icon-onbrand-tertiary {
+  outline-color: var(--figma-color-icon-onbrand-tertiary);
+}
+
+@utility fill-figma-icon-onbrand-tertiary {
+  fill: var(--figma-color-icon-onbrand-tertiary);
+}
+
+@utility stroke-figma-icon-onbrand-tertiary {
+  stroke: var(--figma-color-icon-onbrand-tertiary);
+}
+
+@utility icon-figma-onbrand-tertiary {
+  --color-icon: var(--figma-color-icon-onbrand-tertiary);
+}
+
+@utility bg-figma-icon-oncomponent {
+  background-color: var(--figma-color-icon-oncomponent);
+}
+
+@utility text-figma-icon-oncomponent {
+  color: var(--figma-color-icon-oncomponent);
+}
+
+@utility border-figma-icon-oncomponent {
+  border-color: var(--figma-color-icon-oncomponent);
+}
+
+@utility outline-figma-icon-oncomponent {
+  outline-color: var(--figma-color-icon-oncomponent);
+}
+
+@utility fill-figma-icon-oncomponent {
+  fill: var(--figma-color-icon-oncomponent);
+}
+
+@utility stroke-figma-icon-oncomponent {
+  stroke: var(--figma-color-icon-oncomponent);
+}
+
+@utility icon-figma-oncomponent {
+  --color-icon: var(--figma-color-icon-oncomponent);
+}
+
+@utility bg-figma-icon-oncomponent-secondary {
+  background-color: var(--figma-color-icon-oncomponent-secondary);
+}
+
+@utility text-figma-icon-oncomponent-secondary {
+  color: var(--figma-color-icon-oncomponent-secondary);
+}
+
+@utility border-figma-icon-oncomponent-secondary {
+  border-color: var(--figma-color-icon-oncomponent-secondary);
+}
+
+@utility outline-figma-icon-oncomponent-secondary {
+  outline-color: var(--figma-color-icon-oncomponent-secondary);
+}
+
+@utility fill-figma-icon-oncomponent-secondary {
+  fill: var(--figma-color-icon-oncomponent-secondary);
+}
+
+@utility stroke-figma-icon-oncomponent-secondary {
+  stroke: var(--figma-color-icon-oncomponent-secondary);
+}
+
+@utility icon-figma-oncomponent-secondary {
+  --color-icon: var(--figma-color-icon-oncomponent-secondary);
+}
+
+@utility bg-figma-icon-oncomponent-tertiary {
+  background-color: var(--figma-color-icon-oncomponent-tertiary);
+}
+
+@utility text-figma-icon-oncomponent-tertiary {
+  color: var(--figma-color-icon-oncomponent-tertiary);
+}
+
+@utility border-figma-icon-oncomponent-tertiary {
+  border-color: var(--figma-color-icon-oncomponent-tertiary);
+}
+
+@utility outline-figma-icon-oncomponent-tertiary {
+  outline-color: var(--figma-color-icon-oncomponent-tertiary);
+}
+
+@utility fill-figma-icon-oncomponent-tertiary {
+  fill: var(--figma-color-icon-oncomponent-tertiary);
+}
+
+@utility stroke-figma-icon-oncomponent-tertiary {
+  stroke: var(--figma-color-icon-oncomponent-tertiary);
+}
+
+@utility icon-figma-oncomponent-tertiary {
+  --color-icon: var(--figma-color-icon-oncomponent-tertiary);
+}
+
+@utility bg-figma-icon-ondanger {
+  background-color: var(--figma-color-icon-ondanger);
+}
+
+@utility text-figma-icon-ondanger {
+  color: var(--figma-color-icon-ondanger);
+}
+
+@utility border-figma-icon-ondanger {
+  border-color: var(--figma-color-icon-ondanger);
+}
+
+@utility outline-figma-icon-ondanger {
+  outline-color: var(--figma-color-icon-ondanger);
+}
+
+@utility fill-figma-icon-ondanger {
+  fill: var(--figma-color-icon-ondanger);
+}
+
+@utility stroke-figma-icon-ondanger {
+  stroke: var(--figma-color-icon-ondanger);
+}
+
+@utility icon-figma-ondanger {
+  --color-icon: var(--figma-color-icon-ondanger);
+}
+
+@utility bg-figma-icon-ondanger-secondary {
+  background-color: var(--figma-color-icon-ondanger-secondary);
+}
+
+@utility text-figma-icon-ondanger-secondary {
+  color: var(--figma-color-icon-ondanger-secondary);
+}
+
+@utility border-figma-icon-ondanger-secondary {
+  border-color: var(--figma-color-icon-ondanger-secondary);
+}
+
+@utility outline-figma-icon-ondanger-secondary {
+  outline-color: var(--figma-color-icon-ondanger-secondary);
+}
+
+@utility fill-figma-icon-ondanger-secondary {
+  fill: var(--figma-color-icon-ondanger-secondary);
+}
+
+@utility stroke-figma-icon-ondanger-secondary {
+  stroke: var(--figma-color-icon-ondanger-secondary);
+}
+
+@utility icon-figma-ondanger-secondary {
+  --color-icon: var(--figma-color-icon-ondanger-secondary);
+}
+
+@utility bg-figma-icon-ondanger-tertiary {
+  background-color: var(--figma-color-icon-ondanger-tertiary);
+}
+
+@utility text-figma-icon-ondanger-tertiary {
+  color: var(--figma-color-icon-ondanger-tertiary);
+}
+
+@utility border-figma-icon-ondanger-tertiary {
+  border-color: var(--figma-color-icon-ondanger-tertiary);
+}
+
+@utility outline-figma-icon-ondanger-tertiary {
+  outline-color: var(--figma-color-icon-ondanger-tertiary);
+}
+
+@utility fill-figma-icon-ondanger-tertiary {
+  fill: var(--figma-color-icon-ondanger-tertiary);
+}
+
+@utility stroke-figma-icon-ondanger-tertiary {
+  stroke: var(--figma-color-icon-ondanger-tertiary);
+}
+
+@utility icon-figma-ondanger-tertiary {
+  --color-icon: var(--figma-color-icon-ondanger-tertiary);
+}
+
+@utility bg-figma-icon-ondesign {
+  background-color: var(--figma-color-icon-ondesign);
+}
+
+@utility text-figma-icon-ondesign {
+  color: var(--figma-color-icon-ondesign);
+}
+
+@utility border-figma-icon-ondesign {
+  border-color: var(--figma-color-icon-ondesign);
+}
+
+@utility outline-figma-icon-ondesign {
+  outline-color: var(--figma-color-icon-ondesign);
+}
+
+@utility fill-figma-icon-ondesign {
+  fill: var(--figma-color-icon-ondesign);
+}
+
+@utility stroke-figma-icon-ondesign {
+  stroke: var(--figma-color-icon-ondesign);
+}
+
+@utility icon-figma-ondesign {
+  --color-icon: var(--figma-color-icon-ondesign);
+}
+
+@utility bg-figma-icon-ondesign-secondary {
+  background-color: var(--figma-color-icon-ondesign-secondary);
+}
+
+@utility text-figma-icon-ondesign-secondary {
+  color: var(--figma-color-icon-ondesign-secondary);
+}
+
+@utility border-figma-icon-ondesign-secondary {
+  border-color: var(--figma-color-icon-ondesign-secondary);
+}
+
+@utility outline-figma-icon-ondesign-secondary {
+  outline-color: var(--figma-color-icon-ondesign-secondary);
+}
+
+@utility fill-figma-icon-ondesign-secondary {
+  fill: var(--figma-color-icon-ondesign-secondary);
+}
+
+@utility stroke-figma-icon-ondesign-secondary {
+  stroke: var(--figma-color-icon-ondesign-secondary);
+}
+
+@utility icon-figma-ondesign-secondary {
+  --color-icon: var(--figma-color-icon-ondesign-secondary);
+}
+
+@utility bg-figma-icon-ondesign-tertiary {
+  background-color: var(--figma-color-icon-ondesign-tertiary);
+}
+
+@utility text-figma-icon-ondesign-tertiary {
+  color: var(--figma-color-icon-ondesign-tertiary);
+}
+
+@utility border-figma-icon-ondesign-tertiary {
+  border-color: var(--figma-color-icon-ondesign-tertiary);
+}
+
+@utility outline-figma-icon-ondesign-tertiary {
+  outline-color: var(--figma-color-icon-ondesign-tertiary);
+}
+
+@utility fill-figma-icon-ondesign-tertiary {
+  fill: var(--figma-color-icon-ondesign-tertiary);
+}
+
+@utility stroke-figma-icon-ondesign-tertiary {
+  stroke: var(--figma-color-icon-ondesign-tertiary);
+}
+
+@utility icon-figma-ondesign-tertiary {
+  --color-icon: var(--figma-color-icon-ondesign-tertiary);
+}
+
+@utility bg-figma-icon-ondisabled {
+  background-color: var(--figma-color-icon-ondisabled);
+}
+
+@utility text-figma-icon-ondisabled {
+  color: var(--figma-color-icon-ondisabled);
+}
+
+@utility border-figma-icon-ondisabled {
+  border-color: var(--figma-color-icon-ondisabled);
+}
+
+@utility outline-figma-icon-ondisabled {
+  outline-color: var(--figma-color-icon-ondisabled);
+}
+
+@utility fill-figma-icon-ondisabled {
+  fill: var(--figma-color-icon-ondisabled);
+}
+
+@utility stroke-figma-icon-ondisabled {
+  stroke: var(--figma-color-icon-ondisabled);
+}
+
+@utility icon-figma-ondisabled {
+  --color-icon: var(--figma-color-icon-ondisabled);
+}
+
+@utility bg-figma-icon-onfigjam {
+  background-color: var(--figma-color-icon-onfigjam);
+}
+
+@utility text-figma-icon-onfigjam {
+  color: var(--figma-color-icon-onfigjam);
+}
+
+@utility border-figma-icon-onfigjam {
+  border-color: var(--figma-color-icon-onfigjam);
+}
+
+@utility outline-figma-icon-onfigjam {
+  outline-color: var(--figma-color-icon-onfigjam);
+}
+
+@utility fill-figma-icon-onfigjam {
+  fill: var(--figma-color-icon-onfigjam);
+}
+
+@utility stroke-figma-icon-onfigjam {
+  stroke: var(--figma-color-icon-onfigjam);
+}
+
+@utility icon-figma-onfigjam {
+  --color-icon: var(--figma-color-icon-onfigjam);
+}
+
+@utility bg-figma-icon-onfigjam-secondary {
+  background-color: var(--figma-color-icon-onfigjam-secondary);
+}
+
+@utility text-figma-icon-onfigjam-secondary {
+  color: var(--figma-color-icon-onfigjam-secondary);
+}
+
+@utility border-figma-icon-onfigjam-secondary {
+  border-color: var(--figma-color-icon-onfigjam-secondary);
+}
+
+@utility outline-figma-icon-onfigjam-secondary {
+  outline-color: var(--figma-color-icon-onfigjam-secondary);
+}
+
+@utility fill-figma-icon-onfigjam-secondary {
+  fill: var(--figma-color-icon-onfigjam-secondary);
+}
+
+@utility stroke-figma-icon-onfigjam-secondary {
+  stroke: var(--figma-color-icon-onfigjam-secondary);
+}
+
+@utility icon-figma-onfigjam-secondary {
+  --color-icon: var(--figma-color-icon-onfigjam-secondary);
+}
+
+@utility bg-figma-icon-onfigjam-tertiary {
+  background-color: var(--figma-color-icon-onfigjam-tertiary);
+}
+
+@utility text-figma-icon-onfigjam-tertiary {
+  color: var(--figma-color-icon-onfigjam-tertiary);
+}
+
+@utility border-figma-icon-onfigjam-tertiary {
+  border-color: var(--figma-color-icon-onfigjam-tertiary);
+}
+
+@utility outline-figma-icon-onfigjam-tertiary {
+  outline-color: var(--figma-color-icon-onfigjam-tertiary);
+}
+
+@utility fill-figma-icon-onfigjam-tertiary {
+  fill: var(--figma-color-icon-onfigjam-tertiary);
+}
+
+@utility stroke-figma-icon-onfigjam-tertiary {
+  stroke: var(--figma-color-icon-onfigjam-tertiary);
+}
+
+@utility icon-figma-onfigjam-tertiary {
+  --color-icon: var(--figma-color-icon-onfigjam-tertiary);
+}
+
+@utility bg-figma-icon-oninverse {
+  background-color: var(--figma-color-icon-oninverse);
+}
+
+@utility text-figma-icon-oninverse {
+  color: var(--figma-color-icon-oninverse);
+}
+
+@utility border-figma-icon-oninverse {
+  border-color: var(--figma-color-icon-oninverse);
+}
+
+@utility outline-figma-icon-oninverse {
+  outline-color: var(--figma-color-icon-oninverse);
+}
+
+@utility fill-figma-icon-oninverse {
+  fill: var(--figma-color-icon-oninverse);
+}
+
+@utility stroke-figma-icon-oninverse {
+  stroke: var(--figma-color-icon-oninverse);
+}
+
+@utility icon-figma-oninverse {
+  --color-icon: var(--figma-color-icon-oninverse);
+}
+
+@utility bg-figma-icon-onmeasure {
+  background-color: var(--figma-color-icon-onmeasure);
+}
+
+@utility text-figma-icon-onmeasure {
+  color: var(--figma-color-icon-onmeasure);
+}
+
+@utility border-figma-icon-onmeasure {
+  border-color: var(--figma-color-icon-onmeasure);
+}
+
+@utility outline-figma-icon-onmeasure {
+  outline-color: var(--figma-color-icon-onmeasure);
+}
+
+@utility fill-figma-icon-onmeasure {
+  fill: var(--figma-color-icon-onmeasure);
+}
+
+@utility stroke-figma-icon-onmeasure {
+  stroke: var(--figma-color-icon-onmeasure);
+}
+
+@utility icon-figma-onmeasure {
+  --color-icon: var(--figma-color-icon-onmeasure);
+}
+
+@utility bg-figma-icon-onmeasure-secondary {
+  background-color: var(--figma-color-icon-onmeasure-secondary);
+}
+
+@utility text-figma-icon-onmeasure-secondary {
+  color: var(--figma-color-icon-onmeasure-secondary);
+}
+
+@utility border-figma-icon-onmeasure-secondary {
+  border-color: var(--figma-color-icon-onmeasure-secondary);
+}
+
+@utility outline-figma-icon-onmeasure-secondary {
+  outline-color: var(--figma-color-icon-onmeasure-secondary);
+}
+
+@utility fill-figma-icon-onmeasure-secondary {
+  fill: var(--figma-color-icon-onmeasure-secondary);
+}
+
+@utility stroke-figma-icon-onmeasure-secondary {
+  stroke: var(--figma-color-icon-onmeasure-secondary);
+}
+
+@utility icon-figma-onmeasure-secondary {
+  --color-icon: var(--figma-color-icon-onmeasure-secondary);
+}
+
+@utility bg-figma-icon-onmeasure-tertiary {
+  background-color: var(--figma-color-icon-onmeasure-tertiary);
+}
+
+@utility text-figma-icon-onmeasure-tertiary {
+  color: var(--figma-color-icon-onmeasure-tertiary);
+}
+
+@utility border-figma-icon-onmeasure-tertiary {
+  border-color: var(--figma-color-icon-onmeasure-tertiary);
+}
+
+@utility outline-figma-icon-onmeasure-tertiary {
+  outline-color: var(--figma-color-icon-onmeasure-tertiary);
+}
+
+@utility fill-figma-icon-onmeasure-tertiary {
+  fill: var(--figma-color-icon-onmeasure-tertiary);
+}
+
+@utility stroke-figma-icon-onmeasure-tertiary {
+  stroke: var(--figma-color-icon-onmeasure-tertiary);
+}
+
+@utility icon-figma-onmeasure-tertiary {
+  --color-icon: var(--figma-color-icon-onmeasure-tertiary);
+}
+
+@utility bg-figma-icon-onselected {
+  background-color: var(--figma-color-icon-onselected);
+}
+
+@utility text-figma-icon-onselected {
+  color: var(--figma-color-icon-onselected);
+}
+
+@utility border-figma-icon-onselected {
+  border-color: var(--figma-color-icon-onselected);
+}
+
+@utility outline-figma-icon-onselected {
+  outline-color: var(--figma-color-icon-onselected);
+}
+
+@utility fill-figma-icon-onselected {
+  fill: var(--figma-color-icon-onselected);
+}
+
+@utility stroke-figma-icon-onselected {
+  stroke: var(--figma-color-icon-onselected);
+}
+
+@utility icon-figma-onselected {
+  --color-icon: var(--figma-color-icon-onselected);
+}
+
+@utility bg-figma-icon-onselected-secondary {
+  background-color: var(--figma-color-icon-onselected-secondary);
+}
+
+@utility text-figma-icon-onselected-secondary {
+  color: var(--figma-color-icon-onselected-secondary);
+}
+
+@utility border-figma-icon-onselected-secondary {
+  border-color: var(--figma-color-icon-onselected-secondary);
+}
+
+@utility outline-figma-icon-onselected-secondary {
+  outline-color: var(--figma-color-icon-onselected-secondary);
+}
+
+@utility fill-figma-icon-onselected-secondary {
+  fill: var(--figma-color-icon-onselected-secondary);
+}
+
+@utility stroke-figma-icon-onselected-secondary {
+  stroke: var(--figma-color-icon-onselected-secondary);
+}
+
+@utility icon-figma-onselected-secondary {
+  --color-icon: var(--figma-color-icon-onselected-secondary);
+}
+
+@utility bg-figma-icon-onselected-strong {
+  background-color: var(--figma-color-icon-onselected-strong);
+}
+
+@utility text-figma-icon-onselected-strong {
+  color: var(--figma-color-icon-onselected-strong);
+}
+
+@utility border-figma-icon-onselected-strong {
+  border-color: var(--figma-color-icon-onselected-strong);
+}
+
+@utility outline-figma-icon-onselected-strong {
+  outline-color: var(--figma-color-icon-onselected-strong);
+}
+
+@utility fill-figma-icon-onselected-strong {
+  fill: var(--figma-color-icon-onselected-strong);
+}
+
+@utility stroke-figma-icon-onselected-strong {
+  stroke: var(--figma-color-icon-onselected-strong);
+}
+
+@utility icon-figma-onselected-strong {
+  --color-icon: var(--figma-color-icon-onselected-strong);
+}
+
+@utility bg-figma-icon-onselected-tertiary {
+  background-color: var(--figma-color-icon-onselected-tertiary);
+}
+
+@utility text-figma-icon-onselected-tertiary {
+  color: var(--figma-color-icon-onselected-tertiary);
+}
+
+@utility border-figma-icon-onselected-tertiary {
+  border-color: var(--figma-color-icon-onselected-tertiary);
+}
+
+@utility outline-figma-icon-onselected-tertiary {
+  outline-color: var(--figma-color-icon-onselected-tertiary);
+}
+
+@utility fill-figma-icon-onselected-tertiary {
+  fill: var(--figma-color-icon-onselected-tertiary);
+}
+
+@utility stroke-figma-icon-onselected-tertiary {
+  stroke: var(--figma-color-icon-onselected-tertiary);
+}
+
+@utility icon-figma-onselected-tertiary {
+  --color-icon: var(--figma-color-icon-onselected-tertiary);
+}
+
+@utility bg-figma-icon-onsuccess {
+  background-color: var(--figma-color-icon-onsuccess);
+}
+
+@utility text-figma-icon-onsuccess {
+  color: var(--figma-color-icon-onsuccess);
+}
+
+@utility border-figma-icon-onsuccess {
+  border-color: var(--figma-color-icon-onsuccess);
+}
+
+@utility outline-figma-icon-onsuccess {
+  outline-color: var(--figma-color-icon-onsuccess);
+}
+
+@utility fill-figma-icon-onsuccess {
+  fill: var(--figma-color-icon-onsuccess);
+}
+
+@utility stroke-figma-icon-onsuccess {
+  stroke: var(--figma-color-icon-onsuccess);
+}
+
+@utility icon-figma-onsuccess {
+  --color-icon: var(--figma-color-icon-onsuccess);
+}
+
+@utility bg-figma-icon-onsuccess-secondary {
+  background-color: var(--figma-color-icon-onsuccess-secondary);
+}
+
+@utility text-figma-icon-onsuccess-secondary {
+  color: var(--figma-color-icon-onsuccess-secondary);
+}
+
+@utility border-figma-icon-onsuccess-secondary {
+  border-color: var(--figma-color-icon-onsuccess-secondary);
+}
+
+@utility outline-figma-icon-onsuccess-secondary {
+  outline-color: var(--figma-color-icon-onsuccess-secondary);
+}
+
+@utility fill-figma-icon-onsuccess-secondary {
+  fill: var(--figma-color-icon-onsuccess-secondary);
+}
+
+@utility stroke-figma-icon-onsuccess-secondary {
+  stroke: var(--figma-color-icon-onsuccess-secondary);
+}
+
+@utility icon-figma-onsuccess-secondary {
+  --color-icon: var(--figma-color-icon-onsuccess-secondary);
+}
+
+@utility bg-figma-icon-onsuccess-tertiary {
+  background-color: var(--figma-color-icon-onsuccess-tertiary);
+}
+
+@utility text-figma-icon-onsuccess-tertiary {
+  color: var(--figma-color-icon-onsuccess-tertiary);
+}
+
+@utility border-figma-icon-onsuccess-tertiary {
+  border-color: var(--figma-color-icon-onsuccess-tertiary);
+}
+
+@utility outline-figma-icon-onsuccess-tertiary {
+  outline-color: var(--figma-color-icon-onsuccess-tertiary);
+}
+
+@utility fill-figma-icon-onsuccess-tertiary {
+  fill: var(--figma-color-icon-onsuccess-tertiary);
+}
+
+@utility stroke-figma-icon-onsuccess-tertiary {
+  stroke: var(--figma-color-icon-onsuccess-tertiary);
+}
+
+@utility icon-figma-onsuccess-tertiary {
+  --color-icon: var(--figma-color-icon-onsuccess-tertiary);
+}
+
+@utility bg-figma-icon-onwarning {
+  background-color: var(--figma-color-icon-onwarning);
+}
+
+@utility text-figma-icon-onwarning {
+  color: var(--figma-color-icon-onwarning);
+}
+
+@utility border-figma-icon-onwarning {
+  border-color: var(--figma-color-icon-onwarning);
+}
+
+@utility outline-figma-icon-onwarning {
+  outline-color: var(--figma-color-icon-onwarning);
+}
+
+@utility fill-figma-icon-onwarning {
+  fill: var(--figma-color-icon-onwarning);
+}
+
+@utility stroke-figma-icon-onwarning {
+  stroke: var(--figma-color-icon-onwarning);
+}
+
+@utility icon-figma-onwarning {
+  --color-icon: var(--figma-color-icon-onwarning);
+}
+
+@utility bg-figma-icon-onwarning-secondary {
+  background-color: var(--figma-color-icon-onwarning-secondary);
+}
+
+@utility text-figma-icon-onwarning-secondary {
+  color: var(--figma-color-icon-onwarning-secondary);
+}
+
+@utility border-figma-icon-onwarning-secondary {
+  border-color: var(--figma-color-icon-onwarning-secondary);
+}
+
+@utility outline-figma-icon-onwarning-secondary {
+  outline-color: var(--figma-color-icon-onwarning-secondary);
+}
+
+@utility fill-figma-icon-onwarning-secondary {
+  fill: var(--figma-color-icon-onwarning-secondary);
+}
+
+@utility stroke-figma-icon-onwarning-secondary {
+  stroke: var(--figma-color-icon-onwarning-secondary);
+}
+
+@utility icon-figma-onwarning-secondary {
+  --color-icon: var(--figma-color-icon-onwarning-secondary);
+}
+
+@utility bg-figma-icon-onwarning-tertiary {
+  background-color: var(--figma-color-icon-onwarning-tertiary);
+}
+
+@utility text-figma-icon-onwarning-tertiary {
+  color: var(--figma-color-icon-onwarning-tertiary);
+}
+
+@utility border-figma-icon-onwarning-tertiary {
+  border-color: var(--figma-color-icon-onwarning-tertiary);
+}
+
+@utility outline-figma-icon-onwarning-tertiary {
+  outline-color: var(--figma-color-icon-onwarning-tertiary);
+}
+
+@utility fill-figma-icon-onwarning-tertiary {
+  fill: var(--figma-color-icon-onwarning-tertiary);
+}
+
+@utility stroke-figma-icon-onwarning-tertiary {
+  stroke: var(--figma-color-icon-onwarning-tertiary);
+}
+
+@utility icon-figma-onwarning-tertiary {
+  --color-icon: var(--figma-color-icon-onwarning-tertiary);
+}
+
+@utility bg-figma-icon-pressed {
+  background-color: var(--figma-color-icon-pressed);
+}
+
+@utility text-figma-icon-pressed {
+  color: var(--figma-color-icon-pressed);
+}
+
+@utility border-figma-icon-pressed {
+  border-color: var(--figma-color-icon-pressed);
+}
+
+@utility outline-figma-icon-pressed {
+  outline-color: var(--figma-color-icon-pressed);
+}
+
+@utility fill-figma-icon-pressed {
+  fill: var(--figma-color-icon-pressed);
+}
+
+@utility stroke-figma-icon-pressed {
+  stroke: var(--figma-color-icon-pressed);
+}
+
+@utility icon-figma-pressed {
+  --color-icon: var(--figma-color-icon-pressed);
+}
+
+@utility bg-figma-icon-secondary {
+  background-color: var(--figma-color-icon-secondary);
+}
+
+@utility text-figma-icon-secondary {
+  color: var(--figma-color-icon-secondary);
+}
+
+@utility border-figma-icon-secondary {
+  border-color: var(--figma-color-icon-secondary);
+}
+
+@utility outline-figma-icon-secondary {
+  outline-color: var(--figma-color-icon-secondary);
+}
+
+@utility fill-figma-icon-secondary {
+  fill: var(--figma-color-icon-secondary);
+}
+
+@utility stroke-figma-icon-secondary {
+  stroke: var(--figma-color-icon-secondary);
+}
+
+@utility icon-figma-secondary {
+  --color-icon: var(--figma-color-icon-secondary);
+}
+
+@utility bg-figma-icon-secondary-hover {
+  background-color: var(--figma-color-icon-secondary-hover);
+}
+
+@utility text-figma-icon-secondary-hover {
+  color: var(--figma-color-icon-secondary-hover);
+}
+
+@utility border-figma-icon-secondary-hover {
+  border-color: var(--figma-color-icon-secondary-hover);
+}
+
+@utility outline-figma-icon-secondary-hover {
+  outline-color: var(--figma-color-icon-secondary-hover);
+}
+
+@utility fill-figma-icon-secondary-hover {
+  fill: var(--figma-color-icon-secondary-hover);
+}
+
+@utility stroke-figma-icon-secondary-hover {
+  stroke: var(--figma-color-icon-secondary-hover);
+}
+
+@utility icon-figma-secondary-hover {
+  --color-icon: var(--figma-color-icon-secondary-hover);
+}
+
+@utility bg-figma-icon-selected {
+  background-color: var(--figma-color-icon-selected);
+}
+
+@utility text-figma-icon-selected {
+  color: var(--figma-color-icon-selected);
+}
+
+@utility border-figma-icon-selected {
+  border-color: var(--figma-color-icon-selected);
+}
+
+@utility outline-figma-icon-selected {
+  outline-color: var(--figma-color-icon-selected);
+}
+
+@utility fill-figma-icon-selected {
+  fill: var(--figma-color-icon-selected);
+}
+
+@utility stroke-figma-icon-selected {
+  stroke: var(--figma-color-icon-selected);
+}
+
+@utility icon-figma-selected {
+  --color-icon: var(--figma-color-icon-selected);
+}
+
+@utility bg-figma-icon-selected-secondary {
+  background-color: var(--figma-color-icon-selected-secondary);
+}
+
+@utility text-figma-icon-selected-secondary {
+  color: var(--figma-color-icon-selected-secondary);
+}
+
+@utility border-figma-icon-selected-secondary {
+  border-color: var(--figma-color-icon-selected-secondary);
+}
+
+@utility outline-figma-icon-selected-secondary {
+  outline-color: var(--figma-color-icon-selected-secondary);
+}
+
+@utility fill-figma-icon-selected-secondary {
+  fill: var(--figma-color-icon-selected-secondary);
+}
+
+@utility stroke-figma-icon-selected-secondary {
+  stroke: var(--figma-color-icon-selected-secondary);
+}
+
+@utility icon-figma-selected-secondary {
+  --color-icon: var(--figma-color-icon-selected-secondary);
+}
+
+@utility bg-figma-icon-selected-tertiary {
+  background-color: var(--figma-color-icon-selected-tertiary);
+}
+
+@utility text-figma-icon-selected-tertiary {
+  color: var(--figma-color-icon-selected-tertiary);
+}
+
+@utility border-figma-icon-selected-tertiary {
+  border-color: var(--figma-color-icon-selected-tertiary);
+}
+
+@utility outline-figma-icon-selected-tertiary {
+  outline-color: var(--figma-color-icon-selected-tertiary);
+}
+
+@utility fill-figma-icon-selected-tertiary {
+  fill: var(--figma-color-icon-selected-tertiary);
+}
+
+@utility stroke-figma-icon-selected-tertiary {
+  stroke: var(--figma-color-icon-selected-tertiary);
+}
+
+@utility icon-figma-selected-tertiary {
+  --color-icon: var(--figma-color-icon-selected-tertiary);
+}
+
+@utility bg-figma-icon-success {
+  background-color: var(--figma-color-icon-success);
+}
+
+@utility text-figma-icon-success {
+  color: var(--figma-color-icon-success);
+}
+
+@utility border-figma-icon-success {
+  border-color: var(--figma-color-icon-success);
+}
+
+@utility outline-figma-icon-success {
+  outline-color: var(--figma-color-icon-success);
+}
+
+@utility fill-figma-icon-success {
+  fill: var(--figma-color-icon-success);
+}
+
+@utility stroke-figma-icon-success {
+  stroke: var(--figma-color-icon-success);
+}
+
+@utility icon-figma-success {
+  --color-icon: var(--figma-color-icon-success);
+}
+
+@utility bg-figma-icon-success-pressed {
+  background-color: var(--figma-color-icon-success-pressed);
+}
+
+@utility text-figma-icon-success-pressed {
+  color: var(--figma-color-icon-success-pressed);
+}
+
+@utility border-figma-icon-success-pressed {
+  border-color: var(--figma-color-icon-success-pressed);
+}
+
+@utility outline-figma-icon-success-pressed {
+  outline-color: var(--figma-color-icon-success-pressed);
+}
+
+@utility fill-figma-icon-success-pressed {
+  fill: var(--figma-color-icon-success-pressed);
+}
+
+@utility stroke-figma-icon-success-pressed {
+  stroke: var(--figma-color-icon-success-pressed);
+}
+
+@utility icon-figma-success-pressed {
+  --color-icon: var(--figma-color-icon-success-pressed);
+}
+
+@utility bg-figma-icon-success-secondary {
+  background-color: var(--figma-color-icon-success-secondary);
+}
+
+@utility text-figma-icon-success-secondary {
+  color: var(--figma-color-icon-success-secondary);
+}
+
+@utility border-figma-icon-success-secondary {
+  border-color: var(--figma-color-icon-success-secondary);
+}
+
+@utility outline-figma-icon-success-secondary {
+  outline-color: var(--figma-color-icon-success-secondary);
+}
+
+@utility fill-figma-icon-success-secondary {
+  fill: var(--figma-color-icon-success-secondary);
+}
+
+@utility stroke-figma-icon-success-secondary {
+  stroke: var(--figma-color-icon-success-secondary);
+}
+
+@utility icon-figma-success-secondary {
+  --color-icon: var(--figma-color-icon-success-secondary);
+}
+
+@utility bg-figma-icon-success-tertiary {
+  background-color: var(--figma-color-icon-success-tertiary);
+}
+
+@utility text-figma-icon-success-tertiary {
+  color: var(--figma-color-icon-success-tertiary);
+}
+
+@utility border-figma-icon-success-tertiary {
+  border-color: var(--figma-color-icon-success-tertiary);
+}
+
+@utility outline-figma-icon-success-tertiary {
+  outline-color: var(--figma-color-icon-success-tertiary);
+}
+
+@utility fill-figma-icon-success-tertiary {
+  fill: var(--figma-color-icon-success-tertiary);
+}
+
+@utility stroke-figma-icon-success-tertiary {
+  stroke: var(--figma-color-icon-success-tertiary);
+}
+
+@utility icon-figma-success-tertiary {
+  --color-icon: var(--figma-color-icon-success-tertiary);
+}
+
+@utility bg-figma-icon-tertiary {
+  background-color: var(--figma-color-icon-tertiary);
+}
+
+@utility text-figma-icon-tertiary {
+  color: var(--figma-color-icon-tertiary);
+}
+
+@utility border-figma-icon-tertiary {
+  border-color: var(--figma-color-icon-tertiary);
+}
+
+@utility outline-figma-icon-tertiary {
+  outline-color: var(--figma-color-icon-tertiary);
+}
+
+@utility fill-figma-icon-tertiary {
+  fill: var(--figma-color-icon-tertiary);
+}
+
+@utility stroke-figma-icon-tertiary {
+  stroke: var(--figma-color-icon-tertiary);
+}
+
+@utility icon-figma-tertiary {
+  --color-icon: var(--figma-color-icon-tertiary);
+}
+
+@utility bg-figma-icon-tertiary-hover {
+  background-color: var(--figma-color-icon-tertiary-hover);
+}
+
+@utility text-figma-icon-tertiary-hover {
+  color: var(--figma-color-icon-tertiary-hover);
+}
+
+@utility border-figma-icon-tertiary-hover {
+  border-color: var(--figma-color-icon-tertiary-hover);
+}
+
+@utility outline-figma-icon-tertiary-hover {
+  outline-color: var(--figma-color-icon-tertiary-hover);
+}
+
+@utility fill-figma-icon-tertiary-hover {
+  fill: var(--figma-color-icon-tertiary-hover);
+}
+
+@utility stroke-figma-icon-tertiary-hover {
+  stroke: var(--figma-color-icon-tertiary-hover);
+}
+
+@utility icon-figma-tertiary-hover {
+  --color-icon: var(--figma-color-icon-tertiary-hover);
+}
+
+@utility bg-figma-icon-toolbar {
+  background-color: var(--figma-color-icon-toolbar);
+}
+
+@utility text-figma-icon-toolbar {
+  color: var(--figma-color-icon-toolbar);
+}
+
+@utility border-figma-icon-toolbar {
+  border-color: var(--figma-color-icon-toolbar);
+}
+
+@utility outline-figma-icon-toolbar {
+  outline-color: var(--figma-color-icon-toolbar);
+}
+
+@utility fill-figma-icon-toolbar {
+  fill: var(--figma-color-icon-toolbar);
+}
+
+@utility stroke-figma-icon-toolbar {
+  stroke: var(--figma-color-icon-toolbar);
+}
+
+@utility icon-figma-toolbar {
+  --color-icon: var(--figma-color-icon-toolbar);
+}
+
+@utility bg-figma-icon-toolbar-danger {
+  background-color: var(--figma-color-icon-toolbar-danger);
+}
+
+@utility text-figma-icon-toolbar-danger {
+  color: var(--figma-color-icon-toolbar-danger);
+}
+
+@utility border-figma-icon-toolbar-danger {
+  border-color: var(--figma-color-icon-toolbar-danger);
+}
+
+@utility outline-figma-icon-toolbar-danger {
+  outline-color: var(--figma-color-icon-toolbar-danger);
+}
+
+@utility fill-figma-icon-toolbar-danger {
+  fill: var(--figma-color-icon-toolbar-danger);
+}
+
+@utility stroke-figma-icon-toolbar-danger {
+  stroke: var(--figma-color-icon-toolbar-danger);
+}
+
+@utility icon-figma-toolbar-danger {
+  --color-icon: var(--figma-color-icon-toolbar-danger);
+}
+
+@utility bg-figma-icon-toolbar-disabled {
+  background-color: var(--figma-color-icon-toolbar-disabled);
+}
+
+@utility text-figma-icon-toolbar-disabled {
+  color: var(--figma-color-icon-toolbar-disabled);
+}
+
+@utility border-figma-icon-toolbar-disabled {
+  border-color: var(--figma-color-icon-toolbar-disabled);
+}
+
+@utility outline-figma-icon-toolbar-disabled {
+  outline-color: var(--figma-color-icon-toolbar-disabled);
+}
+
+@utility fill-figma-icon-toolbar-disabled {
+  fill: var(--figma-color-icon-toolbar-disabled);
+}
+
+@utility stroke-figma-icon-toolbar-disabled {
+  stroke: var(--figma-color-icon-toolbar-disabled);
+}
+
+@utility icon-figma-toolbar-disabled {
+  --color-icon: var(--figma-color-icon-toolbar-disabled);
+}
+
+@utility bg-figma-icon-toolbar-hover {
+  background-color: var(--figma-color-icon-toolbar-hover);
+}
+
+@utility text-figma-icon-toolbar-hover {
+  color: var(--figma-color-icon-toolbar-hover);
+}
+
+@utility border-figma-icon-toolbar-hover {
+  border-color: var(--figma-color-icon-toolbar-hover);
+}
+
+@utility outline-figma-icon-toolbar-hover {
+  outline-color: var(--figma-color-icon-toolbar-hover);
+}
+
+@utility fill-figma-icon-toolbar-hover {
+  fill: var(--figma-color-icon-toolbar-hover);
+}
+
+@utility stroke-figma-icon-toolbar-hover {
+  stroke: var(--figma-color-icon-toolbar-hover);
+}
+
+@utility icon-figma-toolbar-hover {
+  --color-icon: var(--figma-color-icon-toolbar-hover);
+}
+
+@utility bg-figma-icon-toolbar-ondisabled {
+  background-color: var(--figma-color-icon-toolbar-ondisabled);
+}
+
+@utility text-figma-icon-toolbar-ondisabled {
+  color: var(--figma-color-icon-toolbar-ondisabled);
+}
+
+@utility border-figma-icon-toolbar-ondisabled {
+  border-color: var(--figma-color-icon-toolbar-ondisabled);
+}
+
+@utility outline-figma-icon-toolbar-ondisabled {
+  outline-color: var(--figma-color-icon-toolbar-ondisabled);
+}
+
+@utility fill-figma-icon-toolbar-ondisabled {
+  fill: var(--figma-color-icon-toolbar-ondisabled);
+}
+
+@utility stroke-figma-icon-toolbar-ondisabled {
+  stroke: var(--figma-color-icon-toolbar-ondisabled);
+}
+
+@utility icon-figma-toolbar-ondisabled {
+  --color-icon: var(--figma-color-icon-toolbar-ondisabled);
+}
+
+@utility bg-figma-icon-toolbar-onselected {
+  background-color: var(--figma-color-icon-toolbar-onselected);
+}
+
+@utility text-figma-icon-toolbar-onselected {
+  color: var(--figma-color-icon-toolbar-onselected);
+}
+
+@utility border-figma-icon-toolbar-onselected {
+  border-color: var(--figma-color-icon-toolbar-onselected);
+}
+
+@utility outline-figma-icon-toolbar-onselected {
+  outline-color: var(--figma-color-icon-toolbar-onselected);
+}
+
+@utility fill-figma-icon-toolbar-onselected {
+  fill: var(--figma-color-icon-toolbar-onselected);
+}
+
+@utility stroke-figma-icon-toolbar-onselected {
+  stroke: var(--figma-color-icon-toolbar-onselected);
+}
+
+@utility icon-figma-toolbar-onselected {
+  --color-icon: var(--figma-color-icon-toolbar-onselected);
+}
+
+@utility bg-figma-icon-toolbar-pressed {
+  background-color: var(--figma-color-icon-toolbar-pressed);
+}
+
+@utility text-figma-icon-toolbar-pressed {
+  color: var(--figma-color-icon-toolbar-pressed);
+}
+
+@utility border-figma-icon-toolbar-pressed {
+  border-color: var(--figma-color-icon-toolbar-pressed);
+}
+
+@utility outline-figma-icon-toolbar-pressed {
+  outline-color: var(--figma-color-icon-toolbar-pressed);
+}
+
+@utility fill-figma-icon-toolbar-pressed {
+  fill: var(--figma-color-icon-toolbar-pressed);
+}
+
+@utility stroke-figma-icon-toolbar-pressed {
+  stroke: var(--figma-color-icon-toolbar-pressed);
+}
+
+@utility icon-figma-toolbar-pressed {
+  --color-icon: var(--figma-color-icon-toolbar-pressed);
+}
+
+@utility bg-figma-icon-toolbar-secondary {
+  background-color: var(--figma-color-icon-toolbar-secondary);
+}
+
+@utility text-figma-icon-toolbar-secondary {
+  color: var(--figma-color-icon-toolbar-secondary);
+}
+
+@utility border-figma-icon-toolbar-secondary {
+  border-color: var(--figma-color-icon-toolbar-secondary);
+}
+
+@utility outline-figma-icon-toolbar-secondary {
+  outline-color: var(--figma-color-icon-toolbar-secondary);
+}
+
+@utility fill-figma-icon-toolbar-secondary {
+  fill: var(--figma-color-icon-toolbar-secondary);
+}
+
+@utility stroke-figma-icon-toolbar-secondary {
+  stroke: var(--figma-color-icon-toolbar-secondary);
+}
+
+@utility icon-figma-toolbar-secondary {
+  --color-icon: var(--figma-color-icon-toolbar-secondary);
+}
+
+@utility bg-figma-icon-toolbar-secondary-hover {
+  background-color: var(--figma-color-icon-toolbar-secondary-hover);
+}
+
+@utility text-figma-icon-toolbar-secondary-hover {
+  color: var(--figma-color-icon-toolbar-secondary-hover);
+}
+
+@utility border-figma-icon-toolbar-secondary-hover {
+  border-color: var(--figma-color-icon-toolbar-secondary-hover);
+}
+
+@utility outline-figma-icon-toolbar-secondary-hover {
+  outline-color: var(--figma-color-icon-toolbar-secondary-hover);
+}
+
+@utility fill-figma-icon-toolbar-secondary-hover {
+  fill: var(--figma-color-icon-toolbar-secondary-hover);
+}
+
+@utility stroke-figma-icon-toolbar-secondary-hover {
+  stroke: var(--figma-color-icon-toolbar-secondary-hover);
+}
+
+@utility icon-figma-toolbar-secondary-hover {
+  --color-icon: var(--figma-color-icon-toolbar-secondary-hover);
+}
+
+@utility bg-figma-icon-toolbar-selected {
+  background-color: var(--figma-color-icon-toolbar-selected);
+}
+
+@utility text-figma-icon-toolbar-selected {
+  color: var(--figma-color-icon-toolbar-selected);
+}
+
+@utility border-figma-icon-toolbar-selected {
+  border-color: var(--figma-color-icon-toolbar-selected);
+}
+
+@utility outline-figma-icon-toolbar-selected {
+  outline-color: var(--figma-color-icon-toolbar-selected);
+}
+
+@utility fill-figma-icon-toolbar-selected {
+  fill: var(--figma-color-icon-toolbar-selected);
+}
+
+@utility stroke-figma-icon-toolbar-selected {
+  stroke: var(--figma-color-icon-toolbar-selected);
+}
+
+@utility icon-figma-toolbar-selected {
+  --color-icon: var(--figma-color-icon-toolbar-selected);
+}
+
+@utility bg-figma-icon-toolbar-selected-secondary {
+  background-color: var(--figma-color-icon-toolbar-selected-secondary);
+}
+
+@utility text-figma-icon-toolbar-selected-secondary {
+  color: var(--figma-color-icon-toolbar-selected-secondary);
+}
+
+@utility border-figma-icon-toolbar-selected-secondary {
+  border-color: var(--figma-color-icon-toolbar-selected-secondary);
+}
+
+@utility outline-figma-icon-toolbar-selected-secondary {
+  outline-color: var(--figma-color-icon-toolbar-selected-secondary);
+}
+
+@utility fill-figma-icon-toolbar-selected-secondary {
+  fill: var(--figma-color-icon-toolbar-selected-secondary);
+}
+
+@utility stroke-figma-icon-toolbar-selected-secondary {
+  stroke: var(--figma-color-icon-toolbar-selected-secondary);
+}
+
+@utility icon-figma-toolbar-selected-secondary {
+  --color-icon: var(--figma-color-icon-toolbar-selected-secondary);
+}
+
+@utility bg-figma-icon-toolbar-selected-tertiary {
+  background-color: var(--figma-color-icon-toolbar-selected-tertiary);
+}
+
+@utility text-figma-icon-toolbar-selected-tertiary {
+  color: var(--figma-color-icon-toolbar-selected-tertiary);
+}
+
+@utility border-figma-icon-toolbar-selected-tertiary {
+  border-color: var(--figma-color-icon-toolbar-selected-tertiary);
+}
+
+@utility outline-figma-icon-toolbar-selected-tertiary {
+  outline-color: var(--figma-color-icon-toolbar-selected-tertiary);
+}
+
+@utility fill-figma-icon-toolbar-selected-tertiary {
+  fill: var(--figma-color-icon-toolbar-selected-tertiary);
+}
+
+@utility stroke-figma-icon-toolbar-selected-tertiary {
+  stroke: var(--figma-color-icon-toolbar-selected-tertiary);
+}
+
+@utility icon-figma-toolbar-selected-tertiary {
+  --color-icon: var(--figma-color-icon-toolbar-selected-tertiary);
+}
+
+@utility bg-figma-icon-toolbar-tertiary {
+  background-color: var(--figma-color-icon-toolbar-tertiary);
+}
+
+@utility text-figma-icon-toolbar-tertiary {
+  color: var(--figma-color-icon-toolbar-tertiary);
+}
+
+@utility border-figma-icon-toolbar-tertiary {
+  border-color: var(--figma-color-icon-toolbar-tertiary);
+}
+
+@utility outline-figma-icon-toolbar-tertiary {
+  outline-color: var(--figma-color-icon-toolbar-tertiary);
+}
+
+@utility fill-figma-icon-toolbar-tertiary {
+  fill: var(--figma-color-icon-toolbar-tertiary);
+}
+
+@utility stroke-figma-icon-toolbar-tertiary {
+  stroke: var(--figma-color-icon-toolbar-tertiary);
+}
+
+@utility icon-figma-toolbar-tertiary {
+  --color-icon: var(--figma-color-icon-toolbar-tertiary);
+}
+
+@utility bg-figma-icon-toolbar-tertiary-hover {
+  background-color: var(--figma-color-icon-toolbar-tertiary-hover);
+}
+
+@utility text-figma-icon-toolbar-tertiary-hover {
+  color: var(--figma-color-icon-toolbar-tertiary-hover);
+}
+
+@utility border-figma-icon-toolbar-tertiary-hover {
+  border-color: var(--figma-color-icon-toolbar-tertiary-hover);
+}
+
+@utility outline-figma-icon-toolbar-tertiary-hover {
+  outline-color: var(--figma-color-icon-toolbar-tertiary-hover);
+}
+
+@utility fill-figma-icon-toolbar-tertiary-hover {
+  fill: var(--figma-color-icon-toolbar-tertiary-hover);
+}
+
+@utility stroke-figma-icon-toolbar-tertiary-hover {
+  stroke: var(--figma-color-icon-toolbar-tertiary-hover);
+}
+
+@utility icon-figma-toolbar-tertiary-hover {
+  --color-icon: var(--figma-color-icon-toolbar-tertiary-hover);
+}
+
+@utility bg-figma-icon-toolbar-warning {
+  background-color: var(--figma-color-icon-toolbar-warning);
+}
+
+@utility text-figma-icon-toolbar-warning {
+  color: var(--figma-color-icon-toolbar-warning);
+}
+
+@utility border-figma-icon-toolbar-warning {
+  border-color: var(--figma-color-icon-toolbar-warning);
+}
+
+@utility outline-figma-icon-toolbar-warning {
+  outline-color: var(--figma-color-icon-toolbar-warning);
+}
+
+@utility fill-figma-icon-toolbar-warning {
+  fill: var(--figma-color-icon-toolbar-warning);
+}
+
+@utility stroke-figma-icon-toolbar-warning {
+  stroke: var(--figma-color-icon-toolbar-warning);
+}
+
+@utility icon-figma-toolbar-warning {
+  --color-icon: var(--figma-color-icon-toolbar-warning);
+}
+
+@utility bg-figma-icon-tooltip {
+  background-color: var(--figma-color-icon-tooltip);
+}
+
+@utility text-figma-icon-tooltip {
+  color: var(--figma-color-icon-tooltip);
+}
+
+@utility border-figma-icon-tooltip {
+  border-color: var(--figma-color-icon-tooltip);
+}
+
+@utility outline-figma-icon-tooltip {
+  outline-color: var(--figma-color-icon-tooltip);
+}
+
+@utility fill-figma-icon-tooltip {
+  fill: var(--figma-color-icon-tooltip);
+}
+
+@utility stroke-figma-icon-tooltip {
+  stroke: var(--figma-color-icon-tooltip);
+}
+
+@utility icon-figma-tooltip {
+  --color-icon: var(--figma-color-icon-tooltip);
+}
+
+@utility bg-figma-icon-tooltip-danger {
+  background-color: var(--figma-color-icon-tooltip-danger);
+}
+
+@utility text-figma-icon-tooltip-danger {
+  color: var(--figma-color-icon-tooltip-danger);
+}
+
+@utility border-figma-icon-tooltip-danger {
+  border-color: var(--figma-color-icon-tooltip-danger);
+}
+
+@utility outline-figma-icon-tooltip-danger {
+  outline-color: var(--figma-color-icon-tooltip-danger);
+}
+
+@utility fill-figma-icon-tooltip-danger {
+  fill: var(--figma-color-icon-tooltip-danger);
+}
+
+@utility stroke-figma-icon-tooltip-danger {
+  stroke: var(--figma-color-icon-tooltip-danger);
+}
+
+@utility icon-figma-tooltip-danger {
+  --color-icon: var(--figma-color-icon-tooltip-danger);
+}
+
+@utility bg-figma-icon-tooltip-disabled {
+  background-color: var(--figma-color-icon-tooltip-disabled);
+}
+
+@utility text-figma-icon-tooltip-disabled {
+  color: var(--figma-color-icon-tooltip-disabled);
+}
+
+@utility border-figma-icon-tooltip-disabled {
+  border-color: var(--figma-color-icon-tooltip-disabled);
+}
+
+@utility outline-figma-icon-tooltip-disabled {
+  outline-color: var(--figma-color-icon-tooltip-disabled);
+}
+
+@utility fill-figma-icon-tooltip-disabled {
+  fill: var(--figma-color-icon-tooltip-disabled);
+}
+
+@utility stroke-figma-icon-tooltip-disabled {
+  stroke: var(--figma-color-icon-tooltip-disabled);
+}
+
+@utility icon-figma-tooltip-disabled {
+  --color-icon: var(--figma-color-icon-tooltip-disabled);
+}
+
+@utility bg-figma-icon-tooltip-hover {
+  background-color: var(--figma-color-icon-tooltip-hover);
+}
+
+@utility text-figma-icon-tooltip-hover {
+  color: var(--figma-color-icon-tooltip-hover);
+}
+
+@utility border-figma-icon-tooltip-hover {
+  border-color: var(--figma-color-icon-tooltip-hover);
+}
+
+@utility outline-figma-icon-tooltip-hover {
+  outline-color: var(--figma-color-icon-tooltip-hover);
+}
+
+@utility fill-figma-icon-tooltip-hover {
+  fill: var(--figma-color-icon-tooltip-hover);
+}
+
+@utility stroke-figma-icon-tooltip-hover {
+  stroke: var(--figma-color-icon-tooltip-hover);
+}
+
+@utility icon-figma-tooltip-hover {
+  --color-icon: var(--figma-color-icon-tooltip-hover);
+}
+
+@utility bg-figma-icon-tooltip-ondisabled {
+  background-color: var(--figma-color-icon-tooltip-ondisabled);
+}
+
+@utility text-figma-icon-tooltip-ondisabled {
+  color: var(--figma-color-icon-tooltip-ondisabled);
+}
+
+@utility border-figma-icon-tooltip-ondisabled {
+  border-color: var(--figma-color-icon-tooltip-ondisabled);
+}
+
+@utility outline-figma-icon-tooltip-ondisabled {
+  outline-color: var(--figma-color-icon-tooltip-ondisabled);
+}
+
+@utility fill-figma-icon-tooltip-ondisabled {
+  fill: var(--figma-color-icon-tooltip-ondisabled);
+}
+
+@utility stroke-figma-icon-tooltip-ondisabled {
+  stroke: var(--figma-color-icon-tooltip-ondisabled);
+}
+
+@utility icon-figma-tooltip-ondisabled {
+  --color-icon: var(--figma-color-icon-tooltip-ondisabled);
+}
+
+@utility bg-figma-icon-tooltip-onselected {
+  background-color: var(--figma-color-icon-tooltip-onselected);
+}
+
+@utility text-figma-icon-tooltip-onselected {
+  color: var(--figma-color-icon-tooltip-onselected);
+}
+
+@utility border-figma-icon-tooltip-onselected {
+  border-color: var(--figma-color-icon-tooltip-onselected);
+}
+
+@utility outline-figma-icon-tooltip-onselected {
+  outline-color: var(--figma-color-icon-tooltip-onselected);
+}
+
+@utility fill-figma-icon-tooltip-onselected {
+  fill: var(--figma-color-icon-tooltip-onselected);
+}
+
+@utility stroke-figma-icon-tooltip-onselected {
+  stroke: var(--figma-color-icon-tooltip-onselected);
+}
+
+@utility icon-figma-tooltip-onselected {
+  --color-icon: var(--figma-color-icon-tooltip-onselected);
+}
+
+@utility bg-figma-icon-tooltip-pressed {
+  background-color: var(--figma-color-icon-tooltip-pressed);
+}
+
+@utility text-figma-icon-tooltip-pressed {
+  color: var(--figma-color-icon-tooltip-pressed);
+}
+
+@utility border-figma-icon-tooltip-pressed {
+  border-color: var(--figma-color-icon-tooltip-pressed);
+}
+
+@utility outline-figma-icon-tooltip-pressed {
+  outline-color: var(--figma-color-icon-tooltip-pressed);
+}
+
+@utility fill-figma-icon-tooltip-pressed {
+  fill: var(--figma-color-icon-tooltip-pressed);
+}
+
+@utility stroke-figma-icon-tooltip-pressed {
+  stroke: var(--figma-color-icon-tooltip-pressed);
+}
+
+@utility icon-figma-tooltip-pressed {
+  --color-icon: var(--figma-color-icon-tooltip-pressed);
+}
+
+@utility bg-figma-icon-tooltip-secondary {
+  background-color: var(--figma-color-icon-tooltip-secondary);
+}
+
+@utility text-figma-icon-tooltip-secondary {
+  color: var(--figma-color-icon-tooltip-secondary);
+}
+
+@utility border-figma-icon-tooltip-secondary {
+  border-color: var(--figma-color-icon-tooltip-secondary);
+}
+
+@utility outline-figma-icon-tooltip-secondary {
+  outline-color: var(--figma-color-icon-tooltip-secondary);
+}
+
+@utility fill-figma-icon-tooltip-secondary {
+  fill: var(--figma-color-icon-tooltip-secondary);
+}
+
+@utility stroke-figma-icon-tooltip-secondary {
+  stroke: var(--figma-color-icon-tooltip-secondary);
+}
+
+@utility icon-figma-tooltip-secondary {
+  --color-icon: var(--figma-color-icon-tooltip-secondary);
+}
+
+@utility bg-figma-icon-tooltip-secondary-hover {
+  background-color: var(--figma-color-icon-tooltip-secondary-hover);
+}
+
+@utility text-figma-icon-tooltip-secondary-hover {
+  color: var(--figma-color-icon-tooltip-secondary-hover);
+}
+
+@utility border-figma-icon-tooltip-secondary-hover {
+  border-color: var(--figma-color-icon-tooltip-secondary-hover);
+}
+
+@utility outline-figma-icon-tooltip-secondary-hover {
+  outline-color: var(--figma-color-icon-tooltip-secondary-hover);
+}
+
+@utility fill-figma-icon-tooltip-secondary-hover {
+  fill: var(--figma-color-icon-tooltip-secondary-hover);
+}
+
+@utility stroke-figma-icon-tooltip-secondary-hover {
+  stroke: var(--figma-color-icon-tooltip-secondary-hover);
+}
+
+@utility icon-figma-tooltip-secondary-hover {
+  --color-icon: var(--figma-color-icon-tooltip-secondary-hover);
+}
+
+@utility bg-figma-icon-tooltip-selected {
+  background-color: var(--figma-color-icon-tooltip-selected);
+}
+
+@utility text-figma-icon-tooltip-selected {
+  color: var(--figma-color-icon-tooltip-selected);
+}
+
+@utility border-figma-icon-tooltip-selected {
+  border-color: var(--figma-color-icon-tooltip-selected);
+}
+
+@utility outline-figma-icon-tooltip-selected {
+  outline-color: var(--figma-color-icon-tooltip-selected);
+}
+
+@utility fill-figma-icon-tooltip-selected {
+  fill: var(--figma-color-icon-tooltip-selected);
+}
+
+@utility stroke-figma-icon-tooltip-selected {
+  stroke: var(--figma-color-icon-tooltip-selected);
+}
+
+@utility icon-figma-tooltip-selected {
+  --color-icon: var(--figma-color-icon-tooltip-selected);
+}
+
+@utility bg-figma-icon-tooltip-selected-secondary {
+  background-color: var(--figma-color-icon-tooltip-selected-secondary);
+}
+
+@utility text-figma-icon-tooltip-selected-secondary {
+  color: var(--figma-color-icon-tooltip-selected-secondary);
+}
+
+@utility border-figma-icon-tooltip-selected-secondary {
+  border-color: var(--figma-color-icon-tooltip-selected-secondary);
+}
+
+@utility outline-figma-icon-tooltip-selected-secondary {
+  outline-color: var(--figma-color-icon-tooltip-selected-secondary);
+}
+
+@utility fill-figma-icon-tooltip-selected-secondary {
+  fill: var(--figma-color-icon-tooltip-selected-secondary);
+}
+
+@utility stroke-figma-icon-tooltip-selected-secondary {
+  stroke: var(--figma-color-icon-tooltip-selected-secondary);
+}
+
+@utility icon-figma-tooltip-selected-secondary {
+  --color-icon: var(--figma-color-icon-tooltip-selected-secondary);
+}
+
+@utility bg-figma-icon-tooltip-selected-tertiary {
+  background-color: var(--figma-color-icon-tooltip-selected-tertiary);
+}
+
+@utility text-figma-icon-tooltip-selected-tertiary {
+  color: var(--figma-color-icon-tooltip-selected-tertiary);
+}
+
+@utility border-figma-icon-tooltip-selected-tertiary {
+  border-color: var(--figma-color-icon-tooltip-selected-tertiary);
+}
+
+@utility outline-figma-icon-tooltip-selected-tertiary {
+  outline-color: var(--figma-color-icon-tooltip-selected-tertiary);
+}
+
+@utility fill-figma-icon-tooltip-selected-tertiary {
+  fill: var(--figma-color-icon-tooltip-selected-tertiary);
+}
+
+@utility stroke-figma-icon-tooltip-selected-tertiary {
+  stroke: var(--figma-color-icon-tooltip-selected-tertiary);
+}
+
+@utility icon-figma-tooltip-selected-tertiary {
+  --color-icon: var(--figma-color-icon-tooltip-selected-tertiary);
+}
+
+@utility bg-figma-icon-tooltip-tertiary {
+  background-color: var(--figma-color-icon-tooltip-tertiary);
+}
+
+@utility text-figma-icon-tooltip-tertiary {
+  color: var(--figma-color-icon-tooltip-tertiary);
+}
+
+@utility border-figma-icon-tooltip-tertiary {
+  border-color: var(--figma-color-icon-tooltip-tertiary);
+}
+
+@utility outline-figma-icon-tooltip-tertiary {
+  outline-color: var(--figma-color-icon-tooltip-tertiary);
+}
+
+@utility fill-figma-icon-tooltip-tertiary {
+  fill: var(--figma-color-icon-tooltip-tertiary);
+}
+
+@utility stroke-figma-icon-tooltip-tertiary {
+  stroke: var(--figma-color-icon-tooltip-tertiary);
+}
+
+@utility icon-figma-tooltip-tertiary {
+  --color-icon: var(--figma-color-icon-tooltip-tertiary);
+}
+
+@utility bg-figma-icon-tooltip-tertiary-hover {
+  background-color: var(--figma-color-icon-tooltip-tertiary-hover);
+}
+
+@utility text-figma-icon-tooltip-tertiary-hover {
+  color: var(--figma-color-icon-tooltip-tertiary-hover);
+}
+
+@utility border-figma-icon-tooltip-tertiary-hover {
+  border-color: var(--figma-color-icon-tooltip-tertiary-hover);
+}
+
+@utility outline-figma-icon-tooltip-tertiary-hover {
+  outline-color: var(--figma-color-icon-tooltip-tertiary-hover);
+}
+
+@utility fill-figma-icon-tooltip-tertiary-hover {
+  fill: var(--figma-color-icon-tooltip-tertiary-hover);
+}
+
+@utility stroke-figma-icon-tooltip-tertiary-hover {
+  stroke: var(--figma-color-icon-tooltip-tertiary-hover);
+}
+
+@utility icon-figma-tooltip-tertiary-hover {
+  --color-icon: var(--figma-color-icon-tooltip-tertiary-hover);
+}
+
+@utility bg-figma-icon-tooltip-warning {
+  background-color: var(--figma-color-icon-tooltip-warning);
+}
+
+@utility text-figma-icon-tooltip-warning {
+  color: var(--figma-color-icon-tooltip-warning);
+}
+
+@utility border-figma-icon-tooltip-warning {
+  border-color: var(--figma-color-icon-tooltip-warning);
+}
+
+@utility outline-figma-icon-tooltip-warning {
+  outline-color: var(--figma-color-icon-tooltip-warning);
+}
+
+@utility fill-figma-icon-tooltip-warning {
+  fill: var(--figma-color-icon-tooltip-warning);
+}
+
+@utility stroke-figma-icon-tooltip-warning {
+  stroke: var(--figma-color-icon-tooltip-warning);
+}
+
+@utility icon-figma-tooltip-warning {
+  --color-icon: var(--figma-color-icon-tooltip-warning);
+}
+
+@utility bg-figma-icon-warning {
+  background-color: var(--figma-color-icon-warning);
+}
+
+@utility text-figma-icon-warning {
+  color: var(--figma-color-icon-warning);
+}
+
+@utility border-figma-icon-warning {
+  border-color: var(--figma-color-icon-warning);
+}
+
+@utility outline-figma-icon-warning {
+  outline-color: var(--figma-color-icon-warning);
+}
+
+@utility fill-figma-icon-warning {
+  fill: var(--figma-color-icon-warning);
+}
+
+@utility stroke-figma-icon-warning {
+  stroke: var(--figma-color-icon-warning);
+}
+
+@utility icon-figma-warning {
+  --color-icon: var(--figma-color-icon-warning);
+}
+
+@utility bg-figma-icon-warning-pressed {
+  background-color: var(--figma-color-icon-warning-pressed);
+}
+
+@utility text-figma-icon-warning-pressed {
+  color: var(--figma-color-icon-warning-pressed);
+}
+
+@utility border-figma-icon-warning-pressed {
+  border-color: var(--figma-color-icon-warning-pressed);
+}
+
+@utility outline-figma-icon-warning-pressed {
+  outline-color: var(--figma-color-icon-warning-pressed);
+}
+
+@utility fill-figma-icon-warning-pressed {
+  fill: var(--figma-color-icon-warning-pressed);
+}
+
+@utility stroke-figma-icon-warning-pressed {
+  stroke: var(--figma-color-icon-warning-pressed);
+}
+
+@utility icon-figma-warning-pressed {
+  --color-icon: var(--figma-color-icon-warning-pressed);
+}
+
+@utility bg-figma-icon-warning-secondary {
+  background-color: var(--figma-color-icon-warning-secondary);
+}
+
+@utility text-figma-icon-warning-secondary {
+  color: var(--figma-color-icon-warning-secondary);
+}
+
+@utility border-figma-icon-warning-secondary {
+  border-color: var(--figma-color-icon-warning-secondary);
+}
+
+@utility outline-figma-icon-warning-secondary {
+  outline-color: var(--figma-color-icon-warning-secondary);
+}
+
+@utility fill-figma-icon-warning-secondary {
+  fill: var(--figma-color-icon-warning-secondary);
+}
+
+@utility stroke-figma-icon-warning-secondary {
+  stroke: var(--figma-color-icon-warning-secondary);
+}
+
+@utility icon-figma-warning-secondary {
+  --color-icon: var(--figma-color-icon-warning-secondary);
+}
+
+@utility bg-figma-icon-warning-tertiary {
+  background-color: var(--figma-color-icon-warning-tertiary);
+}
+
+@utility text-figma-icon-warning-tertiary {
+  color: var(--figma-color-icon-warning-tertiary);
+}
+
+@utility border-figma-icon-warning-tertiary {
+  border-color: var(--figma-color-icon-warning-tertiary);
+}
+
+@utility outline-figma-icon-warning-tertiary {
+  outline-color: var(--figma-color-icon-warning-tertiary);
+}
+
+@utility fill-figma-icon-warning-tertiary {
+  fill: var(--figma-color-icon-warning-tertiary);
+}
+
+@utility stroke-figma-icon-warning-tertiary {
+  stroke: var(--figma-color-icon-warning-tertiary);
+}
+
+@utility icon-figma-warning-tertiary {
+  --color-icon: var(--figma-color-icon-warning-tertiary);
+}
+
+@utility text-figma {
+  color: var(--figma-color-text);
+}
+
+@utility bg-figma-text {
+  background-color: var(--figma-color-text);
+}
+
+@utility text-figma-text {
+  color: var(--figma-color-text);
+}
+
+@utility border-figma-text {
+  border-color: var(--figma-color-text);
+}
+
+@utility outline-figma-text {
+  outline-color: var(--figma-color-text);
+}
+
+@utility fill-figma-text {
+  fill: var(--figma-color-text);
+}
+
+@utility stroke-figma-text {
+  stroke: var(--figma-color-text);
+}
+
+@utility icon-figma-text {
+  --color-icon: var(--figma-color-text);
+}
+
+@utility text-figma-assistive {
+  color: var(--figma-color-text-assistive);
+}
+
+@utility bg-figma-text-assistive {
+  background-color: var(--figma-color-text-assistive);
+}
+
+@utility text-figma-text-assistive {
+  color: var(--figma-color-text-assistive);
+}
+
+@utility border-figma-text-assistive {
+  border-color: var(--figma-color-text-assistive);
+}
+
+@utility outline-figma-text-assistive {
+  outline-color: var(--figma-color-text-assistive);
+}
+
+@utility fill-figma-text-assistive {
+  fill: var(--figma-color-text-assistive);
+}
+
+@utility stroke-figma-text-assistive {
+  stroke: var(--figma-color-text-assistive);
+}
+
+@utility icon-figma-text-assistive {
+  --color-icon: var(--figma-color-text-assistive);
+}
+
+@utility text-figma-assistive-pressed {
+  color: var(--figma-color-text-assistive-pressed);
+}
+
+@utility bg-figma-text-assistive-pressed {
+  background-color: var(--figma-color-text-assistive-pressed);
+}
+
+@utility text-figma-text-assistive-pressed {
+  color: var(--figma-color-text-assistive-pressed);
+}
+
+@utility border-figma-text-assistive-pressed {
+  border-color: var(--figma-color-text-assistive-pressed);
+}
+
+@utility outline-figma-text-assistive-pressed {
+  outline-color: var(--figma-color-text-assistive-pressed);
+}
+
+@utility fill-figma-text-assistive-pressed {
+  fill: var(--figma-color-text-assistive-pressed);
+}
+
+@utility stroke-figma-text-assistive-pressed {
+  stroke: var(--figma-color-text-assistive-pressed);
+}
+
+@utility icon-figma-text-assistive-pressed {
+  --color-icon: var(--figma-color-text-assistive-pressed);
+}
+
+@utility text-figma-assistive-secondary {
+  color: var(--figma-color-text-assistive-secondary);
+}
+
+@utility bg-figma-text-assistive-secondary {
+  background-color: var(--figma-color-text-assistive-secondary);
+}
+
+@utility text-figma-text-assistive-secondary {
+  color: var(--figma-color-text-assistive-secondary);
+}
+
+@utility border-figma-text-assistive-secondary {
+  border-color: var(--figma-color-text-assistive-secondary);
+}
+
+@utility outline-figma-text-assistive-secondary {
+  outline-color: var(--figma-color-text-assistive-secondary);
+}
+
+@utility fill-figma-text-assistive-secondary {
+  fill: var(--figma-color-text-assistive-secondary);
+}
+
+@utility stroke-figma-text-assistive-secondary {
+  stroke: var(--figma-color-text-assistive-secondary);
+}
+
+@utility icon-figma-text-assistive-secondary {
+  --color-icon: var(--figma-color-text-assistive-secondary);
+}
+
+@utility text-figma-assistive-tertiary {
+  color: var(--figma-color-text-assistive-tertiary);
+}
+
+@utility bg-figma-text-assistive-tertiary {
+  background-color: var(--figma-color-text-assistive-tertiary);
+}
+
+@utility text-figma-text-assistive-tertiary {
+  color: var(--figma-color-text-assistive-tertiary);
+}
+
+@utility border-figma-text-assistive-tertiary {
+  border-color: var(--figma-color-text-assistive-tertiary);
+}
+
+@utility outline-figma-text-assistive-tertiary {
+  outline-color: var(--figma-color-text-assistive-tertiary);
+}
+
+@utility fill-figma-text-assistive-tertiary {
+  fill: var(--figma-color-text-assistive-tertiary);
+}
+
+@utility stroke-figma-text-assistive-tertiary {
+  stroke: var(--figma-color-text-assistive-tertiary);
+}
+
+@utility icon-figma-text-assistive-tertiary {
+  --color-icon: var(--figma-color-text-assistive-tertiary);
+}
+
+@utility text-figma-brand {
+  color: var(--figma-color-text-brand);
+}
+
+@utility bg-figma-text-brand {
+  background-color: var(--figma-color-text-brand);
+}
+
+@utility text-figma-text-brand {
+  color: var(--figma-color-text-brand);
+}
+
+@utility border-figma-text-brand {
+  border-color: var(--figma-color-text-brand);
+}
+
+@utility outline-figma-text-brand {
+  outline-color: var(--figma-color-text-brand);
+}
+
+@utility fill-figma-text-brand {
+  fill: var(--figma-color-text-brand);
+}
+
+@utility stroke-figma-text-brand {
+  stroke: var(--figma-color-text-brand);
+}
+
+@utility icon-figma-text-brand {
+  --color-icon: var(--figma-color-text-brand);
+}
+
+@utility text-figma-brand-secondary {
+  color: var(--figma-color-text-brand-secondary);
+}
+
+@utility bg-figma-text-brand-secondary {
+  background-color: var(--figma-color-text-brand-secondary);
+}
+
+@utility text-figma-text-brand-secondary {
+  color: var(--figma-color-text-brand-secondary);
+}
+
+@utility border-figma-text-brand-secondary {
+  border-color: var(--figma-color-text-brand-secondary);
+}
+
+@utility outline-figma-text-brand-secondary {
+  outline-color: var(--figma-color-text-brand-secondary);
+}
+
+@utility fill-figma-text-brand-secondary {
+  fill: var(--figma-color-text-brand-secondary);
+}
+
+@utility stroke-figma-text-brand-secondary {
+  stroke: var(--figma-color-text-brand-secondary);
+}
+
+@utility icon-figma-text-brand-secondary {
+  --color-icon: var(--figma-color-text-brand-secondary);
+}
+
+@utility text-figma-brand-tertiary {
+  color: var(--figma-color-text-brand-tertiary);
+}
+
+@utility bg-figma-text-brand-tertiary {
+  background-color: var(--figma-color-text-brand-tertiary);
+}
+
+@utility text-figma-text-brand-tertiary {
+  color: var(--figma-color-text-brand-tertiary);
+}
+
+@utility border-figma-text-brand-tertiary {
+  border-color: var(--figma-color-text-brand-tertiary);
+}
+
+@utility outline-figma-text-brand-tertiary {
+  outline-color: var(--figma-color-text-brand-tertiary);
+}
+
+@utility fill-figma-text-brand-tertiary {
+  fill: var(--figma-color-text-brand-tertiary);
+}
+
+@utility stroke-figma-text-brand-tertiary {
+  stroke: var(--figma-color-text-brand-tertiary);
+}
+
+@utility icon-figma-text-brand-tertiary {
+  --color-icon: var(--figma-color-text-brand-tertiary);
+}
+
+@utility text-figma-component {
+  color: var(--figma-color-text-component);
+}
+
+@utility bg-figma-text-component {
+  background-color: var(--figma-color-text-component);
+}
+
+@utility text-figma-text-component {
+  color: var(--figma-color-text-component);
+}
+
+@utility border-figma-text-component {
+  border-color: var(--figma-color-text-component);
+}
+
+@utility outline-figma-text-component {
+  outline-color: var(--figma-color-text-component);
+}
+
+@utility fill-figma-text-component {
+  fill: var(--figma-color-text-component);
+}
+
+@utility stroke-figma-text-component {
+  stroke: var(--figma-color-text-component);
+}
+
+@utility icon-figma-text-component {
+  --color-icon: var(--figma-color-text-component);
+}
+
+@utility text-figma-component-pressed {
+  color: var(--figma-color-text-component-pressed);
+}
+
+@utility bg-figma-text-component-pressed {
+  background-color: var(--figma-color-text-component-pressed);
+}
+
+@utility text-figma-text-component-pressed {
+  color: var(--figma-color-text-component-pressed);
+}
+
+@utility border-figma-text-component-pressed {
+  border-color: var(--figma-color-text-component-pressed);
+}
+
+@utility outline-figma-text-component-pressed {
+  outline-color: var(--figma-color-text-component-pressed);
+}
+
+@utility fill-figma-text-component-pressed {
+  fill: var(--figma-color-text-component-pressed);
+}
+
+@utility stroke-figma-text-component-pressed {
+  stroke: var(--figma-color-text-component-pressed);
+}
+
+@utility icon-figma-text-component-pressed {
+  --color-icon: var(--figma-color-text-component-pressed);
+}
+
+@utility text-figma-component-secondary {
+  color: var(--figma-color-text-component-secondary);
+}
+
+@utility bg-figma-text-component-secondary {
+  background-color: var(--figma-color-text-component-secondary);
+}
+
+@utility text-figma-text-component-secondary {
+  color: var(--figma-color-text-component-secondary);
+}
+
+@utility border-figma-text-component-secondary {
+  border-color: var(--figma-color-text-component-secondary);
+}
+
+@utility outline-figma-text-component-secondary {
+  outline-color: var(--figma-color-text-component-secondary);
+}
+
+@utility fill-figma-text-component-secondary {
+  fill: var(--figma-color-text-component-secondary);
+}
+
+@utility stroke-figma-text-component-secondary {
+  stroke: var(--figma-color-text-component-secondary);
+}
+
+@utility icon-figma-text-component-secondary {
+  --color-icon: var(--figma-color-text-component-secondary);
+}
+
+@utility text-figma-component-tertiary {
+  color: var(--figma-color-text-component-tertiary);
+}
+
+@utility bg-figma-text-component-tertiary {
+  background-color: var(--figma-color-text-component-tertiary);
+}
+
+@utility text-figma-text-component-tertiary {
+  color: var(--figma-color-text-component-tertiary);
+}
+
+@utility border-figma-text-component-tertiary {
+  border-color: var(--figma-color-text-component-tertiary);
+}
+
+@utility outline-figma-text-component-tertiary {
+  outline-color: var(--figma-color-text-component-tertiary);
+}
+
+@utility fill-figma-text-component-tertiary {
+  fill: var(--figma-color-text-component-tertiary);
+}
+
+@utility stroke-figma-text-component-tertiary {
+  stroke: var(--figma-color-text-component-tertiary);
+}
+
+@utility icon-figma-text-component-tertiary {
+  --color-icon: var(--figma-color-text-component-tertiary);
+}
+
+@utility text-figma-danger {
+  color: var(--figma-color-text-danger);
+}
+
+@utility bg-figma-text-danger {
+  background-color: var(--figma-color-text-danger);
+}
+
+@utility text-figma-text-danger {
+  color: var(--figma-color-text-danger);
+}
+
+@utility border-figma-text-danger {
+  border-color: var(--figma-color-text-danger);
+}
+
+@utility outline-figma-text-danger {
+  outline-color: var(--figma-color-text-danger);
+}
+
+@utility fill-figma-text-danger {
+  fill: var(--figma-color-text-danger);
+}
+
+@utility stroke-figma-text-danger {
+  stroke: var(--figma-color-text-danger);
+}
+
+@utility icon-figma-text-danger {
+  --color-icon: var(--figma-color-text-danger);
+}
+
+@utility text-figma-danger-secondary {
+  color: var(--figma-color-text-danger-secondary);
+}
+
+@utility bg-figma-text-danger-secondary {
+  background-color: var(--figma-color-text-danger-secondary);
+}
+
+@utility text-figma-text-danger-secondary {
+  color: var(--figma-color-text-danger-secondary);
+}
+
+@utility border-figma-text-danger-secondary {
+  border-color: var(--figma-color-text-danger-secondary);
+}
+
+@utility outline-figma-text-danger-secondary {
+  outline-color: var(--figma-color-text-danger-secondary);
+}
+
+@utility fill-figma-text-danger-secondary {
+  fill: var(--figma-color-text-danger-secondary);
+}
+
+@utility stroke-figma-text-danger-secondary {
+  stroke: var(--figma-color-text-danger-secondary);
+}
+
+@utility icon-figma-text-danger-secondary {
+  --color-icon: var(--figma-color-text-danger-secondary);
+}
+
+@utility text-figma-danger-tertiary {
+  color: var(--figma-color-text-danger-tertiary);
+}
+
+@utility bg-figma-text-danger-tertiary {
+  background-color: var(--figma-color-text-danger-tertiary);
+}
+
+@utility text-figma-text-danger-tertiary {
+  color: var(--figma-color-text-danger-tertiary);
+}
+
+@utility border-figma-text-danger-tertiary {
+  border-color: var(--figma-color-text-danger-tertiary);
+}
+
+@utility outline-figma-text-danger-tertiary {
+  outline-color: var(--figma-color-text-danger-tertiary);
+}
+
+@utility fill-figma-text-danger-tertiary {
+  fill: var(--figma-color-text-danger-tertiary);
+}
+
+@utility stroke-figma-text-danger-tertiary {
+  stroke: var(--figma-color-text-danger-tertiary);
+}
+
+@utility icon-figma-text-danger-tertiary {
+  --color-icon: var(--figma-color-text-danger-tertiary);
+}
+
+@utility text-figma-design {
+  color: var(--figma-color-text-design);
+}
+
+@utility bg-figma-text-design {
+  background-color: var(--figma-color-text-design);
+}
+
+@utility text-figma-text-design {
+  color: var(--figma-color-text-design);
+}
+
+@utility border-figma-text-design {
+  border-color: var(--figma-color-text-design);
+}
+
+@utility outline-figma-text-design {
+  outline-color: var(--figma-color-text-design);
+}
+
+@utility fill-figma-text-design {
+  fill: var(--figma-color-text-design);
+}
+
+@utility stroke-figma-text-design {
+  stroke: var(--figma-color-text-design);
+}
+
+@utility icon-figma-text-design {
+  --color-icon: var(--figma-color-text-design);
+}
+
+@utility text-figma-design-pressed {
+  color: var(--figma-color-text-design-pressed);
+}
+
+@utility bg-figma-text-design-pressed {
+  background-color: var(--figma-color-text-design-pressed);
+}
+
+@utility text-figma-text-design-pressed {
+  color: var(--figma-color-text-design-pressed);
+}
+
+@utility border-figma-text-design-pressed {
+  border-color: var(--figma-color-text-design-pressed);
+}
+
+@utility outline-figma-text-design-pressed {
+  outline-color: var(--figma-color-text-design-pressed);
+}
+
+@utility fill-figma-text-design-pressed {
+  fill: var(--figma-color-text-design-pressed);
+}
+
+@utility stroke-figma-text-design-pressed {
+  stroke: var(--figma-color-text-design-pressed);
+}
+
+@utility icon-figma-text-design-pressed {
+  --color-icon: var(--figma-color-text-design-pressed);
+}
+
+@utility text-figma-design-secondary {
+  color: var(--figma-color-text-design-secondary);
+}
+
+@utility bg-figma-text-design-secondary {
+  background-color: var(--figma-color-text-design-secondary);
+}
+
+@utility text-figma-text-design-secondary {
+  color: var(--figma-color-text-design-secondary);
+}
+
+@utility border-figma-text-design-secondary {
+  border-color: var(--figma-color-text-design-secondary);
+}
+
+@utility outline-figma-text-design-secondary {
+  outline-color: var(--figma-color-text-design-secondary);
+}
+
+@utility fill-figma-text-design-secondary {
+  fill: var(--figma-color-text-design-secondary);
+}
+
+@utility stroke-figma-text-design-secondary {
+  stroke: var(--figma-color-text-design-secondary);
+}
+
+@utility icon-figma-text-design-secondary {
+  --color-icon: var(--figma-color-text-design-secondary);
+}
+
+@utility text-figma-design-tertiary {
+  color: var(--figma-color-text-design-tertiary);
+}
+
+@utility bg-figma-text-design-tertiary {
+  background-color: var(--figma-color-text-design-tertiary);
+}
+
+@utility text-figma-text-design-tertiary {
+  color: var(--figma-color-text-design-tertiary);
+}
+
+@utility border-figma-text-design-tertiary {
+  border-color: var(--figma-color-text-design-tertiary);
+}
+
+@utility outline-figma-text-design-tertiary {
+  outline-color: var(--figma-color-text-design-tertiary);
+}
+
+@utility fill-figma-text-design-tertiary {
+  fill: var(--figma-color-text-design-tertiary);
+}
+
+@utility stroke-figma-text-design-tertiary {
+  stroke: var(--figma-color-text-design-tertiary);
+}
+
+@utility icon-figma-text-design-tertiary {
+  --color-icon: var(--figma-color-text-design-tertiary);
+}
+
+@utility text-figma-disabled {
+  color: var(--figma-color-text-disabled);
+}
+
+@utility bg-figma-text-disabled {
+  background-color: var(--figma-color-text-disabled);
+}
+
+@utility text-figma-text-disabled {
+  color: var(--figma-color-text-disabled);
+}
+
+@utility border-figma-text-disabled {
+  border-color: var(--figma-color-text-disabled);
+}
+
+@utility outline-figma-text-disabled {
+  outline-color: var(--figma-color-text-disabled);
+}
+
+@utility fill-figma-text-disabled {
+  fill: var(--figma-color-text-disabled);
+}
+
+@utility stroke-figma-text-disabled {
+  stroke: var(--figma-color-text-disabled);
+}
+
+@utility icon-figma-text-disabled {
+  --color-icon: var(--figma-color-text-disabled);
+}
+
+@utility text-figma-figjam {
+  color: var(--figma-color-text-figjam);
+}
+
+@utility bg-figma-text-figjam {
+  background-color: var(--figma-color-text-figjam);
+}
+
+@utility text-figma-text-figjam {
+  color: var(--figma-color-text-figjam);
+}
+
+@utility border-figma-text-figjam {
+  border-color: var(--figma-color-text-figjam);
+}
+
+@utility outline-figma-text-figjam {
+  outline-color: var(--figma-color-text-figjam);
+}
+
+@utility fill-figma-text-figjam {
+  fill: var(--figma-color-text-figjam);
+}
+
+@utility stroke-figma-text-figjam {
+  stroke: var(--figma-color-text-figjam);
+}
+
+@utility icon-figma-text-figjam {
+  --color-icon: var(--figma-color-text-figjam);
+}
+
+@utility text-figma-figjam-pressed {
+  color: var(--figma-color-text-figjam-pressed);
+}
+
+@utility bg-figma-text-figjam-pressed {
+  background-color: var(--figma-color-text-figjam-pressed);
+}
+
+@utility text-figma-text-figjam-pressed {
+  color: var(--figma-color-text-figjam-pressed);
+}
+
+@utility border-figma-text-figjam-pressed {
+  border-color: var(--figma-color-text-figjam-pressed);
+}
+
+@utility outline-figma-text-figjam-pressed {
+  outline-color: var(--figma-color-text-figjam-pressed);
+}
+
+@utility fill-figma-text-figjam-pressed {
+  fill: var(--figma-color-text-figjam-pressed);
+}
+
+@utility stroke-figma-text-figjam-pressed {
+  stroke: var(--figma-color-text-figjam-pressed);
+}
+
+@utility icon-figma-text-figjam-pressed {
+  --color-icon: var(--figma-color-text-figjam-pressed);
+}
+
+@utility text-figma-figjam-secondary {
+  color: var(--figma-color-text-figjam-secondary);
+}
+
+@utility bg-figma-text-figjam-secondary {
+  background-color: var(--figma-color-text-figjam-secondary);
+}
+
+@utility text-figma-text-figjam-secondary {
+  color: var(--figma-color-text-figjam-secondary);
+}
+
+@utility border-figma-text-figjam-secondary {
+  border-color: var(--figma-color-text-figjam-secondary);
+}
+
+@utility outline-figma-text-figjam-secondary {
+  outline-color: var(--figma-color-text-figjam-secondary);
+}
+
+@utility fill-figma-text-figjam-secondary {
+  fill: var(--figma-color-text-figjam-secondary);
+}
+
+@utility stroke-figma-text-figjam-secondary {
+  stroke: var(--figma-color-text-figjam-secondary);
+}
+
+@utility icon-figma-text-figjam-secondary {
+  --color-icon: var(--figma-color-text-figjam-secondary);
+}
+
+@utility text-figma-figjam-tertiary {
+  color: var(--figma-color-text-figjam-tertiary);
+}
+
+@utility bg-figma-text-figjam-tertiary {
+  background-color: var(--figma-color-text-figjam-tertiary);
+}
+
+@utility text-figma-text-figjam-tertiary {
+  color: var(--figma-color-text-figjam-tertiary);
+}
+
+@utility border-figma-text-figjam-tertiary {
+  border-color: var(--figma-color-text-figjam-tertiary);
+}
+
+@utility outline-figma-text-figjam-tertiary {
+  outline-color: var(--figma-color-text-figjam-tertiary);
+}
+
+@utility fill-figma-text-figjam-tertiary {
+  fill: var(--figma-color-text-figjam-tertiary);
+}
+
+@utility stroke-figma-text-figjam-tertiary {
+  stroke: var(--figma-color-text-figjam-tertiary);
+}
+
+@utility icon-figma-text-figjam-tertiary {
+  --color-icon: var(--figma-color-text-figjam-tertiary);
+}
+
+@utility text-figma-handoff {
+  color: var(--figma-color-text-handoff);
+}
+
+@utility bg-figma-text-handoff {
+  background-color: var(--figma-color-text-handoff);
+}
+
+@utility text-figma-text-handoff {
+  color: var(--figma-color-text-handoff);
+}
+
+@utility border-figma-text-handoff {
+  border-color: var(--figma-color-text-handoff);
+}
+
+@utility outline-figma-text-handoff {
+  outline-color: var(--figma-color-text-handoff);
+}
+
+@utility fill-figma-text-handoff {
+  fill: var(--figma-color-text-handoff);
+}
+
+@utility stroke-figma-text-handoff {
+  stroke: var(--figma-color-text-handoff);
+}
+
+@utility icon-figma-text-handoff {
+  --color-icon: var(--figma-color-text-handoff);
+}
+
+@utility text-figma-handoff-secondary {
+  color: var(--figma-color-text-handoff-secondary);
+}
+
+@utility bg-figma-text-handoff-secondary {
+  background-color: var(--figma-color-text-handoff-secondary);
+}
+
+@utility text-figma-text-handoff-secondary {
+  color: var(--figma-color-text-handoff-secondary);
+}
+
+@utility border-figma-text-handoff-secondary {
+  border-color: var(--figma-color-text-handoff-secondary);
+}
+
+@utility outline-figma-text-handoff-secondary {
+  outline-color: var(--figma-color-text-handoff-secondary);
+}
+
+@utility fill-figma-text-handoff-secondary {
+  fill: var(--figma-color-text-handoff-secondary);
+}
+
+@utility stroke-figma-text-handoff-secondary {
+  stroke: var(--figma-color-text-handoff-secondary);
+}
+
+@utility icon-figma-text-handoff-secondary {
+  --color-icon: var(--figma-color-text-handoff-secondary);
+}
+
+@utility text-figma-handoff-tertiary {
+  color: var(--figma-color-text-handoff-tertiary);
+}
+
+@utility bg-figma-text-handoff-tertiary {
+  background-color: var(--figma-color-text-handoff-tertiary);
+}
+
+@utility text-figma-text-handoff-tertiary {
+  color: var(--figma-color-text-handoff-tertiary);
+}
+
+@utility border-figma-text-handoff-tertiary {
+  border-color: var(--figma-color-text-handoff-tertiary);
+}
+
+@utility outline-figma-text-handoff-tertiary {
+  outline-color: var(--figma-color-text-handoff-tertiary);
+}
+
+@utility fill-figma-text-handoff-tertiary {
+  fill: var(--figma-color-text-handoff-tertiary);
+}
+
+@utility stroke-figma-text-handoff-tertiary {
+  stroke: var(--figma-color-text-handoff-tertiary);
+}
+
+@utility icon-figma-text-handoff-tertiary {
+  --color-icon: var(--figma-color-text-handoff-tertiary);
+}
+
+@utility text-figma-hover {
+  color: var(--figma-color-text-hover);
+}
+
+@utility bg-figma-text-hover {
+  background-color: var(--figma-color-text-hover);
+}
+
+@utility text-figma-text-hover {
+  color: var(--figma-color-text-hover);
+}
+
+@utility border-figma-text-hover {
+  border-color: var(--figma-color-text-hover);
+}
+
+@utility outline-figma-text-hover {
+  outline-color: var(--figma-color-text-hover);
+}
+
+@utility fill-figma-text-hover {
+  fill: var(--figma-color-text-hover);
+}
+
+@utility stroke-figma-text-hover {
+  stroke: var(--figma-color-text-hover);
+}
+
+@utility icon-figma-text-hover {
+  --color-icon: var(--figma-color-text-hover);
+}
+
+@utility text-figma-measure {
+  color: var(--figma-color-text-measure);
+}
+
+@utility bg-figma-text-measure {
+  background-color: var(--figma-color-text-measure);
+}
+
+@utility text-figma-text-measure {
+  color: var(--figma-color-text-measure);
+}
+
+@utility border-figma-text-measure {
+  border-color: var(--figma-color-text-measure);
+}
+
+@utility outline-figma-text-measure {
+  outline-color: var(--figma-color-text-measure);
+}
+
+@utility fill-figma-text-measure {
+  fill: var(--figma-color-text-measure);
+}
+
+@utility stroke-figma-text-measure {
+  stroke: var(--figma-color-text-measure);
+}
+
+@utility icon-figma-text-measure {
+  --color-icon: var(--figma-color-text-measure);
+}
+
+@utility text-figma-measure-secondary {
+  color: var(--figma-color-text-measure-secondary);
+}
+
+@utility bg-figma-text-measure-secondary {
+  background-color: var(--figma-color-text-measure-secondary);
+}
+
+@utility text-figma-text-measure-secondary {
+  color: var(--figma-color-text-measure-secondary);
+}
+
+@utility border-figma-text-measure-secondary {
+  border-color: var(--figma-color-text-measure-secondary);
+}
+
+@utility outline-figma-text-measure-secondary {
+  outline-color: var(--figma-color-text-measure-secondary);
+}
+
+@utility fill-figma-text-measure-secondary {
+  fill: var(--figma-color-text-measure-secondary);
+}
+
+@utility stroke-figma-text-measure-secondary {
+  stroke: var(--figma-color-text-measure-secondary);
+}
+
+@utility icon-figma-text-measure-secondary {
+  --color-icon: var(--figma-color-text-measure-secondary);
+}
+
+@utility text-figma-measure-tertiary {
+  color: var(--figma-color-text-measure-tertiary);
+}
+
+@utility bg-figma-text-measure-tertiary {
+  background-color: var(--figma-color-text-measure-tertiary);
+}
+
+@utility text-figma-text-measure-tertiary {
+  color: var(--figma-color-text-measure-tertiary);
+}
+
+@utility border-figma-text-measure-tertiary {
+  border-color: var(--figma-color-text-measure-tertiary);
+}
+
+@utility outline-figma-text-measure-tertiary {
+  outline-color: var(--figma-color-text-measure-tertiary);
+}
+
+@utility fill-figma-text-measure-tertiary {
+  fill: var(--figma-color-text-measure-tertiary);
+}
+
+@utility stroke-figma-text-measure-tertiary {
+  stroke: var(--figma-color-text-measure-tertiary);
+}
+
+@utility icon-figma-text-measure-tertiary {
+  --color-icon: var(--figma-color-text-measure-tertiary);
+}
+
+@utility text-figma-menu {
+  color: var(--figma-color-text-menu);
+}
+
+@utility bg-figma-text-menu {
+  background-color: var(--figma-color-text-menu);
+}
+
+@utility text-figma-text-menu {
+  color: var(--figma-color-text-menu);
+}
+
+@utility border-figma-text-menu {
+  border-color: var(--figma-color-text-menu);
+}
+
+@utility outline-figma-text-menu {
+  outline-color: var(--figma-color-text-menu);
+}
+
+@utility fill-figma-text-menu {
+  fill: var(--figma-color-text-menu);
+}
+
+@utility stroke-figma-text-menu {
+  stroke: var(--figma-color-text-menu);
+}
+
+@utility icon-figma-text-menu {
+  --color-icon: var(--figma-color-text-menu);
+}
+
+@utility text-figma-menu-danger {
+  color: var(--figma-color-text-menu-danger);
+}
+
+@utility bg-figma-text-menu-danger {
+  background-color: var(--figma-color-text-menu-danger);
+}
+
+@utility text-figma-text-menu-danger {
+  color: var(--figma-color-text-menu-danger);
+}
+
+@utility border-figma-text-menu-danger {
+  border-color: var(--figma-color-text-menu-danger);
+}
+
+@utility outline-figma-text-menu-danger {
+  outline-color: var(--figma-color-text-menu-danger);
+}
+
+@utility fill-figma-text-menu-danger {
+  fill: var(--figma-color-text-menu-danger);
+}
+
+@utility stroke-figma-text-menu-danger {
+  stroke: var(--figma-color-text-menu-danger);
+}
+
+@utility icon-figma-text-menu-danger {
+  --color-icon: var(--figma-color-text-menu-danger);
+}
+
+@utility text-figma-menu-disabled {
+  color: var(--figma-color-text-menu-disabled);
+}
+
+@utility bg-figma-text-menu-disabled {
+  background-color: var(--figma-color-text-menu-disabled);
+}
+
+@utility text-figma-text-menu-disabled {
+  color: var(--figma-color-text-menu-disabled);
+}
+
+@utility border-figma-text-menu-disabled {
+  border-color: var(--figma-color-text-menu-disabled);
+}
+
+@utility outline-figma-text-menu-disabled {
+  outline-color: var(--figma-color-text-menu-disabled);
+}
+
+@utility fill-figma-text-menu-disabled {
+  fill: var(--figma-color-text-menu-disabled);
+}
+
+@utility stroke-figma-text-menu-disabled {
+  stroke: var(--figma-color-text-menu-disabled);
+}
+
+@utility icon-figma-text-menu-disabled {
+  --color-icon: var(--figma-color-text-menu-disabled);
+}
+
+@utility text-figma-menu-hover {
+  color: var(--figma-color-text-menu-hover);
+}
+
+@utility bg-figma-text-menu-hover {
+  background-color: var(--figma-color-text-menu-hover);
+}
+
+@utility text-figma-text-menu-hover {
+  color: var(--figma-color-text-menu-hover);
+}
+
+@utility border-figma-text-menu-hover {
+  border-color: var(--figma-color-text-menu-hover);
+}
+
+@utility outline-figma-text-menu-hover {
+  outline-color: var(--figma-color-text-menu-hover);
+}
+
+@utility fill-figma-text-menu-hover {
+  fill: var(--figma-color-text-menu-hover);
+}
+
+@utility stroke-figma-text-menu-hover {
+  stroke: var(--figma-color-text-menu-hover);
+}
+
+@utility icon-figma-text-menu-hover {
+  --color-icon: var(--figma-color-text-menu-hover);
+}
+
+@utility text-figma-menu-ondisabled {
+  color: var(--figma-color-text-menu-ondisabled);
+}
+
+@utility bg-figma-text-menu-ondisabled {
+  background-color: var(--figma-color-text-menu-ondisabled);
+}
+
+@utility text-figma-text-menu-ondisabled {
+  color: var(--figma-color-text-menu-ondisabled);
+}
+
+@utility border-figma-text-menu-ondisabled {
+  border-color: var(--figma-color-text-menu-ondisabled);
+}
+
+@utility outline-figma-text-menu-ondisabled {
+  outline-color: var(--figma-color-text-menu-ondisabled);
+}
+
+@utility fill-figma-text-menu-ondisabled {
+  fill: var(--figma-color-text-menu-ondisabled);
+}
+
+@utility stroke-figma-text-menu-ondisabled {
+  stroke: var(--figma-color-text-menu-ondisabled);
+}
+
+@utility icon-figma-text-menu-ondisabled {
+  --color-icon: var(--figma-color-text-menu-ondisabled);
+}
+
+@utility text-figma-menu-onselected {
+  color: var(--figma-color-text-menu-onselected);
+}
+
+@utility bg-figma-text-menu-onselected {
+  background-color: var(--figma-color-text-menu-onselected);
+}
+
+@utility text-figma-text-menu-onselected {
+  color: var(--figma-color-text-menu-onselected);
+}
+
+@utility border-figma-text-menu-onselected {
+  border-color: var(--figma-color-text-menu-onselected);
+}
+
+@utility outline-figma-text-menu-onselected {
+  outline-color: var(--figma-color-text-menu-onselected);
+}
+
+@utility fill-figma-text-menu-onselected {
+  fill: var(--figma-color-text-menu-onselected);
+}
+
+@utility stroke-figma-text-menu-onselected {
+  stroke: var(--figma-color-text-menu-onselected);
+}
+
+@utility icon-figma-text-menu-onselected {
+  --color-icon: var(--figma-color-text-menu-onselected);
+}
+
+@utility text-figma-menu-secondary {
+  color: var(--figma-color-text-menu-secondary);
+}
+
+@utility bg-figma-text-menu-secondary {
+  background-color: var(--figma-color-text-menu-secondary);
+}
+
+@utility text-figma-text-menu-secondary {
+  color: var(--figma-color-text-menu-secondary);
+}
+
+@utility border-figma-text-menu-secondary {
+  border-color: var(--figma-color-text-menu-secondary);
+}
+
+@utility outline-figma-text-menu-secondary {
+  outline-color: var(--figma-color-text-menu-secondary);
+}
+
+@utility fill-figma-text-menu-secondary {
+  fill: var(--figma-color-text-menu-secondary);
+}
+
+@utility stroke-figma-text-menu-secondary {
+  stroke: var(--figma-color-text-menu-secondary);
+}
+
+@utility icon-figma-text-menu-secondary {
+  --color-icon: var(--figma-color-text-menu-secondary);
+}
+
+@utility text-figma-menu-secondary-hover {
+  color: var(--figma-color-text-menu-secondary-hover);
+}
+
+@utility bg-figma-text-menu-secondary-hover {
+  background-color: var(--figma-color-text-menu-secondary-hover);
+}
+
+@utility text-figma-text-menu-secondary-hover {
+  color: var(--figma-color-text-menu-secondary-hover);
+}
+
+@utility border-figma-text-menu-secondary-hover {
+  border-color: var(--figma-color-text-menu-secondary-hover);
+}
+
+@utility outline-figma-text-menu-secondary-hover {
+  outline-color: var(--figma-color-text-menu-secondary-hover);
+}
+
+@utility fill-figma-text-menu-secondary-hover {
+  fill: var(--figma-color-text-menu-secondary-hover);
+}
+
+@utility stroke-figma-text-menu-secondary-hover {
+  stroke: var(--figma-color-text-menu-secondary-hover);
+}
+
+@utility icon-figma-text-menu-secondary-hover {
+  --color-icon: var(--figma-color-text-menu-secondary-hover);
+}
+
+@utility text-figma-menu-selected {
+  color: var(--figma-color-text-menu-selected);
+}
+
+@utility bg-figma-text-menu-selected {
+  background-color: var(--figma-color-text-menu-selected);
+}
+
+@utility text-figma-text-menu-selected {
+  color: var(--figma-color-text-menu-selected);
+}
+
+@utility border-figma-text-menu-selected {
+  border-color: var(--figma-color-text-menu-selected);
+}
+
+@utility outline-figma-text-menu-selected {
+  outline-color: var(--figma-color-text-menu-selected);
+}
+
+@utility fill-figma-text-menu-selected {
+  fill: var(--figma-color-text-menu-selected);
+}
+
+@utility stroke-figma-text-menu-selected {
+  stroke: var(--figma-color-text-menu-selected);
+}
+
+@utility icon-figma-text-menu-selected {
+  --color-icon: var(--figma-color-text-menu-selected);
+}
+
+@utility text-figma-menu-selected-secondary {
+  color: var(--figma-color-text-menu-selected-secondary);
+}
+
+@utility bg-figma-text-menu-selected-secondary {
+  background-color: var(--figma-color-text-menu-selected-secondary);
+}
+
+@utility text-figma-text-menu-selected-secondary {
+  color: var(--figma-color-text-menu-selected-secondary);
+}
+
+@utility border-figma-text-menu-selected-secondary {
+  border-color: var(--figma-color-text-menu-selected-secondary);
+}
+
+@utility outline-figma-text-menu-selected-secondary {
+  outline-color: var(--figma-color-text-menu-selected-secondary);
+}
+
+@utility fill-figma-text-menu-selected-secondary {
+  fill: var(--figma-color-text-menu-selected-secondary);
+}
+
+@utility stroke-figma-text-menu-selected-secondary {
+  stroke: var(--figma-color-text-menu-selected-secondary);
+}
+
+@utility icon-figma-text-menu-selected-secondary {
+  --color-icon: var(--figma-color-text-menu-selected-secondary);
+}
+
+@utility text-figma-menu-selected-tertiary {
+  color: var(--figma-color-text-menu-selected-tertiary);
+}
+
+@utility bg-figma-text-menu-selected-tertiary {
+  background-color: var(--figma-color-text-menu-selected-tertiary);
+}
+
+@utility text-figma-text-menu-selected-tertiary {
+  color: var(--figma-color-text-menu-selected-tertiary);
+}
+
+@utility border-figma-text-menu-selected-tertiary {
+  border-color: var(--figma-color-text-menu-selected-tertiary);
+}
+
+@utility outline-figma-text-menu-selected-tertiary {
+  outline-color: var(--figma-color-text-menu-selected-tertiary);
+}
+
+@utility fill-figma-text-menu-selected-tertiary {
+  fill: var(--figma-color-text-menu-selected-tertiary);
+}
+
+@utility stroke-figma-text-menu-selected-tertiary {
+  stroke: var(--figma-color-text-menu-selected-tertiary);
+}
+
+@utility icon-figma-text-menu-selected-tertiary {
+  --color-icon: var(--figma-color-text-menu-selected-tertiary);
+}
+
+@utility text-figma-menu-tertiary {
+  color: var(--figma-color-text-menu-tertiary);
+}
+
+@utility bg-figma-text-menu-tertiary {
+  background-color: var(--figma-color-text-menu-tertiary);
+}
+
+@utility text-figma-text-menu-tertiary {
+  color: var(--figma-color-text-menu-tertiary);
+}
+
+@utility border-figma-text-menu-tertiary {
+  border-color: var(--figma-color-text-menu-tertiary);
+}
+
+@utility outline-figma-text-menu-tertiary {
+  outline-color: var(--figma-color-text-menu-tertiary);
+}
+
+@utility fill-figma-text-menu-tertiary {
+  fill: var(--figma-color-text-menu-tertiary);
+}
+
+@utility stroke-figma-text-menu-tertiary {
+  stroke: var(--figma-color-text-menu-tertiary);
+}
+
+@utility icon-figma-text-menu-tertiary {
+  --color-icon: var(--figma-color-text-menu-tertiary);
+}
+
+@utility text-figma-menu-tertiary-hover {
+  color: var(--figma-color-text-menu-tertiary-hover);
+}
+
+@utility bg-figma-text-menu-tertiary-hover {
+  background-color: var(--figma-color-text-menu-tertiary-hover);
+}
+
+@utility text-figma-text-menu-tertiary-hover {
+  color: var(--figma-color-text-menu-tertiary-hover);
+}
+
+@utility border-figma-text-menu-tertiary-hover {
+  border-color: var(--figma-color-text-menu-tertiary-hover);
+}
+
+@utility outline-figma-text-menu-tertiary-hover {
+  outline-color: var(--figma-color-text-menu-tertiary-hover);
+}
+
+@utility fill-figma-text-menu-tertiary-hover {
+  fill: var(--figma-color-text-menu-tertiary-hover);
+}
+
+@utility stroke-figma-text-menu-tertiary-hover {
+  stroke: var(--figma-color-text-menu-tertiary-hover);
+}
+
+@utility icon-figma-text-menu-tertiary-hover {
+  --color-icon: var(--figma-color-text-menu-tertiary-hover);
+}
+
+@utility text-figma-menu-warning {
+  color: var(--figma-color-text-menu-warning);
+}
+
+@utility bg-figma-text-menu-warning {
+  background-color: var(--figma-color-text-menu-warning);
+}
+
+@utility text-figma-text-menu-warning {
+  color: var(--figma-color-text-menu-warning);
+}
+
+@utility border-figma-text-menu-warning {
+  border-color: var(--figma-color-text-menu-warning);
+}
+
+@utility outline-figma-text-menu-warning {
+  outline-color: var(--figma-color-text-menu-warning);
+}
+
+@utility fill-figma-text-menu-warning {
+  fill: var(--figma-color-text-menu-warning);
+}
+
+@utility stroke-figma-text-menu-warning {
+  stroke: var(--figma-color-text-menu-warning);
+}
+
+@utility icon-figma-text-menu-warning {
+  --color-icon: var(--figma-color-text-menu-warning);
+}
+
+@utility text-figma-onassistive {
+  color: var(--figma-color-text-onassistive);
+}
+
+@utility bg-figma-text-onassistive {
+  background-color: var(--figma-color-text-onassistive);
+}
+
+@utility text-figma-text-onassistive {
+  color: var(--figma-color-text-onassistive);
+}
+
+@utility border-figma-text-onassistive {
+  border-color: var(--figma-color-text-onassistive);
+}
+
+@utility outline-figma-text-onassistive {
+  outline-color: var(--figma-color-text-onassistive);
+}
+
+@utility fill-figma-text-onassistive {
+  fill: var(--figma-color-text-onassistive);
+}
+
+@utility stroke-figma-text-onassistive {
+  stroke: var(--figma-color-text-onassistive);
+}
+
+@utility icon-figma-text-onassistive {
+  --color-icon: var(--figma-color-text-onassistive);
+}
+
+@utility text-figma-onassistive-secondary {
+  color: var(--figma-color-text-onassistive-secondary);
+}
+
+@utility bg-figma-text-onassistive-secondary {
+  background-color: var(--figma-color-text-onassistive-secondary);
+}
+
+@utility text-figma-text-onassistive-secondary {
+  color: var(--figma-color-text-onassistive-secondary);
+}
+
+@utility border-figma-text-onassistive-secondary {
+  border-color: var(--figma-color-text-onassistive-secondary);
+}
+
+@utility outline-figma-text-onassistive-secondary {
+  outline-color: var(--figma-color-text-onassistive-secondary);
+}
+
+@utility fill-figma-text-onassistive-secondary {
+  fill: var(--figma-color-text-onassistive-secondary);
+}
+
+@utility stroke-figma-text-onassistive-secondary {
+  stroke: var(--figma-color-text-onassistive-secondary);
+}
+
+@utility icon-figma-text-onassistive-secondary {
+  --color-icon: var(--figma-color-text-onassistive-secondary);
+}
+
+@utility text-figma-onassistive-tertiary {
+  color: var(--figma-color-text-onassistive-tertiary);
+}
+
+@utility bg-figma-text-onassistive-tertiary {
+  background-color: var(--figma-color-text-onassistive-tertiary);
+}
+
+@utility text-figma-text-onassistive-tertiary {
+  color: var(--figma-color-text-onassistive-tertiary);
+}
+
+@utility border-figma-text-onassistive-tertiary {
+  border-color: var(--figma-color-text-onassistive-tertiary);
+}
+
+@utility outline-figma-text-onassistive-tertiary {
+  outline-color: var(--figma-color-text-onassistive-tertiary);
+}
+
+@utility fill-figma-text-onassistive-tertiary {
+  fill: var(--figma-color-text-onassistive-tertiary);
+}
+
+@utility stroke-figma-text-onassistive-tertiary {
+  stroke: var(--figma-color-text-onassistive-tertiary);
+}
+
+@utility icon-figma-text-onassistive-tertiary {
+  --color-icon: var(--figma-color-text-onassistive-tertiary);
+}
+
+@utility text-figma-onbrand {
+  color: var(--figma-color-text-onbrand);
+}
+
+@utility bg-figma-text-onbrand {
+  background-color: var(--figma-color-text-onbrand);
+}
+
+@utility text-figma-text-onbrand {
+  color: var(--figma-color-text-onbrand);
+}
+
+@utility border-figma-text-onbrand {
+  border-color: var(--figma-color-text-onbrand);
+}
+
+@utility outline-figma-text-onbrand {
+  outline-color: var(--figma-color-text-onbrand);
+}
+
+@utility fill-figma-text-onbrand {
+  fill: var(--figma-color-text-onbrand);
+}
+
+@utility stroke-figma-text-onbrand {
+  stroke: var(--figma-color-text-onbrand);
+}
+
+@utility icon-figma-text-onbrand {
+  --color-icon: var(--figma-color-text-onbrand);
+}
+
+@utility text-figma-onbrand-secondary {
+  color: var(--figma-color-text-onbrand-secondary);
+}
+
+@utility bg-figma-text-onbrand-secondary {
+  background-color: var(--figma-color-text-onbrand-secondary);
+}
+
+@utility text-figma-text-onbrand-secondary {
+  color: var(--figma-color-text-onbrand-secondary);
+}
+
+@utility border-figma-text-onbrand-secondary {
+  border-color: var(--figma-color-text-onbrand-secondary);
+}
+
+@utility outline-figma-text-onbrand-secondary {
+  outline-color: var(--figma-color-text-onbrand-secondary);
+}
+
+@utility fill-figma-text-onbrand-secondary {
+  fill: var(--figma-color-text-onbrand-secondary);
+}
+
+@utility stroke-figma-text-onbrand-secondary {
+  stroke: var(--figma-color-text-onbrand-secondary);
+}
+
+@utility icon-figma-text-onbrand-secondary {
+  --color-icon: var(--figma-color-text-onbrand-secondary);
+}
+
+@utility text-figma-onbrand-tertiary {
+  color: var(--figma-color-text-onbrand-tertiary);
+}
+
+@utility bg-figma-text-onbrand-tertiary {
+  background-color: var(--figma-color-text-onbrand-tertiary);
+}
+
+@utility text-figma-text-onbrand-tertiary {
+  color: var(--figma-color-text-onbrand-tertiary);
+}
+
+@utility border-figma-text-onbrand-tertiary {
+  border-color: var(--figma-color-text-onbrand-tertiary);
+}
+
+@utility outline-figma-text-onbrand-tertiary {
+  outline-color: var(--figma-color-text-onbrand-tertiary);
+}
+
+@utility fill-figma-text-onbrand-tertiary {
+  fill: var(--figma-color-text-onbrand-tertiary);
+}
+
+@utility stroke-figma-text-onbrand-tertiary {
+  stroke: var(--figma-color-text-onbrand-tertiary);
+}
+
+@utility icon-figma-text-onbrand-tertiary {
+  --color-icon: var(--figma-color-text-onbrand-tertiary);
+}
+
+@utility text-figma-oncomponent {
+  color: var(--figma-color-text-oncomponent);
+}
+
+@utility bg-figma-text-oncomponent {
+  background-color: var(--figma-color-text-oncomponent);
+}
+
+@utility text-figma-text-oncomponent {
+  color: var(--figma-color-text-oncomponent);
+}
+
+@utility border-figma-text-oncomponent {
+  border-color: var(--figma-color-text-oncomponent);
+}
+
+@utility outline-figma-text-oncomponent {
+  outline-color: var(--figma-color-text-oncomponent);
+}
+
+@utility fill-figma-text-oncomponent {
+  fill: var(--figma-color-text-oncomponent);
+}
+
+@utility stroke-figma-text-oncomponent {
+  stroke: var(--figma-color-text-oncomponent);
+}
+
+@utility icon-figma-text-oncomponent {
+  --color-icon: var(--figma-color-text-oncomponent);
+}
+
+@utility text-figma-oncomponent-secondary {
+  color: var(--figma-color-text-oncomponent-secondary);
+}
+
+@utility bg-figma-text-oncomponent-secondary {
+  background-color: var(--figma-color-text-oncomponent-secondary);
+}
+
+@utility text-figma-text-oncomponent-secondary {
+  color: var(--figma-color-text-oncomponent-secondary);
+}
+
+@utility border-figma-text-oncomponent-secondary {
+  border-color: var(--figma-color-text-oncomponent-secondary);
+}
+
+@utility outline-figma-text-oncomponent-secondary {
+  outline-color: var(--figma-color-text-oncomponent-secondary);
+}
+
+@utility fill-figma-text-oncomponent-secondary {
+  fill: var(--figma-color-text-oncomponent-secondary);
+}
+
+@utility stroke-figma-text-oncomponent-secondary {
+  stroke: var(--figma-color-text-oncomponent-secondary);
+}
+
+@utility icon-figma-text-oncomponent-secondary {
+  --color-icon: var(--figma-color-text-oncomponent-secondary);
+}
+
+@utility text-figma-oncomponent-tertiary {
+  color: var(--figma-color-text-oncomponent-tertiary);
+}
+
+@utility bg-figma-text-oncomponent-tertiary {
+  background-color: var(--figma-color-text-oncomponent-tertiary);
+}
+
+@utility text-figma-text-oncomponent-tertiary {
+  color: var(--figma-color-text-oncomponent-tertiary);
+}
+
+@utility border-figma-text-oncomponent-tertiary {
+  border-color: var(--figma-color-text-oncomponent-tertiary);
+}
+
+@utility outline-figma-text-oncomponent-tertiary {
+  outline-color: var(--figma-color-text-oncomponent-tertiary);
+}
+
+@utility fill-figma-text-oncomponent-tertiary {
+  fill: var(--figma-color-text-oncomponent-tertiary);
+}
+
+@utility stroke-figma-text-oncomponent-tertiary {
+  stroke: var(--figma-color-text-oncomponent-tertiary);
+}
+
+@utility icon-figma-text-oncomponent-tertiary {
+  --color-icon: var(--figma-color-text-oncomponent-tertiary);
+}
+
+@utility text-figma-ondanger {
+  color: var(--figma-color-text-ondanger);
+}
+
+@utility bg-figma-text-ondanger {
+  background-color: var(--figma-color-text-ondanger);
+}
+
+@utility text-figma-text-ondanger {
+  color: var(--figma-color-text-ondanger);
+}
+
+@utility border-figma-text-ondanger {
+  border-color: var(--figma-color-text-ondanger);
+}
+
+@utility outline-figma-text-ondanger {
+  outline-color: var(--figma-color-text-ondanger);
+}
+
+@utility fill-figma-text-ondanger {
+  fill: var(--figma-color-text-ondanger);
+}
+
+@utility stroke-figma-text-ondanger {
+  stroke: var(--figma-color-text-ondanger);
+}
+
+@utility icon-figma-text-ondanger {
+  --color-icon: var(--figma-color-text-ondanger);
+}
+
+@utility text-figma-ondanger-secondary {
+  color: var(--figma-color-text-ondanger-secondary);
+}
+
+@utility bg-figma-text-ondanger-secondary {
+  background-color: var(--figma-color-text-ondanger-secondary);
+}
+
+@utility text-figma-text-ondanger-secondary {
+  color: var(--figma-color-text-ondanger-secondary);
+}
+
+@utility border-figma-text-ondanger-secondary {
+  border-color: var(--figma-color-text-ondanger-secondary);
+}
+
+@utility outline-figma-text-ondanger-secondary {
+  outline-color: var(--figma-color-text-ondanger-secondary);
+}
+
+@utility fill-figma-text-ondanger-secondary {
+  fill: var(--figma-color-text-ondanger-secondary);
+}
+
+@utility stroke-figma-text-ondanger-secondary {
+  stroke: var(--figma-color-text-ondanger-secondary);
+}
+
+@utility icon-figma-text-ondanger-secondary {
+  --color-icon: var(--figma-color-text-ondanger-secondary);
+}
+
+@utility text-figma-ondanger-tertiary {
+  color: var(--figma-color-text-ondanger-tertiary);
+}
+
+@utility bg-figma-text-ondanger-tertiary {
+  background-color: var(--figma-color-text-ondanger-tertiary);
+}
+
+@utility text-figma-text-ondanger-tertiary {
+  color: var(--figma-color-text-ondanger-tertiary);
+}
+
+@utility border-figma-text-ondanger-tertiary {
+  border-color: var(--figma-color-text-ondanger-tertiary);
+}
+
+@utility outline-figma-text-ondanger-tertiary {
+  outline-color: var(--figma-color-text-ondanger-tertiary);
+}
+
+@utility fill-figma-text-ondanger-tertiary {
+  fill: var(--figma-color-text-ondanger-tertiary);
+}
+
+@utility stroke-figma-text-ondanger-tertiary {
+  stroke: var(--figma-color-text-ondanger-tertiary);
+}
+
+@utility icon-figma-text-ondanger-tertiary {
+  --color-icon: var(--figma-color-text-ondanger-tertiary);
+}
+
+@utility text-figma-ondesign {
+  color: var(--figma-color-text-ondesign);
+}
+
+@utility bg-figma-text-ondesign {
+  background-color: var(--figma-color-text-ondesign);
+}
+
+@utility text-figma-text-ondesign {
+  color: var(--figma-color-text-ondesign);
+}
+
+@utility border-figma-text-ondesign {
+  border-color: var(--figma-color-text-ondesign);
+}
+
+@utility outline-figma-text-ondesign {
+  outline-color: var(--figma-color-text-ondesign);
+}
+
+@utility fill-figma-text-ondesign {
+  fill: var(--figma-color-text-ondesign);
+}
+
+@utility stroke-figma-text-ondesign {
+  stroke: var(--figma-color-text-ondesign);
+}
+
+@utility icon-figma-text-ondesign {
+  --color-icon: var(--figma-color-text-ondesign);
+}
+
+@utility text-figma-ondesign-secondary {
+  color: var(--figma-color-text-ondesign-secondary);
+}
+
+@utility bg-figma-text-ondesign-secondary {
+  background-color: var(--figma-color-text-ondesign-secondary);
+}
+
+@utility text-figma-text-ondesign-secondary {
+  color: var(--figma-color-text-ondesign-secondary);
+}
+
+@utility border-figma-text-ondesign-secondary {
+  border-color: var(--figma-color-text-ondesign-secondary);
+}
+
+@utility outline-figma-text-ondesign-secondary {
+  outline-color: var(--figma-color-text-ondesign-secondary);
+}
+
+@utility fill-figma-text-ondesign-secondary {
+  fill: var(--figma-color-text-ondesign-secondary);
+}
+
+@utility stroke-figma-text-ondesign-secondary {
+  stroke: var(--figma-color-text-ondesign-secondary);
+}
+
+@utility icon-figma-text-ondesign-secondary {
+  --color-icon: var(--figma-color-text-ondesign-secondary);
+}
+
+@utility text-figma-ondesign-tertiary {
+  color: var(--figma-color-text-ondesign-tertiary);
+}
+
+@utility bg-figma-text-ondesign-tertiary {
+  background-color: var(--figma-color-text-ondesign-tertiary);
+}
+
+@utility text-figma-text-ondesign-tertiary {
+  color: var(--figma-color-text-ondesign-tertiary);
+}
+
+@utility border-figma-text-ondesign-tertiary {
+  border-color: var(--figma-color-text-ondesign-tertiary);
+}
+
+@utility outline-figma-text-ondesign-tertiary {
+  outline-color: var(--figma-color-text-ondesign-tertiary);
+}
+
+@utility fill-figma-text-ondesign-tertiary {
+  fill: var(--figma-color-text-ondesign-tertiary);
+}
+
+@utility stroke-figma-text-ondesign-tertiary {
+  stroke: var(--figma-color-text-ondesign-tertiary);
+}
+
+@utility icon-figma-text-ondesign-tertiary {
+  --color-icon: var(--figma-color-text-ondesign-tertiary);
+}
+
+@utility text-figma-ondisabled {
+  color: var(--figma-color-text-ondisabled);
+}
+
+@utility bg-figma-text-ondisabled {
+  background-color: var(--figma-color-text-ondisabled);
+}
+
+@utility text-figma-text-ondisabled {
+  color: var(--figma-color-text-ondisabled);
+}
+
+@utility border-figma-text-ondisabled {
+  border-color: var(--figma-color-text-ondisabled);
+}
+
+@utility outline-figma-text-ondisabled {
+  outline-color: var(--figma-color-text-ondisabled);
+}
+
+@utility fill-figma-text-ondisabled {
+  fill: var(--figma-color-text-ondisabled);
+}
+
+@utility stroke-figma-text-ondisabled {
+  stroke: var(--figma-color-text-ondisabled);
+}
+
+@utility icon-figma-text-ondisabled {
+  --color-icon: var(--figma-color-text-ondisabled);
+}
+
+@utility text-figma-onfigjam {
+  color: var(--figma-color-text-onfigjam);
+}
+
+@utility bg-figma-text-onfigjam {
+  background-color: var(--figma-color-text-onfigjam);
+}
+
+@utility text-figma-text-onfigjam {
+  color: var(--figma-color-text-onfigjam);
+}
+
+@utility border-figma-text-onfigjam {
+  border-color: var(--figma-color-text-onfigjam);
+}
+
+@utility outline-figma-text-onfigjam {
+  outline-color: var(--figma-color-text-onfigjam);
+}
+
+@utility fill-figma-text-onfigjam {
+  fill: var(--figma-color-text-onfigjam);
+}
+
+@utility stroke-figma-text-onfigjam {
+  stroke: var(--figma-color-text-onfigjam);
+}
+
+@utility icon-figma-text-onfigjam {
+  --color-icon: var(--figma-color-text-onfigjam);
+}
+
+@utility text-figma-onfigjam-secondary {
+  color: var(--figma-color-text-onfigjam-secondary);
+}
+
+@utility bg-figma-text-onfigjam-secondary {
+  background-color: var(--figma-color-text-onfigjam-secondary);
+}
+
+@utility text-figma-text-onfigjam-secondary {
+  color: var(--figma-color-text-onfigjam-secondary);
+}
+
+@utility border-figma-text-onfigjam-secondary {
+  border-color: var(--figma-color-text-onfigjam-secondary);
+}
+
+@utility outline-figma-text-onfigjam-secondary {
+  outline-color: var(--figma-color-text-onfigjam-secondary);
+}
+
+@utility fill-figma-text-onfigjam-secondary {
+  fill: var(--figma-color-text-onfigjam-secondary);
+}
+
+@utility stroke-figma-text-onfigjam-secondary {
+  stroke: var(--figma-color-text-onfigjam-secondary);
+}
+
+@utility icon-figma-text-onfigjam-secondary {
+  --color-icon: var(--figma-color-text-onfigjam-secondary);
+}
+
+@utility text-figma-onfigjam-tertiary {
+  color: var(--figma-color-text-onfigjam-tertiary);
+}
+
+@utility bg-figma-text-onfigjam-tertiary {
+  background-color: var(--figma-color-text-onfigjam-tertiary);
+}
+
+@utility text-figma-text-onfigjam-tertiary {
+  color: var(--figma-color-text-onfigjam-tertiary);
+}
+
+@utility border-figma-text-onfigjam-tertiary {
+  border-color: var(--figma-color-text-onfigjam-tertiary);
+}
+
+@utility outline-figma-text-onfigjam-tertiary {
+  outline-color: var(--figma-color-text-onfigjam-tertiary);
+}
+
+@utility fill-figma-text-onfigjam-tertiary {
+  fill: var(--figma-color-text-onfigjam-tertiary);
+}
+
+@utility stroke-figma-text-onfigjam-tertiary {
+  stroke: var(--figma-color-text-onfigjam-tertiary);
+}
+
+@utility icon-figma-text-onfigjam-tertiary {
+  --color-icon: var(--figma-color-text-onfigjam-tertiary);
+}
+
+@utility text-figma-oninverse {
+  color: var(--figma-color-text-oninverse);
+}
+
+@utility bg-figma-text-oninverse {
+  background-color: var(--figma-color-text-oninverse);
+}
+
+@utility text-figma-text-oninverse {
+  color: var(--figma-color-text-oninverse);
+}
+
+@utility border-figma-text-oninverse {
+  border-color: var(--figma-color-text-oninverse);
+}
+
+@utility outline-figma-text-oninverse {
+  outline-color: var(--figma-color-text-oninverse);
+}
+
+@utility fill-figma-text-oninverse {
+  fill: var(--figma-color-text-oninverse);
+}
+
+@utility stroke-figma-text-oninverse {
+  stroke: var(--figma-color-text-oninverse);
+}
+
+@utility icon-figma-text-oninverse {
+  --color-icon: var(--figma-color-text-oninverse);
+}
+
+@utility text-figma-onmeasure {
+  color: var(--figma-color-text-onmeasure);
+}
+
+@utility bg-figma-text-onmeasure {
+  background-color: var(--figma-color-text-onmeasure);
+}
+
+@utility text-figma-text-onmeasure {
+  color: var(--figma-color-text-onmeasure);
+}
+
+@utility border-figma-text-onmeasure {
+  border-color: var(--figma-color-text-onmeasure);
+}
+
+@utility outline-figma-text-onmeasure {
+  outline-color: var(--figma-color-text-onmeasure);
+}
+
+@utility fill-figma-text-onmeasure {
+  fill: var(--figma-color-text-onmeasure);
+}
+
+@utility stroke-figma-text-onmeasure {
+  stroke: var(--figma-color-text-onmeasure);
+}
+
+@utility icon-figma-text-onmeasure {
+  --color-icon: var(--figma-color-text-onmeasure);
+}
+
+@utility text-figma-onmeasure-secondary {
+  color: var(--figma-color-text-onmeasure-secondary);
+}
+
+@utility bg-figma-text-onmeasure-secondary {
+  background-color: var(--figma-color-text-onmeasure-secondary);
+}
+
+@utility text-figma-text-onmeasure-secondary {
+  color: var(--figma-color-text-onmeasure-secondary);
+}
+
+@utility border-figma-text-onmeasure-secondary {
+  border-color: var(--figma-color-text-onmeasure-secondary);
+}
+
+@utility outline-figma-text-onmeasure-secondary {
+  outline-color: var(--figma-color-text-onmeasure-secondary);
+}
+
+@utility fill-figma-text-onmeasure-secondary {
+  fill: var(--figma-color-text-onmeasure-secondary);
+}
+
+@utility stroke-figma-text-onmeasure-secondary {
+  stroke: var(--figma-color-text-onmeasure-secondary);
+}
+
+@utility icon-figma-text-onmeasure-secondary {
+  --color-icon: var(--figma-color-text-onmeasure-secondary);
+}
+
+@utility text-figma-onmeasure-tertiary {
+  color: var(--figma-color-text-onmeasure-tertiary);
+}
+
+@utility bg-figma-text-onmeasure-tertiary {
+  background-color: var(--figma-color-text-onmeasure-tertiary);
+}
+
+@utility text-figma-text-onmeasure-tertiary {
+  color: var(--figma-color-text-onmeasure-tertiary);
+}
+
+@utility border-figma-text-onmeasure-tertiary {
+  border-color: var(--figma-color-text-onmeasure-tertiary);
+}
+
+@utility outline-figma-text-onmeasure-tertiary {
+  outline-color: var(--figma-color-text-onmeasure-tertiary);
+}
+
+@utility fill-figma-text-onmeasure-tertiary {
+  fill: var(--figma-color-text-onmeasure-tertiary);
+}
+
+@utility stroke-figma-text-onmeasure-tertiary {
+  stroke: var(--figma-color-text-onmeasure-tertiary);
+}
+
+@utility icon-figma-text-onmeasure-tertiary {
+  --color-icon: var(--figma-color-text-onmeasure-tertiary);
+}
+
+@utility text-figma-onselected {
+  color: var(--figma-color-text-onselected);
+}
+
+@utility bg-figma-text-onselected {
+  background-color: var(--figma-color-text-onselected);
+}
+
+@utility text-figma-text-onselected {
+  color: var(--figma-color-text-onselected);
+}
+
+@utility border-figma-text-onselected {
+  border-color: var(--figma-color-text-onselected);
+}
+
+@utility outline-figma-text-onselected {
+  outline-color: var(--figma-color-text-onselected);
+}
+
+@utility fill-figma-text-onselected {
+  fill: var(--figma-color-text-onselected);
+}
+
+@utility stroke-figma-text-onselected {
+  stroke: var(--figma-color-text-onselected);
+}
+
+@utility icon-figma-text-onselected {
+  --color-icon: var(--figma-color-text-onselected);
+}
+
+@utility text-figma-onselected-secondary {
+  color: var(--figma-color-text-onselected-secondary);
+}
+
+@utility bg-figma-text-onselected-secondary {
+  background-color: var(--figma-color-text-onselected-secondary);
+}
+
+@utility text-figma-text-onselected-secondary {
+  color: var(--figma-color-text-onselected-secondary);
+}
+
+@utility border-figma-text-onselected-secondary {
+  border-color: var(--figma-color-text-onselected-secondary);
+}
+
+@utility outline-figma-text-onselected-secondary {
+  outline-color: var(--figma-color-text-onselected-secondary);
+}
+
+@utility fill-figma-text-onselected-secondary {
+  fill: var(--figma-color-text-onselected-secondary);
+}
+
+@utility stroke-figma-text-onselected-secondary {
+  stroke: var(--figma-color-text-onselected-secondary);
+}
+
+@utility icon-figma-text-onselected-secondary {
+  --color-icon: var(--figma-color-text-onselected-secondary);
+}
+
+@utility text-figma-onselected-strong {
+  color: var(--figma-color-text-onselected-strong);
+}
+
+@utility bg-figma-text-onselected-strong {
+  background-color: var(--figma-color-text-onselected-strong);
+}
+
+@utility text-figma-text-onselected-strong {
+  color: var(--figma-color-text-onselected-strong);
+}
+
+@utility border-figma-text-onselected-strong {
+  border-color: var(--figma-color-text-onselected-strong);
+}
+
+@utility outline-figma-text-onselected-strong {
+  outline-color: var(--figma-color-text-onselected-strong);
+}
+
+@utility fill-figma-text-onselected-strong {
+  fill: var(--figma-color-text-onselected-strong);
+}
+
+@utility stroke-figma-text-onselected-strong {
+  stroke: var(--figma-color-text-onselected-strong);
+}
+
+@utility icon-figma-text-onselected-strong {
+  --color-icon: var(--figma-color-text-onselected-strong);
+}
+
+@utility text-figma-onselected-tertiary {
+  color: var(--figma-color-text-onselected-tertiary);
+}
+
+@utility bg-figma-text-onselected-tertiary {
+  background-color: var(--figma-color-text-onselected-tertiary);
+}
+
+@utility text-figma-text-onselected-tertiary {
+  color: var(--figma-color-text-onselected-tertiary);
+}
+
+@utility border-figma-text-onselected-tertiary {
+  border-color: var(--figma-color-text-onselected-tertiary);
+}
+
+@utility outline-figma-text-onselected-tertiary {
+  outline-color: var(--figma-color-text-onselected-tertiary);
+}
+
+@utility fill-figma-text-onselected-tertiary {
+  fill: var(--figma-color-text-onselected-tertiary);
+}
+
+@utility stroke-figma-text-onselected-tertiary {
+  stroke: var(--figma-color-text-onselected-tertiary);
+}
+
+@utility icon-figma-text-onselected-tertiary {
+  --color-icon: var(--figma-color-text-onselected-tertiary);
+}
+
+@utility text-figma-onsuccess {
+  color: var(--figma-color-text-onsuccess);
+}
+
+@utility bg-figma-text-onsuccess {
+  background-color: var(--figma-color-text-onsuccess);
+}
+
+@utility text-figma-text-onsuccess {
+  color: var(--figma-color-text-onsuccess);
+}
+
+@utility border-figma-text-onsuccess {
+  border-color: var(--figma-color-text-onsuccess);
+}
+
+@utility outline-figma-text-onsuccess {
+  outline-color: var(--figma-color-text-onsuccess);
+}
+
+@utility fill-figma-text-onsuccess {
+  fill: var(--figma-color-text-onsuccess);
+}
+
+@utility stroke-figma-text-onsuccess {
+  stroke: var(--figma-color-text-onsuccess);
+}
+
+@utility icon-figma-text-onsuccess {
+  --color-icon: var(--figma-color-text-onsuccess);
+}
+
+@utility text-figma-onsuccess-secondary {
+  color: var(--figma-color-text-onsuccess-secondary);
+}
+
+@utility bg-figma-text-onsuccess-secondary {
+  background-color: var(--figma-color-text-onsuccess-secondary);
+}
+
+@utility text-figma-text-onsuccess-secondary {
+  color: var(--figma-color-text-onsuccess-secondary);
+}
+
+@utility border-figma-text-onsuccess-secondary {
+  border-color: var(--figma-color-text-onsuccess-secondary);
+}
+
+@utility outline-figma-text-onsuccess-secondary {
+  outline-color: var(--figma-color-text-onsuccess-secondary);
+}
+
+@utility fill-figma-text-onsuccess-secondary {
+  fill: var(--figma-color-text-onsuccess-secondary);
+}
+
+@utility stroke-figma-text-onsuccess-secondary {
+  stroke: var(--figma-color-text-onsuccess-secondary);
+}
+
+@utility icon-figma-text-onsuccess-secondary {
+  --color-icon: var(--figma-color-text-onsuccess-secondary);
+}
+
+@utility text-figma-onsuccess-tertiary {
+  color: var(--figma-color-text-onsuccess-tertiary);
+}
+
+@utility bg-figma-text-onsuccess-tertiary {
+  background-color: var(--figma-color-text-onsuccess-tertiary);
+}
+
+@utility text-figma-text-onsuccess-tertiary {
+  color: var(--figma-color-text-onsuccess-tertiary);
+}
+
+@utility border-figma-text-onsuccess-tertiary {
+  border-color: var(--figma-color-text-onsuccess-tertiary);
+}
+
+@utility outline-figma-text-onsuccess-tertiary {
+  outline-color: var(--figma-color-text-onsuccess-tertiary);
+}
+
+@utility fill-figma-text-onsuccess-tertiary {
+  fill: var(--figma-color-text-onsuccess-tertiary);
+}
+
+@utility stroke-figma-text-onsuccess-tertiary {
+  stroke: var(--figma-color-text-onsuccess-tertiary);
+}
+
+@utility icon-figma-text-onsuccess-tertiary {
+  --color-icon: var(--figma-color-text-onsuccess-tertiary);
+}
+
+@utility text-figma-onwarning {
+  color: var(--figma-color-text-onwarning);
+}
+
+@utility bg-figma-text-onwarning {
+  background-color: var(--figma-color-text-onwarning);
+}
+
+@utility text-figma-text-onwarning {
+  color: var(--figma-color-text-onwarning);
+}
+
+@utility border-figma-text-onwarning {
+  border-color: var(--figma-color-text-onwarning);
+}
+
+@utility outline-figma-text-onwarning {
+  outline-color: var(--figma-color-text-onwarning);
+}
+
+@utility fill-figma-text-onwarning {
+  fill: var(--figma-color-text-onwarning);
+}
+
+@utility stroke-figma-text-onwarning {
+  stroke: var(--figma-color-text-onwarning);
+}
+
+@utility icon-figma-text-onwarning {
+  --color-icon: var(--figma-color-text-onwarning);
+}
+
+@utility text-figma-onwarning-secondary {
+  color: var(--figma-color-text-onwarning-secondary);
+}
+
+@utility bg-figma-text-onwarning-secondary {
+  background-color: var(--figma-color-text-onwarning-secondary);
+}
+
+@utility text-figma-text-onwarning-secondary {
+  color: var(--figma-color-text-onwarning-secondary);
+}
+
+@utility border-figma-text-onwarning-secondary {
+  border-color: var(--figma-color-text-onwarning-secondary);
+}
+
+@utility outline-figma-text-onwarning-secondary {
+  outline-color: var(--figma-color-text-onwarning-secondary);
+}
+
+@utility fill-figma-text-onwarning-secondary {
+  fill: var(--figma-color-text-onwarning-secondary);
+}
+
+@utility stroke-figma-text-onwarning-secondary {
+  stroke: var(--figma-color-text-onwarning-secondary);
+}
+
+@utility icon-figma-text-onwarning-secondary {
+  --color-icon: var(--figma-color-text-onwarning-secondary);
+}
+
+@utility text-figma-onwarning-tertiary {
+  color: var(--figma-color-text-onwarning-tertiary);
+}
+
+@utility bg-figma-text-onwarning-tertiary {
+  background-color: var(--figma-color-text-onwarning-tertiary);
+}
+
+@utility text-figma-text-onwarning-tertiary {
+  color: var(--figma-color-text-onwarning-tertiary);
+}
+
+@utility border-figma-text-onwarning-tertiary {
+  border-color: var(--figma-color-text-onwarning-tertiary);
+}
+
+@utility outline-figma-text-onwarning-tertiary {
+  outline-color: var(--figma-color-text-onwarning-tertiary);
+}
+
+@utility fill-figma-text-onwarning-tertiary {
+  fill: var(--figma-color-text-onwarning-tertiary);
+}
+
+@utility stroke-figma-text-onwarning-tertiary {
+  stroke: var(--figma-color-text-onwarning-tertiary);
+}
+
+@utility icon-figma-text-onwarning-tertiary {
+  --color-icon: var(--figma-color-text-onwarning-tertiary);
+}
+
+@utility text-figma-secondary {
+  color: var(--figma-color-text-secondary);
+}
+
+@utility bg-figma-text-secondary {
+  background-color: var(--figma-color-text-secondary);
+}
+
+@utility text-figma-text-secondary {
+  color: var(--figma-color-text-secondary);
+}
+
+@utility border-figma-text-secondary {
+  border-color: var(--figma-color-text-secondary);
+}
+
+@utility outline-figma-text-secondary {
+  outline-color: var(--figma-color-text-secondary);
+}
+
+@utility fill-figma-text-secondary {
+  fill: var(--figma-color-text-secondary);
+}
+
+@utility stroke-figma-text-secondary {
+  stroke: var(--figma-color-text-secondary);
+}
+
+@utility icon-figma-text-secondary {
+  --color-icon: var(--figma-color-text-secondary);
+}
+
+@utility text-figma-secondary-hover {
+  color: var(--figma-color-text-secondary-hover);
+}
+
+@utility bg-figma-text-secondary-hover {
+  background-color: var(--figma-color-text-secondary-hover);
+}
+
+@utility text-figma-text-secondary-hover {
+  color: var(--figma-color-text-secondary-hover);
+}
+
+@utility border-figma-text-secondary-hover {
+  border-color: var(--figma-color-text-secondary-hover);
+}
+
+@utility outline-figma-text-secondary-hover {
+  outline-color: var(--figma-color-text-secondary-hover);
+}
+
+@utility fill-figma-text-secondary-hover {
+  fill: var(--figma-color-text-secondary-hover);
+}
+
+@utility stroke-figma-text-secondary-hover {
+  stroke: var(--figma-color-text-secondary-hover);
+}
+
+@utility icon-figma-text-secondary-hover {
+  --color-icon: var(--figma-color-text-secondary-hover);
+}
+
+@utility text-figma-selected {
+  color: var(--figma-color-text-selected);
+}
+
+@utility bg-figma-text-selected {
+  background-color: var(--figma-color-text-selected);
+}
+
+@utility text-figma-text-selected {
+  color: var(--figma-color-text-selected);
+}
+
+@utility border-figma-text-selected {
+  border-color: var(--figma-color-text-selected);
+}
+
+@utility outline-figma-text-selected {
+  outline-color: var(--figma-color-text-selected);
+}
+
+@utility fill-figma-text-selected {
+  fill: var(--figma-color-text-selected);
+}
+
+@utility stroke-figma-text-selected {
+  stroke: var(--figma-color-text-selected);
+}
+
+@utility icon-figma-text-selected {
+  --color-icon: var(--figma-color-text-selected);
+}
+
+@utility text-figma-selected-secondary {
+  color: var(--figma-color-text-selected-secondary);
+}
+
+@utility bg-figma-text-selected-secondary {
+  background-color: var(--figma-color-text-selected-secondary);
+}
+
+@utility text-figma-text-selected-secondary {
+  color: var(--figma-color-text-selected-secondary);
+}
+
+@utility border-figma-text-selected-secondary {
+  border-color: var(--figma-color-text-selected-secondary);
+}
+
+@utility outline-figma-text-selected-secondary {
+  outline-color: var(--figma-color-text-selected-secondary);
+}
+
+@utility fill-figma-text-selected-secondary {
+  fill: var(--figma-color-text-selected-secondary);
+}
+
+@utility stroke-figma-text-selected-secondary {
+  stroke: var(--figma-color-text-selected-secondary);
+}
+
+@utility icon-figma-text-selected-secondary {
+  --color-icon: var(--figma-color-text-selected-secondary);
+}
+
+@utility text-figma-selected-tertiary {
+  color: var(--figma-color-text-selected-tertiary);
+}
+
+@utility bg-figma-text-selected-tertiary {
+  background-color: var(--figma-color-text-selected-tertiary);
+}
+
+@utility text-figma-text-selected-tertiary {
+  color: var(--figma-color-text-selected-tertiary);
+}
+
+@utility border-figma-text-selected-tertiary {
+  border-color: var(--figma-color-text-selected-tertiary);
+}
+
+@utility outline-figma-text-selected-tertiary {
+  outline-color: var(--figma-color-text-selected-tertiary);
+}
+
+@utility fill-figma-text-selected-tertiary {
+  fill: var(--figma-color-text-selected-tertiary);
+}
+
+@utility stroke-figma-text-selected-tertiary {
+  stroke: var(--figma-color-text-selected-tertiary);
+}
+
+@utility icon-figma-text-selected-tertiary {
+  --color-icon: var(--figma-color-text-selected-tertiary);
+}
+
+@utility text-figma-success {
+  color: var(--figma-color-text-success);
+}
+
+@utility bg-figma-text-success {
+  background-color: var(--figma-color-text-success);
+}
+
+@utility text-figma-text-success {
+  color: var(--figma-color-text-success);
+}
+
+@utility border-figma-text-success {
+  border-color: var(--figma-color-text-success);
+}
+
+@utility outline-figma-text-success {
+  outline-color: var(--figma-color-text-success);
+}
+
+@utility fill-figma-text-success {
+  fill: var(--figma-color-text-success);
+}
+
+@utility stroke-figma-text-success {
+  stroke: var(--figma-color-text-success);
+}
+
+@utility icon-figma-text-success {
+  --color-icon: var(--figma-color-text-success);
+}
+
+@utility text-figma-success-secondary {
+  color: var(--figma-color-text-success-secondary);
+}
+
+@utility bg-figma-text-success-secondary {
+  background-color: var(--figma-color-text-success-secondary);
+}
+
+@utility text-figma-text-success-secondary {
+  color: var(--figma-color-text-success-secondary);
+}
+
+@utility border-figma-text-success-secondary {
+  border-color: var(--figma-color-text-success-secondary);
+}
+
+@utility outline-figma-text-success-secondary {
+  outline-color: var(--figma-color-text-success-secondary);
+}
+
+@utility fill-figma-text-success-secondary {
+  fill: var(--figma-color-text-success-secondary);
+}
+
+@utility stroke-figma-text-success-secondary {
+  stroke: var(--figma-color-text-success-secondary);
+}
+
+@utility icon-figma-text-success-secondary {
+  --color-icon: var(--figma-color-text-success-secondary);
+}
+
+@utility text-figma-success-tertiary {
+  color: var(--figma-color-text-success-tertiary);
+}
+
+@utility bg-figma-text-success-tertiary {
+  background-color: var(--figma-color-text-success-tertiary);
+}
+
+@utility text-figma-text-success-tertiary {
+  color: var(--figma-color-text-success-tertiary);
+}
+
+@utility border-figma-text-success-tertiary {
+  border-color: var(--figma-color-text-success-tertiary);
+}
+
+@utility outline-figma-text-success-tertiary {
+  outline-color: var(--figma-color-text-success-tertiary);
+}
+
+@utility fill-figma-text-success-tertiary {
+  fill: var(--figma-color-text-success-tertiary);
+}
+
+@utility stroke-figma-text-success-tertiary {
+  stroke: var(--figma-color-text-success-tertiary);
+}
+
+@utility icon-figma-text-success-tertiary {
+  --color-icon: var(--figma-color-text-success-tertiary);
+}
+
+@utility text-figma-tertiary {
+  color: var(--figma-color-text-tertiary);
+}
+
+@utility bg-figma-text-tertiary {
+  background-color: var(--figma-color-text-tertiary);
+}
+
+@utility text-figma-text-tertiary {
+  color: var(--figma-color-text-tertiary);
+}
+
+@utility border-figma-text-tertiary {
+  border-color: var(--figma-color-text-tertiary);
+}
+
+@utility outline-figma-text-tertiary {
+  outline-color: var(--figma-color-text-tertiary);
+}
+
+@utility fill-figma-text-tertiary {
+  fill: var(--figma-color-text-tertiary);
+}
+
+@utility stroke-figma-text-tertiary {
+  stroke: var(--figma-color-text-tertiary);
+}
+
+@utility icon-figma-text-tertiary {
+  --color-icon: var(--figma-color-text-tertiary);
+}
+
+@utility text-figma-tertiary-hover {
+  color: var(--figma-color-text-tertiary-hover);
+}
+
+@utility bg-figma-text-tertiary-hover {
+  background-color: var(--figma-color-text-tertiary-hover);
+}
+
+@utility text-figma-text-tertiary-hover {
+  color: var(--figma-color-text-tertiary-hover);
+}
+
+@utility border-figma-text-tertiary-hover {
+  border-color: var(--figma-color-text-tertiary-hover);
+}
+
+@utility outline-figma-text-tertiary-hover {
+  outline-color: var(--figma-color-text-tertiary-hover);
+}
+
+@utility fill-figma-text-tertiary-hover {
+  fill: var(--figma-color-text-tertiary-hover);
+}
+
+@utility stroke-figma-text-tertiary-hover {
+  stroke: var(--figma-color-text-tertiary-hover);
+}
+
+@utility icon-figma-text-tertiary-hover {
+  --color-icon: var(--figma-color-text-tertiary-hover);
+}
+
+@utility text-figma-toolbar {
+  color: var(--figma-color-text-toolbar);
+}
+
+@utility bg-figma-text-toolbar {
+  background-color: var(--figma-color-text-toolbar);
+}
+
+@utility text-figma-text-toolbar {
+  color: var(--figma-color-text-toolbar);
+}
+
+@utility border-figma-text-toolbar {
+  border-color: var(--figma-color-text-toolbar);
+}
+
+@utility outline-figma-text-toolbar {
+  outline-color: var(--figma-color-text-toolbar);
+}
+
+@utility fill-figma-text-toolbar {
+  fill: var(--figma-color-text-toolbar);
+}
+
+@utility stroke-figma-text-toolbar {
+  stroke: var(--figma-color-text-toolbar);
+}
+
+@utility icon-figma-text-toolbar {
+  --color-icon: var(--figma-color-text-toolbar);
+}
+
+@utility text-figma-toolbar-danger {
+  color: var(--figma-color-text-toolbar-danger);
+}
+
+@utility bg-figma-text-toolbar-danger {
+  background-color: var(--figma-color-text-toolbar-danger);
+}
+
+@utility text-figma-text-toolbar-danger {
+  color: var(--figma-color-text-toolbar-danger);
+}
+
+@utility border-figma-text-toolbar-danger {
+  border-color: var(--figma-color-text-toolbar-danger);
+}
+
+@utility outline-figma-text-toolbar-danger {
+  outline-color: var(--figma-color-text-toolbar-danger);
+}
+
+@utility fill-figma-text-toolbar-danger {
+  fill: var(--figma-color-text-toolbar-danger);
+}
+
+@utility stroke-figma-text-toolbar-danger {
+  stroke: var(--figma-color-text-toolbar-danger);
+}
+
+@utility icon-figma-text-toolbar-danger {
+  --color-icon: var(--figma-color-text-toolbar-danger);
+}
+
+@utility text-figma-toolbar-disabled {
+  color: var(--figma-color-text-toolbar-disabled);
+}
+
+@utility bg-figma-text-toolbar-disabled {
+  background-color: var(--figma-color-text-toolbar-disabled);
+}
+
+@utility text-figma-text-toolbar-disabled {
+  color: var(--figma-color-text-toolbar-disabled);
+}
+
+@utility border-figma-text-toolbar-disabled {
+  border-color: var(--figma-color-text-toolbar-disabled);
+}
+
+@utility outline-figma-text-toolbar-disabled {
+  outline-color: var(--figma-color-text-toolbar-disabled);
+}
+
+@utility fill-figma-text-toolbar-disabled {
+  fill: var(--figma-color-text-toolbar-disabled);
+}
+
+@utility stroke-figma-text-toolbar-disabled {
+  stroke: var(--figma-color-text-toolbar-disabled);
+}
+
+@utility icon-figma-text-toolbar-disabled {
+  --color-icon: var(--figma-color-text-toolbar-disabled);
+}
+
+@utility text-figma-toolbar-hover {
+  color: var(--figma-color-text-toolbar-hover);
+}
+
+@utility bg-figma-text-toolbar-hover {
+  background-color: var(--figma-color-text-toolbar-hover);
+}
+
+@utility text-figma-text-toolbar-hover {
+  color: var(--figma-color-text-toolbar-hover);
+}
+
+@utility border-figma-text-toolbar-hover {
+  border-color: var(--figma-color-text-toolbar-hover);
+}
+
+@utility outline-figma-text-toolbar-hover {
+  outline-color: var(--figma-color-text-toolbar-hover);
+}
+
+@utility fill-figma-text-toolbar-hover {
+  fill: var(--figma-color-text-toolbar-hover);
+}
+
+@utility stroke-figma-text-toolbar-hover {
+  stroke: var(--figma-color-text-toolbar-hover);
+}
+
+@utility icon-figma-text-toolbar-hover {
+  --color-icon: var(--figma-color-text-toolbar-hover);
+}
+
+@utility text-figma-toolbar-ondisabled {
+  color: var(--figma-color-text-toolbar-ondisabled);
+}
+
+@utility bg-figma-text-toolbar-ondisabled {
+  background-color: var(--figma-color-text-toolbar-ondisabled);
+}
+
+@utility text-figma-text-toolbar-ondisabled {
+  color: var(--figma-color-text-toolbar-ondisabled);
+}
+
+@utility border-figma-text-toolbar-ondisabled {
+  border-color: var(--figma-color-text-toolbar-ondisabled);
+}
+
+@utility outline-figma-text-toolbar-ondisabled {
+  outline-color: var(--figma-color-text-toolbar-ondisabled);
+}
+
+@utility fill-figma-text-toolbar-ondisabled {
+  fill: var(--figma-color-text-toolbar-ondisabled);
+}
+
+@utility stroke-figma-text-toolbar-ondisabled {
+  stroke: var(--figma-color-text-toolbar-ondisabled);
+}
+
+@utility icon-figma-text-toolbar-ondisabled {
+  --color-icon: var(--figma-color-text-toolbar-ondisabled);
+}
+
+@utility text-figma-toolbar-onselected {
+  color: var(--figma-color-text-toolbar-onselected);
+}
+
+@utility bg-figma-text-toolbar-onselected {
+  background-color: var(--figma-color-text-toolbar-onselected);
+}
+
+@utility text-figma-text-toolbar-onselected {
+  color: var(--figma-color-text-toolbar-onselected);
+}
+
+@utility border-figma-text-toolbar-onselected {
+  border-color: var(--figma-color-text-toolbar-onselected);
+}
+
+@utility outline-figma-text-toolbar-onselected {
+  outline-color: var(--figma-color-text-toolbar-onselected);
+}
+
+@utility fill-figma-text-toolbar-onselected {
+  fill: var(--figma-color-text-toolbar-onselected);
+}
+
+@utility stroke-figma-text-toolbar-onselected {
+  stroke: var(--figma-color-text-toolbar-onselected);
+}
+
+@utility icon-figma-text-toolbar-onselected {
+  --color-icon: var(--figma-color-text-toolbar-onselected);
+}
+
+@utility text-figma-toolbar-secondary {
+  color: var(--figma-color-text-toolbar-secondary);
+}
+
+@utility bg-figma-text-toolbar-secondary {
+  background-color: var(--figma-color-text-toolbar-secondary);
+}
+
+@utility text-figma-text-toolbar-secondary {
+  color: var(--figma-color-text-toolbar-secondary);
+}
+
+@utility border-figma-text-toolbar-secondary {
+  border-color: var(--figma-color-text-toolbar-secondary);
+}
+
+@utility outline-figma-text-toolbar-secondary {
+  outline-color: var(--figma-color-text-toolbar-secondary);
+}
+
+@utility fill-figma-text-toolbar-secondary {
+  fill: var(--figma-color-text-toolbar-secondary);
+}
+
+@utility stroke-figma-text-toolbar-secondary {
+  stroke: var(--figma-color-text-toolbar-secondary);
+}
+
+@utility icon-figma-text-toolbar-secondary {
+  --color-icon: var(--figma-color-text-toolbar-secondary);
+}
+
+@utility text-figma-toolbar-secondary-hover {
+  color: var(--figma-color-text-toolbar-secondary-hover);
+}
+
+@utility bg-figma-text-toolbar-secondary-hover {
+  background-color: var(--figma-color-text-toolbar-secondary-hover);
+}
+
+@utility text-figma-text-toolbar-secondary-hover {
+  color: var(--figma-color-text-toolbar-secondary-hover);
+}
+
+@utility border-figma-text-toolbar-secondary-hover {
+  border-color: var(--figma-color-text-toolbar-secondary-hover);
+}
+
+@utility outline-figma-text-toolbar-secondary-hover {
+  outline-color: var(--figma-color-text-toolbar-secondary-hover);
+}
+
+@utility fill-figma-text-toolbar-secondary-hover {
+  fill: var(--figma-color-text-toolbar-secondary-hover);
+}
+
+@utility stroke-figma-text-toolbar-secondary-hover {
+  stroke: var(--figma-color-text-toolbar-secondary-hover);
+}
+
+@utility icon-figma-text-toolbar-secondary-hover {
+  --color-icon: var(--figma-color-text-toolbar-secondary-hover);
+}
+
+@utility text-figma-toolbar-selected {
+  color: var(--figma-color-text-toolbar-selected);
+}
+
+@utility bg-figma-text-toolbar-selected {
+  background-color: var(--figma-color-text-toolbar-selected);
+}
+
+@utility text-figma-text-toolbar-selected {
+  color: var(--figma-color-text-toolbar-selected);
+}
+
+@utility border-figma-text-toolbar-selected {
+  border-color: var(--figma-color-text-toolbar-selected);
+}
+
+@utility outline-figma-text-toolbar-selected {
+  outline-color: var(--figma-color-text-toolbar-selected);
+}
+
+@utility fill-figma-text-toolbar-selected {
+  fill: var(--figma-color-text-toolbar-selected);
+}
+
+@utility stroke-figma-text-toolbar-selected {
+  stroke: var(--figma-color-text-toolbar-selected);
+}
+
+@utility icon-figma-text-toolbar-selected {
+  --color-icon: var(--figma-color-text-toolbar-selected);
+}
+
+@utility text-figma-toolbar-selected-secondary {
+  color: var(--figma-color-text-toolbar-selected-secondary);
+}
+
+@utility bg-figma-text-toolbar-selected-secondary {
+  background-color: var(--figma-color-text-toolbar-selected-secondary);
+}
+
+@utility text-figma-text-toolbar-selected-secondary {
+  color: var(--figma-color-text-toolbar-selected-secondary);
+}
+
+@utility border-figma-text-toolbar-selected-secondary {
+  border-color: var(--figma-color-text-toolbar-selected-secondary);
+}
+
+@utility outline-figma-text-toolbar-selected-secondary {
+  outline-color: var(--figma-color-text-toolbar-selected-secondary);
+}
+
+@utility fill-figma-text-toolbar-selected-secondary {
+  fill: var(--figma-color-text-toolbar-selected-secondary);
+}
+
+@utility stroke-figma-text-toolbar-selected-secondary {
+  stroke: var(--figma-color-text-toolbar-selected-secondary);
+}
+
+@utility icon-figma-text-toolbar-selected-secondary {
+  --color-icon: var(--figma-color-text-toolbar-selected-secondary);
+}
+
+@utility text-figma-toolbar-selected-tertiary {
+  color: var(--figma-color-text-toolbar-selected-tertiary);
+}
+
+@utility bg-figma-text-toolbar-selected-tertiary {
+  background-color: var(--figma-color-text-toolbar-selected-tertiary);
+}
+
+@utility text-figma-text-toolbar-selected-tertiary {
+  color: var(--figma-color-text-toolbar-selected-tertiary);
+}
+
+@utility border-figma-text-toolbar-selected-tertiary {
+  border-color: var(--figma-color-text-toolbar-selected-tertiary);
+}
+
+@utility outline-figma-text-toolbar-selected-tertiary {
+  outline-color: var(--figma-color-text-toolbar-selected-tertiary);
+}
+
+@utility fill-figma-text-toolbar-selected-tertiary {
+  fill: var(--figma-color-text-toolbar-selected-tertiary);
+}
+
+@utility stroke-figma-text-toolbar-selected-tertiary {
+  stroke: var(--figma-color-text-toolbar-selected-tertiary);
+}
+
+@utility icon-figma-text-toolbar-selected-tertiary {
+  --color-icon: var(--figma-color-text-toolbar-selected-tertiary);
+}
+
+@utility text-figma-toolbar-tertiary {
+  color: var(--figma-color-text-toolbar-tertiary);
+}
+
+@utility bg-figma-text-toolbar-tertiary {
+  background-color: var(--figma-color-text-toolbar-tertiary);
+}
+
+@utility text-figma-text-toolbar-tertiary {
+  color: var(--figma-color-text-toolbar-tertiary);
+}
+
+@utility border-figma-text-toolbar-tertiary {
+  border-color: var(--figma-color-text-toolbar-tertiary);
+}
+
+@utility outline-figma-text-toolbar-tertiary {
+  outline-color: var(--figma-color-text-toolbar-tertiary);
+}
+
+@utility fill-figma-text-toolbar-tertiary {
+  fill: var(--figma-color-text-toolbar-tertiary);
+}
+
+@utility stroke-figma-text-toolbar-tertiary {
+  stroke: var(--figma-color-text-toolbar-tertiary);
+}
+
+@utility icon-figma-text-toolbar-tertiary {
+  --color-icon: var(--figma-color-text-toolbar-tertiary);
+}
+
+@utility text-figma-toolbar-tertiary-hover {
+  color: var(--figma-color-text-toolbar-tertiary-hover);
+}
+
+@utility bg-figma-text-toolbar-tertiary-hover {
+  background-color: var(--figma-color-text-toolbar-tertiary-hover);
+}
+
+@utility text-figma-text-toolbar-tertiary-hover {
+  color: var(--figma-color-text-toolbar-tertiary-hover);
+}
+
+@utility border-figma-text-toolbar-tertiary-hover {
+  border-color: var(--figma-color-text-toolbar-tertiary-hover);
+}
+
+@utility outline-figma-text-toolbar-tertiary-hover {
+  outline-color: var(--figma-color-text-toolbar-tertiary-hover);
+}
+
+@utility fill-figma-text-toolbar-tertiary-hover {
+  fill: var(--figma-color-text-toolbar-tertiary-hover);
+}
+
+@utility stroke-figma-text-toolbar-tertiary-hover {
+  stroke: var(--figma-color-text-toolbar-tertiary-hover);
+}
+
+@utility icon-figma-text-toolbar-tertiary-hover {
+  --color-icon: var(--figma-color-text-toolbar-tertiary-hover);
+}
+
+@utility text-figma-toolbar-warning {
+  color: var(--figma-color-text-toolbar-warning);
+}
+
+@utility bg-figma-text-toolbar-warning {
+  background-color: var(--figma-color-text-toolbar-warning);
+}
+
+@utility text-figma-text-toolbar-warning {
+  color: var(--figma-color-text-toolbar-warning);
+}
+
+@utility border-figma-text-toolbar-warning {
+  border-color: var(--figma-color-text-toolbar-warning);
+}
+
+@utility outline-figma-text-toolbar-warning {
+  outline-color: var(--figma-color-text-toolbar-warning);
+}
+
+@utility fill-figma-text-toolbar-warning {
+  fill: var(--figma-color-text-toolbar-warning);
+}
+
+@utility stroke-figma-text-toolbar-warning {
+  stroke: var(--figma-color-text-toolbar-warning);
+}
+
+@utility icon-figma-text-toolbar-warning {
+  --color-icon: var(--figma-color-text-toolbar-warning);
+}
+
+@utility text-figma-tooltip {
+  color: var(--figma-color-text-tooltip);
+}
+
+@utility bg-figma-text-tooltip {
+  background-color: var(--figma-color-text-tooltip);
+}
+
+@utility text-figma-text-tooltip {
+  color: var(--figma-color-text-tooltip);
+}
+
+@utility border-figma-text-tooltip {
+  border-color: var(--figma-color-text-tooltip);
+}
+
+@utility outline-figma-text-tooltip {
+  outline-color: var(--figma-color-text-tooltip);
+}
+
+@utility fill-figma-text-tooltip {
+  fill: var(--figma-color-text-tooltip);
+}
+
+@utility stroke-figma-text-tooltip {
+  stroke: var(--figma-color-text-tooltip);
+}
+
+@utility icon-figma-text-tooltip {
+  --color-icon: var(--figma-color-text-tooltip);
+}
+
+@utility text-figma-tooltip-danger {
+  color: var(--figma-color-text-tooltip-danger);
+}
+
+@utility bg-figma-text-tooltip-danger {
+  background-color: var(--figma-color-text-tooltip-danger);
+}
+
+@utility text-figma-text-tooltip-danger {
+  color: var(--figma-color-text-tooltip-danger);
+}
+
+@utility border-figma-text-tooltip-danger {
+  border-color: var(--figma-color-text-tooltip-danger);
+}
+
+@utility outline-figma-text-tooltip-danger {
+  outline-color: var(--figma-color-text-tooltip-danger);
+}
+
+@utility fill-figma-text-tooltip-danger {
+  fill: var(--figma-color-text-tooltip-danger);
+}
+
+@utility stroke-figma-text-tooltip-danger {
+  stroke: var(--figma-color-text-tooltip-danger);
+}
+
+@utility icon-figma-text-tooltip-danger {
+  --color-icon: var(--figma-color-text-tooltip-danger);
+}
+
+@utility text-figma-tooltip-disabled {
+  color: var(--figma-color-text-tooltip-disabled);
+}
+
+@utility bg-figma-text-tooltip-disabled {
+  background-color: var(--figma-color-text-tooltip-disabled);
+}
+
+@utility text-figma-text-tooltip-disabled {
+  color: var(--figma-color-text-tooltip-disabled);
+}
+
+@utility border-figma-text-tooltip-disabled {
+  border-color: var(--figma-color-text-tooltip-disabled);
+}
+
+@utility outline-figma-text-tooltip-disabled {
+  outline-color: var(--figma-color-text-tooltip-disabled);
+}
+
+@utility fill-figma-text-tooltip-disabled {
+  fill: var(--figma-color-text-tooltip-disabled);
+}
+
+@utility stroke-figma-text-tooltip-disabled {
+  stroke: var(--figma-color-text-tooltip-disabled);
+}
+
+@utility icon-figma-text-tooltip-disabled {
+  --color-icon: var(--figma-color-text-tooltip-disabled);
+}
+
+@utility text-figma-tooltip-hover {
+  color: var(--figma-color-text-tooltip-hover);
+}
+
+@utility bg-figma-text-tooltip-hover {
+  background-color: var(--figma-color-text-tooltip-hover);
+}
+
+@utility text-figma-text-tooltip-hover {
+  color: var(--figma-color-text-tooltip-hover);
+}
+
+@utility border-figma-text-tooltip-hover {
+  border-color: var(--figma-color-text-tooltip-hover);
+}
+
+@utility outline-figma-text-tooltip-hover {
+  outline-color: var(--figma-color-text-tooltip-hover);
+}
+
+@utility fill-figma-text-tooltip-hover {
+  fill: var(--figma-color-text-tooltip-hover);
+}
+
+@utility stroke-figma-text-tooltip-hover {
+  stroke: var(--figma-color-text-tooltip-hover);
+}
+
+@utility icon-figma-text-tooltip-hover {
+  --color-icon: var(--figma-color-text-tooltip-hover);
+}
+
+@utility text-figma-tooltip-ondisabled {
+  color: var(--figma-color-text-tooltip-ondisabled);
+}
+
+@utility bg-figma-text-tooltip-ondisabled {
+  background-color: var(--figma-color-text-tooltip-ondisabled);
+}
+
+@utility text-figma-text-tooltip-ondisabled {
+  color: var(--figma-color-text-tooltip-ondisabled);
+}
+
+@utility border-figma-text-tooltip-ondisabled {
+  border-color: var(--figma-color-text-tooltip-ondisabled);
+}
+
+@utility outline-figma-text-tooltip-ondisabled {
+  outline-color: var(--figma-color-text-tooltip-ondisabled);
+}
+
+@utility fill-figma-text-tooltip-ondisabled {
+  fill: var(--figma-color-text-tooltip-ondisabled);
+}
+
+@utility stroke-figma-text-tooltip-ondisabled {
+  stroke: var(--figma-color-text-tooltip-ondisabled);
+}
+
+@utility icon-figma-text-tooltip-ondisabled {
+  --color-icon: var(--figma-color-text-tooltip-ondisabled);
+}
+
+@utility text-figma-tooltip-onselected {
+  color: var(--figma-color-text-tooltip-onselected);
+}
+
+@utility bg-figma-text-tooltip-onselected {
+  background-color: var(--figma-color-text-tooltip-onselected);
+}
+
+@utility text-figma-text-tooltip-onselected {
+  color: var(--figma-color-text-tooltip-onselected);
+}
+
+@utility border-figma-text-tooltip-onselected {
+  border-color: var(--figma-color-text-tooltip-onselected);
+}
+
+@utility outline-figma-text-tooltip-onselected {
+  outline-color: var(--figma-color-text-tooltip-onselected);
+}
+
+@utility fill-figma-text-tooltip-onselected {
+  fill: var(--figma-color-text-tooltip-onselected);
+}
+
+@utility stroke-figma-text-tooltip-onselected {
+  stroke: var(--figma-color-text-tooltip-onselected);
+}
+
+@utility icon-figma-text-tooltip-onselected {
+  --color-icon: var(--figma-color-text-tooltip-onselected);
+}
+
+@utility text-figma-tooltip-secondary {
+  color: var(--figma-color-text-tooltip-secondary);
+}
+
+@utility bg-figma-text-tooltip-secondary {
+  background-color: var(--figma-color-text-tooltip-secondary);
+}
+
+@utility text-figma-text-tooltip-secondary {
+  color: var(--figma-color-text-tooltip-secondary);
+}
+
+@utility border-figma-text-tooltip-secondary {
+  border-color: var(--figma-color-text-tooltip-secondary);
+}
+
+@utility outline-figma-text-tooltip-secondary {
+  outline-color: var(--figma-color-text-tooltip-secondary);
+}
+
+@utility fill-figma-text-tooltip-secondary {
+  fill: var(--figma-color-text-tooltip-secondary);
+}
+
+@utility stroke-figma-text-tooltip-secondary {
+  stroke: var(--figma-color-text-tooltip-secondary);
+}
+
+@utility icon-figma-text-tooltip-secondary {
+  --color-icon: var(--figma-color-text-tooltip-secondary);
+}
+
+@utility text-figma-tooltip-secondary-hover {
+  color: var(--figma-color-text-tooltip-secondary-hover);
+}
+
+@utility bg-figma-text-tooltip-secondary-hover {
+  background-color: var(--figma-color-text-tooltip-secondary-hover);
+}
+
+@utility text-figma-text-tooltip-secondary-hover {
+  color: var(--figma-color-text-tooltip-secondary-hover);
+}
+
+@utility border-figma-text-tooltip-secondary-hover {
+  border-color: var(--figma-color-text-tooltip-secondary-hover);
+}
+
+@utility outline-figma-text-tooltip-secondary-hover {
+  outline-color: var(--figma-color-text-tooltip-secondary-hover);
+}
+
+@utility fill-figma-text-tooltip-secondary-hover {
+  fill: var(--figma-color-text-tooltip-secondary-hover);
+}
+
+@utility stroke-figma-text-tooltip-secondary-hover {
+  stroke: var(--figma-color-text-tooltip-secondary-hover);
+}
+
+@utility icon-figma-text-tooltip-secondary-hover {
+  --color-icon: var(--figma-color-text-tooltip-secondary-hover);
+}
+
+@utility text-figma-tooltip-selected {
+  color: var(--figma-color-text-tooltip-selected);
+}
+
+@utility bg-figma-text-tooltip-selected {
+  background-color: var(--figma-color-text-tooltip-selected);
+}
+
+@utility text-figma-text-tooltip-selected {
+  color: var(--figma-color-text-tooltip-selected);
+}
+
+@utility border-figma-text-tooltip-selected {
+  border-color: var(--figma-color-text-tooltip-selected);
+}
+
+@utility outline-figma-text-tooltip-selected {
+  outline-color: var(--figma-color-text-tooltip-selected);
+}
+
+@utility fill-figma-text-tooltip-selected {
+  fill: var(--figma-color-text-tooltip-selected);
+}
+
+@utility stroke-figma-text-tooltip-selected {
+  stroke: var(--figma-color-text-tooltip-selected);
+}
+
+@utility icon-figma-text-tooltip-selected {
+  --color-icon: var(--figma-color-text-tooltip-selected);
+}
+
+@utility text-figma-tooltip-selected-secondary {
+  color: var(--figma-color-text-tooltip-selected-secondary);
+}
+
+@utility bg-figma-text-tooltip-selected-secondary {
+  background-color: var(--figma-color-text-tooltip-selected-secondary);
+}
+
+@utility text-figma-text-tooltip-selected-secondary {
+  color: var(--figma-color-text-tooltip-selected-secondary);
+}
+
+@utility border-figma-text-tooltip-selected-secondary {
+  border-color: var(--figma-color-text-tooltip-selected-secondary);
+}
+
+@utility outline-figma-text-tooltip-selected-secondary {
+  outline-color: var(--figma-color-text-tooltip-selected-secondary);
+}
+
+@utility fill-figma-text-tooltip-selected-secondary {
+  fill: var(--figma-color-text-tooltip-selected-secondary);
+}
+
+@utility stroke-figma-text-tooltip-selected-secondary {
+  stroke: var(--figma-color-text-tooltip-selected-secondary);
+}
+
+@utility icon-figma-text-tooltip-selected-secondary {
+  --color-icon: var(--figma-color-text-tooltip-selected-secondary);
+}
+
+@utility text-figma-tooltip-selected-tertiary {
+  color: var(--figma-color-text-tooltip-selected-tertiary);
+}
+
+@utility bg-figma-text-tooltip-selected-tertiary {
+  background-color: var(--figma-color-text-tooltip-selected-tertiary);
+}
+
+@utility text-figma-text-tooltip-selected-tertiary {
+  color: var(--figma-color-text-tooltip-selected-tertiary);
+}
+
+@utility border-figma-text-tooltip-selected-tertiary {
+  border-color: var(--figma-color-text-tooltip-selected-tertiary);
+}
+
+@utility outline-figma-text-tooltip-selected-tertiary {
+  outline-color: var(--figma-color-text-tooltip-selected-tertiary);
+}
+
+@utility fill-figma-text-tooltip-selected-tertiary {
+  fill: var(--figma-color-text-tooltip-selected-tertiary);
+}
+
+@utility stroke-figma-text-tooltip-selected-tertiary {
+  stroke: var(--figma-color-text-tooltip-selected-tertiary);
+}
+
+@utility icon-figma-text-tooltip-selected-tertiary {
+  --color-icon: var(--figma-color-text-tooltip-selected-tertiary);
+}
+
+@utility text-figma-tooltip-tertiary {
+  color: var(--figma-color-text-tooltip-tertiary);
+}
+
+@utility bg-figma-text-tooltip-tertiary {
+  background-color: var(--figma-color-text-tooltip-tertiary);
+}
+
+@utility text-figma-text-tooltip-tertiary {
+  color: var(--figma-color-text-tooltip-tertiary);
+}
+
+@utility border-figma-text-tooltip-tertiary {
+  border-color: var(--figma-color-text-tooltip-tertiary);
+}
+
+@utility outline-figma-text-tooltip-tertiary {
+  outline-color: var(--figma-color-text-tooltip-tertiary);
+}
+
+@utility fill-figma-text-tooltip-tertiary {
+  fill: var(--figma-color-text-tooltip-tertiary);
+}
+
+@utility stroke-figma-text-tooltip-tertiary {
+  stroke: var(--figma-color-text-tooltip-tertiary);
+}
+
+@utility icon-figma-text-tooltip-tertiary {
+  --color-icon: var(--figma-color-text-tooltip-tertiary);
+}
+
+@utility text-figma-tooltip-tertiary-hover {
+  color: var(--figma-color-text-tooltip-tertiary-hover);
+}
+
+@utility bg-figma-text-tooltip-tertiary-hover {
+  background-color: var(--figma-color-text-tooltip-tertiary-hover);
+}
+
+@utility text-figma-text-tooltip-tertiary-hover {
+  color: var(--figma-color-text-tooltip-tertiary-hover);
+}
+
+@utility border-figma-text-tooltip-tertiary-hover {
+  border-color: var(--figma-color-text-tooltip-tertiary-hover);
+}
+
+@utility outline-figma-text-tooltip-tertiary-hover {
+  outline-color: var(--figma-color-text-tooltip-tertiary-hover);
+}
+
+@utility fill-figma-text-tooltip-tertiary-hover {
+  fill: var(--figma-color-text-tooltip-tertiary-hover);
+}
+
+@utility stroke-figma-text-tooltip-tertiary-hover {
+  stroke: var(--figma-color-text-tooltip-tertiary-hover);
+}
+
+@utility icon-figma-text-tooltip-tertiary-hover {
+  --color-icon: var(--figma-color-text-tooltip-tertiary-hover);
+}
+
+@utility text-figma-tooltip-warning {
+  color: var(--figma-color-text-tooltip-warning);
+}
+
+@utility bg-figma-text-tooltip-warning {
+  background-color: var(--figma-color-text-tooltip-warning);
+}
+
+@utility text-figma-text-tooltip-warning {
+  color: var(--figma-color-text-tooltip-warning);
+}
+
+@utility border-figma-text-tooltip-warning {
+  border-color: var(--figma-color-text-tooltip-warning);
+}
+
+@utility outline-figma-text-tooltip-warning {
+  outline-color: var(--figma-color-text-tooltip-warning);
+}
+
+@utility fill-figma-text-tooltip-warning {
+  fill: var(--figma-color-text-tooltip-warning);
+}
+
+@utility stroke-figma-text-tooltip-warning {
+  stroke: var(--figma-color-text-tooltip-warning);
+}
+
+@utility icon-figma-text-tooltip-warning {
+  --color-icon: var(--figma-color-text-tooltip-warning);
+}
+
+@utility text-figma-warning {
+  color: var(--figma-color-text-warning);
+}
+
+@utility bg-figma-text-warning {
+  background-color: var(--figma-color-text-warning);
+}
+
+@utility text-figma-text-warning {
+  color: var(--figma-color-text-warning);
+}
+
+@utility border-figma-text-warning {
+  border-color: var(--figma-color-text-warning);
+}
+
+@utility outline-figma-text-warning {
+  outline-color: var(--figma-color-text-warning);
+}
+
+@utility fill-figma-text-warning {
+  fill: var(--figma-color-text-warning);
+}
+
+@utility stroke-figma-text-warning {
+  stroke: var(--figma-color-text-warning);
+}
+
+@utility icon-figma-text-warning {
+  --color-icon: var(--figma-color-text-warning);
+}
+
+@utility text-figma-warning-secondary {
+  color: var(--figma-color-text-warning-secondary);
+}
+
+@utility bg-figma-text-warning-secondary {
+  background-color: var(--figma-color-text-warning-secondary);
+}
+
+@utility text-figma-text-warning-secondary {
+  color: var(--figma-color-text-warning-secondary);
+}
+
+@utility border-figma-text-warning-secondary {
+  border-color: var(--figma-color-text-warning-secondary);
+}
+
+@utility outline-figma-text-warning-secondary {
+  outline-color: var(--figma-color-text-warning-secondary);
+}
+
+@utility fill-figma-text-warning-secondary {
+  fill: var(--figma-color-text-warning-secondary);
+}
+
+@utility stroke-figma-text-warning-secondary {
+  stroke: var(--figma-color-text-warning-secondary);
+}
+
+@utility icon-figma-text-warning-secondary {
+  --color-icon: var(--figma-color-text-warning-secondary);
+}
+
+@utility text-figma-warning-tertiary {
+  color: var(--figma-color-text-warning-tertiary);
+}
+
+@utility bg-figma-text-warning-tertiary {
+  background-color: var(--figma-color-text-warning-tertiary);
+}
+
+@utility text-figma-text-warning-tertiary {
+  color: var(--figma-color-text-warning-tertiary);
+}
+
+@utility border-figma-text-warning-tertiary {
+  border-color: var(--figma-color-text-warning-tertiary);
+}
+
+@utility outline-figma-text-warning-tertiary {
+  outline-color: var(--figma-color-text-warning-tertiary);
+}
+
+@utility fill-figma-text-warning-tertiary {
+  fill: var(--figma-color-text-warning-tertiary);
+}
+
+@utility stroke-figma-text-warning-tertiary {
+  stroke: var(--figma-color-text-warning-tertiary);
+}
+
+@utility icon-figma-text-warning-tertiary {
+  --color-icon: var(--figma-color-text-warning-tertiary);
+}
+
+@utility accent-figma-brand {
+  accent-color: var(--figma-color-bg-brand);
+}
+
+@utility bg-figma-brand-5 {
+  background-color: color-mix(in srgb, var(--figma-color-bg-brand) 5%, transparent);
+}
+
+@utility bg-figma-brand-10 {
+  background-color: color-mix(in srgb, var(--figma-color-bg-brand) 10%, transparent);
+}
+
+@utility bg-figma-brand-70 {
+  background-color: color-mix(in srgb, var(--figma-color-bg-brand) 70%, transparent);
+}
+
+@utility bg-figma-elevated {
+  background-color: var(--figma-color-bg);
+}
+
+@utility bg-figma-hover-50 {
+  background-color: color-mix(in srgb, var(--figma-color-bg-hover) 50%, transparent);
+}
+
+@utility bg-figma-overlay {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+@utility fill-figma-elevated {
+  fill: var(--figma-color-bg);
+}
+
+@utility fill-figma-inverse {
+  fill: var(--figma-color-bg-inverse);
+}
+
+@utility bg-figma-bgtransparentsecondary {
+  background-color: var(--figma-color-bgtransparentsecondary);
+}
+
+@utility bg-figma-bgtransparent-secondary-hover {
+  background-color: var(--figma-color-bgtransparent-secondary-hover);
+}
+
+@utility bg-figma-bgtransparent-secondary-pressed {
+  background-color: var(--figma-color-bgtransparent-secondary-pressed);
+}
+
+@utility bg-figma-bghovertransparent {
+  background-color: var(--figma-color-bghovertransparent);
+}
+
+@utility bg-figma-multiplayerblue {
+  background-color: var(--figma-color-multiplayerblue);
+}
+
+@utility bg-figma-multiplayergreen {
+  background-color: var(--figma-color-multiplayergreen);
+}
+
+@utility bg-figma-multiplayergrey {
+  background-color: var(--figma-color-multiplayergrey);
+}
+
+@utility bg-figma-multiplayerpink {
+  background-color: var(--figma-color-multiplayerpink);
+}
+
+@utility bg-figma-multiplayerpurple {
+  background-color: var(--figma-color-multiplayerpurple);
+}
+
+@utility bg-figma-multiplayerred {
+  background-color: var(--figma-color-multiplayerred);
+}
+
+@utility bg-figma-multiplayeryellow {
+  background-color: var(--figma-color-multiplayeryellow);
+}
+
+@utility bg-figma-scrollbar {
+  background-color: var(--figma-color-scrollbar);
+}
+
+@utility bg-figma-texthighlight {
+  background-color: var(--figma-color-texthighlight);
+}
+
+@utility outline-figma-bordertranslucent {
+  outline-color: var(--figma-color-bordertranslucent);
+}
+
+@utility border-figma-bordertranslucent {
+  border-color: var(--figma-color-bordertranslucent);
+}
+
+@utility shadow-figma-focus-inset {
+  box-shadow: inset 0 0 0 2px var(--figma-color-border-onbrand-strong);
+}
+
+@utility text-figma-textonmultiplayerblue {
+  color: var(--figma-color-textonmultiplayerblue);
+}
+
+@utility text-figma-textonmultiplayergreen {
+  color: var(--figma-color-textonmultiplayergreen);
+}
+
+@utility text-figma-textonmultiplayergrey {
+  color: var(--figma-color-textonmultiplayergrey);
+}
+
+@utility text-figma-textonmultiplayerpink {
+  color: var(--figma-color-textonmultiplayerpink);
+}
+
+@utility text-figma-textonmultiplayerpurple {
+  color: var(--figma-color-textonmultiplayerpurple);
+}
+
+@utility text-figma-textonmultiplayerred {
+  color: var(--figma-color-textonmultiplayerred);
+}
+
+@utility text-figma-textonmultiplayeryellow {
+  color: var(--figma-color-textonmultiplayeryellow);
+}
+
+@utility outline-figma-transparent {
+  outline-color: transparent;
+}
+
+@utility ring-figma {
+  --tw-ring-color: var(--figma-color-border-selected);
+}
+
+@utility ring-offset-figma {
+  --tw-ring-offset-color: var(--figma-color-bg);
+}
diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts
index 1bae1c0..7b1f54e 100644
--- a/packages/theme/src/index.ts
+++ b/packages/theme/src/index.ts
@@ -1 +1 @@
-export * from './colors';
+export * from './theme';
diff --git a/packages/theme/src/theme/colors/devmode.ts b/packages/theme/src/theme/colors/devmode.ts
new file mode 100644
index 0000000..12ac60d
--- /dev/null
+++ b/packages/theme/src/theme/colors/devmode.ts
@@ -0,0 +1,10 @@
+import devModeDarkTokens from '../../../tokens/colors/devmode-dark.json';
+import devModeLightTokens from '../../../tokens/colors/devmode-light.json';
+import { toThemeTokenMap } from './from-tokens';
+
+export const DevModeLightThemeCSSVariables = toThemeTokenMap(devModeLightTokens);
+export const DevModeDarkThemeCSSVariables = toThemeTokenMap(devModeDarkTokens);
+
+export type DevModeThemeCSSVariables = typeof DevModeLightThemeCSSVariables &
+  typeof DevModeDarkThemeCSSVariables;
+export type DevModeThemeCSSVariableKey = keyof DevModeThemeCSSVariables;
diff --git a/packages/theme/src/theme/colors/figjam.ts b/packages/theme/src/theme/colors/figjam.ts
new file mode 100644
index 0000000..597e17d
--- /dev/null
+++ b/packages/theme/src/theme/colors/figjam.ts
@@ -0,0 +1,10 @@
+import figjamDarkTokens from '../../../tokens/colors/figjam-dark.json';
+import figjamLightTokens from '../../../tokens/colors/figjam-light.json';
+import { toThemeTokenMap } from './from-tokens';
+
+export const FigJamLightThemeCSSVariables = toThemeTokenMap(figjamLightTokens);
+export const FigJamDarkThemeCSSVariables = toThemeTokenMap(figjamDarkTokens);
+
+export type FigJamThemeCSSVariables = typeof FigJamLightThemeCSSVariables &
+  typeof FigJamDarkThemeCSSVariables;
+export type FigJamThemeCSSVariableKey = keyof FigJamThemeCSSVariables;
diff --git a/packages/theme/src/theme/colors/figma.ts b/packages/theme/src/theme/colors/figma.ts
new file mode 100644
index 0000000..5f276aa
--- /dev/null
+++ b/packages/theme/src/theme/colors/figma.ts
@@ -0,0 +1,13 @@
+import figmaDarkTokens from '../../../tokens/colors/figma-dark.json';
+import figmaLightTokens from '../../../tokens/colors/figma-light.json';
+import { toThemeTokenMap } from './from-tokens';
+
+// Derived from tokens/colors/figma-{light,dark}.json — the normalized import of
+// the Design file's `Light`/`Dark` modes. Complete per-mode maps (the former
+// mode-invariant shared block is folded in).
+export const FigmaLightThemeCSSVariables = toThemeTokenMap(figmaLightTokens);
+export const FigmaDarkThemeCSSVariables = toThemeTokenMap(figmaDarkTokens);
+
+export type FigmaThemeCSSVariables = typeof FigmaLightThemeCSSVariables &
+  typeof FigmaDarkThemeCSSVariables;
+export type FigmaThemeCSSVariableKey = keyof FigmaThemeCSSVariables;
diff --git a/packages/theme/src/theme/colors/from-tokens.ts b/packages/theme/src/theme/colors/from-tokens.ts
new file mode 100644
index 0000000..bf0d45c
--- /dev/null
+++ b/packages/theme/src/theme/colors/from-tokens.ts
@@ -0,0 +1,20 @@
+import type { ThemeTokenMap } from '../tokens';
+
+type NormalizedColorFile = Record<string, { value: string }>;
+
+type PrefixedThemeTokenMap<T> = {
+  [K in keyof T & string as `--figma-color-${K}`]: string;
+};
+
+/**
+ * `<web name> → --figma-color-<web name>` (ADR 0002: runtime names, not --color-*).
+ */
+export function toThemeTokenMap<T extends NormalizedColorFile>(
+  tokens: T,
+): PrefixedThemeTokenMap<T> {
+  return Object.fromEntries(
+    Object.entries(tokens).map(([name, token]) => [`--figma-color-${name}`, token.value]),
+  ) as PrefixedThemeTokenMap<T>;
+}
+
+export type { ThemeTokenMap };
diff --git a/packages/theme/src/theme/colors/helpers.ts b/packages/theme/src/theme/colors/helpers.ts
new file mode 100644
index 0000000..0012403
--- /dev/null
+++ b/packages/theme/src/theme/colors/helpers.ts
@@ -0,0 +1,299 @@
+import typography from '../../../tokens/typography.json';
+import {
+  DarkElevationCSSVariables,
+  LegacyElevationShadowVariables,
+  LightElevationCSSVariables,
+} from '../elevation-variables';
+import { SharedFoundationVariables } from '../shared-foundation-variables';
+import { DevModeDarkThemeCSSVariables, DevModeLightThemeCSSVariables } from './devmode';
+import { FigJamLightThemeCSSVariables, FigJamDarkThemeCSSVariables } from './figjam';
+import { FigmaLightThemeCSSVariables, FigmaDarkThemeCSSVariables } from './figma';
+import { SlidesDarkThemeCSSVariables, SlidesLightThemeCSSVariables } from './slides';
+import type { ThemeCSSVariableKey } from './types';
+
+function extractSharedScale(prefix: string, compareFn?: (left: string, right: string) => number) {
+  const scale = Object.keys(SharedFoundationVariables)
+    .filter((key) => key.startsWith(prefix))
+    .map((key) => key.replace(prefix, '').replace('\\.', '.'));
+
+  return compareFn ? scale.sort(compareFn) : scale;
+}
+
+function escapeThemeVariableSuffix(value: string) {
+  return value.replace(/\./g, '\\.');
+}
+
+function getSharedFoundationValue(variableName: keyof typeof SharedFoundationVariables) {
+  return SharedFoundationVariables[variableName];
+}
+
+function getSharedFoundationAliases() {
+  const fontWeightScale = extractSharedScale('--figma-font-weight-', (left, right) => {
+    return left.localeCompare(right);
+  });
+  // Style names come from tokens/typography.json, not a hardcoded list, so new
+  // Design file styles get utilities automatically.
+  const typographyScale = Object.keys(typography.styles);
+  const semanticTypographyScale = Object.keys(typography.styles);
+  // Non-default-weight styles get a --font-weight alias on their text utility.
+  const weightedTypographyScale = Object.entries(typography.styles)
+    .filter(([, style]) => style.fontWeight !== typography.weight.default)
+    .map(([name, style]) => [name, String(style.fontWeight)] as const);
+  const radiusScale = extractSharedScale('--figma-radius-', (left, right) => {
+    return left.localeCompare(right);
+  });
+  const spacingScale = extractSharedScale('--figma-space-', (left, right) => {
+    return parseFloat(left) - parseFloat(right);
+  });
+  const borderWidthScale = extractSharedScale('--figma-border-width-', (left, right) => {
+    return parseFloat(left) - parseFloat(right);
+  });
+  const durationScale = extractSharedScale('--figma-duration-', (left, right) => {
+    return parseFloat(left) - parseFloat(right);
+  });
+  const opacityScale = extractSharedScale('--figma-opacity-', (left, right) => {
+    return left.localeCompare(right);
+  });
+  const zIndexScale = extractSharedScale('--figma-z-index-', (left, right) => {
+    return left.localeCompare(right);
+  });
+
+  return {
+    '--font-figma': getSharedFoundationValue('--figma-font-family-default'),
+    '--font-figma-code': getSharedFoundationValue('--figma-font-family-code'),
+    ...Object.fromEntries(
+      fontWeightScale.map((suffix) => {
+        const escapedSuffix = escapeThemeVariableSuffix(suffix);
+        return [
+          `--font-weight-figma-${escapedSuffix}`,
+          getSharedFoundationValue(
+            `--figma-font-weight-${escapedSuffix}` as keyof typeof SharedFoundationVariables,
+          ),
+        ];
+      }),
+    ),
+    ...Object.fromEntries(
+      typographyScale.map((suffix) => {
+        const escapedSuffix = escapeThemeVariableSuffix(suffix);
+        return [
+          `--text-figma-${escapedSuffix}`,
+          getSharedFoundationValue(
+            `--figma-font-size-${escapedSuffix}` as keyof typeof SharedFoundationVariables,
+          ),
+        ];
+      }),
+    ),
+    ...Object.fromEntries(
+      typographyScale.map((suffix) => {
+        const escapedSuffix = escapeThemeVariableSuffix(suffix);
+        return [
+          `--leading-figma-${escapedSuffix}`,
+          getSharedFoundationValue(
+            `--figma-line-height-${escapedSuffix}` as keyof typeof SharedFoundationVariables,
+          ),
+        ];
+      }),
+    ),
+    ...Object.fromEntries(
+      typographyScale.map((suffix) => {
+        const escapedSuffix = escapeThemeVariableSuffix(suffix);
+        return [
+          `--text-figma-${escapedSuffix}--line-height`,
+          getSharedFoundationValue(
+            `--figma-line-height-${escapedSuffix}` as keyof typeof SharedFoundationVariables,
+          ),
+        ];
+      }),
+    ),
+    ...Object.fromEntries(
+      typographyScale.map((suffix) => {
+        const escapedSuffix = escapeThemeVariableSuffix(suffix);
+        return [
+          `--tracking-figma-${escapedSuffix}`,
+          getSharedFoundationValue(
+            `--figma-letter-spacing-${escapedSuffix}` as keyof typeof SharedFoundationVariables,
+          ),
+        ];
+      }),
+    ),
+    ...Object.fromEntries(
+      semanticTypographyScale.map((suffix) => {
+        return [
+          `--text-figma-${suffix}--letter-spacing`,
+          getSharedFoundationValue(
+            `--figma-letter-spacing-${suffix}` as keyof typeof SharedFoundationVariables,
+          ),
+        ];
+      }),
+    ),
+    ...Object.fromEntries(
+      weightedTypographyScale.map(([suffix, weight]) => {
+        return [`--text-figma-${suffix}--font-weight`, weight];
+      }),
+    ),
+    ...Object.fromEntries(
+      radiusScale.map((suffix) => {
+        const escapedSuffix = escapeThemeVariableSuffix(suffix);
+        return [
+          `--radius-figma-${escapedSuffix}`,
+          getSharedFoundationValue(
+            `--figma-radius-${escapedSuffix}` as keyof typeof SharedFoundationVariables,
+          ),
+        ];
+      }),
+    ),
+    ...Object.fromEntries(
+      spacingScale.map((suffix) => {
+        const escapedSuffix = escapeThemeVariableSuffix(suffix);
+        return [
+          `--spacing-figma-${escapedSuffix}`,
+          getSharedFoundationValue(
+            `--figma-space-${escapedSuffix}` as keyof typeof SharedFoundationVariables,
+          ),
+        ];
+      }),
+    ),
+    ...Object.fromEntries(
+      borderWidthScale.map((suffix) => {
+        const escapedSuffix = escapeThemeVariableSuffix(suffix);
+        return [
+          `--border-figma-${escapedSuffix}`,
+          getSharedFoundationValue(
+            `--figma-border-width-${escapedSuffix}` as keyof typeof SharedFoundationVariables,
+          ),
+        ];
+      }),
+    ),
+    ...Object.fromEntries(
+      durationScale.map((suffix) => {
+        const escapedSuffix = escapeThemeVariableSuffix(suffix);
+        return [
+          `--transition-duration-figma-${escapedSuffix}`,
+          getSharedFoundationValue(
+            `--figma-duration-${escapedSuffix}` as keyof typeof SharedFoundationVariables,
+          ),
+        ];
+      }),
+    ),
+    ...Object.fromEntries(
+      opacityScale.map((suffix) => {
+        const escapedSuffix = escapeThemeVariableSuffix(suffix);
+        return [
+          `--opacity-figma-${escapedSuffix}`,
+          getSharedFoundationValue(
+            `--figma-opacity-${escapedSuffix}` as keyof typeof SharedFoundationVariables,
+          ),
+        ];
+      }),
+    ),
+    ...Object.fromEntries(
+      zIndexScale.map((suffix) => {
+        const escapedSuffix = escapeThemeVariableSuffix(suffix);
+        return [
+          `--z-index-figma-${escapedSuffix}`,
+          getSharedFoundationValue(
+            `--figma-z-index-${escapedSuffix}` as keyof typeof SharedFoundationVariables,
+          ),
+        ];
+      }),
+    ),
+  };
+}
+
+function getInlineShadowAliases() {
+  const elevationLevels = ['100', '200', '300', '400', '500'] as const;
+  return {
+    ...Object.fromEntries(
+      elevationLevels.map((level) => [
+        `--shadow-figma-elevation-${level}`,
+        `var(--figma-elevation-${level})`,
+      ]),
+    ),
+    '--shadow-figma-tooltip': 'var(--figma-elevation-300)',
+    '--shadow-figma-menu': 'var(--figma-elevation-400)',
+    '--shadow-figma-modal': 'var(--figma-elevation-500)',
+    '--shadow-figma-slider': getSharedFoundationValue('--figma-shadow-slider'),
+    '--shadow-figma-hud': getSharedFoundationValue('--figma-shadow-hud'),
+  };
+}
+
+export function serializeThemeColorPreflightDeclarations(
+  theme: Record<ThemeCSSVariableKey, string>,
+) {
+  return Object.entries(theme)
+    .filter(([name]) => name.startsWith('--figma-color-'))
+    .map(([name, value]) => {
+      return `${name.replace('--figma-color', '--color')}: var(${name}, ${value})`;
+    })
+    .join(';');
+}
+
+export function serializeCSSVariableDeclarations(theme: Record<string, string>) {
+  return Object.entries(theme)
+    .map(([name, value]) => {
+      return `  ${name}: ${value};`;
+    })
+    .join('\n');
+}
+
+export type ThemeVariablesType = 'figma' | 'figjam' | 'devmode' | 'slides';
+
+const EDITOR_MODES: Record<
+  Exclude<ThemeVariablesType, 'figma'>,
+  { light: Record<string, string>; dark: Record<string, string> }
+> = {
+  figjam: { light: FigJamLightThemeCSSVariables, dark: FigJamDarkThemeCSSVariables },
+  devmode: { light: DevModeLightThemeCSSVariables, dark: DevModeDarkThemeCSSVariables },
+  slides: { light: SlidesLightThemeCSSVariables, dark: SlidesDarkThemeCSSVariables },
+};
+
+/**
+ * Selector model (docs/architecture.md §3.3): the editor adds figma-light /
+ * figma-dark to <html>; the consumer adds the editor-type class. `:root` only
+ * appears on the standalone entry's light block.
+ */
+export function generateThemeVariablesCSS(type: ThemeVariablesType, standalone = false) {
+  const sharedFoundationVariablesCSS = `@theme {
+${serializeCSSVariableDeclarations({ ...SharedFoundationVariables, ...getSharedFoundationAliases() })}
+}
+
+@theme inline {
+${serializeCSSVariableDeclarations(getInlineShadowAliases())}
+}`;
+
+  const lightElevation = { ...LightElevationCSSVariables, ...LegacyElevationShadowVariables };
+  const darkElevation = { ...DarkElevationCSSVariables, ...LegacyElevationShadowVariables };
+
+  if (type === 'figma') {
+    return `${sharedFoundationVariablesCSS}
+
+:root, html.figma-light, .figma-light {
+${serializeCSSVariableDeclarations({
+  ...FigmaLightThemeCSSVariables,
+  ...lightElevation,
+})}
+}
+
+html.figma-dark, .figma-dark {
+${serializeCSSVariableDeclarations({
+  ...FigmaDarkThemeCSSVariables,
+  ...darkElevation,
+})}
+}`;
+  }
+
+  const { light, dark } = EDITOR_MODES[type];
+  const lightSelectors = standalone
+    ? `:root, .${type}, .figma-light .${type}, .${type} .figma-light, .${type}.figma-light`
+    : `.${type}, .figma-light .${type}, .${type} .figma-light, .${type}.figma-light`;
+
+  return `${sharedFoundationVariablesCSS}
+
+${lightSelectors} {
+${serializeCSSVariableDeclarations({ ...light, ...lightElevation })}
+}
+
+.figma-dark .${type}, .${type} .figma-dark, .${type}.figma-dark {
+${serializeCSSVariableDeclarations({ ...dark, ...darkElevation })}
+}`;
+}
diff --git a/packages/theme/src/theme/colors/index.ts b/packages/theme/src/theme/colors/index.ts
new file mode 100644
index 0000000..4aae8f4
--- /dev/null
+++ b/packages/theme/src/theme/colors/index.ts
@@ -0,0 +1,6 @@
+export * from './figma';
+export * from './figjam';
+export * from './devmode';
+export * from './slides';
+export * from './helpers';
+export * from './types';
diff --git a/packages/theme/src/theme/colors/slides.ts b/packages/theme/src/theme/colors/slides.ts
new file mode 100644
index 0000000..428f012
--- /dev/null
+++ b/packages/theme/src/theme/colors/slides.ts
@@ -0,0 +1,10 @@
+import slidesDarkTokens from '../../../tokens/colors/slides-dark.json';
+import slidesLightTokens from '../../../tokens/colors/slides-light.json';
+import { toThemeTokenMap } from './from-tokens';
+
+export const SlidesLightThemeCSSVariables = toThemeTokenMap(slidesLightTokens);
+export const SlidesDarkThemeCSSVariables = toThemeTokenMap(slidesDarkTokens);
+
+export type SlidesThemeCSSVariables = typeof SlidesLightThemeCSSVariables &
+  typeof SlidesDarkThemeCSSVariables;
+export type SlidesThemeCSSVariableKey = keyof SlidesThemeCSSVariables;
diff --git a/packages/theme/src/theme/colors/types.ts b/packages/theme/src/theme/colors/types.ts
new file mode 100644
index 0000000..01eaf1d
--- /dev/null
+++ b/packages/theme/src/theme/colors/types.ts
@@ -0,0 +1,7 @@
+import type { ThemeColorScope } from '../tokens';
+import type { FigmaThemeCSSVariableKey } from './figma';
+
+// All eight mode files publish the same key set, so the union collapses to one.
+export type ThemeCSSVariableKey = FigmaThemeCSSVariableKey;
+
+export type { ThemeColorScope };
diff --git a/packages/theme/src/theme/elevation-variables.ts b/packages/theme/src/theme/elevation-variables.ts
new file mode 100644
index 0000000..465c206
--- /dev/null
+++ b/packages/theme/src/theme/elevation-variables.ts
@@ -0,0 +1,25 @@
+import elevation from '../../tokens/elevation.json';
+import extensions from '../../tokens/extensions.json';
+
+// UI3 elevation scale. Emitted inside the per-theme blocks (NOT @theme) so
+// `var(--figma-elevation-*)` resolves against the nearest
+// .figma-light/.figma-dark/.figjam scope. Values live in tokens/elevation.json
+// because a variables export does not contain effect styles (ADR 0003).
+
+function prefixed<T extends Record<string, string>>(variables: T, prefix: string) {
+  return Object.fromEntries(
+    Object.entries(variables).map(([name, value]) => [`${prefix}${name}`, value]),
+  ) as Record<string, string>;
+}
+
+export const LightElevationCSSVariables = prefixed(elevation.light, '--figma-elevation-');
+
+export const DarkElevationCSSVariables = prefixed(elevation.dark, '--figma-elevation-');
+
+// Legacy shadow vars stay theme-scoped so var(--figma-elevation-*) resolves per theme.
+export const LegacyElevationShadowVariables = prefixed(
+  Object.fromEntries(
+    Object.entries(extensions['shadow-aliases']).map(([name, entry]) => [name, entry.value]),
+  ),
+  '--figma-shadow-',
+);
diff --git a/packages/theme/src/theme/generate-css-files.ts b/packages/theme/src/theme/generate-css-files.ts
new file mode 100644
index 0000000..8d1c47c
--- /dev/null
+++ b/packages/theme/src/theme/generate-css-files.ts
@@ -0,0 +1,46 @@
+import { mkdir, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { generateThemeVariablesCSS } from './colors';
+import { THEME_PREFLIGHT_CSS } from './preflight';
+import { generateThemeUtilitiesCSS } from './utilities';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const cssDirectory = path.resolve(__dirname, '../css');
+
+async function writeCSSFile(fileName: string, contents: string) {
+  await mkdir(cssDirectory, { recursive: true });
+  await writeFile(path.join(cssDirectory, fileName), `${contents}\n`);
+}
+
+async function main() {
+  await Promise.all([
+    writeCSSFile('utilities.css', generateThemeUtilitiesCSS()),
+    writeCSSFile('figma-theme.css', generateThemeVariablesCSS('figma')),
+    writeCSSFile('figjam-theme.css', generateThemeVariablesCSS('figjam')),
+    writeCSSFile('devmode-theme.css', generateThemeVariablesCSS('devmode')),
+    writeCSSFile('slides-theme.css', generateThemeVariablesCSS('slides')),
+    writeCSSFile('preflight.css', THEME_PREFLIGHT_CSS),
+    // Standalone entries duplicate their editor's light block under :root.
+    writeCSSFile(
+      'figma.css',
+      `@import './preflight.css' layer(base);\n@import './figma-theme.css';\n@import './utilities.css';`,
+    ),
+    writeCSSFile('figjam.css', editorEntry('figjam')),
+    writeCSSFile('devmode.css', editorEntry('devmode')),
+    writeCSSFile('slides.css', editorEntry('slides')),
+    writeCSSFile(
+      'index.css',
+      `@import './preflight.css' layer(base);\n@import './figma-theme.css';\n@import './figjam-theme.css';\n@import './devmode-theme.css';\n@import './slides-theme.css';\n@import './utilities.css';\n@custom-variant dark (&:where(.figma-dark, .figma-dark *));`,
+    ),
+  ]);
+}
+
+// Standalone entries embed a :root variant of their editor's light block so an
+// unthemed plugin gets that editor's light mode. Imports come first (CSS rule).
+function editorEntry(type: 'figjam' | 'devmode' | 'slides') {
+  return `@import './preflight.css' layer(base);\n@import './utilities.css';\n${generateThemeVariablesCSS(type, true)}`;
+}
+
+await main();
diff --git a/packages/theme/src/theme/index.ts b/packages/theme/src/theme/index.ts
new file mode 100644
index 0000000..ef0d59a
--- /dev/null
+++ b/packages/theme/src/theme/index.ts
@@ -0,0 +1,6 @@
+export * from './colors';
+export * from './tokens';
+export * from './preflight';
+export * from './elevation-variables';
+export * from './shared-foundation-variables';
+export * from './utilities';
diff --git a/packages/theme/src/theme/preflight.ts b/packages/theme/src/theme/preflight.ts
new file mode 100644
index 0000000..431bb54
--- /dev/null
+++ b/packages/theme/src/theme/preflight.ts
@@ -0,0 +1,80 @@
+export const THEME_PREFLIGHT_CSS = `
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: currentColor;
+}
+
+.figma-dark {
+  color-scheme: dark;
+}
+
+html,
+body {
+  height: 100vh;
+  width: 100vw;
+  margin: 0;
+  padding: 0;
+  color: var(--figma-color-text);
+  background-color: var(--figma-color-bg);
+  font-family: "Inter", "Helvetica", sans-serif;
+  line-height: 16px;
+  font-weight: 400;
+}
+
+/* Keep rem-based theme tokens anchored to the default 16px root size;
+   the 11px Figma UI font-size applies to body content only. */
+body {
+  font-size: 11px;
+}
+
+::selection {
+  background-color: var(--figma-color-bg-onselected);
+}
+
+div,
+span {
+  cursor: default;
+  user-select: none;
+}
+
+h1,
+h2,
+h3 {
+  margin: 0;
+  font-weight: inherit;
+}
+
+button {
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  font: inherit;
+  outline: 0;
+}
+
+hr {
+  border: 0;
+  margin: 0;
+}
+
+label {
+  display: block;
+}
+
+input,
+textarea {
+  padding: 0;
+  margin: 0;
+  cursor: default;
+  font: inherit;
+  outline: 0;
+}
+
+svg {
+  display: block;
+}
+` as const;
diff --git a/packages/theme/src/theme/shared-foundation-variables.ts b/packages/theme/src/theme/shared-foundation-variables.ts
new file mode 100644
index 0000000..425fa4c
--- /dev/null
+++ b/packages/theme/src/theme/shared-foundation-variables.ts
@@ -0,0 +1,98 @@
+import extensions from '../../tokens/extensions.json';
+import sizing from '../../tokens/sizing.json';
+import typography from '../../tokens/typography.json';
+
+// The committed token JSON under ../../tokens/ is the only source; this map
+// (and everything downstream) is derived from it. See ADR 0003.
+
+function pxToRem(px: number) {
+  if (px === 0) {
+    return '0';
+  }
+  const rem = Number((px / 16).toFixed(5));
+  return `${rem}`.replace(/^(-?)0\./, '$1.') + 'rem';
+}
+
+/**
+ * Absolute letter-spacing (rem) for a style whose tracking is an em fraction.
+ */
+function letterSpacingRem(letterSpacingEm: number, fontSizePx: number) {
+  const rem = Number(((letterSpacingEm * fontSizePx) / 16).toFixed(5));
+  if (rem === 0) {
+    return '0';
+  }
+  return `${rem}`.replace(/^(-?)0\./, '$1.') + 'rem';
+}
+
+const RADIUS_NAME_TO_SUFFIX: Record<string, string> = {
+  none: 'none',
+  small: 'sm',
+  medium: 'md',
+  large: 'lg',
+  full: 'full',
+};
+
+function spaceKey(suffix: string) {
+  return `--figma-space-${suffix.replace(/\./g, '\\.')}` as const;
+}
+
+export const SharedFoundationVariables: Record<string, string> = {
+  '--figma-font-family-default': extensions['font-family'].default.value,
+  '--figma-font-family-code': extensions['font-family'].code.value,
+  '--figma-font-family-display': extensions['font-family'].display.value,
+  ...Object.fromEntries(
+    Object.entries(typography.weight).map(([name, weight]) => [
+      `--figma-font-weight-${name}`,
+      String(weight),
+    ]),
+  ),
+  ...Object.fromEntries(
+    Object.entries(typography.styles).flatMap(([name, style]) => [
+      [`--figma-font-size-${name}`, pxToRem(style.fontSize)],
+      [`--figma-line-height-${name}`, pxToRem(style.lineHeight)],
+      [`--figma-letter-spacing-${name}`, letterSpacingRem(style.letterSpacing, style.fontSize)],
+    ]),
+  ),
+  ...Object.fromEntries(
+    Object.entries(sizing.radius).map(([name, px]) => [
+      `--figma-radius-${RADIUS_NAME_TO_SUFFIX[name] ?? name}`,
+      name === 'full' ? `${px}px` : pxToRem(px),
+    ]),
+  ),
+  ...Object.fromEntries(
+    [
+      ...Object.entries(sizing.space).map(([name, px]) => [name, pxToRem(px)] as const),
+      ...Object.entries(extensions.space).map(([name, entry]) => [name, entry.value] as const),
+    ]
+      .sort(([left], [right]) => parseFloat(left) - parseFloat(right))
+      .map(([name, value]) => [spaceKey(name), value]),
+  ),
+  ...Object.fromEntries(
+    Object.entries(extensions['border-width']).map(([name, entry]) => [
+      `--figma-border-width-${name}`,
+      entry.value,
+    ]),
+  ),
+  ...Object.fromEntries(
+    Object.entries(extensions.duration).map(([name, entry]) => [
+      `--figma-duration-${name}`,
+      entry.value,
+    ]),
+  ),
+  ...Object.fromEntries(
+    Object.entries(extensions.opacity).map(([name, entry]) => [
+      `--figma-opacity-${name}`,
+      entry.value,
+    ]),
+  ),
+  ...Object.fromEntries(
+    Object.entries(extensions['z-index']).map(([name, entry]) => [
+      `--figma-z-index-${name}`,
+      entry.value,
+    ]),
+  ),
+  '--figma-shadow-slider': extensions['shadow-slider'].value,
+  '--figma-shadow-hud': extensions['shadow-hud'].value,
+};
+
+export type SharedFoundationVariableKey = keyof typeof SharedFoundationVariables;
diff --git a/packages/theme/src/theme/tokens.ts b/packages/theme/src/theme/tokens.ts
new file mode 100644
index 0000000..47a7c17
--- /dev/null
+++ b/packages/theme/src/theme/tokens.ts
@@ -0,0 +1,63 @@
+import { FigJamLightThemeCSSVariables } from './colors/figjam';
+import { FigmaDarkThemeCSSVariables, FigmaLightThemeCSSVariables } from './colors/figma';
+
+const THEME_COLOR_SCOPES = ['bg', 'border', 'icon', 'text'] as const;
+
+export type ThemeColorScope = (typeof THEME_COLOR_SCOPES)[number];
+
+export type ThemeTokenName = `--figma-color-${string}`;
+
+export type ThemeTokenMap = Record<ThemeTokenName, string>;
+
+export type ThemeVariant = 'figma' | 'figjam';
+
+export type RuntimeThemeVariant = 'figma-light' | 'figma-dark' | 'figjam';
+
+export type ThemeTokenSource = {
+  themes: Record<RuntimeThemeVariant, ThemeTokenMap>;
+};
+
+export type ParsedThemeTokenName = {
+  path: string[];
+  scope: ThemeColorScope;
+  suffix: string;
+};
+
+export function isThemeColorScope(value: string): value is ThemeColorScope {
+  return THEME_COLOR_SCOPES.includes(value as ThemeColorScope);
+}
+
+export function isThemeTokenName(value: string): value is ThemeTokenName {
+  return value.startsWith('--figma-color-');
+}
+
+export function parseThemeTokenName(value: string): ParsedThemeTokenName | null {
+  if (!isThemeTokenName(value)) {
+    return null;
+  }
+
+  const path = value.replace('--figma-color-', '').split('-').filter(Boolean);
+  const [scope, ...suffixSegments] = path;
+
+  if (!scope || !isThemeColorScope(scope)) {
+    return null;
+  }
+
+  return {
+    path,
+    scope,
+    suffix: suffixSegments.join('-'),
+  };
+}
+
+/**
+ * Theme source backed by the normalized color JSON in ../../tokens/colors/.
+ * Each mode map is complete — the old shared/mode-invariant split is gone.
+ */
+export const docsThemeTokenSource: ThemeTokenSource = {
+  themes: {
+    'figma-light': FigmaLightThemeCSSVariables as ThemeTokenMap,
+    'figma-dark': FigmaDarkThemeCSSVariables as ThemeTokenMap,
+    figjam: FigJamLightThemeCSSVariables as ThemeTokenMap,
+  },
+};
diff --git a/packages/theme/src/theme/utilities.ts b/packages/theme/src/theme/utilities.ts
new file mode 100644
index 0000000..e4fac12
--- /dev/null
+++ b/packages/theme/src/theme/utilities.ts
@@ -0,0 +1,134 @@
+import {
+  docsThemeTokenSource,
+  parseThemeTokenName,
+  type ThemeColorScope,
+  type ThemeTokenName,
+} from './tokens';
+import { semanticUtilities } from './utility-contract';
+
+// Every published token gets utilities through the family rules; the per-mode
+// maps are complete (menu/tooltip chrome included), so there is no separate
+// local token source anymore.
+const themeVariableNames = Array.from(
+  new Set(Object.values(docsThemeTokenSource.themes).flatMap((tokens) => Object.keys(tokens))),
+).sort() as ThemeTokenName[];
+
+type UtilityDefinition = {
+  property: string;
+  utilityName: string;
+  withScope: boolean;
+};
+
+const UTILITY_PROPERTIES: Record<string, string> = {
+  bg: 'background-color',
+  text: 'color',
+  border: 'border-color',
+  outline: 'outline-color',
+  fill: 'fill',
+  stroke: 'stroke',
+};
+
+const UTILITY_NAMES = ['bg', 'text', 'border', 'outline', 'fill', 'stroke'] as const;
+
+/**
+ * Every color token emits the full cross-scope family:
+ * `<utility>-figma-<scope>[-suffix]` -> `property: var(--figma-color-<scope>[-suffix])`,
+ * plus the scope's own unscoped name (`bg-figma-*`, `text-figma-*`, `border-figma-*`).
+ */
+const scopedUtilityDefinitions: Record<ThemeColorScope, UtilityDefinition[]> = {
+  bg: [
+    { utilityName: 'bg', property: 'background-color', withScope: false },
+    ...UTILITY_NAMES.map((utilityName) => ({
+      utilityName,
+      property: UTILITY_PROPERTIES[utilityName],
+      withScope: true,
+    })),
+    { utilityName: 'icon', property: '--color-icon', withScope: true },
+  ],
+  border: [
+    { utilityName: 'border', property: 'border-color', withScope: false },
+    ...UTILITY_NAMES.map((utilityName) => ({
+      utilityName,
+      property: UTILITY_PROPERTIES[utilityName],
+      withScope: true,
+    })),
+    { utilityName: 'icon', property: '--color-icon', withScope: true },
+  ],
+  icon: [
+    ...UTILITY_NAMES.map((utilityName) => ({
+      utilityName,
+      property: UTILITY_PROPERTIES[utilityName],
+      withScope: true,
+    })),
+    { utilityName: 'icon', property: '--color-icon', withScope: false },
+  ],
+  text: [
+    { utilityName: 'text', property: 'color', withScope: false },
+    ...UTILITY_NAMES.map((utilityName) => ({
+      utilityName,
+      property: UTILITY_PROPERTIES[utilityName],
+      withScope: true,
+    })),
+    { utilityName: 'icon', property: '--color-icon', withScope: true },
+  ],
+};
+
+function toUtilityBlock(name: string, declarations: string | string[]) {
+  const normalizedDeclarations = Array.isArray(declarations) ? declarations : [declarations];
+
+  return `@utility ${name} {
+${normalizedDeclarations.map((declaration) => `  ${declaration}`).join('\n')}
+}`;
+}
+
+function toUtilityName(
+  utilityName: string,
+  scope: ThemeColorScope,
+  suffix: string,
+  withScope: boolean,
+) {
+  const parts = [utilityName, 'figma'];
+
+  if (withScope) {
+    parts.push(scope);
+  }
+
+  if (suffix) {
+    parts.push(suffix);
+  }
+
+  return parts.join('-');
+}
+
+function generateColorUtilities() {
+  return themeVariableNames
+    .flatMap((variableName) => {
+      const descriptor = parseThemeTokenName(variableName);
+
+      if (!descriptor) {
+        return [];
+      }
+
+      return scopedUtilityDefinitions[descriptor.scope].map((definition) => {
+        const utilityClassName = toUtilityName(
+          definition.utilityName,
+          descriptor.scope,
+          descriptor.suffix,
+          definition.withScope,
+        );
+
+        return toUtilityBlock(utilityClassName, `${definition.property}: var(${variableName});`);
+      });
+    })
+    .join('\n\n');
+}
+
+function generateSemanticUtilities() {
+  return Object.entries(semanticUtilities)
+    .map(([utilityName, declaration]) => toUtilityBlock(utilityName, declaration))
+    .join('\n\n');
+}
+
+export function generateThemeUtilitiesCSS() {
+  return [generateColorUtilities(), generateSemanticUtilities()].join('\n\n');
+}
diff --git a/packages/theme/src/theme/utility-contract.ts b/packages/theme/src/theme/utility-contract.ts
new file mode 100644
index 0000000..734aee9
--- /dev/null
+++ b/packages/theme/src/theme/utility-contract.ts
@@ -0,0 +1,45 @@
+export const semanticUtilities = {
+  'accent-figma-brand': 'accent-color: var(--figma-color-bg-brand);',
+  'bg-figma-brand-5':
+    'background-color: color-mix(in srgb, var(--figma-color-bg-brand) 5%, transparent);',
+  'bg-figma-brand-10':
+    'background-color: color-mix(in srgb, var(--figma-color-bg-brand) 10%, transparent);',
+  'bg-figma-brand-70':
+    'background-color: color-mix(in srgb, var(--figma-color-bg-brand) 70%, transparent);',
+  // `bg-figma-border` is generated by the cross-scope family (border scope -> bg).
+  'bg-figma-elevated': 'background-color: var(--figma-color-bg);',
+  'bg-figma-hover-50':
+    'background-color: color-mix(in srgb, var(--figma-color-bg-hover) 50%, transparent);',
+  'bg-figma-overlay': 'background-color: rgba(0, 0, 0, 0.5);',
+  'fill-figma-elevated': 'fill: var(--figma-color-bg);',
+  'fill-figma-inverse': 'fill: var(--figma-color-bg-inverse);',
+  'bg-figma-bgtransparentsecondary': 'background-color: var(--figma-color-bgtransparentsecondary);',
+  'bg-figma-bgtransparent-secondary-hover':
+    'background-color: var(--figma-color-bgtransparent-secondary-hover);',
+  'bg-figma-bgtransparent-secondary-pressed':
+    'background-color: var(--figma-color-bgtransparent-secondary-pressed);',
+  'bg-figma-bghovertransparent': 'background-color: var(--figma-color-bghovertransparent);',
+  'bg-figma-multiplayerblue': 'background-color: var(--figma-color-multiplayerblue);',
+  'bg-figma-multiplayergreen': 'background-color: var(--figma-color-multiplayergreen);',
+  'bg-figma-multiplayergrey': 'background-color: var(--figma-color-multiplayergrey);',
+  'bg-figma-multiplayerpink': 'background-color: var(--figma-color-multiplayerpink);',
+  'bg-figma-multiplayerpurple': 'background-color: var(--figma-color-multiplayerpurple);',
+  'bg-figma-multiplayerred': 'background-color: var(--figma-color-multiplayerred);',
+  'bg-figma-multiplayeryellow': 'background-color: var(--figma-color-multiplayeryellow);',
+  'bg-figma-scrollbar': 'background-color: var(--figma-color-scrollbar);',
+  'bg-figma-texthighlight': 'background-color: var(--figma-color-texthighlight);',
+  'outline-figma-bordertranslucent': 'outline-color: var(--figma-color-bordertranslucent);',
+  'border-figma-bordertranslucent': 'border-color: var(--figma-color-bordertranslucent);',
+  'shadow-figma-focus-inset':
+    'box-shadow: inset 0 0 0 2px var(--figma-color-border-onbrand-strong);',
+  'text-figma-textonmultiplayerblue': 'color: var(--figma-color-textonmultiplayerblue);',
+  'text-figma-textonmultiplayergreen': 'color: var(--figma-color-textonmultiplayergreen);',
+  'text-figma-textonmultiplayergrey': 'color: var(--figma-color-textonmultiplayergrey);',
+  'text-figma-textonmultiplayerpink': 'color: var(--figma-color-textonmultiplayerpink);',
+  'text-figma-textonmultiplayerpurple': 'color: var(--figma-color-textonmultiplayerpurple);',
+  'text-figma-textonmultiplayerred': 'color: var(--figma-color-textonmultiplayerred);',
+  'text-figma-textonmultiplayeryellow': 'color: var(--figma-color-textonmultiplayeryellow);',
+  'outline-figma-transparent': 'outline-color: transparent;',
+  'ring-figma': '--tw-ring-color: var(--figma-color-border-selected);',
+  'ring-offset-figma': '--tw-ring-offset-color: var(--figma-color-bg);',
+} as const;
diff --git a/packages/theme/src/unocss/index.ts b/packages/theme/src/unocss/index.ts
deleted file mode 100644
index e584ff7..0000000
--- a/packages/theme/src/unocss/index.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { definePreset } from 'unocss';
-
-import { generateCSSVariables } from '../colors';
-import { THEME_BASE_CSS } from '../constants';
-
-import { rules } from './rules';
-
-export interface PresetFigmaOptions {
-  /**
-   * Whether to generate preflights for the figma theme
-   * @default 'figma'
-   */
-  preflight?: 'figma' | 'figjam' | 'all' | false;
-}
-
-/**
- * Figma theme css rules for unocss preset
- */
-export const presetFigmaTheme = definePreset((options: PresetFigmaOptions = {}) => {
-  const { preflight = 'figma' } = options;
-  return {
-    name: 'unocss-preset-figma-theme',
-    rules,
-    preflights: typeof preflight === 'string' && ['figma', 'figjam', 'all'].includes(preflight)
-      ? [
-          {
-            layer: 'preflights',
-            async getCSS() {
-              if (preflight === 'all') {
-                return [generateCSSVariables('figma'), generateCSSVariables('figjam'), THEME_BASE_CSS].join('\n');
-              }
-
-              return [generateCSSVariables(preflight), THEME_BASE_CSS].join('\n');
-            },
-          },
-        ]
-      : [],
-  };
-});
-
-export default presetFigmaTheme;
diff --git a/packages/theme/src/unocss/rules.ts b/packages/theme/src/unocss/rules.ts
deleted file mode 100644
index 4bad39f..0000000
--- a/packages/theme/src/unocss/rules.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import type { Rule } from '@unocss/core';
-
-import {
-  BaseThemeCSSVariables,
-  FigmaLightThemeCSSVariables,
-  type ThemeCSSVariableKey,
-  type ThemeColorScope,
-} from '../colors';
-
-const variables = Object.keys({
-  ...BaseThemeCSSVariables,
-  ...FigmaLightThemeCSSVariables,
-}) as ThemeCSSVariableKey[];
-
-/**
- * Generates a theme suffix based on the given scope and prefix.
- *
- * @param scope - The color scope for the theme.
- * @param prefix - The prefix to be added to the theme suffix.
- * @return The generated theme suffix.
- */
-export function getThemeSuffix(scope: ThemeColorScope, prefix = '') {
-  const variablePrefix = `--figma-color-${scope}`;
-  return variables
-    .filter(variable => variable !== variablePrefix && variable.startsWith(variablePrefix))
-    .map(variable => `${prefix}${variable.slice(variablePrefix.length + 1)}`)
-    .join('|');
-}
-
-export const rules: Rule[] = [
-  [
-    /^font-size-(\d+|\d+\/\d+)$/,
-    ([, value]) => {
-      const [size, leading] = value.split('/');
-      return ({
-        'font-size': `${size}px`,
-        'line-height': `${leading || 16}px`,
-      });
-    },
-    { autocomplete: 'font-size-(<num>|<num>/<num>)' },
-  ],
-  [
-    /^(bg|border|text)-figma?(.*)$/,
-    ([, scope, color]) => {
-      if (color?.startsWith?.(scope, 1)) {
-        // ignore `bg-figma-bg-*`
-        return '';
-      }
-
-      const scopes = ['bg', 'border', 'text', 'icon'];
-      const suffix = scopes.some(s => color?.startsWith?.(s, 1)) ? `${color || ''}` : `-${scope}${color}`;
-
-      if (color && !variables.includes(`--figma-color${suffix}` as ThemeCSSVariableKey)) {
-        return '';
-      }
-
-      const properties = {
-        bg: 'background-color',
-        border: 'border-color',
-        text: 'color',
-      };
-      return {
-        [properties[scope as keyof typeof properties]]: `var(--color${suffix})`,
-      };
-    },
-    {
-      autocomplete: [
-        `border-figma-(${getThemeSuffix('border')}|${getThemeSuffix('text', 'text-')}|${getThemeSuffix('icon', 'icon-')}|${getThemeSuffix('bg', 'bg-')})`,
-        `text-figma-(${getThemeSuffix('text')}|${getThemeSuffix('border', 'border-')}|${getThemeSuffix('icon', 'icon-')}|${getThemeSuffix('bg', 'bg-')})`,
-        `bg-figma-(${getThemeSuffix('bg')}|${getThemeSuffix('border', 'border-')}|${getThemeSuffix('icon', 'icon-')}|${getThemeSuffix('text', 'text-')})`,
-      ],
-    },
-  ],
-  [
-    /^(fill|stroke|outline)-figma(.*)$/,
-    ([, scope, color]) => {
-      if (color && !variables.includes(`--figma-color${color}` as ThemeCSSVariableKey)) {
-        return '';
-      }
-
-      const properties = {
-        fill: 'fill',
-        outline: 'outline-color',
-        stroke: 'stroke',
-      };
-      return {
-        [properties[scope as keyof typeof properties]]: `var(--color${color || ''})`,
-      };
-    },
-    {
-      autocomplete: `(fill|stroke|outline)-figma-(${getThemeSuffix('bg', 'bg-')}|${getThemeSuffix('border', 'border-')}|${getThemeSuffix('text', 'text-')}|${getThemeSuffix('icon', 'icon-')})`,
-    },
-  ],
-];
diff --git a/packages/theme/tests/colors/diff.test.ts b/packages/theme/tests/colors/diff.test.ts
new file mode 100644
index 0000000..f236bc5
--- /dev/null
+++ b/packages/theme/tests/colors/diff.test.ts
@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest';
+
+import * as colors from '../../src/colors/index';
+
+describe('@thinkbuff/figma-theme ./colors compat exports', () => {
+  it('exports every pre-Tailwind named export', () => {
+    expect(colors.FigmaLightThemeCSSVariables).toBeDefined();
+    expect(colors.FigmaDarkThemeCSSVariables).toBeDefined();
+    expect(colors.FigJamLightThemeCSSVariables).toBeDefined();
+    expect(colors.FigJamDarkThemeCSSVariables).toBeDefined();
+    expect(colors.DevModeLightThemeCSSVariables).toBeDefined();
+    expect(colors.DevModeDarkThemeCSSVariables).toBeDefined();
+    expect(colors.SlidesLightThemeCSSVariables).toBeDefined();
+    expect(colors.SlidesDarkThemeCSSVariables).toBeDefined();
+    expect(typeof colors.getCSSPreflights).toBe('function');
+    expect(typeof colors.generateCSSVariables).toBe('function');
+    expect(typeof colors.generateThemeVariablesCSS).toBe('function');
+  });
+
+  it('keeps the old generateCSSVariables output shape', () => {
+    const figma = colors.generateCSSVariables('figma');
+    const figjam = colors.generateCSSVariables('figjam');
+
+    expect(figma).toContain('html, html.figma-light, .figma-light');
+    expect(figma).toContain('html.figma-dark, .figma-dark');
+    expect(figma).toContain('--color-bg-brand: var(--figma-color-bg-brand,');
+    expect(figjam).toContain('html.figjam, .figjam');
+    expect(figjam).toContain('--color-bg-brand: var(--figma-color-bg-brand,');
+  });
+});
diff --git a/packages/theme/tests/fixtures/import/Bogus.tokens.json b/packages/theme/tests/fixtures/import/Bogus.tokens.json
new file mode 100644
index 0000000..324c69b
--- /dev/null
+++ b/packages/theme/tests/fixtures/import/Bogus.tokens.json
@@ -0,0 +1,3 @@
+{
+  "$extensions": { "com.figma.modeName": "Wat" }
+}
diff --git a/packages/theme/tests/fixtures/import/Default.tokens.json b/packages/theme/tests/fixtures/import/Default.tokens.json
new file mode 100644
index 0000000..a15748b
--- /dev/null
+++ b/packages/theme/tests/fixtures/import/Default.tokens.json
@@ -0,0 +1,11 @@
+{
+  "Spacers": {
+    "spacer-0": { "$type": "number", "$value": 0 },
+    "spacer-2": { "$type": "number", "$value": 8 }
+  },
+  "Radius": {
+    "radius-medium": { "$type": "number", "$value": 5 },
+    "radius-full": { "$type": "number", "$value": 9999 }
+  },
+  "$extensions": { "com.figma.modeName": "Default" }
+}
diff --git a/packages/theme/tests/fixtures/import/Light.tokens.json b/packages/theme/tests/fixtures/import/Light.tokens.json
new file mode 100644
index 0000000..a9b2419
--- /dev/null
+++ b/packages/theme/tests/fixtures/import/Light.tokens.json
@@ -0,0 +1,74 @@
+{
+  "✦": {
+    "_text": {
+      "text-default": {
+        "$type": "color",
+        "$value": "{✦.text.default.default}",
+        "$description": "Alias form of default text.",
+        "$extensions": { "com.figma.codeSyntax": { "WEB": "var(--color-text)" } }
+      }
+    },
+    "text": {
+      "default": {
+        "default": {
+          "$type": "color",
+          "$value": "{🎨.black.800}",
+          "$extensions": { "com.figma.codeSyntax": { "WEB": "var(--color-text)" } }
+        }
+      }
+    },
+    "special": {
+      "code": {
+        "$type": "color",
+        "$value": "#123456",
+        "$extensions": { "com.figma.codeSyntax": { "WEB": "var(--color-code)" } }
+      },
+      "inspectorAccent": {
+        "$type": "color",
+        "$value": "#123456",
+        "$extensions": { "com.figma.codeSyntax": { "WEB": "var(--color-inspector-accent)" } }
+      }
+    },
+    "bg": {
+      "desktopPanel": {
+        "$type": "color",
+        "$value": "#123456",
+        "$extensions": { "com.figma.codeSyntax": { "WEB": "var(--color-bg-desktop-panel)" } }
+      }
+    },
+    "fullscreen": {
+      "selection": {
+        "$type": "color",
+        "$value": "#123456",
+        "$extensions": { "com.figma.codeSyntax": { "WEB": "var(--color-border-fs-selected)" } }
+      }
+    },
+    "icon": {
+      "overlay": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [1, 1, 1],
+          "alpha": 0.9,
+          "hex": "#ffffff"
+        },
+        "$extensions": { "com.figma.codeSyntax": { "WEB": "var(--color-icon-overlay)" } }
+      }
+    }
+  },
+  "🎨": {
+    "black": {
+      "800": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [0, 0, 0],
+          "alpha": 0.9,
+          "hex": "#000000"
+        },
+        "$extensions": { "com.figma.codeSyntax": { "WEB": "var(--ramp-black-800)" } }
+      }
+    }
+  },
+  "$extensions": { "com.figma.modeName": "Light" }
+}
diff --git a/packages/theme/tests/fixtures/import/Mode b/packages/theme/tests/fixtures/import/Mode
new file mode 100644
index 0000000..e69de29
diff --git a/packages/theme/tests/fixtures/import/Mode 1.tokens.json b/packages/theme/tests/fixtures/import/Mode 1.tokens.json
new file mode 100644
index 0000000..5056024
--- /dev/null
+++ b/packages/theme/tests/fixtures/import/Mode 1.tokens.json	
@@ -0,0 +1,27 @@
+{
+  "font": {
+    "family": {
+      "default": { "$type": "string", "$value": "Inter" },
+      "mono": { "$type": "string", "$value": "Roboto Mono" }
+    },
+    "weight": {
+      "default": { "$type": "number", "$value": 450 },
+      "strong": { "$type": "number", "$value": 550 }
+    }
+  },
+  "body": {
+    "medium": {
+      "fontSize": { "$type": "number", "$value": 11 },
+      "lineHeight": { "$type": "number", "$value": 16 },
+      "letterSpacing": { "$type": "number", "$value": 0.5 },
+      "fontWeight": { "$type": "number", "$value": "{font.weight.default}" },
+      "strong": {
+        "fontSize": { "$type": "number", "$value": 11 },
+        "lineHeight": { "$type": "number", "$value": 16 },
+        "letterSpacing": { "$type": "number", "$value": 0.5 },
+        "fontWeight": { "$type": "number", "$value": "{font.weight.strong}" }
+      }
+    }
+  },
+  "$extensions": { "com.figma.modeName": "Mode 1" }
+}
diff --git a/packages/theme/tests/fixtures/old-token-names.txt b/packages/theme/tests/fixtures/old-token-names.txt
new file mode 100644
index 0000000..7142c66
--- /dev/null
+++ b/packages/theme/tests/fixtures/old-token-names.txt
@@ -0,0 +1,268 @@
+bg
+bg-brand
+bg-brand-hover
+bg-brand-pressed
+bg-brand-secondary
+bg-brand-tertiary
+bg-component
+bg-component-hover
+bg-component-pressed
+bg-component-secondary
+bg-component-tertiary
+bg-danger
+bg-danger-hover
+bg-danger-pressed
+bg-danger-secondary
+bg-danger-tertiary
+bg-disabled
+bg-disabled-secondary
+bg-hover
+bg-inverse
+bg-menu
+bg-menu-disabled
+bg-menu-hover
+bg-menu-pressed
+bg-menu-secondary
+bg-menu-selected
+bg-menu-selected-hover
+bg-menu-selected-pressed
+bg-menu-selected-secondary
+bg-menu-selected-tertiary
+bg-menu-tertiary
+bg-onselected
+bg-onselected-hover
+bg-onselected-pressed
+bg-pressed
+bg-secondary
+bg-selected
+bg-selected-hover
+bg-selected-pressed
+bg-selected-secondary
+bg-selected-strong
+bg-selected-tertiary
+bg-success
+bg-success-hover
+bg-success-pressed
+bg-success-secondary
+bg-success-tertiary
+bg-tertiary
+bg-tooltip
+bg-tooltip-disabled
+bg-tooltip-hover
+bg-tooltip-pressed
+bg-tooltip-secondary
+bg-tooltip-selected
+bg-tooltip-selected-hover
+bg-tooltip-selected-pressed
+bg-tooltip-selected-secondary
+bg-tooltip-selected-tertiary
+bg-tooltip-tertiary
+bg-warning
+bg-warning-hover
+bg-warning-pressed
+bg-warning-secondary
+bg-warning-tertiary
+border
+border-brand
+border-brand-strong
+border-component
+border-component-hover
+border-component-strong
+border-danger
+border-danger-strong
+border-disabled
+border-disabled-strong
+border-menu
+border-menu-disabled
+border-menu-disabled-strong
+border-menu-onselected
+border-menu-onselected-strong
+border-menu-selected
+border-menu-selected-strong
+border-menu-strong
+border-onbrand
+border-onbrand-strong
+border-oncomponent
+border-oncomponent-strong
+border-ondanger
+border-ondanger-strong
+border-onselected
+border-onselected-strong
+border-onsuccess
+border-onsuccess-strong
+border-onwarning
+border-onwarning-strong
+border-selected
+border-selected-strong
+border-strong
+border-success
+border-success-strong
+border-tooltip
+border-tooltip-disabled
+border-tooltip-disabled-strong
+border-tooltip-onselected
+border-tooltip-onselected-strong
+border-tooltip-selected
+border-tooltip-selected-strong
+border-tooltip-strong
+border-warning
+border-warning-strong
+icon
+icon-brand
+icon-brand-pressed
+icon-brand-secondary
+icon-brand-tertiary
+icon-component
+icon-component-pressed
+icon-component-secondary
+icon-component-tertiary
+icon-danger
+icon-danger-hover
+icon-danger-pressed
+icon-danger-secondary
+icon-danger-secondary-hover
+icon-danger-tertiary
+icon-disabled
+icon-hover
+icon-menu
+icon-menu-danger
+icon-menu-disabled
+icon-menu-hover
+icon-menu-ondisabled
+icon-menu-onselected
+icon-menu-pressed
+icon-menu-secondary
+icon-menu-secondary-hover
+icon-menu-selected
+icon-menu-selected-secondary
+icon-menu-selected-tertiary
+icon-menu-tertiary
+icon-menu-tertiary-hover
+icon-menu-warning
+icon-onbrand
+icon-onbrand-secondary
+icon-onbrand-tertiary
+icon-oncomponent
+icon-oncomponent-secondary
+icon-oncomponent-tertiary
+icon-ondanger
+icon-ondanger-secondary
+icon-ondanger-tertiary
+icon-ondisabled
+icon-oninverse
+icon-onselected
+icon-onselected-secondary
+icon-onselected-strong
+icon-onselected-tertiary
+icon-onsuccess
+icon-onsuccess-secondary
+icon-onsuccess-tertiary
+icon-onwarning
+icon-onwarning-secondary
+icon-onwarning-tertiary
+icon-pressed
+icon-secondary
+icon-secondary-hover
+icon-selected
+icon-selected-secondary
+icon-selected-tertiary
+icon-success
+icon-success-pressed
+icon-success-secondary
+icon-success-tertiary
+icon-tertiary
+icon-tertiary-hover
+icon-tooltip
+icon-tooltip-danger
+icon-tooltip-disabled
+icon-tooltip-hover
+icon-tooltip-ondisabled
+icon-tooltip-onselected
+icon-tooltip-pressed
+icon-tooltip-secondary
+icon-tooltip-secondary-hover
+icon-tooltip-selected
+icon-tooltip-selected-secondary
+icon-tooltip-selected-tertiary
+icon-tooltip-tertiary
+icon-tooltip-tertiary-hover
+icon-tooltip-warning
+icon-warning
+icon-warning-pressed
+icon-warning-secondary
+icon-warning-tertiary
+text
+text-brand
+text-brand-secondary
+text-brand-tertiary
+text-component
+text-component-pressed
+text-component-secondary
+text-component-tertiary
+text-danger
+text-danger-secondary
+text-danger-tertiary
+text-disabled
+text-hover
+text-menu
+text-menu-danger
+text-menu-disabled
+text-menu-hover
+text-menu-ondisabled
+text-menu-onselected
+text-menu-secondary
+text-menu-secondary-hover
+text-menu-selected
+text-menu-selected-secondary
+text-menu-selected-tertiary
+text-menu-tertiary
+text-menu-tertiary-hover
+text-menu-warning
+text-onbrand
+text-onbrand-secondary
+text-onbrand-tertiary
+text-oncomponent
+text-oncomponent-secondary
+text-oncomponent-tertiary
+text-ondanger
+text-ondanger-secondary
+text-ondanger-tertiary
+text-ondisabled
+text-oninverse
+text-onselected
+text-onselected-secondary
+text-onselected-strong
+text-onselected-tertiary
+text-onsuccess
+text-onsuccess-secondary
+text-onsuccess-tertiary
+text-onwarning
+text-onwarning-secondary
+text-onwarning-tertiary
+text-secondary
+text-secondary-hover
+text-selected
+text-selected-secondary
+text-selected-tertiary
+text-success
+text-success-secondary
+text-success-tertiary
+text-tertiary
+text-tertiary-hover
+text-tooltip
+text-tooltip-danger
+text-tooltip-disabled
+text-tooltip-hover
+text-tooltip-ondisabled
+text-tooltip-onselected
+text-tooltip-secondary
+text-tooltip-secondary-hover
+text-tooltip-selected
+text-tooltip-selected-secondary
+text-tooltip-selected-tertiary
+text-tooltip-tertiary
+text-tooltip-tertiary-hover
+text-tooltip-warning
+text-warning
+text-warning-secondary
+text-warning-tertiary
diff --git a/packages/theme/tests/theme/theme.test.ts b/packages/theme/tests/theme/theme.test.ts
new file mode 100644
index 0000000..b47869a
--- /dev/null
+++ b/packages/theme/tests/theme/theme.test.ts
@@ -0,0 +1,254 @@
+import { readFileSync } from 'node:fs';
+
+import { describe, expect, it } from 'vitest';
+
+import {
+  generateThemeVariablesCSS,
+  FigJamLightThemeCSSVariables,
+  FigmaDarkThemeCSSVariables,
+  FigmaLightThemeCSSVariables,
+  SharedFoundationVariables,
+} from '../../src/theme/index';
+import { docsThemeTokenSource } from '../../src/theme/tokens';
+
+describe('@thinkbuff/figma-theme', () => {
+  it('keeps complete per-mode token maps', () => {
+    expect(docsThemeTokenSource.themes['figma-light']['--figma-color-bg']).toBeDefined();
+    expect(docsThemeTokenSource.themes['figma-light']['--figma-color-bg-menu']).toBe('#1e1e1e');
+    expect(docsThemeTokenSource.themes['figma-light']['--figma-color-text-tooltip']).toBeDefined();
+    expect(docsThemeTokenSource.themes['figjam']['--figma-color-bg-menu-selected']).toBeDefined();
+  });
+
+  it('generates figma variables for light and dark scopes', () => {
+    const css = generateThemeVariablesCSS('figma');
+
+    expect(css).toContain('@theme {');
+    expect(css).toContain(':root, html.figma-light, .figma-light');
+    expect(css).toContain('html.figma-dark, .figma-dark');
+    expect(css).toContain(
+      `--figma-color-bg-brand: ${FigmaLightThemeCSSVariables['--figma-color-bg-brand']};`,
+    );
+    expect(css).toContain(
+      `--figma-color-text: ${FigmaDarkThemeCSSVariables['--figma-color-text']};`,
+    );
+    expect(css).toContain(`--figma-radius-md: ${SharedFoundationVariables['--figma-radius-md']};`);
+    expect(css).toContain(
+      `--font-figma: ${SharedFoundationVariables['--figma-font-family-default']};`,
+    );
+    expect(css).toContain(
+      `--font-weight-figma-default: ${SharedFoundationVariables['--figma-font-weight-default']};`,
+    );
+    expect(css).toContain(
+      `--text-figma-body-medium: ${SharedFoundationVariables['--figma-font-size-body-medium']};`,
+    );
+    expect(css).toContain(
+      `--leading-figma-body-medium: ${SharedFoundationVariables['--figma-line-height-body-medium']};`,
+    );
+    expect(css).toContain(
+      `--tracking-figma-body-medium: ${SharedFoundationVariables['--figma-letter-spacing-body-medium']};`,
+    );
+    expect(css).toContain(`--radius-figma-md: ${SharedFoundationVariables['--figma-radius-md']};`);
+    expect(css).toContain(`--spacing-figma-0: ${SharedFoundationVariables['--figma-space-0']};`);
+    expect(css).not.toContain('--figma-font-size-sm');
+    expect(css).not.toContain('--text-figma-xs:');
+    expect(css).toContain(
+      `--font-figma-code: ${SharedFoundationVariables['--figma-font-family-code']};`,
+    );
+  });
+
+  it('generates figjam variables for the figjam scope', () => {
+    const css = generateThemeVariablesCSS('figjam');
+
+    expect(css).toContain('@theme {');
+    expect(css).toContain(
+      '.figjam, .figma-light .figjam, .figjam .figma-light, .figjam.figma-light',
+    );
+    expect(css).toContain('.figma-dark .figjam, .figjam .figma-dark, .figjam.figma-dark');
+    expect(css).not.toContain(':root');
+    expect(css).toContain(
+      `--figma-color-bg-brand: ${FigJamLightThemeCSSVariables['--figma-color-bg-brand']};`,
+    );
+  });
+
+  it('ships css entry files with matching imports and generated token values', () => {
+    const figmaCss = readFileSync(new URL('../../src/css/figma.css', import.meta.url), 'utf8');
+    const figjamCss = readFileSync(new URL('../../src/css/figjam.css', import.meta.url), 'utf8');
+    const indexCss = readFileSync(new URL('../../src/css/index.css', import.meta.url), 'utf8');
+    const figmaThemeCss = readFileSync(
+      new URL('../../src/css/figma-theme.css', import.meta.url),
+      'utf8',
+    );
+    const figjamThemeCss = readFileSync(
+      new URL('../../src/css/figjam-theme.css', import.meta.url),
+      'utf8',
+    );
+    const utilitiesCss = readFileSync(
+      new URL('../../src/css/utilities.css', import.meta.url),
+      'utf8',
+    );
+
+    expect(figmaCss).toContain(`@import './figma-theme.css';`);
+    expect(figmaCss).toContain(`@import './utilities.css';`);
+    expect(figmaCss).toContain(`@import './preflight.css' layer(base);`);
+    expect(figjamCss).toContain(':root, .figjam');
+    expect(figjamCss).toContain(`@import './utilities.css';`);
+    expect(indexCss).toContain(`@import './figma-theme.css';`);
+    expect(indexCss).toContain(`@import './figjam-theme.css';`);
+    expect(indexCss).toContain(`@import './devmode-theme.css';`);
+    expect(indexCss).toContain(`@import './slides-theme.css';`);
+    expect(indexCss).toContain('@custom-variant dark (&:where(.figma-dark, .figma-dark *));');
+    expect(figmaThemeCss).toContain(
+      `--figma-color-bg-brand: ${FigmaLightThemeCSSVariables['--figma-color-bg-brand']};`,
+    );
+    expect(figjamThemeCss).toContain(
+      `--figma-color-bg-brand: ${FigJamLightThemeCSSVariables['--figma-color-bg-brand'] as string};`,
+    );
+    expect(utilitiesCss).toContain('@utility text-figma-icon {');
+    expect(utilitiesCss).toContain('@utility border-figma-bg-brand {');
+    expect(utilitiesCss).toContain('@utility text-figma-menu {');
+    expect(utilitiesCss).toContain('@utility bg-figma-elevated {');
+    expect(utilitiesCss).toContain('@utility bg-figma-overlay {');
+    expect(utilitiesCss).toContain('@utility fill-figma-elevated {');
+    expect(utilitiesCss).toContain('@utility fill-figma-inverse {');
+    expect(utilitiesCss).toContain('@utility bg-figma-icon {');
+    expect(utilitiesCss).toContain('@utility fill-figma-bg-tooltip {');
+    expect(utilitiesCss).toContain('@utility outline-figma-icon {');
+    expect(utilitiesCss).toContain('@utility text-figma-border {');
+    expect(utilitiesCss).toContain('@utility bg-figma-text {');
+    expect(utilitiesCss).not.toContain('@utility font-figma {');
+    expect(utilitiesCss).not.toContain('@utility font-figma-default {');
+    expect(utilitiesCss).not.toContain('@utility text-figma-sm {');
+    expect(utilitiesCss).not.toContain('@utility leading-figma-sm {');
+    expect(utilitiesCss).not.toContain('@utility tracking-figma-sm {');
+    expect(utilitiesCss).toContain('@utility text-figma-bg-brand {');
+    expect(utilitiesCss).not.toContain('@utility rounded-figma-md {');
+    expect(utilitiesCss).not.toContain('@utility p-figma-1 {');
+    expect(utilitiesCss).not.toContain('@utility shadow-figma-menu {');
+  });
+});
+
+describe('UI3 theme tokens', () => {
+  it('exposes semantic typography foundation variables and aliases', () => {
+    const css = generateThemeVariablesCSS('figma');
+
+    const expected: Record<string, [string, string, string]> = {
+      'body-small': ['.5625rem', '.875rem', '.00281rem'],
+      'body-medium': ['.6875rem', '1rem', '.00344rem'],
+      'body-large': ['.8125rem', '1.375rem', '-.00203rem'],
+      'heading-small': ['.8125rem', '1.375rem', '-.00203rem'],
+      'heading-medium': ['.9375rem', '1.5625rem', '-.00469rem'],
+      'heading-large': ['1.5rem', '2rem', '-.0255rem'],
+      'heading-display': ['3rem', '3.5rem', '-.09rem'],
+    };
+
+    for (const [name, [size, lineHeight, letterSpacing]] of Object.entries(expected)) {
+      expect(css).toContain(`--figma-font-size-${name}: ${size};`);
+      expect(css).toContain(`--figma-line-height-${name}: ${lineHeight};`);
+      expect(css).toContain(`--figma-letter-spacing-${name}: ${letterSpacing};`);
+      expect(css).toContain(`--text-figma-${name}: ${size};`);
+      expect(css).toContain(`--text-figma-${name}--line-height: ${lineHeight};`);
+      expect(css).toContain(`--text-figma-${name}--letter-spacing: ${letterSpacing};`);
+      expect(css).toContain(`--leading-figma-${name}: ${lineHeight};`);
+      expect(css).toContain(`--tracking-figma-${name}: ${letterSpacing};`);
+    }
+  });
+
+  it('sets font-weight aliases on non-default-weight styles only', () => {
+    const css = generateThemeVariablesCSS('figma');
+
+    for (const name of [
+      'heading-small',
+      'heading-medium',
+      'heading-large',
+      'body-small-strong',
+      'body-medium-strong',
+      'body-large-strong',
+    ]) {
+      expect(css).toContain(`--text-figma-${name}--font-weight: 550;`);
+    }
+    for (const name of ['body-small', 'body-medium', 'body-large', 'heading-display']) {
+      expect(css).not.toContain(`--text-figma-${name}--font-weight`);
+    }
+  });
+
+  it('renumbers the spacing scale', () => {
+    const css = generateThemeVariablesCSS('figma');
+
+    expect(css).toContain('--figma-space-5: 2rem;');
+    expect(css).toContain('--figma-space-6: 2.5rem;');
+    expect(css).not.toContain('--figma-space-7');
+    expect(css).toContain('--spacing-figma-5: 2rem;');
+    expect(css).toContain('--spacing-figma-6: 2.5rem;');
+    expect(css).not.toContain('--spacing-figma-7');
+  });
+
+  it('emits per-theme elevation variables outside @theme', () => {
+    const css = generateThemeVariablesCSS('figma');
+
+    const plainTheme = css.split('@theme {')[1].split('}')[0];
+    expect(plainTheme).not.toContain('--figma-elevation-');
+
+    const lightBlock = css.split(':root, html.figma-light, .figma-light {')[1].split('}')[0];
+    expect(lightBlock).toContain('--figma-elevation-100:');
+    expect(lightBlock).toContain('--figma-elevation-500:');
+    expect(lightBlock).not.toContain('inset');
+
+    const darkBlock = css.split('html.figma-dark, .figma-dark {')[1].split('}')[0];
+    expect(darkBlock).toContain('--figma-elevation-100:');
+    expect(darkBlock).toContain('--figma-elevation-500:');
+    expect(darkBlock).toContain('inset');
+
+    const figjamCss = generateThemeVariablesCSS('figjam');
+    const figjamBlock = figjamCss
+      .split('.figma-light .figjam, .figjam .figma-light, .figjam.figma-light {')[1]
+      .split('}')[0];
+    expect(figjamBlock).toContain('--figma-elevation-100:');
+    expect(figjamBlock).toContain('--figma-elevation-500:');
+    expect(figjamBlock).not.toContain('inset');
+  });
+
+  it('emits shadow aliases only inside @theme inline', () => {
+    const css = generateThemeVariablesCSS('figma');
+
+    const plainTheme = css.split('@theme {')[1].split('}')[0];
+    expect(plainTheme).not.toContain('--shadow-figma-');
+
+    const inlineTheme = css.split('@theme inline {')[1].split('}')[0];
+    for (const level of ['100', '200', '300', '400', '500']) {
+      expect(inlineTheme).toContain(
+        `--shadow-figma-elevation-${level}: var(--figma-elevation-${level});`,
+      );
+    }
+    expect(inlineTheme).toContain('--shadow-figma-tooltip: var(--figma-elevation-300);');
+    expect(inlineTheme).toContain('--shadow-figma-menu: var(--figma-elevation-400);');
+    expect(inlineTheme).toContain('--shadow-figma-modal: var(--figma-elevation-500);');
+    expect(inlineTheme).toContain('--shadow-figma-slider:');
+
+    const lightBlock = css.split(':root, html.figma-light, .figma-light {')[1].split('}')[0];
+    expect(lightBlock).toContain('--figma-shadow-tooltip: var(--figma-elevation-300);');
+    expect(lightBlock).toContain('--figma-shadow-menu: var(--figma-elevation-400);');
+    expect(lightBlock).toContain('--figma-shadow-modal: var(--figma-elevation-500);');
+  });
+});
+
+describe('standalone editor entries', () => {
+  it.each(['figjam', 'devmode', 'slides'] as const)(
+    'emits %s light mode at :root for its standalone entry',
+    (type) => {
+      const css = generateThemeVariablesCSS(type, true);
+      expect(css).toContain(`:root, .${type}, .figma-light .${type}`);
+      const lightBlock = css.split(`\n\n`)[2];
+      expect(lightBlock).toContain(':root');
+    },
+  );
+
+  it('keeps :root only on figma light inside index.css', () => {
+    const indexCss = readFileSync(new URL('../../src/css/index.css', import.meta.url), 'utf8');
+    const figjamThemeCss = readFileSync(
+      new URL('../../src/css/figjam-theme.css', import.meta.url),
+      'utf8',
+    );
+    expect(indexCss).not.toContain(':root');
+    expect(figjamThemeCss).not.toContain(':root');
+  });
+});
diff --git a/packages/theme/tests/tokens-import.test.ts b/packages/theme/tests/tokens-import.test.ts
new file mode 100644
index 0000000..86c3a4a
--- /dev/null
+++ b/packages/theme/tests/tokens-import.test.ts
@@ -0,0 +1,78 @@
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { describe, expect, it } from 'vitest';
+
+import {
+  importColorFile,
+  importSizingFile,
+  importTypographyFile,
+} from '../scripts/tokens-import.ts';
+
+const fixtures = fileURLToPath(new URL('./fixtures/import', import.meta.url));
+
+function loadFixture(name: string) {
+  return JSON.parse(readFileSync(path.join(fixtures, name), 'utf8'));
+}
+
+describe('tokens-import', () => {
+  const colorRoot = loadFixture('Light.tokens.json');
+
+  it('resolves alias chains through primitives', () => {
+    const result = importColorFile(colorRoot);
+    expect(result['text']).toEqual({
+      value: '#000000e6',
+      description: 'Alias form of default text.',
+    });
+  });
+
+  it('dedupes web names and keeps the first non-empty description', () => {
+    const result = importColorFile(colorRoot);
+    // _text/text-default and text/default/default both publish `text`
+    expect(Object.keys(result).filter((key) => key === 'text')).toHaveLength(1);
+  });
+
+  it('excludes fullscreen, desktop, special/code and special/*inspect* paths', () => {
+    const result = importColorFile(colorRoot);
+    expect(result['code']).toBeUndefined();
+    expect(result['inspector-accent']).toBeUndefined();
+    expect(result['bg-desktop-panel']).toBeUndefined();
+    expect(result['border-fs-selected']).toBeUndefined();
+  });
+
+  it('does not publish primitives (ramp) as colors', () => {
+    const result = importColorFile(colorRoot);
+    expect(Object.keys(result)).not.toContain('black-800');
+  });
+
+  it('keeps alpha as an 8-digit hex and drops ff', () => {
+    const result = importColorFile(colorRoot);
+    expect(result['icon-overlay']).toEqual({ value: '#ffffffe6' });
+  });
+
+  it('throws on conflicting duplicate web names', () => {
+    const conflicting = JSON.parse(JSON.stringify(colorRoot));
+    conflicting['✦']._text['text-default'].$value = '#ffffff';
+    expect(() => importColorFile(conflicting)).toThrow(/Conflicting values/);
+  });
+
+  it('imports spacer and radius numbers', () => {
+    const result = importSizingFile(loadFixture('Default.tokens.json'));
+    expect(result.space).toEqual({ '0': 0, '2': 8 });
+    expect(result.radius).toEqual({ medium: 5, full: 9999 });
+  });
+
+  it('imports typography with alias-resolved weights and em letter spacing', () => {
+    const result = importTypographyFile(loadFixture('Mode 1.tokens.json'));
+    expect(result.family).toEqual({ default: 'Inter', mono: 'Roboto Mono' });
+    expect(result.weight).toEqual({ default: 450, strong: 550 });
+    expect(result.styles['body-medium']).toEqual({
+      fontSize: 11,
+      lineHeight: 16,
+      letterSpacing: 0.005,
+      fontWeight: 450,
+    });
+    expect(result.styles['body-medium-strong'].fontWeight).toBe(550);
+  });
+});
diff --git a/packages/theme/tests/tokens/tokens.test.ts b/packages/theme/tests/tokens/tokens.test.ts
new file mode 100644
index 0000000..d942b6b
--- /dev/null
+++ b/packages/theme/tests/tokens/tokens.test.ts
@@ -0,0 +1,73 @@
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { describe, expect, it } from 'vitest';
+
+const tokensDirectory = fileURLToPath(new URL('../../tokens', import.meta.url));
+
+type ColorFile = Record<string, { value: string; description?: string }>;
+
+function readColorFile(name: string): ColorFile {
+  return JSON.parse(readFileSync(path.join(tokensDirectory, 'colors', name), 'utf8'));
+}
+
+const COLOR_FILES = [
+  'figma-light.json',
+  'figma-dark.json',
+  'figjam-light.json',
+  'figjam-dark.json',
+  'devmode-light.json',
+  'devmode-dark.json',
+  'slides-light.json',
+  'slides-dark.json',
+];
+
+const OLD_TOKEN_NAMES = readFileSync(
+  path.join(tokensDirectory, '../tests/fixtures/old-token-names.txt'),
+  'utf8',
+)
+  .split('\n')
+  .map((line) => line.trim())
+  .filter(Boolean);
+
+describe('normalized color tokens', () => {
+  it('publishes identical key sets across all eight modes', () => {
+    const [first, ...rest] = COLOR_FILES.map((name) => Object.keys(readColorFile(name)).sort());
+    for (const keys of rest) {
+      expect(keys).toEqual(first);
+    }
+  });
+
+  it('keeps every token from the previous 268-name set', () => {
+    const light = readColorFile('figma-light.json');
+    for (const name of OLD_TOKEN_NAMES) {
+      expect(light, `--figma-color-${name}`).toHaveProperty(name);
+    }
+  });
+});
+
+describe('generated css', () => {
+  const cssDirectory = path.join(tokensDirectory, '../src/css');
+  const indexCss = readFileSync(path.join(cssDirectory, 'index.css'), 'utf8');
+  const figmaThemeCss = readFileSync(path.join(cssDirectory, 'figma-theme.css'), 'utf8');
+  const figjamThemeCss = readFileSync(path.join(cssDirectory, 'figjam-theme.css'), 'utf8');
+
+  it('imports the figjam theme from index.css', () => {
+    expect(indexCss).toContain("@import './figjam-theme.css';");
+  });
+
+  it('declares figma light under :root', () => {
+    const lightBlock = figmaThemeCss
+      .split(':root, html.figma-light, .figma-light {')[1]
+      .split('}')[0];
+    expect(lightBlock).toContain('--figma-color-bg-brand: #0d99ff;');
+  });
+
+  it('does not claim :root in the figjam block', () => {
+    expect(figjamThemeCss).not.toContain(':root');
+    expect(figjamThemeCss).toContain(
+      '.figjam, .figma-light .figjam, .figjam .figma-light, .figjam.figma-light {',
+    );
+  });
+});
diff --git a/packages/theme/tokens/colors/devmode-dark.json b/packages/theme/tokens/colors/devmode-dark.json
new file mode 100644
index 0000000..31b95d9
--- /dev/null
+++ b/packages/theme/tokens/colors/devmode-dark.json
@@ -0,0 +1,1506 @@
+{
+  "bg": {
+    "value": "#2c2c2c",
+    "description": "Our default background color"
+  },
+  "bg-assistive": {
+    "value": "#f316b0"
+  },
+  "bg-assistive-hover": {
+    "value": "#d01b9c"
+  },
+  "bg-assistive-pressed": {
+    "value": "#d01b9c"
+  },
+  "bg-assistive-secondary": {
+    "value": "#96207a"
+  },
+  "bg-assistive-tertiary": {
+    "value": "#68275e"
+  },
+  "bg-brand": {
+    "value": "#198f51",
+    "description": "A fill tinted to match the accent color of the current product."
+  },
+  "bg-brand-hover": {
+    "value": "#078348"
+  },
+  "bg-brand-pressed": {
+    "value": "#078348"
+  },
+  "bg-brand-secondary": {
+    "value": "#0a5c35"
+  },
+  "bg-brand-tertiary": {
+    "value": "#476656"
+  },
+  "bg-component": {
+    "value": "#8a38f5"
+  },
+  "bg-component-hover": {
+    "value": "#7a2ed6"
+  },
+  "bg-component-pressed": {
+    "value": "#7a2ed6"
+  },
+  "bg-component-secondary": {
+    "value": "#652ca8"
+  },
+  "bg-component-tertiary": {
+    "value": "#473956"
+  },
+  "bg-danger": {
+    "value": "#e03e1a",
+    "description": "Red fill color behind destructive buttons, and error banners."
+  },
+  "bg-danger-hover": {
+    "value": "#c4381c"
+  },
+  "bg-danger-pressed": {
+    "value": "#c4381c"
+  },
+  "bg-danger-secondary": {
+    "value": "#963323"
+  },
+  "bg-danger-tertiary": {
+    "value": "#60332a"
+  },
+  "bg-design": {
+    "value": "#0c8ce9"
+  },
+  "bg-design-hover": {
+    "value": "#0a6dc2"
+  },
+  "bg-design-pressed": {
+    "value": "#0a6dc2"
+  },
+  "bg-design-secondary": {
+    "value": "#105cad"
+  },
+  "bg-design-tertiary": {
+    "value": "#394360"
+  },
+  "bg-disabled": {
+    "value": "#757575"
+  },
+  "bg-disabled-secondary": {
+    "value": "#b3b3b3"
+  },
+  "bg-figjam": {
+    "value": "#8a38f5",
+    "description": "Purple fill color used for backgrounds like a button that opens in FigJam."
+  },
+  "bg-figjam-hover": {
+    "value": "#7a2ed6"
+  },
+  "bg-figjam-pressed": {
+    "value": "#7a2ed6"
+  },
+  "bg-figjam-secondary": {
+    "value": "#652ca8"
+  },
+  "bg-figjam-tertiary": {
+    "value": "#473956"
+  },
+  "bg-handoff": {
+    "value": "#198f51",
+    "description": "Green fill color used for backgrounds like a button that opens in Dev Mode."
+  },
+  "bg-handoff-hover": {
+    "value": "#078348"
+  },
+  "bg-handoff-pressed": {
+    "value": "#078348"
+  },
+  "bg-handoff-secondary": {
+    "value": "#0a5c35"
+  },
+  "bg-handoff-tertiary": {
+    "value": "#476656"
+  },
+  "bg-hover": {
+    "value": "#383838",
+    "description": "A light grey hover fill color behind icons, and selectable elements."
+  },
+  "bg-info": {
+    "value": "#476656"
+  },
+  "bg-inverse": {
+    "value": "#ffffff"
+  },
+  "bg-measure": {
+    "value": "#e03e1a"
+  },
+  "bg-measure-hover": {
+    "value": "#c4381c"
+  },
+  "bg-measure-pressed": {
+    "value": "#c4381c"
+  },
+  "bg-measure-secondary": {
+    "value": "#963323"
+  },
+  "bg-measure-tertiary": {
+    "value": "#60332a"
+  },
+  "bg-menu": {
+    "value": "#1e1e1e",
+    "description": "The dark fill color of our menus "
+  },
+  "bg-menu-disabled": {
+    "value": "#757575"
+  },
+  "bg-menu-hover": {
+    "value": "#2c2c2c"
+  },
+  "bg-menu-pressed": {
+    "value": "#2c2c2c"
+  },
+  "bg-menu-secondary": {
+    "value": "#383838"
+  },
+  "bg-menu-selected": {
+    "value": "#198f51"
+  },
+  "bg-menu-selected-hover": {
+    "value": "#078348"
+  },
+  "bg-menu-selected-pressed": {
+    "value": "#078348"
+  },
+  "bg-menu-selected-secondary": {
+    "value": "#476656"
+  },
+  "bg-menu-selected-tertiary": {
+    "value": "#476656"
+  },
+  "bg-menu-tertiary": {
+    "value": "#444444"
+  },
+  "bg-onselected": {
+    "value": "#678e79"
+  },
+  "bg-onselected-hover": {
+    "value": "#678e79"
+  },
+  "bg-onselected-pressed": {
+    "value": "#678e79"
+  },
+  "bg-pressed": {
+    "value": "#383838"
+  },
+  "bg-secondary": {
+    "value": "#383838",
+    "description": "Our secondary background color for most containers."
+  },
+  "bg-selected": {
+    "value": "#517361",
+    "description": "A lightly tinted selected fill color for selected elements."
+  },
+  "bg-selected-hover": {
+    "value": "#5c806d"
+  },
+  "bg-selected-pressed": {
+    "value": "#5c806d"
+  },
+  "bg-selected-secondary": {
+    "value": "#476656"
+  },
+  "bg-selected-strong": {
+    "value": "#198f51"
+  },
+  "bg-selected-tertiary": {
+    "value": "#476656"
+  },
+  "bg-success": {
+    "value": "#198f51"
+  },
+  "bg-success-hover": {
+    "value": "#078348"
+  },
+  "bg-success-pressed": {
+    "value": "#078348"
+  },
+  "bg-success-secondary": {
+    "value": "#0a5c35"
+  },
+  "bg-success-tertiary": {
+    "value": "#476656"
+  },
+  "bg-tertiary": {
+    "value": "#444444"
+  },
+  "bg-toolbar": {
+    "value": "#2c2c2c",
+    "description": "The dark fill color of our UI2 editor toolbar"
+  },
+  "bg-toolbar-disabled": {
+    "value": "#757575"
+  },
+  "bg-toolbar-hover": {
+    "value": "#111111"
+  },
+  "bg-toolbar-pressed": {
+    "value": "#111111"
+  },
+  "bg-toolbar-secondary": {
+    "value": "#383838"
+  },
+  "bg-toolbar-selected": {
+    "value": "#198f51"
+  },
+  "bg-toolbar-selected-hover": {
+    "value": "#078348"
+  },
+  "bg-toolbar-selected-pressed": {
+    "value": "#078348"
+  },
+  "bg-toolbar-selected-secondary": {
+    "value": "#0a5c35"
+  },
+  "bg-toolbar-selected-tertiary": {
+    "value": "#198f51"
+  },
+  "bg-toolbar-tertiary": {
+    "value": "#444444"
+  },
+  "bg-tooltip": {
+    "value": "#1e1e1e"
+  },
+  "bg-tooltip-disabled": {
+    "value": "#757575"
+  },
+  "bg-tooltip-hover": {
+    "value": "#2c2c2c"
+  },
+  "bg-tooltip-pressed": {
+    "value": "#2c2c2c"
+  },
+  "bg-tooltip-secondary": {
+    "value": "#383838"
+  },
+  "bg-tooltip-selected": {
+    "value": "#198f51"
+  },
+  "bg-tooltip-selected-hover": {
+    "value": "#078348"
+  },
+  "bg-tooltip-selected-pressed": {
+    "value": "#078348"
+  },
+  "bg-tooltip-selected-secondary": {
+    "value": "#476656"
+  },
+  "bg-tooltip-selected-tertiary": {
+    "value": "#476656"
+  },
+  "bg-tooltip-tertiary": {
+    "value": "#444444"
+  },
+  "bg-warning": {
+    "value": "#f3c11b",
+    "description": "Yellow fill color for warning banners"
+  },
+  "bg-warning-hover": {
+    "value": "#f2b50d"
+  },
+  "bg-warning-pressed": {
+    "value": "#f2b50d"
+  },
+  "bg-warning-secondary": {
+    "value": "#e4a711"
+  },
+  "bg-warning-tertiary": {
+    "value": "#5c4100"
+  },
+  "bghoverondarkcanvas": {
+    "value": "#ffffff33"
+  },
+  "bghoveronlightcanvas": {
+    "value": "#00000033"
+  },
+  "bghovertransparent": {
+    "value": "#ffffff0d"
+  },
+  "bgsecondaryoncanvas": {
+    "value": "#111111"
+  },
+  "bgselectedarea": {
+    "value": "#14ae5c33"
+  },
+  "bgtransparent": {
+    "value": "#00000099"
+  },
+  "bgtransparent-secondary-hover": {
+    "value": "#ffffff1a"
+  },
+  "bgtransparent-secondary-pressed": {
+    "value": "#ffffff26"
+  },
+  "bgtransparentsecondary": {
+    "value": "#ffffff26"
+  },
+  "bgvoting": {
+    "value": "#f3c11b"
+  },
+  "bgvotingsecondary": {
+    "value": "#fbe8ad"
+  },
+  "bgvotingtertiary": {
+    "value": "#fdf7dd"
+  },
+  "bgvotingwheeldial": {
+    "value": "#fdf7dd"
+  },
+  "bgvotingwheelhover": {
+    "value": "#fbe8ad"
+  },
+  "border": {
+    "value": "#444444",
+    "description": "Our default border color used as a divider between sections, or around inputs."
+  },
+  "border-assistive": {
+    "value": "#96207a"
+  },
+  "border-assistive-strong": {
+    "value": "#fc9ce0"
+  },
+  "border-brand": {
+    "value": "#0a5c35"
+  },
+  "border-brand-strong": {
+    "value": "#79d297"
+  },
+  "border-component": {
+    "value": "#652ca8"
+  },
+  "border-component-hover": {
+    "value": "#8a38f5"
+  },
+  "border-component-strong": {
+    "value": "#d6b6fb"
+  },
+  "border-danger": {
+    "value": "#963323"
+  },
+  "border-danger-strong": {
+    "value": "#fca397"
+  },
+  "border-design": {
+    "value": "#105cad"
+  },
+  "border-design-strong": {
+    "value": "#7cc4f8"
+  },
+  "border-disabled": {
+    "value": "#444444"
+  },
+  "border-disabled-strong": {
+    "value": "#ffffff66"
+  },
+  "border-figjam": {
+    "value": "#652ca8"
+  },
+  "border-figjam-strong": {
+    "value": "#d1a8ff"
+  },
+  "border-handoff": {
+    "value": "#0a5c35"
+  },
+  "border-handoff-strong": {
+    "value": "#79d297"
+  },
+  "border-measure": {
+    "value": "#963323"
+  },
+  "border-measure-strong": {
+    "value": "#fca397"
+  },
+  "border-menu": {
+    "value": "#383838",
+    "description": "Used for borders or dividers within a menu element."
+  },
+  "border-menu-disabled": {
+    "value": "#383838"
+  },
+  "border-menu-disabled-strong": {
+    "value": "#383838"
+  },
+  "border-menu-onselected": {
+    "value": "#79d297"
+  },
+  "border-menu-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "border-menu-selected": {
+    "value": "#198f51"
+  },
+  "border-menu-selected-strong": {
+    "value": "#79d297"
+  },
+  "border-menu-strong": {
+    "value": "#ffffff"
+  },
+  "border-onassistive": {
+    "value": "#d01b9c"
+  },
+  "border-onassistive-strong": {
+    "value": "#ffffff"
+  },
+  "border-onbrand": {
+    "value": "#078348"
+  },
+  "border-onbrand-strong": {
+    "value": "#ffffff",
+    "description": "Used for borders against a bg-brand background"
+  },
+  "border-oncomponent": {
+    "value": "#7a2ed6"
+  },
+  "border-oncomponent-strong": {
+    "value": "#ffffff"
+  },
+  "border-ondanger": {
+    "value": "#c4381c"
+  },
+  "border-ondanger-strong": {
+    "value": "#ffffff"
+  },
+  "border-ondesign": {
+    "value": "#0a6dc2"
+  },
+  "border-ondesign-strong": {
+    "value": "#ffffff"
+  },
+  "border-onfigjam": {
+    "value": "#7a2ed6"
+  },
+  "border-onfigjam-strong": {
+    "value": "#7a2ed6"
+  },
+  "border-onmeasure": {
+    "value": "#c4381c"
+  },
+  "border-onmeasure-strong": {
+    "value": "#ffffff"
+  },
+  "border-onselected": {
+    "value": "#678e79"
+  },
+  "border-onselected-strong": {
+    "value": "#ffffffe5"
+  },
+  "border-onsuccess": {
+    "value": "#078348"
+  },
+  "border-onsuccess-strong": {
+    "value": "#ffffff"
+  },
+  "border-onwarning": {
+    "value": "#e4a711"
+  },
+  "border-onwarning-strong": {
+    "value": "#000000e5"
+  },
+  "border-selected": {
+    "value": "#198f51",
+    "description": "Default selection border color we use for focused / selected inputs."
+  },
+  "border-selected-strong": {
+    "value": "#79d297",
+    "description": "When presenting a selected border against an already selected background, we sometimes need to increase the prominence of the selected border."
+  },
+  "border-strong": {
+    "value": "#ffffffe5",
+    "description": "A much darker border color that we can use for emphasis around some UI elements."
+  },
+  "border-success": {
+    "value": "#0a5c35"
+  },
+  "border-success-strong": {
+    "value": "#79d297"
+  },
+  "border-toolbar": {
+    "value": "#444444"
+  },
+  "border-toolbar-disabled": {
+    "value": "#ffffff66"
+  },
+  "border-toolbar-onselected": {
+    "value": "#ffffff"
+  },
+  "border-toolbar-selected": {
+    "value": "#198f51"
+  },
+  "border-toolbar-selected-strong": {
+    "value": "#79d297"
+  },
+  "border-toolbar-strong": {
+    "value": "#ffffff"
+  },
+  "border-tooltip": {
+    "value": "#383838"
+  },
+  "border-tooltip-disabled": {
+    "value": "#383838"
+  },
+  "border-tooltip-disabled-strong": {
+    "value": "#383838"
+  },
+  "border-tooltip-onselected": {
+    "value": "#078348"
+  },
+  "border-tooltip-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "border-tooltip-selected": {
+    "value": "#198f51"
+  },
+  "border-tooltip-selected-strong": {
+    "value": "#79d297"
+  },
+  "border-tooltip-strong": {
+    "value": "#ffffff"
+  },
+  "border-warning": {
+    "value": "#925711"
+  },
+  "border-warning-strong": {
+    "value": "#f7d15f"
+  },
+  "bordertranslucent": {
+    "value": "#ffffff1a"
+  },
+  "conditionalborder": {
+    "value": "#444444"
+  },
+  "icon": {
+    "value": "#ffffff",
+    "description": "Our default icon color"
+  },
+  "icon-assistive": {
+    "value": "#fc9ce0",
+    "description": "Pink icons used when Figma is assisting you in some way."
+  },
+  "icon-assistive-pressed": {
+    "value": "#fbb1ed"
+  },
+  "icon-assistive-secondary": {
+    "value": "#fc9ce0"
+  },
+  "icon-assistive-tertiary": {
+    "value": "#fc9ce0"
+  },
+  "icon-brand": {
+    "value": "#79d297",
+    "description": "An icon tinted to match the accent color of the current product."
+  },
+  "icon-brand-pressed": {
+    "value": "#198f51"
+  },
+  "icon-brand-secondary": {
+    "value": "#078348"
+  },
+  "icon-brand-tertiary": {
+    "value": "#476656"
+  },
+  "icon-component": {
+    "value": "#d1a8ff"
+  },
+  "icon-component-pressed": {
+    "value": "#d6b6fb"
+  },
+  "icon-component-secondary": {
+    "value": "#7f699b"
+  },
+  "icon-component-tertiary": {
+    "value": "#7f699b"
+  },
+  "icon-danger": {
+    "value": "#e03e1a",
+    "description": "Red icons used to alert users about an error."
+  },
+  "icon-danger-hover": {
+    "value": "#fbbcb6"
+  },
+  "icon-danger-pressed": {
+    "value": "#fbbcb6"
+  },
+  "icon-danger-secondary": {
+    "value": "#e03e1a"
+  },
+  "icon-danger-secondary-hover": {
+    "value": "#e03e1a"
+  },
+  "icon-danger-tertiary": {
+    "value": "#e03e1a"
+  },
+  "icon-design": {
+    "value": "#7cc4f8"
+  },
+  "icon-design-pressed": {
+    "value": "#a8d7fa"
+  },
+  "icon-design-secondary": {
+    "value": "#7cc4f8"
+  },
+  "icon-design-tertiary": {
+    "value": "#7cc4f8"
+  },
+  "icon-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-figjam": {
+    "value": "#d1a8ff"
+  },
+  "icon-figjam-pressed": {
+    "value": "#d6b6fb"
+  },
+  "icon-figjam-secondary": {
+    "value": "#7f699b"
+  },
+  "icon-figjam-tertiary": {
+    "value": "#7f699b"
+  },
+  "icon-handoff": {
+    "value": "#79d297"
+  },
+  "icon-handoff-pressed": {
+    "value": "#a1e8b9"
+  },
+  "icon-handoff-secondary": {
+    "value": "#79d297"
+  },
+  "icon-handoff-tertiary": {
+    "value": "#79d297"
+  },
+  "icon-hover": {
+    "value": "#ffffff"
+  },
+  "icon-measure": {
+    "value": "#e03e1a"
+  },
+  "icon-measure-hover": {
+    "value": "#fbbcb6"
+  },
+  "icon-measure-pressed": {
+    "value": "#fbbcb6"
+  },
+  "icon-measure-secondary": {
+    "value": "#e03e1a"
+  },
+  "icon-measure-secondary-hover": {
+    "value": "#e03e1a"
+  },
+  "icon-measure-tertiary": {
+    "value": "#e03e1a"
+  },
+  "icon-menu": {
+    "value": "#ffffff"
+  },
+  "icon-menu-danger": {
+    "value": "#e03e1a"
+  },
+  "icon-menu-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-menu-hover": {
+    "value": "#ffffff"
+  },
+  "icon-menu-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "icon-menu-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-menu-pressed": {
+    "value": "#198f51"
+  },
+  "icon-menu-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-menu-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-menu-selected": {
+    "value": "#79d297"
+  },
+  "icon-menu-selected-secondary": {
+    "value": "#79d297"
+  },
+  "icon-menu-selected-tertiary": {
+    "value": "#79d297"
+  },
+  "icon-menu-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-menu-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-menu-warning": {
+    "value": "#f3c11b"
+  },
+  "icon-onassistive": {
+    "value": "#ffffff"
+  },
+  "icon-onassistive-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onassistive-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onbrand": {
+    "value": "#ffffff",
+    "description": "Icons against a “background with a fill color” (for example, a blue / purple background in our “Share” button)"
+  },
+  "icon-onbrand-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onbrand-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-oncomponent": {
+    "value": "#ffffff"
+  },
+  "icon-oncomponent-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-oncomponent-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-ondanger": {
+    "value": "#ffffff"
+  },
+  "icon-ondanger-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-ondanger-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-ondesign": {
+    "value": "#ffffff"
+  },
+  "icon-ondesign-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-ondesign-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-ondisabled": {
+    "value": "#2c2c2c"
+  },
+  "icon-onfigjam": {
+    "value": "#ffffff"
+  },
+  "icon-onfigjam-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onfigjam-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-oninverse": {
+    "value": "#000000e5"
+  },
+  "icon-onmeasure": {
+    "value": "#ffffff"
+  },
+  "icon-onmeasure-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onmeasure-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-onselected-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "icon-onselected-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onsuccess": {
+    "value": "#ffffff"
+  },
+  "icon-onsuccess-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onsuccess-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onwarning": {
+    "value": "#000000e5"
+  },
+  "icon-onwarning-secondary": {
+    "value": "#00000080"
+  },
+  "icon-onwarning-tertiary": {
+    "value": "#0000004d"
+  },
+  "icon-pressed": {
+    "value": "#078348"
+  },
+  "icon-secondary": {
+    "value": "#ffffffb2",
+    "description": "Our secondary icon color for inactive elements that need to be “lighter” in order to create hierarchy."
+  },
+  "icon-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-selected": {
+    "value": "#79d297"
+  },
+  "icon-selected-secondary": {
+    "value": "#79d297"
+  },
+  "icon-selected-tertiary": {
+    "value": "#79d297"
+  },
+  "icon-success": {
+    "value": "#198f51",
+    "description": "Green icons used for confirmation, and approval."
+  },
+  "icon-success-pressed": {
+    "value": "#a1e8b9"
+  },
+  "icon-success-secondary": {
+    "value": "#198f51"
+  },
+  "icon-success-tertiary": {
+    "value": "#198f51"
+  },
+  "icon-tertiary": {
+    "value": "#ffffff66",
+    "description": "Our tertiary icon color primarily used for carets"
+  },
+  "icon-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-danger": {
+    "value": "#e03e1a"
+  },
+  "icon-toolbar-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-toolbar-hover": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-ondisabled": {
+    "value": "#2c2c2c"
+  },
+  "icon-toolbar-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-pressed": {
+    "value": "#198f51"
+  },
+  "icon-toolbar-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-toolbar-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-selected": {
+    "value": "#79d297"
+  },
+  "icon-toolbar-selected-secondary": {
+    "value": "#79d297"
+  },
+  "icon-toolbar-selected-tertiary": {
+    "value": "#79d297"
+  },
+  "icon-toolbar-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-toolbar-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-warning": {
+    "value": "#f3c11b"
+  },
+  "icon-tooltip": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-danger": {
+    "value": "#e03e1a"
+  },
+  "icon-tooltip-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-tooltip-hover": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "icon-tooltip-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-pressed": {
+    "value": "#198f51"
+  },
+  "icon-tooltip-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-tooltip-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-selected": {
+    "value": "#79d297"
+  },
+  "icon-tooltip-selected-secondary": {
+    "value": "#79d297"
+  },
+  "icon-tooltip-selected-tertiary": {
+    "value": "#79d297"
+  },
+  "icon-tooltip-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-tooltip-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-warning": {
+    "value": "#f3c11b"
+  },
+  "icon-warning": {
+    "value": "#f3c11b",
+    "description": "Yellow icons used to warn users about a potential problem."
+  },
+  "icon-warning-pressed": {
+    "value": "#f7d15f"
+  },
+  "icon-warning-secondary": {
+    "value": "#f3c11b"
+  },
+  "icon-warning-tertiary": {
+    "value": "#f3c11b"
+  },
+  "icondesignfilesecondary": {
+    "value": "#7cc4f8"
+  },
+  "iconfigjamfilesecondary": {
+    "value": "#d1a8ff"
+  },
+  "iconondarkcanvas": {
+    "value": "#ffffffe5"
+  },
+  "icononlightcanvas": {
+    "value": "#000000e5"
+  },
+  "icononvoting": {
+    "value": "#000000e5"
+  },
+  "iconprototypefile": {
+    "value": "#757575"
+  },
+  "iconprototypefilesecondary": {
+    "value": "#ffffff"
+  },
+  "iconpublishedfile": {
+    "value": "#757575"
+  },
+  "iconpublishedfilesecondary": {
+    "value": "#b3b3b3"
+  },
+  "loading": {
+    "value": "#ffffff1a"
+  },
+  "loadingmenu": {
+    "value": "#ffffff1a"
+  },
+  "loadingsecondary": {
+    "value": "#ffffff0d"
+  },
+  "loadingsecondarymenu": {
+    "value": "#ffffff0d"
+  },
+  "modalbackdrop": {
+    "value": "#00000080"
+  },
+  "multiplayerblue": {
+    "value": "#0a6dc2"
+  },
+  "multiplayerbluehover": {
+    "value": "#105cad"
+  },
+  "multiplayerbluesecondary": {
+    "value": "#184591"
+  },
+  "multiplayergreen": {
+    "value": "#198f51"
+  },
+  "multiplayergreenhover": {
+    "value": "#078348"
+  },
+  "multiplayergreensecondary": {
+    "value": "#0a4c2d"
+  },
+  "multiplayergrey": {
+    "value": "#667799"
+  },
+  "multiplayergreyhover": {
+    "value": "#536383"
+  },
+  "multiplayergreysecondary": {
+    "value": "#394360"
+  },
+  "multiplayerpink": {
+    "value": "#f316b0"
+  },
+  "multiplayerpinkhover": {
+    "value": "#d01b9c"
+  },
+  "multiplayerpinksecondary": {
+    "value": "#68275e"
+  },
+  "multiplayerpurple": {
+    "value": "#8a38f5"
+  },
+  "multiplayerpurplehover": {
+    "value": "#7a2ed6"
+  },
+  "multiplayerpurplesecondary": {
+    "value": "#50297a"
+  },
+  "multiplayerred": {
+    "value": "#e03e1a"
+  },
+  "multiplayerredhover": {
+    "value": "#c4381c"
+  },
+  "multiplayerredsecondary": {
+    "value": "#7c2622"
+  },
+  "multiplayeryellow": {
+    "value": "#f3c11b"
+  },
+  "multiplayeryellowhover": {
+    "value": "#f2b50d"
+  },
+  "multiplayeryellowsecondary": {
+    "value": "#c58011"
+  },
+  "nodehandle": {
+    "value": "#7cc4f8"
+  },
+  "prototypeloadingbackdrop": {
+    "value": "#000000e5"
+  },
+  "scrollbar": {
+    "value": "#b3b3b380"
+  },
+  "shadow": {
+    "value": "#00000099"
+  },
+  "text": {
+    "value": "#ffffff",
+    "description": "Our default text color for most titles, tabs, and body text."
+  },
+  "text-assistive": {
+    "value": "#fc9ce0",
+    "description": "Pink text used when Figma is assisting you in some way (ex: in auto layout)"
+  },
+  "text-assistive-pressed": {
+    "value": "#fbb1ed"
+  },
+  "text-assistive-secondary": {
+    "value": "#fc9ce0"
+  },
+  "text-assistive-tertiary": {
+    "value": "#fc9ce0"
+  },
+  "text-brand": {
+    "value": "#79d297",
+    "description": "Text that is tinted to match the current product, typically used for things like links. For specifically referring to concepts in design, we can use color-text-design instead."
+  },
+  "text-brand-secondary": {
+    "value": "#79d297"
+  },
+  "text-brand-tertiary": {
+    "value": "#79d297"
+  },
+  "text-component": {
+    "value": "#d1a8ff"
+  },
+  "text-component-pressed": {
+    "value": "#d6b6fb"
+  },
+  "text-component-secondary": {
+    "value": "#7f699b"
+  },
+  "text-component-tertiary": {
+    "value": "#7f699b"
+  },
+  "text-danger": {
+    "value": "#fca397",
+    "description": "Red text used to alert users about an error."
+  },
+  "text-danger-secondary": {
+    "value": "#fca397"
+  },
+  "text-danger-tertiary": {
+    "value": "#fca397"
+  },
+  "text-design": {
+    "value": "#7cc4f8"
+  },
+  "text-design-pressed": {
+    "value": "#a8d7fa"
+  },
+  "text-design-secondary": {
+    "value": "#7cc4f8"
+  },
+  "text-design-tertiary": {
+    "value": "#7cc4f8"
+  },
+  "text-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-figjam": {
+    "value": "#c5b2dc"
+  },
+  "text-figjam-pressed": {
+    "value": "#d6b6fb"
+  },
+  "text-figjam-secondary": {
+    "value": "#7f699b"
+  },
+  "text-figjam-tertiary": {
+    "value": "#7f699b"
+  },
+  "text-handoff": {
+    "value": "#79d297"
+  },
+  "text-handoff-secondary": {
+    "value": "#79d297"
+  },
+  "text-handoff-tertiary": {
+    "value": "#79d297"
+  },
+  "text-hover": {
+    "value": "#ffffff"
+  },
+  "text-measure": {
+    "value": "#fca397"
+  },
+  "text-measure-secondary": {
+    "value": "#fca397"
+  },
+  "text-measure-tertiary": {
+    "value": "#fca397"
+  },
+  "text-menu": {
+    "value": "#ffffff"
+  },
+  "text-menu-danger": {
+    "value": "#fca397"
+  },
+  "text-menu-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-menu-hover": {
+    "value": "#ffffff"
+  },
+  "text-menu-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "text-menu-onselected": {
+    "value": "#ffffff"
+  },
+  "text-menu-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-menu-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-menu-selected": {
+    "value": "#79d297"
+  },
+  "text-menu-selected-secondary": {
+    "value": "#79d297"
+  },
+  "text-menu-selected-tertiary": {
+    "value": "#79d297"
+  },
+  "text-menu-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-menu-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-menu-warning": {
+    "value": "#f7d15f"
+  },
+  "text-onassistive": {
+    "value": "#ffffff"
+  },
+  "text-onassistive-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onassistive-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onbrand": {
+    "value": "#ffffff",
+    "description": "Used for text against a “background with a fill color” (for example, a blue / purple background in our “Share” button)"
+  },
+  "text-onbrand-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onbrand-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-oncomponent": {
+    "value": "#ffffff"
+  },
+  "text-oncomponent-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-oncomponent-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-ondanger": {
+    "value": "#ffffff"
+  },
+  "text-ondanger-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-ondanger-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-ondesign": {
+    "value": "#ffffff"
+  },
+  "text-ondesign-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-ondesign-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-ondisabled": {
+    "value": "#2c2c2c"
+  },
+  "text-onfigjam": {
+    "value": "#ffffff"
+  },
+  "text-onfigjam-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onfigjam-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-oninverse": {
+    "value": "#000000e5"
+  },
+  "text-onmeasure": {
+    "value": "#ffffff"
+  },
+  "text-onmeasure-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onmeasure-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onselected": {
+    "value": "#ffffffe5"
+  },
+  "text-onselected-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "text-onselected-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onsuccess": {
+    "value": "#ffffff"
+  },
+  "text-onsuccess-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onsuccess-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onwarning": {
+    "value": "#000000e5"
+  },
+  "text-onwarning-secondary": {
+    "value": "#00000080"
+  },
+  "text-onwarning-tertiary": {
+    "value": "#0000004d"
+  },
+  "text-secondary": {
+    "value": "#ffffffb2",
+    "description": "Our secondary text color for inactive tabs, labels, timestamps, and other text that needs to be “lighter” in order to create hierarchy."
+  },
+  "text-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-selected": {
+    "value": "#79d297"
+  },
+  "text-selected-secondary": {
+    "value": "#79d297"
+  },
+  "text-selected-tertiary": {
+    "value": "#79d297"
+  },
+  "text-success": {
+    "value": "#79d297"
+  },
+  "text-success-secondary": {
+    "value": "#79d297"
+  },
+  "text-success-tertiary": {
+    "value": "#79d297"
+  },
+  "text-tertiary": {
+    "value": "#ffffff66",
+    "description": "Primarily used for placeholder text (for example in a search input), or for hierarchy below secondary text. Note that text at this level is below our color contrast threshold, and may not be readable to all users."
+  },
+  "text-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-toolbar": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-danger": {
+    "value": "#fca397"
+  },
+  "text-toolbar-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-toolbar-hover": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-ondisabled": {
+    "value": "#2c2c2c"
+  },
+  "text-toolbar-onselected": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-toolbar-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-selected": {
+    "value": "#79d297"
+  },
+  "text-toolbar-selected-secondary": {
+    "value": "#79d297"
+  },
+  "text-toolbar-selected-tertiary": {
+    "value": "#79d297"
+  },
+  "text-toolbar-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-toolbar-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-warning": {
+    "value": "#f7d15f"
+  },
+  "text-tooltip": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-danger": {
+    "value": "#fca397"
+  },
+  "text-tooltip-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-tooltip-hover": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "text-tooltip-onselected": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-tooltip-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-selected": {
+    "value": "#79d297"
+  },
+  "text-tooltip-selected-secondary": {
+    "value": "#79d297"
+  },
+  "text-tooltip-selected-tertiary": {
+    "value": "#79d297"
+  },
+  "text-tooltip-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-tooltip-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-warning": {
+    "value": "#f7d15f"
+  },
+  "text-warning": {
+    "value": "#f7d15f",
+    "description": "Yellow text used to warn users about a potential problem."
+  },
+  "text-warning-secondary": {
+    "value": "#f7d15f"
+  },
+  "text-warning-tertiary": {
+    "value": "#f7d15f"
+  },
+  "texthighlight": {
+    "value": "#14ae5c66"
+  },
+  "textondarkcanvas": {
+    "value": "#ffffffe5"
+  },
+  "textondarkcanvassecondary": {
+    "value": "#ffffffb2"
+  },
+  "textonlightcanvas": {
+    "value": "#000000e5"
+  },
+  "textonlightcanvassecondary": {
+    "value": "#0000004d"
+  },
+  "textonmultiplayerblue": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayergreen": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayergrey": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayerpink": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayerpurple": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayerred": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayeryellow": {
+    "value": "#000000e5"
+  },
+  "textonvoting": {
+    "value": "#000000e5"
+  }
+}
diff --git a/packages/theme/tokens/colors/devmode-light.json b/packages/theme/tokens/colors/devmode-light.json
new file mode 100644
index 0000000..083291f
--- /dev/null
+++ b/packages/theme/tokens/colors/devmode-light.json
@@ -0,0 +1,1506 @@
+{
+  "bg": {
+    "value": "#ffffff",
+    "description": "Our default background color"
+  },
+  "bg-assistive": {
+    "value": "#ff24bd"
+  },
+  "bg-assistive-hover": {
+    "value": "#ea10ac"
+  },
+  "bg-assistive-pressed": {
+    "value": "#ea10ac"
+  },
+  "bg-assistive-secondary": {
+    "value": "#cb0b96"
+  },
+  "bg-assistive-tertiary": {
+    "value": "#ffe0fc"
+  },
+  "bg-brand": {
+    "value": "#14ae5c",
+    "description": "A fill tinted to match the accent color of the current product."
+  },
+  "bg-brand-hover": {
+    "value": "#009951"
+  },
+  "bg-brand-pressed": {
+    "value": "#009951"
+  },
+  "bg-brand-secondary": {
+    "value": "#008043"
+  },
+  "bg-brand-tertiary": {
+    "value": "#cff7d3"
+  },
+  "bg-component": {
+    "value": "#9747ff"
+  },
+  "bg-component-hover": {
+    "value": "#8638e5"
+  },
+  "bg-component-pressed": {
+    "value": "#8638e5"
+  },
+  "bg-component-secondary": {
+    "value": "#7c2bda"
+  },
+  "bg-component-tertiary": {
+    "value": "#f1e5ff"
+  },
+  "bg-danger": {
+    "value": "#f24822",
+    "description": "Red fill color behind destructive buttons, and error banners."
+  },
+  "bg-danger-hover": {
+    "value": "#dc3412"
+  },
+  "bg-danger-pressed": {
+    "value": "#dc3412"
+  },
+  "bg-danger-secondary": {
+    "value": "#bd2915"
+  },
+  "bg-danger-tertiary": {
+    "value": "#ffe2e0"
+  },
+  "bg-design": {
+    "value": "#0d99ff"
+  },
+  "bg-design-hover": {
+    "value": "#007be5"
+  },
+  "bg-design-pressed": {
+    "value": "#007be5"
+  },
+  "bg-design-secondary": {
+    "value": "#0768cf"
+  },
+  "bg-design-tertiary": {
+    "value": "#e5f4ff"
+  },
+  "bg-disabled": {
+    "value": "#d9d9d9"
+  },
+  "bg-disabled-secondary": {
+    "value": "#b3b3b3"
+  },
+  "bg-figjam": {
+    "value": "#9747ff",
+    "description": "Purple fill color used for backgrounds like a button that opens in FigJam."
+  },
+  "bg-figjam-hover": {
+    "value": "#8638e5"
+  },
+  "bg-figjam-pressed": {
+    "value": "#8638e5"
+  },
+  "bg-figjam-secondary": {
+    "value": "#7c2bda"
+  },
+  "bg-figjam-tertiary": {
+    "value": "#f1e5ff"
+  },
+  "bg-handoff": {
+    "value": "#14ae5c",
+    "description": "Green fill color used for backgrounds like a button that opens in Dev Mode."
+  },
+  "bg-handoff-hover": {
+    "value": "#009951"
+  },
+  "bg-handoff-pressed": {
+    "value": "#009951"
+  },
+  "bg-handoff-secondary": {
+    "value": "#008043"
+  },
+  "bg-handoff-tertiary": {
+    "value": "#daecdf"
+  },
+  "bg-hover": {
+    "value": "#f5f5f5",
+    "description": "A light grey hover fill color behind icons, and selectable elements."
+  },
+  "bg-info": {
+    "value": "#daecdf"
+  },
+  "bg-inverse": {
+    "value": "#2c2c2c"
+  },
+  "bg-measure": {
+    "value": "#f24822"
+  },
+  "bg-measure-hover": {
+    "value": "#dc3412"
+  },
+  "bg-measure-pressed": {
+    "value": "#dc3412"
+  },
+  "bg-measure-secondary": {
+    "value": "#bd2915"
+  },
+  "bg-measure-tertiary": {
+    "value": "#ffe2e0"
+  },
+  "bg-menu": {
+    "value": "#1e1e1e",
+    "description": "The dark fill color of our menus "
+  },
+  "bg-menu-disabled": {
+    "value": "#757575"
+  },
+  "bg-menu-hover": {
+    "value": "#2c2c2c"
+  },
+  "bg-menu-pressed": {
+    "value": "#2c2c2c"
+  },
+  "bg-menu-secondary": {
+    "value": "#383838"
+  },
+  "bg-menu-selected": {
+    "value": "#14ae5c"
+  },
+  "bg-menu-selected-hover": {
+    "value": "#009951"
+  },
+  "bg-menu-selected-pressed": {
+    "value": "#009951"
+  },
+  "bg-menu-selected-secondary": {
+    "value": "#476656"
+  },
+  "bg-menu-selected-tertiary": {
+    "value": "#476656"
+  },
+  "bg-menu-tertiary": {
+    "value": "#444444"
+  },
+  "bg-onselected": {
+    "value": "#aff4c6"
+  },
+  "bg-onselected-hover": {
+    "value": "#aff4c6"
+  },
+  "bg-onselected-pressed": {
+    "value": "#aff4c6"
+  },
+  "bg-pressed": {
+    "value": "#f5f5f5"
+  },
+  "bg-secondary": {
+    "value": "#f5f5f5",
+    "description": "Our secondary background color for most containers."
+  },
+  "bg-selected": {
+    "value": "#daecdf",
+    "description": "A lightly tinted selected fill color for selected elements."
+  },
+  "bg-selected-hover": {
+    "value": "#c3e0cc"
+  },
+  "bg-selected-pressed": {
+    "value": "#c3e0cc"
+  },
+  "bg-selected-secondary": {
+    "value": "#f1f8f2"
+  },
+  "bg-selected-strong": {
+    "value": "#14ae5c"
+  },
+  "bg-selected-tertiary": {
+    "value": "#f1f8f2"
+  },
+  "bg-success": {
+    "value": "#14ae5c"
+  },
+  "bg-success-hover": {
+    "value": "#009951"
+  },
+  "bg-success-pressed": {
+    "value": "#009951"
+  },
+  "bg-success-secondary": {
+    "value": "#008043"
+  },
+  "bg-success-tertiary": {
+    "value": "#cff7d3"
+  },
+  "bg-tertiary": {
+    "value": "#e6e6e6"
+  },
+  "bg-toolbar": {
+    "value": "#2c2c2c",
+    "description": "The dark fill color of our UI2 editor toolbar"
+  },
+  "bg-toolbar-disabled": {
+    "value": "#757575"
+  },
+  "bg-toolbar-hover": {
+    "value": "#111111"
+  },
+  "bg-toolbar-pressed": {
+    "value": "#111111"
+  },
+  "bg-toolbar-secondary": {
+    "value": "#383838"
+  },
+  "bg-toolbar-selected": {
+    "value": "#14ae5c"
+  },
+  "bg-toolbar-selected-hover": {
+    "value": "#009951"
+  },
+  "bg-toolbar-selected-pressed": {
+    "value": "#009951"
+  },
+  "bg-toolbar-selected-secondary": {
+    "value": "#008043"
+  },
+  "bg-toolbar-selected-tertiary": {
+    "value": "#14ae5c"
+  },
+  "bg-toolbar-tertiary": {
+    "value": "#444444"
+  },
+  "bg-tooltip": {
+    "value": "#1e1e1e"
+  },
+  "bg-tooltip-disabled": {
+    "value": "#757575"
+  },
+  "bg-tooltip-hover": {
+    "value": "#2c2c2c"
+  },
+  "bg-tooltip-pressed": {
+    "value": "#2c2c2c"
+  },
+  "bg-tooltip-secondary": {
+    "value": "#383838"
+  },
+  "bg-tooltip-selected": {
+    "value": "#14ae5c"
+  },
+  "bg-tooltip-selected-hover": {
+    "value": "#009951"
+  },
+  "bg-tooltip-selected-pressed": {
+    "value": "#009951"
+  },
+  "bg-tooltip-selected-secondary": {
+    "value": "#476656"
+  },
+  "bg-tooltip-selected-tertiary": {
+    "value": "#476656"
+  },
+  "bg-tooltip-tertiary": {
+    "value": "#444444"
+  },
+  "bg-warning": {
+    "value": "#ffcd29",
+    "description": "Yellow fill color for warning banners"
+  },
+  "bg-warning-hover": {
+    "value": "#ffc21a"
+  },
+  "bg-warning-pressed": {
+    "value": "#ffc21a"
+  },
+  "bg-warning-secondary": {
+    "value": "#fab815"
+  },
+  "bg-warning-tertiary": {
+    "value": "#fff1c2"
+  },
+  "bghoverondarkcanvas": {
+    "value": "#ffffff33"
+  },
+  "bghoveronlightcanvas": {
+    "value": "#00000033"
+  },
+  "bghovertransparent": {
+    "value": "#0000000d"
+  },
+  "bgsecondaryoncanvas": {
+    "value": "#e6e6e6"
+  },
+  "bgselectedarea": {
+    "value": "#14ae5c33"
+  },
+  "bgtransparent": {
+    "value": "#ffffff99"
+  },
+  "bgtransparent-secondary-hover": {
+    "value": "#0000001a"
+  },
+  "bgtransparent-secondary-pressed": {
+    "value": "#00000026"
+  },
+  "bgtransparentsecondary": {
+    "value": "#ffffff"
+  },
+  "bgvoting": {
+    "value": "#ffcd29"
+  },
+  "bgvotingsecondary": {
+    "value": "#fff1c2"
+  },
+  "bgvotingtertiary": {
+    "value": "#fffbeb"
+  },
+  "bgvotingwheeldial": {
+    "value": "#fffbeb"
+  },
+  "bgvotingwheelhover": {
+    "value": "#fff1c2"
+  },
+  "border": {
+    "value": "#e6e6e6",
+    "description": "Our default border color used as a divider between sections, or around inputs."
+  },
+  "border-assistive": {
+    "value": "#ffbdf2"
+  },
+  "border-assistive-strong": {
+    "value": "#ea10ac"
+  },
+  "border-brand": {
+    "value": "#aff4c6"
+  },
+  "border-brand-strong": {
+    "value": "#009951"
+  },
+  "border-component": {
+    "value": "#e4ccff"
+  },
+  "border-component-hover": {
+    "value": "#9747ff"
+  },
+  "border-component-strong": {
+    "value": "#8638e5"
+  },
+  "border-danger": {
+    "value": "#ffc7c2"
+  },
+  "border-danger-strong": {
+    "value": "#dc3412"
+  },
+  "border-design": {
+    "value": "#bde3ff"
+  },
+  "border-design-strong": {
+    "value": "#007be5"
+  },
+  "border-disabled": {
+    "value": "#e6e6e6"
+  },
+  "border-disabled-strong": {
+    "value": "#0000004d"
+  },
+  "border-figjam": {
+    "value": "#e4ccff"
+  },
+  "border-figjam-strong": {
+    "value": "#8638e5"
+  },
+  "border-handoff": {
+    "value": "#aff4c6"
+  },
+  "border-handoff-strong": {
+    "value": "#009951"
+  },
+  "border-measure": {
+    "value": "#ffc7c2"
+  },
+  "border-measure-strong": {
+    "value": "#dc3412"
+  },
+  "border-menu": {
+    "value": "#383838",
+    "description": "Used for borders or dividers within a menu element."
+  },
+  "border-menu-disabled": {
+    "value": "#383838"
+  },
+  "border-menu-disabled-strong": {
+    "value": "#383838"
+  },
+  "border-menu-onselected": {
+    "value": "#85e0a3"
+  },
+  "border-menu-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "border-menu-selected": {
+    "value": "#14ae5c"
+  },
+  "border-menu-selected-strong": {
+    "value": "#85e0a3"
+  },
+  "border-menu-strong": {
+    "value": "#ffffff"
+  },
+  "border-onassistive": {
+    "value": "#ea10ac"
+  },
+  "border-onassistive-strong": {
+    "value": "#ffffff"
+  },
+  "border-onbrand": {
+    "value": "#009951"
+  },
+  "border-onbrand-strong": {
+    "value": "#ffffff",
+    "description": "Used for borders against a bg-brand background"
+  },
+  "border-oncomponent": {
+    "value": "#8638e5"
+  },
+  "border-oncomponent-strong": {
+    "value": "#ffffff"
+  },
+  "border-ondanger": {
+    "value": "#dc3412"
+  },
+  "border-ondanger-strong": {
+    "value": "#ffffff"
+  },
+  "border-ondesign": {
+    "value": "#007be5"
+  },
+  "border-ondesign-strong": {
+    "value": "#ffffff"
+  },
+  "border-onfigjam": {
+    "value": "#8638e5"
+  },
+  "border-onfigjam-strong": {
+    "value": "#8638e5"
+  },
+  "border-onmeasure": {
+    "value": "#dc3412"
+  },
+  "border-onmeasure-strong": {
+    "value": "#ffffff"
+  },
+  "border-onselected": {
+    "value": "#aff4c6"
+  },
+  "border-onselected-strong": {
+    "value": "#000000e5"
+  },
+  "border-onsuccess": {
+    "value": "#009951"
+  },
+  "border-onsuccess-strong": {
+    "value": "#ffffff"
+  },
+  "border-onwarning": {
+    "value": "#fab815"
+  },
+  "border-onwarning-strong": {
+    "value": "#000000e5"
+  },
+  "border-selected": {
+    "value": "#14ae5c",
+    "description": "Default selection border color we use for focused / selected inputs."
+  },
+  "border-selected-strong": {
+    "value": "#009951",
+    "description": "When presenting a selected border against an already selected background, we sometimes need to increase the prominence of the selected border."
+  },
+  "border-strong": {
+    "value": "#2c2c2c",
+    "description": "A much darker border color that we can use for emphasis around some UI elements."
+  },
+  "border-success": {
+    "value": "#aff4c6"
+  },
+  "border-success-strong": {
+    "value": "#009951"
+  },
+  "border-toolbar": {
+    "value": "#444444"
+  },
+  "border-toolbar-disabled": {
+    "value": "#ffffff66"
+  },
+  "border-toolbar-onselected": {
+    "value": "#ffffff"
+  },
+  "border-toolbar-selected": {
+    "value": "#14ae5c"
+  },
+  "border-toolbar-selected-strong": {
+    "value": "#85e0a3"
+  },
+  "border-toolbar-strong": {
+    "value": "#ffffff"
+  },
+  "border-tooltip": {
+    "value": "#383838"
+  },
+  "border-tooltip-disabled": {
+    "value": "#383838"
+  },
+  "border-tooltip-disabled-strong": {
+    "value": "#383838"
+  },
+  "border-tooltip-onselected": {
+    "value": "#009951"
+  },
+  "border-tooltip-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "border-tooltip-selected": {
+    "value": "#14ae5c"
+  },
+  "border-tooltip-selected-strong": {
+    "value": "#85e0a3"
+  },
+  "border-tooltip-strong": {
+    "value": "#ffffff"
+  },
+  "border-warning": {
+    "value": "#ffe8a3"
+  },
+  "border-warning-strong": {
+    "value": "#b86200"
+  },
+  "bordertranslucent": {
+    "value": "#0000001a"
+  },
+  "conditionalborder": {
+    "value": "#ffffff00"
+  },
+  "icon": {
+    "value": "#000000e5",
+    "description": "Our default icon color"
+  },
+  "icon-assistive": {
+    "value": "#ea10ac",
+    "description": "Pink icons used when Figma is assisting you in some way."
+  },
+  "icon-assistive-pressed": {
+    "value": "#cb0b96"
+  },
+  "icon-assistive-secondary": {
+    "value": "#ea10ac"
+  },
+  "icon-assistive-tertiary": {
+    "value": "#ea10ac"
+  },
+  "icon-brand": {
+    "value": "#009951",
+    "description": "An icon tinted to match the accent color of the current product."
+  },
+  "icon-brand-pressed": {
+    "value": "#008043"
+  },
+  "icon-brand-secondary": {
+    "value": "#85e0a3"
+  },
+  "icon-brand-tertiary": {
+    "value": "#aff4c6"
+  },
+  "icon-component": {
+    "value": "#8638e5"
+  },
+  "icon-component-pressed": {
+    "value": "#7c2bda"
+  },
+  "icon-component-secondary": {
+    "value": "#c5b2dc"
+  },
+  "icon-component-tertiary": {
+    "value": "#c5b2dc"
+  },
+  "icon-danger": {
+    "value": "#f24822",
+    "description": "Red icons used to alert users about an error."
+  },
+  "icon-danger-hover": {
+    "value": "#bd2915"
+  },
+  "icon-danger-pressed": {
+    "value": "#bd2915"
+  },
+  "icon-danger-secondary": {
+    "value": "#f24822"
+  },
+  "icon-danger-secondary-hover": {
+    "value": "#f24822"
+  },
+  "icon-danger-tertiary": {
+    "value": "#f24822"
+  },
+  "icon-design": {
+    "value": "#007be5"
+  },
+  "icon-design-pressed": {
+    "value": "#0768cf"
+  },
+  "icon-design-secondary": {
+    "value": "#007be5"
+  },
+  "icon-design-tertiary": {
+    "value": "#007be5"
+  },
+  "icon-disabled": {
+    "value": "#0000004d"
+  },
+  "icon-figjam": {
+    "value": "#8638e5"
+  },
+  "icon-figjam-pressed": {
+    "value": "#7c2bda"
+  },
+  "icon-figjam-secondary": {
+    "value": "#c5b2dc"
+  },
+  "icon-figjam-tertiary": {
+    "value": "#c5b2dc"
+  },
+  "icon-handoff": {
+    "value": "#009951"
+  },
+  "icon-handoff-pressed": {
+    "value": "#008043"
+  },
+  "icon-handoff-secondary": {
+    "value": "#009951"
+  },
+  "icon-handoff-tertiary": {
+    "value": "#009951"
+  },
+  "icon-hover": {
+    "value": "#000000e5"
+  },
+  "icon-measure": {
+    "value": "#f24822"
+  },
+  "icon-measure-hover": {
+    "value": "#bd2915"
+  },
+  "icon-measure-pressed": {
+    "value": "#bd2915"
+  },
+  "icon-measure-secondary": {
+    "value": "#f24822"
+  },
+  "icon-measure-secondary-hover": {
+    "value": "#f24822"
+  },
+  "icon-measure-tertiary": {
+    "value": "#f24822"
+  },
+  "icon-menu": {
+    "value": "#ffffff"
+  },
+  "icon-menu-danger": {
+    "value": "#f24822"
+  },
+  "icon-menu-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-menu-hover": {
+    "value": "#ffffff"
+  },
+  "icon-menu-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "icon-menu-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-menu-pressed": {
+    "value": "#14ae5c"
+  },
+  "icon-menu-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-menu-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-menu-selected": {
+    "value": "#85e0a3"
+  },
+  "icon-menu-selected-secondary": {
+    "value": "#85e0a3"
+  },
+  "icon-menu-selected-tertiary": {
+    "value": "#85e0a3"
+  },
+  "icon-menu-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-menu-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-menu-warning": {
+    "value": "#ffcd29"
+  },
+  "icon-onassistive": {
+    "value": "#ffffff"
+  },
+  "icon-onassistive-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onassistive-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onbrand": {
+    "value": "#ffffff",
+    "description": "Icons against a “background with a fill color” (for example, a blue / purple background in our “Share” button)"
+  },
+  "icon-onbrand-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onbrand-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-oncomponent": {
+    "value": "#ffffff"
+  },
+  "icon-oncomponent-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-oncomponent-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-ondanger": {
+    "value": "#ffffff"
+  },
+  "icon-ondanger-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-ondanger-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-ondesign": {
+    "value": "#ffffff"
+  },
+  "icon-ondesign-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-ondesign-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-ondisabled": {
+    "value": "#ffffff"
+  },
+  "icon-onfigjam": {
+    "value": "#ffffff"
+  },
+  "icon-onfigjam-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onfigjam-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-oninverse": {
+    "value": "#ffffffe5"
+  },
+  "icon-onmeasure": {
+    "value": "#ffffff"
+  },
+  "icon-onmeasure-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onmeasure-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onselected": {
+    "value": "#000000e5"
+  },
+  "icon-onselected-secondary": {
+    "value": "#00000080"
+  },
+  "icon-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "icon-onselected-tertiary": {
+    "value": "#0000004d"
+  },
+  "icon-onsuccess": {
+    "value": "#ffffff"
+  },
+  "icon-onsuccess-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onsuccess-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onwarning": {
+    "value": "#000000e5"
+  },
+  "icon-onwarning-secondary": {
+    "value": "#00000080"
+  },
+  "icon-onwarning-tertiary": {
+    "value": "#0000004d"
+  },
+  "icon-pressed": {
+    "value": "#009951"
+  },
+  "icon-secondary": {
+    "value": "#00000080",
+    "description": "Our secondary icon color for inactive elements that need to be “lighter” in order to create hierarchy."
+  },
+  "icon-secondary-hover": {
+    "value": "#000000e5"
+  },
+  "icon-selected": {
+    "value": "#009951"
+  },
+  "icon-selected-secondary": {
+    "value": "#009951"
+  },
+  "icon-selected-tertiary": {
+    "value": "#009951"
+  },
+  "icon-success": {
+    "value": "#14ae5c",
+    "description": "Green icons used for confirmation, and approval."
+  },
+  "icon-success-pressed": {
+    "value": "#008043"
+  },
+  "icon-success-secondary": {
+    "value": "#14ae5c"
+  },
+  "icon-success-tertiary": {
+    "value": "#14ae5c"
+  },
+  "icon-tertiary": {
+    "value": "#0000004d",
+    "description": "Our tertiary icon color primarily used for carets"
+  },
+  "icon-tertiary-hover": {
+    "value": "#000000e5"
+  },
+  "icon-toolbar": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-danger": {
+    "value": "#f24822"
+  },
+  "icon-toolbar-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-toolbar-hover": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-ondisabled": {
+    "value": "#2c2c2c"
+  },
+  "icon-toolbar-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-pressed": {
+    "value": "#14ae5c"
+  },
+  "icon-toolbar-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-toolbar-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-selected": {
+    "value": "#85e0a3"
+  },
+  "icon-toolbar-selected-secondary": {
+    "value": "#85e0a3"
+  },
+  "icon-toolbar-selected-tertiary": {
+    "value": "#85e0a3"
+  },
+  "icon-toolbar-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-toolbar-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-warning": {
+    "value": "#ffcd29"
+  },
+  "icon-tooltip": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-danger": {
+    "value": "#f24822"
+  },
+  "icon-tooltip-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-tooltip-hover": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "icon-tooltip-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-pressed": {
+    "value": "#14ae5c"
+  },
+  "icon-tooltip-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-tooltip-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-selected": {
+    "value": "#85e0a3"
+  },
+  "icon-tooltip-selected-secondary": {
+    "value": "#85e0a3"
+  },
+  "icon-tooltip-selected-tertiary": {
+    "value": "#85e0a3"
+  },
+  "icon-tooltip-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-tooltip-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-warning": {
+    "value": "#ffcd29"
+  },
+  "icon-warning": {
+    "value": "#ffcd29",
+    "description": "Yellow icons used to warn users about a potential problem."
+  },
+  "icon-warning-pressed": {
+    "value": "#b86200"
+  },
+  "icon-warning-secondary": {
+    "value": "#ffcd29"
+  },
+  "icon-warning-tertiary": {
+    "value": "#ffcd29"
+  },
+  "icondesignfilesecondary": {
+    "value": "#80caff"
+  },
+  "iconfigjamfilesecondary": {
+    "value": "#d9b8ff"
+  },
+  "iconondarkcanvas": {
+    "value": "#ffffffe5"
+  },
+  "icononlightcanvas": {
+    "value": "#000000e5"
+  },
+  "icononvoting": {
+    "value": "#000000e5"
+  },
+  "iconprototypefile": {
+    "value": "#d9d9d9"
+  },
+  "iconprototypefilesecondary": {
+    "value": "#2c2c2c"
+  },
+  "iconpublishedfile": {
+    "value": "#2c2c2c"
+  },
+  "iconpublishedfilesecondary": {
+    "value": "#757575"
+  },
+  "loading": {
+    "value": "#0000001a"
+  },
+  "loadingmenu": {
+    "value": "#ffffff1a"
+  },
+  "loadingsecondary": {
+    "value": "#0000000d"
+  },
+  "loadingsecondarymenu": {
+    "value": "#ffffff0d"
+  },
+  "modalbackdrop": {
+    "value": "#00000080"
+  },
+  "multiplayerblue": {
+    "value": "#007be5"
+  },
+  "multiplayerbluehover": {
+    "value": "#0768cf"
+  },
+  "multiplayerbluesecondary": {
+    "value": "#034ac1"
+  },
+  "multiplayergreen": {
+    "value": "#14ae5c"
+  },
+  "multiplayergreenhover": {
+    "value": "#009951"
+  },
+  "multiplayergreensecondary": {
+    "value": "#036838"
+  },
+  "multiplayergrey": {
+    "value": "#667799"
+  },
+  "multiplayergreyhover": {
+    "value": "#536383"
+  },
+  "multiplayergreysecondary": {
+    "value": "#394360"
+  },
+  "multiplayerpink": {
+    "value": "#ff24bd"
+  },
+  "multiplayerpinkhover": {
+    "value": "#ea10ac"
+  },
+  "multiplayerpinksecondary": {
+    "value": "#971172"
+  },
+  "multiplayerpurple": {
+    "value": "#9747ff"
+  },
+  "multiplayerpurplehover": {
+    "value": "#8638e5"
+  },
+  "multiplayerpurplesecondary": {
+    "value": "#681abb"
+  },
+  "multiplayerred": {
+    "value": "#f24822"
+  },
+  "multiplayerredhover": {
+    "value": "#dc3412"
+  },
+  "multiplayerredsecondary": {
+    "value": "#9f1f18"
+  },
+  "multiplayeryellow": {
+    "value": "#ffcd29"
+  },
+  "multiplayeryellowhover": {
+    "value": "#ffc21a"
+  },
+  "multiplayeryellowsecondary": {
+    "value": "#eba611"
+  },
+  "nodehandle": {
+    "value": "#80caff"
+  },
+  "prototypeloadingbackdrop": {
+    "value": "#000000e5"
+  },
+  "scrollbar": {
+    "value": "#b3b3b380"
+  },
+  "shadow": {
+    "value": "#00000026"
+  },
+  "text": {
+    "value": "#000000e5",
+    "description": "Our default text color for most titles, tabs, and body text."
+  },
+  "text-assistive": {
+    "value": "#ea10ac",
+    "description": "Pink text used when Figma is assisting you in some way (ex: in auto layout)"
+  },
+  "text-assistive-pressed": {
+    "value": "#cb0b96"
+  },
+  "text-assistive-secondary": {
+    "value": "#ea10ac"
+  },
+  "text-assistive-tertiary": {
+    "value": "#ea10ac"
+  },
+  "text-brand": {
+    "value": "#009951",
+    "description": "Text that is tinted to match the current product, typically used for things like links. For specifically referring to concepts in design, we can use color-text-design instead."
+  },
+  "text-brand-secondary": {
+    "value": "#009951"
+  },
+  "text-brand-tertiary": {
+    "value": "#009951"
+  },
+  "text-component": {
+    "value": "#8638e5"
+  },
+  "text-component-pressed": {
+    "value": "#7c2bda"
+  },
+  "text-component-secondary": {
+    "value": "#c5b2dc"
+  },
+  "text-component-tertiary": {
+    "value": "#c5b2dc"
+  },
+  "text-danger": {
+    "value": "#dc3412",
+    "description": "Red text used to alert users about an error."
+  },
+  "text-danger-secondary": {
+    "value": "#dc3412"
+  },
+  "text-danger-tertiary": {
+    "value": "#dc3412"
+  },
+  "text-design": {
+    "value": "#007be5"
+  },
+  "text-design-pressed": {
+    "value": "#0768cf"
+  },
+  "text-design-secondary": {
+    "value": "#007be5"
+  },
+  "text-design-tertiary": {
+    "value": "#007be5"
+  },
+  "text-disabled": {
+    "value": "#0000004d"
+  },
+  "text-figjam": {
+    "value": "#8638e5"
+  },
+  "text-figjam-pressed": {
+    "value": "#7c2bda"
+  },
+  "text-figjam-secondary": {
+    "value": "#c5b2dc"
+  },
+  "text-figjam-tertiary": {
+    "value": "#c5b2dc"
+  },
+  "text-handoff": {
+    "value": "#009951"
+  },
+  "text-handoff-secondary": {
+    "value": "#009951"
+  },
+  "text-handoff-tertiary": {
+    "value": "#009951"
+  },
+  "text-hover": {
+    "value": "#000000e5"
+  },
+  "text-measure": {
+    "value": "#dc3412"
+  },
+  "text-measure-secondary": {
+    "value": "#dc3412"
+  },
+  "text-measure-tertiary": {
+    "value": "#dc3412"
+  },
+  "text-menu": {
+    "value": "#ffffff"
+  },
+  "text-menu-danger": {
+    "value": "#f24822"
+  },
+  "text-menu-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-menu-hover": {
+    "value": "#ffffff"
+  },
+  "text-menu-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "text-menu-onselected": {
+    "value": "#ffffff"
+  },
+  "text-menu-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-menu-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-menu-selected": {
+    "value": "#85e0a3"
+  },
+  "text-menu-selected-secondary": {
+    "value": "#85e0a3"
+  },
+  "text-menu-selected-tertiary": {
+    "value": "#85e0a3"
+  },
+  "text-menu-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-menu-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-menu-warning": {
+    "value": "#ffd966"
+  },
+  "text-onassistive": {
+    "value": "#ffffff"
+  },
+  "text-onassistive-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onassistive-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onbrand": {
+    "value": "#ffffff",
+    "description": "Used for text against a “background with a fill color” (for example, a blue / purple background in our “Share” button)"
+  },
+  "text-onbrand-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onbrand-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-oncomponent": {
+    "value": "#ffffff"
+  },
+  "text-oncomponent-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-oncomponent-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-ondanger": {
+    "value": "#ffffff"
+  },
+  "text-ondanger-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-ondanger-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-ondesign": {
+    "value": "#ffffff"
+  },
+  "text-ondesign-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-ondesign-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-ondisabled": {
+    "value": "#ffffff"
+  },
+  "text-onfigjam": {
+    "value": "#ffffff"
+  },
+  "text-onfigjam-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onfigjam-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-oninverse": {
+    "value": "#ffffffe5"
+  },
+  "text-onmeasure": {
+    "value": "#ffffff"
+  },
+  "text-onmeasure-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onmeasure-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onselected": {
+    "value": "#000000e5"
+  },
+  "text-onselected-secondary": {
+    "value": "#00000080"
+  },
+  "text-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "text-onselected-tertiary": {
+    "value": "#0000004d"
+  },
+  "text-onsuccess": {
+    "value": "#ffffff"
+  },
+  "text-onsuccess-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onsuccess-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onwarning": {
+    "value": "#000000e5"
+  },
+  "text-onwarning-secondary": {
+    "value": "#00000080"
+  },
+  "text-onwarning-tertiary": {
+    "value": "#0000004d"
+  },
+  "text-secondary": {
+    "value": "#00000080",
+    "description": "Our secondary text color for inactive tabs, labels, timestamps, and other text that needs to be “lighter” in order to create hierarchy."
+  },
+  "text-secondary-hover": {
+    "value": "#000000e5"
+  },
+  "text-selected": {
+    "value": "#009951"
+  },
+  "text-selected-secondary": {
+    "value": "#009951"
+  },
+  "text-selected-tertiary": {
+    "value": "#009951"
+  },
+  "text-success": {
+    "value": "#009951"
+  },
+  "text-success-secondary": {
+    "value": "#009951"
+  },
+  "text-success-tertiary": {
+    "value": "#009951"
+  },
+  "text-tertiary": {
+    "value": "#0000004d",
+    "description": "Primarily used for placeholder text (for example in a search input), or for hierarchy below secondary text. Note that text at this level is below our color contrast threshold, and may not be readable to all users."
+  },
+  "text-tertiary-hover": {
+    "value": "#000000e5"
+  },
+  "text-toolbar": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-danger": {
+    "value": "#ffafa3"
+  },
+  "text-toolbar-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-toolbar-hover": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-ondisabled": {
+    "value": "#2c2c2c"
+  },
+  "text-toolbar-onselected": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-toolbar-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-selected": {
+    "value": "#85e0a3"
+  },
+  "text-toolbar-selected-secondary": {
+    "value": "#85e0a3"
+  },
+  "text-toolbar-selected-tertiary": {
+    "value": "#85e0a3"
+  },
+  "text-toolbar-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-toolbar-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-warning": {
+    "value": "#ffd966"
+  },
+  "text-tooltip": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-danger": {
+    "value": "#ffafa3"
+  },
+  "text-tooltip-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-tooltip-hover": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "text-tooltip-onselected": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-tooltip-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-selected": {
+    "value": "#85e0a3"
+  },
+  "text-tooltip-selected-secondary": {
+    "value": "#85e0a3"
+  },
+  "text-tooltip-selected-tertiary": {
+    "value": "#85e0a3"
+  },
+  "text-tooltip-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-tooltip-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-warning": {
+    "value": "#ffd966"
+  },
+  "text-warning": {
+    "value": "#b86200",
+    "description": "Yellow text used to warn users about a potential problem."
+  },
+  "text-warning-secondary": {
+    "value": "#b86200"
+  },
+  "text-warning-tertiary": {
+    "value": "#b86200"
+  },
+  "texthighlight": {
+    "value": "#14ae5c66"
+  },
+  "textondarkcanvas": {
+    "value": "#ffffffe5"
+  },
+  "textondarkcanvassecondary": {
+    "value": "#ffffffb2"
+  },
+  "textonlightcanvas": {
+    "value": "#000000e5"
+  },
+  "textonlightcanvassecondary": {
+    "value": "#0000004d"
+  },
+  "textonmultiplayerblue": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayergreen": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayergrey": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayerpink": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayerpurple": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayerred": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayeryellow": {
+    "value": "#000000e5"
+  },
+  "textonvoting": {
+    "value": "#000000e5"
+  }
+}
diff --git a/packages/theme/tokens/colors/figjam-dark.json b/packages/theme/tokens/colors/figjam-dark.json
new file mode 100644
index 0000000..b9a747e
--- /dev/null
+++ b/packages/theme/tokens/colors/figjam-dark.json
@@ -0,0 +1,1506 @@
+{
+  "bg": {
+    "value": "#2c2c2c",
+    "description": "Our default background color"
+  },
+  "bg-assistive": {
+    "value": "#f316b0"
+  },
+  "bg-assistive-hover": {
+    "value": "#d01b9c"
+  },
+  "bg-assistive-pressed": {
+    "value": "#d01b9c"
+  },
+  "bg-assistive-secondary": {
+    "value": "#96207a"
+  },
+  "bg-assistive-tertiary": {
+    "value": "#68275e"
+  },
+  "bg-brand": {
+    "value": "#8a38f5",
+    "description": "A fill tinted to match the accent color of the current product."
+  },
+  "bg-brand-hover": {
+    "value": "#7a2ed6"
+  },
+  "bg-brand-pressed": {
+    "value": "#7a2ed6"
+  },
+  "bg-brand-secondary": {
+    "value": "#652ca8"
+  },
+  "bg-brand-tertiary": {
+    "value": "#473956"
+  },
+  "bg-component": {
+    "value": "#8a38f5"
+  },
+  "bg-component-hover": {
+    "value": "#7a2ed6"
+  },
+  "bg-component-pressed": {
+    "value": "#7a2ed6"
+  },
+  "bg-component-secondary": {
+    "value": "#652ca8"
+  },
+  "bg-component-tertiary": {
+    "value": "#473956"
+  },
+  "bg-danger": {
+    "value": "#e03e1a",
+    "description": "Red fill color behind destructive buttons, and error banners."
+  },
+  "bg-danger-hover": {
+    "value": "#c4381c"
+  },
+  "bg-danger-pressed": {
+    "value": "#c4381c"
+  },
+  "bg-danger-secondary": {
+    "value": "#963323"
+  },
+  "bg-danger-tertiary": {
+    "value": "#60332a"
+  },
+  "bg-design": {
+    "value": "#0c8ce9"
+  },
+  "bg-design-hover": {
+    "value": "#0a6dc2"
+  },
+  "bg-design-pressed": {
+    "value": "#0a6dc2"
+  },
+  "bg-design-secondary": {
+    "value": "#105cad"
+  },
+  "bg-design-tertiary": {
+    "value": "#394360"
+  },
+  "bg-disabled": {
+    "value": "#757575"
+  },
+  "bg-disabled-secondary": {
+    "value": "#b3b3b3"
+  },
+  "bg-figjam": {
+    "value": "#8a38f5",
+    "description": "Purple fill color used for backgrounds like a button that opens in FigJam."
+  },
+  "bg-figjam-hover": {
+    "value": "#7a2ed6"
+  },
+  "bg-figjam-pressed": {
+    "value": "#7a2ed6"
+  },
+  "bg-figjam-secondary": {
+    "value": "#652ca8"
+  },
+  "bg-figjam-tertiary": {
+    "value": "#473956"
+  },
+  "bg-handoff": {
+    "value": "#198f51",
+    "description": "Green fill color used for backgrounds like a button that opens in Dev Mode."
+  },
+  "bg-handoff-hover": {
+    "value": "#078348"
+  },
+  "bg-handoff-pressed": {
+    "value": "#078348"
+  },
+  "bg-handoff-secondary": {
+    "value": "#0a5c35"
+  },
+  "bg-handoff-tertiary": {
+    "value": "#476656"
+  },
+  "bg-hover": {
+    "value": "#383838",
+    "description": "A light grey hover fill color behind icons, and selectable elements."
+  },
+  "bg-info": {
+    "value": "#473956"
+  },
+  "bg-inverse": {
+    "value": "#ffffff"
+  },
+  "bg-measure": {
+    "value": "#e03e1a"
+  },
+  "bg-measure-hover": {
+    "value": "#c4381c"
+  },
+  "bg-measure-pressed": {
+    "value": "#c4381c"
+  },
+  "bg-measure-secondary": {
+    "value": "#963323"
+  },
+  "bg-measure-tertiary": {
+    "value": "#60332a"
+  },
+  "bg-menu": {
+    "value": "#1e1e1e",
+    "description": "The dark fill color of our menus "
+  },
+  "bg-menu-disabled": {
+    "value": "#757575"
+  },
+  "bg-menu-hover": {
+    "value": "#2c2c2c"
+  },
+  "bg-menu-pressed": {
+    "value": "#2c2c2c"
+  },
+  "bg-menu-secondary": {
+    "value": "#383838"
+  },
+  "bg-menu-selected": {
+    "value": "#8a38f5"
+  },
+  "bg-menu-selected-hover": {
+    "value": "#7a2ed6"
+  },
+  "bg-menu-selected-pressed": {
+    "value": "#7a2ed6"
+  },
+  "bg-menu-selected-secondary": {
+    "value": "#473956"
+  },
+  "bg-menu-selected-tertiary": {
+    "value": "#473956"
+  },
+  "bg-menu-tertiary": {
+    "value": "#444444"
+  },
+  "bg-onselected": {
+    "value": "#7f699b"
+  },
+  "bg-onselected-hover": {
+    "value": "#7f699b"
+  },
+  "bg-onselected-pressed": {
+    "value": "#7f699b"
+  },
+  "bg-pressed": {
+    "value": "#383838"
+  },
+  "bg-secondary": {
+    "value": "#383838",
+    "description": "Our secondary background color for most containers."
+  },
+  "bg-selected": {
+    "value": "#604d75",
+    "description": "A lightly tinted selected fill color for selected elements."
+  },
+  "bg-selected-hover": {
+    "value": "#6b5884"
+  },
+  "bg-selected-pressed": {
+    "value": "#6b5884"
+  },
+  "bg-selected-secondary": {
+    "value": "#473956"
+  },
+  "bg-selected-strong": {
+    "value": "#50297a"
+  },
+  "bg-selected-tertiary": {
+    "value": "#473956"
+  },
+  "bg-success": {
+    "value": "#198f51"
+  },
+  "bg-success-hover": {
+    "value": "#078348"
+  },
+  "bg-success-pressed": {
+    "value": "#078348"
+  },
+  "bg-success-secondary": {
+    "value": "#0a5c35"
+  },
+  "bg-success-tertiary": {
+    "value": "#476656"
+  },
+  "bg-tertiary": {
+    "value": "#444444"
+  },
+  "bg-toolbar": {
+    "value": "#2c2c2c",
+    "description": "The dark fill color of our UI2 editor toolbar"
+  },
+  "bg-toolbar-disabled": {
+    "value": "#757575"
+  },
+  "bg-toolbar-hover": {
+    "value": "#111111"
+  },
+  "bg-toolbar-pressed": {
+    "value": "#111111"
+  },
+  "bg-toolbar-secondary": {
+    "value": "#383838"
+  },
+  "bg-toolbar-selected": {
+    "value": "#8a38f5"
+  },
+  "bg-toolbar-selected-hover": {
+    "value": "#7a2ed6"
+  },
+  "bg-toolbar-selected-pressed": {
+    "value": "#7a2ed6"
+  },
+  "bg-toolbar-selected-secondary": {
+    "value": "#652ca8"
+  },
+  "bg-toolbar-selected-tertiary": {
+    "value": "#8a38f5"
+  },
+  "bg-toolbar-tertiary": {
+    "value": "#444444"
+  },
+  "bg-tooltip": {
+    "value": "#1e1e1e"
+  },
+  "bg-tooltip-disabled": {
+    "value": "#757575"
+  },
+  "bg-tooltip-hover": {
+    "value": "#2c2c2c"
+  },
+  "bg-tooltip-pressed": {
+    "value": "#2c2c2c"
+  },
+  "bg-tooltip-secondary": {
+    "value": "#383838"
+  },
+  "bg-tooltip-selected": {
+    "value": "#8a38f5"
+  },
+  "bg-tooltip-selected-hover": {
+    "value": "#7a2ed6"
+  },
+  "bg-tooltip-selected-pressed": {
+    "value": "#7a2ed6"
+  },
+  "bg-tooltip-selected-secondary": {
+    "value": "#473956"
+  },
+  "bg-tooltip-selected-tertiary": {
+    "value": "#473956"
+  },
+  "bg-tooltip-tertiary": {
+    "value": "#444444"
+  },
+  "bg-warning": {
+    "value": "#f3c11b",
+    "description": "Yellow fill color for warning banners"
+  },
+  "bg-warning-hover": {
+    "value": "#f2b50d"
+  },
+  "bg-warning-pressed": {
+    "value": "#f2b50d"
+  },
+  "bg-warning-secondary": {
+    "value": "#e4a711"
+  },
+  "bg-warning-tertiary": {
+    "value": "#5c4100"
+  },
+  "bghoverondarkcanvas": {
+    "value": "#ffffff33"
+  },
+  "bghoveronlightcanvas": {
+    "value": "#00000033"
+  },
+  "bghovertransparent": {
+    "value": "#ffffff0d"
+  },
+  "bgsecondaryoncanvas": {
+    "value": "#111111"
+  },
+  "bgselectedarea": {
+    "value": "#974aff33"
+  },
+  "bgtransparent": {
+    "value": "#00000099"
+  },
+  "bgtransparent-secondary-hover": {
+    "value": "#ffffff1a"
+  },
+  "bgtransparent-secondary-pressed": {
+    "value": "#ffffff26"
+  },
+  "bgtransparentsecondary": {
+    "value": "#ffffff26"
+  },
+  "bgvoting": {
+    "value": "#f3c11b"
+  },
+  "bgvotingsecondary": {
+    "value": "#fbe8ad"
+  },
+  "bgvotingtertiary": {
+    "value": "#fdf7dd"
+  },
+  "bgvotingwheeldial": {
+    "value": "#fdf7dd"
+  },
+  "bgvotingwheelhover": {
+    "value": "#fbe8ad"
+  },
+  "border": {
+    "value": "#444444",
+    "description": "Our default border color used as a divider between sections, or around inputs."
+  },
+  "border-assistive": {
+    "value": "#96207a"
+  },
+  "border-assistive-strong": {
+    "value": "#fc9ce0"
+  },
+  "border-brand": {
+    "value": "#652ca8"
+  },
+  "border-brand-strong": {
+    "value": "#d1a8ff"
+  },
+  "border-component": {
+    "value": "#652ca8"
+  },
+  "border-component-hover": {
+    "value": "#8a38f5"
+  },
+  "border-component-strong": {
+    "value": "#d6b6fb"
+  },
+  "border-danger": {
+    "value": "#963323"
+  },
+  "border-danger-strong": {
+    "value": "#fca397"
+  },
+  "border-design": {
+    "value": "#105cad"
+  },
+  "border-design-strong": {
+    "value": "#7cc4f8"
+  },
+  "border-disabled": {
+    "value": "#444444"
+  },
+  "border-disabled-strong": {
+    "value": "#ffffff66"
+  },
+  "border-figjam": {
+    "value": "#652ca8"
+  },
+  "border-figjam-strong": {
+    "value": "#d1a8ff"
+  },
+  "border-handoff": {
+    "value": "#0a5c35"
+  },
+  "border-handoff-strong": {
+    "value": "#79d297"
+  },
+  "border-measure": {
+    "value": "#963323"
+  },
+  "border-measure-strong": {
+    "value": "#fca397"
+  },
+  "border-menu": {
+    "value": "#383838",
+    "description": "Used for borders or dividers within a menu element."
+  },
+  "border-menu-disabled": {
+    "value": "#383838"
+  },
+  "border-menu-disabled-strong": {
+    "value": "#383838"
+  },
+  "border-menu-onselected": {
+    "value": "#d1a8ff"
+  },
+  "border-menu-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "border-menu-selected": {
+    "value": "#8a38f5"
+  },
+  "border-menu-selected-strong": {
+    "value": "#d1a8ff"
+  },
+  "border-menu-strong": {
+    "value": "#ffffff"
+  },
+  "border-onassistive": {
+    "value": "#d01b9c"
+  },
+  "border-onassistive-strong": {
+    "value": "#ffffff"
+  },
+  "border-onbrand": {
+    "value": "#7a2ed6"
+  },
+  "border-onbrand-strong": {
+    "value": "#ffffff",
+    "description": "Used for borders against a bg-brand background"
+  },
+  "border-oncomponent": {
+    "value": "#7a2ed6"
+  },
+  "border-oncomponent-strong": {
+    "value": "#ffffff"
+  },
+  "border-ondanger": {
+    "value": "#c4381c"
+  },
+  "border-ondanger-strong": {
+    "value": "#ffffff"
+  },
+  "border-ondesign": {
+    "value": "#0a6dc2"
+  },
+  "border-ondesign-strong": {
+    "value": "#ffffff"
+  },
+  "border-onfigjam": {
+    "value": "#7a2ed6"
+  },
+  "border-onfigjam-strong": {
+    "value": "#7a2ed6"
+  },
+  "border-onmeasure": {
+    "value": "#c4381c"
+  },
+  "border-onmeasure-strong": {
+    "value": "#ffffff"
+  },
+  "border-onselected": {
+    "value": "#7f699b"
+  },
+  "border-onselected-strong": {
+    "value": "#ffffffe5"
+  },
+  "border-onsuccess": {
+    "value": "#078348"
+  },
+  "border-onsuccess-strong": {
+    "value": "#ffffff"
+  },
+  "border-onwarning": {
+    "value": "#e4a711"
+  },
+  "border-onwarning-strong": {
+    "value": "#000000e5"
+  },
+  "border-selected": {
+    "value": "#8a38f5",
+    "description": "Default selection border color we use for focused / selected inputs."
+  },
+  "border-selected-strong": {
+    "value": "#d1a8ff",
+    "description": "When presenting a selected border against an already selected background, we sometimes need to increase the prominence of the selected border."
+  },
+  "border-strong": {
+    "value": "#ffffffe5",
+    "description": "A much darker border color that we can use for emphasis around some UI elements."
+  },
+  "border-success": {
+    "value": "#0a5c35"
+  },
+  "border-success-strong": {
+    "value": "#79d297"
+  },
+  "border-toolbar": {
+    "value": "#444444"
+  },
+  "border-toolbar-disabled": {
+    "value": "#ffffff66"
+  },
+  "border-toolbar-onselected": {
+    "value": "#ffffff"
+  },
+  "border-toolbar-selected": {
+    "value": "#8a38f5"
+  },
+  "border-toolbar-selected-strong": {
+    "value": "#d1a8ff"
+  },
+  "border-toolbar-strong": {
+    "value": "#ffffff"
+  },
+  "border-tooltip": {
+    "value": "#383838"
+  },
+  "border-tooltip-disabled": {
+    "value": "#383838"
+  },
+  "border-tooltip-disabled-strong": {
+    "value": "#383838"
+  },
+  "border-tooltip-onselected": {
+    "value": "#7a2ed6"
+  },
+  "border-tooltip-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "border-tooltip-selected": {
+    "value": "#8a38f5"
+  },
+  "border-tooltip-selected-strong": {
+    "value": "#d1a8ff"
+  },
+  "border-tooltip-strong": {
+    "value": "#ffffff"
+  },
+  "border-warning": {
+    "value": "#925711"
+  },
+  "border-warning-strong": {
+    "value": "#f7d15f"
+  },
+  "bordertranslucent": {
+    "value": "#ffffff1a"
+  },
+  "conditionalborder": {
+    "value": "#444444"
+  },
+  "icon": {
+    "value": "#ffffff",
+    "description": "Our default icon color"
+  },
+  "icon-assistive": {
+    "value": "#fc9ce0",
+    "description": "Pink icons used when Figma is assisting you in some way."
+  },
+  "icon-assistive-pressed": {
+    "value": "#fbb1ed"
+  },
+  "icon-assistive-secondary": {
+    "value": "#fc9ce0"
+  },
+  "icon-assistive-tertiary": {
+    "value": "#fc9ce0"
+  },
+  "icon-brand": {
+    "value": "#d1a8ff",
+    "description": "An icon tinted to match the accent color of the current product."
+  },
+  "icon-brand-pressed": {
+    "value": "#8a38f5"
+  },
+  "icon-brand-secondary": {
+    "value": "#7a2ed6"
+  },
+  "icon-brand-tertiary": {
+    "value": "#473956"
+  },
+  "icon-component": {
+    "value": "#d1a8ff"
+  },
+  "icon-component-pressed": {
+    "value": "#d6b6fb"
+  },
+  "icon-component-secondary": {
+    "value": "#7f699b"
+  },
+  "icon-component-tertiary": {
+    "value": "#7f699b"
+  },
+  "icon-danger": {
+    "value": "#e03e1a",
+    "description": "Red icons used to alert users about an error."
+  },
+  "icon-danger-hover": {
+    "value": "#fbbcb6"
+  },
+  "icon-danger-pressed": {
+    "value": "#fbbcb6"
+  },
+  "icon-danger-secondary": {
+    "value": "#e03e1a"
+  },
+  "icon-danger-secondary-hover": {
+    "value": "#e03e1a"
+  },
+  "icon-danger-tertiary": {
+    "value": "#e03e1a"
+  },
+  "icon-design": {
+    "value": "#7cc4f8"
+  },
+  "icon-design-pressed": {
+    "value": "#a8d7fa"
+  },
+  "icon-design-secondary": {
+    "value": "#7cc4f8"
+  },
+  "icon-design-tertiary": {
+    "value": "#7cc4f8"
+  },
+  "icon-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-figjam": {
+    "value": "#d1a8ff"
+  },
+  "icon-figjam-pressed": {
+    "value": "#d6b6fb"
+  },
+  "icon-figjam-secondary": {
+    "value": "#7f699b"
+  },
+  "icon-figjam-tertiary": {
+    "value": "#7f699b"
+  },
+  "icon-handoff": {
+    "value": "#79d297"
+  },
+  "icon-handoff-pressed": {
+    "value": "#a1e8b9"
+  },
+  "icon-handoff-secondary": {
+    "value": "#79d297"
+  },
+  "icon-handoff-tertiary": {
+    "value": "#79d297"
+  },
+  "icon-hover": {
+    "value": "#ffffff"
+  },
+  "icon-measure": {
+    "value": "#e03e1a"
+  },
+  "icon-measure-hover": {
+    "value": "#fbbcb6"
+  },
+  "icon-measure-pressed": {
+    "value": "#fbbcb6"
+  },
+  "icon-measure-secondary": {
+    "value": "#e03e1a"
+  },
+  "icon-measure-secondary-hover": {
+    "value": "#e03e1a"
+  },
+  "icon-measure-tertiary": {
+    "value": "#e03e1a"
+  },
+  "icon-menu": {
+    "value": "#ffffff"
+  },
+  "icon-menu-danger": {
+    "value": "#e03e1a"
+  },
+  "icon-menu-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-menu-hover": {
+    "value": "#ffffff"
+  },
+  "icon-menu-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "icon-menu-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-menu-pressed": {
+    "value": "#8a38f5"
+  },
+  "icon-menu-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-menu-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-menu-selected": {
+    "value": "#d1a8ff"
+  },
+  "icon-menu-selected-secondary": {
+    "value": "#d1a8ff"
+  },
+  "icon-menu-selected-tertiary": {
+    "value": "#d1a8ff"
+  },
+  "icon-menu-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-menu-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-menu-warning": {
+    "value": "#f3c11b"
+  },
+  "icon-onassistive": {
+    "value": "#ffffff"
+  },
+  "icon-onassistive-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onassistive-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onbrand": {
+    "value": "#ffffff",
+    "description": "Icons against a “background with a fill color” (for example, a blue / purple background in our “Share” button)"
+  },
+  "icon-onbrand-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onbrand-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-oncomponent": {
+    "value": "#ffffff"
+  },
+  "icon-oncomponent-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-oncomponent-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-ondanger": {
+    "value": "#ffffff"
+  },
+  "icon-ondanger-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-ondanger-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-ondesign": {
+    "value": "#ffffff"
+  },
+  "icon-ondesign-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-ondesign-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-ondisabled": {
+    "value": "#2c2c2c"
+  },
+  "icon-onfigjam": {
+    "value": "#ffffff"
+  },
+  "icon-onfigjam-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onfigjam-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-oninverse": {
+    "value": "#000000e5"
+  },
+  "icon-onmeasure": {
+    "value": "#ffffff"
+  },
+  "icon-onmeasure-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onmeasure-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-onselected-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "icon-onselected-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onsuccess": {
+    "value": "#ffffff"
+  },
+  "icon-onsuccess-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onsuccess-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onwarning": {
+    "value": "#000000e5"
+  },
+  "icon-onwarning-secondary": {
+    "value": "#00000080"
+  },
+  "icon-onwarning-tertiary": {
+    "value": "#0000004d"
+  },
+  "icon-pressed": {
+    "value": "#7a2ed6"
+  },
+  "icon-secondary": {
+    "value": "#ffffffb2",
+    "description": "Our secondary icon color for inactive elements that need to be “lighter” in order to create hierarchy."
+  },
+  "icon-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-selected": {
+    "value": "#d1a8ff"
+  },
+  "icon-selected-secondary": {
+    "value": "#d1a8ff"
+  },
+  "icon-selected-tertiary": {
+    "value": "#d1a8ff"
+  },
+  "icon-success": {
+    "value": "#198f51",
+    "description": "Green icons used for confirmation, and approval."
+  },
+  "icon-success-pressed": {
+    "value": "#a1e8b9"
+  },
+  "icon-success-secondary": {
+    "value": "#198f51"
+  },
+  "icon-success-tertiary": {
+    "value": "#198f51"
+  },
+  "icon-tertiary": {
+    "value": "#ffffff66",
+    "description": "Our tertiary icon color primarily used for carets"
+  },
+  "icon-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-danger": {
+    "value": "#e03e1a"
+  },
+  "icon-toolbar-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-toolbar-hover": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-ondisabled": {
+    "value": "#2c2c2c"
+  },
+  "icon-toolbar-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-pressed": {
+    "value": "#8a38f5"
+  },
+  "icon-toolbar-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-toolbar-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-selected": {
+    "value": "#d1a8ff"
+  },
+  "icon-toolbar-selected-secondary": {
+    "value": "#d1a8ff"
+  },
+  "icon-toolbar-selected-tertiary": {
+    "value": "#d1a8ff"
+  },
+  "icon-toolbar-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-toolbar-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-warning": {
+    "value": "#f3c11b"
+  },
+  "icon-tooltip": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-danger": {
+    "value": "#e03e1a"
+  },
+  "icon-tooltip-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-tooltip-hover": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "icon-tooltip-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-pressed": {
+    "value": "#8a38f5"
+  },
+  "icon-tooltip-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-tooltip-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-selected": {
+    "value": "#d1a8ff"
+  },
+  "icon-tooltip-selected-secondary": {
+    "value": "#d1a8ff"
+  },
+  "icon-tooltip-selected-tertiary": {
+    "value": "#d1a8ff"
+  },
+  "icon-tooltip-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-tooltip-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-warning": {
+    "value": "#f3c11b"
+  },
+  "icon-warning": {
+    "value": "#f3c11b",
+    "description": "Yellow icons used to warn users about a potential problem."
+  },
+  "icon-warning-pressed": {
+    "value": "#f7d15f"
+  },
+  "icon-warning-secondary": {
+    "value": "#f3c11b"
+  },
+  "icon-warning-tertiary": {
+    "value": "#f3c11b"
+  },
+  "icondesignfilesecondary": {
+    "value": "#7cc4f8"
+  },
+  "iconfigjamfilesecondary": {
+    "value": "#d1a8ff"
+  },
+  "iconondarkcanvas": {
+    "value": "#ffffffe5"
+  },
+  "icononlightcanvas": {
+    "value": "#000000e5"
+  },
+  "icononvoting": {
+    "value": "#000000e5"
+  },
+  "iconprototypefile": {
+    "value": "#757575"
+  },
+  "iconprototypefilesecondary": {
+    "value": "#ffffff"
+  },
+  "iconpublishedfile": {
+    "value": "#757575"
+  },
+  "iconpublishedfilesecondary": {
+    "value": "#b3b3b3"
+  },
+  "loading": {
+    "value": "#ffffff1a"
+  },
+  "loadingmenu": {
+    "value": "#ffffff1a"
+  },
+  "loadingsecondary": {
+    "value": "#ffffff0d"
+  },
+  "loadingsecondarymenu": {
+    "value": "#ffffff0d"
+  },
+  "modalbackdrop": {
+    "value": "#00000080"
+  },
+  "multiplayerblue": {
+    "value": "#0a6dc2"
+  },
+  "multiplayerbluehover": {
+    "value": "#105cad"
+  },
+  "multiplayerbluesecondary": {
+    "value": "#184591"
+  },
+  "multiplayergreen": {
+    "value": "#198f51"
+  },
+  "multiplayergreenhover": {
+    "value": "#078348"
+  },
+  "multiplayergreensecondary": {
+    "value": "#0a4c2d"
+  },
+  "multiplayergrey": {
+    "value": "#667799"
+  },
+  "multiplayergreyhover": {
+    "value": "#536383"
+  },
+  "multiplayergreysecondary": {
+    "value": "#394360"
+  },
+  "multiplayerpink": {
+    "value": "#f316b0"
+  },
+  "multiplayerpinkhover": {
+    "value": "#d01b9c"
+  },
+  "multiplayerpinksecondary": {
+    "value": "#68275e"
+  },
+  "multiplayerpurple": {
+    "value": "#8a38f5"
+  },
+  "multiplayerpurplehover": {
+    "value": "#7a2ed6"
+  },
+  "multiplayerpurplesecondary": {
+    "value": "#50297a"
+  },
+  "multiplayerred": {
+    "value": "#e03e1a"
+  },
+  "multiplayerredhover": {
+    "value": "#c4381c"
+  },
+  "multiplayerredsecondary": {
+    "value": "#7c2622"
+  },
+  "multiplayeryellow": {
+    "value": "#f3c11b"
+  },
+  "multiplayeryellowhover": {
+    "value": "#f2b50d"
+  },
+  "multiplayeryellowsecondary": {
+    "value": "#c58011"
+  },
+  "nodehandle": {
+    "value": "#7cc4f8"
+  },
+  "prototypeloadingbackdrop": {
+    "value": "#000000e5"
+  },
+  "scrollbar": {
+    "value": "#b3b3b380"
+  },
+  "shadow": {
+    "value": "#00000099"
+  },
+  "text": {
+    "value": "#ffffff",
+    "description": "Our default text color for most titles, tabs, and body text."
+  },
+  "text-assistive": {
+    "value": "#fc9ce0",
+    "description": "Pink text used when Figma is assisting you in some way (ex: in auto layout)"
+  },
+  "text-assistive-pressed": {
+    "value": "#fbb1ed"
+  },
+  "text-assistive-secondary": {
+    "value": "#fc9ce0"
+  },
+  "text-assistive-tertiary": {
+    "value": "#fc9ce0"
+  },
+  "text-brand": {
+    "value": "#d1a8ff",
+    "description": "Text that is tinted to match the current product, typically used for things like links. For specifically referring to concepts in design, we can use color-text-design instead."
+  },
+  "text-brand-secondary": {
+    "value": "#d1a8ff"
+  },
+  "text-brand-tertiary": {
+    "value": "#d1a8ff"
+  },
+  "text-component": {
+    "value": "#d1a8ff"
+  },
+  "text-component-pressed": {
+    "value": "#d6b6fb"
+  },
+  "text-component-secondary": {
+    "value": "#7f699b"
+  },
+  "text-component-tertiary": {
+    "value": "#7f699b"
+  },
+  "text-danger": {
+    "value": "#fca397",
+    "description": "Red text used to alert users about an error."
+  },
+  "text-danger-secondary": {
+    "value": "#fca397"
+  },
+  "text-danger-tertiary": {
+    "value": "#fca397"
+  },
+  "text-design": {
+    "value": "#7cc4f8"
+  },
+  "text-design-pressed": {
+    "value": "#a8d7fa"
+  },
+  "text-design-secondary": {
+    "value": "#7cc4f8"
+  },
+  "text-design-tertiary": {
+    "value": "#7cc4f8"
+  },
+  "text-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-figjam": {
+    "value": "#c5b2dc"
+  },
+  "text-figjam-pressed": {
+    "value": "#d6b6fb"
+  },
+  "text-figjam-secondary": {
+    "value": "#7f699b"
+  },
+  "text-figjam-tertiary": {
+    "value": "#7f699b"
+  },
+  "text-handoff": {
+    "value": "#79d297"
+  },
+  "text-handoff-secondary": {
+    "value": "#79d297"
+  },
+  "text-handoff-tertiary": {
+    "value": "#79d297"
+  },
+  "text-hover": {
+    "value": "#ffffff"
+  },
+  "text-measure": {
+    "value": "#fca397"
+  },
+  "text-measure-secondary": {
+    "value": "#fca397"
+  },
+  "text-measure-tertiary": {
+    "value": "#fca397"
+  },
+  "text-menu": {
+    "value": "#ffffff"
+  },
+  "text-menu-danger": {
+    "value": "#fca397"
+  },
+  "text-menu-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-menu-hover": {
+    "value": "#ffffff"
+  },
+  "text-menu-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "text-menu-onselected": {
+    "value": "#ffffff"
+  },
+  "text-menu-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-menu-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-menu-selected": {
+    "value": "#d1a8ff"
+  },
+  "text-menu-selected-secondary": {
+    "value": "#d1a8ff"
+  },
+  "text-menu-selected-tertiary": {
+    "value": "#d1a8ff"
+  },
+  "text-menu-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-menu-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-menu-warning": {
+    "value": "#f7d15f"
+  },
+  "text-onassistive": {
+    "value": "#ffffff"
+  },
+  "text-onassistive-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onassistive-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onbrand": {
+    "value": "#ffffff",
+    "description": "Used for text against a “background with a fill color” (for example, a blue / purple background in our “Share” button)"
+  },
+  "text-onbrand-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onbrand-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-oncomponent": {
+    "value": "#ffffff"
+  },
+  "text-oncomponent-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-oncomponent-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-ondanger": {
+    "value": "#ffffff"
+  },
+  "text-ondanger-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-ondanger-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-ondesign": {
+    "value": "#ffffff"
+  },
+  "text-ondesign-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-ondesign-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-ondisabled": {
+    "value": "#2c2c2c"
+  },
+  "text-onfigjam": {
+    "value": "#ffffff"
+  },
+  "text-onfigjam-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onfigjam-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-oninverse": {
+    "value": "#000000e5"
+  },
+  "text-onmeasure": {
+    "value": "#ffffff"
+  },
+  "text-onmeasure-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onmeasure-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onselected": {
+    "value": "#ffffffe5"
+  },
+  "text-onselected-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "text-onselected-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onsuccess": {
+    "value": "#ffffff"
+  },
+  "text-onsuccess-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onsuccess-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onwarning": {
+    "value": "#000000e5"
+  },
+  "text-onwarning-secondary": {
+    "value": "#00000080"
+  },
+  "text-onwarning-tertiary": {
+    "value": "#0000004d"
+  },
+  "text-secondary": {
+    "value": "#ffffffb2",
+    "description": "Our secondary text color for inactive tabs, labels, timestamps, and other text that needs to be “lighter” in order to create hierarchy."
+  },
+  "text-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-selected": {
+    "value": "#d1a8ff"
+  },
+  "text-selected-secondary": {
+    "value": "#d1a8ff"
+  },
+  "text-selected-tertiary": {
+    "value": "#d1a8ff"
+  },
+  "text-success": {
+    "value": "#79d297"
+  },
+  "text-success-secondary": {
+    "value": "#79d297"
+  },
+  "text-success-tertiary": {
+    "value": "#79d297"
+  },
+  "text-tertiary": {
+    "value": "#ffffff66",
+    "description": "Primarily used for placeholder text (for example in a search input), or for hierarchy below secondary text. Note that text at this level is below our color contrast threshold, and may not be readable to all users."
+  },
+  "text-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-toolbar": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-danger": {
+    "value": "#fca397"
+  },
+  "text-toolbar-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-toolbar-hover": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-ondisabled": {
+    "value": "#2c2c2c"
+  },
+  "text-toolbar-onselected": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-toolbar-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-selected": {
+    "value": "#d1a8ff"
+  },
+  "text-toolbar-selected-secondary": {
+    "value": "#d1a8ff"
+  },
+  "text-toolbar-selected-tertiary": {
+    "value": "#d1a8ff"
+  },
+  "text-toolbar-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-toolbar-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-warning": {
+    "value": "#f7d15f"
+  },
+  "text-tooltip": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-danger": {
+    "value": "#fca397"
+  },
+  "text-tooltip-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-tooltip-hover": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "text-tooltip-onselected": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-tooltip-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-selected": {
+    "value": "#d1a8ff"
+  },
+  "text-tooltip-selected-secondary": {
+    "value": "#d1a8ff"
+  },
+  "text-tooltip-selected-tertiary": {
+    "value": "#d1a8ff"
+  },
+  "text-tooltip-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-tooltip-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-warning": {
+    "value": "#f7d15f"
+  },
+  "text-warning": {
+    "value": "#f7d15f",
+    "description": "Yellow text used to warn users about a potential problem."
+  },
+  "text-warning-secondary": {
+    "value": "#f7d15f"
+  },
+  "text-warning-tertiary": {
+    "value": "#f7d15f"
+  },
+  "texthighlight": {
+    "value": "#974aff66"
+  },
+  "textondarkcanvas": {
+    "value": "#ffffffe5"
+  },
+  "textondarkcanvassecondary": {
+    "value": "#ffffffb2"
+  },
+  "textonlightcanvas": {
+    "value": "#000000e5"
+  },
+  "textonlightcanvassecondary": {
+    "value": "#0000004d"
+  },
+  "textonmultiplayerblue": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayergreen": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayergrey": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayerpink": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayerpurple": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayerred": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayeryellow": {
+    "value": "#000000e5"
+  },
+  "textonvoting": {
+    "value": "#000000e5"
+  }
+}
diff --git a/packages/theme/tokens/colors/figjam-light.json b/packages/theme/tokens/colors/figjam-light.json
new file mode 100644
index 0000000..d13bb6a
--- /dev/null
+++ b/packages/theme/tokens/colors/figjam-light.json
@@ -0,0 +1,1506 @@
+{
+  "bg": {
+    "value": "#ffffff",
+    "description": "Our default background color"
+  },
+  "bg-assistive": {
+    "value": "#ff24bd"
+  },
+  "bg-assistive-hover": {
+    "value": "#ea10ac"
+  },
+  "bg-assistive-pressed": {
+    "value": "#ea10ac"
+  },
+  "bg-assistive-secondary": {
+    "value": "#cb0b96"
+  },
+  "bg-assistive-tertiary": {
+    "value": "#ffe0fc"
+  },
+  "bg-brand": {
+    "value": "#9747ff",
+    "description": "A fill tinted to match the accent color of the current product."
+  },
+  "bg-brand-hover": {
+    "value": "#8638e5"
+  },
+  "bg-brand-pressed": {
+    "value": "#8638e5"
+  },
+  "bg-brand-secondary": {
+    "value": "#7c2bda"
+  },
+  "bg-brand-tertiary": {
+    "value": "#f1e5ff"
+  },
+  "bg-component": {
+    "value": "#9747ff"
+  },
+  "bg-component-hover": {
+    "value": "#8638e5"
+  },
+  "bg-component-pressed": {
+    "value": "#8638e5"
+  },
+  "bg-component-secondary": {
+    "value": "#7c2bda"
+  },
+  "bg-component-tertiary": {
+    "value": "#f1e5ff"
+  },
+  "bg-danger": {
+    "value": "#f24822",
+    "description": "Red fill color behind destructive buttons, and error banners."
+  },
+  "bg-danger-hover": {
+    "value": "#dc3412"
+  },
+  "bg-danger-pressed": {
+    "value": "#dc3412"
+  },
+  "bg-danger-secondary": {
+    "value": "#bd2915"
+  },
+  "bg-danger-tertiary": {
+    "value": "#ffe2e0"
+  },
+  "bg-design": {
+    "value": "#0d99ff"
+  },
+  "bg-design-hover": {
+    "value": "#007be5"
+  },
+  "bg-design-pressed": {
+    "value": "#007be5"
+  },
+  "bg-design-secondary": {
+    "value": "#0768cf"
+  },
+  "bg-design-tertiary": {
+    "value": "#e5f4ff"
+  },
+  "bg-disabled": {
+    "value": "#d9d9d9"
+  },
+  "bg-disabled-secondary": {
+    "value": "#b3b3b3"
+  },
+  "bg-figjam": {
+    "value": "#9747ff",
+    "description": "Purple fill color used for backgrounds like a button that opens in FigJam."
+  },
+  "bg-figjam-hover": {
+    "value": "#8638e5"
+  },
+  "bg-figjam-pressed": {
+    "value": "#8638e5"
+  },
+  "bg-figjam-secondary": {
+    "value": "#7c2bda"
+  },
+  "bg-figjam-tertiary": {
+    "value": "#f1e5ff"
+  },
+  "bg-handoff": {
+    "value": "#14ae5c",
+    "description": "Green fill color used for backgrounds like a button that opens in Dev Mode."
+  },
+  "bg-handoff-hover": {
+    "value": "#009951"
+  },
+  "bg-handoff-pressed": {
+    "value": "#009951"
+  },
+  "bg-handoff-secondary": {
+    "value": "#008043"
+  },
+  "bg-handoff-tertiary": {
+    "value": "#daecdf"
+  },
+  "bg-hover": {
+    "value": "#f5f5f5",
+    "description": "A light grey hover fill color behind icons, and selectable elements."
+  },
+  "bg-info": {
+    "value": "#f1e5ff"
+  },
+  "bg-inverse": {
+    "value": "#2c2c2c"
+  },
+  "bg-measure": {
+    "value": "#f24822"
+  },
+  "bg-measure-hover": {
+    "value": "#dc3412"
+  },
+  "bg-measure-pressed": {
+    "value": "#dc3412"
+  },
+  "bg-measure-secondary": {
+    "value": "#bd2915"
+  },
+  "bg-measure-tertiary": {
+    "value": "#ffe2e0"
+  },
+  "bg-menu": {
+    "value": "#1e1e1e",
+    "description": "The dark fill color of our menus "
+  },
+  "bg-menu-disabled": {
+    "value": "#757575"
+  },
+  "bg-menu-hover": {
+    "value": "#2c2c2c"
+  },
+  "bg-menu-pressed": {
+    "value": "#2c2c2c"
+  },
+  "bg-menu-secondary": {
+    "value": "#383838"
+  },
+  "bg-menu-selected": {
+    "value": "#9747ff"
+  },
+  "bg-menu-selected-hover": {
+    "value": "#8638e5"
+  },
+  "bg-menu-selected-pressed": {
+    "value": "#8638e5"
+  },
+  "bg-menu-selected-secondary": {
+    "value": "#473956"
+  },
+  "bg-menu-selected-tertiary": {
+    "value": "#473956"
+  },
+  "bg-menu-tertiary": {
+    "value": "#444444"
+  },
+  "bg-onselected": {
+    "value": "#e4ccff"
+  },
+  "bg-onselected-hover": {
+    "value": "#e4ccff"
+  },
+  "bg-onselected-pressed": {
+    "value": "#e4ccff"
+  },
+  "bg-pressed": {
+    "value": "#f5f5f5"
+  },
+  "bg-secondary": {
+    "value": "#f5f5f5",
+    "description": "Our secondary background color for most containers."
+  },
+  "bg-selected": {
+    "value": "#f1e5ff",
+    "description": "A lightly tinted selected fill color for selected elements."
+  },
+  "bg-selected-hover": {
+    "value": "#e4ccff"
+  },
+  "bg-selected-pressed": {
+    "value": "#e4ccff"
+  },
+  "bg-selected-secondary": {
+    "value": "#f9f5ff"
+  },
+  "bg-selected-strong": {
+    "value": "#9747ff"
+  },
+  "bg-selected-tertiary": {
+    "value": "#f9f5ff"
+  },
+  "bg-success": {
+    "value": "#14ae5c"
+  },
+  "bg-success-hover": {
+    "value": "#009951"
+  },
+  "bg-success-pressed": {
+    "value": "#009951"
+  },
+  "bg-success-secondary": {
+    "value": "#008043"
+  },
+  "bg-success-tertiary": {
+    "value": "#cff7d3"
+  },
+  "bg-tertiary": {
+    "value": "#e6e6e6"
+  },
+  "bg-toolbar": {
+    "value": "#ffffff",
+    "description": "The dark fill color of our UI2 editor toolbar"
+  },
+  "bg-toolbar-disabled": {
+    "value": "#d9d9d9"
+  },
+  "bg-toolbar-hover": {
+    "value": "#f5f5f5"
+  },
+  "bg-toolbar-pressed": {
+    "value": "#f5f5f5"
+  },
+  "bg-toolbar-secondary": {
+    "value": "#f5f5f5"
+  },
+  "bg-toolbar-selected": {
+    "value": "#9747ff"
+  },
+  "bg-toolbar-selected-hover": {
+    "value": "#8638e5"
+  },
+  "bg-toolbar-selected-pressed": {
+    "value": "#8638e5"
+  },
+  "bg-toolbar-selected-secondary": {
+    "value": "#7c2bda"
+  },
+  "bg-toolbar-selected-tertiary": {
+    "value": "#9747ff"
+  },
+  "bg-toolbar-tertiary": {
+    "value": "#e6e6e6"
+  },
+  "bg-tooltip": {
+    "value": "#1e1e1e"
+  },
+  "bg-tooltip-disabled": {
+    "value": "#757575"
+  },
+  "bg-tooltip-hover": {
+    "value": "#2c2c2c"
+  },
+  "bg-tooltip-pressed": {
+    "value": "#2c2c2c"
+  },
+  "bg-tooltip-secondary": {
+    "value": "#383838"
+  },
+  "bg-tooltip-selected": {
+    "value": "#9747ff"
+  },
+  "bg-tooltip-selected-hover": {
+    "value": "#8638e5"
+  },
+  "bg-tooltip-selected-pressed": {
+    "value": "#8638e5"
+  },
+  "bg-tooltip-selected-secondary": {
+    "value": "#473956"
+  },
+  "bg-tooltip-selected-tertiary": {
+    "value": "#473956"
+  },
+  "bg-tooltip-tertiary": {
+    "value": "#444444"
+  },
+  "bg-warning": {
+    "value": "#ffcd29",
+    "description": "Yellow fill color for warning banners"
+  },
+  "bg-warning-hover": {
+    "value": "#ffc21a"
+  },
+  "bg-warning-pressed": {
+    "value": "#ffc21a"
+  },
+  "bg-warning-secondary": {
+    "value": "#fab815"
+  },
+  "bg-warning-tertiary": {
+    "value": "#fff1c2"
+  },
+  "bghoverondarkcanvas": {
+    "value": "#ffffff33"
+  },
+  "bghoveronlightcanvas": {
+    "value": "#00000033"
+  },
+  "bghovertransparent": {
+    "value": "#0000000d"
+  },
+  "bgsecondaryoncanvas": {
+    "value": "#e6e6e6"
+  },
+  "bgselectedarea": {
+    "value": "#974aff33"
+  },
+  "bgtransparent": {
+    "value": "#ffffff99"
+  },
+  "bgtransparent-secondary-hover": {
+    "value": "#0000001a"
+  },
+  "bgtransparent-secondary-pressed": {
+    "value": "#00000026"
+  },
+  "bgtransparentsecondary": {
+    "value": "#ffffff"
+  },
+  "bgvoting": {
+    "value": "#ffcd29"
+  },
+  "bgvotingsecondary": {
+    "value": "#fff1c2"
+  },
+  "bgvotingtertiary": {
+    "value": "#fffbeb"
+  },
+  "bgvotingwheeldial": {
+    "value": "#fffbeb"
+  },
+  "bgvotingwheelhover": {
+    "value": "#fff1c2"
+  },
+  "border": {
+    "value": "#e6e6e6",
+    "description": "Our default border color used as a divider between sections, or around inputs."
+  },
+  "border-assistive": {
+    "value": "#ffbdf2"
+  },
+  "border-assistive-strong": {
+    "value": "#ea10ac"
+  },
+  "border-brand": {
+    "value": "#e4ccff"
+  },
+  "border-brand-strong": {
+    "value": "#8638e5"
+  },
+  "border-component": {
+    "value": "#e4ccff"
+  },
+  "border-component-hover": {
+    "value": "#9747ff"
+  },
+  "border-component-strong": {
+    "value": "#8638e5"
+  },
+  "border-danger": {
+    "value": "#ffc7c2"
+  },
+  "border-danger-strong": {
+    "value": "#dc3412"
+  },
+  "border-design": {
+    "value": "#bde3ff"
+  },
+  "border-design-strong": {
+    "value": "#007be5"
+  },
+  "border-disabled": {
+    "value": "#e6e6e6"
+  },
+  "border-disabled-strong": {
+    "value": "#0000004d"
+  },
+  "border-figjam": {
+    "value": "#e4ccff"
+  },
+  "border-figjam-strong": {
+    "value": "#8638e5"
+  },
+  "border-handoff": {
+    "value": "#aff4c6"
+  },
+  "border-handoff-strong": {
+    "value": "#009951"
+  },
+  "border-measure": {
+    "value": "#ffc7c2"
+  },
+  "border-measure-strong": {
+    "value": "#dc3412"
+  },
+  "border-menu": {
+    "value": "#383838",
+    "description": "Used for borders or dividers within a menu element."
+  },
+  "border-menu-disabled": {
+    "value": "#383838"
+  },
+  "border-menu-disabled-strong": {
+    "value": "#383838"
+  },
+  "border-menu-onselected": {
+    "value": "#d9b8ff"
+  },
+  "border-menu-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "border-menu-selected": {
+    "value": "#9747ff"
+  },
+  "border-menu-selected-strong": {
+    "value": "#d9b8ff"
+  },
+  "border-menu-strong": {
+    "value": "#ffffff"
+  },
+  "border-onassistive": {
+    "value": "#ea10ac"
+  },
+  "border-onassistive-strong": {
+    "value": "#ffffff"
+  },
+  "border-onbrand": {
+    "value": "#8638e5"
+  },
+  "border-onbrand-strong": {
+    "value": "#ffffff",
+    "description": "Used for borders against a bg-brand background"
+  },
+  "border-oncomponent": {
+    "value": "#8638e5"
+  },
+  "border-oncomponent-strong": {
+    "value": "#ffffff"
+  },
+  "border-ondanger": {
+    "value": "#dc3412"
+  },
+  "border-ondanger-strong": {
+    "value": "#ffffff"
+  },
+  "border-ondesign": {
+    "value": "#007be5"
+  },
+  "border-ondesign-strong": {
+    "value": "#ffffff"
+  },
+  "border-onfigjam": {
+    "value": "#8638e5"
+  },
+  "border-onfigjam-strong": {
+    "value": "#8638e5"
+  },
+  "border-onmeasure": {
+    "value": "#dc3412"
+  },
+  "border-onmeasure-strong": {
+    "value": "#ffffff"
+  },
+  "border-onselected": {
+    "value": "#e4ccff"
+  },
+  "border-onselected-strong": {
+    "value": "#000000e5"
+  },
+  "border-onsuccess": {
+    "value": "#009951"
+  },
+  "border-onsuccess-strong": {
+    "value": "#ffffff"
+  },
+  "border-onwarning": {
+    "value": "#fab815"
+  },
+  "border-onwarning-strong": {
+    "value": "#000000e5"
+  },
+  "border-selected": {
+    "value": "#9747ff",
+    "description": "Default selection border color we use for focused / selected inputs."
+  },
+  "border-selected-strong": {
+    "value": "#8638e5",
+    "description": "When presenting a selected border against an already selected background, we sometimes need to increase the prominence of the selected border."
+  },
+  "border-strong": {
+    "value": "#2c2c2c",
+    "description": "A much darker border color that we can use for emphasis around some UI elements."
+  },
+  "border-success": {
+    "value": "#aff4c6"
+  },
+  "border-success-strong": {
+    "value": "#009951"
+  },
+  "border-toolbar": {
+    "value": "#e6e6e6"
+  },
+  "border-toolbar-disabled": {
+    "value": "#e6e6e6"
+  },
+  "border-toolbar-onselected": {
+    "value": "#ffffff"
+  },
+  "border-toolbar-selected": {
+    "value": "#9747ff"
+  },
+  "border-toolbar-selected-strong": {
+    "value": "#d9b8ff"
+  },
+  "border-toolbar-strong": {
+    "value": "#2c2c2c"
+  },
+  "border-tooltip": {
+    "value": "#383838"
+  },
+  "border-tooltip-disabled": {
+    "value": "#383838"
+  },
+  "border-tooltip-disabled-strong": {
+    "value": "#383838"
+  },
+  "border-tooltip-onselected": {
+    "value": "#8638e5"
+  },
+  "border-tooltip-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "border-tooltip-selected": {
+    "value": "#9747ff"
+  },
+  "border-tooltip-selected-strong": {
+    "value": "#d9b8ff"
+  },
+  "border-tooltip-strong": {
+    "value": "#ffffff"
+  },
+  "border-warning": {
+    "value": "#ffe8a3"
+  },
+  "border-warning-strong": {
+    "value": "#b86200"
+  },
+  "bordertranslucent": {
+    "value": "#0000001a"
+  },
+  "conditionalborder": {
+    "value": "#ffffff00"
+  },
+  "icon": {
+    "value": "#000000e5",
+    "description": "Our default icon color"
+  },
+  "icon-assistive": {
+    "value": "#ea10ac",
+    "description": "Pink icons used when Figma is assisting you in some way."
+  },
+  "icon-assistive-pressed": {
+    "value": "#cb0b96"
+  },
+  "icon-assistive-secondary": {
+    "value": "#ea10ac"
+  },
+  "icon-assistive-tertiary": {
+    "value": "#ea10ac"
+  },
+  "icon-brand": {
+    "value": "#8638e5",
+    "description": "An icon tinted to match the accent color of the current product."
+  },
+  "icon-brand-pressed": {
+    "value": "#7c2bda"
+  },
+  "icon-brand-secondary": {
+    "value": "#d9b8ff"
+  },
+  "icon-brand-tertiary": {
+    "value": "#e4ccff"
+  },
+  "icon-component": {
+    "value": "#8638e5"
+  },
+  "icon-component-pressed": {
+    "value": "#7c2bda"
+  },
+  "icon-component-secondary": {
+    "value": "#c5b2dc"
+  },
+  "icon-component-tertiary": {
+    "value": "#c5b2dc"
+  },
+  "icon-danger": {
+    "value": "#f24822",
+    "description": "Red icons used to alert users about an error."
+  },
+  "icon-danger-hover": {
+    "value": "#bd2915"
+  },
+  "icon-danger-pressed": {
+    "value": "#bd2915"
+  },
+  "icon-danger-secondary": {
+    "value": "#f24822"
+  },
+  "icon-danger-secondary-hover": {
+    "value": "#f24822"
+  },
+  "icon-danger-tertiary": {
+    "value": "#f24822"
+  },
+  "icon-design": {
+    "value": "#007be5"
+  },
+  "icon-design-pressed": {
+    "value": "#0768cf"
+  },
+  "icon-design-secondary": {
+    "value": "#007be5"
+  },
+  "icon-design-tertiary": {
+    "value": "#007be5"
+  },
+  "icon-disabled": {
+    "value": "#0000004d"
+  },
+  "icon-figjam": {
+    "value": "#8638e5"
+  },
+  "icon-figjam-pressed": {
+    "value": "#7c2bda"
+  },
+  "icon-figjam-secondary": {
+    "value": "#c5b2dc"
+  },
+  "icon-figjam-tertiary": {
+    "value": "#c5b2dc"
+  },
+  "icon-handoff": {
+    "value": "#009951"
+  },
+  "icon-handoff-pressed": {
+    "value": "#008043"
+  },
+  "icon-handoff-secondary": {
+    "value": "#009951"
+  },
+  "icon-handoff-tertiary": {
+    "value": "#009951"
+  },
+  "icon-hover": {
+    "value": "#000000e5"
+  },
+  "icon-measure": {
+    "value": "#f24822"
+  },
+  "icon-measure-hover": {
+    "value": "#bd2915"
+  },
+  "icon-measure-pressed": {
+    "value": "#bd2915"
+  },
+  "icon-measure-secondary": {
+    "value": "#f24822"
+  },
+  "icon-measure-secondary-hover": {
+    "value": "#f24822"
+  },
+  "icon-measure-tertiary": {
+    "value": "#f24822"
+  },
+  "icon-menu": {
+    "value": "#ffffff"
+  },
+  "icon-menu-danger": {
+    "value": "#f24822"
+  },
+  "icon-menu-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-menu-hover": {
+    "value": "#ffffff"
+  },
+  "icon-menu-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "icon-menu-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-menu-pressed": {
+    "value": "#9747ff"
+  },
+  "icon-menu-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-menu-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-menu-selected": {
+    "value": "#d9b8ff"
+  },
+  "icon-menu-selected-secondary": {
+    "value": "#d9b8ff"
+  },
+  "icon-menu-selected-tertiary": {
+    "value": "#d9b8ff"
+  },
+  "icon-menu-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-menu-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-menu-warning": {
+    "value": "#ffcd29"
+  },
+  "icon-onassistive": {
+    "value": "#ffffff"
+  },
+  "icon-onassistive-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onassistive-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onbrand": {
+    "value": "#ffffff",
+    "description": "Icons against a “background with a fill color” (for example, a blue / purple background in our “Share” button)"
+  },
+  "icon-onbrand-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onbrand-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-oncomponent": {
+    "value": "#ffffff"
+  },
+  "icon-oncomponent-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-oncomponent-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-ondanger": {
+    "value": "#ffffff"
+  },
+  "icon-ondanger-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-ondanger-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-ondesign": {
+    "value": "#ffffff"
+  },
+  "icon-ondesign-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-ondesign-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-ondisabled": {
+    "value": "#ffffff"
+  },
+  "icon-onfigjam": {
+    "value": "#ffffff"
+  },
+  "icon-onfigjam-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onfigjam-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-oninverse": {
+    "value": "#ffffffe5"
+  },
+  "icon-onmeasure": {
+    "value": "#ffffff"
+  },
+  "icon-onmeasure-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onmeasure-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onselected": {
+    "value": "#000000e5"
+  },
+  "icon-onselected-secondary": {
+    "value": "#00000080"
+  },
+  "icon-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "icon-onselected-tertiary": {
+    "value": "#0000004d"
+  },
+  "icon-onsuccess": {
+    "value": "#ffffff"
+  },
+  "icon-onsuccess-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onsuccess-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onwarning": {
+    "value": "#000000e5"
+  },
+  "icon-onwarning-secondary": {
+    "value": "#00000080"
+  },
+  "icon-onwarning-tertiary": {
+    "value": "#0000004d"
+  },
+  "icon-pressed": {
+    "value": "#8638e5"
+  },
+  "icon-secondary": {
+    "value": "#00000080",
+    "description": "Our secondary icon color for inactive elements that need to be “lighter” in order to create hierarchy."
+  },
+  "icon-secondary-hover": {
+    "value": "#000000e5"
+  },
+  "icon-selected": {
+    "value": "#8638e5"
+  },
+  "icon-selected-secondary": {
+    "value": "#8638e5"
+  },
+  "icon-selected-tertiary": {
+    "value": "#8638e5"
+  },
+  "icon-success": {
+    "value": "#14ae5c",
+    "description": "Green icons used for confirmation, and approval."
+  },
+  "icon-success-pressed": {
+    "value": "#008043"
+  },
+  "icon-success-secondary": {
+    "value": "#14ae5c"
+  },
+  "icon-success-tertiary": {
+    "value": "#14ae5c"
+  },
+  "icon-tertiary": {
+    "value": "#0000004d",
+    "description": "Our tertiary icon color primarily used for carets"
+  },
+  "icon-tertiary-hover": {
+    "value": "#000000e5"
+  },
+  "icon-toolbar": {
+    "value": "#000000e5"
+  },
+  "icon-toolbar-danger": {
+    "value": "#f24822"
+  },
+  "icon-toolbar-disabled": {
+    "value": "#0000004d"
+  },
+  "icon-toolbar-hover": {
+    "value": "#000000e5"
+  },
+  "icon-toolbar-ondisabled": {
+    "value": "#0000004d"
+  },
+  "icon-toolbar-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-pressed": {
+    "value": "#9747ff"
+  },
+  "icon-toolbar-secondary": {
+    "value": "#00000080"
+  },
+  "icon-toolbar-secondary-hover": {
+    "value": "#000000e5"
+  },
+  "icon-toolbar-selected": {
+    "value": "#8638e5"
+  },
+  "icon-toolbar-selected-secondary": {
+    "value": "#8638e5"
+  },
+  "icon-toolbar-selected-tertiary": {
+    "value": "#8638e5"
+  },
+  "icon-toolbar-tertiary": {
+    "value": "#0000004d"
+  },
+  "icon-toolbar-tertiary-hover": {
+    "value": "#000000e5"
+  },
+  "icon-toolbar-warning": {
+    "value": "#ffcd29"
+  },
+  "icon-tooltip": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-danger": {
+    "value": "#f24822"
+  },
+  "icon-tooltip-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-tooltip-hover": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "icon-tooltip-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-pressed": {
+    "value": "#9747ff"
+  },
+  "icon-tooltip-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-tooltip-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-selected": {
+    "value": "#d9b8ff"
+  },
+  "icon-tooltip-selected-secondary": {
+    "value": "#d9b8ff"
+  },
+  "icon-tooltip-selected-tertiary": {
+    "value": "#d9b8ff"
+  },
+  "icon-tooltip-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-tooltip-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-warning": {
+    "value": "#ffcd29"
+  },
+  "icon-warning": {
+    "value": "#ffcd29",
+    "description": "Yellow icons used to warn users about a potential problem."
+  },
+  "icon-warning-pressed": {
+    "value": "#b86200"
+  },
+  "icon-warning-secondary": {
+    "value": "#ffcd29"
+  },
+  "icon-warning-tertiary": {
+    "value": "#ffcd29"
+  },
+  "icondesignfilesecondary": {
+    "value": "#80caff"
+  },
+  "iconfigjamfilesecondary": {
+    "value": "#d9b8ff"
+  },
+  "iconondarkcanvas": {
+    "value": "#ffffffe5"
+  },
+  "icononlightcanvas": {
+    "value": "#000000e5"
+  },
+  "icononvoting": {
+    "value": "#000000e5"
+  },
+  "iconprototypefile": {
+    "value": "#d9d9d9"
+  },
+  "iconprototypefilesecondary": {
+    "value": "#2c2c2c"
+  },
+  "iconpublishedfile": {
+    "value": "#2c2c2c"
+  },
+  "iconpublishedfilesecondary": {
+    "value": "#757575"
+  },
+  "loading": {
+    "value": "#0000001a"
+  },
+  "loadingmenu": {
+    "value": "#ffffff1a"
+  },
+  "loadingsecondary": {
+    "value": "#0000000d"
+  },
+  "loadingsecondarymenu": {
+    "value": "#ffffff0d"
+  },
+  "modalbackdrop": {
+    "value": "#00000080"
+  },
+  "multiplayerblue": {
+    "value": "#007be5"
+  },
+  "multiplayerbluehover": {
+    "value": "#0768cf"
+  },
+  "multiplayerbluesecondary": {
+    "value": "#034ac1"
+  },
+  "multiplayergreen": {
+    "value": "#14ae5c"
+  },
+  "multiplayergreenhover": {
+    "value": "#009951"
+  },
+  "multiplayergreensecondary": {
+    "value": "#036838"
+  },
+  "multiplayergrey": {
+    "value": "#667799"
+  },
+  "multiplayergreyhover": {
+    "value": "#536383"
+  },
+  "multiplayergreysecondary": {
+    "value": "#394360"
+  },
+  "multiplayerpink": {
+    "value": "#ff24bd"
+  },
+  "multiplayerpinkhover": {
+    "value": "#ea10ac"
+  },
+  "multiplayerpinksecondary": {
+    "value": "#971172"
+  },
+  "multiplayerpurple": {
+    "value": "#9747ff"
+  },
+  "multiplayerpurplehover": {
+    "value": "#8638e5"
+  },
+  "multiplayerpurplesecondary": {
+    "value": "#681abb"
+  },
+  "multiplayerred": {
+    "value": "#f24822"
+  },
+  "multiplayerredhover": {
+    "value": "#dc3412"
+  },
+  "multiplayerredsecondary": {
+    "value": "#9f1f18"
+  },
+  "multiplayeryellow": {
+    "value": "#ffcd29"
+  },
+  "multiplayeryellowhover": {
+    "value": "#ffc21a"
+  },
+  "multiplayeryellowsecondary": {
+    "value": "#eba611"
+  },
+  "nodehandle": {
+    "value": "#80caff"
+  },
+  "prototypeloadingbackdrop": {
+    "value": "#000000e5"
+  },
+  "scrollbar": {
+    "value": "#b3b3b380"
+  },
+  "shadow": {
+    "value": "#00000026"
+  },
+  "text": {
+    "value": "#000000e5",
+    "description": "Our default text color for most titles, tabs, and body text."
+  },
+  "text-assistive": {
+    "value": "#ea10ac",
+    "description": "Pink text used when Figma is assisting you in some way (ex: in auto layout)"
+  },
+  "text-assistive-pressed": {
+    "value": "#cb0b96"
+  },
+  "text-assistive-secondary": {
+    "value": "#ea10ac"
+  },
+  "text-assistive-tertiary": {
+    "value": "#ea10ac"
+  },
+  "text-brand": {
+    "value": "#8638e5",
+    "description": "Text that is tinted to match the current product, typically used for things like links. For specifically referring to concepts in design, we can use color-text-design instead."
+  },
+  "text-brand-secondary": {
+    "value": "#8638e5"
+  },
+  "text-brand-tertiary": {
+    "value": "#8638e5"
+  },
+  "text-component": {
+    "value": "#8638e5"
+  },
+  "text-component-pressed": {
+    "value": "#7c2bda"
+  },
+  "text-component-secondary": {
+    "value": "#c5b2dc"
+  },
+  "text-component-tertiary": {
+    "value": "#c5b2dc"
+  },
+  "text-danger": {
+    "value": "#dc3412",
+    "description": "Red text used to alert users about an error."
+  },
+  "text-danger-secondary": {
+    "value": "#dc3412"
+  },
+  "text-danger-tertiary": {
+    "value": "#dc3412"
+  },
+  "text-design": {
+    "value": "#007be5"
+  },
+  "text-design-pressed": {
+    "value": "#0768cf"
+  },
+  "text-design-secondary": {
+    "value": "#007be5"
+  },
+  "text-design-tertiary": {
+    "value": "#007be5"
+  },
+  "text-disabled": {
+    "value": "#0000004d"
+  },
+  "text-figjam": {
+    "value": "#8638e5"
+  },
+  "text-figjam-pressed": {
+    "value": "#7c2bda"
+  },
+  "text-figjam-secondary": {
+    "value": "#c5b2dc"
+  },
+  "text-figjam-tertiary": {
+    "value": "#c5b2dc"
+  },
+  "text-handoff": {
+    "value": "#009951"
+  },
+  "text-handoff-secondary": {
+    "value": "#009951"
+  },
+  "text-handoff-tertiary": {
+    "value": "#009951"
+  },
+  "text-hover": {
+    "value": "#000000e5"
+  },
+  "text-measure": {
+    "value": "#dc3412"
+  },
+  "text-measure-secondary": {
+    "value": "#dc3412"
+  },
+  "text-measure-tertiary": {
+    "value": "#dc3412"
+  },
+  "text-menu": {
+    "value": "#ffffff"
+  },
+  "text-menu-danger": {
+    "value": "#f24822"
+  },
+  "text-menu-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-menu-hover": {
+    "value": "#ffffff"
+  },
+  "text-menu-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "text-menu-onselected": {
+    "value": "#ffffff"
+  },
+  "text-menu-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-menu-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-menu-selected": {
+    "value": "#d9b8ff"
+  },
+  "text-menu-selected-secondary": {
+    "value": "#d9b8ff"
+  },
+  "text-menu-selected-tertiary": {
+    "value": "#d9b8ff"
+  },
+  "text-menu-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-menu-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-menu-warning": {
+    "value": "#ffd966"
+  },
+  "text-onassistive": {
+    "value": "#ffffff"
+  },
+  "text-onassistive-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onassistive-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onbrand": {
+    "value": "#ffffff",
+    "description": "Used for text against a “background with a fill color” (for example, a blue / purple background in our “Share” button)"
+  },
+  "text-onbrand-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onbrand-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-oncomponent": {
+    "value": "#ffffff"
+  },
+  "text-oncomponent-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-oncomponent-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-ondanger": {
+    "value": "#ffffff"
+  },
+  "text-ondanger-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-ondanger-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-ondesign": {
+    "value": "#ffffff"
+  },
+  "text-ondesign-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-ondesign-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-ondisabled": {
+    "value": "#ffffff"
+  },
+  "text-onfigjam": {
+    "value": "#ffffff"
+  },
+  "text-onfigjam-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onfigjam-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-oninverse": {
+    "value": "#ffffffe5"
+  },
+  "text-onmeasure": {
+    "value": "#ffffff"
+  },
+  "text-onmeasure-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onmeasure-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onselected": {
+    "value": "#000000e5"
+  },
+  "text-onselected-secondary": {
+    "value": "#00000080"
+  },
+  "text-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "text-onselected-tertiary": {
+    "value": "#0000004d"
+  },
+  "text-onsuccess": {
+    "value": "#ffffff"
+  },
+  "text-onsuccess-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onsuccess-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onwarning": {
+    "value": "#000000e5"
+  },
+  "text-onwarning-secondary": {
+    "value": "#00000080"
+  },
+  "text-onwarning-tertiary": {
+    "value": "#0000004d"
+  },
+  "text-secondary": {
+    "value": "#00000080",
+    "description": "Our secondary text color for inactive tabs, labels, timestamps, and other text that needs to be “lighter” in order to create hierarchy."
+  },
+  "text-secondary-hover": {
+    "value": "#000000e5"
+  },
+  "text-selected": {
+    "value": "#8638e5"
+  },
+  "text-selected-secondary": {
+    "value": "#8638e5"
+  },
+  "text-selected-tertiary": {
+    "value": "#8638e5"
+  },
+  "text-success": {
+    "value": "#009951"
+  },
+  "text-success-secondary": {
+    "value": "#009951"
+  },
+  "text-success-tertiary": {
+    "value": "#009951"
+  },
+  "text-tertiary": {
+    "value": "#0000004d",
+    "description": "Primarily used for placeholder text (for example in a search input), or for hierarchy below secondary text. Note that text at this level is below our color contrast threshold, and may not be readable to all users."
+  },
+  "text-tertiary-hover": {
+    "value": "#000000e5"
+  },
+  "text-toolbar": {
+    "value": "#000000e5"
+  },
+  "text-toolbar-danger": {
+    "value": "#ffafa3"
+  },
+  "text-toolbar-disabled": {
+    "value": "#0000004d"
+  },
+  "text-toolbar-hover": {
+    "value": "#000000e5"
+  },
+  "text-toolbar-ondisabled": {
+    "value": "#2c2c2c"
+  },
+  "text-toolbar-onselected": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-secondary": {
+    "value": "#00000080"
+  },
+  "text-toolbar-secondary-hover": {
+    "value": "#000000e5"
+  },
+  "text-toolbar-selected": {
+    "value": "#d9b8ff"
+  },
+  "text-toolbar-selected-secondary": {
+    "value": "#d9b8ff"
+  },
+  "text-toolbar-selected-tertiary": {
+    "value": "#d9b8ff"
+  },
+  "text-toolbar-tertiary": {
+    "value": "#0000004d"
+  },
+  "text-toolbar-tertiary-hover": {
+    "value": "#000000e5"
+  },
+  "text-toolbar-warning": {
+    "value": "#b86200"
+  },
+  "text-tooltip": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-danger": {
+    "value": "#ffafa3"
+  },
+  "text-tooltip-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-tooltip-hover": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "text-tooltip-onselected": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-tooltip-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-selected": {
+    "value": "#d9b8ff"
+  },
+  "text-tooltip-selected-secondary": {
+    "value": "#d9b8ff"
+  },
+  "text-tooltip-selected-tertiary": {
+    "value": "#d9b8ff"
+  },
+  "text-tooltip-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-tooltip-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-warning": {
+    "value": "#ffd966"
+  },
+  "text-warning": {
+    "value": "#b86200",
+    "description": "Yellow text used to warn users about a potential problem."
+  },
+  "text-warning-secondary": {
+    "value": "#b86200"
+  },
+  "text-warning-tertiary": {
+    "value": "#b86200"
+  },
+  "texthighlight": {
+    "value": "#974aff66"
+  },
+  "textondarkcanvas": {
+    "value": "#ffffffe5"
+  },
+  "textondarkcanvassecondary": {
+    "value": "#ffffffb2"
+  },
+  "textonlightcanvas": {
+    "value": "#000000e5"
+  },
+  "textonlightcanvassecondary": {
+    "value": "#0000004d"
+  },
+  "textonmultiplayerblue": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayergreen": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayergrey": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayerpink": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayerpurple": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayerred": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayeryellow": {
+    "value": "#000000e5"
+  },
+  "textonvoting": {
+    "value": "#000000e5"
+  }
+}
diff --git a/packages/theme/tokens/colors/figma-dark.json b/packages/theme/tokens/colors/figma-dark.json
new file mode 100644
index 0000000..9edccc6
--- /dev/null
+++ b/packages/theme/tokens/colors/figma-dark.json
@@ -0,0 +1,1506 @@
+{
+  "bg": {
+    "value": "#2c2c2c",
+    "description": "Our default background color"
+  },
+  "bg-assistive": {
+    "value": "#f316b0"
+  },
+  "bg-assistive-hover": {
+    "value": "#d01b9c"
+  },
+  "bg-assistive-pressed": {
+    "value": "#d01b9c"
+  },
+  "bg-assistive-secondary": {
+    "value": "#96207a"
+  },
+  "bg-assistive-tertiary": {
+    "value": "#68275e"
+  },
+  "bg-brand": {
+    "value": "#0c8ce9",
+    "description": "A fill tinted to match the accent color of the current product."
+  },
+  "bg-brand-hover": {
+    "value": "#0a6dc2"
+  },
+  "bg-brand-pressed": {
+    "value": "#0a6dc2"
+  },
+  "bg-brand-secondary": {
+    "value": "#105cad"
+  },
+  "bg-brand-tertiary": {
+    "value": "#394360"
+  },
+  "bg-component": {
+    "value": "#8a38f5"
+  },
+  "bg-component-hover": {
+    "value": "#7a2ed6"
+  },
+  "bg-component-pressed": {
+    "value": "#7a2ed6"
+  },
+  "bg-component-secondary": {
+    "value": "#652ca8"
+  },
+  "bg-component-tertiary": {
+    "value": "#473956"
+  },
+  "bg-danger": {
+    "value": "#e03e1a",
+    "description": "Red fill color behind destructive buttons, and error banners."
+  },
+  "bg-danger-hover": {
+    "value": "#c4381c"
+  },
+  "bg-danger-pressed": {
+    "value": "#c4381c"
+  },
+  "bg-danger-secondary": {
+    "value": "#963323"
+  },
+  "bg-danger-tertiary": {
+    "value": "#60332a"
+  },
+  "bg-design": {
+    "value": "#0c8ce9"
+  },
+  "bg-design-hover": {
+    "value": "#0a6dc2"
+  },
+  "bg-design-pressed": {
+    "value": "#0a6dc2"
+  },
+  "bg-design-secondary": {
+    "value": "#105cad"
+  },
+  "bg-design-tertiary": {
+    "value": "#394360"
+  },
+  "bg-disabled": {
+    "value": "#757575"
+  },
+  "bg-disabled-secondary": {
+    "value": "#b3b3b3"
+  },
+  "bg-figjam": {
+    "value": "#8a38f5",
+    "description": "Purple fill color used for backgrounds like a button that opens in FigJam."
+  },
+  "bg-figjam-hover": {
+    "value": "#7a2ed6"
+  },
+  "bg-figjam-pressed": {
+    "value": "#7a2ed6"
+  },
+  "bg-figjam-secondary": {
+    "value": "#652ca8"
+  },
+  "bg-figjam-tertiary": {
+    "value": "#473956"
+  },
+  "bg-handoff": {
+    "value": "#198f51",
+    "description": "Green fill color used for backgrounds like a button that opens in Dev Mode."
+  },
+  "bg-handoff-hover": {
+    "value": "#078348"
+  },
+  "bg-handoff-pressed": {
+    "value": "#078348"
+  },
+  "bg-handoff-secondary": {
+    "value": "#0a5c35"
+  },
+  "bg-handoff-tertiary": {
+    "value": "#476656"
+  },
+  "bg-hover": {
+    "value": "#383838",
+    "description": "A light grey hover fill color behind icons, and selectable elements."
+  },
+  "bg-info": {
+    "value": "#394360"
+  },
+  "bg-inverse": {
+    "value": "#ffffff"
+  },
+  "bg-measure": {
+    "value": "#e03e1a"
+  },
+  "bg-measure-hover": {
+    "value": "#c4381c"
+  },
+  "bg-measure-pressed": {
+    "value": "#c4381c"
+  },
+  "bg-measure-secondary": {
+    "value": "#963323"
+  },
+  "bg-measure-tertiary": {
+    "value": "#60332a"
+  },
+  "bg-menu": {
+    "value": "#1e1e1e",
+    "description": "The dark fill color of our menus "
+  },
+  "bg-menu-disabled": {
+    "value": "#757575"
+  },
+  "bg-menu-hover": {
+    "value": "#2c2c2c"
+  },
+  "bg-menu-pressed": {
+    "value": "#2c2c2c"
+  },
+  "bg-menu-secondary": {
+    "value": "#383838"
+  },
+  "bg-menu-selected": {
+    "value": "#0c8ce9"
+  },
+  "bg-menu-selected-hover": {
+    "value": "#0a6dc2"
+  },
+  "bg-menu-selected-pressed": {
+    "value": "#0a6dc2"
+  },
+  "bg-menu-selected-secondary": {
+    "value": "#394360"
+  },
+  "bg-menu-selected-tertiary": {
+    "value": "#394360"
+  },
+  "bg-menu-tertiary": {
+    "value": "#444444"
+  },
+  "bg-onselected": {
+    "value": "#667799"
+  },
+  "bg-onselected-hover": {
+    "value": "#667799"
+  },
+  "bg-onselected-pressed": {
+    "value": "#667799"
+  },
+  "bg-pressed": {
+    "value": "#383838"
+  },
+  "bg-secondary": {
+    "value": "#383838",
+    "description": "Our secondary background color for most containers."
+  },
+  "bg-selected": {
+    "value": "#4a5878",
+    "description": "A lightly tinted selected fill color for selected elements."
+  },
+  "bg-selected-hover": {
+    "value": "#536383"
+  },
+  "bg-selected-pressed": {
+    "value": "#536383"
+  },
+  "bg-selected-secondary": {
+    "value": "#394360"
+  },
+  "bg-selected-strong": {
+    "value": "#0c8ce9"
+  },
+  "bg-selected-tertiary": {
+    "value": "#394360"
+  },
+  "bg-success": {
+    "value": "#198f51"
+  },
+  "bg-success-hover": {
+    "value": "#078348"
+  },
+  "bg-success-pressed": {
+    "value": "#078348"
+  },
+  "bg-success-secondary": {
+    "value": "#0a5c35"
+  },
+  "bg-success-tertiary": {
+    "value": "#476656"
+  },
+  "bg-tertiary": {
+    "value": "#444444"
+  },
+  "bg-toolbar": {
+    "value": "#2c2c2c",
+    "description": "The dark fill color of our UI2 editor toolbar"
+  },
+  "bg-toolbar-disabled": {
+    "value": "#757575"
+  },
+  "bg-toolbar-hover": {
+    "value": "#111111"
+  },
+  "bg-toolbar-pressed": {
+    "value": "#111111"
+  },
+  "bg-toolbar-secondary": {
+    "value": "#383838"
+  },
+  "bg-toolbar-selected": {
+    "value": "#0c8ce9"
+  },
+  "bg-toolbar-selected-hover": {
+    "value": "#0a6dc2"
+  },
+  "bg-toolbar-selected-pressed": {
+    "value": "#0a6dc2"
+  },
+  "bg-toolbar-selected-secondary": {
+    "value": "#105cad"
+  },
+  "bg-toolbar-selected-tertiary": {
+    "value": "#0c8ce9"
+  },
+  "bg-toolbar-tertiary": {
+    "value": "#444444"
+  },
+  "bg-tooltip": {
+    "value": "#1e1e1e"
+  },
+  "bg-tooltip-disabled": {
+    "value": "#757575"
+  },
+  "bg-tooltip-hover": {
+    "value": "#2c2c2c"
+  },
+  "bg-tooltip-pressed": {
+    "value": "#2c2c2c"
+  },
+  "bg-tooltip-secondary": {
+    "value": "#383838"
+  },
+  "bg-tooltip-selected": {
+    "value": "#0c8ce9"
+  },
+  "bg-tooltip-selected-hover": {
+    "value": "#0a6dc2"
+  },
+  "bg-tooltip-selected-pressed": {
+    "value": "#0a6dc2"
+  },
+  "bg-tooltip-selected-secondary": {
+    "value": "#394360"
+  },
+  "bg-tooltip-selected-tertiary": {
+    "value": "#394360"
+  },
+  "bg-tooltip-tertiary": {
+    "value": "#444444"
+  },
+  "bg-warning": {
+    "value": "#f3c11b",
+    "description": "Yellow fill color for warning banners"
+  },
+  "bg-warning-hover": {
+    "value": "#f2b50d"
+  },
+  "bg-warning-pressed": {
+    "value": "#f2b50d"
+  },
+  "bg-warning-secondary": {
+    "value": "#e4a711"
+  },
+  "bg-warning-tertiary": {
+    "value": "#5c4100"
+  },
+  "bghoverondarkcanvas": {
+    "value": "#ffffff33"
+  },
+  "bghoveronlightcanvas": {
+    "value": "#00000033"
+  },
+  "bghovertransparent": {
+    "value": "#ffffff0d"
+  },
+  "bgsecondaryoncanvas": {
+    "value": "#111111"
+  },
+  "bgselectedarea": {
+    "value": "#0d99ff33"
+  },
+  "bgtransparent": {
+    "value": "#00000099"
+  },
+  "bgtransparent-secondary-hover": {
+    "value": "#ffffff1a"
+  },
+  "bgtransparent-secondary-pressed": {
+    "value": "#ffffff26"
+  },
+  "bgtransparentsecondary": {
+    "value": "#ffffff26"
+  },
+  "bgvoting": {
+    "value": "#f3c11b"
+  },
+  "bgvotingsecondary": {
+    "value": "#fbe8ad"
+  },
+  "bgvotingtertiary": {
+    "value": "#fdf7dd"
+  },
+  "bgvotingwheeldial": {
+    "value": "#fdf7dd"
+  },
+  "bgvotingwheelhover": {
+    "value": "#fbe8ad"
+  },
+  "border": {
+    "value": "#444444",
+    "description": "Our default border color used as a divider between sections, or around inputs."
+  },
+  "border-assistive": {
+    "value": "#96207a"
+  },
+  "border-assistive-strong": {
+    "value": "#fc9ce0"
+  },
+  "border-brand": {
+    "value": "#105cad"
+  },
+  "border-brand-strong": {
+    "value": "#7cc4f8"
+  },
+  "border-component": {
+    "value": "#652ca8"
+  },
+  "border-component-hover": {
+    "value": "#8a38f5"
+  },
+  "border-component-strong": {
+    "value": "#d6b6fb"
+  },
+  "border-danger": {
+    "value": "#963323"
+  },
+  "border-danger-strong": {
+    "value": "#fca397"
+  },
+  "border-design": {
+    "value": "#105cad"
+  },
+  "border-design-strong": {
+    "value": "#7cc4f8"
+  },
+  "border-disabled": {
+    "value": "#444444"
+  },
+  "border-disabled-strong": {
+    "value": "#ffffff66"
+  },
+  "border-figjam": {
+    "value": "#652ca8"
+  },
+  "border-figjam-strong": {
+    "value": "#d1a8ff"
+  },
+  "border-handoff": {
+    "value": "#0a5c35"
+  },
+  "border-handoff-strong": {
+    "value": "#79d297"
+  },
+  "border-measure": {
+    "value": "#963323"
+  },
+  "border-measure-strong": {
+    "value": "#fca397"
+  },
+  "border-menu": {
+    "value": "#383838",
+    "description": "Used for borders or dividers within a menu element."
+  },
+  "border-menu-disabled": {
+    "value": "#383838"
+  },
+  "border-menu-disabled-strong": {
+    "value": "#383838"
+  },
+  "border-menu-onselected": {
+    "value": "#7cc4f8"
+  },
+  "border-menu-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "border-menu-selected": {
+    "value": "#0c8ce9"
+  },
+  "border-menu-selected-strong": {
+    "value": "#7cc4f8"
+  },
+  "border-menu-strong": {
+    "value": "#ffffff"
+  },
+  "border-onassistive": {
+    "value": "#d01b9c"
+  },
+  "border-onassistive-strong": {
+    "value": "#ffffff"
+  },
+  "border-onbrand": {
+    "value": "#0a6dc2"
+  },
+  "border-onbrand-strong": {
+    "value": "#ffffff",
+    "description": "Used for borders against a bg-brand background"
+  },
+  "border-oncomponent": {
+    "value": "#7a2ed6"
+  },
+  "border-oncomponent-strong": {
+    "value": "#ffffff"
+  },
+  "border-ondanger": {
+    "value": "#c4381c"
+  },
+  "border-ondanger-strong": {
+    "value": "#ffffff"
+  },
+  "border-ondesign": {
+    "value": "#0a6dc2"
+  },
+  "border-ondesign-strong": {
+    "value": "#ffffff"
+  },
+  "border-onfigjam": {
+    "value": "#7a2ed6"
+  },
+  "border-onfigjam-strong": {
+    "value": "#7a2ed6"
+  },
+  "border-onmeasure": {
+    "value": "#c4381c"
+  },
+  "border-onmeasure-strong": {
+    "value": "#ffffff"
+  },
+  "border-onselected": {
+    "value": "#667799"
+  },
+  "border-onselected-strong": {
+    "value": "#ffffffe5"
+  },
+  "border-onsuccess": {
+    "value": "#078348"
+  },
+  "border-onsuccess-strong": {
+    "value": "#ffffff"
+  },
+  "border-onwarning": {
+    "value": "#e4a711"
+  },
+  "border-onwarning-strong": {
+    "value": "#000000e5"
+  },
+  "border-selected": {
+    "value": "#0c8ce9",
+    "description": "Default selection border color we use for focused / selected inputs."
+  },
+  "border-selected-strong": {
+    "value": "#7cc4f8",
+    "description": "When presenting a selected border against an already selected background, we sometimes need to increase the prominence of the selected border."
+  },
+  "border-strong": {
+    "value": "#ffffffe5",
+    "description": "A much darker border color that we can use for emphasis around some UI elements."
+  },
+  "border-success": {
+    "value": "#0a5c35"
+  },
+  "border-success-strong": {
+    "value": "#79d297"
+  },
+  "border-toolbar": {
+    "value": "#444444"
+  },
+  "border-toolbar-disabled": {
+    "value": "#ffffff66"
+  },
+  "border-toolbar-onselected": {
+    "value": "#ffffff"
+  },
+  "border-toolbar-selected": {
+    "value": "#0c8ce9"
+  },
+  "border-toolbar-selected-strong": {
+    "value": "#7cc4f8"
+  },
+  "border-toolbar-strong": {
+    "value": "#ffffff"
+  },
+  "border-tooltip": {
+    "value": "#383838"
+  },
+  "border-tooltip-disabled": {
+    "value": "#383838"
+  },
+  "border-tooltip-disabled-strong": {
+    "value": "#383838"
+  },
+  "border-tooltip-onselected": {
+    "value": "#0a6dc2"
+  },
+  "border-tooltip-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "border-tooltip-selected": {
+    "value": "#0c8ce9"
+  },
+  "border-tooltip-selected-strong": {
+    "value": "#7cc4f8"
+  },
+  "border-tooltip-strong": {
+    "value": "#ffffff"
+  },
+  "border-warning": {
+    "value": "#925711"
+  },
+  "border-warning-strong": {
+    "value": "#f7d15f"
+  },
+  "bordertranslucent": {
+    "value": "#ffffff1a"
+  },
+  "conditionalborder": {
+    "value": "#444444"
+  },
+  "icon": {
+    "value": "#ffffff",
+    "description": "Our default icon color"
+  },
+  "icon-assistive": {
+    "value": "#fc9ce0",
+    "description": "Pink icons used when Figma is assisting you in some way."
+  },
+  "icon-assistive-pressed": {
+    "value": "#fbb1ed"
+  },
+  "icon-assistive-secondary": {
+    "value": "#fc9ce0"
+  },
+  "icon-assistive-tertiary": {
+    "value": "#fc9ce0"
+  },
+  "icon-brand": {
+    "value": "#7cc4f8",
+    "description": "An icon tinted to match the accent color of the current product."
+  },
+  "icon-brand-pressed": {
+    "value": "#0c8ce9"
+  },
+  "icon-brand-secondary": {
+    "value": "#0a6dc2"
+  },
+  "icon-brand-tertiary": {
+    "value": "#394360"
+  },
+  "icon-component": {
+    "value": "#d1a8ff"
+  },
+  "icon-component-pressed": {
+    "value": "#d6b6fb"
+  },
+  "icon-component-secondary": {
+    "value": "#7f699b"
+  },
+  "icon-component-tertiary": {
+    "value": "#7f699b"
+  },
+  "icon-danger": {
+    "value": "#e03e1a",
+    "description": "Red icons used to alert users about an error."
+  },
+  "icon-danger-hover": {
+    "value": "#fbbcb6"
+  },
+  "icon-danger-pressed": {
+    "value": "#fbbcb6"
+  },
+  "icon-danger-secondary": {
+    "value": "#e03e1a"
+  },
+  "icon-danger-secondary-hover": {
+    "value": "#e03e1a"
+  },
+  "icon-danger-tertiary": {
+    "value": "#e03e1a"
+  },
+  "icon-design": {
+    "value": "#7cc4f8"
+  },
+  "icon-design-pressed": {
+    "value": "#a8d7fa"
+  },
+  "icon-design-secondary": {
+    "value": "#7cc4f8"
+  },
+  "icon-design-tertiary": {
+    "value": "#7cc4f8"
+  },
+  "icon-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-figjam": {
+    "value": "#d1a8ff"
+  },
+  "icon-figjam-pressed": {
+    "value": "#d6b6fb"
+  },
+  "icon-figjam-secondary": {
+    "value": "#7f699b"
+  },
+  "icon-figjam-tertiary": {
+    "value": "#7f699b"
+  },
+  "icon-handoff": {
+    "value": "#79d297"
+  },
+  "icon-handoff-pressed": {
+    "value": "#a1e8b9"
+  },
+  "icon-handoff-secondary": {
+    "value": "#79d297"
+  },
+  "icon-handoff-tertiary": {
+    "value": "#79d297"
+  },
+  "icon-hover": {
+    "value": "#ffffff"
+  },
+  "icon-measure": {
+    "value": "#e03e1a"
+  },
+  "icon-measure-hover": {
+    "value": "#fbbcb6"
+  },
+  "icon-measure-pressed": {
+    "value": "#fbbcb6"
+  },
+  "icon-measure-secondary": {
+    "value": "#e03e1a"
+  },
+  "icon-measure-secondary-hover": {
+    "value": "#e03e1a"
+  },
+  "icon-measure-tertiary": {
+    "value": "#e03e1a"
+  },
+  "icon-menu": {
+    "value": "#ffffff"
+  },
+  "icon-menu-danger": {
+    "value": "#e03e1a"
+  },
+  "icon-menu-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-menu-hover": {
+    "value": "#ffffff"
+  },
+  "icon-menu-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "icon-menu-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-menu-pressed": {
+    "value": "#0c8ce9"
+  },
+  "icon-menu-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-menu-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-menu-selected": {
+    "value": "#7cc4f8"
+  },
+  "icon-menu-selected-secondary": {
+    "value": "#7cc4f8"
+  },
+  "icon-menu-selected-tertiary": {
+    "value": "#7cc4f8"
+  },
+  "icon-menu-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-menu-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-menu-warning": {
+    "value": "#f3c11b"
+  },
+  "icon-onassistive": {
+    "value": "#ffffff"
+  },
+  "icon-onassistive-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onassistive-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onbrand": {
+    "value": "#ffffff",
+    "description": "Icons against a “background with a fill color” (for example, a blue / purple background in our “Share” button)"
+  },
+  "icon-onbrand-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onbrand-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-oncomponent": {
+    "value": "#ffffff"
+  },
+  "icon-oncomponent-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-oncomponent-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-ondanger": {
+    "value": "#ffffff"
+  },
+  "icon-ondanger-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-ondanger-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-ondesign": {
+    "value": "#ffffff"
+  },
+  "icon-ondesign-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-ondesign-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-ondisabled": {
+    "value": "#2c2c2c"
+  },
+  "icon-onfigjam": {
+    "value": "#ffffff"
+  },
+  "icon-onfigjam-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onfigjam-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-oninverse": {
+    "value": "#000000e5"
+  },
+  "icon-onmeasure": {
+    "value": "#ffffff"
+  },
+  "icon-onmeasure-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onmeasure-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-onselected-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "icon-onselected-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onsuccess": {
+    "value": "#ffffff"
+  },
+  "icon-onsuccess-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onsuccess-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onwarning": {
+    "value": "#000000e5"
+  },
+  "icon-onwarning-secondary": {
+    "value": "#00000080"
+  },
+  "icon-onwarning-tertiary": {
+    "value": "#0000004d"
+  },
+  "icon-pressed": {
+    "value": "#0a6dc2"
+  },
+  "icon-secondary": {
+    "value": "#ffffffb2",
+    "description": "Our secondary icon color for inactive elements that need to be “lighter” in order to create hierarchy."
+  },
+  "icon-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-selected": {
+    "value": "#7cc4f8"
+  },
+  "icon-selected-secondary": {
+    "value": "#7cc4f8"
+  },
+  "icon-selected-tertiary": {
+    "value": "#7cc4f8"
+  },
+  "icon-success": {
+    "value": "#198f51",
+    "description": "Green icons used for confirmation, and approval."
+  },
+  "icon-success-pressed": {
+    "value": "#a1e8b9"
+  },
+  "icon-success-secondary": {
+    "value": "#198f51"
+  },
+  "icon-success-tertiary": {
+    "value": "#198f51"
+  },
+  "icon-tertiary": {
+    "value": "#ffffff66",
+    "description": "Our tertiary icon color primarily used for carets"
+  },
+  "icon-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-danger": {
+    "value": "#e03e1a"
+  },
+  "icon-toolbar-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-toolbar-hover": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-ondisabled": {
+    "value": "#2c2c2c"
+  },
+  "icon-toolbar-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-pressed": {
+    "value": "#0c8ce9"
+  },
+  "icon-toolbar-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-toolbar-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-selected": {
+    "value": "#7cc4f8"
+  },
+  "icon-toolbar-selected-secondary": {
+    "value": "#7cc4f8"
+  },
+  "icon-toolbar-selected-tertiary": {
+    "value": "#7cc4f8"
+  },
+  "icon-toolbar-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-toolbar-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-warning": {
+    "value": "#f3c11b"
+  },
+  "icon-tooltip": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-danger": {
+    "value": "#e03e1a"
+  },
+  "icon-tooltip-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-tooltip-hover": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "icon-tooltip-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-pressed": {
+    "value": "#0c8ce9"
+  },
+  "icon-tooltip-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-tooltip-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-selected": {
+    "value": "#7cc4f8"
+  },
+  "icon-tooltip-selected-secondary": {
+    "value": "#7cc4f8"
+  },
+  "icon-tooltip-selected-tertiary": {
+    "value": "#7cc4f8"
+  },
+  "icon-tooltip-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-tooltip-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-warning": {
+    "value": "#f3c11b"
+  },
+  "icon-warning": {
+    "value": "#f3c11b",
+    "description": "Yellow icons used to warn users about a potential problem."
+  },
+  "icon-warning-pressed": {
+    "value": "#f7d15f"
+  },
+  "icon-warning-secondary": {
+    "value": "#f3c11b"
+  },
+  "icon-warning-tertiary": {
+    "value": "#f3c11b"
+  },
+  "icondesignfilesecondary": {
+    "value": "#7cc4f8"
+  },
+  "iconfigjamfilesecondary": {
+    "value": "#d1a8ff"
+  },
+  "iconondarkcanvas": {
+    "value": "#ffffffe5"
+  },
+  "icononlightcanvas": {
+    "value": "#000000e5"
+  },
+  "icononvoting": {
+    "value": "#000000e5"
+  },
+  "iconprototypefile": {
+    "value": "#757575"
+  },
+  "iconprototypefilesecondary": {
+    "value": "#ffffff"
+  },
+  "iconpublishedfile": {
+    "value": "#757575"
+  },
+  "iconpublishedfilesecondary": {
+    "value": "#b3b3b3"
+  },
+  "loading": {
+    "value": "#ffffff1a"
+  },
+  "loadingmenu": {
+    "value": "#ffffff1a"
+  },
+  "loadingsecondary": {
+    "value": "#ffffff0d"
+  },
+  "loadingsecondarymenu": {
+    "value": "#ffffff0d"
+  },
+  "modalbackdrop": {
+    "value": "#00000080"
+  },
+  "multiplayerblue": {
+    "value": "#0a6dc2"
+  },
+  "multiplayerbluehover": {
+    "value": "#105cad"
+  },
+  "multiplayerbluesecondary": {
+    "value": "#184591"
+  },
+  "multiplayergreen": {
+    "value": "#198f51"
+  },
+  "multiplayergreenhover": {
+    "value": "#078348"
+  },
+  "multiplayergreensecondary": {
+    "value": "#0a4c2d"
+  },
+  "multiplayergrey": {
+    "value": "#667799"
+  },
+  "multiplayergreyhover": {
+    "value": "#536383"
+  },
+  "multiplayergreysecondary": {
+    "value": "#394360"
+  },
+  "multiplayerpink": {
+    "value": "#f316b0"
+  },
+  "multiplayerpinkhover": {
+    "value": "#d01b9c"
+  },
+  "multiplayerpinksecondary": {
+    "value": "#68275e"
+  },
+  "multiplayerpurple": {
+    "value": "#8a38f5"
+  },
+  "multiplayerpurplehover": {
+    "value": "#7a2ed6"
+  },
+  "multiplayerpurplesecondary": {
+    "value": "#50297a"
+  },
+  "multiplayerred": {
+    "value": "#e03e1a"
+  },
+  "multiplayerredhover": {
+    "value": "#c4381c"
+  },
+  "multiplayerredsecondary": {
+    "value": "#7c2622"
+  },
+  "multiplayeryellow": {
+    "value": "#f3c11b"
+  },
+  "multiplayeryellowhover": {
+    "value": "#f2b50d"
+  },
+  "multiplayeryellowsecondary": {
+    "value": "#c58011"
+  },
+  "nodehandle": {
+    "value": "#7cc4f8"
+  },
+  "prototypeloadingbackdrop": {
+    "value": "#000000e5"
+  },
+  "scrollbar": {
+    "value": "#b3b3b380"
+  },
+  "shadow": {
+    "value": "#00000099"
+  },
+  "text": {
+    "value": "#ffffff",
+    "description": "Our default text color for most titles, tabs, and body text."
+  },
+  "text-assistive": {
+    "value": "#fc9ce0",
+    "description": "Pink text used when Figma is assisting you in some way (ex: in auto layout)"
+  },
+  "text-assistive-pressed": {
+    "value": "#fbb1ed"
+  },
+  "text-assistive-secondary": {
+    "value": "#fc9ce0"
+  },
+  "text-assistive-tertiary": {
+    "value": "#fc9ce0"
+  },
+  "text-brand": {
+    "value": "#7cc4f8",
+    "description": "Text that is tinted to match the current product, typically used for things like links. For specifically referring to concepts in design, we can use color-text-design instead."
+  },
+  "text-brand-secondary": {
+    "value": "#7cc4f8"
+  },
+  "text-brand-tertiary": {
+    "value": "#7cc4f8"
+  },
+  "text-component": {
+    "value": "#d1a8ff"
+  },
+  "text-component-pressed": {
+    "value": "#d6b6fb"
+  },
+  "text-component-secondary": {
+    "value": "#7f699b"
+  },
+  "text-component-tertiary": {
+    "value": "#7f699b"
+  },
+  "text-danger": {
+    "value": "#fca397",
+    "description": "Red text used to alert users about an error."
+  },
+  "text-danger-secondary": {
+    "value": "#fca397"
+  },
+  "text-danger-tertiary": {
+    "value": "#fca397"
+  },
+  "text-design": {
+    "value": "#7cc4f8"
+  },
+  "text-design-pressed": {
+    "value": "#a8d7fa"
+  },
+  "text-design-secondary": {
+    "value": "#7cc4f8"
+  },
+  "text-design-tertiary": {
+    "value": "#7cc4f8"
+  },
+  "text-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-figjam": {
+    "value": "#c5b2dc"
+  },
+  "text-figjam-pressed": {
+    "value": "#d6b6fb"
+  },
+  "text-figjam-secondary": {
+    "value": "#7f699b"
+  },
+  "text-figjam-tertiary": {
+    "value": "#7f699b"
+  },
+  "text-handoff": {
+    "value": "#79d297"
+  },
+  "text-handoff-secondary": {
+    "value": "#79d297"
+  },
+  "text-handoff-tertiary": {
+    "value": "#79d297"
+  },
+  "text-hover": {
+    "value": "#ffffff"
+  },
+  "text-measure": {
+    "value": "#fca397"
+  },
+  "text-measure-secondary": {
+    "value": "#fca397"
+  },
+  "text-measure-tertiary": {
+    "value": "#fca397"
+  },
+  "text-menu": {
+    "value": "#ffffff"
+  },
+  "text-menu-danger": {
+    "value": "#fca397"
+  },
+  "text-menu-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-menu-hover": {
+    "value": "#ffffff"
+  },
+  "text-menu-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "text-menu-onselected": {
+    "value": "#ffffff"
+  },
+  "text-menu-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-menu-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-menu-selected": {
+    "value": "#7cc4f8"
+  },
+  "text-menu-selected-secondary": {
+    "value": "#7cc4f8"
+  },
+  "text-menu-selected-tertiary": {
+    "value": "#7cc4f8"
+  },
+  "text-menu-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-menu-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-menu-warning": {
+    "value": "#f7d15f"
+  },
+  "text-onassistive": {
+    "value": "#ffffff"
+  },
+  "text-onassistive-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onassistive-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onbrand": {
+    "value": "#ffffff",
+    "description": "Used for text against a “background with a fill color” (for example, a blue / purple background in our “Share” button)"
+  },
+  "text-onbrand-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onbrand-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-oncomponent": {
+    "value": "#ffffff"
+  },
+  "text-oncomponent-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-oncomponent-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-ondanger": {
+    "value": "#ffffff"
+  },
+  "text-ondanger-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-ondanger-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-ondesign": {
+    "value": "#ffffff"
+  },
+  "text-ondesign-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-ondesign-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-ondisabled": {
+    "value": "#2c2c2c"
+  },
+  "text-onfigjam": {
+    "value": "#ffffff"
+  },
+  "text-onfigjam-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onfigjam-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-oninverse": {
+    "value": "#000000e5"
+  },
+  "text-onmeasure": {
+    "value": "#ffffff"
+  },
+  "text-onmeasure-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onmeasure-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onselected": {
+    "value": "#ffffffe5"
+  },
+  "text-onselected-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "text-onselected-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onsuccess": {
+    "value": "#ffffff"
+  },
+  "text-onsuccess-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onsuccess-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onwarning": {
+    "value": "#000000e5"
+  },
+  "text-onwarning-secondary": {
+    "value": "#00000080"
+  },
+  "text-onwarning-tertiary": {
+    "value": "#0000004d"
+  },
+  "text-secondary": {
+    "value": "#ffffffb2",
+    "description": "Our secondary text color for inactive tabs, labels, timestamps, and other text that needs to be “lighter” in order to create hierarchy."
+  },
+  "text-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-selected": {
+    "value": "#7cc4f8"
+  },
+  "text-selected-secondary": {
+    "value": "#7cc4f8"
+  },
+  "text-selected-tertiary": {
+    "value": "#7cc4f8"
+  },
+  "text-success": {
+    "value": "#79d297"
+  },
+  "text-success-secondary": {
+    "value": "#79d297"
+  },
+  "text-success-tertiary": {
+    "value": "#79d297"
+  },
+  "text-tertiary": {
+    "value": "#ffffff66",
+    "description": "Primarily used for placeholder text (for example in a search input), or for hierarchy below secondary text. Note that text at this level is below our color contrast threshold, and may not be readable to all users."
+  },
+  "text-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-toolbar": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-danger": {
+    "value": "#fca397"
+  },
+  "text-toolbar-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-toolbar-hover": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-ondisabled": {
+    "value": "#2c2c2c"
+  },
+  "text-toolbar-onselected": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-toolbar-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-selected": {
+    "value": "#7cc4f8"
+  },
+  "text-toolbar-selected-secondary": {
+    "value": "#7cc4f8"
+  },
+  "text-toolbar-selected-tertiary": {
+    "value": "#7cc4f8"
+  },
+  "text-toolbar-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-toolbar-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-warning": {
+    "value": "#f7d15f"
+  },
+  "text-tooltip": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-danger": {
+    "value": "#fca397"
+  },
+  "text-tooltip-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-tooltip-hover": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "text-tooltip-onselected": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-tooltip-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-selected": {
+    "value": "#7cc4f8"
+  },
+  "text-tooltip-selected-secondary": {
+    "value": "#7cc4f8"
+  },
+  "text-tooltip-selected-tertiary": {
+    "value": "#7cc4f8"
+  },
+  "text-tooltip-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-tooltip-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-warning": {
+    "value": "#f7d15f"
+  },
+  "text-warning": {
+    "value": "#f7d15f",
+    "description": "Yellow text used to warn users about a potential problem."
+  },
+  "text-warning-secondary": {
+    "value": "#f7d15f"
+  },
+  "text-warning-tertiary": {
+    "value": "#f7d15f"
+  },
+  "texthighlight": {
+    "value": "#0d99ff66"
+  },
+  "textondarkcanvas": {
+    "value": "#ffffffe5"
+  },
+  "textondarkcanvassecondary": {
+    "value": "#ffffffb2"
+  },
+  "textonlightcanvas": {
+    "value": "#000000e5"
+  },
+  "textonlightcanvassecondary": {
+    "value": "#0000004d"
+  },
+  "textonmultiplayerblue": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayergreen": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayergrey": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayerpink": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayerpurple": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayerred": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayeryellow": {
+    "value": "#000000e5"
+  },
+  "textonvoting": {
+    "value": "#000000e5"
+  }
+}
diff --git a/packages/theme/tokens/colors/figma-light.json b/packages/theme/tokens/colors/figma-light.json
new file mode 100644
index 0000000..a825ab6
--- /dev/null
+++ b/packages/theme/tokens/colors/figma-light.json
@@ -0,0 +1,1506 @@
+{
+  "bg": {
+    "value": "#ffffff",
+    "description": "Our default background color"
+  },
+  "bg-assistive": {
+    "value": "#ff24bd"
+  },
+  "bg-assistive-hover": {
+    "value": "#ea10ac"
+  },
+  "bg-assistive-pressed": {
+    "value": "#ea10ac"
+  },
+  "bg-assistive-secondary": {
+    "value": "#cb0b96"
+  },
+  "bg-assistive-tertiary": {
+    "value": "#ffe0fc"
+  },
+  "bg-brand": {
+    "value": "#0d99ff",
+    "description": "A fill tinted to match the accent color of the current product."
+  },
+  "bg-brand-hover": {
+    "value": "#007be5"
+  },
+  "bg-brand-pressed": {
+    "value": "#007be5"
+  },
+  "bg-brand-secondary": {
+    "value": "#0768cf"
+  },
+  "bg-brand-tertiary": {
+    "value": "#e5f4ff"
+  },
+  "bg-component": {
+    "value": "#9747ff"
+  },
+  "bg-component-hover": {
+    "value": "#8638e5"
+  },
+  "bg-component-pressed": {
+    "value": "#8638e5"
+  },
+  "bg-component-secondary": {
+    "value": "#7c2bda"
+  },
+  "bg-component-tertiary": {
+    "value": "#f1e5ff"
+  },
+  "bg-danger": {
+    "value": "#f24822",
+    "description": "Red fill color behind destructive buttons, and error banners."
+  },
+  "bg-danger-hover": {
+    "value": "#dc3412"
+  },
+  "bg-danger-pressed": {
+    "value": "#dc3412"
+  },
+  "bg-danger-secondary": {
+    "value": "#bd2915"
+  },
+  "bg-danger-tertiary": {
+    "value": "#ffe2e0"
+  },
+  "bg-design": {
+    "value": "#0d99ff"
+  },
+  "bg-design-hover": {
+    "value": "#007be5"
+  },
+  "bg-design-pressed": {
+    "value": "#007be5"
+  },
+  "bg-design-secondary": {
+    "value": "#0768cf"
+  },
+  "bg-design-tertiary": {
+    "value": "#e5f4ff"
+  },
+  "bg-disabled": {
+    "value": "#d9d9d9"
+  },
+  "bg-disabled-secondary": {
+    "value": "#b3b3b3"
+  },
+  "bg-figjam": {
+    "value": "#9747ff",
+    "description": "Purple fill color used for backgrounds like a button that opens in FigJam."
+  },
+  "bg-figjam-hover": {
+    "value": "#8638e5"
+  },
+  "bg-figjam-pressed": {
+    "value": "#8638e5"
+  },
+  "bg-figjam-secondary": {
+    "value": "#7c2bda"
+  },
+  "bg-figjam-tertiary": {
+    "value": "#f1e5ff"
+  },
+  "bg-handoff": {
+    "value": "#14ae5c",
+    "description": "Green fill color used for backgrounds like a button that opens in Dev Mode."
+  },
+  "bg-handoff-hover": {
+    "value": "#009951"
+  },
+  "bg-handoff-pressed": {
+    "value": "#009951"
+  },
+  "bg-handoff-secondary": {
+    "value": "#008043"
+  },
+  "bg-handoff-tertiary": {
+    "value": "#daecdf"
+  },
+  "bg-hover": {
+    "value": "#f5f5f5",
+    "description": "A light grey hover fill color behind icons, and selectable elements."
+  },
+  "bg-info": {
+    "value": "#e5f4ff"
+  },
+  "bg-inverse": {
+    "value": "#2c2c2c"
+  },
+  "bg-measure": {
+    "value": "#f24822"
+  },
+  "bg-measure-hover": {
+    "value": "#dc3412"
+  },
+  "bg-measure-pressed": {
+    "value": "#dc3412"
+  },
+  "bg-measure-secondary": {
+    "value": "#bd2915"
+  },
+  "bg-measure-tertiary": {
+    "value": "#ffe2e0"
+  },
+  "bg-menu": {
+    "value": "#1e1e1e",
+    "description": "The dark fill color of our menus "
+  },
+  "bg-menu-disabled": {
+    "value": "#757575"
+  },
+  "bg-menu-hover": {
+    "value": "#2c2c2c"
+  },
+  "bg-menu-pressed": {
+    "value": "#2c2c2c"
+  },
+  "bg-menu-secondary": {
+    "value": "#383838"
+  },
+  "bg-menu-selected": {
+    "value": "#0d99ff"
+  },
+  "bg-menu-selected-hover": {
+    "value": "#007be5"
+  },
+  "bg-menu-selected-pressed": {
+    "value": "#007be5"
+  },
+  "bg-menu-selected-secondary": {
+    "value": "#394360"
+  },
+  "bg-menu-selected-tertiary": {
+    "value": "#394360"
+  },
+  "bg-menu-tertiary": {
+    "value": "#444444"
+  },
+  "bg-onselected": {
+    "value": "#bde3ff"
+  },
+  "bg-onselected-hover": {
+    "value": "#bde3ff"
+  },
+  "bg-onselected-pressed": {
+    "value": "#bde3ff"
+  },
+  "bg-pressed": {
+    "value": "#f5f5f5"
+  },
+  "bg-secondary": {
+    "value": "#f5f5f5",
+    "description": "Our secondary background color for most containers."
+  },
+  "bg-selected": {
+    "value": "#e5f4ff",
+    "description": "A lightly tinted selected fill color for selected elements."
+  },
+  "bg-selected-hover": {
+    "value": "#bde3ff"
+  },
+  "bg-selected-pressed": {
+    "value": "#bde3ff"
+  },
+  "bg-selected-secondary": {
+    "value": "#f2f9ff"
+  },
+  "bg-selected-strong": {
+    "value": "#0d99ff"
+  },
+  "bg-selected-tertiary": {
+    "value": "#f2f9ff"
+  },
+  "bg-success": {
+    "value": "#14ae5c"
+  },
+  "bg-success-hover": {
+    "value": "#009951"
+  },
+  "bg-success-pressed": {
+    "value": "#009951"
+  },
+  "bg-success-secondary": {
+    "value": "#008043"
+  },
+  "bg-success-tertiary": {
+    "value": "#cff7d3"
+  },
+  "bg-tertiary": {
+    "value": "#e6e6e6"
+  },
+  "bg-toolbar": {
+    "value": "#2c2c2c",
+    "description": "The dark fill color of our UI2 editor toolbar"
+  },
+  "bg-toolbar-disabled": {
+    "value": "#757575"
+  },
+  "bg-toolbar-hover": {
+    "value": "#111111"
+  },
+  "bg-toolbar-pressed": {
+    "value": "#111111"
+  },
+  "bg-toolbar-secondary": {
+    "value": "#383838"
+  },
+  "bg-toolbar-selected": {
+    "value": "#0d99ff"
+  },
+  "bg-toolbar-selected-hover": {
+    "value": "#007be5"
+  },
+  "bg-toolbar-selected-pressed": {
+    "value": "#007be5"
+  },
+  "bg-toolbar-selected-secondary": {
+    "value": "#0768cf"
+  },
+  "bg-toolbar-selected-tertiary": {
+    "value": "#0d99ff"
+  },
+  "bg-toolbar-tertiary": {
+    "value": "#444444"
+  },
+  "bg-tooltip": {
+    "value": "#1e1e1e"
+  },
+  "bg-tooltip-disabled": {
+    "value": "#757575"
+  },
+  "bg-tooltip-hover": {
+    "value": "#2c2c2c"
+  },
+  "bg-tooltip-pressed": {
+    "value": "#2c2c2c"
+  },
+  "bg-tooltip-secondary": {
+    "value": "#383838"
+  },
+  "bg-tooltip-selected": {
+    "value": "#0d99ff"
+  },
+  "bg-tooltip-selected-hover": {
+    "value": "#007be5"
+  },
+  "bg-tooltip-selected-pressed": {
+    "value": "#007be5"
+  },
+  "bg-tooltip-selected-secondary": {
+    "value": "#394360"
+  },
+  "bg-tooltip-selected-tertiary": {
+    "value": "#394360"
+  },
+  "bg-tooltip-tertiary": {
+    "value": "#444444"
+  },
+  "bg-warning": {
+    "value": "#ffcd29",
+    "description": "Yellow fill color for warning banners"
+  },
+  "bg-warning-hover": {
+    "value": "#ffc21a"
+  },
+  "bg-warning-pressed": {
+    "value": "#ffc21a"
+  },
+  "bg-warning-secondary": {
+    "value": "#fab815"
+  },
+  "bg-warning-tertiary": {
+    "value": "#fff1c2"
+  },
+  "bghoverondarkcanvas": {
+    "value": "#ffffff33"
+  },
+  "bghoveronlightcanvas": {
+    "value": "#00000033"
+  },
+  "bghovertransparent": {
+    "value": "#0000000d"
+  },
+  "bgsecondaryoncanvas": {
+    "value": "#e6e6e6"
+  },
+  "bgselectedarea": {
+    "value": "#0d99ff33"
+  },
+  "bgtransparent": {
+    "value": "#ffffff99"
+  },
+  "bgtransparent-secondary-hover": {
+    "value": "#0000001a"
+  },
+  "bgtransparent-secondary-pressed": {
+    "value": "#00000026"
+  },
+  "bgtransparentsecondary": {
+    "value": "#ffffff"
+  },
+  "bgvoting": {
+    "value": "#ffcd29"
+  },
+  "bgvotingsecondary": {
+    "value": "#fff1c2"
+  },
+  "bgvotingtertiary": {
+    "value": "#fffbeb"
+  },
+  "bgvotingwheeldial": {
+    "value": "#fffbeb"
+  },
+  "bgvotingwheelhover": {
+    "value": "#fff1c2"
+  },
+  "border": {
+    "value": "#e6e6e6",
+    "description": "Our default border color used as a divider between sections, or around inputs."
+  },
+  "border-assistive": {
+    "value": "#ffbdf2"
+  },
+  "border-assistive-strong": {
+    "value": "#ea10ac"
+  },
+  "border-brand": {
+    "value": "#bde3ff"
+  },
+  "border-brand-strong": {
+    "value": "#007be5"
+  },
+  "border-component": {
+    "value": "#e4ccff"
+  },
+  "border-component-hover": {
+    "value": "#9747ff"
+  },
+  "border-component-strong": {
+    "value": "#8638e5"
+  },
+  "border-danger": {
+    "value": "#ffc7c2"
+  },
+  "border-danger-strong": {
+    "value": "#dc3412"
+  },
+  "border-design": {
+    "value": "#bde3ff"
+  },
+  "border-design-strong": {
+    "value": "#007be5"
+  },
+  "border-disabled": {
+    "value": "#e6e6e6"
+  },
+  "border-disabled-strong": {
+    "value": "#0000004d"
+  },
+  "border-figjam": {
+    "value": "#e4ccff"
+  },
+  "border-figjam-strong": {
+    "value": "#8638e5"
+  },
+  "border-handoff": {
+    "value": "#aff4c6"
+  },
+  "border-handoff-strong": {
+    "value": "#009951"
+  },
+  "border-measure": {
+    "value": "#ffc7c2"
+  },
+  "border-measure-strong": {
+    "value": "#dc3412"
+  },
+  "border-menu": {
+    "value": "#383838",
+    "description": "Used for borders or dividers within a menu element."
+  },
+  "border-menu-disabled": {
+    "value": "#383838"
+  },
+  "border-menu-disabled-strong": {
+    "value": "#383838"
+  },
+  "border-menu-onselected": {
+    "value": "#80caff"
+  },
+  "border-menu-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "border-menu-selected": {
+    "value": "#0d99ff"
+  },
+  "border-menu-selected-strong": {
+    "value": "#80caff"
+  },
+  "border-menu-strong": {
+    "value": "#ffffff"
+  },
+  "border-onassistive": {
+    "value": "#ea10ac"
+  },
+  "border-onassistive-strong": {
+    "value": "#ffffff"
+  },
+  "border-onbrand": {
+    "value": "#007be5"
+  },
+  "border-onbrand-strong": {
+    "value": "#ffffff",
+    "description": "Used for borders against a bg-brand background"
+  },
+  "border-oncomponent": {
+    "value": "#8638e5"
+  },
+  "border-oncomponent-strong": {
+    "value": "#ffffff"
+  },
+  "border-ondanger": {
+    "value": "#dc3412"
+  },
+  "border-ondanger-strong": {
+    "value": "#ffffff"
+  },
+  "border-ondesign": {
+    "value": "#007be5"
+  },
+  "border-ondesign-strong": {
+    "value": "#ffffff"
+  },
+  "border-onfigjam": {
+    "value": "#8638e5"
+  },
+  "border-onfigjam-strong": {
+    "value": "#8638e5"
+  },
+  "border-onmeasure": {
+    "value": "#dc3412"
+  },
+  "border-onmeasure-strong": {
+    "value": "#ffffff"
+  },
+  "border-onselected": {
+    "value": "#bde3ff"
+  },
+  "border-onselected-strong": {
+    "value": "#000000e5"
+  },
+  "border-onsuccess": {
+    "value": "#009951"
+  },
+  "border-onsuccess-strong": {
+    "value": "#ffffff"
+  },
+  "border-onwarning": {
+    "value": "#fab815"
+  },
+  "border-onwarning-strong": {
+    "value": "#000000e5"
+  },
+  "border-selected": {
+    "value": "#0d99ff",
+    "description": "Default selection border color we use for focused / selected inputs."
+  },
+  "border-selected-strong": {
+    "value": "#007be5",
+    "description": "When presenting a selected border against an already selected background, we sometimes need to increase the prominence of the selected border."
+  },
+  "border-strong": {
+    "value": "#2c2c2c",
+    "description": "A much darker border color that we can use for emphasis around some UI elements."
+  },
+  "border-success": {
+    "value": "#aff4c6"
+  },
+  "border-success-strong": {
+    "value": "#009951"
+  },
+  "border-toolbar": {
+    "value": "#444444"
+  },
+  "border-toolbar-disabled": {
+    "value": "#ffffff66"
+  },
+  "border-toolbar-onselected": {
+    "value": "#ffffff"
+  },
+  "border-toolbar-selected": {
+    "value": "#0d99ff"
+  },
+  "border-toolbar-selected-strong": {
+    "value": "#80caff"
+  },
+  "border-toolbar-strong": {
+    "value": "#ffffff"
+  },
+  "border-tooltip": {
+    "value": "#383838"
+  },
+  "border-tooltip-disabled": {
+    "value": "#383838"
+  },
+  "border-tooltip-disabled-strong": {
+    "value": "#383838"
+  },
+  "border-tooltip-onselected": {
+    "value": "#007be5"
+  },
+  "border-tooltip-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "border-tooltip-selected": {
+    "value": "#0d99ff"
+  },
+  "border-tooltip-selected-strong": {
+    "value": "#80caff"
+  },
+  "border-tooltip-strong": {
+    "value": "#ffffff"
+  },
+  "border-warning": {
+    "value": "#ffe8a3"
+  },
+  "border-warning-strong": {
+    "value": "#b86200"
+  },
+  "bordertranslucent": {
+    "value": "#0000001a"
+  },
+  "conditionalborder": {
+    "value": "#ffffff00"
+  },
+  "icon": {
+    "value": "#000000e5",
+    "description": "Our default icon color"
+  },
+  "icon-assistive": {
+    "value": "#ea10ac",
+    "description": "Pink icons used when Figma is assisting you in some way."
+  },
+  "icon-assistive-pressed": {
+    "value": "#cb0b96"
+  },
+  "icon-assistive-secondary": {
+    "value": "#ea10ac"
+  },
+  "icon-assistive-tertiary": {
+    "value": "#ea10ac"
+  },
+  "icon-brand": {
+    "value": "#007be5",
+    "description": "An icon tinted to match the accent color of the current product."
+  },
+  "icon-brand-pressed": {
+    "value": "#0768cf"
+  },
+  "icon-brand-secondary": {
+    "value": "#80caff"
+  },
+  "icon-brand-tertiary": {
+    "value": "#bde3ff"
+  },
+  "icon-component": {
+    "value": "#8638e5"
+  },
+  "icon-component-pressed": {
+    "value": "#7c2bda"
+  },
+  "icon-component-secondary": {
+    "value": "#c5b2dc"
+  },
+  "icon-component-tertiary": {
+    "value": "#c5b2dc"
+  },
+  "icon-danger": {
+    "value": "#f24822",
+    "description": "Red icons used to alert users about an error."
+  },
+  "icon-danger-hover": {
+    "value": "#bd2915"
+  },
+  "icon-danger-pressed": {
+    "value": "#bd2915"
+  },
+  "icon-danger-secondary": {
+    "value": "#f24822"
+  },
+  "icon-danger-secondary-hover": {
+    "value": "#f24822"
+  },
+  "icon-danger-tertiary": {
+    "value": "#f24822"
+  },
+  "icon-design": {
+    "value": "#007be5"
+  },
+  "icon-design-pressed": {
+    "value": "#0768cf"
+  },
+  "icon-design-secondary": {
+    "value": "#007be5"
+  },
+  "icon-design-tertiary": {
+    "value": "#007be5"
+  },
+  "icon-disabled": {
+    "value": "#0000004d"
+  },
+  "icon-figjam": {
+    "value": "#8638e5"
+  },
+  "icon-figjam-pressed": {
+    "value": "#7c2bda"
+  },
+  "icon-figjam-secondary": {
+    "value": "#c5b2dc"
+  },
+  "icon-figjam-tertiary": {
+    "value": "#c5b2dc"
+  },
+  "icon-handoff": {
+    "value": "#009951"
+  },
+  "icon-handoff-pressed": {
+    "value": "#008043"
+  },
+  "icon-handoff-secondary": {
+    "value": "#009951"
+  },
+  "icon-handoff-tertiary": {
+    "value": "#009951"
+  },
+  "icon-hover": {
+    "value": "#000000e5"
+  },
+  "icon-measure": {
+    "value": "#f24822"
+  },
+  "icon-measure-hover": {
+    "value": "#bd2915"
+  },
+  "icon-measure-pressed": {
+    "value": "#bd2915"
+  },
+  "icon-measure-secondary": {
+    "value": "#f24822"
+  },
+  "icon-measure-secondary-hover": {
+    "value": "#f24822"
+  },
+  "icon-measure-tertiary": {
+    "value": "#f24822"
+  },
+  "icon-menu": {
+    "value": "#ffffff"
+  },
+  "icon-menu-danger": {
+    "value": "#f24822"
+  },
+  "icon-menu-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-menu-hover": {
+    "value": "#ffffff"
+  },
+  "icon-menu-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "icon-menu-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-menu-pressed": {
+    "value": "#0d99ff"
+  },
+  "icon-menu-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-menu-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-menu-selected": {
+    "value": "#80caff"
+  },
+  "icon-menu-selected-secondary": {
+    "value": "#80caff"
+  },
+  "icon-menu-selected-tertiary": {
+    "value": "#80caff"
+  },
+  "icon-menu-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-menu-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-menu-warning": {
+    "value": "#ffcd29"
+  },
+  "icon-onassistive": {
+    "value": "#ffffff"
+  },
+  "icon-onassistive-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onassistive-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onbrand": {
+    "value": "#ffffff",
+    "description": "Icons against a “background with a fill color” (for example, a blue / purple background in our “Share” button)"
+  },
+  "icon-onbrand-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onbrand-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-oncomponent": {
+    "value": "#ffffff"
+  },
+  "icon-oncomponent-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-oncomponent-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-ondanger": {
+    "value": "#ffffff"
+  },
+  "icon-ondanger-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-ondanger-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-ondesign": {
+    "value": "#ffffff"
+  },
+  "icon-ondesign-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-ondesign-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-ondisabled": {
+    "value": "#ffffff"
+  },
+  "icon-onfigjam": {
+    "value": "#ffffff"
+  },
+  "icon-onfigjam-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onfigjam-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-oninverse": {
+    "value": "#ffffffe5"
+  },
+  "icon-onmeasure": {
+    "value": "#ffffff"
+  },
+  "icon-onmeasure-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onmeasure-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onselected": {
+    "value": "#000000e5"
+  },
+  "icon-onselected-secondary": {
+    "value": "#00000080"
+  },
+  "icon-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "icon-onselected-tertiary": {
+    "value": "#0000004d"
+  },
+  "icon-onsuccess": {
+    "value": "#ffffff"
+  },
+  "icon-onsuccess-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onsuccess-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onwarning": {
+    "value": "#000000e5"
+  },
+  "icon-onwarning-secondary": {
+    "value": "#00000080"
+  },
+  "icon-onwarning-tertiary": {
+    "value": "#0000004d"
+  },
+  "icon-pressed": {
+    "value": "#007be5"
+  },
+  "icon-secondary": {
+    "value": "#00000080",
+    "description": "Our secondary icon color for inactive elements that need to be “lighter” in order to create hierarchy."
+  },
+  "icon-secondary-hover": {
+    "value": "#000000e5"
+  },
+  "icon-selected": {
+    "value": "#007be5"
+  },
+  "icon-selected-secondary": {
+    "value": "#007be5"
+  },
+  "icon-selected-tertiary": {
+    "value": "#007be5"
+  },
+  "icon-success": {
+    "value": "#14ae5c",
+    "description": "Green icons used for confirmation, and approval."
+  },
+  "icon-success-pressed": {
+    "value": "#008043"
+  },
+  "icon-success-secondary": {
+    "value": "#14ae5c"
+  },
+  "icon-success-tertiary": {
+    "value": "#14ae5c"
+  },
+  "icon-tertiary": {
+    "value": "#0000004d",
+    "description": "Our tertiary icon color primarily used for carets"
+  },
+  "icon-tertiary-hover": {
+    "value": "#000000e5"
+  },
+  "icon-toolbar": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-danger": {
+    "value": "#f24822"
+  },
+  "icon-toolbar-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-toolbar-hover": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-ondisabled": {
+    "value": "#2c2c2c"
+  },
+  "icon-toolbar-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-pressed": {
+    "value": "#0d99ff"
+  },
+  "icon-toolbar-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-toolbar-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-selected": {
+    "value": "#80caff"
+  },
+  "icon-toolbar-selected-secondary": {
+    "value": "#80caff"
+  },
+  "icon-toolbar-selected-tertiary": {
+    "value": "#80caff"
+  },
+  "icon-toolbar-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-toolbar-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-warning": {
+    "value": "#ffcd29"
+  },
+  "icon-tooltip": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-danger": {
+    "value": "#f24822"
+  },
+  "icon-tooltip-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-tooltip-hover": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "icon-tooltip-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-pressed": {
+    "value": "#0d99ff"
+  },
+  "icon-tooltip-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-tooltip-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-selected": {
+    "value": "#80caff"
+  },
+  "icon-tooltip-selected-secondary": {
+    "value": "#80caff"
+  },
+  "icon-tooltip-selected-tertiary": {
+    "value": "#80caff"
+  },
+  "icon-tooltip-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-tooltip-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-warning": {
+    "value": "#ffcd29"
+  },
+  "icon-warning": {
+    "value": "#ffcd29",
+    "description": "Yellow icons used to warn users about a potential problem."
+  },
+  "icon-warning-pressed": {
+    "value": "#b86200"
+  },
+  "icon-warning-secondary": {
+    "value": "#ffcd29"
+  },
+  "icon-warning-tertiary": {
+    "value": "#ffcd29"
+  },
+  "icondesignfilesecondary": {
+    "value": "#80caff"
+  },
+  "iconfigjamfilesecondary": {
+    "value": "#d9b8ff"
+  },
+  "iconondarkcanvas": {
+    "value": "#ffffffe5"
+  },
+  "icononlightcanvas": {
+    "value": "#000000e5"
+  },
+  "icononvoting": {
+    "value": "#000000e5"
+  },
+  "iconprototypefile": {
+    "value": "#d9d9d9"
+  },
+  "iconprototypefilesecondary": {
+    "value": "#2c2c2c"
+  },
+  "iconpublishedfile": {
+    "value": "#2c2c2c"
+  },
+  "iconpublishedfilesecondary": {
+    "value": "#757575"
+  },
+  "loading": {
+    "value": "#0000001a"
+  },
+  "loadingmenu": {
+    "value": "#ffffff1a"
+  },
+  "loadingsecondary": {
+    "value": "#0000000d"
+  },
+  "loadingsecondarymenu": {
+    "value": "#ffffff0d"
+  },
+  "modalbackdrop": {
+    "value": "#00000080"
+  },
+  "multiplayerblue": {
+    "value": "#007be5"
+  },
+  "multiplayerbluehover": {
+    "value": "#0768cf"
+  },
+  "multiplayerbluesecondary": {
+    "value": "#034ac1"
+  },
+  "multiplayergreen": {
+    "value": "#14ae5c"
+  },
+  "multiplayergreenhover": {
+    "value": "#009951"
+  },
+  "multiplayergreensecondary": {
+    "value": "#036838"
+  },
+  "multiplayergrey": {
+    "value": "#667799"
+  },
+  "multiplayergreyhover": {
+    "value": "#536383"
+  },
+  "multiplayergreysecondary": {
+    "value": "#394360"
+  },
+  "multiplayerpink": {
+    "value": "#ff24bd"
+  },
+  "multiplayerpinkhover": {
+    "value": "#ea10ac"
+  },
+  "multiplayerpinksecondary": {
+    "value": "#971172"
+  },
+  "multiplayerpurple": {
+    "value": "#9747ff"
+  },
+  "multiplayerpurplehover": {
+    "value": "#8638e5"
+  },
+  "multiplayerpurplesecondary": {
+    "value": "#681abb"
+  },
+  "multiplayerred": {
+    "value": "#f24822"
+  },
+  "multiplayerredhover": {
+    "value": "#dc3412"
+  },
+  "multiplayerredsecondary": {
+    "value": "#9f1f18"
+  },
+  "multiplayeryellow": {
+    "value": "#ffcd29"
+  },
+  "multiplayeryellowhover": {
+    "value": "#ffc21a"
+  },
+  "multiplayeryellowsecondary": {
+    "value": "#eba611"
+  },
+  "nodehandle": {
+    "value": "#80caff"
+  },
+  "prototypeloadingbackdrop": {
+    "value": "#000000e5"
+  },
+  "scrollbar": {
+    "value": "#b3b3b380"
+  },
+  "shadow": {
+    "value": "#00000026"
+  },
+  "text": {
+    "value": "#000000e5",
+    "description": "Our default text color for most titles, tabs, and body text."
+  },
+  "text-assistive": {
+    "value": "#ea10ac",
+    "description": "Pink text used when Figma is assisting you in some way (ex: in auto layout)"
+  },
+  "text-assistive-pressed": {
+    "value": "#cb0b96"
+  },
+  "text-assistive-secondary": {
+    "value": "#ea10ac"
+  },
+  "text-assistive-tertiary": {
+    "value": "#ea10ac"
+  },
+  "text-brand": {
+    "value": "#007be5",
+    "description": "Text that is tinted to match the current product, typically used for things like links. For specifically referring to concepts in design, we can use color-text-design instead."
+  },
+  "text-brand-secondary": {
+    "value": "#007be5"
+  },
+  "text-brand-tertiary": {
+    "value": "#007be5"
+  },
+  "text-component": {
+    "value": "#8638e5"
+  },
+  "text-component-pressed": {
+    "value": "#7c2bda"
+  },
+  "text-component-secondary": {
+    "value": "#c5b2dc"
+  },
+  "text-component-tertiary": {
+    "value": "#c5b2dc"
+  },
+  "text-danger": {
+    "value": "#dc3412",
+    "description": "Red text used to alert users about an error."
+  },
+  "text-danger-secondary": {
+    "value": "#dc3412"
+  },
+  "text-danger-tertiary": {
+    "value": "#dc3412"
+  },
+  "text-design": {
+    "value": "#007be5"
+  },
+  "text-design-pressed": {
+    "value": "#0768cf"
+  },
+  "text-design-secondary": {
+    "value": "#007be5"
+  },
+  "text-design-tertiary": {
+    "value": "#007be5"
+  },
+  "text-disabled": {
+    "value": "#0000004d"
+  },
+  "text-figjam": {
+    "value": "#8638e5"
+  },
+  "text-figjam-pressed": {
+    "value": "#7c2bda"
+  },
+  "text-figjam-secondary": {
+    "value": "#c5b2dc"
+  },
+  "text-figjam-tertiary": {
+    "value": "#c5b2dc"
+  },
+  "text-handoff": {
+    "value": "#009951"
+  },
+  "text-handoff-secondary": {
+    "value": "#009951"
+  },
+  "text-handoff-tertiary": {
+    "value": "#009951"
+  },
+  "text-hover": {
+    "value": "#000000e5"
+  },
+  "text-measure": {
+    "value": "#dc3412"
+  },
+  "text-measure-secondary": {
+    "value": "#dc3412"
+  },
+  "text-measure-tertiary": {
+    "value": "#dc3412"
+  },
+  "text-menu": {
+    "value": "#ffffff"
+  },
+  "text-menu-danger": {
+    "value": "#f24822"
+  },
+  "text-menu-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-menu-hover": {
+    "value": "#ffffff"
+  },
+  "text-menu-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "text-menu-onselected": {
+    "value": "#ffffff"
+  },
+  "text-menu-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-menu-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-menu-selected": {
+    "value": "#80caff"
+  },
+  "text-menu-selected-secondary": {
+    "value": "#80caff"
+  },
+  "text-menu-selected-tertiary": {
+    "value": "#80caff"
+  },
+  "text-menu-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-menu-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-menu-warning": {
+    "value": "#ffd966"
+  },
+  "text-onassistive": {
+    "value": "#ffffff"
+  },
+  "text-onassistive-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onassistive-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onbrand": {
+    "value": "#ffffff",
+    "description": "Used for text against a “background with a fill color” (for example, a blue / purple background in our “Share” button)"
+  },
+  "text-onbrand-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onbrand-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-oncomponent": {
+    "value": "#ffffff"
+  },
+  "text-oncomponent-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-oncomponent-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-ondanger": {
+    "value": "#ffffff"
+  },
+  "text-ondanger-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-ondanger-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-ondesign": {
+    "value": "#ffffff"
+  },
+  "text-ondesign-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-ondesign-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-ondisabled": {
+    "value": "#ffffff"
+  },
+  "text-onfigjam": {
+    "value": "#ffffff"
+  },
+  "text-onfigjam-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onfigjam-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-oninverse": {
+    "value": "#ffffffe5"
+  },
+  "text-onmeasure": {
+    "value": "#ffffff"
+  },
+  "text-onmeasure-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onmeasure-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onselected": {
+    "value": "#000000e5"
+  },
+  "text-onselected-secondary": {
+    "value": "#00000080"
+  },
+  "text-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "text-onselected-tertiary": {
+    "value": "#0000004d"
+  },
+  "text-onsuccess": {
+    "value": "#ffffff"
+  },
+  "text-onsuccess-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onsuccess-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onwarning": {
+    "value": "#000000e5"
+  },
+  "text-onwarning-secondary": {
+    "value": "#00000080"
+  },
+  "text-onwarning-tertiary": {
+    "value": "#0000004d"
+  },
+  "text-secondary": {
+    "value": "#00000080",
+    "description": "Our secondary text color for inactive tabs, labels, timestamps, and other text that needs to be “lighter” in order to create hierarchy."
+  },
+  "text-secondary-hover": {
+    "value": "#000000e5"
+  },
+  "text-selected": {
+    "value": "#007be5"
+  },
+  "text-selected-secondary": {
+    "value": "#007be5"
+  },
+  "text-selected-tertiary": {
+    "value": "#007be5"
+  },
+  "text-success": {
+    "value": "#009951"
+  },
+  "text-success-secondary": {
+    "value": "#009951"
+  },
+  "text-success-tertiary": {
+    "value": "#009951"
+  },
+  "text-tertiary": {
+    "value": "#0000004d",
+    "description": "Primarily used for placeholder text (for example in a search input), or for hierarchy below secondary text. Note that text at this level is below our color contrast threshold, and may not be readable to all users."
+  },
+  "text-tertiary-hover": {
+    "value": "#000000e5"
+  },
+  "text-toolbar": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-danger": {
+    "value": "#ffafa3"
+  },
+  "text-toolbar-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-toolbar-hover": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-ondisabled": {
+    "value": "#2c2c2c"
+  },
+  "text-toolbar-onselected": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-toolbar-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-selected": {
+    "value": "#80caff"
+  },
+  "text-toolbar-selected-secondary": {
+    "value": "#80caff"
+  },
+  "text-toolbar-selected-tertiary": {
+    "value": "#80caff"
+  },
+  "text-toolbar-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-toolbar-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-warning": {
+    "value": "#ffd966"
+  },
+  "text-tooltip": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-danger": {
+    "value": "#ffafa3"
+  },
+  "text-tooltip-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-tooltip-hover": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "text-tooltip-onselected": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-tooltip-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-selected": {
+    "value": "#80caff"
+  },
+  "text-tooltip-selected-secondary": {
+    "value": "#80caff"
+  },
+  "text-tooltip-selected-tertiary": {
+    "value": "#80caff"
+  },
+  "text-tooltip-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-tooltip-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-warning": {
+    "value": "#ffd966"
+  },
+  "text-warning": {
+    "value": "#b86200",
+    "description": "Yellow text used to warn users about a potential problem."
+  },
+  "text-warning-secondary": {
+    "value": "#b86200"
+  },
+  "text-warning-tertiary": {
+    "value": "#b86200"
+  },
+  "texthighlight": {
+    "value": "#0d99ff66"
+  },
+  "textondarkcanvas": {
+    "value": "#ffffffe5"
+  },
+  "textondarkcanvassecondary": {
+    "value": "#ffffffb2"
+  },
+  "textonlightcanvas": {
+    "value": "#000000e5"
+  },
+  "textonlightcanvassecondary": {
+    "value": "#0000004d"
+  },
+  "textonmultiplayerblue": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayergreen": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayergrey": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayerpink": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayerpurple": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayerred": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayeryellow": {
+    "value": "#000000e5"
+  },
+  "textonvoting": {
+    "value": "#000000e5"
+  }
+}
diff --git a/packages/theme/tokens/colors/slides-dark.json b/packages/theme/tokens/colors/slides-dark.json
new file mode 100644
index 0000000..6a65b10
--- /dev/null
+++ b/packages/theme/tokens/colors/slides-dark.json
@@ -0,0 +1,1506 @@
+{
+  "bg": {
+    "value": "#2c2c2c",
+    "description": "Our default background color"
+  },
+  "bg-assistive": {
+    "value": "#f316b0"
+  },
+  "bg-assistive-hover": {
+    "value": "#d01b9c"
+  },
+  "bg-assistive-pressed": {
+    "value": "#d01b9c"
+  },
+  "bg-assistive-secondary": {
+    "value": "#96207a"
+  },
+  "bg-assistive-tertiary": {
+    "value": "#68275e"
+  },
+  "bg-brand": {
+    "value": "#f65009",
+    "description": "A fill tinted to match the accent color of the current product."
+  },
+  "bg-brand-hover": {
+    "value": "#db4606"
+  },
+  "bg-brand-pressed": {
+    "value": "#db4606"
+  },
+  "bg-brand-secondary": {
+    "value": "#b93f13"
+  },
+  "bg-brand-tertiary": {
+    "value": "#603a2a"
+  },
+  "bg-component": {
+    "value": "#8a38f5"
+  },
+  "bg-component-hover": {
+    "value": "#7a2ed6"
+  },
+  "bg-component-pressed": {
+    "value": "#7a2ed6"
+  },
+  "bg-component-secondary": {
+    "value": "#652ca8"
+  },
+  "bg-component-tertiary": {
+    "value": "#473956"
+  },
+  "bg-danger": {
+    "value": "#e03e1a",
+    "description": "Red fill color behind destructive buttons, and error banners."
+  },
+  "bg-danger-hover": {
+    "value": "#c4381c"
+  },
+  "bg-danger-pressed": {
+    "value": "#c4381c"
+  },
+  "bg-danger-secondary": {
+    "value": "#963323"
+  },
+  "bg-danger-tertiary": {
+    "value": "#60332a"
+  },
+  "bg-design": {
+    "value": "#0c8ce9"
+  },
+  "bg-design-hover": {
+    "value": "#0a6dc2"
+  },
+  "bg-design-pressed": {
+    "value": "#0a6dc2"
+  },
+  "bg-design-secondary": {
+    "value": "#105cad"
+  },
+  "bg-design-tertiary": {
+    "value": "#394360"
+  },
+  "bg-disabled": {
+    "value": "#757575"
+  },
+  "bg-disabled-secondary": {
+    "value": "#b3b3b3"
+  },
+  "bg-figjam": {
+    "value": "#8a38f5",
+    "description": "Purple fill color used for backgrounds like a button that opens in FigJam."
+  },
+  "bg-figjam-hover": {
+    "value": "#7a2ed6"
+  },
+  "bg-figjam-pressed": {
+    "value": "#7a2ed6"
+  },
+  "bg-figjam-secondary": {
+    "value": "#652ca8"
+  },
+  "bg-figjam-tertiary": {
+    "value": "#473956"
+  },
+  "bg-handoff": {
+    "value": "#198f51",
+    "description": "Green fill color used for backgrounds like a button that opens in Dev Mode."
+  },
+  "bg-handoff-hover": {
+    "value": "#078348"
+  },
+  "bg-handoff-pressed": {
+    "value": "#078348"
+  },
+  "bg-handoff-secondary": {
+    "value": "#0a5c35"
+  },
+  "bg-handoff-tertiary": {
+    "value": "#476656"
+  },
+  "bg-hover": {
+    "value": "#383838",
+    "description": "A light grey hover fill color behind icons, and selectable elements."
+  },
+  "bg-info": {
+    "value": "#603a2a"
+  },
+  "bg-inverse": {
+    "value": "#ffffff"
+  },
+  "bg-measure": {
+    "value": "#e03e1a"
+  },
+  "bg-measure-hover": {
+    "value": "#c4381c"
+  },
+  "bg-measure-pressed": {
+    "value": "#c4381c"
+  },
+  "bg-measure-secondary": {
+    "value": "#963323"
+  },
+  "bg-measure-tertiary": {
+    "value": "#60332a"
+  },
+  "bg-menu": {
+    "value": "#1e1e1e",
+    "description": "The dark fill color of our menus "
+  },
+  "bg-menu-disabled": {
+    "value": "#757575"
+  },
+  "bg-menu-hover": {
+    "value": "#2c2c2c"
+  },
+  "bg-menu-pressed": {
+    "value": "#2c2c2c"
+  },
+  "bg-menu-secondary": {
+    "value": "#383838"
+  },
+  "bg-menu-selected": {
+    "value": "#f65009"
+  },
+  "bg-menu-selected-hover": {
+    "value": "#db4606"
+  },
+  "bg-menu-selected-pressed": {
+    "value": "#db4606"
+  },
+  "bg-menu-selected-secondary": {
+    "value": "#603a2a"
+  },
+  "bg-menu-selected-tertiary": {
+    "value": "#603a2a"
+  },
+  "bg-menu-tertiary": {
+    "value": "#444444"
+  },
+  "bg-onselected": {
+    "value": "#d4693b"
+  },
+  "bg-onselected-hover": {
+    "value": "#d4693b"
+  },
+  "bg-onselected-pressed": {
+    "value": "#d4693b"
+  },
+  "bg-pressed": {
+    "value": "#383838"
+  },
+  "bg-secondary": {
+    "value": "#383838",
+    "description": "Our secondary background color for most containers."
+  },
+  "bg-selected": {
+    "value": "#864e37",
+    "description": "A lightly tinted selected fill color for selected elements."
+  },
+  "bg-selected-hover": {
+    "value": "#a55e40"
+  },
+  "bg-selected-pressed": {
+    "value": "#a55e40"
+  },
+  "bg-selected-secondary": {
+    "value": "#603a2a"
+  },
+  "bg-selected-strong": {
+    "value": "#f65009"
+  },
+  "bg-selected-tertiary": {
+    "value": "#603a2a"
+  },
+  "bg-success": {
+    "value": "#198f51"
+  },
+  "bg-success-hover": {
+    "value": "#078348"
+  },
+  "bg-success-pressed": {
+    "value": "#078348"
+  },
+  "bg-success-secondary": {
+    "value": "#0a5c35"
+  },
+  "bg-success-tertiary": {
+    "value": "#476656"
+  },
+  "bg-tertiary": {
+    "value": "#444444"
+  },
+  "bg-toolbar": {
+    "value": "#2c2c2c",
+    "description": "The dark fill color of our UI2 editor toolbar"
+  },
+  "bg-toolbar-disabled": {
+    "value": "#757575"
+  },
+  "bg-toolbar-hover": {
+    "value": "#111111"
+  },
+  "bg-toolbar-pressed": {
+    "value": "#111111"
+  },
+  "bg-toolbar-secondary": {
+    "value": "#383838"
+  },
+  "bg-toolbar-selected": {
+    "value": "#f65009"
+  },
+  "bg-toolbar-selected-hover": {
+    "value": "#db4606"
+  },
+  "bg-toolbar-selected-pressed": {
+    "value": "#db4606"
+  },
+  "bg-toolbar-selected-secondary": {
+    "value": "#b93f13"
+  },
+  "bg-toolbar-selected-tertiary": {
+    "value": "#f65009"
+  },
+  "bg-toolbar-tertiary": {
+    "value": "#444444"
+  },
+  "bg-tooltip": {
+    "value": "#1e1e1e"
+  },
+  "bg-tooltip-disabled": {
+    "value": "#757575"
+  },
+  "bg-tooltip-hover": {
+    "value": "#2c2c2c"
+  },
+  "bg-tooltip-pressed": {
+    "value": "#2c2c2c"
+  },
+  "bg-tooltip-secondary": {
+    "value": "#383838"
+  },
+  "bg-tooltip-selected": {
+    "value": "#f65009"
+  },
+  "bg-tooltip-selected-hover": {
+    "value": "#db4606"
+  },
+  "bg-tooltip-selected-pressed": {
+    "value": "#db4606"
+  },
+  "bg-tooltip-selected-secondary": {
+    "value": "#603a2a"
+  },
+  "bg-tooltip-selected-tertiary": {
+    "value": "#603a2a"
+  },
+  "bg-tooltip-tertiary": {
+    "value": "#444444"
+  },
+  "bg-warning": {
+    "value": "#f3c11b",
+    "description": "Yellow fill color for warning banners"
+  },
+  "bg-warning-hover": {
+    "value": "#f2b50d"
+  },
+  "bg-warning-pressed": {
+    "value": "#f2b50d"
+  },
+  "bg-warning-secondary": {
+    "value": "#e4a711"
+  },
+  "bg-warning-tertiary": {
+    "value": "#5c4100"
+  },
+  "bghoverondarkcanvas": {
+    "value": "#ffffff33"
+  },
+  "bghoveronlightcanvas": {
+    "value": "#00000033"
+  },
+  "bghovertransparent": {
+    "value": "#ffffff0d"
+  },
+  "bgsecondaryoncanvas": {
+    "value": "#111111"
+  },
+  "bgselectedarea": {
+    "value": "#ff5c1633"
+  },
+  "bgtransparent": {
+    "value": "#00000099"
+  },
+  "bgtransparent-secondary-hover": {
+    "value": "#ffffff1a"
+  },
+  "bgtransparent-secondary-pressed": {
+    "value": "#ffffff26"
+  },
+  "bgtransparentsecondary": {
+    "value": "#ffffff26"
+  },
+  "bgvoting": {
+    "value": "#f3c11b"
+  },
+  "bgvotingsecondary": {
+    "value": "#fbe8ad"
+  },
+  "bgvotingtertiary": {
+    "value": "#fdf7dd"
+  },
+  "bgvotingwheeldial": {
+    "value": "#fdf7dd"
+  },
+  "bgvotingwheelhover": {
+    "value": "#fbe8ad"
+  },
+  "border": {
+    "value": "#444444",
+    "description": "Our default border color used as a divider between sections, or around inputs."
+  },
+  "border-assistive": {
+    "value": "#96207a"
+  },
+  "border-assistive-strong": {
+    "value": "#fc9ce0"
+  },
+  "border-brand": {
+    "value": "#b93f13"
+  },
+  "border-brand-strong": {
+    "value": "#ffa27a"
+  },
+  "border-component": {
+    "value": "#652ca8"
+  },
+  "border-component-hover": {
+    "value": "#8a38f5"
+  },
+  "border-component-strong": {
+    "value": "#d6b6fb"
+  },
+  "border-danger": {
+    "value": "#963323"
+  },
+  "border-danger-strong": {
+    "value": "#fca397"
+  },
+  "border-design": {
+    "value": "#105cad"
+  },
+  "border-design-strong": {
+    "value": "#7cc4f8"
+  },
+  "border-disabled": {
+    "value": "#444444"
+  },
+  "border-disabled-strong": {
+    "value": "#ffffff66"
+  },
+  "border-figjam": {
+    "value": "#652ca8"
+  },
+  "border-figjam-strong": {
+    "value": "#d1a8ff"
+  },
+  "border-handoff": {
+    "value": "#0a5c35"
+  },
+  "border-handoff-strong": {
+    "value": "#79d297"
+  },
+  "border-measure": {
+    "value": "#963323"
+  },
+  "border-measure-strong": {
+    "value": "#fca397"
+  },
+  "border-menu": {
+    "value": "#383838",
+    "description": "Used for borders or dividers within a menu element."
+  },
+  "border-menu-disabled": {
+    "value": "#383838"
+  },
+  "border-menu-disabled-strong": {
+    "value": "#383838"
+  },
+  "border-menu-onselected": {
+    "value": "#ffa27a"
+  },
+  "border-menu-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "border-menu-selected": {
+    "value": "#f65009"
+  },
+  "border-menu-selected-strong": {
+    "value": "#ffa27a"
+  },
+  "border-menu-strong": {
+    "value": "#ffffff"
+  },
+  "border-onassistive": {
+    "value": "#d01b9c"
+  },
+  "border-onassistive-strong": {
+    "value": "#ffffff"
+  },
+  "border-onbrand": {
+    "value": "#db4606"
+  },
+  "border-onbrand-strong": {
+    "value": "#ffffff",
+    "description": "Used for borders against a bg-brand background"
+  },
+  "border-oncomponent": {
+    "value": "#7a2ed6"
+  },
+  "border-oncomponent-strong": {
+    "value": "#ffffff"
+  },
+  "border-ondanger": {
+    "value": "#c4381c"
+  },
+  "border-ondanger-strong": {
+    "value": "#ffffff"
+  },
+  "border-ondesign": {
+    "value": "#0a6dc2"
+  },
+  "border-ondesign-strong": {
+    "value": "#ffffff"
+  },
+  "border-onfigjam": {
+    "value": "#7a2ed6"
+  },
+  "border-onfigjam-strong": {
+    "value": "#7a2ed6"
+  },
+  "border-onmeasure": {
+    "value": "#c4381c"
+  },
+  "border-onmeasure-strong": {
+    "value": "#ffffff"
+  },
+  "border-onselected": {
+    "value": "#d4693b"
+  },
+  "border-onselected-strong": {
+    "value": "#ffffffe5"
+  },
+  "border-onsuccess": {
+    "value": "#078348"
+  },
+  "border-onsuccess-strong": {
+    "value": "#ffffff"
+  },
+  "border-onwarning": {
+    "value": "#e4a711"
+  },
+  "border-onwarning-strong": {
+    "value": "#000000e5"
+  },
+  "border-selected": {
+    "value": "#f65009",
+    "description": "Default selection border color we use for focused / selected inputs."
+  },
+  "border-selected-strong": {
+    "value": "#ffa27a",
+    "description": "When presenting a selected border against an already selected background, we sometimes need to increase the prominence of the selected border."
+  },
+  "border-strong": {
+    "value": "#ffffffe5",
+    "description": "A much darker border color that we can use for emphasis around some UI elements."
+  },
+  "border-success": {
+    "value": "#0a5c35"
+  },
+  "border-success-strong": {
+    "value": "#79d297"
+  },
+  "border-toolbar": {
+    "value": "#444444"
+  },
+  "border-toolbar-disabled": {
+    "value": "#ffffff66"
+  },
+  "border-toolbar-onselected": {
+    "value": "#ffffff"
+  },
+  "border-toolbar-selected": {
+    "value": "#f65009"
+  },
+  "border-toolbar-selected-strong": {
+    "value": "#ffa27a"
+  },
+  "border-toolbar-strong": {
+    "value": "#ffffff"
+  },
+  "border-tooltip": {
+    "value": "#383838"
+  },
+  "border-tooltip-disabled": {
+    "value": "#383838"
+  },
+  "border-tooltip-disabled-strong": {
+    "value": "#383838"
+  },
+  "border-tooltip-onselected": {
+    "value": "#db4606"
+  },
+  "border-tooltip-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "border-tooltip-selected": {
+    "value": "#f65009"
+  },
+  "border-tooltip-selected-strong": {
+    "value": "#ffa27a"
+  },
+  "border-tooltip-strong": {
+    "value": "#ffffff"
+  },
+  "border-warning": {
+    "value": "#925711"
+  },
+  "border-warning-strong": {
+    "value": "#f7d15f"
+  },
+  "bordertranslucent": {
+    "value": "#ffffff1a"
+  },
+  "conditionalborder": {
+    "value": "#444444"
+  },
+  "icon": {
+    "value": "#ffffff",
+    "description": "Our default icon color"
+  },
+  "icon-assistive": {
+    "value": "#fc9ce0",
+    "description": "Pink icons used when Figma is assisting you in some way."
+  },
+  "icon-assistive-pressed": {
+    "value": "#fbb1ed"
+  },
+  "icon-assistive-secondary": {
+    "value": "#fc9ce0"
+  },
+  "icon-assistive-tertiary": {
+    "value": "#fc9ce0"
+  },
+  "icon-brand": {
+    "value": "#ffa27a",
+    "description": "An icon tinted to match the accent color of the current product."
+  },
+  "icon-brand-pressed": {
+    "value": "#f65009"
+  },
+  "icon-brand-secondary": {
+    "value": "#db4606"
+  },
+  "icon-brand-tertiary": {
+    "value": "#603a2a"
+  },
+  "icon-component": {
+    "value": "#d1a8ff"
+  },
+  "icon-component-pressed": {
+    "value": "#d6b6fb"
+  },
+  "icon-component-secondary": {
+    "value": "#7f699b"
+  },
+  "icon-component-tertiary": {
+    "value": "#7f699b"
+  },
+  "icon-danger": {
+    "value": "#e03e1a",
+    "description": "Red icons used to alert users about an error."
+  },
+  "icon-danger-hover": {
+    "value": "#fbbcb6"
+  },
+  "icon-danger-pressed": {
+    "value": "#fbbcb6"
+  },
+  "icon-danger-secondary": {
+    "value": "#e03e1a"
+  },
+  "icon-danger-secondary-hover": {
+    "value": "#e03e1a"
+  },
+  "icon-danger-tertiary": {
+    "value": "#e03e1a"
+  },
+  "icon-design": {
+    "value": "#7cc4f8"
+  },
+  "icon-design-pressed": {
+    "value": "#a8d7fa"
+  },
+  "icon-design-secondary": {
+    "value": "#7cc4f8"
+  },
+  "icon-design-tertiary": {
+    "value": "#7cc4f8"
+  },
+  "icon-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-figjam": {
+    "value": "#d1a8ff"
+  },
+  "icon-figjam-pressed": {
+    "value": "#d6b6fb"
+  },
+  "icon-figjam-secondary": {
+    "value": "#7f699b"
+  },
+  "icon-figjam-tertiary": {
+    "value": "#7f699b"
+  },
+  "icon-handoff": {
+    "value": "#79d297"
+  },
+  "icon-handoff-pressed": {
+    "value": "#a1e8b9"
+  },
+  "icon-handoff-secondary": {
+    "value": "#79d297"
+  },
+  "icon-handoff-tertiary": {
+    "value": "#79d297"
+  },
+  "icon-hover": {
+    "value": "#ffffff"
+  },
+  "icon-measure": {
+    "value": "#e03e1a"
+  },
+  "icon-measure-hover": {
+    "value": "#fbbcb6"
+  },
+  "icon-measure-pressed": {
+    "value": "#fbbcb6"
+  },
+  "icon-measure-secondary": {
+    "value": "#e03e1a"
+  },
+  "icon-measure-secondary-hover": {
+    "value": "#e03e1a"
+  },
+  "icon-measure-tertiary": {
+    "value": "#e03e1a"
+  },
+  "icon-menu": {
+    "value": "#ffffff"
+  },
+  "icon-menu-danger": {
+    "value": "#e03e1a"
+  },
+  "icon-menu-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-menu-hover": {
+    "value": "#ffffff"
+  },
+  "icon-menu-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "icon-menu-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-menu-pressed": {
+    "value": "#f65009"
+  },
+  "icon-menu-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-menu-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-menu-selected": {
+    "value": "#ffa27a"
+  },
+  "icon-menu-selected-secondary": {
+    "value": "#ffa27a"
+  },
+  "icon-menu-selected-tertiary": {
+    "value": "#ffa27a"
+  },
+  "icon-menu-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-menu-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-menu-warning": {
+    "value": "#f3c11b"
+  },
+  "icon-onassistive": {
+    "value": "#ffffff"
+  },
+  "icon-onassistive-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onassistive-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onbrand": {
+    "value": "#ffffff",
+    "description": "Icons against a “background with a fill color” (for example, a blue / purple background in our “Share” button)"
+  },
+  "icon-onbrand-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onbrand-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-oncomponent": {
+    "value": "#ffffff"
+  },
+  "icon-oncomponent-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-oncomponent-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-ondanger": {
+    "value": "#ffffff"
+  },
+  "icon-ondanger-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-ondanger-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-ondesign": {
+    "value": "#ffffff"
+  },
+  "icon-ondesign-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-ondesign-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-ondisabled": {
+    "value": "#2c2c2c"
+  },
+  "icon-onfigjam": {
+    "value": "#ffffff"
+  },
+  "icon-onfigjam-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onfigjam-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-oninverse": {
+    "value": "#000000e5"
+  },
+  "icon-onmeasure": {
+    "value": "#ffffff"
+  },
+  "icon-onmeasure-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onmeasure-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-onselected-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "icon-onselected-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onsuccess": {
+    "value": "#ffffff"
+  },
+  "icon-onsuccess-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onsuccess-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onwarning": {
+    "value": "#000000e5"
+  },
+  "icon-onwarning-secondary": {
+    "value": "#00000080"
+  },
+  "icon-onwarning-tertiary": {
+    "value": "#0000004d"
+  },
+  "icon-pressed": {
+    "value": "#db4606"
+  },
+  "icon-secondary": {
+    "value": "#ffffffb2",
+    "description": "Our secondary icon color for inactive elements that need to be “lighter” in order to create hierarchy."
+  },
+  "icon-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-selected": {
+    "value": "#ffa27a"
+  },
+  "icon-selected-secondary": {
+    "value": "#ffa27a"
+  },
+  "icon-selected-tertiary": {
+    "value": "#ffa27a"
+  },
+  "icon-success": {
+    "value": "#198f51",
+    "description": "Green icons used for confirmation, and approval."
+  },
+  "icon-success-pressed": {
+    "value": "#a1e8b9"
+  },
+  "icon-success-secondary": {
+    "value": "#198f51"
+  },
+  "icon-success-tertiary": {
+    "value": "#198f51"
+  },
+  "icon-tertiary": {
+    "value": "#ffffff66",
+    "description": "Our tertiary icon color primarily used for carets"
+  },
+  "icon-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-danger": {
+    "value": "#e03e1a"
+  },
+  "icon-toolbar-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-toolbar-hover": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-ondisabled": {
+    "value": "#2c2c2c"
+  },
+  "icon-toolbar-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-pressed": {
+    "value": "#f65009"
+  },
+  "icon-toolbar-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-toolbar-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-selected": {
+    "value": "#ffa27a"
+  },
+  "icon-toolbar-selected-secondary": {
+    "value": "#ffa27a"
+  },
+  "icon-toolbar-selected-tertiary": {
+    "value": "#ffa27a"
+  },
+  "icon-toolbar-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-toolbar-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-warning": {
+    "value": "#f3c11b"
+  },
+  "icon-tooltip": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-danger": {
+    "value": "#e03e1a"
+  },
+  "icon-tooltip-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-tooltip-hover": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "icon-tooltip-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-pressed": {
+    "value": "#f65009"
+  },
+  "icon-tooltip-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-tooltip-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-selected": {
+    "value": "#ffa27a"
+  },
+  "icon-tooltip-selected-secondary": {
+    "value": "#ffa27a"
+  },
+  "icon-tooltip-selected-tertiary": {
+    "value": "#ffa27a"
+  },
+  "icon-tooltip-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-tooltip-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-warning": {
+    "value": "#f3c11b"
+  },
+  "icon-warning": {
+    "value": "#f3c11b",
+    "description": "Yellow icons used to warn users about a potential problem."
+  },
+  "icon-warning-pressed": {
+    "value": "#f7d15f"
+  },
+  "icon-warning-secondary": {
+    "value": "#f3c11b"
+  },
+  "icon-warning-tertiary": {
+    "value": "#f3c11b"
+  },
+  "icondesignfilesecondary": {
+    "value": "#7cc4f8"
+  },
+  "iconfigjamfilesecondary": {
+    "value": "#d1a8ff"
+  },
+  "iconondarkcanvas": {
+    "value": "#ffffffe5"
+  },
+  "icononlightcanvas": {
+    "value": "#000000e5"
+  },
+  "icononvoting": {
+    "value": "#000000e5"
+  },
+  "iconprototypefile": {
+    "value": "#757575"
+  },
+  "iconprototypefilesecondary": {
+    "value": "#ffffff"
+  },
+  "iconpublishedfile": {
+    "value": "#757575"
+  },
+  "iconpublishedfilesecondary": {
+    "value": "#b3b3b3"
+  },
+  "loading": {
+    "value": "#ffffff1a"
+  },
+  "loadingmenu": {
+    "value": "#ffffff1a"
+  },
+  "loadingsecondary": {
+    "value": "#ffffff0d"
+  },
+  "loadingsecondarymenu": {
+    "value": "#ffffff0d"
+  },
+  "modalbackdrop": {
+    "value": "#00000080"
+  },
+  "multiplayerblue": {
+    "value": "#0a6dc2"
+  },
+  "multiplayerbluehover": {
+    "value": "#105cad"
+  },
+  "multiplayerbluesecondary": {
+    "value": "#184591"
+  },
+  "multiplayergreen": {
+    "value": "#198f51"
+  },
+  "multiplayergreenhover": {
+    "value": "#078348"
+  },
+  "multiplayergreensecondary": {
+    "value": "#0a4c2d"
+  },
+  "multiplayergrey": {
+    "value": "#667799"
+  },
+  "multiplayergreyhover": {
+    "value": "#536383"
+  },
+  "multiplayergreysecondary": {
+    "value": "#394360"
+  },
+  "multiplayerpink": {
+    "value": "#f316b0"
+  },
+  "multiplayerpinkhover": {
+    "value": "#d01b9c"
+  },
+  "multiplayerpinksecondary": {
+    "value": "#68275e"
+  },
+  "multiplayerpurple": {
+    "value": "#8a38f5"
+  },
+  "multiplayerpurplehover": {
+    "value": "#7a2ed6"
+  },
+  "multiplayerpurplesecondary": {
+    "value": "#50297a"
+  },
+  "multiplayerred": {
+    "value": "#e03e1a"
+  },
+  "multiplayerredhover": {
+    "value": "#c4381c"
+  },
+  "multiplayerredsecondary": {
+    "value": "#7c2622"
+  },
+  "multiplayeryellow": {
+    "value": "#f3c11b"
+  },
+  "multiplayeryellowhover": {
+    "value": "#f2b50d"
+  },
+  "multiplayeryellowsecondary": {
+    "value": "#c58011"
+  },
+  "nodehandle": {
+    "value": "#7cc4f8"
+  },
+  "prototypeloadingbackdrop": {
+    "value": "#000000e5"
+  },
+  "scrollbar": {
+    "value": "#b3b3b380"
+  },
+  "shadow": {
+    "value": "#00000099"
+  },
+  "text": {
+    "value": "#ffffff",
+    "description": "Our default text color for most titles, tabs, and body text."
+  },
+  "text-assistive": {
+    "value": "#fc9ce0",
+    "description": "Pink text used when Figma is assisting you in some way (ex: in auto layout)"
+  },
+  "text-assistive-pressed": {
+    "value": "#fbb1ed"
+  },
+  "text-assistive-secondary": {
+    "value": "#fc9ce0"
+  },
+  "text-assistive-tertiary": {
+    "value": "#fc9ce0"
+  },
+  "text-brand": {
+    "value": "#ffa27a",
+    "description": "Text that is tinted to match the current product, typically used for things like links. For specifically referring to concepts in design, we can use color-text-design instead."
+  },
+  "text-brand-secondary": {
+    "value": "#ffa27a"
+  },
+  "text-brand-tertiary": {
+    "value": "#ffa27a"
+  },
+  "text-component": {
+    "value": "#d1a8ff"
+  },
+  "text-component-pressed": {
+    "value": "#d6b6fb"
+  },
+  "text-component-secondary": {
+    "value": "#7f699b"
+  },
+  "text-component-tertiary": {
+    "value": "#7f699b"
+  },
+  "text-danger": {
+    "value": "#fca397",
+    "description": "Red text used to alert users about an error."
+  },
+  "text-danger-secondary": {
+    "value": "#fca397"
+  },
+  "text-danger-tertiary": {
+    "value": "#fca397"
+  },
+  "text-design": {
+    "value": "#7cc4f8"
+  },
+  "text-design-pressed": {
+    "value": "#a8d7fa"
+  },
+  "text-design-secondary": {
+    "value": "#7cc4f8"
+  },
+  "text-design-tertiary": {
+    "value": "#7cc4f8"
+  },
+  "text-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-figjam": {
+    "value": "#c5b2dc"
+  },
+  "text-figjam-pressed": {
+    "value": "#d6b6fb"
+  },
+  "text-figjam-secondary": {
+    "value": "#7f699b"
+  },
+  "text-figjam-tertiary": {
+    "value": "#7f699b"
+  },
+  "text-handoff": {
+    "value": "#79d297"
+  },
+  "text-handoff-secondary": {
+    "value": "#79d297"
+  },
+  "text-handoff-tertiary": {
+    "value": "#79d297"
+  },
+  "text-hover": {
+    "value": "#ffffff"
+  },
+  "text-measure": {
+    "value": "#fca397"
+  },
+  "text-measure-secondary": {
+    "value": "#fca397"
+  },
+  "text-measure-tertiary": {
+    "value": "#fca397"
+  },
+  "text-menu": {
+    "value": "#ffffff"
+  },
+  "text-menu-danger": {
+    "value": "#fca397"
+  },
+  "text-menu-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-menu-hover": {
+    "value": "#ffffff"
+  },
+  "text-menu-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "text-menu-onselected": {
+    "value": "#ffffff"
+  },
+  "text-menu-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-menu-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-menu-selected": {
+    "value": "#ffa27a"
+  },
+  "text-menu-selected-secondary": {
+    "value": "#ffa27a"
+  },
+  "text-menu-selected-tertiary": {
+    "value": "#ffa27a"
+  },
+  "text-menu-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-menu-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-menu-warning": {
+    "value": "#f7d15f"
+  },
+  "text-onassistive": {
+    "value": "#ffffff"
+  },
+  "text-onassistive-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onassistive-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onbrand": {
+    "value": "#ffffff",
+    "description": "Used for text against a “background with a fill color” (for example, a blue / purple background in our “Share” button)"
+  },
+  "text-onbrand-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onbrand-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-oncomponent": {
+    "value": "#ffffff"
+  },
+  "text-oncomponent-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-oncomponent-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-ondanger": {
+    "value": "#ffffff"
+  },
+  "text-ondanger-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-ondanger-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-ondesign": {
+    "value": "#ffffff"
+  },
+  "text-ondesign-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-ondesign-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-ondisabled": {
+    "value": "#2c2c2c"
+  },
+  "text-onfigjam": {
+    "value": "#ffffff"
+  },
+  "text-onfigjam-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onfigjam-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-oninverse": {
+    "value": "#000000e5"
+  },
+  "text-onmeasure": {
+    "value": "#ffffff"
+  },
+  "text-onmeasure-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onmeasure-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onselected": {
+    "value": "#ffffffe5"
+  },
+  "text-onselected-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "text-onselected-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onsuccess": {
+    "value": "#ffffff"
+  },
+  "text-onsuccess-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onsuccess-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onwarning": {
+    "value": "#000000e5"
+  },
+  "text-onwarning-secondary": {
+    "value": "#00000080"
+  },
+  "text-onwarning-tertiary": {
+    "value": "#0000004d"
+  },
+  "text-secondary": {
+    "value": "#ffffffb2",
+    "description": "Our secondary text color for inactive tabs, labels, timestamps, and other text that needs to be “lighter” in order to create hierarchy."
+  },
+  "text-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-selected": {
+    "value": "#ffa27a"
+  },
+  "text-selected-secondary": {
+    "value": "#ffa27a"
+  },
+  "text-selected-tertiary": {
+    "value": "#ffa27a"
+  },
+  "text-success": {
+    "value": "#79d297"
+  },
+  "text-success-secondary": {
+    "value": "#79d297"
+  },
+  "text-success-tertiary": {
+    "value": "#79d297"
+  },
+  "text-tertiary": {
+    "value": "#ffffff66",
+    "description": "Primarily used for placeholder text (for example in a search input), or for hierarchy below secondary text. Note that text at this level is below our color contrast threshold, and may not be readable to all users."
+  },
+  "text-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-toolbar": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-danger": {
+    "value": "#fca397"
+  },
+  "text-toolbar-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-toolbar-hover": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-ondisabled": {
+    "value": "#2c2c2c"
+  },
+  "text-toolbar-onselected": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-toolbar-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-selected": {
+    "value": "#ffa27a"
+  },
+  "text-toolbar-selected-secondary": {
+    "value": "#ffa27a"
+  },
+  "text-toolbar-selected-tertiary": {
+    "value": "#ffa27a"
+  },
+  "text-toolbar-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-toolbar-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-warning": {
+    "value": "#f7d15f"
+  },
+  "text-tooltip": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-danger": {
+    "value": "#fca397"
+  },
+  "text-tooltip-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-tooltip-hover": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "text-tooltip-onselected": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-tooltip-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-selected": {
+    "value": "#ffa27a"
+  },
+  "text-tooltip-selected-secondary": {
+    "value": "#ffa27a"
+  },
+  "text-tooltip-selected-tertiary": {
+    "value": "#ffa27a"
+  },
+  "text-tooltip-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-tooltip-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-warning": {
+    "value": "#f7d15f"
+  },
+  "text-warning": {
+    "value": "#f7d15f",
+    "description": "Yellow text used to warn users about a potential problem."
+  },
+  "text-warning-secondary": {
+    "value": "#f7d15f"
+  },
+  "text-warning-tertiary": {
+    "value": "#f7d15f"
+  },
+  "texthighlight": {
+    "value": "#0d99ff66"
+  },
+  "textondarkcanvas": {
+    "value": "#ffffffe5"
+  },
+  "textondarkcanvassecondary": {
+    "value": "#ffffffb2"
+  },
+  "textonlightcanvas": {
+    "value": "#000000e5"
+  },
+  "textonlightcanvassecondary": {
+    "value": "#0000004d"
+  },
+  "textonmultiplayerblue": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayergreen": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayergrey": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayerpink": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayerpurple": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayerred": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayeryellow": {
+    "value": "#000000e5"
+  },
+  "textonvoting": {
+    "value": "#000000e5"
+  }
+}
diff --git a/packages/theme/tokens/colors/slides-light.json b/packages/theme/tokens/colors/slides-light.json
new file mode 100644
index 0000000..5b19f9d
--- /dev/null
+++ b/packages/theme/tokens/colors/slides-light.json
@@ -0,0 +1,1506 @@
+{
+  "bg": {
+    "value": "#ffffff",
+    "description": "Our default background color"
+  },
+  "bg-assistive": {
+    "value": "#ff24bd"
+  },
+  "bg-assistive-hover": {
+    "value": "#ea10ac"
+  },
+  "bg-assistive-pressed": {
+    "value": "#ea10ac"
+  },
+  "bg-assistive-secondary": {
+    "value": "#cb0b96"
+  },
+  "bg-assistive-tertiary": {
+    "value": "#ffe0fc"
+  },
+  "bg-brand": {
+    "value": "#ff5c16",
+    "description": "A fill tinted to match the accent color of the current product."
+  },
+  "bg-brand-hover": {
+    "value": "#e24c0c"
+  },
+  "bg-brand-pressed": {
+    "value": "#e24c0c"
+  },
+  "bg-brand-secondary": {
+    "value": "#c53e0d"
+  },
+  "bg-brand-tertiary": {
+    "value": "#ffdfcc"
+  },
+  "bg-component": {
+    "value": "#9747ff"
+  },
+  "bg-component-hover": {
+    "value": "#8638e5"
+  },
+  "bg-component-pressed": {
+    "value": "#8638e5"
+  },
+  "bg-component-secondary": {
+    "value": "#7c2bda"
+  },
+  "bg-component-tertiary": {
+    "value": "#f1e5ff"
+  },
+  "bg-danger": {
+    "value": "#f24822",
+    "description": "Red fill color behind destructive buttons, and error banners."
+  },
+  "bg-danger-hover": {
+    "value": "#dc3412"
+  },
+  "bg-danger-pressed": {
+    "value": "#dc3412"
+  },
+  "bg-danger-secondary": {
+    "value": "#bd2915"
+  },
+  "bg-danger-tertiary": {
+    "value": "#ffe2e0"
+  },
+  "bg-design": {
+    "value": "#0d99ff"
+  },
+  "bg-design-hover": {
+    "value": "#007be5"
+  },
+  "bg-design-pressed": {
+    "value": "#007be5"
+  },
+  "bg-design-secondary": {
+    "value": "#0768cf"
+  },
+  "bg-design-tertiary": {
+    "value": "#e5f4ff"
+  },
+  "bg-disabled": {
+    "value": "#d9d9d9"
+  },
+  "bg-disabled-secondary": {
+    "value": "#b3b3b3"
+  },
+  "bg-figjam": {
+    "value": "#9747ff",
+    "description": "Purple fill color used for backgrounds like a button that opens in FigJam."
+  },
+  "bg-figjam-hover": {
+    "value": "#8638e5"
+  },
+  "bg-figjam-pressed": {
+    "value": "#8638e5"
+  },
+  "bg-figjam-secondary": {
+    "value": "#7c2bda"
+  },
+  "bg-figjam-tertiary": {
+    "value": "#f1e5ff"
+  },
+  "bg-handoff": {
+    "value": "#14ae5c",
+    "description": "Green fill color used for backgrounds like a button that opens in Dev Mode."
+  },
+  "bg-handoff-hover": {
+    "value": "#009951"
+  },
+  "bg-handoff-pressed": {
+    "value": "#009951"
+  },
+  "bg-handoff-secondary": {
+    "value": "#008043"
+  },
+  "bg-handoff-tertiary": {
+    "value": "#daecdf"
+  },
+  "bg-hover": {
+    "value": "#f5f5f5",
+    "description": "A light grey hover fill color behind icons, and selectable elements."
+  },
+  "bg-info": {
+    "value": "#ffdfcc"
+  },
+  "bg-inverse": {
+    "value": "#2c2c2c"
+  },
+  "bg-measure": {
+    "value": "#f24822"
+  },
+  "bg-measure-hover": {
+    "value": "#dc3412"
+  },
+  "bg-measure-pressed": {
+    "value": "#dc3412"
+  },
+  "bg-measure-secondary": {
+    "value": "#bd2915"
+  },
+  "bg-measure-tertiary": {
+    "value": "#ffe2e0"
+  },
+  "bg-menu": {
+    "value": "#1e1e1e",
+    "description": "The dark fill color of our menus "
+  },
+  "bg-menu-disabled": {
+    "value": "#757575"
+  },
+  "bg-menu-hover": {
+    "value": "#2c2c2c"
+  },
+  "bg-menu-pressed": {
+    "value": "#2c2c2c"
+  },
+  "bg-menu-secondary": {
+    "value": "#383838"
+  },
+  "bg-menu-selected": {
+    "value": "#ff5c16"
+  },
+  "bg-menu-selected-hover": {
+    "value": "#e24c0c"
+  },
+  "bg-menu-selected-pressed": {
+    "value": "#e24c0c"
+  },
+  "bg-menu-selected-secondary": {
+    "value": "#603a2a"
+  },
+  "bg-menu-selected-tertiary": {
+    "value": "#603a2a"
+  },
+  "bg-menu-tertiary": {
+    "value": "#444444"
+  },
+  "bg-onselected": {
+    "value": "#ffbb9e"
+  },
+  "bg-onselected-hover": {
+    "value": "#ffbb9e"
+  },
+  "bg-onselected-pressed": {
+    "value": "#ffbb9e"
+  },
+  "bg-pressed": {
+    "value": "#f5f5f5"
+  },
+  "bg-secondary": {
+    "value": "#f5f5f5",
+    "description": "Our secondary background color for most containers."
+  },
+  "bg-selected": {
+    "value": "#ffdfcc",
+    "description": "A lightly tinted selected fill color for selected elements."
+  },
+  "bg-selected-hover": {
+    "value": "#ffbb9e"
+  },
+  "bg-selected-pressed": {
+    "value": "#ffbb9e"
+  },
+  "bg-selected-secondary": {
+    "value": "#fff2eb"
+  },
+  "bg-selected-strong": {
+    "value": "#ff5c16"
+  },
+  "bg-selected-tertiary": {
+    "value": "#fff2eb"
+  },
+  "bg-success": {
+    "value": "#14ae5c"
+  },
+  "bg-success-hover": {
+    "value": "#009951"
+  },
+  "bg-success-pressed": {
+    "value": "#009951"
+  },
+  "bg-success-secondary": {
+    "value": "#008043"
+  },
+  "bg-success-tertiary": {
+    "value": "#cff7d3"
+  },
+  "bg-tertiary": {
+    "value": "#e6e6e6"
+  },
+  "bg-toolbar": {
+    "value": "#2c2c2c",
+    "description": "The dark fill color of our UI2 editor toolbar"
+  },
+  "bg-toolbar-disabled": {
+    "value": "#757575"
+  },
+  "bg-toolbar-hover": {
+    "value": "#f5f5f5"
+  },
+  "bg-toolbar-pressed": {
+    "value": "#111111"
+  },
+  "bg-toolbar-secondary": {
+    "value": "#383838"
+  },
+  "bg-toolbar-selected": {
+    "value": "#ff5c16"
+  },
+  "bg-toolbar-selected-hover": {
+    "value": "#e24c0c"
+  },
+  "bg-toolbar-selected-pressed": {
+    "value": "#e24c0c"
+  },
+  "bg-toolbar-selected-secondary": {
+    "value": "#c53e0d"
+  },
+  "bg-toolbar-selected-tertiary": {
+    "value": "#ff5c16"
+  },
+  "bg-toolbar-tertiary": {
+    "value": "#444444"
+  },
+  "bg-tooltip": {
+    "value": "#1e1e1e"
+  },
+  "bg-tooltip-disabled": {
+    "value": "#757575"
+  },
+  "bg-tooltip-hover": {
+    "value": "#2c2c2c"
+  },
+  "bg-tooltip-pressed": {
+    "value": "#2c2c2c"
+  },
+  "bg-tooltip-secondary": {
+    "value": "#383838"
+  },
+  "bg-tooltip-selected": {
+    "value": "#ff5c16"
+  },
+  "bg-tooltip-selected-hover": {
+    "value": "#e24c0c"
+  },
+  "bg-tooltip-selected-pressed": {
+    "value": "#e24c0c"
+  },
+  "bg-tooltip-selected-secondary": {
+    "value": "#603a2a"
+  },
+  "bg-tooltip-selected-tertiary": {
+    "value": "#603a2a"
+  },
+  "bg-tooltip-tertiary": {
+    "value": "#444444"
+  },
+  "bg-warning": {
+    "value": "#ffcd29",
+    "description": "Yellow fill color for warning banners"
+  },
+  "bg-warning-hover": {
+    "value": "#ffc21a"
+  },
+  "bg-warning-pressed": {
+    "value": "#ffc21a"
+  },
+  "bg-warning-secondary": {
+    "value": "#fab815"
+  },
+  "bg-warning-tertiary": {
+    "value": "#fff1c2"
+  },
+  "bghoverondarkcanvas": {
+    "value": "#ffffff33"
+  },
+  "bghoveronlightcanvas": {
+    "value": "#00000033"
+  },
+  "bghovertransparent": {
+    "value": "#0000000d"
+  },
+  "bgsecondaryoncanvas": {
+    "value": "#e6e6e6"
+  },
+  "bgselectedarea": {
+    "value": "#ff5c1633"
+  },
+  "bgtransparent": {
+    "value": "#ffffff99"
+  },
+  "bgtransparent-secondary-hover": {
+    "value": "#0000001a"
+  },
+  "bgtransparent-secondary-pressed": {
+    "value": "#00000026"
+  },
+  "bgtransparentsecondary": {
+    "value": "#ffffff"
+  },
+  "bgvoting": {
+    "value": "#ffcd29"
+  },
+  "bgvotingsecondary": {
+    "value": "#fff1c2"
+  },
+  "bgvotingtertiary": {
+    "value": "#fffbeb"
+  },
+  "bgvotingwheeldial": {
+    "value": "#fffbeb"
+  },
+  "bgvotingwheelhover": {
+    "value": "#fff1c2"
+  },
+  "border": {
+    "value": "#e6e6e6",
+    "description": "Our default border color used as a divider between sections, or around inputs."
+  },
+  "border-assistive": {
+    "value": "#ffbdf2"
+  },
+  "border-assistive-strong": {
+    "value": "#ea10ac"
+  },
+  "border-brand": {
+    "value": "#ffbb9e"
+  },
+  "border-brand-strong": {
+    "value": "#e24c0c"
+  },
+  "border-component": {
+    "value": "#e4ccff"
+  },
+  "border-component-hover": {
+    "value": "#9747ff"
+  },
+  "border-component-strong": {
+    "value": "#8638e5"
+  },
+  "border-danger": {
+    "value": "#ffc7c2"
+  },
+  "border-danger-strong": {
+    "value": "#dc3412"
+  },
+  "border-design": {
+    "value": "#bde3ff"
+  },
+  "border-design-strong": {
+    "value": "#007be5"
+  },
+  "border-disabled": {
+    "value": "#e6e6e6"
+  },
+  "border-disabled-strong": {
+    "value": "#0000004d"
+  },
+  "border-figjam": {
+    "value": "#e4ccff"
+  },
+  "border-figjam-strong": {
+    "value": "#8638e5"
+  },
+  "border-handoff": {
+    "value": "#aff4c6"
+  },
+  "border-handoff-strong": {
+    "value": "#009951"
+  },
+  "border-measure": {
+    "value": "#ffc7c2"
+  },
+  "border-measure-strong": {
+    "value": "#dc3412"
+  },
+  "border-menu": {
+    "value": "#383838",
+    "description": "Used for borders or dividers within a menu element."
+  },
+  "border-menu-disabled": {
+    "value": "#383838"
+  },
+  "border-menu-disabled-strong": {
+    "value": "#383838"
+  },
+  "border-menu-onselected": {
+    "value": "#ffa27a"
+  },
+  "border-menu-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "border-menu-selected": {
+    "value": "#ff5c16"
+  },
+  "border-menu-selected-strong": {
+    "value": "#ffa27a"
+  },
+  "border-menu-strong": {
+    "value": "#ffffff"
+  },
+  "border-onassistive": {
+    "value": "#ea10ac"
+  },
+  "border-onassistive-strong": {
+    "value": "#ffffff"
+  },
+  "border-onbrand": {
+    "value": "#e24c0c"
+  },
+  "border-onbrand-strong": {
+    "value": "#ffffff",
+    "description": "Used for borders against a bg-brand background"
+  },
+  "border-oncomponent": {
+    "value": "#8638e5"
+  },
+  "border-oncomponent-strong": {
+    "value": "#ffffff"
+  },
+  "border-ondanger": {
+    "value": "#dc3412"
+  },
+  "border-ondanger-strong": {
+    "value": "#ffffff"
+  },
+  "border-ondesign": {
+    "value": "#007be5"
+  },
+  "border-ondesign-strong": {
+    "value": "#ffffff"
+  },
+  "border-onfigjam": {
+    "value": "#8638e5"
+  },
+  "border-onfigjam-strong": {
+    "value": "#8638e5"
+  },
+  "border-onmeasure": {
+    "value": "#dc3412"
+  },
+  "border-onmeasure-strong": {
+    "value": "#ffffff"
+  },
+  "border-onselected": {
+    "value": "#ffbb9e"
+  },
+  "border-onselected-strong": {
+    "value": "#000000e5"
+  },
+  "border-onsuccess": {
+    "value": "#009951"
+  },
+  "border-onsuccess-strong": {
+    "value": "#ffffff"
+  },
+  "border-onwarning": {
+    "value": "#fab815"
+  },
+  "border-onwarning-strong": {
+    "value": "#000000e5"
+  },
+  "border-selected": {
+    "value": "#ff5c16",
+    "description": "Default selection border color we use for focused / selected inputs."
+  },
+  "border-selected-strong": {
+    "value": "#e24c0c",
+    "description": "When presenting a selected border against an already selected background, we sometimes need to increase the prominence of the selected border."
+  },
+  "border-strong": {
+    "value": "#2c2c2c",
+    "description": "A much darker border color that we can use for emphasis around some UI elements."
+  },
+  "border-success": {
+    "value": "#aff4c6"
+  },
+  "border-success-strong": {
+    "value": "#009951"
+  },
+  "border-toolbar": {
+    "value": "#444444"
+  },
+  "border-toolbar-disabled": {
+    "value": "#ffffff66"
+  },
+  "border-toolbar-onselected": {
+    "value": "#ffffff"
+  },
+  "border-toolbar-selected": {
+    "value": "#ff5c16"
+  },
+  "border-toolbar-selected-strong": {
+    "value": "#ffa27a"
+  },
+  "border-toolbar-strong": {
+    "value": "#ffffff"
+  },
+  "border-tooltip": {
+    "value": "#383838"
+  },
+  "border-tooltip-disabled": {
+    "value": "#383838"
+  },
+  "border-tooltip-disabled-strong": {
+    "value": "#383838"
+  },
+  "border-tooltip-onselected": {
+    "value": "#e24c0c"
+  },
+  "border-tooltip-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "border-tooltip-selected": {
+    "value": "#ff5c16"
+  },
+  "border-tooltip-selected-strong": {
+    "value": "#ffa27a"
+  },
+  "border-tooltip-strong": {
+    "value": "#ffffff"
+  },
+  "border-warning": {
+    "value": "#ffe8a3"
+  },
+  "border-warning-strong": {
+    "value": "#b86200"
+  },
+  "bordertranslucent": {
+    "value": "#0000001a"
+  },
+  "conditionalborder": {
+    "value": "#ffffff00"
+  },
+  "icon": {
+    "value": "#000000e5",
+    "description": "Our default icon color"
+  },
+  "icon-assistive": {
+    "value": "#ea10ac",
+    "description": "Pink icons used when Figma is assisting you in some way."
+  },
+  "icon-assistive-pressed": {
+    "value": "#cb0b96"
+  },
+  "icon-assistive-secondary": {
+    "value": "#ea10ac"
+  },
+  "icon-assistive-tertiary": {
+    "value": "#ea10ac"
+  },
+  "icon-brand": {
+    "value": "#e24c0c",
+    "description": "An icon tinted to match the accent color of the current product."
+  },
+  "icon-brand-pressed": {
+    "value": "#c53e0d"
+  },
+  "icon-brand-secondary": {
+    "value": "#ffa27a"
+  },
+  "icon-brand-tertiary": {
+    "value": "#ffbb9e"
+  },
+  "icon-component": {
+    "value": "#8638e5"
+  },
+  "icon-component-pressed": {
+    "value": "#7c2bda"
+  },
+  "icon-component-secondary": {
+    "value": "#c5b2dc"
+  },
+  "icon-component-tertiary": {
+    "value": "#c5b2dc"
+  },
+  "icon-danger": {
+    "value": "#f24822",
+    "description": "Red icons used to alert users about an error."
+  },
+  "icon-danger-hover": {
+    "value": "#bd2915"
+  },
+  "icon-danger-pressed": {
+    "value": "#bd2915"
+  },
+  "icon-danger-secondary": {
+    "value": "#f24822"
+  },
+  "icon-danger-secondary-hover": {
+    "value": "#f24822"
+  },
+  "icon-danger-tertiary": {
+    "value": "#f24822"
+  },
+  "icon-design": {
+    "value": "#007be5"
+  },
+  "icon-design-pressed": {
+    "value": "#0768cf"
+  },
+  "icon-design-secondary": {
+    "value": "#007be5"
+  },
+  "icon-design-tertiary": {
+    "value": "#007be5"
+  },
+  "icon-disabled": {
+    "value": "#0000004d"
+  },
+  "icon-figjam": {
+    "value": "#8638e5"
+  },
+  "icon-figjam-pressed": {
+    "value": "#7c2bda"
+  },
+  "icon-figjam-secondary": {
+    "value": "#c5b2dc"
+  },
+  "icon-figjam-tertiary": {
+    "value": "#c5b2dc"
+  },
+  "icon-handoff": {
+    "value": "#009951"
+  },
+  "icon-handoff-pressed": {
+    "value": "#008043"
+  },
+  "icon-handoff-secondary": {
+    "value": "#009951"
+  },
+  "icon-handoff-tertiary": {
+    "value": "#009951"
+  },
+  "icon-hover": {
+    "value": "#000000e5"
+  },
+  "icon-measure": {
+    "value": "#f24822"
+  },
+  "icon-measure-hover": {
+    "value": "#bd2915"
+  },
+  "icon-measure-pressed": {
+    "value": "#bd2915"
+  },
+  "icon-measure-secondary": {
+    "value": "#f24822"
+  },
+  "icon-measure-secondary-hover": {
+    "value": "#f24822"
+  },
+  "icon-measure-tertiary": {
+    "value": "#f24822"
+  },
+  "icon-menu": {
+    "value": "#ffffff"
+  },
+  "icon-menu-danger": {
+    "value": "#f24822"
+  },
+  "icon-menu-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-menu-hover": {
+    "value": "#ffffff"
+  },
+  "icon-menu-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "icon-menu-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-menu-pressed": {
+    "value": "#ff5c16"
+  },
+  "icon-menu-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-menu-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-menu-selected": {
+    "value": "#ffa27a"
+  },
+  "icon-menu-selected-secondary": {
+    "value": "#ffa27a"
+  },
+  "icon-menu-selected-tertiary": {
+    "value": "#ffa27a"
+  },
+  "icon-menu-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-menu-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-menu-warning": {
+    "value": "#ffcd29"
+  },
+  "icon-onassistive": {
+    "value": "#ffffff"
+  },
+  "icon-onassistive-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onassistive-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onbrand": {
+    "value": "#ffffff",
+    "description": "Icons against a “background with a fill color” (for example, a blue / purple background in our “Share” button)"
+  },
+  "icon-onbrand-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onbrand-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-oncomponent": {
+    "value": "#ffffff"
+  },
+  "icon-oncomponent-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-oncomponent-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-ondanger": {
+    "value": "#ffffff"
+  },
+  "icon-ondanger-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-ondanger-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-ondesign": {
+    "value": "#ffffff"
+  },
+  "icon-ondesign-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-ondesign-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-ondisabled": {
+    "value": "#ffffff"
+  },
+  "icon-onfigjam": {
+    "value": "#ffffff"
+  },
+  "icon-onfigjam-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onfigjam-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-oninverse": {
+    "value": "#ffffffe5"
+  },
+  "icon-onmeasure": {
+    "value": "#ffffff"
+  },
+  "icon-onmeasure-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onmeasure-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onselected": {
+    "value": "#000000e5"
+  },
+  "icon-onselected-secondary": {
+    "value": "#00000080"
+  },
+  "icon-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "icon-onselected-tertiary": {
+    "value": "#0000004d"
+  },
+  "icon-onsuccess": {
+    "value": "#ffffff"
+  },
+  "icon-onsuccess-secondary": {
+    "value": "#ffffffcc"
+  },
+  "icon-onsuccess-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-onwarning": {
+    "value": "#000000e5"
+  },
+  "icon-onwarning-secondary": {
+    "value": "#00000080"
+  },
+  "icon-onwarning-tertiary": {
+    "value": "#0000004d"
+  },
+  "icon-pressed": {
+    "value": "#e24c0c"
+  },
+  "icon-secondary": {
+    "value": "#00000080",
+    "description": "Our secondary icon color for inactive elements that need to be “lighter” in order to create hierarchy."
+  },
+  "icon-secondary-hover": {
+    "value": "#000000e5"
+  },
+  "icon-selected": {
+    "value": "#e24c0c"
+  },
+  "icon-selected-secondary": {
+    "value": "#e24c0c"
+  },
+  "icon-selected-tertiary": {
+    "value": "#e24c0c"
+  },
+  "icon-success": {
+    "value": "#14ae5c",
+    "description": "Green icons used for confirmation, and approval."
+  },
+  "icon-success-pressed": {
+    "value": "#008043"
+  },
+  "icon-success-secondary": {
+    "value": "#14ae5c"
+  },
+  "icon-success-tertiary": {
+    "value": "#14ae5c"
+  },
+  "icon-tertiary": {
+    "value": "#0000004d",
+    "description": "Our tertiary icon color primarily used for carets"
+  },
+  "icon-tertiary-hover": {
+    "value": "#000000e5"
+  },
+  "icon-toolbar": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-danger": {
+    "value": "#f24822"
+  },
+  "icon-toolbar-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-toolbar-hover": {
+    "value": "#000000e5"
+  },
+  "icon-toolbar-ondisabled": {
+    "value": "#2c2c2c"
+  },
+  "icon-toolbar-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-pressed": {
+    "value": "#ff5c16"
+  },
+  "icon-toolbar-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-toolbar-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-selected": {
+    "value": "#ffa27a"
+  },
+  "icon-toolbar-selected-secondary": {
+    "value": "#ffa27a"
+  },
+  "icon-toolbar-selected-tertiary": {
+    "value": "#ffa27a"
+  },
+  "icon-toolbar-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-toolbar-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-toolbar-warning": {
+    "value": "#ffcd29"
+  },
+  "icon-tooltip": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-danger": {
+    "value": "#f24822"
+  },
+  "icon-tooltip-disabled": {
+    "value": "#ffffff66"
+  },
+  "icon-tooltip-hover": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "icon-tooltip-onselected": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-pressed": {
+    "value": "#ff5c16"
+  },
+  "icon-tooltip-secondary": {
+    "value": "#ffffffb2"
+  },
+  "icon-tooltip-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-selected": {
+    "value": "#ffa27a"
+  },
+  "icon-tooltip-selected-secondary": {
+    "value": "#ffa27a"
+  },
+  "icon-tooltip-selected-tertiary": {
+    "value": "#ffa27a"
+  },
+  "icon-tooltip-tertiary": {
+    "value": "#ffffff66"
+  },
+  "icon-tooltip-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "icon-tooltip-warning": {
+    "value": "#ffcd29"
+  },
+  "icon-warning": {
+    "value": "#ffcd29",
+    "description": "Yellow icons used to warn users about a potential problem."
+  },
+  "icon-warning-pressed": {
+    "value": "#b86200"
+  },
+  "icon-warning-secondary": {
+    "value": "#ffcd29"
+  },
+  "icon-warning-tertiary": {
+    "value": "#ffcd29"
+  },
+  "icondesignfilesecondary": {
+    "value": "#80caff"
+  },
+  "iconfigjamfilesecondary": {
+    "value": "#d9b8ff"
+  },
+  "iconondarkcanvas": {
+    "value": "#ffffffe5"
+  },
+  "icononlightcanvas": {
+    "value": "#000000e5"
+  },
+  "icononvoting": {
+    "value": "#000000e5"
+  },
+  "iconprototypefile": {
+    "value": "#d9d9d9"
+  },
+  "iconprototypefilesecondary": {
+    "value": "#2c2c2c"
+  },
+  "iconpublishedfile": {
+    "value": "#2c2c2c"
+  },
+  "iconpublishedfilesecondary": {
+    "value": "#757575"
+  },
+  "loading": {
+    "value": "#0000001a"
+  },
+  "loadingmenu": {
+    "value": "#ffffff1a"
+  },
+  "loadingsecondary": {
+    "value": "#0000000d"
+  },
+  "loadingsecondarymenu": {
+    "value": "#ffffff0d"
+  },
+  "modalbackdrop": {
+    "value": "#00000080"
+  },
+  "multiplayerblue": {
+    "value": "#007be5"
+  },
+  "multiplayerbluehover": {
+    "value": "#0768cf"
+  },
+  "multiplayerbluesecondary": {
+    "value": "#034ac1"
+  },
+  "multiplayergreen": {
+    "value": "#14ae5c"
+  },
+  "multiplayergreenhover": {
+    "value": "#009951"
+  },
+  "multiplayergreensecondary": {
+    "value": "#036838"
+  },
+  "multiplayergrey": {
+    "value": "#667799"
+  },
+  "multiplayergreyhover": {
+    "value": "#536383"
+  },
+  "multiplayergreysecondary": {
+    "value": "#394360"
+  },
+  "multiplayerpink": {
+    "value": "#ff24bd"
+  },
+  "multiplayerpinkhover": {
+    "value": "#ea10ac"
+  },
+  "multiplayerpinksecondary": {
+    "value": "#971172"
+  },
+  "multiplayerpurple": {
+    "value": "#9747ff"
+  },
+  "multiplayerpurplehover": {
+    "value": "#8638e5"
+  },
+  "multiplayerpurplesecondary": {
+    "value": "#681abb"
+  },
+  "multiplayerred": {
+    "value": "#f24822"
+  },
+  "multiplayerredhover": {
+    "value": "#dc3412"
+  },
+  "multiplayerredsecondary": {
+    "value": "#9f1f18"
+  },
+  "multiplayeryellow": {
+    "value": "#ffcd29"
+  },
+  "multiplayeryellowhover": {
+    "value": "#ffc21a"
+  },
+  "multiplayeryellowsecondary": {
+    "value": "#eba611"
+  },
+  "nodehandle": {
+    "value": "#80caff"
+  },
+  "prototypeloadingbackdrop": {
+    "value": "#000000e5"
+  },
+  "scrollbar": {
+    "value": "#b3b3b380"
+  },
+  "shadow": {
+    "value": "#00000026"
+  },
+  "text": {
+    "value": "#000000e5",
+    "description": "Our default text color for most titles, tabs, and body text."
+  },
+  "text-assistive": {
+    "value": "#ea10ac",
+    "description": "Pink text used when Figma is assisting you in some way (ex: in auto layout)"
+  },
+  "text-assistive-pressed": {
+    "value": "#cb0b96"
+  },
+  "text-assistive-secondary": {
+    "value": "#ea10ac"
+  },
+  "text-assistive-tertiary": {
+    "value": "#ea10ac"
+  },
+  "text-brand": {
+    "value": "#e24c0c",
+    "description": "Text that is tinted to match the current product, typically used for things like links. For specifically referring to concepts in design, we can use color-text-design instead."
+  },
+  "text-brand-secondary": {
+    "value": "#e24c0c"
+  },
+  "text-brand-tertiary": {
+    "value": "#e24c0c"
+  },
+  "text-component": {
+    "value": "#8638e5"
+  },
+  "text-component-pressed": {
+    "value": "#7c2bda"
+  },
+  "text-component-secondary": {
+    "value": "#c5b2dc"
+  },
+  "text-component-tertiary": {
+    "value": "#c5b2dc"
+  },
+  "text-danger": {
+    "value": "#dc3412",
+    "description": "Red text used to alert users about an error."
+  },
+  "text-danger-secondary": {
+    "value": "#dc3412"
+  },
+  "text-danger-tertiary": {
+    "value": "#dc3412"
+  },
+  "text-design": {
+    "value": "#007be5"
+  },
+  "text-design-pressed": {
+    "value": "#0768cf"
+  },
+  "text-design-secondary": {
+    "value": "#007be5"
+  },
+  "text-design-tertiary": {
+    "value": "#007be5"
+  },
+  "text-disabled": {
+    "value": "#0000004d"
+  },
+  "text-figjam": {
+    "value": "#8638e5"
+  },
+  "text-figjam-pressed": {
+    "value": "#7c2bda"
+  },
+  "text-figjam-secondary": {
+    "value": "#c5b2dc"
+  },
+  "text-figjam-tertiary": {
+    "value": "#c5b2dc"
+  },
+  "text-handoff": {
+    "value": "#009951"
+  },
+  "text-handoff-secondary": {
+    "value": "#009951"
+  },
+  "text-handoff-tertiary": {
+    "value": "#009951"
+  },
+  "text-hover": {
+    "value": "#000000e5"
+  },
+  "text-measure": {
+    "value": "#dc3412"
+  },
+  "text-measure-secondary": {
+    "value": "#dc3412"
+  },
+  "text-measure-tertiary": {
+    "value": "#dc3412"
+  },
+  "text-menu": {
+    "value": "#ffffff"
+  },
+  "text-menu-danger": {
+    "value": "#f24822"
+  },
+  "text-menu-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-menu-hover": {
+    "value": "#ffffff"
+  },
+  "text-menu-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "text-menu-onselected": {
+    "value": "#ffffff"
+  },
+  "text-menu-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-menu-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-menu-selected": {
+    "value": "#ffa27a"
+  },
+  "text-menu-selected-secondary": {
+    "value": "#ffa27a"
+  },
+  "text-menu-selected-tertiary": {
+    "value": "#ffa27a"
+  },
+  "text-menu-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-menu-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-menu-warning": {
+    "value": "#ffd966"
+  },
+  "text-onassistive": {
+    "value": "#ffffff"
+  },
+  "text-onassistive-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onassistive-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onbrand": {
+    "value": "#ffffff",
+    "description": "Used for text against a “background with a fill color” (for example, a blue / purple background in our “Share” button)"
+  },
+  "text-onbrand-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onbrand-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-oncomponent": {
+    "value": "#ffffff"
+  },
+  "text-oncomponent-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-oncomponent-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-ondanger": {
+    "value": "#ffffff"
+  },
+  "text-ondanger-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-ondanger-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-ondesign": {
+    "value": "#ffffff"
+  },
+  "text-ondesign-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-ondesign-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-ondisabled": {
+    "value": "#ffffff"
+  },
+  "text-onfigjam": {
+    "value": "#ffffff"
+  },
+  "text-onfigjam-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onfigjam-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-oninverse": {
+    "value": "#ffffffe5"
+  },
+  "text-onmeasure": {
+    "value": "#ffffff"
+  },
+  "text-onmeasure-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onmeasure-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onselected": {
+    "value": "#000000e5"
+  },
+  "text-onselected-secondary": {
+    "value": "#00000080"
+  },
+  "text-onselected-strong": {
+    "value": "#ffffff"
+  },
+  "text-onselected-tertiary": {
+    "value": "#0000004d"
+  },
+  "text-onsuccess": {
+    "value": "#ffffff"
+  },
+  "text-onsuccess-secondary": {
+    "value": "#ffffffcc"
+  },
+  "text-onsuccess-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-onwarning": {
+    "value": "#000000e5"
+  },
+  "text-onwarning-secondary": {
+    "value": "#00000080"
+  },
+  "text-onwarning-tertiary": {
+    "value": "#0000004d"
+  },
+  "text-secondary": {
+    "value": "#00000080",
+    "description": "Our secondary text color for inactive tabs, labels, timestamps, and other text that needs to be “lighter” in order to create hierarchy."
+  },
+  "text-secondary-hover": {
+    "value": "#000000e5"
+  },
+  "text-selected": {
+    "value": "#e24c0c"
+  },
+  "text-selected-secondary": {
+    "value": "#e24c0c"
+  },
+  "text-selected-tertiary": {
+    "value": "#e24c0c"
+  },
+  "text-success": {
+    "value": "#009951"
+  },
+  "text-success-secondary": {
+    "value": "#009951"
+  },
+  "text-success-tertiary": {
+    "value": "#009951"
+  },
+  "text-tertiary": {
+    "value": "#0000004d",
+    "description": "Primarily used for placeholder text (for example in a search input), or for hierarchy below secondary text. Note that text at this level is below our color contrast threshold, and may not be readable to all users."
+  },
+  "text-tertiary-hover": {
+    "value": "#000000e5"
+  },
+  "text-toolbar": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-danger": {
+    "value": "#ffafa3"
+  },
+  "text-toolbar-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-toolbar-hover": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-ondisabled": {
+    "value": "#2c2c2c"
+  },
+  "text-toolbar-onselected": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-toolbar-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-selected": {
+    "value": "#ffa27a"
+  },
+  "text-toolbar-selected-secondary": {
+    "value": "#ffa27a"
+  },
+  "text-toolbar-selected-tertiary": {
+    "value": "#ffa27a"
+  },
+  "text-toolbar-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-toolbar-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-toolbar-warning": {
+    "value": "#ffd966"
+  },
+  "text-tooltip": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-danger": {
+    "value": "#ffafa3"
+  },
+  "text-tooltip-disabled": {
+    "value": "#ffffff66"
+  },
+  "text-tooltip-hover": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-ondisabled": {
+    "value": "#1e1e1e"
+  },
+  "text-tooltip-onselected": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-secondary": {
+    "value": "#ffffffb2"
+  },
+  "text-tooltip-secondary-hover": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-selected": {
+    "value": "#ffa27a"
+  },
+  "text-tooltip-selected-secondary": {
+    "value": "#ffa27a"
+  },
+  "text-tooltip-selected-tertiary": {
+    "value": "#ffa27a"
+  },
+  "text-tooltip-tertiary": {
+    "value": "#ffffff66"
+  },
+  "text-tooltip-tertiary-hover": {
+    "value": "#ffffff"
+  },
+  "text-tooltip-warning": {
+    "value": "#ffd966"
+  },
+  "text-warning": {
+    "value": "#b86200",
+    "description": "Yellow text used to warn users about a potential problem."
+  },
+  "text-warning-secondary": {
+    "value": "#b86200"
+  },
+  "text-warning-tertiary": {
+    "value": "#b86200"
+  },
+  "texthighlight": {
+    "value": "#0d99ff66"
+  },
+  "textondarkcanvas": {
+    "value": "#ffffffe5"
+  },
+  "textondarkcanvassecondary": {
+    "value": "#ffffffb2"
+  },
+  "textonlightcanvas": {
+    "value": "#000000e5"
+  },
+  "textonlightcanvassecondary": {
+    "value": "#0000004d"
+  },
+  "textonmultiplayerblue": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayergreen": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayergrey": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayerpink": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayerpurple": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayerred": {
+    "value": "#ffffff"
+  },
+  "textonmultiplayeryellow": {
+    "value": "#000000e5"
+  },
+  "textonvoting": {
+    "value": "#000000e5"
+  }
+}
diff --git a/packages/theme/tokens/elevation.json b/packages/theme/tokens/elevation.json
new file mode 100644
index 0000000..7f284b4
--- /dev/null
+++ b/packages/theme/tokens/elevation.json
@@ -0,0 +1,16 @@
+{
+  "light": {
+    "100": "0px 1px 3px rgba(0, 0, 0, 0.15), 0px 0px 0.5px rgba(0, 0, 0, 0.3)",
+    "200": "0px 1px 3px rgba(0, 0, 0, 0.1), 0px 3px 8px rgba(0, 0, 0, 0.1), 0px 0px 0.5px rgba(0, 0, 0, 0.18)",
+    "300": "0px 1px 3px rgba(0, 0, 0, 0.1), 0px 5px 12px rgba(0, 0, 0, 0.13), 0px 0px 0.5px rgba(0, 0, 0, 0.15)",
+    "400": "0px 2px 5px rgba(0, 0, 0, 0.15), 0px 10px 16px rgba(0, 0, 0, 0.12), 0px 0px 0.5px rgba(0, 0, 0, 0.12)",
+    "500": "0px 2px 5px rgba(0, 0, 0, 0.15), 0px 10px 24px rgba(0, 0, 0, 0.18), 0px 0px 0.5px rgba(0, 0, 0, 0.08)"
+  },
+  "dark": {
+    "100": "0px 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3), inset 0px 0.5px 0px rgba(255, 255, 255, 0.1), 0px 0px 0.5px rgba(0, 0, 0, 0.5)",
+    "200": "0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3), 0px 3px 8px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08)",
+    "300": "0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3), 0px 5px 12px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08)",
+    "400": "0px 2px 5px rgba(0, 0, 0, 0.35), inset 0px 0px 0.5px rgba(255, 255, 255, 0.35), 0px 10px 16px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08)",
+    "500": "0px 3px 5px rgba(0, 0, 0, 0.35), inset 0px 0px 0.5px rgba(255, 255, 255, 0.35), 0px 10px 24px rgba(0, 0, 0, 0.45), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08)"
+  }
+}
diff --git a/packages/theme/tokens/extensions.json b/packages/theme/tokens/extensions.json
new file mode 100644
index 0000000..95b0e71
--- /dev/null
+++ b/packages/theme/tokens/extensions.json
@@ -0,0 +1,108 @@
+{
+  "font-family": {
+    "default": {
+      "value": "\"Inter\", ui-sans-serif, system-ui, -apple-system, \"BlinkMacSystemFont\", \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", \"Arial\", \"Noto Sans\", sans-serif, \"SFProLocalRange\"",
+      "note": "Fallback stack appended to the Design file's Inter."
+    },
+    "code": {
+      "value": "\"Roboto Mono\", \"SFMono-Regular\", \"Menlo\", \"Monaco\", \"Consolas\", \"Liberation Mono\", \"Courier New\", monospace",
+      "note": "Fallback stack appended to the Design file's Roboto Mono (mono)."
+    },
+    "display": {
+      "value": "\"Whyte\", ui-sans-serif, system-ui, sans-serif",
+      "note": "Repo-only fallback for the Design file's display family."
+    }
+  },
+  "space": {
+    "0.5": {
+      "value": ".125rem",
+      "note": "Extra 2px half-step with no spacer token."
+    },
+    "1.5": {
+      "value": ".375rem",
+      "note": "Extra 6px step with no spacer token."
+    },
+    "2.5": {
+      "value": ".75rem",
+      "note": "Extra 12px step with no spacer token."
+    }
+  },
+  "border-width": {
+    "1": {
+      "value": "1px",
+      "note": "Standard hairline used across controls."
+    },
+    "4": {
+      "value": ".25rem",
+      "note": "4px stroke used by the slider thumb."
+    }
+  },
+  "duration": {
+    "100": {
+      "value": "100ms",
+      "note": "Popup/tooltip fade."
+    },
+    "200": {
+      "value": "200ms",
+      "note": "Sheet slide transition."
+    },
+    "300": {
+      "value": "300ms",
+      "note": "Longer overlay transitions."
+    }
+  },
+  "opacity": {
+    "50": {
+      "value": "0.5",
+      "note": "Half opacity utility step."
+    },
+    "disabled": {
+      "value": "0.3",
+      "note": "Disabled glyph dimming."
+    }
+  },
+  "z-index": {
+    "1": {
+      "value": "1",
+      "note": "Base stacking step."
+    },
+    "2": {
+      "value": "2",
+      "note": "Second stacking step."
+    },
+    "dropdown": {
+      "value": "10",
+      "note": "Dropdowns above content."
+    },
+    "modal": {
+      "value": "50",
+      "note": "Dialogs/sheets above dropdowns."
+    },
+    "tooltip": {
+      "value": "100",
+      "note": "Tooltips above modals."
+    }
+  },
+  "shadow-slider": {
+    "value": "0 1px 3px 0 #0000001a, 0 3px 8px 0 #0000001a, 0 0 0.5px 0 #0000002e, inset 0 0 0 0.5px #0000001a",
+    "note": "Slider thumb shadow; not an elevation scale level."
+  },
+  "shadow-aliases": {
+    "tooltip": {
+      "value": "var(--figma-elevation-300)",
+      "note": "Legacy alias: tooltip chrome."
+    },
+    "menu": {
+      "value": "var(--figma-elevation-400)",
+      "note": "Legacy alias: menu panels."
+    },
+    "modal": {
+      "value": "var(--figma-elevation-500)",
+      "note": "Legacy alias: modal windows."
+    }
+  },
+  "shadow-hud": {
+    "value": "0px 5px 17px rgba(0, 0, 0, 0.2), 0px 2px 7px rgba(0, 0, 0, 0.15)",
+    "note": "Spec '_Legacy/LEGACY - HUD shadow' used by Notifications (toast)."
+  }
+}
diff --git a/packages/theme/tokens/sizing.json b/packages/theme/tokens/sizing.json
new file mode 100644
index 0000000..d037d2f
--- /dev/null
+++ b/packages/theme/tokens/sizing.json
@@ -0,0 +1,18 @@
+{
+  "space": {
+    "0": 0,
+    "1": 4,
+    "2": 8,
+    "3": 16,
+    "4": 24,
+    "5": 32,
+    "6": 40
+  },
+  "radius": {
+    "small": 2,
+    "medium": 5,
+    "large": 13,
+    "none": 0,
+    "full": 9999
+  }
+}
diff --git a/packages/theme/tokens/typography.json b/packages/theme/tokens/typography.json
new file mode 100644
index 0000000..114d548
--- /dev/null
+++ b/packages/theme/tokens/typography.json
@@ -0,0 +1,75 @@
+{
+  "family": {
+    "default": "Inter",
+    "display": "Whyte",
+    "mono": "Roboto Mono"
+  },
+  "weight": {
+    "default": 450,
+    "medium": 450,
+    "strong": 550,
+    "heavy": 550
+  },
+  "styles": {
+    "body-large": {
+      "fontSize": 13,
+      "lineHeight": 22,
+      "letterSpacing": -0.0025,
+      "fontWeight": 450
+    },
+    "body-large-strong": {
+      "fontSize": 13,
+      "lineHeight": 22,
+      "letterSpacing": -0.0025,
+      "fontWeight": 550
+    },
+    "body-medium": {
+      "fontSize": 11,
+      "lineHeight": 16,
+      "letterSpacing": 0.005,
+      "fontWeight": 450
+    },
+    "body-medium-strong": {
+      "fontSize": 11,
+      "lineHeight": 16,
+      "letterSpacing": 0.005,
+      "fontWeight": 550
+    },
+    "body-small": {
+      "fontSize": 9,
+      "lineHeight": 14,
+      "letterSpacing": 0.005,
+      "fontWeight": 450
+    },
+    "body-small-strong": {
+      "fontSize": 9,
+      "lineHeight": 14,
+      "letterSpacing": 0.005,
+      "fontWeight": 550
+    },
+    "heading-display": {
+      "fontSize": 48,
+      "lineHeight": 56,
+      "letterSpacing": -0.03,
+      "fontWeight": 450
+    },
+    "heading-large": {
+      "fontSize": 24,
+      "lineHeight": 32,
+      "letterSpacing": -0.017,
+      "fontWeight": 550
+    },
+    "heading-medium": {
+      "fontSize": 15,
+      "lineHeight": 25,
+      "letterSpacing": -0.005,
+      "fontWeight": 550
+    },
+    "heading-small": {
+      "fontSize": 13,
+      "lineHeight": 22,
+      "letterSpacing": -0.0025,
+      "fontWeight": 550
+    }
+  }
+}
diff --git a/packages/theme/tsconfig.json b/packages/theme/tsconfig.json
index 1c56e31..ebccc18 100644
--- a/packages/theme/tsconfig.json
+++ b/packages/theme/tsconfig.json
@@ -10,10 +10,11 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
+    "types": ["node"],
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
+  "include": ["src", "tests", "scripts"]
 }
diff --git a/packages/theme/vite.config.ts b/packages/theme/vite.config.ts
new file mode 100644
index 0000000..1c4bc38
--- /dev/null
+++ b/packages/theme/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite-plus';
+
+export default defineConfig({
+  test: {
+    environment: 'node',
+    include: ['tests/**/*.test.ts'],
+  },
+  pack: {
+    entry: ['src/index.ts', 'src/colors/index.ts'],
+    format: ['esm'],
+    dts: true,
+    unbundle: true,
+    target: 'esnext',
+  },
+});
diff --git a/packages/utils/LICENSE b/packages/utils/LICENSE
new file mode 100644
index 0000000..e2c2f0f
--- /dev/null
+++ b/packages/utils/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-PRESENT Thinkbuff
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/utils/eslint.config.mjs b/packages/utils/eslint.config.mjs
deleted file mode 100644
index a25c45e..0000000
--- a/packages/utils/eslint.config.mjs
+++ /dev/null
@@ -1,9 +0,0 @@
-import { defineFlatConfigAsync } from '@thinkbuff/eslint-config';
-
-export default defineFlatConfigAsync({
-  stylistic: {
-    overrides: {
-      '@stylistic/indent-binary-ops': 'off',
-    },
-  },
-});
diff --git a/packages/utils/package.json b/packages/utils/package.json
index a354759..ba679ef 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -1,59 +1,71 @@
 {
   "name": "@thinkbuff/figma-utils",
-  "author": "Eleven <eteplus@outlook.com>",
-  "license": "MIT",
-  "type": "module",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "description": "Utilities for Figma plugin and widget",
-  "scripts": {
-    "clean": "rm -rf dist node_modules",
-    "build": "tsc && vite build",
-    "lint": "eslint .",
-    "typecheck": "tsc --noEmit",
-    "prepublishOnly": "pnpm build"
-  },
+  "keywords": [
+    "figma",
+    "figma-plugin",
+    "figma-utils"
+  ],
   "homepage": "https://github.com/thinkbuff/figma/tree/main/packages/utils#readme",
+  "bugs": {
+    "url": "https://github.com/thinkbuff/figma/issues"
+  },
+  "license": "MIT",
+  "author": "Eleven <eteplus@outlook.com>",
   "repository": {
     "type": "git",
     "url": "https://github.com/thinkbuff/figma",
     "directory": "packages/utils"
   },
-  "bugs": {
-    "url": "https://github.com/thinkbuff/figma/issues"
-  },
-  "keywords": [
-    "figma",
-    "figma-plugin",
-    "figma-utils"
+  "files": [
+    "dist",
+    "LICENSE"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
+  "type": "module",
   "sideEffects": false,
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/index.d.mts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./dist/index.d.mts",
       "import": "./dist/index.mjs"
     },
     "./node": {
-      "types": "./dist/node/index.d.ts",
+      "types": "./dist/node/index.d.mts",
       "import": "./dist/node/index.mjs"
     },
     "./image": {
-      "types": "./dist/image/index.d.ts",
+      "types": "./dist/image/index.d.mts",
       "import": "./dist/image/index.mjs"
     },
     "./message-channel": {
-      "types": "./dist/message-channel.d.ts",
+      "types": "./dist/message-channel.d.mts",
       "import": "./dist/message-channel.mjs"
     }
   },
-  "files": [
-    "dist"
-  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rm -rf dist node_modules",
+    "build": "vp pack",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "pnpm build",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "eventemitter3": "catalog:runtime",
+    "type-fest": "catalog:types"
+  },
+  "devDependencies": {
+    "@figma/plugin-typings": "catalog:figma",
+    "@figma/widget-typings": "catalog:figma",
+    "typescript": "catalog:toolchain",
+    "vite-plus": "catalog:toolchain",
+    "vitest": "catalog:test"
+  },
   "peerDependencies": {
     "@figma/plugin-typings": "*",
     "@figma/widget-typings": "*"
@@ -65,18 +77,5 @@
     "@figma/widget-typings": {
       "optional": true
     }
-  },
-  "dependencies": {
-    "eventemitter3": "^5.0.1",
-    "type-fest": "^4.41.0"
-  },
-  "devDependencies": {
-    "@figma/plugin-typings": "^1.112.0",
-    "@figma/widget-typings": "^1.11.0",
-    "vite": "^6.3.5",
-    "vite-plugin-dts": "^4.5.4"
-  },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx}": "eslint --fix"
   }
 }
diff --git a/packages/utils/src/debounce.ts b/packages/utils/src/debounce.ts
index b5daa96..250081c 100644
--- a/packages/utils/src/debounce.ts
+++ b/packages/utils/src/debounce.ts
@@ -1,7 +1,10 @@
 type DebouncedFunction<T extends any[]> = (...args: T) => void;
 
-export function debounce<T extends any[]>(func: DebouncedFunction<T>, delay: number): DebouncedFunction<T> {
-  let timer: number | ReturnType<typeof setTimeout>;
+export function debounce<T extends any[]>(
+  func: DebouncedFunction<T>,
+  delay: number,
+): DebouncedFunction<T> {
+  let timer: number;
 
   return function debounced(...args: T) {
     clearTimeout(timer);
diff --git a/packages/utils/src/image/image-paint.ts b/packages/utils/src/image/image-paint.ts
index 9ed5981..d4c2e69 100644
--- a/packages/utils/src/image/image-paint.ts
+++ b/packages/utils/src/image/image-paint.ts
@@ -15,8 +15,10 @@ export type ImageCreateParams = {
  * @param params - An object containing either a URL or bytes to create the image from.
  * @param params.url - The URL to create the image from.
  * @param params.bytes - The bytes to create the image from.
+ *
+ * @returns A promise that resolves to the created image.
+ *
  * @throws {Error} If neither a URL nor bytes are provided.
- * @return A promise that resolves to the created image.
  */
 async function createImageByUrlOrBytes(params: Pick<ImageCreateParams, 'url' | 'bytes'>) {
   if (params.url) {
@@ -38,9 +40,12 @@ async function createImageByUrlOrBytes(params: Pick<ImageCreateParams, 'url' | '
  * @param [params.options] - Additional options for the image paint.
  * @param [params.options.scaleMode] - The scale mode for the image paint. Defaults to 'FILL'.
  * @param [params.options.scalingFactor] - The scaling factor for the image paint. Defaults to 0.5.
- * @return A promise that resolves to the created image paint.
+ *
+ * @returns A promise that resolves to the created image paint.
  */
-export async function createImagePaint(params: ImageCreateParams) {
+export async function createImagePaint(
+  params: ImageCreateParams,
+): Promise<WritableDeep<ImagePaint>> {
   const { key, options = {} } = params;
   if (imagePaints.has(key)) {
     return imagePaints.get(key) as WritableDeep<ImagePaint>;
@@ -65,9 +70,10 @@ export async function createImagePaint(params: ImageCreateParams) {
  * Retrieves an image paint based on the provided parameters.
  *
  * @param params - The parameters for creating the image paint.
- * @return A promise that resolves to the created image paint.
+ *
+ * @returns A promise that resolves to the created image paint.
  */
-export function getImagePaint(params: ImageCreateParams) {
+export function getImagePaint(params: ImageCreateParams): Promise<WritableDeep<ImagePaint>> {
   return createImagePaint(params);
 }
 
@@ -75,8 +81,10 @@ export function getImagePaint(params: ImageCreateParams) {
  * Retrieves an image paint from the cache based on the provided key.
  *
  * @param key - The key used to retrieve the image paint from the cache.
- * @return The image paint associated with the provided key, or undefined if it does not exist in the cache.
+ *
+ * @returns The image paint associated with the provided key, or undefined if it does not exist in
+ *   the cache.
  */
-export function getImagePaintFromCache(key: string) {
+export function getImagePaintFromCache(key: string): WritableDeep<ImagePaint> | undefined {
   return imagePaints.get(key);
 }
diff --git a/packages/utils/src/message-channel.ts b/packages/utils/src/message-channel.ts
index d51f198..5d5038f 100644
--- a/packages/utils/src/message-channel.ts
+++ b/packages/utils/src/message-channel.ts
@@ -1,24 +1,33 @@
 import EventEmitter from 'eventemitter3';
 
-export type MessageEventTypes<T extends Record<string, unknown>> =
-  EventEmitter.EventNames<T>;
+export type MessageEventTypes<T extends Record<string, unknown>> = EventEmitter.EventNames<T>;
 
 export type MessageEventObject<
   T extends Record<string, unknown>,
   K extends MessageEventTypes<T>,
 > = T[K] extends undefined
   ? {
-      /** unique message id */
+      /**
+       * unique message id
+       */
       key?: string;
-      /** message event type  */
+      /**
+       * message event type
+       */
       type: K;
     }
   : {
-      /** unique message id */
+      /**
+       * unique message id
+       */
       key?: string;
-      /** message event type  */
+      /**
+       * message event type
+       */
       type: K;
-      /** message event data */
+      /**
+       * message event data
+       */
       data: T[K];
     };
 
@@ -41,10 +50,7 @@ export function createMessageChannel<
   try {
     if (isInFigmaSandbox) {
       figma.ui.onmessage = (
-        message: MessageEventObject<
-          MessageEvents,
-          MessageEventTypes<MessageEvents>
-        >,
+        message: MessageEventObject<MessageEvents, MessageEventTypes<MessageEvents>>,
       ) => {
         if (!message?.type) {
           return;
@@ -84,9 +90,13 @@ export function createMessageChannel<
       type: T,
       listener: MessageEventListener<MessageEvents, T>,
       options: {
-        /** unique id for the message */
+        /**
+         * unique id for the message
+         */
         key?: string;
-        /** Add a one-time listener for a given message. */
+        /**
+         * Add a one-time listener for a given message.
+         */
         once?: boolean;
       } = {},
     ) {
@@ -126,7 +136,9 @@ export function createMessageChannel<
       type: T,
       listener: MessageEventListener<MessageEvents, T>,
       options: {
-        /** unique id for the message */
+        /**
+         * unique id for the message
+         */
         key?: string;
       } = {},
     ) {
@@ -135,13 +147,12 @@ export function createMessageChannel<
       emitter.off(eventName, listener);
     },
     /**
-     * Removes all listeners for a specific message event type, or all listeners if no type is provided.
+     * Removes all listeners for a specific message event type, or all listeners if no type is
+     * provided.
      *
      * @param type - The type of the message event. If not provided, all listeners will be removed.
      */
-    removeAllMessageListeners<T extends MessageEventTypes<MessageEvents>>(
-      type?: T,
-    ) {
+    removeAllMessageListeners<T extends MessageEventTypes<MessageEvents>>(type?: T) {
       emitter.removeAllListeners(type);
     },
   };
diff --git a/packages/utils/src/node/clone-deep.ts b/packages/utils/src/node/clone-deep.ts
index 6a06bab..8c00875 100644
--- a/packages/utils/src/node/clone-deep.ts
+++ b/packages/utils/src/node/clone-deep.ts
@@ -4,21 +4,20 @@ import type { WritableDeep } from 'type-fest';
  * Deep clones a value of any type.
  *
  * @param value - The value to clone.
- * @throws {Error} - If the value is of an unknown type.
+ *
  * @returns - The cloned value.
+ *
+ * @throws {Error} - If the value is of an unknown type.
  */
 export function cloneDeep<T = any>(value: T): WritableDeep<T> {
   const type = typeof value;
-  if (
-    value === null
-    || ['undefined', 'number', 'string', 'boolean', 'symbol'].includes(type)
-  ) {
+  if (value === null || ['undefined', 'number', 'string', 'boolean', 'symbol'].includes(type)) {
     return value as WritableDeep<T>;
   }
 
   if (type === 'object') {
     if (Array.isArray(value)) {
-      return value.map(item => cloneDeep(item)) as WritableDeep<T>;
+      return value.map((item) => cloneDeep(item)) as WritableDeep<T>;
     }
 
     if (value instanceof Uint8Array) {
diff --git a/packages/utils/src/node/clone-nodes-to-maximum.ts b/packages/utils/src/node/clone-nodes-to-maximum.ts
index 5129112..eff48fa 100644
--- a/packages/utils/src/node/clone-nodes-to-maximum.ts
+++ b/packages/utils/src/node/clone-nodes-to-maximum.ts
@@ -1,9 +1,10 @@
 /**
- * Clones the given nodes to the maximum specified number.
- * If the number of nodes is already equal to or greater than the maximum, an empty array is returned.
+ * Clones the given nodes to the maximum specified number. If the number of nodes is already equal
+ * to or greater than the maximum, an empty array is returned.
  *
  * @param nodes - The nodes to be cloned.
  * @param maximum - The maximum number of clones to create.
+ *
  * @returns An array of cloned nodes.
  */
 export function cloneNodesToMaximum(
diff --git a/packages/utils/src/node/load-fonts-async.ts b/packages/utils/src/node/load-fonts-async.ts
index 14224a8..16c3200 100644
--- a/packages/utils/src/node/load-fonts-async.ts
+++ b/packages/utils/src/node/load-fonts-async.ts
@@ -24,21 +24,23 @@ export const DEFAULT_FONT_STYLES = [
  *
  * @param node - The TextNode to load fonts for.
  * @param fontStyles - An array of font styles to load.
- * @return A promise that resolves when the fonts are loaded.
+ *
+ * @returns A promise that resolves when the fonts are loaded.
  */
 export async function loadFontsAsync(node: TextNode, fontStyles: string[] = []) {
   try {
     if (node.characters.length > 0) {
       const fontNames = node.getRangeAllFontNames(0, node.characters.length);
 
-      await Promise.allSettled(fontNames.map(fontName => figma.loadFontAsync(fontName)));
+      await Promise.allSettled(fontNames.map((fontName) => figma.loadFontAsync(fontName)));
     }
 
     if (node.hasMissingFont) {
       const style = node.fontName === figma.mixed ? 'Regular' : node.fontName.style;
       const fontName = {
         family: 'Inter',
-        style: DEFAULT_FONT_STYLES.includes(style) || fontStyles.includes(style) ? style : 'Regular',
+        style:
+          DEFAULT_FONT_STYLES.includes(style) || fontStyles.includes(style) ? style : 'Regular',
       };
 
       await figma.loadFontAsync(fontName);
diff --git a/packages/utils/src/node/supports-auto-layout.ts b/packages/utils/src/node/supports-auto-layout.ts
index b9e2be8..73edfad 100644
--- a/packages/utils/src/node/supports-auto-layout.ts
+++ b/packages/utils/src/node/supports-auto-layout.ts
@@ -2,9 +2,9 @@ export function supportsAutoLayout(
   node: SceneNode,
 ): node is ComponentNode | ComponentSetNode | FrameNode | InstanceNode {
   return (
-    node.type === 'COMPONENT'
-    || node.type === 'COMPONENT_SET'
-    || node.type === 'FRAME'
-    || node.type === 'INSTANCE'
+    node.type === 'COMPONENT' ||
+    node.type === 'COMPONENT_SET' ||
+    node.type === 'FRAME' ||
+    node.type === 'INSTANCE'
   );
 }
diff --git a/packages/utils/src/node/supports-children.ts b/packages/utils/src/node/supports-children.ts
index 40c0f89..ece533e 100644
--- a/packages/utils/src/node/supports-children.ts
+++ b/packages/utils/src/node/supports-children.ts
@@ -9,12 +9,12 @@ export function supportsChildren(
   | InstanceNode
   | SectionNode {
   return (
-    node.type === 'BOOLEAN_OPERATION'
-    || node.type === 'COMPONENT'
-    || node.type === 'COMPONENT_SET'
-    || node.type === 'FRAME'
-    || node.type === 'GROUP'
-    || node.type === 'INSTANCE'
-    || node.type === 'SECTION'
+    node.type === 'BOOLEAN_OPERATION' ||
+    node.type === 'COMPONENT' ||
+    node.type === 'COMPONENT_SET' ||
+    node.type === 'FRAME' ||
+    node.type === 'GROUP' ||
+    node.type === 'INSTANCE' ||
+    node.type === 'SECTION'
   );
 }
diff --git a/packages/utils/src/node/supports-corner-radius.ts b/packages/utils/src/node/supports-corner-radius.ts
index 8fd4b4d..ee56612 100644
--- a/packages/utils/src/node/supports-corner-radius.ts
+++ b/packages/utils/src/node/supports-corner-radius.ts
@@ -13,16 +13,16 @@ export function supportsCornerRadius(
   | StarNode
   | VectorNode {
   return (
-    node.type === 'BOOLEAN_OPERATION'
-    || node.type === 'COMPONENT'
-    || node.type === 'COMPONENT_SET'
-    || node.type === 'ELLIPSE'
-    || node.type === 'FRAME'
-    || node.type === 'HIGHLIGHT'
-    || node.type === 'INSTANCE'
-    || node.type === 'POLYGON'
-    || node.type === 'RECTANGLE'
-    || node.type === 'STAR'
-    || node.type === 'VECTOR'
+    node.type === 'BOOLEAN_OPERATION' ||
+    node.type === 'COMPONENT' ||
+    node.type === 'COMPONENT_SET' ||
+    node.type === 'ELLIPSE' ||
+    node.type === 'FRAME' ||
+    node.type === 'HIGHLIGHT' ||
+    node.type === 'INSTANCE' ||
+    node.type === 'POLYGON' ||
+    node.type === 'RECTANGLE' ||
+    node.type === 'STAR' ||
+    node.type === 'VECTOR'
   );
 }
diff --git a/packages/utils/src/node/supports-fill.ts b/packages/utils/src/node/supports-fill.ts
index 9b77df9..9772066 100644
--- a/packages/utils/src/node/supports-fill.ts
+++ b/packages/utils/src/node/supports-fill.ts
@@ -21,25 +21,25 @@ export function supportsFill(
   | VectorNode
   | WashiTapeNode {
   if (
-    node.type === 'BOOLEAN_OPERATION'
-    || node.type === 'COMPONENT'
-    || node.type === 'COMPONENT_SET'
-    || node.type === 'ELLIPSE'
-    || node.type === 'FRAME'
-    || node.type === 'HIGHLIGHT'
-    || node.type === 'INSTANCE'
-    || node.type === 'LINE'
-    || node.type === 'POLYGON'
-    || node.type === 'RECTANGLE'
-    || node.type === 'SECTION'
-    || node.type === 'SHAPE_WITH_TEXT'
-    || node.type === 'STAMP'
-    || node.type === 'STAR'
-    || node.type === 'STICKY'
-    || node.type === 'TABLE'
-    || node.type === 'TEXT'
-    || node.type === 'VECTOR'
-    || node.type === 'WASHI_TAPE'
+    node.type === 'BOOLEAN_OPERATION' ||
+    node.type === 'COMPONENT' ||
+    node.type === 'COMPONENT_SET' ||
+    node.type === 'ELLIPSE' ||
+    node.type === 'FRAME' ||
+    node.type === 'HIGHLIGHT' ||
+    node.type === 'INSTANCE' ||
+    node.type === 'LINE' ||
+    node.type === 'POLYGON' ||
+    node.type === 'RECTANGLE' ||
+    node.type === 'SECTION' ||
+    node.type === 'SHAPE_WITH_TEXT' ||
+    node.type === 'STAMP' ||
+    node.type === 'STAR' ||
+    node.type === 'STICKY' ||
+    node.type === 'TABLE' ||
+    node.type === 'TEXT' ||
+    node.type === 'VECTOR' ||
+    node.type === 'WASHI_TAPE'
   ) {
     return true;
   }
diff --git a/packages/utils/src/node/supports-resize.ts b/packages/utils/src/node/supports-resize.ts
index fcf0292..4b5e1d1 100644
--- a/packages/utils/src/node/supports-resize.ts
+++ b/packages/utils/src/node/supports-resize.ts
@@ -19,22 +19,22 @@ export function supportsResize(
   | VectorNode
   | WashiTapeNode {
   return (
-    node.type === 'BOOLEAN_OPERATION'
-    || node.type === 'COMPONENT'
-    || node.type === 'COMPONENT_SET'
-    || node.type === 'ELLIPSE'
-    || node.type === 'FRAME'
-    || node.type === 'GROUP'
-    || node.type === 'HIGHLIGHT'
-    || node.type === 'INSTANCE'
-    || node.type === 'LINE'
-    || node.type === 'POLYGON'
-    || node.type === 'RECTANGLE'
-    || node.type === 'SLICE'
-    || node.type === 'STAMP'
-    || node.type === 'STAR'
-    || node.type === 'TEXT'
-    || node.type === 'VECTOR'
-    || node.type === 'WASHI_TAPE'
+    node.type === 'BOOLEAN_OPERATION' ||
+    node.type === 'COMPONENT' ||
+    node.type === 'COMPONENT_SET' ||
+    node.type === 'ELLIPSE' ||
+    node.type === 'FRAME' ||
+    node.type === 'GROUP' ||
+    node.type === 'HIGHLIGHT' ||
+    node.type === 'INSTANCE' ||
+    node.type === 'LINE' ||
+    node.type === 'POLYGON' ||
+    node.type === 'RECTANGLE' ||
+    node.type === 'SLICE' ||
+    node.type === 'STAMP' ||
+    node.type === 'STAR' ||
+    node.type === 'TEXT' ||
+    node.type === 'VECTOR' ||
+    node.type === 'WASHI_TAPE'
   );
 }
diff --git a/packages/utils/src/node/supports-stroke-mixed.ts b/packages/utils/src/node/supports-stroke-mixed.ts
index 6a452d3..c1f824a 100644
--- a/packages/utils/src/node/supports-stroke-mixed.ts
+++ b/packages/utils/src/node/supports-stroke-mixed.ts
@@ -2,10 +2,10 @@ export function supportsStrokeMixed(
   node: SceneNode,
 ): node is ComponentNode | ComponentSetNode | FrameNode | InstanceNode | RectangleNode {
   return (
-    node.type === 'COMPONENT'
-    || node.type === 'COMPONENT_SET'
-    || node.type === 'FRAME'
-    || node.type === 'INSTANCE'
-    || node.type === 'RECTANGLE'
+    node.type === 'COMPONENT' ||
+    node.type === 'COMPONENT_SET' ||
+    node.type === 'FRAME' ||
+    node.type === 'INSTANCE' ||
+    node.type === 'RECTANGLE'
   );
 }
diff --git a/packages/utils/src/node/supports-stroke.ts b/packages/utils/src/node/supports-stroke.ts
index 35de3f1..eaba23e 100644
--- a/packages/utils/src/node/supports-stroke.ts
+++ b/packages/utils/src/node/supports-stroke.ts
@@ -19,22 +19,22 @@ export function supportsStroke(
   | VectorNode
   | WashiTapeNode {
   return (
-    node.type === 'BOOLEAN_OPERATION'
-    || node.type === 'COMPONENT'
-    || node.type === 'COMPONENT_SET'
-    || node.type === 'CONNECTOR'
-    || node.type === 'ELLIPSE'
-    || node.type === 'FRAME'
-    || node.type === 'HIGHLIGHT'
-    || node.type === 'INSTANCE'
-    || node.type === 'LINE'
-    || node.type === 'POLYGON'
-    || node.type === 'RECTANGLE'
-    || node.type === 'SHAPE_WITH_TEXT'
-    || node.type === 'STAMP'
-    || node.type === 'STAR'
-    || node.type === 'TEXT'
-    || node.type === 'VECTOR'
-    || node.type === 'WASHI_TAPE'
+    node.type === 'BOOLEAN_OPERATION' ||
+    node.type === 'COMPONENT' ||
+    node.type === 'COMPONENT_SET' ||
+    node.type === 'CONNECTOR' ||
+    node.type === 'ELLIPSE' ||
+    node.type === 'FRAME' ||
+    node.type === 'HIGHLIGHT' ||
+    node.type === 'INSTANCE' ||
+    node.type === 'LINE' ||
+    node.type === 'POLYGON' ||
+    node.type === 'RECTANGLE' ||
+    node.type === 'SHAPE_WITH_TEXT' ||
+    node.type === 'STAMP' ||
+    node.type === 'STAR' ||
+    node.type === 'TEXT' ||
+    node.type === 'VECTOR' ||
+    node.type === 'WASHI_TAPE'
   );
 }
diff --git a/packages/utils/tests/debounce.test.ts b/packages/utils/tests/debounce.test.ts
new file mode 100644
index 0000000..dd35a9f
--- /dev/null
+++ b/packages/utils/tests/debounce.test.ts
@@ -0,0 +1,50 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { debounce } from '../src/debounce';
+
+describe('debounce', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('calls the function after the delay', () => {
+    const fn = vi.fn<() => void>();
+    const debounced = debounce(fn, 100);
+
+    debounced();
+    expect(fn).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledOnce();
+  });
+
+  it('resets the timer on subsequent calls', () => {
+    const fn = vi.fn<() => void>();
+    const debounced = debounce(fn, 100);
+
+    debounced();
+    vi.advanceTimersByTime(50);
+    debounced();
+    vi.advanceTimersByTime(50);
+    expect(fn).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(50);
+    expect(fn).toHaveBeenCalledOnce();
+  });
+
+  it('passes the last arguments to the function', () => {
+    const fn = vi.fn<(value: string) => void>();
+    const debounced = debounce(fn, 100);
+
+    debounced('first');
+    debounced('second');
+
+    vi.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledOnce();
+    expect(fn).toHaveBeenCalledWith('second');
+  });
+});
diff --git a/packages/utils/tests/image/image-paint.test.ts b/packages/utils/tests/image/image-paint.test.ts
new file mode 100644
index 0000000..885066c
--- /dev/null
+++ b/packages/utils/tests/image/image-paint.test.ts
@@ -0,0 +1,78 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { createImagePaint, getImagePaintFromCache } from '../../src/image/image-paint';
+
+function stubFigma() {
+  const createImageAsync = vi.fn<(url: string) => Promise<{ hash: string }>>(async () => ({
+    hash: 'hash-async',
+  }));
+  const createImage = vi.fn<(bytes: Uint8Array) => { hash: string }>(() => ({
+    hash: 'hash-bytes',
+  }));
+  vi.stubGlobal('figma', { createImageAsync, createImage });
+  return { createImageAsync, createImage };
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe('createImagePaint', () => {
+  it('creates an IMAGE paint from a url', async () => {
+    const { createImageAsync } = stubFigma();
+
+    const paint = await createImagePaint({ key: 'url-paint', url: 'https://example.com/a.png' });
+
+    expect(createImageAsync).toHaveBeenCalledWith('https://example.com/a.png');
+    expect(paint).toMatchObject({
+      type: 'IMAGE',
+      scaleMode: 'FILL',
+      imageHash: 'hash-async',
+      scalingFactor: 0.5,
+    });
+  });
+
+  it('creates an IMAGE paint from bytes', async () => {
+    const { createImage } = stubFigma();
+    const bytes = new Uint8Array([1, 2, 3]);
+
+    const paint = await createImagePaint({ key: 'bytes-paint', bytes });
+
+    expect(createImage).toHaveBeenCalledWith(bytes);
+    expect(paint.imageHash).toBe('hash-bytes');
+  });
+
+  it('throws when neither url nor bytes are provided', async () => {
+    stubFigma();
+
+    await expect(createImagePaint({ key: 'empty-paint' })).rejects.toThrow(
+      'Either url or bytes must be provided',
+    );
+  });
+
+  it('lets options override paint defaults', async () => {
+    stubFigma();
+
+    const paint = await createImagePaint({
+      key: 'options-paint',
+      url: 'https://example.com/a.png',
+      options: { scaleMode: 'FIT', scalingFactor: 1 },
+    });
+
+    expect(paint).toMatchObject({ scaleMode: 'FIT', scalingFactor: 1 });
+  });
+
+  it('caches paints by key and returns the cached instance', async () => {
+    const { createImageAsync } = stubFigma();
+
+    const first = await createImagePaint({ key: 'cached-paint', url: 'https://example.com/a.png' });
+    const second = await createImagePaint({
+      key: 'cached-paint',
+      url: 'https://example.com/other.png',
+    });
+
+    expect(second).toBe(first);
+    expect(createImageAsync).toHaveBeenCalledOnce();
+    expect(getImagePaintFromCache('cached-paint')).toBe(first);
+  });
+});
diff --git a/packages/utils/tests/message-channel.test.ts b/packages/utils/tests/message-channel.test.ts
new file mode 100644
index 0000000..4d6abdd
--- /dev/null
+++ b/packages/utils/tests/message-channel.test.ts
@@ -0,0 +1,340 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { createMessageChannel } from '../src/message-channel';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+type AnyMessage = { type: string; key?: string; data?: unknown };
+
+function makeBrowserEnv() {
+  let capturedListener: ((event: { data: unknown }) => void) | null = null;
+  const parentPostMessage = vi.fn<() => void>();
+
+  vi.stubGlobal('window', {
+    addEventListener: (_event: string, listener: typeof capturedListener) => {
+      capturedListener = listener;
+    },
+    parent: { postMessage: parentPostMessage },
+  });
+
+  function dispatch(message: AnyMessage) {
+    capturedListener?.({ data: { pluginMessage: message } });
+  }
+
+  function dispatchRaw(eventData: unknown) {
+    capturedListener?.({ data: eventData });
+  }
+
+  return { parentPostMessage, dispatch, dispatchRaw };
+}
+
+function makeSandboxEnv() {
+  vi.stubGlobal('window', void 0);
+
+  const figmaUi: {
+    onmessage: ((msg: AnyMessage) => void) | null;
+    postMessage: ReturnType<typeof vi.fn>;
+  } = {
+    onmessage: null,
+    postMessage: vi.fn<() => void>(),
+  };
+  vi.stubGlobal('figma', { ui: figmaUi });
+
+  function dispatch(message: AnyMessage) {
+    figmaUi.onmessage?.(message);
+  }
+
+  return { figmaUi, dispatch };
+}
+
+// ---------------------------------------------------------------------------
+// Browser receive path (key routing)
+// ---------------------------------------------------------------------------
+
+describe('browser receive path', () => {
+  let dispatch: (msg: AnyMessage) => void;
+  let dispatchRaw: (eventData: unknown) => void;
+
+  beforeEach(() => {
+    ({ dispatch, dispatchRaw } = makeBrowserEnv());
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('routes message with key only to the matching keyed handler, not to unkeyed handler', () => {
+    const channel = createMessageChannel();
+    const keyedHandler = vi.fn<() => void>();
+    const unkeyedHandler = vi.fn<() => void>();
+
+    channel.onMessage('ping', unkeyedHandler);
+    channel.onMessage('ping', keyedHandler, { key: 'foo' });
+
+    dispatch({ type: 'ping', key: 'foo' });
+
+    expect(keyedHandler).toHaveBeenCalledOnce();
+    expect(unkeyedHandler).not.toHaveBeenCalled();
+  });
+
+  it('routes message without key only to unkeyed handler, not to keyed handler', () => {
+    const channel = createMessageChannel();
+    const keyedHandler = vi.fn<() => void>();
+    const unkeyedHandler = vi.fn<() => void>();
+
+    channel.onMessage('ping', unkeyedHandler);
+    channel.onMessage('ping', keyedHandler, { key: 'foo' });
+
+    dispatch({ type: 'ping' });
+
+    expect(unkeyedHandler).toHaveBeenCalledOnce();
+    expect(keyedHandler).not.toHaveBeenCalled();
+  });
+
+  it('two concurrent keyed requests do not crosstalk', () => {
+    const channel = createMessageChannel();
+    const handlerA = vi.fn<() => void>();
+    const handlerB = vi.fn<() => void>();
+
+    channel.onMessage('query', handlerA, { key: 'req-1' });
+    channel.onMessage('query', handlerB, { key: 'req-2' });
+
+    dispatch({ type: 'query', key: 'req-1' });
+
+    expect(handlerA).toHaveBeenCalledOnce();
+    expect(handlerB).not.toHaveBeenCalled();
+
+    dispatch({ type: 'query', key: 'req-2' });
+
+    expect(handlerA).toHaveBeenCalledOnce();
+    expect(handlerB).toHaveBeenCalledOnce();
+  });
+
+  it('{ once: true, key } fires once then auto-removes', () => {
+    const channel = createMessageChannel();
+    const handler = vi.fn<() => void>();
+
+    channel.onMessage('ping', handler, { once: true, key: 'foo' });
+
+    dispatch({ type: 'ping', key: 'foo' });
+    dispatch({ type: 'ping', key: 'foo' });
+
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+  it('removeMessageListener with key removes only that keyed handler', () => {
+    const channel = createMessageChannel();
+    const keyedHandler = vi.fn<() => void>();
+    const unkeyedHandler = vi.fn<() => void>();
+
+    channel.onMessage('ping', unkeyedHandler);
+    channel.onMessage('ping', keyedHandler, { key: 'foo' });
+
+    channel.removeMessageListener('ping', keyedHandler, { key: 'foo' });
+
+    dispatch({ type: 'ping', key: 'foo' });
+    dispatch({ type: 'ping' });
+
+    expect(keyedHandler).not.toHaveBeenCalled();
+    expect(unkeyedHandler).toHaveBeenCalledOnce();
+  });
+
+  it('ignores messages without a pluginMessage or type', () => {
+    const channel = createMessageChannel();
+    const handler = vi.fn<() => void>();
+
+    channel.onMessage('ping', handler);
+
+    dispatchRaw({});
+    dispatchRaw(null);
+    dispatchRaw({ pluginMessage: { data: 'no type field' } });
+    dispatch({} as AnyMessage);
+
+    expect(handler).not.toHaveBeenCalled();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Browser send path
+// ---------------------------------------------------------------------------
+
+describe('browser send path', () => {
+  let parentPostMessage: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    ({ parentPostMessage } = makeBrowserEnv());
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('calls parent.postMessage with { pluginMessage } wrapper and "*" origin', () => {
+    const channel = createMessageChannel();
+    const msg: AnyMessage = { type: 'hello', data: { value: 42 } };
+
+    channel.postMessage(msg as never);
+
+    expect(parentPostMessage).toHaveBeenCalledOnce();
+    expect(parentPostMessage).toHaveBeenCalledWith({ pluginMessage: msg }, '*');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Sandbox receive path
+// ---------------------------------------------------------------------------
+
+describe('sandbox receive path', () => {
+  let dispatch: (msg: AnyMessage) => void;
+
+  beforeEach(() => {
+    ({ dispatch } = makeSandboxEnv());
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('dispatches by type only; handler receives full message including key', () => {
+    const channel = createMessageChannel();
+    const handler = vi.fn<() => void>();
+
+    channel.onMessage('ping', handler);
+
+    const msg: AnyMessage = { type: 'ping', key: 'some-key' };
+    dispatch(msg);
+
+    expect(handler).toHaveBeenCalledOnce();
+    expect(handler).toHaveBeenCalledWith(msg);
+  });
+
+  it('multiple handlers on the same type all fire', () => {
+    const channel = createMessageChannel();
+    const h1 = vi.fn<() => void>();
+    const h2 = vi.fn<() => void>();
+
+    channel.onMessage('ping', h1);
+    channel.onMessage('ping', h2);
+
+    dispatch({ type: 'ping' });
+
+    expect(h1).toHaveBeenCalledOnce();
+    expect(h2).toHaveBeenCalledOnce();
+  });
+
+  it('once option fires the handler once then auto-removes', () => {
+    const channel = createMessageChannel();
+    const handler = vi.fn<() => void>();
+
+    channel.onMessage('ping', handler, { once: true });
+
+    dispatch({ type: 'ping' });
+    dispatch({ type: 'ping' });
+
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+  it('silently ignores invalid messages (null, undefined, missing type)', () => {
+    const channel = createMessageChannel();
+    const handler = vi.fn<() => void>();
+    channel.onMessage('ping', handler);
+
+    dispatch(null as unknown as AnyMessage);
+    dispatch(undefined as unknown as AnyMessage);
+    dispatch({ data: 'no type field' } as AnyMessage);
+    dispatch({} as AnyMessage);
+
+    expect(handler).not.toHaveBeenCalled();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Sandbox send path
+// ---------------------------------------------------------------------------
+
+describe('sandbox send path', () => {
+  let figmaUi: {
+    onmessage: ((msg: AnyMessage) => void) | null;
+    postMessage: ReturnType<typeof vi.fn>;
+  };
+
+  beforeEach(() => {
+    ({ figmaUi } = makeSandboxEnv());
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('calls figma.ui.postMessage with the message object', () => {
+    const channel = createMessageChannel();
+    const msg: AnyMessage = { type: 'hello' };
+
+    channel.postMessage(msg as never);
+
+    expect(figmaUi.postMessage).toHaveBeenCalledOnce();
+    expect(figmaUi.postMessage).toHaveBeenCalledWith(msg);
+  });
+
+  it('passes message object through unmodified', () => {
+    const channel = createMessageChannel();
+    const msg: AnyMessage = { type: 'update', key: 'k1', data: { count: 3 } };
+
+    channel.postMessage(msg as never);
+
+    expect(figmaUi.postMessage).toHaveBeenCalledWith(msg);
+    expect(figmaUi.postMessage.mock.calls[0]![0]).toBe(msg);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Lifecycle
+// ---------------------------------------------------------------------------
+
+describe('lifecycle', () => {
+  let dispatch: (msg: AnyMessage) => void;
+
+  beforeEach(() => {
+    ({ dispatch } = makeBrowserEnv());
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('removeAllMessageListeners() clears all handlers', () => {
+    const channel = createMessageChannel();
+    const h1 = vi.fn<() => void>();
+    const h2 = vi.fn<() => void>();
+
+    channel.onMessage('ping', h1);
+    channel.onMessage('pong', h2);
+
+    channel.removeAllMessageListeners();
+
+    dispatch({ type: 'ping' });
+    dispatch({ type: 'pong' });
+
+    expect(h1).not.toHaveBeenCalled();
+    expect(h2).not.toHaveBeenCalled();
+  });
+
+  it("removeAllMessageListeners(type) clears only that type's handlers", () => {
+    const channel = createMessageChannel();
+    const h1 = vi.fn<() => void>();
+    const h2 = vi.fn<() => void>();
+
+    channel.onMessage('ping', h1);
+    channel.onMessage('pong', h2);
+
+    channel.removeAllMessageListeners('ping');
+
+    dispatch({ type: 'ping' });
+    dispatch({ type: 'pong' });
+
+    expect(h1).not.toHaveBeenCalled();
+    expect(h2).toHaveBeenCalledOnce();
+  });
+});
diff --git a/packages/utils/tests/node/clone-deep.test.ts b/packages/utils/tests/node/clone-deep.test.ts
new file mode 100644
index 0000000..d22eccf
--- /dev/null
+++ b/packages/utils/tests/node/clone-deep.test.ts
@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest';
+
+import { cloneDeep } from '../../src/node/clone-deep';
+
+describe('cloneDeep', () => {
+  it('returns primitives as-is', () => {
+    expect(cloneDeep(42)).toBe(42);
+    expect(cloneDeep('text')).toBe('text');
+    expect(cloneDeep(true)).toBe(true);
+    expect(cloneDeep(null)).toBe(null);
+    expect(cloneDeep(void 0)).toBe(undefined);
+  });
+
+  it('clones objects deeply', () => {
+    const source = { a: 1, nested: { b: 2, deeper: { c: 3 } } };
+    const cloned = cloneDeep(source);
+
+    expect(cloned).toEqual(source);
+    expect(cloned).not.toBe(source);
+    expect(cloned.nested).not.toBe(source.nested);
+    expect(cloned.nested.deeper).not.toBe(source.nested.deeper);
+  });
+
+  it('clones arrays deeply', () => {
+    const source = [{ a: 1 }, { b: 2 }];
+    const cloned = cloneDeep(source);
+
+    expect(cloned).toEqual(source);
+    expect(cloned).not.toBe(source);
+    expect(cloned[0]).not.toBe(source[0]);
+  });
+
+  it('copies Uint8Array contents into a new instance', () => {
+    const source = new Uint8Array([1, 2, 3]);
+    const cloned = cloneDeep(source);
+
+    expect(cloned).toEqual(source);
+    expect(cloned).not.toBe(source);
+
+    cloned[0] = 9;
+    expect(source[0]).toBe(1);
+  });
+
+  it('throws on unsupported types', () => {
+    expect(() => cloneDeep(() => {})).toThrow('Unknown value type');
+  });
+});
diff --git a/packages/utils/tests/node/clone-nodes-to-maximum.test.ts b/packages/utils/tests/node/clone-nodes-to-maximum.test.ts
new file mode 100644
index 0000000..16e00bc
--- /dev/null
+++ b/packages/utils/tests/node/clone-nodes-to-maximum.test.ts
@@ -0,0 +1,53 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { cloneNodesToMaximum } from '../../src/node/clone-nodes-to-maximum';
+
+function makeNode() {
+  const parent = { appendChild: vi.fn<() => void>() };
+  const node = {
+    clone: vi.fn<() => object>(() => ({ visible: true })),
+    parent,
+  };
+  return node as unknown as FrameNode & { clone: ReturnType<typeof vi.fn> };
+}
+
+describe('cloneNodesToMaximum', () => {
+  it('returns an empty array when nodes already meet the maximum', () => {
+    const nodes = [makeNode(), makeNode()];
+
+    expect(cloneNodesToMaximum(nodes, 2)).toEqual([]);
+    expect(cloneNodesToMaximum(nodes, 1)).toEqual([]);
+  });
+
+  it('clones nodes until the maximum is reached', () => {
+    const nodes = [makeNode(), makeNode()];
+    const cloned = cloneNodesToMaximum(nodes, 5);
+
+    expect(cloned).toHaveLength(3);
+    expect(nodes[0]!.clone).toHaveBeenCalled();
+  });
+
+  it('cycles through the source nodes when cloning', () => {
+    const a = makeNode();
+    const b = makeNode();
+    const cloned = cloneNodesToMaximum([a, b], 5);
+
+    expect(a.clone).toHaveBeenCalledTimes(2);
+    expect(b.clone).toHaveBeenCalledTimes(1);
+    expect(cloned).toHaveLength(3);
+  });
+
+  it('hides cloned nodes and appends them to the parent', () => {
+    const parent = { appendChild: vi.fn<() => void>() };
+    const clone = { visible: true };
+    const node = {
+      clone: vi.fn<() => object>(() => clone),
+      parent,
+    } as unknown as FrameNode;
+
+    const cloned = cloneNodesToMaximum([node], 2);
+
+    expect(cloned[0]!.visible).toBe(false);
+    expect(parent.appendChild).toHaveBeenCalledWith(clone);
+  });
+});
diff --git a/packages/utils/tests/node/supports.test.ts b/packages/utils/tests/node/supports.test.ts
new file mode 100644
index 0000000..da2fb9b
--- /dev/null
+++ b/packages/utils/tests/node/supports.test.ts
@@ -0,0 +1,100 @@
+import { describe, expect, it } from 'vitest';
+
+import { supportsAutoLayout } from '../../src/node/supports-auto-layout';
+import { supportsChildren } from '../../src/node/supports-children';
+import { supportsCornerRadius } from '../../src/node/supports-corner-radius';
+import { supportsFill } from '../../src/node/supports-fill';
+import { supportsResize } from '../../src/node/supports-resize';
+import { supportsStroke } from '../../src/node/supports-stroke';
+import { supportsStrokeMixed } from '../../src/node/supports-stroke-mixed';
+
+function node(type: string): SceneNode {
+  return JSON.parse(`{ "type": "${type}" }`);
+}
+
+describe('supportsAutoLayout', () => {
+  it.each(['COMPONENT', 'COMPONENT_SET', 'FRAME', 'INSTANCE'])('returns true for %s', (type) => {
+    expect(supportsAutoLayout(node(type))).toBe(true);
+  });
+
+  it.each(['RECTANGLE', 'TEXT', 'GROUP', 'SECTION'])('returns false for %s', (type) => {
+    expect(supportsAutoLayout(node(type))).toBe(false);
+  });
+});
+
+describe('supportsChildren', () => {
+  it.each([
+    'BOOLEAN_OPERATION',
+    'COMPONENT',
+    'COMPONENT_SET',
+    'FRAME',
+    'GROUP',
+    'INSTANCE',
+    'SECTION',
+  ])('returns true for %s', (type) => {
+    expect(supportsChildren(node(type))).toBe(true);
+  });
+
+  it.each(['RECTANGLE', 'TEXT', 'LINE', 'VECTOR'])('returns false for %s', (type) => {
+    expect(supportsChildren(node(type))).toBe(false);
+  });
+});
+
+describe('supportsCornerRadius', () => {
+  it.each(['RECTANGLE', 'ELLIPSE', 'FRAME', 'STAR', 'VECTOR', 'INSTANCE'])(
+    'returns true for %s',
+    (type) => {
+      expect(supportsCornerRadius(node(type))).toBe(true);
+    },
+  );
+
+  it.each(['TEXT', 'LINE', 'SECTION', 'GROUP'])('returns false for %s', (type) => {
+    expect(supportsCornerRadius(node(type))).toBe(false);
+  });
+});
+
+describe('supportsFill', () => {
+  it.each(['RECTANGLE', 'FRAME', 'TEXT', 'STICKY', 'TABLE', 'VECTOR'])(
+    'returns true for %s',
+    (type) => {
+      expect(supportsFill(node(type))).toBe(true);
+    },
+  );
+
+  it.each(['GROUP', 'CONNECTOR', 'SLICE'])('returns false for %s', (type) => {
+    expect(supportsFill(node(type))).toBe(false);
+  });
+});
+
+describe('supportsResize', () => {
+  it.each(['RECTANGLE', 'FRAME', 'GROUP', 'TEXT', 'SLICE'])('returns true for %s', (type) => {
+    expect(supportsResize(node(type))).toBe(true);
+  });
+
+  it.each(['SECTION', 'STICKY', 'TABLE'])('returns false for %s', (type) => {
+    expect(supportsResize(node(type))).toBe(false);
+  });
+});
+
+describe('supportsStroke', () => {
+  it.each(['RECTANGLE', 'CONNECTOR', 'LINE', 'TEXT', 'VECTOR'])('returns true for %s', (type) => {
+    expect(supportsStroke(node(type))).toBe(true);
+  });
+
+  it.each(['SECTION', 'STICKY', 'TABLE'])('returns false for %s', (type) => {
+    expect(supportsStroke(node(type))).toBe(false);
+  });
+});
+
+describe('supportsStrokeMixed', () => {
+  it.each(['COMPONENT', 'COMPONENT_SET', 'FRAME', 'INSTANCE', 'RECTANGLE'])(
+    'returns true for %s',
+    (type) => {
+      expect(supportsStrokeMixed(node(type))).toBe(true);
+    },
+  );
+
+  it.each(['TEXT', 'LINE', 'GROUP', 'VECTOR'])('returns false for %s', (type) => {
+    expect(supportsStrokeMixed(node(type))).toBe(false);
+  });
+});
diff --git a/packages/utils/tsconfig.json b/packages/utils/tsconfig.json
index 9035177..9baa8df 100644
--- a/packages/utils/tsconfig.json
+++ b/packages/utils/tsconfig.json
@@ -19,6 +19,6 @@
       "~/*": ["./src/*"]
     }
   },
-  "include": ["src"],
+  "include": ["src", "tests"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/packages/utils/vite.config.ts b/packages/utils/vite.config.ts
index 07b4132..b781a2d 100644
--- a/packages/utils/vite.config.ts
+++ b/packages/utils/vite.config.ts
@@ -1,52 +1,31 @@
-import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { glob } from 'glob';
 
-import { dependencies } from './package.json';
+import { defineConfig } from 'vite-plus';
+
+import { glob } from 'glob';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-const entries = glob
-  .sync('src/**/*.ts')
-  .map(file => ([
-    path.relative(
-      'src',
-      file.slice(0, file.length - path.extname(file).length),
-    ),
-    path.resolve(__dirname, file),
-  ]));
+const entries = Object.fromEntries(
+  glob
+    .sync('src/**/*.ts', {})
+    .map((file) => [
+      path.relative('src', file.slice(0, file.length - path.extname(file).length)),
+      path.resolve(__dirname, file),
+    ]),
+);
 
-/**
- * @see https://vitejs.dev/config/
- */
 export default defineConfig({
-  plugins: [
-    dts({
-      include: ['src/**/*.ts'],
-    }),
-  ],
-  resolve: {
-    alias: {
-      '~': path.resolve(__dirname, 'src'),
-    },
+  test: {
+    environment: 'node',
+    include: ['tests/**/*.test.ts'],
   },
-  build: {
-    copyPublicDir: false,
+  pack: {
+    entry: entries,
+    format: ['esm'],
+    dts: true,
+    unbundle: true,
     target: 'esnext',
-    minify: false,
-    outDir: 'dist',
-    lib: {
-      entry: Object.fromEntries(entries),
-      formats: ['es'],
-    },
-    rollupOptions: {
-      external: Object.keys(dependencies),
-      output: {
-        preserveModules: true,
-        entryFileNames: '[name].mjs',
-      },
-    },
   },
 });
diff --git a/playground/eslint.config.mjs b/playground/eslint.config.mjs
deleted file mode 100644
index ac30b96..0000000
--- a/playground/eslint.config.mjs
+++ /dev/null
@@ -1,8 +0,0 @@
-import { defineFlatConfigAsync } from '@thinkbuff/eslint-config';
-
-export default defineFlatConfigAsync({
-  unocss: true,
-  react: {
-    typescript: true,
-  },
-});
diff --git a/playground/index.html b/playground/index.html
index b782512..24c2522 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -2,12 +2,22 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="vite.svg"
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
     <title>Figma React Playground</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script
+      type="module"
+      src="/src/main.tsx"
+    ></script>
   </body>
 </html>
diff --git a/playground/package.json b/playground/package.json
index 2b0b5c3..60f4fcd 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -1,32 +1,29 @@
 {
   "name": "playground",
+  "version": "0.1.0",
   "private": true,
-  "version": "0.0.8",
   "type": "module",
   "scripts": {
     "clean": "rm -rf dist node_modules",
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "dev": "vp dev",
+    "build": "vp build",
+    "typecheck": "tsc --noEmit",
+    "preview": "vp preview"
   },
   "dependencies": {
     "@thinkbuff/figma-react": "workspace:*",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react": "catalog:react",
+    "react-dom": "catalog:react"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "catalog:tailwind",
     "@thinkbuff/figma-theme": "workspace:*",
-    "@types/react": "^19.1.4",
-    "@types/react-dom": "^19.1.5",
-    "@unocss/preset-rem-to-px": "^66.1.2",
-    "@vitejs/plugin-react": "^4.4.1",
-    "typescript": "^5.8.3",
-    "unocss": "^66.1.2",
-    "unocss-preset-animations": "^1.2.1",
-    "vite": "^6.3.5"
-  },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx}": "eslint --fix"
+    "@types/react": "catalog:react",
+    "@types/react-dom": "catalog:react",
+    "@vitejs/plugin-react": "catalog:react",
+    "tailwindcss": "catalog:tailwind",
+    "typescript": "catalog:toolchain",
+    "vite": "catalog:toolchain",
+    "vite-plus": "catalog:toolchain"
   }
 }
diff --git a/playground/src/app.css b/playground/src/app.css
deleted file mode 100644
index b9d355d..0000000
--- a/playground/src/app.css
+++ /dev/null
@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/playground/src/app.tsx b/playground/src/app.tsx
index 5fe42e9..0310849 100644
--- a/playground/src/app.tsx
+++ b/playground/src/app.tsx
@@ -1,104 +1,138 @@
-import { useState } from 'react';
-import { Tooltip } from '@thinkbuff/figma-react/tooltip';
-import {
-  SliderRoot,
-  SliderTrack,
-  SliderRange,
-  SliderThumb,
-} from '@thinkbuff/figma-react/slider';
+import { useEffect, useState } from 'react';
+
+import { FigmaIcon } from '@thinkbuff/figma-react';
+import { ScrollArea } from '@thinkbuff/figma-react/scroll-area';
 import { Select } from '@thinkbuff/figma-react/select';
-import { cn } from '@thinkbuff/figma-react/utils';
+import { Toaster } from '@thinkbuff/figma-react/toast';
 
-import ReactLogo from './assets/react.svg';
+import { Section } from './demo';
+import { ActionIcons, Buttons, TabsDemo, Toggles } from './sections/actions';
+import { Checks, Radios } from './sections/choices';
+import { Avatars, Badges, Feedback, Icons, Scroll } from './sections/display';
+import { Inputs, Selects, ValueFields } from './sections/fields';
+import { Dialogs, Menus, Popovers } from './sections/overlays';
+import { Sliders, Swatches } from './sections/sliders';
 
-import './app.css';
+const THEMES = {
+  'figma-light': 'Figma light',
+  'figma-dark': 'Figma dark',
+  figjam: 'FigJam light',
+  'figjam-dark': 'FigJam dark',
+  devmode: 'Dev Mode light',
+  'devmode-dark': 'Dev Mode dark',
+  slides: 'Slides light',
+  'slides-dark': 'Slides dark',
+} as const;
 
-function Slider() {
-  const [values, setValues] = useState([20]);
-  const [showTooltip, toggleTooltip] = useState(false);
-  return (
-    <SliderRoot
-      value={values}
-      className="data-[orientation=vertical]:h-60"
-      onValueChange={value => setValues(value)}
-    >
-      <SliderTrack>
-        <SliderRange />
-      </SliderTrack>
-      {values.map((value, index) => (
-        <Tooltip
-          // eslint-disable-next-line react/no-array-index-key
-          key={index}
-          defaultOpen={showTooltip}
-          open={showTooltip}
-          content={<p>{value}</p>}
-          delayDuration={200}
-          updatePositionStrategy="always"
-        >
-          <SliderThumb
-            onMouseOver={() => toggleTooltip(true)}
-            onMouseOut={() => toggleTooltip(false)}
-          />
-        </Tooltip>
-      ))}
-    </SliderRoot>
-  );
+type Theme = keyof typeof THEMES;
+
+const THEME_CLASSES: Record<Theme, string[]> = {
+  'figma-light': ['figma-light'],
+  'figma-dark': ['figma-dark'],
+  figjam: ['figjam'],
+  'figjam-dark': ['figjam', 'figma-dark'],
+  devmode: ['devmode'],
+  'devmode-dark': ['devmode', 'figma-dark'],
+  slides: ['slides'],
+  'slides-dark': ['slides', 'figma-dark'],
+};
+
+const ALL_THEME_CLASSES = [...new Set(Object.values(THEME_CLASSES).flat())];
+
+const SECTIONS = [
+  { id: 'button', title: 'Button', render: <Buttons /> },
+  { id: 'action-icon', title: 'Action icon', render: <ActionIcons /> },
+  { id: 'toggle', title: 'Toggle', render: <Toggles /> },
+  { id: 'tabs', title: 'Tabs', render: <TabsDemo /> },
+  { id: 'input', title: 'Input', render: <Inputs /> },
+  { id: 'select', title: 'Select', render: <Selects /> },
+  { id: 'value-field', title: 'Value field', render: <ValueFields /> },
+  { id: 'slider', title: 'Slider', render: <Sliders /> },
+  { id: 'swatch', title: 'Swatch', render: <Swatches /> },
+  { id: 'checkbox', title: 'Checkbox & switch', render: <Checks /> },
+  { id: 'radio', title: 'Radio', render: <Radios /> },
+  { id: 'menu', title: 'Menu', render: <Menus /> },
+  { id: 'dialog', title: 'Dialog', render: <Dialogs /> },
+  { id: 'popover', title: 'Popover & tooltip', render: <Popovers /> },
+  { id: 'toast', title: 'Toast & visual bell', render: <Feedback /> },
+  { id: 'avatar', title: 'Avatar', render: <Avatars /> },
+  { id: 'badge', title: 'Badge', render: <Badges /> },
+  { id: 'scroll-area', title: 'Scroll area', render: <Scroll /> },
+  { id: 'icons', title: 'Icons', render: <Icons /> },
+] as const;
+
+function initialTheme(): Theme {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'figma-dark' : 'figma-light';
 }
 
 export function App() {
+  const [theme, setTheme] = useState<Theme>(initialTheme);
+
+  useEffect(() => {
+    document.documentElement.classList.remove(...ALL_THEME_CLASSES);
+    document.documentElement.classList.add(...THEME_CLASSES[theme]);
+  }, [theme]);
+
   return (
-    <>
-      <div className={cn('outline-figma-icon', 'outline-figma-border-brand')}>
-        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
-          <img src="/vite.svg" className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank" rel="noreferrer">
-          <img src={ReactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1 className="border border-solid p-2 bg-figma border-figma hover:text-figma-brand">
-        Vite + React + Figma
-      </h1>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-      <div className="min-h-60 min-w-60 flex flex-col items-center justify-center gap-4 bg-figma">
-        <Slider />
-        <Select.Root>
-          <Select.Trigger placeholder="Select. an option" />
-          <Select.Content>
-            <Select.Group>
-              <Select.Label>String</Select.Label>
-              <Select.Item value="text">Text</Select.Item>
-            </Select.Group>
-            <Select.Separator />
-            <Select.Group>
-              <Select.Label>Sizing</Select.Label>
-              <Select.Item value="width">Width</Select.Item>
-              <Select.Item value="height">Height</Select.Item>
-            </Select.Group>
-            <Select.Separator />
-            <Select.Group>
-              <Select.Label>Auto Layout</Select.Label>
-              <Select.Item value="gap">Gap</Select.Item>
-              <Select.Item value="horizontal-padding">
-                Horizontal padding
-              </Select.Item>
-              <Select.Item value="vertical-padding">
-                Vertical padding
-              </Select.Item>
-            </Select.Group>
-            <Select.Separator />
-            <Select.Group>
-              <Select.Item value="fill-width" disabled>
-                Fill weight
+    <div className="flex h-screen flex-col bg-figma text-figma">
+      <header className="flex h-11 shrink-0 items-center justify-between border-b border-figma px-4">
+        <div className="flex items-center gap-2">
+          <FigmaIcon size="4" />
+          <h1 className="font-figma-strong text-figma-body-large">figma-react playground</h1>
+        </div>
+        <Select.Root
+          items={THEMES}
+          value={theme}
+          onValueChange={(value) => setTheme(value as Theme)}
+        >
+          <Select.Trigger
+            aria-label="Theme"
+            className="w-36"
+          />
+          <Select.Content
+            alignItemWithTrigger={false}
+            side="bottom"
+          >
+            {Object.keys(THEMES).map((value) => (
+              <Select.Item
+                key={value}
+                value={value}
+              >
+                {THEMES[value as Theme]}
               </Select.Item>
-              <Select.Item value="stroke-width">Stroke weight</Select.Item>
-              <Select.Item value="corner-radius">Corner radius</Select.Item>
-            </Select.Group>
+            ))}
           </Select.Content>
         </Select.Root>
+      </header>
+      <div className="flex min-h-0 flex-1">
+        <ScrollArea className="w-40 shrink-0 border-r border-figma">
+          <nav className="flex flex-col gap-0.5 p-3">
+            {SECTIONS.map((section) => (
+              <a
+                key={section.id}
+                href={`#${section.id}`}
+                className="rounded-figma-md px-2 py-1 text-figma-secondary hover:bg-figma-secondary hover:text-figma"
+              >
+                {section.title}
+              </a>
+            ))}
+          </nav>
+        </ScrollArea>
+        <ScrollArea className="min-w-0 flex-1">
+          <main className="flex max-w-3xl flex-col gap-6 p-6">
+            {SECTIONS.map((section) => (
+              <Section
+                key={section.id}
+                id={section.id}
+                title={section.title}
+              >
+                {section.render}
+              </Section>
+            ))}
+          </main>
+        </ScrollArea>
       </div>
-    </>
+      <Toaster />
+    </div>
   );
 }
diff --git a/playground/src/assets/react.svg b/playground/src/assets/react.svg
deleted file mode 100644
index 6c87de9..0000000
--- a/playground/src/assets/react.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/playground/src/demo.tsx b/playground/src/demo.tsx
new file mode 100644
index 0000000..793ec82
--- /dev/null
+++ b/playground/src/demo.tsx
@@ -0,0 +1,36 @@
+import { cn } from '@thinkbuff/figma-react/utils';
+
+interface SectionProps {
+  id: string;
+  title: string;
+  children: React.ReactNode;
+}
+
+function Section({ id, title, children }: SectionProps) {
+  return (
+    <section
+      id={id}
+      className="scroll-mt-4 border-b border-figma pb-6 last:border-b-0"
+    >
+      <h2 className="mb-4 font-figma-strong text-figma-body-large text-figma">{title}</h2>
+      <div className="flex flex-col gap-5">{children}</div>
+    </section>
+  );
+}
+
+interface DemoProps {
+  label: string;
+  className?: string;
+  children: React.ReactNode;
+}
+
+function Demo({ label, className, children }: DemoProps) {
+  return (
+    <div className="flex flex-col gap-2">
+      <span className="text-figma-body-medium text-figma-secondary">{label}</span>
+      <div className={cn('flex flex-wrap items-center gap-3', className)}>{children}</div>
+    </div>
+  );
+}
+
+export { Demo, Section };
diff --git a/playground/src/index.css b/playground/src/index.css
index 6119ad9..2c3423a 100644
--- a/playground/src/index.css
+++ b/playground/src/index.css
@@ -1,68 +1,2 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+@import 'tailwindcss';
+@import '@thinkbuff/figma-react/styles.css';
diff --git a/playground/src/main.tsx b/playground/src/main.tsx
index 16d8da3..df9c377 100644
--- a/playground/src/main.tsx
+++ b/playground/src/main.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+
 import { TooltipProvider } from '@thinkbuff/figma-react/tooltip';
 
 import { App } from './app';
+
 import './index.css';
-import 'virtual:uno.css';
 
 ReactDOM.createRoot(document.querySelector('#root')!).render(
   <TooltipProvider>
diff --git a/playground/src/sections/actions.tsx b/playground/src/sections/actions.tsx
new file mode 100644
index 0000000..298649b
--- /dev/null
+++ b/playground/src/sections/actions.tsx
@@ -0,0 +1,302 @@
+import { useState } from 'react';
+
+import {
+  AlignHorizontalCenterIcon,
+  AlignLeftIcon,
+  AlignRightIcon,
+  EllipsisIcon,
+  MinusIcon,
+  PlayIcon,
+  PlusIcon,
+  TextAlignJustifiedIcon,
+} from '@thinkbuff/figma-react';
+import { ActionIcon } from '@thinkbuff/figma-react/action-icon';
+import { ActionIconSplit } from '@thinkbuff/figma-react/action-icon-split';
+import { Button } from '@thinkbuff/figma-react/button';
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+  SegmentedControlText,
+} from '@thinkbuff/figma-react/segmented-control';
+import { Tabs } from '@thinkbuff/figma-react/tabs';
+import { Toggle } from '@thinkbuff/figma-react/toggle';
+import { ToggleGroup, ToggleGroupItem, ToggleGroupText } from '@thinkbuff/figma-react/toggle-group';
+
+import { Demo } from '../demo';
+
+const buttonVariants = [
+  'primary',
+  'secondary',
+  'destructive',
+  'secondary-destructive',
+  'inverse',
+  'success',
+  'figjam',
+  'link',
+  'link-danger',
+  'ghost',
+] as const;
+
+function Buttons() {
+  return (
+    <>
+      <Demo label="Variants">
+        {buttonVariants.map((variant) => (
+          <Button
+            key={variant}
+            variant={variant}
+          >
+            {variant}
+          </Button>
+        ))}
+      </Demo>
+      <Demo label="Sizes and icon">
+        <Button size="large">Large</Button>
+        <Button
+          size="wide"
+          variant="secondary"
+        >
+          Wide
+        </Button>
+        <Button
+          variant="secondary"
+          icon={<PlusIcon size="4" />}
+        >
+          With icon
+        </Button>
+        <Button disabled>Disabled</Button>
+      </Demo>
+    </>
+  );
+}
+
+function ActionIcons() {
+  return (
+    <>
+      <Demo label="Action icon">
+        <ActionIcon aria-label="Add">
+          <PlusIcon size="3" />
+        </ActionIcon>
+        <ActionIcon
+          aria-label="Add"
+          variant="secondary"
+        >
+          <PlusIcon size="3" />
+        </ActionIcon>
+        <ActionIcon
+          aria-label="Add"
+          size="medium"
+        >
+          <PlusIcon size="3" />
+        </ActionIcon>
+        <ActionIcon
+          aria-label="Open"
+          aria-expanded="true"
+        >
+          <EllipsisIcon size="3" />
+        </ActionIcon>
+        <ActionIcon
+          aria-label="Add"
+          disabled
+        >
+          <PlusIcon size="3" />
+        </ActionIcon>
+      </Demo>
+      <Demo label="Split action icon">
+        <ActionIconSplit.Root>
+          <ActionIconSplit.Button aria-label="Run">
+            <PlayIcon size="3" />
+          </ActionIconSplit.Button>
+          <ActionIconSplit.Chevron aria-label="More options" />
+        </ActionIconSplit.Root>
+        <ActionIconSplit.Root size="large">
+          <ActionIconSplit.Button aria-label="Run">
+            <PlayIcon size="4" />
+          </ActionIconSplit.Button>
+          <ActionIconSplit.Chevron aria-label="More options" />
+        </ActionIconSplit.Root>
+      </Demo>
+    </>
+  );
+}
+
+const alignOptions = [
+  { value: 'left', label: 'Align left', icon: <AlignLeftIcon size="4" /> },
+  { value: 'center', label: 'Align center', icon: <AlignHorizontalCenterIcon size="4" /> },
+  { value: 'right', label: 'Align right', icon: <AlignRightIcon size="4" /> },
+  { value: 'justify', label: 'Align justify', icon: <TextAlignJustifiedIcon size="4" /> },
+];
+
+function Toggles() {
+  const [pressed, setPressed] = useState(false);
+  const [format, setFormat] = useState<string[]>(['bold']);
+
+  return (
+    <>
+      <Demo label="Toggle">
+        <Toggle
+          aria-label="More options"
+          pressed={pressed}
+          onPressedChange={setPressed}
+        >
+          <EllipsisIcon size="4" />
+        </Toggle>
+        <Toggle
+          aria-label="More options"
+          variant="secondary"
+          pressed={pressed}
+          onPressedChange={setPressed}
+        >
+          <EllipsisIcon size="4" />
+        </Toggle>
+        <Toggle
+          aria-label="More options"
+          variant="default"
+          pressed={pressed}
+          onPressedChange={setPressed}
+        >
+          <EllipsisIcon size="4" />
+        </Toggle>
+      </Demo>
+      <Demo label="Toggle group">
+        <ToggleGroup
+          multiple
+          value={format}
+          onValueChange={setFormat}
+        >
+          <ToggleGroupItem
+            value="bold"
+            aria-label="Bold"
+          >
+            <span className="font-figma-strong">B</span>
+          </ToggleGroupItem>
+          <ToggleGroupItem
+            value="italic"
+            aria-label="Italic"
+          >
+            <span className="italic">I</span>
+          </ToggleGroupItem>
+          <ToggleGroupItem
+            value="underline"
+            aria-label="Underline"
+          >
+            <span className="underline">U</span>
+          </ToggleGroupItem>
+        </ToggleGroup>
+        <ToggleGroup defaultValue={['minimalist']}>
+          <ToggleGroupItem value="minimalist">
+            <ToggleGroupText>Minimalist</ToggleGroupText>
+          </ToggleGroupItem>
+          <ToggleGroupItem value="modern">
+            <ToggleGroupText>Modern</ToggleGroupText>
+          </ToggleGroupItem>
+          <ToggleGroupItem value="retro">
+            <ToggleGroupText>Retro</ToggleGroupText>
+          </ToggleGroupItem>
+        </ToggleGroup>
+      </Demo>
+      <Demo label="Segmented control">
+        <SegmentedControl defaultValue="left">
+          {alignOptions.map((option) => (
+            <SegmentedControlItem
+              key={option.value}
+              value={option.value}
+              aria-label={option.label}
+            >
+              {option.icon}
+            </SegmentedControlItem>
+          ))}
+        </SegmentedControl>
+        <div className="w-42">
+          <SegmentedControl
+            fullWidth
+            defaultValue="auto"
+          >
+            <SegmentedControlItem
+              value="auto"
+              aria-label="Auto"
+            >
+              <MinusIcon size="4" />
+            </SegmentedControlItem>
+            {['17', '17', '17'].map((label, i) => (
+              <SegmentedControlItem
+                key={i}
+                value={`v${i}`}
+              >
+                <SegmentedControlText>{label}</SegmentedControlText>
+              </SegmentedControlItem>
+            ))}
+          </SegmentedControl>
+        </div>
+      </Demo>
+    </>
+  );
+}
+
+function TabsDemo() {
+  const tabs = [
+    { value: 'all', content: 'All comments, mentions, and replies' },
+    { value: 'only', content: 'Only mentions and replies' },
+    { value: 'none', content: 'None' },
+  ];
+
+  return (
+    <>
+      <Demo
+        label="Default"
+        className="flex-col items-stretch gap-4"
+      >
+        <Tabs.Root
+          defaultValue="all"
+          className="w-72"
+        >
+          <Tabs.List className="h-9 w-full justify-start">
+            {tabs.map((tab) => (
+              <Tabs.Trigger
+                key={tab.value}
+                value={tab.value}
+              >
+                {tab.value}
+              </Tabs.Trigger>
+            ))}
+          </Tabs.List>
+          <div className="flex p-2 text-figma-secondary">
+            {tabs.map((tab) => (
+              <Tabs.Content
+                key={tab.value}
+                value={tab.value}
+              >
+                {tab.content}
+              </Tabs.Content>
+            ))}
+          </div>
+        </Tabs.Root>
+      </Demo>
+      <Demo
+        label="Scrollable"
+        className="flex-col items-stretch gap-4"
+      >
+        <Tabs.Root
+          defaultValue="first"
+          className="w-48"
+        >
+          <Tabs.List
+            scrollable
+            className="h-9"
+          >
+            {['first', 'second', 'third', 'fourth'].map((value) => (
+              <Tabs.Trigger
+                key={value}
+                value={value}
+              >
+                {value} tab
+              </Tabs.Trigger>
+            ))}
+          </Tabs.List>
+        </Tabs.Root>
+      </Demo>
+    </>
+  );
+}
+
+export { ActionIcons, Buttons, TabsDemo, Toggles };
diff --git a/playground/src/sections/choices.tsx b/playground/src/sections/choices.tsx
new file mode 100644
index 0000000..33ea396
--- /dev/null
+++ b/playground/src/sections/choices.tsx
@@ -0,0 +1,156 @@
+import { useState } from 'react';
+
+import { Checkbox } from '@thinkbuff/figma-react/checkbox';
+import { Label } from '@thinkbuff/figma-react/label';
+import { Radio } from '@thinkbuff/figma-react/radio';
+import { Switch } from '@thinkbuff/figma-react/switch';
+
+import { Demo } from '../demo';
+
+function Checks() {
+  const [checked, setChecked] = useState(true);
+  const [switched, setSwitched] = useState(true);
+
+  return (
+    <>
+      <Demo label="Checkbox">
+        {(['default', 'muted', 'ghost'] as const).map((variant) => (
+          <div
+            key={variant}
+            className="flex items-center gap-2"
+          >
+            <Checkbox
+              id={`checkbox-${variant}`}
+              variant={variant}
+              checked={checked}
+              onCheckedChange={setChecked}
+            />
+            <Label htmlFor={`checkbox-${variant}`}>{variant}</Label>
+          </div>
+        ))}
+        <div className="flex items-center gap-2">
+          <Checkbox
+            id="checkbox-mixed"
+            indeterminate
+          />
+          <Label htmlFor="checkbox-mixed">indeterminate</Label>
+        </div>
+        <div className="flex items-center gap-2">
+          <Checkbox
+            id="checkbox-disabled"
+            disabled
+          />
+          <Label htmlFor="checkbox-disabled">disabled</Label>
+        </div>
+      </Demo>
+      <Demo label="Switch">
+        <div className="flex items-center gap-1">
+          <Switch
+            id="switch-on"
+            checked={switched}
+            onCheckedChange={setSwitched}
+          />
+          <Label htmlFor="switch-on">Test mode</Label>
+        </div>
+        <div className="flex items-center gap-1">
+          <Switch
+            id="switch-mixed"
+            indeterminate
+          />
+          <Label htmlFor="switch-mixed">Mixed</Label>
+        </div>
+        <div className="flex items-center gap-1">
+          <Switch
+            id="switch-disabled"
+            disabled
+          />
+          <Label htmlFor="switch-disabled">Disabled</Label>
+        </div>
+      </Demo>
+    </>
+  );
+}
+
+function Radios() {
+  const [notify, setNotify] = useState('all');
+  const [align, setAlign] = useState('left');
+
+  const options = [
+    { value: 'all', label: 'All comments, mentions, and replies' },
+    { value: 'only', label: 'Only mentions and replies' },
+    { value: 'none', label: 'None' },
+  ];
+
+  return (
+    <>
+      <Demo
+        label="Radio group"
+        className="items-start"
+      >
+        <Radio.Group
+          className="gap-3"
+          value={notify}
+          onValueChange={(value) => setNotify(value as string)}
+        >
+          {options.map((option) => (
+            <div
+              key={option.value}
+              className="flex items-center gap-2"
+            >
+              <Radio.GroupItem
+                id={`radio-${option.value}`}
+                value={option.value}
+              />
+              <Label htmlFor={`radio-${option.value}`}>{option.label}</Label>
+            </div>
+          ))}
+        </Radio.Group>
+        <Radio.Group
+          inline
+          className="gap-3"
+          value={notify}
+          onValueChange={(value) => setNotify(value as string)}
+        >
+          {options.map((option) => (
+            <div
+              key={option.value}
+              className="flex items-center gap-2"
+            >
+              <Radio.GroupItem
+                id={`radio-inline-${option.value}`}
+                value={option.value}
+              />
+              <Label htmlFor={`radio-inline-${option.value}`}>{option.value}</Label>
+            </div>
+          ))}
+        </Radio.Group>
+      </Demo>
+      <Demo label="Button variant">
+        <Radio.Group
+          className="w-56 gap-2"
+          value={align}
+          onValueChange={(value) => setAlign(value as string)}
+        >
+          {['left', 'center', 'right'].map((option) => (
+            <Radio.GroupItem
+              key={option}
+              value={option}
+              variant="button"
+            >
+              {option}
+            </Radio.GroupItem>
+          ))}
+          <Radio.GroupItem
+            value="disabled"
+            variant="button"
+            disabled
+          >
+            Disabled
+          </Radio.GroupItem>
+        </Radio.Group>
+      </Demo>
+    </>
+  );
+}
+
+export { Checks, Radios };
diff --git a/playground/src/sections/display.tsx b/playground/src/sections/display.tsx
new file mode 100644
index 0000000..e2ab90b
--- /dev/null
+++ b/playground/src/sections/display.tsx
@@ -0,0 +1,347 @@
+import {
+  AnnotationIcon,
+  CheckmarkIcon,
+  CircleIcon,
+  ComponentIcon,
+  CornerRadiusIcon,
+  DesignIcon,
+  DrawIcon,
+  EllipsisIcon,
+  EyeIcon,
+  FigmaIcon,
+  FrameIcon,
+  LinkIcon,
+  OpacityIcon,
+  PlusIcon,
+  SearchIcon,
+  StylesIcon,
+  VariableIcon,
+} from '@thinkbuff/figma-react';
+import { Avatar, AvatarGroup } from '@thinkbuff/figma-react/avatar';
+import { Badge, BadgeDot } from '@thinkbuff/figma-react/badge';
+import { Button } from '@thinkbuff/figma-react/button';
+import { ScrollArea } from '@thinkbuff/figma-react/scroll-area';
+import { Separator } from '@thinkbuff/figma-react/separator';
+import { toast } from '@thinkbuff/figma-react/toast';
+import { VisualBell } from '@thinkbuff/figma-react/visual-bell';
+
+import { Demo } from '../demo';
+
+function Feedback() {
+  return (
+    <>
+      <Demo label="Toast">
+        <Button
+          variant="secondary"
+          onClick={() => toast('Event has been created')}
+        >
+          Default
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() =>
+            toast('Event has been created', {
+              description: 'Monday, January 3rd at 6:00pm',
+              action: { label: 'Undo', onClick: () => {} },
+            })
+          }
+        >
+          Action
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() =>
+            toast.success('Event has been created', {
+              description: 'Monday, January 3rd at 6:00pm',
+            })
+          }
+        >
+          Success
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() =>
+            toast.warning('Event has been created', {
+              description: 'Monday, January 3rd at 6:00pm',
+            })
+          }
+        >
+          Warning
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() =>
+            toast.error('Something went wrong', {
+              action: { label: 'Retry', onClick: () => {} },
+            })
+          }
+        >
+          Error
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() => {
+            toast.promise(
+              new Promise<{ name: string }>((resolve) =>
+                setTimeout(() => resolve({ name: 'Figma' }), 2000),
+              ),
+              {
+                loading: 'Loading…',
+                success: (data) => `${data.name} toast has been added`,
+                error: 'Error',
+              },
+            );
+          }}
+        >
+          Promise
+        </Button>
+      </Demo>
+      <Demo
+        label="Visual bell"
+        className="flex-col items-stretch gap-3"
+      >
+        <VisualBell.Root>
+          <VisualBell.Label icon={<CircleIcon size="6" />}>Default messaging bell</VisualBell.Label>
+          <VisualBell.Actions>
+            <VisualBell.Action>Action</VisualBell.Action>
+            <VisualBell.Action>Dismiss</VisualBell.Action>
+          </VisualBell.Actions>
+          <VisualBell.Dismiss />
+        </VisualBell.Root>
+        {(['brand', 'success', 'component', 'danger'] as const).map((color) => (
+          <VisualBell.Root
+            key={color}
+            color={color}
+          >
+            <VisualBell.Label icon={<DrawIcon size="6" />}>
+              Spotlight on Tim Van Damme
+            </VisualBell.Label>
+            <VisualBell.Actions>
+              <VisualBell.Action>Follow</VisualBell.Action>
+            </VisualBell.Actions>
+            <VisualBell.Dismiss />
+          </VisualBell.Root>
+        ))}
+      </Demo>
+    </>
+  );
+}
+
+const avatarColors = ['purple', 'blue', 'pink', 'red', 'yellow', 'green', 'grey'] as const;
+
+const photo =
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23e8def8'/%3E%3Ccircle cx='16' cy='13' r='6' fill='%239747ff'/%3E%3Cpath d='M4 32c1-7 6-10 12-10s11 3 12 10' fill='%239747ff'/%3E%3C/svg%3E";
+
+function Avatars() {
+  return (
+    <>
+      <Demo label="Colors and sizes">
+        <div className="flex flex-col items-start gap-3">
+          {(['large', 'default', 'small'] as const).map((size) => (
+            <div
+              key={size}
+              className="flex items-center gap-2"
+            >
+              {avatarColors.map((color) => (
+                <Avatar
+                  key={color}
+                  name="Ada"
+                  size={size}
+                  color={color}
+                />
+              ))}
+            </div>
+          ))}
+        </div>
+      </Demo>
+      <Demo label="Photo, overflow, and group">
+        <Avatar
+          name="Ada Lovelace"
+          src={photo}
+        />
+        <Avatar
+          name="Ada"
+          shape="square"
+          color="blue"
+        />
+        <Avatar color="overflow-unread">+12</Avatar>
+        <Avatar color="overflow-read">+8</Avatar>
+        <Avatar
+          name="Ada"
+          color="purple"
+          disabled
+        />
+        <AvatarGroup>
+          <Avatar
+            name="Ada"
+            color="purple"
+          />
+          <Avatar
+            name="Ada"
+            color="blue"
+          />
+          <Avatar
+            name="Ada"
+            color="pink"
+          />
+          <Avatar
+            name="Ada"
+            color="green"
+          />
+        </AvatarGroup>
+      </Demo>
+    </>
+  );
+}
+
+const badgeColors = [
+  'default',
+  'brand',
+  'component',
+  'danger',
+  'warning',
+  'success',
+  'selected',
+  'figjam',
+] as const;
+
+function Badges() {
+  return (
+    <>
+      <Demo label="Variants">
+        <div className="grid grid-cols-2 gap-x-6 gap-y-3">
+          {badgeColors.map((color) => (
+            <div
+              key={color}
+              className="flex items-center gap-2"
+            >
+              <Badge
+                variant="strong"
+                color={color}
+              >
+                {color}
+              </Badge>
+              <Badge
+                variant="light"
+                color={color}
+              >
+                {color}
+              </Badge>
+            </div>
+          ))}
+        </div>
+      </Demo>
+      <Demo label="Alt, dot, and icons">
+        <Badge
+          variant="alt"
+          color="default"
+        >
+          Default
+        </Badge>
+        <Badge
+          variant="alt"
+          color="count"
+        >
+          3
+        </Badge>
+        <Badge
+          variant="alt"
+          color="count-inactive"
+        >
+          12
+        </Badge>
+        <Badge
+          variant="light"
+          color="merged"
+          size="large"
+          icon={<span className="size-1.5 rounded-full bg-figma-icon-success" />}
+        >
+          Merged
+        </Badge>
+        <Badge
+          variant="light"
+          color="selected"
+          icon={<CheckmarkIcon size="3" />}
+        >
+          Selected
+        </Badge>
+        <BadgeDot />
+      </Demo>
+    </>
+  );
+}
+
+const TAGS = Array.from({ length: 40 }).map((_, i) => `v1.2.0-beta.${40 - i}`);
+
+function Scroll() {
+  return (
+    <>
+      <Demo
+        label="Scroll area"
+        className="items-start"
+      >
+        <ScrollArea className="h-56 w-44 rounded-figma-md border border-figma">
+          <div className="flex w-full flex-col p-2">
+            <div className="inline-flex h-6 items-center font-figma-strong">Tags</div>
+            {TAGS.map((tag) => (
+              <div
+                key={tag}
+                className="inline-flex h-7 items-center border-t border-figma"
+              >
+                {tag}
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </Demo>
+      <Demo label="Separator">
+        <div className="flex h-4 items-center gap-2">
+          <span>Blog</span>
+          <Separator orientation="vertical" />
+          <span>Docs</span>
+          <Separator orientation="vertical" />
+          <span>Community</span>
+        </div>
+      </Demo>
+    </>
+  );
+}
+
+const iconSample = [
+  ['Plus', PlusIcon],
+  ['Ellipsis', EllipsisIcon],
+  ['Search', SearchIcon],
+  ['Component', ComponentIcon],
+  ['Frame', FrameIcon],
+  ['Figma', FigmaIcon],
+  ['Variable', VariableIcon],
+  ['Styles', StylesIcon],
+  ['Corner radius', CornerRadiusIcon],
+  ['Opacity', OpacityIcon],
+  ['Link', LinkIcon],
+  ['Eye', EyeIcon],
+  ['Design', DesignIcon],
+  ['Annotation', AnnotationIcon],
+  ['Checkmark', CheckmarkIcon],
+  ['Draw', DrawIcon],
+] as const;
+
+function Icons() {
+  return (
+    <Demo label="Bundled icons (sample)">
+      <div className="grid w-full grid-cols-4 gap-x-2 gap-y-4">
+        {iconSample.map(([name, Icon]) => (
+          <div
+            key={name}
+            className="flex flex-col items-center gap-1.5"
+          >
+            <Icon size="6" />
+            <span className="text-figma-body-medium text-figma-secondary">{name}</span>
+          </div>
+        ))}
+      </div>
+    </Demo>
+  );
+}
+
+export { Avatars, Badges, Feedback, Icons, Scroll };
diff --git a/playground/src/sections/fields.tsx b/playground/src/sections/fields.tsx
new file mode 100644
index 0000000..ce4e6c0
--- /dev/null
+++ b/playground/src/sections/fields.tsx
@@ -0,0 +1,319 @@
+import { useState } from 'react';
+
+import {
+  CloseIcon,
+  EyedropperIcon,
+  LinkBrokenIcon,
+  OpacityIcon,
+  SearchIcon,
+} from '@thinkbuff/figma-react';
+import { ActionIcon } from '@thinkbuff/figma-react/action-icon';
+import { Input, InputSlot } from '@thinkbuff/figma-react/input';
+import { Select } from '@thinkbuff/figma-react/select';
+import { Textarea } from '@thinkbuff/figma-react/textarea';
+import { ValueField } from '@thinkbuff/figma-react/value-field';
+import { VariableCell, VariableChip } from '@thinkbuff/figma-react/variable-chip';
+
+import { Demo } from '../demo';
+
+type Rgba = { r: number; g: number; b: number; a: number };
+
+function Inputs() {
+  return (
+    <>
+      <Demo label="Input">
+        <Input
+          placeholder="Default"
+          className="w-28"
+        />
+        <Input
+          variant="border"
+          placeholder="Border"
+          className="w-28"
+        />
+        <Input
+          variant="border"
+          size="large"
+          placeholder="Large"
+          className="w-28"
+        />
+        <Input
+          invalid
+          defaultValue="Invalid"
+          className="w-28"
+        />
+        <Input
+          disabled
+          placeholder="Disabled"
+          className="w-28"
+        />
+      </Demo>
+      <Demo label="With slots">
+        <Input
+          variant="border"
+          placeholder="Search"
+          className="w-36"
+        >
+          <InputSlot side="left">
+            <SearchIcon size="3.5" />
+          </InputSlot>
+        </Input>
+        <Input
+          variant="border"
+          defaultValue="Layer name"
+          className="w-36"
+        >
+          <InputSlot side="right">
+            <ActionIcon
+              aria-label="Clear"
+              className="mx-1 size-6 text-figma-icon-secondary focus:outline-transparent"
+              onClick={(event) => event.stopPropagation()}
+            >
+              <CloseIcon size="3" />
+            </ActionIcon>
+          </InputSlot>
+        </Input>
+      </Demo>
+      <Demo label="With variable">
+        <Input
+          className="w-28 text-transparent"
+          aria-label="Spacing"
+        >
+          <span className="absolute left-2 top-1">
+            <VariableChip>Spacing</VariableChip>
+          </span>
+        </Input>
+      </Demo>
+      <Demo
+        label="Textarea"
+        className="items-start"
+      >
+        <Textarea
+          placeholder="Default"
+          className="w-40"
+        />
+        <Textarea
+          invalid
+          defaultValue="Invalid"
+          className="w-40"
+        />
+        <Textarea
+          disabled
+          placeholder="Disabled"
+          className="w-40"
+        />
+      </Demo>
+    </>
+  );
+}
+
+function Selects() {
+  const [blend, setBlend] = useState<string | null>('normal');
+  const [property, setProperty] = useState<string | null>(null);
+
+  return (
+    <>
+      <Demo label="Blend mode">
+        <Select.Root
+          items={{
+            'pass-through': 'Pass through',
+            normal: 'Normal',
+            multiply: 'Multiply',
+            screen: 'Screen',
+            overlay: 'Overlay',
+            darken: 'Darken',
+            lighten: 'Lighten',
+            'color-dodge': 'Color dodge',
+            'color-burn': 'Color burn',
+            difference: 'Difference',
+          }}
+          value={blend}
+          onValueChange={setBlend}
+        >
+          <Select.Trigger
+            placeholder="Blend mode"
+            className="w-36"
+          />
+          <Select.Content>
+            <Select.Group>
+              <Select.Item value="pass-through">Pass through</Select.Item>
+              <Select.Item value="normal">Normal</Select.Item>
+            </Select.Group>
+            <Select.Separator />
+            <Select.Group>
+              <Select.Item value="multiply">Multiply</Select.Item>
+              <Select.Item value="screen">Screen</Select.Item>
+              <Select.Item value="overlay">Overlay</Select.Item>
+              <Select.Item value="darken">Darken</Select.Item>
+              <Select.Item value="lighten">Lighten</Select.Item>
+              <Select.Item value="color-dodge">Color dodge</Select.Item>
+              <Select.Item value="color-burn">Color burn</Select.Item>
+              <Select.Item value="difference">Difference</Select.Item>
+            </Select.Group>
+          </Select.Content>
+        </Select.Root>
+      </Demo>
+      <Demo label="Grouped, icon, and large">
+        <Select.Root
+          items={{
+            text: 'Text',
+            width: 'Width',
+            height: 'Height',
+            gap: 'Gap',
+            'horizontal-padding': 'Horizontal padding',
+            'vertical-padding': 'Vertical padding',
+            'stroke-width': 'Stroke weight',
+            'corner-radius': 'Corner radius',
+          }}
+          value={property}
+          onValueChange={setProperty}
+        >
+          <Select.Trigger
+            placeholder="Select a property"
+            className="w-44"
+          />
+          <Select.Content>
+            <Select.Group>
+              <Select.Label>String</Select.Label>
+              <Select.Item value="text">Text</Select.Item>
+            </Select.Group>
+            <Select.Separator />
+            <Select.Group>
+              <Select.Label>Sizing</Select.Label>
+              <Select.Item value="width">Width</Select.Item>
+              <Select.Item value="height">Height</Select.Item>
+            </Select.Group>
+            <Select.Separator />
+            <Select.Group>
+              <Select.Label>Auto layout</Select.Label>
+              <Select.Item value="gap">Gap</Select.Item>
+              <Select.Item value="horizontal-padding">Horizontal padding</Select.Item>
+              <Select.Item value="vertical-padding">Vertical padding</Select.Item>
+            </Select.Group>
+            <Select.Separator />
+            <Select.Group>
+              <Select.Item value="stroke-width">Stroke weight</Select.Item>
+              <Select.Item value="corner-radius">Corner radius</Select.Item>
+            </Select.Group>
+          </Select.Content>
+        </Select.Root>
+        <Select.Root items={{ solid: 'Solid', linear: 'Linear', radial: 'Radial' }}>
+          <Select.Trigger
+            icon={<EyedropperIcon size="4" />}
+            placeholder="Fill"
+            className="w-28"
+          />
+          <Select.Content>
+            <Select.Item value="solid">Solid</Select.Item>
+            <Select.Item value="linear">Linear</Select.Item>
+            <Select.Item value="radial">Radial</Select.Item>
+          </Select.Content>
+        </Select.Root>
+        <Select.Root items={{ solid: 'Solid', linear: 'Linear', radial: 'Radial' }}>
+          <Select.Trigger
+            size="large"
+            icon={<EyedropperIcon size="4" />}
+            placeholder="Fill"
+            className="w-28"
+          />
+          <Select.Content>
+            <Select.Item value="solid">Solid</Select.Item>
+            <Select.Item value="linear">Linear</Select.Item>
+            <Select.Item value="radial">Radial</Select.Item>
+          </Select.Content>
+        </Select.Root>
+      </Demo>
+    </>
+  );
+}
+
+const FONT_SIZES = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 32, 40, 48, 64, 72, 96];
+
+function ValueFields() {
+  const [x, setX] = useState(24);
+  const [size, setSize] = useState(16);
+  const [opacity, setOpacity] = useState(80);
+  const [rgba, setRgba] = useState<Rgba>({ r: 1, g: 0.14, b: 0.74, a: 0.6 });
+
+  return (
+    <>
+      <Demo label="Numeric fields">
+        <ValueField.Root className="w-24">
+          <ValueField.Scrubber>
+            <ValueField.Label>X</ValueField.Label>
+          </ValueField.Scrubber>
+          <ValueField.Numeric
+            value={x}
+            onChange={setX}
+          />
+        </ValueField.Root>
+        <ValueField.Root className="w-24">
+          <ValueField.Scrubber>
+            <ValueField.Label>
+              <OpacityIcon size="4" />
+            </ValueField.Label>
+          </ValueField.Scrubber>
+          <ValueField.Numeric
+            value={opacity}
+            onChange={setOpacity}
+            min={0}
+            max={100}
+            suffix="%"
+            precision={0}
+          />
+        </ValueField.Root>
+        <ValueField.NumericSelect
+          value={size}
+          onChange={setSize}
+          options={FONT_SIZES}
+          className="w-24"
+          min={0}
+          precision={0}
+        />
+      </Demo>
+      <Demo label="Hex and alpha">
+        <div className="w-52">
+          <ValueField.Multi>
+            <ValueField.Root>
+              <ValueField.Hex
+                value={rgba}
+                onChange={setRgba}
+              />
+            </ValueField.Root>
+            <ValueField.Root style={{ flex: '0 0 62px' }}>
+              <ValueField.Numeric
+                value={rgba.a}
+                onChange={(a) => setRgba((current) => ({ ...current, a }))}
+                min={0}
+                max={1}
+                targetRange={[0, 100]}
+                allowedUnits={['%']}
+                precision={2}
+              />
+              <ValueField.Label>%</ValueField.Label>
+            </ValueField.Root>
+          </ValueField.Multi>
+        </div>
+      </Demo>
+      <Demo label="Variable chips">
+        <VariableChip>24</VariableChip>
+        <VariableChip selected>24</VariableChip>
+        <VariableChip onSelected>24</VariableChip>
+        <VariableChip variant="sunken">24</VariableChip>
+        <VariableChip disabled>24</VariableChip>
+        <VariableChip
+          variant="sunken"
+          disabled
+        >
+          24
+        </VariableChip>
+        <VariableCell>Value</VariableCell>
+        <span className="inline-flex items-center gap-1 text-figma-secondary">
+          <LinkBrokenIcon size="4" /> detached
+        </span>
+      </Demo>
+    </>
+  );
+}
+
+export { Inputs, Selects, ValueFields };
diff --git a/playground/src/sections/overlays.tsx b/playground/src/sections/overlays.tsx
new file mode 100644
index 0000000..1b6f015
--- /dev/null
+++ b/playground/src/sections/overlays.tsx
@@ -0,0 +1,341 @@
+import { useState } from 'react';
+
+import {
+  EllipsisIcon,
+  LinkIcon,
+  MailIcon,
+  PageIcon,
+  PhoneIcon,
+  PlayIcon,
+} from '@thinkbuff/figma-react';
+import { ActionIcon } from '@thinkbuff/figma-react/action-icon';
+import { AlertDialog } from '@thinkbuff/figma-react/alert-dialog';
+import { Button } from '@thinkbuff/figma-react/button';
+import { ContextMenu } from '@thinkbuff/figma-react/context-menu';
+import { Dialog } from '@thinkbuff/figma-react/dialog';
+import { DropdownMenu } from '@thinkbuff/figma-react/dropdown-menu';
+import { Input } from '@thinkbuff/figma-react/input';
+import { Label } from '@thinkbuff/figma-react/label';
+import {
+  LinkTooltip,
+  LinkTooltipAction,
+  LinkTooltipInput,
+  LinkTooltipItem,
+} from '@thinkbuff/figma-react/link-tooltip';
+import * as Popover from '@thinkbuff/figma-react/popover';
+import { Sheet } from '@thinkbuff/figma-react/sheet';
+import { Tooltip } from '@thinkbuff/figma-react/tooltip';
+import { cn } from '@thinkbuff/figma-react/utils';
+
+import { Demo } from '../demo';
+
+function Menus() {
+  const [bookmarks, setBookmarks] = useState(true);
+  const [person, setPerson] = useState('pedro');
+
+  return (
+    <>
+      <Demo label="Dropdown menu">
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger
+            render={
+              <ActionIcon aria-label="Open menu">
+                <EllipsisIcon size="4" />
+              </ActionIcon>
+            }
+          />
+          <DropdownMenu.Content className="min-w-60">
+            <DropdownMenu.Item>
+              New Tab <DropdownMenu.ItemShortcut>⌘+T</DropdownMenu.ItemShortcut>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item>
+              New Window <DropdownMenu.ItemShortcut>⌘+N</DropdownMenu.ItemShortcut>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item disabled>
+              New Private Window <DropdownMenu.ItemShortcut>⇧+⌘+N</DropdownMenu.ItemShortcut>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item>
+              File Menu <DropdownMenu.ItemBadge>Menu</DropdownMenu.ItemBadge>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item>
+              Selected <DropdownMenu.ItemCheck />
+            </DropdownMenu.Item>
+            <DropdownMenu.Sub>
+              <DropdownMenu.SubTrigger>More Tools</DropdownMenu.SubTrigger>
+              <DropdownMenu.SubContent className="min-w-40">
+                <DropdownMenu.Item>
+                  Save Page As <DropdownMenu.ItemShortcut>⌘+S</DropdownMenu.ItemShortcut>
+                </DropdownMenu.Item>
+                <DropdownMenu.Item>Create Shortcut</DropdownMenu.Item>
+                <DropdownMenu.Item>Name Window</DropdownMenu.Item>
+                <DropdownMenu.Separator />
+                <DropdownMenu.Item>Developer Tools</DropdownMenu.Item>
+              </DropdownMenu.SubContent>
+            </DropdownMenu.Sub>
+            <DropdownMenu.Separator />
+            <DropdownMenu.CheckboxItem
+              checked={bookmarks}
+              onCheckedChange={setBookmarks}
+            >
+              Show Bookmarks <span className="ml-auto">⌘+B</span>
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.ItemSwitch defaultChecked>Toggle row</DropdownMenu.ItemSwitch>
+            <DropdownMenu.Separator />
+            <DropdownMenu.RadioGroup
+              value={person}
+              onValueChange={setPerson}
+            >
+              <DropdownMenu.Label>People</DropdownMenu.Label>
+              <DropdownMenu.RadioItem value="pedro">Eleven Zhang</DropdownMenu.RadioItem>
+              <DropdownMenu.RadioItem value="colm">Jerry Zhang</DropdownMenu.RadioItem>
+            </DropdownMenu.RadioGroup>
+            <DropdownMenu.Arrow />
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </Demo>
+      <Demo label="Context menu">
+        <ContextMenu.Root>
+          <ContextMenu.Trigger
+            render={
+              <div
+                className={cn(
+                  'flex h-20 w-56 items-center justify-center rounded-figma-md',
+                  'border border-figma-border text-figma-secondary',
+                )}
+              >
+                Right click here
+              </div>
+            }
+          />
+          <ContextMenu.Content className="min-w-50">
+            <ContextMenu.Item>Paste here</ContextMenu.Item>
+            <ContextMenu.Separator />
+            <ContextMenu.Item>Show/Hide UI</ContextMenu.Item>
+            <ContextMenu.Item>Show/Hide comments</ContextMenu.Item>
+            <ContextMenu.Separator />
+            <ContextMenu.Sub>
+              <ContextMenu.SubTrigger>Plugins</ContextMenu.SubTrigger>
+              <ContextMenu.SubContent className="min-w-50">
+                <ContextMenu.Group>
+                  <ContextMenu.Label>Recents</ContextMenu.Label>
+                  <ContextMenu.Item>OkColor</ContextMenu.Item>
+                  <ContextMenu.Item>Noise & Texture</ContextMenu.Item>
+                </ContextMenu.Group>
+                <ContextMenu.Separator />
+                <ContextMenu.Item>Run last plugin</ContextMenu.Item>
+                <ContextMenu.Item>Manage plugins…</ContextMenu.Item>
+              </ContextMenu.SubContent>
+            </ContextMenu.Sub>
+          </ContextMenu.Content>
+        </ContextMenu.Root>
+      </Demo>
+    </>
+  );
+}
+
+function Dialogs() {
+  return (
+    <Demo label="Dialog, alert dialog, and sheet">
+      <Dialog.Root>
+        <Dialog.Trigger render={<Button variant="secondary">Edit profile</Button>} />
+        <Dialog.Content>
+          <Dialog.Header className="justify-between">
+            <Dialog.Title>Edit profile</Dialog.Title>
+            <Dialog.Close
+              render={
+                <ActionIcon aria-label="Close">
+                  <EllipsisIcon size="4" />
+                </ActionIcon>
+              }
+            />
+          </Dialog.Header>
+          <Dialog.Section>
+            <Dialog.Description>
+              Make changes to your profile here. Click save when you are done.
+            </Dialog.Description>
+          </Dialog.Section>
+          <Dialog.Section className="grid gap-4">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label
+                htmlFor="dialog-name"
+                className="text-right"
+              >
+                Name
+              </Label>
+              <Input
+                id="dialog-name"
+                defaultValue="Eleven"
+                variant="border"
+                wrapperProps={{ className: 'col-span-3' }}
+              />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label
+                htmlFor="dialog-username"
+                className="text-right"
+              >
+                Username
+              </Label>
+              <Input
+                id="dialog-username"
+                defaultValue="@eteplus"
+                variant="border"
+                wrapperProps={{ className: 'col-span-3' }}
+              />
+            </div>
+          </Dialog.Section>
+          <Dialog.Footer className="justify-end gap-2">
+            <Dialog.Close render={<Button variant="secondary">Cancel</Button>} />
+            <Dialog.Close render={<Button>Save changes</Button>} />
+          </Dialog.Footer>
+        </Dialog.Content>
+      </Dialog.Root>
+      <AlertDialog.Root>
+        <AlertDialog.Trigger
+          render={<Button variant="secondary-destructive">Delete account</Button>}
+        />
+        <AlertDialog.Content>
+          <AlertDialog.Header>
+            <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
+          </AlertDialog.Header>
+          <AlertDialog.Description>
+            This action cannot be undone. This will permanently delete your account and remove your
+            data from our servers.
+          </AlertDialog.Description>
+          <AlertDialog.Footer className="justify-end gap-2">
+            <AlertDialog.Cancel render={<Button variant="secondary">Cancel</Button>} />
+            <AlertDialog.Action
+              render={<Button variant="destructive">Yes, delete account</Button>}
+            />
+          </AlertDialog.Footer>
+        </AlertDialog.Content>
+      </AlertDialog.Root>
+      <Sheet.Root>
+        <Sheet.Trigger render={<Button variant="secondary">Open sheet</Button>} />
+        <Sheet.Content side="right">
+          <Sheet.Header className="justify-between">
+            <Sheet.Title>Details</Sheet.Title>
+            <Sheet.Close
+              render={
+                <ActionIcon
+                  aria-label="Close"
+                  className="-mr-2"
+                >
+                  <EllipsisIcon size="4" />
+                </ActionIcon>
+              }
+            />
+          </Sheet.Header>
+          <div className="grid gap-4 p-4">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label
+                htmlFor="sheet-name"
+                className="text-right"
+              >
+                Name
+              </Label>
+              <Input
+                id="sheet-name"
+                defaultValue="Eleven"
+                variant="border"
+                className="col-span-3"
+              />
+            </div>
+          </div>
+          <Sheet.Footer className="justify-end">
+            <Sheet.Close render={<Button className="h-7">Done</Button>} />
+          </Sheet.Footer>
+        </Sheet.Content>
+      </Sheet.Root>
+    </Demo>
+  );
+}
+
+function Popovers() {
+  return (
+    <>
+      <Demo label="Popover">
+        <Popover.Root>
+          <Popover.Trigger render={<Button variant="secondary">Dimensions</Button>} />
+          <Popover.Content className="w-60 p-4">
+            <div className="grid gap-4">
+              <h3 className="font-figma-strong leading-none">Dimensions</h3>
+              <div className="grid gap-1">
+                {[
+                  ['width', 'Width', '100%'],
+                  ['maxWidth', 'Max. width', '300px'],
+                  ['height', 'Height', '25px'],
+                  ['maxHeight', 'Max. height', 'none'],
+                ].map(([id, label, value]) => (
+                  <div
+                    key={id}
+                    className="grid grid-cols-3 items-center gap-1"
+                  >
+                    <Label htmlFor={`popover-${id}`}>{label}</Label>
+                    <Input
+                      id={`popover-${id}`}
+                      defaultValue={value}
+                      className="col-span-2"
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+            <Popover.Arrow />
+          </Popover.Content>
+        </Popover.Root>
+      </Demo>
+      <Demo label="Tooltip">
+        <Tooltip
+          content="Open settings"
+          side="top"
+        >
+          <ActionIcon aria-label="Settings">
+            <EllipsisIcon size="4" />
+          </ActionIcon>
+        </Tooltip>
+        <Tooltip
+          content="Paste"
+          hotkey="⌘V"
+          side="top"
+        >
+          <ActionIcon aria-label="Paste">
+            <PageIcon size="4" />
+          </ActionIcon>
+        </Tooltip>
+      </Demo>
+      <Demo label="Link tooltip">
+        <LinkTooltip arrow>
+          <LinkTooltipInput placeholder="Type or paste URL" />
+        </LinkTooltip>
+        <LinkTooltip arrow>
+          <LinkTooltipItem icon={<LinkIcon size="4" />}>
+            <LinkTooltipAction>Open google.com</LinkTooltipAction>
+            <LinkTooltipAction>Edit</LinkTooltipAction>
+          </LinkTooltipItem>
+        </LinkTooltip>
+        <LinkTooltip arrow>
+          <LinkTooltipItem icon={<PhoneIcon size="4" />}>
+            <LinkTooltipAction>Call (415) 355-0394</LinkTooltipAction>
+            <LinkTooltipAction>Edit</LinkTooltipAction>
+          </LinkTooltipItem>
+        </LinkTooltip>
+        <LinkTooltip arrow>
+          <LinkTooltipItem icon={<MailIcon size="4" />}>
+            <LinkTooltipAction>Copy mail@mail.com</LinkTooltipAction>
+            <LinkTooltipAction>Send mail</LinkTooltipAction>
+            <LinkTooltipAction>Edit</LinkTooltipAction>
+          </LinkTooltipItem>
+        </LinkTooltip>
+        <LinkTooltip arrow>
+          <LinkTooltipItem icon={<PlayIcon size="4" />}>
+            <LinkTooltipAction>Open prototype</LinkTooltipAction>
+            <LinkTooltipAction>Edit</LinkTooltipAction>
+          </LinkTooltipItem>
+        </LinkTooltip>
+      </Demo>
+    </>
+  );
+}
+
+export { Dialogs, Menus, Popovers };
diff --git a/playground/src/sections/sliders.tsx b/playground/src/sections/sliders.tsx
new file mode 100644
index 0000000..2664dbc
--- /dev/null
+++ b/playground/src/sections/sliders.tsx
@@ -0,0 +1,161 @@
+import { useState } from 'react';
+
+import {
+  Slider,
+  SliderRoot,
+  SliderRange,
+  SliderThumb,
+  SliderTrack,
+} from '@thinkbuff/figma-react/slider';
+import { Swatch } from '@thinkbuff/figma-react/swatch';
+import { Tooltip } from '@thinkbuff/figma-react/tooltip';
+
+import { Demo } from '../demo';
+
+type SliderProps = React.ComponentPropsWithRef<typeof Slider>;
+
+function SliderDemo(props: SliderProps) {
+  const [value, setValue] = useState(props.defaultValue ?? props.value ?? [50]);
+  return (
+    <div className={props.orientation === 'vertical' ? 'h-full' : 'w-52'}>
+      <Slider
+        {...props}
+        value={value}
+        onValueChange={(next) => setValue(next as number[])}
+      />
+    </div>
+  );
+}
+
+function TooltipSlider() {
+  const [values, setValues] = useState([20]);
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  return (
+    <div className="w-52">
+      <SliderRoot
+        value={values}
+        onValueChange={(next) => setValues(next as number[])}
+      >
+        <SliderTrack>
+          <SliderRange />
+        </SliderTrack>
+        {values.map((value, index) => (
+          <Tooltip
+            // oxlint-disable-next-line react/no-array-index-key
+            key={index}
+            open={showTooltip}
+            content={<p>{value}</p>}
+            delay={200}
+          >
+            <SliderThumb
+              onMouseOver={() => setShowTooltip(true)}
+              onMouseOut={() => setShowTooltip(false)}
+            />
+          </Tooltip>
+        ))}
+      </SliderRoot>
+    </div>
+  );
+}
+
+function Sliders() {
+  return (
+    <>
+      <Demo label="Basic">
+        <SliderDemo defaultValue={[50]} />
+        <SliderDemo defaultValue={[0]} />
+        <SliderDemo defaultValue={[0, 60]} />
+        <SliderDemo defaultValue={[20, 60]} />
+        <SliderDemo
+          defaultValue={[50]}
+          disabled
+        />
+        <div className="flex h-40 items-center gap-4">
+          <SliderDemo
+            orientation="vertical"
+            defaultValue={[50]}
+          />
+          <SliderDemo
+            orientation="vertical"
+            defaultValue={[0]}
+          />
+          <SliderDemo
+            orientation="vertical"
+            defaultValue={[0, 60]}
+          />
+        </div>
+      </Demo>
+      <Demo label="Hints and delta">
+        <SliderDemo
+          defaultValue={[50]}
+          hints={[0, 25, 50, 75, 100]}
+        />
+        <SliderDemo
+          defaultValue={[62]}
+          hints={[0, 25, 50, 75, 100]}
+          baseValue={50}
+        />
+        <SliderDemo
+          defaultValue={[50]}
+          modified
+        />
+      </Demo>
+      <Demo label="Color">
+        <SliderDemo
+          variant="hue"
+          defaultValue={[210]}
+          max={360}
+        />
+        <SliderDemo
+          variant="opacity"
+          fill="#9747ff"
+          defaultValue={[60]}
+        />
+        <SliderDemo
+          variant="gradient"
+          fill="linear-gradient(to right, rgba(151, 71, 255, 0), #9747ff)"
+          thumbFills={['rgba(151, 71, 255, 0.4)', '#9747ff']}
+          defaultValue={[20, 80]}
+        />
+      </Demo>
+      <Demo label="Composed with tooltip">
+        <TooltipSlider />
+      </Demo>
+    </>
+  );
+}
+
+function Swatches() {
+  return (
+    <>
+      <Demo label="Fills">
+        <Swatch fill="#ff24bd" />
+        <Swatch fill="rgba(255, 36, 189, 0.4)" />
+        <Swatch fill="linear-gradient(90deg, #ff24bd, #007be5)" />
+        <Swatch fill="conic-gradient(#f24822, #ffcd29, #14ae5c, #007be5, #9747ff, #f24822)" />
+        <Swatch fill="repeating-linear-gradient(45deg, #1e1e1e 0 4px, #ffcd29 4px 8px)" />
+      </Demo>
+      <Demo label="Opacity and circle">
+        <Swatch
+          type="opacity"
+          fill="#ff24bd"
+        />
+        <Swatch
+          type="opacity"
+          fill="linear-gradient(90deg, #ff24bd, #007be5)"
+        />
+        <Swatch
+          shape="circle"
+          fill="#ff24bd"
+        />
+        <Swatch
+          shape="circle"
+          fill="conic-gradient(#f24822, #ffcd29, #14ae5c, #007be5, #9747ff, #f24822)"
+        />
+      </Demo>
+    </>
+  );
+}
+
+export { Sliders, Swatches };
diff --git a/playground/unocss.config.ts b/playground/unocss.config.ts
deleted file mode 100644
index b0b5aaa..0000000
--- a/playground/unocss.config.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import {
-  defineConfig,
-  presetWind3,
-  presetIcons,
-  transformerVariantGroup,
-} from 'unocss';
-import presetRemToPx from '@unocss/preset-rem-to-px';
-import presetAnimations from 'unocss-preset-animations';
-import { presetFigmaTheme } from '@thinkbuff/figma-theme/unocss';
-
-export default defineConfig({
-  content: {
-    pipeline: {
-      include: [
-        'src/**/*.tsx',
-        /(.*)(\/)?figma(-|\/packages\/)?react(.*)\.(c|m)?(js)(x?)$/,
-      ],
-    },
-  },
-  presets: [
-    presetWind3({
-      dark: {
-        light: '.figma-light',
-        dark: '.figma-dark',
-      },
-    }),
-    presetFigmaTheme(),
-    presetAnimations(),
-    presetRemToPx(),
-    presetIcons({
-      cdn: 'https://esm.sh/',
-    }),
-  ],
-  transformers: [transformerVariantGroup()],
-});
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
index f440591..fcef958 100644
--- a/playground/vite.config.ts
+++ b/playground/vite.config.ts
@@ -1,8 +1,12 @@
-import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import unocss from 'unocss/vite';
+import { defineConfig } from 'vite-plus';
+
+import tailwindcss from '@tailwindcss/vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), unocss()],
+  // Relative base keeps the build mountable at any subpath (GitHub Pages
+  // serves it from /figma/playground/).
+  base: './',
+  plugins: [react(), tailwindcss()],
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 113bd8c..74f4b26 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,222 +1,458 @@
+---
+lockfileVersion: '9.0'
+
+importers:
+
+  .:
+    configDependencies: {}
+    packageManagerDependencies:
+      pnpm:
+        specifier: 12.15.0
+        version: 12.15.0
+
+packages:
+
+  '@pnpm/exe.android-arm64@12.15.0':
+    resolution: {integrity: sha512-eVCqmscY70LGvgRzu3mi8IBWBFGix+a6mNZoWmXxESsBdeiKEF9xQSuaeel10yn+zI7TXy2jlI63vFLzETk+aQ==}
+    cpu: [arm64]
+    os: [android]
+
+  '@pnpm/exe.android-x64@12.15.0':
+    resolution: {integrity: sha512-Gx/WbkFcdUFUg8g8AShezcS9EiQxfYvdAm2hfKLO8sfJmJvKOCt5fzlgHWDzmGhoclibgW+tUGZ/KF4F4wOTCA==}
+    cpu: [x64]
+    os: [android]
+
+  '@pnpm/exe.darwin-arm64@12.15.0':
+    resolution: {integrity: sha512-N0ZykiDWCvqSBJvt71j7cSoBR993FqvYZFtmpCtqvW3pguiI+NAgraLPA5OTwu5mV+/d8hYpVcPktJA3xFDLtA==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@pnpm/exe.darwin-x64@12.15.0':
+    resolution: {integrity: sha512-7Ntr2HlBUxzwWOg7NwDxCbRW/3vXuqKO+hcXm+w3SBi9rrHY53li1wLqWVT7Gjxd+lVEHM1QJZo6WJEGFU8C6A==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@pnpm/exe.freebsd-x64@12.15.0':
+    resolution: {integrity: sha512-btOiyL7fL7W4uQGH0aqFai2TNC3IoKcZ7gNHBVbEFZt2dWrnrD0SufL3iGs3fLlmb4OtuU35uf4Zpr9V9Jh9mA==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@pnpm/exe.linux-arm64-musl@12.15.0':
+    resolution: {integrity: sha512-pNC38k+O+90FOjbPNSnw0E7apq1PKTmz3fFe1amn+lys/U5kL++uzir8bRiho8ONcyA3d9EU7wdqcY0DKkj+JA==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@pnpm/exe.linux-arm64@12.15.0':
+    resolution: {integrity: sha512-qML/8aCXslh8td/w4U+HJNqUcZ2+m6EfTbWScIzZRmyPsRFN+xB4LP1U/hymxc1iSJiKtG56HJx2fvUErWFIGw==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@pnpm/exe.linux-ppc64@12.15.0':
+    resolution: {integrity: sha512-tjRDUUl7RCJ6T/6eoNPxOqkwU4Mzi5RtTXmSAxujyz37OTwwsMU7Ps087Zk4gHcUvRSeyF40ZFsew3vtE+nmUA==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@pnpm/exe.linux-riscv64@12.15.0':
+    resolution: {integrity: sha512-bF1uBWEfbwaeryz6lIiaJ8AWD082otZfvzGX5l+6LZRpRwUEpJHUsJrORaYP5/cNMv5ZR2p6TvvcJcQzwtDzmw==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@pnpm/exe.linux-s390x@12.15.0':
+    resolution: {integrity: sha512-zKMhIzsexYMToeLmqV5jPsvV/f9vwsJb2kUH2NFYzalbxImeBrlA4kL7GwF8gD4pagV6jYYcJb8RjbZIdjHptg==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@pnpm/exe.linux-x64-musl@12.15.0':
+    resolution: {integrity: sha512-A9J0Jg0Rdx+qQU4qXtwyST5tto9IOu1zi4fDk35nbc6DWahggbcKtFvZPKFwL2qgUXGXOX//hXv6z/sp6emO8A==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@pnpm/exe.linux-x64@12.15.0':
+    resolution: {integrity: sha512-yc+QlZR+9+nr29J4fRzhMoapgxTBDndq/+peyoq1XUufnQFnfbXUMFudDIKzHi545linGqmOmXfn0NoufNgcOg==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@pnpm/exe.win32-arm64@12.15.0':
+    resolution: {integrity: sha512-fPXZxuY1VclkOga9bc53qNCXcegfeoBR8+Ue+AospDwKzuGGSHll0oDxkLfkmpjyRqpe7bH5DyQPYp/xSMaIVA==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@pnpm/exe.win32-x64@12.15.0':
+    resolution: {integrity: sha512-nrd+Tp1We1DGj4DGG5Bea9lZNh9y1PjlLBdEwdInS4D0h0UIDtM7JaGGGDJhNzIwcHASyihWI7HLV+dtG+fhYg==}
+    cpu: [x64]
+    os: [win32]
+
+  pnpm@12.15.0:
+    resolution: {integrity: sha512-s5UdbW/0qfE9x89WzSjSuOs328ycaOUuHhGRhz6p+CoBcoerULqtxczElPA2xnwOR+sTYIwvo29HcRth6hKOYQ==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+snapshots:
+
+  '@pnpm/exe.android-arm64@12.15.0':
+    optional: true
+
+  '@pnpm/exe.android-x64@12.15.0':
+    optional: true
+
+  '@pnpm/exe.darwin-arm64@12.15.0':
+    optional: true
+
+  '@pnpm/exe.darwin-x64@12.15.0':
+    optional: true
+
+  '@pnpm/exe.freebsd-x64@12.15.0':
+    optional: true
+
+  '@pnpm/exe.linux-arm64-musl@12.15.0':
+    optional: true
+
+  '@pnpm/exe.linux-arm64@12.15.0':
+    optional: true
+
+  '@pnpm/exe.linux-ppc64@12.15.0':
+    optional: true
+
+  '@pnpm/exe.linux-riscv64@12.15.0':
+    optional: true
+
+  '@pnpm/exe.linux-s390x@12.15.0':
+    optional: true
+
+  '@pnpm/exe.linux-x64-musl@12.15.0':
+    optional: true
+
+  '@pnpm/exe.linux-x64@12.15.0':
+    optional: true
+
+  '@pnpm/exe.win32-arm64@12.15.0':
+    optional: true
+
+  '@pnpm/exe.win32-x64@12.15.0':
+    optional: true
+
+  pnpm@12.15.0:
+    optionalDependencies:
+      '@pnpm/exe.android-arm64': 12.15.0
+      '@pnpm/exe.android-x64': 12.15.0
+      '@pnpm/exe.darwin-arm64': 12.15.0
+      '@pnpm/exe.darwin-x64': 12.15.0
+      '@pnpm/exe.freebsd-x64': 12.15.0
+      '@pnpm/exe.linux-arm64': 12.15.0
+      '@pnpm/exe.linux-arm64-musl': 12.15.0
+      '@pnpm/exe.linux-ppc64': 12.15.0
+      '@pnpm/exe.linux-riscv64': 12.15.0
+      '@pnpm/exe.linux-s390x': 12.15.0
+      '@pnpm/exe.linux-x64': 12.15.0
+      '@pnpm/exe.linux-x64-musl': 12.15.0
+      '@pnpm/exe.win32-arm64': 12.15.0
+      '@pnpm/exe.win32-x64': 12.15.0
+
+---
 lockfileVersion: '9.0'
 
 settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+catalogs:
+  cli:
+    '@commitlint/cli':
+      specifier: ^21.2.4
+      version: 21.2.4
+    '@commitlint/config-conventional':
+      specifier: ^21.2.4
+      version: 21.2.4
+    changelogen:
+      specifier: ^0.6.2
+      version: 0.6.2
+    simple-git-hooks:
+      specifier: ^2.14.0
+      version: 2.14.0
+    taze:
+      specifier: ^21.3.0
+      version: 21.3.0
+    tsx:
+      specifier: ^4.23.15
+      version: 4.23.15
+  figma:
+    '@figma/plugin-typings':
+      specifier: ^1.142.0
+      version: 1.142.0
+    '@figma/widget-typings':
+      specifier: ^1.13.0
+      version: 1.13.0
+  iconify:
+    '@iconify-json/mdi':
+      specifier: ^1.2.3
+      version: 1.2.3
+    '@iconify-json/tabler':
+      specifier: ^1.2.42
+      version: 1.2.42
+    '@iconify/tailwind4':
+      specifier: ^1.2.3
+      version: 1.2.3
+  react:
+    '@base-ui/react':
+      specifier: 1.9.0
+      version: 1.9.0
+    '@types/react':
+      specifier: ^19.3.0
+      version: 19.3.0
+    '@types/react-dom':
+      specifier: ^19.3.0
+      version: 19.3.0
+    '@vitejs/plugin-react':
+      specifier: ^6.1.2
+      version: 6.1.2
+    react:
+      specifier: ^19.3.1
+      version: 19.3.1
+    react-dom:
+      specifier: ^19.3.1
+      version: 19.3.1
+    sonner:
+      specifier: ^2.0.8
+      version: 2.0.8
+  runtime:
+    '@emmetio/math-expression':
+      specifier: ^1.0.5
+      version: 1.0.5
+    eventemitter3:
+      specifier: ^5.0.4
+      version: 5.0.4
+  storybook:
+    '@storybook/addon-docs':
+      specifier: 10.6.3
+      version: 10.6.3
+    '@storybook/react-vite':
+      specifier: 10.6.3
+      version: 10.6.3
+    storybook:
+      specifier: 10.6.3
+      version: 10.6.3
+  tailwind:
+    '@tailwindcss/vite':
+      specifier: ^4.3.3
+      version: 4.3.3
+    class-variance-authority:
+      specifier: ^0.7.1
+      version: 0.7.1
+    clsx:
+      specifier: ^2.1.1
+      version: 2.1.1
+    tailwind-merge:
+      specifier: ^3.7.0
+      version: 3.7.0
+    tailwindcss:
+      specifier: ^4.3.3
+      version: 4.3.3
+  test:
+    '@vitest/browser':
+      specifier: 5.0.5
+      version: 5.0.5
+    '@vitest/browser-playwright':
+      specifier: 5.0.5
+      version: 5.0.5
+    playwright:
+      specifier: 1.64.1
+      version: 1.64.1
+    vitest:
+      specifier: 5.0.5
+      version: 5.0.5
+    vitest-browser-react:
+      specifier: 2.3.0
+      version: 2.3.0
+  toolchain:
+    glob:
+      specifier: ^13.0.6
+      version: 13.0.6
+    typescript:
+      specifier: ^7.0.2
+      version: 7.0.2
+    vite:
+      specifier: npm:@voidzero-dev/vite-plus-core@1.4.0
+      version: 1.4.0
+    vite-plus:
+      specifier: 1.4.0
+      version: 1.4.0
+  types:
+    '@types/node':
+      specifier: ^24.19.2
+      version: 24.19.2
+    type-fest:
+      specifier: ^5.10.0
+      version: 5.10.0
+
 importers:
 
   .:
     devDependencies:
-      '@eslint-react/eslint-plugin':
-        specifier: ^1.49.0
-        version: 1.49.0(eslint@9.27.0(jiti@2.4.2))(ts-api-utils@2.1.0(typescript@5.8.3))(typescript@5.8.3)
-      '@thinkbuff/eslint-config':
-        specifier: ^0.2.7
-        version: 0.2.7(@eslint-react/eslint-plugin@1.49.0(eslint@9.27.0(jiti@2.4.2))(ts-api-utils@2.1.0(typescript@5.8.3))(typescript@5.8.3))(@unocss/eslint-plugin@66.1.2(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3))(eslint-plugin-react-hooks@5.2.0(eslint@9.27.0(jiti@2.4.2)))(eslint-plugin-react-refresh@0.4.20(eslint@9.27.0(jiti@2.4.2)))(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
+      '@commitlint/cli':
+        specifier: catalog:cli
+        version: 21.2.4(conventional-commits-parser@7.1.3)(typescript@7.0.2)
+      '@commitlint/config-conventional':
+        specifier: catalog:cli
+        version: 21.2.4
       '@types/node':
-        specifier: ^22.15.18
-        version: 22.15.18
-      '@unocss/eslint-plugin':
-        specifier: ^66.1.2
-        version: 66.1.2(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
+        specifier: catalog:types
+        version: 24.19.2
       changelogen:
-        specifier: ^0.6.1
-        version: 0.6.1
-      eslint:
-        specifier: ^9.27.0
-        version: 9.27.0(jiti@2.4.2)
-      eslint-plugin-react-hooks:
-        specifier: ^5.2.0
-        version: 5.2.0(eslint@9.27.0(jiti@2.4.2))
-      eslint-plugin-react-refresh:
-        specifier: ^0.4.20
-        version: 0.4.20(eslint@9.27.0(jiti@2.4.2))
-      eslint-plugin-storybook:
-        specifier: ^0.12.0
-        version: 0.12.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
+        specifier: catalog:cli
+        version: 0.6.2
       glob:
-        specifier: ^11.0.2
-        version: 11.0.2
-      lint-staged:
-        specifier: ^16.0.0
-        version: 16.0.0
+        specifier: catalog:toolchain
+        version: 13.0.6
       simple-git-hooks:
-        specifier: ^2.13.0
-        version: 2.13.0
+        specifier: catalog:cli
+        version: 2.14.0
+      taze:
+        specifier: catalog:cli
+        version: 21.3.0
       tsx:
-        specifier: ^4.19.4
-        version: 4.19.4
+        specifier: catalog:cli
+        version: 4.23.15
       typescript:
-        specifier: ^5.8.3
-        version: 5.8.3
+        specifier: catalog:toolchain
+        version: 7.0.2
+      vite-plus:
+        specifier: catalog:toolchain
+        version: 1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)
 
   packages/react:
     dependencies:
-      '@radix-ui/react-alert-dialog':
-        specifier: ^1.1.13
-        version: 1.1.13(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-checkbox':
-        specifier: ^1.3.1
-        version: 1.3.1(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-dialog':
-        specifier: ^1.1.13
-        version: 1.1.13(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-dropdown-menu':
-        specifier: ^2.1.14
-        version: 2.1.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-label':
-        specifier: ^2.1.6
-        version: 2.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-popover':
-        specifier: ^1.1.13
-        version: 1.1.13(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-radio-group':
-        specifier: ^1.3.6
-        version: 1.3.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-scroll-area':
-        specifier: ^1.2.8
-        version: 1.2.8(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-select':
-        specifier: ^2.2.4
-        version: 2.2.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-separator':
-        specifier: ^1.1.6
-        version: 1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-slider':
-        specifier: ^1.3.4
-        version: 1.3.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-slot':
-        specifier: ^1.2.2
-        version: 1.2.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-switch':
-        specifier: ^1.2.4
-        version: 1.2.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-tabs':
-        specifier: ^1.1.11
-        version: 1.1.11(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-toggle':
-        specifier: ^1.1.8
-        version: 1.1.8(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-toggle-group':
-        specifier: ^1.1.9
-        version: 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-tooltip':
-        specifier: ^1.2.6
-        version: 1.2.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@base-ui/react':
+        specifier: catalog:react
+        version: 1.9.0(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
+      '@emmetio/math-expression':
+        specifier: catalog:runtime
+        version: 1.0.5
+      '@thinkbuff/figma-theme':
+        specifier: workspace:^
+        version: link:../theme
       '@types/react':
         specifier: '*'
-        version: 19.1.4
+        version: 19.3.0
       '@types/react-dom':
         specifier: '*'
-        version: 19.1.5(@types/react@19.1.4)
+        version: 19.3.0(@types/react@19.3.0)
       class-variance-authority:
-        specifier: ^0.7.1
+        specifier: catalog:tailwind
         version: 0.7.1
       clsx:
-        specifier: ^2.1.1
+        specifier: catalog:tailwind
         version: 2.1.1
       sonner:
-        specifier: ^2.0.3
-        version: 2.0.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+        specifier: catalog:react
+        version: 2.0.8(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
       tailwind-merge:
-        specifier: ^3.3.0
-        version: 3.3.0
+        specifier: catalog:tailwind
+        version: 3.7.0
     devDependencies:
-      '@chromatic-com/storybook':
-        specifier: ^3.2.6
-        version: 3.2.6(react@19.1.0)(storybook@8.6.14)
-      '@storybook/addon-essentials':
-        specifier: ^8.6.14
-        version: 8.6.14(@types/react@19.1.4)(storybook@8.6.14)
-      '@storybook/addon-interactions':
-        specifier: ^8.6.14
-        version: 8.6.14(storybook@8.6.14)
-      '@storybook/addon-links':
-        specifier: ^8.6.14
-        version: 8.6.14(react@19.1.0)(storybook@8.6.14)
-      '@storybook/addon-onboarding':
-        specifier: ^8.6.14
-        version: 8.6.14(storybook@8.6.14)
-      '@storybook/blocks':
-        specifier: ^8.6.14
-        version: 8.6.14(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@8.6.14)
-      '@storybook/react':
-        specifier: ^8.6.14
-        version: 8.6.14(@storybook/test@8.6.14(storybook@8.6.14))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@8.6.14)(typescript@5.8.3)
+      '@iconify-json/mdi':
+        specifier: catalog:iconify
+        version: 1.2.3
+      '@iconify-json/tabler':
+        specifier: catalog:iconify
+        version: 1.2.42
+      '@iconify/tailwind4':
+        specifier: catalog:iconify
+        version: 1.2.3(tailwindcss@4.3.3)
+      '@storybook/addon-docs':
+        specifier: catalog:storybook
+        version: 10.6.3(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(storybook@10.6.3(@types/react@19.3.0)(react@19.3.1)(vite-plus@1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)))
       '@storybook/react-vite':
-        specifier: ^8.6.14
-        version: 8.6.14(@storybook/test@8.6.14(storybook@8.6.14))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(rollup@4.40.1)(storybook@8.6.14)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1))
-      '@storybook/test':
-        specifier: ^8.6.14
-        version: 8.6.14(storybook@8.6.14)
-      '@thinkbuff/figma-theme':
-        specifier: workspace:*
-        version: link:../theme
-      '@unocss/preset-rem-to-px':
-        specifier: ^66.1.2
-        version: 66.1.2
+        specifier: catalog:storybook
+        version: 10.6.3(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))(react-dom@19.3.1(react@19.3.1))(react@19.3.1)(rollup@4.40.1)(storybook@10.6.3(@types/react@19.3.0)(react@19.3.1)(vite-plus@1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)))(typescript@7.0.2)
+      '@tailwindcss/vite':
+        specifier: catalog:tailwind
+        version: 4.3.3(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))
       '@vitejs/plugin-react':
-        specifier: ^4.4.1
-        version: 4.4.1(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1))
+        specifier: catalog:react
+        version: 6.1.2(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))
+      '@vitest/browser':
+        specifier: catalog:test
+        version: 5.0.5(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))(vitest@5.0.5)
+      '@vitest/browser-playwright':
+        specifier: catalog:test
+        version: 5.0.5(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))(playwright@1.64.1)(vitest@5.0.5)
       glob:
-        specifier: ^11.0.2
-        version: 11.0.2
+        specifier: catalog:toolchain
+        version: 13.0.6
+      playwright:
+        specifier: catalog:test
+        version: 1.64.1
       react:
-        specifier: ^19.1.0
-        version: 19.1.0
+        specifier: catalog:react
+        version: 19.3.1
       react-dom:
-        specifier: ^19.1.0
-        version: 19.1.0(react@19.1.0)
+        specifier: catalog:react
+        version: 19.3.1(react@19.3.1)
       storybook:
-        specifier: ^8.6.14
-        version: 8.6.14
+        specifier: catalog:storybook
+        version: 10.6.3(@types/react@19.3.0)(react@19.3.1)(vite-plus@1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))
+      tailwindcss:
+        specifier: catalog:tailwind
+        version: 4.3.3
       typescript:
-        specifier: ^5.8.3
-        version: 5.8.3
-      unocss:
-        specifier: ^66.1.2
-        version: 66.1.2(postcss@8.5.3)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.3))
-      unocss-preset-animations:
-        specifier: ^1.2.1
-        version: 1.2.1(@unocss/preset-wind3@66.1.2)(unocss@66.1.2(postcss@8.5.3)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.3)))
+        specifier: catalog:toolchain
+        version: 7.0.2
       vite:
-        specifier: ^6.3.5
-        version: 6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1)
-      vite-plugin-dts:
-        specifier: ^4.5.4
-        version: 4.5.4(@types/node@22.15.18)(rollup@4.40.1)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1))
+        specifier: catalog:toolchain
+        version: '@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)'
+      vitest:
+        specifier: catalog:test
+        version: 5.0.5(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/browser-preview@5.0.5)(@vitest/ui@5.0.5)(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))
+      vitest-browser-react:
+        specifier: catalog:test
+        version: 2.3.0(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)(vitest@5.0.5)
 
   packages/theme:
     devDependencies:
-      unbuild:
-        specifier: ^3.5.0
-        version: 3.5.0(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3))
-      unocss:
-        specifier: ^66.1.2
-        version: 66.1.2(postcss@8.5.3)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.3))
+      tsx:
+        specifier: catalog:cli
+        version: 4.23.15
+      typescript:
+        specifier: catalog:toolchain
+        version: 7.0.2
+      vite-plus:
+        specifier: catalog:toolchain
+        version: 1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)
+      vitest:
+        specifier: catalog:test
+        version: 5.0.5(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/browser-preview@5.0.5)(@vitest/ui@5.0.5)(vite@6.4.5(@types/node@24.19.2)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.15)(yaml@2.9.1))
 
   packages/utils:
     dependencies:
       eventemitter3:
-        specifier: ^5.0.1
-        version: 5.0.1
+        specifier: catalog:runtime
+        version: 5.0.4
       type-fest:
-        specifier: ^4.41.0
-        version: 4.41.0
+        specifier: catalog:types
+        version: 5.10.0
     devDependencies:
       '@figma/plugin-typings':
-        specifier: ^1.112.0
-        version: 1.112.0
+        specifier: catalog:figma
+        version: 1.142.0
       '@figma/widget-typings':
-        specifier: ^1.11.0
-        version: 1.11.0(@figma/plugin-typings@1.112.0)
-      vite:
-        specifier: ^6.3.5
-        version: 6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1)
-      vite-plugin-dts:
-        specifier: ^4.5.4
-        version: 4.5.4(@types/node@22.15.18)(rollup@4.40.1)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1))
+        specifier: catalog:figma
+        version: 1.13.0(@figma/plugin-typings@1.142.0)
+      typescript:
+        specifier: catalog:toolchain
+        version: 7.0.2
+      vite-plus:
+        specifier: catalog:toolchain
+        version: 1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)
+      vitest:
+        specifier: catalog:test
+        version: 5.0.5(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/browser-preview@5.0.5)(@vitest/ui@5.0.5)(vite@6.4.5(@types/node@24.19.2)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.15)(yaml@2.9.1))
 
   playground:
     dependencies:
@@ -224,163 +460,276 @@ importers:
         specifier: workspace:*
         version: link:../packages/react
       react:
-        specifier: ^19.1.0
-        version: 19.1.0
+        specifier: catalog:react
+        version: 19.3.1
       react-dom:
-        specifier: ^19.1.0
-        version: 19.1.0(react@19.1.0)
+        specifier: catalog:react
+        version: 19.3.1(react@19.3.1)
     devDependencies:
+      '@tailwindcss/vite':
+        specifier: catalog:tailwind
+        version: 4.3.3(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))
       '@thinkbuff/figma-theme':
         specifier: workspace:*
         version: link:../packages/theme
       '@types/react':
-        specifier: ^19.1.4
-        version: 19.1.4
+        specifier: catalog:react
+        version: 19.3.0
       '@types/react-dom':
-        specifier: ^19.1.5
-        version: 19.1.5(@types/react@19.1.4)
-      '@unocss/preset-rem-to-px':
-        specifier: ^66.1.2
-        version: 66.1.2
+        specifier: catalog:react
+        version: 19.3.0(@types/react@19.3.0)
       '@vitejs/plugin-react':
-        specifier: ^4.4.1
-        version: 4.4.1(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1))
+        specifier: catalog:react
+        version: 6.1.2(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))
+      tailwindcss:
+        specifier: catalog:tailwind
+        version: 4.3.3
       typescript:
-        specifier: ^5.8.3
-        version: 5.8.3
-      unocss:
-        specifier: ^66.1.2
-        version: 66.1.2(postcss@8.5.3)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.3))
-      unocss-preset-animations:
-        specifier: ^1.2.1
-        version: 1.2.1(@unocss/preset-wind3@66.1.2)(unocss@66.1.2(postcss@8.5.3)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.3)))
+        specifier: catalog:toolchain
+        version: 7.0.2
       vite:
-        specifier: ^6.3.5
-        version: 6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1)
+        specifier: catalog:toolchain
+        version: '@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)'
+      vite-plus:
+        specifier: catalog:toolchain
+        version: 1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)
 
 packages:
 
   '@adobe/css-tools@4.4.2':
     resolution: {integrity: sha512-baYZExFpsdkBNuvGKTKWCwKH57HRZLVtycZS05WTQNVOiXVSeAki3nU35zlRbToeMW8aHlJfyS+1C4BOv27q0A==}
 
-  '@ampproject/remapping@2.3.0':
-    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
-    engines: {node: '>=6.0.0'}
-
-  '@antfu/install-pkg@1.1.0':
-    resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
+  '@antfu/install-pkg@2.1.0':
+    resolution: {integrity: sha512-sdg9NxU3zR4Mnawfbc/x6GB5Wf17WYud5qOuEuxXjaKpYpMkISSJEjItGebXJ2bQ4DIcly4NYH23mtkGJjvKUw==}
 
-  '@antfu/utils@8.1.1':
-    resolution: {integrity: sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==}
+  '@antfu/ni@30.6.0':
+    resolution: {integrity: sha512-vRZX+aPd9UzUMjsCeH0CR4ldbCwwGaKjbotF7PBRyZdbZRZJz3Em+HXUNaxGWcdajRpTBL1HQ0KECudftPs7CQ==}
+    engines: {node: '>=20.19.0'}
+    hasBin: true
 
   '@babel/code-frame@7.27.1':
     resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/compat-data@7.27.1':
-    resolution: {integrity: sha512-Q+E+rd/yBzNQhXkG+zQnF58e4zoZfBedaxwzPmicKsiK3nt8iJYrSrDbjwFFDGC4f+rPafqRaPH6TsDoSvMf7A==}
+  '@babel/code-frame@7.29.7':
+    resolution: {integrity: sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/core@7.27.1':
-    resolution: {integrity: sha512-IaaGWsQqfsQWVLqMn9OB92MNN7zukfVA4s7KKAI0KfrrDsZ0yhi5uV4baBuLuN7n3vsZpwP8asPPcVwApxvjBQ==}
+  '@babel/compat-data@7.29.7':
+    resolution: {integrity: sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/generator@7.27.1':
-    resolution: {integrity: sha512-UnJfnIpc/+JO0/+KRVQNGU+y5taA5vCbwN8+azkX6beii/ZF+enZJSOKo11ZSzGJjlNfJHfQtmQT8H+9TXPG2w==}
+  '@babel/core@7.29.7':
+    resolution: {integrity: sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-compilation-targets@7.27.1':
-    resolution: {integrity: sha512-2YaDd/Rd9E598B5+WIc8wJPmWETiiJXFYVE60oX8FDohv7rAUU3CQj+A1MgeEmcsk2+dQuEjIe/GDvig0SqL4g==}
+  '@babel/generator@7.29.8':
+    resolution: {integrity: sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-module-imports@7.27.1':
-    resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==}
+  '@babel/helper-compilation-targets@7.29.7':
+    resolution: {integrity: sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-module-transforms@7.27.1':
-    resolution: {integrity: sha512-9yHn519/8KvTU5BjTVEEeIM3w9/2yXNKoD82JifINImhpKkARMJKPP59kLo+BafpdN5zgNeIcS4jsGDmd3l58g==}
+  '@babel/helper-globals@7.29.7':
+    resolution: {integrity: sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.29.7':
+    resolution: {integrity: sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==}
     engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
 
-  '@babel/helper-plugin-utils@7.27.1':
-    resolution: {integrity: sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==}
+  '@babel/helper-module-transforms@7.29.7':
+    resolution: {integrity: sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==}
     engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
 
-  '@babel/helper-string-parser@7.27.1':
-    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+  '@babel/helper-string-parser@7.29.11':
+    resolution: {integrity: sha512-snZbO7MEDOof+hvNa97EjEY7qD7h2kwvQr5AJC3ZhQudKW5dnej6k3kP9NQV88hJwaS8vDqRLFo9rivLEhle2g==}
     engines: {node: '>=6.9.0'}
 
   '@babel/helper-validator-identifier@7.27.1':
     resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-option@7.27.1':
-    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
+  '@babel/helper-validator-identifier@7.29.7':
+    resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helpers@7.27.1':
-    resolution: {integrity: sha512-FCvFTm0sWV8Fxhpp2McP5/W53GPllQ9QeQ7SiqGWjMf/LVG07lFa5+pgK05IRhVwtvafT22KF+ZSnM9I545CvQ==}
+  '@babel/helper-validator-option@7.29.7':
+    resolution: {integrity: sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/parser@7.27.1':
-    resolution: {integrity: sha512-I0dZ3ZpCrJ1c04OqlNsQcKiZlsrXf/kkE4FXzID9rIOYICsAbA8mMDzhW/luRNAHdCNt7os/u8wenklZDlUVUQ==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
+  '@babel/helpers@7.29.10':
+    resolution: {integrity: sha512-EMCx3AGZ3WfAl6ht7AyQoPm2Lh+BGYEMdc4Q6Hf7uSCDOZFuLq44qNwL+iaim8VlyYhRAo4X43+weadK8ZB4Yg==}
+    engines: {node: '>=6.9.0'}
 
-  '@babel/parser@7.27.2':
-    resolution: {integrity: sha512-QYLs8299NA7WM/bZAdp+CviYYkVoYXlDW2rzliy3chxd1PQjej7JORuMJDJXJUb9g0TT+B99EwaVLKmX+sPXWw==}
+  '@babel/parser@7.29.11':
+    resolution: {integrity: sha512-OZ6+oaK7GMyg3IfCpj8JOmn8n+w2rJbDT0LLfVDTLb1ZFeKDh3AiNELgCMUw175IJHSkLl74hG0M0VLsvx+gag==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/plugin-transform-react-jsx-self@7.27.1':
-    resolution: {integrity: sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-transform-react-jsx-source@7.27.1':
-    resolution: {integrity: sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
   '@babel/runtime@7.27.1':
     resolution: {integrity: sha512-1x3D2xEk2fRo3PAhwQwu5UubzgiVWSXTBfWpVd2Mx2AzRqJuDJCsgaDVZ7HB5iGzDW1Hl1sWN2mFyKjmR9uAog==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/template@7.27.1':
-    resolution: {integrity: sha512-Fyo3ghWMqkHHpHQCoBs2VnYjR4iWFFjguTDEqA5WgZDOrFesVjMhMM2FSqTKSoUSDO1VQtavj8NFpdRBEvJTtg==}
+  '@babel/runtime@8.0.8':
+    resolution: {integrity: sha512-dEu8nGlRqjsJsvviUUoSMfcRHpwomCiRlXsc2mPfJ79+ffTpDm+JtfUtTMzUrqCApHQnCsVPD3gT1ZT8RgBRCQ==}
+
+  '@babel/template@7.29.7':
+    resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/traverse@7.27.1':
-    resolution: {integrity: sha512-ZCYtZciz1IWJB4U61UPu4KEaqyfj+r5T1Q5mqPo+IBpcG9kHv30Z0aD8LXPgC1trYa6rK0orRyAhqUgk4MjmEg==}
+  '@babel/traverse@7.29.10':
+    resolution: {integrity: sha512-B3lYAs2nkKskbgQ1nfy8Ma9ao9Q1rntTAQHrzzyDuj+TSO+X3le6PfWwqDvodsb+OumE10eMFfuMCTQSQ5iuIQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.27.1':
-    resolution: {integrity: sha512-+EzkxvLNfiUeKMgy/3luqfsCWFRXLb7U6wNQTk60tovuckwB15B191tJWvpp4HjiQWdJkCxO3Wbvc6jlk3Xb2Q==}
+  '@babel/types@7.29.11':
+    resolution: {integrity: sha512-WCsemW40Cpc6gouC1SrY6PBaZ+oLRlEVY9XBvZBI7il/HyUrb2nJ505wE1MHEFyDZNnrWDEuy4jL50WVHfTTSQ==}
     engines: {node: '>=6.9.0'}
 
-  '@chromatic-com/storybook@3.2.6':
-    resolution: {integrity: sha512-FDmn5Ry2DzQdik+eq2sp/kJMMT36Ewe7ONXUXM2Izd97c7r6R/QyGli8eyh/F0iyqVvbLveNYFyF0dBOJNwLqw==}
-    engines: {node: '>=16.0.0', yarn: '>=1.22.18'}
+  '@base-ui/react@1.9.0':
+    resolution: {integrity: sha512-S8CSYosASBKtpL8SWUfS78rFElfLijiCgA7oHOK22jCJ95FULsYyKwBNFOgudt0RA+/7yNc7F81bOvQnRgbBiQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@date-fns/tz': ^1.2.0
+      '@types/react': ^17 || ^18 || ^19
+      date-fns: ^4.0.0
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@date-fns/tz':
+        optional: true
+      '@types/react':
+        optional: true
+      date-fns:
+        optional: true
+
+  '@base-ui/utils@0.5.0':
+    resolution: {integrity: sha512-dYGGcEttjkYiMoa5nHm8vLaJ2UcuTWxo3BFAwOYXeRg/q7UVVvA6cacEIXEs3FgBfK1CGtW1ptElqs7wsx+t9A==}
     peerDependencies:
-      storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+      '@types/react': ^17 || ^18 || ^19
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  '@emnapi/core@1.4.3':
-    resolution: {integrity: sha512-4m62DuCE07lw01soJwPiBGC0nAww0Q+RY70VZ+n49yDIO13yyinhbWCeNnaob0lakDtWQzSdtNWzJeOJt2ma+g==}
+  '@blazediff/core@1.10.0':
+    resolution: {integrity: sha512-AOQff0zgR7cGsZL+4E7hVkmujoPUpm0J9xzWGWZj5wCjd3gmxESXAPfKyuzs93VdpQNFhHlBhfOjrcZ+XTERtQ==}
 
-  '@emnapi/runtime@1.4.3':
-    resolution: {integrity: sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==}
+  '@commitlint/cli@21.2.4':
+    resolution: {integrity: sha512-g3M/wrQdElqGH5vROIeL2QiYIxrzqUkhCgsDyDlWfKEyQdCt10OyMB28W2cJtpZ+VNGMvmaN923infr1hOfyrg==}
+    engines: {node: '>=22.12.0'}
+    hasBin: true
 
-  '@emnapi/wasi-threads@1.0.2':
-    resolution: {integrity: sha512-5n3nTJblwRi8LlXkJ9eBzu+kZR8Yxcc7ubakyQTFzPMtIhFpUBRbsnc2Dv88IZDIbCDlBiWrknhB4Lsz7mg6BA==}
+  '@commitlint/config-conventional@21.2.4':
+    resolution: {integrity: sha512-IRldtwgNmR0SySR7wizFbhRmq45lPt6H3XCNTMyVN7jrPLgi8JlTRR6Eg1HLWUQt9P1Lh3k6eY25ilDa47EE6w==}
+    engines: {node: '>=22.12.0'}
 
-  '@esbuild/aix-ppc64@0.25.3':
-    resolution: {integrity: sha512-W8bFfPA8DowP8l//sxjJLSLkD8iEjMc7cBVyP+u4cEv9sM7mdUCkgsj+t0n/BWPFtv7WWCN5Yzj0N6FJNUUqBQ==}
-    engines: {node: '>=18'}
-    cpu: [ppc64]
-    os: [aix]
+  '@commitlint/config-validator@21.2.3':
+    resolution: {integrity: sha512-JQ13v0GafSM4fBYX8UowSy++07Was20auq0NcTdnzSEq6/05Cq5GBUMIfKkqjzyBwC9sJFmPpKWgLLhH7cygkw==}
+    engines: {node: '>=22.12.0'}
+
+  '@commitlint/ensure@21.2.4':
+    resolution: {integrity: sha512-woLOLV4pBMUBLyr5+MDM3WSG1r+eb2DObkysFSDxqyDUE4c6hZUOrpebJb2f8XcP3zKGJLb8H5w2suERVGI+Ag==}
+    engines: {node: '>=22.12.0'}
+
+  '@commitlint/execute-rule@21.0.1':
+    resolution: {integrity: sha512-RifH+FmImozKBE6mozhF4K3r2RRKP7SMi/Q/zLCmExtp5e05lhHOUYqGBlFBAGNHaZxU/WYw1XuugYK9jQzqnA==}
+    engines: {node: '>=22.12.0'}
+
+  '@commitlint/format@21.2.3':
+    resolution: {integrity: sha512-KKwCjXYqA8r295uhLnulDXL9yekdXmj2yp2Q0XsBPhxQ2iPuvRE8F43j7g7yexo69wTdmUQmFz15jpderluzUQ==}
+    engines: {node: '>=22.12.0'}
+
+  '@commitlint/is-ignored@21.2.3':
+    resolution: {integrity: sha512-Ng4nRj/LBAOvc+GQu7bsFW4/fL89LvZ14OOC/ERLbUpnG6QBwWRzY/1oXGwPs3C8YHWjJObin4kLYo2YeEn70w==}
+    engines: {node: '>=22.12.0'}
+
+  '@commitlint/lint@21.2.4':
+    resolution: {integrity: sha512-HR8SGl1oEGfi/cqyBipanVY0a9CfEzIcJjPC37t7oQedaUUngw3d5E17g5Cfr2S3p6KsZM7UOHFq5fXHLRh7DQ==}
+    engines: {node: '>=22.12.0'}
+
+  '@commitlint/load@21.2.4':
+    resolution: {integrity: sha512-Gi+aAW9nL8XPgvg8kIO0gZOw1/ePvpDLkv1bm8tj0RqenhNtCzk0frtctJhl41uIAP7OSx9bgQ6HCOa9En4g2Q==}
+    engines: {node: '>=22.12.0'}
+
+  '@commitlint/message@21.2.0':
+    resolution: {integrity: sha512-YxGoiXD/HXNXLJPrQwE5poXa+XH0CBEm+mdvbHQP0g6MV/dmJyUFCzPNzZbxL93GvZ70TmtTK0Z0/IBpAqHv8g==}
+    engines: {node: '>=22.12.0'}
+
+  '@commitlint/parse@21.2.3':
+    resolution: {integrity: sha512-Jt61QpF1xA88damCELe8I0FlDZPSpXNc8IhN7z5kZ0EcDYPjdZ+ZHPvsSXl69r2MIlLnNKeHhOn2cmVpziFE9w==}
+    engines: {node: '>=22.12.0'}
+
+  '@commitlint/read@21.2.3':
+    resolution: {integrity: sha512-szAepuLA1vTTr7fuudEg7jYyVHudf+FH+vptU91bhxE1WnE8TKrfTAi44HVllz8XpI8Pvp4GjR/iP5Nshgh+og==}
+    engines: {node: '>=22.12.0'}
+
+  '@commitlint/resolve-extends@21.2.3':
+    resolution: {integrity: sha512-bqJdmAtXgAQel+l02uIsF7rHgKgx1AGZdGBjam7uK4XW54ZAQtB6XAIUXezYprQiCcRMpBh4fHs5JodXK4mVZA==}
+    engines: {node: '>=22.12.0'}
+
+  '@commitlint/rules@21.2.4':
+    resolution: {integrity: sha512-wranK/aevXs/WiW4N3orQlXY4sU2pQWjRSjN7I3TsZmP146Rr4CpsG38lpyqVcbNfMgvUVGy7ffYm7nCziTUwg==}
+    engines: {node: '>=22.12.0'}
+
+  '@commitlint/to-lines@21.0.1':
+    resolution: {integrity: sha512-bd1BFII7p1EQZre9Kaj+kKaMFP3cFCdt21K7DItVux9XP5WjLgJ0/Uy1pJJh9aPwVJ6SKg62PxqlZaHI8hQAXw==}
+    engines: {node: '>=22.12.0'}
+
+  '@commitlint/top-level@21.2.0':
+    resolution: {integrity: sha512-Y5gmQ+KxzqCrBFJfLvFEPvvwD3LDiNZoTT2yeFBm96M8qhmqSzQc5DvX3rheAaAMjyIvMXOCLS/mWfdpONsjyQ==}
+    engines: {node: '>=22.12.0'}
+
+  '@commitlint/types@21.2.3':
+    resolution: {integrity: sha512-sGEA473TlCvhCGNoTBY9OXZVWdscIXdGt0dm8EpB+2MRfmt8LNh/X56P/T3nCtEB+eH5qGEa3odphSAoUxSfSQ==}
+    engines: {node: '>=22.12.0'}
+
+  '@conventional-changelog/git-client@3.2.0':
+    resolution: {integrity: sha512-sD/E0vzpkoDz/dqM1Hhv0ihC4KBw6RXjefeO8SG1XrX+wGkMxe1pKeedkKDPCtr2JjuhbuS9aJNgOvnT8hbeBw==}
+    engines: {node: '>=22'}
+    peerDependencies:
+      conventional-commits-filter: ^6.0.1
+      conventional-commits-parser: ^7.1.3
+    peerDependenciesMeta:
+      conventional-commits-filter:
+        optional: true
+      conventional-commits-parser:
+        optional: true
+
+  '@conventional-changelog/template@1.4.0':
+    resolution: {integrity: sha512-aalGyl7dbB5PArRebDIX43ZvBlXrYm9uWzGJ26t+4SzJVPsOuvfILGGbw5X4yX7i50YEmJ8zvbiWnqH/AAnZqg==}
+    engines: {node: '>=22'}
+
+  '@cyberalien/svg-utils@1.2.21':
+    resolution: {integrity: sha512-exLnXg7+DfTRHD6Qm0SbWLXAICO0L4SdYevvY3irn3bU6zJ+WvIS6ogomE3T7EXE3krJjCpUKmkiRq4Mp/HoTw==}
+
+  '@emmetio/math-expression@1.0.5':
+    resolution: {integrity: sha512-qf5SXD/ViS04rXSeDg9CRGM10xLC9dVaKIbMHrrwxYr5LNB/C0rOfokhGSBwnVQKcidLmdRJeNWH1V1tppZ84Q==}
+
+  '@emmetio/scanner@1.0.4':
+    resolution: {integrity: sha512-IqRuJtQff7YHHBk4G8YZ45uB9BaAGcwQeVzgj/zj8/UdOhtQpEIupUhSk8dys6spFIWVZVeK20CzGEnqR5SbqA==}
+
+  '@emnapi/core@1.11.0':
+    resolution: {integrity: sha512-l9Oo58x0HOP5znGzVhYW9U3e5wVuA4LAZU2AGezTmkhO1CgQRFDhDg4nneHsu/t3WniXg9QrG2nIXL/ZS8ln8Q==}
+
+  '@emnapi/core@1.9.2':
+    resolution: {integrity: sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==}
+
+  '@emnapi/runtime@1.11.0':
+    resolution: {integrity: sha512-55coeOFKHv1ywEcUXJtWU5f+Jr/W5tZDvZig8DLKSwUN1JpROQ4rk/SNOQiFWmaR/VKF4zuFyW1B8JduOSv6Pg==}
+
+  '@emnapi/runtime@1.9.2':
+    resolution: {integrity: sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==}
+
+  '@emnapi/wasi-threads@1.2.1':
+    resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
+
+  '@emnapi/wasi-threads@1.2.2':
+    resolution: {integrity: sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==}
 
   '@esbuild/aix-ppc64@0.25.4':
     resolution: {integrity: sha512-1VCICWypeQKhVbE9oW/sJaAmjLxhVqacdkvPLEjwlttjfwENRSClS8EjBz0KzRyFSCPDIkuXW34Je/vk7zdB7Q==}
@@ -388,11 +737,11 @@ packages:
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/android-arm64@0.25.3':
-    resolution: {integrity: sha512-XelR6MzjlZuBM4f5z2IQHK6LkK34Cvv6Rj2EntER3lwCBFdg6h2lKbtRjpTTsdEjD/WSe1q8UyPBXP1x3i/wYQ==}
+  '@esbuild/aix-ppc64@0.28.2':
+    resolution: {integrity: sha512-XExcO+dvLKvVtNTibSTBej1NCAbaGhWn9Ww1ZPx80qsahhPFe/8jgWP0IchNe0F3HwkU7n8ejhH8bjonqht8mQ==}
     engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [android]
+    cpu: [ppc64]
+    os: [aix]
 
   '@esbuild/android-arm64@0.25.4':
     resolution: {integrity: sha512-bBy69pgfhMGtCnwpC/x5QhfxAz/cBgQ9enbtwjf6V9lnPI/hMyT9iWpR1arm0l3kttTr4L0KSLpKmLp/ilKS9A==}
@@ -400,10 +749,10 @@ packages:
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm@0.25.3':
-    resolution: {integrity: sha512-PuwVXbnP87Tcff5I9ngV0lmiSu40xw1At6i3GsU77U7cjDDB4s0X2cyFuBiDa1SBk9DnvWwnGvVaGBqoFWPb7A==}
+  '@esbuild/android-arm64@0.28.2':
+    resolution: {integrity: sha512-5YfKeeI8qWfBZIX+u2xZC3Zlb3Os/gLS2sbEKM+I4ZOcsWmHS2WLysCcQZDAFRslDUU5Oiq44gf6PYN1vGwG5A==}
     engines: {node: '>=18'}
-    cpu: [arm]
+    cpu: [arm64]
     os: [android]
 
   '@esbuild/android-arm@0.25.4':
@@ -412,10 +761,10 @@ packages:
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-x64@0.25.3':
-    resolution: {integrity: sha512-ogtTpYHT/g1GWS/zKM0cc/tIebFjm1F9Aw1boQ2Y0eUQ+J89d0jFY//s9ei9jVIlkYi8AfOjiixcLJSGNSOAdQ==}
+  '@esbuild/android-arm@0.28.2':
+    resolution: {integrity: sha512-kXXoiPVVGQcnIYGOeaovwOURpniDBpSq4A03qkQ+BMQqtGG6HYap3xne9C1O1yo4TR3qxlCX5IqqmX6fFo2Lqg==}
     engines: {node: '>=18'}
-    cpu: [x64]
+    cpu: [arm]
     os: [android]
 
   '@esbuild/android-x64@0.25.4':
@@ -424,11 +773,11 @@ packages:
     cpu: [x64]
     os: [android]
 
-  '@esbuild/darwin-arm64@0.25.3':
-    resolution: {integrity: sha512-eESK5yfPNTqpAmDfFWNsOhmIOaQA59tAcF/EfYvo5/QWQCzXn5iUSOnqt3ra3UdzBv073ykTtmeLJZGt3HhA+w==}
+  '@esbuild/android-x64@0.28.2':
+    resolution: {integrity: sha512-O387ite7SzUyCcy3JQX4P4bLtEA7bLLkx+esve5JHnyYfNTxcVpXZo9jhdB0lTKN44gztELTdU7nS8Nr16Fs1Q==}
     engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [darwin]
+    cpu: [x64]
+    os: [android]
 
   '@esbuild/darwin-arm64@0.25.4':
     resolution: {integrity: sha512-Y1giCfM4nlHDWEfSckMzeWNdQS31BQGs9/rouw6Ub91tkK79aIMTH3q9xHvzH8d0wDru5Ci0kWB8b3up/nl16g==}
@@ -436,10 +785,10 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.25.3':
-    resolution: {integrity: sha512-Kd8glo7sIZtwOLcPbW0yLpKmBNWMANZhrC1r6K++uDR2zyzb6AeOYtI6udbtabmQpFaxJ8uduXMAo1gs5ozz8A==}
+  '@esbuild/darwin-arm64@0.28.2':
+    resolution: {integrity: sha512-n4KqkOQrraxHJcgjM1RvwbigfQKIKJVpM7xp+KsxiyUSrRdIXnt73VhrPAx0fV44hgfmIVKjxMN9J1t5jySVkw==}
     engines: {node: '>=18'}
-    cpu: [x64]
+    cpu: [arm64]
     os: [darwin]
 
   '@esbuild/darwin-x64@0.25.4':
@@ -448,11 +797,11 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/freebsd-arm64@0.25.3':
-    resolution: {integrity: sha512-EJiyS70BYybOBpJth3M0KLOus0n+RRMKTYzhYhFeMwp7e/RaajXvP+BWlmEXNk6uk+KAu46j/kaQzr6au+JcIw==}
+  '@esbuild/darwin-x64@0.28.2':
+    resolution: {integrity: sha512-uq6suIWYP37qzGddBKPw5QEQPi6HiLGsO7UmkpfyaYNQ3D+rN6w6WfwH+nuqcGXWvawGwxOEroO4YGnFh95azw==}
     engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [freebsd]
+    cpu: [x64]
+    os: [darwin]
 
   '@esbuild/freebsd-arm64@0.25.4':
     resolution: {integrity: sha512-yYq+39NlTRzU2XmoPW4l5Ifpl9fqSk0nAJYM/V/WUGPEFfek1epLHJIkTQM6bBs1swApjO5nWgvr843g6TjxuQ==}
@@ -460,10 +809,10 @@ packages:
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.25.3':
-    resolution: {integrity: sha512-Q+wSjaLpGxYf7zC0kL0nDlhsfuFkoN+EXrx2KSB33RhinWzejOd6AvgmP5JbkgXKmjhmpfgKZq24pneodYqE8Q==}
+  '@esbuild/freebsd-arm64@0.28.2':
+    resolution: {integrity: sha512-n+I0BTSRIoy+d6RPKnEVwql5UwBJolytvY4mAOIEJorKlqgPII8ix6slVVrfZ5Tnj7glIZvloylbB/EJPMWEXw==}
     engines: {node: '>=18'}
-    cpu: [x64]
+    cpu: [arm64]
     os: [freebsd]
 
   '@esbuild/freebsd-x64@0.25.4':
@@ -472,11 +821,11 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/linux-arm64@0.25.3':
-    resolution: {integrity: sha512-xCUgnNYhRD5bb1C1nqrDV1PfkwgbswTTBRbAd8aH5PhYzikdf/ddtsYyMXFfGSsb/6t6QaPSzxtbfAZr9uox4A==}
+  '@esbuild/freebsd-x64@0.28.2':
+    resolution: {integrity: sha512-78XJTJkvPs0kz2w61301PJjXl4g7q3JqiYMZ/M/yVI73EHBrCRTgkhu9oqG7vPqq+a/yadEW8aD+agKlk5xrmg==}
     engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [linux]
+    cpu: [x64]
+    os: [freebsd]
 
   '@esbuild/linux-arm64@0.25.4':
     resolution: {integrity: sha512-+89UsQTfXdmjIvZS6nUnOOLoXnkUTB9hR5QAeLrQdzOSWZvNSAXAtcRDHWtqAUtAmv7ZM1WPOOeSxDzzzMogiQ==}
@@ -484,10 +833,10 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm@0.25.3':
-    resolution: {integrity: sha512-dUOVmAUzuHy2ZOKIHIKHCm58HKzFqd+puLaS424h6I85GlSDRZIA5ycBixb3mFgM0Jdh+ZOSB6KptX30DD8YOQ==}
+  '@esbuild/linux-arm64@0.28.2':
+    resolution: {integrity: sha512-pW4AC0P3it8c7do9MVM4p51FzHzdM/TZrerurgRcHJ2WTa1VQ1CIq18xncfpBJw4ojkiZZrKW2yIBWBP92j6Ug==}
     engines: {node: '>=18'}
-    cpu: [arm]
+    cpu: [arm64]
     os: [linux]
 
   '@esbuild/linux-arm@0.25.4':
@@ -496,10 +845,10 @@ packages:
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.25.3':
-    resolution: {integrity: sha512-yplPOpczHOO4jTYKmuYuANI3WhvIPSVANGcNUeMlxH4twz/TeXuzEP41tGKNGWJjuMhotpGabeFYGAOU2ummBw==}
+  '@esbuild/linux-arm@0.28.2':
+    resolution: {integrity: sha512-XlDnu2q5yoqems+xay6wSAcg9DDD7K9RLKZEBOMZm3ckNpJBvOX20tSfby8KfrrhINDyv9V2YVZKY/SpoGJI8w==}
     engines: {node: '>=18'}
-    cpu: [ia32]
+    cpu: [arm]
     os: [linux]
 
   '@esbuild/linux-ia32@0.25.4':
@@ -508,10 +857,10 @@ packages:
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.25.3':
-    resolution: {integrity: sha512-P4BLP5/fjyihmXCELRGrLd793q/lBtKMQl8ARGpDxgzgIKJDRJ/u4r1A/HgpBpKpKZelGct2PGI4T+axcedf6g==}
+  '@esbuild/linux-ia32@0.28.2':
+    resolution: {integrity: sha512-CYbnj78HsIeA+DhgUKgFCfvNsTHFhMMrinUrMZpDXJXKN8T3XViTZ/+wtHeVxEWY8ewSzTFN+nRmSwO2tZaLUQ==}
     engines: {node: '>=18'}
-    cpu: [loong64]
+    cpu: [ia32]
     os: [linux]
 
   '@esbuild/linux-loong64@0.25.4':
@@ -520,10 +869,10 @@ packages:
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.25.3':
-    resolution: {integrity: sha512-eRAOV2ODpu6P5divMEMa26RRqb2yUoYsuQQOuFUexUoQndm4MdpXXDBbUoKIc0iPa4aCO7gIhtnYomkn2x+bag==}
+  '@esbuild/linux-loong64@0.28.2':
+    resolution: {integrity: sha512-buwkd8nsph4R+ajRvw0qM5Hja/TXQow3ptzWO2EbG/cqcIkHloRrdlBtQlshyYGTNFvfkfJ5tpPLVkY4DtsPfQ==}
     engines: {node: '>=18'}
-    cpu: [mips64el]
+    cpu: [loong64]
     os: [linux]
 
   '@esbuild/linux-mips64el@0.25.4':
@@ -532,10 +881,10 @@ packages:
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.25.3':
-    resolution: {integrity: sha512-ZC4jV2p7VbzTlnl8nZKLcBkfzIf4Yad1SJM4ZMKYnJqZFD4rTI+pBG65u8ev4jk3/MPwY9DvGn50wi3uhdaghg==}
+  '@esbuild/linux-mips64el@0.28.2':
+    resolution: {integrity: sha512-ZVykbDyk7519VwiNb9Lcj9m8XM6v5V9uKPvrEMkkEedVewf+0itkhahp4HDpgERXhwLRpWFypsGbG/J8s0QjJA==}
     engines: {node: '>=18'}
-    cpu: [ppc64]
+    cpu: [mips64el]
     os: [linux]
 
   '@esbuild/linux-ppc64@0.25.4':
@@ -544,10 +893,10 @@ packages:
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.25.3':
-    resolution: {integrity: sha512-LDDODcFzNtECTrUUbVCs6j9/bDVqy7DDRsuIXJg6so+mFksgwG7ZVnTruYi5V+z3eE5y+BJZw7VvUadkbfg7QA==}
+  '@esbuild/linux-ppc64@0.28.2':
+    resolution: {integrity: sha512-CAXl+Dtd9UUuJd8pKKdwh6MLm3MUMiqMPmhZ3tTSXPqfyQ3vDl6R5hZdZ/kYojK4ofXtdfSv1tFq8XzWx3heNQ==}
     engines: {node: '>=18'}
-    cpu: [riscv64]
+    cpu: [ppc64]
     os: [linux]
 
   '@esbuild/linux-riscv64@0.25.4':
@@ -556,10 +905,10 @@ packages:
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.25.3':
-    resolution: {integrity: sha512-s+w/NOY2k0yC2p9SLen+ymflgcpRkvwwa02fqmAwhBRI3SC12uiS10edHHXlVWwfAagYSY5UpmT/zISXPMW3tQ==}
+  '@esbuild/linux-riscv64@0.28.2':
+    resolution: {integrity: sha512-GeXCej4IQtU1B+QlDV8W/RRvbzI3O/Stss+/bCXv4lZls5WGRtu2a+3JkA3i4qIUlMXpcHebWpF8AkJhATowuA==}
     engines: {node: '>=18'}
-    cpu: [s390x]
+    cpu: [riscv64]
     os: [linux]
 
   '@esbuild/linux-s390x@0.25.4':
@@ -568,10 +917,10 @@ packages:
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-x64@0.25.3':
-    resolution: {integrity: sha512-nQHDz4pXjSDC6UfOE1Fw9Q8d6GCAd9KdvMZpfVGWSJztYCarRgSDfOVBY5xwhQXseiyxapkiSJi/5/ja8mRFFA==}
+  '@esbuild/linux-s390x@0.28.2':
+    resolution: {integrity: sha512-3H1weTYZPxt/WOhByszQZybS9w5lKzUn1FDMsgEChbHWQwHYQQRfBxgCcZvPhjHfKyJjIievvMmEUawJrdY9Dg==}
     engines: {node: '>=18'}
-    cpu: [x64]
+    cpu: [s390x]
     os: [linux]
 
   '@esbuild/linux-x64@0.25.4':
@@ -580,11 +929,11 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/netbsd-arm64@0.25.3':
-    resolution: {integrity: sha512-1QaLtOWq0mzK6tzzp0jRN3eccmN3hezey7mhLnzC6oNlJoUJz4nym5ZD7mDnS/LZQgkrhEbEiTn515lPeLpgWA==}
+  '@esbuild/linux-x64@0.28.2':
+    resolution: {integrity: sha512-4xTZr1FUmSoQW4XIWmit3tzQrUTZM+N3P0XV8xROKYF50XfI7xeO90+1bZvNwxIufQ9hDQVRJH5YhgPVF8A/HQ==}
     engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [netbsd]
+    cpu: [x64]
+    os: [linux]
 
   '@esbuild/netbsd-arm64@0.25.4':
     resolution: {integrity: sha512-vUnkBYxZW4hL/ie91hSqaSNjulOnYXE1VSLusnvHg2u3jewJBz3YzB9+oCw8DABeVqZGg94t9tyZFoHma8gWZQ==}
@@ -592,10 +941,10 @@ packages:
     cpu: [arm64]
     os: [netbsd]
 
-  '@esbuild/netbsd-x64@0.25.3':
-    resolution: {integrity: sha512-i5Hm68HXHdgv8wkrt+10Bc50zM0/eonPb/a/OFVfB6Qvpiirco5gBA5bz7S2SHuU+Y4LWn/zehzNX14Sp4r27g==}
+  '@esbuild/netbsd-arm64@0.28.2':
+    resolution: {integrity: sha512-sSATRjPeDBg3pdgHoQfoYBob11Kk1FGa9lui5RIHZCoCkJa9QKlvl3/vKz2usCmYYjs7ymJR/2Nnsqe+Hjt5nw==}
     engines: {node: '>=18'}
-    cpu: [x64]
+    cpu: [arm64]
     os: [netbsd]
 
   '@esbuild/netbsd-x64@0.25.4':
@@ -604,11 +953,11 @@ packages:
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/openbsd-arm64@0.25.3':
-    resolution: {integrity: sha512-zGAVApJEYTbOC6H/3QBr2mq3upG/LBEXr85/pTtKiv2IXcgKV0RT0QA/hSXZqSvLEpXeIxah7LczB4lkiYhTAQ==}
+  '@esbuild/netbsd-x64@0.28.2':
+    resolution: {integrity: sha512-lqnzCV+mM0gIADaKihiCg6ifgfU2L3h5E33rNQBN1Y4MaVGnzryzmvvf7UHxprpQdE8hpqLolJ9Rl+SkIRDpyw==}
     engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [openbsd]
+    cpu: [x64]
+    os: [netbsd]
 
   '@esbuild/openbsd-arm64@0.25.4':
     resolution: {integrity: sha512-Ct2WcFEANlFDtp1nVAXSNBPDxyU+j7+tId//iHXU2f/lN5AmO4zLyhDcpR5Cz1r08mVxzt3Jpyt4PmXQ1O6+7A==}
@@ -616,10 +965,10 @@ packages:
     cpu: [arm64]
     os: [openbsd]
 
-  '@esbuild/openbsd-x64@0.25.3':
-    resolution: {integrity: sha512-fpqctI45NnCIDKBH5AXQBsD0NDPbEFczK98hk/aa6HJxbl+UtLkJV2+Bvy5hLSLk3LHmqt0NTkKNso1A9y1a4w==}
+  '@esbuild/openbsd-arm64@0.28.2':
+    resolution: {integrity: sha512-AL2qJILH7lNjrDmCQDvdxMfAUIv8KMNZOvrwAQ8i8//ntL9FflhOyMJ8OZSMBb8/AWXe3/5v5S20y3zCoZWKoQ==}
     engines: {node: '>=18'}
-    cpu: [x64]
+    cpu: [arm64]
     os: [openbsd]
 
   '@esbuild/openbsd-x64@0.25.4':
@@ -628,11 +977,17 @@ packages:
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/sunos-x64@0.25.3':
-    resolution: {integrity: sha512-ROJhm7d8bk9dMCUZjkS8fgzsPAZEjtRJqCAmVgB0gMrvG7hfmPmz9k1rwO4jSiblFjYmNvbECL9uhaPzONMfgA==}
+  '@esbuild/openbsd-x64@0.28.2':
+    resolution: {integrity: sha512-QtiuPytchRyC4rwUKhexJdQKvDuZ6hWloi3igqPQNUJCS1/v9EiO3UTOXR6A3FoMo4fnAKbWJdqaIwhOzh8qEw==}
     engines: {node: '>=18'}
     cpu: [x64]
-    os: [sunos]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.28.2':
+    resolution: {integrity: sha512-WkhYDmpTjLvGlScA1rwjRUmhl4k8oXR3cIbtqWmELgU/dFeHHlEllxDvdWcNJV9rbzCexB5vz8gtNewWLgCT7Q==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
 
   '@esbuild/sunos-x64@0.25.4':
     resolution: {integrity: sha512-Mw+tzy4pp6wZEK0+Lwr76pWLjrtjmJyUB23tHKqEDP74R3q95luY/bXqXZeYl4NYlvwOqoRKlInQialgCKy67Q==}
@@ -640,11 +995,11 @@ packages:
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/win32-arm64@0.25.3':
-    resolution: {integrity: sha512-YWcow8peiHpNBiIXHwaswPnAXLsLVygFwCB3A7Bh5jRkIBFWHGmNQ48AlX4xDvQNoMZlPYzjVOQDYEzWCqufMQ==}
+  '@esbuild/sunos-x64@0.28.2':
+    resolution: {integrity: sha512-GPMSkTOtMnv2U2F8gxe4Io6qmVs+YKyp832Etqqxr0hFngmXQ3rzwytelm3GIn7T4VviRUlf3sOgBOiTdvaf7g==}
     engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [win32]
+    cpu: [x64]
+    os: [sunos]
 
   '@esbuild/win32-arm64@0.25.4':
     resolution: {integrity: sha512-AVUP428VQTSddguz9dO9ngb+E5aScyg7nOeJDrF1HPYu555gmza3bDGMPhmVXL8svDSoqPCsCPjb265yG/kLKQ==}
@@ -652,10 +1007,10 @@ packages:
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.25.3':
-    resolution: {integrity: sha512-qspTZOIGoXVS4DpNqUYUs9UxVb04khS1Degaw/MnfMe7goQ3lTfQ13Vw4qY/Nj0979BGvMRpAYbs/BAxEvU8ew==}
+  '@esbuild/win32-arm64@0.28.2':
+    resolution: {integrity: sha512-PIhhEkE9uPBleRBrQEJpUn7MBnibZzbGzYWPmY3x+YoVg/95zbjB4CxPPOQ8l5tYYM4mMaCthF8/1DIfBQQyWQ==}
     engines: {node: '>=18'}
-    cpu: [ia32]
+    cpu: [arm64]
     os: [win32]
 
   '@esbuild/win32-ia32@0.25.4':
@@ -664,10 +1019,10 @@ packages:
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-x64@0.25.3':
-    resolution: {integrity: sha512-ICgUR+kPimx0vvRzf+N/7L7tVSQeE3BYY+NhHRHXS1kBuPO7z2+7ea2HbhDyZdTephgvNvKrlDDKUexuCVBVvg==}
+  '@esbuild/win32-ia32@0.28.2':
+    resolution: {integrity: sha512-YmJbfTlvU7Sdn9BB+4PRES4oB6pxgS37MAONj+hBr/cpXS1aBPKXxNnDbu+QCWPj0o9dgyxeq79g6c5P8KeuYA==}
     engines: {node: '>=18'}
-    cpu: [x64]
+    cpu: [ia32]
     os: [win32]
 
   '@esbuild/win32-x64@0.25.4':
@@ -676,165 +1031,82 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@eslint-community/eslint-utils@4.7.0':
-    resolution: {integrity: sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-
-  '@eslint-community/regexpp@4.12.1':
-    resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
-    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
-
-  '@eslint-react/ast@1.49.0':
-    resolution: {integrity: sha512-kKYKd3hVjztMMLNAX41GRbi+luSIVYSYReXtifiPKjYNu/CkZ14x5o9CCN0iAeuSinpSmaUq4qXDD6nihMp1Wg==}
-    engines: {bun: '>=1.0.15', node: '>=18.18.0'}
-
-  '@eslint-react/core@1.49.0':
-    resolution: {integrity: sha512-SS2V3reZmiTSgJjyNhIotZDcpcXeQBr/HWAup/Q3a5rtJDydKO2grvdSpP92NbaGKaIsakRMW4XupUmGVZhnYA==}
-    engines: {bun: '>=1.0.15', node: '>=18.18.0'}
-
-  '@eslint-react/eff@1.49.0':
-    resolution: {integrity: sha512-u4TNqG/smBx5HefDJDUkpdDJ2Wg0rXJFFi61UHPREp0IDPKQOqCMQ1fH1RbZp2w95TRiar94/mXwweeyqAVekQ==}
-    engines: {bun: '>=1.0.15', node: '>=18.18.0'}
-
-  '@eslint-react/eslint-plugin@1.49.0':
-    resolution: {integrity: sha512-KMMSRROH4OQla+pOQjXC3IYTgOWBIf46WaZDwX0hGgGP8qzXAjJcWiJdButhIQ8PsgKoFKnr13uStIput8wwIQ==}
-    engines: {bun: '>=1.0.15', node: '>=18.18.0'}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: ^4.9.5 || ^5.3.3
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@eslint-react/kit@1.49.0':
-    resolution: {integrity: sha512-bLyVQaFaXG34ShcStuMRX64GUOkB7qUvhXsl5+Z56LE+PAM60pTWIxtPJ4PdogO9iEOpNU7v3FDnuCLVKTAzKg==}
-    engines: {bun: '>=1.0.15', node: '>=18.18.0'}
-
-  '@eslint-react/shared@1.49.0':
-    resolution: {integrity: sha512-e+qB/bcQTBnRnYXBEAJkKBxHcsiIM+2KGHBJAmc9OFwaEtOOGl+1ShhVox6r9YIIGI7ak+ylnLYabkQp15K/tw==}
-    engines: {bun: '>=1.0.15', node: '>=18.18.0'}
-
-  '@eslint-react/var@1.49.0':
-    resolution: {integrity: sha512-CHx6PZAptM3ghSyr0yCxSbR3Fl+EvCk9ctIqj8lQYbXnSkHyIfwclFJb884pc+pss3glmCsOrWNQtR3dxPVVrQ==}
-    engines: {bun: '>=1.0.15', node: '>=18.18.0'}
-
-  '@eslint/config-array@0.20.0':
-    resolution: {integrity: sha512-fxlS1kkIjx8+vy2SjuCB94q3htSNrufYTXubwiBFeaQHbH6Ipi43gFJq2zCMt6PHhImH3Xmr0NksKDvchWlpQQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/config-helpers@0.2.2':
-    resolution: {integrity: sha512-+GPzk8PlG0sPpzdU5ZvIRMPidzAnZDl/s9L+y13iodqvb8leL53bTannOrQ/Im7UkpsmFU5Ily5U60LWixnmLg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/core@0.13.0':
-    resolution: {integrity: sha512-yfkgDw1KR66rkT5A8ci4irzDysN7FRpq3ttJolR88OqQikAWqwA8j5VZyas+vjyBNFIJ7MfybJ9plMILI2UrCw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/core@0.14.0':
-    resolution: {integrity: sha512-qIbV0/JZr7iSDjqAc60IqbLdsj9GDt16xQtWD+B78d/HAlvysGdZZ6rpJHGAc2T0FQx1X6thsSPdnoiGKdNtdg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/eslintrc@3.3.1':
-    resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/js@9.27.0':
-    resolution: {integrity: sha512-G5JD9Tu5HJEu4z2Uo4aHY2sLV64B7CDMXxFzqzjl3NKd6RVzSXNoE80jk7Y0lJkTTkjiIhBAqmlYwjuBY3tvpA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/object-schema@2.1.6':
-    resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/plugin-kit@0.2.8':
-    resolution: {integrity: sha512-ZAoA40rNMPwSm+AeHpCq8STiNAwzWLJuP8Xv4CHIc9wv/PSuExjMrmjfYNj682vW0OOiZ1HKxzvjQr9XZIisQA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/plugin-kit@0.3.1':
-    resolution: {integrity: sha512-0J+zgWxHN+xXONWIyPWKFMgVuJoZuGiIFu8yxk7RJjxkzpGmyja5wRFqZIVtjDVOQpV+Rw0iOAjYPE2eQyjr0w==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@esbuild/win32-x64@0.28.2':
+    resolution: {integrity: sha512-5ebpxr3nWMzrL/rnUI755Jkuee0bHL/Gq0WTF9lvcpv73wAp5eu8MfBUgWK9bhWvZjj7yX8etf/8tI8Ney695g==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
 
-  '@figma/plugin-typings@1.112.0':
-    resolution: {integrity: sha512-WWvXk7pqKD1J7H9eXrGjSPRjdlpYY5vRM/FxLliOVxtLISs411CrlWIKoKUJNM+24m1ouZB20vqMElvA3+MvHA==}
+  '@figma/plugin-typings@1.142.0':
+    resolution: {integrity: sha512-Loa9P4bUZi/pQejic8OYQSU4Zz9izJdIiDUkkKddq5Bfc5JPRV6pCeg3C8owovbX9lKshaFym86PlMhKZgLeBw==}
 
-  '@figma/widget-typings@1.11.0':
-    resolution: {integrity: sha512-LzGV/zikkgbDq3w2Rag2Lel/oltT7+gI+MmO61fKmCusrHjX+Y1Np84zwBTSlK1GxeA2Z4JQEYvSfiiQMW5W8A==}
+  '@figma/widget-typings@1.13.0':
+    resolution: {integrity: sha512-Ag1fNYk2+Kwv48uV90QQycY+CHI7jLMokk0JdII1PyM5JYOZPhGKG0yiit3bnZUFdaTv9ZnFIa8/gPFS/7Ia8Q==}
     peerDependencies:
       '@figma/plugin-typings': 1.x
 
-  '@floating-ui/core@1.7.0':
-    resolution: {integrity: sha512-FRdBLykrPPA6P76GGGqlex/e7fbe0F1ykgxHYNXQsH/iTEtjMj/f9bpY5oQqbjt5VgZvgz/uKXbGuROijh3VLA==}
+  '@floating-ui/core@1.8.0':
+    resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==}
 
-  '@floating-ui/dom@1.7.0':
-    resolution: {integrity: sha512-lGTor4VlXcesUMh1cupTUTDoCxMb0V6bm3CnxHzQcw8Eaf1jQbgQX4i02fYgT0vJ82tb5MZ4CZk1LRGkktJCzg==}
+  '@floating-ui/dom@1.8.0':
+    resolution: {integrity: sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==}
 
-  '@floating-ui/react-dom@2.1.2':
-    resolution: {integrity: sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==}
+  '@floating-ui/react-dom@2.1.9':
+    resolution: {integrity: sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
-  '@floating-ui/utils@0.2.9':
-    resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
+  '@floating-ui/utils@0.2.12':
+    resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}
 
-  '@humanfs/core@0.19.1':
-    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
-    engines: {node: '>=18.18.0'}
+  '@henrygd/queue@1.2.0':
+    resolution: {integrity: sha512-jW/BLSTpcvExDhqJGxtIPgGr2O0IFF8XUNDwEbfCfhrXT8a4xztQ9Lv6U/vbYzYC0xVWn+3zv6YnLUh3bEFUKA==}
 
-  '@humanfs/node@0.16.6':
-    resolution: {integrity: sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==}
-    engines: {node: '>=18.18.0'}
+  '@iconify-json/mdi@1.2.3':
+    resolution: {integrity: sha512-O3cLwbDOK7NNDf2ihaQOH5F9JglnulNDFV7WprU2dSoZu3h3cWH//h74uQAB87brHmvFVxIOkuBX2sZSzYhScg==}
 
-  '@humanwhocodes/module-importer@1.0.1':
-    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
-    engines: {node: '>=12.22'}
+  '@iconify-json/tabler@1.2.42':
+    resolution: {integrity: sha512-fObaBh/H2zJphk3lS1dWPUf/buuGaCHQXnB4UYgKOPXQub5Ac1qEu0AHRj/0+E2FEl8pWfgM2xQWzfz7ffcY+A==}
 
-  '@humanwhocodes/retry@0.3.1':
-    resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==}
-    engines: {node: '>=18.18'}
+  '@iconify/tailwind4@1.2.3':
+    resolution: {integrity: sha512-z8SKiMHRASJKF/IY//87MF88lcB7ulxh8vlhQXXLWsBkNtOh6ese9R41MyGpQeqXdRvQVt+/fX2glQtHFjQ+MA==}
+    peerDependencies:
+      tailwindcss: '>= 4.0.0'
 
-  '@humanwhocodes/retry@0.4.3':
-    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
-    engines: {node: '>=18.18'}
+  '@iconify/tools@5.0.14':
+    resolution: {integrity: sha512-wJ4ZE3/HZh2iBqLwG+8FOMHe7CMJAJqwSXZSpPwMdj1gZM3Z4t2hbQMVw4Vm45oQ985qn0g89PUIcDEdKTheBA==}
 
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
-  '@iconify/utils@2.3.0':
-    resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==}
-
-  '@isaacs/cliui@8.0.2':
-    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
-    engines: {node: '>=12'}
+  '@iconify/utils@3.1.7':
+    resolution: {integrity: sha512-JZHlwdID+dy+lTgbYC8NEC4zeugqeYsc6jewvzb4c58kHauJn+X7rNwQjxz5p2qSjqaEeQoLkCIQ9v/H4PK0/w==}
 
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.5.0':
-    resolution: {integrity: sha512-qYDdL7fPwLRI+bJNurVcis+tNgJmvWjH4YTBGXTA8xMuxFrnAz6E5o35iyzyKbq5J5Lr8mJGfrR5GXl+WGwhgQ==}
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0':
+    resolution: {integrity: sha512-qvsTEwEFefhdirGOPnu9Wp6ChfIwy2dBCRuETU3uE+4cC+PFoxMSiiEhxk4lOluA34eARHA0OxqsEUYDqRMgeQ==}
     peerDependencies:
       typescript: '>= 4.3.x'
-      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
     peerDependenciesMeta:
       typescript:
         optional: true
 
-  '@jridgewell/gen-mapping@0.3.8':
-    resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
-    engines: {node: '>=6.0.0'}
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
 
   '@jridgewell/resolve-uri@3.1.2':
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
 
-  '@jridgewell/set-array@1.2.1':
-    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
-    engines: {node: '>=6.0.0'}
-
-  '@jridgewell/sourcemap-codec@1.5.0':
-    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
+  '@jridgewell/sourcemap-codec@1.6.0':
+    resolution: {integrity: sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==}
 
-  '@jridgewell/trace-mapping@0.3.25':
-    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
   '@mdx-js/react@3.1.0':
     resolution: {integrity: sha512-QjHtSaoameoalGnKDT3FoIl4+9RwyTmo9ZJGBdLOks/YOiWHoRDI3PUwEzOE7kEmGcV3AFcp9K6dYu9rEuKLAQ==}
@@ -842,7295 +1114,4781 @@ packages:
       '@types/react': '>=16'
       react: '>=16'
 
-  '@microsoft/api-extractor-model@7.30.6':
-    resolution: {integrity: sha512-znmFn69wf/AIrwHya3fxX6uB5etSIn6vg4Q4RB/tb5VDDs1rqREc+AvMC/p19MUN13CZ7+V/8pkYPTj7q8tftg==}
+  '@napi-rs/wasm-runtime@1.2.5':
+    resolution: {integrity: sha512-HshSvXzmBxNzqejd3k/KemgQ3hdREUYFRRrgxOZ+gPljDIsO2SDZrVZMd4Z/HsxudQbE62OVyVFE8z9BCurfjA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=23.5.0}
+    peerDependencies:
+      '@emnapi/core': ^1.7.1 || ^2.0.0-alpha.4
+      '@emnapi/runtime': ^1.7.1 || ^2.0.0-alpha.4
 
-  '@microsoft/api-extractor@7.52.8':
-    resolution: {integrity: sha512-cszYIcjiNscDoMB1CIKZ3My61+JOhpERGlGr54i6bocvGLrcL/wo9o+RNXMBrb7XgLtKaizZWUpqRduQuHQLdg==}
-    hasBin: true
-
-  '@microsoft/tsdoc-config@0.17.1':
-    resolution: {integrity: sha512-UtjIFe0C6oYgTnad4q1QP4qXwLhe6tIpNTRStJ2RZEPIkqQPREAwE5spzVxsdn9UaEMUqhh0AqSx3X4nWAKXWw==}
-
-  '@microsoft/tsdoc@0.15.1':
-    resolution: {integrity: sha512-4aErSrCR/On/e5G2hDP0wjooqDdauzEbIq8hIkIe5pXV0rtWJZvdCEKL0ykZxex+IxIwBp0eGeV48hQN07dXtw==}
-
-  '@napi-rs/wasm-runtime@0.2.9':
-    resolution: {integrity: sha512-OKRBiajrrxB9ATokgEQoG87Z25c67pCpYcCwmXYX8PBftC9pBfN18gnm/fh1wurSLEKIAt+QRFLFCQISrb66Jg==}
-
-  '@nodelib/fs.scandir@2.1.5':
-    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
-    engines: {node: '>= 8'}
-
-  '@nodelib/fs.stat@2.0.5':
-    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
-    engines: {node: '>= 8'}
-
-  '@nodelib/fs.walk@1.2.8':
-    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
-    engines: {node: '>= 8'}
-
-  '@pkgjs/parseargs@0.11.0':
-    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
-    engines: {node: '>=14'}
-
-  '@pkgr/core@0.1.2':
-    resolution: {integrity: sha512-fdDH1LSGfZdTH2sxdpVMw31BanV28K/Gry0cVFxaNP77neJSkd82mM8ErPNYs9e+0O7SdHBLTDzDgwUuy18RnQ==}
-    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
-
-  '@polka/url@1.0.0-next.29':
-    resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
-
-  '@quansync/fs@0.1.3':
-    resolution: {integrity: sha512-G0OnZbMWEs5LhDyqy2UL17vGhSVHkQIfVojMtEWVenvj0V5S84VBgy86kJIuNsGDp2p7sTKlpSIpBUWdC35OKg==}
-    engines: {node: '>=20.0.0'}
-
-  '@radix-ui/number@1.1.1':
-    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
-
-  '@radix-ui/primitive@1.1.2':
-    resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
-
-  '@radix-ui/react-alert-dialog@1.1.13':
-    resolution: {integrity: sha512-/uPs78OwxGxslYOG5TKeUsv9fZC0vo376cXSADdKirTmsLJU2au6L3n34c3p6W26rFDDDze/hwy4fYeNd0qdGA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-arrow@1.1.6':
-    resolution: {integrity: sha512-2JMfHJf/eVnwq+2dewT3C0acmCWD3XiVA1Da+jTDqo342UlU13WvXtqHhG+yJw5JeQmu4ue2eMy6gcEArLBlcw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-checkbox@1.3.1':
-    resolution: {integrity: sha512-xTaLKAO+XXMPK/BpVTSaAAhlefmvMSACjIhK9mGsImvX2ljcTDm8VGR1CuS1uYcNdR5J+oiOhoJZc5un6bh3VQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-collection@1.1.6':
-    resolution: {integrity: sha512-PbhRFK4lIEw9ADonj48tiYWzkllz81TM7KVYyyMMw2cwHO7D5h4XKEblL8NlaRisTK3QTe6tBEhDccFUryxHBQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-compose-refs@1.1.2':
-    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-context@1.1.2':
-    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-dialog@1.1.13':
-    resolution: {integrity: sha512-ARFmqUyhIVS3+riWzwGTe7JLjqwqgnODBUZdqpWar/z1WFs9z76fuOs/2BOWCR+YboRn4/WN9aoaGVwqNRr8VA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-direction@1.1.1':
-    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-dismissable-layer@1.1.9':
-    resolution: {integrity: sha512-way197PiTvNp+WBP7svMJasHl+vibhWGQDb6Mgf5mhEWJkgb85z7Lfl9TUdkqpWsf8GRNmoopx9ZxCyDzmgRMQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-dropdown-menu@2.1.14':
-    resolution: {integrity: sha512-lzuyNjoWOoaMFE/VC5FnAAYM16JmQA8ZmucOXtlhm2kKR5TSU95YLAueQ4JYuRmUJmBvSqXaVFGIfuukybwZJQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-focus-guards@1.1.2':
-    resolution: {integrity: sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-focus-scope@1.1.6':
-    resolution: {integrity: sha512-r9zpYNUQY+2jWHWZGyddQLL9YHkM/XvSFHVcWs7bdVuxMAnCwTAuy6Pf47Z4nw7dYcUou1vg/VgjjrrH03VeBw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-id@1.1.1':
-    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-label@2.1.6':
-    resolution: {integrity: sha512-S/hv1mTlgcPX2gCTJrWuTjSXf7ER3Zf7zWGtOprxhIIY93Qin3n5VgNA0Ez9AgrK/lEtlYgzLd4f5x6AVar4Yw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-menu@2.1.14':
-    resolution: {integrity: sha512-0zSiBAIFq9GSKoSH5PdEaQeRB3RnEGxC+H2P0egtnKoKKLNBH8VBHyVO6/jskhjAezhOIplyRUj7U2lds9A+Yg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-popover@1.1.13':
-    resolution: {integrity: sha512-84uqQV3omKDR076izYgcha6gdpN8m3z6w/AeJ83MSBJYVG/AbOHdLjAgsPZkeC/kt+k64moXFCnio8BbqXszlw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-popper@1.2.6':
-    resolution: {integrity: sha512-7iqXaOWIjDBfIG7aq8CUEeCSsQMLFdn7VEE8TaFz704DtEzpPHR7w/uuzRflvKgltqSAImgcmxQ7fFX3X7wasg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-portal@1.1.8':
-    resolution: {integrity: sha512-hQsTUIn7p7fxCPvao/q6wpbxmCwgLrlz+nOrJgC+RwfZqWY/WN+UMqkXzrtKbPrF82P43eCTl3ekeKuyAQbFeg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-presence@1.1.4':
-    resolution: {integrity: sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-primitive@2.1.2':
-    resolution: {integrity: sha512-uHa+l/lKfxuDD2zjN/0peM/RhhSmRjr5YWdk/37EnSv1nJ88uvG85DPexSm8HdFQROd2VdERJ6ynXbkCFi+APw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-radio-group@1.3.6':
-    resolution: {integrity: sha512-1tfTAqnYZNVwSpFhCT273nzK8qGBReeYnNTPspCggqk1fvIrfVxJekIuBFidNivzpdiMqDwVGnQvHqXrRPM4Og==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-roving-focus@1.1.9':
-    resolution: {integrity: sha512-ZzrIFnMYHHCNqSNCsuN6l7wlewBEq0O0BCSBkabJMFXVO51LRUTq71gLP1UxFvmrXElqmPjA5VX7IqC9VpazAQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-scroll-area@1.2.8':
-    resolution: {integrity: sha512-K5h1RkYA6M0Sn61BV5LQs686zqBsSC0sGzL4/Gw4mNnjzrQcGSc6YXfC6CRFNaGydSdv5+M8cb0eNsOGo0OXtQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-select@2.2.4':
-    resolution: {integrity: sha512-/OOm58Gil4Ev5zT8LyVzqfBcij4dTHYdeyuF5lMHZ2bIp0Lk9oETocYiJ5QC0dHekEQnK6L/FNJCceeb4AkZ6Q==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-separator@1.1.6':
-    resolution: {integrity: sha512-Izof3lPpbCfTM7WDta+LRkz31jem890VjEvpVRoWQNKpDUMMVffuyq854XPGP1KYGWWmjmYvHvPFeocWhFCy1w==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-slider@1.3.4':
-    resolution: {integrity: sha512-Cp6hEmQtRJFci285vkdIJ+HCDLTRDk+25VhFwa1fcubywjMUE3PynBgtN5RLudOgSCYMlT4jizCXdmV+8J7Y2w==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-slot@1.2.2':
-    resolution: {integrity: sha512-y7TBO4xN4Y94FvcWIOIh18fM4R1A8S4q1jhoz4PNzOoHsFcN8pogcFmZrTYAm4F9VRUrWP/Mw7xSKybIeRI+CQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-switch@1.2.4':
-    resolution: {integrity: sha512-yZCky6XZFnR7pcGonJkr9VyNRu46KcYAbyg1v/gVVCZUr8UJ4x+RpncC27hHtiZ15jC+3WS8Yg/JSgyIHnYYsQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-tabs@1.1.11':
-    resolution: {integrity: sha512-4FiKSVoXqPP/KfzlB7lwwqoFV6EPwkrrqGp9cUYXjwDYHhvpnqq79P+EPHKcdoTE7Rl8w/+6s9rTlsfXHES9GA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-toggle-group@1.1.9':
-    resolution: {integrity: sha512-HJ6gXdYVN38q/5KDdCcd+JTuXUyFZBMJbwXaU/82/Gi+V2ps6KpiZ2sQecAeZCV80POGRfkUBdUIj6hIdF6/MQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-toggle@1.1.8':
-    resolution: {integrity: sha512-hrpa59m3zDnsa35LrTOH5s/a3iGv/VD+KKQjjiCTo/W4r0XwPpiWQvAv6Xl1nupSoaZeNNxW6sJH9ZydsjKdYQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-tooltip@1.2.6':
-    resolution: {integrity: sha512-zYb+9dc9tkoN2JjBDIIPLQtk3gGyz8FMKoqYTb8EMVQ5a5hBcdHPECrsZVI4NpPAUOixhkoqg7Hj5ry5USowfA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-use-callback-ref@1.1.1':
-    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-controllable-state@1.2.2':
-    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-effect-event@0.0.2':
-    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-escape-keydown@1.1.1':
-    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-layout-effect@1.1.1':
-    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-previous@1.1.1':
-    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-rect@1.1.1':
-    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-size@1.1.1':
-    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-visually-hidden@1.2.2':
-    resolution: {integrity: sha512-ORCmRUbNiZIv6uV5mhFrhsIKw4UX/N3syZtyqvry61tbGm4JlgQuSn0hk5TwCARsCjkcnuRkSdCE3xfb+ADHew==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/rect@1.1.1':
-    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
-
-  '@rollup/plugin-alias@5.1.1':
-    resolution: {integrity: sha512-PR9zDb+rOzkRb2VD+EuKB7UC41vU5DIwZ5qqCpk0KJudcWAyi8rvYOhS7+L5aZCspw1stTViLgN5v6FF1p5cgQ==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-
-  '@rollup/plugin-commonjs@28.0.3':
-    resolution: {integrity: sha512-pyltgilam1QPdn+Zd9gaCfOLcnjMEJ9gV+bTw6/r73INdvzf1ah9zLIJBm+kW7R6IUFIQ1YO+VqZtYxZNWFPEQ==}
-    engines: {node: '>=16.0.0 || 14 >= 14.17'}
-    peerDependencies:
-      rollup: ^2.68.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-
-  '@rollup/plugin-json@6.1.0':
-    resolution: {integrity: sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-
-  '@rollup/plugin-node-resolve@16.0.1':
-    resolution: {integrity: sha512-tk5YCxJWIG81umIvNkSod2qK5KyQW19qcBF/B78n1bjtOON6gzKoVeSzAE8yHCZEDmqkHKkxplExA8KzdJLJpA==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^2.78.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-
-  '@rollup/plugin-replace@6.0.2':
-    resolution: {integrity: sha512-7QaYCf8bqF04dOy7w/eHmJeNExxTYwvKAmlSAH/EaWWUzbT0h5sbF6bktFoX/0F/0qwng5/dWFMyf3gzaM8DsQ==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-
-  '@rollup/pluginutils@5.1.4':
-    resolution: {integrity: sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-
-  '@rollup/rollup-android-arm-eabi@4.40.1':
-    resolution: {integrity: sha512-kxz0YeeCrRUHz3zyqvd7n+TVRlNyTifBsmnmNPtk3hQURUyG9eAB+usz6DAwagMusjx/zb3AjvDUvhFGDAexGw==}
-    cpu: [arm]
-    os: [android]
-
-  '@rollup/rollup-android-arm64@4.40.1':
-    resolution: {integrity: sha512-PPkxTOisoNC6TpnDKatjKkjRMsdaWIhyuMkA4UsBXT9WEZY4uHezBTjs6Vl4PbqQQeu6oION1w2voYZv9yquCw==}
-    cpu: [arm64]
-    os: [android]
-
-  '@rollup/rollup-darwin-arm64@4.40.1':
-    resolution: {integrity: sha512-VWXGISWFY18v/0JyNUy4A46KCFCb9NVsH+1100XP31lud+TzlezBbz24CYzbnA4x6w4hx+NYCXDfnvDVO6lcAA==}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@rollup/rollup-darwin-x64@4.40.1':
-    resolution: {integrity: sha512-nIwkXafAI1/QCS7pxSpv/ZtFW6TXcNUEHAIA9EIyw5OzxJZQ1YDrX+CL6JAIQgZ33CInl1R6mHet9Y/UZTg2Bw==}
-    cpu: [x64]
-    os: [darwin]
-
-  '@rollup/rollup-freebsd-arm64@4.40.1':
-    resolution: {integrity: sha512-BdrLJ2mHTrIYdaS2I99mriyJfGGenSaP+UwGi1kB9BLOCu9SR8ZpbkmmalKIALnRw24kM7qCN0IOm6L0S44iWw==}
-    cpu: [arm64]
-    os: [freebsd]
-
-  '@rollup/rollup-freebsd-x64@4.40.1':
-    resolution: {integrity: sha512-VXeo/puqvCG8JBPNZXZf5Dqq7BzElNJzHRRw3vjBE27WujdzuOPecDPc/+1DcdcTptNBep3861jNq0mYkT8Z6Q==}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@rollup/rollup-linux-arm-gnueabihf@4.40.1':
-    resolution: {integrity: sha512-ehSKrewwsESPt1TgSE/na9nIhWCosfGSFqv7vwEtjyAqZcvbGIg4JAcV7ZEh2tfj/IlfBeZjgOXm35iOOjadcg==}
-    cpu: [arm]
-    os: [linux]
-
-  '@rollup/rollup-linux-arm-musleabihf@4.40.1':
-    resolution: {integrity: sha512-m39iO/aaurh5FVIu/F4/Zsl8xppd76S4qoID8E+dSRQvTyZTOI2gVk3T4oqzfq1PtcvOfAVlwLMK3KRQMaR8lg==}
-    cpu: [arm]
-    os: [linux]
-
-  '@rollup/rollup-linux-arm64-gnu@4.40.1':
-    resolution: {integrity: sha512-Y+GHnGaku4aVLSgrT0uWe2o2Rq8te9hi+MwqGF9r9ORgXhmHK5Q71N757u0F8yU1OIwUIFy6YiJtKjtyktk5hg==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@rollup/rollup-linux-arm64-musl@4.40.1':
-    resolution: {integrity: sha512-jEwjn3jCA+tQGswK3aEWcD09/7M5wGwc6+flhva7dsQNRZZTe30vkalgIzV4tjkopsTS9Jd7Y1Bsj6a4lzz8gQ==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@rollup/rollup-linux-loongarch64-gnu@4.40.1':
-    resolution: {integrity: sha512-ySyWikVhNzv+BV/IDCsrraOAZ3UaC8SZB67FZlqVwXwnFhPihOso9rPOxzZbjp81suB1O2Topw+6Ug3JNegejQ==}
-    cpu: [loong64]
-    os: [linux]
-
-  '@rollup/rollup-linux-powerpc64le-gnu@4.40.1':
-    resolution: {integrity: sha512-BvvA64QxZlh7WZWqDPPdt0GH4bznuL6uOO1pmgPnnv86rpUpc8ZxgZwcEgXvo02GRIZX1hQ0j0pAnhwkhwPqWg==}
-    cpu: [ppc64]
-    os: [linux]
-
-  '@rollup/rollup-linux-riscv64-gnu@4.40.1':
-    resolution: {integrity: sha512-EQSP+8+1VuSulm9RKSMKitTav89fKbHymTf25n5+Yr6gAPZxYWpj3DzAsQqoaHAk9YX2lwEyAf9S4W8F4l3VBQ==}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@rollup/rollup-linux-riscv64-musl@4.40.1':
-    resolution: {integrity: sha512-n/vQ4xRZXKuIpqukkMXZt9RWdl+2zgGNx7Uda8NtmLJ06NL8jiHxUawbwC+hdSq1rrw/9CghCpEONor+l1e2gA==}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@rollup/rollup-linux-s390x-gnu@4.40.1':
-    resolution: {integrity: sha512-h8d28xzYb98fMQKUz0w2fMc1XuGzLLjdyxVIbhbil4ELfk5/orZlSTpF/xdI9C8K0I8lCkq+1En2RJsawZekkg==}
-    cpu: [s390x]
-    os: [linux]
-
-  '@rollup/rollup-linux-x64-gnu@4.40.1':
-    resolution: {integrity: sha512-XiK5z70PEFEFqcNj3/zRSz/qX4bp4QIraTy9QjwJAb/Z8GM7kVUsD0Uk8maIPeTyPCP03ChdI+VVmJriKYbRHQ==}
-    cpu: [x64]
-    os: [linux]
-
-  '@rollup/rollup-linux-x64-musl@4.40.1':
-    resolution: {integrity: sha512-2BRORitq5rQ4Da9blVovzNCMaUlyKrzMSvkVR0D4qPuOy/+pMCrh1d7o01RATwVy+6Fa1WBw+da7QPeLWU/1mQ==}
-    cpu: [x64]
-    os: [linux]
-
-  '@rollup/rollup-win32-arm64-msvc@4.40.1':
-    resolution: {integrity: sha512-b2bcNm9Kbde03H+q+Jjw9tSfhYkzrDUf2d5MAd1bOJuVplXvFhWz7tRtWvD8/ORZi7qSCy0idW6tf2HgxSXQSg==}
-    cpu: [arm64]
-    os: [win32]
-
-  '@rollup/rollup-win32-ia32-msvc@4.40.1':
-    resolution: {integrity: sha512-DfcogW8N7Zg7llVEfpqWMZcaErKfsj9VvmfSyRjCyo4BI3wPEfrzTtJkZG6gKP/Z92wFm6rz2aDO7/JfiR/whA==}
-    cpu: [ia32]
-    os: [win32]
-
-  '@rollup/rollup-win32-x64-msvc@4.40.1':
-    resolution: {integrity: sha512-ECyOuDeH3C1I8jH2MK1RtBJW+YPMvSfT0a5NN0nHfQYnDSJ6tUiZH3gzwVP5/Kfh/+Tt7tpWVF9LXNTnhTJ3kA==}
-    cpu: [x64]
-    os: [win32]
-
-  '@rushstack/node-core-library@5.13.1':
-    resolution: {integrity: sha512-5yXhzPFGEkVc9Fu92wsNJ9jlvdwz4RNb2bMso+/+TH0nMm1jDDDsOIf4l8GAkPxGuwPw5DH24RliWVfSPhlW/Q==}
-    peerDependencies:
-      '@types/node': '*'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-
-  '@rushstack/rig-package@0.5.3':
-    resolution: {integrity: sha512-olzSSjYrvCNxUFZowevC3uz8gvKr3WTpHQ7BkpjtRpA3wK+T0ybep/SRUMfr195gBzJm5gaXw0ZMgjIyHqJUow==}
-
-  '@rushstack/terminal@0.15.3':
-    resolution: {integrity: sha512-DGJ0B2Vm69468kZCJkPj3AH5nN+nR9SPmC0rFHtzsS4lBQ7/dgOwtwVxYP7W9JPDMuRBkJ4KHmWKr036eJsj9g==}
-    peerDependencies:
-      '@types/node': '*'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-
-  '@rushstack/ts-command-line@5.0.1':
-    resolution: {integrity: sha512-bsbUucn41UXrQK7wgM8CNM/jagBytEyJqXw/umtI8d68vFm1Jwxh1OtLrlW7uGZgjCWiiPH6ooUNa1aVsuVr3Q==}
-
-  '@storybook/addon-actions@8.6.14':
-    resolution: {integrity: sha512-mDQxylxGGCQSK7tJPkD144J8jWh9IU9ziJMHfB84PKpI/V5ZgqMDnpr2bssTrUaGDqU5e1/z8KcRF+Melhs9pQ==}
-    peerDependencies:
-      storybook: ^8.6.14
-
-  '@storybook/addon-backgrounds@8.6.14':
-    resolution: {integrity: sha512-l9xS8qWe5n4tvMwth09QxH2PmJbCctEvBAc1tjjRasAfrd69f7/uFK4WhwJAstzBTNgTc8VXI4w8ZR97i1sFbg==}
-    peerDependencies:
-      storybook: ^8.6.14
-
-  '@storybook/addon-controls@8.6.14':
-    resolution: {integrity: sha512-IiQpkNJdiRyA4Mq9mzjZlvQugL/aE7hNgVxBBGPiIZG6wb6Ht9hNnBYpap5ZXXFKV9p2qVI0FZK445ONmAa+Cw==}
-    peerDependencies:
-      storybook: ^8.6.14
-
-  '@storybook/addon-docs@8.6.14':
-    resolution: {integrity: sha512-Obpd0OhAF99JyU5pp5ci17YmpcQtMNgqW2pTXV8jAiiipWpwO++hNDeQmLmlSXB399XjtRDOcDVkoc7rc6JzdQ==}
-    peerDependencies:
-      storybook: ^8.6.14
-
-  '@storybook/addon-essentials@8.6.14':
-    resolution: {integrity: sha512-5ZZSHNaW9mXMOFkoPyc3QkoNGdJHETZydI62/OASR0lmPlJ1065TNigEo5dJddmZNn0/3bkE8eKMAzLnO5eIdA==}
-    peerDependencies:
-      storybook: ^8.6.14
-
-  '@storybook/addon-highlight@8.6.14':
-    resolution: {integrity: sha512-4H19OJlapkofiE9tM6K/vsepf4ir9jMm9T+zw5L85blJZxhKZIbJ6FO0TCG9PDc4iPt3L6+aq5B0X29s9zicNQ==}
-    peerDependencies:
-      storybook: ^8.6.14
-
-  '@storybook/addon-interactions@8.6.14':
-    resolution: {integrity: sha512-8VmElhm2XOjh22l/dO4UmXxNOolGhNiSpBcls2pqWSraVh4a670EyYBZsHpkXqfNHo2YgKyZN3C91+9zfH79qQ==}
-    peerDependencies:
-      storybook: ^8.6.14
-
-  '@storybook/addon-links@8.6.14':
-    resolution: {integrity: sha512-DRlXHIyZzOruAZkxmXfVgTF+4d6K27pFcH4cUsm3KT1AXuZbr23lb5iZHpUZoG6lmU85Sru4xCEgewSTXBIe1w==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      storybook: ^8.6.14
-    peerDependenciesMeta:
-      react:
-        optional: true
-
-  '@storybook/addon-measure@8.6.14':
-    resolution: {integrity: sha512-1Tlyb72NX8aAqm6I6OICsUuGOP6hgnXcuFlXucyhKomPa6j3Eu2vKu561t/f0oGtAK2nO93Z70kVaEh5X+vaGw==}
-    peerDependencies:
-      storybook: ^8.6.14
-
-  '@storybook/addon-onboarding@8.6.14':
-    resolution: {integrity: sha512-bHdHiGJFigVcSzMIsNLHY5IODZHr+nKwyz5/QOZLMkLcGH2IaUbOJfm4RyGOaTTPsUtAKbdsVXNEG3Otf+qO9A==}
-    peerDependencies:
-      storybook: ^8.6.14
-
-  '@storybook/addon-outline@8.6.14':
-    resolution: {integrity: sha512-CW857JvN6OxGWElqjlzJO2S69DHf+xO3WsEfT5mT3ZtIjmsvRDukdWfDU9bIYUFyA2lFvYjncBGjbK+I91XR7w==}
-    peerDependencies:
-      storybook: ^8.6.14
-
-  '@storybook/addon-toolbars@8.6.14':
-    resolution: {integrity: sha512-W/wEXT8h3VyZTVfWK/84BAcjAxTdtRiAkT2KAN0nbSHxxB5KEM1MjKpKu2upyzzMa3EywITqbfy4dP6lpkVTwQ==}
-    peerDependencies:
-      storybook: ^8.6.14
-
-  '@storybook/addon-viewport@8.6.14':
-    resolution: {integrity: sha512-gNzVQbMqRC+/4uQTPI2ZrWuRHGquTMZpdgB9DrD88VTEjNudP+J6r8myLfr2VvGksBbUMHkGHMXHuIhrBEnXYA==}
-    peerDependencies:
-      storybook: ^8.6.14
-
-  '@storybook/blocks@8.6.14':
-    resolution: {integrity: sha512-rBMHAfA39AGHgkrDze4RmsnQTMw1ND5fGWobr9pDcJdnDKWQWNRD7Nrlxj0gFlN3n4D9lEZhWGdFrCbku7FVAQ==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      storybook: ^8.6.14
-    peerDependenciesMeta:
-      react:
-        optional: true
-      react-dom:
-        optional: true
-
-  '@storybook/builder-vite@8.6.14':
-    resolution: {integrity: sha512-ajWYhy32ksBWxwWHrjwZzyC0Ii5ZTeu5lsqA95Q/EQBB0P5qWlHWGM3AVyv82Mz/ND03ebGy123uVwgf6olnYQ==}
-    peerDependencies:
-      storybook: ^8.6.14
-      vite: ^4.0.0 || ^5.0.0 || ^6.0.0
-
-  '@storybook/components@8.6.14':
-    resolution: {integrity: sha512-HNR2mC5I4Z5ek8kTrVZlIY/B8gJGs5b3XdZPBPBopTIN6U/YHXiDyOjY3JlaS4fSG1fVhp/Qp1TpMn1w/9m1pw==}
-    peerDependencies:
-      storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
-
-  '@storybook/core@8.6.14':
-    resolution: {integrity: sha512-1P/w4FSNRqP8j3JQBOi3yGt8PVOgSRbP66Ok520T78eJBeqx9ukCfl912PQZ7SPbW3TIunBwLXMZOjZwBB/JmA==}
-    peerDependencies:
-      prettier: ^2 || ^3
-    peerDependenciesMeta:
-      prettier:
-        optional: true
-
-  '@storybook/csf-plugin@8.6.14':
-    resolution: {integrity: sha512-dErtc9teAuN+eelN8FojzFE635xlq9cNGGGEu0WEmMUQ4iJ8pingvBO1N8X3scz4Ry7KnxX++NNf3J3gpxS8qQ==}
-    peerDependencies:
-      storybook: ^8.6.14
-
-  '@storybook/csf@0.1.13':
-    resolution: {integrity: sha512-7xOOwCLGB3ebM87eemep89MYRFTko+D8qE7EdAAq74lgdqRR5cOUtYWJLjO2dLtP94nqoOdHJo6MdLLKzg412Q==}
-
-  '@storybook/global@5.0.0':
-    resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==}
-
-  '@storybook/icons@1.4.0':
-    resolution: {integrity: sha512-Td73IeJxOyalzvjQL+JXx72jlIYHgs+REaHiREOqfpo3A2AYYG71AUbcv+lg7mEDIweKVCxsMQ0UKo634c8XeA==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-
-  '@storybook/instrumenter@8.6.14':
-    resolution: {integrity: sha512-iG4MlWCcz1L7Yu8AwgsnfVAmMbvyRSk700Mfy2g4c8y5O+Cv1ejshE1LBBsCwHgkuqU0H4R0qu4g23+6UnUemQ==}
-    peerDependencies:
-      storybook: ^8.6.14
-
-  '@storybook/manager-api@8.6.14':
-    resolution: {integrity: sha512-ez0Zihuy17udLbfHZQXkGqwtep0mSGgHcNzGN7iZrMP1m+VmNo+7aGCJJdvXi7+iU3yq8weXSQFWg5DqWgLS7g==}
-    peerDependencies:
-      storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
-
-  '@storybook/preview-api@8.6.14':
-    resolution: {integrity: sha512-2GhcCd4dNMrnD7eooEfvbfL4I83qAqEyO0CO7JQAmIO6Rxb9BsOLLI/GD5HkvQB73ArTJ+PT50rfaO820IExOQ==}
-    peerDependencies:
-      storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
-
-  '@storybook/react-dom-shim@8.6.14':
-    resolution: {integrity: sha512-0hixr3dOy3f3M+HBofp3jtMQMS+sqzjKNgl7Arfuj3fvjmyXOks/yGjDImySR4imPtEllvPZfhiQNlejheaInw==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      storybook: ^8.6.14
-
-  '@storybook/react-vite@8.6.14':
-    resolution: {integrity: sha512-FZU0xMPxa4/TO87FgcWwappOxLBHZV5HSRK5K+2bJD7rFJAoNorbHvB4Q1zvIAk7eCMjkr2GPCPHx9PRB9vJFg==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      '@storybook/test': 8.6.14
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      storybook: ^8.6.14
-      vite: ^4.0.0 || ^5.0.0 || ^6.0.0
-    peerDependenciesMeta:
-      '@storybook/test':
-        optional: true
-
-  '@storybook/react@8.6.14':
-    resolution: {integrity: sha512-BOepx5bBFwl/CPI+F+LnmMmsG1wQYmrX/UQXgUbHQUU9Tj7E2ndTnNbpIuSLc8IrM03ru+DfwSg1Co3cxWtT+g==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      '@storybook/test': 8.6.14
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      storybook: ^8.6.14
-      typescript: '>= 4.2.x'
-    peerDependenciesMeta:
-      '@storybook/test':
-        optional: true
-      typescript:
-        optional: true
-
-  '@storybook/test@8.6.14':
-    resolution: {integrity: sha512-GkPNBbbZmz+XRdrhMtkxPotCLOQ1BaGNp/gFZYdGDk2KmUWBKmvc5JxxOhtoXM2703IzNFlQHSSNnhrDZYuLlw==}
-    peerDependencies:
-      storybook: ^8.6.14
-
-  '@storybook/theming@8.6.14':
-    resolution: {integrity: sha512-r4y+LsiB37V5hzpQo+BM10PaCsp7YlZ0YcZzQP1OCkPlYXmUAFy2VvDKaFRpD8IeNPKug2u4iFm/laDEbs03dg==}
-    peerDependencies:
-      storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
-
-  '@stylistic/eslint-plugin@4.2.0':
-    resolution: {integrity: sha512-8hXezgz7jexGHdo5WN6JBEIPHCSFyyU4vgbxevu4YLVS5vl+sxqAAGyXSzfNDyR6xMNSH5H1x67nsXcYMOHtZA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: '>=9.0.0'
-
-  '@testing-library/dom@10.4.0':
-    resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
-    engines: {node: '>=18'}
-
-  '@testing-library/jest-dom@6.5.0':
-    resolution: {integrity: sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA==}
-    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
-
-  '@testing-library/user-event@14.5.2':
-    resolution: {integrity: sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==}
-    engines: {node: '>=12', npm: '>=6'}
-    peerDependencies:
-      '@testing-library/dom': '>=7.21.4'
-
-  '@thinkbuff/eslint-config@0.2.7':
-    resolution: {integrity: sha512-JcLGVyLbKLiO9NrT0u+5IceODltMqixDpuYTEnMIyHbn7gdI4X0aInSJuZ4c1lqfGy7QD3tST1j1wAyT6usW3A==}
-    engines: {node: '>=20'}
-    peerDependencies:
-      '@eslint-react/eslint-plugin': ^1.49.0
-      '@unocss/eslint-plugin': ^66.1.0
-      astro-eslint-parser: ^1.0.2
-      eslint: ^9.26.0
-      eslint-plugin-astro: ^1.3.1
-      eslint-plugin-jsx-a11y: ^6.10.2
-      eslint-plugin-react-hooks: ^5.2.0
-      eslint-plugin-react-refresh: ^0.4.20
-    peerDependenciesMeta:
-      '@eslint-react/eslint-plugin':
-        optional: true
-      '@unocss/eslint-plugin':
-        optional: true
-      astro-eslint-parser:
-        optional: true
-      eslint-plugin-astro:
-        optional: true
-      eslint-plugin-jsx-a11y:
-        optional: true
-      eslint-plugin-react-hooks:
-        optional: true
-      eslint-plugin-react-refresh:
-        optional: true
-
-  '@trysound/sax@0.2.0':
-    resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
-    engines: {node: '>=10.13.0'}
-
-  '@tybys/wasm-util@0.9.0':
-    resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==}
-
-  '@types/argparse@1.0.38':
-    resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==}
-
-  '@types/aria-query@5.0.4':
-    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
-
-  '@types/babel__core@7.20.5':
-    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
-
-  '@types/babel__generator@7.27.0':
-    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
-
-  '@types/babel__template@7.4.4':
-    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
-
-  '@types/babel__traverse@7.20.7':
-    resolution: {integrity: sha512-dkO5fhS7+/oos4ciWxyEyjWe48zmG6wbCheo/G2ZnHx4fs3EU6YC6UM8rk56gAjNJ9P3MTH2jo5jb92/K6wbng==}
-
-  '@types/doctrine@0.0.9':
-    resolution: {integrity: sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==}
-
-  '@types/estree@1.0.7':
-    resolution: {integrity: sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==}
-
-  '@types/json-schema@7.0.15':
-    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
-
-  '@types/mdx@2.0.13':
-    resolution: {integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==}
-
-  '@types/node@22.15.18':
-    resolution: {integrity: sha512-v1DKRfUdyW+jJhZNEI1PYy29S2YRxMV5AOO/x/SjKmW0acCIOqmbj6Haf9eHAhsPmrhlHSxEhv/1WszcLWV4cg==}
-
-  '@types/react-dom@19.1.5':
-    resolution: {integrity: sha512-CMCjrWucUBZvohgZxkjd6S9h0nZxXjzus6yDfUb+xLxYM7VvjKNH1tQrE9GWLql1XoOP4/Ds3bwFqShHUYraGg==}
-    peerDependencies:
-      '@types/react': ^19.0.0
-
-  '@types/react@19.1.4':
-    resolution: {integrity: sha512-EB1yiiYdvySuIITtD5lhW4yPyJ31RkJkkDw794LaQYrxCSaQV/47y5o1FMC4zF9ZyjUjzJMZwbovEnT5yHTW6g==}
-
-  '@types/resolve@1.20.2':
-    resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
-
-  '@types/resolve@1.20.6':
-    resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==}
-
-  '@types/uuid@9.0.8':
-    resolution: {integrity: sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==}
-
-  '@typescript-eslint/eslint-plugin@8.31.1':
-    resolution: {integrity: sha512-oUlH4h1ABavI4F0Xnl8/fOtML/eu8nI2A1nYd+f+55XI0BLu+RIqKoCiZKNo6DtqZBEQm5aNKA20G3Z5w3R6GQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
-
-  '@typescript-eslint/parser@8.31.1':
-    resolution: {integrity: sha512-oU/OtYVydhXnumd0BobL9rkJg7wFJ9bFFPmSmB/bf/XWN85hlViji59ko6bSKBXyseT9V8l+CN1nwmlbiN0G7Q==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
-
-  '@typescript-eslint/scope-manager@8.31.1':
-    resolution: {integrity: sha512-BMNLOElPxrtNQMIsFHE+3P0Yf1z0dJqV9zLdDxN/xLlWMlXK/ApEsVEKzpizg9oal8bAT5Sc7+ocal7AC1HCVw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/scope-manager@8.32.1':
-    resolution: {integrity: sha512-7IsIaIDeZn7kffk7qXC3o6Z4UblZJKV3UBpkvRNpr5NSyLji7tvTcvmnMNYuYLyh26mN8W723xpo3i4MlD33vA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/type-utils@8.31.1':
-    resolution: {integrity: sha512-fNaT/m9n0+dpSp8G/iOQ05GoHYXbxw81x+yvr7TArTuZuCA6VVKbqWYVZrV5dVagpDTtj/O8k5HBEE/p/HM5LA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
-
-  '@typescript-eslint/types@8.31.1':
-    resolution: {integrity: sha512-SfepaEFUDQYRoA70DD9GtytljBePSj17qPxFHA/h3eg6lPTqGJ5mWOtbXCk1YrVU1cTJRd14nhaXWFu0l2troQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/types@8.32.1':
-    resolution: {integrity: sha512-YmybwXUJcgGqgAp6bEsgpPXEg6dcCyPyCSr0CAAueacR/CCBi25G3V8gGQ2kRzQRBNol7VQknxMs9HvVa9Rvfg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/typescript-estree@8.31.1':
-    resolution: {integrity: sha512-kaA0ueLe2v7KunYOyWYtlf/QhhZb7+qh4Yw6Ni5kgukMIG+iP773tjgBiLWIXYumWCwEq3nLW+TUywEp8uEeag==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <5.9.0'
-
-  '@typescript-eslint/typescript-estree@8.32.1':
-    resolution: {integrity: sha512-Y3AP9EIfYwBb4kWGb+simvPaqQoT5oJuzzj9m0i6FCY6SPvlomY2Ei4UEMm7+FXtlNJbor80ximyslzaQF6xhg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <5.9.0'
-
-  '@typescript-eslint/utils@8.31.1':
-    resolution: {integrity: sha512-2DSI4SNfF5T4oRveQ4nUrSjUqjMND0nLq9rEkz0gfGr3tg0S5KB6DhwR+WZPCjzkZl3cH+4x2ce3EsL50FubjQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
-
-  '@typescript-eslint/utils@8.32.1':
-    resolution: {integrity: sha512-DsSFNIgLSrc89gpq1LJB7Hm1YpuhK086DRDJSNrewcGvYloWW1vZLHBTIvarKZDcAORIy/uWNx8Gad+4oMpkSA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
-
-  '@typescript-eslint/visitor-keys@8.31.1':
-    resolution: {integrity: sha512-I+/rgqOVBn6f0o7NDTmAPWWC6NuqhV174lfYvAm9fUaWeiefLdux9/YI3/nLugEn9L8fcSi0XmpKi/r5u0nmpw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/visitor-keys@8.32.1':
-    resolution: {integrity: sha512-ar0tjQfObzhSaW3C3QNmTc5ofj0hDoNQ5XWrCy6zDyabdr0TWhCkClp+rywGNj/odAFBVzzJrK4tEq5M4Hmu4w==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@unocss/astro@66.1.2':
-    resolution: {integrity: sha512-QBcvrPp0F2jqe2Y/S/FQDmEmNlAhGjeWN5fkUGj02N7mXRrg0/VJxSpOJH6XHRWkMoFPoNNyEjHk563ODbjtHw==}
-    peerDependencies:
-      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0
-    peerDependenciesMeta:
-      vite:
-        optional: true
-
-  '@unocss/cli@66.1.2':
-    resolution: {integrity: sha512-bYCRpkGMu0QwC6Ktq3S/HwtcIW8Famy0dXOu1RIAM1IT60lq+4S5UTEBPdwryoFgDBoVMB7KLUhPYiGQ3pmSTA==}
-    engines: {node: '>=14'}
-    hasBin: true
-
-  '@unocss/config@66.1.2':
-    resolution: {integrity: sha512-2sQXj+Qaq4RVDELVTPoXMggZ30g1WKHeCuur396I12Ab0HgAR6bTc/DIrNtqKVHFI3mmlvP1oM1ynhKWSKPsTg==}
-    engines: {node: '>=14'}
-
-  '@unocss/core@66.1.2':
-    resolution: {integrity: sha512-mN9h1hHEuhDcdbI4z74o7UnxlBZYVsJpYcdC1YLWBKROcLYTkuyZ7hgBzpo1FBNox2Bt3JnrSinVDmc44Bxjow==}
-
-  '@unocss/eslint-plugin@66.1.2':
-    resolution: {integrity: sha512-OwBqODMtY7mLvVirfI1QqxJN/3Ewc1Z8pHTwRxEpBN0w95z8ZvaMzViicci015Yb8JFJ9vs5GlhgoEm/hkenXQ==}
-    engines: {node: '>=14'}
-
-  '@unocss/extractor-arbitrary-variants@66.1.2':
-    resolution: {integrity: sha512-F570wH9VYeFTb4r8qgcbN5QpEVIAvFC1zOnrAPUr6B6kbU2YChMXxHP7PHK0AzLHnEr458Pwpzl6hmP6bzxZ8g==}
-
-  '@unocss/inspector@66.1.2':
-    resolution: {integrity: sha512-ftdZzFP5DAKDzgBI078xDDZbNNVq1RV/yhpNkviBvWCUsgRWc6o3G8swqJPIvFaphmUms0RIYH9shmXilVXFtA==}
-
-  '@unocss/postcss@66.1.2':
-    resolution: {integrity: sha512-RCA3or1qBdRVduNW73xdeiFDCEb8cvcGKsHSN66rL66RrlzNnunE4NE55vbI+yoArTRZ7RdUnxq1KuXKjrJbYw==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      postcss: ^8.4.21
-
-  '@unocss/preset-attributify@66.1.2':
-    resolution: {integrity: sha512-i7+LRtpxbtSzS+gHdc+aW99mGLYeR8hUnEWqFNnr+MiiyzbD8yFimye/u8TySSBLzPKGbLCb4YWVV684BuZgxA==}
-
-  '@unocss/preset-icons@66.1.2':
-    resolution: {integrity: sha512-14390jFBJ2anuKvjX9TeRCm7adNjR/mey0bh0+S/k/5W3VugIY2y0E+OH3m+sx5d/5ZUYbYkUGsmtuKbVNwwxQ==}
-
-  '@unocss/preset-mini@66.1.2':
-    resolution: {integrity: sha512-oiDe+VhwZ8B5Z0UGfggtOwgpRZMLtH1RTDFvmJmJEXYYX5BPWknS6wYcQzxy0i/y9ym0xp2QnEaTpGmR7LKdkg==}
-
-  '@unocss/preset-rem-to-px@66.1.2':
-    resolution: {integrity: sha512-GYDdrWgxHNJBXpzctLZbGiHPjQEZ/bRrVs+2VFkaOzfLaSB7Rr75T8adnmJhwDtiM0v1rvnS+yQSBC+c4Fgg3A==}
-
-  '@unocss/preset-tagify@66.1.2':
-    resolution: {integrity: sha512-Xw5sFJGuzmGnfAXMI0kAiWDBh4DT3cOyphcyY9grBxbmxgqQDxRFHOV3Eg85lWK6X5cScOv3DhO0ndGv5ND8YA==}
-
-  '@unocss/preset-typography@66.1.2':
-    resolution: {integrity: sha512-+k9zp27Ak8rB6LPFDwq9fcwd3+ivFeSvXFQ2d4fBCwGGOAKHIA7qHLg3etxRaMhGd3YUPv/6d7FWpBbQgUVYZw==}
-
-  '@unocss/preset-uno@66.1.2':
-    resolution: {integrity: sha512-JL9YkDwluu1YGhzBaxO60XkKtZBagL13z3K6dsjsghbs+dKVlh35rhlIm5TZ+NdLAzcLM8PHhXm2ausjSd54Bg==}
-
-  '@unocss/preset-web-fonts@66.1.2':
-    resolution: {integrity: sha512-2ru+6jaac72oUx0kOBgNzbbkVe6oWKjqGmx24uK94fAcrP9eQyd+r7xiFpqXegrQ8+kONI66+HxAClvF2JHqdw==}
-
-  '@unocss/preset-wind3@66.1.2':
-    resolution: {integrity: sha512-S09imGOngAAOXCBCHb3JAtxD1/L7nDWrgEeX6NT0ElDp3X1T6XxUXYJlpjCfcqV/klMoXyYouKvp0YuG9QSgVg==}
-
-  '@unocss/preset-wind4@66.1.2':
-    resolution: {integrity: sha512-03p4rpBAWzz58BzAiKsUuG+6YO7IG6mJMGQAtPzuhd+nVBJLIRa3eBIVXOPmAVz1rNx5XPRTAr6PMC7ycdMFRA==}
-
-  '@unocss/preset-wind@66.1.2':
-    resolution: {integrity: sha512-O3nIfbTbX/YRMFj7jNb7nHBDV47G79qOmyid4WPFZrPV3BbFAo94d/54kSoDVuc8jAt06YYQH9XC4ZeD59Sr3Q==}
-
-  '@unocss/reset@66.1.2':
-    resolution: {integrity: sha512-njNy/QCpuPKBFeEvhYGwwCe3t8R8JTxONsyUB9NsFOamkF13DSlEB4Yy/QLQfIinbbmx0F/wiej/JGOJk1ecDg==}
-
-  '@unocss/rule-utils@66.1.2':
-    resolution: {integrity: sha512-nn0ehvDh7yyWq2mcBDLVpmMAivjRATUroZ8ETinyN1rmfsGesm71R0d1gV3K+Z6YC7a3+dMLc+/qzI7VK3AG/Q==}
-    engines: {node: '>=14'}
-
-  '@unocss/transformer-attributify-jsx@66.1.2':
-    resolution: {integrity: sha512-PNwxpsQlBlTAyw1apIMyioeAKrLAf7axLDjZ4BW20WH7ql0GUwvMhuO/qzsWDpYWdtSlFnnAdWI2aCxyvhzdCA==}
-
-  '@unocss/transformer-compile-class@66.1.2':
-    resolution: {integrity: sha512-viJetYFncLf9llxYQ7DKf5PuSJw08B7qhp0IXv/7ZG7agU09J1mlussC6ff+00iRoMxvG+5uXiYlTzL2vfikwA==}
-
-  '@unocss/transformer-directives@66.1.2':
-    resolution: {integrity: sha512-A41/cPMB+BUEgnhz5kFiTYgSuCAziJy6hSlLYBDcrFbARUsvmhZFou0P2fRr3wDOFxD3BuApHjsefybKTh1UeA==}
-
-  '@unocss/transformer-variant-group@66.1.2':
-    resolution: {integrity: sha512-RfqJmeic4kAwS5OhSk/D00hqla+xXIw8AJH93jYqHfyDhJR5vddEAJi5RBMOL7y6vDQqRlUCEDQvfp3zSmi6iw==}
-
-  '@unocss/vite@66.1.2':
-    resolution: {integrity: sha512-ZJHN8+HKSrclVjT/+S7Vh2t59DK8J44d5nLZPG1Goua7uNK8yYJeOLK2sCGX7aackRer1ZynmglFFzxNFVt+IA==}
-    peerDependencies:
-      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0
-
-  '@unrs/resolver-binding-darwin-arm64@1.7.2':
-    resolution: {integrity: sha512-vxtBno4xvowwNmO/ASL0Y45TpHqmNkAaDtz4Jqb+clmcVSSl8XCG/PNFFkGsXXXS6AMjP+ja/TtNCFFa1QwLRg==}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@unrs/resolver-binding-darwin-x64@1.7.2':
-    resolution: {integrity: sha512-qhVa8ozu92C23Hsmv0BF4+5Dyyd5STT1FolV4whNgbY6mj3kA0qsrGPe35zNR3wAN7eFict3s4Rc2dDTPBTuFQ==}
-    cpu: [x64]
-    os: [darwin]
-
-  '@unrs/resolver-binding-freebsd-x64@1.7.2':
-    resolution: {integrity: sha512-zKKdm2uMXqLFX6Ac7K5ElnnG5VIXbDlFWzg4WJ8CGUedJryM5A3cTgHuGMw1+P5ziV8CRhnSEgOnurTI4vpHpg==}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@unrs/resolver-binding-linux-arm-gnueabihf@1.7.2':
-    resolution: {integrity: sha512-8N1z1TbPnHH+iDS/42GJ0bMPLiGK+cUqOhNbMKtWJ4oFGzqSJk/zoXFzcQkgtI63qMcUI7wW1tq2usZQSb2jxw==}
-    cpu: [arm]
-    os: [linux]
-
-  '@unrs/resolver-binding-linux-arm-musleabihf@1.7.2':
-    resolution: {integrity: sha512-tjYzI9LcAXR9MYd9rO45m1s0B/6bJNuZ6jeOxo1pq1K6OBuRMMmfyvJYval3s9FPPGmrldYA3mi4gWDlWuTFGA==}
-    cpu: [arm]
-    os: [linux]
-
-  '@unrs/resolver-binding-linux-arm64-gnu@1.7.2':
-    resolution: {integrity: sha512-jon9M7DKRLGZ9VYSkFMflvNqu9hDtOCEnO2QAryFWgT6o6AXU8du56V7YqnaLKr6rAbZBWYsYpikF226v423QA==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@unrs/resolver-binding-linux-arm64-musl@1.7.2':
-    resolution: {integrity: sha512-c8Cg4/h+kQ63pL43wBNaVMmOjXI/X62wQmru51qjfTvI7kmCy5uHTJvK/9LrF0G8Jdx8r34d019P1DVJmhXQpA==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@unrs/resolver-binding-linux-ppc64-gnu@1.7.2':
-    resolution: {integrity: sha512-A+lcwRFyrjeJmv3JJvhz5NbcCkLQL6Mk16kHTNm6/aGNc4FwPHPE4DR9DwuCvCnVHvF5IAd9U4VIs/VvVir5lg==}
-    cpu: [ppc64]
-    os: [linux]
-
-  '@unrs/resolver-binding-linux-riscv64-gnu@1.7.2':
-    resolution: {integrity: sha512-hQQ4TJQrSQW8JlPm7tRpXN8OCNP9ez7PajJNjRD1ZTHQAy685OYqPrKjfaMw/8LiHCt8AZ74rfUVHP9vn0N69Q==}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@unrs/resolver-binding-linux-riscv64-musl@1.7.2':
-    resolution: {integrity: sha512-NoAGbiqrxtY8kVooZ24i70CjLDlUFI7nDj3I9y54U94p+3kPxwd2L692YsdLa+cqQ0VoqMWoehDFp21PKRUoIQ==}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@unrs/resolver-binding-linux-s390x-gnu@1.7.2':
-    resolution: {integrity: sha512-KaZByo8xuQZbUhhreBTW+yUnOIHUsv04P8lKjQ5otiGoSJ17ISGYArc+4vKdLEpGaLbemGzr4ZeUbYQQsLWFjA==}
-    cpu: [s390x]
-    os: [linux]
-
-  '@unrs/resolver-binding-linux-x64-gnu@1.7.2':
-    resolution: {integrity: sha512-dEidzJDubxxhUCBJ/SHSMJD/9q7JkyfBMT77Px1npl4xpg9t0POLvnWywSk66BgZS/b2Hy9Y1yFaoMTFJUe9yg==}
-    cpu: [x64]
-    os: [linux]
-
-  '@unrs/resolver-binding-linux-x64-musl@1.7.2':
-    resolution: {integrity: sha512-RvP+Ux3wDjmnZDT4XWFfNBRVG0fMsc+yVzNFUqOflnDfZ9OYujv6nkh+GOr+watwrW4wdp6ASfG/e7bkDradsw==}
-    cpu: [x64]
-    os: [linux]
-
-  '@unrs/resolver-binding-wasm32-wasi@1.7.2':
-    resolution: {integrity: sha512-y797JBmO9IsvXVRCKDXOxjyAE4+CcZpla2GSoBQ33TVb3ILXuFnMrbR/QQZoauBYeOFuu4w3ifWLw52sdHGz6g==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-
-  '@unrs/resolver-binding-win32-arm64-msvc@1.7.2':
-    resolution: {integrity: sha512-gtYTh4/VREVSLA+gHrfbWxaMO/00y+34htY7XpioBTy56YN2eBjkPrY1ML1Zys89X3RJDKVaogzwxlM1qU7egg==}
-    cpu: [arm64]
-    os: [win32]
-
-  '@unrs/resolver-binding-win32-ia32-msvc@1.7.2':
-    resolution: {integrity: sha512-Ywv20XHvHTDRQs12jd3MY8X5C8KLjDbg/jyaal/QLKx3fAShhJyD4blEANInsjxW3P7isHx1Blt56iUDDJO3jg==}
-    cpu: [ia32]
-    os: [win32]
-
-  '@unrs/resolver-binding-win32-x64-msvc@1.7.2':
-    resolution: {integrity: sha512-friS8NEQfHaDbkThxopGk+LuE5v3iY0StruifjQEt7SLbA46OnfgMO15sOTkbpJkol6RB+1l1TYPXh0sCddpvA==}
-    cpu: [x64]
-    os: [win32]
-
-  '@vitejs/plugin-react@4.4.1':
-    resolution: {integrity: sha512-IpEm5ZmeXAP/osiBXVVP5KjFMzbWOonMs0NaQQl+xYnUAcq4oHUBsF2+p4MgKWG4YMmFYJU8A6sxRPuowllm6w==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      vite: ^4.2.0 || ^5.0.0 || ^6.0.0
-
-  '@vitest/expect@2.0.5':
-    resolution: {integrity: sha512-yHZtwuP7JZivj65Gxoi8upUN2OzHTi3zVfjwdpu2WrvCZPLwsJ2Ey5ILIPccoW23dd/zQBlJ4/dhi7DWNyXCpA==}
-
-  '@vitest/pretty-format@2.0.5':
-    resolution: {integrity: sha512-h8k+1oWHfwTkyTkb9egzwNMfJAEx4veaPSnMeKbVSjp4euqGSbQlm5+6VHwTr7u4FJslVVsUG5nopCaAYdOmSQ==}
-
-  '@vitest/pretty-format@2.1.9':
-    resolution: {integrity: sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ==}
-
-  '@vitest/spy@2.0.5':
-    resolution: {integrity: sha512-c/jdthAhvJdpfVuaexSrnawxZz6pywlTPe84LUB2m/4t3rl2fTo9NFGBG4oWgaD+FTgDDV8hJ/nibT7IfH3JfA==}
-
-  '@vitest/utils@2.0.5':
-    resolution: {integrity: sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==}
-
-  '@vitest/utils@2.1.9':
-    resolution: {integrity: sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ==}
-
-  '@volar/language-core@2.4.14':
-    resolution: {integrity: sha512-X6beusV0DvuVseaOEy7GoagS4rYHgDHnTrdOj5jeUb49fW5ceQyP9Ej5rBhqgz2wJggl+2fDbbojq1XKaxDi6w==}
-
-  '@volar/source-map@2.4.14':
-    resolution: {integrity: sha512-5TeKKMh7Sfxo8021cJfmBzcjfY1SsXsPMMjMvjY7ivesdnybqqS+GxGAoXHAOUawQTwtdUxgP65Im+dEmvWtYQ==}
-
-  '@volar/typescript@2.4.14':
-    resolution: {integrity: sha512-p8Z6f/bZM3/HyCdRNFZOEEzts51uV8WHeN8Tnfnm2EBv6FDB2TQLzfVx7aJvnl8ofKAOnS64B2O8bImBFaauRw==}
-
-  '@vue/compiler-core@3.5.13':
-    resolution: {integrity: sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==}
-
-  '@vue/compiler-core@3.5.14':
-    resolution: {integrity: sha512-k7qMHMbKvoCXIxPhquKQVw3Twid3Kg4s7+oYURxLGRd56LiuHJVrvFKI4fm2AM3c8apqODPfVJGoh8nePbXMRA==}
-
-  '@vue/compiler-dom@3.5.13':
-    resolution: {integrity: sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==}
-
-  '@vue/compiler-dom@3.5.14':
-    resolution: {integrity: sha512-1aOCSqxGOea5I80U2hQJvXYpPm/aXo95xL/m/mMhgyPUsKe9jhjwWpziNAw7tYRnbz1I61rd9Mld4W9KmmRoug==}
-
-  '@vue/compiler-sfc@3.5.13':
-    resolution: {integrity: sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==}
-
-  '@vue/compiler-ssr@3.5.13':
-    resolution: {integrity: sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==}
-
-  '@vue/compiler-vue2@2.7.16':
-    resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
-
-  '@vue/language-core@2.2.0':
-    resolution: {integrity: sha512-O1ZZFaaBGkKbsRfnVH1ifOK1/1BUkyK+3SQsfnh6PmMmD4qJcTU8godCeA96jjDRTL6zgnK7YzCHfaUlH2r0Mw==}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@vue/reactivity@3.5.13':
-    resolution: {integrity: sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==}
-
-  '@vue/runtime-core@3.5.13':
-    resolution: {integrity: sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==}
-
-  '@vue/runtime-dom@3.5.13':
-    resolution: {integrity: sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==}
-
-  '@vue/server-renderer@3.5.13':
-    resolution: {integrity: sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==}
-    peerDependencies:
-      vue: 3.5.13
-
-  '@vue/shared@3.5.13':
-    resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
-
-  '@vue/shared@3.5.14':
-    resolution: {integrity: sha512-oXTwNxVfc9EtP1zzXAlSlgARLXNC84frFYkS0HHz0h3E4WZSP9sywqjqzGCP9Y34M8ipNmd380pVgmMuwELDyQ==}
-
-  '@zod/core@0.11.4':
-    resolution: {integrity: sha512-ezfAaaxgjSXZw9sH5QJ4/uqFmg8PbwBFtdSlzz1OoXWcSUR4fj4meS491+lk9ZGxCymjJ/pbOSu7nzcxvHtG0g==}
-
-  '@zod/mini@4.0.0-beta.20250505T012514':
-    resolution: {integrity: sha512-BxGk6wZsfi0uJ70Mty7pChMyvawl5qb9KqyvZFez2l/ypI5fPSHZF2sAWKPOd3oM0u3LXPbE3f68dMlLhTGm9A==}
-
-  acorn-jsx@5.3.2:
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
-
-  acorn@8.14.1:
-    resolution: {integrity: sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-
-  ajv-draft-04@1.0.0:
-    resolution: {integrity: sha512-mv00Te6nmYbRp5DCwclxtt7yV/joXJPGS7nM+97GdxvuttCOfgI3K4U25zboyeX0O+myI8ERluxQe5wljMmVIw==}
-    peerDependencies:
-      ajv: ^8.5.0
-    peerDependenciesMeta:
-      ajv:
-        optional: true
-
-  ajv-formats@3.0.1:
-    resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
-    peerDependencies:
-      ajv: ^8.0.0
-    peerDependenciesMeta:
-      ajv:
-        optional: true
-
-  ajv@6.12.6:
-    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
-
-  ajv@8.12.0:
-    resolution: {integrity: sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==}
-
-  ajv@8.13.0:
-    resolution: {integrity: sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==}
-
-  alien-signals@0.4.14:
-    resolution: {integrity: sha512-itUAVzhczTmP2U5yX67xVpsbbOiquusbWVyA9N+sy6+r6YVbFkahXvNCeEPWEOMhwDYwbVbGHFkVL03N9I5g+Q==}
-
-  ansi-escapes@7.0.0:
-    resolution: {integrity: sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw==}
-    engines: {node: '>=18'}
-
-  ansi-regex@5.0.1:
-    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
-    engines: {node: '>=8'}
-
-  ansi-regex@6.1.0:
-    resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
-    engines: {node: '>=12'}
-
-  ansi-styles@4.3.0:
-    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
-    engines: {node: '>=8'}
-
-  ansi-styles@5.2.0:
-    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
-    engines: {node: '>=10'}
-
-  ansi-styles@6.2.1:
-    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
-    engines: {node: '>=12'}
-
-  anymatch@3.1.3:
-    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
-    engines: {node: '>= 8'}
-
-  argparse@1.0.10:
-    resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
-
-  argparse@2.0.1:
-    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
-
-  aria-hidden@1.2.4:
-    resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
-    engines: {node: '>=10'}
-
-  aria-query@5.3.0:
-    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
-
-  aria-query@5.3.2:
-    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
-    engines: {node: '>= 0.4'}
-
-  assertion-error@2.0.1:
-    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
-    engines: {node: '>=12'}
-
-  ast-types@0.16.1:
-    resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
-    engines: {node: '>=4'}
-
-  autoprefixer@10.4.21:
-    resolution: {integrity: sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==}
-    engines: {node: ^10 || ^12 || >=14}
-    hasBin: true
-    peerDependencies:
-      postcss: ^8.1.0
-
-  available-typed-arrays@1.0.7:
-    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
-    engines: {node: '>= 0.4'}
-
-  balanced-match@1.0.2:
-    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-
-  better-opn@3.0.2:
-    resolution: {integrity: sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==}
-    engines: {node: '>=12.0.0'}
-
-  binary-extensions@2.3.0:
-    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
-    engines: {node: '>=8'}
-
-  birecord@0.1.1:
-    resolution: {integrity: sha512-VUpsf/qykW0heRlC8LooCq28Kxn3mAqKohhDG/49rrsQ1dT1CXyj/pgXS+5BSRzFTR/3DyIBOqQOrGyZOh71Aw==}
-
-  boolbase@1.0.0:
-    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
-
-  brace-expansion@1.1.11:
-    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
-
-  brace-expansion@2.0.1:
-    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
-
-  braces@3.0.3:
-    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
-    engines: {node: '>=8'}
-
-  browser-assert@1.2.1:
-    resolution: {integrity: sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==}
-
-  browserslist@4.24.5:
-    resolution: {integrity: sha512-FDToo4Wo82hIdgc1CQ+NQD0hEhmpPjrZ3hiUgwgOG6IuTdlpr8jdjyG24P6cNP1yJpTLzS5OcGgSw0xmDU1/Tw==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-
-  builtin-modules@5.0.0:
-    resolution: {integrity: sha512-bkXY9WsVpY7CvMhKSR6pZilZu9Ln5WDrKVBUXf2S443etkmEO4V58heTecXcUIsNsi4Rx8JUO4NfX1IcQl4deg==}
-    engines: {node: '>=18.20'}
-
-  bundle-name@4.1.0:
-    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
-    engines: {node: '>=18'}
-
-  c12@3.0.3:
-    resolution: {integrity: sha512-uC3MacKBb0Z15o5QWCHvHWj5Zv34pGQj9P+iXKSpTuSGFS0KKhUWf4t9AJ+gWjYOdmWCPEGpEzm8sS0iqbpo1w==}
-    peerDependencies:
-      magicast: ^0.3.5
-    peerDependenciesMeta:
-      magicast:
-        optional: true
-
-  cac@6.7.14:
-    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
-    engines: {node: '>=8'}
-
-  call-bind-apply-helpers@1.0.2:
-    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
-    engines: {node: '>= 0.4'}
-
-  call-bind@1.0.8:
-    resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
-    engines: {node: '>= 0.4'}
-
-  call-bound@1.0.4:
-    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
-    engines: {node: '>= 0.4'}
-
-  callsites@3.1.0:
-    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
-    engines: {node: '>=6'}
-
-  caniuse-api@3.0.0:
-    resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
-
-  caniuse-lite@1.0.30001717:
-    resolution: {integrity: sha512-auPpttCq6BDEG8ZAuHJIplGw6GODhjw+/11e7IjpnYCxZcW/ONgPs0KVBJ0d1bY3e2+7PRe5RCLyP+PfwVgkYw==}
-
-  chai@5.2.0:
-    resolution: {integrity: sha512-mCuXncKXk5iCLhfhwTc0izo0gtEmpz5CtG2y8GiOINBlMVS6v8TMRc5TaLWKS6692m9+dVVfzgeVxR5UxWHTYw==}
-    engines: {node: '>=12'}
-
-  chalk@3.0.0:
-    resolution: {integrity: sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==}
-    engines: {node: '>=8'}
-
-  chalk@4.1.2:
-    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
-    engines: {node: '>=10'}
-
-  chalk@5.4.1:
-    resolution: {integrity: sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==}
-    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
-
-  changelogen@0.6.1:
-    resolution: {integrity: sha512-rTw2bZgiEHMgyYzWFMH+qTMFOSpCf4qwmd8LyxLDUKCtL4T/7O7978tPPtKYpjiFbPoHG64y4ugdF0Mt/l+lQg==}
-    hasBin: true
-
-  check-error@2.1.1:
-    resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
-    engines: {node: '>= 16'}
-
-  chokidar@3.6.0:
-    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
-    engines: {node: '>= 8.10.0'}
-
-  chokidar@4.0.3:
-    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
-    engines: {node: '>= 14.16.0'}
-
-  chromatic@11.28.2:
-    resolution: {integrity: sha512-aCmUPcZUs4/p9zRZdMreOoO/5JqO2DiJC3md1/vRx8dlMRcmR/YI5ZbgXZcai2absVR+6hsXZ5XiPxV2sboTuQ==}
-    hasBin: true
-    peerDependencies:
-      '@chromatic-com/cypress': ^0.*.* || ^1.0.0
-      '@chromatic-com/playwright': ^0.*.* || ^1.0.0
-    peerDependenciesMeta:
-      '@chromatic-com/cypress':
-        optional: true
-      '@chromatic-com/playwright':
-        optional: true
-
-  ci-info@4.2.0:
-    resolution: {integrity: sha512-cYY9mypksY8NRqgDB1XD1RiJL338v/551niynFTGkZOO2LHuB2OmOYxDIe/ttN9AHwrqdum1360G3ald0W9kCg==}
-    engines: {node: '>=8'}
-
-  citty@0.1.6:
-    resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==}
-
-  class-variance-authority@0.7.1:
-    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
-
-  clean-regexp@1.0.0:
-    resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
-    engines: {node: '>=4'}
-
-  cli-cursor@5.0.0:
-    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
-    engines: {node: '>=18'}
-
-  cli-truncate@4.0.0:
-    resolution: {integrity: sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==}
-    engines: {node: '>=18'}
-
-  clsx@2.1.1:
-    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
-    engines: {node: '>=6'}
-
-  color-convert@2.0.1:
-    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
-    engines: {node: '>=7.0.0'}
-
-  color-name@1.1.4:
-    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-
-  colord@2.9.3:
-    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
-
-  colorette@2.0.20:
-    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
-
-  commander@13.1.0:
-    resolution: {integrity: sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==}
-    engines: {node: '>=18'}
-
-  commander@7.2.0:
-    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
-    engines: {node: '>= 10'}
-
-  comment-parser@1.4.1:
-    resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
-    engines: {node: '>= 12.0.0'}
-
-  commondir@1.0.1:
-    resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
-
-  compare-versions@6.1.1:
-    resolution: {integrity: sha512-4hm4VPpIecmlg59CHXnRDnqGplJFrbLG4aFEl5vl6cK1u76ws3LLvX7ikFnTDl5vo39sjWD6AaDPYodJp/NNHg==}
-
-  concat-map@0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
-
-  confbox@0.1.8:
-    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
-
-  confbox@0.2.2:
-    resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==}
-
-  consola@3.4.2:
-    resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
-    engines: {node: ^14.18.0 || >=16.10.0}
-
-  convert-gitmoji@0.1.5:
-    resolution: {integrity: sha512-4wqOafJdk2tqZC++cjcbGcaJ13BZ3kwldf06PTiAQRAB76Z1KJwZNL1SaRZMi2w1FM9RYTgZ6QErS8NUl/GBmQ==}
-
-  convert-source-map@2.0.0:
-    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
-
-  core-js-compat@3.42.0:
-    resolution: {integrity: sha512-bQasjMfyDGyaeWKBIu33lHh9qlSR0MFE/Nmc6nMjf/iU9b3rSMdAYz1Baxrv4lPdGUsTqZudHA4jIGSJy0SWZQ==}
-
-  cross-spawn@7.0.6:
-    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
-    engines: {node: '>= 8'}
-
-  css-declaration-sorter@7.2.0:
-    resolution: {integrity: sha512-h70rUM+3PNFuaBDTLe8wF/cdWu+dOZmb7pJt8Z2sedYbAcQVQV/tEchueg3GWxwqS0cxtbxmaHEdkNACqcvsow==}
-    engines: {node: ^14 || ^16 || >=18}
-    peerDependencies:
-      postcss: ^8.0.9
-
-  css-select@5.1.0:
-    resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
-
-  css-tree@2.2.1:
-    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
-
-  css-tree@2.3.1:
-    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
-
-  css-tree@3.1.0:
-    resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
-
-  css-what@6.1.0:
-    resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
-    engines: {node: '>= 6'}
-
-  css.escape@1.5.1:
-    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
-
-  cssesc@3.0.0:
-    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
-    engines: {node: '>=4'}
-    hasBin: true
-
-  cssnano-preset-default@7.0.6:
-    resolution: {integrity: sha512-ZzrgYupYxEvdGGuqL+JKOY70s7+saoNlHSCK/OGn1vB2pQK8KSET8jvenzItcY+kA7NoWvfbb/YhlzuzNKjOhQ==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.31
-
-  cssnano-utils@5.0.0:
-    resolution: {integrity: sha512-Uij0Xdxc24L6SirFr25MlwC2rCFX6scyUmuKpzI+JQ7cyqDEwD42fJ0xfB3yLfOnRDU5LKGgjQ9FA6LYh76GWQ==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.31
-
-  cssnano@7.0.6:
-    resolution: {integrity: sha512-54woqx8SCbp8HwvNZYn68ZFAepuouZW4lTwiMVnBErM3VkO7/Sd4oTOt3Zz3bPx3kxQ36aISppyXj2Md4lg8bw==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.31
-
-  csso@5.0.5:
-    resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
-
-  csstype@3.1.3:
-    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
-
-  de-indent@1.0.2:
-    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
-
-  debug@3.2.7:
-    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-
-  debug@4.4.0:
-    resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-
-  debug@4.4.1:
-    resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-
-  deep-eql@5.0.2:
-    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
-    engines: {node: '>=6'}
-
-  deep-is@0.1.4:
-    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
-
-  deepmerge@4.3.1:
-    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
-    engines: {node: '>=0.10.0'}
-
-  default-browser-id@5.0.0:
-    resolution: {integrity: sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA==}
-    engines: {node: '>=18'}
-
-  default-browser@5.2.1:
-    resolution: {integrity: sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==}
-    engines: {node: '>=18'}
-
-  define-data-property@1.1.4:
-    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
-    engines: {node: '>= 0.4'}
-
-  define-lazy-prop@2.0.0:
-    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
-    engines: {node: '>=8'}
-
-  define-lazy-prop@3.0.0:
-    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
-    engines: {node: '>=12'}
-
-  defu@6.1.4:
-    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
-
-  dequal@2.0.3:
-    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
-    engines: {node: '>=6'}
-
-  destr@2.0.5:
-    resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
-
-  detect-node-es@1.1.0:
-    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
-
-  doctrine@3.0.0:
-    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
-    engines: {node: '>=6.0.0'}
-
-  dom-accessibility-api@0.5.16:
-    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
-
-  dom-accessibility-api@0.6.3:
-    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
-
-  dom-serializer@2.0.0:
-    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
-
-  domelementtype@2.3.0:
-    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
-
-  domhandler@5.0.3:
-    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
-    engines: {node: '>= 4'}
-
-  domutils@3.2.2:
-    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
-
-  dotenv@16.5.0:
-    resolution: {integrity: sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==}
-    engines: {node: '>=12'}
-
-  dunder-proto@1.0.1:
-    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
-    engines: {node: '>= 0.4'}
-
-  duplexer@0.1.2:
-    resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
-
-  eastasianwidth@0.2.0:
-    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
-
-  electron-to-chromium@1.5.149:
-    resolution: {integrity: sha512-UyiO82eb9dVOx8YO3ajDf9jz2kKyt98DEITRdeLPstOEuTlLzDA4Gyq5K9he71TQziU5jUVu2OAu5N48HmQiyQ==}
-
-  emoji-regex@10.4.0:
-    resolution: {integrity: sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==}
-
-  emoji-regex@8.0.0:
-    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
-
-  emoji-regex@9.2.2:
-    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
-
-  entities@4.5.0:
-    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
-    engines: {node: '>=0.12'}
-
-  environment@1.1.0:
-    resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==}
-    engines: {node: '>=18'}
-
-  es-define-property@1.0.1:
-    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
-    engines: {node: '>= 0.4'}
-
-  es-errors@1.3.0:
-    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
-    engines: {node: '>= 0.4'}
-
-  es-object-atoms@1.1.1:
-    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
-    engines: {node: '>= 0.4'}
-
-  esbuild-register@3.6.0:
-    resolution: {integrity: sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==}
-    peerDependencies:
-      esbuild: '>=0.12 <1'
-
-  esbuild@0.25.3:
-    resolution: {integrity: sha512-qKA6Pvai73+M2FtftpNKRxJ78GIjmFXFxd/1DVBqGo/qNhLSfv+G12n9pNoWdytJC8U00TrViOwpjT0zgqQS8Q==}
-    engines: {node: '>=18'}
-    hasBin: true
-
-  esbuild@0.25.4:
-    resolution: {integrity: sha512-8pgjLUcUjcgDg+2Q4NYXnPbo/vncAY4UmyaCm0jZevERqCHZIaWwdJHkf8XQtu4AxSKCdvrUbT0XUr1IdZzI8Q==}
-    engines: {node: '>=18'}
-    hasBin: true
-
-  escalade@3.2.0:
-    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
-    engines: {node: '>=6'}
-
-  escape-string-regexp@1.0.5:
-    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
-    engines: {node: '>=0.8.0'}
-
-  escape-string-regexp@4.0.0:
-    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
-    engines: {node: '>=10'}
-
-  eslint-import-resolver-node@0.3.9:
-    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
-
-  eslint-plugin-import-x@4.11.0:
-    resolution: {integrity: sha512-NAaYY49342gj09QGvwnFFl5KcD5aLzjAz97Lo+upnN8MzjEGSIlmL5sxCYGqtIeMjw8fSRDFZIp2xjRLT+yl4Q==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-
-  eslint-plugin-perfectionist@4.12.3:
-    resolution: {integrity: sha512-V0dmpq6fBbn0BYofHsiRuuY9wgkKMDkdruM0mIRBIJ8XZ8vEaTAZqFsywm40RuWNVnduWBt5HO1ZZ+flE2yqjg==}
-    engines: {node: ^18.0.0 || >=20.0.0}
-    peerDependencies:
-      eslint: '>=8.45.0'
-
-  eslint-plugin-pnpm@0.3.1:
-    resolution: {integrity: sha512-vi5iHoELIAlBbX4AW8ZGzU3tUnfxuXhC/NKo3qRcI5o9igbz6zJUqSlQ03bPeMqWIGTPatZnbWsNR1RnlNERNQ==}
-    peerDependencies:
-      eslint: ^9.0.0
-
-  eslint-plugin-react-debug@1.49.0:
-    resolution: {integrity: sha512-d7/5OnbBFPVQG9jVjM1Bs5p24M+xCri0Dv1ExeWxJZO1Gl9xKaqDO4tv6+cL9Kg2+yy6QaD/xD6j6IHjIv2Bmw==}
-    engines: {bun: '>=1.0.15', node: '>=18.18.0'}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: ^4.9.5 || ^5.3.3
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  eslint-plugin-react-dom@1.49.0:
-    resolution: {integrity: sha512-gz+rXbU9evjneshMYclUXHCzFSdt4QHRaLZYJXrdzTBTnROM1lrjvmT72Pt8KYQpiRNIcz1pemyJQmdJ2OQ+Ig==}
-    engines: {bun: '>=1.0.15', node: '>=18.18.0'}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: ^4.9.5 || ^5.3.3
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  eslint-plugin-react-hooks-extra@1.49.0:
-    resolution: {integrity: sha512-euvLPhRaYxZIuj1muOB+SKrepcuM9NiPABAyMmGdwSOPdoZX/SphXxzzJLkAWCN1m3QwWXpSFH/J9Z+fQ5Av3w==}
-    engines: {bun: '>=1.0.15', node: '>=18.18.0'}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: ^4.9.5 || ^5.3.3
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  eslint-plugin-react-hooks@5.2.0:
-    resolution: {integrity: sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
-
-  eslint-plugin-react-naming-convention@1.49.0:
-    resolution: {integrity: sha512-TfaLDPdNsdlQy+plRXO6yzae38ZpT+pHQijSxKLYSJvegfe5VYJTltsKPkwa8+WSUnZAS9U4NXwYdi06uP5aiw==}
-    engines: {bun: '>=1.0.15', node: '>=18.18.0'}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: ^4.9.5 || ^5.3.3
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  eslint-plugin-react-refresh@0.4.20:
-    resolution: {integrity: sha512-XpbHQ2q5gUF8BGOX4dHe+71qoirYMhApEPZ7sfhF/dNnOF1UXnCMGZf79SFTBO7Bz5YEIT4TMieSlJBWhP9WBA==}
-    peerDependencies:
-      eslint: '>=8.40'
-
-  eslint-plugin-react-web-api@1.49.0:
-    resolution: {integrity: sha512-Tba3qAKXjwM58jE9gocwgUqcuy+3gsh75HtbBjf2iG9vHoRiLuve9r1zGuI1SSlF+J8NdIfZf9b+1rBDLn+Spw==}
-    engines: {bun: '>=1.0.15', node: '>=18.18.0'}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: ^4.9.5 || ^5.3.3
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  eslint-plugin-react-x@1.49.0:
-    resolution: {integrity: sha512-yRh5nN8Z1Xoq26dt40Jnbqg8Z3N/svD4v7bT7sAWGslhCpxAGJEnOpj6V0L0xmw4ztz7ZonHt/4ks7mEOpagmQ==}
-    engines: {bun: '>=1.0.15', node: '>=18.18.0'}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      ts-api-utils: ^2.1.0
-      typescript: ^4.9.5 || ^5.3.3
-    peerDependenciesMeta:
-      ts-api-utils:
-        optional: true
-      typescript:
-        optional: true
-
-  eslint-plugin-storybook@0.12.0:
-    resolution: {integrity: sha512-Lg5I0+npTgiYgZ4KSvGWGDFZi3eOCNJPaWX0c9rTEEXC5wvooOClsP9ZtbI4hhFKyKgYR877KiJxbRTSJq9gWA==}
-    engines: {node: '>= 18'}
-    peerDependencies:
-      eslint: '>=8'
-
-  eslint-plugin-unicorn@59.0.0:
-    resolution: {integrity: sha512-7IEeqkymGa7tr6wTWS4DolfXnfcE3QjcD0g7I+qCfV5GPMvVsFsLT7zTIYvnudqwAm5nWekdGIOTTXA93Sz9Ow==}
-    engines: {node: ^18.20.0 || ^20.10.0 || >=21.0.0}
-    peerDependencies:
-      eslint: '>=9.22.0'
-
-  eslint-scope@8.3.0:
-    resolution: {integrity: sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  eslint-visitor-keys@3.4.3:
-    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
-  eslint-visitor-keys@4.2.0:
-    resolution: {integrity: sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  eslint@9.27.0:
-    resolution: {integrity: sha512-ixRawFQuMB9DZ7fjU3iGGganFDp3+45bPOdaRurcFHSXO1e/sYwUX/FtQZpLZJR6SjMoJH8hR2pPEAfDyCoU2Q==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    hasBin: true
-    peerDependencies:
-      jiti: '*'
-    peerDependenciesMeta:
-      jiti:
-        optional: true
-
-  espree@10.3.0:
-    resolution: {integrity: sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  espree@9.6.1:
-    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
-  esprima@4.0.1:
-    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
-    engines: {node: '>=4'}
-    hasBin: true
-
-  esquery@1.6.0:
-    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
-    engines: {node: '>=0.10'}
-
-  esrecurse@4.3.0:
-    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
-    engines: {node: '>=4.0'}
+  '@oxc-parser/binding-android-arm-eabi@0.127.0':
+    resolution: {integrity: sha512-0LC7ye4hvqbIKxAzThzvswgHLFu2AURKzYLeSVvLdu2TBOYWQDmHnTqPLeA597BcUCxiLqLsS4CJ5uoI5WYWCQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
 
-  estraverse@5.3.0:
-    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
-    engines: {node: '>=4.0'}
+  '@oxc-parser/binding-android-arm64@0.127.0':
+    resolution: {integrity: sha512-b5jtVTH6AU5CJXHNdj7Jj9IEiR9yVjjnwHzPJhGyHGPdcsZSzBCkS9GBbV33niRMvKthDwQRFRJfI4a+k4PvYg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
 
-  estree-walker@2.0.2:
-    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+  '@oxc-parser/binding-darwin-arm64@0.127.0':
+    resolution: {integrity: sha512-obCE8B7ISKkJidjlhv9xRGJPOSDG2Yu6PRga9Ruaz35uintHxbp1Ki/Yc71wx4rj3Edrm0a1kzG1TAwit0wFpg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
 
-  estree-walker@3.0.3:
-    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+  '@oxc-parser/binding-darwin-x64@0.127.0':
+    resolution: {integrity: sha512-JL6Xb5IwPQT8rUzlpsX7E+AgfcdNklXNPFp8pjCQQ5MQOQo5rtEB2ui+3Hgg9Sn7Y9Egj6YOLLiHhLpdAe12Aw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
 
-  esutils@2.0.3:
-    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
-    engines: {node: '>=0.10.0'}
+  '@oxc-parser/binding-freebsd-x64@0.127.0':
+    resolution: {integrity: sha512-SDQ/3MQFw58fqQz3Z1PhSKFF3JoCF4gmlNjziDm8X02tTahCw0qJbd7FGPDKw1i4VTBZene9JPyC3mHtSvi+wA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
 
-  eventemitter3@5.0.1:
-    resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.127.0':
+    resolution: {integrity: sha512-Av+D1MIqzV0YMGPT9we2SIZaMKD7Cxs4CvXSx/yxaWHewZjYEjScpOf5igc8IILASViw4WTnjlwUdI1KzVtDHQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
 
-  exsolve@1.0.5:
-    resolution: {integrity: sha512-pz5dvkYYKQ1AHVrgOzBKWeP4u4FRb3a6DNK2ucr0OoNwYIU4QWsJ+NM36LLzORT+z845MzKHHhpXiUF5nvQoJg==}
+  '@oxc-parser/binding-linux-arm-musleabihf@0.127.0':
+    resolution: {integrity: sha512-Cs2fdJ8cPpFdeebj6p4dag8A4+56hPvZ0AhQQzlaLswGz1tz7bXt1nETLeorrM9+AMcWFFkqxcXwDGfTVidY8g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
 
-  fast-deep-equal@3.1.3:
-    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+  '@oxc-parser/binding-linux-arm64-gnu@0.127.0':
+    resolution: {integrity: sha512-qdOfTcT6SY8gsJrrV92uyEUyjqMGPpIB5JZUG6QN5dukYd+7/j0kX6MwK1DgQj39jtUYixxPiaRUiEN1+0CXgQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
 
-  fast-glob@3.3.3:
-    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
-    engines: {node: '>=8.6.0'}
+  '@oxc-parser/binding-linux-arm64-musl@0.127.0':
+    resolution: {integrity: sha512-EoTCZneNFU/P2qrpEM+RHmQwt+CvDkyGESG6qhr7KaegXLZwePfbrkCDfAk8/rhxbDUVGsZILX+2tqPzFtoFWA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
 
-  fast-json-stable-stringify@2.1.0:
-    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+  '@oxc-parser/binding-linux-ppc64-gnu@0.127.0':
+    resolution: {integrity: sha512-zALjmZYgxFLHjXeudcDF0xFGNydTAtkAeXAr2EuC17ywCyFxcmQra4w0BMde0Yi/re4Bi4iwEoEXtYN7l6eBLQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
 
-  fast-levenshtein@2.0.6:
-    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+  '@oxc-parser/binding-linux-riscv64-gnu@0.127.0':
+    resolution: {integrity: sha512-fPP8M6zQLS7Jz7o9d5ArUSuAuSK3e+WCYVrCpdzeCOejidtZExJ9tjhDrAd3HEPqARBCPmdpqxESPFqy44vkBQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
 
-  fastq@1.19.1:
-    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
+  '@oxc-parser/binding-linux-riscv64-musl@0.127.0':
+    resolution: {integrity: sha512-7IcC4Ao02oGpfnjt+X/oF4U2mllo2qoSkw5xxiXNKL9MCTsTiAC6616beOuehdxGcnz1bRoPC1RQ2f1GQDdN+g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
 
-  fdir@6.4.4:
-    resolution: {integrity: sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==}
-    peerDependencies:
-      picomatch: ^3 || ^4
-    peerDependenciesMeta:
-      picomatch:
-        optional: true
+  '@oxc-parser/binding-linux-s390x-gnu@0.127.0':
+    resolution: {integrity: sha512-pbXIhiNFHoqWeqDNLiJ9JkpHz1IM9k4DXa66x+1GTWMG7iLxtkXgE53iiuKSXwmk3zIYmaPVfBvgcAhS583K4Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
 
-  file-entry-cache@8.0.0:
-    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
-    engines: {node: '>=16.0.0'}
+  '@oxc-parser/binding-linux-x64-gnu@0.127.0':
+    resolution: {integrity: sha512-MYCguB9RvBvlSd6gbuNI7QwiLoCCAlGnlRJFPrzLI6U1/9wkC/WK6LtBAUln55H1Ctqw45PWmqrobKoMhsYQzQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
 
-  filesize@10.1.6:
-    resolution: {integrity: sha512-sJslQKU2uM33qH5nqewAwVB2QgR6w1aMNsYUp3aN5rMRyXEwJGmZvaWzeJFNTOXWlHQyBFCWrdj3fV/fsTOX8w==}
-    engines: {node: '>= 10.4.0'}
+  '@oxc-parser/binding-linux-x64-musl@0.127.0':
+    resolution: {integrity: sha512-5eY0B/bxf1xIUxb4NOTvOI3KWtBQfPWYyKAzgcrCt0mDibSZygVpO1Pz8bkeiSZ5Jj9+M09dkggG3H8I5d0Uyg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
 
-  fill-range@7.1.1:
-    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
-    engines: {node: '>=8'}
+  '@oxc-parser/binding-openharmony-arm64@0.127.0':
+    resolution: {integrity: sha512-Gld0ajrFTUXNtdw20fVBuTQx66FA75nIVg+//pPfR3sXkuABB4mTBhl3r9JNzrJpgW//qiwxf0nWXUWGJSL3UQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
 
-  find-up-simple@1.0.1:
-    resolution: {integrity: sha512-afd4O7zpqHeRyg4PfDQsXmlDe2PfdHtJt6Akt8jOWaApLOZk5JXs6VMR29lz03pRe9mpykrRCYIYxaJYcfpncQ==}
-    engines: {node: '>=18'}
+  '@oxc-parser/binding-wasm32-wasi@0.127.0':
+    resolution: {integrity: sha512-T6KVD7rhLzFlwGRXMnxUFfkCZD8FHnb968wVXW1mXzgRFc5RNXOBY2mPPDZ77x5Ln76ltLMgtPg0cOkU1NSrEQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
 
-  find-up@5.0.0:
-    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
-    engines: {node: '>=10'}
+  '@oxc-parser/binding-win32-arm64-msvc@0.127.0':
+    resolution: {integrity: sha512-Ujvw4X+LD1CCGULcsQcvb4YNVoBGqt+JHgNNzGGaCImELiZLk477ifUH53gIbE7EKd933NdTi25JWEr9K2HwXw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
 
-  fix-dts-default-cjs-exports@1.0.1:
-    resolution: {integrity: sha512-pVIECanWFC61Hzl2+oOCtoJ3F17kglZC/6N94eRWycFgBH35hHx0Li604ZIzhseh97mf2p0cv7vVrOZGoqhlEg==}
+  '@oxc-parser/binding-win32-ia32-msvc@0.127.0':
+    resolution: {integrity: sha512-0cwxKO7KHQQQfo4Uf4B2SQrhgm+cJaP9OvFFhx52Tkg4bezsacu83GB2/In5bC415Ueeym+kXdnge/57rbSfTw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
 
-  flat-cache@4.0.1:
-    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
-    engines: {node: '>=16'}
+  '@oxc-parser/binding-win32-x64-msvc@0.127.0':
+    resolution: {integrity: sha512-rOrnSQSCbhI2kowr9XxE7m9a8oQXnBHjnS6j95LxxAnEZ0+Fz20WlRXG4ondQb+ejjt2KOsa65sE6++L6kUd+w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
 
-  flatted@3.3.3:
-    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+  '@oxc-project/runtime@0.155.0':
+    resolution: {integrity: sha512-VbW9raczGS5ZZ1FMunUBYHe4uV/R684qlQCoMdE3n5JT1PcqQsvmFpMYkF8AD+W04fBLGAq6Tr7YsTk0jjvDBA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
 
-  for-each@0.3.5:
-    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
-    engines: {node: '>= 0.4'}
+  '@oxc-project/types@0.127.0':
+    resolution: {integrity: sha512-aIYXQBo4lCbO4z0R3FHeucQHpF46l2LbMdxRvqvuRuW2OxdnSkcng5B8+K12spgLDj93rtN3+J2Vac/TIO+ciQ==}
 
-  foreground-child@3.3.1:
-    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
-    engines: {node: '>=14'}
+  '@oxc-project/types@0.155.0':
+    resolution: {integrity: sha512-SeE8JPwW1xs1tHeNycjUtUBdhorRa8o4jlvjwk49R7/Z291i+4DQa7JJIgOm/TaYQZx+QrPQbVJ/9c8dMIZN8Q==}
 
-  fraction.js@4.3.7:
-    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
+  '@oxc-resolver/binding-android-arm-eabi@11.21.2':
+    resolution: {integrity: sha512-xQoCRv+gKax9KTdwdaQNnAFOai8neay7g3jExDIORzhbrejwGSJaZNTdOJHR5ziLg2joMxOCMOFMo4zuxza2uQ==}
+    cpu: [arm]
+    os: [android]
 
-  fs-extra@11.3.0:
-    resolution: {integrity: sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==}
-    engines: {node: '>=14.14'}
+  '@oxc-resolver/binding-android-arm64@11.21.2':
+    resolution: {integrity: sha512-HF5oiE2L05yInPYCFD/4uxSrEZW4SuIfn99Y6L1xnJnzl066JR+MJs2rIdstw8A2MPlAKH+13dpFPNycjqzvGg==}
+    cpu: [arm64]
+    os: [android]
 
-  fsevents@2.3.3:
-    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+  '@oxc-resolver/binding-darwin-arm64@11.21.2':
+    resolution: {integrity: sha512-UX4u49CVCAD8QZNELaW8eMGgMAGwFWYEPbvNsh+3r/gs4NX3KfpiACMVwRQT0EuH3uat9hM5Zl+Ppm9pJD8tgg==}
+    cpu: [arm64]
     os: [darwin]
 
-  function-bind@1.1.2:
-    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
-
-  gensync@1.0.0-beta.2:
-    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
-    engines: {node: '>=6.9.0'}
-
-  get-east-asian-width@1.3.0:
-    resolution: {integrity: sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ==}
-    engines: {node: '>=18'}
-
-  get-intrinsic@1.3.0:
-    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
-    engines: {node: '>= 0.4'}
-
-  get-nonce@1.0.1:
-    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
-    engines: {node: '>=6'}
-
-  get-proto@1.0.1:
-    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
-    engines: {node: '>= 0.4'}
-
-  get-tsconfig@4.10.0:
-    resolution: {integrity: sha512-kGzZ3LWWQcGIAmg6iWvXn0ei6WDtV26wzHRMwDSzmAbcXrTEXxHy6IehI6/4eT6VRKyMP1eF1VqwrVUmE/LR7A==}
-
-  giget@2.0.0:
-    resolution: {integrity: sha512-L5bGsVkxJbJgdnwyuheIunkGatUF/zssUoxxjACCseZYAVbaqdh9Tsmmlkl8vYan09H7sbvKt4pS8GqKLBrEzA==}
-    hasBin: true
-
-  glob-parent@5.1.2:
-    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
-    engines: {node: '>= 6'}
-
-  glob-parent@6.0.2:
-    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
-    engines: {node: '>=10.13.0'}
-
-  glob@10.4.5:
-    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
-    hasBin: true
-
-  glob@11.0.2:
-    resolution: {integrity: sha512-YT7U7Vye+t5fZ/QMkBFrTJ7ZQxInIUjwyAjVj84CYXqgBdv30MFUPGnBR6sQaVq6Is15wYJUsnzTuWaGRBhBAQ==}
-    engines: {node: 20 || >=22}
-    hasBin: true
-
-  globals@11.12.0:
-    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
-    engines: {node: '>=4'}
-
-  globals@14.0.0:
-    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
-    engines: {node: '>=18'}
-
-  globals@15.15.0:
-    resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
-    engines: {node: '>=18'}
-
-  globals@16.0.0:
-    resolution: {integrity: sha512-iInW14XItCXET01CQFqudPOWP2jYMl7T+QRQT+UNcR/iQncN/F0UNpgd76iFkBPgNQb4+X3LV9tLJYzwh+Gl3A==}
-    engines: {node: '>=18'}
-
-  gopd@1.2.0:
-    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
-    engines: {node: '>= 0.4'}
-
-  graceful-fs@4.2.11:
-    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
-
-  graphemer@1.4.0:
-    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
-
-  gzip-size@6.0.0:
-    resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
-    engines: {node: '>=10'}
-
-  has-flag@4.0.0:
-    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
-    engines: {node: '>=8'}
-
-  has-property-descriptors@1.0.2:
-    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+  '@oxc-resolver/binding-darwin-x64@11.21.2':
+    resolution: {integrity: sha512-J9xPx7YBkrRmJ+xl561ztnMWEc1aOyjEIxBiGX1dVb3u7bGSnfObfcZk+Pd+uM0HZAPNsQ1xvD8j52A/uOSqNQ==}
+    cpu: [x64]
+    os: [darwin]
 
-  has-symbols@1.1.0:
-    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
-    engines: {node: '>= 0.4'}
+  '@oxc-resolver/binding-freebsd-x64@11.21.2':
+    resolution: {integrity: sha512-fRlt7OvSaQkWj6+EDTVxawVxOlqJB2QSnBfkeCyK4RTvsGctbw3BiH2Tb7DzMs7bikc4BRBpvWP5zF9K8b54Zg==}
+    cpu: [x64]
+    os: [freebsd]
 
-  has-tostringtag@1.0.2:
-    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
-    engines: {node: '>= 0.4'}
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.21.2':
+    resolution: {integrity: sha512-gK+vPUcPQITkGwBKpZGrcDHSlU6eDGl7AQacxS2CEKAZIBHWkOVFeJwLZ4tYnA1acJqRM5lt7yYwPCVqGHIJ7A==}
+    cpu: [arm]
+    os: [linux]
 
-  hasown@2.0.2:
-    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
-    engines: {node: '>= 0.4'}
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.21.2':
+    resolution: {integrity: sha512-L/Rgas7SrOKy/z7IH+HxSFRqVO4PuLDKLEGKvnhoCBBq3UJ0YzGBou3qMzaAGgkJwsIvX2pBF+7ojzfUhLiZxQ==}
+    cpu: [arm]
+    os: [linux]
 
-  he@1.2.0:
-    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
-    hasBin: true
+  '@oxc-resolver/binding-linux-arm64-gnu@11.21.2':
+    resolution: {integrity: sha512-CUEYvlX1Fk7E9kUMzuswru1J9HLxMwnpDeQGjQuI4ZH+iNCoa2X9T+pvyzrbsgl7WnIeTFTlNlHsRfVdf5g9/g==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
 
-  hookable@5.5.3:
-    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
+  '@oxc-resolver/binding-linux-arm64-musl@11.21.2':
+    resolution: {integrity: sha512-ViN1ZibQyxwC67GpoP33oo+S9UyUnkog13vzQb9+v9bCNvrVzJuk0MRdacjtv/9xfRMVF/eqHFyl8YOeykI10Q==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
 
-  ignore@5.3.2:
-    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
-    engines: {node: '>= 4'}
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.21.2':
+    resolution: {integrity: sha512-CU1sCqWnhGqYD5I1HedHk5pujrn7ssDkNB/AEQd/pd3D/EojVSgJUlpbafwIbyhia3PgIfkvdFpRPWSALzVumA==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
 
-  import-fresh@3.3.1:
-    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
-    engines: {node: '>=6'}
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.21.2':
+    resolution: {integrity: sha512-jWVyZtIHca4Gb96x7dag+y69vlei7ffjrsveLkmf2ZhqEAz6ZSBnY1GWvgZUaZlwZP62A3xD092BW97Q5VGc+g==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
 
-  import-lazy@4.0.0:
-    resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==}
-    engines: {node: '>=8'}
+  '@oxc-resolver/binding-linux-riscv64-musl@11.21.2':
+    resolution: {integrity: sha512-LF29obFqNgBUgDX7rmUK7M4D0JQG5LxhYzn3xXmECcHU9aQAdWG7NiY052qybtesEdwHQXKNTWYQ7mTsybNvWg==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
 
-  imurmurhash@0.1.4:
-    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
-    engines: {node: '>=0.8.19'}
+  '@oxc-resolver/binding-linux-s390x-gnu@11.21.2':
+    resolution: {integrity: sha512-+NYcm+cCHBbtdQQ3A4phQTSuVRYnNHz7wrl9XRAPEovcdoqi0mb1K5ZOl+jN54ZD+q1zz3V0vltbFJmzecJKmw==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
 
-  indent-string@4.0.0:
-    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
-    engines: {node: '>=8'}
+  '@oxc-resolver/binding-linux-x64-gnu@11.21.2':
+    resolution: {integrity: sha512-UQqZDdG2r2HhAOsZEgufkIWHPQ886IUyuJQkoZByvzhW8j51R4UNzGBJFkTiTnLhQnggwJRdJgFWK4uY6ZVIMw==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
 
-  indent-string@5.0.0:
-    resolution: {integrity: sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==}
-    engines: {node: '>=12'}
+  '@oxc-resolver/binding-linux-x64-musl@11.21.2':
+    resolution: {integrity: sha512-3Q9PMRjalWkT6NZ4jfujuqTCFwoWErg3y3BnOgb544B8IMw4PktiwWOigMfOHNRLMghZeJ7hpfpZf4CP7rV7Og==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
 
-  inherits@2.0.4:
-    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+  '@oxc-resolver/binding-openharmony-arm64@11.21.2':
+    resolution: {integrity: sha512-Eljeq3ndtyKhM+Es8LITi4Zl2htzuRZcrPMF3kMCsrILztvU6AjZ3FuEhHHKobPUB9rMpzLpJP5bDqXI7r+iog==}
+    cpu: [arm64]
+    os: [openharmony]
 
-  is-arguments@1.2.0:
-    resolution: {integrity: sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==}
-    engines: {node: '>= 0.4'}
+  '@oxc-resolver/binding-wasm32-wasi@11.21.2':
+    resolution: {integrity: sha512-HGDbNsIywqc4LxU38+CTJNnB/6BF7rheWOJ259b4eE0aEnelYblC8x+1tEd63bp31fYne63RQz9Jb4yVnC7Yig==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
 
-  is-binary-path@2.1.0:
-    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
-    engines: {node: '>=8'}
+  '@oxc-resolver/binding-win32-arm64-msvc@11.21.2':
+    resolution: {integrity: sha512-iWx25CBEgH49iE9q5coEGI/jb1jl5kkCY9z6U5Og67xCkQ/WFMDc2J5U78+AE91SUxM2NqSLhJC8/PLfWnImww==}
+    cpu: [arm64]
+    os: [win32]
 
-  is-builtin-module@5.0.0:
-    resolution: {integrity: sha512-f4RqJKBUe5rQkJ2eJEJBXSticB3hGbN9j0yxxMQFqIW89Jp9WYFtzfTcRlstDKVUTRzSOTLKRfO9vIztenwtxA==}
-    engines: {node: '>=18.20'}
+  '@oxc-resolver/binding-win32-x64-msvc@11.21.2':
+    resolution: {integrity: sha512-VPoCAhKvCQTlG7vxqaBXcmuvbh77BfnGXj8g0pbvVXpm1F/R8rDVwqIWcEbMzrI1JvJlm8v7T9uMVQb6UctMRg==}
+    cpu: [x64]
+    os: [win32]
 
-  is-callable@1.2.7:
-    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
-    engines: {node: '>= 0.4'}
+  '@oxfmt/binding-android-arm-eabi@0.74.0':
+    resolution: {integrity: sha512-xxQwrf5EPI5zxvuCTW8r6tzCTjPQ+h6+HqJ0iRKRy2zS1yBllt/xLVjoIyUc+FnR7g0a5g1SZv2yyDYhTItLbA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
 
-  is-core-module@2.16.1:
-    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
-    engines: {node: '>= 0.4'}
+  '@oxfmt/binding-android-arm64@0.74.0':
+    resolution: {integrity: sha512-FJW3sATVvrWbV64al8xofCPZj4500Z/1W0ad7Tg1rcCUyh0EMbuSrsf3jsZS7CEbwQ5fQ0mRhmkc129GFgofSQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
 
-  is-docker@2.2.1:
-    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
-    engines: {node: '>=8'}
-    hasBin: true
+  '@oxfmt/binding-darwin-arm64@0.74.0':
+    resolution: {integrity: sha512-TfmNKBD30dGyMu9GCLiaw2rt/z7fms9LS+5cKcNOyWst0QgAs8oZs6wPxMbVaaDVE0/PCdCosgWM1vbu6f5NUg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
 
-  is-docker@3.0.0:
-    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    hasBin: true
+  '@oxfmt/binding-darwin-x64@0.74.0':
+    resolution: {integrity: sha512-5Usf8+DfC4Q3o/MD8FkN47GrI6y0KbhQ4KhZ2HGzMZcXjcW1AeldwbUn51aKih+1TVuJFF9qkNm6X1nzm6NYng==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
 
-  is-extglob@2.1.1:
-    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
-    engines: {node: '>=0.10.0'}
+  '@oxfmt/binding-freebsd-x64@0.74.0':
+    resolution: {integrity: sha512-eL+1O3gykw1XihbZh2MRAciQvU2988LByrnjhyo/dmNG74X4oZ7XzigRoWPRFLfJCp8hzRkp/LbEhwe7uuT2eA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
 
-  is-fullwidth-code-point@3.0.0:
-    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
-    engines: {node: '>=8'}
+  '@oxfmt/binding-linux-arm-gnueabihf@0.74.0':
+    resolution: {integrity: sha512-Xt0QtO2hJ4stnul8IL4LJGVLyp0xnc6ccN9fZ30yuubv8FWSRYxWwd1Za62KsEqAfmPSazoS/cLSUUJpja6npA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
 
-  is-fullwidth-code-point@4.0.0:
-    resolution: {integrity: sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==}
-    engines: {node: '>=12'}
+  '@oxfmt/binding-linux-arm-musleabihf@0.74.0':
+    resolution: {integrity: sha512-/4wYQ0gZl4vUR0QoBTGaay73FmQ1GAjUa9z9101TR2xbGNrg4a+grazlR0yzEOe3/E+PJr5BGfj66MMzm/54vg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
 
-  is-fullwidth-code-point@5.0.0:
-    resolution: {integrity: sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==}
-    engines: {node: '>=18'}
+  '@oxfmt/binding-linux-arm64-gnu@0.74.0':
+    resolution: {integrity: sha512-846bKzF+HJd+JkOFh3rxzmYvSq4Cm+GMT+p+mW7S13ZYo6GAAGv8bL8cAOi/XcdeMqxEJDCIMTVQLVBXHMCdig==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
 
-  is-generator-function@1.1.0:
-    resolution: {integrity: sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==}
-    engines: {node: '>= 0.4'}
+  '@oxfmt/binding-linux-arm64-musl@0.74.0':
+    resolution: {integrity: sha512-nI5FJwZ4Flo6CBdscpwxymZXxO3m3IErQJX55ZS6h+ObfGXu8FostL85L/RWPFaCLnIVE4/WfLw+2q8XvVEeUA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
 
-  is-glob@4.0.3:
-    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
-    engines: {node: '>=0.10.0'}
+  '@oxfmt/binding-linux-ppc64-gnu@0.74.0':
+    resolution: {integrity: sha512-BoQYKuqUdsKAFAkK6DLBvkdv4+t0hppSm79sB0wIcE2o/eOwNj+6Z3OlKY4q3Eta/tlssP65FaS9vHn8TeF7vQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
 
-  is-immutable-type@5.0.1:
-    resolution: {integrity: sha512-LkHEOGVZZXxGl8vDs+10k3DvP++SEoYEAJLRk6buTFi6kD7QekThV7xHS0j6gpnUCQ0zpud/gMDGiV4dQneLTg==}
-    peerDependencies:
-      eslint: '*'
-      typescript: '>=4.7.4'
+  '@oxfmt/binding-linux-riscv64-gnu@0.74.0':
+    resolution: {integrity: sha512-FSroRrM12+jCdSQklF9aOxsKpI6wFs4ZCo/1cSYG80RWZS6z4LV+l9tXRMT8lDGu+yohIZBwi9M76FzGPFDE2A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
 
-  is-inside-container@1.0.0:
-    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
-    engines: {node: '>=14.16'}
-    hasBin: true
+  '@oxfmt/binding-linux-riscv64-musl@0.74.0':
+    resolution: {integrity: sha512-0VLQD0dhGBLY9Ik/w+otMvD81D0YXi4VDwql65macV+O9UzmSWmUr6CKf+dMtysDeC0PnG3y6kBkRO08BJx52g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
 
-  is-module@1.0.0:
-    resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
+  '@oxfmt/binding-linux-s390x-gnu@0.74.0':
+    resolution: {integrity: sha512-6X7BbZNz34+OHM6Oqjf6TRcUyRn6aRcB4VtIDZAF/uQRyeVhg+G2hv6MlMvmnRekVSyTJ/8rG/u8W2dRFW6glg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
 
-  is-number@7.0.0:
-    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
-    engines: {node: '>=0.12.0'}
+  '@oxfmt/binding-linux-x64-gnu@0.74.0':
+    resolution: {integrity: sha512-4kYIQK53yJXrxwxSzx8H2bojlf6/KezLGYLRXzV9QCCkoiCsvBTCid9Bg83dUPTLPa3g9K0730f6MKDbck1+OA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
 
-  is-reference@1.2.1:
-    resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
+  '@oxfmt/binding-linux-x64-musl@0.74.0':
+    resolution: {integrity: sha512-MfWz4wDREjp/JQDmuxtKieix4FHGa1z5rBvB3betdcPwZvf5fqeQrlCm1mmoyuUVQOh9Pt3M61HwN94kJCxw7Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
 
-  is-regex@1.2.1:
-    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
-    engines: {node: '>= 0.4'}
+  '@oxfmt/binding-openharmony-arm64@0.74.0':
+    resolution: {integrity: sha512-6rmAApkq5s1kbDjvNI6Nl5A+JqQkLORb2sR941pf5HWsrd01WGKyagK/B4vX9+kh1FfvRkNgEu59FHvVk4H8cQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
 
-  is-typed-array@1.1.15:
-    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
-    engines: {node: '>= 0.4'}
+  '@oxfmt/binding-win32-arm64-msvc@0.74.0':
+    resolution: {integrity: sha512-+5SpRUnZNGeXTyumHnpHa791tQtt04qZs076WT8eTcGF2OJ631VLnf7S0kQSPuDG+PtJM0phadEB2WAr5n1w9g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
 
-  is-wsl@2.2.0:
-    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
-    engines: {node: '>=8'}
+  '@oxfmt/binding-win32-ia32-msvc@0.74.0':
+    resolution: {integrity: sha512-1Fg+wYBO3Dsti1QX+/6EYHjeQzLC84tLOAqPu/r7ah3UJlUs9C/DB703Ay9Vcg+8VMzqZA2P5VGhzJraVUD4OQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
 
-  is-wsl@3.1.0:
-    resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==}
-    engines: {node: '>=16'}
+  '@oxfmt/binding-win32-x64-msvc@0.74.0':
+    resolution: {integrity: sha512-y9jXUgPBm2TZIWbQhMYRRYAQM57+r4fbykgc+j24ICIIZl+pcuoNhnq1CRGm3oFiHnEUnZO00qOtSPGQdJ2ziQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
 
-  isexe@2.0.0:
-    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+  '@oxlint-tsgolint/darwin-arm64@7.0.2004':
+    resolution: {integrity: sha512-uJk3ttju7Lz+Nv8WG4CsLyewoL1qf/Ny8S8OksJ7Bm/F14Tc9gMfW6arM1PCc57IzH/X/I79YsCWTgxX1FKibQ==}
+    cpu: [arm64]
+    os: [darwin]
 
-  jackspeak@3.4.3:
-    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+  '@oxlint-tsgolint/darwin-x64@7.0.2004':
+    resolution: {integrity: sha512-0BFfHTzDxNDFPcu0UZAXT6CyCJHAXM0dZveyDb4KEHa2qF/DSnOKOrmvK/wFuFol9kvijbGM9JfuOsor+zWXRw==}
+    cpu: [x64]
+    os: [darwin]
 
-  jackspeak@4.1.0:
-    resolution: {integrity: sha512-9DDdhb5j6cpeitCbvLO7n7J4IxnbM6hoF6O1g4HQ5TfhvvKN8ywDM7668ZhMHRqVmxqhps/F6syWK2KcPxYlkw==}
-    engines: {node: 20 || >=22}
+  '@oxlint-tsgolint/linux-arm64@7.0.2004':
+    resolution: {integrity: sha512-TAehQc+qdRXyDN3nl/r/3/oPrBVrbtrDeGMkFyG6mf+XphpoJ2lAMVFLclyvrVZCw02RbKROjyw8h72XwQQHcw==}
+    cpu: [arm64]
+    os: [linux]
 
-  jiti@1.21.7:
-    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
-    hasBin: true
+  '@oxlint-tsgolint/linux-x64@7.0.2004':
+    resolution: {integrity: sha512-LPunZvm6ZbWPfHMAyfZf9ci3HHvNEzLejO8zdqO3GoVGoSEHqqufHUD7+OgeatVSaJP7uXDJ2HaNOHIoH7go4Q==}
+    cpu: [x64]
+    os: [linux]
 
-  jiti@2.4.2:
-    resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
-    hasBin: true
+  '@oxlint-tsgolint/win32-arm64@7.0.2004':
+    resolution: {integrity: sha512-FVWplzDImWhiuawnIZVETaQecv4GWom6Jv4Fx2xj7hhXXDZ5okEgiw1gTCImHTIQsi2ycC5oSxVwrn69bMh7iw==}
+    cpu: [arm64]
+    os: [win32]
 
-  jju@1.4.0:
-    resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
+  '@oxlint-tsgolint/win32-x64@7.0.2004':
+    resolution: {integrity: sha512-7PsxuUx11Ry9DYTWcljTzRbmZY9B6O9fFFfZV+aodQEMy6pfRT3fhoQRv9PtGN/89z1pPz3nFKrsFm6WqNtX7w==}
+    cpu: [x64]
+    os: [win32]
 
-  js-tokens@4.0.0:
-    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+  '@oxlint/binding-android-arm-eabi@1.89.0':
+    resolution: {integrity: sha512-Pflpba5F3gRAQ12sWglRxvWTHEdAusNDvmi4Y5N1T5SY1AGkM7AixOnET8qkrnLJ/F32qAlNokO6eCknT8tmnw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
 
-  js-yaml@4.1.0:
-    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
-    hasBin: true
+  '@oxlint/binding-android-arm64@1.89.0':
+    resolution: {integrity: sha512-dYmyD1x7LaPlb79vZWUcpTShk8dI9z1I+IubtqrBxWNJaDhQdPHwcsvg7q5StTU4xWyd9AwPfLaTYFZY8NZgtQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
 
-  jsdoc-type-pratt-parser@4.1.0:
-    resolution: {integrity: sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg==}
-    engines: {node: '>=12.0.0'}
+  '@oxlint/binding-darwin-arm64@1.89.0':
+    resolution: {integrity: sha512-Z/oxOPiIqiS7fItRdxaaOEC+6GD3OpGi0IxoR0dMefzQHolsKLzScw2DNcu/5gUPok3tv+G9mslvYB5bo3i0qg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
 
-  jsesc@3.0.2:
-    resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
-    engines: {node: '>=6'}
-    hasBin: true
+  '@oxlint/binding-darwin-x64@1.89.0':
+    resolution: {integrity: sha512-eAjTkHSjAxrdCPJxO6y5sPQL5pYLKb2kvxZz9UU7tXnOZk9I/HLtkvx9S7GHY883k+AmL/eC7mqFt+w7WCwk0w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
 
-  jsesc@3.1.0:
-    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
-    engines: {node: '>=6'}
-    hasBin: true
+  '@oxlint/binding-freebsd-x64@1.89.0':
+    resolution: {integrity: sha512-0lNCA9Tl1n1FKpqy2/9ckp0kIuSrtJ/l9bMRgaEhOtM7TsOHshFuwOcvW8oA9teXLMOJT61LjEKWiaHDFGxF/w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
 
-  json-buffer@3.0.1:
-    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+  '@oxlint/binding-linux-arm-gnueabihf@1.89.0':
+    resolution: {integrity: sha512-OTFEvi9W+JczaZD1Caj17SGCoW8H7TE+fvx0D7ATEWa1Lohn91UMxFQ6r145SiGy/yCxeIwptMys/RAM7gSVSQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
 
-  json-schema-traverse@0.4.1:
-    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+  '@oxlint/binding-linux-arm-musleabihf@1.89.0':
+    resolution: {integrity: sha512-fRxgNHvBLswj6MrhW2uBq5UDhPRQlCbHeq/Nf8yuG9zOxhDsXqX/mi2PX1axgsQxMm88el7HLiJAzglAnflYxw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
 
-  json-schema-traverse@1.0.0:
-    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+  '@oxlint/binding-linux-arm64-gnu@1.89.0':
+    resolution: {integrity: sha512-v9ENzHvwrQoYSWTtviH1pOYc7R9UovDxVofnck50cNmPihRRTcrg5X0UlRbLOZ7IVtxPOlh2hb7kDO+FpE8SfQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
 
-  json-stable-stringify-without-jsonify@1.0.1:
-    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+  '@oxlint/binding-linux-arm64-musl@1.89.0':
+    resolution: {integrity: sha512-vfffe8mQ484AzVadlUOFpgL+JDwhvs9hrzxTgQP1FVfi4ZEUUYeffXlzC9dFV7Dgnu5s/KrNKvfmG6HxBd/ISQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
 
-  json5@2.2.3:
-    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
-    engines: {node: '>=6'}
-    hasBin: true
+  '@oxlint/binding-linux-ppc64-gnu@1.89.0':
+    resolution: {integrity: sha512-Buonlp4hVS7RGNP5M7bPpGNQrenyzA2C64JcO/oz9C1c6dGOXJ7VEAnaiAMY7voou0JYyCJdvDVlFQc5DZX3DQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
 
-  jsonc-eslint-parser@2.4.0:
-    resolution: {integrity: sha512-WYDyuc/uFcGp6YtM2H0uKmUwieOuzeE/5YocFJLnLfclZ4inf3mRn8ZVy1s7Hxji7Jxm6Ss8gqpexD/GlKoGgg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  '@oxlint/binding-linux-riscv64-gnu@1.89.0':
+    resolution: {integrity: sha512-1eVwJJrJ3lYIPT+cm7BcBBZZXY6IQZP/oyonaruTor/MrVyWOpvnwt1oD5CLdsHg5aVBIxXodQSvt+1gK6ck5w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
 
-  jsonfile@6.1.0:
-    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
+  '@oxlint/binding-linux-riscv64-musl@1.89.0':
+    resolution: {integrity: sha512-fRQQsKUGShdEL5Fl9o9uhj3grkZbeXKLv0icQ5tspUCNYSDy8wzzEcP1WC2bKdTQ0rSszbKlO3iiHORxV22DLg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
 
-  keyv@4.5.4:
-    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+  '@oxlint/binding-linux-s390x-gnu@1.89.0':
+    resolution: {integrity: sha512-dEtYjIy6+fHcjKklsmtmMkZRhwHr2UbzjmpvuPtQYSeN9awQ2hx5JLms5Wvri+8P/NZtD8v5hfgHALUql+/Ycg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
 
-  knitwork@1.2.0:
-    resolution: {integrity: sha512-xYSH7AvuQ6nXkq42x0v5S8/Iry+cfulBz/DJQzhIyESdLD7425jXsPy4vn5cCXU+HhRN2kVw51Vd1K6/By4BQg==}
+  '@oxlint/binding-linux-x64-gnu@1.89.0':
+    resolution: {integrity: sha512-hqjwIj5KOYM8Wjef/p7IruNi1iByLhSzbMBk62y22P/E8q7Jj0Pp+DeUTKTRYyZYCDtU1wEGlnWOnttHbyNIww==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
 
-  kolorist@1.8.0:
-    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+  '@oxlint/binding-linux-x64-musl@1.89.0':
+    resolution: {integrity: sha512-iAQN3e6o9UgUCcdGwqRx/jYcKbG3HK7ur3rH6lTqVcQeNGZ85AeWIg6cgn/edwFQ0ofEZZItMwkzyCVTahnvEA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
 
-  levn@0.4.1:
-    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
-    engines: {node: '>= 0.8.0'}
+  '@oxlint/binding-openharmony-arm64@1.89.0':
+    resolution: {integrity: sha512-MNxjEByz3N/7Q4qFQuPWvc14TpN9LoD3pECEDsJTZbP/wyB7U+hduUXEl7QAbbgVezFwsb9sWtNUO6XVBndOhg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
 
-  lilconfig@3.1.3:
-    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
-    engines: {node: '>=14'}
+  '@oxlint/binding-win32-arm64-msvc@1.89.0':
+    resolution: {integrity: sha512-xxe+i9wfuFso/VnoL4mfj0UlzE+cfCFiUB06vkXCMyQdgVVmItF5FfAF4tATAktSU6uHruWR+FjqvAT9cHZZzg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
 
-  lint-staged@16.0.0:
-    resolution: {integrity: sha512-sUCprePs6/rbx4vKC60Hez6X10HPkpDJaGcy3D1NdwR7g1RcNkWL8q9mJMreOqmHBTs+1sNFp+wOiX9fr+hoOQ==}
-    engines: {node: '>=20.18'}
-    hasBin: true
+  '@oxlint/binding-win32-ia32-msvc@1.89.0':
+    resolution: {integrity: sha512-saFy07cO94E664glwgLmKLI40HgTL1PY86y4T6+ud4niX4H0Kdqjcmqmjps7mQNdBytV5guGbXDdyQtRfeLbLA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
 
-  listr2@8.3.3:
-    resolution: {integrity: sha512-LWzX2KsqcB1wqQ4AHgYb4RsDXauQiqhjLk+6hjbaeHG4zpjjVAB6wC/gz6X0l+Du1cN3pUB5ZlrvTbhGSNnUQQ==}
-    engines: {node: '>=18.0.0'}
+  '@oxlint/binding-win32-x64-msvc@1.89.0':
+    resolution: {integrity: sha512-hLFJ/o0f/dTJh/EW0vmcbREYSQO9tYgfiAAlsOkiLFiJuRRWvYtFELUXN5o2ijpSo/tlO1n+YlWN58tZwPG18A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
 
-  local-pkg@1.1.1:
-    resolution: {integrity: sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==}
-    engines: {node: '>=14'}
+  '@oxlint/plugins@1.89.0':
+    resolution: {integrity: sha512-TJBBNl4KIxbxrSk7gsqlz6iM1kxidfyTizEzfWqXvijF2Ou8/Da58GvjemBVmCmaUamwRij+JwsVc0kpBFuqfg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  locate-path@6.0.0:
-    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
-    engines: {node: '>=10'}
+  '@polka/url@1.0.0-next.29':
+    resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
-  lodash.memoize@4.1.2:
-    resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
+  '@quansync/fs@1.1.0':
+    resolution: {integrity: sha512-qAPG/t3HqML1TlN7sY/pTbEjzFVAKsMjNNMGheyDosro+kT4iw2KCUoHcVdmliwWjorm4elZbgNQyU2eD97eDg==}
 
-  lodash.merge@4.6.2:
-    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+  '@rolldown/pluginutils@1.0.1':
+    resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
 
-  lodash.uniq@4.5.0:
-    resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
+  '@rollup/pluginutils@5.1.4':
+    resolution: {integrity: sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
 
-  lodash@4.17.21:
-    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+  '@rollup/rollup-android-arm-eabi@4.40.1':
+    resolution: {integrity: sha512-kxz0YeeCrRUHz3zyqvd7n+TVRlNyTifBsmnmNPtk3hQURUyG9eAB+usz6DAwagMusjx/zb3AjvDUvhFGDAexGw==}
+    cpu: [arm]
+    os: [android]
 
-  log-update@6.1.0:
-    resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
-    engines: {node: '>=18'}
+  '@rollup/rollup-android-arm64@4.40.1':
+    resolution: {integrity: sha512-PPkxTOisoNC6TpnDKatjKkjRMsdaWIhyuMkA4UsBXT9WEZY4uHezBTjs6Vl4PbqQQeu6oION1w2voYZv9yquCw==}
+    cpu: [arm64]
+    os: [android]
 
-  loupe@3.1.3:
-    resolution: {integrity: sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug==}
+  '@rollup/rollup-darwin-arm64@4.40.1':
+    resolution: {integrity: sha512-VWXGISWFY18v/0JyNUy4A46KCFCb9NVsH+1100XP31lud+TzlezBbz24CYzbnA4x6w4hx+NYCXDfnvDVO6lcAA==}
+    cpu: [arm64]
+    os: [darwin]
 
-  lru-cache@10.4.3:
-    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+  '@rollup/rollup-darwin-x64@4.40.1':
+    resolution: {integrity: sha512-nIwkXafAI1/QCS7pxSpv/ZtFW6TXcNUEHAIA9EIyw5OzxJZQ1YDrX+CL6JAIQgZ33CInl1R6mHet9Y/UZTg2Bw==}
+    cpu: [x64]
+    os: [darwin]
 
-  lru-cache@11.1.0:
-    resolution: {integrity: sha512-QIXZUBJUx+2zHUdQujWejBkcD9+cs94tLn0+YL8UrCh+D5sCXZ4c7LaEH48pNwRY3MLDgqUFyhlCyjJPf1WP0A==}
-    engines: {node: 20 || >=22}
+  '@rollup/rollup-freebsd-arm64@4.40.1':
+    resolution: {integrity: sha512-BdrLJ2mHTrIYdaS2I99mriyJfGGenSaP+UwGi1kB9BLOCu9SR8ZpbkmmalKIALnRw24kM7qCN0IOm6L0S44iWw==}
+    cpu: [arm64]
+    os: [freebsd]
 
-  lru-cache@5.1.1:
-    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+  '@rollup/rollup-freebsd-x64@4.40.1':
+    resolution: {integrity: sha512-VXeo/puqvCG8JBPNZXZf5Dqq7BzElNJzHRRw3vjBE27WujdzuOPecDPc/+1DcdcTptNBep3861jNq0mYkT8Z6Q==}
+    cpu: [x64]
+    os: [freebsd]
 
-  lru-cache@6.0.0:
-    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
-    engines: {node: '>=10'}
+  '@rollup/rollup-linux-arm-gnueabihf@4.40.1':
+    resolution: {integrity: sha512-ehSKrewwsESPt1TgSE/na9nIhWCosfGSFqv7vwEtjyAqZcvbGIg4JAcV7ZEh2tfj/IlfBeZjgOXm35iOOjadcg==}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
 
-  lz-string@1.5.0:
-    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
-    hasBin: true
+  '@rollup/rollup-linux-arm-musleabihf@4.40.1':
+    resolution: {integrity: sha512-m39iO/aaurh5FVIu/F4/Zsl8xppd76S4qoID8E+dSRQvTyZTOI2gVk3T4oqzfq1PtcvOfAVlwLMK3KRQMaR8lg==}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
 
-  magic-string@0.27.0:
-    resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==}
-    engines: {node: '>=12'}
+  '@rollup/rollup-linux-arm64-gnu@4.40.1':
+    resolution: {integrity: sha512-Y+GHnGaku4aVLSgrT0uWe2o2Rq8te9hi+MwqGF9r9ORgXhmHK5Q71N757u0F8yU1OIwUIFy6YiJtKjtyktk5hg==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
 
-  magic-string@0.30.17:
-    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
+  '@rollup/rollup-linux-arm64-musl@4.40.1':
+    resolution: {integrity: sha512-jEwjn3jCA+tQGswK3aEWcD09/7M5wGwc6+flhva7dsQNRZZTe30vkalgIzV4tjkopsTS9Jd7Y1Bsj6a4lzz8gQ==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
 
-  map-or-similar@1.5.0:
-    resolution: {integrity: sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg==}
+  '@rollup/rollup-linux-loongarch64-gnu@4.40.1':
+    resolution: {integrity: sha512-ySyWikVhNzv+BV/IDCsrraOAZ3UaC8SZB67FZlqVwXwnFhPihOso9rPOxzZbjp81suB1O2Topw+6Ug3JNegejQ==}
+    cpu: [loong64]
+    os: [linux]
+    libc: [glibc]
 
-  math-intrinsics@1.1.0:
-    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
-    engines: {node: '>= 0.4'}
+  '@rollup/rollup-linux-powerpc64le-gnu@4.40.1':
+    resolution: {integrity: sha512-BvvA64QxZlh7WZWqDPPdt0GH4bznuL6uOO1pmgPnnv86rpUpc8ZxgZwcEgXvo02GRIZX1hQ0j0pAnhwkhwPqWg==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
 
-  mdn-data@2.0.28:
-    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
+  '@rollup/rollup-linux-riscv64-gnu@4.40.1':
+    resolution: {integrity: sha512-EQSP+8+1VuSulm9RKSMKitTav89fKbHymTf25n5+Yr6gAPZxYWpj3DzAsQqoaHAk9YX2lwEyAf9S4W8F4l3VBQ==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
 
-  mdn-data@2.0.30:
-    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
+  '@rollup/rollup-linux-riscv64-musl@4.40.1':
+    resolution: {integrity: sha512-n/vQ4xRZXKuIpqukkMXZt9RWdl+2zgGNx7Uda8NtmLJ06NL8jiHxUawbwC+hdSq1rrw/9CghCpEONor+l1e2gA==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
 
-  mdn-data@2.12.2:
-    resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
+  '@rollup/rollup-linux-s390x-gnu@4.40.1':
+    resolution: {integrity: sha512-h8d28xzYb98fMQKUz0w2fMc1XuGzLLjdyxVIbhbil4ELfk5/orZlSTpF/xdI9C8K0I8lCkq+1En2RJsawZekkg==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
 
-  memoizerific@1.11.3:
-    resolution: {integrity: sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==}
+  '@rollup/rollup-linux-x64-gnu@4.40.1':
+    resolution: {integrity: sha512-XiK5z70PEFEFqcNj3/zRSz/qX4bp4QIraTy9QjwJAb/Z8GM7kVUsD0Uk8maIPeTyPCP03ChdI+VVmJriKYbRHQ==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
 
-  merge2@1.4.1:
-    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
-    engines: {node: '>= 8'}
+  '@rollup/rollup-linux-x64-musl@4.40.1':
+    resolution: {integrity: sha512-2BRORitq5rQ4Da9blVovzNCMaUlyKrzMSvkVR0D4qPuOy/+pMCrh1d7o01RATwVy+6Fa1WBw+da7QPeLWU/1mQ==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
 
-  micromatch@4.0.8:
-    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
-    engines: {node: '>=8.6'}
+  '@rollup/rollup-win32-arm64-msvc@4.40.1':
+    resolution: {integrity: sha512-b2bcNm9Kbde03H+q+Jjw9tSfhYkzrDUf2d5MAd1bOJuVplXvFhWz7tRtWvD8/ORZi7qSCy0idW6tf2HgxSXQSg==}
+    cpu: [arm64]
+    os: [win32]
 
-  mimic-function@5.0.1:
-    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
-    engines: {node: '>=18'}
+  '@rollup/rollup-win32-ia32-msvc@4.40.1':
+    resolution: {integrity: sha512-DfcogW8N7Zg7llVEfpqWMZcaErKfsj9VvmfSyRjCyo4BI3wPEfrzTtJkZG6gKP/Z92wFm6rz2aDO7/JfiR/whA==}
+    cpu: [ia32]
+    os: [win32]
 
-  min-indent@1.0.1:
-    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
-    engines: {node: '>=4'}
+  '@rollup/rollup-win32-x64-msvc@4.40.1':
+    resolution: {integrity: sha512-ECyOuDeH3C1I8jH2MK1RtBJW+YPMvSfT0a5NN0nHfQYnDSJ6tUiZH3gzwVP5/Kfh/+Tt7tpWVF9LXNTnhTJ3kA==}
+    cpu: [x64]
+    os: [win32]
 
-  minimatch@10.0.1:
-    resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==}
-    engines: {node: 20 || >=22}
+  '@simple-libs/child-process-utils@2.0.0':
+    resolution: {integrity: sha512-dvNoRKLijXnD0XoJAz94pbNuB5GQgDr55UhpSPhffDkTT0Cmcqh9jSCOtwfT2d4H6MI9E7c4SgtMuJXZ6F3c6A==}
+    engines: {node: '>=22'}
 
-  minimatch@3.0.8:
-    resolution: {integrity: sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==}
+  '@simple-libs/stream-utils@2.0.0':
+    resolution: {integrity: sha512-fCTuZK4QBa+39Oz9l4OGfJfz+GpwCp3AqO7Zch3to99xHPgstVsRFpeQ8LNd2o1Gv8raL2mCFwiaHh7bFSp5DQ==}
+    engines: {node: '>=22'}
 
-  minimatch@3.1.2:
-    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+  '@storybook/addon-docs@10.6.3':
+    resolution: {integrity: sha512-365f712au4w/xvFqEKY6TIvTeGGAY7FKRB8zP4CFa3VSv9oyxHaq/ublFg4YDbCeRagppwl1PZ6k4+PoUor3+A==}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.6.3
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  minimatch@9.0.5:
-    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
-    engines: {node: '>=16 || 14 >=14.17'}
+  '@storybook/builder-vite@10.6.3':
+    resolution: {integrity: sha512-1+WCZZg/fPxxyHDB5sFKniFt9/4RFUIzoNqMujv+BLRROM+gQeyUHvdvoyZOZ51+P8ee+/PgnNKHjsTupV+nOA==}
+    peerDependencies:
+      storybook: ^10.6.3
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  minimist@1.2.8:
-    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+  '@storybook/global@5.0.0':
+    resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==}
 
-  minipass@7.1.2:
-    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
-    engines: {node: '>=16 || 14 >=14.17'}
+  '@storybook/icons@2.2.0':
+    resolution: {integrity: sha512-FpUB/xizIrV1ILhCIYFo+TtQNN9YEoLjfcnAW0JtOXL+BcM2aisSysI0B54JMWDnljriXySBHgN6ps4s9lb75A==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  mkdist@2.3.0:
-    resolution: {integrity: sha512-thkRk+pHdudjdZT3FJpPZ2+pncI6mGlH/B+KBVddlZj4MrFGW41sRIv1wZawZUHU8v7cttGaj+5nx8P+dG664A==}
-    hasBin: true
+  '@storybook/react-dom-shim@10.6.3':
+    resolution: {integrity: sha512-cJUuPrieiTl06kzlgaU89iG+CtLAgUTt0Xdvm8qFT9yR2qwafSaswhwYWlZCNX4nWuOu7eK7uzWTwzKqyDBOWQ==}
     peerDependencies:
-      sass: ^1.85.0
-      typescript: '>=5.7.3'
-      vue: ^3.5.13
-      vue-sfc-transformer: ^0.1.1
-      vue-tsc: ^1.8.27 || ^2.0.21
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.6.3
     peerDependenciesMeta:
-      sass:
+      '@types/react':
         optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@storybook/react-vite@10.6.3':
+    resolution: {integrity: sha512-geWwLi9JnaRG2t9bYBfz+94skARzzXNT1Toaf0lk7Oog13rtNK7ay2pWNm9SP6/L2S7mEjoWu9+zHLpwxXvfIw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.6.3
+      typescript: '>= 4.9.x'
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
       typescript:
         optional: true
-      vue:
+
+  '@storybook/react@10.6.3':
+    resolution: {integrity: sha512-3tfAkZNdUyx3I4IjM8dgbNWg4k0gj89Hi1MPiawfTybRRWhvnX2YqV9Ut4mrud7YzRv0v+U7+ZYEvj+maUPaow==}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.6.3
+      typescript: '>= 4.9.x'
+    peerDependenciesMeta:
+      '@types/react':
         optional: true
-      vue-sfc-transformer:
+      '@types/react-dom':
         optional: true
-      vue-tsc:
+      typescript:
         optional: true
 
-  mlly@1.7.4:
-    resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
+  '@tailwindcss/node@4.3.3':
+    resolution: {integrity: sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg==}
 
-  mri@1.2.0:
-    resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
-    engines: {node: '>=4'}
+  '@tailwindcss/oxide-android-arm64@4.3.3':
+    resolution: {integrity: sha512-Y85A2gmPSkl5Ve5qR86GL4HT509cFqQh1aes9p3sSkyTPwt0Pppf3GkwGe4JPACcRYjgJIEhQgM6dBClnr0NYw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
 
-  mrmime@2.0.1:
-    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
-    engines: {node: '>=10'}
+  '@tailwindcss/oxide-darwin-arm64@4.3.3':
+    resolution: {integrity: sha512-BiaWatpBcERQFDlOjRDpIVXuFK5PJez5SA4JMg6VYZdBYU+qKfV/vqjcIs+IYmtitf1xYQZTwXvU/8y4lfZUGw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
 
-  ms@2.1.3:
-    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+  '@tailwindcss/oxide-darwin-x64@4.3.3':
+    resolution: {integrity: sha512-fAeUqfV5ndhxRwai8cXGzdLvul9utWOmeTkv69unv4ZXixjn61Z+p9lCWdwOwA3TYboG3BwdVuN/RDjhBRl0mw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
 
-  muggle-string@0.4.1:
-    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
+  '@tailwindcss/oxide-freebsd-x64@4.3.3':
+    resolution: {integrity: sha512-iyf5bV6+wnAlflVeEy7R25dupxTNECZN5QMI0qNT6eT+EgaGdZcKhGkr5SdoaWiLJ3spLqIY9VCeSGrwmtg4kw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
 
-  nano-spawn@1.0.1:
-    resolution: {integrity: sha512-BfcvzBlUTxSDWfT+oH7vd6CbUV+rThLLHCIym/QO6GGLBsyVXleZs00fto2i2jzC/wPiBYk5jyOmpXWg4YopiA==}
-    engines: {node: '>=20.18'}
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.3':
+    resolution: {integrity: sha512-aAYUprJAJQWWbRrPvtjdroZ56Md+JM8pMiopS6xGEwDfLhqj+2ver2p4nU4Mb3CRqcMmNBjo8KkUgcxhkzVQGQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
 
-  nanoid@3.3.11:
-    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
-    hasBin: true
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.3':
+    resolution: {integrity: sha512-nDxldcEENOxZRzC2uu9jrutZdAAQtb+8WWDCSnWL1zvBk1+FN+x6MtDViPB5AJMfttVCUhehGWus3XBPgatM/w==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
 
-  napi-postinstall@0.2.3:
-    resolution: {integrity: sha512-Mi7JISo/4Ij2tDZ2xBE2WH+/KvVlkhA6juEjpEeRAVPNCpN3nxJo/5FhDNKgBcdmcmhaH6JjgST4xY/23ZYK0w==}
-    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
-    hasBin: true
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.3':
+    resolution: {integrity: sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.3':
+    resolution: {integrity: sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.3':
+    resolution: {integrity: sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.3':
+    resolution: {integrity: sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.3':
+    resolution: {integrity: sha512-3rc292Ca2ceK6Ulcc/bAVnTs/3nDtoPhyEKlgPv+yQJQi/JS/AMJlqzxvlDacL1nekbrcf6bTqp/jV4qgnPxNQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.3':
+    resolution: {integrity: sha512-yJ0pwIVc/nYeGoV02WtsN8KYyLQv7kyI2wDnkezyJlGGjkd4QLwDGAwl47YpPJeuI0M0ObaXGSPjvWDPeTPggw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.3.3':
+    resolution: {integrity: sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA==}
+    engines: {node: '>= 20'}
 
-  natural-compare@1.4.0:
-    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+  '@tailwindcss/vite@4.3.3':
+    resolution: {integrity: sha512-yYU8cogLeSh/ms2jh8Fj7jaba/EWa7Ja6GoUqYZaraEuCI5YS6ms6ObZgjjedm+jm6XZjdNRWBpPP6Z86oOxcw==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7 || ^8
 
-  natural-orderby@5.0.0:
-    resolution: {integrity: sha512-kKHJhxwpR/Okycz4HhQKKlhWe4ASEfPgkSWNmKFHd7+ezuQlxkA5cM3+XkBPvm1gmHen3w53qsYAv+8GwRrBlg==}
+  '@testing-library/dom@10.4.2':
+    resolution: {integrity: sha512-yzr2S9HyAIdhz2/6qHgbs665Q7PKVcDF05vsOlHPxG1mo36gKVesdYVeDLnXgfjJ03CrKRk08knc6+E/9m8v2Q==}
     engines: {node: '>=18'}
 
-  node-fetch-native@1.6.6:
-    resolution: {integrity: sha512-8Mc2HhqPdlIfedsuZoc3yioPuzp6b+L5jRCRY1QzuWZh2EGJVQrGppC6V6cF0bLdbW0+O2YpqCA25aF/1lvipQ==}
+  '@testing-library/jest-dom@6.9.1':
+    resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
+    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
 
-  node-releases@2.0.19:
-    resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
+  '@testing-library/user-event@14.6.8':
+    resolution: {integrity: sha512-vgSSqnANMnkcYR/vUNDbwS7aM3OErRLNUG8vCVVlj4oc6cKffUrccX7UAS5AmJQQNZTSibi9z5GvvRZ0aYgUCQ==}
+    engines: {node: '>=12', npm: '>=6'}
+    peerDependencies:
+      '@testing-library/dom': '>=7.21.4'
 
-  normalize-path@3.0.0:
-    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
-    engines: {node: '>=0.10.0'}
+  '@tybys/wasm-util@0.10.4':
+    resolution: {integrity: sha512-W3c4gRigFS0T/Ma4qIYF3GDAc5AQdHb1yL5znJT1Zv1YaD9Kitx656wBjvr19qbiosmZT8lWDM5BEMynUqX65A==}
 
-  normalize-range@0.1.2:
-    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
-    engines: {node: '>=0.10.0'}
+  '@types/aria-query@5.0.4':
+    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
+
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
-  nth-check@2.1.1:
-    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+  '@types/babel__generator@7.27.0':
+    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
 
-  nypm@0.6.0:
-    resolution: {integrity: sha512-mn8wBFV9G9+UFHIrq+pZ2r2zL4aPau/by3kJb3cM7+5tQHMt6HGQB8FDIeKFYp8o0D2pnH6nVsO88N4AmUxIWg==}
-    engines: {node: ^14.16.0 || >=16.10.0}
-    hasBin: true
+  '@types/babel__template@7.4.4':
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
 
-  ofetch@1.4.1:
-    resolution: {integrity: sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw==}
+  '@types/babel__traverse@7.20.7':
+    resolution: {integrity: sha512-dkO5fhS7+/oos4ciWxyEyjWe48zmG6wbCheo/G2ZnHx4fs3EU6YC6UM8rk56gAjNJ9P3MTH2jo5jb92/K6wbng==}
 
-  ohash@2.0.11:
-    resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
+  '@types/chai@5.2.3':
+    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
 
-  onetime@7.0.0:
-    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
-    engines: {node: '>=18'}
+  '@types/deep-eql@4.0.2':
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
 
-  open@10.1.2:
-    resolution: {integrity: sha512-cxN6aIDPz6rm8hbebcP7vrQNhvRcveZoJU72Y7vskh4oIm+BZwBECnx5nTmrlres1Qapvx27Qo1Auukpf8PKXw==}
-    engines: {node: '>=18'}
+  '@types/doctrine@0.0.9':
+    resolution: {integrity: sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==}
 
-  open@8.4.2:
-    resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
-    engines: {node: '>=12'}
+  '@types/estree@1.0.7':
+    resolution: {integrity: sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==}
 
-  optionator@0.9.4:
-    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
-    engines: {node: '>= 0.8.0'}
+  '@types/mdx@2.0.13':
+    resolution: {integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==}
 
-  p-limit@3.1.0:
-    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
-    engines: {node: '>=10'}
+  '@types/node@24.19.2':
+    resolution: {integrity: sha512-93d49wCWJkCyN87MxLpNN6KXPCwFw7bVUg79mGUV1OS40JGWwVCr8n61DXCSqz7CV6/VfPkb7xec7uP2M+QHWQ==}
 
-  p-locate@5.0.0:
-    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
-    engines: {node: '>=10'}
+  '@types/react-dom@19.3.0':
+    resolution: {integrity: sha512-ZI7bU42mZXXKHn/qNLEw2IrbiINU7X5+vfgdixBHkCNpYWXjKgfQ/P+uyGb5CjOLB9UcnTeg3rylQtV2hym44Q==}
+    peerDependencies:
+      '@types/react': ^19.3.0
 
-  package-json-from-dist@1.0.1:
-    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+  '@types/react@19.3.0':
+    resolution: {integrity: sha512-N0rFCuH9YoxG9/m61l9MfpJKfmLOVU0em7ipIz6TRgSSkvReLB9vL85GB+yr8Bs5leqpvg96JSwF4ZS1s4viQg==}
 
-  package-manager-detector@1.3.0:
-    resolution: {integrity: sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==}
+  '@types/resolve@1.20.6':
+    resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==}
 
-  parent-module@1.0.1:
-    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
-    engines: {node: '>=6'}
+  '@typescript/typescript-aix-ppc64@7.0.2':
+    resolution: {integrity: sha512-MTKKkWB7p/0E9xi1d1tHtZ5PiLkGEMIq88pK2CubZjOsLtYTLqhgIgi6zepFa+9GHZ6h05NMCkQxGKiPXMxXtQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [ppc64]
+    os: [aix]
 
-  path-browserify@1.0.1:
-    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+  '@typescript/typescript-darwin-arm64@7.0.2':
+    resolution: {integrity: sha512-gowzar9MwS/aRWp6f3a4KUqzRjAZjOsmGNCM6LcTgXum+dBfgsBVMN+AgvOCCbguXyick6LJhpBszxMebJ8syA==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm64]
+    os: [darwin]
 
-  path-exists@4.0.0:
-    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
-    engines: {node: '>=8'}
+  '@typescript/typescript-darwin-x64@7.0.2':
+    resolution: {integrity: sha512-SZ9xZInqApNlNGc9s0W1VSsktYSOe9cFqNOIqmN1Gs8SmkjKZYFt017G4VwPxASInODuAdbTW7sXiFUf893RgA==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [darwin]
 
-  path-key@3.1.1:
-    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
-    engines: {node: '>=8'}
+  '@typescript/typescript-freebsd-arm64@7.0.2':
+    resolution: {integrity: sha512-W5NH4y/J0plIIS5b2xvTEkU7JFxyqdMAOgf+Ilhl0vHQXKO5dZoxd+C/jEtq56c4F3wk71RB4BMRQ2XdI+bwYQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm64]
+    os: [freebsd]
 
-  path-parse@1.0.7:
-    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+  '@typescript/typescript-freebsd-x64@7.0.2':
+    resolution: {integrity: sha512-UMGDx5sTpzNw3WiPebH7l90IWfJggEd+egHt/q6p7/Cm3zqoV7VxkGXt+3DxPIw8CcmvAB0j3sVVfbhX+M4Tpw==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [freebsd]
 
-  path-scurry@1.11.1:
-    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
-    engines: {node: '>=16 || 14 >=14.18'}
+  '@typescript/typescript-linux-arm64@7.0.2':
+    resolution: {integrity: sha512-Qh4eU4/y3yDjnfjjyPYihMj5/ODIlmt+Bzu17OI+fiSRDW57QmU5SiN63exPRNJPKUzcc1INa1NXdrJ+MqHjUQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm64]
+    os: [linux]
 
-  path-scurry@2.0.0:
-    resolution: {integrity: sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==}
-    engines: {node: 20 || >=22}
+  '@typescript/typescript-linux-arm@7.0.2':
+    resolution: {integrity: sha512-gffT3xPz9sR7j/YJExkyPntrI0P2EP9XbOyWzth2/Gs0RstK+90RBcO0ncXoXy/beYll1SXw846Nf2zdnEz0QQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm]
+    os: [linux]
 
-  pathe@2.0.3:
-    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+  '@typescript/typescript-linux-loong64@7.0.2':
+    resolution: {integrity: sha512-uEHck9i8hoAzXPiYRib1O7miOnz23SxIeVl6F4LXox+qov1K35jHcEW6VHKvZI+pyvl7fZEP4MCU5LYvIq1GuQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [loong64]
+    os: [linux]
 
-  pathval@2.0.0:
-    resolution: {integrity: sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==}
-    engines: {node: '>= 14.16'}
+  '@typescript/typescript-linux-mips64el@7.0.2':
+    resolution: {integrity: sha512-R4KvAMnE43W5Qeqb0Ly56O3mWMWIAgsMyz36DCaycd5nbg/9kzm0liw3JocfRqyJY0KPmzFjbswozXyW0DnIYA==}
+    engines: {node: '>=16.20.0'}
+    cpu: [mips64el]
+    os: [linux]
 
-  perfect-debounce@1.0.0:
-    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
+  '@typescript/typescript-linux-ppc64@7.0.2':
+    resolution: {integrity: sha512-DORx5b3sd/4S7eayxm4FQv+A7CrkUIGRaHiwI8oiHTAI1fAPWhF4J0vAlkC8biAlHSVVwxMQ3tjZ2/DVbnQiiA==}
+    engines: {node: '>=16.20.0'}
+    cpu: [ppc64]
+    os: [linux]
 
-  picocolors@1.1.1:
-    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+  '@typescript/typescript-linux-riscv64@7.0.2':
+    resolution: {integrity: sha512-wf0jqEDOjrPRnKwYRyyJDRo11KMbvMFrU+q4zqKyChODBzvlkbhNQfKvLxQCcwTpdDaXSHZTVuh0JoCrKCUMHQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [riscv64]
+    os: [linux]
 
-  picomatch@2.3.1:
-    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
-    engines: {node: '>=8.6'}
+  '@typescript/typescript-linux-s390x@7.0.2':
+    resolution: {integrity: sha512-IkwJc3L7yhytWd/ewjyxNDfOmswCm9GWMJT/ue/dU4aZNbwZeYAetq42VyLmsmSjvoX7z74X6ZaYCtzAr0EuGw==}
+    engines: {node: '>=16.20.0'}
+    cpu: [s390x]
+    os: [linux]
 
-  picomatch@4.0.2:
-    resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
-    engines: {node: '>=12'}
+  '@typescript/typescript-linux-x64@7.0.2':
+    resolution: {integrity: sha512-EYdf2cNg7rgCWJnxCdJ+F3V39O8ihb37eHAu1LK8oAFizgTQbPOK7zHHXbPt8rX24COqODXeI3sIf0fCXG7H/A==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [linux]
 
-  pidtree@0.6.0:
-    resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
-    engines: {node: '>=0.10'}
-    hasBin: true
+  '@typescript/typescript-netbsd-arm64@7.0.2':
+    resolution: {integrity: sha512-+polYF4MF04aPpO5FTkHran9yUQDSXqy5GiSDKpsll5jy3l3+g9QLhpf39T+ePtefhXLOGrLl0QIjkQP6VnelA==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm64]
+    os: [netbsd]
 
-  pkg-types@1.3.1:
-    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+  '@typescript/typescript-netbsd-x64@7.0.2':
+    resolution: {integrity: sha512-8YIT0EHM/3dq10ZOVF/A7pc/YSMtbcecct4rWtexrnSCHOPcpC2KTLXfTCR6vDpnSiY12heNb1GiN/wu+T/FyA==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [netbsd]
 
-  pkg-types@2.1.0:
-    resolution: {integrity: sha512-wmJwA+8ihJixSoHKxZJRBQG1oY8Yr9pGLzRmSsNms0iNWyHHAlZCa7mmKiFR10YPZuz/2k169JiS/inOjBCZ2A==}
+  '@typescript/typescript-openbsd-arm64@7.0.2':
+    resolution: {integrity: sha512-APT8+ClYnuYm1u9+kgGXoMj2VzWzcymwh2gNSQVySHfkRDGOTVkoWLjCmOQSaO+PoqQ57B0flRp9SA+7GnnkzQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm64]
+    os: [openbsd]
 
-  pluralize@8.0.0:
-    resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
-    engines: {node: '>=4'}
+  '@typescript/typescript-openbsd-x64@7.0.2':
+    resolution: {integrity: sha512-yX7s+Q0Dln0Dt9tEzZsAjXXR/+ytBM7AlglaqyeMPxQszJ1JhlJdZ6jLA+IzldHtflX81em7lDao1xXu+aRRkg==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [openbsd]
 
-  pnpm-workspace-yaml@0.3.1:
-    resolution: {integrity: sha512-3nW5RLmREmZ8Pm8MbPsO2RM+99RRjYd25ynj3NV0cFsN7CcEl4sDFzgoFmSyduFwxFQ2Qbu3y2UdCh6HlyUOeA==}
+  '@typescript/typescript-sunos-x64@7.0.2':
+    resolution: {integrity: sha512-dLJDGaLZ1D4HPQn62u1n8mBDkJREwMsAkCdkwd4Ieqw+x3TUyTsqY0YiBCtE6H6OzzgGk3iuZ3vFWRS+E8/d1g==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [sunos]
 
-  polished@4.3.1:
-    resolution: {integrity: sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==}
-    engines: {node: '>=10'}
+  '@typescript/typescript-win32-arm64@7.0.2':
+    resolution: {integrity: sha512-Gyl1Vy6OsWesLzmq+EP0Fb7b4Nid5232AvcA2SFcdYreldpNtYFFofPjnt62y9hQy7VTaZp65ICJjuAQRaVcIQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm64]
+    os: [win32]
 
-  possible-typed-array-names@1.1.0:
-    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
-    engines: {node: '>= 0.4'}
+  '@typescript/typescript-win32-x64@7.0.2':
+    resolution: {integrity: sha512-0BQ3HkAHHlKLSp1qRvf3SUhGpGsDuhB/jgFw75guyqbxJqEaS0Cw/VFO8i2nHglJUzQCRtMMR/IBAKE3ETMC4g==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [win32]
 
-  postcss-calc@10.1.1:
-    resolution: {integrity: sha512-NYEsLHh8DgG/PRH2+G9BTuUdtf9ViS+vdoQ0YA5OQdGsfN4ztiwtDWNtBl9EKeqNMFnIu8IKZ0cLxEQ5r5KVMw==}
-    engines: {node: ^18.12 || ^20.9 || >=22.0}
+  '@vitejs/plugin-react@6.1.2':
+    resolution: {integrity: sha512-fhJNGUdscQa4HkI0xFxwonWyhnVReCPDbXI7FH7jmzpnVCrFQI7PRrhWecO263610vOrs9tr2Y4xcf8uAdFxbw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     peerDependencies:
-      postcss: ^8.4.38
+      '@rolldown/plugin-babel': ^0.1.7 || ^0.2.0
+      babel-plugin-react-compiler: ^1.0.0
+      oxc-transform-react: ^0.152.0
+      vite: ^8.0.0
+    peerDependenciesMeta:
+      '@rolldown/plugin-babel':
+        optional: true
+      babel-plugin-react-compiler:
+        optional: true
+      oxc-transform-react:
+        optional: true
 
-  postcss-colormin@7.0.2:
-    resolution: {integrity: sha512-YntRXNngcvEvDbEjTdRWGU606eZvB5prmHG4BF0yLmVpamXbpsRJzevyy6MZVyuecgzI2AWAlvFi8DAeCqwpvA==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+  '@vitest/browser-playwright@5.0.5':
+    resolution: {integrity: sha512-lcdThFUUcMV9mGGV1SUiZXPxfjgW4CssA7o3STxzh8WK0tT2r526kc12tZIBRZfoLMwkhxjLmMXkWXONzdsDQw==}
     peerDependencies:
-      postcss: ^8.4.31
+      playwright: '*'
+      vitest: 5.0.5
 
-  postcss-convert-values@7.0.4:
-    resolution: {integrity: sha512-e2LSXPqEHVW6aoGbjV9RsSSNDO3A0rZLCBxN24zvxF25WknMPpX8Dm9UxxThyEbaytzggRuZxaGXqaOhxQ514Q==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+  '@vitest/browser-preview@5.0.5':
+    resolution: {integrity: sha512-ViNg4UlomGSJHtnnr7Txm+55P7/aAMMoS+1WYnWjp5w5tzf7YEUAICcs2sb1uMovEnC8el/8zUfkWZ8+7fPCKA==}
     peerDependencies:
-      postcss: ^8.4.31
+      vitest: 5.0.5
 
-  postcss-discard-comments@7.0.3:
-    resolution: {integrity: sha512-q6fjd4WU4afNhWOA2WltHgCbkRhZPgQe7cXF74fuVB/ge4QbM9HEaOIzGSiMvM+g/cOsNAUGdf2JDzqA2F8iLA==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+  '@vitest/browser@5.0.5':
+    resolution: {integrity: sha512-IDMoZX/iZ8rkilw7weaSgN8tJ7iZ9hUv0wYoKXyiyjWjWFwLSWAY707DcVTgxTYOudWC1E3HA9LYn7kVa9a7uQ==}
     peerDependencies:
-      postcss: ^8.4.31
+      vitest: 5.0.5
 
-  postcss-discard-duplicates@7.0.1:
-    resolution: {integrity: sha512-oZA+v8Jkpu1ct/xbbrntHRsfLGuzoP+cpt0nJe5ED2FQF8n8bJtn7Bo28jSmBYwqgqnqkuSXJfSUEE7if4nClQ==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.31
+  '@vitest/expect@3.2.4':
+    resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
 
-  postcss-discard-empty@7.0.0:
-    resolution: {integrity: sha512-e+QzoReTZ8IAwhnSdp/++7gBZ/F+nBq9y6PomfwORfP7q9nBpK5AMP64kOt0bA+lShBFbBDcgpJ3X4etHg4lzA==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+  '@vitest/mocker@5.0.5':
+    resolution: {integrity: sha512-xLL3lkDegJZw+MGoGaCCsFayDZthGgpAtr3Vziyfc4p7xH89K7KRPcRBBh/kEYm0Aqkt5DtTmkYpBtRV/FrHZg==}
     peerDependencies:
-      postcss: ^8.4.31
+      msw: ^2.4.9 || ^3.0.0
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
 
-  postcss-discard-overridden@7.0.0:
-    resolution: {integrity: sha512-GmNAzx88u3k2+sBTZrJSDauR0ccpE24omTQCVmaTTZFz1du6AasspjaUPMJ2ud4RslZpoFKyf+6MSPETLojc6w==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.31
+  '@vitest/pretty-format@3.2.4':
+    resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==}
 
-  postcss-merge-longhand@7.0.4:
-    resolution: {integrity: sha512-zer1KoZA54Q8RVHKOY5vMke0cCdNxMP3KBfDerjH/BYHh4nCIh+1Yy0t1pAEQF18ac/4z3OFclO+ZVH8azjR4A==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.31
+  '@vitest/pretty-format@5.0.5':
+    resolution: {integrity: sha512-24sSdIlMA9DVPXnYiB9siwU0bTd887Y9jX3+vabztCSsvHwo7ipvJ/a2L3Rljw8+2rK1f5fCj3h5U9I/Jsqgbw==}
 
-  postcss-merge-rules@7.0.4:
-    resolution: {integrity: sha512-ZsaamiMVu7uBYsIdGtKJ64PkcQt6Pcpep/uO90EpLS3dxJi6OXamIobTYcImyXGoW0Wpugh7DSD3XzxZS9JCPg==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.31
+  '@vitest/snapshot@5.0.5':
+    resolution: {integrity: sha512-dHyFElWMQy0wFBGrIaPPeUWfJFh+jAUrv46ImIJGd8CADdKV3mlrAu3FyD0wesdxELFCs9M807e040Kba/XKtA==}
 
-  postcss-minify-font-values@7.0.0:
-    resolution: {integrity: sha512-2ckkZtgT0zG8SMc5aoNwtm5234eUx1GGFJKf2b1bSp8UflqaeFzR50lid4PfqVI9NtGqJ2J4Y7fwvnP/u1cQog==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.31
+  '@vitest/spy@3.2.4':
+    resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
 
-  postcss-minify-gradients@7.0.0:
-    resolution: {integrity: sha512-pdUIIdj/C93ryCHew0UgBnL2DtUS3hfFa5XtERrs4x+hmpMYGhbzo6l/Ir5de41O0GaKVpK1ZbDNXSY6GkXvtg==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.31
+  '@vitest/spy@5.0.5':
+    resolution: {integrity: sha512-lwJRExuH417257Q5wv9QYugN9IMJkoxcrKrYxGPQkBzl7wlNpTUxD/5yNX4ESKVUIShKPgkGchYPFMWOOk0wzw==}
 
-  postcss-minify-params@7.0.2:
-    resolution: {integrity: sha512-nyqVLu4MFl9df32zTsdcLqCFfE/z2+f8GE1KHPxWOAmegSo6lpV2GNy5XQvrzwbLmiU7d+fYay4cwto1oNdAaQ==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+  '@vitest/ui@5.0.5':
+    resolution: {integrity: sha512-dCoGUOdgmCaSB2g+WQ/spPCBkytAWdNUkFSXY4z+eYp2d8JEOY8v0uDRaJTG9qf/kTlTVZ4CuYMYMz/f1HS/qQ==}
     peerDependencies:
-      postcss: ^8.4.31
+      vitest: 5.0.5
 
-  postcss-minify-selectors@7.0.4:
-    resolution: {integrity: sha512-JG55VADcNb4xFCf75hXkzc1rNeURhlo7ugf6JjiiKRfMsKlDzN9CXHZDyiG6x/zGchpjQS+UAgb1d4nqXqOpmA==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.31
+  '@vitest/utils@3.2.4':
+    resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
 
-  postcss-nested@7.0.2:
-    resolution: {integrity: sha512-5osppouFc0VR9/VYzYxO03VaDa3e8F23Kfd6/9qcZTUI8P58GIYlArOET2Wq0ywSl2o2PjELhYOFI4W7l5QHKw==}
-    engines: {node: '>=18.0'}
-    peerDependencies:
-      postcss: ^8.2.14
+  '@vitest/utils@5.0.5':
+    resolution: {integrity: sha512-/rBu7gzLDQI/SC79Tn98b5DwOgaHU/Gt4I9OVeP3YofzNaYtbImRCOJQmT1S6vOJg9gEIlWC+r3QxKkjuSa1nQ==}
 
-  postcss-normalize-charset@7.0.0:
-    resolution: {integrity: sha512-ABisNUXMeZeDNzCQxPxBCkXexvBrUHV+p7/BXOY+ulxkcjUZO0cp8ekGBwvIh2LbCwnWbyMPNJVtBSdyhM2zYQ==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+  '@voidzero-dev/vite-plus-core@1.4.0':
+    resolution: {integrity: sha512-LTGXCdZ58qJKfuCOmf0hnZOVA64eOgzDQOqYpI+71tPxk/0cGqPQhYDGQQZoEvNLAn1G2Lo4gKadsQdWxb99WQ==}
+    engines: {node: ^20.19.0 || ^22.18.0 || >=24.11.0}
     peerDependencies:
-      postcss: ^8.4.31
+      '@arethetypeswrong/core': ^0.18.1
+      '@types/node': ^20.19.0 || >=22.12.0
+      '@typescript/native-preview': '*'
+      '@vitejs/devtools': ^0.7.1 || ^0.8.0
+      '@volar/typescript': ~2.4.0
+      '@vue/language-core': ~3.2.0 || ~3.3.0
+      esbuild: ^0.27.0 || ^0.28.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      publint: ^0.3.8
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      typescript: ^5.0.0 || ^6.0.0 || ^7.0.0
+      unplugin-unused: '>=0.5.0'
+      unrun: '*'
+      vue-tsc: ~3.2.0 || ~3.3.0
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@arethetypeswrong/core':
+        optional: true
+      '@types/node':
+        optional: true
+      '@typescript/native-preview':
+        optional: true
+      '@vitejs/devtools':
+        optional: true
+      '@volar/typescript':
+        optional: true
+      '@vue/language-core':
+        optional: true
+      esbuild:
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      publint:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      typescript:
+        optional: true
+      unplugin-unused:
+        optional: true
+      unrun:
+        optional: true
+      vue-tsc:
+        optional: true
+      yaml:
+        optional: true
 
-  postcss-normalize-display-values@7.0.0:
-    resolution: {integrity: sha512-lnFZzNPeDf5uGMPYgGOw7v0BfB45+irSRz9gHQStdkkhiM0gTfvWkWB5BMxpn0OqgOQuZG/mRlZyJxp0EImr2Q==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.31
+  '@voidzero-dev/vite-plus-darwin-arm64@1.4.0':
+    resolution: {integrity: sha512-5Ie3vnrFrF5GFU+0VhbLuyoSmnzd8m42BvbLjncMOmAb6D1sEq4g37dlxPiVcJEqITM0t4zFnLkNSF4YAlk0FQ==}
+    engines: {node: '>=20.0.0'}
+    cpu: [arm64]
+    os: [darwin]
 
-  postcss-normalize-positions@7.0.0:
-    resolution: {integrity: sha512-I0yt8wX529UKIGs2y/9Ybs2CelSvItfmvg/DBIjTnoUSrPxSV7Z0yZ8ShSVtKNaV/wAY+m7bgtyVQLhB00A1NQ==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.31
+  '@voidzero-dev/vite-plus-darwin-x64@1.4.0':
+    resolution: {integrity: sha512-vaR7F+ix/91EycJYXOQ24Nzw470U12x3L+YLbbtuRwHDMW67fCbhXzcW+otZS8q4eRdIzEcA5svv9P8kcsaRkA==}
+    engines: {node: '>=20.0.0'}
+    cpu: [x64]
+    os: [darwin]
 
-  postcss-normalize-repeat-style@7.0.0:
-    resolution: {integrity: sha512-o3uSGYH+2q30ieM3ppu9GTjSXIzOrRdCUn8UOMGNw7Af61bmurHTWI87hRybrP6xDHvOe5WlAj3XzN6vEO8jLw==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.31
+  '@voidzero-dev/vite-plus-linux-arm64-gnu@1.4.0':
+    resolution: {integrity: sha512-58/PZrp+f3Hy6kFVKqbrZVenjo5t012rTOgRSgMoJyOhJjXBHqvORh9lB9GIip9r9maoWN31R1a44obPX9MD7g==}
+    engines: {node: '>=20.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
 
-  postcss-normalize-string@7.0.0:
-    resolution: {integrity: sha512-w/qzL212DFVOpMy3UGyxrND+Kb0fvCiBBujiaONIihq7VvtC7bswjWgKQU/w4VcRyDD8gpfqUiBQ4DUOwEJ6Qg==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.31
+  '@voidzero-dev/vite-plus-linux-arm64-musl@1.4.0':
+    resolution: {integrity: sha512-Ij08vPrxG1J23wQVm0LtLPrQevv4tos8TirP/jGTpQQmQAgYOpmIfMrx8BF+vOGMncOIo+kKacp4jPVmhctfhg==}
+    engines: {node: '>=20.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
 
-  postcss-normalize-timing-functions@7.0.0:
-    resolution: {integrity: sha512-tNgw3YV0LYoRwg43N3lTe3AEWZ66W7Dh7lVEpJbHoKOuHc1sLrzMLMFjP8SNULHaykzsonUEDbKedv8C+7ej6g==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.31
+  '@voidzero-dev/vite-plus-linux-x64-gnu@1.4.0':
+    resolution: {integrity: sha512-RbM21Y5cSx5WesaFV/Swo22JRvimjO6NDItoL5wNI6NTa987ck7v19HBmp+V4nkOCFHbMdxwfhyALDw0y06xEA==}
+    engines: {node: '>=20.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
 
-  postcss-normalize-unicode@7.0.2:
-    resolution: {integrity: sha512-ztisabK5C/+ZWBdYC+Y9JCkp3M9qBv/XFvDtSw0d/XwfT3UaKeW/YTm/MD/QrPNxuecia46vkfEhewjwcYFjkg==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.31
+  '@voidzero-dev/vite-plus-linux-x64-musl@1.4.0':
+    resolution: {integrity: sha512-Q+p+YJztEmqjJoumTmPaBQ/PEx3eFhiNTQTn5+85gkBUiRexkFQ8A86TMFxbKVgrJbiAOltkrJRmVRhRs5Q0sA==}
+    engines: {node: '>=20.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
 
-  postcss-normalize-url@7.0.0:
-    resolution: {integrity: sha512-+d7+PpE+jyPX1hDQZYG+NaFD+Nd2ris6r8fPTBAjE8z/U41n/bib3vze8x7rKs5H1uEw5ppe9IojewouHk0klQ==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.31
+  '@voidzero-dev/vite-plus-win32-arm64-msvc@1.4.0':
+    resolution: {integrity: sha512-PLGVov8c4/QfveOM/AYjYDlgMCQ0SxCmJp392qBgxaSXP0nEg6yP4hn5UtnhxvluhHEzVkTf2r1Q3LNlZRI7kw==}
+    engines: {node: '>=20.0.0'}
+    cpu: [arm64]
+    os: [win32]
 
-  postcss-normalize-whitespace@7.0.0:
-    resolution: {integrity: sha512-37/toN4wwZErqohedXYqWgvcHUGlT8O/m2jVkAfAe9Bd4MzRqlBmXrJRePH0e9Wgnz2X7KymTgTOaaFizQe3AQ==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.31
+  '@voidzero-dev/vite-plus-win32-x64-msvc@1.4.0':
+    resolution: {integrity: sha512-DYG7wDsMLLs2/+8qfeyLScdoMh+aPM4IZanoVPSNt8fMeeXR2GQiiZDKc0qZHKN9+YcdCGK1HLAdMAGSywKvsA==}
+    engines: {node: '>=20.0.0'}
+    cpu: [x64]
+    os: [win32]
 
-  postcss-ordered-values@7.0.1:
-    resolution: {integrity: sha512-irWScWRL6nRzYmBOXReIKch75RRhNS86UPUAxXdmW/l0FcAsg0lvAXQCby/1lymxn/o0gVa6Rv/0f03eJOwHxw==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.31
+  '@volar/language-core@2.4.14':
+    resolution: {integrity: sha512-X6beusV0DvuVseaOEy7GoagS4rYHgDHnTrdOj5jeUb49fW5ceQyP9Ej5rBhqgz2wJggl+2fDbbojq1XKaxDi6w==}
 
-  postcss-reduce-initial@7.0.2:
-    resolution: {integrity: sha512-pOnu9zqQww7dEKf62Nuju6JgsW2V0KRNBHxeKohU+JkHd/GAH5uvoObqFLqkeB2n20mr6yrlWDvo5UBU5GnkfA==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.31
+  '@volar/source-map@2.4.14':
+    resolution: {integrity: sha512-5TeKKMh7Sfxo8021cJfmBzcjfY1SsXsPMMjMvjY7ivesdnybqqS+GxGAoXHAOUawQTwtdUxgP65Im+dEmvWtYQ==}
 
-  postcss-reduce-transforms@7.0.0:
-    resolution: {integrity: sha512-pnt1HKKZ07/idH8cpATX/ujMbtOGhUfE+m8gbqwJE05aTaNw8gbo34a2e3if0xc0dlu75sUOiqvwCGY3fzOHew==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+  '@volar/typescript@2.4.14':
+    resolution: {integrity: sha512-p8Z6f/bZM3/HyCdRNFZOEEzts51uV8WHeN8Tnfnm2EBv6FDB2TQLzfVx7aJvnl8ofKAOnS64B2O8bImBFaauRw==}
     peerDependencies:
-      postcss: ^8.4.31
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
-  postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
-    engines: {node: '>=4'}
+  '@webcontainer/env@1.1.1':
+    resolution: {integrity: sha512-6aN99yL695Hi9SuIk1oC88l9o0gmxL1nGWWQ/kNy81HigJ0FoaoTXpytCj6ItzgyCEwA9kF1wixsTuv5cjsgng==}
 
-  postcss-selector-parser@7.1.0:
-    resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
-    engines: {node: '>=4'}
+  '@yuku-core/binding-android-arm64@0.19.0':
+    resolution: {integrity: sha512-wdL2XmTiZixAOaHk9Z0JJZ8u9Qm8d333Zjpc6gaxXFX+UR5BlsfxZ7a2+2Rm71pamppsPYGUGFq2oVLbh6DISw==}
+    cpu: [arm64]
+    os: [android]
 
-  postcss-svgo@7.0.1:
-    resolution: {integrity: sha512-0WBUlSL4lhD9rA5k1e5D8EN5wCEyZD6HJk0jIvRxl+FDVOMlJ7DePHYWGGVc5QRqrJ3/06FTXM0bxjmJpmTPSA==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >= 18}
-    peerDependencies:
-      postcss: ^8.4.31
+  '@yuku-core/binding-darwin-arm64@0.19.0':
+    resolution: {integrity: sha512-7sNJa6XJhyetnTy64jw3NEi4YgUcezHk1G5GH9FSvXAuC8wIlbaOwT9lgq5qo5sspjrZJQlBR1TWflP49uRpMw==}
+    cpu: [arm64]
+    os: [darwin]
 
-  postcss-unique-selectors@7.0.3:
-    resolution: {integrity: sha512-J+58u5Ic5T1QjP/LDV9g3Cx4CNOgB5vz+kM6+OxHHhFACdcDeKhBXjQmB7fnIZM12YSTvsL0Opwco83DmacW2g==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.31
+  '@yuku-core/binding-darwin-x64@0.19.0':
+    resolution: {integrity: sha512-pTC7dYEc59isdyizc3nsuyFNBu2LU5wMYZ1be6UMr59PY/AJNtO1aBLWV0MgL/z7C1nv/2sX4TNjGgKLoeevJw==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@yuku-core/binding-freebsd-x64@0.19.0':
+    resolution: {integrity: sha512-xrZjF6XOEwyLOiDIfrwDdRCS6ghxcJeirNC1KivQhVcUwlRonaU79S3/Uiyx3lBylPnT8qKJ3/aMT+H52nGTJQ==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@yuku-core/binding-linux-arm-gnu@0.19.0':
+    resolution: {integrity: sha512-0OyIH53C0I1CbADHn9FSdCfX5qbpeLwJhmOVhonFJNYheybOnkSJ50qGMfTJIb8y5zrwqvLs7FVBvz6Fk8maZg==}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
 
-  postcss-value-parser@4.2.0:
-    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+  '@yuku-core/binding-linux-arm-musl@0.19.0':
+    resolution: {integrity: sha512-z/iPfkCOCSXE34VXNt0uP1ORSW+4mEa9b5CiJcWZeqZH08g49bFU/jRM2T04f+Wpw5mJ6HIzNBiojxeAbrHjeg==}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
 
-  postcss@8.5.3:
-    resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
-    engines: {node: ^10 || ^12 || >=14}
+  '@yuku-core/binding-linux-arm64-gnu@0.19.0':
+    resolution: {integrity: sha512-jLNTi+gzaRwBJ+gwhCJ+rDb5dmx/8hEBx93UWd7hjMSqPTL1D1wvVSvXVAldV5kALvju7b0/m51EHEhs4+I1fA==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
 
-  prelude-ls@1.2.1:
-    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
-    engines: {node: '>= 0.8.0'}
+  '@yuku-core/binding-linux-arm64-musl@0.19.0':
+    resolution: {integrity: sha512-YwyPIdW/rN2Fmv0MTFWi47FaB3F9g+2b+sJISyAw83Yd60RWH4T3Nx6XkAHHVN+uKJNBAd6So7/BVihSiFYvuQ==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
 
-  pretty-bytes@6.1.1:
-    resolution: {integrity: sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==}
-    engines: {node: ^14.13.1 || >=16.0.0}
+  '@yuku-core/binding-linux-x64-gnu@0.19.0':
+    resolution: {integrity: sha512-/vskaAXVX3ESR43FiTdfiYS7z1b9uoQJwVQ/0RgUHgN2sWoAyCZs+aX4CgU7eKGIHTVfp9VFwv+c+2XchYiEtQ==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
 
-  pretty-format@27.5.1:
-    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
-    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+  '@yuku-core/binding-linux-x64-musl@0.19.0':
+    resolution: {integrity: sha512-FuXL5igeSKib9Rye02TdH+D6SQezTyGxIATMu1Qsn/QywrzwpGl35OLpS2C1x5vpGLeVE2XgiLd5mVPFHmIglQ==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
 
-  process@0.11.10:
-    resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
-    engines: {node: '>= 0.6.0'}
+  '@yuku-core/binding-win32-arm64@0.19.0':
+    resolution: {integrity: sha512-YuJAe7zEKT1Xa7LuHlhGJpPnYQeVtvo0rZvNjJRqkH0hQGOw4C8QeP30Tg5VKGzZfo2x8CjhjEhKt4TmLwfmdg==}
+    cpu: [arm64]
+    os: [win32]
 
-  punycode@2.3.1:
-    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
-    engines: {node: '>=6'}
+  '@yuku-core/binding-win32-x64@0.19.0':
+    resolution: {integrity: sha512-o8iY/mXwlRkedp0LNTr4+TEfXTPQwoNZmv6k+1WIAd1ZXEn8xJJTBCtB0osaVvdZo/x/cNmV16UrWrrGpM5Mvw==}
+    cpu: [x64]
+    os: [win32]
 
-  quansync@0.2.10:
-    resolution: {integrity: sha512-t41VRkMYbkHyCYmOvx/6URnN80H7k4X0lLdBMGsz+maAwrJQYB1djpV6vHrQIBE0WBSGqhtEHrK9U3DWWH8v7A==}
+  '@yuku-toolchain/types@0.19.0':
+    resolution: {integrity: sha512-tFkNbsP4WXX9UMUC5syJGdK9dPMLK0PPaIuXCcCYH75sZ8MrebfBZ2XvCILRTw8AgLivSSCfDa4R67iYBDa4Kg==}
 
-  queue-microtask@1.2.3:
-    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+  acorn@8.19.0:
+    resolution: {integrity: sha512-oJlA3XiRm7Cyk6qFD2Jn8ak9B7jSy0qy00ADO3+8dpT0LSjFihQYv4C02LFCSYJV3Q37xYwwRy5m+IpIiUzqWw==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
 
-  rc9@2.1.2:
-    resolution: {integrity: sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==}
+  ajv@8.13.0:
+    resolution: {integrity: sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==}
 
-  react-confetti@6.4.0:
-    resolution: {integrity: sha512-5MdGUcqxrTU26I2EU7ltkWPwxvucQTuqMm8dUz72z2YMqTD6s9vMcDUysk7n9jnC+lXuCPeJJ7Knf98VEYE9Rg==}
-    engines: {node: '>=16'}
-    peerDependencies:
-      react: ^16.3.0 || ^17.0.1 || ^18.0.0 || ^19.0.0
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@6.4.0:
+    resolution: {integrity: sha512-KzTVk2tCWAHtYrvvvaP8bJKJq2pVinhLcGEQdtLIYPbmNGNyYe8QwNaTUYQp2J7/vIsUKt5QCqAfUkYyG9DkOw==}
+    engines: {node: '>=12'}
+
+  ansi-styles@5.2.0:
+    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
+    engines: {node: '>=10'}
+
+  ansi-styles@6.2.1:
+    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
+    engines: {node: '>=12'}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  argue-cli@3.2.0:
+    resolution: {integrity: sha512-VipTB0gXgGIFO2Rg9yEVN5wLt2AurJcZqDbgmYSwPwsykhLrQhs240/bfceev4w68lI8JshoOJIk9uW7tFzROw==}
+    engines: {node: '>=22'}
+
+  aria-query@5.3.0:
+    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
 
-  react-docgen-typescript@2.2.2:
-    resolution: {integrity: sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==}
-    peerDependencies:
-      typescript: '>= 4.3.x'
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
 
-  react-docgen@7.1.1:
-    resolution: {integrity: sha512-hlSJDQ2synMPKFZOsKo9Hi8WWZTC7POR8EmWvTSjow+VDgKzkmjQvFm2fk0tmRw+f0vTOIYKlarR0iL4996pdg==}
-    engines: {node: '>=16.14.0'}
+  ast-types@0.16.1:
+    resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
+    engines: {node: '>=4'}
 
-  react-dom@19.1.0:
-    resolution: {integrity: sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==}
-    peerDependencies:
-      react: ^19.1.0
+  balanced-match@4.0.4:
+    resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
+    engines: {node: 18 || 20 || >=22}
 
-  react-is@17.0.2:
-    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+  boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
-  react-refresh@0.17.0:
-    resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
-    engines: {node: '>=0.10.0'}
+  brace-expansion@5.0.12:
+    resolution: {integrity: sha512-YovQ3rzhaLMIrDjNDMkNS01tea93qhEhG5xy8f6+R0l+dw3Ki+5sCoIoI942iuLZTHWogWktgwVDhU09iNEimQ==}
+    engines: {node: 20 || >=22}
 
-  react-remove-scroll-bar@2.3.8:
-    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  browserslist@4.24.5:
+    resolution: {integrity: sha512-FDToo4Wo82hIdgc1CQ+NQD0hEhmpPjrZ3hiUgwgOG6IuTdlpr8jdjyG24P6cNP1yJpTLzS5OcGgSw0xmDU1/Tw==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
 
-  react-remove-scroll@2.6.3:
-    resolution: {integrity: sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  bundle-name@4.1.0:
+    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
+    engines: {node: '>=18'}
 
-  react-style-singleton@2.2.3:
-    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
-    engines: {node: '>=10'}
+  c12@3.3.4:
+    resolution: {integrity: sha512-cM0ApFQSBXuourJejzwv/AuPRvAxordTyParRVcHjjtXirtkzM0uK2L9TTn9s0cXZbG7E55jCivRQzoxYmRAlA==}
     peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      magicast: '*'
     peerDependenciesMeta:
-      '@types/react':
+      magicast:
         optional: true
 
-  react@19.1.0:
-    resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==}
-    engines: {node: '>=0.10.0'}
+  cac@7.1.0:
+    resolution: {integrity: sha512-LMDU/U2yA4IPIY8KT0NsNPWEYZvAMkbgyspxJ6btJaYV+WMDOHAZCmB0lsTObiHaRS1V/ztKAl7+TSkTqXyeoA==}
+    engines: {node: '>=20.19.0'}
 
-  readdirp@3.6.0:
-    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
-    engines: {node: '>=8.10.0'}
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
 
-  readdirp@4.1.2:
-    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
-    engines: {node: '>= 14.18.0'}
+  caniuse-lite@1.0.30001717:
+    resolution: {integrity: sha512-auPpttCq6BDEG8ZAuHJIplGw6GODhjw+/11e7IjpnYCxZcW/ONgPs0KVBJ0d1bY3e2+7PRe5RCLyP+PfwVgkYw==}
 
-  recast@0.23.11:
-    resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
-    engines: {node: '>= 4'}
+  chai@5.2.0:
+    resolution: {integrity: sha512-mCuXncKXk5iCLhfhwTc0izo0gtEmpz5CtG2y8GiOINBlMVS6v8TMRc5TaLWKS6692m9+dVVfzgeVxR5UxWHTYw==}
+    engines: {node: '>=12'}
 
-  redent@3.0.0:
-    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
-    engines: {node: '>=8'}
+  chai@6.3.0:
+    resolution: {integrity: sha512-XWAtwJ6OHO+tj0EKCs0Y2UamnyOxseZWltU4x2U2wh8g4AigdjwvtUjvLP2tqkA/avxHEtzxNaqGq/YGNwckKg==}
+    engines: {node: '>=18'}
 
-  regexp-tree@0.1.27:
-    resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
+  changelogen@0.6.2:
+    resolution: {integrity: sha512-QtC7+r9BxoUm+XDAwhLbz3CgU134J1ytfE3iCpLpA4KFzX2P1e6s21RrWDwUBzfx66b1Rv+6lOA2nS2btprd+A==}
     hasBin: true
 
-  regjsparser@0.12.0:
-    resolution: {integrity: sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==}
-    hasBin: true
+  check-error@2.1.1:
+    resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
+    engines: {node: '>= 16'}
 
-  require-from-string@2.0.2:
-    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
-    engines: {node: '>=0.10.0'}
+  chokidar@5.0.0:
+    resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
+    engines: {node: '>= 20.19.0'}
 
-  resolve-from@4.0.0:
-    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
-    engines: {node: '>=4'}
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
 
-  resolve-pkg-maps@1.0.0:
-    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+  cliui@9.0.1:
+    resolution: {integrity: sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w==}
+    engines: {node: '>=20'}
 
-  resolve@1.22.10:
-    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
-    engines: {node: '>= 0.4'}
-    hasBin: true
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
 
-  restore-cursor@5.1.0:
-    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
-    engines: {node: '>=18'}
+  commander@11.1.0:
+    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+    engines: {node: '>=16'}
 
-  reusify@1.1.0:
-    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
-    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+  confbox@0.2.4:
+    resolution: {integrity: sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==}
 
-  rfdc@1.4.1:
-    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
+  confbox@0.3.1:
+    resolution: {integrity: sha512-cKUSoKa8YxFZZSmraVi7onONx3amu77ngK3kGpsYHDH7drPwCRkQE1RYMPlLRrMtnciRj274XNRxcHxnKmDSnA==}
 
-  rollup-plugin-dts@6.2.1:
-    resolution: {integrity: sha512-sR3CxYUl7i2CHa0O7bA45mCrgADyAQ0tVtGSqi3yvH28M+eg1+g5d7kQ9hLvEz5dorK3XVsH5L2jwHLQf72DzA==}
-    engines: {node: '>=16'}
-    peerDependencies:
-      rollup: ^3.29.4 || ^4
-      typescript: ^4.5 || ^5.0
+  consola@3.4.2:
+    resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
+    engines: {node: ^14.18.0 || >=16.10.0}
 
-  rollup@4.40.1:
-    resolution: {integrity: sha512-C5VvvgCCyfyotVITIAv+4efVytl5F7wt+/I2i9q9GZcEXW9BP52YYOXC58igUi+LFZVHukErIIqQSWwv/M3WRw==}
-    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
-    hasBin: true
+  conventional-changelog-angular@9.4.0:
+    resolution: {integrity: sha512-HdxRxuS8bBXVIuo4V82gvSwAXT0vYQUizrjs/izmPg5JdDstr8v8I5hduGL3iQbG+o310dUDxC4+LetuS5hu9w==}
+    engines: {node: '>=22'}
 
-  run-applescript@7.0.0:
-    resolution: {integrity: sha512-9by4Ij99JUr/MCFBUkDKLWK3G9HVXmabKz9U5MlIAIuvuzkiOicRYs8XJLxX+xahD+mLiiCYDqF9dKAgtzKP1A==}
-    engines: {node: '>=18'}
+  conventional-changelog-conventionalcommits@10.4.1:
+    resolution: {integrity: sha512-jS1LRFSbRoAr6JbhhRy1JYfNNUj5LM3+v49hRE03CgccsiYqgdVj/RTmrw4J1rylrqijHwdOlJWiJa61JHOgHg==}
+    engines: {node: '>=22'}
 
-  run-parallel@1.2.0:
-    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+  conventional-commits-parser@7.1.3:
+    resolution: {integrity: sha512-Q9oWm1o9uy/oEsZQIraoFMZ4RuPD+79KgwWj6mJVP356tazolCB0piRLZ5Kz9te9p027uSEcUW+Gu44Eh+X79g==}
+    engines: {node: '>=22'}
+    hasBin: true
 
-  safe-regex-test@1.1.0:
-    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
-    engines: {node: '>= 0.4'}
+  convert-gitmoji@0.1.5:
+    resolution: {integrity: sha512-4wqOafJdk2tqZC++cjcbGcaJ13BZ3kwldf06PTiAQRAB76Z1KJwZNL1SaRZMi2w1FM9RYTgZ6QErS8NUl/GBmQ==}
 
-  scheduler@0.26.0:
-    resolution: {integrity: sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==}
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
-  scule@1.3.0:
-    resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
+  cosmiconfig@9.0.2:
+    resolution: {integrity: sha512-gtTZxTDau1wL7Y7zifc2dd8jHSK/k6BTx/2Xp/BpdlAdnlYWFVt7qhJqgwi7637yRwRQ3qL4ZidbB4I8tA5VOg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
-  semver@6.3.1:
-    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
-    hasBin: true
+  css-select@6.0.0:
+    resolution: {integrity: sha512-rZZVSLle8v0+EY8QAkDWrKhpgt6SA5OtHsgBnsj6ZaLb5dmDVOWUDtQitd9ydxxvEjhewNudS6eTVU7uOyzvXw==}
 
-  semver@7.5.4:
-    resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
-    engines: {node: '>=10'}
-    hasBin: true
+  css-tree@2.2.1:
+    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
 
-  semver@7.7.1:
-    resolution: {integrity: sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==}
-    engines: {node: '>=10'}
-    hasBin: true
+  css-tree@3.1.0:
+    resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
 
-  semver@7.7.2:
-    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
-    engines: {node: '>=10'}
-    hasBin: true
+  css-what@7.0.0:
+    resolution: {integrity: sha512-wD5oz5xibMOPHzy13CyGmogB3phdvcDaB5t0W/Nr5Z2O/agcB8YwOz6e2Lsp10pNDzBoDO9nVa3RGs/2BttpHQ==}
+    engines: {node: '>= 6'}
 
-  set-function-length@1.2.2:
-    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
-    engines: {node: '>= 0.4'}
+  css.escape@1.5.1:
+    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
-  shebang-command@2.0.0:
-    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
-    engines: {node: '>=8'}
+  csso@5.0.5:
+    resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
 
-  shebang-regex@3.0.0:
-    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
-    engines: {node: '>=8'}
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
-  signal-exit@4.1.0:
-    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
-    engines: {node: '>=14'}
+  debug@4.4.1:
+    resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
 
-  simple-git-hooks@2.13.0:
-    resolution: {integrity: sha512-N+goiLxlkHJlyaYEglFypzVNMaNplPAk5syu0+OPp/Bk6dwVoXF6FfOw2vO0Dp+JHsBaI+w6cm8TnFl2Hw6tDA==}
-    hasBin: true
+  deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
+    engines: {node: '>=6'}
+
+  default-browser-id@5.0.0:
+    resolution: {integrity: sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA==}
+    engines: {node: '>=18'}
 
-  sirv@3.0.1:
-    resolution: {integrity: sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A==}
+  default-browser@5.2.1:
+    resolution: {integrity: sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==}
     engines: {node: '>=18'}
 
-  slice-ansi@5.0.0:
-    resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
+  define-lazy-prop@3.0.0:
+    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
     engines: {node: '>=12'}
 
-  slice-ansi@7.1.0:
-    resolution: {integrity: sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==}
-    engines: {node: '>=18'}
+  defu@6.1.7:
+    resolution: {integrity: sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==}
 
-  sonner@2.0.3:
-    resolution: {integrity: sha512-njQ4Hht92m0sMqqHVDL32V2Oun9W1+PHO9NDv9FHfJjT3JT22IG4Jpo3FPQy+mouRKCXFWO+r67v6MrHX2zeIA==}
-    peerDependencies:
-      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
 
-  source-map-js@1.2.1:
-    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
-    engines: {node: '>=0.10.0'}
+  destr@2.0.5:
+    resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
 
-  source-map@0.6.1:
-    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
-    engines: {node: '>=0.10.0'}
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
 
-  sprintf-js@1.0.3:
-    resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
+  doctrine@3.0.0:
+    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
+    engines: {node: '>=6.0.0'}
 
-  stable-hash@0.0.5:
-    resolution: {integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==}
+  dom-accessibility-api@0.5.16:
+    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
 
-  std-env@3.9.0:
-    resolution: {integrity: sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==}
+  dom-accessibility-api@0.6.3:
+    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
 
-  storybook@8.6.14:
-    resolution: {integrity: sha512-sVKbCj/OTx67jhmauhxc2dcr1P+yOgz/x3h0krwjyMgdc5Oubvxyg4NYDZmzAw+ym36g/lzH8N0Ccp4dwtdfxw==}
-    hasBin: true
-    peerDependencies:
-      prettier: ^2 || ^3
-    peerDependenciesMeta:
-      prettier:
-        optional: true
+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
 
-  string-argv@0.3.2:
-    resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
-    engines: {node: '>=0.6.19'}
+  domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
 
-  string-ts@2.2.1:
-    resolution: {integrity: sha512-Q2u0gko67PLLhbte5HmPfdOjNvUKbKQM+mCNQae6jE91DmoFHY6HH9GcdqCeNx87DZ2KKjiFxmA0R/42OneGWw==}
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
 
-  string-width@4.2.3:
-    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
-    engines: {node: '>=8'}
+  domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
 
-  string-width@5.1.2:
-    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+  dotenv@17.4.2:
+    resolution: {integrity: sha512-nI4U3TottKAcAD9LLud4Cb7b2QztQMUEfHbvhTH09bqXTxnSie8WnjPALV/WMCrJZ6UV/qHJ6L03OqO3LcdYZw==}
     engines: {node: '>=12'}
 
-  string-width@7.2.0:
-    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
-    engines: {node: '>=18'}
+  electron-to-chromium@1.5.149:
+    resolution: {integrity: sha512-UyiO82eb9dVOx8YO3ajDf9jz2kKyt98DEITRdeLPstOEuTlLzDA4Gyq5K9he71TQziU5jUVu2OAu5N48HmQiyQ==}
 
-  strip-ansi@6.0.1:
-    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
-    engines: {node: '>=8'}
+  emoji-regex@10.4.0:
+    resolution: {integrity: sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==}
 
-  strip-ansi@7.1.0:
-    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
-    engines: {node: '>=12'}
+  empathic@2.1.0:
+    resolution: {integrity: sha512-AnfC1ATldl49/cvZdLPDjBfrRNwbDO05aibiOtzQu3qtlbJtomNLhF30HEtn/7iBz50dlMECqATo3fG0LrdEgw==}
+    engines: {node: '>=14'}
 
-  strip-bom@3.0.0:
-    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
-    engines: {node: '>=4'}
+  enhanced-resolve@5.26.0:
+    resolution: {integrity: sha512-9vhedylFonb2YGogzUKX6+Ja72gOJbN1QHAqdrvqLwhdl/QWbKopzoUC9EbQNVsAns/bx/4uyqalrQAoy1IByw==}
+    engines: {node: '>=10.13.0'}
 
-  strip-indent@3.0.0:
-    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
-    engines: {node: '>=8'}
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
 
-  strip-indent@4.0.0:
-    resolution: {integrity: sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==}
-    engines: {node: '>=12'}
+  env-paths@2.2.1:
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
 
-  strip-json-comments@3.1.1:
-    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
-    engines: {node: '>=8'}
+  error-ex@1.3.4:
+    resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
 
-  stylehacks@7.0.4:
-    resolution: {integrity: sha512-i4zfNrGMt9SB4xRK9L83rlsFCgdGANfeDAYacO1pkqcE7cRHPdWHwnKZVz7WY17Veq/FvyYsRAU++Ga+qDFIww==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.31
+  es-module-lexer@2.3.2:
+    resolution: {integrity: sha512-poHGpORABojJJucnV9KbOavETW8lBVnphkW77ER5/BQ5Fz7oXSoCNek7IH3vR5nRjdsEz926ibFYX8KtLQmdyw==}
 
-  supports-color@7.2.0:
-    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
-    engines: {node: '>=8'}
+  es-toolkit@1.53.0:
+    resolution: {integrity: sha512-3+AYXp9fmJ/UhHBMYj2/U+RaUouMD90SzoItyDOB2Za7W6dB7fQApFGnZPl2MF6K8/Tv1koh1JyirSx/kju6Pw==}
 
-  supports-color@8.1.1:
-    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
-    engines: {node: '>=10'}
+  esbuild@0.25.4:
+    resolution: {integrity: sha512-8pgjLUcUjcgDg+2Q4NYXnPbo/vncAY4UmyaCm0jZevERqCHZIaWwdJHkf8XQtu4AxSKCdvrUbT0XUr1IdZzI8Q==}
+    engines: {node: '>=18'}
+    hasBin: true
 
-  supports-preserve-symlinks-flag@1.0.0:
-    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
-    engines: {node: '>= 0.4'}
+  esbuild@0.28.2:
+    resolution: {integrity: sha512-HKVLS8dvII+xoKW9kmqxbRKrnWEXfJJr/FZhhJmiqIB0e053QNYFqOBouTMO/k5sID4MvCiUCvv8b9M4h32wIA==}
+    engines: {node: '>=18'}
+    hasBin: true
 
-  svgo@3.3.2:
-    resolution: {integrity: sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==}
-    engines: {node: '>=14.0.0'}
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
     hasBin: true
 
-  synckit@0.9.2:
-    resolution: {integrity: sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==}
-    engines: {node: ^14.18.0 || >=16.0.0}
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
-  tailwind-merge@3.3.0:
-    resolution: {integrity: sha512-fyW/pEfcQSiigd5SNn0nApUOxx0zB/dm6UDU/rEwc2c3sX2smWUNbapHv+QRqLGVp9GWX3THIa7MUGPo+YkDzQ==}
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
 
-  tiny-invariant@1.3.3:
-    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+  esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+
+  eventemitter3@5.0.4:
+    resolution: {integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==}
+
+  expect-type@1.4.0:
+    resolution: {integrity: sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==}
+    engines: {node: '>=12.0.0'}
+
+  exsolve@1.1.3:
+    resolution: {integrity: sha512-kuzL9zherLQoqDeQaS55AiiIg1kb4KYXaSusTtgZTPlvKP2gGCI82LNmBNh5RjDVUXIcmgx+/Mx7vPwRzBbhJA==}
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
-  tinyexec@0.3.2:
-    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
 
-  tinyexec@1.0.1:
-    resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
+  fflate@0.8.3:
+    resolution: {integrity: sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==}
 
-  tinyglobby@0.2.13:
-    resolution: {integrity: sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==}
-    engines: {node: '>=12.0.0'}
+  flatted@3.4.4:
+    resolution: {integrity: sha512-5+ybhBZANEJxaH3X5evAFatUxLfEHSr7n6kYJ+1Qd0mUqr4eu9gIf6GDbWHf8RJijHrjjO8G+la14SlL2SeS1Q==}
 
-  tinyrainbow@1.2.0:
-    resolution: {integrity: sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==}
-    engines: {node: '>=14.0.0'}
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
 
-  tinyspy@3.0.2:
-    resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==}
-    engines: {node: '>=14.0.0'}
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
-  to-regex-range@5.0.1:
-    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
-    engines: {node: '>=8.0'}
+  fzf@0.5.2:
+    resolution: {integrity: sha512-Tt4kuxLXFKHy8KT40zwsUPUkg1CrsgY25FxA2U/j/0WgEDCk3ddc/zLTCCcbSHX9FcKtLuVaDGtGE/STWC+j3Q==}
 
-  totalist@3.0.1:
-    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
-    engines: {node: '>=6'}
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
 
-  ts-api-utils@2.1.0:
-    resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
-    engines: {node: '>=18.12'}
-    peerDependencies:
-      typescript: '>=4.8.4'
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
 
-  ts-declaration-location@1.0.7:
-    resolution: {integrity: sha512-EDyGAwH1gO0Ausm9gV6T2nUvBgXT5kGoCMJPllOaooZ+4VvJiKBdZE7wK18N1deEowhcUptS+5GXZK8U/fvpwA==}
-    peerDependencies:
-      typescript: '>=4.0.0'
+  get-east-asian-width@1.7.0:
+    resolution: {integrity: sha512-XjH1AECxf0giL2V1aU8vKyRR2ppRUb5c0EvT7zuJTokQ74bNo52zOtghqdWIqrhUD79fo3x0WfKZdOqxF6LG1Q==}
+    engines: {node: '>=18'}
 
-  ts-dedent@2.2.0:
-    resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
-    engines: {node: '>=6.10'}
+  giget@3.3.1:
+    resolution: {integrity: sha512-r+mvuDjrjMpsdw46Kmeydb8bdHm7wOKw8wNBtTndkjbPjgAp5oUJUxRE76wZFknxIPokfWvep2qSXK37aXE6zg==}
+    hasBin: true
 
-  ts-pattern@5.7.0:
-    resolution: {integrity: sha512-0/FvIG4g3kNkYgbNwBBW5pZBkfpeYQnH+2AA3xmjkCAit/DSDPKmgwC3fKof4oYUq6gupClVOJlFl+939VRBMg==}
+  glob@13.0.6:
+    resolution: {integrity: sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==}
+    engines: {node: 18 || 20 || >=22}
 
-  tsconfig-paths@4.2.0:
-    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
-    engines: {node: '>=6'}
+  global-directory@5.0.0:
+    resolution: {integrity: sha512-1pgFdhK3J2LeM+dVf2Pd424yHx2ou338lC0ErNP2hPx4j8eW1Sp0XqSjNxtk6Tc4Kr5wlWtSvz8cn2yb7/SG/w==}
+    engines: {node: '>=20'}
 
-  tslib@2.8.1:
-    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
-  tsx@4.19.4:
-    resolution: {integrity: sha512-gK5GVzDkJK1SI1zwHf32Mqxf2tSJkNx+eYcNly5+nHvWqXUJYUkWBQtKauoESz3ymezAI++ZwT855x5p5eop+Q==}
-    engines: {node: '>=18.0.0'}
-    hasBin: true
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
 
-  tween-functions@1.2.0:
-    resolution: {integrity: sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==}
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
 
-  type-check@0.4.0:
-    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
-    engines: {node: '>= 0.8.0'}
+  import-meta-resolve@4.2.0:
+    resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==}
 
-  type-fest@2.19.0:
-    resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
-    engines: {node: '>=12.20'}
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
 
-  type-fest@4.41.0:
-    resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
-    engines: {node: '>=16'}
+  ini@6.0.0:
+    resolution: {integrity: sha512-IBTdIkzZNOpqm7q3dRqJvMaldXjDHWkEDfrwGEQTs5eaQMWV+djAhR+wahyNNMAa+qpbDUhBMVt4ZKNwpPm7xQ==}
+    engines: {node: ^20.17.0 || >=22.9.0}
 
-  typescript-eslint@8.31.1:
-    resolution: {integrity: sha512-j6DsEotD/fH39qKzXTQRwYYWlt7D+0HmfpOK+DVhwJOFLcdmn92hq3mBb7HlKJHbjjI/gTOqEcc9d6JfpFf/VA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
+  is-arrayish@0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
 
-  typescript@5.8.2:
-    resolution: {integrity: sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==}
-    engines: {node: '>=14.17'}
-    hasBin: true
+  is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
 
-  typescript@5.8.3:
-    resolution: {integrity: sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==}
-    engines: {node: '>=14.17'}
+  is-docker@3.0.0:
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     hasBin: true
 
-  ufo@1.6.1:
-    resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
-
-  unbuild@3.5.0:
-    resolution: {integrity: sha512-DPFttsiADnHRb/K+yJ9r9jdn6JyXlsmdT0S12VFC14DFSJD+cxBnHq+v0INmqqPVPxOoUjvJFYUVIb02rWnVeA==}
+  is-inside-container@1.0.0:
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
     hasBin: true
-    peerDependencies:
-      typescript: ^5.7.3
-    peerDependenciesMeta:
-      typescript:
-        optional: true
 
-  unconfig@7.3.2:
-    resolution: {integrity: sha512-nqG5NNL2wFVGZ0NA/aCFw0oJ2pxSf1lwg4Z5ill8wd7K4KX/rQbHlwbh+bjctXL5Ly1xtzHenHGOK0b+lG6JVg==}
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
 
-  undici-types@6.21.0:
-    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+  is-wsl@3.1.0:
+    resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==}
+    engines: {node: '>=16'}
 
-  universalify@2.0.1:
-    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
-    engines: {node: '>= 10.0.0'}
+  jiti@2.7.0:
+    resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
+    hasBin: true
 
-  unocss-preset-animations@1.2.1:
-    resolution: {integrity: sha512-HFdYPSLZ8SaAgTLfTNoiV5+1xAdcttOtFSPsZyHbA0qSis7Sansf90pz7a2yhs9Yq6Nos9P4onDttfdO8dwKPA==}
-    peerDependencies:
-      '@unocss/preset-wind3': '>=0.56.0 < 101'
-      unocss: '>=0.56.0 < 101'
-    peerDependenciesMeta:
-      '@unocss/preset-wind3':
-        optional: true
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
-  unocss@66.1.2:
-    resolution: {integrity: sha512-mVwuXzIZ5Ex83F4w3XVJyp9DSbh5KhDzglyvMLktX8oU0QxQtaSpa5lE1twl3wgM0pVL9gmzD4a0FoYWZuJIDg==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      '@unocss/webpack': 66.1.2
-      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0
-    peerDependenciesMeta:
-      '@unocss/webpack':
-        optional: true
-      vite:
-        optional: true
+  js-yaml@4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
 
-  unplugin-utils@0.2.4:
-    resolution: {integrity: sha512-8U/MtpkPkkk3Atewj1+RcKIjb5WBimZ/WSLhhR3w6SsIj8XJuKTacSP8g+2JhfSGw0Cb125Y+2zA/IzJZDVbhA==}
-    engines: {node: '>=18.12.0'}
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
 
-  unplugin@1.16.1:
-    resolution: {integrity: sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==}
-    engines: {node: '>=14.0.0'}
+  json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
 
-  unrs-resolver@1.7.2:
-    resolution: {integrity: sha512-BBKpaylOW8KbHsu378Zky/dGh4ckT/4NW/0SHRABdqRLcQJ2dAOjDo9g97p04sWflm0kqPqpUatxReNV/dqI5A==}
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
 
-  untyped@2.0.0:
-    resolution: {integrity: sha512-nwNCjxJTjNuLCgFr42fEak5OcLuB3ecca+9ksPFNvtfYSLpjf+iJqSIaSnIile6ZPbKYxI5k2AfXqeopGudK/g==}
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
     hasBin: true
 
-  update-browserslist-db@1.1.3:
-    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
+  jsonc-parser@3.3.1:
+    resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==}
 
-  uri-js@4.4.1:
-    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+  lightningcss-android-arm64@1.32.0:
+    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
 
-  use-callback-ref@1.3.3:
-    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  lightningcss-android-arm64@1.33.0:
+    resolution: {integrity: sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
 
-  use-sidecar@1.1.3:
-    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  lightningcss-darwin-arm64@1.32.0:
+    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
 
-  util-deprecate@1.0.2:
-    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+  lightningcss-darwin-arm64@1.33.0:
+    resolution: {integrity: sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
 
-  util@0.12.5:
-    resolution: {integrity: sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==}
+  lightningcss-darwin-x64@1.32.0:
+    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
 
-  uuid@9.0.1:
-    resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
-    hasBin: true
+  lightningcss-darwin-x64@1.33.0:
+    resolution: {integrity: sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
 
-  vite-plugin-dts@4.5.4:
-    resolution: {integrity: sha512-d4sOM8M/8z7vRXHHq/ebbblfaxENjogAAekcfcDCCwAyvGqnPrc7f4NZbvItS+g4WTgerW0xDwSz5qz11JT3vg==}
-    peerDependencies:
-      typescript: '*'
-      vite: '*'
-    peerDependenciesMeta:
-      vite:
-        optional: true
+  lightningcss-freebsd-x64@1.32.0:
+    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
 
-  vite@6.3.5:
-    resolution: {integrity: sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==}
-    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
-    hasBin: true
-    peerDependencies:
-      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
-      jiti: '>=1.21.0'
-      less: '*'
-      lightningcss: ^1.21.0
-      sass: '*'
-      sass-embedded: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.16.0
-      tsx: ^4.8.1
-      yaml: ^2.4.2
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      jiti:
-        optional: true
-      less:
-        optional: true
-      lightningcss:
-        optional: true
-      sass:
-        optional: true
-      sass-embedded:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-      tsx:
-        optional: true
-      yaml:
-        optional: true
+  lightningcss-freebsd-x64@1.33.0:
+    resolution: {integrity: sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
 
-  vscode-uri@3.1.0:
-    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
 
-  vue-flow-layout@0.1.1:
-    resolution: {integrity: sha512-JdgRRUVrN0Y2GosA0M68DEbKlXMqJ7FQgsK8CjQD2vxvNSqAU6PZEpi4cfcTVtfM2GVOMjHo7GKKLbXxOBqDqA==}
-    peerDependencies:
-      vue: ^3.4.37
+  lightningcss-linux-arm-gnueabihf@1.33.0:
+    resolution: {integrity: sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
 
-  vue@3.5.13:
-    resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+  lightningcss-linux-arm64-gnu@1.32.0:
+    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
 
-  webpack-virtual-modules@0.6.2:
-    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+  lightningcss-linux-arm64-gnu@1.33.0:
+    resolution: {integrity: sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
 
-  which-typed-array@1.1.19:
-    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
-    engines: {node: '>= 0.4'}
+  lightningcss-linux-arm64-musl@1.32.0:
+    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
 
-  which@2.0.2:
-    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
-    engines: {node: '>= 8'}
-    hasBin: true
+  lightningcss-linux-arm64-musl@1.33.0:
+    resolution: {integrity: sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
 
-  word-wrap@1.2.5:
-    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
-    engines: {node: '>=0.10.0'}
+  lightningcss-linux-x64-gnu@1.32.0:
+    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
 
-  wrap-ansi@7.0.0:
-    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
-    engines: {node: '>=10'}
+  lightningcss-linux-x64-gnu@1.33.0:
+    resolution: {integrity: sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
 
-  wrap-ansi@8.1.0:
-    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
-    engines: {node: '>=12'}
+  lightningcss-linux-x64-musl@1.32.0:
+    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
 
-  wrap-ansi@9.0.0:
-    resolution: {integrity: sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==}
-    engines: {node: '>=18'}
+  lightningcss-linux-x64-musl@1.33.0:
+    resolution: {integrity: sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
 
-  ws@8.18.2:
-    resolution: {integrity: sha512-DMricUmwGZUVr++AEAe2uiVM7UoO9MAVZMDu05UQOaUII0lp+zOzLLU4Xqh/JvTqklB1T4uELaaPBKyjE1r4fQ==}
-    engines: {node: '>=10.0.0'}
-    peerDependencies:
-      bufferutil: ^4.0.1
-      utf-8-validate: '>=5.0.2'
-    peerDependenciesMeta:
-      bufferutil:
-        optional: true
-      utf-8-validate:
-        optional: true
+  lightningcss-win32-arm64-msvc@1.32.0:
+    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
 
-  yallist@3.1.1:
-    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+  lightningcss-win32-arm64-msvc@1.33.0:
+    resolution: {integrity: sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
 
-  yallist@4.0.0:
-    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
+  lightningcss-win32-x64-msvc@1.32.0:
+    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
 
-  yaml-eslint-parser@1.3.0:
-    resolution: {integrity: sha512-E/+VitOorXSLiAqtTd7Yqax0/pAS3xaYMP+AUUJGOK1OZG3rhcj9fcJOM5HJ2VrP1FrStVCWr1muTfQCdj4tAA==}
-    engines: {node: ^14.17.0 || >=16.0.0}
+  lightningcss-win32-x64-msvc@1.33.0:
+    resolution: {integrity: sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
 
-  yaml@2.7.1:
-    resolution: {integrity: sha512-10ULxpnOCQXxJvBgxsn9ptjq6uviG/htZKk9veJGhlqn3w/DxQ631zFF+nlQXLwmImeS5amR2dl2U8sg6U9jsQ==}
-    engines: {node: '>= 14'}
-    hasBin: true
+  lightningcss@1.32.0:
+    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
+    engines: {node: '>= 12.0.0'}
 
-  yocto-queue@0.1.0:
-    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
-    engines: {node: '>=10'}
+  lightningcss@1.33.0:
+    resolution: {integrity: sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==}
+    engines: {node: '>= 12.0.0'}
 
-snapshots:
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
-  '@adobe/css-tools@4.4.2': {}
+  loupe@3.2.1:
+    resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
 
-  '@ampproject/remapping@2.3.0':
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.8
-      '@jridgewell/trace-mapping': 0.3.25
+  lru-cache@11.1.0:
+    resolution: {integrity: sha512-QIXZUBJUx+2zHUdQujWejBkcD9+cs94tLn0+YL8UrCh+D5sCXZ4c7LaEH48pNwRY3MLDgqUFyhlCyjJPf1WP0A==}
+    engines: {node: 20 || >=22}
 
-  '@antfu/install-pkg@1.1.0':
-    dependencies:
-      package-manager-detector: 1.3.0
-      tinyexec: 1.0.1
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
-  '@antfu/utils@8.1.1': {}
+  lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
 
-  '@babel/code-frame@7.27.1':
-    dependencies:
-      '@babel/helper-validator-identifier': 7.27.1
-      js-tokens: 4.0.0
-      picocolors: 1.1.1
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
-  '@babel/compat-data@7.27.1': {}
+  magic-string@1.4.3:
+    resolution: {integrity: sha512-z12OxmaPGE0F4xlpGdjuAUckipLpQlTAuAmyGhNoD7ODpYUzvDfvtxUbjM/jwznyP178oju/KDdyi220wNJ0RQ==}
 
-  '@babel/core@7.27.1':
-    dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.27.1
-      '@babel/helper-compilation-targets': 7.27.1
-      '@babel/helper-module-transforms': 7.27.1(@babel/core@7.27.1)
-      '@babel/helpers': 7.27.1
-      '@babel/parser': 7.27.1
-      '@babel/template': 7.27.1
-      '@babel/traverse': 7.27.1
-      '@babel/types': 7.27.1
-      convert-source-map: 2.0.0
-      debug: 4.4.0
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
+  mdn-data@2.0.28:
+    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
 
-  '@babel/generator@7.27.1':
-    dependencies:
-      '@babel/parser': 7.27.1
-      '@babel/types': 7.27.1
-      '@jridgewell/gen-mapping': 0.3.8
-      '@jridgewell/trace-mapping': 0.3.25
-      jsesc: 3.1.0
+  mdn-data@2.12.2:
+    resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
 
-  '@babel/helper-compilation-targets@7.27.1':
-    dependencies:
-      '@babel/compat-data': 7.27.1
-      '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.24.5
-      lru-cache: 5.1.1
-      semver: 6.3.1
+  mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
 
-  '@babel/helper-module-imports@7.27.1':
-    dependencies:
-      '@babel/traverse': 7.27.1
-      '@babel/types': 7.27.1
-    transitivePeerDependencies:
-      - supports-color
+  min-indent@1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
 
-  '@babel/helper-module-transforms@7.27.1(@babel/core@7.27.1)':
-    dependencies:
-      '@babel/core': 7.27.1
-      '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
-      '@babel/traverse': 7.27.1
-    transitivePeerDependencies:
-      - supports-color
+  minimatch@10.2.6:
+    resolution: {integrity: sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==}
+    engines: {node: 18 || 20 || >=22}
 
-  '@babel/helper-plugin-utils@7.27.1': {}
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
-  '@babel/helper-string-parser@7.27.1': {}
+  minipass@7.1.3:
+    resolution: {integrity: sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==}
+    engines: {node: '>=16 || 14 >=14.17'}
 
-  '@babel/helper-validator-identifier@7.27.1': {}
+  modern-tar@0.8.6:
+    resolution: {integrity: sha512-LYSks0tNVqbtez/9OB0YFP6qLRSqkdAxJWOQpVaR67lNTbj2zNLyYpowkRMia5lXLCZKzxwoxkxH2MbbBR2aEg==}
+    engines: {node: '>=18.0.0'}
 
-  '@babel/helper-validator-option@7.27.1': {}
+  mri@1.2.0:
+    resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
+    engines: {node: '>=4'}
 
-  '@babel/helpers@7.27.1':
-    dependencies:
-      '@babel/template': 7.27.1
-      '@babel/types': 7.27.1
+  mrmime@2.0.1:
+    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
+    engines: {node: '>=10'}
 
-  '@babel/parser@7.27.1':
-    dependencies:
-      '@babel/types': 7.27.1
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
-  '@babel/parser@7.27.2':
-    dependencies:
-      '@babel/types': 7.27.1
+  nanoid@3.3.20:
+    resolution: {integrity: sha512-uKdg2G3GNCKQn9byYOpxbGqrT2fGO5KRt5J/8b3pok8rT6qxGWF6hxMyJiEYtAf+FVyYuD9hRaDqX5uPFYJ4ZQ==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
 
-  '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.27.1)':
-    dependencies:
-      '@babel/core': 7.27.1
-      '@babel/helper-plugin-utils': 7.27.1
+  node-fetch-native@1.6.6:
+    resolution: {integrity: sha512-8Mc2HhqPdlIfedsuZoc3yioPuzp6b+L5jRCRY1QzuWZh2EGJVQrGppC6V6cF0bLdbW0+O2YpqCA25aF/1lvipQ==}
 
-  '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.27.1)':
-    dependencies:
-      '@babel/core': 7.27.1
-      '@babel/helper-plugin-utils': 7.27.1
+  node-fetch-native@1.6.7:
+    resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
 
-  '@babel/runtime@7.27.1': {}
+  node-releases@2.0.19:
+    resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
 
-  '@babel/template@7.27.1':
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/parser': 7.27.1
-      '@babel/types': 7.27.1
+  nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
-  '@babel/traverse@7.27.1':
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.27.1
-      '@babel/parser': 7.27.1
-      '@babel/template': 7.27.1
-      '@babel/types': 7.27.1
-      debug: 4.4.0
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
+  obug@3.0.0:
+    resolution: {integrity: sha512-5vvB5+W7ePv+p3uqxi+RcW1XAzLW0/hxt3/4X4Lc4qHudzOhmBiBwOY6DRob4WnanAEGvNcLjF+KNOufrUoEQw==}
+    engines: {node: '>=12.20.0'}
 
-  '@babel/types@7.27.1':
-    dependencies:
-      '@babel/helper-string-parser': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
+  ofetch@1.4.1:
+    resolution: {integrity: sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw==}
 
-  '@chromatic-com/storybook@3.2.6(react@19.1.0)(storybook@8.6.14)':
-    dependencies:
-      chromatic: 11.28.2
-      filesize: 10.1.6
-      jsonfile: 6.1.0
-      react-confetti: 6.4.0(react@19.1.0)
-      storybook: 8.6.14
-      strip-ansi: 7.1.0
-    transitivePeerDependencies:
-      - '@chromatic-com/cypress'
-      - '@chromatic-com/playwright'
-      - react
+  ofetch@1.5.1:
+    resolution: {integrity: sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA==}
 
-  '@emnapi/core@1.4.3':
-    dependencies:
-      '@emnapi/wasi-threads': 1.0.2
-      tslib: 2.8.1
-    optional: true
+  ohash@2.0.11:
+    resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
 
-  '@emnapi/runtime@1.4.3':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
+  onetime@7.0.0:
+    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
+    engines: {node: '>=18'}
 
-  '@emnapi/wasi-threads@1.0.2':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
+  open@10.2.0:
+    resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==}
+    engines: {node: '>=18'}
 
-  '@esbuild/aix-ppc64@0.25.3':
-    optional: true
+  oxc-parser@0.127.0:
+    resolution: {integrity: sha512-bkgD4qHlN7WxLdX8bLXdaU54TtQtAIg/ZBAfm0aje/mo3MRDo3P0hZSgr4U7O3xfX+fQmR5AP04JS/TGcZLcFA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
 
-  '@esbuild/aix-ppc64@0.25.4':
-    optional: true
+  oxc-resolver@11.21.2:
+    resolution: {integrity: sha512-w5tLwYN3Zo24w5EeWJjJWZOwhYqTtC8PS2B1tIt7BZUuqTIcU07sQValbDw+rq7+AuAGzOHklgK+ifsy4lpXfw==}
 
-  '@esbuild/android-arm64@0.25.3':
-    optional: true
+  oxfmt@0.74.0:
+    resolution: {integrity: sha512-G4OP7FgwGYZR5ttRpCOOfJdyRsSyvtn34vSXnjDq6Oqed5Dufg5mB44mank+51nAdHOKuTJ0lj0mksY7L+N61A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@astrojs/compiler-rs': ^0.4.0 || ^0.5.0
+      svelte: ^5.0.0
+      vite-plus: '*'
+    peerDependenciesMeta:
+      '@astrojs/compiler-rs':
+        optional: true
+      svelte:
+        optional: true
+      vite-plus:
+        optional: true
 
-  '@esbuild/android-arm64@0.25.4':
-    optional: true
+  oxlint-tsgolint@7.0.2004:
+    resolution: {integrity: sha512-vQ9WDF3fiZJvRdSDosNOflerOCOpwol6vWzVDxW76RcU19cjTh7engvkHLvmv+tzedR8fAiJUVUGr6IVZdkzXQ==}
+    hasBin: true
 
-  '@esbuild/android-arm@0.25.3':
-    optional: true
+  oxlint@1.89.0:
+    resolution: {integrity: sha512-a25hkfo61okGPvJz432fRIPoxlKtNnOVy9w4rzrmGgNm4iVTPwpSQlmdqNWnp6p9QyyPVfAZRgnf5XvSBZFk/A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      oxlint-tsgolint: '>=7.0.2003'
+      vite-plus: '*'
+    peerDependenciesMeta:
+      oxlint-tsgolint:
+        optional: true
+      vite-plus:
+        optional: true
 
-  '@esbuild/android-arm@0.25.4':
-    optional: true
+  package-manager-detector@1.9.0:
+    resolution: {integrity: sha512-zAMfbta9nPA8AKkA4WdmNAT8R8s6Dk0/xwPsqNnRidMFcLo1YkLuPDTgs2f64XdzS8vbLNnoJ+uUIkgbz7oRHA==}
 
-  '@esbuild/android-x64@0.25.3':
-    optional: true
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
 
-  '@esbuild/android-x64@0.25.4':
-    optional: true
+  parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
 
-  '@esbuild/darwin-arm64@0.25.3':
-    optional: true
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
 
-  '@esbuild/darwin-arm64@0.25.4':
-    optional: true
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
-  '@esbuild/darwin-x64@0.25.3':
-    optional: true
+  path-scurry@2.0.2:
+    resolution: {integrity: sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==}
+    engines: {node: 18 || 20 || >=22}
 
-  '@esbuild/darwin-x64@0.25.4':
-    optional: true
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
-  '@esbuild/freebsd-arm64@0.25.3':
-    optional: true
+  pathval@2.0.0:
+    resolution: {integrity: sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==}
+    engines: {node: '>= 14.16'}
 
-  '@esbuild/freebsd-arm64@0.25.4':
-    optional: true
+  perfect-debounce@2.1.0:
+    resolution: {integrity: sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==}
 
-  '@esbuild/freebsd-x64@0.25.3':
-    optional: true
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
-  '@esbuild/freebsd-x64@0.25.4':
-    optional: true
+  picomatch@4.0.7:
+    resolution: {integrity: sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==}
+    engines: {node: '>=12'}
 
-  '@esbuild/linux-arm64@0.25.3':
-    optional: true
+  pkg-types@2.4.0:
+    resolution: {integrity: sha512-07Fys7iVx0X6TcviMOgogM1Lk33ZyqOezMnU79S+kffWqwolG/5W9V8EgQSeYCIfFTYVgssRbnH630Oa2+soBA==}
 
-  '@esbuild/linux-arm64@0.25.4':
-    optional: true
+  playwright-core@1.64.1:
+    resolution: {integrity: sha512-BC4s8y6SEVA6Q1rSxZTto8hI1KUI3xXlHGZgvGqP4IqPdI/a6FX9H29IDNz7vKo9l21b6LfYosScPL6M3xxyDQ==}
+    engines: {node: '>=20'}
+    hasBin: true
 
-  '@esbuild/linux-arm@0.25.3':
-    optional: true
+  playwright@1.64.1:
+    resolution: {integrity: sha512-HCrVhHr5QQuwYoswEUGTb7gGp522yflbv/ST8nF4sFWGuLjQCt17Q/EubpGGSNKYn1tsTCPZxqHhHCfVURu7UA==}
+    engines: {node: '>=20'}
+    hasBin: true
 
-  '@esbuild/linux-arm@0.25.4':
-    optional: true
+  pngjs@7.0.0:
+    resolution: {integrity: sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==}
+    engines: {node: '>=14.19.0'}
 
-  '@esbuild/linux-ia32@0.25.3':
-    optional: true
+  pnpm-workspace-yaml@1.9.1:
+    resolution: {integrity: sha512-Xj/T2X6DNAWbtk/9UQ0/TJRswltiHZevmcMjqoL7WrpJi67lu3qaslU4+I+zJ8wtwqmuvAE0KkB8rbv2ZdogBg==}
 
-  '@esbuild/linux-ia32@0.25.4':
-    optional: true
+  postcss@8.5.31:
+    resolution: {integrity: sha512-YUbWYCgErwnMAVkjUnYa+KlMBzGpHwiIt/DE7f0G33AuX2LH9UcTk6KgWxd3zRU+pN3u/C+Xl3EnMLM4Hea7Sg==}
+    engines: {node: ^10 || ^12 || >=14}
 
-  '@esbuild/linux-loong64@0.25.3':
-    optional: true
+  pretty-format@27.5.1:
+    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
 
-  '@esbuild/linux-loong64@0.25.4':
-    optional: true
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
 
-  '@esbuild/linux-mips64el@0.25.3':
-    optional: true
+  quansync@1.0.0:
+    resolution: {integrity: sha512-5xZacEEufv3HSTPQuchrvV6soaiACMFnq1H8wkVioctoH3TRha9Sz66lOxRwPK/qZj7HPiSveih9yAyh98gvqA==}
 
-  '@esbuild/linux-mips64el@0.25.4':
-    optional: true
+  rc9@3.1.0:
+    resolution: {integrity: sha512-ufjkNVzbRHKcCOmTahZkmVsyc3W+MSk3jY03m+a7tGHkIsdVMG9l10/3HvFbWkkKzY5VFp3pkRsIo/UYgmFL7Q==}
 
-  '@esbuild/linux-ppc64@0.25.3':
-    optional: true
+  react-docgen-typescript@2.2.2:
+    resolution: {integrity: sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==}
+    peerDependencies:
+      typescript: '>= 4.3.x'
 
-  '@esbuild/linux-ppc64@0.25.4':
-    optional: true
+  react-docgen@8.0.4:
+    resolution: {integrity: sha512-gIYjtVTU4NCWZnb/LXVSWfClZXnjzX3+xxi69Tkfu4YsmYuqiOk8giLkKt/WwxWqh+U66CTh8Kqbha1uPv8/qQ==}
+    engines: {node: ^20.9.0 || >=22}
 
-  '@esbuild/linux-riscv64@0.25.3':
-    optional: true
+  react-dom@19.3.1:
+    resolution: {integrity: sha512-Y0bARz53lhEC1NMCASs0/j+faB/zqt3R8hpvg1e8+61ZVJ4UL0UdC4cBbXfZMcIuhrfgeILTLe+ZeBCavQPtKQ==}
+    peerDependencies:
+      react: ^19.3.1
 
-  '@esbuild/linux-riscv64@0.25.4':
-    optional: true
+  react-is@17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
-  '@esbuild/linux-s390x@0.25.3':
-    optional: true
+  react@19.3.1:
+    resolution: {integrity: sha512-QNhWdt7nrgVWWQG58QuGsAR3jv3Hbe4mb4vz7w2csnHavciZJgda1CPNaldF6eVxv90ud3jUXpKlHL69gO38yw==}
+    engines: {node: '>=0.10.0'}
 
-  '@esbuild/linux-s390x@0.25.4':
-    optional: true
+  readdirp@5.1.1:
+    resolution: {integrity: sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==}
+    engines: {node: '>= 20.19.0'}
 
-  '@esbuild/linux-x64@0.25.3':
-    optional: true
+  recast@0.23.11:
+    resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
+    engines: {node: '>= 4'}
 
-  '@esbuild/linux-x64@0.25.4':
-    optional: true
+  redent@3.0.0:
+    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
+    engines: {node: '>=8'}
 
-  '@esbuild/netbsd-arm64@0.25.3':
-    optional: true
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
 
-  '@esbuild/netbsd-arm64@0.25.4':
-    optional: true
+  reselect@5.3.0:
+    resolution: {integrity: sha512-XGoLeRAVzUTcJ1qkxPQhDJyIZ5d6zzZD9nT7AEZOaaU9UbWclhycElmhO+VD5bFeLuzhPBaOV2oXC8uG35ZSpg==}
 
-  '@esbuild/netbsd-x64@0.25.3':
-    optional: true
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
 
-  '@esbuild/netbsd-x64@0.25.4':
-    optional: true
+  resolve-from@5.0.0:
+    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
+    engines: {node: '>=8'}
 
-  '@esbuild/openbsd-arm64@0.25.3':
-    optional: true
+  resolve@1.22.10:
+    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
 
-  '@esbuild/openbsd-arm64@0.25.4':
-    optional: true
+  restore-cursor@5.1.0:
+    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
+    engines: {node: '>=18'}
 
-  '@esbuild/openbsd-x64@0.25.3':
-    optional: true
+  rollup@4.40.1:
+    resolution: {integrity: sha512-C5VvvgCCyfyotVITIAv+4efVytl5F7wt+/I2i9q9GZcEXW9BP52YYOXC58igUi+LFZVHukErIIqQSWwv/M3WRw==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
 
-  '@esbuild/openbsd-x64@0.25.4':
-    optional: true
+  run-applescript@7.0.0:
+    resolution: {integrity: sha512-9by4Ij99JUr/MCFBUkDKLWK3G9HVXmabKz9U5MlIAIuvuzkiOicRYs8XJLxX+xahD+mLiiCYDqF9dKAgtzKP1A==}
+    engines: {node: '>=18'}
 
-  '@esbuild/sunos-x64@0.25.3':
-    optional: true
+  sax@1.6.1:
+    resolution: {integrity: sha512-42tBVwLWnaQvW5zc4HbZrTuWccECCZfBi92FDuwtqxasH+JbPB3/FOKb1m222K42R4WxuxzzMsTswfzgtSu64Q==}
+    engines: {node: '>=11.0.0'}
 
-  '@esbuild/sunos-x64@0.25.4':
-    optional: true
+  scheduler@0.28.0:
+    resolution: {integrity: sha512-juorfCmIkIw8tT+p5BXSm6PJjQF/ycEYmKyzURCIt/RaZIhL+PulbQ9Yu2z1HdOJDdqDTlxA1+xKBmHXJsczAw==}
 
-  '@esbuild/win32-arm64@0.25.3':
-    optional: true
+  scule@1.3.0:
+    resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
 
-  '@esbuild/win32-arm64@0.25.4':
-    optional: true
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
 
-  '@esbuild/win32-ia32@0.25.3':
-    optional: true
+  semver@7.8.5:
+    resolution: {integrity: sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==}
+    engines: {node: '>=10'}
+    hasBin: true
 
-  '@esbuild/win32-ia32@0.25.4':
-    optional: true
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
 
-  '@esbuild/win32-x64@0.25.3':
-    optional: true
+  simple-git-hooks@2.14.0:
+    resolution: {integrity: sha512-kkTORPAuxQz2g1QUuN0J8yGWT28tjGBfPOdJ4xT7Vbeu30veKUZQIoID2qGgCDAakaQn59UeZJJ4cFGB8PVP2A==}
+    hasBin: true
 
-  '@esbuild/win32-x64@0.25.4':
-    optional: true
+  sirv@3.0.2:
+    resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==}
+    engines: {node: '>=18'}
 
-  '@eslint-community/eslint-utils@4.7.0(eslint@9.27.0(jiti@2.4.2))':
-    dependencies:
-      eslint: 9.27.0(jiti@2.4.2)
-      eslint-visitor-keys: 3.4.3
+  sonner@2.0.8:
+    resolution: {integrity: sha512-UM/ByIoFra8yzV75n1o0Puu0bw5U/9UNnDacrJNspekBewIfsQ3D6ez1nvlWpt7aTsO6rujQtifBpycwIivqlg==}
+    peerDependencies:
+      '@types/react': ^18.0.0 || ^19.0.0
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  '@eslint-community/regexpp@4.12.1': {}
+  source-map-js@1.2.2:
+    resolution: {integrity: sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw==}
+    engines: {node: '>=0.10.0'}
 
-  '@eslint-react/ast@1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)':
-    dependencies:
-      '@eslint-react/eff': 1.49.0
-      '@typescript-eslint/types': 8.31.1
-      '@typescript-eslint/typescript-estree': 8.31.1(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      string-ts: 2.2.1
-      ts-pattern: 5.7.0
-    transitivePeerDependencies:
-      - eslint
-      - supports-color
-      - typescript
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
 
-  '@eslint-react/core@1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)':
-    dependencies:
-      '@eslint-react/ast': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/eff': 1.49.0
-      '@eslint-react/kit': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/shared': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/var': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@typescript-eslint/scope-manager': 8.31.1
-      '@typescript-eslint/type-utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@typescript-eslint/types': 8.31.1
-      '@typescript-eslint/utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      birecord: 0.1.1
-      ts-pattern: 5.7.0
-    transitivePeerDependencies:
-      - eslint
-      - supports-color
-      - typescript
+  std-env@3.9.0:
+    resolution: {integrity: sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==}
 
-  '@eslint-react/eff@1.49.0': {}
-
-  '@eslint-react/eslint-plugin@1.49.0(eslint@9.27.0(jiti@2.4.2))(ts-api-utils@2.1.0(typescript@5.8.3))(typescript@5.8.3)':
-    dependencies:
-      '@eslint-react/eff': 1.49.0
-      '@eslint-react/kit': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/shared': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@typescript-eslint/scope-manager': 8.31.1
-      '@typescript-eslint/type-utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@typescript-eslint/types': 8.31.1
-      '@typescript-eslint/utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      eslint: 9.27.0(jiti@2.4.2)
-      eslint-plugin-react-debug: 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      eslint-plugin-react-dom: 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      eslint-plugin-react-hooks-extra: 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      eslint-plugin-react-naming-convention: 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      eslint-plugin-react-web-api: 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      eslint-plugin-react-x: 1.49.0(eslint@9.27.0(jiti@2.4.2))(ts-api-utils@2.1.0(typescript@5.8.3))(typescript@5.8.3)
-    optionalDependencies:
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-      - ts-api-utils
+  std-env@4.3.0:
+    resolution: {integrity: sha512-OtU/EgQ1kIm5KwqQpBC6ZEMXrZRui11w8zgfTWp8cdO9B8OaPsbA8bTHO2P+HNo1VlUTGMVBwPhydu6poeXiag==}
 
-  '@eslint-react/kit@1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)':
-    dependencies:
-      '@eslint-react/eff': 1.49.0
-      '@typescript-eslint/utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@zod/mini': 4.0.0-beta.20250505T012514
-      ts-pattern: 5.7.0
-    transitivePeerDependencies:
-      - eslint
-      - supports-color
-      - typescript
+  storybook@10.6.3:
+    resolution: {integrity: sha512-lNBvcZFG44C98KvQHYzfq1O46m+sl94zY1+na5/9E3ihtNMbvpOgYyMFMIcWYUvOMo3OM4q9jzvB73KU20bU8w==}
+    hasBin: true
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      prettier: ^2 || ^3
+      vite-plus: ^0.1.15 || ^0.2.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      prettier:
+        optional: true
+      vite-plus:
+        optional: true
 
-  '@eslint-react/shared@1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)':
-    dependencies:
-      '@eslint-react/eff': 1.49.0
-      '@eslint-react/kit': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@zod/mini': 4.0.0-beta.20250505T012514
-      ts-pattern: 5.7.0
-    transitivePeerDependencies:
-      - eslint
-      - supports-color
-      - typescript
+  string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
 
-  '@eslint-react/var@1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)':
-    dependencies:
-      '@eslint-react/ast': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/eff': 1.49.0
-      '@typescript-eslint/scope-manager': 8.31.1
-      '@typescript-eslint/types': 8.31.1
-      '@typescript-eslint/utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      string-ts: 2.2.1
-      ts-pattern: 5.7.0
-    transitivePeerDependencies:
-      - eslint
-      - supports-color
-      - typescript
+  string-width@8.3.0:
+    resolution: {integrity: sha512-ZbmZM0JCihQN91dWnxoipT2KOEyHqEyfRXUyjuRhW8b/xnqPDoq4gWEVApTVa9db2wN8mmoikgFBbjh71+cGeQ==}
+    engines: {node: '>=20'}
 
-  '@eslint/config-array@0.20.0':
-    dependencies:
-      '@eslint/object-schema': 2.1.6
-      debug: 4.4.1
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
+  strip-ansi@7.2.0:
+    resolution: {integrity: sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==}
+    engines: {node: '>=12'}
 
-  '@eslint/config-helpers@0.2.2': {}
+  strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
 
-  '@eslint/core@0.13.0':
-    dependencies:
-      '@types/json-schema': 7.0.15
+  strip-indent@3.0.0:
+    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
+    engines: {node: '>=8'}
 
-  '@eslint/core@0.14.0':
-    dependencies:
-      '@types/json-schema': 7.0.15
+  strip-indent@4.0.0:
+    resolution: {integrity: sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==}
+    engines: {node: '>=12'}
 
-  '@eslint/eslintrc@3.3.1':
-    dependencies:
-      ajv: 6.12.6
-      debug: 4.4.1
-      espree: 10.3.0
-      globals: 14.0.0
-      ignore: 5.3.2
-      import-fresh: 3.3.1
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
 
-  '@eslint/js@9.27.0': {}
+  svgo@4.1.0:
+    resolution: {integrity: sha512-bkxnTg1kSU0guhIBmibA6UUhrQmPVA1XsQLN+ylCd+UWzbnLkySOcXpyk1mrl05f+pcaCx2eHb+sp6BgMZWX+Q==}
+    engines: {node: '>=16'}
+    hasBin: true
 
-  '@eslint/object-schema@2.1.6': {}
+  tagged-tag@1.0.0:
+    resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
+    engines: {node: '>=20'}
 
-  '@eslint/plugin-kit@0.2.8':
-    dependencies:
-      '@eslint/core': 0.13.0
-      levn: 0.4.1
+  tailwind-merge@3.7.0:
+    resolution: {integrity: sha512-XPPUyAc+cvspz3lHTcR/QgPfW2A0lv/xQNIjX3HGhLR+Nq2lHaLq5MtTesHn8GUr3W3DguT2KT5x3NVgRtYwmA==}
 
-  '@eslint/plugin-kit@0.3.1':
-    dependencies:
-      '@eslint/core': 0.14.0
-      levn: 0.4.1
+  tailwindcss@4.3.3:
+    resolution: {integrity: sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ==}
 
-  '@figma/plugin-typings@1.112.0': {}
+  tapable@2.3.3:
+    resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
+    engines: {node: '>=6'}
 
-  '@figma/widget-typings@1.11.0(@figma/plugin-typings@1.112.0)':
-    dependencies:
-      '@figma/plugin-typings': 1.112.0
+  taze@21.3.0:
+    resolution: {integrity: sha512-9l1x5+weSLJvxO0ImL8hIukVbmNSotTS0Fe47J8TRucL+3htVIzh53YRMqQldsqYXHsBH90bca3LoXN1cLV6Ng==}
+    hasBin: true
 
-  '@floating-ui/core@1.7.0':
-    dependencies:
-      '@floating-ui/utils': 0.2.9
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
-  '@floating-ui/dom@1.7.0':
-    dependencies:
-      '@floating-ui/core': 1.7.0
-      '@floating-ui/utils': 0.2.9
+  tinybench@6.2.2:
+    resolution: {integrity: sha512-nIZ2N2dFpjBsg2hgitKu7mA+FvsIJuGJOwysRngmVRRmWgR/UyPjwJj8c/fT/dhm8EkHnF5EOogRf+0Z2qrimA==}
+    engines: {node: '>=20.0.0'}
 
-  '@floating-ui/react-dom@2.1.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@floating-ui/dom': 1.7.0
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+  tinyexec@1.3.1:
+    resolution: {integrity: sha512-GCvB3aoys96IuDFBMcTB46JOR6mdMtAToqwiW8JlWhsoh1mhHi/xn9ss/Dg7N555GiJyEt2qzoG/NHCwM6h1EA==}
+    engines: {node: '>=18'}
 
-  '@floating-ui/utils@0.2.9': {}
+  tinyglobby@0.2.17:
+    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
+    engines: {node: '>=12.0.0'}
 
-  '@humanfs/core@0.19.1': {}
+  tinypool@2.2.0:
+    resolution: {integrity: sha512-jBrmx4lYmaC9k/mgPbylxs7kBUxHtD8256up+HjLaDFfXScKJQyil+SWXSvhAtT7XHo+yTVlpB81PGmHP8oLSQ==}
+    engines: {node: ^20.0.0 || >=22.0.0}
 
-  '@humanfs/node@0.16.6':
-    dependencies:
-      '@humanfs/core': 0.19.1
-      '@humanwhocodes/retry': 0.3.1
+  tinyrainbow@2.0.0:
+    resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
+    engines: {node: '>=14.0.0'}
 
-  '@humanwhocodes/module-importer@1.0.1': {}
+  tinyrainbow@3.2.0:
+    resolution: {integrity: sha512-LgO3D9yZJjApUiuUfl9iFAwrtaX4+lok3wJIqttGoKCHlWUqHqbQpnxCf82L8FjgKsh4iGo78hqJwgL8F6To2A==}
+    engines: {node: '>=14.0.0'}
 
-  '@humanwhocodes/retry@0.3.1': {}
+  tinyspy@4.0.6:
+    resolution: {integrity: sha512-u8KszXvGfU68hVcZpRHKG28T0krMuv2G5nDhiHaMLen/gIuFEgIJhaJuO69qjnXg5paSrbPMFfx3brNuN8eVSg==}
+    engines: {node: '>=14.0.0'}
 
-  '@humanwhocodes/retry@0.4.3': {}
+  totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
 
-  '@iconify/types@2.0.0': {}
+  ts-dedent@2.2.0:
+    resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
+    engines: {node: '>=6.10'}
 
-  '@iconify/utils@2.3.0':
-    dependencies:
-      '@antfu/install-pkg': 1.1.0
-      '@antfu/utils': 8.1.1
-      '@iconify/types': 2.0.0
-      debug: 4.4.1
-      globals: 15.15.0
-      kolorist: 1.8.0
-      local-pkg: 1.1.1
-      mlly: 1.7.4
-    transitivePeerDependencies:
-      - supports-color
+  tsconfig-paths@4.2.0:
+    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
+    engines: {node: '>=6'}
 
-  '@isaacs/cliui@8.0.2':
-    dependencies:
-      string-width: 5.1.2
-      string-width-cjs: string-width@4.2.3
-      strip-ansi: 7.1.0
-      strip-ansi-cjs: strip-ansi@6.0.1
-      wrap-ansi: 8.1.0
-      wrap-ansi-cjs: wrap-ansi@7.0.0
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.5.0(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1))':
-    dependencies:
-      glob: 10.4.5
-      magic-string: 0.27.0
-      react-docgen-typescript: 2.2.2(typescript@5.8.3)
-      vite: 6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1)
-    optionalDependencies:
-      typescript: 5.8.3
+  tsx@4.23.15:
+    resolution: {integrity: sha512-Yiex1Ovn8z2xPpOWckIiysV1SSyRMY9BkLF++q0yKiDxCqRhosKfMg3janKkiLBwZ5c/YryloKwGZcrEmtwxKw==}
+    engines: {node: '>=18.0.0'}
+    hasBin: true
 
-  '@jridgewell/gen-mapping@0.3.8':
-    dependencies:
-      '@jridgewell/set-array': 1.2.1
-      '@jridgewell/sourcemap-codec': 1.5.0
-      '@jridgewell/trace-mapping': 0.3.25
+  type-fest@5.10.0:
+    resolution: {integrity: sha512-NoSdpq/WEiAg5sjmBkmV/hfxv6HJH4NqPNrqjtSO5CwRmpsDfaf4begxW34KdJykH/l1yHtwBWQkCRdoXO8mPA==}
+    engines: {node: '>=20'}
 
-  '@jridgewell/resolve-uri@3.1.2': {}
+  typescript@7.0.2:
+    resolution: {integrity: sha512-8FYau96o3NKOhbjKi/qNvG/W5jhzxkbdm5sj9AbZ/5T5sWqn3hJgLfGx27sRKZWTvyzCP8dLRBTf5tBTSRVUNA==}
+    engines: {node: '>=16.20.0'}
+    hasBin: true
 
-  '@jridgewell/set-array@1.2.1': {}
+  ufo@1.6.1:
+    resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
 
-  '@jridgewell/sourcemap-codec@1.5.0': {}
+  unconfig-core@7.5.0:
+    resolution: {integrity: sha512-Su3FauozOGP44ZmKdHy2oE6LPjk51M/TRRjHv2HNCWiDvfvCoxC2lno6jevMA91MYAdCdwP05QnWdWpSbncX/w==}
 
-  '@jridgewell/trace-mapping@0.3.25':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.0
+  unconfig@7.5.0:
+    resolution: {integrity: sha512-oi8Qy2JV4D3UQ0PsopR28CzdQ3S/5A1zwsUwp/rosSbfhJ5z7b90bIyTwi/F7hCLD4SGcZVjDzd4XoUQcEanvA==}
 
-  '@mdx-js/react@3.1.0(@types/react@19.1.4)(react@19.1.0)':
-    dependencies:
-      '@types/mdx': 2.0.13
-      '@types/react': 19.1.4
-      react: 19.1.0
+  undici-types@7.24.6:
+    resolution: {integrity: sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==}
 
-  '@microsoft/api-extractor-model@7.30.6(@types/node@22.15.18)':
-    dependencies:
-      '@microsoft/tsdoc': 0.15.1
-      '@microsoft/tsdoc-config': 0.17.1
-      '@rushstack/node-core-library': 5.13.1(@types/node@22.15.18)
-    transitivePeerDependencies:
-      - '@types/node'
+  unplugin@2.3.11:
+    resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
+    engines: {node: '>=18.12.0'}
 
-  '@microsoft/api-extractor@7.52.8(@types/node@22.15.18)':
-    dependencies:
-      '@microsoft/api-extractor-model': 7.30.6(@types/node@22.15.18)
-      '@microsoft/tsdoc': 0.15.1
-      '@microsoft/tsdoc-config': 0.17.1
-      '@rushstack/node-core-library': 5.13.1(@types/node@22.15.18)
-      '@rushstack/rig-package': 0.5.3
-      '@rushstack/terminal': 0.15.3(@types/node@22.15.18)
-      '@rushstack/ts-command-line': 5.0.1(@types/node@22.15.18)
-      lodash: 4.17.21
-      minimatch: 3.0.8
-      resolve: 1.22.10
-      semver: 7.5.4
-      source-map: 0.6.1
-      typescript: 5.8.2
-    transitivePeerDependencies:
-      - '@types/node'
+  update-browserslist-db@1.1.3:
+    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
 
-  '@microsoft/tsdoc-config@0.17.1':
-    dependencies:
-      '@microsoft/tsdoc': 0.15.1
-      ajv: 8.12.0
-      jju: 1.4.0
-      resolve: 1.22.10
+  uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
-  '@microsoft/tsdoc@0.15.1': {}
+  use-sync-external-store@1.7.0:
+    resolution: {integrity: sha512-6L+EeigHMQhdaIPNIFUKwfWJSwWFQ8gJbJ2DLOs5sDIegTwR9fRxvnM3uciHKjIZhFz+KAv2emhWMRvDmMcY8A==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  '@napi-rs/wasm-runtime@0.2.9':
-    dependencies:
-      '@emnapi/core': 1.4.3
-      '@emnapi/runtime': 1.4.3
-      '@tybys/wasm-util': 0.9.0
-    optional: true
+  verkit@0.5.0:
+    resolution: {integrity: sha512-u4J1hr6Y+C/hit34GwL3eIcUf3wngT8TlYUjK7tk0jxydKLAq3sYvifjdTDA6U3KCKRcQCQDGf/srjxfZF3l7g==}
+    engines: {node: '>=18.12.0'}
 
-  '@nodelib/fs.scandir@2.1.5':
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      run-parallel: 1.2.0
+  vite-plus@1.4.0:
+    resolution: {integrity: sha512-bLyUKNFl0XjbHe20FpDM6OuknOb2E4ueoWKCW4n+wMO2+lQtA9tmAjW+Xs0Xe9rg2+tCgY3W13GOgDh2wjwjAQ==}
+    engines: {node: ^22.18.0 || ^24.11.0 || >=26.0.0}
+    hasBin: true
+    peerDependencies:
+      '@vitest/browser-playwright': 5.0.5
+      '@vitest/browser-webdriverio': ^5.0.0-beta.5 || >=5.0.0
+      playwright: '*'
+    peerDependenciesMeta:
+      '@vitest/browser-playwright':
+        optional: true
+      '@vitest/browser-webdriverio':
+        optional: true
+      playwright:
+        optional: true
 
-  '@nodelib/fs.stat@2.0.5': {}
+  vite@6.4.5:
+    resolution: {integrity: sha512-4enwjFfi4IwtEh0w+jPzpLVOFQiPHmmzPxcHXQOyEur47o6u0jE573DmGpjA+7irXoMLYRZD5ZaFUEneS3abPg==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      jiti: '>=1.21.0'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
 
-  '@nodelib/fs.walk@1.2.8':
-    dependencies:
-      '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.19.1
+  vitest-browser-react@2.3.0:
+    resolution: {integrity: sha512-S5vdGHHA93j2Z6dbmIJI1wtxT3AXPTRlmC1Meo+ekG011yNnEutMAnHrwyj8qFlGhgBYA8ENGK6+o1Q+vnFz6A==}
+    peerDependencies:
+      '@types/react': ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^18.0.0 || ^19.0.0
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+      vitest: ^4.0.0 || ^5.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
 
-  '@pkgjs/parseargs@0.11.0':
-    optional: true
+  vitest@5.0.5:
+    resolution: {integrity: sha512-cPODOMF8YnkiiYtDdHo6n4wWmBrOBBbOIYH2d33M4l3CdNn72h+qMmO6uXffUN6A5AZFXNND/d+krS9mgkXRfg==}
+    engines: {node: ^22.12.0 || ^24.0.0 || >=26.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@opentelemetry/api': ^1.9.0
+      '@types/node': ^22.0.0 || >=24.0.0
+      '@vitest/browser-playwright': 5.0.5
+      '@vitest/browser-preview': 5.0.5
+      '@vitest/browser-webdriverio': ^5.0.0-beta.5 || >=5.0.0
+      '@vitest/coverage-istanbul': 5.0.5
+      '@vitest/coverage-v8': 5.0.5
+      '@vitest/ui': 5.0.5
+      happy-dom: '*'
+      jsdom: '*'
+      vite: ^6.4.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@opentelemetry/api':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser-playwright':
+        optional: true
+      '@vitest/browser-preview':
+        optional: true
+      '@vitest/browser-webdriverio':
+        optional: true
+      '@vitest/coverage-istanbul':
+        optional: true
+      '@vitest/coverage-v8':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
 
-  '@pkgr/core@0.1.2': {}
+  vscode-uri@3.1.0:
+    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
 
-  '@polka/url@1.0.0-next.29': {}
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
 
-  '@quansync/fs@0.1.3':
-    dependencies:
-      quansync: 0.2.10
+  why-is-node-running@3.2.1:
+    resolution: {integrity: sha512-Tb2FUhB4vUsGQlfSquQLYkApkuPAFQXGFzxWKHHumVz2dK+X1RUm/HnID4+TfIGYJ1kTcwOaCk/buYCEJr6YjQ==}
+    engines: {node: '>=20.11'}
+    hasBin: true
 
-  '@radix-ui/number@1.1.1': {}
+  wrap-ansi@9.0.0:
+    resolution: {integrity: sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==}
+    engines: {node: '>=18'}
 
-  '@radix-ui/primitive@1.1.2': {}
+  ws@8.22.0:
+    resolution: {integrity: sha512-Ydggc987+RO0AnWtZ/7Wq9FtNvcrL1b/RO0ud9mWjUPgDrsAAwQSF51sm2hm1XofbU/4jkpGEsLFsZZxU+1DOg==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
 
-  '@radix-ui/react-alert-dialog@1.1.13(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-dialog': 1.1.13(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-slot': 1.2.2(@types/react@19.1.4)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+  wsl-utils@0.1.0:
+    resolution: {integrity: sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==}
+    engines: {node: '>=18'}
 
-  '@radix-ui/react-arrow@1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
-
-  '@radix-ui/react-checkbox@1.3.1(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
 
-  '@radix-ui/react-collection@1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-slot': 1.2.2(@types/react@19.1.4)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
-  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.4)(react@19.1.0)':
-    dependencies:
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.4
+  yaml@2.9.1:
+    resolution: {integrity: sha512-3NxN8+78OdzbT7C/WjGsyfPAtJaN3FNDsWxv7Y7mcDsT/oOmgW8BpyQQFFBnvZE3j9Y2Sdz1ULFLezL7Eb2yFw==}
+    engines: {node: '>= 14.6'}
+    hasBin: true
 
-  '@radix-ui/react-context@1.1.2(@types/react@19.1.4)(react@19.1.0)':
-    dependencies:
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.4
-
-  '@radix-ui/react-dialog@1.1.13(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-dismissable-layer': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-focus-scope': 1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-portal': 1.1.8(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-slot': 1.2.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
-      aria-hidden: 1.2.4
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-      react-remove-scroll: 2.6.3(@types/react@19.1.4)(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+  yargs-parser@22.0.0:
+    resolution: {integrity: sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=23}
 
-  '@radix-ui/react-direction@1.1.1(@types/react@19.1.4)(react@19.1.0)':
-    dependencies:
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.4
+  yargs@18.2.0:
+    resolution: {integrity: sha512-9OpKOLeaoNFecEp7P6iYbzze/5CqWoH7N3SMs/6y1XF4nMvFMspEGZzJ6uFi9MmQwXhyzqYoSEKO3tvA3Z/o2w==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=23}
 
-  '@radix-ui/react-dismissable-layer@1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
-
-  '@radix-ui/react-dropdown-menu@2.1.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-menu': 2.1.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+  yuku-core@0.19.0:
+    resolution: {integrity: sha512-kYK9e1XdfirNhkipzW0wmMcSWcVF/CWnuugodfVYRCUwvoBefweL9HzB96OiKEhsx78V5WbUxbJqlizMX869Qg==}
+    engines: {node: '>=14.18.0'}
 
-  '@radix-ui/react-focus-guards@1.1.2(@types/react@19.1.4)(react@19.1.0)':
-    dependencies:
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.4
+  yuku-parser@0.19.0:
+    resolution: {integrity: sha512-XrBh9ZiQK5mJVRxZBAvD6LwRyAYrK3MFtH3+onyuxFL5hFD44EC3QOmIC1FjTj6H2MMwq46/NAI+NZxLZPZgxg==}
+    engines: {node: '>=14.18.0'}
 
-  '@radix-ui/react-focus-scope@1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+snapshots:
 
-  '@radix-ui/react-id@1.1.1(@types/react@19.1.4)(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.4
+  '@adobe/css-tools@4.4.2': {}
 
-  '@radix-ui/react-label@2.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@antfu/install-pkg@2.1.0':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
-
-  '@radix-ui/react-menu@2.1.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-dismissable-layer': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-focus-scope': 1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-popper': 1.2.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-portal': 1.1.8(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-roving-focus': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-slot': 1.2.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      aria-hidden: 1.2.4
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-      react-remove-scroll: 2.6.3(@types/react@19.1.4)(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
-
-  '@radix-ui/react-popover@1.1.13(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-dismissable-layer': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-focus-scope': 1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-popper': 1.2.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-portal': 1.1.8(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-slot': 1.2.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
-      aria-hidden: 1.2.4
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-      react-remove-scroll: 2.6.3(@types/react@19.1.4)(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
-
-  '@radix-ui/react-popper@1.2.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@floating-ui/react-dom': 2.1.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-arrow': 1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/rect': 1.1.1
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      package-manager-detector: 1.9.0
+      tinyexec: 1.3.1
 
-  '@radix-ui/react-portal@1.1.8(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@antfu/ni@30.6.0':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      fzf: 0.5.2
+      package-manager-detector: 1.9.0
+      tinyexec: 1.3.1
+      tinyglobby: 0.2.17
 
-  '@radix-ui/react-presence@1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@babel/code-frame@7.27.1':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@babel/helper-validator-identifier': 7.27.1
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
 
-  '@radix-ui/react-primitive@2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@babel/code-frame@7.29.7':
     dependencies:
-      '@radix-ui/react-slot': 1.2.2(@types/react@19.1.4)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
-
-  '@radix-ui/react-radio-group@1.3.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-roving-focus': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
-
-  '@radix-ui/react-roving-focus@1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
-
-  '@radix-ui/react-scroll-area@1.2.8(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/number': 1.1.1
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
-
-  '@radix-ui/react-select@2.2.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/number': 1.1.1
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-dismissable-layer': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-focus-scope': 1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-popper': 1.2.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-portal': 1.1.8(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-slot': 1.2.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-visually-hidden': 1.2.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      aria-hidden: 1.2.4
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-      react-remove-scroll: 2.6.3(@types/react@19.1.4)(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@babel/helper-validator-identifier': 7.29.7
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
 
-  '@radix-ui/react-separator@1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
-
-  '@radix-ui/react-slider@1.3.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/number': 1.1.1
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+  '@babel/compat-data@7.29.7': {}
 
-  '@radix-ui/react-slot@1.2.2(@types/react@19.1.4)(react@19.1.0)':
+  '@babel/core@7.29.7':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.4
-
-  '@radix-ui/react-switch@1.2.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
-
-  '@radix-ui/react-tabs@1.1.11(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-roving-focus': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
-
-  '@radix-ui/react-toggle-group@1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-roving-focus': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-toggle': 1.1.8(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.8
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)
+      '@babel/helpers': 7.29.10
+      '@babel/parser': 7.29.11
+      '@babel/template': 7.29.7
+      '@babel/traverse': 7.29.10
+      '@babel/types': 7.29.11
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.1
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
 
-  '@radix-ui/react-toggle@1.1.8(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@babel/generator@7.29.8':
     dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
-
-  '@radix-ui/react-tooltip@1.2.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-dismissable-layer': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-popper': 1.2.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-portal': 1.1.8(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-slot': 1.2.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-visually-hidden': 1.2.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@babel/parser': 7.29.11
+      '@babel/types': 7.29.11
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
 
-  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.1.4)(react@19.1.0)':
+  '@babel/helper-compilation-targets@7.29.7':
     dependencies:
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.4
+      '@babel/compat-data': 7.29.7
+      '@babel/helper-validator-option': 7.29.7
+      browserslist: 4.24.5
+      lru-cache: 5.1.1
+      semver: 6.3.1
 
-  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.1.4)(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.4)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.4
+  '@babel/helper-globals@7.29.7': {}
 
-  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.1.4)(react@19.1.0)':
+  '@babel/helper-module-imports@7.29.7':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.4
+      '@babel/traverse': 7.29.10
+      '@babel/types': 7.29.11
+    transitivePeerDependencies:
+      - supports-color
 
-  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.1.4)(react@19.1.0)':
+  '@babel/helper-module-transforms@7.29.7(@babel/core@7.29.7)':
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.4
+      '@babel/core': 7.29.7
+      '@babel/helper-module-imports': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+      '@babel/traverse': 7.29.10
+    transitivePeerDependencies:
+      - supports-color
 
-  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.4)(react@19.1.0)':
-    dependencies:
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.4
+  '@babel/helper-string-parser@7.29.11': {}
 
-  '@radix-ui/react-use-previous@1.1.1(@types/react@19.1.4)(react@19.1.0)':
-    dependencies:
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.4
+  '@babel/helper-validator-identifier@7.27.1': {}
 
-  '@radix-ui/react-use-rect@1.1.1(@types/react@19.1.4)(react@19.1.0)':
-    dependencies:
-      '@radix-ui/rect': 1.1.1
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.4
+  '@babel/helper-validator-identifier@7.29.7': {}
+
+  '@babel/helper-validator-option@7.29.7': {}
 
-  '@radix-ui/react-use-size@1.1.1(@types/react@19.1.4)(react@19.1.0)':
+  '@babel/helpers@7.29.10':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.0)
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.4
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.11
 
-  '@radix-ui/react-visually-hidden@1.2.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@babel/parser@7.29.11':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@babel/types': 7.29.11
 
-  '@radix-ui/rect@1.1.1': {}
+  '@babel/runtime@7.27.1': {}
 
-  '@rollup/plugin-alias@5.1.1(rollup@4.40.1)':
-    optionalDependencies:
-      rollup: 4.40.1
+  '@babel/runtime@8.0.8': {}
 
-  '@rollup/plugin-commonjs@28.0.3(rollup@4.40.1)':
+  '@babel/template@7.29.7':
     dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.40.1)
-      commondir: 1.0.1
-      estree-walker: 2.0.2
-      fdir: 6.4.4(picomatch@4.0.2)
-      is-reference: 1.2.1
-      magic-string: 0.30.17
-      picomatch: 4.0.2
-    optionalDependencies:
-      rollup: 4.40.1
+      '@babel/code-frame': 7.29.7
+      '@babel/parser': 7.29.11
+      '@babel/types': 7.29.11
 
-  '@rollup/plugin-json@6.1.0(rollup@4.40.1)':
+  '@babel/traverse@7.29.10':
     dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.40.1)
-    optionalDependencies:
-      rollup: 4.40.1
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.8
+      '@babel/helper-globals': 7.29.7
+      '@babel/parser': 7.29.11
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.11
+      debug: 4.4.1
+    transitivePeerDependencies:
+      - supports-color
 
-  '@rollup/plugin-node-resolve@16.0.1(rollup@4.40.1)':
+  '@babel/types@7.29.11':
     dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.40.1)
-      '@types/resolve': 1.20.2
-      deepmerge: 4.3.1
-      is-module: 1.0.0
-      resolve: 1.22.10
-    optionalDependencies:
-      rollup: 4.40.1
+      '@babel/helper-string-parser': 7.29.11
+      '@babel/helper-validator-identifier': 7.29.7
 
-  '@rollup/plugin-replace@6.0.2(rollup@4.40.1)':
+  '@base-ui/react@1.9.0(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)':
     dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.40.1)
-      magic-string: 0.30.17
+      '@babel/runtime': 8.0.8
+      '@base-ui/utils': 0.5.0(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
+      '@floating-ui/react-dom': 2.1.9(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
+      '@floating-ui/utils': 0.2.12
+      react: 19.3.1
+      react-dom: 19.3.1(react@19.3.1)
+      use-sync-external-store: 1.7.0(react@19.3.1)
     optionalDependencies:
-      rollup: 4.40.1
+      '@types/react': 19.3.0
 
-  '@rollup/pluginutils@5.1.4(rollup@4.40.1)':
+  '@base-ui/utils@0.5.0(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)':
     dependencies:
-      '@types/estree': 1.0.7
-      estree-walker: 2.0.2
-      picomatch: 4.0.2
+      '@babel/runtime': 8.0.8
+      '@floating-ui/utils': 0.2.12
+      react: 19.3.1
+      react-dom: 19.3.1(react@19.3.1)
+      reselect: 5.3.0
+      use-sync-external-store: 1.7.0(react@19.3.1)
     optionalDependencies:
-      rollup: 4.40.1
-
-  '@rollup/rollup-android-arm-eabi@4.40.1':
-    optional: true
-
-  '@rollup/rollup-android-arm64@4.40.1':
-    optional: true
-
-  '@rollup/rollup-darwin-arm64@4.40.1':
-    optional: true
-
-  '@rollup/rollup-darwin-x64@4.40.1':
-    optional: true
-
-  '@rollup/rollup-freebsd-arm64@4.40.1':
-    optional: true
-
-  '@rollup/rollup-freebsd-x64@4.40.1':
-    optional: true
-
-  '@rollup/rollup-linux-arm-gnueabihf@4.40.1':
-    optional: true
-
-  '@rollup/rollup-linux-arm-musleabihf@4.40.1':
-    optional: true
-
-  '@rollup/rollup-linux-arm64-gnu@4.40.1':
-    optional: true
-
-  '@rollup/rollup-linux-arm64-musl@4.40.1':
-    optional: true
-
-  '@rollup/rollup-linux-loongarch64-gnu@4.40.1':
-    optional: true
-
-  '@rollup/rollup-linux-powerpc64le-gnu@4.40.1':
-    optional: true
-
-  '@rollup/rollup-linux-riscv64-gnu@4.40.1':
-    optional: true
-
-  '@rollup/rollup-linux-riscv64-musl@4.40.1':
-    optional: true
+      '@types/react': 19.3.0
 
-  '@rollup/rollup-linux-s390x-gnu@4.40.1':
-    optional: true
+  '@blazediff/core@1.10.0': {}
 
-  '@rollup/rollup-linux-x64-gnu@4.40.1':
-    optional: true
+  '@commitlint/cli@21.2.4(conventional-commits-parser@7.1.3)(typescript@7.0.2)':
+    dependencies:
+      '@commitlint/config-conventional': 21.2.4
+      '@commitlint/format': 21.2.3
+      '@commitlint/lint': 21.2.4
+      '@commitlint/load': 21.2.4(typescript@7.0.2)
+      '@commitlint/read': 21.2.3(conventional-commits-parser@7.1.3)
+      '@commitlint/types': 21.2.3
+      tinyexec: 1.3.1
+      yargs: 18.2.0
+    transitivePeerDependencies:
+      - conventional-commits-filter
+      - conventional-commits-parser
+      - typescript
 
-  '@rollup/rollup-linux-x64-musl@4.40.1':
-    optional: true
+  '@commitlint/config-conventional@21.2.4':
+    dependencies:
+      '@commitlint/types': 21.2.3
+      conventional-changelog-conventionalcommits: 10.4.1
 
-  '@rollup/rollup-win32-arm64-msvc@4.40.1':
-    optional: true
+  '@commitlint/config-validator@21.2.3':
+    dependencies:
+      '@commitlint/types': 21.2.3
+      ajv: 8.13.0
 
-  '@rollup/rollup-win32-ia32-msvc@4.40.1':
-    optional: true
+  '@commitlint/ensure@21.2.4':
+    dependencies:
+      '@commitlint/types': 21.2.3
+      es-toolkit: 1.53.0
 
-  '@rollup/rollup-win32-x64-msvc@4.40.1':
-    optional: true
+  '@commitlint/execute-rule@21.0.1': {}
 
-  '@rushstack/node-core-library@5.13.1(@types/node@22.15.18)':
+  '@commitlint/format@21.2.3':
     dependencies:
-      ajv: 8.13.0
-      ajv-draft-04: 1.0.0(ajv@8.13.0)
-      ajv-formats: 3.0.1(ajv@8.13.0)
-      fs-extra: 11.3.0
-      import-lazy: 4.0.0
-      jju: 1.4.0
-      resolve: 1.22.10
-      semver: 7.5.4
-    optionalDependencies:
-      '@types/node': 22.15.18
+      '@commitlint/types': 21.2.3
+      picocolors: 1.1.1
 
-  '@rushstack/rig-package@0.5.3':
+  '@commitlint/is-ignored@21.2.3':
     dependencies:
-      resolve: 1.22.10
-      strip-json-comments: 3.1.1
+      '@commitlint/types': 21.2.3
+      semver: 7.8.5
 
-  '@rushstack/terminal@0.15.3(@types/node@22.15.18)':
+  '@commitlint/lint@21.2.4':
     dependencies:
-      '@rushstack/node-core-library': 5.13.1(@types/node@22.15.18)
-      supports-color: 8.1.1
-    optionalDependencies:
-      '@types/node': 22.15.18
+      '@commitlint/is-ignored': 21.2.3
+      '@commitlint/parse': 21.2.3
+      '@commitlint/rules': 21.2.4
+      '@commitlint/types': 21.2.3
 
-  '@rushstack/ts-command-line@5.0.1(@types/node@22.15.18)':
+  '@commitlint/load@21.2.4(typescript@7.0.2)':
     dependencies:
-      '@rushstack/terminal': 0.15.3(@types/node@22.15.18)
-      '@types/argparse': 1.0.38
-      argparse: 1.0.10
-      string-argv: 0.3.2
+      '@commitlint/config-validator': 21.2.3
+      '@commitlint/execute-rule': 21.0.1
+      '@commitlint/resolve-extends': 21.2.3
+      '@commitlint/types': 21.2.3
+      cosmiconfig: 9.0.2(typescript@7.0.2)
+      es-toolkit: 1.53.0
+      is-plain-obj: 4.1.0
+      jiti: 2.7.0
+      picocolors: 1.1.1
     transitivePeerDependencies:
-      - '@types/node'
+      - typescript
+
+  '@commitlint/message@21.2.0': {}
 
-  '@storybook/addon-actions@8.6.14(storybook@8.6.14)':
+  '@commitlint/parse@21.2.3':
     dependencies:
-      '@storybook/global': 5.0.0
-      '@types/uuid': 9.0.8
-      dequal: 2.0.3
-      polished: 4.3.1
-      storybook: 8.6.14
-      uuid: 9.0.1
+      '@commitlint/types': 21.2.3
+      conventional-changelog-angular: 9.4.0
+      conventional-commits-parser: 7.1.3
 
-  '@storybook/addon-backgrounds@8.6.14(storybook@8.6.14)':
+  '@commitlint/read@21.2.3(conventional-commits-parser@7.1.3)':
     dependencies:
-      '@storybook/global': 5.0.0
-      memoizerific: 1.11.3
-      storybook: 8.6.14
-      ts-dedent: 2.2.0
+      '@commitlint/top-level': 21.2.0
+      '@commitlint/types': 21.2.3
+      '@conventional-changelog/git-client': 3.2.0(conventional-commits-parser@7.1.3)
+      tinyexec: 1.3.1
+    transitivePeerDependencies:
+      - conventional-commits-filter
+      - conventional-commits-parser
 
-  '@storybook/addon-controls@8.6.14(storybook@8.6.14)':
+  '@commitlint/resolve-extends@21.2.3':
     dependencies:
-      '@storybook/global': 5.0.0
-      dequal: 2.0.3
-      storybook: 8.6.14
-      ts-dedent: 2.2.0
+      '@commitlint/config-validator': 21.2.3
+      '@commitlint/types': 21.2.3
+      es-toolkit: 1.53.0
+      global-directory: 5.0.0
+      resolve-from: 5.0.0
 
-  '@storybook/addon-docs@8.6.14(@types/react@19.1.4)(storybook@8.6.14)':
+  '@commitlint/rules@21.2.4':
     dependencies:
-      '@mdx-js/react': 3.1.0(@types/react@19.1.4)(react@19.1.0)
-      '@storybook/blocks': 8.6.14(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@8.6.14)
-      '@storybook/csf-plugin': 8.6.14(storybook@8.6.14)
-      '@storybook/react-dom-shim': 8.6.14(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@8.6.14)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-      storybook: 8.6.14
-      ts-dedent: 2.2.0
-    transitivePeerDependencies:
-      - '@types/react'
+      '@commitlint/ensure': 21.2.4
+      '@commitlint/message': 21.2.0
+      '@commitlint/to-lines': 21.0.1
+      '@commitlint/types': 21.2.3
 
-  '@storybook/addon-essentials@8.6.14(@types/react@19.1.4)(storybook@8.6.14)':
-    dependencies:
-      '@storybook/addon-actions': 8.6.14(storybook@8.6.14)
-      '@storybook/addon-backgrounds': 8.6.14(storybook@8.6.14)
-      '@storybook/addon-controls': 8.6.14(storybook@8.6.14)
-      '@storybook/addon-docs': 8.6.14(@types/react@19.1.4)(storybook@8.6.14)
-      '@storybook/addon-highlight': 8.6.14(storybook@8.6.14)
-      '@storybook/addon-measure': 8.6.14(storybook@8.6.14)
-      '@storybook/addon-outline': 8.6.14(storybook@8.6.14)
-      '@storybook/addon-toolbars': 8.6.14(storybook@8.6.14)
-      '@storybook/addon-viewport': 8.6.14(storybook@8.6.14)
-      storybook: 8.6.14
-      ts-dedent: 2.2.0
-    transitivePeerDependencies:
-      - '@types/react'
+  '@commitlint/to-lines@21.0.1': {}
 
-  '@storybook/addon-highlight@8.6.14(storybook@8.6.14)':
+  '@commitlint/top-level@21.2.0':
     dependencies:
-      '@storybook/global': 5.0.0
-      storybook: 8.6.14
+      escalade: 3.2.0
 
-  '@storybook/addon-interactions@8.6.14(storybook@8.6.14)':
+  '@commitlint/types@21.2.3':
     dependencies:
-      '@storybook/global': 5.0.0
-      '@storybook/instrumenter': 8.6.14(storybook@8.6.14)
-      '@storybook/test': 8.6.14(storybook@8.6.14)
-      polished: 4.3.1
-      storybook: 8.6.14
-      ts-dedent: 2.2.0
+      conventional-commits-parser: 7.1.3
+      picocolors: 1.1.1
 
-  '@storybook/addon-links@8.6.14(react@19.1.0)(storybook@8.6.14)':
+  '@conventional-changelog/git-client@3.2.0(conventional-commits-parser@7.1.3)':
     dependencies:
-      '@storybook/global': 5.0.0
-      storybook: 8.6.14
-      ts-dedent: 2.2.0
+      '@simple-libs/child-process-utils': 2.0.0
+      '@simple-libs/stream-utils': 2.0.0
+      verkit: 0.5.0
     optionalDependencies:
-      react: 19.1.0
-
-  '@storybook/addon-measure@8.6.14(storybook@8.6.14)':
-    dependencies:
-      '@storybook/global': 5.0.0
-      storybook: 8.6.14
-      tiny-invariant: 1.3.3
+      conventional-commits-parser: 7.1.3
 
-  '@storybook/addon-onboarding@8.6.14(storybook@8.6.14)':
-    dependencies:
-      storybook: 8.6.14
+  '@conventional-changelog/template@1.4.0': {}
 
-  '@storybook/addon-outline@8.6.14(storybook@8.6.14)':
+  '@cyberalien/svg-utils@1.2.21':
     dependencies:
-      '@storybook/global': 5.0.0
-      storybook: 8.6.14
-      ts-dedent: 2.2.0
+      '@iconify/types': 2.0.0
 
-  '@storybook/addon-toolbars@8.6.14(storybook@8.6.14)':
+  '@emmetio/math-expression@1.0.5':
     dependencies:
-      storybook: 8.6.14
+      '@emmetio/scanner': 1.0.4
 
-  '@storybook/addon-viewport@8.6.14(storybook@8.6.14)':
-    dependencies:
-      memoizerific: 1.11.3
-      storybook: 8.6.14
+  '@emmetio/scanner@1.0.4': {}
 
-  '@storybook/blocks@8.6.14(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@8.6.14)':
+  '@emnapi/core@1.11.0':
     dependencies:
-      '@storybook/icons': 1.4.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      storybook: 8.6.14
-      ts-dedent: 2.2.0
-    optionalDependencies:
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+      '@emnapi/wasi-threads': 1.2.2
+      tslib: 2.8.1
+    optional: true
 
-  '@storybook/builder-vite@8.6.14(storybook@8.6.14)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1))':
+  '@emnapi/core@1.9.2':
     dependencies:
-      '@storybook/csf-plugin': 8.6.14(storybook@8.6.14)
-      browser-assert: 1.2.1
-      storybook: 8.6.14
-      ts-dedent: 2.2.0
-      vite: 6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1)
+      '@emnapi/wasi-threads': 1.2.1
+      tslib: 2.8.1
+    optional: true
 
-  '@storybook/components@8.6.14(storybook@8.6.14)':
+  '@emnapi/runtime@1.11.0':
     dependencies:
-      storybook: 8.6.14
+      tslib: 2.8.1
+    optional: true
 
-  '@storybook/core@8.6.14(storybook@8.6.14)':
+  '@emnapi/runtime@1.9.2':
     dependencies:
-      '@storybook/theming': 8.6.14(storybook@8.6.14)
-      better-opn: 3.0.2
-      browser-assert: 1.2.1
-      esbuild: 0.25.4
-      esbuild-register: 3.6.0(esbuild@0.25.4)
-      jsdoc-type-pratt-parser: 4.1.0
-      process: 0.11.10
-      recast: 0.23.11
-      semver: 7.7.2
-      util: 0.12.5
-      ws: 8.18.2
-    transitivePeerDependencies:
-      - bufferutil
-      - storybook
-      - supports-color
-      - utf-8-validate
+      tslib: 2.8.1
+    optional: true
 
-  '@storybook/csf-plugin@8.6.14(storybook@8.6.14)':
+  '@emnapi/wasi-threads@1.2.1':
     dependencies:
-      storybook: 8.6.14
-      unplugin: 1.16.1
+      tslib: 2.8.1
+    optional: true
 
-  '@storybook/csf@0.1.13':
+  '@emnapi/wasi-threads@1.2.2':
     dependencies:
-      type-fest: 2.19.0
-
-  '@storybook/global@5.0.0': {}
+      tslib: 2.8.1
+    optional: true
 
-  '@storybook/icons@1.4.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+  '@esbuild/aix-ppc64@0.25.4':
+    optional: true
 
-  '@storybook/instrumenter@8.6.14(storybook@8.6.14)':
-    dependencies:
-      '@storybook/global': 5.0.0
-      '@vitest/utils': 2.1.9
-      storybook: 8.6.14
+  '@esbuild/aix-ppc64@0.28.2':
+    optional: true
 
-  '@storybook/manager-api@8.6.14(storybook@8.6.14)':
-    dependencies:
-      storybook: 8.6.14
+  '@esbuild/android-arm64@0.25.4':
+    optional: true
 
-  '@storybook/preview-api@8.6.14(storybook@8.6.14)':
-    dependencies:
-      storybook: 8.6.14
+  '@esbuild/android-arm64@0.28.2':
+    optional: true
 
-  '@storybook/react-dom-shim@8.6.14(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@8.6.14)':
-    dependencies:
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-      storybook: 8.6.14
+  '@esbuild/android-arm@0.25.4':
+    optional: true
 
-  '@storybook/react-vite@8.6.14(@storybook/test@8.6.14(storybook@8.6.14))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(rollup@4.40.1)(storybook@8.6.14)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1))':
-    dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.5.0(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1))
-      '@rollup/pluginutils': 5.1.4(rollup@4.40.1)
-      '@storybook/builder-vite': 8.6.14(storybook@8.6.14)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1))
-      '@storybook/react': 8.6.14(@storybook/test@8.6.14(storybook@8.6.14))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@8.6.14)(typescript@5.8.3)
-      find-up: 5.0.0
-      magic-string: 0.30.17
-      react: 19.1.0
-      react-docgen: 7.1.1
-      react-dom: 19.1.0(react@19.1.0)
-      resolve: 1.22.10
-      storybook: 8.6.14
-      tsconfig-paths: 4.2.0
-      vite: 6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1)
-    optionalDependencies:
-      '@storybook/test': 8.6.14(storybook@8.6.14)
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-      - typescript
+  '@esbuild/android-arm@0.28.2':
+    optional: true
 
-  '@storybook/react@8.6.14(@storybook/test@8.6.14(storybook@8.6.14))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@8.6.14)(typescript@5.8.3)':
-    dependencies:
-      '@storybook/components': 8.6.14(storybook@8.6.14)
-      '@storybook/global': 5.0.0
-      '@storybook/manager-api': 8.6.14(storybook@8.6.14)
-      '@storybook/preview-api': 8.6.14(storybook@8.6.14)
-      '@storybook/react-dom-shim': 8.6.14(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@8.6.14)
-      '@storybook/theming': 8.6.14(storybook@8.6.14)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-      storybook: 8.6.14
-    optionalDependencies:
-      '@storybook/test': 8.6.14(storybook@8.6.14)
-      typescript: 5.8.3
+  '@esbuild/android-x64@0.25.4':
+    optional: true
 
-  '@storybook/test@8.6.14(storybook@8.6.14)':
-    dependencies:
-      '@storybook/global': 5.0.0
-      '@storybook/instrumenter': 8.6.14(storybook@8.6.14)
-      '@testing-library/dom': 10.4.0
-      '@testing-library/jest-dom': 6.5.0
-      '@testing-library/user-event': 14.5.2(@testing-library/dom@10.4.0)
-      '@vitest/expect': 2.0.5
-      '@vitest/spy': 2.0.5
-      storybook: 8.6.14
-
-  '@storybook/theming@8.6.14(storybook@8.6.14)':
-    dependencies:
-      storybook: 8.6.14
-
-  '@stylistic/eslint-plugin@4.2.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)':
-    dependencies:
-      '@typescript-eslint/utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      eslint: 9.27.0(jiti@2.4.2)
-      eslint-visitor-keys: 4.2.0
-      espree: 10.3.0
-      estraverse: 5.3.0
-      picomatch: 4.0.2
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
+  '@esbuild/android-x64@0.28.2':
+    optional: true
 
-  '@testing-library/dom@10.4.0':
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/runtime': 7.27.1
-      '@types/aria-query': 5.0.4
-      aria-query: 5.3.0
-      chalk: 4.1.2
-      dom-accessibility-api: 0.5.16
-      lz-string: 1.5.0
-      pretty-format: 27.5.1
+  '@esbuild/darwin-arm64@0.25.4':
+    optional: true
 
-  '@testing-library/jest-dom@6.5.0':
-    dependencies:
-      '@adobe/css-tools': 4.4.2
-      aria-query: 5.3.2
-      chalk: 3.0.0
-      css.escape: 1.5.1
-      dom-accessibility-api: 0.6.3
-      lodash: 4.17.21
-      redent: 3.0.0
+  '@esbuild/darwin-arm64@0.28.2':
+    optional: true
 
-  '@testing-library/user-event@14.5.2(@testing-library/dom@10.4.0)':
-    dependencies:
-      '@testing-library/dom': 10.4.0
+  '@esbuild/darwin-x64@0.25.4':
+    optional: true
 
-  '@thinkbuff/eslint-config@0.2.7(@eslint-react/eslint-plugin@1.49.0(eslint@9.27.0(jiti@2.4.2))(ts-api-utils@2.1.0(typescript@5.8.3))(typescript@5.8.3))(@unocss/eslint-plugin@66.1.2(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3))(eslint-plugin-react-hooks@5.2.0(eslint@9.27.0(jiti@2.4.2)))(eslint-plugin-react-refresh@0.4.20(eslint@9.27.0(jiti@2.4.2)))(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)':
-    dependencies:
-      '@stylistic/eslint-plugin': 4.2.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      eslint: 9.27.0(jiti@2.4.2)
-      eslint-plugin-import-x: 4.11.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      eslint-plugin-perfectionist: 4.12.3(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      eslint-plugin-pnpm: 0.3.1(eslint@9.27.0(jiti@2.4.2))
-      eslint-plugin-unicorn: 59.0.0(eslint@9.27.0(jiti@2.4.2))
-      globals: 16.0.0
-      jsonc-eslint-parser: 2.4.0
-      local-pkg: 1.1.1
-      type-fest: 4.41.0
-      typescript-eslint: 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      yaml-eslint-parser: 1.3.0
-    optionalDependencies:
-      '@eslint-react/eslint-plugin': 1.49.0(eslint@9.27.0(jiti@2.4.2))(ts-api-utils@2.1.0(typescript@5.8.3))(typescript@5.8.3)
-      '@unocss/eslint-plugin': 66.1.2(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      eslint-plugin-react-hooks: 5.2.0(eslint@9.27.0(jiti@2.4.2))
-      eslint-plugin-react-refresh: 0.4.20(eslint@9.27.0(jiti@2.4.2))
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
+  '@esbuild/darwin-x64@0.28.2':
+    optional: true
 
-  '@trysound/sax@0.2.0': {}
+  '@esbuild/freebsd-arm64@0.25.4':
+    optional: true
 
-  '@tybys/wasm-util@0.9.0':
-    dependencies:
-      tslib: 2.8.1
+  '@esbuild/freebsd-arm64@0.28.2':
     optional: true
 
-  '@types/argparse@1.0.38': {}
+  '@esbuild/freebsd-x64@0.25.4':
+    optional: true
 
-  '@types/aria-query@5.0.4': {}
+  '@esbuild/freebsd-x64@0.28.2':
+    optional: true
 
-  '@types/babel__core@7.20.5':
-    dependencies:
-      '@babel/parser': 7.27.1
-      '@babel/types': 7.27.1
-      '@types/babel__generator': 7.27.0
-      '@types/babel__template': 7.4.4
-      '@types/babel__traverse': 7.20.7
+  '@esbuild/linux-arm64@0.25.4':
+    optional: true
 
-  '@types/babel__generator@7.27.0':
-    dependencies:
-      '@babel/types': 7.27.1
+  '@esbuild/linux-arm64@0.28.2':
+    optional: true
 
-  '@types/babel__template@7.4.4':
-    dependencies:
-      '@babel/parser': 7.27.1
-      '@babel/types': 7.27.1
+  '@esbuild/linux-arm@0.25.4':
+    optional: true
 
-  '@types/babel__traverse@7.20.7':
-    dependencies:
-      '@babel/types': 7.27.1
+  '@esbuild/linux-arm@0.28.2':
+    optional: true
 
-  '@types/doctrine@0.0.9': {}
+  '@esbuild/linux-ia32@0.25.4':
+    optional: true
 
-  '@types/estree@1.0.7': {}
+  '@esbuild/linux-ia32@0.28.2':
+    optional: true
 
-  '@types/json-schema@7.0.15': {}
+  '@esbuild/linux-loong64@0.25.4':
+    optional: true
 
-  '@types/mdx@2.0.13': {}
+  '@esbuild/linux-loong64@0.28.2':
+    optional: true
 
-  '@types/node@22.15.18':
-    dependencies:
-      undici-types: 6.21.0
+  '@esbuild/linux-mips64el@0.25.4':
+    optional: true
 
-  '@types/react-dom@19.1.5(@types/react@19.1.4)':
-    dependencies:
-      '@types/react': 19.1.4
+  '@esbuild/linux-mips64el@0.28.2':
+    optional: true
 
-  '@types/react@19.1.4':
-    dependencies:
-      csstype: 3.1.3
+  '@esbuild/linux-ppc64@0.25.4':
+    optional: true
 
-  '@types/resolve@1.20.2': {}
+  '@esbuild/linux-ppc64@0.28.2':
+    optional: true
 
-  '@types/resolve@1.20.6': {}
+  '@esbuild/linux-riscv64@0.25.4':
+    optional: true
 
-  '@types/uuid@9.0.8': {}
-
-  '@typescript-eslint/eslint-plugin@8.31.1(@typescript-eslint/parser@8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)':
-    dependencies:
-      '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@typescript-eslint/scope-manager': 8.31.1
-      '@typescript-eslint/type-utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@typescript-eslint/visitor-keys': 8.31.1
-      eslint: 9.27.0(jiti@2.4.2)
-      graphemer: 1.4.0
-      ignore: 5.3.2
-      natural-compare: 1.4.0
-      ts-api-utils: 2.1.0(typescript@5.8.3)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
+  '@esbuild/linux-riscv64@0.28.2':
+    optional: true
 
-  '@typescript-eslint/parser@8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 8.31.1
-      '@typescript-eslint/types': 8.31.1
-      '@typescript-eslint/typescript-estree': 8.31.1(typescript@5.8.3)
-      '@typescript-eslint/visitor-keys': 8.31.1
-      debug: 4.4.0
-      eslint: 9.27.0(jiti@2.4.2)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
+  '@esbuild/linux-s390x@0.25.4':
+    optional: true
 
-  '@typescript-eslint/scope-manager@8.31.1':
-    dependencies:
-      '@typescript-eslint/types': 8.31.1
-      '@typescript-eslint/visitor-keys': 8.31.1
+  '@esbuild/linux-s390x@0.28.2':
+    optional: true
 
-  '@typescript-eslint/scope-manager@8.32.1':
-    dependencies:
-      '@typescript-eslint/types': 8.32.1
-      '@typescript-eslint/visitor-keys': 8.32.1
+  '@esbuild/linux-x64@0.25.4':
+    optional: true
 
-  '@typescript-eslint/type-utils@8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)':
-    dependencies:
-      '@typescript-eslint/typescript-estree': 8.31.1(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      debug: 4.4.0
-      eslint: 9.27.0(jiti@2.4.2)
-      ts-api-utils: 2.1.0(typescript@5.8.3)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
+  '@esbuild/linux-x64@0.28.2':
+    optional: true
 
-  '@typescript-eslint/types@8.31.1': {}
+  '@esbuild/netbsd-arm64@0.25.4':
+    optional: true
 
-  '@typescript-eslint/types@8.32.1': {}
+  '@esbuild/netbsd-arm64@0.28.2':
+    optional: true
 
-  '@typescript-eslint/typescript-estree@8.31.1(typescript@5.8.3)':
-    dependencies:
-      '@typescript-eslint/types': 8.31.1
-      '@typescript-eslint/visitor-keys': 8.31.1
-      debug: 4.4.0
-      fast-glob: 3.3.3
-      is-glob: 4.0.3
-      minimatch: 9.0.5
-      semver: 7.7.1
-      ts-api-utils: 2.1.0(typescript@5.8.3)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
+  '@esbuild/netbsd-x64@0.25.4':
+    optional: true
 
-  '@typescript-eslint/typescript-estree@8.32.1(typescript@5.8.3)':
-    dependencies:
-      '@typescript-eslint/types': 8.32.1
-      '@typescript-eslint/visitor-keys': 8.32.1
-      debug: 4.4.1
-      fast-glob: 3.3.3
-      is-glob: 4.0.3
-      minimatch: 9.0.5
-      semver: 7.7.2
-      ts-api-utils: 2.1.0(typescript@5.8.3)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
+  '@esbuild/netbsd-x64@0.28.2':
+    optional: true
 
-  '@typescript-eslint/utils@8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.27.0(jiti@2.4.2))
-      '@typescript-eslint/scope-manager': 8.31.1
-      '@typescript-eslint/types': 8.31.1
-      '@typescript-eslint/typescript-estree': 8.31.1(typescript@5.8.3)
-      eslint: 9.27.0(jiti@2.4.2)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
+  '@esbuild/openbsd-arm64@0.25.4':
+    optional: true
 
-  '@typescript-eslint/utils@8.32.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.27.0(jiti@2.4.2))
-      '@typescript-eslint/scope-manager': 8.32.1
-      '@typescript-eslint/types': 8.32.1
-      '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.8.3)
-      eslint: 9.27.0(jiti@2.4.2)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
+  '@esbuild/openbsd-arm64@0.28.2':
+    optional: true
 
-  '@typescript-eslint/visitor-keys@8.31.1':
-    dependencies:
-      '@typescript-eslint/types': 8.31.1
-      eslint-visitor-keys: 4.2.0
+  '@esbuild/openbsd-x64@0.25.4':
+    optional: true
 
-  '@typescript-eslint/visitor-keys@8.32.1':
-    dependencies:
-      '@typescript-eslint/types': 8.32.1
-      eslint-visitor-keys: 4.2.0
+  '@esbuild/openbsd-x64@0.28.2':
+    optional: true
 
-  '@unocss/astro@66.1.2(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.3))':
-    dependencies:
-      '@unocss/core': 66.1.2
-      '@unocss/reset': 66.1.2
-      '@unocss/vite': 66.1.2(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.3))
-    optionalDependencies:
-      vite: 6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1)
-    transitivePeerDependencies:
-      - vue
+  '@esbuild/openharmony-arm64@0.28.2':
+    optional: true
 
-  '@unocss/cli@66.1.2':
-    dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@unocss/config': 66.1.2
-      '@unocss/core': 66.1.2
-      '@unocss/preset-uno': 66.1.2
-      cac: 6.7.14
-      chokidar: 3.6.0
-      colorette: 2.0.20
-      consola: 3.4.2
-      magic-string: 0.30.17
-      pathe: 2.0.3
-      perfect-debounce: 1.0.0
-      tinyglobby: 0.2.13
-      unplugin-utils: 0.2.4
+  '@esbuild/sunos-x64@0.25.4':
+    optional: true
 
-  '@unocss/config@66.1.2':
-    dependencies:
-      '@unocss/core': 66.1.2
-      unconfig: 7.3.2
+  '@esbuild/sunos-x64@0.28.2':
+    optional: true
 
-  '@unocss/core@66.1.2': {}
+  '@esbuild/win32-arm64@0.25.4':
+    optional: true
 
-  '@unocss/eslint-plugin@66.1.2(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)':
-    dependencies:
-      '@typescript-eslint/utils': 8.32.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@unocss/config': 66.1.2
-      '@unocss/core': 66.1.2
-      '@unocss/rule-utils': 66.1.2
-      magic-string: 0.30.17
-      synckit: 0.9.2
-    transitivePeerDependencies:
-      - eslint
-      - supports-color
-      - typescript
+  '@esbuild/win32-arm64@0.28.2':
+    optional: true
 
-  '@unocss/extractor-arbitrary-variants@66.1.2':
-    dependencies:
-      '@unocss/core': 66.1.2
+  '@esbuild/win32-ia32@0.25.4':
+    optional: true
 
-  '@unocss/inspector@66.1.2(vue@3.5.13(typescript@5.8.3))':
-    dependencies:
-      '@unocss/core': 66.1.2
-      '@unocss/rule-utils': 66.1.2
-      colorette: 2.0.20
-      gzip-size: 6.0.0
-      sirv: 3.0.1
-      vue-flow-layout: 0.1.1(vue@3.5.13(typescript@5.8.3))
-    transitivePeerDependencies:
-      - vue
+  '@esbuild/win32-ia32@0.28.2':
+    optional: true
 
-  '@unocss/postcss@66.1.2(postcss@8.5.3)':
-    dependencies:
-      '@unocss/config': 66.1.2
-      '@unocss/core': 66.1.2
-      '@unocss/rule-utils': 66.1.2
-      css-tree: 3.1.0
-      postcss: 8.5.3
-      tinyglobby: 0.2.13
+  '@esbuild/win32-x64@0.25.4':
+    optional: true
 
-  '@unocss/preset-attributify@66.1.2':
-    dependencies:
-      '@unocss/core': 66.1.2
+  '@esbuild/win32-x64@0.28.2':
+    optional: true
 
-  '@unocss/preset-icons@66.1.2':
-    dependencies:
-      '@iconify/utils': 2.3.0
-      '@unocss/core': 66.1.2
-      ofetch: 1.4.1
-    transitivePeerDependencies:
-      - supports-color
+  '@figma/plugin-typings@1.142.0': {}
 
-  '@unocss/preset-mini@66.1.2':
+  '@figma/widget-typings@1.13.0(@figma/plugin-typings@1.142.0)':
     dependencies:
-      '@unocss/core': 66.1.2
-      '@unocss/extractor-arbitrary-variants': 66.1.2
-      '@unocss/rule-utils': 66.1.2
+      '@figma/plugin-typings': 1.142.0
 
-  '@unocss/preset-rem-to-px@66.1.2':
+  '@floating-ui/core@1.8.0':
     dependencies:
-      '@unocss/core': 66.1.2
+      '@floating-ui/utils': 0.2.12
 
-  '@unocss/preset-tagify@66.1.2':
+  '@floating-ui/dom@1.8.0':
     dependencies:
-      '@unocss/core': 66.1.2
+      '@floating-ui/core': 1.8.0
+      '@floating-ui/utils': 0.2.12
 
-  '@unocss/preset-typography@66.1.2':
+  '@floating-ui/react-dom@2.1.9(react-dom@19.3.1(react@19.3.1))(react@19.3.1)':
     dependencies:
-      '@unocss/core': 66.1.2
-      '@unocss/preset-mini': 66.1.2
-      '@unocss/rule-utils': 66.1.2
+      '@floating-ui/dom': 1.8.0
+      react: 19.3.1
+      react-dom: 19.3.1(react@19.3.1)
 
-  '@unocss/preset-uno@66.1.2':
-    dependencies:
-      '@unocss/core': 66.1.2
-      '@unocss/preset-wind3': 66.1.2
+  '@floating-ui/utils@0.2.12': {}
+
+  '@henrygd/queue@1.2.0': {}
 
-  '@unocss/preset-web-fonts@66.1.2':
+  '@iconify-json/mdi@1.2.3':
     dependencies:
-      '@unocss/core': 66.1.2
-      ofetch: 1.4.1
+      '@iconify/types': 2.0.0
 
-  '@unocss/preset-wind3@66.1.2':
+  '@iconify-json/tabler@1.2.42':
     dependencies:
-      '@unocss/core': 66.1.2
-      '@unocss/preset-mini': 66.1.2
-      '@unocss/rule-utils': 66.1.2
+      '@iconify/types': 2.0.0
 
-  '@unocss/preset-wind4@66.1.2':
+  '@iconify/tailwind4@1.2.3(tailwindcss@4.3.3)':
     dependencies:
-      '@unocss/core': 66.1.2
-      '@unocss/extractor-arbitrary-variants': 66.1.2
-      '@unocss/rule-utils': 66.1.2
+      '@iconify/tools': 5.0.14
+      '@iconify/types': 2.0.0
+      '@iconify/utils': 3.1.7
+      tailwindcss: 4.3.3
 
-  '@unocss/preset-wind@66.1.2':
+  '@iconify/tools@5.0.14':
     dependencies:
-      '@unocss/core': 66.1.2
-      '@unocss/preset-wind3': 66.1.2
+      '@cyberalien/svg-utils': 1.2.21
+      '@iconify/types': 2.0.0
+      '@iconify/utils': 3.1.7
+      fflate: 0.8.3
+      modern-tar: 0.8.6
+      pathe: 2.0.3
+      svgo: 4.1.0
 
-  '@unocss/reset@66.1.2': {}
+  '@iconify/types@2.0.0': {}
 
-  '@unocss/rule-utils@66.1.2':
+  '@iconify/utils@3.1.7':
     dependencies:
-      '@unocss/core': 66.1.2
-      magic-string: 0.30.17
+      '@antfu/install-pkg': 2.1.0
+      '@iconify/types': 2.0.0
+      import-meta-resolve: 4.2.0
 
-  '@unocss/transformer-attributify-jsx@66.1.2':
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))(typescript@7.0.2)':
     dependencies:
-      '@unocss/core': 66.1.2
+      glob: 13.0.6
+      react-docgen-typescript: 2.2.2(typescript@7.0.2)
+      vite: '@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)'
+    optionalDependencies:
+      typescript: 7.0.2
 
-  '@unocss/transformer-compile-class@66.1.2':
+  '@jridgewell/gen-mapping@0.3.13':
     dependencies:
-      '@unocss/core': 66.1.2
+      '@jridgewell/sourcemap-codec': 1.6.0
+      '@jridgewell/trace-mapping': 0.3.31
 
-  '@unocss/transformer-directives@66.1.2':
+  '@jridgewell/remapping@2.3.5':
     dependencies:
-      '@unocss/core': 66.1.2
-      '@unocss/rule-utils': 66.1.2
-      css-tree: 3.1.0
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
 
-  '@unocss/transformer-variant-group@66.1.2':
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.6.0': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
     dependencies:
-      '@unocss/core': 66.1.2
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.6.0
 
-  '@unocss/vite@66.1.2(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.3))':
+  '@mdx-js/react@3.1.0(@types/react@19.3.0)(react@19.3.1)':
     dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@unocss/config': 66.1.2
-      '@unocss/core': 66.1.2
-      '@unocss/inspector': 66.1.2(vue@3.5.13(typescript@5.8.3))
-      chokidar: 3.6.0
-      magic-string: 0.30.17
-      pathe: 2.0.3
-      tinyglobby: 0.2.13
-      unplugin-utils: 0.2.4
-      vite: 6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1)
-    transitivePeerDependencies:
-      - vue
+      '@types/mdx': 2.0.13
+      '@types/react': 19.3.0
+      react: 19.3.1
 
-  '@unrs/resolver-binding-darwin-arm64@1.7.2':
+  '@napi-rs/wasm-runtime@1.2.5(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)':
+    dependencies:
+      '@emnapi/core': 1.11.0
+      '@emnapi/runtime': 1.11.0
+      '@tybys/wasm-util': 0.10.4
     optional: true
 
-  '@unrs/resolver-binding-darwin-x64@1.7.2':
+  '@napi-rs/wasm-runtime@1.2.5(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)':
+    dependencies:
+      '@emnapi/core': 1.9.2
+      '@emnapi/runtime': 1.9.2
+      '@tybys/wasm-util': 0.10.4
     optional: true
 
-  '@unrs/resolver-binding-freebsd-x64@1.7.2':
+  '@oxc-parser/binding-android-arm-eabi@0.127.0':
     optional: true
 
-  '@unrs/resolver-binding-linux-arm-gnueabihf@1.7.2':
+  '@oxc-parser/binding-android-arm64@0.127.0':
     optional: true
 
-  '@unrs/resolver-binding-linux-arm-musleabihf@1.7.2':
+  '@oxc-parser/binding-darwin-arm64@0.127.0':
     optional: true
 
-  '@unrs/resolver-binding-linux-arm64-gnu@1.7.2':
+  '@oxc-parser/binding-darwin-x64@0.127.0':
     optional: true
 
-  '@unrs/resolver-binding-linux-arm64-musl@1.7.2':
+  '@oxc-parser/binding-freebsd-x64@0.127.0':
     optional: true
 
-  '@unrs/resolver-binding-linux-ppc64-gnu@1.7.2':
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.127.0':
     optional: true
 
-  '@unrs/resolver-binding-linux-riscv64-gnu@1.7.2':
+  '@oxc-parser/binding-linux-arm-musleabihf@0.127.0':
     optional: true
 
-  '@unrs/resolver-binding-linux-riscv64-musl@1.7.2':
+  '@oxc-parser/binding-linux-arm64-gnu@0.127.0':
     optional: true
 
-  '@unrs/resolver-binding-linux-s390x-gnu@1.7.2':
+  '@oxc-parser/binding-linux-arm64-musl@0.127.0':
     optional: true
 
-  '@unrs/resolver-binding-linux-x64-gnu@1.7.2':
+  '@oxc-parser/binding-linux-ppc64-gnu@0.127.0':
     optional: true
 
-  '@unrs/resolver-binding-linux-x64-musl@1.7.2':
+  '@oxc-parser/binding-linux-riscv64-gnu@0.127.0':
     optional: true
 
-  '@unrs/resolver-binding-wasm32-wasi@1.7.2':
-    dependencies:
-      '@napi-rs/wasm-runtime': 0.2.9
+  '@oxc-parser/binding-linux-riscv64-musl@0.127.0':
     optional: true
 
-  '@unrs/resolver-binding-win32-arm64-msvc@1.7.2':
+  '@oxc-parser/binding-linux-s390x-gnu@0.127.0':
     optional: true
 
-  '@unrs/resolver-binding-win32-ia32-msvc@1.7.2':
+  '@oxc-parser/binding-linux-x64-gnu@0.127.0':
     optional: true
 
-  '@unrs/resolver-binding-win32-x64-msvc@1.7.2':
+  '@oxc-parser/binding-linux-x64-musl@0.127.0':
     optional: true
 
-  '@vitejs/plugin-react@4.4.1(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1))':
-    dependencies:
-      '@babel/core': 7.27.1
-      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.27.1)
-      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.27.1)
-      '@types/babel__core': 7.20.5
-      react-refresh: 0.17.0
-      vite: 6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@vitest/expect@2.0.5':
-    dependencies:
-      '@vitest/spy': 2.0.5
-      '@vitest/utils': 2.0.5
-      chai: 5.2.0
-      tinyrainbow: 1.2.0
+  '@oxc-parser/binding-openharmony-arm64@0.127.0':
+    optional: true
 
-  '@vitest/pretty-format@2.0.5':
+  '@oxc-parser/binding-wasm32-wasi@0.127.0':
     dependencies:
-      tinyrainbow: 1.2.0
+      '@emnapi/core': 1.9.2
+      '@emnapi/runtime': 1.9.2
+      '@napi-rs/wasm-runtime': 1.2.5(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
+    optional: true
 
-  '@vitest/pretty-format@2.1.9':
-    dependencies:
-      tinyrainbow: 1.2.0
+  '@oxc-parser/binding-win32-arm64-msvc@0.127.0':
+    optional: true
 
-  '@vitest/spy@2.0.5':
-    dependencies:
-      tinyspy: 3.0.2
+  '@oxc-parser/binding-win32-ia32-msvc@0.127.0':
+    optional: true
 
-  '@vitest/utils@2.0.5':
-    dependencies:
-      '@vitest/pretty-format': 2.0.5
-      estree-walker: 3.0.3
-      loupe: 3.1.3
-      tinyrainbow: 1.2.0
+  '@oxc-parser/binding-win32-x64-msvc@0.127.0':
+    optional: true
 
-  '@vitest/utils@2.1.9':
-    dependencies:
-      '@vitest/pretty-format': 2.1.9
-      loupe: 3.1.3
-      tinyrainbow: 1.2.0
+  '@oxc-project/runtime@0.155.0': {}
 
-  '@volar/language-core@2.4.14':
-    dependencies:
-      '@volar/source-map': 2.4.14
+  '@oxc-project/types@0.127.0': {}
 
-  '@volar/source-map@2.4.14': {}
+  '@oxc-project/types@0.155.0': {}
 
-  '@volar/typescript@2.4.14':
-    dependencies:
-      '@volar/language-core': 2.4.14
-      path-browserify: 1.0.1
-      vscode-uri: 3.1.0
+  '@oxc-resolver/binding-android-arm-eabi@11.21.2':
+    optional: true
 
-  '@vue/compiler-core@3.5.13':
-    dependencies:
-      '@babel/parser': 7.27.2
-      '@vue/shared': 3.5.13
-      entities: 4.5.0
-      estree-walker: 2.0.2
-      source-map-js: 1.2.1
+  '@oxc-resolver/binding-android-arm64@11.21.2':
+    optional: true
 
-  '@vue/compiler-core@3.5.14':
-    dependencies:
-      '@babel/parser': 7.27.2
-      '@vue/shared': 3.5.14
-      entities: 4.5.0
-      estree-walker: 2.0.2
-      source-map-js: 1.2.1
+  '@oxc-resolver/binding-darwin-arm64@11.21.2':
+    optional: true
 
-  '@vue/compiler-dom@3.5.13':
-    dependencies:
-      '@vue/compiler-core': 3.5.13
-      '@vue/shared': 3.5.13
+  '@oxc-resolver/binding-darwin-x64@11.21.2':
+    optional: true
 
-  '@vue/compiler-dom@3.5.14':
-    dependencies:
-      '@vue/compiler-core': 3.5.14
-      '@vue/shared': 3.5.14
+  '@oxc-resolver/binding-freebsd-x64@11.21.2':
+    optional: true
 
-  '@vue/compiler-sfc@3.5.13':
-    dependencies:
-      '@babel/parser': 7.27.2
-      '@vue/compiler-core': 3.5.13
-      '@vue/compiler-dom': 3.5.13
-      '@vue/compiler-ssr': 3.5.13
-      '@vue/shared': 3.5.13
-      estree-walker: 2.0.2
-      magic-string: 0.30.17
-      postcss: 8.5.3
-      source-map-js: 1.2.1
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.21.2':
+    optional: true
 
-  '@vue/compiler-ssr@3.5.13':
-    dependencies:
-      '@vue/compiler-dom': 3.5.13
-      '@vue/shared': 3.5.13
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.21.2':
+    optional: true
 
-  '@vue/compiler-vue2@2.7.16':
-    dependencies:
-      de-indent: 1.0.2
-      he: 1.2.0
+  '@oxc-resolver/binding-linux-arm64-gnu@11.21.2':
+    optional: true
 
-  '@vue/language-core@2.2.0(typescript@5.8.3)':
-    dependencies:
-      '@volar/language-core': 2.4.14
-      '@vue/compiler-dom': 3.5.14
-      '@vue/compiler-vue2': 2.7.16
-      '@vue/shared': 3.5.14
-      alien-signals: 0.4.14
-      minimatch: 9.0.5
-      muggle-string: 0.4.1
-      path-browserify: 1.0.1
-    optionalDependencies:
-      typescript: 5.8.3
+  '@oxc-resolver/binding-linux-arm64-musl@11.21.2':
+    optional: true
 
-  '@vue/reactivity@3.5.13':
-    dependencies:
-      '@vue/shared': 3.5.13
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.21.2':
+    optional: true
 
-  '@vue/runtime-core@3.5.13':
-    dependencies:
-      '@vue/reactivity': 3.5.13
-      '@vue/shared': 3.5.13
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.21.2':
+    optional: true
 
-  '@vue/runtime-dom@3.5.13':
-    dependencies:
-      '@vue/reactivity': 3.5.13
-      '@vue/runtime-core': 3.5.13
-      '@vue/shared': 3.5.13
-      csstype: 3.1.3
+  '@oxc-resolver/binding-linux-riscv64-musl@11.21.2':
+    optional: true
 
-  '@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.8.3))':
-    dependencies:
-      '@vue/compiler-ssr': 3.5.13
-      '@vue/shared': 3.5.13
-      vue: 3.5.13(typescript@5.8.3)
+  '@oxc-resolver/binding-linux-s390x-gnu@11.21.2':
+    optional: true
 
-  '@vue/shared@3.5.13': {}
+  '@oxc-resolver/binding-linux-x64-gnu@11.21.2':
+    optional: true
 
-  '@vue/shared@3.5.14': {}
+  '@oxc-resolver/binding-linux-x64-musl@11.21.2':
+    optional: true
 
-  '@zod/core@0.11.4': {}
+  '@oxc-resolver/binding-openharmony-arm64@11.21.2':
+    optional: true
 
-  '@zod/mini@4.0.0-beta.20250505T012514':
+  '@oxc-resolver/binding-wasm32-wasi@11.21.2':
     dependencies:
-      '@zod/core': 0.11.4
+      '@emnapi/core': 1.11.0
+      '@emnapi/runtime': 1.11.0
+      '@napi-rs/wasm-runtime': 1.2.5(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)
+    optional: true
 
-  acorn-jsx@5.3.2(acorn@8.14.1):
-    dependencies:
-      acorn: 8.14.1
+  '@oxc-resolver/binding-win32-arm64-msvc@11.21.2':
+    optional: true
 
-  acorn@8.14.1: {}
+  '@oxc-resolver/binding-win32-x64-msvc@11.21.2':
+    optional: true
 
-  ajv-draft-04@1.0.0(ajv@8.13.0):
-    optionalDependencies:
-      ajv: 8.13.0
+  '@oxfmt/binding-android-arm-eabi@0.74.0':
+    optional: true
 
-  ajv-formats@3.0.1(ajv@8.13.0):
-    optionalDependencies:
-      ajv: 8.13.0
+  '@oxfmt/binding-android-arm64@0.74.0':
+    optional: true
 
-  ajv@6.12.6:
-    dependencies:
-      fast-deep-equal: 3.1.3
-      fast-json-stable-stringify: 2.1.0
-      json-schema-traverse: 0.4.1
-      uri-js: 4.4.1
+  '@oxfmt/binding-darwin-arm64@0.74.0':
+    optional: true
 
-  ajv@8.12.0:
-    dependencies:
-      fast-deep-equal: 3.1.3
-      json-schema-traverse: 1.0.0
-      require-from-string: 2.0.2
-      uri-js: 4.4.1
+  '@oxfmt/binding-darwin-x64@0.74.0':
+    optional: true
 
-  ajv@8.13.0:
-    dependencies:
-      fast-deep-equal: 3.1.3
-      json-schema-traverse: 1.0.0
-      require-from-string: 2.0.2
-      uri-js: 4.4.1
+  '@oxfmt/binding-freebsd-x64@0.74.0':
+    optional: true
 
-  alien-signals@0.4.14: {}
+  '@oxfmt/binding-linux-arm-gnueabihf@0.74.0':
+    optional: true
 
-  ansi-escapes@7.0.0:
-    dependencies:
-      environment: 1.1.0
+  '@oxfmt/binding-linux-arm-musleabihf@0.74.0':
+    optional: true
 
-  ansi-regex@5.0.1: {}
+  '@oxfmt/binding-linux-arm64-gnu@0.74.0':
+    optional: true
 
-  ansi-regex@6.1.0: {}
+  '@oxfmt/binding-linux-arm64-musl@0.74.0':
+    optional: true
 
-  ansi-styles@4.3.0:
-    dependencies:
-      color-convert: 2.0.1
+  '@oxfmt/binding-linux-ppc64-gnu@0.74.0':
+    optional: true
 
-  ansi-styles@5.2.0: {}
+  '@oxfmt/binding-linux-riscv64-gnu@0.74.0':
+    optional: true
 
-  ansi-styles@6.2.1: {}
+  '@oxfmt/binding-linux-riscv64-musl@0.74.0':
+    optional: true
 
-  anymatch@3.1.3:
-    dependencies:
-      normalize-path: 3.0.0
-      picomatch: 2.3.1
+  '@oxfmt/binding-linux-s390x-gnu@0.74.0':
+    optional: true
 
-  argparse@1.0.10:
-    dependencies:
-      sprintf-js: 1.0.3
+  '@oxfmt/binding-linux-x64-gnu@0.74.0':
+    optional: true
 
-  argparse@2.0.1: {}
+  '@oxfmt/binding-linux-x64-musl@0.74.0':
+    optional: true
 
-  aria-hidden@1.2.4:
-    dependencies:
-      tslib: 2.8.1
+  '@oxfmt/binding-openharmony-arm64@0.74.0':
+    optional: true
 
-  aria-query@5.3.0:
-    dependencies:
-      dequal: 2.0.3
+  '@oxfmt/binding-win32-arm64-msvc@0.74.0':
+    optional: true
 
-  aria-query@5.3.2: {}
+  '@oxfmt/binding-win32-ia32-msvc@0.74.0':
+    optional: true
 
-  assertion-error@2.0.1: {}
+  '@oxfmt/binding-win32-x64-msvc@0.74.0':
+    optional: true
 
-  ast-types@0.16.1:
-    dependencies:
-      tslib: 2.8.1
+  '@oxlint-tsgolint/darwin-arm64@7.0.2004':
+    optional: true
 
-  autoprefixer@10.4.21(postcss@8.5.3):
-    dependencies:
-      browserslist: 4.24.5
-      caniuse-lite: 1.0.30001717
-      fraction.js: 4.3.7
-      normalize-range: 0.1.2
-      picocolors: 1.1.1
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
+  '@oxlint-tsgolint/darwin-x64@7.0.2004':
+    optional: true
 
-  available-typed-arrays@1.0.7:
-    dependencies:
-      possible-typed-array-names: 1.1.0
+  '@oxlint-tsgolint/linux-arm64@7.0.2004':
+    optional: true
 
-  balanced-match@1.0.2: {}
+  '@oxlint-tsgolint/linux-x64@7.0.2004':
+    optional: true
 
-  better-opn@3.0.2:
-    dependencies:
-      open: 8.4.2
+  '@oxlint-tsgolint/win32-arm64@7.0.2004':
+    optional: true
 
-  binary-extensions@2.3.0: {}
+  '@oxlint-tsgolint/win32-x64@7.0.2004':
+    optional: true
 
-  birecord@0.1.1: {}
+  '@oxlint/binding-android-arm-eabi@1.89.0':
+    optional: true
 
-  boolbase@1.0.0: {}
+  '@oxlint/binding-android-arm64@1.89.0':
+    optional: true
 
-  brace-expansion@1.1.11:
-    dependencies:
-      balanced-match: 1.0.2
-      concat-map: 0.0.1
+  '@oxlint/binding-darwin-arm64@1.89.0':
+    optional: true
 
-  brace-expansion@2.0.1:
-    dependencies:
-      balanced-match: 1.0.2
+  '@oxlint/binding-darwin-x64@1.89.0':
+    optional: true
 
-  braces@3.0.3:
-    dependencies:
-      fill-range: 7.1.1
+  '@oxlint/binding-freebsd-x64@1.89.0':
+    optional: true
 
-  browser-assert@1.2.1: {}
+  '@oxlint/binding-linux-arm-gnueabihf@1.89.0':
+    optional: true
 
-  browserslist@4.24.5:
-    dependencies:
-      caniuse-lite: 1.0.30001717
-      electron-to-chromium: 1.5.149
-      node-releases: 2.0.19
-      update-browserslist-db: 1.1.3(browserslist@4.24.5)
+  '@oxlint/binding-linux-arm-musleabihf@1.89.0':
+    optional: true
 
-  builtin-modules@5.0.0: {}
+  '@oxlint/binding-linux-arm64-gnu@1.89.0':
+    optional: true
 
-  bundle-name@4.1.0:
-    dependencies:
-      run-applescript: 7.0.0
+  '@oxlint/binding-linux-arm64-musl@1.89.0':
+    optional: true
 
-  c12@3.0.3:
-    dependencies:
-      chokidar: 4.0.3
-      confbox: 0.2.2
-      defu: 6.1.4
-      dotenv: 16.5.0
-      exsolve: 1.0.5
-      giget: 2.0.0
-      jiti: 2.4.2
-      ohash: 2.0.11
-      pathe: 2.0.3
-      perfect-debounce: 1.0.0
-      pkg-types: 2.1.0
-      rc9: 2.1.2
+  '@oxlint/binding-linux-ppc64-gnu@1.89.0':
+    optional: true
 
-  cac@6.7.14: {}
+  '@oxlint/binding-linux-riscv64-gnu@1.89.0':
+    optional: true
 
-  call-bind-apply-helpers@1.0.2:
-    dependencies:
-      es-errors: 1.3.0
-      function-bind: 1.1.2
+  '@oxlint/binding-linux-riscv64-musl@1.89.0':
+    optional: true
 
-  call-bind@1.0.8:
-    dependencies:
-      call-bind-apply-helpers: 1.0.2
-      es-define-property: 1.0.1
-      get-intrinsic: 1.3.0
-      set-function-length: 1.2.2
+  '@oxlint/binding-linux-s390x-gnu@1.89.0':
+    optional: true
 
-  call-bound@1.0.4:
-    dependencies:
-      call-bind-apply-helpers: 1.0.2
-      get-intrinsic: 1.3.0
+  '@oxlint/binding-linux-x64-gnu@1.89.0':
+    optional: true
 
-  callsites@3.1.0: {}
+  '@oxlint/binding-linux-x64-musl@1.89.0':
+    optional: true
 
-  caniuse-api@3.0.0:
-    dependencies:
-      browserslist: 4.24.5
-      caniuse-lite: 1.0.30001717
-      lodash.memoize: 4.1.2
-      lodash.uniq: 4.5.0
+  '@oxlint/binding-openharmony-arm64@1.89.0':
+    optional: true
 
-  caniuse-lite@1.0.30001717: {}
+  '@oxlint/binding-win32-arm64-msvc@1.89.0':
+    optional: true
 
-  chai@5.2.0:
-    dependencies:
-      assertion-error: 2.0.1
-      check-error: 2.1.1
-      deep-eql: 5.0.2
-      loupe: 3.1.3
-      pathval: 2.0.0
+  '@oxlint/binding-win32-ia32-msvc@1.89.0':
+    optional: true
 
-  chalk@3.0.0:
-    dependencies:
-      ansi-styles: 4.3.0
-      supports-color: 7.2.0
+  '@oxlint/binding-win32-x64-msvc@1.89.0':
+    optional: true
 
-  chalk@4.1.2:
-    dependencies:
-      ansi-styles: 4.3.0
-      supports-color: 7.2.0
+  '@oxlint/plugins@1.89.0': {}
 
-  chalk@5.4.1: {}
+  '@polka/url@1.0.0-next.29': {}
 
-  changelogen@0.6.1:
+  '@quansync/fs@1.1.0':
     dependencies:
-      c12: 3.0.3
-      confbox: 0.2.2
-      consola: 3.4.2
-      convert-gitmoji: 0.1.5
-      mri: 1.2.0
-      node-fetch-native: 1.6.6
-      ofetch: 1.4.1
-      open: 10.1.2
-      pathe: 2.0.3
-      pkg-types: 2.1.0
-      scule: 1.3.0
-      semver: 7.7.1
-      std-env: 3.9.0
-    transitivePeerDependencies:
-      - magicast
+      quansync: 1.0.0
 
-  check-error@2.1.1: {}
+  '@rolldown/pluginutils@1.0.1': {}
 
-  chokidar@3.6.0:
+  '@rollup/pluginutils@5.1.4(rollup@4.40.1)':
     dependencies:
-      anymatch: 3.1.3
-      braces: 3.0.3
-      glob-parent: 5.1.2
-      is-binary-path: 2.1.0
-      is-glob: 4.0.3
-      normalize-path: 3.0.0
-      readdirp: 3.6.0
+      '@types/estree': 1.0.7
+      estree-walker: 2.0.2
+      picomatch: 4.0.7
     optionalDependencies:
-      fsevents: 2.3.3
-
-  chokidar@4.0.3:
-    dependencies:
-      readdirp: 4.1.2
-
-  chromatic@11.28.2: {}
+      rollup: 4.40.1
 
-  ci-info@4.2.0: {}
+  '@rollup/rollup-android-arm-eabi@4.40.1':
+    optional: true
 
-  citty@0.1.6:
-    dependencies:
-      consola: 3.4.2
+  '@rollup/rollup-android-arm64@4.40.1':
+    optional: true
 
-  class-variance-authority@0.7.1:
-    dependencies:
-      clsx: 2.1.1
+  '@rollup/rollup-darwin-arm64@4.40.1':
+    optional: true
 
-  clean-regexp@1.0.0:
-    dependencies:
-      escape-string-regexp: 1.0.5
+  '@rollup/rollup-darwin-x64@4.40.1':
+    optional: true
 
-  cli-cursor@5.0.0:
-    dependencies:
-      restore-cursor: 5.1.0
+  '@rollup/rollup-freebsd-arm64@4.40.1':
+    optional: true
 
-  cli-truncate@4.0.0:
-    dependencies:
-      slice-ansi: 5.0.0
-      string-width: 7.2.0
+  '@rollup/rollup-freebsd-x64@4.40.1':
+    optional: true
 
-  clsx@2.1.1: {}
+  '@rollup/rollup-linux-arm-gnueabihf@4.40.1':
+    optional: true
 
-  color-convert@2.0.1:
-    dependencies:
-      color-name: 1.1.4
+  '@rollup/rollup-linux-arm-musleabihf@4.40.1':
+    optional: true
 
-  color-name@1.1.4: {}
+  '@rollup/rollup-linux-arm64-gnu@4.40.1':
+    optional: true
 
-  colord@2.9.3: {}
+  '@rollup/rollup-linux-arm64-musl@4.40.1':
+    optional: true
 
-  colorette@2.0.20: {}
+  '@rollup/rollup-linux-loongarch64-gnu@4.40.1':
+    optional: true
 
-  commander@13.1.0: {}
+  '@rollup/rollup-linux-powerpc64le-gnu@4.40.1':
+    optional: true
 
-  commander@7.2.0: {}
+  '@rollup/rollup-linux-riscv64-gnu@4.40.1':
+    optional: true
 
-  comment-parser@1.4.1: {}
+  '@rollup/rollup-linux-riscv64-musl@4.40.1':
+    optional: true
 
-  commondir@1.0.1: {}
+  '@rollup/rollup-linux-s390x-gnu@4.40.1':
+    optional: true
 
-  compare-versions@6.1.1: {}
+  '@rollup/rollup-linux-x64-gnu@4.40.1':
+    optional: true
 
-  concat-map@0.0.1: {}
+  '@rollup/rollup-linux-x64-musl@4.40.1':
+    optional: true
 
-  confbox@0.1.8: {}
+  '@rollup/rollup-win32-arm64-msvc@4.40.1':
+    optional: true
 
-  confbox@0.2.2: {}
+  '@rollup/rollup-win32-ia32-msvc@4.40.1':
+    optional: true
 
-  consola@3.4.2: {}
+  '@rollup/rollup-win32-x64-msvc@4.40.1':
+    optional: true
 
-  convert-gitmoji@0.1.5: {}
+  '@simple-libs/child-process-utils@2.0.0':
+    dependencies:
+      '@simple-libs/stream-utils': 2.0.0
 
-  convert-source-map@2.0.0: {}
+  '@simple-libs/stream-utils@2.0.0': {}
 
-  core-js-compat@3.42.0:
+  '@storybook/addon-docs@10.6.3(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(storybook@10.6.3(@types/react@19.3.0)(react@19.3.1)(vite-plus@1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)))':
     dependencies:
-      browserslist: 4.24.5
+      '@mdx-js/react': 3.1.0(@types/react@19.3.0)(react@19.3.1)
+      '@storybook/icons': 2.2.0(react@19.3.1)
+      '@storybook/react-dom-shim': 10.6.3(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)(storybook@10.6.3(@types/react@19.3.0)(react@19.3.1)(vite-plus@1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)))
+      react: 19.3.1
+      react-dom: 19.3.1(react@19.3.1)
+      storybook: 10.6.3(@types/react@19.3.0)(react@19.3.1)(vite-plus@1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))
+      ts-dedent: 2.2.0
+      unplugin: 2.3.11
+    optionalDependencies:
+      '@types/react': 19.3.0
+    transitivePeerDependencies:
+      - '@types/react-dom'
 
-  cross-spawn@7.0.6:
+  '@storybook/builder-vite@10.6.3(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))(storybook@10.6.3(@types/react@19.3.0)(react@19.3.1)(vite-plus@1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)))':
     dependencies:
-      path-key: 3.1.1
-      shebang-command: 2.0.0
-      which: 2.0.2
+      storybook: 10.6.3(@types/react@19.3.0)(react@19.3.1)(vite-plus@1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))
+      ts-dedent: 2.2.0
+      vite: '@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)'
 
-  css-declaration-sorter@7.2.0(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
+  '@storybook/global@5.0.0': {}
 
-  css-select@5.1.0:
+  '@storybook/icons@2.2.0(react@19.3.1)':
     dependencies:
-      boolbase: 1.0.0
-      css-what: 6.1.0
-      domhandler: 5.0.3
-      domutils: 3.2.2
-      nth-check: 2.1.1
+      react: 19.3.1
 
-  css-tree@2.2.1:
+  '@storybook/react-dom-shim@10.6.3(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)(storybook@10.6.3(@types/react@19.3.0)(react@19.3.1)(vite-plus@1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)))':
     dependencies:
-      mdn-data: 2.0.28
-      source-map-js: 1.2.1
+      react: 19.3.1
+      react-dom: 19.3.1(react@19.3.1)
+      storybook: 10.6.3(@types/react@19.3.0)(react@19.3.1)(vite-plus@1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))
+    optionalDependencies:
+      '@types/react': 19.3.0
+      '@types/react-dom': 19.3.0(@types/react@19.3.0)
 
-  css-tree@2.3.1:
+  '@storybook/react-vite@10.6.3(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))(react-dom@19.3.1(react@19.3.1))(react@19.3.1)(rollup@4.40.1)(storybook@10.6.3(@types/react@19.3.0)(react@19.3.1)(vite-plus@1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)))(typescript@7.0.2)':
     dependencies:
-      mdn-data: 2.0.30
-      source-map-js: 1.2.1
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.7.0(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))(typescript@7.0.2)
+      '@rollup/pluginutils': 5.1.4(rollup@4.40.1)
+      '@storybook/builder-vite': 10.6.3(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))(storybook@10.6.3(@types/react@19.3.0)(react@19.3.1)(vite-plus@1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)))
+      '@storybook/react': 10.6.3(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)(storybook@10.6.3(@types/react@19.3.0)(react@19.3.1)(vite-plus@1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)))(typescript@7.0.2)
+      empathic: 2.1.0
+      magic-string: 1.4.3
+      react: 19.3.1
+      react-docgen: 8.0.4
+      react-dom: 19.3.1(react@19.3.1)
+      resolve: 1.22.10
+      storybook: 10.6.3(@types/react@19.3.0)(react@19.3.1)(vite-plus@1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))
+      tsconfig-paths: 4.2.0
+      vite: '@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)'
+    optionalDependencies:
+      typescript: 7.0.2
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+      - rollup
+      - supports-color
 
-  css-tree@3.1.0:
+  '@storybook/react@10.6.3(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)(storybook@10.6.3(@types/react@19.3.0)(react@19.3.1)(vite-plus@1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)))(typescript@7.0.2)':
     dependencies:
-      mdn-data: 2.12.2
-      source-map-js: 1.2.1
+      '@storybook/global': 5.0.0
+      '@storybook/react-dom-shim': 10.6.3(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)(storybook@10.6.3(@types/react@19.3.0)(react@19.3.1)(vite-plus@1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)))
+      react: 19.3.1
+      react-docgen: 8.0.4
+      react-docgen-typescript: 2.2.2(typescript@7.0.2)
+      react-dom: 19.3.1(react@19.3.1)
+      storybook: 10.6.3(@types/react@19.3.0)(react@19.3.1)(vite-plus@1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))
+    optionalDependencies:
+      '@types/react': 19.3.0
+      '@types/react-dom': 19.3.0(@types/react@19.3.0)
+      typescript: 7.0.2
+    transitivePeerDependencies:
+      - supports-color
 
-  css-what@6.1.0: {}
+  '@tailwindcss/node@4.3.3':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.26.0
+      jiti: 2.7.0
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      source-map-js: 1.2.2
+      tailwindcss: 4.3.3
 
-  css.escape@1.5.1: {}
+  '@tailwindcss/oxide-android-arm64@4.3.3':
+    optional: true
 
-  cssesc@3.0.0: {}
+  '@tailwindcss/oxide-darwin-arm64@4.3.3':
+    optional: true
 
-  cssnano-preset-default@7.0.6(postcss@8.5.3):
-    dependencies:
-      browserslist: 4.24.5
-      css-declaration-sorter: 7.2.0(postcss@8.5.3)
-      cssnano-utils: 5.0.0(postcss@8.5.3)
-      postcss: 8.5.3
-      postcss-calc: 10.1.1(postcss@8.5.3)
-      postcss-colormin: 7.0.2(postcss@8.5.3)
-      postcss-convert-values: 7.0.4(postcss@8.5.3)
-      postcss-discard-comments: 7.0.3(postcss@8.5.3)
-      postcss-discard-duplicates: 7.0.1(postcss@8.5.3)
-      postcss-discard-empty: 7.0.0(postcss@8.5.3)
-      postcss-discard-overridden: 7.0.0(postcss@8.5.3)
-      postcss-merge-longhand: 7.0.4(postcss@8.5.3)
-      postcss-merge-rules: 7.0.4(postcss@8.5.3)
-      postcss-minify-font-values: 7.0.0(postcss@8.5.3)
-      postcss-minify-gradients: 7.0.0(postcss@8.5.3)
-      postcss-minify-params: 7.0.2(postcss@8.5.3)
-      postcss-minify-selectors: 7.0.4(postcss@8.5.3)
-      postcss-normalize-charset: 7.0.0(postcss@8.5.3)
-      postcss-normalize-display-values: 7.0.0(postcss@8.5.3)
-      postcss-normalize-positions: 7.0.0(postcss@8.5.3)
-      postcss-normalize-repeat-style: 7.0.0(postcss@8.5.3)
-      postcss-normalize-string: 7.0.0(postcss@8.5.3)
-      postcss-normalize-timing-functions: 7.0.0(postcss@8.5.3)
-      postcss-normalize-unicode: 7.0.2(postcss@8.5.3)
-      postcss-normalize-url: 7.0.0(postcss@8.5.3)
-      postcss-normalize-whitespace: 7.0.0(postcss@8.5.3)
-      postcss-ordered-values: 7.0.1(postcss@8.5.3)
-      postcss-reduce-initial: 7.0.2(postcss@8.5.3)
-      postcss-reduce-transforms: 7.0.0(postcss@8.5.3)
-      postcss-svgo: 7.0.1(postcss@8.5.3)
-      postcss-unique-selectors: 7.0.3(postcss@8.5.3)
-
-  cssnano-utils@5.0.0(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-
-  cssnano@7.0.6(postcss@8.5.3):
-    dependencies:
-      cssnano-preset-default: 7.0.6(postcss@8.5.3)
-      lilconfig: 3.1.3
-      postcss: 8.5.3
+  '@tailwindcss/oxide-darwin-x64@4.3.3':
+    optional: true
 
-  csso@5.0.5:
-    dependencies:
-      css-tree: 2.2.1
+  '@tailwindcss/oxide-freebsd-x64@4.3.3':
+    optional: true
 
-  csstype@3.1.3: {}
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.3':
+    optional: true
 
-  de-indent@1.0.2: {}
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.3':
+    optional: true
 
-  debug@3.2.7:
-    dependencies:
-      ms: 2.1.3
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.3':
+    optional: true
 
-  debug@4.4.0:
-    dependencies:
-      ms: 2.1.3
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.3':
+    optional: true
 
-  debug@4.4.1:
-    dependencies:
-      ms: 2.1.3
+  '@tailwindcss/oxide-linux-x64-musl@4.3.3':
+    optional: true
 
-  deep-eql@5.0.2: {}
+  '@tailwindcss/oxide-wasm32-wasi@4.3.3':
+    optional: true
 
-  deep-is@0.1.4: {}
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.3':
+    optional: true
 
-  deepmerge@4.3.1: {}
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.3':
+    optional: true
 
-  default-browser-id@5.0.0: {}
+  '@tailwindcss/oxide@4.3.3':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.3.3
+      '@tailwindcss/oxide-darwin-arm64': 4.3.3
+      '@tailwindcss/oxide-darwin-x64': 4.3.3
+      '@tailwindcss/oxide-freebsd-x64': 4.3.3
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.3.3
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.3.3
+      '@tailwindcss/oxide-linux-arm64-musl': 4.3.3
+      '@tailwindcss/oxide-linux-x64-gnu': 4.3.3
+      '@tailwindcss/oxide-linux-x64-musl': 4.3.3
+      '@tailwindcss/oxide-wasm32-wasi': 4.3.3
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.3.3
+      '@tailwindcss/oxide-win32-x64-msvc': 4.3.3
+
+  '@tailwindcss/vite@4.3.3(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))':
+    dependencies:
+      '@tailwindcss/node': 4.3.3
+      '@tailwindcss/oxide': 4.3.3
+      tailwindcss: 4.3.3
+      vite: '@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)'
+
+  '@testing-library/dom@10.4.2':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/runtime': 7.27.1
+      '@types/aria-query': 5.0.4
+      aria-query: 5.3.0
+      dom-accessibility-api: 0.5.16
+      lz-string: 1.5.0
+      picocolors: 1.1.1
+      pretty-format: 27.5.1
 
-  default-browser@5.2.1:
+  '@testing-library/jest-dom@6.9.1':
     dependencies:
-      bundle-name: 4.1.0
-      default-browser-id: 5.0.0
+      '@adobe/css-tools': 4.4.2
+      aria-query: 5.3.2
+      css.escape: 1.5.1
+      dom-accessibility-api: 0.6.3
+      picocolors: 1.1.1
+      redent: 3.0.0
 
-  define-data-property@1.1.4:
+  '@testing-library/user-event@14.6.8(@testing-library/dom@10.4.2)':
     dependencies:
-      es-define-property: 1.0.1
-      es-errors: 1.3.0
-      gopd: 1.2.0
+      '@testing-library/dom': 10.4.2
 
-  define-lazy-prop@2.0.0: {}
+  '@tybys/wasm-util@0.10.4':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
 
-  define-lazy-prop@3.0.0: {}
+  '@types/aria-query@5.0.4': {}
 
-  defu@6.1.4: {}
+  '@types/babel__core@7.20.5':
+    dependencies:
+      '@babel/parser': 7.29.11
+      '@babel/types': 7.29.11
+      '@types/babel__generator': 7.27.0
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.20.7
 
-  dequal@2.0.3: {}
+  '@types/babel__generator@7.27.0':
+    dependencies:
+      '@babel/types': 7.29.11
 
-  destr@2.0.5: {}
+  '@types/babel__template@7.4.4':
+    dependencies:
+      '@babel/parser': 7.29.11
+      '@babel/types': 7.29.11
 
-  detect-node-es@1.1.0: {}
+  '@types/babel__traverse@7.20.7':
+    dependencies:
+      '@babel/types': 7.29.11
 
-  doctrine@3.0.0:
+  '@types/chai@5.2.3':
     dependencies:
-      esutils: 2.0.3
+      '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
 
-  dom-accessibility-api@0.5.16: {}
+  '@types/deep-eql@4.0.2': {}
 
-  dom-accessibility-api@0.6.3: {}
+  '@types/doctrine@0.0.9': {}
 
-  dom-serializer@2.0.0:
-    dependencies:
-      domelementtype: 2.3.0
-      domhandler: 5.0.3
-      entities: 4.5.0
+  '@types/estree@1.0.7': {}
 
-  domelementtype@2.3.0: {}
+  '@types/mdx@2.0.13': {}
 
-  domhandler@5.0.3:
+  '@types/node@24.19.2':
     dependencies:
-      domelementtype: 2.3.0
+      undici-types: 7.24.6
 
-  domutils@3.2.2:
+  '@types/react-dom@19.3.0(@types/react@19.3.0)':
     dependencies:
-      dom-serializer: 2.0.0
-      domelementtype: 2.3.0
-      domhandler: 5.0.3
-
-  dotenv@16.5.0: {}
+      '@types/react': 19.3.0
 
-  dunder-proto@1.0.1:
+  '@types/react@19.3.0':
     dependencies:
-      call-bind-apply-helpers: 1.0.2
-      es-errors: 1.3.0
-      gopd: 1.2.0
+      csstype: 3.2.3
 
-  duplexer@0.1.2: {}
+  '@types/resolve@1.20.6': {}
 
-  eastasianwidth@0.2.0: {}
+  '@typescript/typescript-aix-ppc64@7.0.2':
+    optional: true
 
-  electron-to-chromium@1.5.149: {}
+  '@typescript/typescript-darwin-arm64@7.0.2':
+    optional: true
 
-  emoji-regex@10.4.0: {}
+  '@typescript/typescript-darwin-x64@7.0.2':
+    optional: true
 
-  emoji-regex@8.0.0: {}
+  '@typescript/typescript-freebsd-arm64@7.0.2':
+    optional: true
 
-  emoji-regex@9.2.2: {}
+  '@typescript/typescript-freebsd-x64@7.0.2':
+    optional: true
 
-  entities@4.5.0: {}
+  '@typescript/typescript-linux-arm64@7.0.2':
+    optional: true
 
-  environment@1.1.0: {}
+  '@typescript/typescript-linux-arm@7.0.2':
+    optional: true
 
-  es-define-property@1.0.1: {}
+  '@typescript/typescript-linux-loong64@7.0.2':
+    optional: true
 
-  es-errors@1.3.0: {}
+  '@typescript/typescript-linux-mips64el@7.0.2':
+    optional: true
 
-  es-object-atoms@1.1.1:
-    dependencies:
-      es-errors: 1.3.0
+  '@typescript/typescript-linux-ppc64@7.0.2':
+    optional: true
 
-  esbuild-register@3.6.0(esbuild@0.25.4):
-    dependencies:
-      debug: 4.4.1
-      esbuild: 0.25.4
-    transitivePeerDependencies:
-      - supports-color
+  '@typescript/typescript-linux-riscv64@7.0.2':
+    optional: true
 
-  esbuild@0.25.3:
-    optionalDependencies:
-      '@esbuild/aix-ppc64': 0.25.3
-      '@esbuild/android-arm': 0.25.3
-      '@esbuild/android-arm64': 0.25.3
-      '@esbuild/android-x64': 0.25.3
-      '@esbuild/darwin-arm64': 0.25.3
-      '@esbuild/darwin-x64': 0.25.3
-      '@esbuild/freebsd-arm64': 0.25.3
-      '@esbuild/freebsd-x64': 0.25.3
-      '@esbuild/linux-arm': 0.25.3
-      '@esbuild/linux-arm64': 0.25.3
-      '@esbuild/linux-ia32': 0.25.3
-      '@esbuild/linux-loong64': 0.25.3
-      '@esbuild/linux-mips64el': 0.25.3
-      '@esbuild/linux-ppc64': 0.25.3
-      '@esbuild/linux-riscv64': 0.25.3
-      '@esbuild/linux-s390x': 0.25.3
-      '@esbuild/linux-x64': 0.25.3
-      '@esbuild/netbsd-arm64': 0.25.3
-      '@esbuild/netbsd-x64': 0.25.3
-      '@esbuild/openbsd-arm64': 0.25.3
-      '@esbuild/openbsd-x64': 0.25.3
-      '@esbuild/sunos-x64': 0.25.3
-      '@esbuild/win32-arm64': 0.25.3
-      '@esbuild/win32-ia32': 0.25.3
-      '@esbuild/win32-x64': 0.25.3
+  '@typescript/typescript-linux-s390x@7.0.2':
+    optional: true
 
-  esbuild@0.25.4:
-    optionalDependencies:
-      '@esbuild/aix-ppc64': 0.25.4
-      '@esbuild/android-arm': 0.25.4
-      '@esbuild/android-arm64': 0.25.4
-      '@esbuild/android-x64': 0.25.4
-      '@esbuild/darwin-arm64': 0.25.4
-      '@esbuild/darwin-x64': 0.25.4
-      '@esbuild/freebsd-arm64': 0.25.4
-      '@esbuild/freebsd-x64': 0.25.4
-      '@esbuild/linux-arm': 0.25.4
-      '@esbuild/linux-arm64': 0.25.4
-      '@esbuild/linux-ia32': 0.25.4
-      '@esbuild/linux-loong64': 0.25.4
-      '@esbuild/linux-mips64el': 0.25.4
-      '@esbuild/linux-ppc64': 0.25.4
-      '@esbuild/linux-riscv64': 0.25.4
-      '@esbuild/linux-s390x': 0.25.4
-      '@esbuild/linux-x64': 0.25.4
-      '@esbuild/netbsd-arm64': 0.25.4
-      '@esbuild/netbsd-x64': 0.25.4
-      '@esbuild/openbsd-arm64': 0.25.4
-      '@esbuild/openbsd-x64': 0.25.4
-      '@esbuild/sunos-x64': 0.25.4
-      '@esbuild/win32-arm64': 0.25.4
-      '@esbuild/win32-ia32': 0.25.4
-      '@esbuild/win32-x64': 0.25.4
+  '@typescript/typescript-linux-x64@7.0.2':
+    optional: true
 
-  escalade@3.2.0: {}
+  '@typescript/typescript-netbsd-arm64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-netbsd-x64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-openbsd-arm64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-openbsd-x64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-sunos-x64@7.0.2':
+    optional: true
 
-  escape-string-regexp@1.0.5: {}
+  '@typescript/typescript-win32-arm64@7.0.2':
+    optional: true
 
-  escape-string-regexp@4.0.0: {}
+  '@typescript/typescript-win32-x64@7.0.2':
+    optional: true
 
-  eslint-import-resolver-node@0.3.9:
+  '@vitejs/plugin-react@6.1.2(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))':
     dependencies:
-      debug: 3.2.7
-      is-core-module: 2.16.1
-      resolve: 1.22.10
-    transitivePeerDependencies:
-      - supports-color
+      '@rolldown/pluginutils': 1.0.1
+      vite: '@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)'
 
-  eslint-plugin-import-x@4.11.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3):
-    dependencies:
-      '@typescript-eslint/utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      comment-parser: 1.4.1
-      debug: 4.4.0
-      eslint: 9.27.0(jiti@2.4.2)
-      eslint-import-resolver-node: 0.3.9
-      get-tsconfig: 4.10.0
-      is-glob: 4.0.3
-      minimatch: 10.0.1
-      semver: 7.7.1
-      stable-hash: 0.0.5
-      tslib: 2.8.1
-      unrs-resolver: 1.7.2
+  '@vitest/browser-playwright@5.0.5(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))(playwright@1.64.1)(vitest@5.0.5)':
+    dependencies:
+      '@vitest/browser': 5.0.5(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))(vitest@5.0.5)
+      '@vitest/mocker': 5.0.5(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))
+      playwright: 1.64.1
+      tinyrainbow: 3.2.0
+      vitest: 5.0.5(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/browser-preview@5.0.5)(@vitest/ui@5.0.5)(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))
     transitivePeerDependencies:
-      - supports-color
-      - typescript
+      - bufferutil
+      - msw
+      - utf-8-validate
+      - vite
 
-  eslint-plugin-perfectionist@4.12.3(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3):
+  '@vitest/browser-playwright@5.0.5(playwright@1.64.1)(vite@6.4.5(@types/node@24.19.2)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.15)(yaml@2.9.1))(vitest@5.0.5)':
     dependencies:
-      '@typescript-eslint/types': 8.31.1
-      '@typescript-eslint/utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      eslint: 9.27.0(jiti@2.4.2)
-      natural-orderby: 5.0.0
+      '@vitest/browser': 5.0.5(vite@6.4.5(@types/node@24.19.2)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.15)(yaml@2.9.1))(vitest@5.0.5)
+      '@vitest/mocker': 5.0.5(vite@6.4.5(@types/node@24.19.2)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.15)(yaml@2.9.1))
+      playwright: 1.64.1
+      tinyrainbow: 3.2.0
+      vitest: 5.0.5(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/browser-preview@5.0.5)(@vitest/ui@5.0.5)(vite@6.4.5(@types/node@24.19.2)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.15)(yaml@2.9.1))
     transitivePeerDependencies:
-      - supports-color
-      - typescript
+      - bufferutil
+      - msw
+      - utf-8-validate
+      - vite
+    optional: true
 
-  eslint-plugin-pnpm@0.3.1(eslint@9.27.0(jiti@2.4.2)):
+  '@vitest/browser-preview@5.0.5(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))(vitest@5.0.5)':
     dependencies:
-      eslint: 9.27.0(jiti@2.4.2)
-      find-up-simple: 1.0.1
-      jsonc-eslint-parser: 2.4.0
-      pathe: 2.0.3
-      pnpm-workspace-yaml: 0.3.1
-      tinyglobby: 0.2.13
-      yaml-eslint-parser: 1.3.0
-
-  eslint-plugin-react-debug@1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3):
-    dependencies:
-      '@eslint-react/ast': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/core': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/eff': 1.49.0
-      '@eslint-react/kit': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/shared': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/var': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@typescript-eslint/scope-manager': 8.31.1
-      '@typescript-eslint/type-utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@typescript-eslint/types': 8.31.1
-      '@typescript-eslint/utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      eslint: 9.27.0(jiti@2.4.2)
-      string-ts: 2.2.1
-      ts-pattern: 5.7.0
-    optionalDependencies:
-      typescript: 5.8.3
+      '@testing-library/dom': 10.4.2
+      '@testing-library/user-event': 14.6.8(@testing-library/dom@10.4.2)
+      '@vitest/browser': 5.0.5(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))(vitest@5.0.5)
+      vitest: 5.0.5(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/browser-preview@5.0.5)(@vitest/ui@5.0.5)(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))
     transitivePeerDependencies:
-      - supports-color
+      - bufferutil
+      - msw
+      - utf-8-validate
+      - vite
 
-  eslint-plugin-react-dom@1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3):
-    dependencies:
-      '@eslint-react/ast': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/core': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/eff': 1.49.0
-      '@eslint-react/kit': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/shared': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/var': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@typescript-eslint/scope-manager': 8.31.1
-      '@typescript-eslint/types': 8.31.1
-      '@typescript-eslint/utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      compare-versions: 6.1.1
-      eslint: 9.27.0(jiti@2.4.2)
-      string-ts: 2.2.1
-      ts-pattern: 5.7.0
-    optionalDependencies:
-      typescript: 5.8.3
+  '@vitest/browser-preview@5.0.5(vite@6.4.5(@types/node@24.19.2)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.15)(yaml@2.9.1))(vitest@5.0.5)':
+    dependencies:
+      '@testing-library/dom': 10.4.2
+      '@testing-library/user-event': 14.6.8(@testing-library/dom@10.4.2)
+      '@vitest/browser': 5.0.5(vite@6.4.5(@types/node@24.19.2)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.15)(yaml@2.9.1))(vitest@5.0.5)
+      vitest: 5.0.5(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/browser-preview@5.0.5)(@vitest/ui@5.0.5)(vite@6.4.5(@types/node@24.19.2)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.15)(yaml@2.9.1))
     transitivePeerDependencies:
-      - supports-color
+      - bufferutil
+      - msw
+      - utf-8-validate
+      - vite
+    optional: true
 
-  eslint-plugin-react-hooks-extra@1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3):
-    dependencies:
-      '@eslint-react/ast': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/core': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/eff': 1.49.0
-      '@eslint-react/kit': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/shared': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/var': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@typescript-eslint/scope-manager': 8.31.1
-      '@typescript-eslint/type-utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@typescript-eslint/types': 8.31.1
-      '@typescript-eslint/utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      eslint: 9.27.0(jiti@2.4.2)
-      string-ts: 2.2.1
-      ts-pattern: 5.7.0
-    optionalDependencies:
-      typescript: 5.8.3
+  '@vitest/browser@5.0.5(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))(vitest@5.0.5)':
+    dependencies:
+      '@blazediff/core': 1.10.0
+      '@vitest/mocker': 5.0.5(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))
+      '@vitest/ui': 5.0.5(vitest@5.0.5)
+      '@vitest/utils': 5.0.5
+      magic-string: 1.4.3
+      pngjs: 7.0.0
+      sirv: 3.0.2
+      tinyrainbow: 3.2.0
+      vitest: 5.0.5(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/browser-preview@5.0.5)(@vitest/ui@5.0.5)(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))
+      ws: 8.22.0
     transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-react-hooks@5.2.0(eslint@9.27.0(jiti@2.4.2)):
-    dependencies:
-      eslint: 9.27.0(jiti@2.4.2)
-
-  eslint-plugin-react-naming-convention@1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3):
-    dependencies:
-      '@eslint-react/ast': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/core': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/eff': 1.49.0
-      '@eslint-react/kit': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/shared': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/var': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@typescript-eslint/scope-manager': 8.31.1
-      '@typescript-eslint/type-utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@typescript-eslint/types': 8.31.1
-      '@typescript-eslint/utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      eslint: 9.27.0(jiti@2.4.2)
-      string-ts: 2.2.1
-      ts-pattern: 5.7.0
-    optionalDependencies:
-      typescript: 5.8.3
+      - bufferutil
+      - msw
+      - utf-8-validate
+      - vite
+
+  '@vitest/browser@5.0.5(vite@6.4.5(@types/node@24.19.2)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.15)(yaml@2.9.1))(vitest@5.0.5)':
+    dependencies:
+      '@blazediff/core': 1.10.0
+      '@vitest/mocker': 5.0.5(vite@6.4.5(@types/node@24.19.2)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.15)(yaml@2.9.1))
+      '@vitest/ui': 5.0.5(vitest@5.0.5)
+      '@vitest/utils': 5.0.5
+      magic-string: 1.4.3
+      pngjs: 7.0.0
+      sirv: 3.0.2
+      tinyrainbow: 3.2.0
+      vitest: 5.0.5(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/browser-preview@5.0.5)(@vitest/ui@5.0.5)(vite@6.4.5(@types/node@24.19.2)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.15)(yaml@2.9.1))
+      ws: 8.22.0
     transitivePeerDependencies:
-      - supports-color
+      - bufferutil
+      - msw
+      - utf-8-validate
+      - vite
+    optional: true
 
-  eslint-plugin-react-refresh@0.4.20(eslint@9.27.0(jiti@2.4.2)):
+  '@vitest/expect@3.2.4':
     dependencies:
-      eslint: 9.27.0(jiti@2.4.2)
+      '@types/chai': 5.2.3
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
+      chai: 5.2.0
+      tinyrainbow: 2.0.0
 
-  eslint-plugin-react-web-api@1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3):
+  '@vitest/mocker@5.0.5(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))':
     dependencies:
-      '@eslint-react/ast': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/core': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/eff': 1.49.0
-      '@eslint-react/kit': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/shared': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/var': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@typescript-eslint/scope-manager': 8.31.1
-      '@typescript-eslint/types': 8.31.1
-      '@typescript-eslint/utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      eslint: 9.27.0(jiti@2.4.2)
-      string-ts: 2.2.1
-      ts-pattern: 5.7.0
+      '@jridgewell/trace-mapping': 0.3.31
+      '@vitest/spy': 5.0.5
+      estree-walker: 3.0.3
+      magic-string: 1.4.3
     optionalDependencies:
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
+      vite: '@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)'
 
-  eslint-plugin-react-x@1.49.0(eslint@9.27.0(jiti@2.4.2))(ts-api-utils@2.1.0(typescript@5.8.3))(typescript@5.8.3):
-    dependencies:
-      '@eslint-react/ast': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/core': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/eff': 1.49.0
-      '@eslint-react/kit': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/shared': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@eslint-react/var': 1.49.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@typescript-eslint/scope-manager': 8.31.1
-      '@typescript-eslint/type-utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@typescript-eslint/types': 8.31.1
-      '@typescript-eslint/utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      compare-versions: 6.1.1
-      eslint: 9.27.0(jiti@2.4.2)
-      is-immutable-type: 5.0.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      string-ts: 2.2.1
-      ts-pattern: 5.7.0
+  '@vitest/mocker@5.0.5(vite@6.4.5(@types/node@24.19.2)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.15)(yaml@2.9.1))':
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      '@vitest/spy': 5.0.5
+      estree-walker: 3.0.3
+      magic-string: 1.4.3
     optionalDependencies:
-      ts-api-utils: 2.1.0(typescript@5.8.3)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
+      vite: 6.4.5(@types/node@24.19.2)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.15)(yaml@2.9.1)
 
-  eslint-plugin-storybook@0.12.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3):
+  '@vitest/pretty-format@3.2.4':
     dependencies:
-      '@storybook/csf': 0.1.13
-      '@typescript-eslint/utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      eslint: 9.27.0(jiti@2.4.2)
-      ts-dedent: 2.2.0
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
+      tinyrainbow: 2.0.0
 
-  eslint-plugin-unicorn@59.0.0(eslint@9.27.0(jiti@2.4.2)):
+  '@vitest/pretty-format@5.0.5':
     dependencies:
-      '@babel/helper-validator-identifier': 7.27.1
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.27.0(jiti@2.4.2))
-      '@eslint/plugin-kit': 0.2.8
-      ci-info: 4.2.0
-      clean-regexp: 1.0.0
-      core-js-compat: 3.42.0
-      eslint: 9.27.0(jiti@2.4.2)
-      esquery: 1.6.0
-      find-up-simple: 1.0.1
-      globals: 16.0.0
-      indent-string: 5.0.0
-      is-builtin-module: 5.0.0
-      jsesc: 3.1.0
-      pluralize: 8.0.0
-      regexp-tree: 0.1.27
-      regjsparser: 0.12.0
-      semver: 7.7.1
-      strip-indent: 4.0.0
+      tinyrainbow: 3.2.0
 
-  eslint-scope@8.3.0:
+  '@vitest/snapshot@5.0.5':
     dependencies:
-      esrecurse: 4.3.0
-      estraverse: 5.3.0
+      '@vitest/pretty-format': 5.0.5
+      '@vitest/utils': 5.0.5
+      magic-string: 1.4.3
+      pathe: 2.0.3
 
-  eslint-visitor-keys@3.4.3: {}
+  '@vitest/spy@3.2.4':
+    dependencies:
+      tinyspy: 4.0.6
 
-  eslint-visitor-keys@4.2.0: {}
+  '@vitest/spy@5.0.5': {}
 
-  eslint@9.27.0(jiti@2.4.2):
+  '@vitest/ui@5.0.5(vitest@5.0.5)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.27.0(jiti@2.4.2))
-      '@eslint-community/regexpp': 4.12.1
-      '@eslint/config-array': 0.20.0
-      '@eslint/config-helpers': 0.2.2
-      '@eslint/core': 0.14.0
-      '@eslint/eslintrc': 3.3.1
-      '@eslint/js': 9.27.0
-      '@eslint/plugin-kit': 0.3.1
-      '@humanfs/node': 0.16.6
-      '@humanwhocodes/module-importer': 1.0.1
-      '@humanwhocodes/retry': 0.4.3
-      '@types/estree': 1.0.7
-      '@types/json-schema': 7.0.15
-      ajv: 6.12.6
-      chalk: 4.1.2
-      cross-spawn: 7.0.6
-      debug: 4.4.1
-      escape-string-regexp: 4.0.0
-      eslint-scope: 8.3.0
-      eslint-visitor-keys: 4.2.0
-      espree: 10.3.0
-      esquery: 1.6.0
-      esutils: 2.0.3
-      fast-deep-equal: 3.1.3
-      file-entry-cache: 8.0.0
-      find-up: 5.0.0
-      glob-parent: 6.0.2
-      ignore: 5.3.2
-      imurmurhash: 0.1.4
-      is-glob: 4.0.3
-      json-stable-stringify-without-jsonify: 1.0.1
-      lodash.merge: 4.6.2
-      minimatch: 3.1.2
-      natural-compare: 1.4.0
-      optionator: 0.9.4
-    optionalDependencies:
-      jiti: 2.4.2
-    transitivePeerDependencies:
-      - supports-color
+      '@vitest/utils': 5.0.5
+      fflate: 0.8.3
+      flatted: 3.4.4
+      pathe: 2.0.3
+      sirv: 3.0.2
+      tinyrainbow: 3.2.0
+      vitest: 5.0.5(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/browser-preview@5.0.5)(@vitest/ui@5.0.5)(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))
 
-  espree@10.3.0:
+  '@vitest/utils@3.2.4':
     dependencies:
-      acorn: 8.14.1
-      acorn-jsx: 5.3.2(acorn@8.14.1)
-      eslint-visitor-keys: 4.2.0
+      '@vitest/pretty-format': 3.2.4
+      loupe: 3.2.1
+      tinyrainbow: 2.0.0
 
-  espree@9.6.1:
+  '@vitest/utils@5.0.5':
     dependencies:
-      acorn: 8.14.1
-      acorn-jsx: 5.3.2(acorn@8.14.1)
-      eslint-visitor-keys: 3.4.3
-
-  esprima@4.0.1: {}
+      '@vitest/pretty-format': 5.0.5
+      convert-source-map: 2.0.0
+      tinyrainbow: 3.2.0
 
-  esquery@1.6.0:
+  '@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)':
     dependencies:
-      estraverse: 5.3.0
+      '@oxc-project/runtime': 0.155.0
+      '@oxc-project/types': 0.155.0
+      lightningcss: 1.33.0
+      postcss: 8.5.31
+      yuku-parser: 0.19.0
+    optionalDependencies:
+      '@types/node': 24.19.2
+      '@voidzero-dev/vite-plus-darwin-arm64': 1.4.0
+      '@voidzero-dev/vite-plus-darwin-x64': 1.4.0
+      '@voidzero-dev/vite-plus-linux-arm64-gnu': 1.4.0
+      '@voidzero-dev/vite-plus-linux-arm64-musl': 1.4.0
+      '@voidzero-dev/vite-plus-linux-x64-gnu': 1.4.0
+      '@voidzero-dev/vite-plus-linux-x64-musl': 1.4.0
+      '@voidzero-dev/vite-plus-win32-arm64-msvc': 1.4.0
+      '@voidzero-dev/vite-plus-win32-x64-msvc': 1.4.0
+      '@volar/typescript': 2.4.14(typescript@7.0.2)
+      esbuild: 0.28.2
+      fsevents: 2.3.3
+      jiti: 2.7.0
+      tsx: 4.23.15
+      typescript: 7.0.2
+      yaml: 2.9.1
 
-  esrecurse@4.3.0:
-    dependencies:
-      estraverse: 5.3.0
+  '@voidzero-dev/vite-plus-darwin-arm64@1.4.0':
+    optional: true
 
-  estraverse@5.3.0: {}
+  '@voidzero-dev/vite-plus-darwin-x64@1.4.0':
+    optional: true
 
-  estree-walker@2.0.2: {}
+  '@voidzero-dev/vite-plus-linux-arm64-gnu@1.4.0':
+    optional: true
 
-  estree-walker@3.0.3:
-    dependencies:
-      '@types/estree': 1.0.7
+  '@voidzero-dev/vite-plus-linux-arm64-musl@1.4.0':
+    optional: true
 
-  esutils@2.0.3: {}
+  '@voidzero-dev/vite-plus-linux-x64-gnu@1.4.0':
+    optional: true
 
-  eventemitter3@5.0.1: {}
+  '@voidzero-dev/vite-plus-linux-x64-musl@1.4.0':
+    optional: true
 
-  exsolve@1.0.5: {}
+  '@voidzero-dev/vite-plus-win32-arm64-msvc@1.4.0':
+    optional: true
 
-  fast-deep-equal@3.1.3: {}
+  '@voidzero-dev/vite-plus-win32-x64-msvc@1.4.0':
+    optional: true
 
-  fast-glob@3.3.3:
+  '@volar/language-core@2.4.14':
     dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.8
-
-  fast-json-stable-stringify@2.1.0: {}
+      '@volar/source-map': 2.4.14
+    optional: true
 
-  fast-levenshtein@2.0.6: {}
+  '@volar/source-map@2.4.14':
+    optional: true
 
-  fastq@1.19.1:
+  '@volar/typescript@2.4.14(typescript@7.0.2)':
     dependencies:
-      reusify: 1.1.0
-
-  fdir@6.4.4(picomatch@4.0.2):
+      '@volar/language-core': 2.4.14
+      path-browserify: 1.0.1
+      vscode-uri: 3.1.0
     optionalDependencies:
-      picomatch: 4.0.2
-
-  file-entry-cache@8.0.0:
-    dependencies:
-      flat-cache: 4.0.1
+      typescript: 7.0.2
+    optional: true
 
-  filesize@10.1.6: {}
+  '@webcontainer/env@1.1.1': {}
 
-  fill-range@7.1.1:
-    dependencies:
-      to-regex-range: 5.0.1
+  '@yuku-core/binding-android-arm64@0.19.0':
+    optional: true
 
-  find-up-simple@1.0.1: {}
+  '@yuku-core/binding-darwin-arm64@0.19.0':
+    optional: true
 
-  find-up@5.0.0:
-    dependencies:
-      locate-path: 6.0.0
-      path-exists: 4.0.0
+  '@yuku-core/binding-darwin-x64@0.19.0':
+    optional: true
 
-  fix-dts-default-cjs-exports@1.0.1:
-    dependencies:
-      magic-string: 0.30.17
-      mlly: 1.7.4
-      rollup: 4.40.1
+  '@yuku-core/binding-freebsd-x64@0.19.0':
+    optional: true
 
-  flat-cache@4.0.1:
-    dependencies:
-      flatted: 3.3.3
-      keyv: 4.5.4
+  '@yuku-core/binding-linux-arm-gnu@0.19.0':
+    optional: true
 
-  flatted@3.3.3: {}
+  '@yuku-core/binding-linux-arm-musl@0.19.0':
+    optional: true
 
-  for-each@0.3.5:
-    dependencies:
-      is-callable: 1.2.7
+  '@yuku-core/binding-linux-arm64-gnu@0.19.0':
+    optional: true
 
-  foreground-child@3.3.1:
-    dependencies:
-      cross-spawn: 7.0.6
-      signal-exit: 4.1.0
+  '@yuku-core/binding-linux-arm64-musl@0.19.0':
+    optional: true
 
-  fraction.js@4.3.7: {}
+  '@yuku-core/binding-linux-x64-gnu@0.19.0':
+    optional: true
 
-  fs-extra@11.3.0:
-    dependencies:
-      graceful-fs: 4.2.11
-      jsonfile: 6.1.0
-      universalify: 2.0.1
+  '@yuku-core/binding-linux-x64-musl@0.19.0':
+    optional: true
 
-  fsevents@2.3.3:
+  '@yuku-core/binding-win32-arm64@0.19.0':
     optional: true
 
-  function-bind@1.1.2: {}
+  '@yuku-core/binding-win32-x64@0.19.0':
+    optional: true
 
-  gensync@1.0.0-beta.2: {}
+  '@yuku-toolchain/types@0.19.0': {}
 
-  get-east-asian-width@1.3.0: {}
+  acorn@8.19.0: {}
 
-  get-intrinsic@1.3.0:
+  ajv@8.13.0:
     dependencies:
-      call-bind-apply-helpers: 1.0.2
-      es-define-property: 1.0.1
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      function-bind: 1.1.2
-      get-proto: 1.0.1
-      gopd: 1.2.0
-      has-symbols: 1.1.0
-      hasown: 2.0.2
-      math-intrinsics: 1.1.0
-
-  get-nonce@1.0.1: {}
+      fast-deep-equal: 3.1.3
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+      uri-js: 4.4.1
 
-  get-proto@1.0.1:
-    dependencies:
-      dunder-proto: 1.0.1
-      es-object-atoms: 1.1.1
+  ansi-regex@5.0.1: {}
 
-  get-tsconfig@4.10.0:
-    dependencies:
-      resolve-pkg-maps: 1.0.0
+  ansi-regex@6.4.0: {}
 
-  giget@2.0.0:
-    dependencies:
-      citty: 0.1.6
-      consola: 3.4.2
-      defu: 6.1.4
-      node-fetch-native: 1.6.6
-      nypm: 0.6.0
-      pathe: 2.0.3
+  ansi-styles@5.2.0: {}
 
-  glob-parent@5.1.2:
-    dependencies:
-      is-glob: 4.0.3
+  ansi-styles@6.2.1: {}
 
-  glob-parent@6.0.2:
-    dependencies:
-      is-glob: 4.0.3
+  argparse@2.0.1: {}
 
-  glob@10.4.5:
-    dependencies:
-      foreground-child: 3.3.1
-      jackspeak: 3.4.3
-      minimatch: 9.0.5
-      minipass: 7.1.2
-      package-json-from-dist: 1.0.1
-      path-scurry: 1.11.1
+  argue-cli@3.2.0: {}
 
-  glob@11.0.2:
+  aria-query@5.3.0:
     dependencies:
-      foreground-child: 3.3.1
-      jackspeak: 4.1.0
-      minimatch: 10.0.1
-      minipass: 7.1.2
-      package-json-from-dist: 1.0.1
-      path-scurry: 2.0.0
-
-  globals@11.12.0: {}
-
-  globals@14.0.0: {}
-
-  globals@15.15.0: {}
-
-  globals@16.0.0: {}
-
-  gopd@1.2.0: {}
+      dequal: 2.0.3
 
-  graceful-fs@4.2.11: {}
+  aria-query@5.3.2: {}
 
-  graphemer@1.4.0: {}
+  assertion-error@2.0.1: {}
 
-  gzip-size@6.0.0:
+  ast-types@0.16.1:
     dependencies:
-      duplexer: 0.1.2
-
-  has-flag@4.0.0: {}
+      tslib: 2.8.1
 
-  has-property-descriptors@1.0.2:
-    dependencies:
-      es-define-property: 1.0.1
+  balanced-match@4.0.4: {}
 
-  has-symbols@1.1.0: {}
+  boolbase@1.0.0: {}
 
-  has-tostringtag@1.0.2:
+  brace-expansion@5.0.12:
     dependencies:
-      has-symbols: 1.1.0
+      balanced-match: 4.0.4
 
-  hasown@2.0.2:
+  browserslist@4.24.5:
     dependencies:
-      function-bind: 1.1.2
-
-  he@1.2.0: {}
-
-  hookable@5.5.3: {}
-
-  ignore@5.3.2: {}
+      caniuse-lite: 1.0.30001717
+      electron-to-chromium: 1.5.149
+      node-releases: 2.0.19
+      update-browserslist-db: 1.1.3(browserslist@4.24.5)
 
-  import-fresh@3.3.1:
+  bundle-name@4.1.0:
     dependencies:
-      parent-module: 1.0.1
-      resolve-from: 4.0.0
-
-  import-lazy@4.0.0: {}
+      run-applescript: 7.0.0
 
-  imurmurhash@0.1.4: {}
+  c12@3.3.4:
+    dependencies:
+      chokidar: 5.0.0
+      confbox: 0.2.4
+      defu: 6.1.7
+      dotenv: 17.4.2
+      exsolve: 1.1.3
+      giget: 3.3.1
+      jiti: 2.7.0
+      ohash: 2.0.11
+      pathe: 2.0.3
+      perfect-debounce: 2.1.0
+      pkg-types: 2.4.0
+      rc9: 3.1.0
 
-  indent-string@4.0.0: {}
+  cac@7.1.0: {}
 
-  indent-string@5.0.0: {}
+  callsites@3.1.0: {}
 
-  inherits@2.0.4: {}
+  caniuse-lite@1.0.30001717: {}
 
-  is-arguments@1.2.0:
+  chai@5.2.0:
     dependencies:
-      call-bound: 1.0.4
-      has-tostringtag: 1.0.2
+      assertion-error: 2.0.1
+      check-error: 2.1.1
+      deep-eql: 5.0.2
+      loupe: 3.2.1
+      pathval: 2.0.0
 
-  is-binary-path@2.1.0:
-    dependencies:
-      binary-extensions: 2.3.0
+  chai@6.3.0: {}
 
-  is-builtin-module@5.0.0:
+  changelogen@0.6.2:
     dependencies:
-      builtin-modules: 5.0.0
+      c12: 3.3.4
+      confbox: 0.2.4
+      consola: 3.4.2
+      convert-gitmoji: 0.1.5
+      mri: 1.2.0
+      node-fetch-native: 1.6.6
+      ofetch: 1.4.1
+      open: 10.2.0
+      pathe: 2.0.3
+      pkg-types: 2.4.0
+      scule: 1.3.0
+      semver: 7.8.5
+      std-env: 3.9.0
+    transitivePeerDependencies:
+      - magicast
 
-  is-callable@1.2.7: {}
+  check-error@2.1.1: {}
 
-  is-core-module@2.16.1:
+  chokidar@5.0.0:
     dependencies:
-      hasown: 2.0.2
+      readdirp: 5.1.1
 
-  is-docker@2.2.1: {}
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
 
-  is-docker@3.0.0: {}
+  cliui@9.0.1:
+    dependencies:
+      string-width: 7.2.0
+      strip-ansi: 7.2.0
+      wrap-ansi: 9.0.0
 
-  is-extglob@2.1.1: {}
+  clsx@2.1.1: {}
 
-  is-fullwidth-code-point@3.0.0: {}
+  commander@11.1.0: {}
 
-  is-fullwidth-code-point@4.0.0: {}
+  confbox@0.2.4: {}
 
-  is-fullwidth-code-point@5.0.0:
-    dependencies:
-      get-east-asian-width: 1.3.0
+  confbox@0.3.1: {}
 
-  is-generator-function@1.1.0:
-    dependencies:
-      call-bound: 1.0.4
-      get-proto: 1.0.1
-      has-tostringtag: 1.0.2
-      safe-regex-test: 1.1.0
+  consola@3.4.2: {}
 
-  is-glob@4.0.3:
+  conventional-changelog-angular@9.4.0:
     dependencies:
-      is-extglob: 2.1.1
+      '@conventional-changelog/template': 1.4.0
 
-  is-immutable-type@5.0.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3):
+  conventional-changelog-conventionalcommits@10.4.1:
     dependencies:
-      '@typescript-eslint/type-utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      eslint: 9.27.0(jiti@2.4.2)
-      ts-api-utils: 2.1.0(typescript@5.8.3)
-      ts-declaration-location: 1.0.7(typescript@5.8.3)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
+      '@conventional-changelog/template': 1.4.0
 
-  is-inside-container@1.0.0:
+  conventional-commits-parser@7.1.3:
     dependencies:
-      is-docker: 3.0.0
-
-  is-module@1.0.0: {}
+      '@simple-libs/stream-utils': 2.0.0
+      argue-cli: 3.2.0
 
-  is-number@7.0.0: {}
+  convert-gitmoji@0.1.5: {}
 
-  is-reference@1.2.1:
-    dependencies:
-      '@types/estree': 1.0.7
+  convert-source-map@2.0.0: {}
 
-  is-regex@1.2.1:
+  cosmiconfig@9.0.2(typescript@7.0.2):
     dependencies:
-      call-bound: 1.0.4
-      gopd: 1.2.0
-      has-tostringtag: 1.0.2
-      hasown: 2.0.2
+      env-paths: 2.2.1
+      import-fresh: 3.3.1
+      js-yaml: 4.1.0
+      parse-json: 5.2.0
+    optionalDependencies:
+      typescript: 7.0.2
 
-  is-typed-array@1.1.15:
+  css-select@6.0.0:
     dependencies:
-      which-typed-array: 1.1.19
+      boolbase: 1.0.0
+      css-what: 7.0.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      nth-check: 2.1.1
 
-  is-wsl@2.2.0:
+  css-tree@2.2.1:
     dependencies:
-      is-docker: 2.2.1
+      mdn-data: 2.0.28
+      source-map-js: 1.2.2
 
-  is-wsl@3.1.0:
+  css-tree@3.1.0:
     dependencies:
-      is-inside-container: 1.0.0
+      mdn-data: 2.12.2
+      source-map-js: 1.2.2
 
-  isexe@2.0.0: {}
+  css-what@7.0.0: {}
 
-  jackspeak@3.4.3:
-    dependencies:
-      '@isaacs/cliui': 8.0.2
-    optionalDependencies:
-      '@pkgjs/parseargs': 0.11.0
+  css.escape@1.5.1: {}
 
-  jackspeak@4.1.0:
+  csso@5.0.5:
     dependencies:
-      '@isaacs/cliui': 8.0.2
+      css-tree: 2.2.1
 
-  jiti@1.21.7: {}
+  csstype@3.2.3: {}
 
-  jiti@2.4.2: {}
+  debug@4.4.1:
+    dependencies:
+      ms: 2.1.3
 
-  jju@1.4.0: {}
+  deep-eql@5.0.2: {}
 
-  js-tokens@4.0.0: {}
+  default-browser-id@5.0.0: {}
 
-  js-yaml@4.1.0:
+  default-browser@5.2.1:
     dependencies:
-      argparse: 2.0.1
+      bundle-name: 4.1.0
+      default-browser-id: 5.0.0
 
-  jsdoc-type-pratt-parser@4.1.0: {}
+  define-lazy-prop@3.0.0: {}
 
-  jsesc@3.0.2: {}
+  defu@6.1.7: {}
 
-  jsesc@3.1.0: {}
+  dequal@2.0.3: {}
 
-  json-buffer@3.0.1: {}
+  destr@2.0.5: {}
 
-  json-schema-traverse@0.4.1: {}
+  detect-libc@2.1.2: {}
 
-  json-schema-traverse@1.0.0: {}
+  doctrine@3.0.0:
+    dependencies:
+      esutils: 2.0.3
 
-  json-stable-stringify-without-jsonify@1.0.1: {}
+  dom-accessibility-api@0.5.16: {}
 
-  json5@2.2.3: {}
+  dom-accessibility-api@0.6.3: {}
 
-  jsonc-eslint-parser@2.4.0:
+  dom-serializer@2.0.0:
     dependencies:
-      acorn: 8.14.1
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
-      semver: 7.7.1
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
+  domelementtype@2.3.0: {}
 
-  jsonfile@6.1.0:
+  domhandler@5.0.3:
     dependencies:
-      universalify: 2.0.1
-    optionalDependencies:
-      graceful-fs: 4.2.11
+      domelementtype: 2.3.0
 
-  keyv@4.5.4:
+  domutils@3.2.2:
     dependencies:
-      json-buffer: 3.0.1
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
 
-  knitwork@1.2.0: {}
+  dotenv@17.4.2: {}
 
-  kolorist@1.8.0: {}
+  electron-to-chromium@1.5.149: {}
 
-  levn@0.4.1:
-    dependencies:
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
+  emoji-regex@10.4.0: {}
 
-  lilconfig@3.1.3: {}
+  empathic@2.1.0: {}
 
-  lint-staged@16.0.0:
+  enhanced-resolve@5.26.0:
     dependencies:
-      chalk: 5.4.1
-      commander: 13.1.0
-      debug: 4.4.0
-      lilconfig: 3.1.3
-      listr2: 8.3.3
-      micromatch: 4.0.8
-      nano-spawn: 1.0.1
-      pidtree: 0.6.0
-      string-argv: 0.3.2
-      yaml: 2.7.1
-    transitivePeerDependencies:
-      - supports-color
+      graceful-fs: 4.2.11
+      tapable: 2.3.3
 
-  listr2@8.3.3:
-    dependencies:
-      cli-truncate: 4.0.0
-      colorette: 2.0.20
-      eventemitter3: 5.0.1
-      log-update: 6.1.0
-      rfdc: 1.4.1
-      wrap-ansi: 9.0.0
+  entities@4.5.0: {}
 
-  local-pkg@1.1.1:
-    dependencies:
-      mlly: 1.7.4
-      pkg-types: 2.1.0
-      quansync: 0.2.10
+  env-paths@2.2.1: {}
 
-  locate-path@6.0.0:
+  error-ex@1.3.4:
     dependencies:
-      p-locate: 5.0.0
-
-  lodash.memoize@4.1.2: {}
+      is-arrayish: 0.2.1
 
-  lodash.merge@4.6.2: {}
+  es-module-lexer@2.3.2: {}
 
-  lodash.uniq@4.5.0: {}
+  es-toolkit@1.53.0: {}
 
-  lodash@4.17.21: {}
+  esbuild@0.25.4:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.25.4
+      '@esbuild/android-arm': 0.25.4
+      '@esbuild/android-arm64': 0.25.4
+      '@esbuild/android-x64': 0.25.4
+      '@esbuild/darwin-arm64': 0.25.4
+      '@esbuild/darwin-x64': 0.25.4
+      '@esbuild/freebsd-arm64': 0.25.4
+      '@esbuild/freebsd-x64': 0.25.4
+      '@esbuild/linux-arm': 0.25.4
+      '@esbuild/linux-arm64': 0.25.4
+      '@esbuild/linux-ia32': 0.25.4
+      '@esbuild/linux-loong64': 0.25.4
+      '@esbuild/linux-mips64el': 0.25.4
+      '@esbuild/linux-ppc64': 0.25.4
+      '@esbuild/linux-riscv64': 0.25.4
+      '@esbuild/linux-s390x': 0.25.4
+      '@esbuild/linux-x64': 0.25.4
+      '@esbuild/netbsd-arm64': 0.25.4
+      '@esbuild/netbsd-x64': 0.25.4
+      '@esbuild/openbsd-arm64': 0.25.4
+      '@esbuild/openbsd-x64': 0.25.4
+      '@esbuild/sunos-x64': 0.25.4
+      '@esbuild/win32-arm64': 0.25.4
+      '@esbuild/win32-ia32': 0.25.4
+      '@esbuild/win32-x64': 0.25.4
 
-  log-update@6.1.0:
-    dependencies:
-      ansi-escapes: 7.0.0
-      cli-cursor: 5.0.0
-      slice-ansi: 7.1.0
-      strip-ansi: 7.1.0
-      wrap-ansi: 9.0.0
+  esbuild@0.28.2:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.28.2
+      '@esbuild/android-arm': 0.28.2
+      '@esbuild/android-arm64': 0.28.2
+      '@esbuild/android-x64': 0.28.2
+      '@esbuild/darwin-arm64': 0.28.2
+      '@esbuild/darwin-x64': 0.28.2
+      '@esbuild/freebsd-arm64': 0.28.2
+      '@esbuild/freebsd-x64': 0.28.2
+      '@esbuild/linux-arm': 0.28.2
+      '@esbuild/linux-arm64': 0.28.2
+      '@esbuild/linux-ia32': 0.28.2
+      '@esbuild/linux-loong64': 0.28.2
+      '@esbuild/linux-mips64el': 0.28.2
+      '@esbuild/linux-ppc64': 0.28.2
+      '@esbuild/linux-riscv64': 0.28.2
+      '@esbuild/linux-s390x': 0.28.2
+      '@esbuild/linux-x64': 0.28.2
+      '@esbuild/netbsd-arm64': 0.28.2
+      '@esbuild/netbsd-x64': 0.28.2
+      '@esbuild/openbsd-arm64': 0.28.2
+      '@esbuild/openbsd-x64': 0.28.2
+      '@esbuild/openharmony-arm64': 0.28.2
+      '@esbuild/sunos-x64': 0.28.2
+      '@esbuild/win32-arm64': 0.28.2
+      '@esbuild/win32-ia32': 0.28.2
+      '@esbuild/win32-x64': 0.28.2
 
-  loupe@3.1.3: {}
+  escalade@3.2.0: {}
 
-  lru-cache@10.4.3: {}
+  esprima@4.0.1: {}
 
-  lru-cache@11.1.0: {}
+  estree-walker@2.0.2: {}
 
-  lru-cache@5.1.1:
+  estree-walker@3.0.3:
     dependencies:
-      yallist: 3.1.1
+      '@types/estree': 1.0.7
 
-  lru-cache@6.0.0:
-    dependencies:
-      yallist: 4.0.0
+  esutils@2.0.3: {}
 
-  lz-string@1.5.0: {}
+  eventemitter3@5.0.4: {}
 
-  magic-string@0.27.0:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.0
+  expect-type@1.4.0: {}
 
-  magic-string@0.30.17:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.0
+  exsolve@1.1.3: {}
 
-  map-or-similar@1.5.0: {}
+  fast-deep-equal@3.1.3: {}
 
-  math-intrinsics@1.1.0: {}
+  fdir@6.5.0(picomatch@4.0.7):
+    optionalDependencies:
+      picomatch: 4.0.7
 
-  mdn-data@2.0.28: {}
+  fflate@0.8.3: {}
 
-  mdn-data@2.0.30: {}
+  flatted@3.4.4: {}
 
-  mdn-data@2.12.2: {}
+  fsevents@2.3.3:
+    optional: true
 
-  memoizerific@1.11.3:
-    dependencies:
-      map-or-similar: 1.5.0
+  function-bind@1.1.2: {}
 
-  merge2@1.4.1: {}
+  fzf@0.5.2: {}
 
-  micromatch@4.0.8:
-    dependencies:
-      braces: 3.0.3
-      picomatch: 2.3.1
+  gensync@1.0.0-beta.2: {}
 
-  mimic-function@5.0.1: {}
+  get-caller-file@2.0.5: {}
 
-  min-indent@1.0.1: {}
+  get-east-asian-width@1.7.0: {}
+
+  giget@3.3.1: {}
 
-  minimatch@10.0.1:
+  glob@13.0.6:
     dependencies:
-      brace-expansion: 2.0.1
+      minimatch: 10.2.6
+      minipass: 7.1.3
+      path-scurry: 2.0.2
 
-  minimatch@3.0.8:
+  global-directory@5.0.0:
     dependencies:
-      brace-expansion: 1.1.11
+      ini: 6.0.0
 
-  minimatch@3.1.2:
+  graceful-fs@4.2.11: {}
+
+  hasown@2.0.2:
     dependencies:
-      brace-expansion: 1.1.11
+      function-bind: 1.1.2
 
-  minimatch@9.0.5:
+  import-fresh@3.3.1:
     dependencies:
-      brace-expansion: 2.0.1
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
 
-  minimist@1.2.8: {}
+  import-meta-resolve@4.2.0: {}
 
-  minipass@7.1.2: {}
+  indent-string@4.0.0: {}
+
+  ini@6.0.0: {}
 
-  mkdist@2.3.0(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3)):
+  is-arrayish@0.2.1: {}
+
+  is-core-module@2.16.1:
     dependencies:
-      autoprefixer: 10.4.21(postcss@8.5.3)
-      citty: 0.1.6
-      cssnano: 7.0.6(postcss@8.5.3)
-      defu: 6.1.4
-      esbuild: 0.25.3
-      jiti: 1.21.7
-      mlly: 1.7.4
-      pathe: 2.0.3
-      pkg-types: 2.1.0
-      postcss: 8.5.3
-      postcss-nested: 7.0.2(postcss@8.5.3)
-      semver: 7.7.1
-      tinyglobby: 0.2.13
-    optionalDependencies:
-      typescript: 5.8.3
-      vue: 3.5.13(typescript@5.8.3)
+      hasown: 2.0.2
+
+  is-docker@3.0.0: {}
 
-  mlly@1.7.4:
+  is-inside-container@1.0.0:
     dependencies:
-      acorn: 8.14.1
-      pathe: 2.0.3
-      pkg-types: 1.3.1
-      ufo: 1.6.1
+      is-docker: 3.0.0
 
-  mri@1.2.0: {}
+  is-plain-obj@4.1.0: {}
 
-  mrmime@2.0.1: {}
+  is-wsl@3.1.0:
+    dependencies:
+      is-inside-container: 1.0.0
 
-  ms@2.1.3: {}
+  jiti@2.7.0: {}
 
-  muggle-string@0.4.1: {}
+  js-tokens@4.0.0: {}
 
-  nano-spawn@1.0.1: {}
+  js-yaml@4.1.0:
+    dependencies:
+      argparse: 2.0.1
 
-  nanoid@3.3.11: {}
+  jsesc@3.1.0: {}
 
-  napi-postinstall@0.2.3: {}
+  json-parse-even-better-errors@2.3.1: {}
 
-  natural-compare@1.4.0: {}
+  json-schema-traverse@1.0.0: {}
 
-  natural-orderby@5.0.0: {}
+  json5@2.2.3: {}
 
-  node-fetch-native@1.6.6: {}
+  jsonc-parser@3.3.1: {}
 
-  node-releases@2.0.19: {}
+  lightningcss-android-arm64@1.32.0:
+    optional: true
 
-  normalize-path@3.0.0: {}
+  lightningcss-android-arm64@1.33.0:
+    optional: true
 
-  normalize-range@0.1.2: {}
+  lightningcss-darwin-arm64@1.32.0:
+    optional: true
 
-  nth-check@2.1.1:
-    dependencies:
-      boolbase: 1.0.0
+  lightningcss-darwin-arm64@1.33.0:
+    optional: true
 
-  nypm@0.6.0:
-    dependencies:
-      citty: 0.1.6
-      consola: 3.4.2
-      pathe: 2.0.3
-      pkg-types: 2.1.0
-      tinyexec: 0.3.2
+  lightningcss-darwin-x64@1.32.0:
+    optional: true
 
-  ofetch@1.4.1:
-    dependencies:
-      destr: 2.0.5
-      node-fetch-native: 1.6.6
-      ufo: 1.6.1
+  lightningcss-darwin-x64@1.33.0:
+    optional: true
 
-  ohash@2.0.11: {}
+  lightningcss-freebsd-x64@1.32.0:
+    optional: true
 
-  onetime@7.0.0:
-    dependencies:
-      mimic-function: 5.0.1
+  lightningcss-freebsd-x64@1.33.0:
+    optional: true
 
-  open@10.1.2:
-    dependencies:
-      default-browser: 5.2.1
-      define-lazy-prop: 3.0.0
-      is-inside-container: 1.0.0
-      is-wsl: 3.1.0
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    optional: true
 
-  open@8.4.2:
-    dependencies:
-      define-lazy-prop: 2.0.0
-      is-docker: 2.2.1
-      is-wsl: 2.2.0
+  lightningcss-linux-arm-gnueabihf@1.33.0:
+    optional: true
 
-  optionator@0.9.4:
-    dependencies:
-      deep-is: 0.1.4
-      fast-levenshtein: 2.0.6
-      levn: 0.4.1
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-      word-wrap: 1.2.5
+  lightningcss-linux-arm64-gnu@1.32.0:
+    optional: true
 
-  p-limit@3.1.0:
-    dependencies:
-      yocto-queue: 0.1.0
+  lightningcss-linux-arm64-gnu@1.33.0:
+    optional: true
 
-  p-locate@5.0.0:
-    dependencies:
-      p-limit: 3.1.0
+  lightningcss-linux-arm64-musl@1.32.0:
+    optional: true
 
-  package-json-from-dist@1.0.1: {}
+  lightningcss-linux-arm64-musl@1.33.0:
+    optional: true
 
-  package-manager-detector@1.3.0: {}
+  lightningcss-linux-x64-gnu@1.32.0:
+    optional: true
 
-  parent-module@1.0.1:
-    dependencies:
-      callsites: 3.1.0
+  lightningcss-linux-x64-gnu@1.33.0:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.33.0:
+    optional: true
 
-  path-browserify@1.0.1: {}
+  lightningcss-win32-arm64-msvc@1.32.0:
+    optional: true
 
-  path-exists@4.0.0: {}
+  lightningcss-win32-arm64-msvc@1.33.0:
+    optional: true
 
-  path-key@3.1.1: {}
+  lightningcss-win32-x64-msvc@1.32.0:
+    optional: true
 
-  path-parse@1.0.7: {}
+  lightningcss-win32-x64-msvc@1.33.0:
+    optional: true
 
-  path-scurry@1.11.1:
+  lightningcss@1.32.0:
     dependencies:
-      lru-cache: 10.4.3
-      minipass: 7.1.2
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.32.0
+      lightningcss-darwin-arm64: 1.32.0
+      lightningcss-darwin-x64: 1.32.0
+      lightningcss-freebsd-x64: 1.32.0
+      lightningcss-linux-arm-gnueabihf: 1.32.0
+      lightningcss-linux-arm64-gnu: 1.32.0
+      lightningcss-linux-arm64-musl: 1.32.0
+      lightningcss-linux-x64-gnu: 1.32.0
+      lightningcss-linux-x64-musl: 1.32.0
+      lightningcss-win32-arm64-msvc: 1.32.0
+      lightningcss-win32-x64-msvc: 1.32.0
+
+  lightningcss@1.33.0:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.33.0
+      lightningcss-darwin-arm64: 1.33.0
+      lightningcss-darwin-x64: 1.33.0
+      lightningcss-freebsd-x64: 1.33.0
+      lightningcss-linux-arm-gnueabihf: 1.33.0
+      lightningcss-linux-arm64-gnu: 1.33.0
+      lightningcss-linux-arm64-musl: 1.33.0
+      lightningcss-linux-x64-gnu: 1.33.0
+      lightningcss-linux-x64-musl: 1.33.0
+      lightningcss-win32-arm64-msvc: 1.33.0
+      lightningcss-win32-x64-msvc: 1.33.0
+
+  lines-and-columns@1.2.4: {}
+
+  loupe@3.2.1: {}
 
-  path-scurry@2.0.0:
-    dependencies:
-      lru-cache: 11.1.0
-      minipass: 7.1.2
+  lru-cache@11.1.0: {}
 
-  pathe@2.0.3: {}
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
 
-  pathval@2.0.0: {}
+  lz-string@1.5.0: {}
 
-  perfect-debounce@1.0.0: {}
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.6.0
 
-  picocolors@1.1.1: {}
+  magic-string@1.4.3:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.6.0
 
-  picomatch@2.3.1: {}
+  mdn-data@2.0.28: {}
 
-  picomatch@4.0.2: {}
+  mdn-data@2.12.2: {}
 
-  pidtree@0.6.0: {}
+  mimic-function@5.0.1: {}
 
-  pkg-types@1.3.1:
-    dependencies:
-      confbox: 0.1.8
-      mlly: 1.7.4
-      pathe: 2.0.3
+  min-indent@1.0.1: {}
 
-  pkg-types@2.1.0:
+  minimatch@10.2.6:
     dependencies:
-      confbox: 0.2.2
-      exsolve: 1.0.5
-      pathe: 2.0.3
-
-  pluralize@8.0.0: {}
+      brace-expansion: 5.0.12
 
-  pnpm-workspace-yaml@0.3.1:
-    dependencies:
-      yaml: 2.7.1
+  minimist@1.2.8: {}
 
-  polished@4.3.1:
-    dependencies:
-      '@babel/runtime': 7.27.1
+  minipass@7.1.3: {}
 
-  possible-typed-array-names@1.1.0: {}
+  modern-tar@0.8.6: {}
 
-  postcss-calc@10.1.1(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-      postcss-selector-parser: 7.1.0
-      postcss-value-parser: 4.2.0
+  mri@1.2.0: {}
 
-  postcss-colormin@7.0.2(postcss@8.5.3):
-    dependencies:
-      browserslist: 4.24.5
-      caniuse-api: 3.0.0
-      colord: 2.9.3
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
+  mrmime@2.0.1: {}
 
-  postcss-convert-values@7.0.4(postcss@8.5.3):
-    dependencies:
-      browserslist: 4.24.5
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
+  ms@2.1.3: {}
 
-  postcss-discard-comments@7.0.3(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-      postcss-selector-parser: 6.1.2
+  nanoid@3.3.20: {}
 
-  postcss-discard-duplicates@7.0.1(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
+  node-fetch-native@1.6.6: {}
 
-  postcss-discard-empty@7.0.0(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
+  node-fetch-native@1.6.7: {}
 
-  postcss-discard-overridden@7.0.0(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
+  node-releases@2.0.19: {}
 
-  postcss-merge-longhand@7.0.4(postcss@8.5.3):
+  nth-check@2.1.1:
     dependencies:
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
-      stylehacks: 7.0.4(postcss@8.5.3)
+      boolbase: 1.0.0
 
-  postcss-merge-rules@7.0.4(postcss@8.5.3):
-    dependencies:
-      browserslist: 4.24.5
-      caniuse-api: 3.0.0
-      cssnano-utils: 5.0.0(postcss@8.5.3)
-      postcss: 8.5.3
-      postcss-selector-parser: 6.1.2
+  obug@3.0.0: {}
 
-  postcss-minify-font-values@7.0.0(postcss@8.5.3):
+  ofetch@1.4.1:
     dependencies:
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
+      destr: 2.0.5
+      node-fetch-native: 1.6.6
+      ufo: 1.6.1
 
-  postcss-minify-gradients@7.0.0(postcss@8.5.3):
+  ofetch@1.5.1:
     dependencies:
-      colord: 2.9.3
-      cssnano-utils: 5.0.0(postcss@8.5.3)
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
+      destr: 2.0.5
+      node-fetch-native: 1.6.7
+      ufo: 1.6.1
 
-  postcss-minify-params@7.0.2(postcss@8.5.3):
-    dependencies:
-      browserslist: 4.24.5
-      cssnano-utils: 5.0.0(postcss@8.5.3)
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
+  ohash@2.0.11: {}
 
-  postcss-minify-selectors@7.0.4(postcss@8.5.3):
+  onetime@7.0.0:
     dependencies:
-      cssesc: 3.0.0
-      postcss: 8.5.3
-      postcss-selector-parser: 6.1.2
+      mimic-function: 5.0.1
 
-  postcss-nested@7.0.2(postcss@8.5.3):
+  open@10.2.0:
     dependencies:
-      postcss: 8.5.3
-      postcss-selector-parser: 7.1.0
+      default-browser: 5.2.1
+      define-lazy-prop: 3.0.0
+      is-inside-container: 1.0.0
+      wsl-utils: 0.1.0
 
-  postcss-normalize-charset@7.0.0(postcss@8.5.3):
+  oxc-parser@0.127.0:
     dependencies:
-      postcss: 8.5.3
+      '@oxc-project/types': 0.127.0
+    optionalDependencies:
+      '@oxc-parser/binding-android-arm-eabi': 0.127.0
+      '@oxc-parser/binding-android-arm64': 0.127.0
+      '@oxc-parser/binding-darwin-arm64': 0.127.0
+      '@oxc-parser/binding-darwin-x64': 0.127.0
+      '@oxc-parser/binding-freebsd-x64': 0.127.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.127.0
+      '@oxc-parser/binding-linux-arm-musleabihf': 0.127.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.127.0
+      '@oxc-parser/binding-linux-ppc64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-riscv64-musl': 0.127.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.127.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-x64-musl': 0.127.0
+      '@oxc-parser/binding-openharmony-arm64': 0.127.0
+      '@oxc-parser/binding-wasm32-wasi': 0.127.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.127.0
+      '@oxc-parser/binding-win32-ia32-msvc': 0.127.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.127.0
+
+  oxc-resolver@11.21.2:
+    optionalDependencies:
+      '@oxc-resolver/binding-android-arm-eabi': 11.21.2
+      '@oxc-resolver/binding-android-arm64': 11.21.2
+      '@oxc-resolver/binding-darwin-arm64': 11.21.2
+      '@oxc-resolver/binding-darwin-x64': 11.21.2
+      '@oxc-resolver/binding-freebsd-x64': 11.21.2
+      '@oxc-resolver/binding-linux-arm-gnueabihf': 11.21.2
+      '@oxc-resolver/binding-linux-arm-musleabihf': 11.21.2
+      '@oxc-resolver/binding-linux-arm64-gnu': 11.21.2
+      '@oxc-resolver/binding-linux-arm64-musl': 11.21.2
+      '@oxc-resolver/binding-linux-ppc64-gnu': 11.21.2
+      '@oxc-resolver/binding-linux-riscv64-gnu': 11.21.2
+      '@oxc-resolver/binding-linux-riscv64-musl': 11.21.2
+      '@oxc-resolver/binding-linux-s390x-gnu': 11.21.2
+      '@oxc-resolver/binding-linux-x64-gnu': 11.21.2
+      '@oxc-resolver/binding-linux-x64-musl': 11.21.2
+      '@oxc-resolver/binding-openharmony-arm64': 11.21.2
+      '@oxc-resolver/binding-wasm32-wasi': 11.21.2
+      '@oxc-resolver/binding-win32-arm64-msvc': 11.21.2
+      '@oxc-resolver/binding-win32-x64-msvc': 11.21.2
+
+  oxfmt@0.74.0(vite-plus@1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)):
+    dependencies:
+      tinypool: 2.2.0
+    optionalDependencies:
+      '@oxfmt/binding-android-arm-eabi': 0.74.0
+      '@oxfmt/binding-android-arm64': 0.74.0
+      '@oxfmt/binding-darwin-arm64': 0.74.0
+      '@oxfmt/binding-darwin-x64': 0.74.0
+      '@oxfmt/binding-freebsd-x64': 0.74.0
+      '@oxfmt/binding-linux-arm-gnueabihf': 0.74.0
+      '@oxfmt/binding-linux-arm-musleabihf': 0.74.0
+      '@oxfmt/binding-linux-arm64-gnu': 0.74.0
+      '@oxfmt/binding-linux-arm64-musl': 0.74.0
+      '@oxfmt/binding-linux-ppc64-gnu': 0.74.0
+      '@oxfmt/binding-linux-riscv64-gnu': 0.74.0
+      '@oxfmt/binding-linux-riscv64-musl': 0.74.0
+      '@oxfmt/binding-linux-s390x-gnu': 0.74.0
+      '@oxfmt/binding-linux-x64-gnu': 0.74.0
+      '@oxfmt/binding-linux-x64-musl': 0.74.0
+      '@oxfmt/binding-openharmony-arm64': 0.74.0
+      '@oxfmt/binding-win32-arm64-msvc': 0.74.0
+      '@oxfmt/binding-win32-ia32-msvc': 0.74.0
+      '@oxfmt/binding-win32-x64-msvc': 0.74.0
+      vite-plus: 1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)
+
+  oxlint-tsgolint@7.0.2004:
+    optionalDependencies:
+      '@oxlint-tsgolint/darwin-arm64': 7.0.2004
+      '@oxlint-tsgolint/darwin-x64': 7.0.2004
+      '@oxlint-tsgolint/linux-arm64': 7.0.2004
+      '@oxlint-tsgolint/linux-x64': 7.0.2004
+      '@oxlint-tsgolint/win32-arm64': 7.0.2004
+      '@oxlint-tsgolint/win32-x64': 7.0.2004
+
+  oxlint@1.89.0(oxlint-tsgolint@7.0.2004)(vite-plus@1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)):
+    optionalDependencies:
+      '@oxlint/binding-android-arm-eabi': 1.89.0
+      '@oxlint/binding-android-arm64': 1.89.0
+      '@oxlint/binding-darwin-arm64': 1.89.0
+      '@oxlint/binding-darwin-x64': 1.89.0
+      '@oxlint/binding-freebsd-x64': 1.89.0
+      '@oxlint/binding-linux-arm-gnueabihf': 1.89.0
+      '@oxlint/binding-linux-arm-musleabihf': 1.89.0
+      '@oxlint/binding-linux-arm64-gnu': 1.89.0
+      '@oxlint/binding-linux-arm64-musl': 1.89.0
+      '@oxlint/binding-linux-ppc64-gnu': 1.89.0
+      '@oxlint/binding-linux-riscv64-gnu': 1.89.0
+      '@oxlint/binding-linux-riscv64-musl': 1.89.0
+      '@oxlint/binding-linux-s390x-gnu': 1.89.0
+      '@oxlint/binding-linux-x64-gnu': 1.89.0
+      '@oxlint/binding-linux-x64-musl': 1.89.0
+      '@oxlint/binding-openharmony-arm64': 1.89.0
+      '@oxlint/binding-win32-arm64-msvc': 1.89.0
+      '@oxlint/binding-win32-ia32-msvc': 1.89.0
+      '@oxlint/binding-win32-x64-msvc': 1.89.0
+      oxlint-tsgolint: 7.0.2004
+      vite-plus: 1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)
+
+  package-manager-detector@1.9.0: {}
 
-  postcss-normalize-display-values@7.0.0(postcss@8.5.3):
+  parent-module@1.0.1:
     dependencies:
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
+      callsites: 3.1.0
 
-  postcss-normalize-positions@7.0.0(postcss@8.5.3):
+  parse-json@5.2.0:
     dependencies:
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
+      '@babel/code-frame': 7.29.7
+      error-ex: 1.3.4
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
 
-  postcss-normalize-repeat-style@7.0.0(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
+  path-browserify@1.0.1:
+    optional: true
 
-  postcss-normalize-string@7.0.0(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
+  path-parse@1.0.7: {}
 
-  postcss-normalize-timing-functions@7.0.0(postcss@8.5.3):
+  path-scurry@2.0.2:
     dependencies:
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
+      lru-cache: 11.1.0
+      minipass: 7.1.3
 
-  postcss-normalize-unicode@7.0.2(postcss@8.5.3):
-    dependencies:
-      browserslist: 4.24.5
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
+  pathe@2.0.3: {}
 
-  postcss-normalize-url@7.0.0(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
+  pathval@2.0.0: {}
 
-  postcss-normalize-whitespace@7.0.0(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
+  perfect-debounce@2.1.0: {}
 
-  postcss-ordered-values@7.0.1(postcss@8.5.3):
-    dependencies:
-      cssnano-utils: 5.0.0(postcss@8.5.3)
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
+  picocolors@1.1.1: {}
 
-  postcss-reduce-initial@7.0.2(postcss@8.5.3):
-    dependencies:
-      browserslist: 4.24.5
-      caniuse-api: 3.0.0
-      postcss: 8.5.3
+  picomatch@4.0.7: {}
 
-  postcss-reduce-transforms@7.0.0(postcss@8.5.3):
+  pkg-types@2.4.0:
     dependencies:
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
+      confbox: 0.3.1
+      exsolve: 1.1.3
+      pathe: 2.0.3
 
-  postcss-selector-parser@6.1.2:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
+  playwright-core@1.64.1: {}
 
-  postcss-selector-parser@7.1.0:
+  playwright@1.64.1:
     dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
+      playwright-core: 1.64.1
 
-  postcss-svgo@7.0.1(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
-      svgo: 3.3.2
+  pngjs@7.0.0: {}
 
-  postcss-unique-selectors@7.0.3(postcss@8.5.3):
+  pnpm-workspace-yaml@1.9.1:
     dependencies:
-      postcss: 8.5.3
-      postcss-selector-parser: 6.1.2
+      yaml: 2.9.1
 
-  postcss-value-parser@4.2.0: {}
-
-  postcss@8.5.3:
+  postcss@8.5.31:
     dependencies:
-      nanoid: 3.3.11
+      nanoid: 3.3.20
       picocolors: 1.1.1
-      source-map-js: 1.2.1
-
-  prelude-ls@1.2.1: {}
-
-  pretty-bytes@6.1.1: {}
+      source-map-js: 1.2.2
 
   pretty-format@27.5.1:
     dependencies:
@@ -8138,33 +5896,24 @@ snapshots:
       ansi-styles: 5.2.0
       react-is: 17.0.2
 
-  process@0.11.10: {}
-
   punycode@2.3.1: {}
 
-  quansync@0.2.10: {}
+  quansync@1.0.0: {}
 
-  queue-microtask@1.2.3: {}
-
-  rc9@2.1.2:
+  rc9@3.1.0:
     dependencies:
-      defu: 6.1.4
+      defu: 6.1.7
       destr: 2.0.5
 
-  react-confetti@6.4.0(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-      tween-functions: 1.2.0
-
-  react-docgen-typescript@2.2.2(typescript@5.8.3):
+  react-docgen-typescript@2.2.2(typescript@7.0.2):
     dependencies:
-      typescript: 5.8.3
+      typescript: 7.0.2
 
-  react-docgen@7.1.1:
+  react-docgen@8.0.4:
     dependencies:
-      '@babel/core': 7.27.1
-      '@babel/traverse': 7.27.1
-      '@babel/types': 7.27.1
+      '@babel/core': 7.29.7
+      '@babel/traverse': 7.29.10
+      '@babel/types': 7.29.11
       '@types/babel__core': 7.20.5
       '@types/babel__traverse': 7.20.7
       '@types/doctrine': 0.0.9
@@ -8175,49 +5924,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  react-dom@19.1.0(react@19.1.0):
+  react-dom@19.3.1(react@19.3.1):
     dependencies:
-      react: 19.1.0
-      scheduler: 0.26.0
+      react: 19.3.1
+      scheduler: 0.28.0
 
   react-is@17.0.2: {}
 
-  react-refresh@0.17.0: {}
-
-  react-remove-scroll-bar@2.3.8(@types/react@19.1.4)(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-      react-style-singleton: 2.2.3(@types/react@19.1.4)(react@19.1.0)
-      tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 19.1.4
-
-  react-remove-scroll@2.6.3(@types/react@19.1.4)(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-      react-remove-scroll-bar: 2.3.8(@types/react@19.1.4)(react@19.1.0)
-      react-style-singleton: 2.2.3(@types/react@19.1.4)(react@19.1.0)
-      tslib: 2.8.1
-      use-callback-ref: 1.3.3(@types/react@19.1.4)(react@19.1.0)
-      use-sidecar: 1.1.3(@types/react@19.1.4)(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.4
-
-  react-style-singleton@2.2.3(@types/react@19.1.4)(react@19.1.0):
-    dependencies:
-      get-nonce: 1.0.1
-      react: 19.1.0
-      tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 19.1.4
-
-  react@19.1.0: {}
+  react@19.3.1: {}
 
-  readdirp@3.6.0:
-    dependencies:
-      picomatch: 2.3.1
-
-  readdirp@4.1.2: {}
+  readdirp@5.1.1: {}
 
   recast@0.23.11:
     dependencies:
@@ -8232,17 +5948,13 @@ snapshots:
       indent-string: 4.0.0
       strip-indent: 3.0.0
 
-  regexp-tree@0.1.27: {}
-
-  regjsparser@0.12.0:
-    dependencies:
-      jsesc: 3.0.2
-
   require-from-string@2.0.2: {}
 
+  reselect@5.3.0: {}
+
   resolve-from@4.0.0: {}
 
-  resolve-pkg-maps@1.0.0: {}
+  resolve-from@5.0.0: {}
 
   resolve@1.22.10:
     dependencies:
@@ -8255,18 +5967,6 @@ snapshots:
       onetime: 7.0.0
       signal-exit: 4.1.0
 
-  reusify@1.1.0: {}
-
-  rfdc@1.4.1: {}
-
-  rollup-plugin-dts@6.2.1(rollup@4.40.1)(typescript@5.8.3):
-    dependencies:
-      magic-string: 0.30.17
-      rollup: 4.40.1
-      typescript: 5.8.3
-    optionalDependencies:
-      '@babel/code-frame': 7.27.1
-
   rollup@4.40.1:
     dependencies:
       '@types/estree': 1.0.7
@@ -8295,117 +5995,82 @@ snapshots:
 
   run-applescript@7.0.0: {}
 
-  run-parallel@1.2.0:
-    dependencies:
-      queue-microtask: 1.2.3
-
-  safe-regex-test@1.1.0:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      is-regex: 1.2.1
+  sax@1.6.1: {}
 
-  scheduler@0.26.0: {}
+  scheduler@0.28.0: {}
 
   scule@1.3.0: {}
 
   semver@6.3.1: {}
 
-  semver@7.5.4:
-    dependencies:
-      lru-cache: 6.0.0
-
-  semver@7.7.1: {}
-
-  semver@7.7.2: {}
-
-  set-function-length@1.2.2:
-    dependencies:
-      define-data-property: 1.1.4
-      es-errors: 1.3.0
-      function-bind: 1.1.2
-      get-intrinsic: 1.3.0
-      gopd: 1.2.0
-      has-property-descriptors: 1.0.2
-
-  shebang-command@2.0.0:
-    dependencies:
-      shebang-regex: 3.0.0
-
-  shebang-regex@3.0.0: {}
+  semver@7.8.5: {}
 
   signal-exit@4.1.0: {}
 
-  simple-git-hooks@2.13.0: {}
+  simple-git-hooks@2.14.0: {}
 
-  sirv@3.0.1:
+  sirv@3.0.2:
     dependencies:
       '@polka/url': 1.0.0-next.29
       mrmime: 2.0.1
       totalist: 3.0.1
 
-  slice-ansi@5.0.0:
-    dependencies:
-      ansi-styles: 6.2.1
-      is-fullwidth-code-point: 4.0.0
-
-  slice-ansi@7.1.0:
+  sonner@2.0.8(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1):
     dependencies:
-      ansi-styles: 6.2.1
-      is-fullwidth-code-point: 5.0.0
-
-  sonner@2.0.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+      react: 19.3.1
+      react-dom: 19.3.1(react@19.3.1)
+    optionalDependencies:
+      '@types/react': 19.3.0
 
-  source-map-js@1.2.1: {}
+  source-map-js@1.2.2: {}
 
   source-map@0.6.1: {}
 
-  sprintf-js@1.0.3: {}
-
-  stable-hash@0.0.5: {}
-
   std-env@3.9.0: {}
 
-  storybook@8.6.14:
+  std-env@4.3.0: {}
+
+  storybook@10.6.3(@types/react@19.3.0)(react@19.3.1)(vite-plus@1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)):
     dependencies:
-      '@storybook/core': 8.6.14(storybook@8.6.14)
+      '@storybook/global': 5.0.0
+      '@storybook/icons': 2.2.0(react@19.3.1)
+      '@testing-library/dom': 10.4.2
+      '@testing-library/jest-dom': 6.9.1
+      '@testing-library/user-event': 14.6.8(@testing-library/dom@10.4.2)
+      '@vitest/expect': 3.2.4
+      '@vitest/spy': 3.2.4
+      '@webcontainer/env': 1.1.1
+      esbuild: 0.28.2
+      jsonc-parser: 3.3.1
+      open: 10.2.0
+      oxc-parser: 0.127.0
+      oxc-resolver: 11.21.2
+      recast: 0.23.11
+      semver: 7.8.5
+      use-sync-external-store: 1.7.0(react@19.3.1)
+      ws: 8.22.0
+    optionalDependencies:
+      '@types/react': 19.3.0
+      vite-plus: 1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)
     transitivePeerDependencies:
       - bufferutil
-      - supports-color
+      - react
       - utf-8-validate
 
-  string-argv@0.3.2: {}
-
-  string-ts@2.2.1: {}
-
-  string-width@4.2.3:
-    dependencies:
-      emoji-regex: 8.0.0
-      is-fullwidth-code-point: 3.0.0
-      strip-ansi: 6.0.1
-
-  string-width@5.1.2:
-    dependencies:
-      eastasianwidth: 0.2.0
-      emoji-regex: 9.2.2
-      strip-ansi: 7.1.0
-
   string-width@7.2.0:
     dependencies:
       emoji-regex: 10.4.0
-      get-east-asian-width: 1.3.0
-      strip-ansi: 7.1.0
+      get-east-asian-width: 1.7.0
+      strip-ansi: 7.2.0
 
-  strip-ansi@6.0.1:
+  string-width@8.3.0:
     dependencies:
-      ansi-regex: 5.0.1
+      get-east-asian-width: 1.7.0
+      strip-ansi: 7.2.0
 
-  strip-ansi@7.1.0:
+  strip-ansi@7.2.0:
     dependencies:
-      ansi-regex: 6.1.0
+      ansi-regex: 6.4.0
 
   strip-bom@3.0.0: {}
 
@@ -8417,75 +6082,66 @@ snapshots:
     dependencies:
       min-indent: 1.0.1
 
-  strip-json-comments@3.1.1: {}
+  supports-preserve-symlinks-flag@1.0.0: {}
 
-  stylehacks@7.0.4(postcss@8.5.3):
+  svgo@4.1.0:
     dependencies:
-      browserslist: 4.24.5
-      postcss: 8.5.3
-      postcss-selector-parser: 6.1.2
+      commander: 11.1.0
+      css-select: 6.0.0
+      css-tree: 3.1.0
+      css-what: 7.0.0
+      csso: 5.0.5
+      picocolors: 1.1.1
+      sax: 1.6.1
 
-  supports-color@7.2.0:
-    dependencies:
-      has-flag: 4.0.0
+  tagged-tag@1.0.0: {}
 
-  supports-color@8.1.1:
-    dependencies:
-      has-flag: 4.0.0
+  tailwind-merge@3.7.0: {}
 
-  supports-preserve-symlinks-flag@1.0.0: {}
+  tailwindcss@4.3.3: {}
 
-  svgo@3.3.2:
-    dependencies:
-      '@trysound/sax': 0.2.0
-      commander: 7.2.0
-      css-select: 5.1.0
-      css-tree: 2.3.1
-      css-what: 6.1.0
-      csso: 5.0.5
-      picocolors: 1.1.1
+  tapable@2.3.3: {}
 
-  synckit@0.9.2:
+  taze@21.3.0:
     dependencies:
-      '@pkgr/core': 0.1.2
-      tslib: 2.8.1
-
-  tailwind-merge@3.3.0: {}
+      '@antfu/ni': 30.6.0
+      '@henrygd/queue': 1.2.0
+      cac: 7.1.0
+      obug: 3.0.0
+      ofetch: 1.5.1
+      package-manager-detector: 1.9.0
+      pathe: 2.0.3
+      pnpm-workspace-yaml: 1.9.1
+      restore-cursor: 5.1.0
+      tinyexec: 1.3.1
+      tinyglobby: 0.2.17
+      unconfig: 7.5.0
+      verkit: 0.5.0
+      yaml: 2.9.1
 
   tiny-invariant@1.3.3: {}
 
-  tinyexec@0.3.2: {}
+  tinybench@6.2.2: {}
 
-  tinyexec@1.0.1: {}
+  tinyexec@1.3.1: {}
 
-  tinyglobby@0.2.13:
+  tinyglobby@0.2.17:
     dependencies:
-      fdir: 6.4.4(picomatch@4.0.2)
-      picomatch: 4.0.2
+      fdir: 6.5.0(picomatch@4.0.7)
+      picomatch: 4.0.7
 
-  tinyrainbow@1.2.0: {}
+  tinypool@2.2.0: {}
 
-  tinyspy@3.0.2: {}
-
-  to-regex-range@5.0.1:
-    dependencies:
-      is-number: 7.0.0
+  tinyrainbow@2.0.0: {}
 
-  totalist@3.0.1: {}
+  tinyrainbow@3.2.0: {}
 
-  ts-api-utils@2.1.0(typescript@5.8.3):
-    dependencies:
-      typescript: 5.8.3
+  tinyspy@4.0.6: {}
 
-  ts-declaration-location@1.0.7(typescript@5.8.3):
-    dependencies:
-      picomatch: 4.0.2
-      typescript: 5.8.3
+  totalist@3.0.1: {}
 
   ts-dedent@2.2.0: {}
 
-  ts-pattern@5.7.0: {}
-
   tsconfig-paths@4.2.0:
     dependencies:
       json5: 2.2.3
@@ -8494,158 +6150,63 @@ snapshots:
 
   tslib@2.8.1: {}
 
-  tsx@4.19.4:
+  tsx@4.23.15:
     dependencies:
-      esbuild: 0.25.3
-      get-tsconfig: 4.10.0
+      esbuild: 0.28.2
     optionalDependencies:
       fsevents: 2.3.3
 
-  tween-functions@1.2.0: {}
-
-  type-check@0.4.0:
-    dependencies:
-      prelude-ls: 1.2.1
-
-  type-fest@2.19.0: {}
-
-  type-fest@4.41.0: {}
-
-  typescript-eslint@8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3):
+  type-fest@5.10.0:
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.31.1(@typescript-eslint/parser@8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@typescript-eslint/parser': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.31.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      eslint: 9.27.0(jiti@2.4.2)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
+      tagged-tag: 1.0.0
 
-  typescript@5.8.2: {}
-
-  typescript@5.8.3: {}
+  typescript@7.0.2:
+    optionalDependencies:
+      '@typescript/typescript-aix-ppc64': 7.0.2
+      '@typescript/typescript-darwin-arm64': 7.0.2
+      '@typescript/typescript-darwin-x64': 7.0.2
+      '@typescript/typescript-freebsd-arm64': 7.0.2
+      '@typescript/typescript-freebsd-x64': 7.0.2
+      '@typescript/typescript-linux-arm': 7.0.2
+      '@typescript/typescript-linux-arm64': 7.0.2
+      '@typescript/typescript-linux-loong64': 7.0.2
+      '@typescript/typescript-linux-mips64el': 7.0.2
+      '@typescript/typescript-linux-ppc64': 7.0.2
+      '@typescript/typescript-linux-riscv64': 7.0.2
+      '@typescript/typescript-linux-s390x': 7.0.2
+      '@typescript/typescript-linux-x64': 7.0.2
+      '@typescript/typescript-netbsd-arm64': 7.0.2
+      '@typescript/typescript-netbsd-x64': 7.0.2
+      '@typescript/typescript-openbsd-arm64': 7.0.2
+      '@typescript/typescript-openbsd-x64': 7.0.2
+      '@typescript/typescript-sunos-x64': 7.0.2
+      '@typescript/typescript-win32-arm64': 7.0.2
+      '@typescript/typescript-win32-x64': 7.0.2
 
   ufo@1.6.1: {}
 
-  unbuild@3.5.0(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3)):
-    dependencies:
-      '@rollup/plugin-alias': 5.1.1(rollup@4.40.1)
-      '@rollup/plugin-commonjs': 28.0.3(rollup@4.40.1)
-      '@rollup/plugin-json': 6.1.0(rollup@4.40.1)
-      '@rollup/plugin-node-resolve': 16.0.1(rollup@4.40.1)
-      '@rollup/plugin-replace': 6.0.2(rollup@4.40.1)
-      '@rollup/pluginutils': 5.1.4(rollup@4.40.1)
-      citty: 0.1.6
-      consola: 3.4.2
-      defu: 6.1.4
-      esbuild: 0.25.3
-      fix-dts-default-cjs-exports: 1.0.1
-      hookable: 5.5.3
-      jiti: 2.4.2
-      magic-string: 0.30.17
-      mkdist: 2.3.0(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3))
-      mlly: 1.7.4
-      pathe: 2.0.3
-      pkg-types: 2.1.0
-      pretty-bytes: 6.1.1
-      rollup: 4.40.1
-      rollup-plugin-dts: 6.2.1(rollup@4.40.1)(typescript@5.8.3)
-      scule: 1.3.0
-      tinyglobby: 0.2.13
-      untyped: 2.0.0
-    optionalDependencies:
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - sass
-      - vue
-      - vue-sfc-transformer
-      - vue-tsc
-
-  unconfig@7.3.2:
+  unconfig-core@7.5.0:
     dependencies:
-      '@quansync/fs': 0.1.3
-      defu: 6.1.4
-      jiti: 2.4.2
-      quansync: 0.2.10
-
-  undici-types@6.21.0: {}
+      '@quansync/fs': 1.1.0
+      quansync: 1.0.0
 
-  universalify@2.0.1: {}
-
-  unocss-preset-animations@1.2.1(@unocss/preset-wind3@66.1.2)(unocss@66.1.2(postcss@8.5.3)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.3))):
+  unconfig@7.5.0:
     dependencies:
-      unocss: 66.1.2(postcss@8.5.3)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.3))
-    optionalDependencies:
-      '@unocss/preset-wind3': 66.1.2
-
-  unocss@66.1.2(postcss@8.5.3)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.3)):
-    dependencies:
-      '@unocss/astro': 66.1.2(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.3))
-      '@unocss/cli': 66.1.2
-      '@unocss/core': 66.1.2
-      '@unocss/postcss': 66.1.2(postcss@8.5.3)
-      '@unocss/preset-attributify': 66.1.2
-      '@unocss/preset-icons': 66.1.2
-      '@unocss/preset-mini': 66.1.2
-      '@unocss/preset-tagify': 66.1.2
-      '@unocss/preset-typography': 66.1.2
-      '@unocss/preset-uno': 66.1.2
-      '@unocss/preset-web-fonts': 66.1.2
-      '@unocss/preset-wind': 66.1.2
-      '@unocss/preset-wind3': 66.1.2
-      '@unocss/preset-wind4': 66.1.2
-      '@unocss/transformer-attributify-jsx': 66.1.2
-      '@unocss/transformer-compile-class': 66.1.2
-      '@unocss/transformer-directives': 66.1.2
-      '@unocss/transformer-variant-group': 66.1.2
-      '@unocss/vite': 66.1.2(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.3))
-    optionalDependencies:
-      vite: 6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1)
-    transitivePeerDependencies:
-      - postcss
-      - supports-color
-      - vue
+      '@quansync/fs': 1.1.0
+      defu: 6.1.7
+      jiti: 2.7.0
+      quansync: 1.0.0
+      unconfig-core: 7.5.0
 
-  unplugin-utils@0.2.4:
-    dependencies:
-      pathe: 2.0.3
-      picomatch: 4.0.2
+  undici-types@7.24.6: {}
 
-  unplugin@1.16.1:
+  unplugin@2.3.11:
     dependencies:
-      acorn: 8.14.1
+      '@jridgewell/remapping': 2.3.5
+      acorn: 8.19.0
+      picomatch: 4.0.7
       webpack-virtual-modules: 0.6.2
 
-  unrs-resolver@1.7.2:
-    dependencies:
-      napi-postinstall: 0.2.3
-    optionalDependencies:
-      '@unrs/resolver-binding-darwin-arm64': 1.7.2
-      '@unrs/resolver-binding-darwin-x64': 1.7.2
-      '@unrs/resolver-binding-freebsd-x64': 1.7.2
-      '@unrs/resolver-binding-linux-arm-gnueabihf': 1.7.2
-      '@unrs/resolver-binding-linux-arm-musleabihf': 1.7.2
-      '@unrs/resolver-binding-linux-arm64-gnu': 1.7.2
-      '@unrs/resolver-binding-linux-arm64-musl': 1.7.2
-      '@unrs/resolver-binding-linux-ppc64-gnu': 1.7.2
-      '@unrs/resolver-binding-linux-riscv64-gnu': 1.7.2
-      '@unrs/resolver-binding-linux-riscv64-musl': 1.7.2
-      '@unrs/resolver-binding-linux-s390x-gnu': 1.7.2
-      '@unrs/resolver-binding-linux-x64-gnu': 1.7.2
-      '@unrs/resolver-binding-linux-x64-musl': 1.7.2
-      '@unrs/resolver-binding-wasm32-wasi': 1.7.2
-      '@unrs/resolver-binding-win32-arm64-msvc': 1.7.2
-      '@unrs/resolver-binding-win32-ia32-msvc': 1.7.2
-      '@unrs/resolver-binding-win32-x64-msvc': 1.7.2
-
-  untyped@2.0.0:
-    dependencies:
-      citty: 0.1.6
-      defu: 6.1.4
-      jiti: 2.4.2
-      knitwork: 1.2.0
-      scule: 1.3.0
-
   update-browserslist-db@1.1.3(browserslist@4.24.5):
     dependencies:
       browserslist: 4.24.5
@@ -8656,130 +6217,202 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
-  use-callback-ref@1.3.3(@types/react@19.1.4)(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-      tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 19.1.4
-
-  use-sidecar@1.1.3(@types/react@19.1.4)(react@19.1.0):
-    dependencies:
-      detect-node-es: 1.1.0
-      react: 19.1.0
-      tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 19.1.4
-
-  util-deprecate@1.0.2: {}
-
-  util@0.12.5:
-    dependencies:
-      inherits: 2.0.4
-      is-arguments: 1.2.0
-      is-generator-function: 1.1.0
-      is-typed-array: 1.1.15
-      which-typed-array: 1.1.19
-
-  uuid@9.0.1: {}
-
-  vite-plugin-dts@4.5.4(@types/node@22.15.18)(rollup@4.40.1)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1)):
-    dependencies:
-      '@microsoft/api-extractor': 7.52.8(@types/node@22.15.18)
-      '@rollup/pluginutils': 5.1.4(rollup@4.40.1)
-      '@volar/typescript': 2.4.14
-      '@vue/language-core': 2.2.0(typescript@5.8.3)
-      compare-versions: 6.1.1
-      debug: 4.4.1
-      kolorist: 1.8.0
-      local-pkg: 1.1.1
-      magic-string: 0.30.17
-      typescript: 5.8.3
+  use-sync-external-store@1.7.0(react@19.3.1):
+    dependencies:
+      react: 19.3.1
+
+  verkit@0.5.0: {}
+
+  vite-plus@1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1):
+    dependencies:
+      '@oxc-project/runtime': 0.155.0
+      '@oxc-project/types': 0.155.0
+      '@oxlint/plugins': 1.89.0
+      '@vitest/browser': 5.0.5(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))(vitest@5.0.5)
+      '@vitest/browser-preview': 5.0.5(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))(vitest@5.0.5)
+      '@vitest/mocker': 5.0.5(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))
+      '@vitest/pretty-format': 5.0.5
+      '@vitest/snapshot': 5.0.5
+      '@vitest/spy': 5.0.5
+      '@vitest/utils': 5.0.5
+      oxfmt: 0.74.0(vite-plus@1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))
+      oxlint: 1.89.0(oxlint-tsgolint@7.0.2004)(vite-plus@1.4.0(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(playwright@1.64.1)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))
+      oxlint-tsgolint: 7.0.2004
+      vite: '@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)'
+      vitest: 5.0.5(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/browser-preview@5.0.5)(@vitest/ui@5.0.5)(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))
     optionalDependencies:
-      vite: 6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1)
+      '@vitest/browser-playwright': 5.0.5(playwright@1.64.1)(vite@6.4.5(@types/node@24.19.2)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.15)(yaml@2.9.1))(vitest@5.0.5)
+      '@voidzero-dev/vite-plus-darwin-arm64': 1.4.0
+      '@voidzero-dev/vite-plus-darwin-x64': 1.4.0
+      '@voidzero-dev/vite-plus-linux-arm64-gnu': 1.4.0
+      '@voidzero-dev/vite-plus-linux-arm64-musl': 1.4.0
+      '@voidzero-dev/vite-plus-linux-x64-gnu': 1.4.0
+      '@voidzero-dev/vite-plus-linux-x64-musl': 1.4.0
+      '@voidzero-dev/vite-plus-win32-arm64-msvc': 1.4.0
+      '@voidzero-dev/vite-plus-win32-x64-msvc': 1.4.0
+      playwright: 1.64.1
     transitivePeerDependencies:
+      - '@arethetypeswrong/core'
+      - '@astrojs/compiler-rs'
+      - '@edge-runtime/vm'
+      - '@opentelemetry/api'
       - '@types/node'
-      - rollup
-      - supports-color
+      - '@typescript/native-preview'
+      - '@vitejs/devtools'
+      - '@vitest/coverage-istanbul'
+      - '@vitest/coverage-v8'
+      - '@vitest/ui'
+      - '@volar/typescript'
+      - '@vue/language-core'
+      - bufferutil
+      - esbuild
+      - happy-dom
+      - jiti
+      - jsdom
+      - less
+      - msw
+      - publint
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - svelte
+      - terser
+      - tsx
+      - typescript
+      - unplugin-unused
+      - unrun
+      - utf-8-validate
+      - vue-tsc
+      - yaml
 
-  vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(tsx@4.19.4)(yaml@2.7.1):
+  vite@6.4.5(@types/node@24.19.2)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.15)(yaml@2.9.1):
     dependencies:
-      esbuild: 0.25.3
-      fdir: 6.4.4(picomatch@4.0.2)
-      picomatch: 4.0.2
-      postcss: 8.5.3
+      esbuild: 0.25.4
+      fdir: 6.5.0(picomatch@4.0.7)
+      picomatch: 4.0.7
+      postcss: 8.5.31
       rollup: 4.40.1
-      tinyglobby: 0.2.13
+      tinyglobby: 0.2.17
     optionalDependencies:
-      '@types/node': 22.15.18
+      '@types/node': 24.19.2
       fsevents: 2.3.3
-      jiti: 2.4.2
-      tsx: 4.19.4
-      yaml: 2.7.1
+      jiti: 2.7.0
+      lightningcss: 1.33.0
+      tsx: 4.23.15
+      yaml: 2.9.1
 
-  vscode-uri@3.1.0: {}
-
-  vue-flow-layout@0.1.1(vue@3.5.13(typescript@5.8.3)):
-    dependencies:
-      vue: 3.5.13(typescript@5.8.3)
-
-  vue@3.5.13(typescript@5.8.3):
+  vitest-browser-react@2.3.0(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)(vitest@5.0.5):
     dependencies:
-      '@vue/compiler-dom': 3.5.13
-      '@vue/compiler-sfc': 3.5.13
-      '@vue/runtime-dom': 3.5.13
-      '@vue/server-renderer': 3.5.13(vue@3.5.13(typescript@5.8.3))
-      '@vue/shared': 3.5.13
+      react: 19.3.1
+      react-dom: 19.3.1(react@19.3.1)
+      vitest: 5.0.5(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/browser-preview@5.0.5)(@vitest/ui@5.0.5)(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))
     optionalDependencies:
-      typescript: 5.8.3
-
-  webpack-virtual-modules@0.6.2: {}
-
-  which-typed-array@1.1.19:
-    dependencies:
-      available-typed-arrays: 1.0.7
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      for-each: 0.3.5
-      get-proto: 1.0.1
-      gopd: 1.2.0
-      has-tostringtag: 1.0.2
-
-  which@2.0.2:
-    dependencies:
-      isexe: 2.0.0
+      '@types/react': 19.3.0
+      '@types/react-dom': 19.3.0(@types/react@19.3.0)
+
+  vitest@5.0.5(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/browser-preview@5.0.5)(@vitest/ui@5.0.5)(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)):
+    dependencies:
+      '@types/chai': 5.2.3
+      '@vitest/mocker': 5.0.5(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))
+      chai: 6.3.0
+      es-module-lexer: 2.3.2
+      expect-type: 1.4.0
+      magic-string: 1.4.3
+      obug: 3.0.0
+      picomatch: 4.0.7
+      std-env: 4.3.0
+      tinybench: 6.2.2
+      tinyexec: 1.3.1
+      tinyglobby: 0.2.17
+      vite: '@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)'
+      why-is-node-running: 3.2.1
+    optionalDependencies:
+      '@types/node': 24.19.2
+      '@vitest/browser-playwright': 5.0.5(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))(playwright@1.64.1)(vitest@5.0.5)
+      '@vitest/browser-preview': 5.0.5(@voidzero-dev/vite-plus-core@1.4.0(@types/node@24.19.2)(@volar/typescript@2.4.14(typescript@7.0.2))(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))(vitest@5.0.5)
+      '@vitest/ui': 5.0.5(vitest@5.0.5)
+    transitivePeerDependencies:
+      - msw
+
+  vitest@5.0.5(@types/node@24.19.2)(@vitest/browser-playwright@5.0.5)(@vitest/browser-preview@5.0.5)(@vitest/ui@5.0.5)(vite@6.4.5(@types/node@24.19.2)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.15)(yaml@2.9.1)):
+    dependencies:
+      '@types/chai': 5.2.3
+      '@vitest/mocker': 5.0.5(vite@6.4.5(@types/node@24.19.2)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.15)(yaml@2.9.1))
+      chai: 6.3.0
+      es-module-lexer: 2.3.2
+      expect-type: 1.4.0
+      magic-string: 1.4.3
+      obug: 3.0.0
+      picomatch: 4.0.7
+      std-env: 4.3.0
+      tinybench: 6.2.2
+      tinyexec: 1.3.1
+      tinyglobby: 0.2.17
+      vite: 6.4.5(@types/node@24.19.2)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.15)(yaml@2.9.1)
+      why-is-node-running: 3.2.1
+    optionalDependencies:
+      '@types/node': 24.19.2
+      '@vitest/browser-playwright': 5.0.5(playwright@1.64.1)(vite@6.4.5(@types/node@24.19.2)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.15)(yaml@2.9.1))(vitest@5.0.5)
+      '@vitest/browser-preview': 5.0.5(vite@6.4.5(@types/node@24.19.2)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.15)(yaml@2.9.1))(vitest@5.0.5)
+      '@vitest/ui': 5.0.5(vitest@5.0.5)
+    transitivePeerDependencies:
+      - msw
 
-  word-wrap@1.2.5: {}
+  vscode-uri@3.1.0:
+    optional: true
 
-  wrap-ansi@7.0.0:
-    dependencies:
-      ansi-styles: 4.3.0
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
+  webpack-virtual-modules@0.6.2: {}
 
-  wrap-ansi@8.1.0:
-    dependencies:
-      ansi-styles: 6.2.1
-      string-width: 5.1.2
-      strip-ansi: 7.1.0
+  why-is-node-running@3.2.1: {}
 
   wrap-ansi@9.0.0:
     dependencies:
       ansi-styles: 6.2.1
       string-width: 7.2.0
-      strip-ansi: 7.1.0
+      strip-ansi: 7.2.0
+
+  ws@8.22.0: {}
 
-  ws@8.18.2: {}
+  wsl-utils@0.1.0:
+    dependencies:
+      is-wsl: 3.1.0
+
+  y18n@5.0.8: {}
 
   yallist@3.1.1: {}
 
-  yallist@4.0.0: {}
+  yaml@2.9.1: {}
 
-  yaml-eslint-parser@1.3.0:
-    dependencies:
-      eslint-visitor-keys: 3.4.3
-      yaml: 2.7.1
+  yargs-parser@22.0.0: {}
 
-  yaml@2.7.1: {}
+  yargs@18.2.0:
+    dependencies:
+      cliui: 9.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      string-width: 8.3.0
+      y18n: 5.0.8
+      yargs-parser: 22.0.0
 
-  yocto-queue@0.1.0: {}
+  yuku-core@0.19.0:
+    dependencies:
+      '@yuku-toolchain/types': 0.19.0
+    optionalDependencies:
+      '@yuku-core/binding-android-arm64': 0.19.0
+      '@yuku-core/binding-darwin-arm64': 0.19.0
+      '@yuku-core/binding-darwin-x64': 0.19.0
+      '@yuku-core/binding-freebsd-x64': 0.19.0
+      '@yuku-core/binding-linux-arm-gnu': 0.19.0
+      '@yuku-core/binding-linux-arm-musl': 0.19.0
+      '@yuku-core/binding-linux-arm64-gnu': 0.19.0
+      '@yuku-core/binding-linux-arm64-musl': 0.19.0
+      '@yuku-core/binding-linux-x64-gnu': 0.19.0
+      '@yuku-core/binding-linux-x64-musl': 0.19.0
+      '@yuku-core/binding-win32-arm64': 0.19.0
+      '@yuku-core/binding-win32-x64': 0.19.0
+
+  yuku-parser@0.19.0:
+    dependencies:
+      '@yuku-toolchain/types': 0.19.0
+      yuku-core: 0.19.0
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 133a220..050460f 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -2,6 +2,61 @@ packages:
   - packages/*
   - playground
 
-onlyBuiltDependencies:
-  - esbuild
-  - simple-git-hooks
+catalogs:
+  cli:
+    '@commitlint/cli': ^21.2.4
+    '@commitlint/config-conventional': ^21.2.4
+    changelogen: ^0.6.2
+    simple-git-hooks: ^2.14.0
+    taze: ^21.3.0
+    tsx: ^4.23.15
+  figma:
+    '@figma/plugin-typings': ^1.142.0
+    '@figma/widget-typings': ^1.13.0
+  iconify:
+    '@iconify-json/mdi': ^1.2.3
+    '@iconify-json/tabler': ^1.2.42
+    '@iconify/tailwind4': ^1.2.3
+  react:
+    '@base-ui/react': 1.9.0
+    '@types/react': ^19.3.0
+    '@types/react-dom': ^19.3.0
+    '@vitejs/plugin-react': ^6.1.2
+    react: ^19.3.1
+    react-dom: ^19.3.1
+    sonner: ^2.0.8
+  runtime:
+    '@emmetio/math-expression': ^1.0.5
+    eventemitter3: ^5.0.4
+  storybook:
+    '@storybook/addon-docs': 10.6.3
+    '@storybook/react-vite': 10.6.3
+    storybook: 10.6.3
+  tailwind:
+    '@tailwindcss/vite': ^4.3.3
+    class-variance-authority: ^0.7.1
+    clsx: ^2.1.1
+    tailwind-merge: ^3.7.0
+    tailwindcss: ^4.3.3
+  test:
+    '@vitest/browser': 5.0.5
+    '@vitest/browser-playwright': 5.0.5
+    playwright: 1.64.1
+    vitest: 5.0.5
+    vitest-browser-react: 2.3.0
+  toolchain:
+    glob: ^13.0.6
+    typescript: ^7.0.2
+    vite: 'npm:@voidzero-dev/vite-plus-core@1.4.0'
+    vite-plus: 1.4.0
+  types:
+    '@types/node': ^24.19.2
+    type-fest: ^5.10.0
+
+cleanupUnusedCatalogs: true
+
+minimumReleaseAge: 60
+
+allowBuilds:
+  esbuild: true
+  simple-git-hooks: true
diff --git a/scripts/pages.ts b/scripts/pages.ts
new file mode 100644
index 0000000..8e7b114
--- /dev/null
+++ b/scripts/pages.ts
@@ -0,0 +1,112 @@
+import { execFileSync } from 'node:child_process';
+import {
+  cpSync,
+  createReadStream,
+  existsSync,
+  mkdirSync,
+  rmSync,
+  statSync,
+  writeFileSync,
+} from 'node:fs';
+import { createServer } from 'node:http';
+import path from 'node:path';
+
+// Assemble the GitHub Pages site (redirect index + storybook + playground)
+// into site/figma/, which is what gets deployed to
+// https://thinkbuff.github.io/figma/. `preview` additionally serves site/
+// locally so <host>/figma/ mirrors production paths.
+const root = path.resolve(import.meta.dirname, '..');
+const site = path.join(root, 'site');
+const app = path.join(site, 'figma');
+
+const command = process.argv[2];
+if (command === 'build' || command === 'preview') {
+  build();
+}
+if (command === 'preview' || command === 'serve') {
+  serve();
+} else if (command !== 'build') {
+  console.error('usage: tsx scripts/pages.ts <build|preview|serve>');
+  process.exit(1);
+}
+
+function build() {
+  run('pnpm', ['build']);
+  rmSync(site, { recursive: true, force: true });
+  mkdirSync(app, { recursive: true });
+  run('pnpm', [
+    '-F',
+    '@thinkbuff/figma-react',
+    'exec',
+    'storybook',
+    'build',
+    '--output-dir',
+    path.join(app, 'storybook'),
+  ]);
+  cpSync(path.join(root, 'playground/dist'), path.join(app, 'playground'), { recursive: true });
+  writeFileSync(
+    path.join(app, 'index.html'),
+    '<!doctype html><meta charset="utf-8"><meta http-equiv="refresh" content="0; url=./storybook/">' +
+      '<title>Thinkbuff Figma</title><a href="./storybook/">Storybook</a>\n',
+  );
+  console.log(`site -> ${app}`);
+}
+
+function run(cmd: string, args: string[]) {
+  execFileSync(cmd, args, { cwd: root, stdio: 'inherit' });
+}
+
+const MIME: Record<string, string> = {
+  '.css': 'text/css',
+  '.gif': 'image/gif',
+  '.html': 'text/html; charset=utf-8',
+  '.ico': 'image/x-icon',
+  '.jpeg': 'image/jpeg',
+  '.jpg': 'image/jpeg',
+  '.js': 'text/javascript',
+  '.json': 'application/json',
+  '.map': 'application/json',
+  '.md': 'text/markdown',
+  '.mjs': 'text/javascript',
+  '.mp4': 'video/mp4',
+  '.png': 'image/png',
+  '.svg': 'image/svg+xml',
+  '.ttf': 'font/ttf',
+  '.txt': 'text/plain',
+  '.wasm': 'application/wasm',
+  '.webmanifest': 'application/manifest+json',
+  '.webp': 'image/webp',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+};
+
+function serve() {
+  const port = Number(process.env.PORT ?? 4173);
+  createServer((req, res) => {
+    const url = decodeURIComponent((req.url ?? '/').split('?')[0]);
+    if (url === '/') {
+      res.writeHead(302, { location: '/figma/' }).end();
+      return;
+    }
+    let file = path.normalize(path.join(site, url));
+    if (file !== site && !file.startsWith(site + path.sep)) {
+      res.writeHead(403).end();
+      return;
+    }
+    if (existsSync(file) && statSync(file).isDirectory()) {
+      if (!url.endsWith('/')) {
+        res.writeHead(301, { location: `${url}/` }).end();
+        return;
+      }
+      file = path.join(file, 'index.html');
+    }
+    if (!existsSync(file) || !statSync(file).isFile()) {
+      res.writeHead(404).end('not found');
+      return;
+    }
+    res.writeHead(200, { 'content-type': MIME[path.extname(file)] ?? 'application/octet-stream' });
+    createReadStream(file).pipe(res);
+  }).listen(port, () => {
+    console.log(`preview -> http://localhost:${port}/figma/`);
+  });
+}
diff --git a/scripts/tsconfig.json b/scripts/tsconfig.json
new file mode 100644
index 0000000..7ba07f8
--- /dev/null
+++ b/scripts/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "types": ["node"],
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["*.ts"]
+}
diff --git a/scripts/update-version.ts b/scripts/update-version.ts
index 42d0118..b3c4003 100644
--- a/scripts/update-version.ts
+++ b/scripts/update-version.ts
@@ -1,4 +1,5 @@
 import fs from 'node:fs';
+
 import { glob } from 'glob';
 
 import { version } from '../package.json';
diff --git a/scripts/vrt-diff.ts b/scripts/vrt-diff.ts
new file mode 100644
index 0000000..69c12f1
--- /dev/null
+++ b/scripts/vrt-diff.ts
@@ -0,0 +1,49 @@
+import { execFileSync } from 'node:child_process';
+import { createHash } from 'node:crypto';
+import { cpSync, existsSync, mkdirSync, readdirSync, readFileSync, rmSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+
+// Snapshot baselines, re-run the screenshot update, report which shots changed.
+// Extra args are forwarded to vitest, e.g. `pnpm vrt:diff -- -t Checkbox`.
+const root = path.resolve(import.meta.dirname, '..');
+const baselines = path.join(root, 'packages/react/tests/visual/__screenshots__');
+const before = path.join(tmpdir(), 'figma-vrt-diff', 'before');
+
+rmSync(path.dirname(before), { recursive: true, force: true });
+mkdirSync(before, { recursive: true });
+cpSync(baselines, before, { recursive: true });
+console.log(`snapshot -> ${before}`);
+
+const extra = process.argv.slice(2);
+if (extra[0] === '--') {
+  extra.shift();
+}
+execFileSync('pnpm', ['-F', '@thinkbuff/figma-react', 'test:visual:update', ...extra], {
+  cwd: root,
+  stdio: 'inherit',
+});
+
+function hash(file: string) {
+  return createHash('sha256').update(readFileSync(file)).digest('hex');
+}
+const changed: string[] = [];
+const added: string[] = [];
+for (const file of readdirSync(baselines).filter((f) => f.endsWith('.png'))) {
+  if (!existsSync(path.join(before, file))) {
+    added.push(file);
+  } else if (hash(path.join(baselines, file)) !== hash(path.join(before, file))) {
+    changed.push(file);
+  }
+}
+
+if (changed.length === 0 && added.length === 0) {
+  console.log('no baseline changes');
+} else {
+  for (const file of changed) {
+    console.log(`changed  ${file}  (before: ${path.join(before, file)})`);
+  }
+  for (const file of added) {
+    console.log(`added    ${file}`);
+  }
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..37fa67c
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,102 @@
+import { defineConfig } from 'vite-plus';
+
+export default defineConfig({
+  lint: {
+    plugins: ['import', 'jsdoc', 'eslint', 'typescript', 'unicorn', 'oxc', 'promise'],
+    options: {
+      typeAware: true,
+      typeCheck: true,
+    },
+    ignorePatterns: [
+      '**/dist/**',
+      '**/coverage/**',
+      '**/node_modules/**',
+      '**/storybook-static/**',
+      '**/__screenshots__/**',
+    ],
+    rules: {
+      curly: ['error', 'all'],
+      'func-style': ['error', 'declaration'],
+      'unicorn/filename-case': ['error', { case: 'kebabCase' }],
+      'typescript/consistent-type-imports': [
+        'error',
+        { prefer: 'type-imports', fixStyle: 'inline-type-imports' },
+      ],
+      'typescript/no-import-type-side-effects': 'error',
+    },
+    overrides: [
+      {
+        files: ['packages/react/**/*.{ts,tsx}', 'playground/**/*.{ts,tsx}'],
+        plugins: ['react', 'jsx-a11y'],
+        rules: {
+          'react-hooks/rules-of-hooks': 'error',
+          'react-hooks/exhaustive-deps': 'warn',
+        },
+      },
+      {
+        files: ['packages/react/tests/**/*.test.{ts,tsx}'],
+        plugins: ['vitest'],
+        rules: {
+          // vrt describe/it titles are story ids and theme names — dynamic by design
+          'vitest/valid-title': 'off',
+        },
+      },
+      {
+        files: ['**/*.test.{ts,tsx}', '**/*.vrt.test.{ts,tsx}'],
+        plugins: ['vitest'],
+        rules: {
+          'typescript/unbound-method': 'off',
+          'vitest/no-disabled-tests': 'off',
+          'vitest/require-mock-type-parameters': 'off',
+        },
+      },
+    ],
+  },
+  fmt: {
+    semi: true,
+    singleQuote: true,
+    jsxSingleQuote: false,
+    singleAttributePerLine: true,
+    printWidth: 100,
+    ignorePatterns: [
+      '*.md',
+      '**/__screenshots__/**',
+      '**/dist/**',
+      '**/storybook-static/**',
+      'packages/theme/src/css/**',
+      'pnpm-lock.yaml',
+      'CHANGELOG.md',
+    ],
+    jsdoc: {
+      capitalizeDescriptions: false,
+      lineWrappingStyle: 'balance',
+      commentLineStrategy: 'multiline',
+      separateTagGroups: true,
+    },
+    sortPackageJson: {
+      sortScripts: false,
+    },
+    sortImports: {
+      customGroups: [
+        { groupName: 'vite', elementNamePattern: ['vite'] },
+        { groupName: 'vite-plugins', elementNamePattern: ['@vitejs/**', 'vite-**'] },
+        { groupName: 'workspace', elementNamePattern: ['@thinkbuff/**'] },
+      ],
+      groups: [
+        'builtin',
+        'vite',
+        { newlinesBetween: false },
+        'vite-plugins',
+        'external',
+        'workspace',
+        ['internal', 'subpath'],
+        ['parent', 'sibling', 'index'],
+        'style',
+        'unknown',
+      ],
+    },
+  },
+  staged: {
+    '*': 'vp check --fix',
+  },
+});