@uisatin/ui 0.1.1 → 0.3.0

package/{chunk-A5XEM3GF.js → chunk-RHQHDYTE.js}

@@ -1,21 +1,21 @@
-import { Button } from './chunk-HNQUX43Z.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { Button } from './chunk-T6L32XXH.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { Check, Copy } from 'iconoir-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var tokenClass = {
-  plain: "text-[var(--code-plain,#18181b)] dark:text-[var(--code-plain,#fafafa)]",
-  keyword: "text-[var(--code-keyword,#dc2626)] dark:text-[var(--code-keyword,#f87171)]",
-  string: "text-[var(--code-string,#0369a1)] dark:text-[var(--code-string,#7dd3fc)]",
-  function: "text-[var(--code-function,#8b5cf6)] dark:text-[var(--code-function,#a78bfa)]",
-  parameter: "text-[var(--code-parameter,#b45309)] dark:text-[var(--code-parameter,#fcd34d)]",
-  variable: "text-[var(--code-variable,#0284c7)] dark:text-[var(--code-variable,#38bdf8)]",
+  plain: "sa:text-[var(--code-plain,#18181b)] sa:dark:text-[var(--code-plain,#fafafa)]",
+  keyword: "sa:text-[var(--code-keyword,#dc2626)] sa:dark:text-[var(--code-keyword,#f87171)]",
+  string: "sa:text-[var(--code-string,#0369a1)] sa:dark:text-[var(--code-string,#7dd3fc)]",
+  function: "sa:text-[var(--code-function,#8b5cf6)] sa:dark:text-[var(--code-function,#a78bfa)]",
+  parameter: "sa:text-[var(--code-parameter,#b45309)] sa:dark:text-[var(--code-parameter,#fcd34d)]",
+  variable: "sa:text-[var(--code-variable,#0284c7)] sa:dark:text-[var(--code-variable,#38bdf8)]",
   // No comment colour in Figma: comments take the line-number grey.
-  comment: "text-[var(--code-line-number,#a1a1aa)] dark:text-[var(--code-line-number,#71717a)]"
+  comment: "sa:text-[var(--code-line-number,#a1a1aa)] sa:dark:text-[var(--code-line-number,#71717a)]"
 };
-var lineNumberClass = "text-[var(--code-line-number,#a1a1aa)] dark:text-[var(--code-line-number,#71717a)]";
-var highlightClass = "bg-[var(--code-line-highlight,rgba(0,0,0,0.05))] dark:bg-[var(--code-line-highlight,rgba(255,255,255,0.06))]";
+var lineNumberClass = "sa:text-[var(--code-line-number,#a1a1aa)] sa:dark:text-[var(--code-line-number,#71717a)]";
+var highlightClass = "sa:bg-[var(--code-line-highlight,rgba(0,0,0,0.05))] sa:dark:bg-[var(--code-line-highlight,rgba(255,255,255,0.06))]";
 var KEYWORDS = /* @__PURE__ */ new Set([
   "import",
   "from",
@@ -124,7 +124,7 @@ function parse(code, view, highlightLines) {
   });
 }
 function FileCodeIcon() {
-  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, className: "shrink-0 text-text-muted", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, className: "sa:shrink-0 sa:text-text-muted", children: /* @__PURE__ */ jsx(
     "path",
     {
       d: "M13.333 5.333L9.333 1.333H4C3.264 1.333 2.667 1.93 2.667 2.667V13.333C2.667 14.07 3.264 14.667 4 14.667H12C12.736 14.667 13.333 14.07 13.333 13.333V5.333ZM9.333 1.333V5.333H13.333M6.667 8.333L5.333 9.667L6.667 11M9.333 8.333L10.667 9.667L9.333 11",
@@ -170,25 +170,25 @@ function CodeBlock({
       "data-slot": "code-block",
       "data-view": view,
       className: cn(
-        "flex flex-col overflow-hidden rounded-2xl border border-border-default bg-bg-card pb-3",
+        "sa:flex sa:flex-col sa:overflow-hidden sa:rounded-2xl sa:border sa:border-border-default sa:bg-bg-card sa:pb-3",
         className
       ),
       ...props,
       children: [
-        showHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pt-2 pr-2 pb-1 pl-4", children: [
+        showHeader && /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-center sa:gap-2 sa:pt-2 sa:pr-2 sa:pb-1 sa:pl-4", children: [
           /* @__PURE__ */ jsx(FileCodeIcon, {}),
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm leading-[18px] font-medium text-text-default", children: filename }),
-          diff && /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1.5 font-mono text-sm leading-(--text-sm--line-height) tracking-normal", children: [
-            /* @__PURE__ */ jsxs("span", { className: "text-status-green-fg", children: [
+          /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate sa:text-sm sa:leading-[18px] sa:font-medium sa:text-text-default", children: filename }),
+          diff && /* @__PURE__ */ jsxs("span", { className: "sa:flex sa:shrink-0 sa:items-center sa:gap-1.5 sa:font-mono sa:text-sm sa:leading-(--sa-text-sm--line-height) sa:tracking-normal", children: [
+            /* @__PURE__ */ jsxs("span", { className: "sa:text-status-green-fg", children: [
               "+",
               added
             ] }),
-            /* @__PURE__ */ jsxs("span", { className: "text-status-red-fg", children: [
+            /* @__PURE__ */ jsxs("span", { className: "sa:text-status-red-fg", children: [
               "\u2212",
               removed
             ] })
           ] }),
-          showActions && /* @__PURE__ */ jsxs(Button, { variant: "tertiary", size: "xs", onClick: copy, className: "text-text-default", children: [
+          showActions && /* @__PURE__ */ jsxs(Button, { variant: "tertiary", size: "xs", onClick: copy, className: "sa:text-text-default", children: [
             copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}),
             /* @__PURE__ */ jsx("span", { "aria-live": "polite", children: copied ? "Copied" : "Copy" })
           ] })
@@ -200,22 +200,22 @@ function CodeBlock({
             role: "region",
             "aria-label": filename ? `${filename} code` : "Code",
             className: cn(
-              "outline-none focus-visible:[box-shadow:inset_0_0_0_2px_var(--action-focus-ring)]",
-              "overflow-x-auto font-mono text-sm leading-(--text-sm--line-height) font-normal tracking-normal",
+              "sa:outline-none sa:focus-visible:[box-shadow:inset_0_0_0_2px_var(--action-focus-ring)]",
+              "sa:overflow-x-auto sa:font-mono sa:text-sm sa:leading-(--sa-text-sm--line-height) sa:font-normal sa:tracking-normal",
               // Without the header the code sits in the middle: 12px above, as below.
-              showHeader ? "pt-1" : "pt-3",
+              showHeader ? "sa:pt-1" : "sa:pt-3",
               tokenClass.plain
             ),
-            children: /* @__PURE__ */ jsx("code", { className: "block w-max min-w-full", children: lines.map((line, i) => /* @__PURE__ */ jsxs(
+            children: /* @__PURE__ */ jsx("code", { className: "sa:block sa:w-max sa:min-w-full", children: lines.map((line, i) => /* @__PURE__ */ jsxs(
               "span",
               {
                 "data-line": line.kind,
                 className: cn(
-                  "flex h-6 items-center px-4",
-                  diff ? "gap-2" : "gap-4",
+                  "sa:flex sa:h-6 sa:items-center sa:px-4",
+                  diff ? "sa:gap-2" : "sa:gap-4",
                   line.kind === "highlighted" && highlightClass,
-                  line.kind === "added" && "bg-status-green-bg",
-                  line.kind === "removed" && "bg-status-red-bg"
+                  line.kind === "added" && "sa:bg-status-green-bg",
+                  line.kind === "removed" && "sa:bg-status-red-bg"
                 ),
                 children: [
                   /* @__PURE__ */ jsx(
@@ -223,8 +223,8 @@ function CodeBlock({
                     {
                       "aria-hidden": true,
                       className: cn(
-                        "w-5 shrink-0 text-right select-none",
-                        line.kind === "added" ? "text-status-green-fg" : line.kind === "removed" ? "text-status-red-fg" : lineNumberClass
+                        "sa:w-5 sa:shrink-0 sa:text-right sa:select-none",
+                        line.kind === "added" ? "sa:text-status-green-fg" : line.kind === "removed" ? "sa:text-status-red-fg" : lineNumberClass
                       ),
                       children: line.number
                     }
@@ -233,17 +233,17 @@ function CodeBlock({
                     "span",
                     {
                       className: cn(
-                        "w-2 shrink-0 text-center select-none",
-                        line.kind === "added" ? "text-status-green-fg" : line.kind === "removed" ? "text-status-red-fg" : lineNumberClass
+                        "sa:w-2 sa:shrink-0 sa:text-center sa:select-none",
+                        line.kind === "added" ? "sa:text-status-green-fg" : line.kind === "removed" ? "sa:text-status-red-fg" : lineNumberClass
                       ),
                       children: [
                         line.kind === "added" ? "+" : line.kind === "removed" ? "\u2212" : " ",
-                        line.kind === "added" && /* @__PURE__ */ jsx("span", { className: "sr-only", children: " added" }),
-                        line.kind === "removed" && /* @__PURE__ */ jsx("span", { className: "sr-only", children: " removed" })
+                        line.kind === "added" && /* @__PURE__ */ jsx("span", { className: "sa:sr-only", children: " added" }),
+                        line.kind === "removed" && /* @__PURE__ */ jsx("span", { className: "sa:sr-only", children: " removed" })
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx("span", { className: "whitespace-pre", children: line.text === "" ? "\u200B" : highlight ? tokenize(line.text).map((t, j) => /* @__PURE__ */ jsx("span", { className: t.kind === "plain" ? void 0 : tokenClass[t.kind], children: t.text }, j)) : line.text })
+                  /* @__PURE__ */ jsx("span", { className: "sa:whitespace-pre", children: line.text === "" ? "\u200B" : highlight ? tokenize(line.text).map((t, j) => /* @__PURE__ */ jsx("span", { className: t.kind === "plain" ? void 0 : tokenClass[t.kind], children: t.text }, j)) : line.text })
                 ]
               },
               i
@@ -256,5 +256,3 @@ function CodeBlock({
 }
 
 export { CodeBlock };
-//# sourceMappingURL=chunk-A5XEM3GF.js.map
-//# sourceMappingURL=chunk-A5XEM3GF.js.map

package/chunk-S7QHBVPX.js

@@ -0,0 +1,45 @@
+import { Thinking } from './chunk-NL574STL.js';
+import { MessageActions } from './chunk-SZJIVBOD.js';
+import { cn } from './chunk-O46O6LFQ.js';
+import 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function Message({
+  role = "assistant",
+  thinking,
+  thinkingLabel = "Thought for a moment",
+  source,
+  actions = true,
+  timestamp,
+  onFeedback,
+  onCopy,
+  onShare,
+  className,
+  children,
+  ...props
+}) {
+  if (role === "user") {
+    return /* @__PURE__ */ jsxs("div", { "data-slot": "message", "data-role": "user", className: cn("sa:flex sa:flex-col sa:items-end sa:gap-2", className), ...props, children: [
+      source && /* @__PURE__ */ jsx(SourceCard, { source }),
+      /* @__PURE__ */ jsx("div", { className: "sa:max-w-full sa:rounded-xl sa:rounded-br-xs sa:bg-action-inverse-bg sa:px-3 sa:py-2", children: /* @__PURE__ */ jsx("div", { className: "sa:max-w-64 sa:text-body sa:break-words sa:text-text-on-inverse", children }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "message", "data-role": "assistant", className: cn("sa:flex sa:flex-col sa:items-start sa:gap-3", className), ...props, children: [
+    thinking && thinking.length > 0 && /* @__PURE__ */ jsx(Thinking, { state: "collapsed", label: thinkingLabel, steps: thinking }),
+    /* @__PURE__ */ jsx("div", { className: "sa:w-full sa:text-body sa:break-words sa:text-text-default", children }),
+    actions && /* @__PURE__ */ jsx(MessageActions, { timestamp, onFeedback, onCopy, onShare })
+  ] });
+}
+function SourceCard({ source }) {
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    source.icon && /* @__PURE__ */ jsx("span", { className: "sa:flex sa:size-4 sa:shrink-0 sa:items-center sa:justify-center sa:[&>*]:size-4", children: source.icon }),
+    /* @__PURE__ */ jsxs("span", { className: "sa:flex sa:min-w-0 sa:flex-col sa:overflow-clip sa:whitespace-nowrap", children: [
+      /* @__PURE__ */ jsx("span", { className: "sa:truncate sa:text-sm sa:leading-[18px] sa:font-medium sa:text-text-default", children: source.title }),
+      source.url != null && /* @__PURE__ */ jsx("span", { className: "sa:truncate sa:text-xs sa:leading-3 sa:tracking-normal sa:text-text-muted", children: source.url })
+    ] })
+  ] });
+  const cls = "sa:flex sa:max-w-full sa:items-center sa:gap-2.5 sa:overflow-clip sa:rounded-lg sa:border sa:border-border-subtle sa:bg-bg-canvas sa:py-2 sa:pr-3 sa:pl-2.5";
+  return source.href ? /* @__PURE__ */ jsx("a", { href: source.href, className: cls, children: body }) : /* @__PURE__ */ jsx("div", { className: cls, children: body });
+}
+
+export { Message };

package/{chunk-TX3H3QMA.js → chunk-SAYNV7B3.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-X2GNMNZQ.js';
+import { Button } from './chunk-T6L32XXH.js';
+import { useSatinLabels } from './chunk-SSOFFQ5T.js';
+import { cn } from './chunk-O46O6LFQ.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