@uisatin/ui 0.2.0 → 0.4.0

package/chunk-GH2DEOGO.js

@@ -0,0 +1,67 @@
+import { ButtonDefaultsContext } from './chunk-6DWLTGRQ.js';
+import { cn } from './chunk-EHEXE2UV.js';
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function ButtonGroup({
+  orientation = "horizontal",
+  attached = true,
+  variant,
+  size,
+  shape,
+  className,
+  children,
+  ...props
+}) {
+  const defaults = React.useMemo(() => ({ variant, size, shape }), [variant, size, shape]);
+  const horizontal = orientation === "horizontal";
+  return /* @__PURE__ */ jsx(ButtonDefaultsContext.Provider, { value: defaults, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "button-group",
+      "data-orientation": orientation,
+      "data-attached": attached || void 0,
+      className: cn(
+        "sa:inline-flex sa:w-fit",
+        horizontal ? "sa:flex-row sa:items-center" : "sa:flex-col sa:items-stretch",
+        attached ? [
+          "sa:[&>*]:relative sa:[&>*:hover]:z-10 sa:[&>*:focus-visible]:z-20 sa:[&>*:focus-visible]:[clip-path:none]!",
+          horizontal ? [
+            "sa:[&>*:not(:first-child)]:rounded-l-none sa:[&>*:not(:last-child)]:rounded-r-none sa:[&>*:not(:last-child)]:border-r-0",
+            "sa:[&>[data-variant=secondary]:not(:first-child)]:border-l-border-default",
+            "sa:[&>*:not(:last-child)]:[clip-path:inset(-12px_0_-12px_-12px)] sa:[&>*:not(:first-child)]:[clip-path:inset(-12px_-12px_-12px_0)]",
+            "sa:[&>*:not(:first-child):not(:last-child)]:[clip-path:inset(-12px_0)]"
+          ] : [
+            "sa:[&>*:not(:first-child)]:rounded-t-none sa:[&>*:not(:last-child)]:rounded-b-none sa:[&>*:not(:last-child)]:border-b-0",
+            "sa:[&>[data-variant=secondary]:not(:first-child)]:border-t-border-default",
+            "sa:[&>*:not(:last-child)]:[clip-path:inset(-12px_-12px_0_-12px)] sa:[&>*:not(:first-child)]:[clip-path:inset(0_-12px_-12px_-12px)]",
+            "sa:[&>*:not(:first-child):not(:last-child)]:[clip-path:inset(0_-12px)]"
+          ]
+        ] : size === "xs" ? "sa:gap-1" : "sa:gap-2",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+}
+function ButtonGroupSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": "vertical",
+      "data-slot": "button-group-separator",
+      className: cn(
+        "sa:shrink-0 sa:self-center sa:bg-border-default",
+        // Vertical in a row, horizontal in a column.
+        "sa:h-4 sa:w-px sa:[[data-orientation=vertical]>&]:h-px sa:[[data-orientation=vertical]>&]:w-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { ButtonGroup, ButtonGroupSeparator };

package/{chunk-YG7JOOLJ.js → chunk-GKDMCY2S.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-H63FYCMY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import 'react';
 import { jsx } from 'react/jsx-runtime';
 
@@ -11,10 +11,10 @@ function Skeleton({ shape = "text", animated = false, width, height, className,
       "data-shape": shape,
       "data-animated": animated || void 0,
       className: cn(
-        "satin-skeleton relative shrink-0 overflow-hidden bg-bg-muted",
-        shape === "text" && "h-3 w-60 max-w-full rounded-sm",
-        shape === "circle" && "size-8 rounded-full",
-        shape === "rect" && "h-30 w-60 max-w-full rounded-lg",
+        "satin-skeleton sa:relative sa:shrink-0 sa:overflow-hidden sa:bg-bg-muted",
+        shape === "text" && "sa:h-3 sa:w-60 sa:max-w-full sa:rounded-sm",
+        shape === "circle" && "sa:size-8 sa:rounded-full",
+        shape === "rect" && "sa:h-30 sa:w-60 sa:max-w-full sa:rounded-lg",
         className
       ),
       style: { width, height, ...style },
@@ -24,5 +24,3 @@ function Skeleton({ shape = "text", animated = false, width, height, className,
 }
 
 export { Skeleton };
-//# sourceMappingURL=chunk-YG7JOOLJ.js.map
-//# sourceMappingURL=chunk-YG7JOOLJ.js.map

package/chunk-GTFUAA6H.js

@@ -0,0 +1,42 @@
+import { Input } from './chunk-L5PPN42A.js';
+import { Button } from './chunk-6DWLTGRQ.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import * as React from 'react';
+import { EyeClosed, Eye } from 'iconoir-react';
+import { jsx } from 'react/jsx-runtime';
+
+function PasswordInput({ visible, onVisibleChange, autoComplete = "current-password", disabled, ...props }) {
+  const labels = useSatinLabels();
+  const [own, setOwn] = React.useState(false);
+  const shown = visible ?? own;
+  const toggle = () => {
+    if (visible === void 0) setOwn(!shown);
+    onVisibleChange?.(!shown);
+  };
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ...props,
+      disabled,
+      type: shown ? "text" : "password",
+      autoComplete,
+      trailingIcon: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "tertiary",
+          size: "xs",
+          iconOnly: true,
+          disabled,
+          "aria-label": shown ? labels.hidePassword : labels.showPassword,
+          "aria-pressed": shown,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: toggle,
+          className: "sa:-m-1",
+          children: shown ? /* @__PURE__ */ jsx(EyeClosed, {}) : /* @__PURE__ */ jsx(Eye, {})
+        }
+      )
+    }
+  );
+}
+
+export { PasswordInput };

package/{chunk-TX3H3QMA.js → chunk-HI6QIG55.js}

@@ -1,7 +1,8 @@
-import { SLIDE_MS } from './chunk-J3NSDRVH.js';
-import { Checkbox } from './chunk-FDKIX4DC.js';
-import { Button } from './chunk-HNQUX43Z.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { SLIDE_MS } from './chunk-XETMIETJ.js';
+import { Checkbox } from './chunk-W2QQQWNE.js';
+import { Button } from './chunk-6DWLTGRQ.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { RadioGroup } from 'radix-ui';
 import { Check, NavArrowLeft, NavArrowRight, EditPencil } from 'iconoir-react';
@@ -49,20 +50,20 @@ function DecisionCard({
   const bodyRef = React.useRef(null);
   useStepSlide(question, step, cardRef, [titleRef, bodyRef]);
   const card = cn(
-    "flex w-[364px] max-w-full flex-col overflow-clip rounded-2xl border border-border-default bg-bg-popover",
-    "[box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
+    "sa:flex sa:w-[364px] sa:max-w-full sa:flex-col sa:overflow-clip sa:rounded-2xl sa:border sa:border-border-default sa:bg-bg-popover",
+    "sa:[box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
     className
   );
   if (type === "summary") {
     const values = asArray(value);
     const labels = values.map((v) => options.find((o) => o.value === v)?.label ?? v);
-    return /* @__PURE__ */ jsx("div", { "data-slot": "decision-card", "data-type": "summary", className: card, ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 py-2.5 pr-2.5 pl-3", children: [
-      /* @__PURE__ */ jsx("span", { className: "flex size-6 shrink-0 items-center justify-center rounded-full bg-action-primary-bg text-action-primary-fg", children: /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-icon-size-sm [stroke-width:1.875]" }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-        /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-text-muted", children: title }),
-        /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-text-default", children: labels.join(" \xB7 ") })
+    return /* @__PURE__ */ jsx("div", { "data-slot": "decision-card", "data-type": "summary", className: card, ...props, children: /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-center sa:gap-2.5 sa:py-2.5 sa:pr-2.5 sa:pl-3", children: [
+      /* @__PURE__ */ jsx("span", { className: "sa:flex sa:size-6 sa:shrink-0 sa:items-center sa:justify-center sa:rounded-full sa:bg-action-primary-bg sa:text-action-primary-fg", children: /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "sa:size-icon-size-sm sa:[stroke-width:1.875]" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-w-0 sa:flex-1 sa:flex-col", children: [
+        /* @__PURE__ */ jsx("span", { className: "sa:truncate sa:text-xs sa:text-text-muted", children: title }),
+        /* @__PURE__ */ jsx("span", { className: "sa:truncate sa:text-sm sa:font-medium sa:text-text-default", children: labels.join(" \xB7 ") })
       ] }),
-      onEdit && /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: onEdit, className: "text-text-muted", "aria-label": `Change ${title}`, children: "Change" })
+      onEdit && /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: onEdit, className: "sa:text-text-muted", "aria-label": `Change ${title}`, children: "Change" })
     ] }) });
   }
   const empty = type === "radio" ? !value : type === "checkbox" || type === "chips" ? asArray(value).length === 0 : false;
@@ -89,18 +90,18 @@ function DecisionCard({
             onNextStep
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { ref: bodyRef, children: [
+        /* @__PURE__ */ jsx("div", { className: "sa:relative", children: /* @__PURE__ */ jsxs("div", { ref: bodyRef, children: [
           type === "radio" && /* @__PURE__ */ jsx(
             RadioGroup.Root,
             {
               "aria-labelledby": titleId,
               value: typeof value === "string" ? value : "",
               onValueChange: set,
-              className: "flex flex-col gap-0.5 px-2",
+              className: "sa:flex sa:flex-col sa:gap-0.5 sa:px-2",
               children: options.map((option) => /* @__PURE__ */ jsx(DecisionItem, { children: /* @__PURE__ */ jsx(RadioRow, { option }) }, option.value))
             }
           ),
-          type === "checkbox" && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5 px-2", children: options.map((option) => {
+          type === "checkbox" && /* @__PURE__ */ jsx("div", { className: "sa:flex sa:flex-col sa:gap-0.5 sa:px-2", children: options.map((option) => {
             const checked = asArray(value).includes(option.value);
             return /* @__PURE__ */ jsx(DecisionItem, { children: /* @__PURE__ */ jsx(
               CheckboxRow,
@@ -111,7 +112,7 @@ function DecisionCard({
               }
             ) }, option.value);
           }) }),
-          type === "chips" && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5 px-3 pb-1", children: options.map((option) => {
+          type === "chips" && /* @__PURE__ */ jsx("div", { className: "sa:flex sa:flex-wrap sa:gap-1.5 sa:px-3 sa:pb-1", children: options.map((option) => {
             const chosen = asArray(value);
             const selected = chosen.includes(option.value);
             const full = max !== void 0 && chosen.length >= max && !selected;
@@ -142,8 +143,8 @@ function DecisionCard({
             question
           )
         ] }) }),
-        type !== "draft" && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 px-3 pt-4 pb-3", children: [
-          onSkip && /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: onSkip, className: "text-text-muted", children: skipLabel }),
+        type !== "draft" && /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-center sa:justify-end sa:gap-2 sa:px-3 sa:pt-4 sa:pb-3", children: [
+          onSkip && /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: onSkip, className: "sa:text-text-muted", children: skipLabel }),
           /* @__PURE__ */ jsx(Button, { onClick: () => onContinue?.(value), disabled: empty, children: continueLabel ?? "Continue" })
         ] })
       ]
@@ -159,12 +160,13 @@ function Header({
   onPreviousStep,
   onNextStep
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-0.5 py-3 pr-px pl-3", children: [
-    /* @__PURE__ */ jsx("div", { className: "relative min-w-0 flex-1", children: /* @__PURE__ */ jsxs("div", { ref: titleRef, className: "flex flex-col gap-0.5", children: [
-      /* @__PURE__ */ jsx("p", { id: titleId, className: "text-base leading-5 font-medium tracking-normal text-text-default", children: title }),
-      hint && /* @__PURE__ */ jsx("p", { className: "text-base text-text-muted", children: hint })
+  const labels = useSatinLabels();
+  return /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-start sa:gap-0.5 sa:py-3 sa:pr-px sa:pl-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "sa:relative sa:min-w-0 sa:flex-1", children: /* @__PURE__ */ jsxs("div", { ref: titleRef, className: "sa:flex sa:flex-col sa:gap-0.5", children: [
+      /* @__PURE__ */ jsx("p", { id: titleId, className: "sa:text-base sa:leading-5 sa:font-medium sa:tracking-normal sa:text-text-default", children: title }),
+      hint && /* @__PURE__ */ jsx("p", { className: "sa:text-base sa:text-text-muted", children: hint })
     ] }) }),
-    step && /* @__PURE__ */ jsxs("div", { className: "flex h-[21px] shrink-0 items-center gap-1 pr-2", children: [
+    step && /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:h-[21px] sa:shrink-0 sa:items-center sa:gap-1 sa:pr-2", children: [
       /* @__PURE__ */ jsx(
         Button,
         {
@@ -172,13 +174,13 @@ function Header({
           size: "xs",
           shape: "rounded",
           iconOnly: true,
-          "aria-label": "Previous question",
+          "aria-label": labels.previousQuestion,
           disabled: !onPreviousStep,
           onClick: onPreviousStep,
           children: /* @__PURE__ */ jsx(NavArrowLeft, { "aria-hidden": true })
         }
       ),
-      /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "text-sm whitespace-nowrap text-text-muted tabular-nums", children: step }),
+      /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sa:text-sm sa:whitespace-nowrap sa:text-text-muted sa:tabular-nums", children: step }),
       /* @__PURE__ */ jsx(
         Button,
         {
@@ -186,7 +188,7 @@ function Header({
           size: "xs",
           shape: "rounded",
           iconOnly: true,
-          "aria-label": "Next question",
+          "aria-label": labels.nextQuestion,
           disabled: !onNextStep,
           onClick: onNextStep,
           children: /* @__PURE__ */ jsx(NavArrowRight, { "aria-hidden": true })
@@ -252,30 +254,30 @@ function DecisionItem({ children, "data-force": force }) {
     "div",
     {
       "data-force": force,
-      className: "rounded-md p-1 transition-[background-color] duration-(--duration-fast) ease-(--ease-out) satin-hover:bg-action-secondary-bg",
+      className: "sa:rounded-md sa:p-1 sa:transition-[background-color] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out) sa:satin-hover:bg-action-secondary-bg",
       children
     }
   );
 }
 function RadioRow({ option }) {
   const id = React.useId();
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-5 items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:h-5 sa:items-center sa:gap-2", children: [
     /* @__PURE__ */ jsx(
       RadioGroup.Item,
       {
         id,
         value: option.value,
         className: cn(
-          "flex size-4 shrink-0 items-center justify-center rounded-full border border-border-strong bg-bg-field outline-none",
-          "[box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
-          "transition-[background-color,border-color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
-          "data-[state=checked]:border-action-primary-bg data-[state=checked]:bg-action-primary-bg data-[state=checked]:[box-shadow:none]",
-          "focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)] data-[state=checked]:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]"
+          "sa:flex sa:size-4 sa:shrink-0 sa:items-center sa:justify-center sa:rounded-full sa:border sa:border-border-strong sa:bg-bg-field sa:outline-none",
+          "sa:[box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
+          "sa:transition-[background-color,border-color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+          "sa:data-[state=checked]:border-action-primary-bg sa:data-[state=checked]:bg-action-primary-bg sa:data-[state=checked]:[box-shadow:none]",
+          "sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)] sa:data-[state=checked]:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]"
         ),
-        children: /* @__PURE__ */ jsx(RadioGroup.Indicator, { className: "size-1.5 rounded-full bg-text-on-solid" })
+        children: /* @__PURE__ */ jsx(RadioGroup.Indicator, { className: "sa:size-1.5 sa:rounded-full sa:bg-text-on-solid" })
       }
     ),
-    /* @__PURE__ */ jsx("label", { htmlFor: id, className: "min-w-0 flex-1 text-base text-text-default", children: option.label })
+    /* @__PURE__ */ jsx("label", { htmlFor: id, className: "sa:min-w-0 sa:flex-1 sa:text-base sa:text-text-default", children: option.label })
   ] });
 }
 function CheckboxRow({
@@ -284,9 +286,9 @@ function CheckboxRow({
   onCheckedChange
 }) {
   const id = React.useId();
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-5 items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:h-5 sa:items-center sa:gap-2", children: [
     /* @__PURE__ */ jsx(Checkbox, { id, checked, onCheckedChange: (c) => onCheckedChange(c === true) }),
-    /* @__PURE__ */ jsx("label", { htmlFor: id, className: "min-w-0 flex-1 text-base text-text-default", children: option.label })
+    /* @__PURE__ */ jsx("label", { htmlFor: id, className: "sa:min-w-0 sa:flex-1 sa:text-base sa:text-text-default", children: option.label })
   ] });
 }
 function DecisionChip({
@@ -303,12 +305,12 @@ function DecisionChip({
       disabled,
       onClick: () => onPressedChange(!selected),
       className: cn(
-        "inline-flex h-control-height shrink-0 items-center gap-1.5 rounded-pill border pr-2.5 pl-2 text-base font-medium outline-none select-none",
-        "transition-[background-color,border-color,color,box-shadow,transform] duration-(--duration-fast) ease-(--ease-out) active:scale-[0.97]",
-        "[&_svg]:size-icon-size-sm [&_svg]:shrink-0 [&_svg]:[stroke-width:1.875]",
-        "focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
-        "disabled:pointer-events-none disabled:opacity-50",
-        selected ? "border-status-brand-fg bg-status-brand-bg text-status-brand-fg" : "border-border-default bg-bg-popover text-text-default hover:border-border-strong [&_svg]:text-text-muted"
+        "sa:inline-flex sa:h-control-height sa:shrink-0 sa:items-center sa:gap-1.5 sa:rounded-pill sa:border sa:pr-2.5 sa:pl-2 sa:text-base sa:font-medium sa:outline-none sa:select-none",
+        "sa:transition-[background-color,border-color,color,box-shadow,transform] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out) sa:active:scale-[0.97]",
+        "sa:[&_svg]:size-icon-size-sm sa:[&_svg]:shrink-0 sa:[&_svg]:[stroke-width:1.875]",
+        "sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+        "sa:disabled:pointer-events-none sa:disabled:opacity-50",
+        selected ? "sa:border-status-brand-fg sa:bg-status-brand-bg sa:text-status-brand-fg" : "sa:border-border-default sa:bg-bg-popover sa:text-text-default sa:hover:border-border-strong sa:[&_svg]:text-text-muted"
       ),
       children: [
         option.icon,
@@ -372,8 +374,8 @@ function Ranking({
       listRef.current?.children[to]?.focus();
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: "px-3 pb-1", children: [
-    /* @__PURE__ */ jsx("ol", { ref: listRef, "aria-labelledby": labelledBy, className: "flex flex-col gap-1.5", children: order.map((item, i) => {
+  return /* @__PURE__ */ jsxs("div", { className: "sa:px-3 sa:pb-1", children: [
+    /* @__PURE__ */ jsx("ol", { ref: listRef, "aria-labelledby": labelledBy, className: "sa:flex sa:flex-col sa:gap-1.5", children: order.map((item, i) => {
       const lifted = dragging === item;
       return /* @__PURE__ */ jsxs(
         "li",
@@ -388,11 +390,11 @@ function Ranking({
           onPointerCancel: onPointerUp,
           onKeyDown: (e) => onKeyDown(e, i),
           className: cn(
-            "group/rank flex cursor-grab touch-none items-center gap-2 rounded-lg border border-border-default bg-bg-popover py-2 pr-2.5 pl-2 outline-none select-none",
-            "transition-[border-color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
-            "hover:border-border-strong focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
-            "data-dragging:cursor-grabbing data-dragging:border-border-strong",
-            "data-dragging:[box-shadow:0_4px_6px_-1px_var(--effect-shadow-sm),0_2px_4px_-2px_var(--effect-shadow-sm)]"
+            "sa:group/rank sa:flex sa:cursor-grab sa:touch-none sa:items-center sa:gap-2 sa:rounded-lg sa:border sa:border-border-default sa:bg-bg-popover sa:py-2 sa:pr-2.5 sa:pl-2 sa:outline-none sa:select-none",
+            "sa:transition-[border-color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+            "sa:hover:border-border-strong sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+            "sa:data-dragging:cursor-grabbing sa:data-dragging:border-border-strong",
+            "sa:data-dragging:[box-shadow:0_4px_6px_-1px_var(--effect-shadow-sm),0_2px_4px_-2px_var(--effect-shadow-sm)]"
           ),
           children: [
             /* @__PURE__ */ jsx(Grip, {}),
@@ -400,19 +402,19 @@ function Ranking({
               "span",
               {
                 className: cn(
-                  "flex size-5 shrink-0 items-center justify-center rounded-full text-xs tabular-nums",
-                  i === 0 ? "bg-action-primary-bg text-action-primary-fg" : "bg-bg-muted text-text-muted"
+                  "sa:flex sa:size-5 sa:shrink-0 sa:items-center sa:justify-center sa:rounded-full sa:text-xs sa:tabular-nums",
+                  i === 0 ? "sa:bg-action-primary-bg sa:text-action-primary-fg" : "sa:bg-bg-muted sa:text-text-muted"
                 ),
                 children: i + 1
               }
             ),
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 text-base font-medium text-text-default", children: label(item) })
+            /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:text-base sa:font-medium sa:text-text-default", children: label(item) })
           ]
         },
         item
       );
     }) }),
-    /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: announcement })
+    /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sa:sr-only", children: announcement })
   ] });
 }
 function Grip() {
@@ -423,7 +425,7 @@ function Grip() {
       height: "14",
       viewBox: "0 0 8 14",
       "aria-hidden": true,
-      className: "shrink-0 fill-current text-text-subtle group-data-dragging/rank:text-text-muted",
+      className: "sa:shrink-0 sa:fill-current sa:text-text-subtle sa:group-data-dragging/rank:text-text-muted",
       children: [1.25, 6.75, 12.25].map((cy) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
         /* @__PURE__ */ jsx("circle", { cx: "1.25", cy, r: "1.25" }),
         /* @__PURE__ */ jsx("circle", { cx: "6.25", cy, r: "1.25" })
@@ -441,6 +443,7 @@ function Draft({
   continueLabel,
   skipLabel
 }) {
+  const labels = useSatinLabels();
   const [editing, setEditing] = React.useState(false);
   const areaRef = React.useRef(null);
   React.useLayoutEffect(() => {
@@ -450,36 +453,36 @@ function Draft({
     el.style.height = `${el.scrollHeight}px`;
   }, [value, editing]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: "px-3 pb-1", children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { className: "sa:px-3 sa:pb-1", children: /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
-          "flex flex-col gap-2 rounded-2xl rounded-tl-[4px] border border-border-default bg-bg-popover px-3 py-2.5 text-base text-text-default",
-          "[box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
-          "transition-[box-shadow,border-color] duration-(--duration-fast) ease-(--ease-out)",
-          "has-[textarea:focus-visible]:border-border-strong has-[textarea:focus-visible]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]"
+          "sa:flex sa:flex-col sa:gap-2 sa:rounded-2xl sa:rounded-tl-[4px] sa:border sa:border-border-default sa:bg-bg-popover sa:px-3 sa:py-2.5 sa:text-base sa:text-text-default",
+          "sa:[box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
+          "sa:transition-[box-shadow,border-color] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+          "sa:has-[textarea:focus-visible]:border-border-strong sa:has-[textarea:focus-visible]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]"
         ),
         children: [
-          title && /* @__PURE__ */ jsx("p", { className: "leading-[18px] font-medium", children: title }),
+          title && /* @__PURE__ */ jsx("p", { className: "sa:leading-[18px] sa:font-medium", children: title }),
           editing ? /* @__PURE__ */ jsx(
             "textarea",
             {
               ref: areaRef,
-              "aria-label": "Draft",
+              "aria-label": labels.draft,
               value,
               onChange: (e) => onValueChange(e.target.value),
-              className: "w-full resize-none bg-transparent outline-none"
+              className: "sa:w-full sa:resize-none sa:bg-transparent sa:outline-none"
             }
-          ) : /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap", children: value })
+          ) : /* @__PURE__ */ jsx("p", { className: "sa:whitespace-pre-wrap", children: value })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-3 pt-4 pb-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-center sa:justify-between sa:gap-2 sa:px-3 sa:pt-4 sa:pb-3", children: [
       /* @__PURE__ */ jsxs(
         Button,
         {
           variant: "tertiary",
-          className: "text-text-muted",
+          className: "sa:text-text-muted",
           "aria-pressed": editing,
           onClick: () => {
             setEditing(true);
@@ -492,8 +495,8 @@ function Draft({
           ]
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        onSkip && /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: onSkip, className: "text-text-muted", children: skipLabel }),
+      /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-center sa:gap-2", children: [
+        onSkip && /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: onSkip, className: "sa:text-text-muted", children: skipLabel }),
         /* @__PURE__ */ jsx(Button, { onClick: onContinue, disabled: !value.trim(), children: continueLabel })
       ] })
     ] })
@@ -516,5 +519,3 @@ function toggle(list, item, on) {
 }
 
 export { DecisionCard, DecisionItemPreview };
-//# sourceMappingURL=chunk-TX3H3QMA.js.map
-//# sourceMappingURL=chunk-TX3H3QMA.js.map

package/{chunk-6QMSWITQ.js → chunk-HZV7EXGU.js}

@@ -1,6 +1,6 @@
-import { bannerMesh } from './chunk-YX5VNRJX.js';
-import { Button } from './chunk-HNQUX43Z.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { bannerMesh } from './chunk-YYFAZQ25.js';
+import { Button } from './chunk-6DWLTGRQ.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import 'react';
 import { cva } from 'class-variance-authority';
 import { Xmark } from 'iconoir-react';
@@ -8,26 +8,26 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var bannerVariants = cva(
   [
-    "relative isolate flex max-w-full overflow-clip border border-border-default bg-bg-card",
-    "[box-shadow:0_2px_4px_-2px_var(--effect-shadow-sm),0_4px_6px_-1px_var(--effect-shadow-sm)]"
+    "sa:relative sa:isolate sa:flex sa:max-w-full sa:overflow-clip sa:border sa:border-border-default sa:bg-bg-card",
+    "sa:[box-shadow:0_2px_4px_-2px_var(--effect-shadow-sm),0_4px_6px_-1px_var(--effect-shadow-sm)]"
   ],
   {
     variants: {
       layout: {
-        horizontal: "w-[450px] items-center gap-2.5 px-3 py-2",
-        sidebar: "w-[222px] flex-col items-start gap-3 p-3"
+        horizontal: "sa:w-[450px] sa:items-center sa:gap-2.5 sa:px-3 sa:py-2",
+        sidebar: "sa:w-[222px] sa:flex-col sa:items-start sa:gap-3 sa:p-3"
       },
       shape: {
-        rounded: "rounded-xl",
-        pill: "rounded-3xl"
+        rounded: "sa:rounded-xl",
+        pill: "sa:rounded-3xl"
       },
       lines: {
         one: "",
         two: ""
       }
     },
-    compoundVariants: [{ layout: "horizontal", shape: "pill", lines: "one", className: "rounded-pill" }],
-    defaultVariants: { layout: "horizontal", shape: "rounded", lines: "one" }
+    compoundVariants: [{ layout: "horizontal", shape: "pill", lines: "one", className: "sa:rounded-pill" }],
+    defaultVariants: { layout: "horizontal", shape: "sa:rounded", lines: "one" }
   }
 );
 function Banner({
@@ -59,8 +59,8 @@ function Banner({
       "aria-label": dismissLabel,
       onClick: onDismiss,
       className: cn(
-        sidebar && "absolute top-[3px] right-[3px] z-10",
-        primary && "text-action-primary-fg [&_svg]:text-action-primary-fg satin-hover:bg-action-primary-bg-hover"
+        sidebar && "sa:absolute sa:top-[3px] sa:right-[3px] sa:z-10",
+        primary && "sa:text-action-primary-fg sa:[&_svg]:text-action-primary-fg sa:satin-hover:bg-action-primary-bg-hover"
       ),
       children: /* @__PURE__ */ jsx(Xmark, { "aria-hidden": true })
     }
@@ -74,7 +74,7 @@ function Banner({
       "data-tone": tone,
       className: cn(
         bannerVariants({ layout, shape, lines }),
-        primary && "border-action-primary-border bg-action-primary-bg",
+        primary && "sa:border-action-primary-border sa:bg-action-primary-bg",
         shimmer && "satin-sheen",
         className
       ),
@@ -86,7 +86,7 @@ function Banner({
             src: glow.dark,
             alt: "",
             "aria-hidden": true,
-            className: "pointer-events-none absolute -inset-px -z-10 size-[calc(100%+2px)] max-w-none object-cover mix-blend-screen"
+            className: "sa:pointer-events-none sa:absolute sa:-inset-px sa:-z-10 sa:size-[calc(100%+2px)] sa:max-w-none sa:object-cover sa:mix-blend-screen"
           }
         ),
         background === "mesh" && !primary && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -96,7 +96,7 @@ function Banner({
               src: glow.light,
               alt: "",
               "aria-hidden": true,
-              className: "pointer-events-none absolute -inset-px -z-10 size-[calc(100%+2px)] max-w-none object-cover mix-blend-multiply"
+              className: "sa:pointer-events-none sa:absolute sa:-inset-px sa:-z-10 sa:size-[calc(100%+2px)] sa:max-w-none sa:object-cover sa:mix-blend-multiply"
             }
           ),
           /* @__PURE__ */ jsx(
@@ -105,7 +105,7 @@ function Banner({
               src: glow.dark,
               alt: "",
               "aria-hidden": true,
-              className: "pointer-events-none absolute -inset-px -z-10 size-[calc(100%+2px)] max-w-none object-cover mix-blend-screen"
+              className: "sa:pointer-events-none sa:absolute sa:-inset-px sa:-z-10 sa:size-[calc(100%+2px)] sa:max-w-none sa:object-cover sa:mix-blend-screen"
             }
           )
         ] }),
@@ -113,20 +113,20 @@ function Banner({
           "div",
           {
             className: cn(
-              "flex min-w-0 flex-col justify-center text-sm",
-              sidebar ? "w-full" : "flex-1",
-              description && "gap-0.5"
+              "sa:flex sa:min-w-0 sa:flex-col sa:justify-center sa:text-sm",
+              sidebar ? "sa:w-full" : "sa:flex-1",
+              description && "sa:gap-0.5"
             ),
             children: [
-              /* @__PURE__ */ jsx("p", { className: cn("truncate text-base leading-[18px] font-medium", primary ? "text-action-primary-fg" : "text-text-default"), children: title }),
-              description && /* @__PURE__ */ jsx("p", { className: cn("text-body", primary ? "text-action-primary-fg/80" : "text-text-muted", !sidebar && "truncate"), children: description })
+              /* @__PURE__ */ jsx("p", { className: cn("sa:truncate sa:text-base sa:leading-[18px] sa:font-medium", primary ? "sa:text-action-primary-fg" : "sa:text-text-default"), children: title }),
+              description && /* @__PURE__ */ jsx("p", { className: cn("sa:text-body", primary ? "sa:text-action-primary-fg/80" : "sa:text-text-muted", !sidebar && "sa:truncate"), children: description })
             ]
           }
         ),
         sidebar ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          action && /* @__PURE__ */ jsx("div", { className: "flex w-full items-center *:flex-1", children: action }),
+          action && /* @__PURE__ */ jsx("div", { className: "sa:flex sa:w-full sa:items-center sa:*:flex-1", children: action }),
           close
-        ] }) : (action || close) && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+        ] }) : (action || close) && /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:shrink-0 sa:items-center sa:gap-1", children: [
           action,
           close
         ] })
@@ -136,5 +136,3 @@ function Banner({
 }
 
 export { Banner, bannerVariants };
-//# sourceMappingURL=chunk-6QMSWITQ.js.map
-//# sourceMappingURL=chunk-6QMSWITQ.js.map