@uisatin/ui 0.2.0 → 0.3.0

package/{chunk-72OCFAPT.js → chunk-UCCNXGLG.js}

@@ -1,6 +1,7 @@
-import { useFormField } from './chunk-UBNHSZSE.js';
-import { MenuItemContent, menuItemClass, menuGroupClass, menuGroupLabelClass, menuSurfaceClass } from './chunk-3DINAQLL.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { useFormField } from './chunk-VUOAPWTF.js';
+import { MenuItemContent, menuItemClass, menuGroupClass, menuGroupLabelClass, menuSurfaceClass } from './chunk-BR2B4OIT.js';
+import { useSatinLabels } from './chunk-SSOFFQ5T.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { Select as Select$1 } from 'radix-ui';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -36,25 +37,25 @@ function FieldChrome({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("grid w-full gap-2", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("sa:grid sa:w-full sa:gap-2", className), children: [
     label && // The row keeps the label's 18px whatever the action, so the field never moves.
-    /* @__PURE__ */ jsxs("div", { className: "flex h-[18px] items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: chrome.controlId, className: "text-sm leading-[18px] font-medium text-text-default", children: label }),
-      action && /* @__PURE__ */ jsx("div", { className: "-my-[3px] flex shrink-0 items-center", children: action })
+    /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:h-[18px] sa:items-center sa:justify-between sa:gap-2", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: chrome.controlId, className: "sa:text-sm sa:leading-[18px] sa:font-medium sa:text-text-default", children: label }),
+      action && /* @__PURE__ */ jsx("div", { className: "sa:-my-[3px] sa:flex sa:shrink-0 sa:items-center", children: action })
     ] }),
     children,
-    chrome.message && /* @__PURE__ */ jsx("p", { id: chrome.messageId, className: cn("text-sm", chrome.isError ? "text-action-destructive-bg" : "text-text-muted"), children: chrome.message })
+    chrome.message && /* @__PURE__ */ jsx("p", { id: chrome.messageId, className: cn("sa:text-sm", chrome.isError ? "sa:text-action-destructive-bg" : "sa:text-text-muted"), children: chrome.message })
   ] });
 }
 function SelectChevron({ className }) {
-  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, className: cn("satin-field-icon text-text-muted", className), children: /* @__PURE__ */ jsx("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, className: cn("satin-field-icon sa:text-text-muted", className), children: /* @__PURE__ */ jsx("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 function Select({
   options,
   value,
   defaultValue,
   onValueChange,
-  placeholder = "Select\u2026",
+  placeholder,
   label,
   hint,
   error,
@@ -73,9 +74,11 @@ function Select({
   wrapperClassName,
   className,
   "data-force": force,
+  "aria-describedby": describedBy,
   ...props
 }) {
   const chrome = useFieldChrome({ id, disabled, error, hint });
+  const labels = useSatinLabels();
   const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
   const current = value ?? uncontrolled;
   const groups = isOptionGroups(options) ? options : [{ options }];
@@ -99,6 +102,7 @@ function Select({
         /* @__PURE__ */ jsxs(
           Select$1.Trigger,
           {
+            ...props,
             id: chrome.controlId,
             "data-slot": "select-trigger",
             "data-size": size,
@@ -107,12 +111,11 @@ function Select({
             "data-disabled": chrome.disabled || void 0,
             "data-force": force,
             "aria-invalid": chrome.invalid || void 0,
-            "aria-describedby": chrome.describedBy,
-            "aria-label": props["aria-label"],
+            "aria-describedby": [describedBy, chrome.describedBy].filter(Boolean).join(" ") || void 0,
             className: cn("satin-field satin-select", className),
             children: [
               lead && /* @__PURE__ */ jsx("span", { className: "satin-field-icon", "aria-hidden": true, children: lead }),
-              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-text-default", children: /* @__PURE__ */ jsx(Select$1.Value, { placeholder: /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: placeholder }) }) }),
+              /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate sa:text-text-default", children: /* @__PURE__ */ jsx(Select$1.Value, { placeholder: /* @__PURE__ */ jsx("span", { className: "sa:text-text-muted", children: placeholder ?? labels.select }) }) }),
               /* @__PURE__ */ jsx(Select$1.Icon, { asChild: true, children: /* @__PURE__ */ jsx(SelectChevron, {}) })
             ]
           }
@@ -127,13 +130,13 @@ function Select({
             sideOffset: 4,
             collisionPadding: 8,
             className: cn(
-              "pointer-events-auto z-50 max-w-[520px] min-w-(--radix-select-trigger-width) overflow-hidden",
-              "max-h-(--radix-select-content-available-height)",
+              "sa:pointer-events-auto sa:z-50 sa:max-w-[520px] sa:min-w-(--radix-select-trigger-width) sa:overflow-hidden",
+              "sa:max-h-(--radix-select-content-available-height)",
               menuSurfaceClass,
-              "origin-(--radix-select-content-transform-origin) outline-none",
-              "data-[state=open]:animate-[satin-enter_var(--duration-base)_var(--ease-out)]"
+              "sa:origin-(--radix-select-content-transform-origin) sa:outline-none",
+              "sa:data-[state=open]:animate-[satin-enter_var(--sa-duration-base)_var(--sa-ease-out)]"
             ),
-            children: /* @__PURE__ */ jsx(Select$1.Viewport, { className: "flex flex-col gap-1 p-1", children: groups.map((g, gi) => {
+            children: /* @__PURE__ */ jsx(Select$1.Viewport, { className: "sa:flex sa:flex-col sa:gap-1 sa:p-1", children: groups.map((g, gi) => {
               const rows = g.options.map((o) => /* @__PURE__ */ jsx(
                 Select$1.Item,
                 {
@@ -141,7 +144,7 @@ function Select({
                   disabled: o.disabled,
                   textValue: o.label,
                   "data-slot": "select-item",
-                  className: cn(menuItemClass, "data-[state=checked]:bg-bg-selected"),
+                  className: cn(menuItemClass, "sa:data-[state=checked]:bg-bg-selected"),
                   children: /* @__PURE__ */ jsx(
                     MenuItemContent,
                     {
@@ -171,5 +174,3 @@ function Select({
 }
 
 export { FieldChrome, Select, SelectChevron, isOptionGroups, useFieldChrome };
-//# sourceMappingURL=chunk-72OCFAPT.js.map
-//# sourceMappingURL=chunk-72OCFAPT.js.map

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

@@ -1,4 +1,4 @@
-import { cn } from './chunk-H63FYCMY.js';
+import { cn } from './chunk-O46O6LFQ.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-H4NU7NPO.js → chunk-UUCVRIVP.js}

@@ -1,5 +1,6 @@
-import { Button } from './chunk-HNQUX43Z.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { Button } from './chunk-T6L32XXH.js';
+import { useSatinLabels } from './chunk-SSOFFQ5T.js';
+import { cn } from './chunk-O46O6LFQ.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-P4O6TGDR.js → chunk-UZ4DXU6W.js}

@@ -1,6 +1,7 @@
-import { menuItemClass, MenuItemContent } from './chunk-3DINAQLL.js';
-import { Kbd, KbdHint, KbdArrowUp, KbdArrowDown, KbdReturn } from './chunk-BKZBWPUH.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { menuItemClass, MenuItemContent } from './chunk-BR2B4OIT.js';
+import { Kbd, KbdHint, KbdArrowUp, KbdArrowDown, KbdReturn } from './chunk-57QEOCDZ.js';
+import { useSatinLabels } from './chunk-SSOFFQ5T.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { Dialog } from 'radix-ui';
 import { Search } from 'iconoir-react';
@@ -17,14 +18,16 @@ function CommandMenu({
   defaultOpen = false,
   onOpenChange,
   hotkey = true,
-  placeholder = "Type a command or search\u2026",
+  placeholder,
   emptyText = (q) => `No results for \u201C${q}\u201D`,
   hints = true,
   modal = true,
   container,
   onOpenAutoFocus,
-  className
+  className,
+  ...props
 }) {
+  const labels = useSatinLabels();
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
   const open = openProp ?? uncontrolledOpen;
   const setOpen = React.useCallback(
@@ -69,24 +72,25 @@ function CommandMenu({
   const position = container ? "absolute" : "fixed";
   let index = -1;
   return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange: setOpen, modal, children: /* @__PURE__ */ jsxs(Dialog.Portal, { container, children: [
-    /* @__PURE__ */ jsx(Dialog.Overlay, { className: cn(position, "inset-0 z-50 bg-black-a40") }),
-    /* @__PURE__ */ jsx("div", { className: cn(position, "pointer-events-none inset-0 z-50 flex items-center justify-center p-4"), children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(Dialog.Overlay, { className: cn(position, "sa:inset-0 sa:z-50 sa:bg-black-a40") }),
+    /* @__PURE__ */ jsx("div", { className: cn(position, "sa:pointer-events-none sa:inset-0 sa:z-50 sa:flex sa:items-center sa:justify-center sa:p-4"), children: /* @__PURE__ */ jsxs(
       Dialog.Content,
       {
-        "data-slot": "command-menu",
         "aria-describedby": void 0,
+        ...props,
+        "data-slot": "command-menu",
         onOpenAutoFocus,
         className: cn(
-          "pointer-events-auto flex h-fit max-h-[min(480px,76vh)] w-[520px] max-w-full flex-col overflow-hidden",
-          "rounded-2xl border border-border-subtle bg-bg-popover",
-          "[box-shadow:0_4px_6px_-4px_var(--effect-shadow-sm),0_10px_15px_-3px_var(--effect-shadow-sm)]",
-          "outline-none data-[state=open]:animate-[satin-enter_var(--duration-base)_var(--ease-out)]",
+          "sa:pointer-events-auto sa:flex sa:h-fit sa:max-h-[min(480px,76vh)] sa:w-[520px] sa:max-w-full sa:flex-col sa:overflow-hidden",
+          "sa:rounded-2xl sa:border sa:border-border-subtle sa:bg-bg-popover",
+          "sa:[box-shadow:0_4px_6px_-4px_var(--effect-shadow-sm),0_10px_15px_-3px_var(--effect-shadow-sm)]",
+          "sa:outline-none sa:data-[state=open]:animate-[satin-enter_var(--sa-duration-base)_var(--sa-ease-out)]",
           className
         ),
         children: [
-          /* @__PURE__ */ jsx(Dialog.Title, { className: "sr-only", children: "Command menu" }),
-          /* @__PURE__ */ jsxs("label", { className: "flex h-12 shrink-0 items-center gap-2 border-b border-border-subtle px-4 text-text-muted", children: [
-            /* @__PURE__ */ jsx(Search, { "aria-hidden": true, className: "size-4 shrink-0 [stroke-width:1.875]" }),
+          /* @__PURE__ */ jsx(Dialog.Title, { className: "sa:sr-only", children: labels.commandMenu }),
+          /* @__PURE__ */ jsxs("label", { className: "sa:flex sa:h-12 sa:shrink-0 sa:items-center sa:gap-2 sa:border-b sa:border-border-subtle sa:px-4 sa:text-text-muted", children: [
+            /* @__PURE__ */ jsx(Search, { "aria-hidden": true, className: "sa:size-4 sa:shrink-0 sa:[stroke-width:1.875]" }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -95,9 +99,9 @@ function CommandMenu({
                 "aria-controls": listId,
                 "aria-autocomplete": "list",
                 "aria-activedescendant": flat[active] ? optionId(active) : void 0,
-                "aria-label": "Search commands",
+                "aria-label": labels.searchCommands,
                 value: query,
-                placeholder,
+                placeholder: placeholder ?? labels.commandPlaceholder,
                 onChange: (e) => {
                   setQuery(e.target.value);
                   setActive(0);
@@ -112,13 +116,13 @@ function CommandMenu({
                     run(flat[active]);
                   }
                 },
-                className: "min-w-0 flex-1 bg-transparent text-base leading-[21px] text-text-default outline-none placeholder:text-text-muted focus-visible:ring-0"
+                className: "sa:min-w-0 sa:flex-1 sa:bg-transparent sa:text-base sa:leading-[21px] sa:text-text-default sa:outline-none sa:placeholder:text-text-muted sa:focus-visible:ring-0"
               }
             ),
             /* @__PURE__ */ jsx(Kbd, { size: "md", "aria-hidden": true, children: "Esc" })
           ] }),
-          /* @__PURE__ */ jsx("div", { ref: listRef, id: listId, role: "listbox", "aria-label": "Commands", className: "flex min-h-0 flex-col gap-2 overflow-y-auto p-2", children: flat.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-2 py-8 text-center text-sm text-text-muted", children: emptyText(query) }) : shown.map((g, gi) => /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": `${listId}-g${gi}`, className: "flex flex-col", children: [
-            /* @__PURE__ */ jsx("div", { id: `${listId}-g${gi}`, className: "flex h-6 items-center px-2 text-xs leading-3 font-medium tracking-normal text-text-muted", children: g.label }),
+          /* @__PURE__ */ jsx("div", { ref: listRef, id: listId, role: "listbox", "aria-label": labels.commands, className: "sa:flex sa:min-h-0 sa:flex-col sa:gap-2 sa:overflow-y-auto sa:p-2", children: flat.length === 0 ? /* @__PURE__ */ jsx("p", { className: "sa:px-2 sa:py-8 sa:text-center sa:text-sm sa:text-text-muted", children: emptyText(query) }) : shown.map((g, gi) => /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": `${listId}-g${gi}`, className: "sa:flex sa:flex-col", children: [
+            /* @__PURE__ */ jsx("div", { id: `${listId}-g${gi}`, className: "sa:flex sa:h-6 sa:items-center sa:px-2 sa:text-xs sa:leading-3 sa:font-medium sa:tracking-normal sa:text-text-muted", children: g.label }),
             g.items.map((item) => {
               index += 1;
               const i = index;
@@ -150,10 +154,10 @@ function CommandMenu({
               );
             })
           ] }, gi)) }),
-          hints && /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "flex h-10 shrink-0 items-center gap-4 border-t border-border-subtle px-4", children: [
-            /* @__PURE__ */ jsx(KbdHint, { keys: [/* @__PURE__ */ jsx(KbdArrowUp, {}, "up"), /* @__PURE__ */ jsx(KbdArrowDown, {}, "down")], label: "Navigate" }),
-            /* @__PURE__ */ jsx(KbdHint, { keys: [/* @__PURE__ */ jsx(KbdReturn, {}, "return")], label: "Open" }),
-            /* @__PURE__ */ jsx(KbdHint, { className: "ml-auto", keys: ["Esc"], label: "Close" })
+          hints && /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "sa:flex sa:h-10 sa:shrink-0 sa:items-center sa:gap-4 sa:border-t sa:border-border-subtle sa:px-4", children: [
+            /* @__PURE__ */ jsx(KbdHint, { keys: [/* @__PURE__ */ jsx(KbdArrowUp, {}, "up"), /* @__PURE__ */ jsx(KbdArrowDown, {}, "down")], label: labels.navigate }),
+            /* @__PURE__ */ jsx(KbdHint, { keys: [/* @__PURE__ */ jsx(KbdReturn, {}, "return")], label: labels.openItem }),
+            /* @__PURE__ */ jsx(KbdHint, { className: "sa:ml-auto", keys: ["Esc"], label: labels.close })
           ] })
         ]
       }
@@ -162,5 +166,3 @@ function CommandMenu({
 }
 
 export { CommandMenu };
-//# sourceMappingURL=chunk-P4O6TGDR.js.map
-//# sourceMappingURL=chunk-P4O6TGDR.js.map

package/{chunk-UBNHSZSE.js → chunk-VUOAPWTF.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-H63FYCMY.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -33,7 +33,7 @@ function FormField({
       "data-layout": layout,
       "data-invalid": invalid || void 0,
       "data-disabled": disabled || void 0,
-      className: cn("flex w-full items-start", layout === "vertical" ? "flex-col gap-2" : "gap-6", className),
+      className: cn("sa:flex sa:w-full sa:items-start", layout === "vertical" ? "sa:flex-col sa:gap-2" : "sa:gap-6", className),
       ...props,
       children: [
         /* @__PURE__ */ jsxs(
@@ -41,20 +41,20 @@ function FormField({
           {
             htmlFor: id,
             className: cn(
-              "flex items-start gap-0.5 text-sm leading-[18px] font-medium text-text-default",
-              layout === "horizontal" && "w-40 shrink-0",
-              disabled && "opacity-50"
+              "sa:flex sa:items-start sa:gap-0.5 sa:text-sm sa:leading-[18px] sa:font-medium sa:text-text-default",
+              layout === "horizontal" && "sa:w-40 sa:shrink-0",
+              disabled && "sa:opacity-50"
             ),
             children: [
               label,
               required && // The required mark from Figma (the `sparkle 2` glyph in _label), 6px, in the label colour.
-              /* @__PURE__ */ jsx("svg", { width: "6", height: "6", viewBox: "0 0 6 6", fill: "currentColor", "aria-hidden": true, className: "shrink-0", children: /* @__PURE__ */ jsx("path", { d: "M3.63636 2.18023L5.55372 1.41279L6 2.75581L4.04959 3.43605L5.27273 5.14535L4.18182 6L2.95868 4.20349L1.80165 6L0.694215 5.14535L1.91736 3.43605L0 2.75581L0.446281 1.41279L2.31405 2.18023V0H3.63636V2.18023Z" }) })
+              /* @__PURE__ */ jsx("svg", { width: "6", height: "6", viewBox: "0 0 6 6", fill: "currentColor", "aria-hidden": true, className: "sa:shrink-0", children: /* @__PURE__ */ jsx("path", { d: "M3.63636 2.18023L5.55372 1.41279L6 2.75581L4.04959 3.43605L5.27273 5.14535L4.18182 6L2.95868 4.20349L1.80165 6L0.694215 5.14535L1.91736 3.43605L0 2.75581L0.446281 1.41279L2.31405 2.18023V0H3.63636V2.18023Z" }) })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 flex-1 flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:w-full sa:min-w-0 sa:flex-1 sa:flex-col sa:gap-1.5", children: [
           children,
-          invalid ? /* @__PURE__ */ jsxs("p", { id: messageId, className: "flex items-start gap-1.5 text-sm text-action-destructive-bg", children: [
+          invalid ? /* @__PURE__ */ jsxs("p", { id: messageId, className: "sa:flex sa:items-start sa:gap-1.5 sa:text-sm sa:text-action-destructive-bg", children: [
             /* @__PURE__ */ jsxs(
               "svg",
               {
@@ -67,7 +67,7 @@ function FormField({
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
                 "aria-hidden": true,
-                className: "mt-[2.75px] shrink-0",
+                className: "sa:mt-[2.75px] sa:shrink-0",
                 children: [
                   /* @__PURE__ */ jsx("path", { d: "M7 4.67613V7.25806" }),
                   /* @__PURE__ */ jsx("path", { d: "M7 9.32422L7.0059 9.31766" }),
@@ -76,7 +76,7 @@ function FormField({
               }
             ),
             /* @__PURE__ */ jsx("span", { children: error })
-          ] }) : description && /* @__PURE__ */ jsx("p", { id: messageId, className: cn("text-sm text-text-muted", disabled && "opacity-50"), children: description })
+          ] }) : description && /* @__PURE__ */ jsx("p", { id: messageId, className: cn("sa:text-sm sa:text-text-muted", disabled && "sa:opacity-50"), children: description })
         ] })
       ]
     }
@@ -84,5 +84,3 @@ function FormField({
 }
 
 export { FormField, useFormField };
-//# sourceMappingURL=chunk-UBNHSZSE.js.map
-//# sourceMappingURL=chunk-UBNHSZSE.js.map