@loom-sdc/design-system 0.2.0 → 0.3.0

package/README.md

@@ -1,73 +1,338 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
-
-## React Compiler
-
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
+# @loom-sdc/design-system
+
+A framework-agnostic, token-driven component library built with React 19, TypeScript 6, Vite 8, and Vanilla Extract. It ships as a dual-format package (ESM + CJS) with full TypeScript declarations.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+- [Available Scripts](#available-scripts)
+- [Design Tokens](#design-tokens)
+- [UI Primitives](#ui-primitives)
+- [Architecture](#architecture)
+- [Build & Distribution](#build--distribution)
+- [Contributing](#contributing)
+
+---
+
+## Installation
+
+```bash
+npm install @loom-sdc/design-system
+```
+
+**Peer dependencies** (must be installed by the consumer):
+
+```bash
+npm install react@>=19 react-dom@>=19
+```
+
+---
+
+## Quick Start
+
+Import the global stylesheet once at the entry point of your application. Then import components and tokens as needed.
+
+```tsx
+// main.tsx
+import '@loom-sdc/design-system/style.css';
+import '@loom-sdc/design-system/fonts.css'; // optional: includes TWK Everett font
+
+import { Box, Stack, Inline } from '@loom-sdc/design-system';
+
+export default function App() {
+  return (
+    <Stack gap="md">
+      <Box padding="lg">
+        <Inline gap="sm" align="center">
+          <span>Hello</span>
+          <span>World</span>
+        </Inline>
+      </Box>
+    </Stack>
+  );
+}
+```
+
+### CSS Exports
+
+| Import path | Description |
+|---|---|
+| `@loom-sdc/design-system/style.css` | Base styles and CSS custom properties |
+| `@loom-sdc/design-system/fonts.css` | TWK Everett font-face declarations |
+
+---
+
+## Available Scripts
+
+| Command | Description |
+|---|---|
+| `npm run dev` | Start Vite dev server with hot module replacement |
+| `npm run build` | Full TypeScript check + Vite app build |
+| `npm run build:lib` | Build the distributable library package |
+| `npm run release` | Build the library and publish to npm |
+| `npm run lint` | Run ESLint across the entire project |
+| `npm run storybook` | Start Storybook on port 6006 |
+| `npm run build-storybook` | Build the static Storybook site |
+
+---
+
+## Design Tokens
+
+All tokens are generated with Vanilla Extract's `createThemeContract` + `createGlobalTheme`. They resolve to CSS custom properties at runtime and are fully typed via their respective `*TokenKey` union types.
+
+### Color Palette (`PaletteTokenKey`)
+
+Raw color scales. Prefer semantic color tokens for styling components.
+
+| Scale | Tones |
+|---|---|
+| `cyan` | `cyan100` – `cyan900` |
+| `red` | `red100` – `red900` |
+| `neutral` | `neutral100` – `neutral900` |
+| `green` | `green100` – `green900` |
+| `amber` | `amber100` – `amber900` |
+
+### Semantic Colors (`ColorTokenKey`)
+
+| Group | Tokens |
+|---|---|
+| **Surface** | `surfaceRaised`, `surfaceBase`, `surfaceSubtle`, `surfaceNeutral` |
+| **Brand** | `brandPrimary`, `brandPrimarySubtle`, `brandAccent`, `brandAccentSubtle` |
+| **Border** | `borderDefault`, `borderStrong`, `borderSubtle` |
+| **Text** | `textPrimary`, `textSecondary`, `textDisabled`, `textInverse`, `textOnBrand` |
+| **Feedback** | `feedbackSuccess`, `feedbackSuccessSubtle`, `feedbackWarning`, `feedbackWarningStrong`, `feedbackWarningSubtle`, `feedbackDanger`, `feedbackDangerSubtle` |
+
+### Spacing (`SpacingTokenKey`)
+
+| Token | Value |
+|---|---|
+| `none` | 0px |
+| `px` | 1px |
+| `xxs` | 2px |
+| `xs` | 4px |
+| `sm` | 8px |
+| `md` | 16px |
+| `lg` | 24px |
+| `xl` | 32px |
+| `xl2` | 48px |
+| `xl3` | 64px |
+| `xl4` | 96px |
+| `xl5` | 128px |
+| `xl6` | 192px |
+| `xl7` | 256px |
+| `xl8` | 384px |
+
+### Font Size (`FontSizeTokenKey`)
+
+`xxs` (10px) → `xl8` (96px), 13-step progressive scale.
+
+### Font Family (`FontFamilyTokenKey`)
+
+| Token | Stack |
+|---|---|
+| `sans` | TWK Everett, system-ui |
+| `mono` | ui-monospace, Consolas |
+
+### Font Weight (`FontWeightTokenKey`)
+
+`thin` (100), `extralight` (200), `light` (300), `normal` (400), `medium` (500), `semibold` (600), `bold` (700), `extrabold` (800), `black` (900).
+
+### Line Height (`LineHeightTokenKey`)
+
+`none` (1), `tight` (1.25), `snug` (1.375), `normal` (1.5), `relaxed` (1.625), `loose` (2).
+
+### Height (`HeightTokenKey`)
+
+`xxs` (20px), `xs` (24px), `sm` (32px), `md` (48px), `lg` (56px), `xl` (72px).
+
+### Icon Size (`IconSizeTokenKey`)
+
+`xxs` (12px), `xs` (14px), `sm` (16px), `md` (24px), `lg` (32px).
+
+### Border Radius (`RadiusTokenKey`)
+
+`xxs` (2px), `xs` (4px), `sm` (6px), `md` (8px), `lg` (16px).
+
+### Shadow (`ShadowTokenKey`)
+
+`none`, `sm`, `base`, `md`, `lg`, `xl`, `xl2`, `inner`.
+
+### Z-Index (`ZIndexTokenKey`)
+
+`hide` (-1), `base` (0), `raised` (10), `dropdown` (20), `sticky` (30), `overlay` (40), `modal` (50).
+
+---
+
+## UI Primitives
+
+Primitives are single-element polymorphic components. All of them support the `as` prop to render as any HTML element while preserving their typed props.
+
+### `Box`
+
+A generic container that applies spacing tokens via padding props.
+
+```tsx
+import { Box } from '@loom-sdc/design-system';
+
+<Box padding="lg" paddingX="xl" as="section">
+  content
+</Box>
+```
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `as` | `ElementType` | `'div'` | HTML element or component to render as |
+| `padding` | `SpacingTokenKey` | — | Uniform padding on all sides |
+| `paddingX` | `SpacingTokenKey` | — | Horizontal padding (left + right) |
+| `paddingY` | `SpacingTokenKey` | — | Vertical padding (top + bottom) |
+| `children` | `ReactNode` | — | |
+| `...rest` | HTML attributes | — | Forwarded to the underlying element |
+
+### `Inline`
+
+A flex-row container for horizontally arranged items.
+
+```tsx
+import { Inline } from '@loom-sdc/design-system';
+
+<Inline gap="sm" align="center" justify="between">
+  <span>Left</span>
+  <span>Right</span>
+</Inline>
+```
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `as` | `ElementType` | `'div'` | HTML element or component to render as |
+| `gap` | `SpacingTokenKey` | — | Gap between children |
+| `align` | `'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'` | `'center'` | Cross-axis alignment (`align-items`) |
+| `justify` | `'start' \| 'center' \| 'end' \| 'between' \| 'around' \| 'evenly'` | `'start'` | Main-axis distribution (`justify-content`) |
+| `wrap` | `boolean` | `false` | Allow children to wrap |
+| `className` | `string` | — | Additional class names |
+| `...rest` | HTML attributes | — | Forwarded to the underlying element |
+
+### `Stack`
+
+A flex-column container for vertically stacked items.
+
+```tsx
+import { Stack } from '@loom-sdc/design-system';
+
+<Stack gap="md" align="start">
+  <p>First</p>
+  <p>Second</p>
+</Stack>
+```
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `as` | `ElementType` | `'div'` | HTML element or component to render as |
+| `gap` | `SpacingTokenKey` | — | Gap between children |
+| `align` | `'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'` | `'stretch'` | Cross-axis alignment (`align-items`) |
+| `justify` | `'start' \| 'center' \| 'end' \| 'between' \| 'around' \| 'evenly'` | `'start'` | Main-axis distribution (`justify-content`) |
+| `className` | `string` | — | Additional class names |
+| `...rest` | HTML attributes | — | Forwarded to the underlying element |
+
+---
+
+## Architecture
+
+```
+src/design-system/package/
+├── index.ts              ← public API entry (re-exports tokens + primitives)
+├── fonts/
+│   └── fonts.css         ← TWK Everett @font-face declarations
+├── tokens/               ← Vanilla Extract theme contracts
+│   ├── color/
+│   ├── palette/
+│   ├── spacing/
+│   ├── fontSize/
+│   ├── fontFamily/
+│   ├── fontWeight/
+│   ├── lineHeight/
+│   ├── height/
+│   ├── iconSize/
+│   ├── radius/
+│   ├── shadow/
+│   └── zIndex/
+└── ui/
+    ├── primitives/       ← polymorphic single-element components
+    ├── components/       ← composite / compound components
+    └── patterns/         ← layout-level compositions
+```
+
+### Component File Convention
+
+Every component folder follows this structure:
+
+```
+[ComponentName]/
+├── [ComponentName].types.ts        ← framework-agnostic prop interfaces
+├── [ComponentName].css.ts          ← Vanilla Extract styles
+├── [ComponentName].context.ts      ← compound components only
+├── adapters/
+│   ├── [ComponentName].react.tsx   ← React implementation
+│   └── .gitkeep                    ← placeholder for Angular / Vue adapters
+└── index.ts                        ← public API re-exports only
+```
+
+### Key Conventions
+
+- **Named exports only** — no default exports anywhere in the package.
+- **Type-only re-exports** use `export type { ... }` syntax.
+- **No `enum`** — use `const` objects with `as const` and derive the union type from them.
+- **No hardcoded CSS values** — always reference a token CSS custom property.
+- **Imports inside the package include file extensions** (`.ts`, `.tsx`, `.css.ts`).
+- **TypeScript verification**: `npx tsc -b --noEmit`
+
+---
+
+## Build & Distribution
+
+The library is built with `vite build --config vite.lib.config.ts`.
+
+| Output | Path |
+|---|---|
+| ES module | `dist/index.mjs` |
+| CommonJS | `dist/index.cjs` |
+| Type declarations | `dist/index.d.ts` |
+| Base styles | `dist/style.css` |
+| Font declarations | `dist/fonts.css` |
+| Font assets | `dist/fonts/*.woff2` |
+
+External dependencies excluded from the bundle: `react`, `react-dom`, `@vanilla-extract/css`.
+
+---
+
+## Contributing
+
+### Prerequisites
+
+- Node.js 22+
+- npm 10+
+
+### Local Setup
+
+```bash
+git clone <repo-url>
+cd loom-design-system
+npm install
+```
+
+### Development Workflow
+
+```bash
+npm run dev          # preview the sandbox app
+npm run storybook    # browse components in Storybook
+npm run lint         # check for linting errors
+npx tsc -b --noEmit  # type check without emitting files
+```
+
+### Publishing
+
+```bash
+npm run release
+```
+
+This runs `build:lib` followed by `npm publish --access public`.

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`react/jsx-runtime`);var t={sans:`var(--_147ti5g0)`,mono:`var(--_147ti5g1)`},n={surfaceRaised:`var(--n4rd7s0)`,surfaceBase:`var(--n4rd7s1)`,surfaceSubtle:`var(--n4rd7s2)`,surfaceNeutral:`var(--n4rd7s3)`,brandPrimary:`var(--n4rd7s4)`,brandPrimarySubtle:`var(--n4rd7s5)`,brandAccent:`var(--n4rd7s6)`,brandAccentSubtle:`var(--n4rd7s7)`,borderDefault:`var(--n4rd7s8)`,borderStrong:`var(--n4rd7s9)`,borderSubtle:`var(--n4rd7sa)`,textPrimary:`var(--n4rd7sb)`,textSecondary:`var(--n4rd7sc)`,textDisabled:`var(--n4rd7sd)`,textInverse:`var(--n4rd7se)`,textOnBrand:`var(--n4rd7sf)`,feedbackSuccess:`var(--n4rd7sg)`,feedbackSuccessSubtle:`var(--n4rd7sh)`,feedbackWarning:`var(--n4rd7si)`,feedbackWarningStrong:`var(--n4rd7sj)`,feedbackWarningSubtle:`var(--n4rd7sk)`,feedbackDanger:`var(--n4rd7sl)`,feedbackDangerSubtle:`var(--n4rd7sm)`},r={cyan100:`var(--crr3d10)`,cyan200:`var(--crr3d11)`,cyan300:`var(--crr3d12)`,cyan400:`var(--crr3d13)`,cyan500:`var(--crr3d14)`,cyan600:`var(--crr3d15)`,cyan700:`var(--crr3d16)`,cyan800:`var(--crr3d17)`,cyan900:`var(--crr3d18)`,red100:`var(--crr3d19)`,red200:`var(--crr3d1a)`,red300:`var(--crr3d1b)`,red400:`var(--crr3d1c)`,red500:`var(--crr3d1d)`,red600:`var(--crr3d1e)`,red700:`var(--crr3d1f)`,red800:`var(--crr3d1g)`,red900:`var(--crr3d1h)`,neutral100:`var(--crr3d1i)`,neutral200:`var(--crr3d1j)`,neutral300:`var(--crr3d1k)`,neutral400:`var(--crr3d1l)`,neutral500:`var(--crr3d1m)`,neutral600:`var(--crr3d1n)`,neutral700:`var(--crr3d1o)`,neutral800:`var(--crr3d1p)`,neutral900:`var(--crr3d1q)`,green100:`var(--crr3d1r)`,green200:`var(--crr3d1s)`,green300:`var(--crr3d1t)`,green400:`var(--crr3d1u)`,green500:`var(--crr3d1v)`,green600:`var(--crr3d1w)`,green700:`var(--crr3d1x)`,green800:`var(--crr3d1y)`,green900:`var(--crr3d1z)`,amber100:`var(--crr3d110)`,amber200:`var(--crr3d111)`,amber300:`var(--crr3d112)`,amber400:`var(--crr3d113)`,amber500:`var(--crr3d114)`,amber600:`var(--crr3d115)`,amber700:`var(--crr3d116)`,amber800:`var(--crr3d117)`,amber900:`var(--crr3d118)`},i={xxs:`var(--gn271l0)`,xs:`var(--gn271l1)`,sm:`var(--gn271l2)`,md:`var(--gn271l3)`,lg:`var(--gn271l4)`,xl:`var(--gn271l5)`},a={xxs:`var(--_1r3v8qb0)`,xs:`var(--_1r3v8qb1)`,sm:`var(--_1r3v8qb2)`,md:`var(--_1r3v8qb3)`,lg:`var(--_1r3v8qb4)`},o={xxs:`var(--_17uaar60)`,xs:`var(--_17uaar61)`,sm:`var(--_17uaar62)`,md:`var(--_17uaar63)`,lg:`var(--_17uaar64)`},s={xxs:`var(--g2g2zb0)`,xs:`var(--g2g2zb1)`,sm:`var(--g2g2zb2)`,base:`var(--g2g2zb3)`,lg:`var(--g2g2zb4)`,xl:`var(--g2g2zb5)`,xl2:`var(--g2g2zb6)`,xl3:`var(--g2g2zb7)`,xl4:`var(--g2g2zb8)`,xl5:`var(--g2g2zb9)`,xl6:`var(--g2g2zba)`,xl7:`var(--g2g2zbb)`,xl8:`var(--g2g2zbc)`},c={none:`var(--_6tzq000)`,px:`var(--_6tzq001)`,xxs:`var(--_6tzq002)`,xs:`var(--_6tzq003)`,sm:`var(--_6tzq004)`,md:`var(--_6tzq005)`,lg:`var(--_6tzq006)`,xl:`var(--_6tzq007)`,xl2:`var(--_6tzq008)`,xl3:`var(--_6tzq009)`,xl4:`var(--_6tzq00a)`,xl5:`var(--_6tzq00b)`,xl6:`var(--_6tzq00c)`,xl7:`var(--_6tzq00d)`,xl8:`var(--_6tzq00e)`},l={thin:`var(--scju2v0)`,extralight:`var(--scju2v1)`,light:`var(--scju2v2)`,normal:`var(--scju2v3)`,medium:`var(--scju2v4)`,semibold:`var(--scju2v5)`,bold:`var(--scju2v6)`,extrabold:`var(--scju2v7)`,black:`var(--scju2v8)`},u={none:`var(--_1ybwetq0)`,tight:`var(--_1ybwetq1)`,snug:`var(--_1ybwetq2)`,normal:`var(--_1ybwetq3)`,relaxed:`var(--_1ybwetq4)`,loose:`var(--_1ybwetq5)`},d={none:`var(--_1fh9yx40)`,sm:`var(--_1fh9yx41)`,base:`var(--_1fh9yx42)`,md:`var(--_1fh9yx43)`,lg:`var(--_1fh9yx44)`,xl:`var(--_1fh9yx45)`,xl2:`var(--_1fh9yx46)`,inner:`var(--_1fh9yx47)`},f={hide:`var(--_1alu3u80)`,base:`var(--_1alu3u81)`,raised:`var(--_1alu3u82)`,dropdown:`var(--_1alu3u83)`,sticky:`var(--_1alu3u84)`,overlay:`var(--_1alu3u85)`,modal:`var(--_1alu3u86)`},p=`y5q6570`,m={none:`y5q6571`,px:`y5q6572`,xxs:`y5q6573`,xs:`y5q6574`,sm:`y5q6575`,md:`y5q6576`,lg:`y5q6577`,xl:`y5q6578`,xl2:`y5q6579`,xl3:`y5q657a`,xl4:`y5q657b`,xl5:`y5q657c`,xl6:`y5q657d`,xl7:`y5q657e`,xl8:`y5q657f`},h={start:`y5q657g`,center:`y5q657h`,end:`y5q657i`,stretch:`y5q657j`,baseline:`y5q657k`},g={start:`y5q657l`,center:`y5q657m`,end:`y5q657n`,between:`y5q657o`,around:`y5q657p`,evenly:`y5q657q`};function _({as:t,gap:n,align:r=`stretch`,justify:i=`start`,children:a,className:o,...s}){return(0,e.jsx)(t??`div`,{className:[p,n===void 0?void 0:m[n],h[r],g[i],o].filter(Boolean).join(` `),...s,children:a})}var v=`_1wqyejm0`,y=`_1wqyejm1`,b={none:`_1wqyejm2`,px:`_1wqyejm3`,xxs:`_1wqyejm4`,xs:`_1wqyejm5`,sm:`_1wqyejm6`,md:`_1wqyejm7`,lg:`_1wqyejm8`,xl:`_1wqyejm9`,xl2:`_1wqyejma`,xl3:`_1wqyejmb`,xl4:`_1wqyejmc`,xl5:`_1wqyejmd`,xl6:`_1wqyejme`,xl7:`_1wqyejmf`,xl8:`_1wqyejmg`},x={start:`_1wqyejmh`,center:`_1wqyejmi`,end:`_1wqyejmj`,stretch:`_1wqyejmk`,baseline:`_1wqyejml`},S={start:`_1wqyejmm`,center:`_1wqyejmn`,end:`_1wqyejmo`,between:`_1wqyejmp`,around:`_1wqyejmq`,evenly:`_1wqyejmr`};function C({as:t,gap:n,align:r=`center`,justify:i=`start`,wrap:a=!1,children:o,className:s,...c}){return(0,e.jsx)(t??`div`,{className:[v,a?y:void 0,n===void 0?void 0:b[n],x[r],S[i],s].filter(Boolean).join(` `),...c,children:o})}var w=`_1okjbro0`;function T({as:t,padding:n,paddingX:r,paddingY:i,children:a,className:o,style:s,...l}){let u=t??`div`,d={...n&&{padding:c[n]},...r&&{paddingInline:c[r]},...i&&{paddingBlock:c[i]}};return(0,e.jsx)(u,{className:[w,o].filter(Boolean).join(` `),style:{...d,...s},...l,children:a})}exports.Box=T,exports.Inline=C,exports.Stack=_,exports.colorVars=n,exports.fontFamilyVars=t,exports.fontSizeVars=s,exports.fontWeightVars=l,exports.heightVars=i,exports.iconSizeVars=a,exports.lineHeightVars=u,exports.paletteVars=r,exports.radiusVars=o,exports.shadowVars=d,exports.spacingVars=c,exports.zIndexVars=f;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`react/jsx-runtime`);var t={sans:`var(--_147ti5g0)`,mono:`var(--_147ti5g1)`},n={surfaceRaised:`var(--n4rd7s0)`,surfaceBase:`var(--n4rd7s1)`,surfaceSubtle:`var(--n4rd7s2)`,surfaceNeutral:`var(--n4rd7s3)`,brandPrimary:`var(--n4rd7s4)`,brandPrimarySubtle:`var(--n4rd7s5)`,brandAccent:`var(--n4rd7s6)`,brandAccentSubtle:`var(--n4rd7s7)`,brandAccentHover:`var(--n4rd7s8)`,borderDefault:`var(--n4rd7s9)`,borderStrong:`var(--n4rd7sa)`,borderSubtle:`var(--n4rd7sb)`,textPrimary:`var(--n4rd7sc)`,textSecondary:`var(--n4rd7sd)`,textDisabled:`var(--n4rd7se)`,textInverse:`var(--n4rd7sf)`,textOnBrand:`var(--n4rd7sg)`,feedbackSuccess:`var(--n4rd7sh)`,feedbackSuccessSubtle:`var(--n4rd7si)`,feedbackWarning:`var(--n4rd7sj)`,feedbackWarningStrong:`var(--n4rd7sk)`,feedbackWarningSubtle:`var(--n4rd7sl)`,feedbackDanger:`var(--n4rd7sm)`,feedbackDangerSubtle:`var(--n4rd7sn)`,feedbackInfo:`var(--n4rd7so)`,feedbackInfoSubtle:`var(--n4rd7sp)`},r={cyan100:`var(--crr3d10)`,cyan200:`var(--crr3d11)`,cyan300:`var(--crr3d12)`,cyan400:`var(--crr3d13)`,cyan500:`var(--crr3d14)`,cyan600:`var(--crr3d15)`,cyan700:`var(--crr3d16)`,cyan800:`var(--crr3d17)`,cyan900:`var(--crr3d18)`,red100:`var(--crr3d19)`,red200:`var(--crr3d1a)`,red300:`var(--crr3d1b)`,red400:`var(--crr3d1c)`,red500:`var(--crr3d1d)`,red600:`var(--crr3d1e)`,red700:`var(--crr3d1f)`,red800:`var(--crr3d1g)`,red900:`var(--crr3d1h)`,neutral100:`var(--crr3d1i)`,neutral200:`var(--crr3d1j)`,neutral300:`var(--crr3d1k)`,neutral400:`var(--crr3d1l)`,neutral500:`var(--crr3d1m)`,neutral600:`var(--crr3d1n)`,neutral700:`var(--crr3d1o)`,neutral800:`var(--crr3d1p)`,neutral900:`var(--crr3d1q)`,green100:`var(--crr3d1r)`,green200:`var(--crr3d1s)`,green300:`var(--crr3d1t)`,green400:`var(--crr3d1u)`,green500:`var(--crr3d1v)`,green600:`var(--crr3d1w)`,green700:`var(--crr3d1x)`,green800:`var(--crr3d1y)`,green900:`var(--crr3d1z)`,amber100:`var(--crr3d110)`,amber200:`var(--crr3d111)`,amber300:`var(--crr3d112)`,amber400:`var(--crr3d113)`,amber500:`var(--crr3d114)`,amber600:`var(--crr3d115)`,amber700:`var(--crr3d116)`,amber800:`var(--crr3d117)`,amber900:`var(--crr3d118)`,blue100:`var(--crr3d119)`,blue200:`var(--crr3d11a)`,blue300:`var(--crr3d11b)`,blue400:`var(--crr3d11c)`,blue500:`var(--crr3d11d)`,blue600:`var(--crr3d11e)`,blue700:`var(--crr3d11f)`,blue800:`var(--crr3d11g)`,blue900:`var(--crr3d11h)`},i={xxs:`var(--gn271l0)`,xs:`var(--gn271l1)`,sm:`var(--gn271l2)`,md:`var(--gn271l3)`,lg:`var(--gn271l4)`,xl:`var(--gn271l5)`},a={xxs:`var(--_1r3v8qb0)`,xs:`var(--_1r3v8qb1)`,sm:`var(--_1r3v8qb2)`,md:`var(--_1r3v8qb3)`,lg:`var(--_1r3v8qb4)`},o={xxs:`var(--_17uaar60)`,xs:`var(--_17uaar61)`,sm:`var(--_17uaar62)`,md:`var(--_17uaar63)`,lg:`var(--_17uaar64)`},s={xxs:`var(--g2g2zb0)`,xs:`var(--g2g2zb1)`,sm:`var(--g2g2zb2)`,base:`var(--g2g2zb3)`,lg:`var(--g2g2zb4)`,xl:`var(--g2g2zb5)`,xl2:`var(--g2g2zb6)`,xl3:`var(--g2g2zb7)`,xl4:`var(--g2g2zb8)`,xl5:`var(--g2g2zb9)`,xl6:`var(--g2g2zba)`,xl7:`var(--g2g2zbb)`,xl8:`var(--g2g2zbc)`},c={none:`var(--_6tzq000)`,px:`var(--_6tzq001)`,xxs:`var(--_6tzq002)`,xs:`var(--_6tzq003)`,sm:`var(--_6tzq004)`,md:`var(--_6tzq005)`,lg:`var(--_6tzq006)`,xl:`var(--_6tzq007)`,xl2:`var(--_6tzq008)`,xl3:`var(--_6tzq009)`,xl4:`var(--_6tzq00a)`,xl5:`var(--_6tzq00b)`,xl6:`var(--_6tzq00c)`,xl7:`var(--_6tzq00d)`,xl8:`var(--_6tzq00e)`},l={thin:`var(--scju2v0)`,extralight:`var(--scju2v1)`,light:`var(--scju2v2)`,normal:`var(--scju2v3)`,medium:`var(--scju2v4)`,semibold:`var(--scju2v5)`,bold:`var(--scju2v6)`,extrabold:`var(--scju2v7)`,black:`var(--scju2v8)`},u={none:`var(--_1ybwetq0)`,tight:`var(--_1ybwetq1)`,snug:`var(--_1ybwetq2)`,normal:`var(--_1ybwetq3)`,relaxed:`var(--_1ybwetq4)`,condensed:`var(--_1ybwetq5)`,compact:`var(--_1ybwetq6)`,loose:`var(--_1ybwetq7)`},d={none:`var(--_1fh9yx40)`,sm:`var(--_1fh9yx41)`,base:`var(--_1fh9yx42)`,md:`var(--_1fh9yx43)`,lg:`var(--_1fh9yx44)`,xl:`var(--_1fh9yx45)`,xl2:`var(--_1fh9yx46)`,inner:`var(--_1fh9yx47)`},f={hide:`var(--_1alu3u80)`,base:`var(--_1alu3u81)`,raised:`var(--_1alu3u82)`,dropdown:`var(--_1alu3u83)`,sticky:`var(--_1alu3u84)`,overlay:`var(--_1alu3u85)`,modal:`var(--_1alu3u86)`},p={none:`var(--_1amctni0)`,wide:`var(--_1amctni1)`,snug:`var(--_1amctni2)`,tight:`var(--_1amctni3)`,tighter:`var(--_1amctni4)`,tightest:`var(--_1amctni5)`},m={bodyBase:{fontSize:`var(--_9fdc020)`,fontWeight:`var(--_9fdc021)`,lineHeight:`var(--_9fdc022)`,letterSpacing:`var(--_9fdc023)`},bodySm:{fontSize:`var(--_9fdc024)`,fontWeight:`var(--_9fdc025)`,lineHeight:`var(--_9fdc026)`,letterSpacing:`var(--_9fdc027)`},bodyLg:{fontSize:`var(--_9fdc028)`,fontWeight:`var(--_9fdc029)`,lineHeight:`var(--_9fdc02a)`,letterSpacing:`var(--_9fdc02b)`},labelBase:{fontSize:`var(--_9fdc02c)`,fontWeight:`var(--_9fdc02d)`,lineHeight:`var(--_9fdc02e)`,letterSpacing:`var(--_9fdc02f)`},labelSm:{fontSize:`var(--_9fdc02g)`,fontWeight:`var(--_9fdc02h)`,lineHeight:`var(--_9fdc02i)`,letterSpacing:`var(--_9fdc02j)`},labelLg:{fontSize:`var(--_9fdc02k)`,fontWeight:`var(--_9fdc02l)`,lineHeight:`var(--_9fdc02m)`,letterSpacing:`var(--_9fdc02n)`},headingH1:{fontSize:`var(--_9fdc02o)`,fontWeight:`var(--_9fdc02p)`,lineHeight:`var(--_9fdc02q)`,letterSpacing:`var(--_9fdc02r)`},headingH2:{fontSize:`var(--_9fdc02s)`,fontWeight:`var(--_9fdc02t)`,lineHeight:`var(--_9fdc02u)`,letterSpacing:`var(--_9fdc02v)`},headingH3:{fontSize:`var(--_9fdc02w)`,fontWeight:`var(--_9fdc02x)`,lineHeight:`var(--_9fdc02y)`,letterSpacing:`var(--_9fdc02z)`},headingH4:{fontSize:`var(--_9fdc0210)`,fontWeight:`var(--_9fdc0211)`,lineHeight:`var(--_9fdc0212)`,letterSpacing:`var(--_9fdc0213)`},headingH5:{fontSize:`var(--_9fdc0214)`,fontWeight:`var(--_9fdc0215)`,lineHeight:`var(--_9fdc0216)`,letterSpacing:`var(--_9fdc0217)`},headingH6:{fontSize:`var(--_9fdc0218)`,fontWeight:`var(--_9fdc0219)`,lineHeight:`var(--_9fdc021a)`,letterSpacing:`var(--_9fdc021b)`},displayLg:{fontSize:`var(--_9fdc021c)`,fontWeight:`var(--_9fdc021d)`,lineHeight:`var(--_9fdc021e)`,letterSpacing:`var(--_9fdc021f)`},displayXl:{fontSize:`var(--_9fdc021g)`,fontWeight:`var(--_9fdc021h)`,lineHeight:`var(--_9fdc021i)`,letterSpacing:`var(--_9fdc021j)`},display2xl:{fontSize:`var(--_9fdc021k)`,fontWeight:`var(--_9fdc021l)`,lineHeight:`var(--_9fdc021m)`,letterSpacing:`var(--_9fdc021n)`},overline:{fontSize:`var(--_9fdc021o)`,fontWeight:`var(--_9fdc021p)`,lineHeight:`var(--_9fdc021q)`,letterSpacing:`var(--_9fdc021r)`},caption:{fontSize:`var(--_9fdc021s)`,fontWeight:`var(--_9fdc021t)`,lineHeight:`var(--_9fdc021u)`,letterSpacing:`var(--_9fdc021v)`}},h={durationInstant:`var(--_159077d0)`,durationFast:`var(--_159077d1)`,durationBase:`var(--_159077d2)`,durationSlow:`var(--_159077d3)`,durationSlower:`var(--_159077d4)`,easingLinear:`var(--_159077d5)`,easingEaseIn:`var(--_159077d6)`,easingEaseOut:`var(--_159077d7)`,easingEaseInOut:`var(--_159077d8)`},g=`y5q6570`,_={none:`y5q6571`,px:`y5q6572`,xxs:`y5q6573`,xs:`y5q6574`,sm:`y5q6575`,md:`y5q6576`,lg:`y5q6577`,xl:`y5q6578`,xl2:`y5q6579`,xl3:`y5q657a`,xl4:`y5q657b`,xl5:`y5q657c`,xl6:`y5q657d`,xl7:`y5q657e`,xl8:`y5q657f`},v={start:`y5q657g`,center:`y5q657h`,end:`y5q657i`,stretch:`y5q657j`,baseline:`y5q657k`},y={start:`y5q657l`,center:`y5q657m`,end:`y5q657n`,between:`y5q657o`,around:`y5q657p`,evenly:`y5q657q`};function b({as:t,gap:n,align:r=`stretch`,justify:i=`start`,children:a,className:o,...s}){return(0,e.jsx)(t??`div`,{className:[g,n===void 0?void 0:_[n],v[r],y[i],o].filter(Boolean).join(` `),...s,children:a})}var x=`_1wqyejm0`,S=`_1wqyejm1`,C={none:`_1wqyejm2`,px:`_1wqyejm3`,xxs:`_1wqyejm4`,xs:`_1wqyejm5`,sm:`_1wqyejm6`,md:`_1wqyejm7`,lg:`_1wqyejm8`,xl:`_1wqyejm9`,xl2:`_1wqyejma`,xl3:`_1wqyejmb`,xl4:`_1wqyejmc`,xl5:`_1wqyejmd`,xl6:`_1wqyejme`,xl7:`_1wqyejmf`,xl8:`_1wqyejmg`},w={start:`_1wqyejmh`,center:`_1wqyejmi`,end:`_1wqyejmj`,stretch:`_1wqyejmk`,baseline:`_1wqyejml`},T={start:`_1wqyejmm`,center:`_1wqyejmn`,end:`_1wqyejmo`,between:`_1wqyejmp`,around:`_1wqyejmq`,evenly:`_1wqyejmr`};function E({as:t,gap:n,align:r=`center`,justify:i=`start`,wrap:a=!1,children:o,className:s,...c}){return(0,e.jsx)(t??`div`,{className:[x,a?S:void 0,n===void 0?void 0:C[n],w[r],T[i],s].filter(Boolean).join(` `),...c,children:o})}var D=`_1okjbro0`;function O({as:t,padding:n,paddingX:r,paddingY:i,children:a,className:o,style:s,...l}){let u=t??`div`,d={...n&&{padding:c[n]},...r&&{paddingInline:c[r]},...i&&{paddingBlock:c[i]}};return(0,e.jsx)(u,{className:[D,o].filter(Boolean).join(` `),style:{...d,...s},...l,children:a})}var k={bodyBase:`_1kk7qb30`,bodySm:`_1kk7qb31`,bodyLg:`_1kk7qb32`,labelBase:`_1kk7qb33`,labelSm:`_1kk7qb34`,labelLg:`_1kk7qb35`,headingH1:`_1kk7qb36`,headingH2:`_1kk7qb37`,headingH3:`_1kk7qb38`,headingH4:`_1kk7qb39`,headingH5:`_1kk7qb3a`,headingH6:`_1kk7qb3b`,displayLg:`_1kk7qb3c`,displayXl:`_1kk7qb3d`,display2xl:`_1kk7qb3e`,overline:`_1kk7qb3f`,caption:`_1kk7qb3g`};function A({as:t,variant:n,children:r,className:i,...a}){return(0,e.jsx)(t??`p`,{className:[k[n],i].filter(Boolean).join(` `),...a,children:r})}exports.Box=O,exports.Inline=E,exports.Stack=b,exports.Text=A,exports.colorVars=n,exports.fontFamilyVars=t,exports.fontSizeVars=s,exports.fontWeightVars=l,exports.heightVars=i,exports.iconSizeVars=a,exports.letterSpacingVars=p,exports.lineHeightVars=u,exports.motionVars=h,exports.paletteVars=r,exports.radiusVars=o,exports.shadowVars=d,exports.spacingVars=c,exports.typographyVars=m,exports.zIndexVars=f;

package/dist/index.mjs

@@ -12,21 +12,24 @@ var t = {
 	brandPrimarySubtle: "var(--n4rd7s5)",
 	brandAccent: "var(--n4rd7s6)",
 	brandAccentSubtle: "var(--n4rd7s7)",
-	borderDefault: "var(--n4rd7s8)",
-	borderStrong: "var(--n4rd7s9)",
-	borderSubtle: "var(--n4rd7sa)",
-	textPrimary: "var(--n4rd7sb)",
-	textSecondary: "var(--n4rd7sc)",
-	textDisabled: "var(--n4rd7sd)",
-	textInverse: "var(--n4rd7se)",
-	textOnBrand: "var(--n4rd7sf)",
-	feedbackSuccess: "var(--n4rd7sg)",
-	feedbackSuccessSubtle: "var(--n4rd7sh)",
-	feedbackWarning: "var(--n4rd7si)",
-	feedbackWarningStrong: "var(--n4rd7sj)",
-	feedbackWarningSubtle: "var(--n4rd7sk)",
-	feedbackDanger: "var(--n4rd7sl)",
-	feedbackDangerSubtle: "var(--n4rd7sm)"
+	brandAccentHover: "var(--n4rd7s8)",
+	borderDefault: "var(--n4rd7s9)",
+	borderStrong: "var(--n4rd7sa)",
+	borderSubtle: "var(--n4rd7sb)",
+	textPrimary: "var(--n4rd7sc)",
+	textSecondary: "var(--n4rd7sd)",
+	textDisabled: "var(--n4rd7se)",
+	textInverse: "var(--n4rd7sf)",
+	textOnBrand: "var(--n4rd7sg)",
+	feedbackSuccess: "var(--n4rd7sh)",
+	feedbackSuccessSubtle: "var(--n4rd7si)",
+	feedbackWarning: "var(--n4rd7sj)",
+	feedbackWarningStrong: "var(--n4rd7sk)",
+	feedbackWarningSubtle: "var(--n4rd7sl)",
+	feedbackDanger: "var(--n4rd7sm)",
+	feedbackDangerSubtle: "var(--n4rd7sn)",
+	feedbackInfo: "var(--n4rd7so)",
+	feedbackInfoSubtle: "var(--n4rd7sp)"
 }, r = {
 	cyan100: "var(--crr3d10)",
 	cyan200: "var(--crr3d11)",
@@ -72,7 +75,16 @@ var t = {
 	amber600: "var(--crr3d115)",
 	amber700: "var(--crr3d116)",
 	amber800: "var(--crr3d117)",
-	amber900: "var(--crr3d118)"
+	amber900: "var(--crr3d118)",
+	blue100: "var(--crr3d119)",
+	blue200: "var(--crr3d11a)",
+	blue300: "var(--crr3d11b)",
+	blue400: "var(--crr3d11c)",
+	blue500: "var(--crr3d11d)",
+	blue600: "var(--crr3d11e)",
+	blue700: "var(--crr3d11f)",
+	blue800: "var(--crr3d11g)",
+	blue900: "var(--crr3d11h)"
 }, i = {
 	xxs: "var(--gn271l0)",
 	xs: "var(--gn271l1)",
@@ -138,7 +150,9 @@ var t = {
 	snug: "var(--_1ybwetq2)",
 	normal: "var(--_1ybwetq3)",
 	relaxed: "var(--_1ybwetq4)",
-	loose: "var(--_1ybwetq5)"
+	condensed: "var(--_1ybwetq5)",
+	compact: "var(--_1ybwetq6)",
+	loose: "var(--_1ybwetq7)"
 }, d = {
 	none: "var(--_1fh9yx40)",
 	sm: "var(--_1fh9yx41)",
@@ -156,7 +170,127 @@ var t = {
 	sticky: "var(--_1alu3u84)",
 	overlay: "var(--_1alu3u85)",
 	modal: "var(--_1alu3u86)"
-}, p = "y5q6570", m = {
+}, p = {
+	none: "var(--_1amctni0)",
+	wide: "var(--_1amctni1)",
+	snug: "var(--_1amctni2)",
+	tight: "var(--_1amctni3)",
+	tighter: "var(--_1amctni4)",
+	tightest: "var(--_1amctni5)"
+}, m = {
+	bodyBase: {
+		fontSize: "var(--_9fdc020)",
+		fontWeight: "var(--_9fdc021)",
+		lineHeight: "var(--_9fdc022)",
+		letterSpacing: "var(--_9fdc023)"
+	},
+	bodySm: {
+		fontSize: "var(--_9fdc024)",
+		fontWeight: "var(--_9fdc025)",
+		lineHeight: "var(--_9fdc026)",
+		letterSpacing: "var(--_9fdc027)"
+	},
+	bodyLg: {
+		fontSize: "var(--_9fdc028)",
+		fontWeight: "var(--_9fdc029)",
+		lineHeight: "var(--_9fdc02a)",
+		letterSpacing: "var(--_9fdc02b)"
+	},
+	labelBase: {
+		fontSize: "var(--_9fdc02c)",
+		fontWeight: "var(--_9fdc02d)",
+		lineHeight: "var(--_9fdc02e)",
+		letterSpacing: "var(--_9fdc02f)"
+	},
+	labelSm: {
+		fontSize: "var(--_9fdc02g)",
+		fontWeight: "var(--_9fdc02h)",
+		lineHeight: "var(--_9fdc02i)",
+		letterSpacing: "var(--_9fdc02j)"
+	},
+	labelLg: {
+		fontSize: "var(--_9fdc02k)",
+		fontWeight: "var(--_9fdc02l)",
+		lineHeight: "var(--_9fdc02m)",
+		letterSpacing: "var(--_9fdc02n)"
+	},
+	headingH1: {
+		fontSize: "var(--_9fdc02o)",
+		fontWeight: "var(--_9fdc02p)",
+		lineHeight: "var(--_9fdc02q)",
+		letterSpacing: "var(--_9fdc02r)"
+	},
+	headingH2: {
+		fontSize: "var(--_9fdc02s)",
+		fontWeight: "var(--_9fdc02t)",
+		lineHeight: "var(--_9fdc02u)",
+		letterSpacing: "var(--_9fdc02v)"
+	},
+	headingH3: {
+		fontSize: "var(--_9fdc02w)",
+		fontWeight: "var(--_9fdc02x)",
+		lineHeight: "var(--_9fdc02y)",
+		letterSpacing: "var(--_9fdc02z)"
+	},
+	headingH4: {
+		fontSize: "var(--_9fdc0210)",
+		fontWeight: "var(--_9fdc0211)",
+		lineHeight: "var(--_9fdc0212)",
+		letterSpacing: "var(--_9fdc0213)"
+	},
+	headingH5: {
+		fontSize: "var(--_9fdc0214)",
+		fontWeight: "var(--_9fdc0215)",
+		lineHeight: "var(--_9fdc0216)",
+		letterSpacing: "var(--_9fdc0217)"
+	},
+	headingH6: {
+		fontSize: "var(--_9fdc0218)",
+		fontWeight: "var(--_9fdc0219)",
+		lineHeight: "var(--_9fdc021a)",
+		letterSpacing: "var(--_9fdc021b)"
+	},
+	displayLg: {
+		fontSize: "var(--_9fdc021c)",
+		fontWeight: "var(--_9fdc021d)",
+		lineHeight: "var(--_9fdc021e)",
+		letterSpacing: "var(--_9fdc021f)"
+	},
+	displayXl: {
+		fontSize: "var(--_9fdc021g)",
+		fontWeight: "var(--_9fdc021h)",
+		lineHeight: "var(--_9fdc021i)",
+		letterSpacing: "var(--_9fdc021j)"
+	},
+	display2xl: {
+		fontSize: "var(--_9fdc021k)",
+		fontWeight: "var(--_9fdc021l)",
+		lineHeight: "var(--_9fdc021m)",
+		letterSpacing: "var(--_9fdc021n)"
+	},
+	overline: {
+		fontSize: "var(--_9fdc021o)",
+		fontWeight: "var(--_9fdc021p)",
+		lineHeight: "var(--_9fdc021q)",
+		letterSpacing: "var(--_9fdc021r)"
+	},
+	caption: {
+		fontSize: "var(--_9fdc021s)",
+		fontWeight: "var(--_9fdc021t)",
+		lineHeight: "var(--_9fdc021u)",
+		letterSpacing: "var(--_9fdc021v)"
+	}
+}, h = {
+	durationInstant: "var(--_159077d0)",
+	durationFast: "var(--_159077d1)",
+	durationBase: "var(--_159077d2)",
+	durationSlow: "var(--_159077d3)",
+	durationSlower: "var(--_159077d4)",
+	easingLinear: "var(--_159077d5)",
+	easingEaseIn: "var(--_159077d6)",
+	easingEaseOut: "var(--_159077d7)",
+	easingEaseInOut: "var(--_159077d8)"
+}, g = "y5q6570", _ = {
 	none: "y5q6571",
 	px: "y5q6572",
 	xxs: "y5q6573",
@@ -172,13 +306,13 @@ var t = {
 	xl6: "y5q657d",
 	xl7: "y5q657e",
 	xl8: "y5q657f"
-}, h = {
+}, v = {
 	start: "y5q657g",
 	center: "y5q657h",
 	end: "y5q657i",
 	stretch: "y5q657j",
 	baseline: "y5q657k"
-}, g = {
+}, y = {
 	start: "y5q657l",
 	center: "y5q657m",
 	end: "y5q657n",
@@ -188,13 +322,13 @@ var t = {
 };
 //#endregion
 //#region src/design-system/package/ui/primitives/Stack/adapters/Stack.react.tsx
-function _({ as: t, gap: n, align: r = "stretch", justify: i = "start", children: a, className: o, ...s }) {
+function b({ as: t, gap: n, align: r = "stretch", justify: i = "start", children: a, className: o, ...s }) {
 	return /* @__PURE__ */ e(t ?? "div", {
 		className: [
-			p,
-			n === void 0 ? void 0 : m[n],
-			h[r],
-			g[i],
+			g,
+			n === void 0 ? void 0 : _[n],
+			v[r],
+			y[i],
 			o
 		].filter(Boolean).join(" "),
 		...s,
@@ -203,7 +337,7 @@ function _({ as: t, gap: n, align: r = "stretch", justify: i = "start", children
 }
 //#endregion
 //#region src/design-system/package/ui/primitives/Inline/Inline.css.ts
-var v = "_1wqyejm0", y = "_1wqyejm1", b = {
+var x = "_1wqyejm0", S = "_1wqyejm1", C = {
 	none: "_1wqyejm2",
 	px: "_1wqyejm3",
 	xxs: "_1wqyejm4",
@@ -219,13 +353,13 @@ var v = "_1wqyejm0", y = "_1wqyejm1", b = {
 	xl6: "_1wqyejme",
 	xl7: "_1wqyejmf",
 	xl8: "_1wqyejmg"
-}, x = {
+}, w = {
 	start: "_1wqyejmh",
 	center: "_1wqyejmi",
 	end: "_1wqyejmj",
 	stretch: "_1wqyejmk",
 	baseline: "_1wqyejml"
-}, S = {
+}, T = {
 	start: "_1wqyejmm",
 	center: "_1wqyejmn",
 	end: "_1wqyejmo",
@@ -235,14 +369,14 @@ var v = "_1wqyejm0", y = "_1wqyejm1", b = {
 };
 //#endregion
 //#region src/design-system/package/ui/primitives/Inline/adapters/Inline.react.tsx
-function C({ as: t, gap: n, align: r = "center", justify: i = "start", wrap: a = !1, children: o, className: s, ...c }) {
+function E({ as: t, gap: n, align: r = "center", justify: i = "start", wrap: a = !1, children: o, className: s, ...c }) {
 	return /* @__PURE__ */ e(t ?? "div", {
 		className: [
-			v,
-			a ? y : void 0,
-			n === void 0 ? void 0 : b[n],
-			x[r],
-			S[i],
+			x,
+			a ? S : void 0,
+			n === void 0 ? void 0 : C[n],
+			w[r],
+			T[i],
 			s
 		].filter(Boolean).join(" "),
 		...c,
@@ -251,17 +385,17 @@ function C({ as: t, gap: n, align: r = "center", justify: i = "start", wrap: a =
 }
 //#endregion
 //#region src/design-system/package/ui/primitives/Box/Box.css.ts
-var w = "_1okjbro0";
+var D = "_1okjbro0";
 //#endregion
 //#region src/design-system/package/ui/primitives/Box/adapters/Box.react.tsx
-function T({ as: t, padding: n, paddingX: r, paddingY: i, children: a, className: o, style: s, ...l }) {
+function O({ as: t, padding: n, paddingX: r, paddingY: i, children: a, className: o, style: s, ...l }) {
 	let u = t ?? "div", d = {
 		...n && { padding: c[n] },
 		...r && { paddingInline: c[r] },
 		...i && { paddingBlock: c[i] }
 	};
 	return /* @__PURE__ */ e(u, {
-		className: [w, o].filter(Boolean).join(" "),
+		className: [D, o].filter(Boolean).join(" "),
 		style: {
 			...d,
 			...s
@@ -271,4 +405,34 @@ function T({ as: t, padding: n, paddingX: r, paddingY: i, children: a, className
 	});
 }
 //#endregion
-export { T as Box, C as Inline, _ as Stack, n as colorVars, t as fontFamilyVars, s as fontSizeVars, l as fontWeightVars, i as heightVars, a as iconSizeVars, u as lineHeightVars, r as paletteVars, o as radiusVars, d as shadowVars, c as spacingVars, f as zIndexVars };
+//#region src/design-system/package/ui/primitives/Text/Text.css.ts
+var k = {
+	bodyBase: "_1kk7qb30",
+	bodySm: "_1kk7qb31",
+	bodyLg: "_1kk7qb32",
+	labelBase: "_1kk7qb33",
+	labelSm: "_1kk7qb34",
+	labelLg: "_1kk7qb35",
+	headingH1: "_1kk7qb36",
+	headingH2: "_1kk7qb37",
+	headingH3: "_1kk7qb38",
+	headingH4: "_1kk7qb39",
+	headingH5: "_1kk7qb3a",
+	headingH6: "_1kk7qb3b",
+	displayLg: "_1kk7qb3c",
+	displayXl: "_1kk7qb3d",
+	display2xl: "_1kk7qb3e",
+	overline: "_1kk7qb3f",
+	caption: "_1kk7qb3g"
+};
+//#endregion
+//#region src/design-system/package/ui/primitives/Text/adapters/Text.react.tsx
+function A({ as: t, variant: n, children: r, className: i, ...a }) {
+	return /* @__PURE__ */ e(t ?? "p", {
+		className: [k[n], i].filter(Boolean).join(" "),
+		...a,
+		children: r
+	});
+}
+//#endregion
+export { O as Box, E as Inline, b as Stack, A as Text, n as colorVars, t as fontFamilyVars, s as fontSizeVars, l as fontWeightVars, i as heightVars, a as iconSizeVars, p as letterSpacingVars, u as lineHeightVars, h as motionVars, r as paletteVars, o as radiusVars, d as shadowVars, c as spacingVars, m as typographyVars, f as zIndexVars };

package/dist/style.css

@@ -1,2 +1,2 @@
-:root{--_147ti5g0:"TWK Everett", system-ui, sans-serif;--_147ti5g1:ui-monospace, Consolas, monospace;--crr3d10:#e0f9fc;--crr3d11:#b8eef5;--crr3d12:#80e2ee;--crr3d13:#42d8ec;--crr3d14:#20bdd6;--crr3d15:#1897ad;--crr3d16:#117287;--crr3d17:#0a4e5e;--crr3d18:#052a33;--crr3d19:#ffe9e5;--crr3d1a:#ffbfb3;--crr3d1b:#ff9280;--crr3d1c:#ff6650;--crr3d1d:#ff462d;--crr3d1e:#e83015;--crr3d1f:#c42208;--crr3d1g:#901905;--crr3d1h:#3d0a02;--crr3d1i:#e8e8e8;--crr3d1j:#c8c8c8;--crr3d1k:#a8a8a8;--crr3d1l:#848484;--crr3d1m:#666;--crr3d1n:#525252;--crr3d1o:#3a3a3a;--crr3d1p:#252525;--crr3d1q:#181818;--crr3d1r:#e5f8e2;--crr3d1s:#bbe8b4;--crr3d1t:#7dd374;--crr3d1u:#4dc043;--crr3d1v:#2bb309;--crr3d1w:#1e8c06;--crr3d1x:#145f04;--crr3d1y:#0c3e02;--crr3d1z:#062001;--crr3d110:#fff3e0;--crr3d111:#ffe0a0;--crr3d112:#ffcc6a;--crr3d113:#ffb237;--crr3d114:#ff9800;--crr3d115:#cc7a00;--crr3d116:#995b00;--crr3d117:#663d00;--crr3d118:#332000;--n4rd7s0:#2b2d2e;--n4rd7s1:#181818;--n4rd7s2:#252525;--n4rd7s3:#2f3031;--n4rd7s4:var(--crr3d1d);--n4rd7s5:var(--crr3d1h);--n4rd7s6:var(--crr3d13);--n4rd7s7:var(--crr3d18);--n4rd7s8:#343434;--n4rd7s9:var(--crr3d1n);--n4rd7sa:#2a2a2a;--n4rd7sb:#fff;--n4rd7sc:var(--crr3d1l);--n4rd7sd:var(--crr3d1j);--n4rd7se:#181818;--n4rd7sf:#0a1f22;--n4rd7sg:var(--crr3d1v);--n4rd7sh:var(--crr3d1z);--n4rd7si:var(--crr3d113);--n4rd7sj:var(--crr3d1c);--n4rd7sk:var(--crr3d118);--n4rd7sl:var(--crr3d1d);--n4rd7sm:var(--crr3d1h);--gn271l0:20px;--gn271l1:24px;--gn271l2:32px;--gn271l3:48px;--gn271l4:56px;--gn271l5:72px;--_1r3v8qb0:12px;--_1r3v8qb1:14px;--_1r3v8qb2:16px;--_1r3v8qb3:24px;--_1r3v8qb4:32px;--_17uaar60:2px;--_17uaar61:4px;--_17uaar62:6px;--_17uaar63:8px;--_17uaar64:16px;--g2g2zb0:10px;--g2g2zb1:12px;--g2g2zb2:14px;--g2g2zb3:16px;--g2g2zb4:18px;--g2g2zb5:20px;--g2g2zb6:24px;--g2g2zb7:30px;--g2g2zb8:36px;--g2g2zb9:48px;--g2g2zba:60px;--g2g2zbb:72px;--g2g2zbc:96px;--_6tzq000:0px;--_6tzq001:1px;--_6tzq002:2px;--_6tzq003:4px;--_6tzq004:8px;--_6tzq005:16px;--_6tzq006:24px;--_6tzq007:32px;--_6tzq008:48px;--_6tzq009:64px;--_6tzq00a:96px;--_6tzq00b:128px;--_6tzq00c:192px;--_6tzq00d:256px;--_6tzq00e:384px;--scju2v0:100;--scju2v1:200;--scju2v2:300;--scju2v3:400;--scju2v4:500;--scju2v5:600;--scju2v6:700;--scju2v7:800;--scju2v8:900;--_1ybwetq0:1;--_1ybwetq1:1.25;--_1ybwetq2:1.375;--_1ybwetq3:1.5;--_1ybwetq4:1.625;--_1ybwetq5:2;--_1fh9yx40:none;--_1fh9yx41:0 1px 2px 0 #00000040;--_1fh9yx42:0 1px 3px 0 #0000004d, 0 1px 2px -1px #0000004d;--_1fh9yx43:0 4px 6px -1px #00000059, 0 2px 4px -2px #00000059;--_1fh9yx44:0 10px 15px -3px #0006, 0 4px 6px -4px #0006;--_1fh9yx45:0 20px 25px -5px #0006, 0 8px 10px -6px #0006;--_1fh9yx46:0 25px 50px -12px #00000080;--_1fh9yx47:inset 0 2px 4px 0 #00000040;--_1alu3u80:-1;--_1alu3u81:0;--_1alu3u82:10;--_1alu3u83:20;--_1alu3u84:30;--_1alu3u85:40;--_1alu3u86:50}.y5q6570{flex-direction:column;display:flex}.y5q6571{gap:var(--_6tzq000)}.y5q6572{gap:var(--_6tzq001)}.y5q6573{gap:var(--_6tzq002)}.y5q6574{gap:var(--_6tzq003)}.y5q6575{gap:var(--_6tzq004)}.y5q6576{gap:var(--_6tzq005)}.y5q6577{gap:var(--_6tzq006)}.y5q6578{gap:var(--_6tzq007)}.y5q6579{gap:var(--_6tzq008)}.y5q657a{gap:var(--_6tzq009)}.y5q657b{gap:var(--_6tzq00a)}.y5q657c{gap:var(--_6tzq00b)}.y5q657d{gap:var(--_6tzq00c)}.y5q657e{gap:var(--_6tzq00d)}.y5q657f{gap:var(--_6tzq00e)}.y5q657g{align-items:flex-start}.y5q657h{align-items:center}.y5q657i{align-items:flex-end}.y5q657j{align-items:stretch}.y5q657k{align-items:baseline}.y5q657l{justify-content:flex-start}.y5q657m{justify-content:center}.y5q657n{justify-content:flex-end}.y5q657o{justify-content:space-between}.y5q657p{justify-content:space-around}.y5q657q{justify-content:space-evenly}._1wqyejm0{flex-flow:row;display:flex}._1wqyejm1{flex-wrap:wrap}._1wqyejm2{gap:var(--_6tzq000)}._1wqyejm3{gap:var(--_6tzq001)}._1wqyejm4{gap:var(--_6tzq002)}._1wqyejm5{gap:var(--_6tzq003)}._1wqyejm6{gap:var(--_6tzq004)}._1wqyejm7{gap:var(--_6tzq005)}._1wqyejm8{gap:var(--_6tzq006)}._1wqyejm9{gap:var(--_6tzq007)}._1wqyejma{gap:var(--_6tzq008)}._1wqyejmb{gap:var(--_6tzq009)}._1wqyejmc{gap:var(--_6tzq00a)}._1wqyejmd{gap:var(--_6tzq00b)}._1wqyejme{gap:var(--_6tzq00c)}._1wqyejmf{gap:var(--_6tzq00d)}._1wqyejmg{gap:var(--_6tzq00e)}._1wqyejmh{align-items:flex-start}._1wqyejmi{align-items:center}._1wqyejmj{align-items:flex-end}._1wqyejmk{align-items:stretch}._1wqyejml{align-items:baseline}._1wqyejmm{justify-content:flex-start}._1wqyejmn{justify-content:center}._1wqyejmo{justify-content:flex-end}._1wqyejmp{justify-content:space-between}._1wqyejmq{justify-content:space-around}._1wqyejmr{justify-content:space-evenly}._1okjbro0{box-sizing:border-box}
+:root{--_147ti5g0:"TWK Everett", system-ui, sans-serif;--_147ti5g1:ui-monospace, Consolas, monospace;--crr3d10:#e0f9fc;--crr3d11:#b8eef5;--crr3d12:#80e2ee;--crr3d13:#42d8ec;--crr3d14:#20bdd6;--crr3d15:#1897ad;--crr3d16:#117287;--crr3d17:#0a4e5e;--crr3d18:#052a33;--crr3d19:#ffe9e5;--crr3d1a:#ffbfb3;--crr3d1b:#ff9280;--crr3d1c:#ff6650;--crr3d1d:#ff462d;--crr3d1e:#e83015;--crr3d1f:#c42208;--crr3d1g:#901905;--crr3d1h:#3d0a02;--crr3d1i:#e8e8e8;--crr3d1j:#c8c8c8;--crr3d1k:#a8a8a8;--crr3d1l:#848484;--crr3d1m:#666;--crr3d1n:#525252;--crr3d1o:#3a3a3a;--crr3d1p:#252525;--crr3d1q:#181818;--crr3d1r:#e5f8e2;--crr3d1s:#bbe8b4;--crr3d1t:#7dd374;--crr3d1u:#4dc043;--crr3d1v:#2bb309;--crr3d1w:#1e8c06;--crr3d1x:#145f04;--crr3d1y:#0c3e02;--crr3d1z:#062001;--crr3d110:#fff3e0;--crr3d111:#ffe0a0;--crr3d112:#ffcc6a;--crr3d113:#ffb237;--crr3d114:#ff9800;--crr3d115:#cc7a00;--crr3d116:#995b00;--crr3d117:#663d00;--crr3d118:#332000;--crr3d119:#def;--crr3d11a:#bad8fe;--crr3d11b:#87b9fc;--crr3d11c:#5a9af7;--crr3d11d:#3b82f6;--crr3d11e:#2563eb;--crr3d11f:#1a46c4;--crr3d11g:#112f8a;--crr3d11h:#071650}[data-theme=light]{--n4rd7s0:#fff;--n4rd7s1:#f6f6f6;--n4rd7s2:#eee;--n4rd7s3:var(--crr3d1i);--n4rd7s4:var(--crr3d1e);--n4rd7s5:var(--crr3d19);--n4rd7s6:var(--crr3d16);--n4rd7s7:var(--crr3d10);--n4rd7s8:var(--crr3d17);--n4rd7s9:var(--crr3d1j);--n4rd7sa:var(--crr3d1l);--n4rd7sb:var(--crr3d1i);--n4rd7sc:#1a1a1a;--n4rd7sd:var(--crr3d1m);--n4rd7se:var(--crr3d1k);--n4rd7sf:#fff;--n4rd7sg:#fff;--n4rd7sh:var(--crr3d1w);--n4rd7si:var(--crr3d1r);--n4rd7sj:var(--crr3d115);--n4rd7sk:var(--crr3d1e);--n4rd7sl:var(--crr3d110);--n4rd7sm:var(--crr3d1e);--n4rd7sn:var(--crr3d19);--n4rd7so:var(--crr3d11e);--n4rd7sp:var(--crr3d119)}:root,[data-theme=dark]{--n4rd7s0:#2b2d2e;--n4rd7s1:#181818;--n4rd7s2:#252525;--n4rd7s3:#2f3031;--n4rd7s4:var(--crr3d1d);--n4rd7s5:var(--crr3d1h);--n4rd7s6:var(--crr3d13);--n4rd7s7:var(--crr3d18);--n4rd7s8:#3a5053;--n4rd7s9:#343434;--n4rd7sa:var(--crr3d1n);--n4rd7sb:#2a2a2a;--n4rd7sc:#fff;--n4rd7sd:var(--crr3d1l);--n4rd7se:var(--crr3d1j);--n4rd7sf:#181818;--n4rd7sg:#0a1f22;--n4rd7sh:var(--crr3d1v);--n4rd7si:var(--crr3d1z);--n4rd7sj:var(--crr3d113);--n4rd7sk:var(--crr3d1c);--n4rd7sl:var(--crr3d118);--n4rd7sm:var(--crr3d1d);--n4rd7sn:var(--crr3d1h);--n4rd7so:var(--crr3d11d);--n4rd7sp:var(--crr3d11h)}:root{--gn271l0:20px;--gn271l1:24px;--gn271l2:32px;--gn271l3:48px;--gn271l4:56px;--gn271l5:72px;--_1r3v8qb0:12px;--_1r3v8qb1:14px;--_1r3v8qb2:16px;--_1r3v8qb3:24px;--_1r3v8qb4:32px;--_17uaar60:2px;--_17uaar61:4px;--_17uaar62:6px;--_17uaar63:8px;--_17uaar64:16px;--g2g2zb0:10px;--g2g2zb1:12px;--g2g2zb2:14px;--g2g2zb3:16px;--g2g2zb4:18px;--g2g2zb5:20px;--g2g2zb6:24px;--g2g2zb7:30px;--g2g2zb8:36px;--g2g2zb9:48px;--g2g2zba:60px;--g2g2zbb:72px;--g2g2zbc:96px;--_6tzq000:0px;--_6tzq001:1px;--_6tzq002:2px;--_6tzq003:4px;--_6tzq004:8px;--_6tzq005:16px;--_6tzq006:24px;--_6tzq007:32px;--_6tzq008:48px;--_6tzq009:64px;--_6tzq00a:96px;--_6tzq00b:128px;--_6tzq00c:192px;--_6tzq00d:256px;--_6tzq00e:384px;--scju2v0:100;--scju2v1:200;--scju2v2:300;--scju2v3:400;--scju2v4:500;--scju2v5:600;--scju2v6:700;--scju2v7:800;--scju2v8:900;--_1ybwetq0:1;--_1ybwetq1:1.25;--_1ybwetq2:1.375;--_1ybwetq3:1.5;--_1ybwetq4:1.6;--_1ybwetq5:1.2;--_1ybwetq6:1.1;--_1ybwetq7:2;--_1fh9yx40:none;--_1fh9yx41:0 1px 2px 0 #00000040;--_1fh9yx42:0 1px 3px 0 #0000004d, 0 1px 2px -1px #0000004d;--_1fh9yx43:0 4px 6px -1px #00000059, 0 2px 4px -2px #00000059;--_1fh9yx44:0 10px 15px -3px #0006, 0 4px 6px -4px #0006;--_1fh9yx45:0 20px 25px -5px #0006, 0 8px 10px -6px #0006;--_1fh9yx46:0 25px 50px -12px #00000080;--_1fh9yx47:inset 0 2px 4px 0 #00000040;--_1alu3u80:-1;--_1alu3u81:0;--_1alu3u82:10;--_1alu3u83:20;--_1alu3u84:30;--_1alu3u85:40;--_1alu3u86:50;--_1amctni0:0em;--_1amctni1:.05em;--_1amctni2:-.005em;--_1amctni3:-.01em;--_1amctni4:-.015em;--_1amctni5:-.02em;--_9fdc020:var(--g2g2zb3);--_9fdc021:var(--scju2v3);--_9fdc022:var(--_1ybwetq4);--_9fdc023:var(--_1amctni0);--_9fdc024:var(--g2g2zb2);--_9fdc025:var(--scju2v3);--_9fdc026:var(--_1ybwetq4);--_9fdc027:var(--_1amctni0);--_9fdc028:var(--g2g2zb4);--_9fdc029:var(--scju2v3);--_9fdc02a:var(--_1ybwetq4);--_9fdc02b:var(--_1amctni0);--_9fdc02c:var(--g2g2zb2);--_9fdc02d:var(--scju2v4);--_9fdc02e:var(--_1ybwetq3);--_9fdc02f:var(--_1amctni0);--_9fdc02g:var(--g2g2zb1);--_9fdc02h:var(--scju2v4);--_9fdc02i:var(--_1ybwetq3);--_9fdc02j:var(--_1amctni0);--_9fdc02k:var(--g2g2zb3);--_9fdc02l:var(--scju2v4);--_9fdc02m:var(--_1ybwetq3);--_9fdc02n:var(--_1amctni0);--_9fdc02o:var(--g2g2zb8);--_9fdc02p:var(--scju2v6);--_9fdc02q:var(--_1ybwetq5);--_9fdc02r:var(--_1amctni3);--_9fdc02s:var(--g2g2zb7);--_9fdc02t:var(--scju2v6);--_9fdc02u:var(--_1ybwetq5);--_9fdc02v:var(--_1amctni2);--_9fdc02w:var(--g2g2zb6);--_9fdc02x:var(--scju2v6);--_9fdc02y:var(--_1ybwetq5);--_9fdc02z:var(--_1amctni0);--_9fdc0210:var(--g2g2zb5);--_9fdc0211:var(--scju2v4);--_9fdc0212:var(--_1ybwetq5);--_9fdc0213:var(--_1amctni0);--_9fdc0214:var(--g2g2zb4);--_9fdc0215:var(--scju2v4);--_9fdc0216:var(--_1ybwetq5);--_9fdc0217:var(--_1amctni0);--_9fdc0218:var(--g2g2zb3);--_9fdc0219:var(--scju2v6);--_9fdc021a:var(--_1ybwetq5);--_9fdc021b:var(--_1amctni0);--_9fdc021c:var(--g2g2zb9);--_9fdc021d:var(--scju2v6);--_9fdc021e:var(--_1ybwetq6);--_9fdc021f:var(--_1amctni4);--_9fdc021g:var(--g2g2zba);--_9fdc021h:var(--scju2v6);--_9fdc021i:var(--_1ybwetq6);--_9fdc021j:var(--_1amctni5);--_9fdc021k:var(--g2g2zbb);--_9fdc021l:var(--scju2v6);--_9fdc021m:var(--_1ybwetq6);--_9fdc021n:var(--_1amctni5);--_9fdc021o:var(--g2g2zb0);--_9fdc021p:var(--scju2v4);--_9fdc021q:var(--_1ybwetq3);--_9fdc021r:var(--_1amctni1);--_9fdc021s:var(--g2g2zb1);--_9fdc021t:var(--scju2v3);--_9fdc021u:var(--_1ybwetq3);--_9fdc021v:var(--_1amctni0);--_159077d0:0s;--_159077d1:.1s;--_159077d2:.2s;--_159077d3:.3s;--_159077d4:.5s;--_159077d5:linear;--_159077d6:cubic-bezier(.4, 0, 1, 1);--_159077d7:cubic-bezier(0, 0, .2, 1);--_159077d8:cubic-bezier(.4, 0, .2, 1)}.y5q6570{flex-direction:column;display:flex}.y5q6571{gap:var(--_6tzq000)}.y5q6572{gap:var(--_6tzq001)}.y5q6573{gap:var(--_6tzq002)}.y5q6574{gap:var(--_6tzq003)}.y5q6575{gap:var(--_6tzq004)}.y5q6576{gap:var(--_6tzq005)}.y5q6577{gap:var(--_6tzq006)}.y5q6578{gap:var(--_6tzq007)}.y5q6579{gap:var(--_6tzq008)}.y5q657a{gap:var(--_6tzq009)}.y5q657b{gap:var(--_6tzq00a)}.y5q657c{gap:var(--_6tzq00b)}.y5q657d{gap:var(--_6tzq00c)}.y5q657e{gap:var(--_6tzq00d)}.y5q657f{gap:var(--_6tzq00e)}.y5q657g{align-items:flex-start}.y5q657h{align-items:center}.y5q657i{align-items:flex-end}.y5q657j{align-items:stretch}.y5q657k{align-items:baseline}.y5q657l{justify-content:flex-start}.y5q657m{justify-content:center}.y5q657n{justify-content:flex-end}.y5q657o{justify-content:space-between}.y5q657p{justify-content:space-around}.y5q657q{justify-content:space-evenly}._1wqyejm0{flex-flow:row;display:flex}._1wqyejm1{flex-wrap:wrap}._1wqyejm2{gap:var(--_6tzq000)}._1wqyejm3{gap:var(--_6tzq001)}._1wqyejm4{gap:var(--_6tzq002)}._1wqyejm5{gap:var(--_6tzq003)}._1wqyejm6{gap:var(--_6tzq004)}._1wqyejm7{gap:var(--_6tzq005)}._1wqyejm8{gap:var(--_6tzq006)}._1wqyejm9{gap:var(--_6tzq007)}._1wqyejma{gap:var(--_6tzq008)}._1wqyejmb{gap:var(--_6tzq009)}._1wqyejmc{gap:var(--_6tzq00a)}._1wqyejmd{gap:var(--_6tzq00b)}._1wqyejme{gap:var(--_6tzq00c)}._1wqyejmf{gap:var(--_6tzq00d)}._1wqyejmg{gap:var(--_6tzq00e)}._1wqyejmh{align-items:flex-start}._1wqyejmi{align-items:center}._1wqyejmj{align-items:flex-end}._1wqyejmk{align-items:stretch}._1wqyejml{align-items:baseline}._1wqyejmm{justify-content:flex-start}._1wqyejmn{justify-content:center}._1wqyejmo{justify-content:flex-end}._1wqyejmp{justify-content:space-between}._1wqyejmq{justify-content:space-around}._1wqyejmr{justify-content:space-evenly}._1okjbro0{box-sizing:border-box}._1kk7qb30{font-size:var(--_9fdc020);font-weight:var(--_9fdc021);line-height:var(--_9fdc022);letter-spacing:var(--_9fdc023);margin:0}._1kk7qb31{font-size:var(--_9fdc024);font-weight:var(--_9fdc025);line-height:var(--_9fdc026);letter-spacing:var(--_9fdc027);margin:0}._1kk7qb32{font-size:var(--_9fdc028);font-weight:var(--_9fdc029);line-height:var(--_9fdc02a);letter-spacing:var(--_9fdc02b);margin:0}._1kk7qb33{font-size:var(--_9fdc02c);font-weight:var(--_9fdc02d);line-height:var(--_9fdc02e);letter-spacing:var(--_9fdc02f);margin:0}._1kk7qb34{font-size:var(--_9fdc02g);font-weight:var(--_9fdc02h);line-height:var(--_9fdc02i);letter-spacing:var(--_9fdc02j);margin:0}._1kk7qb35{font-size:var(--_9fdc02k);font-weight:var(--_9fdc02l);line-height:var(--_9fdc02m);letter-spacing:var(--_9fdc02n);margin:0}._1kk7qb36{font-size:var(--_9fdc02o);font-weight:var(--_9fdc02p);line-height:var(--_9fdc02q);letter-spacing:var(--_9fdc02r);margin:0}._1kk7qb37{font-size:var(--_9fdc02s);font-weight:var(--_9fdc02t);line-height:var(--_9fdc02u);letter-spacing:var(--_9fdc02v);margin:0}._1kk7qb38{font-size:var(--_9fdc02w);font-weight:var(--_9fdc02x);line-height:var(--_9fdc02y);letter-spacing:var(--_9fdc02z);margin:0}._1kk7qb39{font-size:var(--_9fdc0210);font-weight:var(--_9fdc0211);line-height:var(--_9fdc0212);letter-spacing:var(--_9fdc0213);margin:0}._1kk7qb3a{font-size:var(--_9fdc0214);font-weight:var(--_9fdc0215);line-height:var(--_9fdc0216);letter-spacing:var(--_9fdc0217);margin:0}._1kk7qb3b{font-size:var(--_9fdc0218);font-weight:var(--_9fdc0219);line-height:var(--_9fdc021a);letter-spacing:var(--_9fdc021b);margin:0}._1kk7qb3c{font-size:var(--_9fdc021c);font-weight:var(--_9fdc021d);line-height:var(--_9fdc021e);letter-spacing:var(--_9fdc021f);margin:0}._1kk7qb3d{font-size:var(--_9fdc021g);font-weight:var(--_9fdc021h);line-height:var(--_9fdc021i);letter-spacing:var(--_9fdc021j);margin:0}._1kk7qb3e{font-size:var(--_9fdc021k);font-weight:var(--_9fdc021l);line-height:var(--_9fdc021m);letter-spacing:var(--_9fdc021n);margin:0}._1kk7qb3f{font-size:var(--_9fdc021o);font-weight:var(--_9fdc021p);line-height:var(--_9fdc021q);letter-spacing:var(--_9fdc021r);margin:0}._1kk7qb3g{font-size:var(--_9fdc021s);font-weight:var(--_9fdc021t);line-height:var(--_9fdc021u);letter-spacing:var(--_9fdc021v);margin:0}
 /*$vite$:1*/

package/dist/theme/index.d.ts

@@ -0,0 +1,3 @@
+export { applyTheme, getTheme } from './theme.ts';
+export type { Theme } from './theme.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/design-system/package/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAClD,YAAY,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC"}

package/dist/theme/theme.d.ts

@@ -0,0 +1,4 @@
+export type Theme = 'dark' | 'light';
+export declare function applyTheme(theme: Theme): void;
+export declare function getTheme(): Theme;
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/design-system/package/theme/theme.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AAErC,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAM7C;AAED,wBAAgB,QAAQ,IAAI,KAAK,CAEhC"}

package/dist/tokens/color/color.tokens.css.d.ts

@@ -7,6 +7,7 @@ export declare const colorVars: {
     brandPrimarySubtle: `var(--${string})`;
     brandAccent: `var(--${string})`;
     brandAccentSubtle: `var(--${string})`;
+    brandAccentHover: `var(--${string})`;
     borderDefault: `var(--${string})`;
     borderStrong: `var(--${string})`;
     borderSubtle: `var(--${string})`;
@@ -22,5 +23,7 @@ export declare const colorVars: {
     feedbackWarningSubtle: `var(--${string})`;
     feedbackDanger: `var(--${string})`;
     feedbackDangerSubtle: `var(--${string})`;
+    feedbackInfo: `var(--${string})`;
+    feedbackInfoSubtle: `var(--${string})`;
 };
 //# sourceMappingURL=color.tokens.css.d.ts.map

package/dist/tokens/color/color.tokens.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.tokens.css.d.ts","sourceRoot":"","sources":["../../../src/design-system/package/tokens/color/color.tokens.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;CAiCpB,CAAC"}
+{"version":3,"file":"color.tokens.css.d.ts","sourceRoot":"","sources":["../../../src/design-system/package/tokens/color/color.tokens.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCpB,CAAC"}

package/dist/tokens/index.d.ts

@@ -22,4 +22,10 @@ export { shadowVars } from './shadow/index.ts';
 export type { ShadowTokenKey } from './shadow/index.ts';
 export { zIndexVars } from './zIndex/index.ts';
 export type { ZIndexTokenKey } from './zIndex/index.ts';
+export { letterSpacingVars } from './letterSpacing/index.ts';
+export type { LetterSpacingTokenKey } from './letterSpacing/index.ts';
+export { typographyVars } from './typography/index.ts';
+export type { TypographyTokenKey } from './typography/index.ts';
+export { motionVars } from './motion/index.ts';
+export type { MotionTokenKey } from './motion/index.ts';
 //# sourceMappingURL=index.d.ts.map

package/dist/tokens/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/design-system/package/tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/design-system/package/tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,YAAY,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/tokens/letterSpacing/index.d.ts

@@ -0,0 +1,3 @@
+export { letterSpacingVars } from './letterSpacing.tokens.css.ts';
+export type { LetterSpacingTokenKey } from './letterSpacing.types.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/tokens/letterSpacing/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/design-system/package/tokens/letterSpacing/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,YAAY,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/tokens/letterSpacing/letterSpacing.tokens.css.d.ts

@@ -0,0 +1,9 @@
+export declare const letterSpacingVars: {
+    none: `var(--${string})`;
+    wide: `var(--${string})`;
+    snug: `var(--${string})`;
+    tight: `var(--${string})`;
+    tighter: `var(--${string})`;
+    tightest: `var(--${string})`;
+};
+//# sourceMappingURL=letterSpacing.tokens.css.d.ts.map

package/dist/tokens/letterSpacing/letterSpacing.tokens.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"letterSpacing.tokens.css.d.ts","sourceRoot":"","sources":["../../../src/design-system/package/tokens/letterSpacing/letterSpacing.tokens.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;;;;;;;CAO5B,CAAC"}

package/dist/tokens/letterSpacing/letterSpacing.types.d.ts

@@ -0,0 +1,3 @@
+import { letterSpacingVars } from './letterSpacing.tokens.css.ts';
+export type LetterSpacingTokenKey = keyof typeof letterSpacingVars;
+//# sourceMappingURL=letterSpacing.types.d.ts.map

package/dist/tokens/letterSpacing/letterSpacing.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"letterSpacing.types.d.ts","sourceRoot":"","sources":["../../../src/design-system/package/tokens/letterSpacing/letterSpacing.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAEvE,MAAM,MAAM,qBAAqB,GAAG,MAAM,OAAO,iBAAiB,CAAC"}

package/dist/tokens/lineHeight/lineHeight.tokens.css.d.ts

@@ -4,6 +4,8 @@ export declare const lineHeightVars: {
     snug: `var(--${string})`;
     normal: `var(--${string})`;
     relaxed: `var(--${string})`;
+    condensed: `var(--${string})`;
+    compact: `var(--${string})`;
     loose: `var(--${string})`;
 };
 //# sourceMappingURL=lineHeight.tokens.css.d.ts.map

package/dist/tokens/lineHeight/lineHeight.tokens.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lineHeight.tokens.css.d.ts","sourceRoot":"","sources":["../../../src/design-system/package/tokens/lineHeight/lineHeight.tokens.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;;;;;CAOzB,CAAC"}
+{"version":3,"file":"lineHeight.tokens.css.d.ts","sourceRoot":"","sources":["../../../src/design-system/package/tokens/lineHeight/lineHeight.tokens.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;;;;;;;CASzB,CAAC"}

package/dist/tokens/motion/index.d.ts

@@ -0,0 +1,3 @@
+export { motionVars } from './motion.tokens.css.ts';
+export type { MotionTokenKey } from './motion.types.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/tokens/motion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/design-system/package/tokens/motion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/tokens/motion/motion.tokens.css.d.ts

@@ -0,0 +1,12 @@
+export declare const motionVars: {
+    durationInstant: `var(--${string})`;
+    durationFast: `var(--${string})`;
+    durationBase: `var(--${string})`;
+    durationSlow: `var(--${string})`;
+    durationSlower: `var(--${string})`;
+    easingLinear: `var(--${string})`;
+    easingEaseIn: `var(--${string})`;
+    easingEaseOut: `var(--${string})`;
+    easingEaseInOut: `var(--${string})`;
+};
+//# sourceMappingURL=motion.tokens.css.d.ts.map

package/dist/tokens/motion/motion.tokens.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.tokens.css.d.ts","sourceRoot":"","sources":["../../../src/design-system/package/tokens/motion/motion.tokens.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;;;;;;;CAUrB,CAAC"}

package/dist/tokens/motion/motion.types.d.ts

@@ -0,0 +1,3 @@
+import { motionVars } from './motion.tokens.css.ts';
+export type MotionTokenKey = keyof typeof motionVars;
+//# sourceMappingURL=motion.types.d.ts.map

package/dist/tokens/motion/motion.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.types.d.ts","sourceRoot":"","sources":["../../../src/design-system/package/tokens/motion/motion.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEzD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,UAAU,CAAC"}

package/dist/tokens/palette/palette.tokens.css.d.ts

@@ -44,5 +44,14 @@ export declare const paletteVars: {
     amber700: `var(--${string})`;
     amber800: `var(--${string})`;
     amber900: `var(--${string})`;
+    blue100: `var(--${string})`;
+    blue200: `var(--${string})`;
+    blue300: `var(--${string})`;
+    blue400: `var(--${string})`;
+    blue500: `var(--${string})`;
+    blue600: `var(--${string})`;
+    blue700: `var(--${string})`;
+    blue800: `var(--${string})`;
+    blue900: `var(--${string})`;
 };
 //# sourceMappingURL=palette.tokens.css.d.ts.map

package/dist/tokens/palette/palette.tokens.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palette.tokens.css.d.ts","sourceRoot":"","sources":["../../../src/design-system/package/tokens/palette/palette.tokens.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDtB,CAAC"}
+{"version":3,"file":"palette.tokens.css.d.ts","sourceRoot":"","sources":["../../../src/design-system/package/tokens/palette/palette.tokens.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEtB,CAAC"}

package/dist/tokens/typography/index.d.ts

@@ -0,0 +1,3 @@
+export { typographyVars } from './typography.tokens.css.ts';
+export type { TypographyTokenKey } from './typography.types.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/tokens/typography/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/design-system/package/tokens/typography/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/tokens/typography/typography.tokens.css.d.ts

@@ -0,0 +1,105 @@
+export declare const typographyVars: {
+    bodyBase: {
+        fontSize: `var(--${string})`;
+        fontWeight: `var(--${string})`;
+        lineHeight: `var(--${string})`;
+        letterSpacing: `var(--${string})`;
+    };
+    bodySm: {
+        fontSize: `var(--${string})`;
+        fontWeight: `var(--${string})`;
+        lineHeight: `var(--${string})`;
+        letterSpacing: `var(--${string})`;
+    };
+    bodyLg: {
+        fontSize: `var(--${string})`;
+        fontWeight: `var(--${string})`;
+        lineHeight: `var(--${string})`;
+        letterSpacing: `var(--${string})`;
+    };
+    labelBase: {
+        fontSize: `var(--${string})`;
+        fontWeight: `var(--${string})`;
+        lineHeight: `var(--${string})`;
+        letterSpacing: `var(--${string})`;
+    };
+    labelSm: {
+        fontSize: `var(--${string})`;
+        fontWeight: `var(--${string})`;
+        lineHeight: `var(--${string})`;
+        letterSpacing: `var(--${string})`;
+    };
+    labelLg: {
+        fontSize: `var(--${string})`;
+        fontWeight: `var(--${string})`;
+        lineHeight: `var(--${string})`;
+        letterSpacing: `var(--${string})`;
+    };
+    headingH1: {
+        fontSize: `var(--${string})`;
+        fontWeight: `var(--${string})`;
+        lineHeight: `var(--${string})`;
+        letterSpacing: `var(--${string})`;
+    };
+    headingH2: {
+        fontSize: `var(--${string})`;
+        fontWeight: `var(--${string})`;
+        lineHeight: `var(--${string})`;
+        letterSpacing: `var(--${string})`;
+    };
+    headingH3: {
+        fontSize: `var(--${string})`;
+        fontWeight: `var(--${string})`;
+        lineHeight: `var(--${string})`;
+        letterSpacing: `var(--${string})`;
+    };
+    headingH4: {
+        fontSize: `var(--${string})`;
+        fontWeight: `var(--${string})`;
+        lineHeight: `var(--${string})`;
+        letterSpacing: `var(--${string})`;
+    };
+    headingH5: {
+        fontSize: `var(--${string})`;
+        fontWeight: `var(--${string})`;
+        lineHeight: `var(--${string})`;
+        letterSpacing: `var(--${string})`;
+    };
+    headingH6: {
+        fontSize: `var(--${string})`;
+        fontWeight: `var(--${string})`;
+        lineHeight: `var(--${string})`;
+        letterSpacing: `var(--${string})`;
+    };
+    displayLg: {
+        fontSize: `var(--${string})`;
+        fontWeight: `var(--${string})`;
+        lineHeight: `var(--${string})`;
+        letterSpacing: `var(--${string})`;
+    };
+    displayXl: {
+        fontSize: `var(--${string})`;
+        fontWeight: `var(--${string})`;
+        lineHeight: `var(--${string})`;
+        letterSpacing: `var(--${string})`;
+    };
+    display2xl: {
+        fontSize: `var(--${string})`;
+        fontWeight: `var(--${string})`;
+        lineHeight: `var(--${string})`;
+        letterSpacing: `var(--${string})`;
+    };
+    overline: {
+        fontSize: `var(--${string})`;
+        fontWeight: `var(--${string})`;
+        lineHeight: `var(--${string})`;
+        letterSpacing: `var(--${string})`;
+    };
+    caption: {
+        fontSize: `var(--${string})`;
+        fontWeight: `var(--${string})`;
+        lineHeight: `var(--${string})`;
+        letterSpacing: `var(--${string})`;
+    };
+};
+//# sourceMappingURL=typography.tokens.css.d.ts.map

package/dist/tokens/typography/typography.tokens.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.tokens.css.d.ts","sourceRoot":"","sources":["../../../src/design-system/package/tokens/typography/typography.tokens.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBzB,CAAC"}

package/dist/tokens/typography/typography.types.d.ts

@@ -0,0 +1,3 @@
+import { typographyVars } from './typography.tokens.css.ts';
+export type TypographyTokenKey = keyof typeof typographyVars;
+//# sourceMappingURL=typography.types.d.ts.map

package/dist/tokens/typography/typography.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.types.d.ts","sourceRoot":"","sources":["../../../src/design-system/package/tokens/typography/typography.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAEjE,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,cAAc,CAAC"}

package/dist/ui/primitives/Text/Text.css.d.ts

@@ -0,0 +1,2 @@
+export declare const variants: Record<"bodyBase" | "bodySm" | "bodyLg" | "labelBase" | "labelSm" | "labelLg" | "headingH1" | "headingH2" | "headingH3" | "headingH4" | "headingH5" | "headingH6" | "displayLg" | "displayXl" | "display2xl" | "overline" | "caption", string>;
+//# sourceMappingURL=Text.css.d.ts.map

package/dist/ui/primitives/Text/Text.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.css.d.ts","sourceRoot":"","sources":["../../../../src/design-system/package/ui/primitives/Text/Text.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,gPAMlB,CAAC"}

package/dist/ui/primitives/Text/Text.types.d.ts

@@ -0,0 +1,10 @@
+import { ElementType, ComponentPropsWithoutRef, ReactNode } from 'react';
+import { TypographyTokenKey } from '../../../tokens/index.ts';
+export interface TextOwnProps<T extends ElementType = 'p'> {
+    as?: T;
+    variant: TypographyTokenKey;
+    children?: ReactNode;
+    className?: string;
+}
+export type TextProps<T extends ElementType = 'p'> = TextOwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof TextOwnProps<T>>;
+//# sourceMappingURL=Text.types.d.ts.map

package/dist/ui/primitives/Text/Text.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.types.d.ts","sourceRoot":"","sources":["../../../../src/design-system/package/ui/primitives/Text/Text.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAEnE,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG;IACvD,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,OAAO,EAAE,kBAAkB,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,IAC/C,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC"}

package/dist/ui/primitives/Text/adapters/Text.react.d.ts

@@ -0,0 +1,4 @@
+import { ElementType } from 'react';
+import { TextProps } from '../Text.types.ts';
+export declare function Text<T extends ElementType = 'p'>({ as, variant, children, className, ...props }: TextProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Text.react.d.ts.map

package/dist/ui/primitives/Text/adapters/Text.react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.react.d.ts","sourceRoot":"","sources":["../../../../../src/design-system/package/ui/primitives/Text/adapters/Text.react.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElD,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,EAAE,EAChD,EAAE,EACF,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,CAAC,CAAC,2CAWd"}

package/dist/ui/primitives/Text/index.d.ts

@@ -0,0 +1,3 @@
+export { Text } from './adapters/Text.react.tsx';
+export type { TextProps } from './Text.types.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/primitives/Text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/design-system/package/ui/primitives/Text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AACjD,YAAY,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/ui/primitives/index.d.ts

@@ -4,4 +4,6 @@ export { Inline } from './Inline/index.ts';
 export type { InlineProps, InlineAlign, InlineJustify } from './Inline/index.ts';
 export { Box } from './Box/index.ts';
 export type { BoxProps } from './Box/index.ts';
+export { Text } from './Text/index.ts';
+export type { TextProps } from './Text/index.ts';
 //# sourceMappingURL=index.d.ts.map

package/dist/ui/primitives/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/design-system/package/ui/primitives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAE7E,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEjF,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,YAAY,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/design-system/package/ui/primitives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAE7E,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEjF,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,YAAY,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,YAAY,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loom-sdc/design-system",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -22,13 +22,10 @@
     "dist/fonts.css"
   ],
   "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
     "build:lib": "vite build --config vite.lib.config.ts",
     "release": "npm run build:lib && npm publish --access public",
     "lint": "eslint .",
-    "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6007",
     "build-storybook": "storybook build"
   },
   "peerDependencies": {
@@ -40,6 +37,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@figma/code-connect": "^1.4.4",
     "@microsoft/api-extractor": "^7.58.7",
     "@storybook/addon-docs": "^10.3.6",
     "@storybook/addon-vitest": "^10.3.6",