@mastra/playground-ui 61.0.0-alpha.3 → 61.0.0-alpha.5

package/README.md

@@ -94,18 +94,37 @@ Every badge hue (`green`, `red`, `amber`, `blue`, `purple`, `orange`, `cyan`, `p
 
 #### Opacity and literal colors
 
-A resting color never depends on what sits behind it. Surfaces, text, borders, notices, status, product, and chart colors are solid ramp steps in both themes, and span colors are solid values in `data-viz.css` at one lightness per theme, whatever layer they sit on.
+Opaque surfaces, text, notices, product avatars, and chart colors use solid ramp steps in both themes. Span colors use solid values in `data-viz.css`. The theme also defines translucent fills and borders whose appearance intentionally depends on the surface beneath them.
 
 Opacity is allowed only through design-system tokens, for layers whose job is to show what is underneath:
 
 - State layers over an existing surface: `fill`, `fill-subtle`, `fill-hover`, `fill-active`, and `fill-strong`.
 - Scrims and overlays: `scrim`.
 - Badge fills: `badge-{hue}-strong` and `badge-{hue}-subtle`, so a badge tints with the card or row it sits on.
-- Neutral hairlines: `border`, `border-strong`, `surface-rim`, and `gray-alpha-*`.
+- Neutral hairlines: the `border` ladder, `surface-rim`, field/inset rims, and `gray-alpha-*`.
 - Effects that fade, glow, or animate inside a design-system component, such as the Composer ring and the sidebar meter bloom.
 
 Product code does not add opacity modifiers (`bg-green-500/20`) or `color-mix()` to chromatic colors, and does not write literal colors (`#hex`, `rgb()`, `oklch()`) outside the theme. Masks, brand marks, and screens that render before the theme loads are the exceptions. `src/color-rules.test.ts` enforces this across playground-ui, Studio, and Factory.
 
+#### Border roles
+
+Choose a role at its authored opacity. Avoid extra modifiers such as `border-border/50` or `border-border-strong/40`; the color guard rejects these across the DS, Studio, Factory, and stories. Existing roles cover the following uses without adding a new token value:
+
+| Role                | Token / utility                                              | Use                                                                     |
+| ------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------- |
+| Surface edge        | `--surface-rim` / `border-surface-rim`                       | App frame, panel and card edges; frame headers that meet them           |
+| Content divider     | `--border` / `border-border`                                 | Internal separators and filled control edges                            |
+| Outlined control    | `--border-strong` / `border-border-strong`                   | Transparent controls at rest                                            |
+| Hover / focus       | `--border-hover`, `--border-focus`                           | Interactive control states                                              |
+| Field edge          | `--field-rim`, `--field-rim-on-surface`, `--field-rim-focus` | Field recipes resolve the edge for their parent surface and focus state |
+| Badge / avatar trim | `--inset-highlight`, `--inset-rim`                           | `shadow-inset` combines a top highlight and rim                         |
+
+`border-surface-rim` is an inline Tailwind alias of the existing `--surface-rim`, also exported in `BorderColors`. It resolves local overrides on the styled element. `shadow-rim` draws this same color inside the box; `shadow-raised` and `shadow-overlay` combine it with a lip and drop shadows. Do not add a border on an edge those recipes already draw. `MainCard` reserves 1px for its inset rim so child dividers cannot overlap it.
+
+`Header` is a layout primitive: every instance uses `border-surface-rim`, matching the surrounding frame or panel. Call sites do not choose a tone. `border={false}` hides the edge. Internal content separators use `border-border` directly or a separator component.
+
+Storybook's Foundations/Surface renders border tokens as isolated 1px edges on named backgrounds, with composed surfaces labeled separately. Foundations/Elevation shows the full recipes and each inset edge separately. Switch themes to inspect the actual token values in context; no extra opacity is applied to these previews.
+
 To migrate removed tokens:
 
 | Removed token                                         | Replacement                                       |

package/dist/{EmptyState-DGzBN0Ix.js → EmptyState-BI6cIolY.js}

@@ -24,16 +24,17 @@ function EmptyState({
   const content = /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-tone": tone,
       className: cn(
-        "flex flex-col items-center justify-center px-4 py-6 text-center",
+        "group/empty-state flex max-w-full flex-col items-center justify-center px-4 py-6 text-center",
         "transition-opacity duration-normal ease-out-custom",
         className
       ),
       children: [
-        iconSlot && /* @__PURE__ */ jsx("div", { className: cn("mb-3 [&_svg]:size-5", iconColorByTone[tone]), children: iconSlot }),
+        iconSlot && /* @__PURE__ */ jsx("div", { className: cn("mb-3 max-w-full [&>svg]:size-5", iconColorByTone[tone]), children: iconSlot }),
         /* @__PURE__ */ jsx(HeadingTag, { className: "text-subheading text-foreground", children: titleSlot }),
-        descriptionSlot && /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "muted", className: "mt-1.5 max-w-md", children: descriptionSlot }),
-        actionSlot && /* @__PURE__ */ jsx("div", { className: "mt-4", children: actionSlot })
+        descriptionSlot && /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "muted", className: "mt-1.5 max-w-md wrap-anywhere", children: descriptionSlot }),
+        actionSlot && /* @__PURE__ */ jsx("div", { className: "mt-4 max-w-full", children: actionSlot })
       ]
     }
   );
@@ -44,4 +45,4 @@ function EmptyState({
 }
 
 export { EmptyState as E };
-//# sourceMappingURL=EmptyState-DGzBN0Ix.js.map
+//# sourceMappingURL=EmptyState-BI6cIolY.js.map

package/dist/EmptyState-BI6cIolY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState-BI6cIolY.js","sources":["../src/ds/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import { CircleSlashIcon, CircleXIcon } from 'lucide-react';\nimport * as React from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\ntype EmptyStateTone = 'default' | 'error';\n\nconst defaultIconByTone: Record<EmptyStateTone, React.ReactNode> = {\n  default: <CircleSlashIcon />,\n  error: <CircleXIcon />,\n};\n\nconst iconColorByTone: Record<EmptyStateTone, string> = {\n  default: 'text-muted-foreground',\n  error: 'text-destructive-foreground',\n};\n\nexport type EmptyStateProps = {\n  /** Defaults to the tone's icon. A bare icon renders at 20px; pass `<EmptyStateIllustration />` for artwork. Pass `null` to render no icon. */\n  iconSlot?: React.ReactNode;\n  titleSlot: React.ReactNode;\n  descriptionSlot?: React.ReactNode;\n  actionSlot?: React.ReactNode;\n  className?: string;\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Colors the icon or illustration; an icon with its own text color keeps it. */\n  tone?: EmptyStateTone;\n  /**\n   * `inline` (default) renders the block in place.\n   * `fill` centers it in the full height of its parent — the parent must have a definite height.\n   */\n  variant?: 'inline' | 'fill';\n};\n\nexport function EmptyState({\n  tone = 'default',\n  iconSlot = defaultIconByTone[tone],\n  titleSlot,\n  descriptionSlot,\n  actionSlot,\n  className,\n  as: HeadingTag = 'h3',\n  variant = 'inline',\n}: EmptyStateProps) {\n  const content = (\n    <div\n      data-tone={tone}\n      className={cn(\n        'group/empty-state flex max-w-full flex-col items-center justify-center px-4 py-6 text-center',\n        'transition-opacity duration-normal ease-out-custom',\n        className,\n      )}\n    >\n      {iconSlot && <div className={cn('mb-3 max-w-full [&>svg]:size-5', iconColorByTone[tone])}>{iconSlot}</div>}\n      <HeadingTag className=\"text-subheading text-foreground\">{titleSlot}</HeadingTag>\n      {descriptionSlot && (\n        <Txt variant=\"caption\" tone=\"muted\" className=\"mt-1.5 max-w-md wrap-anywhere\">\n          {descriptionSlot}\n        </Txt>\n      )}\n      {actionSlot && <div className=\"mt-4 max-w-full\">{actionSlot}</div>}\n    </div>\n  );\n\n  if (variant === 'fill') {\n    return (\n      <div data-slot=\"empty-state-fill\" className=\"flex h-full items-center-safe justify-center-safe\">\n        {content}\n      </div>\n    );\n  }\n\n  return content;\n}\n"],"names":[],"mappings":";;;;;AAOA,MAAM,iBAAA,GAA6D;AAAA,EACjE,OAAA,sBAAU,eAAA,EAAA,EAAgB,CAAA;AAAA,EAC1B,KAAA,sBAAQ,WAAA,EAAA,EAAY;AACtB,CAAA;AAEA,MAAM,eAAA,GAAkD;AAAA,EACtD,OAAA,EAAS,uBAAA;AAAA,EACT,KAAA,EAAO;AACT,CAAA;AAmBO,SAAS,UAAA,CAAW;AAAA,EACzB,IAAA,GAAO,SAAA;AAAA,EACP,QAAA,GAAW,kBAAkB,IAAI,CAAA;AAAA,EACjC,SAAA;AAAA,EACA,eAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAI,UAAA,GAAa,IAAA;AAAA,EACjB,OAAA,GAAU;AACZ,CAAA,EAAoB;AAClB,EAAA,MAAM,OAAA,mBACJ,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,EAAA;AAAA,QACT,8FAAA;AAAA,QACA,oDAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,QAAA,oBAAY,GAAA,CAAC,SAAI,SAAA,EAAW,EAAA,CAAG,kCAAkC,eAAA,CAAgB,IAAI,CAAC,CAAA,EAAI,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,wBACpG,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAU,iCAAA,EAAmC,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,QAClE,eAAA,wBACE,GAAA,EAAA,EAAI,OAAA,EAAQ,WAAU,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,+BAAA,EAC3C,QAAA,EAAA,eAAA,EACH,CAAA;AAAA,QAED,UAAA,oBAAc,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAmB,QAAA,EAAA,UAAA,EAAW;AAAA;AAAA;AAAA,GAC9D;AAGF,EAAA,IAAI,YAAY,MAAA,EAAQ;AACtB,IAAA,2BACG,KAAA,EAAA,EAAI,WAAA,EAAU,kBAAA,EAAmB,SAAA,EAAU,qDACzC,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,OAAO,OAAA;AACT;;;;"}

package/dist/{EmptyState-DvSib3QC.cjs → EmptyState-O089K_US.cjs}

@@ -26,16 +26,17 @@ function EmptyState({
   const content = /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
+      "data-tone": tone,
       className: utils_cn.cn(
-        "flex flex-col items-center justify-center px-4 py-6 text-center",
+        "group/empty-state flex max-w-full flex-col items-center justify-center px-4 py-6 text-center",
         "transition-opacity duration-normal ease-out-custom",
         className
       ),
       children: [
-        iconSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("mb-3 [&_svg]:size-5", iconColorByTone[tone]), children: iconSlot }),
+        iconSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("mb-3 max-w-full [&>svg]:size-5", iconColorByTone[tone]), children: iconSlot }),
         /* @__PURE__ */ jsxRuntime.jsx(HeadingTag, { className: "text-subheading text-foreground", children: titleSlot }),
-        descriptionSlot && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "caption", tone: "muted", className: "mt-1.5 max-w-md", children: descriptionSlot }),
-        actionSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: actionSlot })
+        descriptionSlot && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "caption", tone: "muted", className: "mt-1.5 max-w-md wrap-anywhere", children: descriptionSlot }),
+        actionSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 max-w-full", children: actionSlot })
       ]
     }
   );
@@ -46,4 +47,4 @@ function EmptyState({
 }
 
 exports.EmptyState = EmptyState;
-//# sourceMappingURL=EmptyState-DvSib3QC.cjs.map
+//# sourceMappingURL=EmptyState-O089K_US.cjs.map

package/dist/EmptyState-O089K_US.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState-O089K_US.cjs","sources":["../src/ds/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import { CircleSlashIcon, CircleXIcon } from 'lucide-react';\nimport * as React from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\ntype EmptyStateTone = 'default' | 'error';\n\nconst defaultIconByTone: Record<EmptyStateTone, React.ReactNode> = {\n  default: <CircleSlashIcon />,\n  error: <CircleXIcon />,\n};\n\nconst iconColorByTone: Record<EmptyStateTone, string> = {\n  default: 'text-muted-foreground',\n  error: 'text-destructive-foreground',\n};\n\nexport type EmptyStateProps = {\n  /** Defaults to the tone's icon. A bare icon renders at 20px; pass `<EmptyStateIllustration />` for artwork. Pass `null` to render no icon. */\n  iconSlot?: React.ReactNode;\n  titleSlot: React.ReactNode;\n  descriptionSlot?: React.ReactNode;\n  actionSlot?: React.ReactNode;\n  className?: string;\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Colors the icon or illustration; an icon with its own text color keeps it. */\n  tone?: EmptyStateTone;\n  /**\n   * `inline` (default) renders the block in place.\n   * `fill` centers it in the full height of its parent — the parent must have a definite height.\n   */\n  variant?: 'inline' | 'fill';\n};\n\nexport function EmptyState({\n  tone = 'default',\n  iconSlot = defaultIconByTone[tone],\n  titleSlot,\n  descriptionSlot,\n  actionSlot,\n  className,\n  as: HeadingTag = 'h3',\n  variant = 'inline',\n}: EmptyStateProps) {\n  const content = (\n    <div\n      data-tone={tone}\n      className={cn(\n        'group/empty-state flex max-w-full flex-col items-center justify-center px-4 py-6 text-center',\n        'transition-opacity duration-normal ease-out-custom',\n        className,\n      )}\n    >\n      {iconSlot && <div className={cn('mb-3 max-w-full [&>svg]:size-5', iconColorByTone[tone])}>{iconSlot}</div>}\n      <HeadingTag className=\"text-subheading text-foreground\">{titleSlot}</HeadingTag>\n      {descriptionSlot && (\n        <Txt variant=\"caption\" tone=\"muted\" className=\"mt-1.5 max-w-md wrap-anywhere\">\n          {descriptionSlot}\n        </Txt>\n      )}\n      {actionSlot && <div className=\"mt-4 max-w-full\">{actionSlot}</div>}\n    </div>\n  );\n\n  if (variant === 'fill') {\n    return (\n      <div data-slot=\"empty-state-fill\" className=\"flex h-full items-center-safe justify-center-safe\">\n        {content}\n      </div>\n    );\n  }\n\n  return content;\n}\n"],"names":["CircleSlashIcon","CircleXIcon","jsxs","cn","jsx","Txt"],"mappings":";;;;;;;AAOA,MAAM,iBAAA,GAA6D;AAAA,EACjE,OAAA,iCAAUA,2BAAA,EAAA,EAAgB,CAAA;AAAA,EAC1B,KAAA,iCAAQC,uBAAA,EAAA,EAAY;AACtB,CAAA;AAEA,MAAM,eAAA,GAAkD;AAAA,EACtD,OAAA,EAAS,uBAAA;AAAA,EACT,KAAA,EAAO;AACT,CAAA;AAmBO,SAAS,UAAA,CAAW;AAAA,EACzB,IAAA,GAAO,SAAA;AAAA,EACP,QAAA,GAAW,kBAAkB,IAAI,CAAA;AAAA,EACjC,SAAA;AAAA,EACA,eAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAI,UAAA,GAAa,IAAA;AAAA,EACjB,OAAA,GAAU;AACZ,CAAA,EAAoB;AAClB,EAAA,MAAM,OAAA,mBACJC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAWC,WAAA;AAAA,QACT,8FAAA;AAAA,QACA,oDAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,QAAA,oBAAYC,cAAA,CAAC,SAAI,SAAA,EAAWD,WAAA,CAAG,kCAAkC,eAAA,CAAgB,IAAI,CAAC,CAAA,EAAI,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,wBACpGC,cAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAU,iCAAA,EAAmC,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,QAClE,eAAA,mCACEC,OAAA,EAAA,EAAI,OAAA,EAAQ,WAAU,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,+BAAA,EAC3C,QAAA,EAAA,eAAA,EACH,CAAA;AAAA,QAED,UAAA,oBAAcD,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAmB,QAAA,EAAA,UAAA,EAAW;AAAA;AAAA;AAAA,GAC9D;AAGF,EAAA,IAAI,YAAY,MAAA,EAAQ;AACtB,IAAA,sCACG,KAAA,EAAA,EAAI,WAAA,EAAU,kBAAA,EAAmB,SAAA,EAAU,qDACzC,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,OAAO,OAAA;AACT;;;;"}

package/dist/EmptyState.css

@@ -0,0 +1,25 @@
+@keyframes empty-state-swing {
+  0% {
+    rotate: 0deg;
+  }
+
+  18% {
+    rotate: 8deg;
+  }
+
+  40% {
+    rotate: -5.5deg;
+  }
+
+  62% {
+    rotate: 3deg;
+  }
+
+  82% {
+    rotate: -1.2deg;
+  }
+
+  100% {
+    rotate: 0deg;
+  }
+}

package/dist/{Header-BXl3AZgO.js → Header-BHqUw0qH.js}

@@ -9,7 +9,8 @@ const Header = ({ children, border = true, className }) => {
       className: cn(
         "z-50 flex h-header-default w-full items-center gap-2 bg-transparent px-2",
         {
-          "border-b border-border": border
+          // Layout headers share the same edge color as their surrounding surface.
+          "border-b border-surface-rim": border
         },
         className
       ),
@@ -28,4 +29,4 @@ const HeaderGroup = ({ children }) => {
 };
 
 export { Header as H, HeaderAction as a, HeaderGroup as b, HeaderTitle as c };
-//# sourceMappingURL=Header-BXl3AZgO.js.map
+//# sourceMappingURL=Header-BHqUw0qH.js.map

package/dist/Header-BHqUw0qH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header-BHqUw0qH.js","sources":["../src/ds/components/Header/Header.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Txt } from '../Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface HeaderProps {\n  children?: React.ReactNode;\n  border?: boolean;\n  className?: string;\n}\n\nexport const Header = ({ children, border = true, className }: HeaderProps) => {\n  return (\n    <header\n      className={cn(\n        'z-50 flex h-header-default w-full items-center gap-2 bg-transparent px-2',\n        {\n          // Layout headers share the same edge color as their surrounding surface.\n          'border-b border-surface-rim': border,\n        },\n        className,\n      )}\n    >\n      {children}\n    </header>\n  );\n};\n\nexport const HeaderTitle = ({ children }: HeaderProps) => {\n  return (\n    <Txt as=\"h1\" variant=\"body\" tone=\"ink\" className=\"flex items-center gap-2\">\n      {children}\n    </Txt>\n  );\n};\n\nexport const HeaderAction = ({ children }: HeaderProps) => {\n  return <div className=\"ml-auto flex items-center gap-3\">{children}</div>;\n};\n\nexport const HeaderGroup = ({ children }: HeaderProps) => {\n  return <div className=\"flex items-center gap-2\">{children}</div>;\n};\n"],"names":[],"mappings":";;;;AAWO,MAAM,SAAS,CAAC,EAAE,UAAU,MAAA,GAAS,IAAA,EAAM,WAAU,KAAmB;AAC7E,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,0EAAA;AAAA,QACA;AAAA;AAAA,UAEE,6BAAA,EAA+B;AAAA,SACjC;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEO,MAAM,WAAA,GAAc,CAAC,EAAE,QAAA,EAAS,KAAmB;AACxD,EAAA,uBACE,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,IAAA,EAAK,OAAA,EAAQ,QAAO,IAAA,EAAK,KAAA,EAAM,SAAA,EAAU,yBAAA,EAC9C,QAAA,EACH,CAAA;AAEJ;AAEO,MAAM,YAAA,GAAe,CAAC,EAAE,QAAA,EAAS,KAAmB;AACzD,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iCAAA,EAAmC,QAAA,EAAS,CAAA;AACpE;AAEO,MAAM,WAAA,GAAc,CAAC,EAAE,QAAA,EAAS,KAAmB;AACxD,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EAA2B,QAAA,EAAS,CAAA;AAC5D;;;;"}

package/dist/{Header-W3PBmXia.cjs → Header-DwcRfQuP.cjs}

@@ -11,7 +11,8 @@ const Header = ({ children, border = true, className }) => {
       className: utils_cn.cn(
         "z-50 flex h-header-default w-full items-center gap-2 bg-transparent px-2",
         {
-          "border-b border-border": border
+          // Layout headers share the same edge color as their surrounding surface.
+          "border-b border-surface-rim": border
         },
         className
       ),
@@ -33,4 +34,4 @@ exports.Header = Header;
 exports.HeaderAction = HeaderAction;
 exports.HeaderGroup = HeaderGroup;
 exports.HeaderTitle = HeaderTitle;
-//# sourceMappingURL=Header-W3PBmXia.cjs.map
+//# sourceMappingURL=Header-DwcRfQuP.cjs.map

package/dist/Header-DwcRfQuP.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header-DwcRfQuP.cjs","sources":["../src/ds/components/Header/Header.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Txt } from '../Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface HeaderProps {\n  children?: React.ReactNode;\n  border?: boolean;\n  className?: string;\n}\n\nexport const Header = ({ children, border = true, className }: HeaderProps) => {\n  return (\n    <header\n      className={cn(\n        'z-50 flex h-header-default w-full items-center gap-2 bg-transparent px-2',\n        {\n          // Layout headers share the same edge color as their surrounding surface.\n          'border-b border-surface-rim': border,\n        },\n        className,\n      )}\n    >\n      {children}\n    </header>\n  );\n};\n\nexport const HeaderTitle = ({ children }: HeaderProps) => {\n  return (\n    <Txt as=\"h1\" variant=\"body\" tone=\"ink\" className=\"flex items-center gap-2\">\n      {children}\n    </Txt>\n  );\n};\n\nexport const HeaderAction = ({ children }: HeaderProps) => {\n  return <div className=\"ml-auto flex items-center gap-3\">{children}</div>;\n};\n\nexport const HeaderGroup = ({ children }: HeaderProps) => {\n  return <div className=\"flex items-center gap-2\">{children}</div>;\n};\n"],"names":["jsx","cn","Txt"],"mappings":";;;;;;AAWO,MAAM,SAAS,CAAC,EAAE,UAAU,MAAA,GAAS,IAAA,EAAM,WAAU,KAAmB;AAC7E,EAAA,uBACEA,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACT,0EAAA;AAAA,QACA;AAAA;AAAA,UAEE,6BAAA,EAA+B;AAAA,SACjC;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEO,MAAM,WAAA,GAAc,CAAC,EAAE,QAAA,EAAS,KAAmB;AACxD,EAAA,uBACED,cAAA,CAACE,OAAA,EAAA,EAAI,EAAA,EAAG,IAAA,EAAK,OAAA,EAAQ,QAAO,IAAA,EAAK,KAAA,EAAM,SAAA,EAAU,yBAAA,EAC9C,QAAA,EACH,CAAA;AAEJ;AAEO,MAAM,YAAA,GAAe,CAAC,EAAE,QAAA,EAAS,KAAmB;AACzD,EAAA,uBAAOF,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iCAAA,EAAmC,QAAA,EAAS,CAAA;AACpE;AAEO,MAAM,WAAA,GAAc,CAAC,EAAE,QAAA,EAAS,KAAmB;AACxD,EAAA,uBAAOA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EAA2B,QAAA,EAAS,CAAA;AAC5D;;;;;;;"}

package/dist/{alert-dialog-CzRo39mH.js → alert-dialog-DBLWYiU1.js}

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { AlertDialog as AlertDialog$1 } from '@base-ui/react/alert-dialog';
 import { B as Button } from './Button-D43ghVKt.js';
-import { n as DialogContext, g as DialogHeader, f as DialogFooter, a as DialogBody, j as DialogTitle, e as DialogDescription, b as DialogCancel, i as DialogPortal, h as DialogOverlay, o as dialogContentSizeClasses, p as dialogPopupClassName, l as dialogActionSizeClasses, m as dialogActionLayoutClasses } from './dialog-Dt5kASkl.js';
+import { n as DialogContext, g as DialogHeader, f as DialogFooter, a as DialogBody, j as DialogTitle, e as DialogDescription, b as DialogCancel, i as DialogPortal, h as DialogOverlay, o as dialogContentSizeClasses, p as dialogPopupClassName, l as dialogActionSizeClasses, m as dialogActionLayoutClasses } from './dialog-DhtPcWY-.js';
 import { c as cn } from './cn-65Adrsfj.js';
 
 const alertDialogContext = { intent: "default", pending: false };
@@ -50,4 +50,4 @@ AlertDialog.Action = AlertDialogAction;
 AlertDialog.Cancel = DialogCancel;
 
 export { AlertDialog as A };
-//# sourceMappingURL=alert-dialog-CzRo39mH.js.map
+//# sourceMappingURL=alert-dialog-DBLWYiU1.js.map

package/dist/{alert-dialog-CzRo39mH.js.map → alert-dialog-DBLWYiU1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-CzRo39mH.js","sources":["../src/ds/components/AlertDialog/alert-dialog.tsx"],"sourcesContent":["import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\n\nimport { Button } from '@/ds/components/Button';\nimport {\n  DialogBody,\n  DialogCancel,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n} from '@/ds/components/Dialog';\nimport {\n  DialogContext,\n  dialogActionLayoutClasses,\n  dialogActionSizeClasses,\n} from '@/ds/components/Dialog/dialog-context';\nimport type { DialogContextValue } from '@/ds/components/Dialog/dialog-context';\nimport { dialogContentSizeClasses, dialogPopupClassName } from '@/ds/components/Dialog/dialog-shell';\nimport type { DialogSize } from '@/ds/components/Dialog/dialog-shell';\nimport { cn } from '@/lib/utils';\n\nconst alertDialogContext: DialogContextValue = { intent: 'default', pending: false };\n\nfunction AlertDialog(props: AlertDialogPrimitive.Root.Props) {\n  return (\n    <DialogContext.Provider value={alertDialogContext}>\n      <AlertDialogPrimitive.Root {...props} />\n    </DialogContext.Provider>\n  );\n}\n\ntype AlertDialogContentProps = Omit<AlertDialogPrimitive.Popup.Props, 'className'> & {\n  className?: string;\n  size?: DialogSize;\n};\n\nfunction AlertDialogContent({ className, size = 'sm', ...props }: AlertDialogContentProps) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <AlertDialogPrimitive.Popup\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(dialogPopupClassName, dialogContentSizeClasses[size], className)}\n        {...props}\n      />\n    </DialogPortal>\n  );\n}\n\nfunction AlertDialogAction({ children, ...props }: AlertDialogPrimitive.Close.Props) {\n  return (\n    <AlertDialogPrimitive.Close\n      render={\n        <Button\n          variant=\"primary\"\n          size=\"md\"\n          className={cn(dialogActionLayoutClasses, dialogActionSizeClasses.md)}\n          children={children}\n        />\n      }\n      {...props}\n    />\n  );\n}\n\nAlertDialog.Trigger = AlertDialogPrimitive.Trigger;\nAlertDialog.Content = AlertDialogContent;\nAlertDialog.Header = DialogHeader;\nAlertDialog.Footer = DialogFooter;\nAlertDialog.Body = DialogBody;\nAlertDialog.Title = DialogTitle;\nAlertDialog.Description = DialogDescription;\nAlertDialog.Action = AlertDialogAction;\nAlertDialog.Cancel = DialogCancel;\n\nexport { AlertDialog };\n"],"names":["AlertDialogPrimitive"],"mappings":";;;;;;AAuBA,MAAM,kBAAA,GAAyC,EAAE,MAAA,EAAQ,SAAA,EAAW,SAAS,KAAA,EAAM;AAEnF,SAAS,YAAY,KAAA,EAAwC;AAC3D,EAAA,uBACE,GAAA,CAAC,aAAA,CAAc,QAAA,EAAd,EAAuB,KAAA,EAAO,kBAAA,EAC7B,QAAA,kBAAA,GAAA,CAACA,aAAA,CAAqB,IAAA,EAArB,EAA2B,GAAG,KAAA,EAAO,CAAA,EACxC,CAAA;AAEJ;AAOA,SAAS,mBAAmB,EAAE,SAAA,EAAW,OAAO,IAAA,EAAM,GAAG,OAAM,EAA4B;AACzF,EAAA,4BACG,YAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,CAAA;AAAA,oBACf,GAAA;AAAA,MAACA,aAAA,CAAqB,KAAA;AAAA,MAArB;AAAA,QACC,WAAA,EAAU,sBAAA;AAAA,QACV,WAAA,EAAW,IAAA;AAAA,QACX,WAAW,EAAA,CAAG,oBAAA,EAAsB,wBAAA,CAAyB,IAAI,GAAG,SAAS,CAAA;AAAA,QAC5E,GAAG;AAAA;AAAA;AACN,GAAA,EACF,CAAA;AAEJ;AAEA,SAAS,iBAAA,CAAkB,EAAE,QAAA,EAAU,GAAG,OAAM,EAAqC;AACnF,EAAA,uBACE,GAAA;AAAA,IAACA,aAAA,CAAqB,KAAA;AAAA,IAArB;AAAA,MACC,MAAA,kBACE,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,SAAA;AAAA,UACR,IAAA,EAAK,IAAA;AAAA,UACL,SAAA,EAAW,EAAA,CAAG,yBAAA,EAA2B,uBAAA,CAAwB,EAAE,CAAA;AAAA,UACnE;AAAA;AAAA,OACF;AAAA,MAED,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,WAAA,CAAY,UAAUA,aAAA,CAAqB,OAAA;AAC3C,WAAA,CAAY,OAAA,GAAU,kBAAA;AACtB,WAAA,CAAY,MAAA,GAAS,YAAA;AACrB,WAAA,CAAY,MAAA,GAAS,YAAA;AACrB,WAAA,CAAY,IAAA,GAAO,UAAA;AACnB,WAAA,CAAY,KAAA,GAAQ,WAAA;AACpB,WAAA,CAAY,WAAA,GAAc,iBAAA;AAC1B,WAAA,CAAY,MAAA,GAAS,iBAAA;AACrB,WAAA,CAAY,MAAA,GAAS,YAAA;;;;"}
+{"version":3,"file":"alert-dialog-DBLWYiU1.js","sources":["../src/ds/components/AlertDialog/alert-dialog.tsx"],"sourcesContent":["import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\n\nimport { Button } from '@/ds/components/Button';\nimport {\n  DialogBody,\n  DialogCancel,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n} from '@/ds/components/Dialog';\nimport {\n  DialogContext,\n  dialogActionLayoutClasses,\n  dialogActionSizeClasses,\n} from '@/ds/components/Dialog/dialog-context';\nimport type { DialogContextValue } from '@/ds/components/Dialog/dialog-context';\nimport { dialogContentSizeClasses, dialogPopupClassName } from '@/ds/components/Dialog/dialog-shell';\nimport type { DialogSize } from '@/ds/components/Dialog/dialog-shell';\nimport { cn } from '@/lib/utils';\n\nconst alertDialogContext: DialogContextValue = { intent: 'default', pending: false };\n\nfunction AlertDialog(props: AlertDialogPrimitive.Root.Props) {\n  return (\n    <DialogContext.Provider value={alertDialogContext}>\n      <AlertDialogPrimitive.Root {...props} />\n    </DialogContext.Provider>\n  );\n}\n\ntype AlertDialogContentProps = Omit<AlertDialogPrimitive.Popup.Props, 'className'> & {\n  className?: string;\n  size?: DialogSize;\n};\n\nfunction AlertDialogContent({ className, size = 'sm', ...props }: AlertDialogContentProps) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <AlertDialogPrimitive.Popup\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(dialogPopupClassName, dialogContentSizeClasses[size], className)}\n        {...props}\n      />\n    </DialogPortal>\n  );\n}\n\nfunction AlertDialogAction({ children, ...props }: AlertDialogPrimitive.Close.Props) {\n  return (\n    <AlertDialogPrimitive.Close\n      render={\n        <Button\n          variant=\"primary\"\n          size=\"md\"\n          className={cn(dialogActionLayoutClasses, dialogActionSizeClasses.md)}\n          children={children}\n        />\n      }\n      {...props}\n    />\n  );\n}\n\nAlertDialog.Trigger = AlertDialogPrimitive.Trigger;\nAlertDialog.Content = AlertDialogContent;\nAlertDialog.Header = DialogHeader;\nAlertDialog.Footer = DialogFooter;\nAlertDialog.Body = DialogBody;\nAlertDialog.Title = DialogTitle;\nAlertDialog.Description = DialogDescription;\nAlertDialog.Action = AlertDialogAction;\nAlertDialog.Cancel = DialogCancel;\n\nexport { AlertDialog };\n"],"names":["AlertDialogPrimitive"],"mappings":";;;;;;AAuBA,MAAM,kBAAA,GAAyC,EAAE,MAAA,EAAQ,SAAA,EAAW,SAAS,KAAA,EAAM;AAEnF,SAAS,YAAY,KAAA,EAAwC;AAC3D,EAAA,uBACE,GAAA,CAAC,aAAA,CAAc,QAAA,EAAd,EAAuB,KAAA,EAAO,kBAAA,EAC7B,QAAA,kBAAA,GAAA,CAACA,aAAA,CAAqB,IAAA,EAArB,EAA2B,GAAG,KAAA,EAAO,CAAA,EACxC,CAAA;AAEJ;AAOA,SAAS,mBAAmB,EAAE,SAAA,EAAW,OAAO,IAAA,EAAM,GAAG,OAAM,EAA4B;AACzF,EAAA,4BACG,YAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,CAAA;AAAA,oBACf,GAAA;AAAA,MAACA,aAAA,CAAqB,KAAA;AAAA,MAArB;AAAA,QACC,WAAA,EAAU,sBAAA;AAAA,QACV,WAAA,EAAW,IAAA;AAAA,QACX,WAAW,EAAA,CAAG,oBAAA,EAAsB,wBAAA,CAAyB,IAAI,GAAG,SAAS,CAAA;AAAA,QAC5E,GAAG;AAAA;AAAA;AACN,GAAA,EACF,CAAA;AAEJ;AAEA,SAAS,iBAAA,CAAkB,EAAE,QAAA,EAAU,GAAG,OAAM,EAAqC;AACnF,EAAA,uBACE,GAAA;AAAA,IAACA,aAAA,CAAqB,KAAA;AAAA,IAArB;AAAA,MACC,MAAA,kBACE,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,SAAA;AAAA,UACR,IAAA,EAAK,IAAA;AAAA,UACL,SAAA,EAAW,EAAA,CAAG,yBAAA,EAA2B,uBAAA,CAAwB,EAAE,CAAA;AAAA,UACnE;AAAA;AAAA,OACF;AAAA,MAED,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,WAAA,CAAY,UAAUA,aAAA,CAAqB,OAAA;AAC3C,WAAA,CAAY,OAAA,GAAU,kBAAA;AACtB,WAAA,CAAY,MAAA,GAAS,YAAA;AACrB,WAAA,CAAY,MAAA,GAAS,YAAA;AACrB,WAAA,CAAY,IAAA,GAAO,UAAA;AACnB,WAAA,CAAY,KAAA,GAAQ,WAAA;AACpB,WAAA,CAAY,WAAA,GAAc,iBAAA;AAC1B,WAAA,CAAY,MAAA,GAAS,iBAAA;AACrB,WAAA,CAAY,MAAA,GAAS,YAAA;;;;"}

package/dist/{alert-dialog-DC-Fapxf.cjs → alert-dialog-DhG32okh.cjs}

@@ -3,7 +3,7 @@
 const jsxRuntime = require('react/jsx-runtime');
 const alertDialog = require('@base-ui/react/alert-dialog');
 const Button = require('./Button-CXhSUBxN.cjs');
-const dialog = require('./dialog-d_AK1NQD.cjs');
+const dialog = require('./dialog-c2AhB8HM.cjs');
 const utils_cn = require('./cn-DG0X1KEP.cjs');
 
 const alertDialogContext = { intent: "default", pending: false };
@@ -52,4 +52,4 @@ AlertDialog.Action = AlertDialogAction;
 AlertDialog.Cancel = dialog.DialogCancel;
 
 exports.AlertDialog = AlertDialog;
-//# sourceMappingURL=alert-dialog-DC-Fapxf.cjs.map
+//# sourceMappingURL=alert-dialog-DhG32okh.cjs.map

package/dist/{alert-dialog-DC-Fapxf.cjs.map → alert-dialog-DhG32okh.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-DC-Fapxf.cjs","sources":["../src/ds/components/AlertDialog/alert-dialog.tsx"],"sourcesContent":["import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\n\nimport { Button } from '@/ds/components/Button';\nimport {\n  DialogBody,\n  DialogCancel,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n} from '@/ds/components/Dialog';\nimport {\n  DialogContext,\n  dialogActionLayoutClasses,\n  dialogActionSizeClasses,\n} from '@/ds/components/Dialog/dialog-context';\nimport type { DialogContextValue } from '@/ds/components/Dialog/dialog-context';\nimport { dialogContentSizeClasses, dialogPopupClassName } from '@/ds/components/Dialog/dialog-shell';\nimport type { DialogSize } from '@/ds/components/Dialog/dialog-shell';\nimport { cn } from '@/lib/utils';\n\nconst alertDialogContext: DialogContextValue = { intent: 'default', pending: false };\n\nfunction AlertDialog(props: AlertDialogPrimitive.Root.Props) {\n  return (\n    <DialogContext.Provider value={alertDialogContext}>\n      <AlertDialogPrimitive.Root {...props} />\n    </DialogContext.Provider>\n  );\n}\n\ntype AlertDialogContentProps = Omit<AlertDialogPrimitive.Popup.Props, 'className'> & {\n  className?: string;\n  size?: DialogSize;\n};\n\nfunction AlertDialogContent({ className, size = 'sm', ...props }: AlertDialogContentProps) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <AlertDialogPrimitive.Popup\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(dialogPopupClassName, dialogContentSizeClasses[size], className)}\n        {...props}\n      />\n    </DialogPortal>\n  );\n}\n\nfunction AlertDialogAction({ children, ...props }: AlertDialogPrimitive.Close.Props) {\n  return (\n    <AlertDialogPrimitive.Close\n      render={\n        <Button\n          variant=\"primary\"\n          size=\"md\"\n          className={cn(dialogActionLayoutClasses, dialogActionSizeClasses.md)}\n          children={children}\n        />\n      }\n      {...props}\n    />\n  );\n}\n\nAlertDialog.Trigger = AlertDialogPrimitive.Trigger;\nAlertDialog.Content = AlertDialogContent;\nAlertDialog.Header = DialogHeader;\nAlertDialog.Footer = DialogFooter;\nAlertDialog.Body = DialogBody;\nAlertDialog.Title = DialogTitle;\nAlertDialog.Description = DialogDescription;\nAlertDialog.Action = AlertDialogAction;\nAlertDialog.Cancel = DialogCancel;\n\nexport { AlertDialog };\n"],"names":["jsx","DialogContext","AlertDialogPrimitive","DialogPortal","DialogOverlay","cn","dialogPopupClassName","dialogContentSizeClasses","Button","dialogActionLayoutClasses","dialogActionSizeClasses","DialogHeader","DialogFooter","DialogBody","DialogTitle","DialogDescription","DialogCancel"],"mappings":";;;;;;;;AAuBA,MAAM,kBAAA,GAAyC,EAAE,MAAA,EAAQ,SAAA,EAAW,SAAS,KAAA,EAAM;AAEnF,SAAS,YAAY,KAAA,EAAwC;AAC3D,EAAA,uBACEA,cAAA,CAACC,oBAAA,CAAc,QAAA,EAAd,EAAuB,KAAA,EAAO,kBAAA,EAC7B,QAAA,kBAAAD,cAAA,CAACE,uBAAA,CAAqB,IAAA,EAArB,EAA2B,GAAG,KAAA,EAAO,CAAA,EACxC,CAAA;AAEJ;AAOA,SAAS,mBAAmB,EAAE,SAAA,EAAW,OAAO,IAAA,EAAM,GAAG,OAAM,EAA4B;AACzF,EAAA,uCACGC,mBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAH,cAAA,CAACI,oBAAA,EAAA,EAAc,CAAA;AAAA,oBACfJ,cAAA;AAAA,MAACE,uBAAA,CAAqB,KAAA;AAAA,MAArB;AAAA,QACC,WAAA,EAAU,sBAAA;AAAA,QACV,WAAA,EAAW,IAAA;AAAA,QACX,WAAWG,WAAA,CAAGC,2BAAA,EAAsBC,+BAAA,CAAyB,IAAI,GAAG,SAAS,CAAA;AAAA,QAC5E,GAAG;AAAA;AAAA;AACN,GAAA,EACF,CAAA;AAEJ;AAEA,SAAS,iBAAA,CAAkB,EAAE,QAAA,EAAU,GAAG,OAAM,EAAqC;AACnF,EAAA,uBACEP,cAAA;AAAA,IAACE,uBAAA,CAAqB,KAAA;AAAA,IAArB;AAAA,MACC,MAAA,kBACEF,cAAA;AAAA,QAACQ,aAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,SAAA;AAAA,UACR,IAAA,EAAK,IAAA;AAAA,UACL,SAAA,EAAWH,WAAA,CAAGI,gCAAA,EAA2BC,8BAAA,CAAwB,EAAE,CAAA;AAAA,UACnE;AAAA;AAAA,OACF;AAAA,MAED,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,WAAA,CAAY,UAAUR,uBAAA,CAAqB,OAAA;AAC3C,WAAA,CAAY,OAAA,GAAU,kBAAA;AACtB,WAAA,CAAY,MAAA,GAASS,mBAAA;AACrB,WAAA,CAAY,MAAA,GAASC,mBAAA;AACrB,WAAA,CAAY,IAAA,GAAOC,iBAAA;AACnB,WAAA,CAAY,KAAA,GAAQC,kBAAA;AACpB,WAAA,CAAY,WAAA,GAAcC,wBAAA;AAC1B,WAAA,CAAY,MAAA,GAAS,iBAAA;AACrB,WAAA,CAAY,MAAA,GAASC,mBAAA;;;;"}
+{"version":3,"file":"alert-dialog-DhG32okh.cjs","sources":["../src/ds/components/AlertDialog/alert-dialog.tsx"],"sourcesContent":["import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\n\nimport { Button } from '@/ds/components/Button';\nimport {\n  DialogBody,\n  DialogCancel,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n} from '@/ds/components/Dialog';\nimport {\n  DialogContext,\n  dialogActionLayoutClasses,\n  dialogActionSizeClasses,\n} from '@/ds/components/Dialog/dialog-context';\nimport type { DialogContextValue } from '@/ds/components/Dialog/dialog-context';\nimport { dialogContentSizeClasses, dialogPopupClassName } from '@/ds/components/Dialog/dialog-shell';\nimport type { DialogSize } from '@/ds/components/Dialog/dialog-shell';\nimport { cn } from '@/lib/utils';\n\nconst alertDialogContext: DialogContextValue = { intent: 'default', pending: false };\n\nfunction AlertDialog(props: AlertDialogPrimitive.Root.Props) {\n  return (\n    <DialogContext.Provider value={alertDialogContext}>\n      <AlertDialogPrimitive.Root {...props} />\n    </DialogContext.Provider>\n  );\n}\n\ntype AlertDialogContentProps = Omit<AlertDialogPrimitive.Popup.Props, 'className'> & {\n  className?: string;\n  size?: DialogSize;\n};\n\nfunction AlertDialogContent({ className, size = 'sm', ...props }: AlertDialogContentProps) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <AlertDialogPrimitive.Popup\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(dialogPopupClassName, dialogContentSizeClasses[size], className)}\n        {...props}\n      />\n    </DialogPortal>\n  );\n}\n\nfunction AlertDialogAction({ children, ...props }: AlertDialogPrimitive.Close.Props) {\n  return (\n    <AlertDialogPrimitive.Close\n      render={\n        <Button\n          variant=\"primary\"\n          size=\"md\"\n          className={cn(dialogActionLayoutClasses, dialogActionSizeClasses.md)}\n          children={children}\n        />\n      }\n      {...props}\n    />\n  );\n}\n\nAlertDialog.Trigger = AlertDialogPrimitive.Trigger;\nAlertDialog.Content = AlertDialogContent;\nAlertDialog.Header = DialogHeader;\nAlertDialog.Footer = DialogFooter;\nAlertDialog.Body = DialogBody;\nAlertDialog.Title = DialogTitle;\nAlertDialog.Description = DialogDescription;\nAlertDialog.Action = AlertDialogAction;\nAlertDialog.Cancel = DialogCancel;\n\nexport { AlertDialog };\n"],"names":["jsx","DialogContext","AlertDialogPrimitive","DialogPortal","DialogOverlay","cn","dialogPopupClassName","dialogContentSizeClasses","Button","dialogActionLayoutClasses","dialogActionSizeClasses","DialogHeader","DialogFooter","DialogBody","DialogTitle","DialogDescription","DialogCancel"],"mappings":";;;;;;;;AAuBA,MAAM,kBAAA,GAAyC,EAAE,MAAA,EAAQ,SAAA,EAAW,SAAS,KAAA,EAAM;AAEnF,SAAS,YAAY,KAAA,EAAwC;AAC3D,EAAA,uBACEA,cAAA,CAACC,oBAAA,CAAc,QAAA,EAAd,EAAuB,KAAA,EAAO,kBAAA,EAC7B,QAAA,kBAAAD,cAAA,CAACE,uBAAA,CAAqB,IAAA,EAArB,EAA2B,GAAG,KAAA,EAAO,CAAA,EACxC,CAAA;AAEJ;AAOA,SAAS,mBAAmB,EAAE,SAAA,EAAW,OAAO,IAAA,EAAM,GAAG,OAAM,EAA4B;AACzF,EAAA,uCACGC,mBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAH,cAAA,CAACI,oBAAA,EAAA,EAAc,CAAA;AAAA,oBACfJ,cAAA;AAAA,MAACE,uBAAA,CAAqB,KAAA;AAAA,MAArB;AAAA,QACC,WAAA,EAAU,sBAAA;AAAA,QACV,WAAA,EAAW,IAAA;AAAA,QACX,WAAWG,WAAA,CAAGC,2BAAA,EAAsBC,+BAAA,CAAyB,IAAI,GAAG,SAAS,CAAA;AAAA,QAC5E,GAAG;AAAA;AAAA;AACN,GAAA,EACF,CAAA;AAEJ;AAEA,SAAS,iBAAA,CAAkB,EAAE,QAAA,EAAU,GAAG,OAAM,EAAqC;AACnF,EAAA,uBACEP,cAAA;AAAA,IAACE,uBAAA,CAAqB,KAAA;AAAA,IAArB;AAAA,MACC,MAAA,kBACEF,cAAA;AAAA,QAACQ,aAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,SAAA;AAAA,UACR,IAAA,EAAK,IAAA;AAAA,UACL,SAAA,EAAWH,WAAA,CAAGI,gCAAA,EAA2BC,8BAAA,CAAwB,EAAE,CAAA;AAAA,UACnE;AAAA;AAAA,OACF;AAAA,MAED,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,WAAA,CAAY,UAAUR,uBAAA,CAAqB,OAAA;AAC3C,WAAA,CAAY,OAAA,GAAU,kBAAA;AACtB,WAAA,CAAY,MAAA,GAASS,mBAAA;AACrB,WAAA,CAAY,MAAA,GAASC,mBAAA;AACrB,WAAA,CAAY,IAAA,GAAOC,iBAAA;AACnB,WAAA,CAAY,KAAA,GAAQC,kBAAA;AACpB,WAAA,CAAY,WAAA,GAAcC,wBAAA;AAC1B,WAAA,CAAY,MAAA,GAAS,iBAAA;AACrB,WAAA,CAAY,MAAA,GAASC,mBAAA;;;;"}

package/dist/attachment-card-BcK3XoCH.cjs

@@ -0,0 +1,70 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const Txt = require('./Txt-DNnvlrBo.cjs');
+const primitives_messageSurface = require('./primitives/message-surface.cjs.js');
+const utils_cn = require('./cn-DG0X1KEP.cjs');
+
+function AttachmentPreview({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative block h-44 mask-b-from-45% mask-b-to-95%", children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-x-0 bottom-0 h-28", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent,black_15%,black_30%,transparent_45%)] backdrop-blur-[2px]" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_15%,black_30%,black_45%,transparent_60%)] backdrop-blur-xs" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_30%,black_45%,black_60%,transparent_75%)] backdrop-blur-sm" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_45%,black_60%,black_75%,transparent_90%)] backdrop-blur-lg" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_60%,black_75%)] backdrop-blur-[32px]" })
+    ] })
+  ] });
+}
+
+function AttachmentCard({ name, typeLabel, icon, preview, onClick, href, buttonRef }) {
+  const className = utils_cn.cn(
+    primitives_messageSurface.messageSurfaceStyle,
+    "relative isolate block w-64 max-w-full min-w-0 overflow-hidden text-left",
+    preview && "after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-[inherit] after:inset-ring-1 after:inset-ring-white/15",
+    (onClick || href) && "cursor-pointer hover:bg-fill-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus motion-safe:transition-colors"
+  );
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    preview && /* @__PURE__ */ jsxRuntime.jsx(AttachmentPreview, { children: preview }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: utils_cn.cn("flex min-w-0 items-center gap-2.5 px-3 py-2.5", preview && "absolute inset-x-0 bottom-0"), children: [
+      !preview && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-5 shrink-0 items-center justify-center text-muted-foreground", "aria-hidden": "true", children: icon }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "body-sm", className: "block truncate", title: name, children: name }),
+        /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", tone: "muted", className: "block truncate", children: typeLabel })
+      ] })
+    ] })
+  ] });
+  if (onClick) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref: buttonRef,
+        type: "button",
+        className,
+        onClick,
+        "aria-label": `Preview ${name}`,
+        title: name,
+        children: content
+      }
+    );
+  }
+  if (href) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        className,
+        href,
+        target: "_blank",
+        rel: "noreferrer noopener",
+        "aria-label": `Open ${name}`,
+        title: name,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, title: name, children: content });
+}
+
+exports.AttachmentCard = AttachmentCard;
+//# sourceMappingURL=attachment-card-BcK3XoCH.cjs.map

package/dist/attachment-card-BcK3XoCH.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment-card-BcK3XoCH.cjs","sources":["../src/ds/components/AttachmentCard/attachment-preview.tsx","../src/ds/components/AttachmentCard/attachment-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\n/** Crossfade between fully blurred bands, then fade the image into the message surface for its caption. */\nexport function AttachmentPreview({ children }: { children: ReactNode }) {\n  return (\n    <span className=\"relative block h-44 mask-b-from-45% mask-b-to-95%\">\n      {children}\n      {/* Fully opaque, overlapping bands replace sharp pixels as the blur radius increases.\n          Fading each layer across its entire height would leave sharp detail visible underneath. */}\n      <span aria-hidden=\"true\" className=\"pointer-events-none absolute inset-x-0 bottom-0 h-28\">\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent,black_15%,black_30%,transparent_45%)] backdrop-blur-[2px]\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_15%,black_30%,black_45%,transparent_60%)] backdrop-blur-xs\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_30%,black_45%,black_60%,transparent_75%)] backdrop-blur-sm\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_45%,black_60%,black_75%,transparent_90%)] backdrop-blur-lg\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_60%,black_75%)] backdrop-blur-[32px]\" />\n      </span>\n    </span>\n  );\n}\n","import type { ReactNode, Ref } from 'react';\nimport { Txt } from '../Txt';\nimport { AttachmentPreview } from './attachment-preview';\nimport { messageSurfaceStyle } from '@/ds/primitives/message-surface';\nimport { cn } from '@/lib/utils';\n\nexport interface AttachmentCardProps {\n  name: string;\n  buttonRef?: Ref<HTMLButtonElement>;\n  typeLabel: string;\n  icon: ReactNode;\n  preview?: ReactNode;\n  onClick?: () => void;\n  href?: string;\n}\n\n/** Sent-file presentation. Upload state and removal controls belong to the composer. */\nexport function AttachmentCard({ name, typeLabel, icon, preview, onClick, href, buttonRef }: AttachmentCardProps) {\n  const className = cn(\n    messageSurfaceStyle,\n    'relative isolate block w-64 max-w-full min-w-0 overflow-hidden text-left',\n    preview &&\n      'after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-[inherit] after:inset-ring-1 after:inset-ring-white/15',\n    (onClick || href) &&\n      'cursor-pointer hover:bg-fill-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus motion-safe:transition-colors',\n  );\n  const content = (\n    <>\n      {preview && <AttachmentPreview>{preview}</AttachmentPreview>}\n      <span className={cn('flex min-w-0 items-center gap-2.5 px-3 py-2.5', preview && 'absolute inset-x-0 bottom-0')}>\n        {!preview && (\n          <span className=\"flex size-5 shrink-0 items-center justify-center text-muted-foreground\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        <span className=\"min-w-0 flex-1\">\n          <Txt as=\"span\" variant=\"body-sm\" className=\"block truncate\" title={name}>\n            {name}\n          </Txt>\n          <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"block truncate\">\n            {typeLabel}\n          </Txt>\n        </span>\n      </span>\n    </>\n  );\n\n  if (onClick) {\n    return (\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        className={className}\n        onClick={onClick}\n        aria-label={`Preview ${name}`}\n        title={name}\n      >\n        {content}\n      </button>\n    );\n  }\n  if (href) {\n    return (\n      <a\n        className={className}\n        href={href}\n        target=\"_blank\"\n        rel=\"noreferrer noopener\"\n        aria-label={`Open ${name}`}\n        title={name}\n      >\n        {content}\n      </a>\n    );\n  }\n  return (\n    <div className={className} title={name}>\n      {content}\n    </div>\n  );\n}\n"],"names":["jsxs","jsx","cn","messageSurfaceStyle","Fragment","Txt"],"mappings":"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"}

package/dist/attachment-card-CbsWWaV5.js

@@ -0,0 +1,68 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { T as Txt } from './Txt-C3cYJgKU.js';
+import { messageSurfaceStyle } from './primitives/message-surface.es.js';
+import { c as cn } from './cn-65Adrsfj.js';
+
+function AttachmentPreview({ children }) {
+  return /* @__PURE__ */ jsxs("span", { className: "relative block h-44 mask-b-from-45% mask-b-to-95%", children: [
+    children,
+    /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-x-0 bottom-0 h-28", children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent,black_15%,black_30%,transparent_45%)] backdrop-blur-[2px]" }),
+      /* @__PURE__ */ jsx("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_15%,black_30%,black_45%,transparent_60%)] backdrop-blur-xs" }),
+      /* @__PURE__ */ jsx("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_30%,black_45%,black_60%,transparent_75%)] backdrop-blur-sm" }),
+      /* @__PURE__ */ jsx("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_45%,black_60%,black_75%,transparent_90%)] backdrop-blur-lg" }),
+      /* @__PURE__ */ jsx("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_60%,black_75%)] backdrop-blur-[32px]" })
+    ] })
+  ] });
+}
+
+function AttachmentCard({ name, typeLabel, icon, preview, onClick, href, buttonRef }) {
+  const className = cn(
+    messageSurfaceStyle,
+    "relative isolate block w-64 max-w-full min-w-0 overflow-hidden text-left",
+    preview && "after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-[inherit] after:inset-ring-1 after:inset-ring-white/15",
+    (onClick || href) && "cursor-pointer hover:bg-fill-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus motion-safe:transition-colors"
+  );
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    preview && /* @__PURE__ */ jsx(AttachmentPreview, { children: preview }),
+    /* @__PURE__ */ jsxs("span", { className: cn("flex min-w-0 items-center gap-2.5 px-3 py-2.5", preview && "absolute inset-x-0 bottom-0"), children: [
+      !preview && /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center text-muted-foreground", "aria-hidden": "true", children: icon }),
+      /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx(Txt, { as: "span", variant: "body-sm", className: "block truncate", title: name, children: name }),
+        /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", tone: "muted", className: "block truncate", children: typeLabel })
+      ] })
+    ] })
+  ] });
+  if (onClick) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: buttonRef,
+        type: "button",
+        className,
+        onClick,
+        "aria-label": `Preview ${name}`,
+        title: name,
+        children: content
+      }
+    );
+  }
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        className,
+        href,
+        target: "_blank",
+        rel: "noreferrer noopener",
+        "aria-label": `Open ${name}`,
+        title: name,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className, title: name, children: content });
+}
+
+export { AttachmentCard as A };
+//# sourceMappingURL=attachment-card-CbsWWaV5.js.map

package/dist/attachment-card-CbsWWaV5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment-card-CbsWWaV5.js","sources":["../src/ds/components/AttachmentCard/attachment-preview.tsx","../src/ds/components/AttachmentCard/attachment-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\n/** Crossfade between fully blurred bands, then fade the image into the message surface for its caption. */\nexport function AttachmentPreview({ children }: { children: ReactNode }) {\n  return (\n    <span className=\"relative block h-44 mask-b-from-45% mask-b-to-95%\">\n      {children}\n      {/* Fully opaque, overlapping bands replace sharp pixels as the blur radius increases.\n          Fading each layer across its entire height would leave sharp detail visible underneath. */}\n      <span aria-hidden=\"true\" className=\"pointer-events-none absolute inset-x-0 bottom-0 h-28\">\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent,black_15%,black_30%,transparent_45%)] backdrop-blur-[2px]\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_15%,black_30%,black_45%,transparent_60%)] backdrop-blur-xs\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_30%,black_45%,black_60%,transparent_75%)] backdrop-blur-sm\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_45%,black_60%,black_75%,transparent_90%)] backdrop-blur-lg\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_60%,black_75%)] backdrop-blur-[32px]\" />\n      </span>\n    </span>\n  );\n}\n","import type { ReactNode, Ref } from 'react';\nimport { Txt } from '../Txt';\nimport { AttachmentPreview } from './attachment-preview';\nimport { messageSurfaceStyle } from '@/ds/primitives/message-surface';\nimport { cn } from '@/lib/utils';\n\nexport interface AttachmentCardProps {\n  name: string;\n  buttonRef?: Ref<HTMLButtonElement>;\n  typeLabel: string;\n  icon: ReactNode;\n  preview?: ReactNode;\n  onClick?: () => void;\n  href?: string;\n}\n\n/** Sent-file presentation. Upload state and removal controls belong to the composer. */\nexport function AttachmentCard({ name, typeLabel, icon, preview, onClick, href, buttonRef }: AttachmentCardProps) {\n  const className = cn(\n    messageSurfaceStyle,\n    'relative isolate block w-64 max-w-full min-w-0 overflow-hidden text-left',\n    preview &&\n      'after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-[inherit] after:inset-ring-1 after:inset-ring-white/15',\n    (onClick || href) &&\n      'cursor-pointer hover:bg-fill-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus motion-safe:transition-colors',\n  );\n  const content = (\n    <>\n      {preview && <AttachmentPreview>{preview}</AttachmentPreview>}\n      <span className={cn('flex min-w-0 items-center gap-2.5 px-3 py-2.5', preview && 'absolute inset-x-0 bottom-0')}>\n        {!preview && (\n          <span className=\"flex size-5 shrink-0 items-center justify-center text-muted-foreground\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        <span className=\"min-w-0 flex-1\">\n          <Txt as=\"span\" variant=\"body-sm\" className=\"block truncate\" title={name}>\n            {name}\n          </Txt>\n          <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"block truncate\">\n            {typeLabel}\n          </Txt>\n        </span>\n      </span>\n    </>\n  );\n\n  if (onClick) {\n    return (\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        className={className}\n        onClick={onClick}\n        aria-label={`Preview ${name}`}\n        title={name}\n      >\n        {content}\n      </button>\n    );\n  }\n  if (href) {\n    return (\n      <a\n        className={className}\n        href={href}\n        target=\"_blank\"\n        rel=\"noreferrer noopener\"\n        aria-label={`Open ${name}`}\n        title={name}\n      >\n        {content}\n      </a>\n    );\n  }\n  return (\n    <div className={className} title={name}>\n      {content}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAGO,SAAS,iBAAA,CAAkB,EAAE,QAAA,EAAS,EAA4B;AACvE,EAAA,uBACE,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mDAAA,EACb,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBAGD,IAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,WAAU,sDAAA,EACjC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,8HAAA,EAA+H,CAAA;AAAA,sBAC/I,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,+HAAA,EAAgI,CAAA;AAAA,sBAChJ,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,+HAAA,EAAgI,CAAA;AAAA,sBAChJ,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,+HAAA,EAAgI,CAAA;AAAA,sBAChJ,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,yGAAA,EAA0G;AAAA,KAAA,EAC5H;AAAA,GAAA,EACF,CAAA;AAEJ;;ACDO,SAAS,cAAA,CAAe,EAAE,IAAA,EAAM,SAAA,EAAW,MAAM,OAAA,EAAS,OAAA,EAAS,IAAA,EAAM,SAAA,EAAU,EAAwB;AAChH,EAAA,MAAM,SAAA,GAAY,EAAA;AAAA,IAChB,mBAAA;AAAA,IACA,0EAAA;AAAA,IACA,OAAA,IACE,wIAAA;AAAA,IAAA,CACD,WAAW,IAAA,KACV;AAAA,GACJ;AACA,EAAA,MAAM,0BACJ,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,OAAA,oBAAW,GAAA,CAAC,qBAAmB,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,yBACvC,MAAA,EAAA,EAAK,SAAA,EAAW,GAAG,+CAAA,EAAiD,OAAA,IAAW,6BAA6B,CAAA,EAC1G,QAAA,EAAA;AAAA,MAAA,CAAC,2BACA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,wEAAA,EAAyE,aAAA,EAAY,QAClG,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,sBAEF,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gBAAA,EACd,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,GAAA,EAAA,EAAI,IAAG,MAAA,EAAO,OAAA,EAAQ,WAAU,SAAA,EAAU,gBAAA,EAAiB,KAAA,EAAO,IAAA,EAChE,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,wBACA,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,QAAO,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,gBAAA,EAClD,QAAA,EAAA,SAAA,EACH;AAAA,OAAA,EACF;AAAA,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAGF,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,SAAA;AAAA,QACL,IAAA,EAAK,QAAA;AAAA,QACL,SAAA;AAAA,QACA,OAAA;AAAA,QACA,YAAA,EAAY,WAAW,IAAI,CAAA,CAAA;AAAA,QAC3B,KAAA,EAAO,IAAA;AAAA,QAEN,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACA,EAAA,IAAI,IAAA,EAAM;AACR,IAAA,uBACE,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,SAAA;AAAA,QACA,IAAA;AAAA,QACA,MAAA,EAAO,QAAA;AAAA,QACP,GAAA,EAAI,qBAAA;AAAA,QACJ,YAAA,EAAY,QAAQ,IAAI,CAAA,CAAA;AAAA,QACxB,KAAA,EAAO,IAAA;AAAA,QAEN,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACA,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAsB,KAAA,EAAO,MAC/B,QAAA,EAAA,OAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/{code-block-CXZNO_qi.js → code-block-BMmilLti.js}

@@ -31,7 +31,7 @@ function CodeBlock({
     "figure",
     {
       className: cn(
-        "group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border-strong/40 bg-background [contain:inline-size]",
+        "group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border bg-background [contain:inline-size]",
         className
       ),
       children: [
@@ -40,18 +40,18 @@ function CodeBlock({
           /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(TabList, { children: options.map((opt) => /* @__PURE__ */ jsx(Tab, { value: opt.value, children: opt.label }, opt.value)) }) }),
           actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center border-b border-border pr-2 pl-3", children: actions })
         ] }) }),
-        useSelect && options && /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-border-strong/40 px-2 py-1.5", children: [
+        useSelect && options && /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-border px-2 py-1.5", children: [
           /* @__PURE__ */ jsxs(Select, { value: activeValue, onValueChange, children: [
             /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", variant: "ghost", className: "w-auto", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
             /* @__PURE__ */ jsx(SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
           ] }),
           actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: actions })
         ] }),
-        !hasOptions && fileName && /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-border-strong/40 px-4 py-2", children: [
+        !hasOptions && fileName && /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-border px-4 py-2", children: [
           /* @__PURE__ */ jsx("figcaption", { className: "font-mono text-caption text-muted-foreground", children: fileName }),
           actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: actions })
         ] }),
-        !hasOptions && !fileName && actions && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end border-b border-border-strong/40 px-2 py-1.5", children: actions }),
+        !hasOptions && !fileName && actions && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end border-b border-border px-2 py-1.5", children: actions }),
         /* @__PURE__ */ jsxs("div", { className: "relative", children: [
           /* @__PURE__ */ jsx(
             Code,
@@ -84,4 +84,4 @@ function CodeBlock({
 }
 
 export { CodeBlock as C };
-//# sourceMappingURL=code-block-CXZNO_qi.js.map
+//# sourceMappingURL=code-block-BMmilLti.js.map

package/dist/code-block-BMmilLti.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block-BMmilLti.js","sources":["../src/ds/components/CodeBlock/code-block.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Code } from '../Code/code';\nimport { CopyButton } from '../CopyButton/copy-button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../Select/select';\nimport { TabList } from '../Tabs/tabs-list';\nimport { Tabs } from '../Tabs/tabs-root';\nimport { Tab } from '../Tabs/tabs-tab';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type CodeBlockSelector = 'select' | 'tabs';\n\nexport type CodeBlockOverflow = 'wrap' | 'scroll';\n\nexport interface CodeBlockOption {\n  label: string;\n  value: string;\n}\n\nexport interface CodeBlockProps {\n  code: string;\n  options?: CodeBlockOption[];\n  value?: string;\n  onValueChange?: (value: string) => void;\n  selector?: CodeBlockSelector;\n  fileName?: string;\n  lang?: string;\n  /** `wrap` (default) breaks long lines — best for commands and snippets.\n   *  `scroll` preserves columns behind a horizontal scroll — best for source code. */\n  overflow?: CodeBlockOverflow;\n  copyMessage?: string;\n  copyTooltip?: string;\n  actions?: ReactNode;\n  className?: string;\n}\n\nexport function CodeBlock({\n  code,\n  options,\n  value,\n  onValueChange,\n  selector = 'select',\n  fileName,\n  lang,\n  overflow = 'wrap',\n  copyMessage,\n  copyTooltip,\n  actions,\n  className,\n}: CodeBlockProps) {\n  const hasOptions = options && options.length > 0;\n  const useTabs = hasOptions && selector === 'tabs';\n  const useSelect = hasOptions && selector === 'select';\n  const firstOption = options?.[0];\n  const activeValue = value ?? firstOption?.value;\n\n  return (\n    <figure\n      // A scrolling `pre` still reports its longest line as an intrinsic width, which\n      // grows every ancestor; containment keeps the block inside the width it is given.\n      className={cn(\n        'group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border bg-background [contain:inline-size]',\n        className,\n      )}\n    >\n      {useTabs && firstOption && (\n        <Tabs defaultTab={firstOption.value} value={activeValue} onValueChange={onValueChange ?? (() => {})}>\n          <div className=\"flex items-stretch\">\n            <div className=\"min-w-0 flex-1\">\n              <TabList>\n                {options.map(opt => (\n                  <Tab key={opt.value} value={opt.value}>\n                    {opt.label}\n                  </Tab>\n                ))}\n              </TabList>\n            </div>\n            {actions && <div className=\"flex shrink-0 items-center border-b border-border pr-2 pl-3\">{actions}</div>}\n          </div>\n        </Tabs>\n      )}\n\n      {useSelect && options && (\n        <div className=\"flex items-center border-b border-border px-2 py-1.5\">\n          <Select value={activeValue} onValueChange={onValueChange}>\n            <SelectTrigger size=\"sm\" variant=\"ghost\" className=\"w-auto\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {options.map(opt => (\n                <SelectItem key={opt.value} value={opt.value}>\n                  {opt.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && fileName && (\n        <div className=\"flex items-center border-b border-border px-4 py-2\">\n          <figcaption className=\"font-mono text-caption text-muted-foreground\">{fileName}</figcaption>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && !fileName && actions && (\n        <div className=\"flex items-center justify-end border-b border-border px-2 py-1.5\">{actions}</div>\n      )}\n\n      <div className=\"relative\">\n        <Code\n          code={code}\n          lang={lang}\n          className={cn(\n            'px-4 py-3 font-mono text-caption text-foreground',\n            overflow === 'scroll' ? 'overflow-x-auto whitespace-pre' : 'break-all whitespace-pre-wrap',\n          )}\n        />\n        <CopyButton\n          content={code}\n          copyMessage={copyMessage}\n          tooltip={copyTooltip}\n          size=\"sm\"\n          className={cn(\n            'absolute top-2 right-2 opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 pointer-fine:opacity-0',\n            transitions.opacity,\n          )}\n        />\n      </div>\n    </figure>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/{code-block-z2hVcNq7.cjs → code-block-Ipm4Kqvc.cjs}

@@ -33,7 +33,7 @@ function CodeBlock({
     "figure",
     {
       className: utils_cn.cn(
-        "group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border-strong/40 bg-background [contain:inline-size]",
+        "group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border bg-background [contain:inline-size]",
         className
       ),
       children: [
@@ -42,18 +42,18 @@ function CodeBlock({
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(tabsList.TabList, { children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: opt.value, children: opt.label }, opt.value)) }) }),
           actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center border-b border-border pr-2 pl-3", children: actions })
         ] }) }),
-        useSelect && options && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border-b border-border-strong/40 px-2 py-1.5", children: [
+        useSelect && options && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border-b border-border px-2 py-1.5", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(select.Select, { value: activeValue, onValueChange, children: [
             /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { size: "sm", variant: "ghost", className: "w-auto", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, {}) }),
             /* @__PURE__ */ jsxRuntime.jsx(select.SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
           ] }),
           actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: actions })
         ] }),
-        !hasOptions && fileName && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border-b border-border-strong/40 px-4 py-2", children: [
+        !hasOptions && fileName && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border-b border-border px-4 py-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx("figcaption", { className: "font-mono text-caption text-muted-foreground", children: fileName }),
           actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: actions })
         ] }),
-        !hasOptions && !fileName && actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end border-b border-border-strong/40 px-2 py-1.5", children: actions }),
+        !hasOptions && !fileName && actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end border-b border-border px-2 py-1.5", children: actions }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             code.Code,
@@ -86,4 +86,4 @@ function CodeBlock({
 }
 
 exports.CodeBlock = CodeBlock;
-//# sourceMappingURL=code-block-z2hVcNq7.cjs.map
+//# sourceMappingURL=code-block-Ipm4Kqvc.cjs.map

package/dist/code-block-Ipm4Kqvc.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block-Ipm4Kqvc.cjs","sources":["../src/ds/components/CodeBlock/code-block.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Code } from '../Code/code';\nimport { CopyButton } from '../CopyButton/copy-button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../Select/select';\nimport { TabList } from '../Tabs/tabs-list';\nimport { Tabs } from '../Tabs/tabs-root';\nimport { Tab } from '../Tabs/tabs-tab';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type CodeBlockSelector = 'select' | 'tabs';\n\nexport type CodeBlockOverflow = 'wrap' | 'scroll';\n\nexport interface CodeBlockOption {\n  label: string;\n  value: string;\n}\n\nexport interface CodeBlockProps {\n  code: string;\n  options?: CodeBlockOption[];\n  value?: string;\n  onValueChange?: (value: string) => void;\n  selector?: CodeBlockSelector;\n  fileName?: string;\n  lang?: string;\n  /** `wrap` (default) breaks long lines — best for commands and snippets.\n   *  `scroll` preserves columns behind a horizontal scroll — best for source code. */\n  overflow?: CodeBlockOverflow;\n  copyMessage?: string;\n  copyTooltip?: string;\n  actions?: ReactNode;\n  className?: string;\n}\n\nexport function CodeBlock({\n  code,\n  options,\n  value,\n  onValueChange,\n  selector = 'select',\n  fileName,\n  lang,\n  overflow = 'wrap',\n  copyMessage,\n  copyTooltip,\n  actions,\n  className,\n}: CodeBlockProps) {\n  const hasOptions = options && options.length > 0;\n  const useTabs = hasOptions && selector === 'tabs';\n  const useSelect = hasOptions && selector === 'select';\n  const firstOption = options?.[0];\n  const activeValue = value ?? firstOption?.value;\n\n  return (\n    <figure\n      // A scrolling `pre` still reports its longest line as an intrinsic width, which\n      // grows every ancestor; containment keeps the block inside the width it is given.\n      className={cn(\n        'group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border bg-background [contain:inline-size]',\n        className,\n      )}\n    >\n      {useTabs && firstOption && (\n        <Tabs defaultTab={firstOption.value} value={activeValue} onValueChange={onValueChange ?? (() => {})}>\n          <div className=\"flex items-stretch\">\n            <div className=\"min-w-0 flex-1\">\n              <TabList>\n                {options.map(opt => (\n                  <Tab key={opt.value} value={opt.value}>\n                    {opt.label}\n                  </Tab>\n                ))}\n              </TabList>\n            </div>\n            {actions && <div className=\"flex shrink-0 items-center border-b border-border pr-2 pl-3\">{actions}</div>}\n          </div>\n        </Tabs>\n      )}\n\n      {useSelect && options && (\n        <div className=\"flex items-center border-b border-border px-2 py-1.5\">\n          <Select value={activeValue} onValueChange={onValueChange}>\n            <SelectTrigger size=\"sm\" variant=\"ghost\" className=\"w-auto\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {options.map(opt => (\n                <SelectItem key={opt.value} value={opt.value}>\n                  {opt.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && fileName && (\n        <div className=\"flex items-center border-b border-border px-4 py-2\">\n          <figcaption className=\"font-mono text-caption text-muted-foreground\">{fileName}</figcaption>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && !fileName && actions && (\n        <div className=\"flex items-center justify-end border-b border-border px-2 py-1.5\">{actions}</div>\n      )}\n\n      <div className=\"relative\">\n        <Code\n          code={code}\n          lang={lang}\n          className={cn(\n            'px-4 py-3 font-mono text-caption text-foreground',\n            overflow === 'scroll' ? 'overflow-x-auto whitespace-pre' : 'break-all whitespace-pre-wrap',\n          )}\n        />\n        <CopyButton\n          content={code}\n          copyMessage={copyMessage}\n          tooltip={copyTooltip}\n          size=\"sm\"\n          className={cn(\n            'absolute top-2 right-2 opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 pointer-fine:opacity-0',\n            transitions.opacity,\n          )}\n        />\n      </div>\n    </figure>\n  );\n}\n"],"names":["code","jsxs","cn","jsx","Tabs","TabList","Tab","Select","SelectTrigger","SelectValue","SelectContent","SelectItem","Code","CopyButton","transitions"],"mappings":"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"}

package/dist/{combobox-DPpiBLWV.cjs → combobox-BaVFPQ6X.cjs}

@@ -8,7 +8,7 @@ const comboboxStyles = require('./combobox-styles-zdW4cHSq.cjs');
 const Button = require('./Button-CXhSUBxN.cjs');
 const fieldControlAria = require('./field-control-aria-WzMGs0A4.cjs');
 const fieldErrorId = require('./field-error-id-4xiCVBJ_.cjs');
-const scrollArea = require('./scroll-area-CEuf7Omb.cjs');
+const scrollArea = require('./scroll-area-gN-e805H.cjs');
 const primitives_floating = require('./primitives/floating.cjs.js');
 const primitives_fluidMenu = require('./primitives/fluid-menu.cjs.js');
 const primitives_formElement = require('./primitives/form-element.cjs.js');
@@ -211,4 +211,4 @@ function Combobox(props) {
 }
 
 exports.Combobox = Combobox;
-//# sourceMappingURL=combobox-DPpiBLWV.cjs.map
+//# sourceMappingURL=combobox-BaVFPQ6X.cjs.map