@uisatin/ui 0.2.0 → 0.4.0

package/{chunk-HL42K2NH.js → chunk-Q7KVC5B4.js}

@@ -1,19 +1,21 @@
-import { DropdownMenu, DropdownMenuItem } from './chunk-3DINAQLL.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { DropdownMenu, DropdownMenuItem } from './chunk-P36KBUYD.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { MoreHoriz, NavArrowRight } from 'iconoir-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var itemClass = cn(
-  "inline-flex h-6 items-center gap-2 rounded-md px-1 text-sm leading-5 whitespace-nowrap text-text-muted",
-  "[&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:[stroke-width:1.875]",
-  "transition-colors duration-(--duration-fast) ease-(--ease-out) outline-none focus-visible:shadow-border-focus"
+  "sa:inline-flex sa:h-6 sa:items-center sa:gap-2 sa:rounded-md sa:px-1 sa:text-sm sa:leading-5 sa:whitespace-nowrap sa:text-text-muted",
+  "sa:[&_svg]:size-3.5 sa:[&_svg]:shrink-0 sa:[&_svg]:[stroke-width:1.875]",
+  "sa:transition-colors sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out) sa:outline-none sa:focus-visible:shadow-border-focus"
 );
-var linkClass = "cursor-pointer hover:text-text-default";
+var linkClass = "sa:cursor-pointer sa:hover:text-text-default";
 function Separator() {
-  return /* @__PURE__ */ jsx("li", { role: "presentation", "aria-hidden": true, className: "flex text-text-subtle [&_svg]:size-3.5 [&_svg]:[stroke-width:1.875]", children: /* @__PURE__ */ jsx(NavArrowRight, {}) });
+  return /* @__PURE__ */ jsx("li", { role: "presentation", "aria-hidden": true, className: "sa:flex sa:text-text-subtle sa:[&_svg]:size-3.5 sa:[&_svg]:[stroke-width:1.875]", children: /* @__PURE__ */ jsx(NavArrowRight, {}) });
 }
 function Breadcrumb({ items, maxItems, className, "aria-label": ariaLabel = "Breadcrumb", ...props }) {
+  const labels = useSatinLabels();
   const fold = maxItems != null && maxItems >= 2 && items.length > maxItems;
   const head = fold ? items.slice(0, 1) : items;
   const hidden = fold ? items.slice(1, items.length - (maxItems - 1)) : [];
@@ -22,30 +24,30 @@ function Breadcrumb({ items, maxItems, className, "aria-label": ariaLabel = "Bre
   const crumb = (item, index) => {
     const current = index === last;
     const content = item.icon ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "grid size-3.5 shrink-0 place-items-center", children: item.icon }),
-      /* @__PURE__ */ jsx("span", { className: item.hideLabel ? "sr-only" : void 0, children: item.label })
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "sa:grid sa:size-3.5 sa:shrink-0 sa:place-items-center", children: item.icon }),
+      /* @__PURE__ */ jsx("span", { className: item.hideLabel ? "sa:sr-only" : void 0, children: item.label })
     ] }) : item.label;
-    const el = current ? /* @__PURE__ */ jsx("span", { "aria-current": "page", className: cn(itemClass, "font-medium text-text-default"), children: content }) : item.href ? /* @__PURE__ */ jsx("a", { href: item.href, onClick: item.onSelect, className: cn(itemClass, linkClass), children: content }) : item.onSelect ? /* @__PURE__ */ jsx("button", { type: "button", onClick: item.onSelect, className: cn(itemClass, linkClass), children: content }) : /* @__PURE__ */ jsx("span", { className: itemClass, children: content });
-    return /* @__PURE__ */ jsx("li", { className: "flex", children: el });
+    const el = current ? /* @__PURE__ */ jsx("span", { "aria-current": "page", className: cn(itemClass, "sa:font-medium sa:text-text-default"), children: content }) : item.href ? /* @__PURE__ */ jsx("a", { href: item.href, onClick: item.onSelect, className: cn(itemClass, linkClass), children: content }) : item.onSelect ? /* @__PURE__ */ jsx("button", { type: "button", onClick: item.onSelect, className: cn(itemClass, linkClass), children: content }) : /* @__PURE__ */ jsx("span", { className: itemClass, children: content });
+    return /* @__PURE__ */ jsx("li", { className: "sa:flex", children: el });
   };
-  return /* @__PURE__ */ jsx("nav", { "data-slot": "breadcrumb", "aria-label": ariaLabel, className, ...props, children: /* @__PURE__ */ jsxs("ol", { className: "flex flex-wrap items-center gap-1", children: [
+  return /* @__PURE__ */ jsx("nav", { "data-slot": "breadcrumb", "aria-label": ariaLabel, className, ...props, children: /* @__PURE__ */ jsxs("ol", { className: "sa:flex sa:flex-wrap sa:items-center sa:gap-1", children: [
     head.map((item, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
       i > 0 && /* @__PURE__ */ jsx(Separator, {}),
       crumb(item, i)
     ] }, `h${i}`)),
     fold && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Separator, {}),
-      /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("li", { className: "sa:flex", children: /* @__PURE__ */ jsx(
         DropdownMenu,
         {
-          "aria-label": "Hidden pages",
+          "aria-label": labels.hiddenPages,
           align: "start",
           trigger: /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               "aria-label": `Show ${hidden.length} more`,
-              className: cn(itemClass, linkClass, "w-6 justify-center px-0 hover:bg-bg-hover [&_svg]:size-4"),
+              className: cn(itemClass, linkClass, "sa:w-6 sa:justify-center sa:px-0 sa:hover:bg-bg-hover sa:[&_svg]:size-4"),
               children: /* @__PURE__ */ jsx(MoreHoriz, { "aria-hidden": true })
             }
           ),
@@ -72,5 +74,3 @@ function Breadcrumb({ items, maxItems, className, "aria-label": ariaLabel = "Bre
 }
 
 export { Breadcrumb };
-//# sourceMappingURL=chunk-HL42K2NH.js.map
-//# sourceMappingURL=chunk-HL42K2NH.js.map

package/{chunk-H4NU7NPO.js → chunk-R3DTMBDT.js}

@@ -1,5 +1,6 @@
-import { Button } from './chunk-HNQUX43Z.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { Button } from './chunk-6DWLTGRQ.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import 'react';
 import { HoverCard } from 'radix-ui';
 import { Xmark, ArrowUpRight, NavArrowUp, NavArrowDown } from 'iconoir-react';
@@ -25,23 +26,23 @@ function Attachment({
     {
       "data-slot": "attachment",
       className: cn(
-        "group/attachment relative inline-flex max-w-full shrink-0 items-center border border-border-default bg-bg-popover",
-        "[box-shadow:0_1px_1px_0_var(--effect-shadow-xs)]",
-        "transition-[background-color,border-color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
-        lg ? "gap-2.5 px-2" : "h-control-height gap-1.5 pl-2",
-        !lg && (onRemove ? "pr-0.5" : "pr-2.5"),
-        lg && (rounded ? "rounded-pill py-1" : "rounded-xl py-1.5"),
-        !lg && (rounded ? "rounded-pill" : "rounded-md"),
+        "sa:group/attachment sa:relative sa:inline-flex sa:max-w-full sa:shrink-0 sa:items-center sa:border sa:border-border-default sa:bg-bg-popover",
+        "sa:[box-shadow:0_1px_1px_0_var(--effect-shadow-xs)]",
+        "sa:transition-[background-color,border-color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+        lg ? "sa:gap-2.5 sa:px-2" : "sa:h-control-height sa:gap-1.5 sa:pl-2",
+        !lg && (onRemove ? "sa:pr-0.5" : "sa:pr-2.5"),
+        lg && (rounded ? "sa:rounded-pill sa:py-1" : "sa:rounded-xl sa:py-1.5"),
+        !lg && (rounded ? "sa:rounded-pill" : "sa:rounded-md"),
         // Hover (satin-pressed, declared later, wins while pressed)
-        "satin-hover:border-border-strong",
-        !lg && "satin-hover:bg-bg-canvas",
+        "sa:satin-hover:border-border-strong",
+        !lg && "sa:satin-hover:bg-bg-canvas",
         // Pressed
-        "satin-pressed:border-border-strong satin-pressed:bg-bg-muted",
+        "sa:satin-pressed:border-border-strong sa:satin-pressed:bg-bg-muted",
         // Focus
-        "has-[[data-attachment-main]:focus-visible]:border-border-default has-[[data-attachment-main]:focus-visible]:bg-bg-popover",
-        "has-[[data-attachment-main]:focus-visible]:[box-shadow:0_1px_2px_0_var(--effect-shadow-xs),0_0_0_2px_var(--action-focus-ring)]",
-        "data-[force=focus]:border-border-default data-[force=focus]:bg-bg-popover",
-        "data-[force=focus]:[box-shadow:0_1px_2px_0_var(--effect-shadow-xs),0_0_0_2px_var(--action-focus-ring)]",
+        "sa:has-[[data-attachment-main]:focus-visible]:border-border-default sa:has-[[data-attachment-main]:focus-visible]:bg-bg-popover",
+        "sa:has-[[data-attachment-main]:focus-visible]:[box-shadow:0_1px_2px_0_var(--effect-shadow-xs),0_0_0_2px_var(--action-focus-ring)]",
+        "sa:data-[force=focus]:border-border-default sa:data-[force=focus]:bg-bg-popover",
+        "sa:data-[force=focus]:[box-shadow:0_1px_2px_0_var(--effect-shadow-xs),0_0_0_2px_var(--action-focus-ring)]",
         className
       ),
       ...props,
@@ -53,32 +54,32 @@ function Attachment({
             "data-attachment-main": "",
             onClick: onOpen,
             className: cn(
-              "flex min-w-0 items-center text-left outline-none",
+              "sa:flex sa:min-w-0 sa:items-center sa:text-left sa:outline-none",
               // The whole chip is the click target; the remove button sits above it.
-              "after:absolute after:inset-0 after:rounded-[inherit]",
-              lg ? "gap-2.5" : "gap-1.5"
+              "sa:after:absolute sa:after:inset-0 sa:after:rounded-[inherit]",
+              lg ? "sa:gap-2.5" : "sa:gap-1.5"
             ),
             children: lg ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(
                 "span",
                 {
                   className: cn(
-                    "flex size-8 shrink-0 items-center justify-center bg-bg-muted [&_svg]:size-icon-size",
-                    rounded ? "rounded-xl" : "rounded-md",
-                    "group-active/attachment:bg-bg-card group-data-[force=pressed]/attachment:bg-bg-card"
+                    "sa:flex sa:size-8 sa:shrink-0 sa:items-center sa:justify-center sa:bg-bg-muted sa:[&_svg]:size-icon-size",
+                    rounded ? "sa:rounded-xl" : "sa:rounded-md",
+                    "sa:group-active/attachment:bg-bg-card sa:group-data-[force=pressed]/attachment:bg-bg-card"
                   ),
                   children: fileIcon
                 }
               ),
-              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
-                /* @__PURE__ */ jsx("span", { "data-attachment-name": "", className: "max-w-[200px] truncate text-sm font-medium text-text-default", children: name }),
-                meta && /* @__PURE__ */ jsx("span", { className: "sr-only", children: ", " }),
-                meta && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-text-muted", children: meta })
+              /* @__PURE__ */ jsxs("span", { className: "sa:flex sa:min-w-0 sa:flex-col", children: [
+                /* @__PURE__ */ jsx("span", { "data-attachment-name": "", className: "sa:max-w-[200px] sa:truncate sa:text-sm sa:font-medium sa:text-text-default", children: name }),
+                meta && /* @__PURE__ */ jsx("span", { className: "sa:sr-only", children: ", " }),
+                meta && /* @__PURE__ */ jsx("span", { className: "sa:truncate sa:text-xs sa:text-text-muted", children: meta })
               ] })
             ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("span", { className: "flex shrink-0 [&_svg]:size-icon-size", children: fileIcon }),
-              /* @__PURE__ */ jsx("span", { "data-attachment-name": "", className: "max-w-[200px] truncate text-sm font-medium text-text-default", children: name }),
-              meta && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+              /* @__PURE__ */ jsx("span", { className: "sa:flex sa:shrink-0 sa:[&_svg]:size-icon-size", children: fileIcon }),
+              /* @__PURE__ */ jsx("span", { "data-attachment-name": "", className: "sa:max-w-[200px] sa:truncate sa:text-sm sa:font-medium sa:text-text-default", children: name }),
+              meta && /* @__PURE__ */ jsxs("span", { className: "sa:sr-only", children: [
                 ", ",
                 meta
               ] })
@@ -94,7 +95,7 @@ function Attachment({
             iconOnly: true,
             "aria-label": `Remove ${name}`,
             onClick: onRemove,
-            className: "relative z-10",
+            className: "sa:relative sa:z-10",
             children: /* @__PURE__ */ jsx(Xmark, { "aria-hidden": true })
           }
         )
@@ -110,7 +111,7 @@ function Attachment({
         side: "top",
         align: "start",
         sideOffset: 8,
-        className: "z-50 outline-none data-[state=open]:[animation:satin-enter_var(--duration-fast)_var(--ease-out)]",
+        className: "sa:z-50 sa:outline-none sa:data-[state=open]:[animation:satin-enter_var(--sa-duration-fast)_var(--sa-ease-out)]",
         children: preview
       }
     ) })
@@ -121,7 +122,7 @@ function AttachmentGroup({ className, ...props }) {
     "div",
     {
       "data-slot": "attachment-group",
-      className: cn("flex max-w-[576px] flex-wrap items-start gap-1 [&>*]:shrink-0", className),
+      className: cn("sa:flex sa:max-w-[576px] sa:flex-wrap sa:items-start sa:gap-1 sa:[&>*]:shrink-0", className),
       ...props
     }
   );
@@ -141,41 +142,41 @@ function AttachmentPreview({
     {
       "data-slot": "attachment-preview",
       className: cn(
-        "flex w-[296px] flex-col overflow-clip rounded-xl border border-border-default bg-bg-popover",
-        "[box-shadow:0_4px_6px_-1px_var(--effect-shadow-sm),0_2px_4px_-2px_var(--effect-shadow-sm)]",
+        "sa:flex sa:w-[296px] sa:flex-col sa:overflow-clip sa:rounded-xl sa:border sa:border-border-default sa:bg-bg-popover",
+        "sa:[box-shadow:0_4px_6px_-1px_var(--effect-shadow-sm),0_2px_4px_-2px_var(--effect-shadow-sm)]",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 [&_svg]:size-icon-size", children: [
-          /* @__PURE__ */ jsx("span", { className: "flex shrink-0", children: icon ?? /* @__PURE__ */ jsx(FileIcon, { type: "pdf" }) }),
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-text-default", children: name })
+        /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-center sa:gap-2 sa:px-3 sa:py-2 sa:[&_svg]:size-icon-size", children: [
+          /* @__PURE__ */ jsx("span", { className: "sa:flex sa:shrink-0", children: icon ?? /* @__PURE__ */ jsx(FileIcon, { type: "pdf" }) }),
+          /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate sa:text-sm sa:font-medium sa:text-text-default", children: name })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs("div", { className: "sa:relative", children: [
           /* @__PURE__ */ jsx(
             "div",
             {
               tabIndex: 0,
               "aria-label": `Preview of ${name}`,
               className: cn(
-                "h-[176px] overflow-x-clip overflow-y-auto pr-4 pl-3 outline-none",
-                "[scrollbar-color:var(--border-strong)_transparent] [scrollbar-width:thin]",
-                "focus-visible:[box-shadow:inset_0_0_0_2px_var(--action-focus-ring)]"
+                "sa:h-[176px] sa:overflow-x-clip sa:overflow-y-auto sa:pr-4 sa:pl-3 sa:outline-none",
+                "sa:[scrollbar-color:var(--border-strong)_transparent] sa:[scrollbar-width:thin]",
+                "sa:focus-visible:[box-shadow:inset_0_0_0_2px_var(--action-focus-ring)]"
               ),
-              children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 pt-2 pb-3", children })
+              children: /* @__PURE__ */ jsx("div", { className: "sa:flex sa:flex-col sa:gap-2 sa:pt-2 sa:pb-3", children })
             }
           ),
           /* @__PURE__ */ jsx(
             "div",
             {
               "aria-hidden": true,
-              className: "pointer-events-none absolute right-2.5 bottom-0 left-0 h-8 bg-linear-to-b from-transparent to-bg-popover"
+              className: "sa:pointer-events-none sa:absolute sa:right-2.5 sa:bottom-0 sa:left-0 sa:h-8 sa:bg-linear-to-b sa:from-transparent sa:to-bg-popover"
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "h-px bg-border-subtle" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2 py-1.5", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-1", children: navigation }),
+        /* @__PURE__ */ jsx("div", { className: "sa:h-px sa:bg-border-subtle" }),
+        /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-center sa:gap-2 sa:px-2 sa:py-1.5", children: [
+          /* @__PURE__ */ jsx("div", { className: "sa:flex sa:min-w-0 sa:flex-1 sa:items-center sa:gap-1", children: navigation }),
           /* @__PURE__ */ jsxs(Button, { variant: "tertiary", size: "xs", onClick: onOpen, children: [
             openLabel,
             /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": true })
@@ -191,10 +192,11 @@ function AttachmentPreviewPager({
   onPrevious,
   onNext
 }) {
+  const labels = useSatinLabels();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", shape: "rounded", iconOnly: true, "aria-label": "Previous section", disabled: page <= 1, onClick: onPrevious, children: /* @__PURE__ */ jsx(NavArrowUp, { "aria-hidden": true }) }),
-    /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", shape: "rounded", iconOnly: true, "aria-label": "Next section", disabled: page >= total, onClick: onNext, children: /* @__PURE__ */ jsx(NavArrowDown, { "aria-hidden": true }) }),
-    /* @__PURE__ */ jsxs("span", { className: "text-xs whitespace-nowrap text-text-muted", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", shape: "rounded", iconOnly: true, "aria-label": labels.previousSection, disabled: page <= 1, onClick: onPrevious, children: /* @__PURE__ */ jsx(NavArrowUp, { "aria-hidden": true }) }),
+    /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", shape: "rounded", iconOnly: true, "aria-label": labels.nextSection, disabled: page >= total, onClick: onNext, children: /* @__PURE__ */ jsx(NavArrowDown, { "aria-hidden": true }) }),
+    /* @__PURE__ */ jsxs("span", { className: "sa:text-xs sa:whitespace-nowrap sa:text-text-muted", "aria-live": "polite", children: [
       "Page ",
       page,
       " of ",
@@ -207,7 +209,8 @@ function AttachmentPreviewSheets({
   value,
   onValueChange
 }) {
-  return /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": "Sheets", className: "flex items-center gap-1", children: sheets.map((sheet) => {
+  const labels = useSatinLabels();
+  return /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": labels.sheets, className: "sa:flex sa:items-center sa:gap-1", children: sheets.map((sheet) => {
     const selected = sheet === value;
     return /* @__PURE__ */ jsx(
       "button",
@@ -217,10 +220,10 @@ function AttachmentPreviewSheets({
         "aria-selected": selected,
         onClick: () => onValueChange?.(sheet),
         className: cn(
-          "rounded-sm px-2 py-0.5 text-xs whitespace-nowrap outline-none",
-          "transition-[background-color,color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
-          "focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
-          selected ? "bg-bg-muted text-text-default" : "text-text-muted hover:text-text-default"
+          "sa:rounded-sm sa:px-2 sa:py-0.5 sa:text-xs sa:whitespace-nowrap sa:outline-none",
+          "sa:transition-[background-color,color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+          "sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          selected ? "sa:bg-bg-muted sa:text-text-default" : "sa:text-text-muted sa:hover:text-text-default"
         ),
         children: sheet
       },
@@ -229,9 +232,9 @@ function AttachmentPreviewSheets({
   }) });
 }
 function FileIcon({ type, className }) {
-  const page = type === "pdf" ? "var(--color-red-500)" : "var(--color-green-700)";
-  const fold = type === "pdf" ? "var(--color-red-300)" : "var(--color-green-300)";
-  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, className: cn("size-icon-size shrink-0", className), children: [
+  const page = type === "pdf" ? "var(--sa-color-red-500)" : "var(--sa-color-green-700)";
+  const fold = type === "pdf" ? "var(--sa-color-red-300)" : "var(--sa-color-green-300)";
+  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, className: cn("sa:size-icon-size sa:shrink-0", className), children: [
     /* @__PURE__ */ jsx(
       "path",
       {
@@ -246,11 +249,11 @@ function FileIcon({ type, className }) {
         fill: fold
       }
     ),
-    type === "pdf" ? /* @__PURE__ */ jsxs("g", { fill: "var(--color-white)", children: [
+    type === "pdf" ? /* @__PURE__ */ jsxs("g", { fill: "var(--sa-color-white)", children: [
       /* @__PURE__ */ jsx("path", { d: "M4.62457 12.9938V10.3491H5.66796C5.86855 10.3491 6.03943 10.3874 6.18062 10.4641C6.3218 10.5398 6.42941 10.6453 6.50345 10.7804C6.57835 10.9147 6.61579 11.0697 6.61579 11.2453C6.61579 11.4209 6.57792 11.5759 6.50216 11.7102C6.4264 11.8445 6.31664 11.9491 6.17287 12.024C6.02996 12.0989 5.85693 12.1363 5.65376 12.1363H4.98873V11.6882H5.56337C5.67098 11.6882 5.75965 11.6697 5.82938 11.6327C5.89997 11.5948 5.95248 11.5428 5.98692 11.4765C6.02222 11.4093 6.03986 11.3323 6.03986 11.2453C6.03986 11.1575 6.02222 11.0809 5.98692 11.0155C5.95248 10.9492 5.89997 10.898 5.82938 10.8618C5.75879 10.8248 5.66925 10.8063 5.56078 10.8063H5.18372V12.9938H4.62457Z" }),
       /* @__PURE__ */ jsx("path", { d: "M7.91648 12.9938H6.97898V10.3491H7.92423C8.19024 10.3491 8.41923 10.4021 8.61121 10.508C8.80319 10.613 8.95083 10.7641 9.05413 10.9612C9.1583 11.1584 9.21038 11.3943 9.21038 11.6689C9.21038 11.9444 9.1583 12.1811 9.05413 12.3791C8.95083 12.5771 8.80233 12.729 8.60863 12.8349C8.41579 12.9408 8.18507 12.9938 7.91648 12.9938ZM7.53812 12.5147H7.89323C8.05852 12.5147 8.19756 12.4854 8.31033 12.4269C8.42397 12.3675 8.5092 12.2758 8.56601 12.1518C8.62369 12.027 8.65253 11.866 8.65253 11.6689C8.65253 11.4735 8.62369 11.3138 8.56601 11.1898C8.5092 11.0658 8.4244 10.9746 8.31162 10.916C8.19885 10.8575 8.05981 10.8282 7.89453 10.8282H7.53812V12.5147Z" }),
       /* @__PURE__ */ jsx("path", { d: "M9.62457 12.9938V10.3491H11.3756V10.8101H10.1837V11.4403H11.2594V11.9013H10.1837V12.9938H9.62457Z" })
-    ] }) : /* @__PURE__ */ jsxs("g", { fill: "var(--color-white)", children: [
+    ] }) : /* @__PURE__ */ jsxs("g", { fill: "var(--sa-color-white)", children: [
       /* @__PURE__ */ jsx("path", { d: "M4.54258 10.5469L4.99589 11.3131H5.01346L5.46897 10.5469H6.00571L5.31969 11.6709L6.02107 12.7949H5.47446L5.01346 12.0276H4.99589L4.53489 12.7949H3.99047L4.69405 11.6709L4.00364 10.5469H4.54258Z" }),
       /* @__PURE__ */ jsx("path", { d: "M6.30646 12.7949V10.5469H6.78173V12.403H7.74544V12.7949H6.30646Z" }),
       /* @__PURE__ */ jsx("path", { d: "M9.27965 11.1934C9.27086 11.1049 9.23318 11.0361 9.16659 10.9871C9.1 10.9381 9.00963 10.9135 8.89548 10.9135C8.81791 10.9135 8.75242 10.9245 8.699 10.9465C8.64559 10.9677 8.60461 10.9973 8.57607 11.0354C8.54826 11.0734 8.53436 11.1166 8.53436 11.1649C8.5329 11.2051 8.54131 11.2403 8.5596 11.2703C8.57863 11.3003 8.60461 11.3263 8.63754 11.3482C8.67046 11.3694 8.70852 11.3881 8.75169 11.4042C8.79486 11.4196 8.84096 11.4327 8.88999 11.4437L9.09195 11.492C9.19001 11.5139 9.28001 11.5432 9.36197 11.5798C9.44392 11.6164 9.5149 11.6614 9.57491 11.7148C9.63491 11.7682 9.68138 11.8312 9.71431 11.9036C9.74797 11.976 9.76516 12.0591 9.76589 12.1528C9.76516 12.2903 9.73004 12.4096 9.66052 12.5106C9.59174 12.6108 9.49222 12.6888 9.36197 12.7444C9.23245 12.7993 9.07622 12.8267 8.89328 12.8267C8.71181 12.8267 8.55375 12.7989 8.41911 12.7433C8.2852 12.6877 8.18056 12.6054 8.10519 12.4963C8.03055 12.3866 7.9914 12.2508 7.98774 12.0891H8.44765C8.45277 12.1645 8.47436 12.2274 8.51241 12.2779C8.55119 12.3277 8.60278 12.3653 8.66717 12.3909C8.7323 12.4158 8.80584 12.4283 8.88779 12.4283C8.96829 12.4283 9.03817 12.4166 9.09744 12.3931C9.15744 12.3697 9.20391 12.3372 9.23684 12.2955C9.26977 12.2537 9.28623 12.2058 9.28623 12.1517C9.28623 12.1012 9.27123 12.0587 9.24123 12.0243C9.21196 11.9899 9.16879 11.9607 9.11171 11.9365C9.05536 11.9124 8.98621 11.8904 8.90426 11.8707L8.65949 11.8092C8.46997 11.7631 8.32032 11.691 8.21056 11.593C8.1008 11.4949 8.04628 11.3628 8.04701 11.1967C8.04628 11.0606 8.0825 10.9417 8.15568 10.84C8.22959 10.7383 8.33093 10.6589 8.45972 10.6018C8.58851 10.5447 8.73486 10.5162 8.89877 10.5162C9.06561 10.5162 9.21123 10.5447 9.33562 10.6018C9.46075 10.6589 9.55808 10.7383 9.62759 10.84C9.69711 10.9417 9.73296 11.0595 9.73516 11.1934H9.27965Z" }),
@@ -260,5 +263,3 @@ function FileIcon({ type, className }) {
 }
 
 export { Attachment, AttachmentGroup, AttachmentPreview, AttachmentPreviewPager, AttachmentPreviewSheets, FileIcon };
-//# sourceMappingURL=chunk-H4NU7NPO.js.map
-//# sourceMappingURL=chunk-H4NU7NPO.js.map

package/{chunk-KNUWZNFV.js → chunk-R4KPFBMK.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-H63FYCMY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -228,13 +228,11 @@ function FlappySprite({ size = 16, run = true, className }) {
   );
 }
 function AgentLoading({ label = "Thinking\u2026", time, indicator = "tetris", glimmer = "color", className, ...props }) {
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "agent-loading", role: "status", "aria-live": "polite", className: cn("flex items-center gap-3 p-1", className), ...props, children: [
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "agent-loading", role: "status", "aria-live": "polite", className: cn("sa:flex sa:items-center sa:gap-3 sa:p-1", className), ...props, children: [
     indicator === "flappy" ? /* @__PURE__ */ jsx(FlappySprite, { size: 16 }) : /* @__PURE__ */ jsx(TetrisMark, { glimmer }),
-    indicator === "tetris" ? /* @__PURE__ */ jsx(TetrisLabel, { glimmer, className: "text-sm whitespace-nowrap", children: label }) : /* @__PURE__ */ jsx(ShimmerLabel, { className: "text-sm whitespace-nowrap", children: label }),
-    time != null && /* @__PURE__ */ jsx("span", { className: "text-sm whitespace-nowrap text-text-subtle tabular-nums", children: time })
+    indicator === "tetris" ? /* @__PURE__ */ jsx(TetrisLabel, { glimmer, className: "sa:text-sm sa:whitespace-nowrap", children: label }) : /* @__PURE__ */ jsx(ShimmerLabel, { className: "sa:text-sm sa:whitespace-nowrap", children: label }),
+    time != null && /* @__PURE__ */ jsx("span", { className: "sa:text-sm sa:whitespace-nowrap sa:text-text-subtle sa:tabular-nums", children: time })
   ] });
 }
 
 export { AgentLoading, FlappySprite, ShimmerLabel, TetrisLabel, TetrisMark, TetrisStill };
-//# sourceMappingURL=chunk-KNUWZNFV.js.map
-//# sourceMappingURL=chunk-KNUWZNFV.js.map

package/chunk-R5TQ3HNB.js

@@ -0,0 +1,71 @@
+import { cn } from './chunk-EHEXE2UV.js';
+import 'react';
+import { Toggle as Toggle$1 } from 'radix-ui';
+import { cva } from 'class-variance-authority';
+import { jsxs } from 'react/jsx-runtime';
+
+var toggleVariants = cva(
+  [
+    "sa:inline-flex sa:shrink-0 sa:items-center sa:justify-center sa:gap-2 sa:border sa:font-medium sa:whitespace-nowrap sa:select-none sa:text-text-muted",
+    "sa:transition-[background-color,border-color,color,box-shadow,border-radius] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+    "sa:focus-visible:outline-none sa:disabled:pointer-events-none sa:disabled:text-text-subtle",
+    "sa:satin-hover:text-text-default sa:satin-focus:text-text-default sa:data-[state=on]:text-text-default",
+    // Figma icons are 1.25px at 16; on Iconoir's 24 grid that is 1.875.
+    "sa:[&_svg]:pointer-events-none sa:[&_svg]:size-icon-size sa:[&_svg]:shrink-0 sa:[&_svg]:[stroke-width:1.875]"
+  ],
+  {
+    variants: {
+      variant: {
+        outline: [
+          "sa:rounded-lg sa:border-border-default sa:bg-bg-popover",
+          "sa:satin-hover:border-border-strong sa:satin-hover:bg-bg-muted",
+          "sa:satin-focus:border-action-primary-bg sa:satin-focus:bg-bg-popover sa:satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "sa:data-[state=on]:border-border-strong sa:data-[state=on]:bg-action-secondary-bg-pressed",
+          "sa:data-[state=on]:satin-hover:border-border-strong sa:data-[state=on]:satin-hover:bg-action-secondary-bg-pressed",
+          "sa:data-[state=on]:satin-focus:border-action-primary-bg sa:data-[state=on]:satin-focus:bg-action-secondary-bg-pressed",
+          "sa:disabled:border-border-default sa:disabled:bg-bg-muted",
+          "sa:disabled:data-[state=on]:border-border-default sa:disabled:data-[state=on]:bg-action-secondary-bg-pressed"
+        ],
+        ghost: [
+          "sa:rounded-md sa:border-transparent sa:bg-transparent",
+          "sa:satin-hover:rounded-lg sa:satin-hover:bg-bg-muted",
+          // Figma's ghost focus is the primary border alone (its ring is 0px); pressed + focus has the ring.
+          "sa:satin-focus:rounded-lg sa:satin-focus:border-action-primary-bg sa:satin-focus:[box-shadow:none]",
+          "sa:data-[state=on]:rounded-lg sa:data-[state=on]:bg-action-secondary-bg-pressed",
+          "sa:data-[state=on]:satin-hover:bg-action-secondary-bg-pressed",
+          "sa:data-[state=on]:satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "sa:disabled:rounded-md sa:disabled:data-[state=on]:rounded-md"
+        ]
+      },
+      size: {
+        md: "sa:h-control-height-lg sa:px-2.5 sa:text-base",
+        sm: "sa:h-control-height sa:px-2.5 sa:text-sm sa:leading-[18px]"
+      },
+      iconOnly: {
+        true: "sa:px-0",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      { iconOnly: true, size: "md", className: "sa:w-control-height-lg" },
+      { iconOnly: true, size: "sm", className: "sa:w-control-height" }
+    ],
+    defaultVariants: { variant: "sa:outline", size: "md", iconOnly: false }
+  }
+);
+function Toggle({ className, variant, size, iconOnly, icon, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    Toggle$1.Root,
+    {
+      "data-slot": "toggle",
+      className: cn(toggleVariants({ variant, size, iconOnly }), className),
+      ...props,
+      children: [
+        icon,
+        !iconOnly && children
+      ]
+    }
+  );
+}
+
+export { Toggle, toggleVariants };

package/chunk-RFSPJECL.js

@@ -0,0 +1,84 @@
+import { useFormContext, RequiredMark, FieldDescription, FormContext, FieldError } from './chunk-KITXKIYW.js';
+import { cn } from './chunk-EHEXE2UV.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var columnClass = { 1: "", 2: "sa:sm:grid-cols-2", 3: "sa:sm:grid-cols-3" };
+function FieldGroup({
+  legend,
+  description,
+  error: ownError,
+  name,
+  required,
+  variant = "fields",
+  columns = 1,
+  layout: ownLayout,
+  disabled: ownDisabled,
+  className,
+  children,
+  ...props
+}) {
+  const form = useFormContext();
+  const id = React.useId();
+  const error = ownError ?? (name ? form?.errors?.[name] : void 0);
+  const layout = ownLayout ?? form?.layout ?? "vertical";
+  const disabled = ownDisabled ?? form?.disabled;
+  const invalid = Boolean(error);
+  const horizontal = layout === "horizontal";
+  const choices = variant === "choices";
+  const descriptionId = description ? `${id}-description` : void 0;
+  const errorId = invalid ? `${id}-error` : void 0;
+  const inner = React.useMemo(
+    () => ({ ...form, layout: "vertical", disabled }),
+    [form, disabled]
+  );
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      "data-slot": "field-group",
+      "data-variant": variant,
+      "data-layout": layout,
+      "data-invalid": invalid || void 0,
+      disabled,
+      "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || void 0,
+      className: cn("sa:m-0 sa:min-w-0 sa:border-0 sa:p-0", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "legend",
+          {
+            className: cn(
+              "sa:float-left sa:p-0 sa:text-text-default",
+              horizontal ? "sa:w-40" : "sa:w-full",
+              choices ? "sa:text-sm sa:leading-[18px] sa:font-medium" : "sa:text-base sa:font-medium",
+              disabled && "sa:opacity-50"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "sa:flex sa:items-start sa:gap-0.5", children: [
+                legend,
+                required && /* @__PURE__ */ jsx(RequiredMark, {})
+              ] }),
+              description && /* @__PURE__ */ jsx(FieldDescription, { id: descriptionId, className: "sa:mt-1 sa:font-normal", children: description })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "sa:grid sa:min-w-0",
+              horizontal ? "sa:ml-46" : cn("sa:clear-both", choices ? "sa:pt-2" : "sa:pt-4"),
+              choices ? "sa:gap-3" : cn("sa:gap-5", columnClass[columns])
+            ),
+            children: [
+              /* @__PURE__ */ jsx(FormContext.Provider, { value: inner, children }),
+              invalid && /* @__PURE__ */ jsx(FieldError, { id: errorId, className: cn(columns > 1 && "sa:sm:col-span-full"), children: error })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { FieldGroup };

package/chunk-RPL6FRVX.js

@@ -0,0 +1,88 @@
+import { Button } from './chunk-6DWLTGRQ.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
+import 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var soft = {
+  neutral: "sa:bg-status-neutral-bg",
+  info: "sa:bg-status-sky-bg",
+  success: "sa:bg-status-green-bg",
+  warning: "sa:bg-status-amber-bg",
+  error: "sa:bg-status-red-bg"
+};
+var iconColor = {
+  neutral: "sa:text-status-neutral-fg",
+  info: "sa:text-status-sky-fg",
+  success: "sa:text-status-green-fg",
+  warning: "sa:text-status-amber-fg",
+  error: "sa:text-status-red-fg"
+};
+function Alert({
+  intent = "neutral",
+  variant = "soft",
+  title,
+  description,
+  icon = true,
+  action,
+  onDismiss,
+  className,
+  children,
+  ...props
+}) {
+  const labels = useSatinLabels();
+  const body = description ?? children;
+  const actionBelow = action && body;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: intent === "error" || intent === "warning" ? "alert" : "status",
+      "data-slot": "alert",
+      "data-intent": intent,
+      "data-variant": variant,
+      className: cn(
+        "sa:flex sa:w-full sa:items-start sa:gap-2.5 sa:rounded-xl sa:px-4 sa:py-3",
+        variant === "soft" ? soft[intent] : "sa:border sa:border-border-default sa:bg-bg-card sa:[box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
+        className
+      ),
+      ...props,
+      children: [
+        icon !== false && // 16px on the middle of the title's 20px line.
+        /* @__PURE__ */ jsx("span", { className: cn("sa:mt-0.5 sa:grid sa:shrink-0 sa:place-items-center sa:[&_svg]:size-4", iconColor[intent]), children: icon === true ? /* @__PURE__ */ jsx(StatusIcon, { intent }) : icon }),
+        /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-w-0 sa:flex-1 sa:flex-col", children: [
+          title && /* @__PURE__ */ jsx("p", { className: "sa:text-base sa:leading-5 sa:font-medium sa:text-text-default", children: title }),
+          body && /* @__PURE__ */ jsx("div", { className: "sa:text-body sa:text-text-muted", children: body }),
+          actionBelow && /* @__PURE__ */ jsx("div", { className: "sa:mt-2.5 sa:flex sa:flex-wrap sa:items-center sa:gap-2", children: action })
+        ] }),
+        action && !actionBelow && /* @__PURE__ */ jsx("div", { className: "sa:-my-1 sa:flex sa:shrink-0 sa:items-center sa:gap-2", children: action }),
+        onDismiss && /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", iconOnly: true, "aria-label": labels.dismiss, onClick: onDismiss, className: "sa:-my-0.5 sa:-mr-1.5", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+      ]
+    }
+  );
+}
+function StatusIcon({ intent }) {
+  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, className: "sa:shrink-0", children: /* @__PURE__ */ jsx("g", { stroke: "currentColor", style: { strokeWidth: 1.25 }, strokeLinecap: "round", strokeLinejoin: "round", children: intent === "success" ? /* @__PURE__ */ jsx("path", { d: "M3.33333 8.66667L6 11.3333L12.6667 4.66667" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    intent === "info" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("path", { d: "M8 7.70494V10.6557" }),
+      /* @__PURE__ */ jsx("path", { d: "M8 5.35022L8.0059 5.34366" })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("path", { d: "M8 5.34428V8.29506" }),
+      /* @__PURE__ */ jsx("path", { d: "M8 10.6563L8.0059 10.6498" })
+    ] }),
+    /* @__PURE__ */ jsx("path", { d: "M8 13.9015C11.2593 13.9015 13.9015 11.2593 13.9015 8C13.9015 4.74066 11.2593 2.09845 8 2.09845C4.74066 2.09845 2.09845 4.74066 2.09845 8C2.09845 11.2593 4.74066 13.9015 8 13.9015Z" })
+  ] }) }) });
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M4.50551 11.4951L8.0006 8M8.0006 8L11.4957 4.50491M8.0006 8L4.50551 4.50491M8.0006 8L11.4957 11.4951",
+      stroke: "currentColor",
+      strokeWidth: "1.25",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
+export { Alert, CloseIcon, StatusIcon };