gd-design-library 1.8.2 → 1.8.3

package/llms.txt

@@ -84,7 +84,7 @@ Pre-built indexes for quick discovery:
 > Run `yarn build:ui` to regenerate. Do not edit the block between the markers manually.
 
 <!-- AUTO-GENERATED:COMPONENTS:START -->
-66 components total — generated from libs/ui/src/ai/schemas/ on 2026-05-05.
+66 components total — generated from libs/ui/src/ai/schemas/ on 2026-06-23.
 
 ## Other
 
@@ -643,13 +643,14 @@ Import: `import { Input } from 'gd-design-library'`
 
 Versatile form input component supporting multiple field types including text, email, password, checkbox, radio, and more. Includes built-in label, helper text, and adornment support.
 
-**Props:** `label`: string, `placeholder`: string, `value`: string, `variant`: "text"|"email"|"password"|"number"|"tel"|"url"|"search"|"radio"|"checkbox"|"date"|"time"|"month"|"week"|"color"|"range", `required`: boolean, `disabled`: boolean *(+10 more)*
+**Props:** `label`: string, `placeholder`: string, `value`: string, `variant`: "text"|"email"|"password"|"number"|"tel"|"url"|"search"|"radio"|"checkbox"|"date"|"time"|"month"|"week"|"color"|"range", `required`: boolean, `disabled`: boolean *(+12 more)*
 
 **Examples:**
   `<Input variant={InputVariantType.Email} label="Email Address" placeholder="user@example.com" required />`
   `<Input variant={InputVariantType.Password} label="Password" helperText="Must be at least 8 characters" />`
   `<Input variant={InputVariantType.Text} adornmentStart={<Icon name="search" />} placeholder="Search..." />`
   `<Input variant={InputVariantType.Checkbox} label="Remember me" checked={isChecked} onChange={handleChange} />`
+  `<Input variant={InputVariantType.Checkbox} label="Select all" indeterminate={hasPartial} checked={allSelected} onChange={handleSelectAll} />`
 
 ### InputFile
 
@@ -831,15 +832,13 @@ Import: `import { Switch } from 'gd-design-library'`
 
 Toggle switch for binary on/off states. Ideal for settings, preferences, and feature toggles.
 
-**Props:** `checked`: boolean, `disabled`: boolean, `isLoading`: boolean, `label`: string, `labelSide`: "left"|"right", `name`: string *(+2 more)*
+**Props:** `checked`: boolean, `disabled`: boolean, `isLoading`: boolean, `value`: string, `label`: "left"|"right", `name`: string *(+2 more)*
 
 **Examples:**
-  `<Switch checked={isEnabled} onValueChange={setIsEnabled}>Enable notifications</Switch>`
-  `<Switch label="left" checked={darkMode} onValueChange={toggleDarkMode}>Dark mode</Switch>`
-  `<Switch disabled={isLoading} checked={autoSave}>Auto-save</Switch>`
-  `<Switch isLoading={isLoading} checked={enabled} onValueChange={handleToggle}>Feature toggle with loading</Switch>`
-  `<Switch name="newsletter" onValueChange={handleNewsletterToggle}>Subscribe to newsletter</Switch>`
-  `<Switch onValueChange={handleChange}>Uncontrolled switch</Switch>`
+  `{ "type": "switch", "id": "notifications_switch", "value": "Enable notifications" }`
+  `{ "type": "switch", "id": "dark_mode_switch", "value": "Dark mode", "label": "left", "checked": false }`
+  `{ "type": "switch", "id": "autosave_switch", "value": "Auto-save", "disabled": true }`
+  `{ "type": "switch", "id": "loading_switch", "value": "Feature toggle", "isLoading": true }`
 
 ### Toggle
 
@@ -939,7 +938,7 @@ Radio button group component for single selection from multiple options with fle
 
 Import: `import { Checkbox } from 'gd-design-library'`
 
-Standalone checkbox atom with indeterminate state, size variants, and accessible labeling. Use for boolean toggles in forms and settings.
+Standalone checkbox atom with indeterminate state, size variants, and accessible labeling. Use for boolean toggles in forms and settings. In A2UI specs, represent checkboxes as { type: "input", variant: "checkbox" } — do NOT emit { type: "checkbox" }.
 
 **Props:** `checked`: boolean, `indeterminate`: boolean, `disabled`: boolean, `name`: string, `value`: string, `size`: 'sm' | 'md' *(+3 more)*
 
@@ -968,9 +967,9 @@ Multi-line text input organism with auto-growing rows, character count, attachme
 
 Import: `import { AttachmentFile } from 'gd-design-library'`
 
-File attachment chip that displays a selected file with its name, optional type and size metadata, and a remove action. Long file names truncate with ellipsis and show a tooltip on hover; long fileType values truncate with ellipsis. The separator between fileType and fileSize defaults to "·" and is configurable. Designed to render as a child of InputArea above the textarea, or standalone in any file-selection context.
+File attachment chip: file-copy icon on the left, bold file name (truncates with tooltip on hover), optional small metadata row (fileType · fileSize, both truncate), and a close/remove (×) button on the right. Horizontal inline chip, typically 40–48 px tall with rounded corners. Renders above the InputArea textarea or standalone. Use actions[] to wire the remove button in A2UI; in TSX use onRemove. Figma component set names: "AttachmentFile", "Attachment File", "File Chip", "File Tag", "attachment-chip". Also matches any chip/pill node that contains a file name + a remove/close affordance.
 
-**Props:** `fileName`: string, `fileType`: string, `fileSize`: string, `separator`: string, `fileIcon`: ReactNode, `onRemove`: () => void *(+4 more)*
+**Props:** `fileName`: string, `fileType`: string, `fileSize`: string, `separator`: string, `actions`: string[], `removeButtonLabel`: string *(+3 more)*
 
 **Examples:**
   `<AttachmentFile fileName="report.pdf" fileType="PDF" fileSize="1.2 MB" onRemove={() => removeFile(id)} />`
@@ -1140,7 +1139,7 @@ Import: `import { AvatarUser } from 'gd-design-library'`
 
 Composite avatar component that displays a user with avatar image, name, optional subtitle, and optional badge. Supports card and profile layout variants.
 
-**Props:** `name`: string, `variant`: "card"|"profile", `subtitle`: string, `src`: string, `alt`: string, `sizeVariant`: "xs"|"sm"|"md"|"lg"|"xl" *(+8 more)*
+**Props:** `name`: string, `variant`: "card"|"profile", `subtitle`: string, `description`: string, `src`: string, `alt`: string *(+11 more)*
 
 **Examples:**
   `<AvatarUser name="John Doe" />`
@@ -1427,7 +1426,7 @@ Import: `import { Button } from 'gd-design-library'`
 
 Clickable button with multiple style variants (primary, secondary, tertiary, outlined, text). Use actions[] to wire up A2UI interactions.
 
-**Props:** `label`: string, `variant`: "primary"|"secondary"|"tertiary"|"outlined"|"text"|"inherit", `disabled`: boolean, `isLoading`: boolean, `fullWidth`: boolean, `isIcon`: boolean *(+7 more)*
+**Props:** `label`: string, `variant`: "primary"|"secondary"|"tertiary"|"outlined"|"text"|"inherit", `disabled`: boolean, `isLoading`: boolean, `fullWidth`: boolean, `isIcon`: boolean *(+9 more)*
 
 **Quick Start:**
   - basic: `<Button onClick={handleClick}>Click me</Button>`
@@ -1493,15 +1492,15 @@ Clickable button with multiple style variants (primary, secondary, tertiary, out
 
 Import: `import { Link } from 'gd-design-library'`
 
-Accessible anchor component for navigation with support for internal and absolute URL destinations, multiple visual variants, and proper security attributes. A2UI SPEC: use top-level "label" for text, plus top-level "href", "variant", "underline", "target", and "rel". Do NOT use "children" or put href inside "attributes". For custom hover colors, use the top-level "styling" object with standard CSS values.
+Accessible anchor component for navigation with support for internal and absolute URL destinations, multiple visual variants, and proper security attributes. A2UI SPEC: use top-level "label" for text, plus top-level "href", "variant", "underline", "target", and "rel". Do NOT use "children" or put href inside "attributes". For custom hover colors, use the top-level "styling" object with standard CSS values. Figma color tokens: gds.color.text.link → color.text.link.default (#53B7E8) for default link state; gds.color.text.link.hover → color.text.link.hover (#278CBF) — pass default via the top-level "color" prop and hover via styling["&:hover"].color.
 
-**Props:** `label`: string, `href`: string, `target`: "_blank"|"_self"|"_parent"|"_top", `rel`: string, `variant`: "primary"|"secondary"|"inverted"|"inherit", `size`: "sm"|"md"|"lg" *(+5 more)*
+**Props:** `label`: string, `href`: string, `target`: "_blank"|"_self"|"_parent"|"_top", `rel`: string, `variant`: "primary"|"secondary"|"inverted"|"inherit", `size`: "sm"|"md"|"lg" *(+9 more)*
 
 **Examples:**
   `<Link href="/about" variant="primary">About Us</Link>`
   `<Link href="https://example.com" target="_blank" rel="noopener noreferrer">Outbound Site</Link>`
   `<Link href="/dashboard" variant="primary" underline="highlight">Go to Dashboard</Link>`
-  `<Link href="/dashboard" variant="primary" underline="highlight" styles={{ "&:hover": { color: "#D21C1C", "&::after": { borderBottomColor: "#D21C1C" } } }}>Go to Dashboard</Link>`
+  `<Link href="/dashboard" variant="primary" underline="highlight" color="color.text.error" styling={{ "&:hover": { color: "color.text.error", "&::after": { borderBottomColor: "color.text.error" } } }}>Go to Dashboard</Link>`
 
 ### Breadcrumbs
 
@@ -1704,21 +1703,21 @@ Import: `import { Avatar } from 'gd-design-library'`
 
 User avatar component for displaying profile pictures, initials, or icons with support for badges, fallback content, and various size options. A2UI SPEC: all props are top-level fields — do NOT use "attributes" or "fallbackComponent". Use "label" or "value" for initials text. Use "size" or "sizeVariant" for size. For an icon inside the avatar, set top-level "icon" plus optional "fill" or "fillSvg"; the renderer maps that to Avatar fallback content internally. For a status badge ON the avatar use withBadge + badgeColor directly on this component — do NOT place a separate "badge" or sibling "icon" next to the avatar. Prefer theme color tokens before raw CSS/hex. Example: {"type":"avatar","icon":"star","size":"xl","backgroundColor":"#cfaaa7","fill":"#646464"}.
 
-**Props:** `label`: string, `src`: string, `alt`: string, `size`: "xs"|"sm"|"md"|"lg"|"xl", `withBadge`: boolean, `badgeColor`: string *(+6 more)*
+**Props:** `label`: string, `value`: string, `src`: string, `alt`: string, `size`: "xs"|"sm"|"md"|"lg"|"xl", `sizeVariant`: "xs"|"sm"|"md"|"lg"|"xl" *(+8 more)*
 
 **Quick Start:**
   - basic: `<Avatar src="/user-photo.jpg" alt="John Doe" />`
-  - initials: `<Avatar fallbackComponent="JD" backgroundColor="bg.fill.info.primary.default" />`
+  - initials: `<Avatar label="JD" backgroundColor="bg.fill.info.primary.default" />`
   - withBadge: `<Avatar src={userImage} alt={userName} withBadge badgeColor="bg.fill.success.primary.default" />`
-  - icon: `<Avatar fallbackComponent={<Icon name="star" width={40} height={40} fill="#646464" />} backgroundColor="#E0E0E0" />`
+  - icon: `<Avatar icon="star" fill="#646464" backgroundColor="#E0E0E0" />`
   - online: `<Avatar src="/avatar.png" alt="User" withBadge={isOnline} badgeColor={isOnline ? "bg.fill.success.primary.default" : "bg.fill.error.primary.default"} />`
 
 **Common Patterns:**
   - **User Profile** (User profile pages and account settings): `<Avatar src={user.photo} alt={user.name} sizeVariant="lg" onClick={handleProfileClick} />`
   - **Comment Author** (Comment sections and discussion threads): `<Avatar src={comment.author.photo} alt={comment.author.name} sizeVariant="sm" />`
   - **Online Status** (Chat interfaces and user lists with online status): `<Avatar src={user.photo} alt={user.name} withBadge badgeColor={user.isOnline ? "bg.fill.success.primary.default" : "bg.fill.error.primary.default"} />`
-  - **Icon Fallback** (Profile placeholders or branded avatars that use an icon inside the avatar itself): `<Avatar fallbackComponent={<Icon name="star" width={40} height={40} fill="#646464" />} backgroundColor="#E0E0E0" sizeVariant="xl" />`
-  - **Team Member** (Team directories and member listings): `<Avatar fallbackComponent={user.initials} backgroundColor={user.color} sizeVariant="md" />`
+  - **Icon Fallback** (Profile placeholders or branded avatars that use an icon inside the avatar itself): `<Avatar icon="star" fill="#646464" backgroundColor="#E0E0E0" size="xl" />`
+  - **Team Member** (Team directories and member listings): `<Avatar label={user.initials} backgroundColor={user.color} size="md" />`
 
 **Best Practices:**
   - Always provide meaningful alt text for accessibility
@@ -1742,10 +1741,10 @@ User avatar component for displaying profile pictures, initials, or icons with s
 
 **Examples:**
   `<Avatar src="/user-photo.jpg" alt="John Doe" sizeVariant="lg" />`
-  `<Avatar fallbackComponent="JD" backgroundColor="bg.fill.info.primary.default" sizeVariant="md" onClick={handleProfileClick} />`
+  `<Avatar label="JD" backgroundColor="bg.fill.info.primary.default" size="md" />`
   `<Avatar src={userImage} alt={userName} withBadge badgeColor="bg.fill.success.primary.default" sizeVariant="sm" />`
-  `<Avatar fallbackComponent={<Icon name="star" width={40} height={40} fill="#646464" />} backgroundColor="#E0E0E0" sizeVariant="xl" />`
-  `<Avatar fallbackComponent={<Icon name="user" />} backgroundColor="primary.default" sizeVariant="xl" />`
+  `<Avatar icon="star" fill="#646464" backgroundColor="#E0E0E0" size="xl" />`
+  `<Avatar icon="user" backgroundColor="primary.default" size="xl" />`
   `<Avatar src="/avatar.png" alt="User" withBadge={isOnline} badgeColor={isOnline ? "bg.fill.success.primary.default" : "bg.fill.error.primary.default"} />`
 
 ### Price
@@ -2241,6 +2240,98 @@ const formControls = componentIndex.byCategory['Forms & Inputs'];
 const simpleComponents = componentIndex.byComplexity.Low;
 ```
 
+## Figma Token Maps
+
+Purpose-built reverse-lookup tables that translate Figma inspection output (variable names, hex values, px values, shadow strings, icon names) into GridKit design tokens and `useTheme()` access patterns. **Load before any Figma-to-code or Figma-to-A2UI task.**
+
+Path: `$GD_PATH/ai/figma-maps/` (default `node_modules/gd-design-library/ai/figma-maps/`).
+
+Each file has a top-level `$usage` key with `keyQuestion`, `lookupSteps`, and `criticalRules`.
+
+### Available Maps
+
+| File | Answers | Reverse index |
+|------|---------|---------------|
+| `figma-color-map.json` | Hex / Figma `gds.color.*` var → color token | `hexIndex["#RRGGBB"]` → `tokenPath` |
+| `figma-spacing-map.json` | px / `gds.spacing.*` var → spacing token | `pxIndex["16px"]` → `{ preferred, aliases }` |
+| `figma-radius-map.json` | px/% / `gds.border.radius.*` var → radius token | `pxIndex["4px"]` → `"radius.sm"` |
+| `figma-font-map.json` | font value / `gds.font.*` var → `font.*` token | `valueIndex.fontSize["20px"]` → `"font.size.h5"` |
+| `figma-shadow-map.json` | Shadow style / CSS value → `shadows.box.*` token | `valueIndex["0px 2px..."]` → `"shadows.box.1"` |
+| `figma-icon-map.json` | Figma Material icon name → GridKit `IconsList` key | `figmaNameIndex["close"]` → `"cross"` |
+
+### Token Resolution Priority (apply in order, stop at first hit)
+
+1. **CSS var name present** — Figma dev mode emits `var(--gds-color-text-default, #171717)`. Strip `--gds-` prefix, convert kebab-case to dot-notation: `color.text.default`. Use verbatim — do **not** run a value reverse-lookup.
+2. **Figma variable name known** — Apply the CamelCase split rule: `borderRadiusXL` → `radius.xl`; `fontSizeH5` → `font.size.h5`; `lineHeightH5` → `font.line.height.h5`. Find the entry in the matching map group.
+3. **Value-only fallback** — Query the matching `*Index` reverse-lookup in the relevant map file: `hexIndex` for colors, `pxIndex` for radius and spacing, `valueIndex` for font and shadow.
+4. **No match** — Record `"unmatched:<rawValue>"` in `tokenBindings`.
+
+### Color (`figma-color-map.json`)
+
+Groups: `bg` (29), `border` (11), `text` (15), `icon` (12), `neutral` (19), `palette` (100) + `hexIndex` (34 entries).
+
+Each entry shape: `{ tokenPath, cssVar, themeAccess, hex }`.
+
+- Hex lookup: `hexIndex["#FFFFFF"]` → `"color.bg.surface"`. Normalize short hex first: `#FFF` → `#FFFFFF`.
+- In code: **always use `themeAccess`** (e.g. `theme.colors?.bg?.surface`). Never emit `cssVar` strings in TSX.
+- Typography `color` prop: pass `tokenPath` string directly (`color="text.default"`). All other components: use `themeAccess` via `useTheme()`.
+- `#FFFFFF` → `color.bg.surface` (not "unmatched white"). `#000000` → `color.neutral.black`.
+
+### Spacing (`figma-spacing-map.json`)
+
+Groups: `spacing` (semantic, 7 entries), `space` (numeric, 13), `scale` (7) + `pxIndex` + `scaleDecisionGuide`.
+
+- `pxIndex["16px"]` → `{ preferred: "spacing.md", aliases: ["space.200", "scale.200"] }`.
+- `scaleDecisionGuide` context rule: layout padding/margin/gap → `spacing.*`; gaps >40px → `space.*`; component-internal → `scale.*`.
+- 12px has no `spacing.*` alias → use `space.150` (`theme.space?.['150']`).
+- Unmatched px: record `"unmatched:<value>px"` in `tokenBindings` — **never** hardcode the literal.
+
+### Radius (`figma-radius-map.json`)
+
+Structure: `radius` (8), `pxIndex` (9 values from `0px` to `50%`), `camelCaseSplitExamples`.
+
+- `pxIndex["4px"]` → `"radius.sm"`. `pxIndex["50%"]` → `"radius.round"`.
+- CamelCase split: `borderRadiusXL` → `radius.xl`. See `camelCaseSplitExamples` for all 8 variants.
+- In TSX: `theme.radius?.xl` via `useTheme()`. **Never** `var(--gds-radius-xl, 32px)` in JSX.
+
+### Font (`figma-font-map.json`)
+
+Groups: `family` (2), `weight` (4), `size` (20 scale entries), `lineHeight` (20) + `valueIndex` + `camelCaseSplitExamples` + `knownGaps`.
+
+- `valueIndex.fontSize["20px"]` → `"font.size.h5"`. `valueIndex.lineHeight["26px"]` → `"font.line.height.h5"`.
+- CamelCase: `fontSizeH5` → `font.size.h5`; `lineHeightH5` → `font.line.height.h5`.
+- **lineHeight is 3 levels deep**: `font.line.height.<scale>`. Access: `theme.font?.line?.height?.h5`. Never `theme.font?.lineHeight?.h5`.
+- Font tokens are **not** CSS vars — never emit `var(--gds-font-*)` in TSX. Put raw CSS value in `styling`; token dot-path in `tokenBindings`.
+- `styleVariant="bold"` = `fontWeight: 700`. Never combine with a `fontWeight` override in `styling`.
+- Known gaps: `34px lineHeight` (no token — use h2/h3 by context); `fontWeight 800/900` (no token — record `"unmatched:800"`).
+
+### Shadow (`figma-shadow-map.json`)
+
+Groups: `light` (5), `dark` (5), `semantic` (modal/snackbar/notification) + `valueIndex` + `elevationDecisionGuide` + `designDrift`.
+
+- By Figma style name: `light["Shadow/Light Mode/shadow 1"]` → `{ tokenPath: "shadows.box.1", themeAccess: "theme.shadows?.box?.['1']", ... }`.
+- By element role (`elevationDecisionGuide`): card/tile → `shadows.box.1`; dropdown/popover → `shadows.box.2`; drawer/panel → `shadows.box.3`; modal/dialog → `shadows.modal.default`; snackbar/toast → `shadows.snackbar.default`.
+- **Design drift**: Figma levels 1–3 show single-layer values; GridKit tokens are multi-layer Material-style. Token value is always canonical — never copy Figma raw shadow strings into code.
+- Dark mode: no separate tokens; dark `ThemeProvider` override resolves automatically.
+- Numeric keys require bracket notation: `theme.shadows?.box?.['1']`.
+
+### Icons (`figma-icon-map.json`)
+
+Structure: `icons` (54 GridKit keys), `figmaNameIndex` (48 Figma name → GridKit key), `stats`.
+
+- Figma → GridKit: `figmaNameIndex["close"]` → `"cross"`. Use GridKit key in all generated code.
+- 8 custom icons have no Figma equivalent: `success`, `error`, `warning`, `info`, `dot`, `slash`, `ruler`, `processing`.
+- Always validate icon name against `A2UI_AVAILABLE_ICONS` (or `Icon.ts` schema) before emitting.
+
+### Common Traps
+
+- `#FFFFFF` → `color.bg.surface`, **not** unmatched white. Always run `hexIndex` before declaring no match.
+- `lineHeight` token path: `font.line.height.h5` (3 levels). Never `font.lineHeight.h5`.
+- `styleVariant="bold"` conflicts with `fontWeight` in `styling` — use only one.
+- Radius in TSX: `theme.radius?.xl` — never `var(--gds-radius-xl, 32px)`.
+- Shadow drift: Figma raw value ≠ token multi-layer value. Token is canonical.
+- `border: "1px solid #000"` — split into parts; only run color lookup on the hex segment.
+
 ## Critical Guardrails (Automatically Extracted from Schemas)
 
 These guardrails are automatically extracted from component schemas and included in prompts:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gd-design-library",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "license": "MIT",
   "type": "module",
   "main": "./index.cjs",
@@ -15,27 +15,43 @@
   ],
   "exports": {
     ".": {
-      "types": "./index.d.ts",
-      "import": "./index.js",
-      "require": "./index.cjs"
+      "import": {
+        "types": "./index.d.ts",
+        "default": "./index.js"
+      },
+      "require": {
+        "types": "./index.d.cts",
+        "default": "./index.cjs"
+      }
     },
     "./styles.css": "./styles.css",
     "./llms.txt": "./llms.txt",
     "./ai": {
-      "types": "./ai/index.d.ts",
-      "import": "./ai/index.js",
-      "require": "./ai/index.cjs"
+      "import": {
+        "types": "./ai/index.d.ts",
+        "default": "./ai/index.js"
+      },
+      "require": {
+        "types": "./ai/index.d.cts",
+        "default": "./ai/index.cjs"
+      }
     },
     "./ai/ui-specification-schema.json": "./ai/a2ui/ui-specification-schema.json",
     "./ai/*": {
       "types": "./ai/*.d.ts",
       "import": "./ai/*.js",
-      "require": "./ai/*.cjs"
+      "require": {
+        "types": "./ai/*.d.cts",
+        "default": "./ai/*.cjs"
+      }
     },
     "./*": {
       "types": "./*.d.ts",
       "import": "./*.js",
-      "require": "./*.cjs"
+      "require": {
+        "types": "./*.d.cts",
+        "default": "./*.cjs"
+      }
     }
   },
   "peerDependencies": {
@@ -58,10 +74,10 @@
     "@visx/shape": "^3.12.0",
     "@visx/tooltip": "^3.12.0",
     "@visx/xychart": "^3.12.0",
-    "uuid": "^11.1.0"
+    "uuid": "^14.0.0"
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0"
   }
-}
+}

package/tokens/accordion.cjs

@@ -1 +1 @@
-const e=require(`../utils/helpers.cjs`);var t={header:{default:{width:`100%`,textAlign:`left`,cursor:`pointer`,border:`0`,backgroundColor:t=>e.get(t,`colors.transparent`,`theme.colors.transparent`),paddingTop:t=>e.get(t,`spacing.md`,`theme.spacing.md`),paddingBottom:t=>e.get(t,`spacing.md`,`theme.spacing.md`),display:`flex`,alignItems:`center`,justifyContent:`space-between`,gap:t=>e.get(t,`spacing.md`,`theme.spacing.md`),":first-of-type":{flex:`1`},"&:hover":{backgroundColor:t=>e.get(t,`colors.bg.fill.hover`,`theme.colors.bg.fill.hover`)},"&:focus-visible":{outline:t=>e.get(t,`borders.focus`,`theme.borders.focus`),outlineOffset:`2px`}},inline:{width:`auto`,display:`inline-flex`,justifyContent:`start`}},content:{default:{overflow:`hidden`,transition:t=>e.get(t,`values.transitions.accordion.toggle`,`theme.values.transitions.accordion.toggle`),height:`auto`},opened:{paddingTop:t=>e.get(t,`spacing.md`,`theme.spacing.md`),paddingBottom:t=>e.get(t,`spacing.md`,`theme.spacing.md`)},closed:{maxHeight:t=>e.get(t,`spacing.none`,`theme.spacing.none`),paddingTop:t=>e.get(t,`spacing.none`,`theme.spacing.none`),paddingBottom:t=>e.get(t,`spacing.none`,`theme.spacing.none`)}},item:{default:{position:`relative`,padding:t=>e.get(t,`spacing.none`,`theme.spacing.none`),"&::after":{content:`""`,position:`absolute`,bottom:t=>e.get(t,`spacing.none`,`theme.spacing.none`),left:t=>e.get(t,`spacing.none`,`theme.spacing.none`),right:t=>e.get(t,`spacing.none`,`theme.spacing.none`),height:`1px`,backgroundColor:t=>e.get(t,`colors.border.default`,`theme.colors.border.default`)}},noSeparator:{position:`relative`,padding:t=>e.get(t,`spacing.none`,`theme.spacing.none`)},inline:{width:`auto`,display:`inline-flex`,flexWrap:`wrap`,flexDirection:`column`},opened:{width:`100%`},closed:{}},icon:{default:{transition:t=>e.get(t,`values.transitions.accordion.icon`,`theme.values.transitions.accordion.icon`)},opened:{transform:t=>e.get(t,`values.transform.rotateUp`,`theme.values.transform.rotateUp`)},closed:{transform:t=>e.get(t,`values.transform.rotateReset`,`theme.values.transform.rotateReset`)}}};exports.accordion=t;
+const e=require("../utils/helpers.cjs");var t={header:{default:{width:`100%`,textAlign:`left`,cursor:`pointer`,border:`0`,backgroundColor:t=>e.get(t,`colors.transparent`,`theme.colors.transparent`),paddingTop:t=>e.get(t,`spacing.md`,`theme.spacing.md`),paddingBottom:t=>e.get(t,`spacing.md`,`theme.spacing.md`),display:`flex`,alignItems:`center`,justifyContent:`space-between`,gap:t=>e.get(t,`spacing.md`,`theme.spacing.md`),":first-of-type":{flex:`1`},"&:hover":{backgroundColor:t=>e.get(t,`colors.bg.fill.hover`,`theme.colors.bg.fill.hover`)},"&:focus-visible":{outline:t=>e.get(t,`borders.focus`,`theme.borders.focus`),outlineOffset:`2px`}},inline:{width:`auto`,display:`inline-flex`,justifyContent:`start`}},content:{default:{overflow:`hidden`,transition:t=>e.get(t,`values.transitions.accordion.toggle`,`theme.values.transitions.accordion.toggle`),height:`auto`},opened:{paddingTop:t=>e.get(t,`spacing.md`,`theme.spacing.md`),paddingBottom:t=>e.get(t,`spacing.md`,`theme.spacing.md`)},closed:{maxHeight:t=>e.get(t,`spacing.none`,`theme.spacing.none`),paddingTop:t=>e.get(t,`spacing.none`,`theme.spacing.none`),paddingBottom:t=>e.get(t,`spacing.none`,`theme.spacing.none`)}},item:{default:{position:`relative`,padding:t=>e.get(t,`spacing.none`,`theme.spacing.none`),"&::after":{content:`""`,position:`absolute`,bottom:t=>e.get(t,`spacing.none`,`theme.spacing.none`),left:t=>e.get(t,`spacing.none`,`theme.spacing.none`),right:t=>e.get(t,`spacing.none`,`theme.spacing.none`),height:`1px`,backgroundColor:t=>e.get(t,`colors.border.default`,`theme.colors.border.default`)}},noSeparator:{position:`relative`,padding:t=>e.get(t,`spacing.none`,`theme.spacing.none`)},inline:{width:`auto`,display:`inline-flex`,flexWrap:`wrap`,flexDirection:`column`},opened:{width:`100%`},closed:{}},icon:{default:{transition:t=>e.get(t,`values.transitions.accordion.icon`,`theme.values.transitions.accordion.icon`)},opened:{transform:t=>e.get(t,`values.transform.rotateUp`,`theme.values.transform.rotateUp`)},closed:{transform:t=>e.get(t,`values.transform.rotateReset`,`theme.values.transform.rotateReset`)}}};exports.accordion=t;

package/tokens/accordion.d.cts

@@ -0,0 +1,88 @@
+export declare const accordion: {
+    header: {
+        default: {
+            width: string;
+            textAlign: string;
+            cursor: string;
+            border: string;
+            backgroundColor: (theme: Record<symbol, unknown>) => string;
+            paddingTop: (theme: Record<symbol, unknown>) => string;
+            paddingBottom: (theme: Record<symbol, unknown>) => string;
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+            gap: (theme: Record<symbol, unknown>) => string;
+            ':first-of-type': {
+                flex: string;
+            };
+            '&:hover': {
+                backgroundColor: (theme: Record<symbol, unknown>) => string;
+            };
+            '&:focus-visible': {
+                outline: (theme: Record<symbol, unknown>) => string;
+                outlineOffset: string;
+            };
+        };
+        inline: {
+            width: string;
+            display: string;
+            justifyContent: string;
+        };
+    };
+    content: {
+        default: {
+            overflow: string;
+            transition: (theme: Record<symbol, unknown>) => string;
+            height: string;
+        };
+        opened: {
+            paddingTop: (theme: Record<symbol, unknown>) => string;
+            paddingBottom: (theme: Record<symbol, unknown>) => string;
+        };
+        closed: {
+            maxHeight: (theme: Record<symbol, unknown>) => string;
+            paddingTop: (theme: Record<symbol, unknown>) => string;
+            paddingBottom: (theme: Record<symbol, unknown>) => string;
+        };
+    };
+    item: {
+        default: {
+            position: string;
+            padding: (theme: Record<symbol, unknown>) => string;
+            '&::after': {
+                content: string;
+                position: string;
+                bottom: (theme: Record<symbol, unknown>) => string;
+                left: (theme: Record<symbol, unknown>) => string;
+                right: (theme: Record<symbol, unknown>) => string;
+                height: string;
+                backgroundColor: (theme: Record<symbol, unknown>) => string;
+            };
+        };
+        noSeparator: {
+            position: string;
+            padding: (theme: Record<symbol, unknown>) => string;
+        };
+        inline: {
+            width: string;
+            display: string;
+            flexWrap: string;
+            flexDirection: string;
+        };
+        opened: {
+            width: string;
+        };
+        closed: {};
+    };
+    icon: {
+        default: {
+            transition: (theme: Record<symbol, unknown>) => string;
+        };
+        opened: {
+            transform: (theme: Record<symbol, unknown>) => string;
+        };
+        closed: {
+            transform: (theme: Record<symbol, unknown>) => string;
+        };
+    };
+};

package/tokens/animations.d.cts

@@ -0,0 +1,70 @@
+export declare const animations: {
+    spinKeyframes: {
+        '0%': {
+            transform: string;
+        };
+        '100%': {
+            transform: string;
+        };
+    };
+    bounceKeyframes: {
+        '0%, 80%, 100%': {
+            transform: string;
+        };
+        '40%': {
+            transform: string;
+        };
+    };
+    slideIn: {
+        '0%': {
+            transform: string;
+            opacity: number;
+        };
+        '100%': {
+            transform: string;
+            opacity: number;
+        };
+    };
+    slideOut: {
+        '0%': {
+            transform: string;
+            opacity: number;
+        };
+        '100%': {
+            transform: string;
+            opacity: number;
+        };
+    };
+    blinkKeyframes: {
+        '0%': {
+            opacity: number;
+        };
+        '50%': {
+            opacity: number;
+        };
+        '100%': {
+            opacity: number;
+        };
+    };
+    progressIndeterminate: {
+        '0%': {
+            transform: string;
+        };
+        '50%': {
+            transform: string;
+        };
+        '100%': {
+            transform: string;
+        };
+    };
+    tooltipFadeIn: {
+        '0%': {
+            opacity: number;
+            transform: string;
+        };
+        '100%': {
+            opacity: number;
+            transform: string;
+        };
+    };
+};

package/tokens/attachmentFile.cjs

@@ -1 +1 @@
-const e=require(`../utils/helpers.cjs`);var t={container:{default:{display:`flex`,flexDirection:`row`,alignItems:`center`,paddingTop:t=>e.get(t,`spacing.sm`,`theme.spacing.sm`),paddingRight:t=>e.get(t,`spacing.sm`,`theme.spacing.sm`),paddingBottom:t=>e.get(t,`spacing.sm`,`theme.spacing.sm`),paddingLeft:t=>e.get(t,`spacing.md`,`theme.spacing.md`),gap:t=>e.get(t,`spacing.sm`,`theme.spacing.sm`),backgroundColor:t=>e.get(t,`colors.bg.default`,`theme.colors.bg.default`)}},info:{default:{paddingRight:t=>e.get(t,`spacing.xs`,`theme.spacing.xs`),display:`flex`,flexDirection:`column`,flex:1,overflow:`hidden`}},name:{default:{fontSize:t=>e.get(t,`font.size.small`,`theme.font.size.small`),color:t=>e.get(t,`colors.text.default`,`theme.colors.text.default`),whiteSpace:`nowrap`,overflow:`hidden`,textOverflow:`ellipsis`}},meta:{row:{display:`flex`,flexDirection:`row`,alignItems:`center`,gap:`4px`},text:{fontSize:t=>e.get(t,`font.size.caption`,`theme.font.size.caption`),color:t=>e.get(t,`colors.text.title`,`theme.colors.text.title`)}},icon:{file:{name:`fileCopy`,size:`xl`,fillSvg:`icon.default`},remove:{name:`cross`,size:`md`}},button:{variant:`tertiary`,default:{width:`40px`,height:`40px`,flexShrink:0}}};exports.attachmentFile=t;
+const e=require("../utils/helpers.cjs");var t={container:{default:{display:`flex`,flexDirection:`row`,alignItems:`center`,paddingTop:t=>e.get(t,`spacing.sm`,`theme.spacing.sm`),paddingRight:t=>e.get(t,`spacing.sm`,`theme.spacing.sm`),paddingBottom:t=>e.get(t,`spacing.sm`,`theme.spacing.sm`),paddingLeft:t=>e.get(t,`spacing.md`,`theme.spacing.md`),gap:t=>e.get(t,`spacing.sm`,`theme.spacing.sm`),backgroundColor:t=>e.get(t,`colors.bg.default`,`theme.colors.bg.default`)}},info:{default:{paddingRight:t=>e.get(t,`spacing.xs`,`theme.spacing.xs`),display:`flex`,flexDirection:`column`,flex:1,overflow:`hidden`}},name:{default:{fontSize:t=>e.get(t,`font.size.small`,`theme.font.size.small`),color:t=>e.get(t,`colors.text.default`,`theme.colors.text.default`),whiteSpace:`nowrap`,overflow:`hidden`,textOverflow:`ellipsis`}},meta:{row:{display:`flex`,flexDirection:`row`,alignItems:`center`,gap:`4px`},text:{fontSize:t=>e.get(t,`font.size.caption`,`theme.font.size.caption`),color:t=>e.get(t,`colors.text.title`,`theme.colors.text.title`),whiteSpace:`nowrap`,overflow:`hidden`,textOverflow:`ellipsis`}},icon:{file:{name:`fileCopy`,size:`xl`,fillSvg:`icon.default`},remove:{name:`cross`,size:`md`}},button:{variant:`tertiary`,default:{width:`40px`,height:`40px`,flexShrink:0}}};exports.attachmentFile=t;

package/tokens/attachmentFile.d.cts

@@ -0,0 +1,67 @@
+export declare const attachmentFile: {
+    container: {
+        default: {
+            display: string;
+            flexDirection: string;
+            alignItems: string;
+            paddingTop: (theme: Record<symbol, unknown>) => string;
+            paddingRight: (theme: Record<symbol, unknown>) => string;
+            paddingBottom: (theme: Record<symbol, unknown>) => string;
+            paddingLeft: (theme: Record<symbol, unknown>) => string;
+            gap: (theme: Record<symbol, unknown>) => string;
+            backgroundColor: (theme: Record<symbol, unknown>) => string;
+        };
+    };
+    info: {
+        default: {
+            paddingRight: (theme: Record<symbol, unknown>) => string;
+            display: string;
+            flexDirection: string;
+            flex: number;
+            overflow: string;
+        };
+    };
+    name: {
+        default: {
+            fontSize: (theme: Record<symbol, unknown>) => string;
+            color: (theme: Record<symbol, unknown>) => string;
+            whiteSpace: string;
+            overflow: string;
+            textOverflow: string;
+        };
+    };
+    meta: {
+        row: {
+            display: string;
+            flexDirection: string;
+            alignItems: string;
+            gap: string;
+        };
+        text: {
+            fontSize: (theme: Record<symbol, unknown>) => string;
+            color: (theme: Record<symbol, unknown>) => string;
+            whiteSpace: string;
+            overflow: string;
+            textOverflow: string;
+        };
+    };
+    icon: {
+        file: {
+            name: string;
+            size: string;
+            fillSvg: string;
+        };
+        remove: {
+            name: string;
+            size: string;
+        };
+    };
+    button: {
+        variant: string;
+        default: {
+            width: string;
+            height: string;
+            flexShrink: number;
+        };
+    };
+};

package/tokens/attachmentFile.d.ts

@@ -40,6 +40,9 @@ export declare const attachmentFile: {
         text: {
             fontSize: (theme: Record<symbol, unknown>) => string;
             color: (theme: Record<symbol, unknown>) => string;
+            whiteSpace: string;
+            overflow: string;
+            textOverflow: string;
         };
     };
     icon: {

package/tokens/attachmentFile.js

@@ -35,7 +35,10 @@ var t = {
 		},
 		text: {
 			fontSize: (t) => e(t, "font.size.caption", "theme.font.size.caption"),
-			color: (t) => e(t, "colors.text.title", "theme.colors.text.title")
+			color: (t) => e(t, "colors.text.title", "theme.colors.text.title"),
+			whiteSpace: "nowrap",
+			overflow: "hidden",
+			textOverflow: "ellipsis"
 		}
 	},
 	icon: {

package/tokens/avatar.cjs

@@ -1 +1 @@
-const e=require(`../utils/helpers.cjs`),t=require(`./borders.cjs`),n=require(`../types/common.cjs`),r=require(`../types/typography.cjs`);var i={default:{borderRadius:`50%`,position:`relative`,width:42,height:42},imageWrapper:{default:{borderRadius:`50%`,overflow:`hidden`,height:`100%`,width:`100%`,alignContent:`center`,backgroundColor:t=>e.get(t,`colors.bg.fill.primary`,`theme.colors.bg.fill.primary`)}},badge:{default:{position:`absolute`,borderRadius:`50%`,width:16,height:16,border:t.borders.generic({width:`2.3px`,color:`white`,type:`solid`}),top:-2,right:0},size:{[n.SizeVariant.Xs]:{width:8,height:8,border:t.borders.generic({width:`1px`,color:`white`,type:`solid`}),top:-1,right:0},[n.SizeVariant.Sm]:{width:14,height:14,border:t.borders.generic({width:`2px`,color:`white`,type:`solid`}),top:-2,right:0},[n.SizeVariant.Md]:{width:16,height:16,border:t.borders.generic({width:`2.3px`,color:`white`,type:`solid`}),top:-2,right:0},[n.SizeVariant.Lg]:{width:18,height:18,border:t.borders.generic({width:`2.7px`,color:`white`,type:`solid`}),top:-1,right:0},[n.SizeVariant.Xl]:{width:22,height:22,border:t.borders.generic({width:`3px`,color:`white`,type:`solid`}),top:0,right:0}}},fallbackText:{default:{overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`},attrs:{default:{variant:r.TypographyVariant.H6,align:r.TextAlign.Center},size:{[n.SizeVariant.Xs]:{variant:r.TypographyVariant.Caption},[n.SizeVariant.Sm]:{variant:r.TypographyVariant.Body2},[n.SizeVariant.Md]:{variant:r.TypographyVariant.H6},[n.SizeVariant.Lg]:{variant:r.TypographyVariant.H5},[n.SizeVariant.Xl]:{variant:r.TypographyVariant.H4}}}},size:{[n.SizeVariant.Xs]:{width:24,height:24},[n.SizeVariant.Sm]:{width:38,height:38},[n.SizeVariant.Md]:{width:42,height:42},[n.SizeVariant.Lg]:{width:52,height:52},[n.SizeVariant.Xl]:{width:80,height:80}},variantConfig:{card:{defaultSize:`sm`,nameVariant:`small`,subtitleVariant:`caption`,tokenKey:`userCard`},profile:{defaultSize:`lg`,nameVariant:`h6`,subtitleVariant:`small`,tokenKey:`userProfile`}},userCard:{default:{display:`flex`,alignItems:`center`,gap:t=>e.get(t,`spacing.sm`,`theme.spacing.sm`),cursor:`pointer`},name:{fontWeight:t=>e.get(t,`font.weight.semibold`,`theme.font.weight.semibold`),color:t=>e.get(t,`colors.text.default`,`theme.colors.text.default`),lineHeight:1.3},subtitle:{color:t=>e.get(t,`colors.text.secondary`,`theme.colors.text.secondary`),lineHeight:1.3}},userProfile:{default:{display:`flex`,flexDirection:`column`,alignItems:`center`,gap:t=>e.get(t,`spacing.sm`,`theme.spacing.sm`),textAlign:`center`},name:{fontWeight:t=>e.get(t,`font.weight.semibold`,`theme.font.weight.semibold`),color:t=>e.get(t,`colors.text.default`,`theme.colors.text.default`)},subtitle:{color:t=>e.get(t,`colors.text.secondary`,`theme.colors.text.secondary`)},action:{marginTop:t=>e.get(t,`spacing.xs`,`theme.spacing.xs`)}}};exports.avatar=i;
+const e=require("../utils/helpers.cjs"),t=require("./borders.cjs");var n={default:{borderRadius:`50%`,position:`relative`,width:42,height:42},imageWrapper:{default:{borderRadius:`50%`,overflow:`hidden`,height:`100%`,width:`100%`,alignContent:`center`,backgroundColor:t=>e.get(t,`colors.bg.fill.primary`,`theme.colors.bg.fill.primary`)}},badge:{default:{position:`absolute`,borderRadius:`50%`,width:16,height:16,border:t.borders.generic({width:`2.3px`,color:`white`,type:`solid`}),top:-2,right:0},size:{xs:{width:8,height:8,border:t.borders.generic({width:`1px`,color:`white`,type:`solid`}),top:-1,right:0},sm:{width:14,height:14,border:t.borders.generic({width:`2px`,color:`white`,type:`solid`}),top:-2,right:0},md:{width:16,height:16,border:t.borders.generic({width:`2.3px`,color:`white`,type:`solid`}),top:-2,right:0},lg:{width:18,height:18,border:t.borders.generic({width:`2.7px`,color:`white`,type:`solid`}),top:-1,right:0},xl:{width:22,height:22,border:t.borders.generic({width:`3px`,color:`white`,type:`solid`}),top:0,right:0}}},fallbackText:{default:{overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`},attrs:{default:{variant:`h6`,align:`center`},size:{xs:{variant:`caption`},sm:{variant:`small`},md:{variant:`h6`},lg:{variant:`h5`},xl:{variant:`h4`}}}},size:{xs:{width:24,height:24},sm:{width:38,height:38},md:{width:42,height:42},lg:{width:52,height:52},xl:{width:80,height:80}},variantConfig:{card:{defaultSize:`sm`,nameVariant:`small`,subtitleVariant:`caption`,tokenKey:`userCard`},profile:{defaultSize:`lg`,nameVariant:`h6`,subtitleVariant:`small`,tokenKey:`userProfile`}},userCard:{default:{display:`flex`,alignItems:`center`,gap:t=>e.get(t,`spacing.sm`,`theme.spacing.sm`),cursor:`pointer`},name:{fontWeight:t=>e.get(t,`font.weight.medium`,`theme.font.weight.medium`),color:t=>e.get(t,`colors.text.default`,`theme.colors.text.default`),lineHeight:1.3},subtitle:{color:t=>e.get(t,`colors.text.secondary`,`theme.colors.text.secondary`),lineHeight:1.3}},userProfile:{default:{display:`flex`,flexDirection:`column`,alignItems:`center`,gap:t=>e.get(t,`spacing.sm`,`theme.spacing.sm`),textAlign:`center`},name:{fontWeight:t=>e.get(t,`font.weight.medium`,`theme.font.weight.medium`),color:t=>e.get(t,`colors.text.default`,`theme.colors.text.default`)},subtitle:{color:t=>e.get(t,`colors.text.secondary`,`theme.colors.text.secondary`)},action:{marginTop:t=>e.get(t,`spacing.xs`,`theme.spacing.xs`)}}};exports.avatar=n;